Đề tài Nguyên lý sáng tạo được ứng dụng trong HTML 5 và CSS 3

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH CHƯƠNG TRÌNH ĐÀO TẠO THẠC SĨ CNTT QUA MẠNG ________________ BÁO CÁO THU HOẠCH MÔN HỌC PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC Đề tài: Nguyên lý sáng tạo được ứng dụng trong HTML 5 và CSS 3 Giáo viên hướng dẫn: GS.TSKH Hoàng Kiếm Sinh viên thực hiện: Du Chí Hào Mã số sinh viên: CH1101083 Tp. HCM 2012 ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH CHƯƠNG TRÌNH ĐẠO TẠO THẠC SĨ CNTT QUA MẠNG MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC 1 Lời nói đầu Khoa học và công nghệ là đặc trưng của thời đại, nghiên cứu khoa học đã trở thành hoạt động sôi nổi và rộng khắp trên phạm vi toàn cầu. Các thành tựu của khoa học hiện đại đã làm thay đổi bộ mặt thế giới. Khoa học và công nghệ đã trở thành động lực thúc đẩy sự tiến bộ nhân loại. Cùng với nghiên cứu khoa học hiện đại, mọi người đang chú ý đến phương pháp nhận thức khoa học, coi đó là nhân tố quan trọng để phát triển khoa học. HTML và CSS trong những bước đầu tiên phát triển và cho đến nay, đã tạo ra được bước phát triển đột phá trong việc chia sẻ tài nguyên và thông tin trên internet. HTML và CSS đã mang đến một thế giới muôn màu cho người dùng, cũng như là sự đơn giản, dễ hiểu, tường minh trong từng thẻ lệnh cho những nhà phát triển web. Đó là lý do em chọn đề tài này để em được củng cố, mở rộng kiến thức, phân tích các nguyên lý sáng tạo được áp dụng trong HTML 5 và CSS 3. Từ đó, em sẽ vận dụng chúng vào trong thực tế một cách hiệu quả nhất. Em xin chân thành cám ơn thầy GS.TSKH Hoàng Kiếm đã truyền đạt những kiến thức quý báu cho em về bộ môn “Phương pháp nghiên cứu khoa học trong tin học” để em có thể hoàn thành bài thu hoạch này. ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH CHƯƠNG TRÌNH ĐẠO TẠO THẠC SĨ CNTT QUA MẠNG MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC 2 Mục lục PHẦN I : HTML5 ....................................................................................................... 3 I. Giới thiệu về HTML .......................................................................................... 3 1. Lịch sử phát triển của HTML ...................................................................... 3 2. Các nguyên tắc sáng tạo áp dụng trong giai đoạn đầu của HTML ................ 4 II. Những điểm mới trong HTML 5 ..................................................................... 5 1. Doctype và charset mới ............................................................................... 5 2. Cấu trúc mới của HTML 5 .......................................................................... 6 3. Các dạng biểu mẫu nhập liệu mới ................................................................ 6 4. Các thẻ HTML mới khác ............................................................................. 8 5. Sử dựng javascript API mới ........................................................................ 8 6. Inline SVG .................................................................................................. 8 7. Web Storage và Application Cache ............................................................. 9 III. Các nguyên tắc sáng tạo được áp dụng trong HTML 5 ................................. 10 1. Nguyên tắc rẻ thay cho đắt ........................................................................ 10 2. Nguyên tắc kết hợp ................................................................................... 10 3. Nguyên tắc phân nhỏ ................................................................................. 11 4. Nguyên tắc tách khỏi ................................................................................. 11 5. Nguyên tắc vạn năng ................................................................................. 11 6. Nguyên tắc dự phòng ................................................................................ 12 7. Nguyên tắc sử dụng trung gian .................................................................. 12 8. Nguyên tắc thực hiện sơ bộ ....................................................................... 12 PHẦN II : CSS 3 ....................................................................................................... 13 I. Giới thiệu về CSS ............................................................................................ 13 1. Lịch sử phát triển của CSS ........................................................................ 13 2. Các nguyên tắc sáng tạo trong giai đoạn đầu của CSS ............................... 13 II. Những điểm mới trong CSS 3 ....................................................................... 14 1. Hiệu ứng bo tròn ....................................................................................... 14 2. Một số lựa chọn mới cho CSS ................................................................... 15 3. Tính năng mới cho Background ................................................................ 15 4. Hiệu ứng biến đổi hình dạng thẻ ................................................................ 16 5. Đổ bóng cho text ....................................................................................... 17 6. Hiệu ứng trong suốt ................................................................................... 17 7. Hiệu ứng phối màu .................................................................................... 17 8. Hiệu ứng chuyển động .............................................................................. 18 III. Các nguyên tắc sáng tạo được ứng dụng trong CSS 3 ................................... 18 1. Nguyên tắc chuyển sang chiều khác .......................................................... 18 2. Nguyên tắc phân nhỏ ................................................................................. 19 3. Nguyên tắc rẻ thay cho đắt ........................................................................ 19 4. Nguyên tắc vạn năng ................................................................................. 19 5. Nguyên tắc thay đổi màu sắc ..................................................................... 19 PHẦN III : Kết luận................................................................................................... 20 PHẦN IV : Tài liệu tham khảo .................................................................................. 21 ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH CHƯƠNG TRÌNH ĐẠO TẠO THẠC SĨ CNTT QUA MẠNG MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC 3 PHẦN I : HTML5 I. Giới thiệu về HTML 1. Lịch sử phát triển của HTML HTML (HyperText Markup Language – Ngôn ngữ đánh dấu siêu văn bản) là ngôn ngữ nền tảng của web. HTML được Tim Berners-Lee phát triển vào năm 1989 ở viện thí nghiệm CERN - Thụy sỹ. Điều này đã đánh dấu một bước phát triển mới cho xã hội thông tin. Ban đầu, ông làm việc cho viện thí nghiệm CERN mà việc thí nghiệm phải hợp tác nghiên cứu với nhiều viện khác trên thế giới. Tim đã nãy sinh ra ý tưởng là cho phép các nhà nghiên cứu có thể tham khảo dữ liệu từ một nơi mà dữ liệu được tập hợp và tổ chức lại sao cho khi đang đọc tài liệu này, nhà nghiên cứu có thể xem tài liệu liên quan bằng cách nhấn vào một liên kết được hiển thị trên màn hình. HTML được phát triển dựa trên ngôn ngữ Standard Generalized Markup Language (SGML). SGML là một hệ thống tổ chức và gắn thẻ cơ bản của một tài liệu. Ngôn ngữ này không quy định những định dạng, nguyên tắc mà nó chỉ quy định cụ thể các quy tắc cho các thẻ (Theo wikipedia). Tuy nhiên, đến năm 1990, phiên bản HTML đầu tiên mới được tung ra và gần như sau một năm, ngôn ngữ HTML mới được ứng dụng. Tháng 4 năm 1993, trình duyệt đầu tiên Mosaic xuất hiện và nhóm Mosaic đã mở rộng thêm một số thẻ mới như image, v.v… HTML đã trải qua 4 phiên bản gồm HTML phiên bản đầu tiên (1990), HTML 2 (1994), HTML 3 (1995), HTML 4 (1997). Vào năm 1994, tập đoàn tài chính World Wide Web (W3C) được thành lập với người đứng đầu là Tim Berners-Lee đã đứng ra hỗ trợ cho sự phát triển của HTML. Qua các phiên bản phát triển, HTML ngày càng có nhiều thẻ mới, tính năng mới cũng như là tính đơn giản hóa ngày càng cao. HTML 4 đươc phát triển vào năm 1997 và là phiên bản thành công nhất được sử dụng phổ biến cho đến hiện nay. Với rất nhiều thẻ mới như Button, FieldSet, Frame, Iframe, Legend, Span v.v… Ngoài ra, HTML 4 còn hỗ trợ hiển thị hầu hết ngôn ngữ trên thế giới dựa trên chuẩn Universal Character Set. Thay vì các phiên bản trước chỉ hiển thị theo chuẩn ISO-8859-1. HTML 4 còn hỗ trợ một số tính năng quan trọng sau:  Đã hỗ trợ ngôn ngữ lập trình của client-script và có thể nhúng thêm các tập tin script bên ngoài vào. Hỗ trợ các sự kiện client-script như onclick, onchange v.v… cho các thẻ.  Đặc biệt là HTML4 hỗ trợ CSS với các thuộc tính mới ID, Class và Style. Ba thuộc tính này giúp các thẻ liên kết với các style được khai báo trong CSS. Ví dụ: Ta có 1 CSS là: .header { font-size: small; } ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH CHƯƠNG TRÌNH ĐẠO TẠO THẠC SĨ CNTT QUA MẠNG MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC 4 Trên 1 trang web, ta có thẻ Header Như vậy, khi trình duyệt hiển thị nội dung trang web, chữ “Header” sẽ to và in đậm hơn so với các chữ khác.  Việc tích hợp với CSS này rất có ý nghĩa quan trọng cho các nhà thiết kế web. Họ có thể sử dụng những CSS chung cho các thẻ có kiểu hiển thị như nhau và có thể thoải mái sáng tạo giao diện mà không tốn công sức như trước đây (khai báo các thuộc tính kiểu cho từng thẻ).  HTML4 còn hỗ trợ nhiều hơn cho thẻ table với các thẻ table mới như , , 2. Các nguyên tắc sáng tạo áp dụng trong giai đoạn đầu của HTML - Nguyên tắc kết hợp:  Tim Berners-Lee đã có ý tưởng kết hợp và tập trung các tài liệu nghiên cứu lại với nhau để dễ dàng tra cứu thông tin.  Kết hợp được HTML với CSS để dễ dàng thao tác các style dùng chung cho các thẻ HTML.  Kết hợp với client-script như javascript hay vbscript để giúp cho trang web thêm phần linh động, giúp kiểm tra tính hợp lệ trước khi gửi yêu cầu xuống server xử lý, giảm thiểu việc truyền tải những thông tin không cần thiết. - Nguyên tắc thay đổi màu sắc:  Trong các thẻ HTML, một số thuộc tính giúp thay đổi màu sắc cho một trang web như các thuộc tính bgcolor, fontcolor. - Nguyên tắc phẩm chất cục bộ:  Mỗi thẻ HTML có những tính năng riêng và có các thuộc tính riêng của từng thẻ. - Nguyên tắc chứa trong:  Các thuộc tính được chứa bên trong các thẻ HTML. Ví dụ: Thuộc tính width được chứa trong thẻ table.  Ngoài ra, các thẻ HTML còn được chứa trong thẻ HTML khác. Việc này rất có lợi trong việc canh chỉnh từng khu vực làm việc hiển thị trên trang web và việc ẩn hiện một khu vực làm việc thay vì ẩn hiện nhiều thẻ cùng lúc. ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH CHƯƠNG TRÌNH ĐẠO TẠO THẠC SĨ CNTT QUA MẠNG MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC 5 - Nguyên tắc tách khỏi:  Có thể thấy được rằng các comments là các phần riêng trong 1 trang HTML, nó không hiển thị trên trình duyệt mà chỉ có nhiệm vụ lưu lại các ghi chú hoặc giải thích trong đoạn mã HTML.  Việc tách CSS ra thành một ngôn ngữ riêng thay vì tích hợp thành các thuộc tính trong các thẻ HTML. - Nguyên tắc phân nhỏ:  Chia các thẻ thành nhiều phần như Header, Body. Mỗi phần đảm nhận những chức năng riêng. - Nguyên tắc đồng nhất:  Mỗi trang HTML đều phải khai báo đầu tiên là và phiên bản được sử dụng trong trang đó. Ví dụ: Nếu trang web sử dụng HTML 3.2 Final thì phải khai báo là:  Mỗi thẻ HTML khi khai báo thì phải có một thẻ đóng. Ví dụ: Example. - Nguyên tắc dự phòng:  HTML đã hỗ trợ rất nhiều về việc chèn các ký tự vào nội dung hiển thị mà không được hỗ trợ trong siêu văn bản như các ký tự “<” và “>”. Nếu muốn sử dụng những kí tự đặc biệt này, chúng ta phải dùng mã hóa tương ứng. Ví dụ: “<”  “”, “&” hoặc “&”  “&”.  Có những đoạn HTML sẽ rất phức tạp vì một thẻ có thể có rất nhiều thẻ con bên trong. Điều đó sẽ gây cho người đọc rất khó hiểu. Nên thẻ đã hỗ trợ cho việc ghi chú, tóm tắt lại nội dung chính của những đoạn mã. II. Những điểm mới trong HTML 5 1. Doctype và charset mới HTML 5 đã đơn giản hóa kiểu khai báo Doctype cho trang web. Thay vì phải sử dụng dài dòng như: HTML 5 chỉ cần hiển thị: Chỉ cần khai báo đơn giản với hai từ DOCTYPE và HTML trong phiên bản mới này vì HTML 5 không còn là một phần của SGML. Còn character set cho HTML 5 cũng được đơn giản hóa chỉ còn duy nhất dòng thẻ: ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH CHƯƠNG TRÌNH ĐẠO TẠO THẠC SĨ CNTT QUA MẠNG MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC 6 2. Cấu trúc mới của HTML 5 Cấu trúc mới của HTML 5 sẽ giúp các nhà thiết kế dễ dàng trong việc sắp xếp các bố cục. Trong các phiên bản trước, để thiết kế bố cục cho một trang web, người thiết kế phải kết hợp nhiều thẻ HTML và CSS. Nhưng trong phiên bản thứ 5 này, bố cục được định nghĩa rõ ràng. Hình 1: Cấu trúc của HTML 4 Hình 2: Cấu trúc mới của HTML 5 3. Các dạng biểu mẫu nhập liệu mới HTML 5 hỗ trợ hầu hết các dạng nhập liệu tiêu chuẩn như:  datetime  datetime-local ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH CHƯƠNG TRÌNH ĐẠO TẠO THẠC SĨ CNTT QUA MẠNG MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC 7  date  month  week  time  number  range  email  url Hầu hết mỗi dạng nhập liệu này đều có chức năng kiểm tra tính đúng đắn trước khi gửi dữ liệu đến server. Ví dụ: khi muốn gửi một url xuống server. Chúng ta có đoạn mã sau: type="url" Trên trình duyệt sẽ hiển thị: Hình 3: Màn hình nhập liệu với HTML5. Hình 4: Thông báo khi nhập sai khi nhấn vào nút “Send”. Ngoài ra, thẻ còn hỗ trợ dạng “autocomplete” khi kết hợp với thẻ Ví dụ: ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH CHƯƠNG TRÌNH ĐẠO TẠO THẠC SĨ CNTT QUA MẠNG MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC 8 Khi đó, trên trình duyệt, khi nhập vào ký tự “i” sẽ hiển thị: Hình 5: Tự động hiển thị dữ liệu cần nhập. 4. Các thẻ HTML mới khác Điểm mới hay nhất theo cá nhân em là các thẻ HTML mới này. Chúng bao gồm Canvas, Video, Audio. Canvas là một thẻ rất hay trong HTML 5. Nó hỗ trợ việc hiển thị hình ảnh, tạo ra các hình vẽ 2D, 3D và có thể can thiệp hình ảnh bên trong bằng javascript. Điều đó đã giúp cho các nhà phát triển game có thể phát hành game sử dụng Canvas. Một số game và cách làm game bằng thẻ canvas này có thể tham khảo tại địa chỉ: Thẻ Video và Audio sẽ giúp hiển thị một đoạn clip hay một bài nhạc trên trang web mà không cần thêm bất kỳ plug-in thứ ba nào. Một ví dụ cho thẻ Video: 5. Sử dựng javascript API mới Javascript API đã phát triển thêm rất nhiều tính năng để tương thích với phiên bản HTML 5, như là các selector mới như getElementsByClassName, các hiệu ứng kéo thả, lưu lại cache cho ứng dụng, các hàm để thao tác với các thẻ HTML mới, hệ thống định vị v.v… 6. Inline SVG SVG (Scalable Vector Graphics) dùng để vẽ các hình ảnh dựa trên vector theo định dạng XML. Do là hình vẽ theo kiểu vector nên hình ảnh sẽ không bị vỡ ảnh trong bất kỳ kích thước và độ phân giải nào. Lợi ích của SVG là có thể nén, phóng to, thu nhỏ, in với chất lượng cao. Ví dụ: ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH CHƯƠNG TRÌNH ĐẠO TẠO THẠC SĨ CNTT QUA MẠNG MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC 9 <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime; stroke:purple; stroke-width: 5; fill-rule: evenodd;" /> Khi hiển thị trên web: Hình 6: Hình ảnh hiển thị của SVG. 7. Web Storage và Application Cache Với HTML 5, Web Storage cho phép lưu trữ dữ liệu trên máy tính của người dùng. Khác với cookie, Web Storage sẽ được bảo mật và nhanh hơn. Ngoài ra, nó có thể lưu được một lượng lớn các thông tin mà không ảnh hưởng đến hiệu suất làm việc của trang web. Cũng giống như cookie, dữ liệu của Web Storage được lưu dưới dạng cặp “khóa/ giá trị” và chỉ chính trang web bên người dùng tạo ra cặp khóa đó mới được phép truy cập. Có 2 dạng lưu trữ:  LocalStorage: Lưu dữ liệu và không có thời gian hết hạn.  SessionStorage: Lưu dữ liệu trên một session và sẽ bị giải phóng khi session hết hạn truy cập. Lưu trữ ứng dụng trong HTML 5 là một khi ứng dụng web được lưu trữ tạm thời thì có thể truy cập vào ứng dụng đó mà không cần kết nối internet. Các lợi ích khi sử dụng cache là:  Người dùng có thể sử dụng các ứng dụng web mà không cần kết nối internet.  Các dữ liệu được lưu trong cache sẽ tải nhanh hơn. ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH CHƯƠNG TRÌNH ĐẠO TẠO THẠC SĨ CNTT QUA MẠNG MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC 10  Điều quan trọng nhất là giảm thiểu việc tải dữ liệu từ phía máy chủ. III. Các nguyên tắc sáng tạo được áp dụng trong HTML 5 1. Nguyên tắc rẻ thay cho đắt Việc xuất hiện của HTML sẽ được dần dần thay thế cho Flash. Flash vốn chiếm vị trí độc quyền trong các webgame, các trình nghe nhạc, xem phim trên web. Nhưng các công cụ để thiết kế và phát triển các ứng dụng bằng Flash phải tốn một khoảng chi phí cho việc mua bản quyền và bắt buộc trình duyệt phía máy khách phải có cài plug-in. Trên HTML 5, chúng ta có thể phát triển trên mọi loại công cụ lập trình kể cả notepad và không cần cài thêm plug-in. 2. Nguyên tắc kết hợp Thực chất thì bản thân HTML 5 là sự kết hợp giữa ba thành phần: ngôn ngữ HTML, CSS và một phần của javascript API. Như ví dụ ở trên mục II.3 có hình như sau: Hình 7: Minh họa cho nguyên tắc kết hợp Có thể thấy được rằng khi nhập thông tin sai thì trang web sẽ tự động kiểm tra. Sau đó, nếu không hợp lệ thì hiển thị màu đỏ và thông báo. Trong các phiên bản HTML trước, nếu muốn kiểm tra tính đúng đắn thì phải khai báo sự kiện cho thẻ đó, sau đó sử dụng javascript để kiểm tra. HTML còn có sự kết hợp giữa các thẻ mới với bộ Javascript API mới. Điều này giúp cho nhà phát triển dễ dàng điều chỉnh mọi thứ theo ý muốn từ đơn giản đến phức tạp. Ví dụ: Để vẽ một mặt cười trên thẻ var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(75,75,50,0,Math.PI*2,true); ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); ctx.moveTo(65,65); ctx.arc(60,65,5,0,Math.PI*2,true); ctx.moveTo(95,65); ctx.arc(90,65,5,0,Math.PI*2,true); ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH CHƯƠNG TRÌNH ĐẠO TẠO THẠC SĨ CNTT QUA MẠNG MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC 11 ctx.stroke(); Khi hiển thị lên trên trình duyệt, đoạn code javascript sẽ hiển thị như sau: Hình 8: Mặt cười được vẽ dựa vào thẻ canvas và javascript HTML 5 còn kết hợp với ảnh vector để hiển thị những hình ảnh có dung lượng nhỏ và hiển thị được trong bất kỳ độ phân giải. 3. Nguyên tắc phân nhỏ Nguyên tắc này được áp dụng trong bố cục của trang web. HTML 5 chia thành nhiều khung nhỏ như , , . Việc chia như thế này sẽ giúp ta dễ dàng thay đổi bố cục cho trang web. Sau này khi HTML 5 thực sự phổ biến, nhà phát triển website sẽ không gặp khó khăn khi canh chỉnh bố cục cho tương thích với mọi trình duyệt như các phiên bản trước. Ngoài ra, HTML còn phân nhỏ các kiểu nhập liệu cho một biểu mẫu như email, url, number v.v… Điều này không chỉ giúp cho các thẻ trở nên tường minh mà còn hỗ trợ rất nhiều trong việc lọc thông tin, kiểm tra tính đúng đắn trước khi gửi về server. Ví dụ khung nhập liệu chỉ cho phép nhập số, khi nhập ký tự, HTML 5 sẽ tự động lọc và loại bỏ. Như vậy, nó còn giúp nhà phát triển website giảm thiểu khả năng thiếu sót những sự kiểm tra hợp lệ cho các trang web. 4. Nguyên tắc tách khỏi HTML 5 đã loại bỏ rất nhiều thẻ HTML cũ như , , , , , , , . 5. Nguyên tắc vạn năng HTML 5 giúp nhà phát triển có thể phát triển các hệ thống website từ đơn giản đến phức tạp và