gabrielso.com/blog

Ok, eu já tinha visto pelo menos meia dúzia de posts desse tipo só essa semana. Finalmente meu estimado colega Adriano Almeida (@adrianoalmeida7) me convidou a postar as minhas ferrametas de trabalho.

Máquina e Sistema Operacional

Sou usuário de Macintosh desde 1998 ou 1999. Meu primeiro contato foi a trabalho, um PowerMac G3 (torre bege). Era uma máquina excepcional com seu processador PowerPC de 333MHZ e seus espetaculares 768MB de RAM. Na ocasião o sistema operacional era o Mac OS 8.6. Desde então sou um fã incondicional do Mac OS.

Hoje tenho um MacBook Pro 13″ (comprado em março/2010). A única atualização que fiz nele foi trocar seus 2GB de RAM pelos 4GB que eram do MacBook do Sérgio Lopes (@sergio_caelum – não conta pra ele que eu ainda tô devendo R$ 50,00 desse rolo). Estou feliz e contente rodando Snow Leopard (10.6.5) em inglês.

As 13″ são insuficientes para o trabalho, então sempre que tem um monitor sobrando na Caelum, eu plugo nele. Aqui em casa eu ligo um cabo DVI-HDMI e mando ver na minha Samsung Série 6 de 40″. Isso quando as crianças não querem assistir Disney Channel ou Discovery Kids.

Editor

Como sou designer e programador, utilizo dois tipos de editor: de imagem e de texto.

Para imagens, o combo Photoshop para pixels e Illustrator para vetor vem me acompanhando há mais de uma década. Eu gostava mais do FreeHand para vetor, mas a Adobe fez o grande favor de acabar com ele quando comprou a Macromedia. Grande erro.

Para texto, código, sinceramente, tanto faz, não sou fiel a nenhum. Sigo mais ou menos esse padrão:

• HTML, CSS e JavaScript – TextMate
• Ruby e Ruby on Rails – TextMate
• PHP – TextMate ou Eclipse
• Java – Eclipse
• Arquivos soltos por aí – Vim ou Nano
• .NET – Visual Studio para C# e crucifixo pra VB. Tenho traumas.

Terminal

Uso muito o Terminal, muito mesmo, até pras coisas que não precisa. Uso bash mesmo sem frescuras, só umas linhas de customização no profile pra colocar umas cores bacanas e o nome e status do branch atual do Git.

Browser

Uso todos, sem brincadeira. Cada dia uso um. Tenho instalado na minha máquina Safari, Chrome, Firefox, RockMelt, Flock e Opera. Gosto muito do Opera, de verdade, usem um tanto pra ver como é bacana. Preciso terminar de configurar minhas VMs com todas as versões do Internet Explorer para testes.

Software

O software que mais uso no meu Mac é o Alfred. O Alfred mudou a maneira como eu uso o Mac, e olha que eu uso há muito tempo e conheço um bocado de truques. Fora isso tenho instalado Adium (e continuo procurando por um substituto pra ele, não gosto), TweetDeck, iWork (embora eu só use o Keynote), Cyberduck, Dropbox, GitX quando quero ver melhor os commits, VLC pras horas de lazer e tenho um MAMP aqui (não tenho vergonha de admitir) pra fazer algumas coisas com PHP, principalmente WordPress.

Source Code

Não tenho restrições. Depende sempre do projeto, mas gosto muito do Git. Acho que todo mundo deveria usar o Git, inclusive designers, para arquivos de Photoshop e Illustrator. Sério.

Música

Sou muito eclético, muito mesmo, gosto de Beatles, Massive Attack, Beatles, Portishead, Beatles, Pantera, Beatles, Sepultura (das antigas), Beatles, Kings of Leon, Beatles, Alice In Chains, Beatles, Los Hermanos, Beatles… e a banda que eu mais gosto é Beatles. Mas ouço um pouco de tudo, desde que tenha Beatles no meio.

