SlideShare une entreprise Scribd logo

Atelier #3 intégration html

Les-Tilleuls.coop
Les-Tilleuls.coop
Les-Tilleuls.coopCEO at Les-Tilleuls.coop, freelance software architect à Les-Tilleuls.coop

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.

Atelier #3 intégration html

1  sur  14
Télécharger pour lire hors ligne
Workshop #3
Intégration HTML
 Par Kévin Dunglas (@dunglas)
 La Coopérative des Tilleuls
Atelier #3 intégration html
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
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

Recommandé

Atelier #2 initiation à css
Atelier #2 initiation à cssAtelier #2 initiation à css
Atelier #2 initiation à cssLes-Tilleuls.coop
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JSENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JSHoracio Gonzalez
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...Horacio Gonzalez
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...Horacio Gonzalez
 
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JSENIB 2016 2017 - CAI Web S02E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JSHoracio Gonzalez
 
GDG Rennes - Bootcamp Initiation Android - Théorie
GDG Rennes - Bootcamp Initiation Android -  ThéorieGDG Rennes - Bootcamp Initiation Android -  Théorie
GDG Rennes - Bootcamp Initiation Android - ThéorieHoracio Gonzalez
 
Bootcamp d'Initiation à Android - 2013/11/30
Bootcamp d'Initiation à Android  - 2013/11/30Bootcamp d'Initiation à Android  - 2013/11/30
Bootcamp d'Initiation à Android - 2013/11/30Horacio Gonzalez
 

Contenu connexe

Tendances

FinistJUG - J’ai besoin d’une appli web rapidement
FinistJUG -   J’ai besoin d’une appli web rapidementFinistJUG -   J’ai besoin d’une appli web rapidement
FinistJUG - J’ai besoin d’une appli web rapidementHoracio Gonzalez
 
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidementENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidementHoracio Gonzalez
 
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3 ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3 Horacio Gonzalez
 
Google Drive : présentation
Google Drive : présentationGoogle Drive : présentation
Google Drive : présentationJennifer Pône
 
Haxe, le graal du développeur touche-à-tout
Haxe, le graal du développeur touche-à-toutHaxe, le graal du développeur touche-à-tout
Haxe, le graal du développeur touche-à-toutFrançois Barbut
 
7 outils pour créer un calendrier de l'avent interactif
7 outils pour créer un calendrier de l'avent interactif7 outils pour créer un calendrier de l'avent interactif
7 outils pour créer un calendrier de l'avent interactifIsabelle Dremeau
 
N. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHS
N. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHSN. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHS
N. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHSOpenEdition
 

Tendances (8)

FinistJUG - J’ai besoin d’une appli web rapidement
FinistJUG -   J’ai besoin d’une appli web rapidementFinistJUG -   J’ai besoin d’une appli web rapidement
FinistJUG - J’ai besoin d’une appli web rapidement
 
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidementENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
 
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3 ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
 
Google Drive : présentation
Google Drive : présentationGoogle Drive : présentation
Google Drive : présentation
 
Haxe, le graal du développeur touche-à-tout
Haxe, le graal du développeur touche-à-toutHaxe, le graal du développeur touche-à-tout
Haxe, le graal du développeur touche-à-tout
 
7 outils pour créer un calendrier de l'avent interactif
7 outils pour créer un calendrier de l'avent interactif7 outils pour créer un calendrier de l'avent interactif
7 outils pour créer un calendrier de l'avent interactif
 
N. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHS
N. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHSN. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHS
N. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHS
 
Google Drive Mars 2015
Google Drive Mars 2015Google Drive Mars 2015
Google Drive Mars 2015
 

En vedette

Diaporama du sfPot Lillois du 20 mars 2014
Diaporama du sfPot Lillois du 20 mars 2014Diaporama du sfPot Lillois du 20 mars 2014
Diaporama du sfPot Lillois du 20 mars 2014Les-Tilleuls.coop
 
Workshop HTML5 : référencement grâce à la sémantique
Workshop HTML5 : référencement grâce à la sémantiqueWorkshop HTML5 : référencement grâce à la sémantique
Workshop HTML5 : référencement grâce à la sémantiqueLes-Tilleuls.coop
 
Symfony 2 : Performances et Optimisations
Symfony 2 : Performances et OptimisationsSymfony 2 : Performances et Optimisations
Symfony 2 : Performances et OptimisationsLes-Tilleuls.coop
 
Creating hypermedia APIs in a few minutes using the API Platform framework
Creating hypermedia APIs in a few minutes using the API Platform frameworkCreating hypermedia APIs in a few minutes using the API Platform framework
Creating hypermedia APIs in a few minutes using the API Platform frameworkLes-Tilleuls.coop
 
Hype vs. Reality: The AI Explainer
Hype vs. Reality: The AI ExplainerHype vs. Reality: The AI Explainer
Hype vs. Reality: The AI ExplainerLuminary Labs
 

En vedette (6)

