Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Le quotidien d'une agence web du futur

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.

Raphael Goetter

June 21, 2016
Tweet

More Decks by Raphael Goetter

Other Decks in Programming

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***[email protected]
    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
    [email protected]
    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?
    [email protected]
    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
    [email protected]
    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
    [email protected]
    Kévina
    Ma lettre pour pascal
    (9)

    View Slide

  66. je n'ai pas entendu le son sur le youtube
    comment que je fais?
    [email protected]
    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