ihmpour$les$applicaons$web$ - l’atelier...

IHM pour les applica/ons Web

Chris/an Brel

Romaric Pighe:

Philippe Renevier-‐Gonin

Dans les épisodes précédents…

•  Cours introduc/on applica/ons Web + HTML/CSS + Début de concep/on + TD HTML/CSS

•  Cours introduc/on PHP •  Cours présenta/on Noyau Fonc/onnel fourni et example d’intégra/on à un « micro-‐framework » MVC

•  Cours AJAX

2 / 29

TwiWer Bootstrap

3 / 29

A quoi ça sert ?

•  A vous faciliter la vie avec le CSS

•  A faciliter la mise en place de l’architecture de vos pages web

•  A rendre vos sites web (ou prototypes) plus aWrac/fs

4 / 29

Ouvrons la boîte ! •  Framework CSS

•  Code CSS permeWant une bonne organisa/on et structure de sa page

•  Une méthode et des exemples

•  Des plugins jQuery pour faciliter l’ajout d’interac/ons

•  Un moyen de personnaliser

5 / 29

Un parmi tant d’autres ! •  Elas/css •  Knacss •  Blueprint •  960 Grid System •  YUI •  52Framework •  Inuitcss •  Elements CSS framework •  BlueTrip •  ez-‐css •  ...