O problema é que quanto tá muito barulho, difícil de se concentrar, eu coloco meus fones de ouvido (PortaPro, da Koss) e escuto qualquer coisa no talo. Daí minha produtividade vai a zero, pois eu fico fazendo air drumming. Preciso parar com isso.

E isso é tudo, pessoal. Obrigado ao Adriano pelo convite da brincadeira.

Um abraço e até logo!

O CSS nos oferece uma ampla gama de seletores, pelos quais podemos “localizar” um ou mais elementos em nossa estrutura do HTML. Os mais tradicionais são os seletores de tags, classes e ids.

Existem outros seletores, entre eles o talvez menos conhecido e com certeza mais flexível é o seletor de atributo, e funciona da seguinte maneira:

[href] {
  color: rgb(102,0,0);
  border-bottom: 1px dotted rgb(102,0,0);
}

/*
  O seletor acima aplica-se à todos
  os elementos que tenham o atributo "href".
  Ex: <a href="#">Topo da página</a>
*/

Seletor de atributo com valor específico: =

Nós podemos também buscar por um atributo que tenha um determinado valor, da seguinte maneira:

[href="http://www.google.com"] {
  color: rgb(51,102,153);
}

/*
  O seletor acima aplica-se à todos
  os elementos que tenham o atributo "href"
  com o valor especificado.
  Ex: <a href="http://www.google.com">Google</a>
*/

Se um link nos levar à qualquer outro endereço que não o determinado no seletor, ele não sofrerá interferência do CSS declarado naquele seletor.

No CSS 2.1, que é a versão “estável” e mais compatível (leia-se “funciona no IE”), podemos trabalhar com outros dois operadores quando precisamos selecionar um elemento por qualquer um de seus atributos. O primeiro deles busca pelo que chamamos de “prefixo”.

Seletor de atributo com prefixo específico: |=

O W3C determina que, se utilizarmos um hífen “-” no valor de um atributo, a parte que vier à esquerda do hífen é um prefixo. Por exemplo, no elemento <p class=”big-text”>Meu texto será grande</p>, “big” é um prefixo do atributo class.

Essa determinação de prefixos é muito útil quando estamos estilizando um trecho de HTML que virá de um outro site, como um Widget, ou quando estamos criando um Widget que será exibido em diversos sites. Utilizando prefixos a gente contribui com a sanidade de muita gente.

Para selecionar um elemento pelo prefixo do valor de um atributo, faremos o seguinte:

[class|="big"] {
  font-size: 185%;
}

/*
  O seletor acima aplica-se a todos
  os elementos cujo atributo "class"
  tenha o valor começando com "big-"
  Ex: <p class="BIG-text">...</p>
      <div class="BIG-content">...</div>
      <span class="BIG-post">...</span>
*/

Notem que no seletor NÃO utilizamos o hífen em si. Somente o prefixo.

Seletor de atributo com palavra específica: ~=

Outro caso interessante, principalmente quando tratamos do atributo class, é que podemos ter vários valores separados por espaço. No caso aplicamos mais de uma classe em um mesmo elemento. Vocês já devem ter visto algo do gênero <div class=”destaque selecionado”>…</div>

[class~="selecionado"] {
  border: 1px dotted rgb(204,204,204);
}

/*
  O seletor acima aplica-se a todos
  os elementos cujo atributo "class"
  tenha a PALAVRA "selecionado".
  Ex: <p class="teste SELECIONADO grande">...</p>
*/

Outros seletores de atributo com CSS3

Com o CSS 3, estão sendo definidos novos operadores para os seletores de atributo. Nós já vimos o operador de prefixo “|=” e o de palavra “~=”. Além desses temos os seguntes operadores:

Seletor de atributo com busca no início do valor: ^=

[class^="gra"] {
  padding: 8px;
}

/*
  O seletor acima aplica-se a todos
  os elementos cujo atributo "class"
  começe com "gra"
  Ex: <p class="GRAnde">...</p>
      <div class="GRAde">...</div>
      <ul class="GRAvidade">...</ul>
*/

Seletor de atributo com busca no final do valor: $=

[class$="lha"] {
  padding: 8px;
}

