University of Abertay Dundee - afternoon

Rachel Andrew

@rachelandrew

rachelandrew.co.uk
edgeofmyseat.com
grabaperch.com

Friday, 26 March 2010

Start here


(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


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


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: @rachelandrew
Email: me@rachelandrew.co.uk
http://www.rachelandrew.co.uk/presentations/university-of-abertay-dundee/


University of Abertay Dundee - afternoon

More Related Content

Viewers also liked

Similar to University of Abertay Dundee - afternoon

More from Rachel Andrew

Recently uploaded

University of Abertay Dundee - afternoon