• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Atelier initiation au html5
 

Atelier initiation au html5

on

  • 1,889 views

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

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.

Statistics

Views

Total Views
1,889
Views on SlideShare
1,702
Embed Views
187

Actions

Likes
0
Downloads
43
Comments
0

2 Embeds 187

http://les-tilleuls.coop 186
http://nodeslide.herokuapp.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Atelier initiation au html5 Atelier initiation au html5 Presentation Transcript

    • 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é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
    • 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)
    • 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...
    • Diagramme représentant Internet
    • 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
    • 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é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...)
    • 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...)
    • 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 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
    • 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)
    • 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
    • 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
    • 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 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
    • 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
    • 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."
    • Notre page dans le navigateur Firefox
    • Les mains dans le codeIl est temps de sy mettre ! Étudions ensemblesces 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