Você está na página 1de 21

Manuais e recursos para desenvolvimento web www.criarweb.

com

Introduo s linguagens do web

Autores do manual Este manual foi criado pelos seguintes colaboradores de Criarweb.com: Miguel Angel Alvarez Traduo de JML
(19 captulos)

Manual Introduo s linguagens do web: http://www.criarweb.com/linguagens_web/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

ndice do manual de linguagens do Web


Bem-vindos introduo s linguagens do web. Para comear podemos ver o ndice que vamos seguir e os objetivos a cobrir. 1 Introduo web Web um sistema Hipertexto/Hipermdia Linguagem HTML Pginas estticas Vs. dinmicas 2 Pginas dinmicas Pginas dinmicas de cliente Pginas dinmicas de servidor 3 Linguagens web de cliente Javascrip Visual Basic Script DHTML CSS Applets de Java 4 Linguagens web de servidor CGI, Common Gateway Interface ASP, Active Server Pages PHP, Hypertext Preprocesor JSP, Java Server Pages 5 XML Introduo a XML

Vamos estudar de maneira global o mundo da programao de pginas web. Para isso comearemos estudando rapidamente alguns conceitos bsicos, que certamente muitos j saberemos, como o marco onde a web se desenvolve, o que uma pgina web, como se constri uma pgina e a linguagem HTML. Ademais veremos o que uma pgina esttica e dinmica distinguindo entre pginas dinmicas de cliente e servidor. Vamos nos deter com maior profundidade na apresentao de cada uma das linguagens que temos a nossa disposio para construir pginas web, marcados no mbito onde se executam: cliente ou servidor. Para finalizar, conheceremos a linguagem XML e as tecnologias relacionadas com ele, para entender porque to importante esta linguagem e como se desenvolvem as webs que o utilizam.
Manual Introduo s linguagens do web: http://www.criarweb.com/linguagens_web/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 2

Manuais e recursos para desenvolvimento web www.criarweb.com

Artigo por Miguel Angel Alvarez - Traduo de JML

Introduo web
A web se enquadra dentro de Internet, no mais que um servio dos muitos que presta a Rede, entre os que podemos encontrar: Correio eletrnico IRC ou chat FTP O prprio web

1.1 Web um sistema Hipertexto/Hipermdia O sistema com o qual est construdo o web se chama hipertexto e um emaranhado de pginas conectadas com links. Os sistemas de hipertexto se utilizam em outros contextos parte do web, como a ajuda do Windows. So muito fceis de utilizar e tambm muito fcil encontrar o que buscamos rapidamente, graas a que clicando links vamos acessando informao que mais nos interessa. A web no s se limita a apresentar textos e links, tambm pode nos oferecer imagens, vdeos, udio e todo tipo de apresentaes, chegando a ser o servio mais rico em meios que tem a Internet. Por esta razo, para nos referir ao sistema que implementa o web (hipertexto), foi acunhado um novo termo que hipermdia, fazendo referncia a que o web permite contedos multimdia.
Referncia: Esta introduo est extrada do Manual de Publicar em Internet. Em tal manual pode-se encontrar uma introduo web mais ampla. Ir ao Manual de Publicar em Internet.

Artigo por Miguel Angel Alvarez - Traduo de JML

Linguagem HTML
Vemos uma pgina web em nosso navegador, ou cliente web, e parece uma s entidade, mas no assim, est composta por uma infinidade de diferentes arquivos, como so as imagens, os possveis vdeos e o mais importante: o cdigo fonte. O cdigo das pginas est escrito em uma linguagem chamada HTML, que indica basicamente onde colocar cada texto, cada imagem ou cada vdeo e a forma que tero ao serem colocados na pgina. O HTML se criou a princpio com objetivos de divulgao. Porm, no se pensou que a web chegaria a ser uma rea de cio com carter multimdia, de modo que, o HTML se criou sem dar respostas a todos os possveis usos que lhe dariam posteriormente e ao todo coletivo de gente que o utilizariam no futuro.

Manual Introduo s linguagens do web: http://www.criarweb.com/linguagens_web/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

A linguagem consta de etiquetas que tem esta forma <B> ou <P>. Cada etiqueta significa uma coisa, por exemplo <B> significa que se escreve em negrito (bold) ou <P> significa um pargrafo, <A> um link, etc. Quase todas as etiquetas tm sua correspondente etiqueta de fechamento, que indica que a partir deste ponto no deve afetar a etiqueta. Por exemplo, </B> se utiliza para indicar que se deixe de escrever em negrito. Portanto, o HTML no mais que uma srie de etiquetas que se utilizam para definir a forma ou o estilo que queremos aplicar ao nosso documento. <B>Isto est em negrito</B>. Partes de um documento HTML Um documento HTML deve estar delimitado pela etiqueta <html> e </html>. Dentro deste documento, podemos ainda distinguir duas partes principais: O cabealho, delimitado por <head> e </head> onde colocaremos etiquetas de ndole informativo como por exemplo o ttulo de nossa pgina. O corpo, delimitado pelas etiquetas <body> e </body>, que ser onde colocaremos nosso texto e imagens delimitados por sua vez por outras etiquetas como as que vimos anteriormente. O resultado um documento com a seguinte estrutura:
<html> <head> Etiquetas e contedos do cabealho Dados que no aparecem em nossa pgina mas que so importantes para catalog-la: Ttulo, palavras-chaves, etc </head> <body> Etiquetas e contedo do corpo Parte do documento que ser mostrada pelo navegador: Textos e imagens </body> </html>

Com tudo que j conhecemos sobre HTML, podemos construir uma pgina web que j tem bastante sentido. Vejamos um exemplo a seguir:
<html> <head> <title> Cozinha Para Todos</title> </head> <body> <p><b>Bem-vindo,</b></p> <p>Voc est na pgina <b>Cozinha para Todos</b>.</p> <p>Aqui voc aprender receitas fceis e deliciosas.</p> </body> </html>

Manual Introduo s linguagens do web: http://www.criarweb.com/linguagens_web/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

