Module M Frameworks web

Transcription

1 Module M Frameworks web Sébastien THON DUT Informatique 1ère année IUT d'aix-marseille Université, site d Arles Département Informatique Version 1.0 du 15/09/2015

2 2 INTRODUCTION On a vu comment créer un site web à partir de rien, en utilisant du code HTML pour sa structure et son fond, et des CSS pour sa forme. C'est cependant une tâche assez fastidieuse quand il s'agit de créer des sites web un tant soit peu conséquents, et par la suite d'en maintenir à jour le contenu. Pour faciliter l'élaboration d'un site web, il existe toutes sortes d'outils qui permettent d'éviter de tout créer à partir de zéro. Les CMS Les frameworks

3 3 CMS (Content Management System) Un outil de CMS ou «système de gestion de contenu» est un site web disposant de fonctionnalités de publication et offrant une interface d'administration (back-office) permettant à un administrateur de site de créer ou organiser les différentes rubriques de son site. Les articles et le contenu du site sont stockés dans une base de données, et des templates (modèles de pages) permettent de définir la présentation du contenu.

4 4 Ces CMS ont leurs spécificités, certains sont originalement pensés pour gérer des blogs (Dotclear, Wordpress), pour créer des sites marchands (Magento, Prestashop), pour créer des wikis (MediaWiki), etc. Beaucoup de ces CMS sont basés sur la notion d'extensions ou modules («add-ons») : on peut étendre les possibilités du site en ajoutant simplement un module, gratuit ou payant.

5 5 Exemples de CMS : Drupal Dotclear Joomla! Magento Prestashop Spip Wordpress

6 6 Frameworks web Les CMS permettent de créer très facilement et rapidement un site web complet, même pour des personnes n'ayant aucune connaissances en HTML/CSS. Cependant, ces solutions masquent très souvent le code qui se cache derrière et peuvent manquer de souplesse pour créer exactement le site web que vous souhaitez. Une solution intermédiaire entre l'utilisation d'un CMS ou la création complète en HTML/CSS consiste à utiliser un framework.

7 7 Un framework web est une collection d'outils utiles à la création de sites et d'applications web. Il peuvent offrir un ensemble de codes HTML, CSS, Javascript, PHP, des formulaires, etc. Il existe des frameworks CSS, spécialisés dans le CSS, qui offrent des feuilles de style permettant de standardiser l'apparence de sites. Il existe de très nombreux frameworks, qui peuvent se différencier par leurs possibilités, leur simplicité, mais aussi par la compacité de leur code.

8 8 Une liste assez complète des frameworks disponibles : Dans ce cours, nous allons découvrir Bootstrap, qui est l'un des frameworks les plus utilisés.

9 9 Avantages des frameworks : Une présentation similaire quel que soit le navigateur utilisé. Economie de temps de développement en fournissant les fondations de la présentation. Normalisation de la présentation en proposant un ensemble homogène de styles. Une grille pour faciliter le positionnement des éléments. Formulaires, boutons esthétiques, barres de navigation, etc. Prise en compte de tailles d'écran très variées : ordinateurs, smartphones, tablettes, etc. («responsive design»).

10 10 1. Bootstrap Framework open source crée en 2011 par des développeurs de twitter, initialement pour répondre à des besoins internes de développement pour uniformiser l'aspect des pages web. Il s'agissait juste de stylisation CSS, mais le framework s'est ensuite enrichi de composants Javascript. Outre les fonctions Javascript, Bootstrap est essentiellement un fichier CSS comportant de nombreuses classes que l'on peut utiliser directement dans les balises HTML. Il comporte un système de grille pour structurer l'aspect visuel d'une page web. Il apporte du style pour les menus, les boutons, les formulaires,

11 Installation Télécharger Bootstrap sur le site officiel : Essentiellement deux possibilités : Download Bootstrap : permet de récupérer juste les fichiers nécessaires au fonctionnement de Bootstrap. Download source : permet de récupérer en plus tous les fichiers sources.

12 12 Les fichiers de Bootstrap utiles à votre site web sont répartis dans l'arborescence suivante :

13 13 Les fichiers qui comportent «.min» dans leur nom sont des fichiers minifiés («minified»), ils contiennent le même code que le fichier de base (ex : bootstrap.css et bootstrap.min.css) mais sans les commentaires, les espaces, les retours chariots, ce qui les allège et donc accélère leur chargement.

