Ir para conteúdo / Skip to content

MATAR O IE COM UMA SÓ FUNÇÃO

Postado em: 28 de julho de 2006 por Pedro Rogério

Lamentavelmente 41% dos visitantes desse site usam o IE como browser padrão, é também o navegador mais usado da Web, mas lamentavelmente, os usuários não sabem que estão expostos a milhares de bugs e milhões de vulnerabilidades, se soubessem, mudariam rapidamente de navegador.

No post do Kriptopolis.org, ele ensina a matar o IE com uma só função. Abaixo você pode ver como ficaria o código:


<html>
<head>
<script>
	function Demo() {
  	    for (var i in window.alert) { var a = 1; }
	}
</script>
</head>
<body>

	<p align=”center”><strong><u>ATENÇÃO:</u></strong> Apertar esse botão pode matar seu Explorer!<br /><br />
  	<input type=’button’ onClick=’Demo()‘ value=’Matar meu Explorer!’></p>

</body>
</html>

Um clique sobre o botão com a função demo e bye, bye. Adeus IE.

EM CALCULATOR

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

XHTML SEMÂNTICO APLICADO A LISTAS

Postado em: 27 de julho de 2006 por Pedro Rogério

Semântica, em um modo geral, se refere ao significado das palavras, mas na Web, quando falamos em semântica, estamos nos referindo ao significado das etiquetas com que estamos marcando o nosso código, ou seja, XHTML é uma linguagem de marcação estrutural, cada elemento tem uma relação e um significado dentro do nosso documento.

Mas voltando as listas, em XHTML 1.0 (e 1.1), existem 3 tipos de listas:desordenadas, ordenadas e de definição, além disso, existem outras etiquetas que servem para indicar o uso dessas listas:

Etiqueta <li>

É uma etiqueta comum em listas desordenadas e ordenadas, e não pode ser usada em listas de definição, sua função é marcar um elemento de uma lista (por isso a definição: list item). Veja um exemplo:


<li>ASW</li>
<li>Acerbis</li>
<li>Smith</li>
<li>Wirtz</li>
<li>One</li>

Como podem ver, nosso exemplo não está completo, é agora que definimos se nossa lista é ordenada ou desordenada

Listas Desordenadas

As listas desordenadas (unordered lists) são aquelas que a ordem de seus elementos não é relevante, por exemplo, se não existe nenhum critério pré-determinado, pode ser usado uma lista desordenada no exemplo anterior, que se referem a marcas de produtos de motocross. A etiqueta a se usar é <ul>. Exemplo:


<ul>
  <li>ASW</li>
  <li>Acerbis</li>
  <li>Smith</li>
  <li>Wirtz</li>
  <li>One</li>
</ul>

Listas Ordenadas

As listas ordenadas (ordened lists) são aquelas onde há importância na ordem dos elementos, são aquelas listas que classicamente aparecem numeradas, mas mediante CSS é possível controlar a apresentação desses elementos para que ao invés de números apareçam números romanos, letras gregas, etc.

O critério para decidir se uma lista é ordenada ou desordenada depende em última instância de quem está escrevendo o código, por exemplo, na lista anterior, eu só listei algumas marcas referentes a Motocross. Mas vamos tomar agora como exemplo uma lista onde a ordem dos elementos tem importância:


<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ol>

O resultado você pode ver nesse exemplo.

Listas de definição

As listas de definição tem uma estrutura distinta das listas ordenadas e desordenadas, pois neste caso fazemos o uso de 3 etiquetas: <dl>, <dt> e <dd>, onde temos a lista de definição (definition list), termo a definir (definition term) e a descrição da definição (definition description) respectivamente. Para uma melhor compeensão, veja abaixo um exemplo:


<dl>
 <dt>http://parlenda.blogspot.com</dt>
   <dd>Conteúdo variado sobre tecnologia, segurança, redes e sistemas operacionais</dd>
 <dt>http://blog.joaovagner.com.br</dt>
   <dd>Design, tecnologia da informação, programação e linux</dd>
<dt>http://www.brunoalves.eti.br</dt>
   <dd>Tecnologia em geral, com foco em Linux, Software Livre, Blogs, Wordpress e servidores</dd>
</dl>

Um exemplo em funcionamento você pode ver a seguir.

Temas para Wordpress

Postado em: 26 de julho de 2006 por Pedro Rogério

No site de Emily Robbins você irá emcontrar uma lista com 980 temas gratuitos para Wordpress, dentre eles, temas de 2 colunas, temas de 3 colunas, que funcionam desde a versão 1.5 do Wordpress até a sua versão atual.

Se você procura temas para Wordpress estilo magazine, experimente dar uma olhada nesse post

ABBR CADABRA

Postado em: 26 de julho de 2006 por Pedro Rogério

Uma maneira não muito interessante (válida), de se fazer a tag <abbr> funcionar no IE.

CSS BROWSER SELECTOR

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.

GUIA CSS - 6ª PARTE: SPANs

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.

APRESENTAÇÕES AMIGÁVEIS NA WEB

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:

UMA VEZ PROGRAMANDO ERRADO - SEMPRE DARÁ ERRADO

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!

UTILIZANDO ATIBUTOS ALT EQUIVALENTE AS IMAGENS

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