Unit 34 Web Authoring and Design: September 2015

Wednesday, 30 September 2015

LO2 - Learning html

Heading Elements

Headings ah1 to h6.
re described by heading elements. There are six levels of heading elements:
The h1 element is used to describe the
main heading of the page.

Links

The defining feata element is used to create links.
ure of the Web is the presence of links. Clicking on links leads to other web pages. The
The a element is similar to the h1 or p elements, but it has two key differences:

First, it has an href attribute which equals the website you want to link to.
Second, you get to choose the link text that users see on the page.

Images
<img>
In addition to headings and paragraphs, a web page can have images. The img element is used to add images to a page.
The img element has an attribute inside the opening <img> tag named src. The src attribute has the address of the image.

Lists

<ul> and <li>

In addition to paragraphs and images, content can be presented as lists.
In HTML, a bulleted list is described using a ul element. Each item in the list is placed inside an li element.

Html & Body
<html> and <body>

Here's an example of a real web page:

Everything inside a web page is nested inside the html element

The body element contains the actual content of the web page - everything nested inside <body> and </body> shows up in the web browser

The doctype at the start of the HTML file tells the browser which version of HTML you are using. The doctype is not an HTML element, so it doesn't have a closing tag. The doctype ensures that your web page displays consistently when its visited from different browsers.

Tuesday, 29 September 2015

LO2 - Moodboard for Small Machines

After talking to the owner of the machines brand, I soon learnt that the products he made weren't targeted towards really young children (though they do play with them). The machines he made are a little bit more cmplex with Hydrolic features to them so they could move, and the parts seemed a little complex for a young child to understand.

Logo

On my moodboard I have the small machines logo to help show what the mood board for and the company it is supposed to represented.

Pencil Crayons

I have added these on to connote creativity which is an essential part of enjoying the Small Machines brand. Because it is all about building the models, which is quite a creative process that parents might have to teach small children about.

Wooden models

I took these pictures off the small machines website, just to show the type of products that they specialise and try to promote to a customer. As you can see on quite a few of them there is a hydrolic function that can be used to move the models without touching them, using some form of seringe mechanism. This also shows how technical that these products can be.

Catapult

The catapult is here to show the history aspect that they are doing for a museum, with model catapults from med evil periods etc.

Warhammer40K

Monday, 28 September 2015

HTML coding, what I have learnt

We have learnt about how you use triangular brackers when filling in web coding

These are the basic tags for HTML coding -

<html>      This stands for Hyper Text Markup this is essentially the language that is used for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.

<head>     This is basically the start or heading of a piece of text, this is essentially the title piece for your article or the prologue, for your text.

<style>      This is basically used to deffine style iformation and how you want your coding to render within a browser.

</style>      Anything with a slash before it means you are ending the the current tag so for style this is what you use once you have decided the style that you want your head at.

<title>        This is the title of the document

</title>       This again is the command you use once you have filled out the title tag with the information that you want.

</head>      This is for once you have finished the head, and filled out all the information that you want within it.

<body>        This is about all the other content in HTML that you want to fill in including paragraphs.

<p>      This is the start of a paragraph, between this and the next command you fill in all of the text that you would like to use.

</p>      This is the end of the paragraph and is what you use once you have finished filling in the paragraph that you have just started. This means that you are finished with the text you have filled out.

</body>       This is to show that you have finished filling in all your other content.

</html>      This is what you use once you have finished all of the HTML coding that you want which is part of the coding that you want to add.

Monday, 21 September 2015

Mind Map

Feedback Sheet

This is the feedback sheet, and my self assesment on what I need to do to get a decent grade in LO1. The highest possible grade for this task is a pass.

Wednesday, 16 September 2015

LO2 - Gant Chart (Content)

LO2 - Audience

GENDER

AGE
LOCATION
HOBBIES
SUB CULTURALGROUP

SOCIO NOMIC

Audience

The main audience for the Small Machines website would be males, as steryotypically men are more interested in crafting and building things. The age group varies, the people buying the product would most likely be parents that are Affluent achivers, so they have some spare money to buy their children toys. But the children using the product would probably be around the age of 9=

LO2 - Purpose

Purpose

The purpose for the Small Machines website is to help promote and sell products for the Small Machines company based in Sheffield. Another purpose of this website is to present the Small Machines brand in an appropriate way that will help attract their target audience, in turn helping to increase the number of products they sell, with the expected outcome being a higher profit margin resulting in an expansion of the brand. Also another hopeful outcome will be Small Machines having a more prominent internet presence, linking all of his social media to one place. Essentially making the Small Machines website the biggest hub that Giles Grover will have for his brand. A website that is similar to the Small Machines website and achieves all the hopeful outcomes is the Hasbro website located at http://www.hasbro.com/en-gb/. The purpose of the Small Machines website is to help advertise and sell wooden toy kits, that they create. I have reaserched into other websites that are similar such as http://www.toysrus.co.uk/toys/ the main purpose of ToysRus. It appears that the purpose is to They have achived this in a streamline way, the purpose of this is to also inform the user of the price, if its sold in stores, if it is available for a click and collect option and if it is available for delivery. They have presented this in a way of having a checklist for the user. Another part of the purpose for this is site is to showcase a professional look for an independent business. This site needs to be presented in a way that is visually appealing to a potential buyer.

