Introduction with Examples HTML5

งานนำเสนอเรื่อง: "Introduction with Examples HTML5"— ใบสำเนางานนำเสนอ:

1 Introduction with Examples HTML5 http://msitrsu.somee.com

2 HTML5 Examples • Slides http://slides.html5rocks.com http://slides.html5rocks.com • Get Location http://html5demos.com/geo http://html5demos.com/geo • Image Gallery http://www.apple.com/html5/showcase/gallery http://www.apple.com/html5/showcase/gallery More: http://www.apple.com/html5http://www.apple.com/html5 • Canvas Video http://craftymind.com/factory/html5video/CanvasVideo.html http://craftymind.com/factory/html5video/CanvasVideo.html • Animation http://mrdoob.com/91/Ball_Pool http://mrdoob.com/91/Ball_Pool • Game http://www.kesiev.com/akihabara/demo/game-capman.html http://www.kesiev.com/akihabara/demo/game-capman.html • Interactive Comic http://www.­nevermindthebull­ets.­com http://www.­nevermindthebull­ets.­com

3 แหล่งเรียนรู้ศึกษา HTML5 ด้วยตัวเอง • ข้อมูล Web browser ที่รัน HTML5 ได้ ข้อมูล Web browser ที่รัน HTML5 ได้ • http://www.html5.in.th http://www.html5.in.th • เริ่มต้นเขียน HTML5 เริ่มต้นเขียน HTML5 • http://www.blognone.com/topics/html5 http://www.blognone.com/topics/html5 • http://html5demos.com/ http://html5demos.com/ • เริ่มต้นเขียน HTML5 ด้วย Dreamweaver CS5 เริ่มต้นเขียน HTML5 ด้วย Dreamweaver CS5 • HTML Standard HTML Standard • http://www.w3schools.com/html5/html5_reference.asp http://www.w3schools.com/html5/html5_reference.asp • http://www.designil.com http://www.designil.com • http://html5inth.com/ http://html5inth.com/ Click for Reference

4

5 header Home About Article title.. Text….. Section1 About us… All rights received HTML4 Page layout:

6 Defines a header for a section or page Defines navigation links Defines content aside from the page content Defines an article Defines a section Defines a footer for a section or page Title Home About Article title.. Text….. Section1 About us… All rights received HTML5 Page layout:

7 HTML5 Code วีดีโอ Audio + Video เล่นเสียง และ สดงวีดีโอ HTML5 Code เสียง

8 JavaScript Code var files = document.querySelectorAll('.dragout'); for (var i = 0, file; file = files[i]; ++i) { file.addEventListener('dragstart', function (e) { e.dataTransfer.setData('DownloadURL', this.dataset.downloadurl); }, false); } Drag File to Desktop ดึงไฟล์จากเว็บมาไว้ในเครื่อง HTML5 Code.mp3 file

9 Canvas Element ใช้ในการวาดภาพ เช่น สี่เหลี่ยม ทรงกลม HTML5 Code JavaScript Code ทรงกลม var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(70,18,15,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); JavaScript Code สี่เหลี่ยม var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle= "#FF0000" ; cxt.fillRect(0,0,150,75);

10 ContentEditable แก้ไข Content โดยการคลิกที่ข้อความ และสามารถแก้ไขแล้ว save ทันที HTML5 Code Testing ContentEditable JavaScript Code var editable = document.getElementById('editable'); addEvent(editable, 'blur', function () { localStorage.setItem('contenteditable', this.innerHTML); document.designMode = 'off'; }); addEvent(editable, 'focus', function () { document.designMode = 'on'; }); addEvent(document.getElementById('clear'), 'click', function () { localStorage.clear(); window.location = window.location; // refresh }); if (localStorage.getItem('contenteditable')) { editable.innerHTML = localStorage.getItem('contenteditable'); }

11 Possibly!.. Because: 1.is not completed. 2.Not fully browser support. How can we move forward ? • It is a good time for learning. • Build web pages HTML4/XHTML + html5 + JS • Building browser-specific apps. • Focusing on the mobile. Is it possible to build sites on HTML5 now?