Prototyper un site web avec Awestruct et Boostrap

Transcription

1 Prototyper un site web avec Awestruct et Boostrap

2 On va parler de... Prototype Awestruct Bootstrap Bonus (GitHub, JSF)

3 Prototyper : pourquoi? Mettre tout le monde d'accord Avoir un support concret Aide pour rédiger les specs Montrer autre chose que des tonnes de papier au client Faire autre chose que rédiger des tonnes de papier pour le client

4 Prototyper : comment? Léger Portable Agile Rapide Dynamique Hot-deploy Responsive Réel Bon marché

5 Prototyper : comment? Application Java EE HTML pur PHP Générateur en ligne Awestruct

6 Prototyper : comment? Application Java EE : un peu lourd HTML pur PHP Générateur en ligne Awestruct

7 Prototyper : comment? Application Java EE HTML pur : copier, coller, copier, coller,... PHP Générateur en ligne Awestruct

8 Prototyper : comment? Application Java EE HTML pur PHP : sérieusement? Générateur en ligne Awestruct No comment

9 Prototyper : comment? Application Java EE HTML pur PHP Générateur en ligne : trop de limitations Awestruct

10 Prototyper : comment? Application Java EE HTML pur PHP Générateur en ligne Awestruct : essayons donc ça!

11 Awestruct Ruby (désolé...) HTML HAML Textile SASS Layout Extensions

12 Awestruct : installer $ sudo apt-get install rubygems $ sudo gem install awestruct That's it!

13 Awestruct : démarrer $ mkdir prototype $ cd prototype $ awestruct --init $ awestruct -d That's it again!

14 Awestruct : qu'avons-nous là? Configuration Extensions Layouts Génération Code

15 Awestruct : fonctionnement Templating Tout est page Import Layout Variables Profils Extensions Attributs Tags N'importe quoi

16 Awestruct : fonctionnement Scan du projet Génération des pages Extensions Génération du site

17 Awestruct : extensions & helpers Indexifier Posts Paginator Atomizer Tagger TagCloud DataDir IntenseDebate Disqus Flattr Textil Partial Google Analytics No limit!

18 Bilan intermédiaire Nous avons : Nous n'avons pas : Site léger Design Portable Responsive Dynamique Réel Hot-deploy En résumé : ça marche, mais c'est moche...

19 Bootstrap Deux fichiers CSS Design de base Design responsive Un fichier JavaScript Deux images Icônes noirs Icônes blancs Et c'est tout!

20 Bootstrap : philosophie Responsive Modulaire Simple Documenté Production ready Les classes CSS sont reines Les attributs data-* sont rois

21 Bootstrap : grille responsive Un conteneur fixe ou fluide Fixe : largeur connue Fluide : largeur 100% Une grille de 12 colonnes

22 Bootstrap : grille responsive Environnement Largeur Colonne fixe Marge fixe Colonne fluide Marge fluide Smartphone <= 480px Fluide Fluide Fluide Fluide De smartphone à tablette 481px 767px Fluide Fluide Fluide Fluide Tablette en mode paysage 768px 989px 42px 20px % % Défaut 980px 1199px 60px 20px % % Ecran large >= 1200px 70px 30px % %

23 Bootstrap : grille responsive

24 Bootstrap : classes CSS a a.btn a.btn.btn-primary a.btn.btn-primary.btn-large a.btn.btn-primary.btn-large.disabled

25 Bootstrap : classes CSS table.table table.table.table-striped table.table.tablestriped.table-bordered table.table.tablebordered

26 Bootstrap : design

27 Bootstrap : design

28 Bootstrap : design

29 Bootstrap : design

30 Bootstrap : icônes

31 Bootstrap : attributs data-* Envie d'effets modernes? Pas le temps de faire du JavaScript? Pas envie de faire du JavaScript? La flemme d'apprendre le JavaScript? Vous ne savez pas ce qu'est le JavaScript? Bootstrap à la rescousse!

32 Bootstrap : modal panel <a class= btn data-toggle= modal href= #modalpanel >Afficher</a> <div id= modalpanel class= modal > <div class= modal-header > <button class="close" data-dismiss="modal"> </button> <h3>modal header</h3> </div> <div class="modal-body"> <p>one fine body...</p> </div> </div>

33 Bootstrap : dropdown <ul class= nav > <li id= dropdown class= dropdown > <a class="dropdown-toggle" data-toggle="dropdown" href="#dropdown">dropdown<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li class="divider"></li> <li><a href="#">separated link</a></li> </ul> </li> </ul>

34 Boostrap : résumé Classes CSS JavaScript et data-* Grille responsive Modal panel Boutons Dropdown Tables Onglet Listes Tooltip Formulaires Boutons (split, radio,...) Labels Spy bar Badges Collapse Miniatures Carousel Barres de chargement Typehead

35 Bootstrap : aller plus loin Réalisez votre propre thème visuel Générateur en ligne A la main Utilisez SASS ou LESS

36 Bonus JSF (Java Server Faces) Support des attributs data-* : ticket 1090 de la spec RichFaces Sandbox : premiers composants JSF basés sur Bootstrap is evil! GitHub username.github.com gh-pages branch Script.sh to deploy and push

37 Ressources Awestruct Bootstrap Site officiel Site officiel Site Arquillian Gallerie de sites Référence HAML Gallerie de design

38 Questions?