SlideShare une entreprise Scribd logo
INTÉGRATEURS
Bousculez vos habitudes !
Photo : fotolia
#F34R
RAPHAËL GOETTER
alsacréations
alsacreations.comgoetter.frknacss.comPhotomontage (odieux) : @diou
Les navigateurs ont évolué
HTML et CSS ont mûri
Les besoins, les projets, les utilisateurs ont changé
Notre métier n'est plus le même
Il est indispensable de nous adapter !
#CONTEXTE
« S »
Agence web
Située en Alsace
8 personnes
Compétences diverses
Pas de commercial
Projets variés
TADAAAM !
1998 (qui dit mieux?)
TADAAAM !
1998 (qui dit mieux?)
doctype ?
Frontpage
CSS !
MAIS ÇA C'ÉTAIT AVANT !
balises propriétaires
spacer.gif
<table>
IE 5 / Netscape 4
applets Javafrontpage
framesets
WYSIWYG
<font>
position : absolute
<center>
style=
colspan
C'ÉTAIT L'BON TEMPS !
On a tous commencé un jour...
Photo : fotolia
nos
habitudes ?
nos
habitudes ?
dogmes
tableaux de mise en page
FrontPage, Dreamweaver
divite, classite
Flash
JavaScript
IE6 (IE tout court ?)
sélecteur joker *
préfixes constructeurs
C'EST MAL !
HTML épuré
CSS épuré
modèle de boîte standard
id pour les éléments uniques
classes pour des éléments multiples
fermer les balises HTML
être valide W3C
jQuery (et ses copains)
C'EST BIEN !
les frameworks HTML / CSS
les préprocesseurs CSS
ON SAIT PAS TROP !
dans la
vraie vie...
dans la
vraie vie...
Ben... ça dépend
Des délais à respecter
il faut aller vite, être productif, s’adapter
Des intervenants multiples
des experts, des novices, des développeurs, graphistes
Au secours, un nouveau !
l’équipe évolue, des nouveaux arrivent pendant le projet
Un projet et ses specs évoluent toujours
produire un code cohérent, souple et réutilisable
ALEXA.COM
Top 1000 rank
12% plus de 50 fois→ !important
13% plus de 100 fois→ float
25% plus de 100 fois→ font-size
Facebook … 261 valeurs de la couleur
bleue
Photo : fotolia
Les styles CSS des gros sites mondiaux :
ALEXA.COM
Top 1000 rank
12% plus de 50 fois→ !important
13% plus de 100 fois→ float
25% plus de 100 fois→ font-size
Facebook … 261 valeurs de la couleur
bleue
Photo : fotolia
Les styles CSS des gros sites mondiaux :
lourd
pas maintenable
MAL
pas performantpas compréhensible
C'EST MAL ! C'EST BIEN !EUH ?
tableaux de mise en page
FrontPage, Dreamweaver
divite, classite
Flash
JavaScript
IE6 (IE tout court ?)
sélecteur joker *
préfixes constructeurs
les frameworks
les préprocesseurs
HTML épuré
CSS épuré
modèle de boîte standard
id = éléments uniques
classes = éléments
multiples
être valide W3C
jQuery (et ses copains)
ou pas !ou pas !ou pas !
C'EST MAL ! C'EST BIEN !EUH ?
tableaux de mise en page
FrontPage, Dreamweaver
divite, classite
Flash
JavaScript
IE6 (IE tout court ?)
sélecteur joker *
préfixes constructeurs
les frameworks
les préprocesseurs
HTML épuré
CSS épuré
modèle de boîte standard
id = éléments uniques
classes = éléments
multiples
être valide W3C
jQuery (et ses copains)
ou pas !ou pas !ou pas !
Bousculons nos dogmes !
#osons!
ou pas !ou pas !ou pas !
C'EST MAL ! C'EST BIEN !EUH ?
Box-sizing c'est super dangereux et ça pique
– moi
“ Les préprocesseurs CSS, ça sert à rien
– encore moi
“ Chrome est un super navigateur !
– toujours moi (oui bon hein ça va)
“ 
TOUT LE MONDE PEUT SE TROMPER !
Apprenons de nos erreurs, testons, avançons
http://wiki.csswg.org/ideas/mistakes
Nos techniques Nos outils Nos méthodes
BOUSCULONS NOS HABITUDES !
❶ ❷ ❸
#positionnements
#box-sizing
#sélecteurs
#préfixes
#frameworks
#préprocesseurs
#conventions
#InternetExplorer
#IDvsCLASS!
#OOCSS
NOS TECHNIQUES
❶
❶POSITIONNEMENT CSS
frames, <table>
position : absolute
float
display : inline-block
display : table-cell
columns
flexbox
grid layout, regions, ...
#FearZone
#HoaxZone
#NoobZone
La « zone de confiance »
❶POSITIONNEMENT CSS
Display : inline-block
<p>
<blockquote>
p {
display: inline-block;
width: 10em;
}
blockquote ~ p {
vertical-align: top;
}
❶POSITIONNEMENT CSS
ul {
display: table;
}
li {
display: table-cell;
width: 20%;
}
li:hover {
width: 40%;
}
kiwi.gg/tablenav (+ bonus : apple.com)
Display : table
La meilleure
technique ?
Ça dépend !
hu hu
BOX-SIZING CSS3
Photo : flickr jing_dong
❶
❶BOX-SIZING CSS3
div {
width: 50%;
padding: 1em;
border-width: 1px;
}
50% + 2em + 2px 50% + 2em + 2px
❶BOX-SIZING CSS3
div {
width: 50%;
padding: 1em;
border-width: 1px;
}
box-sizing: border-box;
50% 50%
❶BOX-SIZING CSS3
88
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
❶
SÉLECTION D'ÉLÉMENTS
❶SÉLECTION D'ÉLÉMENTS
jQuery of course !
Made by Chuck Norris
<script>
$("input[name*='man']").css("background","red");
</script>
❶SÉLECTION D'ÉLÉMENTS
jQuery of course !
Made by Chuck Norris
#really ?
<script>
$("input[name*='man']").css("background","red");
</script>
❶SÉLECTION D'ÉLÉMENTS
:first-child premier enfant→
élt + élt frère suivant direct→
élt ~ élt tous les frères suivants→
[attr^="valeur"] attribut qui commence par «valeur»→
[attr$="valeur"] attribut qui termine par «valeur»→
[attr*="valeur"] attribut qui contient «valeur»→
élt:hover élément survolé→
Sélecteurs CSS « avancés »
:first-child
élt + élt
élt ~ élt
[attr^="valeur"]
[attr$="valeur"]
[attr*="valeur"]
élt:hover
❶SÉLECTION D'ÉLÉMENTS
Sélecteurs CSS « avancés » qui marchent partout !
❶SÉLECTION D'ÉLÉMENTS
jQuery of course (ou pas) !
[name*=man] {
background: red;
}
=
<script>
$("input[name*='man']").css("background","red");
</script>
❶
li:first-child + li + li {
background-color: yellow;
}
SÉLECTION D'ÉLÉMENTS
Cibler le 3e <li> ? Facile !
:first-child
élt + élt
élt ~ élt
[attr^="valeur"]
[attr$="valeur"]
[attr*="valeur"]
élt:hover
❶
[class^="icon-"] {
ici des trucs cools
}
.icon-info,
.icon-mail,
.icon-skyblog,
.icon-post,
.icon-delete,
...
SÉLECTION D'ÉLÉMENTS
Cibler un groupe de classes ? Facile !
❶PRÉFIXES CONSTRUCTEURS
-webkit-
-moz-
-ms- -o-
-khtml-
mso-
-xv--apple-
-rim- -wap-
-hp-
❶PRÉFIXES CONSTRUCTEURS
div {
-webkit-border-radius : 50%;
-moz-border-radius : 50%;
-ms-border-radius : 50%;
-o-border-radius : 50%;
border-radius : 50%;
}
❶PRÉFIXES CONSTRUCTEURS
div {
-webkit-border-radius : 50%;
-moz-border-radius : 50%;
-ms-border-radius : 50%;
-o-border-radius : 50%;
border-radius : 50%;
}
#noob
#noob
❶PRÉFIXES CONSTRUCTEURS
div {
-webkit-border-radius : 50%;
-moz-border-radius : 50%;
-ms-border-radius : 50%;
-o-border-radius : 50%;
border-radius : 50%;
}
#noob
#noob
#old
#old
❶PRÉFIXES CONSTRUCTEURS
border-radius, text-shadow,
box-shadow, opacity non→
box-sizing uniquement -moz-→
transition, animation,
gradients, calc() uniquement -webkit-→
transform -webkit- et -ms-→
shouldiprefix.com
❶PRÉFIXES CONSTRUCTEURS
border-radius, text-shadow,
box-shadow, opacity non→
box-sizing uniquement -moz-→
transition, animation,
gradients, calc() uniquement -webkit-→
transform -webkit- et -ms-→
flexbox →
shouldiprefix.com
Oui bon OK, là c'est
vraiment le #¶§*¿!
❶PRÉFIXES CONSTRUCTEURS
Prefixr.com
Autoprefixer
-prefix-free
Plugins (SublimeText, Notepad, etc.)
LESS, Sass / Compass, Stylus, etc.
C'est automatique !
❶
Explorons d'autres positionnements
Adoptons box-sizing
Employons des sélecteurs « avancés »
Laissons-tomber (certains) préfixes
BOUSCULONS NOS TECHNIQUES
En résumé...
BOUSCULONS
NOS OUTILS ❷
FRAMEWORKS HTML / CSS
Un « kit » pour faciliter la productivité ❷
FRAMEWORKS HTML / CSS
Ce que propose un framework ❷
Un Reset CSS
Une base réutilisable
Des grilles
Des boutons
Des tableaux
Du Responsive
...
FRAMEWORKS HTML / CSS
Choisissez ou construisez le votre ! ❷
Ouch !
PRÉPROCESSEURS CSS
Du code qui produit du code ! ❷
styles.less LESS styles.css
PRÉPROCESSEURS CSS
Des variables en CSS ❷@basefont : 1em;
@largescreen : 1280px;
body {
font-size: @basefont + .2em;
}
@media (min-width : @largescreen) {
body {width: auto;}
}
body {
font-size: 1.2em;
}
@media (min-width : 1280px) {
body {width: auto;}
}
styles.less
styles.css
PRÉPROCESSEURS CSS
Une notation imbriquée ❷
styles.less
styles.css
.sidebar a {
color: tomato;
&:hover, &:focus, &:active {text-decoration: underline;}
}
.sidebar a {
color: tomato;
}
.sidebar a:hover,
.sidebar a:focus,
.sidebar a:active {
text-decoration: underline;
}
PRÉPROCESSEURS CSS
Des calculs et des « fonctions » ❷
styles.less
styles.css
p { .em(20px); }
div { .em(18px); }
p {
font-size: 1.4286em;
}
div {
font-size: 1.2857em;
}
@basefont: 14px;
.em(@size, @bf: @basefont){
@em: round((@size / @bf),4);
font-size: unit(@em, em);
}
@column-width: 60;
@gutter-width: 20;
@columns: 12;
header { .column(12); }
article { .column(9); }
aside { .column(3); }
@media (max-device-width: 960px) {
article { .column(12); }
aside { .column(12); }
}
<header>...</header>
<article>...</article>
<aside>...</aside>
PRÉPROCESSEURS CSS
Des modèles de grilles et gouttières ❷HTML
LESS
http://semantic.gs
PRÉPROCESSEURS CSS
Contribuent à la maintenance d'un projet ❷
Feuilles de styles allégées en
développement,
Maintenance et compréhension
facilitées,
Automatisation de tâches
(préfixes, calculs, minification,
etc.).
Photo : fotolia
utilisons des frameworks
passons par des préprocesseurs
BOUSCULONS NOS OUTILS
En résumé... ❷
un peu
Bien !
(si pré-requis
préalables)
BOUSCULONS
NOS METHODES ❸
Photo : flickr - kalexanderson
AYEZ DES CONVENTIONS !
❸Convention HTML / CSS / JS
Conventions de langue (français / anglais)
Conventions de syntaxe (espace / indentation)
Conventions de commentaires (@TODO)
Conventions de séparateur (trait d'union, underscore)
Conventions de casse (minuscule, majuscule, CamelCase)
Etc.
AYEZ DES CONVENTIONS !
Ne recommencez jamais à zéro !
❸Google HTML / CSS style guide
GitHub CSS styleguide
GitHub JavaScript styleguide
WordPress CSS coding standards
WordPress HTML coding standards
WordPress JavaScript coding standards
Idiomatic CSS
AYEZ DES CONVENTIONS !
Faites votre choix !
LE « CAS » INTERNET EXPLORER
❸
LE « CAS » INTERNET EXPLORER
❸Internet Explorer, c'est de la ***
– quelqu'un
“ « Optimisé pour Internet Explorer »
– un vieux site web
“ Faites-moi un site compatible Internet Explorer !
– un client
“ 
LE « CAS » INTERNET EXPLORER
❸IE... c'est plus ce que c'était ! ...
LE « CAS » INTERNET EXPLORER
❸IE... c'est plus ce que c'était ! ...
«compatible» IE ?
(#really?)
IE11 est un
super navigateur
Photo : flickr - Taylor Dawn Fortune
ID ou CLASS ?
❸
Photo : Igor Maynaud
ID ou CLASS ?
❸Les « id » c'est pour des éléments uniques dans la page
– quelqu'un qui n'a pas tort
“ Les « class » c'est pour des éléments qui ne sont pas
uniques
– quelqu'un d'autre
“ Don't use id selectors in CSS
– CSSlint
“ 
Photo : Pizza Hut
* > + ~
element / pseudo
class / pseudo / [attr]
ID
style="..."
!important
Spécificité
des sélecteurs
CSS
Photo : Pizza Hut
* > + ~
element / pseudo
class / pseudo / [attr]
ID
style="..."
!important
Spécificité
des sélecteurs
CSS
ID ou CLASS ?
❸
Les id peuvent être nécessaires
en HTML (ancres, formulaires,
nommage, JavaScript)
Un élément unique ne doit pas
forcément être nommé par un id
Un id n'est pas réutilisable
Un id a une forte spécificité
Montage : @geoffrey_crofte
ID ou CLASS ?
<ul id=″first″>
<li><a>...</a></li>
<li><a>...</a></li>
<li><a>...</a></li>
</ul>
#first a {
background: orange ;
}
#second a {
background: white ;
}
❸
ID ou CLASS ?
<ul id=″first″>
<li><a>...</a></li>
<li><a>...</a></li>
<li><a>...</a></li>
</ul>
#first a {
background: orange ;
}
#second a {
background: white ;
}
a:hover,
a:active,
a:focus {
background: green;
} ?
❸
ID ou CLASS ?
<ul id=″first″>
<li><a>...</a></li>
<li><a>...</a></li>
<li><a>...</a></li>
</ul>
#first a {
background: orange ;
}
#second a {
background: white ;
}
#first a:hover, #first a:active,
#first a:focus, #second a:hover,
#second a:active, #second a:focus {
background: green ;
}
❸
ID ou CLASS ?
<ul id=″first″>
<li><a>...</a></li>
<li><a>...</a></li>
<li><a>...</a></li>
</ul>
#first a {
background: orange ;
}
#second a {
background: white ;
}
❸
a:hover,
a:active,
a:focus {
background: green !important;
}
ID ou CLASS ?
<ul class=″first″>
<li><a>...</a></li>
<li><a>...</a></li>
<li><a>...</a></li>
</ul>
.first a {
background: orange ;
}
.second a {
background: white ;
}
❸
a:hover,
a:active,
a:focus {
background: green;
}
ID ou CLASS ?
<ul id=″first″>
<li><a>...</a></li>
<li><a>...</a></li>
<li><a>...</a></li>
</ul>
[id=first] a {
background: orange ;
}
[id=second] a {
background: white ;
}
❸
a:hover,
a:active,
a:focus {
background: green;
}
#efficacité
#réutilisabilité
#maintenabilité
❸existe en plugin
pour votre éditeur
DES CSS « OBJETS » ?
❸
CSS
objet
CSS « OBJETS »
❸
Intégrez-moi ça !
(ASAP)
CSS « OBJETS »
❸
#header {
truc: machin;
}
#sidebar {
truc: machin;
}
#main {
truc: machin;
}
#footer {
truc: machin;
}
#main {
truc: machin;
}
#main .news {
truc: machin;
}
#main #alaune .news {
truc: machin;
}
CSS « OBJETS »
❸
#sidebar #edito {
truc: machin;
}
#sidebar .afp {
truc: machin;
}
#sidebar .ads {
truc: machin;
}
#main {
truc: machin;
}
#main .news {
truc: machin;
}
#main #alaune .news {
truc: machin;
}
CSS « OBJETS »
❸
#sidebar #edito {
truc: machin;
}
#sidebar .afp {
truc: machin;
}
#sidebar .ads {
truc: machin;
}
#main {
truc: machin;
}
#main .news {
truc: machin;
}
#main #alaune .news {
truc: machin;
}
CSS « OBJETS »
❸
#sidebar #edito {
truc: machin;
}
#sidebar .afp {
truc: machin;
}
#sidebar .ads {
truc: machin;
}
CSS « OBJETS »
❸
✔
Largeur adaptable (fluide)
✔
Doit contenir les flottants
✔ Peut contenir une image
(à gauche, largeur inconnue)
Similarités :
CSS « OBJETS »
❸
✔
Largeur adaptable (fluide)
✔
Doit contenir les flottants
✔ Peut contenir une image
(à gauche, largeur inconnue)
Similarités :.mod
CSS « OBJETS »
❸
✔
Largeur adaptable (fluide)
✔
Doit contenir les flottants
✔ Peut contenir une image
(à gauche, largeur inconnue)
Similarités :.mod
img
.inner
CSS « OBJETS »
❸
✔
Largeur adaptable (fluide)
✔
Doit contenir les flottants
✔ Peut contenir une image
(à gauche, largeur inconnue)
Similarités :.mod
img
.inner
.mod > img {
float: left;
}
.mod > .inner {
float: left;
width: ?!?!;
}
CSS « OBJETS »
❸
✔
Largeur adaptable (fluide)
✔
Doit contenir les flottants
✔ Peut contenir une image
(à gauche, largeur inconnue)
Similarités :.mod
img
.inner
.mod > img {
float: left;
}
.mod > .inner {
margin-left: ?!?!;
}
CSS « OBJETS »
❸
parentfloat parentfloat
Block Formatting Context
parent {overflow : hidden;}
CSS « OBJETS »
❸
frèrefloat frèrefloat
Block Formatting Context
frère {overflow : hidden;}
dont le
contenu
s'écoule autour du
flottant
dont le contenu
ne s'écoule plus
autour du flottant
CSS « OBJETS »
❸
.mod {
overflow: hidden;
}
.mod > img {
float: left;
}
.mod > .inner {
overflow: hidden;
}
CSS « OBJETS »
❸
<div id="wrapper" class="line w80"></div>
<section class="info mod pr0"></section>
<nav id="navigation" role="navigation" class="large-no-float">
Des classes « sémantiques » ?!
Privilégiez le sens et la fonction des éléments !
(les classes « visuelles » doivent être secondaires)
CSS « OBJETS »
❸OOCSS
Nicole Sullivan
SMACSS
Jonathan Snooks
http://oocss.org http://smacss.com/
Ayons des conventions !
Reconsidérons (doucement) Internet Explorer
Évitons les sélecteurs id si possible
Appliquons des CSS « objets » (OOCSS)
BOUSCULONS NOS MÉTHODES
En résumé... ❸
SAINES LECTURES
Pour vos longues soirées d'hiver...
SAINES RESSOURCES
Pour votre veille technologique constante
MERCI, À LA
PROCHAINE !
Polices :
Delicious heavy
Annie Use Your Telescope
Pictos :
Design Bolts
Capital18
Artua
Raphaël Goetter www.alsacreations.fr @goetter

