A nova linguagem HTML5 prevê reformulação no atributo accesskey. Uma delas é: “todos os elementos HTML podem receber o atributo accesskey“. Apesar dos navegadores atuais não aplicarem tudo que a documentação do W3c sugere, ainda sim podemos usar para incrementar a acessibilidade das nossas páginas web.

Você já parou para pensar que seus visitantes podem ter algum tipo de deficiência ou mobilidade reduzida e podem ter dificuldades de controlar o mouse para clicar em links, campos de formulários, etc. E uma navegação utilizando a tecla tab pode acabar sendo um processo bem lento para dar foco em um link…

A especificação da HTML5 recomenda que a combinação de teclas para acionar o atributo accesskey seja ctrl + alt + tecla e que o valor do atributo accesskey seja case sensitive, ou seja, sensível ao tamanho da letra. Porém os navegadores não implementam essa recomendação, a maioria dos navegadores usam a tecla alt + tecla e/ou shift + alt + tecla

A maioria dos navegadores não suporta duplicar o atributo accesskey. Por exemplo, uma página não pode ter dois atalhos com accesskey = "N". A maioria dos irá ignorar um dos atalhos. Alguns navegadores vão ignorar a primeira accesskey, e outros navegadores ignoram a segunda instância. O navegador que aceita accesskey duplicado é o Internet Explorer.

Exemplo atributo accesskey

<nav>
    <p>
        <a href="http://www.google.com.br" accesskey="G">Google</a>
        <a href="http://www.yahoo.com" accesskey="Y">Yahoo</a>
        <a href="http://www.facebook.com" accesskey="F">Facebook</a>
    </p>
</nav>

Na HTML5 o atributo accesskey pode conter uma série de atalhos, separados por espaços. Uma finalidade para isso é de assegurar que um atalho de teclado esteja disponível para dispositivos moveis também, aqueles que só possuem teclado com números. Assim é possível acrescentar um valor numérico no atributo accesskey além da letra, bastando o usuário digitar esse número para dar o foco no elemento. Veja a seguir que definimos a letra “s”, e em seguida, separado por um espaço, o número “0″.

<form action="/search">
 <label>Search: <input type="search" name="q" accesskey="s 0"></label>
 <input type="submit">
</form>

Você deve estar se perguntando, mas como meus usuários vão saber que inseri teclas de atalhos para meus elementos HTML. Raramente um usuário saberá que você atribuiu teclas de atalhos para os elementos. Para minimizar essa dificuldade você pode colocar um texto informando seus visitantes ou exibir para o usuário ao lado do elemento a tecla de atalho. Abaixo um CSS que insere ao lado do elemento a tecla de atalho escolhida para o elemento.

a[accesskey]:after, button[accesskey]:after, input[accesskey]:after,
label[accesskey]:after, legend[accesskey]:after, textarea[accesskey]:after {
	margin-left: 0.3em;
	content: "[" attr(accesskey) "]";
	}

Um site que implementa o uso desse atributo é o Acesso Digital. Esse site foi desenvolvido para oferecer total acessibilidade aos seus visitantes. Excelente para um bom exemplo de acessibilidade na Web.

Compatibilidade entre navegadores

O atributo accesskey é suportado em todos os principais navegadores em suas últimas versões, com exceção do navegador Opera que ainda não implementa tal funcionalidade.

Firefox usa a combinação de teclas shift + alt + tecla, já o Chrome shift + alt + tecla ou apenas alt+tecla.

Me siga no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

Isso vai interessar você também

• 22 web sites desenvolvidos com HTML5 e CSS3
• Validação de formulário com HTML5
• Página de erro 404 animada com CSS
• Ferramenta para Upload de layouts
• 10 Crimes de usabilidade que você não deve cometer
• Ferramentas online para Web Designers
• 20 exemplos de páginas de erro 404 criativas
• Como usar o elemento SECTION do HTML5
• Como criar um layout de 3 colunas com CSS
• Como usar o elemento NAV do HTML5

