Ele traz uma API de banco de dados SQL Web, por enquanto ainda é uma especificação separada do HTML 5, mas já introduz um conjunto de APIs para manipular base de dados do lado do cliente utilizando SQL.

Estamos supondo que você já conheça e trabalhe com o SQL, mas caso não saiba o que é, recomendamos um mini curso de MySQL.

Por enquanto, Web SQL Database está suportado nas últimas versões do Chorme, Safari e Opera.

Esta postagem é baseada no artigo em inglês: Web SQL Database

Os métodos principais:

Há três seguintes métodos fundamentais definidos na especificação de que vamos mostrar nesta postagem:

1. openDataBase: Este método cria o objeto de banco de dados, depois utiliza um banco de dados existente ou criar um novo.
2. transaction: Este método controlar a transação e  nos retorna uma confirmação ou anulação com base no que foi executado.
3. executeSql: Este método é usado para executar um consulta SQL.

Abrindo Base de dados:

O openDataBase método cuida da abertura de um banco de dados se ele já existe, este método irá criá-lo se ele não existe.

Para criar e abrir um banco de dados, use o seguinte código:

var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);

Acima método tem quatro parâmetros:

1. Nome do banco
2. Número da versão
3. Descrição de texto
4. Tamanho da base de dados

Execução de consultas:

Para executar uma consulta, deve ser utilizado a função database.transaction (). Esta função precisa de um único argumento, mas pode ser passado o 2º e 3º parametro para verificar se foi completado com sucesso o comando, segue exemplo de duas consultas, uma simples e outra debugando:

var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);

// Simples
db.transaction (function (tx) {  
   tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log)");
});

// Debugando
db.transaction (function (tx) {  
   tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log)",
       function(tx){
           /*Sucesso*/
       },
       function(erro){
           /*Error*/
       });
});

As consultas acima irão criar uma tabela chamada LOGS na base de dados “Teste’.

Inserir dados:

Para inserir dados  na tabela, utilizamos a função transaction() também, só que, desta vez com o INSERT para popular a tabela, veja o exemplo:

var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);

db.transaction (function (tx) {
   tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log)");

   // Os 3 null represetam
   // 1º - Um array contendo dados
   // 2º - Função para sucesso
   // 3º - Função para Erro
   // Vamos explicá-los mais abaixo
   tx.executeSql ("INSERT INTO LOGS (log) VALUES ('Resultado do Log de Teste 01') ", null, null, null);
   tx.executeSql ("INSERT INTO LOGS (log) VALUES ('Resultado do Log de Teste 02') ", null, null, null);
});

Também podemos passar valores dinâmicos, utilizamos a seguinte sintaxe:

var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);

db.transaction (function (tx) {

  var novo_log = 'Resultado do Log de Teste 01';

   // Os 3 null estão sendo mostrados aqui
   // 1º - Um array contendo dados, estamos passando apenas um valor com o novo_log
   // 2º - Função para sucesso
   // 3º - Função para Erro
   // Vamos explicá-los mais abaixo
  tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log)");
  tx.executeSql ("INSERT INTO REGISTROS (log) VALUES (?)",[novo_log],null,null);						
});

Aqui novo_log é uma variável e executeSql mapeia cada item no argumento de matriz para o “?”, isto é, poderíamos ter vários “?” e no final teríamos [var_1,var_2,var_3], sendo que, ele utilizará a ordem exata das variáveis para popular a query.

Lendo os dados:

Para ler os registros já existentes usamos um callback para capturar os resultados da seguinte forma:

var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);

db.transaction (function (tx) {
    tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log TEXT)",null,null);
    tx.executeSql ("INSERT INTO LOGS (log) VALUES (?)",['Resultado do Log de Teste 01'],null,null);
    tx.executeSql ("INSERT INTO LOGS (log) VALUES (?)",['Resultado do Log de Teste 02'],null,null);
});

db.transaction (function (tx) {
   tx.executeSql ('SELECT * FROM LOGS', [], function (tx, results) {
   var len = results.rows.length, i;
   msg = "<p> Registros encontrados:" + len + "</ p>";
   for (i = 0; i <len; i ++) {
      console.log(results.rows.item(i) .log);
   }
 }, null);
});

