Retour au banc d’école
     Dessin de pages web 101
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 ....
Tu peut tojours pas
                               ignorer la seule vérité
                               universelle.




if(évolution == changement){
  return new MurphysLaw();
}
In the begining... there
were many mockups...
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
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.
primitifs
primitifs
primitifs
structure
structure
structure
Layout
Layout
Layout
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
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/
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/
Ici j’explique l’abstraction
des diverses
composantes et
comment elles sont
maintenues par
differentes librairies,
differents outils tout en
restant cohérent.
Mes choix de technologies?




  Primitifs    Praized Custom CSS


Structure et
                  Blueprintcss
   Layout

Composantes         jqueryui
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”
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...
http://quickredfox.at/contact

Dessin de pages web 536

  • 1.
    Retour au bancd’école Dessin de pages web 101
  • 2.
    Ton site serajamais 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 tojourspas ignorer la seule vérité universelle. if(évolution == changement){ return new MurphysLaw(); }
  • 4.
    In the begining...there were many mockups...
  • 5.
    Jamais dire “jamais” “Ilest 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.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
    Fini de s’lescasser! 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 projetsopen 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 desdiverses composantes et comment elles sont maintenues par differentes librairies, differents outils tout en restant cohérent.
  • 20.
    Mes choix detechnologies? Primitifs Praized Custom CSS Structure et Blueprintcss Layout Composantes jqueryui
  • 21.
    Avantages? Les librairies js/css/etct’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, ensuiteje 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.