Arquivo da categoria: Artigos

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. 😉

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

Image-replacement: use com cuidado

Na lista de discussão webstandards-br rolou há pouco uma discussão sobre o uso de image-replacement e o posicionamento do Google quanto a isso. Leia com mais detalhes o que o Google diz sobre image-replacement. Atentem para o seguinte parágrafo:

Se percebermos que o seu site tem texto e links ocultos com propósito enganoso, ele pode ser removido do índice do Google e não não vai mais aparecer nas páginas de resultados de pesquisa. Ao verificar seu site para ver se ele tem texto e links ocultos, procure por elementos que não sejam visíveis aos usuários da página. Existem textos ou links presentes exclusivamente para mecanismos de pesquisa e não para visitantes?

Isso mesmo. O Google recomenda não usar image-replacement nem esconder conteúdo textual de seus visitantes. Isso inclui aqueles textos descritivos que a gente costuma deixar no HTML só para usuários que usam tecnologias assistivas, como os links “pular para o conteúdo”, “ir para o menu principal” e etc. É bem verdade que há controvérsias quanto à rigorosidade do Google quanto isso. Uns dizem que o que não pode é exagerar no tamanho do texto escondido, que até 75 caracteres não há problema. O parágrafo acima também dá margens para um possível “bom senso” do googlebot. O certo é que é melhor prevenir do que remediar, já dizia o velho deitado.

Mas a questão principal do tópico era o uso de image-replacement no título do site, a famosa técnica de colocar o título do site em um link dentro de um h1 e, via CSS, ocultar o texto, substituindo-o pelo logotipo do site. Essa técnica é bastante usada por um sem-número de sites (inclusive de grandes evangelizadores) por aí, como o A List Apart, o Mezzoblue de Dave Shea e, só pra citar alguns dentro de nossa blogosfera: Maujor, Tableless, BrunoTorres.net e… o meu (tá, mas o meu é um tema pronto do WordPress :).

Mas qual o problema?

Se essa técnica é tão utilizada por blogs tão preocupados com os padrões e bem posicionados no Google, o que pode haver de errado com ela? Simples: A semântica. Vejamos o que o W3C nos diz sobre as tags hn (grifo meu):

A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

Como podemos ver, as tags hn são usadas para descrever seções e sub-seções de um site, e não o título do site ou o nome da empresa. Um exemplo de bom uso das tags hn é o seguinte:


<div class="secao">
    <h1>Título da seção</h1>
        <h2>Título da sub-seção</h2>
            <p>Conteúdo da sub-seção</p>

        <h2>Título da sub-seção</h2>
            <p>Conteúdo da sub-seção</p>
</div>

Como bem disse no decorrer do tópico o Israel Cefrin, se pensarmos que o HTML foi inventado para fins acadêmicos, é fácil entender o uso dos cabeçalhos, comparando-os com a estrutura básica de uma monografia, ou um trabalho acadêmico.

Mas e o título do site, como fica?

Oras, a tag title serve pra quê? Vejamos:

Authors should use the title element to identify the contents of a document. Since users often consult documents out of context, authors should provide context-rich titles. Thus, instead of a title such as “Introduction”, which doesn’t provide much contextual background, authors should supply a title such as “Introduction to Medieval Bee-Keeping” instead.

É uma boa prática, inclusive de SEO, colocar na tag title o nome do site e o contexto atual da página. Um bom exemplo do uso da tag title é esta exata página que voce está lendo. Olhe o título dela: Image-replacement: use com cuidado « Blog do Jader. Bonito, não? Isso me diz que eu estou, dentro do Blog do Jader, lendo o artigo Image-replacement: use com cuidado.

Ok, o título do site é com a tag title, mas e o logotipo?

O logotipo do site é uma imagem com relevância de conteúdo e não de decoração, certo? Logo, deve ser usada a tag img, com seu atributo alt devidamente preenchido. Isso garante que tanto mecanismos de busca quanto usuários, independentemente do dispositivo utilizado para acessar o seu site, tenham acesso ao conteúdo do logotipo.

