Demonstração do Jquery.

Demo 1 de jQuery
Para começar veremos este exemplo, onde temos dois botões e um texto. Ao clicar um botão,
mudaremos o texto e ao clicar o outro colocaremos outro texto distinto.
Podemos ver o exemplo em funcionamento em uma página à parte.
Neste exemplo, temos uma camada que tem este código:
<div id="camada" style="padding: 10px; background-color: #ff8800">Clique em um botão</div>
Logo, temos dois botões com estes códigos:
<input type="button" value="Botão A" onclick="$('#camada').html('Clicou no botão <b>A</b>')">
<input type="button" value="Botão B" onclick="$('#camada').html('Recebido um clique no botão <b>B</b>')">
Como se pode ver, nos botões há definido um par de eventos onclick (um em cada um) que
executam uma instrução Javascript quando se clica sobre eles. A instrução está em Javascript,
porém faz uso de algumas ferramentas disponíveis em jQuery para trabalho com os elementos
da página. Neste caso, explicando rapidamente, se faz uma seleção do elemento DIV da
camada e logo se executa um método sobre ele para mudar o conteúdo HTML do elemento.
Demo 2 de jQuery
Neste outro exemplo, veremos algo um pouquinho mais complexo. Bom, realmente não tem
maior complexidade, porém estamos utilizando jQuery de uma maneira um pouco distinta, que
requer algo mais de código por nossa parte. Agora vamos ter duas camadas em nossa página.
Uma camada estará sempre visível e a outra camada aparecerá inicialmente oculta e vamos
mostrá-la ou ocultá-la dependendo de se o usuário coloca o mouse em cima da camada que
está sempre visível.
Para se ter uma idéia exata de nosso exemplo se pode ver em uma janela à parte.
Neste segundo exemplo, temos este código HTML, com as duas camadas.
<div id="camada" style="padding: 10px; background-color: #ff8800;">Coloque o mouse em cima desta
camada</div>
<br>
<div id="mensagem" style="display: none;">Colocou o mouse em cima!! <br>(Agora tire-o da camada)</div>

Agora vamos ter um código Javascript com jQuery que defina os eventos do usuário, para
quando situa o mouse dentro ou fora da primeira camada.
$("#camada").mouseenter(function(evento){
$("#mensagem").css("display", "block");
});
$("#capa").mouseleave(function(evento){
$("#mensagem").css("display", "none");
});
Desta simples maneira, criamos dois eventos no DIV com id="camada". Ademais, definimos o
código dos eventos por meio de funções, que se encarregarão de mostrar ou ocultar a segunda
camada com id="mensagem".
$("#mensagem").css("display", "block");
Isto nos seleciona a camada com id "mensagem" e com o método css() indicamos que
queremos mudar o atributo "display" ao valor "block" desse elemento.
$("#mensagem").css("display", "none");
Esta outra linha muito similar, simplesmente muda o "display" a "none" para ocultar o
elemento.
Esperamos que estes dois exemplos sirva para ver rapidamente algumas coisas que se podem
fazer com jQuery com muito pouco esforço e que funcionam em todos os navegadores.

Vantagens de jQuery com respeito a outras alternativas

