Web One - Winter 2010

This blog has moved

2010-04-24T12:57:00.001-07:00

This blog is now located at http://web1win10.blogspot.com/.
You will be automatically redirected in 30 seconds or you may click here.

For feed subscribers, please update your feed subscriptions to
http://web1win10.blogspot.com/feeds/posts/default.

Session 20 [Wed 100310] - Site Testing For Possible Changes/ Positive Reactions To Sites/ Final Deadlines

2010-03-11T02:59:00.000-08:00

Well done on completing the web one course. It is a tricky medium but one that should enhance your organisational and planning skills when it comes to all other disciplines under the Vis Com umbrella.

Final Deadlines
You handed in your folders during this final class session.

I will pick up your final zip files from the James Gosling folder in the Mac Lab Zone 1 folder late Friday night/early Saturday morning so be sure to complete all site alterations/ additions by Friday evening.

You can submit final work before then if you like.

All final sites must be live by end of Friday.

Many thanks and well done this term.
Cheers,
James.

Session 19 [Mon 080310] - Contact Form Instruction/ One To One Instruction & Troubleshooting

2010-03-09T13:19:00.000-08:00

Homework
For the final session we will be testing and commenting on each others sites. All sites must be live for testing whatever stage you are at.

The brief asks you for a short typed site appraisal. If you feel your site is perfect then please skip this. Otherwise, use this appraisal opportunity to comment on what went wrong and what you would do to improve your site. This could gain you additional points in the event that any part of your site is unfinished.

I will be taking in your folios during next class and then retrieving a zip of your final site from the public folder on Saturday [130310].

I will be grading websites early Saturday morning, so all sites must be finalised and live by Friday night [120310].

Also make any final changes to you blog based on my comments.

See you tomorrow.

Session 17 [Mon 010310] - Creating Background Gifs & Text Gifs/ Pulling images into CSS/ Image Replacement Using The Span Tag

2010-03-01T22:37:00.001-08:00

Homework

Backup Site to Public Folder
Finish index page - achieve your Photoshop comp design in HTML/ CSS
Create all your other pages by copying the index page using the Save As… technique from the training site.

State Of Play
Well done those of you who are making good progress with your site. You are clearly getting your head around the layout/ gallery building techniques in CSS and the inclusion of your Flash based autoslideshow.

I suggest that those of you who struggling with the techniques, having also missed the slideshow/ gallery instruction last session, concentrate on getting your 5 pages looking finished via CSS even if you can't envisage providing the full functionality of a slideshow, gallery, or a contact form. The skinning of your site is, after all, the most pertinent part in terms of your chosen Vis Com discipline.

Next time, we will finish our instruction in CSS positioning and then focus on styling the unique content on your pages.

Session 16 [Fri 260208] - Make Up Session

2010-02-26T00:06:00.000-08:00

A good extended session today for a number of you. We covered a number of techniques throughout the day -

CSS & Images For Styling

Taking slices from our page comps
Using CSS to place backgrounds in our HTML elements
An Image Replacement technique for HTML text elements that must stay on the page for accessibility purposes

For those that missed the session we will be covering these techniques again next session [Mon 010310].

Flash Based Image Carousel
We completed our flash work from earlier in the term by setting up and inserting a flash based image carousel into an HTML page. For those that missed this, the example can be seen at Autoslideshow Page and the demo files downloaded from Autoslideshow Demo Files.

If I have time before Tuesday I will write a step by step breakdown of the Autoslideshow procedure on the blog.

Setting Up A Thumbshow Gallery
Finally, this session, we saw how to set up, using CSS positioning, a simple thumbnail style gallery that I recommend you all adapt for your site.

Again the example can be seen at Thumbshow Page and the files downloaded from Thumbshow Demo Files

We will try and look at this set up process again if there is time this week.

Session 15 [Wed 240210] - Wireframing with Phsp Shape Layers/ HTML Check/ Placeholder Imgs/ Setting Base CSS Selectors/ Sizing Main Division Sections

2010-02-25T00:49:00.000-08:00

Homework - Three Tasks
Please finish wire-framing your Home Page Comp. You can download my example comp at Wire Framing Example.

Also, staying in Photoshop, please prepare a file of images for your slideshow and/or gallery by setting them up to the correct pixel size in individual layers. This will really help in getting ahead with the final pages. Remember Photoshop files go into the Working FIles folder in your site.

Finally, make sure you have created all your raw html pages for the final site based on the cleaned up pages from this session. Use the Save As… technique to achieve this quickly.

Apologies to Laura for not being able to spend more time with you this session. I will look at your HTML and prioritise you on Friday.

See you all then.

Session 14 [Mon 250210] - Review of Home Page Comps Continued/ Introduction to CSS Classes/ Being More Specific with CSS/ Positioning101/