Contenu connexe

Tendances

Supports de cours Fit4Digital future - CMS
Supports de cours Fit4Digital future - CMSSupports de cours Fit4Digital future - CMS
Supports de cours Fit4Digital future - CMS
Annabelle Buffart
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs Web
Yoann Gotthilf
 
HTML5
HTML5HTML5
HTML5
Neovov
 
CSS 3
CSS 3CSS 3
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
Thomas Bodin
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
Khaled Djebloun
 
Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...
Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...
Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...
Kate De Gourdon
 
Sécuriser un site WordPress - Semaine du web
Sécuriser un site WordPress - Semaine du webSécuriser un site WordPress - Semaine du web
Sécuriser un site WordPress - Semaine du web
IZZA Samir
 
CSS Grid Layout, le futur de vos mises en page
CSS Grid Layout, le futur de vos mises en pageCSS Grid Layout, le futur de vos mises en page
CSS Grid Layout, le futur de vos mises en page
matparisot
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMSChi Nacim
 
Html 5
Html 5Html 5
Html 5
Thomas Bodin
 
Démarrer son site WordPress : LA "to-do" list
Démarrer son site WordPress : LA "to-do" listDémarrer son site WordPress : LA "to-do" list
Démarrer son site WordPress : LA "to-do" list
Kaylynne Johnson
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
Adyax
 
