Le quotidien d'une agence web du futur

Raphaël, Rodolphe <align=left> <align=right> <center> Salsacreations Salsacreations Contactez-nous :

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

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)

CSS REGIONS

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

1 Grâce à order. Mais ne fonctionne qu’entre éléments frères
:/ 2 Modiﬁcation 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 ❤

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

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

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

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

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

Comment je fais pour introduire le clavier sur mon PC
?… Merci [email protected] Albert le vert C’est pas de l’adobe (5)

GAMEPAD

Pouvoir brancher des manettes de jeu sur le web !

Support de multiples gamepads simultanés (pour multiplayer),  chacun se voyant
attribuer un identiﬁant. Avec ou  sans ﬁl ! 1 2 3 4

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

• id – Identiﬁant 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 coefﬁcient (-1 à 1) des axes analogiques. • buttons – Un tableau des états des boutons (pressés ou non). Mini spec, mais elle fait le maximum

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

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)

BACKGROUND-CLIP:TEXT CLIP-PATH

h1 { background-image: url(); color: transparent; background-clip: text; } <h1>andreas</h1>
<h1>grande</h1> <h1>lovely!</h1>

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

BACKGROUND-CLIP: TEXT

BACKGROUND-CLIP:TEXT CLIP-PATH

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

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

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

mais le flash, c’est bien ou pas? [email protected] Hilary C.
Conseillez moi (7)

GAMEPAD + 3D/VR

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

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)

CSS GRID LAYOUT

<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 */ }

<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

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

polyﬁll : https://github.com/FremyCompany/css-grid-polyﬁll démo : http://codepen.io/raphaelgoetter/pen/aNrrNO

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)

je n'ai pas entendu le son sur le youtube comment
que je fais? [email protected] Ludwig Pom pom pom pom (10)

GAMEPAD +  WEB AUDIO

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

• 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

• un seul langage : le web • chargement rapide,
adaptatif (selon connexion), voire hors-ligne • notiﬁcations 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

• 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 difﬁcile 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

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

Le quotidien d'une agence web du futur

Le quotidien d'une agence web du futur

More Decks by Raphael Goetter

Other Decks in Programming

Featured

Transcript