Valter Henrique da Silva Santos Webdesign avançado Um

Valter Henrique da Silva Santos
Webdesign avançado
Um Wireframe, explicando-se de forma simplificada, é um diagrama de como
será um site ou página de Internet, podendo ser feito até mesmo fora do
computador, em papel, pois a função do mesmo é passar as informações do
briefing para uma estrutura de como será o site a ser produzido.
Normalmente se tem como base alguns requisitos como a navegação,
usabilidade e interação que serão adicionadas e, ao construir o Wireframe,
evita-se o uso de cores e imagens reais, utilizando-se somente textos e blocos
para representar os espaços de imagens e tipos de conteúdo. Quanto mais
detalhada a informação do Wireframe, melhor ele será interpretado pelo
designer que irá criar e também servirá de guia para os programadores
saberem o posicionamento correto dos objetos.
Se você nunca fez um Wireframe na hora de desenvolver um site, então muito
provavelmente você criou um layout sem saber o que fazer ou comprou um
layout pronto, mas quando falamos de sites profissionais, falamos também da
arquitetura do site.
Não basta saber usar o Photoshop ou Illustrator se você é um Web Designer
deverá saber planejar o que será feito e como será feito, desde um simples
wireframe (esboço) em papel até os formatos digitais e mais apresentáveis.
Abaixo segue uma lista de sites que oferecem serviços para criar os
Wireframes ou mesmo comprar os aplicativos para fazer esta parte tão
importante no desenvolvimento de sites, o planejamento da navegação e
criação.
The Pensil Project ele é um sistema OpenSource para criar as telas e
prototipagem de forma fácil, permite documentos com múltiplas páginas e com
fundos de página, permite estilos de textos ricos em estilos, suporta PNG,
permite que você defina pré-estilos, padronização na hora de desenhar com
alinhamentos, z-ordering, escala e rotação funciona no Linux, Windows XP e
Windows Vista, o que facilita bastante pois mesmo que você tenha Mac poderá
instalar com base no unix do sistema.
Com foco maior em fazer Flowcharts, o Gliffy roda pela Internet e permite uma
integração com o sistema chamado JIRA, mas a saída dos wireframes dele é
feito em JPG, GIF, PNG ou SVG, parece ser bem simples este sistema, pelas
telas que são exibidas nos exemplos de desenvolvimento. Para usar o Gliffy
pela Internet ele é grátis, agora se você desejar usar os plugins para alguns
sistemas ele tem um custo por licenças. É claro que tudo irá depender de sua
necessidade, o Gliffy tem maiores detalhes para quem quer fazer uma planta
de casa ou apartamento, desenhos para redes de computadores ou
fluxogramas.
Planejamento estratégico
Como todo trabalho de design, ele é um projeto, e necessita uma análise
informacional, a partir de um briefing. Detectar corretamente o objetivo do
projeto é essencial para um bom planejamento, de modo que as ações sejam
tomadas de forma correta.
ex: classificacaodegames.wix.com/ccog#!
É sempre necessário definir o público alvo do site, o objetivo, os serviços
oferecidos, o diferencial para o público. A partir desses e de outros elementos
que sejam especificamente relevantes ao projeto, será definida a estrutura do
site (Arquitetura de informação), a tecnologia empregada e o layout.
De uma forma geral, embora usualmente possa parecer que a primeira
impressão que se tem de um site é o visual, na verdade o visitante busca o
conteúdo, por esse motivo o primeiro passo estratégico é definir bem todas as
informações que o site terá, definir claramente a arquitetura de informação do
site e por último, o design visual do site, que não precisa pular, girar e piscar, a
não ser que o que se esteja vendendo é design/imagem (que não se aplica ao
meio informacional que é a Web), mas ter um aspecto profissional seguindo
pelo menos os conceitos básicos do design como aproximação, contraste,
alinhamento, dentre outros.
Há uma diferença conceitual marcante entre design nos meios tradicionais,
como no gráfico e o design aplicado na web. Na web, a estética deve ser
moldada ao dispositivo que acessa ao site ou mesmo desabilitada caso não
seja necessária no contexto de utilização. No meio gráfico é possível prever
como o usuário final verá a estética do produto, já na web isto não é possível,
pois a aparência pode e deve mudar radicalmente de acordo com o sistema
operacional utilizado, configurações pessoais, navegadores, resoluções de tela
e dispositivos, como celular, TV, impressora, leitores de telas etc. Por este
motivo, a estrutura (HTML) com a qual a informação será exposta deve
trabalhar independentemente da formatação estilística (CSS) e do
comportamento (scripts), que são recomendações do W3C.
Estrutura do web design
A estrutura, também conhecida como arquitetura de informação, do site deve
contemplar seu objetivo, tornando a experiência do usuário a mais confortável
e fácil possível, chamamos isso de usabilidade. Deve-se planejar a estrutura de
forma que o usuário obtenha facilmente a informação ou serviço desejado.
Hoje em dia são inúmeras as formas que um site pode adquirir e a criatividade
continua ser o grande diferencial na produção de web.
Layout
O layout precisa transmitir a informação desejada com eficiência. É preciso que
o layout seja um elo de comunicação com o usuário, que sua linguagem seja
condizente com o objetivo do site. Conhecer heurísticas de usabilidade é
fundamental para se gerar layouts para a web.
Cada elemento inserido em um website deve ter um objetivo, a perfeição de um
website se atinge quando não há nada a ser retirado e não quando não há
nada mais a ser inserido.
A maioria dos layouts antigos dos sites da Web eram feitos com tabelas na
linguagem HTML, porém esta forma é inapropriada pois tabelas devem ser
utilizadas apenas para exibir dados tabulados. Entretanto existem layouts que
são completamente produzidos sem a presença de tabelas, sao os famosos
"tableless" e esta sim é a melhor forma de estrutura para layouts.
tableless não pode ser entendido como na tradução livre, que seria
literalmente "sem tabelas". Tableless é um conceito e deve ser entendido como
aplicação das webstandards (normas da web desenvolvidas pela W3C).
Navegadores
São programas responsáveis por interpretar o conteúdo de um web site,
disponibilizando assim a interface com a qual o usuário final irá interagir. O
navegador está para o web design assim como o papel está para o jornal. A
grande variedade de navegadores e discrepância entre os recursos fez seus
próprios criadores caminharem em direção a um padrão comum. Atualmente é
indispensável criar sites seguindo os padrões da World Wide Web Consortium.
No desenvolvimento do site, o HTML deve ser criado seguindo os padrões do
W3C (Web Standards) de forma que fique funcional, independente dos
dispositivos (TV, celular, impressora, monitor etc). Apesar de em tese não
haver a necessidade de testar em diversos navegadores, é um bom hábito
testar em mais de um navegador (Mozilla Firefox, Internet Explorer, Netscape,
Opera, Safari, Google Chrome e outros), pois o layout do site pode apresentar
diferenças em determinados navegadores, e o usuário que navega não
entenderá o que está acontecendo.
Padrões
A World Wide Web Consortium (W3C) é o órgão responsável por recomendar
padrões de desenvolvimento para a internet. Por meio destes padrões se pode
classificar: web sites de acordo com suas características técnicas, indo além do
visual e; navegadores, de acordo com sua capacidade em atender aos padrões
definidos.O grande objetivo de seguir os padrões do W3C é de possibilitar que
a informação veiculada pelo site permaneça independente do dispositivo
utilizado pelo visitante e que seja acessível.
Programas utilizados
Existe um leque enorme de programas usados pelos web designers. Para
construção do código, por se tratar de simples texto, qualquer editor de texto
pode servir de suporte para a criação do código. Entretanto, há programas
tanto gratuitos como de uso comercial, com interface WYSIWYG, que são
amplamente utilizados no mercado tanto para gerenciar sites, quanto para
apenas editar códigos, como é o caso do Adobe Dreamweaver, Aptana,
Microsoft Expression Web, na parte visual, os editores gráficos vetoriais
coreldraw, Adobe Illustrator ou o Inkscape), de bitmap GIMP, e principalmente
Adobe Fireworks ou Adobe Photoshop. Para animações e recursos dinâmicos,
o Flash é o mais utilizado. Em relação ao Flash, deve-se ter o cuidado de usálo apenas onde a solução seja impossível de ser reproduzida em HTML, jamais
se usa em menus e áreas de conteúdo por ser um arquivo binário, não ser
acessível e estar em desacordo com as recomendações do W3C. Na
atualidade, existem disponíveis na rede website builders, trata-se de
plataformas que o usuário pode criar um site sem a instalação de nenhum
programa. Tais ferramentas são muito interessantes e vem ganhando espaço
no mercado, pois leigos na área de webdesign podem criar seu próprio site e
atualiza-lo diariamente se desejado.
Web designer
A tarefa do web designer é a elaboração estética e funcional e a manutenção
de um web site. O web designer deve ter a compreensão da aplicação em
mídia eletrônica de disciplinas como HTML/XHTML, CSS, JavaScript/DHTML,
Flash etc. e deve ter conhecimento no uso de software de desenvolvimento
voltado para a web.
Dicas de recortes para o layout
O serviço baseia-se na conversão do seu design no formato para código
XHTML/CSS válido e compatível com os principais navegadores em suas duas
últimas versões.Você envia o seu layout para o seu site (em PSD, PNG, CDR,
AI, etc...), e este é convertido em código XHTML/CSS 100% validado pela
W3C.
O serviço de recorte e montagem de layout's web inclui o seguinte:
Usabilidade, acessibilidade e tamanho da página (em Kb) otimizados.
Compatibilidade nos 5 principais navegadores em suas duas últimas versões
{ Firefox, Safari, IE, Chrome, Opera }.
Páginas 100% validados pela W3C.
Código semântico.
Construção de layouts sem tabelas
Muito já se tem dito e repetido que tabelas não devem ser usadas com a
finalidade de construir o layout de uma página web. Este documento mostra
uma maneira de se construir um layout de 3 colunas sem tabelas, usando-se
somente CSS.
HTML é uma linguagem estrutural, ou seja, é - ou deveria ser - usada para
estruturar textos através de tags. A tag table deveria ser usada tão somente
com a finalidade de apresentar dados dentro de uma tabela com linhas e
colunas.
Mas desde que as tabelas foram implementadas no HTML elas tem sido
amplamente usadas para montagem de layouts e muito comumente para
compartimentar uma página web em colunas. Ao fato de que este uso das
tabelas contraria sua finalidade (seu propósito semântico) soma-se ainda várias
outras desvantagens, entre elas notadamente a dificuldade de um parseamento
adequado na renderização das tabelas em determinados contextos (usuários
com necessidades especiais, agentes de usuários com restrições,..
A técnica descrita a seguir foi usada para construir a página para novos
usuários do W3C ( page for new W3C users ) e permite criar um layout de 3
colunas com as seguintes características:
Os textos da coluna central são escritos no início do código da página o que
significa "aparecer" no topo da área de visualização, quando a página é
renderizada em um browser sem suporte ou com CSS desabilitada
seguem-se as colunas esquerda e direita, nesta ordem
Isto é ideal para Home Pages já que dispõe o texto no centro e as listas de
links (menus de navegação) nas laterais.
Uma restrição para este tipo de layout é que ele não funciona bem em agentes
de usuário com suporte precário para CSS, contudo a página permanece
perfeitamente legível em um tradicional layout vertical.
Esta página que você está lendo usa este tipo de layout e assim você pode ter
uma ideia de como é o layout.
Criação de botões animados
Gráficos vetoriais que compõem a aparência do botão são criados usando
Extensible Application Markup Language (XAML). XAML é semelhante ao
HTML, exceto que é mais poderoso e extensível. Extensible Application Markup
Language (XAML) podem ser digitados em manualmente usando o Microsoft
Visual Studio ou o bloco de notas, ou você pode usar uma ferramenta design
visual sistema autônomo o Microsoft expressão Blend. Expression Blend
funciona criando código XAML subjacente, para ambos os métodos são os
mesmos gráficos.
Personalização de templates
Na tela Templates você poderá personalizar suas templates do jeito que
desejar.
Iremos explicar como personaliza-las.
Templates para smatphone
Alterar cabeçalho e rodapé
Alterar cor e imagem de fundo
Alterar cor de fundo do conteúdo
Alterar cor de fonte e tamanho
Técnicas de CSS
Teoricamente qualquer elemento HTML capaz de descrever texto ( p, h1, h2,
..., ul, ol, etc...) poderá ser estilizado para construção de menus. No entanto,
dentre todos eles, o elemento semanticamente correto e indicado e que maior
flexibilidade, recursos e facilidades propiciam a estilização são sem dúvida
aqueles elementos que definem as listas, quer sejam de definição dl, quer
ordenadas ol quer ul que define as listas não ordenadas .