11/02/14 1 SITE WEB RÉACTIFS

Transcription

11/02/14 CONTEXTE
SITE WEB RÉACTIFS
S. LANQUETIN
ENVIRONNEMENT
•  Clavier (standard, mini, virtuel)
•  Souris / doigt / stylet
•  Rotation de l’écran
•  Performances CPU et GPU
•  Capacité de stockage
•  GPS
•  Mobile/fixe
•  Luminosité
•  …
PRINCIPES GÉNÉRAUX
•  Conception graphique sur une grille variable en
fonction du média ciblé
NAVIGATEURS
•  http://gs.statcounter.com/#mobile_browser-FRmonthly-201312-201312-bar
LES POINTS DE RUPTURE
•  http://gs.statcounter.com/#resolution-wwmonthly-201210-201310
•  Utilisation des médias queries (CSS3)
•  Site fluide :
•  Définition des éléments en pourcentages,
•  Polices en em
•  Utilisation des styles en cascades
1 11/02/14 LES POINTS DE RUPTURE
•  http://gs.statcounter.com/#mobile_resolution-wwmonthly-201210-201310
LES POINTS DE RUPTURE
•  Pour les écrans 1025px à 1200px ou plus
•  Pour les tablettes : 768px à 1024px
•  Pour les Smartphones : 320px à 767px
LES OUTILS
•  Navigateur : firefox
•  Mode Responsive
•  Outils – Developpeur Web – Vue
Adaptative
•  Redimension de la fenêtre, rotation
•  Ne remplace pas un simulateur
•  Plug-in Web Developer
•  Barre d’outils Web Developer
LES MÉDIA QUERIES
•  Préciser le type d’écran
all
Tous type de médias
aural
Navigateurs à synthèse vocale
braille
Terminaux tactiles braille
embossed
Imprimantes braille
handheld
terminaux mobiles (petit écran, monochrome,
images bitmap, bande passante limitée)
print
Pour l’impression
tty
Terminaux de type téléscripteurs
tv
téléviseurs
SIMULATEURS
•  Windows Phone (version 7.1)
http://dev.windowsphone.com/en-us/downloadsdk
•  Android SDK
http://developer.android.com/sdk/index.html
•  Opera mobile emulator
http://www.opera.com/developer/tools/mobile/
•  iOS
https://developer.apple.com/xcode/
STRUCTURE DES MÉDIAS QUERIES
•  Lien vers un fichier (à privilégier)
<link rel="stylesheet" href="style.css"
media="opérateur type_de_média and (expression)" />
•  Opérateurs : only, not
•  Types : les types de médias
•  Expressions : width, height, min-width, min-height, maxwidth, max-height, orientation (portrait ou paysage)
•  Entre balises style (à éviter)
<style>
@media opérateur type_de_média and (expression){
…
}
</style>
2 11/02/14 STRUCTURE DES MÉDIAS QUERIES
•  Exemples de structures
EXEMPLE DE MÉDIA QUÉRIES
<link rel="stylesheet" media="screen"
href="styleSmartPhones.css"/>
<link rel="stylesheet" href="style.css"
media="screen and (max-width:768px)" />
<link rel="stylesheet" media="screen and (min-width:768px)"
href="styleEcrans.css"/>
<style>
@media only screen and (min-width:500px){
}
</style>
RECOMMANDATIONS W3C
•  http://www.w3.org/TR/css3-mediaqueries/
BALISE META VIEWPORT
•  Taille de l’écran :
device-width
device-width
•  Taille de la fenêtre du
navigateur : width
•  Sur un Smartphone ou dans un simulateur
•  Adapter la page
<meta name="viewport"
content="width=device-width"/>
width
3 11/02/14 BALISE META VIEWPORT
•  Zoom
•  Zoom
•  Redimension
content="width=device-width,
initial-scale=1.5"/>
content="width=device-width,
initial-scale=2.0, userscalable=no"/>
PROPRIÉTÉS DE VIEWPORT
•  Sur une tablette ou dans un simulateur
•  Gestion de l’affichage de la page dans le navigateur
content="width=device-width"/>
3 MAQUETTES DIFFÉRENTES
Ecrans
Propriété
Description
width
Largeur de fenêtre d'affichage souhaitée. Nombre en pixels ou
”device-width”.
height
Hauteur de fenêtre d'affichage souhaitée. Nombre en pixels ou
”device-height”.
initial-scale
Niveau de zoom souhaité au chargement de la page. Valeur par
défaut est de 1.0
minimum-scale
Niveau de zoom minimal autorisé sur la page.
maximum-scale
Niveau de zoom maximal autorisé sur la page.
Valeur maximale =10.0
user-scalable
Valeur booléenne qui détermine si l’utilisateur est autorisé à utiliser le
zoom sur la page. Valeur par défaut vrai.
•  Créer le fichier html
•  Créer les fichiers css
•  N’oublier pas le viewport
Tablettes
Smartphones
4 11/02/14 IMAGES EN %
IMAGES EN %
<p><img src="keys.png" alt=""/>Le Lorem Ipsum ….</p>
p{
p{
width:50%;
padding:5%;
background-color: #3787e9; }
img{
float:left;}
IMAGES EN %
width:50%;
padding:5%;
img{
float:left;
width:100%;}
BACKGROUND-IMAGE
•  caniuse.com
p{
width:50%;
padding:5%;
img{
float:left;
max-width:100%;}
IMAGE DE FOND
IMAGIMAGE DE FONDE DE FOND
body{
background-image: url(fondneige.jpg);}
body{
background-image: url(fondneige.jpg);
background-size: contain;}
5 11/02/14 IMAGE DE FOND
body{
background-size: cover;}
PAGE FLUIDES
•  Convertir px en %
cible/contexte=resultat en pourcentage
•  Convertir px en em
•  Images fluides
img{
}
max-width:100%;
IMAGE DE FOND
body{
background-size: cover;
background-attachment: fixed;
background-position: center center; }
FORMULAIRES POUR SITE WEB RÉACTIF
<form action="" method="">
<ul>
<li>
<label for="nom">Nom</label>
<input type="text" id= "nom" name="nom"/>
</li>
</ul>
</form>
•  Images adaptées aux tailles d’écrans
http://adaptive-images.com/
•  Utilisation des grilles CSS
•  Enlever les puces pour tous les médias
ul{
}
margin:0; padding:0;
list-style-type: none;
•  Pré-remplir les champs
<meta name="viewport" content="width=device-width"/>
•  Positionner le « label » au dessus du champ pour les
smartphones
label{
}
•  Respecter les types des éléments
display:block;
•  Adapter la page à la fenêtre (mobiles)
<meta name="viewport" content="width=device-width"/>
6 11/02/14 FORMULAIRES POUR SITE WEB RÉACTIF
<input type="text" />
<input type="password" />
<input type="tel" />
<input type="email" />
window.onchange=afficheCurseur;
function afficheCurseur(){
document.getElementById("cur").innerHTML=
document.getElementById("curseur").value;
}
<input type="number" />
LES BALISES HTML5
<input type="range" id="curseur" name="curseur"
min="0" max="100"/>
<span id="cur">50</span>
<input type="date" />
Entrée
Description
IE
Firefox
Opera
Chrome
Safari
number
Nombre
No
28?
9.0
7.0
5.0
range
Nombre
entre deux
valeurs
10.0
23.0
9.0
4.0
3.1
email
Mail
No
4.0
9.0
10.0
No
url
URL
No
4.0
9.0
10.0
No
tel
Num. tel
No
?
No
Oui
4.0
date
Date/heure No
No
17.0
31.0
No
search
Recherche
No
4.0
11.0
10.0
No
color
Couleur
No
28.0?
17.0
31.0
No
<input type="url" />
IE VERSIONS <9
•  Version IE <= 6 : remplacer max-width par width
(commentaires conditionnels)
•  Version IE < 8 : mauvais affichage des images
réduites (utiliser AlphaImageLoader)
msdn.microsoft.com/en-us/library/ms532969
•  Version IE <= 8 : incompatible avec les média
queries (intégrer le script css3-mediaqueries.js)
https://code.google.com/p/css3-mediaqueries-js/
COMMENTAIRES CONDITIONNELS
•  Version IE < 8

•  Version IE <= 8

7 11/02/14 HTML5 POUR TOUS
•  Script de Remy Sharp
DATA URL
•  dataurl.net/#about
•  Modernizr http://modernizr.com/
DATA URL
IMAGES SPRITE
•  Plusieurs images dans une image (groupées par
tailles)
<img src="data:image/jpeg;base64,/9j/…P/Z" alt="loupe"/>
#loupe{
background-image:url(data:image/jpeg;base64,/9j/...P/Z)
}
IMAGES SPRITE
<header>
<div id="essai"></div>
<div id="liens">
<a href="http://…"></a>
#liens{
width:300px;float: left;}
#liens a{
</div>
width:100px;height:50px;float: left;}
</header>
#liens a:first-child{
background:url(sprite.png) no-repeat -100px 0;}
#liens a:nth-child(2){
#liens a:nth-child(3){
#essai{
float:right;width:50px;height:50px;
background:url(sprite.png) no-repeat 0 0;}
#essai:hover{
8 11/02/14 3 MAQUETTES DIFFÉRENTES
•  A partir du document html donné, donnez les
fichiers css permettant d’obtenir ces différentes
pages
• 
• 
• 
• 
• 
Site fluide
Média-queries
Menu horizontal / vertical
Sprite
…
PLUS D’INFORMATIONS
RWD
• Responsive Web Design avec HTML5
et CSS3, B. Frain
• Adaptive Web Design: Créer des sites
riches avec l'amélioration progressive,
A. Gustafson, J. Zeldman
• http://www.alistapart.com/articles/
responsive-web-design/
9

11/02/14 1 SITE WEB RÉACTIFS

Transcription

Documents pareils

Le module EPG de Progdvb

Logiciels AgrÃ©Ã©s par la Commission de pilotage de la

cours d`initiation a la creation de pages internet en html plan

Les principales balises Html

The Open Graph Protocol

V568 (PF)

venetian 70fs34 - Slik Portfolio

Téléchargez l`affiche - La Course à la Fibre

Télécharger les spécifications techniques au

V588 (PF)