The New Web and How You Can Build It

David Mascarina

February 2, 2010

Resources

Browser compatibility, spec status for new web techniques html5 and css2 and css3: http://a.deveria.com/caniuse/

CSS: CSS 2.1 & CSS3

great video of css3 effects techniques: http://net.tutsplus.com/videos/screencasts/a-crash-course-in-advanced-css3-effects/

css versions, compatibility chart: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29

another browser support chart: http://www.css3.info/modules/selector-compat/

Sprites

How to:

      Sprite Optimization January 27, 2009: http://mezzoblue.com/archives/2009/01/27/sprite_optim/

      How to make and use sprite images to reduce page load time: http://css-tricks.com/css-sprites/

      comprehensive article, examples, llinks to tutorials: http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

      Alistapart early article how to: http://www.alistapart.com/articles/sprites

      Tool: Sprite, toolbar widget to find background images on your page and makes a sprite, and css to replace what is there: http://spriteme.org/

attribute selectors

adding images for contextual file icons: http://dev.opera.com/articles/view/css-3-attribute-selectors/

sitepoint how to use attribute selectors: http://reference.sitepoint.com/css/css3attributeselectors

http://www.yourhtmlsource.com/stylesheets/advancedselectors.html#attribute

styling links with title attributes using attribute selector in style: http://www.stuffandnonsense.co.uk/archives/css_a_tribute_to_selectors.html

http://www.css3.info/preview/attribute-selectors/

nth-child, last-child, :first-letter and :first-line, etc.

nth: alt row colors http://24ways.org/2009/cleaner-code-with-css3-selectors

http://inspectelement.com/tutorials/a-look-at-some-of-the-new-selectors-introduced-in-css3/http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

table layout - display:table

examples of display property, shows how to display:table http://www.quirksmode.org/css/display.html#table

using display:table for layout http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/

brief article on using display: table for layout, why, when and future http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

styling tables tutorial: http://veerle.duoh.com/blog/comments/a_css_styled_table_version_2/

Print styles

print style sheets 

media="print" style sheet tutorial http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml

classic first print style sheet articles: http://www.alistapart.com/articles/goingtoprint/ and http://meyerweb.com/eric/articles/webrev/200001.html

another classic resource on print styles: http://css-discuss.incutio.com/?page=PrintStylesheets

good tips that some other articles did not point out and examples in www: http://www.boxesandarrows.com/view/printing_the_web

collection of tutorials and resources on print style sheets http://websitetips.com/css/tutorials/print/#print

examples: http://css-tricks.com/ http://www.alexgdesign.co.uk/ http://www.alistapart.com/

@page page breaks for print

http://www.richinstyle.com/guides/paged2.html

reference: http://reference.sitepoint.com/css/pagedmedia

http://davidwalsh.name/optimizing-structure-print-css

http://www.tutorialspoint.com/css/css_paged_media.htm

http://www.westciv.com/style_master/academy/css_tutorial/advanced/printing.html

@font-face

latest best how to code @font-face for fullest cross browser support: http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

web fonts site dedicated to all things @font-face: http://webfonts.info/wiki/index.php?title=Main_Page

Alistapart article and examples from 2007: http://www.alistapart.com/articles/cssatten

@font-face cross browser code generator: http://www.fontsquirrel.com/fontface/generator

examples: http://nicewebtype.com/fonts/museo-and-sans/

http://nicewebtype.com/fonts/graublau-sans-web/

text-shadow

w3c css3 text-shadow demo page: http://www.w3.org/Style/Examples/007/text-shadow

css3.info how to text-shadow: http://www.css3.info/preview/text-shadow/

WestCiv text-shadow generator tool to get desired design values: http://westciv.com/tools/shadows/index.html

button examples with text shadow, rounded corners, box shadow, fonts: http://my.opera.com/dstorey/blog/show.dml/717521

text-rotate

http://snook.ca/archives/html_and_css/css-text-rotation

border-radius

art of the web demo: http://www.the-art-of-web.com/css/border-radius/

rounded corners and gradient borders: http://www.cssportal.com/css3-preview/borders.htm

aqua button example with no images: http://girliemac.com/blog/2009/04/30/css3-gradients-no-image-aqua-button/

more no image buttons: http://24ways.org/2008/shiny-happy-buttons

border-image

border-image

border-corner-image

http://www.css3.info/preview/border-image/

opera dev community: http://dev.opera.com/articles/view/css3-border-background-boxshadow/#border-image

box-shadow

demo and tutorial: http://css.flepstudio.org/en/css3/box-shadow.html

WestCiv box shadow generator tool: http://westciv.com/tools/boxshadows/index.html

background image

background-clip & background-origin

http://dev.opera.com/articles/view/css3-border-background-boxshadow/#background-clip

http://dev.opera.com/articles/view/css3-border-background-boxshadow/#background-origin

multiple background images

multiple and sized images: http://www.zenelements.com/blog/css3-background-images/

http://dev.opera.com/articles/view/css3-border-background-boxshadow/#multiple-background

http://www.css3.info/wp-content/uploads/2007/09/multiple-backgrounds-example.html (in Safari)

http://group.mind-productions.com/articles/multiple_backgrounds__css3_/ (in Safari)

http://decaffeinated.org/archives/projects/multibg/background-image.html (in Safari)

background-size

http://www.markschenk.com/cssexp/background/scaledbgimage.html

