Transcript HTML 5
HTML 5
Emlékeztető
• • • • A november 24.-ei előadás és gyakorlat elmarad December 1.-én pótoljuk az elmaradt előadást az A/1 228-as teremben 16-18-ig December 1.-én kell leadni a féléves feladatokat a gyakorlati óra keretében 12-14-ig December 8.-án tartjuk a pótZH-t a sikertelen ZH t írók számára az előadás ezért fél órával később kezdődik.
HTML5
~= HTML + CSS3 + JavaScript APIs
HTML
• Draft Specification of the next iteration of HTML • HTML 4 (1997) and XHTML 1 (2000) • Clearer separation of data and layout/style • Makes what you would already do in HTML easier • New Content Tags •
CSS3
• Specification currently under active development since 2005 • Improved selectors for determining which content to effect • (good support across modern browsers) • Embeddable font support (TTF, OTF) • Improved text layout with column support • Rounded corners, Reflections (WebKit) • Multiple backgrounds, transforms (rotation, scale, etc), animations (WebKit)
JavaScript APIs
• Local data storage • Application Cache (offline access) • Multitasking (Worker processes) • Sockets (real-time server communication: chat, games, etc.) • Native Drag and Drop events • GeoLocation • Lots of active 3 rd party libraries (Prototype, jQuery, etc)
The Good News!
• Good support on modern mobile devices (iOS, Android) • Simpler, more intuitive syntax • Video and Audio without requiring a plugin • Incremental improvements to previous HTML challenges • Much needed next step in HTML evolution • Creative enhancements: Rounded corners, gradients, text layout • Emergence of more advanced technologies such as O3D (WebGL) • Easier SEO than plugin technologies • Promising Mobile JS Frameworks (Sencha, jQTouch)
The Bad News
• The HTML5 spec is DRAFT and is in ongoing development (change) • Video support is not standardized • Not currently a single codec that all browsers will support •
Google WebM (VP 8) (open sourced by Google)
•
Ogg Theora (open source)
•
h.264/MP4 (potential licensing issues)
• No supported DRM for video or audio • Currently no support for cue points or alpha (transparent) video
The Bad News…Continued
• Limited desktop browser support • Only the newest and best have reasonable support • Internet Explorer will not have decent support until IE9 • Challenges getting consistent page display across browsers • Graceful page degradation is potentially complex • Currently no designer tools for creating HTML5 animation or interactivity (all must be implemented by a developer) • Limited developer debugging tools
Introduction
• The web is constantly evolving. New and innovative websites are being created every day, pushing the boundaries of HTML in every direction. • HTML 4 has been around for nearly a decade now, and publishers seeking new techniques to provide enhanced functionality are being held back by the constraints of the language and browsers.
• To give authors more flexibility and interoperability, and enable more interactive and exciting websites and applications, HTML 5 introduces and enhances a wide range of features including form controls, APIs, multimedia, structure, and semantics
Introduction
• Work on HTML 5, which commenced in 2004, is currently being carried out in a joint effort between the W3C HTML WG and the WHATWG. • Many key players are participating in the W3C effort including representatives from the four major browser vendors: Apple, Mozilla, Opera, and Microsoft; and a range of other organisations and individuals with many diverse interests and expertise.
• Note that the specification is still a
work in progress
and quite a long way from completion. • As such, it is possible that any feature discussed in this lecture may change in the future.
HTML5 Demos
http://html5demos.com/
Structure
• HTML 5 introduces a whole set of new elements that make it much easier to structure pages. Most HTML 4 pages include a variety of common structures, such as headers, footers and columns and today, it is fairly common to mark them up using div elements, giving each a descriptive id or class.
Diagram illustrates a typical two-column layout marked up using divs with id and class attributes. It contains a header, footer, and horizontal navigation bar below the header. The main content contains an article and sidebar on the right.
Structure
The use of div elements is largely because current versions of HTML 4 lack the necessary semantics for describing these parts more specifically. HTML 5 addresses this issue by introducing new elements for representing each of these different sections.
The div elements can be replaced with the new elements: header, nav, section, article, aside, & footer.
Markup
The markup for that document could look like the following:
Markup
There are several advantages to using these elements. When used in conjunction with the heading elements (h1 to h6), all of these provide a way to mark up nested sections with heading levels, beyond the six levels possible with previous versions of HTML. The specification includes a detailed algorithm for generating an outline that takes the structure of these elements into account and remains backwards compatible with previous versions. This can be used by both authoring tools and browsers to generate tables of contents to assist users with navigating the document.
Markup
• For example, the following markup structure marked up with nested section and h1 elements: Level 1
Level 2
Level 3
Sections
• By identifying the purpose of sections in the page using specific sectioning elements, assistive technology can help the user to more easily navigate the page.
• For example, they can easily skip over the navigation section or quickly jump from one article to the next without the need for authors to provide skip links. • Authors also benefit because replacing many of the divs in the document with one of several distinct elements can help make the source code clearer and easier to author.
Header Section
• The header element represents the header of a section. Headers may contain more than just the section’s heading—for example it would be reasonable for the header to include sub headings, version history information or bylines.
A Preview of HTML 5
Example Blog
Insert tag line here.
Footer Section
The footer element represents the footer for the section it applies to. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
Nav Element
• The nav element represents a section of navigation links. It is suitable for either site navigation or a table of contents.
Aside Element
• The aside element is for content that is tangentially related to the content around it, and is typically useful for marking up sidebars.
Section Element
• The section element represents a generic section of a document or application, such as a chapter, for example.
It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, ...Chapter 1: The Period
Article Element
• The article element represents an independent section of a document, page or site. It is suitable for content like news or blog articles, forum posts or individual comments.
That's another great article!Comment #2 by Jack O'Niell
Video and Audio
• In recent years, video and audio on the web has become increasingly viable and sites like YouTube , Viddler , Revver , MySpace , and dozens of others are making it easy for anyone to publish video and audio. • However, since HTML currently lacks the necessary means to successfully embed and control multimedia itself, many sites are relying on Flash to provide that functionality. • Although it is possible to embed multimedia using various plug-ins (such as QuickTime, Windows Media, etc.), Flash is currently the only widely deployed plugin that provides a cross-browser compatible solution with the desired APIs for developers.
Video and Audio
As evidenced by the various Flash-based media players, authors are interested in providing their own custom-designed user interfaces, which generally allow users to play, pause, stop, seek, and adjust volume. The plan is to provide this functionality in browsers by adding native support for embedding video and audio and providing DOM APIs for scripts to control the playback.
The new video and audio elements make this really easy. Most of the APIs are shared between the two elements, with the only differences being related to the inherent differences between visual and non visual media.
Video and Audio
Both Opera and WebKit have released builds with partial support for the video element. You may download the experimental build of Opera or a recent nightly build of WebKit to try out these examples. Opera includes support for Ogg Theora and WebKit supports all the formats that are supported by QuickTime, including third party codecs.
The simplest way to embed a video is to use a video element and allow the browser to provide a default user interface. The controls attribute is a boolean attribute that indicates whether or not the author wants this UI on or off by default.
Video and Audio
The optional poster attribute can be used to specify an image which will be displayed in place of the video before the video has begun playing. Although there are some video formats that support their own poster frame feature, such as MPEG-4, this provides an alternative solution that can work independently of the video format.
It is just as simple to embed audio into a page using the audio element. Most of the attributes are common between the video and audio elements, although for obvious reasons, the audio element lacks the width, height, and poster attributes.
Source Element
• HTML 5 provides the source element for specifying alternative video and audio files which the browser may choose from based on its media type or codec support. • The media attribute can be used to specify a media query for selection based on the device limitations and the type attribute for specifying the media type and codecs. • Note that when using the source elements, the src attribute needs to be omitted from their parent video or audio element or the alternatives given by the source elements will be ignored.
Video and Audio
Video and Audio
• For authors who want a little more control over the user interface so that they can make it fit the overall design of the web page, the extensive API provides several methods and events to let scripts control the playback of the media. The simplest methods to use are the play(), pause(), and setting currentTime to rewind to the beginning. The following example illustrates the use of these.
Canvas
Form Enhancements
• • • • •
Placeholder text Specific text input: email, URL, number, search Slider Date picker User Agent validation
CSS Effects
• • • • • • • • • • • Rounded corners Gradients Box and text shadows Fonts Transparencies Multiple background images and border images Multiple columns and grid layout Box sizing Stroke and outlines Animation, movement and rotation Improved selectors
CSS Effect Example Amazing CSS Effects
.amazing { border: 1px solid blue; color: red; background-color: gold; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; -webkit-box-shadow: 8px 8px 6px #474747; -moz-box-shadow: 8px 8px 6px #474747; box-shadow: 8px 8px 6px #474747; text-shadow: 8px 8px 2px #595959; filter: dropshadow(color=#595959, offx=8, offy=8); } http://css3generator.com/
CSS Timelines
http://mattbango.com/notebook/web-development/pure-css-timeline/
Offline Applications
” > … someapp.manifest
CACHE MANIFEST
#v1.01
#Explicitly cached files
CACHE:
index.html
Stylesheet.css
Images/logo.png
NETWORK:
Search.cfm
Login.cfm
/dynamicpages
FALLBACK:
/dynamicpage.cfm /static.html
http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html
Why Local Storage?
• • • Data accessed over the internet can never be as fast as accessing data locally Data accessed over internet not secure HTML5 storage is
on client
Local Storage
• • •
Beyond cookies- local storage
– – Manipulated by JavaScript Persistent – – 5MB storage per “ origin ” Secure (no communication out of the browser)
Session storage
– – Lasts as long as the browser is open Each page and tab is a new session
Browser based SQLite or IndexedDB
Cookies
• • • Invented early in Web’s history as a way to store persistent data (“magic cookies”) Small pieces of information about a user stored by Web server as text files on user’s computer Can be temporary or persistent
Cookies
• • • • Included with every HTTP request – slows down application by transmitting same information repeatedly Sends unencrypted data over internet with every HTTP request Limited to 4KB data Example: filling out a text form field
Cookies not enough
• • • • More storage space On the client Beyond page refresh Not transmitted to server
HTML5 Storage
• • • • Provides standardized API Implemented natively Consistent across browsers HTML5 storage is a specification named “Web Storage” • Previously part of HTML5 specifications • • Split into its own specification Different browsers may call it “Local Storage” or “DOM Storage”
Local Storage
• • •
Web storage
window.localStorage[ ‘ value ’ ] = ‘ Save this!
’ ;
Session storage
sessionStorage.useLater( alert( “ Hello ” ‘ fullname ’ , ‘ Garth Colasurdo + sessionStorage.fullname); ’ );
Database storage
var database = openDatabase( “ Database Name ” , “ Database Version database.executeSql( “ SELECT * FROM test ” , function(result1) { … }); ” ); http://dev.w3.org/html5/webstorage/
User Agent Storage
Using HTML5 Storage
Tracking changes to the HTML5 storage area
if (window.addEventListener) { window.addEventListener("storage", handle_storage, false); } else { window.attachEvent("onstorage", handle_storage); };
Using HTML5 Storage
Tracking changes to the HTML5 storage area
The handle_storage callback function will be called with a StorageEvent object, except in Internet Explorer where the event object is stored in window.event.
} function handle_storage(e) { if (!e) { e = window.event; }
Using HTML5 Storage
StorageEvent Object
PROPERTY
key oldValue newValue url *
TYPE
string any any string
DESCRIPTION
the named key that was added, removed, or modified the previous value (now overwritten), or added null if a new item was the new value, or null if an item was removed the page which called a method that triggered this change
Using HTML5 Storage
• Limitations in current browsers: • 5 MB of storage from each origin .
• Can not ask user for more storage (except for Opera, sort of)
Beyond Key/Value Pairs: Competing Visions
Web SQL Database
The Web SQL Database specification has been implemented by four browsers and platforms.
Safari 4.0+ Chrome 4.0+ Opera 10.5+ Mobile Safari 3.0+ Android 2.0+
HTML & XML
• The advantage of defining HTML 5 in terms of the DOM is that the language itself can be defined independently of the syntax. • There are primarily two syntaxes that can be used to represent HTML documents: the HTML serialisation (known as HTML 5) and the XML serialisation (known as XHTML 5).
• The HTML serialisation refers to the syntax that is inspired by the SGML syntax from earlier versions of HTML, but defined to be more compatible with the way browsers actually handle HTML in practice.
Benefits of Using HTML
• Backwards compatible with existing browsers • Authors are already familiar with the syntax • The lenient and forgiving syntax means there will be no user-hostile “Yellow Screen of Death” if a mistake accidentally slips through • Convenient shorthand syntax, e.g. authors can omit some tags and attribute values •(NOTE: The
Yellow Screen of Death
occurs when an ASP.NET web application encounters a problem and crashes. It is also used to refer to an error in the parsing of an XML document in a web browser.
)
Benefits of Using XHTML
• Strict XML syntax encourages authors to write well-formed markup, which some authors may find easier to maintain • Integrates directly with other XML vocabularies, such as SVG and MathML • Allows the use of XML Processing, which some authors use as part of their editing and/or publishing processes
What HTML5 is NOT
• A magic bullet for all your mobile and desktop-to-mobile woes • A replacement for technologies such as Flash or Silverlight • Immersive RLP ’ s would be much more time consuming • Certain functionality would not be possible or cost-prohibitive • While HTML5 quickly fixes some small-scale HTML issues (video, audio, layout and fonts), it does not instantly solve architectural needs for large-scale immersive cross-platform applications
Summary
Good
HTML5 has new standards and features that are long overdue Allows display of multimedia content without need of a plugin Good and rapidly progressing mobile support
Bad
Spotty desktop browser support Complexity creating consistent experiences across platforms Technical limitations on what can creatively be done
Recommendations
• Still consider separate desktop and mobile experiences • For HTML-based desktop experiences, consider simplified modular layout for streamlined restyling on mobile platforms • Don ’ t expect what has been traditionally executed in Flash or Silverlight to be cost-effective or even possible in HTML • Clearly understand the target
USER
and their needs before recommending a technology • Design for the chosen technology
Related Links
• http://www.pcworld.com/article/196670/google_announces_webm_video_format_the_future_of_html5_video.ht
ml • http://en.wikipedia.org/wiki/HTML5 • http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/ • http://www.html5test.com/ • http://newteevee.com/2010/05/13/hulu-html5-isnt-ready-for-prime-time/ • http://www.htmlgoodies.com/daily_news/article.php/386914/Is-HTML-5-the-Flash-Killer-Its-sure-got-the potential.htm
• http://slides.html5rocks.com/ • http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/ • • http://www.sencha.com/products/touch/ http://html5watch.tumblr.com
• http://www.css3.info
• http://www.chromeexperiments.com
• http://www.apple.com/html5/ • http://www.canvasdemos.com
• • http://html5demos.com
http://w3.org/TR/css3-roadmap/ • http://www.w3schools.com/html5/
Cautions
• •
Browser implementation is fragmented Standards are in development
–
HTML Candidate Recommendation is scheduled for 2012
–
CSS3 is in multiple drafts and proposals
–
ECMA-262 (edition 3) (or JavaScript 1.5)
•