Module Handbook For Web Media 10

Module Handbook for
Web Media
(P01004) for MSc Digital Media Production
Academic Year 20
-1
Web Media (P00880)
Module Handbook for Web Media (P00880)

Author: Chris Jennings Date last edited: 31/08/10 Version 2.02
Web Media (P00880)
Introduction
The World Wide Web has become the de facto way to deliver content. This content, on web pages, can take the form of many different types of media; text, images, video, animation and audio. More recently, the development of techniques to deliver this content to screen based technologies involves the construction of dynamic web sites, which can be updated through content management systems. Further, this content can then be part of the participatory web; a place where content can be shared (subscribed to), commented upon (social media) and delivered to mobile devices. During this module, students will learn how to deliver a structured web site by separating content (the media) from presentation (the design). This module is delivered as part of the MSc Digital Media Production for the School of Technology at Oxford Brookes University. The web site for this course can be found at this URL: http://www.pagetoscreen.net/lectures/archive/C146/ Here you will find details for the scheduled sessions and links to further resources.
Delivery
This is an intense hands-on practical course. Teaching takes place in the IT Suite in the Tonge Building on the Headington Campus of Oxford Brookes University. Each session will consist of a lecture and demonstration by the lecturer (using computer and projector), and then assistance to individuals through a workshop class. There will be 11 of these sessions, from 9 to 12 am, on Mondays with an extra surgery sessions in week 12. Online help will be available through Screencasts and an online forum.
General:
Students are encouraged to develop their practical, hands-on skills through workshops and self directed study and are expected to deliver all their assignments electronically: on the web (space provided). The web site will be set up during week 1 and students will be given a username and password to access the system.
The Setup
The system that we use to deliver the web services is called ExpressionEngine and is installed on our server here at Brookes. The system uses a combination of PHP, MYSQL, HTML, CSS and JavaScript. However, you will NOT be expected to use any server-side scripting; only HTML and CSS. When set up, your site will be located somewhere like this: imedia.brookes.ac.uk/yourname/ You will be shown the various templates available to you and how to go about changing these to suite your own design. To begin with, the site will have NO
2
Web Media (P00880)
style. The home page of your site will be empty, apart from the basic title. Once you begin to post content to your site, this will be shown with the latest at the top. During the early part of the course you will be shown how to design your site with Photoshop, and then how to implement this design by editing the CSS template. You will also learn how to modify the templates to change settings such as the number of posts to display on the home page.
FTP access
We may also provide you with FTP access to the web server to upload files to a static area of your site. Your username and password will be the same as provided for the content management system.
Rationale for using this system

I am sometimes asked why dont we learn how to use Dreamweaver and how to build web sites this way? The main problem with simply building a static web site with Dreamweaver, is that it is very difficult to practise the design and construction of web pages unless you have content to put into the site. If you did have a lot of content straight away, then this might be a reasonable approach, but in my experience it is better to have a site where you can easily push in the content as you gather it, while, at the same time developing a look and feel for the site. So rather than build a web site with pretend content, we can use real material that we generate throughout the course. We will be using Dreamweaver to help build the styles for the site but using this software is not essential. Indeed, with the online dynamic system, you can edit your templates (styles and tags) wherever you can get access to the Internet.
Your Content
As you will see from the assignments set out below, you will be expected to post content to your site around 2 times per week. You will need to have, at least 20 items posted by the end of the course/semester. The content can include text (probably there should always be some text!), images (photos or edited images), videos (although these will need to be posted to YouTube first), audio (MP3 files are preferred).
What kind of thing should I post?

As you will learn in the first session; blogs (or weblogs) started as a means for people to share links (web sites URLs) that they have discovered during their browsing the web. This would certainly be a good starting point for you. Trawl the web for topics that interest you, or use the web to research ideas presented in the class (during this module or other modules on your course), and then post some details about your findings. Each week the course tutor will also set a topic to be considered for further investigation or an idea for an image. You may also set up (or already have) accounts with other social media sites such as Flickr or Twitter. You will have an opportunity to pull material from these sites on to your own.
Web Media (P00880)
The Assignments and marking allocation Assignment 1. Post entries (at least twice weekly) to your 'blog' (online journal).
You will be expected to have at least 20 posts by the end of the semester. Each post must include some form of media apart from text. Marks will be given for frequency of posts, evidence of research, and relevance to topic. Posts should make use of the structure provided; a clear title, introduction and further detail. There will be an opportunity for online comments by everyone. All posted material must be your own, although references and links to other web sites can be made. (See the copyright section below). Notes:
You must started posting to the blog in the first week, even though the style of the site will not be, as you would want initially. You can post to the blog from anywhere that you can use the Internet. You do not need to be within the university to login to your site. The site is public, so be careful what you say and the language that you use. It is possible to invite comments for each item posted although you will need to keep a look out for people who abuse this.
Mark allocation for this assignment Total=20%
Assignment 2. Design your site and personalise the blog templates by changing the CSS
Attention to detail is important. All selectors defined in the CSS template must have their attributes edited to achieve the desired appearance on the web pages. By using the external CSS template, you will naturally achieve consistency across all of your pages. The web site must validate to the appropriate level of XHTML; this validation will be worth 10 of the 60 marks - no validation no marks. The banner may be an image created with Photoshop or a graphic created with Flash. Notes:
To begin with your site will have no style. It will simply be delivered as the default appearance for your browser. However, the templates will deliver a structure to the home page and subsequent pages. The elements of the page will be tagged in a logical way and you will then learn how to create styles for those elements. A style template (a CSS file) will be provided as a starting point. You will learn how to create styles and build a look and feel for your site by using Photoshop (as a means to prototype the site) You will learn the basics of Dreamweaver to test the relationship between the mark-up and the styles, and to implement the logic to your site.
Web Media (P00880)
Assignment 3. An audio podcast

Working in a team of 3 or 4 you will create 3 episodes of an audio podcast to include an intro, outro, recording in the studio and recording in the field. One of the team will need to publish the episodes to the podcast area of the imedia site, with a common category for all episodes. This will result in an RSS feed for all of the class podcasts together. Each student will also make an entry in their blog explaining the idea for the podcasts and their own role in their creation. This should also link to the podcasts themselves but not republish them. Notes:
The 3 podcast episodes need to belong to a common theme or idea. This idea needs to be agreed by the team early in the semester for planning and scripting where necessary. Each episode should be no less than 10 minutes and no longer than 30 minutes. Each episode needs to be associated with an image, which is posted at the time as the audio. The audio needs to be saved as MP3 format.
Mark allocation for this assignment Total = 20%
Assignment Deadline
The deadline for completion of all of the web-based assignments is Tuesday 22 December 5pm. You must send an email AND post a final entry to your blog by this time. The email (to the course tutor) must announce the completion of the work.
Copyright
It is your responsibility to see that you have permission to use any material included on the site. You may quote other web sites, but you must NOT use content from other sites, as if it were your own. In other words, you MUST acknowledge your sources. Images from other web sites must NOT be used unless you have permission or the source includes proof that the images are in the public domain. You may use images from the web where there is a Creative Commons licence that allows, however, if the license is an attribution licence then you must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work). If you wish to use music or audio found on the web then this must be podsafe i.e.; in the public domain or be specifically available for use within podcasts.
Software Available on this Course

