SlideShare une entreprise Scribd logo

Atelier #2 initiation à css

Second atelier gratuit autour des technologies HTML5 / CSS3 / Javascript organisé par La Coopérative des Tilleuls. Au menu cette fois-ci une initiation à l'intégration web grâce aux feuilles de style CSS. Après avoir appris lors du premier atelier à créer et à structurer des pages web grâce à HTML, nous verrons comment les mettre en forme avec les feuilles de style en cascade CSS. Nous découvrirons ensembles : - les fondements du langage CSS (syntaxe, cascade, sélecteurs) - quelques balises et attributs HTML utiles pour la CSS - le formatage de texte (police, couleur, gras, italique...) - le positionnement des éléments - les couleurs et images de fond

1  sur  18
Télécharger pour lire hors ligne
Workshop #2
Initiation au CSS
 Par Kévin Dunglas (@dunglas)
 La Coopérative des Tilleuls
Atelier #2 initiation à css
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 #1
● Définition d'internet et du web
● Présentation des standards du web
● Découverte du langage de balisage HTML
● Les slides : http://slideshare.
  net/coopTilleuls/atelier-initiation-au-html5
● Les exemples : https://github.
  com/coopTilleuls/workshopHTML
CSS
● Cascading Style Sheet (feuilles de style en
  cascade)
● Permet de décrire la présentation d'un
  document HTML ou XML
● Standard du W3C
● CSS3 : dernière version de CSS ajoutant de
  nombreuses fonctionnalités : nouveaux
  sélecteurs, media queries, polices persos,
  dégradés, transitions...

Recommandé

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
 
Atelier #3 intégration html
Atelier #3 intégration htmlAtelier #3 intégration html
Atelier #3 intégration htmlLes-Tilleuls.coop
 
2014 03 atelier-xml-tei-stage-ecdotique-institut-sources-chretiennes-hisoma
2014 03 atelier-xml-tei-stage-ecdotique-institut-sources-chretiennes-hisoma2014 03 atelier-xml-tei-stage-ecdotique-institut-sources-chretiennes-hisoma
2014 03 atelier-xml-tei-stage-ecdotique-institut-sources-chretiennes-hisomaEmmanuelle Morlock
 
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-201518 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015Emmanuelle Morlock
 
Exploration et visualisation de fichiers XML avec BaseX
Exploration et visualisation de fichiers XML avec BaseXExploration et visualisation de fichiers XML avec BaseX
Exploration et visualisation de fichiers XML avec BaseXEmmanuelle Morlock
 
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
 
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar
Cours Introduction a la programmation Web ISI Ettaieb AbdessattarCours Introduction a la programmation Web ISI Ettaieb Abdessattar
Cours Introduction a la programmation Web ISI Ettaieb AbdessattarAbdessattar Ettaieb
 

Contenu connexe

Tendances

Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6Abdessattar Ettaieb
 
ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3Horacio 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
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2Horacio 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
 

Tendances (8)

Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar Chapitre 6
 
ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3
 
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...
 
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...
 
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, JS
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
 
Présentation netvibes
Présentation netvibesPrésentation netvibes
Présentation netvibes
 
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
 

En vedette

Html de base
Html de baseHtml de base
Html de basekrymo
 
Présentation html5
Présentation html5Présentation html5
Présentation html5Kénium
 
Catalogue Idwatt 2016
Catalogue Idwatt 2016Catalogue Idwatt 2016
Catalogue Idwatt 2016SOREA
 
Les fils RSS : l’information au bout des doigts
Les fils RSS : l’information au bout des doigtsLes fils RSS : l’information au bout des doigts
Les fils RSS : l’information au bout des doigtsAref Jdey
 
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygenEmmanuelle Morlock
 
Promenades et randonnées autour de Sainte-Maxime
Promenades et randonnées autour de  Sainte-MaximePromenades et randonnées autour de  Sainte-Maxime
Promenades et randonnées autour de Sainte-MaximeSainte-Maxime Tourisme
 
Pepsi Kick
Pepsi KickPepsi Kick
Pepsi KickM51
 
APARTAMENTO PRONTO PARA MORAR - Alameda Morumbi -96m2
APARTAMENTO PRONTO PARA MORAR - Alameda Morumbi -96m2APARTAMENTO PRONTO PARA MORAR - Alameda Morumbi -96m2
APARTAMENTO PRONTO PARA MORAR - Alameda Morumbi -96m2jicarbonelli
 
