University of Abertay Dundee - evening

Rachel Andrew

@rachelandrew

rachelandrew.co.uk
edgeofmyseat.com
grabaperch.com

Friday, 26 March 2010

Who Are You?


The web industry

(according to Rachel)


(X)HTML
<p><strong>Hello</strong>,
world!</p>


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


Semantics

the meaning in your mark-up


Headings
<h1>The main heading</h1>

<h2>A sub heading</h2>

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


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


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


Accessible


Core Skills

HTML/XHTML
CSS
Semantic use of mark-up
Consideration of accessibility


Accessing the web

browsers and other devices


Browsers


Older browsers

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


Main IE6 issues
CSS bugs
Lack of support for some CSS properties
No 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


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


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


JavaScript libraries

jQuery
YUI
Prototype


Progressive
enhancement
Mark-up
.
CSS
.
JavaScript


The server-side

Back-end development


All languages are
rubbish.

pick the one you ﬁnd least rubbish.


Pick One.


Databases


Frameworks

Excellent ... once you know how to code.


APIs

Use existing data sources


The Future


XHTML or HTML
style


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


Browser Support

You can start using HTML5 right now.


HTML5 Resources

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


Modular

Some modules more complete than others


New selectors
li:first-child {}

li:last-child {}

tr:nth-child(odd) { }


Backgrounds &
Borders
.box {
border-radius: 5px
}


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

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


Browser Support


Vendor preﬁxes
.box {
border-radius: 5px
moz-border-radius: 5px;
webkit-border-radius: 5px;
}


Internet Explorer 9

Excellent CSS3 selector support
Support for border-radius
RGBa


CSS3 Resources

css3.info
http://dev.opera.com/articles/css/
http://24ways.org/2009/cleaner-code-with-css3-
selectors


Typography


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


Hosted fonts

www.typekit.com


Over to you.

Any Questions?


Thank you.

Twitter: @rachelandrew
Email: me@rachelandrew.co.uk
http://www.rachelandrew.co.uk/presentations/university-of-abertay-dundee/


University of Abertay Dundee - evening

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (14)

Similar to University of Abertay Dundee - evening

Similar to University of Abertay Dundee - evening (20)

More from Rachel Andrew

More from Rachel Andrew (20)

Recently uploaded

Recently uploaded (20)

University of Abertay Dundee - evening