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