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

Moderne Web Technologieën

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Tom Claus Tom Claus
April 20, 2012
Technology
1
94

Moderne Web Technologieën

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

Avatar for Tom Claus

Tom Claus

April 20, 2012
Tweet

More Decks by Tom Claus

See All by Tom Claus
Responsive Webdesign
Avatar for Tom Claus tomclaus
4
230
Infosessions testgroup - New Platform
Avatar for Tom Claus tomclaus
0
58
Modern Technologies
Avatar for Tom Claus tomclaus
2
360
Social Media
Avatar for Tom Claus tomclaus
5
210
Responsive & Content
Avatar for Tom Claus tomclaus
2
150
VikingSpots NG
Avatar for Tom Claus tomclaus
1
80
Budget Travelling
Avatar for Tom Claus tomclaus
4
120
Inventis Stages
Avatar for Tom Claus tomclaus
1
77
HTML5 & CSS3
Avatar for Tom Claus tomclaus
2
390

Other Decks in Technology

See All in Technology
What's new in Go 1.26?
Avatar for Koya IWAMURA ciarana
2
280
男（監査）はつらいよ - Policy as CodeからAIエージェントへ
Avatar for Kengo Suzuki ken5scal
5
710
クラウド時代における一時権限取得
Avatar for krrrr38 krrrr38
1
150
三菱UFJ銀行におけるエンタープライズAI駆動開発のリアル / Enterprise AI_Driven Development at MUFG Bank: The Real Story
Avatar for 三菱UFJインフォメーションテクノロジー株式会社 muit
10
20k
「ストレッチゾーンに挑戦し続ける」ことって難しくないですか？ メンバーの持続的成長を支えるEMの環境設計
Avatar for SansanTech sansantech
PRO
1
210
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
5
18k
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
44k
Secure Boot 2026 - Aggiornamento dei certificati UEFI e piano di adozione in azienda
Avatar for Intune Italian User Group memiug
0
130
Master Dataグループ紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
4.4k
Security Diaries of an Open Source IAM
Avatar for Alexander Schwartz ahus1
0
190
Kaggleの経験が実務にどう活きているか / kaggle_findy
Avatar for Sansan R&D sansan_randd
1
340
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
4
22k

Featured

See All Featured
Amusing Abliteration
Avatar for ianozsvald ianozsvald
0
120
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
150
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.5k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
9
36k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
180
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
75
5.1k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
240
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.5k
Claude Code のすすめ
Avatar for schroneko schroneko
67
220k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
86

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