Bài giảng Phát triển ứng dụng web - Bài 3: Nội dung web - Lê Đình Thanh

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
Nội dung web
Bà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
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
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
Lê Đình Thanh, Bài giảng 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
• Nhiều đánh dấu thay cho kịch bản
• Độc lập thiết bị
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
Các đặc trưng mới
• Đối tượng cho độ họa 2D
• Đối tượng và cho 
media
• Các đối tượng theo nội dung như 
, , , 
, 
• 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.
Đối tượng nhập màu
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
Đối tượng nhập ngày
Lê Đì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át triển ứng dụng web.
Đối tượng nhập ngày giờ
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
Đối tượng nhập ngày giờ địa phương
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
Đối tượng nhập tuần
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
Đối tượng nhập email
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
Đối tượng nhập tháng
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
Đối tượng nhập số
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
Đối tượng nhập giá trị trong khoảng
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
Đối tượng nhập nội dung tìm kiếm
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
Đối tượng nhập điện thoại
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
Đối tượng nhập URL
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
Đối tượng tự động hoàn chỉnh nhập
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
Đối tượng tạo khóa
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
Đối tượng ra
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
Đối tượng video
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
Điều khiển chạy video
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
Đối tượng audio
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
Lưu trữ web: localStorage
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
Lưu trữ web: sessionStorage
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
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
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
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
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;
  };
}
• Dừng web worker
w.terminate();
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
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();
?>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
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
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
Tạo viền tròn góc
• border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old 
Firefox */
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
Tạo bóng
• box-shadow: 10px 10px 5px 
#888888;
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
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 */
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
Đị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;
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
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;
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
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 */
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
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 */
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
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;
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
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;
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
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;
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
Tiếp theo
Công nghệ web
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.