html5: a complete overview

APRIL 8, 2023 | SLIDE 1


www.realdolmen.com

Kristof Degrave

Web squad leader

http://www.kristofdegrave.be

@kristofdegrave

http://www.kristofdegrave.be/

http://www.twitter.com/kristofdegrave



WHO AM I?

Kristof Degrave Ingelmunster, Belgium www.realdolmen.com Web squad leader Focus on web

HTML 5.0, ASP.NET

www.kristofdegrave.be [email protected] about.me/kristofdegrave @kristofdegrave

http://www.realdolmen.com/

http://www.kristofdegrave.be/

mailto:[email protected]

http://about.me/kristofdegrave

http://about.me/kristofdegrave




HTMLThe foundations


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 Firefo

xSafari

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.


CSS3Styling your application


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


WEB APPSGetting the most out of your web application


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 lifecycle1. 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 IndexedDBDatabase Database Database

Tables Tables contain columns and rowsobjectStore contains Javascript objects and keys

Query Mechanism, Join, and Filters

SQLCursor APIs, Key Range APIs, and Application Code

Transaction Types & Locks

Lock can happen on databases, tables, or rows on READ_WRITE Transactions

Lock can happen on database on VERSION_CHANGE transaction, on an objectStores on READ_ONLY and READ_WRITE transactions. There is no object level locking.

Transaction Commits

Transaction creation is explicit. Default is to rollback unless I call commit.

Transaction creation is explicit. Default is to commit unless I call abort or there is an exception that is not caught.

Property Lookups SQLIndexes are required to query object properties directly

Records/Data Normal form and single valued propertiesDe-normal form and can have multi-valued 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

Browser

Server

HTTP Request

HTTP ResponseBrowser

Server

HTTP Request

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


THANK YOU

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

Follow us on:

Selected presentations are available on:

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





http://twitter.com/realdolmentweet

http://blogs.realdolmen.com/

http://www.slideshare.net/RealDolmen

html5: a complete overview

Technology

read write transactions

web apps

http request

page

information

resources

url

offline