CAPTULO 10

In this chapter, you will learn how to:

CHAPTER10
Design the structure and

user interface for a multimedia project How to produce a successful multimedia project and work with clients

Neste captulo, voc vai aprender a: CHATPER10 Projeto da estrutura e interface de usurio para um projeto multimdia Como produzir projecto multimdia de sucesso e trabalho com clientes

Designing and Concepo e Producing Produo

esigning

and building multimedia

projects go hand in hand. For CD-ROM and DVD projects, design input is never over until the product is actually frozen and shipped. The best products are often the result of continuing feedback and modifications implemented throughout the production process; projects that freeze a design too early become brittle in the production workplace, losing the chances for incremental improvement. But there is a danger: too much feedback and too many changes can kill a project, draining it of time and money. Always balance proposed changes against their cost to avoid the creeping features syndrome. For a project bound for a web site, the design may be completed and implemented, yet the sites content may be regularly updated and changed, so the project may (by its very design) never be completely frozen. In such cases, it is especially important to set clear deadlines and milestones. Just as the architect of a high-rise office tower must understand how to utilize the materials with which he or she works (lest the construction collapse on trusting clients), designers of multimedia projects must also understand the strengths and limitations of the elements that will go into their project. It makes no sense, for example, to design the audio elements of a multimedia project in memory-consuming 16-bit, 44.1 kHz stereo sound when the delivery medium will not have sufficient room for it; or to produce lengthy, full-screen, video clips to play at 30 frames per second over the Internet when targeted end users connect by dial-up modems; or to design lovely 1024 768 pixel graphics for elementary school laptops when that environment supports only 800 600 pixel screens. Architects dont design inner city parking garages with 14-foot ceilings and wide turning radii for 18-wheel big rigs, and they dont build them using wood or mud laid on a swampy foundation. Designers must work closely with producers to ensure that their ideas can be properly realized, and producers need

Concepo e construo de projetos de multimdia caminham lado a lado. Para CD-ROM e projetos de DVD, entrada de design nunca longo at que a produto realmente congelado e enviado. Os melhores produtos so muitas vezes o resultado do feedback contnuo e modificaes implementadas ao longo do processo de produo, projetos que finalizam um design muito cedo tornamse frgeis no local de trabalho de produo, perdendo as chances de melhoria incremental. Mas h um perigo: muito feedback e muitas mudanas pode matar um projeto, custando tempo e dinheiro. Sempre equilbrio proposto mudanas contra o seu custo para evitar a "rasteira caractersticas" sndrome. Para um projeto de um site, o projeto pode ser preenchido e implementado, ainda assim, o contedo do site pode ser atualizado regularmente e alterado, por isso o projeto nunca pode (por sua concepo) ser totalmente finalizado. Em tais casos, especialmente importante para definir prazos e metas claros. Assim como o arquiteto de uma torre de escritrios de alto crescimento deve entender como para utilizar os materiais com os quais ele ou ela trabalha (para que a construo colapso na confiana clientes), os designers de projetos de multimdia tambm deve compreender os pontos fortes e as limitaes dos elementos que entram em seu projeto. No faz sentido, por exemplo, para desenhar os elementos de udio de um projeto multimdia na memria consome 16-bit estreo kHz, 44,1 Khz som quando o meio de entrega no ter espao suficiente para ele, ou para produzir longas, em tela cheia, clipes de vdeo para jogar a 30 quadros por segundo atravs da Internet quando os usurios finais direcionados conectar modems dial-up, ou para projetar adorveis 1024 768 pixel grficos para computadores portteis do ensino fundamental quando que o ambiente suporta apenas 800 600 telas de pixels. Arquitetos no projetar parques de estacionamento no interior da cidade, com 14 metros de largura e tectos transformar os raios de 18 rodas grandes plataformas, e no constru-los utilizando madeira ou lama colocado sobre uma base pantanoso. Designers devem trabalhar em estreita colaborao com os produtores para garantir que as suas ideias pode ser adequadamente realizado, e os produtores de confirmar os resultados dos seu trabalho com os designers. "Essas cores parecem funcionar melhor que que voc acha? "" Ele joga mais suave agora, mas eu tive que mudar a animao seqncia. . . "" Fazer o ndice com linhas destacadas retarda- podemos

Pagina 295 The idea processing (described in Chapter 9) of your multimedia project will have resulted in a detailed and balanced plan of action, a production schedule, and a timetable. Now its time for implementation!

O processamento idia (descrita no Captulo 9) do seu multimdia projeto resultou em um plano detalhado e equilibrado de ao, uma produo programar, e um calendrio. Agora hora de implementao!

Designing
The design part of your project is where your knowledge and skill with computers; your talent in graphic arts, video, and music; and your ability to conceptualize logical pathways through information are all focused to create the real thing. Design is thinking, choosing, making, and doing. It is shaping, smoothing, reworking, polishing, testing, and editing. When you design your project, your ideas and concepts are moved one step closer to reality. Competence in the design phase is what separates amateurs from professionals in the making of multimedia.
outlining its structure and content.

Desenho
A parte de design do seu projeto o lugar onde o seu conhecimento e habilidade com computadores; seu talento em artes grficas, vdeo e msica, e sua capacidade para conceituar caminhos lgicos atravs de informao esto todos focados para criar a coisa real. Design pensar, escolher, criar e fazer. modelar, alisar, retficar , polir, testar e editar. Quando voc projetar seu projeto, suas idias e conceitos so movidos a um passo de realidade. Competncia na fase de projeto o que separa amadores de profissionais na tomada de multimdia. Dica Nunca comece um projeto multimdia sem antes delinear sua estrutura e contedo. Dependendo do escopo do seu projeto e do tamanho e estilo de seu equipe, voc pode ter duas abordagens para a criao de um multimdia original e com designe interativo. Voc pode passar um grande esforo nos storyboards, ou contornos grficos, descrevendo o projeto em detalhes ,usando palavras e desenhos para cada um e cada e imagem da tela, som e navegao, bem como cores especficas e sombras, contedo de texto, atributos e fontes, boto formas, estilos, respostas e inflexes de voz. (Esta abordagem particularmente bem adequado para as equipes que podem construir prottipos rapidamente e, em seguida, rapidamente convert-los em produtos acabados.) Ou voc pode usar storyboards menos detalhadas como um guia esquemtico spero, permitindo-lhe exercer menos trabalho de design e despender mais esforo realmente tornando o produto uma estao de trabalho. O mtodo escolhido depende se as mesmas pessoas fazem tudo (tanto a concepo e execuo) ou se a implementao ser encarregado ou terceirizada para uma nova equipe que tero uma especificao detalhada (isto , um storyboard detalhado e esboos). Ambas as abordagens requerem o mesmo conhecimento profundo das ferramentas e capacidades de multimdia, e tanto a demanda de um storyboard ou um esboo do projeto. A primeira abordagem muitas vezes favorecido por clientes que desejam

Tip Never begin a multimedia project without first

Depending on the scope of your project and the size and style of your team, you can take two approaches to creating an original interactive multimedia design. You can spend great effort on the storyboards, or graphic outlines, describing the project in exact detail using words and sketches for each and every screen image, sound, and navigational choice, right down to specific colors and shades, text content, attributes and fonts, button shapes, styles, responses, and voice inflections. (This approach is particularly well suited for teams that can build prototypes quickly and then rapidly convert them into finished goods.) Or you can use less-detailed storyboards as a rough schematic guide, allowing you to exert less design sweat up front and expend more effort actually rendering the product at a workstation. The method you choose depends on whether the same people will do the whole thing (both the designing and the implementing) or

whether implementation will be tasked or outsourced to a new team who will then need a detailed specification (that is, a detailed storyboard and sketches). Both approaches require the same thorough knowledge of the tools and capabilities of multimedia, and both demand a storyboard or a project outline. The first approach is often favored by clients who wish to tightly control the production process and labor costs. The second approach gets you more quickly into the nitty-gritty, hands-on tasks, but you may ultimately have to give back that time because more iterations and editing will be required to smooth the work in progress. In either case, the more planning on paper, the better and easier it will be to construct the projec Pagina 296

controlar firmemente o processo de produo e custos trabalhistas. A segunda abordagem faz com que voc ponha em prtica mais rapidamente, mas voc pode vir a ter que devolver esse tempo, porque mais interaes e edies ser necessrio para suavizar o trabalho em andamento. Em qualquer caso, quanto mais planejamento no papel, melhor e mais fcil ser a construir o projeto.

Designing the Structure

A multimedia project is no more than an arrangement of text, graphic, sound, and video elements (or objects). The way you compose these elements into interactive experiences is shaped by your purpose and messages. How you organize your material for a project will have just as great an impact on the viewer as the content itself. Since the explosive growth of the World Wide Web and proliferation of millions and millions of multimediacapable HTML documents that can be linked to millions of other similar documents in the cyberspace of the Web, your designs and inventions may actually contribute to the new media revolution: other creators may discover your work and build upon your ideas and methods. On some projects, you may be both the designer and the programmer. This can work well because you will understand how the design features you choose will actually be implemented. Indeed, your design will be tempered, if not defined, by your programming and coding skills, and you will be less likely to specify features impossible or overly difficult to realize.

Criando a estrutura
Um projeto multimdia no mais do que um arranjo de texto, grfico,som e vdeo elementos (ou objetos). A forma de compor esses elementos em experincias interativas moldada pela sua finalidade e mensagens. Como voc organiza seu material para um projeto ter um to grande impacto sobre o espectador como o prprio contedo. Dado que o crescimento explosivo da a World Wide Web e proliferao de milhes e milhes de multimdia capazes documentos HTML que pode ser ligado a milhes de outros documentos semelhantes no ciberespao da Web, seus projetos e invenes pode realmente contribuir para a revoluo da nova mdia: outros criadores pode descobrir o seu trabalho e construir sobre as suas ideias e mtodos. Em alguns projetos, voc pode ser o designer e programador. Isso pode funcionar bem, porque voc vai entender como as caractersticas de projeto voc escolher vai realmente ser implementada. Na verdade, o projeto ir ser temperado, se no se define, por sua programao e habilidades de codificao, e voc ser menos propensos a especificar caractersticas impossveis ou muito difceis de realizar.

Navegao
Mapeamento da estrutura do projeto uma tarefa que deve ser iniciada precocemente na fase de

Navigation
Mapping the structure of your project is a task that should be started early in the planning phase, because navigation maps outline the connections or links among various areas of your content and help you organize your content and messages. A navigation map (or site map) provides you with a table of contents as well as a chart of the logical flow of the interactive interface. While with web sites a site map is typically a simple hierarchical table of contents with each heading linked to a page, as a more detailed design document your map may prove very useful to your project, listing your multimedia objects and describing what happens when the user interacts. Just as eight story plots might account for 99 percent of all literature ever written (boy meets girl, protagonist versus antagonist, etc.), a few basic structures for multimedia projects will cover most cases: linear navigation, hierarchical navigation, nonlinear navigation, and composite navigation. Figure 10-1 illustrates the four fundamental organizing structures used in multimedia projects, often in combination: Linear Users navigate sequentially, from one frame or bite of information to another. Hierarchical Also called linear with branching, since users navigate along the branches of a tree structure that is shaped by the natural logic of the content. Nonlinear Users navigate freely through the content of the project, unbound by predetermined routes.

planejamento, porque os mapas definem as interaes das vrias reas do seu contedo e ajuda a organizlos. Um mapa de navegao (ou mapa do site) oferece uma tabela de contedos, bem como um grfico do fluxo lgico doa interatividade da interface. Embora com sites um mapa do site tipicamente um hierrquica simples tabela de contedo com cada rubrica vinculada a uma pgina, como mais documento de projeto detalhado seu mapa pode ser muito til para o seu projeto, listando seus objetos multimdia e descrever o que acontece quando o usurio interage. Assim como oito parcelas histria poderia ser responsvel por 99 por cento de toda a literatura j escrito (garoto conhece garota protagonista, versus antagonista, etc), uma base de poucos estruturas para projetos de multimdia vai cobrir a maioria dos casos: navegao linear, hierrquico de navegao no-linear, navegao, e composto navegao. Figura 10-1 ilustra as quatro estruturas fundamentais de organizao usados em projetos de multimdia, muitas vezes em combinao: Usurios lineares navegar sequencialmente, a partir de um quadro ou mordida de informaes para a outra. hierrquica Tambm chamado de "linear com ramificao", j que os usurios navegam ao longo dos ramos de uma estrutura de rvore que moldada pelo natural lgica do contedo. Os usurios no-lineares navegar livremente por meio do contedo do projeto, no ligado por rotas pr-determinadas.

Pagina 297

Composite Users may navigate freely (nonlinearly) but are occasionally constrained to linear presentations of movies or critical information and/or to data that is most logically organized in a hierarchy. The method you provide to your viewers for navigating from one place to another in your project is part of the user interface. The success of the user interface depends not only upon its general design and graphic art implementations but also upon myriad engineering details such as the position of interactive buttons or hot spots relative to the users current activity, whether these buttons light up, and whether you use standard Macintosh or Windows pulldown menus. A good user interface is critical to the overall success of your project. The nature of your interface will vary depending on its purpose: browsing, database access, entertainment, information, instruction, reference, marketing, and gaming projects require different approaches and different navigation strategies.

Structural Depth
Professor Judith Junger from the Open University of the Netherlands

Usurios compostas podem navegar livremente (no linear), mas ocasionalmente so constrangidos para apresentaes lineares de filmes ou crtico da informao e / ou a de dados que mais logicamente organizados em uma hierarquia. O mtodo que voc fornecer aos seus telespectadores para navegar de um lugar para outro em o projeto parte da interface do usurio. o sucesso da interface do usurio no depende somente em seu design geral e grfico implementaes de arte, mas tambm sobre incontveis detalhes de engenharia, como a posio de botes interativos ou pontos quentes relativos para a atividade atual do usurio, seja estes botes "iluminar", e se voc usar o padro Macintosh ou Windows suspenso menus. Uma boa interface do usurio fundamental para o sucesso global do seu projeto. A natureza de sua interface ir variar dependendo da sua finalidade: a navegao de banco de dados, entretenimento, acesso, informaes, instruo, de referncia, marketing, jogos e projetos requerem diferentes abordagens e estratgias de

in Amsterdam suggests that when you design your multimedia product, you should work with two types of structure: depth structure and surface structure. Depth structure represents the complete navigation map and describes all the links between all the components of your project (see Figure 10-1). Surface structure, on the other hand, represents the structures actually realized by a user while navigating the depth structure. Thus the following depth structure

navegao diferentes. Profundidade estrutural Professor Judith Junger da Universidade Aberta da Holanda em Amsterd sugere que, quando voc projetar seu produto multimdia, voc deve trabalhar com dois tipos de estrutura: estrutura de profundidade e estrutura de superfcie. Estrutura de profundidade representa o mapa de navegao completo e descreve todas as ligaes entre todos os componentes do seu projeto (ver Figura 10-1). Estrutura de superfcie, por outro lado, representa as estruturas efetivamente realizado por um usurio ao navegar na estrutura de profundidade. assim a estrutura de profundidade a seguir

Structural Depth
Professor Judith Junger from the Open University of the Netherlands in Amsterdam suggests that when you design your multimedia product, you should work with two types of structure: depth structure and surface structure. Depth structure represents the complete navigation map and describes all the links between all the components of your project (see Figure 10-1). Surface structure, on the other hand, represents the

