Thursday, 10 May 2012

Meeting the Criteria: A Guide

P1 identify the hardware and software components which enable internet and web functionality

P2 describe the role of web architecture in website communications

See my separate notes which explain the hardware and software involved to enable the internet to function and for us to use it (P1) and what various terms mean in web architecture (P2)

You need to list the main hardware and software components, ideally with examples of each for P1.

For P2 you should explain what the main web architecture terms mean in a brief summary for each.

P3 explain the uses of websites in organisations


List the main types of website with an example of each. (See the presentation about these). Explain how a business can use the web effectively e.g. for marketing, obtaining business or product information, providing training for staff, providing information for staff (intranet)


P4 design website components, considering clients' needs

Your draft designs for Peter or Judy

P5 use appropriate formatting tools, styles and templates to prepare content for the website

Your printed complete designs as web pages
An explanation of what software you used, techniques, how you started with a template or master page etc.

P6 create website to meet clients' needs

Checklist of what was required in the brief - with comments to indicate how you have (or maybe have not) met the requirements

P7 review website components, suggesting improvements

Review your site and comments in P6 and suggest areas of possible improvement

M1 explain the techniques that can be used on web pages to aid user access to information

things that can be added to websites:
A search box (Google can provide one that will just search within a particular site)
Good navigation
A site map
Make keywords links to explanatory or more information pages
Links to other sites which could provide further useful material
Alt text, Title text


M2 describe the use of interactive websites and what techniques can be used to provide interactivity

Examples of interactive websites and why interactivity helps them in some way
Techniques:
Image galleries (either showing more detailed pictures on mouseover or in links to galleries or changing images on the page)
Alt text and title text (shows extra information when mouse is over images or text )
Changing colour or style of buttons for navigation to show which are selected, visited or possibly inactive
Audio feedback or just as a background track
Video used to provide instructions or to illustrate a process, grab attention
Facility to use forms to request information, contact an organisation, submit details etc
E-commerce facility to purchase or order a product
Facility to download products


M3 use automated features in web development software

Examples of global changes that can be made to a website (e.g. theme or organisation name or logo change)
More detail about templates or master pages
Automatic spelling check
Automatic style and error check (missing links, inconsistent page sizes etc)
W3C code check to see if it meets current standards

M4 refine website components based on user feedback

Further review of your site for the client (or another client) and actual adjustments and improvements implemented

D1 evaluate different design features of a website

Consider how you might approach and develop the site should you start again - changes, things that worked well and others that you might wish to do better

D2 explain how a created website meets the defined requirements

Comparison of your client site with a detailed brief - with no unexplained outstanding items to meet

P1 P2 Web architecture notes

Website communications and definitions

Web pages, such as the one you are now reading, "live" on web servers all over the Internet. Those pages are written in HTML (HyperText Markup Language), a simple language that allows us to create hypertext links from one page to another. Designers put the content of the page (the text of the page) in the HTML file, and usually determine what the page will look like with a separate "style sheet" file. Style sheets are written in a language called CSS (Cascading Style Sheets).

Web browsers, such as the program you are using right now on your computer to see this web page, speak to web servers in a language (a "protocol") called HTTP (HyperText Transfer Protocol).

But before the web browser can talk to the web server, it needs to know the web server's IP address on the Internet - just as you have to know your friend's phone number before you can call him. So how do web browsers translate a friendly name like www.google.com into an IP address? By talking to a DNS (Domain Name Service) server.

Once the web browser knows the IP address of the server, it can make an HTTP protocol connection and ask for the page you want to see.

Web page

Every website is made up of one or more web pages -- like the one you are looking at right now! This text is part of a web page, and is written in the HyperText Markup Language (HTML). In addition to text with hyperlinks, tables, and other formatting, web pages can also contain images. Less commonly, web pages may contain Flash animations, Java applets, or MPEG video files.

Web server

Web servers are the computers that actually run websites. The term "web server" also refers to the piece of software that runs on those computers, accepting HTTP connections from web browsers and delivering web pages and other files to them, as well as processing form submissions. The most common web server software is Apache, followed by Microsoft Internet Information Server. Many, many other web server programs also exist.

The Internet