LED lighting - Iluminação LED - Dualcom
LED lighting - Iluminação LED - DualcomLED lighting - Iluminação LED - Dualcom
LED lighting - Iluminação LED - Dualcomdualcom
 
PORTIFÓLIO_LF BUILDING_LINKEDIN
PORTIFÓLIO_LF BUILDING_LINKEDINPORTIFÓLIO_LF BUILDING_LINKEDIN
PORTIFÓLIO_LF BUILDING_LINKEDINLuciano Fonseca
 
French www.lumin-lighting.com
French www.lumin-lighting.comFrench www.lumin-lighting.com
French www.lumin-lighting.comled panel
 
Visualizadores Digitales Lumens
Visualizadores Digitales LumensVisualizadores Digitales Lumens
Visualizadores Digitales LumensJavier Ayerbe
 

En vedette (18)

Html de base
Html de baseHtml de base
Html de base
 
Présentation html5
Présentation html5Présentation html5
Présentation html5
 
Catalogue Idwatt 2016
Catalogue Idwatt 2016Catalogue Idwatt 2016
Catalogue Idwatt 2016
 
Formation web
Formation webFormation web
Formation web
 
Les fils RSS : l’information au bout des doigts
Les fils RSS : l’information au bout des doigtsLes fils RSS : l’information au bout des doigts
Les fils RSS : l’information au bout des doigts
 
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
 
Promenades et randonnées autour de Sainte-Maxime
Promenades et randonnées autour de  Sainte-MaximePromenades et randonnées autour de  Sainte-Maxime
Promenades et randonnées autour de Sainte-Maxime
 
Pepsi Kick
Pepsi KickPepsi Kick
Pepsi Kick
 
APARTAMENTO PRONTO PARA MORAR - Alameda Morumbi -96m2
APARTAMENTO PRONTO PARA MORAR - Alameda Morumbi -96m2APARTAMENTO PRONTO PARA MORAR - Alameda Morumbi -96m2
APARTAMENTO PRONTO PARA MORAR - Alameda Morumbi -96m2
 
Spot Mr16 Led lamp
Spot Mr16 Led lampSpot Mr16 Led lamp
Spot Mr16 Led lamp
 
Catálogo Holle Iluminação 2016
Catálogo Holle Iluminação 2016Catálogo Holle Iluminação 2016
Catálogo Holle Iluminação 2016
 
Catálogo Neoflash Iluminação 2016
Catálogo Neoflash Iluminação 2016Catálogo Neoflash Iluminação 2016
Catálogo Neoflash Iluminação 2016
 
LED lighting - Iluminação LED - Dualcom
LED lighting - Iluminação LED - DualcomLED lighting - Iluminação LED - Dualcom
LED lighting - Iluminação LED - Dualcom
 
PORTIFÓLIO_LF BUILDING_LINKEDIN
PORTIFÓLIO_LF BUILDING_LINKEDINPORTIFÓLIO_LF BUILDING_LINKEDIN
PORTIFÓLIO_LF BUILDING_LINKEDIN
 
Leds
LedsLeds
Leds
 
French www.lumin-lighting.com
French www.lumin-lighting.comFrench www.lumin-lighting.com
French www.lumin-lighting.com
 
Especificaciones leds moviles
Especificaciones leds movilesEspecificaciones leds moviles
Especificaciones leds moviles
 
Visualizadores Digitales Lumens
Visualizadores Digitales LumensVisualizadores Digitales Lumens
Visualizadores Digitales Lumens
 

Similaire à Atelier #2 initiation à css

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
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1Horacio Gonzalez
 
Diaporamawordpress
DiaporamawordpressDiaporamawordpress
DiaporamawordpressMPORTE
 
Comment Bien Choisir un CMS pour les Administrations et Collectivites Locales...
Comment Bien Choisir un CMS pour les Administrations et Collectivites Locales...Comment Bien Choisir un CMS pour les Administrations et Collectivites Locales...
Comment Bien Choisir un CMS pour les Administrations et Collectivites Locales...FranceNumerique
 
Redgrove Presentation 2009 Fr
Redgrove Presentation 2009 FrRedgrove Presentation 2009 Fr
Redgrove Presentation 2009 FrRed Grove
 
