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

Moderne Web Technologieën - KHLim

Avatar for Inventis Web Architects Inventis Web Architects
April 20, 2012
Technology
140
1

Moderne Web Technologieën - KHLim

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

Avatar for Inventis Web Architects

Inventis Web Architects

April 20, 2012

More Decks by Inventis Web Architects

See All by Inventis Web Architects
Pukkelpop.be, the continuous search for innovation.
Avatar for Inventis Web Architects inventis
0
140
Social Media
Avatar for Inventis Web Architects inventis
6
400
Informatie Architectuur & WireFraming
Avatar for Inventis Web Architects inventis
2
290
Verkoopproces
Avatar for Inventis Web Architects inventis
1
260
Inventis Stages
Avatar for Inventis Web Architects inventis
1
85
HTML5 & CSS3
Avatar for Inventis Web Architects inventis
5
680
Voorstelling Inventis MasterClass
Avatar for Inventis Web Architects inventis
0
230
Call to action - best practices.
Avatar for Inventis Web Architects inventis
1
130
Inventis Facebook Experiment
Avatar for Inventis Web Architects inventis
0
170

Other Decks in Technology

See All in Technology
AzureのIaC管理からログ調査まで、​随所に役立つ​SkillsとCustom-Instructions​ / Boosting IaC and Log Analysis with Skills
Avatar for AEON aeonpeople
0
230
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
6
18k
こんなアーキテクチャ図はいやだ / Anti-pattern in AWS Architecture Diagrams
Avatar for Naomi Yamasaki naospon
1
450
「SaaSの次の時代」に重要性を増すステークホルダーマネジメントの要諦 ～解像度を圧倒的に高めPdMの価値を最大化させる方法～
Avatar for KAKEHASHI kakehashi
PRO
1
600
AWS認定資格は本当に意味があるのか？
Avatar for NRI Netcom nrinetcom
PRO
2
270
ARIA Notifyについて
Avatar for ryokatsuse ryokatsuse
1
120
みんなで作るAWS Tips 100連発 (FinOps編)
Avatar for Ai Hayakawa schwrzktz
1
300
AIを共同作業者にして書籍を執筆する方法 / How to Write a Book with AI as a Co-Creator
Avatar for ama-ch ama_ch
2
130
最近の技術系の話題で気になったもの色々（IoT系以外も） / IoTLT 花見予定会（たぶんBBQ） @都立潮風公園バーベキュー広場
Avatar for you（@youtoy） you
PRO
1
240
Amazon S3 Filesについて
Avatar for Yuuki Yamashita yama3133
2
210
No Types Needed, Just Callable Method Check
Avatar for dak2 dak2
1
1.2k
AgentCore×VPCでの設計パターンn選と勘所
Avatar for Har1101 har1101
3
280

Featured

See All Featured
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
2k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
330
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
290
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
220
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Done Done
Avatar for chrislema chrislema
186
16k

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