Fiz esse artigo reunindo sites inspiradores usando HTML5 e CSS3, exemplos brilhantes e para lá de criativos que demonstram o potencial dessas duas tecnologias, e claro, a habilidade e criatividade dos desenvolvedores. Esse post também serve como uma grande fonte de inspiração para você aplicar em seus projetos.

Apesar da linguagem HTML5 ainda não estar totalmente finalizada, há muitos projetos de sites utilizando essa linguagem, que promete revolucionar o modo que os desenvolvedores criam seus sites. Com a presença do HTML5 podemos eliminar a necessidades de plugins de terceiros, permite uma codificação mais semântica e limpa, entre outras vantagens.

Suporte para CSS3 está crescendo rapidamente, os principais navegadores já estão interpretando regras CSS3 (novos seletores, propriedades, etc).

1. Bent the Bodyguard

2. Bounty Bev

3. Digital Hands

4. Get Satisfaction

5. I am Jamie

6. Icaro Ferracini

7. Ivan Asetiawan

8. Matt Hewnsara

9. Mula Design

10. Nike Better World

11. Robedwards

12. Seamco

13. Vision 18

14. Walo

15. Web For Freaks

16. Readiness

17. Clearideaz

18. Scratch Radio

19. nzfestival

20. OK Cool

21. Zoocha

22. Portfolio Rui Molar’s

Me siga no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

Isso vai interessar você também

• HTML5 – Acessibilidade com o Atributo accesskey
• Validação de formulário com HTML5
• Como criar um layout de 3 colunas com CSS
• 50 ações incríveis para turbinar seu Photoshop
• Página de erro 404 animada com CSS
• Ferramentas CSS3 online para Web Designers
• Ferramenta para Upload de layouts
• 10 Crimes de usabilidade que você não deve cometer
• Ferramentas online para Web Designers
• 20 exemplos de páginas de erro 404 criativas

HTML5 evoluiu bastante e tem uma série de novidades entre elementos e atributos para formulários. Nesse artigo mostro um pouco sobre validação dos campos de um formulário. Acredito que em um futuro próximo os desenvolvedores não precisaram escrever o código de validação de formulário em JavaScript, por exemplo, já que os navegadores serão capazes de fazer tudo isso para nós.

Atributo required

Utilizamos esse atributo para informar ao navegador que um elemento do formulário é de preenchimento obrigatório, ou seja, o usuário não consegue enviar o formulário se não preencher o campo com o atributo required. Seu uso é exclusivo com os elementos input, select e textarea.

Uma mensagem é informada ao usuário em uma tentativa de envio de formulário sem o preenchimento de um campo com required. Esse atributo apenas verifica se o campo foi preenchido ou não. Quero dizer que, qualquer caractere será aceito.

    <form method="post" action="">
    <label for="nome">Nome: </label><input id="nome" type=text required name=nome>
    <input type=submit value="OK">
    </form>

Abaixo mostro as mensagens de alerta nos seguintes navegadores: Google Chrome, Firefox e Opera. Perceba que cada fabricante estiliza a mensagem de forma diferente.

type=”email”

Atributo type de um input com a opção igual a email significa definir o campo para receber um endereço de e-mail válido. A forma de validação não verifica se o e-mail digitado realmente existe, mas sim se o formato está correto. Exemplo de um formato de email aceito: teste@teste.com.

<form method="post" action="">
    <label for="email">E-mail: </label><input id="email" type=email required name=email>
    <input type=submit value="OK">
    </form>

Alerta para o usuário caso não seja digitado nada no campo input.

Alerta para o usuário caso não seja digitado um formato de e-mail no campo input.

Um recurso CSS3 pode ser usando para identificar se o elemento do formulário recebeu ou não um dado válido. Esse recurso é o pseudoclasse :valid e :invalid

Assim que o usuário digitar um dado válido, o navegador altera o pseudoclasse de :invalid para :valid. No exemplo abaixo o campo inicia com uma cor de fundo avermelhada, assim que o usuário digitar um formato de e-mail o campo é alterado para verde.