Podemos ver essa pgina em funcionamento para termos uma idia exata dos resultados.
Referncia: Para aprender todos os detalhes da linguagem HTML temos em criarweb.com um Manual de HTML que far as delcias de seus leitores. Ir ao Manual de HTML.

Artigo por Miguel Angel Alvarez - Traduo de JML

Pginas estticas Vs. dinmicas


Na web podemos encontrar, ou construir, dois tipos de pginas: As que se apresentam sem movimento e sem funcionalidades mais alm dos links. As pginas que tm efeitos especiais e nas quais podemos interagir.

As primeiras pginas so as que denominamos pginas estticas, se constroem com a linguagem HTML, que no permite grandes manobras para criar efeitos nem funcionalidades mais alm dos links. Estas pginas so muito fceis de criar, embora ofeream poucas vantagens tanto aos que desenvolvem a pgina como aos visitantes, j que s podem apresentar textos planos acompanhados de imagens e no mximo contedos multimdia como podem ser vdeos ou udios. O segundo tipo de pginas se denomina pgina dinmica. Uma pgina dinmica quando se inclui qualquer efeito especial ou funcionalidade e para isso necessrio utilizar outras linguagens de programao, parte do simples HTML. Enquanto as pginas estticas todo mundo pode imagin-las e no merecem mais explicaes, as pginas dinmicas so mais complexas e versteis. Para esclarecer este conceito, veremos com detalhe a seguir o que so as pginas dinmicas.
Referncia: Em Criarweb.com temos outro manual que explica mais detalhadamente as diferenas entre pginas estticas e dinmicas, porm desde outro ponto de vista. O manual tambm introduz seriamente o conceito de pgina dinmica e pode ser muito til sua leitura. Ir ao Manual de pginas dinmicas.

Artigo por Miguel Angel Alvarez - Traduo de JML

Pginas Dinmicas
Como vimos, uma pgina dinmica quando realiza efeitos especiais ou implementa alguma funcionalidade ou interatividade. Ademais, vimos que para programar uma pgina dinmica necessitaremos outras linguagens a parte do HTML. Entretanto, nunca devemos esquecer do HTML, j que este a base do desenvolvimento web: geralmente ao escrever uma pgina dinmica o cdigo das outras linguagens de programao se inclui embebida dentro do mesmo cdigo HTML. Uma razo pela qual construiremos uma pgina dinmica o simples visual que podem alcanar os trabalhos, j que podemos fazer apresentaes mais interessantes das que se
Manual Introduo s linguagens do web: http://www.criarweb.com/linguagens_web/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 5

Manuais e recursos para desenvolvimento web www.criarweb.com

conseguem utilizando unicamente HTML. Porm vamos ver com calma algumas razes menos bvias, mas mais importantes. Suponhamos que decidimos realizar um portal de televiso onde uma das informaes principais a prover poderia ser a programao semanal. Efetivamente, esta informao costuma ser dada pelas televises com meses de antecedncia e poderia ser muito facilmente armazenada em uma base de dados. Se trabalhssemos com pginas HTML, teramos que construir uma pgina independente para cada semana na qual introduziramos "a mo" cada um dos programas de cada um dos canais. Ainda assim, teramos que lembrarmos a cada semana de remover a pgina da semana passada e por a da anterior. Tudo isto poderia ser facilmente resolvido mediante pginas dinmicas. Neste caso, o que faramos seria criar um programa (somente um) que se encarregaria de recolher da base de dados da programao aqueles programas que so retransmitidos nas datas que nos interessa e de confeccionar uma pgina onde apareceria ordenado por canais e por hora de retransmisso. Deste modo, podemos automatizar um processo e j no nos preocuparmos mais de um aspecto da pgina por alguns meses. Este fazer poderamos aplicar em outras situaes: podemos preparar o horscopo de todos os dias, as promoes de um site de e-comercio... Podemos fazer uma classificao s pginas dinmicas em funo de onde se realiza o processamento da pgina, ou seja, o computador que se encarregar do peso adicional que supe que a pgina realize efeitos e funcionalidades.
Referncia: Cabe assinalar tambm neste ponto a existncia de outro manual que explica o conceito de pgina dinmica. Pode ser muito til sua leitura. Ir ao Manual de pginas dinmicas.

Artigo por Miguel Angel Alvarez - Traduo de JML

Pginas dinmicas de cliente


So as pginas dinmicas que se processam no cliente. Nestas pginas, toda a carga de processamento dos efeitos e funcionalidades suportada pelo navegador. Usos tpicos das pginas de cliente so efeitos especiais para webs como rollovers ou controle de janelas, apresentaes nas quais se podem mover objetos pela pgina, controle de formulrios, clculos, etc. O cdigo necessrio para criar os efeitos e funcionalidades se inclui dentro do mesmo arquivo HTML e chamado SCRIPT. Quando uma pgina HTML contm scripts de cliente, o navegador se encarrega de interpret-los e execut-los para realizar os efeitos e funcionalidades. As pginas dinmicas de cliente se escrevem em duas linguagens de programao principalmente: Javascript e Visual Basic Script (VBScript), que veremos detalhadamente mais adiante. Tambm veremos o conceito de DHTML e conheceremos as CSS.
Nota: Flash uma tecnologia e um programa, para criar efeitos especiais em pginas web. Com Flash tambm conseguimos fazer pginas dinmicas do lado do cliente. Como este manual explica as linguagens da web, no inclumos o Flash por nenhuma parte, porque no uma linguagem. Entretanto, se tivssemos que catalog-lo em algum lugar ficaria dentro do mbito das pginas dinmicas de cliente.

Manual Introduo s linguagens do web: http://www.criarweb.com/linguagens_web/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

As pginas do cliente so muito dependentes do sistema onde esto se executando. E essa sua principal desvantagem, j que cada navegador tem suas prprias caractersticas, inclusive cada verso, e o que pode funcionar em um navegador pode no funcionar em outro. Como vantagem pode-se dizer que estas pginas baixam ao servidor alguns trabalhos, oferecem respostas imediatas s aes do usurio e permite a utilizao de alguns recursos da mquina local. Artigo por Miguel Angel Alvarez - Traduo de JML

