SlideShare une entreprise Scribd logo
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
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
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
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
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 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
,-
                                                        ./
                                                           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?/"
!"
                                                                     #!"
                                                                           $!"
                                                                                               %!"
                                                                                                                                     &!"
                                                                                                                                           '!"
                                                                                                                                                 (!"
                                                                                                                                                                   )!"




                                                  *+,-./!)"
                                                   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;"
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
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
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
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
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
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
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
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
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
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
Un seul Web...



Une seule technique de dynamisme




     ParisWeb 2009 08-oct-2009 -- Daniel Glazman
                         20
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
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
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
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
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
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
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

Contenu connexe

Tendances

UU No. 2 / 1991 Tentang Usaha Perasuransian
UU No. 2 / 1991 Tentang Usaha PerasuransianUU No. 2 / 1991 Tentang Usaha Perasuransian
UU No. 2 / 1991 Tentang Usaha Perasuransian
Ridwan Ichsan
 
Procesos administrativos f01
Procesos administrativos f01Procesos administrativos f01
Procesos administrativos f01
Skepper63
 
Procesos administrativos f04
Procesos administrativos f04Procesos administrativos f04
Procesos administrativos f04
Skepper63
 
Estadísticas mayo 2011
Estadísticas mayo 2011Estadísticas mayo 2011
Estadísticas mayo 2011
Dominios.es
 
379 330-1-pb
379 330-1-pb379 330-1-pb
379 330-1-pb
cnumone
 
Catering Menu
Catering MenuCatering Menu
Catering Menu
drjcatering
 
Processo.Desenvolvimento.Fabrica.Soft.Distribuida
Processo.Desenvolvimento.Fabrica.Soft.DistribuidaProcesso.Desenvolvimento.Fabrica.Soft.Distribuida
Processo.Desenvolvimento.Fabrica.Soft.Distribuida
Annkatlover
 
Press quotes - Ben Rothke
Press quotes - Ben RothkePress quotes - Ben Rothke
Press quotes - Ben Rothke
Ben Rothke
 
Myers Briggs Personality Type Entj Summary Julio 3feb10
Myers Briggs Personality Type Entj Summary Julio 3feb10Myers Briggs Personality Type Entj Summary Julio 3feb10
Myers Briggs Personality Type Entj Summary Julio 3feb10
juliocfdez
 
C:\Fakepath\Movilidad Equilibrio Y Caidas Bibliografia
C:\Fakepath\Movilidad Equilibrio Y Caidas BibliografiaC:\Fakepath\Movilidad Equilibrio Y Caidas Bibliografia
C:\Fakepath\Movilidad Equilibrio Y Caidas Bibliografia
Universidad de Chile
 
Estadísticas agosto 2011
Estadísticas agosto 2011Estadísticas agosto 2011
Estadísticas agosto 2011
Dominios.es
 
025 modatisari
025 modatisari025 modatisari
025 modatisari
Hari99
 
Tutorial
TutorialTutorial
Tutorial
martha
 
Foro de facilitación del comercio
Foro de facilitación del comercioForo de facilitación del comercio
Foro de facilitación del comercio
Marco Zárate
 

Tendances (20)

UU No. 2 / 1991 Tentang Usaha Perasuransian
UU No. 2 / 1991 Tentang Usaha PerasuransianUU No. 2 / 1991 Tentang Usaha Perasuransian
UU No. 2 / 1991 Tentang Usaha Perasuransian
 
Procesos administrativos f01
Procesos administrativos f01Procesos administrativos f01
Procesos administrativos f01
 
Procesos administrativos f04
Procesos administrativos f04Procesos administrativos f04
Procesos administrativos f04
 
Estadísticas mayo 2011
Estadísticas mayo 2011Estadísticas mayo 2011
Estadísticas mayo 2011
 
379 330-1-pb
379 330-1-pb379 330-1-pb
379 330-1-pb
 
Catering Menu
Catering MenuCatering Menu
Catering Menu
 
Almacen 2011
Almacen 2011Almacen 2011
Almacen 2011
 
Le web et l emergence o_dyens
Le web et l emergence o_dyensLe web et l emergence o_dyens
Le web et l emergence o_dyens
 
Leng 14
Leng 14Leng 14
Leng 14
 