Exemplo final:

Então, finalmente, vamos  criar um exemplo em HTML 5,  este exemplo está funcional e testado no Chrome versão Versão 39.0.2171.71 m.

var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);

db.transaction (function (tx) {
    tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log TEXT)",null,null);
    tx.executeSql ("INSERT INTO LOGS (log) VALUES (?)",['Resultado do Log de Teste 01'],null,null);
    tx.executeSql ("INSERT INTO LOGS (log) VALUES (?)",['Resultado do Log de Teste 02'],null,null);
   console.log('Log mensagem criada e linha inserida');
});

db.transaction(function(tx){
    tx.executeSql(       
        "SELECT * FROM LOGS",
        [],
        function(tx, result){
            console.log('Deu certo!');
            var len = result.rows.length, i;
            for(i=0;i<len;i++){
                console.log( result.rows.item(i) );
            }
        },
        function(tx, error){
            console.log('Deu errado!');
            console.log(error);
        }
    );
});

Isso produziria o seguinte resultado:

Log mensagem criada e linha inserida
Deu certo!
Object {id: 1, log: "Resultado do Log de Teste 01"}
Object {id: 2, log: "Resultado do Log de Teste 02"}

Conclusão:

É bem simples utilizar e depende apenas de um pouco de treino, nos testes detectamos que a sua persistência é como uma sessão, ao fechar o browser perde-se o objeto, mas ao trocar de página dentro do mesmo domínio o mesmo permanece.

Já pensou em utilizar esta nova funcionalidade com o evento onBeforeUnload para rastrear todo o caminho que um usuário caminhou dentro do seu site? A utilização ficará por conta da imaginação de vocês.

Um exemplo que encontramos no GitHub e que vale a pena ver:
Link original do código aqui.

https://gist.github.com/andyj/1599544

Link de uma aplicação feita com Web Sql.
HTML5 webSQL app synching with a php MySQL server

Se gostaram, compartilhem e façam comentários, sugestões, correções e correções sempre são bem vindas. A Turbosite tem o comprometimento em divulgar conhecimento!

Quer servidores Seguros, Estáveis, com uptime de 99,9%, no Brasil e de baixo Custo? A Turbosite é sua resposta.

Hospedagem de Sites, Data Center e Registro de Domínio Grátis só aqui!

Sintaxe, semântica e vocabulário. Parece até aula de português, mas é desenvolvimento web! Neste artigo vamos analisar como todos estes conceitos podem te ajudar a melhor o ranqueamento em mecanismos de busca, facilitar a vida do seu usuário e dar significado ao seu conteúdo na internet.

Squema em grego quer dizer forma, plano ou modelo. Já schema.org é uma série de tags xml utilizadas para fornecer informações extras sobre o conteúdo da internet para mecanismos de busca. Ou seja, pequenos trechos de código que ajudam muito na hora das pessoas encontrarem facilmente o SEU site em meio a tantos outros na web.

A ideia de criar tags xml que apresentem informação sobre o significado de um conteúdo não é nova. Existem e já existiram no passado diversas outras iniciativas como microdados, microformatos e RDFa… Mas esta pluralidade de linguagens era justamente o que tornava difícil a adoção por parte dos desenvolvedores. Afinal, com tantos padrões diferentes que só funcionavam em um determinado contexto, como escolher o ideal? E este é justamente o diferencial do schema.org. Ele surgiu de uma ação colaborativa entre os principais mecanismos de busca do mundo, o Google, Bing, Yahoo! e o buscador russo Yandex. A adoção de um modelo mais “universal” eliminou a ramificação causada pelo uso de diferentes formatos facilitando a vida dos desenvolvedores (que não precisam mais se desdobrar entre tantas linguagens diferente) e acima de tudo, dos usuários.

Por que utilizar?