Não faz sentido colocar essa imagem dentro de um h1 pois, como já vimos, as tags hn são para títulos de seções do site. Para que a imagem do logotipo tenha um identificador único, pra que seja mais fácil posicioná-la com CSS, basta acrescentar um id à tag e pronto, você já tem tudo o que precisa pra fazer o que quiser com ela.

Conclusões

Você pode estar se perguntando onde eu quero chegar com todo esse papo de semântica, SEO, estrutura de um documento, etc. A resposta é simples: a semântica é tudo e mesmo os gurus a deixam de lado às vezes. Boa parte das técnicas existentes que envolvem puramente HTML + CSS são baseadas na solução do problema e na validação do código. A semântica fica de lado e às vezes nem percebemos isso. Eu mesmo, antes desse tópico, nem pensava que essa prática tão comum pudesse estar tão errada semanticamente.

Faz parte do cotidiano de um desenvolvedor pesquisar novos meios de se resolver velhos problemas e, o que é mais importante, estar diposto a romper com velhos hábitos e se atualizar. O questionamento das ditas “verdades absolutas” é essencial para o crescimento não só no âmbito pessoal, mas também no profissional, e com isso nós temos sempre que estar lidando.

13 Comentários

Arquivado em Artigos, Cotidiano, Semântica, Tableless, Web Standards, XHTML

Sai Firefox, entra Flock

Há alguns dias saiu na Smashing Magazine um artigo sobre “browsers interessantes sobre os quais você nunca ouviu falar” e, posteriormente, o Pedro também falou sobre alguns deles.

O fato de eu descobrir que o Flock, um fork do Firefox, voltado à integração com as principais redes sociais, chegou em sua primeira versão estável, em conjunto com a minha insatisfação com o desempenho do Firefox me animou a testá-lo mais uma vez. Eu já havia testado o Flock antes, quando ele ainda estava em seus primeiros passos, mas na época não vi muita novidade e acabei não me interessando e desinstalando logo. Bem, as coisas mudaram.

Como disse, o Flock é bastante voltado para a integração com as redes sociais mais conhecidas, como Flickr, Del.icio.us, WordPress, Youtube, Facebook, entre outros. Existem recursos realmente facilitadores nele, como, por exemplo:

  • upload de fotos para o Flickr, direto do browser;
  • o Web Clipboard, uma espécie de área de transferência integrada ao browser;
  • gerenciador de contas e serviços (sem comentários);
  • interface para publicação de posts (na qual estou escrevendo este artigo), com editor bastante parecido com o usado pelo WordPress. Basta informar uma conta em algum serviço de blog conhecido, ou no seu próprio blog e começar a escrever seus posts;

Além disso, o Flock, como é baseado no Firefox, suporta todas (pelo menos das que testei) as extensões do Firefox, o que significa que você não precisa abrir mão de suas comodidades se quiser migrar do Firefox pro Flock.

Com o visual mais bonito, a mesma engine e uma integração fantástica com diversos serviços pela web, além de um desempenho melhor (meu Firefox chegava quase aos imperdoáveis 200MB de consumo) não tive que pensar duas vezes antes de mudar logo de browser. Estou confortável com o Flock e é nele que pretendo ficar, pelo menos até o lançamento “final” do Firefox 3. 🙂

Blogged with Flock

Tags: , , ,

9 Comentários

Arquivado em Artigos, Browsers, Cotidiano, Pessoal, Softwares

Diga “Oi” para o pingüim

Eu já venho namorando o Ubuntu há tempos. Desde o lançamento da penúltima versão (7.04 codinome Feisty Fawn) eu já venho tentando instalá-lo, porém, pela incompatibilidade do meu hardware (que era bem fraquinho) eu acabei desistindo por um tempo e me contentando com o Windows.

