Basics of css and xhtml
-
Upload
sagaroceanic11 -
Category
Documents
-
view
138 -
download
8
description
Transcript of Basics of css and xhtml
![Page 1: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/1.jpg)
CSS3+ HTML5
RACHEL McCLUNG | 10.21.11
A User’sPerspective
![Page 2: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/2.jpg)
TODAY’S DISCUSSIONWhat 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
![Page 3: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/3.jpg)
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
![Page 4: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/4.jpg)
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
![Page 5: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/5.jpg)
FORM + FUNCTION
![Page 6: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/6.jpg)
FORM ≈ CSS FUNCTION ≈ HTML
![Page 7: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/7.jpg)
GOOD DESIGNIdeal is to have a balance of
form and function to produce a
positive user experience.
![Page 8: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/8.jpg)
![Page 9: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/9.jpg)
![Page 10: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/10.jpg)
![Page 11: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/11.jpg)
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.0
Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd”>
![Page 12: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/12.jpg)
3
HTML5 PAGE STRUCTURE
<header>
<nav>
<article>
<sidebar>
<footer>
<section>
![Page 13: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/13.jpg)
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;
}
![Page 14: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/14.jpg)
BROWSER SUPPORT
340 313 293 141
Try it out: http://html5test.com4
![Page 15: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/15.jpg)
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?
![Page 16: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/16.jpg)
HTML5
![Page 17: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/17.jpg)
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.
![Page 18: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/18.jpg)
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.
![Page 19: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/19.jpg)
![Page 20: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/20.jpg)
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.
![Page 21: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/21.jpg)
![Page 22: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/22.jpg)
![Page 23: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/23.jpg)
![Page 24: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/24.jpg)
![Page 25: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/25.jpg)
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.
![Page 26: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/26.jpg)
![Page 27: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/27.jpg)
![Page 28: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/28.jpg)
![Page 29: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/29.jpg)
![Page 30: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/30.jpg)
![Page 31: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/31.jpg)
![Page 32: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/32.jpg)
![Page 33: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/33.jpg)
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
![Page 34: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/34.jpg)
![Page 35: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/35.jpg)
![Page 36: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/36.jpg)
![Page 37: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/37.jpg)
![Page 38: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/38.jpg)
![Page 39: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/39.jpg)
DOES ANYONE WANT THIS?
![Page 40: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/40.jpg)
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
![Page 41: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/41.jpg)
EMERGING APPLICATIONS + Mobile commerce
+ Gather group wisdom for location-based decisions
+ Localized advertising
NO GAME CHANGING USE YET.
![Page 42: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/42.jpg)
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
![Page 43: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/43.jpg)
CSS3
![Page 44: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/44.jpg)
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
![Page 45: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/45.jpg)
WHAT CAN YOUR BROWSER DO? + Shadows
+ Gradients
+ Opacity
+ Rounded corners
+ Multiple backgrounds
+ Live type using non-web fonts
![Page 46: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/46.jpg)
![Page 47: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/47.jpg)
![Page 48: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/48.jpg)
![Page 49: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/49.jpg)
![Page 50: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/50.jpg)
![Page 51: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/51.jpg)
![Page 52: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/52.jpg)
![Page 53: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/53.jpg)
![Page 54: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/54.jpg)
![Page 55: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/55.jpg)
![Page 56: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/56.jpg)
![Page 57: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/57.jpg)
![Page 58: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/58.jpg)
![Page 59: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/59.jpg)
![Page 60: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/60.jpg)
![Page 61: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/61.jpg)
![Page 62: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/62.jpg)
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.
![Page 63: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/63.jpg)
![Page 64: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/64.jpg)
![Page 65: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/65.jpg)
![Page 66: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/66.jpg)
![Page 67: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/67.jpg)
CASE STUDIES
![Page 68: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/68.jpg)
AP NEWS
![Page 69: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/69.jpg)
SLIDESHARE
![Page 70: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/70.jpg)
FINANCIAL TIMES
![Page 71: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/71.jpg)
![Page 72: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/72.jpg)
![Page 73: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/73.jpg)
PAYPAL
![Page 74: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/74.jpg)
![Page 75: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/75.jpg)
AMAZON
![Page 76: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/76.jpg)
![Page 77: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/77.jpg)
WHAT’S NEXT?
![Page 78: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/78.jpg)
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.
![Page 79: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/79.jpg)
GO FOR IT!+ ASK YOUR DEVELOPER
+ ENCOURAGE YOUR DESIGNER
+ TEST WITH YOUR USERBASE
+ OBSERVE APPLICATIONS
![Page 80: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/80.jpg)
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/
![Page 81: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/81.jpg)
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/
![Page 82: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/82.jpg)
- 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/
![Page 83: Basics of css and xhtml](https://reader030.fdocuments.in/reader030/viewer/2022020717/54c7c1724a79590b648b4589/html5/thumbnails/83.jpg)
THANK YOU!RESOURCES: urli.st/zQjVTO CONNECT: @rachelmc