final web site evaluation

For a higher grade i was asked to create a fully working website in dreamweaver. i was told to use the skills i had learnt during the tutorial and the research i have done. to start i done some thumbnail sketches of the layout of the website and then done my final design on a 960 grid sheet for the sizes before doing it in more detail on photoshop. after i finished the final concept in photoshop, I went ahead and created the website in dreamweaver, finishing off with minor problems.

I learned a lot of skills and tricks whilst creating my website, such as quicker way of coding and how to position div tags, images and text easier on the page. also i learned some more advanced coding for example using a carousel for my images.

I am satisfied with the out come of my web site as it is working correctly and easy to navigate.
also i think my research on web design issues helped me in making a better site as it helped me understand certain issues in web design. one of the issues i had was the font size and positioning in the div tags. To fix this issue i researched how to fully edit text in the style sheet.

Research

Web Technologies

1. Web site - Place on the web where you can get information

2. Web Application two way interaction application coded with web technologies

3. Uniform Resource Locator - Uniform Resource Locators, also known as "URL", are internet addresses that can access internet networks which lead to websites. In other words, URL's are used to access Websites.

4. Content - the content is the information contained on the page. The content is what makes the website. Content can come in all shapes and forms. From written text, to images, to videos etc. The soul purpose for a user to visit a website is most likely for its content.

5. Layout - The way the website is constructed - i.e. 3 column, liquid, fixed, blog, magazine

6. Structure - Elements of the layout - such as header footer, sidebar, menu

7. Cookies - cookies are data sent to your computer by a web server that records your actions on a certain web site. also cookies are used to store passwords, orders and preferences for sites.

8. Servers - A web server is a computer program that delivers content, such as web pages, using the Hypertext Transfer Protocol, over the World Wide Web. Server can also refer to the computer running the program.

9. Remote - computers containing website external to that computer and cant be accessed on the web.

10. Local - Your own connection using a browser to the web

11. File Sharing  - file sharing is where people can share files person to person through the internet and between local machines.

12. Ecommerce - ecommerce is a business in the online environment, making money, selling and buy in the virtual economy.

a good example would be http://www.play.com/

13. VOIP - Voice over Internet Protocol - voip is a web based communication in which a person clicks an object  to request an immediate connection with another person in real-time either by phone call, Voice-over-Internet-Protocol, or text.

14. HTML -  stands for the Hyper Text Markup Language. HTML code is the major language of the Internet's World Wide Web. Web sites and web pages are written in HTML code.

15. XHTML -  (Extensible Hypertext Markup Language) is a family of XML markup languages that mirror or extend versions of the widely used Hypertext Markup Language (HTML), the language in which web pages are written.

16. DHTML  - Dynamic HTML, or DHTML, is an umbrella term for a collection of technologies used together to create interactive and animated web sites by using a combination of a static markup language.

17. JavaScript - JavaScript is an implementation of the ECMAScript language standard and is typically used to enable programmatic access to computational objects within a host environment and is used to add interactivity to websites.

18. Perl - Used often for processing forms

19. PHP - PHP Hypertext Preprocessor - can perform all types of calculations such as figuring out the date and time. it is also used to produce dynamic web pages.

20. ASP - Microsoft version of PHP, which is called active server pages. Classic ASP uses server-side scripting to dynamically produce web pages that are not affected by the type of browser being used.

21. Java - programming language used to make applications, web applications and games

22. Client Side Scripting - client side scripting refers to computer programs that are run by users web browser not a server.

23. Server Side Scripting - Server-side scripting is a web server technology in which a user's request is fulfilled by running a script directly on the web server to generate dynamic web pages.

24. Cascading Style Sheets - CSS is a style language used to describe the look and formatting of a document written in a markup language.

25. FLV - Flash Video format - Flash Video is a container file format used to deliver video over the Internet using Adobe Flash Player.

26. Canvas - Interactive Element which behaves like flash within an HTML5 document and allows for dynamic scriptable rendering of 2D shapes and bitmap images.

Web Design Issues

when creating a website there are certain terms that you need to take in to consideration, such as Aesthetic qualities, access speed and many others.

Aesthetic qualities is the way the web page looks like the layout, certain features, images and so on. 
this has a big influence on the people viewing the website as if they don't like the way it looks they will leave the website.  

http://www.sixtiespress.co.uk/

Here is a website that looks horrible and makes you want to leave straight away. this shows if you don't use Aesthetic qualities well people will not look at your website.

also access speed is crucial to the success of websites as if it takes to long for the page to load up people will just close it and find a different website.

here is an example of a website with fast access speed - http://eyesopen.org.uk/

