Information sharing on the web

a personal experience

During the March 2^nd, 2006 CSCS Brown Bag Lunch, an information sharing talk for internal people, I present the experience I have gained building my own home page.

This talk is not a Web design tutorial nor the presentation of a CSCS sponsored project. It is simply the presentation of my own motivations to build a web presence, the tools I have used and the lessons learned.

Here you find the talk slides, the list of links mentioned during the talk, tutorials and references useful for web page design and finally a real life example of Word-to-Web conversion.

Slides

Here are the talk slides [PDF] and handouts [PDF] (last updated: 02-march-2006).

As a useful tip, if you load a PDF file into Adobe Acrobat Professional and apply the Reduce File Size function, you can reduce its size to 22% – 55%. This is what I have done with my talk slides and handouts.

Useful links

And here the links to pages and tools I mentioned during the talk:

• Obviously my home page
• Steves Templates: one of the various sources of web page templates
• Stu Nicholls – CSS layouts: my home page layout comes from here
• Web Pages that Suck: what not to do on your page
• SciTE: a multiplatform syntax coloring editor
• Amaya: the W3C integrated editor
• Bluefish: a Linux HTML editor
• CSSed: a CSS editor (incidentally based on the same editor widget used by SciTE)
• HTML Tidy: to clean the page HTML code (see below for a real life example)
• Web Developer Toolbar for Firefox
• The W3C HTML validation service and the companion CSS validation service
• Xenu: a fast link checker (Windows only)
• Mozie: compares side by side how a page is rendered by Mozilla and by Internet Explorer (obviously it is Windows only)
• The GIMP: for WYSIWYG image editing and HTML imagemaps creation
• Image Magick: for batch image manipulation (see also the Image manipulation tools and techniques page)
• PNGout: a PNG image optimizer and its nice GUI front-end PNGGauntlet (PNGGauntlet is Windows only, instead PNGout has command line versions for Linux and Mac)
• Unison: a file synchronizer tool (but see also below for alternatives)
• Webstats4u: free web statistics

Tutorials

• CSS from the Ground Up
• Learning CSS from the official W3 site
• From the W3C people a short tutorial on how to set up your first style sheet
• A nice guide to web design
• XHTML and CSS tutorials offered by W3Schools

Online references

• XHTML 1.1 or a more compact one
• CSS 2 and again a more compact one
• HTML character entities
• Web browser standards support and compliance chart

A Tidy example

Here is a real life example of creating a web page from a Word document. The example is composed by:

• The original Word DOC file.
• The html page as saved from Word (load it, do a 'Show source' and horrify).
• The DOS script used to run HTML Tidy and the equivalent shell script.
• The Tidy output (load it, do a “Show source” and enjoy) and the detected errors list.
• With a single line addition plus a reference to my CSS style sheet you have a valid XHTML 1.1 page that smoothly integrates into the whole site architecture.
• The only things missing are the banner and footer. Here is the final version to be put online with the rest of the site.

Things to check

Here are some tools that look promising to simplify the work of small web site owners, but I do not have tested them yet.

• sitecopy: to upload and synchronize a website. Works also on Windows.
• rsync: to upload and synchronize a website. Works only on Linux.
• OptiPNG: an advanced PNG optimizer. It comes with sources, so could be potentially multiplatform.
• Making the Case for a Wiki and The Personal Wiki pages.