14 14 Vous verrez l'année prochaine lors du cours sur Javascript comment utiliser les fonctions Javascript offertes par Bootstrap. On ne s'y attardera pas dans ce cours où nous n'utiliserons que la partie CSS. Sera vu l'année prochaine

15 15 Il y a deux fichiers CSS, bootstrap.css et bootstrap-theme.css Ce dernier est optionnel, il permet d'utiliser un thème plus élaboré graphiquement. Vous pouvez le voir en action ici :

16 16 Installation Copiez les 3 répertoires css, fonts et js dans un répertoire bootstrap que vous placez à la racine de votre site. racine du site/ bootstrap/ css/ fonts/ js/

17 Utilisation Dans le code de votre page HTML, indiquez dans la zone <head></head> (comme on l'a déjà vu dans le chapitre 2 sur les CSS) que vous voulez utiliser le fichier CSS de Bootstrap : <head> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" > </head> (on utilise le fichier minifié bootstrap.min.css pour que le chargement soit plus rapide) Vous verrez l'année prochaine que pour utiliser le module Javascript de Bootstrap il faut aussi ajouter : <script src="bootstrap/js/bootstrap.min.js"></script>

18 18 Exemple Pour les smartphones, pour que l'affichage occupe tout l'espace disponible avec une taille de 1, c'est à dire sans zoom <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>première page avec Bootstrap</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" > <!--[if lt IE 9]> <script src=" <script src=" <![endif]--> </head> <body> <h1>hello, world!</h1> </body> </html> Permet aux navigateurs ne prenant pas en charge HTML5 et les Media Queries CSS3 de le faire.

19 Conteneur Le contenu du site doit être placé dans un conteneur. Bootstrap propose deux classes :.container contient et centre la page sur une largeur fixe, qui s'adapte en fonction de la largeur du navigateur..container-fluid permet à la page d'occuper toute la largeur du navigateur.

20 20 Si on va voir dans le fichier CSS de Bootstrap, on trouve :.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; (min-width: 768px) {.container { width: 750px; } (min-width: 992px) {.container { width: 970px; } (min-width: 1200px) {.container { width: 1170px; } } Vous noterez l'ordre, du plus petit au plus grand, pour avoir la bonne valeur pour width!

21 21 Exemple avec.container : <!DOCTYPE html> <html> <head> <title>bootstrap avec container</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" > </head> <body> <div class="container"> <h1>une page Bootstrap</h1> <p>un peu de texte.</p> </div> </body> </html>

22 22 Exemple avec.container-fluid : <!DOCTYPE html> <html> <head> <title>bootstrap avec container</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" > </head> <body> <div class="container-fluid"> <h1>une page Bootstrap</h1> <p>un peu de texte.</p> </div> </body> </html>

23 Grille Pour faciliter la mise en page des différents éléments d'une page web, Bootstrap propose une grille de 12 colonnes pour les aligner facilement. La grille est découpée en rangées (row) et en colonnes (col).

24 24 Les colonnes ont une taille identique. En revanche la hauteur des rangées est conditionnée par la hauteur de leur contenu. Une rangée prend la hauteur du plus gros élément qu'elle contient. La class.row représente une rangée de la grille.

25 25 Pour définir les colonnes, au maximum de 12, Bootstrap offre 4 x 12 classes : col-xs-1 ou col-sm-1 ou col-md-1 ou col-lg-1 col-xs-2 ou col-sm-2 ou col-md-2 ou col-lg-2 col-xs-3 ou col-sm-3 ou col-md-3 ou col-lg-3... col-xs-12 ou col-sm-12 ou col-md-12 ou col-lg-12 Il y a 4 sortes de classes par colonne pour gérer l'aspect «responsive», car Bootstrap peut s'adapter aux dimensions de l'écran : xs : très petit écran d'un smartphone (extra small) < 768px sm : petit écran d'une tablette (small) < 992px md : écran moyen d'un ordinateur (medium) < 1200px lg : très grand écran d'un ordinateur (large) > 1200px

26 26 Lorsqu'on réduit la taille de l'écran, il y a deux stratégies : réduire la taille des éléments ou disposer autrement les blocs d'informations, par exemple en les empilant. Grand écran Écran plus petit

27 27 Exemple version smartphone : Pour avoir un élément qui occupe 4 colonnes de large suivit d'un élément de 8 colonnes de large sur un smartphone, on a : <div class="row"> <div class="col-xs-4">largeur 4</div> <div class="col-xs-8">largeur 8</div> </div> Quand on passe sur un écran plus grand, les éléments sont aggrandis : Smartphone Tablette, ordinateur

28 28 Exemple version tablette: <div class="row"> <div class="col-sm-4">largeur 4</div> <div class="col-sm-8">largeur 8</div> </div> Quand on passe sur un écran plus grand, les éléments sont aggrandis : Ordinateur Tablette Smartphone Quand on passe sur un écran plus petit, les éléments sont empilés.

29 29 Exemple version grand écran : <div class="row"> <div class="col-lg-4">largeur 4</div> <div class="col-lg-8">largeur 8</div> </div> Quand on passe sur un écran plus petit, les éléments sont réduits et empilés : Grand écran Ecran moyen Petit écran Quand on passe sur un écran encore plus petit, les éléments sont encore plus réduits.

30 30 Exemple : <!DOCTYPE html> <html> <head> <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> <style> div { border: 1px solid black; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4">4 colonnes</div> <div class="col-md-8">8 colonnes</div> </div> </div> </body> </html>

31 31 Pour avoir plusieurs rangées, on utilise plusieurs fois la classe.row : <div class="container"> <div class="row"> <div class="col-lg-1">1 colonne</div> <div class="col-lg-2">2 colonnes</div> <div class="col-lg-3">3 colonnes</div> <div class="col-lg-6">6 colonnes</div> </div> <div class="row"> <div class="col-lg-12">12 colonnes</div> </div> <div class="row"> <div class="col-lg-4">4 colonnes</div> <div class="col-lg-8">8 colonnes</div> </div> </div>

32 32 Offset On peut sauter des colonnes pour ne pas les afficher, avec des classes d'offset : col-xs-offset-1 col-xs-offset-2... col-xs-offset-11 (et aussi -sm-, -md-, -lg-)

33 33 <div class="container"> <div class="row"> <div class="col-lg-3">3 colonnes</div> <div class="col-lg-6">6 colonnes</div> <div class="col-lg-3">3 colonnes</div> </div> <div class="row"> <div class="col-lg-3">3 colonnes</div> <div class="col-lg-offset-6 col-lg-3">3 colonnes</div> </div> </div>

34 34 Mise en page avec Bootstrap au moyen d'une grille <!DOCTYPE html> <html> <head> <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> </head> <body> <div class="container"> <section class="col-sm-10"> <header class="row"> <div class="col-sm-12"> Entete </div> </header> <div class="row"> <nav class="col-sm-2"> Menu </nav> Section </section> </div> <footer class="row"> Pied de page </footer> </div> </body> </html>

35 35 Sur un écran plus petit, les colonnes s'empilent :

36 Style Bootstrap modifie le style de la plupart des éléments HTML : titres, paragraphes, tableaux, etc.

37 37 Titres <h1> à <h6> <h1>h1 Bootstrap heading (36px)</h1> <h2>h2 Bootstrap heading (30px)</h2> <h3>h3 Bootstrap heading (24px)</h3> <h4>h4 Bootstrap heading (18px)</h4> <h5>h5 Bootstrap heading (14px)</h5> <h6>h6 Bootstrap heading (12px)</h6>

38 38 <small> La balise <small> utilisée dans un titre permet de définir un titre secondaire. <h1>h1 heading <small>secondary text</small></h1> <h2>h2 heading <small>secondary text</small></h2> <h3>h3 heading <small>secondary text</small></h3> <h4>h4 heading <small>secondary text</small></h4> <h5>h5 heading <small>secondary text</small></h5> <h6>h6 heading <small>secondary text</small></h6>

39 39 <kbd> <p>utilisez <kbd>ctrl + c</kbd> pour copier l'élément sélectionné.</p>

40 40 Classes typographiques Bootstrap offre de nombreuses classes permettant de modifier l'apparence de paragraphes de texte :.small Texte plus petit, à 85% de la taille du parent. Exemples : <p class="small">ce texte est écrit en petit.</p> <p class="text-right small">ce texte aligné à droite est écrit en petit.</p>

41 41.text-left Texte aligné à gauche..text-center Texte centré..text-right Texte aligné à droite..text-justify Texte justifié. Exemple : <p class="text-center">ce texte est centré.</p>

42 42.text-lowercase Le texte est affiché tout en minuscules..text-uppercase Le texte est affiché tout en majuscules..text-capitalize La première lettre de chaque mot est affichée en majuscule. Il y a bien d'autres classes encore. Vous en trouverez une liste à cette adresse :

43 Tableaux Bootstrap offre de nombreuses classes permettant de modifier l'apparence de tables. Vous en trouverez une liste ici : Voici quelques exemples :

44 44 1) La classe.table <table class="table"> <thead> <tr> <th>firstname</th> <th>lastname</th> <th> </th> </tr> </thead> <tbody> <tr> <td>john</td> <td>doe</td> </tr> <tr> <td>mary</td> <td>moe</td> </tr> <tr> <td>july</td> <td>dooley</td> </tr> </tbody> </table>

45 45 2) La classe.table-striped <table class="table table-striped"> <thead> <tr> <th>firstname</th> <th>lastname</th> <th> </th> </tr> </thead> <tbody> <tr> <td>john</td> <td>doe</td> </tr> <tr> <td>mary</td> <td>moe</td> </tr> <tr> <td>july</td> <td>dooley</td> </tr> </tbody> </table>

46 46 3) La classe.table-bordered <table class="table table-bordered"> <thead> <tr> <th>firstname</th> <th>lastname</th> <th> </th> </tr> </thead> <tbody> <tr> <td>john</td> <td>doe</td> </tr> <tr> <td>mary</td> <td>moe</td> </tr> <tr> <td>july</td> <td>dooley</td> </tr> </tbody> </table>

47 47 4) La classe.table-responsive rend la table responsive et permet de la faire scroller sur petits écrans <div class="table-responsive"> <table class="table"> <thead> <tr> <th>firstname</th> <th>lastname</th> <th> </th> </tr> </thead> <tbody> <tr> <td>john</td> <td>doe</td> </tr> <tr> <td>mary</td> <td>moe</td> </tr> </tbody> </table> </div>

