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" - Đại học Quốc gia Thành phố Hồ Chí Minh-Trường Đại học Khoa học Tự nhiên - Năm 2012 - Nguyễn Trí Đức

Nội dung text: 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" - Đại học Quốc gia Thành phố Hồ Chí Minh-Trường Đại học Khoa học Tự nhiên - Năm 2012 - Nguyễn Trí Đức

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 1
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 2
3. NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Nguyễn Trí Đức- KHMT K18 3
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 4
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 5
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 6
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 7
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ụ: 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ụ: . 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à: Nguyễn Trí Đức- KHMT K18 8
9. - 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ự “ ”. 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 9
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 Trí Đức- KHMT K18 10
11. triển Flash trên các thiết bị di động nữa, và Flash Player 11.1 sẽ là phiên bản nâng cấp cuối cùng. Cấu trúc mới HTML 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, sánh sủa hơn Cấu trúc của HTML 4 Nguyễn Trí Đức- KHMT K18 11
12. Cấu trúc mới của HTML 5 HTML 5 cũng đã đơn giản hóa kiểu khai báo Doctype cho trang web HTML: HTML5: Form 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 time datetime-local number date range month email week url Dữ liệu nhập vào đều được kiểm tra tính đúng đắn trước khi gửi dữ liệu đến server. Ví dụ sau kiểm tra tính đúng đắn của dữ liệu nhập “email” với thuộc tính novalidate E-mail: Nguyễn Trí Đức- KHMT K18 12
13. Nhập liệu sai định dạng Nhập liệu đúng định dạng: Tag HTML mới HTML 5 bổ sung thêm khoản gần 30 tag mới, đồng thời khoảng 15 tag của phiên bản trước không được hỗ trợ trong phiên bản này. Tham khảo HTML5 có một vài tag được xem là điểm nhấn về media trên web. Đó là tag Canvas, Video, Audio. Tag Canvas 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ể dễ dàng phát hành game sử dụng Canvas. Tham khảo tại địa chỉ: Tag 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. Điều khác biệt ở đây là không cần sự hỗ trợ plug-in của bên thứ 3. Một ví dụ cho thẻ Video: Kết quả việc play video hay audio trở nên cực kỳ đơn giản Nguyễn Trí Đức- KHMT K18 13
14. . SVG SVG là một công nghệ mới dựa trên định dạng XML cho phép tạo các đối tượng đồ họa phức tạp để hiển thị trên trình duyệt. Được bắt đầu phát triển từ 1999, hiện tại phiên bản thứ hai của SVG đã được tổ chức W3C chính thức ra mắt vào tháng 8/2011. 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. Nguyễn Trí Đức- KHMT K18 14
15. HTML 5 Drag và drop Đó là khả năng kéo và thả đối tượng bất kỳ vào 1 vị trí nào đó. Đây là tính năng mới khá hay của HTML5. Tham khảo thêm Web Storage và Application Cache HTML5 cung cấp một tính năng lưu trữ dữ liệu tại client với dung lượng giới hạn lớn hơn nhiều so với cookie. Tính năng này được gọi là Web Storage và được chia thành hai đối tượng là localStorage và sessionStorage - SessionStorage: giới hạn trong một cửa sổ hoăc thẻ của trình duyệt. Một trang web được mở trong hai thẻ của cùng một trình duyệt cũng không thể truy xuất dữ liệu lẫn nhau. Như vậy, khi đóng trang web thì dữ liệu lưu trong sessionStorage hiện tại cũng bị xóa. - LocalStorage: có thể truy xuất lẫn nhau giữa các cửa sổ trình duyệt. Dữ liệu sẽ được lưu trữ không giới hạn thời gian. Hiện nay, mỗi cookie chỉ cho phép lưu trữ tối đa 4KB và vài chục cookie cho một domain. Vì thế cookie chỉ được dùng để lưu trữ những thông tin đơn giản và ngắn gọn như email, username, giúp người dùng đăng nhập tự động vào trang web. Điều này khiến cho những trang web muốn nâng cao hiệu suất làm việc bằng cách cache dữ liệu tại client hầu như không thể thực hiện được. Sự xuất hiện của Web Storage là một điểm nhấn cho việc ra đời các ứng dụng web có khả năng tương tác và nạp dữ liệu tức thì trên trình duyệt. Một hiệu quả nữa là dung lượng truyền tải qua mạng có thể được giảm thiểu đáng kể. Ví dụ một ứng dụng tra cứu sách trực tuyến, các sách đã được tra sẽ được lưu lại trên máy của người dùng. Khi cần tra lại, máy người dùng sẽ không cần kết nối đến server để tải lại những dữ liệu cũ. Với những ứng dụng web có cơ sở dữ liệu nhỏ gọn, lập trình viên có thể thực hiện việc cache “âm thầm” cơ sở dữ liệu xuống client và sau đó người dùng có thể thoải mái tra cứu mà không cần request đến server. Nguyễn Trí Đức- KHMT K18 15
16. 3. Tiện ích HTML5 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. Plug-ins sẽ bị biến mất hoặc không được dùng? . Nếu vẽ hình ảnh, Canvas là thích hợp nhất. Nhưng nếu muốn vẽ một thế giới 3-D đặc biệt, giống như trong các trò chơi Flash và Shockwave phức tạp, phải dùng tới plug-in khi nó có thể kết nối trực tiếp tới video cũng như chạy thế giới game 3-D. 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. Một loạt thư viện đồ họa đẹp được đưa ra, giúp cho đồ 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. HTML5 cho phép các ứng dụng kết nối tới khu vực lưu trữ file Những người lập trình Web thường lưu trữ một lượng lớn thông tin trong các cookies (300 cookies tương đương với 4096 byte). Lập trình viên có thể lưu trữ bất cứ thứ gì họ muốn. Điều này giúp việc 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 Trí Đức- KHMT K18 16
17. 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 pháp tinh xảo giúp việc phân tích dữ liệu dễ dàng hơn. Microformats có thể giúp các lập trình viên có nhiều giải pháp hơn. HTML5 giúp hợp nhất các địa chỉ Đối với máy chủ Web, địa chỉ máy tính đơ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. HTML5 làm video của Web đẹp hơn Chuẩn HTML5 giúp các nhà lập trình tiếp hợp videp dễ dàng hơn với thông tin trên trang, cung cấp các ứng dụng tới lập trình viên jQuery và PHP ngoài Flash, Silverlight hay JavaFX. Mọi người đều muốn cung cấp mã nguồn mở để mở những hình ảnh động và âm thanh tương ứng dẫn đến việc không thống nhất. Chuẩn HTML5 sẽ là mã nguồn mở trung gian, có nghĩa là thay đổi cách gọi từ plug-in thành codec. Mặc dù vẫn còn sự cân nhắc cũng như thiếu sự nhất trí hoàn toàn, 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. HTML5 có thể tăng khả năng bảo mật Mỗi trình duyệt có 1 plug-in riêng do các nhóm lập trình khác nhau lập ra với những tiêu chuẩn khác nhau, được đưa ra vào thời điểm khác nhau và kiểu mẫu bảo mật cung khác nhau. Thông thường, một số phiên bản plug-in mới có tính bảo mật hơn so với loại khác. Và khi số lượng plug-in gia tăng, chúng làm tăng độ phức tạp trong kiểm tra các lỗi an ninh. Thay 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. Nguyễn Trí Đức- KHMT K18 17
18. HTML5 đơn giản hóa việc phát triển web HTML 5 cung cấp 1 ngôn ngữ lập trình JavaScript, 1 kiểu dữ liêu (XML hoặc DOM) và 1 phần nguyên tắc thiết lập (CSS) để kết nối văn bản, audio, video và Đồ họa. Công nghệ web sẽ trên nên dễ dàng và phổ biến khi nó có 1 tiêu chuẩn thống nhất. 4. 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 HTML5 Video là một tính năng rất được chú ý. Html5 video đang là đối thủ cạnh tranh khốc liệt với Flash, html5 video sẽ đi xa hơn với flash với ưu điểm là tốc độ nhanh hơn, dễ dàng hơn với nhà lập trình, thích hợp với các smart phone và nhiều tính năng nữa. Việc xuất hiện tính năng video của HTML sẽ được dần dần thay thế cho Flash. Một thời gian dài 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. Với việc đưa video lên web một cách nhẹ nhàng mà HTML5 đem lại mà không cần cài đặt gì thêm (như plug-in flash) giúp giảm chi phí cài đặt plug- in, đồng thời không mất những khoản chi phí để phát triển các ứng dụng Flash Demo HTML5 Video Tại HTML5VN.NET Đoạn code này đã có thể đưa video lên web mà không cần bất cứ plug-in nào. 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. Vì thế, sẽ không phải phụ thuộc công cụ lập trình nào, chi phí phát triển sản phẩm sẽ được giảm đi. 2. Nguyên tắc tách khỏi HTML đã có cấu trúc đơn giản hơn, loại bỏ một số thứ phức tạp, phiền phức. Nguyễn Trí Đức- KHMT K18 18
19. HTML 5 đã loại bỏ rất nhiều thẻ HTML cũ như , , , , , , , Cấu trúc DOCType cũng được lược bỏ đơn giản hơn HTML: HTML5: 3. 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í hình như sau: Có thể thấy được rằng khi nhập thông tin và nhấn nút “gửi” thì trang web sẽ tự động kiểm tra. Sau đó, nếu không hợp lệ thì hiển thị thông báo “Vui lòng nhập địa chỉ mail”. 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. 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. Nguyễn Trí Đức- KHMT K18 19
20. 4. Nguyên tắc phân nhỏ 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, chia nhỏ dữ liệu trang web được dễ dàng hơn. Ngoài ra 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 dạng url, khi nhập không đúng, HTML 5 sẽ tự động hiển thị thông báo. 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. 5. Nguyên tắc vạn năng HTML5 cho phép 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. 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, người sử dụng phải dùng chiếc máy tính để bàn cồng kềnh cùng trình duyệt web IE để lướt web, thì giờ đây với laptop,smartphone . cùng rất nhiều trình duyệt khác (Firefox, Opera ) người dùng 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 xem trang web này rất tốt, nhưng trên smartphone thì giao diện và cấu trúc trang bị xáo trộn. Hay có thể xem phim rất tốt với IE nhưng với Firefox thì không. Nguyễn Trí Đức- KHMT K18 20
21. 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ừ máy tính để bàn, laptop cho đến smartphone. 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. Đặc biệt các ứng dụng HTML trên smartphone tiết kiệm pin hơn nhiều so với Flash. Ngoài ra, như đã nói phần trên, 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 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 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 Nguyễn Trí Đức- KHMT K18 21
22. 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. 9. Nguyên tắc liên tục tác động có ích Nguyên tắc này phản ánh khuynh hướng phát triển. Sự xuất hiện của Web Storage là một điểm nhấn cho việc ra đời các ứng dụng web có khả năng tương tác và nạp dữ liệu tức thì trên trình duyệt. Một hiệu quả nữa là dung lượng truyền tải qua mạng có thể được giảm thiểu đáng kể. Ví dụ một ứng dụng tra cứu sách trực tuyến, các sách đã được tra sẽ được lưu lại trên máy của người dùng. Khi cần tra lại, máy người dùng sẽ không cần kết nối đến server để tải lại những dữ liệu cũ. Nguyễn Trí Đức- KHMT K18 22
23. PHẦN II CSS 3 1. Lịch sử phát triển của CSS CSS là chữ viết tắt của cụm từ tiếng anh (Cascading Style Sheet), CSS được tổ chức World Wide Web (W3C) giới thiệu vào năm 1996. CSS chỉ đơn thuần là một file có phần mở rộng là .css, trong file này chứa những câu lệnh CSS, mỗi câu lệnh css sẽ định dạng một thành phần nhất định của tài liệu HTML như màu sắc, font chữ, . . Thế mạnh của CSS - Tách riêng phần định dạng ra khỏi nội dung trang web. - CSS giúp người thiết kế kiểm soát toàn bộ giao diện nhanh nhất và hiệu quả nhất. Nó giúp tiết kiệm công sức rất nhiều trong việc thiết kế giao diện. - Do được tách rời khỏi nội dung của trang web, nên các mã HTML sẽ gọn gàng hơn, giúp thuận tiện hơn trong việc chỉnh sửa giao diện. Kích thước của file .html cũng được giảm đáng kể. Hơn thế nữa sẽ được trình duyệt tải một lần và dùng nhiều lần (cache), do đó giúp trang web được load nhanh hơn. 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. 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ụ: Nguyễn Trí Đức- KHMT K18 23
24. body{ font-family: inherit; margin: 0; vertical-align: padding: 0; baseline; font-weight: inherit; border-left:0; font-style: inherit; } font-size: 100%; Một thẻ HTML còn có thể kết hợp nhiều khai báo của CSS. Ví dụ: “giua” và “dau” 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 “giua” 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 “dau” 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; } Nguyễn Trí Đức- KHMT K18 24
25. 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ợ. 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 phần tử sử dụng bộ chọn div: div { border: 1px solid #000; }. Để quét một màu nền cho tất cả các phần tử có làm nổi bật lớp, sử dụng bộ chọn: .highlight { background-color: yellow; }. Để thay đổi độ rộng của một phần tử có giá trị thuộc tính ID là myDiv, sử dụng: #myDiv { width: 250px; }. Ngoài các bộ chọn đơn giản này, CSS cũng bao gồm một loạt các bộ chọn phức tạp hơn. Ví dụ, có thể sử dụng bộ chọn input[type="text"] để chọn chỉ các phần tử đầu vào có chứa một kiểu thuộc tính có giá trị là text hoặc sử dụng lớp-giả: hover để định kiểu một phần tử khi chuột ở trên nó, ví dụ: a:hover { color: red; }. Tất cả các bộ chọn đều được cung cấp để làm cho việc chọn lựa một phần tử theo kiểu dáng dễ dàng hơn. Với CSS3, thậm chí có nhiều bộ chọn mới hơn đã được thêm vào hòa trộn tất cả chúng đều giúp nhà phát triển thực hiện dễ dàng hơn và làm giảm số lượng mã HTML và JavaScript cần phải viết. Nguyễn Trí Đức- KHMT K18 25
26. Các bộ chọn thuộc tính: E[foo^="bar"] Chọn một phần tử, E, mà thuộc tính foo của nó bắt đầu chính xác bằng chuỗi bar E[foo$="bar"] Chọn một phần tử, E, mà thuộc tính foo của nó kết thúc chính xác bằng chuỗi bar E[foo*="bar"] Chọn một phần tử, E, mà thuộc tính foo của nó chứa chuỗi bar Các lớp-giả có cấu trúc E:root Chọn một phần tử, E, gốc của tài liệu (thẻ ) E:nth-child(n) Chọn một phần tử, E, phần tử con thứ n của phần tử cha mẹ E:nth-last-child(n) Chọn một phần tử, E, phần tử con cuối cùng thứ n của phần tử cha mẹ E:nth-of-type(n) Chọn một phần tử, E, phần tử anh chị em thứ n của kiểu Các hiệu ứng mới Các hiệu ứng này được đơn giản hóa thông qua một loạt các đặc tính CSS mới,bao gồm: • nền • hình bóng-hộp (bóng rơi trên các hộp • mẫu-nền không có hình ảnh) • gốc-nền • kích thước-hộp • kích thước-nền • độ mờ • bán kính-đường viền (các góc được • khoảng trống-đường bao làm tròn) • chỉnh lại kích thước • hình ảnh-đường viền • tràn-văn bản • màu sắc-đường viền (các đườmg viền • hình bóng-văn bản gradient) • bọc-từ Tham khảo Nguyễn Trí Đức- KHMT K18 26
27. 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 CSS2. Tuy nhiên, với các phiên bản mới nhất của các trình duyệt Firefox, Safari, Chrome, và Opera, có thể sử dụng quy tắc @font-face để sử dụng bất kỳ các phông chữ được cấp phép .ttf (TrueType) hoặc .otf (OpenType) trên trang Web của mình. Có thể sử dụng phông chữ này theo các quy tắc CSS riêng của lập trình viên, chẳng hạn như: article p { font-family: Alexa, Arial, Helvetica, sans-serif; }. Các tính năng mới khác CSS3 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 Trí Đức- KHMT K18 27
28. 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 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. Nguyên tắc phân nhỏ CSS3 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. CSS3 còn phân nhỏ để xử lý kiểu cho một số các sự kiện cơ bản CSS3 có sự hỗ trợ riêng cho từng trình duyệt, 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. 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. 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. Nguyễn Trí Đức- KHMT K18 28
29. 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. 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. Nguyễn Trí Đức- KHMT K18 29
30. PHẦN III. 40 nguyên lý sáng tạo 1. Nguyên tắc phân nhỏ: Nội dung: Chia đối tượng thành các thành phần nhỏ hơn, độc lập nhau, để giải quyết từng thành phần một. Ví dụ: bàn ghế giường tủ thường được đóng từ nhiều mảnh ván ghép lại với nhau. Mỗi mảnh ván như vậy vừa dễ tìm, khi vận chuyển cũng dễ dàng tháo rời. Không ai lại đi kiếm một thân cây bằng cái bàn rồi ngồi đẽo cho ra cái bàn cả. 2. Nguyên tắc tách khỏi đối tượng: Nội dung: Tách những thành phần đặc biệt ra khỏi đối tượng, những thành phần này có thể là quan trọng, hoặc dễ hư hỏng. Ví dụ: Đối với các loại thiết bị điện có sử dụng pin, thì thường tuổi thọ của pin ngắn hơn nhiều so với thiết bị. Do vậy người ta thiết kế để có thể tháo pin ra khỏi thiết bị để thay thế khi hết pin. 3. Nguyên tắc phẩm chất cục bộ Nội dung: Mỗi thành phần của đối tượng đóng vai trò khác nhau cũng như hoạt động trong điều kiện khác nhau trong hoạt động của đối tượng. Chính vì vậy mà từng thành phần cần có những phẩm chất khác nhau để phù hợp với tình huống của mình. Ví dụ: Để bảo vệ sách, bìa sách thường đượ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. Ví dụ: Nhiều chià khoá kết hợp lại thành chùm chià khoá, tránh thất lạc. Bút chì thường đi chung với cục tẩy. 6. Nguyên tắc vạn năng Nội dung: Đối tượng thực hiện một số chức năng khác nhau (mà không cần thêm sự hỗ trợ từ đối tượng khác) Ví dụ: Điện thoại di động vừa có thể nghe gọi, vừa có thể nghe nhạc xem phim. 7.Nguyên tắc “chứa trong” Nguyễn Trí Đức- KHMT K18 30
31. Nội dung: Một đối tượng được đặt bên trong đối tượng khác và bản thân nó lại chứa đối tượng con nhỏ hơn. "Chứa trong" cần hiểu theo nghiã rộng, không chỉ đơn thuần theo nghiã không gian. Ví dụ, 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, người ta dùng chì (phần nặng) để đơm vào phía đáy lưới, còn phao (phần nhẹ) để đơm vào phía đầu lưới. Khi thả lưới, chì chìm xuống, phao nổi lên làm lưới thẳng đứng, cá di chuyển ngang qua sẽ bị dính lại. 9.Nguyên tắc gây ứng suất sơ bộ Nội dung: Gây ứng suất trước với đối tượng để chống lại ứng suất không cho phép hoặc không mong muốn khi đối tượng làm việc (hoặc gây ứng suất trước để khi làm việc sẽ dùng ứng suất ngược lại ). Muốn thu được kết quả thì cần phải thực hiện. Tinh thần chung của nguyên tắc này là muốn gặt thì phải gieo trồng, chăm bón, đầu tư từ trước đó. Ví dụ: Khí, gas được nén trong các bình chứa và mở ra dùng dần nhờ áp suất cao trong bình. 10. Nguyên tắc thực hiện sơ bộ Nội dung: Thực hiện trước sự thay đổi cần có, làm trước một số bước, hoàn toàn hoặc từng phần, đối với đối tượng. Thủ thuật này đòi hỏi phải tính đến khả năng thực hiện trước đi một phần hoặc toàn bộ và sẽ được lợi hơn nhiều so với thực hiện ở thì hiện tại (hiểu theo nghiã tương đối). Cần có sự chuẩn bị trước đó một cách toàn diện, chu đáo và thực hiện trước những gì có thể thực hiện được Ví dụ: Các loại giấy tờ in sẵn trước những phần chung cho tất cả mọi người để tiết kiệm thời gian, chỉ cần điền vào chỗ trống. Đặc biệt trong các giấy thăm dò ý kiến, các câu trả lời cũng được in sẵn, người được hỏi ý kiến chỉ việc đánh dấu là xong. 11. Nguyên tắc dự phòng Nội dung: Bù đắp độ tin cậy không lớn của đối tượng bằng cách chuẩn bị trước các phương tiện báo động, ứng cứu, an toàn. Nguyễn Trí Đức- KHMT K18 31
32. Thực ra đây chính là quản lí rủi ro. Việc làm này có thể làm tăng thêm chi phí, tuy nhiên nó làm giảm đáng kể những sự hư hại có thể xảy ra khi gặp sự cố. Nó rất cần bởi vì các kế hoạch, dự án, công việc không có gì là đảm bảo thành công tuyệt đối. Ví dụ: Các phương tiện báo cháy, phòng cháy, chữa cháy, các phao, xuồng cấp cứu trên các tàu thủy, bảo hiểm thân thể, sức khỏe. 12. Nguyên tắc đẳng thế Nội dung: Thay đổi điều kiện làm việc để không phải nâng lên hay hạ xuống các đối tượng Tinh thần chung của nguyên tắc này là phải đạt được kết quả cần thiết với năng lượng, chi phí ít nhất. Ví dụ: Đường lên núi làm theo kiểu xoáy trôn ốc để đường dốc thoai thoải, dễ leo. 13. Nguyên tắc đảo ngược Nội dung: Thay vì hành động như yêu cầu bài toán, hãy hành động ngược lại. Bản thân các sự việc hiện tượng đều chưa trong mình các mặt đối lập, và những thành phần trong đối tượng có thể là có lợi hoặc hại cho đối tượng Làm ngược lại có thể biến hại thành lợi, biến lợi thành hại, cho đối tượng có thêm những chức năng, tính chất, khả năng mới. Ví dụ: Loại băng chuyền chạy về một phía, người trên đó chạy về phía ngược lại dùng để tập chạy trong nhà. 14.Nguyên tắc cầu ( tròn ) hoá Nội dung: Chuyển những phần thẳng của đối tượng thành cong, mặt phẳng thành mặt cầu, kết cấu hình hộp thành kết cấu hình cầu, chuyển động thẳng thành chuyển động tròn. Nguyên tắc cầu (tròn) hoá nói lên sự đa dạng: đường thẳng chỉ có một nhưng đường cong thì có vô số. Do vậy. cách tiếp cận không nên quá cứng nhắc. Ví dụ: Nhà hàng có bàn tròn quay quanh một trục, để khách không phải với tay gắp thức ăn. 15. Nguyên tắc linh động Nội dung: Thay đổi các đặt trưng của đối tượng hay môi trường bên ngoài sao cho chúng tối ưu trong từng giai đoạn làm việc. Tinh thần chung của "nguyên tắc linh động" là, đối tượng phải có những đa dạng phù hợp với sự thay đổi đa dạng của bên ngoài để đem lại hiệu quả cao nhất. Nguyên tắc linh động tạo sự thống nhất giữa "tĩnh" và "động", "cố định" và "thay đổi" Ví dụ: Các loại bàn, ghế, giường xếp hoặc thay đổi được độ cao, độ nghiêng. Nguyễn Trí Đức- KHMT K18 32
33. 16. Nguyên tắc giải “thiếu” hoặc “thừa” Nội dung: 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 có thể trở nên đơn giản hơn và dễ giải hơn. Tinh thần chung của nguyên tắc này là không nên quá cầu toàn, chờ đợi các điều kiện lý tưởng rồi mới thực hiện. Trong nhiều tính huống chấp nhận kết quả ở mức tương đối nhưng ch phí thấp. Ví dụ: các loại kim loại thường chỉ được luyện tới mức tinh khiết thấp hơn 100%, bời vì mức 100% thì chi phí rất lớn. 17. Nguyên tắc chuyển sang chiều khác Nội dung: Hãy nhìn vấn đề hoặc giải quyết vấn đề theo một hướng khác Cần rèn luyện cách nhìn đối tượng từ những góc độ, những "chiều" khác nhau để thấy hết các khiá cạnh, các mặt, các tính chất Ví dụ: loại tranh, tùy theo góc nhìn, thấy những hình khác nhau. 18. Sử dụng các dao động cơ học Nội dung: Làm đối tượng dao động. Nếu đã có dao động, tăng tầng số dao động Thủ thuật này liên quan trực tiếp đến việc sử dụng kiến thức. Dao động cơ học, sóng âm là những hiện tượng rất phổ biến trong tự nhiên. Để sử dụng tốt các hiện tượng, hiệu ứng này, cần có sự hiểu biết về chúng một cách khoa học. Ví dụ: Quả chuông, ghế xích đu, võng, cầu bập bênh cho trẻ em chơi. 19. Nguyên tắc tác động theo chu kỳ. Nội dung: Chuyển tác động liên tục thành tác động theo chu kỳ Nguyên tắc tác động theo chu kỳ còn có ý nghiã đối với con người chứ không chỉ riêng đối với máy móc. Ví dụ, các kết quả nghiên cứu cho thấy, ánh sáng nhấp nháy, âm thanh thay đổi ngắt quãng gây sự chú ý tốt hơn là chiếu sáng liên tục hoặc âm thanh đều đều. Ví dụ: Các loại đèn chớp nháy dùng cho quảng cáo, khiêu vũ, tín hiệu báo động, giao thông 20. Nguyên tắc liên tục tác động có ích Nội dung: Thực hiện công việc một cách liên tục (tất cả các phần của đối tượng cần luôn luôn làm việc ở chế độ đủ tải). Nguyên tắc này phản ánh khuynh hướng phát triển, do vậy rất có tác dụng trong việc đánh giá, phê bình những giải pháp đã có, đặt và lực chọn những bài toán, dự báo về sự phát triển. Ví dụ: Ô tô vận tải, chuyến đi, chuyến về phải chở hàng, tránh chạy không. 21. Nguyên tắc “vượt nhanh”. Nguyễn Trí Đức- KHMT K18 33
34. Nội dung: Vượt qua các giai đoạn có hại hoặc nguy hiểm với vận tốc lớn, hoặc vượt nhanh để có được hiệu ứng cần thiết. Nếu tác động là nguy hiểm, có hại thì có thể làm nó không còn có hại nữa bằng cách gim thời gian tác động đến tối thiểu, nói cách khác, phải vượt thật nhanh để có độ an toàn cao. Tinh thần chung của nguyên tắc này là cần xem xét, chú ý đến khả năng làm tăng năng suất công việc. Ví dụ: Để tránh đau đớn cho bệnh nhân, những thao tác như tiêm chủng, nhổ răng, nắn khớp xương thường làm rất nhanh. 22. Nguyên tắc biến hại thành lợi Nội dung: Sử dụng những tác nhân có hại (thí dụ tác động có hại của môi trường) để thu được hiệu ứng có lợi. "Lợi" và "hại" chỉ mang tính chủ quan và tương đối. Trên thực tế, đây chỉ là hai mặt đối lập của hiện thực khách quan, vấn đề là làm sao trong cái hại tìm ra được cái lợi phục vụ con người và hài hòa với tự nhiên. Ví dụ: Người ta biến sức tàn phá của lũ lụt thành điện năng bằng cách xây dựng các hồ chứa nước và nhà máy thuỷ điện. 23. Nguyên tắc quan hệ phản hồi Nội dung: Thiết lập quan hệ phản hồi. Nguyên tắc này phản ánh khuynh hướng phát triển: làm tăng tính điều khiển đối tượng, tự động hoá cho nên rất có ích cho việc suy nghĩ định hướng hay lựa chọn bài toán, cách tiếp cận, dự báo. Ví dụ: Các loại rờle đóng ngắt tự động cho máy làm việc hay ngừng; tùy theo nhiệt độ, cường độ dòng điện, mực nước, áp suất, độ ẩm 24. Nguyên tắc sử dụng trung gian Nội dung: Sử dụng đối tượng trung gian, chuyển tiếp. Trong một số trường hợp, "trung gian" là sự đòi hỏi khách quan, thiếu nó hoạt động của hệ thống sẽ kém hiệu quả. Ví dụ, tiền là hàng hoá trung gian, ta thử tưởng tượng không có tiền thì sự lưu 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 đối tượng nhân tạo được thay Nguyễn Trí Đức- KHMT K18 34
35. thế bằng các quá trình có sẵn trong tự nhiên thì "tự phục vụ" sẽ đạt được mức lý tưởng. Tinh thần của nguyên tắc này đặc biệt có ý nghiã đối với việc giáo dục, đào tạo. Phải làm sao để có được những con người biết tự học, tự rèn luyện, tự giác hành động theo những qui luật phát triển của hiện thực khác quan Ví dụ: Các cửa hàng tự giác, các nhà ăn tự phục vụ. 26. Nguyên tắc sao chép (copy) Nội dung: 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. Một vài tác dụng và ví dụ: Từ "sao chép" cần hiểu theo nghiã rộng: phản ánh những cái chính của đối tượng, cần thiết cho việc giải bài toán, nếu như làm trực tiếp với đối tượng gặp khó khăn. Ví dụ: Các loại bản đồ, sơ đồ, hình vẽ, ảnh chụp, đồ thị 27. Nguyên tắc “rẻ” thay cho “đắt” Nội dung: Thay thế đối tượng đắt tiền bằng bộ các đối tượng rẻ có chất lượng kém hơn (thí dụ như về tuổi thọ). "Rẻ" thay cho "đắt" có thêm được những tính chất mới như có thể sản xuất nhanh, nhiều, thay đổi mẫu mã, kiểu dáng nhanh chóng Cần chú ý tới khả năng nâng chất lượng kèm theo hạ giá thành của đối tượng. Để làm được việc này cần khai thác các nguồn dự trữ có sẵn, đặc biệt những nguồn dự trữ trời cho không mất tiền. Ví dụ: Ly chén diã bằng giấy hoặc nhựa rẻ tiền, dùng một lần, đảm bảo vệ sinh, dùng tại những nơi không có điều kiện rửa hoặc cần phải tiết kiệm thời gian. 28. Thay thế sơ đồ cơ học Nội dung: Thay thế sơ đồ cơ học bằng điện, quang, nhiệt, âm hoặc mùi vị. Nguyên tắc này phản ánh khuynh hướng phát triển: những gì trước đây và bây giờ còn là "cơ học" sẽ chuyển thành "không cơ học" (dùng điện, từ, điện từ, ánh sáng ), và những trường mới sẽ mang tính chất "phẩm chất cục bộ". Điều này sẽ làm tăng tính điều khiển và tăng tính hiệu quả của đối tượng vì có thể sử dụng những hiệu ứng ở mức vi mô. Ví dụ: Bàn tính, máy tính quay tay cơ học chuyển sang máy tính điện, điện tử, quang-điện tử. 29. Sử dụng các kết cấu khí và lỏng Nội dung: Thay cho các phần của đối tượng ở thể rắn, sử dụng các chất khí và lỏng: nạp khí, nạp chất lỏng, đệm không khí, thủy tĩnh, thủy phản lực. Nguyễn Trí Đức- KHMT K18 35
36. Xét về một khiá cạnh nào đấy, các kết cấu khí và lỏng có những ưu điểm hơn chất rắn như linh động, dễ điều khiển, môi trường xung quanh luôn có nhiều không khí và nước, dễ khai thác Ví dụ: Tàu, xe chạy trên đệm không khí. 30. Sử dụng vỏ dẻo và màng mỏng Nội dung: Cách ly đối tượng với môi trường bên ngoài bằng các vỏ dẻo và màng mỏng. Thủ thuật này liên quan đến bề mặt, lớp ngăn cách đối tượng, tại đó có những yêu cầu mà kết cấu khối không đáp ứng được hoặc đáp ứng nhưng với mức độ hiệu quả không lớn. Vỏ dẻo và màng mỏng có nhiều ưu điểm như nhẹ, linh động, chiếm ít không gian, có chức năng bảo vệ tốt, cho phép đối tượng có những bề mặt đa dạng về trang trí, mỹ thuật, tiết kiệm nguyên vật liệu Ví dụ: Các loại bao bì, túi nylong, áo đi mưa, khăn trải bàn nilong 31. Sử dụng các vật liệu nhiều lỗ Nội dung: Làm đối tượng có nhiều lỗ hoặc sử dụng thêm những chi tiết có nhiều lỗ (miếng đệm, tấm phủ ) Vật liệu nhiều lỗ có nhiều ưu điểm như nhẹ, cách nhiệt, cách âm tốt, tiết kiệm nguyên vật liệu, có thể dùng làm những thiết bị lọc, có tổng diện tích nhỏ nhưng tổng diện tích các lỗ rất lớn Ví dụ: Các loại bao bì, phương tiện đóng gói làm từ vật liệu xốp. 32. Nguyên tắc thay đổi màu sắc Nội dung: Thay đổi màu sắc hay độ trong suốt của đối tượng hay môi trường bên ngoài Trong năm giác quan của con người, thị giác phát triển và đóng vai trò quan trọng nhất: hơn 90% thông tin nhận được từ thế giới bên ngoài và qua con đường thị giác. Các hình vẽ, ký hiệu thích hợp rất có tác dụng, giúp cho suy nghĩ thoáng, thấy được các mối liên hệ giữa các bộ phận. Nếu có thể, nên vẽ sơ đồ khối, chúng giúp không chỉ thấy cây mà còn thấy rừng. Ví dụ: Bảng hiệu dùng sơn phát quang dễ nhìn trong bóng tối. 33. Nguyên tắc đồng nhất Nội dung: Những đối tượng, tương tác với đối tượng cho trước, phải được làm từ cùng một vật liệu (hoặc từ vật liệu gần về các tính chất) với vật liệu chế tạo đối tượng cho trước. Nguyễn Trí Đức- KHMT K18 36
37. Tinh thần cùa thủ thuật này có thể hiểu là, phải làm sao bảo đảm và tăng tính tương hợp giữa những đối tượng, tương tác với đối tượng cho trước. Sự tương hợp này thể hiện ở nhiều mặt, không riêng gì về vật liệu. Ví dụ: Phải chọn cùng nhóm máu mới truyền được. 34. Nguyên tắc phân hủy hoặc tái sinh các phần Nội dung: Phần đối tượng đã hoàn thành nhiệm vụ hoặc trở nên không cần thiết phải tự phân hủy (hoà tan, bay hơi ) hoặc phải biến dạng. Ví dụ: Tên lửa nhiều tầng, dùng xong phần nào, vứt bỏ tầng ấy. 35. Thay đổi các thông số hoá lý của đối tượng Nội dung: Thay đổi trạng thái đối tượng: như nồng độ, độ dẻo, nhiệt độ, thể tích Khi thay đổi thông số, cần chú ý : lượng đổi, chất đổi" để có được những tính chất mới mà trước đây, đối tượng chưa có. Ví dụ: Để giữ thực phẩm tươi lâu, không hỏng, người ta làm đông lạnh chúng. 36. Sử dụng chuyển pha Nội dung: Sử dụng các hiện tượng nảy sinh trong quá trình chuyển pha như : thay đổi thể tích, toả hay hấp thu nhiệt lượng Sử dụng những hiệu ứng nảy sinh chính vào lúc chuyển pha, thường là những hiệu ứng mang tính nhảy vọt. Sử dụng chuyển pha cũng là một cách cụ thể hoá việc sử dụng những nguồn dự trữ có sẵn trong đối tượng. Ví dụ: Người ta thường cho nước đá vào các đồ uống giải khát để làm mát chúng. Ở đây sử dụng hiện tượng hấp thu nhiệt lượng khi nước chuyển từ trạng thái rắn sang trạng thái lỏng. 37. Sử dụng sự nở nhiệt Nội dung: Sử dụng sự nở (hay co) nhiệt của các vật liệu. Ví dụ: Các loại nhiệt kế sử dụng hiệu ứng nở nhiệt. 38. Sử dụng các chất ôxy hoá mạnh Nội dung: Thay không khí thường bằng không khí giàu ôxy. Ôxy rất cần cho sự cháy, nổ, thực hiện các phản ứng cần thiết, cho sự sống, thường được dùng để làm các quá trình xảy ra nhanh hơn, tạo các lớp ôxít bảo vệ, cải tạo môi trường bị ô nhiễm, chống các vi trùng kị khí. Ví dụ: Các bình nén chứa ôxy dùng cho cắt hàn kim loại, dùng cho y tế. 39. Thay đổi độ trơ Nguyễn Trí Đức- KHMT K18 37
38. Nội dung: Thay môi trường thông thường bằng môi trường trung hòa, đưa vào các chất, phụ gia trung hòa. Thủ thuật này có phần ngược với 38. sử dụng các chất ôxy hoá mạnh, được sử dụng để tránh nhũng quá trình ôxy hoá không mong muốn. Ví dụ: Các loại bóng đèn được hút chân không hoặc được bơm các khí trơ. 40. Sử dụng các vật liệu hợp thành (composite) Nội dung: Chuyển từ các vật liệu đồng nhất sang sử dụng những vật liệu hợp thành (composite). Hay nói chung, sử dụng các vật liệu mới. Vật liệu hợp thành (composite), là loại vật liệu gồm nhiều thành phần cấu tạo nên, có những tính chất mới mà không thể qui những tính chất đó thành những tính chất của từng thành phần riêng rẽ. Hướng nghiên cứu, chế tạo các loại vật liệu mới, có những tính chất độc đáo, thoả mãn các nhu cầu phát triển luôn mang tính thời sự. Các vật liệu hợp thành, do tạo được tính hệ thống, càng ngày càng được sử dụng rộng rãi trong kỹ thuật và đời sống. Ví dụ: Vật liệu trên còn làm gậy trượt tuyết vì bền và nhẹ hơn so với gậy nhôm, gậy trúc. Sào nhảy cao cũng vậy. Nguyễn Trí Đức- KHMT K18 38
39. KẾT LUẬN Qua tất cả những phân tích, những nhìn nhận trong bài thu hoạch này, chúng ta đã thấy rõ hơn vai trò của 40 nguyên tắc sáng tạo trong tất cả các lĩnh vực của đời sống đặc biệt là lĩnh vực tin học. Mỗi nguyên tắc không chỉ gợi cho ta những hướng để giải quyết vấn đề mà bản thân nó cũng có thể là một câu trả lời mà ta đang tìm kiếm. Thật vậy, dù muốn hay không, dù cố ý hay vô tình thì các nguyên tắc này vẫn nằm trong sản phẩm sáng tạo. Do đó, việc nắm vững 40 nguyên tắc sáng tạo này có thể coi là việc thiết yếu, một điều cốt lõi mang đến sản phẩm và sự sáng tạo và cả sự thành công. Hiện nay việc đẩy mạnh các hoạt động khoa học, sáng tạo càng trở nên cấp thiết hơn bao giờ hết. Và con đường ngắn nhất dẫn đến các hoạt động sáng tạo đó chính là nắm vững và vận dụng 40 nguyên tắc sáng tạo vào các hoạt động bình thường nhất. HTML 5 và CSS 3 hiện nay đã được phổ biến rộng rãi hơn trước. Hy vọ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. Nguyễn Trí Đức- KHMT K18 39
40. TÀI LIỆU THAM KHẢO 1. Phan Dũng, Phương pháp luận sáng tạo khoa học kỹ thuật. 2. Slide Phương pháp nghiên cứu khoa học trong tin học, GS.TSKH Hoàng Kiếm. 3. Giải một bài toán trên máy tính như thế nào, GS.TSKH Hoàng Kiếm. 4. Website tham khảo: Nguyễn Trí Đức- KHMT K18 40