atelier #3 intégration html
DESCRIPTION
A la demande générale La Coopérative des Tilleuls vous invite à un troisième workshop d'initiation aux technologies du web.Après avoir appris les bases de HTML lors du premier workshop et de CSS lors du second, nous réaliserons ensemble l'intégration complète d'une page web à partir d'une maquette graphique.Nous apprendrons à découper une maquette afin de la transformer en page web puis nous reverrons les techniques apprises lors des premiers ateliers et les mettrons en pratique sur ce cas concret.C'est l'occasion pour ceux qui n'ont pas pu assister aux séances précédentes de prendre le train en marche et pour les autres de se perfectionner.TRANSCRIPT
Workshop #3 Intégration HTML
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)
<Workshop n="1" />● Définition d'internet et du web● HTML : langage de structuration sémantique
des documents web● Défini les différents composants du
document : titres, articles, paragraphes, listes, images, tableaux...
● Les slides : http://slideshare.net/coopTilleuls/atelier-initiation-au-html5
.Workshop { font-size: 2px }● CSS : feuilles de style en cascade● Spécifie la présentation d'un document
HTML● Positionnement des éléments, polices,
couleurs, images de fond...● Les slides : http://www.slideshare.
net/coopTilleuls/atelier-2-initiation-a-css
Le code !Les exemples des deux premiers ateliers et de celui-ci sont à télécharger sur :
https://github.com/coopTilleuls/workshopHTML
Intégration d'une page web1. Réalisation de la maquette graphique2. Découpage de la maquette en images3. Création de la page HTML4. Elaboration de la feuille de style CSS5. Développement Javascript / AJAX6. Création d'un thème pour l'application web
Web-designer, intégrateur, développeur front-office, développeur back-office
Exercice : page des workshops
Le layout HTMLdiv#container (960px * ?) header (960px * 100px) div#content (710px * ?) article article aside#sidebar (205px * ?) section section footer (960px * ?)
Les couleurs
● blanc : #ffffff● bleu foncé : #2b3a4● bleu clair : #bdd4de
Les polices
● Titres : Poiret One - https://www.google.com/webfonts/#QuickUsePlace:quickUse/Family:Poiret+One
● Textes : Arial
Crédits● Maquette par Joad Martin (La Coopérative
des Tilleuls)●
http://la-cooperative-des-tilleuls.com