"The Internet" refers to the worldwide network of interconnected computers, all of which use a common protocol known as TCP/IP to communicate with each other. Every publicly accessible website is hosted by a web server computer, which is a part of the Internet. Every personal computer, cell phone or other device that people use to look at websites is also a part of the Internet. The Internet also makes possible email, games and other applications unrelated to the World Wide Web.

XHTML

Although all modern word processors and many specialized tools can be used to make web pages without learning XHTML at all, learning XHTML itself is a useful way to learn more about the web and provides more control over the results. Luckily, XHTML is very simple and quite easy to learn.
What's this XHTML stuff? What happened to HTML? XHTML is the latest generation of HTML. HTML was originally intended to be an instance of SGML, a general-purpose markup language. But many HTML pages do not comply with the requirements of SGML, which makes HTML tougher for computers to work with in useful ways.

In more recent years, the World Wide Web Consortium has taken steps to correct the problem. SGML has been largely replaced by XML (Extensible Markup Language), a new general-purpose markup language that is easier to work with than SGML. And XHTML, which replaces HTML, is a newer standard which complies fully with the requirements of XML but remains compatible with older web browsers.
A Simple ExampleHere is a simple example of a valid XHTML document. To try this out for yourself, simply create a new file called mypage.html with any text editor, such as Windows notepad. Paste in the HTML below, make any changes that please you, and save the document. Then pick "open" from the File menu of your web browser, locate the file you have just made, and open it. If you make further changes, you will need to "save" again and then click "reload" or "refresh" in your browser to see the results.

Of course, this is just a simple example. XHTML can do far, far more than this. A complete tutorial can be found at Dave's HTML Guide.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Title of My Page Goes Here</title>
</head>
<body>
<h1>Heading Of My Page Goes Here</h1>
<p><a href="http://news.google.com/">Follow this link to Google News</a>
</p>
<p>Here is a picture of my cat:</p>
<p><img src="cat.jpg" alt="Photograph of my cat"/></p>
</body>
</html>


The DOCTYPE tells the web browser what version of XHTML we're using. In this case I've specified XHTML 1.0 Strict, because this code is 100% compliant with the rules of XHTML. You don't need to understand this line in detail - just know that you should include it if you plan to write standards-compliant web pages. And you should.

Those who must use HTML elements that aren't included in strict XHTML can use the "transitional DTD" (Data Type Declaration) instead:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Understanding XHTML:
The XHTML elements in the page above are nearly self-explanatory. All elements that describe the page but are not actually part of the content appear inside the head element. All of the elements that actually make up the visible page itself are part of the body element. Everything between the opening <head>"tag" and the closing </head> "tag" is considered a part of the head element. The same goes for body. And everything should be contained within a single html element.

The text between <h1> and </h1> is displayed as a "level one heading," which is typically a very large, bold font.

The p element encloses a paragraph. In strict XHTML, most elements such as images and links must be enclosed in a paragraph or another "block-level" element.

The text between the opening and closing <a> and </a> "tags" becomes a link to another web page; the URL of the web page to be linked to is found in the HREF attribute of the <a> element as shown in the example above.

The <img> element includes an image in the page; the image is displayed at that point in the page, as long as the image file specified by the URL in the src attribute actualy exists. Since the src attribute I used here contains a simple filename, the cat picture will be shown as long as the file cat.jpg is in the same directory as the page. The same trick can be used in href attributes in <a> elements, to conveniently link to pages in the same directory.

The alt attribute of the img element contains text to be displayed to blind users. XHTML requires it, and since this text is also read by search engines like Google, it's important to include it - Google probably won't know your page is about cats if there is no text about cats on the page!

The "alt text" should describe the image in a useful way for those (including both computers and people) who cannot otherwise see it.

The <img> element has a / before the > to signify that it is not a container and that no closing </img> is expected.

Hypertext

Hypertext is text that contains hyperlinks. TheHTML  documents we see on the World Wide Web are the best-known example of a hypertext system, but it is not the only one. Hypertext doesn't necessarily have to include links to documents in other places; a simple hypertext system can link to places within a document or system.

Web browser

When you sit down and look at web pages, you are using a web browser. This is the piece of software that communicates with web servers for you via the HTTP protocol, translates HTML pages and image data into a nicely formatted on-screen display, and presents this information to your eyeballs -- or to your other senses, in the case of browsers for the vision-impaired and other alternative interface technologies. Web browsers also appear in simpler devices such as Internet-connected cell phones, like many Nokia models, and PDAs (Personal Digital Assistants) such as the Palm Pilot.

