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.

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