WordPress
WordPressWordPress
WordPress
Thomas Bodin
 
Manuel wordpress ad avenue
Manuel wordpress   ad avenueManuel wordpress   ad avenue
Manuel wordpress ad avenue
François Huynh
 
Cours css niveau debutant
Cours css niveau debutantCours css niveau debutant
Cours css niveau debutant
TheBest Icanbe
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
jverrecchia
 
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
Jean-Pierre Vincent
 
HTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux élémentsHTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux éléments
Rémy Savard
 

Tendances (19)

Supports de cours Fit4Digital future - CMS
Supports de cours Fit4Digital future - CMSSupports de cours Fit4Digital future - CMS
Supports de cours Fit4Digital future - CMS
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs Web
 
HTML5
HTML5HTML5
HTML5
 
CSS 3
CSS 3CSS 3
CSS 3
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
 
Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...
Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...
Animation Numérique de Territoire "Atelier Création d'un Site avec Jimdo / Ve...
 
Sécuriser un site WordPress - Semaine du web
Sécuriser un site WordPress - Semaine du webSécuriser un site WordPress - Semaine du web
Sécuriser un site WordPress - Semaine du web
 
CSS Grid Layout, le futur de vos mises en page
CSS Grid Layout, le futur de vos mises en pageCSS Grid Layout, le futur de vos mises en page
CSS Grid Layout, le futur de vos mises en page
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMS
 
