10/10/11. Do: ◦ Use ALT tags for all graphics, especially navigation graphics ◦ Use black text on white background whenever possible for optimal legibility

Lecture 310/10/11

Do: ◦ Use ALT tags for all graphics, especially

navigation graphics

◦ Use black text on white background whenever possible for optimal legibility

◦ Use either plain-color backgrounds or extremely subtle background patterns

◦ Make sure text is in a printable color (not white)

2

Dos and don'ts for achieving usability in design

◦ Place navigation in a consistent location on each page of your website

◦ Use a familiar location for navigation bars

◦ Keep the design from scrolling horizontally

◦ Use one axis of symmetry for centered text on a page

◦ Encourage scrolling by splitting an image at the fold

3

Do:

Display static text in blue or underlined Use boldface or ALL CAPS for long pieces

of text

Leave too much white space--reduces scannability

4

Don't:

Make the user scroll to find critical information, especially transaction buttons and navigation links

Use horizontal rules to separate chunks of content

Alternate too frequently between centered text and left-aligned text. Most text should be left-aligned

Fix pages at larger than 800 x 600 pixels. Larger pages may force users to scroll horizontally

5

Don’t

SDLC –Systems Development Lifecycle ◦ A methodology for understanding the business

objectives of any system and designing an appropriate solution

◦ It also helps in creating documents that communicate to senior management the objectives of the site, important milestones and the use of resources

6

Web Development Lifecycle

Analysis: Study and analyze the exact requirements - cover all

aspects including the existing web system as well as audience.

Specification and documentation: Create system functionality document which - create

better understanding about the system to be developed. Also mention all the future requirements as well as all the costing details.

Design: design a small prototype or small working model -

suggestions from the customer and those changes should be noted down and should discussed and before moving onto the next phase.

7

WDLC

Development: transforms the detailed design and specification into

actual product integration of source code, database files and content into a single module or product.

Testing and Deployment: testing the product includes the validation of pages

through w3c consortium. The finished product is deployed.

Marketing and Maintenance: involves preparation of Meta tags, optimizing pages,

submitting the website to different search engine. Includes frequent updating of the web site to keep it fresh. Bug fixes and errors will be done during maintenance phase.

8

Continued…

Internet

Intranet

Extranet

9

Web Based E-Business

10

Example<html><head> <title> Lists </title></head><body> <h1 align="center">Introduction to Lists</h1> <p> Unordered lists: <br />

<ul><li>have discs as the bullet points for

each list item</li>

<li>allow the user to see a list of items</li>

<li>make the content easier to understand by structuring

the important points</li> </ul>Ordered Lists - three reasons for using them:<br /><ol>

<li>They give order to your list items</li><li>You can use them for "Top

Ten" lists</li><li>They can be used to create

"Tables of Content"</li>

</ol></p></body></html>

11

Special Characters with XHTML Some of these characters are:

◦ The copyright sign - ◦ The ampersand - &◦ The ‘greater than’ and ‘less than’ signs – ‘>’ ‘<’◦ Quotation Marks – “◦ The Euro -

In the case of the greater than or less than symbols, if you tried to include these as part of your content the browser would interpret them as the start or end to a tag

Ampersand - the browser would think that you are trying to include an entity or special character on your page

To use these symbols in our web page content we use special codes for these ‘entities’ with the format &code

12

<html><head> <title>BIS XHTML Lab Manual: Lab3-6 Using Special Characters</title></head><body><hr width="575" size="4" align="left" /><h2 align="left">A look at different tags:</h2> <hr width="25%" size="12" align="right" /> <p align="right"> We will be <strong>learning</strong> about the different tags to <em>create</em> and

<em>organise</em> the content of our web pages.</p><p align="center"> Quite a few of these tags will have different attributes which we will see allowing us to achieve

<sub>different</sub> <sup>presentation</sup> of <strike>our text</strike>.</p> <p>We will now look at some special characters and how to include them on our page:<br />The copyright sign : © <br />The ampersand : & <br />The ‘greater than’ and ‘less than’ signs: > < <br />Quotation Marks : " <br />The Euro : €<br /></p><hr noshade width="50%" size="8" align="center" /></body></html>

13

14

