- •Taking Your Talent to the Web
- •Introduction
- •1 Splash Screen
- •Meet the Medium
- •Expanding Horizons
- •Working the Net…Without a Net
- •Smash Your Altars
- •Breath Mint? Or Candy Mint?
- •Where’s the Map?
- •Mars and Venus
- •Web Physics: Action and Interaction
- •Different Purposes, Different Methodologies
- •Web Agnosticism
- •Point #1: The Web Is Platform-Agnostic
- •Point #2: The Web Is Device-Independent
- •The 18-Month Pregnancy
- •Chocolatey Web Goodness
- •’Tis a Gift to Be Simple
- •Democracy, What a Concept
- •Instant Karma
- •The Whole World in Your Hands
- •Just Do It: The Web as Human Activity
- •The Viewer Rules
- •Multimedia: All Talking! All Dancing!
- •The Server Knows
- •It’s the Bandwidth, Stupid
- •Web Pages Have No Secrets
- •The Web Is for Everyone!
- •Swap text and code for images
- •Prune redundancy
- •Cache as Cache Can
- •Much Ado About 5K
- •Screening Room
- •Liquid Design
- •Color My Web
- •Thousands Weep
- •Gamma Gamma Hey!
- •Typography
- •The 97% Solution
- •Points of Distinction
- •Year 2000—Browsers to the Rescue
- •Touch Factor
- •Appropriate Graphic Design
- •User Knowledge
- •What Color Is Your Concept?
- •Business as (Cruel and) Usual
- •The Rise of the Interface Department
- •Form and Function
- •Copycats and Pseudo-Scientists
- •Chaos and Clarity
- •A Design Koan: Interfaces Are a Means too Often Mistaken for an End
- •Universal Body Copy and Other Fictions
- •Interface as Architecture
- •Ten (Okay, Three) Points of Light
- •Be Easily Learned
- •Remain Consistent
- •Continually Provide Feedback
- •GUI, GUI, Chewy, Chewy
- •It’s the Browser, Stupid
- •Clarity Begins at Home (Page)
- •I Think Icon, I Think Icon
- •Structural Labels: Folding the Director’s Chair
- •The Soul of Brevity
- •Hypertext or Hapless Text
- •Scrolling and Clicking Along
- •Stock Options (Providing Alternatives)
- •The So-Called Rule of Five
- •Highlights and Breadcrumbs
- •Consistent Placement
- •Brand That Sucker!
- •Why We Mentioned These Things
- •The year web standards broke, 1
- •The year web standards broke, 2
- •The year web standards broke, 3
- •The year the bubble burst
- •5 The Obligatory Glossary
- •Web Lingo
- •Extranet
- •HTML
- •Hypertext, hyperlinks, and links
- •Internet
- •Intranet
- •JavaScript, ECMAScript, CSS, XML, XHTML, DOM
- •Web page
- •Website
- •Additional terminology
- •Web developer/programmer
- •Project manager
- •Systems administrator (sysadmin) and network administrator (netadmin)
- •Web technician
- •Your Role in the Web
- •Look and feel
- •Business-to-business
- •Business-to-consumer
- •Solve Communication Problems
- •Brand identity
- •Restrictions of the Medium
- •Technology
- •Works with team members
- •Visually and emotionally engaging
- •Easy to navigate
- •Compatible with visitors’ needs
- •Accessible to a wide variety of web browsers and other devices
- •Can You Handle It?
- •What Is the Life Cycle?
- •Why Have a Method?
- •We Never Forget a Phase
- •Analysis (or “Talking to the Client”)
- •The early phase
- •Design
- •Brainstorm and problem solve
- •Translate needs into solutions
- •Sell ideas to the client
- •Identify color comps
- •Create color comps/proof of concept
- •Present color comps and proof of concept
- •Receive design approval
- •Development
- •Create all color comps
- •Communicate functionality
- •Work with templates
- •Design for easy maintenance
- •Testing
- •Deployment
- •The updating game
- •Create and provide documentation and style guides
- •Provide client training
- •Learn about your client’s methods
- •Work the Process
- •Code Wars
- •Table Talk
- •XHTML Marks the Spot
- •Minding Your <p>’s and q’s
- •Looking Ahead
- •Getting Started
- •View Source
- •A Netscape Bonus
- •The Mother of All View Source Tricks
- •Doin’ it in Netscape
- •Doin’ it in Internet Explorer
- •Absolutely Speaking, It’s All Relative
- •What Is Good Markup?
- •What Is Sensible Markup?
- •HTML as a Design Tool
- •The Frames of Hazard
- •Please Frame Safely
- •Framing Your Art
- •<META> <META> Hiney Ho!
- •Search Me
- •Take a (Re)Load Off
- •WYSIWYG, My Aunt Moira’s Left Foot
- •Code of Dishonor
- •WYS Is Not Necessarily WYG
- •Publish That Sucker!
- •HTMHell
- •9 Visual Tools
- •Photoshop Basics: An Overview
- •Comp Preparation
- •Dealing with Color Palettes
- •Exporting to Web-Friendly Formats
- •Gamma Compensation
- •Preparing Typography
- •Slicing and Dicing
- •Rollovers (Image Swapping)
- •GIF Animation
- •Create Seamless Background Patterns (Tiles)
- •Color My Web: Romancing the Cube
- •Dither Me This
- •Death of the Web-Safe Color Palette?
- •A Hex on Both Your Houses
- •Was Blind, but Now I See
- •From Theory to Practice
- •Format This: GIFs, JPEGs, and Such
- •Loves logos, typography, and long walks in the woods
- •GIFs in Photoshop
- •JPEG, the Other White Meat
- •Optimizing GIFs and JPEGs
- •Expanding on Compression
- •Make your JPEGS smaller
- •Combining sharp and blurry
- •Animated GIFs
- •Creating Animations in ImageReady
- •Typography
- •The ABCs of Web Type
- •Anti-Aliasing
- •Specifying Anti-Aliasing for Type
- •General tips
- •General Hints on Type
- •The Sans of Time
- •Space Patrol
- •Lest We Fail to Repeat Ourselves
- •Accessibility, Thy Name Is Text
- •Slicing and Dicing
- •Thinking Semantically
- •Tag Soup and Crackers
- •CSS to the Rescue…Sort of
- •Separation of Style from Content
- •CSS Advantages: Short Term
- •CSS Advantages: Long Term
- •Compatibility Problems: An Overview
- •Working with Style Sheets
- •Types of Style Sheets
- •External style sheets
- •Embedding a style sheet
- •Adding styles inline
- •Fear of Style Sheets: CSS and Layout
- •Fear of Style Sheets: CSS and Typography
- •Promise and performance
- •Font Size Challenges
- •Points of contention
- •Point of no return: browsers of the year 2000
- •Absolute size keywords
- •Relative keywords
- •Length units
- •Percentage units
- •Looking Forward
- •11 The Joy of JavaScript
- •What Is This Thing Called JavaScript?
- •The Web Before JavaScript
- •JavaScript, Yesterday and Today
- •Sounds Great, but I’m an Artist. Do I Really Have to Learn This Stuff?
- •Educating Rita About JavaScript
- •Don’t Panic!
- •JavaScript Basics for Web Designers
- •The Dreaded Text Rollover
- •The Event Handler Horizon
- •Status Quo
- •A Cautionary Note
- •Kids, Try This at Home
- •The Not-So-Fine Print
- •The Ever-Popular Image Rollover
- •A Rollover Script from Project Cool
- •Windows on the World
- •Get Your <HEAD> Together
- •Avoiding the Heartbreak of Linkitis
- •Browser Compensation
- •JavaScript to the Rescue!
- •Location, location, location
- •Watching the Detection
- •Going Global with JavaScript
- •Learning More
- •12 Beyond Text/Pictures
- •You Can Never Be Too Rich Media
- •Server-Side Stuff
- •Where were you in ‘82?
- •Indiana Jones and the template of doom
- •Serving the project
- •Doing More
- •Mini-Case Study: Waferbaby.com
- •Any Size Kid Can Play
- •Take a Walk on the Server Side
- •Are You Being Served?
- •Advantages of SSI
- •Disadvantages of SSI
- •Cookin’ with Java
- •Ghost in the Virtual Machine
- •Java Woes
- •Java Woes: The Politically Correct Version
- •Java Joys
- •Rich Media: Exploding the “Page”
- •Virtual Reality Modeling Language (VRML)
- •SVG and SMIL
- •SMIL (through your fear and sorrow)
- •Romancing the logo
- •Sounds dandy, but will it work?
- •Promises, Promises
- •Turn on, Tune in, Plug-in
- •A Hideous Breach of Reality
- •The ubiquity of plug-ins
- •The Impossible Lightness of Plug-ins
- •Plug-ins Most Likely to Succeed
- •Making It Work: Providing Options
- •The “Automagic Redirect”
- •The iron-plated sound console from Hell
- •The Trouble with Plug-ins
- •If Plug-ins Run Free
- •Parting Sermon
- •13 Never Can Say Goodbye
- •Separation Anxiety
- •A List Apart
- •Astounding Websites
- •The Babble List
- •Dreamless
- •Evolt
- •Redcricket
- •Webdesign-l
- •When All Else Fails
- •Design, Programming, Content
- •The Big Kahunas
- •Beauty and Inspiration
- •Index
344 HOW: Beyond Text/Pictures: Cookin’ with Java
In Illustrator, you can recombine basic button shapes, spirals, or complex outlines to create new artwork from predesigned fragments. Similarly, a Java programmer can combine entire libraries worth of coded objects to build new programs from existing parts. Reusing graphic elements makes you faster and more productive; reusing code objects does the same thing for Java programmers.
Reusable parts: that’s the idea. Sun’s programmers called these parts objects. Sun didn’t invent this idea. Windows, Mac OS, and UNIX also reuse code objects (Windows DLLs, anyone?). But in operating systems like Windows, Mac OS, and UNIX, these reusable parts are immediately compiled down to machine code. In Java, they are compiled to an intermediary format called “bytecode,” which is then interpreted by a Java Virtual Machine, about which we’ll have more to say in just a moment.
As mentioned earlier in this chapter, Java can be used to create full-scale programs (applications), miniature programs that download quickly when needed (applets), or server-side servlets. Servlets are full-fledged but small application fragments that run in the context of the server—as Photoshop plug-ins run in the context of Photoshop.
Ghost in the Virtual Machine
But there’s a catch. Just as Windows programs require a Windows environment and Mac programs are designed for Macs, Java programs must run in a Java environment.
Does this mean that you have to go out and buy a Java computer? No, it simply means that Java programs are designed to run in Java-capable web browsers (Netscape Navigator, Microsoft Internet Explorer), Java-capable web-enabled devices, or special Java devices (such as Java-powered digital television-top boxes and remotes). They do this by means of Java Virtual Machines, which we promise, really truly promise, we will describe in just a moment.
Netscape was the first browser to support Java, and the point of the Sun/Netscape partnership, as explained in Chapter 2, was to smash Windows hegemony while getting Java onto as many platforms as possible, by way of the browser. They succeeded at getting Java onto as many platforms as possible. One out of two ain’t bad.
Taking Your Talent to the Web |
345 |
Today most browsers and computer operating systems support Java. It gets a bit more complicated when the browser or OS maker offers an “improved” Java environment that Sun does not consider truly Java-compatible, but we’ll get to that later. Java-capable browsers might run on any computing platform (Windows, Mac OS, Linux, UNIX, or BeOS) as long as the browser manufacturer supports that platform.
What makes all of this work? The Java Virtual Machine does. You might think of the Virtual Machine as a streamlined computer operating system (OS) running inside another computer OS—a Java computer running inside Windows, for example. Or you might think of it as an interpreter, turning spoken words into sign language for the hearing-impaired.
This Virtual Machine is sometimes included with the browser. Early versions of Netscape included a Virtual Machine customized for each OS. This added significantly to the download time but ensured that users would have the then-new Java technology at their disposal.
In other cases, the Virtual Machine is built into the operating system. For instance, Apple Macintosh OS9 includes “Mac OS Runtime for Java,” a Java Virtual Machine whose sole purpose is to run Java programs on the Mac.
If you install IE5 Macintosh Edition on a pre-OS 9 Mac, you might get Java errors because IE5/Mac expects a more recent Virtual Machine than the one on your system. You can correct this problem by upgrading to OS9 or by downloading a more recent version of Mac OS Runtime for Java from http://developer.apple.com/java/classic.html. The program is free.
As you can see, the tantalizing potential of Java lies in its ability to work in any operating system equipped with a Java Virtual machine—in other words, theoretically at least, to run on any operating system. Practically speaking, developers could build a word processor or a full-blown office suite that runs in any Java-capable web browser and on any operating system with a Virtual Machine. Of course, companies that make word processors and full-blown office suites might not like that idea. They might dislike it so much that they would end up building their own web browser and taking over the market…not that we’re mentioning any names. There is, in fact, a Java word processor (indeed, there is an entire Java office suite), and we hear it works quite well.
346 HOW: Beyond Text/Pictures: Cookin’ with Java
Where the web designer fits in
As a web designer, you might be called upon to embed a Java applet in an HTML page. (Again: An applet is a self-contained piece of code that runs within a Java-capable browser, as Photoshop plug-ins run within Photoshop.) This is simply a matter of using the HTML <OBJECT> or <APPLET> tag or another very basic HTML tag—no problem at all. At other times, you might use Java to compensate for a missing plug-in on a visitor’s system.
For instance, the IpixViewer plug-in, like Apple’s QuickTime VR (see the section, "Turn on, Tune in, Plug-in" later in this chapter), enables visitors to explore 360º panoramic views of any location that can be photographed. It’s an extraordinary plug-in that does a remarkable job. But not many people know about this plug-in, so not many have downloaded it. Therefore you might feel that IpixViewer content cannot be used on your site. Not to worry! The missing plug-in can be replaced by a Java applet and compiled down to native, platform-specific code via the Java Virtual Machine:
<applet name=”IpixViewer” code=”IpixViewer.class” archive=”IpixViewer.jar” height=”210”width=”280”>
<param name=”URL” value=”zabptcaj.ipx”> <param name=”Spin” value=”on”> </applet>
If the HTML just listed looks odd to you, don’t sweat it. Your Java developer will tell you what needs to be included on the page. Your job will be to insert it, test it, and verify things such as height and width. (Is the resulting image in fact 210 pixels high? Does it look right? If not, change the numbers and try again.) By the way, this same technique works for other multimedia content, such as Flash. If the visitor lacks the Flash plug-in, a Java applet can display the Flash content. Your developers will create the applet and the complex code that determines whether or not the applet is needed on each visitor’s system. Your job is simply to plug in some HTML and test.
The other reason you need to know about Java is that in spite of its utopian aims and utilitarian benefits, Java can sometimes be problematic. And as a user-oriented web designer, you need to be aware of that.