Html 5
Html 5Html 5
Html 5
 
Démarrer son site WordPress : LA "to-do" list
Démarrer son site WordPress : LA "to-do" listDémarrer son site WordPress : LA "to-do" list
Démarrer son site WordPress : LA "to-do" list
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
WordPress
WordPressWordPress
WordPress
 
Manuel wordpress ad avenue
Manuel wordpress   ad avenueManuel wordpress   ad avenue
Manuel wordpress ad avenue
 
Cours css niveau debutant
Cours css niveau debutantCours css niveau debutant
Cours css niveau debutant
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
 
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
 
HTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux élémentsHTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux éléments
 

En vedette

Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
Raphaël Goetter
 
10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile
Raphaël Goetter
 
Des CSS efficaces avec KNACSS
Des CSS efficaces avec KNACSSDes CSS efficaces avec KNACSS
Des CSS efficaces avec KNACSS
Raphaël Goetter
 
Integration web : qualite & productivite FTW
Integration web  : qualite & productivite FTWIntegration web  : qualite & productivite FTW
Integration web : qualite & productivite FTW
Corinne Schillinger
 
Benchmark des salaires des experts SAP au Maroc
Benchmark des salaires des experts SAP au MarocBenchmark des salaires des experts SAP au Maroc
Benchmark des salaires des experts SAP au MarocFaycal Chraibi
 
