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

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
PHÒNG SAU ĐẠI HỌC
oOo
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

Phương pháp nghiên cứu khoa học trong tin học
Ứng dụng phương pháp sáng tạo Scamper trong ngôn ngữ HTML5
HVTH: Trần Nguyễn Tuấn Duy - CH1201023
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
1. Phép thay thế - Substitute
2. Phép kết hợp – Combine
3. Phép thích ứng – Adapt
4. Phép điều chỉnh – Modify
5. Phép thêm vào – Put
6. Phép Loại bỏ – Eliminate
7. Phép đảo ngược – Reverse5

CHƯƠNG II - NGÔN NGỮ HTML5
I - Giới thiệu ngôn ngữ HTML5
1. HTML5 là gì
2. Mô hình cấu trúc của HTML5
3. Đặc điểm của HTML5
4. Lợi ích của HTML5
5. Công cụ phát triển HTML5
II . Một số tính năng của HTML5
CHƯƠNG III - ỨNG DỤNG PHƯƠNG PHÁP SCAMPER
TRONG NGÔN NGỮ HTML5
I - Phép thay thế
II - Phép kết hợp
III - Phép thích ứng
IV - Phép điều chỉnh
V - Phép thêm vào
VI - Phép loại bỏ
VII - Phép đảo ngược
KẾT LUẬN
TÀI LIỆU THAM KHẢO
PHỤ LỤC………………………………………………………………………………………
3
Phương pháp nghiên cứu khoa học trong tin học
Ứng dụng phương pháp sáng tạo Scamper trong ngôn ngữ HTML5
HVTH: Trần Nguyễn Tuấn Duy - CH1201023
LỜI NÓI ĐẦU
oOo
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 Text
Markup 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ác
plugin như Flash, Java, Sliverlight. Nhưng có những bất tiện đối với các plugin
nà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 web
trê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 ra
nhữ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ại
cò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ết
của bản thân về ngôn ngữ HTML5 và những nội dung phương pháp sáng tạo
Scamper đượ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ôi
trướ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ôn
họ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ững
thiếu sót. Rất mong nhận được sự góp ý của Thầy để bài viết được hoàn chỉnh
hơn.
CHƯƠNG I - PHƯƠNG PHÁP SÁNG TẠO SCAMPER
I - Giới thiệu phương pháp
4
Phương pháp nghiên cứu khoa học trong tin học
Ứng dụng phương pháp sáng tạo Scamper trong ngôn ngữ HTML5
HVTH: Trần Nguyễn Tuấn Duy - CH1201023
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ển
hoạt động kinh doanh của các doanh nghiệp. Hai trọng tâm sáng tạo trong doanh
nghiệ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ếp
thị/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ệu
nê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
1. Phép thay thế - Substitute
Nội dung: Thay thế thành tố hiện có của hệ thống bằng thành tố khác.
2. Phép kết hợp – Combine
Nội dung: Kết hợp thành tố của các hệ thống khác nhau tạo ra hệ thống mới.
3. Phép thích ứng – Adapt
Nội dung: Thích ứng hệ thống trong một bối cảnh khác.
4. Phép điều chỉnh – Modify
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ủa