2010-02-25T00:46:00.000-08:00

Session 13 [Wed 170210] - Return Of Folders/ Marking Up Page Comps For CSS/ Critical Review of Home Page Comps

2010-02-17T13:36:00.000-08:00

Thank you all for the home page art today. You all have something to move on with.

Homework
Finish your blogs for home work. Look closely at the home page designs of your chosen sites. You may be inspired to tweak your own page comp further before marking it up for css.

The only other thing to do before next session [Mon 220210] is to mark up your home page as instructed today. Next time we will begin laying out html pages with css in earnest.

Finally, watch out for your grade forms for the Planning stage in your email over the next few days.

Session 12 [Mon 150210] - Handing In Training Sites So Far/ Styling The Navigation Bar/ Intro To The Box Model in CSS

2010-02-16T04:53:00.000-08:00

Homework

Comp - Please finish the Photoshop Layer comp for you home page making sure to establish a distinctive identity for your site at the same time - logo, logotype, banner graphic.

Design the identity quickly, keep it simple - shape, colours, fonts, etc. Make sure that it is appropriate to your site's subject.
The ID can be adjusted and improved as you build your final site.

Also, on your comp, include the footer info and all the unique content for the home page just how you would ike to see it on your final web page.

Blog - remember to complete your blog ASAP, ideally by next Wednesday, as you will not want it hanging over you as you build the final site. The sooner you complete the sooner I can give you feedback for any last changes that may be required.

Brief - Finally, read the FInal Brief before tomorrow's class and log any questions you may need to ask.

See you next time.

Session 11 [Wed 100210] - Introduction to CSS Continued/ Submitting Planning Work

2010-02-11T02:07:00.000-08:00

Good session today. You all seem to be taking to CSS well.

Homework
Please complete your Photoshop Layered Page Comp for Monday's Session [150210].

Keep practising and investigating CSS if you have time.

Remember to ensure that your latest training site files are live by tomorrow morning before 11:00am.

See you next time.

Session 10 [Mon 080210] - Taking Stock of Planning Stage/ Content Boards/ Setting Up Page Comps in Photoshop/ Introduction To CSS

2010-02-09T09:05:00.000-08:00

Homework

Planning Brief: In Session 11 [Wed 100210] you must submit your planning stage work. The brief will be graded based on hardcopy and onscreen preparation.

All work that was done on, or attached to, planning sheets must be placed chronologically in an A3 clear sleeved folder.
Put all the most current pages of your training site and dependent files live on your webonegallery space.
Final Site Production: It is time to get started in earnest on the production of your final site. Please start by turning your home page content board into an index page design for your site. Use Photoshop to create a layered page comp for this as instructed in class.

Create a new directory, with the name of your final site, that we can use to set up a new site in Dreamweaver later. Create a working files folder. Inside that, make a page comps folder and save your layered page comp files in there.

You have until Session 12 [Mon 150210] to finish your first page comp.
Site Analyses Blog: Finally, a reminder to you to keep working on your blogs with an aim to finish in the next week and a half.

Don't forget to backup your site directory regularly to USB [and a second computer too if you can]. See you tomorrow.

Session 9 [Mon 010210] - Blog Reviews/ Technical Aspects of a Site/ Image As Content/ Web Photo Workflow/ Next Stage Planning

2010-02-01T13:15:00.000-08:00

Class is cancelled for Wednesday [030210]. Despite this we must continue with our work. The homework below will keep you busy until we meet again next Monday [080210].

Homework

You are nearing the end of the planning stage for your site and you need to produce the following as part of your homework -
- A Simple Site Map - visualise your organised content in a typical website map schematic as demonstrated and discussed in this session.
- Page Content boards - make a good start on listing the content that will appear on each page above and below the fold. Remember, you are not designing the page, simply determining what content, both copy and imagery, will appear where on the pages of your final site.

Today, we talked about images as content vs. images for styling. You saw a comprehensive web photo workflow in action in an extended demo finishing with inserting images in an HTML page in Dreamweaver using the RoundTrip technology to allow easy image updates.
- As part of your homework please litter your training site with images as content, at least one for every page.
- Also, fill the scrapbook page with inspirational images, textures, colour samples, graphic elements, anything that might prove helpful when designing the look of your site.

Finally, continue with your blog entries once you have read the feedback for your first. Aim at finishing the blog in the next two weeks.

All the above is due next Monday [080210]. Good luck.

Session 8 [Wed 270110] - Navigation Bar In Place/ Common & Unique Structuring/ Block Vs Inline/ Document Flow/ Library Items/ Duplicating Pages

2010-01-28T01:04:00.000-08:00

Once again, a lot covered today. You all seem to be handling the technical side well. Thankyou for your professional focus in class.

