Blog da Sr. Web » Tutoriais

jQuery – Introdução

Gabriela Davila — Wed, 27 May 2009 18:50:14 +0000

Pra quem não conhece, o jQuery é uma biblioteca Javascript que permite maior funcionalidade e permite que seu código seja escrito de maneira mais simples e fácil de ler. Com ele é possível fazer animações, usar AJAX, ou implementar diversos tipos de funções.

De tão versátil que é, ele permite a criação e uso de plugins. Seu código é crossbrowser, ou seja, você não precisa se preocupar se o seu código deixará de funcionar ou não em um determinado navegador. Diferentemente de outros frameworks (prototype, scriptaculous), ele possui um desempenho respeitável, sendo que da versão 1.2.6 para a 1.3 performance aumentou cerca de 40%.

Além do suporte a plugins, o jQuery implementou também uma interface, chamado de jQuery UI. Você pode criar seus próprios temas online no jQuery UI.

Nos próximos posts, iremos fazer uma breve explanação sobre seletores, plugins e a utlização da user interface.

Como validar seu HTML de acordo com a W3C – Parte 3

Wesley Oliveira — Sun, 26 Apr 2009 14:45:18 +0000

Continuando nossa série de posts que tratam da Validação de HTML:
Como validar seu HTML de acordo com a W3C
Como validar seu HTML de acordo com a W3C – Parte 2

Hoje evoluiremos ainda mais nosso conceito sobre HTML, e dessa vez com a validação do nosso mesmo código, agora com outro DOCTYPE para o XHTML 1.0 Transitional.

Não pense que nosso trabalho está perto do fim, temos surpresas reservadas para esse simples código, ingênuo, mas como dissemos anteriormente bastante traiçoeiro.

Nosso código de partida conforme post anterior está conforme abaixo:

[html]

Página de Teste – Sr Web

Página Principal

Cabeçalho Coluna 1	Cabeçalho Coluna 2
Linha 01 a	Linha 01 b
Linha 02 a	Linha 02 b
Linha 03 a	Linha 03 b

Aqui vai algum conteúdo para seu site, algum texto referente ao seu site.

Clique aqui para ver nosso logotipo

[/html]

Então mais do que nunca vamos ao código:

O DOCTYPE do XHTML 1.0 Transitional está abaixo, substitua a primeira linha do código:

[html toolbar="false"]

[/html]

Vamos submeter ao validador da W3C http://validator.w3.org e ver os resultados.

Advinhem o que aconteceu?!?!?!? 23 erros e 1 warning que não consideraremos pois é devido usarmos o input diretamente do código.

Como já é um costume nosso, vamos ao que importa: arrumar esse código.

Um detalhe importante na validação do código HMTL é a ordem que você segue para arrumar o código, é importantíssimo que seja de cima para baixo pois tem erros decorrentes dos erros de cima e, com isso arrumar um erro pode diminuir vários erros da validação.

erro: Line 2, Column 1: Missing xmlns attribute for element html. The value should be: http://www.w3.org/1999/xhtml

1º Ajuste: Incluir dentro da tag html nossas informações de xmlns e dados de linguagem. No XHTML isso sempre é solicitado, diferentemente dos anteriores que fizemos.

correção – Substitua a tag html pela abaixo:

[html toolbar="false"]

[/html]

erro: Line 4, Column 68: end tag for “meta” omitted, but OMITTAG NO was specified

2º Ajuste: Temos agora um problema conceitual que é o seguinte: no XHTML todas as tags devem ter ou seu fim com ou Nesse caso o problema foi com a tag meta.

correção: escrever corretamente o final da tag meta conforme abaixo

[html toolbar="false"]

[/html]

erro: Line 10, Column 6: end tag for “br” omitted, but OMITTAG NO was specified
3º Ajuste: Igualmente já comentamos temos erro na tag br por não ter fechado a tag.
correção – Fechar as duas tags br corretamente conforme código abaixo:
[html toolbar="false"]

[/html]

erro: Line 11, Column 39: end tag for “img” omitted, but OMITTAG NO was specified
4º Ajuste: Igualmente erro com a falta da “/” no final da tag.
correção – Fechar a tag img conforme abaixo:
[html toolbar="false"]

[/html]

erro: Line 37, Column 6: document type does not allow element “tr” here
5º Ajuste: Temos agora um problema bem interessante aqui. Trata-se de um problema com um escopo maior pois temos um tr sem finalizar e o validador deu o erro no tr abaixo. O mais interessante é que só agora o validador mostrou esse erro tão grave!
correção – incluir a tag de fechamento para o devido tr conforme abaixo:
[html highlight="8"]

Linha 02 a

Linha 02 b

[/html]

erro: Line 41, Column 7: document type does not allow element “td” here
6º Ajuste: Igualmente ao erro anterior temos um td agora sem fechamento adequado e dando erro td no posterior.
correção – incluir a tag de fechamento para os dois td conforme abaixo:
[html highlight="4,7"]

Linha 03 a

Linha 03 b

[/html]

Parabéns. Agora você tem seu código totalmente validado XHTML 1.0 Transitional.

Deixamos aqui uma surpresa para você, prometemos que íamos validar o código com XHTML 1.0 Strict. Como fomos disciplinados e logicamente nosso código não tem nada que fere a especificação XHTML 1.0 Strict podemos simplesmente mudar o DOCTYPE do nosso HTML e sermos vencedores mais uma vez.

Temos também o código totalmente validado XHTML 1.0 Strict.

O código final deve ter ficado como abaixo:
[html]

Página de Teste – Sr Web

Página Principal

