LINGUAGEM DE PROGRAMAÇÃO WEB
Ivanethe Cavalho Rocha.
ARQUITETURA DE APLICAÇÕES WEB
Conceitos Básicos
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 hipermídia na formação básica. A Web é um dos muitos serviços oferecidos na Internet.
ARQUITETURA DE APLICAÇÕES WEB
Conceitos Básicos
Representação do “ambiente” WWW
ARQUITETURA DE APLICAÇÕES WEB Conceitos Básicos O que é Internet?
A Internet é um conglomerado de redes em escala mundial de milhões de computadores que permite o acesso a informações e todo tipo de transferência de dados. “Ela carrega uma ampla variedade de recursos e serviços, incluindo os documentos interligados por meio de hiperligações da World Wide Web, e a infraestrutura para suportar correio eletrônico e serviços como comunicação instantânea e compartilhamento de arquivos”.
ARQUITETURA DE APLICAÇÕES WEB
Conceitos Básicos
Representação da Internet
ARQUITETURA DE APLICAÇÕES WEB
Conceitos Básicos
Internet e WEB têm o mesmo significado ?
Alguns dos serviços disponíveis na Internet, além da Web, são o acesso remoto a outras máquinas (Telnet e SSH), transferência de arquivos (FTP), correio letrônico (e-mail normalmente através dos protocolos POP3 e SMTP), boletins eletrônicos (news ou grupos de notícias), bate-papo online (chat), mensagens instantâneas (ICQ, YIM, Jabber, Messenger, Blogs), etc
ARQUITETURA DE APLICAÇÕES WEB
Tecnologias Principais
Os principais modelos e tecnologias são: Modelo Cliente-Servidor Protocolo HTTP Estrutura URI
ARQUITETURA DE APLICAÇÕES WEB Conceitos Básicos Modelo Cliente-Servidor
É a estrutura predominante nas aplicações da Internet. Isso inclui a Web, e-mail, transferência de arquivos e etc.
Programa Cliente: programa que funciona em sistema final que solicita e recebe um serviço. Ex: computadores, PDAs.
Programa Servidor: disponibiliza serviços aos clientes. Ex: Servidores e-mail, servidores Web, servidores de banco de dados. Também chamadas de “aplicações distribuídas” - consiste de um conjunto de processos de aplicação que interagem por meio de mensagens.
ARQUITETURA DE APLICAÇÕES WEB Conceitos Básicos Definição Modelo Cliente – Servidor
“No contexto de uma sessão de comunicação entre um par de processos, o processo que inicia a comunicação, isto é, o primeiro a contatar o outro no inicio da sessão é cliente. O processo que espera para iniciar é o servidor.”
ARQUITETURA DE APLICAÇÕES WEB Conceitos Básicos Protocolo HTTP O que é protocolo ?
“É uma convenção ou padrão que controla e possibilita uma conexão, comunicação ou transferência de dados entre dois sistemas computacionais. De maneira simples, um protocolo pode ser definido como "as regras que governam" a sintaxe, semântica e sincronização da comunicação.”
O que seria o Protocolo HTTP ?
ARQUITETURA DE APLICAÇÕES WEB Conceitos Básicos Protocolo HTTP
HTTP significa HyperText Transfer Protocol (Protocolo de Transferência de Hipertexto) e é o protocolo utilizado por clientes e servidores para transferência de dados hipermídia (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 versão HTTP/0.9, era um protocolo simples para a transferência de dados no formato de texto ASCII pela Internet através de um único método de requisição, chamado GET.
ARQUITETURA DE APLICAÇÕES WEB Conceitos Básicos Protocolo HTTP
A versão HTTP/1.0 foi desenvolvida, entre 1992 e 1996, para suprir a necessidade de transferir não apenas texto. Com essa versão, foi implementado um novo método de requisição, chamado POST. No HTTP/1.1 (versão atual do protocolo) foi desenvolvido um conjunto de implementações adicionais ao HTTP/1.0, como por exemplo: o uso de conexões persistentes; o uso de servidores proxy que permitem uma melhor organização da cache; novos métodos de requisições; entre outros.
ARQUITETURA DE APLICAÇÕES WEB Conceitos Básicos Protocolo HTTP
ARQUITETURA DE APLICAÇÕES WEB Conceitos Básicos Páginas WEB
São também chamadas de documentos. A maioria das páginas WEB é constituída 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 são acessíveis através de suas URL’s.
ARQUITETURA DE APLICAÇÕES WEB Conceitos Básicos Páginas WEB URL
É o endereço de um recurso disponível em uma rede; seja a Internet, ou uma rede corporativa, uma intranet. Uma URL tem a seguinte estrutura: protocolo://máquina/caminho/recurso onde: Protocolo: representa o protocolo de comunicacao Maquina: o servidor onde esta hospedado o recurso Caminho: especifica o local, diretório no proprio servidor Recurso: o recurso que se deseja acessar
ARQUITETURA DE APLICAÇÕES WEB Conceitos Básicos Páginas WEB URL
ARQUITETURA DE APLICAÇÕES WEB WEB Sites – Propósitos Um web site pode atender a três necessidades:
Um web site pode ser informativo, prestando informações. Um web site pode ser funcional, oferecendo serviços. Um web site pode ser de entretenimento, servindo como diversão para as pessoas.
ARQUITETURA DE APLICAÇÕES WEB Desenvolvimento de WEB Sites Para desenvolvimento de WEB sites é necessário:
Planejamento prévio do que vai ser desenvolvido e como vai ser desenvolvido. Deve-se definir antes do desenvolvimento os objetivos, requisitos, estrutura, design. São identificadas as seguintes fases:
Análise dos dados Modelagem do BD Arquitetura Programação no lado Cliente Programação no lado Servidor Testes e Avaliação
ARQUITETURA DE APLICAÇÕES WEB Desenvolvimento de WEB Sites Análise de dados
Descrever o problema respondendo a seguinte questão: Por que a construção da aplicação é necessária? Responder a questão, destacando o problema e a solução proposta para atender este problema. Descrever sobre a população atendida Com isso defino os requisitos para aplicação pretendida
ARQUITETURA DE APLICAÇÕES WEB Desenvolvimento de WEB Sites Modelagem do Banco de dados
Uma vez identificados os requisitos da aplicação, faço a modelagem para o BD definindo tabelas, relacionamentos e restrições para o BD.
Arquitetura do WEB Site
Descrever sobre os elementos do Web Site e suas principais funções. Estes elementos correspondem a arquivos dos seguintes tipos: documentos/páginas, imagens, programas, etc.
ARQUITETURA DE APLICAÇÕES WEB
Design WEB Site Aspectos visuais e estéticos do web site. Diagramação (layout) do web site.
IMPLEMENTAÇÃO Criação do BD e de suas tabelas. Código HTML, junto com CSS e Javascript ou outras tecnologias. Código dos programas, linguagens do lado servidor.
ARQUITETURA DE APLICAÇÕES WEB Testes e Avaliação As principais formas de se testar e/ou avaliar um web site desenvolvidos recentemente são:
Correção de conteúdo – Estrutura, ortografia, concordância. Verificação das ligações – Cuidado com: Not Found – Página não encontrada! Teste de Navegação – verificar se as ligações são intuitivas. Teste de Portabilidade – verificar se funciona em todos os browsers.
LINGUAGEM DE PROGRAMAÇÃO PARA A WEB Páginas estáticas X Páginas dinâmicas Na web podemos encontrar, ou construir, dois tipos de páginas:
As que se apresentam sem movimento e sem funcionalidades mais além dos links. As páginas que têm efeitos especiais e nas quais podemos interagir
LINGUAGEM DE PROGRAMAÇÃO PARA A WEB Páginas estáticas X Páginas dinâmicas Páginas estáticas
As páginas estáticas, se constroem com a linguagem HTML, que não permite grandes manobras para criar efeitos nem funcionalidades mais além dos links.
São executadas diretamente de um ficheiro já existente no servidor
LINGUAGEM DE PROGRAMAÇÃO PARA A WEB Páginas estáticas X Páginas dinâmicas Páginas dinâmicas Uma página é dinâmica quando se inclui qualquer efeito especial ou funcionalidade e para isso é necessário utilizar outras linguagens de programação, à parte do simples HTML. São criadas dinamicamente por outro programa, script ou API chamado pelo servidor. Podem usar linguagens tais como PHP, Java, Perl, Visual Basic .NET,
LINGUAGEM DE PROGRAMAÇÃO PARA A WEB Linguagem HTML Abreviação para Hyper Text Markup Language, traduzindo Linguagem de Marcação de HiperTexto
Desenvolvida com objetivos de divulgação
Definida formalmente na década de 1990
Atualmente está centrada no desenvolvimento do XHTML , uma junção com XML.
LINGUAGEM DE PROGRAMAÇÃO PARA A WEB Linguagem HTML HyperTexto
É o termo que remete a um texto em formato digital, ao qual agrega-se outros conjuntos de informação na forma de blocos de textos, palavras, imagens ou sons, cujo acesso se dá através de referências específicas denominadas hiperlinks, ou simplesmente links.
LINGUAGEM DE PROGRAMAÇÃO PARA A WEB Linguagem HTML Tags (Etiquetas)
Os documentos escritos em HTML são marcados por etiquetas, mais conhecidas com tags. São palavras ou caracteres entre os sinais de <>. Elas informam ao browser a estrutura e o significado do texto. São usadas para dizer qual texto é título, parágrafo e assim por diante. Ex:
quebra de linha: é um exemplo de elemento solitário: <br>
- localização centralizada do texto: é um exemplo de elemento que deve ser encerrado: <center> ... </center>
LINGUAGEM DE PROGRAMAÇÃO PARA A WEB
Linguagem HTML Estrutura de documento HTML
Todo arquivo HTML obrigatoriamente contém alguns comandos que identificam aquele texto como uma home page para o navegador. Assim, as páginas em HTML possuem uma anatomia fixa, devendo conter obrigatoriamente os seguintes tags:
<html> e </html> - Determinam início e fim do documento HTML. <html> diz ao browser para iniciar um novo documento HTML cujo conteúdo se encontra definido entre esse local e a etiqueta de fim do documento, que é </html>.
<head> e </head> - Definem o cabeçalho. Esta informação não é apresentada graficamente mas dá indicações importantes a respeito daquilo que a página contém e sobre a forma como ela deve ser apresentada.
<title> e </title> - Contém o título da página, 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 deverão estar entre estes elementos.
LINGUAGEM DE PROGRAMAÇÃO PARA A WEB
Linguagem HTML Estrutura de documento HTML Exemplo: Assim, a estrutura básica de uma página, em ordem de comandos obrigatórios é:
<html> <head> <title> Entre <title> e </title> deve ser digitado o título da página. </title> </head> <body> Entre <body> e </body> devem ser colocados todos os textos, figuras e sons da página. </body> </html>
Deve-se ressaltar que o primeiro elemento a ser aberto (no caso, <html>) é sempre o último a ser finalizado.
LINGUAGEM DE PROGRAMAÇÃO PARA A WEB
Linguagem HTML Estrutura de documento HTML Cabeçalho: dentro do cabeçalho podemos encontrar os seguintes comandos:
<title>: define o título da página, que é exibido na barra de título dos navegadores. <style>: define formatação em CSS. <script>: define programação de certas funções em página com scripts, podendo adicionar funções de JavaScript. <link>: define ligações da página com outros arquivos como feeds, CSS, scripts, etc. <meta>: define propriedades da página, como codificação de caracteres, descrição da página, autor, etc. São meta informações sobre documento. Tais campos são muitos usados por mecanismos de busca(como o Google) para obterem mais informações sobre o documento, a fim de classificá-lo melhor.
LINGUAGEM DE PROGRAMAÇÃO PARA A WEB
Linguagem HTML Estrutura de documento HTML Corpo: dentro do corpo podemos encontrar outras várias etiquetas que irão moldar a página, como por exemplo:
<h1>, <h2>,... <h6>: cabeçalhos e títulos no documento em diversos tamanhos. (quanto menor for o número, maior sera o tamanho da letra) <p>: novo parágrafo. <br>: quebra de linha. <table>: cria uma tabela (linhas são criadas com <TR> e novas células com <TD>. Já os cabeçalhos de coluna são criados com a etiqueta <TH>.) <div>: determina uma divisão na página a qual pode possuir variadas formatações. <font>: altera a formatação (fonte, cor e tamanho) de um trecho do texto. <b>, <i>, <u> e <s>: negrito, itálico, sublinhado e riscado, respectivamente. <img>: imagem. <a>: hiper-ligação para um outro local, seja uma página, um e-mail ou outro serviço. <textarea>: caixa de texto (com mais de uma linha); estas caixas de texto são muito usadas em blogs, elas podem ser auto selecionáveis e conter outros códigos a serem distribuídos. <acronym>: acrônimo (sigla) <cite>: citação <address>: endereço