L’audace au féminin dans l'univers professionnel
L’audace au féminin dans l'univers professionnelL’audace au féminin dans l'univers professionnel
L’audace au féminin dans l'univers professionnel
LinkedIn
 
Introduction au Responsive web design
Introduction au Responsive web designIntroduction au Responsive web design
Introduction au Responsive web design
Dagobert
 
Progiciel de gestion intégré SAP
Progiciel de gestion intégré SAPProgiciel de gestion intégré SAP
Progiciel de gestion intégré SAP
FICEL Hemza
 
PROJET ERP
PROJET ERPPROJET ERP
PROJET ERP
Lacina Cissé
 
Présentation Projet de fin d'études
Présentation Projet de fin d'étudesPrésentation Projet de fin d'études
Présentation Projet de fin d'études
Salah Eddine BENTALBA (+15K Connections)
 
CSS3 WebEducation
CSS3 WebEducationCSS3 WebEducation
CSS3 WebEducation
Rémy Savard
 
Wieviel Gebet ErhöRt Gott (Format Powerpoint 2007)
Wieviel Gebet ErhöRt Gott (Format Powerpoint 2007)Wieviel Gebet ErhöRt Gott (Format Powerpoint 2007)
Wieviel Gebet ErhöRt Gott (Format Powerpoint 2007)wusternberg
 
