• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5, makkelijker kunnen we het niet maken!
 

HTML5, makkelijker kunnen we het niet maken!

on

  • 798 views

Introduction into HTML5

Introduction into HTML5

Statistics

Views

Total Views
798
Views on SlideShare
797
Embed Views
1

Actions

Likes
0
Downloads
8
Comments
0

1 Embed 1

https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5, makkelijker kunnen we het niet maken! HTML5, makkelijker kunnen we het niet maken! Presentation Transcript

    • HTML makkelijker kunnen we het niet maken!Wednesday, February 1, 12
    • HenkWednesday, February 1, 12
    • HenkWednesday, February 1, 12
    • HenkWednesday, February 1, 12
    • http://www.apple.com/hotnews/thoughts-on-flash/Wednesday, February 1, 12
    • http://forums.silverlight.net/p/230502/562077.aspxWednesday, February 1, 12
    • HTML5 ~= + +Wednesday, February 1, 12
    • HTML5 ~= HTML + +Wednesday, February 1, 12
    • HTML5 ~= HTML + CSS +Wednesday, February 1, 12
    • HTML5 ~= HTML + CSS + JSWednesday, February 1, 12
    • HTML5 features SemanticsWednesday, February 1, 12
    • HTML5 features Semantics CSS3Wednesday, February 1, 12
    • HTML5 features Semantics CSS3 MultimediaWednesday, February 1, 12
    • HTML5 features Semantics Graphics & 3D CSS3 MultimediaWednesday, February 1, 12
    • HTML5 features Semantics Graphics & 3D CSS3 Device Access MultimediaWednesday, February 1, 12
    • HTML5 features Semantics Graphics & 3D CSS3 Device Access Multimedia Offline & StorageWednesday, February 1, 12
    • HTMLWednesday, February 1, 12
    • HTML (1.0) 1991 HTML Tags specificationWednesday, February 1, 12
    • HTML (1.0) 1991 HTML Tags specification 1993 HTML specificationWednesday, February 1, 12
    • HTML 2.0, 3.0 1995 HTML 2.0Wednesday, February 1, 12
    • HTML 2.0, 3.0 1995 HTML 2.0 1995 HTML 3.0, proposalWednesday, February 1, 12
    • HTML 3.2, 4.0 1997 HTML 3.2 ( W3C )Wednesday, February 1, 12
    • HTML 3.2, 4.0 1997 HTML 3.2 ( W3C ) 1997 HTML 4.0Wednesday, February 1, 12
    • HTML 4.01, XHTML, WEB 2.0 1999 HTML 4.01Wednesday, February 1, 12
    • HTML 4.01, XHTML, WEB 2.0 1999 HTML 4.01 2000 XHTML 1.0Wednesday, February 1, 12
    • HTML 4.01, XHTML, WEB 2.0 1999 HTML 4.01 2000 XHTML 1.0 2001 XHTML 1.1Wednesday, February 1, 12
    • HTML 4.01, XHTML, WEB 2.0 1999 HTML 4.01 2000 XHTML 1.0 2001 XHTML 1.1 2004 WEB 2.0Wednesday, February 1, 12
    • WHATWG MozillaWednesday, February 1, 12
    • Wednesday, February 1, 12
    • HTML5 2008 HTML5 working draft W3CWednesday, February 1, 12
    • HTML5 2008 HTML5 working draft W3C 2009 XHTML 2.0 droppedWednesday, February 1, 12
    • HTML5 2012 Candidate RecommendationWednesday, February 1, 12
    • HTML5 2012 Candidate Recommendation 2022 Proposed RecommendationWednesday, February 1, 12
    • HTMLWednesday, February 1, 12
    • SemanticsWednesday, February 1, 12
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML >Wednesday, February 1, 12
    • <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta charset=utf-8>Wednesday, February 1, 12
    • <script src=”foo.js” > </script> <link href=”foo.css”></link>Wednesday, February 1, 12
    • <div id=”header”> <div id=”nav”> <div id=”article”> <div id=”sidebar”> <div id=”footer”>Wednesday, February 1, 12
    • <header> <nav> <section> <sidebar> <article> <footer>Wednesday, February 1, 12
    • MicrodataWednesday, February 1, 12
    • <section itemscope> <article id="pizza-new-york" itemtype="http://data-vocabulary.org/Product"> <header> <h1 itemprop="name”>New York Pizza Suprema</h1> </header> <p itemprop="description">The best pizzaria of New York... > </article> </section>Wednesday, February 1, 12
    • MultimediaWednesday, February 1, 12
    • <video src=”movie.ogg” /> <video src=”movie.ogg” controls/>Wednesday, February 1, 12
    • <video controls> <source src=”movie.mp4” /> <source src=”movie.ogg” /> </video>Wednesday, February 1, 12
    • safari chrome IE9 firefox MP4 x x x H.264 x x WebM x x Ogg x xWednesday, February 1, 12
    • Demo http://html5demos.com/videoWednesday, February 1, 12
    • Web FormsWednesday, February 1, 12
    • No javascriptWednesday, February 1, 12
    • No javascript Client side validationWednesday, February 1, 12
    • No javascript Client side validation different input types like email, url, nummerWednesday, February 1, 12
    • No javascript Client side validation different input types like email, url, nummer color picker, date pickerWednesday, February 1, 12
    • No javascript Client side validation different input types like email, url, nummer color picker, date pickerWednesday, February 1, 12
    • Email Address: <input type="email" name="email" requiredWednesday, February 1, 12
    • Email Address: <input type="email" name="email" required placeholder="Enter a valid email address">Wednesday, February 1, 12
    • Email Address: <input type="email" name="email" required placeholder="Enter a valid email address">Wednesday, February 1, 12
    • Age: <input type="number" size="6" name="age" min="18" max="99" value="21"><br>Wednesday, February 1, 12
    • Age: <input type="number" size="6" name="age" min="18" max="99" value="21"><br> Satisfaction: <input type="range" size="2" name="satisfaction" min="1" max="5" value="3">Wednesday, February 1, 12
    • Age: <input type="number" size="6" name="age" min="18" max="99" value="21"><br> Satisfaction: <input type="range" size="2" name="satisfaction" min="1" max="5" value="3">Wednesday, February 1, 12
    • Device AccessWednesday, February 1, 12
    • GeolocationWednesday, February 1, 12
    • Geolocation Drag & DropWednesday, February 1, 12
    • Geolocation Drag & Drop Speech inputWednesday, February 1, 12
    • Geolocation Drag & Drop Speech input Device orientationWednesday, February 1, 12
    • GeolocationWednesday, February 1, 12
    • Wednesday, February 1, 12
    • if (navigator.geolocation) {   navigator.geolocation.getCurrentPosition(function (position) {     var latLng = new google.maps.LatLng(         position.coords.latitude, position.coords.longitude);     var marker = new google.maps.Marker({position: latLng, map: map});     map.setCenter(latLng);   }, errorHandler); }Wednesday, February 1, 12
    • demo http://html5demos.com/geoWednesday, February 1, 12
    • Drag & Drop Events: dragover, dragenter, dropWednesday, February 1, 12
    • Drag & Drop Events: dragover, dragenter, drop event.transferData contains text and/ or imageWednesday, February 1, 12
    • Drag & Drop Events: dragover, dragenter, drop event.transferData contains text and/ or image links & images draggable by defaultWednesday, February 1, 12
    • Drag & Drop Events: dragover, dragenter, drop event.transferData contains text and/ or image links & images draggable by default other elements : draggable=”true”Wednesday, February 1, 12
    • demo http://html5demos.com/dragWednesday, February 1, 12
    • Device orientation window.addEventListener(deviceorientation , function(event) {   var a = event.alpha;   var b = event.beta;   var g = event.gamma; }, false); http://slides.html5rocks.com/#slide-orientationWednesday, February 1, 12
    • File API var reader = new FileReader(); reader.readAsDataURL(e.dataTransfer.files[0]);Wednesday, February 1, 12
    • demoWednesday, February 1, 12
    • Speech input <input type="text" x-webkit-speech /> http://slides.html5rocks.com/#speech-inputWednesday, February 1, 12
    • Wednesday, February 1, 12
    • Graphics & 3DWednesday, February 1, 12
    • Canvas 2D drawing platform Bitmap systemWednesday, February 1, 12
    • When to use?Wednesday, February 1, 12
    • data visualisationWednesday, February 1, 12
    • animated graphicsWednesday, February 1, 12
    • gamesWednesday, February 1, 12
    • <canvas height=”600” width=”800”></canvas>Wednesday, February 1, 12
    • (0,0) x yWednesday, February 1, 12
    • canvas 2d rendering contextWednesday, February 1, 12
    • var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d");Wednesday, February 1, 12
    • ctx.fillStyle = ‘rgb(65, 60, 50)’; ctx.fillRect(25, 50, 100, 100); ctx.strokeStyle = ‘rgb(65, 60, 50)’; ctx.strokeRect(130, 500, 40, 70);Wednesday, February 1, 12
    • Wednesday, February 1, 12
    • lineTo(x,y) rect(x,y,w,h) arc(x,y, radius, startAngle, endAngle, anticlockwise)Wednesday, February 1, 12
    • demo http://hakim.se/experiments/html5/origami/Wednesday, February 1, 12
    • WebGL gl = canvas.getContext("moz-webgl"); // Firefox     gl = canvas.getContext("webkit-3d"); // Safari or ChromeWednesday, February 1, 12
    • demo http://www.zygotebody.com/#nav=1.61,126.68,176.3Wednesday, February 1, 12
    • CSS3Wednesday, February 1, 12
    • CSS selectorsWednesday, February 1, 12
    • CSS selectors ColumnsWednesday, February 1, 12
    • CSS selectors Columns Rounded CornersWednesday, February 1, 12
    • CSS selectors Columns Rounded Corners GradientsWednesday, February 1, 12
    • CSS selectors Columns Rounded Corners GradientsWednesday, February 1, 12
    • CSS selectors Shadows Columns Rounded Corners GradientsWednesday, February 1, 12
    • CSS selectors Shadows Columns Transitions Rounded Corners GradientsWednesday, February 1, 12
    • CSS selectors Shadows Columns Transitions Rounded Corners Transforms GradientsWednesday, February 1, 12
    • CSS selectors Shadows Columns Transitions Rounded Corners Transforms GradientsWednesday, February 1, 12
    • CSS Selectors .row:nth-child(even) {   background: #dde; } .row:nth-child(odd) {   background: white; }Wednesday, February 1, 12
    • Specific attributes input[type="text"] {   background: #eee; }Wednesday, February 1, 12
    • Negation :not(.box) {   color: #00c; }             :not(span) {   display: block; }  Wednesday, February 1, 12
    • Columns -webkit-column-count: 2; -webkit-column-rule: 1px solid #bbb; -webkit-column-gap: 2em; http://slides.html5rocks.com/#css-columnsWednesday, February 1, 12
    • Rounded Corners box: border-radius: 22px;Wednesday, February 1, 12
    • Gradients background: -webkit-gradient(linear, left top, left bottom,   from(#00abeb), to(white), color-stop(0.5, white), color-stop(0.5, #66cc00))Wednesday, February 1, 12
    • demo http://www.css3maker.com/css-gradient.htmlWednesday, February 1, 12
    • Shadows text-shadow:   rgb(5, 5, 5, #000000) box-shadow: rgb(5, 5, 5, #000000)Wednesday, February 1, 12
    • demo http://www.css3maker.com/text-shadow.htmlWednesday, February 1, 12
    • Transitions & Transforms http://www.css3maker.com/css3-transform.htmlWednesday, February 1, 12
    • Text http://mrdoob.com/projects/chromeexperiments/google_gravity/ http://mrdoob.com/projects/chromeexperiments/google_sphere/Wednesday, February 1, 12
    • Offline & StorageWednesday, February 1, 12
    • Offline Web Applications application caching offline storageWednesday, February 1, 12
    • application caching HTML5 online/offline detection caching resources manifestWednesday, February 1, 12
    • navigator.onLine() addEventListener("online", function () {...} addEventListener("offline", function () {...} http://html5demos.com/offlineWednesday, February 1, 12
    • appCache file CACHE MANIFEST # manifest version 1.0.1 # Files to cache /html5/src/logic.js /html5/src/style.css /html5/src/background.png # Use from network if available NETWORK: / # Fallback content FALLBACK: / fallback.htmlWednesday, February 1, 12
    • <!DOCTYPE html> <html manifest="offline.appcache"> <head> <title>HTML5 Application Cache Rocks!</title>Wednesday, February 1, 12
    • Offline Storage Web StorageWednesday, February 1, 12
    • Offline Storage Web Storage Web Database StorageWednesday, February 1, 12
    • localStorage & sessionStorage window.localStorage.setItem(value, area.value); window.localStorage.setItem(timestamp, (new Date()).getTime()); textarea.value = window.localStorage.getItem(value);Wednesday, February 1, 12
    • IndexedDB Object Store asynchronous transactionsWednesday, February 1, 12
    • var db = todoDB.indexedDB.db; var trans = db.transaction([todo], IDBTransaction.READ_WRITE); var store = trans.objectStore(todo); var data = { "text": todoText, // todoText should be visible here "timeStamp": new Date().getTime() }; var request = store.put(data); request.onsuccess = function(e) { todoDB.indexedDB.getAllTodoItems(); }; request.onerror = function(e) { console.log("Error Adding: ", e); }; http://www.html5rocks.com/en/tutorials/ webdatabase/websql-indexeddb/Wednesday, February 1, 12
    • LearnWednesday, February 1, 12
    • http://diveintohtml5.info/Wednesday, February 1, 12
    • http://html5doctor.com/Wednesday, February 1, 12
    • http://www.html5rocks.com/en/Wednesday, February 1, 12
    • http://caniuse.com/Wednesday, February 1, 12
    • http://html5demos.com/Wednesday, February 1, 12
    • http://www.initializr.com/Wednesday, February 1, 12
    • http://www.processing.jsWednesday, February 1, 12