Aula 01 - Desenvolvimento de aplicações para Internet

Prévia do material em texto

DESENVOLVIMENTO DE APLICAÇÕES 
PARA INTERNET
MKT-MDL-05
Versão 00
Aula 01
DESENVOLVIMENTO DE APLICAÇÕES 
PARA INTERNET – Aula 01
Conteúdo 
Introdução sobre aplicações web (http, server side e client side)
Objetivos de aprendizagem
Entender os princípios fundamentais de aplicações que 
funcionam no navegador web e sua evolução, assim como os 
tipos de protocolos de comunicação usados.
DESENVOLVIMENTO DE APLICAÇÕES 
PARA INTERNET – Aula 01
Sistema Centralizado: Tudo é processado e executado em um 
único computador.
Exemplo: Sistema de folha de pagamento
Sistema Distribuído: Parte do processamento ocorre em um 
computador, denominado cliente e parte em outro, denominado 
servidor.
Exemplo: Sistema de vendas online (comércio eletrônico).
Arquitetura Cliente Servidor
O usuário, por meio da máquina cliente em que está 
executando o navegador, solicita informações a uma aplicação 
que está rodando em um servidor remoto, através da Internet. 
Esse servidor analisa a requisição enviada e responde com 
dados em forma de páginas Web
DESENVOLVIMENTO DE APLICAÇÕES 
PARA INTERNET – Aula 01
O HTML é a base para criar uma página exibida em um 
navegador Web. Ele é constituído por um conjunto de TAGs que 
possibilita exibir o conteúdo e utilizar recursos hipermídia – links, 
imagens, tabelas, vídeos. Porém, seus recursos de formatação 
visual são muito restritos e simples. 
CSS, ou folhas de estilo, permite diferentes tipos de 
formatações, como bordas, cores, fundo, elementos textuais 
estilizados e layouts diferenciados.
DESENVOLVIMENTO DE APLICAÇÕES 
PARA INTERNET – Aula 01
Tratando-se de aplicação WEB, é necessário levar em conta 
vários aspectos. Esses aspectos incluem o conhecimento dos 
requisitos exigidos pela aplicação, como:
• Quais tecnologias podem ser utilizadas. 
• Como é realizado o processamento do sistema. 
• Quais são o perfil do usuário e suas tarefas na interface gráfica 
da aplicação. 
• Como armazenar os dados.
DESENVOLVIMENTO DE APLICAÇÕES 
PARA INTERNET – Aula 01
O “endereço virtual”, também chamado de URL (Uniform 
Resource Locator), deve ser informado no navegador (na barra 
de endereços) para acessar o conteúdo disponibilizado
O protocolo identifica o tipo de transferência de arquivo que será 
utilizado. O HTTP (HyperText Transfer Protocol) é o protocolo 
utilizado para a transferência de documentos hipermídia 
(hipertexto) na Internet. Após o protocolo, coloca-se a 
identificação do servidor da Web para onde a requisição será 
enviada.
DESENVOLVIMENTO DE APLICAÇÕES 
PARA INTERNET – Aula 01
O “endereço virtual”, também chamado de URL (Uniform 
Resource Locator), deve ser informado no navegador (na barra 
de endereços) para acessar o conteúdo disponibilizado
O protocolo identifica o tipo de transferência de arquivo que será 
utilizado. O HTTP (HyperText Transfer Protocol) é o protocolo 
utilizado para a transferência de documentos hipermídia 
(hipertexto) na Internet. Após o protocolo, coloca-se a 
identificação do servidor da Web para onde a requisição será 
enviada.
DESENVOLVIMENTO DE APLICAÇÕES 
PARA INTERNET – Aula 01
Em alguns casos, é necessário identificar o caminho do arquivo 
que se deseja acessar, especificando os diretórios nos quais é 
possível localizar o arquivo que está sendo solicitado, e, por fim, 
o nome do arquivo que será exibido no nave- gador. Esses 
arquivos podem ser escritos em várias linguagens (HTML e PHP, 
por exemplo), sendo que o browser é o responsável por 
interpretá-las e exibi-las para o usuário
DESENVOLVIMENTO DE APLICAÇÕES 
PARA INTERNET – Aula 01
Em alguns casos, é necessário identificar o caminho do arquivo 
que se deseja acessar, especificando os diretórios nos quais é 
possível localizar o arquivo que está sendo solicitado, e, por fim, 
o nome do arquivo que será exibido no nave- gador. Esses 
arquivos podem ser escritos em várias linguagens (HTML e PHP, 
por exemplo), sendo que o browser é o responsável por 
interpretá-las e exibi-las para o usuário
DESENVOLVIMENTO DE APLICAÇÕES 
PARA INTERNET – Aula 01
Desenvolvimento de software 
para Web
Site de conteúdo: apenas exibe um conteúdo de uma 
determinada área de forma linear, incluindo recursos (imagens, 
tabelas, gráficos, etc.) e navegação simples.
Site de registro de dados ou entrada do usuário: utiliza como 
recurso principal formulários que são preenchidos pelos 
usuários, com dados relacionados ao objetivo do site.
Desenvolvimento de software 
para Web
Portal: compreende um conjunto de páginas, links que 
convergem para um determinado contexto.
Aplicação orientada à transação: neste modelo, o usuário envia 
solicitações que a aplicação processa em um banco de dados, 
retornando ao usuário a resposta de sua solicitaça ̃o.
Desenvolvimento de software 
para Web
Independentemente do tipo de aplicação Web a ser 
desenvolvida, sua qualidade pode ser determinada por diversos 
fatores, como: 
• usabilidade, 
• capacidade de navegação, 
• possibilidade de busca e de recuperação, 
• disponibilidade, 
• tempo de resposta, 
• processamento correto dos links (ligações entre páginas)
• segurança
• uso de padrões.
Desenvolvimento de software 
para Web
Independentemente do tipo de aplicação Web a ser 
desenvolvida, sua qualidade pode ser determinada por diversos 
fatores, como: 
• usabilidade, 
• capacidade de navegação, 
• possibilidade de busca e de recuperação, 
• disponibilidade, 
• tempo de resposta, 
• processamento correto dos links (ligações entre páginas)
• segurança
• uso de padrões.
Desenvolvimento de software 
para Web
O ideal é que o processo utilize um modelo de desenvolvimento 
incremental, o que significa dizer que todo o software é 
construído em partes. Cada uma dessas partes, quando 
entregue ao cliente, pode ser utilizada, e as partes previamente 
desenvolvidas são incorporadas, dando origem às versões do 
software
Desenvolvimento de software 
para Web
O ponto de partida para a construção de uma aplicação Web é a 
identificação do objetivo geral da aplicação. Depois dessa etapa, 
é possível criar um modelo de análise, detalhando os requisitos. 
Na análise, serão identificados, além dos requisitos, os principais 
elementos de conteúdo das páginas.
Desenvolvimento de software 
para Web
Após compreender o propósito da aplicação, é necessário 
desenvolver os modelos de projeto, bem como o projeto visual e 
gráfico. Na etapa final, é encaminhada a construção das pá- 
ginas com o uso de tecnologias específicas para a Web, como 
HTML, CSS, PHP, Javascript, JSP, SERVLETS...
Desenvolvimento de software 
para Web
JSP (Java Server Pages) é uma tecnologia utilizada para 
desenvolver aplicações web dinâmicas em Java. Ela permite a 
criação de páginas web que podem ser geradas de forma 
dinâmica no servidor, combinando código Java com marcação 
HTML. Essa tecnologia é amplamente utilizada no 
desenvolvimento de sistemas web, oferecendo uma maneira 
eficiente de separar a lógica de negócio do design da página.
Desenvolvimento de software 
para Web
̀À medida que cada funcionalidade é finalizada, deve ser testada. 
Assim, é necessário que o desenvolvedor verifique:
• Se a navegação está funcionando corretamente.
• Se existem erros na visualização do conteúdo da página, ou 
dos scripts utilizados por ela.
• Se os dados dos formulários estão sendo enviados 
corretamente ao servidor.
• Se o comportamento da aplicação é o mesmo em diferentes 
navegadores, visto que alguns possuem restrições com relação a 
recursos do HTML e CSS.
DESENVOLVIMENTO DE APLICAÇÕES 
PARA INTERNET – Aula 01
Pesquise: O que é o W3C? E o que o W3C define como 
WebStandards? Defina qual e ́ sua importância e quais são as 
tecnologias relacionadas.
DESENVOLVIMENTO DE APLICAÇÕES 
PARAINTERNET – Aula 02
HTML, ou HyperText Markup Language, e ́ uma linguagem de 
marcação utilizada para criar páginas acessadas a partir de um 
navegador. A característica principal dessas páginas e ́ que elas 
utilizam hipertexto para viabilizar a navegação.
Todos os elementos que compõem uma página são posicionados 
por meio de co- mandos específicos da linguagem, denominados 
TAGs. Uma TAG e ́ uma palavra específica, definida em HTML, 
envolta por sinais de “menor que” ().
‘
‘
Tags de Estrutura do HTML
 - Essas tags definem um cabeçalho. 
