Le quotidien d'une agence web du futur

Par Rodolphe Rimelé et Raphaël Goetter.
Une agence web de 1996 qui se projette dans le futur, et imagine les technologies et spécifications de 2016.

Transcript

1. View Slide

2. View Slide

3. View Slide

4. View Slide

5. Raphaël, Rodolphe
   
   
   Salsacreations
   Salsacreations
   Contactez-nous :
   

   View Slide

6. View Slide

7. bonjour
   21/12/2012 n'ai pas la fin du monde
   mondo***@gmail.com
   mondo***@gmail.com
   bonjour
   (2)
   

   View Slide

8. pourquoi ne trouve t on plus les desserts
   alsa le notre dans les grandes surfaces a
   le mans?
   d***.sonia@neuf.fr
   sonia d.
   dans ma région ?
   (3)
   

   View Slide

9. View Slide

10. CSS REGIONS
    

    View Slide

11. View Slide

12. c.body&&c.body.clientWidth||
    a},c=a.document,d=[],e=0,f=b(),g=function(){f=b();v
    a,c;for(a=0;a+)c=d[a],c.old=c.wdt&&c.fwd&&c.fwd(),c.ol
    =c.wdt&&fstener?a.addEventListener("resize",g,!
    1):a.attachEvent("onresize",g),a.minwidth=function(
    b,c,e){d.push({wdt:a,old:e?1e9:0,fwd:b,bck:c}),g()}
    (this),relocate=function(a,b,c,d)b.nodeName&&(b=[b]
    varg,h,i,j=b.length;for(i=j-1;i>=0;i--)f.push(b[i])
    ar k=function(){for(i=0;i+)g=f[i].parentNode,e[i]===undefined&&(e[i]=documen
    createElement("span"),g.insertBefore(e[i],f[i])),h=
    removeChild(f[i]),c.insertBefore(h,c.firstChild)},l
    unction(){for(i=0;i+)g=f[i].parentNode,h=g.removeChild(f[i]),e[i].pare
    

    View Slide

13. 1
    Grâce à order. Mais ne fonctionne qu’entre éléments frères :/
    2
    Modification du DOM avec relocateJS ou un appendTo()
    JS / JQUERY
    FLEXBOX
    3
    Détection du User-Agent et reconstruction du HTML
    CÔTÉ SERVEUR
    4
    Parce que c’est fait pour ça, quoi
    CSS REGIONS
    ❤
    

    View Slide

14. Salade
    Tomate
    Oignon
    Picon bière
    #container-a #container-b
    

    View Slide

15. Salade
    Oignon
    Picon bière
    .tomate {
    flow-into: plop;
    }
    #container-b {
    flow-from: plop;
    }
    #container-a #container-b
    Tomate
    

    View Slide

16. nav a {
    flow-into: plop;
    }
    .target {
    flow-from: plop;
    }
    source : https://www.w3.org/TR/css-regions-1/
    

    View Slide

17. erf
    polyfill : https://github.com/FremyCompany/css-regions-polyfill
    démo : http://codepen.io/raphaelgoetter/pen/aNrrNO
    

    View Slide

18. salut tout le monde je souhaite passer de
    bonne moment avec vous
    a***@hotmail.com
    Albertine
    tranquille ?
    (4)
    

    View Slide

19. Comment je fais pour introduire le clavier
    sur mon PC ?… Merci
    albert.green@wanadoo.fr
    Albert le vert
    C’est pas de l’adobe
    (5)
    

    View Slide

20. View Slide

21. GAMEPAD
    

    View Slide

22. Pouvoir brancher des manettes
    de jeu sur le web !
    

    View Slide

23. Support de multiples gamepads simultanés (pour multiplayer),

    chacun se voyant attribuer un identifiant.
    Avec ou

    sans fil !
    1 2 3
    4
    

    View Slide

24. View Slide

25. Applications pratiques : jeux mais pas seulement
    Besoin de standardisation car plein de modèles !
    

    View Slide

26. View Slide

27. View Slide

28. • id – Identifiant du modèle ou de la marque
    • index – Le numéro de la manette s’il y en a plusieurs.
    • connected – Si la connexion est établie.
    • timestamp – Le dernier moment où les données ont été reçues.
    • mapping – Le « mapping » des boutons.
    • axes – Un tableau de coefficient (-1 à 1) des axes analogiques.
    • buttons – Un tableau des états des boutons (pressés ou non).
    Mini spec, mais elle fait le maximum
    

    View Slide

29. View Slide

30. Démo : http://www.pwnd.fr/gamepad/gamepad-svg.html
    Démo imaginaire du futur
    

    View Slide

31. View Slide

32. View Slide

33. View Slide

34. J'aimerais avoir des musiques et clips
    SVP de Rhiana et Brytney Spaers
    Merci!!!!!!!!!!=) Au revoir !!”
    mateo.b***@hotmail.fr
    mateo b.
    des musiques et clips
    (6)
    

    View Slide

35. View Slide

36. BACKGROUND-CLIP:TEXT
    CLIP-PATH
    

    View Slide

37. h1 {
    background-image: url();
    color: transparent;
    background-clip: text;
    }
    andreas
    grande
    lovely!
    

    View Slide

38. démo : http://codepen.io/raphaelgoetter/pen/XdLjpB?editors=1100
    

    View Slide

39. BACKGROUND-CLIP: TEXT
    

    View Slide

40. View Slide

41. BACKGROUND-CLIP:TEXT
    CLIP-PATH
    

    View Slide

42. img {
    clip-path: circle(50.0% at 50% 50%);
    }
    img {
    /* rien */
    }
    

    View Slide

43. clip-path maker : http://bennettfeely.com/clippy/
    

    View Slide

44. démo : http://codepen.io/raphaelgoetter/pen/KzEPba?editors=1100
    

    View Slide

45. View Slide

46. mais le flash, c’est bien ou pas?
    hdr22@clintonemail.com
    Hilary C.
    Conseillez moi
    (7)
    

    View Slide

47. View Slide

48. GAMEPAD + 3D/VR
    

    View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. Démo : http://www.babylonjs-playground.com/#1SMKQ6#1
    Démo imaginaire du futur
    

    View Slide

57. Hello Mr. Goetter,
    My actual site is a crap and I need a Flex
    CSS guru.
    May I have a little talk with you ?
    See you soon.
    Hugh Jackman
    hugh@jackman.com
    Hugh Jackman
    beuuarh
    (8)
    

    View Slide

58. View Slide

59. CSS GRID LAYOUT
    

    View Slide

60. 
    ...
    ...
    
    body {
    display: grid;
    grid-template-columns: 200px 400px;
    }
    nav {
    grid-column: 1; /* je vais en colonne 1 */
    }
    section {
    grid-column: 2; /* je vais en colonne 2 */
    }
    

    View Slide

61. View Slide

62. 
    …
    …
    …
    …
    …
    
    .container {
    display: grid;
    grid-template-columns: 10em 1fr 10em;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "header header header"
    "nav article aside"
    "footer footer footer";
    grid-gap: 1rem;
    min-height: 100vh;
    }
    header { grid-area: header; }
    nav { grid-area: nav; }
    article { grid-area: article; }
    aside { grid-area: aside; }
    footer { grid-area: footer; }
    démo : http://codepen.io/raphaelgoetter/pen/XXpeWO?editors=1100
    

    View Slide

63. démo : http://codepen.io/raphaelgoetter/pen/pgRQwv
    

    View Slide

64. polyfill : https://github.com/FremyCompany/css-grid-polyfill
    démo : http://codepen.io/raphaelgoetter/pen/aNrrNO
    

    View Slide

65. et oui sa fait vingt un ans, je tai vu pour la
    premiere fois , dans une boite de nuit.tu
    as fait battre mon coeur , depuis se jour
    la. je n ai jamais cesse de t aimer. malgre
    les orages, les obstacle de la vie. toi etmoi
    , on en a tournes des pages. mes notre
    histoire , de notre vie, n est pas fini, nous
    kevina@thebestofwebparis.biz
    Kévina
    Ma lettre pour pascal
    (9)
    

    View Slide

66. je n'ai pas entendu le son sur le youtube
    comment que je fais?
    symfonymaster94@caramail.com
    Ludwig
    Pom pom pom pom
    (10)
    

    View Slide

67. View Slide

68. GAMEPAD +

    WEB AUDIO
    

    View Slide

69. View Slide

70. View Slide

71. View Slide

72. Démo : http://www.pwnd.fr/gamepad/gamepad-audio.html
    Démo imaginaire du futur
    

    View Slide

73. View Slide

74. • le web a longtemps copié le « natif »
    • désormais on a un cheminement clair et fort vers les web apps
    • y compris pour la production de contenu ( != consommation)
    avec plein d’API, des styles CSS enrichis
    • imaginer de nouveaux services
    • le web (re)devient la plate-forme universelle par excellence
    Perspectives
    

    View Slide

75. View Slide

76. View Slide

77. • un seul langage : le web
    • chargement rapide, adaptatif (selon connexion), voire hors-ligne
    • notifications push
    • ajout à l’écran d’accueil
    • sécurisation par https
    • mises en pages riches, responsive !

    animations/transitions CSS accélérées graphiquement
    Applications web progressives
    

    View Slide

78. • mises à jour faciles et instantanées (et pas de sollicitations
    constantes de l’utilisateur)
    • pas d’obsolescence programmée (les tous premiers sites web
    sont encore consultables aujourd’hui)
    • utilisation des URLs « dans » les applications (linkables,
    partageables, référençables)
    • app stores : très difficile de se faire une place dans le top 10 et
    de contrer les systèmes de classement, de tomber "par hasard"
    sur une app, comme sur le web
    Contrairement aux applications natives
    

    View Slide

79. Icônes : https://www.iconsmind.com/
    MERCI !
    

    View Slide

80. View Slide