Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Atelierdinitiation auHTML(5) Par Kévin Dunglas (@dunglas) La Coopérative des Tilleuls
La Coopérative des TilleulsConception, développement et formation :● Applications web● Plate-formes e-commerce● Intégratio...
Lesprit coopératif● Société coopérative Scop● Entreprise détenue à 100% par celles et  ceux qui y travaillent● Prises de d...
Internet cest quoi ?● Réseau : équipements (ordinateurs,  routeurs, smartphones...) reliés entre eux  pour échanger des in...
Diagramme représentant Internet
Le World Wide Web cestquoi ?● Lune des applications dinternet● « toile (d’araignée) mondiale »● Consultation de pages sur ...
Page web affichée dans le navigateur Chrome
Les standards du web● Les protocoles HTTP et HTTPS (Hypertext  Transfer Protocol [Secure]) permettent au  navigateur et au...
Workflow de la créationdun site en agence● Le webdesigner crée les maquettes  graphique des pages du site● Lintégrateur tr...
HTML (Hypertext MarkupLanguage)● Format de données standardisé par le W3C  permettant de représenter une page web● Structu...
Logo de HTML version 5, en cours de standardisation
CSS (Cascading Style Sheets)● Langage standardisé par le W3C permettant  de mettre en forme les documents HTML● Quelques u...
Javascript● Langage de programmation standardisé par  lECMA● Côté client, permet dajouter de lintéractivité  aux pages web...
Autres technologiesIl existe dautres technologies standardisées,lisibles par les navigateurs web modernes,intégrées et com...
Outils pour ledéveloppement web● Un éditeur de texte (ex : Notepad++) permet  de créer des documents HTML (fichier.html)● ...
Ma première page HTML  <!DOCTYPE html>  <html>    <head>      <meta charset="utf-8" /> <title>Bonjour...</title>    </head...
Premières constations● HTML est un langage texte à balises● Chaque balise ouverte doit être refermée  ○ Il existe des bali...
La balise <head>● Meta-informations sur la page   ○ Codage de caractères utilisé (ici UTF-8)   ○ Titre de la page (affiché...
La balise <body>● Contient les données qui seront affichées  par le navigateur web● Cest la balise principale dun document...
Notre page dans le navigateur Firefox
Les mains dans le codeIl est temps de sy mettre ! Étudions ensemblesces quelques fichiers HTML : https://github.com/coopTi...
Pour aller plus loin● Initializr (en) : http://www.initializr.com● Alsacréations (fr) : http://www.alsacreations.  com● Op...
Crédits● Wikipédia●
http://la-cooperative-des-tilleuls.com
Atelier initiation au html5
Upcoming SlideShare
Loading in …5
×

Atelier initiation au html5

3,111 views

Published on

Présentation diffusée lors de la première d'une série d'ateliers gratuits autour du développement front-end HTML5 / CSS3 / Javascript animés par la Coopérative des Tilleuls.

Au menu de celui-ci :
- Comprendre le fonctionnement d'internet, du web et du mode de communication client-serveur
- Présentation générale des trois grands piliers des technologies web client : HTML (structuration), CSS (présentation) et Javascript (intéractivité)
- Réaliser sa première page HTML

Ces ateliers ouverts à tous dans la limite des places disponibles sont encadrés par des professionnels du développement coopérateurs de La Coopérative des Tilleuls.

Published in: Technology
  • Be the first to comment

Atelier initiation au html5

  1. 1. Atelierdinitiation auHTML(5) Par Kévin Dunglas (@dunglas) La Coopérative des Tilleuls
  2. 2. La Coopérative des TilleulsConception, développement et formation :● Applications web● Plate-formes e-commerce● Intégration aux places de marché● Intégration aux SI bancaires, transporteurs...● Jeux Facebook, advergames, serious games● Applications mobiles● Identités graphiques● Clients : Walibuy, Pictime, Geophyle, Wokine, 6 PEO, Agence 1984
  3. 3. Lesprit coopératif● Société coopérative Scop● Entreprise détenue à 100% par celles et ceux qui y travaillent● Prises de décisions démocratiques● Esprit et ambiance favorisant la coopération, l’entraide et la solidarité● Soutien à des projets culturels, artistiques, associatifs, syndicaux...● Démarche douverture vers les habitants et les travailleurs du secteur (ex. : cet atelier)
  4. 4. Internet cest quoi ?● Réseau : équipements (ordinateurs, routeurs, smartphones...) reliés entre eux pour échanger des informations● Internet : réseau de réseaux● Décentralisé● Mondial● Différentes applications : courrier électronique, messagerie instantanée, peer- to-peer, World Wide Web...
  5. 5. Diagramme représentant Internet
  6. 6. Le World Wide Web cestquoi ?● Lune des applications dinternet● « toile (d’araignée) mondiale »● Consultation de pages sur des sites ○ URL dune page : http://www.w3.org/html/● Des hyperliens lient les pages entre elles● Les serveurs web hébergent les pages● Les ordinateurs clients téléchargent et affichent les pages via un navigateur web ○ Navigateurs populaires : Firefox, Chrome, Internet Explorer
  7. 7. Page web affichée dans le navigateur Chrome
  8. 8. Les standards du web● Les protocoles HTTP et HTTPS (Hypertext Transfer Protocol [Secure]) permettent au navigateur et au serveur web de dialoguer ○ Télécharger des pages web ○ Télécharger des fichiers (PDF, images, vidéos...) ○ Envoyer des données via des formulaires● Les pages web sont généralement écrites avec HTML, CSS et Javascript● Standardisation afin de permettre un affichage et un comportement similaire sur tous les navigateurs
  9. 9. Workflow de la créationdun site en agence● Le webdesigner crée les maquettes graphique des pages du site● Lintégrateur transforme ces maquettes en pages web avec HTML et CSS● Le développeur front-end programme lintéractivité des pages avec Javascript● Le développeur back-end programme lapplication sous-jacente (généralement avec PHP, Django, Ruby on Rails...)
  10. 10. HTML (Hypertext MarkupLanguage)● Format de données standardisé par le W3C permettant de représenter une page web● Structure les données contenues dans le document ○ Titres, paragraphes, listes, articles, menu...● Permet dinclure des ressources multimédia ○ Images, vidéos, sons...● Depuis HTML4, ne doit plus contenir la présentation (couleurs, polices, disposition des éléments...)
  11. 11. Logo de HTML version 5, en cours de standardisation
  12. 12. CSS (Cascading Style Sheets)● Langage standardisé par le W3C permettant de mettre en forme les documents HTML● Quelques utilisations : ○ Disposer les éléments dune page les uns par rapport aux autres ○ Définir les couleurs, les polices, les bordures... des éléments ○ Adapter la présentation en fonction du terminal de lecture (media queries)● Intérêts : séparer structure et présentation, sadapter aux capacités du terminal
  13. 13. Javascript● Langage de programmation standardisé par lECMA● Côté client, permet dajouter de lintéractivité aux pages web● Exemples dutilisations : ○ Valider des formulaires ○ Modifier en temps réel la page affichée par le navigateur ○ Rendre plus ergonomique et fluide lutilisation dune page web (ex : Gmail recourt massivement à Javascript)
  14. 14. Autres technologiesIl existe dautres technologies standardisées,lisibles par les navigateurs web modernes,intégrées et complémentaires à HTML, CSS etJavascript parmi lesquelles :● SVG (Scalable Vector Graphics) : dessin vectoriel● WebGL : affichage 3D
  15. 15. Outils pour ledéveloppement web● Un éditeur de texte (ex : Notepad++) permet de créer des documents HTML (fichier.html)● Un environnement de développement intégré (ex : Aptana Studio) permet de bénéficier de la coloration syntaxique, de lautocomplétion, de la validation temps réel des documents...● Un simple navigateur permet douvrir et de visualiser les pages créées● Les inspecteurs tels Firebug aident à corriger et améliorer vos pages
  16. 16. Ma première page HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Bonjour...</title> </head> <body> <h1>Hello World</h1> <p>Ma première page web.</p> </body> </html>
  17. 17. Premières constations● HTML est un langage texte à balises● Chaque balise ouverte doit être refermée ○ Il existe des balises "orphelines" comme <meta />● Une balise peut contenir dautres balises● La première ligne appelée le doctype précise quelle version de HTML est utilisée (ici HTML5)● Une balise (ex. <meta />) peut avoir des attributs clef="valeur", ici charset="utf-8"● La balise <html> englobe tout le document
  18. 18. La balise <head>● Meta-informations sur la page ○ Codage de caractères utilisé (ici UTF-8) ○ Titre de la page (affichée entre autres dans le titre de la fenêtre du navigateur) ○ Éventuellement des informations utiles aux moteurs de recherche, robots et autres agents logiciels : description, miniature à afficher lors dun partage Facebook...● Cette balise est obligatoire● Cest généralement dans la partie "head" que sont liés les fichiers CSS et Javascript
  19. 19. La balise <body>● Contient les données qui seront affichées par le navigateur web● Cest la balise principale dun document HTML● Contient des éléments de structuration, ici : ○ Un titre de niveau 1 "Hello World" ○ Un paragraphe contenant le texte "Ma première page web."
  20. 20. Notre page dans le navigateur Firefox
  21. 21. Les mains dans le codeIl est temps de sy mettre ! Étudions ensemblesces quelques fichiers HTML : https://github.com/coopTilleuls/workshopHTML
  22. 22. Pour aller plus loin● Initializr (en) : http://www.initializr.com● Alsacréations (fr) : http://www.alsacreations. com● Openweb (fr) : http://openweb.eu.org● Pompage (fr) : http://www.pompage.net● Mozilla Developer Network (fr) : https: //developer.mozilla.org/fr/● Dev.Opera (en) : http://dev.opera.com● A List Apart (en) : http://www.alistapart.com● Smashing Magazine (en) : http://www. smashingmagazine.com
  23. 23. Crédits● Wikipédia●
  24. 24. http://la-cooperative-des-tilleuls.com

×