205CDE: Developing the Modern Web. Assignment 1: Designing a Website. Scenario: D Bookshop

Size: px

Start display at page:

Download "205CDE: Developing the Modern Web. Assignment 1: Designing a Website. Scenario: D Bookshop"

Cleopatra Hunter
6 years ago
Views:

205CDE: Developing the Modern Web Assignment 1: Designing a Website Scenario: D Bookshop Introduction I decided to make a second hand bookshop website. There are some reasons why I made this choice.

1 205CDE: Developing the Modern Web Assignment 1: Designing a Website Scenario: D Bookshop Introduction I decided to make a second hand bookshop website. There are some reasons why I made this choice. Mainly it is because there are lots of bookshops that have poor design, sometimes it is hard to find the book you want and I think I could design it to be very simple. Colors Adobe Kuler The first thing I had to do is to create a design of my website on Adobe Photoshop. One of the hardest tasks for me was to figure out what colours do I want for my bookshop. I used an adobe kuler website to create the colours I need. Although first colors I choose were too different one from each other. I found out only when I was in the middle of creating a static website. A friend took a look at my website and said that the colors are too different from each other, she advised me to darken the navigation bar colour and brighten a little the body of the page. That is what I did and the final colours of my website on kuler are in the picture below. First one from the left is for header, second is for navigation bar, third is for all body of the page, fourth is for background of where content of page will appear, and the fifth is for footer.

2 Webpage Design Adobe Photoshop CS6 The start with the design was quite slow. I had many things to consider: logo of page, title, position of navigation bar and so on. As it is a bookshop, I decided to modify a picture of books in the Photoshop. I did not have many hesitations with the title, as I decided to make it simple The Second Hand Bookshop. I also added colors for navigation, content and footer. Image of the colored webpage is below. Creating navigation design was easy. I just imagined myself visiting the online bookshop. What information I want to see first? What is the least important? That is how I done it. In the footer I included same links as in the navigation. I also have plans to include more links in the footer, such as privacy policy, site map, links, but I will implement them later when I will create the website. Picture of the design with the navigation and footer links is below.

3 And finally, I decided to include a search bar for the design. The final design picture in the Adobe Photoshop is below. There are also some things I did not include in the design or changed such as Login/Register link. This happened because I figure out I forgot them only after I completed my design and started creating a static page.

Static Webpage Notepad++ My static webpage consists of seven hypertext markup language files and one cascading style sheet file. Homepage I decided to stay simple at the homepage.

4 Static Webpage Notepad++ My static webpage consists of seven hypertext markup language files and one cascading style sheet file. Homepage I decided to stay simple at the homepage. Firstly, some introduction sentences at the top telling what this page is about. Secondly, the most popular books section. I thought this is important because I think people usually check out what books are viewed most and expect them to be interesting. Every book has a separate field which has the book name with author as legend, some small introduction to book and a picture of it. Legend is made as a link, so if people are interested in buying it, they just press the link which follows in to another page (not implemented yet, test link provided). You can find a picture below. Authors Browse Author s page meant to have a purpose of searching for books by author. But later on I figured out that users might want to search not only by author, but by subject or title as well. So I decided to switch page from authors to browse. In the page you can choose how to browse: by authors, subject, title or year. Below that there are alphabetic letters. User press the letter needed and a list of books shows up starting by letter they choose. Then, depending on their choice they are directed to another page with that authors books (or subjected books, or books published that year etc. depending of their choice before). I made just a sample page to imagine how it may look. You can see a picture below.

Picture of this page is below. Sell Books I think you might guess how this page is used.

5 New Books This page shows the new books that are offered to sell. This page basically works in the same way as the Homepage just it does not have an introduction. Picture of this page is below. Sell Books I think you might guess how this page is used. This page is for people who want to register a new book that they want to sell. Sell Books page will consist of three separate pages. First one will be the login page, where users can login to their