Homework

For Session 7 homework, you created your content organisation. For this session's homework please create unique content based on this text and apply it, in a strict hierarchy, to your newly made contents.html page. Use the <h5>, <p >, <ul> and <ol> elements to help you render a clearly formatted HTML version of the information.

Feedback for both your introductory pages and your initial blog entries will be available by Friday [290110]. It would serve you well, if you could also produce a few more site analyses early on in the coming week once you have been assured you are on the right track.

Session 7 [Mon 250110] - Setting Up Your Blog Posts/ Screengrabs & Image Optimization/ Organising Content/ Navigation Bar Using HTML Lists

2010-01-25T14:02:00.001-08:00

Homework
An excellent class today. A lot covered. Thank you all for your focus.

Now, for Wednesday [270110] please -

prepare a finished first blog entry
make a categorised set of your proposed content, and…
have a bash at the navigation bar structure

By the way, the dummy content list and it's categorisation is available in the Resource links to the right. Use it to understand how to handlie your own content.

Remember to have a couple of relevant images ready for next time.

Working With Lists
We have done a lot of work on lists now, also seeing how, when you have more than one on the page, you can identify them specifically using the id attribute.

Isolating HTML Components
Also, we made the Navbar that will eventually be placed at the top of each page in an isolated HTML file [navbar.html]. This is to make sure we don't compound problems in our work by introducing key elements to the main page too early.

Footer Navigation
As well as the navbar list element at the top of the page, you saw how to make an alternative footer navigation with row of pipe [ | ] separated relative links that mirror the links at the top of the page.

Session 6 [Fri 220110 Make-Up Class] - Flash Workshop

2010-01-25T13:59:00.000-08:00

Click the link to the right to review what we did in this workshop. We got as far as the end of Part 3.

Session 5 [Wed 200110] - Browser Set Up & Page Previewing/ Monitor Resolution/ HTML Lists/ Introduction To Hyperlinks/ Putting Your Page Live

2010-01-21T05:38:00.000-08:00

Flash Workshop
Remember to attend the Flash workshop tomorrow [Friday 220110] from 2:00 until 6:00pm. There will be a half hour break in the middle of the session.

Homework
Please do the following -

Live Page: By Friday evening please make sure you have put your index.html page live with your completed text outlining, in as much details as you can, all the important aspects of your proposed site, and including at least five absolute links to websites that relate to your subject. [See below for a repeat of the previously hurried (oops) class instructions on putting your page live.]
First Analysis: Finish your first blog text ready for Monday.
Content List: Finally, complete the first draft of your contents list where you must list all the possible things you might put on your final site. We will be using the content information to make a second page in our current planning site soon.

Putting Pages Live
The following steps will have your page live on the web before you can say hypertexttransferprotocol -

First of all, make sure you are happy with your index.html page and its content and save it [Apple-S]

Then go to Manage Sites from the Site menu or the other places where you can see the words 'Manage Sites'

Click Edit in the Manage Sites dialog box.

With the Advanced tab selected, click on Remote Info in the Category column on the left

In the Remote Info panel enter the details as laid out in the screen grab below [click to enlarge]. There is a new folder for each of you on the webonegallery server called yournametraining.

When you have entered the information click Test and Dreamweaver should connect to the server. If it doesn't connect successfully, check the information you have entered and try the test again.

Click OK when you are done here and then click Done in the Manage Sites box.

Back in the Files Panel click on the Connect To Host button as shown in the grab below.

If Dreamweaver connects successfully you can now see your remote, named training folder on the left of the FIles panel and your local files on the right.

Drag the Local index.html file over the Remote folder to copy your page to the server.

In your browser, type in the URL - www.webonegallery.co.uk/web1_win10/yournametraining - and the page should appear. If your page doesn't appear or there are problems with the links, check and fix anything that doesn't work and drag the local page to the remote folder again to replace the existing remote index page.

NOTE: Always work from the local files to make changes and disconnect from the remote server when you are done by clicking the Connect To Host button again.

Congrats! You are now a web page publisher.

Session 4 [Mon 180110] - Blog Set Up / HTML Intro - Page Structure & Semantic Application of Elements/ First Page/ Drmwvr Extensions

2010-01-19T04:07:00.000-08:00

Homework
As instructed in class please -

In a Word or Text Edit document, write your first site analysis breaking the text down into addressing each key tenet of web design - Target Audience/ Content/ Navigation/ Design/ Technology. Be sure to read carefully the Blog Brief to the right before you start writing.

Write a little about each for a site you like or dislike, ideally related to the subject that your own site will be about.

By way of the web page that you started this session, please tell me all about your site in clearly headed Question & Answer sections down the page.

This is where you can store all your current thoughts and plans for your site while learning how to present content clearly to the user.

