SlideShare une entreprise Scribd logo
Conception d'Applications
Interactives :
Applications Web et JEE
Séance #1
Côté navigateur
HTML5 / CSS / JS / AngularJS
2/3 - HTML5, CSS3, Twitter Bootstrap
Description du module
● Côté navigateur
○ HTML5 / CSS / JS - Polymer, Twitter Bootstrap
● Côté serveur - Concepts
○ Introduction à JEE : servlets, JSP, frameworks… - SparkJava
● Côté serveur - NodeJS
○ NodeJS, ExpressJS, APIs
● Forge JavaScript et Web Components
○ Une forge logicielle pour JavaScript : Grunt/Gulp, Bower, Yeoman
● Autour de la webapp
○ Forge logicielle en Java - Test-driven development
● Examen et exposées des projets
● Les bases du web
○ HTTP, URL, HTML, CSS, JS, AJAX...
● HTML5
○ HTML5, CSS3, le casse-tête des navigateurs...
○ Le web en 2013, le responsive design
● Twitter Bootstrap
○ Outils, échafaudage, LessCSS, JQuery
● Le développeur web en 2014
○ Rôles, technologies, langages, veille technologique
● Polymer
○ Web components & Polymer
Côté navigateur
● Le buzzword - HTML5, c'est quoi ?
● HTML 5
● CSS 3
● Le casse-tête des navigateurs...
● Le web en 2014, le responsive design
HTML5
Le buzzword
HTML5, c'est quoi ?
L’HTML 5 n’est pas…
"L’HTML5, c’est un nouveau langage ?"
"Je débute, j’ai envie d’apprendre l’HTML5 directement,
ça a l’air mieux que l’HTML d’avant."
"Pfff, moi qui venais d’apprendre l’HTML,
je vais devoir tout réapprendre…"
L’HTML5 n’est pas un nouveau langage
L'HTML5 est...
● Une évolution d'HTML 4
○ Qu'on a survolé précédement
● Deux syntaxes : HTML5 et XHTML5
● Des nouvelles fonctionnalités
● Une couche d'application
○ Des APIs
L'HTML5 et les standards
● W3C définit les standards du web
○ Chargé d'élaborer le standard HTML5
○ Processus très lent et bureaucratique
● WHATWG
Web Hypertext Application Technology Working Group
○ Groupe dissident du W3C
○ Des développeurs des navigateurs
○ Approche pratique
● Les deux travaillent en parallèle
○ Sur le même document
Alors, deux standards HTML5 ?
● En 2012 le W3C et le WHATWG ont décidé de suivre des
chemins séparés
○ W3C travaille pour un standard fixe
■ Un snapshop de l'état actuel : HTML5
○ WHATWG travaille sur un living standard
■ En évolution permanente : HTML
● Approches complémentaires
Les nouveautés de HTML5
● Allègement du code
● Nouvelles balises sémantiques
● Disparition de balises de mise en forme
● Nouveau modèle de contenu
● Balises multimédia
● Formulaires avec sémantique
● Stockage local
● Glisser-Déposer
● Géolocalisation
● Websockets
Les nouveautés de HTML5 -
Allègement du code
● Allègement de l'entête head
○ Le doctype, les balises meta, l'encodage des
caractères, les balises style et script
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="design.
css" />
<script src="script.js"></script>
</head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="design.
css" />
<script type=”text/javascript” src=script.js"></script>
</head>
● Simplifications en général
○ Certaines discutables
(pas de /> pour balises vides)
Les nouveautés de HTML5 -
Nouvelles balises sémantiques
● Des balises avec du sens sémantique
○ Plus spécifiques que les génériques
○ Structuration du document
● <header> : indique une en-tête
● <footer> : indique un pied de page
● <nav> : indique un élément de navigation (menu...)
● <aside> : indique une zone secondaire (sidebar, publicité...)
● <section> : indique une portion de la page
● <article> : indique une portion de la page avec du sens en lui-même
Image : Alsa Creations
Les nouveautés de HTML5 -
Disparition de balises de mise en forme
● Meilleure séparation entre forme et contenu
● Disparition de balises sans sens sémantique
○ Telles que center, font, big, strike ou u
● La mise en forme se fait avec les CSS
Les nouveautés de HTML5 -
Nouvelles modèle de contenu
● Avant : modèle inline-block
● Maintenant : des catégories
○ Chaque élément dans 0 ou plus catégories
● Structuration logique du
document
Image : WHATWG
Les nouveautés de HTML5 -
Balises multimédia
● <video> : introduit un lecteur vidéo ayant
une URL comme source
● <audio> : introduit un lecteur audio ayant
une URL comme source
● <canvas> : introduit une surface de dessin
○ Dessiner, tracer des formes, les animer...
Les nouveautés de HTML5 -
Formulaires avec sémantique
● Des nouveaux types pour la balise <input>
○ tel
○ email
○ url
○ date, day, month, year, week
○ number
○ range
○ search
○ color
Les nouveautés de HTML5 -
Stockage local
● Stocker des informations côté navigateur
○ Système clé-valeur
○ Chaque domaine a son sandbox
● Applications web déconnectés
localStorage['maCle'] = "Ma valeur"; ou
localStorage.setitem("maCle", "Ma valeur");
localStorage['maCle']; ou
localStorage.getitem['maCle'];
removeItem("maCle");
if (localStorage) {
// Le navigateur supporte le localStorage
} else {
// localStorage non supporté
}
Stocker une valeur :
Récupérer une valeur :
Effacer une clé :
Tester si le navigateur
supporte le stockage local
:
Les nouveautés de HTML5 -
Géolocalisation
● Spécification W3C propre associée à HTML5
● Permet de géolocaliser le navigateur
○ GPS, triangulation GSM, triangulation wifi, adresse IP
● Pour Wifi et IP, utilisation de BDD de géolocalisation
○ E.g : https://www.google.com/loc/json
● API asynchrone
○ Fonction callback pour récevoir la réponse
function maPosition(position) {
var infopos = "Position déterminée :n";
infopos += "Latitude : "+position.coords.latitude +"n"
infopos += "Longitude: "+position.coords.longitude+"n";
infopos += "Altitude : "+position.coords.altitude +"n";
document.getElementById("infoposition").innerHTML = infopos;
}
// Pour connaître la position
navigator.geolocation.getCurrentPosition(maPosition);
// Pour suivre la position
var survId = navigator.geolocation.watchPosition(maPosition);
// Pour annuler le suivi de position
navigator.geolocation.clearWatch(survId);
● Permet de déplacer des éléments entre des applications et le navigateur
○ API JavaScript native HTML5
● Attribute draggable : élément déplaçable
● Événement dragstart : généré au début du transfert
● Événement dragover : généré au survole d'un élément pendant la glisse
● Événement drop : généré en fin de transfert
Les nouveautés de HTML5 -
Glisser-Déposer
function dragstart(target, e) {
e.dataTransfer.setData('text/plain', "Texte transmis"");
}
function dragover(target, e) {
e.preventDefault(); // Annule l'interdiction de drop
}
function drop(target, e) {
e.preventDefault(); // Annule l'interdiction de drop
alert('Vous avez bien déposé votre élément !');
}
<div id="source" draggable="true" ondragstart="dragstart(this,
event)"> Élement source </div>
<div id="target" ondragover="dragover(this,event)"
ondrop="drop(this,event)"> Élement cible </div>
Les nouveautés de HTML5 -
Websockets
● HTTP standard : requête-réponse
○ Du navigateur au serveur
● Websockets :
communication
bi-directionnelle
○ Plus besoin de
polling, long-polling
ou autres
CSS3
Les CSS3, c'est quoi ?
"C'est quoi le CSS3 ? Ca a un rapport avec HTML5"
● Le CCS3 n'est pas forcément lié à HTML5
● Une évolution majeure des CSS
○ Nouveaux sélecteurs
○ Nouvelles façons de spécifier les couleurs
○ Détection des caractéristiques des terminaux
○ Des calculs dans la feuille de style
○ Des SVG en arrière plan
○ ...
Exemple classique :
Les coins arrondis
● Boîte avec coins arrondis avant CSS3
○ Une <table> avec 9 cases, chacune avec des images de fond
● Boîte avec coins arrondis avec CSS3
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<style>
.boite_arrondie {
background: #eeeeee;
border: 2px solid black;
border-radius: 20px;
width: 200px; height: 80px;
margin: auto; padding: 20px;
}
</style>
</head>
<div class="boite_arrondie">
Oh la jolie boîte !
</div>
</hmtl>
Les nouveautés CSS3
● Effets visuels
● Sélecteurs
● Nouveaux outils
Les nouveautés CSS3 -
Effets visuels
● border-radius
border-radius: 20px;
● box-shadow
box-shadow:
10px 10px 5px #000088;
● text-shadow
text-shadow:
4px 4px 3px #ff0000;
● font-face
@font-face {
font-family: 'Luckiest Guy';
src:url("luckiest-guy-regular.otf")
}
...
font-family:'Luckiest Guy';
Les nouveautés CSS3 -
Effets visuels
● gradient
background-image:
linear-gradient(right top,
#D60F0F 0%, #FFDD00 100%);
● opacity
background: rgba(0, 180, 0, 0.5);
Les nouveautés CSS3 -
Effets visuels : transform
● transform : rotate
transform: rotate(30deg)
● transform : skew
transform: skew(15deg, 30deg);
● transform : scale
transform: scale(1,0.25)
● transform : translate
-webkit-transform: translate(30px, 30px);
Les nouveautés CSS3 -
Effets visuels : Transitions
● Des propriétés
○ transition-property : Propriétés CSS à transformer
■ couleurs, position, dimensions, transformations, visibilité, ombres, dégradés
○ transition-duration : Durée de la transition
■ en secondes ou millisecondes
○ transition-timing-function :
■ Fonction de transition, modèle d'interpolation (accélération, décélération...)
○ transition-delay : Retard du départ de la transition
■ en secondes ou millisecondes
Les nouveautés CSS3 -
Effets visuels : Transitions
● Déclenchement
.transition {
background: #aaa;
transition-property : color;
transition-duration : 5s;
color: white;
}
.transition:hover {
transition-property : color;
transition-duration : 5s;
color: black;
}
Les nouveautés CSS3 -
Tranformées en 3D
● perspective
transform:
perspective(600px)
rotateX(40deg );
● rotateX, rotateY, rotateZ
● translateX, translateY, translateZ
Les nouveautés CSS3 -
Animations
● Des keyframes
@keyframes rotateCube {
0% {
transform: rotateX( 0deg ) rotateY( 0deg );
}
100% {
transform: rotateX( 360deg ) rotateY( 360deg );
}
}
● Des animations
animation: rotateCube 8s infinite linear;
Exemple :
le cube des navigateurs
● translateX, translateY, translateZ
● rotateX, rotateY, rotateZ
● animation, @keyframes
Le casse-tête des navigateurs
Les coins arrondis :
Les préfixes vendeurs
● Vous souvenez-vous des coins arrondis ?
○ Jusqu'à il n'y a pas longtemps, cela ne marchait pas partout
● CSS3 considéré expérimental,
chaque navigateur implémentait à sa façon
○ Des préfixes propriétaires ou préfixes vendeurs
■ Les principaux ? -moz pour Firefox, -webkit pour Chrome/Safari
○ Oblligation de les mettre pour atteindre tout le monde
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
Les coins arrondis :
Et sur les vieux IE ?
● Et comment on fait sur IE8 ou IE7 ?
Ou même IE6 ?
● C'est grave si ça ne marche pas ?
○ Pas pour des coins arrondis
○ Oui si cela gêne le fonctionnement !
● On peut faire quoi
○ Essayer Modernizr et utiliser polyfills
○ Vérifier fonctionnement dans vieux navigateurs
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyfill.js'
});
Le problème...
● HTML5 et CSS3 pas encore figés dans le marbre
○ Le niveau de support change selon les navigateurs et les versions
○ Des fonctions non implémentées
○ Des fonctions avec des noms différents
● Certaines propriétés sont supportées un peu partout
○ D'autres seulement sur quelques rares navigateurs
● Quand et quoi utiliser ?
○ Ca dépend de l'application
■ Public cible...
○ Et de la criticité du composant
■ Si pas supporté, l'appli reste utilisable ?
Puis-je l'utiliser ?
Avec des préfixes ?
● Dans le doute, consulter Can I use... ?
○ Support par navigateur pour chaque élément HTML5/CSS3/JS
● Ou le très beau HTML5 Readiness
Pour aller plus loin
Pour aller plus loin
● Pour apprendre et se tenir informés :
HTML5 Rocks!
Twitter Bootstrap
Car nous ne sommes pas
tous des graphistes
C'est très beau ça... mais le
design graphique me fait peur !
● Si on fait du web en 2013 on ne peut pas
se passer du HTML5/CSS3/JS
○ Mais la plupart des développeurs n'aiment pas concevoir des
interfaces
○ On n'est pas des graphistes !
● Quoi faire ?
●
● Solution 1: Venir à la séssion FinistJUG d'avril
○ JavaScript pour des développeurs Java
● Solution 2 : Utiliser Twitter Bootstrap
C'est quoi Twitter Bootstrap
● Constats chez Twitter en 2009 :
○ Les développeurs d'applications web n'aiment pas
faire de l'IHM web
○ A chaque nouvelle application, on refaisait une IHM
○ Soucis d'ergonomie, d'uniformité, d'esthétisme
● Solution : faire un boîte à utils HTML5/CSS3/JS
○ Pour IHMs performantes, egonomiques et jolies
○ Simple à utiliser
■ Permettant à un développeur de faire des IHMs
belles et efficaces
○ Lingua franca entre graphistes et développeurs
La panoplie Twitter Bootstrap
● Des éléments de base, des composants, des
widgets complèxes...
● Modulable
● Responsive
Facile à intégrer,
facile à personnaliser
● Il suffit d'embarquer les JS et CSS Bootstrap
● Les composants sont des classes CSS
● Pas besoin de prise de tête avec la présentation
● Responsive, adaptable à tout terminal
Mais je veux ma présentation à moi
● Des thèmes
○ Permettant de garder la puissance Bootstrap
○ Adaptant le look à ce que je veux
○ Toujours sans prise de tête développeur
Lingua franca ?
● Les graphistes web aiment Bootstrap
○ Ergonomie soignée
○ CSS claires et structurées
○ Simplicité d'adaptation et personnalisation des thèmes
● Les développeurs aiment Bootstrap
● Les graphistes et développeurs comprennent Bootstrap
Langage commun entre
développeurs et graphistes
● Le graphiste fournit des maquettes en Bootstrap
● Le développeur adapte sa logique IHM à Bootstrap

