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

HTML5 Video• Example: Your browser does not support the element... Canvas tt• • Sử dụng Javascript để điều khiển: var canvas = document .getElementById" myCanvas "; // Lấy ra vị trí

HTML5/CSS3 Course

Introduction to HTML5

Presenter: Msc Luong Tran Hy Hien, FIT of HCMUP.

HTML5 = HTML + CSS + JS API

New and Updated HTML5 Elements

HTML5 introduces 28 new elements:

<section>, <article>, <aside>, <hgroup>,

<header>,<footer>, <nav>,

<figure>, <figcaption>, <video>, <audio>,

<source>, <embed>, <mark>,<progress>,

<meter>, <time>, <ruby>, <rt>, <rp>,<wbr>,

<canvas>, <command>, <details>,<summary>,

<datalist>, <keygen> and <output>

HTML5 Structure

Structure

Structure

• 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

section The element is used to group a set of

levels, such as subheadings, alternative titles, or taglines

• 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

• 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

• 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

Block semantic element

• <aside>

• <figure>

• The aside element represents a section of a page that consists of content that is tangentially

and which could be considered separate from

that content Such sections are often

represented as sidebars in printed typography

• Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc

Inline semantic element

• <mark>

• <time>

• <meter>

• <progress>

• Defines marked/highlighted text

• Defines a date/time

• Defines a scalar measurement within a known

range (a gauge)

• The progress element provides a simple and

effective way for a web designer to notify a user

of their progress regarding a specified task

Open new page in Dreamweaver

Lab: frames layers

1/3

100px

2/3

No need for ids here; use HTML5 tags

Older browsers need to know block elements

Lab: frames layers

calc() defines position of each layer

Space in command is important

New with CSS3; not universally supported yet

Lab: frames layers

Finish out the lab

Lab: frames layers

HTML Media

http://www.w3schools.com/html/html_media.asp

Ebook for HTML5 Media

Audio/Video

HTML5 in Action on the Web

<param name="movie" value="movie.swf">

<param name="quality" value="high">

<param name="menu" value="true">

<param name="LOOP" value="false">

Support for (and demo of) HTML5 Audio

• http://caniuse.com/audio

• http://beta.theexpressiveweb.com/#!/html5-audio

Format IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0

Support for (and demo of) HTML5 Video

• HTML5 Video

– http://caniuse.com/video

– http://beta.theexpressiveweb.com/#!/html5-video

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+

Audio/Video for Publishers

HTML5 lets you embed audio/video directly in your

content without any plugins needed:

<audio id="new_slang">

<source src="new_slang.wav" type="audio/wav"/>

<source src="new_slang.mp3" type="audio/mp3"/>

<source src="new_slang.ogg" type="audio/ogg"/>

<em>(Sorry, &lt;audio&gt; element not supported in your

browser/ereader, so you will not be able to listen to this song.)</em>

</audio>

<video id="dancing_pony" width="300" height="300">

<source src="dancing_pony.mp4" type="video/mp4"/>

<source src="dancing_pony.ogg" type="video/ogg"/>

