nguyên lý sáng tạo được ứng dụng trong html 5 và css 3

BAO CÁO THU HOẠCH MÔN HỌC PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HOC Đề 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

Trang 1

BAO CÁO THU HOẠCH MÔN HỌC

PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC

TRONG TIN HOC

Đề 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

Trang 2

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, đường minh trong từng thẻ lệnh cho những nhà phát triển web Đó là

ly do em chon dé tai 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

MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HOC.

Trang 3

PHÀN I: HTML5

I Giới thiệu về HTML

1 Lịch sử phát triển của HTML

2 Các nguyên tắc sáng tạo áp dụng trong giai đoạn đầu của HTML

II Những điểm mới trong HTML 5

Doctype và charset mới

Cấu trúc mới của HTML 5

Các dạng biểu mẫu nhập liệu mới

Các thẻ HTML mới khác

Sử dựng javascript API mới

Inline SVG

Web Storage va Application Cache

II Các nguyên tắc sáng tạo được áp dụng trong HTML 5

Nguyên tắc rẻ thay cho đắt

Nguyên tắc sử dụng trung gian

Nguyên tắc thực hiện sơ bộ

PHAN II: CSS 3

I Giới thiệu vềCSS

1 _ Lịch sử phát triển của CSS

2 _ Các nguyên tắc sáng tạo trong giai đoạn đầu của CSS

II Những điểm mới trong CSS 3

Hiệu ứng bo tròn

Một số lựa chọn mới cho CSS

Tính năng mới cho Background

Hiệu ứng biến đổi hình dạng thẻ

Đồ bóng cho text

Hiệu ứng trong suôt

Hiệu ứng phối màu

Hiệu ứng chuyển động

II 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

2 _ Nguyên tắc phân nhỏ

3 Nguyên tắc rẻ thay cho dat

4 _ Nguyên tắc vạn năng

5 _ Nguyên tắc thay đổi màu sắc

PHAN III : Kết luận

PHÀN IV : Tài liệu tham khảo

Trang 4

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 da nay 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 ng6n ngit 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, tap doan tai chinh 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 duoc phat 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 Ngoai ra, HTML 4 con hỗ trợ hiển

thị hầu hết ngôn ngữ trên thế giới dựa trên chudn Universal Character Set Thay

vì các phiên bản trước chỉ hiển thị theo chuẩn /SO-8859-7 HTML 4 còn hỗ trợ

một số tính năng quan trọng sau:

e_ Đã 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ẻ

e_ Đặc biệt là HTML4 hỗ trợ CSS với các thuộc tính mới ID, Ciass 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ó I CSS là: header { font-size: small; }

Trang 5

Trên 1 trang web, ta có thẻ <span id = “header”>Header</span> Như vậy, khi trình duyệt hiển thị nội dung trang web, chữ “Header”

sẽ to và In đậm hon 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 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ụ:

Thu6c tinh width dugc chwa 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

Trang 6

-_ Nguyên tắc tách khỏi:

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

e 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ỏ:

e 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:

e Mỗi trang HTML đều phải khai báo đầu tiên là <DOCTYPE> 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à:

<!/DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

e Mỗi thẻ HTML khi khai báo thì phải có một thẻ đóng Ví dụ:

<SPAN>Example</SPAN>

- Nguyén tic dy phong:

e 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 ding

mã hóa tương ứng Ví dụ: “&í;” ® “<”, “>” ® “>”, “&” hoặc “#38” > “&”

e 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 va charset méi

HTML 5 đã đơn giản hóa kiểu khai báo Doctype cho trang web Thay vi phải sử dụng dài dòng như:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

HTML 5 chi can hién thi:

<!DOCTYPE HTML>

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ẻ:

Trang 7

2 Cấu trúc mới của HTML 5

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 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ư:

Trang 8

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"

DuChiHac|

Please enter a URL

Hình 4: Thông báo khi nhập sai khi nhắn vào nút “Send”

Ngoài ra, thẻ <izpu> còn hỗ trợ dạng “autocomplete” khi kết hợp với the <datalist>

Trang 9

</datalist> -

Khi đó, trên trình duyệt, khi nhập vào ký tự “1” sẽ hiên thi:

| Internet Explorer Firefox Safari

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ỉ: hp:www.canvasdernos.com/

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:

<!DOCTYPE html>

<html>

<body>

</video>

</body>

</html>

5 Si dung 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ư ge/ElementsByClassName, 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) dung đề 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ụ:

Trang 10

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, đữ 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à:

e Cac di ligu dugc luu trong cache sé tải nhanh hơn

Trang 11

e _ Đ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ủ

I 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 chỉ 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:

type="url"

DuChiHao|

Please enter a URL

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ẻ <input> đó, 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

Vi dụ: Để vẽ một mặt cười trên thẻ <canvas>

var canvas = document.getElementByld('tutorial');

var ctx = canvas.getContext('2d'); ctx.beginPath();

Định dạng
Số trang	22
Dung lượng	8,72 MB