html5: a complete overview
DESCRIPTION
A complete overview about what HTML5 has to offer, ending with a little conclusion.TRANSCRIPT
![Page 1: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/1.jpg)
APRIL 8, 2023 | SLIDE 1
![Page 2: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/2.jpg)
APRIL 8, 2023 | SLIDE 2
www.realdolmen.com
Kristof Degrave
Web squad leader
http://www.kristofdegrave.be
@kristofdegrave
![Page 3: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/3.jpg)
APRIL 8, 2023 | SLIDE 3
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
![Page 4: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/4.jpg)
APRIL 8, 2023 | SLIDE 4
HTMLThe foundations
![Page 5: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/5.jpg)
APRIL 8, 2023 | SLIDE 5
HTML
Document type <!DOCTYPE html>
HTML5 Mark-up Header Nav Article Footer Time …
![Page 6: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/6.jpg)
APRIL 8, 2023 | SLIDE 6
HTML
HTML 4 structure HTML 5 structure
![Page 7: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/7.jpg)
APRIL 8, 2023 | SLIDE 7
HTML
Forms New input types
E-mail, url Spin box, slider Date, DateTime, time Color picker
Validation Email, url, numeric Required Regex
Placeholder Autofocus
![Page 8: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/8.jpg)
APRIL 8, 2023 | SLIDE 8
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
![Page 9: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/9.jpg)
APRIL 8, 2023 | SLIDE 9
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
![Page 10: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/10.jpg)
APRIL 8, 2023 | SLIDE 10
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>
![Page 11: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/11.jpg)
APRIL 8, 2023 | SLIDE 11
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.
![Page 12: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/12.jpg)
APRIL 8, 2023 | SLIDE 12
CSS3Styling your application
![Page 13: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/13.jpg)
APRIL 8, 2023 | SLIDE 13
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
![Page 14: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/14.jpg)
APRIL 8, 2023 | SLIDE 14
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
![Page 15: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/15.jpg)
APRIL 8, 2023 | SLIDE 15
CSS 3
Other modules media queries multi-column layout Web fonts Speech Transformations
![Page 16: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/16.jpg)
APRIL 8, 2023 | SLIDE 16
WEB APPSGetting the most out of your web application
![Page 17: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/17.jpg)
APRIL 8, 2023 | SLIDE 17
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
![Page 18: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/18.jpg)
APRIL 8, 2023 | SLIDE 18
WEB APPS - OFFLINE APPLICATIONS
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
![Page 19: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/19.jpg)
APRIL 8, 2023 | SLIDE 19
WEB APPS - OFFLINE APPLICATIONS
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)
![Page 20: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/20.jpg)
APRIL 8, 2023 | SLIDE 20
WEB APPS - OFFLINE APPLICATIONS
Example
CACHE MANIFEST
FALLBACK:
/ /offline.html
NETWORK:
*
![Page 21: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/21.jpg)
APRIL 8, 2023 | SLIDE 21
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
![Page 22: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/22.jpg)
APRIL 8, 2023 | SLIDE 22
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
![Page 23: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/23.jpg)
APRIL 8, 2023 | SLIDE 23
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
![Page 24: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/24.jpg)
APRIL 8, 2023 | SLIDE 24
WEB APPS - WEB SOCKETS
Direct communication between client and server Chat applications Social networks Cloud applications Online gaming …
Current solutions Frequent polling Long polling
![Page 25: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/25.jpg)
APRIL 8, 2023 | SLIDE 25
WEB APPS - WEB SOCKETS
Frequent polling Long polling
Browser
Server
HTTP Request
HTTP ResponseBrowser
Server
HTTP Request
HTTP Response
![Page 26: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/26.jpg)
APRIL 8, 2023 | SLIDE 26
WEB APPS - WEB SOCKETS
TCP for the web Full duplex Connecting with a handshake Message
Begin: 0x00 Between: data End: 0xFF
Benefits Native implemented Less throughput Performance Complexity
![Page 27: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/27.jpg)
APRIL 8, 2023 | SLIDE 27
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
![Page 28: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/28.jpg)
APRIL 8, 2023 | SLIDE 28
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
![Page 29: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/29.jpg)
APRIL 8, 2023 | SLIDE 29
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
![Page 30: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/30.jpg)
APRIL 8, 2023 | SLIDE 30
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
![Page 31: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/31.jpg)
APRIL 8, 2023 | SLIDE 31
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
![Page 32: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/32.jpg)
APRIL 8, 2023 | SLIDE 32
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
![Page 33: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/33.jpg)
APRIL 8, 2023 | SLIDE 33
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
![Page 34: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/34.jpg)
APRIL 8, 2023 | SLIDE 34
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
![Page 35: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/35.jpg)
APRIL 8, 2023 | SLIDE 35
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
![Page 36: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/36.jpg)
APRIL 8, 2023 | SLIDE 36
CONCLUSION
![Page 37: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/37.jpg)
APRIL 8, 2023 | SLIDE 37
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
![Page 38: HTML5: A complete overview](https://reader033.vdocuments.us/reader033/viewer/2022051513/54635828b4af9f5d1c8b4bac/html5/thumbnails/38.jpg)
APRIL 8, 2023 | SLIDE 38
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