HTML, 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.
5
Phương pháp nghiên cứu khoa học trong tin học
Ứng dụng phương pháp sáng tạo Scamper trong ngôn ngữ HTML5
HVTH: Trần Nguyễn Tuấn Duy - CH1201023
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àm
việc với XHTML 2.0. Trong năm 2006, họ quyết định hợp tác và tạo ra một
phiê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ác
groups:
- 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ào
vă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ác
tag: 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ột
tag 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.
6
Phương pháp nghiên cứu khoa học trong tin học
Ứng dụng phương pháp sáng tạo Scamper trong ngôn ngữ HTML5
HVTH: Trần Nguyễn Tuấn Duy - CH1201023
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.
- HTML5 hoạt động độc lập .
- Hỗ trợ cho CSS3 để quản lý giao diện người dùng đồ họa (GUI), có
nghĩa là HTML5 có thể được định hướng nội dung.
- Quá trình phát triển được chia sẻ rộng rãi nhằm cho các tổ chức khác lấy
làm cơ sở phát triển.
Hiện nay, chỉ có một số trình duyệt hỗ trợ một phần HTML5, chưa có trình duyệt
hỗ trợ hết 100%.
- Firefox 4 (WebM)
- Google Chrome (WebM)
- Opera 10.6+ (WebM)
- 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 xu
hướ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.
7
Phương pháp nghiên cứu khoa học trong tin học
Ứng dụng phương pháp sáng tạo Scamper trong ngôn ngữ HTML5
HVTH: Trần Nguyễn Tuấn Duy - CH1201023
- 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ủa
má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ằng
cá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 ứng
dụ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ác
việc triển khai các kỹ thuật và các phương thức của công nghệ HTML5 cho máy
tí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àm
rất tốt. Ai cần hệ thống Real khi các video sẽ được chuyển thành audio và video?
Plug-in dường như sẽ bị lãng quên
- 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
8
Phương pháp nghiên cứu khoa học trong tin học
Ứng dụng phương pháp sáng tạo Scamper trong ngôn ngữ HTML5
HVTH: Trần Nguyễn Tuấn Duy - CH1201023
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.
- 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 ứng
dụng cũ. 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.
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ình
game có thể lưu trữ theo vùng những phần mô tả và ảnh minh họa, giúp tiết kiệm
thờ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 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.
- 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ườ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 video 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. 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ẩn
video 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ắ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 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
9
Phương pháp nghiên cứu khoa học trong tin học
Ứng dụng phương pháp sáng tạo Scamper trong ngôn ngữ HTML5
HVTH: Trần Nguyễn Tuấn Duy - CH1201023
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ống
thể vượt qua được sandbox của widget khác nhưng các widget có thể gửi tin nhắn
qua 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ình
chữ nhật khác nhau xuất hiện trên các trang web. Tuy nhiên, cần tạo ra tiêu
chuẩ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ớ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. 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. 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.
- 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. 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ững
hiệu ứng “gradient” đạt được bằng cách “vẽ hình”. Trước HTML5, các hình ảnh
cung 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ĩa
hơ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
1
0
Phương pháp nghiên cứu khoa học trong tin học
Ứng dụng phương pháp sáng tạo Scamper trong ngôn ngữ HTML5
HVTH: Trần Nguyễn Tuấn Duy - CH1201023
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ất
lợ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ững
nội dung động này. Với HTML5 các hình ảnh động phức tạp đã có sẵn thông qua
ngữ 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ười
dù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ới
thuộ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ông
việ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ác
trì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
1
1

Phương pháp nghiên cứu khoa học trong tin học
Ứng dụng phương pháp sáng tạo Scamper trong ngôn ngữ HTML5
HVTH: Trần Nguyễn Tuấn Duy - CH1201023
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.
- Placeholders
Trước dây để tạo placeholders, bạn sẽ cần phải dùng đến JavaScript, tuy nhiên
với HTML5 bạn có thể không cần dùng đến javascript nữa.
<input name="email" type="email"
placeholder="" />
Tuy nhiên thuộc tính này lại vẫn chưa được hỗ trợ trên tất cả các trình duyệt, các
bạn có thể xem ví dụ hiển thị ở các trình duyệt khác nhau như sau:
- Local Storage
Với tính năng này , HTML5 cho phép bạn lưu trữ những gì bạn nhập ngay cả khi
bạn tắt trình duyệt hoặc refresh trang. Nhưng không phải tất cả các trình duyệt
đều hỗ trợ tính năng 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ình
nề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ếu
bạ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
1
2
Phương pháp nghiên cứu khoa học trong tin học

Ứng dụng phương pháp sáng tạo Scamper trong ngôn ngữ HTML5
HVTH: Trần Nguyễn Tuấn Duy - CH1201023
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ực
hiệ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ác
file 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ình
dạ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ọng
nhấ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ình
cắm thêm bên ngoài, chẳng hạn như Adobe Flash.
1
3
Phương pháp nghiên cứu khoa học trong tin học
Ứng dụng phương pháp sáng tạo Scamper trong ngôn ngữ HTML5
HVTH: Trần Nguyễn Tuấn Duy - CH1201023
- 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ông
mấ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
là một khuyến nghị của W3C.
Ưu điểm của việc sử dụng SVG hơn các định dạng hình ảnh khác (như JPEG và
GIF) là:
+ Hình ảnh SVG có thể được tạo ra và chỉnh sửa với bất kỳ trình soạn
thảo văn bản.
+ Hình ảnh SVG có thể được tìm kiếm, lập chỉ mục, kịch bản, và nén.
+ Hình ảnh SVG được mở rộng.
+ 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).
- App cache
Với HTML5, bạn dễ dàng tạo ra một ứng dụng web offline mà không cần đến kết
nối internet. Application cache có 3 lợi thế sau:

