Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Raphaël, Rodolphe Salsacreations Salsacreations Contactez-nous :

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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)

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

CSS REGIONS

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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.wdt&&c.fwd&&c.fwd(),c.ol =c.wdt&&f=0;i--)f.push(b[i]) ar k=function(){for(i=0;i

Slide 13

Slide 13 text

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 ❤

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

GAMEPAD

Slide 22

Slide 22 text

Pouvoir brancher des manettes de jeu sur le web !

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

• 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

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

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)

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

BACKGROUND-CLIP:TEXT CLIP-PATH

Slide 37

Slide 37 text

h1 { background-image: url(); color: transparent; background-clip: text; }

andreas

grande

lovely!

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

BACKGROUND-CLIP: TEXT

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

BACKGROUND-CLIP:TEXT CLIP-PATH

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

GAMEPAD + 3D/VR

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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)

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

CSS GRID LAYOUT

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

… … … … …

.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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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)

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

GAMEPAD +  WEB AUDIO

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

• 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

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

• 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

Slide 78

Slide 78 text

• 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