HTML5: A complete overview

www.realdolmen.com

OCTOBER 26, 2011 | SLIDE 2

WHO AM I?
 Kristof Degrave
 Ingelmunster, Belgium
 www.realdolmen.com
 Web squad leader
 Focus on web
 HTML 5.0, ASP.NET

 www.kristofdegrave.be
 kristof.degrave@realdolmen.com
 about.me/kristofdegrave
 @kristofdegrave


The foundations

HTML


HTML
 Document type
 <!DOCTYPE html>

 HTML5 Mark-up
 Header
 Nav
 Article
 Footer
 Time
 …


HTML

HTML 4 structure HTML 5 structure


HTML
 Forms
 New input types
 E-mail, url
 Spin box, slider
 Date, DateTime, time
 Color picker
 Validation
 Email, url, numeric
 Required
 Regex
 Placeholder
 Autofocus


HTML
 Microdata
 Allows machine-readable data to be embedded
 in an easy-to-write manner
 with an unambiguous parsing model
 Uses the DOM structure to present data
 Compatible with numerous other data formats
 JSON
 RDF


HTML
 Canvas 2D context
 Drawing on the browser
 Bitmap based
 Immediate mode
 SVG
 Language for describing 2D-graphics and graphical applications
in XML
 Vector Based
 “Retained Mode”
 Video & audio
 The ability to play video and audio in the browser


HTML – VIDEO SAMPLE
<video id="movie" width="320" height="240" preload controls>
<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' />
<object width="320" height="240" type="application/x-shockwave-flash"
data="flowplayer-3.2.1.swf">
<param name="movie" value="flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url":
"http://wearehugh.com/dih5/pr6.mp4", "autoPlay":false,
"autoBuffering":true}}' />
<p>
Download video as
<a href="pr6.mp4">MP4</a>,
<a href="pr6.webm">WebM</a>, or
<a href="pr6.ogv">Ogg</a>.
</p>
</object>
</video>


VIDEO CODEC SUPPORT

Codecs/container IE Firefox Safari Chrome Opera iPhone Android
Theora+Vorbis+Ogg - 3.5+ *** 5.0+ 10.5+ - -
H.264+AAC+MP4 9.0+ - 3.0+ - - 3.0+ 2.0+
WebM 9.0+* 4.0+ *** 6.0+ 10.6+ - 2.3+**

* Internet Explorer 9 will only support WebM “when the user has installed a VP8 codec”
** Although Android 2.3 supports WebM, there are no hardware decoders yet, so battery life is a concern.
*** Safari will play anything that QuickTime can play, but QuickTime only comes with H.264/AAC/MP4 support
pre-installed.


Styling your application

CSS3


CSS 3
 Borders
 border-color
 border-image
 border-radius
 box-shadow
 Backgrounds
 background-origin and background-clip
 background-size
 multiple backgrounds
 Color
 HSL colors
 HSLA colors
 opacity
 RGBA colors


CSS 3
 Text effects
 text-shadow
 text-overflow
 word-wrap
 User-interface
 box-sizing
 resize
 outline
 nav-top, nav-right, nav-bottom, nav-left
 Selectors
 attribute selectors
 Basic box model
 overflow-x, overflow-y


CSS 3
 Other modules
 media queries
 multi-column layout
 Web fonts
 Speech
 Transformations


Getting the most out of your web application

WEB APPS


WEB APPS - OFFLINE APPLICATIONS
 Online webpages
 Get downloaded
 Then rendered

 Offline Webpages
 Issue: Pages can’t be downloaded

 Solution
 Manifest file
 Manifest attribute on the html element of each offline enabled page
 Describes all necessary resources to use the application offline


 Offline application lifecycle
1. Visit the offline enabled application
2. Browser reads the manifest file
3. Downloads the resources described in the manifest file
4. Copies those files to a local cache
 Not the httpcache
5. When every thing is downloaded, the application is ready for
offline use
6. Resources automatically updated when changed

 The web application is now on- and offline available.
 Navigate to the url in both cases


 Cache Manifest file
 First line of every cache manifest file:
 CACHE MANIFEST
 The following is devided in 3 parts
 Explicit section
– CACHE
– All files in this list will be downloaded and cached
 Fallback section
– FALLBACK
– Page that will be displayed when you are trying to reach a page offline
that hasn’t been cached
 Outline whitelist section
– NETWORK
– Contains recoures that should never be cached (ex. Cgi scritps)


 Example

CACHE MANIFEST
FALLBACK:
/ /offline.html
NETWORK:
*


WEB APPS - WEB STORAGE
 Key/value pairs
 Key and value are string
 5 MB per domain
 Increase of quota is not allowed
 Durable data
 Persists data beyond Page refresh
 Data is never transmitted to the remote web server
 Storage event
 Occurs when the storage area changes
 Adding data
 Deleting data
 Changing data