+ Duyệt web Offline – người dùng vẫn sử dụng được ứng dụng web
ngay cả khi không có kết nối mạng internet.
+ Cache có tốc độ nhanh.
+ Giảm tải cho server – Trình duyệt chỉ cần tải những cập nhật từ server.
- Server-Sent Events
HTML5 Server-Sent Events cho phép ta lấy những dữ liệu cập nhật từ server
xuống máy trạ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ù được
thiết kế để chuyên sử dụng cho các ứng dụng web, lập trình viên vẫn có thể đưa
chú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 header
request/response của HTTP có kích thước khoảng 871 byte, trong khi với
WebSocket, kích thước này chỉ là 2 byte (sau khi đã kết nối).
1
4
Phương pháp nghiên cứu khoa học trong tin học
Ứng dụng phương pháp sáng tạo Scamper trong ngôn ngữ HTML5
HVTH: Trần Nguyễn Tuấn Duy - CH1201023
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.
1
5
Phương pháp nghiên cứu khoa học trong tin học
Ứng dụng phương pháp sáng tạo Scamper trong ngôn ngữ HTML5
HVTH: Trần Nguyễn Tuấn Duy - CH1201023
*** 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ế.
II - PHÉP KẾT HỢP
- HTML5 đưa ra những quy tắc kết hợp giữa các thẻ hoặc các thuộc tính với
nhau:
+ Thẻ <thead> nên được kết hợp với thẻ <tfoot> và thẻ <tbody>. Trong
đó: thẻ <tfoot> được dùng để nhóm các thành phần footer trong <table>, 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>.
1
6
Phương pháp nghiên cứu khoa học trong tin học
Ứng dụng phương pháp sáng tạo Scamper trong ngôn ngữ HTML5
HVTH: Trần Nguyễn Tuấn Duy - CH1201023
+ 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
image và map.
*** Ghi chú: tham khảo phục lục 1,3 để biết chi tiết các thẻ.
- Thẻ Figure:
Chúng ta cùng xem xét cách sử dụng hình ảnh sau :
<img src="path/to/image" alt="About image" />
<p>Hình ảnh về mặt trời. </p>
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 đó.
<figure>
<img src="path/to/image" alt="About image" />
<figcaption>
<p>Đây là phần chú thích của tấm ảnh trên. </p>
</figcaption>
</figure>
III - PHÉP THÍCH ỨNG
- Khả năng tương thích:
Đây là một tin vui cho những ai đã quen thuộc với việc sử dụng HTML, bạn
không cần phải học lại gì cả! HTML5 vẫn giữ lại các cú pháp truyền thống trước
đây, và nếu một vài tính năng mới nào đó của HTML5 chưa được trình duyệt hỗ
trợ thì nó phải có một cơ chế fall back để render trong các trình duyệt cũ.
- Có hay không có dấu nháy đều được:

Để dễ hiểu các bạn xem đoạn html sau:
1
7
Phương pháp nghiên cứu khoa học trong tin học
Ứng dụng phương pháp sáng tạo Scamper trong ngôn ngữ HTML5
HVTH: Trần Nguyễn Tuấn Duy - CH1201023
<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"
1
8
Phương pháp nghiên cứu khoa học trong tin học
Ứng dụng phương pháp sáng tạo Scamper trong ngôn ngữ HTML5
HVTH: Trần Nguyễn Tuấn Duy - CH1201023
" />Nhưng với HTML5 thì bạn sẽ chỉ cần có như thế này :
<!DOCTYPE html>
- Cùng với đó là thẻ meta dùng để chỉ định tập kí tự (character set) cũng được
tinh giản:
Đây là dòng code tương đương trong HTML4:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Trong HTML5 chỉ cần như thế này:
<meta charset="utf-8”/>
- HTML5 đã thêm một số thẻ mới đồng thời loại bỏ một số thẻ, điều này làm cho
số lượng thẻ thay đổi ít nhiều:
+ Thẻ mới được thêm: <article>, <aside>, <audio>, <canvas>,
<command>, <datalist> , <detail>, <embed>, <figcaption>, <figure>, <footer>,
<header>, <hgroup>, <keygen>, <mark>, <meter>, <nav>, <output>,
<progress>, <rp> , <rt>, <ruby>, <section>, <source>, <summary>, <time>,
<video>, <wbr>.