Diaporama du sfPot Lillois du 20 mars 2014
Diaporama du sfPot Lillois du 20 mars 2014Diaporama du sfPot Lillois du 20 mars 2014
Diaporama du sfPot Lillois du 20 mars 2014
 
Workshop HTML5 : référencement grâce à la sémantique
Workshop HTML5 : référencement grâce à la sémantiqueWorkshop HTML5 : référencement grâce à la sémantique
Workshop HTML5 : référencement grâce à la sémantique
 
Symfony 2 : Performances et Optimisations
Symfony 2 : Performances et OptimisationsSymfony 2 : Performances et Optimisations
Symfony 2 : Performances et Optimisations
 
HTML, CSS et Javascript
HTML, CSS et JavascriptHTML, CSS et Javascript
HTML, CSS et Javascript
 
Creating hypermedia APIs in a few minutes using the API Platform framework
Creating hypermedia APIs in a few minutes using the API Platform frameworkCreating hypermedia APIs in a few minutes using the API Platform framework
Creating hypermedia APIs in a few minutes using the API Platform framework
 
Hype vs. Reality: The AI Explainer
Hype vs. Reality: The AI ExplainerHype vs. Reality: The AI Explainer
Hype vs. Reality: The AI Explainer
 

Similaire à Atelier #3 intégration html

Cv nicolas-charles-09042012-fr
Cv nicolas-charles-09042012-frCv nicolas-charles-09042012-fr
Cv nicolas-charles-09042012-frCharles Nicolas
 
Book projets-web
Book projets-webBook projets-web
Book projets-webacoquard
 
meetup devops aix-marseille 27/10/2022
meetup devops aix-marseille 27/10/2022meetup devops aix-marseille 27/10/2022
meetup devops aix-marseille 27/10/2022Frederic Leger
 
7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaborationLaurent Barbat
 
Storyboarding for the web : Methodology and Tools
Storyboarding for the web : Methodology and ToolsStoryboarding for the web : Methodology and Tools
Storyboarding for the web : Methodology and ToolsEric DI POL
 
Présentation de l'agence Eliophot
Présentation de l'agence EliophotPrésentation de l'agence Eliophot
Présentation de l'agence EliophotFabrice Granier
 
Introduction Gestion Projet web
Introduction Gestion Projet webIntroduction Gestion Projet web
Introduction Gestion Projet webguest6d3f53
 
introduction à la gestion de projet
introduction à la gestion de projetintroduction à la gestion de projet
introduction à la gestion de projetlaureno
 
Site internet cahier des charges
Site internet cahier des chargesSite internet cahier des charges
Site internet cahier des chargesJennifer Pône
 
Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)Chamseddine Ouerhani
 
Formation UX Design - Usages mobiles et web
Formation UX Design - Usages mobiles et webFormation UX Design - Usages mobiles et web
Formation UX Design - Usages mobiles et webNovUp
 
Workn coffee 2015-refonte de site web
Workn coffee 2015-refonte de site webWorkn coffee 2015-refonte de site web
Workn coffee 2015-refonte de site webNet Design
 
Atelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site WebAtelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site Webambin_fr
 

Similaire à Atelier #3 intégration html (20)

Cv nicolas-charles-09042012-fr
Cv nicolas-charles-09042012-frCv nicolas-charles-09042012-fr
Cv nicolas-charles-09042012-fr
 
Rapport logiciels evenement_payombo_ly
Rapport  logiciels evenement_payombo_lyRapport  logiciels evenement_payombo_ly
Rapport logiciels evenement_payombo_ly
 
Cv2015
Cv2015Cv2015
Cv2015
 
Staelens cv 2019 word
Staelens cv 2019 wordStaelens cv 2019 word
Staelens cv 2019 word
 
Book projets-web
Book projets-webBook projets-web
Book projets-web
 
meetup devops aix-marseille 27/10/2022
meetup devops aix-marseille 27/10/2022meetup devops aix-marseille 27/10/2022
meetup devops aix-marseille 27/10/2022
 
7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration
 
test
testtest
test
 
Storyboarding for the web : Methodology and Tools
Storyboarding for the web : Methodology and ToolsStoryboarding for the web : Methodology and Tools
Storyboarding for the web : Methodology and Tools
 
Présentation de l'agence Eliophot
Présentation de l'agence EliophotPrésentation de l'agence Eliophot
Présentation de l'agence Eliophot
 
Introduction Gestion Projet web
Introduction Gestion Projet webIntroduction Gestion Projet web
Introduction Gestion Projet web
 
introduction à la gestion de projet
introduction à la gestion de projetintroduction à la gestion de projet
introduction à la gestion de projet
 
Site internet cahier des charges
Site internet cahier des chargesSite internet cahier des charges
Site internet cahier des charges
 
Metiers Design Numerique 2009
Metiers Design Numerique 2009Metiers Design Numerique 2009
Metiers Design Numerique 2009
 
Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)
 
