HTML5 & CSS3

6,607
-1

Published on

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
6,607
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
192
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 & CSS3

  1. 1. <title><br /> HTML 5 & CSS 3<br /></title><br />
  2. 2. HTML Pre-History<br />General Markup Language (GML) was developed at IBM in the 1960's by <br />Charles F. Goldfarb<br />:h1.Chapter 1: Introduction <br />:p.GML supported hierarchical containers, such as <br />:ol <br />:li.Ordered lists (like this one), <br />:li.Unordered lists, and <br />:li.Definition lists <br />:eol. as well as simple structures. <br />:p.Markup minimization (later generalized and formalized in SGML), allowed the end-tags to be omitted for the "h1" and "p" elements.<br />http://www.sgmlsource.com/history/roots.htm<br />
  3. 3. HTML Pre-History<br />Standard Generalized Markup Language (SGML) was derived from GML in the 1980's. <br />SGML was the pre-cursor to both HTML and XML.<br />SGML defined the user of angle brackets for tags. <example><br />
  4. 4. HTML<br />Hyper Text Markup Language <br />(HTML) was first defined by <br />Tim Berners-Lee in 1991<br />Original HTML had 20 tags and displayed simple text with basic markup for formatting.<br />
  5. 5. HTML 2, 3, and 4<br />HTML 2 added many of the attributes we know today such as images, forms, input.<br />HTML 3 added new tags that had been part of minor revisions. <br />HTML 4 extended the number of tags. Currently most HTML is 4.01<br />
  6. 6.
  7. 7. CSS History<br />CSS 1 was proposed in 1995 as a way to style documents. It contained descriptions for font, background and other style tags.<br />CSS 2 is the version we currently use added positioning and other elements.<br />
  8. 8. Web Usability Then<br />Mid-Late 1990's web forms started to show up with web applications.<br />Late 1990's JavaScript added further interaction.<br />2000's AJAX and Flash started to provide richer internet applications.<br />
  9. 9. Web Usability Now<br />Increased emphasis on making the web as rich an interface as native applications.<br />The mobile web <br />is the next frontier.<br />Current Technologies are dated and are hindering growth.<br />
  10. 10. HTML 5 and CSS3 to the Rescue<br />HTML5 and CSS3 are the next generation of markup that will drive the web.<br />What is the difference between HTML4 and HTML 5?<br />
  11. 11. Structure Tags<br /><header> - Header <br /><nav> - Navigation, Menu (Primary Navigation)<br /><section> - Seperation Element <br /><article> - Article Content<br /><aside> - Sidebars, Widgets, Misc non primary content <br /><footer> - Footer <br /><header> and <footer> tags may be used multiple times. Example in Sections, and in the main page.<br />
  12. 12. Structure<br /><header><br /><section><br /><aside><br /><nav><br /><header><br /><article><br /><footer><br /><footer><br />
  13. 13. New Inputs <br />* tel (Telephone) <br />* search <br />* url<br />* email<br />* datetime<br />* date<br />* month<br />* week<br />* time<br />* datetime-local<br />* number <br />* range (slider)<br />* color <br />
  14. 14. Inputs Mobile Display<br />Tel<br />Number<br />Email<br />
  15. 15. Canvas<br /><canvas> <br />Create a virtual canvas for drawing graphics in the browser. <br />Javascript can be used to control graphic rendering via the canvas.<br />x,y coordinate system<br />
  16. 16. Canvas Example<br />
  17. 17. APIs<br />Drag and Drop - Provides an API for Drap and Drop for JavaScript<br />Geolocation - Determine Location of The User via the Browser<br />Offline Storage - Browsers will support local storage. The API will be SQL like. <br />
  18. 18. APIs<br />History API - Access Browser history via JavaScript.<br /><contenteditable> - Enables a Content Editing API <br />Web Workers - Background Tasks for JavaScript<br />
  19. 19. Multimedia<br />Native Multimedia Support <br />No Plugins Necessary<br /><Video> - Native Video<br /><Audio> - Native Audio<br />
  20. 20. YouTube HTML5 Beta<br />Available for Chrome and Safari<br />
  21. 21. Other Controls<br /><Progress> Displays progress of a task or action completed.<br /><meter> Displays measure of something.<br /><Output> For output of calculation or output of a script.<br />
  22. 22. CSS3<br />
  23. 23. New Styles<br />border-radius - Rounded Corners<br />border-colors - Gradient Borders<br />box-shadow - Drop Shadows<br />text-shadow - Text Drop Shadows<br />gradient - Gradient backgrounds<br />resize - Resize an Element<br />background-size - resize background<br />background - supports multipe images<br />
  24. 24. Examples<br />
  25. 25. Selectors<br />A Variety of Selectors provide an interface to apply styles more precisely.<br />An example would be selecting an nth child. <br />Example: div:nth-child(3) {}<br />
  26. 26. Columns<br />Multi Column Layout is now provided by CSS3<br />
  27. 27. Animation and Motion<br />Animations - CSS3 allows for animations of styles<br />Transitions - Allows styles to change gradually color shifts<br />Transformations - 2D and 3D transformations, stretch, move, etc<br />
  28. 28. Examples<br />
  29. 29. Misc<br />Media Queries - Provides for ways to specify styles based on viewport size.<br />
  30. 30. When?<br />HTML5 - Canidate Stage in 2012<br />CSS3 - Still in Working Draft<br />
  31. 31. What about that Gorilla?<br />IE 6 and other legacy browsers are preventing progress.<br />IE9 has some HTML5 support.<br />
  32. 32. Benefits of HTML5 & CSS3<br />Rich Interface elements not requiring third party plugins.<br />Seperation of content and design<br />Enhanced Mobile Support <br />New Programming Interfaces<br />
  33. 33. The Critics Say<br />HTML5 will not get rid of Flash<br />HTML5 doesn't use XML Syntax<br />Too many tags / Tag Soup<br />
  34. 34. The Future<br />Current mobile browser technology will be the next battle ground.<br />HTML5 and CSS3 will even the odds with supporting more and more platforms.<br />The web will no longer be a second class user interface.<br />
  35. 35. References<br />http://en.wikipedia.org/wiki/HTML<br />http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html<br />http://tools.ietf.org/html/rfc1866<br />http://www.w3.org/People/Raggett/book4/ch02.html<br />http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/<br />http://www.w3schools.com/html5<br />http://bluefaqs.com/2010/03/understanding-the-basics-of-css3/<br />http://www.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/<br />http://www.css3.info/webkit-announces-support-for-css-3d-transforms/<br />http://www.css3.info/<br />http://images.appleinsider.com/html5.091909.001.png<br />http://www.zurb.com/article/221/css3-animation-will-rock-your-world<br />http://www.fofronline.com/2009-04/3d-cube-using-css-transformations/<br />http://www.1stwebdesigner.com/development/50-awesome-css3-animations/<br />

×