11/26/2013

Individual Mini-Project 15% | Rory Nee – A00190040

2013/1014 WEB DEVELOPMENT 3 ASSIGNMENT

Screen shots of each page

I made a website called “Top 25 Albums of All Time”. This website shows the information of the top 25 albums of all time chosen by music critics and view polls. I chose this topic as I like music and I felt that the information that I could gather would be suited to this project. I got this information form Wikipedia, rolling stones magazine and amazon.com.

The following are screen shots from the website showing the three different tabs that were created including the custom header and the custom footer.

Tab 1

Tab 1 including the Footer

Tab 2

Tab 3

Architecture Overview and Explanation

The architecture of this site is based on a REST-style architectures consist of a clients and a servers. I set up the server to have a database of album information so I could send HTTPRequest to request the required data.

E.g. to get back the full database of information I used

http://localhost/webDev2013/PhpProject1_assignment1.1/api/albums

or just one particular albums information

http://localhost/webDev2013/PhpProject1_assignment1.1/api/albums/8

On the client side I used Javascript, JQuery, Ajax and JSON to send requests to the “Slim” Framework and then on to my php function. The JSON Data objects are passed back in an associative array. Then in the javascript I can take the returning data object and use the information in the array to dynamically generate the HTML5 mark-up that is presented in the JQuery datatable, Carousel and dialogue boxes. All this data is styled using CSS3 to get the desired look and feel of the site.

Evaluation – how assignment objectives were achieved.

The outline of the objectives of this assignment is as follows.

1. Generate a theme using (jQuery) themeroller

The Theme that I chose was called blitzer. I chose it as it matched the colouring I was going for in my site.

2. Create a layout with using HTML5, Design the header, footer with copyright information using CSS3 features. Add content to the main division.

The layout was achieved using HTML5 and using CSS3 styling. The background is an image repeating across the x axis and the rest of the page colours red.

The Header (blue) and the footer (Yellow) were but styled in a very similar way but with opposite gradients. Some of the CSS3 elements that I have employed are as follows:

• Rounded corners o border-radius: 25px; o border: 1px solid indianred;

• Gradients

o background: -moz-linear-gradient(right, #ff0000 5%, #ffffff 30%, #ffffff 50%);

• Rounded corners on Buttons o -moz-border-radius: 7px; o -webkit-border-radius: 7px; o border-radius:7px;

• Fonts

o font-family: centuryGothic; o text-shadow: 5px 5px 5px #C0C0C0;

• Using a Custom Font that does not come as a standard with a browser

o /** Custom Font **/ @font-face {

font-family: centuryGothic;

font-weight: bold; src: url('./font/gothicb.woff');

}

I also made a custom favicon for the site shown in the URL bar and the tab along the top of the page.

Example of the code used - <link href="images/favicon.ico" rel="icon" type="image/x-icon" />

The “Main Division” in the centre (green) of the page. I used also used similar styling as described above. The Main division hold all the main content of the page including the tabs, DataTable and the carousel.

3. Site should display product information and be styles to match the site (DataTables, JQuery, Ajax, JSON), The more information link should include a picture I included a DataTable for all the “Top 25 Albums of All Time” albums to be shown in.

There is more information in the database. I chose to only show a certain amount of data and have the custom more details button show the extra information as shown in the screen shot below.

4. Create/download a JQuery Carousel with some product images and information.

I am using the JQuery BXSlider - http://bxslider.com/. All the data for the slides has been generated dynamically for the Carousel. The Slider/ Carousel has left and right buttons to cycle through the different reviews. It is set to play all the slides in order and then the user can pause the slide show to read any of the longer reviews. The user can also click one of the black dots under the slide to view a slide.

Using similar functionality to the DataTable I have also include a show details button to add some more functionality to the slide.

5. Keep you mark-up, Javascript and CSS separate. Marks will be allocated for this.

The markup, Javascrirt and Css file have all been kept separate.

6. All mark-up (included generated mark-up) should validate according to HTML5 standard with no errors

The index.html homepage passed the validated for html5 with one warning. The warning is in reference to the experimental features of HTML5.

Dynamic Pages

I was unable to test the pages that are produced dynamically.

7. CSS should validate according to CSS3

I also valadated the CSS using the valadatior and have posted the sussess images on the homepage.