Pginas dinmicas de servidor


Podemos falar tambm de pginas dinmicas do servidor, que so reconhecidas, interpretadas e executadas pelo prprio servidor. As pginas do servidor so teis em muitas ocasies. Com elas pode-se fazer todo tipo de aplicaes web. Desde agendas a fruns, sistemas de documentao, estatsticas, jogos, chats, etc. So especialmente teis em trabalhos que tem de se acessar a informao centralizada, situada em uma base de dados no servidor, e quando por razes de segurana os clculos no podem se realizar no computador do usurio. importante destacar que as pginas dinmicas de servidor so necessrias porque para fazer a maioria das aplicaes web deve ter acesso a muitos recursos externos ao computador do cliente, principalmente bases de dados hospedadas em servidores de Internet. Um caso claro um banco: no tem nenhum sentido que o cliente tenha acesso a toda base de dados, s a informao que lhe convm saber. As pginas dinmicas do servidor costumam se escrever no mesmo arquivo HTML, misturado com o cdigo HTML, assim como ocorria nas pginas do cliente. Quando uma pgina solicitada por parte de um cliente, o servidor executa os scripts e gera uma pgina resultado, que somente contem cdigo HTML. Este resultado final o que se envia ao cliente e pode ser interpretado sem lugar a erros nem incompatibilidades, visto que somente contem HTML Logo o servidor o que maneja toda a informao das bases de dados e qualquer outro recurso, como imagens ou servidores de correio e logo envia ao cliente uma pgina web com os resultados de todas as operaes. Para escrever pginas dinmicas de servidor existem vrias linguagens, que veremos com mais detalhe adiante. Common Gateway Interface (CGI) normalmente escritos em Perl, Active Server Pages (ASP), Hipertext Preprocesor (PHP), e Java Server Pages (JSP). As vantagens deste tipo de programao so que o cliente no pode ver os scripts, j que se executam e se transformam em HTML antes de envia-los. Ademais so independentes do navegador do usurio, j que o cdigo que recebem HTML facilmente interpretvel. Como desvantagens pode-se assinalar que ser necessrio um servidor mais potente e com mais capacidades que o necessrio para as pginas de cliente. Ademais, estes servidores podero suportar menos usurios concorrentes, porque vai requerer mais tempo de processamento para cada um.

Manual Introduo s linguagens do web: http://www.criarweb.com/linguagens_web/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

Artigo por Miguel Angel Alvarez - Traduo de JML

O que Javascript
Javascript uma linguagem de programao utilizada para criar pequenos programinhas encarregados de realizar aes dentro do mbito de uma pgina web . Trata-se de uma linguagem de programao do lado do cliente, porque o navegador que suporta a carga de processamento. Graas a sua compatibilidade com a maioria dos navegadores modernos, a linguagem de programao do lado do cliente mais utilizada. Com Javascript podemos criar efeitos especiais nas pginas e definir interatividades com o usurio. O navegador do cliente o encarregado de interpretar as instrues Javascript e execut-las para realizar estes efeitos e interatividades, de modo que o maior recurso, e talvez o nico, com que conta esta linguagem o prprio navegador. Javascript o seguinte passo, depois do HTML, que pode dar um programador da web que decida melhorar suas pginas e a potncia de seus projetos. uma linguagem de programao bastante simples e pensada para fazer as coisas com rapidez , s vezes com leveza. Inclusive as pessoas que no tenham uma experincia prvia na programao podero aprender esta linguagem com facilidade e utiliz-la em toda sua potncia com somente um pouco de prtica. Entre as aes tpicas que se podem realizar em Javascript temos duas vertentes. Por um lado os efeitos especiais sobre pginas web, para criar contedos dinmicos e elementos da pgina que tenham movimento, mudem de cor ou qualquer outro dinamismo. Por outro lado, Javascript nos permite executar instrues como resposta s aes do usurio, com o qual podemos criar pginas interativas com programas como calculadoras, agendas, ou tabelas de clculo. Javascript uma linguagem com muitas possibilidades, permite a programao de pequenos scripts, mas tambm de programas maiores, orientados a objetos, com funes, estruturas de dados complexas, etc. Ademais, Javascript coloca disposio do programador todos os elementos que formam a pgina web, para que este possa acessar a eles e modific-los dinamicamente. Com Javascript o programador, quem se converte no verdadeiro dono e controlador de cada coisa que ocorre na pgina quando est sendo visualizada pelo cliente.
Ver tambm: Para que fique claro a linguagem e alguma aplicao prtica que pode ser feita e entendida rapidamente, pode acessar ao artigo Efeitos Rpidos com Javascript. Em tal artigo, veremos a implementao de um boto de voltar e uma amostra da ltima modificao de uma pgina web.

Referncias Em CriarWeb.com publicamos um manual de programao em Javascript, onde explicamos toda a sintaxe e metodologia de programao. Artigo por Miguel Angel Alvarez - Traduo de JML

Manual Introduo s linguagens do web: http://www.criarweb.com/linguagens_web/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

O que Visual Basic Script


uma linguagem de programao de scripts do lado do cliente, mas somente compatvel com Internet Explorer. por isso que sua utilizao est desaconselhada a favor de Javascript. Est baseado em Visual Basic que uma linguagem popular para criar aplicaes Windows. Tanto sua sintaxe como sua forma de trabalhar est muito inspirada nele. Entretanto, nem tudo o que se pode fazer em Visual Basic poderemos fazer com Visual Basic Script, pois este ltimo uma verso reduzida do primeiro. A forma de funcionamento de Visual Basic Script para construir efeitos especiais em pginas web muito similar a utilizada em Javascript, e os recursos aos quais se pode acessar tambm so os mesmos: o navegador. Como dissemos, no devemos utilizar esta linguagem na maioria das ocasies, embora um caso em que teria sentido utilizar Visual Basic Script seria a construo de uma Intranet onde saibamos com toda certeza que os navegadores que vo se conectar sero sempre em Internet Explorer. Neste caso, um programador habitual de Visual Basic teria mais facilidades para realizar os scripts utilizando Visual Basic Script ao invs de Javascript.
Nota: O popular ASP (Active Server Pages) uma tecnologia de programao do lado do servidor. Habitualmente, os scripts ASP se escrevem com Visual Basic Script tambm e isso no deve nos confundir. Visual Basic Script, portanto, uma linguagem que pode ser utilizada para a programao no cliente, como tambm para programao no servidor.

