Phát triển ứng dụng web – web programming chương 4 introduction to HTML5

HTML5/CSS3 Course Introduction to HTML5 Presenter: Msc Luong Tran Hy Hien, FIT of HCMUP HTML5 = HTML + CSS + JS API Contents • • • • HTML5 Structure HTML5 Audio/Video HTML5 Form HTML5 Canvas New and Updated HTML5 Elements HTML5 introduces 28 new elements: , , , , ,, , , , , , , , ,, , , , , ,, , , ,, , and HTML5 Structure Structure Structure Structure HTML5 offers new semantic elements to define different parts of a web page: • • • • • • • • • • • • • • The section element represents a generic section of a document or application A section, in this context, is a thematic grouping of content, typically with a heading • A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos 10 Tô màu Linear Gradient • var grd=context.createLinearGradient(startX, startY, endX, endY); • grd.addColorStop(offset, color); – – – – startX: tọa độ x điểm bắt đầu startY: tọa độ y điểm bắt đầu endX: tọa độ x điểm kết thúc endY: tọa độ y điểm kết thúc 88 Tô màu Gradient Radial • var grd=context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius); • grd.addColorStop(offset, color); 89 Một số vấn đề khác • Độ suốt – context.globalAlpha=[value]; • Cắt vùng chọn – context.clip(); • Xoay: – context.rotate(góc_xoay); • Co giãn: – context.scale(x, y); 90 Bài tập • Tạo hình chạy ngẫu nhiên theo thời gian (trang 26/Chương – Dynamic Graphics, Hello HTML5 & CSS3, version 2013 • corehtml5canvas.com/code-live/ 91 Canvas vs SVG • SVG can be made accessible, canvas can not • SVG paints DOM elements Canvas paints pixels • SVG can drain memory b/c of DOM usage • Canvas can drain CPU because of JS usage • Canvas be saved as an image SVG can be an image • SVG scales better 92 HTML5 Canvas Advanced 93 Transform • translate(x,y): di chuyển canvas tới tọa độ • rotate(angle): quay góc angle (+: chiều kim đồng hồ, -: ngược chiều) • scale(x, y): phóng to/thu nhỏ x lần chiều rộng y lần chiều dài • save(): lưu trạng thái • restore(): quay lui trạng thái trước 94 Transform • var centerX = 0, centerY = 0, radius = 50; // save state context.save(); // translate context context.translate(canvas.width / 2, canvas.height / 2); // scale context horizontally context.scale(2, 1); // draw circle which will be stretched into an oval context.beginPath(); context.arc(centerX, centerY, radius, 0, * Math.PI, false); // restore to original state context.restore(); // apply styling context.fillStyle = '#8ED6FF'; context.fill(); context.lineWidth = 5; context.strokeStyle = 'black'; context.stroke(); 95 Lấy tọa độ chuột function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; } 96 Animation – Hiệu ứng • Xóa vùng vẽ: context.clearRect(x, y, w, h) • Di chuyển: Kết hợp hàm thời gian – setInterval(callback, time); – setTimeout(callback, time); 97 Validating your HTML5 • https://validator.nu/ 98 Ngoài ra, HTML5 có … • HTML5 API's (Application Programming Interfaces) – – – – – – HTML Geolocation HTML Drag and Drop HTML Local Storage HTML Application Cache HTML Web Workers HTML SSE 99 Tham khảo • http://www.w3schools.com/html/html5_int ro.asp • http://www.html5canvastutorials.com • http://diveintohtml5.info/canvas.html • http://chimera.labs.oreilly.com/books/123 4000001654/index.html • http://www.nihilogic.dk/labs/ • http://www.w3schools.com/canvas/ 100 Q&A 101 THE END 102 [...]... (and demo of) HTML5 Audio • http://caniuse.com/audio • http://beta.theexpressiveweb.com/#! /html5- audio 32 Format Ogg Vorbis MP3 Wav IE 9 No Yes No Firefox 3.5 Yes No Yes Opera 10.5 Chrome 3.0 Safari 3.0 Yes Yes No No Yes Yes 33 Yes No Yes Support for (and demo of) HTML5 Video • HTML5 Video – http://caniuse.com/video – http://beta.theexpressiveweb.com/#! /html5- video 34 Format Ogg MPEG 4 WebM IE No 9.0+... Online 28 Ebook for HTML5 Media Audio/Video 29 HTML5 in Action on the Web 30 HTML4 == Plugins • Silverlight™ • Quicktime™ • Flash™ CODEC == COmpressor/DECompressor .. .HTML5 = HTML + CSS + JS API Contents • • • • HTML5 Structure HTML5 Audio/Video HTML5 Form HTML5 Canvas New and Updated HTML5 Elements HTML5 introduces 28 new elements:... http://www.w3schools.com/html/html_media.asp 27 Content • • • • • Introduction Audio tag Video tag Other multimedia Exercise & Online 28 Ebook for HTML5 Media Audio/Video 29 HTML5 in Action on the Web 30 HTML4 == Plugins • Silverlight™... classid="clsid:D27CDB6E-AE6D-11cf-96B8 -44 4553 540 000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab #version=9,0,16,0" width="320" height= "40 0">