Profundidade estrutural
Professor Judith Junger da Universidade Aberta da Holanda em Amsterd sugere que, quando voc projetar seu produto multimdia, voc deve trabalhar com dois tipos de estrutura: estrutura, profundidade e extenso estrutura. Estrutura de profundidade representa o mapa de navegao completo e descreve todas as ligaes entre todos os componentes do seu projecto (ver Figura 10-1). Estrutura

structures actually realized by a user while navigating the depth structure. Thus the following depth structure

de superfcie, por outro lado, representa as estruturas efectivamente realizado por um usurio ao navegar na estrutura de profundidade. Assim a estrutura de profundidade a seguir

Pagina 298

When you design your navigation map, it helps to think about surface structureto view the product from a users perspective. Surface structures are of particular interest to marketing firms in tracking users routes through a web site to determine the effectiveness of the sites design and to profile a users preferences. When a users preferences are known, a custom web site experience can be dynamically tailored and delivered to that user. Acquisition and management of such profiling data is a hot topic, with privacy advocates claiming the personal information revealed in these surface structures is akin to a persons medical and health records. Many navigation maps are essentially

Quando voc projetar seu mapa de navegao, ajuda a pensar sobre a superfcie -estrutura para ver o produto do ponto de vista de um usurio. estruturas de superfcie so de especial interesse para empresas de marketing no monitoramento rotas dos usurios atravs de um site para determinar a eficcia do design do site e para o perfil de preferncias de um usurio. Quando as preferncias de um usurio so conhecidos, um costume experincia site podem ser dinamicamente adaptado e entregue ao usurio. Aquisio e gesto de dados de perfis tais um tema quente, com privacidade defensores alegando a informao pessoal revelada nestes superfcie

nonlinear. In these navigational systems, viewers are always free to jump to an index, a glossary, various

estruturas semelhante aos registros mdicos e de sade de uma pessoa. Mapas de navegao Muitos so essencialmente nolinear. Nestes navegao sistemas, os espectadores so sempre livre para saltar para um ndice, um glossrio, vrios

Pagina 299

First Person
Dear Tay, With regard to the creation of interactive fiction, what kinds of software engineering strategies would you recommend for creating stories that maintain a strong sense of cumulative action (otherwise known as plot) while still offering the audience a high frequency of interaction? In other words, how do you constrain the combinatoric explosion of the narrative pathways, while still maintaining the Aristotelian sense of a unity of plot? Patrick Dillon, Atlanta, GA One and one-half T-shirts to Patrick Dillon! Would have been two for your invocation of a famous Greek philosopher, but then I couldnt find combinatoric in Websters. Aristotle himself would have been pleased by the harmonious balance of your reward: you have asked a really good question. As multimedia and the power of computers begin to change our approach to literature and storytelling, new engineering strategies do need to be implemented. When fiction becomes nonlinear, and users can choose among alternative plot lines, the permutations can become staggering. To an author, this means each new plot pathway chosen by user interaction requires its own development, and one story may actually become several hundred or more. To constrain this fearsome explosion of narrative pathways, yet retain a high frequency of interaction, try designing your fiction around a single core plot that provides the cumulative action, and use arrays of returning branches for detail and illustration. In this way you can entirely avoid the permutations of alternative universes and still offer the adventure of interactive exploration.

Primeira Pessoa
Caro Tay, No que se refere criao de interativo fico, que tipos de software estratgias de engenharia voc faria Recomendamos para a criao de histrias que manter um forte senso de cumulativo ao (tambm conhecido como parcela), oferecendo ainda o pblico uma alta freqncia de interao? Em Por outras palavras, como voc restringir a exploso combinatria do percursos narrativos, mantendo sentido aristotlico de uma unidade do enredo? -Patrick Dillon, Atlanta, GA Um e uma meia-T-shirts para Patrick Dillon! Teria sido dois para sua invocao de um grego famoso filsofo, mas ento eu no poderia encontrar "Combinatria" em Webster. Aristteles mesmo teria sido satisfeito pelo equilbrio harmonioso de sua recompensa: voc pediu uma realmente boa pergunta. Como multimdia e ao poder de computadores comeam a mudar a nossa aproximar a literatura e contao de histrias, novas estratgias de engenharia precisam ser implementadas. Quando a fico se torna no-linear, e os usurios podem escolher entre alternativas linhas de enredo, as permutaes pode se tornar surpreendente. Para uma autor, isto significa que cada novo caminho escolhido pela interao do usurio requer o seu prprio desenvolvimento e uma histria pode realmente tornar-se vrias cem ou mais. Para restringir esta exploso temvel da narrativa caminhos, ainda manter uma freqncia alta de interao, tentar projetar sua fico em torno de um nico ncleo

Dear Tay, I just read your answer to Patrick Dillons question about interactive fiction in your column. My response is difficult to contain: Aaarrrrggghhhh!!!! You Ignorant Slut! OK, perhaps I am overreacting, but you are refusing to let go of linearity. Why ever do you want to constrain the combinatoric explosion of narrative pathways? Good Lord, thats what makes the gametree bushy. This is exactly the kind of work thats well suited for a computer to perform grinding out three billion story variations! Chris Crawford, San Jose, CA Chris, Ive been called a lot of things over the years (like Fay and Ray), and its with a smile that I add your gift to my collection. Playing Jane Curtin to your Dan Aykroyd, Ill be happy to counter your counterpoint. Your challenge represents a serious subject for multimedia designers today. I agree that interactive stories with too few branches are disappointingly flat and shallow. When a plot is broadly nonlinear, however, the permutations of events and possible outcomes become staggering, and the story as a whole becomes difficult to visualize and manage. Producing such work is also an intellectual challenge and costly in time and effort. A truly open-ended hypermedia navigation system for consumer consumption risks death by shock caused by open arterial branches and loss of story pressure, where plot lines become too diffuse and users founder in trivia. Most users may, indeed, prefer a structured, organized, and well-defined story environment. The argument for simplicity is voiced by Steven Levy, the author of Hackers and Artificial Life, who says, Theres really something to be said for documents with a beginning, middle, and end. The shape of this new literature made possible by multimedia computers and wide-bandwidth cable and telephone delivery systems is being born in the working designs of developers. The final test for successful multimedia design is the marketplace, where consumers will decide. Your interesting algorithms for interpersonal behavior, personality models, artificial personality, languages of expression, and facial displays represent, perhaps, a successful

trama que fornece o acumulado de ao e uso de matrizes de voltar ramos para o detalhe e ilustrao. Desta forma, voc pode evitar totalmente as permutaes de universos alternativos e ainda oferecer a aventura de explorao interativa. Caro Tay, Acabei de ler a sua resposta para Patrick Dillon pergunta sobre interativo fico em sua coluna. Minha resposta difcil de conter: "Aaarrrrggghhhh!!!! Voc vagabunda ignorante! "OK, talvez Eu estou exagerando, mas voc recusando-se a deixar de ir a linearidade. Por que cada vez que voc quer "restringir a exploso combinatria de narrativa caminhos "? Bom Senhor, que o que faz o gametree espessa. Isto exatamente o tipo de trabalho que est bem adequado para um computador para executarmoagem fora trs bilio histria variaes! -Chris Crawford, San Jose, CA Chris, eu j fui chamado de um monte de coisas ao longo dos anos (como Fay e Ray), e com um sorriso que eu adicionar seu presente para a minha coleo. Jogando Jane Curtin para o seu Dan Aykroyd, eu vou ser feliz para contrariar o seu contraponto. Seu desafio representa um srio assunto para os designers de multimdia hoje. Concordo que histrias interativas com ramos muito poucos so decepcionantes plano e raso. Quando um trama largamente no-linear, no entanto, as permutaes de eventos e possveis resultados tornam-se cambaleante, e da histria como um todo torna-se difcil de visualizar e gerenciar. Produzindo um trabalho que tambm um intelectual desafio e dispendiosa em tempo e esforo. Um verdadeiramente aberto "hipermdia" sistema de navegao para o consumidor riscos de consumo de morte por choque causada por ramos arteriais abertas e perda de presso de histria, onde trama linhas de tornar-se demasiado difusa e usurios fundador em trivialidades. A maioria dos usurios pode,

marriage of this computer power with literature containing malleable plots and seemingly endless variations. Indeed, your forthcoming epic game, Le Morte DArthur, will surely break new ground and quite possibly prove your point. Cant wait to get a copy! From correspondence in Ask the Captain, a monthly column by Tay Vaughan in NewMedia magazine.

de fato, preferem um estruturado, organizado, e bem definida ambiente histria. O argumento para a simplicidade dublado por Steven Levy, autor de Hackers e Vida Artificial, que diz: "No h realmente algo a ser dito para documentos com um comeo, meio e fim. " A forma desta nova literatura possibilitada por computadores multimdia e banda larga a cabo e sistemas de entrega de telefone est nascer nos projetos de trabalho de desenvolvedores. O teste final para projeto multimdia bem sucedido o mercado, onde os consumidores decidir. Seus algoritmos interessantes " para o comportamento interpessoal personalidade, modelos, personalidade artificial, linguagens de expresso, e faciais exibe "representa, talvez, um bem-sucedido casamento deste computador poder com a literatura contendo parcelas maleveis e, aparentemente, variaes infinitas. De fato, sua prximo jogo pico, Le Morte D'Arthur, certamente vai quebrar novo terra e muito possivelmente provar o seu ponto. No posso esperar para conseguir uma cpia! Da correspondncia em "Pergunte ao Capito ", uma coluna mensal por Tay Vaughan na revista NewMedia.

Pagina 300
Because all forms of information including text, numbers, photos, video, and soundcan exist in a common digital format, they can be used simultaneously as people browse through an information stream, just as people use their various Porque todas as formas de informaoincluindo texto, nmeros, fotos, vdeos, e de som pode existir numa formato digital comum, eles podem ser utilizados em simultneo como as pessoas a navegar atravs de um fluxo de informao, apenas como as pessoas menus, Help or About . . . sections, or even to a rendering of the map itself. It is often important to give viewers the sense that free choice is available; this empowers them within the context of the subject matter. Nonetheless, you should still provide consistent clues regarding importance, emphasis, and direction by menus de ajuda, ou Sobre. . . sees, ou mesmo a uma prestao do prprio mapa. Muitas vezes, importante dar aos espectadores a sensao de que a livre escolha est disponvel; isto permite-lhes que se familiarizem com o contexto do assunto. No entanto, voc deve ainda fornecer indcios

senses simultaneously to perceive the real world.

Bill Gates, Chairman, Microsoft Corporation

usam seus vrios sentidos simultaneamente para perceber o mundo real. Bill Gates, presidente, Microsoft Corporation

varying typeface size and look, colorizing, indenting, or using special icons. The architectural drawings for your multimedia project are the storyboards and navigation maps. The storyboards are married to the navigation maps during the design process, and help to visualize the information architecture. A simple navigation map is illustrated in Figure 10-2, where the subject matter of a small project to teach the basics of animation was organized schematically. The items in boxes are not only descriptions of content but also active buttons that can take users directly to that content. At any place in the project, users can call up this screen and then navigate directly to their chosen subject

consistentes a respeito da nfase, importncia, e direo atravs de variao de tamanho e aparncia da fonte, colorao, recuo, ou usando cones especiais. Os desenhos arquitetnicos para seu projeto multimdia so os storyboards e mapas de navegao. Os storyboards so casados com os mapas de navegao durante o processo de design, e ajudar a visualizar a informao da arquitetura. Um mapa de navegao simples ilustrada na Figura 102, onde o sujeito questo de um pequeno projeto para ensinar os fundamentos da animao foi organizada esquematicamente. Os itens em caixas no so apenas descries de contedo, mas tambm botes ativos que podem levar os usurios diretamente a esse contedo. Em qualquer lugar no projeto, os usurios podem ligar para esta tela e, em seguida, navegar diretamente para seu tema escolhido

Pagina 301
A storyboard for this same project, originally built for a small blackandwhite low-resolution display, is organized sequentially, screen by screen, and each screen is sketched out with design notes and specifications before rendering. On the left, in Figure 10-3, are parts of the storyboard for this project; on the right are corresponding finished screens. Um storyboard para este mesmo projeto, originalmente construdo para um pequenoblackand tela de baixa resoluo branco, organizado seqencialmente tela, por tela, e cada tela esboado com notas de design e especificaes antes da renderizao. esquerda, na Figura 10-3, so partes do storyboard para este projecto; direita so correspondentes telas finais.

Pagina 302
Really good software products should be simple, hot, and deep. People need to get into your software in about 20 seconds and get immediate positive feedback and reward; then they are smiling and having a good time and they want to go further. Hot means that youve got to be fully cooking the machine, with all its graphics and sound capabilities, conveying something dynamic and exciting that competes with what people are used to seeing in a movie or on TV. In terms of deep, its kind of like the ocean where there are people of all ages: some kids will just wade out in a foot of surf, other guys with scuba gear go way out and way deep. Make it possible for me to go as deep as I want, but dont force it on me. Just let the depth of your product unfold to me in a very natural way. Realmente bons produtos de software deve ser simples, quente, e profundo. As pessoas precisam em seu software em cerca de 20 segundos obter imediato feedback positivo e recompensa, ento eles esto sorrindo e ter um bom tempo e eles querem ir mais longe. "Hot" significa que voc tem tem que ser totalmente cozinhar a mquina, com todos os seus recursos sonoros e grficos, transmitir algo dinmica e emocionante que compete com o que as pessoas esto acostumados a ver em um filme ou na TV. Em termos de "profundo", uma espcie de como o oceano onde h pessoas de todas as idades: algumas crianas sero apenas wade em um p de surf, outros caras com equipamento de mergulho vo muito para fora e forma profunda. Faa o possvel para que eu v to profundo como eu quero, mas no for-lo em mim. Apenas deixe o profundidade de seu produto se desdobrar Multimedia provides great power for jumping about within your projects content. And though it is important to give users a sense of free choice, too much freedom can be disconcerting, and viewers may get lost. Try to keep your messages and content organized along a steady stream of the major subjects, letting users branch outward to explore details. Always provide a secure anchor, with buttons that lead to expected places, and build a familiar landscape to which users may return at any time. Your content may not always be an assembly of discrete subjects as illustrated in Figure 10-2. If your material deals with a chronology of events occurring over time, for example, you may wish to design the structure as a linear sequence of events and then send users along that sequence, allowing them to jump directly to specific dates or time frames if desired (see Figure 10-4). A timeline will graphically show the positioning of your multimedia elements and can be helpful Multimedia fornece grande poder para saltar sobre dentro de seu contedo do projeto. E embora seja importante para dar aos usurios uma sensao de livre escolha, liberdade demais pode ser desconcertante, e os telespectadores podem se perder. Tente manter a sua mensagem e contedo organizado ao longo de um fluxo constante de os principais assuntos, deixando ramo usurios para fora para explorar detalhes. sempre proporcionar uma fixao segura, com os botes que levam a locais esperados e construir uma paisagem familiar ao qual os usurios podem voltar a qualquer momento. Seu contedo pode no ser sempre um conjunto de assuntos distintos como ilustrado na Figura 102. Se o seu material lida com uma cronologia de eventos que ocorrem ao longo do tempo, por exemplo, voc pode desejar projetar a estrutura como uma seqncia linear de eventos e, em seguida, enviar aos usurios ao longo dessa sequncia, permitindo-lhes para ir diretamente a datas ou prazos, se desejar

Trip Hawkins, Founder, Electronic Arts

para mim de uma forma muito natural. Trip Hawkins, fundador, Electronic Arts