Portanto, todo conteúdo que estiver dentro dela faz parte de 
um cabeçalho, podendo ser utilizado dentro de outras sessões.
 - Essas tags representam o conteúdo principal 
do seu corpo, ou seja, o conteúdo relacionado diretamente com 
o tópico central da página ou com a funcionalidade central da 
aplicação.
 - Essas tags definem um rodapé para a 
página, geralmente utilizadas no final da página.
Tag de Estrutura do HTML
 - Essas tags definem uma sessão para a 
página.
 - Essas tags representam um artigo da 
página. Muito utilizado por páginas de conteúdo.
 - Essas tags definem uma seção de uma página 
cujo conteúdo é tangencialmente relacionado ao conteúdo dó 
seu entorno, que poderia ser considerado separado do 
conteúdo. 
Tag de Estrutura do HTML
 - Essa tag define um conteúdo de navegação. 
Portanto, é muito utilizado em conjunto com listas e na criação 
de menus.
 - Define uma divisão da página. Desta forma, 
funciona como um container para conteúdo dd fluxo.
Uma vez que não possui um valor semântico, é muito utilizado 
para organizar melhor o conteúdo. Anteriormente ao HTML5, 
era utilizado no lugar das categorias acima.
Tags de Estrutura do HTML
 - Essas tags definem um artigo da sua página. 