Se você souber o básico da língua portuguesa, apenas ao bater o olho em um texto como este (XX) XXXX-XXXX é obviamente um número de telefone! Mas diante de palavras como τηλέφωνο ou հեռախոս a coisa fica mais complicada, certo? Estas duas palavras também significam telefone respectivamente em grego e armênio, mas a não ser que você conheça estas línguas fica difícil de entender. É isto que acontece com os robôs de mecanismos de busca. Eles não falam bem português, grego ou armênio. Eles se esforçam o tempo todo para “adivinhar” e classificar as informações que postamos na internet, mas no final das contas acaba sendo tudo na base do chute. Um chute baseado em cálculos matemáticos complexos, mas ainda assim um chute. Para que todas as pessoas possam encontrar as informações facilmente na internet nós, desenvolvedores, precisamos dizer para os mecanismos de busca qual é o significado de um conteúdo. E podemos fazer isso através das tags propostas pelo (acho que você já adivinhou) schema.org!

Ao utilizar os padrões determinados pelo schema os mecanismos de busca saberão o número de telefone da sua empresa independentemente do contexto. E poderão mostrar esta informação no corpo do resultados de busca, facilitando a tarefa do usuário que nem precisará caçar a informação no site. E isto não funciona apenas para números de telefone. É possível marcar uma infinidade de dados como nome, endereço, email, etc.

Rich Snippets

Outra grande vantagem são os chamados Rich Snippets. Você provavelmente já viu isto por aí. São resultados de busca que contém informações extras e muitas vezes ganham formatos, cores e símbolos diferentes. Estas informações diferentes vem justamente de tags xml como que vamos aprender neste post. E mesmo que o usuário não esteja buscando exatamente a informação mostrada no rich snippet você irá ganhar mais cliques. Isto acontece devido a um conceito de teoria da percepção (gestalt) chamado segregação que diz basicamente que tudo que é diferente chama mais a atenção. Como é mais comum as pessoas “scanearem” uma página do que lerem atentamente todo o conteúdo, um resultado que se destaca mais irá consequentemente receber mais visitas. Atualmente o Google suporta rich snippets para pessoas, eventos, resenhas, produtos, receitas e navegação estrutural (breadcumbs).

Realizei uma busca no Google sobre a serie Game of Thrones. Veja uma comparação entre um resultado normal e o resultado “tunado” com rich snippets.

Se você ainda precisa ser convencido pense que alguns serviços de busca avançada como o Google Shopping e Google Recipes dependem muito de uma marcação semântica para funcionarem corretamente. E a grande tendência é esta lista crescer com o tempo.

Entendendo como funciona o schema

Se você já participou de uma mudança sabe por experiência que se não etiquetar corretamente as caixas de roupas, livros, utensílios, etc pode acabar sem encontrar um par de meias limpo na sua nova casa. O melhor, portanto, é deixar os objetos em caixas que possuem algum elemento em comum como pertencerem a um mesmo ambiente (quarto, cozinha, banheiro) ou possuírem a mesma função (sapatos, brinquedos, ferramentas). Cada caixa de mudança pode então ser considerada um conjunto de elementos que possuem um objetivo em comum. O mesmo acontece com as palavras. Elas podem ser agrupadas por terem significados em comum, ou, se você quiser usar outro termo, fazem parte de um mesmo campo semântico.

A função do schema.org é marcar o significado por trás das caixas de conteúdo na internet. Funciona basicamente como etiquetar o seu html com marcações que indicam qual é o campo semântico que aquele conteúdo faz parte. Para que isto funcionasse de maneira mais organizada foi criado uma hierarquia para o vocabulário.

O primeiro grande conjunto é “Thing” ou coisa. Mas é claro, “coisa” é muito genérico, certo? O ideal é ser o mais especifico possível. O grupo “Thing”, por sua vez, é dividido em conjuntos filhos. São eles CreativeWork (trabalho criativo), Event (evento), Intangible (intangivel), MedicalEntity (entidade médica), Organization (organização), Person (pessoa), Place (lugar) e Product (produto). Por suas vez estes grupos (ou schemas) são divididos ainda em grupos menores. Cada uma destas entradas tem ainda propriedades especificas. Lembrando que cada um dos “filhos” herdam as características dos pais. E isto é só a ponta do iceberg. Você pode e deve consultar a hiearquia completa no site oficial. Bem, vamos ver como isto fica na prática!

Por dentro dos schemas

Aviso aos navegantes! A primeira coisa a se levar em conta é que é necessário utilizar HTML5. Este tipo de sintaxe não funciona com outros doctypes! Então certifique-se que o seu documento está nesta linguagem, ok?