Veja o CSS:

    #email:valid {background:#006600;color:#fff }
    #email:invalid {background:#990000; color:#fff}

type=”url”

Um campo input com type igual a url recebe apenas url’s no seu formato correto, ou seja, http://www.site.com, http://www.site.com.br etc.

    <form method="post" action="">
    <label for="site">Site: </label><input id="email" type=url required name=site>
    <input type=submit value="OK">
    </form>

Mensagem de alerta do navegador Chrome ao digitarmos uma url em um formato inválido.

pattern = “Expressão”

Com uso do atributo pattern você pode exigir que o usuário digite valores em um padrão feito com expressão regular, ou seja, o que for digitado no compo input deverá satisfazer a expressão regular criada pelo desenvolvedor.

Explicarei o atribudo criando uma expressão para entrada de um número de telefone. O valor inserido no campo de input deverá iniciar com (xx) logo terá um espaço em branco com uma sequência de quatro dígitos, um traço, e para terminar mais uma sequência de quatro dígitos, ficando assim: (xx) xxxx-xxxx.

Abaixo o código para criar a condição descrita acima.

<form>
   <label>Telefone: <input required name="tel" pattern="\([0-9]{2}\)[\s][0-9]{4}-[0-9]{4}"></label> (xx) xxxx-xxxx
   <input type=submit value=Enviar>
  </form>

\([0-9]{2}\) usuário deve digitar dois números de 0 até 9 entre parênteses.

[\s][0-9]{4}-[0-9]{4} um espaço e duas sequência de números divididas por um traço.

Em HTML5 há um valor para o atributo type que é o tel. Ao utilizar esse valor não há máscara de formatação ou validação, já que não há um padrão para números de telefones. Ele serve apenas para informar que o valor do campo é um número de telefone.

Abaixo outro exemplo utilizando o atributo pattern, agora validando CEP

<form>
   <label>CEP: <input required name="cep" pattern="[0-9]{5}-[0-9]{3}"></label> (xx) xxxx-xxxx
   <input type=submit value=Enviar>
</form>

novalidate=”novalidate”

Quando presente dentro do elemento form, especifica que os elementos do formulário não devem ser validados quando submetidos mesmo que tenham em seu type atributos iguais a email, url, etc.

<form action=" " novalidate="novalidate">
  <label>nome: <input name="nome" required></label>
  <label>email: <input name="email" type="email" required></label>
  <input type="submit" name="action" value="Enviar">
</form>

No exemplo acima mesmo que o usuário clique no botão enviar sem preencher os campos com required o formulário será submetido. Isso porque passamos o valor novalidate="novalidate".

Compatibilidade entre navegadores

Pelos testes que fiz a validação funcionou perfeitamente nos navegadores Chrome, Opera e Firefox em suas últimas versões. Navegadores como Safari e Internet Explorer não foram capazes de reconhecer tais elementos da HTML5.

Me siga no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

Isso vai interessar você também

• HTML5 – Acessibilidade com o Atributo accesskey
• 22 web sites desenvolvidos com HTML5 e CSS3
• Página de erro 404 animada com CSS
• Ferramenta para Upload de layouts
• 10 Crimes de usabilidade que você não deve cometer
• Ferramentas online para Web Designers
• 20 exemplos de páginas de erro 404 criativas
• Como usar o elemento SECTION do HTML5
• Como criar um layout de 3 colunas com CSS
• Como usar o elemento NAV do HTML5

No artigo anterior falei sobre como usar o elemento NAV do HTML5. Hoje vou falar um pouco sobre o elemento SECTION.

A tag section é utilizada para marcar as seções de conteúdo de uma página. Com Esse elemento agrupamos de forma lógica nosso conteúdo, separando a informação em áreas diferentes. O principal objetivo é retirar essa responsabilidade das divs. Tendo como principal diferencial a navegação semântica com HTML 5.

