Uma vez programando errado – Sempre dará errado

Postado por: Pedro Rogério em

Manter o seu código organizado e bem estruturado não é luxo de nenhum programador, pelo contrário, não importa a linguagem em que você está programando, seja ela HTML, CSS, ASP, JavaScript, PHP, manter um código limpo e claro é essencial para uma eventual manutenção e compreensão, tanto sua como de terceiros. Principalmente se você trabalha em uma agência, onde existe toda uma equipe de desenvolvimento, manter o código limpo é primordial para o desenrolar dos projetos.

Peguemos como exemplo a área de CSS, onde temos que definir nomes para várias classes, devemos procurar dar nomes adequados, seja para os arquivos, para as classes ou para IDs. Pra você ver como pode haver uma confusão, você fez aquele site lindo para o seu cliente, código o mais semântico possível, e lá você tem um menu que fica do lado direito, logicamente, você quer colocar o nome de sua referência como menudireita, mas o cliente lhe liga pedindo que mudou de idéia, quer o menu no topo do site, você tem uma div chamada menudireita que fica no topo do site, entendeu agora a extensão do problema, você agora teria que mexer não só no CSS, mas também no HTML, não seria mais fácil, se você tiver um só menu em seu site, chamá-lo simplesmente de menu? Por isso é que devemos usar nomes simples e diretos para tudo, referentes as suas funções, por que programando uma vez errado, sempre dará errado!

Utilizando atributos alt equivalente as imagens

Postado por: Pedro Rogério em

Em um artigo anterior, eu falei como fazer o uso correto da tag alt em imagens, como vocês podem ver, é rotineiro os usuários usarem a tag alt como tooltip, mas essa não é a verdadeira função dessa tag, sua função é proporcionar um texto altenativo caso as imagens não sejam carregadas, por exemplo, os leitores de tela, eles lêem o texto do atributo para o usuário. Um outro exemplo é o Google Image Searchs, ele não faz o uso das tags meta para indexar as imagens em seu banco, ele também faz o uso das tags alt, por isso a importância de se fornecer um texto que tenha conivência com as imagens.

Continuar lendo »

Edipo: Editor de CSS personalizado

Postado por: Pedro Rogério em

Edipo é um editor de folhas de estilo personalizado com base na Web, especialmente desenvolvido e desenhado para ajudar aos usuários a criarem a sua própria folha de estilo personalizada, para modificarem a seu modo as páginas Web para uma melhor legibilidade.

Edipo é especialmente útil para os deficientes visuais, ele gera uma folha de estilos de acordo com as especificações do usuário, para modificar determinadas opções que podem ser instaladas em seu navegador como folha de estilo personalizada.

Referências

Uso correto de Alt e Title

Postado por: Pedro Rogério em

Muita gente acredtita que usando a tag alt para imagens ela assume o papel de Tooltip. Esse método foi adotado a anos atrás, tudo começou com o Netscape, usando alt para indicar um tooltip, e o Internet Explorer foi lá e seguiu a mesma linha.

A tag alt serve para, por exemplo, se a imagem por algum motivo não for carregada, mostrar uma descrição prévia da imagem, seu uso também é recomendando para browsers que não suportam imagens. Agora o uso de title é para quando o usuário repousar o mouse sobre a imagem, ou o link, aparacer uma descrição definida pelo usuário sobre o mesmo.

A maneira errada de indicar um tooltip:


<img src="http://sua_imagem.gif" alt="Maneira errada" />

Maneira correta de indicar um tooltip:


<img src="http://sua_imagem.gif" alt="Texto alternativo caso a imagem não seja carregada" title="Essa é a maneira correta de indicar um tooltip em uma imagem" />

Trocando a roupa

Postado por: Pedro Rogério em

Aqueles que trabalham com XHTML e CSS sabem as possibilidades que essas tecnologias lhe proporcionam, e uma delas é você fazer alterações no layout de sua página sem nem sequer tocar no código HTML, uma prova viva disso é o meu outro site: http://www.pinceladasdaweb.com.br/, acabei de mudar o layout, se lembram do antigo? Não, então dêem uma olhada na seção portifólio que ele está lá, e sintam a diferença.

Doctype pra que te quero

Postado por: Pedro Rogério em

Você acabou de construir o seu site inteirinho no bloco de notas, o código está todo uma beleza, lindo de se ver, as tags estão todas aninhadas corretamente, mas você vai fazer um teste no seu browser e a página não fica como você queria, e agora? Meu deus, não precisa sair arrancando os cabelos ou enviando e-mails desesperadamente para aquele seu amigo me manja bastante de HTML, você pode ter simplesmente esquecido de colocar um DOCTYPE válido na sua página.

Mas a troco de que eu vou usar isso na minha página?

De acordo com as especificações do W3C, um DOCTYPE informa ao validador qual é a versã do HTML, ou XHTML, que está sendo usada, e deve constar no topo de cada página. Eles são elementos essenciais na construção de uma página dentro dos padrões. O (x)HTML e o CSS do seu site não será válido sem eles. Eles também são essenciais para uma correta renderização da sua página.

Continuar lendo »

XHTML: Primeiros passos

Postado por: Pedro Rogério em

O XHTML, ou seja, Extensible HyperText Markup Language, é a evolução do HTML, e foi criado dentro do conceito do XML, linguagem de marcação onde você cria suas tags e atributos para criar um documento Web, e nada mais é do que eu um HTML mais claro e limpo. Veja abaixo algumas diferenças entre o HTML e o XHTML:

  • Todas as tags e atributos devem ser escritas em letras minúsculas
  • Todas as tags devem ser aninhadas corretamente
  • Todas as tags devem ser fechadas, por exemplo o <br> e o <hr>, agora elas ficam assim: <br /> e <hr />
  • Todos os atributos devem ter aspas
  • Agora ao invés de “name” você deve usar “id”
  • Ao invés de usar, por exemplo: “input checked”, deve-se usar, “input checked=”checked”

Quais são as vantagens?

  • Compatibilidade com futuras aplicações
  • Código consistente
  • Tempo de carregamente da página extremamente menor
  • Compatível com todos os navegadores
Páginas:«12345678»