during the design phase: where there are overlapping events, you may wish to create crosssectional paths or views for a slice in time.

(ver Figura 10-4). Uma linha do tempo ir mostrar graficamente o posicionamento do seu elementos de multimdia e pode ser til durante a fase de projeto: onde h sobreposio de eventos, voc pode querer criar transversais caminhos ou pontos de vista para uma "fatia de tempo".

Figure 10-4 A chronological navigation map with active buttons

Even within a linear, time-based structure, you may still wish to sort events into categories regardless of when they occur. There is no reason you cant do this and offer more than one method of navigating through your content. Figure 10-5, for instance, illustrates a navigation map that accesses the same events from the timeline form of Figure 10-4, but arranged here instead into meaningful groups of events.

Mesmo dentro de uma linear, a estrutura baseada em tempo, voc ainda pode desejar classificar eventos em categorias, independentemente de quando eles ocorrem. No h razo para voc no pode fazer isso e oferecer mais do que um mtodo de navegar atravs de seu contedo. Figura 10-5, por exemplo, ilustra um mapa de navegao que acede os mesmos acontecimentos de forma cronograma da Figura 10-4, mas organizados aqui vez em grupos significativos de eventos.

Pagina 303

Figure 10-5 A navigation map based on events that are active buttons

Hot Spots, Hyperlinks, and Buttons

Most multimedia authoring systems allow you to make any part of the screen, or any object, into a hot spot. When users hover over or click a hot spot at that location, something happens, which makes multimedia not just interactive, but also exciting. Hot spots can be given more specific names based upon either their function or form. For example, if clicking the hot spot connects the user to another part of the document or program or to a different program or web site, it is referred to as a link or hyperlink. If the hot spot is a graphic image designed to look like a push button or toggle switch, it is called a button, more formally defined as a meaningful graphic image that you click or touch to make something happen. Hot spots can be text or graphic images. Most authoring systems provide a tool for creating text buttons of various styles (radio buttons, check boxes, or labeled push buttons, for example), as well as graphic buttons.

Tip Designing a good navigation system and

creating original buttons appropriate for your project are not trivial artistic tasks. Be sure you budget sufficient time in your design process for many trials, so youll be able to get your buttons looking and acting just right.

Text buttons and their fonts and styles are described in Chapter 2. Graphic buttons can contain graphic images or even parts of imagesfor example, a map of the world with each country

Hot Spots, hiperlinks e botes Sistemas de criao mais multimdia permitem que voc faa qualquer parte da tela, ou qualquer objeto, em um hot spot. Quando os usurios passam o mouse ou clique em um ponto, algo acontece, o que torna multimdia no apenas interativo, mas tambm emocionante. Hot spots pode ser dado mais especficamente nomes com base em qualquer funo ou sua forma. Por exemplo, se clicar em um ponto liga o usurio a uma outra parte do documento ou programa ou a um site do programa ou web diferente, ela referida como um link ou hiperlink. Se o ponto de acesso uma imagem grfica projetada para parecer um boto ou interruptor de alternncia, chamado de um boto, mais formalmente definida como uma significativa imagem grfica que voc clique ou "toque" para fazer algo acontecer. Hot spots podem ser textos ou imagens grficas. A maioria dos sistemas de criao de fornecem uma ferramenta para a criao de botes de texto de vrios estilos (botes de rdio, verifique caixas, ou botes de presso, por exemplo), bem como botes grficos. Dica Projetando um bom sistema de navegao e criao de botes originais apropriado para o seu projeto no so triviais tarefas artsticas. Certifique-se de oramento suficiente tempo no seu processo de design para muitas provaes, para que voc seja capaz de obter seus botes

color coded, and a mouse click on a country yields further information. Icons are graphic objects

olhar e agir apenas para a direita. Botes de texto e suas fontes e estilos so descritos no Captulo 2. Botes grficos podem conter imagens grficas ou at mesmo partes de imagens para exemplo, um mapa do mundo com cada cor pas codificada, e um rato clicar num pas produz informaes. Os cones so objetos grficos

Pagina 304
designed specifically to be meaningful as buttons and are usually small (although size is, in theory, not a determining factor). Icons are fundamental graphic objects symbolic of an activity or concept: projetado especificamente para ser significativo como botes e so geralmente pequenas (embora o tamanho no , em teoria, um fator determinante). cones so fundamentais objetos grficos simblicos de uma tividade ou conceito:

Once a style has been selected, you need to determine how your user will know that the button is active or is being selected. Highlighting a button or object, or changing its state, when the cursor rolls over it or the button is clicked, is the most common method of distinguishing it as the object of interest. Highlighting is usually accomplished by altering the objects colors and optionally moving the object a pixel or two or, if text, changing its size. Depending upon how you highlight, you can make a button appear off (not pressed) or on (pressed) as illustrated on the left. Or you can use an animated GIF image that animates when the mouse hovers over it. The dove in the illustration begins flying when the mouse passes over the word Habitat. Your navigation design must provide buttons that make sense, so their actions will be intuitively understood by means of their icon or graphic representation,

Uma vez que um estilo tenha sido selecionado, voc precisa determinar como o usurio ir saber que o boto est ativo ou est sendo selecionado. O destaque de um boto ou objeto, ou mudar seu estado, quando o cursor passa por cima dele ou o boto clicado, o mtodo mais comum de distinguir como o objeto de interesse. Destacando normalmente realizada alterando as cores do objeto e opcionalmente movendo o objeto um pixel ou dois, ou, se o texto, alterar seu tamanho. Dependendo de como voc destaca, voc pode fazer um boto aparecer off (no pressionado) ou em (pressionado), como ilustrado no lado esquerdo. Ou voc pode usar uma imagem GIF animado que anima quando o mouse paira sobre ele. A pomba na ilustrao comea a voar quando o mouse passa sobre a palavra "Habitat". Seu design de navegao devem fornecer botes que fazem sentido, pelo que a sua

or via text cues. Do not force your viewers to learn many new or special icons; keep the learning curve to a minimum. Its also important to include buttons that perform basic housekeeping tasks, such as quitting the project at any given point, or canceling an activity. Hot Spots in Web Pages HTML documents do not directly support interactive graphic buttons that follow the rules of good interface design by highlighting or otherwise confirming a hover or mouse-down action. In most web browsers, you know you have clicked on a linked graphic (a button) only when the cursor changes while the browser seeks another document and loads it. But you can make plain and animated buttons for your HTML documents on the Web using plug-ins such as Flash or JavaScripts. A simple JavaScript or CSS a:hover in an HTML document can replace one image with another on mouseOver or hover. Other ways to

aes ser compreendido intuitivamente, por meio de seu cone ou representao grfica, ou por meio de sinais de texto. No force seus espectadores a aprender muitas novas ou cones especiais; manter a curva de aprendizagem para um mnimo. Tambm importante para incluir botes que executam tarefas domsticas bsicas, tais como parar o projeto em um determinado ponto, ou o cancelamento de uma atividade. Hot Spots em documentos da Web pginas HTML no apoiar diretamente interativas botes grficos que seguem as regras da boa interface design destacando ou confirmao de um foco de ao ou o mouse para baixo. Na maioria dos navegadores da web, voc sabe que voc clicou em um grfico vinculado (a boto) apenas quando o cursor enquanto o navegador procura outra documento eo carrega. Mas voc pode fazer botes simples e animada para os seus documentos HTML na Web usando plug-ins como Flash ou JavaScripts. Um simples JavaScript ou CSS a: hover em um documento HTML pode substituir uma imagem por outra em mouseOver ou hover. Outras maneiras

Pagina 305
make interesting buttons and interactive graphical interfaces on the World Wide Web are described more fully in Chapter 13. The simplest hot spots on the Web are the text anchors that link a document to other documents. This is because a browser usually indicates that some specific text is a hot link or anchor by coloring or underlining the text so it stands out from the body. Default colors for anchor text are a user-defined preference, though you can override the default in the <BODY> tag. Using CSS in web site design, text can be easily colored and highlighted on hover and hyperlinked or anchored to other document URLs on clicking. Drop-down text menus (see Figure 10-6) allow for a dense fazer botes interessantes e interativas interfaces grficas no Mundial Wide Web so descritos mais detalhadamente no Captulo 13. O mais simples pontos quentes na Web so as ncoras de texto que ligam um documento para outros documentos. Isto porque um navegador normalmente indica que algum texto especfico um hot link ou ncora, colorindo ou sublinhado o texto para que ele se destaca do corpo. Cores padro para texto ncora so definidos pelo usurio preferncia, mas voc pode substituir o padro no <BODY>. Usando CSS em web design do site, o texto pode ser facilmente colorido e destacou em foco e hiperlinks ou ancorada URLs outro documento ao clicar. Menus drop-down de texto (ver Figura 10-6) permitem uma densa hierarquia

hierarchy of menu choices to be displayed.

de opes de menu a serem exibidos.

Figure 10-6 Drop-down menus at web sites are built using a combination of HTML, CSS, and JavaScript.

Other common buttons found on the Web consist of small JPEG or GIF graphic images that are themselves anchor links. Browsers indicate that an image is hot by drawing a border around it (you can remove this border by placing BORDER=0 into the <IMG> tag). Larger images may be sectioned into hot areas with associated links; these are called image maps. Figure 10-7 shows a graphic image of a village that has been programmed in HTML to have 32 hot spots with links (the document to open when clicked) and a JavaScript routine called set that will place an image into the frame at the left when the mouse rolls over that area. The code looks like this:
<AREA shape="rect" coords="180,85,230,135" href=" ../vendors/v25/index.html" onmouseover="set('../vendors/v25/images/logomenu .gif');">

Outros botes comuns encontrados na Web consistem em JPEG ou pequeno Imagens GIF grficos que so eles prprios links ncora. navegadores indicam que uma imagem quente por desenhar uma borda em torno dela (voc pode remover esta fronteira por FRONTEIRA colocar = "0" na tag <IMG>). imagens maiores pode ser seccionado em reas quentes, com links associados, estes so chamados mapas de imagem. Figura 10-7 mostra uma imagem grfica de uma aldeia que foi programado em HTML para ter 32 pontos quentes com links (o documento para abrir quando clicado) e uma rotina de JavaScript chamado "set" que ir colocar um imagem no quadro esquerda quando o mouse passa sobre a rea. O cdigo parecido com este: <Area shape = "rect" coords = "180,85,230,135" href = ".. vendors/v25/index.html /" onmouseover = "set ('../vendors/v25/images/logomenu.gif');"

Pagina 306

Figura 10-7 Usando um mapa de imagem grande e JavaScript incorporado em uma pgina normal na web HTML, quando o mouse passa sobre uma casa ou celeiro, o contedo da referida construo exibido como um grfico em separado na esquerda. Os usurios podem explorar activamente esta vila beira-mar para descobrir o que est escondido atrs de suas portas. Designers will build screens where there are tiny little things going on all over it at different places, and everything has momentous significance. And then the user is supposed to be able to find these momentous things. So people just glaze over. If you want them to hit a button, put a big button right in the middle of the screen.
Trip Hawkins, Chairman & CEO, 3DO Company

Designers vai construir telas onde h pouco pequena coisas acontecendo em todo-o lugares diferentes, e tudo tem um significado importante. E ento, o usurio deve ser capaz de encontrar essas coisas momentosas. Assim as pessoas s olham torto. Se voc quero que eles apertar um boto, colocar um grande boto direito no meio do ecr. Trip Hawkins, Presidente e CEO da empresa 3DO

Icons
In Macintosh and Windows operating systems, icons have a special meaning, in that they constitute a suite of image resources that are linked to and identify an application, file, volume, or service. On the Macintosh, icon image files (.icns) can contain one or more images of 16 16, 32 32, 48 48, 128 128, 256 256, and 512 512 pixels as well as alpha channels for transparency masking. The Mac operating system automatically scales the image(s) to display at other sizes. To use your own icon for a file or folder, open the Get Info . . . dialog (command-

cones
Em sistemas operativos Macintosh e Windows, cones tm uma especial significado, na medida em que constituem um conjunto de recursos de imagem que esto ligados e identificar um aplicativo, arquivo, volume, ou servio. No Macintosh, os arquivos de imagem de cone (. Icns) pode conter um ou mais imagens de 16 16, 32 32, 48 48, 128 128, 256 256 e 512 512 pixels, bem como canais alfa para mascarar transparncia. O operacional Mac sistema automaticamente

i), click once on the icon shown at the top left of the Get Info panel to highlight it, and paste any 512 512 pixel bitmap from the clipboard. The old icon is replaced with the new. You can also highlight an icon in the Get Info panel and copy it to the clipboard (commandc) for pasting into your image editor or directly into a project. Windows 7 icons are 256 256 pixels and are scaled to Extra Large, Large, Medium, or Small sizes in the Views menu. To replace a folder or alias icon with your own, simply create a 256 256 pixel .png file and save it. Then go to a folder or shortcut and right-click it; select Properties.

redimensiona a imagem (s) para apresentar em outros tamanhos. para usar o seu prprio cone de um arquivo ou pasta, abra o Get Info. . . dilogo (comando i), clique uma vez sobre o cone mostrado na parte superior esquerda do painel de obter informaes para destac-lo e colar qualquer bitmap de 512 512 pixel-a partir da rea de transferncia. O cone antigo substitudo com o novo. Voc tambm pode realar um cone na Obter painel Informaes e copi-lo para a rea de transferncia (comando-c) para colar em seu editor de imagem ou diretamente em um projeto. Windows 7 cones so 256 256 pixels e so escalados para Extra Large, Large, tamanhos mdio ou pequeno no menu Views. Para substituir uma pasta ou alias cone com o seu prprio, basta criar um de 256 256 pixel. png e salv-lo. Em seguida, v para uma pasta ou atalho e boto direito do mouse; selecione

Propriedades.