+ Thẻ cũ bị loại bỏ: <acronym>, <applet>, <basefont>, <big>,
<center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike>,<tt>.
*** Ghi chú: tham khảo phục lục 1, 2 để biết chi tiết các thẻ được thêm hoặc
loại bỏ.
- Một số thẻ trong HTML5 đã bỏ đi một số thuộc tính và thêm mới một số thuộc
tính, điều này đã làm cho quy mô các thuộc tính thay đổi đáng kể:
+ Thẻ <th> bỏ 5 thuộc tính abbr, axis, nowrap, char, charoff .
+ Thẻ <tr>, <thead>, <tfoot>, <tbody> đã bỏ 2 thuộc tính char, charoff .
+ Thẻ <td> bỏ 4 thuộc tính abbr, axis, nowrap, scope.
+ Thẻ <textarea> thêm 7 thuộc tính autofocus, dirname, form, maxlength,
placeholder, required, wrap.
+ Thẻ <table> thêm 3 thuộc tính cellspacing, frame, rules.
+ Thẻ <style> thêm thuộc tính scoped.
+ Thẻ <select> thêm 2 thuộc tính autofocus, form.
+ Thẻ <param> thêm 2 thuộc tính type, valuetype.
+ Thẻ <ol> thêm 2 thuộc tính reversed, start.
+ Thẻ <object> bỏ 10 thuộc tính align, archive, border, classid, codebase,
codetype, declare, hspace, standby, vspace.
+ Thẻ <menu> thêm 2 thuộc tính label, type
(3)
.
+ Thẻ <link> thêm thuộc tính sizes, bỏ 3 thuộc tính charset, rev, target.
+ Thẻ <label> thêm thuộc tính form.
1
9
Phương pháp nghiên cứu khoa học trong tin học
Ứng dụng phương pháp sáng tạo Scamper trong ngôn ngữ HTML5
HVTH: Trần Nguyễn Tuấn Duy - CH1201023
+ Thẻ <input>: thêm 19 thuộc tính autocomplet, autofocus, form,
formaction, formenctype , formmethod, formnovalidate, formtarget, height, list,

max, min, multiple, pattern, placeholder, required, step, type
(5)
, width.
+ Thẻ <iframe>: thêm 3 thuộc tính sandbox, seamless, srcdoc. Bỏ 5 thuộc
tính frameborder, longdesc, marginheight, marginwidth, scrolling.
+ Thẻ <html> thêm thuộc tính manifest.
+ Thẻ <head> thêm thuộc tính profile.
+ Thẻ <form>: thêm 2 thuộc tính autocomplete, novalidate. Bỏ thuộc tính
accept.
+ Thẻ <fieldset>: thêm 2 thuộc tính disabled, name, form.
+ Thẻ <button>: thêm 7 thuộc tính autofocus, form, formaction,
formenctype, formmethod, formnovalidate, formtarget.
+ Thẻ <area>: thêm 4 thuộc tính hreflang, media, rel, type
(1)
.
+ Thẻ <a>: thêm 2 thuộc tính media, type
(1)
.
*** Ghi chú: tham khảo phục lục 1,3 để biết chi tiết các thẻ.
- HTML5 đơn giản hóa việc phát triển web:
HTML5 vừa là 1 ngôn ngữ lại vừa là 1 công cụ , không khác biệt lắm so với các
plug-in khác Nó 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. 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.
V - PHÉP THÊM VÀO
- HTML5 bổ sung một số thẻ mới:
<article>, <aside>, <audio>, <canvas>, <command>, <datalist> , <detail>,
<embed>, <figcaption>, <figure>, <footer>, <header>, <hgroup>, <keygen>,
<mark>, <meter>, <nav>, <output>, <progress>, <rp> , <rt>, <ruby>,

