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
82
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
210
Infosessions testgroup - New Platform
tomclaus
0
46
Modern Technologies
tomclaus
2
350
Social Media
tomclaus
5
190
Responsive & Content
tomclaus
2
130
VikingSpots NG
tomclaus
1
69
Budget Travelling
tomclaus
3
110
Inventis Stages
tomclaus
1
66
HTML5 & CSS3
tomclaus
2
380
Other Decks in Technology
See All in Technology
サーバー間 GraphQL と webmock-graphql の話 / server-to-server graphql and webmock-graphql
qsona
2
190
JAWS-UG Bedrock Claude Night
yamahiro
3
610
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
250
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
2
240
GrafanaMeetup_AmazonManagedGrafanaのアクセス制御機能とマルチテナント環境下でのアクセス制御について
daitak
0
260
APIファーストなプロダクトマネジメントの実践 〜SaaSus Platformでの例〜 / "Practicing API-First Product Management - An Example with SaaSus Platform
oztick139
0
110
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
220
競技としてのKaggle、役に立つKaggle
yu4u
4
1.9k
ServiceNow Knowledge Learning Rise up
manarobot
0
210
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
200
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
3
570
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
1k
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
28
6.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
A designer walks into a library…
pauljervisheath
200
23k
Docker and Python
trallard
34
2.7k
The Invisible Side of Design
smashingmag
294
49k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
A Tale of Four Properties
chriscoyier
151
22k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
A better future with KSS
kneath
231
16k
Fireside Chat
paigeccino
21
2.6k
Code Review Best Practice
trishagee
55
15k
Automating Front-end Workflow
addyosmani
1356
200k
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