Oxente Rails – Dois dias respirando Rails!

10 06 2009

Quer passar dois dias mergulhado em Rails junto com grandes Railers do Brasil e do mundo? E ainda curtir o sol numa das cidades mais bonitas do Brasil? Venha para o Oxente Rails!

O Oxente Rails vai acontecer em Natal, RN, nos dias 07 e 08 de agosto. Na programação, palestras sobre Ruby on Rails, Desenvolvimento Ágil e diversos outros temas – interessantes pra quem ainda não conhece e pra quem já trabalha na área. Vai ser ainda uma ótima oportunidade de bater um papo e trocar experiências com outros Railers!

O evento vai contar com a presença de Railers de primeira linha do Brasil e do mundo. Obie Fernandez, Fábio Akita, Tapajós, Carlos Brando, Geoffrey Rosenbach, Cauê Guerra, Paulo Fagiani e Dante Régis, entre outros.

Natal é uma das cidades mais lindas do Nordeste, com sol o ano inteiro e praias pra todos os gostos. Aproveite o domingo depois do evento pra dar aquela descansada curtindo a paisagem. A sede do evento vai ser o auditório do IFRN, Instituto Federal de Educação Tecnológica do RN, todo coberto por Wifi com estacionamento gratuito e capacidade pra mais 500 pessoas.

As inscrições abrem em breve! Chame teus amigos e comece a arrumar as malas. Siga @OxenteRails no Twitter ou entre na nossa comunidade no Orkut pra ficar informado.

A chamada pra trabalhos estará aberta até dia 21 de Junho pra quem quiser mostrar algum projeto ou idéia legal. Se quiser divulgar sua empresa e ajudar o evento a acontecer, apoie o evento.





Promoção “Mês (Geek) das Crianças” no Meio Bit

26 09 2008

Olá, Pessoal

O Meio Bit, que vocês devem conhecer, tá com uma promoção bem bacana: Você escolhe uma instituição filantrópica pra ajudar, de três que eles indicam e divulga a promoção. O sorteado ganha um iPod e a instituição ganha um Wii!

Eu tô torcendo pro Lar Amor Real, que faz um trabalho bem legal com crianças.

Participe você também! Detalhes da promoção aqui.





mas vem cá, por que Rails?

19 08 2008

Não sei como é com vocês, mas eu só aprendo alguma coisa de verdade fazendo. E como eu quero muito aprender Rails de verdade, decidi fazer um sistema que eu já tô devendo ao +web faz um tempo. É um gerenciador de eventos, coisa simples. E graças ao estágio do Cefet, apareceram mais dois projetos pra eu fazer até o fim do ano: um sistema interno pra Techvirtual, onde estou estagiando, e alguma contribuição pro Redmine, que eu ainda não sei o que vai ser. Vai ser um fim de ano bem legal. =D

Pretendo falar um pouco desses projetos aqui no blog, registrando aqui minha evolução na plataforma. E a primeira coisa que eu quero explicar é porque eu escolhi Rails.

Bom, a resposta é simples. Primeiro, porque Ruby é a linguagem mais linda que eu conheço (programo em Delphi, entendo de linguagem feia). Python é legal também, mas não tanto. Sério. O tempo que eu ganho com Ruby é impressionante, e eu me divirto muito. Segundo, porque Rails é o framework mais lindo que eu conheço (programo em ASP.Net, entendo de framework feio). O tempo que eu ganho com Rails é impressionante, e eu me divirto muito.

Além do fator ‘me-divertir-enquanto-trabalho’, também escolhi Rails porque me permite criar, dentro das limitações do framework, aplicações complexas em pouquíssimo tempo, e vendo as coisas funcionarem desde o começo. Rails e a comunidade também enfatizam muito a questão da qualidade do código, seja através de DRY, (muitos) testes, ou qualquer outra coisa.

