atelier #3 intégration html
Post on 24-May-2015
817 Views
Preview:
DESCRIPTION
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
top related