WEB APPS - INDEXED DB
 Advanced key/value data management
 Stores large numbers of objects locally
 Asynchronous and synchronous APIs
 No structured query language (SQL)
 Methods are provide by the API
 Multiple database per domain
 Each database exists out of object stores
 Object stores
 Mechanism for storing data
 Indexes
 Searching in data
 Transactions
 Retrieving and manipulating data


WEB APPS - INDEXED DB

Concept Relational DB IndexedDB
Database Database Database

Tables Tables contain columns and rows objectStore contains Javascript objects and keys

Query Mechanism,
SQL Cursor APIs, Key Range APIs, and Application Code
Join, and Filters
Lock can happen on database on
Transaction Types & Lock can happen on databases, tables, or rows VERSION_CHANGE transaction, on an objectStores
Locks on READ_WRITE Transactions on READ_ONLY and READ_WRITE transactions.
There is no object level locking.
Transaction creation is explicit. Default is to commit
Transaction creation is explicit. Default is to
Transaction Commits unless I call abort or there is an exception that is
rollback unless I call commit.
not caught.
Indexes are required to query object properties
Property Lookups SQL
directly
De-normal form and can have multi-valued
Records/Data Normal form and single valued properties
properties


WEB APPS - WEB SOCKETS
 Direct communication between client and server
 Chat applications
 Social networks
 Cloud applications
 Online gaming
 …

 Current solutions
 Frequent polling
 Long polling



Frequent polling Long polling

B HTTP Request B HTTP Request

S S
r r
HTTP Response

e e
o o
r r
w w
v v
s s
e e
e e
r r
r r HTTP Response


 TCP for the web
 Full duplex
 Connecting with a handshake
 Message
 Begin: 0x00
 Between: data
 End: 0xFF
 Benefits
 Native implemented
 Less throughput
 Performance
 Complexity


WEB APPS - FILE
 File API
 API for representing file objects
 programmatically selecting
 accessing their data
 File API writer
 API for writing to files
 File API Directories and System
 API to navigate file system hierarchies
 Defines a mean to expose sandboxed sections of a users local
file system


WEB APPS - MEDIA
 Media Capture API
 Provides access to the device capabilities of
 Audio capture
 Image capture
 Video capture
 HTML Media Capture
 Defines HTML form enhancements that provide access toe the
Media Capture API


WEB APPS - COMMUNICATION
 Server-sent event
 Receives push notifications from a server
 In form of DOM Events
 Uses HTTP connection
 Possible to work with other push notification schemes
 Push SMS

 XMLHttpRequest
 Functionality for transferring data
 AJAX


WEB APPS - COMMUNICATION
 Messaging API
 Provides access to messaging functionality in the device
 SMS
 MMS
 E-mail
 HTML 5 Messaging
 Defines mechanism for communicating between browsing
contexts
 Web notifications
 API for displaying simple notifications


WEB APPS - PERFORMANCE
 Web workers
 Executing scripts in the background
 Doesn’t freezes the UI
 Takes advantage of multicores
 Allows thread-like operations with message-passing
 Page visibility API
 Determines if the page is visible
 Visibility changed event
 Purpose: saves battery life
 Request animation frame API
 API for create power efficient and smooth animations
 Determines how many frames per second an animation needs
 Depending on the display’s refresh rate
 Only when the page is visible


WEB APPS – TIMING INFORMATION
 Navigation timing
 Interface to access timing information related to navigation
 Resource timing
 Interface to access timing information related to HTML elements
 User timing
 Measures the performance of the applications
 Gets access to high precision timestamps
 Performance timeline
 Interface to access timing information related to navigation and
elements


WEB APPS – DEVICE INFORMATION
 Network information API
 Interface to access the underlying network information of the
device
 DeviceOrientation event specification
 Provides information about the physical orientation and motion of
the device
 Battery status event specification
 Provides information about the battery status of the hosting
device
 Touch event specification
 A set low level event to handle touch events
 Single as multi touch
 Also addresses pen-tablet devices


WEB APPS
 Selector API
 Methodes for retrieving elements from the DOM
 Clipboard API
 Defines clipboard operations
 Copy, cut, paste
 Contacts API
 Provides access to a user's unified address book
 Calender API
 Defines high level interfaces to obtain readaccess to a user’s
callender service


WEB APPS - DEVICE INFORMATION
 Geolocation
 Scripted access to geographical location information
 Get’s information from the hosting device
 IP address
 Wireless network connection
 Cell tower
 GPS


CONCLUSION


CONCLUSION
 Start using it today
 Use fallback mechanisms for older browsers
 Use feature detection instead of browser detection
 Pro’s
 Cross platform
 Cross browser
 Approaches native application experience
 Offline applications
 Contra’s
 Many features still in draft
 Only modern browsers
 JavaScript Driven / Not strong types


For more information:
visit our website WWW.REALDOLMEN.COM

Follow us on:

Selected presentations are available on:

THANK YOU Or scan this QR code with your Smartphone to immediately go to the website


HTML5: A complete overview

More Related Content

What's hot

Viewers also liked

Similar to HTML5: A complete overview

Recently uploaded

HTML5: A complete overview

Editor's Notes