Artigos
Do mundo virtual para o real
Apr 21st
Febre no mundo todo, mas principalmente no Brasil, as redes sociais são um recurso cada dia mais usado pelos frenéticos internautas que sentem a necessidade constante de compartilhar com outras pessoas tudo o que fizeram, fazem e irão fazer no seu dia a dia.
É exatamente isso que o Olhar Digital demonstra nesse artigo muito interessante e bem bolado, citando exemplos práticos e reais de como utilizar de forma inteligente esse recurso que veio para ficar, sem sombra de dúvidas. Clique na imagem abaixo e leia o artigo que está dividido em três páginas.
E por hoje é isso. Até o próximo post.
7 erros comuns no webdesign
Jan 14th
Este texto é original do Tom Kenny, e vi traduzido no blog do Bruno Ávila. Aproveitei e inseri alguns comentários meus pro meio também. Vale a pena conferir, são dicas muito boas para quem quer aprender e crescer na profissão webdesign.
1. Uso desnecessário do Flash
Tom diz que o flash pode ser muito bem utilizado, como animações isoladas ou ferramenta de vídeo streming. Mas que as desvantagens do uso do flash são inúmeras quando mal empregadas. Seu uso no menu por exemplo, deixa o site menos acessível, principalmente para buscadores como o Google.
Uma boa opção que temos hoje para animações que não seja em flash, é a biblioteca JavaScript chamada jQuery. Esta linguagem nos da muitas opções de animações de menu – veja 12 exemplos que postei anteriormente aqui no ueb3 – e ainda mantém totalmente acessível aos buscadores.2. Ferramenta de busca que não presta
Quem tem um site hoje sem ferramenta de busca tá perdendo leitores. É importantíssimo uma boa ferramenta de busca no seu site. E isso é fácil de resolver, sites como o Google fornecem esse serviço de busca especialmente para o seu site, dê uma olhada. Hoje só não tem busca no seu próprio site quem não quer, afinal o serviço é grátis e poderoso.
3. Imagens ruins
Segundo Kenny, hoje temos dois tipos de imagens ruins quando se trata de web design. A primeira é o uso de imagens que são desinteressantes ou irrelevantes. Boas Imagens podem transmitir um significado mais rapidamente e passar uma mensagem de forma muito eficaz.”Uma imagem vale mais que mil palavras”, o que é especialmente verdadeiro quando se trata de web design.
A segunda é a qualidade das imagens, de compressão pesada tornando imagens borradas, ou então imagens redimensionadas ficando esticadas ou esmagadas, alterando sua relação de aspecto. Alguma das situações acima, é inaceitável nos dias de hoje mas infelizmente ainda muito frequente.
Existem inúmeros programas gratuitos para edição e compressão de imagens. Sabendo usar as imagens corretamente eu seu site, com certeza este será visto com outros olhos e lhe trará uma quantidade muito maior de visitantes.4. Uso de URLs estranhas
Tom lembra ainda dos links confusos gerados principalmente por sistemas de gerenciamento de conteúdo. Links como www.exampleurl.com/?p=52 não querem dizer nada, nem a você nem aos motores de busca, o que pode ser prejudicial, por exemplo, na colocação do ranking de resultados do Google.
O ideal é sempre utilizar as chamadas “url’s amigáveis”. Nelas sempre consta o nome da página ou artigo que está aberto no momento (veja o exemplo no próprio blog do ueb3). Normalmente CMS’s como WordPress e Joomla dão a opção para url amigável.5.A falta de uma mensagem clara
É importante que o visitante entre no seu site e perceba em poucos segundos do que se trata. É frustrante entrar num site e não entender logo na capa o que aquilo ali faz. Às vezes basta um pequeno slogan junto da logo ou então uma imagem do produto em questão. Não é necessário muita coisa e firula não, basta mostrar a ‘cara’ do site na página inicial, e o conteúdo detalhado fica para as páginas internas.
6. Não entender as necessidades do cliente
Nesse caso o cliente que Tom se refere é o seu cliente, aquele que te contratou para fazer o site e não o cliente do seu cliente.
É fundamental que você compreenda o que o seu cliente precisa e como funciona o produto ou serviço que ele oferece. Entendendo o que seu cliente quer, principalmente através de um briefing bem feito, possibilitará que você apresente um trabalho dentro do esperado, evitando assim que o cliente diga “Não gostei, faça de novo”.
99% das vezes que o cliente manda voltar pra casa para fazer um novo layout é culpa do web designer que não entendeu o que o cliente queria e fez algo completamente diferente do esperado. Por isso costumo dizer que o briefing é a etapa mais importante de uma criação para a web.
Tudo bem, eu sei que muitas vezes o cliente não sabe muito bem o que quer em relação as cores e tudo mais, mas isso você deve ter de explicar o porque de cada coisa. Certa vez tive um cliente que queria a logo no topo direito e um banner de publicidade do topo esquerdo. Neste caso, cabe ao webdesigner explicar que o topo esquerdo é um padrão internacional para identificação do dono do site.
O trabalho do webdesigner é montar um quebra cabeças. Pegar todas as necessidades do cliente – através do briefing - e montar dentro do layout como se fossem peças. Todas encaixadas e em harmonia.7. Ignorar o Internet Explorer
Mesmo que você use o Firefox, Safari ou outros para trabalhar e fazer seus testes, na hora de colocar no ar é importante adaptá-lo ao Internet Explorer, afinal a grande maioria dos usuários comuns ainda utilizam IE como navegador principal. Tom Kenny afirma: “A maioria dos usuários sequer sabem o que é um navegador”.
Como em todas as profissões, a de webdesigner também tem seus pontos ruins, e eu as considero: IE6, IE7, IE8…hehe
O que acharam?
Opinião: Perguntas a fazer antes de reconstruir seu site
Sep 21st
Eu não presto consultoria, mas isso não impede que as pessoas me façam perguntas. A questão mais comum que as pessoas me perguntam quando elas querem um novo website é “se você fosse o responsável por ele, quais seria as 2 ou 3 pessoas com quem você certamente conversaria – para ajudar a pensar nos problemas, ajudar a escolher quem fará o trabalho, etc ?”
A segunda pergunta mais comum que me fazem é “Além do site da Apple, há outros 2 ou 3 que você acha realmente atrativo e que funciona bem para o negócio?”
Eu acredito que essas deveriam ser, talvez, a décima ou décima primeira questões a serem feitas, não as duas primeiras. Aqui está a minha lista de perguntas difíceis e importantes que você deveria fazer antes de gastar um centavo:
- Qual o objetivo do site?
- Em outras palavras, quando estiver funcionando muito bem, quais efeitos ocorrerão?
- Quem estamos tentando agradar? Se é a chefe, o que ela quer? Impressionar um tipo de pessoa é importante? Mas que tipo?
- Quantas pessoas da nossa equipe terão que ser envolvidas? Em quais níveis?
- Quem estamos tentando alcançar? Todo mundo? Nossos consumidores? Um certo tipo de prospect?
- Quais os sites com os quais esse grupo gosta de interagir?
- Estamos tentando fechar vendas?
- Estamos contando uma história?
- Estamos conquistando permissão para interagir?
- Estamos esperando que as pessoas assistam ou aprendam?
- Precisamos de pessoas para espalhar nossa mensagem nas mídias sociais?
- Estamos construindo uma tribo de pessoas que usarão o site para se conectar uns aos outros?
- As pessoas encontrarão o site através do boca a boca? Estamos tentando responder a uma pergunta específica?
- Haverá notícias e atualizações futuras que precisarão ser apresentadas às pessoas?
- O site é parte de um conjunto maior de lugares online nos quais podemos ser encontrados ou é nossa única plataforma online?
- As informações do site exigem uma banda maior ou são poucos dados apenas?
- Queremos que as pessoas nos telefonem?
- Quantas vezes no mês queremos que as pessoas venham até o site? Por quanto tempo?
- Quem deverá atualizar o site? Com que freqüência?
- De quanto em quanto tempo temos condições de refazer ou aprimorar esse site?
- É importante aparecermos nos mecanismos de busca? Se for, a partir de quais termos? A qual custo? Estamos dispostos a abrir de mão de alguns dos pontos acima para atingir esse objetivo?
- O site terá acesso universal? Poderá haver problemas de compatibilidade de browser ou idioma?
- Quanto dinheiro temos para gastar? Quanto tempo?
E, por último,
- A organização entende que “tudo” é uma opção que não existe?
*Seth Godin é um dos mais populares “gurus” do marketing na atualidade, autor de diversos livros e de um dos melhores blogs sobre o assunto.
Fonte: CHMKT
O que é Tableless?
Sep 11th
A Web foi criada para ser um ambiente onde fosse possível trocar informações livremente, e que essas informações pudessem ser acessadas ao redor do planeta por qualquer pessoa. Em 1994, foi criado o W3C (World Wide Web Consortium): um consórcio internacional, onde são desenvolvidas os padrões para a web (Web Standards) tais como: HTML, CSS, XML, XSLT, entre outros.
Naquela época, no mercado de browsers, as opções ainda eram poucas: consistiam apenas em Lynx, Mozaic e Netscape Navigator, da Netscape Communications, então liderada por James Clark. A Microsoft, de Bill Gates, resolveu entrar nesse mercado lançando o Internet Explorer. A partir daí, o Netscape e o Internet Explorer começaram a travar uma guerra atrás de adeptos. A concorrência entre os dois browsers é chamada até hoje de Guerra dos Browsers. Durante essa “guerra”, os padrões do W3C ainda eram meros rascunhos. Por conta disso, as duas empresas que não podiam esperar que esses rascunhos ficassem prontos começaram a lançar seus browsers com padrões proprietários.
Agora o impasse: Os browsers tinham seus próprios padrões… Já os desenvolvedores não conseguiam criar um único código que funcionasse nos dois navegadores. Por este motivo, eles eram obrigados a desenvolver, na maioria das vezes, para apenas um browser.
Isso trouxe mais um problema, agora para os usuários. O usuário que usava Netscape, não conseguia acessar sites que eram feitos para Internet Explorer, e vice-versa.
Como a web não tinha sido projetada para desenvolver os criativos ambientes gráficos que temos atualmente, naturalmente, os recursos de desenvolvimento eram limitados e os criadores faziam das tripas coração para criar seus sites. Entre as muitas idéias que surgiram para ultrapassar ao ambiente de “apenas texto” da internet, estava aquela de utilizar tabelas de HTML para posicionar os elementos no layout, utilizando slices de imagem, gifs transparentes e a técnica de aninhamento de tabelas para contornar os problemas que os padrões proprietários traziam. A esse tipo de técnica, que foi usadapela maior parte dos websites, chamamos de layout com tabelas.
Os sites que seguem os Padrões Web utilizam uma metodologia de desenvolvimento baseado em 3 camadas, são elas:
- Informação – A informação do site é exibida utilizando código XHTML ou HTML.
- Formatação – O XHTML que exibe a informação é formatada com CSS (Folhas de Estilo). É com CSS que comandamos todo o visual do site. Tudo que é visual e decorativo deve ser feito por CSS.
- Comportamento – Definida por Javascript e AJAX. É a camada que define como os elementos irão se comportar de acordo com as ações do usuário.
Em poucas palavras: um site tableless é um site que não utiliza tables para a estruturação do Layout. É um site que segue os Padrões Web.
O termo “tableless” é usado mais largamente aqui no Brasil. Em outros países outros foram mais difundidos, por exemplo: CSS Layouts.
Um site tabeless segue obrigatoriamente regras de semântica. Cada tag tem sua função própria. Por exemplo, para criar um parágrafo de texto, usamos a tag <p></p>. A tag Table e suas filhas são utilizados para exibir dados tabulados, por exemplo, uma listagem de produtos, onde são mostrados algumas informações sobre o produto como tamanho, preço, cor, material, disponibilidade, etc…
| Tênis | Cor | Tamanho | Preço | Disponibilidade |
|---|---|---|---|---|
| Nike | Preto | 38-39 | R$ 100,00 | Em Estoque |
| Adidas | Branco | 40-41 | R$ 120,00 | Esgotado |
Formatar informações dos sites não é algo novo. Por volta de 1970, no começo da tragetória do SGML, vários browsers já personalizavam as aparências dos documentos, cada um com seu estilo próprio.
Håkon Wium Lie, estudava e percebia as dificuldades que se tinham ao desenvolver um site, e resolveu criar uma maneira fácil para formatar a informação do HTML. Foi aí que ele propôs a criação do CSS ou Cascading Style Sheets. Esse era o ano de 1994.
Em 1995 eles apresentaram sua proposta e finalmente, o W3C – World Wide Web Consortium – que estava acabando de nascer, se interessou pelo projeto e resolveu criar uma equipe, obviamente liderada por Håkon e Bert Bos. O resultado apareceu logo, em 1996, eles lançaram a recomendação oficial pelo W3C do CSS Level 1 (CSS 1).
Dois anos depois, no dia 12 de Maio de 1998, eles lançaram a recomendação do CSS de nível 2. A segunda versão das Folhas de Estilo para web.
Hoje em dia, o nível de compatibilidade entre os browsers é muito parecido, de forma que se você implementar algo específico em um browser, é muito provável que em outro browser esteja igual.
Portanto, o desenvolvedor pode ficar tranqüilo quanto a maioria dos problemas causados por diferenças entre browsers.
Fonte: www.tableless.com.br
Prepare-se para a Revolução
Sep 11th
O W3C mudou. Isso vai modificar todo um fluxo de trabalho e a velocidade das implementações dos browsers e a forma com que os desenvolvedores trabalham.
O W3C foi criado exatamente para homologar, regularizar e criar novos padrões de publicação de informação na internet. O trabalho do W3C é exatamente criar caminhos para que os desenvolvedores e os fabricantes de browsers possam trilhar no futuro. Acontece que o W3C ficou tão grande, tão lerdo, tão aficcionado pelos problemas do futuro que acabou se perdendo nos seus próprios sonhos.
Um dos objetivos do W3C – se não o maior objetivo – é organizar toda a informação da internet. Para fazer isso, precisamos identificar toda essa informação de forma que a extração não seja complexa, pelo contrário, de maneira que a toda a informação que precisarmos possa ser extraída rapidamente, fácil e de qualquer tipo de dispositivo ou aplicação. Por isso, o W3C perdeu muito tempo criando padrões como RDF, por exemplo. Não desmerecendo essas tecnologias, que aliás são bem úteis para nos hoje. Mas cá entre nós, fazer bordas arredondadas para mim, hoje, é mais importante do que algumas necessidades de semântica.
Alguns dos desenvolvedores, a grande maioria gringos, também tinham essa visão. A necessidade de grande parte dos desenvolvedores eram ter coisas simples como suporte a PNG, bordas arredondadas, resize de imagem no background, colocar várias imagens de backgrounds em um elemento, css animation, e assim por diante. Por isso, muitos desenvolvedores começaram reinvidicar uma alteração de prioridades. O HTML 5 surgiu daí. Muitos se enganam se acham que o HTML 5 foi idéia original do W3C. Ele surgiu de um grupo de inconformados de o HTML não ter a pelo menos 10 anos, uma nova atualização. Então começaram a estudar e a escrever um novo padrão para a linguagem. Isso surgiu de uma união de desenvolvedores da Apple (Safari/Webkit), Mozilla e Opera. Muitos se enganam também, se acham que só o W3C pode criar padrões. Você pode criar um. Se vai haver suporte da comunidade, do W3C e dos fabricantes de browsers, é outra história. Mas você tem todo o direito de criar.
O grupo do HTML 5, queria mudar. Eles estavam cansados de usar uma tecnologia antiga e começaram a fazer o trabalho que se esperava que o W3C fizesse. Por fim, essa iniciativa ganhou tanta popularidade e ajuda de outros desenvolvedores, que o W3C resolveu abraçar a idéia e hoje ele cuida desse padrão.
O CSS3 também começou a aparecer por que o W3C abriu os olhos e resolveu começar a revolucionar a linguagem.
O W3C mudou. Os times que cuidam dessas linguagens foram divididas. Modularizadas. Deixe-me explicar. O CSS3 não será mais lançado de uma vez, mas em módulos. Há um time que cuidará da propriedade background. Outra que cuida da propriedade position, outra que cuida da propriedade border, e assim por diante. Isso possibilita que cada módulo, cada propriedade, cada parte do CSS seja lançado independentemente, acelerando o processo de suporte dos browsers e utilização pelos desenvolvedores. Logo, não há mais aquela história de “Browser tal não suporte CSS3”. Mentira, ele suporta, mas algumas das funcionalidades. A mesma coisa acontece com o HTML5. Dizem que o IE8 não suporta HTML 5, mas é mentira. Ele suporta partes do HTML 5. Já há vários módulos implementados no IE8, que fazem parte da especificação do HTML 5. Isso também acontece com os outros browsers.
A web vai ficar mais dinâmica agora. O CSS 3 e o HTML 5 vieram para separar o joio do trigo. Os designers não vão mais ficar pintando quadradinhos como antes. O CSS está virando uma linguagem visual de verdade. Há, por exemplo, working drafts de suporte a variáveis no CSS. E isto é só o começo.
A mesma coisa para o HTML 5. A mudança das tags estruturais do HTML é apenas a ponta das novas possibilidades. Para o pessoal que achava que o HTML é coisa de criança, se prepare, porque o buraco, agora, é mais embaixo.
Fonte: Tableless





