NGUYÊN TẮC SÁNG TẠO TRONG CÁC TÍNH NĂNG MỚI CỦA HTML5

Trong phạm vi một bài tiểu luận môn học, em xin mạn phép điểm qua một số tính năng mới của HTML5 và các nguyên tắc sáng tạo được sử dụng trong công nghệ này.. I/ Giới thiệu một số Nguyên

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

BÁO CÁO THU HOẠCH

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

ĐỀ TÀI:

NGUYÊN TẮC SÁNG TẠO TRONG CÁC TÍNH NĂNG

MỚI CỦA HTML5

Giảng viên: PG.TSKH HOÀNG KIẾM

Tháng 05 năm 2014

NGUYÊN TẮC SÁNG TẠO TRONG CÁC TÍNH NĂNG MỚI CỦA HTML5

GIỚI THIỆU



Hiện nay, công nghệ dành cho thiết bị di động ngày càng phát triển Nếu như trước đây, bạn phải dùng chiếc máy tính để bàn (MTĐB) cồng kềnh cùng trình duyệt web IE (Internet Explorer) để lướt web, thì giờ đây với máy tính xách tay (MTXT), điện thoại thông minh (ĐTTM) cùng rất nhiều trình duyệt khác (Firefox, Opera…) bạn có thể dễ dàng lướt “net” ở bất kỳ đâu Tuy nhiên với các thiết bị, trình duyệt web khác nhau, nội dung hiển thị trên màn hình sẽ khác nhau Chẳng hạn, trên máy tính bạn xem trang web này rất tốt, nhưng trên ĐTTM thì giao diện và cấu trúc trang bị xáo trộn Hay bạn có thể xem phim rất tốt với IE nhưng với Firefox thì không

Vậy giải pháp nào để người dùng có thể sử dụng bất kỳ trình duyệt trên bất kỳ thiết bị nào cũng có thể xem được đầy đủ, trọn vẹn nội dung, thông tin trên internet HTML5 cho phép nhà phát triển, lập trình web tạo ra các trang web có thể hoạt động tốt trên nhiều trình duyệt khác nhau của bất kỳ thiết bị nào – từ MTĐB, MTXT cho đến ĐTTM Không những vậy, HTML5 còn đem đến cho người dùng những trải nghiệm về tốc độ truy cập web nhanh hơn, tốt hơn, tài nguyên phong phú hơn

Trong phạm vi một bài tiểu luận môn học, em xin mạn phép điểm qua một số tính năng mới của HTML5 và các nguyên tắc sáng tạo được sử dụng trong công nghệ này

Em rất chân thành cám ơn thầy Hoàng Kiếm, dạy môn học này đã cho em biết thêm các kiến thức về khái niệm, ý nghĩa, các tài liệu và ứng dụng của môn học này Ngoài những kiến thức về bài học trên lớp thầy cũng đã cho em thấy được những điều hay và ý nghĩa thực sự về cuộc sống từ những lời giảng dạy của thầy

Nội dung bài tiểu luận được đặt tại

Ngày 26 tháng 05 năm 2014

Đỗ Văn Cang

Mục Lục

GIỚI THIỆU 3

Nội Dung 6

I/ Giới thiệu một số Nguyên Tắc phát minh sáng tạo trong tin học 6

1.1/ Phân Nhỏ - phân chia 6

1.2/ Loại bỏ, tách khỏi, tách riêng 6

1.3/ Cục bộ 6

1.4/ Phản đối xứng 6

1.5/ Kết hợp 7

1.6/ Vạn năng 7

1.7/ Chứa trong 7

1.8/ Thực hiện sơ bộ 7

1.9/ Dự phòng 7

1.10/ Nghịch đảo 8

1.11/ Vượt nhanh 8

1.12/ Trung gian 8

1.13/ Sao chép 8

1.14/ Màu sắc 8

1.15/ Sắp xếp 9

1.16/ Thay thế 9

1.17/ Thay đổi tỉ lệ 9

1.18/ Giải “thiếu” hoặc “thừa” 9

II/ Từ HTML đến HTML5: 9

III/ Nguyên tắc sáng tạo trong các tính năng mới của HTML5 10

3.1/ Các nguyên tắc sáng tạo đặt trưng của HTML5 10

3.2/ HTML5 làm giảm tầm quan trọng của các plug-ins 11

