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.

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.

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

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

• Página Anterior: Pseudo Elementos
• Seletores, Propriedades e Valores
• Seletores de Classe e ID

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

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

• Próxima Página: Especificidade
• Página Anterior: Regras @
• Pseudo Classes

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

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

• Próxima Página: Pseudo Elementos
• Página Anterior: Layout da Página
• Declarações – Para comparações entre a regra @charset e a declaração do conjunto de caracteres no HTML
• Pseudo Classes
• Texto – Uma companhia útil se você está usando a regra @font-face.

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

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

• Próxima Página: Regras @
• Página Anterior: Display
• A propriedade Display
• Tags Span e Div
• Pseudo Elementos – Para um exemplo de flutuação.

Exemplos

• Posicionamento 1 – estático
• Posicionamento 2 – relativo
• Posicionamento 3 – absoluto
• Posicionamento 4 – absoluto num caixa relativa
• Flutuando 1 – uma caixa simples flutuada
• Flutuando 2 – duas cixas flutuadas
• Flutuando 3 – limpando caixas flutuadas
• Layout de uma página 1 – duas colunas parte 1 – posicionando uma coluna de navegação
• Layout de uma página 2 – duas colunas parte 2 – usando margin para tirar o conteúdo debaixo da coluna de navegação
• Layout de uma página 3 – usando bordas pra fornecer o background de uma coluna
• Layout de uma página 4 – três colunas
• Layout de uma página 5 – adicionando um cabeçalho
• Layout de uma página 6 – rodapés nem sempre funcionam com colunas posicionadas absolutamente
• Layout de uma página 7 – adicionando um rodapé usando colunas flutuadas
• Charles Darwin – uma versão estilizada dos princípios básicos dos exemplos anteriores

Referência

• position
• div tag
• width
• margin
• left
• right
• float
• clear

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

Um truque chave na manipulação de elementos HTML é entender que não existe absolutamente nada especial no modo como a maioria deles funciona. A maioria das páginas pode ser feita com apenas algumas tags que podem ser estilizadas do jeito que você quiser. A representação visual padrão do navegador da maioria dos elementos HTML consiste apenas de diversos estilos de fontes, margens, espaçamentos e, principalmente, tipo de exibição (display type).

Os tipos de exibição mais básicos são inline, block-line e none e eles podem ser manipulados com a propriedade CSS display e os valores inline, block e none.

inline significa “na linha” e faz só o que diz – elementos do tipo inline seguem o fluxo de uma linha. Os elementos ênfase forte ( <strong> ), âncora ( <a> ) e ênfase ( <em> ) geralmente são exibidos inline.

block coloca uma quebra de linha antes e depois do elemento. Os elementos cabeçalho ( <h1> até <h6> ) e parágrafo ( <p> ) geralmente são mostrados em blocos. São os chamados “elementos de bloco”.

none, bem, não mostra o elemento. Pode soar meio inútil mas pode ser usado para bons efeitos relacionados à acessibilidade (veja Links Acessíveis), folhas de estilo alternativas ou efeitos avançados de hover ( = mouse sobre o elemento).

A folha de estilos original para o site HTML Dog, por exemplo, manipula alguns elementos tradicionalmente inline e de bloco para se ajustar ao design.

h1 {
  display: inline;
  font-size: 2em;
}

#cabecalho p {
  display: inline;
  font-size: 0.9em;
  padding-left: 2em;
}

O código abaixo é usado em folhas de estilo apenas para impressão e basicamente “desliga” esses elementos, como navegação, que são insignificantes em páginas impressas.

#navegacao, #vejaTambem, #comentarios {
display: none;
}

A diferença entre display: none e visibility:hidden é que display: none retira completamente o elemento da jogada, enquanto visibility: hidden mantém o elemento e o espaço que ele ocupa na página, sem representar visualmente seu conteúdo. Por exemplo, se o segundo parágrafo numa página com três fosse definido como display: none, o terceiro parágrafo ia subir pra perto do primeiro, mas se o segundo parágrafo fosse definido como visibility: hidden, existiria um espaço vazio entre o primeiro e o terceiro, onde o parágrafo ia estar.

Tabelas

Talvez o melhor jeito de entender os valores da propriedade display relacionadas a tabelas é pensar em tabelas HTML. Os valores table, table-row e table-cell imitam os elementos table, tr e td, respectivamente.

