LINGUAGEM DE PROGRAMAO WEB

Ivanethe Cavalho Rocha.

ARQUITETURA DE APLICAES WEB

Conceitos Bsicos
O que a WEB ?

Popularmente conhecida pela sigla WWW (World Wibe Web), traduzindo significaria Rede de alcance mundial.
Esta corresponde a uma parte da Internet que utiliza hipermdia na formao bsica. A Web um dos muitos servios oferecidos na Internet.

ARQUITETURA DE APLICAES WEB

Conceitos Bsicos

Representao do ambiente WWW

ARQUITETURA DE APLICAES WEB

Conceitos Bsicos O que Internet?

A Internet um conglomerado de redes em escala mundial de milhes de computadores que permite o acesso a informaes e todo tipo de transferncia de dados. Ela carrega uma ampla variedade de recursos e servios, incluindo os documentos interligados por meio de hiperligaes da World Wide Web, e a infraestrutura para suportar correio eletrnico e servios como comunicao instantnea e compartilhamento de arquivos.

ARQUITETURA DE APLICAES WEB

Conceitos Bsicos

Representao da Internet

ARQUITETURA DE APLICAES WEB

Conceitos Bsicos Internet e WEB tm o mesmo significado ?

Alguns dos servios disponveis na Internet, alm da Web, so o acesso remoto a outras mquinas (Telnet e SSH), transferncia de arquivos (FTP), correio letrnico (e-mail normalmente atravs dos protocolos POP3 e SMTP), boletins eletrnicos (news ou grupos de notcias), bate-papo online (chat), mensagens instantneas (ICQ, YIM, Jabber, Messenger, Blogs), etc

ARQUITETURA DE APLICAES WEB

Tecnologias Principais Os principais modelos e tecnologias so:

Modelo Cliente-Servidor Protocolo HTTP Estrutura URI

ARQUITETURA DE APLICAES WEB

Conceitos Bsicos Modelo Cliente-Servidor

a estrutura predominante nas aplicaes da Internet. Isso inclui a Web, e-mail, transferncia de arquivos e etc. Programa Cliente: programa que funciona em sistema final que solicita e recebe um servio. Ex: computadores, PDAs.

Programa Servidor: disponibiliza servios aos clientes. Ex: Servidores e-mail, servidores Web, servidores de banco de dados. Tambm chamadas de aplicaes distribudas - consiste de um conjunto de processos de aplicao que interagem por meio de mensagens.

ARQUITETURA DE APLICAES WEB

Conceitos Bsicos Definio Modelo Cliente Servidor

No contexto de uma sesso de comunicao entre um par de processos, o processo que inicia a comunicao, isto , o primeiro a contatar o outro no inicio da sesso cliente. O processo que espera para iniciar o servidor.

ARQUITETURA DE APLICAES WEB

Conceitos Bsicos Protocolo HTTP O que protocolo ?

uma conveno ou padro que controla e possibilita uma conexo, comunicao ou transferncia de dados entre dois sistemas computacionais. De maneira simples, um protocolo pode ser definido como "as regras que governam" a sintaxe, semntica e sincronizao da comunicao. O que seria o Protocolo HTTP ?

ARQUITETURA DE APLICAES WEB

Conceitos Bsicos Protocolo HTTP

HTTP significa HyperText Transfer Protocol (Protocolo de Transferncia de Hipertexto) e o protocolo utilizado por clientes e servidores para transferncia de dados hipermdia (imagens, sons e textos) na World Wide Web. Define a estrutura e troca de mensagens e o modo como o cliente e o servidor as trocam. Sua primeira verso HTTP/0.9, era um protocolo simples para a transferncia de dados no formato de texto ASCII pela Internet atravs de um nico mtodo de requisio, chamado GET.

ARQUITETURA DE APLICAES WEB

Conceitos Bsicos Protocolo HTTP

A verso HTTP/1.0 foi desenvolvida, entre 1992 e 1996, para suprir a necessidade de transferir no apenas texto. Com essa verso, foi implementado um novo mtodo de requisio, chamado POST. No HTTP/1.1 (verso atual do protocolo) foi desenvolvido um conjunto de implementaes adicionais ao HTTP/1.0, como por exemplo: o uso de conexes persistentes; o uso de servidores proxy que permitem uma melhor organizao da cache; novos mtodos de requisies; entre outros.

ARQUITETURA DE APLICAES WEB

Conceitos Bsicos Protocolo HTTP

ARQUITETURA DE APLICAES WEB