Acontece que eu comprei uma máquina nova, com hardware bem superior ao da máquina anterior e, além disso, uma nova versão do Ubuntu foi lançada exatamente na mesma semana que minha máquina nova chegou. Depois de ler em vários sites por aí e no próprio site do Ubuntu que a versão 7.10 (codinome Gutsy Gibbon) tinha um suporte melhor a diversos drivers não-suportados no Feisty, eu resolvi dar mais uma chance ao pingüim.

Meu Desktop Ubuntu Gutsy Gibbon

Baixei o .iso diretamente do site do Ubuntu um dia após o seu lançamento pois no dia do lançamento os servidores estavam congestionadíssimos e era quase impossível baixar o arquivo por lá. E a instalação foi tranqüila. Particionei o HD pelo Windows usando o PartitionMagic, dei o boot pelo CD do Gutsy, segui 7 passos super simples e pronto: com menos de 40 minutos, o Ubuntu estava instalado em minha máquina, sem necessitar de intervenção nenhuma durante a instalação. Reiniciei a máquina, tirei o CD da bandeja e dei “olá” ou admirável mundo novo.

O processo foi estupidamente simples. Ao contrário do que tinha acontecido com a tentativa de instalação do Feisty, não tive nenhum problema com hardware, nenhum sequer. Não precisei mexer em nada com relação a configurações de hardware, exceto pela instalação do driver de aceleração de vídeo da nVidia, pra poder ter todos aqueles efeitos mirabolantes na minha área de trabalho. Três cliques cuidaram disso pra mim.

Estou satisfeitíssimo com o Ubuntu, tanto pela performance quanto pela simplicidade de se fazer tudo. Você só precisa ir ao terminal se quiser, pra tudo o que você faria nele há uma aplicação gráfica que tome conta, mesmo que não esteja instalada por padrão no sistema. Enquanto isso, o Windows está lá na partição dele, pronto pra quando eu precisar de um Photoshop, Illustrator ou InDesign da vida (e só pra isso). 🙂

Ah! E aí vai a configuração da minha máquina nova:

  • ASUS P5LD2-X (som e rede integrados)
  • Intel Dual Core 1.6ghz
  • Memória 1Gb DDR2
  • nVidia geForce 7300GS 256/512Mb
  • Monitor Samsung LCD 17″ widescreen

11 Comentários

Arquivado em Artigos, Cotidiano, Linux, Pessoal

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

Qual curso devo fazer pra me tornar um desenvolvedor web?

O Diego Eis postou um artigo interessantíssimo sobre Faculdades, cursos e conhecimento. E eu aproveito a deixa pra ressuscitar esse blog, que é uma coisa que eu já estou querendo fazer a muito tempo. 🙂
Este post também se enquadra no meme que está rolando por aí, embora, por motivos óbvios, eu não tenha sido convidado. 😛

Minha história com relação a cursos superiores é bem engraçada…
Fiz Engenharia de Produção até o 4º período, porque era “meu sonho desde criancinha” (e também dos meus pais, claro). Quando entrei pra faculdade eu já sabia algo de desenvolvimento web, mas muito superficialmente. Eu só fazia uns layoutzinhos de brincadeira no Photoshop de vez em quando e andava lendo sites como o finado BananaDesign.com.br (que, apesar do nome engraçado, contava com ótimos colunistas, entre eles, Renê de Paula Jr.).

Aconteceu que, a medida que eu ia tendo mais contato com os cálculos eu sentia que eu realmente gostava daquilo, mas não era daquilo que eu queria sobreviver. Ao mesmo tempo, eu ia me aprofundando em assuntos mais específicos sobre o desenvolvimento web como usabilidade, UX, princípios de design de interfaces, e tudo isso ia me agradando muito. E foi então que eu decidi descobri que Engenharia definitivamente não estava mais nos meus planos.