Para utilizar o shema.org devemos conhecer três parâmetros de micro dados que surgiram com o HTML5. Conheça seus novos melhores amigos:

itemscope – Define o escopo dos meta dados. Ou seja, anuncia para o mundo que as informações que você escrever a seguir fazem parte de um mesmo grupo de significado. Esta propriedade é inútil se você não referenciar qual é afinal este grupo! E para isto devemos utilizar o parâmetro a seguir: o itemtype.

itemtype – É a etiqueta da caixa de mudança. Define qual é o grupo do item que você está utilizando. No caso do schema.org, você sempre precisará definir uma url começando por “http://schema.org/” (por exemplo: http://schema.org/Place).

itemprop – Define as propriedades do item. Cada propriedade tem um valor esperado que pode ser um texto, numeral, url, etc. Consulte a documentação de cada itemtype que você deseja utilizar para obter uma lista completa das propriedades aceitas por cada elemento e seus respectivos valores.

Encare este post como um dicionário básico português-schema. Decorar um número de telefone de um jingle é uma tarefa impossível, certo? Sorte que existe a internet! Vamos aprender a dizer “Ei mecanismo de busca! Aqui está o telefone de emergência do hospital.”. Para isto vamos utilizar o itemtype Hospital(que compartilha características com Thing, Organization, LocalBusiness e MedicalOrganization) e dois itemprops name e telephone.

...
 
<div itemscope itemtype="http://schema.org/Hospital">
   <span itemprop="name">Hospital</span>
   <span itemprop="telephone">0118 999 881 999 199 725 3</span>
</div>
 
...

Mais um exemplo prático, por favor!

Hora de por a mão na massa. Como eu sou fã de meta linguagem vou usar este post como exemplo.

...
 
<article>
<h1>Schema.org – Dando significado ao conteúdo na internet</h1>
<h2>por Dani Guerrato</h2>
<img src="http://blog.popupdesign.com.br/wp-content/uploads/2012/09/schema-org.jpg" alt="schema.org">
<p>Sintaxe, semântica e vocabulário. Parece até aula de português, mas é desenvolvimento web! Neste artigo vamos analisar como todos estes conceitos podem te ajudar a melhor o ranqueamento em mecanismos de busca, facilitar a vida do seu usuário e dar significado ao seu conteúdo na internet. Conheça o schema.org.</p>
</article>
 
...

Como isto é um post de um blog escolhi o itemtype BlogPosting. Este schema é “filho” das categorias Thing, CreativeWork e Article.

Estas são algumas de suas propriedades:

author – pessoa ou organização responsável pela autoria do post
headline – titulo do post
articleBody- o texto do post
image – uma imagem de exibição
url – endereço da página
keywords – palavras chave

...
 
<article itemscope itemtype="http://schema.org/BlogPosting">
<h1 itemprop="headline">Schema.org – Dando significado ao conteúdo na internet</h1>
<h2>por <span itemprop="author">Dani Guerrato</span></h2>
<img src="http://blog.popupdesign.com.br/wp-content/uploads/2012/09/schema-org.jpg" alt="schema.org" itemprop="image">
<p itemprop="articleBody">Sintaxe, semântica e vocabulário. Parece até aula de português, mas é desenvolvimento web! Neste artigo vamos analisar como todos estes conceitos podem te ajudar a melhor o ranqueamento em mecanismos de busca, facilitar a vida do seu usuário e dar significado ao seu conteúdo na internet. Conheça o schema.org.</p>
</article>
 
...

Fácil de aplicar,certo?

É possível combinar e utilizar diversos itemscopes em apenas uma página. Por exemplo, na página sobre de um blog poderiamos usar o itemscope author para cada um dos colunistas. Ao encadear diversos itemscopes a coisa pode ficar meio confusa. Nesta hora é sempre bom utilizar uma ferramenta como a Google Rich Snippet tool para testar.

Uma pequena nota sobre coisas invisíveis

