Web Standards and Dreamweaver - PowerPoint PPT Presentation

Loading...

PPT – Web Standards and Dreamweaver PowerPoint presentation | free to download - id: e5de-MGM3M



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Web Standards and Dreamweaver

Description:

American Express. Philips. Skype. Ericsson. Procter ... Aim for the 'sweet spot' The details matter. vs. Global consistency. Begin with a global template... – PowerPoint PPT presentation

Number of Views:86
Avg rating:3.0/5.0
Slides: 55
Provided by: Jer554
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Web Standards and Dreamweaver


1
Web Standards and Dreamweaver
  • Globalization
  • Accessibility
  • --------Break---------
  • Dreamweaver Intro
  • CSS in Dreamweaver
  • From Photoshop to valid xhtml/css

2
Globalization
3
Whos going global?
4
Why go global?
Today, non-native-English speakers make up the
majority of Internet users.
Source Global Reach
5
Worldwide language population trend
45
40
35
30
25
15
10
5
0
English Chinese Japanese Spanish
German

Source Global Reach
6
Google knows best
Languages Used to Access Google March 2001 -
March 2003
"We've prioritized international expansion for
2005 extremely highly." -- Eric Schmidt, CEO, Go
ogle
Source Google
7
Follow the money
8
Companies expanding globally
  • By 2006, Amazon was generating more than half of
    its revenues from its non-US Web sites.
  • eBay believes that China could eclipse Germany
    and England and become eBays second largest
    market within 10 to 15 years.
  • GE believes 60 of annual revenues will come from
    Asia over the next decade.
  • Sales in international Wal-Mart stores are
    growing twice as quickly as sales in US stores.

www.transwareplc.com
9
Globalization
  • Internationalization
  • the process of designing an application so that
    it can be adapted to various languages and
    regions without engineering changes.
  • Localization
  • the process of adapting an application for a
    specific region or language by adding
    locale-specific components and translating text.

10
Translation
  • There is NO accurate automatic translation
    system
  • http//babelfish.altavista.com/

11
Lost in Translation
  • Scandinavian vacuum manufacturer Electrolux used
    the following in an American ad campaign
    "Nothing sucks like an Electrolux."
  • In Chinese, the Kentucky Fried Chicken slogan
    "finger-lickin' good" came out as "eat your
    fingers off.
  • In Taiwan, the translation of the Pepsi slogan
    "Come alive with the Pepsi Generation" came out
    as "Pepsi will bring your ancestors back from the
    dead."

12
Lost in Translation
  • When General Motors introduced the Chevy Nova in
    South America, it was apparently unaware that "no
    va" means "it won't go." After the company
    figured out why it wasn't selling any cars, it
    renamed the car in its Spanish markets to the
    Caribe.
  • An American T-shirt maker in Miami printed shirts
    for the spanish market which promoted the Pope's
    visit. Instead of the desired "I Saw the Pope" in
    Spanish, the shirts proclaimed "I Saw the
    Potato."
  • When Gerber started selling baby food in Africa,
    they used the same packaging as in the US, with
    the beautiful baby on the label. Later they
    learned that in Africa, companies routinely put
    pictures on the label of what's inside, since
    most people can't read English.

13
Translation
  • Tips
  • Avoid jargon, colloquialisms, sports metaphors
  • Date and Time considerations
  • Money
  • Hand gestures are a bad idea.

14
Cultural Color Associations
(From Russo Boor, 1993).
15
Web globalization workflow
16
Global translation pains
  • Lack of globalization expertise and resources
  • Accountability and communication issues
  • Increased time-to-market risks
  • Quality and consistency issues across multiple
    locations and business units

17
Critical factors in localization
  • Content
  • Level of literacy Internet savvy
  • Culture
  • Local knowledge, metaphors, ethnicity, role
    gender models, behavioral norms, graphics, icons
  • Technology
  • Adaptation, audio, video, text expansion
  • Language
  • Regional variations style (marketing vs.
    technical)

18
The future is Unicode
Unicode contains more than 90,000 characters.
19
Study the Best Practices in Web Globalization
The Best Global Sites Google HP American Expre
ss Philips Skype Ericsson Procter Gamble Ci
sco
Source Web Globalization Report Card 2005
www.bytelevel.com
20
Develop a global gateway
1. Localized URLs (mandatory) 3. Splash Gateway (
optional)
4. Permanent Gateway (mandatory)
21
Make the gateway a priority
GE, 2003
GE, 2001
22
Aim for the sweet spot
23
The details matter
vs.
24
Global consistency
Begin with a global template...
vs.
25
Local customization
Ikea allows plenty of room for localization...
Ikea Denmark
Ikea France
26
Build for speed
Design sites for bandwidth, localization
turnaround, ROI.
vs.
27
Additional tips
  • Content should be written for a global audience,
    follow an international style guide, and be
    stored centrally.
  • If you have pictures of people on your site, have
    graphic libraries for substitute pictures that
    are regionally appropriate dealing with age,
    gender, race, etc
  • Whenever possible, keep text in external text
    files. They could be either plain text files or
    XML files. Embedded text is more expensive to
    work with and must be treated as part of the
    graphic.

