Advantages of static websites• Lower entry barrier for development (just plain old html and css ﬁles).• Simple hosting requirements• Easily cacheable• Can be viewed “ofﬂine”
Disadvantages of static websites• Much less scope for interactivity, customisation, personalisation.• Every little change/update needs to be done manually.• Version control issues with multiple contributors.
Dynamic website• Website content is stored in a database (and/or other external sources) and assembled with markup and output by a web server script.
Advantages of dynamic website• Content can be updated in a decentralised way. (a single “webmaster” does not have the sole privilege/responsibility of updating the website)• Modularisation and reuse of common code (e.g. headers, menus).• Automation
Disadvantages of dynamic website• Higher entry barrier / learning curve for development• More complex web server requirements• Issues with pages being indexed by search engines.• Overall the beneﬁts will almost always outweigh the disadvantages.
Web Content Management Systems (WCMS)• Basically a series of interfaces for performing common tasks by various users of a dynamic website.• ... and an ofﬁcial deﬁnition ...• A Content Management Systems (CMS) is a tool that enables a variety of (centralised) technical and (de-centralised) non technical staff to create, edit, manage and ﬁnally publish (in a number of formats) a variety of content (such as text, graphics, video, documents etc), whilst being constrained by a centralised set of rules, process and workﬂows that ensure coherent, validated electronic content. • Enterprise Content Management (2008) What is a Content Management System or CMS? Available from: http://www.contentmanager.eu.com/history.htm (Accessed 20/08/09)
Advantages of using a CMS• It makes managing lots of constantly updated content manageable.• What kind of management? • updating, publishing/unpublishing, archiving, searching, moderating, automating, securing etc.• By providing administration interfaces it (ideologically at least) allows people with no understanding of web architecture to become content publishers. • Internal and external (e.g. users can be leveraged as content contributors)• User level access.• Automation of processes• Common architecture means development of reusable plugins, templates/themes etc
Disadvantages of using a CMS• More complicated to set up• Level of technical knowledge required for developer AND designer increased • Designer needs to understand to an extent what constraints/ conventions a design needs to be compatible • These will be different for every CMS and often difﬁcult to determine deﬁnitively.• ‘One size ﬁts most approach’ • Any ‘out of the box’ solution will force you into a certain way of doing things • Many CMSs are extendable/customisable, but even these processes follow certain models/conventions • At what point of does it make more sense to build your own CMS from scratch?
Disadvantages of using a CMS• Upgrading the underlying technologies of the CMS may be difﬁcult or impossible (especially if you have customised core code)• Migrating content to a different CMS may be difﬁcult or impossible • In a rapidly evolving website, how do we know the current solution will still be the best one in a month, a year, 10 years? • What if we can’t export the content and view it outside the context of the CMS?• Search Engine Optimisation (SEO) issues associated with dynamic web sites.
Content Management Confusion• So how many WCMS exist?• http://en.wikipedia.org/wiki/ List_of_content_management_systems• Why are there so many?
Which CMS!?• Choosing a WCMS: • Your needs, eg. technological, knowledge • Client needs, eg. content to be managed, costs, timeframe • CMS options, eg. Licensing, development team, security, accessibility and code quality, documentation and training, support • Boag, P (2008) too many content management systems. Available from: http://boagworld.com/technology/too- many-content-management-systems (Accessed 20/08/09)
When not to use a CMS• If you have a website with a small amount of static content that will never change very frequently the overhead of setting up an elaborate CMS solution is probably not worth it. Don’t believe the hype!• If the design and/or architecture of your website is highly unique/specialised then attempting to make it work with an out-of-
Which CMS?• What are the requirements of my website? • From a design perspective (both presentation and content) • From an economic perspective • From a technological compatibility perspective • Now and in a month, a year, 10 years...?• Which CMS solution best meets these requirements? • Research, research, research! Jumping the gun at this point could turn into a costly mistake later on. • Try before you buy! (so to speak) • http://www.opensourcecms.com
Why Wordpress?• It is a good platform to ease you into the world of CMSs• It is relatively simple, but its functionality can be expanded greatly with a little extra work.• Free and open source• Popular• Excellent documentation• Plenty of 3rd party tutorials• It has a few years behind it now and is being actively developed (it probably isn’t going away anytime soon)• It has a good track record of upgrading to new features without breaking old ones.• Runs on the very common W/M/LAMP server stack
• Blogging Tool• Brief History • Roots and development date back to 2001 • In 2005, version 1.5 was released which introduced themes, wordpress.com hosting startedIn 2006, 191,567 downloads, 371 plugins • In 2007, 2.9million downloads, 1,384 plugins• Is Wordpress a CMS?
Wordpress Plugins = CMS?• “Plugins can extend WordPress to do almost anything you can imagine.” Community contributed plugins that extend the Wordpress installation.• http://wordpress.org/extend/plugins/• Some wordpress plugins designed to add CMS features: • Custom Admin Menu • Clutter Free (hides features from clients) • Wordpress Dashboard Editor • Custom Write Panel (create your own custom ﬁelds) • WP Contact Form • fGallery (image gallery that supports light box) • User Permissions • WP E-commerce • Just about anything• http://www.kongtechnology.com/2008/02/29/how-to-turn-wordpress-into-a-cms- website/
Example: Rebranding using the custom login plugin
Wordpress sites don’thave to look like blogs• There is no doubt that Wordpress began its life as a blogging tool, but with each version it gains more CMS features.• There are many websites built on Wordpress that would not be considered blogs.
More Wordpress sites that don’t look like blogs• h;p://designtutorials4u.com/30-‐crea4ve-‐ wordpress-‐sites-‐that-‐dont-‐look-‐like-‐blogs/• h;p://blogsessive.com/blogging-‐tools/10-‐ beau4ful-‐wordpress-‐websites/• h;p://pelfusion.com/inspira4on/30-‐wordpress-‐ based-‐websites-‐that-‐dont-‐look-‐like-‐blogs/• h;p://www.websitetology.com/?p=244 29
Server requirements (as of Wordpress 3.2)• h;p://wordpress.org/about/requirements/ –PHP version 5.2.4 or greater –MySQL version 5.0 or greater –Apache is the recommended h;p server 30
LAMP server stack• LAMP stands for Linux Apache MySql and Php, which, in a nutshell is just all the software that is required to serve your wordpress site.• http://www.computerguideonline.com/internet/what-lamp-stack
Installing Wordpress on your remote web server• http://codex.wordpress.org/Installing_WordPress• 4 main steps are: 1. Download the Wordpress install package, unzip and upload to your web server using an FTP client 2. Create a new MySql database 3. Edit the wp-conﬁg.php ﬁle 4. Create an administrator account and start using wordpress!
1. Install the Wordpress package• http://wordpress.org/download/
2. Create the Database• When you set up your web hosting, you should have been given a url and login details to a web hosting control panel, such as cPanel. This interface will allow you to create and manage MySql databases (if you’re lucky, they might even have a 1-step automated Wordpress install feature).• http://www.cpanel.net/media/tutorials/ addmysql.htm
3. Edit the wp-conﬁg.php ﬁle• The wordpress directory you uploaded to your web server will contain a ﬁle called wp-conﬁg-sample.php.• You need to edit this ﬁle and then re- upload it to your server with the name wp- conﬁg.php (lose the -sample part).
4. Create an administrator account for your wordpress site
Wordpress interfaces• Wordpress interfaces can be divided into the admin interfaces and the public interfaces. We might also refer to these as the backend and frontend interfaces respectively.
Admin/Backend Interface• This is where you do all your Content Management • editing posts, moderating comments, installing plugins and themes, managing user accounts etc. • requires a login which you setup during installation. • accessible at www.yourwordpresssite.com/wp- admin• http://codex.wordpress.org/ Administration_Screens#Dashboard
Public/Frontend Interface• This is what visitors to the site will see when they go to your url.• You will want to check what the site looks like after making changes to the appearance or the content.
Wordpress themes• Wordpress can install themes to change the “look and feel” of the site.• h;p://wordpress.org/extend/themes/• Your ﬁrst assignment is to create your own wordpress theme which uniquely services the content and purpose of your site. 50
Using a pre-‐made theme• Advantages – quick & easy – plenty of well-‐made free themes – can modify to suit your own needs• Disadvantages – less unique – generic -‐ so not made with your unique content in mind – depending on how much customisa4on you do, it can actually end up taking you longer and cos4ng more than doing your own from scratch 53
Crea4ng your own theme from scratch• Disadvantages – can take longer and be costlier – you have to learn how to make themes• Advantages – Unique – completely ﬂexible and customisable – complete control over resources -‐ no waste – you get to learn how to make themes! 54
Anatomy of a Wordpress theme• wordpress themes are installed to the wp-‐ content/themes directory 55
Anatomy of a Wordpress theme• php ﬁles contain html markup interspersed with php snippets which retrieve content from the wordpress database and output the result to plain html for the browser to render 57
Template tags• Wordpress uses it’s own php func4ons called template tags to output informa4on to the page.• For example in the next slide the template tag bloginfo is used to get the name of the site from the database and output it whithin the <4tle> html element. • These handy func4ons save us from wri4ng a lot of extra php code. 58
header.php template ﬁleview-‐source in the browser 59
So where do we ﬁnd out what data wordpress can retrieve and what php code retrieves it? • The wordpress codex –h;p://codex.wordpress.org/Template_Tags –h;p://codex.wordpress.org/Func4on_Reference/ bloginfo• Look at other themes• google it – e.g. h;p://www.google.com.au/search? hl=en&qscrl=1&q=wordpress+display+blog +name&aq=f&aqi=&aql=&oq=&gs_rfai= 60
Anatomy of a Wordpress theme• wordpress page structure can be logically sec4oned into a number of building blocks.• each of these blocks correspond to a separate php ﬁle in the theme directory (wordpress expects these ﬁles to have par4cular names like header.php, footer.php, sidebar.php etc).• each block (ﬁle) can be included and reused in mul4ple page templates using template tags like <?php get_header(); ?> 61
Anatomy of a Wordpress theme• Use as much or as li;le of the template hierarchy as your site requires.• lets look at some of the most common template ﬁles... 66
header.php• usually contains the doctype, metadata and <head> sec4on of the html document• may contain the top naviga4on• include the header in other template ﬁles to avoid duplica4ng the code it contains with <?php get_header(); ?> 67
footer.php• anything you would normally put in a common page footer. • include the footer in other template ﬁles to avoid duplica4ng the code it contains with <?php get_footer(); ?> 68
sidebar.php• commonly contains: – naviga4on (main and/or subnav) – links (internal and external) – searchform – widge4sed plugins that can be added and removed through the administrator interface (dashboard)• include the sidebar in other template ﬁles with <?php get_sidebar( $name ); ?> 69
The content• Wordpress has 2 main content types, posts and pages• The 3 main template ﬁles associated with displaying these are single.php, page.php and index.php 71
index.php• default frontpage• usually displays excerpts of recent posts• use the wordpress loop to ouput posts – h;p://codex.wordpress.org/The_Loop• usually includes the header, footer and sidebar template ﬁles 72
single.php• displays the en4re contents of a single post• may display comments if enabled• usually includes header and footer template ﬁles 73
page.php• displays the contents of a wordpress page content item• may display comments if enabled• usually includes header and footer template ﬁles 74
categories.php• wordpress supports categorising posts in a custom taxonomy.• It can be useful to have pages that only show posts in a given category.• You can provide a naviga4on menu that links to various categories as a way of sec4oning your site content. – e.g. h;p://www.smashingmagazine.com/ 75
funcMons.php• the func4ons ﬁle is diﬀerent in that it doesn’t map to any displayable content block on the page• it is simply a place to store any reusable func4ons that can be used by any other template ﬁles. 76
Anatomy of a Wordpress theme• for a more detailed and complete list of template ﬁles see the wordpress codex, par4cularly: – h;p://codex.wordpress.org/Stepping_Into_Templates – h;p://codex.wordpress.org/Theme_Development – h;p://codex.wordpress.org/Site_Architecture_1.5 – h;p://codex.wordpress.org/Template_Hierarchy• for a complete list of wordpress func4ons and template tags (the bits of php you use to get stuﬀ from the database) see the following: – h;p://codex.wordpress.org/Func4on_Reference – h;p://codex.wordpress.org/Template_Tags 77
NavigaMon menus• the template tags wp_list_pages and wp_list_categories will output a list of links (<li><a>...</a></li>) that can be styled like any list based naviga4on menu. – h;p://codex.wordpress.org/Func4on_Reference/ wp_list_pages – h;p://codex.wordpress.org/Template_Tags/ wp_list_categories• CSS lists -‐ h;p://css.maxdesign.com.au/listama4c/ 78
So what about the CSS?• This is probably the least diﬀerent part of developing a wordpress theme compared with a sta4c website.• The style.css (or whatever you want to call it) sits in the theme directory and is usually added to the header.php with a standard link tag, but with a wordpress func4on in place of the url. – <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( stylesheet_url ); ?>" /> • Get used to using ﬁrebug or a similar html/css inspec4on tool -‐ it is even more of a godsend when working with dynamic websites. 79
Installing the theme• Wordpress looks for some pre-‐deﬁned text in a comment block at the top of style.css so it can display this informa4on about the theme in the administrator interface. 80
Installing the theme• it also looks for a ﬁle called screenshot.png in the template directory to provide a preview thumbnail of the theme 81
Installing the theme• installing the theme is simply a ma;er of puong the theme folder in the wp-‐content/themes directory and ac4va4ng it through the wordpress admin interface. 82
Wordpress theme development = all your usual staMc-‐web design principles plus the power of the dynamic web! 83
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.