ỨNG DỤNG PHƯƠNG PHÁP SÁNG TẠO SCAMPER TRONG NGÔN NGỮ HTML5

Nhưng có những bất tiện đối với các pluginnày như: phải cài đặt cho trình duyệt web, ngốn tài nguyên máy tính, duyệt webtrên điện thoại sẽ chậm hơn… Đương nhiên những bất tiện nêu trên

Bài thu hoạch môn:

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

Đề tài:

ỨNG DỤNG PHƯƠNG PHÁP SÁNG TẠO SCAMPER TRONG NGÔN NGỮ

HTML5

GVHD: GS.TSKH Hoàng Kiếm HVTH: Trần Nguyễn Tuấn Duy MSHV: CH1201023

LỚP: CHK7

TPHCM, Tháng 4 năm 2013

NHẬN XÉT CỦA GVHD

MỤC LỤC

MỤC LỤC……….3

LỜI NÓI ĐẦU

CHƯƠNG I - PHƯƠNG PHÁP SÁNG TẠO SCAMPER

I - Giới thiệu phương pháp

II - Nội dung phương pháp

LỜI NÓI ĐẦU

Có lẽ chúng ta đã nghe đâu đó khá nhiều về thuật nghữ HTML5 mà chưa biết

đó là gì, và có ích lợi gì cho công nghệ web site HTML5 là sản phẩm của sựphát triển tiếp theo HTML, đó là viết tắt của thuật ngữ ngôn ngữ web Hyper TextMarkup Language, là định dạng cốt lõi hầu hết website hiện nay

HTML4 ra đời và được cải thiện liên tục từ năm 1997 để đáp ứng các tiện ích

đa phương tiện của người dùng như: xem video, game online, nghe nhạc …Nhưng bản thân HTML4 thì không làm được việc đó, nó phải kết hợp với cácplugin như Flash, Java, Sliverlight Nhưng có những bất tiện đối với các pluginnày như: phải cài đặt cho trình duyệt web, ngốn tài nguyên máy tính, duyệt webtrên điện thoại sẽ chậm hơn…

Đương nhiên những bất tiện nêu trên sẽ được giải quyết dần dần, rồi lại sinh ranhững bất tiện khác, rồi lại được giải quyết … công nghệ là vậy phải không ?HTML5 ra đời với thế mạnh là tích hợp sẵn một số tag tiện ích, đặc biệt làMedia Cụ thể hơn là HTML5 cho phép dowload về, lưu trữ off line và phát lạicòn đối với HTML4 là phải dùng plugin rời

Trong khuôn khổ bài thu hoạch này, người viết muốn chia sẻ những hiểu biếtcủa bản thân về ngôn ngữ HTML5 và những nội dung phương pháp sáng tạoScamper được áp dụng trong ngôn ngữ này, mà theo người viết, đó chính là cách

để ngôn ngữ HTML5 trở thành sản phẩm của tương lai, không chỉ tốt cho môitrướng website mà còn chiếm lĩnh thị trường di động

Xin chân thành cảm ơn GS TSKH Hoàng Kiếm, giảng viên giảng dạy mônhọc đã truyền đạt những kiến thức quý báo để người viết có cơ sở nghiên cứu vàhoàn thành bài báo cáo này

Trong quá trình nghiên cứu và hoàn thành báo cáo không thể tránh được nhữngthiếu sót Rất mong nhận được sự góp ý của Thầy để bài viết được hoàn chỉnhhơn

CHƯƠNG I - PHƯƠNG PHÁP SÁNG TẠO SCAMPER

I - Giới thiệu phương pháp

Hiện nay, có khá nhiều phương pháp sáng tạo khác nhau nhưng không cóphương pháp nào vượt trội trong mọi tình huống, trong mọi lĩnh vực Tuy nhiên,phương pháp sáng tạo SCAMPER tỏ ra có nhiều ưu điểm trong việc phát triểnhoạt động kinh doanh của các doanh nghiệp Hai trọng tâm sáng tạo trong doanhnghiệp là sáng tạo trong phát triển/đổi mới sản phẩm và sáng tạo trong tiếpthị/kinh doanh sản phẩm

