Intracto gaf op 23 maart 2013 een presentatie op de CVO Experience Day in Antwerpen over de toekomst van HTML, CSS en Javascript.

1. The Future
of HTML and CSS
CVO Experience Day 2013
Intracto Digital Agency
Jan Persoons
Tom Van Mierlo

2. wie zijn wij?
interactieve inhoud op het web
bpost: mystamp
toekomstvisie

3. Jan Tom
@janpersoons @tomvm
Front-end Online
developer strateeg

4. 100% digitaal
38 voltijdse teamleden
250 klanten geserviced in 2012

5. optimaliseren
statistieken
vettige vrijdag

7. 4 projectteams
specialisatie
support en marketing

8. open source
php, html, css, …
maatwerk op basis van standaarden

9. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum,
wie zijn wij?
libero quis vulputate ultricies, odio nibh pellentesque nunc, id dictum lacus
massa eget erat.
interactieve inhoud op het web
bpost: mystamp
toekomstvisie
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque vestibulum, libero quis
vulputate ultricies, odio nibh pellentesque
nunc, id dictum lacus massa eget erat.

10. interactieve inhoud
geschiedenis

11. http://evolutionofweb.appspot.com/

12. nood aan rich content
video animatie games UX/UI

13. FutureSplash
Macromedia
Adobe
interactieve inhoud
flash

14. evolutie

15. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum,
wie zijn wij?
libero quis vulputate ultricies, odio nibh pellentesque nunc, id dictum lacus
massa eget erat.
interactieve inhoud op het web
bpost: mystamp
toekomstvisie
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque vestibulum, libero quis
vulputate ultricies, odio nibh pellentesque
nunc, id dictum lacus massa eget erat.

16. je eigen foto op
interactieve inhoud
een postzegel

18. v1 en 2 2002 – 2011 flash

19. logische keuze voor Flash
>90% marktaandeel
performance
cross-browser

20. 2007: introductie iPhone

21. explosieve groei devices

24. rebranding bpost
vernieuwing in 2011
mystamp op tablets
haalbaarheid?

25. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
vs.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum,
libero quis vulputate ultricies, odio nibh pellentesque nunc, id dictum lacus
massa eget erat.
performance 1 versie
UX/UI onderhoudsvriendelijk
veel versies ondersteuning
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque vestibulum, libero quis
vulputate ultricies, odio nibh pellentesque
goedkeuringsproces experimenteel
nunc, id dictum lacus massa eget erat.

26. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
vs.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum,
libero quis vulputate ultricies, odio nibh pellentesque nunc, id dictum lacus
massa eget erat.
performance 1 versie
UX/UI onderhoudsvriendelijk
veel versies ondersteuning
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque vestibulum, libero quis
vulputate ultricies, odio nibh pellentesque
goedkeuringsproces experimenteel
nunc, id dictum lacus massa eget erat.

27. draft status

31. <input type=“file”>
niet ondersteund in iOS5 en lager

32. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum,
libero quis vulputate ultricies, odio nibh pellentesque nunc, id dictum lacus
massa eget erat.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque vestibulum, libero quis
vulputate ultricies, odio nibh pellentesque
nunc, id dictum lacus massa eget erat.

33. v3
2011
flash

35. v3 2012 HTML5

36. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum,
libero quis vulputate ultricies, odio nibh pellentesque nunc, id dictum lacus
massa eget erat.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque vestibulum, libero quis
vulputate ultricies, odio nibh pellentesque
nunc, id dictum lacus massa eget erat.

37. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
afbeeldingen van verschillende bronnen
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum,
libero quis vulputate ultricies, odio nibh pellentesque nunc, id dictum lacus
massa eget erat.
base64
verscheidenheid in API’s
grote afbeeldingen: performance Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque vestibulum, libero quis
vulputate ultricies, odio nibh pellentesque
nunc, id dictum lacus massa eget erat.

38. interactieve inhoud
in de toekomst

39. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum,
libero quis vulputate ultricies, odio nibh pellentesque nunc, id dictum lacus
massa eget erat.
one version to rule them all?
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque vestibulum, libero quis
vulputate ultricies, odio nibh pellentesque
nunc, id dictum lacus massa eget erat.

40. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum,
libero quis vulputate ultricies, odio nibh pellentesque nunc, id dictum lacus
massa eget erat.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque vestibulum, libero quis
vulputate ultricies, odio nibh pellentesque
nunc, id dictum lacus massa eget erat.

41. canvas support

42. canvas support

43. 8,9
oude browser-
versies

44. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum,
libero quis vulputate ultricies, odio nibh pellentesque nunc, id dictum lacus
massa eget erat.
wanneer dan wel?
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque vestibulum, libero quis
vulputate ultricies, odio nibh pellentesque
nunc, id dictum lacus massa eget erat.

45. einde 2014: meer mobiel dan vast

46. mobile first
vs. desktop first

47. druk op browserinnovatie is hoog
respect voor standaarden verbetert

48. kennis opbouwen amet, consectetur
Lorem ipsum dolor sit
adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum,
libero quis vulputate ultricies, odio nibh pellentesque nunc, id dictum lacus
massa eget erat.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque vestibulum, libero quis
vulputate ultricies, odio nibh pellentesque
nunc, id dictum lacus massa eget erat.

49. magdaendanny.be

50. TA’OR drawerize

51. bedankt!
Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum,
libero quis vulputate ultricies, odio nibh pellentesque nunc, id dictum lacus
massa eget erat.
Lorem ipsum dolor sit amet, consectetur
@janpersoons
adipiscing elit. Quisque vestibulum, libero quis
vulputate ultricies, odio nibh pellentesque
@tomvm
nunc, id dictum lacus massa eget erat.
www.intracto.com @intracto