Aplicativos para Internet Aula 01 Arquitetura cliente/servidor Introdução ao HTML, CSS e JavaScript Prof. Erika Miranda Universidade de Mogi das Cruzes
Uso da Internet http://www.ibope.com.br/pt-br/noticias/paginas/world-wide-web-ou-www-completa-22-anos-nesta-terca-feira.aspx
Uso da Internet no mundo 2,4 bilhões de usuários no mundo 148,4 milhões de domínios registrados até 2014 144,8 bilhões de emails enviados diariamente 822.240 sites criados diariamente 99.000 artigos publicados diariamente 4 bilhões de compartilhamentos diários no Facebook http://www.whois.sc/internet-statistics/ http://www.oene.com.br/por-que-a-internet-tem-tanto-ruido/
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
Estatísticas do uso de navegadores Ano Internet Explorer Firefox Chrome Safari Opera 2013 9,0% 26,8% 55,8% 3,8% 1,9% 2012 14,7% 31,1% 46,9% 4,2% 2,1% 2011 20,2% 37,7% 34,6% 4,2% 2,5% 2010 27,5% 43,5% 22,4% 3,8% 2,2% 2009 37,2% 46,4% 9,8% 3,6% 2,3% 2008 46,0% 44,4% 3,6% 2,7% 2,4% 2007 56,0% 36,3% 1,8% 1,6% 2006 60,6% 29,9% 1,5% 2005 68,9% 23,6% 1,5% http://www.w3schools.com/browsers/browsers_stats.asp
Motores de Renderização É o software que faz a renderização das páginas web para cada navegador. Os principais são: http://www.w3c.br/cursos/html5/conteudo/capitulo2.html 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).
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
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
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
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
O que é HTML? Exemplo: Página web renderizada pelo navegador Código fonte HTML
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
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. É 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.
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 4.01. </body> </html>
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>
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>
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= http://www.google.com >Hyperlink para o Google</a> Imagens: <img src= https://www.google.com.br/images/srpr/logo11w.png alt= Logo do Google >
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>
Tags e Atributos HTML Todas as tags HTML, seus atributos e valores padrão podem ser consultados no site W3Schools. Exemplo: http://www.w3schools.com
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.
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>
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.
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>
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: http://www.w3.org/standards/ http://www.w3c.br/padroes
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! http://www.maujor.com/tutorial/o-que-sao-web-standards.php
Leituras Recomendadas Livros: http://www.casadocodigo.com.br/collections/livros-de-front-end http://www.maujor.com/livro/livros.html http://www.smashingmagazine.com/books/ Sites: http://tableless.github.io/iniciantes/ http://tableless.com.br/html5/ http://www.maujor.com/index.php http://www.w3c.br/home/webhome http://www.smashingmagazine.com/ http://www.w3schools.com/