6 7

ESPECIALDDesde seu aparecimento a Web não pára de evoluir por um lado e por outro ainda exibe retrocessos difíceis de se admitir. Afi nal, estamos no começo de um novo século em que se pensa sobre o conceito de Web 2.0 e as ferramentas para construção de sites evoluíram de forma espantosa. Diante desse cenário, como se explica a profu-são de sites ruins e mal feitos que infestam a rede.Um dos principais motivos para que isso aconteça é mui-tas vezes a falta de bom senso dos profi ssionais que pecam ou pela extrema pobreza ou pelo exagero visual dos sites que produzem. A falta de harmonia entre conteúdo e visu-al difi culta diariamente a vida de milhares de internautas, pequenos equívocos que quando somados refl etem direta-mente na audiência de sites e portais. Em alguns sites essa falha é maior, pois além do conteúdo ser mal apresentado ele não desperta interesse nos internautas. Nesse sentido, é importantíssimo que o profi ssional que atua na Internet tenha consciência de que a rede em suma não passa de uma fonte de informação, e por isso, o conteúdo deve ser sempre priorizado. Isso defi nitivamente não exclui a importância do trabalho do designer, já que um site bonito visualmente e que também traz conteúdo interessante atraí muito mais do que apenas um site com material relevante. Nesse sentido, as pedras de toque na construção de sites são harmonia e funcionalidade.

O conceito profissional da InternetNormalmente a profi ssão de Webdesigner é entendida como sinônimo de criadores de websites, no entanto,

com os constantes avanços das ferramentas e conseqüen-temente das exigências em torno da construção de um site o temo “profi ssional da Internet” passou a ser mais usado, já que profi ssionais de outras áreas passaram a integrar as equipes de criação. Veja agora alguns desses profi ssionais:

Webdesigners – O termo não pode ser usado apenas como uma extensão de um designer gráfi co. A Web hoje em dia tem exigências próprias. Esses profi s-sionais desenvolvem a interface gráfi ca do site, e defi nem a solução de layout a ser utilizada; como o contraste entre as cores, ilustrações a utilizar, tipos de fontes etc.

Programadores (web) – Esse profi ssional é o principal responsável pelo bom funcionamento do layout imaginado pelo webdesigner consiga funcionar corretamente. Também chamados de webdevelopers, eles fazem a montagem efetiva do site, pegando os elementos gráfi cos fornecidos pelos web-designers e construindo a página fi nal. Eles lidam diretamente com os aspectos técnicos do site, como linguagem HTML e extensões mais avançadas como ASP, .NET ou PHP. Outra frente de trabalho desses profi ssionais é criar ferramentas exclusivas para um site específi -co, como bancos de dados ou áreas restritas por senha, por exemplo.

Primeiros

Por: Marcelo Romano

passosDescubra na primeira reportagem das duas em que traçamos o bê-á-bá do webdesigner

Webwriters – Eles são os escritores da Web. Esses profi ssionais são os principais responsáveis por todo o gerenciamento da informação, seja ela íconográfi -ca, foto, fi lme, som e, sobretudo, texto. A área de atuação desses profi ssionais portanto engloba desde o jornalismo até os conceitos básicos de usabilidade. Sua principal função é tornar mais intuitiva a navegação dos sites para os internautas.

Conceitos teóricos e suas funções práticasQuando se começa a trabalhar com a Internet é normal se sentir perdido com tantos conceitos. Selecionamos para você três dos principais. Esses não podem faltar na elaboração de qualquer tipo de site:

- Usabilidade – É o conceito de fazer com que as páginas de um site sejam fáceis de usar. O ideal é que os sites em geral sejam fáceis. E vem daí o principal erro de muitos designers que preferem complicar tudo para que o site ganhe no visual, esquecendo que praticidade é um dos caminhos para o sucesso na Web.

- Navegabilidade – Esse conceito refere-se à forma como se vai de uma página para outra em um site. O preceito é básico: caso você possa ir de uma página para qualquer outra de seu site com apenas dois cliques quer dizer que o site tem boa navegação. O contrário é que se for preciso clicar em um botão ou link para voltar sempre que o visitante quer visitar outra página é porque está faltando navegabilidade.