A esta altura vocês devem estar pensando “Hey! Você comentou as propriedades url e keywords e não usou no seu exemplo”. Eu fiz isto por que queria informar estes dados para os mecanismos de busca, mas eles não precisavam ficar visíveis para o usuário. Não seria nada semântico utilizar alguma gambiarra como divs escondidas para fazer isto… Mas existe uma saída fácil  e prática. Basta declarar estas informações utilizando meta tags. A sintaxe é bem simples: utilize itemprop e o parâmetro content para o conteúdo desejado.

...
<article itemscope itemtype="http://schema.org/BlogPosting">
<meta itemprop="url" content="http://blog.popupdesign.com.br/schema.org-dando-significado-ao-conteudo-na-internet" />
<meta itemprop="keywords" content="schema.org, SEO, microdata" />
</article>
...

Quero utilizar um itemtype que não está no schema.org. O que eu faço?

Você pode, a princípio, usar uma marcação mais genérica. Não existe um itemtype específico para programador ou desenvolvedor front-end, por exemplo, mas você pode usar person para ambos. Ou, você pode utilizar o mecanismo de expansão do schema. Vamos ver como funciona?

Para utilizar o mecanismo é necessário seguir algumas regras de sintaxe:
– Tipos e enumerações devem começar com letras maiúsculas e não conterem espaços ente as palavras. Por exemplo WebDesigner ao invés de Web Designer (padrão conhecido como CamelCase).
– Já no caso de propriedades a primeira palavra deve ser escrita com letra minuscula, mas a segunda (se existir) deverá ter letra maiúscula. Se Web Designer fosse uma propriedade deveria ser escrito como webDesigner.

Agora é a parte fácil. Basta utilizar uma barra (o caracter / ) para acrescentar o seu termo novo ao schema. Como o nosso WebDesigner é uma pessoa vamos expandir o termo “person”.

...
 
<div itemscope itemtype="http://schema.org/Person/WebDesigner">
   <h1 itemprop="name">Dani Guerrato</h1>
</div>
 
...

Acabei de dizer para o mundo que eu sou uma pessoa e uma webdesigner. Simples, né? Você pode fazer isso com qualquer itemscope. Um dos itens que mais senti falta no schema foi portfólio. Mas podemos entender portfólio como uma expansão do scope WebPage, afinal, está no mesmo campo semântico. Então bastaria utilizar http://schema.org/WebPage/Portfolio

É importante ter em mente que não é possível criar novos itens, apenas expandir as classes que já existem. Isto é uma regra que serve para manter um padrão coerente. Se você inventasse uma tag aleatória ela não teria mais nenhum vinculo com o schema.org, não seria compatível com nenhum mecanismo de busca ou browser e perderia o propósito da existência já que não teríamos nenhuma pista para entender o que você tentou escrever… Mas se você pensou em uma ideia incrível e nem o mecanismo de expansão atende as suas expectativas você pode ainda tentar sugerir um novo item através desta wiki. Lembrando que a sua proposta deverá ser bem escrita e seguir o template proposto pela wiki para ser levada em consideração com nome, descrição, exemplos concretos de uso, etc. Tudo em inglês, é claro. Ou você pode deixar um feedback no site oficial mesmo.

Informações do autor nos resultados de pesquisa

Que tal ir um passo além e utilizar rich snippets para ter o seu nome e imagem ao lado de um artigo de sua autoria nos resultados de busca do Google? O processo é bem simples, mas por enquanto só é possível para quem possui um perfil na rede social Google+. Existem duas opções para você confirmar para o Google que é o autor de verdade daquele texto:

Opção 01 – Se você tiver um endereço de email com o seu nome no seu domínio.

Primeiro certifique-se que cada artigo possua um título identificando o seu nome de maneira clara (por exemplo, “Por Dani Guerrato” ou “Autor: Dani Guerrato”). Então visite a página Autoria e envie seu endereço de e-mail ao Google. Você só precisará fazer isto uma vez, independente de quantos textos de sua autoria existirem no domínio.

Opção 2 – Se você NÃO possui um endereço de email no seu domínio

Adicione em algum lugar do seu site um link para o seu perfil no Google+. Lembrando de substituir [profile_url] pela URL de seu perfil. Não esqueça do parâmetro ?rel=author.

...
 
<a href="[profile_url]?rel=author">Seu nome</a>
 
...

