Tuesday, 7 February 2012

Exhibition Website progression

Project halted until group theme decided

initial considerations untaken and broadcasted to group

Conversed with graphics team to set out appropriate template

Begin self teaching of website creation software to be used = Dreamweaver CS5

Template to create

1000pixels width

Header - Graphics strip area
Menu bar
Sub header - Graphics strip area
Content - for web teams to work on own page
Footer - extra height for graphics

Template created via tables

Insert - table - 1 coloumn x 5 rows


Select top cell - insert - image objects - image place holder - set size (1000 x 125 pixels)


insert image place holders in header, sub header, footer

Footer image holder (1000 x 80 pixels)



Theme selected - while waiting for graphics teams visual input will create basic layout of each page

Begin self teaching of web hosting
   - how to web host
   - how much it costs
   - restrictions

Website host company selected = 000webhost.com = free hosting, no ads, restricted functionality

Website domain created = aru-exhibit2012.site11.com = free domain name

Setup FTP functionality to allow connection to edit website

Basic menu functionality added allowing simple changing between four basic test pages
Hyperlinks added to each page in basic menu via adding links in dreamweaver onto images representing buttons

website upload tested = working so far

Enabled check in - check out to allow files to be uploaded and downloaded from site instead of offline file moving between web team.

Next step to create template pages with all links working so web team can access pages and build each individual page from site with working links

Very basic template added
Tested upload / download
Tested links
Tested Image swap

Asked class for help on online building - no replies yet  - update = zero replies

Sent message to web team so they can progress offline until sorted:

Havent herd back form anyone about shared working online. If people want to get started on their page simply create an offline one and we can put it up later


to make sure ur working n same format in dreamweaver on design page
go to insert - table - choose 1000pixel width - 5 rows - 1 column
Press ok and align to centre
work within forth row and expand and add customise this row as you wish


Row 1 - Header - graphics team
Row 2 - menu bar - il do and implement later
Row 3 - graphics bar
Row 4 - yours, go nuts
Row 5 - footer - il do later


no idea about colours etc from graphics team so worry about content for now
I have received no pictures for content at this time either lol


Learn how to create spry menu system - (menu which drops to menu - which drops to menu)

attempt to implement on personal website first

After 3hrs of errors n code n misery FINALLY managed to execute successful spry menu on live website with successful testing across 4 test pages
Unable to Successfully turn menu into library asset at the moment

Out with the old


In with the new


Not worth stylising via CSS manipulation due to lack of theme input from graphics team at this moment

Graphics team give Visual input


Content from this image to be centred - extended background to be used to surround central data

Final design differs from pre-agreed template -
                     - menu set to left of header not below across entire width
                     - no sub header
Alterations to basic template to be made

Added images given by graphics

Background image added easily via page properties. Logo image encountered difficulties. Image first added to table cell - however menu could not be placed properly as requested by graphics team.
Image then added to cell background - method for adding images to cell backgrounds only learnt through research.
Spry menu cell widths reduced - introduced to above field with logo background
Spry menu requested with different colour names for each field. - Cannot be accomplished via dreamweaver spry (to my knowledge + research)

Technique found to be located within cell attributes field - menu moved into desire position freely


 Image added however contained white background which was not desired.

J-peg


PNG - 32 hold higher level of image data to support desired transparency


New result achieved - spry menu colours changed via CSS style sheet manipulation - however since style sheet covers controls for menu - entire menu colour is changed - other techniques to be researched


Attempted to add 50% opacity background to main content section Cannot be accomplished via dreamweaver (to my knowledge of 4hr+ research)
Begin self teaching of slideshows methods
Begin self teaching flash
Created test files via flash
Created via keynote slide show produced
 - converted to quicktime file
 - converted via adobe media encoder
 - converted to swf via flash
LOTS of detail lost during process however for TESTING purposes is acceptable

Implemented within webpage


Uploaded to website


Transitions work as expected



Transparent Anglia ruskin logo added to bottom of page


- Hyper link added linking to Anglia ruskin homepage

Need to neaten up flash box on web page - need to find method of implementing central background (preferably semi opaque) due to strong background


Taken comments under review

Conveyed with Graphics team
New Background decided
5X colours with gradient fading in from left to white
Setup default image to be adjusted so web sam can adjust
Uploaded to group email address


Text left in separate layer shows codes of different colours

New menu fields agreed upon

Home = Home
Bio = Students
Gallery = Removed
Info = Contact us
Find us (new)


Received email from graphics team
Design changed again.
Cancel all work to prepare to start again.

Requests received for new domain name which would be more rememberable

site removed

Site Rebuilt at:


http://retroresolution.site90.com/


New logo design acquired and converted for website


New Background received


New logo implemented
New background implemented
New Menu Built replacing Spry menu system with Simpler menu

Date and time placed at top centre of page as this is most important information of front home page
Required to be first thing visible to public when they log on to website



(Date corrected as shown below)




Flash slideshow progression taking time to implement at high quality - with time being factor of group work decision was taken to implement slideshow using freeware javascript to aid in programming. Display method of freeware controls image layout of central large image with thumbnails being shown below.

Of all work submitted (on time) took one image from each student and implemented into slide show to create focus point of index page (home page)
This is believed to be necessity due to experience when viewing other websites hosting galleries that examples of work on display are shown  to allow public to view a sample of what is on show (preview of what to expect)




All work gathered in group meeting to be implemented on to website

All work implemented to website.

All links created - left for group testing

Errors noted (2) - to be fixed

Links fixed

New buttons menu implemented - all links re-worked
Error found whilst using IE - new buttons carried outlines
New code added to correct error

Added missing data to students bio page + galleries as arrives

Created images for names for bio pages
Efects included rounding edges + applying different colour stroke edge for definition
- however upon shrinking to size extra details are lost resulting in blurry results -
Decision taken to use text system instead of images + web friendly text fonts.
Text system guarantees clarity + compatability with all browser types.





1 comment:

  1. Not sure of the idea of semi-opaque central background, it's just going to make the whole website really busy. Why not using your background only on the left side of your screen and leaving the rest in black? Try and see what you think.

    ReplyDelete