3.3/ HTML5 hỗ trợ đồ họa tương tác Web cũ tải hình ảnh bằng cách tải file GIF hay JPG 12

3.4/ HTML5 cho phép các ứng dụng kết nối tới khu vực lưu trữ file 12

3.5/ HTML5 sẽ đơn giản hóa chia nhỏ dữ liệu với cyborg data 13

3.6/ HTML5 giúp hợp nhất các địa chỉ 14

3.7/ HTML5 làm video của Web đẹp hơn 14

3.8/ HTML5 tạo ra wiget chat 14

3.9/ HTML5 đơn giản hóa việc phát triển web 15

Kết luận 16

Nội Dung



I/ Giới thiệu một số Nguyên Tắc phát minh sáng tạo trong tin học

1.1/ Phân Nhỏ - phân chia

• Chia các đối tượng thành các phần độc lập

• Làm đối tượng thành các thành phần tháo ráp

- Ứng dụng quen thuộc nhất chính là chia chương trình thành nhiều chức năng nhỏ, còn được gọi là “hàm” hay “thủ tục”

1.2/ Loại bỏ, tách khỏi, tách riêng

• Tách phần gây “phiền phức” (tính chất “phiền phức”) hay ngược lại, tách phần duy nhất “cần thiết” (tính chất “cần thiết”) ra khỏi đối tượng

- Trong các ngôn ngữ lập trình ngày nay, một ngôn ngữ lập trình thường tách ra các chức năng hay đối tượng riêng biệt như là các đối tượng COM, DCOM giúp cho người lập trình khi nào cần dùng đối tượng nào thì chỉ cần “chèn” đối tượng đó vào để sử dụng và thậm chí người lập trình có thể “nâng cấp” đối tượng đó để có thêm những tính năng mới tốt hơn hay tạo thêm các đối tượng mới

1.3/ Cục bộ

• Chuyển đối tượng (hay môi trường bên ngoài, tác động bên ngoài) có cấu trúc đồng nhất thành không đồng nhất

• Các phần khác nhau của đối tượng phải có những chức năng khác nhau

• Mỗi phần của đối tượng phải ở trong những điều kiện thích hợp nhất đối với công việc

- Trong lập trình, trong một đoạn chương trình cần phân biệt phẩm chất cục bộ :

ở đâu là phần lỏi của chương trình, phần khác là những thao tác phụ

1.4/ Phản đối xứng

• Chuyển đối tượng có hình dạng đối xứng thành không đối xứng ( nói chung, làm giảm bậc đối xứng)

- Kiểu biến số nguyên (byte, word, unsigned int) chỉ bao gồm các số nguyên dương, không có tính đối xứng (có cả âm lẫn dương,như dùng kiểu integer hay longint), nhưng trong thực tế rất nhiều lúc ta chỉ làm việc trên những số dương,

rõ rang khai báo kiểu này ta đã tiết kiệm được bộ nhớ và làm cho chương trình trong sáng và linh động hơn

1.5/ Kết hợp

• Kết hợp các đối tượng đồng nhất hoặc các đối tượng dùng cho các hoạt động

kế cận

• Kết hợp về mặt thời gian các hoạt động đồng nhất hoặc kế cận

- Trong lĩnh vực phần mềm, ngày nay một dự án khó có thể dùng một ngôn ngữ lập trình thực hiện từ đầu đến cuối mà phải có sự kết hợp nhiều… với nhau Chẳng hạn như một dự án về cơ sở dữ liệu, phần dữ liệu thường được tạo và quản lý bằng SQL Server hay Oracle còn phần giao diện thường được lập trình bằng một trong các ngôn ngữ Visual Basic, Delphi hay Visual C, … thậm chí

có thể kết hợp các ngôn ngữ đó trong phần thiết giao diện và các báo cáo thường được thiết kế bởi Crysral Report

1.6/ Vạn năng

• Đối tượng thực hiện một số chức năng khác nhau, do đó là không cần sự tham gia của đối tượng khác

- Điện thoại di động : Ngoài chức năng nghe và nhận cuộc gọi, nó còn có thể nghe nhạc MP3, chơi game, nghe FM, chụp hình, quay phim và truy cập Wap

…

- Ổ USP ngòai việc lưu trử dữ liệu nó còn có thể nghe nhạc, ghi âm, học ngoại ngữ …

