Un seul Web
" Ce n'est pas la fin. Ce n'est même pas le début de la fin. C'est peut-être la fin du début "
                  ...
Un seul Web...




           Remerciements

• à l'équipe de ParisWeb, pour la plus belle
  conf européenne sur le sujet e...
Un seul Web...




               Contexte...

• HTML+, novembre 1993
• HTML 4.0, décembre 1997
• CSS 1, décembre 1996
• C...
Un seul Web...




                Rappelez-vous...
...quand écran et impression se faisaient la guerre
...quand la taille...
Firefox 3.5 ≈ Safari 4.0.3




ParisWeb 2009 08-oct-2009 -- Daniel Glazman
                    5
Firefox 3.5 ≠ Opera 10.0




ParisWeb 2009 08-oct-2009 -- Daniel Glazman
                    6
Un seul Web...




  Quid des navigateurs
MSIE s'érode en Europe aussi vite que
Netscape en 1997...
Firefox progresse auss...
,-
                                                        ./
                                                           0...
!"
                                                                     #!"
                                              ...
Un seul Web...




   Deux mondes connectés
• les statistiques précédentes sont très
  différentes de celle des sites prév...
Un seul Web...




                      donc...
• desktop (Firefox 3+, WebKit, Opera ;
  IE7/8 ?)
