All posts for the month March, 2012

Web Site Design & Production…

Task 3 – Production of a Website

Produce a series of 3 – 5 (max) interactive web pages to promote / advertise a particular event, product or occasion. These pages are to be as a minimum: 1) the homepage 2) an inside content page with text and images and 3) a contact/form page.

The design stage of this project started by looking at what sort of style I wanted the site to have, taking into consideration that the event I wanted to put on would be opulent, flamboyant and theatrical.  With this in mind I started searching for back ground images that would go well with this theme…

these pink ruched curtains were a bit too shiny to place content on top of….

However, these red curtains looked far more opulent and even included a gradient in the way they were lit, which gave texture to the background of my site without me having to add any in photoshop.

The next element was to design all the pages in photoshop…

The Header…

I needed to use a font in the style of cabaret…

I then added these png images of the AIDS ribbon to show the user immediately the exact point of the event.

Looking back at my ambitions for this site at the time, I now believe that they did over stretch my abilities and that I should have designed some thing simpler and more achievable for my first functioning website.

The Home/Index Page…

On this page I wanted to include a large hero image in a gilded frame that would scroll through a gallery of images like a slide show – instantly showing the user what the site was about.  The footer showing the charity logos is used on every page and shows clearly that this is a not for profit, charity event.

This is the site as seen in dreamweaver…

On every page the nav. bar was created using hot spots in dream weaver which link very page together making the site navigable.

This is how it turned out in the browser when designed with Dreamweaver….

I placed all of the imagery into the ap divs on the page and was pleased with the result in Dreamweaver preview, but when it came to viewing it in any browser the page would not stay in alinement.  This problem could be due to the fact that I inserted and deleted a lot of code from the site trying to create a scrolling slide like image show, which was unsuccessful and lead to me being resigned to using just one still image.

Here are the images (edited in photoshop to be the same size)I planned to use in the scrolling slide show/ hero imagery…

The following two images are of the venue where the event would have taken place, giving the viewer a taste of what to expect further into the site and on arrival on the day.

The Entertainment Gallery…

This page was to show all of the cabaret acts for the evening.  I placed each image on the same sized background which gave the page continuity of design in a symmetrical layout.  The aim was for each image to have a functioning roll-over with an enlarged image and information for each picture – this, in turn, could then even be linked to that performer’s video or web content.

An example on which I found here http://host.sonspring.com/hoverbox/ when reading this article here http://sonspring.com/journal/hoverbox-image-gallery

I even, if over ambitiously, found some video imagery to link to my site…

http://www.youtube.com/watch?v=j9RkCWjvNuA

http://www.youtube.com/watch?v=-D0rp-jI1g4

http://www.youtube.com/watch?v=st1_2AIEfI8

This is how the site looked in dreamweaver preview…

This is how the site looked through the browser when I designed it with dreamweaver…

 none of the thumbnail images showed up on the page, although they were mysteriously clickable and my ‘pop up’ images became visible each time.

When thinking of what acts I would like to use, I even planned a running order, which went like this…

  1. Paul O’Grady – Hosting the whole event…
  2. Cancan-girls
  3. Russel Kane
  4. Miss Kiki Kaboom
  5. Piff the Magic Dragon
  6. Lola Lasagne
  7. Hula-Girl
  8. Topping & Butch
  9. Chrys Columbine
  10. All Mouth No Trousers
  11. Sarah Milican
  12. Dave Lynn
  13. The Cast of Priscilla Queen of the Desert

I did look at how other sites for events were designed and what functions they required…

This home page allows the user to quickly and easily navigate to the content they wish to find as there is a link to most of the site content here.

This page of the site shows a functioning seating plan which is a required aspect for nearly all venue/event sites – although I would have liked to incorporate this idea into my design it was way to advanced for me to even contemplate.

The Seating Plan at the Apollo Victoria…

This allows users to directly pick the seats they wish to sit in and is colour coded to show the pricing.

Buy Tickets Page…

This (below) is how I intended the page to look as seen in photoshop – with type able fields for the information required to buy tickets.

This is how the page looks in dreamweaver preview (below).  It took me a long time to create working spry fields as I first attempted to import a complex form/table and it’s code in to my page, this of course took time to fix and eventually I abandoned the idea and opted for simple spry fields, which I created with the help of a previous college workshop.

Below – is what the page looks like in the browser – I am still unsure as to why the body background has skewed to the left, but am sure that the adding and removing of code will not have helped.

Whilst these spry fields work and are able to be typed in, they are by no means a complete online ticket booking and purchasing system.  Multiple pages and many other types of code would be needed to create those sort of systems.

Here I  found various ticketing and payment systems you could use via the web…

