Layouts com tabelas – Estupidez e Falta de profissionalismo

Olá, Esta semana vou iniciar alguns artigos falando sobre acessibilidade na Web. Desta forma o inicio não poderia ser diferente de “NÃO USE TABELAS PARA FAZER O LAYOUT DE SEU SITE”.

Isso não é uma das regras de acessibilidade e apenas um detalhe que diferencia um profissional de um “faço qualquer coisa”. Se você que afirma que cria sites e não sabe para qual fim existe o elemento HTML table, sinto informar mas você não é um profissional. Vejam o por que:

Feliz dia da Toalha!!!

Hoje é um dos dias mais legais do ano, o dia da toalha e o dia do orgulho nerd.

Conhecendo o reset css e algumas técnicas

Sabe quando você monta um layout que fica todo “fodão” no Firefox, porém no IEca ele ja fica todo torto? Por padrão, todos os elementos HTML possuem um estilo incorporado, e isso varia para cada navegador. Por exemplo, a margem padrão do body pode ser 8px no Internet Explorer e 5px no Firefox e se aumentarmos o número de tags vamos entender que isso acontece não por que o Internet Explorer seja ruim, mas sim por que os navegadores dão valores defaults diferentes para cada tag.  Por este motivo hoje veremos uma técnica que podemos usar para contornar isso este artigo foi feito especialmente para você designer, programador de respeito que se preocupa como seu site esta sendo exibido em diferentes navegadores(Cross-browser).

Lista Zebrada com CSS3

Iniciando com uma pergunta à aqueles que ja trabalham com o desenvolvimento web: Como você faz uma lista zebrada?
Até pouco tempo atrás poderiamos utilizar algumas “soluções” como usar o Javascript pra atribuir uma classe a determinadas linhas, ou  usar um for e mudar a cor e por ai vai. No fim estavamos felizes, funcionou!
Agora o CSS3, que tem este propósito de melhorar a experiência visual do usuário e livrar o programador da necessidade em se preocupar com o design do front-end, podemos usar os seletores avançados.

CSS3 Media Queries

Olá, Hoje vamos falar sobre ao  atributo Media, mas antes de falar sobre a alteração que ocorreu com o CSS3 vamos explicar o que é o Media Type?
As Media Types foram criadas pela W3C para o CSS com o objetivo de transformar um site feito em CSS mais acessível a diversos dispositivos, como PDAs, celulares e acreditem, até para apresentações feitas em Power Point. As Media Types definem para qual tipo de media o CSS será direcionado. Como o  HTML foi criado para ser lido e interpretado por qualquer tipo de dispositivo. Cada dispositivo exibe o HTML de uma maneira diferente, seja pelo tamanho da tela, ou ate mesmo pelo renderizador do navegador em uso. A forma que este HTML é formatado em cada dispositivo é diferente e o mesmo vale para o código CSS .Por exemplo, se você visita um site por um computador ele dificilmente terá a mesma cara quando visto em um dispositivo móvel como um PDA. com o Media Type podemos até definir a cada do site para a saída de impressão.

Bordas arredondadas com o border-radius no CSS3

Quem já precisou criar bordas arrendondadas antes do CSS3 lembra quanto erra chato. Claro que alguns usavam(e outros insistem em usar) tabelas para fazer tal recurso. Porém a tão aguardada propriedade border-radius está ativa.  Ela nada mais é do que a possibilidade de criar bordar arredondadas, assim simples e fácil.

Agora você me pergunta “Fábio como eu faço pra usar, se é tao fácil?”. Simples vamos olhar uma declaração válida…

Elemento datalist

Olá novamente, Seguindo com a “apresentação” sobre o HTML5 vamos falar um pouco sobre o novo elemento <datalist>. Com ele podemos especificar uma lista de opções para um campo de entrada, uma espécie de autocompletar. Ele  irá mostrar uma lista de elementos predefinidos como opção para um caixa de entrada de texto. Caso o browser não suporte este componente, ele pode exibir os elementos que compõem o datalist em forma de texto simples.

Navegadores com Suporte:
  Atualmente, apenas o Firefox e Opera tem suporte ao elemento datalist, podemos usar uma solução alternativa a esta falta de suporte. Vamos aos exemplos, na prática a coisa é melhor.

Tag abbr – Abreviações e siglas

Salve pessoas, antes de iniciar nossa conversa sobre mais uma tag HTML um aviso: O Blog não morreu! Digo isso por que quem me conhece sabe que tenho uma grande dificuldade em manter o foco nesse negócio de blogs e afins. Porém este é diferente, não é para falar sobre o que eu faço (isso é chato), então vamos em frente.

As tags <abbr> são utilizadas para demarcar abreviações e siglas.  Este elemento é usados para dar significado adicional ou o real significado de uma sigla a um conteúdo web. Marca-se o conteúdo com um este  elemento e acresenta-se o atributo title contendo a informação extra sobre tal assunto.

Por exemplo:
Farei MBA em Gerenciamento de Projetos

A Declaração <!DOCTYPE >

Há quem diga que HTML é sempre HTML, se isto fosse verdade então não estaríamos falando sobre o HTML5. A Declaração de hoje é a <!DOCTYPE>, mas pra que fins essa declaração existe e o que realmente ela faz?

A <!DOCTYPE>NÃO É uma tags HTML, é nada mais que uma instrução para o navegadorweb sobre qual versão do HTML a página está escrita. No HTML 4.01, todos os <! DOCTYPE> requerem uma referência a um DTD¹, porque HTML 4.01 foi baseada em SGML². Vejamos a seguir quais as novidades em relação a essa declaração e sua importância na validação dos documentos.

Comentários – <!– … –>

Não diferente de qualquer linguagem de programação (Não digo que o HTML seja uma) a marcação de comentário sempre será um dos itens mais importantes. Primeiro por que você não tem uma super memória (Não me refiro a todos, mas a maioria) e vai lembrar sempre o que aquele determinado trecho de código vai fazer. Segundo você não é o único desenvolvedor do mundo, alguém pode ter que utilizar o seu código e terá que compreender sem a sua presença.

No HTML não é diferente, apesar de ser uma linguagem de marcação algumas tags podem ser desconhecidas a certa pessoa. Enfim, são várias situações onde a marcação de comentário eh sempre bem vinda. Vamos analisar alguns pontos sobre tal recurso.