refactoring!

27 03 2008

Fiquei um tempinho sem postar aqui no blog, mas foi por um motivo importante!

Não, não estou de férias (beem longe de uma). Estava revisando os tutoriais iniciantes de HTML e CSS, pra eles estarem no ponto quando as aulas do +web começarem.

Os links foram corrigidos, conteúdos foram adicionados/retirados, crei uma tag pra cada minicurso e mais umas coisinhas.

Isso me custou algumas visitas

Queda enorme nas visitas

mas os minicursos estão bem melhores, e é isso que importa. Só tá faltando receber algum retorno dos alunos, saber o que estão achando do material.

Como a prioridade pro +web agora é fazer o que acontece por trás dos panos (correr atrás de coordenador, arrumar uma sala de projeção, conseguir uma hospedagem, etc etc etc) os minicursos vão ficar parados por algum tempo.

Até eles voltarem, continua a programação. Vai chover RoR (vou aprender RoR esse ano!) e php (começo a trabalhar com php segunda feira).

A propósito, alguém sentiu minha falta?

Anúncios




Opera e Webkit passam no Acid3!

27 03 2008

Notícia novinha!

Enquanto o ie8 e o Firefox3beta comemoram o score máximo no Acid2, o Opera (via) e o WebKit (engine do navegador Safari) (via) já passaram no Acid3, que testa o suporte a DOM e SVG, entre outras coisas. O Firefox3 beta4 tirou 68/100, e o Internet Explorer8, 17.

Tá esquentando!





Tutorial Intermediário de CSS: Imagens de Background

19 03 2008

Página com Imagem de Background

Existem várias propriedades envolvidas na manipulação de imagens de background.

Felizmente, a propriedade background cuida de todas as outras.

body {
	background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}

Esse código une essas propriedades:

  • background-color, que nós já vimos antes.
  • background-image, que é o endereço da imagem que vai servir de fundo.
  • background-repeat, que é como a imagem se repete na página. Pode ser repeat-y (repetindo no eixo y, de cima até embaixo), repeat-x (repetindo no eixo x, lado a lado), repeat (repetindo nos eixos x e y, efeito semelhante a um telhado, por exemplo) ou no-repeat (que mostra apenas uma ocorrência da imagem).
  • background-position, que pode ser top (topo), center (centro), bottom (parte inferior), left (esquerda) e right (direita), ou uma combinação de dois desses elementos. Nesse caso, o primeiro indica a posição no eixo horizontal e o segundo a posição no eixo vertical.

Imagens de background podem ser usadas na maioria dos elementos HTML – não apenas pra página inteira (body) e podem ser usados pra efeitos simples mas eficazes, como bordas arredondadas.

É fácil se envolver demais com imagens de background e querer usá-las na página inteira. Algumas pessoas visualmente hiperativas podem acreditar que é uma boa ter uma foto cheia de cores vivas em todo o fundo da página, dando ao usuário o desafio de decifrar o texto no primeiro plano. Isso é um exemplo meio radical, mas o fato é que o texto mais amigável ao usuário, legível, é fonte preta em um fundo simples branco ou fonte branca num fundo preto. Algumas pessoas defendem que um fundo “quase” branco ou “quase” preto é melhor, já que reduz a claridade. Sugiro que você teste essas possibilidades e escolha a que você achar mais adequada ao seu projeto.

O melhor uso pra imagens de background é preencher espaços onde não haja nenhum conteúdo, deixando a página mais visualmente agradável sem atrapalhar o conteúdo.

Páginas Relacionadas

Exemplos

Referência

BlogBlogs Tags: , ,

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





+web agora é “O’Reilly User Group Program Member”!

19 03 2008

Olá, Pessoal

É com grande prazer que venho anunciar que o nosso pedido foi aprovado, e o +web agora é “O’Reilly User Group Program Member”! Moral, não?

Com isso, a gente ganha

  • Desconto de 35% em livros comprados diretamente pela O’Reilly Store (é só inserir o código “DSUG“),
  • Possibilidade de pedir livros pra montar nossa “bibliotecazinha”,
  • Mais umas coisinhas.

Em troca, o +web divulga o convênio e faz resenhas dos livros (se quiser ajudar com uma resenha, manda um email pra mim).

Se você ainda não sabe o que é o +web, vai aqui!

Banner o’reilly User group program member





Tutorial Intermediário de CSS: Propriedades Atalho

18 03 2008

Trecho de código CSS

Algumas propriedades CSS permitem que uma sequência de valores substituam uma série de propriedades. Elas são representadas por valores separador por espaços.

margin, padding e border-width permitem a você combinar margin-top-width, margin-right-width, margin-bottom-width e etc. na forma

propriedade: top right bottom left;

Então:

p {
	border-top-width: 1px;
	border-right-width: 5px;
	border-bottom-width: 10px;
	border-left-width: 20px;
}

Pode ser resumido como:

p {
	border-width: 1px 5px 10px 20px;
}

border-width, border-color e border-style também podem ser somadas como, por exemplo:

p {
	border: 1px red solid;
}

