Aplicativos para Internet Aula 01

Tamanho: px

Começar a partir da página:

Download "Aplicativos para Internet Aula 01"

Manuella Borges Viveiros
2 Há anos
Visualizações:

Transcrição

1 Aplicativos para Internet Aula 01 Arquitetura cliente/servidor Introdução ao HTML, CSS e JavaScript Prof. Erika Miranda Universidade de Mogi das Cruzes

2 Uso da Internet

3 Uso da Internet no mundo 2,4 bilhões de usuários no mundo 148,4 milhões de domínios registrados até ,8 bilhões de s enviados diariamente sites criados diariamente artigos publicados diariamente 4 bilhões de compartilhamentos diários no Facebook

4 Navegadores de internet A internet é um conglomerado de redes que permitem o acesso de informações distribuídas globalmente. As informações são identificadas por uma URI (Uniform Resource Identifier) Podemos acessar websites através de um navegador (browser). Ex. Firefox, Chrome, Safari, Internet Explorer, Opera

5 Estatísticas do uso de navegadores Ano Internet Explorer Firefox Chrome Safari Opera ,0% 26,8% 55,8% 3,8% 1,9% ,7% 31,1% 46,9% 4,2% 2,1% ,2% 37,7% 34,6% 4,2% 2,5% ,5% 43,5% 22,4% 3,8% 2,2% ,2% 46,4% 9,8% 3,6% 2,3% ,0% 44,4% 3,6% 2,7% 2,4% ,0% 36,3% 1,8% 1,6% ,6% 29,9% 1,5% ,9% 23,6% 1,5%

6 Motores de Renderização É o software que faz a renderização das páginas web para cada navegador. Os principais são: Na programação web, objetiva-se criar códigos fontes compatíveis com os principais motores de renderização disponíveis (técnicas de Cross- Browsing).

7 Arquitetura Cliente - Servidor O navegador localiza o recurso a ser acessado através de uma URL (Uniform Resource Locator) A arquitetura de acesso a páginas web é a arquitetura cliente/servidor. O navegador roda o lado cliente da aplicação e, usando o protocolo de aplicação HTTP, conecta-se ao servidor da aplicação, onde o código fonte é executado. Essa divisão também é conhecida como front end / back end

8 Arquitetura Cliente - Servidor Requisição: URL Protocolo: HTTP Cliente Internet Servidor Resposta: HTML Disciplina Aplicativos para Internet FRONT END HTML CSS JavaScript Outras disciplinas de programação BACK END PHP Java, JSP ASP.Net Banco de Dados

9 Tecnologias a serem estudadas As principais tecnologias usadas no desenvolvimento do front end de uma aplicação web (camada de visão / view) são: Hypertext Markup Language (HTML) Cascading Style Sheets (CSS) JavaScript

10 O que é HTML? O HTML (Hypertext Markup Language - Linguagem de marcação de hipertexto) permite a criação de páginas para a WEB com conteúdo multimídia HTML não é linguagem de programação, é linguagem de marcação! O HTML estrutura um documento web através da marcação de seu conteúdo. O HTML consiste de uma série de tags que identificam elementos de uma página web a serem lidos por um navegador EX: cabeçalhos, títulos, parágrafos, imagens

11 O que é HTML? Exemplo: Página web renderizada pelo navegador Código fonte HTML

12 Editando arquivos HTML Um arquivo HTML pode ser escrito em qualquer editor sem formatação Deve ser gravado com a extensão.html Pode ser aberto e interpretado por qualquer navegador Todos os documentos HTML seguem uma estrutura básica de tags padrão: <html> <head> <title> Título da página </title> </head> <body>... </body> </html> Cabeçalho da pagina Corpo da pagina

13 Versões do HTML As versões do HTML mais utilizadas hoje em dia são HTML 4.01 e XHTML 1.0 Variantes do DocType do HTML 4.01 HTML 4.01 Strict: O mais comum, utiliza tags do HTML 4.01, mas não permite tags obsoletas HTML 4.01 Transitional: Permite tags de todas as versões do HTML HTML 4.01 Frameset: Permite uso de frames, pouco recomendado

HTML 5 O HTML 5 começou a ser criado pelo grupo WHATWG em 2004, e foi reconhecido como uma versão oficial pelo W3C em 2006.