Pagina 307
Choose the Customize tab and select Change Icon. Browse to find your saved icon and click OK. Building and saving icon files is simpler using an icon editor such as IcoFX (http://icofx.ro/) or the ICOformat plugin for Photoshop (www. telegraphics.com.au/sw/#icoformat). If you want to use a system icon within your project, it is often quickest to capture or grab it off the screen and place it directly into your project as a bitmap. Use caution, however, because the design of some icons (particularly those using corporate logos) may be protected by copyright or trademark. Browsers automatically look for a tiny 16 16 pixel icon file named favicon.ico in the root of a web site, which they will display in one or more places in their chrome (the toolbars, status bars, sidebars, menus, and navigation elements surrounding the web page itself). In the following illustration, the Facebook icon is shown by the Firefox browser both in the URL address field and in the tab: Escolha a guia Personalizar e selecione Alterar cone. Procurar para encontrar o seu salvo cone e clique em OK. Construo e salvar arquivos de cone mais simples usando um editor de cones como IcoFX (http://icofx.ro/) ou o plugin ICOformat para o Photoshop (www.telegraphics.com.au / sw / # icoformat). Se voc quiser usar um cone do sistema dentro de seu projeto, ele o mais rpido, muitas vezes para capturar ou agarr-lo fora da tela e coloc-lo diretamente em seu projeto como um bitmap. Tenha cuidado, no entanto, porque o projeto de alguns cones (particularmente aqueles que utilizam logos corporativos) podem estar protegidos por direitos autorais ou marca registrada. Navegadores procurar automaticamente um arquivo pequeno cone de 16 16 pixels chamado favicon.ico na raiz de um web site, que ser exibida em um ou mais lugares em sua "cromo" (as barras de ferramentas, barras de status, barras laterais, menus e elementos de navegao em torno da prpria pgina web). No que se segue ilustrao, o cone mostrado Facebook pelo Firefox tanto no Campo de endereo URL e, na guia:

Se voc deseja identificar o seu prprio Web site com um cone, basta incluir um estilo Windows. ico (chamado favicon.ico) na pasta raiz do seu site. Ser descoberto pelo navegador e usado para todas as pginas do site. Prefervel, no entanto, voc pode adicionar uma tag de link no elemento <HEAD> da sua pgina web que identifica a sua imagem de cone para o navegador: <link rel="cone" type="image/gif" href="http://www.yourwebsite.com/yourIcon.gif"> And with this method, you can use a .gif, .jpg, or .png image. Remember you can use transparency in a .gif or .png image when you dont want your icon to fill the 16 16 pixel box in the corners E, com este mtodo, voc pode usar um. Gif,. Jpg ou. Imagem png. Lembrar voc pode usar a transparncia em um. imagem png ou gif. quando voc no quer que seu

or edges. Use simple shapes, keep your lines sharp, and experiment in your image editor: it is very hard to make a decent image with only 16 16 pixels to work with. Apples handheld touch devices such as iPod(touch), iPhone, and iPad use a custom Safari browser to display web clips on a Home screen; they will display a custom icon for your web site if you include in the <HEAD> tag of your page a <LINK> tag to an appropriate image. Apple recommends a flat (not shiny) and simple 57 57 pixel image in .png format with sharp 90 corners. The display software will then render your icon with rounded corners, a drop shadow, and a reflective shine, as shown here.

cone para encher a caixa de 16 x 16 pixels nos cantos ou arestas. Use formas simples, manter suas linhas afiadas, e experincia em seu editor de imagem: muito difcil para fazer uma imagem decente com apenas 16 16 pixels para trabalhar. Dispositivos portteis da Apple, como o iPod de toque (touch), iPhone e iPad usa um navegador Safari personalizado para exibir na web grampos em uma tela inicial, eles vo exibir um cone personalizado para seu site, se voc incluir na tag <HEAD> de sua pgina uma marca <LINK> para uma imagem apropriada. A Apple recomenda um plana (no brilhante) e 57 simples 57 pixel na imagem. png com 90 cantos afiados . O software de visualizao, ento, tornar o cone com cantos arredondados, uma sombra, e uma reflexo brilhar, como mostrado aqui.

Pgina 308
Put the following code into your HTML <HEAD> tag:
<link rel="apple-touch-icon" href="/somepath/image.png" />

or to force your icon not to be rendered,

<link rel="apple-touch-icon-precomposed.png" href="/somepath/image.png" />

Coloque o seguinte cdigo em sua marca <HEAD> HTML: <link rel="apple-touch-icon" href="/somepath/image.png" /> ou para forar o seu cone no a serem prestados, <link rel="apple-touch-icon-precomposed.png" href="/somepath/image.png" />

Two readers didnt notice the screen had changed in different circumstances. This happened when the button they clicked on took them to a visually similar screen, and there was no visual effect

Dois leitores no percebeu a tela mudara em diferentes circunstncias. Este aconteceu quando o boto que clicou levou a uma tela visualmente semelhantes, e no houve nenhum efeito visual

Designing the Projetando a Interface de User Usurio Interface

The user interface of your multimedia product is a blend of its graphic elements and its navigation system. If your messages and content are disorganized and difficult to find, or if

A interface do usurio do seu produto multimdia uma mistura de seus elementos grficos e seu sistema de navegao. Se as suas mensagens e contedos so

as the screens changed. One reader was looking at the details of a hostel and clicked the left-hand Next arrow. He arrived at a screen with details about another hostel, but he did not notice he was looking at a different screen. He tried the righthand Next arrow as well, and the screen changed back to the one he had been viewing initially, but again he did not notice the change and concluded the Next buttons did nothing. A visual effect or animation here would have provided a cue to make the screen changes more noticeable.

como as telas alterado. um leitor estava olhando para o detalhes de um albergue e clicou a seta esquerda Avanar. Ele chegou em uma tela com detalhes sobre outro albergue, mas ele no percebeu que era olhando para uma tela diferente. Ele tentou a mo direita Seta ao lado, bem como, e tela mudou de volta para a que ele tinha sido visualizao inicialmente, mas mais uma vez ele fez no notar a mudana e concluiu os botes Prximo no fez nada. Um efeito visual ou animao aqui faria ter fornecido uma sugesto para fazer a tela muda mais perceptvel.

users become disoriented or bored, your project may fail. Poor graphics can cause boredom. Poor navigational aids can make viewers feel lost and unconnected to the content; or, worse, viewers may sail right off the edge and just give up and quit the program.

Novice/Expert Modes
Be aware that there are two types of end users: those who are computer literate and those who are not. Creating a user interface that will satisfy both types has been a design dilemma since the invention of computers. The simplest solution for handling varied levels of user expertise is to provide a modal interface, where the viewer can simply click a Novice/ Expert button and change the approach of the whole interface to be either more or less detailed or complex. Modal interfaces are common on bulletin boards, for example, allowing novices to read menus and select desired activities, while experts can altogether eliminate the timeconsuming download and display of menus and simply type an activity

desorganizados e difceis de encontrar, ou se os usurios se desorientam ou entediam-se, seu projeto pode falhar. Grficos pobres pode causar tdio. Pobre de navegao com ajudas podem fazer os espectadores se sentirem perdidos e no relacionados com o contedo, ou pior, espectadores podem navegar direito fora da borda e simplesmente desistir e sair do programa. Novatos / Expert Modos Esteja ciente de que existem dois tipos de usurios finais: aqueles que so computador alfabetizados e os que no so. Criando uma interface de usurio que ir satisfazer ambos os tipos tem sido um dilema desenho uma vez que a inveno dos computadores. A soluo mais simples para lidar com variados nveis de experincia do usurio fornecer uma interface modal, onde o espectador pode simplesmente clicar em um Iniciante / Boto perito e alterar a abordagem de conjunto de interface para ser

code directly into an executable command line. Both novices and experts alike may quickly learn to click the mouse and skip the annoying ragtime piece you chose for background music. Unfortunately, in multimedia projects, modal interfaces are not a good answer. Its best to avoid designing modal interfaces because they tend to confuse the user. Typically, only a minority of users are expert, and so the majority are caught in between and frustrated. The solution is to build your multimedia project to contain plenty of navigational power, providing access to content and tasks for users at all levels, as well as a help system to provide some handholding and reassurance. Present all this power in easy-to-understand structures and concepts, and use clear textual cues. Above all, keep the interface simple! Even experts will balk at a complex screen full of tiny buttons and arcane switches, and will appreciate having neat and clean doorways into your projects content.

mais ou menos detalhada ou complexa. Interfaces modais so comuns em quadros de avisos, por exemplo, permitindo que novatos a leitura de menus e selecionar as atividades desejadas, enquanto os peritos podem completamente eliminar o demorado download e visualizao de menus e basta digitar uma atividade cdigo diretamente em uma linha de comando executvel. Ambos os novatos e especialistas tanto pode aprender rapidamente a clicar com o mouse e pular o ragtime irritante pea que voc escolheu para a msica de fundo. Infelizmente, em projetos de multimdia, interfaces modais no so uma boa responder. melhor evitar criar interfaces modais, porque eles tendem a confundir o usurio. Normalmente, apenas uma minoria dos usurios so especialistas, e assim o maioria est preso entre e frustrado. A soluo a construo o projeto multimdia

para conter muita potncia de navegao, fornecendo acesso a contedos e tarefas para usurios de todos os nveis, bem como um sistema de ajuda fornecer algumas mos dadas e segurana. Apresentar todo esse poder em fcil de entender as estruturas e conceitos, e usar claras pistas textuais. Acima de tudo, manter a interface simples! Mesmo os peritos vai reclamar em um complexo tela cheia de botes minsculos e switches arcanos, e apreciar ter portas arrumado e limpo no contedo do seu projeto.

Pgina 309
GUIs
The Macintosh and Windows graphical user interfaces (GUI, pronounced gooey) are successful partly because their basic point-and-click style is simple, consistent, and quickly mastered. Both these GUIs offer built-in help systems, and both provide standard patterns of activity that produce standard expected results. The following actions, for example, are consistently performed by similar keystrokes when running most programs on the Macintosh or in Windows:

GUIs
O Macintosh e interfaces grficas de usurio do Windows (GUI, pronunciado "Gosmenta") so bem sucedidos, em parte porque seu estilo aponte-e-clique bsica simples, consistente, e rapidamente dominado. Ambos oferecem estes GUIs embutidos sistemas de ajuda e tanto fornecer padres padro de atividade que produzem padro resultados esperados. As seguintes aes, por exemplo, so consistentemente realizado por teclas similares ao executar a maioria dos programas em Macintosh ou no Windows:

Dica Como Cortar, Copiar e Colar so usados muitas vezes, este dispositivo mnemnico pode ajudar voc a lembrar seus atalhos de teclado: X parece com tesoura e cortar. C simples, C para Copiar. Pense em V como um upside-down insero acento circunflexo (usado para inserir texto quando cpia de edio) e voc vai lembrar que para Colar. For your multimedia interface to be successful, you, too, must be consistent in designing both the look and the behavior of your human interface. Multimedia authoring systems provide you with the tools to design and implement your own graphical user interface from scratch. Be prudent with all that flexibility, however. Unless your content and messages are bizarre or require special treatment, its best to stick with accepted conventions for button design and grouping, visual and audio feedback, and navigation structure. Stick with real-world metaphors that will be understood by the widest selection of potential users. For example, consider using the well-known trash can for deleting files, a hand cursor for dragging objects, and a clock or an hourglass for pauses. If your material is timeoriented, develop metaphors Para sua interface multimdia para ser bem sucedido, voc, tambm, deve ser consistente em projetar o olhar eo comportamento de sua interface humana. Sistemas de autoria de multimdia fornecer-lhe as ferramentas para projetar e implementar a sua prpria interface de usurio grfica do zero. Seja prudente com toda a flexibilidade que, no entanto. A menos que seu contedo e as mensagens so bizarro ou tratamento especial exigir, melhor ficar com as convenes aceites para o projeto de boto e de agrupamento, feedback visual e udio, e estrutura de navegao. Ficar com metforas do mundo real que ser compreendido pelos a maior seleo de potencial usurios. Por exemplo, considere utilizando o lixo bem conhecido pode para excluso de arquivos, um cursor de mo para arrastar objetos, e um relgio ou um ampulheta para pausas. Se o seu material de tempo orientado, desenvolver metforas

Vaughans General Rule for Interface Design

The best user interface demands the least learning effort.

Regra Geral de Vaughan para Design de Interface

A melhor interface de usurio exige o menor esforo de aprendizagem.

Pagina 310
Throw out your tried Jogue fora o seu for past, present, and para o passado,

and true training or software development methodologies, and pretend that youre Spielberg or Lucas: think of what the viewer sees and hears and how the viewer interacts with the system you deliver. Create an experience for the viewer.
David A. Ludwig, Interactive Learning Design

experimentado e formao verdadeiro ou software metodologias de desenvolvimento, e fingir que voc Spielberg ou Lucas: pensar do que o espectador v e ouve e como o espectador interage com o sistema que entregar. Criar uma "experincia" para o espectador. David A. Ludwig, interativo Modelo de Aprendizagem A computao grfica mais esquerda e direita do crebro e no to espontnea como fazer mo. O tempo de rampa tedioso, eu estou acostumado a instante gratificao com meu bem arte. Cornelia Atchley, um artista plstico criao de arte multimdia com computadores, Washington, D.C

future. If it is topicoriented, choose metaphors related to the topics themselves. If it is polar (the pros and cons of an issue, for example), choose relevant contrasting images.

TIP Most multimedia

authoring systems include tutorials and instructions for creating and using buttons and navigation aids. Typically, they also supply templates or examples of attractive backgrounds and distinctive buttons that serve as an excellent starting place. In a large project, you might want to use a different metaphor as the backbone of each major section, to provide a helpful cue for users to orient themselves within your content. For the Travel section, for example, you could use icons that are sailing ships with various riggings; for the Finance section, buttons that are coins of different denominations; and for the buttons of the International Business section, you could use colorful flags from various countries.

Computer graphics is more left- and right-brained and not so spontaneous as doing it by hand. The ramp time is tedious; I am used to instant gratification with my fine artwork.
Cornelia Atchley, a fine artist creating multimedia art with computers, Washington, D.C.

Users like to be in control, so avoid hidden commands and unusual keystroke/mouse click combinations. Design your interface with the goal that no instruction manual or special training will be required to move

presente e futuro. Se tema orientado, escolha metforas relacionado com os temas prprios. Se polar (os prs e contras de uma questo, por exemplo), escolha relevantes imagens contrastantes. Sistemas de autoria ponta mais multimdia inclui tutoriais e instrues para criar e usar botes e auxlios navegao. Tipicamente, eles tambm fornecem modelos ou exemplos de fundos atraentes e botes distintivos que servir como um ponto de partida excelente. Em um projeto grande, voc pode querer usar um metfora diferente como a espinha dorsal de cada seco maior, para proporcionar uma til sugesto para os usurios a orientar-se dentro do seu contedo. Para a seo de viagem, por exemplo, voc pode usar cones que so veleiros com cordames vrios, pois o Seco de finanas, botes que so moedas de diferentes denominaes, e para a botes da seo Internacional de Negcios, voc pode usar bandeiras coloridas de vrios pases. Usurios gostam de estar no controle, para evitar comandos

through your project. Users do not like to have to remember keywords or special codes, so always make the full range of options easily available as interactive buttons or menu items. And finally, users do make mistakes, so allow them a chance to escape from inadvertent or dangerous predicaments (Do you really want to delete? Delete/Escape). Keep your interface simple and friendly.

Graphical Approaches
Designing excellent computer screens requires a special set of fine art skills, and not every programmer or graduate in fine arts may be suited to creating computer graphics. Like programmers who must keep up with current operating systems and languages, computer graphic artists must also stay informed about the rapidly changing canvas of new features, techniques, applications, and creative tools. The artist must make broad design choices: cartoon stick figures for a childrens game, rendered illustrations for a medical reference, scanned bitmaps

escondidos e incomum teclas / mouse clique em combinaes. Projetar a sua interface com o objetivo que nenhum manual de instrues ou treinamento especial ser necessria para mover atravs de seu projeto. Os usurios no gostam de ter de lembrar palavraschave ou cdigos especiais, por isso sempre fazer toda a gama de opes facilmente disponvel como botes interativos ou itens de menu. E, finalmente, os usurios cometem erros, assim permitir-lhes uma chance de escapar de situaes difceis ou perigosas inadvertidas ("Voc realmente quer apagar? Eliminar / Escape"). Mantenha sua interface simples e amigvel. Abordagens grficas Projetar telas de computador excelentes requer um conjunto especial de arte habilidades, e no a cada programador ou ps-graduao em artes plsticas podem ser adequados para criar grficos de computador. Como programadores que deve manter-se com sistemas operacionais atuais e lnguas, os artistas de computao grfica deve tambm ficar informado sobre a tela

for a travel tour of Europe. The graphic artwork must be appropriate not only for the subject matter, but for the user as well. Once the approach is decided, the artist has to put real pixels onto a computer screen and do the work. A multimedia graphic artist must always play the role of the end user during the design and rendering process, choosing colors that look good, specifying text fonts that speak, and designing buttons that are clearly marked for what they do.

mudando rapidamente de novas funcionalidades, tcnicas, aplicativos e ferramentas criativas. O artista deve fazer escolhas de design gerais: figuras vara dos desenhos animados por um jogo infantil, ilustraes prestados por um mdico de referncia, verificados bitmaps para um tour de viagens da Europa. A arte grfica deve ser apropriado no s para o objecto, mas tambm para o utilizador, bem. Uma vez que a abordagem decidido, o artista tem de colocar pixels reais em uma tela de computador e fazer do trabalho. A artista multimdia grfico deve sempre desempenhar o papel de final usurio durante o processo de design e renderizao, escolher cores que se parecem bom, especificando fontes de texto que "falar", e os botes de design que so claramente marcado por aquilo que fazem.

Pgina 311

Things That Work Here are some graphical approaches that get good results: Neatly executed contrasts: big/small, heavy/light, bright/dark, thin/thick, cheap/dear (see Figure 10-8) Simple and clean screens with lots of white space (see Figure 10-9) Eye-grabbers such as drop caps, or a single brightly colored object alone on a gray-scale screen Shadows and drop shadows in various shades Gradients Reversed graphics to emphasize important text or images Shaded objects and text in 2-D and 3-D

Coisas que trabalham aqui so alguns grfica abordagens que obter bons resultados: contrastes ordenadamente executados: grande / pequeno, pesado / leve, brilhante / escuro, fino / grosso,barato / caro (ver Figura 10-8) telas simples e limpos com muita o espao em branco (ver Figura 10-9) Eye-grabbers como capitulares, ou um objeto brilhantemente colorida de um nico sozinho em uma escala de cinza tela sombras e sombras em vrios tons Gradientes grficos revertida para enfatizar importante texto ou imagens objetos sombreados e texto em 2-D e 3-D

Figura 10-8 Contrastes atrair o Cavaleiro olho-Bud, PGA Junior Campeo na virada do sculo, foi feito grosso esticando-o em uma imageediting programa

Figura bastante uso de 10-9 o espao em branco ("noninformation reas ") em suas telas

Pagina 312
Things to Avoid Here are some mistakes you will want to avoid in creating computer graphics: Clashes of color Busy screens (too much stuff) Using a picture with a lot of contrast in Coisas a evitar Aqui esto alguns erros que voc vai querer evitar em criao grficos de computador: Os confrontos de cor telas ocupado (muita coisa) Usando uma imagem com muito contraste

color or brightness as a background Trite humor in oft-repeated animations Clanging bells or squeaks when a button is clicked Frilly pattern borders Cute one-liners from famous movies Requiring more than two button clicks to quit Too many numbers (limit charts to about 25 numbers; if you can, just show totals) Too many words (dont crowd them; split your information into bitesized chunks) Too many substantive elements presented too quickly Most graphic artists will tell you that design is an intuitive thing, and they will be hard-pressed to describe the rules they follow in their everyday work. They know when colors are not working and will change them again and again until theyre right, but they usually wont be able to explain why the colors work or dont work. A project with a good navigation design, though it may have been developed with good planning and storyboarding, is indeed more often the result of many hours of crafty finagling with buttons and editors. Visit http://templatemonster.com to see a huge number of web site templates, some of them Flash-based, and many with multimedia features such as animations, dynamic interfaces, and sound.

Audio Interfaces
A multimedia user interface may include important sound elements that reflect the rhythm of a project and may affect the attitude of your audience. Sounds can be background music, special effects for button clicks, voice-overs, effects synced to animation, or they may be buried in the audio track of a video clip. The tempo and style of background music can set the tone of a project. Vivaldi or Bach might be appropriate for a banking or investment annual report delivered on DVD. Comic laughs and screeching effects might be appropriate for a clothing web site aimed at preteens. Choose music that fits the content and the

de cor ou brilho como um fundo Trite humor em muitas vezes repetidas animaes clanging sinos ou guinchos quando um boto clicado Frilly fronteiras padro bonito one-liners de filmes famosos Exigir mais do que dois cliques no boto para sair muitos nmeros (limite cartas a cerca de 25 nmeros, se voc pode, apenas mostrar totais) palavras demais (no se aglomeram-los; dividir suas informaes em bitesized pedaos) demais elementos substantivos apresentado muito rapidamente A maioria dos artistas grficos vo dizer que o design uma "coisa intuitiva", e eles sero duramente pressionado para descrever as regras que seguem em sua trabalho dirio. Eles sabem quando as cores no esto "trabalhando" e vai mudar -los de novo e de novo at que est certo, mas eles geralmente no ser capaz de explicar por que as cores funcionam ou no funcionam. Um projecto com uma boa navegao projeto, embora possa ter sido desenvolvido com um bom planejamento e storyboards, realmente mais frequentemente o resultado de muitas horas de astuto finagling com botes e editores. Visite a http://templatemonster.com ver um grande nmero de modelos de web sites, alguns deles baseados em Flash, e muitos com recursos multimdia, como animaes, interfaces dinmicas, e som. Interfaces de udio Uma interface de usurio de multimdia podem incluir elementos sonoros importantes que refletir o ritmo de um projeto e pode afetar a atitude de seu pblico. Os sons podem ser msica de fundo, efeitos especiais para cliques do boto, voice-overs, efeitos sincronizado com a animao, ou podem ser enterrado no udio a par de um videoclipe. O ritmo eo estilo de msica de fundo pode definir o "Tom" de um projeto. Vivaldi ou Bach pode ser apropriado para um bancrio ou relatrio anual de investimentos entregues em DVD. Risos quadrinhos e gritos efeitos pode ser apropriado para um site de roupas destinada a

atmosphere you wish to create. In all cases, use special effects sparingly. Always provide a toggle switch to disable sound. (Many AOL users prefer to disable the Youve Got Mail! voice, for example.) And always test a project that contains sound with potential users.

pr-adolescentes. Escolha a msica que se encaixa o contedo ea atmosfera que voc deseja criar. Em todos os casos, usar efeitos especiais com moderao. Sempre fornea um interruptor para desativar o som. (Muitos usurios da AOL preferir desativar o "Mail que voc tem!" de voz, por exemplo.) e sempre testar um projeto que contm som com potenciais utilizadores. Para saber mais sobre o projeto, visite: www.tsworldofdesign.com / tutorial / interface.htm Desenvolvimento de interfaces web de navegao no site cerca de usabilidade www.digital-web.com/features/feature_200212b.shtml Revista Digital Web, "A Psicologia da navegao", janeiro 2003 http://msdn.microsoft.com/enus/library/ms993291.aspx Lei de Fitts da interface do usurio aplicado Web www.stcsig.org usabilidade / / temas / artigos / he-checklist.html Avaliao heurstica: uma lista de verificao do sistema (Xerox Corp) http://developer.apple.com/mac/library/docume ntation/UserExperience/ Conceituais / AppleHIGuidelines / XHIGIntro / XHIGIntro.html Ma humanos diretrizes de interface http://msdn.microsoft.com/library/default.asp? url=/library/en-us/dnwui/ html / iuiguidelines.asp Diretrizes de interface de usurio Microsoft indutivos www.useit.com/ Diretrizes Jakob Nielsen para a usabilidade e design Web www-01.ibm.com/software/ucd/ucd.html Design centrado no usurio www.useit.com/alertbox/20000514.html Eye-tracking estudo de leitores da Web www.useit.com/alertbox/20020707.html Capacitao do usurio e da diverso www.useit.com/alertbox/20020609.html Reduzir a redundncia: diminuio decises de projeto duplicados www.useit.com/alertbox/20011209.html DVD menu design: as falhas do projeto Web recriada novamente www.useit.com/alertbox/20010121.html mtricas de usabilidade http://desktoppub.about.com/cs/colorselection/ p/index.htm O simbolismo da cor

Pagina 313
For more about design, visit: www.tsworldofdesign.com/tutorial/interface.ht m Developing web site navigation interfaces around usability www.digital-web.com/features/feature_200212b.shtml Digital Web magazine, The Psychology of Navigation, Jan 2003 http://msdn.microsoft.com/enus/library/ms993291.aspx Fittss UI Law applied to the Web www.stcsig.org/usability/topics/articles/hechecklist.html Heuristic evaluation: a system checklist (Xerox Corp.) http://developer.apple.com/mac/library/docum entation/UserExperience/ Conceptual/AppleHIGuidelines/XHIGIntro/XHIGI ntro.html Apple human interface guidelines http://msdn.microsoft.com/library/default.asp? url=/library/en-us/dnwui/ html/iuiguidelines.asp Microsoft inductive user interface guidelines www.useit.com/ Jakob Nielsens guidelines for usability and Web design www-01.ibm.com/software/ucd/ucd.html User-centered design www.useit.com/alertbox/20000514.html Eye-tracking study of Web readers www.useit.com/alertbox/20020707.html User empowerment and the fun factor www.useit.com/alertbox/20020609.html Reduce redundancy: decrease duplicated design decisions www.useit.com/alertbox/20011209.html DVD menu design: the failures of Web design re-created yet again www.useit.com/alertbox/20010121.html Usability metrics http://desktoppub.about.com/cs/colorselection/ p/index.htm Color symbolism http://desktoppub.about.com/od/howcolorwork

s/index.htm Color basics and theory

http://desktoppub.about.com/od/howcolorworks /index.htm Conceitos bsicos de cor e teoria

Pgina 314 A Multimedia Design Case History

This section presents an example of the design process for a simple multimedia project about the construction and launch of a 31-foot ocean-going sailboat. This project was initially crafted in SuperCard (a Macintosh-only, page-based, authoring tool), but it was later ported to Adobes Director (a time-based tool) so that it could be played on both Mac and Windows platforms (see Chapter 7 for details about authoring systems).

Um Processo Histrico Design Multimdia

Esta seo apresenta um exemplo do processo de concepo de um multimdia simples projeto sobre a construo e lanamento de um 31-p alto-mar veleiro. Este projeto foi inicialmente trabalhada em SuperCard (um Macintosh-somente, baseado na pgina de criao, ferramenta), mas mais tarde foi portado para Diretor da Adobe (uma ferramenta baseada em tempo) para que pudesse ser jogado tanto em Mac e Windows plataformas (ver Captulo 7 para obter detalhes sobre sistemas de criao).

Storyboarding a Project
The source material (all that was available) practically sorted itself into logical groups: a pile of old photographs, a magazine article and newspaper clippings, engineering drawings, official documents, and some recorded sounds. The first storyboard was a simple hierarchical structure with branches to each subject area, as shown in Figure 10-10.

Storyboarding um projeto
O material de base (tudo o que estava disponvel) praticamente se em ordenadas grupos lgicos: uma pilha de fotografias antigas, um artigo de revista e jornal recortes, desenhos de engenharia, documentos oficiais, e alguns registrado sons. O storyboard primeiro foi uma estrutura hierrquica simples com ramos para cada rea, como mostra a Figura 1010.

Putting It Together
The most eye-catching photograph was chosen as a background for the main menu, and, as shown in Figure 10-11, the main menu was planned to contain clearly labeled buttons navigating to linear presentations of each topic area. From every screen in the project, users would be able to return to the main menu. Where sound bites were appropriate, clicking buttons on screens would play sounds. Adding a Quit button was necessary, also on

Putting It Together
A fotografia mais atraente foi escolhido como um fundo para o do menu principal, e, como mostrado na Figura 10-11, o menu principal foi planeado conter claramente botes rotulados navegar para apresentaes lineares de cada rea de tpico. De cada tela no projeto, os usurios seriam capazes de voltar para o menu principal. Onde sound bites eram apropriadas, botes clicando em telas seria reproduzir sons. Adicionando um boto Quit era necessrio, tambm em No menu principal, de modo que

the main menu, so that users would never be more than two button clicks from exiting the project (back to the main menu, and then quit).

os usurios nunca seria mais do que dois cliques no boto de sair do projeto (de volta ao menu principal, e encerre).

Pagina 315
The 50 or so 4 5 photographs were old color prints that offered poor contrast and faded colors (due to a saltwater dunking in a storm off the Central American coastline). Digitized on a flatbed scanner in gray-scale, however, they worked fine, and Photoshop was available to improve contrast. All the prints were scanned, cropped to the same dimension, optimized, and stored as bitmapped objects within Director. While at the scanner, merchant marine licenses and documents were also digitized, and the magazine article was scanned using OCR software to bring it into ASCII format. The story text was imported into the project. After all the content was in Directors Cast (see Chapter 11), and work on the navigation system was under way, several issues emerged. First, it is terrifically boring to read a 3,000-word story by scrolling a long text field. Second, the photos were too small to be placed alone on a single Os 50 mais ou menos 4 5 fotografias foram as impresses a cores antigas que ofereciam contraste pobres e cores desbotadas (devido a um dunking de gua salgada em uma tempestade ao largo da costa da Amrica Central). Digitalizados em um scanner de mesa na escala de cinzentos, no entanto, eles bem trabalhado, e era Photoshop disponvel para melhorar o contraste. Todos as estampas foram digitalizadas, cortada para a mesma dimenso, optimizada, e armazenados como objetos de bitmap dentro Diretor. Enquanto no scanner, mercantes licenas marinhos e documentos foram digitalizados e o artigo da revista foi digitalizada usando o software de OCR para traz-lo em formato ASCII. O texto da matria foi importado para o projeto. Depois de todo o contedo foi em Elenco do diretor (ver Captulo 11), e trabalhar no sistema de navegao estava em curso, vrios problemas surgiram. Primeiro, terrivelmente chato de ler uma histria 3,000 palavra por rolar um longo campo de texto. Em segundo lugar, as fotografias foram demasiado pequenos para ser colocado sozinho em uma nica tela. Ento faz sentido para combinar a linha da histria com as imagens, mesmo

screen. So it made sense to combine the story line with the images, even though they were not directly related; the story about launching the boat would progress from beginning to end as the boat was slowly built in the pictures. The storyboard changed to that shown in Figure 10-12.

apesar de no serem diretamente relacionados, a histria sobre o lanamento do barco seria o progresso do comeo ao fim como o barco foi lentamente construda no fotos. O storyboard alterada para a mostrada na Figura 10-12.

Pagina 316
The photo-essay-and-story combination worked out to 28 screens. The photos were placed into the score, and the text was cut and pasted into fields (see Figure 10-13). It became clear that users might want to scan rapidly through the photographs to watch the boat being built, ignoring the text of the story. So a special button was programmed to scan through the images until the mouse was clicked. Images that did not fit into the photo essay about building the boatfor instance, the launching party with its roast pig, the long haul to A foto-ensaio-e-histria combinao funcionou a 28 telas. As fotografias foram colocadas para a pontuao, eo texto foi recortado e colado em campos (ver Figura 10-13). Tornou-se claro que os usurios podem querer fazer a varredura rapidamente pelas fotografias para assistir o barco estar construdo, ignorando o texto da histria. Assim, um boto especial foi programado para percorrer as imagens at que o mouse foi clicado. Imagens que no se encaixam em O ensaio fotogrfico sobre a construo o barco, por exemplo, a festa de lanamento com a sua porco assado, a longo prazo

the beach by trailer, and setting the mooringwere withdrawn from the pile of construction photographs; but because they were interesting, they were attached as separate branches accessible by button from the main menu. This was the third time the navigation changed, proving that you can continue to hang elements on a menu until the menu screen is too busy (and then you use submenus), or until you run out of material, as shown in Figure 10-14.

para o praia de reboque, e definio a amarrao-foram retirados a partir da pilha de construo fotografias, mas porque eles eram interessantes, foram anexados como ramos separados acessveis pelo boto no menu principal. Este foi o terceira vez que a navegao mudou, provando que voc pode continuar a cair elementos em um menu at a tela do menu muito ocupado (e ento voc usa submenus), ou at que voc correr para fora do material, como mostra a Figura 10-14.

Pagina 317
Next, the sound bites were recorded, digitized, and added to the project. Figure 10-15, the screen where the sounds were to play, shows the special button installed to play sound bites. Its simply a picture of a loudspeaker. The documents for the project included engineering drawings, highway Em seguida, os sound bites foram registradas, digitalizado, e adicionado ao projeto. Figura 10-15, a tela onde os sons estavam a tocar, mostra o boto especial instalado para jogar sound bites. simplesmente uma imagem de um altofalante. Os documentos para o projeto desenhos de engenharia

permits, and licenses. The highway permit, for example, was 8.5 by 11 inches (portrait); but after some experimentation, once it was scaled to 480 pixels in height, it was (barely) readable and acceptable for this project. The licenses and drawings were in landscape orientation and fit more easily on a 640 480-pixel screen (see Figure 10-16).

includos rodovia, autorizaes e licenas. A autorizao de estrada, por exemplo, foi de 8,5 por 11 polegadas (retrato); mas depois de algumas experincias, uma vez que foi escalado para 480 pixels de altura, foi (mal) legvel e aceitvel para este projeto. As licenas e desenhos estavam em orientao paisagem e ajuste mais facilmente em um tela de 640 480 pixels (ver Figura 10-16).

Figure 10-16 Larger fonts of some scanned documents can be read at 72 dpi resolution, and engineering drawings
in landscape orientation can be resized to fit.

Figura 10-16 Fontes maiores de alguns documentos digitalizados podem ser lidos em 72 dpi de resoluo e desenhos de engenharia em orientao paisagem pode ser redimensionada para caber.

Pagina 318

Developing multimedia can be like taking a joy ride in a washer/dryer. When its all over you feel like youve been washed, rinsed, spun, and tumble-dried.
Kevin McCarthy, Director of Business Development, Medius IV

Multimdia em desenvolvimento podem ser como fazer um passeio de alegria em um lavadora / secadora. Quando tudo sobre voc sente como se tivesse sido lavados, enxaguados, fiado, e tumble-seca. Kevin McCarthy, Diretor de Negcios Desenvolvimento, Medius IV

The buttons on the main menu were the wrong color, so they were changed a few times until the color worked. Helvetica title text wasnt fancy enough, so it was reworked and a drop shadow was laid in. A special slider button was built and programmed to allow the construction sequence to go immediately to any of the pictures in the sequence. The backgrounds were tweaked a little, and the order of images changed somewhat. A small red car was animated to drive along the edge of the lagoon. The project described here was simple and straightforward. With the exception of designing a few custom buttons for auto-scanning through some of the images and designing the animations, the entire project was a progression of screens of information, with links activated by clicking buttons.

Os botes do menu principal eram da cor errada, ento eles foram mudou algumas vezes at a cor trabalhou. Helvetica texto do ttulo no foi extravagante o suficiente, por isso foi reformulado e uma sombra foi colocada dentro Um especial boto deslizante foi construdo e programado para permitir a construo seqncia para ir imediatamente para qualquer uma das fotos na seqncia. O fundos foram mexido um pouco, e a ordem das imagens alteradas um pouco. Um pequeno carro vermelho foi animada para conduzir ao longo da borda da lagoa. O projeto descrito aqui foi simples e direto. Com o exceo de projetar alguns botes personalizados para auto-explorao atravs de algumas das imagens e projetar as animaes, todo o projeto foi uma progresso de telas de informaes, com links ativado clicando botes.

Producing
By the time you reach the development phases of your multimedia project and you start building, you should already have taken care to prepare

Produtor
No momento em que voc alcanar as fases de desenvolvimento do seu projeto multimdia e voc comear a construir, voc j deve ter tido o cuidado de preparar

your plan and to get organized. The project plan (see Chapter 9) now becomes your stepby-step instruction manual for building the product. For many multimedia developers, following this plan and actually doing the construction work being down in the trenches of hands-on creation and productionis the fun part of any project. Production is the phase when your multimedia project is actually rendered. During this phase you will contend with important and continuous organizing tasks. There will be times in a complex project when graphics files seem to disappear from the server, when you forget to send or cannot produce milestone progress reports, when your voice talent gets lost on the way to the recording studio, or when your hard disk crashes. So its important to start out on the right foot, with good organization, and to maintain detailed management oversight during the entire construction process. This rule applies to projects large and small, projects for you or for

seu plano e se organizar. O plano do projeto (ver Captulo 9) agora torna-se o manual de instrues passo-apasso para a construo do produto. Para muitos desenvolvedores multimdia, seguindo este plano e realmente fazendo a construo trabalhoestar nas trincheiras de hands-on criao eproduo a parte divertida de qualquer projeto. A produo a fase em que o seu projeto multimdia realmente prestados. Durante esta fase voc vai lidar com importante e contnuas organizar as tarefas. Haver momentos em um projeto complexo quando os arquivos grficos parecem desaparecer do servidor, quando voc se esquece para enviar ou no pode produzir relatrios de progresso marco, quando sua voz talento se perde no caminho para o estdio de gravao, ou quando seu duro falhas de disco. Por isso, importante comear com o p direito, com boa organizao, e para manter a superviso da gesto detalhada durante o processo de construo completo. Esta regra aplica-se a

a client, and projects with 1 or 20 people on staff. Above all, provide a good time-accounting system for everyone working on the project. At the end of the week, its hard to remember how much time you spent on the tasks you did on Monday.

TIP If your project is to

be built by more than one person, establish a management structure in advance that includes specific milestones and the production expectations for each contributor.

projectos de grande e pequeno porte, projetos para voc ou para um cliente, e projetos com uma ou 20 pessoas na equipe. Acima de tudo, proporcionar um sistema de tempo contabilidade bom para todos os que trabalham sobre o projeto. No final da semana, difcil lembrar o quanto tempo gasto nas tarefas que voc fez na segunda-feira. DICA Se o seu projeto para ser construdo por mais de uma pessoa, estabelecer uma gesto estrutura de antemo que inclui metas especficas e da produo expectativas de cada contribuinte.

Pagina 319

Starting Up
Before you begin your multimedia project, its important to check your development hardware and software and review your organizational and administrative setup, even if you are working alone. This is a serious last-minute task. It prevents you from finding yourself halfway through the project with nowhere to put your graphics files and digitized movie segments when youre out of disk space, or stuck with an incompatible version of a critical software tool, or with a network that bogs down and quits every two days. Such incidents can take many days or weeks to resolve, so try to head off as many potential problems as you can before you begin. Here are some examples of things to think about. Desk and mind clear of obstructions?

Iniciando
Antes de comear seu projeto multimdia, importante verificar a sua desenvolvimento de hardware e software e rever sua organizao e configurao administrativa, mesmo se voc estiver trabalhando sozinho. Isto um srio de ltima hora de tarefa. Que o impede de encontrar-se a meio o projeto com lugar para colocar seus arquivos grficos e filmes digitalizados segmentos em que voc est sem espao em disco, ou preso com um incompatvel verso de uma ferramenta de software crtico, ou com uma rede que atola e fecha a cada dois dias. Tais incidentes podem levar muitos dias ou semanas para resolver, de modo a tentar dirigir fora como muitos problemas potenciais, como voc pode antes de comear. Aqui esto alguns exemplos de coisas em que pensar. Recepo e mente livre de obstrues?

Best computers you can afford? Time-accounting and management system in place? Biggest (or most) monitors you can afford? Sufficient disk storage space for all work files? System for regular backup of critical files? Conventions or protocols for naming your working files and managing source documents? Latest version of your primary authoring software? Latest versions of software tools and accessories? Communication pathways open with client? Breathing room for administrative tasks? Financial arrangements secure (retainer in the bank)? Expertise lined up for all stages of the project? Kick-off meeting completed?

Melhores computadores que voc pode pagar? Tempo de contabilidade e sistema de gesto em vigor? Maior (ou mais) monitora voc pode pagar? espao de armazenamento suficiente em disco para todos os arquivos de trabalho? Sistema de backup regular de arquivos crticos? convenes ou protocolos para nomear seus arquivos de trabalho e gesto documentos de origem? ltima verso do seu software de criao primria? ltimas verses de ferramentas de software e acessrios? vias de comunicao aberta com o cliente? Respirao espao para tarefas administrativas? Disposies financeiras seguras (reteno no banco)? Experincia alinhados para todas as fases do projeto? reunio Kick-off concludo? Aos 18 anos, eu costumava pendurar em torno de com pessoas que dirigiam carros rpidos, e uma vez que se ofereceu para ajudar um conhecimento preparar sua Ferrari Berlinetta para uma corrida em Watkins Glen. Meu trabalho foi para definir as vlvulas enquanto meu amigo foi at a suspenso, freios, e mais tarde, o carburador. O carro ostentava 12 cilindros e 24 vlvulas, e ajustando o folga entre tucho e balancim pareceu-me semelhante a belo trabalho de um joalheiro. Foi necessria chaves especiais e medidores de folga e um toque incomum para rodar O motor de alta compresso para A CAM foi precisamente no seu mais elevado ponto para cada vlvula. Eu fiquei encantada afastado pela grande quantidade de partes mveis sob a Ferrari vlvula longo e brilhante cobre-meu carro rpido prpria tinha apenas quatro cilindros e oito vlvulas simples. Levou me cerca de sete horas exaustivas (incluindo duplo controlo) para obter direito. Quando o sol surgiu, no entanto, o motor parecia timo! Afinao e preparar-se, eu aprendi, to

First Person
At 18, I used to hang around with people who drove fast cars, and once volunteered to help an acquaintance prepare his Ferrari Berlinetta for a race at Watkins Glen. My job was to set the valves while my friend went over the suspension, brakes, and later, the carburetor. The car boasted 12 cylinders and 24 valves, and adjusting the clearance between tappet and rocker arm seemed to me akin to a jewelers fine work. It required special wrenches and feeler gauges and an uncommon touch to rotate the high-compression engine so the cam was precisely at its highest point for each valve. I was blown away by the sheer quantity of moving parts under the Ferraris long and shiny valve coversmy own fast car had only four cylinders and eight simple valves. It took me about seven exhausting hours (including double-checking) to get it right. As the sun came up, though, the engine sounded great! Tuning up and preparing, I learned, is as important to the race as the race itself. My friend, however, learned a much tougher lesson: he spun out and rolled his Ferrari at the hairpin turn in the seventh lap. He crawled unhurt from the twisted wreckage, but all he was able to salvage from

the car was the engine.

importante para a raa como a corrida si. Meu amigo, no entanto, aprendi lio muito mais difcil: ele ficou fora e rolou a Ferrari no hairpin virar na stima volta. ele se arrastou ileso dos escombros torcida, mas tudo o que ele era capaz de salvar da o carro era o motor.

Pgina 320

Working with Clients

Making multimedia for clients is a special case. Be sure that the organization of your project incorporates a system for good communication between you and the client as well as among the people actually building the project. Many projects have turned out unhappily because of communication breakdowns.

Trabalhando com clientes

Fazendo multimdia para clientes um caso especial. Certifique-se de que a organizao do seu projeto incorpora um sistema para uma boa comunicao entre voc eo cliente, bem como entre as pessoas, na verdade, de construo o projeto. Muitos projetos tm acabou infelizmente por causa da comunicao avarias.

Aprovao Ciclos cliente

Supervisionar boa gesto para evitar o feedback interminvel laos em Nesta situao, o cliente de alguma forma, nunca completamente feliz, e voc forado para ajustar e editar muitas vezes. Gerenciar a produo, de modo que o seu cliente continuamente informados e aprova formalmente atravs da assinatura de fora em arte e outros elementos como voc construir eles. Ocasionalmente, a tecnologia melhorar durante o desenvolvimento e voc pode ser capaz de oferecer novos recursos que ir melhorar o seu projeto. Desenvolver um esquema que especifica o nmero e durao de ciclos de aprovao do cliente, e em seguida, fornecer um mecanismo para pedidos de alterao quando as alteraes so solicitadas aps sign-off. para que a mudana ordens, lembre-se que o cliente deve pagar extra e as mudanas devem ser dispendioso.

Client Approval Cycles

Provide good management oversight to avoid endless feedback loopsin this situation the client is somehow never quite happy, and you are forced to tweak and edit many times. Manage production so that your client is continually informed and formally approves by signing off on artwork and other elements as you build them. Occasionally, the technology will improve during development and you may be able to offer new features that will improve your project. Develop a scheme that specifies the number and duration of client approval cycles, and then provide a mechanism for change orders when changes are requested after sign-off. For change orders, remember that the client should pay extra and the changes should be costly.
We made up two sample musical tracks to play in the background and sent them off by overnight courier to the client. Four days later, the client phoned to say that both were good, but they were wondering if we couldnt make it sound a little more like Windham Hill. So we redid the music and sent two more samples. Five days later, the client said the samples were great, but the boss wanted something with a Sergeant Pepper feel. So we sent a fifth creation, this time with a note that

First Person
Fizemos dois musical amostra faixas para tocar no fundo e os enviou por noite servios de entrega para o cliente. Quatro dias mais tarde, o cliente telefonou para dizer que tanto eram boas, mas eles estavam querendo saber se no pudssemos fazer soar um pouco mais como Windham Hill. Ento, ns refez a msica e mandou mais dois amostras. Cinco dias depois, o cliente disse que as amostras foram grandes, mas o chefe queria algo com um sargento Pimenta sentir. Assim, enviou 1/5

they would have to either settle on one of the five styles submitted, supply the music themselves, or pay us more money to keep up the creative composition work. They chose the music the boss liked, but we wound up more than two weeks behind schedule and had spent significantly more money and effort on this task than originally budgeted. Several months later, in the next job requiring original music composition, we specified a maximum of two review/feedback cycles and added a clause for cost overrun beyond that. The first sound we submitted to this new client was approved, and we stayed ahead of schedule and budget.

criao, desta vez com uma nota que eles teriam que se conformar em um dos cinco estilos apresentados, fornecer a msica se, ou pagar-nos mais dinheiro para manter o criativo trabalho de composio. Eles escolheram a msica o chefe gostava, mas acabou -se mais de duas semanas atrs programar e passou significativamente mais dinheiro e esforo nesta tarefa do que o inicialmente oramentado. Vrios meses depois, no prximo trabalho exigindo a composio de msica original, ns especificado um mximo de dois reviso / feedback ciclos e acrescentou uma clusula de superao custo para alm disso. O primeiro som que submetidos a este novo cliente foi aprovado, e ficou frente de cronograma e oramento.

Data Storage Media and Transportation

Its important that the client be able to easily review your work. Remember that either you and the distant site need to have matching data transfer systems and media, or you need to provide a web or FTP site for your project. Organize your system before you begin work, as it may take some

Data Storage Media e Transportes

importante que o cliente possa facilmente revisar seu trabalho. Lembrar que ou voc eo local distante precisa ter correspondncia de transferncia de dados sistemas e meios de comunicao, ou voc precisa fornecer um site web ou FTP para o seu projeto. Organize o seu sistema antes de comear o trabalho, pois pode levar algum

Pagina 321
time for both you and the client to agree on an appropriate system and on the method of transportation. Because multimedia files are large, your means of transporting the project to distant clients is particularly important. Typically, both you and the client will have access to the Internet at high bandwidth. If not, the most cost- and time-effective method for transporting your files is on DVDROM by an overnight courier service (FedEx, DHL, or Postal Service Express Mail). Material completed in time for an afternoon pickup will usually be at the clients site by the next morning. If you use the Internet to deliver your multimedia to the client, be sure that you set up rules and conventions for naming files placed at an FTP site, and use codes in the subject headers of your e-mail to describe tempo para voc e para o cliente para chegar a acordo sobre um sistema adequado e em o mtodo de transporte. Como os arquivos de multimdia so grandes, de seus meios de transporte do projeto a distante clientes particularmente importante. Normalmente, tanto voc quanto o cliente ter acesso Internet em banda larga. Se no, a maioria de custos e de tempo eficaz mtodo para transporte de ficheiros est DVDROM por um servio de correio expresso (FedEx, DHL ou Servio Postal O correio expresso). Material de concluda a tempo para um captador tarde vai geralmente no site do cliente na manh seguinte. Se voc usar a Internet para entregar o seu contedo multimdia para o cliente, seja certeza de que voc definir regras e convenes para nomear os arquivos colocados em um Site FTP, e os cdigos de uso nos cabealhos

the content of the message. After a project has been under way for a while, there will be many files and many communications, so these keywords and clues will make life easier. This is another place where planning ahead pays off!

de assunto de seu e-mail para descrever o contedo da mensagem. Depois de um projeto j est em curso h algum tempo, haver muitos arquivos e comunicaes muitos, portanto, essas palavras-chave e pistas vai tornar a vida mais fcil. Este outro lugar onde planear o futuro compensa!

Tracking
Organize a method for tracking the receipt of material that you will incorporate into your multimedia project. Even in small projects, you will be dealing with many digital bits and pieces. Develop a file-naming convention specific to your projects structure. Store the files in directories or folders with logical names. Version control of your files (tracking editing changes) is critically important, too, especially in large projects. If more than one person is working on a group of files, be sure that you always know what version is the latest and who has the current version. If storage space allows, archive all file iterations, in case you change your mind about something and need to go back to a prior rendering.

rastreamento
Organizar um mtodo para rastrear o recebimento de material que voc ir incorporar em seu projeto multimdia. Mesmo em projetos pequenos, voc ser lidar com muitos bits digitais e peas. Desenvolver uma conveno de nomeao de arquivo especfico para a estrutura do seu projeto. Armazenar os arquivos em diretrios ou pastas com nomes lgicos. verso controle de seus arquivos (rastreamento de alteraes de edio) muito importante, tambm, especialmente em grandes projetos. Se mais de uma pessoa est trabalhando em um grupo de arquivos, certifique-se que voc sempre sabe qual verso a mais recente e que tem a verso atual. Se o espao de armazenamento permite, arquivar todas as iteraes de arquivos, no caso de voc mudar de idia sobre algo e precisa voltar a uma antes de renderizao.

Copyrights

Commonly used authoring platforms may allow access to the software programming code or script that drives a particular project. The source code of HTML pages on the Web may also be easily viewed. In such an open-code environment, are you prepared to let others see your programming work? Is your code neat and commented? Perhaps your mother cautioned you to wear clean underclothing in case you were suddenly on a table among strangers in a hospital emergency roomwell, apply this rule to your code. You can insert a copyright statement in your project that clearly (and legally) designates the code as your intellectual property (see Figure 10-17), but the code, tricks, and programming techniques remain accessible for study, learning, and tweaking by others.

Copyrights

Plataformas de autoria comumente utilizados podem permitir o acesso ao software cdigo de programao ou script que dirige um projeto em particular. a fonte cdigo de pginas HTML na Web tambm pode ser facilmente visualizado. Em tal ambiente de cdigo aberto, voc est preparado para deixar que outros vejam seu trabalho de programao? o seu cdigo limpo e comentou? talvez o seu me advertiu que voc use roupas de baixo limpas no caso de voc de repente sobre uma mesa entre estranhos em uma sala de emergncia do hospital, bem, aplicar esta regra a seu cdigo. Voc pode inserir uma declarao de direitos autorais em seu projeto que claramente (e legalmente) designa o cdigo como o intelectual propriedade (ver Figura 10-17), mas o cdigo, truques e tcnicas de programao

permaneam acessveis para estudo, aprendizado e ajustes por outros.

Pagina 322

Figure 10-17 Typical copyright and ownership statements embedded in <meta> tags at the top of an HTML page

Hazards and Annoyances

Even experienced producers and developers commonly run into at least some light chop and turbulence during the course of a projects development. The experts, however, never crash when their vehicle shudders or loses some altitude. You can expect the going to get rough at any number of stagesfrom trying to design the perfect interface, to endless testing, to problems with client sign-off or payment. Expect problems beyond your control, and be prepared to accept them and solve them.

Perigos e incmodos
Mesmo produtores experientes e desenvolvedores geralmente executado em pelo menos alguns costeleta de luz e de turbulncia durante o curso do desenvolvimento de um projeto. Os especialistas, no entanto, nunca falhar quando estremece seus veculos ou perde alguma altitude. Voc pode esperar o vai ficar difcil em qualquer nmero de estgios, de tentar projetar a interface perfeita, a testes sem fim, a problemas com cliente sign-off ou pagamento. Esperar que os problemas fora de seu

controle, e estar preparado para aceit-los e resolv-los.

Pagina 323
Small annoyances, too, can become serious distractions that are counterproductive. The production stage is a time of great creativity, dynamic intercourse among all contributors, and, above all, hard work. Be prepared to deal with some common irritants, for example: Creative coworkers who dont take (or give) criticism well Clients who cannot or are not authorized to make decisions More than two all-nighters in a row Too many custom-coded routines Instant coffee and microwaved corn dogs Too many meetings; off-site meetings Missed deadlines Software and hardware upgrades that interrupt your normal operations If your project is a team effort, then it is critical that everyone works well togetheror can at least tolerate one anothers differencesespecially when the going gets tough. Pay attention to the mental health of all personnel involved in your project, and be aware of the dynamics of the group and whether people are being adversely affected by individual personalities. If problems arise, deal with them before they become hazardous; the mix of special creative talents required for multimedia can be volatile. If you stay organized and flexible throughout, you will complete your project successfully. See Chapter 14 for how to deliver it! Pequenos aborrecimentos, tambm, podem se tornar distraes srias que so contraproducentes. A fase de produo um momento de grande criatividade, dinmica relaes entre todos os colaboradores, e, acima de tudo, trabalho duro. Esteja preparado de lidar com alguns irritantes comuns, por exemplo: crticas colegas de trabalho criativo, que no levam (ou dar) bem Os clientes que no podem ou no esto autorizados a tomar decises Mais de dois todas as cervejarias em uma fileira Demasiados com cdigos personalizados rotinas O caf instantneo e ces de milho microondas Too muitas reunies, fora do local de reunies no atendidas prazos As atualizaes de software e hardware que interromper o seu normal operaes Se o seu projeto um esforo de equipe, ento fundamental que todos trabalham bem juntos ou pelo menos pode tolerar uns aos outros, especialmente diferenas quando as coisas ficam difceis. Preste ateno sade mental de todo o pessoal envolvidos em seu projeto, e estar ciente da dinmica de grupo e se as pessoas esto sendo prejudicados por personalidades individuais. Se surgem problemas, lidar com eles antes de tornar-se perigosos, a mistura de especiais talentos criativos necessrios para multimdia pode ser voltil. Se voc manter-se organizado e flexvel ao longo, voc ir concluir o seu projeto com sucesso. Veja o Captulo 14 para como entreg-lo! Em 1975, foi contratado para entregar uma 41 metros veleiro de cruzeiro de Fort Lauderdale para Ilhas Virgens Britnicas Ilhas para o comrcio charter. em trs dias reuniu uma equipe de estranhos, provisionado o barco, e verificado todo o equipamento. ento ns tirou toda a Corrente do Golfo e no Tringulo

First Person
In 1975, I was hired to deliver a 41-foot cruising sailboat from Fort Lauderdale to the British Virgin Islands for the charter trade. In three days I assembled a crew of strangers, provisioned the boat, and checked all the equipment. Then we took off across the Gulf Stream and into the Bermuda Triangle.

After two days it was clear that the cook was a bad apple. It wasnt just that she couldnt cookshe whined about everything: the stove wouldnt light, the boat heeled too much, her socks were wet, her sleeping bag tore on a cleat, her hair was tangled, she couldnt get her favorite radio station (now a few hundred miles astern). It was unending. The whining began to envelop her in a smog-colored, onion-like layering, each new complaint accreting to the last one, like growing coral. By the fifth day, her unpleasant aura saturated the entire main cabin, and the rest of us had to seek sanctuary in the cockpit or the small aft cabin. Efforts were made to solve this bizarre situation, but by then, nobody could get near her (or wanted to). When we pulled into tiny Caicos Island for water and fresh stores, I paid her off and arranged for a room at the quaint waterfront hotel, where she could wait three days for the weekly airplane back to Florida. Everyone felt bad about her disappointment and how it all turned outfor about an hour. The rest of the voyage was jubilant.

das Bermudas. Depois de dois dias, ficou claro que o cozinheiro era uma ma podre. No foi s que ela no sabia cozinhar, ela choramingou sobre tudo: o fogo no acender, o barco salto alto demais muito, suas meias estavam molhadas, dormindo saco rasgou em um grampo, o cabelo dela era embaraada, ela no poderia ter o seu favorito estao de rdio (agora algumas centenas milhas r). Foi interminvel. O choramingar comeou a envolv-la em uma fumaa de cor, camadas de cebola, como, acreo cada nova denncia para a ltima, como o coral em crescimento. Ao quinto dia, sua desagradvel aura saturado o principal inteira cabine, eo resto de ns tinha de buscar refgio na cabine ou no cabine de popa pequeno. Foram feitos esforos para resolver esta situao bizarra, mas At ento, ningum podia chegar perto dela (ou queria). Quando entramos Ilha Caicos pequena de gua e fresco lojas, eu pago-la e organizado para um quarto na orla catita hotel, onde ela podia esperar trs dias, para a parte de trs do avio semanal para a Flrida. Todos se sentiram mal sobre seu desapontamento e como tudo acabou-por cerca de uma hora. o resto da viagem foi alegre.

Chapter 10 Review
Pagina 324 Chapter Summary
For your review, heres a summary of the important concepts discussed in this chapter. Design the structure and user interface for a multimedia project The best products are often the result of continuing feedback and modifications implemented throughout the production process. However, too much feedback and too many changes can kill a project; always balance proposed changes against their cost. You can either describe the project in great detail before the production, or you can use rough storyboards

Resumo do captulo
Para sua anlise, aqui vai um resumo da importante conceitos discutidos neste captulo. Desenhar a estrutura e interface de usurio para um multimdia projeto Os melhores produtos so frequentemente o resultado de realimentao contnua e modificaes implementadas durante todo o processo de produo. No entanto feedback, muito e muitos mudanas podem matar um projeto, sempre equilibrar proposto mudanas contra o seu custo. Voc pode descrever o projeto em grande detalhe antes da produo, ou voc pode usar storyboards speras

and refine the design as you produce it. How you organize your material for a project will have just as great an impact on the viewer as the content itself. Start mapping the structure of your project early in the planning phase. Project designs are typically linear, hierarchical, nonlinear, or composite. The method you provide to your viewers for navigating from one place to another in your project is part of the user interface. Depth structure represents the complete navigation map and describes all the links between all the components of your project. Surface structure represents the structures actually realized by a user while navigating the depth structure. Hot spots can be text, graphic, and icon.

e aperfeioar o projeto como voc produzir. Como voc organiza seu material para um projeto ser ter apenas um impacto to grande sobre o espectador como o o contedo em si. Iniciar o mapeamento da estrutura de seu projeto inicial na fase de planejamento. projetos Projeto so tipicamente linear, hierrquica, no-linear, ou composto. O mtodo que voc fornecer para seus espectadores paranavegar de um lugar para outro em seu projeto faz parte da interface do usurio. estrutura Profundidade representa o completo mapa de navegao e descreve todas as ligaes entre todos os componentes do seu projeto. estrutura de superfcie representa as estruturas, na verdade,realizado por um usurio ao navegar a profundidade estrutura. Os pontos quentes pode ser um texto, grfico, e cone.

Stick with accepted conventions for button design and grouping, visual and audio feedback, and navigation structure. How to produce a successful multimedia project and work with clients Production is the phase when your multimedia project is actually rendered. Provide a time-accounting system for everyone working on the project. Check your development hardware and software and review your organizational and administrative setup. Have a system for communication between you, the client, and the people actually building the project in place. Provide management oversight and control the client review process to avoid endless feedback loops. Establish a process in which your client is continually informed and formally approves the project

com vara convenes aceitas para o projeto boto e agrupamento, feedback visual e udio, e estrutura de navegao. Como produzir um projeto de sucesso multimdia e trabalhar com clientes Produo a fase em que o seu contedo multimdia projeto efectivamente prestado. Fornecer um sistema de tempo de contabilidade para todos trabalhando no projeto. Verifique se o seu hardware e software de desenvolvimento e rever sua organizacional e administrativa configurao. Tenha um sistema de comunicao entre voc, o cliente, e as pessoas realmente construir o projeto no lugar. Fornecer superviso da gesto e controlar o processo de avaliao do cliente para evitar o feedback interminvel Loops. Estabelecer um processo no qual seu cliente continuamente informado e aprova formalmente o projeto como voc desenvolvlo. Organizar um mtodo para rastrear o recebimento de material que voc vai incorporar em seu

as you develop it. Organize a method for tracking the receipt of material that you will incorporate into your multimedia project. Develop a file-naming convention specific to your projects structure. Version control of your files (tracking editing changes) is critically important, especially in large projects.

multimdia projeto. Desenvolver uma conveno de nomeao de arquivo especfico para o seu estrutura do projeto. O controle de verso de seus arquivos (tracking edio mudanas) criticamente importante, especialmente em grande projetos.

Pagina 325 Key Terms

busy screen (312) button (303) composite navigation (296) depth structure (297) file-naming convention (321) hierarchical navigation (296) hot spot (303) hyperlink (303) icon (303) image map (305) linear navigation (296) modal interface (308) navigation map (296) nonlinear navigation (296) production (318) site map (296) storyboard (295) surface structure (297) user interface (308) version control (321) white space (311)

1. The graphic outlines that describe each page of a project in exact detail are called _______________. 2. A multimedia structure in which users navigate sequentially, from one frame or bite of information to another, could be called _______________. 3. A multimedia structure in which users navigate along the branches of a tree structure that is shaped by the natural logic of the content could be called _______________. 4. A multimedia structure in which users navigate freely through the content of the project, unbound by

Key Term Quiz

Termos Chave tela ocupado (312) boto (303) composto de navegao (296) estrutura de profundidade (297) conveno de nomeao de arquivos (321) hierrquico de navegao (296) hot spot (303) hiperlink (303) icon (303) imagem do mapa (305) linear de navegao (296) de interface modal (308) mapa de navegao (296) no-linear de navegao (296) de produo (318) mapa do site (296) storyboard (295) estrutura de superfcie (297) interface de usurio (308) controle de verso (321) o espao em branco (311) Teste Termo-chave 1. Os contornos grficos que descrevem cada pgina de um projeto em detalhes exatos so chamados _______________. 2. Uma estrutura de multimdia em que os usurios navegar sequencialmente, a partir de um quadro ou mordida de informaes para o outro, pode ser chamado _______________. 3. Uma estrutura de multimdia em que os usurios navegam ao longo dos ramos de uma estrutura de rvore que moldada pela lgica natural do contedo poderia ser chamado _______________. 4. Uma estrutura de multimdia em que os usurios navegar livremente por meio do contedo do projeto, no ligado por rotas prdeterminadas, poderia ser chamado

predetermined routes, could be called _______________. 5. A multimedia structure in which users may navigate freely, but are occasionally constrained to linear presentations, could be called _______________. 6. The complete navigation map that describes all the links between all the components of your project is known as _______________. 7. The structures actually realized by a user while navigating the projects content is known as ____________. 8. Fundamental graphic objects that represent an activity or concept are called _______________. 9. The standard that ensures that project files are given logical names and stored in folders with logical names is the _______________. 10. Making sure that old files are archived and new versions are properly tracked is called _______________.

_______________. 5. Uma estrutura de multimdia no qual os usurios podem navegar livremente, mas ocasionalmente so constrangidos a linear apresentaes, poderia ser chamado _______________. 6. O mapa de navegao completo que descreve todas as ligaes entre todos os componentes do seu projeto conhecido como _______________. 7. As estruturas realmente realizadas por um usurio durante a navegao de contedo do projeto conhecido como ____________. 8. Fundamentais objetos grficos que representam uma atividade ou conceito so chamados de _______________. 9. A norma que garante que os arquivos do projeto so dados nomes lgicos e armazenados em pastas com nomes lgicos o _______________. 10. Certificar-se de que os arquivos antigos so arquivados e novas verses so devidamente rastreados chamado _______________.

Pagina 326

Multiple-Choice Quis
1. Which of these is not an advantage of creating detailed storyboards before beginning production? a. It will be better and easier to construct the project. b. Less time is required in polishing the final product. c. Getting to the production stage is faster. d. It is better suited to separate design and production teams. e. Clients who like to tightly control the production process prefer it. 2. Which of these is not one of the listed types of organizational structures? a. linear b. hierarchical c. nonlinear d. composite e. recursive 3. The visual representation of a project that includes a table of contents as well as a chart of the logical flow of the interactive interface is often called: a. a storyboard b. a workflow diagram

Mltipla Escolha quiz

1. Qual destes no uma vantagem do criao de storyboards detalhados antes de comear produo? a. Ser melhor e mais fcil de construir o projeto. b. necessrio menos tempo de polimento final produto. c. Chegar fase de produo mais rpido. d. Ele mais adequado ao projeto separado e equipes de produo. e. Clientes que gostam de controlar rigidamente a processo de produo preferir. 2. Qual destes no um dos tipos listados de estruturas organizacionais? a. linear b. hierrquica c. no-linear d. composto e. recursiva 3. A representao visual de um projeto que inclui uma tabela de contedos, bem como um grfico do o fluxo lgico da interface interactiva muitas vezes chamado de: a. um storyboard

c. a prototype d. a navigation map e. a master layout 4. The method you provide to your viewers for navigating from one place to another in your project is part of the: a. script b. user interface c. storyboards d. depth structure e. surface structure 5. The generic term for any area of an image that can be clicked on is: a. a hot spot b. a storyboard c. an image map d. a rollover e. an icon 6. An interface in which a user can click a button and change the approach of the whole interface is called: a. a prototype b. a navigation map c. a modal interface d. a site map e. a transitional GUI 7. Having separate novice and expert interfaces for a multimedia program is generally not a good idea because: a. it tends to take up too much disk space or bandwidth b. novice users tend to get caught in the expert mode c. only a minority of users are expert; most users are caught in between and are frustrated d. most authoring systems are not capable of handling parallel structures e. it makes developing documentation awkward and unwieldy 8. GUI stands for: a. General/Universal/Individual b. General Utilization Instructions c. Global Usage Image d. Guidelines for Usability and Interaction e. Graphical User Interface 9. The Macintosh and Windows GUIs are successful partly because: a. they enable cross-platform file structures b. their basic point-and-click style is simple,

b. um diagrama de fluxo de trabalho c. um prottipo d. um mapa de navegao e. um layout mestre 4. O mtodo que voc fornecer para seus espectadores para navegar de um lugar para outro em seu projeto faz parte do: a. escrita b. interface de usurio c. storyboards d. estrutura de profundidade e. estrutura de superfcie 5. O termo genrico para qualquer rea de uma imagem que pode ser clicado : a. um hot spot b. um storyboard c. um mapa de imagem

d. um capotamento e. um cone 6. Uma interface na qual o usurio pode clicar em um boto e alterar a abordagem de toda a interface chamado: a. um prottipo b. um mapa de navegao c. uma interface modal d. um mapa do site e. uma interface grfica de transio 7. Tendo novato separado e interfaces de peritos para um programa multimdia geralmente no uma boa idia porque: a. ela tende a ocupar muito espao em disco ou largura de banda b. usurios novatos tendem a ficar presos no especialista modo c. apenas uma minoria dos usurios so especialistas; mais usurios so pegos no meio, e so frustrado d. a maioria dos sistemas de criao no capaz de manipulao de estruturas paralelas e. isto faz com que o desenvolvimento de documentao desajeitado e pesado 8. GUI significa: a. Geral / Universal / Individual b. Instrues Gerais de Utilizao c. Imagem de uso global d. Diretrizes para Usabilidade e Interao e. Interface Grfica do Usurio 9. O Macintosh e Windows so GUIs bem sucedida, em parte, porque: a. eles permitem estruturas multi-plataforma de arquivo b. seu estilo aponte-e-clique bsica simples, consistente, e rapidamente dominou c. eles so altamente personalizvel, permitindo que

consistent, and quickly mastered c. they are highly customizable, allowing programmers to use program-specific keyboard shortcuts d. they tend to make the computer run more efficiently e. slick marketing efforts tricked gullible consumers

programadores de usar o programa especfico atalhos de teclado d. eles tendem a fazer o computador funcionar mais eficientemente e. lisos esforos de marketing enganados crdulos consumidores

10. reas Noninformation intencionalmente deixada livre de desordem visual so muitas vezes referida como: a. espao negativo Pagina 327 b. tela imobilirio c. organizadores avanados 10. Noninformation areas left intentionally free d. espao em branco e. estrutura de profundidade from visual clutter are often referred to as: 11. As normas que asseguram que os arquivos do a. negative space projeto so dado nomes lgicos e armazenados em b. screen real estate pastas com nomes lgicos so: c. advanced organizers a. diretrizes de usabilidade d. white space b. algoritmos de reconhecimento de padres e. depth structure c. arquivo de convenes de nomenclatura 11. The standards that ensure that project files d. anlise do ciclo de gesto are e. rastreamento de protocolos de projeto given logical names and stored in folders with 12. Talvez o problema mais significativo com logical names are the: a criao de um programa de multimdia, que oferece a. usability guidelines aos usurios o reino livre completo o seguinte: b. pattern-recognition algorithms a. tal liberdade difcil de programa c. file-naming conventions b. computadores ainda no pode processar tantos d. review-cycle management e. project tracking protocols variveis simultaneamente 12. Perhaps the most significant problem with c. demasiada liberdade pode ser desconcertante creating a multimedia program that gives users aos utilizadores complete free reign is that: d. difcil de organizar dados em estruturas a. such freedom is difficult to program significativas b. computers cannot yet process so many e. essas interfaces tendem a ser desordenado e pesado
variables concurrently c. too much freedom can be disconcerting to users d. it is difficult to organize data into meaningful structures e. such interfaces tend to be cluttered and unwieldy 13. Cores padro para texto ncora so encontrados em que Tag HTML? a. <HEAD> b. <FRAME> c. <LINK> d. <COR> e. <BODY> 14. Qual destes provavelmente no um bom passo para tomar antes de iniciar o processo de produo de um projeto multimdia? a. Bloqueio no projeto para que no haja mais mudanas para atrasar a produo. b. Estabelecer limites para os ciclos de reviso cliente para

13. Default colors for anchor text are found in which HTML tag? a. <HEAD> b. <FRAME> c. <LINK> d. <COLOR> e. <BODY>

14. Which of these is probably not a good step to take before starting the production process for a multimedia project? a. Lock in the design so there are no further changes to delay production. b. Establish limits on client review cycles to reduce cost overruns. c. Set up an FTP site for sending and receiving production files. d. Establish clear file-naming and version control standards. e. Check the state of your hardware and software to ensure reliability and capability, and integrate any upgrades. 15. An image on a web page can be sectioned in HTML into areas that are clickable links. This is called: a. a sweet spot b. a site map c. a rollover d. a frameset e. an image map

reduzir custos excessivos. c. Configurar um site FTP para o envio e recebimento de arquivos de produo. d. Estabelecer critrios claros de nomeao de arquivos e verso controlar padres. e. Verifique o estado do seu hardware e software para garantir a confiabilidade e capacidade, e integrar todas as atualizaes. 15. Uma imagem em uma pgina da web pode ser seccionado em HTML em reas que so links clicveis. este chama-se: a. um ponto doce b. um mapa do site c. um capotamento d. um conjunto de quadros e. um mapa de imagem

Essay Quiz
1. You are given the task of managing a design and production team to complete a multimedia web site for your own company. The site is to use the latest plug-ins for interactive 3-D presentation. The design team consists of a writer and a designer, and the production team includes two programmers. Would you make sure the design and storyboards were nailed down before beginning production, or would you start and allow the design to be changed during the production process? How would factors such as the client, the technology, and the relationship between the design and production teams affect your approach?

quiz de ensaio
1. Est dada a tarefa de gerenciar uma equipe de design e produo para completar um site multimdia para sua prpria companhia. O site usar o mais recente de plug-ins para a apresentao em 3-D interativo. o design equipe composta de um escritor e um designer, e da equipe de produo inclui dois programadores. Ser que voc tenha certeza que o projeto e storyboards foram "pregado" antes de iniciar a produo, ou seria voc comea e permitir que o projeto seja alterado durante o processo de produo? Como que fatores como o cliente, a tecnologia, e da relao entre o projeto e as equipes de produo afetam o seu abordagem?

Pagina 328
2. list the four different types of multimedia structures. Next, describe four hypothetical projects, one that might be appropriate for each of the four

2. listar os quatro diferentes tipos de estruturas de multimdia. Em seguida, descrevem quatro projetos hipotticos, uma que pode ser apropriado para cada um dos quatro tipos. Para cada um destes quatro projetos, comentar sobre o motivo da projecto o mais adequado para que a estrutura e por cada uma das trs estruturas menos apropriada para esse

types. For each of these four projects, comment on why the project is best suited to that structure and why each of the three structures is less appropriate for that project. 3. Discuss the relationship between a programs content, its interface, and its usability. What is the best way to make the content accessible to users without unnecessary complexity? Where are modal interfaces useful? What are their drawbacks? Where are navigation or site maps useful? How might you use themes to identify different areas of a program or different approaches to the contents structure? 4. What are the steps you would take in gearing up for the production phase of a multimedia project? Organize your thoughts according to the infrastructure (hardware, software, networks, web/FTP site), team management, and client interaction. 5. Describe the tracking process you might use to control the project development process. Be sure to include a discussion of version control, file-naming convention, client review cycles, and team management.

projeto. 3. Discutir a relao entre o contedo de um programa, sua interface, e sua usabilidade. O que o melhor maneira de tornar o contedo acessvel aos usurios sem complexidade desnecessria? Onde esto modal interfaces teis? Quais so suas desvantagens? Onde esto os mapas de navegao ou site til? como pode voc usa "temas" para identificar reas diferentes de um programa ou de diferentes abordagens para o de contedo estrutura? 4. Quais so os passos que voc tomaria em "preparar-se" para a fase de produo de um projeto multimdia? Organize seus pensamentos de acordo com a infra-estrutura (hardware, software, redes, web / FTP local), gesto de equipe, e interao do cliente. 5. Descrever o processo de rastreamento que voc pode usar para controlar

Lab Projects
Project 10.1
Locate three different web sites: a news site, a shopping site, and a hobby or special interest site. Print out the home page for each site (the home page should include the primary navigation; it should not be a splash page that includes little navigation). Circle all the buttons on the interface. Note any buttons that are common to each site. Compare the layout and structure of the sites, ignoring aesthetic considerations. List the buttons that are different. Comment on why the buttons are laid out and grouped as they are. Is the site accessible? How are icons used? How are menus used? Write a report documenting your observations, and

Projetos de laboratrio
Projeto 10,1 Localize trs sites diferentes: um site de notcias, um site de compras, e um site hobby ou interesse especial. Imprimir a pgina inicial de cada site (a pgina inicial deve incluir a navegao primria, que no deve ser um splash " pgina ", que inclui a navegao pouco). Circule todos os botes na interface. Observe quaisquer botes que esto comum para cada site. Compare o layout e estrutura dos sites, ignorando consideraes estticas. Lista os botes que so diferentes. Comente sobre por que os botes so definidos e agrupados como elas so. o stio acessvel? Como so cones usados? Como so menus usado? Escrever um relatrio documentando suas observaes, e incluem as impresses. Projeto 10,2

include the printouts.

Project 10.2
Locate three different web sites that have similar content and that include site maps. Print out each sites map. How are the structures similar? How are they different? How are the differences related to their content? How are the differences related to a different way of structuring the information? Write a report documenting your observations, and include the printouts.

Project 10.3

Create a site map for a hypothetical multimedia DVD project on the history of computers. Use the composite structure, and provide two means of navigating the content, one being a timeline. Be sure to include various options such as help, glossary, and so on. Trace the surface structures that three hypothetical users might take through the program: a novice user, an expert user, and someone looking for a particular fact about computer history. Explain why each user would take that particular path through the project.

Localize trs diferentes sites que tenham contedo semelhante e que incluem mapas do site. Imprima o mapa de cada site. Como so as estruturas semelhante? Como eles so diferentes? Como so as diferenas relacionadas com o seu contedo? Como so as diferenas relacionadas a uma maneira diferente de estruturar a informao? Escreva um relatrio documentando o seu observaes, e incluem as impresses. Projeto 10,3 Criar um mapa do site para um projeto de DVD hipottica multimdia sobre a histria dos computadores. Utilizar o composto estrutura, e fornecer dois meios de navegar no contedo, sendo um deles um cronograma. Certifique-se de incluir vrios opes como ajuda, glossrio, e assim por diante. Traar a "superfcie" estruturas que trs usurios hipotticos poderiam tomar atravs do programa: um usurio iniciante, um usurio experiente, e algum que procura um fato em particular sobre o computador histria. Explique por que cada usurio poderia tomar esse caminho particular atravs do projeto.

Pagina 329
Project 10.4
Using simple text blocks and icons, create a user interface for the project you developed in Project 10.3. Discuss what buttons are included, how they are logically grouped together, and why. What nontext interface elements might you include to provide navigational cues?

Projeto 10,4 Usando blocos de texto simples e cones, criar uma interface de usurio para o projeto que desenvolveu no Projeto 10.3. discutir os botes que esto includos, como eles so logicamente agrupados, e por qu. Que elementos notexto de interface voc poderia incluir a fornecer pistas de navegao? Projeto 10,5 Criar cinco storyboards para a histria do projeto de computadores. Storyboard uma "tela", no menu principal, um submenu, e duas telas de contedo diferentes.

Project 10.5

Create five storyboards for the history of computers project. Storyboard a splash screen, the main menu, a submenu, and two different content screens.