11/02/14 SITE WEB RÉACTIFS CONTEXTE ENVIRONNEMENT NAVIGATEURS PRINCIPES GÉNÉRAUX LES POINTS DE RUPTURE

Transcription

1 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 LES POINTS DE RUPTURE Utilisation des médias queries (CSS3) Site fluide : Définition des éléments en pourcentages, Polices en em Utilisation des styles en cascades 1

2 LES POINTS DE RUPTURE LES POINTS DE RUPTURE Pour les écrans 1025px à 1200px ou plus Pour les tablettes : 768px à 1024px Pour les Smartphones : 320px à 767px LES OUTILS SIMULATEURS 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 Windows Phone (version 7.1) Android SDK Opera mobile emulator ios LES MÉDIA QUERIES STRUCTURE DES MÉDIAS QUERIES Préciser le type d écran all aural braille embossed handheld print tty tv Tous type de médias Navigateurs à synthèse vocale Terminaux tactiles braille Imprimantes braille terminaux mobiles (petit écran, monochrome, images bitmap, bande passante limitée) Pour l impression Terminaux de type téléscripteurs téléviseurs 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) opérateur type_de_média and (expression){ </style> 2

3 STRUCTURE DES MÉDIAS QUERIES EXEMPLE DE MÉDIA QUÉRIES Exemples de structures <link rel="stylesheet" href="style.css" media="screen and (max-width:768px)" /> <link rel="stylesheet" media="screen" href="stylesmartphones.css"/><!--fond bleu--> <link rel="stylesheet" media="screen and (min-width:768px)" href="styleecrans.css"/><!--fond mauve--> only screen and (min-width:500px){ </style> RECOMMANDATIONS W3C Sur un Smartphone ou dans un simulateur device-width width Taille de l écran : 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"/> 3

4 Sur un Smartphone ou dans un simulateur Adapter la page Zoom <meta name="viewport" content="width=device-width, initial-scale=1.5"/> Sur un Smartphone ou dans un simulateur Adapter la page Zoom Redimension <meta name="viewport" content="width=device-width, initial-scale=2.0, userscalable=no"/> PROPRIÉTÉS DE VIEWPORT Sur une tablette ou dans un simulateur <meta name="viewport" content="width=device-width"/> Gestion de l affichage de la page dans le navigateur Propriété width Description Largeur de fenêtre d'affichage souhaitée. Nombre en pixels ou device-width. height initial-scale minimum-scale maximum-scale user-scalable Hauteur de fenêtre d'affichage souhaitée. Nombre en pixels ou device-height. Niveau de zoom souhaité au chargement de la page. Valeur par défaut est de 1.0 Niveau de zoom minimal autorisé sur la page. Niveau de zoom maximal autorisé sur la page. Valeur maximale =10.0 Valeur booléenne qui détermine si l utilisateur est autorisé à utiliser le zoom sur la page. Valeur par défaut vrai. 3 MAQUETTES DIFFÉRENTES 3 MAQUETTES DIFFÉRENTES Ecrans Tablettes Créer le fichier html Créer les fichiers css N oublier pas le viewport Smartphones 4

5 11/02/14 IMAGES EN % IMAGES EN % <p><img src="keys.png" alt=""/>le Lorem Ipsum.</p> <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%; background-color: #3787e9; img{ float:left; width:100%; BACKGROUND-IMAGE caniuse.com <p><img src="keys.png" alt=""/>le Lorem Ipsum.</p> p{ width:50%; padding:5%; background-color: #3787e9; 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

6 11/02/14 IMAGE DE FOND body{ background-image: url(fondneige.jpg); 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-image: url(fondneige.jpg); background-size: cover; background-attachment: fixed; background-position: center center; <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 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

7 <input type="text" /> <input type="password" /> <input type="tel" /> <input type=" " /> <input type="date" /> <input type="number" /> LES BALISES HTML5 <input type="range" id="curseur" name="curseur" min="0" max="100"/> <span id="cur">50</span> window.onchange=affichecurseur; function affichecurseur(){ document.getelementbyid("cur").innerhtml= document.getelementbyid("curseur").value; Entrée Description IE Firefox Opera Chrome Safari number Nombre No 28? range Nombre entre deux valeurs Mail No No url URL No No tel Num. tel No? No Oui 4.0 date Date/heure No No No search Recherche No No color Couleur No 28.0? No <input type="url" /> IE VERSIONS <9 COMMENTAIRES CONDITIONNELS 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/ms Version IE <= 8 : incompatible avec les média queries (intégrer le script css3-mediaqueries.js) Version IE < 8 <!--[if lt IE 8]> <link rel="stylesheet" href="stylesie.css" /> <![endif]--> Version IE <= 8 <!--[if gte IE 8]> <link rel="stylesheet" href="stylesie.css" /> <script src=" css3-mediaqueries.js" ></script> <![endif]--> 7

8 11/02/14 HTML5 POUR TOUS Script de Remy Sharp DATA URL dataurl.net/#about Modernizr 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 3 MAQUETTES DIFFÉRENTES <header> <div id="essai"></div> <div id="liens"> <a href=" "></a> #liens{ <a href=" "></a> width:300px;float: left; <a href=" "></a> #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){ background:url(sprite.png) no-repeat -200px 0; #liens a:nth-child(3){ background:url(sprite.png) no-repeat -300px 0; #essai{ float:right;width:50px;height:50px; background:url(sprite.png) no-repeat 0 0; #essai:hover{ background:url(sprite.png) no-repeat -50px 0; 8

9 3 MAQUETTES DIFFÉRENTES PLUS D INFORMATIONS 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 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 responsive-web-design/ 9