Responsive Web Design avec HTML5 et CSS3
Contents
1. Pr face Si vous pensez qu il est n cessaire de cr er une version mobile de votre site web r fl chissez bien Le principe du responsive web design conception de sites web r actifs est de ne proposer qu un seul et unique design qui s adapte parfaite ment toutes les tailles d crans qu il s agisse de celui d un smartphone ou de celui d un ordinateur de bureau et de toutes les tailles interm diaires Ce design r agira sans souci la taille de l cran du visiteur en lui fournissant la meilleure exp rience utilisateur possible aussi bien pour les appareils d aujourd hui que pour ceux de demain Cet ouvrage propose un mode d emploi pour transformer un site web existant largeur fixe en site web r actif En outre il am liore la m thodologie de responsive design en appliquant les techniques les plus r centes et les plus utiles offertes par HTMLS et CSS3 rendant ainsi les sites plus l gers et plus faciles maintenir que par le pass Il explique galement les bonnes pratiques concernant l criture du code et la mise en uvre des fichiers et des images Si vous comprenez les langages HTML et CSS vous saurez concevoir un site web r actif Les sujets trait s Le Chapitre 1 Introduction HTMLS CSS3 et au responsive web design d finit le principe du responsive web design en fournit des exemples et souligne les avantages de HTMLS et de CSS3 et le gain de temps et d argent que ces langag2. es et les bo tes ainsi que les d grad s uniquement gr ce CSS3 Nous verrons aussi comment ajouter plusieurs images d arri re plan et cr er des ic nes avec une police Le Chapitre 7 Transitions transformations et animations avec CSS3 explore la mani re de cr er d animer et de transformer des l ments juste avec CSS3 Le Chapitre 8 Formulaires sophistiqu s avec HTMLS et CSS3 indique comment impl menter des techniques pour faire fonctionner les formulaires avec tous les navigateurs et tous les appareils du tout dernier smartphone l ordinateur de bureau Le Chapitre 9 R soudre les d fis li s la compatibilit des sites r actifs avec tous les navigateurs explique comment rendre r actives les anciennes versions d Internet Explorer transformer en menu une s rie de liens sur un appareil mobile servir des contenus diff rents aux crans haute r solution et charger de mani re conditionnelle des scripts avec Modernizr Pr requis Vous devez tre familier des langages HTML et CSS Une connaissance l mentaire de JavaScript peut aussi se r v ler utile Enfin tre cin phile est un bon point qui s adresse ce livre Construisez vous deux sites web l un pour les crans d appareils mobiles et l autre destin aux crans plus spacieux Vous avez peut tre entendu parler de responsive design mais ne savez pas comment combiner HTMLS CSS3 et solutions r actives Si oui ce livre vous pro
3. es permettent d obtenir Le Chapitre 2 Media queries g rer diff rentes zones de visualisation explique les media queries leur syntaxe et comment les appliquer une conception web afin d adapter la feuille de style CSS aux diff rents crans et appareils Le Chapitre 3 Adopter les mises en page fluides explique les b n fices des mises en page fluides et montre comment convertir facilement une mise en page largeur fixe en mise en page fluide ou se servir de CSS pour prototyper rapidement un site responsive Le Chapitre 4 HTMLS pour les designs r actifs explore les nombreux avantages de coder en HTMLS code plus l ger l ments s mantiques mise en cache hors ligne et mise en uvre de WAI ARIA pour les technologies d assistance 1 N d T nous emploierons dans cet ouvrage indiff remment les termes responsive web design ou design web r actif 2013 Pearson France Responsive Web Design Ben Frain 2 Responsive Web Design avec HTMLS et CSS3 Le Chapitre 5 CSS3 s lecteurs typographie et modes de couleurs d montre la puissance des s lecteurs CSS3 qui permettent de cibler et de transformer facilement n importe quoi Nous utiliserons aussi la r gle CSS3 font face pour cr er une belle typo pour le Web et expliquerons les nouveaux mod les de couleurs de CSS3 comme RGB A et HSL A Le Chapitre 6 Effets esth tiques superbes avec CSS3 montre comment cr er des ombres pour les text
4. pose tout ce que vous avez besoin de savoir pour am liorer vos pages web avant que vos concurrents ne le fassent Ce livre s adresse aux concepteurs web et aux d veloppeurs qui produisent des sites largeur fixe avec les langages HTML 4 01 et CSS 2 1 Il explique comment construire des sites qui s adaptent toutes les tailles d cran avec HTMLS et CSS3 2013 Pearson France Responsive Web Design Ben Frain Pr face 3 Conventions Vous trouverez au fil de ces pages plusieurs styles de texte destin s faire la diff rence entre les cat gories d informations Voici quelques exemples de ces styles et leur signification Le code inclus dans le texte se pr sente comme suit La syntaxe valide de HTMLS est bien plus permissive Par exemple lt sCRipt SrC js jquery 1 6 2 js gt lt script gt est valide Un bloc de code se pr sente ainsi lt div class entete gt lt div class navigation gt lt ul class nav list gt lt li gt lt a href title Accueil gt Accueil lt a gt lt li gt lt li gt lt a href title A propos gt A propos lt a gt lt 1i gt lt ul gt lt div gt lt l fin de navigation gt lt div gt lt fin d en tete gt Quand nous souhaitons attirer votre attention sur un passage particulier dans un bloc de code les lignes ou l ments concern s sont en gras wrapper margin right auto margin left auto width 96 contient le DIV le plus ex
5. t rieur header margin right 10px margin left 10px width 97 9166667 940 960 Les nouveaux termes et les mots importants sont en gras Les termes qui s affi chent l cran dans les menus ou les bo tes de dialogue par exemple apparaissent ainsi Par exemple le menu de navigation n alterne pas le rouge et le noir Le bouton principal THESE SHOULD HAVE WON qui se situe dans la zone de contenu et les boutons full info de la barre lat rale manquent et les polices sont loin d tre celles qui sont dans le fichier image NOTE Les avertissements ou les notes importantes apparaissent dans un encadr comme ceci ASTUCE Les trucs et astuces apparaissent comme ceci 2013 Pearson France Responsive Web Design Ben Frain
Download Pdf Manuals
Related Search