Web standards

cross browser compliance is necessary as people use different web browsers and if your website does not work on all browser or looks different some people will not have access to it. for example if some one only used internet explorer and the site is made for firefox they will not be able to use the web site.

for example http://webpagesthatsuck.smugmug.com/Web-Design/Videos/6872802_HL8qNX#!i=1484402287&k=kN8g54N

Image formats

Any images used in a site should fall into the compatible formats category, meaning any other formats will not be viewable in a browser. The compatible formats used mostly are JPEG, GIF and PNG. Any other formats should be avoided as they are incompatible.

An example of a site that failed to use correct image formats would be

http://webpagesthatsuck.smugmug.com/Web-Design/Videos/6872802_vfkua#!i=652061468&k=22eRn

Some of the image on the site wouldn't load. The images clearly have not been uploaded in the correct format.

An example of a site that has succeeded in delivering images in their right format would be

http://www.callofduty.com/

The images are very clear and crisp. The loading time wasn't affected. this is a result of uploading images in the correct format.

Normal Fonts

Normal, readable and easy fonts should be used in a website, anything else would be unreadable. Unique and fancy text should be avoided as they give Users a hard time and frustrates them greatly causing them to leave. 

Every Website's purpose is to deliver information, this information should be easy to read, with easy Fonts. The Users should browse websites with ease and feel comfortable browsing through pages.

An example of a website with hard to read text would be

http://webpagesthatsuck.smugmug.com/Other/Bad-Web-Design/6837311_tyvTi#!i=1017891469&k=SfZiN&lb=1&s=O

The text is hard to leave and is frustrating. 

Layout and navigation

with a clear and simple layout users will be able to navigate the web page quickly and more easily. if the layout was complicated and untidy it will be hard to understand what is on the website and where everything is, this will make the site difficult to navigate causing the user to get frustrated causing them to leave the site.

an example of this would be 

 http://www.shmarketing.co.uk/

this website is confusing and has really bad navigation, which is frustrating and will cause people to leave immediately. 

an example of a good layout would be 

http://www.themezilla.com/
the layout of this page is really clear and simple so everything is easy to find.

web design step by step

This is a step by step on how i created my website

To start i created div tags for the layout of the page. i created a contain div then add the other div tags in side of the container. next i edited the div tags width referring to the 960 grid i used whilst design my website.    

Next I went on site, new site to set up the directory file for my site. then i created a a new style sheet and attached it to my home page. with this I will not have to redo the changes to the div tags on each page and it will save me a lot of time.

I then added a reset CSS code provided by Meyer to my CSS page. This is so my website's div tag would stay the same regardless of which browser it 

is viewed on, in other words, the css reset code makes my website cross platform.

next using the style sheet i edited the position and height of each div tag on my home page. Then I added a background image to some div tags and turned off background-repeat. after that i added 4 more div tags to the menu div to add the text for the navigation bar.

i then add and positioned my logo with the style sheet as well as adding the text for the navigation bar. for the footer i added a background image that i had made in Photoshop with some web icons on it.

next to add the images in "latest work" i reside the images in Photoshop first so they were not to big. then i clicked inside the correct div and went on insert image and repeated this step for the other images.

after finishing my home page i created my other pages by simply clicking on save as and changing the name and make a few changes to each page such as the text in and deleting the latest work div. next i added the links to each pages on the text in the navigation bar and customised the link colour in the css.

next i added the content to each page such as text, images etc..  when i finished this i found a free carousel called gallery view. i then put the folder in the website folder and pasted the code and linked it to the javascript in the folder. to finish off i customised the size and images in the carousel. With this my website was finished.

final web site design

Here is my final website design

basic template tuturial

This is the template i created in adobe dreamweaver cs5 using a tutorial.



i found this tutorial well written as it told you how to do every thing in detail and what  each thing did so you were not just copying and not understanding how it worked. this tutorial helped me learn how to use the coding side in dreamweaver as i already knew the basics of the design view side of dreamweaver. the first thing it showed me how to do was create "div tags" which are basically box's for holding text or images in to make it more tidy and easier to organize. i then learnt how to customize the div tags in a css style sheet. in the style sheet i positioned the div tags on the page and changed the size. i also learnt to attach the ccs style sheet so later on i will not need to edit the text and images on every page as i could do it once on the style sheet and it will make changes to all pages. i also learnt how to create links and add spry menus.

in my opinion this tutorial was really useful and the skills i learnt from it will help me when i create my own portfolio website or any other website. i would also recommend this tutorial to anyone interested in learning how to use dreamweaver