É importante comentar que jQuery não é o único framework que existe no mercado. Existem
várias soluções similares que também funcionam muito bem, que basicamente nos servem
para fazer o mesmo. Como é normal, cada um dos frameworks tem suas vantagens e
desvantagens, porém jQuery é um produto com uma aceitação por parte dos programadores
muito boa e um grau de penetração no mercado muito amplo, o que faz supor que é uma das
melhores opções. Ademais, é um produto sério, estável, bem documentado e com uma grande
equipe de desenvolvedores encarregados da melhora e atualização do framework. Outra coisa
muito interessante é a dilatada comunidade de criadores de plugins ou componentes, o que
torna fácil encontrar soluções já criadas em jQuery para implementar assuntos como interfaces
de usuário, galerias, votações, efeitos diversos, etc.
Um dos competidores de jQuery, do qual já publicamos em CriarWeb.com um amplo manual
para programadores, é Mootools, que também possui vantagens similares. Este é o link ao
Manual de Mootools, que também pode ser interessante, porque certamente temos explicado
com mais detalhes que jQuery.
jQuery, é para mim?
Se estiver interessado em enriquecer sua página web com componentes da chamada Web 2.0,
como efeitos dinâmicos, Ajax, interação, interfaces de usuário avançadas, etc., jQuery é uma
ferramenta imprescindível para desenvolver todas estas coisas sem ter que se complicar com
os níveis mais baixos do desenvolvimento, já que muitas funcionalidades já estão
implementadas, ou ainda as bibliotecas do framework lhe permitirão realizar a programação
muito mais rápida e livre de erros.
Agora também, todas estas melhorias da web 2.0, que à princípio pode ser muito atrativas,
também tem têm um custo em tempo de desenvolvimento dos projetos. Sem um framework
como jQuery, o tempo de criação e depuração de todos esses componentes dinâmicos seria
muito maior, porém ainda assim ninguém diz que seja somente instalar o sistema e iniciar.
Entretanto, o mais complicado de jQuery é aprender a usá-lo, igual ao que ocorre com
qualquer outro framework Javascript. Requererá do desenvolvedor habilidades avançadas de
programação, assim como o conhecimento, ao menos básico, da programação orientada a
objetos. Uma vez aprendido as vantagens de utilizá-lo compensarão mais que de sobra o
esforço. Esperamos que com este Manual de jQuery, que estamos publicando em
CriarWeb.com possa aprender o necessário para desenvolver seus próprios componentes
dinâmicos em Javascript com os que enriquecer suas aplicações.
Podemos conhecer jQuery acessando à página de início do framework Javascript:
http://jquery.com/

O que é jQuery

Para simplificar, poderíamos dizer que jQuery é um framework Javascript, porém talvez muitos
dos leitores se perguntarão o que é um framework. Pois é um produto que serve como base
para a programação avançada de aplicações, que oferece uma série de funções ou códigos
para realizar tarefas habituais. Em outras palavras, framework são umas bibliotecas de código
que contém processos ou rotinas já prontas para usar. Os programadores utilizam os
frameworks para que eles mesmos não tenham que desenvolver as tarefas mais básicas, visto
que no próprio framework já há implementações que estão provadas, funcionam e não se
necessitam voltar a programar. Por exemplo, no caso que nos ocupa, jQuery é um framework para a linguagem Javascript,
logo será um produto que nos simplificará a vida para programar nesta linguagem. Como
provavelmente saberemos, quando um desenvolvedor tem que utilizar Javascript, geralmente
tem que se preocupar por fazer scripts compatíveis com vários navegadores e para isso tem
que incorporar muito código que o único que faz é detectar o browser do usuário, para fazer
uma coisa ou outra dependendo de se é Internet Explorer, Firefox, Opera, etc. jQuery é onde
mais nos pode ajudar, visto que implementa uma série de classes (de programação orientada a
objetos) que nos permitem programar sem nos preocuparmos do navegador com o qual nos
está visitando o usuário, já que funcionam de exata forma em todas as plataformas mais
habituais.
Sendo assim, este framework Javascript, nos oferece uma infra-estrutura com a qual teremos
muito maior facilidade para a criação de aplicações complexas do lado do cliente. Por exemplo,
com jQuery obteremos ajuda na criação de interfaces de usuário, efeitos dinâmicos, aplicações
que fazem uso de Ajax, etc. Quando programemos Javascript com jQuery teremos a nossa
disposição uma interface para programação que nos permitirá fazer coisas com o navegador
que estamos certos de que funcionarão para todos nossos visitantes. Simplesmente devemos
conhecer as bibliotecas do framework e programar utilizando as classes, suas propriedades e
métodos para a execução de nossos objetivos.
Ademais, todas estas vantagens que sem dúvida são muito de agradecer, com jQuery as
obtemos de maneira gratuita, já que o framework tem licença para uso em qualquer tipo de
plataforma, pessoal ou comercial. Para isso, simplesmente teremos que incluir em nossas
páginas um script Javascript que contém o código de jQuery, que podemos baixar da própria
página web do produto e começar a utilizar o framework.
O arquivo do framework ocupa uns 56 KB, o que é bastante razoável e não atrasará o
download de nossa página (se nosso servidor envia os dados comprimidos, o que é bastante
normal, o peso de jQuery será de uns 19 KB). Além disso, nosso servidor o enviará ao cliente a
primeira vez que visite uma página do site. Nas seguintes páginas o cliente já terá o arquivo
do framework, por isso não necessitará transferi-lo e o tomará do cache. Côo o qual o
carregamento da página só se verá afetada pelo peso deste framework uma vez por usuário.

