Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Semelhante a Basics of css and xhtml
Semelhante a Basics of css and xhtml (20)
Mais de sagaroceanic11
Mais de sagaroceanic11 (20)
Basics of css and xhtml
- 1. CSS3+ HTML5 RACHEL McCLUNG | 10.21.11 A User’s Perspective
- 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. 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. 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
- 6. FORM ≈ CSS FUNCTION ≈ HTML
- 7. GOOD DESIGN Ideal is to have a balance of form and function to produce a positive user experience.
- 11. 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”>
- 13. 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; }
- 14. BROWSER SUPPORT 340 313 293 141 Try it out: http://html5test.com4
- 15. 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?
- 16. HTML5
- 17. 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.
- 18. 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.
- 20. 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.
- 25. 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.
- 33. 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
- 39. DOES ANYONE WANT THIS?
- 40. 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
- 41. EMERGING APPLICATIONS ++ Mobile commerce ++ Gather group wisdom for location-based decisions ++ Localized advertising NO GAME CHANGING USE YET.
- 42. 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
- 43. CSS3
- 44. 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
- 45. WHAT CAN YOUR BROWSER DO? ++ Shadows ++ Gradients ++ Opacity ++ Rounded corners ++ Multiple backgrounds ++ Live type using non-web fonts
- 62. 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.
- 67. CASE STUDIES
- 68. AP NEWS
- 69. SLIDESHARE
- 70. FINANCIAL TIMES
- 71. FACEBOOK
- 73. PAYPAL
- 75. AMAZON
- 77. WHAT’S NEXT?
- 78. 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.
- 79. GO FOR IT! + ASK YOUR DEVELOPER + ENCOURAGE YOUR DESIGNER + TEST WITH YOUR USERBASE + OBSERVE APPLICATIONS
- 82. -- 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/
- 83. THANK YOU! RESOURCES: urli.st/zQjV TO CONNECT: @rachelmc