Photoshop for building a prototype web layout and for editing photographs. Dreamweaver for visualising web pages. Flash is also available for building a dynamic banner image (not taught) ExpressionEngine content management system Audacity for editing audio
Web Media (P00880) It is recommended that you install the (free) Web Developers toolbar for Firefox (a good quality browser web browser). Other browsers have similar free tools. Other software may be used as appropriate for video and audio editing.
Recommended Books
There are many books in the Brookes library on the various subjects covered during this module, but there are some that I particularly recommend. Some of the books may refer to earlier versions of the software (Creative suite CS4 rather than CS5). This shouldnt make a great deal of difference, but we will be adding books to the library after the publication of this guide.
Adobe Photoshop CS4 Classroom in a Book

Adobe Creative Team Published by: Adobe on November 2008
Cascading Style Sheets

Owen Briggs, Steven Champeon, Eric Costello, Matt Patterson Published by: FRIENDS OF ED on March 2004
Creating a Web Site with Flash CS4

David Morris Published by: Peachpit Press on December 2008
Designing with Web Standards

Jeffrey Zeldman Published by: New Riders on June 2003
Dreamweaver CS4: The Missing Manual

David McFarland Published by: Pogue Press on December 2008
Layers: The Complete Guide to Photoshops Most Powerful Feature

Matt Kloskowski Published by: Peachpit Press on February 2008
Photoshop CS4: Essential Skills

Mark Galer, Philip Andrews Published by: Focal Press on December 2008
Secrets of Podcasting
Bart G. Farkas Published by: Peachpit Press on August 2005
Web Media (P00880)
The Art and Science of Web Design

Jeffrey Veen Published by: New Riders on January 2001
The Weblog Handbook

Rebecca Blood Published by: Perseus Books, U.S. on June 2002
The ZEN of CSS Design

Dave Shea, Molly E. Holzschlag Published by: Peachpit Press on March 2005
Web Design in a Nutshell

Aaron Gustafson Published by: O'Reilly Media, Inc. on February 2006
Further information about books

You can see more detail on my web site here: www.pagetoscreen.net/bookshelf/C161/
Recommended Web sites

I publish links on my own site so you can see all the relevant links here: www.pagetoscreen.net/iSaw/C163/
Other Resources
Screencasts for this course can be found here: www.pagetoscreen.net/screencasts/C164/
Web Media (P00880)
Weekly Programme
Note: You can find the latest version of this calendar on the web site here - www.pagetoscreen.net/lectures/archive/C146 Note: All sessions take place in the Tonge IT Suite, Brookes, Gipsy Lane, Oxford Note: Subject to change, but you will be informed!
Monday, September 27, 2010

Blogging and other similar web technologies During this session we look at the basics of blogging as a way to deliver content to a web site. Each student will be given a web space and a blog. From this day, students will be able to post items to their blog using a basic template but without styling. The lecture will consider Social Media and the following topics:
What is Blogging? The assignments for this unit of the course The basics of the assignments and how you will develop your skills Some examples of students' work from previous years Posting to Your blog Types of Content that you can use The structure of the given site and the component pages
Monday, October 04, 2010

Designing for the WEB and Creating a Look and Feel with Photoshop In this session we are going to look at Photoshop as a means to build a web site prototype. We will use:
Layers Text
The objective is to build a home page for our blog as a graphic in Photoshop so we can use this visual to build a web page with HTML and CSS. We will create the image in Photoshop; keeping this version with layers, and then save as a web compatible image to post on our blog for all to see.
Crafting the look Keeping it simple Structures The web browser window Deconstructing a few examples Arranging stuff in a rectangular space
Note: Each student will create at least one proposed layout for his or her site ready for next week. This will be posted on each persons site and then critiqued during the following week.
Web Media (P00880)

Separating Style and Content with CSS The basics of delivering web content by styling with CSS.
Stylesheets
CSS Structure of an HTML document Mark up and HTML Styling your 'Blog' by modifying the CSS

Introducing Dreamweaver From our Photoshop 'comps' we will create a sample page in HTML and use CSS to style according to our prototype. Dreamweaver comes as part of the Adobe Creative suite CS5 and is installed on our computers.

Template Editing using Dreamweaver We may be using ExpressionEngine to manage the content but it is possible to use Dreamweaver to help us define the look of our site. We can take the existing templates and make modifications to the CSS. During this session we will look at Dreamweaver and ExpressionEngine in combination and then make changes to our CSS. This will enable us to change the appearance of our 'blog' and other pages - we will also look and Dreamweaver techniques in general.
Monday, November 01, 2010

Multimedia Blog Content How to add more than just text and images to the blog entries

Mashups Adding content from other sites by using RSS feeds and APIs. We will look at Twitter, Facebook, Flickr, Google Maps, Amazon, YouTube and RSS feeds.

Introducing Podcasting How to create audio content and publish on the web as a series of episodes.

9
What is a podcast? Some examples Ideas for the Podcast assignment
Web Media (P00880) Convergent media on the web What is RSS? How to add a Podcast to your web site (first introduction)

Banner Image For this session we will focus on the banner of your web site. We will use Photoshop layers to create 2 images; one for the page layout and another for the background of the CSS. We will learn about the PNG image format that makes use of transparency

More on Podcasting How to publish the podcasts with RSS.
Adding a RSS feed to your web site Preparing the audio to be 'web friendly' Using the 'enclosure' technique to include the audio file Adding show notes Making the podcast subscribable
Monday, December 06, 2010

More on Markup including RSS and Validation Looking in detail at markup and how to publish an RSS feed.

CSS and XHTML Semantic markup Lists as menus Common browser problems and using CSS 'Hacks' RSS and how to to add an RSS feed to your blog Validating your CODE

Surgery Session | Blog templates, Photoshop and More There will be no formal lecture on this day. Just help with any technical issues as needed. Other times may also be available during this week.
10
Web Media (P00880)
Appendix 1
The home page HTML with some sample entries:

