5. Site and page designA well designed website is more than just a collection of linked web pages. It is a

coherent structure, easy navigable and where content can be found with minimum

effort.

Important advice before designing our website:

1. Design your website before you write a single web page: have a clear picture of how

your webpage is to be organized.

2. Pay special attention to the way in which the text is laid out and to fonts and colors. If

your text is meant to be printed out then make sure that it will look as good on the

printed page as on the screen.

-Examples of bad WebPages:

http://www.webpagesthatsuck.com/worst-websites-of-2011.html

Important advice before designing our website:

5.1 Web Style Guide The best practical guidelines for web authors can be found in:

1. The web style guide: The web author’s “Bible "contains useful guidelines on site,

interface and page design and is the reference which every web author should consult

before designing a web page. http://www.webstyleguide.com/wsg3/index.html

2. Jakob Nielsen’s website: another well known authority on web page design

5.2 HomepageEvery website should have a homepage which is normally the main point of entry to the site,

ideally with an easy URL.

-The homepage should be simple and short. It is just an entry point to the site and does not need

much content. Sometimes a homepage just consists of a company logo which you click on to

enter the main site.

- Conventionally the homepage for any web page is called index.htm or index.html.

Web servers will automatically search for an index file in a directory so you don’t

have to specify the name in the URL.

- We can just use http://www.ICT4LT.ORG/

-Instead of http:// www.ICT4LT.ORG/index.html

-Which makes things quick and easier to type.

5.3 Navigation aids

- A site that can not be navigated is useless.

- A common danger with any hypertext system (language in which

the web pages are written) is that of being lost in hyperspace. In

other words going to another web page and not being able to

navigate back to the home page

- If you don’t have fixed landmarks with which to orient you’ll

become completely lost.

- In websites with more than one page it is essential to have some

kind of navigation aid or map.

- From the most basic web pages: A homepage with site landmarks, links to other webpages.

- To the more sophisticated web pages : Might include a site map or a full-blown graphic diagram, an index , and a site search engine.

5.4 shared resources

• When you make a web page you have to introduce text,images that will be shared in many resources, you should put this files on the same directory so you can find them easily, to avoid duplication and to make site maintenance easier.

• Make a directory only with images, keep them just in case there is a problem with the server.

• When you want to insert a picture or a file in your web page your web page

editor will go to the common directory where you have your images and files. This are relative links. They are local.

• If you do not want to insert those pictures you will use an absolute links and you will have to specify the address.

Relative Link:

Are images in a predefined location in a specified directory where the tools, pages, images are stored for my web page. They indicate the location of a file relative to the document. Stored in a common directory in the web site folder.

-It is better for Web authors to link to files within the same website using relative links rather than absolute links, as this makes the file maintenance easier.

Absolute Link

The address has not been predefined. If I want an image that Its not already included in my web site folder directory I need to use an absolute address so the software knows where to look for it, the location. For example on a hard drive

How do relative links differ from absolute links?

-Visitors to your website should be able to find out the following information at

your website:

1. Who created the site?

- Would should give detailed information on our homepage under the heading

who are we?

- We should name the authors of individual modules at the top of each of our

web pages.

2. Who is the site aimed at? Who is your target audience?

3. When were the contents created and how regularly is the site updated?

We have to give the revision date at the bottom of each page.

5.5 What should I include on my website?

4. Is there a contact address at the site?

5. Is there a feedback form? If you find a mistake or you want to make a comment

you can use the feedback form .It should be found at the bottom of each page.

This form helps to cut down spam as it makes less obvious our email address to

spambots.

6. Evaluation of the website: quality and reliability of the content

7. Bibliographical referencing : recommendations given by the authors of the web

page on how to reference web pages

8. A disclaimer regarding links that we make to external sites:

-what type of links can we find in our webpage?

- who are the links managed by?

9. Who owns the copyright on the contents of the site and what are their term

uses?

6.Putting your website online -We have already designed our web page on disc. So how do we uploaded it to the World Wide WEB???

- in order to expose it to the world wide web you need to make it available online

- To do this you’ll need to obtain a web account on a computer connected to the

internet running a web server

- Then upload your website to the account.

So how do I get a Web account???

- Depending on your circumstances, there are a number of ways of getting file space

on a web server:

Work, Internet Service Provider, Free Web account providers, DIY- Running your

own server:

6.1 Getting a web account.

If your employer maintains a server for their employees.

Through Your employer you may run a Web server on which you can host

your site. For example University you can put you’re a personal page on

the server of your Company or University. you would have to have a link from

the index page to your web page.

Almost every ISP ( telefónica) any company

which provides you with the internet service. will provide its subscribers with

a web account ( only to access or use the internet ,provides service to the

internet) when we have our ISP we can use a specialists Web hosting services.

Providers such as Titan and Amen or yahoo. Provides individuals or

companies to make their websites accessible.

1. Work:

2.nternet Service Provider:

There are hundreds of free web space providers on the

internet, such as Tripod , which offers both free and paid-for accounts that offer extra

services. Probably free web pages wont offer you much space. Free Webspace.net. Is a

useful site where you can find suitable providers.

If you have an internet connection, either via

your ISP or your employer, then you can turn your own computer into a web server.

But it has some disadvantages:

1. If you do not have a lot of knowledge on Web server is very complicated. You will

spend a decent amount of time reading documentation.

2. Any computer being connected to the internet is at risk of being broken into. So if you

have sensitive data on your hard disc you may prefer not to use your computer as a

sever

3. Free Web account providers:

4. DIY- Running your own server:

6.1.1 Domain names- If you are setting up a new website you will need to find yourself a domain

name.

- Domain names start with http://www which is followed by a dot and then a

name that you choose for yourself .

