Tableless

Busca Menu

Tableless Weekly #1

Seja o primeiro a comentar por

Estamos começando com o primeiro artigo da série Tableless Weekly. Série semanal que trará um pouco das novidades do mercado front-end, links úteis e alguns sites legais que encontrarmos por ai.

HTML5

O Elemento Dialog já está disponivel para o chrome a partir da versão 37.

Como o HTML5 sempre tem trazido consigo uma grande mudança nas tags, principalmente por questões semânticas, a tag Dialog já foi implementada a partir da versão 37 do Chrome e na versão 6 do Safari. Em breve estará disponível nos outros browsers.

A funcionalidade da tag é bem básica: Representar semânticamente as caixas de diálogo que geralmente implementamos em sistemas e sites.

Mas por que criar uma nova tag se podíamos fazer isso com uma div? A questão é semântica e não visual. Assim fica explícito para os robôs de busca e outros scripts, interpretarem o conteúdo de seu site e saber exatamente para que serve cada elemento, principalmente se tratando das caixas de diálogo que fazemos normalmente com divs, para destacá-las, para que eles entendam que aquilo não é somente uma div cheia de textos, mas sim uma caixa de alerta, de diálogo, que interfere na navegação do usuário.

Que tal mostrar na prática? Então vamos lá…

dialog
Provavelmente você já deve ter visto muitas dessas por aí ou até feito alguma.

Como eu disse acima, nada que não se possa fazer com uma div, mas observe agora o código e veja a estrutura semântica.

<dialog>
   <p>Esta é uma caixa de diálogo</p>
   <button id="#close">Fechar</button>
</dialog>
<button id="#show">Mostrar Caixa de diálogo</button>
<script>
 var dialog = document.querySelector('dialog');
 document.querySelector('#show').onclick = function() {
 dialog.show();
 };
 document.querySelector('#close').onclick = function() {
 dialog.close();
 };
</script>

Perceba que o código se tornou bem mais semântico e mais amigável concorda? Deixe sua opinião nos comentários…

Links úteis

Estes são links interessantes pra você visitar nessa semana.

Se você tem alguma sugestão, estaremos disponibilizando no próximo artigo um link para envio.

Ferramentas

Algumas das ferramentas úteis para front-end.

JSFiddle – Talvez não seja uma novidade para ninguem, mas com o JSFiddle fica simples testar seu código HTML, CSS e JS, ou códigos prontos que você ahca por aí e não sabe se funciona 😉
FontAwesome – Também não deve ser novidade, mas com o FontAwesome, temos vários ícones disponíveis em formato de fonte.
BrowserDiet – Um site com definitivamente tudo(ou quase tudo) que você precisa saber sobre como perder peso no carregamento de sites.
BrowserFit – Site que reúne vários conceitos para criar sites responsivos. Aborda conceitos como: mobile first, content first, media queries, entre outros.

Alguns sites legais

Ominisense
Site da Ominisense. Simplesmente estou namorando esse site. Os efeitos são muito legais e se você assistir o vídeo no final, verá o quanto é incrível o trabalho que fizeram. O video completamente feito em HTML5, fala sobre os sentidos humanos e sobre escolhas, achei bem interessante e resolvi colocar aqui.

Cantina Valpolicella Negrar
Site de uma cantina de vinhos italiana. O Design é bem moderno, e o vídeo que fizeram ficou muito legal.

Volkswagen SportCars
Site da Volkswagen para divulgar seus carros esportivos. A interface e navegação pelo site são muito intuitivos e agradáveis.

Conclusão

Bom galera, este foi nosso primeiro Tableless Weekly, esperamos que tenham gostado. Deixem seus comentários abaixo e compartilhem com seus amigos front-enders.

Então até a próxima terça com mais conteúdo fresco pra vocês se deliciarem.

Publicado no dia