• mobile (WebKit, Opera...
Un seul Web...




 Un seul markup, HTML5

• peu de soucis, mais encore un peu de
  patience
• aucun problème dans Firefox...
Un seul Web...




                   HTML 5 dans IE
        Problème, IE ne sait pas styler un élément
        qu'il ne c...
Un seul Web...




Un seul style par défaut

             • Solution: utiliser une feuille de
                 styles "de ...
Un seul Web...




              Un seul Layout


• Ne ré-inventez pas la roue et tous les hacks
  qui vont avec !!! (en a...
Un seul Web...



  Un seul document, n feuilles de styles*

• l'iPhone fait bande à part...
 <meta name="viewport" conten...
Un seul Web...




        Un seul emmerdeur...
• Obligé de faire des horreurs juste pour
  MSIE...
  <!--[if IE]>
  <link...
Un seul Web...




Une seule ligne pour embellir


• border-radius, box-shadow, text-shadow,
  border-image, ...
• démos

...
Un seul Web...




Fonts
           Une seule fonte

    @font-face{
     font-family: 'DroidSans';
     src: url('DroidSa...
Un seul Web...



Une seule technique de dynamisme




     ParisWeb 2009 08-oct-2009 -- Daniel Glazman
                  ...
Un seul Web...



  Une seule technique de dynamisme

• CSS Transformations (WebKit et Firefox)
• CSS Transitions (WebKit ...
Un seul Web...




     Et mes bôs dégradés ?

• CSS Gradients :-)
 • proposition d'Apple
 • en cours de discussion dans l...
Un seul Web...




              Désirs d'Avenir ☺
•   <video> dans HTML 5
    •   fallback vers Flash/Java si vraiment be...
Un seul Web...




        Un seul contenu

• WCAG 2.0
• ARIA
• tout le monde doit pouvoir visiter
  votre site Web



   ...
Un seul Web...




          Une seule Babel...


• Penser à la localisation (L10N) du site dès
  sa conception
  •   HTTP...
Un seul Web...




                 Conclusions

1. Flash doit être détruit


2. "This site made for all modern browsers,
...
Un seul Web...




                     Questions ?




•   image "BrowserWar" par bradybd, CC Attribution-Share Alike 2.0...
Upcoming SlideShare
Loading in...5
×

Paris Web2009 One Web

6,753

Published on

Published in: Technology
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,753
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

Paris Web2009 One Web

  1. 1. Un seul Web " Ce n'est pas la fin. Ce n'est même pas le début de la fin. C'est peut-être la fin du début " Winston Churchill Daniel Glazman Disruptive Innovations ParisWeb 2009 08-oct-2009
  2. 2. Un seul Web... Remerciements • à l'équipe de ParisWeb, pour la plus belle conf européenne sur le sujet et pour atteindre l'année prochaîne l'âge de raison • à IBM et en particulier à Jean-Louis Carvès sans qui nous ne serions pas là aujourd'hui ParisWeb 2009 08-oct-2009 -- Daniel Glazman 2
  3. 3. Un seul Web... Contexte... • HTML+, novembre 1993 • HTML 4.0, décembre 1997 • CSS 1, décembre 1996 • CSS 2, mai 1998 • Tag Soup et CSS hackz... ParisWeb 2009 08-oct-2009 -- Daniel Glazman 3
  4. 4. Un seul Web... Rappelez-vous... ...quand écran et impression se faisaient la guerre ...quand la taille de fonte par défaut sur Netscape n'était pas celle de IE ...la première fois que vous avez vu un URL dans le générique de fin du Journal Télévisé... ...à quel point votre page Web est belle sur votre Mac et laide sur Windows ☺ ParisWeb 2009 08-oct-2009 -- Daniel Glazman 4
  5. 5. Firefox 3.5 ≈ Safari 4.0.3 ParisWeb 2009 08-oct-2009 -- Daniel Glazman 5
  6. 6. Firefox 3.5 ≠ Opera 10.0 ParisWeb 2009 08-oct-2009 -- Daniel Glazman 6
  7. 7. Un seul Web... Quid des navigateurs MSIE s'érode en Europe aussi vite que Netscape en 1997... Firefox progresse aussi fort que MSIE en 1996 Chrome augmente fort... chez les geeks Opera reste stable Safari progresse fort grâce à l'iPhone ParisWeb 2009 08-oct-2009 -- Daniel Glazman 7
  8. 8. ,- ./ 0 "4 1 !" #!" $!" %!" &!" '!" (!" )!" *!" +!" /5 /23" /0 $! 1 !) "67 /23" "" 8 9 $! ! ";/ 72: )"" 12 3"$! 97 !* 2 " "< :3"$ " 72 !! 5= *"" 3 "> "$!! ?2 @A3 *"" " "< $!! 7: *"" 3 "69 "$!! 8/ *" 3"$ " "69 !!* "> A:3"$ "" "E/ 9B9 !!* ?D CD3" "" /0 $! 1 ! "F /23" *"" 5D $ ", -1/ !!* -. 2 "" /0 3"$! "4 1 ! /5 /23" *"" /0 $! 1 8 !* "67 /23" "" 8 9 $! ! Un seul Web... ";/ 72: *"" 12 3"$ 97 !!+ 2 " "< :3"$ " 72 !! 5= +"" 3 "> "$!! ?2 @A3 +"" " "< $!! 7: +"" 3 "69 "$!! 8/ +" 3"$ " "69 !!+ "> A:3"$ "" "E/ 9B9 !!+ ?D CD3" "" /0 $! 1/ !+ ParisWeb 2009 08-oct-2009 -- Daniel Glazman 23" "" $! !+ "" Statistiques globales GH" E7I72@" FD=/2" F?/27" ;@2/I-J" K=2-0/" ,/DC57?/"
  9. 9. !" #!" $!" %!" &!" '!" (!" )!" *+,-./!)" 01-2./!)" 3+24/!)" +-2./!)" 3+5/!)" *65,/!)" *657./!)" +89:/!)" 4;<:./!)" 8=:./!)" ,8-./!)" >1=./!)" *+,-./!?" 01-2./!?" 3+24/!?" +-2./!?" 3+5/!?" *65,/!?" 9 *657./!?" +89:/!?" Un seul Web... 4;<:./!?" 8=:./!?" ,8-./!?" >1=./!?" *+,-./!@" 01-2./!@" 3+24/!@" +-2./!@" 3+5/!@" *65,/!@" *657./!@" +89:/!@" 4;<:./!@" Un site de geeks J%4=G8874.=83" ParisWeb 2009 08-oct-2009 -- Daniel Glazman H+0+25" I<;2+" D52;08E" A8:+7"BC" FG283;"
  10. 10. Un seul Web... Deux mondes connectés • les statistiques précédentes sont très différentes de celle des sites prévus pour l'accès mobile (news, achats, yellow pages, social)... • idem avec les sites visibles dans les réseaux sociaux... exemple anonyme : FF 45% IE 19% Safari 28% Chrome 5% ParisWeb 2009 08-oct-2009 -- Daniel Glazman 10
  11. 11. Un seul Web... donc... • desktop (Firefox 3+, WebKit, Opera ; IE7/8 ?) • mobile (WebKit, Opera, Fennec) • télévisions ? • euuuuh, et pas IE 6 ? ni mobile IE ? ParisWeb 2009 08-oct-2009 -- Daniel Glazman 11
  12. 12. Un seul Web... Un seul markup, HTML5 • peu de soucis, mais encore un peu de patience • aucun problème dans Firefox, WebKit et Opera • Microsoft va nécessairement finir par basculer vers HTML 5 ParisWeb 2009 08-oct-2009 -- Daniel Glazman 12
  13. 13. Un seul Web... HTML 5 dans IE Problème, IE ne sait pas styler un élément qu'il ne connait pas (wow...) ; besoin d'un commentaire conditionnel (hack proprio Microsoft !) <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></ script> <![endif]--> ParisWeb 2009 08-oct-2009 -- Daniel Glazman 13
  14. 14. Un seul Web... Un seul style par défaut • Solution: utiliser une feuille de styles "de reset" http://html5doctor.com/html-5-reset-stylesheet/ http://developer.yahoo.com/yui/reset/ ParisWeb 2009 08-oct-2009 -- Daniel Glazman 14
  15. 15. Un seul Web... Un seul Layout • Ne ré-inventez pas la roue et tous les hacks qui vont avec !!! (en attendant CSS Grid Layout) http://developer.yahoo.com/yui/grids/ ParisWeb 2009 08-oct-2009 -- Daniel Glazman 15
  16. 16. Un seul Web... Un seul document, n feuilles de styles* • l'iPhone fait bande à part... <meta name="viewport" content="width=320, user-scalable=yes"> • pour les autres CSS Media Queries @media screen and (max-width: 320px) { ... } • et pour mobile IE ? * DSR, MSR, SSR ParisWeb 2009 08-oct-2009 -- Daniel Glazman 16
  17. 17. Un seul Web... Un seul emmerdeur... • Obligé de faire des horreurs juste pour MSIE... <!--[if IE]> <link type="text/css" rel="stylesheet" href="ssr.css"> <![endif]--> ssr.css adapté de http://mxr.mozilla.org/mozilla/source/minimo/ components/ssr/smallScreen.css ParisWeb 2009 08-oct-2009 -- Daniel Glazman 17
  18. 18. Un seul Web... Une seule ligne pour embellir • border-radius, box-shadow, text-shadow, border-image, ... • démos ParisWeb 2009 08-oct-2009 -- Daniel Glazman 18
  19. 19. Un seul Web... Fonts Une seule fonte @font-face{ font-family: 'DroidSans'; src: url('DroidSans.ttf') format('truetype'); } ParisWeb 2009 08-oct-2009 -- Daniel Glazman 19
  20. 20. Un seul Web... Une seule technique de dynamisme ParisWeb 2009 08-oct-2009 -- Daniel Glazman 20
  21. 21. Un seul Web... Une seule technique de dynamisme • CSS Transformations (WebKit et Firefox) • CSS Transitions (WebKit et bientôt Firefox) • "Opera has running code" - Chaals • jQuery • MooTools • ... ParisWeb 2009 08-oct-2009 -- Daniel Glazman 20
  22. 22. Un seul Web... Et mes bôs dégradés ? • CSS Gradients :-) • proposition d'Apple • en cours de discussion dans le CSS WG • CSS Backgrounds and Images • adaptation de l'image de fond à l'élément ParisWeb 2009 08-oct-2009 -- Daniel Glazman 21
  23. 23. Un seul Web... Désirs d'Avenir ☺ • <video> dans HTML 5 • fallback vers Flash/Java si vraiment besoin est • et de toute manière, pas de Flash sur iPhone... • <audio> dans HTML 5, idem • <canvas> • IE, sigh... http://code.google.com/p/explorercanvas/ • SVG (IE, sigh...) ParisWeb 2009 08-oct-2009 -- Daniel Glazman 22
  24. 24. Un seul Web... Un seul contenu • WCAG 2.0 • ARIA • tout le monde doit pouvoir visiter votre site Web ParisWeb 2009 08-oct-2009 -- Daniel Glazman 23
  25. 25. Un seul Web... Une seule Babel... • Penser à la localisation (L10N) du site dès sa conception • HTTP Content-Language/Accept-Language • base de données localisées ParisWeb 2009 08-oct-2009 -- Daniel Glazman 24
  26. 26. Un seul Web... Conclusions 1. Flash doit être détruit 2. "This site made for all modern browsers, MSIE is not a modern browser any more" ParisWeb 2009 08-oct-2009 -- Daniel Glazman 25
  27. 27. Un seul Web... Questions ? • image "BrowserWar" par bradybd, CC Attribution-Share Alike 2.0 Generic http://www.flickr.com/photos/bradybd/2818154005/ • photo buste de Caton, domaine public ParisWeb 2009 08-oct-2009 -- Daniel Glazman 26

×