An example of the Hasbro Website

LO2 - Planning a multi-page website

Small Machines – promotional website for ‘Small Machines’ range of wooden toy kits.

LO2 - Starter

Judging by the brief I am interested in making the Small Machines website, as this one seems the most interesting.

A few things that might be on the website

1) Gallery - that showcases the different models that are available for purchase

2) Store Finder - put post code in and it finds the nearesst store to you

3) Login Box - So the user has a secific account where they can add stuff to their cart and have otgher wodden kits suggested to them

Wednesday, 9 September 2015

LO2 - Wire Frames

Homepage

Hydraulics Range

Royal Armouries Range

Store

YouTube

Blog

About

LO2 - Moodboard

This is my Moodboard, within this I have added, things that I want the website to have such as, Searchbars, the different fon types and the colour schemes. And on my Moodboard i have also covered things that the target audience would like. For example creative toys like lego or duplo, pencil crayons to show creativity. I have also included the types of products thatthey may sell, whcih will be useful to look at while picking out the colour scheme. I also think that a searchbar would be very useful for a younger audience to browse, just so they can type in what they are looking for.

Monday, 7 September 2015

LO1 - Facebook Website Analysis

https://www.facebook.com/login/

Purpose

The purpose of Facebook is to allow the user to socially interact with friends ad family. Facebook also has an element of Citizen Journalism that allows the user to express their opinions on world issues. Facebook gives the user control of who thy add, what pages they like (which is dedicate to some form of tv show, film or public figure), who can and can't see their profile.

Visitor Needs

Facebook serves the visitors needs in many different ways, including the fact that they have a private messaging system which gives users the function to be able to message people without any of their 'friends' knowing what has been said. This can come in the form of a group chat where you can privatly chat with a group of people, or it can come in the form of a one to one chat. Facebook also has a commenting system which allows a user to comment on other peoples status, or allows you to reply to a comment each of which is something that helps enhance the social aspect to this form of social media.

Information Flow

Facebook like many other websites has a way of filtering, and seperating information for a user. The user has several different options including a Searchbar which allows the user to find other people on the site (unless the user has been blocked) and then add them to your friends list. Or you can use the searchbar to find pages that you like this could be anything from a band to a book. Following a page will giveyou information regarding the page you have followed. Other ways the information is presented as a user is by a navigation bar at

Features

The features on Facebook are at a huge ammount, including a searchbar at the top right hand corner of every page, to search for people you may want to add or a page you may want to follow. The whole purpose of the features on Facebook is to make it simple for a user as young as 13 to be able to easily understand how the site works. Also when you are using the actual functions and features the user is given features that allow them to private message people, like coments, block user and make group chats.

Benefits

The benefits of using Facebook is that it is a streamline, easy accesible way for users to keep in connection with eachother. No matter on their distance, or they can make plans. Or just generally chat. This service is made for talking to people you know in real life, or to get news on certain things/ topics that you like. Another good thing about this is that it can be used at anytime.

Content

FINISH WORK

LO1 - iTunes Website Analysis

http://www.apple.com/uk/itunes/music/

Purpose

The purpose of iTunes is to provide a fair music service which gives users the option to import m3ps they have downloaded and play them , but most importantly it allows people to purchase music online by downloading it. iTunes purpose is to provide a streamline, simple way to provide a mass audience a variety of different music as well as giving people an easy way to find new artists, because when you set up an iTunes account they keep track of the music your purchase and then make suggestions based on the choices that the user has made previously, to base their suggestions on. iTunes is catering to a mass audience based on the fact of how varied the music is Hip-hop and rap, R&B, Soul, Classical, Rock, the list is endless.

Visitor Needs

iTunes serves the users visitors needs in several different ways. Including giving the user the option to browse music by category, this would be particularly good for users who are interested in finding new music within genres that they already like and enjoy. The genere comes in a drop down menu and gives people the option to select a genre ranging from childrens music to hip-hop. iTunes also gives the user an option to preview music before they purchase it, which is great for the user because they can try about a minuite of a song before deciding if it is the right song or album for them.

Information Flow