Atelier 3 : Sans contenu la puissance de l'outil n'est rien Intervention de N...
Atelier 3 : Sans contenu la puissance de l'outil n'est rien Intervention de N...Atelier 3 : Sans contenu la puissance de l'outil n'est rien Intervention de N...
Atelier 3 : Sans contenu la puissance de l'outil n'est rien Intervention de N...
R-Evolutions Touristiques de Brive
 
Predigt, 2009 03 22, Tempel
Predigt, 2009 03 22, TempelPredigt, 2009 03 22, Tempel
Predigt, 2009 03 22, Tempelwusternberg
 
Eigene Themes from Scratch
Eigene Themes from ScratchEigene Themes from Scratch
Eigene Themes from Scratch
Stefan Fröhlich
 
Tome 1 : Sensibilisation des publics aux usages
Tome 1 : Sensibilisation des publics aux usagesTome 1 : Sensibilisation des publics aux usages
Tome 1 : Sensibilisation des publics aux usagesparoles d'élus
 
Transformasi ER-D ke Schema
Transformasi ER-D ke SchemaTransformasi ER-D ke Schema
Transformasi ER-D ke Schema
cosmasharyawan
 
Zukunftsszenarien läs 111214
Zukunftsszenarien läs 111214Zukunftsszenarien läs 111214
Zukunftsszenarien läs 111214
Kai Sostmann
 
Ma ville .meknes
Ma ville   .meknesMa ville   .meknes
Ma ville .meknesmerico2
 

En vedette (20)

Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
 
10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile
 
Des CSS efficaces avec KNACSS
Des CSS efficaces avec KNACSSDes CSS efficaces avec KNACSS
Des CSS efficaces avec KNACSS
 
Integration web : qualite & productivite FTW
Integration web  : qualite & productivite FTWIntegration web  : qualite & productivite FTW
Integration web : qualite & productivite FTW
 
