Prototyper un site web avec Awestruct et Boostrap

Prototyper un site web
avec Awestruct
et Boostrap
On va parler de...
●
Prototype
●
Awestruct
●
Bootstrap
●
Bonus (GitHub, JSF)
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
Prototyper : comment ?
●
Léger
●
Portable
●
Agile
●
Rapide
●
Dynamique
●
Hot-deploy
●
Responsive
●
Réel
●
Bon marché
Prototyper : comment ?
●
Application Java EE
●
HTML pur
●
PHP
●
Générateur en ligne
●
Awestruct
Prototyper : comment ?
●
Application Java EE : un peu lourd
●
HTML pur
●
PHP
●
Générateur en ligne
●
Awestruct
Prototyper : comment ?
●
Application Java EE
●
HTML pur : copier, coller, copier, coller, ...
●
PHP
●
Générateur en ligne
●
Awestruct
Prototyper : comment ?
●
Application Java EE
●
HTML pur
●
PHP : sérieusement ?
●
Générateur en ligne
●
Awestruct
No
t
n
e
m
com
Prototyper : comment ?
●
Application Java EE
●
HTML pur
●
PHP
●
Générateur en ligne :
trop de limitations
●
Awestruct
Prototyper : comment ?
●
Application Java EE
●
HTML pur
●
PHP
●
Générateur en ligne
●
Awestruct : essayons donc ça !
Awestruct
●
Ruby (désolé...)
●
HTML
●
HAML
●
Textile
●
SASS
●
Layout
●
Extensions
Awestruct : installer
$ sudo apt-get install rubygems
$ sudo gem install awestruct
!
t
i
s
'
t
a
Th
Awestruct : démarrer
$ mkdir prototype
$ cd prototype
$ awestruct --init
$ awestruct -d
t
a
h
T
!
n
i
a
g
a
t
i
's
http://localhost:4242/
Awestruct : qu'avons-nous là ?
Configuration
Extensions
Layouts
Génération
Code
Awestruct : fonctionnement
●
Templating
●
Import
●
●
●
●
Tout est “page”
●
Layout
Variables
●
Attributs
Profils
●
Tags
●
N'importe quoi
Extensions
Awestruct : fonctionnement
Scan du projet
Génération des pages
Extensions
Génération du site
Awestruct : extensions & helpers
●
Indexifier
●
IntenseDebate
●
Posts
●
Disqus
●
Paginator
●
Flattr
●
Atomizer
●
Textil
●
Tagger
●
Partial
●
TagCloud
●
Google Analytics
●
DataDir
No limit !
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...
Bootstrap
●
Deux fichiers CSS
●
Design de base
●
Design responsive
●
Un fichier JavaScript
●
Deux images
●
Icônes noirs
●
Icônes blancs
!
t
u
o
t
t
s
e
Et c'
Bootstrap : philosophie
●
Responsive
●
Modulaire
●
Simple
●
Documenté
●
Production ready
●
Les classes CSS sont reines
●
Les attributs data-* sont rois
Bootstrap : grille responsive
●
●
Un conteneur fixe ou fluide
●
Fixe : largeur connue
●
Fluide : largeur 100%
Une grille de 12 colonnes
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
5.80111%
2.76243%
Défaut
980px
1199px
60px
20px
6.38298%
2.12766%
Ecran large
>= 1200px
70px
30px
5.98291%
2.5641%
Bootstrap : grille responsive
Bootstrap : classes CSS
●
a
●
a.btn
●
a.btn.btn-primary
●
a.btn.btn-primary.btn-large
●
a.btn.btn-primary.btn-large.disabled
Bootstrap : classes CSS
●
●
table.table
table.table.tablebordered
●
●
table.table.table-striped
table.table.tablestriped.table-bordered
Bootstrap : design
Bootstrap : design
Bootstrap : design
Bootstrap : design
Bootstrap : icônes
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 !
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>
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>
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
Bootstrap : aller plus loin
●
●
Réalisez votre propre thème visuel
●
Générateur en ligne
●
A la main
Utilisez SASS ou LESS
Bonus
●
JSF (Java Server Faces)
●
●
●
●
Support des attributs data-* : ticket 1090 de la spec
RichFaces Sandbox : premiers composants JSF
basés sur Bootstrap
render=”@all” is evil !
GitHub
●
username.github.com
●
gh-pages branch
●
Script .sh to deploy and push
Ressources
●
Awestruct
●
Bootstrap
●
Site officiel
●
Site officiel
●
Site Arquillian
●
Gallerie de sites
●
Référence HAML
●
Gallerie de design
Questions
?