<section>, <source>, <summary>, <time>, <video>, <wbr>.
*** Ghi chú: tham khảo Phụ lục 1 để biết chi tiết các thẻ mới.
- HTML5 bổ sung một số thuộc tính trong một số thẻ:
+ <textarea>: thêm các thuộc tính: autofocus, form, maxlength,
placeholder, required, wrap.
+ <style>: bổ sung thêm thuộc tính scope.
+ <select>: thêm các thuộc tính: autofocus, form.
+ <script>: thêm thuộc tính async.
+ <ol>: thêm các thuộc tính reversed, start.
+ <meta>: thêm thuộc tính charset.
+ <menu>: thêm các thuộc tính label, type
(3)
.
+ <link>: thêm thuộc tính sizes.
2
0
Phương pháp nghiên cứu khoa học trong tin học
Ứng dụng phương pháp sáng tạo Scamper trong ngôn ngữ HTML5
HVTH: Trần Nguyễn Tuấn Duy - CH1201023
+ <label>: thêm thuộc tính form.
+ <input>: thêm các thuộc tính autocomplet, autofocus, form, formaction,
formenctype , formmethod, formnovalidate, formtarget, height, list, max, min,
multiple, pattern, placeholder, required, step, type
(5)
, width.
+ <iframe>: thêm các thuộc tính sandbox, seamless, srcdoc.
+ <html>: thêm thuộc tính manifest.
+ <form>: thêm các thuộc tính autocomplete, novalidate.
+ <fieldset>: thêm các thuộc tính disabled, name, form.
+ Thẻ <colgroup>, <col> bỏ 10 thuộc tính align, archive, border, classid,

codebase, codetype, declare, hspace, standby, vspace.
+ <button>: thêm 7 thuộc tính autofocus, form, formaction, formenctype,
formmethod, formnovalidate, formtarget.
+ Thẻ <area>: thêm 4 thuộc tính hreflang, media, rel, type
(1)
, bỏ thuộc
tính nohref.
+ Thẻ <a>: thêm 2 thuộc tính media, type
(1)
.
*** Ghi chú: tham khảo phụ lục 4 để biết chi tiết các thuộc tính mới.
- 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ác
trì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.
- 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.
- 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ình
nề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ếu
bạ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

2
1
Phương pháp nghiên cứu khoa học trong tin học
Ứng dụng phương pháp sáng tạo Scamper trong ngôn ngữ HTML5
HVTH: Trần Nguyễn Tuấn Duy - CH1201023
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ực
hiệ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).
- Local Storage:
Với tính năng này , HTML5 cho phép bạn lưu trữ những gì bạn nhập ngay cả khi
bạn tắt trình duyệt hoặc refresh trang. Nhưng không phải tất cả các trình duyệt
đều hỗ trợ tính năng này.
- Inline SVG:
Được 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ông mấ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 là một khuyến nghị của W3C.
- App cache:
Với App cache, bạn dễ dàng tạo ra một ứng dụng web offline mà không cần đến
kết nối internet.
- Server-Sent Events:

HTML5 Server-Sent Events cho phép ta lấy những dữ liệu cập nhật từ server
xuống máy trạ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ù được
thiết kế để chuyên sử dụng cho các ứng dụng web, lập trình viên vẫn có thể đưa
chúng vào bất kì loại ứng dụng nào.
VI - PHÉP LOẠI BỎ
2
2
Phương pháp nghiên cứu khoa học trong tin học
Ứng dụng phương pháp sáng tạo Scamper trong ngôn ngữ HTML5
HVTH: Trần Nguyễn Tuấn Duy - CH1201023
- HTML5 loại bỏ một số thẻ do lỗi thời, gây rắc rối cho lập trình viên hoặc gây
xung đột: các thẻ sau đây của HTML4.01 bị loại bỏ trong HTML5, các trình
duyệt cũng không hỗ trợ các thẻ này.
<acronym> <applet> <basefont> <big>
<center> <dir> <font> <frame>
<frameset> <noframes> <strike> <tt>
*** Ghi chú: tham khảo phục lục 2 để biết chi tiết các thẻ bị loại bỏ.
- Bên cạnh đó, HTML5 loại bỏ nhiều thuộc tính của các thẻ:
+ char, charoff của <tr>, <thead>,
<th>, <tfoot>, <tbody>, <colgroup>,
<col>
+ abbr, axis, height, nowrap của
<th>, <td>
+ scope của <td>
+ frame, rules của <table>
+ xml:space của <script>
+ type