O segundo passo é atualizar a seção “Colaborador de” no seu perfil do Google+ com um link de volta para o seu site. Clique em salvar.

Só lembrando que não existe nenhuma garantia. Estas informações só apareceram nas nas pesquisas que o Google achar relevante. Mas o resultado fica bem bacana! Você pode, novamente, utilizar a ferramenta  Google Rich Snippet tool para testar.

Conclusão e dicas de Leitura

No caso do schema.org é impossível fazer um bom trabalho sem consultar a documentação. Como é uma ferramenta em constante evolução vale a pena também ficar de olho no Blog do Schema.org para conferir as novidades. Se estiver procurando uma leitura em português, o post Microdata do blog Loop Infinito também trás informações bacanas a respeito.

Espero que vocês tenham gostado. Fiquem de olho para mais artigos sobre criatividade, design e desenvolvimento web.

Essa implementação resulta em um desempenho melhor em sua página, além de uma rápida implementação, já que todo o trabalho seria feito com algumas linhas de código escrito. Comparando com a clássica implementação de um loading spinner, em que era era necessário gerar uma imagem animada GIF, de vários kbytes de tamanho e com uma custosa implementação.

Listamos abaixo algumas dessas animações. Colocamos ao seu alcance o resultado, o código HTML e o código CSS para a implementação de cada spinner. Caso tenha interesse em aplicar alguma animação em seu código, basta copiar e colar o trecho do código em seu site.

Abaixo você confere alguma animações retiradas do perfil Ana Tudor do CodePen.

See the Pen CSS Loading Spinners by Ana Tudor (@thebabydino) on CodePen.

Retiramos do site Single Element CSS Spinners mais alguma animações e colocamos tudo no JSFiddle para que você possa conferi-las abaixo. Caso você tenha interesse em alguma animação, recomendamos que visite a página do site para o código avulso.

Por último retiramos do site CSS Spinners mais algumas animações. Mais uma vez juntamos todas as animações no JSFiddle para que você possa conferí-las ao vivo logo abaixo. Caso você tenha interesse em alguma animação, recomendamos que acesse esse link para a retirada do código.

Conseguimos juntar ao todo 30 animações de loading com essa postagem. Com um pequeno código CSS é possível criar animações incríveis e por não usar nenhuma outra ferramenta, a página ganhará em desempenho e qualidade de escrita.

“Hoje não pensamos que estamos assistindo um vídeo e áudio de forma nativa no navegador, e muito menos acessando um navegador em um telefone. Nós esperamos ser capazes de compartilhar fotos, fazer compras, ler notícias e procurar informações em qualquer lugar, em qualquer dispositivo. Embora eles permanecem invisíveis para a maioria dos usuários, HTML5 e a Plataforma Aberta da Web está guiando estas crescentes expectativas dos usuários. “

Tim Berners-Lee, diretor do W3C

O vídeo abaixo, publicação da W3C, mostra o árduo trabalho da equipe  para criar os padrões da Web.

Hoje, se você tem interesse em criar uma  página acessível à vários ambientes, apenas adaptar o layout à variações de resolução não basta. Algumas metodologias devem ser revistas para uma completa adequação. Eventos gerenciados pelo DOM, como key press, mouse over e mouse out, não funcionam muito bem em dispositivos móveis. Enquanto conteúdos que são ativados por meio de alguma ação, não serão bem aproveitados para usuários com alguma deficiência, por exemplo.

Alguns tópicos serão levantados durante esse artigo, envolvendo questões quanto á portabilidade e acessibilidade.

Independência de dispositivo

Eventos que funcionam somente pelo mouse são um grande problema para a acessibilidade, pois nem todas as pessoas conseguem utilizar o mouse. Quem utiliza leitor de tela, por exemplo, navega exclusivamente pelo teclado. Pessoas com determinados tipos de deficiência física poderão não ter a habilidade de usar o mouse convencional e poderão utilizar teclados e mouses adaptados. Por isso, todas as funções de uma página devem ser dispositivo-independentes, ou seja, devem funcionar pelo mouse, teclado ou outro dispositivo. Além disso, o foco do teclado não deve ficar fixado ou “preso” em algum elemento, pois o usuário deve poder percorrer toda a página pelo teclado facilmente. Valendo lembrar que em dispositivos móveis, muitos eventos são inexistentes.

