university of abertay dundee - evening

hello.

Friday, 26 March 2010

Rachel Andrew

@rachelandrew

rachelandrew.co.ukedgeofmyseat.comgrabaperch.com


http://www.rachelandrew.co.uk

http://www.rachelandrew.co.uk

Who Are You?


The web industry

(according to Rachel)


<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






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

Over to you.

Any Questions?


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 - evening

Technology