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.

Adf4ff2212aea06456ca3c3bca95c0db?s=128

Raphael Goetter

June 21, 2016
Tweet

Transcript

  1. None
  2. None
  3. None
  4. None
  5. Raphaël, Rodolphe <align=left> <align=right> <center> Salsacreations Salsacreations Contactez-nous :

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

    bonjour (2)
  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)
  9. None
  10. CSS REGIONS

  11. None
  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<d.length;a+ +)c=d[a],c.old<c.wdt&&f>=c.wdt&&c.fwd&&c.fwd(),c.ol =c.wdt&&f<c.wdt&&c.bck&&c.bck(),c.old=f};a.addEvent stener?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<j;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<j;i+ +)g=f[i].parentNode,h=g.removeChild(f[i]),e[i].pare
  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 ❤
  14. Salade Tomate Oignon Picon bière #container-a #container-b

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

    { flow-from: plop; } #container-a #container-b Tomate
  16. nav a { flow-into: plop; } .target { flow-from: plop;

    } source : https://www.w3.org/TR/css-regions-1/
  17. erf polyfill : https://github.com/FremyCompany/css-regions-polyfill démo : http://codepen.io/raphaelgoetter/pen/aNrrNO

  18. salut tout le monde je souhaite passer de bonne moment

    avec vous a***@hotmail.com Albertine tranquille ? (4)
  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)
  20. None
  21. GAMEPAD

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

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

    attribuer un identifiant. Avec ou
 sans fil ! 1 2 3 4
  24. None
  25. Applications pratiques : jeux mais pas seulement Besoin de standardisation

    car plein de modèles !
  26. None
  27. None
  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
  29. None
  30. Démo : http://www.pwnd.fr/gamepad/gamepad-svg.html Démo imaginaire du futur

  31. None
  32. None
  33. None
  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)
  35. None
  36. BACKGROUND-CLIP:TEXT CLIP-PATH

  37. h1 { background-image: url(); color: transparent; background-clip: text; } <h1>andreas</h1>

    <h1>grande</h1> <h1>lovely!</h1>
  38. démo : http://codepen.io/raphaelgoetter/pen/XdLjpB?editors=1100

  39. BACKGROUND-CLIP: TEXT

  40. None
  41. BACKGROUND-CLIP:TEXT CLIP-PATH

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

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

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

  45. None
  46. mais le flash, c’est bien ou pas? hdr22@clintonemail.com Hilary C.

    Conseillez moi (7)
  47. None
  48. GAMEPAD + 3D/VR

  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. Démo : http://www.babylonjs-playground.com/#1SMKQ6#1 Démo imaginaire du futur

  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)
  58. None
  59. CSS GRID LAYOUT

  60. <body> <nav>...</nav> <section>...</section> </body> 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 */ }
  61. None
  62. <div class="container"> <header>…</header> <article>…</article> <nav>…</nav> <aside>…</aside> <footer>…</footer> </div> .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
  63. démo : http://codepen.io/raphaelgoetter/pen/pgRQwv

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

  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)
  66. je n'ai pas entendu le son sur le youtube comment

    que je fais? symfonymaster94@caramail.com Ludwig Pom pom pom pom (10)
  67. None
  68. GAMEPAD +
 WEB AUDIO

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

  73. None
  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
  75. None
  76. None
  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
  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
  79. Icônes : https://www.iconsmind.com/ MERCI !

  80. None