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

Webmonster: O Senhor dos Requests

JSONP e o “Ajax Crossdomain”

Os serviços para intercâmbio de dados entre aplicações via protocolo http alcançaram algum nível de maturidade nesses últimos anos. Hoje, já sabemos como disponibilizar serviços via web, já existem abordagens que funcionam, outras vão sendo experimentadas. O fato é que existem diversas APIs disponíveis na web para atender as mais variadas necessidades: Agenda, mapas, autenticação de usuários, integração com redes sociais, enfim. Serviços públicos, serviços pagos, serviços com mais de um plano de licensiamento para atender mais de um tipo de consumidor. Hoje qualquer um pode criar sua api e colocar na web e ganhar (se quiser) seu dinheirinho com aquilo.

Em meio às tecnologias para troca de dados e comunicação entre aplicações pela web como REST, SOAP, WSDL etc, se destacam também as APIs que fornecem dados com simples requisições http diretamente do site via browser, sem a necessidade de processamento do lado do servidor pelo cliente do serviço. Para esses casos temos o JSONP como uma alternativa “bem em conta” para resolver problemas conhecidos. O objetivo desse post é dar uma introdução do que é e como usar o JSONP.

mais…

SVG vs CANVAS

Como você deve ter notado em meu post anterior sobre HTML5 (http://afronteirafinal.com/prepare-se-para-o-html-5), eu abordei sobre SVG e Canvas e nas últimas semanas os debates estão se aquecendo sobre os méritos de cada um, e muitos estão prevendo um “death match”. No entanto, minha pesquisa me convence de que cada um tem suas próprias finalidades, mas definitivamente chegou a hora de usá-los.

O QUE É SVG?

SVG é uma linguagem para descrever gráficos bidimensionais e aplicações gráficas em XML. Alguns exemplos de SVG são: o logo da Wikipedia (http://upload.wikimedia.org/wikipedia/commons/7/77/Wikipedia_svg_logo.svg) e o “Hello World” do SVG chamado de “Tiger” (http://www.amplesdk.com/examples/svg/tiger). Veja o fonte desses dois arquivos SVG para ver como SVG parece. mais…

Webmonster: Youtube