SlideShare une entreprise Scribd logo
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

Contenu connexe

En vedette

Sistema operativo 1
Sistema operativo 1Sistema operativo 1
Sistema operativo 1
tuputamadre1
 
La pareja del candidato - Antoni Gutierrez-Rubí
La pareja del candidato - Antoni Gutierrez-RubíLa pareja del candidato - Antoni Gutierrez-Rubí
La pareja del candidato - Antoni Gutierrez-Rubí
maratocomunicacio
 
Disco rigido
Disco rigidoDisco rigido
Disco rigido
leandrooggero
 
320test eoe
320test eoe320test eoe
320test eoe
amat75
 
Manual de corel draw
Manual de corel drawManual de corel draw
Manual de corel draw
minironal
 
De l'intranet aux réseaux sociaux
De l'intranet aux réseaux sociauxDe l'intranet aux réseaux sociaux
De l'intranet aux réseaux sociaux
Cap'Com
 
La recomposition territoriale des intercommunalités, regard sur l'Ile-de-Fran...
La recomposition territoriale des intercommunalités, regard sur l'Ile-de-Fran...La recomposition territoriale des intercommunalités, regard sur l'Ile-de-Fran...
La recomposition territoriale des intercommunalités, regard sur l'Ile-de-Fran...
Cap'Com
 
Preescolar
PreescolarPreescolar
Preescolar
Laurafonsecacal
 
Ead mitos y realidades
Ead mitos y realidadesEad mitos y realidades
Ead mitos y realidades
Luis Segura
 
"24h chrono" sans mon réseau - Les 5 fonctions vitales de votre Intranet
"24h chrono" sans mon réseau - Les 5 fonctions vitales de votre Intranet"24h chrono" sans mon réseau - Les 5 fonctions vitales de votre Intranet
"24h chrono" sans mon réseau - Les 5 fonctions vitales de votre Intranet
Klee Interactive
 
Made in angers selon mod-le-
Made in angers  selon mod-le-Made in angers  selon mod-le-
Made in angers selon mod-le-Cap'Com
 
Haiti before by charles
Haiti before by charlesHaiti before by charles
Haiti before by charlesstandup1016
 
Diapositivas de sistema
Diapositivas de sistemaDiapositivas de sistema
Diapositivas de sistema
angelarosmery
 
Práctica1 semejanza triángulos
Práctica1 semejanza triángulosPráctica1 semejanza triángulos
Práctica1 semejanza triángulos
minironal
 
