Snehal_XHTML.ppt

7/27/2019 Snehal_XHTML.ppt

1/34

XHTML, CSS , Good web anddatabase design practices

Snehal Monteiro

For CIS 764


2/34

OutlineWhat Youre In For

Why XHTML & CSS?

XHTML

CSS

Making the Transition

The FutureGood Web and Database design practices


3/34

What Youre In ForThis presentation focuses mainly on the

front-end i.e. the web-pages of an

enterprise database application

XHTML and CSS are the latest trends inweb design and play a major role in

enhancing the usability of theapplication


4/34

Why XHTML & CSS?Garbage code isuhgarbage!

Information encoded in XHTML can be more

easily migrated as technology changesXHTML is a good step forward to learningXML

You can easily make global changes to how

your documents displayThere are user benefits to separatinginformation frompresentation


5/34

What is XHTMLXHTML stands for eXtensible HyperText MarkupLanguage

XHTML is aimed to replace HTMLXHTML is a stricter and cleaner version of HTML

XHTML is HTML defined as a XML application

XHTML is a W3C Recommendation


6/34

XHTML why?Many pages on the WWW contain bad HTML

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

documents.Hand held devices like PDAs and mobile phones do not

have resources and power to interpret bad HTML code

A mark-up language for now and for the future. Futurebrowser versions may support only XHTMLso be

prepared!!!


7/34

XHTML BenefitsA painless transition to more advancedtechnology (XML)

Clean, more logical markup

Increased interoperability

Greater accessibility


8/34

XHTML-key ingredient in mobilebrowsing

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:

Consumersmore services, better user

interface, easier-to-useCarriers more control over content,

consistent look & feel, service loyalty

Content providers presentation, functionality,

consistency, familiar formatManufacturers Easier software

maintenance, better performance, lower cost


9/34

How can I convert to XHTML??

Very few simple rulesthats it!All tags must be in lowercase:

All tags must end:

Even empty tags:
=

All tags must properly nest:

This is an anchor.

All attribute values must be quoted:


10/34

XHTML: More RulesAttribute minimization is forbidden:becomes

You must use a document type declaration:Transitional:

Strict:

And add a namespace declaration to :


11/34

Evolution of XHTML standardsHTML 4.0 Transitional

XHTML Basic

XHTML TransitionalXHTML Strict

There are online validation toolsavailable which check conformance tostandards-


12/34


13/34


14/34

Kick It Up a Notch:Enhance your web page with

Cascading Style Sheets

CSS is a standard layout language forthe Web

Though precise and powerful, CSS iseasy to author by hand.

Replace HTML table-based layouts,

frames, and other presentational hacks.

Separate style from content


15/34

Benefits of CSSConserve bandwidth (less markup for visitors todownload)Reduce design/development timeReduce updating and maintenance time

Increased accessibility (fewer, or no, HTML tables;no invalid junk markup)Adhere to W3C recommendations, improvinginteroperability andensuring greater longevity Better,more professional appearance (lineheight, borders,

padding, margins)Increased readability (lineheight, borders, padding,margins)More easily transition in future to more powerfulstandards such as XML (because page content no

longer contains junk markup)


16/34

CSS: Rule Structure

h1 { color: purple; }

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

property value

begins and ends the declaration

property/valueseparator

ends every

property/value pair

declarationselector


17/34

CSS Rule Examplebody {

background: #FFFFFF;

color: black;margin-left: 5%;

margin-right: 5%;

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


18/34

Where do you put styles?In-line - add to HTML tag

Embedded style sheets

External style sheets


19/34

In-line

Similar to adding attributes to htmltags

Disadvantages

decreased accessibilityincreased file size

harder to update


20/34

Embedded style sheets

Put rules between style tags

Put in head section

Add html comment tags

Use when single document has unique style


21/34

External style sheets

Save rules in external file

Advantages

ease of maintenance

use less disk spaceincrease accessibility


22/34

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

variety of html tags

.bar {color: maroon; font-size:smaller;

background-color: yellow;}

text

link


23/34

CSS: Diagram of Precedence

ExternalStyleSheet

[call to external stylesheet]

[styles embedded inside thedocument]

XHTML File

1)

2)

Generalized order ofprecedence, all otherthings being equal


24/34

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


25/34

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

Automatically fixing some errors

Changing uppercase tags to lowercase

Indenting your code to make to make it morereadable

Quote all attribute values

And other things, depends on configuration file

An error report may also be generated thatcan identify remaining problems


26/34

Making the Transition:

Migrating an Existing Site

All at once:

Copy entire site to another locationRun 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 otherreasons


27/34

The FutureWill XML replace HTML?

It already has! Thats why youre here!

XML will typically notbe delivered to webclients; 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!


28/34

Adding hit counters to your web-

site for freeJust register atwww.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
http://www.google.com/analyticshttp://www.google.com/analytics


29/34


30/34

Good web-design practices:Comment your code!Use XHTML rules and CSSUse AJAX to enhance user interaction andincrease speedArchive code before making any changes tothe current web-siteRe-use code: eg: Database connection code,

reusable javascript subroutinesUse lower-case more than upper-case, itlooks more attractive and subtle


31/34

Good database design practicesComment your code!

Dont store big binary files in the database

Correctly 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 thesame data type throughout thedatabase.


32/34

ContinuedWhen running queries on the database, useonly the column names that you need toretrieve. This can reduce network traffic and

disk operations.When running an insert action query, use thecolumns list into which to insert instead of thetable name (when you want to insert data inall the current columns). This way, if newcolumns are added to the table, your querywill still work.


33/34

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.htmlBetter Living through XHTML

By, Jeffery Zeldman

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

Good practices in database designhttp://www.interaktonline.com/Support/Articles/Details
http://www.w3schools.com/xhtml/xhtml_intro.asphttp://www.nypl.org/styleguide/xhtml/index.htmlhttp://www.alistapart.com/stories/betterliving/http://www.interaktonline.com/Support/Articles/Detailshttp://www.interaktonline.com/Support/Articles/Detailshttp://www.alistapart.com/stories/betterliving/http://www.nypl.org/styleguide/xhtml/index.htmlhttp://www.w3schools.com/xhtml/xhtml_intro.asp


34/34

Thank-you!Questions ???

Snehal_XHTML.ppt

Documents

Transcript of Snehal_XHTML.ppt