Contenu connexe

Tendances

Tout ce que le getting started mongo db ne vous dira pas
Tout ce que le getting started mongo db ne vous dira pasTout ce que le getting started mongo db ne vous dira pas
Tout ce que le getting started mongo db ne vous dira pas
Pierre-Alban DEWITTE
 
ToursJUG mongoDB
ToursJUG mongoDBToursJUG mongoDB
ToursJUG mongoDB
Cedric Gatay
 
Jquery
JqueryJquery
Jquery
krymo
 
Atelier initiation au html5
Atelier initiation au html5Atelier initiation au html5
Atelier initiation au html5
Les-Tilleuls.coop
 
Mongo DB
Mongo DBMongo DB
2014.12.11 - TECH CONF #3 - Présentation Bootstrap
2014.12.11 - TECH CONF #3 - Présentation Bootstrap2014.12.11 - TECH CONF #3 - Présentation Bootstrap
2014.12.11 - TECH CONF #3 - Présentation Bootstrap
TelecomValley
 
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
Horacio Gonzalez
 
Présentation mongoDB et mongoId
Présentation mongoDB et mongoIdPrésentation mongoDB et mongoId
Présentation mongoDB et mongoId
vtabary
 
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
Horacio Gonzalez
 
A la découverte de vue.js
A la découverte de vue.jsA la découverte de vue.js
A la découverte de vue.js
Bruno Bonnin
 