Conceitos Bsicos Pginas WEB

So tambm chamadas de documentos. A maioria das pginas WEB constituda arquivo-base HTML e diversos objetos referenciados Este objetos por sua vez pode ser arquivo com por exemplo arquivo HTML, uma imagem JPEG ou GIF, applet JAVA, um clipe udio e etc. Essa objetos so acessveis atravs de suas URLs.

ARQUITETURA DE APLICAES WEB

Conceitos Bsicos Pginas WEB URL

o endereo de um recurso disponvel em uma rede; seja a Internet, ou uma rede corporativa, uma intranet. Uma URL tem a seguinte estrutura: protocolo://mquina/caminho/recurso onde: Protocolo: representa o protocolo de comunicacao Maquina: o servidor onde esta hospedado o recurso Caminho: especifica o local, diretrio no proprio servidor Recurso: o recurso que se deseja acessar

ARQUITETURA DE APLICAES WEB

Conceitos Bsicos Pginas WEB URL

ARQUITETURA DE APLICAES WEB

WEB Sites Propsitos Um web site pode atender a trs necessidades:

Um web site pode ser informativo, prestando informaes. Um web site pode ser funcional, oferecendo servios. Um web site pode ser de entretenimento, servindo como diverso para as pessoas.

ARQUITETURA DE APLICAES WEB

Desenvolvimento de WEB Sites Para desenvolvimento de WEB sites necessrio:

Planejamento prvio do que vai ser desenvolvido e como vai ser desenvolvido. Deve-se definir antes do desenvolvimento os objetivos, requisitos, estrutura, design. So identificadas as seguintes fases:

Anlise dos dados Modelagem do BD Arquitetura Programao no lado Cliente Programao no lado Servidor Testes e Avaliao

ARQUITETURA DE APLICAES WEB

Desenvolvimento de WEB Sites Anlise de dados

Descrever o problema respondendo a seguinte questo: Por que a construo da aplicao necessria? Responder a questo, destacando o problema e a soluo proposta para atender este problema. Descrever sobre a populao atendida Com isso defino os requisitos para aplicao pretendida

ARQUITETURA DE APLICAES WEB

Desenvolvimento de WEB Sites Modelagem do Banco de dados

Uma vez identificados os requisitos da aplicao, fao a modelagem para o BD definindo tabelas, relacionamentos e restries para o BD.

Arquitetura do WEB Site

Descrever sobre os elementos do Web Site e suas principais funes. Estes elementos correspondem a arquivos dos seguintes tipos: documentos/pginas, imagens, programas, etc.

ARQUITETURA DE APLICAES WEB

Design WEB Site

Aspectos visuais e estticos do web site. Diagramao (layout) do web site.

IMPLEMENTAO
Criao do BD e de suas tabelas. Cdigo HTML, junto com CSS e Javascript ou outras tecnologias. Cdigo dos programas, linguagens do lado servidor.

ARQUITETURA DE APLICAES WEB

Testes e Avaliao As principais formas de se testar e/ou avaliar um web site desenvolvidos recentemente so:

Correo de contedo Estrutura, ortografia, concordncia. Verificao das ligaes Cuidado com: Not Found Pgina no encontrada! Teste de Navegao verificar se as ligaes so intuitivas. Teste de Portabilidade verificar se funciona em todos os browsers.

LINGUAGEM DE PROGRAMAO PARA A WEB

Pginas estticas X Pginas 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

LINGUAGEM DE PROGRAMAO PARA A WEB

Pginas estticas X Pginas dinmicas Pginas estticas

As pginas estticas, se constroem com a linguagem HTML, que no permite grandes manobras para criar efeitos nem funcionalidades mais alm dos links.
So executadas diretamente de um ficheiro j existente no servidor

LINGUAGEM DE PROGRAMAO PARA A WEB

Pginas estticas X Pginas dinmicas Pginas dinmicas Uma pgina dinmica quando se inclui qualquer efeito especial ou funcionalidade e para isso necessrio utilizar outras linguagens de programao, parte do simples HTML. So criadas dinamicamente por outro programa, script ou API chamado pelo servidor. Podem usar linguagens tais como PHP, Java, Perl, Visual Basic .NET,

LINGUAGEM DE PROGRAMAO PARA A WEB

Linguagem HTML Abreviao para Hyper Text Markup Language, traduzindo Linguagem de Marcao de HiperTexto

Desenvolvida com objetivos de divulgao Definida formalmente na dcada de 1990 Atualmente est centrada no desenvolvimento do XHTML , uma juno com XML.

