1 / 17

HTML5 & CSS3

HTML5 & CSS3. Mobile Development Series, part 1. What’s New in HTML5 What’s New in CSS3 Responsive Design – Say what? Planning Ahead for JQuery Mobile. Overview. HTML5. Simplified Doc Type New Content-Specific Elements Embedded Media Types New Form Controls

olga-gilliam
Télécharger la présentation

HTML5 & CSS3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 & CSS3 Mobile Development Series, part 1

  2. What’s New in HTML5 • What’s New in CSS3 • Responsive Design – Say what? • Planning Ahead for JQuery Mobile Overview

  3. HTML5 Simplified Doc Type New Content-Specific Elements Embedded Media Types New Form Controls Support for Custom Data Attributes* Support for 2-D Drawing Support for GeoLocation {

  4. Simplified DocType

  5. Elements & Media (go to web)

  6. http://www.google.com/webmasters/tools/richsnippets For more about microdata, see http://html5doctor.com/microdata/

  7. Forms Elements & Attributes (go to web)

  8. Data-* i.e. data-role, data-city, data-season, data-croptypedata-season=‘spring’ Valid HTML5 Markup to include additional data Useable as Selector by JavaScript & JQuery JQuery Mobile uses extensively to define areas of an HTML document for specific functionality. <div data-role=“page”>my content</div> Custom Data Attributes

  9. CSS3 Backgrounds and Borders Text Effects 2D/3D Transformations Animations Multiple Column Layout User Interface {

  10. (go to web)

  11. A responsive design is one that responds to a user's device based on its screen resolution. This means that regardless of whether a user is viewing a web page on a mobile, tablet, or desktop device, the design will respond to the device appropriately by displaying a specific layout based on that device's screen resolution. Responsive Design

  12. http://www.thismanslife.co.uk/projects/lab/responsiveillustration/http://www.thismanslife.co.uk/projects/lab/responsiveillustration/ • http://foodsense.is/ • http://cssgrid.net/ • http://www.zurb.com/playground/responsive-tables • http://www.zurb.com/playground/responsive-sketchsheets Examples & Resources

  13. Use of “data-role” attribute for baked-in functionality • data-role=“page” • data-role=“listview” • data-role=“header” • data-role=“footer” http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-pages.html Plan For JQuery Mobile

  14. W3C Schools.comhttp://www.w3schools.com/html/html5_intro.asphttp://www.w3schools.com/css3/default.asp • HTML5 Rockshttp://www.html5rocks.com/en/http://slides.html5rocks.com/#landing-slide • HTML5 Doctorhttp://html5doctor.com/element-index/ • Boilerplates and Frameworkshttp://html5boilerplate.com/http://fractionless.info/and many, many more… just google! • Browser Support Reference for CSS3http://www.w3schools.com/cssref/css3_browsersupport.asphttp://caniuse.com/ References/More Info

  15. Upcoming Sessions 2/13 – JQuery 2/27 – JSON 3/6 – JQuery Mobile https://www.facebook.com/ACEITSIG http://collaborate.extension.org/wiki/ACE_Information_Technology_SIG { Sarah Johnstonsjohnston@agcenter.lsu.edu

More Related