1.7/ Chứa trong

• Một đối tượng được đặt bên trong một đối tượng khác và bản thân nó lại chứa một đối tượng thứ ba…

- Trong tin học, một chương trình chính chứa nhiều chương trình con Trong chương trình con lại chứa những chương trình con khác

1.8/ Thực hiện sơ bộ

• Thực hiện trước sự thay đổi cần có, hoàn toàn hoặc từng phần, đối với đối tượng

• Cần sắp xếp đối tượng trước, sao cho chúng có thể hoạt động từ vị trí thuận lợi nhất, không mất thời gian dịch chuyển

- Trong lĩnh vực khai khoáng dữ liệu, trước khi chúng ta áp dụng thuật toán Apriori-Tid, chúng ta phải biến đổi dữ liệu thật sang dạng (O,I,R) để làm dữ liệu đầu vào cho thuật toán

1.9/ Dự phòng

• Bù đắp độ tin cậy không lớn của đối tượng bằng cách chuẩn bị các phương tiện báo động, ứng cứu, an toàn

- Trong lĩnh vực mạng, tất cả các người quản trị mạng đều luôn luôn thực hiện chức năng chép dự phòng dữ liệu (Backup)

1.10/ Nghịch đảo

• Thay vì hành động như yêu cầu bài toán, hành động ngược lại (ví dụ, không làm nóng mà làm lạnh đối tượng)

- Trong lĩnh vực đồ thị, khi yêu cầu chứng minh hai đồ thị liên thông nhau, ta thường giả sử ngược lại là hai đồ thị không liên thông và chứng minh điều giả

sử đó không đúng, hoặc ngược lại khi yêu cầu chứng minh hai đồ thị không liên thông nhau, ta thường giả sử ngược lại là hai đồ thị liên thông nhau và chứng minh điều giả sử đó không đúng Đây là cách chứng minh phản chứng, được dùng rất nhiều trong lĩnh vực toán và tin học

1.11/ Vượt nhanh

• Vượt qua các giai đoạn có hại hoặc nguy hiểm với vận tốc lớn

• Vuợt nhanh để có được hiệu ứng cần thiết

- Trong các ngôn ngữ lập trình, cấu trúc rẽ nhánh giúp chương trình vượt nhanh qua các phần không thỏa điều kiện

- Trong hợp ngữ (Assenply Language), các lệnh nhảy (JMP,JNE,JE,…) giúp chương trình vượt nhanh đến địa chỉ lệnh cần thiết bỏ qua các lệnh không thỏa điều kiện

1.12/ Trung gian

• Sử dụng đối tượng trung gian, chuyển tiếp

- Trong nhiều chương trình máy tính, người ta có thể viết những biểu thức tính toán phức tạp trên cùng một hàng Điều này tuy chẳng ảnh hưởng đến kết quả tính toán cuối cùng nhưng sẽ làm cho việc đọc biểu thức trở nên khó khăn hơn

1.13/ Sao chép

• Thay vì sử dụng những cái không được phép, phức tạp, đắt tiền, không tiện lợi hoặc dễ vỡ, sử dụng bản sao

- Trong lĩnh vực phần cứng và mạng có một số phần mềm giúp người học mạng chỉ cần một máy tính vẫn có thể thực tập được việc cài đặt và quản trị mạng,

đó là các phần mềm giả lập (simulator) các thiết bị router hay các phần mềm

VM (Virtual Machine) giả lập một máy tính thành nhiều máy tính

1.14/ Màu sắc

• Thay đổi màu sắc của đối tượng hay môi trường bên ngoài

• Thay đổi độ trong suốt của đối tượng hay môi trường bên ngoài

• Sử dụng các hình vẽ, ký hiệu thích hợp

- Trong các chương trình máy tính khi xuất hiện hộp thông báo thường kèm theo các biểu tượng giúp người dùng hiểu họ được thông báo với tình trạng gì

1.15/ Sắp xếp

1.16/ Thay thế

• Chuyển các trường đứng yên sang chuyển động, các trường cố định sang thay đổi theo thời gian, các trường đồng nhất sang có cấu trúc nhất định

- Thay thế việc lưu giữ liệu bằng cách ghi chép thông thường trên giấy bằng lưu trữ trên băng đĩa (Cdrom, đĩa mềm, Ổ cứng …)

