Social computing eCommerce IT Toolbox Home

What are the essential tools that every IT person should have in the modern IT world? That is the idea behind a new Kingston University module called IT Toolbox. Over a 12 week semester, first year students will be guided through a series of activities such as blogging, running a server, client and server side scripting, search, social networking and problem solving. Each of those activities will be published here and anyone is welcome to join in.

hide alert

Learning basic web design or at least how to understand themes (Toolbox Lecture 6)

Written by: Jonathan Briggs

November 12, 2009 [2219 views]

Video from Jonathan Briggs on Vimeo.

Learning to build websites means learning lots of different elements and I have chosen WordPress because it gets you a long way very quickly. To go further however you need to start to understand the components that make up WordPress and start to experiment.

You may want to set up a second installation of WordPress in another folder so that when you break things you don’t affect your main site.

Basic ideas
  1. The web used to be a web of interconnected web pages and some of it still is
  2. Browsers fetched pages from web servers using URLs that told servers which page (document) to serve
  3. Serving pages was extended to allow variable data to be included in pages; arguments were added to URLs so that specific information could be retrieved
  4. Cookies were added to remember the relationships between one request and the next
  5. CGI Interfaces and forms were developed to increase the power of documents: if the file requested is actually a CGI script then run the script
  6. Tables were added as a way of laying out tabular data and then used for design
  7. Standards were needed to make sure that every page could be shown by every browser

Pages contained text, links to images and other sites. They were “marked up” using a tag based language called HTML to indicate headlines, links and the location of images. All browsers had to interpret (render) this HTML.

HTML suggested structure for the text as well as an idea of how it should be displayed but different browsers would display things differently.

HTML used to look like this:

<B>This is a bold sentence with a <BLINK>flashing</BLINK> <I>word</I></B>

Key tags to learn today

<h1></h1> to <h6></h6>
<b></b> or <strong></strong>
<i></i> or <em></em>
<a href=”url”>this is an anchor</a>
<img src=”url”/>
<p>paragraph marks</p>
<br/>
<ul><li></li></ul> for bulleted lists
<!-- this is a comment →
and perhaps <table> tags for laying out tabular data
and later <form> tags to allow you to build forms

Note:

  • All tags should be properly closed
  • All tag names should now be in lower case
  • Tags must not be interleaved: <b><i>bold italic</b></i> would be wrong!

The markup above needs to be used inside a standard document structure

<html>
   <head>
	<title></title>
   </head>
   <body>
   </body>
</html>

and finally a type declaration is needed at the start of a document to explain to the browser which version of HTML you are using:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML is not very effective for processing or displaying data

Lots of additional features were added to HTML to make it run search engines, ecommerce stores, mobile applications and social networks.

For a while each browser company would extend their browser separately with features such as Active X controls, Frames and JScript. The web began to become very incompatible.

xHTML + CSS + PHP are currently the tools you might be using if you are using WordPress. As you learn you will also want to explore Javascript which will let you do some more interactive things on your pages.

xHTML is a stricter, smaller version of HTML and the list of tags above are broadly what you will need

CSS is used to provide styling to pages and the same CSS files can be used many times for a site

PHP is a fairly straight forward scripting language for many projects.

What is PHP?

PHP is a server side scripting language.

When the web server with PHP installed gets a request for a document before the document is passed back to the browser it is “processed” by the PHP engine. Elements of the page that are marked with special <?php > tags are interpreted by the PHP as instructions; to get data, pull in additional files or handle forms (for example).

Note that documents that have the .html or .htm extension are not passed via the PHP engine. They are simply web pages. A web site could potentially have both.

WordPress is a set of PHP files that have already been written for you. These files contain all the PHP instructions that talk to the database that holds your content and provides the admin and display functionality that you associate with WordPress.

A WordPress theme is a small part of the overall WordPress system that you can change to customise the look and feel (and if you want, the behaviour of your site).

Deconstructing a WordPress theme: SImpla

Let us look at the elements of a very simple wordpress theme: Simpla theme for Wordpress

What does a theme consist of?
  1. Some PHP template files such as index.php, header.php and sidebar.php
  2. Style sheet style.css
  3. Folder of images that are used by the theme

The PHP files are the templates
The style sheet and the images provide the visual look and feel

Take a look into each of the templates

They consist of HTML and embedded PHP script (marked with <?php tags. Note that WordPress is made up of template blocks rather than web pages. Sidebar.php is never shown on its own but one of a number of templates that together create a web page.

<div id="sidebar">
<h2>Pages</h2>
<ul>
<li><a href="<?php echo get_settings('home'); ?>/">Home</a></li>
<?php wp_list_pages('title_li='); ?> 
</ul>
<h2>Categories</h2>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
<ul>
<?php get_links_list(); ?>
</ul>
</div>

Can you imagine what wp_list_pages and wp_list_cats do?

Now take a look at the style sheet. Here is part of it:
/*************************************
 +Sidebar
 *************************************/
#sidebar ul {
	list-style-type:none;
	margin:0;
	padding:0;
}
#sidebar ul li{
	border-bottom:1px dotted #ddd;
	margin-bottom:0.3em;
	padding:0.3em;
}

Can you imagine what would happen if we made changes to this style sheet for example?

.
#sidebar ul li{
	border-bottom:3px dotted #f00;
	margin-bottom:20px;
	padding:0.3em;
}

Taking things further

