1. Workshop #3
Intégration HTML
Par Kévin Dunglas (@dunglas)
La Coopérative des Tilleuls

3. La Coopérative des Tilleuls
Conception, 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

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

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

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

7. Le code !
Les exemples des deux premiers ateliers et de
celui-ci sont à télécharger sur :
https://github.com/coopTilleuls/workshopHTML

8. Intégration d'une page web
1. Réalisation de la maquette graphique
2. Découpage de la maquette en images
3. Création de la page HTML
4. Elaboration de la feuille de style CSS
5. Développement Javascript / AJAX
6. Création d'un thème pour l'application web
Web-designer, intégrateur, développeur front-
office, développeur back-office

9. Exercice : page des
workshops

10. Le layout HTML
div#container (960px * ?)
header (960px * 100px)
div#content (710px * ?)
article
article
aside#sidebar (205px * ?)
section
section
footer (960px * ?)

11. Les couleurs
● blanc : #ffffff
● bleu foncé : #2b3a4
● bleu clair : #bdd4de

12. Les polices
● Titres : Poiret One - https:
//www.google.
com/webfonts/#QuickUse
Place:quickUse/Family:
Poiret+One
● Textes : Arial

13. Crédits
● Maquette par Joad Martin (La Coopérative
des Tilleuls)
●

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