- Arquitetura da informação Esse é um princípio da usabilidade, consiste no desenho de uma interface, incluindo todos seus fl uxos de navegação e estrutura do conteúdo. Sem uma Arquitetura da Informa-ção harmoniosa, não há como um site ser usável.

As fases do nascimento de um siteUm profi ssional que conheça alguns princípios básicos envolvidos no processo de criação e desenvolvimento de páginas de Web será perfeitamente capaz de criar algo simples, funcional e agradável ao internauta. Por isso, defi nimos para você algumas etapas básicas a seguir:

@@

@@

@

Iniciação

8 9

1ª Fase: Organização de toda a informação a ser inserida2ª Fase: Construção do conceito do site e da estrutura de navegação. Nessa fase se define se o site será um site padrão, um portal etc 3ª Fase: Wireframe: primeiro ela é feita no papel para só depois ser desenvolvida com os softwares gráficos4ª Fase: Testes5ª Fase: Publicação do site, depois de oficializar o domínio e o seu provedor de hospedagem

Como pensar o site Basicamente é possível pensar um site dividindo uma página de internet em duas partes: o layout, e o conteúdo. Primeiro vamos defi nir o conteúdo. O primeiro passo é pensar no tema do site. Para que essa etapa fi que mais completa você deve responder as seguintes perguntas:

- Qual o assunto principal do site? - É um site de uma empresa? Ele vai vender o quê? - É um portal sobre um assunto especifi co como econo-mia, esportes etc? - É um site pessoal que vai ser usado como portfólio?

Ao responder essas perguntas você terá claramente o principal objetivo do site. O próximo passo é defi nir sua estrutura:

- Quantas seções ele terá? - Quais seções serão as principais? - O que vai fi car em destaque nas barras de navegação? - Quantas e como serão apresentadas as seções secun-dárias? - Quantas seções vão ser necessárias?

Em geral, os sites simples costumam ter uma página inicial que serve também de apresentação, uma página sobre a em-presa ou sobre o profi ssional dono do site, uma terceira que mostra os produtos e os serviços e uma última de contato e/ou localização, se o site for no caso de uma empresa.

ConceitoNo plano conceitual podemos dividir um site em duas

partes principais:

- Layout: é a ‘cara’ do site. O conjunto de elementos que dão identidade, navegabilidade e usabilidade à página da Web. Consiste na marca, no menu principal e no fundo das páginas. O layout é mantido em todas as páginas para criar uma identidade visual. Você deve criar páginas base-

adas nesse template, acelerando o desenvolvimento e permi-tindo que você foque sua atenção na função das páginas.

- Função: cada página deve ter uma defi nida e distinta das outras páginas, por isso, antes de construir cada página do seu site, você deve defi nir seu objetivo e usar os elemen-tos de design para alcançá-los.

O básico do LayoutExistem dezenas de possibilidades de se estruturar um site. Atualmente a forma mais usada é um site com um menu em uma barra lateral ou horizontal, colocada na parte superior da página de abertura. Em alguns casos, é possível utilizar as duas opções no mesmo site. Veja alguns exemplos:

Mãos à obraCoisas que se deve saber na hora da construção do site. Selecionamos para você dois aspectos relevantes na hora de começar a construir o site:

Conceito WYSIWYG Esse amontoado de letras é a abreviação da expressão em inglês What You See Is What You Get (O que você vê é o que você tem). Consiste em um método de edição no qual o usuário pode ver o objeto na tela do computador já com a aparência fi nal. O Dreamweaver 4 é um exemplo de editor WYSIWYG para a web.

