DDM - Design for Digital Media
Diploma of Creative Industries (WDCI)

Teacher Name - lisa.cianci@vu.edu.au
Class Website - http://lisacianci.vucreativeindustries.com/2012/DDM

(login to the website: username = student; password = student)

Class 14 - Web Technologies


Class: Web technology - understanding the technology behind websites - HTML, CSS, JavaScript, what is jQuery? Understanding dynamic websites - PHP, MySQL, etc.

We are going to have an introductory look at how web technologies work today, mainly to give you an understanding of what's going on at the "back-end" of web development, even though you are focusing on the "front-end" of web development and digital media development in this subject.

How did the Internet begin?

http://www.internetsociety.org/internet/internet-51/history-internet/brief-history-internet

how the web began - http://public.web.cern.ch/public/en/about/WebStory-en.html

 

So how do our websites work?

how the internet works (in 5 minutes) - http://www.youtube.com/watch?v=7_LPdttKXPc

how the web works in one easy lesson - http://mkcohen.com/how-the-web-works-in-one-easy-lesson

how internet infrastructure works - http://computer.howstuffworks.com/internet/basics/internet-infrastructure.htm

how web servers work - http://www.howstuffworks.com/web-server.htm

 

Where are we now - Web 1.0, 2.0 or 3.0? What does it all mean?

Web 1.0 - static web pages, brochure-styled information pages, only simple images and animation

http://en.wikipedia.org/wiki/Web_1.0

http://appletreemarketing.wordpress.com/2011/02/02/what-is-the-difference-between-web-1-0-2-0-and-3-0/

 

Web 2.0 - dynamic pages that allow for a range of user experience and customisation of content to suit the user - an "Architecture of participation" - social media, blogs, podcasts, wikis, etc. Rich media - video, audio, animation.

http://en.wikipedia.org/wiki/Web_2.0

 

Web 3.0 - semantic web - more meaningful relationships and interoperability between "islands of culture" and "data silos". It's not artificial intelligence, but it's using language and frameworks to enable computers to work in "smarter" ways to serve up content to users based on more meaningful search capabilities. Our usage patterns analysed to advertise and serve up to us the kinds of information we want.

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

semantic web explained - https://vimeo.com/718532?pg=embed&sec=718532

 

What technologies are we using on a daily basis?

  • web servers
    Internet Service Providers, large servers or clusters of powerful computers that store all of out data and "serve" it up to our computers and devices like smartphones, touchpads etc, when we request the information via protocols such as HTTP (HyperText Transfer Protocol) and FTP (File Transfer Protocol).

  • client-side scripting languages
    Scripting languages such as HTML, CSS, JavaScript and XML are "client-side" scripting languages because they are "parsed" by our own computers via the web browser. These languages are used for creating "static" web pages where the content does not change or get updated without manual editing. jQuery is a combination of HTML/CSS/JavaScript that maximises user interaction with web pages. Examples of this are Lightbox-styled overlays, floating tooltips, animated elements on the web page, and tabbed content.

  • server-side scripting languages
    These scripting languages allow us to create "dynamic" web pages where the content is able to change because the scripts are calling information from databases to provide the content for the web page. Scripting languages such as PHP, ASP, ColdFusion are common examples. These languages require software to be installed on the web server, then files that have the extension ".php" or ".cfm" for example, will be recognised by the web server, and transactions with databases (also installed on the web server) are enabled. It is sometimes difficult to tell if a site has static pages, dynamic pages, or combinations of both. Server-side scripting languages allow us to have blogs, social media sites like facebook and twitter - basically any site where you can change the content without having to edit the web page is most likely using a server-side scripting language.

  • databases
    databases allow us to store content separately from the format of the web page. relational databases are the most popular format - examples of these include MySQL, SQL, SPARQL. Relational databases work by storing multiple tables of data that are interlinked by unique identifying fields within the tables (primary key fields). Relational databases allow us to store complex types of data without duplicating information. A simple example of this would be a contacts list like the one on your phone - you have one name with many different phone numbers, an email address, a home address, etc. in the relational database, you have a Person table with one entry for the person, then this links to a "Phone" table that lists multiple phone numbers and their type (mobile, home, work, etc). By interlinking the tables, you only need to have the person's name in there once, and it can link to many phone numbers (a one-to-many relationship). You can also have many-to-many relationships where information from one table is interlinked with information from another table via a "joining table" that only links one primary key field to another.

    These databases have server software of their own that is installed on the web server, and when requests for data are made via server-side scripts using the SQL query language, the database server retrieves the right information and sends it to the script which then formats it so it looks like the kinds of web pages we are familiar with.

  • multimedia content
    all of the files that make up your website - text, images, video, audio, Flash animations, 3D environments, documents, are all stored on the web server. this is the content that the scripting "markup languages" such as HTML, arrange and format so that we can view the content in our web browsers.

  • client computers and devices
    Our desktops, laptops, touchscreen devices, hand-held and smartphone devices connect to the internet to access web servers for email, web pages, file transfers, etc. we do this via web browsers...

  • web browsers
    web browsers are software applications that allow our client devices to connect to the Internet. Browsers follow certain specifications and protocols to enable us to connect in a standard way - although each type of browser has its own peculiarities which is why things can appear quite different on different browser applications.

 