469434 curso-de-tecnicas-canto
469434 curso-de-tecnicas-canto469434 curso-de-tecnicas-canto
469434 curso-de-tecnicas-canto
 
Processo.Desenvolvimento.Fabrica.Soft.Distribuida
Processo.Desenvolvimento.Fabrica.Soft.DistribuidaProcesso.Desenvolvimento.Fabrica.Soft.Distribuida
Processo.Desenvolvimento.Fabrica.Soft.Distribuida
 
Press quotes - Ben Rothke
Press quotes - Ben RothkePress quotes - Ben Rothke
Press quotes - Ben Rothke
 
Myers Briggs Personality Type Entj Summary Julio 3feb10
Myers Briggs Personality Type Entj Summary Julio 3feb10Myers Briggs Personality Type Entj Summary Julio 3feb10
Myers Briggs Personality Type Entj Summary Julio 3feb10
 
C:\Fakepath\Movilidad Equilibrio Y Caidas Bibliografia
C:\Fakepath\Movilidad Equilibrio Y Caidas BibliografiaC:\Fakepath\Movilidad Equilibrio Y Caidas Bibliografia
C:\Fakepath\Movilidad Equilibrio Y Caidas Bibliografia
 
Codigo etica medica
Codigo etica medicaCodigo etica medica
Codigo etica medica
 
Estadísticas agosto 2011
Estadísticas agosto 2011Estadísticas agosto 2011
Estadísticas agosto 2011
 
025 modatisari
025 modatisari025 modatisari
025 modatisari
 
Tutorial
TutorialTutorial
Tutorial
 
Ordo missae ambrosianum
Ordo missae ambrosianumOrdo missae ambrosianum
Ordo missae ambrosianum
 
Foro de facilitación del comercio
Foro de facilitación del comercioForo de facilitación del comercio
Foro de facilitación del comercio
 

Similaire à Paris Web2009 One Web

"Guide" for the NEXT Program
"Guide" for the NEXT Program"Guide" for the NEXT Program
"Guide" for the NEXT Program
Sandy_Johnson
 
Torniquetes, preparacion preoperatoria- walter
Torniquetes, preparacion preoperatoria- walterTorniquetes, preparacion preoperatoria- walter
Torniquetes, preparacion preoperatoria- walter
Mario Lopez
 
Np modificacion lopd
Np modificacion lopdNp modificacion lopd
Np modificacion lopd
mosobi
 
Seguridad en instalaciones eléctricas(ing cuevas posadas)
Seguridad en instalaciones eléctricas(ing cuevas posadas)Seguridad en instalaciones eléctricas(ing cuevas posadas)
Seguridad en instalaciones eléctricas(ing cuevas posadas)
Eduardo Soracco
 
Seguridad en instalaciones electricas ing Cuevas
Seguridad en instalaciones electricas ing CuevasSeguridad en instalaciones electricas ing Cuevas
Seguridad en instalaciones electricas ing Cuevas
Yeyi Cabrera
 
15 191 ss cac thuat toan phan cum
15 191 ss cac thuat toan phan cum15 191 ss cac thuat toan phan cum
15 191 ss cac thuat toan phan cum
de_choat
 
Moverse en libertad
Moverse en libertadMoverse en libertad
Moverse en libertad
susana
 
Abordaje Rodilla Femur - hector
Abordaje Rodilla Femur - hectorAbordaje Rodilla Femur - hector
Abordaje Rodilla Femur - hector
Mario Lopez
 
More Drought Tolerant Fruit Trees - University of Florida
More Drought Tolerant Fruit Trees - University of FloridaMore Drought Tolerant Fruit Trees - University of Florida
More Drought Tolerant Fruit Trees - University of Florida
Faizah68w
 
Contrato de evaluación. Perspectivas Epistemológicas
Contrato de evaluación. Perspectivas EpistemológicasContrato de evaluación. Perspectivas Epistemológicas
Contrato de evaluación. Perspectivas Epistemológicas
Edelin Bravo
 
Estadísticas junio 2011
Estadísticas junio 2011Estadísticas junio 2011
Estadísticas junio 2011
Dominios.es
 
Gabarito Concurso
Gabarito ConcursoGabarito Concurso
Gabarito Concurso
cairo maia
 
Gabarito Concurso
Gabarito ConcursoGabarito Concurso
Gabarito Concurso
cairo maia
 
