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. 1.
  2. 2.
  3. 3.
  4. 4.
  5. 6.
  6. 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)
  7. 9.
  8. 11.
  9. 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 ❤
  10. 15.

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

    { flow-from: plop; } #container-a #container-b Tomate
  11. 16.

    nav a { flow-into: plop; } .target { flow-from: plop;

    } source : https://www.w3.org/TR/css-regions-1/
  12. 18.

    salut tout le monde je souhaite passer de bonne moment

    avec vous a***@hotmail.com Albertine tranquille ? (4)
  13. 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)
  14. 20.
  15. 21.
  16. 23.

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

    attribuer un identifiant. Avec ou
 sans fil ! 1 2 3 4
  17. 24.
  18. 26.
  19. 27.
  20. 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
  21. 29.
  22. 31.
  23. 32.
  24. 33.
  25. 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)
  26. 35.
  27. 40.
  28. 45.
  29. 47.
  30. 49.
  31. 50.
  32. 51.
  33. 52.
  34. 53.
  35. 54.
  36. 55.
  37. 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)
  38. 58.
  39. 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 */ }
  40. 61.
  41. 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
  42. 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)
  43. 66.

    je n'ai pas entendu le son sur le youtube comment

    que je fais? symfonymaster94@caramail.com Ludwig Pom pom pom pom (10)
  44. 67.
  45. 69.
  46. 70.
  47. 71.
  48. 73.
  49. 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
  50. 75.
  51. 76.
  52. 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
  53. 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
  54. 80.