Phương pháp sáng tạo SCAMPER được giáo sư Michael Mikalko phát triển.SCAMPER là ghép các chữ cái đầu của nhóm từ sau: Substitute (thay thế),Combine (kết hợp), Adapt (thích nghi), Modify (hiệu chỉnh), Put (thêm vào),Eliminate (loại bỏ) và Reverse (đảo ngược)

Phương pháp sáng tạo SCAMPER dễ lĩnh hội, dễ vận dụng nhưng khá hữu hiệunên ngày càng được sử dụng phổ biến rộng rãi, nhất là trong các doanh nghiệp

II - Nội dung phương pháp

Nội dung: Điều chỉnh qui mô thành tố của hệ thống.

5 Phép thêm vào – Put

Nội dung: Thêm thành tố mới vào hệ thống.

6 Phép Loại bỏ – Eliminate

Nội dung: Loại bỏ thành tố khỏi hệ thống.

7 Phép đảo ngược – Reverse

Nội dung: Đảo ngược trật tự các thành tố của hệ thống.

CHƯƠNG II - NGÔN NGỮ HTML5

I - Giới thiệu ngôn ngữ HTML5

1 HTML5 là gì

HTML5 là chuẩn mới và là thế hệ tiếp theo của ngôn ngữ đánh dấu siêu văn bản

- HyperText Markup Language (gọi tắt là HTML) Các phiên bản trước củaHTML, như HTML 4.01 đã ra đời từ năm 1999 Cho đến nay các trang web đã

có những thay đổi rất nhiều kể từ đó HTML5 vẫn còn trong giai đoạn phát triển

và hoàn thiện Tuy nhiên, nhiều phiên bản trình duyệt mới hiện nay đã có các hỗtrợ cho những phần tử, thẻ mới có trong HTML5 và các APIs

HTML5 là kết quả của sự hợp tác giữa tổ chức W3C và nhóm WHATWG.WHATWG làm việc với các web form và các ứng dụng, còn W3C thì được làmviệc với XHTML 2.0 Trong năm 2006, họ quyết định hợp tác và tạo ra mộtphiên bản mới của HTML, đó chính là HTML5.

2 Mô hình cấu trúc của HTML5

Html5 có nhiều biến đổi và cải cách mới so với giai đoạn trước đó bao gồm cácgroups:

- Metadata: bao gồm các phần tử tag như: base, command, link, meta,noscript, script, style, title

- Embedded: dùng để chứa nội dung và import những sources khác vàovăn bản gồm các tag như: audio, canvas, embed, iframe, img, math, object, svg,video

-Interactive: chứa những nội dung đặc biệt cho người dùng bao gồm cáctag: a, audio, button, details, embed, img, input, keygen, lable, menu, object,select, textarea, video

- Heading: định nghĩa các header của website từ h1 đến h6 và thêm mộttag nữa là hgroup

- Phrasing: chứa văn bản, các đoạn văn, …các phần tử của tag bao gồm: a,abbr, area, audio, b, bdo, br, button, var, sub, sup, wbr,…

- Flow: chưa các tag bao gồm aside, audio, b, blockquote, button,command, datalist, del, details, math, menu, meta, meter, nav, select, …

- Sectioning: định nghĩa các headings và footers bao gồm các tags: article,aside, nav, section

3 Đặc điểm của HTML5

HTML5 được phát triển dựa trên các tiêu chuẩn như:

- Các thẻ mô tả chính xác những gì chúng được thiết kế để chứa đựng

- Các tính năng mới phải dựa trên HTML, CSS, DOM và JavaScript

- Làm giảm nhu cầu cho các plugins bên ngoài (như Flash)

- Truy vấn dữ liệu đã được lưu trữ tốt hơn

- Thêm các thẻ đánh dấu mới để dần thay thế cho các mã lập trình

- Apple Safari (h.264, phiên bản 4+)

- Microsoft Internet Explorer 9 (h.264)

- Microsoft Internet Explorer 6, 7, hoặc 8 được cài đặt Google Chrome Frame

Với những lợi thế mà HTML5 mang lại cho nền tảng web, đặc biệt là tốc độduyệt quét, trong tương lai ngôn ngữ định dạng siêu văn bản này sẽ trở thành xuhướng mạnh, nhưng đoạn đường ấy vẫn còn nhiều vấn đề cần giải quyết

4 Lợi ích của HTML5

- Cải thiện tốc độ nạp và lưu trang.

