ASP.NET is a unified Web development model that includes the services necessary for you to build enterprise-class Web applications with a minimum of coding. ASP.NET is part of the .NET Framework, and when coding ASP.NET applications you have access to classes in the .NET Framework. You can code your applications in any language compatible with the common language runtime (CLR), including Microsoft Visual Basic, C#, JScript .NET, and J#. These languages enable you to develop ASP.NET applications that benefit from the common language runtime, type safety, inheritance, and so on.
ASP.NET includes:
A page and controls framework
The ASP.NET compiler
Security infrastructure
State-management facilities
Application configuration
Health monitoring and performance features
Debugging support
An XML Web services framework
Extensible hosting environment and application life cycle management
An extensible designer environment
Wednesday, September 16, 2009
Tuesday, September 15, 2009
What is XML?
What is XML?
• XML stands for EXtensible Markup Language
• XML is a markup language much like HTML
• XML was designed to carry data, not to display data
• XML tags are not predefined. You must define your own tags
• XML is designed to be self-descriptive
• XML is a W3C Recommendation
________________________________________
The Difference Between XML and HTML
XML is not a replacement for HTML.
XML and HTML were designed with different goals:
• XML was designed to transport and store data, with focus on what data is.
• HTML was designed to display data, with focus on how data looks.
HTML is about displaying information, while XML is about carrying information.
________________________________________
XML Does not DO Anything
Maybe it is a little hard to understand, but XML does not DO anything. XML was created to structure, store, and transport information.
The following example is a note to Tove from Jani, stored as XML:
Tove
Jani
Reminder
Don't forget me this weekend!
The note above is quite self descriptive. It has sender and receiver information, it also has a heading and a message body.
But still, this XML document does not DO anything. It is just pure information wrapped in tags. Someone must write a piece of software to send, receive or display it.
________________________________________
XML is Just Plain Text
XML is nothing special. It is just plain text. Software that can handle plain text can also handle XML.
However, XML-aware applications can handle the XML tags specially. The functional meaning of the tags depends on the nature of the application.
________________________________________
With XML You Invent Your Own Tags
The tags in the example above (like and ) are not defined in any XML standard. These tags are "invented" by the author of the XML document.
That is because the XML language has no predefined tags.
The tags used in HTML (and the structure of HTML) are predefined. HTML documents can only use tags defined in the HTML standard (like, etc.).
• XML stands for EXtensible Markup Language
• XML is a markup language much like HTML
• XML was designed to carry data, not to display data
• XML tags are not predefined. You must define your own tags
• XML is designed to be self-descriptive
• XML is a W3C Recommendation
________________________________________
The Difference Between XML and HTML
XML is not a replacement for HTML.
XML and HTML were designed with different goals:
• XML was designed to transport and store data, with focus on what data is.
• HTML was designed to display data, with focus on how data looks.
HTML is about displaying information, while XML is about carrying information.
________________________________________
XML Does not DO Anything
Maybe it is a little hard to understand, but XML does not DO anything. XML was created to structure, store, and transport information.
The following example is a note to Tove from Jani, stored as XML:
Don't forget me this weekend!
The note above is quite self descriptive. It has sender and receiver information, it also has a heading and a message body.
But still, this XML document does not DO anything. It is just pure information wrapped in tags. Someone must write a piece of software to send, receive or display it.
________________________________________
XML is Just Plain Text
XML is nothing special. It is just plain text. Software that can handle plain text can also handle XML.
However, XML-aware applications can handle the XML tags specially. The functional meaning of the tags depends on the nature of the application.
________________________________________
With XML You Invent Your Own Tags
The tags in the example above (like
That is because the XML language has no predefined tags.
The tags used in HTML (and the structure of HTML) are predefined. HTML documents can only use tags defined in the HTML standard (like
,
, etc.).
XML allows the author to define his own tags and his own document structure.
________________________________________
XML is Not a Replacement for HTML
XML is a complement to HTML.
It is important to understand that XML is not a replacement for HTML. In most web applications, XML is used to transport data, while HTML is used to format and display the data.
My best description of XML is this:
XML is a software- and hardware-independent tool for carrying information.
________________________________________
XML is a W3C Recommendation
XML became a W3C Recommendation 10. February 1998.
To read more about the XML activities at W3C, please read W3C Tutorial.
________________________________________
XML is Everywhere
We have been participating in XML development since its creation. It has been amazing to see how quickly the XML standard has developed, and how quickly a large number of software vendors has adopted the standard.
XML is now as important for the Web as HTML was to the foundation of the Web.
XML is everywhere. It is the most common tool for data transmissions between all sorts of applications, and is becoming more and more popular in the area of storing and describing information.
Friday, September 4, 2009
Steps Required for a Free Web Hosting Web Site
Steps Required
for a Free Web Hosting Web Site
The seven (7) steps necessary for the successful creation and management of websites and these apply to free websites as well but with the following considerations:
Step 1 - Design
If you are using point and click tools provided by a free web hosting provider then you can skip this step because your choices are limited to the appearances of the various templates that are being offered.
Step 2 - Requirements Analysis
If you are using point and click tools provided by a free web hosting provider then you can skip this step.
Step 3 - Domain Name
If you are satisfied with the use of a subdomain name which is provided for free by most free web hosting providers then you can skip this step.
Step 4 - Host Selection
Select a hosting service(Free).
Step 5 - Development
If you are using point and click tools provided by a free web hosting provider then you can skip this step.
Step 6 - Promotion
Promotion concerns are specific to each type of basic website ( Personal, Family, Special Occasion, Hobbyist, Clubs, Organizations, Online Business Card, E-COMMERCE ); refer to their pages for specific instructions.
Step 7 - Management
no change.
for a Free Web Hosting Web Site
The seven (7) steps necessary for the successful creation and management of websites and these apply to free websites as well but with the following considerations:
Step 1 - Design
If you are using point and click tools provided by a free web hosting provider then you can skip this step because your choices are limited to the appearances of the various templates that are being offered.
Step 2 - Requirements Analysis
If you are using point and click tools provided by a free web hosting provider then you can skip this step.
Step 3 - Domain Name
If you are satisfied with the use of a subdomain name which is provided for free by most free web hosting providers then you can skip this step.
Step 4 - Host Selection
Select a hosting service(Free).
Step 5 - Development
If you are using point and click tools provided by a free web hosting provider then you can skip this step.
Step 6 - Promotion
Promotion concerns are specific to each type of basic website ( Personal, Family, Special Occasion, Hobbyist, Clubs, Organizations, Online Business Card, E-COMMERCE ); refer to their pages for specific instructions.
Step 7 - Management
no change.
Wednesday, August 26, 2009
A Web Standards Checklist, How to make a proper website
A web standards checklist
The term web standards can mean different things to different people. For some, it is 'table-free sites', for others it is 'using valid code'. However, web standards are much broader than that. A site built to web standards should adhere to standards (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc) and pursue best practices (valid code, accessible code, semantically correct code, user-friendly URLs etc).
In other words, a site built to web standards should ideally be lean, clean, CSS-based, accessible, usable and search engine friendly.
About the checklist
This is not an uber-checklist. There are probably many items that could be added. More importantly, it should not be seen as a list of items that must be addressed on every site that you develop. It is simply a guide that can be used:
* to show the breadth of web standards
* as a handy tool for developers during the production phase of websites
* as an aid for developers who are interested in moving towards web standards
The checklist
1.Quality of code
1. Does the site use a correct Doctype?
2. Does the site use a Character set?
3. Does the site use Valid (X)HTML?
4. Does the site use Valid CSS?
5. Does the site use any CSS hacks?
6. Does the site use unnecessary classes or ids?
7. Is the code well structured?
8. Does the site have any broken links?
9. How does the site perform in terms of speed/page size?
10. Does the site have JavaScript errors?
2. Degree of separation between content and presentation
1. Does the site use CSS for all presentation aspects (fonts, colour, padding, borders etc)?
2. Are all decorative images in the CSS, or do they appear in the (X)HTML?
3. Accessibility for users
1. Are "alt" attributes used for all descriptive images?
2. Does the site use relative units rather than absolute units for text size?
3. Do any aspects of the layout break if font size is increased?
4. Does the site use visible skip menus?
5. Does the site use accessible forms?
6. Does the site use accessible tables?
7. Is there sufficient colour brightness/contrasts?
8. Is colour alone used for critical information?
9. Is there delayed responsiveness for dropdown menus (for users with reduced motor skills)?
10. Are all links descriptive (for blind users)?
4. Accessibility for devices
1. Does the site work acceptably across modern and older browsers?
2. Is the content accessible with CSS switched off or not supported?
3. Is the content accessible with images switched off or not supported?
4. Does the site work in text browsers such as Lynx?
5. Does the site work well when printed?
6. Does the site work well in Hand Held devices?
7. Does the site include detailed metadata?
8. Does the site work well in a range of browser window sizes?
5. Basic Usability
1. Is there a clear visual hierarchy?
2. Are heading levels easy to distinguish?
3. Does the site have easy to understand navigation?
4. Does the site use consistent navigation?
5. Are links underlined?
6. Does the site use consistent and appropriate language?
7. Do you have a sitemap page and contact page? Are they easy to find?
8. For large sites, is there a search tool?
9. Is there a link to the home page on every page in the site?
10. Are visited links clearly defined with a unique colour?
6. Site management
1. Does the site have a meaningful and helpful 404 error page that works from any depth in the site?
2. Does the site use friendly URLs?
3. Do your URLs work without "www"?
4. Does the site have a favicon?
1. Quality of code
1.1 Does the site use a correct Doctype?
A doctype (short for 'document type declaration') informs the validator which version of (X)HTML you're using, and must appear at the very top of every web page. Doctypes are a key component of compliant web pages: your markup and CSS won't validate without them.
CODE
http://www.alistapart.com/articles/doctype/
More:
CODE
http://www.w3.org/QA/2002/04/valid-dtd-list.html
CODE
http://css.maxdesign.com.au/listamatic/about-boxmodel.htm
CODE
http://gutfeldt.ch/matthias/articles/doctypeswitch.html
1.2 Does the site use a Character set?
If a user agent (eg. a browser) is unable to detect the character encoding used in a Web document, the user may be presented with unreadable text. This information is particularly important for those maintaining and extending a multilingual site, but declaring the character encoding of the document is important for anyone producing XHTML/HTML or CSS.
CODE
http://www.w3.org/International/tutorials/tutorial-char-enc/
More:
CODE
http://www.w3.org/International/O-charset.html
1.3 Does the site use Valid (X)HTML?
Valid code will render faster than code with errors. Valid code will render better than invalid code. Browsers are becoming more standards compliant, and it is becoming increasingly necessary to write valid and standards compliant HTML.
CODE
http://www.maxdesign.com.au/presentation/sit2003/06.htm
More:
CODE
http://validator.w3.org/
1.4 Does the site use Valid CSS?
You need to make sure that there aren't any errors in either your HTML or your CSS, since mistakes in either place can result in botched document appearance.
CODE
http://www.meyerweb.com/eric/articles/webrev/199904.html
More:
CODE
http://jigsaw.w3.org/css-validator/
1.5 Does the site use any CSS hacks?
Basically, hacks come down to personal choice, the amount of knowledge you have of workarounds, the specific design you are trying to achieve.
CODE
http://www.mail-archive.com/wsg@webstandardsgroup.org/msg05823.html
More:
CODE
http://css-discuss.incutio.com/?page=CssHack
CODE
http://css-discuss.incutio.com/?page=ToHackOrNotToHack
CODE
http://centricle.com/ref/css/filters/
1.6 Does the site use unnecessary classes or ids?
I've noticed that developers learning new skills often end up with good CSS but poor XHTML. Specifically, the HTML code tends to be full of unnecessary divs and ids. This results in fairly meaningless HTML and bloated style sheets.
CODE
http://www.clagnut.com/blog/228/
1.7 Is the code well structured?
Semantically correct markup uses html elements for their given purpose. Well structured HTML has semantic meaning for a wide range of user agents (browsers without style sheets, text browsers, PDAs, search engines etc.)
CODE
http://www.maxdesign.com.au/presentation/benefits/index04.htm
More:
CODE
http://www.w3.org/2003/12/semantic-extractor.html
1.8 Does the site have any broken links?
Broken links can frustrate users and potentially drive customers away. Broken links can also keep search engines from properly indexing your site.
More:
CODE
http://validator.w3.org/checklink
1.9 How does the site perform in terms of speed/page size?
Don't make me wait... That's the message users give us in survey after survey. Even broadband users can suffer the slow-loading blues.
CODE
http://www.websiteoptimization.com/speed/
1.10 Does the site have JavaScript errors?
Internet Explore for Windows allows you to turn on a debugger that will pop up a new window and let you know there are javascript errors on your site. This is available under 'Internet Options' on the Advanced tab. Uncheck 'Disable script debugging'.
2. Degree of separation between content and presentation
2.1 Does the site use CSS for all presentation aspects (fonts, colour, padding, borders etc)?
Use style sheets to control layout and presentation.
CODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-style-sheets
2.2 Are all decorative images in the CSS, or do they appear in the (X)HTML?
The aim for web developers is to remove all presentation from the html code, leaving it clean and semantically correct.
CODE
http://www.maxdesign.com.au/presentation/benefits/index07.htm
3. Accessibility for users
3.1 Are "alt" attributes used for all descriptive images?
Provide a text equivalent for every non-text element
CODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-text-equivalent
3.2 Does the site use relative units rather than absolute units for text size?
Use relative rather than absolute units in markup language attribute values and style sheet property values'.
CODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-units
More:
CODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-units
CODE
http://www.clagnut.com/blog/348/
3.3 Do any aspects of the layout break if font size is increased?
Try this simple test. Look at your website in a browser that supports easy incrementation of font size. Now increase your browser's font size. And again. And again... Look at your site. Does the page layout still hold together? It is dangerous for developers to assume that everyone browses using default font sizes.
3.4 Does the site use visible skip menus?
A method shall be provided that permits users to skip repetitive navigation links.
CODE
http://www.section508.gov/index.cfm?FuseAction=Content&ID=12
Group related links, identify the group (for user agents), and, until user agents do so, provide a way to bypass the group.
CODE
http://www.w3.org/TR/WCAG10-TECHS/#tech-group-links
...blind visitors are not the only ones inconvenienced by too many links in a navigation area. Recall that a mobility-impaired person with poor adaptive technology might be stuck tabbing through that morass.
CODE
http://joeclark.org/book/sashay/serialization/Chapter08.html#h4-2020
More:
CODE
http://www.niehs.nih.gov/websmith/508/o.htm
3.5 Does the site use accessible forms?
Forms aren't the easiest of things to use for people with disabilities. Navigating around a page with written content is one thing, hopping between form fields and inputting information is another.
CODE
http://www.htmldog.com/guides/htmladvanced/forms/
More:
CODE
http://www.webstandards.org/learn/tutorials/accessible-forms/01-accessible-forms.html
CODE
http://www.accessify.com/tools-and-wizards/accessible-form-builder.asp
CODE
http://accessify.com/tutorials/better-accessible-forms.asp
3.6 Does the site use accessible tables?
For data tables, identify row and column headers... For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells.
CODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-table-headers
More:
CODE
http://www.bcc.ctc.edu/webpublishing/ada/resources/tables.asp
CODE
http://www.accessify.com/tools-and-wizards/accessible-table-builder_step1.asp
CODE
http://www.webaim.org/techniques/tables/
3.7 Is there sufficient colour brightness/contrasts?
Ensure that foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits.
CODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-colour-contrast
More:
CODE
http://www.juicystudio.com/services/colourcontrast.asp
3.8 Is colour alone used for critical information?
Ensure that all information conveyed with colour is also available without colour, for example from context or markup.
CODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-colour-convey
There are basically three types of colour deficiency; Deuteranope (a form of red/green colour deficit), Protanope (another form of red/green colour deficit) and Tritanope (a blue/yellow deficit- very rare).
More:
CODE
http://colourfilter.wickline.org/
CODE
http://www.toledo-bend.com/colourblind/Ishihara.html
CODE
http://www.vischeck.com/vischeck/vischeckURL.php
3.9 Is there delayed responsiveness for dropdown menus?
Users with reduced motor skills may find dropdown menus hard to use if responsiveness is set too fast.
3.10 Are all links descriptive?
Link text should be meaningful enough to make sense when read out of context - either on its own or as part of a sequence of links. Link text should also be terse.
CODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-meaningful-links
4. Accessibility for devices.
4.1 Does the site work acceptably across modern and older browsers?
Before starting to build a CSS-based layout, you should decide which browsers to support and to what level you intend to support them.
CODE
http://www.maxdesign.com.au/presentation/process/index_step01.cfm
4.2 Is the content accessible with CSS switched off or not supported?
Some people may visit your site with either a browser that does not support CSS or a browser with CSS switched off. In content is structured well, this will not be an issue.
4.3 Is the content accessible with images switched off or not supported?
Some people browse websites with images switched off - especially people on very slow connections. Content should still be accessible for these people.
4.4 Does the site work in text browsers such as Lynx?
This is like a combination of images and CSS switched off. A text-based browser will rely on well structured content to provide meaning.
More:
CODE
http://www.delorie.com/web/lynxview
4.5 Does the site work well when printed?
You can take any (X)HTML document and simply style it for print, without having to touch the markup.
CODE
http://www.alistapart.com/articles/goingtoprint/
More:
CODE
http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html#print
4.6 Does the site work well in Hand Held devices?
This is a hard one to deal with until hand held devices consistently support their correct media type. However, some layouts work better in current hand-held devices. The importance of supporting hand held devices will depend on target audiences.
4.7 Does the site include detailed metadata?
Metadata is machine understandable information for the web
CODE
http://www.w3.org/Metadata/
Metadata is structured information that is created specifically to describe another resource. In other words, metadata is 'data about data'.
4.8 Does the site work well in a range of browser window sizes?
It is a common assumption amongst developers that average screen sizes are increasing. Some developers assume that the average screen size is now 1024px wide. But what about users with smaller screens and users with hand held devices? Are they part of your target audience and are they being disadvantaged?
5. Basic Usability
5.1 Is there a clear visual hierarchy?
Organise and prioritise the contents of a page by using size, prominence and content relationships.
CODE
http://www.great-web-design-tips.com/web-site-design/165.html
5.2 Are heading levels easy to distinguish?
Use header elements to convey document structure and use them according to specification.
CODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-logical-headings
5.3 Is the site's navigation easy to understand?
Your navigation system should give your visitor a clue as to what page of the site they are currently on and where they can go next.
CODE
http://www.1stsitefree.com/design_nav.htm
5.4 Is the site's navigation consistent?
If each page on your site has a consistent style of presentation, visitors will find it easier to navigate between pages and find information
CODE
http://www.juicystudio.com/tutorial/accessibility/navigation.asp
5.5 Does the site use consistent and appropriate language?
The use of clear and simple language promotes effective communication. Trying to come across as articulate can be as difficult to read as poorly written grammar, especially if the language used isn't the visitor's primary language.
CODE
http://www.juicystudio.com/tutorial/accessibility/clear.asp
5.6 Does the site have a sitemap page and contact page? Are they easy to find?
Most site maps fail to convey multiple levels of the site's information architecture. In usability tests, users often overlook site maps or can't find them. Complexity is also a problem: a map should be a map, not a navigational challenge of its own.
CODE
http://www.useit.com/alertbox/20020106.html
5.7 For large sites, is there a search tool?
While search tools are not needed on smaller sites, and some people will not ever use them, site-specific search tools allow users a choice of navigation options.
5.8 Is there a link to the home page on every page in the site?
Some users like to go back to a site's home page after navigating to content within a site. The home page becomes a base camp for these users, allowing them to regroup before exploring new content.
5.9 Are links underlined?
To maximise the perceived affordance of clickability, colour and underline the link text. Users shouldn't have to guess or scrub the page to find out where they can click.
CODE
http://www.useit.com/alertbox/20040510.html
5.10 Are visited links clearly defined?
Most important, knowing which pages they've already visited frees users from unintentionally revisiting the same pages over and over again.
CODE
http://www.useit.com/alertbox/20040503.html
6. Site management
6.1 Does the site have a meaningful and helpful 404 error page that works from any depth in the site?
You've requested a page - either by typing a URL directly into the address bar or clicking on an out-of-date link and you've found yourself in the middle of cyberspace nowhere. A user-friendly website will give you a helping hand while many others will simply do nothing, relying on the browser's built-in ability to explain what the problem is.
CODE
http://www.alistapart.com/articles/perfect404/
6.2 Does the site use friendly URLs?
Most search engines (with a few exceptions - namely Google) will not index any pages that have a question mark or other character (like an ampersand or equals sign) in the URL... what good is a site if no one can find it?
CODE
http://www.sitepoint.com/article/search-engine-friendly-urls
One of the worst elements of the web from a user interface standpoint is the URL. However, if they're short, logical, and self-correcting, URLs can be acceptably usable
CODE
http://www.merges.net/theory/20010305.html
More:
CODE
http://www.sitepoint.com/article/search-engine-friendly-urls
CODE
http://www.websitegoodies.com/article/32
CODE
http://www.merges.net/theory/20010305.html
6.3 Does the site's URL work without "www"?
While this is not critical, and in some cases is not even possible, it is always good to give people the choice of both options. If a user types your domain name without the www and gets no site, this could disadvantage both the user and you.
6.4 Does the site have a favicon?
A Favicon is a multi-resolution image included on nearly all professionally developed sites. The Favicon allows the webmaster to further promote their site, and to create a more customized appearance within a visitor's browser.
CODE
http://www.favicon.com/
Favicons are definitely not critical. However, if they are not present, they can cause 404 errors in your logs (site statistics). Browsers like IE will request them from the server when a site is bookmarked. If a favicon isn't available, a 404 error may be generated. Therefore, having a favicon could cut down on favicon specific 404 errors. The same is true of a 'robots.txt' file.
The term web standards can mean different things to different people. For some, it is 'table-free sites', for others it is 'using valid code'. However, web standards are much broader than that. A site built to web standards should adhere to standards (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc) and pursue best practices (valid code, accessible code, semantically correct code, user-friendly URLs etc).
In other words, a site built to web standards should ideally be lean, clean, CSS-based, accessible, usable and search engine friendly.
About the checklist
This is not an uber-checklist. There are probably many items that could be added. More importantly, it should not be seen as a list of items that must be addressed on every site that you develop. It is simply a guide that can be used:
* to show the breadth of web standards
* as a handy tool for developers during the production phase of websites
* as an aid for developers who are interested in moving towards web standards
The checklist
1.Quality of code
1. Does the site use a correct Doctype?
2. Does the site use a Character set?
3. Does the site use Valid (X)HTML?
4. Does the site use Valid CSS?
5. Does the site use any CSS hacks?
6. Does the site use unnecessary classes or ids?
7. Is the code well structured?
8. Does the site have any broken links?
9. How does the site perform in terms of speed/page size?
10. Does the site have JavaScript errors?
2. Degree of separation between content and presentation
1. Does the site use CSS for all presentation aspects (fonts, colour, padding, borders etc)?
2. Are all decorative images in the CSS, or do they appear in the (X)HTML?
3. Accessibility for users
1. Are "alt" attributes used for all descriptive images?
2. Does the site use relative units rather than absolute units for text size?
3. Do any aspects of the layout break if font size is increased?
4. Does the site use visible skip menus?
5. Does the site use accessible forms?
6. Does the site use accessible tables?
7. Is there sufficient colour brightness/contrasts?
8. Is colour alone used for critical information?
9. Is there delayed responsiveness for dropdown menus (for users with reduced motor skills)?
10. Are all links descriptive (for blind users)?
4. Accessibility for devices
1. Does the site work acceptably across modern and older browsers?
2. Is the content accessible with CSS switched off or not supported?
3. Is the content accessible with images switched off or not supported?
4. Does the site work in text browsers such as Lynx?
5. Does the site work well when printed?
6. Does the site work well in Hand Held devices?
7. Does the site include detailed metadata?
8. Does the site work well in a range of browser window sizes?
5. Basic Usability
1. Is there a clear visual hierarchy?
2. Are heading levels easy to distinguish?
3. Does the site have easy to understand navigation?
4. Does the site use consistent navigation?
5. Are links underlined?
6. Does the site use consistent and appropriate language?
7. Do you have a sitemap page and contact page? Are they easy to find?
8. For large sites, is there a search tool?
9. Is there a link to the home page on every page in the site?
10. Are visited links clearly defined with a unique colour?
6. Site management
1. Does the site have a meaningful and helpful 404 error page that works from any depth in the site?
2. Does the site use friendly URLs?
3. Do your URLs work without "www"?
4. Does the site have a favicon?
1. Quality of code
1.1 Does the site use a correct Doctype?
A doctype (short for 'document type declaration') informs the validator which version of (X)HTML you're using, and must appear at the very top of every web page. Doctypes are a key component of compliant web pages: your markup and CSS won't validate without them.
CODE
http://www.alistapart.com/articles/doctype/
More:
CODE
http://www.w3.org/QA/2002/04/valid-dtd-list.html
CODE
http://css.maxdesign.com.au/listamatic/about-boxmodel.htm
CODE
http://gutfeldt.ch/matthias/articles/doctypeswitch.html
1.2 Does the site use a Character set?
If a user agent (eg. a browser) is unable to detect the character encoding used in a Web document, the user may be presented with unreadable text. This information is particularly important for those maintaining and extending a multilingual site, but declaring the character encoding of the document is important for anyone producing XHTML/HTML or CSS.
CODE
http://www.w3.org/International/tutorials/tutorial-char-enc/
More:
CODE
http://www.w3.org/International/O-charset.html
1.3 Does the site use Valid (X)HTML?
Valid code will render faster than code with errors. Valid code will render better than invalid code. Browsers are becoming more standards compliant, and it is becoming increasingly necessary to write valid and standards compliant HTML.
CODE
http://www.maxdesign.com.au/presentation/sit2003/06.htm
More:
CODE
http://validator.w3.org/
1.4 Does the site use Valid CSS?
You need to make sure that there aren't any errors in either your HTML or your CSS, since mistakes in either place can result in botched document appearance.
CODE
http://www.meyerweb.com/eric/articles/webrev/199904.html
More:
CODE
http://jigsaw.w3.org/css-validator/
1.5 Does the site use any CSS hacks?
Basically, hacks come down to personal choice, the amount of knowledge you have of workarounds, the specific design you are trying to achieve.
CODE
http://www.mail-archive.com/wsg@webstandardsgroup.org/msg05823.html
More:
CODE
http://css-discuss.incutio.com/?page=CssHack
CODE
http://css-discuss.incutio.com/?page=ToHackOrNotToHack
CODE
http://centricle.com/ref/css/filters/
1.6 Does the site use unnecessary classes or ids?
I've noticed that developers learning new skills often end up with good CSS but poor XHTML. Specifically, the HTML code tends to be full of unnecessary divs and ids. This results in fairly meaningless HTML and bloated style sheets.
CODE
http://www.clagnut.com/blog/228/
1.7 Is the code well structured?
Semantically correct markup uses html elements for their given purpose. Well structured HTML has semantic meaning for a wide range of user agents (browsers without style sheets, text browsers, PDAs, search engines etc.)
CODE
http://www.maxdesign.com.au/presentation/benefits/index04.htm
More:
CODE
http://www.w3.org/2003/12/semantic-extractor.html
1.8 Does the site have any broken links?
Broken links can frustrate users and potentially drive customers away. Broken links can also keep search engines from properly indexing your site.
More:
CODE
http://validator.w3.org/checklink
1.9 How does the site perform in terms of speed/page size?
Don't make me wait... That's the message users give us in survey after survey. Even broadband users can suffer the slow-loading blues.
CODE
http://www.websiteoptimization.com/speed/
1.10 Does the site have JavaScript errors?
Internet Explore for Windows allows you to turn on a debugger that will pop up a new window and let you know there are javascript errors on your site. This is available under 'Internet Options' on the Advanced tab. Uncheck 'Disable script debugging'.
2. Degree of separation between content and presentation
2.1 Does the site use CSS for all presentation aspects (fonts, colour, padding, borders etc)?
Use style sheets to control layout and presentation.
CODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-style-sheets
2.2 Are all decorative images in the CSS, or do they appear in the (X)HTML?
The aim for web developers is to remove all presentation from the html code, leaving it clean and semantically correct.
CODE
http://www.maxdesign.com.au/presentation/benefits/index07.htm
3. Accessibility for users
3.1 Are "alt" attributes used for all descriptive images?
Provide a text equivalent for every non-text element
CODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-text-equivalent
3.2 Does the site use relative units rather than absolute units for text size?
Use relative rather than absolute units in markup language attribute values and style sheet property values'.
CODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-units
More:
CODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-units
CODE
http://www.clagnut.com/blog/348/
3.3 Do any aspects of the layout break if font size is increased?
Try this simple test. Look at your website in a browser that supports easy incrementation of font size. Now increase your browser's font size. And again. And again... Look at your site. Does the page layout still hold together? It is dangerous for developers to assume that everyone browses using default font sizes.
3.4 Does the site use visible skip menus?
A method shall be provided that permits users to skip repetitive navigation links.
CODE
http://www.section508.gov/index.cfm?FuseAction=Content&ID=12
Group related links, identify the group (for user agents), and, until user agents do so, provide a way to bypass the group.
CODE
http://www.w3.org/TR/WCAG10-TECHS/#tech-group-links
...blind visitors are not the only ones inconvenienced by too many links in a navigation area. Recall that a mobility-impaired person with poor adaptive technology might be stuck tabbing through that morass.
CODE
http://joeclark.org/book/sashay/serialization/Chapter08.html#h4-2020
More:
CODE
http://www.niehs.nih.gov/websmith/508/o.htm
3.5 Does the site use accessible forms?
Forms aren't the easiest of things to use for people with disabilities. Navigating around a page with written content is one thing, hopping between form fields and inputting information is another.
CODE
http://www.htmldog.com/guides/htmladvanced/forms/
More:
CODE
http://www.webstandards.org/learn/tutorials/accessible-forms/01-accessible-forms.html
CODE
http://www.accessify.com/tools-and-wizards/accessible-form-builder.asp
CODE
http://accessify.com/tutorials/better-accessible-forms.asp
3.6 Does the site use accessible tables?
For data tables, identify row and column headers... For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells.
CODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-table-headers
More:
CODE
http://www.bcc.ctc.edu/webpublishing/ada/resources/tables.asp
CODE
http://www.accessify.com/tools-and-wizards/accessible-table-builder_step1.asp
CODE
http://www.webaim.org/techniques/tables/
3.7 Is there sufficient colour brightness/contrasts?
Ensure that foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits.
CODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-colour-contrast
More:
CODE
http://www.juicystudio.com/services/colourcontrast.asp
3.8 Is colour alone used for critical information?
Ensure that all information conveyed with colour is also available without colour, for example from context or markup.
CODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-colour-convey
There are basically three types of colour deficiency; Deuteranope (a form of red/green colour deficit), Protanope (another form of red/green colour deficit) and Tritanope (a blue/yellow deficit- very rare).
More:
CODE
http://colourfilter.wickline.org/
CODE
http://www.toledo-bend.com/colourblind/Ishihara.html
CODE
http://www.vischeck.com/vischeck/vischeckURL.php
3.9 Is there delayed responsiveness for dropdown menus?
Users with reduced motor skills may find dropdown menus hard to use if responsiveness is set too fast.
3.10 Are all links descriptive?
Link text should be meaningful enough to make sense when read out of context - either on its own or as part of a sequence of links. Link text should also be terse.
CODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-meaningful-links
4. Accessibility for devices.
4.1 Does the site work acceptably across modern and older browsers?
Before starting to build a CSS-based layout, you should decide which browsers to support and to what level you intend to support them.
CODE
http://www.maxdesign.com.au/presentation/process/index_step01.cfm
4.2 Is the content accessible with CSS switched off or not supported?
Some people may visit your site with either a browser that does not support CSS or a browser with CSS switched off. In content is structured well, this will not be an issue.
4.3 Is the content accessible with images switched off or not supported?
Some people browse websites with images switched off - especially people on very slow connections. Content should still be accessible for these people.
4.4 Does the site work in text browsers such as Lynx?
This is like a combination of images and CSS switched off. A text-based browser will rely on well structured content to provide meaning.
More:
CODE
http://www.delorie.com/web/lynxview
4.5 Does the site work well when printed?
You can take any (X)HTML document and simply style it for print, without having to touch the markup.
CODE
http://www.alistapart.com/articles/goingtoprint/
More:
CODE
http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html#print
4.6 Does the site work well in Hand Held devices?
This is a hard one to deal with until hand held devices consistently support their correct media type. However, some layouts work better in current hand-held devices. The importance of supporting hand held devices will depend on target audiences.
4.7 Does the site include detailed metadata?
Metadata is machine understandable information for the web
CODE
http://www.w3.org/Metadata/
Metadata is structured information that is created specifically to describe another resource. In other words, metadata is 'data about data'.
4.8 Does the site work well in a range of browser window sizes?
It is a common assumption amongst developers that average screen sizes are increasing. Some developers assume that the average screen size is now 1024px wide. But what about users with smaller screens and users with hand held devices? Are they part of your target audience and are they being disadvantaged?
5. Basic Usability
5.1 Is there a clear visual hierarchy?
Organise and prioritise the contents of a page by using size, prominence and content relationships.
CODE
http://www.great-web-design-tips.com/web-site-design/165.html
5.2 Are heading levels easy to distinguish?
Use header elements to convey document structure and use them according to specification.
CODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-logical-headings
5.3 Is the site's navigation easy to understand?
Your navigation system should give your visitor a clue as to what page of the site they are currently on and where they can go next.
CODE
http://www.1stsitefree.com/design_nav.htm
5.4 Is the site's navigation consistent?
If each page on your site has a consistent style of presentation, visitors will find it easier to navigate between pages and find information
CODE
http://www.juicystudio.com/tutorial/accessibility/navigation.asp
5.5 Does the site use consistent and appropriate language?
The use of clear and simple language promotes effective communication. Trying to come across as articulate can be as difficult to read as poorly written grammar, especially if the language used isn't the visitor's primary language.
CODE
http://www.juicystudio.com/tutorial/accessibility/clear.asp
5.6 Does the site have a sitemap page and contact page? Are they easy to find?
Most site maps fail to convey multiple levels of the site's information architecture. In usability tests, users often overlook site maps or can't find them. Complexity is also a problem: a map should be a map, not a navigational challenge of its own.
CODE
http://www.useit.com/alertbox/20020106.html
5.7 For large sites, is there a search tool?
While search tools are not needed on smaller sites, and some people will not ever use them, site-specific search tools allow users a choice of navigation options.
5.8 Is there a link to the home page on every page in the site?
Some users like to go back to a site's home page after navigating to content within a site. The home page becomes a base camp for these users, allowing them to regroup before exploring new content.
5.9 Are links underlined?
To maximise the perceived affordance of clickability, colour and underline the link text. Users shouldn't have to guess or scrub the page to find out where they can click.
CODE
http://www.useit.com/alertbox/20040510.html
5.10 Are visited links clearly defined?
Most important, knowing which pages they've already visited frees users from unintentionally revisiting the same pages over and over again.
CODE
http://www.useit.com/alertbox/20040503.html
6. Site management
6.1 Does the site have a meaningful and helpful 404 error page that works from any depth in the site?
You've requested a page - either by typing a URL directly into the address bar or clicking on an out-of-date link and you've found yourself in the middle of cyberspace nowhere. A user-friendly website will give you a helping hand while many others will simply do nothing, relying on the browser's built-in ability to explain what the problem is.
CODE
http://www.alistapart.com/articles/perfect404/
6.2 Does the site use friendly URLs?
Most search engines (with a few exceptions - namely Google) will not index any pages that have a question mark or other character (like an ampersand or equals sign) in the URL... what good is a site if no one can find it?
CODE
http://www.sitepoint.com/article/search-engine-friendly-urls
One of the worst elements of the web from a user interface standpoint is the URL. However, if they're short, logical, and self-correcting, URLs can be acceptably usable
CODE
http://www.merges.net/theory/20010305.html
More:
CODE
http://www.sitepoint.com/article/search-engine-friendly-urls
CODE
http://www.websitegoodies.com/article/32
CODE
http://www.merges.net/theory/20010305.html
6.3 Does the site's URL work without "www"?
While this is not critical, and in some cases is not even possible, it is always good to give people the choice of both options. If a user types your domain name without the www and gets no site, this could disadvantage both the user and you.
6.4 Does the site have a favicon?
A Favicon is a multi-resolution image included on nearly all professionally developed sites. The Favicon allows the webmaster to further promote their site, and to create a more customized appearance within a visitor's browser.
CODE
http://www.favicon.com/
Favicons are definitely not critical. However, if they are not present, they can cause 404 errors in your logs (site statistics). Browsers like IE will request them from the server when a site is bookmarked. If a favicon isn't available, a 404 error may be generated. Therefore, having a favicon could cut down on favicon specific 404 errors. The same is true of a 'robots.txt' file.
Sunday, August 23, 2009
what is a applet?
An applet is a program written in the Java programming language that can be included in an HTML page, much in the same way an image is included in a page. When you use a Java technology-enabled browser to view a page that contains an applet, the applet's code is transferred to your system and executed by the browser's Java Virtual Machine (JVM). For information and examples on how to include an applet in an HTML page, refer to this description of the "APPLET" tag.
Saturday, August 22, 2009
Adobe Dreamweaver
Adobe Dreamweaver (formerly Macromedia Dreamweaver) is a web development application originally created by Macromedia, and is now developed by Adobe Systems, which acquired Macromedia in 2005.
Dreamweaver is available for both Mac and Windows operating systems. Recent versions have incorporated support for web technologies such as CSS, JavaScript, and various server-side scripting languages and frameworks including ASP, ColdFusion, and PHP.
Although a hybrid WYSIWYG and code-based web design and development application, Dreamweaver's WYSIWYG mode can hide the HTML code details of pages from the user, making it possible for non-coders to create web pages and sites. One criticism of this approach is that it has the potential to produce HTML pages whose file size and amount of HTML code is larger than an optimally hand-coded page would be, which can cause web browsers to perform poorly. This can be particularly true because the application makes it very easy to create table-based layouts. In addition, some web site developers have criticized Dreamweaver in the past for producing code that often does not comply with W3C standards, though recent versions have been more compliant. Dreamweaver 8.0 performed poorly on the Acid2 Test, developed by the Web Standards Project. However, Adobe has focused on support for standards-based layout in recent and current versions of the application, including the ability to convert tables to layers.
Dreamweaver allows users to preview websites in locally-installed web browsers. It also has site management tools, such as FTP/SFTP and WebDAV file transfer and synchronization features, the ability to find and replace lines of text or code by search terms and regular expressions across the entire site, and a templating feature that allows single-source update of shared code and layout across entire sites without server-side includes or scripting. The behaviours panel also enables use of basic JavaScript without any coding knowledge, and integration with Adobe's Spry AJAX framework offers easy access to dynamically-generated content and interfaces.
Dreamweaver can utilize third-party "Extensions" to enable and extend core functionality of the application, which any web developer can write (largely in HTML and JavaScript). Dreamweaver is supported by a large community of extension developers who make extensions available (both commercial and free) for most web development tasks from simple rollover effects to full-featured shopping carts.
Like other HTML editors, Dreamweaver edits files locally, then uploads all edited files to the remote web server using FTP, SFTP, or WebDAV. Dreamweaver CS4 now supports the Subversion (SVN) version control system.
Dreamweaver is available for both Mac and Windows operating systems. Recent versions have incorporated support for web technologies such as CSS, JavaScript, and various server-side scripting languages and frameworks including ASP, ColdFusion, and PHP.
Although a hybrid WYSIWYG and code-based web design and development application, Dreamweaver's WYSIWYG mode can hide the HTML code details of pages from the user, making it possible for non-coders to create web pages and sites. One criticism of this approach is that it has the potential to produce HTML pages whose file size and amount of HTML code is larger than an optimally hand-coded page would be, which can cause web browsers to perform poorly. This can be particularly true because the application makes it very easy to create table-based layouts. In addition, some web site developers have criticized Dreamweaver in the past for producing code that often does not comply with W3C standards, though recent versions have been more compliant. Dreamweaver 8.0 performed poorly on the Acid2 Test, developed by the Web Standards Project. However, Adobe has focused on support for standards-based layout in recent and current versions of the application, including the ability to convert tables to layers.
Dreamweaver allows users to preview websites in locally-installed web browsers. It also has site management tools, such as FTP/SFTP and WebDAV file transfer and synchronization features, the ability to find and replace lines of text or code by search terms and regular expressions across the entire site, and a templating feature that allows single-source update of shared code and layout across entire sites without server-side includes or scripting. The behaviours panel also enables use of basic JavaScript without any coding knowledge, and integration with Adobe's Spry AJAX framework offers easy access to dynamically-generated content and interfaces.
Dreamweaver can utilize third-party "Extensions" to enable and extend core functionality of the application, which any web developer can write (largely in HTML and JavaScript). Dreamweaver is supported by a large community of extension developers who make extensions available (both commercial and free) for most web development tasks from simple rollover effects to full-featured shopping carts.
Like other HTML editors, Dreamweaver edits files locally, then uploads all edited files to the remote web server using FTP, SFTP, or WebDAV. Dreamweaver CS4 now supports the Subversion (SVN) version control system.
What is HTML?
What is HTML?
HTML ( H yper T ext M arkup L anguage) is the language used to write Web pages. You are looking at a Web page right now.
You can view HTML pages in two ways:
· One view is their appearance on a Web browser, just like this page — colors, different text sizes, graphics.
· The other view is called "HTML Code" — this is the code that tells the browser what to do.
Here is the difference between HTML code and a browser display:
HTML Code Browser Display
I want to emphasize this! I want to emphasize this!
The code on the left creates the browser display on the right.
Letters and words that are enclosed in "<" and ">" marks are called "tags." They tell the browser what to do:
· The tag tells the browser to make bold text.
· The tag means to stop making bold text.
What is a tag?
In HTML, a tag tells the browser what to do.
When you write an HTML page, you enter tags for many reasons — to change the appearance of text, to show a graphic, or to make a link to another page.
The tags you write are not visible on the browser, but their effects are.
Tags begin with the symbol "<" and end with ">".
Tags usually come in pairs, one that begins an action and one that ends it.
This tag: starts printing italicized text.
This tag: stops the effect of a previous tag. Note the "/".
To italicize a word, you simply put before the word and after it:
HTML Code Browser Display
I want to italicize this! I want to italicize this!
What is the simplest HTML page?
Here is the very least HTML code that can be called a page:
HTML Code Browser Display
This is my page title! This is my message to the world! This is my message to the world!
You don't need to know the meaning of all these tags.
Always type a title between the and tags. This title will appear at the top of the browser display.
Your page contents go between the and tags.
You can type this code in any text editor or word processor, and if you save it as plain text with a file suffix of .html (example: mypage.html), you can view it with a browser.
After you have created a simple page using a text editor, you should consider getting a better HTML editor. There are lots of them. I even wrote one — it is called Arachnophilia , and it doesn't cost you any money.
What is a Hypertext link?
A hypertext link is a special tag that links one page to another page or resource. If you click the link, the browser jumps to the link's destination.
There are two parts to a link:
· One part tells the human what to do.
· The other part tells the browser what to do.
Here is an example:
HTML Code Browser Display
Go to Microsoft Go to Microsoft
In this example, the phrase "http://www.microsoft.com" tells the browser what the link's destination is, and the phrase "Go to Microsoft" tells the human what is happening.
The link on the right is real — if you press it, you will go to Microsoft's Web site.
If you want to make a link to one of your own pages, just use the name of the page without the "http://" prefix:
HTML Code Browser Display
Go to the Arachnophilia Home Page Go to the Arachnophilia Home Page
How do I put a graphic image on my page?
Use the IMG tag. Here is an example:
This is a very easy tag to use, but take these precautions:
1. If the name of the graphic file is in UPPERCASE, then type the name into the IMG tag in UPPERCASE also. If it is lowercase, type the name in lowercase. Case errors won't matter on your home computer, but when you load your page and graphics onto the Web, suddenly the graphics won't show up any more. This is because Windows and other popular home operating systems do not care whether the file names have the right case, but Web servers do.
2. If you want to simply type in the graphic file name as shown here, the graphic file must be in the same directory as your Web page.
3. You can't use just any graphic file on your page. You should limit yourself to GIF and JPG files — most current browsers can display these graphics correctly, and they are also efficient to store on your page and to download from the Web.
HTML ( H yper T ext M arkup L anguage) is the language used to write Web pages. You are looking at a Web page right now.
You can view HTML pages in two ways:
· One view is their appearance on a Web browser, just like this page — colors, different text sizes, graphics.
· The other view is called "HTML Code" — this is the code that tells the browser what to do.
Here is the difference between HTML code and a browser display:
HTML Code Browser Display
I want to emphasize this! I want to emphasize this!
The code on the left creates the browser display on the right.
Letters and words that are enclosed in "<" and ">" marks are called "tags." They tell the browser what to do:
· The tag tells the browser to make bold text.
· The tag means to stop making bold text.
What is a tag?
In HTML, a tag tells the browser what to do.
When you write an HTML page, you enter tags for many reasons — to change the appearance of text, to show a graphic, or to make a link to another page.
The tags you write are not visible on the browser, but their effects are.
Tags begin with the symbol "<" and end with ">".
Tags usually come in pairs, one that begins an action and one that ends it.
This tag: starts printing italicized text.
This tag: stops the effect of a previous tag. Note the "/".
To italicize a word, you simply put before the word and after it:
HTML Code Browser Display
I want to italicize this! I want to italicize this!
What is the simplest HTML page?
Here is the very least HTML code that can be called a page:
HTML Code Browser Display
You don't need to know the meaning of all these tags.
Always type a title between the
Your page contents go between the and tags.
You can type this code in any text editor or word processor, and if you save it as plain text with a file suffix of .html (example: mypage.html), you can view it with a browser.
After you have created a simple page using a text editor, you should consider getting a better HTML editor. There are lots of them. I even wrote one — it is called Arachnophilia , and it doesn't cost you any money.
What is a Hypertext link?
A hypertext link is a special tag that links one page to another page or resource. If you click the link, the browser jumps to the link's destination.
There are two parts to a link:
· One part tells the human what to do.
· The other part tells the browser what to do.
Here is an example:
HTML Code Browser Display
Go to Microsoft Go to Microsoft
In this example, the phrase "http://www.microsoft.com" tells the browser what the link's destination is, and the phrase "Go to Microsoft" tells the human what is happening.
The link on the right is real — if you press it, you will go to Microsoft's Web site.
If you want to make a link to one of your own pages, just use the name of the page without the "http://" prefix:
HTML Code Browser Display
Go to the Arachnophilia Home Page Go to the Arachnophilia Home Page
How do I put a graphic image on my page?
Use the IMG tag. Here is an example:
This is a very easy tag to use, but take these precautions:
1. If the name of the graphic file is in UPPERCASE, then type the name into the IMG tag in UPPERCASE also. If it is lowercase, type the name in lowercase. Case errors won't matter on your home computer, but when you load your page and graphics onto the Web, suddenly the graphics won't show up any more. This is because Windows and other popular home operating systems do not care whether the file names have the right case, but Web servers do.
2. If you want to simply type in the graphic file name as shown here, the graphic file must be in the same directory as your Web page.
3. You can't use just any graphic file on your page. You should limit yourself to GIF and JPG files — most current browsers can display these graphics correctly, and they are also efficient to store on your page and to download from the Web.
Subscribe to:
Posts (Atom)