(Isso também pode ser aplicado a border-top, border-right, etc.)

Ao declarar apenas dois valores (como margin: 1em 10em;), o primeiro valor vai ser o topo e a base, e o segundo valor vai ser a direita e a esquerda. Ao declarar apenas um valor, esse vai ser aplicado em todos os lados.

Propriedades relacionadas a fontes também podem ser unidas com a propriedade font:

p {
	font: italic bold 1em/1.5 courier;
}

(Onde o ‘/1.5’ é o atributo line-height.)

Então, juntando tudo, experimente esse código:

p {
	font: 1em/1.5 "Times New Roman", times, serif;
	padding: 3em 1em;
	border: 1px black solid;
	border-width: 1px 5px 5px 1px;
	border-color: red green blue yellow;
	margin: 1em 5em;
}

Atraente.

Existem bem mais atalhos que esses. E são todos muito, muito úteis. Leia esse guia de abreviações de CSS, mais abrangente que esse texto.

Páginas Relacionadas

Referência

BlogBlogs Tags: , ,

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





Tutorial Intermediário de CSS: Pseudo Classes

18 03 2008

Quatro Estados de um Link

Pseudo classes são usadas juntos com seletores para especificar um estado do seletor. Elas aparecem na forma seletor:pseudo classe { propriedade: valor; }, com um sinal de dois-pontos separando o seletor e a pseudo classe.

Muitas das pseudo-classes definidas pelo CSS não são suportadas por todos os navegadores, mas existem quatro que podem ser usadas com segurança quando aplicadas à links:

  • link indica o estilo de links não-visitados.
  • visited indica links que foram visitados.
  • active indica um link que está com o foco (por exemplo, quando ele está sendo clicado).
  • hover indica um link enquanto o cursor é mantido sobre ele.
a.homemdasneves:link {
	color: blue;
}

a.homemdasneves:visited {
	color: purple;
}

a.homemdasneves:active {
	color: red;
}

a.homemdasneves:hover {
	text-decoration: none;
	color: blue;
	background-color: yellow;
}

Experimente. Crie uma página HTML que use esses estilos. Veja quando cada pseudo classe é usada. Crie uma outra página HTML e um outro arquivo CSS e explore um pouco mais essas classes. Dominar esses estados te ajuda a fazer páginas bem mais legais.

Embora CSS te dê o poder de contornar isto, manter links visitados com cores diferentes de links não-visitados é uma boa prática, já que muitos usuários supõe que isso vai acontecer.

Tradicionalmente, links de texto são azuis se não visitados e violeta se visitados, e ainda existem razões para acreditar que essas cores são as mais eficazes para isso. No entanto, com a crescente popularização do uso do CSS, essas cores estão deixando de ser lugares-comum e o usuário médio não assume mais que links precisam ser azul ou violeta.

Você também devia estar apto a usar a pseudo classe hover com outros elementos além de links. Infelizmente, o Internet Explorer (sempre ele) não suporta esse recurso até a versão 6. Isso é uma tremenda irritação, porque existem um monte de truquezinhos legais que você pode fazer com isso que ficam ótimos em outros navegadores.

Páginas Relacionadas

Exemplos

  • Rollovers 1 – links gráficos que mudam quando o cursos passa por eles usando :hover.
  • Rollovers 2 – Efeitos mais interativos, usando :active.
BlogBlogs Tags: , ,

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





Tutorial Intermediário de CSS: Agrupando e Aninhando

17 03 2008

Código CSS com seletores aninhados e agrupados

Agrupando

Você pode aplicar as mesmas propriedades a vários seletores sem precisar repetí-los. Basta separar os seletores com vírgulas.

Por exemplo, se você tem alguma coisa assim:

h2 {
	color: red;
}

.outraClasse {
	color: red;
}

.maisUmaClasse {
	color: red;
}

Você pode trocar por isso:

h2, .outraClasse, .maisUmaClasse {
	color: red;
}

Aninhando

Se o CSS estiver bem estruturado, não deve existir a necessidade de muitos seletores de classe ou ID. Isso porque você pode especificar propriedades para seletores dentro de outros seletores. Por exemplo:

#topo {
	background-color: #ccc;
	padding: 1em
}

#topo h1 {
	color: #ff0;
}

#topo p {
	color: red;
	font-weight: bold;
}

Faz com que não haja necessidade de mais classes e ID’s se estiver aplicado a um HTML que pareça com esse:

<div id="top">

	<h1>Acarajé de Chocolate</h1>

	<p>Essa é minha receita pra fazer acarajé usando só chocolate</p>

	<p>Mmm mm mmmmm</p>

</div>

Isso acontece porque, ao separar seletores com espaços, nós estamos dizendo “h1 dentro do ID topo tem a cor #ff0” e “p dentro do ID topo é vermelho e está em negrito”.

Isso pode ficar bem complicado (porque pode se extender por mais de dois níveis, como isso dentro disso dentro disso etc.) e pode exigir um pouco de prática.

Páginas Relacionadas

BlogBlogs Tags: , ,

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