Como se já não fossem motivos suficientes, ainda tem a comunidade ao redor do Rails, muito prestativa e receptiva com os iniciantes. É difícil encontrar caras que se dedicam à comunidade como o Akita, o Carlos Brando e tantos outros, além de iniciativas como o grupo Aprendendo Rails. Nunca me aconteceu de não encontrar algo que eu queria e nem ter alguém pra perguntar.

Resumindo: eu me divirto enquanto trabalho com qualidade fazendo parte de uma comunidade muito bacana. O que mais eu podia querer? ;D





Tutorial Avançado de CSS: Especificidade

20 07 2008

image

Se você tem duas (ou mais) regras CSS conflitantes que se aplicam ao mesmo elemento, existem algumas regras básicas que o navegador segue para determinar qual é a mais específica e por isso a vencedora.

Isso pode não parecer importante, e na maioria dos casos você não vai encontrar conflito algum, mas à medida que seus arquivos CSS se tornam maiores e mais complexos, ou você passa a lidar com um número maior de arquivos, aumentam as chances de conflitos aparecerem.

Se os seletores são os mesmos o último sempre tem prioridade. Por exemplo, se você tem:

p { color: red; }
p { color: blue; }

Elementos p seriam coloridos de azul porque é a regra que vem por último.

De qualquer forma, você geralmente não vai ter seletores idênticos com declarações conflitantes (porque não faz muito sentido). Conflitos sempre aparecem, no entanto, quando você tem seletores aninhados. No exemplo seguinte:

div p { color: red; }
p { color: blue; }

Pode parecer que um elemento p dentro de uma div vai ser colorida de azul, já que a regra de colorir elementos p de azul vem por último, mas na verdade ele vai ser colorido de vermelho devido a especificade do primeiro seletor. Basicamente, quanto mais específico for um seletor maior prioridade ele vai ter quando aparecerem estilos conflitantes.

A especifidade real de um grupo de seletores aninhados precisa de alguns cálculos. Basicamente, você atribui a cada seletor de id (“#qualquercoisa”) um valor de 100, a cada seletor de classe (“.qualquercoisa”) um valor de 10 e a cada seletor HTML (“qualquercoisa”) um valor de 1. Aí você soma tudo e que rápido!, você tem o valor da especificidade.

  • p tem especifidade de 1 (1 seletor HTML)
  • div p tem especifidade de 2 (2 seletores HTML; 1+1)
  • .tree tem especifidade de 10 (1 seletor de classe)
  • div p.tree tem especifidade de 12 (2 seletores HTML e um seletor de classe; 1+1+10)
  • #obaoba tem especifidade de 100 (1 seletor de id)
  • body #content .alternative p tem especifidade de 112 (seletor HTML, seletor de id, seletor de classe, seletor HTML; 1+100+10+1)

Então de todos os exemplos usados, div p.tree (com especificidade de 10) venceria div p (com especificidade de 2) e body #content .alternative p venceria de todos eles, independente da ordem.

Páginas Relacionadas

Esse material é uma adaptação do CSS Advanced Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Avançado de CSS: Pseudo Elementos

20 07 2008

image

Pseudo elementos se ligam a seletores do mesmo jeito das pseudo classes, na forma seletor:pseudoelemento { propriedade: valor; }. Existem quatro pseudo elementos.

Primeira Letra e Primeira Linha

O pseudo elemento first-letter é aplicado à primeira letra de um elemento e first-line à primeira linha. Você pode, por exemplo, criar letras capitulares (drop caps) e parágrafos com a primeira linha em negrito dessa forma:

p:first-letter {
  font-size: 3em;
  float: left;
}

p:first-line {
  font-weight: bold;
}

Before e after

Os pseudo elementos before (antes) e after (depois) são usados em conjunto com a propriedade content pra colocar conteúdo de qualquer lado de um elemento sem tocar no HTML.

O valor da propriedade content pode ser open-quote (aspas de abertura), close-quote (aspas de fechamento), no-open-quote (sem aspas de abertura), no-close-quote (sem aspas de fechamento), qualquer texto delimitado por aspas duplas ou qualquer imagem usando url(nomedaimagem).

blockquote:before {
	content: open-quote;
}

blockquote:after {
	content: close-quote;
}

li:before {
	content: "POW: "
}

p:before {
	content: url(images/jam.jpg)
}

Soa maravilhoso, não é? Bem, assim como tantas outras coisas (-sigh-), a maioria dos usuários não vai ver os efeitos de before ou after porque o IE simplesmente não pode ser incomodado por eles. Preguiçoso preguiçoso preguiçoso.

Páginas Relacionadas

Esse material é uma adaptação do CSS Advanced Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Avançado de CSS: Regras @

20 07 2008

image

Essa aula foi traduzida pelo aluno do curso Ruan Carlos. Obrigado, Ruan!

Regras @ encapsulam um punhado de regras CSS para aplicar a alguma coisa específica. Woo.

Importação

A regra @import adiciona outra folha de estilo. Por exemplo, se você quiser adicionar os estilos de uma outra folha de estilo para a sua existente, você pode adicionar algo como:

@import url(estilosadicionais.css);

Isso é muitas vezes usado no lugar do elemento link para ligar um arquivo CSS a uma página HTML, essencialmente para ter uma folha de estilo interna, algo como isso:

<style type="text/css" media="all">
  @import url(macaco.css);
</style>

O benefício disso é o fato de que navegadores mais antigos, como o Netscape 4.x, por não terem idéia das regras @, não vão ligar a folha de estilos, o que, se você tiver uma marcação bem-estrurada, vai deixar o HTML puro funcional (embora sem estilo).

Tipos de mídia

A regra @media aplica seu conteúdo a um determinado meio de visualização, tal como a impressão. Por exemplo:

@media print {
  body {
    font-size: 10pt;
    font-family: times new roman, times, serif;
  }
  #navegacao {
    display: none;
  }
}

