Postado em: 29 de julho de 2006 por Pedro Rogério
A unidade de medida relativa “em” tem como finalidade indicar o número de vezes que se deve aumentar o tamanho da letra em relação ao tamanho do elemento que a contém. Para uma melhor compreensão ao desenrolar deste post, verifique abaixo os valores em px para em:
1em = 10px
1.2em = 12px
1.5em = 15px
Muitas pessoas não sabem, mas o valor definido nos navegadores para o tamanho das fontes é de 16px, então qualquer elemento dentro de <body> terá o seguinte tamanho:
1em = 16px
2em = 32px
0.5em = 8px
Mas, se por um acaso, definir-mos um tamanho para um elemento, por exemplo p, que está dentro de body, o elemento filho estabelece seu tamanho em relação ao elemento pai. Por exemplo, se o tamanho das fontes no navegador está definido como 16px:
body { font-size:0.5em; }
p { font-size:2em; }
O elemento p vai ter um tamanho de 16px, não de 32px, por que ele “herda” o tamanho definido em body (a metade, 8px) e o dobra (2×8=16). Dùvidas beba direto da fonte.
Postado em: 27 de julho de 2006 por Pedro Rogério
Se você trabalha com unidades de medida absolutas, e gostaria de começar a trabalhar com unidades de medidas relativas (em, pixels…), e anda meio perdido, existe um site que faz a converssão de pixel para em, assim fica bem mais fácil de trabalhar né, agora você não fica mais perdido, alterando o tamanho de suas fontes toda hora até achar a que você queria.
EM CALCULATOR
Postado em: 26 de julho de 2006 por Pedro Rogério
Não, chega de usar hacks para corrigir erros de layout, eu acabei descobrindo um JavaScript que com ele é possível criar estilos específicos para cada browser, ou seja, você pode criar estilos para o Opera, para o IE, para os browsers baseados na plataforma Gecko(Mozilla), e ainda fica livre dos hacks, que por sinal é muito interessante.
Postado em: 25 de julho de 2006 por Pedro Rogério
Spans são similares as divisões, a não ser que sejam um elemento in-line ou um elemento de bloco. Nenhuma quebra de linha é criada quando um span é declarado. Você pode por exemplo usar span para estilizar áreas específicas do seu texto, como você pode ver no exemplo abaixo:
<span class="italico">Esse texto irá ficar em itálico</span>
O CSS fica da seguinte forma:
.italico { font-style:italic; }
Tradução do artigo original de: CSS Basics.
Postado em: 24 de julho de 2006 por Pedro Rogério
Hoje em dia, praticamente tudo de que você precisa está na Web, como editores de texto on-line, até um sistema operacional eles já inventaram, mas e quando você precisa fazer uma apresentação, seja para um cliente, seja em uma conferência, com certeza você recorreria ao velho amigo Power Point, com aqueles velhos templates, péssimas conbinações de cores, horríveis clip-arts, fontes pequenas que variam a cada slide, mas essa era já acabou, com o uso de AJAX, é possível fazer muita coisa interessante, como vocês podem ver nos links disponibilizados abaixo:
Postado em: 21 de julho de 2006 por Pedro Rogério
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!
Postado em: 20 de julho de 2006 por Pedro Rogério
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.
Exemplos de má uso do Texto Alternativo
- Nas tags alt só devem conter texto alternativo, não é permitido usar tags do HTML.
- alt=”nome_da_imagem.jpg”: Não importa pra gente qual o nome da imagem.
- alt=”alt text”: Introduzido por alguns editores de HTML como um lembrete.
- alt=”Clique aqui!”: Não tem nenhuma finalidade útil, ao menos que esteja em uma imagem “Clique aqui”.
- Veja aqui mais exemplos.
Exemplos de uso correto do Texto Alternativo
- Jonathon Delacour: Ele usa um banner em seu site com um símbolo chinês, no atributo alt ele coloca o seguinte: Site logo:
xin, the Chinese character for heart, que significa: Logo do site: Xin, o caractere chinês para o coração.
- Leslie Harpold: Tem um banner na página que inclui o nome do site “The Historical Present”, e a tagline: “Hypermodernism has a posse”. Como texto alternativo ele usa: “the historical present: hypermodernism has a posse”
- Simon Willison: Na etiqueta “W3C XHTML 1.0″ ele usa “Valid XHTML 1.0!”
Referências
Postado em: 19 de julho de 2006 por Pedro Rogério
É claro que sites desenvolvidos em CSS carregam mais rápido, a manutenção é mais fácil pelo fato de você editar somente um arquivo, mas existem aqueles que querem provar o contrário. A minha opnião referente ao assunto é a seguinte: Vou continuar desenvolvendo meus sites com CSS.
Postado em: 17 de julho de 2006 por Pedro Rogério
Postado em: 17 de julho de 2006 por Pedro Rogério
Você que está iniciando no ramo de Desenvolvimento para a Web, ou até mesmo gostaria de entrar nesse mundo, não pode deixar de visitar o site HTML.net, ele possuía uma versão em inglês, que foi traduzida em conjunto com o Maujor.