- Xử lý lỗi tốt hơn.

- Cải thiện khả năng lưu trữ chung.

- Các biểu mẫu cải tiến làm giảm nhu cầu phải tải về mã JavaScript, cho phép

truyền thông hiệu quả hơn giữa các thiết bị di động và các máy chủ điện toán đám mây.

- HTML5 tạo ra sự trải nghiệm người dùng hấp dẫn hơn: Các trang được thiết kế

bằng HTML5 có thể cung cấp một trải nghiệm giống như với các ứng dụng củamáy tính để bàn HTML5 cũng cung cấp phát triển nhiều nền tảng nâng cao bằngcách kết hợp khả năng của các API với sự có mặt ở khắp mọi nơi của trình duyệt.Khi sử dụng HTML5, các nhà phát triển có thể cung cấp một trải nghiệm ứngdụng hiện đại, trôi chảy qua các nền tảng

- Khi bạn nói HTML5, bạn đang sử dụng phép tốc ký cho sự đổi mới liên tục Các

thẻ mới, các phương thức mới, và một framework phát triển chung dựa trên sựtác động lẫn nhau của HTML5 và hai đối tác của nó, CSS3 và JavaScript Đây làcốt lõi của hiện tượng xử lý ứng dụng lấy máy khách làm trung tâm Ngoài cácviệc triển khai các kỹ thuật và các phương thức của công nghệ HTML5 cho máytính để bàn, có thể triển khai thực hiện HTML5 trong nhiều trình duyệt điện thoại

di động web có tính năng phong

- Một khía cạnh quan trọng về sức mạnh của HTML5 là lập bản đồ thông tin —

hoặc chặn nội dung, nếu bạn thích — tạo ra một quá trình dễ hiểu hơn nhiều Bạn

có thể thấy công cụ này thích hợp cho việc thiết kế và phát triển hiệu quả như thếnào nhờ ưu thế ngày càng tăng của nó trong thế giới xử lý web

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

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àmrấ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

- 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ựnghình ảnh trên Canvas Một loạt thư viện đồ họa đẹp được đưa ra, giúp cho đồ họacủ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ìnhviên có thời gian để đưa ra giải pháp.

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

Giờ đây chỉ cần sử dụng HTML5, 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 giống như các ứngdụng cũ Các ứng dụng chạy mã JavaScript từ ứng dụng lưu trữ HTML5 ngoạituyến và hoạt động ngay cả khi kết nối Web đang hoạt động

Phương pháp này không ảnh hưởng tới hoạt động phát triển nhóm “đám mây”bởi những dữ liệu có thể hoạt động như những lưu trữ thông minh Lập trìnhgame có thể lưu trữ theo vùng những phần mô tả và ảnh minh họa, giúp tiết kiệmthời gian tải thông tin nhiều lần

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

Ai đã từng chia nhỏ dữ liệu từ các trang web đều biết rằng HTML không giúpđược nhiều ngoại trừ giúp trình duyệt nơi đặt dữ liệu Microformats trongHTML5 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ànghơn Không ai có thể dự đoán microformats có thể thay đổi Web tới mức nàonhư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

- HTML5 giúp hợp nhất các địa chỉ:

Đối với máy chủ Web, địa chỉ 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ườidùng Tuy nhiên, nó sẽ không hoạt động với các máy bàn (hoạt động với GPShoặ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 video dễ dàng hơn với thông tintrê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 Chuẩn HTML5 sẽ là mã nguồn mở trung gian, có nghĩa

là chúng ta thay đổi cách gọi từ plug-in thành codec Tuy nhiên, dù ta có chuẩnvideo nhưng trình duyệt lại rất khó để dịch dữ liệu Mặc dù vẫn còn sự cân nhắccũ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ủavideo, giúp cho HTML bớt đi kí tự văn bản và video sẽ được dùng nhiều hơn

- HTML5 tạo ra widget chat:

Widget sử dụng trong iframes cho phép các trang web ghi nhớ lại thông tin từcác trang khác trong vòng nhiều năm Tuy nhiên chúng lại bị các rào cản an ninh

giới hạn khi chỉ lưu trữ mỗi wiget trong một sandbox riêng HTML5 cung cấp cơchế chuẩn giúp các widget có thể trò chuyện với nhau Mặc dù chúng vẫn khốngthể vượt qua được sandbox của widget khác nhưng các widget có thể gửi tin nhắnqua lại, kết nối công việc, thậm chí là chuyển đổi thông tin về người đang sửdụng máy tính Các nhà quảng cáo có cơ hội để đăng quảng cáo với các ô hìnhchữ nhật khác nhau xuất hiện trên các trang web Tuy nhiên, cần tạo ra tiêuchuẩn cho những thông tin được chuyển đi do các widget là 1 cơ hội để tròchuyện giữa mọi người nên chúng cần phải có những ngôn từ chuẩ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ớinhững tiêu chuẩn khác nhau, được đưa ra vào thời điểm khác nhau và kiểu mẫubảo mật cung khác nhau 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ácplug-in trước đó Những khuyết điểm có thể bị lợi dụng để thiết lập mã độc Nếunhư nhóm an ninh kiểm tra Firefox, Chorme hoặc IE cho phép cài đặt các plug-innày, sự nguy hiểm sẽ giảm bớt đi

- 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ặcDOM) 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 Thách 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

