Arquivo da categoria: Tutoriais

Menu multinível em cascata com jQuery

Bom, depois de mais de um mês sem movimento por aqui, cá estamos nós de novo, desta vez com uma novidade: é o primeiro screencast que gravo e espero que não seja o último. 🙂

Nesse screencast eu mostro como é simples fazer um menu em cascata (ou árvore, como preferirem) usando apenas HTML limpo e semântico, um pouco de CSS e poucas linhas de Javascript, usando jQuery. O screencast está disponível através desse link.

Detalhes do download:

  • Formato do arquivo: .rar
  • Tamanho do arquivo: ~30MB
  • Conteúdo do arquivo: vídeo e código fonte do exemplo.
  • Formato do vídeo: .mov 960×600
  • Tempo de duração do vídeo: 13 minutos

Se você gostou, não gostou, ou quer sugerir um tema para o próximo screencast, a caixa de comentários está logo aí embaixo. 😉

Anúncios

7 Comentários

Arquivado em Artigos, Javascript, jQuery, Screencast, Tutoriais, Web Standards

Como se prevenir para a chegada do IE8

O Internet Explorer 8 está chegando aí e seu lançamento pode servir tanto de alívio como dor de cabeça pra nós desenvolvedores, visto que vários bugs das versões “atuais” (IE’s 6 e 7) serão corrigidos, porém os hacks estrela (* html para IE6 e *+html para IE7) continurão o hack estrela para o IE7 (*+html) continua funcionando no IE8.

Trabalho é legal, mas re-trabalho é entediante…

Se você, como eu, é do tipo que não gosta de re-trabalho, é bom começar a pensar nisso. E é o que eu tenho feito nos meus últimos projetos. Tento evitar ao máximo o uso de hacks, mas quando não dá pra escapar, recorro aos recursos técnicos de emergência (aka gambiarra). A própria Microsoft (quem diria…) bem que nos avisou ainda na época do lançamento do IE7: prefiram os comentários condicionais.

Comentários condicionais? Mas isso não aumenta meu trabalho?

A grande desculpa esfarrapada para o não-uso dos comentários condicionais é que o número de arquivos CSS podem aumentar consideravelmente e isso em projeto grandes pode se tornar em um caos para administrar. O fato é que, apesar de não ter me envolvido em nenhum projeto grande até hoje, eu costumo pegar alguns layouts complexos pra codificar (<jabá>vide portfolio da Interag, desatualizado e prestes a sofrer alterações</jabá>) e, mesmo assim, é raro eu ter que criar mais de um arquivo CSS especificamente para os IE’s e esse único geralmente não tem mais do que 15 ou 20 linhas de código. Isso mesmo. Eu crio apenas um único arquivo CSS que cuida das incompatibilidades do IE6 e do IE7. Como?

<!--[if (IE 6)|(IE 7)]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen, projection"><![endif]-->

Esse trecho de código faz a mágica. Nele nós dizemos que, caso o browser do usuário seja o IE na versão 6 ou 7, um novo arquivo ie.css deverá ser incluído na página. Colocamos esse código no <head></head> de nosso documento e pronto. Agora tudo o que temos que fazer é, dentro desse arquivo ie.css declarar as regras CSS específicas para o IE6, para o IE7 e para ambos:

/* ie6 e ie7 */
.clearfix { display:inline-block; }

/* apenas ie6 */
* html #geral { height: 1px; }

/* apenas ie7 */
*+html legend { text-indent: -5px; }

Mas olha os hacks ali! Você trapaceou!

Como dito anteriormente, apenas as versões 6 e 7 do navegador da Microsoft verão esse arquivo. Portanto, é OK usar hacks específicos para essas duas versões do browser dentro desse arquivo (e somente dentro dele). 😉

Um exemplo prático

Nada como um exemplo mais prático para compreendermos como funcionam as engrenagens. Vamos assumir que temos a seguinte marcação no nosso HTML:

<h1>Olá! Eu sou um exemplo prático. :)</h1>

OK, esse exemplo não foi nada prático. Mas continue seguindo, você não tem nada a perder…
Bem, suponhamos que queiramos que esse título assuma as seguintes formatações:

  1. azul com fundo branco nos browsers;
  2. branco com fundo azul no IE7;
  3. branco com fundo vemelho no IE6.

Para isso, precisaríamos ter em nosso arquivo CSS principal a seguinte regra:

h1 {
    color: #00B;
    background-color: #FFF;
}

E o nosso arquivo ie.css ficaria da seguinte forma:

