View
2.986
Download
1
Category
Preview:
DESCRIPTION
A complete overview about what HTML5 has to offer, ending with a little conclusion.
Citation preview
APRIL 8, 2023 | SLIDE 1
APRIL 8, 2023 | SLIDE 2
www.realdolmen.com
Kristof Degrave
Web squad leader
http://www.kristofdegrave.be
@kristofdegrave
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 kristof.degrave@realdolmen.com about.me/kristofdegrave @kristofdegrave
APRIL 8, 2023 | SLIDE 4
HTMLThe foundations
APRIL 8, 2023 | SLIDE 5
HTML
Document type <!DOCTYPE html>
HTML5 Mark-up Header Nav Article Footer Time …
APRIL 8, 2023 | SLIDE 6
HTML
HTML 4 structure HTML 5 structure
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
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
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
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>
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.
APRIL 8, 2023 | SLIDE 12
CSS3Styling your application
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
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
APRIL 8, 2023 | SLIDE 15
CSS 3
Other modules media queries multi-column layout Web fonts Speech Transformations
APRIL 8, 2023 | SLIDE 16
WEB APPSGetting the most out of your web application
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
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
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)
APRIL 8, 2023 | SLIDE 20
WEB APPS - OFFLINE APPLICATIONS
Example
CACHE MANIFEST
FALLBACK:
/ /offline.html
NETWORK:
*
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
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
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
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
APRIL 8, 2023 | SLIDE 25
WEB APPS - WEB SOCKETS
Frequent polling Long polling
Browser
Server
HTTP Request
HTTP ResponseBrowser
Server
HTTP Request
HTTP Response
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
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
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
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
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
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
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
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
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
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
APRIL 8, 2023 | SLIDE 36
CONCLUSION
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
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
Recommended