View
92
Download
6
Category
Preview:
Citation preview
RESPONSIVE DESIGNTWITTER BOOSTRAPJean-Noël Aubry@jnaubry
Concepts=> Responsive Design
=> Frameworks
=> Open Source
Etat actuel du web
Le responsive design, c’est quoi ?
https://www.alsacreations.com/article/lire/1615-cest-quoi-le-responsive-web-design.html
Le Responsive Web design est une approche de conception Web qui vise à l'élaboration de sites offrant une expérience de lecture et de navigation optimales pour l'utilisateur quelle que soit sa gamme d'appareil (téléphones mobiles, tablettes, liseuses, moniteurs d'ordinateur de bureau).
Eléments du Responsive Web Design (RWD)
• Grille fluide• Images et médias flexibles• CSS3 Media Queries• Adaptations conditionnelles basées sur
Javascript ou jQuery
Les grilles
Les grilles
Les grilles
Fonctionnement du système de grille
12 colonnes
Images redimensionnablesimg {max-width: 100%;height: auto;}
Media Queries
• Spécification CSS3 Media Queries qui définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML.
• On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS.
• Devenu un standard en Juin 2012
Résolution MédiaMédia Taille du layout
Smartphones 480px et en dessous
Tablettes en mode portrait 480px à 768px
Tablettes en mode paysage 768px à 940px
Défaut 940px et au dessus
Ecrans larges 1210px et au dessus
Framework• Pré-requis :• Système de grille fluide
• Redimensionnable
• Qui offre plus qu’une grille (styles prédéfinis pour la typographie, les tableaux, les boutons, les barres de navigation, les éléments de formulaire, etc.)
Framework• Documentation très fournie
• Maintenu régulièrement par la communauté et les créateurs du framework
• Open Source (gratuit)
Twitter Bootstrap• Framework libre et gratuit pour le design de sites ou
d’applications web
• Basé sur HTML5, CSS et Javascript
• Supporte tous les principaux navigateurs
• 1ère release sur GitHub en Août 2011
Twitter Bootstrap• Créée par :
Twitter Bootstrap : Pourquoi ?• Raison #1 : nombreuses fonctionnalités
Twitter Bootstrap : Pourquoi ?• Raison #2 : support de nombreux navigateurs
Twitter Bootstrap : Pourquoi ?• Raison #3 : jeu d’icônes Glyph
Twitter Bootstrap : Pourquoi ?• Raison #4 : système de grille
• Système de grille 960 http://960.gs/• Blue Print CSS http://www.blueprintcss.org/ • Système Golden Grid http://goldengridsystem.com/
Twitter Bootstrap : Pourquoi ?• Raison #5 : Les composants
Les boutons
Les onglets
La navigation (breadcrumb)
La pagination
Les notifications
La barre de progression
Twitter Bootstrap : Pourquoi ?• Raison #6 : Javascript/jQuery
Twitter Bootstrap : Pourquoi ?• Raison #7 : Personnalisation
Twitter Bootstrap : Comment ?• Télécharger Bootstrap et un éditeur de texte (Sublime, Notepad++)
• Installer l’éditeur de texte
• Extraire les fichiers Bootstrap dans un répertoire de votre projet
• Créer un fichier exemple et intégrer le framework :
Ressources
• http://bootswatch.com/
• https://startbootstrap.com/
• http://bootsnipp.com/
• http://bootstrapbay.com/
Merci !
• Jean-Noël Aubry
• @jnaubry
• https://www.linkedin.com/in/jnaubry
Recommended