<html><head> <title>Adding Images to Web Pages </title></head><body> <h1 align="center">Adding Images to Web Pages</h1> <p> In this lab we will be downloading images from the Internet and using them on our page. The XHTML syntax for including an image on our page is: <br /> <img src ="<em>image.gif</em>" border= "1" alt=" <em>this is an image</em> " /> <br /> <img src = “ucc_logo.gif" border="1" alt="Image of a briefcase" /> </p> <p> The above image was downloaded from www.free-graphics.com - under the <strong>clipart</strong> section. If you want to email the people who run this site, use the following address: [email protected] </p></body></html>

15

16

Example 1<html><head> <title>Adding Links to Web Pages </title></head><body> <h1 align="center">Adding Links to Web

Pages</h1> <p>See our logo::::::::::::: <img src = "ucc_logo.gif" border="1"

alt="University College Cork Logo" /> </p> <p> Check out what's on offer <a href="http://www.amazon.co.uk"> Amazon UK </a> </p> <p> Click on the following link to go to the

previous example - <a href="list.html">List page</a>

</p></body></html>

17

Example 2

<html><head> <title> Adding Links to Web Pages </title></head><body> < <h1 align="center">Adding Links to Web Pages</h1> <p>See our logo::::::::::::: <img src = "ucc_logo.gif" border="1" alt="University

College Cork Logo" /> </p> <p> Check out what's on offer <a href="http://www.amazon.co.uk"> Amazon UK </a> </p> <p> Click on the following link to go to the previous example -

<a href="list.html">List page</a> </p>

If you want to email the people who run this site, use the following

address: <a href="mailto:[email protected]"> CIARA HEAVIN BIS </a> </p> <p> Click on the following link to go to the previous lab Documents - <a href="Link2.html">Link 2 Document</a> </p></body></html>

18

Example 3<html><head> <title>Adding Internal Links to Web Pages </title></head><body>

<a name = "top"></a> 

 <h1 align="center">Adding Links to Web Pages</h1> <p> The XHTML syntax for including an image on our page is: <br /> <img src ="<em>image.gif</em>" border= "1" alt=" <em>this is an image</em> " /> <br /> <img src = "ucc_logo.gif" border="1" alt="UCC Logo" /> </p>

<p> Click on the following link to go to the previous example - <a href="list.html">List

page</a> </p> If you want to email the people who run this site, use the following address: <a href="mailto:[email protected]"> CIARA HEAVIN BIS </a>

</p>

19

<p>The linguistic element of Latin courses offered in secondary schools and in universities is primarily geared toward

an ability to translate Latin texts into modern languages, rather than using it for the purpose of oral communication. As such, the skills of reading and writing are heavily emphasized, and speaking and listening

skills are left inchoate.<p>

However, there is a growing movement, sometimes known as the Living Latin movement, whose supporters believe that Latin can be taught in the same way that modern "living" languages are taught, i.e., as a means of both

spoken and written communication. This approach to learning the language assists speculative insight into how ancient authors spoke and incorporated sounds of the language stylistically; patterns in Latin poetry and literature can be

difficult to identify without an understanding of the sounds of words.

Institutions that offer Living Latin instruction include the Vatican and the University of Kentucky. In Great Britain, the Classical Association encourages this approach, and Latin language books describing the adventures of a mouse called Minimus have been published. In the United States, the National Junior Classical League (with more than 50,000 members) encourages high school students to pursue the study of Latin, and the National Senior Classical League encourages college students to continue their studies of the language.

Many international auxiliary languages have been heavily influenced by Latin. Interlingua, which lays claim to a sizeable following, is sometimes considered a simplified, modern version of the language. Latino sine

Flexione, popular in the early 20th century, is a language created from Latin with its inflections dropped.

</p>The linguistic element of Latin courses offered in secondary schools and in universities is primarily geared toward an ability to

translate Latin texts into modern languages, rather than using it for the purpose of oral communication. As such, the skills of reading and writing are heavily emphasized, and speaking and listening skills are left inchoate.

However, there is a growing movement, sometimes known as the Living Latin movement, whose supporters believe that Latin can be taught in the same way that modern "living" languages are taught, i.e., as a means of both

spoken and written communication. This approach to learning the language assists speculative insight into how ancient authors spoke and incorporated sounds of the language stylistically; patterns in Latin poetry and literature can be

difficult to identify without an understanding of the sounds of words.