Cabeçalho Coluna 1	Cabeçalho Coluna 2
Linha 01 a	Linha 01 b
Linha 02 a	Linha 02 b
Linha 03 a	Linha 03 b

Aqui vai algum conteúdo para seu site, algum texto referente ao seu site.

Clique aqui para ver nosso logotipo

[/html]

É isso aí pessoal, fizemos alguns exercícios com HTML, validadores e espero que vocês tenham aproveitado essa série de Posts sobre Validadores HTML.

Qualquer dúvida coloquem nos comentários que em breve esclareceremos mais coisas.

Até a próxima.

Como validar seu HTML de acordo com a W3C – Parte 2

Wesley Oliveira — Thu, 23 Apr 2009 23:18:16 +0000

No post anterior, fizemos a validação de um HTML para HTML 4.01 Transitional: Como validar seu HTML de acordo com a W3C

Aconselho você que antes de ler esse post leia o anterior. Afinal, é uma continuação, e algumas coisas poderão ficar mais claras seguindo essa idéia.

Código Validado e finalizado no post anterior.

[html]

Página de Teste – Sr Web

Página Principal

Cabeçalho Coluna 1	Cabeçalho Coluna 2
Linha 01 a	Linha 01 b
Linha 02 a	Linha 02 b
Linha 03 a	Linha 03 b

Aqui vai algum conteúdo para seu site, algum texto referente ao seu site.

Clique aqui para ver nosso logotipo

[/html]

Faremos agora a validação daquele código final, conforme acima, para validá-lo agora com o HTML 4.01 Strict, nossa idéia é ir incrementando aos poucos até chegar no último nível que é o XHTML 1.0 Strict.

Maõs a obra! Vamos já alterar o tipo do documento para HTML 4.01 Strict e passar no validador da w3c http://validator.w3.org

Altere o DOCTYPE do HMTL, deixe-o conforme abaixo:

[html toolbar="false" tabsize="4"]

[/html]

Vemos agora que temos 11 erros para arrumar e 1 warning (Incrível! Mas aquele nosso código parecia ser tão legal, até tinha validado…)

O que acontece é que cada DOCTYPE funciona como uma lente e ao olharmos a mesma coisa com lentes diferentes e teremos resultados diferentes, como somos persistentes e não desistimos no primeiro obstáculo, vamos imediatamente corrigir essas diferenças e fazer um HTML 4.01 Strict digno de ser validado pela W3C.

1º Ajuste: É um ajuste bem conceitual e importante. A regra dele é simples: todo elemento de linha deve estar dentro de um elemento de bloco.

Há duas formas básicas de diferenciar elementos bloco (e.g., p, h1, form, table) de elementos de linha (e.g., em, span, input):

* Conteúdo – elementos de bloco podem conter outros elementos de bloco e elementos de linha. Já os elementos de linha somente podem conter outros elementos de linha;

* Formatação – elementos de bloco começam em novas linhas, o que não acontece com elementos de linha.”

fonte: http://warau.nied.unicamp.br/?id=t33

Sendo assim temos algumas coisas “voando pela página” como os br . Indo mais a fundo no conceito, é realmente necessário esse monte de br em nossas páginas? De qualquer maneira vamos deixá-los para estudos e usá-los somente quando necessário, pois no nosso caso eles servem apenas para separar conteúdo que facilmente organizaremos colocando-os dentro de tags p (parágrafos).

correção – Coloque então todos os br dentro de p conforme abaixo:

[html toolbar="false"]

[/html]

Ao ajustar isso nosso número de erros já diminui bastante (3 erros e 2 warnings), vamos em frente corrigir os demais erros.

2º Ajuste: Colocar o img dentro de um elemento de bloco. Visto que img é um elemento de linha e não pode ser apresentado sem um elemento de bloco envolvendo-o.

correção – coloque o img dentro de um elemento de parágrafo p

[html toolbar="false"]

[/html]

3º Ajuste: Igualmente ao item anterior, a parte que contém nosso texto/conteúdo também deve estar dentro de um elemento de bloco.

correção – Coloque o texto dentro de uma tag p conforme código abaixo

[html toolbar="false"]

Aqui vai algum conteúdo para seu site, algum texto referente ao seu site.

[/html]

4º Ajuste: Idem aos dois anteriores temos que ajustar o link a dentro de um elemento de bloco, também pelos mesmos motivos já citados.

correção – Coloque o link dentro de uma tag p conforme código abaixo:

[html toolbar="false"]

Clique aqui para ver nosso logotipo

[/html]

Pronto: Agora temos um código HTML 4.01 Strict válidado. Parabéns.

Aprendemos com isso um conceito muito importante que são os elementos de bloco e elementos de linha, no começo pode parecer confuso distinguir uns de outros, mas uma dica interessante é saber se esse elemento utilizado num contexto inicia-se em outro parágrafo, se sim, então ele certamente é um elemento de bloco e o contrário disso é um elemento de linha.

Para dar um toque de classe ao nosso código vamos então deixar as coisas devidamente em seus parágrafos. Teremos 3 parágrafos e não usaremos todos os br.

Abaixo temos o código já revisado e validado – HTML 4.01 Strict:

[html]

Página de Teste – Sr Web

Página Principal

Cabeçalho Coluna 1	Cabeçalho Coluna 2
Linha 01 a	Linha 01 b
Linha 02 a	Linha 02 b
Linha 03 a	Linha 03 b

Aqui vai algum conteúdo para seu site, algum texto referente ao seu site.

Clique aqui para ver nosso logotipo

[/html]

É isso, você está a cada dia mais conceituado em HTML e espero que você possa melhorar ainda mais.

Bons estudos e não deixe de comentar.

Até mais.