Showing posts with label Learning. Show all posts
Showing posts with label Learning. Show all posts

Monday, May 26, 2008

An Introduction to XHTML

An Introduction to XHTML
(Page 1 of 5 )

XHTML reformulates the existing HTML technology to be an application of XML. It is already used for mobile phone and PDA Internet sites, and expected to gain widespread use as XML becomes more popular. Dan Wellman explains the differences between XHTML and HTML 4, and shows how easy it is to make the switch.

XHTML was invented to try to clean up the mess left by trying to make HTML a full-fledged presentation tool, and to reduce the fragmentation of HTML caused by the introduction of non-standard elements, mainly by Microsoft and Netscape. Additionally, XML is viewed by many as the future of the Internet, so reformulating existing markup technology to be an application of XML is a step towards embracing that future and letting go of the long standing legacy of the past. XHTML is now the specification of choice for mobile phone and PDA Internet sites, so its cross platform functionality is already being taken advantage of in excellent ways.

XHTML and its predecessor HTML 4 are extremely similar languages to use. Anyone that has worked with HTML 4 (or XML even) will find switching to XHTML extremely easy; it is more often then not simply learning to break those bad coding habits that many of us have found so easy to slip into. Remembering the few rules that come with XHTML, and trying to avoid any deprecated tags where possible, is all it really takes.

In HTML, the mark-up surrounding your content is traditionally referred to as a tag, the <a> tag for example.  In XML and subsequently, XHTML, these tags and the text enclosed within them are known as elements. For example:

<p>This sentence, including the opening and closing tags is known as a paragraph element</p>
<p>This is a separate paragraph element</p>

Web Design Standards!!

Jakob Nielsen's
Alertbox, August 22, 1999:


Do Interface Standards Stifle Design Creativity?

No design standard can ever specify a complete user interface. Thus, by
definition,
much design work remains, even if the designer is committed
to complying with the appropriate standards
.
Often, the most important design elements are
those that cannot be specified by a standard, since the standard cannot
know the specifics of the individual domain addressed by the design.

For example, I was recently involved in the design of an e-commerce
site. The draft home page had three ways of getting to the products: search
and two navigation schemes, both of which were presented as simple lists
of choices. One navigation scheme was structured according to the way most users
think about the domain; the other scheme was structured
according to the way many of the manufacturer's own staff thought about their product
lines. Results from usability testing:

  • success rate of 80% when people used
    the navigation scheme structured according to most users'
    mental model
  • success rate of 9% when people used
    the navigation scheme structured according to the
    company's internal thinking
Conclusion: the second navigation scheme was dropped from the design, even
though this pained some of the project members. The second scheme had its
advantages for those people who used it correctly,
but it led most users into trouble, so it did more harm than
good.


I mention this result for two reasons: First, even though both navigation designs
looked identical and
followed the same interface standard in terms of appearance, layout, and
interaction techniques, their usability was drastically different. The first
design was almost nine times better than the second. This difference sums
to big dollars for an e-commerce site that will sell nothing unless
users can find the products. The difference in usability was not due to
differences in surface design but to
differences in deep
design
: finding
out how to best match a Web design to the users' needs and how to best
structure the information architecture. Thus, even when sticking to a
design standard, there was plenty to do for the site designers. A bad
designer would have used the bad navigation scheme on the home page
and never tested it.


Second, the result also shows that great usability is not guaranteed even
when following a detailed design standard to the letter. A
standard
ensures that your users can understand the individual interface
elements
in your
design and that they know where to look for what features. It does not
ensure that users will know how to combine the interface features or that the
system will have the features users needs.


Eric Davis, an
Information Architect with Resource Marketing, recently reported on
a usability test of shopping cart terminology.
The draft design featured the term "Shopping Sled" since
the site (selling winter sports products) had a desire to stand out
and avoid standard terminology. Result: "50% of users did not understand
The Sled concept. The other 50% said that
they figured out what it meant because it was in the same location as a cart
would be. They knew that you had to add to something, and the only
something that made any kind of sense was the Sled." Lesson: Do not try to be
smart and use new terms when we have good words available that users already
know.


Of course, there is no guarantee that a site that uses the term "shopping
cart" will have a shopping interface that is easy to use. All that is
ensured is that users will
understand the term when they see it
used
as a link around the site.
But that's a usability benefit well worth taking.



