segundo sábado+web

Vai acontecer amanhã, 24 de maio, o segundo sábado+web. Pra quem ainda não conhece, o +web é um grupo de estudos de desenvolvimento web do cefet/rn. Vai ser no miniauditório do Cefet, 8h da matina. O nosso primeiro encontro aconteceu dia 19 de abril, e foi massa!

Na programação do evento, as palestras:

• Como funciona a web, por Danilo Augusto,
• Formulários, Requisições e webForms2, por Jonatas Oliveira, da Digizap,
• Ferramentas pra web: desenvolvendo fácil, por Pedro Anderson
• Padrões Web: fazendo certo, por Elomar França (eu!), e
• Design Web: fazendo bonito, por Evandro Myller.

À tarde, teremos um workshop supervisionado por Evandro e eu. A idéia é ir desde a concepção até a publicação de um mini-site. Quem quiser ir pro workshop tem que chegar cedo – as inscrições pra ele são limitadas e por ordem de chegada.

Se você vai estar em Natal no sábado, aparece por lá! Não precisa se inscrever.

24 de Maio, 2008 08 – 6pm : Segundo sábado+web no Miniauditório, Cefet/RN, Natal

Segundo encontro do grupo de estudos de desenvolvimento web +web

Tags: desenvolvimento web padroes web webdesign

This hCalendar event brought to you by the hCalendar Creator.

sábado+web foi um sucesso!

Como eu já tinha anunciado aqui antes, aconteceu ontem o primeiro sábado+web. Foi o primeiro encontro do grupo de estudos de desenvolvimento web que eu estou organizando aqui no Cefet – o +web – junto com um pessoal massa.

Eu estava esperando mais ou menos 40 pessoas, e o evento foi organizado pra 60 pessoas, pra ter uma faixa de segurança. Apareceram 90! A gente teve que providenciar uma sala maior – obrigado Minora! – e o evento atrasou 1h. Mas o pessoal não desanimou, continuou lá!

A primeira palestra foi a minha, com o temas “bem vindos ao +web”. Tem gente que diz que eu fiquei vermelho, mas acho que não. Não sou muito dessas coisas.

Depois teve o Mayron, falando sobre “web 2.0: + poder pro usuário”. Todo mundo se emocionou quando ele passou o vídeo “The Machine is us/ing us” em português.

Evandro falou sobre o desenvolvimento pra web, começando com cliente/servidor e parando na parte dos padrões web, passando pelo desenvolvimento em camadas. Muito massa!

Depois o Prof. Régis falou um pouco sobre uddi, pontos de função, EaD e mais um pouco.

E teve o lançamento do curso online grátis de desenvolvimento web! Qualquer um pode participar. Apareçam por lá!

Queria agradecer ao pessoal que faz o +web: Pedro Anderson, Mayron, Joelly, Evandro. Ao Prof. Minora, por ter conseguido a sala pra a gente. Prof. Régis, por ter aparecido pra palestrar! E principalmante a todo mundo que apareceu por lá.

Até o próximo, dia 17/04!

Fotos no Flickr

.

Minha palestra:

curso online grátis de introdução ao desenvolvimento web

Hoje pela manhã acontece o Primeiro sábado+web, com o lançamento oficial do Curso Online de Introdução ao Desenvolvimento Web. O curso é grátis, e qualquer pessoa pode participar. Nos assuntos, XHTML, CSS e Javascript – e o jeito certo de fazer as coisas.

Mais informações sobre o curso você encontra lá na página do curso ou na lista de discussão do +web.

Espero ver vocês por lá!

Depois publico os slides e as fotos das palestras, com mais detalhes do curso e do grupo.

sábado+web: primeiro encontro do +web!

Lembram do +web? O grupo de estudos de desenvolvimento web que eu já falei por aqui?

Pois é. A idéia amadureceu, graça ao apoio do pessoal que tá junto comigo nessa, e o primeiro encontro do grupo já tem data marcada: Sábado, 19 de abril, às 8h no Cefet/RN (projeções da Datinf).

Na programação, palestras sobre: o grupo +web, seus objetivos e planos (minha primeira palestra!); web 2.0: + poder pro usuário, um foco diferente do que costuma ser visto por aqui, pelo grande Mayron Cachina; introdução do desenvolvimento web com xhtml, css e javascript, por Evandro Myller, o mago do javascript em Natal; e uma palestra surpresa (surpresa mesmo, nem eu sei o tema) com o prof. Régis Falcão.

Pessoal de Natal que acompanha o blog, conto com a presença de vocês lá.

Pro pessoal de fora de Natal que acompanha o blog (alguém?), uma notícia legal: vai haver também o lançamento do Curso Online de Introdução ao Desenvolvimento Web. Vai ser nos moldes dos cursos de ruby e rails que eu divulguei aqui, e o material vai ser esse que eu venho publicando aqui no blog. O curso é gratuito e aberto – qualquer pessoa pode participar. Sábado posto o link aqui.

É isso.

Quem quiser aparecer, vai ser muito bem vindo! e quem quiser ajudar, manda um email pra mim. A gente ainda está procurando por uma hospedagem baratinha.

Cartaz do primeiro sábado+web

Tutorial Intermediário de CSS: Imagens 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

• Próxima Página: Tutorial Avançado de HTML
• Página Anterior: Propriedades Atalho
• Cores (Tutorial Iniciante de CSS)
• Imagens (Tutorial Iniciante de HTML)

Exemplos

• Imagens de background
• Ocorrência única – usando background-repeat
• Bordas Arredondadas 1 – usando imagens de background menores
• Bordas Arredondadas 2 – em caixas de altura e largura variáveis

Referência

• background
• background-image
• background-repeat
• background-position

BlogBlogs Tags: tutorial, css, minicurso

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”!

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!

Tutorial Intermediário de CSS: Propriedades Atalho

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

• Próxima Página: Imagens de Background
• Página Anterior: Pseudo Classes
• Seletores, Propriedades e Valores (Tutorial Iniciante de CSS)

Referência

• margin
• padding
• border
• font
• background

BlogBlogs Tags: tutorial, minicurso, css

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

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

• Próxima Página: Propriedades Atalho
• Página Anterior: Agrupando e Aninhando
• Seletores, Propriedades e Valores (Tutorial Iniciante de CSS)
• Regras At (Em) – Pseudo classes em mídia paginada.

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: tutorial, minicurso, css

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

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

• Próxima Página: Pseudo Classes
• Página Anterior: Seletores classe e ID
• Seletores, Propriedades e Valores (Tutorial Iniciante de CSS)

BlogBlogs Tags: tutorial, minicurso, css

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

Como o Tutorial Intermediário de HTML, esse Tutorial Intermediário de CSS não deve ser tão difícil, mas ao invés disso complementar o básico que você viu no Tutorial Iniciante de CSS.

Conteúdo

• Seletores Classe e ID – Faça seus próprios seletores sem precisar daquele plástico grudento de plastificar!
• Agrupando e Aninhando – Propriedades designadas a vários seletores e seletores dentro de seletores.
• Pseudo Classes – Definindo vários estados de um seletor pra links.
• Propriedades Atalho – Várias propriedades, como bordas e margens, que combinam outras propriedades numa só.
• Imagens de Background – Adivinhe.

Páginas Relacionadas

• Próxima Página: Seletores Classe e ID
• Página Anterior: Tags Más
• Tutorial Iniciante de CSS
• Tutorial Avançado de CSS

BlogBlogs Tags: tutorial, minicurso, css

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