Bài giảng Phát triển ứng dụng Web-Web Programming - Chương 4: Introduction to HTML5 - Lương Trần Hy Hiến

HTML5/CSS3 Course Introduction to HTML5 Presenter: Msc. Luong Tran Hy Hien, FIT of HCMUP. 1 HTML5 = HTML + CSS + JS API 2 Contents • HTML5 Structure • HTML5 Audio/Video • HTML5 Form • HTML5 Canvas 3 New and Updated HTML5 Elements HTML5 introduces 28 new elements: , , , , ,, , , , , , , , ,, , , , , ,, , , ,, , and 4 HTML5 Structure 5 Structure 6 Structure 7 Structure HTML5 offers new semantic elements to define different parts of a web page: • • • • • • • • • • • • 8 • • 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 9 • 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 • The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines 11 • The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like 12 • The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user- submitted comment, an interactive widget or gadget, or any other independent item of content.. 13 • The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links 14 Block semantic element • • 15 • The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. 16 • Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc 17 Inline semantic element • • • • 18 • Defines marked/highlighted text 19 • Defines a date/time 20 • Defines a scalar measurement within a known range (a gauge) 21 • The progress element provides a simple and effective way for a web designer to notify a user of their progress regarding a specified task 22 Lab: frames layers Open new page in Dreamweaver 100px 1/3 2/3 23 Lab: frames layers No need for ids here; use HTML5 tags Older browsers need to know block elements 24 Lab: frames layers calc() defines position of each layer Space in command is important New with CSS3; not universally supported yet calc(33.33% - 5px); 33.33% 66.67% - 5px - 5px 25 Lab: frames layers Finish out the lab headernavsection{ { { display: block; position: absolute; top: 10px120px;; right: 10pxcalc;(66.67% + 5px); leftbottom: 10px: 10px; ; 33.33% 66.67% heightleft: :10pxcalc100px;(33.33%; + 5px); - 5px - 5px background-color: #EEEEFF#EEFFEE#FFEEEE; } 26 HTML Media 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™ • Quicktime™ CODEC == COmpressor/DECompressor • Flash™ <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=" #version=9,0,16,0" width="320" height="400"> 31 Support for (and demo of) HTML5 Audio • • 32 Format IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg Vorbis No Yes Yes Yes No MP3 Yes No No Yes Yes Wav No Yes Yes No Yes 33 Support for (and demo of) HTML5 Video • HTML5 Video – – 34 Format IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ No MPEG 4 9.0+ No No 5.0+ 3.0+ WebM No 4.0+ 10.6+ 6.0+ No 35 Audio/Video for Publishers HTML5 lets you embed audio/video directly in your content without any plugins needed: (Sorry, <audio> element not supported in your browser/ereader, so you will not be able to listen to this song.) (Sorry, <video> element not supported in your browser/ereader, so you will not be able to watch this video.) 36 HTML5 Video • Example: <video src="foo.mp4" width="300" height="200" controls> Your browser does not support the element. • Property: – src, autoplay, controls, height, width, – loop, autobuffer, preload, poster 37 HTML5 Audio • Example: Your browser does not support the element. • Property: – src, autoplay, controls – loop, autobuffer, preload 38 Handling Media Events Event Description abort This event is generated when playback is aborted. canplay This event is generated when enough data is available that the media can be played. ended This event is generated when playback completes. error This event is generated when an error occurs. loadeddataThis event is generated when the first frame of the media has finished loading. loadstart This event is generated when loading of the media begins. 39 Handling Media Events Event Description pause This event is generated when playback is paused. play This event is generated when playback starts or resumes. progress This event is generated periodically to inform the progress of the downloading the media. ratechange This event is generated when the playback speed changes. seeked This event is generated when a seek operation completes. 40 Handling Media Events Event Description seeking This event is generated when a seek operation begins. suspend This event is generated when loading of the media is suspended. volumechange This event is generated when the audio volume changes. waiting This event is generated when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek). 41 Example var clip = document.getElementById('audio'); clip.muted = false; //câm clip.play(); //phát clip.pause(); //tạm dừng 42 Learning by example • Prepare video and audio file • 43 HTML5/CSS3 HTML5 Forms 44 Giới thiệu • Các thành phần mới trong HTML5 bổ sung thêm chức năng mà các nhà thiết kế/phát triển web thường kết hợp quan các phương tiện khác như javascript và Flash. • HTML5 = HTML4 + một số thẻ thêm + validation 45 Một số thẻ trong Form ■ button ■ checkbox ■ file ■ hidden ■ image ■ password ■ radio ■ reset ■ submit ■ text • (password) • • • • (reset, button) • . • . • , 46 13 New Input Types 47 Một số thuộc tính mới • Của thẻ : autocomplete, novalidate • Của thẻ : – autocomplete – height and width – list – autofocus – min and max – form – multiple – formaction – pattern (regexp) – formenctype – placeholder – formmethod – required – formnovalidate – step – formtarget 48 Thẻ input có thuộc tính type mới • search • time • email • datetime-local • url • number • tel • range • color • datetime • date • month • week 49 Thành phần label • Thành phần không bắt buộc, tăng khả năng truy cập cho form. • Phone • <input type="text" name="txtPhone" id="txtPhone"> 50 Search search Dùng để search hỗ trợ bởi Chrome, Opera, và Safari. Search Google: ` 51 Email email Hỗ trợ bởi Chrome, Opera, firefox và safari. E-mail: 52 URL url Dùng để nhập liệu địa chỉ web(URL address). Field sẽ được tự động validate khi form submit. Hỗ trợ bởi Chrome, Opera, firefox. Add your homepage: 53 Range range Hỗ trợ Opera và WebKit (Chrome). Gồm có các thuộc tính min, max, và step. Dùng hỗ trợ validate nhập liệu số On a scale of 1 to 10, my knowledge of HTML5 is: <input type="range" min="1" max="10" name="rating“> 54 Sliders <input type="range" min="0" max="20" step="2" value="2"> 55 color color The color input type (type="color") provides the user with a color picker Supported only in Opera, Chrome Select your favorite color: 56 Spin Boxes <input type="number" min="0" max="20" step="2" value="2"> 57 Date Pickers 58 Color Pickers 59 keygen keygen The purpose of the element is to provide a secure way to authenticate users. The tag specifies a key-pair generator field in a form. When the form is submitted, two keys are generated, one private and one public. The private key is stored locally, and the public key is sent to the server. The public key could be used to generate a client certificate to authenticate the user in the future. Username: Encryption: 60 output output The element represents the result of a calculation (like one performed by a script). <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 100 + = 61 Data Lists 62 list 63 HTML5 Form Attribute Enhancements • Các thuộc tính mới autofocus, required, placeholder, maxlength, và pattern. Trong đó required và placeholder sử dụng cho textbox. 64 Placeholder Text 65 Autofocus Fields 66 Validation 67 Validation Example 68 References • “Web Forms – Dive into HTML 5” • “Dectecting HTML5 Features” • 69 HTML5/CSS3 HTML5 Canvas Msc. Luong Tran Hy Hien, FIT of HCMUP 70 Canvas dùng làm gì? • Canvas có thể giúp hiển thị trực quan một số hình ảnh dễ dàng trên trình duyệt như: – Các sơ đồ đơn giản – Trang trí thêm cho giao diện người dùng – Hình ảnh động – Biểu đồ và đồ thị – Có thể nhúng các ứng dụng vẽ – Hoạt động tốt với những hạn chế của CSS 71 Canvas (tt) • • Sử dụng Javascript để điều khiển: var canvas = document.getElementById("myCanvas"); // Lấy ra vị trí canvas với bối cảnh 2D: var context = canvas.getContext("2d"); • Tọa độ: 72 Canvas Lines: Vẽ đường thẳng • context.moveTo(x,y); • context.lineTo(x,y); • context.stroke(); • Có độ rộng: context.lineWidth = [value]; • Có màu: context.strokeStyle = "#ff0000"; 73 Tùy chỉnh đường thẳng • context.lineCap = "butt"; • context.lineCap = "round"; • context.lineCap = "square"; 74 Vẽ đường (tập hợp) • beginPath(): bắt đầu đường vẽ • closePath(): kết thúc đường vẽ • stroke(): vẽ đường biên • fill(): tô màu • context.beginPath(); • context.moveTo(50,150); • context.lineTo(100,100); • context.lineTo(150,150); • context.lineTo(200,100); • context.lineTo(250,150); 75 • context.stroke(); Rectange - Hình chữ nhật • fillRect(x, y, width, height) – Vẽ hình chữ nhật đặc • clearRect(x, y, width, height) – Xóa nội dung vùng vẽ • strokeRect(x, y, width, height) – Vẽ hình chữ nhật chỉ có biên • fillStyle: CSS background color • strokeStyle: CSS border color 76 Cung tròn • arc(x, y, radius, angle_start, angle_end, anticlockwise) 77 Bài tập • Vẽ hình chữ nhật có chiều dài 400px, rộng 300px, 4 góc bo tròn với cung 20px. • Hướng dẫn: – Sử dụng lệnh vẽ đường thẳng, cung tròn – Chú ý: Tính toán các góc 78 Bezier • Mục đích: Xây dựng hình tùy ý • context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); context.beginPath(); // bắt đầu đường vẽ context.moveTo(170, 80); context.bezierCurveTo(130, 100, 130, 150, 230, 150); context.bezierCurveTo(250, 180, 320, 180, 340, 150); context.bezierCurveTo(420, 150, 420, 120, 390, 100); context.bezierCurveTo(430, 40, 370, 30, 340, 50); context.bezierCurveTo(320, 5, 250, 20, 250, 50); context.bezierCurveTo(200, 5, 150, 20, 170, 80); context.closePath(); // kết thúc đường vẽ context.lineWidth = 5; context.strokeStyle = "#0000ff"; context.stroke(); 79 context.strokeStyle = "#8ed6ff"; Vẽ đường cong đơn giản context.quadraticCurveTo(controlX, controlY, endX, endY); 80 Vẽ đường cong phức tạp • bezierCurveTo(controlX1, controlY1, co ntrolX2, controlY2, endX,endY); 81 Bóng đổ //ve trai tim trai ctx.fillStyle= "#ff0000"; ctx.beginPath(); ctx.moveTo(200,50); • độ rộng bóng đỗ ctx.bezierCurveTo(270,10, 280, 80, 200,120); ctx.bezierCurveTo(120,80, 130, 10, – ctx.shadowBlur = 5; 200,50); ctx.shadowBlur = 5; // độ rộng bóng đỗ ctx.shadowColor = "black"; // màu bóng đỗ • màu bóng đỗ ctx.fill(); – ctx.shadowColor = "black"; • context.shadowOffsetX=[value]; //ve trai tim phai ctx.fillStyle= "#ffff00"; context.shadowOffsetY=[value]; ctx.beginPath(); ctx.moveTo(280,60); ctx.bezierCurveTo(350,20, 360, 90, 280,130); ctx.bezierCurveTo(200,90, 210, 20, 280,60); ctx.shadowBlur = 5; // độ rộng bóng đỗ ctx.shadowColor = "black"; // màu bóng82 đỗ ctx.fill(); Images • context.drawImage(imageObj,destX,destY , sizeWidth, sizeHeight, cropX, cropY, cropWidth, cropHeight); • imageObj: đối tượng hình • destX: tọa độ x của vị trí bắt đầu vẽ hình (góc top trái x) • destY: tọa độ y của vị trí bắt đầu vẽ hình (góc top trái Y) • sizeWidth: kích thước chiều rộng hình • sizeHeight: kích thước chiều cao hình • cropX: vị trí x điểm bắt đầu crop • cropY: vị trí Y điểm bắt đầu crop • cropWidth: kích thước chiều rộng hình sau khi crop • cropHeight: Kích thước chiều cao hình sau khi crop 83 Images • drawImage(image, dx, dy): vẽ hình với kích thước thực sự • drawImage(image, dx, dy, dw, dh): vẽ hình resize với kích thước dw/dh • drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) • Draws selected region of image starting at sx/sy with width sw and a height sh. Starts drawing at the dx/dy coordinates with size defined by dw / dh. 84 Vẽ chuỗi • context.font = 'italic 40px Calibri'; – normal, italic, bold, • context.fillText(str, x, y); – Màu: context.fillStyle = ; • context.strokeText(str, x, y); – Màu: context.strokeStyle = ; • context.textAlign = ; – start, end, left, right, and center. 85 Lấy kích thước vùng chữ • var metrics = context.measureText(text); • var width = metrics.width; 86 Pattern • var pattern = context.createPattern(imageObj, repeatOption); • context.fillStyle = pattern; • context.fill() repeatOption có 4 giá trị: repeat, repeat- x, repeat-y, hoặc no-repeat 87 Tô màu Linear Gradient • var grd=context.createLinearGradient(startX, startY, endX, endY); • grd.addColorStop(offset, color); – startX: tọa độ x của điểm bắt đầu – startY: tọa độ y của điểm bắt đầu – endX: tọa độ x của điểm kết thúc – endY: tọa độ y của đ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 • Độ trong suốt – context.globalAlpha=[value]; • Cắt mộ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 3 – 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 độ mới • rotate(angle): quay góc angle (+: cùng chiều kim đồng hồ, -: ngược chiều) • scale(x, y): phóng to/thu nhỏ x lần chiều rộng và 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, 2 * Math.PI, false); // restore to original state context.restore(); // apply styling context.fillStyle = '#8ED6FF'; context.fill(); context.lineWidth = 5; context.strokeStyle = 'black'; 95 context.stroke(); 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òn 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 • ro.asp • • • 4000001654/index.html • • 100 Q & A 101 THE END 102