Jakob's Law of the Web User Experience: Users spend most
of their time on other sites.
Thus, anything that is a
convention and used on the majority of other sites will be burned into
the users' brains and you can only deviate from it on pain of major
usability problems.


Since the dawn of time (1984), we have known that consistency is one of the
strongest contributors to usability. The Macintosh was based on a detailed
book of Apple Human Interface Guidelines that were followed by almost all
applications. One of the main benefits of the Mac (and later Windows) over
earlier systems was the resulting consistency that made it possible for users
to use software right out of the box. For example, people knew that you
could move stuff around by a sequence of (1) select-object, (2) Cut-command,
(3) scroll-to-new-location, (4) click-on-insertion-spot, (5) Paste-command. Always the
same sequence. And the Cut and Paste commands were always in the Edit menu
and were always abbreviated Command-X and Command-V. No real reason people
should associate the letter V with insertion or pasting, but since it was
always the same, it worked.



Despite the strong consistency in all Mac software do you think Excel
looks like MacWrite? Or that there was no design creativity involved in
making
MORE (a popular outliner)?
It's clearly not the case that all GUI software is the same even though
most software has pretty strong compliance with the platform
design standards these days.



Similarly for the Web: following design standards simply ensures that users
know what you are talking about. It's like using standard English words rather than
your own vocabulary when writing. You are still the one who decides what
story to tell and how to put the design elements together.

Rules for Design Standards



To be successful, an interface design standard must:

  • be well-illustrated with examples since designers go
    by the examples much more than body text
  • make sure that the examples fully comply with the standard in

    all aspects and not just the one they are intended to illustrate
    (designers may pick up more than one hint from a given example)
  • have extensive and comprehensive checklists as much
    as possible (designers prefer to scan down a list instead of having to
    read text) - for example, a list of all elements that must be on every page
    or a list of preferred terminology
  • have a standards expert available both to review new designs in a formal
    standards inspections and for more informal consultations
    whenever designers are in doubt about the correct interpretation of the
    standard (if there is no easy place to turn with questions, then each
    designer will make up his or her own answer - guaranteed to be different
    in each case)
  • be supported by an active evangelism program. It is
    not enough to wait to be consulted: you must actively seek out projects
    and visit them to tell them about the standard and to (gently) comment on
    their designs and how to correct the inevitable deviations
  • be a living document under the control of a standards
    manager who updates the standard as new issues emerge

  • either comply with the most popular other design
    standards
    or contain explicit statements highlighting the
    differences to these other standards
  • be supported by development tools and templates that make it
    easier to comply with the standard than to implement
    a non-standard design
  • have a good index (if printed) or a good search supplemented with
    hypertext links to related rules (if online)

Evangelism outreach is especially important for intranet
standards
since every department will have an inclination to
ignore mandates from headquarters. They usually do so with the
excuse that
"we are different and the folks at HQ don't know our
situation."
True, but everybody is special

so the total system will be utter chaos if people are allowed to
diverge because of special circumstances. Usually, the greater good
is indeed greater, and overall usability is increased by consistency.
There can be a few cases where circumstances are so special that
an inconsistency should be tolerated, but deviations must be limited
to cases with a very, very good reason (most good reasons are not good
enough).


Finally, realize that a standard has its own usability concerns. This is
true whether the standard is implemented as an interactive website
with hypertext links or whether it is a traditional printed document.
Therefore
a
proposed design standard should be tested with designers
to ensure that they
can use it.


Saturday, May 10, 2008

Adobe DreamWeaver



Adobe Dreamweaver is a web development application originally created by Macromedia and now owned 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.NET, ColdFusion, JavaServer Pages, and PHP.


Features
As a
WYSIWYG Presto-based editor, Dreamweaver can hide the details of pages' HTML code from the user, making it possible for non-coders to create web pages and sites. A professional criticism of this approach is that it produces HTML pages whose file size and amount of HTML code is much larger than they should 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 this has improved considerably in recent versions. Dreamweaver 8.0 (the version prior to the recently released 9.0 within CS3) performed poorly on the Acid2 Test, developed by the Web Standards Project. However, Macromedia has increased the support for CSS and other ways to lay out a page without tables in later versions of the application, with the ability to convert tables to layers and vice versa. Dreamweaver allows users to preview websites in many browsers, provided that they are installed on their computer. It also has some site management tools, such as the ability to find and replace lines of text or code by whatever parameters specified across the entire site, and a templatization feature for creating multiple pages with similar structures. The behaviors panel also enables use of basic JavaScript without any coding knowledge.
Dreamweaver can use "Extensions" - small programs, which any web developer can write (usually in
HTML and JavaScript). Extensions provide added functionality to the software for whoever wants to download and install them. 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.