Os meios de visualização são:

  • all – para todos os meios abaixo, acima, ao redor e dentro do sol.
  • aural – Para sintetizadores de fala.
  • handheld – para dispositivos portáteis.
  • print – para impressoras.
  • projection – para projetores.
  • screen – para visualização no computador.

Você também pode usar braille, embossed, tty ou tv.
Nota: De todos esses, os únicos tipos de mídia suportados pelo IE são all, screen e print.

Conjuntos de caracteres

A regra @charset simplesmente estabelece a regra de codificação dos caracteres de uma folha de estilos externa. A codificação aparece no alto da folha de estilos e é algo como @charset “UTF-8″;

Aparência da fonte

A regra @font-face é usada para dar uma descrição detalhada de uma fonte e pode incorporar uma fonte externa em seu CSS.
Ela requer um descritor da família da font (font-family), ao qual a fonte pode ser referenciada, cujo valor pode ser um nome de uma fonte existente (sobrescrevendo essa fonte onde forem encontradas condições) ou pode ser um nome completamente novo. Para incorporar uma fonte, o descritor src é utilizado. Outros descritores adicionados à regra font-face se tornam condições para que a fonte incorporada seja usada. Por exemplo, se você adicionar um estilo font-weight: bold na regra, o src da font-family só vai ser aplicado a seletores com a propriedade font-family se a propriedade font-weight for definida como bold (negrito).
Você pode usar uma regra font-face como essa:

@font-face {
	font-family: umnomequalquer;
	src: url(algumafonte.eot);
	font-weight: bold;
}

p {
	font-family: umnomequalquer;
	font-weight: bold;
}

Isso irá aplicar a fonte algumafonte.eof aos parágrafos (Mais não iria se o seletor p não fosse definido como font-weight:bold).
Suporte para fontes incorporadas na melhor das hipóteses é irregular. O navegador Mozilla não suporta e não tem planos imediatos para o fazer. Apenas IE tem suporte decente. Para incorporar fontes ao IE, você precisa usar o software da Microsoft WEFT, que irá converter os caracteres de uma fonte TrueType em uma fonte OpenType condensada (e isso só pode ser utilizado com a URI que você especificou). Devido a esta limitação (bastante complicada) de compatibilidade, é melhor não usar fontes que não tenham um sistema de fontes alternativo adequado, e evitar usar @font-face.

