Your SlideShare is downloading. ×
A brief introduction on HTML5 and responsive layouts
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

A brief introduction on HTML5 and responsive layouts


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.

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

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1.
  • 2. HTML5• The latest version of HTML today forthe Modern Web.• First published by WHATWG (WebHypertext Application TechnologyWorking Group) in 2007.
  • 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. So what are the new features of HTML5?
  • 5. the semantic layoutcustom data attributesnew UI tagsintelligent form inputsCSS3canvas graphicsaudio and videodrag and drop eventsoffline storagegeolocation
  • 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. 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. <img data-flickr-photo-id="7953435190" alt="Tacoma Hipsters"src="" />• 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. 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. 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. 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. 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. audio and videosupport• Via the use of the <audio> and<video> tags, allowing for mediaplayback within the browser without theuse of Flash.
  • 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. 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. 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. 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. photos near youusing geo-location, and the Flickr and Google Maps APIs
  • 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. “HTML5 or native app?”an examination of semantic elements
  • 21. responsive webdesignResponsive Web Design, uses liquid layouts andCSS3 media queries to adapt the layout to theviewing environment.
  • 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=""></script><![endif]--></head>Add a new stylesheet, mobile.css
  • 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;}