Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

523 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

  1. 1. Cours HTML / CSS Learn to code HTML/CSS easily Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 1
  2. 2. 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 Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 2
  3. 3. Rappel du projet Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 3
  4. 4. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 4
  5. 5. Balises meta Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 5
  6. 6. 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). Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 6
  7. 7. 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 Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 7
  8. 8. 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 Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 8
  9. 9. 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. Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 9
  10. 10. Des questions ? Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 10

×