http://www.smh.com.au/it-pro/business-it/html5-or-native-app-that-is-the-question-for-app-owners-20120907-25ig4.html
HTML5• The latest version of HTML today forthe Modern Web.• First published by WHATWG (WebHypertext Application Technology...
a living standard• HTML5 is considered to be a livingstandard.• This is because WHATWG is acommunity driven body, and thep...
So what are the new features of HTML5?
the semantic layoutcustom data attributesnew UI tagsintelligent form inputsCSS3canvas graphicsaudio and videodrag and drop...
the semantic layout• A new group of HTML tags allows youto build your Web page using asemantic layout.• This means that lo...
custom data attributes• Custom data attributes allow you tostore custom, arbitrary data inside yourHTML elements.• This is...
<img data-flickr-photo-id="7953435190" alt="Tacoma Hipsters"src="http://farm4.staticflickr.com/3173/2768042395_5208451c4e_...
new UI tags• HTML5 also introduces a few new userinterface (UI) tags.• e.g., the <mark> tag for highlightingtext, <figure>...
smarter forms• Form inputs allow your users to‘submit’ data to your site and post itback to the server.• HTML5 allows much...
CSS3• New styles such as gradients, boxshadows etc. without the use of images.• Also a much more powerful way ofselecting ...
canvas graphics• The <canvas> element, and theCanvas API, can be used todynamically create graphics within thebrowser.• Or...
audio and videosupport• Via the use of the <audio> and<video> tags, allowing for mediaplayback within the browser without ...
drag and drop events• The ability to respond to drag and dropevents in JavaScript allows for thecreation of desktop-like e...
offline storage• For many years, cookies have beenused as a way to store informationwithin a user’s Web Browser.• The Web ...
offline detection /synchronisation• HTML5 allows for your website / WebApp to work offline.• It does this by creating an of...
geolocation• You can use the browser’s geolocationAPI to provide information andguidance about a user’s physicallocation.•...
photos near youusing geo-location, and the Flickr and Google Maps APIs
web workers• A way of providing multithreadingsupport in JavaScript.• For example, a CPU intensive WebWorker (such as one ...
“HTML5 or native app?”an examination of semantic elements
responsive webdesignResponsive Web Design, uses liquid layouts andCSS3 media queries to adapt the layout to theviewing env...
This stylesheet gets ‘activated’ when the screen size is belowa certain width<head><meta charset="utf-8"><title>HTML5 or N...
.wrap {margin: 5px;width: 100%;}hgroup {padding-bottom: 20px;border-bottom: 1px dotted #aaa;margin-bottom: 20px;}hgroup h1...
A brief introduction on HTML5 and responsive layouts
A brief introduction on HTML5 and responsive layouts
A brief introduction on HTML5 and responsive layouts
A brief introduction on HTML5 and responsive layouts
A brief introduction on HTML5 and responsive layouts
Upcoming SlideShare
Loading in...5
×

A brief introduction on HTML5 and responsive layouts

265

Published on

This presentation outlines some of the features that have been introduced with HTML5, along with a very simple example on how to implement a responsive layout using CSS3 media queries.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
265
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

A brief introduction on HTML5 and responsive layouts

  1. 1. http://www.smh.com.au/it-pro/business-it/html5-or-native-app-that-is-the-question-for-app-owners-20120907-25ig4.html
  2. 2. HTML5• The latest version of HTML today forthe Modern Web.• First published by WHATWG (WebHypertext Application TechnologyWorking Group) in 2007.
  3. 3. a living standard• HTML5 is considered to be a livingstandard.• This is because WHATWG is acommunity driven body, and theprocess of defining that standard isopen.• Some features, such as the <canvas>tag, were introduced by vendors, thanadopted as part of the standard.
  4. 4. So what are the new features of HTML5?
  5. 5. the semantic layoutcustom data attributesnew UI tagsintelligent form inputsCSS3canvas graphicsaudio and videodrag and drop eventsoffline storagegeolocation
  6. 6. the semantic layout• A new group of HTML tags allows youto build your Web page using asemantic layout.• This means that logically groupedsections have equally logical tags.• e.g. Headers and footers are wrappedin <header> and <footer> tags.Sections and contents can be enclosedin <section> and <article> tags.
  7. 7. custom data attributes• Custom data attributes allow you tostore custom, arbitrary data inside yourHTML elements.• This is incredibly useful if you need datato be stored statefully within yourelements.
  8. 8. <img data-flickr-photo-id="7953435190" alt="Tacoma Hipsters"src="http://farm4.staticflickr.com/3173/2768042395_5208451c4e_o.jpg" />• alt : Alternate, placeholder text of theimage.• src : The URL of the image.• data-flickr-photo-id : The dataattribute of the element, indicating theFlickr ID of the image.
  9. 9. new UI tags• HTML5 also introduces a few new userinterface (UI) tags.• e.g., the <mark> tag for highlightingtext, <figure> and <figcaption>for providing new details to images,<meter> and <progress> to displaystatic meters and progress bars.
  10. 10. smarter forms• Form inputs allow your users to‘submit’ data to your site and post itback to the server.• HTML5 allows much more intelligentform fields that restrict date entry tospecific input formats.• For example, you can enforce numbers,number ranges, dates, e-mailaddresses and URLs within form fields.
  11. 11. CSS3• New styles such as gradients, boxshadows etc. without the use of images.• Also a much more powerful way ofselecting individual attributes.• You can also create transformations,transitions and animations.
  12. 12. canvas graphics• The <canvas> element, and theCanvas API, can be used todynamically create graphics within thebrowser.• Originally designed to compete directlywith Adobe Flash.• HTML5 also has an experimentalspecification called WebGL, that allowsfor 3D graphics within the Web browser.
  13. 13. audio and videosupport• Via the use of the <audio> and<video> tags, allowing for mediaplayback within the browser without theuse of Flash.
  14. 14. drag and drop events• The ability to respond to drag and dropevents in JavaScript allows for thecreation of desktop-like experiences :“Web Apps” within the browser.• e.g. In Vimeo, you can upload videos bydragging files into the browser fromyour desktop
  15. 15. offline storage• For many years, cookies have beenused as a way to store informationwithin a user’s Web Browser.• The Web Storage API is the HTML5version of this, being simpler and morepowerful.• WebSQL and IndexedDB allow fordatabase-style storage within thebrowser.
  16. 16. offline detection /synchronisation• HTML5 allows for your website / WebApp to work offline.• It does this by creating an offline copyof your site and syncing it with theonline copy there’s an Internetconnection.• Creates the illusion that your Web Appis always available.
  17. 17. geolocation• You can use the browser’s geolocationAPI to provide information andguidance about a user’s physicallocation.• These can be tied into other services,such as Google Maps, to providelocation-based Web content to you.
  18. 18. photos near youusing geo-location, and the Flickr and Google Maps APIs
  19. 19. web workers• A way of providing multithreadingsupport in JavaScript.• For example, a CPU intensive WebWorker (such as one that appliesgraphics filters and effects to images)can be spawned, allowing the mainthread that controls the UI to be freeand responsive.
  20. 20. “HTML5 or native app?”an examination of semantic elements
  21. 21. responsive webdesignResponsive Web Design, uses liquid layouts andCSS3 media queries to adapt the layout to theviewing environment.
  22. 22. This stylesheet gets ‘activated’ when the screen size is belowa certain width<head><meta charset="utf-8"><title>HTML5 or Native App?</title><link rel="stylesheet" media="all" href="styles.css" type="text/css" /><link rel="stylesheet" media="screen and (max-width: 500px)" href="mobile.css"type="text/css" /><meta name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=no"><!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--></head>Add a new stylesheet, mobile.css
  23. 23. .wrap {margin: 5px;width: 100%;}hgroup {padding-bottom: 20px;border-bottom: 1px dotted #aaa;margin-bottom: 20px;}hgroup h1 {font-size: 32px;}hgroup h2 {display: none;}aside {display: none;}figure {float: none;margin-left: auto;margin-right: auto;}
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×