Html5 & less css

Please download to get full document.

View again

All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
 12
 
  1. HTML5, CSS3 & LESS CSS Crash course 2. HTML5  Builds on HTML4  Work began in 2006  Still not fully W3C ratified – candidate status  Includes many old…
Related documents
Share
Transcript
  • 1. HTML5, CSS3 & LESS CSS Crash course
  • 2. HTML5  Builds on HTML4  Work began in 2006  Still not fully W3C ratified – candidate status  Includes many old favourites e.g. <p></p> <div></div> etc  Adds new page layout elements designed to help accessibility:
  • 3. HTML5 PAGE LAYOUT Aids accessibility for disabled, partially sighted etc via assistive technologies – supports ARIA (Accessible Rich Internet Applications).
  • 4. HTML 5 CODE SIMPLER THAN HTML4 <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
  • 5. NEW HTML5 ELEMENTS  <canvas> – native in-browser 2D drawing usually by javascript (bad news for Adobe Flash)  <audio> - sound content  <video> - video content  <source> - multiple media elements  <embed> - embed a plugin  <datalist> - form list from external source  <output> - result from in-form calculation
  • 6.  <progress> - progress bar  <time> - form date time  <figure> - self contained content  <mark> - marked highlighted text  <keygen> - for secure forms  Many more new tags – above are just a few examples
  • 7. SOME HTML4 ELEMENTS REMOVED  <applet> - bye bye Java applets  <frame> - good riddance  <frameset> - ditto  <font> - use css instead Most browsers will still render these tags but they are not supposed to be used Many other tags removed
  • 8. NEW ATTRIBUTES FOR EXISTING TAGS  E.g. a sample of those for form input elements:  Autocomplete  Autofocus  Placeholder  Max  Min  required
  • 9. A WARNING  Major HTML features such as <header> are supported in all modern browsers  Before using more esoteric HTML5 feature make sure it is supported by target browsers…. more to come  http://fmbip.com/litmus/
  • 10. HTML5 WEB STORAGE  Better than cookies  Stored in browser  Local Storage - No expiration date  Session Storage – Stored for session  Beware – malware is misusing, some mobile malware installs ‘local storage’ user cannot get rid of
  • 11. LOCAL SQL DATABASE  Uses local SQL dB often free SQLLite dB  Firefox opposed and will not support  IE does not support  W3C API for javascript queries to dB  Place SQL directly into javascript  E.g. executeSQL() method:
  • 12. db.readTransaction(function (t) { t.executeSql('SELECT title, author FROM docs WHERE id=?', [id], function (t, data) { report(data.rows[0].title, data.rows[0].author); }); });
  • 13. HTML5 OFFLINE WEB APPLICATIONS  Designed to be used offline (what?)  Download content when user is online for browsing and use when offline  Uses HTML5 cache manifest  <!DOCTYPE html>  <html manifest="/cache.manifest">  <body>  ...  </body>  </html>
  • 14.  Sample cache manifest file CACHE MANIFEST NETWORK: /tracking.cgi CACHE: /clock.css /clock.js /clock-face.jpg
  • 15. CSS3  Intertwined with HTML5  Many new features  E.g.  Rounded corners  CSS animations  Text and box shadows  Again watch out for browser support
  • 16. CSS3 MEDIA QUERIES  Media query is CSS3 which checks browser resolution and applies css if resolution meets criteria e.g.: @media screen and (max-width: 600px) { .class { background: #ccc; } } @media screen and (min-width: 900px) { .class { background: #666; } }  Very important in mobile development
  • 17.  Instant HTML5 template with good practices  Well tried and tested  Designed to work with JQuery  Uses normalize.css  Makes browsers render html5 consistently  Corrects common bugs  Modernizr.js  Detects HTML5 and CSS3 browser capabilities
  • 18. POLYFILLS  Modernizr automatically enables html5 layout elements in IE6/7/8  For other incompatibilities you must use polyfills – there are plenty available on web  Each polyfill slows down the page load so use with caution  Polyfills do javascript emulation of features like geolocation on older browsers
  • 19. Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js' });  Above modernizr code checks for geolocation and loads different javascripts depending on support status  Polyfills for modernizr are a cottage industry with lots available
  • 20. LESS CSS  On big apps the css to produce the same effect can be repeated many times e.g. green button with round corners  CSS often breaks the DRY principle  LESS enables snippets of CSS to be reused  LESS can either be interpreted at runtime or there is an Adobe AIR app called Crunch to ‘compile’ to CSS
  • 21. LESS Mixins
  • 22. NESTED RULES
  • 23. FUNCTIONS
  • 24. CRUNCH – COMPILER FOR LESS Compiles LESS into minified CSS
  • 25. FINAL THOUGHTS OF CHAIRMAN GRAHAM  Use minified CSS & JS for mobile  Several online minifiers  Also can combine CSS and JS – quicker to load one combined script than several smaller ones
  • 26. BEDTIME BROWSING  http://lesscss.org/  http://html5boilerplate.com/  http://crunchapp.net/  http://necolas.github.io/normalize.css/  http://modernizr.com/
  • 27. SOME WELL KNOWN HTML5 SITES  http://beta.theexpressiveweb.com/  http://grischek.com/  http://jamfactory.com.au/40years/  https://twitter.com/
  • Related Search
    We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks