2eoari2 20 Things | Learned About Browsers and the Wed INTRODUGAO AS 20 LIGOES tualmente, muitas pessoas dependem da rede mundial para ter acesso a informagies e entrar em contato ‘com pessoas ¢ eventos ao redor do globo instantancamente. Essas experiéneias ‘on-line marcantes slo possivels devido a uma web aberta que pode ser acessada por qualquer pessoa por meio de um navegador, em qualquer dispositivo conectado & Infemet no mundo, Mas como funcionam nossos navegadores e a web? Como que a rede mundial evoliiu para algo que conhecemos ¢ amamos? E 0 que precisamos saber para navegar com scguranga ¢ eficiéncia pela Internet? "20 ides que aprendi sobre navegadores © a web" um pequeno guia para todos que estiverem curiosos sobre os aspectos bisicos de navegadores e da web, Aqui voe® encontrar: Primeiramente, analisaremos a Intermet, a estrutura bisiea que permite a existéncia da web, Também daremos uma olhada em como a web é usada hoje, por meio de computagdo em nuvem e de aplicatives da web, A. seguir, introduziremos os blocos de construgio de pigina da web, como HTML © JavaSeripl, & analisaremos como sua inveng3o e evolugdo mudaram os sites que visitamos todos os dis. Também veremos os navegadores modemos © como cles ajudam os usuirios a navegarem pela web com mais seguranga. Por fim, vishumbraremos as empolgantes inovagdes tecnoligicas de navegadores ¢ da_web, as quais acreditamos que nos proporcionardo experiéncias ainda mais répidas e mais inchisivas no futuro, ‘A vida dos cidadios da web pode ser liberal e fortalecedora, mas também exige um pouco de educaso por conta prépria. Assim como desejamos conhecer, como cidadios, diversos fatos bisicos de nossas comunidades reais - qualidade da gua, servigas fundamentais, empresas locais - é cada vez mais importante entender um conjunto simikr de informages sobre nossas vidas on-line, Foi com esse espirito que escrevemos este guia Muitos dos exemplos usados para ihstrar os recursos a funcionalidade de navegadores referem-se ao Chrome, ww. 20thingslearned.comipt-BRvaliprint 282eoari2 20 Things | Learned About Browsers and the Wed ‘© navegador de cédigo aberto que conhecemos tio bem. Esperamos que vocé divrta-se lendo este guia, assim ‘como nos divertimes elaborando-o, Feliz navegagio! Equipe do Google Chrome, com muitos agradecimentos a Christoph Niemann por suas iustragSes Novembro de 2010 O QUE E INTERNET? OU, EU DIGO A, VOCE DZB que exatamente € # Internet? Para algumas pessoas, @ Intemet ¢ onde mantemos conlato com amigos, lemos as noticias, fazemos compras © jogamos jogos. Para outras, a Internet pode ser © provedor local de banda larga ou os cabos subtertincos e de fibra ética que ‘carregam dados por cidades © occanos. Quem esti certo? ‘Um ponto de partda itl esté no principio de tudo: 1974, foi o ano em que alguns pesquisadores inteligentes inventaram algo chamado de Intemet Protocol Suite, ou TCP/IP, © CPAP criou uma série de regras que permitiam a computadores "falar" com outros ‘computadores ¢ trocar informagdes. © TCPAP ¢ algo como a comunicago humana: quando falamos entre nés, as regras de gramitica formecem ‘2 estrutura do idioma ¢ garantem que poderemos entender 0s outros ¢ trocar ideias, De maneira similar, 0 TCP/IP fornece as regras de comunicago para garantir que os dspositivos conectados entre si se entenderdo, de forma a poder trocar informagées. Como aquele grupo de dispositivos interconcetados cresceu de um domictio para virios domiciios - e, em seguida, para virios prédios, e depois para varias cidades © paises - a Internet foi criada, (0 primeiros criadores da Intemet descobriram que os dados © as informagSes poderiam ser enviadas de ‘maneira mais eficiente quando quebradas em partes menores, enviadas separadamente ¢ reagrupadas. Essas partes sto chamadas pacotes, Quando voce envia um e-mail pela Intemet, a mensagem de e-mail é quebrada em pacotes, enviada a0 destinatério © reagrupada. O mesmo acontece quando vocé assiste a um video em um site como 0 YouTube: os arquivos do video estio segmentadas em pacotes de dados que podem ser enviados de diversas servidores do YouTube pelo mundo e reagrupades para formar o video que voeé assiste em seu navegador. ww. 20thingslearned.comipt-BRvaliprint 21282eoari2 20 Things | Learned About Browsers and the Wed E a velocidade? Se 0 trifego da Intemet fosse comparado a uma corrente de ‘gua, a banda larga da Internet seria © equivalente & quantidade de gua que passa pela corrente por segundo. Quando vocé ouvir ‘engenhciros conversando sobre largura de bands, cles estario se referindo & quantidade de dados que podem ser cenviados para sua conexio de Internet por segundo. Esse € um inicio da velocidade de sua conexdo. Conexdes mais répidas j so possiveis devido a uma melhor infiaestrutura fisica (como cabos de fibra ética que enviam informagies quase a velocidade da wz), assim como novas formas de codificar as informagées no proprio meio fisico, mesmo em meios antigos como os fios de cobre A Internet & um sistema fascinante © allamente téenico, mas para a maioria das pessoas, trata-se de um ‘mundo amigivel onde no vemos fe nem pensamos sobre os cabos © as equagies envolvidas. A Internet também é a estrutura bisica que di forma rede mundial que conhecemos ¢ amamos: com uma conexio de Internet, podemos acessar um universo aberto ¢ cada vez maior de paginas e aplcativos interligados, De fato, © nimero de piginas da web hoje em dia 0 mesmo dos neurdnios em nossos eérebros e o das estrelas na Via Léctea Nos préximos dois capitulos, analisaremos como a web ¢ usada atualmente por meio de computagdo em ruyem ¢ aplicativos da. web. COMPUTAGAO EM NUVEM OU, POR QUE NAO TEM PROBLEMA SE UM CAMINHAO PASSAR POR CMA DE SEU LAPTOP Aceon moderna na cra da Internet ¢ algo estranho ¢ incrivel Enquanto se senta diante de seu laptop em casa ¢ assiste a um video no YouTube ou usa um mecanismo de pesquisa, voce esti se conectando a ‘uma forga de milhares de computadores agrupados que fomecem essas informagdes de salas espalhadas pelo mundo. E quase como se vocé tivesse um supercomputador & sua disposigiio, gragas a Internet. Esse fendémeno & 0 que chamamos normalmente de computagio em muvem, Atuaknente, Iemos noticias, ouvimas misicas, fazemos compras, assistimos programas de TV e armazenamos nossos arquivos na Tntemet, Algumas pessoas vivem em cidades nas quais praticamente quase todos os muscus, bances ¢ instiuigSes do governo possuem um site. O resultado final? Passamos menos tempo em files ou a0 tclefone, jé que esses sites nos permitem fazer de tudo, como pagar contas © cefetuar reservas. A realizgdo de muitas tarefas diirias on-line nos possibiita viver mais intensamente no mundo ww. 20thingslearned.comipt-BRvaliprint ane2eoari2 20 Things | Learned About Browsers and the Wed real, ‘A. computago em nuvem também ofercce outros beneficios. Algum tempo atrés, muitas pessoas preocupavam-se com a perda de documentos, fotos e arquivos se algo ocorresse com seus computadores, como a presenga um virus ou uma falha de hardware, Hoje om dia, nossos dados esto migrando para akim das fronteiras de nossos computadores pessoais. Estamos transferindo nossos dados on-line para "a nuvem', Se voc cenvia fotos, armazena arquivos importantes or-iine © usa um servigo de e-mail baseado na web, como o Gmail ‘ou o Yahoo! Mail, um caminho poderia atropelar scu laptop ¢ ainda assim seus dados estariam armazenados na ‘web com seguranga, acessiveis de quakjuer computador conectado a Tntemet, em qualquer lugar do mundo, APLICATIVOS DA WEB OU, A VIDA, LIBERDADE E A PROCURA DA FELICIDADE voc€ joga jogos on-line, utiliza um editor de fotos on-line ou confia em servigas baseados na web, como Google Maps, Twitter, Amazon, YouTube ou Facebook, voeé & um residente ativo no maravilhoso mundo os aplicativos da. web. www 20thingslearned comp BRvaliprint 41282eoari2 20 Things | Learned About Browsers and the Wed © que exatamente & um aplicativo da web? E por que devemos nos importar com iso Aplicativos também so chamados de programas ou softwares, Tradicionalmente, eles so desenvolvides para realizar tarefas amps ¢ intensas, como contabiliade ou processamento de texto. No mundo on-line de navegadores © smartphones, os aplicatives normalmente so programas mais dgeis ¢ focadas em uma tinica tarefa, Aplicativos da web, em especial, executam essas tarefas dentro do navegador © frequentemente fornecem ‘uma experignela rica e interativa © Google Maps & um bom exemplo de aplcativo da web. Eke € focado em uma tarefa: fomecer recursos leis de mapeamento em um navegador da web. Voe@ pode olhar panoramicamente ou dar om em un mapa, pesqusar por uma faculdade ou um café, am de obter orientagdes de direglo, entre outras tarefas. Todas as informagdes necessérias so inseridas no aplicativo da web dinemicamente, sempre que vocé soliité-as Isso nos leva as quatro virtudes dos aplicativos da web: 1, Posso acessar meus dados de qualquer lugar. No mundo tradicional de aplicativos para computadores, os dades sto normalmente armazenados no disco rigido ‘do meu computador. Se estou de férias e deixo meu computador em casa, nfo posso acessar meu esmai, minhas fotos ou quaisquer dados, se precisar, Neste novo mundo de apliatives da web, meu e-mail e todos 0s meus dados estio armazenados on-line na web. Posso acessi-los por meio de um navegador em qualquer computador ‘que estiver conectado a Internet, 2. Eu sempre acessarei a versio mais recente de qualquer aplicativo, Que versio do YouTubs estou usando hoje? E amanhi? A resposta; sempre a mais recente, Os aplcativos da web sto atualizados automaticamente, ou seja, sempre haversi apenas uma versio: a mais recente, com todos os novos recursos © aperfeigoamentos. Nao é necessitio atualar manualmente para uma nova versio de tanto em tanto tempo, E ro preciso ter que passar por um demorado processo de instalagfo para poder usar meus aplicativos da web. 3. Eles fineionam em qualquer dispositive com um navegador da web. Na computagio tradicional, alguns programas funcionam somente em alguns sistemas ou dspositves espoctivos. Por exemplo, muitos programas eseros para um PC nfo funcionam em um Mac, Manter os softwares adoquados pode exigr tempo e dinheiz. Por outro lado, a web & uma plataforma aberta, Qualquer pessoa pode acessi-l de um navegador em um disposi conectado, independentemente de ser um computador desktop, um laptop ou um telefone cehilar, Isso significa que posso usar meus aplcativos da web favoritos mesmo se estiver usando © Laptop de um amigo ou o computador de um cybercaté 4. E mais seguro. 0s apliativos da web sto executados em navegadores © eu nunca preciso fazer download para meu computador Por causa dessa separaydo entre © cédigo do aplicativo e 0 cédigo do meu computador, os aplicativos da web no interferem em outras tarefas em meu computador ou no desempenho geral de minha maquina, Isso significa ‘que estou mais protegido conta ameagas como virus, malware ¢ spyware. HTML, JAVASCRIPT, CSS E MUITO MAIS ww. 20thingslearned.comipt-BRvaliprint 51282eoari2 20 Things | Learned About Browsers and the Wed ‘OU, ESTE NAO E 0 AJAX DA SUA MAE A piginas da web so eseritas em HTML, a inguagem de programago que informa 0s navegadores como cstruturar ¢ apresentar conteiide em uma pagina. Em outras palavras, HTML fomece os bloces bésicos de cconstrugo da web, Durante muito tempo, esses blocos de construgo eram simples ¢ estiticas: lihas de texto, links ¢ imagens, Hoje em dia, esperamos poder realizar diversas tarefas, como jogar xadrez on-line ou analisar um mapa de nossa regio sem ter que esperar que a pdgina scja carrogada a cada movimento de pegas ou mudansa de ‘mapa. ‘A ideia dessas paginas dindmicas teve inicio com a invengo da Inguagem de script JavaScript. O suporte a JavaScript pelos melhores navegadores significava que as paginas poderiam incorporar mais interages importantes ‘em tempo real. Por exemple, se vocé preencheu um formulirio on-line © pressionou o botdo "enviar", a pagina poder usar JavaScript para verificar suas inserges em tempo real e alerté-lo quase que instantaneamente, caso ‘voc’ tenha preenchido o formulirio incorretamente. pra” Entretanto, a web dinimica, na forma como a conhecemos hoje, ganhou vida quando XHR (XMLITttpRequest) foi introduzido em JavaScript e usado pela primeira vez em aplicatives da web, como 0 Microsoft Outlook para a web, Gmail e Googe Maps. O XHR permitiu que partes individuais de uma pagina, ‘como um jogo, um mapa, um video ou uma pesquisa, fossem alteradas sem a necessidede de carregar novamente www 20thingslearned comp BRvaliprint 1282eoari2 20 Things | Learned About Browsers and the Wed toda a pagina, Como resultado, os aplicatives da web so mais ripidos © mais égeis, As piginas da_web também se tomaram mais expressivas com @ introdugio de CSS (Cascading Style Sheets). A tecnologin CSS oferece aos programadores uma maneira ficil e effeiente de definir 0 layout ‘embelezar uma pigina com elementos de design, como cores, cantos arredondados, gradientes © animagdo. (Os programadores da web utilzam com fieguéncia essa potente combinagdo de JavaScript, XHR, CSS e coutras teenologias da web, como AJAX (Assynchronous JavaScript ¢ XML). 0 HTML também continuow ‘evoluindo, conforme mais recursos © aperfeipoamentos eram incorporados @ novas verses do HTML padtio, A web de hoje evoluin dos esforgos continuos de todos os profissionais de tecnologia, os pensadores, os codificadores © as organizagdes que desenvolveram essas tecnologias ¢ garantizam que elas fossem suportadas em navegadores, como © Intemet Explorer, 0 Firefox, o Safari ec 0 Google Chrome. Essa interac entre tecnologias| © navegadores transformou a web em uma pltaforma de construgio aberta e amigivel para desenvolvedores, ‘que deram & luz viios aplicativos ites e divertidos que usamos diariamente HTML5 (OU, NO INICIO NAO HAVIA