Tools used to create website... M1
We used a number of different tools to create out website from designing it to actually physically making it.
Agenda and minuets
At the very begging we needed decide who is doing, this was done though a meeting to decide such factors, a agenda and minuets where used to track and say what the meeting took place about, what was decided and the action needed to be taken. Other meeting also took place to decide which design should be used for our final design and also a meeting with the clients. They were all done using this method of using agenda and minuets. This tool enabled us to find out exactly what the meeting was about and give us a chance to reflect on the project.
Create wire frames:
Used Paint and iPlotz both program can be used to create wireframes for a website. Both programs where fairly easy to work with, yet iPlotz because it was an online program it allowed me to edit the design from every computer with a internet access which makes the designing, easier to keep track of and most of all access. Paint is a program which is pre-installed on all PC’s, the images draw are saved as JPG or PNG file type formats which later they can still be edited. iPlotz is a paid for service but does offer 5 designs where users can try it for free, in paint the user can make as many different pictures as she/he may want.
Making Sitemap:
The site map shows how everything gets linked together between the website and from what page the person can go and cannot. This can be achieves by using Microsoft Visio, this program allows the lines to be drawn and pre installed images can be used. This is crucial if there is no layout of how the pages are going to be link there will be broken links.
Communication:
Blogger was a method that we used used for communication, this enables the team to post their progress on their blog enabling to understand whether they are on time with deadlines or just a method of telling the other team members of what they are up to. This is important as bad communication between team members can result to failing the project.
Making the site:
Komodo edit is tool that enables the creation of websites this allowed us to type in the coding and then see what the actually website will look like on a Brower. Komodo edit has this tool build in its self allowing us to only work on the coding where we can see later what the coding will look like on a Browser without physically going on to programs such Internet Explorer (Browser). This tool proved to save time but also made it easier by not doing the extra work if the page was created on note pad, the preview buffer in browser button also enabled the page to be opened in a external browser which also proved to save time by not having to look for the file but open it with a click of a button. I used the latest Komodo edit 7, which has the function of predicting text, this meant that every time I wrote such things as <li> it will predict </li> straight after it giving me the ending, making it easier by not having to type it out but also making sure that the website will function correctly by making sure it’s W3C compliant. The coding also was underlined every time something was spelled wrong or there was just no need for it to be there, also helping to make the website W3C compliant. This program enables to view a number of documents rather than the conventional one allowing jumping between files to copy/paste or just view the source. This program also allows the user to open a different project folder yet still viewing the original project opened, this allowed me to copy my teams work in to the software which then I saved in order to make it into my own work. Automated space from left hand side allows each item to be viewed separated and also making it easier to read, this allowed the work to be viewed quicker as well as indentifying if any mistakes are made when coding. CSS coding was used for making everything look pretty and adjust the size, fonts and width between text, pictures and boxes.
Some of the HTML and CSS coding used in the website.
Tags
|
Functions
|
li
|
Make a list
|
div
|
Make a box
|
table
|
Make a table
|
td
|
Button
|
©
|
Make symbol - ©
|
padding :0px;
|
Around item space
|
width:0px;
|
Size of item
|
background-image:url(image/grass.jpg);
|
Background image
|
display: inline;
|
How the list should appear on screen, in this example inline rather than going down.
|
display: inline;
|
Where item should appear on screen on left or right.
|
background:green;
|
Colour of text Box
|
href:
|
A link
|
Description of HTML:
HTML is mark up language i used to write my website coding in. This allowed me to write text in the forms, therefore allowing loading/downloading the page quicker. HTML is highly supportive language in result to this is used all over the internet almost all websites. Hence why all browsers are capable and supportive for this language.
HTML has "tags". There are many different types of tags, which allow for various kinds of content. Different tags have different features and have different out puts. All tags require openings and must be closed for the purpose of marking the beginning and ending points of the content. Within these tags, the user can add different text and content. This allows users to easily structure and organize their web page. the tags look like this when gets opened"<" or this when it gets closed ">".
Description of CSS (Cascading Style Sheets):
CSS coding is used to edit or change the appearance of a web page, by that images can be made smaller, text font be changed ect. The CCS style sheet must be linked to HTML document in order to work in order to change these features; they can be linked with a line of code:
<link rel="stylesheet" href="XXXXXXX.css"> (XXXX=the name of the CSS document)
The following are examples of what CSS can be used for.
<link rel="stylesheet" href="XXXXXXX.css"> (XXXX=the name of the CSS document)
The following are examples of what CSS can be used for.
· Adding borders
· Applying colour
· Editing height/width of objects
· Editing text
· Adding/editing margins
· Padding
Presenting the website:
This was done through Microsoft Power point as it’s a presentation based program which enabled easy adjustments to text, pictures and drawing items.
