Workshop #3Inté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égratio...
Lesprit coopératif● Société coopérative Scop● Entreprise détenue à 100% par celles et  ceux qui y travaillent● Prises de d...
<Workshop n="1" />● Définition dinternet et du web● HTML : langage de structuration sémantique  des documents web● Défini ...
.Workshop { font-size: 2px }● CSS : feuilles de style en cascade● Spécifie la présentation dun document  HTML● Positionnem...
Le code !Les exemples des deux premiers ateliers et decelui-ci sont à télécharger sur :https://github.com/coopTilleuls/wor...
Intégration dune page web1.   Réalisation de la maquette graphique2.   Découpage de la maquette en images3.   Création de ...
Exercice : page desworkshops
Le layout HTMLdiv#container (960px * ?) header (960px * 100px) div#content (710px * ?)   article   article aside#sidebar (...
Les couleurs● blanc : #ffffff● bleu foncé : #2b3a4● bleu clair : #bdd4de
Les polices● Titres : Poiret One - https:  //www.google.  com/webfonts/#QuickUse  Place:quickUse/Family:  Poiret+One● Text...
Crédits● Maquette par Joad Martin (La Coopérative  des Tilleuls)●
http://la-cooperative-des-tilleuls.com
Atelier #3 intégration html
Prochain SlideShare
Chargement dans…5
×

Atelier #3 intégration html

1 193 vues

Publié le

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.

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 193
Sur SlideShare
0
Issues des intégrations
0
Intégrations
241
Actions
Partages
0
Téléchargements
11
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Atelier #3 intégration html

  1. 1. Workshop #3Intégration HTML Par Kévin Dunglas (@dunglas) La Coopérative des Tilleuls
  2. 2. 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
  3. 3. 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)
  4. 4. <Workshop n="1" />● Définition dinternet 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
  5. 5. .Workshop { font-size: 2px }● CSS : feuilles de style en cascade● Spécifie la présentation dun document HTML● Positionnement des éléments, polices, couleurs, images de fond...● Les slides : http://www.slideshare. net/coopTilleuls/atelier-2-initiation-a-css
  6. 6. Le code !Les exemples des deux premiers ateliers et decelui-ci sont à télécharger sur :https://github.com/coopTilleuls/workshopHTML
  7. 7. Intégration dune 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 dun thème pour lapplication webWeb-designer, intégrateur, développeur front-office, développeur back-office
  8. 8. Exercice : page desworkshops
  9. 9. Le layout HTMLdiv#container (960px * ?) header (960px * 100px) div#content (710px * ?) article article aside#sidebar (205px * ?) section section footer (960px * ?)
  10. 10. Les couleurs● blanc : #ffffff● bleu foncé : #2b3a4● bleu clair : #bdd4de
  11. 11. Les polices● Titres : Poiret One - https: //www.google. com/webfonts/#QuickUse Place:quickUse/Family: Poiret+One● Textes : Arial
  12. 12. Crédits● Maquette par Joad Martin (La Coopérative des Tilleuls)●
  13. 13. http://la-cooperative-des-tilleuls.com

×