Responsive Website: O que é isso e Como usar?

Nos dias de hoje quase todos os novos clientes querem uma versão mobile do seu site. E para isso é preciso antes de tudo: uma design para o BlackBerry, outro para o iPhone, outro iPad, Netbook, Kindle – e todas resoluções tela devem ser compatíveis. Nos próximos cinco anos, vamos provavelmente precisar de design adicional para as próximas invenções. E quando irá parar esta loucura? A resposta é nunca!

Na campo do web design e desenvolvimento, estamos rapidamente chegando ao ponto de ser incapaz de prosseguir com as resoluções infinitas e novos dispositivos. Para muitos websites, foi criando uma versão website para cada resolução e novo dispositivo seria impossível, ou pelo menos impraticável. Devemos apenas sofrer as conseqüências de perder visitantes de um dispositivo? Ou existe outra opção? mais…

SEO – exemplo de estrutura de texto

Mais um artigo sobre SEO, este um pouco mais voltado para os amigos redatores.

Como tudo mais nessa fina arte, há algumas receitas para atrair mais pessoas também na forma como se escreve o texto. E, como tudo nessa vida, deve ser usada com parcimônia – não vá fazer um texto muito quadrado, voltado somente para o buscador. Lembre-se: você tem que ser achado, mas um texto de qualidade é o que fará a pessoa voltar ao seu site (senão eu aplicava 100% das regras a seguir nos meus próprios posts e fazia este blog viver de buscadores), ter milhares de acessos do buscador é só um número inflado de leitores que não trarão nenhum benefício para seu produto. mais…

Receita purê de maçã para microondas

Se você não entendeu o que este texto está fazendo aqui no meio a uma explicação de SEO leia este aqui primeiro.

Purê de maça é um acompanhamento típico da cozinha holandesa e da alemã. É uma excelente opção para servir com carne de porco (como pernil e salsichas) ou aves. Recomenda-se servir o purê de maça e à carne junto a purê de batatas, que fará contraponto ao doce da maçã e dá um sabor especial a todo o conjunto.

mais…

iPad: estamos usando direito?

Tirando o pó do blog…

Resolvi escrever algumas impressões a respeito de iPad por dois motivos: primeiro por recentemente ter visto uma palestra a respeito de como os designers gráficos estão migrando as revistas impressas para suas versões online. O segundo motivo foi o bem humorado artigo do amigo Rogério Fratin sobre a não-exploração dos recursos do iPad enquanto plataforma,  tornando este meio algo só um pouquinho mais sofisticado que qualquer dispositivo que tenha um Adobe Reader instalado – só que muito mais caro.

De cara já quero por em xeque a afirmação que vi em alguns lugares dizendo que o iPad é o substituto do notebook/desktop: isso é besteira da grossa, se considerarmos todos os contextos. Um tablet tem tudo para substituir um notebook no caso do usuário comum, aquele sujeito que usa seu computador para apresentar um PPT, jogar, ler emails e usar algumas funções organizacionais (como agendas ou acompanhamento de dados interfaceados), enquanto o notebook continuará encarregado de tudo isso (com uma experiência de usuário mais simples) mais a realização de tarefas que exijam maior complexidade, como tratar imagens, diagramar, programar, gerar wireframes, ilustrar, gerenciar sistemas de interfaces mais complexas ou via terminal, etc.

Mas não é este meu ponto ainda.

Como qualquer outra mídia nova, as pessoas responsáveis pela gênese dos que será divulgado a partir dela usam o mesmo processo de sempre: usam como base algo que já existia, até que a novidade comece a criar sua própria identidade – foi assim a transição do jornal impresso pro rádio, do rádio pra TV, da TV/Rádio/impresso para os videogames e computadores e todas derivações e variações em torno destas mídias. mais…

O real valor da validação HTML

Hey!

Não é comum usar o blog para isso, mas neste caso achei que valia muito a pena abrir uma exceção.

Há muito pensei em escrever a respeito de validação HTML, prós e contras, mas acabei deixando de lado por falta de tempo para pesquisar mais a fundo e acabei esquecendo do assunto.

Contudo, hoje me passaram no twitter um excelente artigo intitulado “The value of HTML validation“, escrito por Nicholas C. Zakas falando de tudo que eu gostaria de escrever e indo muito além.

Fica a recomendação.

Google Wave – a onda que não pegou

