Interactive Design Homepage

VUIT Digital Arts

Teacher Name: Lisa Cianci - email: lisa.cianci@vu.edu.au
Education Manager: Adam Hutterer - email: adam.hutterer@vu.edu.au

Class Website - http://multimedia.tafe.vu.edu.au/lisa/2015/ID2


Subject: ID2 - Interactive Design

Course: Advanced Diploma of Graphic Design (CUV60411)


CLASS 09

 

Submit Responsive Design Task

Complete the mockups for your video website in Photoshop, Illustrator and/or InDesign.

Compile everything in a PDF document to submit via email to me at lisa.cianci@vu.edu.au

Interesting article on UX: http://www.usabilitycounts.com/2011/06/29/a-day-in-the-life-of-a-ux-designer-part-i/

 

Introduction to Dynamic Websites

Dynamic websites contain web pages that are generated in real-time. These pages include Web scripting code, such as PHP or ASP. When a dynamic page is accessed, the code within the page is parsed on the Web server and the resulting HTML is sent to the client's Web browser.

Most large websites are dynamic, since they are easier to maintain than static websites. This is because static pages each contain unique content, meaning they must be manually opened, edited, and published whenever a change is made. Dynamic pages, on the other hand, access information from a database. Therefore, to alter the content of a dynamic page, the webmaster may only need to update a database record. This is especially helpful for large sites that contain hundreds or thousands of pages. It also makes it possible for multiple users to update the content of a website without editing the layout of the pages.

Dynamic websites that access information from a database are also called database-driven websites.
(http://techterms.com/definition/dynamicwebsite)

 

Wikipedia & Killer Sites actually give good summaiesy of what a database driven web site is and what a dynamic web page consists of:

http://en.wikipedia.org/wiki/Dynamic_web_page

http://www.killersites.com/articles/articles_databaseDrivenSites.htm

 

Over the rest of the semester we will be looking at dynamic website development through your Wordpress Portfolio development and through some other exercises involving research and coding a simple dynamic web page.

As an example of the construction of a dynamic web page, a page from a Wordpress site could contain scripting from the following code languages:

HTML
HypeTtext Markup Language - the basic "markup" language which is used to present the content of the webpage in a standard format parsed by your browser

CSS
Cascading Style Sheets contain code that creates the style of the page - colour, font positioning, etc.

JavaScript
JavaScript sits within your HTML file or links to it and enables interaction to occur with the webpage - things such as image galleries, clickable and draggable objects, button funcitonality, layer visibility etc.

jQuery
a fast, small, and feature-rich JavaScript library which makes things like HTML document development and manipulation, event handling and animation much simpler with an easy-to-use API that works across a multitude of browsers.

PHP
PHP Hypertext Preprocessor (a recursive acronym favoured by the open source code geeks! )is a widely-used open source general-purpose "server-side" scripting language that isused for dynamic web development and can be embedded into HTML.

MySQL
is a freely available open source Relational Database Management System (RDBMS) that uses Structured Query Language (SQL). SQL is the most popular language for adding, accessing and managing content in a database. It is most noted for its quick processing, proven reliability, ease and flexibility of use.

XML
eXtensible Markup Language is a markup language that defines a set of rules for encoding documents in a format which is both human-readable and machine-readable. It is sometimes used to store information like an SQL database, in a structured format.

 

 

clientserver

image from wikipedia http://en.wikipedia.org/wiki/Dynamic_web_page#/media/File:2013vmvClientServer.png

 

Start Assessment Task 4 - Wordpress Portfolio

  1. Discuss what online folios are, and what they can be
  2. Look at examples of folios
  3. Introduction to online folios
  4. Complete Quiz – What is important in a folio?
  5. Review 2 folios online as research

Creating a Wordpress Blog - Uses for Designers

Using a blog as a method of reflective practice, self promotion, networking, exhibition and presentation of creative content and keeping place for documentation of creative work.

Even designers and artists that use little or no digital media in their creative practice will eventually need to deal with web technologies in communicating with others, building networks, applying for work, funding and exhibition opportunities and managing or documenting their work (especially if it is of an ephemeral nature).

A blog can be used in a number of ways. Wordpress, as the most ubiquitous of the free, open source blog applications, has many advantages for designers - especially as it is relatively user friendly to set up - you don't need to have any web development skills as most elements are enabled or installed by selecting a range of options in the setup "dashboard" area.

You don't have to use the blog posts as a journal style website if you don't want to. You may use the site to create static pages and image galleries, portfolios, and a range of other functionalities available from customising with widgets.

Today we will begin by getting everyone to create a Wordpress.com site. We may only get as far as creating a blog and choosing an initial theme - don't worry if your theme isn't really perfect for you yet. We will be looking at portfolio requirements and what functionality we want from a theme. You can always change your theme without losing any content that you may already have. Although, if you choose a radically different theme layout, you may need to consider how your media content will work in a different theme.

We will begin by going to the Wordpress User Guide at:

http://learn.wordpress.com

This is a very user friendly guide to get you started, with step-by-step instructions and pictures to help you. My role will be to get you started as a group, then to individually help you with the specifics that you want to set up on your particular blog.

Today you should try and read through:

Get Going Fast: A Checklist - https://learn.wordpress.com/quick-start-guide/

We can start creating the blog this week, but before you do, you will need to start thinking about a name for your blog - e.g.

http://myname.wordpress.com

The name must be unique, one word with no spaces or inapropriate characters, and this will be used in the URL - where your blog will be located.

 

 

References

Some interesting websites and blogs by artists and designers

 

Some interesting image gallery sites (not blogs, but interesting ways of presenting visual content using web technologies)

 

Other useful resources:

  • just Google "best responsive wordpress themes" for a host of links to inspirational wordpress themes and sites.