- Tải ảnh nhanh hơn , nhất là với người dùng Mobile:

Trong thiết kế Web, “gradient” là hiệu ứng nền Trong hai thập kỉ đầu tiên nhữnghiệu ứng “gradient” đạt được bằng cách “vẽ hình” Trước HTML5, các hình ảnhcung cấp các nền của trang Web, có thể “chặt” một hình ảnh lớn thành vài hìnhảnh nhỏ Photoshop là một công cụ “gradient” để tạo ra những hình ảnh nền vàđược sử dụng rộng rãi

HTML5 đã thay đổi việc này CSS3 của HTML5 thể hiện “gradient” ngữ nghĩahơn là dùng hình ảnh

- Cải thiện SEO:

Một số hiệu ứng đồ họa chung được thể hiện qua ngữ nghĩa CSS3, bao gồm làm

mờ, làm tròn các góc, tạo những bóng nền Tất cả việc này với “gradient” CSS3

cho phép Upload nhỏ hơn và thực hiện dễ dàng qua nhiều nền tảng khác nhau.Chúng cũng là lợi thế cho việc Tối ưu hóa công cụ tìm kiếm SEO (Search-Engine Optimization)

- Những hiệu ứng hình ảnh động phức tạp:

HTML5 cũng giới thiệu những hiệu ứng mà những phiên bản trước kia không hề

có và một trong số đó chính là những hiệu ứng động Để tạo ra những hiệu ứngđộng phức tạp, các nhà thiết kế Web trước kia phải dùng Flash Flash có sự bấtlợi to lớn đó là những công cụ tìm kiếm không thể tạo được danh mục từ nhữngnội dung động này Với HTML5 các hình ảnh động phức tạp đã có sẵn thông quangữ nghĩa

5 Công cụ phát triển HTML5

Hiện nay, có hai loại trình soạn thảo HTML5 khác nhau trên thị trường Để so sánh 2 trình soạn thảo này cái nào tốt hơn thì thật là việc khó khăn bởi chúng đều

có những ưu nhược điểm khác nhau Hai trình soạn thảo sẽ được mô tả dưới đây:

- Trình soạn thảo dựa trên trình duyệt: Đây là một trình soạn thảo tương thích

với tất cả các trình duyệt và đòi hỏi bạn phải có kết nối internet khi sử dụng

- Trình soạn thảo độc lập: Đây là một trình soạn thảo có thể cài đặt trên máy tính

và không đòi hỏi phải có internet Tuy nhiên các ứng dụng độc lập chỉ được thiết

kế để sử dụng trên các hệ điều hành cụ thể Ví du: Adobe Dreamweaver CS5.5,Aloha Editor…

II Một số tính năng của HTML5

- ContentEditable

Những trình duyệt hiện đại có một thuộc tính tiện lợi được gọi là

“contenteditable” Và đúng như tên gọi của nó, thuộc tính này cho phép ngườidùng có thể chinh sửa bất cứ nội dung text nào được chứa trong một phần tử(thẻ) html, bao gồm cả những phần tử con của nó Có nhiều cách ứng dụng vớithuộc tính này, bao gồm cả một ứng dụng đơn giản như tạo một danh sách côngviệc phải làm, hay lưu lại nội dung mà bạn đã chỉnh sửa, v.v…