A propriedade display vai além, oferecendo os valores table-column (coluna de tabela), table-row-group (grupo de linhas), table-column-group (grupo de colunas), table-header-group (grupo de cabeçalhos da tabela), table-caption (legenda da tabela), todos auto-explicativos. Usar esses valores permite fazer com que qualquer conjunto de elementos HTML seja visualizado como uma tabela. O benefício mais óbvio desses valores é que você pode construir uma tabela através de suas colunas, ao invés do método baseado em linhas do HTML.

Por último, o valor inline-table basicamente faz com que a tabela não tenha quebras de linha antes e depois.

Ficar fascinado por tabelas com CSS pode prejudicar seriamente sua acessibilidade. HTML deve ser usado pra comunicar significado, então se você tem dados tabulares eles devem ser organizados em tabelas HTML. Usar apenas tabelas CSS pode resultar numa mistura de dados completamente ilegível sem CSS. Mal, muito mal.

Outros tipos de exibição

list-item (“item de lista”) é auto explicativo, e é mostrado do jeito que você geralmente espera que um elemento li seja. Pra funcionar direito, elementos com esse tipo de exibição devem ser aninhados em um elemento ul ou ol.

run-in faz com que um elemento seja inline ou de bloco dependendo do tipo de exibição de seu elemento pai. Ele não funciona no IE nem em navegadores baseados no Mozilla. Muito útil, não é?

compact também faz com que um elemento seja inline ou de bloco dependendo do contexto. Também não funciona tão bem…

marker é usado exclusivamente com os pseudo elementos :before e :after pra definir o display do valor da propriedade content. O display padrão para a propriedade content já é marker, então isso só é útil se você estiver sobrescrevendo a propriedade display para um pseudo elemento.

Páginas Relacionadas

• Próxima Página: Layout de Página
• Página Anterior: Introdução
• Tags Span e Div
• Dominando Tabelas – Pode de ajudar a entender melhor os valores de display relacionados a tabelas.

Exemplos

• Bloco e inline 1
• Bloco e inline 2
• Bloco e inline 3 – o não-tão-suportado display: inline-block

Referência

• display
• visibility

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

O Tutorial Avançado de CSS é pra quem quer levar CSS ao extremo, explorando métodos que podem não ser imediatamente óbvios para um desenvolvedor intermediário.

Conteúdos

• A Propriedade Display – Definindo o modo de exibição de um elemento.
• Layout de Página – Construindo uma página sem tabelas.
• Regras @ – Importando folhas de estilo, estilos para tipos de mídia diferentes especificando o conjunto de caracteres de uma folha de estilos e incorporando fontes.
• Pseudo Elementos – Estilizando primeiras letras, primeiras linhas e colocando conteúdo antes e depois de elementos.
• Especificidade – Como um navegador lida com regras CSS conflitantes.

Páginas Relacionadas

• Próxima Página: A Propriedade Display
• Página Anterior: Declarações (Tutorial Avançado de HTML)
• Tutorial Avançado de HTML
• Tutorial Intermediário de CSS
• Tutorial Iniciante de CSS

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

É um evento de Rails (séeerio?) mais ou menos no estilo da RailsConf, que o Akita trouxe pra nós através da Locaweb (ou a Locaweb trouxe através do Akita, enfim…)

Olha o nível dos palestrantes:

David Hansson (somente ele será via video online, ele estará na Europa nesse dia, os outros serão presenciais); o grande Chad Fowler ; os mantenedores do JRuby, Charles Nutter e Thomas Enebo ; diretamente da Holanda, da Phusion teremos Ninh Bui e Hongli Lai ; o mantenedor do RSpec, David Chelimsky ; o criador do Github, Chris Wanstrath ; ninguém menos que Dr. Nic Williams ; o escritor do livro The Rails Way, Obie Fernandez ; também Jay Fields, da ThoughtWorks. E quem não fala inglês, não se preocupem, teremos tradução simultânea de inglês para português.

E também muitos grandes Railers brasileiros como Manoel Lemos, da Brasigo ; Carlos Eduardo, da e-Genial ; Fabio Kung, nosso JRuby-man, da Caelum ; o grande Vinicius Teles da Improve it ; George Guimarães do Pagestacker.

Massa, não é?

E sabe o legal? Eu vou! Tá tudo praticamente certo, começar a juntar a grana e me preparar. Tenho certeza que vão ser os dias mais legais que eu já tive. Conversar sobre Rails com o Akita, bater um papo sobre XP com o Vinicius Teles, conhecer o Manoel Lemos, cara que montou a equipe mais legal do Brasil? Não tem preço.

E se você é de Natal e vai aparecer também, entra em contato comigo (elomar.f@gmail.com)! Tô procurando mais gente que vá pra montar uma caravana natalense.