Download - ISCOM::HTML/CSS::session6 (20141119)

Transcript
Page 1: ISCOM::HTML/CSS::session6 (20141119)

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 1

Cours HTML / CSSLearn to code

HTML/CSS easily

Page 2: ISCOM::HTML/CSS::session6 (20141119)

Nicolas AGUENOT - Freelance web developer - [email protected] - +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

Page 3: ISCOM::HTML/CSS::session6 (20141119)

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52

Rappel du projet

3

Page 4: ISCOM::HTML/CSS::session6 (20141119)

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 4

Page 5: ISCOM::HTML/CSS::session6 (20141119)

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52

Balises meta

5

Page 6: ISCOM::HTML/CSS::session6 (20141119)

Nicolas AGUENOT - Freelance web developer - [email protected] - +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

Page 7: ISCOM::HTML/CSS::session6 (20141119)

Nicolas AGUENOT - Freelance web developer - [email protected] - +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 [email protected]:icom-nicolasaguenot/metalist.git

7

Page 8: ISCOM::HTML/CSS::session6 (20141119)

Nicolas AGUENOT - Freelance web developer - [email protected] - +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

Page 9: ISCOM::HTML/CSS::session6 (20141119)

Nicolas AGUENOT - Freelance web developer - [email protected] - +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

Page 10: ISCOM::HTML/CSS::session6 (20141119)

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52

Des questions ?

10