Aula 2 - Introdução à WWW - PDF

Introdução às tecnologias Web - ITW Aula 2 – Introdução à World Wide Web (WWW) Sumário Breve história da Internet O protocolo http/https A linguagem html – versões iniciais Cabeçalhos, parágrafos, áreas, hiperligações, tabelas. … História de Internet / WWW 6 de agosto de 1991 – Tim Berners-Lee, a...

Introdução às tecnologias Web - ITW Aula 2 – Introdução à World Wide Web (WWW) Sumário Breve história da Internet O protocolo http/https A linguagem html – versões iniciais Cabeçalhos, parágrafos, áreas, hiperligações, tabelas. … História de Internet / WWW 6 de agosto de 1991 – Tim Berners-Lee, a trabalhar no CERN, Suíça, publica um resumo do projeto da World Wide Web no alt.hypertext newsgroup. Essa data marca o nascimento da Web como um serviço público da Internet; 1993 – Marc Andreessen, no NCSA, University of Illinois, EUA, apresenta o primeiro navegador gráfico, o Mosaic. Depois da graduação Marc Andreessen associou-se a um anterior chefe da Silicon Graphics e iniciaram a comercialização do Mosaic que passou a chamar-se Netscape em Abril 1994. História de Internet / WWW A Netscape Communications Corporation foi responsável pelo desenvolvimento de:  Secure Sockets Layer Protocol (SSL) – protocolo para transmissão segura de dados, ainda hoje largamente utilizado (https, por exemplo);  JavaScript – a linguagem de programação mais utilizada na criação de programas para páginas web, do lado do cliente, ainda hoje utilizada (até nesta disciplina! ). A Netscape foi comprada em 1999 por 4.2MM$ pela AOL, perto do pico do que na altura de denominou como “dot-com bubble” História de Internet / WWW Antes da venda da Netscape Communications Corporation à AOL, foi disponibilizado o código fonte (open source) e criada a Mozilla Organization para permitir o desenvolvimento futuro do produto em diferentes direções. A Mozilla Organization reescreveu todo o código do browser e denominou esse desenvolvimento Gecko engine; Todas as versões do Netscape até ao seu encerramento foram baseadas no Gecko que foi posteriormente utilizado no browser Firefox – da Mozilla Foundation. Evolução histórico-gráfica da marca firefox História de Internet / WWW Windows Internet Explorer foi o browser da Microsoft desde 23 de agosto de 1995. Era baseado no motor Gecko produzido pela Mozzila organization em open source..oOo. Em 2 de setembro de 2008 saiu a primeira versão beta do browser Chrome da Google. Em 11 de dezembro de 2008 foi lançada uma versão estável ao público em geral..oOo. Em 17 de Março de 2015, a Microsoft anunciou que o Microsoft Edge substituirá o Internet Explorer no Windows 10. Assim, o Internet Explorer 11 foi a última versão deste browser. História de Internet / WWW Em 8 de abril de 2019, a Microsoft anuncia que o Microsoft Edge passa a ser baseado em Chromium. Não confundir com … O Chromium é um projeto browser de código aberto que é também a base do browser da web Chrome. A maior diferença entre os dois browsers é que, embora o Chrome seja baseado no Chromium, a Google também adiciona ao Chrome vários recursos proprietários, como atualizações automáticas e suporte para formatos de vídeo adicionais, etc, etc, etc. O Edge, atualmente, incorpora as ferramentas da OpenAI/ChatGPT História de Internet / WWW Estatísticas da “guerra dos browsers” O IE foi durante muitos anos hegemónico vindo, no entanto a perder cota de mercado para o Google Chrome da Google. O Chrome assumiu a liderança em maio de 2012, de acordo com o site StatsCounter. História de Internet / WWW Os pioneiros - resumos Tim Berners Lee  Criador e ainda atual mentor da WWW  Uniform Resource Locator (URL),  Hypertext Transfer Protocol (HTTP),  Hypertext Markup Language (HTML) Marc Andreessen  Criador do Mosaic  Fundador da Netscape Communications Corporation HTTP Hypertext Transfer Protocol Hypertext Transfer Protocol (HTTP) Protocolo utilizado para transferir documentos de hipertexto e seus recursos de máquinas remotas. Hypertext Transfer Protocol (HTTP) Características gerais Protocolo da camada de aplicação utilizado para transferir documentos de hipertexto e os seus recursos (imagens, estilos, …) entre máquinas remotas. Modelo de funcionamento baseado em pedido-resposta - não orientado a conexões; Cabeçalho das mensagens é texto puro (não binário); Não guarda estado entre conexões distintas, isto é, a cada novo pedido ao servidor, é sempre criada uma nova conexão para o servidor (isso não acontece , por exemplo, quando estamos a fazer uma transferência de ficheiros por ftp (file transfer protocol). No protocolo ftp, orientado à conexão, se uma transmissão for quebrada a meio, o protocolo permite retomá-la a partir do ponto em que foi interrompida; No protocol http, não orientado À conexão, se uma transmissão for quebrada a meio, é necessário recomeçar a transmissão desde o início. Hypertext Transfer Protocol (HTTP) Sintaxe geral de uma URL ://://?dados  Protocolo: http / https / …  A porta é opcional para serviços em portas default  para o http a porta default é a 80;  Para o https a porta default é a 443.  Caminho e recurso podem ser omitidos (URLs parciais)  As URLs podem conter dados depois do nome do recurso Hypertext Transfer Protocol (HTTP) Exemplos de URL’s http://www.ua.pt Neste exemplo de url parcial não se incluiu a porta default (80, para o http) nem o caminho/recurso. O recurso por default é variável e dependente do tipo de servidor e do tipo de linguagem de programação utilizada no desenvolvimento do servidor. Nomes típicos: index.htm / index.html / default.htm / default.html / default.asp / default.aspx / default.php / … https://www.ua.pt/pt/curso/383 Neste exemplo a URL possui vários recursos: pt (língua), curso(tipo de informação), 383 (identificador do curso). Pergunta: Que representa esta URL? Hypertext Transfer Protocol (HTTP) } separadores Exemplos de URL’s http://some.site.com/APageCourse.aspx?id=383&p=4&a=9 Neste exemplo há 3 parâmetros / dados depois no nome do recurso id=383, p=4, a=9 No primeiro separador é usado o ponto de interrogação; Nos demais separadores á utilizado o “i comercial / ampersand” Pergunta: como “&” é uma letra reservada, como enviar o símbolo “&” nos dados, como no exemplo seguinte, sem baralhar o servidor?: Empresa= Dias & Dias A. Boavida http://localhost:6067/Aula01/index.html Neste exemplo o nome do servidor é o “localhost”, o que significa que o servidor está no computador do próprio utilizador (localhost). Neste exemplo o servidor está a responder a pedidos na porta 6067. Isto é análogo ao que deverá acontecer quando executarem os vossos projetos no Visual Studio. Hypertext Transfer Protocol (HTTP) Exemplo (http://www.mytestsite.com/hello.htm ) www.mytestsite.com  Hypertext Transfer Protocol (HTTP) Pedido e resposta a um servidor web GET /hello.html HTTP/1.1 User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT) Host: www.mytestsite.com Accept-Language: en-us HTTP/1.1 200 OK Accept-Encoding: gzip, deflate Date: Mon, 27 Jul 2009 12:28:53 GMT Connection: Keep-Alive Server: Apache/2.2.14 (Win32) Last-Modified: Wed, 22 Jul 2009 19:15:56 GMT ETag: "34aa387-d-1568eb00" Vary: Authorization,Accept Pedido e resposta com sucesso Accept-Ranges: bytes Content-Length: 88 Content-Type: text/html Connection: Closed Hello, World!  Hypertext Transfer Protocol (HTTP) Pedido e resposta a um servidor web GET /t.htm HTTP/1.1 User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT) Host: www.mytestsite.com Accept-Language: en-us Accept-Encoding: gzip, deflate HTTP/1.1 404 Not Found Connection: Keep-Alive Date: Sun, 18 Oct 2012 10:36:20 GMT Server: Apache/2.2.14 (Win32) Content-Length: 230 Connection: Closed Content-Type: text/html; charset=iso-8859-1 Pedido e resposta com erro 404 Not Found Not Found The requested URL /t.html was not found on this server. Hypertext Transfer Protocol (HTTP) Pedido e resposta a um servidor web (F12 > Network) HTTPS Hypertext Transfer Protocol Secure HTTPS Hyper Text Transfer Protocol Secure (1) O HTTPS (Hyper Text Transfer Protocol Secure - protocolo de transferência de hipertexto seguro) é uma implementação do protocolo HTTP sobre uma camada adicional de segurança que utiliza o protocolo SSL/TLS. Essa camada adicional permite que os dados sejam transmitidos através de uma conexão criptografada que garante a autenticidade do servidor e do cliente por meio de certificados digitais. A porta TCP usada por norma para o protocolo HTTPS é a 443, no protocolo HTTP a porta utilizada é a 80, tal como referido previamente. HTTPS Hyper Text Transfer Protocol Secure (2) A ideia principal do HTTPS é criar um canal seguro sobre uma rede insegura. Isso garante uma proteção razoável de pessoas que realizam escutas ilegais (eavesdropping attacks) e de ataques de homem-no-meio (man-in-the- middle), dado que a cifragem foi adequadamente utilizada e que o certificado do servidor é verificável e confiável. A confiança fornecida pelo HTTPS é baseada em autoridades de certificação que vêm pré-instaladas no navegador. Isto é equivalente a dizer "Eu confio na autoridade de certificação VeriSign / Microsoft / etc. para me dizer em quem devo confiar". Eavesdropping attacks Antigamente, este tipo de ataque era realizado sobre as linhas telefónicas, dando origem ao que ainda hoje conhecemos como uma escuta telefónica. Com o desenvolvimento da tecnologia, os hackers criaram novos métodos e canais para espiar as conversas digitais. Hoje, os analisadores de protocolos podem ser usados ​para gravar comunicações baseadas em IP e podem converter os dados em arquivos de áudio facilmente acessíveis. A deteção de dados é outro tipo comum de escuta eletrónica. É usado principalmente nas redes locais empresariais. Como todas as comunicações dentro da rede são enviadas para os routers/gateways, os hackers podem aceder ao sistema e intercetar esses dados. Da mesma forma, os dados das redes sem fios podem ser facilmente manipulados se informações não seguras chegarem às portas da rede. A forma mais comum de espionagem é conduzida usando a função de alto-falante ou microfone de um dispositivo. Esse tipo de ataque de espionagem ocorre mais comumente ao laptop do utilizador, já que o microfone pode ser ativado discreta e remotamente por um terceiro. Man In The Middle Attack Princípio de funcionamento O SSL (Secure Sockets Layer) usa um sistema de criptografia que utiliza duas chaves para criptografar os dados, uma chave pública conhecida por todos e uma chave privada conhecida apenas pelo destinatário. O SSL é a única maneira eficaz de obter segurança de dados em comércio eletrónico. Quando um SSL – Certificado Digital está instalado no website, um ícone de um cadeado aparece no navegador e o endereço começa com https:// ao invés de http:// informando que os dados serão criptografados. HTTPS o site https://www.ua.pt HTML HyperText Markup Language A linguagem html HTML (abreviatura da expressão inglesa “HyperText Markup Language”, que significa “Linguagem de Marcação de Hipertexto”) É a linguagem de marcação utilizada para produzir páginas na Web definida por Tim Berners Lee, conforme já foi visto no início da aula. Versões da linguagem html November 24, 1995 - HTML 2.0 – IETF RFC 1866. November 25, 1995: RFC 1867 (form-based file upload) May 1996: RFC 1942 (tables) August 1996: RFC 1980 (client-side image maps) January 1997: RFC 2070 (internationalization) January 1997 – HTML 3.2 published as a W3C Recommendation. It was the first version developed and standardized exclusively by the W3C, as the IETF December 1997 – HTML 4.0 published as a W3C Recommendation Versões da linguagem html April 1998 – HTML 4.0, reissued with minor edits without incrementing the version number. December 1999 – HTML 4.01, published as a W3C Recommendation. Development of the parallel, XML-based language XHTML occupied the W3C's HTML Working Group through the early and mid-2000s. As of mid -2008 – HTML 4.01, ISO/IEC 15445:2000. December 2012 – HTML5, candidate recommendation of the World Wide Web Consortium. October 2014 – HTML5 was published as a W3C Recommendation December 2017 – HTML 5.2 as a W3C Recommendation, Características de um elemento html Um marcador / etiqueta (tag em inglês) num documento html fica sempre colocada entre os símbolos “”. As etiquetas são responsáveis pela formatação da linguagem. Nas últimas versões da linguagem, um elemento é constituídos por um par de marcadores: um no início do elemento e outro no fim do elemento. Elemento HTML texto marcador de início do Marcador de fim do elemento elemento Características de um elemento HTML Um elemento HTML é formado por um marcador com o nome de etiqueta (tag), atributos, valores e filhos (que podem ser outros elementos ou texto). Os atributos modificam os valores padrão dos elementos e os valores caracterizam essa mudança. Exemplo de um elemento HTML simples (não possui filhos): Exemplo de um elemento HTML com atributos: Universidade de Aveiro Exemplo de um elemento HTML com filhos e atributos: A Universidade de Aveiro é a minha Universidade. Estrutura base de um documento html DÔCŢŸRÉ ḥʧņľ ḥʧņľ ḥêắđ ņêʧắ çḥắsșêʧ ụʧǧ ¨ Cabeçalho do documento ņêʧắ ŋắņê Aụʧḥộs çộŋʧêŋʧ ņêʧắ ŋắņê Ḳêỳxộsđș çộŋʧêŋʧ [Este conteúdo não é representado] ņêʧắ ŋắņê Dêșçsîřʧîộŋ çộŋʧêŋʧ ʧîʧľê Dộçụņêŋʧ ʧîʧľê ḥêắđ čộđỳ Conteúdo do documento čộđỳ [Este conteúdo é representado] ḥʧņľ Elementos base de um documento html Os elementos básicos de um documento html são: – define o início de um documento html e indica ao navegador que todo conteúdo posterior a este marcador deve ser tratado como uma série de marcadores html. Neste marcador pode ter como atributo a língua em que o documentos está escrito. Essa informação é importante para os motores de pesquisa / indexação. – define o cabeçalho do documento e possui informações sobre o documento que vai ser representado; – define o conteúdo principal do documento e é a paret que é exibida no navegador. No marcador do corpo podem-se definir atributos comuns a toda a página, como cor de fundo, margens, e outras formatações. Elementos do cabeçalho de um documento html Dentro do cabeçalho podemos ter os seguintes elementos: – define o título da página; é exibido na barra de título do browser; – define a formatação das etiquetas em CSS (vamos ver isto no futuro, em detalhe); – define a programação de certas funções da página escritas na linguagem JavaScript (vamos ver isto no futuro, em detalhe); – define ligações da página com outros arquivos, como por exemplo, feeds, CSS, scripts, tipos de letra, etc. – define propriedades da página, como, por exemplo, a codificação dos caracteres (UTF-8, ISO-8859-1, …), a descrição da página (autor, keywords,…) Etiquetas do corpo de um documento html , ,... – define os cabeçalhos e títulos no documento em diversos tamanhos; … – define um novo parágrafo; – impõe uma quebra de linha num texto; …, …, … e … – determina diversas formatações de letra: negrito, itálico, sublinhado e riscado, respectivamente. … – cria uma hiperligação para um outro local, seja uma página, um e-mail ou outro serviço. Exemplo Código fonte độçʧỳřê ḥʧņľ ḥʧņľ ľắŋĝ êŋ ḥêắđ ņêʧắ çḥắsșêʧ ÛŢG ¨ ņêʧắ ŋắņê Aụʧḥộs çộŋʧêŋʧ Kộắṛụîņ Şộụșắ Rîŋʧộ ņêʧắ ŋắņê Ḳêỳxộsđș çộŋʧêŋʧ đụņņỳ řắĝê ḥʧņľ ņêʧắ ŋắņê Dêșçsîřʧîộŋ çộŋʧêŋʧ ʧîʧľê Dộçụņêŋʧộ đê ʧêșʧê ʧîʧľê ḥêắđ čộđỳ ḥ̦ Ʌîđîʧ Ȟộņêsụș řsộčắsî ǧắčụľắņ ŋộŋ řộșșê ḥ̦ ḩ̣ Í çắŋʧîụŋçụľîș ʧắŋʧụș îssêʧîʧụș ŵîs ʧêŋêsêʧụs ḩ̣ ř Ľộsêņ îřșụņ độľộs șîʧ ắņêʧ çộŋșêçʧêʧụs ắđîřîșçîŋĝ êľîʧ Řụắŋʧụņ Asîșʧộỵêŋî îŋĝêŋîụņ çộŋșụņřʧụņ ŵîđêņụș îŋ ņụșîçîș Řụîđ ắîʧ Asîșʧộʧêľêș sêľîṛụîṛụê Rľắʧộŋîș ắľụņŋî Ȟîç ŋîḥîľ ǧụîʧ ṛụộđ ṛụắêsêsêņụș ř ř č Éắđêņŋê ṛụắê sêșʧîŋçʧắ șîʧî č Řụắê đîľîĝêŋʧîșșîņê çộŋʧsắ Asîșʧộŋêņ đîçụŋʧụs ắ Cḥsỳîřřộ Řụîřřê ḥắčêș êŋîņ ắ sḥêʧộsîčụș Ņêĝắʧ êŋîņ șụņņộ čộŋộ ắǧǧêssê îŋçsêņêŋʧụņ đîêņ ř ř Şêđ ṛụîđ șêŋʧîắʧ ŋộŋ ŵîđêʧîș Ňîŋîņê ŵêsộ îŋṛụîʧ îľľê çộŋșêŋʧîʧ Bêắʧụș șîčî ŵîđêʧụs êșșê ņộsîêŋș Dụộ Ŗêĝêș çộŋșʧsụçʧîộ îŋʧêssêʧê î Ņîḥîľ îľľîŋç ḥụç řêsŵêŋîʧ î čs Şêđ ḥắêç ŋîḥîľ șắŋê ắđ sêņ ř čộđỳ ḥʧņľ Exemplo Representação no navegador Hiperligações Exemplos Ligação para outro site internet: Ligação à Wikipedia! Ligação para outra página do mesmo site: Estando dentro do site www.ua.pt e pretendendo aceder à página do curso da LEI … Licenciatura em Engenharia Informática Que é equivalente a escrever… Licenciatura em Engenharia Informática Em qualquer dos casos, este é o valor que aparecerá na barra de endereço do browser Exemplos da utilização de hiperligações com imagens Parâmetros da hiperligação: Parâmetros da imagem: href = destino src= localização da imagem alt = texto apresentado nos browsers de texto ou quando as imagens não são apesentadas title = texto que é mostrado quando o rato passa sobre a imagem (pode ser também utilizado o atributo aria-label) width = largura da imagem height = altura da imagem Etiquetas do corpo de um documento html … – cria uma tabela As linhas são criadas com o marcador … As células são criadas com o marcador … Os cabeçalhos das colunas são criados com o marcador … A legenda da tabela é inserda com o marcador … Exemplos de tabelas Exemplo de uma tabela () com duas linhas () e 3 colunas () Jill Smith 50 Eve Jackson 94 Adaptado de : http://www.w3schools.com/html/html_tables.asp Exemplos de tabelas Exemplo de tabela com 2 linhas () sendo a primeira com cabeçalhos () e a segunda com dados () Firstname Lastname Points Eve Jackson 94 Adaptado de : http://www.w3schools.com/html/html_tables.asp Exemplos de tabelas Exemplo de uma tabela com uma célula colapsada na horizontal (colspan). Note que a 1ª linha possui apenas 2 colunas enquanto a 2ª linha possui 3 colunas. Na primeira linha, as 2ª e 3ª colunas foram unidas numa única (atributo colspan="2"). Name Telephone Bill Gates 555 77 854 555 77 855 Fonte: http://www.w3schools.com/html/html_tables.asp Exemplos de tabelas Exemplo de uma tabela com uma célula colapsada na vertical (rowspan). Note que a 3ª linha possui somente uma coluna enquanto as duas anteriores possuem duas. Na 1ª coluna da 2ª linha o atributo rowspan="2" une esta célula com a seguinte. First Name: Bill Gates Telephone: 555 77 854 555 77 855 Adaptado de: http://www.w3schools.com/html/html_tables.asp Exemplos de tabelas O atributo introduz uma legenda na tabela (caption) Monthly savings Month Savings January $100 February $50 Adaptado de: http://www.w3schools.com/html/html_tables.asp Atributo de largura (width) de uma célula Tabelas Firstname Lastname Age Jill Smith 50 Eve Jackson 94 Atributo de altura (height) de uma célula Tabelas Firstname Lastname Age Jill Smith 50 Eve Jackson 94 Atributo de borda (border) de uma célula / linha / tabela