How does this all relate to Design for Digital Media?

If you understand all of the technologies that create our experiences as Internet users, then you can make intelligent design decisions when creating content for a target audience. For example, knowing how file size and pixel dimensions can affect download speeds, can influence your design decisions. Or, knowing what different browsers can do, will influence your design choices - particularly relevant for this third Assessment Task where you will be designing interfaces for both Desktop and Mobile devices. Also, it helps to know if you are designing static or dynamic content for the web as this will affect how many web pages you need to design, and how you will structure the content.

 

AGideas

Discuss sessions of AGIdeas, and other exhibitions attended over the last week

 

Introduction to Assessment Task 3 - Image gallery website project

Review the next assessment task - you should have begun researching good image gallery sites that work for desktop / smartphone or both interface types. This week, you will have time in class to write up your research and produce the word doc for the needs analysis. Make sure you have all of your links and other resources in class to complete the task. See the Assessment Task 3 document here.

 

Questions (to see if you looked at the references):

  • What was the first Web Browser software called?

  • What is the ARPANET?

  • Who is Tim Berners-Lee and what is he most famous for?

 

Lab: work on needs analysis

 

Today you will be working on the Needs Anaylsis for your image gallery designs.

This part of the brief has been defined in Assessment Task 3 as follows:

"Develop a needs analysis for an image gallery website and the different specifications required for desktop/mobile browsers. Discuss target audience, functionality, usability and UX (user experience).  Demonstrate extensive research and analysis of similar sites. Images to be created in Photoshop (captured from screen and edited in Photoshop), and placed into a Word/OpenOffice document alongside text content. Submit as PDF file."

You don't need to write a lot of text, just a paragraph or two for each section

You will need to have the following:

  1. What kinds of imagery will be in your gallery site?

  2. An idea of your target audience - who are the audience members for your image gallery?

  3. What are the device sizes and are they keyboard/mouse or touch-screen deviced? what are the usability and user experience (UX) requirements for the site? for example, is it a static image gallery or is it dynamic, allowing constant updates to the images? Can users comment on the images? Can they rate the images? Can users contribute to your image gallery or is it solely for your own content?

  4. A seletion of websites you have researched, that you can use to demonstrate good (and bad if you like) examples of image gallery designs that can work on desktop/mobile or both (see class 12 notes on Responsive Design )

  5. You can take image captures from the screen of the wbesites you have researched, and use this in your Word Doc alongside some brief text descritions of why you selected the site and how it relates to your proposed image gallery.

 

Outcomes by the end of class:

You should have a basic draft of your Needs Analysis by the end of class. Submit to me for comment, and then I'll give you feedback and you can progress to the next stage of the project.

 

Reading/viewing for next week:

Write a 2-3 paragraph review of AGIdeas, put it on your blog.

 

Other Things to Remember

You should have completed the following Assessment Tasks:

AT2 - Storyboard Trailer;

You should be continuing to work on the following Assessment Tasks:

AT1 - Blog (Keep adding entries to your blog)

Please see me in class if you are having any issues with assessment tasks. There will be time to work on these in class - think of the Lab session from 4-7pm as time to work on assessment tasks as well as class exercises, then you can ask me for help.