28
Unicode not quite ready
Unicode is coming, but it is not a perfect
solution (yet). Just because it can allow you to
display different languages on a Web page does
not mean all Web users have the required fonts.
If they dont, theyll end up seeing something
like this…
29
Exercise
  • Redesign the following flyer according to the
    internationalization guidelines.

30
  • 09/01/07
  • 1000 PM 700 AM
  • Center Stage at the Daley Center
  • BYOB

31
Accessibility
32
what is web accessibility?
  • the Internet was originally designed as a
    platform independent, universal system of sharing
    information, irrespective of disability
  • the use of proprietary technologies and failure
    to properly implement World Wide Web Consortium
    (W3C) standards has led to these principles being
    undermined

33
Statistics on Disabilities
  • 20 of all U.S. citizens have some kind of
    disability.
  • 1 in 2 Americans 65 and older has a disability.
  • Nearly 30 of all families in the U.S. are
    affected by a member who has a disability.

34
Statistics, continued
  • Disabilities include the following areas
  • Low or Limited Vision
  • No Vision
  • Color Blind
  • Deaf or hearing impaired
  • Physical and motor impairments
  • Cognitive or Neurological

35
Statistics, continued
  • People with disabilities boast a population of 54
    million and have a discretionary income of more
    than 175 billion thats nearly twice the
    buying power of the teen market.
  • Presidents Committee on Employment of People
    with Disabilities, Aug. 2000

36
Is it that important?
  • Consider Google
  • The biggest blind user on the web
  • Recommendations
  • Blind Billionaire
  • If you count all the disabled people in America,
    the number would be equivalent to the combined
    populations of New York and Los Angeles.

37
Is it that important?
  • Consider motor-impaired
  • Prefer shopping online

38
Excuses, excuses…
  • Im a designer. I make stuff look good. How can
    I make stuff look good to blind people?
  • Most access enhancements have no effect on visual
    design.
  • Its all in the markup.

39
Guidlines
  • The Web Accessibility Initiative (WAI), a
    subgroup of W3C, provides the guidelines for
    ensuring content created for the web is
    accessible to all users.
  • Web Content Accessibility Guidelines (WCAG,
    1999)
  • The US Rehabilitation Act, Section 508

40
Section 508
  • Applies to federal departments and agencies
  • Activities sponsored by the federal government
  • Some states are adopting 508 as law too

41
Section 508
  • Equal or equivalent access to everyone
  • Visually impaired
  • Hearing impaired
  • Physically disabled
  • Photosensitive epileptics

42
Section 508
  • Example Problems
  • Small Text
  • Small hit areas
  • Flashing pages

43
Section 508
  • Does NOT forbid CSS, Javascript, table layouts,
    Flash, QT
  • …as long as guidelines are followed.

44
Section 508
  • Bottom Line
  • Compliance makes site accessible to people with
    disabilities
  • Bonus also makes the site friendlier to PDAs,
    Cell Phones, and Search Engines.

45
508 Compliant Examples
  • http//www.spazowham.com/
  • http//www.stuffandnonsense.co.uk/company/iotbs/
  • Test
  • http//www.cynthiasays.com
  • Firefox web developer extension
  • https//addons.mozilla.org/en-US/firefox/addon/60?
    id60

46
Accessibility Tips
  • Images
  • Always use alt
  • Use null alt for spacer gifs (shame on you!)
  • alt should convey meaning
  • Smith Company Home Page good
  • Smith_logo_v3 bad

47
Accessibility Tips
  • Flash and QuickTime
  • Link to plug-in
  • Captioning
  • Keep tab order in action script

48
Accessibility Tips
  • Color
  • Reinforce color denoted information
  • Avoid referring to colored text.
  • Visit the yellow box for help.
  • Take care when using color harmonies
  • http//gmazzocato.altervista.org/colorwheel/wheel.
    php

49
Accessibility Tips
  • Non-mouse Users
  • JavaScript onkeypress in addition to onclick
  • Avoid image maps
  • css tabindex

50
Exercise
  • What could you do to improve this site?
  • http//www.globalaigs.org/

51
DreamWeaver
52
Dreamweaver
  • FTP
  • Setup
  • Remote/Local Views
  • Font
  • Alignment
  • HyperLinks

53
Dreamweaver
  • Images
  • Image Maps
  • Auto FlashButtons

54
Dreamweaver
  • CSS
  • Tracing an image
About PowerShow.com