PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn

Lê Đình ThanhBộ môn Mạng và Truyền thông Máy tính

Khoa Công nghệ Thông tinTrường Đại học Công nghệ, ĐHQGHN

E-mail: [email protected], [email protected]: 0987.257.504

Bài giảng

PHÁT TRIỂN ỨNG DỤNG WEB

Nội dung webBài 3

Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.

Nội dung

• HTML • CSS• JavaScript• DOM• Sự phát triển: HTML5, CSS3


Sự phát triển của HTML: HTML5

• HTML 4 được sử dụng từ 1999• HTML 5 đang được đề xuất, tương lai

sẽ thành chuẩn• Các trình duyệt chính (Safari,

Chrome, Firefox, Opera, Internet Explorer) hỗ trợ dần HTML 5


Các luật cho HTML 5

• Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript

• Giảm các plugin• Xử lý lỗi tốt hơn• Nhiều đánh dấu thay cho kịch bản• Độc lập thiết bị


Các đặc trưng mới

• Đối tượng <canvas> cho độ họa 2D• Đối tượng <video> và <audio> cho

media• Các đối tượng theo nội dung như

<article>, <footer>, <header>, <nav>, <section>

• Các điều khiển form mới như calendar, date, time, email, url, search

• Hỗ trợ lưu trữ cục bộ

Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.

Đối tượng nhập màu

Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.

Đối tượng nhập ngày


Đối tượng nhập giờ


Đối tượng nhập ngày giờ


Đối tượng nhập ngày giờ địa phương


Đối tượng nhập tuần


Đối tượng nhập email


Đối tượng nhập tháng


Đối tượng nhập số


Đối tượng nhập giá trị trong khoảng


Đối tượng nhập nội dung tìm kiếm


Đối tượng nhập điện thoại


Đối tượng nhập URL


Đối tượng tự động hoàn chỉnh nhập


Đối tượng tạo khóa


Đối tượng ra


Đối tượng video


Điều khiển chạy video


Đối tượng audio


Lưu trữ web: localStorage


Lưu trữ web: sessionStorage


Sử dụng đệm• Đệm giúp tăng tốc độ, giảm tải cho server, cho phép duyệt offline• Đặt thuộc tính manifest cho html

<html manifest=“cache.appcache">

• Tạo tệp .appcacheCACHE MANIFEST

# Các tệp được đặt cache/theme.css/logo.gif/main.js

NETWORK:#Các tệp không được đặt cache

login.php

FALLBACK:#Tệp thay thế khi có lỗi

/html/ /offline.html

Khi các tệp trên server thay đổi, cần phải cập nhật tệp .appcache

để trình duyệt cập nhật cache


Web worker

• Chương trình javascript chạy nền• Định nghĩa web worker ở tệp .js

– Sử dụng postMessage(obj); để đưa thông báo ra trang HTML

• Tạo web workerif(typeof(Worker)!=="undefined") {

if(typeof(w)=="undefined") { w=new Worker("workers.js"); } w.onmessage = function (event) { //access event.data; };}

• Dừng web workerw.terminate();


Sự kiện server gửi• Tạo đối tượng nhận sự kiện server gửi

if(typeof(EventSource)!=="undefined") { var source=new EventSource("sse.php"); source.onmessage=function(event) {

//access event.data }; }

• Mã phía server<?php

header('Content-Type: text/event-stream');header('Cache-Control: no-cache');echo “\n\n”;echo "data: whatever you want to send to client.\n\n";flush();?>


CSS3

• Là chuẩn CSS mới nhất• Thích ứng ngược • Các môđun quan trọng nhất

– Bộ chọn– Mô hình hộp– Nền và viền– Hiệu ứng văn bản– Biến đổi 2D/3D– Hoạt cảnh– Dàn nhiều cột– Giao diện người dùng


Tạo viền tròn góc

• border:2px solid;border-radius:25px;-moz-border-radius:25px; /* Old Firefox */


Tạo bóng

• box-shadow: 10px 10px 5px #888888;


Sử dụng ảnh làm viền

• border-image:url(border.png) 30 30 round;-moz-border-image:url(border.png) 30 30 round; /* Old Firefox */-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */-o-border-image:url(border.png) 30 30 round; /* Opera */


Định dạng nền

• background:url(img_flwr.gif);background-repeat:no-repeat;background-size:100% 100%;-webkit-background-origin:content-box; /* Safari */background-origin:content-box;


Hiệu ứng văn bản

• text-shadow: 5px 5px 5px #FF0000;• word-wrap: normal|break-word;• word-break: normal|break-all|

hyphenate;• text-overflow: clip|ellipsis|string;


Biến đổi 2D• transform: rotate(30deg);

-ms-transform: rotate(30deg); /* IE 9 */-webkit-transform: rotate(30deg); /* Safari and Chrome */-o-transform: rotate(30deg); /* Opera */-moz-transform: rotate(30deg); /* Firefox */

• transform: translate(50px,100px);-ms-transform: translate(50px,100px); /* IE 9 */-webkit-transform: translate(50px,100px); /* Safari and Chrome */-o-transform: translate(50px,100px); /* Opera */-moz-transform: translate(50px,100px); /* Firefox */

• transform: scale(2,4);-ms-transform: scale(2,4); /* IE 9 */-webkit-transform: scale(2,4); /* Safari and Chrome */-o-transform: scale(2,4); /* Opera */-moz-transform: scale(2,4); /* Firefox */

• transform: skew(30deg,20deg);-ms-transform: skew(30deg,20deg); /* IE 9 */-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */-o-transform: skew(30deg,20deg); /* Opera */-moz-transform: skew(30deg,20deg); /* Firefox */


Biến đổi 3D

• transform: rotateX(120deg);-webkit-transform: rotateX(120deg); /* Safari and Chrome */-moz-transform: rotateX(120deg); /* Firefox */

• transform: rotateY(130deg);-webkit-transform: rotateY(130deg); /* Safari and Chrome */-moz-transform: rotateY(130deg); /* Firefox */


Chuyển kiểu

• transition: property1 time1, property2 time2, property3 time3;-moz-transition: width 2s, height 2s, -moz-transform 2s;-webkit-transition: width 2s, height 2s, -webkit-transform 2s;-o-transition: width 2s, height 2s,-o-transform 2s;


Hoạt cảnh• Định nghĩa các cảnh trong hoạt cảnh

– @keyframes kfname{0% {background: red;}25% {background: yellow;}50% {background: blue;}100% {background: green;}}

• Sử dụng hoạt cảnh– animation-name: kfname;– animation-duration:5s;– animation-timing-function:linear;– animation-delay:2s;– animation-iteration-count:infinite;– animation-direction:alternate;– animation-play-state:running;


Nhiều cột

• -moz-column-count:3; /* Firefox */• -webkit-column-count:3; /* Safari and Chrome */• column-count:3;

• -moz-column-gap:40px; /* Firefox */• -webkit-column-gap:40px; /* Safari and Chrome */• column-gap:40px;

• -moz-column-rule:4px outset #ff00ff; /* Firefox */• -webkit-column-rule:4px outset #ff00ff; /* Safari and

Chrome */• column-rule:4px outset #ff00ff;


Tiếp theoCông nghệ web


Documents

PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn