Browsers are separate applications that display the webpages that you type in. Each browser needs different requirements in order to display the website correctly, such as your style sheet, widgets, plug ins etc.
The 5 main browsers are Internet Explorer, Mozilla Firefox, Google Chrome, Safari and Opera. In order for the website to be compatible with the browsers for things such as borders, shadows, gradients and animations etc you need to insert the following code before each bit of CSS you put in. for example, if you wanted a border around your tables, you would put the following in:
- border-top-left-radius:16px;
- border-top-right-radius:16px;
- border-bottom-left-radius:0px;
- border-bottom-right-radius:0px;
- -moz-border-radius-topleft: 16px;
- -moz-border-radius-topright:16px;
- -moz-border-radius-bottomleft:0px;
- -moz-border-radius-bottomright:0px;
- -webkit-border-top-left-radius:16px;
- -webkit-border-top-right-radius:16px;
- -webkit-border-bottom-left-radius:0px;
- -webkit-border-bottom-right-radius:0px;
I have tested my website on:
Mozilla Firefox:
Google Chrome:
Safari:
Opera:
My website seems to work exactly as i want it to work like on each browser. I couldn't find any errors on them. I think this is because my website is relatively simple and straightforward with just an embedded flash video of a trailer and also my 4 widgets to go wrong. The rest is just text and images.
Mozilla Firefox:
Google Chrome:
Safari:
Opera:
My website seems to work exactly as i want it to work like on each browser. I couldn't find any errors on them. I think this is because my website is relatively simple and straightforward with just an embedded flash video of a trailer and also my 4 widgets to go wrong. The rest is just text and images.
I have used 3 widgets which i got off of widgetbox.com by copying the code it gave me to insert into Dreamweaver. These widgets include searching for movies and searching for particular movie news that you specifically want to look at. There is also one widget that displays the current top ten grossing movies on the Box Office, which is kept up to date every week. This widget lightens my workload on the website so i can focus on other parts such as my rankings (on the top right, which include Top ten movies this week and top ten rentals this week), my links (on the top left), twitter news feed (in the direct middle of the website) and also keep on top of the video display on the bottom of the website which i try to update every week if there are enough official trailers/teasers released that i can find. I have also used another widget that i got from twitter by copy and pasting the code that i was given after i customised the widget to my preferences, the code i use looks like this:
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 8,
interval: 30000,
width: 550,
height: 440,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#006399',
color: '#ffffff',
links: '#03eeff'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('Seenit517').start();
</script>
As you can see i altered the width and height to my preferences (Height - 550 and Width - 440) changed the background colour to '#ffffff' which is white to fit in with my background colour of the website. In the actual news feed part of the widget i set the colour to '#006399' which is the dark blue colour and the colour of the text is set to '#ffffff''once again which is white to make the text stand out so it is easily readable for the viewer.
How does the template relate to the final thing?
This is my website template that i made in Photoshop:
And this is my final website:
My template looks very different to the final website.
- First I had to scrap the diagonal lines in the background because it became too hard to keep continuous on the page without colliding with each other because of the tables, and ruining the overall look of the website. Here is an example of one of the problems i had:
As you can see, just above the "Top Rentals part, the background collides with the other table making the sidebar look tacky. It can also cause problems with your eyes if you focus too much on the lines as the text may not be easily readable or you could feel dizzy. This could cause a problem with my audience.
I replaced the sidebar by using a much simpler approach, using just a gradient as a background, and to separate the headings i used just a simple white line which blends into the middle of my website creating a seamless look, this makes it look much more presentable and usable for my target audience and much easier to deal with for me because i no longer need to waste time making the diagonal lines perfect. Here is a screenshot of the updated version of the sidebar which is now currently live:
- Secondly, I decided to scrap the grey border on my website also because it was causing problems with continuity as the lines were not all the same size so i just thought that i would leave them out and put a border in using css3maker.com, this proved to be much easier than messing with images in photoshop until i got everything right.
- I wanted to also grey out the background of each link and also put an image in on the far left to make the website look a bit more clean, but i didn't know how to make the links with the greyed out background in them so i decided to just leave it out as i think it doesn't make that much of a difference.
- I deleted the icons under the SeenIt logo because i decided just to use rollover buttons for Twitter and Facebook at the bottom of the page, plus there is also a link on my Twitter news feed widget to direct you to my Twitter page, and also i relocated the IMDb icon to the links bar on the left. The Youtube icon was just deleted because i decided just to put a weekly new video of trailers/teasers on the bottom middle of the screen.
CSS/Hyperlinks
I created a style sheet for my website for the font styles which looks like this:
this style sheet implements into the text 1 and text 2 classes a highlight to create my background in the left and right sidebars which is just a gradient image that i have created in Photoshop, I altered the code so that the image did not repeat as it would make the website look disorganised. This highlight made it much easier for me to implement the gradient in the sidebars, before i thought of this highlight technique i used the edit tag to create the background behind the text, this technique didn't work as it proved much harder to get the sidebars aligned correctly.
I have quite a few hyperlinks on my page. I have hyperlinks on each of the top films and rentals to direct you to IMDb which shows their rating; links to different movie/series relating websites on the left, 2 rollover buttons for Facebook and Twitter at the bottom of the page, a flash video that takes you to YouTube if you hover over the video and click on the text at the top of it, and finally a Twitter news feed that links you straight to my SeenIt Twitter page if you click on it.
Software Used
I first used Adobe Photoshop which is a visual editor to create my template for the website. I then used Adobe Dreamweaver to create the final version of my website. I also used FileZilla to import all of the files to my server to put my website on the World Wide Web.
Did i run any tests
I used W3C Validator to correct all of my errors that had been detected by the program, it gave me 59 errors and 27 warnings:
it then gave me the code to re-enter into Dreamweaver to correct those errors, most of the errors could have came from the widgets or the flash video as someone may have made small mistakes in the coding which would have been found by the validator. Here is a segment of some of the code it corrected:
Once i had copied all of the code into the website, i then put the newly corrected index.html file into filezilla and copied that over into my server. I then refreshed the W3C validator page to see what more errors i have left to correct, it came up with 3 errors and 1 warning:
These errors were validations errors which where simply to close some brackets such as </body>. I corrected those and refreshed the website, the validator came up with no more errors.
I noticed that some of my Hyperlinks for the websites on the left sidebar failed to work correctly, i then realised that i hadn't put the http:// at the start of each URL so it knew not to look into my server for the URL:
This is what one of my links looked like before:
And this is what it looked like after:
The link now works correctly.
I used FileZilla to transfer all of the information. I created a domain name and host username and password by using x10hosting.com. I entered the host name, username and the password into Filezilla then started to put all of the files used in my website into the server that x10hosting.com gave me.
Overall, i am very pleased with my website. I made a lot of mistakes in the creating and also implementation of the website, every mistake i made i tried my best to correct, for example i had lots of problems sorting the widgets in my website out, as the widgets on the right were not aligned properly and looked messy, i then learned that i had to create a table for each widget for them to stay aligned together. I also had problems keeping the images in the sidebar tables aligned so that they made a straight bar down the website, this took a lot of time as i had to correct the size of each image, and also the gradient in the text tables and widget tables had to be set so that they did not keep repeating themselves horizontally, so i went in to the code and set it to just repeat-y which makes it just go down instead of along the table. The final outcome of my website in my opinion looks very informative which is what is needed in a website like this as you want a lot of information on the upcoming movies. The website also looks professional as it keeps a simple approach with everything clearly presented, for example the links are set to one particular place, the top ten rankings are set to another place that is clearly visible, the widgets are put on the bottom sides of the website to keep a good amount of information on the bottom, and finally the important information concerning trailers and news is directly in the middle which should catch the attention of the audience fairly easily as it is straight in their field of view, which keeps it easy for the reader to watch the video and read the text.
No comments:
Post a Comment