<em>(Sorry, &lt;video&gt; element not supported in your

HTML5 Video

• Example:

<video src=" foo.mp4 " width="300" height="200"

controls> Your browser does not support the

<video> element </video>

• Property:

– src, autoplay, controls, height, width, – loop, autobuffer, preload, poster

HTML5 Audio

• Example:

<audio src="foo.wav" controls autoplay>

Your browser does not support the <audio>

element.

</audio>

• Property:

– src, autoplay, controls– loop, autobuffer, preload

Handling Media Events

available that the media can be played.

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.

Handling Media Events

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.

completes.

Handling Media Events

operation (such as playback) is delayed pending the completion of another operation (such as a seek).

<audio id="audio" controls>

<source src=" orion.ogg " type="audio/ogg" />

</audio>

var clip = document.getElementById('audio');

clip.muted = false; //câm

clip.play(); //phát

clip.pause(); //tạm dừng

Learning by example

• Prepare video and audio file

HTML5 Forms

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

Một số thẻ trong Form

• <input type = “text” … /> (password)

• <input type = “radio” … />

• <input type = “checkbox” … />

• <input type = “file” … />

• <input type = “submit” … /> (reset, button)

13 New Input Types

– required – step

Thẻ input có thuộc tính type mới

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.

• <label for=" txtPhone ">Phone</label>

• <input type="text" name=" txtPhone "

id=" txtPhone ">

<input type> search

Dùng để search hỗ trợ bởi Chrome, Opera, và

Safari

Search Google:

<input type="search" name="googlesearch" />`

<input type> email

Hỗ trợ bởi Chrome, Opera, firefox và safari

E-mail: <input type="email" name="usermail" />

<input type> url

Dùng để nhập liệu địa chỉ web(URL address)

submit

Hỗ trợ bởi Chrome, Opera, firefox

Add your homepage:

<input type="url" name="homepage" />

<input type> range

Hỗ trợ Opera và WebKit (Chrome) Gồm có các thuộc tính min, max, và step.

<input type> color

The color input type (type="color") provides the

user with a color picker Supported only in Opera,

Chrome

Select your favorite color:

<input type="color" name="favcolor" />

Date Pickers

<form>

<input type=" date ">

<input type=" datetime ">

<input type=" datetime-local ">

<input type=“ time ">

<input type=" week ">

<input type=" month ">

<input type="submit">

</form>

Color Pickers

<form>

<input type=" color ">

</form>

<input type> keygen

The purpose of the <keygen> element is to provide a secure way to authenticate users.

The <keygen> 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.

<form action="demo_keygen.asp" method="get">

Username: <input type="text" name="usr_name" />

Encryption: <keygen name="security" />

<input type="submit" />

<input type> output

The <output> element represents the result of a calculation (like one performed by a script).

<form

oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

<input type="range" name="a" value="50" />100

+<input type="number" name="b" value="50" />

=<output name="x" for="a b"></output>

</form>

Data Lists

<form>

<input type=“text” list=“states” >

<datalist id=“states” >

<option value=“AK” label=“Alaska”>

<option value=“AL” label=“Alabama”>

<option value=“AR” label=“Arkansas”>

</datalist>

</form>

< datalist id =" frameworks ">

< option value =" MooTools ">

< option value =" Moobile ">

< option value =" Dojo Toolkit ">

< option value =" jQuery ">

< option value =" YUI ">

</ datalist >

<input name =" frameworks " list =" frameworks " />

• Các thuộc tính mới autofocus , required ,

placeholder , maxlength , và pattern. Trong

textbox.

HTML5 Form Attribute Enhancements

Placeholder Text

<form>

<input name="q" placeholder=“Search Text" >

<input type="submit" value="Search">

</form>

Autofocus Fields

<form>

<input name="q" autofocus >

<input type="submit" value="Search">

</form>

<form>

<input type="text" required >

<input type="hidden" required>

<input type="image" required>

Validation Example

HTML5 Canvas

Msc Luong Tran Hy Hien, FIT of HCMUP

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

Canvas (tt)

• <canvas id=" myCanvas "></canvas>

• 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 độ:

Canvas Lines: Vẽ đường thẳng

• context lineTo (x,y);

• context stroke ();

• Có màu: context strokeStyle = " #ff0000 ";

Tùy chỉnh đường thẳng

• context.lineCap = " butt ";

• context.lineCap = " round ";

• context.lineCap = " square ";

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

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

Cung tròn

• arc(x, y, radius, angle_start, angle_end,

anticlockwise)

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

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

Vẽ đường cong đơn giản

context.quadraticCurveTo(controlX,

controlY, endX, endY);

Vẽ đường cong phức tạp

• bezierCurveTo(controlX1, controlY1, co

ntrolX2, controlY2, endX,endY);

ctx.shadowBlur = 5; // độ rộng bóng đỗ ctx.shadowColor = "black"; // màu bóng đỗ ctx.fill();

//ve trai tim phai ctx.fillStyle= "#ffff00";

ctx.beginPath();

ctx.moveTo(280,60);

ctx.bezierCurveTo(350,20, 360, 90, 280,130); ctx.bezierCurveTo(200,90, 210, 20, 280,60);

• 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

• 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.

Vẽ chuỗi

• context.font = 'italic 40px Calibri';

– normal, italic, bold,

Lấy kích thước vùng chữ

• var metrics = context.measureText(text);

• var width = metrics.width;

repeatOption có 4 giá trị: repeat,

repeat-x, repeat-y, hoặc no-repeat

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

Tô màu Gradient Radial

• var

grd=context.createRadialGradient(startX, startY, startRadius, endX, endY,

endRadius);

• grd.addColorStop(offset, color);

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/

• 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

HTML5 Canvas Advanced

• 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 đó

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

// restore to original state

Lấy tọa độ chuột

function getMousePos(canvas, evt) {

var rect = canvas getBoundingClientRect() ;

Validating your HTML5

• https://validator.nu/

Q & A

THE END