Artigo por Miguel Angel Alvarez - Traduo de JML

DHTML
DHTML no precisamente uma linguagem de programao. Mas trata-se de uma nova capacidade da que dispem os navegadores modernos, pelo qual se pode ter um maior controle sobre a pgina que antes. Qualquer pgina que responde s atividades do usurio e realiza efeitos e funcionalidades, pode ser englobada dentro do DHTML, mas neste caso nos referimos mais a efeitos no navegador pelos quais se podem mostrar e ocultar elementos da pgina, ou pode modificar sua posio, dimenses, cor, etc. DHTML nos d mais controle sobre a pgina, graas a que os navegadores modernos incluem uma nova estrutura para visualizar em pginas web denominada camada. As camadas podem ser ocultadas, mostradas, deslocadas, etc.

Manual Introduo s linguagens do web: http://www.criarweb.com/linguagens_web/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

Para realizar as aes sobre a pgina, como modificar a aparncia de uma camada, seguimos necessitando uma linguagem de programao do lado do cliente como Javascript ou VBScript.
Esclarecimento: DHTML tambm pode englobar a programao no servidor. Depende do autor que esteja descrevendo o que DHTML, muitas vezes faz tambm referncia programao ao servidor e no s ao cliente, como apontamos neste artigo. Ns tambm pensamos que de certo modo deveria incluir este tipo de programao e assim, o constatamos em um artigo publicado anteriormente em Criarweb sobre O que DHTML. Em outras palavras e para que fique claro. As fronteiras do DHTML ficam pouco definidas. As que marcamos no presente artigo so somente as que englobam o processo no cliente, mas tambm poderamos dizer que DHTML qualquer coisa que faz uma pgina dinmica, j seja no cliente, no servidor ou nas duas coisas.

Dentro do conceito de DHTML se englobam tambm as Folhas de Estilo em Cascata ou CSS (Cascade Style Sheets), que veremos a seguir. Artigo por Miguel Angel Alvarez - Traduo de JML

O que CSS
CSS, uma tecnologia que nos permite criar pginas web de uma maneira mais exata. Graas s CSS somos muito mais donos dos resultados finais da pgina, podendo fazer muitas coisas que no se podia fazer utilizando somente HTML, como incluir margens, tipos de letra, fundos, cores... CSS so as siglas de Cascading Style Sheets, em portugus Folhas de Estilo em Cascata. Neste artigo vamos ver alguns dos efeitos que se podem criar com as CSS sem necessidade de conhecer a tecnologia inteira. Para comear As Folhas de Estilo em Cascata se escrevem dentro do cdigo HTML da pgina web, somente em casos avanados se podem escrever em um arquivo parte e linkar a pgina com esse arquivo. princpio, vamos utilizar a maneira mais direta de aplicar estilos aos elementos da pgina, mais adiante veremos a declarao em arquivos externos. Para isso, e isto a primeira lio deste artigo, vamos conhecer um novo atributo que se pode utilizar em quase todas as etiquetas HTML: style. Exemplo:
<p style="color:green;font-weight:bold">O pargrafo sair com a cor verde e em negrito</p>

Dentro do atributo style se devem indicar os atributos de estilos CSS separados por ponto e vrgula (;). Durante este artigo vamos conhecer muitos atributos de CSS, os dois primeiros que vimos aqui so: Color: indica a cor do contedo, na etiqueta onde estivermos utilizando, geralmente indica a cor do texto.

Manual Introduo s linguagens do web: http://www.criarweb.com/linguagens_web/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

10

Manuais e recursos para desenvolvimento web www.criarweb.com

Font-weight: indica a grossura do texto. Bold serve para colocar em negrito. Cor nos links Com HTML definimos a cor dos links no <body>, com os atributos link, vlink e alink. Isto nos permite mudar a cor dos links para todo o documento, mas e se quisermos mudar a cor de um link em concreto, para que tenha outra cor que a definida na etiqueta <body>? Para fazer isto utilizaremos o atributo style dentro do link:
<a href="meulink.html" style="color:red">

Assim sair o link na cor vermelha, independentemente da cor definida para todo o documento. Espaamento entre linhas Com CSS podemos definir o espao entre cada linha do documento, utilizando o atributo lineheight. Por exemplo, podemos definir que para todo um pargrafo o espao entre cada uma de suas linhas seja 25 pixels:
<p style="line-height: 25px;"> Um pargrafo normal no qual cada uma das linhas est separada 25 pixels da outra. H de colocar suficiente texto como para que se vejam 2 linhas, assim sairo separadas </p>

Espaamento entre caracteres Pode-se definir tambm o espao entre cada caractere. Isto se faz com o atributo de CSS letter-spacing. Vejamos um exemplo:
<p style="letter-spacing:12cm"> Este pargrafo tem as letras espaadas por 1 centmetro. </p>

Este atributo, assim como ocorre com muitos outros de CSS, no est suportado para todos os navegadores. Netscape por exemplo, em sua verso 4 ainda no o inclui. Links sem sublinhado Um dos efeitos mais significativos e fceis de realizar com CSS eliminar o sublinhado dos links de uma pgina web. Existe um atributo que serve para definir a decorao de um texto, se est sublinhado, riscado, ou se no tem nenhuma destas "decoraes". o atributo textdecoration, neste caso indicaremos em um link que no queremos decorao:
<a href="minhapagina.html" style="text-decoration:none">