6 accounts. If they are already logged in, they will be redirected to second page, where they have to enter the book information. The third page will be for choosing payment method and confirming the payment. My static webpage has only the second page, because I will show the Log in page later on. There are two ways user can enter the information about book. Either user enters it by itself or he just enters a barcode of the book, price and some extra information he wants. You can see an image of the Sell Books page below. About Us Not much to tell about this page. It just has some information about who I am and what is the purpose of the website. Contact Us Contact us page consists of three parts: my address, telephone number, and a contact form. Contact form requires user name, and the text, where people enter what problem they persist, or what they want to ask. When they press send, a message should be sent to my . You can see a picture below.

Log in / Register This page was not included in the design of my website. Although this is important, so as soon as I noticed my mistake I decided to fix it.

7 Log in / Register This page was not included in the design of my website. Although this is important, so as soon as I noticed my mistake I decided to fix it. There are two ways to get to the Log in / Register page. First one is the link on the top corner of the header. The second one is in the footer. Log in / Register page has two forms. First one is for existing users, to log in to their account. The second one is for creating a new account. When user press continue button they are redirected to another page where they can their bank details for future purchases (not implemented yet). Search Bar A simple search bar is provided in every page of the website. It is located in the bottom corner of the header. This decision was made because it is important for users to reach search bar easily, without having to look for it. Footer Footer consists of links. At the moment only links same as on navigation bar are provided. Later on more links will be added such as Privacy Policy or Site Map. Footer also has icons, which show that this webpage CSS file is validated by W3C. CSS Validation Webpage Cascaded Style Sheet is validated by W3C CSS Validation Service. No errors have been found in the CSS file. There are images that show CSS validation on the bottom of the page, inside the footer.

8 Web 2.0 Web 2.0 will not be excluded from my webpage. One of my plans is social networks. Nowadays social networks play big parts in most people lives. I am thinking to create a Facebook, Twitter pages, so people can share their thoughts about the website. Moreover, they will be able to share the books they just added to the website, so it is easier for them to sell. Every book will have a comments bar, where they can share thoughts about the book. People will also be able to subscribe to newsletters. Anyone can choose a category, what books are they interested and they will always get an when a new book is being sold of their choice. Accessibility will be included as well; I will discuss it furthermore below. Accessibility I have done many things to improve accessibility in my website. ALT tags. I have included alt attribute to every image of my website. This helps for those who use screen readers they cannot read images or videos so alt tag is key thing to describe what picture is about. Accessible forms. Every form or button in the website has a tab index included. Tab index is useful, because you can use tab button to scroll to every single part of the form, so you do not have to use your mouse. So user can fill the forms faster. If they do not want to use tab index, they can use access keys. Every form has a letter underlined in description on the left. If the user presses that letter on the keyboard, webpage directs cursor straight to that form.

9 Website is validated through W3C Markup Validation Service. No errors received. Browser Compatibility I tested three browsers for my website. Google Chrome and Mozilla Firefox worked perfectly, no issues were detected. Although I had some problems with Internet Explorer 10. Some links appeared to be highlighted in a yellow color after they were clicked (picture below). Another issue was command called autofocus, which should focus on the form commanded in the page. On Internet Explorer it does not work. On the other hand, Internet Explorer 10 fixed many issues that older versions had (lists, links, colors, headers and so on). Issues Occurred I had several issues when I was creating my static page. First one was with the page sections. Webpage was creating a blank space between different sections of page (header and body, body and footer). After doing some research in the internet I figured out that it is because of web browser leaving margins by itself. So I entered margins in the CSS file and the problem was gone. You can see a picture of this problem below.

10 Another problem I faced was with the Log In / Register link on the top of the header. The issue was that when I pressed the link, it highlighted, but not only the link the long horizontal line through the page. As web research did not give me any results I consulted with my lecturer and he made a point that it might be because of position of the link made with padding. Later on I switched from padding to margin and everything was fixed afterwards. You can see a picture below.

205CDE Developing the Modern Web. Assignment 2 Server Side Scripting. Scenario D: Bookshop

205CDE Developing the Modern Web Assignment 2 Server Side Scripting Scenario D: Bookshop Introduction This assignment was written using PHP programming language for interactions with the website and the