Du site Web au portail d'entreprise
Du site Web au portail d'entrepriseDu site Web au portail d'entreprise
Du site Web au portail d'entreprisemastertic
 
Chapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdfChapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdfAnouAr42
 
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
 
Pearltrees, un outil de Social Bookmarking pour les professeurs documentalistes
Pearltrees, un outil de Social Bookmarking pour les professeurs documentalistesPearltrees, un outil de Social Bookmarking pour les professeurs documentalistes
Pearltrees, un outil de Social Bookmarking pour les professeurs documentalistesClaire Chignard
 
Développement et gestion de Logiciel Libre et Ouvert (LLO)
Développement et gestion  de Logiciel Libre et Ouvert (LLO)Développement et gestion  de Logiciel Libre et Ouvert (LLO)
Développement et gestion de Logiciel Libre et Ouvert (LLO)geomsp
 
Blue Forest - Pitch Deck v1.4
Blue Forest - Pitch Deck v1.4Blue Forest - Pitch Deck v1.4
Blue Forest - Pitch Deck v1.4Blue Forest
 
Facebook Comments 2.0
Facebook Comments 2.0Facebook Comments 2.0
Facebook Comments 2.0Patrice Bonfy
 
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...Renoir Boulanger
 
Comment travailler sur des projets WordPress pour de gros clients
Comment travailler sur des projets WordPress pour de gros clientsComment travailler sur des projets WordPress pour de gros clients
Comment travailler sur des projets WordPress pour de gros clientsEmilie LEBRUN
 
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
 
Génie Logiciel - Unified modeling language
Génie Logiciel - Unified modeling languageGénie Logiciel - Unified modeling language
Génie Logiciel - Unified modeling languageJulien Schneider
 
Cours projet web collaboratif - partie 3 : Les contenus : optimisation & diff...
Cours projet web collaboratif - partie 3 : Les contenus : optimisation & diff...Cours projet web collaboratif - partie 3 : Les contenus : optimisation & diff...
Cours projet web collaboratif - partie 3 : Les contenus : optimisation & diff...Eric Giraudin
 
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...Horacio Gonzalez
 

Similaire à Atelier #2 initiation à css (20)

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
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
 
REMERCIEMENT.docx
REMERCIEMENT.docxREMERCIEMENT.docx
REMERCIEMENT.docx
 
Diaporamawordpress
DiaporamawordpressDiaporamawordpress
Diaporamawordpress
 
Rapport logiciels evenement_payombo_ly
Rapport  logiciels evenement_payombo_lyRapport  logiciels evenement_payombo_ly
Rapport logiciels evenement_payombo_ly
 
Comment Bien Choisir un CMS pour les Administrations et Collectivites Locales...
Comment Bien Choisir un CMS pour les Administrations et Collectivites Locales...Comment Bien Choisir un CMS pour les Administrations et Collectivites Locales...
Comment Bien Choisir un CMS pour les Administrations et Collectivites Locales...
 
Redgrove Presentation 2009 Fr
Redgrove Presentation 2009 FrRedgrove Presentation 2009 Fr
Redgrove Presentation 2009 Fr
 
Du site Web au portail d'entreprise
Du site Web au portail d'entrepriseDu site Web au portail d'entreprise
Du site Web au portail d'entreprise
 
Chapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdfChapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdf
 
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)
 
Pearltrees, un outil de Social Bookmarking pour les professeurs documentalistes
Pearltrees, un outil de Social Bookmarking pour les professeurs documentalistesPearltrees, un outil de Social Bookmarking pour les professeurs documentalistes
Pearltrees, un outil de Social Bookmarking pour les professeurs documentalistes
 
Développement et gestion de Logiciel Libre et Ouvert (LLO)
Développement et gestion  de Logiciel Libre et Ouvert (LLO)Développement et gestion  de Logiciel Libre et Ouvert (LLO)
Développement et gestion de Logiciel Libre et Ouvert (LLO)
 
Blue Forest - Pitch Deck v1.4
Blue Forest - Pitch Deck v1.4Blue Forest - Pitch Deck v1.4
Blue Forest - Pitch Deck v1.4
 
Facebook Comments 2.0
Facebook Comments 2.0Facebook Comments 2.0
Facebook Comments 2.0
 
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
 