- Email Inputs

Nếu bạn chèn thêm thuộc tính type=”email” vào bên trong thẻ <input> thì cáctrình duyệt sẽ tự động kiểm chứng dữ liệu người dùng nhập vào có phải là địa chỉemail hợp lệ hay không Tuy nhiên thuộc tính này chỉ có thể chạy tốt trên các

trình duyệt mới nhất Nếu bạn đang sử dụng các trình duyệt ở phiên bản cũ thì sẽkhông thấy được tác dụng của thuộc tính này.

- Web worker (Các trình làm việc trên nền Web)

Tính năng này cho phép mã JavaScript được thiết lập để chạy trong một quá trìnhnền đang tạo điều kiện thuận lợi cho sự phát triển của các ứng dụng đa luồng Lợiích chủ yếu mà Các trình làm việc trên nền Web (Web workers) cung cấp cho các nhà phát triển là có thể xử lý tính toán tập trung trong nền mà không ảnh hưởng đến tốc độ của giao diện người dùng

- Geolocation (Định vị địa lý)

HTML5 có một API định vị địa lý cho phép một ứng dụng Web xác định vị trí địa lý hiện tại của bạn, giả sử thiết bị mà bạn đang nhắm tới cung cấp các tính năng để tìm kiếm các thông tin như vậy (ví dụ, GPS trên điện thoại di động) Nếubạn không có một thiết bị hỗ trợ tính năng này (chẳng hạn như một điện thoại

thông minh iPhone hoặc Android 2.0), bạn có thể sử dụng Firefox và tải về một trình cắm thêm để cho phép bạn thiết lập vị trí của mình bằng tay.

- Kéo và thả

Một tính năng thú vị khác chứa trong một API kéo và thả Cho đến nay, việc thựchiện kéo và thả không có các trình cắm thêm đã lệ thuộc vào một số mã

JavaScript rất phức tạp hoặc sử dụng một thư viện JavaScript như script.aculo.us

- Tạo tin nhắn giữa các tài liệu

Tính năng này cho phép các tài liệu trong các cửa sổ khác nhau (và với iframes khác nhau) gửi và nhận tin nhắn với nhau Tính năng này đã chứng tỏ rất có ích cho sự phát triển của các widget và các ứng dụng được lưu trữ trên các máy chủ khác với máy chủ của trang Web ban đầu (tương tự như các ứng dụng

Facebook)

- Thuộc tính Required

Khi bạn đặt thuộc tính required vào bên trong các thẻ <input> thì các trình duyệt

sẽ tự động kiểm tra và sẽ không submit form cho đến khi người dùng nhập giá trịvào các field

- Audio và Video Support

Không cần phải cài đặt plugin từ các hãng thứ ba, HTML5 cho phép bạn chơi cácfile nhạc với thẻ <audio> và video với thẻ <video>

- Regular Expressions

Trước đây, để kiểm chứng dữ liệu nhập của người dùng như kiểm tra tính hộp lệ của địa chỉ email, chúng ta phải dùng đến JavaScript hoặc các lệnh lập trình khác Nhưng với HTML5 bạn không cần làm thế nữa

- Đánh dấu những dòng quan trọng

Đây là tính năng rất hay mà HTML5 mang lại cho chúng ta, với việc dùng thẻ

<mark>, bạn sẽ có thể đánh dấu cho người dùng thấy những dòng quan trọng mà bạn muốn nhấn mạnh.ạn không cần phải làm như thế nữa

- Canvas

Phần tử <canvas> (khung nền ảnh) được tiêu chuẩn hóa và đã bao gồm trong đặc

tả HTML5, cùng với một loạt các API vẽ 2D có thể được sử dụng để tạo các hìnhdạng, văn bản, các chuyển cảnh, và hình ảnh động bên trong phần tử này

Nhiều người tin rằng phần tử <canvas> là một trong những khía cạnh quan trọngnhất của HTML5 do nó tạo điều kiện sản xuất các biểu đồ, các trò chơi tương tác,các ứng dụng vẽ, và các đồ họa khác đang hoạt động mà không cần cần các trìnhcắm thêm bên ngoài, chẳng hạn như Adobe Flash

- Inline SVG