Atelier #3 intégration html
Atelier #3 intégration htmlAtelier #3 intégration html
Atelier #3 intégration html
Les-Tilleuls.coop
 
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éorie
Horacio Gonzalez
 
ISCOM::HTML/CSS::session1 (20140930)
ISCOM::HTML/CSS::session1 (20140930)ISCOM::HTML/CSS::session1 (20140930)
ISCOM::HTML/CSS::session1 (20140930)
Nicolas Aguenot
 
Node.js et MongoDB: Mongoose
Node.js et MongoDB: MongooseNode.js et MongoDB: Mongoose
Node.js et MongoDB: Mongoose
jeromegn
 
jQuery
jQueryjQuery
jQuery
Franck SIMON
 
Vue, j’avais pas vu !
Vue, j’avais pas vu !Vue, j’avais pas vu !
Vue, j’avais pas vu !
Bruno Bonnin
 
Introduction à Node.js
Introduction à Node.js Introduction à Node.js
Introduction à Node.js
Sonam TCHEUTSEUN
 
MongoDB day Paris 2012
MongoDB day Paris 2012MongoDB day Paris 2012
MongoDB day Paris 2012
FastConnect
 
Jug summer camp 2017 - Vue.js, même un dev java peut en faire !
Jug summer camp 2017 - Vue.js, même un dev java peut en faire !Jug summer camp 2017 - Vue.js, même un dev java peut en faire !
Jug summer camp 2017 - Vue.js, même un dev java peut en faire !
Bruno Bonnin
 

Tendances (20)

Tout ce que le getting started mongo db ne vous dira pas
Tout ce que le getting started mongo db ne vous dira pasTout ce que le getting started mongo db ne vous dira pas
Tout ce que le getting started mongo db ne vous dira pas
 
ToursJUG mongoDB
ToursJUG mongoDBToursJUG mongoDB
ToursJUG mongoDB
 
Jquery
JqueryJquery
Jquery
 
Atelier initiation au html5
Atelier initiation au html5Atelier initiation au html5
Atelier initiation au html5
 
Mongo DB
Mongo DBMongo DB
Mongo DB
 
2014.12.11 - TECH CONF #3 - Présentation Bootstrap
2014.12.11 - TECH CONF #3 - Présentation Bootstrap2014.12.11 - TECH CONF #3 - Présentation Bootstrap
2014.12.11 - TECH CONF #3 - Présentation Bootstrap
 
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
 
Zenika MongoDB Tour - REX Amadeus
Zenika MongoDB Tour - REX AmadeusZenika MongoDB Tour - REX Amadeus
Zenika MongoDB Tour - REX Amadeus
 
Présentation mongoDB et mongoId
Présentation mongoDB et mongoIdPrésentation mongoDB et mongoId
Présentation mongoDB et mongoId
 
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
 
A la découverte de vue.js
A la découverte de vue.jsA la découverte de vue.js
A la découverte de vue.js
 
Atelier #3 intégration html
Atelier #3 intégration htmlAtelier #3 intégration html
Atelier #3 intégration html
 
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éorie
 
ISCOM::HTML/CSS::session1 (20140930)
ISCOM::HTML/CSS::session1 (20140930)ISCOM::HTML/CSS::session1 (20140930)
ISCOM::HTML/CSS::session1 (20140930)
 
Node.js et MongoDB: Mongoose
Node.js et MongoDB: MongooseNode.js et MongoDB: Mongoose
Node.js et MongoDB: Mongoose
 
jQuery
jQueryjQuery
jQuery
 
Vue, j’avais pas vu !
Vue, j’avais pas vu !Vue, j’avais pas vu !
Vue, j’avais pas vu !
 
Introduction à Node.js
Introduction à Node.js Introduction à Node.js
Introduction à Node.js
 
MongoDB day Paris 2012
MongoDB day Paris 2012MongoDB day Paris 2012
MongoDB day Paris 2012
 
Jug summer camp 2017 - Vue.js, même un dev java peut en faire !
Jug summer camp 2017 - Vue.js, même un dev java peut en faire !Jug summer camp 2017 - Vue.js, même un dev java peut en faire !
Jug summer camp 2017 - Vue.js, même un dev java peut en faire !
 

En vedette

Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
Bassem ABCHA
 
Twitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric DussartTwitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric Dussart
La FeWeb
 
Formation mobile-cross-platform
Formation mobile-cross-platformFormation mobile-cross-platform
Formation mobile-cross-platform
Atelier IHM Polytech Nice Sophia
 
Presentation hibernate nfe103
Presentation hibernate nfe103Presentation hibernate nfe103
Presentation hibernate nfe103
MRamo2s
 
Plateforme De DéVeloppement En Php5 (Zend + Doctrine)
Plateforme De DéVeloppement En Php5 (Zend + Doctrine)Plateforme De DéVeloppement En Php5 (Zend + Doctrine)
Plateforme De DéVeloppement En Php5 (Zend + Doctrine)
cornnery
 
Responsive web-design through bootstrap
Responsive web-design through bootstrapResponsive web-design through bootstrap
Responsive web-design through bootstrap
Zunair Sagitarioux
 
