Web Development, Linux
and Productivity.
Nottingham Linux User Group, 2007
Intro
I'm Danny King - I've been interested in web development for 7 years, and Linux for around 4
Joined the LUG about 3 years ago, but haven't been for a while
Starting a small design company focusing on web development
I'll be talking about:
How Linux is used in our workplace
How Linux (and OSS) makes us productive & why we run it on our primary desktop
The process of making a website using HTML & CSS
My definition of web development
There are many ways to make a website:
"Draw it" - Dreamweaver / etc
Table based HTML
HTML / CSS / Javascript
CMS
W3C have proposed standardised ways of coding websites (HTML & CSS) - These should be used
Future proof
Websites easier to access - Mobiles / People with disabilities / Keyboard navigation / Resizable fonts / Screen sizes / Search engines
Easier to update
Neater code
Quality control
Tested on as many platforms as possible (Internet Explorer 5.5/6/7, Firefox, Opera, Konqueror/Safari, Lynx, Mobiles, Paper!)
Some obvious pros of using Linux & OSS for web development
Fantastic, free, easy to install software that can almost always compete with leading alternatives
Inkscape / The GIMP / Blender -> Photoshop, Fireworks, 3ds Max
Loads of text / code editors
Openoffice (or Google Docs) -> MS Office
LAMP (Linux, Apache, Mysql, PHP/Perl)
Flexible & customisable - Make your desktop exactly how you want it
How Linux and OSS can really make you shine
People work more productively with an uncluttered desktop. Window/desktop management in Linux is amazing. Many great options to choose from, personally I use Compiz
Many people say Compiz is just "eye-candy" - it is to a large extent, but it can also make you very productive
Zoom in - great for examining creative work in detail
Video demonstration (duration 4:41 min)
Many other WMs (that use much less RAM) - all do similar things
This flexibility and having all these features together just isn't currently possible for either OS X or Windows
Synergy - Control all of your computers with just one keyboard & mouse and share a clipboard: less clutter on the desk
IEsForLinux - Make testing in different browsers less of a nightmare - test most browsers on one computer. No need to have access to a Windows machine for testing Internet Explorer
A speedy introduction to web development using HTML & CSS
There are generally considered to be 3 layers to a website; structural, presentational & behavioral
Structural Layer: HTML - The building blocks
The actual content of the website - the important bits (words, important images)
Gives semantic meaning to each piece of content (Paragraphs, lists, links, images, headings, emphasised text, etc)
Should be all you need to have a fully working, navigable website
Presentational Layer: CSS - The paint
Defines what the content looks like
Add presentational images
Behavioral Layer: JavaScript
Example layout of well formed HTML document
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Well formed HTML page.</title>
</head>
<body>
<p>
A paragraph of text.
</p>
</body>
</html>
Example of manipulating the style of HTML with CSS
p {
width: 450px;
height: 300px;
color: white;
background: black;
}
Website structure example
My process for making a website using HTML & CSS
Define the audiences, goals, limitations, size & structure of the website
Define the content of the website (wording, ideas for images, hyperlinks, forms) whilst deliberately trying not to think about design or colour
Sketch layouts and select the one you feel will work best for the target audience. Doesn't need to be a work of art: just gain a good idea of the structure of the website
Collect & prepare/create resources
Photography / images
Icons
Colour schemes
"Draw" the website layout using Inkscape
"Slice up" the website layout using The GIMP
Create an HTML file to contain a page's content (without adding style or colour) - get the content right first
Create the basic structure of the HTML files (building blocks) using CSS
Test on as many platforms as possible
Integrate the images & actual design to create the finished design
Test again
Create the rest of the HTML pages
Put it online!
Outro
Find us at www.gleamingpixel.co.uk and get in touch via enquire@gleamingpixel.co.uk
Please consider us and spread the word about us!
Resources:
www.htmlprimer.com - Basic to advanced HTML and CSS.