/*
  O seletor acima aplica-se a todos
  os elementos cujo atributo "class"
  termina com "lha"
  Ex: <p class="traLHA">...</p>
      <div class="toaLHA">...</div>
      <ul class="oLHA">...</ul>
*/

Seletor de atributo com busca genérica no valor: *=

[class*="ato"] {
  padding: 8px;
}

/*
  O seletor acima aplica-se a todos
  os elementos cujo atributo "class"
  contenha "ato" em qualquer posição
  Ex: <p class="sapATO">...</p>
      <div class="rATOeira">...</div>
      <ul class="ATOres">...</ul>
*/

P.S.: Nos exemplos acima eu utilizei CAIXA ALTA somente para exemplificar o padrão encontrado nos valores. Não há nenhuma relação ou protesto contra do fato do Google querer abolir o CAPS LOCK, ok?

Um abraço e até logo!

Você já deve ter percebido que quando selecionamos um trecho de texto em uma página, por padrão, é adicionado um fundo azul claro, indicando quais caracteres fazem parte da seleção.

Uma coisa que nem todos sabem é que os browsers tem um estilo padrão para todos os elementos que são exibidos, e para os diversos estados que cada elemento pode ter. Nesse caso, quando selecionamos um trecho de texto, a pseudo-classe “selection” é adicionada àquele pedaço de HTML.

Para acessá-la podemos utilizar o seletor “::selection” em nosso CSS, e passar as características que queremos aplicar ao elemento. No exemplo abaixo vamos deixar o texto selecionado com uma cor parecida com as tradicionais canetas marca-texto:

::selection {
  background-color: rgb(220,255,0);
}

O resultado é o seguinte:

Como não poderia deixar de ser, a implementação do seletor não é padrão para todos os navegadores. Testei no Firefox, Chrome, RockMelt, Flock, Opera e Safari para Mac. No Firefox não funcionou, pesquisando rapidamente descobri que podemos utilizar o prefixo “-moz-” no seletor, como no código a seguir:

::selection {
  background-color: rgb(220,255,0);
}

::-moz-selection {
  background-color: rgb(220,255,0);
}

Fato curioso que a seleção múltipla, declarando os dois seletores separados por vírgula, não funciona. Portanto temos que criar um seletor para cada caso.

Alguém aí interessado em testar em vários navegadores, em outras plataformas? Incluindo no Internet Explorer? Coloque o resultado aqui nos comentários!

Um abraço e até logo!

Bem-vindos ao meu blog!
Vamos começar com a devida introdução do autor.

Meu nome é Gabriel, sou formado Técnico em Publicidade e Propaganda pelo Colégio Politécnico Bento Quirino, e Bacharel em Comunicação Social – Publicidade e Propaganda com Ênfase em Marketing pela PUC-Campinas.

Entre 1997 e 2005 eu passei por algumas agências de comunicação na minha cidade natal (Jundiaí – SP). Comecei como arte-finalista estagiário e com o passar dos anos eu trabalhei em diversos cargos relacionados à criação, redação e direção de arte. Durante esse período eu participei, por curiosidade e afinidade com o assunto, de diversos projetos de desenvolvimento de sites e aplicações para Web.

Em 2005 eu tive a oportunidade de migrar para a área de tecnologia da informação, participando de um projeto como designer de usabilidade e experiência do usuário. Ali descobri que essa área é muito carente e ainda pouco valorizada no Brasil, mas o cenário demonstrava, e ainda demonstra, um excelente potencial para quem quer desenvolver um trabalho com qualidade e profissionalismo. Junto com a parte teórica do assunto, estudei também o desenvolvimento de front-end para Web com HTML, CSS e JavaScript.

Hoje trabalho na Caelum – Ensino e Inovação (SP) como consultor, desenvolvedor e instrutor dos cursos de Web Design e Desenvolvimento de Aplicações Web com Ruby on Rails.

Aqui eu pretendo escrever principalmente sobre meu trabalho, mas também vou falar sobre outras coisas de meu interesse.

Obrigado pela visita e até logo!