Utiliser Joomla 3 et Bootstrap 3 depuis une application externe
Utiliser Joomla 3 et Bootstrap 3 depuis une application externeUtiliser Joomla 3 et Bootstrap 3 depuis une application externe
Utiliser Joomla 3 et Bootstrap 3 depuis une application externe
Web21 France
 
AcuéRdate
AcuéRdateAcuéRdate
Benchlearning européen Pôle emploi
Benchlearning européen Pôle emploi Benchlearning européen Pôle emploi
Benchlearning européen Pôle emploi
France Travail
 
Guia IntegralTurismo Ciudad de Buenos Aires
Guia IntegralTurismo Ciudad de Buenos AiresGuia IntegralTurismo Ciudad de Buenos Aires
Guia IntegralTurismo Ciudad de Buenos Aires
Scott Rains
 
Diaporama Manon
Diaporama ManonDiaporama Manon
Diaporama Manon
Raymond Ecau
 
L'homme n'est pas créé pour rester toujours ici-bas!
L'homme n'est pas créé pour rester toujours ici-bas!L'homme n'est pas créé pour rester toujours ici-bas!
L'homme n'est pas créé pour rester toujours ici-bas!
Sr Denis Monique
 
L'emploi intérimaire en novembre 2014
L'emploi intérimaire en novembre 2014L'emploi intérimaire en novembre 2014
L'emploi intérimaire en novembre 2014
France Travail
 
Fem un blog de centre (XtecBlocs)
Fem un blog de centre (XtecBlocs)Fem un blog de centre (XtecBlocs)
Fem un blog de centre (XtecBlocs)
imma v
 
ATEX OBU User Manual
ATEX OBU User Manual ATEX OBU User Manual
ATEX OBU User Manual
Francesca Cardarelli
 

En vedette (20)

Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
 
Twitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric DussartTwitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric Dussart
 
Formation mobile-cross-platform
Formation mobile-cross-platformFormation mobile-cross-platform
Formation mobile-cross-platform
 
Presentation hibernate nfe103
Presentation hibernate nfe103Presentation hibernate nfe103
Presentation hibernate nfe103
 
Plateforme De DéVeloppement En Php5 (Zend + Doctrine)
Plateforme De DéVeloppement En Php5 (Zend + Doctrine)Plateforme De DéVeloppement En Php5 (Zend + Doctrine)
Plateforme De DéVeloppement En Php5 (Zend + Doctrine)
 
Responsive web-design through bootstrap
Responsive web-design through bootstrapResponsive web-design through bootstrap
Responsive web-design through bootstrap
 
Utiliser Joomla 3 et Bootstrap 3 depuis une application externe
Utiliser Joomla 3 et Bootstrap 3 depuis une application externeUtiliser Joomla 3 et Bootstrap 3 depuis une application externe
Utiliser Joomla 3 et Bootstrap 3 depuis une application externe
 
Hibernate 3
Hibernate 3Hibernate 3
Hibernate 3
 
CM patterns
CM patternsCM patterns
CM patterns
 
CM uml-diag-statiques
CM uml-diag-statiquesCM uml-diag-statiques
CM uml-diag-statiques
 
CM processus agile
CM processus agileCM processus agile
CM processus agile
 
AcuéRdate
AcuéRdateAcuéRdate
AcuéRdate
 
Benchlearning européen Pôle emploi
Benchlearning européen Pôle emploi Benchlearning européen Pôle emploi
Benchlearning européen Pôle emploi
 
Notes
NotesNotes
Notes
 
Guia IntegralTurismo Ciudad de Buenos Aires
Guia IntegralTurismo Ciudad de Buenos AiresGuia IntegralTurismo Ciudad de Buenos Aires
Guia IntegralTurismo Ciudad de Buenos Aires
 
Diaporama Manon
Diaporama ManonDiaporama Manon
Diaporama Manon
 
L'homme n'est pas créé pour rester toujours ici-bas!
L'homme n'est pas créé pour rester toujours ici-bas!L'homme n'est pas créé pour rester toujours ici-bas!
L'homme n'est pas créé pour rester toujours ici-bas!
 
L'emploi intérimaire en novembre 2014
L'emploi intérimaire en novembre 2014L'emploi intérimaire en novembre 2014
L'emploi intérimaire en novembre 2014
 
Fem un blog de centre (XtecBlocs)
Fem un blog de centre (XtecBlocs)Fem un blog de centre (XtecBlocs)
Fem un blog de centre (XtecBlocs)
 
ATEX OBU User Manual
ATEX OBU User Manual ATEX OBU User Manual
ATEX OBU User Manual
 

Similaire à ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter Bootstrap

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
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
codedarmor
 
Internationalisation du Front
Internationalisation du FrontInternationalisation du Front
Internationalisation du Front
Yannick Croissant
 
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
Horacio Gonzalez
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontend
yllieth
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - td
Enib   cours c.a.i. web - séance #1 - html5 css3-js - tdEnib   cours c.a.i. web - séance #1 - html5 css3-js - td
Enib cours c.a.i. web - séance #1 - html5 css3-js - td
Horacio Gonzalez
 
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
 
Webinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft IntelWebinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft Intel
davrous
 
HTML5 maintenant partie 1 : la sémantique
HTML5 maintenant partie 1 : la sémantiqueHTML5 maintenant partie 1 : la sémantique
HTML5 maintenant partie 1 : la sémantique
Jean-Pierre Vincent
 
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
maru.maru
 
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
 
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... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
HTML5
HTML5HTML5
HTML5
Neovov
 
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Frédéric Harper
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
Frédéric Harper
 
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
Les-Tilleuls.coop
 

Similaire à ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter Bootstrap (20)

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...
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
Html5 now light
Html5 now lightHtml5 now light
Html5 now light
 
Internationalisation du Front
Internationalisation du FrontInternationalisation du Front
Internationalisation du Front
 
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
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontend
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - td
Enib   cours c.a.i. web - séance #1 - html5 css3-js - tdEnib   cours c.a.i. web - séance #1 - html5 css3-js - td
Enib cours c.a.i. web - séance #1 - html5 css3-js - td
 
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)
 
Webinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft IntelWebinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft Intel
 
HTML5 maintenant partie 1 : la sémantique
HTML5 maintenant partie 1 : la sémantiqueHTML5 maintenant partie 1 : la sémantique
HTML5 maintenant partie 1 : la sémantique
 
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
 
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
 
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... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5
HTML5HTML5
HTML5
 
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
 
Nouveaux apis
Nouveaux apisNouveaux apis
Nouveaux apis
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
 
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
 

Plus de Horacio Gonzalez

Il n'y a pas que Polymer dans la vie… - RennesJS - 2017-06-27
Il n'y a pas que Polymer dans la vie… - RennesJS - 2017-06-27Il n'y a pas que Polymer dans la vie… - RennesJS - 2017-06-27
Il n'y a pas que Polymer dans la vie… - RennesJS - 2017-06-27
Horacio Gonzalez
 
