DevDays 2011 Html5 sessie

•Download as PPTX, PDF•

0 likes•325 views

verycrispy

Technology Art & Photos

HTML 5: De praktische introductie Christian Peeters | Trainer | Master it Training

Agenda De HTML 5 specificatie Canvas Scalable Vector Graphics Audio / Video

Recommendation First Public Working Draft Working Draft Last Call Candidate Recommendation

Browser Ondersteuning “We learned a lot from IE6”

HTML 5 Elementen <!DOCTYPE html> <meta charset=“utf-8”> <header> <footer> <section> <article> <aside> <nav>

Layout HTML 4 <div id=“header”> <div id=“menu”> <div id=“mainContent”> <div class=“news”> <div class=“news”> <div class=“news”> <div id=“footer”>

Layout HTML 5 <header> <article class=“news”> Content <header> <nav> <div id=“mainContent”> <article class=“news”> <aside> < article class=“news”> <footer> < article class=“news”> <nav> <footer>

Canvas Scriptable bitmap Tekenen van vormen en pixels “fire & forget”

Scalable Vector Graphics Vector Retained mode (vs. immediate mode) Output van diverse tools DOM CSS Javascript

Support Check function supportsSVG() { return !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', "svg").createSVGRect; } SVG plugin

Audio & Video <audio src= preload= autoplay loop controls > … </audio> <video src=urlnaar het audio of video bestand width=breedte van de video height=hoogte van de video poster=urlnaareen thumbnail afbeelding preload= (none/auto) starten met downloaden autoplay direct beginnen met afspelen loopblijvenherhalenvanaf het begin controls toon start/stop/pause en tijdlijn > … </video>

Ondersteuning Audio installatie Video zalverdwijnen

Fall-back <video autoplay autobuffer="true" width="400px" height="300px"> <source src="vid-hi.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' media="(min-device-width: 800px)"> <source src="vid-lo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="vid.ogg" type='video/ogg; codecs="theora, vorbis"'> fall-back content voor browsers die geen video-element ondersteunen </video>

Mime-types registratie IIS via management console IIS Express via Web.config <system.webServer> <staticContent> <mimeMap fileExtension=".webm" mimeType="video/webm" /> <mimeMap fileExtension=".ogg" mimeType="application/ogg"/> <mimeMap fileExtension=".ogv" mimeType="video/ogg" /> <mimeMap fileExtension=".mp4" mimeType="video/mp4" /> <mimeMap fileExtension=".m4v" mimeType="video/m4v" /> </staticContent> </system.webServer>

$Support check function supports_video() { return !!document.createElement('video').canPlayType; }$

Modernizr Gratis javascript library Support checks ,[object Object]

Featured

2024 State of Marketing Report – by HubspotMarius Sescu

Everything You Need To Know About ChatGPTExpeed Software

Product Design Trends in 2024 | Teenage EngineeringsPixeldarts

How Race, Age and Gender Shape Attitudes Towards Mental HealthThinkNow

AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork

Skeleton Culture CodeSkeleton Technologies

PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley

Content Methodology: A Best Practices Report (Webinar)contently

How to Prepare For a Successful Job Search for 2024Albert Qian

Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)

Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal

5 Public speaking tips from TED - Visualized summarySpeakerHub

ChatGPT and the Future of Work - Clark Boyd Clark Boyd

Getting into the tech field. what next Tessa Mero

Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray

How to have difficult conversations Rajiv Jayarajah, MAppComm, ACC

Introduction to Data ScienceChristy Abraham Joy

Time Management & Productivity - Best PracticesVit Horky

The six step guide to practical project managementMindGenius

Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36

Featured (20)

2024 State of Marketing Report – by Hubspot

Everything You Need To Know About ChatGPT

Product Design Trends in 2024 | Teenage Engineerings

How Race, Age and Gender Shape Attitudes Towards Mental Health

AI Trends in Creative Operations 2024 by Artwork Flow.pdf

Skeleton Culture Code

PEPSICO Presentation to CAGNY Conference Feb 2024

Content Methodology: A Best Practices Report (Webinar)

How to Prepare For a Successful Job Search for 2024

Social Media Marketing Trends 2024 // The Global Indie Insights

Trends In Paid Search: Navigating The Digital Landscape In 2024

5 Public speaking tips from TED - Visualized summary

ChatGPT and the Future of Work - Clark Boyd

Getting into the tech field. what next

Google's Just Not That Into You: Understanding Core Updates & Search Intent

How to have difficult conversations

Introduction to Data Science

Time Management & Productivity - Best Practices

The six step guide to practical project management

Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...

DevDays 2011 Html5 sessie

2. HTML 5: De praktische introductie Christian Peeters | Trainer | Master it Training

3. Agenda De HTML 5 specificatie Canvas Scalable Vector Graphics Audio / Video

4. HTML 5

5. Recommendation First Public Working Draft Working Draft Last Call Candidate Recommendation

6. Browser Ondersteuning “We learned a lot from IE6”

7. HTML 5 Elementen <!DOCTYPE html> <meta charset=“utf-8”> <header> <footer> <section> <article> <aside> <nav>

8. Layout HTML 4 <div id=“header”> <div id=“menu”> <div id=“mainContent”> <div class=“news”> <div class=“news”> <div class=“news”> <div id=“footer”>

9. Layout HTML 5 <header> <article class=“news”> Content <header> <nav> <div id=“mainContent”> <article class=“news”> <aside> < article class=“news”> <footer> < article class=“news”> <nav> <footer>

10. Canvas Scriptable bitmap Tekenen van vormen en pixels “fire & forget”

11. Scalable Vector Graphics Vector Retained mode (vs. immediate mode) Output van diverse tools DOM CSS Javascript

12. Support Check function supportsSVG() { return !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', "svg").createSVGRect; } SVG plugin

13. Audio & Video <audio src= preload= autoplay loop controls > … </audio> <video src=urlnaar het audio of video bestand width=breedte van de video height=hoogte van de video poster=urlnaareen thumbnail afbeelding preload= (none/auto) starten met downloaden autoplay direct beginnen met afspelen loopblijvenherhalenvanaf het begin controls toon start/stop/pause en tijdlijn > … </video>

14. Ondersteuning Audio installatie Video zalverdwijnen

15. Fall-back <video autoplay autobuffer="true" width="400px" height="300px"> <source src="vid-hi.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' media="(min-device-width: 800px)"> <source src="vid-lo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="vid.ogg" type='video/ogg; codecs="theora, vorbis"'> fall-back content voor browsers die geen video-element ondersteunen </video>

16. Mime-types registratie IIS via management console IIS Express via Web.config <system.webServer> <staticContent> <mimeMap fileExtension=".webm" mimeType="video/webm" /> <mimeMap fileExtension=".ogg" mimeType="application/ogg"/> <mimeMap fileExtension=".ogv" mimeType="video/ogg" /> <mimeMap fileExtension=".mp4" mimeType="video/mp4" /> <mimeMap fileExtension=".m4v" mimeType="video/m4v" /> </staticContent> </system.webServer>

17. Support check function supports_video() { return !!document.createElement('video').canPlayType; }

18.

19. Inline SVG

20. Audio / Video

21. CSS 3

22. Geolocation

23. Localstorage

24. Drag & drop

25.

26. Vragen ?

27. Links blog.master-it.nl www.w3.org/TR/html5/ www.Modernizer.com www.beautyoftheweb.com/