Note: yourname will substituted with the your last name which is also in your URL. Thus imedia.brookes.ac.uk/yourname is your home page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>yourname</title> <link rel='stylesheet' type='text/css' media='all' href='http://imedia.brookes.ac.uk/?css=yourname/basic_css' />   </head> <body> <div id=everything> <div id="banner"> <h1 class="blogtitle"><a href="http://imedia.brookes.ac.uk/yourname/" title="home page">Yourname</a></h1> </div> <div id="wrapper"> <div id="sidebar"> <div class="box"> <p><a href="http://imedia.brookes.ac.uk/admin/" title="go to the control panel to publish and edit">Publish.Edit</a> | <a href="http://imedia.brookes.ac.uk/?ACT=10">Log Out</a></p> <h3 class="sidetitle">About</h3> <p>Just edit this text in the template (about) and this will then appear on all pages.</p> </div> <div class="altbox"> <h3 class="sidetitle">Categories</h3> <ul> <li><a href="http://imedia.brookes.ac.uk/yourname/C1/">Blogging</a></li> <li><a href="http://imedia.brookes.ac.uk/yourname/C10/">Learning</a></li> <li><a href="http://imedia.brookes.ac.uk/yourname/C25/">Publishing</a></li> </ul> </div> <div class="box"> <h3 class="sidetitle">Monthly Archives</h3> <ul> <li><a href="http://imedia.brookes.ac.uk/yourname/2009/08/">August 2009</a></li>
11
Web Media (P00880)
<li><a href="http://imedia.brookes.ac.uk/yourname/archives/">Complete Archives</a></li> <li><a href="http://imedia.brookes.ac.uk/yourname/categories/">Category Archives</a></li> </ul> </div> <div class="altbox"> <h3 class="sidetitle">Most Recent Entries</h3> <ul> <li><a href="http://imedia.brookes.ac.uk/yourname/entry/new_stuff_yt/">New stuff YT</a></li> <li><a href="http://imedia.brookes.ac.uk/yourname/entry/super/">super</a></li> </ul> </div> <div class="box"> <form method="post" action="http://imedia.brookes.ac.uk/" > <div class='hiddenFields'> <input type="hidden" name="ACT" value="19" /> <input type="hidden" name="XID" value="e02ad7c6920a56e8de017fd9d7676cb155f85f4a" /> <input type="hidden" name="RP" value="search/results" /> <input type="hidden" name="NRP" value="" /> <input type="hidden" name="RES" value="" /> <input type="hidden" name="status" value="" /> <input type="hidden" name="weblog" value="yourname" /> <input type="hidden" name="search_in" value="everywhere" /> <input type="hidden" name="where" value="all" /> <input type="hidden" name="site_id" value="1" /> </div> <h2 class="sidetitle">Search</h2> <p><input type="text" name="keywords" value="" class="input" size="18" maxlength="100" /></p> <p><input type="submit" value="submit" class="submit" /></p> </form> </div> </div> <div id="content"> <div class=entry> <p class="date"> Friday, August 28, 2009 </p> <h2 class="title">New stuff YT</h2> 
12
Web Media (P00880)
<div class=entry> <p class="date"> Thursday, August 27, 2009 </p> <h2 class="title">super</h2>  <div class="paginate"> <span class="pagecount">Page 1 of 1 pages</span> </div> </div> <div id="footer"> <p><a href="http://imedia.brookes.ac.uk/admin/" title="go to the control panel to publish and edit">Control Panel</a> | <a href="http://imedia.brookes.ac.uk/member/profile/">Your Account</a></p> </div> </div> </div>> </body> </html>
13
Web Media (P00880)
An example CSS template defining the elements used in the HTML markup above:
Note: by default your set up will have a css file linked just as this one. Note: Syntax in CSS is very particular! Miss out a curly bracket or semi-colon and you may not see any styles at all.
* ----------------------------------------------------------------------basic optional styles for Web Media blog in ExpressionEngine - feel free to change ----------------------------------------------------------------------- */ body { margin: 0; padding: 0; background: #C9DFD8; color: #000; font-family: verdana, arial, helvetica, sans-serif; } #everything { width: 750px; margin: 0 auto; } h1, h2, h3 { font-family: georgia, "times new roman", times, serif; } h4 { font-family: "lucida grande", verdana, arial, helvetica, sans-serif; margin-bottom: 4px; } .center { text-align: center; } blockquote { font-family: georgia, "times new roman", times, serif; } ul { list-style: square; margin: 2px 0 3px 1em; padding-left: 1em; } li { background: transparent; font-family: "lucida grande", verdana, arial, sans-serif; color: #333; } img { margin: 0;
14
Web Media (P00880)
padding: 0; border: 0; } /* standard links */ a:link { border-bottom: 1px solid #8fbc8f; background-color: transparent; text-decoration: none; color: #003967; } a:visited { border: 0; background-color: transparent; text-decoration: none; color: #003967; } a:hover { border: 0; background-color: #8fbc8f; text-decoration: none; color: #eee; } a:active { border: 0; background-color: #8fbc8f; text-decoration: none; color: #eee; } #wrapper { background: white url(http://imedia.brookes.ac.uk/themes/site_themes/basic/images/wrapperback. jpg) repeat-y right; border-right: 1px solid silver; border-left: 1px solid silver; padding: 0; } #footer { margin: 0; padding: 0 6px; font-size: .7em; line-height: 1.1em; clear: both; border-top: 1px solid green; border-bottom: 1px solid silver; background: #CCD6D2; } #content { margin: 0 225px 0 0; padding: 5px 10px;
15
Web Media (P00880)
font-size: 75%; line-height: 180%; background: transparent; color: #000; border-right: 0px solid silver; } .entry { border-bottom: 1px solid green; clear:left; } #sidebar { float: right; width: 225px; background: transparent; padding-top: 6px; color: #000; border-left: 0px solid silver; } .date { font-size: 100%; background: transparent; color: #000; } h1.blogtitle { font-size: 3.5em; padding:0; margin:0; text-align:center; } #banner { color: white; background: #4A6A56; height: 125px; border-bottom: 1px solid green; border-right: 1px solid silver; border-left: 1px solid silver; padding: 0; } .blogtitle a { color: white; border: 0; } .title { font-size: 170%; background: transparent; border-bottom: 1px solid silver; color: #0D6654; } .posted { margin-top: 10px; margin-bottom: 3px; font-size: .9em; }
16
Web Media (P00880)
.sidetitle { margin: 10px 0; font-size: 125%; background: transparent; color: #2E8B57; } .box { margin: 0; padding: 0 8px 6px 8px; background: transparent; font-size: 70%; line-height: 170%; color: #000; } .altbox { margin: 0; padding: 0 8px 6px 8px; background: #e7f5e8; font-size: 70%; line-height: 170%; color: #000; } .paginate { font-family: Verdana, Geneva, Tahoma, "Trebuchet MS", Arial, Sansserif; font-size: 12px; font-weight: normal; letter-spacing: .1em; padding: 10px 6px 10px 4px; margin: 0; background-color: transparent; } .pagecount { font-family: Verdana, Geneva, Tahoma, "Trebuchet MS", Arial, Sansserif; font-size: 10px; color: #666; font-weight: normal; background-color: transparent; } .input { border-top: 1px solid #999999; border-left: 1px solid #999999; background-color: #fff; color: #000; font-family: Verdana, Geneva, Tahoma, "Trebuchet MS", Arial, Sansserif; font-size: 11px; height: 1.6em; padding: .3em 0 0 2px; margin-top: 6px; margin-bottom: 3px;
17
Web Media (P00880)
} .textarea { border-top: border-left: background-color: color: font-family: serif; font-size: margin-top: margin-bottom: } .checkbox { background-color: margin: padding: border: } .submit { background-color: font-family: font-size: font-weight: letter-spacing: padding: margin-top: margin-bottom: text-transform: color: }
1px solid #999999; 1px solid #999999; #fff; #000; Verdana, Geneva, Tahoma, "Trebuchet MS", Arial, Sans11px; 3px; 3px;
transparent; 3px; 0; 0;
#fff; Arial, Verdana, Sans-serif; 11px; normal; .1em; 1px 3px 1px 3px; 6px; 4px; uppercase; #000;
/* ----------------------------------------------------------------------you can change the way pictures appear in the entry here */ .picture { float: left; padding: 3px; margin: 5px 10px 0 0; border: 1px solid silver; } .picture img { display: block;
}
18
Web Media (P00880)
The basic HTML mark-up of the home page

<html> <head> <title>Title of this page</title> </head> <body> <div id="everything"> <div id="banner"> <h1 class="blogtitle">The title of your blog</h1> </div> <div id="wrapper"> <div id="sidebar"> <div class="box"> <h3 class="sidetitle">This would provide a heading</h3> <p>And some text</p> </div> <div class="altbox"> <h3 class="sidetitle">Categories</h3> <ul> <li>list item</li> </ul> </div> </div><!-end of sidebar -->
<div id="content"> <div class="entry"> <p class="date">a date in here</p> <h2 class="title">Some title</h2> <div class="picture"> <img src="http://imedia.brookes.ac.uk/imageshare/P1030965_thumb.jpg" alt="blogimage" width="300" height="225" /> </div> <p>some text</p> </div> <div class="paginate"> <span class="pagecount">Page 1 of 1 pages</span> </div> </div> <div id="footer"> </div> </div> </div> </body> </html>
19
Web Media (P00880)
Schematic, showing structure of the home page
Note: The above diagram does NOT represent appearance, only the structure of the component parts and their relationship to each other (parent, child, sibling).
20
Web Media (P00880)
Appendix 2: Module definition

MSc Digital Media Production
Module Number: Module Title: Module Leader: P00880 Web Media Chris Jennings
Module Description:
This module will provide you with an understanding of the processes and practices by which content can be generated and manipulated in digital form and then published to the World Wide Web. You will have an opportunity to develop a blog and build an on-line portfolio of work to include digital text, images and audio. You will be introduced to a range of topics including the theory of interactive media and an introduction to some of the techniques employed to create digital. M Level Credits: Module Status: Prerequisites: Placing: Restrictions: Exclusions: Timetable slotting: 20 Compulsory module for MSc Digital Media Production None semester 1 None None. Monday mornings in the IT suite (Tonge)
Content:
The module will concentrate upon the processes involved in the generation or gathering and manipulation of content in digital form on the computer and publishing to the web. You will consider the computer both as a tool and a medium. Instruction will be aimed at making possible an informed consideration of the techniques used. You will be expected to gain experience in the presentation of ideas to an audience of peers, the articulation of a reaction to such critiques, and the ability to usefully critique the work of others
Learning Outcomes
When you have successfully completed this module, you will have worked to achieve the following learning outcomes:
21
Web Media (P00880)
Knowledge and understanding

1. Appreciate the specifics or peculiarities of digital media on the web and understand the implications; 2. Articulate and communicate fundamental issues and theories relevant to a broad concept of web media; 3. Employ an understanding of the requirements of web delivery (the implications of design, usability, image resolution, colour depth, bandwidth etc.);
Disciplinary/professional skills
4. Employ an understanding of the appropriateness of different digital file formats for various purposes; 5. Apply the principles of good web site design; 6. Employ a technical vocabulary associated with digital media
Transferable skills (T=taught, P=Practised, A=assessed)

7. Self-management An ability to clarify personal values, appraise your own performance through a process of critical self-reflection, set and organise personal objectives, and work to briefs and deadlines. (P) 8. Learning Skills An ability to identify and appraise personal learning strategies to work independently and co-operatively, using library and ICT skills to access and manage information, and a range of academic skills to research, interpret, analyse, synthesise and summarise this information. (P) 9. Communication An ability to express ideas and opinions in written, oral, and visual forms to a variety of audiences for a variety of purposes using appropriate language and media, as well as the ability to listen actively so as to be able to participate in and learn from discussion, and the ability to persuade rationally, through negotiating and asserting one's own values, while respecting other people's values. (TPA) 10. Teamwork An ability to work productively in a group by taking responsibility, and carrying out agreed tasks; an ability to work within a team in a supportive role; an ability to evaluate and appraise team performance, and take the initiative and lead others. (TPA) 11. Problem solving An ability to apply knowledge, understanding and experience to identify and deal with a problem; an ability to analyse and think laterally about a problem and its solution; as well as an ability not only to be able to come up with strategic options, but to be able to evaluate the success of different strategies. (TPA) 12. Information and Communications Technology An ability to use ICT as a communication and learning tool, as well as a tool for accessing and managing information, and for presenting this information and related ideas; and an ability to use specialist software where relevant to the discipline. (TPA)
Teaching and Learning Experience

Much of the learning takes place in the ICT room with interactive presentations. The assignments for this module requires that you read relevant texts and review existing web site and work through the assignments using software provided by Brookes University or your own, if preferred:
22
Web Media (P00880)
When you have completed this module, you will have been given the opportunity to:
Attend workshops designed to instruct in the uses of the systems available in the areas relevant to the modules objectives. Consider explanations of the technology and terminology associated with web media Explore of key concepts of interactivity, non-linearity and non-sequentiality, design and usability Participate in interactive lectures designed to present examples of existing work in the relevant areas, to serve as reference points for the conception of student project work. Produce content relevant to the objectives of the course
Expected class contact 20 hours lectures 16 hours workshops
Assessment: The assessment of this module is through 100% coursework. There are 3 components to this coursework: You will be provided with a blog (online journal) and will be expected to post relevant news or ideas (text and other media) at least twice weekly. You will be expected to personalise the blog by making modifications to the style. You will create (at least) 3 episodes of an audio podcast. You will use recording and editing techniques to publish these podcasts to your web site. Assignments and learning outcomes: Assignment: Coursework Example 1 2 3 Percentage Learning Outcomes 1,2,3,6,9,12 3,4,5,7 1,10,11 60% 20%
Post entries to an online journal: 20% Personalise the blog templates: The Podcast (team assignment)
Assignment Feedback and Marking Feedback on the web design given in week 3 will be given by email (or web comments) by week 4. The course tutor will assess all other assignments during the early part of January. Feedback will be given after the examination meeting (usually around 20 January).
Evaluation of this Module

At the end of the module, an online evaluation form will be set up so that students can give feedback to the course tutor on the delivery and outcomes of the course.
23
Web Media (P00880)
Contact Details
The course tutor (Chris Jennings) can be contacted by email at this address: chris.jennings@brookes.ac.uk To ask for technical support, it is better that you use the forum (http://imedia.brookes.ac.uk/webmediaforums/) so that others may learn from both the question and the answer! Note: You will need to be logged into your site to use the forum.
IT suite in the Tonge Building Availability

This room is available until 9pm during the semester; however, the room is used for teaching on most weekdays.
Computers
All of the computers (PCs) have the version CS5 of the Adobe Creative Suite installed. You will also find Audacity a basic sound editing tool. Note: If you find any problems with any of the computers in this room, please report this by writing a note in the fault report book, which you will find at the end of the room furthest from the main access door.
24
Web Media (P00880)
Appendix 3: Mark sheet and criteria

Note: Please use this a check sheet for the assignments Deadline for the assignments is: 22 December 2009
Assignment details and marksheet.

Assignment Blog Posts What I expect Post entries (at least twice weekly) to your 'blog' (online journal). You must post at least 20 times over the semester, use pictures and the extended text field. For content, anything goes but consider the kinds of things that are happening on the course. Frequency of posts Research Clarity of title and structure of posts Topics Use of Media Weighting 20%
Comments Design of your site Through changes to the CSS and the HTML templates, you will redesign the blog to your own preference. You will need to make significant changes to the layout and you must change the banner to suite your site. All pages must validate and be consistent. I expect this to work in all current browsers Firefox and Internet Explorer. prototype delivered in week 3 (built with Photoshop) Banner Typography Use of colour Alignment of elements overall design accessibility (consistency, readability, Google search ability etc.) CSS Validation
Mark /20 60%
Comments Podcasts Working in a team of 3 or 4 you will create 3 episodes of an audio podcast to include an intro, outro, recording in the studio and recording in the field Concept of series/episodes Intro and Outro Quality of audio playback Associated permalink web page Role of individual Comments Overall Mark
Mark /60 20%
Mark /20 %

25
Web Media (P01004)
Module Handbook for Web Media (P01004)

Author: Chris Jennings Date last edited: 21/09/10 Version 2.02a
Web Media (P01004)
Introduction
The World Wide Web has become the de facto way to deliver content. This content, on web pages, can take the form of many different types of media; text, images, video, animation and audio. More recently, the development of techniques to deliver this content to screen based technologies involves the construction of dynamic web sites, which can be updated through content management systems. Further, this content can then be part of the participatory web; a place where content can be shared (subscribed to), commented upon (social media) and delivered to mobile devices. During this module, students will learn how to deliver a structured web site by separating content (the media) from presentation (the design). This module is delivered as part of the MSc Digital Media Production for the School of Technology at Oxford Brookes University. The web site for this course can be found at this URL: http://www.pagetoscreen.net/lectures/archive/C146/ Here you will find details for the scheduled sessions and links to further resources.
Delivery
This is an intense hands-on practical course. Teaching takes place in the IT Suite in the Tonge Building on the Headington Campus of Oxford Brookes University. Each session will consist of a lecture and demonstration by the lecturer (using computer and projector), and then assistance to individuals through a workshop class. There will be 11 of these sessions, from 9 to 1pm, on Mondays with an extra surgery sessions in week 12. Online help will be available through Screencasts and an online forum.
General:
Students are encouraged to develop their practical, hands-on skills through workshops and self directed study and are expected to deliver all their assignments electronically: on the web (space provided). The web site will be set up during week 1 and students will be given a username and password to access the system.
The Setup
The system that we use to deliver the web services is called ExpressionEngine and is installed on our server here at Brookes. The system uses a combination of PHP, MYSQL, HTML, CSS and JavaScript. However, you will NOT be expected to use any server-side scripting; only HTML and CSS. When set up, your site will be located somewhere like this: imedia.brookes.ac.uk/yourname/ You will be shown the various templates available to you and how to go about changing these to suite your own design. To begin with, the site will have NO
2
Web Media (P01004)
style. The home page of your site will be empty, apart from the basic title. Once you begin to post content to your site, this will be shown with the latest at the top. During the early part of the course you will be shown how to design your site with Photoshop, and then how to implement this design by editing the CSS template. You will also learn how to modify the templates to change settings such as the number of posts to display on the home page.
FTP access
We may also provide you with FTP access to the web server to upload files to a static area of your site. Your username and password will be the same as provided for the content management system.
Rationale for using this system

I am sometimes asked why dont we learn how to use Dreamweaver and how to build web sites this way? The main problem with simply building a static web site with Dreamweaver, is that it is very difficult to practise the design and construction of web pages unless you have content to put into the site. If you did have a lot of content straight away, then this might be a reasonable approach, but in my experience it is better to have a site where you can easily push in the content as you gather it, while, at the same time developing a look and feel for the site. So rather than build a web site with pretend content, we can use real material that we generate throughout the course. We will be using Dreamweaver to help build the styles for the site but using this software is not essential. Indeed, with the online dynamic system, you can edit your templates (styles and tags) wherever you can get access to the Internet.
Your Content
As you will see from the assignments set out below, you will be expected to post content to your site around 2 times per week. You will need to have, at least 20 items posted by the end of the course/semester. The content can include text (probably there should always be some text!), images (photos or edited images), videos (although these will need to be posted to YouTube first), audio (MP3 files are preferred).
What kind of thing should I post?

As you will learn in the first session; blogs (or weblogs) started as a means for people to share links (web sites URLs) that they have discovered during their browsing the web. This would certainly be a good starting point for you. Trawl the web for topics that interest you, or use the web to research ideas presented in the class (during this module or other modules on your course), and then post some details about your findings. Each week the course tutor will also set a topic to be considered for further investigation or an idea for an image. You may also set up (or already have) accounts with other social media sites such as Flickr or Twitter. You will have an opportunity to pull material from these sites on to your own.
Web Media (P01004)
The Assignments and marking allocation Assignment 1. Post entries (at least twice weekly) to your 'blog' (online journal).
You will be expected to have at least 20 posts by the end of the semester. Each post must include some form of media apart from text. Marks will be given for frequency of posts, evidence of research, and relevance to topic. Posts should make use of the structure provided; a clear title, introduction and further detail. There will be an opportunity for online comments by everyone. All posted material must be your own, although references and links to other web sites can be made. (See the copyright section below). Notes:
You must started posting to the blog in the first week, even though the style of the site will not be, as you would want initially. You can post to the blog from anywhere that you can use the Internet. You do not need to be within the university to login to your site. The site is public, so be careful what you say and the language that you use. It is possible to invite comments for each item posted although you will need to keep a look out for people who abuse this.
Assignment 2. Design your site and personalise the blog templates by changing the CSS
Attention to detail is important. All selectors defined in the CSS template must have their attributes edited to achieve the desired appearance on the web pages. By using the external CSS template, you will naturally achieve consistency across all of your pages. The web site must validate to the appropriate level of XHTML; this validation will be worth 10 of the 60 marks - no validation no marks. The banner may be an image created with Photoshop or a graphic created with Flash. Notes:
To begin with your site will have no style. It will simply be delivered as the default appearance for your browser. However, the templates will deliver a structure to the home page and subsequent pages. The elements of the page will be tagged in a logical way and you will then learn how to create styles for those elements. A style template (a CSS file) will be provided as a starting point. You will learn how to create styles and build a look and feel for your site by using Photoshop (as a means to prototype the site) You will learn the basics of Dreamweaver to test the relationship between the mark-up and the styles, and to implement the logic to your site.
Web Media (P01004)
Assignment 3. An audio podcast

Working in a team of 3 or 4 you will create 3 episodes of an audio podcast to include an intro, outro, recording in the studio and recording in the field. One of the team will need to publish the episodes to the podcast area of the imedia site, with a common category for all episodes. This will result in an RSS feed for all of the class podcasts together. Each student will also make an entry in their blog explaining the idea for the podcasts and their own role in their creation. This should also link to the podcasts themselves but not republish them. Notes:
The 3 podcast episodes need to belong to a common theme or idea. This idea needs to be agreed by the team early in the semester for planning and scripting where necessary. Each episode should be no less than 10 minutes and no longer than 30 minutes. Each episode needs to be associated with an image, which is posted at the time as the audio. The audio needs to be saved as MP3 format.
Mark allocation for this assignment Total = 20%
Assignment Deadline
The deadline for completion of all of the web-based assignments is Tuesday 22 December 5pm. You must send an email AND post a final entry to your blog by this time. The email (to the course tutor) must announce the completion of the work.
Copyright
It is your responsibility to see that you have permission to use any material included on the site. You may quote other web sites, but you must NOT use content from other sites, as if it were your own. In other words, you MUST acknowledge your sources. Images from other web sites must NOT be used unless you have permission or the source includes proof that the images are in the public domain. You may use images from the web where there is a Creative Commons licence that allows, however, if the license is an attribution licence then you must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work). If you wish to use music or audio found on the web then this must be podsafe i.e.; in the public domain or be specifically available for use within podcasts.
Software Available on this Course

Photoshop for building a prototype web layout and for editing photographs. Dreamweaver for visualising web pages. Flash is also available for building a dynamic banner image (not taught) ExpressionEngine content management system Audacity for editing audio
Web Media (P01004) It is recommended that you install the (free) Web Developers toolbar for Firefox (a good quality browser web browser). Other browsers have similar free tools. Other software may be used as appropriate for video and audio editing.
Recommended Books
There are many books in the Brookes library on the various subjects covered during this module, but there are some that I particularly recommend. Some of the books may refer to earlier versions of the software (Creative suite CS4 rather than CS5). This shouldnt make a great deal of difference, but we will be adding books to the library after the publication of this guide.
Adobe Photoshop CS4 Classroom in a Book

Adobe Creative Team Published by: Adobe on November 2008
Cascading Style Sheets

Owen Briggs, Steven Champeon, Eric Costello, Matt Patterson Published by: FRIENDS OF ED on March 2004
Creating a Web Site with Flash CS4

David Morris Published by: Peachpit Press on December 2008
Designing with Web Standards

Jeffrey Zeldman Published by: New Riders on June 2003
Dreamweaver CS4: The Missing Manual

David McFarland Published by: Pogue Press on December 2008
Layers: The Complete Guide to Photoshops Most Powerful Feature

Matt Kloskowski Published by: Peachpit Press on February 2008
Photoshop CS4: Essential Skills

Mark Galer, Philip Andrews Published by: Focal Press on December 2008
Secrets of Podcasting
Bart G. Farkas Published by: Peachpit Press on August 2005
Web Media (P01004)
The Art and Science of Web Design

Jeffrey Veen Published by: New Riders on January 2001
The Weblog Handbook

Rebecca Blood Published by: Perseus Books, U.S. on June 2002
The ZEN of CSS Design

Dave Shea, Molly E. Holzschlag Published by: Peachpit Press on March 2005
Web Design in a Nutshell

Aaron Gustafson Published by: O'Reilly Media, Inc. on February 2006
Further information about books

You can see more detail on my web site here: www.pagetoscreen.net/bookshelf/C161/
Recommended Web sites

I publish links on my own site so you can see all the relevant links here: www.pagetoscreen.net/iSaw/C163/
Other Resources
Screencasts for this course can be found here: www.pagetoscreen.net/screencasts/C164/
Web Media (P01004)
Weekly Programme
Note: You can find the latest version of this calendar on the web site here - www.pagetoscreen.net/lectures/archive/C146 Note: All sessions take place in the Tonge IT Suite, Brookes, Gipsy Lane, Oxford Note: Subject to change, but you will be informed!
Monday, September 27, 2010

Blogging and other similar web technologies During this session we look at the basics of blogging as a way to deliver content to a web site. Each student will be given a web space and a blog. From this day, students will be able to post items to their blog using a basic template but without styling. The lecture will consider Social Media and the following topics:
What is Blogging? The assignments for this unit of the course The basics of the assignments and how you will develop your skills Some examples of students' work from previous years Posting to Your blog Types of Content that you can use The structure of the given site and the component pages

Designing for the WEB and Creating a Look and Feel with Photoshop In this session we are going to look at Photoshop as a means to build a web site prototype. We will use:
Layers Text
The objective is to build a home page for our blog as a graphic in Photoshop so we can use this visual to build a web page with HTML and CSS. We will create the image in Photoshop; keeping this version with layers, and then save as a web compatible image to post on our blog for all to see.
Crafting the look Keeping it simple Structures The web browser window Deconstructing a few examples Arranging stuff in a rectangular space
Note: Each student will create at least one proposed layout for his or her site ready for next week. This will be posted on each persons site and then critiqued during the following week.
Web Media (P01004)

Separating Style and Content with CSS The basics of delivering web content by styling with CSS.
Stylesheets
CSS Structure of an HTML document Mark up and HTML Styling your 'Blog' by modifying the CSS

Introducing Dreamweaver From our Photoshop 'comps' we will create a sample page in HTML and use CSS to style according to our prototype. Dreamweaver comes as part of the Adobe Creative suite CS5 and is installed on our computers.

Template Editing using Dreamweaver We may be using ExpressionEngine to manage the content but it is possible to use Dreamweaver to help us define the look of our site. We can take the existing templates and make modifications to the CSS. During this session we will look at Dreamweaver and ExpressionEngine in combination and then make changes to our CSS. This will enable us to change the appearance of our 'blog' and other pages - we will also look and Dreamweaver techniques in general.

Multimedia Blog Content How to add more than just text and images to the blog entries

Mashups Adding content from other sites by using RSS feeds and APIs. We will look at Twitter, Facebook, Flickr, Google Maps, Amazon, YouTube and RSS feeds.

Introducing Podcasting How to create audio content and publish on the web as a series of episodes.

9
What is a podcast? Some examples Ideas for the Podcast assignment
Web Media (P01004) Convergent media on the web What is RSS? How to add a Podcast to your web site (first introduction)

Banner Image For this session we will focus on the banner of your web site. We will use Photoshop layers to create 2 images; one for the page layout and another for the background of the CSS. We will learn about the PNG image format that makes use of transparency

More on Podcasting How to publish the podcasts with RSS.
Adding a RSS feed to your web site Preparing the audio to be 'web friendly' Using the 'enclosure' technique to include the audio file Adding show notes Making the podcast subscribable

More on Markup including RSS and Validation Looking in detail at markup and how to publish an RSS feed.

CSS and XHTML Semantic markup Lists as menus Common browser problems and using CSS 'Hacks' RSS and how to to add an RSS feed to your blog Validating your CODE

Surgery Session | Blog templates, Photoshop and More There will be no formal lecture on this day. Just help with any technical issues as needed. Other times may also be available during this week.
10
Web Media (P01004)
Appendix 1
The home page HTML with some sample entries:

Note: yourname will substituted with the your last name which is also in your URL. Thus imedia.brookes.ac.uk/yourname is your home page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>yourname</title> <link rel='stylesheet' type='text/css' media='all' href='http://imedia.brookes.ac.uk/?css=yourname/basic_css' />   </head> <body> <div id=everything> <div id="banner"> <h1 class="blogtitle"><a href="http://imedia.brookes.ac.uk/yourname/" title="home page">Yourname</a></h1> </div> <div id="wrapper"> <div id="sidebar"> <div class="box"> <p><a href="http://imedia.brookes.ac.uk/admin/" title="go to the control panel to publish and edit">Publish.Edit</a> | <a href="http://imedia.brookes.ac.uk/?ACT=10">Log Out</a></p> <h3 class="sidetitle">About</h3> <p>Just edit this text in the template (about) and this will then appear on all pages.</p> </div> <div class="altbox"> <h3 class="sidetitle">Categories</h3> <ul> <li><a href="http://imedia.brookes.ac.uk/yourname/C1/">Blogging</a></li> <li><a href="http://imedia.brookes.ac.uk/yourname/C10/">Learning</a></li> <li><a href="http://imedia.brookes.ac.uk/yourname/C25/">Publishing</a></li> </ul> </div> <div class="box"> <h3 class="sidetitle">Monthly Archives</h3> <ul> <li><a href="http://imedia.brookes.ac.uk/yourname/2009/08/">August 2009</a></li>
11
Web Media (P01004)

<li><a href="http://imedia.brookes.ac.uk/yourname/archives/">Complete Archives</a></li> <li><a href="http://imedia.brookes.ac.uk/yourname/categories/">Category Archives</a></li> </ul> </div> <div class="altbox"> <h3 class="sidetitle">Most Recent Entries</h3> <ul> <li><a href="http://imedia.brookes.ac.uk/yourname/entry/new_stuff_yt/">New stuff YT</a></li> <li><a href="http://imedia.brookes.ac.uk/yourname/entry/super/">super</a></li> </ul> </div> <div class="box"> <form method="post" action="http://imedia.brookes.ac.uk/" > <div class='hiddenFields'> <input type="hidden" name="ACT" value="19" /> <input type="hidden" name="XID" value="e02ad7c6920a56e8de017fd9d7676cb155f85f4a" /> <input type="hidden" name="RP" value="search/results" /> <input type="hidden" name="NRP" value="" /> <input type="hidden" name="RES" value="" /> <input type="hidden" name="status" value="" /> <input type="hidden" name="weblog" value="yourname" /> <input type="hidden" name="search_in" value="everywhere" /> <input type="hidden" name="where" value="all" /> <input type="hidden" name="site_id" value="1" /> </div> <h2 class="sidetitle">Search</h2> <p><input type="text" name="keywords" value="" class="input" size="18" maxlength="100" /></p> <p><input type="submit" value="submit" class="submit" /></p> </form> </div> </div> <div id="content"> <div class=entry> <p class="date"> Friday, August 28, 2009 </p> <h2 class="title">New stuff YT</h2> 
12
Web Media (P01004)

<div class=entry> <p class="date"> Thursday, August 27, 2009 </p> <h2 class="title">super</h2>  <div class="paginate"> <span class="pagecount">Page 1 of 1 pages</span> </div> </div> <div id="footer"> <p><a href="http://imedia.brookes.ac.uk/admin/" title="go to the control panel to publish and edit">Control Panel</a> | <a href="http://imedia.brookes.ac.uk/member/profile/">Your Account</a></p> </div> </div> </div>> </body> </html>
13
Web Media (P01004)
An example CSS template defining the elements used in the HTML markup above:
Note: by default your set up will have a css file linked just as this one. Note: Syntax in CSS is very particular! Miss out a curly bracket or semi-colon and you may not see any styles at all.
* ----------------------------------------------------------------------basic optional styles for Web Media blog in ExpressionEngine - feel free to change ----------------------------------------------------------------------- */ body { margin: 0; padding: 0; background: #C9DFD8; color: #000; font-family: verdana, arial, helvetica, sans-serif; } #everything { width: 750px; margin: 0 auto; } h1, h2, h3 { font-family: georgia, "times new roman", times, serif; } h4 { font-family: "lucida grande", verdana, arial, helvetica, sans-serif; margin-bottom: 4px; } .center { text-align: center; } blockquote { font-family: georgia, "times new roman", times, serif; } ul { list-style: square; margin: 2px 0 3px 1em; padding-left: 1em; } li { background: transparent; font-family: "lucida grande", verdana, arial, sans-serif; color: #333; } img { margin: 0;
14
Web Media (P01004)

padding: 0; border: 0; } /* standard links */ a:link { border-bottom: 1px solid #8fbc8f; background-color: transparent; text-decoration: none; color: #003967; } a:visited { border: 0; background-color: transparent; text-decoration: none; color: #003967; } a:hover { border: 0; background-color: #8fbc8f; text-decoration: none; color: #eee; } a:active { border: 0; background-color: #8fbc8f; text-decoration: none; color: #eee; } #wrapper { background: white url(http://imedia.brookes.ac.uk/themes/site_themes/basic/images/wrapperback. jpg) repeat-y right; border-right: 1px solid silver; border-left: 1px solid silver; padding: 0; } #footer { margin: 0; padding: 0 6px; font-size: .7em; line-height: 1.1em; clear: both; border-top: 1px solid green; border-bottom: 1px solid silver; background: #CCD6D2; } #content { margin: 0 225px 0 0; padding: 5px 10px;
15
Web Media (P01004)

font-size: 75%; line-height: 180%; background: transparent; color: #000; border-right: 0px solid silver; } .entry { border-bottom: 1px solid green; clear:left; } #sidebar { float: right; width: 225px; background: transparent; padding-top: 6px; color: #000; border-left: 0px solid silver; } .date { font-size: 100%; background: transparent; color: #000; } h1.blogtitle { font-size: 3.5em; padding:0; margin:0; text-align:center; } #banner { color: white; background: #4A6A56; height: 125px; border-bottom: 1px solid green; border-right: 1px solid silver; border-left: 1px solid silver; padding: 0; } .blogtitle a { color: white; border: 0; } .title { font-size: 170%; background: transparent; border-bottom: 1px solid silver; color: #0D6654; } .posted { margin-top: 10px; margin-bottom: 3px; font-size: .9em; }
16
Web Media (P01004)

.sidetitle { margin: 10px 0; font-size: 125%; background: transparent; color: #2E8B57; } .box { margin: 0; padding: 0 8px 6px 8px; background: transparent; font-size: 70%; line-height: 170%; color: #000; } .altbox { margin: 0; padding: 0 8px 6px 8px; background: #e7f5e8; font-size: 70%; line-height: 170%; color: #000; } .paginate { font-family: Verdana, Geneva, Tahoma, "Trebuchet MS", Arial, Sansserif; font-size: 12px; font-weight: normal; letter-spacing: .1em; padding: 10px 6px 10px 4px; margin: 0; background-color: transparent; } .pagecount { font-family: Verdana, Geneva, Tahoma, "Trebuchet MS", Arial, Sansserif; font-size: 10px; color: #666; font-weight: normal; background-color: transparent; } .input { border-top: 1px solid #999999; border-left: 1px solid #999999; background-color: #fff; color: #000; font-family: Verdana, Geneva, Tahoma, "Trebuchet MS", Arial, Sansserif; font-size: 11px; height: 1.6em; padding: .3em 0 0 2px; margin-top: 6px; margin-bottom: 3px;
17
Web Media (P01004)

} .textarea { border-top: border-left: background-color: color: font-family: serif; font-size: margin-top: margin-bottom: } .checkbox { background-color: margin: padding: border: } .submit { background-color: font-family: font-size: font-weight: letter-spacing: padding: margin-top: margin-bottom: text-transform: color: }
1px solid #999999; 1px solid #999999; #fff; #000; Verdana, Geneva, Tahoma, "Trebuchet MS", Arial, Sans11px; 3px; 3px;
transparent; 3px; 0; 0;
#fff; Arial, Verdana, Sans-serif; 11px; normal; .1em; 1px 3px 1px 3px; 6px; 4px; uppercase; #000;
/* ----------------------------------------------------------------------you can change the way pictures appear in the entry here */ .picture { float: left; padding: 3px; margin: 5px 10px 0 0; border: 1px solid silver; } .picture img { display: block;
}
18
Web Media (P01004)
The basic HTML mark-up of the home page

<html> <head> <title>Title of this page</title> </head> <body> <div id="everything"> <div id="banner"> <h1 class="blogtitle">The title of your blog</h1> </div> <div id="wrapper"> <div id="sidebar"> <div class="box"> <h3 class="sidetitle">This would provide a heading</h3> <p>And some text</p> </div> <div class="altbox"> <h3 class="sidetitle">Categories</h3> <ul> <li>list item</li> </ul> </div> </div><!-end of sidebar -->
<div id="content"> <div class="entry"> <p class="date">a date in here</p> <h2 class="title">Some title</h2> <div class="picture"> <img src="http://imedia.brookes.ac.uk/imageshare/P1030965_thumb.jpg" alt="blogimage" width="300" height="225" /> </div> <p>some text</p> </div> <div class="paginate"> <span class="pagecount">Page 1 of 1 pages</span> </div> </div> <div id="footer"> </div> </div> </div> </body> </html>
19
Web Media (P01004)
Schematic, showing structure of the home page
Note: The above diagram does NOT represent appearance, only the structure of the component parts and their relationship to each other (parent, child, sibling).
20
Web Media (P01004)
Appendix 2: Module definition

MSc Digital Media Production
Module Number: Module Title: Module Leader: P00880 Web Media Chris Jennings
Module Description:
This module will provide you with an understanding of the processes and practices by which content can be generated and manipulated in digital form and then published to the World Wide Web. You will have an opportunity to develop a blog and build an on-line portfolio of work to include digital text, images and audio. You will be introduced to a range of topics including the theory of interactive media and an introduction to some of the techniques employed to create digital. M Level Credits: Module Status: Prerequisites: Placing: Restrictions: Exclusions: Timetable slotting: 20 Compulsory module for MSc Digital Media Production None semester 1 None None. Monday mornings in the IT suite (Tonge)
Content:
The module will concentrate upon the processes involved in the generation or gathering and manipulation of content in digital form on the computer and publishing to the web. You will consider the computer both as a tool and a medium. Instruction will be aimed at making possible an informed consideration of the techniques used. You will be expected to gain experience in the presentation of ideas to an audience of peers, the articulation of a reaction to such critiques, and the ability to usefully critique the work of others
Learning Outcomes
When you have successfully completed this module, you will have worked to achieve the following learning outcomes:
21
Web Media (P01004)
Knowledge and understanding

1. Appreciate the specifics or peculiarities of digital media on the web and understand the implications; 2. Articulate and communicate fundamental issues and theories relevant to a broad concept of web media; 3. Employ an understanding of the requirements of web delivery (the implications of design, usability, image resolution, colour depth, bandwidth etc.);
Disciplinary/professional skills
4. Employ an understanding of the appropriateness of different digital file formats for various purposes; 5. Apply the principles of good web site design; 6. Employ a technical vocabulary associated with digital media
Transferable skills (T=taught, P=Practised, A=assessed)

7. Self-management An ability to clarify personal values, appraise your own performance through a process of critical self-reflection, set and organise personal objectives, and work to briefs and deadlines. (P) 8. Learning Skills An ability to identify and appraise personal learning strategies to work independently and co-operatively, using library and ICT skills to access and manage information, and a range of academic skills to research, interpret, analyse, synthesise and summarise this information. (P) 9. Communication An ability to express ideas and opinions in written, oral, and visual forms to a variety of audiences for a variety of purposes using appropriate language and media, as well as the ability to listen actively so as to be able to participate in and learn from discussion, and the ability to persuade rationally, through negotiating and asserting one's own values, while respecting other people's values. (TPA) 10. Teamwork An ability to work productively in a group by taking responsibility, and carrying out agreed tasks; an ability to work within a team in a supportive role; an ability to evaluate and appraise team performance, and take the initiative and lead others. (TPA) 11. Problem solving An ability to apply knowledge, understanding and experience to identify and deal with a problem; an ability to analyse and think laterally about a problem and its solution; as well as an ability not only to be able to come up with strategic options, but to be able to evaluate the success of different strategies. (TPA) 12. Information and Communications Technology An ability to use ICT as a communication and learning tool, as well as a tool for accessing and managing information, and for presenting this information and related ideas; and an ability to use specialist software where relevant to the discipline. (TPA)
Teaching and Learning Experience

Much of the learning takes place in the ICT room with interactive presentations. The assignments for this module requires that you read relevant texts and review existing web site and work through the assignments using software provided by Brookes University or your own, if preferred:
22
Web Media (P01004)
When you have completed this module, you will have been given the opportunity to:
Attend workshops designed to instruct in the uses of the systems available in the areas relevant to the modules objectives. Consider explanations of the technology and terminology associated with web media Explore of key concepts of interactivity, non-linearity and non-sequentiality, design and usability Participate in interactive lectures designed to present examples of existing work in the relevant areas, to serve as reference points for the conception of student project work. Produce content relevant to the objectives of the course
Expected class contact 20 hours lectures 16 hours workshops
Assessment: The assessment of this module is through 100% coursework. There are 3 components to this coursework: You will be provided with a blog (online journal) and will be expected to post relevant news or ideas (text and other media) at least twice weekly. You will be expected to personalise the blog by making modifications to the style. You will create (at least) 3 episodes of an audio podcast. You will use recording and editing techniques to publish these podcasts to your web site. Assignments and learning outcomes: Assignment: Coursework Example 1 2 3 Percentage Learning Outcomes 1,2,3,6,9,12 3,4,5,7 1,10,11 60% 20%
Post entries to an online journal: 20% Personalise the blog templates: The Podcast (team assignment)
Assignment Feedback and Marking Feedback on the web design given in week 3 will be given by email (or web comments) by week 4. The course tutor will assess all other assignments during the early part of January. Feedback will be given after the examination meeting (usually around 20 January).
Evaluation of this Module

At the end of the module, an online evaluation form will be set up so that students can give feedback to the course tutor on the delivery and outcomes of the course.
23
Web Media (P01004)
Contact Details
The course tutor (Chris Jennings) can be contacted by email at this address: chris.jennings@brookes.ac.uk To ask for technical support, it is better that you use the forum (http://imedia.brookes.ac.uk/webmediaforums/) so that others may learn from both the question and the answer! Note: You will need to be logged into your site to use the forum.
IT suite in the Tonge Building Availability

This room is available until 9pm during the semester; however, the room is used for teaching on most weekdays.
Computers
All of the computers (PCs) have the version CS5 of the Adobe Creative Suite installed. You will also find Audacity a basic sound editing tool. Note: If you find any problems with any of the computers in this room, please report this by writing a note in the fault report book, which you will find at the end of the room furthest from the main access door.
24
Web Media (P01004)
Appendix 3: Mark sheet and criteria

Note: Please use this a check sheet for the assignments Deadline for the assignments is: 22 December 2009
Assignment details and marksheet.

Assignment Blog Posts What I expect Post entries (at least twice weekly) to your 'blog' (online journal). You must post at least 20 times over the semester, use pictures and the extended text field. For content, anything goes but consider the kinds of things that are happening on the course. Frequency of posts Research Clarity of title and structure of posts Topics Use of Media Weighting 20%
Comments Design of your site Through changes to the CSS and the HTML templates, you will redesign the blog to your own preference. You will need to make significant changes to the layout and you must change the banner to suite your site. All pages must validate and be consistent. I expect this to work in all current browsers Firefox and Internet Explorer. prototype delivered in week 3 (built with Photoshop) Banner Typography Use of colour Alignment of elements overall design accessibility (consistency, readability, Google search ability etc.) CSS Validation
Mark /20 60%
Comments Podcasts Working in a team of 3 or 4 you will create 3 episodes of an audio podcast to include an intro, outro, recording in the studio and recording in the field Concept of series/episodes Intro and Outro Quality of audio playback Associated permalink web page Role of individual Comments Overall Mark
Mark /60 20%
Mark /20 %

25

Module Handbook For Web Media 10

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Module Handbook For Web Media 10

Diunggah oleh

Hak Cipta:

Format Tersedia

Module Handbook for

Web Media (P00880)

Module Handbook for Web Media (P00880)

Web Media (P00880)

Web Media (P00880)

Rationale for using this system

What kind of thing should I post?

Web Media (P00880)

Mark allocation for this assignment Total=20%

Mark allocation for this assignment Total=60%

Web Media (P00880)

Assignment 3. An audio podcast

Mark allocation for this assignment Total = 20%

Software Available on this Course

Adobe Photoshop CS4 Classroom in a Book

Cascading Style Sheets

Creating a Web Site with Flash CS4

Designing with Web Standards

Dreamweaver CS4: The Missing Manual

Layers: The Complete Guide to Photoshops Most Powerful Feature

Photoshop CS4: Essential Skills

Web Media (P00880)

The Art and Science of Web Design

The Weblog Handbook

The ZEN of CSS Design

Web Design in a Nutshell

Further information about books

Recommended Web sites

Web Media (P00880)

Monday, September 27, 2010

Monday, October 04, 2010

Web Media (P00880)

Monday, October 11, 2010

Monday, October 18, 2010

Monday, October 25, 2010

Monday, November 01, 2010

Monday, November 08, 2010

Monday, November 15, 2010

What is a podcast? Some examples Ideas for the Podcast assignment

Monday, November 22, 2010

Monday, November 29, 2010

Monday, December 06, 2010

Monday, December 13, 2010

Web Media (P00880)

The home page HTML with some sample entries:

Web Media (P00880)

Web Media (P00880)

Web Media (P00880)

Web Media (P00880)

Web Media (P00880)

Web Media (P00880)

Web Media (P00880)

Web Media (P00880)

The basic HTML mark-up of the home page

Web Media (P00880)

Schematic, showing structure of the home page

Web Media (P00880)

Appendix 2: Module definition

Web Media (P00880)

Knowledge and understanding

Transferable skills (T=taught, P=Practised, A=assessed)

Teaching and Learning Experience