Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

HTML 5 - Beyond the hype

No description
by

Mushtaq Jameel

on 5 September 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of HTML 5 - Beyond the hype

HTML 5 - Beyond the hype
Semantics - New Tags
http://slides.html5rocks.com/#semantics-markup-title
Meet SOME of the HTML5 APIs
Nut's & Bolts
Most people have heard of the rich APIs, but there's also a slew of lesser-known features that you should be aware of. These are the "nuts & bolts" of building modern web applications.
HTML 5 is not a silver bullet, Nor contray to popular belief,is it any new technology , like all technologies, it is a group of technologies
Something to Motivate You
HTML 5 - Bird's-eye View
Engineers Marketers
Hybrid App
HTM5 5 Responsive App
Open's New Paradigm to Traverse
Comparison
HTML 5
HTML 4.1
5 Myths about
#1 - HTML5 won’t be ready until 2022
2022 was a date mentioned in an article back in 2008 but the date for HTML5 to reach W3C Recommendation level is 2014. 2014? Just the date where there should be 2 browsers with 100% interoperable implementations of the specification.
#2 - All Browsers don't support HTML 5
There’s a myth that HTML5 is some monolithic, indivisible thing. It’s not. It’s a collection of features .
So, in the short term, you cannot say that a browser supports everything in the spec.
#3 - IE does not support HTML 5
IE9 supports the HTML5 features that can be used today and supports them well.
IE10 supports practically the whole specification and there is more to come before final release.
IE8 supports a number of features too such as localStorage.
#5 - HTML 5 has built in support for Adaptive Design
#4 - Good bye JavaScript we have HTML 5
HTML5 SPEC packs a lot of power and flexibility, but that power if and flexibility is only leveraged using JavaScript in most instances.

HTML 5 upgraded most of the JavaScript Object's used for Ajax communication,DOM manipulation etc ....
HTML 5 does not offer built in support for RWD,AWD, or single page website's.
3 things
that
make html
HTML 5
Semantics & Markup
New Elements added to the DOM.
Improvements to the core platform
DOM Elements no longer just are to be
used as placeholders or containers, they add meaning to content
Vastly improves SEO
New APIs
Deprecated elements dropped–center,
font, strike
Nuts & Bolts
New Selectors
Custom data-* attributes

this tag defines an article, a user comment or a post, so an independent item of content

the aside tag marks content aside from the page content, which for example could be a lateral sidebar



the navigation can now be placed in the markup in between the nav tags, which will automatically make your lists act like navigation

this is another important new syntax, as it can define any kind of sections in your document. It works pretty much like a div which separates different sections.



this new tag defines a container for interactive content (plugin) or external application

the canvas tag is quite exciting, as it allows drawing graphics via scripting (mostly JavaScript, but some others can be employed as well)
Tag Exchange
Canvas
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
<article>
<aside>
<header> , <footer>
<nav>
<section>
<audio>,<video>
<embed>
<canvas>
Breakdown among Fortune 500 companies
Is it Possible that
Fortune 500 companies that embrace HTML5 see bigger earnings?
Reach of HTML5
Which versions of
HTML
are the 100 Most Popular Web sites using ?
New Selectors
querySelector(),
querySelectorAll(),
matchesSelector()
Custom data-* attributes
Element.dataset
Element.classList
A platform that works for you, not against you
Slick and light Markup
Slick & light Markup
Would the Real HTML5 please stand up ...
Media(Aud & Vid)
Offline Caching
Drag & Drop
Web Storage
Web Messaging
recommendation
i.e 10
The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).
With HTML5 it is easy to make an offline
version of a web application, by creating a
cache manifest file.
3 Advantages :
Speed - cached resources load faster
Reduced server load - the browser will only download
updated/changed resources from the server
w3schools.com/html/html5_app_cache.asp
HTML5 web storage, a better
local storage than cookies.
Secure and faster
On-demand Data
Data is stored in Key/Val Pairs
Possible to store large amounts of data, without
affecting the website's performance
The <canvas> element is only a container for graphics.
You must use a script to actually draw the graphics.

The <canvas> element is only a container for graphics.
You must use a script to actually draw the graphics.

w3schools.com/html/html5_webstorage.asp
<datalist>
<details>
<details>
<meter>
<progress>
<keygen>
A way for documents in separate
browsing contexts to share data without the
DOM being exposed to malicious XSS.
Introduced in the WHATWG HTML5 draft specification, allowing documents to communicate with one another across different origins, or source domains
Full transcript