Hoje na hora do almoço conversamos a respeito da morte do Google Wave. Como uma coisa que era prometida como a próxima grande revolução da internet pôde dar tão errado? Há uma gama razoável de recursos úteis (aliás, este artigo, como outros do blog, foi escrito usando o Wave como editor), uma empresa forte por trás e um grande potencial de expansão. Por que, então, ficou tão abaixo mesmo da pior das expectativas?

mais…

SEO Sem Crise – Parte 4 – Relevância por links

Só pra recapitular:

Na primeira parte dei uma visão simples e geral sobre o que é SEO.

Na segunda, falei sobre o que é e pra que servem as Meta Keywords .

No terceira, o por quê de ainda preocupar-se com Meta Description e o motivo de te-la bem feita.

Nesta parte, a última desta sequência, vou explicar como pode-se “pegar carona” na relevância de outros sites através de links.

Aumentando a relevância por links

Daí o cidadão vai lá e pergunta como fazer o texto dele “subir no Google” e, alguém com um pouco mais de manha, sugere para selecionar as palavras chaves e nomes e linkar para sites externos. O cidadão olha torto e solta os cães, dizendo coisas como “que absurdo, colocar links para sites externos, isso vai tirar os leitores do nosso site e mimimi mimimim mimimim mimimim mimimimimi”.

mais…

SEO Sem Crise – Parte 3 – Meta Description

Voltando ao assunto de SEO, depois de um loooongo tempo…

Vamos falar um pouquinho mais de meta-tags, mais especificamente da meta description.

Meta Description

O nome é auto-explicativo: é uma descrição do texto que segue, enfatizando os principais pontos. Deve ser o mais resumido possível afim de evitar penalização (algo em torno de 150 caracteres) e deve ir, como as outras metas, dentro da tag head. mais…

Saiba mais sobre DOM e ECMAScript

Por muito tempo eu fingia saber exatamente o que era DOM, ECMAScript, JScript, DHTML, etc significava. Mas num final de semana desses eu peguei para ler sobre o que eles significam e como eles estão relacionados.

Esta é a forma como a especificação DOM define um “DOM”:

O Document Object Model (DOM) é um Application Programming Interface (API) para HTML válido e documentos XML bem formatados. Ele define a estrutura lógica dos documentos e o modo como um documento é acessado e manipulado.

mais…

@font-face – Tipografia livre

A propriedade @font-face do CSS possibilita aos browsers renderizar fontes que não estão instaladas no computador do usuário. Exemplo:

@font-face{
	font-family:'Comic Book';
	src:local('Comic Book'),url('Comic Book.ttf') format('TrueType');
}
p{font-family:'Comic Book',arial,helvetica,sans-serif}

Valores:

• O valor “local” informa se a fonte já existe no sistema operacional do usuário antes de ser instalada
• O valor “url” informa o caminho da fonte que será instalada
• O valor “format” informa qual é o formato da fonte que será instalada

Formatos:

Os formatos aceitos pelos browsers são:

• Embedded OpenType – .eot
• OpenType – .otf
• Scalable Vector Graphics – .svg e .svgz (formato .svg “gzipado”)
• TrueType – .ttf

O Internet Explorer suporta apenas o formato Embedded OpenType (.eot), portanto deverão ser declarados dois formatos, sendo um exclusivo para as versões do Internet Explorer (.eot) e/ou outro(s) para os demais browsers (.otf, .svg, .svgz e .ttf). Exemplo:

@font-face{
	font-family:'Comic Book';
	src:url('Comic Book.eot'); /* IE */
	src:local('Comic Book'),url('Comic Book.ttf') format('TrueType'); /* DEMAIS BROWSERS */
}
p{font-family:'Comic Book',arial,helvetica,sans-serif}

Exemplo declarando outros formatos:

@font-face{
	font-family:'Comic Book';
	src:url('Comic Book.eot'); /* IE */
	src:local('Comic Book'),
	    url('Comic Book.otf') format('OpenType');
	    url('Comic Book.svg') format('Scalable Vector Graphics');
	    url('Comic Book.svgz') format('Scalable Vector Graphics');
	    url('Comic Book.ttf') format('TrueType')
}
p{font-family:'Comic Book',arial,helvetica,sans-serif}

Compatibilidade:

A propriedade @font-face é compatível com os principais sistemas operacionais e browsers (inclusive o Internet Explorer 6):

• Linux – Chrome e Firefox
• Mac OS – Chrome, Firefox, Opera e Safari
• Windows – Internet Explorer 6, 7, 8 e 9, Chrome, Firefox, Opera e Safari

Talvez ajude…

• @font-face Generator – Gerar fontes para outros formatos
• Free Font Converter – Converter fontes para outros formatos