Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Moderne Web Technologieën - KHLim

Inventis Web Architects
April 20, 2012
Technology
1
130

Moderne Web Technologieën - KHLim

Presentatie les 20/04/2012 aan de PHL/KHLim studenten grafische vormgeving.

Inventis Web Architects

April 20, 2012
Tweet

More Decks by Inventis Web Architects

See All by Inventis Web Architects
Pukkelpop.be, the continuous search for innovation.
inventis
0
130
Social Media
inventis
6
390
Informatie Architectuur & WireFraming
inventis
2
290
Verkoopproces
inventis
1
250
Inventis Stages
inventis
1
77
HTML5 & CSS3
inventis
5
670
Voorstelling Inventis MasterClass
inventis
0
230
Call to action - best practices.
inventis
1
120
Inventis Facebook Experiment
inventis
0
160

Other Decks in Technology

See All in Technology
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.5k
2.5Dモデルのすべて
yu4u
2
790
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
1.2k
Swiftの “private” を テストする / Testing Swift "private"
yutailang0119
0
120
OpenID BizDay#17 KYC WG活動報告（法人） / 20250219-BizDay17-KYC-legalidentity
oidfj
0
140
7日間でハッキングをはじめる本をはじめてみませんか？_ITエンジニア本大賞2025
nomizone
2
1.7k
開発スピードは上がっている…品質はどうする？ スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
2
2.4k
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
310
明日からできる！技術的負債の返済を加速するための実践ガイド～『ホットペッパービューティー』の事例をもとに～
recruitengineers
PRO
3
290
Postmanを使いこなす！2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
140
Culture Deck
optfit
0
390
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
2
320

Featured

See All Featured
Agile that works and the tools we love
rasmusluckow
328
21k
It's Worth the Effort
3n
184
28k
Being A Developer After 40
akosma
89
590k
Gamification - CAS2011
davidbonilla
80
5.1k
Become a Pro
speakerdeck
PRO
26
5.1k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Faster Mobile Websites
deanohume
306
31k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
BBQ
matthewcrist
86
9.5k
We Have a Design System, Now What?
morganepeng
51
7.4k
Building Your Own Lightsaber
phodgson
104
6.2k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k

Transcript

  1. Moderne Web Technologieën Tom Claus & Stijn Janssen

  2. Stijn Janssen @stijnj

  3. Tom Claus @tomclaus

  4. None
  5. None
  6. None
  7. None
  8. None

  9. • HTML5 Semantiek en Markup • CSS3 • Offline opslag

    • Realtime communicatie • Javascript API’s • Multimedia Moderne Web Technologieën

  10. • HTML5 Semantiek en Markup • CSS3 • Offline opslag

    • Realtime communicatie • Javascript API’s • Multimedia Moderne Web Technologieën
  11. None

  12. HTML5?

  13. HTML5 CSS3 Javascript SVG @font-face XML

  14. Living Standard specificatie geen finale versie snelle implementatie -webkit -moz

  15. Nieuwe elementen section article time header footer nav

  16. None

  17. <audio>

  18. <video>

  19. Adobe Flash

  20. <canvas>

  21. Adobe Flash

  22. <svg>

  23. forms required email date number tel search color range

  24. forms required email datae number tel search color range

  25. forms required email date number tel search color range

  26. forms required email date number tel search color range

  27. forms required email date number tel search color range

  28. forms required email date number tel search color range

  29. forms required email date number tel search color range

  30. forms required email date number tel search color range

  31. CSS3

  32. FontFace

  33. Border-Radius

  34. Text-Shadow

  35. Box-Shadow

  36. Gradients

  37. Gradients http://colorzilla.com/gradient-editor/

  38. Transform

  39. Transform

  40. BoxModel

  41. RGBA/HSLA

  42. Animations

  43. Selectors

  44. Media Queries

  45. Media Queries http://mediaqueri.es

  46. Cross Browser? http://caniuse.com

  47. Cross Browser? http://caniuse.com http://selectivizr.com

  48. Cross Browser? http://caniuse.com http://selectivizr.com Respond.js

  49. Javascript

  50. None

  51. 44% 2006 9404

  52. Een goede plugin? • Open source? GitHub? • Veel updates?

    • Bugs? • Google: “[plugin] doensn’t work”

  53. Een goede plugin? • Open source? GitHub? • Veel updates?

    • Bugs? • Google: “[plugin] doensn’t work”

  54. Een goede plugin? • Open source? GitHub? • Veel updates?

    • Bugs? • Google: “[plugin] doensn’t work”

  55. Een goede plugin? • Open source? GitHub? • Veel updates?

    • Bugs? • Google: “[plugin] doensn’t work”

  56. Onze favorieten! • html5validator • prettyPhoto • cycle

  57. Onze favorieten! • html5validator • prettyPhoto • cycle

  58. Onze favorieten! • html5validator • prettyPhoto • cycle

  59. Geolocate API

  60. Accelerometer

  61. Casestudies

  62. http://pukkelpop.be

  63. http://inventis.be

  64. Voordelen? • Meer mogelijkheden in de browser • Sneller laadtijden

    • Scherpere layout

  65. Nadelen? • Cross browser krijgen • Meer CSS-code / minder

    overzicht

  66. Vragen?

  67. Bedankt! • Tom Claus • [email protected] • @tomclaus • Stijn

    Janssen • [email protected] • @stijnj