Páginas

A regra @page é para a visualização da página em mídias de página, e é um método avançado de aplicar estilos para impressão. Ela define um bloco de página que se estende pelo modelo de caixa (veja Margens e Espaçamento) de modo que você define o tamanho e apresentação de uma única página.
Há uma série de convenções que se aplicam na regra @page, como não existirem paddings (espaçamentos) ou bordas e não estarmos falando de uma tela de computador – pixels e em’s como unidades de medidas não são permitidos.
Há uma serie de propriedades específicas que podem ser usadas, tais como size (tamanho), que pode ser definido como portrait (retrato), landscape (paisagem), auto ou um tamanho. A propriedade marks também pode ser usada para definir marcas de corte.

Pseudo classes para mídia de página.

Existem três pseudo classes que são usadas especificamente em conjunto com a regra @page, que assumem a forma @page:pseudo-classe { alguma coisa }.
:first é aplicada a primeira página de uma mídiade página.
:left e :right aplicam-se às páginas da esquerda e da direita, respectivamente. Isto é usado para especificar uma margem esquerda maior em páginas que vão ficar à esquerda e uma margem direita maior para páginas à direita.
Há uma série de outras facetas específicas para a regra @page como quebras de linha e nomes de páginas, mas vendo que esta regra dificilmente funciona em algum navegador, você provavelmente já desperdiçou tempo suficiente lendo esta parte. É uma idéia bem agradável, no entanto…

Páginas Relacionadas

Esse material é uma adaptação do CSS Advanced Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.


				




Tutorial Avançado de CSS – Layout da Página

20 07 2008

Exemplo de página dividida em seções

Construir layouts com CSS é fácil. Se você está acostumado a desenhar suas páginas com tabelas, no começo usar CSS pode parecer difícil, mas não é, é apenas diferente e na verdade faz bem mais sentido.

Você precisa ver cada parte da página como um pedaço individual que você pode empurrar em qualquer lugar que você quiser. Você pode posicionar esses pedaços de modo aboluto ou em relação a outro pedaço.

Posicionamento

A propriedade position é usada pra definir se um elemento está posicionado de forma absoluta (valor absolut), relativa (relative), estática (static) ou fixa (fixed).

O valor static é o valor padrão e renderiza os elementos na ordem normal, como eles aparecem no HTML.

relative é bem parecido com static, mas os elementos podem ser deslocados de sua posição original com as propriedades top (topo), right (direita), bottom (inferior) e left (esquerda).

absolute empurra um elemento pra fora do fluxo normal do HTML e o coloca em seu próprio mundo. Em seu pequeno e louco mundo, o elemento absoluto pode ser colocado em qualquer lugar na  página usando top, right, bottom e left pra definir a distância de cada lado.

fixed funciona como absolute, mas o elemento vai ser posicionado em relação à janela e não em relação à página, então, teoricamente, um elemento fixado deve ficar exatamente onde ele está na tela mesmo quando a página é rolada. Por que teoricamente? Pelo motivo de sempre – isso funciona perfeitamente em navegadores como Mozilla e Opera, mas no IE não funciona de jeito nenhum.

Layout usando posicionamento absoluto

Você pode criar um layout tradicional com duas colunas usando posicionamento absoluto se você tem algo como o HTML seguinte:

<div id="navegacao">
  <ul>
    <li><a href="esse.html">Esse</a></li>
    <li><a href="aquele.html">Aquele</a></li>
    <li><a href="oOutro.html">O Outro</a></li>
  </ul>
</div>

<div id="conteudo">
  <h1>Ra ra banjo banjo</h1>
  <p>Bem-vindo à página Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
  <p>(Ra ra banjo banjo)</p>
</div>

E se você aplicar o CSS abaixo:

#navegacao {
	position: absolute;
	top: 0;
	left: 0;
	width: 10em;
}