http://designshack.co.uk/articles/introduction-to-css3-part-6-backgrounds

background-attachment

http://people.opera.com/pepelsbey/experiments/bga/

rgba - alpha transparency parent child inheritance

no image buttons with alpha transparency, rounded corners, text-shadow: http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba

hsla - hue, saturation, lightness color module

gradient

tutorials: http://www.broken-links.com/2009/11/26/css-gradient-syntax-comparison-of-mozilla-and-webkit/

    Mozilla tutorial: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

    Safari tutorial: http://webkit.org/blog/175/introducing-css-gradients/

WestCiv gradient generator tool: http://westciv.com/tools/gradients/index.html and http://westciv.com/tools/radialgradients/index.html

tutorial using gradient, @font-face: http://nicewebtype.com/fonts/bello-and-proxima-nova/

mask-box-image

multiple columns

liquid/adjustable layouts

@media queries

how to: http://reference.sitepoint.com/css/mediaqueries

http://reinholdweber.com/css/css3-a-big-storm-is-coming/

w3c spec: http://www.w3.org/TR/css3-mediaqueries/

transform, transitions and animations

text rotation: http://snook.ca/archives/html_and_css/css-text-rotation

http://24ways.org/2009/going-nuts-with-css-transitions

http://www.smashingmagazine.com/2009/12/19/what-you-need-to-know-about-behavioral-css/

http://webdesignernotebook.com/examples/target.html

reflection: http://jcargoo.110mb.com/cssreflection/

Javascript Libraries

YUI 3 many accessible interface widgets: http://developer.yahoo.com/yui/3/

Accessible TabView (Focus Manager Node Plugin): http://developer.yahoo.com/yui/3/examples/node-focusmanager/node-focusmanager-2.html

Carousel slide viewer: http://developer.yahoo.com/yui/examples/carousel/carousel-ariaplugin.html        

Sitepoint tutorial - YUI & Ajax TreeView http://articles.sitepoint.com/article/yui-treeview-ajax

JQuery

accordion with WAI-ARIA: http://jqueryui.com/demos/accordion/

lightbox: http://plugins.jquery.com/project/ARIALightbox

create your own theme with themeroller: http://jqueryui.com/themeroller/

how to use jQuery: http://docs.jquery.com/How_jQuery_Works

Javascript Libraries (jQuery and YUI 3) with accessible WAI-ARIA - support for w3c ARIA roles and states and properties

list of ARIA enabled javascript libraries: http://www.paciellogroup.com/blog/?p=313

Screen reader reading the YUI - carousel: http://video.yahoo.com/watch/3609568/9957126

Screen reader reading the YUI 3 accessibletab view: http://video.yahoo.com/watch/5595254

Screen reader reading the YUI 3 accessible menu: http://video.yahoo.com/watch/3608798/9955360

list of the browser support for ARIA roles as of Oct. 2009: http://www.paciellogroup.com/blog/?p=474

document from W3c on best practices for implementing WAI-ARIA: http://www.w3.org/TR/wai-aria-practices/

Yahoo YUI accessibility page: http://yuiblog.com/blog/category/accessibility

Todd Kloots of YUI developer team intro to WAI-ARIA how tos: http://video.yahoo.com/watch/4073211/10996186

Todd Kloots of YUI on YUI 3 accessible features: http://developer.yahoo.com/yui/theater/video.php?v=kloots-yuiconf2009-a11y

HTML 5

how to: http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

Alistapart overview: http://www.alistapart.com/articles/previewofhtml5

semantics tutorials of new elements in typical use: http://boblet.tumblr.com/post/130610820/html5-structure1, http://boblet.tumblr.com/post/134276674/html5-structure2, http://boblet.tumblr.com/post/134732913/html5-structure3, http://boblet.tumblr.com/post/141239118/html5-structure4

page example - http://www.whatwg.org/demos/company-home/

demos- whatwg - http://www.whatwg.org/demos/2008-sept/

http://html5demos.com/

media elements support in mozilla: https://developer.mozilla.org/En/Using_audio_and_video_in_FireFox

media support in Opera: http://dev.opera.com/articles/view/a-call-for-video-on-the-web-opera-vid/

forms: http://24ways.org/2009/have-a-field-day-with-html5-forms

A showcase of sites using HTML5 markup - http://html5gallery.com/

a good, detailed example of html5 and ARIA roles in a blog type web page:http://www.lesintegristes.net/

HTML5 IE elements enabling script: http://remysharp.com/2009/01/07/html5-enabling-script/

validator: http://html5.validator.nu/

Miscellaneous

ARIA landmarks

Yahoo Video of screen reader and ARIA landmarks: http://video.yahoo.com/watch/4561284/12214507

How to: http://www.paciellogroup.com/blog/?p=106 tutorial

Page with landmarks http://www.paciellogroup.com/blog/aria-tests/aria-html4-clean.html

RDFa - a semantic web

http://www.w3.org/TR/xhtml-rdfa-primer/#id84480

http://rdfa.info/wiki/RDFa_Wiki

http://www.alistapart.com/articles/introduction-to-rdfa/

http://www.alistapart.com/articles/introduction-to-rdfa-ii/

http://webbackplane.com/node/50

Practical use - search engines - grab descriptions and display enhanced search results - Yahoo Search Monkey: http://developer.yahoo.com/searchmonkey/