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

Moderne Web Technologieën

Avatar for Tom Claus Tom Claus
April 20, 2012
Technology
100
1

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

More Decks by Tom Claus

See All by Tom Claus
Responsive Webdesign
Avatar for Tom Claus tomclaus
4
240
Infosessions testgroup - New Platform
Avatar for Tom Claus tomclaus
0
63
Modern Technologies
Avatar for Tom Claus tomclaus
2
370
Social Media
Avatar for Tom Claus tomclaus
5
210
Responsive & Content
Avatar for Tom Claus tomclaus
2
160
VikingSpots NG
Avatar for Tom Claus tomclaus
1
84
Budget Travelling
Avatar for Tom Claus tomclaus
4
130
Inventis Stages
Avatar for Tom Claus tomclaus
1
82
HTML5 & CSS3
Avatar for Tom Claus tomclaus
2
400

Other Decks in Technology

See All in Technology
41歳でAWSが好きすぎてITエンジニアになったおっさんの話
Avatar for Yuuki Yamashita yama3133
1
720
Multicaで30個のミニプロジェクトをAIエージェント運用して見えてきたこと
Avatar for eiei114 eiei114
1
610
文字起こし基盤の信頼性
Avatar for abnoumaru abnoumaru
0
100
AI Coding Agent時代のcdk-nagガードレール 〜組織ルールを強制CIで守り抜く設計の挑戦〜
Avatar for みずほリサーチ&テクノロジーズ株式会社 先端技術研究部 mhrtech
3
490
設計レビューとAIハーネスで向き合う AIが生み出した新しいボトルネックの対処法 / Design Reviews and AI Harnesses Against New Bottlenecks Created by AI
Avatar for Nstock nstock
3
410
伝票作成AIエージェントを支える、LLMOpsとインフラの選択肢 / AICon2026_takeda
Avatar for Rakus_Dev rakus_dev
0
260
Oracle Exadata Database Service on Cloud@Customer X11M (ExaDB-C@C) サービス概要
Avatar for oracle4engineer oracle4engineer
PRO
2
8.5k
「顧客の声を聞かなければ何も始まらない」 ── 顧客の声から生まれた『AI返信補助機能』の開発プロセス / AICon2026_shikata_imai
Avatar for Rakus_Dev rakus_dev
0
260
AI時代におけるテストの基礎の再定義 / Rethinking the Fundamentals of Testing in the AI Era
Avatar for Matsu mineo_matsuya
7
2.7k
AI x 開発生産性を取り巻く予算戦略と投資対効果
Avatar for Masato Ishigaki / 石垣雅人 i35_267
7
2.8k
Aurora MySQL 8.4リリース！ Rubyistが備えること / what-rubyist-should-prepare-for-aurora-mysql-8-4
Avatar for Yuki Fukuma fkmy
0
400
SoccerMaster: A Vision Foundation Model for Soccer Understanding
Avatar for Kazuyuki Miyazawa kzykmyzw
0
160

Featured

See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
970
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
470
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
550
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.3k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1.1k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
270
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
420
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
67k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
460
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
290
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
410

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