Comment travailler sur des projets WordPress pour de gros clients
Comment travailler sur des projets WordPress pour de gros clientsComment travailler sur des projets WordPress pour de gros clients
Comment travailler sur des projets WordPress pour de gros clients
 
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
 
Génie Logiciel - Unified modeling language
Génie Logiciel - Unified modeling languageGénie Logiciel - Unified modeling language
Génie Logiciel - Unified modeling language
 
Cours projet web collaboratif - partie 3 : Les contenus : optimisation & diff...
Cours projet web collaboratif - partie 3 : Les contenus : optimisation & diff...Cours projet web collaboratif - partie 3 : Les contenus : optimisation & diff...
Cours projet web collaboratif - partie 3 : Les contenus : optimisation & diff...
 
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...
 

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
 
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
 
Symfony 2 : Performances et Optimisations
Symfony 2 : Performances et OptimisationsSymfony 2 : Performances et Optimisations
Symfony 2 : Performances et OptimisationsLes-Tilleuls.coop
 
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
 

Plus de Les-Tilleuls.coop (12)

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)
 
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
 
Symfony 2 : Performances et Optimisations
Symfony 2 : Performances et OptimisationsSymfony 2 : Performances et Optimisations
Symfony 2 : Performances et Optimisations
 
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
 

Atelier #2 initiation à css

  • 1. Workshop #2 Initiation au CSS 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 #1 ● Définition d'internet et du web ● Présentation des standards du web ● Découverte du langage de balisage HTML ● Les slides : http://slideshare. net/coopTilleuls/atelier-initiation-au-html5 ● Les exemples : https://github. com/coopTilleuls/workshopHTML
  • 6. CSS ● Cascading Style Sheet (feuilles de style en cascade) ● Permet de décrire la présentation d'un document HTML ou XML ● Standard du W3C ● CSS3 : dernière version de CSS ajoutant de nombreuses fonctionnalités : nouveaux sélecteurs, media queries, polices persos, dégradés, transitions...
  • 7. Principes ● Séparation de la présentation et de la structure du document ● La présentation varie en fonction du récepteur : écran, tablette, smartphone... ● Différentes règles peuvent s'appliquer à un même élément : c'est la cascade ● Chaque élément du document est représenté par une boîte ● Les boîtes sont positionnées successivement (flux)
  • 8. Les mains dans le code Étudions ensembles ces quelques fichiers HTML accompagnés de leur feuille de style CSS : https://github.com/coopTilleuls/workshopHTML
  • 9. Syntaxe sélecteur1, sélecteurN { propriété1: valeur; propriété2: valeur; }
  • 10. Lien avec le document HTML ● Directement dans la page HTML avec la balise <style> ● En tant qu'attribut d'une balise HTML avec l'atrtibut style ● Recommandé : dans un fichier externe .css, lié au document HTML avec une balise <link>
  • 11. Sélecteurs Ils permettent de sélectionner un ou plusieurs éléments du document (noeuds de l'arbre DOM). Exemple : #mon-id { color: red; }
  • 13. Formatage de texte ● font-size : taille de la police ● font-family : famille de police ● font-style : style de police (italique...) ● font-weight : graisse de la police ● text-decoration : décoration du texte ● text-align : alignement du texte ● @font-face (CSS3) : police personnalisée ● Il existe un grand nombre de propriétés CSS, se référer à la documentation
  • 14. Positionnement ● display : affichage des élèments en-ligne et en blocs ● position: relative : Position relative des élèments les uns par rapport aux autres ● float : Flottement des boîtes ● position: absolute : Positionnement absolu ● position: fixed : Positionnement fixe ● width, height : Largeur et hauteur des boîtes ● margin, padding : Marges extérieurs et marges intérieures
  • 15. Couleurs ● color : Couleur du texte ● background-color : couleur de fond ● border : bordures ● background-image : image de fond ● Remplacement de texte
  • 16. Pour aller plus loin ● Compass (en) : http://compass-style.org/ ● Sass (en) : http://sass-lang.com/ ● Less (en) : http://lesscss.org/ ● Blueprint (en) : http://blueprintcss.org/ ● Twitter Bootstrap (en) : http://twitter.github. com/bootstrap/ ● Openweb (fr) : http://openweb.eu.org/ ● Alsacréations (fr) : http://www.alsacreations. com/