1.
Retour au banc d’école
Dessin de pages web 101

2.
Ton site sera jamais parfait Tu peut essayer de tout
faire a la perfection du
mieux que tu peut.
Conceptualizer des
hiérarchies, definir tes
“mock-ups”, ecrire des
gros documents word pis
des spreadsheet...
“L'une des leçons que l'on peut Mais peu importe l’effort
que tu va mettre ya une
tirer du siècle dernier est que chose qui est certaine
c’est que tu va te
toutes les utopies finissent par tromper!
établir leur propre goulag.” T’aura pas toujours la
bonne solution au bon
moment pis plus le temps
va avancer, plus le produit
va evoluer plus
Vladimir Boukovsky préconceptions originales
vont disparaitre.
C’est sure que tu va pas te
tromper sur toute la ligne
mais si tu veut que ton
produit existe, que sa soit
un site transactionel, un
blog, ou une plateforme
distribuée tu veut que ton
produit evolue pis ....

3.
Tu peut tojours pas
ignorer la seule vérité
universelle.
if(évolution == changement){
return new MurphysLaw();
}

4.
In the begining... there
were many mockups...

5.
Jamais dire “jamais”
“Il est aussi noble de tendre à
l'équilibre qu'à la perfection ;
car c'est une perfection que de
garder l'équilibre.”
Jean Grenier

6.
Outils de base
Capacité naturelle à distinguer des
motifs (gratuit, on vient avec)
Logiciels libres (wow, on est chanceux)
En realité, chaque version de notre site qui à été mise en ligne, beaucoup de parties
structurelles etait déja désuètes par rapport aux changements requis pour la prochaine
version.
Mais c’est bon, ca nous a permis de mieux identifier les choses qui changeaient des
choses qui changeaient moins ou presque pas.
Note: par changement je parle bien du contenant disctinctivement du contenu et non
du fait que les données sont dynamiques.

7.
primitifs

8.
primitifs

9.
primitifs

10.
structure

11.
structure

12.
structure

13.
Layout

14.
Layout

15.
Layout

16.
Fini de s’les casser!
Apres de longues
réflections et plusieurs
petits “hello world”, j’ai
trouvé comment pus me
casser les couilles avec
C’est la qu’arrivent les les chose plates et de
m’amauser un peu pour
faire changement...
CSS Fighting Styles
Javascript-Fu
X(HT)ML Shaolin

17.
Bénéfices des projets open
Explication des librairies choisies et des autres
alternatives (tripoli extjs etc etc...) CSS (structure) source versus tout ecrire
toi meme = arme de
developeurs au ser vice
FRAMEWORKS Points d’intérêt URL
Layouts Liquides, Fixes, Elastiques
Elastic CSS Positionement Absolu http://elasticss.com/features/
Ultra Flexible
Outils de generation de code permettant
Blueprint CSS des sélecteurs sémantiques. http://www.blueprintcss.org/
Simple et logique.
Typographie et elements de contenu
YAML (.de) Documentation bien remplie
http://www.yaml.de/en/
Respect des standards w3c
Tripoli Systeme de plugins
http://devkick.com/lab/tripoli/
Communauté Massive avec support, videos,
tutoriels etc...
YUI http://developer.yahoo.com/yui/

18.
Javascript (composantes etc...)
Librairies UI Points d’intérêt URL
Simple, jeune et puriste, respectant les
specs wai-aria
jQueryUI Système de “theming” et haute flexibilité
http://jqueryui.com/
des modules
Accessibilité, I18n, support pour lecteurs
Dojo toolkit (dijit/ d’écran
http://dojotoolkit.org/
dojox) Diagrammes, SVG/Canvas/VML, offline
browsing
side-note:
Contient beaucoup, beaucoup , beaucoup
de resources UI. Notament, beaucoup de There are also vairous
different frameworks to
Ext.js widgets d’interface prédéfinis http://extjs.com/
help you out with theming.
Ext.js est une libraire de très gros
For example: Thematic
calibre, utilisée par sony, IBM, CNN etc... Whitboard and Carrington
all help you design
wordpress themes by
Niveau débutant, beaucoup d’outils giving you a good base to
QooXDoo d’accompagnement http:/from.
start /qooxdoo.org/
Look “Natif”
Web Desktops, intranets etc... Interface
MochaUI utilisateur tres ”clean”
http://mochaui.com/

19.
Ici j’explique l’abstraction
des diverses
composantes et
comment elles sont
maintenues par
differentes librairies,
differents outils tout en
restant cohérent.

20.
Mes choix de technologies?
Primitifs Praized Custom CSS
Structure et
Blueprintcss
Layout
Composantes jqueryui

21.
Avantages?
Les librairies js/css/etc t’offrent
documentation et des tonnes de dévelopeurs
actifs.
Plus facile de répérer des problemes, on a
une structure et un language pour
communiquer les erreurs, ainsi que plusieurs
outils pour les réparer rapidement.
Moins de Internet Explorer, plus de “Hello
World”

22.
Closing slide, ensuite je passe a
quelques exemples
d’implementations notament
calgary, et une page sur le
futur* praized pour montrer le
grid et le jqueryui sur mon
browser.
*sorta fake preview, i will put it
on a very basic page with a
different jqueryui theme to
“fool” the audience into thinkin
it saw something exclusive.
Maintenant, allons voir ou je m’en vais
avec tout ca...

23.
http://quickredfox.at/contact