LINGUAGEM DE PROGRAMAO PARA A WEB

Linguagem HTML HyperTexto

o termo que remete a um texto em formato digital, ao qual agrega-se outros conjuntos de informao na forma de blocos de textos, palavras, imagens ou sons, cujo acesso se d atravs de referncias especficas denominadas hiperlinks, ou simplesmente links.

LINGUAGEM DE PROGRAMAO PARA A WEB

Linguagem HTML Tags (Etiquetas)

Os documentos escritos em HTML so marcados por etiquetas, mais conhecidas com tags. So palavras ou caracteres entre os sinais de <>. Elas informam ao browser a estrutura e o significado do texto. So usadas para dizer qual texto ttulo, pargrafo e assim por diante. Ex:

quebra de linha: um exemplo de elemento solitrio: <br>

- localizao centralizada do texto: um exemplo de elemento que deve ser encerrado: <center> ... </center>

LINGUAGEM DE PROGRAMAO PARA A WEB

Linguagem HTML Estrutura de documento HTML

Todo arquivo HTML obrigatoriamente contm alguns comandos que identificam aquele texto como uma home page para o navegador. Assim, as pginas em HTML possuem uma anatomia fixa, devendo conter obrigatoriamente os seguintes tags:

<html> e </html> - Determinam incio e fim do documento HTML. <html> diz ao browser para iniciar um novo documento HTML cujo contedo se encontra definido entre esse local e a etiqueta de fim do documento, que </html>.
<head> e </head> - Definem o cabealho. Esta informao no apresentada graficamente mas d indicaes importantes a respeito daquilo que a pgina contm e sobre a forma como ela deve ser apresentada. <title> e </title> - Contm o ttulo da pgina, ou seja, o nome da janela que ir aparecer na barra superior do navegador.

<body> e </body> - Define tudo aquilo que o navegador deve apresentar graficamente. Todos os arquivos, textos, sons devero estar entre estes elementos.

LINGUAGEM DE PROGRAMAO PARA A WEB

Linguagem HTML Estrutura de documento HTML Exemplo: Assim, a estrutura bsica de uma pgina, em ordem de comandos obrigatrios :

<html> <head> <title> Entre <title> e </title> deve ser digitado o ttulo da pgina. </title> </head> <body> Entre <body> e </body> devem ser colocados todos os textos, figuras e sons da pgina. </body> </html>

Deve-se ressaltar que o primeiro elemento a ser aberto (no caso, <html>) sempre o ltimo a ser finalizado.

LINGUAGEM DE PROGRAMAO PARA A WEB

Linguagem HTML Estrutura de documento HTML Cabealho: dentro do cabealho podemos encontrar os seguintes comandos:

<title>: define o ttulo da pgina, que exibido na barra de ttulo dos navegadores. <style>: define formatao em CSS. <script>: define programao de certas funes em pgina com scripts, podendo adicionar funes de JavaScript. <link>: define ligaes da pgina com outros arquivos como feeds, CSS, scripts, etc. <meta>: define propriedades da pgina, como codificao de caracteres, descrio da pgina, autor, etc. So meta informaes sobre documento. Tais campos so muitos usados por mecanismos de busca(como o Google) para obterem mais informaes sobre o documento, a fim de classific-lo melhor.

LINGUAGEM DE PROGRAMAO PARA A WEB

Linguagem HTML Estrutura de documento HTML Corpo: dentro do corpo podemos encontrar outras vrias etiquetas que iro moldar a pgina, como por exemplo:

<h1>, <h2>,... <h6>: cabealhos e ttulos no documento em diversos tamanhos. (quanto menor for o nmero, maior sera o tamanho da letra) <p>: novo pargrafo. <br>: quebra de linha. <table>: cria uma tabela (linhas so criadas com <TR> e novas clulas com <TD>. J os cabealhos de coluna so criados com a etiqueta <TH>.) <div>: determina uma diviso na pgina a qual pode possuir variadas formataes. <font>: altera a formatao (fonte, cor e tamanho) de um trecho do texto. <b>, <i>, <u> e <s>: negrito, itlico, sublinhado e riscado, respectivamente. <img>: imagem. <a>: hiper-ligao para um outro local, seja uma pgina, um e-mail ou outro servio. <textarea>: caixa de texto (com mais de uma linha); estas caixas de texto so muito usadas em blogs, elas podem ser auto selecionveis e conter outros cdigos a serem distribudos. <acronym>: acrnimo (sigla) <cite>: citao <address>: endereo