xhtml, css, good web and database design practices snehal monteiro for cis 764

XHTML, CSS , Good web and database design practices

Snehal MonteiroFor CIS 764

Outline

What You’re In For

Why XHTML & CSS?

XHTML

CSS

Making the Transition

The Future

Good Web and Database design practices

What You’re In For

This presentation focuses mainly on the

front-end i.e. the web-pages of an enterprise database application

XHTML and CSS are the latest trends in web design and play a major role in enhancing the usability of the application

Why XHTML & CSS?Garbage code is…uh…garbage!Information encoded in XHTML can be more easily migrated as technology changesXHTML is a good step forward to learning XMLYou can easily make global changes to how your documents display There are user benefits to separating information from presentation

What is XHTML

XHTML stands for eXtensible HyperText Markup Language

XHTML is aimed to replace HTML

XHTML is a stricter and cleaner version of HTML

XHTML is HTML defined as a XML application

XHTML is a W3C Recommendation

XHTML …why?Many pages on the WWW contain bad HTML

XML is a markup language where everything has to be marked up correctly, which results in "well-formed"

documents. Hand held devices like PDA’s and mobile phones do not have resources and power to interpret bad HTML code

A mark-up language for now and for the future. Future browser versions may support only XHTML…so be prepared!!!

XHTML Benefits

A painless transition to more advanced technology (XML)

Clean, more logical markup

Increased interoperability

Greater accessibility

XHTML-key ingredient in mobile browsing

XHTML reduces the difference between wireless and web content

XHTML Basic and Cascading Style Sheets separate content from presentation enabling content tailoring to different devices

Benefits:Consumers –more services, better userinterface, easier-to-use

Carriers – more control over content,consistent look & feel, service loyalty

Content providers – presentation, functionality,consistency, familiar format

Manufacturers – Easier software

maintenance, better performance, lower cost

How can I convert to XHTML??Very few simple rules…that’s it!

All tags must be in lowercase:<title></title>

All tags must end:<p></p>

Even empty tags:<br></br> = <br />

All tags must properly nest:<p>This is an <a name=“here”>anchor</a>.</p>

All attribute values must be quoted:<div align=“center”></div>

XHTML: More RulesAttribute minimization is forbidden:

<input type=“radio” name=“stuff” CHECKED> becomes…<input type=“radio” name=“stuff” checked=“checked” />

You must use a document type declaration:Transitional: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

And add a namespace declaration to <html>:<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>

Evolution of XHTML standards

HTML 4.0 TransitionalXHTML BasicXHTML TransitionalXHTML Strict

There are online validation tools available which check conformance to standards-

Kick It Up a Notch: Enhance your web page with Cascading Style Sheets

CSS is a standard layout language for the Web

Though precise and powerful, CSS is easy to author by hand.

Replace HTML table-based layouts, frames, and other presentational hacks.

Separate style from content

Benefits of CSSConserve bandwidth (less markup for visitors to download) Reduce design/development time Reduce updating and maintenance time Increased accessibility (fewer, or no, HTML tables; no invalid junk markup) Adhere to W3C recommendations, improving interoperability and ensuring greater longevity Better, more professional appearance (line–height, borders, padding, margins) Increased readability (line–height, borders, padding, margins) More easily transition in future to more powerful standards such as XML (because page content no longer contains junk markup)

CSS: Rule Structure

h1 { color: purple; }

h1 { font-family: Optima, Arial, sans-serif; }

propertyproperty valuevalue

begins and ends the declarationbegins and ends the declaration

property/valueproperty/valueseparatorseparator

ends everyends everyproperty/property/value pairvalue pair

declarationdeclarationselectorselector

CSS Rule Example

body {

background: #FFFFFF;

color: black;

margin-left: 5%;

margin-right: 5%;

font-family: Tahoma, Optima, Arial, sans-serif;

}

Where do you put styles?In-line - add to HTML tag<H1 style="color: maroon">

Embedded style sheets<style> </style>

External style sheets<link href="style.css">

In-line<H1 style="color: maroon">

Similar to adding attributes to html tags

Disadvantagesdecreased accessibilityincreased file sizeharder to update

Embedded style sheets<style>  </style>

Put rules between style tags Put in head section Add html comment tags Use when single document has unique style

External style sheets<link rel="stylesheet" type="text/css" href="style.css">

Save rules in external file

Advantagesease of maintenance

use less disk space

increase accessibility

Class selector & attributeTo create rules that can be applied to a

variety of html tags<style>.bar {color: maroon; font-size: smaller; background-color: yellow;}</style>

…<p class="bar">text</p>…

<p><a href="url.htm" class="bar">link</a> </p>

CSS: Diagram of Precedence

External

StyleSheet

[call to external stylesheet]

[styles embedded inside the document]

XHTML File

1)

2)

Generalized order of precedence, all other things being equal

http://jigsaw.w3.org/css-validator/http://jigsaw.w3.org/css-validator/

Making the Transition: TidyHTML Tidy is free software that can read your HTML and output a much better file by:

Automatically fixing some errorsChanging uppercase tags to lowercaseIndenting your code to make to make it more readableQuote all attribute valuesAnd other things, depends on configuration file

An error report may also be generated that can identify remaining problems

Making the Transition:Migrating an Existing Site

All at once:Copy entire site to another location

Run Tidy; check and re-run as needed

Clean up remaining problems

Transfer back

Gradual:Do all new things in XHTML/CSS

Migrate old files as you update them for other reasons

The Future

Will XML replace HTML?

It already has! That’s why you’re here!

XML will typically not be delivered to web clients; that is what XHTML will be for

So, is this the last markup you have to learn?

No way! Use this as a stepping-stone to XML, for which you will have many additional uses

Remember — Never stop learning!

Adding hit counters to your web-site for free

Just register at www.google.com/analytics

Type in the url of your web-site

You will get a javascript code snippet

Just add the code to your index page

You get daily reports about user activity

on your site

Good web-design practices:Comment your code!Use XHTML rules and CSSUse AJAX to enhance user interaction and increase speedArchive code before making any changes to the current web-siteRe-use code: eg: Database connection code, reusable javascript subroutinesUse lower-case more than upper-case, it looks more attractive and subtle

Good database design practices

Comment your code!Don’t store big binary files in the databaseCorrectly identify which fields require dataIf a column storing the same data appears

or is referenced in more than one table (e.g. a foreign key), it should have the same data type throughout the database.

Continued…When running queries on the database, use only the column names that you need to retrieve. This can reduce network traffic and disk operations. When running an insert action query, use the columns list into which to insert instead of the table name (when you want to insert data in all the current columns). This way, if new columns are added to the table, your query will still work.

ReferencesW3C-Introduction to XHTML

http://www.w3schools.com/xhtml/xhtml_intro.asp

NYPL Online Style Guide: XHTML and CSS

http://www.nypl.org/styleguide/xhtml/index.html

Better Living through XHTML

By, Jeffery Zeldman

http://www.alistapart.com/stories/betterliving/

Good practices in database design

http://www.interaktonline.com/Support/Articles/Details

Thank-you!

Questions ???

xhtml, css, good web and database design practices snehal monteiro for cis 764

Documents