The most common web browser is Microsoft Internet Explorer, followed by Google Chrome and  Firefox browser . Apple's Safari browser is now the standard on Macs, and the Opera shareware browser has a loyal following. The Lynx browser is the most frequently used text-only browser and has been adapted to serve the needs of the vision-impaired.

HTTP

In order to fetch a web page for you, your web browser must "talk" to a web server somewhere else. When web browsers talk to web servers, they speak a language known as HTTP, which stands for HyperText Transfer Protocol. This language is actually very simple and understandable and is not difficult for the human eye to follow.
A Simple HTTP Example
The browser says: GET / HTTP/1.0 Host: www.boutell.com
And the server replies: HTTP/1.0 200 OK Content-Type: text/html <head> <title>Welcome to Boutell.Com, Inc.!</title> </head> <body> The rest of Boutell.Com's home page appears here </body>
The first line of the browser's request, GET / HTTP/1.0, indicates that the browser wants to see the home page of the site, and that the browser is using version 1.0 of the HTTP protocol. The second line, Host: www.boutell.com, indicates the website that the browser is asking for. This is required because many websites may share the same IP address on the Internet and be hosted by a single computer. The Host: line was added a few years after the original release of HTTP 1.0 in order to accommodate this.

The first line of the server's reply, HTTP/1.0 200 OK, indicates that the server is also speaking version 1.0 of the HTTP protocol, and that the request was successful. If the page the browser asked for did not exist, the response would read HTTP/1.0 404 Not Found. The second line of the server's reply, Content-Type: text/html, tells the browser that the object it is about to receive is a web page. This is how the browser knows what to do with the response from the server. If this line were Content-Type: image/png, the browser would know to expect a PNG image file rather than a web page, and would display it accordingly.

A modern web browser would say a bit more using the HTTP 1.1 protocol, and a modern web server would respond with a bit more information, but the differences are not dramatic and the above transaction is still perfectly valid; if a browser made a request exactly like the one above today, it would still be accepted by any web server, and the response above would still be accepted by any browser. This simplicity is typical of most of the protocols that grew up around the Internet.

Human Beings Can Speak HTTP
In fact, you can try being a web browser yourself, if you are a patient typist. If you are using Windows, click the Start menu, select "Run," and type "telnet www.mywebsitename.com 80" in the dialog that appears. Then click OK. Users of other operating systems can do the same thing; just start your own telnetprogram and connect to your website as the host and 80 as the port number. When the connection is made, type:GET / HTTP/1.0 Host: www.mywebsitename.com
Make sure you press ENTER twice after the Host: line to end your HTTP headers. Your telnet program probably will not show you what you are typing, but after you press ENTER the second time, you should receive your website's home page in HTML after a short pause. Congratulations, you have carried out your very own simple HTTP transaction.

IP address

An IP address (Internet Protocol address) is a unique identifier that distinguishes one device from any other on a TCP/IP-based computer network, such as the Internet. The IP address provides enough information to route data to that specific computer from any other computer on the network. In the case of the Internet, this enables you to communicate with web servers, instant messaging servers and other computers all over the world.

IP addresses are usually not entered directly by end users. Instead, DNS servers are used to map permanent and user-friendly names like boutell.com to unfriendly and impermanent IP addresses, such as 64.246.52.10.

An IP address is made up of four numbers, each between 0 and 255. For instance, as of this writing, the IP address of boutell.com is:

64.246.52.10

The most general information is conveyed by the first number, and the specific identification of a single computer within a single network is usually made by the last number. In general, delegation of responsibility for various portions of the IP address space is carried out by the Asia Pacific Network Information Centre (APNIC), the American Registry for Internet Numbers (ARIN), the Latin-American And Caribbean Internet Addresses Registry (LACNIC), and the RIPE Network Coordination Centre (RIPE NCC).

DNS Server

Every time you follow a link or type in the name of a website, such as www.boutell.com, that name must be translated into an IP address on the Internet. This translation is done by the domain name system. A DNS server is a program that participates in the task of providing this service. Some DNS servers respond to queries from web browsers and other programs, make further inquiries, and return IP addresses, such as 208.27.35.236, which is the current IP address of www.boutell.com. Other DNS servers have primary responsibility for answering DNS inquiries about names within a particular domain, such as the boutell.com domain. Every time a new domain is registered, a DNS server must be configured to give out address information for that domain, so that users can actually find websites in that domain. In most cases, web hosting companies provide this service for the domains that they host; it is rare for webmasters to run their own DNS servers. 