Digamos que na sua página inicial você tenha três chamadas principais:
Clientes, Serviços e Notícias. Aí um ótimo lugar para você usar a tag section. Cada uma dessas chamadas podem ser um elemento de seção. A tag pode ser usada em conjunto com o H1, H2, H3, H4, H5 e H6, elementos para indicar a estrutura do documento. Ele pode conter um header e um footer se necessário.

Exemplo

<section id="rock">
  <h2>Rock </h2>
  <!-- vários elementos article podem vir aqui -->
</section>

<section id="jazz">
  <h2>Jazz </h2>
  <!-- vários elementos article podem vir aqui -->
</section>

<section id="hip-hop">
  <h2>Hip hop </h2>
  <!-- vários elementos article podem vir aqui -->
</section>

Outro ponto a salientar, é que podemos usar livremente divs para organizar nosso conteúdo dentro de um bloco marcado com o elemento section. E também podemos ter uma seção dentro da outra, veja o exemplo abaixo:

<section class="cursos">
	<h4>Cursos</h4>
		<section>
			<h5>Photoshop</h5>
			  <div>
				Conteúdo...
			  </div>
		</section>
	<section>
    	<h5>CorelDraw</h5>
			Conteúdo...
	</section>
</section>

Se quiser me seguir no Twitter: @kadunew
Abraço e até o próximo artigo!

Isso vai interessar você também

• HTML5 – Acessibilidade com o Atributo accesskey
• 22 web sites desenvolvidos com HTML5 e CSS3
• Validação de formulário com HTML5
• Como usar o elemento NAV do HTML5
• 10 exemplos de aplicações usando HTML5
• 10 coisas em Flash que você não pode fazer com HTML5
• Adobe Dreamweaver CS5 e HTML5 extensão Pack

O elemento nav da HTML5 representa uma seção de uma página com links para outras páginas do site ou para determinadas partes da mesma página. Esse elemento nada mais é que uma seção com links de navegação. Nem todos os grupos de links, em uma página, precisam estar dentro do elemento nav, somente seções que consistem em blocos de navegação principais são adequadas para o elemento nav.

Atualmente os desenvolvedores utilizam divs para criar blocos de navegação, e isso não pasa nenhum valor semântico aos mecanismos de busca. Pela lógica o poder de indexação será ainda maior com os novos elementos HTML5. Isso tudo por causa da sua estrutura mais semântica. Outra vantagem será para os leitores de tela.

Aplicando o elemento NAV

Você pode utilizar o elemento nav em qualquer lugar do seu site. Dentro do elemento header, footer, section, etc.

Caso você tenha em seu site uma sidebar com uma lista de links para outros sites esses não precisão ser marcados com o elemento nav. O elemento nav não deve ser usado em links mencionados em um parágrafo de conteúdo e também em links no rodapé do tipo “site criado por…”. Apenas aqueles grupos que contém links importantes devem ser englobados por esse elemento.

Forma tradicional de marcação para blocos de navegação.

<div id="navegacao">
  <ul>
	<li><a href="index.html">Home</a></li>
	<li><a href="sobre.html">Sobre</a></li>
	<li><a href="blog.html">Blog</a></li>
  </ul>
</div>

Utilizando o elemento nav.

<nav id="nav-principal">
  <ul>
	<li><a href="index.html">Home</a></li>
	<li><a href="sobre.html">Sobre</a></li>
	<li><a href="blog.html">Blog</a></li>
  </ul>
</nav>

Sempre quando falamos de HTML5 é importante ressaltar que as especificações da linguagem não foram completamente definidas ainda.

Onde podemos aplicar esse elemento

Até o presente momento a especificação diz que o elemento nav deve ser utilizado em qualquer lugar que você considera ser a principal forma que o usuário navega no seu site, como por exemplo:

Por hoje era isso. Forte abraço.

Se quiser me seguir no Twitter: @kadunew

Isso vai interessar você também

• HTML5 – Acessibilidade com o Atributo accesskey
• 22 web sites desenvolvidos com HTML5 e CSS3
• Validação de formulário com HTML5
• Como usar o elemento SECTION do HTML5
• 10 exemplos de aplicações usando HTML5
• 10 coisas em Flash que você não pode fazer com HTML5
• Adobe Dreamweaver CS5 e HTML5 extensão Pack

