Các nguyên lý sáng tạo ứng dụng trong công nghệ Web thế hệ mới
Nguyễn Trí Đức- KHMT K18 1 ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN BÀI THU HOẠCH MÔN HỌC PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC Đề tài CÁC NGUYÊN LÝ SÁNG TẠO ỨNG DỤNG TRONG CÔNG NGHỆ WEB THẾ HỆ MỚI Giảng viên hướng dẫn : GS-TSKH. Hoàng Văn Kiếm Học viên thực hiện : Nguyễn Trí Đức Lớp : KHMT K18 Mã số : 02 08 480110 TP.HCM, 12/2012 Nguyễn Trí Đức- KHMT K18 2 LỜI NÓI ĐẦU "Phương pháp luận sáng tạo" là bộ môn khoa học có mục đích trang bị cho người học hệ thống các phương pháp, các kỹ năng thực hành về suy nghĩ để giải quyết các vấn đề và ra quyết định một cách sáng tạo, về lâu dài, tiến tới điều khiển được tư duy. Mỗi người chúng ta trong cuộc đời của mình gặp biết bao vấn đề, từ chuyện mua sắm, học hành, quan hệ giao tiếp đến chọn ngành nghề, nơi ở, thu nhập, xã hội… phải suy nghĩ để giải quyết và ra quyết định xem phải làm gì và làm như thế nào. Như vậy thấy rằng đối tượng và mục đích của bộ môn khoa học này lại hết sức gần gũi với mỗi người. Theo các nhà nghiên cứu, khoa học này ứng với "làn sóng thứ tư" trong quá trình phát triển của loài người, sau nông nghiệp, công nghiệp và tin học. Làn sóng thứ tư ứng với Creatology (hay còn gọi là thời đại hậu tin học) chính là sự nhấn mạnh vai trò chủ thể tư duy sáng tạo của loài người trong thế kỷ XXI. Sau khi tham dự môn học về “Phương pháp nghiên cứu khoa học” tại trường Đại học khoa học tự nhiên do thầy GS-TSKH Hoàng Văn Kiếm giảng dạy , tôi đã có những kiến thức căn bản về các nguyên lí sáng tạo. Vận dụng các nguyên lí sáng tạo vào nghiên cứu khoa học là rất quan trọng. Nó giúp các ứng dụng sáng tạo hoạt động linh hoạt và hiệu quả, mang lại những kết quả ưu việt nhất; đồng thời chống lại thói quen suy nghĩ theo lối mòn và tính ì. Thời gian qua, tôi đã tìm hiểu về lịch sử phát triển của công nghệ web. Trong phạm vi đề tài này, tôi muốn chia sẽ những thông tin và những hiểu biết của bản thân về những gì tôi đã tìm hiểu được từ HTML 5 và CSS3 trên cơ sở áp dụng của phương pháp lí luận sáng tạo. Nguyễn Trí Đức- KHMT K18 3 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Nguyễn Trí Đức- KHMT K18 4 MỤC LỤC NHẬN XÉT CỦA GIẢNG VIÊN 3 PHẦN I. HTML5 6 1. Lịch sử phát triển của HTML 6 Các nguyên tắc sáng tạo áp dụng trong giai đoạn đầu của HTML 7 2. Những điểm mới trong HTML 5 9 Form nhập liệu mới 12 Tag HTML mới 13 HTML 5 Drag và drop 15 Web Storage và Application Cache 15 3. Tiện ích HTML5 16 4. Các nguyên tắc sáng tạo được áp dụng trong HTML 5 18 1. Nguyên tắc rẻ thay cho đắt 18 2. Nguyên tắc tách khỏi 18 3. Nguyên tắc kết hợp 19 4. Nguyên tắc phân nhỏ 20 5. Nguyên tắc vạn năng 20 6. Nguyên tắc dự phòng 21 7. Nguyên tắc sử dụng trung gian 21 8. Nguyên tắc thực hiện sơ bộ 21 9. Nguyên tắc liên tục tác động có ích 22 PHẦN II CSS 3 23 1. Lịch sử phát triển của CSS 23 Các nguyên tắc sáng tạo trong giai đoạn đầu của CSS 23 2. Những điểm mới trong CSS 3 25 Nguyễn Trí Đức- KHMT K18 5 3. Các nguyên tắc sáng tạo được ứng dụng trong CSS 3 28 Nguyên tắc chuyển sang chiều khác 28 Nguyên tắc phân nhỏ 28 Nguyên tắc rẻ thay cho đắt 28 Nguyên tắc vạn năng 28 Nguyên tắc thay đổi màu sắc 29 PHẦN III. 40 nguyên lý sáng tạo 30 KẾT LUẬN 39 TÀI LIỆU THAM KHẢO 40 Nguyễn Trí Đức- KHMT K18 6 PHẦN I. HTML5 1. Lịch sử phát triển của HTML HTML là viết tắt của cụm từ HyperText Markup Language (Ngôn ngữ đánh dấu siêu văn bản), và đây là ngôn ngữ chính được sử dụng cho việc thiết kế các website. Ngôn ngữ này gây ấn tượng cho người ta bởi sự ngắn gọn nhưng lại được hình thành trong một quá trình khó phân định. Việc hình thành HTML có mối quan hệ mật thiết với sự phát triển của Internet. Ngày nay, HTML rất được khuyên dùng bởi sự xuất hiện của một chuẩn mới, thực tế là một phiên bản cao hơn của ngôn ngữ này như là một sự phát triển tất yếu- HTML5. HTML đã trải qua 4 phiên bản gồm HTML phiên bản đầu tiên (1991), HTML 2 (1994), HTML 4 (1997) 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. Nguyễn Trí Đức- KHMT K18 7 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, 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. 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ẻ). 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 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 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 kết hợp: Nguyễn Trí Đức- KHMT K18 8 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 mềm dẻo, 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 chứa trong: Các thuộc tính được chứa bên trong các thẻ HTML. Ví dụ: <table border=”1px”></table> Thuộc tính border được chứa trong thẻ table. - Nguyên tắc tách khỏi: Không phải tất cả nội dung trong source HTML đều hiển thị, có một số nội dung được HTML tách ra khỏi, không hiện thị lên trang HTML.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 đồng nhất: Mỗi thẻ trong HTML đều đồng nhất 1 quy tắc, luôn có 1 cặp thẻ gồm thẻ mở, thẻ đóng. Mỗi thẻ HTML khi khai báo thì phải luôn có một thẻ đóng. Ví dụ: <button>…<button/>. 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à: Nguyễn Trí Đức- KHMT K18 9 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> - Nguyên tắc dự phòng: Việc nhìn vào mã của 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ã. 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ụ: “<” “<”, “>” “>”, “&” 2. Những điểm mới trong HTML 5 HTML5 mang lại cho người dùng trải nghiệm lướt Web hoàn toàn mới, nhanh hơn, ổn định hơn và bảo mật hơn. HTML5 sẽ giúp các nội dung trên Web hoạt động tốt hơn mà không cần phụ thuộc vào bất kì một ứng dụng phụ trợ nào khác. HTML5 – Mang đến sức sống mới cho Web Không những mang lại những lợi ích to lớn như hoạt động nhanh, ổn dịnh và bảo mật hơn. Bên cạnh đó, HTML5 có khả năng hỗ trợ API (Application Programming Interface) và DOM (Document Object Model) sẽ cho phép dễ dàng mở rộng, giúp các nhà phát triển tự do sáng tạo trong việc tạo ra các ứng dụng thân thiện và hữu ích hơn. Nguyễn Trí Đức- KHMT K18 10 Với HTML5, các nhà phát triển chỉ cần xây dựng ứng dụng 1 lần, nó có thể hoạt động tốt trên tất cả các thiết bị, không như Flash hoặc Silverlight đòi hỏi phải cài đặt plugin để có thể hiển thị nội dung. HTML5 – Nội dung đã đa dạng hơn, được hỗ trợ tốt hơn Huyền thoại Steve Jobs đã từng đưa ra quan điểm rất rõ ràng, Flash sẽ không bao giờ xuất hiện trên các thiết bị di động của Apple, và cũng đưa ra sự ủng hộ tuyệt đối vào HTML5. Quan điểm này thể hiện rõ ràng đến nỗi Steve Jobs đã viết 1 bức thư và đăng trên trang chủ của Apple để thể hiện quan điểm này và xóa tan những mong muốn đưa Flash lên iOS của người dùng. Bên cạnh những lợi ích mà HTML5 mang lại, giới phát triển cũng chỉ ra những hạn chế rất lớn của Flash, đó là sự bất ổn định, làm thiết bị hoạt động nóng hơn và hao pin hơn, phải yêu cầu cài Plugin để hoạt động. Và Flash không phải là tối ưu cho các thiết bị di động khi vấn đề về PIN trên các thiết bị này luôn là mối quan tâm lớn của người dùng. Hiện nay, nhiều trang web và dịch vụ lớn đã chuyển sang dùng HTML5, có thể kể đến trong số đó là Youtube, Nokia Maps… Ngoài ra, rất nhiều games được xây dựng bằng HTML5 đã xuất hiện, trong số đó có các games nổi tiếng như Angry Bird, Fieldrunners… Cho thấy HTML5 ngày càng được quan tâm và phát triển nhiều hơn. HTML5 có thể thay thế Flash Với sự quan tâm ngày càng lớn mà các nhà phát triển dành cho HTML5 cho thấy thời gian tới, HTML5 sẽ ngày một phát triển mạnh mẽ hơn. Đây không phải là một điều quá bất ngờ, vì với những gì mà HTML5 mang lại, đó là sự lựa chọn thực sự đúng đắn và người sử dụng Web sẽ được hưởng lợi rất nhiều. . Và ngày 09/11 đánh dấu bước tiến quan trọng của HTML5 khi chinh Adobe tuyên bố sẽ ngừng phát triển Flash trên các thiết bị di động mà thay vào đó là tập trung phát triển HTML5. Với giới công nghệ, đây có thể là một bước ngoặt quan trọng. Adobe cho biết họ vẫn sẽ tung các bản sửa lỗi, nhưng sẽ không phát [...]... - 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ợ 2 Những điểm mới trong CSS 3 Các bộ chọn mới Bộ chọn CSS đề cập đến cách thức để định kiểu các phần tử HTML theo một bảng định kiểu Ví dụ, để đặt một đường viền xung quanh tất cả các. .. 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 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... 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 để 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ộ Khi phát triển 1 website, điều cần làm là phải sơ bộ phát triển được khung, nội dung, tính năng website Với HTML5 việc phát... cài đặt các ứng dụng dễ dàng hơn Các ứng dụng chạy mã JavaScript từ ứng dụng lưu trữ HTML5 ngoại tuyến và hoạt động ngay cả khi kết nối Web đang hoạt động Nguyễn T rí Đức- KHMT K18 16 HTML5 sẽ đơn giản hóa chia nhỏ dữ liệu với cyborg data Đối với việc chia nhỏ dữ liệu từ các trang web thì HTML không giúp được nhiều ngoại trừ giúp trình duyệt nơi đặt dữ liệu Microformats trong HTML5 cung cấp các phương... cũng bao gồm nhiều tính năng mới khác, gồm sự hỗ trợ cho các giá trị màu mới, đặc biệt là HSL (Hue, Saturation, Lightness) và hai giá trị màu có các đặc tính alpha — RGBA (Red, Green, Blue, Alpha) và HSLA (Hue, Saturation, Lightness, Alpha) Nguyễn T rí Đức- KHMT K18 27 3 Các nguyên tắc sáng tạo được ứng dụng trong CSS 3 Nguyên tắc chuyển sang chiều khác Thay vì phải sử dụng hình ảnh để hiển thị màu... được làm dày hơn các thành phần còn lại 4 Nguyên tắc phản đối xứng Nội dung: Chuyển đối tượng có hình dạng đối xứng thành không đối xứng Ví dụ: Các loại xe 2 bánh muốn ứng được thì phải có một độ nghiêng so với phương thẳng ứng nếu dùng 1 chân chống Việc phá vỡ đối xứng này làm cho xe ứng vững được 5 Nguyên tắc kết hợp Nội dung: Kết hợp các đối tượng khác nhau để cùng thực hiện một công việc chung... khái niệm này nằm trong khái niệm khác, lý thuyết này nằm trong lý thuyết khác, chung hơn Ví dụ: Có nhiều định lí chứa trong một tiên đề Đến khi cần thiết có thể sử dụng định lí để chứng minh mà không cần làm thao tác chứng mình từ tiên đề tới định lí 8 Nguyên tắc phản trọng lượng Nội dung: nguyên tắc này có nghĩa là bù trừ Ví dụ: các loại lưới đánh cá, để lưới có thể thẳng ứng trong môi trường nước,... KHMT K18 26 Các phông chữ Web Các phông chữ Web đã thực sự được đề xuất cho CSS2 và đã có sẵn trong Microsoft Internet Explorer từ phiên bản 5 nhưng việc này đòi hỏi sử dụng định dạng phông chữ eot độc quyền (Embedded Open Type - Kiểu mở nhúng), và không ai trong số các nhà cung cấp trình duyệt khác lại chọn triển khai nó Do đó các phông chữ Web không bao giờ thực sự được chọn trên các trang Web dựa vào... thông trong kinh tế sẽ ra sao Ví dụ: Việc sử dụng chất xúc tác trong các phản ứng hoá học 25 Nguyên tắc tự phục vụ Nội dung: Đối tượng phải tự phục vụ bằng cách thực hiện các thao tác phụ trợ, sửa chữa Nguyên tắc tự phục vụ phản ánh khuynh hướng phát triển: đối tượng dần tiến đến tự động thực hiện công việc hoàn toàn, nói cách khác, vai trò tham gia của con người sẽ dần tiến tới không Cao hơn nữa, khi các. .. việc sử dụng HTML sẽ làm giảm đi các rủi ro do lỗ hỏng an ninh trước đó 6 Nguyên tắc dự phòng 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 như thẻ , Tuy nhiên, các 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 7 Nguyên tắc sử dụng trung . THU HOẠCH MÔN HỌC PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC Đề tài CÁC NGUYÊN LÝ SÁNG TẠO ỨNG DỤNG TRONG CÔNG NGHỆ WEB THẾ HỆ MỚI Giảng viên hướng dẫn : GS-TSKH. Hoàng Văn Kiếm . đã có những kiến thức căn bản về các nguyên lí sáng tạo. Vận dụng các nguyên lí sáng tạo vào nghiên cứu khoa học là rất quan trọng. Nó giúp các ứng dụng sáng tạo hoạt động linh hoạt và hiệu. CSS 23 Các nguyên tắc sáng tạo trong giai đoạn đầu của CSS 23 2. Những điểm mới trong CSS 3 25 Nguyễn Trí Đức- KHMT K18 5 3. Các nguyên tắc sáng tạo được ứng dụng trong CSS 3 28 Nguyên tắc