University of Abertay Dundee - evening

hello. Friday, 26 March 2010

Rachel Andrew @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com Friday, 26 March 2010

Who Are You? Friday, 26 March 2010

The web industry (according to Rachel) Friday, 26 March 2010

(X)HTML <p><strong>Hello</strong>, world!</p> Friday, 26 March 2010

Be Strict <!DOCTYPE html PUBLIC "-//W3C// DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C// DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ strict.dtd"> Friday, 26 March 2010

Semantics the meaning in your mark-up Friday, 26 March 2010

Headings <h1>The main heading</h1> <h2>A sub heading</h2> <h3>A sub-sub heading</h3> Friday, 26 March 2010

Lists <ul> <li>Eggs</li> <li>Flour</li> <li>Milk</li> </li> Friday, 26 March 2010

Quotes <blockquote><p>Behind every successful woman is a substantial amount of coffee. </p></blockquote> Friday, 26 March 2010

Accessible Friday, 26 March 2010

CSS Friday, 26 March 2010

Core Skills HTML/XHTML CSS Semantic use of mark-up Consideration of accessibility Friday, 26 March 2010

Accessing the web browsers and other devices Friday, 26 March 2010

Browsers Friday, 26 March 2010

Older browsers Internet Explorer 6 - I’m looking at you... Friday, 26 March 2010

Main IE6 issues CSS bugs Lack of support for some CSS properties No Alpha PNG support Friday, 26 March 2010

“Anyone who slaps a ‘this page is best viewed with Browser X’ label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network.” Tim Berners-Lee Friday, 26 March 2010

Graded Browser Support http://developer.yahoo.com/yui/articles/gbs/ Friday, 26 March 2010

Other devices Phones, screen readers, the iPad, whatever comes next Friday, 26 March 2010

JavaScript Friday, 26 March 2010

The bad old way <a href=”#” onclick=”window.open (‘/img/large.jpg’,‘popup’,‘300’, 500’)”>view large image</a> Friday, 26 March 2010

Unobtrusive <a href=”/img/large.jpg” class=”popup”>view large image</ a> Friday, 26 March 2010

JavaScript libraries jQuery YUI Prototype Friday, 26 March 2010

Ajax Friday, 26 March 2010

Friday, 26 March 2010

Progressive enhancement Mark-up . CSS . JavaScript Friday, 26 March 2010

Flash Friday, 26 March 2010

The server-side Back-end development Friday, 26 March 2010

All languages are rubbish. pick the one you ﬁnd least rubbish. Friday, 26 March 2010

Pick One. Friday, 26 March 2010

Databases Friday, 26 March 2010

Frameworks Excellent ... once you know how to code. Friday, 26 March 2010

APIs Use existing data sources Friday, 26 March 2010

The Future Friday, 26 March 2010

HTML5 Friday, 26 March 2010

XHTML or HTML style Friday, 26 March 2010

<div id=”header”></div> <div id=”nav”></div> <div id=”content”></div> <div id=”sidebar”></div> Friday, 26 March 2010

<header></header> <nav></nav> <article></article> <aside></aside> Friday, 26 March 2010

Video <video width="640" height="360" src="http://www.youtube.com/ demo/google_main.mp4" controls autobuffer> </video> Friday, 26 March 2010

Browser Support You can start using HTML5 right now. Friday, 26 March 2010

HTML5 Resources html5doctor.com html5demos.com http://articles.sitepoint.com/article/html-5- snapshot-2009 Friday, 26 March 2010

CSS 3 Friday, 26 March 2010

Modular Some modules more complete than others Friday, 26 March 2010

New selectors li:first-child {} li:last-child {} tr:nth-child(odd) { } Friday, 26 March 2010

Backgrounds & Borders .box { border-radius: 5px } Friday, 26 March 2010

RGBa & Opacity .box { background-color:rgb(0,0,255); opacity: 0.5; } .box { background-color: rgba(0,0,255,0.5); } Friday, 26 March 2010

Browser Support Friday, 26 March 2010

Vendor preﬁxes .box { border-radius: 5px moz-border-radius: 5px; webkit-border-radius: 5px; } Friday, 26 March 2010

Internet Explorer 9 Excellent CSS3 selector support Support for border-radius RGBa Friday, 26 March 2010

CSS3 Resources css3.info http://dev.opera.com/articles/css/ http://24ways.org/2009/cleaner-code-with-css3- selectors Friday, 26 March 2010

Typography Friday, 26 March 2010

@font-face @font-face { font-family: "gesta-1"; src: url(gesta.ttf); font-style: normal; font-variant: normal; font-weight: 400; } Friday, 26 March 2010

Hosted fonts www.typekit.com Friday, 26 March 2010

Over to you. Any Questions? Friday, 26 March 2010

Thank you. Twitter: @rachelandrew Email: me@rachelandrew.co.uk http://www.rachelandrew.co.uk/presentations/university-of-abertay-dundee/ Friday, 26 March 2010

University of Abertay Dundee - evening

by Rachel Andrew on Mar 26, 2010

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 5

Statistics

University of Abertay Dundee - evening — Presentation Transcript