Task 1
My profile for code academy
http://www.codecademy.com/microRockstar75262
My Badges
I managed to complete JavaScript basics, HTML and CSS basics. Out of the two I preferred to do JavaScript this is because I think that this had more of a variety so I was learning something new each lesson. On HTML and CSS it just seems to repeat things over and over again causing me to get bored.
Overall I did not struggle so much with HTML and CSS basics, I got a few things mixed up but I did not find it very hard. I think that if I do the more advanced stuff I will struggle a little bit.
On JavaScript I struggle a lot with it, forgetting to add ";"in some points on putting "{,}" in the wrong points, or forgetting to add them altogether. But overall I preferred to use JavaScript because of the variety of things you can do in it.
The HTML and CSS seems to repete the same command over and over again, like opening something using < > and closing something using < / >, then just adding some information in-between them. Overall I found this fairly easy.
After a few times of repeating these lessons, I am now starting to understand the basics more with JavaScript and I am able to go through the lessons with little error.
JavaScript
What is Javascript
Javascript is another type of code and is mostly used as part of a website. This is similar to both HTML and CSS however you can do a lot more advance things with it like make, slideshows and games. But this is a lot more advanced to learn.
Using JavaScript To Make My First Game.
What I had to do here was ask the person playing what there age is. I done this by setting a variable and then adding a question. After I set an if / else statement to display another message for if the person playing is older or younger the 13. If the person is younger the 13 this message will be displayed "Your allowed to play but I take no responsibility" and if they are over 13 it says "Play on".
For the next part I need it to display a story and get the player to answer a question. What I did first was type console.log so that a message is displayed to inform the player on whats happening. After I needed to set a variable so that the player can answer question, this is done similar to what I did before, but I just changed the question to something else. Now I need to add and if / else statement so the game would respond to and answer.What I did next was if the user answered "Yes" then a message will be displayed. This is done by starting an if statement then putting a message for if the user answered "Yes". Then putting a console.log do display a message. Now I need to set up an if statement for if the user says "No" this is exactly the same as the first part, but I will have to change the console.log message to something different. After I have done this, the user can now respond to the question asked at the beginning of the script and I can move onto the next part of the game.
Once I finished that part the game is now complete and is playable. Its not a very advance game but it works. I enjoyed making this game, but I think I will need to go over it a few more time to understand it completely. But anyway I completed it and was awarded a badge for it.
HTML & CSS
What is HTML and CSS
HTML(HyperText Markup Language) is the standard language used in creating a website. The code consists of parenthesis at the start, to open a line < and at the end to close a line />. Without this the line of code will not work and can break the website. At the start of every code for a website there need to be <!doctype html> this allows the browser understand what language you are using.
CSS(cascading style sheets) is used to link with the HTML to allow the browser understand the look and formatting of the website.
Building Your Own Webpage
For this next tutorial, I will be using a lot of the basic I learnt from HTML and CSS to start creating a basic webpage. When I first opened the tutorial, there was an example webpage made to show me what I should be aiming for by the end of this tutorial.
For the next part I had to open a "<head>" tag before the body then change the font size of the body. To do this before the information I had to put <h1>, changing the numbers will decrease the size of the font. After the text I have put I had to put </h1>, this is so that it will not affect the rest of the text.After I had to open three paragraphs in-between the body and write some information in the paragraphs. Through out this part of the tutorial I am just using things I have learned from the first tutorial of HTML and CSS, so at this time im not really learning anything.
Next I had to include an image into to the website,this is done by opening another part "<img src = link to image/>, this will allow an image to be displayed on the screen.
Then I had to add two links into the website, this is done by opening it by using <a href = "adding a link/>.
Once I have done this the website was now complete. This was very easy and I did not get stuck, this was because all of the things I had to do I learnt in the basic tutorial.
Once this was done I earned a badge for building my own webpage.
HTML Basics 2
Once I opened up the lesson, I had to open up a title and create a paragraph. The next thing I had to do was make a subheading and start making a list. To do this I had to type "<h1>" for the title, and type in something. Then I had to start the list by typing "<ol>" , then <li> to make the list get started. I had to repeat this process two more times.
This step was not very difficult because I already know how to do most of it, apart from making the list.
After creating several lists, I then moved on to making commets. Comments makes the line of text only visible to the script, not to everyone else, so this is helpful for if you want to leave your self some notes for guidance. 
On this next part I learnt how to change the size of fonts and colour in a different way, I think I will struggle to remember these, but it should stick after some time.
The code I used was:
<p style="font-size: "size"px>
<p style="color: "colour"">
Another thing that I also learnt a bit further along is how to change the font style.
<p style="font-family: "font">
To link more of these together in one line I would have to separate them using ";" this will allow it to understand it as more then one command.
After once I understood how to use colour, I then had to make the background certain colour. This is done very similar to how the text is done but I type background in front of colour.
<body style="background-color:"color">
After learning how to colour text, background etc, I them moved onto make certain work stand out and put them in italics. I done this by surrounding a word with this:
<strong>"text"</strong>T
his makes the work bold
<em>"text"</em>
This make the word italic.
Once this was done I was finally awarded with the badge for completing this tutorial.
Task 2
Throughout this task I will be look through many different website, ranging from very good, to very bad, explaining what makes there website what it is. I will be looking at things like functionality, accessibility and web standards.
Website 1 : http://www.wholesalemeatscoventry.co.uk/
The first website I will be looking at is a website about meat. At a first glance it does not look to bad, but while you are on the page there is music playing on repeat. I have chose this website because there is a lot of things wrong with it making it a bad website.
Functionality, Responsiveness and Speed
The first thing I will be looking at on this website is the functionality, Functionality is about how well I can navigate through the website. On this website there is not much to navigate through, but overall it is very fluent with what is there, the links work fine and it runs very smooth.
The next thing is how responsive and the overall speed of the website is. This means that if I click something on the page, how fast or slow will it respond to me clicking it and also how much I can click on. Just scrolling through the website its self, it is very slow, when I stop scrolling it still slides down rather then just stopping. The first tab I clicked on was "About Us" on here there is a gallery of what they have to sell and a little bit of description about them. Upon loading the page it takes a few seconds for the gallery to appear, so at first all you have is a little bit of text on the screen making it look very plain. The next thing is that you cannot click on the gallery to expand the images and the gallery its self in on a manual slideshow, with a set speed making the images scroll past slow. The next tab "Tradesale" is completely different. The images and text all load instantly with the page making this page a lot better then the last, however there is nothing you can click on here. On the next tab "Wholesale", this also loads instantly but there is hardly anything on the page with nothing to click on, there is a brief description about the quality of the meat with a image behind it. The next tab is "Special Offers", this is there best page on the website. The reason is because there is a lot more things to interact with on here and it also loads very fast. At the top of the page you have filters to section the meat down and that also loads almost instantly with a slight animation of it sliding up. One thing bad with this is that when you click the filter there is a box missing at the start and that takes a few second to load in. Apart from that all of the images are able to enlarge and load fast.
Finally the last tab, "Contact Us". This page is very plain but loads fast, there is also one thing you can click on and that is to visit there Facebook page. Overall the speed of the website is not the best because images not loading fast and the galleys not loading in right. The website overall is not very responsive, with things not loading very fast and also not much to click on. Making it very bad for the responsive side of the website.
Aesthetics
The next thing I will be looking at is the aesthetics. This is about how well presented the overall website is and other things like font style and consistency . The first thing I will be looking at is the colour scheme, I really like the colour scheme use on this page, the red is a focal point used on the home page making you look at the key parts of the page and the text stands out well. Its not too bright it just right, the overall colours blend together really well making the website very appealing. However they slack in colour on two on the tabs making it very plain with only a grey background and white text. What im looking at next is the font they used throughout there page. They use about five different font throughout, even tho that's a lot of different font they go together very well, making it look clean and appealing. The next thing is the overall layout of the page. Three of the tab have been layed out very well. the "Home" page, "Tradesale and "Wholesale", these pages use images and text very well to fill up the page making it appealing to the eye. The other pages don't use the full page to well, the text only takes up part of the page and there is not many images on the page making it very plain.
Content and If its memorable
Next I will be looking at the content and look to see if the website is memorable in any way. This means that is there anything that stands out to me, like the style of the page, images or anything else really. On this webpage overall there is not much content really, they have put little information down on each page. The home page has got a lot of information and is appealing to look at, the next few pages including "About Us" lacks information and is just very plain. Overall they need to add a lot more information to these pages. The next thing im looking at is memorable, just from the home page alone I am going to say it is very memorable. This is because a catchy, but annoying song is being played on repeat and I think this alone will make me remember the website.
Overall this website is bad in a lot of ways. It can improve by increasing the responsiveness of everything on there, also they can improve the overall layout of the page to make it more appealing for people to look at. Even tho this website is memorable they could change the thing what makes it memorable to something else to make people return back rather then keeping them away.
Website 2 : http://beta.theexpressiveweb.com/#!/welcome
The next website is by Adobe and this is called "The Expressive Web", at first glance I was very impressed with the overall style and animations of the page loading alone. I have chosen this website because I think that this will be a good example of a well working website.
Functionality, Responsiveness and Speed.
Upon loading the webpage, it loads very slow, but you are greeted with a very cool animation that grabs your attention with all of the colours and text being built across the screen to spell out the name of the page. After clicking on the other tabs they also load at a similar speed, but with another animation being played. The speed of the overall loading would not be very good on other websites, but on here they made it work by adding cool looking animations to keep you entertained while exploring about. I think the overall speed of the website if perfect.
Next is the responsiveness and the functionality of the overall page. One thing that I really enjoyed when navigating around is that when I click a new tab, instead on loading up a new page, in changes in front of you with an animation for a transition of the page. Something that might cause an annoyance is that upon clicking a tab there is a slight delay, where nothing happens, this could be because of loading the next page that you are attempting to view. A functionality issue that I come across is that when in a page you get a tip in the bottom left. If you try to close it or re open it, sometimes there is an error when it wont close/re open so you cant read the information. Apart from that everything else seems to work fine allowing me to navigate through the website very smooth.
Aesthetics
After exploring through the website, the overall colour scheme is very appealing to look at, even knowing that there is not many colours used, they go together very well. Next the overall style of the website makes it stand out from most other websites, how the website is make to look like its built out of blocks makes it appealing to look at. Also when navigation about the website there are animations on each page where the blocks will build things, and the person viewing can edit things on the page from colour to speed of the animation to many other things. This allows the viewer to get entertained while exploring around and will make them want to come back to it. Next, looking at the different fonts, and the overall placement of it, they are very consistent with the positioning making the viewer comfortable on each page. Also they use a lot of different fonts, however they are needed because of how much information is on the page, this makes it clear to the user on what they are looking at, whether it be informative or interactive.
Checking the errors on the page
I used a website called W3C to check how many errors there script had. This website it self only had 10 errors. This is very little comparing it to bigger websites such as youtube which has got 936 errors! With little errors this allows the website to me more safe from hackers and overall it makes it more reliable to work.
If the website is memorable
Overall I think the website is very memorable, this is because I have not seen many other webpages like it. This uses animations to keep the viewer entertained, the website overall is very fast and fluent making it easy to navigate around. Also the information on the page is very clear and informative with little there making it appealing to look at, rather then making them not want to read it with too much information.
My overall opinion of this website is that its a very good example of good working website thats appealing for people to use. This would make them want to revisit it. Also seeing as this is still in beta it has a lot of penitential to grow even better then it already is.
ALSO USE THIS WEBSITE - http://validator.w3.org/
Task 3
During this task I will be starting to design a website for The Poetry Slam. I will be using my knowledge from the past task to produce a paper template to see how and if I can navigate around the website. I will also be producing several thumbnail sketches of how the pages can look, then choose some for the finalised pages. After all of that I will finally start to produce the website.
Paper prototype
These images above are an example of a paper prototype that I made with a group of people. The main reason I had to do this was to see if there was any problems with the overall functionality of the website, to see if I come across and missing pages or this not working. Doing this also can give us some ideas on the layout of the webpage.
Doing this was very helpful because I was able to find out some erros with the website and make changes before I finalised the idea. This would save a lot of time in the process.
Thumbnail sketches
Home page
About Us
Galleries
Booking events
Contact us
Feedback and reviews
Preferred designs (3)
Home page.
Out of the thumbnail drawing I have done for the home page. I have decided on choosing three and putting them into Photoshop to decided what will look best for the website.
Out of the three I have done I really like this layout, but I don't think I will use this one. This is because comparing it to the other pages it just does not stand out as well as the others. The layout just does not feel right.
I think that this one is the worst out of the three, it looks to clunky and messy for it to be uses. It just does not look appealing to me.
Deciding on the home page is the most important part of development of a webpage. This is because this will set the theme for the rest of the website, For example where the navigation bar will go, where the logo will go etc. The other pages will have a similar layout to the home page.
The template.
Developed website
Evaluation
This is the template of the homepage, there is the affiliation at the bottom of the page, but scrolling is needed. I come across many errors during the process of making this. I originally made the things in the website move with the page as I expanded it, which I did not want. It took me a very long time to solve this. However I found out that I was using float for the position which caused this. I should have used absolute. This was the biggest problem I had during the development of this.
When I start working on this again I will need to find out a way to add a slideshow banner on the top of the page, I will also need to add more content to the page to make it more appealing.
After getting feedback, I found out there is a lot of things I need to change to make it look a lot better. I should redesign the navigation bar and use my own idea for it, I need to change the colour scheme from the website. It was too blocky, I should try experimenting with different shaped boxes to give it more verity. Also for an unknown reason my website loaded up differently on someone else's computer, the social links are not there and also the search bar is not there.
Overall I am enjoying my time in producing the website, however I am coming across a lot of problems because of me being new to this. I need to improve on a lot, the colour scheme, overal layout and finding out the problem with it not working on other computers.
What I am going to do next is create another design using the feedback I got to give the website a better feel. I will be using the 960 grid on Photoshop to get a layout idea them move it back into Dreamweaver so I could put it into the website. Next I will need to add more content into the page to make it look better.
Making the changes.
This is the new design I have made for the website. From the feedback I have made a few changes to make it look more appealing. I have curved the edges of the boxes to give the the site more shape and I am happy with the outcome of this. It looks a lot more appealing. The boxes that are still square are going to be images put into it. I have decided to keep the same layout, this is because I like how it looks and it seems easy to navigate around.
The next step I will have to take is to move this design on to the template I have made using dreamweaver and start to make the changes needed.
I have decided to start a fresh, meaning I will make a new HTML and CSS code. The main reason for this is because the code I originally had was just a mess, I was struggling to find parts and I have put stuff that was not needed. Also starting a fresh will also improve my knowledge of how to code.
After looking at several websites and my own, I have decided on setting the navigation bar and logo as a float. This will allow them to stick to the side of the screen as you scroll down. I think that this is a good idea because there is nothing on the left side of the page, it allows the navigation to be easier and I think it looks a lot better.
How the design looks now.
I am happy with the outcome of the website however I still think I can change a few things, to make it more appealing to look at. One thing that I could change is the left side of the screen where the nav bar a logo is etc. I think I should add a background behind all of the left side of the page. This because I have decided to to keep the nav bar, logo, search and social media links froze in there position, so adding a background will make this look more appealing. One thing that is broken with the website is the slideshow at the top of the page, it was suppost to cycle through images and stop once clicked on, but for some reason this does not work and im unsure why.
After doing some research, I was able to get the slideshow working, to solve this I deleted the javascript I had, mainly because I did not understand it so I was unable to correct it. I then replaced it with this:
<head>
html:
<script src="https://code.jquery.com/jquery-1.3.2.js"></script>
<script>
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
</script>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<div id="slideshowcontainer">
<div id="slideshow">
<div>
<img src="Images/1.png">
</div>
<div>
<img src="Images/2.png">
</div>
<div>
<img src="Images/3.png">
</div>
<div>
<img src="Images/4.png">
</div>
</div>
</div><!-- end of slideshowcontainer-->
This was the code I used to get a working slide show. Using this combined with some css code, I was able to position it in the right place, but for some reason this caused another problem. This problem I was unable to solve. It was the slideshow slightly overlapped part of a text box and I was unable to move it down. I tried several different types of positioning, like applying a margin or padding, but for some reason it did not solve it.
What I have to do next is start to develop the other pages.
My final website
Conclusion
Overall, I am happy with how much I have learnt throughout the whole process of creating this website. At first, I had no idea on how to produce a website, or understand html, css and javascript. Now I have a basic understand of how html and css works together to build up a website, I also have very little understanding of javascript.
My opinion of the website its self that its not very good. There are several things that are broken, not complete or just dont look right. One thing that I find very annoying is how the slideshow overlaps the information box at the top of the page, I had tried multiple different ways of trying to get rid of this but I was unable to. The next thing I dont like is the content I used throughout, I feel like I should have used more images to make it more appealing to look at, rather then just flooding the page with writing. Next I should have changed up the colour scheme and created my own logo. Finally there are two pages that I think need improving a lot, these are the gallery and the booking events. On the gallery I tried to make the images enlarge on click, but for some reason the code I used just did not work, so I had to settle with using images just placed on the page. Next the booking events page is lacking in a lot of stuff. I was planning on having a calendar in the center of the page with key events that are going on, at the bottom of the page I wanted there to be some kind of booking part. I tried to to get a calendar, however I tried to use borders etc for it but they did not show and I was unsure why.
Getting feedback:
Person 1:
Pros
- 'Good use of Information, plenty of text and useful information'
- 'Good positioning of search bar/social media stuff
- A lot of images'
- 'The contact us page is very good and look legit'
- 'Slideshow works well'
- 'Colour scheme is the same as the original website'
- 'Slideshow is a bit off'
- 'Try changing the font up a little, its a bit bland'
Person 2:
Pros
- 'The slideshow is good'
- 'A good layout on most pages'
- 'A lot of pages'
- 'Good positioning of the social media and search bar'
Cons
- 'Somethings are clipping/overlapping'
- 'Change the colour scheme'
- 'Match the width of things in the same column'
- 'Make the images the same size, also make the enlarge on slick'
After looking back on the feedback I am happy with the positive feedback that I received, I did not expect to get that much positive feedback. I strongly agree with what they said I should improve on. Getting this feedback gives me a basic understanding of how I could improve the website a lot more also it allows me to pick up on the stuff I didn't notice. Using this feedback will allow me to improve on my web design skills a lot more making it look more professional.
Overall I enjoyed this unit a lot, learning a lot of new and useful skills to help me in the future.
My code
HTML
CSS(part of my css)
No comments:
Post a Comment