I know you're all very busy, but if you get some time you should check out the resources on Smashing Magazine's Best Of April 2008 page - some of this stuff is gold.
Hope you all had a good break - I certainly did. It was totally unsullied by any menial tasks like marking web development assignments - but don't panic, I'll have some nasty comments for you by next week... I promise :-)
This week we're launching into programming proper, working through Robyn's excellent notes and converting them to web pages, which should give us plenty of html and css practice along the way. So, create a week1a page with some extra scripting and compiled languages on the relevant table, also create a home page linking to your week1a page and upload both new pages to your web space on the bathurst-tafe sever.
Images can be created from screen captures (hoversnap might be handy for this) or you can find creative commons licensed images via flickrcc (don't forget to add the attributions at the bottom of your web page)
Today we're looking at a CSS template: blueprint
and an online grid editor for the same.
^ This is what you want to see. To test a page that's been uploaded to the server you can use the validation options on the firefox web developer toolbar (found under 'tools').
You can also go straight to the W3C validation page. Note the tabs on the page which allow you to enter a URL, upload a file or cut and paste code.
Finally, if you enjoyed yesterday's PMOG mission, there's another one on validation that you could take.
At the end of the day I'd like you to validate one or more pages on your Bathurst TAFE web site and include the little validation link that the W3C give out when you pass their test.
Today we're giving PMOG a bash, with a little image map mission that I've put together for your learning pleasure. You'll need a login (send me an email if you need an invitation - I think they're out of beta now, but I could be wrong). You'll also need a firefox addon (there's a link on the PMOG site). Have fun.
I know you'll all miss our weekly get together - the same way I know you probably wouldn't do any exercises that I post here. So here's a compromise... an excellent CSS cheat sheet. Print it out, memorise it and then eat it so that it can't fall into enemy hands.
Today we worked through the backgrounds tutorial on tizag
If you want to experiement there's a background image library on http://www.grsites.com/textures/
We finished up with some work on creating tables, followed by a table exercise on the wikiversity.
If you're feeling chirpy, try the harder advanced table exercise
Image: 'buena vista'
www.flickr.com/photos/70825417@N00/358756373
This week we're looking at how to use CSS to lay out a page. To kick off, work through this tutorial on subcide called 'Creating a CSS layout from scratch' (up to, but not including page 10, the navigation).
There are some interesting techniques used here to ensure the divisions stay in the right places. And some not-so-interesting uses of graphics instead of text (did you spot them? What would you do differently?)
One thing I noticed was a lot of code in this tutorial that set the padding and margins for various elements to zero. If you're wondering why, there's a good article on the subject called 'No Margin For Error'
Taking the idea of stacking DIV boxes to make a page layout one step further, here's two more web pages to look at:
Today we looked at installing and setting up our own ftp client - filezilla (the client not the server). For the full scoop on ftp, including the all important difference between active and passive modes, check out this little wikipedia entry.
Now, I need you to write a blog post on your ftp experiences so far. If you haven't tried your second ftp client yet, pick one from the list, install it, and take it for a spin - then post an entry on your blog comparing it to your first client (core ftp-lite).
In the blog post tell me which one (if either) will you be using from now on and why. Some other things you might mention include:
We re-visited our template today, looking at how we could apply CSS to the blocks on the page in more detail.
A couple of the areas we covered were:
<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="css/default.css" />
</head>
<body>
<div class="breadcrumbs">
<a href="index.html">Home</a> .
</div>
<div class="title">
<h1>Title</h1>
</div>
<div class="pic">
<img src="xxx.gif" alt="a picture" height="200px" width="150px" />
</div>
<div class="wikiquote">
<p>some text from the wikipedia</p>
</div>
<div class="backgroundinfo">
<p>why this item made my list</p>
</div>
<div class="credits">
<p>Flickr Image: <a href="#">pic name</a></p>
<p>Wikipedia Article: <a href="#">wiki article title</a></p>
</div>
<div class="footer">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="thing1.html">Thing 1</a></li>
<li><a href="thing2.html">Thing 2</a></li>
<li><a href="thing3.html">Thing 3</a></li>
<li><a href="thing4.html">Thing 4</a></li>
<li><a href="thing5.html">Thing 5</a></li>
<li><a href="thing6.html">Thing 6</a></li>
<li><a href="thing7.html">Thing 7</a></li>
<li><a href="thing8.html">Thing 8</a></li>
<li><a href="thing9.html">Thing 9</a></li>
<li><a href="thing10.html">Thing 10</a></li>
</ul>
</div>
</body>
</html>
.backgroundinfo {
background-color: pink;
text-align: center;
margin-left: 20%;
margin-right: 20%;
border: 2px;
border-style: dotted;
border-color: purple;
}
.breadcrumbs {
background-color: red;
padding: 5px;
border: 0px;
border-color: blue;
border-style: dashed;
margin: 5px;
float: left;
width: 10em;
}
.breadcrumbs a:link {
text-decoration: none;
color: yellow;
}
.breadcrumbs a:visited {
text-decoration: none;
color: yellow;
}
.breadcrumbs a:hover {
text-decoration: underline;
color: blue;
}
.credits {
background-color: #eeeeee;
padding: 5px;
border: 1px;
border-color: blue;
border-style: dashed;
margin: 5px;
float: right;
width: 25%;
margin-top: -45px;
font-family: sans-serif;
font-size: x-small;
}
.footer {
clear:both;
}
.footer a:link {
color: white;
text-decoration: none;
padding: 3px;
}
.footer a:visited {
color: white;
text-decoration: none;
padding: 3px;
}
.footer a:hover {
background-color: skyblue;
color: navy;
text-decoration: none;
padding: 3px;
}
.footer li {
display: inline;
padding-right: 7px;
list-style-type: none;
}
.footer ul {
background-color: navy;
color: white;
padding-left: 0;
margin-left: 0;
font-family: sans-serif;
font-size: xx-small;
}
.title {
background: gray;
clear:both;
text-align:center;
margin-top:1px;
}
.pic {
background: skyblue;
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
}
.pic img {
border: 5px;
border-style: ridge;
}
.wikiquote {
background-color: purple;
text-align: center;
font-style: italic;
margin-left: 20%;
margin-right: 20%;
margin-top: -20px;
border: 5px;
border-style: double;
border-color: orange;
}
body {
margin: 0px;
}
whew, what a wild ride we had this week.
We started out by creating a new page titled "Ten things I want to do before I die" - saving it as an index.html file in a new directory called tenthings. On this page we created an ordered list of... 10 things we wanted to do before shuffling off this mortal coil.
Then we spent a little time designing a topology map of a site we could build around this page; 10 more pages with details of each of our ten things, links to each of these pages from our index, links from each detail page to the index page and to the next and previous items in the list.
Next we looked at designing the layout for a typical detail page. Paragon of page design that I am I came up with the following jewel...
What followed was a whirlwind of activity...
For this subject (and our CSS module) we'll be using the excellent text: Head First HTML with CSS and XHTML. It's not compulsory that you buy a copy ('though it wouldn't hurt), but you will need to visit their web site and download the example files.
Hello and welcome to the Bathurst web class for 2008. This will be a great year I think.
So that we can keep in contact, I'll be posting lesson notes here on the cert IV weblog which might be worth bookmarking (perhaps in a del.icio.us account).
During the course I'll be asking you to post material on-line; reflections, interesting finds and assignment answers (for a great example from last year's class, check out Sharlene's blog) If you don't already have one, I'd like you to create a blog of your own. Blogger is a good free offering, but there are many others.
Once you have a blog set up, bookmark it, write an introduction about yourself and what you hope to get from this course and then come back here and leave me a comment with the web address of your space (copy and paste from the browser's address bar) - when I get the URL I'll add it to the hall of fame on the right :).
Another tool we'll be using a lot this year is the Training O2 website. Create an account there and then search for htmldog. Visit the link that comes up for the html beginner tutorial and work through the first four lessons: getting started; tags, attributes and elements; page titles; paragraphs and headings. After you've worn yourself out go back to the detail page for htmldog on the training o2 site and leave a comment on what you thought of the tutorials. For bonus marks see if you can figure out how to vote for the htmldog web site.
Whew, that's probably just about a brainfull for the first day, but if you want to do more, post another entry on your blog about your impressions of the web course so far - I'd love to hear what you think.
For this assignment you will need to write a short report on the Bathurst TAFE website or a part thereof, say: your web page(s).
The report should...
To flex our accessibility assessment muscles we're going to analyse a real live web site and blog the results.
Pick one of the sites being maintained by the Australian politician or party of your choice (e.g. the Labor Party, Liberal Pary, Kerry Bartlett, Bob Debus)
What demographic do you think is being targeted? Describe the target audience's age, education and reading level. Analise some key pages on the web site for reading and comprehension levels (juicy studio might be useful here) - does the copy match up with the audience's education level?
What are the legal (and ethical?) accessibility requirements for the web site? Does it meet these requirements? (UITest might be helpful here, along with the usability checklist set out in the Victorian Government Accessibility Toolkit)
What changes would you make to the site to improve its accessibility and/or make it comply with current legal requirements?
Post your answer or print and submit by Monday the 5th of November.
We've had a little excursion into table joining - extracting data from tables that have a relationship between them (sharing primary and foreign keys that is)
to get some practice, let's extend our earlier customer table, making two more tables so we can let them place orders for products. These tables will be:
Products
productID (int, 11, auto_increment)
productname (varchar, 250)
price (decimal, 25)
and
Orders
orderID (int, 11, auto_increment)
productID (int 11)
customerno (int 11)
the productID and customerno in the orders table are foreign keys to the products and customers tables, and so our customers can have orders for many products, and our products can be in many order records.
Once you've built the tables put some test data into them - let's say 4 customers, 4 products and 4 orders - make sure that only 2 of your customers have placed orders (the other 2 are still thinking about it), and that only 2 of your products appear in any order (the other 2 are just gathering dust)
Once you have your test data in place create 3 SQL queries to show the following data:
Last week we looked at creating a table, inserting some information and showing the results.
You could have written the code from scratch - or done the smart thing and used phpMyAdmin's 'show php' feature.
This will take you a long way towards most of the things you want your web pages to do, but you might need some help getting phpMyAdmin to do its tricks in the first place - which is where the ilovejackdaniels cheat sheet comes in handy.
This page will list the common select statements and functions - and contains enough information for you to accomplish the following performance criteria:
Here's a short exercise to practice what we've learned so far.
Create SQL statements to accomplish the following tasks. Post your answers in your blog. Hint: you might find this easiest to do using phpmyadmin.
catching up with some things I glossed over last week...
Creating a table
once you have a database server and a web server set up on your local machine, you'll need to open a web browser and start up phpMyAdmin. Something like: http://127.0.0.1/phpmyadmin (the capital letters may or may not be important)
The first time you log in the default administration account for mySQL is root with a blank password. Since this database will only be used for development we can keep this, but if you were setting up a database on an internet facing web server you'd want to set the password (or better, create another user and delete the root user altogether).
Once you're logged in to the database server you'll need to create a database (test) and create a table on it (contacts) with the following fields (as set out in the tutorial):
Name | Type | Length | Description |
|---|---|---|---|
| id | INT | 6 | A unique identifier for each record |
| first | VARCHAR | 15 | The person's first name |
| last | VARCHAR | 15 | The person's last name |
| phone | VARCHAR | 20 | The person's phone number |
| mobile | VARCHAR | 20 | The person's mobile number |
| fax | VARCHAR | 20 | The person's fax number |
| VARCHAR | 30 | The person's e-mail address | |
| web | VARCHAR | 30 | The person's web address |
Time to star thinking about using structured query language (SQL) to create database structures and manipulate data
But before we do, we'll be needing a local development environment with a web server, database server and php scripting engine all rolled into one... XAMPP
Install this on your operating system of choice and bingo - you've got a grown up web server in a tiny little package.
To check that it's working start the program (on a windows machine that will be something like running C:\xampplite\xampp_start.exe) and then type: http://127.0.0.1 into your web browser's address bar. This should display the home page for your new local web server.
If everything's working OK you should see the xampp home page - and on the left a link to your phpMyAdmin page where we'll be setting up a database and single table as outlined in this PHP/mySQL tutorial
Try it out and post some php pages to the local server's root (somewhere like: C:\xampplite\htdocs) remember, test them by calling the local host ip address (e.g. http://127.0.0.1/test.php)