Incluir estilos para todo um site web Uma das caractersticas mais potentes da programao com folhas de estilo consiste em definir os estilos de todo um website. Isto se consegue criando um arquivo onde simplesmente colocamos as declaraes de estilos da pgina e linkamos todas as pginas do site com esse arquivo. Deste modo, todas as pginas compartilham uma mesma declarao de estilos e, portanto, se a mudamos, todas as pginas sero mudadas.
Manual Introduo s linguagens do web: http://www.criarweb.com/linguagens_web/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 11

Manuais e recursos para desenvolvimento web www.criarweb.com

Vejamos agora todo o processo para incluir estilos com um arquivo externo. 1- Criamos o arquivo com a declarao de estilos um arquivo de texto normal, que pode ter qualquer extenso, apesar de que lhe podemos atribuir a extenso .css para lembrarmos de que tipo de arquivo . O texto que devemos incluir deve ser escrito exclusivamente em sintaxe CSS, um pouco diferente da sintaxe que utilizamos dentro do atributo style. Estaria errado incluir cdigo HTML neste arquivo: etiquetas e outras. 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; } BODY { background-color : #006600; font-family : arial; color : White; }

2- Linkamos a pgina web com a folha de estilos Para isso vamos colocar a etiqueta <LINK> com os atributos rel="STYLESHEET" indicando que o link uma folha de estilo. type="text/css" porque o arquivo de texto, em sintaxe CSS. href="estilos.css" indica o nome do arquivo fonte dos estilos.

Vejamos uma pgina web inteira que linka com a declarao de estilos anterior:
<html> <head> <link rel="STYLESHEET" type="text/css" href="estilos.css"> <title>Pgina que l estilos</title> </head> <body> <h1>Pgina que l estilos</h1> <p> Esta pgina tem no cabealho a etiqueta necessria para linkar com a folha de estilos. muito fcil. </p> </body> </html>

As CSS tm muito mais possibilidades As Folhas de Estilo em Cascata so um padro muito amplo, com umas especificaes e possibilidades muito grandes. Neste artigo vimos alguns efeitos interessantes para realizar mesmo que no tenhamos nenhum conhecimento prvio. Entretanto, o melhor para trabalhar com esta tecnologia conhece-la bem, graas a isso, os resultados sero muito mais surpreendentes.
Manual Introduo s linguagens do web: http://www.criarweb.com/linguagens_web/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 12

Manuais e recursos para desenvolvimento web www.criarweb.com

Para ampliar esta informao e conhecer mais sobre CSS, recomendamos o manual de CSS publicado em CriarWeb.com Artigo por Miguel Angel Alvarez - Traduo de JML

O que so os Applets de Java


outra maneira de incluir cdigo a executar nos clientes que visualizam uma pgina web. Trata-se de pequenos programas feitos em Java, que se transferem com as pginas web e que o navegador executa no espao da pgina. Os applets de Java esto programados em Java e pr-compilados, por isso que a maneira de trabalhar destes, varia um pouco em relao s linguagens de script como Javascript. Os applets so mais difceis de programar que os scripts em Javascript e requeriam alguns conhecimentos bsicos ou meios da linguagem Java. A principal vantagem de utilizar applets consiste em que so muitos menos independentes do navegador que os scripts em Javascript, inclusive independentes do sistema operativo do computador onde se executam. Ademais, Java mais potente que Javascript, portanto o nmero de aplicaes dos applets poder ser maior. Como desvantagens em relao com Javascript cabe assinalar que os applets so mais lentos de processar e que tm espao muito delimitado na pgina onde se executam, ou seja, no se misturam com todos os componentes da pgina, nem tm acesso a eles. por isso que com os applets de Java no poderemos fazer diretamente coisas como abrir janelas secundrias, controlar Frames, formulrios, camadas, etc. Como possvel a multiplataforma em Java Java compatvel com todos os sistemas porque baseia seu funcionamento nos Byte Codes, que no mais que uma pr-compilao do cdigo fonte de Java. Estes Byte Codes no so o programa em Java propriamente dito, e sim, um arquivo que contm um cdigo intermdio que pode manejar a Mquina Virtual de Java. Cada sistema operativo dispe de uma Maquina Virtual de Java que pode interpretar os Byte Codes e transform-los em sentenas no sistema em questo. Exemplos de Applets de Java Na web podemos encontrar muitos exemplos de applets de Java muito teis e complexos. Ns mostraremos aqu dois exemplos que no tem muita importncia, mais que podem clarear um pouco mais sobre o que se tratam estes applets. Exemplo de Relgio 3D. Efeito visual para incorporar um relgio digitando o 3D em sua pgina web. Exemplo de banner dinmico. Uma animao de diversas palavras que saem no espao de um banner. Pode-se configurar para que saia o texto que desejarmos.

Artigo por Miguel Angel Alvarez - Traduo de JML

Manual Introduo s linguagens do web: http://www.criarweb.com/linguagens_web/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

13

Manuais e recursos para desenvolvimento web www.criarweb.com

O que CGI
o sistema mais antigo que existe para a programao das pginas dinmicas de servidor. Atualmente se encontra um pouco defasado por diversas razes entre as quais se destaca a dificuldade com a que se desenvolvem os programas e a pesada carga que supem para o servidor que os executa. Os CGI se escrevem habitualmente na linguagem Perl, entretanto, outras linguagens como C, C++ ou Visual Basic podem tambm ser empregados para constru-los. O funcionamento bsico de um programa CGI parecido ao apontado para o conjunto das pginas dinmicas do servidor, com algumas particularidades. 1. Realiza-se uma petio http, a qual podem acompanhar dados que chegam ou por um formulrio, ou tambm atravs da URL. 2. O servidor executa os programas CGI aos que se acessa e trabalha com os recursos necessrios para realizar as aes, como por exemplo, as bases de dados. 3. O programa CGI vai escrevendo na sada padro, o resultado da execuo do CGI, que inclui etiquetas HTML, j que o que se escreve uma pgina web. Algumas desvantagens da programao em CGI so as seguintes: Os resultados se escrevem diretamente com o CGI, portanto o cdigo do programa se mistura com o do HTML tornando difcil sua compreenso e manuteno. Cada programa CGI que se coloca em funcionamento se faz em um espao de memria prprio. Sendo assim, se trs usurios colocam em funcionamento um CGI ao mesmo tempo, se multiplicar por trs a quantidade de recursos que ocupa esse CGI. Isto significa uma grave ineficincia.

Artigo por Miguel Angel Alvarez - Traduo de JML

O que Perl
uma linguagem de programao muito utilizada para construir aplicaes CGI para o web. Perl a abreviao de Practical Extracting and Reporting Languaje, que indica que trata-se de uma linguagem de programao muito prtica para extrair informao de arquivos de texto e gerar informes a partir do contedo dos arquivos. uma linguagem de livre uso, isso quer dizer que gratuita. Antes, estava bastante associada plataforma Unx, mas atualmente est disponvel em outros sistemas operativos como Windows. Perl uma linguagem de programao interpretada, assim como muitas outras linguagens da Internet como Javascript ou ASP. Isto quer dizer que o cdigo dos scripts em Perl no se compila e sim, que cada vez que se quer executar, se l o cdigo e se coloca em funcionamento o que h escrito. Ademais extensvel a partir de outras linguagens, j que desde Perl poderemos fazer chamadas a subprogramas escritos em outras linguagens. Tambm desde outras linguagens podemos executar o cdigo Perl. Perl est inspirado a partir de linguagens como C, sh, awk e sed (alguns provenientes dos sistemas Unx), mas est enfocado a ser mais prtico e fcil que estes ltimos. por isso que
Manual Introduo s linguagens do web: http://www.criarweb.com/linguagens_web/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 14

Manuais e recursos para desenvolvimento web www.criarweb.com

um programador, que tenha trabalhado com a linguagem C e outras, ter menos problemas para entend-la e utiliz-la rapidamente. Uma diferena fundamental de Perl em relao s outras linguagens que no limita o tamanho dos dados com os quais trabalha, o limite o coloca a memria que nesse momento se encontra disponvel. Se quisermos trabalhar com Perl ser necessrio ter instalado o intrprete da linguagem. A partir desse momento podemos executar CGIs em nossos servidores web. O processo para conseguir pode variar de uns servidores a outros, mas costuma-se colocar em um diretrio especial do servidor chamado cgi-bin onde colocamos as correspondentes permisses CGI. Ademais, os arquivos com o cdigo tambm devero ter permisso de execuo. Artigo por Miguel Angel Alvarez - Traduo de JML

O que ASP
ASP (Active Server Pages) a tecnologia desenvolvida por Microsoft para a criao de pginas dinmicas do servidor. ASP se escreve na mesma pgina web, utilizando a linguagem Visual Basic Script ou Jscript (Javascript de Microsoft). Uma linguagem do lado do servidor aquela que se executa no servidor web, justo antes da pgina ser enviada atravs da Internet ao cliente. As pginas que se executam no servidor podem realizar acessos bases de dados, conexes em rede, e outras tarefas para criar a pgina final que o cliente ver. O cliente somente recebe uma pgina com o cdigo HTML resultante da execuo da pgina ASP. Como a pgina resultante contm unicamente cdigo HTML, compatvel com todos os navegadores. Podemos saber algo mais sobre a programao do servidor e do cliente no artigo o que DHTML. Os tipos de servidores que empregam esta linguagem so, evidentemente, todos aqueles que funcionam com sistema Windows NT, apesar de que tambm podemos utilizar em um PC com windows 98 se instalamos um servidor denominado Personal Web Server. Inclusive sistemas Linux podemos utilizar as ASP se instalamos um componente denominado Chilisoft, apesar de que parece claro que ser melhor trabalhar sobre o servidor web para o que est pensado: Internet Information Server. Com as ASP podemos realizar muitos tipos de aplicaes distintas. Permite-nos acesso base de dados, ao sistema de arquivos do servidor e em geral, a todos os recursos que tenha o prprio servidor. Tambm temos a possibilidade de comprar componentes ActiveX fabricados por distintas empresas de desenvolvimento de software que servem para realizar mltiplos usos, como o envio de correio, gerar grficos dinamicamente, e etc. Atualmente, j foi apresentada a segunda verso de ASP, o ASP.NET, que compreende algumas melhoras em relao s possibilidades da linguagem e rapidez com a que funciona. ASP.NET tem algumas diferenas em relao sintaxe com o ASP, de modo que h de ser tratado de formas distinta um do outro. Artigo por Miguel Angel Alvarez - Traduo de JML

Manual Introduo s linguagens do web: http://www.criarweb.com/linguagens_web/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

15

Manuais e recursos para desenvolvimento web www.criarweb.com

O que PHP
PHP o acrnimo de Hipertext Preprocesor. uma linguagem de programao do lado do servidor gratuito e independente de plataforma, rpido, com uma grande livraria de funes e muita documentao. Uma linguagem do lado do servidor aquela que se executa no servidor web, justo antes da pgina ser enviada atravs da Internet ao cliente. As pginas que se executam no servidor podem realizar acessos a bases de dados, conexes em rede, e outras tarefas para criar a pgina final que ser vista pelo cliente. O cliente somente recebe uma pgina com o cdigo HTML resultante da execuo da PHP. Como a pgina resultante contm unicamente cdigo HTML, compatvel com todos os navegadores. Podemos saber algo mais sobre a programao do servidor e do cliente no artigo o que DHTML.

Esquema do funcionamento das pginas PHP.

Uma vez que j conhecemos o conceito de linguagem de programao de scripts do lado do servidor podemos falar de PHP. PHP se escreve dentro do cdigo HTML, o que o faz realmente fcil de utilizar, assim como ocorre com o popular ASP de Microsoft, porm com algumas vantagens como sua gratuidade, independncia de plataforma, rapidez e segurana. Qualquer pessoa pode baixar atravs da pgina principal de PHP www.php.net e de forma gratuita, um mdulo que faz com que nosso servidor web compreenda os scripts realizados nesta linguagem. independente de plataforma, visto que existe um mdulo de PHP para quase qualquer servidor web. Isto faz com que qualquer sistema possa ser compatvel com a linguagem e significa uma vantagem importante, j que permite levar o site desenvolvido em PHP de um sistema a outro sem praticamente nenhum trabalho. PHP, no caso de estar montado sobre um servidor Linux ou Unix, mais rpido que ASP, dado
Manual Introduo s linguagens do web: http://www.criarweb.com/linguagens_web/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 16

Manuais e recursos para desenvolvimento web www.criarweb.com

que se executa em um nico espao de memria e isto evita as comunicaes entre componentes COM que se realizam entre todas as tecnologias implicadas em uma pgina ASP. Por ltimo assinalamos a segurana, neste ponto tambm importante o fato de que em muitas ocasies PHP se encontra instalado sobre servidores Unix ou Linux, que so bastante conhecidos como mais velozes e seguros que o sistema operativo onde se executa as ASP, Windows NT ou 2000. Ademais, PHP permite configurar o servidor de modo que se permita ou rejeita diferentes usos, o que pode fazer da linguagem mais ou menos segura dependendo das necessidades de cada um. Foi criado originalmente em 1994 por Rasmus Lerdorf, mas como PHP est desenvolvido em poltica de cdigo aberto, ao longo de sua histria teve muitas contribuies de outros desenvolvedores. Atualmente PHP se encontra em sua verso 4, que utiliza o motor Zend, desenvolvido com maior meditao para cobrir as necessidades das aplicaes web atuais. Esta linguagem de programao est preparada para realizar muitos tipos de aplicaes web graas extensa livraria de funes com a qual est dotada. A livraria de funes cobre desde clculos matemticos complexos at tratamento de conexes de rede, podemos dar dois exemplos. Algumas das mais importantes capacidades de PHP so: compatibilidade com as bases de dados mais comuns, como MySQL, mSQL, Oracle, Informix, e ODBC, por exemplo. Inclui funes para o envio de correio eletrnico, upload de arquivos, criar dinamicamente no servidor imagens no formato GIF, inclusive animadas e uma lista interminvel de utilidades adicionais. Pode-se obter muito mais informaes de PHP nos manuais de PHP que temos publicado em criarweb. Manuais que atendem aos diversos nveis de cada programador: Programao em PHP: Aprenda PHP desde o princpio com este manual que abrange as partes mais imprescindveis. Workshop de PHP: outros artigos prticos mais avanados com a linguagem.

Artigo por Miguel Angel Alvarez - Traduo de JML

O que JSP
JSP a abreviao de Java Server Pages, que em portugus seria algo como Pginas de Servidor Java. ento, uma tecnologia orientada a criar pginas web com programao em Java.
Bibliografia: Esta descrio de JSP est extrada de um PDF em ingls muito completo que introduz a tecnologia, que pode ser encontrada na pgina corporativa de Java de Sun Microsystems, em sua seo de aprendizado on-line. Por sua vez, tal manual provm do portal Java jGuru. jGuru: Introduction to JavaServer Pages technology

Com JSP podemos criar aplicaes web que se executam em vrios servidores web, de mltiplas plataformas, j que Java em essncia uma linguagem multiplataforma. As pginas JSP esto compostas de cdigo HTML/XML misturado com etiquetas especiais para programar scripts de servidor em sintaxe Java. Portanto, poderemos escrever as JSP com nosso editor HTML/XML habitual.

Manual Introduo s linguagens do web: http://www.criarweb.com/linguagens_web/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

17

Manuais e recursos para desenvolvimento web www.criarweb.com

Motor JSP O motor das pginas JSP est baseado nos servlets de Java -programas em Java destinados a se executar no servidor-, embora o nmero de desenvolvedores que podem afrontar a programao de JSP muito maior, dado que muito mais simples de aprender que os servlets. Em JSP criamos pginas de maneira parecida a como se criam em ASP ou PHP -outras duas tecnologias de servidor. Geramos arquivos com extenso .jsp que incluem, dentro da estrutura de etiquetas HTML, as sentenas Java a executar no servidor. Antes que os arquivos sejam funcionais, o motor JSP realiza uma fase de traduo dessa pgina em um servlet, implementado em um arquivo class (Byte codes de Java). Esta fase de traduo se realiza habitualmente quando se recebe a primeira solicitao da pgina .jsp, embora exista a opo de pr-compilar em cdigo para evitar esse tempo de espera na primeira vez que um cliente solicita a pgina. Exemplo de pgina JSP Na imagem seguinte pode-se ver um exemplo extremamente simples de uma pgina JSP e o esquema de converso dessa pgina em um servlet.

Pr-requisitos Para aprender JSP, a parte de conhecer HTML, ser necessrio compreender e ter algo de experincia na programao em Java, que uma Linguagem de Programao Orientada a Objetos por completo. Uma vez conhecida a programao em Java pode-se estudar por alto o sistema de Servlets, o que nos dar uma melhor idia do funcionamento interno do motor JSP. Ademais, necessitaremos baixar e instalar Tomcat, o continer de servlets usado na referncia oficial de implementao de JSP. Podemos acessar a um exerccio para aprender a realizar esta instalao, disponvel tambm na referncia de aprendizagem da pgina de Java.

Manual Introduo s linguagens do web: http://www.criarweb.com/linguagens_web/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

18

Manuais e recursos para desenvolvimento web www.criarweb.com

Artigo por Miguel Angel Alvarez - Traduo de JML

Comparando JSP com ASP


JSP e ASP servem para fazer, mais ou menos, o mesmo tipo de aplicaes web. Entretanto, no fundo tm bastantes diferenas. Depois de minha experincia no trabalho com JSP, um dia, um cliente me perguntou por que no programava a pgina em ASP no lugar de JSP, j que havia escutado falar que o sistema de Microsoft tinha umas caractersticas muito apropriadas para seu modelo de negcio. A partir desta sugesto, e para que meu cliente ficasse satisfeito com a tecnologia JSP -que a que prefiro utilizar-, preparei uma lista de vantagens de utilizar pginas dinmicas Java frente s de Microsoft. Plataforma e independncia do servidor JSP segue a filosofia da arquitetura JAVA de "escreve uma vez, executa onde quiser". A implantao de ASP est limitada para arquiteturas baseadas em tecnologia Microsoft. Assim, JSP pode ser executado nos sistemas operativos e servidores web mais populares, como por exemplo, Apache, Netscape ou Microsoft IIS. Enquanto que ASP s tem suporte nativo para os servidores IIS e Personal Web Server, que so os dois servidores web para sistemas Microsoft, o primeiro com tecnologia NT e o segundo para sistemas Windows 98 e similares. Processo de desenvolvimento aberto (open source) O API JSP se beneficia da extensa comunidade JAVA existente, pelo contrrio a tecnologia ASP especfica de Microsoft que desenvolve seus processos internamente. TAGS Enquanto que tanto JSP como ASP usam uma combinao de tags e scripts para criar pginas web dinmicas, a tecnologia JSP permite aos desenvolvedores criar novas tags. Assim os desenvolvedores podem criar novas tags e no depender tanto dos scripts. Reusabilidade entre plataformas. Os componentes JSP so reusveis em distintas plataformas (UNIX, Windows). A vantagem Java A tecnologia JSP usa Java como linguagem de Script enquanto que ASP usa VBScript ou Jscript. Java uma linguagem mais potente e com mais escalas que as linguagens de Script. As pginas JSP so compiladas em Servlets pelo qual atuam como uma porta a todos os servios Java de Servidor e livrarias Java para aplicaes http. Java faz o trabalho do desenvolvedor mais fcil p. e. ajuda a proteger o sistema contra as "cadas" enquanto que as aplicaes ASP sobre sistemas NT so mais suscetveis a sofr-las, tambm ajuda no manejo da memria protegendo contra falhas de memria e o duro trabalho de buscar os falhos de perda de ponteiros de memria que podem tornar mais lento o funcionamento de uma aplicao.

Manual Introduo s linguagens do web: http://www.criarweb.com/linguagens_web/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

19

Manuais e recursos para desenvolvimento web www.criarweb.com

Manuteno As aplicaes que usam JSP tm uma manuteno mais fcil que as que usam ASP. As linguagens de Script esto bem para pequenas aplicaes, mas no se encaixam bem para aplicaes grandes. Java uma linguagem estruturada e mais fcil de construir e possui manutenes grandes como aplicaes modulares. A tecnologia JSP faz maior nfase nos componentes do que nos Scripts, isto faz com que seja mais fcil revisar o contedo sem que afete a lgica ou revisar a lgica sem mudar o contedo. A arquitetura EJB encapsula a lgica de p. e.: acesso a BD, segurana, integridade transacional e isolamento da aplicao. Devido a que a tecnologia JSP aberta e multiplataforma, os servidores web, plataformas e outros componentes podem ser facilmente atualizados ou mudados sem que afete s aplicaes baseadas na tecnologia JSP.

Concluso As vantagens sobre utilizar a tecnologia Java em relao proprietria de Microsoft (ASP) so, como se pode ver, diversas e interessantes. Entretanto, podemos apontar uma vantagem da programao em ASP, pois bastante mais fcil de aprender que JSP, pelo menos se no se tem uma experincia prvia em programao. Isto devido a que Java uma linguagem muito potente, mas um pouco mais complicada de usar porque orientada a objetos e a maneira de escrever os programas mais rgida. Artigo por Miguel Angel Alvarez - Traduo de JML

O que XML
XML uma tecnologia na verdade muito simples que tem ao seu redor outras tecnologias que a complementam e a fazem muito maior e com possibilidades muito mais amplas. Vamos ver ao longo de vrios captulos uma introduo ao mundo XML, ou seja, linguagem assim como s tecnologias que trabalham com ela, seus usos, vantagens e modos de realizar as tarefas. XML, com todas as tecnologias relacionadas, representa uma maneira distinta de fazer as coisas, mais avanada, cuja principal novidade consiste em permitir compartir os dados com os quais se trabalha a todos os nveis, por todas as aplicaes e suportes. Sendo assim, o XML tem um papel importantssimo neste mundo atual, que tende globalizao e compatibilidade entre os sistemas, j que a tecnologia que permitir compartir a informao de una maneira segura, confivel e fcil. Ademais, XML permite ao programador e aos suportes dedicar seus esforos s tarefas importantes quando trabalha com os dados, j que algumas tarefas trabalhosas como a validao destes ou o percorrido das estruturas corre a cargo da linguagem e est especificado pelo padro, de modo que o programador no tem que se preocupar por isso. Vemos que XML no est s, e sim com um mundo de tecnologias ao redor dele, de possibilidades, maneiras mais fceis e interessantes de trabalhar com os dados e, definitivamente, um avance na hora de tratar a informao, que na verdade o objetivo da informtica em geral. XML, ou melhor dizendo, o mundo XML no uma linguagem, e sim vrias linguagens, no uma sintaxe, e sim vrias e no uma maneira totalmente nova de trabalhar, e sim uma maneira mais refinada que permitir que todas as anteriores se possam comunicar entre si sem problemas, j que os dados cobram sentido.
Manual Introduo s linguagens do web: http://www.criarweb.com/linguagens_web/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 20

Manuais e recursos para desenvolvimento web www.criarweb.com

XML interessante no mundo da Internet e do e-bussiness, j que existem muitos sistemas distintos que tm que se comunicar entre si, porm, como se pode imaginar, interessa igualmente a todos os ramos da informtica e o tratamento de dados, j que permite muitos avances na hora de trabalhar com eles. Artigo por Miguel Angel Alvarez - Traduo de JML

Manual Introduo s linguagens do web: http://www.criarweb.com/linguagens_web/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

21

Você também pode gostar