Computer Information System Information System California State University Los Angeles Jongwook Woo CIS 461 Web Development I HTML 5 Jongwook Woo, PhD California State University, Los Angeles Computer Information System Department

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Content nHTML5 History and Vision nOther HTML5 features nDeveloping HTML5 Applications nHTML5 Video and Audio

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System HTML 5 References nhttp:// nHTML5:The30,000’ View - A fast-paced overview of HTML5 mBy Peter Lubbers, Kaazing

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System HTML History Timeline nHTML Timeline mTim Berbers and Lee Writes –Proposing an Internet based hypertext Systems n mHypertext Markup Language (HTML) draft published by IETF mHTML 2.0, 3.2, 4.0, n mXHTML 1.1, 2.0 mHTML 5 Draft

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System HTML5 Standards Bodies nWeb Hypertext Application Technology Working Group (WHATWG) mFounded in 2004 (by individuals working for browser vendors Apple, Mozilla, Google, and Opera) mDevelops HTML and APIs for web application development mUnofficial and open collaboration of browser vendors and interested parties mhttp:// nWorld Wide Web Consortium (W3C) mCreated draft of HTML5 in 2008 mhttp://dev.w3.org/html5/spec/Overview.html

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System HTML5 Standards Bodies nInternet Engineering Task Force (IETF) mProtocols (HTTP, WebSocket) mhttp://tools.ietf.org/html/draft-hixie-thewebsocketprotocolhttp://tools.ietf.org/html/draft-hixie-thewebsocketprotocol nHTML5 is still a work in progress. mHowever, most modern browsers have some HTML5 support

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Some rules for HTML5 nSimpler nNew features should be based on mHTML, CSS, DOM, and JavaScript nReduce the need for external plugins m(like Flash) nBetter error handling nMore markup to replace scripting nHTML5 should be device independent nThe development process should be visible to the public

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Presentation vs. Content nHTML5 strives mto separate content from presentation where possible (use CSS) nMost of the presentational features from earlier versions of HTML are no longer supported mThis was already in the works (HTML4 Transitional, XHTML1.1) mProblems with presentational markup: –Poor accessibility –Unnecessary complexity –Larger document size

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System New Features nThe canvas element mfor drawing nThe video and audio elements mfor media playback nBetter support for local offline storage nNew content specific elements, like marticle, footer, header, nav, section nNew form controls, like mcalendar, date, time, , url, search

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Browser Support nHTML5 is not yet an official standard, mand no browsers have full HTML5 support. nBut all major browsers continue to add new HTML5 features to their latest versions. mSafari, Chrome, Firefox, Opera, Internet Explorer

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Simplified Doctype nHTML4/XHTML m nHTML5 m

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Simplified Character Set nHTML4/XHTML m nHTML5 m

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System New HTML5 Tags nNew HTML5 Tags m,,,,,,,,,,,,,,,,,,,,,,, nRemoved Tags m,,,,,,,,,,, nHTML5 Cheat Sheet mBy Antonio Lupettihttp://woorkup.com/wp- content/uploads/2009/12/HTML5-Visual-Cheat-Sheet.pdf

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System HTML 5 code (headsection) HTML 5

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System HTML 5 code (body section part 1) Header Nav

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System HTML 5 code (body section part 2) Article Header Article Footer

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System HTML 5 code (body section part 3) Aside Footer

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System New Media Elements nHTML5 provides a new standard for media content: n mFor multimedia content, sounds, music or other audio streams n mFor video content, such as a movie clip or other video streams n mFor media resources for media elements, defined inside video or audio elements n mFor embedded content, such as a plug-in

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System The Canvas and form Element nThe canvas element muses JavaScript to make drawings on a web page. m –For making graphics with a script nNew Form Elements mProvides more functionality: m –A list of options for input values m –Generate keys to authenticate users m –For different types of output, such as output written by a script

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System New Input Type Attribute Values nthe input element's type attribute has many new values, mfor better input control before sending it to the server: nTypeDescription mTel –The input value is of type telephone mNumbersearch –The input field is a search field murl –The input value is a URL m –The input value is one or more addresses mDatetime –The input value is a date and/or time

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System New Input Type Attribute Values nDate mThe input value is a date nMonth mThe input value is a month nWeek mThe input value is a week nTime mThe input value is of type time ndatetime-local mThe input value is a local date/time

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System New Input Type Attribute Values nNumber mThe input value is a number nRange mThe input value is a number in a given range nColor mThe input value is a hexadecimal color, like #FF8800

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Video on the Web nUntil now, there has never been a standard for showing video on a web page. mToday, most videos are shown through a plugin (like flash). However, not all browsers have the same plugins. mHTML5 specifies a standard way to include video, with the video element.

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Video on the Web FormatIEFirefoxOperaChromeSafari OggNo No MPEG 49.0+No WebMNo No nCurrently, there are 3 supported video formats for the video element: mOgg = Ogg files with Theora video codec and Vorbis audio codec mMPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec mWebM = WebM files with VP8 video codec and Vorbis audio codec

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System How Video Works nTo show a video in HTML5: nThe control attribute is for madding play, pause, and volume controls.

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System How Video Works nExample Your browser does not support the video tag. malways a good idea to include the width and height attributes. mInsert content between the and tags –for browsers that do not support the video element:

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System How Video on Multiple Web Browser Works nThe example previous uses an Ogg file, mwill work in Firefox, Opera and Chrome. nTo make the video work in IE, Safari, future Chrome, mwe must add a MPEG4 and WebM file. nThe video element allows multiple source elements. mThe browser will use the first recognized format: nExample Your browser does not support the video tag.

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Audio on the Web nHTML5 specifies a standard way to include audio, with the audio element. mUntil now, there has never been a standard for playing audio on a web page. mToday, most audio are played through a plugin (like flash). However, not all browsers have the same plugins. nThe audio element can play sound files, mor an audio stream. FormatIEFirefoxOperaChromeSafari Ogg VorbisNoYes No MP3YesNo Yes WavNoYes No

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System How Audio Works nTo play an audio file in HTML5: mThe control attribute is for adding play, pause, and volume controls. nInsert content between the and tags mfor browsers that do not support the audio element: nExample Your browser does not support the audio element.

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System How Audio on Multiple Web Browsers Works nThe example above uses an Ogg file, mwill work in Firefox, Opera and Chrome. nTo make the audio work in Internet Explorer and Safari, m add an audio file of the type MP3. nThe audio element allows multiple source elements. mSource elements can link to different audio files. mThe browser will use the first recognized format: nExample Your browser does not support the audio element.

Jongwook Woo CSULA Jongwook Woo Computer Information System Information System Audio and Video Attributes nNote: There are attributes for Audio and Video nExcercises by referring to mhttp:// mhttp://