Dessin de pages web 536

1 220 vues

Publié le

Materiel de soutient utilisé l'ors de l'événement "Soirée Conférence" du w3qc Lundi le 15 juin 2009 au café Laika.

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 220
Sur SlideShare
0
Issues des intégrations
0
Intégrations
9
Actions
Partages
0
Téléchargements
9
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Dessin de pages web 536

  1. 1. Retour au banc d’école Dessin de pages web 101
  2. 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. 3. Tu peut tojours pas ignorer la seule vérité universelle. if(évolution == changement){ return new MurphysLaw(); }
  4. 4. In the begining... there were many mockups...
  5. 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. 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. 7. primitifs
  8. 8. primitifs
  9. 9. primitifs
  10. 10. structure
  11. 11. structure
  12. 12. structure
  13. 13. Layout
  14. 14. Layout
  15. 15. Layout
  16. 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. 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. 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. 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. 20. Mes choix de technologies? Primitifs Praized Custom CSS Structure et Blueprintcss Layout Composantes jqueryui
  21. 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. 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. 23. http://quickredfox.at/contact

×