SVG là viết tắt của Scalable Vector Graphics, được sử dụng để xác định các đồhọa vector-based cho Web SVG định nghĩa đồ họa ở định dạng XML và khôngmất bất kỳ chất lượng nếu chúng được phóng to hoặc thay đổi kích thước Tất cảcác yếu tố và mọi thuộc tính trong các tập tin SVG có thể được hoạt hình SVG

+ Hình ảnh SVG có thể được in với chất lượng cao ở độ phân giải bất kỳ.+ Hình ảnh SVG Zoomable (và hình ảnh có thể được thu nhỏ mà không làm giảm)

- WebSocket (Giao tiếp 2 chiều với máy chủ)

WebSoket là công nghệ hỗ trợ giao tiếp hai chiều giữa client và server bằng cách

sử dụng một TCP socket để tạo một kết nối hiệu quả và ít tốn kém Mặc dù đượcthiết kế để chuyên sử dụng cho các ứng dụng web, lập trình viên vẫn có thể đưachúng vào bất kì loại ứng dụng nào

Dữ liệu truyền tải thông qua giao thức HTTP (thường dùng với kĩ thuật Ajax)chứa nhiều dữ liệu không cần thiết trong phần header Một headerrequest/response của HTTP có kích thước khoảng 871 byte, trong khi vớiWebSocket, kích thước này chỉ là 2 byte (sau khi đã kết nối)

CHƯƠNG III - ỨNG DỤNG PHƯƠNG PHÁP SCAMPER

TRONG NGÔN NGỮ HTML5

I - Phép thay thế

- HTML5 thay thế mới nhiều thẻ củ đã lỗi thời hoặc gây xung đột với các thẻ

khác, hệ thống…bằng những thẻ mới hoặc các thuộc tính của CSS:

+ <acronym> thay thế bằng <abbr>.

+ <applet> thay thế bằng thẻ <embed,<object>.

+ <dir> thay thế bằng thẻ <ul>.

+ <frame>,<frameset> thay thế bằng thẻ <iframe>.

+ <isindex> được hay thế bằng các form control.

+ <strike> thay thế bằng <del>.

+ <basefont>,<font>,<big>,<center,<s>,<u> được thay thế bởi các thuộc tính font, font-size, text-align, text-decoration của CSS.

+ Sử dụng <img> để thay thế <object> cho images.

*** Ghi chú: tham khảo phụ lục 2 để biết chi tiết các thẻ bị thay thế.

- Bên cạnh đó, HTML5 thay thế nhiều thuộc tính của các thẻ bằng các thuộc tính

của CSS:

+ align của <tr>, <thead>, <th>, <tfoot>, <td>, <tbody>, <table>, <p>,

<legend>, <input>, <img>, <iframe>, <hr>, <h1…h6>, <div>, <caption> thay bằng text-align của CSS.

+ valign của <tr>, <thead>, <th>, <tfoot>, <td>, <tbody> thay bằng

vertical-align của CSS.

+ bgcolor của <tr>, <th>, <td>, <table>, <body> thay bằng

background-color của CSS.

+ compact của <ul>, <ol> thay bằng list-style của CSS.

+ type (4) của <ul>, type (2) của <ol>, type (2,4) của <li> thay bằng thuộc tính

list-style (CSS).

+ height của <th>, <td> được thay bằng height, (CSS).

+ width của <th>, <td>, <table>, <pre>, <hr> thay bằng width (CSS) + border của <table>, <img> thay bằng border của CSS.

+ cellpadding của <table> thay bằng padding (CSS)

+ hspace, vspace của <img> thay bằng padding (CSS).

+ noshade, size của <hr> thay text-decoration, font-size (CSS).

+ alink, background, link, text, vlink của <body> thay bằng color,

background-image, background-color, link, visited (CSS).

*** Ghi chú: tham khảo phục lục 4 để biết chi tiết các thuộc tính bị thay thế.

<tbody> dùng để nhóm các thành phần nội dung trong <table>.

+ Thẻ <ul> và <ol> được sử dụng kèm với thẻ <li> để tạo danh sách

không thứ tự (với ul) hoặc có thứ tự (với ol)

+ Thẻ <table> đơn giản có chứa một hoặc nhiều <tr>, <th> và <td> Một

<table> phức tạp có thể bao gồm nhiều thành phần khác, gồm: <caption>, <col>,

