University of Abertay Dundee - afternoon

hello. Friday, 26 March 2010

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

Start here Friday, 26 March 2010

1996 Friday, 26 March 2010

Friday, 26 March 2010

2010 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

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

YOU. Friday, 26 March 2010

“[...] let me know what piece of advice you would give to someone who will be graduating in a years time, what would you suggest they are thinking about now to help them be as employable as possible upon graduation? http://www.rachelandrew.co.uk/archives/2010/02/27/your-top-tips-for-students/ Friday, 26 March 2010

Love what you do “I truly believe the most important thing a web designer/developer can have is passion, because if they are excited by something, they can learn it.” - Ryan Townsend Friday, 26 March 2010

Get real experience “Get your hands dirty building and designing things that see the light of day. Maybe its not a site, but an iphone app, or contributing code or small UI enhancements to a favorite open source project.” - Chris Casciano Friday, 26 March 2010

Your own site if nothing else, start a blog and/or portfolio site – most employers will be looking for enthusiastic and proactive people, and a potential web designer who hasn’t got a personal website is neither of these! - Rick Hurst Friday, 26 March 2010

Community ...take part in as many online communities as possible, ask questions of other people about what you are doing, help people out when they have problems you know the answer to. This work will become your ’social signature’ - Tim Parkin Friday, 26 March 2010

Networking “Many web events offer good student discounts and I’ve attended FOWD and going to DIBI for very reduced rates and students should be encouraged to attend these and any local events.” - Graeme (current student) Friday, 26 March 2010

Your Turn. 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 - afternoon

by Rachel Andrew on Mar 26, 2010

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 13

Statistics

University of Abertay Dundee - afternoon — Presentation Transcript