http://company.ticketscript.com/uk/how-it-works/step-4-event-management-and-logistics/?gclid=CJbzvY2o6a4CFS4NtAodAixdhg

http://mashe.hawksey.info/2010/03/using-google-apps-script-for-a-event-booking-system/

Donation and Comment Page…

Here (above) is the page as designed in photoshop with a comment box and a donation field.  Again this type of money processing would take a lot of code to actually work, so other plug-ins would be needed if this were a real event.  Such as the donation process used by the venue I have chosen ‘Wilton’s Music Hall’ …

http://www.justgiving.com/wiltons/donate

Below is the state of the page in dreamweaver preview…

Here I have used a comments field I found online and have inserted the code into my page.  Although this appears to be reasonably successful – it shows up in the area of the page I wanted it to – I find it to be slightly disappointing because it lacks the basic function I required for the page.

Above is a professional looking donation widget found on the THT web site.

Above, you can see the page as it is shown in the browser.  Here I have the same problems with alinement as the rest of the site, although I am pleased with the over all aesthetic of the design, which shows three different views of the venue.

The Charities Page…

http://www.tht.org.uk/

As below – another event idea that THT are running on their website at the moment…

http://www.ejaf.com/Home

Below, some events found on the EJAF website…

Below is the page as seen in photoshop…  It shows the charities logos and excerpts from each website.

Below is the page as seen in dreamweaver preview…

Above, in this screen shot you can see that ‘hot spots’ have been added to link the images to each charity website.  Click on either logo and the browser will open the charity site in a new page.

Above is the page as seen in the browser.

The Sponsors Page…

http://www.hendricksgin.com/age-verification.aspx?ReturnUrl=/default.aspx

I chose Hendricks Gin as on of the sponsors because their company ethos fitted so well with what i was theoretically trying to achieve… Click the link and find out how magical their website truly is!

http://www.smirnoff.com/en-gb/

I chose Smirnoff as one of the sponsors because they have a proven track record at promoting events, such as the night-life exchange – http://www.contagiousmagazine.com/2010/09/smirnoff.php, which I thought would help this event no end.

The page below, shown in photoshop, shows the company logos and a fictitious statement from each one say why their company wanted to support such an event.

The page above, as shown in dreamweaver preview, has ‘hot spot’ links over each of the charity logos to redirect the user to their websites.

The page below, as shown in the browser – here you can see that the alinement is still distorted, unfortunately I have been unable to fix this throughout the site and will take more care when using dreamweaver in future, as I have learnt a lot from this first experience.

My Conclusions about this project…

Whilst creating this project I have found dreamweaver very challenging but have really enjoyed creating the look and design of the site.  This project has taught me that I should not have over complicated my first attempts at creating a working web site – I feel that I tried to run before I could walk.  In future I will take the web building process one step at a time, considering how the site will function and making designs that fit the process.  By this I mean that I will not have a complete design, that is then unable to be shoe-horned into dreamweaver/rapidweaver/wordpress.

So although I have found Dreamweaver a struggle (I shall try not to be scared of  new soft-ware in future) I feel that I have made some progress and will continue to do so.

Leave a comment
by scase77 on March 15, 2012  •  Permalink
Posted in task 3:- Production of a Website

Posted by scase77 on March 15, 2012

https://scase77.wordpress.com/2012/03/15/web-site-design-production/

Legal & Ethical Issues in Web Design

Write a 500 word (min) report on legal and ethical issues that outlines the following…

  • WAI Guidelines

As stated  at – http://en.wikipedia.org/wiki/Web_Accessibility_Initiative

“Web Accessibility Initiative (WAI) is an effort to improve the accessibility of the World Wide Web (WWW or Web) for people with disabilities. People with disabilities may encounter difficulties when using computers generally, but also on the Web. Since people with disabilities often require non-standard devices and browsers, making websites more accessible also benefits a wide range of user agents and devices, including mobile devices, which have limited resources.

The W3C launched the Web Accessibility in 1997 with endorsement by The White House and W3C members.   It has several working groups and interest groups that work on guidelines, technical reports, educational materials and other documents that relate to the several different components of web accessibility. These components include web content, web browsers and media players, authoring tools, and evaluation tools.”

These are the Guide lines  shown here – http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/

  • Themes of Accessible Design 

This point explores the need for design to be easily navigable, whilst not over shadowing the content and functionality of the website.

  • How the Guidelines are Organized 