<colgroup>, <thead>,<tfoot>, và <tbody>.

+ Thẻ <tr> được dùng để tạo một hàng trong bảng HTML Thẻ <tr> được

sử dụng bên trong <table>, và thường kèm với <th>, tất cả được chứa bên trong

<td>.

+ Thẻ <th> được dùng để tạo phần tử tiêu đề trong bảng HTML Thẻ <th> được sử dụng bên trong <tr>, và thường kèm với <td>, tất cả được chứa bên trong <table>.

+ Sử dụng các thuộc tính colspan và rowspan để gộp nhiều <td> theo

chiều dọc hoặc chiều ngang

+ Thẻ <textarea> dùng để nhập nhiều dòng văn bản.

+ Thẻ <option> kết hợp với thẻ <select> sử dụng bên trong thẻ <form>

cho người dùng lựa chọn danh sách

+ Trong thẻ <map> bắt buộc phải có thuộc tính name, thuộc tính này kết hợp với thuộc tính của image (image có sử dụng map) để tạo ra mối quan hệ giữa

Với cách viết như thế này thì thật khó để kết hợp phần chú thích bên dưới thẻ

<p> với tấm hình ở trên nó Nhưng với HTML5 bạn có thể giải quyết điều này một cách đơn giản, với việc cho ra đời thẻ<figure> cùng với thẻ <figcaption> màgiờ đây bạn có thể kết hợp giữa hình và phần chú thích cho tấm hình đó

- Có hay không có dấu nháy đều được:

Để dễ hiểu các bạn xem đoạn html sau:

<p id=someId> Start the reactor

Nếu như trước đây, bạn viết như thế này thì sẽ bị lỗi, nhưng với HTML5, bạn không cần phải sử dụng dấu nháy cho các thuộc tính, thậm chí là không cần phải đóng thẻ lại

- Trong HTML5, một số thẻ, thuộc tính có thể nằm trong nhiều thẻ khác nhau hoặc có nhiều chức năng khác nhau tùy vào cách sử dụng:

+ Thẻ <option> có thể được sử dụng bên trong thẻ <select> (định nghĩa giá trị tùy chọn trong danh sách), kết hợp với thẻ <select> trong thẻ<form> (cho người dùng lựa chọn danh sách), nằm trong thẻ <datalist>.

+ Trong trường hợp các trình duyệt không hiển thị được đối tượng thì

đoạn code bên trong thẻ <object> sẽ được xuất hiện để thông báo.

+ Thẻ <meta> thường được sử dụng để xác định mô tả trang (description),

từ khóa (keywords), tác giả của văn bản (author), sửa đổi lần cuối (last

modified), và thông tin dữ liệu khác Ngoài ra thẻ <meta> có thể được sử dụng

bởi các trình duyệt (hiển thị nội dung hoặc tải lại trang), công cụ tìm kiếm (từ khoá), hoặc các dịch vụ web khác

+ Thẻ <legend> được dùng cho thẻ <fieldset>, <figure> và <details> + Thẻ <input> được sử dụng cho người dùng nhập hay chọn thông tin Thẻ <input> có thể có nhiều dạng khác nhau, tùy thuộc vào thuộc tính tùy trọn

type, có thể là text, một checkbox, một trường password, một button radio, một button,

*** Ghi chú: tham khảo phục lục 1,3 để biết chi tiết các thẻ.

- Định nghĩa lại thẻ <small>:

Cách đây không lâu, việc sử dụng phần tử thẻ <small> được áp dụng để tạo ra

những tiêu đề phụ liên quan đến biểu trưng Nó thật sự là một phần tử trình bày hữu dụng! Tuy nhiên, ngày nay cách làm trên đã không còn đúng nữa và phần tử

<small> đã được định nghĩa lại, thích hợp hơn để sử dụng trong việc định nghĩa

những nội dung nhỏ Bạn hãy hình dung một cách đơn giản nếu có một thông tin bản quyền nằm ở cuối chân trang web thì theo quy định trong HTML5 chúng ta

sẽ sử dụng thẻ <small> để bao gói thông tin này.

IV - PHÉP ĐIỀU CHỈNH

- HTML5 đã rút gọn lại định nghĩa cho Doctype:

Trước đây bạn phải khai báo như thế này cho trang html của bạn

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"