1. Sinuous

2. Harmony

3. Blob

4. Drag and drop

5. JaVortex

6. 3D Model Viewer

7. 3D Landscape on HTML5 canvas

8. CanvasPaint

9. Moving Cloth in HTML5

10. Monster

GRANDE abraço a todos.
Não esqueçam de me seguir no Twitter: @kadunew

Isso vai interessar você também

• HTML5 – Acessibilidade com o Atributo accesskey
• 22 web sites desenvolvidos com HTML5 e CSS3
• Validação de formulário com HTML5
• Como usar o elemento SECTION do HTML5
• Como usar o elemento NAV do HTML5
• 10 coisas em Flash que você não pode fazer com HTML5
• Adobe Dreamweaver CS5 e HTML5 extensão Pack

Os exemplos mostram animações em 3D, gravação de arquivos de áudio a partir do microfone do seu computador, aplicações para conferência na web e muito mais.

1. HTML 5 não pode interagir com uma webcam.

2. vídeo do HTML5 não pode ser usado em um plano 3D.

3. HTML5 não pode gravar o áudio de seu microfone.

4. HTML5 não pode fazer qualquer tipo de conferência na web.

5. HTML5 não pode adicionar objetos dinâmicos para ir em cima do vídeo, como legendas, títulos ou itens de navegação.

6. HTML5 não pode gravar a partir da sua webcam.

7. Com HTML5 não é possível criar aplicativos para desktop.

8. HTML5 não suporta vídeo com canais alfa.

9. HTML5 ainda não suporta Peer-2-Peer.

10. HTML5 não faz o modo de tela cheia.

Não esqueçam de me seguir no Twitter: @kadunew
GRANDE abraço!

Isso vai interessar você também

• HTML5 – Acessibilidade com o Atributo accesskey
• 22 web sites desenvolvidos com HTML5 e CSS3
• Validação de formulário com HTML5
• Como usar o elemento SECTION do HTML5
• Como usar o elemento NAV do HTML5
• 10 exemplos de aplicações usando HTML5
• Adobe Dreamweaver CS5 e HTML5 extensão Pack

A adobe Labs lançou recentemente a extensão HTML5 Pack. Esta extensão fornece suporte para o HTML5 e CSS3 na versão atual do Adobe Dreamweaver CS5 e ajuda os desenvolvedores na criação de suas páginas web.

Como a linguagem de marcação HTML5 e a linguagem de estilização CSS3 estão em fase de teste, a extensão fornece suporte para o conjuntos de funcionalidades que já foram implementadas até o presente momento.

Instalando esta extensão o desenvolvedor poderá usufruir de algumas novas funcionalidades, entre elas o auto completar, ou seja, ao digitar o programa sugere as novas tags do HTML 5, atributos e propriedades. Visualização em 3 diferentes tamanhos de tela no Live View, que é um recurso que oferece pré-visualizações precisas do seu projeto. Atualização no Live View para dar suporte as tags video e audio. (Requer a instalação do Quicktime) que estão presente no HTML5.

Instalando a extensão.

1. Baixe o HTML5 Pack;
2. Ter certeza que tem instalado a versão Adobe Dreamweaver CS5;
3. Faça a instalação pelo Adobe Extension Manager ou clicando duas vezes sobre o ícone da extensão e navegando até o local do arquivo;
4. Reinicie o programa.

Fonte: Adobe Labs

Abraços!



Isso vai interessar você também

• HTML5 – Acessibilidade com o Atributo accesskey
• 22 web sites desenvolvidos com HTML5 e CSS3
• Validação de formulário com HTML5
• Como usar o elemento SECTION do HTML5
• Como usar o elemento NAV do HTML5
• 10 exemplos de aplicações usando HTML5
• 10 coisas em Flash que você não pode fazer com HTML5
]]> http://www.kadunew.com/blog/dreamweaver/adobe-dreamweaver-cs5-e-html5-extensao-pack/feed 1