48 Images

49 Formes d'images Bootstrap permet d'arrondir la forme des images avec les classes.imgrounded,.img-circle et.img-thumbnail : <img src="cinqueterre.jpg" class="img-rounded" alt="cinque Terre"> <img src="cinqueterre.jpg" class="img-circle" alt="cinque Terre"> <img src="cinqueterre.jpg" class="img-thumbnail" alt="cinque Terre">

50 Images responsives On peut faire en sorte qu'une image s'adapte à la largeur du navigateur en ajoutant la classe.img-responsive à la balise <img> : <img class="img-responsive" src="paysage.jpg" alt="un paysage"> En pratique, cette classe applique les proprietés display: block; et max-width: 100%; et height: auto; à l'image.

51 Jumbotron Un «jumbotron» est une grande boîte destinée à attirer l'attention. La taille des éléments qu'elle contient est augmentée. Pour le créer, on applique la classe.jumbotron à un élément <div> : <div class="jumbotron"> <h1>bootstrap Tutorial</h1> <p>bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p> </div> <p>text outside the jumbotron.</p>

52 Page header C'est une division de section, le titre apparaît souligné d'un trait : <div class="page-header"> <h1>example Page Header</h1> </div> <p>this is some text.</p> <p>this is another text.</p>

53 Menu On peut obtenir un menu horizontal ou vertical avec la classe nav appliquée à une liste non ordonnée <ul></ul>, selon deux manières : les tabs et les pills.