Nessa época eu estava ainda na metade do 3º período e decidi não interromper o curso de imediato, temendo estar tomando uma decisão precipitada. De qualquer forma, durante o tempo que podia, eu comecei a me dedicar a coisas mais práticas do desenvolvimento web, começando a aprender XHTML e CSS. Sites como Tableless, BrunoTorres.net, Revolução Etc e Maujor foram essenciais nessa etapa.

Foi então que surgiu uma oportunidade pra eu estagiar numa agência web aqui da cidade, em meio período. Resolvi topar o desafio (desafio mesmo, já que eu não sabia praticamente nada até aquele momento), já que daria pra conciliar o estágio com a faculdade.
Foi a gota d’água pra que desistisse da engenharia de uma vez por todas. A medida que eu ia vendo como as coisas funcionam (ou, muitas vezes, como deveriam funcionar) eu ia me encantando mais pelo desenvolvimento web e senti que era nesse meio que eu gostaria de viver.
A essa altura, eu já tinha completado o 3º período e estava iniciando o 4º.

Meus pais quase desmaiaram de susto quando eu disse que não queria mais seguir na engenharia. Ainda mais quando ficaram sabendo que o que eu queria fazer era Publicidade & Propaganda. Chegaram até a dizer que eu não precisei de curso superior pra exercer o cargo que eu já estava exercendo, o que não aconteceria com a engenharia. Ficou claro o preconceito que eles têm tinham quanto ao mercado da internet, julgando-o como “coisa de menino sem ter o que fazer, ou sem interesse em coisas mais importantes”. Muitas ladainhas depois, eles acabaram aceitando (mesmo sem concordar) minha opção.
Matrícula trancada, aproveitei pra investir meu tempo livre em mais aprendizado na área, entre outras coisas, claro.

Bom, acabo de completar o 1º semestre de Publicidade & Propaganda e posso dizer que não poderia ter feito escolha melhor. Minha mente já está pipocando de idéias para futuros projetos, o que não havia acontecido após quase 2 anos de engenharia. Os conhecimentos que tenho adquirido principalmente nas áreas de antropologia e filosofia(!) têm sido bastante importantes pra que eu possa compreender mais esse “mundo 2.0” em que vivemos.
Espero continuar com essa ótima expectativa para o futuro e conseguir pôr meus projetos em prática, o que certamente me trará um retorno muito mais positivo do que estou tendo atualmente.

Bom, essa foi e tem sido minha experiência com cursos superiores. Cursos intensivos eu nunca fiz, nem cogito fazer. No mais, sempre estou atento a eventos, palestras e workshops e vou começar a participar deles sempre que puder, começando pelo CodeShow.

Espero que, com esse verdadeiro testemunho, eu tenha ajudado a elucidar que não existe o curso pra se tornar desenvolvedor web. Aprender XHTML, CSS, Javascript, Ajax, PHP, Python, Ruby, etc. qualquer um com um pouco de tempo e disposição pra garimpar a web atrás de referências pode aprender. A escolha do curso ideal pra você vai depender do foco que você irá querer dar em sua atuação na web, o que vai muito, mas muito além de tecnologias ou ferramentas, que é só o que se aprende (e às vezes até muito mal) em faculdades e em alguns cursos intensivos.
Ter uma certificação de um curso intensivo é bom? Sim. Pode fazer a diferença na hora de ser contratado? Talvez. O que é fato é que a web é e está caminhando pra ser cada vez mais multidisciplinar e, às vezes, se mergulhar em cursos pra aprender tecnologias ou ferramentas pode não ser tão proveitoso quanto buscar um diferencial no quesito multidisciplinaridade. Até porque existem muitos autodidatas por aí que dão show em pessoas certificadas na tecnologia X ou Y. 😉

Gostaria de ver estes caras falando sobre a experiência deles com relação a cursos superiores e/ou intensivos:

Um abraço a todos vocês, leitores fiéis que sobreviveram a todo esse tempo de seca. Dessa vez eu vou tentar ser mais freqüente com minhas postagens, juro!
Até mais.

6 Comentários

Arquivado em Artigos, Carreira, Cursos, Estudos, Mercado