How DNS Usually Works
Let's say you want to visit www.google.com. Your computer hasn't already looked up www.google.com since it was turned on. Or it has kept that information for long enough that it considers it appropriate to check again. So your computer asks the DNS server of your ISP (Internet Service Provider - the people who sell you an Internet connection, companies such as BT or Virgin).

The DNS server of your ISP first talks to one of thirteen "root" DNS servers. The root DNS servers answer questions at the highest level possible: the top-level domain. For instance, "who is in charge of DNS for the com domain?"
In practice, your ISP's DNS server caches (remembers) this information for a significant period of time, and does not contantly harrass the root servers just in case responsibility for com has changed in the last five seconds. Similarly, your ISP's DNS server remembers other informaton for appropriate lengths of time as well to avoid extra queries. But let's assume, just for fun, that no one has ever asked your ISP for the IP address ofwww.google.com before! Now your ISP's DNS server knows which DNS servers are responsible for thecom top-level domain. So your ISP's DNS server reaches out and contacts one of those servers and asks the next question: who is responsible for DNS in thegoogle.com domain?

The response will list two or more DNS servers that have authority over thegoogle.com domain.

Finally, your ISP's DNS server contacts one of those DNS servers and asks for the address of www.google.com, and hands the response back to your computer.

As mentioned above, in real life your ISP's DNS server will remember all of this information. That means that a typical user will get an immediate response when asking for the address of a frequently-visited site like Google.

But how long is it safe to remember that information? After all, the IP addresses of servers do change, though usually not often. Fortunately, your ISP's DNS server doesn't have to guess! The DNS records that come back from the "upstream" DNS servers include an "expire" field that indicates how long the information can be kept before the authoritative server should be asked again.

Saturday, 28 April 2012

P1 P2 How the web works - a simple guide

As the BBC animation doesn't seem to work properly at College for my students, I have reproduced the individual sections here in sequence:











Monday, 31 October 2011

Client web site brief

Web design brief
Your task is to make some sample designs for one of two clients. You can choose between Judy, an alternative therapist, and Peter, a carpenter.


You need to present the same basic information but can use different images and display their text differently.

They will require the key features of web pages to be present:

  • their name, logo and/or business title 
  • a navigation menu providing simple access to the indicated pages 
  • a consistent page layout (although you can have a different home page if you wish, providing it still matches the general theme adopted) 
  • a footer showing some contact details and include ‘Design by [your name]’ on all pages except the Home page 
  • headings to identify the content of each page, which may be in an artistic or graphic style 
  • normal text should be in a font that will display properly on most users’ computers 
1. Make two different designs for one or two pages first

2. Your tutor will then discuss with you which is most likely to appeal to the client or be most suitable for later actual production

3. Using the selected design, or an adaptation of one of them, make samples of the other main site pages.

4. You can use any application for this stage of the design process but sketches are unlikely to be suitable for adequately reflecting what published pages might look like. As you may need to submit your designs electronically, digital representation (Presentation slides, DrawPlus sheets, PDFs etc) is recommended.

5. For images other than the clients or your own you should note the source and whether you are aware of its licence terms. (If a client did wish to use a particularly suitable one then you would have to ensure that it was either licensed for commercial use or seek permission to include it. At this stage you may assume that it is in order to include in your drafts).

6. More advanced students can move on to include indications of dimensions for the components of the pages (overall width, image sizes, menu area padding etc.) and to note the font names, colours and sizes proposed. This will be required when the designs are converted to pages for publication.



Output
  • 2 initial design samples 
  • All main pages in selected theme and style 
  • Image sources noted 
  • Licence status of images 
  • Annotations added for measurements 
  • Font details noted 



Tuesday, 20 September 2011

P3 Website categories

A simple guide to how the web works

This animation on the BBC site is a bit old but it illustrates the important elements involved in how web pages get from wherever they're stored to your screen.


The 12 simple slides and brief explanations are what you need for part of Task 1. Here's the link - not the picture.

http://news.bbc.co.uk/1/hi/technology/8552415.stm