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.