advanced web technologies 13
TRANSCRIPT
Advanced Web Advanced Web TechnologiesTechnologies
Lecture # 13By: Faraz Ahmed
Contents
0Quiz #2
0HTML5
Quiz #2
0What is the use of Doctypes in web pages?
0Draw the Semantic stack.
0What does OWL stand for?
0Briefly describe the layers upto and including the OWL.
Throw nothing away!!
0HTML5 is backward compatible!
Simple beginning
<!DOCTYPE html>
Content-Type also known as MIME-Types Everything has its own MIME-types
XHTML is indicated by its own MIME-type
0Since XHTML is not widely adopted, it was a failed experiment.
0Only XHTML 1.0 was used widely and that too because of a loophole.
HTML5
0What is DOM?
0HTML5 is just an extension of HTML containing some new features.
0To check whether you have a browser supporting those features, just create a feature and run it!
Modernizer
0 It is an HTML5 detection library (javascript).
0 Just include it and use its properties.
0You can use it to check in if….else statements and work accordingly
Canvas
0Used by artists to draw stuff
0A rectangular space where stuff can be drawn on a page and an API to go along with it.
0Since canvas text functions were added later, you need a separate API for this.
0You can use Modernizr.canvastext to check whether you have this support.
Videos
0Embedding videos required using third party tools.
0You can identify multiply video formats and depending on any that are available on the client, they would run.
0You can use Modernizer.video to check whether your browser contains video tag support
Videos
var v = document.createElement("video");
return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
0 It resturns “Probably”, “Maybe” or “”
0You can use the Modernizer.video.ogg (for ogg codec) to check for versions.
LocalStorage
0Similar to cookies.
0But you can store larger amounts of data.
0Use Modernizr.localstorage to detect local storage.
0How safe is it? Anyone can read it from your PC but only websites that created it can access it. This is known as same-origin restriction
Web Workers
0Allow you to create multiple ‘Threads’
0Use Modernizr.webworkers to detect them.
Some code!
Main.html
doWork.js
Offline Web Applications
0Now everyone can create GMAIL!
0They are initially online, the browser downloads all the relevant offline files and when the user revisits, it uses those downloaded files.
0Use Modernizr.applicationcache to detect it.
Offline Web Applications
0You just need to declare this element <html manifest="manifest.cache">
0This contains the rules of caching
A sample rule file!
Rule file cracked!
0The cache manifest has three section headers:0 CACHE
0These files are cached
0 NETWORK0These are white-listed
0 FALLBACK0Backup strategy. If those files do not find an active
connection, use these instead.
GEOLocation
0Figuring out where you are.0 Your IP0 Your connection0 Cell tower you are connected to0 Dedicated GPS hardware
0Use Modernizr.geolocation for this feature
0 comes with an API
More Input Types!0 <input type="search"> for search boxes0 <input type="number"> for spinboxes0 <input type="range"> for sliders0 <input type="color"> for color pickers0 <input type="tel"> for telephone numbers0 <input type="url"> for web addresses0 <input type="email"> for email addresses0 <input type="date"> for calendar date pickers0 <input type="month"> for months0 <input type="week"> for weeks0 <input type="time"> for timestamps0 <input type="datetime"> for precise, absolute date+time stamps0 <input type="datetime-local"> for local dates and times
Input Types
0Use Modernizr.inputtypes.date to check for dates for example
Place Holder Texts
0Placed inside an input field while it is out of focus.
0Use Modernizr.input.placeholder to detect this
Microdata
0Sort of a meta-data about particular parts of html.
0For example declaring a photo under a specific license
0No function in modernizer.
References
[1] “Dive into HTML5”, http://diveintohtml5.org/past.html, visited on 4/5/2011
[2] “Web Workers”. http://www.html5rocks.com/tutorials/workers/basics/, visited on 4/5/2011