As vantagens na hora de desenvolvimento das aplicações, assim como as portas que nos abre
jQuery compensam extraordinariamente o peso do pacote.

Definir estilos em um arquivo externo CSS

Veremos agora outra maneira de importar uma declaração externa de estilos CSS: @import url
("arquivo_a_importar.css"), que se utiliza para importar umas declarações de estilos salvadas
na rota que se indica entre parênteses. (as aspas são opcionais, mas os parêntesis são
obrigatórios, pelo menos, em Explorer).
Deve-se incluir na declaração de estilos global a uma página, ou seja, entre as etiquetas
<style type="text/css"> e </style>, que se colocam no cabeçalho do documento.
É importante assinalar que a sentença de importação do arquivo CSS deve ser escrita na
primeira linha da declaração de estilos, algo parecido ao código seguinte.
<style type="text/css">
@import url ("estilo.css");
body{
background-color:#ffffcc;
}
</style>
O funcionamento é o mesmo que se escrevêssemos todo o arquivo a importar dentro das
etiquetas dos estilos, com a garantia de que, se redefinimos dentro do código HTML (entre as
etiquetas </style>) estilos que haviam ficado definidos no arquivo externo, os que se aplicarão
serão os que tivermos redefinido.
Assim, no exemplo anterior, mesmo que tivéssemos definido em estilo.css uma cor de fundo
para a página, a cor que prevaleceria seria o definido em seguida da importação: #ffffcc
A diferença entre este tipo de importação do tipo e a que vimos anteriormente:
<link rel="stylesheel" type="text/css" href="folha.css">
É que @import url ("estilo.css") costuma ser utilizado quando existe umas pautas básicas no
trabalho com os estilos (que se definem em um arquivo a importar) e uns estilos específicos
para cada página, que se definem a seguir, dentro do código HTML entre as etiquetas
</style>, como é o caso do exemplo visto anteriormente

Uso das CSS II