Como exemplo, aquele popover que aparece na página, coma opção de fechar ao click de um botão gera uma excelente usabilidade, mas uma acessibilidade terrível para usuários que não conseguem alcançar aquele botão. Uma simples adição de código aplica à tecla “ESC” do teclado a ação de fechar o popover.

window.onload = function(){
	document.onkeydown = function(e){
		// tecla ESC
		if(e.keyCode==13){
			fecha_popover();
		}
	}
}

Se forem utilizados eventos de JavaScript específicos para mouse, devem ser utilizados os correspondentes para teclado:

Adequar a navegação da página pela tecla “TAB” do teclado é outra dica importante. Ordene o conteúdo da sua página para que este tipo de navegação passe apenas por conteúdos utilizáveis, como formulários e links.

Por fim, sempre teste o site navegando por todo o conteúdo somente pelo teclado, com setas e “TAB”, e em diferentes navegadores.

Alterações temporais do conteúdo

É muito comum a utilização de conteúdos que se movem, como os slideshows. Esse tipo de elemento não deve mover-se automaticamente, pois o usuário é quem deve decidir se quer “rolar” o conteúdo ou não. Assim, devem ser oferecidos controles para iniciar, pausar e reiniciar tais rolagens. Esses controles devem ser acessíveis também pelo teclado e devem estar bem descritos, para quem utiliza leitor de tela.

Atualização e redirecionamento automáticos

Quando ocorre uma mudança, atualização ou redirecionamento repentino na página, o usuário pode sentir-se confuso ou desorientado, especialmente se estiver utilizando algum recurso de Tecnologia Assistiva, como um leitor de tela, por exemplo. Isso ocorre em páginas com atualização ou redirecionamento automáticos. A atualização automática periódica – muito utilizada por canais de notícias – é comumente realizada através do uso do o atributo http-equiv com conteúdo “refresh” do elemento meta no HEAD do documento.

Em páginas onde a atualização é absolutamente necessária, o usuário deverá ser informado que a página é atualizada automaticamente.

Quanto ao redirecionamento automático, o mesmo deve ocorrer de forma transparente para o usuário. Ou seja, não devem ser utilizadas marcações para redirecionar a uma nova página, como o uso do atributo http-equiv com conteúdo “refresh” do elemento META.

Limite de tempo

Em uma página onde há limite de tempo para realizar uma tarefa deve haver a opção de desligar, ajustar ou prolongar esse limite. Essa recomendação não se aplica a eventos em que o limite de tempo é absolutamente necessário. Deve-se lembrar que, em ambos os casos, o limite de tempo deve ser informado.

Ao especificar o tempo limite para o usuário conclua a ação, não se deve tomar como modelo um desktop conectado a teclado e mouse convencionais. Dispositivos móveis mostram uma ergonomia mais precária, comparadas ao desktop, exigindo um esforço maior e mais prolongado para resolver algumas ações. Deficiências motoras retardam a conclusão de alguns trabalhos na página da web. É importante adequar o tempo levando em conta o dispositivo que o usuário esteja utilizando, e a dificuldade que usuários possam ter concluir trabalhos convencionais.

Intermitência de tela

Não apenas pela acessibilidade, mas também pelo bom gosto. Não devem ser utilizados efeitos visuais piscantes, intermitentes ou cintilantes. Em pessoas com epilepsia fotosensitiva, o cintilar ou piscar pode desencadear um ataque epilético. Além disso, elementos piscantes podem causar desconforto, desatenção e confusão para os usuários.

A importância do contraste para usuários com Daltonismo

A deficiência de cor vermelho/verde é o tipo mais comum de Daltonismo. Por isso, deve-se evitar a utilização de contrastes entre essas duas cores.

• Utilizando combinação de cores verde/vermelho: com a deficiência de cor não é possível perceber o contraste entre as cores.

• Utilizando combinação de cores verde/lilás: mesmo com a deficiência de cor, ainda é possível perceber o contraste.

Elementos ocultos na tela