#conteudo {
	margin-left: 10em;
}

Você vai ver que isso vai levar a barra de navegação pra esquerda e modificar a largura pra 10 em’s. Porque a navegação está posicionada absolutamente, ela não tem nada a ver com o fluxo do resto da página, e por isso é necessário definir a margem esquerda da área de conteúdo como sendo igual a largura da barra de navegação.

Fácil até demais. E você não está limitado a essa abordagem de duas colunas. Com um posicionamento mais engenhoso, você pode dispor de quantos blocos você quiser. Se você quisesse adicionar uma terceira coluna, por exemplo, você poderia adicionar o pedaço ‘navegacao2′ no seu HTML e mudar seu CSS para:

#navegacao {
  position: absolute;
  top: 0;
  left: 0;
  width: 10em;
}

#navegacao2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 10em;
}

#conteudo {
  margin: 0 10em; /* definindo as margens superior e inferior pra 0 e a esquerda e direita pra 10em */
}

A única desvantagem de elementos posicionados absolutamente é que eles vivem num mundo próprio, não existe nenhum jeito preciso de determinar aonde eles vão parar. Se você for usar os exemplos acima e todas as suas páginas têm barras de navegação pequenas e áreas de conteúdo grandes, tudo bem. Mas, especialmente quando usar valores relativos para larguras e tamanhos, você geralmente tem que abandonar qualquer esperança de posicionar qualquer coisa, como um rodapé, embaixo desses elementos. Se você quiser fazer algo assim vai ser necessário flutuar todos os seus pedaços, ao invés de posicioná-los absolutamente.

Flutuando

Flutuar um elemento vai deslocá-lo para a direita ou esquerda de uma linha, com o conteúdo fluindo ao seu redor.

Flutuar normalmente é usado para posicionar elementos menores em uma página (Veja o exemplo :first-letter na página sobre Pseudo Elementos), mas também pode ser usada para porções maiores, como colunas de navegação.

Usando o HTML do exemplo acima, você pode aplicar o CSS seguinte:

#navegacao {
  float: left;
  width: 10em;
}

#navegacao2 {
  float: right;
  width: 10em;
}

#conteudo {
  margin: 0 10em;
}

Se você não quer que o póximo elemento envolva os elementos flutuando, você pode aplicar a propriedade clear (limpar). clear: left vai limpar elementos flutuados para a esquerda, clear:right vai limpar elementos flutuados para a direita e clear: both vai limpar elementos flutuados para a esquerda e direita. Então se, por exemplo, você quiser um rodapé na sua página, você pode usar um pedaço de HTML com a id ‘rodape’ e adicionar o CSS seguinte:

#rodape {
	clear: both;
}

E aí está. Um rodapé que vai aparecer debaixo de todas as colunas, independente do tamanho de qualquer uma delas.

Essa foi uma introdução geral sobre posicionamento e flutação, com ênfase nos ‘pedaços’ maiores de uma página, mas lembre-se que esses métodos podem ser aplicados também em qualquer elemento dentro desses pedaços. Com uma combinação de posicionamento, flutuação, margens, paddings (enchimentos) e bordas, você pode representar QUALQUER design web.

Qualquer coisa que puder ser feita com tabelas pode ser feita melhor com CSS. A ÚNICA razão para usar tabelas na construção do layout é se você está tentando acomodar navegadores anciãos, que não suportam CSS.

Para se aprofundar na construção de layouts com CSS, é altamente recomendado que você acompanhe o tutorial “Criando um Layout com CSS a partir do zero“, feito pelo Subcide e traduzido pelo Café com Gelo. E não esqueça de conferir o código-fonte dos exemplos dessa página – é importante!

É aqui que CSS mostra mesmo suas vantagens – ele resulta numa página altamente acessível com apenas uma pequena fração do peso de uma página equivalente baseada em tabelas.

Páginas Relacionadas

Exemplos

Referência

Esse material é uma adaptação do CSS Advanced Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.








Seguir

Obtenha todo post novo entregue na sua caixa de entrada.