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

Moderne Web Technologieën

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
150
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
AIチャット検索改善の3週間
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
2
140
iAEONの段階的リアーキテクト戦略 / iAEON's_Gradual_Re-architecture_Strategy
Avatar for AEON aeonpeople
0
230
Agent Skills設計で柔軟性と硬さのバランスが難しい話
Avatar for nassy nassy20
0
140
SONiC Scale-Up Working Group から探る Scale-UpやUltraEthernet機能の実装方法
Avatar for ebiken ebiken
PRO
2
410
いまさら聞けない「仕様駆動開発入門」 〜AI活用時代の開発プロセスを考える〜
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
2
160
【Snowflake Summit 2026 Recap!!】Snowflake Summit Deep Dive: Security & Governance
Avatar for Civitaspo civitaspo
1
270
就職⽀援サービスにおけるキャリアアドバイザーのシフトスケジューリング
Avatar for Recruit recruitengineers
PRO
1
150
AIAU_UMEMOGU_ninomiya_slide
Avatar for ninomiya ninomiya_ii
0
240
SteampipeとExcel Power QueryでAWS構成定義書の作成を自動化する
Avatar for jhashimoto jhashimoto
0
160
AWS Security Agent といっしょに脅威モデリングをやってみよう
Avatar for amarelo_n24 amarelo_n24
1
180
2026TECHFRESH畢業分享會 - 葬送的通靈師：化系統與用戶雜訊成行動訊號
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1.3k
手塩にかけりゃいいってもんじゃない
Avatar for ming ming_ayami
0
610

Featured

See All Featured
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.2k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
210
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
440
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.6k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Abbi's Birthday
Avatar for Violet Bock coloredviolet
2
8.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
410
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
390
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
230
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.2k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.5k

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