Syntax highlighting
As of version 6, Dreamweaver supports
syntax highlighting for the following languages out of the box:
ActionScript
Active Server Pages (ASP)
ASP.NET
C#
Cascading Style Sheets (CSS)
ColdFusion
EDML
Extensible HyperText Markup Language (XHTML)
Extensible Markup Language (XML)
Extensible Stylesheet Language Transformations (XSLT)
Java
JavaScript
JavaServer Pages (JSP)
PHP: Hypertext Preprocessor (PHP)
Visual Basic (VB)
Visual Basic Script Edition (VBScript)
Wireless Markup Language (WML)
It is also possible to add your own language syntax highlighting to its repertoire.
In addition,
code completion is available for many of these languages.

Version history
Dreamweaver 1.0 (Released December
1997)
Dreamweaver 1.2 (Followed in March
1998)
Dreamweaver 2.0 (Released December
1998)
Dreamweaver 3.0 (Released December
1999)
Dreamweaver UltraDev 1.0 (Released June
2000)
Dreamweaver 4.0 (Released December
2000)
Dreamweaver UltraDev 4.0 (Released December
2000)
Dreamweaver MX (Released
May 29, 2002. Version 6.0)
Dreamweaver MX 2004 (Released
September 10, 2003. Version 7.0)
Dreamweaver 8 (Released
September 13, 2005)
Dreamweaver
CS3 (Released April 16, 2007. Version 9.0)

Internationalization and localization

Language Availability
Adobe Dreamweaver CS3 is available in the following languages: Arabic (Middle Eastern version), Chinese Simplified, Chinese Traditional, Czech, Dutch, English, French, German, Hebrew (Middle Eastern version), Italian, Japanese, Korean, Polish, Russian, Spanish, Swedish, Turkish.
Adobe Dreamweaver Middle Eastern language versions available from WinSoft
[1].

Specific Features for Arabic and Hebrew languages
Dreamweaver Middle Eastern versions allow typing Arabic or Hebrew text (written from right to left) within the code view. Whether the text is fully Middle Eastern (written from right to left) or includes both English and Middle Eastern text (written left to right and right to left), it will be displayed properly in the browser.The Middle Eastern versions are also available for
Adobe Acrobat, Adobe Photoshop, Adobe Illustrator, Adobe InDesign, Adobe InCopy and for Adobe Creative Suite (Design Standard, Design Premium, Web Premium).

You can see some good tutorial in this web site: http://www.entheosweb.com/dreamweaver/default.asp

Dreamweaver TipsTips on tables, forms, CSS Styles, behaviors more.
Dreamweaver Behaviors Use the Dreamweaver behaviors panel to add interactivity to your site.
Jump Menus Use jump menus to create a drop-down menu with links.
LayersWhat are layers? Learn how to create them.
Dreamweaver Web Photo AlbumLearn how to create a picture gallery in Dreamweaver.
Using Templates in DreamweaverLearn how to create a template in Dreamweaver.
Making your site Live! Learn how to upload your files to a remote server and make your site live.
Flash Text RolloverHow to insert flash text rollover in Dreamweaver?
CSS Text RolloversLearn how to create CSS text rollovers.
Anchors and MailtoWhat are anchors? How to create mailto links? Click here.
Define a Site in Dreamweaver How to create a site in Dreamweaver
Pop-Up WindowsLearn how to create small pop-up windows for ads or news!
Play SoundPlay sound, music on Rollover, on Click or on Page Load.
Show Hide Layers Learn how to hide and view layers.
Dreamweaver Image MapsLearn how to link to different pages from the same image.
Server Side IncludesLearn about server side includes and how do you use them.
Dreamweaver Form TipsTips on customizing input boxes, list menus, submit buttons.
CSS Styles Tutorial Learn about CSS Styles and cool tips on tricks!
Links without the UnderlineLearn how to create links without an underline using CSS styles.