But there is no web component for that - Web Components Remote Conference - 2...
But there is no web component for that - Web Components Remote Conference - 2...But there is no web component for that - Web Components Remote Conference - 2...
But there is no web component for that - Web Components Remote Conference - 2...
Horacio Gonzalez
 
Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27
 Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27 Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27
Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27
Horacio Gonzalez
 
Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09
Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09
Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09
Horacio Gonzalez
 
Mixing Web Components - Best of Web Paris - 2016 06-09
Mixing Web Components - Best of Web Paris - 2016 06-09Mixing Web Components - Best of Web Paris - 2016 06-09
Mixing Web Components - Best of Web Paris - 2016 06-09
Horacio Gonzalez
 
Polymer in the real life - Devoxx France - 2016 04-20
Polymer in the real life - Devoxx France - 2016 04-20Polymer in the real life - Devoxx France - 2016 04-20
Polymer in the real life - Devoxx France - 2016 04-20
Horacio Gonzalez
 
Warp10: collect, store and manipulate sensor data - BreizhCamp - 2016 03-24
Warp10: collect, store and manipulate sensor data - BreizhCamp - 2016 03-24 Warp10: collect, store and manipulate sensor data - BreizhCamp - 2016 03-24
Warp10: collect, store and manipulate sensor data - BreizhCamp - 2016 03-24
Horacio Gonzalez
 
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScriptENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
Horacio Gonzalez
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
Horacio Gonzalez
 
ENIB 2015 2016 - CAI Web S02E03 - Forge JS 2/4 - MongoDB and NoSQL
ENIB 2015 2016 - CAI Web S02E03 - Forge JS 2/4 - MongoDB and NoSQLENIB 2015 2016 - CAI Web S02E03 - Forge JS 2/4 - MongoDB and NoSQL
ENIB 2015 2016 - CAI Web S02E03 - Forge JS 2/4 - MongoDB and NoSQL
Horacio Gonzalez
 
ENIB 2015-2016 - CAI Web - S01E01- MongoDB and NoSQL
ENIB 2015-2016 - CAI Web - S01E01- MongoDB and NoSQLENIB 2015-2016 - CAI Web - S01E01- MongoDB and NoSQL
ENIB 2015-2016 - CAI Web - S01E01- MongoDB and NoSQL
Horacio Gonzalez
 
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScript
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScriptENIB 2015-2016 - CAI Web - S01E01- La forge JavaScript
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScript
Horacio Gonzalez
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...
Horacio Gonzalez
 
Beyond Polymer - JUG Summer Camp - 2015-09-18
Beyond Polymer - JUG Summer Camp - 2015-09-18Beyond Polymer - JUG Summer Camp - 2015-09-18
Beyond Polymer - JUG Summer Camp - 2015-09-18
Horacio Gonzalez
 
Mixing Web Components - Paris Web Components - 2015 09-16
Mixing Web Components - Paris Web Components - 2015 09-16 Mixing Web Components - Paris Web Components - 2015 09-16
Mixing Web Components - Paris Web Components - 2015 09-16
Horacio Gonzalez
 
Devoxx France - Web Components, Polymer et Material Design
Devoxx France -  Web Components, Polymer et Material DesignDevoxx France -  Web Components, Polymer et Material Design
Devoxx France - Web Components, Polymer et Material Design
Horacio Gonzalez
 
Steven Le Roux - Kafka et Storm au service de la lutte antiDDoS à OVH - Soiré...
Steven Le Roux - Kafka et Storm au service de la lutte antiDDoS à OVH - Soiré...Steven Le Roux - Kafka et Storm au service de la lutte antiDDoS à OVH - Soiré...
Steven Le Roux - Kafka et Storm au service de la lutte antiDDoS à OVH - Soiré...
Horacio Gonzalez
 
2014 03-25 - GDG Nantes - Web Components avec Polymer
2014 03-25 - GDG Nantes - Web Components avec Polymer2014 03-25 - GDG Nantes - Web Components avec Polymer
2014 03-25 - GDG Nantes - Web Components avec Polymer
Horacio Gonzalez
 
Bootcamp d'Initiation à Android - 2013/11/30 - Live coding : Hello world!
Bootcamp d'Initiation à Android  - 2013/11/30 - Live coding :   Hello world!Bootcamp d'Initiation à Android  - 2013/11/30 - Live coding :   Hello world!
Bootcamp d'Initiation à Android - 2013/11/30 - Live coding : Hello world!
Horacio 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/30
Horacio Gonzalez
 

Plus de Horacio Gonzalez (20)

Il n'y a pas que Polymer dans la vie… - RennesJS - 2017-06-27
Il n'y a pas que Polymer dans la vie… - RennesJS - 2017-06-27Il n'y a pas que Polymer dans la vie… - RennesJS - 2017-06-27
Il n'y a pas que Polymer dans la vie… - RennesJS - 2017-06-27
 
But there is no web component for that - Web Components Remote Conference - 2...
But there is no web component for that - Web Components Remote Conference - 2...But there is no web component for that - Web Components Remote Conference - 2...
But there is no web component for that - Web Components Remote Conference - 2...
 
Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27
 Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27 Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27
Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27
 
Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09
Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09
Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09
 
Mixing Web Components - Best of Web Paris - 2016 06-09
Mixing Web Components - Best of Web Paris - 2016 06-09Mixing Web Components - Best of Web Paris - 2016 06-09
Mixing Web Components - Best of Web Paris - 2016 06-09
 
Polymer in the real life - Devoxx France - 2016 04-20
Polymer in the real life - Devoxx France - 2016 04-20Polymer in the real life - Devoxx France - 2016 04-20
Polymer in the real life - Devoxx France - 2016 04-20
 
Warp10: collect, store and manipulate sensor data - BreizhCamp - 2016 03-24
Warp10: collect, store and manipulate sensor data - BreizhCamp - 2016 03-24 Warp10: collect, store and manipulate sensor data - BreizhCamp - 2016 03-24
Warp10: collect, store and manipulate sensor data - BreizhCamp - 2016 03-24
 
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScriptENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
 
ENIB 2015 2016 - CAI Web S02E03 - Forge JS 2/4 - MongoDB and NoSQL
ENIB 2015 2016 - CAI Web S02E03 - Forge JS 2/4 - MongoDB and NoSQLENIB 2015 2016 - CAI Web S02E03 - Forge JS 2/4 - MongoDB and NoSQL
ENIB 2015 2016 - CAI Web S02E03 - Forge JS 2/4 - MongoDB and NoSQL
 
ENIB 2015-2016 - CAI Web - S01E01- MongoDB and NoSQL
ENIB 2015-2016 - CAI Web - S01E01- MongoDB and NoSQLENIB 2015-2016 - CAI Web - S01E01- MongoDB and NoSQL
ENIB 2015-2016 - CAI Web - S01E01- MongoDB and NoSQL
 
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScript
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScriptENIB 2015-2016 - CAI Web - S01E01- La forge JavaScript
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScript
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...
 
Beyond Polymer - JUG Summer Camp - 2015-09-18
Beyond Polymer - JUG Summer Camp - 2015-09-18Beyond Polymer - JUG Summer Camp - 2015-09-18
Beyond Polymer - JUG Summer Camp - 2015-09-18
 
