segundo sábado+web

23 05 2008

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.





sábado+web foi um sucesso!

20 04 2008

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

Mayron, Evandro e Eu mexendo em um notebook na sala de audiovisual da Datinf
Pessoas assistindo a palestra \.

Minha palestra:





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

19 04 2008

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!

15 04 2008

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

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.