The iTunes store has a few different buttons at the top of the page each one with a different icon on, giving the user the option of what media that they are interested in these options vary from Music, Films, TV Programmes and an option that has three dots on. These dots when hovered over gives you the less popular options that people may require including Podcasts, Books and mmany other different form of media that iTunes provides for. Also when you click on an album you may be interested in purchasing it comes up with other albums that artist has made, which is a good idea that may make users purchase more music if they are interested in finding out more about a specific artists discography. This provides the user information in a very streamline way that doesn't create an inconvinence for the user. Also at the top of the page iTunes has a search bar at the top of the page which essentially allows a user to filter through everything to find a specific piece of media they want wether that be an album or a Podcast.

Features

The features on iTunes are more suited for someone who is interested in music. As the program has many features for a user including the options to make playlists, filter your music by artists, albums and songs. iTunes also monitors a user history, it counts track plays. But most importantly they monitor previous things that a user has purchased and then suggests music based off what they like already. Also iTunes has a feature that is a genius playlist, where they select several different tracks for a user to purchase. With the latest update they have made a feature that allows a listener to have a free trial of iTunes which is a more recent feature that they have added.

Benefits

The benefit of iTunes is how simple it makes listeneing to music and viewing other media products. It has everything on one store and doesn't require a long drawn out process of going between programs

Benefits

The benefit of Netflix having a website is that it allows the company to share a range of films online in order to allow audience to stream it. This service is faster and doesn't require physical discs which is the more traditional method of watching films and TV shows. The benefit for the audience is that it allows them to watch films and TV shows on demand rather than having to wait for the film to download, or visit a store to purchase the product.

Content

Netflix makes use of an extensive collection of information that it has on the users through data they collect in relation to each particular user's account. There is a search bar on Netflix which allows user to find the specific film or TV show that they know they want to watch. Alternatively if they want to browse because they don't know what they want to watch, then they have recommended films and TV shows based on the genre or content of the things they've previously watched on Netflix.

LO1- Amazon Website Analysis

http://www.amazon.co.uk/

Purpose

The purpose for this site is to buy and sell goods online, this is rather similar to sites likes EBay. The site offers a variety of products to a user and targets a mass audience due to the vast range of products from watches to children's toys. This site does link to online banking as you pay for your products online using sites such as PayPal or a direct credit card.

Visitor Needs

As Amazon is all about buying and selling products users should be easily able to navigate around the site to find products that they are interested in purchasing, Amazon has achived this need for visitors by including a searchbar function on there site this is great for typing in a specific prodcuct. Also on their site they have included the ability for users to use categories to boil down through their vast libary of products to purchase, with categorys that include anything from the Amazon Fire line of technology, to Movies, TV, Music & Games.

Information Flow

On Amazon the information is presented in a convinent way to simply browse through products,a nd by prices. An option they have is by a "Try Prime" button when you hover over this option with the mouse it comes up with a message that says -

FINISH PURPOSE, VISITOR NEEDS, TYPE UP OTHER BOX FEATURES

NAVIGATION BARS, TEX BOXES, PICTURES, VIDEO, BUTTONS, HYPERLINKS, COMMUNICATION, TEXT BOXES, HOW IS IT ORGANISED