/* ie6 e ie7 */
h1 { color: #FFF; }

/* apenas ie7 */
*+html h1 { background-color: #00B; }

/* apenas ie6 */
* html h1 { background-color: #B00; }

Se você testar esse código nos browsers de verdade (gentilmente incluindo o IE8 aqui, como colher de chá), verá que o título está azul com fundo branco, como previsto. Já nos IE’s 6 e 7 o título estará branco; no IE7 com fundo azul e no IE6 com fundo vermelho.

That’s all, folks. Em breve espero postar mais artigos pra movimentar novamente o blog. Ou não.

6 Comentários

Arquivado em Artigos, Browsers, CSS, Internet Explorer, Tutoriais, Web Standards

Faça o Dreamweaver trabalhar a seu favor – Parte I: Benefícios gerais

Depois de uma semana longe do meu computador (eu já estava me prometendo isso a meses :P), mais de 300 e-mails e mais de 600 feeds pra ler, estamos de volta. E pra voltar, vou começar uma pequena série que eu já estava planejando à altura do post passado, que tratará do uso do Dreamweaver para a produtividade, sem perder de vista o uso dos padrões web.

Eu já fui purista extremista. Já meti o pau em quem usava Dreamweaver, assimilando-o com o descaso com o desenvolvimento em web standards. Mas o tempo passa e a gente cresce e aprende que a qualidade do código está diretamente ligada ao desenvolvedor e não ao editor usado. Depois da lição de vida (:P) vamos logo ao que interessa.

Benefícios gerais do Dreamweaver

Na minha época de purista, vivia “pulando de editor em editor”, quase toda semana eu testava um e o que mais tinha me agradado no final das contas era o EditPlus por algumas facilidades que ele me proporcionava. Quando comecei a trabalhar em uma agência web e tive que usar o Dreamweaver eu chiei muito, mas acabei aceitando a idéia e passei a buscar vantagens e pesar vantagens/desvantagens em relação ao EditPlus e vi que não fazia sentido continuar com tanto preconceito com o Dreamweaver. Nesta primeira parte da série, vamos focar nos benefícios já incluídos no Dreamweaver. Mais adiante veremos coisas um pouco mais divertidas, como customizar algumas coisinhas…

Gerenciamento de sites (Dreamweaver sites)

É um dos recursos mais fantásticos e úteis do Dreamweaver. Através do Manage Sites é possível definir sites armazenados localmente ou remotamente, tanto em um outro computador da rede quanto em um servidor on-line. Também é possível especificar o modelo de servidor do site, como por exemplo PHP MySQL, ASP.NET, JSP, etc. também com acesso local ou via FTP.

Um outro recurso muito útil no manuseio de sites no Dreamweaver é a atualização automática dos links quando se altera o nome de um arquivo ou pasta. O Dreamweaver tem uma paleta chamada Files (F8) que lista todos os arquivos e pastas de seu site. Assim, se você resolver mudar o nome de uma pasta, arquivo de imagem, ou qualquer arquivo que seja, ele perguntará se você deseja atualizar os links contidos em outros documentos que apontavam pra esse arquivo/pasta que você renomeou. Em projetos grandes isso é muito, muito útil.

Auto-completar

Há algum tempo atrás eu era completamente contra o uso do auto-complemento, mas, como disse, o tempo e a experiência em um ambiente “real world” de produção me ensinaram que produtividade é tudo.

O recurso de auto-complemento do Dreamweaver em si não é lá um grande diferencial, já que vários outros softwares oferecem algo parecido, o que ele tem a mais é que ele busca id’s e classes definidas na folha de estilos linkada ao documento, o que quase sempre é muito útil. Ainda há algumas tags deprecated, mas algumas já foram “capinadas”.

O que eu acho muito bom mesmo é o fato de ele fechar automaticamente as tags assim que é digitado o “>” da abertura da tag (precisa ser habilitado na seção Code Hints em Edit > Preferences).

Find/Replace robusto

Sem dúvida o melhor Find/Replace do qual já ouvi falar. Permite várias combinações, incluindo uso de expressões regulares, busca por tags específicas, busca por textos específicos dentro de tags específicas, busca no documento atual, em todos os arquivos do site atual, todos os arquivos abertos, todos os arquivos de uma pasta específica, etc. Não dá nem pra citar todas as possibilidades. 😛

Por hoje é só. Tenho que admitir que nunca me imaginei escrevendo um artigo desses, principalmente a favor do Dreamweaver, mas espero que tenham gostado e aproveitem bem essas dicas e as que ainda virão. Produtividade é de suma importância na vida de qualquer profissional e por isso é sempre bom saber tirar o máximo de proveito das ferramentas que temos disponíveis pois nós, profissionais de internet, bem sabemos que tempo realmente é dinheiro.

Um abraço a todos e até a próxima.

5 Comentários

Arquivado em Artigos, Dreamweaver, Produtividade, Softwares, Tutoriais