E.g. the ICT4LT website’s name is http://www.ict4lt.org.

- Domain names always have two or more parts, separated by dots.

- The part on the left side is more specific and the part on the right more

general.

- The ICT4LT website’s domain name is divided into two parts: ict4lt and

org,

- The former being the body and the later indicating the kind of body it is.

- Org= organization, companies can normally be identified by com.

Check that the domain name

you have chosen is not being used by someone else. You can do this via most

hosting service providers or by looking up the name at a domain name

registration site such as Nominet or Register.com

Having found a suitable name, you then find an ISP or hosting service that

will give you adequate Web space for your registered name, and then you can

upload your website.

- How do you choose a domain name?

6.1.2 CGI Scripts – hypertext scripts

If you want to add interactive features to your website:

For example searching engines

-We have to use server-side CGI scripts, the server that hosts your website

will have like a library of scripts that u can use to insert on your web page.

Such as navigation bars , form code elements. We select from the menu

the type of element that we want to insert in to our web page and the

programming tool generates the hypertext code to perform this function.

• that is a program/ option used on the web server which process form

data.

6.2 Uploading your data:

To upload the website files to the web account we need to use FTP file transfer protocol Software.

It is used to upload web pages and other documents from

one computer to another computer. Is a protocol for transferring files.

- Many web authoring packages for example Dreamweaver or Front Page editors

which generate hypertext mark up code html incorporate an FTP facility so that

you can automatically upload files by just pressing a button.

-Some hosting websites provide you editor software to design and make your web

pages and provide the method to upload it like yahoo.

If you need an FTP Client to upload your webpage the best ones are:

For windows- WSFTP.

For Macintosh- Fetch

When do we use FTP?

6.3 Testing your websiteIt is important to test your site both on disc and online. You should check that:

- Most HTML editors now have an internal browser, that emulates a website , so that you

can change from HTML to WYSWYG (what u see is what you get)

- You can view your website before you transfer it to the web page, which is handy to use

when writing pages.

-To test your site you should do it live, as you can only see if it works by uploading it and

using it online.

-It is also interesting to check your web page in the different browsers such as Firefox,

Chrome…to be sure that the pages display as you want them to be viewed

1. The major links in documents work

2. You do not get any ‘broken image’ icons indicating that an image file can’t be found.

3. The document layout is as you want.

4. Your site works in all browsers.

6.3.1 HTML Validators

Useful tools for testing your site. These are

programs which check your HTML . Verifies that your code has been generated

by your editor consistent with the rules of HTML.

-Check to make sure that the code is right.

-W3C Markup validation Service is a popular online validator.

What are HTML Validators?

6.3.2 Case sensitivity

- A common cause of errors when generating a site is case sensitivity.

- When you program your web pages with an operating system that is different

from the host operating system. Case sensitivity may not be the same on

both. One may be insensitive to capital or small letters and the other may

not be. The results will be that some of the HTML codes will not be

recognized and will generate an error .

• Falta example

6.3.3 Checking for dead links-linkrots You need to check your site regularly for dead links. Some of the links that you have made

to interesting and useful sites will suddenly cease to work because the site you have

linked to has changed its URL, moved or just disappeared. This phenomenon is

sometimes referred as linkrot .

The main reasons for linkrot are:

Webmasters keep reorganizing their . sites, often without leaving redirecting

messages and consequently URL’S keep changing.

Some sites or pages simply disappear into the ether.

Many large sites are now dynamically built, i.e. database-driven. This makes

administration easier, if we want to add content to the site we just have to update the

database rather than editing HTML documents. But the visitors may have no option but

to enter the site through the “front door”.

.

-Most web authoring tools include a facility for checking links. At least for the

internal links.

-For external links you may have to use a link checker

Xenu Link Sleuth is a free software package that checks websites from broken links.

1. Keep a note of usefull sites, indicating the name of the person responsible for

creating the web page into the internet . If the page goes dead then you may be

able to find it by using a search engine.

2. Once you have created a site containing lots of links make sure that it is properly

and constantly maintained.

When checking your web page you should bare you have in mind:

- You may also be able to retrieve the contents of a dead link by entering

its URL into the Internet Archive ( aka the Wayback Machine) it is an

enormous archive that keeps records of revisions of websites at various

stages in their lives http://www.archive.org/

7. A resource for web Authors.• The HTMGoodies website is aimed at web authors and deals with all the

issues involved in designing, developing and maintaining websites. It is a

comprehensive resource for the web author from novice to expert http

://www.htmlgoodies.com/

8. Case studies

The following sites are examples of work produced by secondary teachers in

the . Using Web Authorizing tools

1.The ashcombe School’s Modern Foreign Language Website: Resources for

teachers and students. http://www.ashcombe.surrey.sch.uk/Curriculum/modlang

/

2.Language Online, Royal Grammar school, High Wycombe: Interactive

materials for secondary school learners of French, German, Spanish, Latin

and Italian. http://www.languagesonline.org.uk/

3. St Peter’s School, York: An extensive site for Modern Foreign Languages.

http://atschool.eduweb.co.uk/stpmlang/

4. Grahams davies’s favourite web sit http://

www.camsoftpartners.co.uk/websites.htm

8. Copyright issues

• When creating your own website we have to pay attention to copyright.

• If you use of materials from another website make sure that you seek permission

from the owner of the site if it is not clearly stated that the material are copyright

free.

• If you include a link to someone’s site it is normally polite to request permission.

• Be careful about using others peoples logos.

• Down lend or donate downloaded materials to collegues in other institutions.

• Do not publish downloaded materials in printed publications or on your own

website without the express permission of the copyright holder..

• Include your own copyright notice at your website, indicating information about the

copyright owner, the dates on which the materials were created and your terms of

use.