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
Prochain SlideShare
Chargement dans…5
×

Atelier initiation au html5

2 722 vues

Publié le

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.

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 722
Sur SlideShare
0
Issues des intégrations
0
Intégrations
242
Actions
Partages
0
Téléchargements
96
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×