ITB Week 5

This weeks material is very practical, involving the redesign of a website into semantic XHTML and CSS. As this is exactly the same process that you will be performing in the assignment, the lecture has been duplicated below, so that you can repeat the process should you wish (or if you missed the lecture).

The lecture notes can be downloaded as a PDF – lecture 5 handouts

If you attended the lecture and feel confident, you can jump straight into the lab exercise

Lab Exercise Styling the page – exercise sheet for Lab 5 and the Zip file containing HTML, CSS and images for lab 5

A solution for the complete site is available (i.e. the completed redesign shown in lecture and attempted in lab from the zip file)

If you missed the lecture or wish to see the process again, you can start from here:

This weeks materials are all about using Semantic XHTML and CSS to style a preexisting web site. The web site in question is the (old) version of the Faculty of Business Website (see image).

Activity One Download, extract and then have a look at the markup for this page Faculty of Business and Law.html (zip) – see if you can understand it.

Activity Two Watch the first part of the video – the lecture notes used in all these videos can be downloaded as a PDF – lecture 5 handouts

Video 1 is about 15 minutes long

Activity Three Try and edit your file (from Activity One) to remove all the excess HTML and CSS, like in the video. A completed solution is available to see if what you’ve created matches the video version

Activity Four Watch the second part of the video – where the logical parts of the document are marked up using DIVs and SPANs

Video 2 is about 7 minutes long

Activity Five Edit your document (or the solution given in Activity Three) to mark up the logical parts of the document – a completed version is available to check against. Watch out for the correct number of closing DIV tags where there are DIVs within DIVs – the trick is to have two closing DIVs at the end of the central column (closing the news area and the contentMain area), and two closing DIVs at the end of the column on the right (closing the badges part and the contentSub part).

Activity Six Watch the third part of the video on how to structure and add CSS files – and then what normalisation does

Video 3 is about 6 minutes long

Activity Seven Watch the final parts of the video which shows the steps required to style the site to recreate the original design markup used in the lecture Because this is the longest part of this process, this has been split into two parts

Styling the whole document – sorting out the column placement and overall styles (such as fonts) – about 7 minutes

Styling each individual sub area and tidying up – about 18 minutes

You should now be prepared for the Lab Exercise which asks you to style the page

Lab Exercise Styling the page – exercise sheet for Lab 5 and the Zip file containing HTML, CSS and images for lab 5

A solution for the complete site is available (i.e. the completed redesign shown in lecture and attempted in lab from the zip file)

One of the nicest books explaining the whole semantic xhtml and structured CSS approach is Transcending CSS by Andy Clarke

Site redesign using Semantic HTML and CSS

This session is about moving an existing site into semantic HTML and CSS. By reducing the complexity (and mess) of the pre-existing HTML and moving the design into CSS broken into separate files, the site should be cleaner, better structured and more maintainable.

Slides for this session (PDF) (Cut down version without all the CSS explanations)

Slides for this session (PDF) (Full set of every slide that’s used)

Semantic file with div structure (PDF)

FOB semantic with div (HTML)

Browsers

Two excellent posts about Web Browsers

The first from Mozilla celebrates 5 years of Firefox and explains what’s been going on this last year and where browser technology will be going next “super fast JavaScript, modern CSS, HTML5, support for the various web-apps standards, downloadable font support, offline application support, raw graphics through canvas and WebGL, native video, advanced XHR capabilities mixed with new security tools and network capabilities”.

The second from Glyn Moody contains a potted history of the development of browser technology. His Computer World column is always worth reading.

Standards Vs Market

An interesting split is occurring inside the group developing the next iteration of HTML.  Many of the individual companies working in the group would like audio and video support (in the style of appropriate codecs that would be embedded inside the browser executable). Reaching agreement on which particular formats should be supported is the problem:

The current situation is as follows:

   Apple refuses to implement Ogg Theora in Quicktime by default (as used
   by Safari), citing lack of hardware support and an uncertain patent
   landscape.

   Google has implemented H.264 and Ogg Theora in Chrome, but cannot
   provide the H.264 codec license to third-party distributors of
   Chromium, and have indicated a belief that Ogg Theora's quality-per-bit
   is not yet suitable for the volume handled by YouTube.

   Opera refuses to implement H.264, citing the obscene cost of the
   relevant patent licenses.

   Mozilla refuses to implement H.264, as they would not be able to obtain
   a license that covers their downstream distributors.

   Microsoft has not commented on their intent to support video at all

However – Mozilla (Firefox) and Google (Chrome) have committed to actually supporting Ogg, despite some questions about the quality that is possible. Will the market simply respond to these by using them? Or will the proliferation of (perceived) freely available codecs mean that nobody cares? It’s well worth looking at some of the astonishing apps built using javascript and an embedded codec to see what’s possible (Ajaxian has great coverage):

Update: arstechnica has a detailed analysis

links: whatwg webmonkey