5. Site and page designA well designed website is more than just a collection of linked web pages. It is acoherent structure, easy navigable and where content can be found with minimumeffort. Important advice before designing our website: 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
5.1 Web Style GuideThe 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 consultbefore designing a web page. http://www.webstyleguide.com/wsg3/index.html2. 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.
How do relative links differ from absolute links? Relative Link: Absolute LinkAre images in a predefined location The address has not been in a specified directory where the tools, pages, images are stored for predefined. If I want an my web page. They indicate the image that Its not already location of a file relative to the included in my web site document. Stored in a common folder directory I need to directory in the web site folder. use an absolute address so the software knows where-It is better for Web authors to link to to look for it, the location. files within the same website For example on a hard using relative links rather than absolute links, as this makes the drive file maintenance easier.
5.5 What should I include on my website?-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.
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 content7. Bibliographical referencing : recommendations given by the authors of the webpage on how to reference web pages8. 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. 1. Work: 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.2.nternet Service Provider: 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.
3. Free Web account providers: 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. 4. DIY- Running your own server: 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
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.
- How do you choose a domain name? Check that the domain nameyou have chosen is not being used by someone else. You can do this via mosthosting service providers or by looking up the name at a domain nameregistration site such as Nominet or Register.comHaving found a suitable name, you then find an ISP or hosting service thatwill give you adequate Web space for your registered name, and then you canupload your website.
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.When do we use FTP? 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
6.3 Testing your websiteIt is important to test your site both on disc and online. You should check that: 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.- 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
6.3.1 HTML ValidatorsWhat are HTML Validators? Useful tools for testing your site. These areprograms which check your HTML . Verifies that your code has been generatedby 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.
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 checkerXenu Link Sleuth is a free software package that checks websites from broken links. When checking your web page you should bare you have in mind: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.
- 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 studiesThe following sites are examples of work produced by secondary teachers inthe . Using Web Authorizing tools1.The ashcombe School’s Modern Foreign Language Website: Resources forteachers 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
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.