Présentation du mentor Salim Djide lors du Vibe Challenge 2015 (#VIBE15)
Présentation du mentor Salim Djide lors du Vibe Challenge 2015 (#VIBE15)Présentation du mentor Salim Djide lors du Vibe Challenge 2015 (#VIBE15)
Présentation du mentor Salim Djide lors du Vibe Challenge 2015 (#VIBE15)
Cyriac Gbogou
 
Www.power point.ro 1945-internet
Www.power point.ro 1945-internetWww.power point.ro 1945-internet
Www.power point.ro 1945-internetghen4ik3
 
Presentación tema 4
Presentación tema 4 Presentación tema 4
Presentación tema 4
egomezbejarano
 
Estrategias de Aprendizaje
Estrategias de AprendizajeEstrategias de Aprendizaje
Estrategias de Aprendizaje
vescalante
 

En vedette (20)

Sistema operativo 1
Sistema operativo 1Sistema operativo 1
Sistema operativo 1
 
Llatí
LlatíLlatí
Llatí
 
La pareja del candidato - Antoni Gutierrez-Rubí
La pareja del candidato - Antoni Gutierrez-RubíLa pareja del candidato - Antoni Gutierrez-Rubí
La pareja del candidato - Antoni Gutierrez-Rubí
 
Disco rigido
Disco rigidoDisco rigido
Disco rigido
 
320test eoe
320test eoe320test eoe
320test eoe
 
Manual de corel draw
Manual de corel drawManual de corel draw
Manual de corel draw
 
De l'intranet aux réseaux sociaux
De l'intranet aux réseaux sociauxDe l'intranet aux réseaux sociaux
De l'intranet aux réseaux sociaux
 
La recomposition territoriale des intercommunalités, regard sur l'Ile-de-Fran...
La recomposition territoriale des intercommunalités, regard sur l'Ile-de-Fran...La recomposition territoriale des intercommunalités, regard sur l'Ile-de-Fran...
La recomposition territoriale des intercommunalités, regard sur l'Ile-de-Fran...
 
Preescolar
PreescolarPreescolar
Preescolar
 
Ead mitos y realidades
Ead mitos y realidadesEad mitos y realidades
Ead mitos y realidades
 
Tragedie
TragedieTragedie
Tragedie
 
"24h chrono" sans mon réseau - Les 5 fonctions vitales de votre Intranet
"24h chrono" sans mon réseau - Les 5 fonctions vitales de votre Intranet"24h chrono" sans mon réseau - Les 5 fonctions vitales de votre Intranet
"24h chrono" sans mon réseau - Les 5 fonctions vitales de votre Intranet
 
Made in angers selon mod-le-
Made in angers  selon mod-le-Made in angers  selon mod-le-
Made in angers selon mod-le-
 
Haiti before by charles
Haiti before by charlesHaiti before by charles
Haiti before by charles
 
Diapositivas de sistema
Diapositivas de sistemaDiapositivas de sistema
Diapositivas de sistema
 
Práctica1 semejanza triángulos
Práctica1 semejanza triángulosPráctica1 semejanza triángulos
Práctica1 semejanza triángulos
 
Présentation du mentor Salim Djide lors du Vibe Challenge 2015 (#VIBE15)
Présentation du mentor Salim Djide lors du Vibe Challenge 2015 (#VIBE15)Présentation du mentor Salim Djide lors du Vibe Challenge 2015 (#VIBE15)
Présentation du mentor Salim Djide lors du Vibe Challenge 2015 (#VIBE15)
 
Www.power point.ro 1945-internet
Www.power point.ro 1945-internetWww.power point.ro 1945-internet
Www.power point.ro 1945-internet
 
Presentación tema 4
Presentación tema 4 Presentación tema 4
Presentación tema 4
 
Estrategias de Aprendizaje
Estrategias de AprendizajeEstrategias de Aprendizaje
Estrategias de Aprendizaje
 

Similaire à Dessin de pages web 536

Réussir son projet Drupal
Réussir son projet DrupalRéussir son projet Drupal
Réussir son projet Drupal
Adyax
 
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopFrédéric Harper
 
Faire du design par composant avec l'Atomic Design
Faire du design par composant avec l'Atomic DesignFaire du design par composant avec l'Atomic Design
Faire du design par composant avec l'Atomic Design
Loïc Vanderschooten
 
Le web sémantique n'est pas antisocial (version de 2006)
Le web sémantique n'est pas antisocial (version de 2006)Le web sémantique n'est pas antisocial (version de 2006)
Le web sémantique n'est pas antisocial (version de 2006)
Fabien Gandon
 
Tour d'horizon des CMS Open Source
Tour d'horizon des CMS Open SourceTour d'horizon des CMS Open Source
Tour d'horizon des CMS Open Source
Yannick Pavard
 
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Renoir Boulanger
 
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Idean France
 
Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)
Nicolas Morin
 
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
SOAT
 
Human Talk - Faire du design par composant avec l'Atomic Design
Human Talk - Faire du design par composant avec l'Atomic DesignHuman Talk - Faire du design par composant avec l'Atomic Design
Human Talk - Faire du design par composant avec l'Atomic Design
Loïc Vanderschooten
 
introduction à la gestion de projet
introduction à la gestion de projetintroduction à la gestion de projet
introduction à la gestion de projetlaureno
 
Responsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousResponsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tous
jwajsberg
 
Front end Hero Presentation
Front end Hero PresentationFront end Hero Presentation
Front end Hero Presentation
George Edward Mbella Mbella
 
Tutoriel java
Tutoriel javaTutoriel java
Tutoriel java
Kalilou DIABY
 
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveauxMobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Frédéric Harper
 
Petal links atlassian unite
Petal links   atlassian unitePetal links   atlassian unite
Petal links atlassian uniteAtlassian
 
Webdesign
WebdesignWebdesign
Webdesign
Chris Gaillard
 
582 agr-li - interface mobile - classe 1
582   agr-li - interface mobile - classe 1582   agr-li - interface mobile - classe 1
582 agr-li - interface mobile - classe 1
Alexandre Paradis
 

Similaire à Dessin de pages web 536 (20)

Réussir son projet Drupal
Réussir son projet DrupalRéussir son projet Drupal
Réussir son projet Drupal
 
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
 
Faire du design par composant avec l'Atomic Design
Faire du design par composant avec l'Atomic DesignFaire du design par composant avec l'Atomic Design
Faire du design par composant avec l'Atomic Design
 
Le web sémantique n'est pas antisocial (version de 2006)
Le web sémantique n'est pas antisocial (version de 2006)Le web sémantique n'est pas antisocial (version de 2006)
Le web sémantique n'est pas antisocial (version de 2006)
 
Tour d'horizon des CMS Open Source
Tour d'horizon des CMS Open SourceTour d'horizon des CMS Open Source
Tour d'horizon des CMS Open Source
 
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
 
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
 
Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)
 
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
 
Human Talk - Faire du design par composant avec l'Atomic Design
Human Talk - Faire du design par composant avec l'Atomic DesignHuman Talk - Faire du design par composant avec l'Atomic Design
Human Talk - Faire du design par composant avec l'Atomic Design
 
introduction à la gestion de projet
introduction à la gestion de projetintroduction à la gestion de projet
introduction à la gestion de projet
 
Netvibes
NetvibesNetvibes
Netvibes
 
Responsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousResponsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tous
 
Front end Hero Presentation
Front end Hero PresentationFront end Hero Presentation
Front end Hero Presentation
 
Tutoriel java
Tutoriel javaTutoriel java
Tutoriel java
 
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveauxMobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
 
Petal links atlassian unite
Petal links   atlassian unitePetal links   atlassian unite
Petal links atlassian unite
 
Webdesign
WebdesignWebdesign
Webdesign
 
582 agr-li - interface mobile - classe 1
582   agr-li - interface mobile - classe 1582   agr-li - interface mobile - classe 1
582 agr-li - interface mobile - classe 1
 
Netvibes en bibliothèque
Netvibes en bibliothèqueNetvibes en bibliothèque
Netvibes en bibliothèque
 

Dernier

Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
OCTO Technology
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
OCTO Technology
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Laurent Speyser
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
UNITECBordeaux
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
Université de Franche-Comté
 
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO Technology
 

Dernier (6)

Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
 
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
 

Dessin de pages web 536

  • 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.
  • 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...