HTML5-1-Semantic Mar..

Download Report

Transcript HTML5-1-Semantic Mar.. 

PRO HTML5
PROGRAMMING
POWERFUL APIS FOR RICHER INTERNET
APPLICATION DEVELOPMENT
評分方式
 期末作業 80%
 出缺勤 20%
FINAL EXERCISE: MULTIMEDIA PLAYER
 Features:




Upload music/video
Play music/video
(Serial or Random)
Hide control in audio
format
 Better options
 Save historical playing list
 Edit playing list
FINAL EXERCISE: WEBSOCKET
CHATROOM
 Features:
 Input Name
 Realtime Chat
 Better options
 Online member list
 Show emotional images
CHAP 1. OVERVIEW OF HTML5
HISTORY OF HTML5
 HTML was first published as an Internet draft in 1993.
 Version 2.0, 3.2, 4.0 occurred in the same year, and finally
4.01 in 1999.
 HTML5 specification was created by Web Hypertext
Application Working Group (WHAT WG) in 2004.
 W3C became involved with HTML again in 2006 and published
first working draft in 2008, and XHTML 2 stopped in 2009.
WHO IS DEVELOPING HTML5
 Web Hypertext Application Technology Working Group
(WHAT WG)
 Founded in 2004
 Vendors: Apple, Mozilla, Google, Opera
 World Wide Web Consortium (W3C)
 Internet Engineering Task Force (IETF)
 HTML5 defines a new WebSocket API that relies on a new WebSocket
protocol.
A PLUGIN – FREE PARADIGM
 Present problem of plugin
 Cannot always be installed
 Can be disabled or blocked (Ex: iPad does not ship with a Flash
plugin)
 Often blocked in controlled corporate environments
 Users disable because of unwelcome advertising
 A separate attack vector
 Difficult to integrate with the rest of HTML document
HTML5 FEATURES
 Semantics :
allowing you to describe more precisely what your content is.
 Sections, Form Inputs.
 Connectivity :
allowing you to communicate with the ser ver in new and innovative ways.
 Web Sockets, Server-sent events, WebRTC
 Of fline and storage :
allowing webpages to store data on the client -side locally and
o p e r a t e o f f l i n e m o r e e f f i c i e n t l y.
 Application cache, Of fline and of fline events, Session and Persistent storage
 Multimedia :
making video and audio first -class citizens in the Open Web.
 Audit and Video, Fullscreen API
 2D/3D graphics and ef fects :
allowing a much more diverse range of presentation
options.
 Canvas, WebGL, SVG
 Per formance and integration :
providing greater speed optimization and better usage of
computer hardware.
 Web Workers, XMLHttpRequest2 , History API, Drag and drop, Content Editable, Notification
 Device access :
allowing for the usage of various input and output devices.
 Camera API, Geolocation, Touch events
 Styling :
letting authors write more sophisticated themes.
 CSS3
 h t t p s : / / d e v e l o p e r. m o z i l l a . o r g / e n - U S / d o c s / W e b / G u i d e / H T M L / H T M L 5
NEW DOCT YE AND CHARACTER SET
 HTML 4 DOCT YPE
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
 HTML 4 Character set
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 HTML 5 DOCT YPE
 <!DOCTYPE html>
 HTML 5 Character set
 <meta charset="utf-8">
NEW AND DEPRECATED ELEMENTS
New Elements:
Content Type
Description
Embedded
Imports other resources into the document, EX: audio, video, canvas, and
iframe
Flow (內文)
Elements used in the body of documents and applications, EX: form, h1, and
small
Heading
Section headers, EX: h1, h2, and hgroup
Interactive
Content that users interact with, EX: audio or video controls, button, and
textarea
Metadata
Commonly found in the head section— Set up the presentation or behavior of
the rest of the document, EX: script, style, and title
Phrasing
Text and text markup elements, EX: mark, kbd, sub, and sup
Sectioning
Elements that define sections in the document, EX: article, aside, and title
Deprecated Elements: Elements perform inline styling in favor of using CSS, Ex:
big, center, font
SEMANTIC MARKUP
 Google analyzed millions of pages to discover the common ID
names for DIV tags and found a huge amount of repetition.
 Many people used DIV id="header" to mark up header content. HTML5
is all about solving real problems, right? So why not simply create a
<header> element?
 The sectioning (章節) content type is useful for search engine.
 New sectioning HTML5 elements
Sectioning Element
Description
header
Header content (for a page or a section of the page)
footer
Footer content (for a page or a section of the page)
section
A section in a web page
article
Independent article content
aside
Related content or pull quotes (引言)
nav
Navigational aids
AN HTML5 PAGE WITH ALL THE NEW
SEMANTIC MARKUP ELEMENTS
Excerise: Listing 1-1, 1-2
HTML 5 BROWSER COMPATIBILIT Y