iscom::html/css::session6 (20141119)
Post on 09-Jul-2015
256 Views
Preview:
DESCRIPTION
TRANSCRIPT
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 1
Cours HTML / CSSLearn to code
HTML/CSS easily
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
Cours HTML / CSS
• 6 Sessions de ~3 heures > ~18 heures au total,
• A chaque sessions aura des objectifs à atteindre pour pouvoir continuer à la prochaine session,
• 30% de théorie et 70% de pratique,
• Finalité : Monter un site en HTML / CSS responsive,
• En bonus, utilisation d’outil de versioning
2
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
Rappel du projet
3
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 4
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
Balises meta
5
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
Balises meta• Une balise meta est une information sur la nature et le contenu d’une page web, ajoutée dans l’en-
tête de la page au moyen de marqueurs HTML.
• Depuis quelques mois, le nombre de balise meta a considérablement augmenter.
• Nous avons :
• les balises de base (meta charset, viewport, …)
• les balises utile pour le référencement (meta description, keywords, title, favicon, …),
• les balises de partage social (opengraph) (meta og:title, og:description, …),
• les balises de personnalisation (meta apple-touch-icon, msapplication-TileColor, …),
• les balises personnalisées (vos propres meta non compatible W3C).
6
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
Balises meta
• Une liste non exhaustive est disponible dans ce repository :
https://github.com/icom-nicolasaguenot/metalist
• Vous pouvez le récupérer sur vos instances locales en faisant un git clone :
git clone git@github.com:icom-nicolasaguenot/metalist.git
7
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
La syntaxe MarkDown (fichiers *.md)
• Cette syntaxe est simple à prendre en main et permet de créer des fichiers lisible rapidement par les intervenants d’un projet.
• Toute la syntaxe est présentée ici :
http://bit.ly/1CsYJDL Lien complet : https://github.com/fletcher/MultiMarkdown/blob/master/Documentation/Markdown%20Syntax.md
8
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
Exercice final • Créer un fichier myProject.md dans votre repository GIT.
• Si vous avez du mal à créer le même fichier :
http://bit.ly/1xpnIbc
• Intégrer le contenu comme sur l’image à droite.
• Répondez à ces 3 questions en argumentant vos réponses :
• Pourquoi mon projet est-il organisé de cette manière ? (Avantages et inconvénient de cette organisation)
• Comment suis-je arrivé à ce résultat ? (Différentes étapes, problématiques d’organisation)
• Quelles sont les difficultés rencontrés durant ces 6 sessions ?
• Une fois terminé, dernier commit -m ‘final commit’ et dernier push.
9
Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52
Des questions ?
10
top related