university of abertay dundee - afternoon

hello.

Friday, 26 March 2010

Rachel Andrew

@rachelandrew

rachelandrew.co.ukedgeofmyseat.comgrabaperch.com


http://www.rachelandrew.co.uk

http://www.rachelandrew.co.uk

Start here


1996


2010


<p><strong>Hello</strong>, world!</p>

(X)HTML


<!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">

Be Strict


http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd




http://www.w3.org/TR/html4/strict.dtd




Semantics

the meaning in your mark-up


<h1>The main heading</h1>

<h2>A sub heading</h2>

<h3>A sub-sub heading</h3>

Headings


<ul><li>Eggs</li><li>Flour</li><li>Milk</li>

</li>

Lists


<blockquote><p>Behind every successful woman is a substantial amount of coffee.</p></blockquote>

Quotes


Accessible


CSS


Core Skills

HTML/XHTMLCSS

Semantic use of mark-upConsideration of accessibility


Accessing the web

browsers and other devices


Browsers


Older browsers

Internet Explorer 6 - I’m looking at you...


Main IE6 issuesCSS bugs

Lack of support for some CSS propertiesNo Alpha PNG support


“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


Graded Browser Support

http://developer.yahoo.com/yui/articles/gbs/




Other devices

Phones, screen readers, the iPad, whatever comes next


JavaScript


<a href=”#” onclick=”window.open(‘/img/large.jpg’,‘popup’,‘300’,500’)”>view large image</a>

The bad old way


<a href=”/img/large.jpg” class=”popup”>view large image</a>

Unobtrusive


JavaScript libraries

jQueryYUI

Prototype


Ajax


Mark-up.

CSS.

JavaScript

Progressive enhancement


Flash


The server-side

Back-end development


All languages are rubbish.

pick the one you find least rubbish.


Pick One.


Databases


Frameworks

Excellent ... once you know how to code.


APIs

Use existing data sources


The Future


HTML5


XHTML or HTML style


<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer></video>

Video


http://www.youtube.com/demo/google_main.mp4




Browser Support

You can start using HTML5 right now.


HTML5 Resources

html5doctor.comhtml5demos.com

http://articles.sitepoint.com/article/html-5-snapshot-2009






CSS 3


Modular

Some modules more complete than others


li:first-child {}

li:last-child {}

tr:nth-child(odd) { }

New selectors


.box {border-radius: 5px

}

Backgrounds & Borders


.box { background-color:rgb(0,0,255); opacity: 0.5;}

.box { background-color: rgba(0,0,255,0.5);}

RGBa & Opacity


Browser Support


.box { border-radius: 5px moz-border-radius: 5px; webkit-border-radius: 5px;}

Vendor prefixes


Internet Explorer 9

Excellent CSS3 selector supportSupport for border-radius

RGBa


CSS3 Resources

css3.infohttp://dev.opera.com/articles/css/

http://24ways.org/2009/cleaner-code-with-css3-selectors


http://dev.opera.com/articles/css/

http://dev.opera.com/articles/css/





Typography


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

@font-face


Hosted fonts

www.typekit.com


http://www.typekit.com

http://www.typekit.com

YOU.


“[...] 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/




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


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


Your own siteif 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


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


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)


Your Turn.


Thank you.

Twitter: @rachelandrewEmail: [email protected]

http://www.rachelandrew.co.uk/presentations/university-of-abertay-dundee/


mailto:[email protected]

mailto:[email protected]

http://rachelandrew.co.uk/presentations

http://rachelandrew.co.uk/presentations

university of abertay dundee - afternoon

Technology