54 Tabs On peut obtenir un menu horizontal sous la forme d'onglets avec la classe nav nav-tabs. La pae courante peut être marqué avec <li class="active"> <ul class="nav nav-tabs"> <li class="active"><a href="#">home</a></li> <li><a href="#">menu 1</a></li> <li><a href="#">menu 2</a></li> <li><a href="#">menu 3</a></li> </ul>

55 Pills On peut obtenir un menu horizontal sous la forme de pastilles avec la classe nav nav-pills. La page courante peut être marquée avec <li class="active"> <ul class="nav nav-pills"> <li class="active"><a href="#">home</a></li> <li><a href="#">menu 1</a></li> <li><a href="#">menu 2</a></li> <li><a href="#">menu 3</a></li> </ul>

56 56 On peut obtenir un menu vertical sous la forme de pastilles avec la classe nav nav-pills nav-stacked. La page courante peut être marquée avec <li class="active"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">home</a></li> <li><a href="#">menu 1</a></li> <li><a href="#">menu 2</a></li> <li><a href="#">menu 3</a></li> </ul>

57 Boutons Bootstrap propose 7 types de boutons grace aux classes.btn-default,.btn-primary,.btn-success,.btn-info,.btn-warning,.btn-danger,.btnlink : <button type="button" class="btn btn-default">default</button> <button type="button" class="btn btn-primary">primary</button> <button type="button" class="btn btn-success">success</button> <button type="button" class="btn btn-info">info</button> <button type="button" class="btn btn-warning">warning</button> <button type="button" class="btn btn-danger">danger</button> <button type="button" class="btn btn-link">link</button>

