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

Moderne Web Technologieën - KHLim

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
410
Informatie Architectuur & WireFraming
Avatar for Inventis Web Architects inventis
2
300
Verkoopproces
Avatar for Inventis Web Architects inventis
1
270
Inventis Stages
Avatar for Inventis Web Architects inventis
1
87
HTML5 & CSS3
Avatar for Inventis Web Architects inventis
5
690
Voorstelling Inventis MasterClass
Avatar for Inventis Web Architects inventis
0
240
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
Multi-Agent並列開発を 安全に回すための技術 / Technology for Safely Multi-Agent Parallel Development
Avatar for philomagi tooppoo
0
210
Deep Data Security 機能解説
Avatar for oracle4engineer oracle4engineer
PRO
2
230
AIペネトレーションテスト・ セキュリティ検証「AgenticSec」紹介資料
Avatar for Sho Nakatani laysakura
2
7.7k
サイバーエージェントにおけるAI推進戦略と変革への取り組み
Avatar for shotaTsuge shotatsuge
0
600
AI 不只幫你寫 Code： 當專案從 300 暴增到 1500， 我們如何撐住 DevOps
Avatar for Bo-Yi Wu appleboy
0
270
BPaaSで進むAIオペレーションの現在地 AI実装が効く領域とスケーラビリティの選定と実装
Avatar for KentaroFujii kentarofujii
0
210
組織における AI-DLC 実践
Avatar for ASKUL Engineer askul
0
140
Amazon Redshift zero-ETL 統合を活用した軽量なマルチプロダクトデータ可視化基盤 / Lightweight Multi-Product Data Visualization with Amazon Redshift Zero-ETL
Avatar for 株式会社カミナシ kaminashi
0
100
徹底討論！ECS vs EKS！
Avatar for 高棹大樹 daitak
3
1.8k
水を運ぶ人としてのリーダーシップ
Avatar for izumii19 izumii19
4
1k
ご挨拶「10周年を迎える共創ラボのこれまでとこれから」
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
140
From Prompt Engineering to Loop Engineering
Avatar for shibuiwilliam shibuiwilliam
1
260

Featured

See All Featured
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.3k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
590
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
320
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
260
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.8k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.8k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.5k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
850
Side Projects
Avatar for Sacha Greif sachag
455
43k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
450

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