USE CONNOTATIONS (WITH DESIGN FEATURES IE, WHY IS THE TEXT RED, WHY IS THEIR PHOTO OPTIONS ETC. INCLUDE CONTENT MANAGEMENT

ANYTHING INTERACTIVE IS WEB 2, HOW HAS TECHNOLOGY CONVERGED, IS THEIR SYNORGY? INTERACTIVE ADVERTS ETC. web 3 is when the web learns about you, IE MUSIC YOU HAVE DOWNLOADED

100 WORDS ON FEATURES

LO1 - Pixar Website Analysis

http://www.pixar.com/

Purpose

The purpose for Pixars website is to advertise and showcase their upcoming films and recent releases. Its a simplistic looking website due to the navigation bar being one of the main focuses on this website. This includes informing people on Feature Films, Short Films, Careers and a general bit of information about Pixar in general. The main audience for this website is a mass audience, as Pixar don't produce films for a niche audience and are on a great scale as far as popularity.

Visitor Needs

Pixar have different pannels on their website which easily navigates between each of their films, showing the user their filmography which is something a user would most likely require from a website for a company that specialises in films. This is presented in the way of a scrolling bar to the user. Another thing that this site has that a user may need is to find out about Pixars social accounts which is located as a link at the bottom of the page.

Pixars website is presented ina very streamline way, a way that they have achived this is by having a scrolling bar. The bar includes all of the films that Pixar has released in their filmography the bar has an arrow on the side of it which when clicked, goes to another set of films they have released before. Their is also a history of Pixar option that is presented in the way of a slideshow, the informations goes from the start of the company to modern day releases by the company. Another way information is presented on the Pixar website is by the job vacencies on the webstie. This shows the different jobs, when clicking on a job it leads the user to more about what hte job owuld entail and how one would apply for the job.

Features

Pixars website is rather basic, but give the user just what they need. These features include a navigation bar, this is useful for a user to swiftly navigate between each film. Once clicking on a film a drop down menu feature appears, once clicked the drop down menu reveals a series of videos that are all different trailers related to the film that has been clicked. Another feature with the Pixar webstie is if you click the logo at the top left hand corner of the page it takes the user back to the home page.

Benefits

The benefit of Pixars website is that it gives people who are fans of Pixars films a chance to view their filmography. And trailers from other films that they are interested in by the same company.Another benefit from the Pixar website is the fact that it has career options for a user. This is useful for people who are interested in getting into the animation buisness, but they also have other jobs available such as going into finance, which is all about projecting how much money a specific product will cost to produce.

Content

The content on the Pixar website has the main focus on their films, the upcoming ones seeming like a much larger priority than their previous ones.

Content

LO1 - BBC Bitesize Website Analysis

BBC Bitesize

http://www.bbc.co.uk/education

Purpose

The purpose for BBC bitesize is to help educate a mass audience of students at a variety of different levels throughout their schooling life. They offer this service with a variety of different options including the level you are working at and where you are from. The age range for people who use BBC Bitesize starts at Keystage one which us around the ages of 5-7 and ends at GCSE level which is at the age's between14-16, BBC Bitesize also covers all the ages inbetween. The main purpose of BBC Bitesize is to help students carry on and revising their education this could be for several reasons including to revise for tests, catch up on things they may have missed in class and possibly other reasons.

Vistor Needs

BBC Bitesize users have several needs when using Bitesize. One of the needs is to have the ability to specify which level you are working at, this is to ensure that the user is doing the appropriate work to fufill their revision needs. Also BBC Bitesize has the option to select where you are from so it ensures that you are doing the correct spec. The options are England, Northern Ireland, Scotland and Wales.

Information Flow

Bitesize gives the user to select the level they are working at by including hyperlinks, which when you press the level you are at it takes the user to the desired page with the work on for their level. So if I cicked the GCSE option it will take me to a page that shows each individual subject that I can revise. The fact that they are in the form of hyperlinks is useful ebcause if you misclick a level by accident you can just hit the back button and it will take you back to that page. Also if you already know what subject you want to revise BBC Bitesize has a drop down menu that when pressed showcases the different options that a user can select from and then allows you to choose the level. Also located at the top of the Bitesize page is a navigation bar that when clicked will lead the user to different services and websites the BBC offer including BBC iPlayer and many other different options.

Features

The features on BBC Bitesize are at a plentyful ammount, including a searchbar at the top right hand corner of the homepage function. This is used for the user to find specific subjects or topics that they are interested in revising. The whole purpose of the features on Bitesize is to make it simple for an audience as young as 5 to be able to easily understand how the site works. Also when you are using the actual revision materials the user is given an almost powerpoint expierence, that is far more interactive than an actual powerpoint. As it has questions for the user to answer os they can make sure that they have learnt all the information that has been presented to them. Also the powerpoint style of learing is presented with lots of colours and animation. Most likely to keep the user interested in the content that is presented to them.

Benefits

The benefits of using BBC Bitesize is that it is a streamline, easy accesible way of students being able to educate themselves and revise outside of a schooling enviromenet. This service will keep a students attention for far more longer than a regualr revision guide text book due to the ammount of animmations and other uses of the site. Another good thing about this is that it can be used at anytime, unlike the average schoolday which has a set starting time and ending time, whereas this site is up 24/7 and doesn't have a limit for how long you can use it.

Content

The content is presented to the user in a viraty of ways, once you select a subject and finish revising everything within the specific field of what you selected it will come up with a "where next?" option for the user to click on which comes up with sugested topics for the user to move onto next. An example would be learning about KS1 computing and choosing the subject "What is an algorithm?" after finishing the entire revision sessions about alorithms you then click the "Where next?" option this will suggest theuser to move onto topics such as "What are computer bugs?". This is very useful for the user based on the fact it doesn't involve them having to go all the way back to the homepage to find hat they will probably desire to learn next. Also Bitesize has an extensive ammount ofl subjects for all key stages which is presented in tehw ay of a drop down menu.

LO1 - Understand a Range of Contrasting Commercial Websites

Lo1 has 6 components

a) Purpose

b) Visitor needs

c) Information flow

d) Features

e) Benefits

f) Content

Today I will be looking at purpose;

Information - public services, education and news and helps infrom people on different topics

Advertising - This can be for anything, a radio show, a film, a company and tv programs just to name a few

E-Commerce and Services - This includes Banking services, and buying things online of websites like Amazon and Ebay

Downloads and Streaming - Including music, films from websites like Netflix, and resources for education like Creative Commons

Social Media - Which is all about networking and citizen journalism which is all about telling people about your opinion