- Thay thế việc tính toán bốn phép tính bởi bàn tính bằng máy vi tính

1.17/ Thay đổi tỉ lệ

1.18/ Giải “thiếu” hoặc “thừa”

• Nếu như khó nhận được 100% hiệu quả cần thiết, nên nhận ít hơn hoặc nhiều hơn “một chút” Lúc đó bài toán trở nên đơn giản hơn và dễ giải hơn

- Trong máy tính mọi kiểu dữ liệu đều có miền xác định hữu hạn và rời rạc Nhưng các số thực trong toán học lại có miền xác định vô hạn và liên tục Vì vậy, các phép toán trên số thực trong máy tính đều có những sai số nhất định

II/ Từ HTML đến HTML5:

HTML ra đời từ những năm 1989, do Tim Berners-Lee phát triển, sau đó nhanh chóng phổ biến nhờ tính dễ học và dễ sử dụng HTML sử dụng các tag để đánh dấu từng đoạn văn bản Một ví dụ đơn giản như:

<p> This is a paragraph </p>

Phiên bản HTML đầu tiên của Tim Berners-Lee rất khác với những gì chúng ta đang sử dụng ngày nay, chẳng hạn như thiếu hẳn các chức năng định dạng văn bản Tuy nhiên nhờ sự đơn giản của các tag này mà HTML được chấp nhận rộng rãi, và được đưa lên thành chuẩn Trong vòng tám năm (1989 – 1997), HTML đã phát triển qua bốn cột mốc chính, với phiên bản gần đây nhất là HTML4 Phiên bản này cũng đánh dấu việc CSS1 được công nhận là chuẩn để định dạng trang web, và DOM trở thành chuẩn cho phép các ứng dụng JavaScript chạy thống nhất trên mọi trình duyệt

Với sự tăng trưởng ngày càng mạnh mẽ của Internet, các thuật ngữ như Web 2.0 và RIA (Rich Internet Application) hầu như hiện diện ở khắp nơi Người sử dụng, được trang bị phần cứng nhanh hơn và băng thông mạng tốt hơn, cũng thường xuyên đặt ra những yêu

cầu phức tạp Web hiện đại không phải chỉ là để sử dụng được, mà còn phải bắt mắt

và giàu khả năng tương tác

Trước thực tế đó, rõ ràng HTML cũng cần phải thay đổi, và sự thay đổi đó là cả một quá trình dài! Hơn 13 năm kể từ khi HTML4 xuất hiện, HTML5 mới đang tập tễnh những bước đi đầu tiên! Mặc dù vậy, HTML5 mang trong mình đủ sức hấp dẫn để gây nên sự chú ý

III/ Nguyên tắc sáng tạo trong các tính năng mới của HTML5

HTML5 là gì?

Có lẽ nhiều bạn đã nghe về thuật ngữ “HTML5″ xuất hiện bên cạnh những sản phẩm của Apple và Google HTML5 là sự tiến triển tiếp theo của HTML, viết tắt của cụm từ Hyper Text Markup Language, đây là hình thức định dạng cốt lỗi của hầu hết các trang web trên mạng Internet HTML4, là ngôn ngữ cuối cùng mạng tính chất lặp lại, xuất hiện vào năm

1997 và đã được nhiều lập trình viên sử dụng để đáp ứng nhiều nhu cầu về trang web

Một văn bản bình thường chỉ bao gồm các kí tự và các thành phần văn bản không định dạng, khô cứng thì HTML cho phép tạo ra một văn bản độc đáo hơn với những điểm sau:

- Thay thế văn bản bình thường bằng văn bản siêu liên kết tốt hơn

- Thành phần cấu trúc rõ ràng hơn: sử dụng nguyên tắc phân nhỏ, tách riêng, kết hợp, chứa trong, sắp xếp

- Thể hiện màu sắc khác nhau: nguyên tắc thay đổi màu sắc

- Siêu liên kết (hyperlink): vượt nhanh, màu sắc

- Kết hợp với Javascript và các ngôn ngữ lập trình server để tạo ra các trang web

có thể làm mọi thứ trên các thiết bị hỗ trợ trình duyệt và có kết nối mạng: nguyên tắc vạn năng

- Kết hợp với các flugin như flash, applet, silverlight thể hiện một giao diện hoàn chỉnh có thể thực hiện tất cả mọi công việc trên web

