Atelier initiation au html5

Atelier d'initiation au HTML(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é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

L'esprit 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 d'ouverture vers les habitants et

les travailleurs du secteur (ex. : cet atelier)

Internet c'est 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...

Diagramme représentant Internet

Le World Wide Web c'est quoi ?● L'une des applications d'internet● « toile (d’araignée) mondiale »● Consultation de pages sur des sites

○ URL d'une 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

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 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

Workflow de la création d'un site en agence● Le webdesigner crée les maquettes

graphique des pages du site● L'intégrateur transforme ces maquettes

en pages web avec HTML et CSS● Le développeur front-end programme

l'intéractivité des pages avec Javascript● Le développeur back-end programme

l'application sous-jacente (généralement avec PHP, Django, Ruby on Rails...)

HTML (Hypertext Markup Language)

● 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 d'inclure des ressources multimédia○ Images, vidéos, sons...

● Depuis HTML4, ne doit plus contenir la présentation (couleurs, polices, disposition des éléments...)

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 utilisations :○ Disposer les éléments d'une 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,

s'adapter aux capacités du terminal

Javascript● Langage de programmation standardisé par

l'ECMA● Côté client, permet d'ajouter de l'intéractivité

aux pages web● Exemples d'utilisations :

○ Valider des formulaires○ Modifier en temps réel la page affichée par le

navigateur○ Rendre plus ergonomique et fluide l'utilisation d'une

page web (ex : Gmail recourt massivement à Javascript)

Autres technologiesIl existe d'autres technologies standardisées, lisibles par les navigateurs web modernes, intégrées et complémentaires à HTML, CSS et Javascript parmi lesquelles :● SVG (Scalable Vector Graphics) : dessin

vectoriel● WebGL : affichage 3D

Outils pour le dé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 l'autocomplétion, de la validation temps réel des documents...

● Un simple navigateur permet d'ouvrir et de visualiser les pages créées

● Les inspecteurs tels Firebug aident à corriger et améliorer vos pages

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>

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 d'autres 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

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 d'un partage Facebook...

● Cette balise est obligatoire● C'est généralement dans la partie "head"

que sont liés les fichiers CSS et Javascript

La balise <body>● Contient les données qui seront affichées

par le navigateur web● C'est la balise principale d'un 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."

Notre page dans le navigateur Firefox

Les mains dans le codeIl est temps de s'y mettre ! Étudions ensembles ces quelques fichiers HTML : https://github.com/coopTilleuls/workshopHTML

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

Crédits● Wikipédia●

http://la-cooperative-des-tilleuls.com