Bài giảng PHÁT TRIỂN ỨNG DỤNG WEB

Đối tượng nhập màuLê Đình Thanh, Bài giảng Phát triển ứng dụng web... Đối tượng nhập ngàyLê Đình Thanh, Bài giảng Phát triển ứng dụng web... Đối tượng nhập giờLê Đình Thanh, Bài giảng Ph

Trang 1

Lê Đình Thanh

Bộ môn Mạng và Truyền thông Máy tính

Khoa Công nghệ Thông tin Trường Đại học Công nghệ, ĐHQGHN E-mail: thanhld@vnu.edu.vn, thanhld.vnuh@gmail.com

Mobile: 0987.257.504

Bài giảng

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

Trang 2

Nội dung web

Bài 3

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

Trang 6

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

• Đối tượng <video> và <audio> cho

media

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

<article>, <footer>, <header>,

date, time, email, url, search

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

Trang 7

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

Trang 8

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

Trang 9

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

Trang 10

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

Trang 11

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

Trang 12

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

Trang 13

Đối tượng nhập email

Trang 14

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

Trang 15

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

Trang 16

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

Trang 17

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

Trang 18

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

Trang 19

Đối tượng nhập URL

Trang 20

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

Trang 21

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

Trang 22

Đối tượng ra

Trang 23

Đối tượng video

Trang 24

Điều khiển chạy video

Trang 25

Đối tượng audio

Trang 26

Lưu trữ web: localStorage

Trang 27

Lưu trữ web: sessionStorage

Trang 28

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

• Tạo tệp appcache

CACHE MANIFEST

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

/logo.gif /main.js

Trang 29

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 worker

if(typeof(Worker)!=="undefined") {

if(typeof(w)=="undefined") { w=new Worker("workers.js");

} w.onmessage = function (event) { //access event.data;

Trang 30

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 };

Trang 31

– Giao diện người dùng

Trang 32

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

• border:2px solid;

border-radius:25px;

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

Trang 34

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

• border-image:url(border.png) 30 30 round;

Trang 35

Trang 36

• text-overflow: clip|ellipsis| string ;

Trang 37

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 */

-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 */

Trang 38

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 */

Trang 39

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 transform 2s;

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

Trang 40

Hoạt cảnh

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

– @keyframes kfname

{ 0% {background: red;}

Trang 41

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

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

• column-rule:4px outset #ff00ff;

Trang 42

Tiếp theo

Công nghệ web

Định dạng
Số trang	42
Dung lượng	2,69 MB