Estilo definido para toda uma página
Podemos definir no cabeçalho do documento, estilos para que sejam aplicados a toda página. É
uma maneira muito cômoda de dar forma ao documento e muito potente, já que estes estilos
continuarão em toda a página e com isso, economizaremos muitas etiquetas HTML que dão forma ao documento. Além disso, se desejamos mudar os estilos da página simplesmente
faremos de uma vez só.
Este exemplo é mais complicado visto que utiliza a sintaxe CSS de forma mais avançada. Mas
não se preocupe, pois com os exemplos você irá aprendendo seu uso e mais tarde
comentaremos a sintaxe com mais profundidade.
No exemplo vemos que se utiliza a etiqueta <STYLE> colocada no cabeçalho da página para
definir os diferentes estilos do documento.
Simplificando, entre as etiquetas <STYLE> e </STYLE>, se coloca o nome da etiqueta que
queremos definir os estilos e entre chaves -{ }- colocamos em sintaxe CSS as características
de estilos.
<html>
<head>
<title>Exemplo de estilos para toda uma página</title>
<STYLE type="text/css">
<!--
H1 {text-decoration: underline; text-align:center}
P {font-Family:arial,verdana; color: white; background-color: black}
BODY {color:black;background-color: #cccccc; text-indent:1cm}
// -->
</STYLE>
</head>
<body>
<h1>Página com estilos</h1>
Bem-vindos...
<p>Desculpe ser tão breve, mas isto é um exemplo sem importância</p>
</body>
</html>
Como se pode apreciar no código, definimos que a etiqueta <H1> se apresentará:
• Sublinhada
• Centralizada
Também, por exemplo, definimos que no corpo do texto inteiro da página (etiqueta <BODY>
serão aplicados os seguintes estilos:
• Cor do texto negro
• Cor do fundo acinzentado
• Margem lateral de 1 centímetro
Cabe destacar que se aplicamos estilos à etiqueta <BODY>, estes serão herdados pelo resto
das etiquetas do documento. Isto será sempre assim, e no caso de que não volte a definir
estes estilos nas seguintes etiquetas, dominará a etiqueta mais concreta. Este detalhe pode
ser visto na etiqueta <P>, que tem definidos estilos que já foram definidos para <BODY>. Os
estilos que são aplicados são os da etiqueta <P> que é mais concreta.
Por último, é válido apreciar os comentários HTML que englobam toda a declaração de estilos:

<!--Declaração de estilos-->. Estes comentários são utilizados para que os navegadores
antigos que não compreendem a sintaxe CSS, não incluam esse texto no corpo da página.
Caso contrário, os navegadores antigos (por exemplo Netscape 3) escreveriam esse "feio
código" na página.
Estilo definido para todo o site web
Uma das características mais potentes da programação com folhas de estilo, consiste em que
podemos definir os estilos de todo um site web de uma só vez. Isto se consegue criando um
arquivo onde somente colocamos as declarações de estilos de página e linkando todas as
páginas do site com esse arquivo. Dessa forma, todas as páginas compartem uma mesma
declaração de estilos e, portanto, se a mudamos, mudarão todas as páginas. Todas as
vantagens acrescentadas de que se economiza em linhas de código HTML (o que reduz o peso
do documento) e se evita a moléstia de definir uma e outra vez os estilos com o HTML, tal
como foi comentado anteriormente.
Veremos agora como o processo para incluir estilos com o arquivo externo.
1 - Criamos o arquivo com a declaração de estilos
É um arquivo de texto normal, que pode ter qualquer extensão, apesar de podermos atribuir a
extensão .css para lembrarmos que tipo de arquivo é. O texto que devemos incluir deve ser
escrito exclusivamente em sintaxe CSS, ou seja, seria errado incluir o código HTML nas
etiquetas e etc. Podemos ver um exemplo a seguir:
P {
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
TD {
font-size : 10pt;
font-family : verdana,arial;
text-align : center;
background-color : 666666;
}
BODY {
background-color : #006600;
font-family : arial;
color : White;
}
2 - Linkamos a página com a folha de estilos
Para isso, vamos colocar a etiqueta <LINK> com os atributos:

Uso das CSS I

Vamos agora descrever os diferentes usos das CSS introduzidos no
capítulo anterior. Vamos por ordem descrevendo os pontos segundo
sua dificuldade e importância.
Dividimos este capítulo em duas partes por sua extensão e por haver várias formas distintas
de aplicar estilos. Aqui veremos as mais simples e no capítulo seguinte outras mais
complicadas, mas mais potentes.
Pequenas partes da página
Para definir estilos em seções reduzidas de uma página se utiliza a etiqueta <SPAN>. Com
seu atributo style indicamos em sintaxe CSS as características de estilos. Vemos com um
exemplo, colocaremos um parágrafo onde vamos visualizar determinadas palavras na cor verde.<p>
Isto é um parágrafo com várias palavras <SPAN style="color:green">de cor verde</SPAN>. é muito fácil.</p>

Que tem como resultado:
Isto é um parágrafo com várias palavras de cor verde. É muito fácil.
Estilo definido para uma etiqueta
Deste modo podemos fazer com que toda uma etiqueta mostre um estilo determinado. Por
exemplo, podemos definir um parágrafo inteiro de cor vermelha e outro de cor azul. Para isso,
utilizamos o atributo style, que é admitido por todas as etiquetas do HTML (sempre e quando
dispormos de um navegador compatível com CSS).
<p style="color:#990000">
Isto é um parágrafo de cor vermelha.
</p>
<p style="color:#000099">
Isto é um parágrafo de cor azul.
</p>
Que tem como resultado:
Isto é um parágrafo de cor vermelha.
Isto é um parágrafo de cor azul.
Estilo definido em uma parte da página
Com a etiqueta <DIV> podemos definir seções de uma página e aplicar estilos com o atributo
style, ou seja, podemos definir estilos de uma só vez a todo um bloco da página.
<div style="color:#000099; font-weight:bold">
<h3>Estas etiquetas vão em <i>azul e negrito</i></h3>
<p>
Continuamos dentro do DIV, por isso permanecem os
estilos.
</p>
</div>
Que tem como resultado:
Estas etiquetas vão em azul e negrito
Continuamos dentro do DIV, por isso permanecem os estilos.

Características e vantagens das CSS

A forma de funcionamento das CSS consiste em definir, mediante uma sintaxe especial, a
forma de apresentação que lhe aplicaremos a:
• Um web inteiro, de modo que se pode definir a forma de todo o web de uma vez só.
• Um documento HTML ou página, que se pode definir a forma, em um pequeno pedaço
da página.
• Uma porção do documento, aplicando estilos visíveis em um pedaço da página.
• Uma etiqueta em concreto, chegando inclusive a poder definir vários estilos diferentes
para uma só etiqueta. Isto é muito importante já que oferece potência em nossa
programação. Podemos definir, por exemplo, vários tipos de parágrafos: em vermelho,
em azul, com margens, sem margens...
A potência da tecnologia é óbvia. Mas não fica só por aqui, já que ademais esta sintaxe CSS
permite aplicar o documento formato de forma muito mais exata. Se antes o HTML ficava curto
para planejarmos as páginas e teríamos que utilizar truques pra conseguir nossos efeitos, agora temos muitas mais ferramentas que nos permite definir esta forma.
• Podemos definir a distância entre as linhas do documento.
• Pode-se aplicar recuo às primeiras linhas do parágrafo.
• Podemos colocar elementos na página com maior precisão, e sem lugar para erros.
• E muito mais, como definir a visibilidade dos elementos, margens, sublinhados,
riscados...
E continuamos mostrando vantagens, já que com o HTML somente podíamos definir atributos
nas páginas com pixels e porcentagens, agora podemos definir utilizando muito mais unidades
como:
• Pixels (px) e porcentagem (%), como antes.
• Polegadas (in)
• Pontos (pt)
• Centímetros (cm)
Navegadores que o suportam
Esta tecnologia é bastante nova, porém nem todos os navegadores a suportam. De fato,
somente os navegadores de Netscape versões da 4 em diante e de Microsoft a partir da versão
3 são capazes de compreender os estilos em sintaxe CSS. Ademais, cabe destacar que nem
todos os navegadores implementam as mesmas funções de folhas de estilos, por exemplo,
Microsoft Internet Explorer 3 não suporta nada em relação a camadas.
Isto quer dizer que devemos usar esta tecnologia com cuidado, já que muitos usuários não
poderão ver os formatos que apliquemos às páginas com CSS. Sendo assim, utilizem as folhas
de estilos quando estas não forem a supor causar um problema.

Introdução às CSS

A linguagem HTML está limitada na hora de aplicar forma a um documento. Isto é assim
porque foi concebido para outros usos (sobretudo científicos), diferente dos atuais, que são
muito mais amplos.
Para solucionar estes problemas, os web designers utilizaram técnicas tais como a utilização de
tabelas imagens transparentes para ajustá-las, a utilização de etiquetas que não são padrões
do HTML e outras. Estas "trapaças" causaram muitas vezes problemas nas páginas na hora de
sua visualização em distintas plataformas.
Ademais, os desenhadores se viram frustrados pela dificuldade com a qual, mesmo utilizando
estes truques, encontravam-se planejando páginas sobre o papel, onde o controle sobre a
forma do documento é absoluto.
Finalmente, outro antecedente que fez necessário o desenvolvimento desta tecnologia consiste
em que as páginas web têm misturado em seu código HTML o conteúdo do documento com as
etiquetas necessárias para lhe dar forma. Isto tem seus inconvenientes já que a leitura do
código HTML se faz pesada e difícil na hora de buscar erros ou depurar as páginas. Mesmo que
do ponto de vista da riqueza da informação e a utilidade das páginas na hora de armazenar
seu conteúdo, é um grande problema que estes textos estejam misturados com etiquetas
incrustadas para dar forma a estes: degrada-se sua utilidade.
Nestas páginas de CSS pretendemos tornar conhecida a tecnologia com um enfoque prático
para que em poucos capítulos você possa usar as CSS de forma depurada, refletindo toda
nossa experiência em seu uso. Não pretendemos explorar todos os aspectos da tecnologia já
para realizar isto necessitaríamos uma extensão do livro inteiro.