3.1/ Các nguyên tắc sáng tạo đặt trưng của HTML5

- Nguyên tắc nghịch đảo: từ các phiên bản trước của HTML5, chỉ đơn thuần hiển thị

một số thành phần cơ bản (tag) và kết hợp với javascript để thực hiện các công việc trên trình duyệt Nhưng HTML5 thì hoàn toàn khác, HTML5 hoàn toàn bứt phá ra khỏi khuông phép của các thành phần cơ bản để phát triển các thành phần mở rộng như Canvas (GDI), Video, Audio, Data caching Các thành phần mở rộng này cho phép trình

duyệt có thể làm mọi thứ có thể hình dung như chúng ta lập trình phần mềm ngay trên desktop nhưng lại chạy trên trình duyệt

Trước đây có ai từng nghĩ đến cho phép trình duyệt thực hiện duyệt offline (không kết nối mạng) chưa? Google đã nghĩ đến giải pháp đó (ví dụ Google Gear) và sẽ thực hiện nhiều dự án liên quan đến offline trong nay mai Để dễ hiễu bạn có thể hình như như hệ thống check mail – client mail như outlook! Thông tin mail được check lúc online nhưng

sẽ được xem bất cứ lúc nào ngay cả lúc máy tính không kết nối mạng

- Nguyên tắc phân nhỏ, cục bộ, kết hợp: tương tự như các ngôn ngữ và mô hình phát

triển phần mềm HTML5 tổ chức các chức năng thành các thành phần thư viện khác nhau nhằm thực hiện các công việc riêng biệt từ lưu trữ, tương tác đến hiển thị

- Nguyên tắc thay đổi tỉ lệ: HTML5 làm thay đổi mô hình lập trinh client-server trên

web Thay cho mọi thao tác không cần thiết giao hết cho máy chủ web server làm việc thì HTML5 cho phép chỉ các thao tác quang trọng nhất (dữ liệu) mới cần thiết để server thực hiện và gửi về cho trình duyệt Tất cả các công việc còn lại hãy để trình truyệt tự thực hiện, điều này làm giảm tải cho server đồng thời đỡ lãng phí sức xử lý trên máy client, nhất là trong công nghệ Cloud Computing phát triển mạnh trong tương lai

- Nguyên tắc vạn năng: đúng như vậy, ít nhất HTML5 đã có thể loại trừ gần như hoàn

toàn các flugin trong phiên bản trước Mọi thứ tự bản thân HTML5 có thể thực hiện chỉ với khái niệm các thành phần mở rộng (tag) và ngôn ngữ javascript truyền thống

3.2/ HTML5 làm giảm tầm quan trọng của các plug-ins

Trước đây, câu chuyện về Web gắn với plug-in hay add-on của một trình duyệt bởi nó khuyến khích sự sáng tạo cũng như sự trải nghiệm Âm thanh, ảnh động hay những thủ thuật khác xuất hiện trên Web thông qua plug-ins, phát triển bởi Sun, Adobe, RealAudio, Microsoft và rất nhiều hãng khác Giao diện plug-ins mở đối với tất cả và mọi người có thể trải nghiệm bằng cách thêm những tính năng mới

Cuộc chiến về Flash có thể là cuộc chiến nổi tiếng nhất, nhưng sức mạnh mới được từ HTML5 cũng đe dọa tới hệ mã lệnh JavaFX là lý tưởng, nhưng ai là người muốn học một loại cú pháp mới trong khi JavaScrip và Canvas đang làm rất tốt Ai cần hệ thống Real khi các video sẽ được chuyển thành audio và video? Plug-in dường như sẽ bị lãng quên

Như chúng ta đã biết, HTML 4 đã được chỉnh sửa, kéo dài và bổ sung ngoài phạm vi ban đầu của nó để mang lại mức độ tương tích cao và cung cấp nhiều đa phương tiện cho trang web Các plugin như Flash, Silverlight và Java được tích hợp vào web nhưng không phải hoàn toàn là miễn phí Trong việc khảo sát “các kinh nghiệm của người dùng” và xét

về khía cạnh tuổi thọ pin, Apple đơn giản là bỏ sự hỗ trợ cho một số plugin phụ thuộc vào các thiết bị di động để các phương tiện truyền thông Internet có thể tương thích, Tuy