Mixing Web Components - Paris Web Components - 2015 09-16
Mixing Web Components - Paris Web Components - 2015 09-16 Mixing Web Components - Paris Web Components - 2015 09-16
Mixing Web Components - Paris Web Components - 2015 09-16
 
Devoxx France - Web Components, Polymer et Material Design
Devoxx France -  Web Components, Polymer et Material DesignDevoxx France -  Web Components, Polymer et Material Design
Devoxx France - Web Components, Polymer et Material Design
 
Steven Le Roux - Kafka et Storm au service de la lutte antiDDoS à OVH - Soiré...
Steven Le Roux - Kafka et Storm au service de la lutte antiDDoS à OVH - Soiré...Steven Le Roux - Kafka et Storm au service de la lutte antiDDoS à OVH - Soiré...
Steven Le Roux - Kafka et Storm au service de la lutte antiDDoS à OVH - Soiré...
 
2014 03-25 - GDG Nantes - Web Components avec Polymer
2014 03-25 - GDG Nantes - Web Components avec Polymer2014 03-25 - GDG Nantes - Web Components avec Polymer
2014 03-25 - GDG Nantes - Web Components avec Polymer
 
Bootcamp d'Initiation à Android - 2013/11/30 - Live coding : Hello world!
Bootcamp d'Initiation à Android  - 2013/11/30 - Live coding :   Hello world!Bootcamp d'Initiation à Android  - 2013/11/30 - Live coding :   Hello world!
Bootcamp d'Initiation à Android - 2013/11/30 - Live coding : Hello world!
 
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/30
 

Dernier

1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire
NadineHG
 
MS-203 Microsoft 365 Messaging Study Guide to prepare the certification
MS-203 Microsoft 365 Messaging Study Guide to prepare the certificationMS-203 Microsoft 365 Messaging Study Guide to prepare the certification
MS-203 Microsoft 365 Messaging Study Guide to prepare the certification
OlivierLumeau1
 
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
Editions La Dondaine
 
Zineb Mekouar.pptx Écrivaine marocaine
Zineb Mekouar.pptx   Écrivaine  marocaineZineb Mekouar.pptx   Écrivaine  marocaine
Zineb Mekouar.pptx Écrivaine marocaine
Txaruka
 
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
mcevapi3
 
Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024
Friends of African Village Libraries
 
Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...
Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...
Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...
dokposeverin
 
A2-Critiques-gastronomiques activités critiques
A2-Critiques-gastronomiques activités critiquesA2-Critiques-gastronomiques activités critiques
A2-Critiques-gastronomiques activités critiques
lebaobabbleu
 
A2-Faire-une-appreciation positive et/ou négative (A2)
A2-Faire-une-appreciation positive et/ou négative (A2)A2-Faire-une-appreciation positive et/ou négative (A2)
A2-Faire-une-appreciation positive et/ou négative (A2)
lebaobabbleu
 
Formation M2i - Attitude constructive : développer l'art de l'optimisme
Formation M2i - Attitude constructive : développer l'art de l'optimismeFormation M2i - Attitude constructive : développer l'art de l'optimisme
Formation M2i - Attitude constructive : développer l'art de l'optimisme
M2i Formation
 
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptxMARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
Martin M Flynn
 
Microbiologie: le monde microbien et les techniques de mise en évidence.
Microbiologie: le monde microbien et les techniques de mise en évidence.Microbiologie: le monde microbien et les techniques de mise en évidence.
Microbiologie: le monde microbien et les techniques de mise en évidence.
MahouwetinJacquesGBO
 
apprendre-a-programmer-avec-python-3.pdf
apprendre-a-programmer-avec-python-3.pdfapprendre-a-programmer-avec-python-3.pdf
apprendre-a-programmer-avec-python-3.pdf
kamouzou878
 

Dernier (13)

1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire1eT Revolutions Empire Revolution Empire
1eT Revolutions Empire Revolution Empire
 
MS-203 Microsoft 365 Messaging Study Guide to prepare the certification
MS-203 Microsoft 365 Messaging Study Guide to prepare the certificationMS-203 Microsoft 365 Messaging Study Guide to prepare the certification
MS-203 Microsoft 365 Messaging Study Guide to prepare the certification
 
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
La Révolution Bénédictine Casadéenne du Livradois-Forez: De Charlemagne à Fra...
 
