Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Moderne Web Technologieën
Search
Tom Claus
April 20, 2012
Technology
1
89
Moderne Web Technologieën
Presentatie les 20/04/2012 aan de PHL/KHLim studenten grafische vormgeving
Tom Claus
April 20, 2012
Tweet
Share
More Decks by Tom Claus
See All by Tom Claus
Responsive Webdesign
tomclaus
4
230
Infosessions testgroup - New Platform
tomclaus
0
55
Modern Technologies
tomclaus
2
350
Social Media
tomclaus
5
200
Responsive & Content
tomclaus
2
140
VikingSpots NG
tomclaus
1
77
Budget Travelling
tomclaus
3
120
Inventis Stages
tomclaus
1
74
HTML5 & CSS3
tomclaus
2
380
Other Decks in Technology
See All in Technology
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
200
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
1.2k
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
540
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.6k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
6
57k
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
7
1.6k
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
350
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
370
一度 Expo の採用を断念したけど、 再度 Expo の導入を検討している話
ichiki1023
1
160
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
13
5k
Postman Flowsの基本 / Postman Flows Basics
yokawasa
1
100
Swiftの “private” を テストする / Testing Swift "private"
yutailang0119
0
120
Featured
See All Featured
Site-Speed That Sticks
csswizardry
3
370
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Thoughts on Productivity
jonyablonski
69
4.5k
Code Review Best Practice
trishagee
66
17k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
It's Worth the Effort
3n
184
28k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
What's in a price? How to price your products and services
michaelherold
244
12k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Transcript
Moderne Web Technologieën Tom Claus & Stijn Janssen
Stijn Janssen @stijnj
Tom Claus @tomclaus
None
None
None
None
None
• HTML5 Semantiek en Markup • CSS3 • Offline opslag
• Realtime communicatie • Javascript API’s • Multimedia Moderne Web Technologieën
• HTML5 Semantiek en Markup • CSS3 • Offline opslag
• Realtime communicatie • Javascript API’s • Multimedia Moderne Web Technologieën
None
HTML5?
HTML5 CSS3 Javascript SVG @font-face XML
Living Standard specificatie geen finale versie snelle implementatie -webkit -moz
Nieuwe elementen section article time header footer nav
None
<audio>
<video>
Adobe Flash
<canvas>
Adobe Flash
<svg>
forms required email date number tel search color range
forms required email datae number tel search color range
forms required email date number tel search color range
forms required email date number tel search color range
forms required email date number tel search color range
forms required email date number tel search color range
forms required email date number tel search color range
forms required email date number tel search color range
CSS3
FontFace
Border-Radius
Text-Shadow
Box-Shadow
Gradients
Gradients http://colorzilla.com/gradient-editor/
Transform
Transform
BoxModel
RGBA/HSLA
Animations
Selectors
Media Queries
Media Queries http://mediaqueri.es
Cross Browser? http://caniuse.com
Cross Browser? http://caniuse.com http://selectivizr.com
Cross Browser? http://caniuse.com http://selectivizr.com Respond.js
Javascript
None
44% 2006 9404
Een goede plugin? • Open source? GitHub? • Veel updates?
• Bugs? • Google: “[plugin] doensn’t work”
Een goede plugin? • Open source? GitHub? • Veel updates?
• Bugs? • Google: “[plugin] doensn’t work”
Een goede plugin? • Open source? GitHub? • Veel updates?
• Bugs? • Google: “[plugin] doensn’t work”
Een goede plugin? • Open source? GitHub? • Veel updates?
• Bugs? • Google: “[plugin] doensn’t work”
Onze favorieten! • html5validator • prettyPhoto • cycle
Onze favorieten! • html5validator • prettyPhoto • cycle
Onze favorieten! • html5validator • prettyPhoto • cycle
Geolocate API
Accelerometer
Casestudies
http://pukkelpop.be
http://inventis.be
Voordelen? • Meer mogelijkheden in de browser • Sneller laadtijden
• Scherpere layout
Nadelen? • Cross browser krijgen • Meer CSS-code / minder
overzicht
Vragen?
Bedankt! • Tom Claus •
[email protected]
• @tomclaus • Stijn
Janssen •
[email protected]
• @stijnj