Basics of css and xhtml

755 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
755
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Basics of css and xhtml

  1. 1. CSS3+ HTML5 RACHEL McCLUNG | 10.21.11 A User’s Perspective
  2. 2. TODAY’S DISCUSSION What sites employ HTML5 and CSS3 to effectively shape the user experience, and how can we create interactive content in a responsible way? MY PERSPECTIVE ++ Visual designer with technical abilities ++ Overarching principles and practical applications
  3. 3. WHAT IS HTML5? HTML5 is a language for structuring and presenting content for the World Wide Web. It is the fifth revision of the HTML standard and is still under development.1
  4. 4. WHAT IS CSS3? Cascading Style Sheets is a style sheet language used to describe the look and formatting of an HTML document. CSS3 is the third specification of CSS and is still under development.2
  5. 5. FORM + FUNCTION
  6. 6. FORM ≈ CSS FUNCTION ≈ HTML
  7. 7. GOOD DESIGN Ideal is to have a balance of form and function to produce a positive user experience.
  8. 8. IDENTIFYING HTML5 The very start of the source code looks like this: <!doctype html> Previously, it was more verbose: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd”>
  9. 9. 3 HTML5 PAGE STRUCTURE <header> <nav> <article> <sidebar> <footer> <section>
  10. 10. CSS3 STRUCTURE .box .box { background: #FFF; width: 460px; -webkit-box-shadow: 0px 0px 20px 2px #333; -moz-box-shadow: 0px 0px 20px 2px #333; box-shadow: 0px 0px 20px 2px #333; }
  11. 11. BROWSER SUPPORT 340 313 293 141 Try it out: http://html5test.com4
  12. 12. TAKEAWAYS ++ There are a lot of amazing sample sites out there that push the boundaries of HTML5 and CSS3. ++ Some aren’t practical for day-to-day work. ++ Clean code is great, and will make your site run more efficiently. ++ How do these technologies work in tandem to enhance every day web experiences?
  13. 13. HTML5
  14. 14. FEATURE OVERVIEW ++ Intended to reflect a more modern, cohesive web. ++ Comes with a host of features that make building web applications better.4 ++ Gives a consistent experience across browsers and platforms. ++ It’s faster.
  15. 15. OFFLINE STORAGE + APP CACHING ++ What happens when a you can’t go online? ++ Caching refers to elements related the logic side of an application, while offline storage is for data files.5 BENEFITS ++ Convenience, no interruption to workflow. ++ Can speed up applications when you are online.
  16. 16. VIDEO + AUDIO ++ Flash has two key uses on the web: animation and encoding for video and audio. ++ HTML5 has provisions for embedding this content directly into a webpage. BENEFITS ++ No plugin required. ++ Smaller files, faster load time. ++ More accessible content.
  17. 17. GRAPHICS ++ Canvas: pixel-based graphics drawn by browser. Useful for drawing lots of complex images for games or animations.7 ++ SVG: scalable vector graphics. Good for charts and graphs. Can be created in Illustrator. ++ WebGL: brings 3D graphics to the browser. Early uses include 3D games and interactive art.
  18. 18. GEOLOCATION ++ Used primarily for maps and localized search results. ++ Determines location by signal strength, router, IP address and distance from wireless access points.8, 9 ++ Mobile apps using location-based services rely on GPS to locate, while apps that run in browser can use HTML5 geolocation. ++ Location by IP is different from geolocation.10
  19. 19. DOES ANYONE WANT THIS?
  20. 20. BENEFITS ++ Better directions ++ More relevant search results ++ Ability to connect with local users CONCERNS ++ Privacy — potential to inadvertently disclose location ++ Segmentation from hyperlocalization of content
  21. 21. EMERGING APPLICATIONS ++ Mobile commerce ++ Gather group wisdom for location-based decisions ++ Localized advertising NO GAME CHANGING USE YET.
  22. 22. OTHER HTML5 FEATURES ++ Mobile inputs, touch events and device orientation ++ Editable content fields ++ Better form control 11 ++ Widgets for apps (spinners, color pickers, calendars) ++ WAI-ARIA accessibility 12 ++ The list goes on and on 13
  23. 23. CSS3
  24. 24. THE VISUAL EXPERIENCE ++ Visual enhancement for site experience ++ Can degrade gracefully for older browsers ++ Replaces need for image-heavy design elements BENEFITS ++ Faster, more efficient ++ Avoid Photoshop maintenance routines
  25. 25. WHAT CAN YOUR BROWSER DO? ++ Shadows ++ Gradients ++ Opacity ++ Rounded corners ++ Multiple backgrounds ++ Live type using non-web fonts
  26. 26. FLASH ANIMATION ++ Intended to overcome the web’s limitations. ++ Requires a plugin and can’t degrade gracefully. ++ Known to be processor-intensive. CSS3 ANIMATION ++ Can be implemented now but best to keep it simple. ++ Authoring tools are under development.
  27. 27. CASE STUDIES
  28. 28. AP NEWS
  29. 29. SLIDESHARE
  30. 30. FINANCIAL TIMES
  31. 31. FACEBOOK
  32. 32. PAYPAL
  33. 33. AMAZON
  34. 34. WHAT’S NEXT?
  35. 35. RECURRING THEMES ++ Faster and lighter ++ Cross-platform ++ Open ecosystem EXPECTATIONS ++ Will keep pushing us toward cloud computing ++ This is only the beginning — check back in 2022.
  36. 36. GO FOR IT! + ASK YOUR DEVELOPER + ENCOURAGE YOUR DESIGNER + TEST WITH YOUR USERBASE + OBSERVE APPLICATIONS
  37. 37. REFERENCES 1 http://en.wikipedia.org/wiki/HTML5 2 http://en.wikipedia.org/wiki/CSS3 3 http://www.alistapart.com/articles/previewofhtml5 4 http:// html5test.com 5 http://joehewitt.com/2011/09/26/what-the-web-is-and-is-not 6 http://www.html5rocks.com/en/tutorials/offline/whats-offline/ 7 http://html5doctor.com/html5-briefing-notes-journalists-analysts/ 8 http://stackoverflow.com/questions/4213410/how-does-html5-geolocation-work 9 http://isgeolocationpartofhtml5.com/ 10 http://www.google.com/support/websearch/bin/answer.py?hl=en&answer=93704 11 http://www.quora.com/User-Experience/How-will-HTML5-change-the-user- experience-of-websites 12 http://dev.opera.com/articles/view/introduction-to-wai-aria/
  38. 38. 13 http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips- and-techniques-you-must-know/ 14 http://www.beautyoftheweb.com/ 15 http://engineering.slideshare.net/2011/09/slideshare-ditches-flash-for-html5/ 16 http://www.readwriteweb.com/archives/financial_times_proves_html5_can_ beat_native_mobil.php 17 http://www.zdnet.com/blog/btl/paypal-jumps-onto-html5-bandwagon-also- heading-for-consoles/60685 18 http://latimesblogs.latimes.com/technology/2011/08/a-look-at-html5-apps-vs- native-apps.html -- http://html5test.com -- http://upload.wikimedia.org/wikipedia/commons/6/6c/Trajans-Column-lower- animated.svgv -- http://mugtug.com/sketchpad/ -- http://lights.elliegoulding.com/
  39. 39. -- http://npdoty.name/location/ -- http://html5demos.com/geo -- https://developer.mozilla.org/en-US/demos/tag/tech:geolocation/ -- https://support.twitter.com/articles/78525-about-the-tweet-location-feature -- http://www.facebook.com/about/location -- http://www.apple.com/html5/ -- http://www.htmlfivewow.com/ -- http://radar.oreilly.com/2011/07/what-is-html5.html -- http://cognition.happycog.com/article/are-doctypes-the-new-lunch-tables -- http://meyerweb.com/eric/thoughts/2011/04/14/my-own-private-html5-survey/ -- http://www.beautyoftheweb.com/
  40. 40. THANK YOU! RESOURCES: urli.st/zQjV TO CONNECT: @rachelmc

×