Codando

Tutorial Intermediário de HTML: Exercícios

Elomar França — Wed, 23 Apr 2008 01:19:16 +0000

Antes de irmos pro próximo assunto, vamos praticar um pouco o que vimos por aqui.

Primeiro, dê uma incrementada no projeto que você começou lá atrás. Use as tags novas que você aprendeu, retire as tags más. Atualiza o seu servidor e envie o resultado pra meu email.

O segundo exercício é esse:

Exercício

Como você viu no começo desse curso e nesse texto que foi indicado, html é pra conteúdo e CSS é pra apresentação.

No código abaixo temos conteúdo e apresentação misturados no HTML - muito feio. Sua missão é limpar esse código. Substituir tudo que for relativo a apresentação por CSS, acrescentar o que estiver faltando, usar a tag certa pra cada elemento - p para parágrafos, h# para cabeçalhos, etc.

Minha Página Misturada

Um Cabeçalho

Esse texto que você está lendo foi retiradao de um curso de html. Desse mesmo jeito. Só estou mudando os textos, pro autor não ficar com raiva de mim.

E eu vou continuar escrevendo qualquer coisa, qualquer coisa mesmo, sem ter nada pra falar, enrolando, mais um pouco.

E não ligue se isso não fizer sentido

Correio Electrónico:htmlvelhinho@algumauniversidade.pt

código HTML desta página

Um texto bem pequeninho.

O que é importante aqui: Compare o tamanho do arquivo antes de depois de ser limpado e você vai perceber que o arquivo limpo é bem menor. Um arquivo menor significa uma página que carrega mais rápido e que ocupa menos espaço.

Quem não quer uma página carregando mais rápido?

Quando estiver pronto, sigara para a próxima parte: CSS Intermediário.

Páginas Relacionadas

Próxima Página: Tutorial Intermediário de CSS
Página Anterior: Juntando Tudo
Tutorial Avançado de HTML

sábado+web foi um sucesso!

Elomar França — Mon, 21 Apr 2008 02:17:54 +0000

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

Elomar França — Sat, 19 Apr 2008 04:00:59 +0000

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.

jquery: perfeita, mas nem tanto…

Elomar França — Fri, 18 Apr 2008 19:45:09 +0000

Comecei a usar JQuery aqui no trampo, e estou me surpreendendo. É tudo tão simples, que dá vontade de fazer tudo na tela ficar piscando e sumindo e aparecendo - mas eu me controlo, só uso onde necessário.

A única raiva que JQuery me deu até agora (além de não ter aparecido pro programador anterior desse projeto) foi ter me deixado meia hora tentando descobrir porque aquele $(”#id”) tão inocente não funcionava.

Era o acento. O seletor JQuery não aceita caracteres acentuados.
Fica a dica: acento com seletor JQuery não rola.

repita comigo: um prepared statement por conexão

Elomar França — Tue, 15 Apr 2008 23:40:47 +0000

Trabalhando com php+mysqli, perdi um tempão procurando saber porque a minha prepared statement não funcionava.

Coisinha besta: um prepared statement está ligado a uma conexão. Se você fecha a conexão, mata ele. Também tive problemas tentando usar dois statements numa só conexão.

Portanto, fica a dica: um prepared statement pra cada conexão.

Hope that helps! ;D

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

Elomar França — Tue, 15 Apr 2008 23:39:22 +0000

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

minicursos(3): cursos interessantes: desenvolvendo direito pra web!

Elomar França — Sun, 13 Apr 2008 01:44:54 +0000

Nos últimos dois posts com minicursos (esse e esse) passei links que ensinavam o básico - programar. dessa vez trouxe uns links mais divertidos - cursos que fazem a diferença

Primeiro, tem o pdf grátis sobre xslt do pessoal da visie - já viu que tem qualidade. A visie lançou também um pdf sobre produtividade e web 2.0, que eu tô com muita vontade de ler mas ainda não deu. É baratinho, e um investimento que com certeza compensa, mas estágio em programação no Rio Grande do Norte paga tão pouquinho…

Tem ainda o sun student courses. Até agora estão disponíveis dois cursos bem legais: Real World Technologies: NetBeans GUI Builder, JRuby, JavaFX, and JavaME e Introduction to Solaris and opensolaris.org. Se não fosse coisa de primeira, não tava na sun. Nem aqui.

Você também devia dar uma olhada no ambiente de aprendizado da DERI, NUI Galway (se não me engano, uma universidade). O cadastro é fechado, mas você pode acessar como visitante pra conferir o material das disciplinas
de Next Generation Technologies I (Semantic Web), Advanced Studies in IT (Semantic Web and Semantic Web Services), Digital Information (Multimedia Semantics) e Emerging Web Media. Pra quem quer desenvolver “direito” pra web, são quase um must read.

Ainda tem dois cursos deveriam ter entrado na lista anterior, ótimos pra quem quer começar com Ruby on Rails mas não sabe direito por onde: O curso de Ruby de Salish Talim, que está com inscrições abertas até 6 de maio, e o curso de Rails de Sunil Kelkar, com inscrições abertas até 15 de abril. Corra! Esses dois são gratuitos, de muita qualidade, e se complementam. O ideal é fazer o de Ruby e o de Rails logo depois.

Espero que vocês tenham aproveitado a listinha. Comentem aí outros materiais que vocês conheçam que eu vou adicionando aqui!

refactoring!

Elomar França — Fri, 28 Mar 2008 01:03:50 +0000

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

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?

Opera e Webkit passam no Acid3!

Elomar França — Thu, 27 Mar 2008 11:10:34 +0000

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

Elomar França — Thu, 20 Mar 2008 00:41:01 +0000

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

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.