View
978
Download
0
Category
Tags:
Preview:
DESCRIPTION
This is an internal brown bag presentation given at ISITE Design (isitedesign.com), where we discuss the topic of HTML5 with a broad internal audience.
Citation preview
HTML5 (Mid-Technical)
Presented by:
Christophe SaxeISITEDesign.com
HTML5 What is it?
Why the new specification?
When can we start using it?
History of HTMLDesigned to share and
markup scientific documents.
New uses were applied, and HTML evolved.
Demands ChangedAs the web matured, more
sites became dynamic applications. Static sites
have become less common.
What's new?HTML5 has been architected
to fit the way the web is being used. Applications are
the main focus.
What’s new?– Tags
• Video• Audio• Canvas
Tags– Video Tag
• Show Video on webpage without other application
• Renders on an iPhone/ iPad • IE6-IE8 does not support the tag
Tags– Audio Tag
• Just like video, its an object on the page controlled with JavaScript.
Tags– Canvas Tag– 2D drawing and animations– Can draw on it using
JavaScript
Browsers– IE is 60% of all browsers– IE8 is 25% of all browsers (The
single most used IE browser)– Adoption of new browser
versions will improve.
Other Tags– Header– Footer– Article– Section– Navigation
Other Tags– Improve Indexing and
Accessibility by improving semantics of page elements
Tags– Form Tags
• Email• Calendar• Phone Numbers• Many more
Application Elements
– Progress Bar– Editable Areas
Application Awareness
– New APIs– Storage– Offline applications
DOM(Document Object Model)
– Version of site that lives in CPU Memory, and determines page interaction.
DOM
– HTML 4 DOM was an add-on, HTML5 DOM is inherent in the script with outlined functionality
Application Awareness
– New APIs– Storage– Offline applications
StorageSave a file and database
on users client. Enables offline applications w/out
secondary technology
Offline Applications
Think about email, calendars, or even lightweight games.
WebkitLayout engine for Safari and
Chrome Browsers.
It is portable to many other computing platforms.
Role of HTML5Not a Flash ReplacementNot CSS3 Not AJAX
HTML5 SitesAppleGoogleNewsweek
Have all changed DocType to HTML5
HTML5 DocTypeWill work in all browsers
MobileSmartphone browsers
(almost) across the board use WebKit, the most HTML5 ready browser at this time.
MobileIdeal target for offline
applications.HTML5 enables one
application to operate in the browser with saved state (offline).
MobileVideo tag supports the
decision to use HTML5 for mobile sub-sites.
Form TagNew form tags allow you to
serve the appropriate keypad based on form field. (phone format, .com for URL, etc.)
Form TagBrowsers are still catching up:
Firefox4 and IE9 should be supporting form tags.
LandscapeBrowsers will catch up, and
start to unlock the opportunities provided by HTML5
FrameworksFrameworks and CMS are
(mostly) not there to support the new tags, but developers are at work as we speak.
SummaryFor new web projects, you
will be “future proofing” your website.
Find Us:
ISITEDesign.com
@ISITE_Design
Thank youThank you to the entire ISITE
Design Front End Development team, specifically Christoph for putting this event together
QuestionsThe next 12 min. will be
dedicated to QA.
Q/A Schedule– 21:00 Preserved State: Native vs.
web app. debate – 23:50 Encoding types and
Streaming Support – 24:45 Audio/Video File Reference
Find Us:
ISITEDesign.com
@ISITE_Design
Q/A Schedule– 21:00 Preserved State: Native vs.
web app. debate – 23:50 Encoding types and
Streaming Support – 24:45 Audio/Video File Reference
Find Us:
ISITEDesign.com
@ISITE_Design
Recommended