Nesse sentido, são utilizadas para separar o conteúdo da página 
cujo conteúdo é tangencialmente relacionado ao conteúdo do 
seu entorno, que poderia ser considerado separado do 
conteúdo.
 - Essa tag define um conteúdo de navegação. 
Portanto, é muito utilizado em conjunto com listas e na criação 
de menus.
 - Define uma divisão da página. Desta forma, 
funciona como um container para conteúdo dd fluxo.
Uma vez que não possui um valor semântico, é muito utilizado 
para organizar melhor o conteúdo. Anteriormente ao HTML5, 
era utilizado no lugar das categorias acima.
Tags de Estrutura do HTML
 - Essas tags definem um artigo da sua página. 
Nesse sentido, são utilizadas para separar o conteúdo da página 
cujo conteúdo é tangencialmente relacionado ao conteúdo do 
seu entorno, que poderia ser considerado separado do conteúdo.
 - Essa tag define um conteúdo de navegação. 
Portanto, é muito utilizado em conjunto com listas e na criação 
de menus.
 - Define uma divisão da página. Desta forma, 
funciona como um container para conteúdo dd fluxo.
Uma vez que não possui um valor semântico, é muito utilizado 
para organizar melhor o conteúdo. Anteriormente ao HTML5, era 
utilizado no lugar das categorias acima.
Tags de Estrutura do HTML
 - Essas tags representam o conteúdo principal 
do seu corpo, ou seja, o conteúdo relacionado diretamente com 
o tópico central da página ou com a funcionalidade central da 
aplicação.
 - Essas tags definem uma sessão para a sua 
página.
 - Essas tags representam uma seção de uma 
página cujo conteúdo o conteúdo da página cujo conteúdo é 
tangencialmente relacionado ao conteúdo do seu entorno, que 
poderia ser considerado separado do conteúdo.
	Slide 1: DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET
	Slide 2: DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET – Aula 01
	Slide 3: DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET – Aula 01
	Slide 4: Arquitetura Cliente Servidor
	Slide 5: DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET – Aula 01
	Slide 6: DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET – Aula 01
	Slide 7: DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET – Aula 01
	Slide 8: DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET – Aula 01
	Slide 9: DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET – Aula 01
	Slide 10: DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET – Aula 01
	Slide 11: DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET – Aula 01
	Slide 12: Desenvolvimento de software para Web
	Slide 13: Desenvolvimento de software para Web
	Slide 14: Desenvolvimento de software para Web
	Slide 15: Desenvolvimento de software para Web
	Slide 16: Desenvolvimento de software para Web
	Slide 17: Desenvolvimento de software para Web
	Slide 18: Desenvolvimento de software para Web
	Slide 19: Desenvolvimento de software para Web
	Slide 20: Desenvolvimento de software para Web
	Slide 21: DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET – Aula 01
	Slide 22: DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET – Aula 02
	Slide 23
	Slide 24
	Slide 25
	Slide 26: ‘
	Slide 27: ‘
	Slide 28
	Slide 29: Tags de Estrutura do HTML
	Slide 30: Tag de Estrutura do HTML
	Slide 31: Tag de Estrutura do HTML
	Slide 32
	Slide 33: Tags de Estrutura do HTML
	Slide 34: Tags de Estrutura do HTML
	Slide 35: Tags de Estrutura do HTML
	Slide 36
	Slide 37
	Slide 38