Atelier initiation au html5
-
Upload
les-tilleulscoop -
Category
Technology
-
view
1.840 -
download
0
description
Transcript of 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