As stated on their website – This document includes fourteen guidelines, or general principles of accessible design. Each guideline includes:

  1. The guideline number.
  2. The statement of the guideline.
  3. Guideline navigation links. Three links allow navigation to the next guideline (right arrow icon), the previous guideline (left arrow icon), or the current guideline’s position in the table of contents (up arrow icon).
  4. The rationale behind the guideline and some groups of users who benefit from it.
  5. A list of checkpoint definitions.
  6. The checkpoint definitions in each guideline explain how the guideline applies in typical content development scenarios. Each checkpoint definition includes:
  7. The checkpoint number.
  8. The statement of the checkpoint.
  9. The priority of the checkpoint. Priority 1 checkpoints are highlighted through the use of style sheets.
  10. Optional informative notes, clarifying examples, and cross references to related
  11. Web Content Accessibility Guidelines 1.0
  12. guidelines or checkpoints.
  13. A link to a section of the Techniques Document ([TECHNIQUES] [p. 33] ) where implementations and examples of the checkpoint are discussed.
  14. Each checkpoint is intended to be specific enough so that someone reviewing a page or site may verify that the checkpoint has been satisfied. 
  • Document conventions

The following editorial conventions are used throughout the document:

  1. Element names are in uppercase letters.
  2. Attribute names are quoted in lowercase letters.
  3. Links to definitions are highlighted through the use of style sheets. 


  • Priorities

Each checkpoint has a priority level assigned by the Working Group based on the checkpoint’s impact on accessibility.

[Priority 1]
A Web content developer must satisfy this checkpoint. Otherwise, one or more groups will find it impossible to access information in the document. Satisfying this checkpoint is a basic requirement for some groups to be able to use Web documents.

[Priority 2]
A Web content developer should satisfy this checkpoint. Otherwise, one or more groups will find it difficult to access information in the document. Satisfying this checkpoint will remove significant barriers to accessing Web documents.

[Priority 3]
A Web content developer may address this checkpoint. Otherwise, one or more groups will find it somewhat difficult to access information in the document. Satisfying this checkpoint will improve access to Web documents.

Some checkpoints specify a priority level that may change under certain (indicated) conditions. 

  • Conformance

This section defines three levels of conformance to this document:

Conformance Level “A”: all Priority 1 checkpoints are satisfied; Conformance Level “Double-A”: all Priority 1 and 2 checkpoints are satisfied; Conformance Level “Triple-A”: all Priority 1, 2, and 3 checkpoints are satisfied;

Web Content Accessibility Guidelines 1.0

Note. Conformance levels are spelled out in text so they may be understood when rendered to speech.

Claims of conformance to this document must use one of the following two forms. Form 1: Specify:

The guidelines title: “Web Content Accessibility Guidelines 1.0”
The guidelines URI: http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505 The conformance level satisfied: “A”, “Double-A”, or “Triple-A”.
The scope covered by the claim (e.g., page, site, or defined portion of a site.).

Example of Form 1:

This page conforms to W3C’s “Web Content Accessibility Guidelines 1.0”, available at http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505, level Double-A.

Form 2: Include, on each page claiming conformance, one of three icons provided by W3C and link the icon to the appropriate W3C explanation of the claim. Information about the icons and how to insert them in pages is available at [WCAG-ICONS] [p. 33] . 

  • visual content

This content must be accessible in a number of different ways, making it easy to use for any one who may be impaired and need alternative arrangements made for using the internet. This means that for every piece of text content there should be a picture to illustrate what the text is talking about.  The guidelines also mention that all content should be in context, making for a more fluent, accessible web experience for any type of user.  By this, it means that all text, images, design, sound and video should fit well together within the area the website is exploring.

  • Web Content Accessibility Guidelines 
2.1 Ensuring Graceful Transformation
2.2 Making Content Understandable and Navigable .
  • Web Content Accessibility Guidelines

1. Provide equivalent alternatives to auditory and

2. Don’t rely on color alone. . . . . . ..

3. Use markup and style sheets and do so properly. .

4. Clarify natural language usage . . . . .

5. Create tables that transform gracefully. . . .

6. Ensure that pages featuring new technologies transform gracefully

7. Ensure user control of time-sensitive content changes

8. Ensure direct accessibility of embedded user interfaces. .

9. Design for device-independence. . .

10. Use interim solutions. . . . .

11. Use W3C technologies and guidelines.

12. Provide context and orientation information. .

13. Provide clear navigation mechanisms. 

14. Ensure that documents are clear and simple. 

 
 

  • Internet copyright

 
An advertisement for copyright and patent preparation services from 1906, when copyright registration formalities were still required in the US.

There is currently a story on …..

Until the entire world decides as one how to govern the internet and it’s copyright laws, then the ‘WWW’ will be a places of uncertain legality whose laws depend on where you are in the world.  However, I do think that morality has a big part to play in this, as most people know when what they are doing is basically wrong.
In short, as a web designer, you should ask for permission for every piece of imagery, sound or text you use – unless you are the author of these materials.

  • Privacy and online crime.

