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

ĐẠ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 Học viên: Đỗ Văn Cang Mã số: CH1001004 Lớp: Cao học CNTTQM – Khóa 5 Tháng 05 năm 2014 1 NGUYÊN TẮC SÁNG TẠO TRONG CÁC TÍNH NĂNG MỚI CỦA HTML5 2 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 3 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 4 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 5 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. 6 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 7 - 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 8 - 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 9 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 10 [...]... thức trong việc tạo ra cái gì đó tốt đẹp vẫn là mênh mông nhưng điều đó sẽ đơn giản hơn khi làm việc trong 1 tiêu chuẩn thống nhất Các nguyên tắc sử dụng - Nguyên tắc vạn năng - Nguyên tắc kết hợp - Nguyên tắc thay thế Các nguyên tắc quang trọng của sự xuất hiên HTML5 bao gồm các nguyên tắc: tách riêng, nghịch đảo, thay đổi tỉ lệ và vạn năng 15 Kết luận  Sự xuất hiện phiên bản chính thức của HTML5, ... việc giải thích các tính năng mới trong HTML5 Tài liệu tham khảo  Bài giảng slide PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC Research Methodology in Computer Science - GS.TSKH Hoàng Kiếm  Tiểu luận “ỨNG DỤNG CÁC PHƯƠNG PHÁP, NGUYÊN TẮC SÁNG TẠO ĐỂ GIẢI QUYẾT CÁC VẤN ĐỀ - BÀI TOÁN TRONG TIN HỌC” - BÙI TRẦN QUANG VŨ (CH0301088)  http://taka.com.vn/kien-thuc-truc-tuyen/thiet-ke-website /html5- thay-doi-web-nhuthe-nao/... dữ liệu Microformats trong HTML5 cung cấp các phương pháp tinh xảo giúp việc phân tích dữ liệu dễ dàng hơn Không ai có thể dự đoán microformats có thể thay đổi Web tới mức nào nhưng rất dễ để thấy được nó đã giúp các lập trình viên có nhiều giải pháp hơn Nguyên tắc sử dụng - Nguyên tắc phân nhỏ - Nguyên tắc kết hợp - Nguyên tắc cục bộ - Thực hiện sơ bộ 13 3.6/ HTML5 giúp hợp nhất các địa chỉ Đối với... thẻ video mới này sẽ cho thấy sức mạnh của video, giúp cho HTML bớt đi kí tự văn bản và video sẽ được dùng nhiều hơn Các nguyên tắc sử dụng - Nguyên tắc trung gian: HTML5 làm trung gian cho sự phát mở rộng mã nguồn mở, ví dụ: các mã được viết bằng ngôn ngữ javascript - Thay thế các đoạn video cứng nhắc bằng các đoạn video động hơn và dễ dàng hơn 3.8/ HTML5 tạo ra wiget chat Widget sử dụng trong iframes... máy tính của chúng ta đơn thuần chỉ là những con số ẩn danh Chuẩn HTML5 cho phép các trình duyệt định vị vị trí của người dùng Tuy nhiên, nó sẽ không hoạt động với các máy bàn (hoạt động với GPS hoặc Wifi), nhưng nó lại hoạt động tốt với smartphone cầm tay Nguyên tắc sử dụng - Nguyên tắc thay đổi không gian: định vị địa chỉ của người dùng trực tiếp chứ không cần địa chỉ IP 3.7/ HTML5 làm video của. .. của HTML5, CSS3 trong các trình duyệt đảm nhiệm những công việc nặng nề và khó khăn ở phía client kết hợp mô hình công nghệ Cloud Computing ở phía server trong tương lai sẽ đem lại cho mọi người một sự thay đổi hoàn toàn của con người về cách sử dụng máy tính và khái niệm máy tính Do thời gian và khả năng có hạn nên Em chỉ ứng dụng một số nguyên tắc sáng tạo quang trọng mà em nghĩ ra trong quá trình... 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... thế nhiều loại plug-in với các đặc điểm được tích hợp với HTML 5 sẽ bỏ đi được những khuyết điểm có trong các plug-in trước đó Những khuyết điểm có thể bị lợi dụng để thiết lập mã độc Nếu như nhóm an ninh kiểm tra Firefox, Chorme hoặc IE cho phép cài đặt các plug-in này, sự nguy hiểm sẽ giảm bớt đi Các nguyên tắc sử dụng - Nguyên tắc thay thế - Nguyên tắc nghịch đảo 3.9/ HTML5 đơn giản hóa việc phát... Flash đã chứng minh luôn vấn đề bất cập Nguyên tắc sử dụng - Nguyên tắc thay thế: không cần sử dụng các flugin như audio, video, graphics - Nguyên tắc vạn năng: chỉ cần một trình duyệt miễn phí có hỗ trợ HTML5 bạn không cần phải bực mình khi phải tải thêm flugin trước khi sử dụng 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 Web mới có thể xây dựng hình ảnh trên Canvas... họa của Website trở nên tương tác hơn Hiện nay, JavaScript có thể tính toán cũng như vẽ hình ảnh bằng dữ liệu Mọi thứ trở nên sống động khi những lập trình viên có thời gian để đưa ra giải pháp Adobe mới đây đã bắt đầu phát triển đồ họa tinh xảo cho HTML5 Sự xuất hiện của những công cụ này sẽ mở đầu cho những khả năng mới cũng như đồ họa sẽ được tinh xảo hơn hiện nay Nguyên tắc sử dụng - Nguyên tắc