Zineb Mekouar.pptx Écrivaine marocaine
Zineb Mekouar.pptx   Écrivaine  marocaineZineb Mekouar.pptx   Écrivaine  marocaine
Zineb Mekouar.pptx Écrivaine marocaine
 
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
[218_phot_d'Autriche-Hongrie_et_des_[...]Vaffier_Hubert_btv1b8594559c.pdf
 
Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024Burkina Faso libraries newsletter for June 2024
Burkina Faso libraries newsletter for June 2024
 
Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...
Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...
Manuel-5.-Elevage-de-poisson-chat-africain-Clarias-gariepinus-en-bacs-hors-so...
 
A2-Critiques-gastronomiques activités critiques
A2-Critiques-gastronomiques activités critiquesA2-Critiques-gastronomiques activités critiques
A2-Critiques-gastronomiques activités critiques
 
A2-Faire-une-appreciation positive et/ou négative (A2)
A2-Faire-une-appreciation positive et/ou négative (A2)A2-Faire-une-appreciation positive et/ou négative (A2)
A2-Faire-une-appreciation positive et/ou négative (A2)
 
Formation M2i - Attitude constructive : développer l'art de l'optimisme
Formation M2i - Attitude constructive : développer l'art de l'optimismeFormation M2i - Attitude constructive : développer l'art de l'optimisme
Formation M2i - Attitude constructive : développer l'art de l'optimisme
 
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptxMARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
MARTYRS DE HOLLANDE - La révolte hollandaise et les guerres de religion..pptx
 
Microbiologie: le monde microbien et les techniques de mise en évidence.
Microbiologie: le monde microbien et les techniques de mise en évidence.Microbiologie: le monde microbien et les techniques de mise en évidence.
Microbiologie: le monde microbien et les techniques de mise en évidence.
 
apprendre-a-programmer-avec-python-3.pdf
apprendre-a-programmer-avec-python-3.pdfapprendre-a-programmer-avec-python-3.pdf
apprendre-a-programmer-avec-python-3.pdf
 

ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter Bootstrap

  • 1. Conception d'Applications Interactives : Applications Web et JEE Séance #1 Côté navigateur HTML5 / CSS / JS / AngularJS 2/3 - HTML5, CSS3, Twitter Bootstrap
  • 2. Description du module ● Côté navigateur ○ HTML5 / CSS / JS - Polymer, Twitter Bootstrap ● Côté serveur - Concepts ○ Introduction à JEE : servlets, JSP, frameworks… - SparkJava ● Côté serveur - NodeJS ○ NodeJS, ExpressJS, APIs ● Forge JavaScript et Web Components ○ Une forge logicielle pour JavaScript : Grunt/Gulp, Bower, Yeoman ● Autour de la webapp ○ Forge logicielle en Java - Test-driven development ● Examen et exposées des projets
  • 3. ● Les bases du web ○ HTTP, URL, HTML, CSS, JS, AJAX... ● HTML5 ○ HTML5, CSS3, le casse-tête des navigateurs... ○ Le web en 2013, le responsive design ● Twitter Bootstrap ○ Outils, échafaudage, LessCSS, JQuery ● Le développeur web en 2014 ○ Rôles, technologies, langages, veille technologique ● Polymer ○ Web components & Polymer Côté navigateur
  • 4. ● Le buzzword - HTML5, c'est quoi ? ● HTML 5 ● CSS 3 ● Le casse-tête des navigateurs... ● Le web en 2014, le responsive design HTML5
  • 6. L’HTML 5 n’est pas… "L’HTML5, c’est un nouveau langage ?" "Je débute, j’ai envie d’apprendre l’HTML5 directement, ça a l’air mieux que l’HTML d’avant." "Pfff, moi qui venais d’apprendre l’HTML, je vais devoir tout réapprendre…" L’HTML5 n’est pas un nouveau langage
  • 7. L'HTML5 est... ● Une évolution d'HTML 4 ○ Qu'on a survolé précédement ● Deux syntaxes : HTML5 et XHTML5 ● Des nouvelles fonctionnalités ● Une couche d'application ○ Des APIs
  • 8. L'HTML5 et les standards ● W3C définit les standards du web ○ Chargé d'élaborer le standard HTML5 ○ Processus très lent et bureaucratique ● WHATWG Web Hypertext Application Technology Working Group ○ Groupe dissident du W3C ○ Des développeurs des navigateurs ○ Approche pratique ● Les deux travaillent en parallèle ○ Sur le même document
  • 9. Alors, deux standards HTML5 ? ● En 2012 le W3C et le WHATWG ont décidé de suivre des chemins séparés ○ W3C travaille pour un standard fixe ■ Un snapshop de l'état actuel : HTML5 ○ WHATWG travaille sur un living standard ■ En évolution permanente : HTML ● Approches complémentaires
  • 10. Les nouveautés de HTML5 ● Allègement du code ● Nouvelles balises sémantiques ● Disparition de balises de mise en forme ● Nouveau modèle de contenu ● Balises multimédia ● Formulaires avec sémantique ● Stockage local ● Glisser-Déposer ● Géolocalisation ● Websockets
  • 11. Les nouveautés de HTML5 - Allègement du code ● Allègement de l'entête head ○ Le doctype, les balises meta, l'encodage des caractères, les balises style et script <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="design. css" /> <script src="script.js"></script> </head> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="design. css" /> <script type=”text/javascript” src=script.js"></script> </head> ● Simplifications en général ○ Certaines discutables (pas de /> pour balises vides)
  • 12. Les nouveautés de HTML5 - Nouvelles balises sémantiques ● Des balises avec du sens sémantique ○ Plus spécifiques que les génériques ○ Structuration du document ● <header> : indique une en-tête ● <footer> : indique un pied de page ● <nav> : indique un élément de navigation (menu...) ● <aside> : indique une zone secondaire (sidebar, publicité...) ● <section> : indique une portion de la page ● <article> : indique une portion de la page avec du sens en lui-même Image : Alsa Creations
  • 13. Les nouveautés de HTML5 - Disparition de balises de mise en forme ● Meilleure séparation entre forme et contenu ● Disparition de balises sans sens sémantique ○ Telles que center, font, big, strike ou u ● La mise en forme se fait avec les CSS
  • 14. Les nouveautés de HTML5 - Nouvelles modèle de contenu ● Avant : modèle inline-block ● Maintenant : des catégories ○ Chaque élément dans 0 ou plus catégories ● Structuration logique du document Image : WHATWG
  • 15. Les nouveautés de HTML5 - Balises multimédia ● <video> : introduit un lecteur vidéo ayant une URL comme source ● <audio> : introduit un lecteur audio ayant une URL comme source ● <canvas> : introduit une surface de dessin ○ Dessiner, tracer des formes, les animer...
  • 16. Les nouveautés de HTML5 - Formulaires avec sémantique ● Des nouveaux types pour la balise <input> ○ tel ○ email ○ url ○ date, day, month, year, week ○ number ○ range ○ search ○ color
  • 17. Les nouveautés de HTML5 - Stockage local ● Stocker des informations côté navigateur ○ Système clé-valeur ○ Chaque domaine a son sandbox ● Applications web déconnectés localStorage['maCle'] = "Ma valeur"; ou localStorage.setitem("maCle", "Ma valeur"); localStorage['maCle']; ou localStorage.getitem['maCle']; removeItem("maCle"); if (localStorage) { // Le navigateur supporte le localStorage } else { // localStorage non supporté } Stocker une valeur : Récupérer une valeur : Effacer une clé : Tester si le navigateur supporte le stockage local :
  • 18. Les nouveautés de HTML5 - Géolocalisation ● Spécification W3C propre associée à HTML5 ● Permet de géolocaliser le navigateur ○ GPS, triangulation GSM, triangulation wifi, adresse IP ● Pour Wifi et IP, utilisation de BDD de géolocalisation ○ E.g : https://www.google.com/loc/json ● API asynchrone ○ Fonction callback pour récevoir la réponse function maPosition(position) { var infopos = "Position déterminée :n"; infopos += "Latitude : "+position.coords.latitude +"n" infopos += "Longitude: "+position.coords.longitude+"n"; infopos += "Altitude : "+position.coords.altitude +"n"; document.getElementById("infoposition").innerHTML = infopos; } // Pour connaître la position navigator.geolocation.getCurrentPosition(maPosition); // Pour suivre la position var survId = navigator.geolocation.watchPosition(maPosition); // Pour annuler le suivi de position navigator.geolocation.clearWatch(survId);
  • 19. ● Permet de déplacer des éléments entre des applications et le navigateur ○ API JavaScript native HTML5 ● Attribute draggable : élément déplaçable ● Événement dragstart : généré au début du transfert ● Événement dragover : généré au survole d'un élément pendant la glisse ● Événement drop : généré en fin de transfert Les nouveautés de HTML5 - Glisser-Déposer function dragstart(target, e) { e.dataTransfer.setData('text/plain', "Texte transmis""); } function dragover(target, e) { e.preventDefault(); // Annule l'interdiction de drop } function drop(target, e) { e.preventDefault(); // Annule l'interdiction de drop alert('Vous avez bien déposé votre élément !'); } <div id="source" draggable="true" ondragstart="dragstart(this, event)"> Élement source </div> <div id="target" ondragover="dragover(this,event)" ondrop="drop(this,event)"> Élement cible </div>
  • 20. Les nouveautés de HTML5 - Websockets ● HTTP standard : requête-réponse ○ Du navigateur au serveur ● Websockets : communication bi-directionnelle ○ Plus besoin de polling, long-polling ou autres
  • 21. CSS3
  • 22. Les CSS3, c'est quoi ? "C'est quoi le CSS3 ? Ca a un rapport avec HTML5" ● Le CCS3 n'est pas forcément lié à HTML5 ● Une évolution majeure des CSS ○ Nouveaux sélecteurs ○ Nouvelles façons de spécifier les couleurs ○ Détection des caractéristiques des terminaux ○ Des calculs dans la feuille de style ○ Des SVG en arrière plan ○ ...
  • 23. Exemple classique : Les coins arrondis ● Boîte avec coins arrondis avant CSS3 ○ Une <table> avec 9 cases, chacune avec des images de fond ● Boîte avec coins arrondis avec CSS3 <!doctype html> <html> <head> <meta charset="utf-8" /> <style> .boite_arrondie { background: #eeeeee; border: 2px solid black; border-radius: 20px; width: 200px; height: 80px; margin: auto; padding: 20px; } </style> </head> <div class="boite_arrondie"> Oh la jolie boîte ! </div> </hmtl>
  • 24. Les nouveautés CSS3 ● Effets visuels ● Sélecteurs ● Nouveaux outils
  • 25. Les nouveautés CSS3 - Effets visuels ● border-radius border-radius: 20px; ● box-shadow box-shadow: 10px 10px 5px #000088; ● text-shadow text-shadow: 4px 4px 3px #ff0000; ● font-face @font-face { font-family: 'Luckiest Guy'; src:url("luckiest-guy-regular.otf") } ... font-family:'Luckiest Guy';
  • 26. Les nouveautés CSS3 - Effets visuels ● gradient background-image: linear-gradient(right top, #D60F0F 0%, #FFDD00 100%); ● opacity background: rgba(0, 180, 0, 0.5);
  • 27. Les nouveautés CSS3 - Effets visuels : transform ● transform : rotate transform: rotate(30deg) ● transform : skew transform: skew(15deg, 30deg); ● transform : scale transform: scale(1,0.25) ● transform : translate -webkit-transform: translate(30px, 30px);
  • 28. Les nouveautés CSS3 - Effets visuels : Transitions ● Des propriétés ○ transition-property : Propriétés CSS à transformer ■ couleurs, position, dimensions, transformations, visibilité, ombres, dégradés ○ transition-duration : Durée de la transition ■ en secondes ou millisecondes ○ transition-timing-function : ■ Fonction de transition, modèle d'interpolation (accélération, décélération...) ○ transition-delay : Retard du départ de la transition ■ en secondes ou millisecondes
  • 29. Les nouveautés CSS3 - Effets visuels : Transitions ● Déclenchement .transition { background: #aaa; transition-property : color; transition-duration : 5s; color: white; } .transition:hover { transition-property : color; transition-duration : 5s; color: black; }
  • 30. Les nouveautés CSS3 - Tranformées en 3D ● perspective transform: perspective(600px) rotateX(40deg ); ● rotateX, rotateY, rotateZ ● translateX, translateY, translateZ
  • 31. Les nouveautés CSS3 - Animations ● Des keyframes @keyframes rotateCube { 0% { transform: rotateX( 0deg ) rotateY( 0deg ); } 100% { transform: rotateX( 360deg ) rotateY( 360deg ); } } ● Des animations animation: rotateCube 8s infinite linear;
  • 32. Exemple : le cube des navigateurs ● translateX, translateY, translateZ ● rotateX, rotateY, rotateZ ● animation, @keyframes
  • 33. Le casse-tête des navigateurs
  • 34. Les coins arrondis : Les préfixes vendeurs ● Vous souvenez-vous des coins arrondis ? ○ Jusqu'à il n'y a pas longtemps, cela ne marchait pas partout ● CSS3 considéré expérimental, chaque navigateur implémentait à sa façon ○ Des préfixes propriétaires ou préfixes vendeurs ■ Les principaux ? -moz pour Firefox, -webkit pour Chrome/Safari ○ Oblligation de les mettre pour atteindre tout le monde border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;
  • 35. Les coins arrondis : Et sur les vieux IE ? ● Et comment on fait sur IE8 ou IE7 ? Ou même IE6 ? ● C'est grave si ça ne marche pas ? ○ Pas pour des coins arrondis ○ Oui si cela gêne le fonctionnement ! ● On peut faire quoi ○ Essayer Modernizr et utiliser polyfills ○ Vérifier fonctionnement dans vieux navigateurs Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js' });
  • 36. Le problème... ● HTML5 et CSS3 pas encore figés dans le marbre ○ Le niveau de support change selon les navigateurs et les versions ○ Des fonctions non implémentées ○ Des fonctions avec des noms différents ● Certaines propriétés sont supportées un peu partout ○ D'autres seulement sur quelques rares navigateurs ● Quand et quoi utiliser ? ○ Ca dépend de l'application ■ Public cible... ○ Et de la criticité du composant ■ Si pas supporté, l'appli reste utilisable ?
  • 37. Puis-je l'utiliser ? Avec des préfixes ? ● Dans le doute, consulter Can I use... ? ○ Support par navigateur pour chaque élément HTML5/CSS3/JS ● Ou le très beau HTML5 Readiness
  • 39. Pour aller plus loin ● Pour apprendre et se tenir informés : HTML5 Rocks!
  • 40. Twitter Bootstrap Car nous ne sommes pas tous des graphistes
  • 41. C'est très beau ça... mais le design graphique me fait peur ! ● Si on fait du web en 2013 on ne peut pas se passer du HTML5/CSS3/JS ○ Mais la plupart des développeurs n'aiment pas concevoir des interfaces ○ On n'est pas des graphistes ! ● Quoi faire ? ● ● Solution 1: Venir à la séssion FinistJUG d'avril ○ JavaScript pour des développeurs Java ● Solution 2 : Utiliser Twitter Bootstrap
  • 42. C'est quoi Twitter Bootstrap ● Constats chez Twitter en 2009 : ○ Les développeurs d'applications web n'aiment pas faire de l'IHM web ○ A chaque nouvelle application, on refaisait une IHM ○ Soucis d'ergonomie, d'uniformité, d'esthétisme ● Solution : faire un boîte à utils HTML5/CSS3/JS ○ Pour IHMs performantes, egonomiques et jolies ○ Simple à utiliser ■ Permettant à un développeur de faire des IHMs belles et efficaces ○ Lingua franca entre graphistes et développeurs
  • 43. La panoplie Twitter Bootstrap ● Des éléments de base, des composants, des widgets complèxes... ● Modulable ● Responsive
  • 44. Facile à intégrer, facile à personnaliser ● Il suffit d'embarquer les JS et CSS Bootstrap ● Les composants sont des classes CSS ● Pas besoin de prise de tête avec la présentation ● Responsive, adaptable à tout terminal Mais je veux ma présentation à moi ● Des thèmes ○ Permettant de garder la puissance Bootstrap ○ Adaptant le look à ce que je veux ○ Toujours sans prise de tête développeur
  • 45. Lingua franca ? ● Les graphistes web aiment Bootstrap ○ Ergonomie soignée ○ CSS claires et structurées ○ Simplicité d'adaptation et personnalisation des thèmes ● Les développeurs aiment Bootstrap ● Les graphistes et développeurs comprennent Bootstrap Langage commun entre développeurs et graphistes ● Le graphiste fournit des maquettes en Bootstrap ● Le développeur adapte sa logique IHM à Bootstrap