Benchmark des salaires des experts SAP au Maroc
Benchmark des salaires des experts SAP au MarocBenchmark des salaires des experts SAP au Maroc
Benchmark des salaires des experts SAP au Maroc
 
L’audace au féminin dans l'univers professionnel
L’audace au féminin dans l'univers professionnelL’audace au féminin dans l'univers professionnel
L’audace au féminin dans l'univers professionnel
 
Introduction au Responsive web design
Introduction au Responsive web designIntroduction au Responsive web design
Introduction au Responsive web design
 
Progiciel de gestion intégré SAP
Progiciel de gestion intégré SAPProgiciel de gestion intégré SAP
Progiciel de gestion intégré SAP
 
PROJET ERP
PROJET ERPPROJET ERP
PROJET ERP
 
Présentation Projet de fin d'études
Présentation Projet de fin d'étudesPrésentation Projet de fin d'études
Présentation Projet de fin d'études
 
CSS3 WebEducation
CSS3 WebEducationCSS3 WebEducation
CSS3 WebEducation
 
Wieviel Gebet ErhöRt Gott (Format Powerpoint 2007)
Wieviel Gebet ErhöRt Gott (Format Powerpoint 2007)Wieviel Gebet ErhöRt Gott (Format Powerpoint 2007)
Wieviel Gebet ErhöRt Gott (Format Powerpoint 2007)
 
Atelier 3 : Sans contenu la puissance de l'outil n'est rien Intervention de N...
Atelier 3 : Sans contenu la puissance de l'outil n'est rien Intervention de N...Atelier 3 : Sans contenu la puissance de l'outil n'est rien Intervention de N...
Atelier 3 : Sans contenu la puissance de l'outil n'est rien Intervention de N...
 
Predigt, 2009 03 22, Tempel
Predigt, 2009 03 22, TempelPredigt, 2009 03 22, Tempel
Predigt, 2009 03 22, Tempel
 
Eigene Themes from Scratch
Eigene Themes from ScratchEigene Themes from Scratch
Eigene Themes from Scratch
 
Tome 1 : Sensibilisation des publics aux usages
Tome 1 : Sensibilisation des publics aux usagesTome 1 : Sensibilisation des publics aux usages
Tome 1 : Sensibilisation des publics aux usages
 
Transformasi ER-D ke Schema
Transformasi ER-D ke SchemaTransformasi ER-D ke Schema
Transformasi ER-D ke Schema
 
Zukunftsszenarien läs 111214
Zukunftsszenarien läs 111214Zukunftsszenarien läs 111214
Zukunftsszenarien läs 111214
 
Artémois
ArtémoisArtémois
Artémois
 
Ma ville .meknes
Ma ville   .meknesMa ville   .meknes
Ma ville .meknes
 

Similaire à Intégrateurs, bousculez vos habitudes

Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !
Raphaël Goetter
 
initiation-dvptWEB-ericacademy.pdf
initiation-dvptWEB-ericacademy.pdfinitiation-dvptWEB-ericacademy.pdf
initiation-dvptWEB-ericacademy.pdf
EricKeita
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
Frédéric Harper
 
Internationalisation du Front
Internationalisation du FrontInternationalisation du Front
Internationalisation du Front
Yannick Croissant
 
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
 
html-css-casuhal.pdf
html-css-casuhal.pdfhtml-css-casuhal.pdf
html-css-casuhal.pdf
RihabBENLAMINE
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
Benoît Simard
 
Apprenez le jQuery
Apprenez le jQueryApprenez le jQuery
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
 
CSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de styleCSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de style
Kaelig Deloumeau-Prigent
 
CSS3
CSS3CSS3
CSS3
Neovov
 
Guide Ultime de l'intégration réussie.pdf
Guide Ultime de l'intégration réussie.pdfGuide Ultime de l'intégration réussie.pdf
Guide Ultime de l'intégration réussie.pdf
Vanessa Sant'André
 
Optimiser son référencement WordPress - QueDuWeb 2016
Optimiser son référencement WordPress - QueDuWeb 2016Optimiser son référencement WordPress - QueDuWeb 2016
Optimiser son référencement WordPress - QueDuWeb 2016
Daniel Roch - SeoMix
 
Gagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs cssGagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs css
pefringant
 
La puissance des pseudo-éléments
La puissance des pseudo-élémentsLa puissance des pseudo-éléments
La puissance des pseudo-éléments
Geoffrey Croftє
 