(1)
, valuetype của <param>
+ align, archive, border, classid,
codebase, codetype, declare, hspace,
standby, vspace của <object>,
<colgroup>, <col>.
+ scheme của <meta>
+ charset, target của <link>,
<address>. rev
(1)
của <link>, rev
(2)

của <address>.
+ frameborder, longdesc,
marginheight, marginwidth,
scrolling của <iframe>
+ profile của <head>
+ accept của <form>
+ valign, width, <colgroup>, <col>
+ nohref của <area>
+ coords, name, shape của
<address>
2
3
Phương pháp nghiên cứu khoa học trong tin học
Ứng dụng phương pháp sáng tạo Scamper trong ngôn ngữ HTML5
HVTH: Trần Nguyễn Tuấn Duy - CH1201023
*** Ghi chú: tham khảo phụ lục 4 để biết chi tiết các thuộc tính bị loại bỏ.
VII - Phép đảo ngược

- 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ó hoặc có nhưng phải sử dụng plugins:
Để 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. Với HTML5 các hình ảnh động phức tạp đã có sẵn thông qua ngữ
nghĩa.
- Khả năng chỉnh sửa nội dung trực tiếp:
Với thuộc tính contenteditable, HTML5 mang đến cho bạn khả năng chỉnh sửa
nội dung trực tiếp,các bạn xem ví dụ sau :
<ul contenteditable="true">
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory
<li> Watch video of self </li>
</ul>
Tính năng mà chúng ta cần xem xét kỹ ở đây là :
<ul contenteditable=true>
- Placeholders (hiển thị chú thích cho textbox):
Trước dây để tạo placeholders, bạn sẽ cần phải dùng đến JavaScript, tuy nhiên
với HTML5 bạn có thể không cần dùng đến javascript nữa.
<input name="email" type="email"
placeholder="" />
- 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 phải làm như thế nữa.
<form action="" method="post">
<label for="username">Create a Username: </label>
<input type="text"
name="username"
id="username"
placeholder="4 <> 10"

pattern="[A-Za-z]{4,10}"
autofocus
required>
Phương pháp nghiên cứu khoa học trong tin học
Ứng dụng phương pháp sáng tạo Scamper trong ngôn ngữ HTML5
HVTH: Trần Nguyễn Tuấn Duy - CH1201023
<button type="submit">Go </button>
</form>
- Form 2.0:
Thẻ <form> của HTML5 cũng được xem là một cải tiến lớn. Giờ đây với Form
2.0 (một cách gọi form trong HTML5), tất cả những chức năng mà bạn cần (định
dạng, validate data…) đã được xây dựng trực tiếp vào trong HTML. Bạn không
còn cần đến Ajax, Flash hay các công nghệ hỗ trợ để làm công việc này nữa.
- Local Storage:
Với tính năng này , HTML5 cho phép bạn lưu trữ những gì bạn nhập ngay cả khi
bạn tắt trình duyệt hoặc refresh trang. Nhưng không phải tất cả các trình duyệt
đều hỗ trợ tính năng này.
- HTML5 tạo ra các 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ống thể vượt qua được sandbox của widget khác nhưng các
widget có thể gửi tin nhắn qua 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.
KẾT LUẬN
Trên đây là bài viết giới thiệu tổng quan và một vài ứng dụng phương pháp sáng
tạo Scamper cơ bản trong ngôn ngữ HTML5. Ngôn ngữ tương lai của công nghệ
web và là chuẩn tương lai của internet. Scamper được sử dụng khá nhiều trong ý
tưởng phát triển ngôn ngữ HTML5, giúp ngôn ngữ này trở thành sản phẩm của

tương lai, không chỉ tốt cho môi trướng website mà còn chiếm lĩnh thị trường di
động.
Bài tìm hiểu của tác giả thể hiện cái nhìn tổng quát nhất những phương pháp
sáng tạo Scamper đã ứng dụng trong ngôn ngữ HTML5. Tuy chưa thể hiện đầy