Formation UX Design - Usages mobiles et web
Formation UX Design - Usages mobiles et webFormation UX Design - Usages mobiles et web
Formation UX Design - Usages mobiles et web
 
Workn coffee 2015-refonte de site web
Workn coffee 2015-refonte de site webWorkn coffee 2015-refonte de site web
Workn coffee 2015-refonte de site web
 
Atelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site WebAtelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site Web
 
Cahierdescharges
CahierdeschargesCahierdescharges
Cahierdescharges
 
REMERCIEMENT.docx
REMERCIEMENT.docxREMERCIEMENT.docx
REMERCIEMENT.docx
 

Plus de Les-Tilleuls.coop

Symfony on steroids
: Vue.js, Mercure, Panther
Symfony on steroids
: Vue.js, Mercure, PantherSymfony on steroids
: Vue.js, Mercure, Panther
Symfony on steroids
: Vue.js, Mercure, PantherLes-Tilleuls.coop
 
Official "push" and real-time capabilities for Symfony and API Platform (Merc...
Official "push" and real-time capabilities for Symfony and API Platform (Merc...Official "push" and real-time capabilities for Symfony and API Platform (Merc...
Official "push" and real-time capabilities for Symfony and API Platform (Merc...Les-Tilleuls.coop
 
Progressively enhance your Symfony 4 app using Vue, API Platform, Mercure and...
Progressively enhance your Symfony 4 app using Vue, API Platform, Mercure and...Progressively enhance your Symfony 4 app using Vue, API Platform, Mercure and...
Progressively enhance your Symfony 4 app using Vue, API Platform, Mercure and...Les-Tilleuls.coop
 
HTTP/2: speed up your apps and dispatch real time updates (Symfony and API Pl...
HTTP/2: speed up your apps and dispatch real time updates (Symfony and API Pl...HTTP/2: speed up your apps and dispatch real time updates (Symfony and API Pl...
HTTP/2: speed up your apps and dispatch real time updates (Symfony and API Pl...Les-Tilleuls.coop
 
Panther: test your Symfony apps with real web browsers
Panther: test your Symfony apps with real web browsersPanther: test your Symfony apps with real web browsers
Panther: test your Symfony apps with real web browsersLes-Tilleuls.coop
 
API Platform: A Framework for API-driven Projects
API Platform: A Framework for API-driven ProjectsAPI Platform: A Framework for API-driven Projects
API Platform: A Framework for API-driven ProjectsLes-Tilleuls.coop
 
API Platform and Symfony: a Framework for API-driven Projects
API Platform and Symfony: a Framework for API-driven ProjectsAPI Platform and Symfony: a Framework for API-driven Projects
API Platform and Symfony: a Framework for API-driven ProjectsLes-Tilleuls.coop
 
API Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework ResurrectionAPI Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework ResurrectionLes-Tilleuls.coop
 
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)Les-Tilleuls.coop
 

Plus de Les-Tilleuls.coop (9)

Symfony on steroids
: Vue.js, Mercure, Panther
Symfony on steroids
: Vue.js, Mercure, PantherSymfony on steroids
: Vue.js, Mercure, Panther
Symfony on steroids
: Vue.js, Mercure, Panther
 
Official "push" and real-time capabilities for Symfony and API Platform (Merc...
Official "push" and real-time capabilities for Symfony and API Platform (Merc...Official "push" and real-time capabilities for Symfony and API Platform (Merc...
Official "push" and real-time capabilities for Symfony and API Platform (Merc...
 
Progressively enhance your Symfony 4 app using Vue, API Platform, Mercure and...
Progressively enhance your Symfony 4 app using Vue, API Platform, Mercure and...Progressively enhance your Symfony 4 app using Vue, API Platform, Mercure and...
Progressively enhance your Symfony 4 app using Vue, API Platform, Mercure and...
 
HTTP/2: speed up your apps and dispatch real time updates (Symfony and API Pl...
HTTP/2: speed up your apps and dispatch real time updates (Symfony and API Pl...HTTP/2: speed up your apps and dispatch real time updates (Symfony and API Pl...
HTTP/2: speed up your apps and dispatch real time updates (Symfony and API Pl...
 
Panther: test your Symfony apps with real web browsers
Panther: test your Symfony apps with real web browsersPanther: test your Symfony apps with real web browsers
Panther: test your Symfony apps with real web browsers
 
API Platform: A Framework for API-driven Projects
API Platform: A Framework for API-driven ProjectsAPI Platform: A Framework for API-driven Projects
API Platform: A Framework for API-driven Projects
 
API Platform and Symfony: a Framework for API-driven Projects
API Platform and Symfony: a Framework for API-driven ProjectsAPI Platform and Symfony: a Framework for API-driven Projects
API Platform and Symfony: a Framework for API-driven Projects
 
API Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework ResurrectionAPI Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework Resurrection
 
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
 

Atelier #3 intégration html

  • 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) ●