É bastante comum, e deixa a página “inteligente”, ocultar texto que devem ser mostrar apenas se o usuário desejar velos. Mutas vezes por alguma ação do mouse over  aplicada a um ícone de ajuda, por exemplo, para configurar uma capacidade de aprendizagem. Porém, dependendo método aplicado ao elemento para esconde-lo da página, aplicativos de leitores de tela não conseguem alcançar o conteúdo. Dependendo do método, a acessibilidade à aquela ajuda, não exite.

Abaixo é mostrado os diferentes métodos para esconder um elemento da página, e sua reação aos aplicativos leitores de tela.

Elementos ocultos na tela

Por fim, para a avaliar se sua página é Web acessível, existem ferramentas automáticas que auxiliam na avaliação de acessibilidade. O aplicativo eMAG sugere um passo a passo para avaliar a acessibilidade de um site:

1. Validar os códigos de conteúdo HTML e folhas de estilo;
2. Verificar o fluxo de leitura da página, utilizando um navegador textual ou um software leitor de tela;
3. Checar o fluxo de leitura das páginas sem estilos, sem scripts e sem as imagens;
4. Verificar as funcionalidades disponíveis na barra de acessibilidade, como atalhos e contraste;
5. Efetuar a validação automática de acessibilidade, através de avaliadores automáticos;
6. Realizar a validação manual, com uso de checklists de validação humana.

Um recurso bastante útil na avaliação de acessibilidade de um site são as extensões para navegadores para análise de acessibilidade:

• Para Firefox: Accessibility Evaluation Toolbar (link para um novo site)
• Para Google Chrome: Accessibility Developer Tools (link para um novo site)
• Para Internet Explorer: Web Accessibility Toolbar for Internet Explorer (link para um novo site)

Artigo Retirado de Curso eMAG – gov.br

Consequentemente, muita coisa no workflow de desenvolvimento web também mudou. Debugar códigos JS usando alert? Ir e voltar no navegador para ver como ficaram as mudanças de CSS? Redimensionar a página para simular responsive design? Esse tempo já passou.

A chegada do famigerado Firebug há alguns anos atrás, abriu portas para um novo conjunto de ferramentas como Chrome DevTools, Opera Dragonfly e Firefox DevTools que auxiliam e muito a vida dos desenvolvedores web.

Nessa série oficial da Google, gravada em português e produzida por brasileiros, você vai ver em 10 vídeos como tirar proveito do Chrome DevTools para manipular elementos no DOM, identificar memory leaks, debugar código JavaScript, emular dispositivos móveis, otimizar o waterfall de requisições, e muito mais.

Se você se interessa por produtividade e qualidade no desenvolvimento de aplicações web, não deixe de assistir todos os vídeos!

Para facilitar a navegação entre os vídeo, acesse este link com a lista de reprodução de todos os vídeos: Google Developers

Via: Tableless

Emmet. Esta é uma extensão que vai ajudar a criar códigos HTML e CSS mais rapidamente, ganhando até 80% a mais de agilidade na escrita destes códigos.

A extensão Emmet é muito conhecida pelos desenvolvedores web, pois, permite aumentando a produtividade com escrita de códigos.

Com esta extensão, são ativadas diversas funcionalidade, você será capaz de escrever HTMLcom marcações CSS. Se, por exemplo, escrevermos isto:  ul#minha_lista>li*5 e clicarmos na tecla “tab” ou “CTRL+E” no Windows, o seguinte será produzido:

No vídeo abaixo, você poderá conferir como instalar a extensão além de,  mostrar como funciona o sistema de abreviaturas e alguns atalhos.
Vídeo exibido em Coxpe.

Como foi mencionado no vídeo, não falamos de todos os atalhos. Podem ver mais atalhos aqui.
Esta extensão está disponível para mais editores de texto como o Espresso, Notepad++, Sublime Text, etc. Se quiser fazer o download, clique aqui.

A Turbosite valoriza e apoia o desenvolvido Web. Com servidores no Brasil, hoje dispõe de DataCenter próprio com links de alta velocidade e redundantes. Quer contratar uma Hospedagem de Site segura e confiável? É na Turbosite.

Mas de onde veio o HTML5? E como ele evoluiu de uma simples idéia para o padrão web de hoje? Veja isso e muito mais neste infográfico que criamos especialmente para isso:

Eu vi no WIX