css3, html5

1,357 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,357
On SlideShare
0
From Embeds
0
Number of Embeds
64
Actions
Shares
0
Downloads
38
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

css3, html5

  1. 1. CSS3+HTML5A User’sPerspectiveRACHEL McCLUNG | 10.21.11
  2. 2. TODAY’S DISCUSSIONWhat sites employ HTML5 and CSS3 to effectively shapethe user experience, and how can we create interactivecontent 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 presentingcontent for the World Wide Web. It is the fifth revision ofthe HTML standard and is still under development.1
  4. 4. WHAT IS CSS3?Cascading Style Sheets is a style sheet language usedto describe the look and formatting of an HTMLdocument. CSS3 is the third specification of CSS andis still under development.2
  5. 5. FORM + FUNCTION
  6. 6. FORM ≈ CSS FUNCTION ≈ HTML
  7. 7. GOOD DESIGNIdeal is to have a balance ofform and function to produce apositive user experience.
  8. 8. IDENTIFYING HTML5The very start of the source code looks like this:<!doctype html>Previously, it was more verbose:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  9. 9. HTML5 PAGE STRUCTURE <header> <nav> <article> <sidebar> <section> <footer> 3
  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 141Try 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.5BENEFITS+ 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 usersCONCERNS+ 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 advertisingNO 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 elementsBENEFITS+ 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 ecosystemEXPECTATIONS+ 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. REFERENCES1 http://en.wikipedia.org/wiki/HTML52 http://en.wikipedia.org/wiki/CSS33 http://www.alistapart.com/articles/previewofhtml54 http:// html5test.com5 http://joehewitt.com/2011/09/26/what-the-web-is-and-is-not6 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-work9 http://isgeolocationpartofhtml5.com/10 http://www.google.com/support/websearch/bin/answer.py?hl=en&answer=9370411 http://www.quora.com/User-Experience/How-will-HTML5-change-the-user- experience-of-websites12 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.php17 http://www.zdnet.com/blog/btl/paypal-jumps-onto-html5-bandwagon-also- heading-for-consoles/6068518 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/zQjVTO CONNECT: @rachelmc

×