58 58 Ces 7 classes peuvent être appliquées sur des boutons, des éléments de types <a>, <button>, ou <input> : <a href="#" class="btn btn-info" role="button">link Button</a> <button type="button" class="btn btn-info">button</button> <input type="button" class="btn btn-info" value="input Button"> <input type="submit" class="btn btn-info" value="submit Button">

59 59 Taille de bouton Bootstrap propose 4 tailles de boutons : <button type="button" class="btn btn-primary btn-lg">large</button> <button type="button" class="btn btn-primary btn-md">medium</button> <button type="button" class="btn btn-primary btn-sm">small</button> <button type="button" class="btn btn-primary btn-xs">xsmall</button>

60 60 Groupe de boutons Des boutons peuvent être regroupés sur une seule ligne si on les encadre d'un <div> auquel on donne la classe.btn-group : <div class="btn-group"> <button type="button" class="btn btn-primary">apple</button> <button type="button" class="btn btn-primary">samsung</button> <button type="button" class="btn btn-primary">sony</button> </div>

61 61 Groupe de boutons verticaux On peut aussi définir des groupes ou les boutons sont alignés à la verticale : <div class="btn-group-vertical"> <button type="button" class="btn btn-primary">apple</button> <button type="button" class="btn btn-primary">samsung</button> <button type="button" class="btn btn-primary">sony</button> </div>

62 62 Groupe de boutons justifiés Le groupe de boutons peut être étendu sur toute la largeur de l'écran : <div class="btn-group btn-group-justified"> <a href="#" class="btn btn-primary">apple</a> <a href="#" class="btn btn-primary">samsung</a> <a href="#" class="btn btn-primary">sony</a> </div>

63 63 Bouton avec menu déroulant <div class="btn-group"> <button type="button" class="btn btn-primary">apple</button> <button type="button" class="btn btn-primary">samsung</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Sony <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">tablet</a></li> <li><a href="#">smartphone</a></li> </ul> </div> </div>

64 Glyphicon Bootstrap propose 260 glyphicons pouvant être utilisés dans du texte, des boutons, des barres d'icônes, des formulaires, etc. La syntaxe est la suivante : <span class="glyphicon glyphicon-name"></span> Où name correspond au nom d'un glyphicon, par exemple : envelope, euro, pencil, music, heart, star, user, film, ok, etc. Vous en trouverez une liste ici : Exemple : <p>ok icon: <span class="glyphicon glyphicon-ok"></span></p>

65 65 <p>envelope icon: <span class="glyphicon glyphicon-envelope"></span></p> <p>envelope icon as a link: <a href="#"><span class="glyphicon glyphicon-envelope"></span></a> </p>

66 66 <p>search icon: <span class="glyphicon glyphicon-search"></span></p> <p>search icon on a button: <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-search"></span> Search </button> </p> <p>search icon on a styled button: <button type="button" class="btn btn-info"> <span class="glyphicon glyphicon-search"></span> Search </button> </p>

67 67 <p>print icon: <span class="glyphicon glyphicon-print"></span></p> <p>print icon on a styled link button: <a href="#" class="btn btn-success btn-lg"> <span class="glyphicon glyphicon-print"></span> Print </a> </p>

68 Badges <a href="#">news <span class="badge">5</span></a><br> <a href="#">comments <span class="badge">10</span></a><br> <a href="#">updates <span class="badge">2</span></a> <button type="button" class="btn btn-primary">primary <span class="badge">7</span></button>

69 Labels <h1>example <span class="label label-default">new</span></h1> <h2>example <span class="label label-default">new</span></h2> <h3>example <span class="label label-default">new</span></h3> <h4>example <span class="label label-default">new</span></h4> <h5>example <span class="label label-default">new</span></h5> <h6>example <span class="label label-default">new</span></h6>

70 70 Pour aller plus loin Le site officiel de Bootstrap Le cours du W3C :