PRO HTML5 PROGRAMMING POWERFUL APIS FOR RICHER INTERNET APPLICATION DEVELOPMENT

CHAP 1. OVERVIEW OF HTML5

 HTML was first published as an Internet draft in  Version 2.0, 3.2, 4.0 occurred in the same year, and finally 4.01 in  HTML5 specification was created by Web Hypertext Application Working Group (WHATWG) in  W3C became involved with HTML again in 2006 and published first working draft in 2008, and XHTML 2 stopped in HISTORY OF HTML5

 HTML5 spec. is a working draft today (not final).  2012: candidate recommendation. (HTML5 will be complete )  2022: proposed recommendation.  IE6 does not support many of new features.  Microsoft promises to design that browser with increased HTML5 support. MYTH OF 2022

 Web Hypertext Application Technology Working Group (WHATWG)  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. WHO IS DEVELOPING HTML5

 Compatibility  Utility - Separation of Presentation and Content  Most of presentational features of earlier versions of HTML are no longer supported (but will still work!).  Shortages of older versions of HTML  Poor accessibility  Unnecessary complexity (Harder to read code)  Large document size – slower loading pages  Interoperability - Simplify wherever possible  Native browser ability instead of complex JavaScript code  A new, simplified character set declaration  Powerful yet simple HTML5 APIs  Universal access:  Accessibility  Media independence  Support for all world languages: Ex: supports Ruby annotation CHARACTERISTICS OF HTML5

 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 A PLUGIN – FREE PARADIGM

 Canvas (2D or 3D)  Channel messaging  Cross-document messaging  Geolocation  MathML  Microdata  Server-Sent Event  Scalable Vector Graphics (SVG)  WebSocket API and protocol  Web origin concept  Web Storage  Web SQL database  Web Workers  XMLHTTPRequest Level 2 HTML5 FEATURES

 DOCTYPE   Character set  NEW DOCTYE AND CHARACTER SET

Content TypeDescription EmbeddedImports other resources into the document, EX: audio, video, canvas, and iframe FlowElements used in the body of documents and applications, EX: form, h1, and small HeadingSection headers, EX: h1, h2, and hgroup InteractiveContent that users interact with, EX: audio or video controls, button, and textarea MetadataCommonly found in the head section— Set up the presentation or behavior of the rest of the document, EX: script, style, and title PhrasingText and text markup elements, EX: mark, kbd, sub, and sup SectioningElements that define sections in the document, EX: article, aside, and title NEW AND DEPRECATED ELEMENTS Deprecated Elements: Elements perform inline styling in favor of using CSS, Ex: big, center, font

 The sectioning content type is useful for search engine.  New sectioning HTML5 elements SEMANTIC MARKUP Sectioning Element Description headerHeader content (for a page or a section of the page) footerFooter content (for a page or a section of the page) sectionA section in a web page articleIndependent article content asideRelated content or pull quotes navNavigational aids

  Define the relationship between a document and an external resource  Placed at  Attributes HTML5 TAG - AttributeValueDescription hrefURLSpecifies the location of the linked document relAlternate/author/help/icon/licenc e/next/pingback/prefetch/prev/se arch/sidebar/stylesheet/tag Specifies the relationship between the current document and the linked document  Example:

 webkit and moz mean they are not W3C standard  webkit  Supported by Safari and Chrome  -webkit-box-shadow: 2px 2px 20px #888; (Shadow effect)  -webkit-transform: rotate(-45deg); (Rotate effect)  -webkit-transform: scale(0.5); (Change size)  -webkit-border-radius: 10px;  moz  Supported by Mozilla  -moz-box-shadow: 2px 2px 20px #888; (Shadow effect)  -moz-transform: rotate(-45deg); (Rotate effect)  -moz-border-radius: 10px;  W3C  border-radius: 10px; CSS3 – WEBKIT/MOZ

AN HTML5 PAGE WITH ALL THE NEW SEMANTIC MARKUP ELEMENTS Excerise: Listing 1-1, 1-2

SIMPLIFYING SECTION – DOM SELECTORS API FunctionExample getElementById() document.getElementById("foo"); getElementsByName() document.getElementsByName("foo"); getElementsByTagName() document.getElementsByTagName("input"); FunctionExampleResult querySelector()document.querySelector("inp ut.error") Return the first input field with a style class of “error” querySelectorAll()document.querySelectorAll("# results td") Return any table cells inside the element with id results HTML4 HTML5

EXCERISE Use querySelector() to find table cells which mouse hovered Use domNode.onclick to set onClick events Use domNode.innerHTML to set text in the tags Excerise: Listing 1-3

 JSON  A relatively new and increasing popular way to represent data  Data is represented as objects  In older browsers, a JavaScript library ( is necessary. Parsing and serializing are not always fast enough  Newer browsers have a native implementation of JSON  The canonical API for JSON has two functions, parse() and stringify()  DOM Level 3  DOM Levels are the versions of the specification for defining how the Document Object Model should work  Most browsers support standard APIs for events and elements, Internet Explorer differs.  IE9 will support DOM level 2 and 3 features. WINDOWS.JSON AND DOM LEVEL 3