NavegadoresOs internautas atualmente dispõem de uma série de nave-gadores diferentes. O principal deles ainda é com certeza o Internet Explorer que já vem pré-instalado no Windows. Entretanto, nos últimos tempos outros navegadores têm ameaçado a supremacia do programa da Microsot. O princi-pal rival do Explorer é o navegador gratuito Mozzila Firefox que não pára de ganhar usuários. Outros que merecem destaque são Ópera, Netscape e Safári, este último para pla-taforma Apple. O ideal é que o webdesigner tenha instalado em sua máquina pelo menos três navegadores diferentes para que possa testar seus sites em cada um deles. Já que é comum haver alterações na visualização de um website quando aberto em um ou outro navegador. Construir um site compatível com todos eles é fundamental. *Na próxima edição, trataremos de outros aspectos fundamentais na constru-ção de um site na Internet.

Fases do planejamento Programas que facilitam

Chega o momento em que você precisa de fotos gratuitas de boa qualidade, de fontes diferentes... E que tal um testador de sites em diferentes browsers? Conheça estas opções muito úteis.

Por Rogério Favero:designer, gerente de projetos especialista em webmarketing e usabilidade

Trabalho com design de internet há sete anos. Já parti-cipei de algumas equipes de desenvolvedores e conheci muita gente realmente boa no que faz e cada um sempre acrescentou alguma dica (ou sugestão) para que o traba-lho do colega tivesse alguma evolução. Talvez seja esse o maior desafi o para quem inicia a carreira nos tempos atuais, em meio a diversas técnicas e siglas como SEO, web standards, tableless, Ajax, web 2.0 etc.

Com o crescimento das comunidades virtuais, o designer iniciante tem o caminho facilitado até os segredos da profi ssão. Hoje é possível pular etapas no desenvolvimen-to profi ssional e rapidamente tornar-se um especialista. O grande problema é que são poucos os artigos que apontam soluções para as situações mais simples do dia-a-dia do designer, como por exemplo onde encontrar uma boa fonte de texto ou um banco de imagens gratuito.Este artigo tem como objetivo expor algumas ferramentas realmente úteis para quem começa na profi ssão ou, quem sabe, até mesmo para designers mais “rodados”. Apresento uma série de facilitadores de trabalho que, ao longo desses sete anos, têm me auxiliado no desenvolvimento da web de forma signifi cativa ou até corriqueira, mas o importan-te é que são sempre úteis.

Precisa de logo vetorizado?Brands of the World. É uma espécie de diretório de logotipos vetorizados, a maioria em formato .eps, que auxilia muito na hora do desenvolvimento daquele projeto urgente.

Que fonte de texto é essa?Um dos serviços mais úteis na vida de um designer. Quem nunca se deparou com aquele logotipo entregue pelo

cliente em formato .jpg e que era necessário vetorizar? E mais, como fazer para descobrir qual fonte seria aquela? Entra em cena o Myfonts. Através dele podemos submeter uma parte da imagem e o sistema se encarrega de tentar descobrir qual é o tipo de fonte utilizado. Eu já utilizei seu serviço dezenas de vezes e - pode acreditar - em muitos momentos foi uma grata surpresa!

Onde encontrar a fonte de texto?Da Font é certamente a primeira resposta. O site conta com milhares de fontes de texto grátis e, ainda por cima, tem um dos melhores sistemas de visualização de tipos. Vale a pena conferir, principalmente pela opção de colocar a palavra desejada e, em seguida, conferir sua exibição em diversas fontes diferentes, quase que instantaneamente.Lorem IpsunPrecisa de texto para compor seu design? Esse site, com certeza, é a solução. O Lorem Ipsum disponibiliza a quan-tidade de texto na medida do seu projeto.

Fotos grátis?Que tal mais de 250 mil imagens em alta resolução, dispo-níveis para serem utilizadas na web, sem pagar royalties? Essa é a proposta do Stock.xchng, um site onde os usuá-rios compartilham as suas fotos e, na maioria dos casos, com excelente qualidade.

Testar em vários navegadores?Então conheça o Browser Shots, realmente uma ferramen-ta incrível. Ele se propõe a tirar screenshots do seu site, em diversos tipos de navegadores e plataformas, como por exemplo: Dillo 0.8, Epiphany 2.16, Firefox 2.0, Galeon 2.0 entre outros. Está em fase alpha, mas mesmo assim vale a pena dar uma olhada.

nossas vidas

Veja os links no cd-Roon

Artigo