It is impossible in a single session to cover all (or even a part) of web design but I hope I have given you some clues that will start you exploring on your own. Here are some steps you might want to take on your journey and some pointers to tutorials that might help:

  1. Start creating some very simple web pages using xHTML. Make sure that you can browse these and that you understand some of the basic tags
  2. Start to explore CSS styling by adding styling into your basic web pages. Make sure that you can change the styling and see the effects.
  3. Move the CSS out into a separate file so that you learn to create styles that can be applied to multiple pages
  4. Explore some simpler WordPress themes before looking at some of the more complex. Can you describe what each PHP script is going to do?
  5. Start to explore some PHP on your own pages. Make sure that you change the extension of your files from .html to .php so that the scripts are sent via the PHP engine
  6. Learn some Javascript. You will need to find out about the DOM model.
  7. Find out about AJAX.

xHTML Tutorial
Learning CSS
Intro to PHP
Javascript Introduction
20 sites for learning AJAX

Recent comments:

On November 9, 2009 at 1:03 PM, Luke Baker wrote:

This seems pretty harder from the previous tasks. I've done all task so far all the way to 5.2 - Have I passed the module or is it a must to do this task! :P

Jonathan replies: Its OK Luke - this is not an activity - this is simply a lecture for those who want to learn about HTML.

On November 12, 2009 at 9:16 AM, Marky Warburton wrote:

OFF TOPIC

What implications for the programming community do you feel Googe's "Go" will have? (if any) it looks like its meant to be a very light language, and lots of people seems sceptical of it at present. but i just wanted your opinion.

http://www.techcrunch.com/2009/11/10/google-go-language/

Jonathan replies: Great that you found this and alerted us to it Marky! Wow, does the world need another language? I'm not sure.

It will be interesting to watch and see whether Google adopts this for any of its own projects - it sort of feels that it has come out of a private project in the labs.

This is important however because it demonstrates that just when you start to get comfortable, Google and others produce new languages, tools and ideas that need to be fitted into your world view.

It also demonstrates how difficult it is for a Computer Science Dept to decide what to teach as things change so fast. That is why I am so keen on people learning to accept change and finding ways of exploring new stuff on their own.

On November 14, 2009 at 1:03 PM, PJ wrote:

There are so many languages out there right now, I agree - do we really NEED another language, reading up they seem to be modernising the syntax in comparison with other languages such as Java, C++.

However - C++ is a well defined language that is used globally by huge firms. I dont think employees and employers will waste time in learning this new language especially if others are available and probably known very well by the programmers.

Also with Semi-interpreted language JAVA 7 - its not like the needs of today's world aren't going to be met. Java 7 is going to have some pretty intense changes, - Java 6 was released in December 2006, it has been 4 long years, thinking about all the new technology that wasn't in Java 6.

I for one will definitely not be learning Google Go. If anything I'd like to learn Java to the best of my ability, then learn some C++ or C.

Don't try to hard Google, the wall might just fall on top of you! :P

http://themixture.co.uk

Jonathan replies: I think that we'll all be faced with further languages in the future but to be honest they all have so much in common that switching from one to the enxt won't be such a big deal.

On November 16, 2009 at 12:48 AM, k taylor wrote:

Hi Jonathan,
A little off the subject but I am having trouble finding a solution on the internet.
I was wondering if it was possible to display post from two different databases in columns next to each other? All the answers I have found say to use query loops but this only works when using a single database that you want to isolate different post from. I am very specifically trying to display from two SEPARATE databases.
If not possible in wordpress what would you suggest is the most suitable CMS to achieve this?

Thanks
Kai

Jonathan replies: Interesting question. You seem to have a technical solution (two databases) and want to combine them. Why use two databases rather than adding a field to a single database to indicate the source of the data?

Of course you may have your reasons. If so I think you will find that Wordpress could be adapted but this would be a lot of work. Other CMS are going to have the same problems.

I would want to stand back and find out what the real issue is here.

On November 16, 2009 at 11:28 PM, Mayuri wrote:

Hi Jonathan,

I am falling behind, i was stuck on activity 3, running the wordpress due to the confusion of host database going down. I panicked so much trying to collect resources while i was waiting for my hosting to get back to me to get my blog site back up on the server. I have now received the email back saying it will come back up but realised had to do some again.

However, i know i am submitting it late and it affecting my mark i still want to be submitting it in asap when finishing the activity. Was wondering if i could still do the Part 2 from previously or is that too late and will only can do Part 2s after current one.

Really sorry about this, reply back when you can, thanks.

www.miss-mayuri.co.uk/wp

Jonathan replies: Dont panic! You are not the only one in this situation and you should just take your time to catch up. Part 2s of activities can be done at ANY time and will count towards your final grade. Part 1s need to be completed as soon as possible but I will take into account problems you have had.

What do you think?






Add your comments

Recent postings in this section

Site map | Copyright | Credits | Contact
© copyright 2004-2010 Jonathan Briggs. Content licensed under Creative Commons

 

Sound installation at Vauxhall Ragged School as part of London Open House

Sound installation at Vauxhall Ragged School as part of London Open House [Sep 20, 2009]

Photo blog

Search

About this site

This site is an educational resource, a research project and a publication channel written by Jonathan Briggs, Professor of eCommerce at Kingston University.
As well as being Professor at Kingston, Jonathan...

Read more

Creative Commons License
This work is licenced under a Creative Commons Licence

Interesting stats

Locations of visitors to this page