14 HTML 5 O HTML 5 começou a ser criado pelo grupo WHATWG em 2004, e foi reconhecido como uma versão oficial pelo W3C em É uma versão mais flexível do HTML, que permite manipulação mais fácil dos elementos da página, e removeu muitos atributos de formatação das tags. Ainda não existe especificação completa do HTML 5, e nem todos os navegadores são compatíveis com 100% das funcionalidades novas.

15 Declaração do DOCTYPE HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>html 4.01</title> </head> <body> Esta página utiliza HTML </body> </html>

16 Declaração do DOCTYPE XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8 /> <title>xhtml 1.0</title> </head> <body> Esta página utiliza XHTML 1.0. </body> </html>

17 Declaração do DOCTYPE HTML 5 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>html 5</title> </head> <body> Esta página utiliza HTML 5. </body> </html>

18 Principais tags HTML <h1>título principal da página </h1> <h2>título secundário </h2> E assim por diante com <h3> <h4> <h5> e <h6> <p> Parágrafo </p> <b> Negrito </b> ou <strong> Negrito (com ênfase) </strong> <i> Itálico </i> ou <em> Itálico (com ênfase) </em> <u> Sublinhado </u> <a href= >Hyperlink para o Google</a> Imagens: <img src= https://www.google.com.br/images/srpr/logo11w.png alt= Logo do Google >

19 Exemplo de documento HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>primeiro exemplo</title> </head> <body> <h1>primeiro exemplo</h1> <h2>sobre a página</h2> <p>este é um parágrafo da página Primeiro Exemplo. <a href="http://www.google.com">clique para ir para o Google</a>.</p> </body> </html>

20 Tags e Atributos HTML Todas as tags HTML, seus atributos e valores padrão podem ser consultados no site W3Schools. Exemplo:

21 O que é CSS? CSS (Cascading Style Sheets Folhas de Estilo em Cascata) definem a formatação (apresentação) dos elementos de uma página web. Por exemplo, podemos definir uma fonte padrão para os parágrafos, ou uma imagem de fundo da pagina. Uma mesma folha de estilo pode ser reutilizada em todas as páginas de um website, garantindo um design padrão. Cada elemento da página (ex. <p> ou <h1>) pode ser formatado com um estilo diferente.

22 Exemplo de CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>primeiro exemplo</title> <style> </style> </head> <body> body { font-family: Arial; } p { font-size: 12px; } a, h1 { color: #8af; } <h1>primeiro exemplo</h1> <h2>sobre a página</h2> <p>este é um parágrafo da página Primeiro Exemplo. <a href="http://www.google.com">clique para ir para o Google</a>.</p> </body> </html>

23 O que é JavaScript? JavaScript é uma linguagem de Script, interpretada pelo navegador no front end Cuidado! JavaScript não é Java! Permite manipular e modificar elementos da página (interatividade) em tempo de execução, sem a obrigação de acessar o lado servidor Permite monitorar eventos do usuário e disparar funções conforme necessidade.

24 Exemplo de JavaScript <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>primeiro exemplo</title> <style> body { font-family: Arial; } p { font-size: 12px; } a, h1 { color: #8af; } </style> <script language="javascript"> window.alert("bem vindo"); </script> </head> <body> <h1>primeiro exemplo</h1> <h2>sobre a página</h2> <p>este é um parágrafo da página Primeiro Exemplo. <a href="http://www.google.com">clique para ir para o Google</a>.</p> </body> </html>

25 Web Standards Os padrões para desenvolvimento web são definidos pela organização W3C (World Wide Web Consortium), criada por Tim Berners-Lee (criador da internet). O objetivo é definir regras de bom uso das tecnologias web disponíveis. O W3C disponibiliza ferramentas de validação para testar se páginas web estão de acordo com as normas. As especificações do W3C estão disponíveis no site oficial da organização:

26 Web Standards As principais recomendações do W3C sobre o desenvolvimento web são: Código HTML/XHTML válidos (usar tags corretamente) Código semanticamente correto (usar tags para seu propósito real) Separação de: Conteúdo (HTML/XHTML), Apresentação (CSS), e Interatividade (JavaScript) LER!

27 Leituras Recomendadas Livros: Sites:

Documentos relacionados

Técnicas e processos de produção. Profº Ritielle Souza

Técnicas e processos de produção Profº Ritielle Souza INTRODUÇÃO HTML Sigla em inglês para Hyper Text Markup Language, traduzindo daria algo como Linguagem para marcação de Hipertexto. E o que seria o