(source : hWp://fr.openclassrooms.com/informa/que/cours/prenez-‐en-‐main-‐bootstrap/un-‐framework-‐1)

6 / 29

« Installa/on »

•  hWp://getbootstrap.com/ge:ng-‐started/ •  Css – bootstrap-‐theme.css (bootstrap-‐theme.min.css) – bootstrap.css (bootstrap.min.css)

•  Js – bootstrap.js (bootstrap.min.js)

•  Fonts – glyphicons-‐halflings-‐regular.svg

7 / 29

Inser/on dans sa page •  Responsive

<meta name="viewport" content="width=device-‐width, ini/al-‐scale=1"> •  CSS

–  Base de Bootstrap <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> –  Thème associé <link href="bootstrap/css/bootstrap-‐theme.min.css" rel="stylesheet”>

•  JS –  jQuery <script src=“js/jquery.min.js"></script> –  Plugins Bootstrap <script src="bootstrap/js/bootstrap.min.js"></script>

8 / 29

La base : un système de grille

•  Grille basé sur 12 colonnes •  Tous les éléments peuvent être placés dans ceWe grille

•  <div class="container"></div> – Avec largeur fixée

•  <div class="container-‐fluid"></div> – Prend toute la largeur de la page

9 / 29

« Lignes » et « Colonnes » •  Groupe de colonnes : .row

–  <div class="row"></div> –  Doit être placé dans un .container ou .container-‐fluid puis peut être placé dans .col-‐*

–  Définit 12 « emplacements »

•  Colonnes : .col-‐xs-‐*, .col-‐sm-‐*, .col-‐md-‐*, .col-‐lg-‐* –  <div class="col-‐md-‐*"></div> –  Doit être placé dans un groupe .row –  .col-‐md-‐4 => prend la place de 4 emplacements –  .col-‐md-‐8 => prend 8 emplacements –  .col-‐md-‐1 => prend 1 emplacement –  …

Source : [Site de Bootstrap] hWp://getbootstrap.com/css/#grid

10 / 29

Exemple


11 / 29

Décalage de colonnes : offset •  Décalage d’une colonne avec .col-‐md-‐offset-‐*

–  .col-‐md-‐offset-‐3 => décalage de 3 emplacements sur la droite –  .col-‐md-‐offset-‐1 => décalage de 1 emplacement sur la droite –  …

•  AWen/on de ne pas dépasser 12 emplacements au total !


12 / 29

Menu de naviga/on <div class="navbar navbar-‐default navbar-‐fixed-‐top" role="naviga/on">

<div class="container"> <div class="navbar-‐header"> <buWon type="buWon" class="navbar-‐toggle" data-‐

toggle="collapse" data-‐target=".navbar-‐collapse"> <!-‐-‐ … -‐-‐> </buWon> <a class="navbar-‐brand" href="#">Cours POO-‐IHM :

Bibliothèque de films</a> </div><!-‐-‐/.navbar-‐header-‐-‐> <div class="navbar-‐collapse collapse"> <ul class="nav navbar-‐nav"> <li><a href="./index.php">Accueil</a></li> <li><a href="./index.php?

controller=Films&ac/on=listAll">Films</a></li> </ul> </div><!-‐-‐/.nav-‐collapse -‐-‐> </div><!-‐-‐/.container-‐-‐>

</div> Démo : [mvc-‐poo-‐ihm-‐2014-‐ajax-‐jquery-‐bootstrap] [hWp]

/index.php 13 / 29

Exemple : Accueil <div class="navbar navbar-‐default navbar-‐fixed-‐top" role="naviga/on"> <!-‐-‐ Menu de naviga/on -‐-‐> </div>

<div class="container">

<div class="jumbotron"> <h1>Bienvenue dans ma bibliothèque de films!</h1> <p>Les fonc/onnalités minimales aWendues : lister, afficher, créer,

editer, supprimer pour les films et les stars (acteur/réalisateur).</p> </div>

</div>

Démo : [mvc-‐poo-‐ihm-‐2014-‐ajax-‐jquery-‐bootstrap] [hWp] /index.php

14 / 29

Formulaires •  Ajout de style mais aucune classe css spécifique sur un <form> •  .form-‐group (<div>) : pour regrouper un label (<label>) et son

control (<input>) •  .form-‐control (<input>): sur chaque control (<input>) •  2 layouts op/onnels proposés

–  Inline form : .form-‐inline (<form>)

–  Horizontal form : .form-‐horizontal (<form>), .form-‐group (<div>) => .control-‐label (<label>), .form-‐control (<input>)

Démo : [Site de Bootstrap] hWp://getbootstrap.com/css/#forms

15 / 29

Formulaires : Inputs (1/2) •  Contrôle de la taille

–  Hauteur du control : .input-‐lg, .input-‐sm, + taille par defaut (sans classe) –  Largeur basée sur la « grille » : .col-‐xs-‐*, .col-‐sm-‐*, .col-‐md-‐*, .col-‐lg-‐*

•  Valida/on : sur div.form-‐group .has-‐success .has-‐warning .har-‐error

Source : [Site de Bootstrap] hWp://getbootstrap.com/css/#forms-‐control-‐valida/on

Source : [Site de Bootstrap] hWp://getbootstrap.com/css/#forms-‐control-‐sizes

16 / 29

Formulaires : Inputs (2/2) •  Ajoute du texte collé au <input>, au début ou à la fin

–  Se combine avec les différents layouts vu précédemment –  U/liser .input-‐group (<div>) : /!\ Ne remplace pas un .form-‐group => il

faut insérer le .input-‐group dans le .form-‐group –  Puis u/liser .input-‐group-‐addon (<span>)

•  Avant le control (input.form-‐control) : pour ajouter du texte avant •  Après le control (input.form-‐control) : pour ajouter du texte après

<div class="input-‐group"> <span class="input-‐group-‐addon">@</span> <input type="text" class="form-‐control" placeholder="Username">

</div>

•  Possibilité d’ajouter « d’autres éléments » : boutons, menu déroulant…

•  A la place de .input-‐group-‐addon, il faut u/liser .input-‐group-‐btn

Source : [Site de Bootstrap] hWp://getbootstrap.com/components/#input-‐groups

17 / 29

Boutons •  Classe .btn •  S’applique à n’importe quel élément HTML

–  Souvent : <a>, <buWon>, <input> (type=buWon ou type=submit)

•  En supplément de .btn : .btn-‐default, .btn-‐primary, .btn-‐success, .btn-‐info, .btn-‐warning, .btn-‐danger, .btn-‐link (apparence du lien, mais comportement du bouton)

•  Différentes tailles disponibles : –  .btn-‐xs, .btn-‐sm, .btn-‐lg –  Une taille par défaut entre « sm » et « lg »

Source : [Site de Bootstrap] hWp://getbootstrap.com/css/#buWons

18 / 29

Tableaux •  .table : pour appliquer le style bootstrap •  .table-‐bordered : pour obtenir des bords •  .table-‐striped : pour « colorer » 1 ligne sur 2 •  .table-‐hover : pour changer le fond d’une ligne au survol souris •  Sur chaque ligne : <tr></tr> ou chaque cellule <td></td>

–  .acbve : met en gris –  .success : met en vert –  .info : met en bleu –  .warning : met en orange –  .danger : met en rouge

•  Englober un tableau <table class="table"></table> dans un élément avec la classe .table-‐responsive –  Permet d’ajouter une scroll-‐bar horizontale sur les « pe/ts » écrans

Source : [Site de Bootstrap] hWp://getbootstrap.com/css/#tables

19 / 29

Images

•  Images qui s’adaptent à la taille de l’écran –  .img-‐responsive (<img>)

•  3 types d’affichages proposés –  .img-‐rounded (<img>) –  .img-‐circle (<img>) –  .img-‐thumbnail (<img>)

Source : [Site de Bootstrap] hWp://getbootstrap.com/css/#images

20 / 29

Icones

•  Glyphicons : 200 ! •  .glyphicon (<span>) •  + .glyphicon-‐* (* : search, euro, cloud, ok, map-‐marker …)

<buWon class="btn btn-‐info btn-‐lg"> <span class="glyphicon glyphicon-‐search"></span> Ac/ver le filtre par style !

</buWon>

Source : [Site de Bootstrap] hWp://getbootstrap.com/components/#glyphicons

21 / 29

Progress Bars et Badges •  Barre de progression

–  Elément englobant -‐ la barre elle-‐même: .progress (<div>) –  Pourcentage d’avancement -‐ à l’intérieur d’un .progress : .progress-‐bar (<div>) +

style="width: **% » <div class="progress">

<div class="progress-‐bar" style="width: 60%;">60%</div> </div>

–  Plusieurs « couleurs » -‐ s’applique à div.progress-‐bar: .progress-‐bar-‐success, .progress-‐bar-‐info, .progress-‐bar-‐warning, .progress-‐bar-‐danger

–  Avec rayures -‐ s’applique à div.progress : .progress-‐striped

–  Anima/on des rayures : ajout de .acbve –  Empilement des barres : plusieurs .progress-‐bar dans un même .progress

•  Badge : MeWre en avant un nombre (ex: emails non lus, news en aWente…)

–  .badge (<span>) -‐ ex: <a href="#">Inbox <span class="badge">42</span></a>

Source : [Site de Bootstrap] hWp://getbootstrap.com/components/#progress

Source : [Site de Bootstrap] hWp://getbootstrap.com/components/#badges 22 / 29

Alertes •  Ajouter .alert à un <div> •  Ajouter une des classes

« de contexte » : .alert-‐success, .alert-‐info, .alert-‐warning, .alert-‐danger

•  Fermeture de l’alerte

–  Ajout de la classe .alert-‐dismissable –  Plugin javascript : data-‐dismiss="alert" sur un élément <buWon> avec la

classe .close <div class="alert alert-‐warning alert-‐dismissable">

<buWon type="buWon” class="close" data-‐dismiss="alert">&/mes;</buWon> Message : ATTENTION !

</div>

Source : [Site de Bootstrap] hWp://getbootstrap.com/components/#alerts

Source : [Site de Bootstrap] hWp://getbootstrap.com/javascript/#alerts

23 / 29

Modals : Plugin javascript <!-‐-‐ BuWon trigger modal -‐-‐> <buWon class="btn btn-‐primary" data-‐toggle="modal" data-‐target="#myModal">

Launch demo modal </buWon> <!-‐-‐ Modal -‐-‐> <div class="modal fade" id="myModal" tabindex="-‐1" role="dialog"> <div class="modal-‐dialog"> <div class="modal-‐content"> <div class="modal-‐header"> <buWon type="buWon" class="close" data-‐dismiss="modal">&/mes;</buWon> <h4 class="modal-‐btle" id="myModalLabel">Modal /tle</h4> </div> <div class="modal-‐body"> One fine body... </div> <div class="modal-‐footer"> <buWon type="buWon" class="btn btn-‐default" data-‐dismiss="modal">Close</buWon> <buWon type="buWon" class="btn btn-‐primary">Save changes</buWon> </div> </div> </div> </div>

Source : [Site de Bootstrap] hWp://getbootstrap.com/javascript/#modals 24 / 29

Tool/ps •  Plugin javascript : –  au survol afficher de l’informa/on

<buWon type="buWon" class="btn btn-‐default" data-‐toggle="toolbp" data-‐placement="leh" btle="Toolbp on leh">Toolbp on leh</buWon>

•  4 direc/ons -‐ data-‐placement : –  le�, top, boWom, right

•  Plugin à « ac/ver » au chargement de la page : $(document).ready(func/on () { $("[data-‐toggle='tool/p']").tool/p(); });

Source : [Site de Bootstrap] hWp://getbootstrap.com/javascript/#tool/ps

25 / 29

Popover •  Plugin javascript :

–  Au click, ajout d’une « pop-‐up » dans la direc/on indiquée

<buWon type="buWon" class="btn btn-‐info” data-‐container="body" data-‐toggle="popover" data-‐placement="right" data-‐content="Vivamus sagiks lacus vel augue laoreet rutrum faucibus." btle="Popover on right"> Popover on right </buWon> •  4 direc/ons -‐ data-‐placement :

–  le�, top, boWom, right

•  Plugin à « ac/ver » au chargement de la page : $(document).ready(func/on () { $("[data-‐toggle='popover']").popover(); });

Source : [Site de Bootstrap] hWp://getbootstrap.com/javascript/#popovers

26 / 29

Collapse et Carousel

Source : [Site de Bootstrap] hWp://getbootstrap.com/javascript/#carousel

Source : [Site de Bootstrap] hWp://getbootstrap.com/javascript/#collapse

27 / 29

EXEMPLES COMPLETS SUR LE SITE DE BOOTSTRAP HTTP://GETBOOTSTRAP.COM/

/!\ ATTENTION À LA VERSION UTILISÉE /!\

VERSION 3.1.1

Démo : [mvc-‐poo-‐ihm-‐2014-‐ajax-‐jquery-‐bootstrap] [hWp] /index.php?controller=Films&ac/on=listAll

28 / 29

QUESTIONS ?

29 / 29

ihmpour$les$applicaons$web$ - l’atelier...

Documents