Carregar apresentação
A apresentação está carregando. Por favor, espere
1
Construção de Aplicativos para Internet
Augusto L. P. Nunes
2
Objetivos da aula Introduzir o funcionamento da Web
Fornecer conceitos fundamentais Apresentar as principais ferramentas Praticar um estudo de caso
3
Agenda A Internet A Web Hipertextos O lado Servidor O lado Cliente
Padrões Web Estudo de Caso Exercícios
4
Agenda A Internet A Web Hipertextos O lado Servidor O lado Cliente
Padrões Web Estudo de Caso Exercícios
5
1 - A Internet Rede mundial de computadores (Hart, 2009)
Transportador Replicador Comunicador Iniciada em 1969 com projetos militares e acadêmicos nos USA (Hart, 2009)
6
1 - A Internet Bilhões de dispositivos numa rede única
Figura 1: A internet liga computadores ao redor do mundo. (Compilado pelo autor).
7
2 - A Web Sistema de gerenciamento de informação (W3C, 2015)
Criado por Tim Berners-Lee em 1989 Servidores para publicar e Clientes para acessar conteúdo (W3C, 2015)
8
2 - A Web Ambiente cliente-servidor
Figura 2: A Web organiza os computadores da rede entre clientes e servidores, para distribuir conteúdo. (Compilado pelo autor).
9
2 - A Web Ambiente cliente-servidor
Figura 3: A Web torna transparente a troca de conteúdo entre diferentes tecnologias. (Compilado pelo autor).
10
2.1 - Hipertextos Estrutura textual abstrata (Deegan, 2012).
HTML: HyperText Markup Language (Linguagem de marcação para hipertexto) <h1>Este é um cabeçalho: Olá Mundo!</h1> <p><b>Este é um parágrafo:</b> Minha primeira página Web com imagens!</p> <img src="w3schools.jpg" alt="W3Schools.com"> </img> Figura 4: Hipertextos possuem além de conteúdo, definições estruturais para a informação. (W3C Schools, 2015).
11
Figura 5: Exemplos de tags HTML. (Compilado pelo autor).
2.1 - Hipertextos Cada elemento pode conter: etiqueta (tag) atributos conteúdo (texto). <Tag> Texto </Tag> <Tag atributo=””> Texto </Tag> <Tag atributo1=”” atributo2=””> Texto </Tag> <p> Olá Mundo! </p> <a href=" <img src=”icone.jpg” alt=”help”> </img> Figura 5: Exemplos de tags HTML. (Compilado pelo autor).
12
2.2 - O lado Servidor Mantém públicas as páginas HTML e arquivos referenciados por elas Figura 6: Um Servidor com páginas HTML e seus arquivos. (Compilado pelo autor).
13
Figura 7: Um Cliente acessando uma página Web. (Compilado pelo autor).
2.3 - O lado Cliente Navegadores acessam, interpretam e mostram as páginas no Cliente Figura 7: Um Cliente acessando uma página Web. (Compilado pelo autor).
14
Figura 10: Estrutura padrão para XHTML. (Compilado pelo autor).
3 - Padrões Web XHTML (Extensible HTML) Figura 10: Estrutura padrão para XHTML. (Compilado pelo autor).
15
3 - Padrões Web CSS (Cascading Style Sheets - Folhas de Estilo em Cascata) Figura 12: Inserindo estilos visuais para conteúdo HTML. (Compilado pelo autor).
16
3 - Padrões Web Visualização da página no navegador
Figura 13: Página com estilo visual definido por CSS. (Compilado pelo autor).
17
3 - Padrões Web O CSS flexibiliza a apresentação do conteúdo
Figura 14: Diferentes estilos para um mesmo conteúdo. (CSS Zen Garden, 2015).
18
3 - Padrões Web JavaScript
Figura 15: Inserindo comportamento dinâmico para uma página Web. (Compilado pelo autor).
19
3 - Padrões Web Trabalha com páginas interativas A B
Figura 16: A - Página antes do clique do usuário. B - Página após interação. (Compilado pelo autor).
20
3 - Padrões Web Desenvolvimento em camadas
Três camadas complementares (Robbins, 2007) Figura 17: Uma página Web padronizada pode conter três componentes básicos: Conteúdo, Apresentação e Comportamento. (Compilado pelo autor).
21
Agenda A Internet A Web Hipertextos O lado Servidor O lado Cliente
Padrões Web Estudo de Caso Exercícios
22
4 - Estudo de Caso Perfil ou short bio XHTML CSS Página <html>
<head> <title>Perfil do Augusto</title> </head> <body> <p></p> </body> </html>
23
4 - Estudo de Caso Perfil ou short bio XHTML CSS Página <html>
<head> <title>Perfil do Augusto</title> <link rel="stylesheet" type="text/css" href="test.css"/> </head> <body> <p></p> </body> </html> body{ font-weight: bold; } #anotacao{ color:red;
24
4 - Estudo de Caso Perfil ou short bio XHTML CSS Página <html>
<head> <title>Perfil do Augusto</title> <link rel="stylesheet" type="text/css" href="test.css"/> </head> <body> <h1> Augusto Luengo Pereira Nunes</h1> <img src="eu.jpg" alt="Augusto"></img> <p></p> </body> </html> body{ font-weight: bold; } #anotacao{ color:red;
25
4 - Estudo de Caso Perfil ou short bio XHTML CSS Página body{
<head> <title>Perfil do Augusto</title> <link rel="stylesheet" type="text/css" href="test.css"/> </head> <body> <h1> Augusto Luengo Pereira Nunes</h1> <img src="eu.jpg" alt="Augusto"></img> <p>Mestre em Ciência da Computação pela Universidade Federal do Rio Grande do Sul (UFRGS).... </p> <p id="anotacao">Principais interesses: Indústria criativa e desenvolvimento Web</p> </body> </html> body{ font-weight: bold; } #anotacao{ color:red;
26
Agenda A Internet A Web Hipertextos O lado Servidor O lado Cliente
Padrões Web Web Services Estudo de Caso Exercícios
27
5 - Exercícios 1- Quais são os três principais componentes de uma página segundo os Padrões Web? 2 - Dos itens listados na pergunta anterior, qual é o mínimo necessário para criar uma página web? 3 - Crie uma página com informações de seu perfil utilizando pelo menos dois itens da arquitetura sugerida nos Padrões Web.
28
Referências CSS Zen Garden, “The Beauty of Css Disign”, disponível em: acesso em: Deegan, M.; McCarty, W.; “Collaborative Research in the Digital Humanities: A Volume in Honour of Harold Short, on the Occasion of His 65th Birthday and His Retirement, September 2010”; Ashgate Publishing Company; Brookfield, VT, USA; 2012. Hart, M. S., “A Brief History of the Internet”, Intl Business Pubns USA, 2009. Robbins, J. N.; “Learning Web Design: A Beginner's Guide to (X)HTML, StyleSheets, and Web Graphics”; 3a edition; O'Reilly Media; 2007 W3C, “The History of the Web”,, disponível em: acesso em: W3C Schools, “HTML Examples” disponível em: acesso em:
29
Bibliografia Freeman, Eric; Freeman, Elisabeth; “Use a Cabeça!, HTML com CSS e XHTML”; 2. ed Alta Books; 2008. Morrison, Michael; “Use a Cabeça!, JavaScript”; Alta Books; 2008. W3C Schools; “Online Web Tutorials”; disponível em: acesso em: 2015.
30
Obrigado!
Apresentações semelhantes