Next Time
It was a good session today. Thanks for all your contributions and hard work. Next time we will continue our introduction to HTML looking at links and lists on a web page. We will also try and find the time to look at how to structure your blog entries and introduce Screen Grabbed, Optimzed images to your blog posts.

Session 3 [Wed 130110 Class Cancelled Due To Weather] Update On Progressing With Site/ Written Assignment Brief Available

2010-01-14T08:36:00.000-08:00

Class Cancelled
Session 3 was post-poned yesterday due to snow. We will make up the time later in the term. I hope you all got the cancellation email. Make sure the student portal people have your correct email address if you didn't in case of any further cancellations.

Homework

Site Content: by now you will have pinned down your site subject, the target audience, and tested its worthwhileness with the set questions. You should also have a clear single sentence objective for the site.

The next step is to compile a content list. Stretch your imagination to come up with all the possible content you could conceive of being included on your site related to your chosen subject. [Remember to prepare all your planning work on or attached to your planning sheets.]
Site Analysis: As well as continuing with the planning of your site, please download and read the written assignment brief. When you have read and understood, please attempt your first site analysis [there are some hints below about what you should write].

Write your review by hand for the moment and you can type it up when you have set up your blog next session.

Writing Your First Site Analysis
Whether you write about a site you rate or a site you don't, consider the site from the key web aspects outlined in Session1 -

Marketing - Who is the site aimed at? Remember there is always more than one audience for a site.
Content - Does the content intrigue or bore you? Why? Is it presented in the correct tone-of-voice? Are the text and image content well integrated.
Navigation - Describe the navigation and comment on usability.
Design - Is there a clear visual metaphor in use. Does it make sense. Does the design stand in the way of the communication?
Technology - It's early days yet in terms of your technological understanding but you can still describe the interactive and dynamic features of the site. Again, do they help or hinder your enjoyment of the site or your access to the information?

Write about a site that has some relation to your chosen subject. Be thorough and clear in your analysis, breaking it down into clear sections if necessary. No site is perfect, be brutal but positive in your criticism. If something could have been done better, then tell the reader how.

See you next session.

Session 2 [Mon 10110] - Site Planning Brief/ Review of Site Ideas/ Introduction to Dreamweaver/ Setting Up Site/ Common Directories

2010-01-12T01:12:00.000-08:00

Homework
For next session , please pin down your final site idea and justify it using the questionnaire available from the LINKS on the right. If you don't understand any of the questions then try your best to answer then move on to the next one.

Make sure you record all the thoughts you have on your planning sheets. [The printer is working now!]

The two most important things to define right are probably your possible target audiences and the objective of your site in a clear, single sentence statement. You will probably find it easier to write this statement once you have answered the questions.

Finally, make sure you have some example web sites that you would like to share with the class. These will become the first hyperlinks on your first HTML page next session.

Thank you all for your contributions to the class this session. See you next time.

Session 1 [Wed 060110] - Welcome to Web One for Winter 2010/ Course Outline/ Making The Planning Sheet Template

2010-01-04T10:28:00.001-08:00

Welcome to the course web log for Web One. This is the place where you can catch up with any important information you may have missed along the way. It is by no means comprehensive, so don't rely on it over your own copious notes.

Homework First
Each blog entry begins with a reminder of the homework allocated in the session. Please note that homework is officially set at four hours per each two hour class session. With three courses a week of classes and their accompanying homeworks you will have completed a standard working week [without pay ;-) ].

Your first homework is to -

brainstorm onto your brand new planning sheets the subjects and ideas you are considering for this term's website. Expand those minds and be sure to impress next time.
Find two websites that you like/don't like. Book mark them in Safari for easy retrieval before next session

Oh, and don't forget to download and peruse the syllabus, your lives may depend on it.

Course Outline
So, as you learnt today, this course is a study of Web Standards based site creation. [It is not a Flash course]. This allows you to focus on your graphics skills and how they apply to web design.

This session you received a breakdown of the current standards for building a web page/site. There are three layers of site construction to consider -

The Structural Layer - using HTML [More specifically XHTML (Extensible) Hyper Text Markup Language] for meaningful/semantic page structure and hierarchy, also catering for accessibility issues
The Presentation Layer - Incorporating CSS [Cascading Style Sheets] for design and styling. [Check the design biased CSS Zen Garden site and book [available in the library] to learn more about this particular technology]
The Behavioural Layer - using Javascript to create interactivity.

Planning Sheet
All paper based work that you make this term will be handed in on or attached to an A3 sized planning sheet branded with your name, contact info [telephone/email probably] and with spaces to enter the date and project title [example below/ click image to enlarge].

You can make your sheet template in InDesign or Illustrator and print one to photocopy multiple times as you need more.