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à trên mọi lĩnh vực: kinh tế, khoa học, công nghệ, y học, thể thao, âm nhạc, game. Và HTML 5 còn có thể chạy tốt được trên mọi loại thiết bị di động khác nhau từ desktop, laptop, smartphone và tablet. ĐẠ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 12 6. Nguyên tắc dự phòng Mặc dù theo nhiều tài liệu, HTML 5 đã loại bỏ đi nhiều thẻ cũ nhưng thực chất vẫn có một số thẻ còn sử dụng được trong phiên bản thứ năm này như thẻ , . Nhưng theo ý kiến riêng của em, những thẻ nào không được khuyến cáo sử dụng thì đừng nên sử dụng quá nhiều. Vì sau này những thẻ đó có thể thực sự bị loại bỏ hoàn toàn trong các phiên bản tương lai. Một số thẻ cũ đã được đề nghị thay thế bởi các thẻ mới có nhiều tính năng hơn như:  Thẻ được thay bởi thẻ .  Thẻ , , v.v… được thay bởi CSS. 7. Nguyên tắc sử dụng trung gian Bên trong HTML 5 đã bao gồm các ngôn ngữ trung gian như Javascript và CSS (Xem thêm trên III.2) để tạo nên sự linh động trong việc thiết kế và phát triển ứng dụng web trong mọi lĩnh vực lớn như kinh tế, khoa học, công nghệ, y học, thể thao, âm nhạc. 8. Nguyên tắc thực hiện sơ bộ Nhà phát triển có thể dễ dàng thực hiện việc canh chỉnh bố cục của website để hình dung được các thành phần và các tính năng cần phải có của một website. Các thẻ như , , sẽ giúp chúng ta xây dựng khung cho website nhanh chóng và với sự hỗ trợ mạnh mẽ của các thẻ như thì việc xây dựng một prototype hoàn chỉnh sẽ giúp giảm thiểu nhiều hơn về chi phí thời gian. ĐẠ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 13 PHẦN II : CSS 3 I. Giới thiệu về CSS 1. Lịch sử phát triển của CSS CSS (Cascading Style Sheets) là một ngôn ngữ đặc biệt để giúp cho việc định nghĩa các định dạng kiểu văn bản cho bất kỳ tài liệu nào được viết trong ngôn ngữ siêu văn bản như HTML. CSS sẽ giúp tạo ra những giao diện web theo ý muốn của nhà phát triển. CSS được phát triển bởi một nhóm trong W3C, đứng đầu là Bert Bos and Hakon Lie. Mục đích của dự án này là tạo một ngôn ngữ cho định dạng kiểu văn bản có thể tích hợp vào HTML và XHTML. Khi HTML phiên bản đầu tiên được phát hành, CSS đã không được tích hợp vào HTML. Đến năm 1996, phiên bản CSS đầu tiên đã được chính thức phát hành. Phiên bản này bao gồm các chức năng cơ bản như font, color, background images v.v... Hầu hết các trình duyệt trong giai đoạn này đều hỗ trợ CSS 1. Năm 1998, CSS 2 ra đời và đã thêm vào rất nhiều tính năng mới cho CSS. CSS 2 cho phép canh chỉnh vị trí cho các thẻ của HTML, cho phép thay đổi font chữ cho trang web và cho phép định dạng kiểu in. Hầu hết các trình duyệt hiện nay đều hỗ trợ đầy đủ CSS 2. 2. Các nguyên tắc sáng tạo trong giai đoạn đầu của CSS - Nguyên tắc kết hợp:  Được tạo ra cho mục đích hỗ trợ cho siêu văn bản như HTML. Việc kết hợp này rất quan trọng trong việc bảo trì và phát triển một hệ thống website lớn mà trong đó phải đảm bảo tất cả trang đều dùng chung một định dạng văn bản.  Bên trong khai báo CSS là sự kết hợp của rất nhiều thuộc tính. Ví dụ: body{ margin: 0; padding: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; border-left:0; }  Một thẻ HTML còn có thể kết hợp nhiều khai báo của CSS. 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 14 … “center” và “header” là hai khai báo riêng, mỗi khai báo sẽ có những thuộc tính riêng. Khi kết hợp lại với nhau, thẻ sẽ mang thuộc tính của cả hai. - Nguyên tắc tách khỏi  Như ví dụ trên, việc tách làm hai khai báo CSS này rất hữu ích khi khai báo “center” là dùng để canh chỉnh nội dung của thẻ div và có thể dùng cho nhiều đối tượng thẻ khác. Còn CSS “header” có thể chỉ được dùng cho các mục đích trong đầu trang nên việc tách này rất linh động trong việc sử dụng các khai báo CSS dùng chung. - Nguyên tắc phân nhỏ  CSS có chức năng phân nhỏ các đối tượng khai báo thành nhiều dạng tương ứng với các thẻ, các id và các class. Ví dụ: Với thẻ HTML: Để chỉnh kiểu CSS cho thẻ div: div { padding-left: 5px; } Để chỉnh kiểu CSS cho id: .id_header { padding-left: 5px; } Để chỉnh kiểu CSS cho class: #class_header { padding-left: 5px; }  CSS còn phân nhỏ để xử lý kiểu cho một số các sự kiện cơ bản như: a:hover, a:active v.v…  Ngoài ra, CSS còn chia thành ba dạng CSS là inline, embedded và external. - Nguyên lý vạn năng  CSS có thể sử dụng được trong hầu hết các website chạy trên các thiết bị từ desktop, laptop đến smartphone. Và hầu hết tất cả các thuộc tính trong CSS đều được tất cả các trình duyệt hiện nay hỗ trợ. II. Những điểm mới trong CSS 3 1. Hiệu ứng bo tròn Trong CSS 2, việc bo tròn các góc thật không dễ dàng gì. Người thiết kế web phải thêm các hình có góc bo tròn khi có yêu cầu bo tròn các góc. Còn trong CSS3, chúng ta chỉ cần bo góc 1 thẻ div hay table chỉ bằng 1 thuộc tính border-radius. 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 15 #ViduB { -moz-border-radius-bottomright: 50px 25px; } Như vậy , trên trình duyệt sẽ hiển thị như sau: Hình 9: Bo tròn góc trong CSS 2. Một số lựa chọn mới cho CSS CSS 3 đã thêm vào một số lựa chọn mới như nth-child, :not. Ví dụ: .row:nth-child(even) { background: #dde; } .row:nth-child(odd) { background: white; } Trên trình duyệt sẽ hiển thị: Hình 10: Dòng chẵn và dòng lẻ với CSS 3 3. Tính năng mới cho Background Background đã được mở rộng thêm các tính năng mới như điều chỉnh kích thước hình ảnh trong background, và có thể khai báo nhiều hình ảnh trong một thuộc tính background. Ví dụ: Trong điều chỉnh kích thước background: #logo { background: url(logo.gif) center center no-repeat; background-size: auto ; } Trên trình duyệt sẽ hiển 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 16 Hình 11: Hình ảnh hiển thị với auto size Còn khi chỉnh auto thành 100% trong thuộc tính background-size thì trình duyệt sẽ hiển thị: Hình 12: Hình ảnh hiển thị với size = 100% Còn với multiple background, ta có đoạn CSS như sau: div { background: url(src/zippy-plus.png) 10px center no-repeat, url(src/gray_lines_bg.png) 0 center repeat-x; } Và trình duyệt sẽ hiển thị hai hình ảnh trong một thẻ div. Hình đầu tiên là hình nền xám và hình nền thứ hai là dấu [+]. Hình 13: Multiple background trong CSS 3 4. Hiệu ứng biến đổi hình dạng thẻ CSS 3 có rất nhiều tính năng mới độc đáo như xoay, phóng to, thu nhỏ. Ví dụ: Hình 14: Xoay thẻ div bằng 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 MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC 17 5. Đổ bóng cho text CSS 3 đã hỗ trợ thêm tính năng đổ bóng cho text. Ví dụ: Ta có đoạn CSS như sau: .text_shadow { text-shadow: 2px 2px 2px #000; } Trên trình duyệt sẽ hiển thị: Hình 15: Text được đổ bóng với CSS 3 6. Hiệu ứng trong suốt CSS 3 đã hỗ trợ hiệu ứng trong suốt cho các thẻ HTML. Ví dụ: Với đoạn CSS sau: div { opacity:0.6; filter:alpha(opacity=60); } Trang web trên trình duyệt thì sẽ hiển thị như sau: Hình 16: Hình nền trong suốt với CSS 3 7. Hiệu ứng phối màu Hiệu ứng này giúp cho các thẻ hiển thị trên trang web với các màu sắc liên kết, phối màu với nhau. CSS 3 còn hỗ trợ phối màu theo nhiều chiều khác nhau: từ trên xuống, từ trái qua phải hay đổ màu từ tâm hình tròn.Ví dụ: với đoạn mã CSS sau: ĐẠ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 18 div { background:-moz-linear-gradient(80% 73% 184deg, #BDA3E3, #FF9628 75%) } Trên trình duyệt sẽ hiển thị: Hình 17: Hiệu ứng đổ màu với CSS 3 Hình dưới là dạng phối màu từ tâm hình tròn ra: Hình 18: Hiệu ứng đổ màu từ tâm hình tròn ra 8. Hiệu ứng chuyển động Hiệu ứng này giúp tạo hiệu ứng chuyển động cho các thẻ. Chúng có thể tạo ra các hiệu ứng như xoay, phóng to, thu nhỏ, chỉnh nghiêng, biến dạng. Chúng ta có thể tham khảo những hiệu ứng này ở trang web Ví dụ: .classname { -webkit-animation: cssAnimation 1s 16 ease; -moz-animation: cssAnimation 1s 16 ease; } III. Các nguyên tắc sáng tạo được ứng dụng trong CSS 3 1. Nguyên tắc chuyển sang chiều khác Được thấy rõ nhất trong việc thay thế các hình ảnh bằng những thuộc tính với cấu trúc đơn giản. Thay vì phải sử dụng hình ảnh để hiển thị màu Gradient, bo tròn góc và xoay các khung làm việc, thì trong CSS 3, chỉ cần một vài lệnh CSS đơn giản để thực hiện những việc đó. Điều này giúp cho nhà thiết kế web có thể rút ngắn được thời gian chỉnh sửa hình ảnh và việc thay đổi màu sắc, hình dạng của trang web cũng dễ dàng 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 19 2. Nguyên tắc phân nhỏ Mỗi trình duyệt đều có sự hỗ trợ riêng như khi áp dụng cho FireFox thì thêm prefix “-moz-“ phía trước thuộc tính, “-O-“ cho Opera, -webkit- cho Internet Explorer. 3. Nguyên tắc rẻ thay cho đắt Các hiệu ứng chuyển động Animation, mặc dù chỉ là những chuyển động đơn giản nhưng cũng có thể thay thế một số thành phần trên trang web như các banner quảng cáo. Với CSS 2 thì việc làm các thẻ HTML chuyển động là không thể. Khi đó, muốn trang web sinh động, người thiết kế web phải thêm vào các plug-in khác như Flash hay phải sử dụng jQuery. Việc để cho trình duyệt tự động biên dịch các mã CSS 3 sẽ giúp giảm tải cho server. Các hình ảnh thường ít nhiều ảnh hưởng đến việc truyền tải dữ liệu. Do đó, khi truyền tải dữ liệu cho máy khách thì truyền một số mã lệnh CSS đơn giản sẽ hiệu quả, nhanh hơn so với truyền nhiều hình ảnh xuống máy khách. 4. Nguyên tắc vạn năng CSS 3 được thiết kết để hỗ trợ tất cả các trình duyệt từ smartphone đến desktop. Các khai báo của CSS 3 có thể đơn giản nhưng lại rất linh động trong việc hiển thị trên giao diện màn hình. Trong một website, khi muốn sử dụng những chuyển động, hiệu ứng cho các thẻ HTML thì cần phải có thêm sự hỗ trợ của Flash, Jquery hay Javascript. Nhưng với CSS 3, thì việc này đơn giản hơn là chỉ cần khai báo các CSS với hiệu ứng chuyển động cho các thẻ HTML. 5. Nguyên tắc thay đổi màu sắc Trong các phiên bản trước, CSS chỉ hiện thị được một màu trong một thẻ HTML. Để có thể sử dụng được màu Gradient trong cùng một thẻ thì cần phải đặt thuộc tính image-background là một hình màu Gradient. CSS 3 đã khắc phục được điểm đó, thay vì phải truyền tải một hình xuống trình duyệt phía máy khách, thì chỉ cần truyền tải đoạn mã CSS và trình duyệt sẽ tự động biên dịch thành màu mong muố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 20 PHẦN III : Kết luận HTML 5 và CSS 3 hiện nay vẫn chưa được phổ biến rộng rãi so với HTML 4 và CSS 2.1. Các trình duyệt (IE, FireFox, Chome v.v…), các công cụ và ngôn ngữ lập trình cho phát triển website hiện nay (ASP.NET, Java v.v…) vẫn chưa chính thức hỗ trợ tất cả tính năng của HTML 5 và CSS 3. Nhưng với những tính năng và hiệu suất vượt trội so với các phiên bản cũ thì HTML 5 và CSS 3 sẽ dần thay thế và trở thành phổ biến trên internet. Hiện nay, trên internet đã có một số website demo về các tính năng của HTML 5 và CSS 3. Qua những website này, chúng ta có thể thấy được tính năng vượt trội của HTML 5 và CSS 3: - Demo các thuộc tính và các thẻ: demo - Các game phát triển trên HTML 5: - Demo cho CSS 3 và có sẵn các mã CSS tham khảo: Kính xin cám ơn giảng viên phụ trách môn học đã giảng dạy nhiệt tình cũng như chỉ bảo rất nhiều giúp bản thân em hoàn thành đề tài. Xin cám ơn các bạn đã theo dõi. Mong nhận được sự đánh giá và nhận xét của thầy và các bạ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 21 PHẦN IV : Tài liệu tham khảo 1. Tài liệu về phương pháp nghiên cứu khoa học trong tin học: - Phan Dũng, Phương pháp luận sáng tạo khoa học kỹ thuật. - Slide Phương pháp nghiên cứu khoa học trong tin học, GS.TSKH Hoàng Kiếm. 2. Lịch sử HTML: - - - - 3. Các tính năng của HTML 5: - - - - 4. Lịch sử CSS: - - - +css 5. Các tính năng trong CSS 3: - - -