Conception de thèmes WordPress : construire et optimiser son espace de travail
Conception de thèmes WordPress : construire  et optimiser son espace de travailConception de thèmes WordPress : construire  et optimiser son espace de travail
Conception de thèmes WordPress : construire et optimiser son espace de travail
Frédérique Game
 
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdfCSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
adeljaouadi
 
Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011Aurélien Maury
 
Css.more.or.less
Css.more.or.lessCss.more.or.less
Css.more.or.less
VISEO
 
Intégration web MMI
Intégration web MMIIntégration web MMI
Intégration web MMI
Pierre VERT
 

Similaire à Intégrateurs, bousculez vos habitudes (20)

Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !
 
initiation-dvptWEB-ericacademy.pdf
initiation-dvptWEB-ericacademy.pdfinitiation-dvptWEB-ericacademy.pdf
initiation-dvptWEB-ericacademy.pdf
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
 
Internationalisation du Front
Internationalisation du FrontInternationalisation du Front
Internationalisation du Front
 
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
 
html-css-casuhal.pdf
html-css-casuhal.pdfhtml-css-casuhal.pdf
html-css-casuhal.pdf
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
Apprenez le jQuery
Apprenez le jQueryApprenez le jQuery
Apprenez le jQuery
 
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...
 
CSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de styleCSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de style
 
CSS3
CSS3CSS3
CSS3
 
Guide Ultime de l'intégration réussie.pdf
Guide Ultime de l'intégration réussie.pdfGuide Ultime de l'intégration réussie.pdf
Guide Ultime de l'intégration réussie.pdf
 
Optimiser son référencement WordPress - QueDuWeb 2016
Optimiser son référencement WordPress - QueDuWeb 2016Optimiser son référencement WordPress - QueDuWeb 2016
Optimiser son référencement WordPress - QueDuWeb 2016
 
Gagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs cssGagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs css
 
La puissance des pseudo-éléments
La puissance des pseudo-élémentsLa puissance des pseudo-éléments
La puissance des pseudo-éléments
 
Conception de thèmes WordPress : construire et optimiser son espace de travail
Conception de thèmes WordPress : construire  et optimiser son espace de travailConception de thèmes WordPress : construire  et optimiser son espace de travail
Conception de thèmes WordPress : construire et optimiser son espace de travail
 
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdfCSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
 
Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011
 
Css.more.or.less
Css.more.or.lessCss.more.or.less
Css.more.or.less
 
Intégration web MMI
Intégration web MMIIntégration web MMI
Intégration web MMI
 

Plus de Raphaël Goetter

Futur du-positionnement-css
Futur du-positionnement-cssFutur du-positionnement-css
Futur du-positionnement-cssRaphaël Goetter
 
Le Futur du positionnement CSS
Le Futur du positionnement CSSLe Futur du positionnement CSS
Le Futur du positionnement CSS
Raphaël Goetter
 
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Raphaël Goetter
 
Quiz
QuizQuiz
Presentation de la Kiwi Party 2011
Presentation de la Kiwi Party 2011Presentation de la Kiwi Party 2011
Presentation de la Kiwi Party 2011
Raphaël Goetter
 
Atelier CSS positionnement (Paris web 2007)
Atelier CSS positionnement (Paris web 2007)Atelier CSS positionnement (Paris web 2007)
Atelier CSS positionnement (Paris web 2007)
Raphaël Goetter
 
Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Jouons un peu avec CSS3 (Kiwiparty avril 2010)Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Raphaël Goetter
 

Plus de Raphaël Goetter (8)

Futur du-positionnement-css
Futur du-positionnement-cssFutur du-positionnement-css
Futur du-positionnement-css
 
Le Futur du positionnement CSS
Le Futur du positionnement CSSLe Futur du positionnement CSS
Le Futur du positionnement CSS
 
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
 
Quiz finalistes
Quiz finalistesQuiz finalistes
Quiz finalistes
 
Quiz
QuizQuiz
Quiz
 
Presentation de la Kiwi Party 2011
Presentation de la Kiwi Party 2011Presentation de la Kiwi Party 2011
Presentation de la Kiwi Party 2011
 
Atelier CSS positionnement (Paris web 2007)
Atelier CSS positionnement (Paris web 2007)Atelier CSS positionnement (Paris web 2007)
Atelier CSS positionnement (Paris web 2007)
 
Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Jouons un peu avec CSS3 (Kiwiparty avril 2010)Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Jouons un peu avec CSS3 (Kiwiparty avril 2010)
 

Dernier

OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO Technology
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
UNITECBordeaux
 
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
OCTO Technology
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
OCTO Technology
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
Université de Franche-Comté
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Laurent Speyser
 

Dernier (6)

OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
 
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
 

Intégrateurs, bousculez vos habitudes