Within most areas of the internet there are safety features put in place to protect users data, whether this be finical or social media.  However, users should always be aware that once they have put information about themselves online it will always be open to others corrupt uses.  This could be anything from theft of monies via illegitimate ‘pop up’ adds that state ‘you are the winner’ and fraudulent copies of large company or bank web sites which glen money from legitimate customers – to – online bullying and ID theft.

http://www.privacyrights.org/fs/fs18-cyb.htm

http://www.sciencedaily.com/releases/2008/12/081204094555.htm

http://www.surrey.police.uk/safety/computer_crime.asp

http://www.levesoninquiry.org.uk/

Leave a comment
by scase77 on March 14, 2012  •  Permalink
Posted in task 2: - Legal & Ethical Issues in Web Design

Posted by scase77 on March 14, 2012

https://scase77.wordpress.com/2012/03/14/legal-ethical-issues-in-web-design/

task 1:- Overview of HTML and CSS

You are to write a short analysis of HTML and CSS and how they affect web design. You are to include the main features of HTML and CSS including as a minimum:

HTML Code:

  1. a)  the HEAD area of a web page and what it can contain…

    http://www.w3schools.com/tags/tag_head.asp

    This site really helped explain what is in the HEAD area of any website…

    The HEAD of any site should contain the title of the website, which in itself will contain searchable friendly key words.  These key words could then possibly bring the site within the first page of any search engine. this is called search engine optimisation or SEO.

    The <head> element must include only one title for the document, and can include scripts, styles, meta information, and more.  It shows and defines a title in the browser toolbar, provides a title for the page when it is added to favourites whilst displaying a title for the page in search-engine results.

    The <script> tag is used to define a client-side script that has been used, such as a JavaScript.  The <script> either contains scripting statements, or it points to an external script file through the src attribute.  This could mean JavaScript which can be used for image manipulation, form validation, and moving changes of content.  Making a site more interactive and dynamic.

    ‘The required type attribute specifies the MIME type of the script.’ The MIME (I think) indicates the type of files used and their code – see -http://www.webmaster-toolkit.com/mime-types.shtml

    The <style> tag would contain the CSS or Cascading Style sheet for the web page.  Styling the text and images into the  required design.

    The <meta> tag supplies (information) metadata about the HTML page. This metadata will not show up on the page, but will be used by the browser and search engines.  They are mostly used to state the page description, keywords, author of the document, last updated, and other unseen information.  The <meta> tag always goes inside the <head> of the website.  It can be show browsers – how to display content or reload page or by search engines for keywords and any other web services.

  2. b)  the BODY area of a web page and what it can contain…

    As below the <body> tag of the website has within it every type of web content, such as text, images, video and other code.
    <body>
    The content of the document……
    </body>

  3. c)  A short coded piece of HTMLinapageincluding:

    • The basic page structure including Doctype, HTML, head and body
    • paragraph text
    • an unordered list
    • An H1 heading
    • an image
    • a page link

    • This is my first ever attempt at code, done whilst at college.


      CSS Syntax:

  1. What is the difference between HTML and CSS?

HTML/XHTML – HyperText Markup Language/EXtensible HyperText Markup Language –
This is the code language that websites are written in…whereas the CSS defines that code and styles it in the page, giving colour and shape to a website.

  1. Name the 2 parts of a CSS rule –

    http://www.w3schools.com/css/css_syntax.asp –

    A CSS rule has two main parts: a selector, and one or more declarations:

    The selector is normally the HTML element you want to style.

    Each declaration consists of a property and a value.

    The property is the style attribute you want to change. Each property has a value.

……………………………………………………………………………………………………………………………………………………….
  1. Create a style sheet for the above HTML page and link it to the page. Then style the p and h1 tags.

o Write a CSS rule for the paragraph (p) tag with font family of Verdana, font size of 12 pixels, colour black,

Line height 20   pixels

o Write a CSS rule for the h1 tag with font family of Verdana, font size of 25 pixels, colour blue, bold

An excellent series of simple HTML and CSS tutorials is available at: http://www.w3schools.com

Then write and test in Dreamweaver – but ONLY in Code View! You will need to set up a folder in DW with images in it.

I have completed this element during a workshop session at college… some screen shots to follow…

Leave a comment
by scase77 on March 10, 2012  •  Permalink
Posted in task 1: - Overview of HTML & CSS

Posted by scase77 on March 10, 2012

https://scase77.wordpress.com/2012/03/10/task-1-overview-of-html-and-css/