Institutions that offer Living Latin instruction include the Vatican and the University of Kentucky. In Great Britain, the Classical Association encourages this approach, and Latin language books describing the adventures of a mouse called Minimus have been published. In the United States, the National Junior Classical League (with more than 50,000 members) encourages high school students to pursue the study of Latin, and the National Senior Classical League encourages college students to continue their studies of the language.

Many international auxiliary languages have been heavily influenced by Latin. Interlingua, which lays claim to a sizeable following, is sometimes considered a simplified, modern version of the language. Latino sine

Flexione, popular in the early 20th century, is a language created from Latin with its inflections dropped.

</p>

<p> <a href="#top">Back to the top of the page</a> </p></body></html>

20

Using Images as Links: Instead of a piece of text being placed

between the open and close anchor tags, we use the <img /> tag to place an image on the page to act as the link

21

Example

<html><head> <title>Adding Images to Web

Pages </title></head><body> <a

href="http://www.google.com"> <img src = "ucc_logo.gif"

border="1" alt=“ucc" /> </a> </p> </body></html>

22

link, alink and vlink attributes of the <body> tag to change the colours of links

By default, links will be displayed with a blue colour◦ If they are text, they will show up as blue underlined text◦ If it is an image with the border attribute set to more than

zero, they will show up as a blue border around the image Links change colour when you click on them i.e.

when they are active (usually red) When you return to your starting page, any links

whose pages you have visited will show up in a different colour again (usually purple)

We can change these colours using the link, alink and vlink attributes of the <body> tag

23

Example

<html><head> <title>Adding Images to Web Pages </title></head><body bgcolor="silver" link="white" alink="blue" vlink="yellow"> <a name = "top"></a> <p> The above image was downloaded from <a href="http://www.free-graphics.com"> www.free-graphics.com - </a> under the <strong>clipart</strong> section. If you want to email the people who run this site, use the following address: <a href="mailto:[email protected]"> [email protected] </a> </p></body</html>

24

Forms These days most websites are interactive in

that they allow the user to request information or send information to the web site

Use forms, in conjunction with some scripting language like JavaScript to get information from the user and process this information

25

Forms The form element (<form></form>) is

used to include a number of form elements together so that they can be referenced by some other code in order to read information from the user

The individual form elements are implemented using the <input /> tag and its type attribute

26

The main form elements that we will use are:

◦ Textboxes (<input type= “text” />)◦ Checkboxes (<input type= “checkbox” />)◦ Radio Buttons (<input type= “radio” />)◦ Buttons: (<input type= “button” />)

27

We can also use:

◦ Password Textboxes (<input type= “password” />)

◦ Submit Buttons (<input type= “submit” />)◦ Reset Buttons (<input type= “reset” />)

Example<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>

<body>

<form name="input" action="newpage.html" method="get or post">

Type your first name:

<input type="text" name="FirstName" size="20">

<br>Type your last name:

<input type="text" name="LastName" size="20">

<br>

<input type="submit" value="Submit">

</form>

<p>

If you click the "Submit" button, you will send your input to a new page called newpage.html.

</p>

</body>

</html>

28

29

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>

<title>Using the form Tag with the </title></head><body> <h1>Forms</h1> <h2>Using the <form> tag and the <input /> tag</h2>

<form name="feedbackfrm">Your Name: <input type="text" /><br />Your Password: <input type="password" /><br />Indicate your favorite color:<br /><input type="radio" checked="true" value="blue"/>Blue<br /><input type="radio" value="red"/>Red<br />Choose one or more of the following:<br /><input type="checkbox" checked = "true" /><br /><input type="checkbox" /><br /><input type="checkbox" /><br /><input type="submit" value="submit your form" /><br /><input type="reset" value="clear your form" /><br />

</form></body></html>

30

31

Using the <textarea> tag textarea element allows larger blocks of

text to be submitted

The textarea element uses the <textarea></textarea> tags

use the rows and cols attributes to set the size of the textarea

32

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>

<title>Using the textarea tag</title>

</head><body> <h1>Forms</h1> <h2>Using the <textarea></h2> <form name="feedbackfrm">

Input your Comments:<br /><textarea rows="5" cols="25">Some default

Content</textarea><br /> <input type="submit" value="submit your form" /><br /><input type="reset" value="clear your form" /><br />

</form> </body</html>

33