Internet I Unidade 1 Introdução à Web Curso Técnico em Informática
SUMÁRIO WEB... 3 1 INTRODUÇÃO À WEB... 3 1.1 Arquiteturas básicas da Web... 4 2 PROTOCOLOS... 4 2.1 HTTP Hypertext Transfer Protocol... 5 2.2 HTTPS Hypertext Transfer Protocol Secure... 5 2.3 FTP File Transfer Protocol... 5 3 DNS... 6 3.1 Domínios... 6 4 SERVIÇOS WEB... 7 4.1 E-mail... 7 4.2 Mapas... 7 4.3 Busca... 7 4.4 Blogs... 7 4.5 Fóruns... 8 5 W3C... 8 6 HTML... 8 6.1 HTML5... 9 6.2 Estrutura básica... 10 6.2.1 DOCTYPE... 10 6.2.2 Seção head... 10 6.2.3 Seção body... 11 6.3 Tags e atributos... 11 6.3.1 Tags... 11 6.3.2 Atributos... 11 7 WEB STANDARDS... 12 7.1 Código HTML válido... 12 7.2 Código semanticamente correto... 12 7.3 Separação dos códigos de conteúdo, apresentação e interatividade... 13 7.4 Acessibilidade e Compatibilidade... 13 REFERÊNCIAS... 14 2
WEB 1 INTRODUÇÃO À WEB A proposta inicial de um espaço para o gerenciamento de informações foi feita por Tim Beners-Lee em meados de 1989, na tentativa de resolver o problema da perda de informações sobre as pesquisas desenvolvidas no CERN (European Organization for Nuclear Research). A solução proposta era um sistema de hypertexto distribuído. O funcionamento básico desse sistema seria através de nodos e links. Os nodos poderiam ser uma pequena nota, o resumo de um artigo ou um comentário, podendo conter texto, gráficos ou ambos. E os links seriam as ligações entre dois nodos, relacionando as informações de acordo com a necessidade. A evolução desse modelo deu origem ao que se conhece como Internet ou Web, um espaço de informações em que cada recurso (nodo) possui um identificador global, chamado de URI (Uniform Resource Identifier), segundo o W3C Technical Architecture Group (2004). Quando um URI é digitado em um navegador de Internet, ocorre o seguinte: 1. O navegador identifica que foi digitado um URI. 2. O navegador executa uma requisição para obter o recurso. 3. O servidor do recurso responde com as informações. 4. O navegador interpreta a resposta recebida. 5. O navegador mostra a informação recebida na forma de uma página. A Figura 1 ilustra as etapas descritas acima. Figura 1 Busca de um recurso na Web 3
1.1 Arquiteturas básicas da Web As três arquiteturas básicas da Web são: Identificação: URIs utilizadas para identificar recursos. Interação: Agentes Web se comunicam utilizando protocolos padronizados que possibilitam a interação através da troca de mensagens, que seguem uma sintaxe e uma semântica definidas. Formatos: Os recursos são representados por dados e metadados codificados em um formato conhecido pelos protocolos que os transmitem. A Figura 2 mostra a relação entre identificador, recurso e representação. Figura 2 Recurso Web, seu identificador e representação 2 PROTOCOLOS Protocolos podem ser entendidos como regras de comunicação entre agentes Web, ou seja, é um tipo de acordo sobre a troca de informações em um sistema distribuído. De acordo com Holzmann (1991), os protocolos: Definem um formato preciso para mensagens válidas como, por exemplo, os pontos e traços que constituem o código Morse (uma sintaxe). Definem as regras processuais para a troca de dados (uma gramática). E definem um vocabulário de mensagens válidas que podem ser trocadas, com o seu significado (uma semântica). Os principais protocolos da Internet são: o HTTP, o HTTPS e o FTP. 4
2.1 HTTP Hypertext Transfer Protocol O HTTP, Protocolo de Transferência de Hypertexto, segundo Fielding (1999), é um protocolo para sistemas de informação distribuídos e colaborativos. O seu principal uso é a transferência de textos Web entre agentes em uma rede, e ele está em uso desde 1990. O HTTP permite um conjunto de métodos e cabeçalhos que indicam o propósito de uma requisição. Ele é considerado o principal protocolo da Internet, e funciona com um sistema de requisição/resposta. Ao utilizar o protocolo HTTP, o cliente envia uma requisição ao servidor na forma de um método de requisição, o URI, e a versão do protocolo. O servidor, por sua vez, responde com uma linha de status e um código de erro ou sucesso. 2.2 HTTPS Hypertext Transfer Protocol Secure O HTTPS, Protocolo Seguro de Transferência de Hypertexto, é uma implementação do protocolo HTTP, com uma camada de segurança, utilizando o protocolo SSL (Secure Sockets Layer). Essa camada adicional cria um túnel nas requisições e respostas entre cliente e servidor, criptografando a informação transmitida e verificando a autenticidade das duas partes através de certificados digitais válidos. O texto http:// ou https:// encontrado nos links faz relação exatamente a esses dois diferentes protocolos. 2.3 FTP File Transfer Protocol O FTP, Protocolo de Transferência de Arquivos, foi criado, de acordo com o W3C, para promover o compartilhamento de arquivos, programas e dados entre computadores, realizando a transferência de forma legível e eficiente e permitindo a conveniente utilização das capacidades de armazenamento de arquivos remotos. Apesar de poder ser utilizado diretamente pelo usuário em um terminal, o FTP foi desenhado pincipalmente para ser usado com um programa. O FileZilla, por exemplo, é um programa que utiliza o protocolo FTP. 5
3 DNS DNS é a sigla para Domain Name System, Sistema de Nomes de Domínios. Segundo Mockapetris (1987), o DNS é uma base de dados distribuída utilizada na resolução de nomes de domínios em endereços IP e vice-versa. Endereço IP (Internet Protocol) é a identificação de um dispositivo em uma rede local ou pública, seja um computador, uma impressora, ou outro periférico. É por meio dele que as máquinas se comunicam na Internet. (IANA, 2014) Como os computadores em uma rede recebem endereços numéricos, o acesso entre um agente e outro se dá através desses endereços. No entanto, para os usuários que navegam na Internet, os sites estão disponíveis através de nomes de domínios, como google.com, por exemplo. É trabalho do DNS traduzir esse nome em um endereço IP para que a máquina do cliente consiga acessar o servidor. A Figura 4 ilustra uma requisição sendo feita ao DNS com um nome de domínio, e a resposta recebida dele com o endereço IP procurado. Figura 3 Exemplo de requisição ao DNS Utilizando o endereço IP diretamente no navegador, a mesma página será aberta, sem a necessidade de consultar o serviço de DNS. 3.1 Domínios Domínios são todos os nomes registrados na base de dados do DNS e que, portanto, recebem um endereço IP e passam a estar disponíveis na Internet. Todos os endereços de sites existentes são domínios registrados no DNS, como google.com, microsoft.com, qi.edu.br, brasil.org, por exemplo. No Brasil, o serviço de registro de novos domínios é o Registro.br, disponível em http://registro.br, sob a coordenação do CGI (Comitê Gestor da Internet no Brasil). O CGI coordena e integra as iniciativas de serviços de Internet no Brasil. Ele é responsável, por exemplo, pela atribuição de endereços IP, pelo desenvolvimento de diretrizes estratégicas para a Internet nacional, entre outras funções. 6
4 SERVIÇOS WEB Serviços Web são sites ou sistemas disponíveis na Internet que fornecem qualquer tipo de ferramenta para os usuários. Esses serviços podem ser de e-mails, de mapas, de tradução, de educação, blogs, fóruns, serviços para o cidadão, etc. 4.1 E-mail Serviços Web de e-mail são sites que gerenciam o envio e o recebimento de e- mails, geralmente oferecendo uma lista de contatos, a aplicação de filtros nas mensagens e diversas outras funcionalidades. Gmail, Yahoo! Mail e Outlook.com são alguns dos serviços de e-mail mais conhecidos da Internet. 4.2 Mapas Os serviços de mapa na Internet fornecem ferramentas de busca por endereços e de visualização de pontos num mapa utilizando geolocalização. Também é possível traçar a rota entre endereços de origem e destino, entre outras informações das cidades, como lojas, restaurantes, estações de trem e assim por diante. Os principais serviços de mapa disponíveis hoje são o Google Maps e o Bing Maps. 4.3 Busca Outro serviço amplamente utilizado são os oferecidos pelos sites google.com e bing.com, por exemplo. Neles, o usuário pode realizar buscas na Internet utilizando termos de seu interesse. Esses serviços são tão populares que, nos Estados Unidos, foi criado o termo googlar para o ato de fazer uma busca na Internet. 4.4 Blogs Blogs são sites que agrupam uma série de postagens, numa espécie de revista online com diversos artigos. Alguns serviços, como o Blogger e o Wordpress, permitem a qualquer usuário criar um novo blog, definindo o nome, um tema personalizado, o estilo de cores, imagens e tudo o que compõe esse tipo de página. Os blogs se tornaram muito populares nos últimos anos, e grandes empresas possuem também seu próprio blog para publicar novidades de negócio, produtos, e assuntos diversos. 7
4.5 Fóruns Serviços de fórum são páginas especializadas em resolução de problemas e compartilhamento de conhecimentos sobre determinados assuntos. Em geral, algum membro posta uma dúvida ou um assunto desejado e os demais membros podem responder àquele tópico com a solução para o problema ou dando seguimento no assunto inicial. O Stack Overflow, por exemplo, é um dos fóruns mais conhecidos sobre dúvidas da área de informática. 5 W3C W3C é a sigla do World Wide Web Consortium, ou o Consórcio WWW. O W3C é uma comunidade internacional que desenvolve padrões com o objetivo de garantir o crescimento da Web. A missão do W3C é, segundo o próprio site da organização, conduzir a Web ao seu potencial máximo, desenvolvendo protocolos e diretrizes que garantam o seu crescimento em longo prazo. O W3C não é uma companhia, mas sim um consórcio, ou seja, diversas empresas de tecnologia participam desse grupo, discutindo os rumos da Internet no futuro. E cada nova proposta de protocolo, linguagem ou diretriz, passa por um criterioso processo de avaliação em comitês formados por profissionais de grandes empresas, como Google, Microsoft, Amazon e Yahoo!, por exemplo. Atualmente, o W3C é liderado pelo inventor da Web, Tim Beners-Lee. 6 HTML HTML é a sigla de Hypertext Markup Language, ou Linguagem de marcação de hypertexto. É a linguagem utilizada para descrever a estrutura de páginas Web, utilizando marcação. Os elementos da linguagem descrevem porções de conteúdo, como parágrafos, listas, tabelas, links e assim por diante. Cada elemento HTML é marcado utilizando tags, e a maioria possui também uma tag de fechamento. Exemplo: <p>esse é um parágrafo em HTML.</p> Utilizando HTML, é possível: 8
Publicar documentos online com títulos, textos, tabelas, listas, fotos, etc. Obter informações online com um clique através de hyperlinks. Desenhar formulários para a realização de transações com servidores. Incluir planilhas, vídeos, sons e outras aplicações no documento. A atual versão da linguagem é o HTML5, que promoveu uma série de melhorias em relação à versão anterior, 4.01. O W3C é a entidade responsável pela criação e atualização do HTML. 6.1 HTML5 O HTML5 foi especialmente desenhado para o desenvolvimento de conteúdos ricos sem a necessidade de plug-ins adicionais. A versão atual possui tudo de animações a gráficos, música a vídeos, e também pode ser utilizada para construir aplicações complexas. Além disso, ele é cross-platform, desenhado para funcionar em PCs, tablets, smart-phones e smart-tvs. Figura 4 Logo do HTML5 Fonte: http://www.w3schools.com/html/img_html5_html5.gif Algumas novas regras foram definidas para o HTML5, como: Novas funcionalidades devem ser baseadas em HTML, CSS e Javascript. A necessidade de plug-ins adicionais, como Flash, deve ser reduzida. O controle de erros deve ser mais fácil que nas versões anteriores. Javascript tem que ser substituído por mais marcação. HTML5 deve ser independente de dispositivo. O processo de desenvolvimento deve estar visível ao público. 9
6.2 Estrutura básica A estrutura básica de um documento HTML é bastante simples, como mostrado: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>título do Documento</title> </head> <body> Conteúdo do documento... </body> </html> Detalhando o código acima, temos algumas seções importantes, que podem ser definidas como as tags estruturais de uma página. 6.2.1 DOCTYPE O <!DOCTYPE> é uma declaração que auxilia o navegador a mostrar a página corretamente. Como há vários documentos diferentes na Web, o navegador só consegue apresentar uma página HTML de maneira correta se souber o tipo e a versão utilizados. As declarações de <!DOCTYPE> mais comuns são: HTML5 <!DOCTYPE html> HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> 6.2.2 Seção head O elemento <head> é um agrupador para todos os elementos de cabeçalho. Os elementos dentro de <head> podem incluir scripts, links para folhas de estilos, metainformações da página, entre outros. Os elementos dentro da seção <head> não são mostrados na página, eles apenas descrevem alguma característica do documento ou fazem referência a arquivos externos. 10
6.2.3 Seção body Diferentemente da <head>, a seção definida pelo elemento <body> corresponde a todo o conteúdo visível da página (corpo), ou seja, os demais elementos que compõem a página como os parágrafos, links, listas, imagens, tabelas, etc devem ficar dentro da seção <body>. 6.3 Tags e atributos 6.3.1 Tags As tags HTML são palavras-chave escritas entre os sinais de < e >. Elas definem um elemento e, normalmente, vêm em pares como, por exemplo, <p> e </p>. A primeira tag é a inicial e a segunda é a final. A tag final é escrita como a inicial, com uma barra (/) antes do nome da tag. Elas também podem ser chamadas de tag de abertura e tag de fechamento, respectivamente. Exemplo: <p>parágrafo</p> Há, ainda, algumas tags que não possuem tag de fechamento, ou seja, elas são chamadas de tags autocontidas, ou elementos vazios. É o caso dos elementos <br> e <input>, por exemplo. <br> <input type= text name= cidade > 6.3.2 Atributos Os atributos fornecem informações adicionais sobre os elementos HTML. Eles são sempre especificados na tag inicial, e vêm em pares de nome/valor como, por exemplo, name= value. As tags possuem alguns atributos genéricos e outros específicos. Os atributos são escritos dentro da tag, separados por espaço e seu valor sempre deve estar entre aspas. Exemplo: <p class= big >Parágrafo grande</p> <input type= text name= nomecompleto > No exemplo acima, temos um elemento <p> com o atributo class de valor big, e um elemento <input> com um atributo type de valor text e outro atributo name de valor nomecompleto. A função desses elementos e atributos será detalhada nas próximas aulas. 11
7 WEB STANDARDS Os Web Standards, ou Padrões Web, são recomendações desenvolvidas pelo W3C com o intuito de padronizar a criação de páginas na Internet. Elas contemplam diversas boas práticas que, segundo Maujor (2011), são cruciais para o desenvolvimento de sites originalmente bons. As três áreas seguintes são especialmente importantes: Código HTML válido Código semanticamente correto Separação de conteúdo (HTML), apresentação (CSS) e interatividade (JS) É importante salientar que os Web Standards são recomendações, isso quer dizer que não há regras que regulam a Web. 7.1 Código HTML válido Significa que o código da página Web está escrito de acordo com o tipo que foi escolhido para o documento, como HTML5, por exemplo. O código válido, no entanto, não assegura a apresentação uniforme da página em todos os navegadores disponíveis, para isso usa-se o CSS. O W3C disponibiliza uma ferramenta online de validação de código, disponível em http://validator.w3.org e mostrada na Figura 5. 7.2 Código semanticamente correto Figura 5 Tela do validador de código do W3C Fonte: Autor Cada porção que constitui uma página Web deve ser marcada com um elemento de código de acordo com um significado apropriado, valor e propósito. Em resumo, para se escrever um código semanticamente correto, é preciso utilizar o elemento de marcação apropriado ao contexto, por exemplo: elementos cabeçalho 12
(<h1>...<h6>) para diferentes tipos de cabeçalho; elementos parágrafo (<p>) para marcar parágrafos; e elementos lista (<ul>) para qualquer tipo de lista; etc. <!-- Lista semanticamente correta --> <ul> <li>primeiro item</li> <li>segundo item</li> <li>terceiro item</li> </ul> <!-- Lista semanticamente incorreta --> * Primeiro item * Segundo item * Terceiro item Pode parecer óbvia a utilização dos elementos corretos, mas é comum acontecerem enganos na codificação que prejudicam a semântica das páginas, por isso, os Web Standards são muito importantes. 7.3 Separação dos códigos de conteúdo, apresentação e interatividade Os Web Standards descrevem que cada código tem o seu propósito e, por isso, devem ficar separados. As principais vantagens da separação dos códigos seriam: Desempenho: arquivos.js e.css ficam salvos no cache do navegador. Visão geral: cada código sem seu lugar, facilitando a busca. Uso do código: reaproveitamento de código usando referências. Manutenção: organização geral do projeto. 7.4 Acessibilidade e Compatibilidade Os conceitos de acessibilidade e compatibilidade não são Web Standards, propriamente ditos, mas estão ligados diretamente a eles. Isto, pois, segundo W3C, sites construídos seguindo os padrões Web estarão desenvolvidos numa via segura e sólida para garantir a acessibilidade, sem a necessidade de uma carga extra de trabalho. Sobre acessibilidade, o W3C possui duas recomendações: O site deve ser perfeitamente utilizável sem as formatações CSS. O site não deve ser dependente de Javascript para o seu funcionamento. Já o conceito de compatibilidade refere-se à apresentação das páginas nos diversos navegadores existentes. No entanto, um site pode ser desenvolvido utilizando todos os Web Standards e mesmo assim não ter uma apresentação compatível em todos os ambientes, pois cada programa utiliza um motor de processamento HTML diferente. 13
REFERÊNCIAS FIELDING, et al. Hypertext Transfer Protocol HTTP/1.1. Disponível em: http://www.ietf.org/rfc/rfc2616.txt. Acesso em: março/2014. HOLZMANN, Gerard J. Design and Validation of Computer Protocols. EUA: Prentice Hall, 1991. IANA. Internet Assigned Numbers Authority. Disponível em: http://www.iana.org/. Acesso em: abril/2014. MAUJOR. O que são Web Standards. Disponível em: http://www.maujor.com/tutorial/o-que-sao-web-standards.php. Acesso em: abril/2014. MOCKAPETRIS, P. RFC 1034 Domain Names Concepts and Facilities. Disponível em: http://tools.ietf.org/html/rfc1034. Acesso em: março/2014. W3C. About W3C Standards. Disponível em: http://www.w3.org/standards/about.html. Acesso em: abril/2014. W3C. HTML & CSS. Disponível em: http://www.w3.org/standards/webdesign/htmlcss. Acesso em: abril/2014. W3C. RFC959: FTP: Overview. Disponível em: http://www.w3.org/protocols/rfc959/2_overview.html. Acesso em: março/2014. W3C TECHNICAL ARCHITECTURE GROUP. Architecture of the World Wide Web, Volume One. Disponível em: http://www.w3.org/tr/2004/rec-webarch-20041215/. Acesso em: março/2014. W3Schools. HTML5 Introduction. Disponível em: http://www.w3schools.com/html/html5_intro.asp. Acesso em: abril/2014. 14