المواصفات القياسية عادل حجازي
المواصفات القياسية عادل حجازيالمواصفات القياسية عادل حجازي
المواصفات القياسية عادل حجازي
guest89c9107
 
المواصفات القياسية عادل حجازي
المواصفات القياسية عادل حجازيالمواصفات القياسية عادل حجازي
المواصفات القياسية عادل حجازي
guest196d52
 

Similaire à Paris Web2009 One Web (20)

"Guide" for the NEXT Program
"Guide" for the NEXT Program"Guide" for the NEXT Program
"Guide" for the NEXT Program
 
Quieres mejorar-tus-predicaciones
Quieres mejorar-tus-predicacionesQuieres mejorar-tus-predicaciones
Quieres mejorar-tus-predicaciones
 
Gl 01
Gl 01Gl 01
Gl 01
 
Torniquetes, preparacion preoperatoria- walter
Torniquetes, preparacion preoperatoria- walterTorniquetes, preparacion preoperatoria- walter
Torniquetes, preparacion preoperatoria- walter
 
Np modificacion lopd
Np modificacion lopdNp modificacion lopd
Np modificacion lopd
 
Seguridad en instalaciones eléctricas(ing cuevas posadas)
Seguridad en instalaciones eléctricas(ing cuevas posadas)Seguridad en instalaciones eléctricas(ing cuevas posadas)
Seguridad en instalaciones eléctricas(ing cuevas posadas)
 
Seguridad en instalaciones electricas ing Cuevas
Seguridad en instalaciones electricas ing CuevasSeguridad en instalaciones electricas ing Cuevas
Seguridad en instalaciones electricas ing Cuevas
 
Tutorial tuxpaint
Tutorial tuxpaintTutorial tuxpaint
Tutorial tuxpaint
 
Optimizacion sol
Optimizacion solOptimizacion sol
Optimizacion sol
 
15 191 ss cac thuat toan phan cum
15 191 ss cac thuat toan phan cum15 191 ss cac thuat toan phan cum
15 191 ss cac thuat toan phan cum
 
Moverse en libertad
Moverse en libertadMoverse en libertad
Moverse en libertad
 
Abordaje Rodilla Femur - hector
Abordaje Rodilla Femur - hectorAbordaje Rodilla Femur - hector
Abordaje Rodilla Femur - hector
 
More Drought Tolerant Fruit Trees - University of Florida
More Drought Tolerant Fruit Trees - University of FloridaMore Drought Tolerant Fruit Trees - University of Florida
More Drought Tolerant Fruit Trees - University of Florida
 
Contrato de evaluación. Perspectivas Epistemológicas
Contrato de evaluación. Perspectivas EpistemológicasContrato de evaluación. Perspectivas Epistemológicas
Contrato de evaluación. Perspectivas Epistemológicas
 
Estadísticas junio 2011
Estadísticas junio 2011Estadísticas junio 2011
Estadísticas junio 2011
 
Gabarito Concurso
Gabarito ConcursoGabarito Concurso
Gabarito Concurso
 
Gabarito Concurso
Gabarito ConcursoGabarito Concurso
Gabarito Concurso
 
المواصفات القياسية عادل حجازي
المواصفات القياسية عادل حجازيالمواصفات القياسية عادل حجازي
المواصفات القياسية عادل حجازي
 
المواصفات القياسية عادل حجازي
المواصفات القياسية عادل حجازيالمواصفات القياسية عادل حجازي
المواصفات القياسية عادل حجازي
 
Colegio San Josafat
Colegio San JosafatColegio San Josafat
Colegio San Josafat
 

Paris Web2009 One Web

  • 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. 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. 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. 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. Firefox 3.5 ≈ Safari 4.0.3 ParisWeb 2009 08-oct-2009 -- Daniel Glazman 5
  • 6. Firefox 3.5 ≠ Opera 10.0 ParisWeb 2009 08-oct-2009 -- Daniel Glazman 6
  • 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. ,- ./ 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. !" #!" $!" %!" &!" '!" (!" )!" *+,-./!)" 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Un seul Web... Une seule technique de dynamisme ParisWeb 2009 08-oct-2009 -- Daniel Glazman 20
  • 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. 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. 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. 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. 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. 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. 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