História da web

Sumário

• Porque foi criada?
• Como evoluiu?
  • Usabilidade
  • Modas
  • Paradigmas
• A web em Portugal
• Tech stories

Via snelse (Instagram)

Origem

1989

ícones de Danilo Demarco (computador) e octicons (ficheiro) 

informações espalhadas

computadores diferentes

programas diferentes

(...) there was different information on different computers, but you had to log on to different computers to get at it (...) sometimes you had to learn a different program on each computer. Often it was just easier to go and ask people when they were having coffee…

Tim Berners-Lee, via World Wide Web Foundation

... mas a World Wide Quê?

Não foi uma ideia fácil de vender. Portanto o cientista fez uma proposta e trabalhou-a!

Eu faço tudo isto!

E não vai ser propriedade de ninguém!

É para todos, e qualquer um pode participar!

Bem-vindos à web

Sumário

• Motivação e origens
• Etapas
• Porque continua a mudar
• Impacto em Portugal

o surgimento da Web e dos browsers (...) tornou a Internet acessível e interessante à maioria da população capaz de utilizar um computador

Pedro Carlos, numa reportagem d'O Público

O que é a "web"?

World Wide Web

• sistema difundido pela internet
• partilha de informação globalmente através de um protocolo comum (HTTP)
• acessível através de browsers
• "biblioteca" digital e global
• páginas ligadas através de "hiperligações"

Internet

• rede de redes de computadores espalhadas pelo mundo
• possibilita web, e-mails ou chat, jogar online, etc.
• descendeu da Arpanet (1950s), rede de comunicação militar

diferentes!

O que é a "web"?

World Wide Web

URL

Hipertexto

interligar texto a outros meios

HTTP

HTML

Onde está o que quero?

A morada!

O que quero?

A "cola" entre diferentes máquinas

Como se faz?

A primeira página

• Tim Berners-Lee cria a primeira página web (agosto 1991)
• Páginas simples, com links
• Breve explicação do que é a WWW
• Cópia da página ainda existe online
• Berners-Lee também criou o primeiro servidor (httpd)

A web começou num NExT

fonte: CERN 

"This machine is a server. DO NOT POWER IT DOWN!!"

Browser - a interface da web

• Programas para aceder à web
• Evoluem consoantes necessidades de utilizadores e profissionais
  • suporte para media
  • problemas de segurança...
• Podem ter funcionalidades extra:
  • interface gráfica
  • extensões e plug-ins
  • suporte para diferentes sistemas operativos
  • organizar links
  • leitura de media
  • criar conteúdo (woah!)

imagem via PCMag

Atividade - o meu primeiro contacto com a primeira Web

No recriado WorldWideWeb...

1. Abrir uma página
2. Fazer uma página com uma lista, um título e um subtítulo e um link para a primeira página

Instruções

"If you think surfing hypertext is cool, that's because you haven't tried writing it".

Tim Berners-Lee

Primeiros browsers - Line Mode Browser (1992?)

• exibe páginas em estilo de terminal
• compatibilidade com diversos computadores, não apenas o sistema operativo NeXT
• existe uma simulação

links tinham números

199X-200X - Web "1.0"

imagem via webFX

• Syntatic web, ou read only web -  web de consulta
• muita informação, pouca interatividade
• limitações dos browsers complementadas por tecnologias como Flash
• resoluções comuns: 640x480, 800x600
• web visitada predominantemente via computadores 
• web usada para:
  • pesquisas
  • compras
  • e-mail
  • "criar" páginas pessoais

a web faz... e-mail

webmail - páginas web para gerir e-mail

a web faz... comércio

Amazon (1995) - originalmente só vendia livros

imagem e dados via webdesignmuseum

Ebay era originalmente conhecido como AuctionWeb (1995)

imagem via webbax

A web (ainda) não faz...

• animações complexas ou interativas

• jogos complexos

• reprodução de media como vídeo
• atualizações de conteúdo sem recarregar a página (mais ou menos...)

A web faz...

Modas da Web - Muito conteúdo, links sublinhados...

imagem via Creative Market

ainda funciona!

(ou funcionava em março de 2019)

Modas da Web - Anúncios e banners?

Million-dollar page: 1000x1000 píxeis de espaço para venda

site é na verdade de 2005+

"Modas" da web - contadores de visitas

imagens via Creative Market

"Modas" da web

"Best viewed in..."

Um dos primeiros motores de buscas (1995)

Imagem via webdesignmuseum

Recomendações de browsers e resoluções em páginas pouco flexíveis

"Modas" da web

webring - grupos de sites (geralmente amadores) com temática comum e interligados.

imagem via Hover

imagem via cssresources

A web faz...

Conteúdo de utilizadores!

Liberdade

Oportunidade

Comunidades...

imagem via wired

... que ultrapassaram autoridades  e barreiras geográficas!

vozes!

A web faz... comunidades

• Serviços de alojamento para websites
• Geocities (1994), um mais popular nos anos 90
  • a visão de criar "internet cities"
  • Muitos sites "amadores"
  • Adquirido pela Yahoo! em 1999, encerrado em 2009
  • alojou mais de 3 milhões de sites
• Primórdios dos blogues e da web 2.0?

imagem via webdesignmuseum

A web faz...
"vírus"

• Web ainda embrionária
• Browsers inseguros
• Mitigou-se com updates
• Exemplos:
  • iloveyou
  • goggle.com

a web faz...

o World Wide Wait...

• Ligações lentas em linha telefónica
• distribuição de malware
• anúncios e anúncios e banners...

imagens via gifer, lyannastyles

• Encontra sites que não tenham sido atualizados desde 2000
  • Enter 99
• Corre um site moderno no Geositesizer

Web 1.0 — Browser Wars

Fonte: The History of the Web (by Sutori)

20XX - uma nova Web?

• Web 2.0 (debatível) - impacto utilizador enquanto criador de conteúdo: wikis, redes sociais e de partilha de media...
• além do computador: a web "mobile"
• browsers mais poderosos

imagem via business insider

Web 2.0?

Utilizador é encorajado a...

• não apenas ler ou consumir o conteúdo
• comentar ou classificar
• a "fazer like"
• responder a questões
• complementar parte de um artigo
• ter o seu próprio espaço web onde pode partilhar ideias e experiências (sem programar uma página de raiz)
• ... participar!

A emergência da Web 2.0 (...) é, mais do que uma revolução tecnológica, uma revolução social e cultural, estendendo-se a todas as áreas da sociedade

 

 

- José Carlos Mota, autor de "Da Web 2.0 ao E-learning 2.0 : aprender na rede"

... fazemos Enciclopédias "abertas"

• enciclopédias web editáveis por utilizadores
• wikis, Wikipedia...

Wikipedia (2001) - originalmente Nupedia, e só podia ser editada por especialistas

...fazemos Vídeo e 'streaming'
 

Youtube (2005) e Vimeo (2004)

duas plataformas para partilha de vídeo 

imagem via coursify

imagem via webdesignmuseum

imagem via dexerto

Ninja, famoso 'streamer' no Twitch e jogador de Fortnite

... fazemos (conteúdo para) Redes Sociais

• partilha de notícias, imagens, apreciações...
• estabelecimento de grupos consoante critérios (proximidade geográfica, "amizade", gostos comuns)
• fontes de notícias "amadoras"

... fazemos gestão de conteúdo

• plataformas de blogging e Content Management System - criação de páginas web sem intervenção de um webmaster
• partilha de notícias, imagens, apreciações... ideais para opiniões alternativas às presentes na imprensa profissional
• Blogspot, Joomla, Wordpress, Wix...

Criação de artigo em Wordpress
imagem via elmastudio

... fazemos oportunidades comerciais

• marketing digital
• gestão de conteúdo
• e-learning e tutoria online
• crowdfunding
• e-gaming e streaming
• "youtubers"

imagens via: Kickstarter, MyLeanMBA, TechAdvisor

... até offline...

• páginas com funcionalidades offline
• apps suportadas por browsers
• google chrome tem supresa quando não é possível estabelecer uma ligação

... e há plug-ins para isso?...

iOs não suporta Flash

Mobile Responsive Web

Resolução dominante? Muitas...

Mesmo site, ajusta-se ao dispositivo

... não é só telemóveis!

smartphones, tablets, netbooks...

todos com browsers web...

...Memes?

imagens via: knowyourmeme, uberhumor, gfycat, lolcats, wikipedia

Web 3.0?

• Web Semântica - compreensão e associação da informação consoante o utilizador
• ex.: sugestões do Youtube, Pinterest, Amazon
• mapas, cartões de informação e respostas para pesquisas (Google Rich Snippets)

pesquisar "casa da música" no Google!

produtos relacionados Amazon, via reddit

A Web em Portugal

• quando surgiu
• como proliferou
• como está a ser preservada

A Internet em Portugal

• Origem nas universidades: Aveiro, Minho, Porto, Coimbra, "Técnico", ULisboa e Nova (90-91). Coordenação de José Legatheaux, o "pai" da Internet em Portugal
• 1985 - primeira ligação: Uni. Minho envia e-mail
• 1990 - domínio 'pt' registado em 1990, gerido pela FCCN
• 1991 - primeira página web portuguesa, por U.Minho
• 1994 - apresentação no seminário "Portugal na Internet" 
  • primeiros fornecedores privados: Esotéria, IP e Telepac
  • Portugal Telecom, a início, não teve interesse
  • antes disso, só uma ligação internacional: lenta e cara​​
• 2000 - banda larga (ADSL ou cabo) e o fim do "World Wide Wait" 

A Web em Portugal

Preservada pelo Arquivo.pt

1ª página portuguesa

Preservação da história da Web

A Web em Portugal

Quem Preserva

• Preserva registos passados da web portuguesa desde 1996
• Disponibiliza ferramentas para preservar, fornecer e avaliar informação
• links:
  • site oficial
  • GitHub

 Arquivo.pt

O fenómeno da web não resultou apenas dos avanços tecnológicos ou dos seus profissionais. A web é um testemunho de liberdade de expressão e de contributo dos seus utilizadores.

Web apps - preciso sequer de instalar?

• editores de texto
  • Google Drive
  • Office 365
  • https://ide.makeblock.com/#/
  • https://www.photopea.com/
• editores de media (photoshop online, etc.)

Gmail comporta-se como uma aplicação desktop (e mobile) nativa

imagem via Google

Bibliografia e referências

• The Evolution of Web Design (Web FX)
• The nexus browser (digital archaeology)
• First website recreation (cern)
• http://line-mode.cern.ch/
• https://webfoundation.org/about/vision/history-of-the-web/
• The evolution of web design (webfx)
• The history of web browsers (webfx)
• https://creativemarket.com/blog/90s-web-designs
• APRIL 22, 1993: MOSAIC BROWSER LIGHTS UP WEB WITH COLOR, CREATIVITY (Wired)
• benastontweet (Medium)
• A brief history of javascript (Auth0)
• History of the <img> tag (History of the Web)
• Blink vs Marquee tags (History of the Web)
• http://www.techtudo.com.br/platb/internet/2011/07/08/bbs-a-internet-antes-da-internet/
• https://whatis.techtarget.com/definition/bulletin-board-system-BBS
• https://www.publico.pt/2009/10/30/tecnologia/noticia/os-pioneiros-da-internet-em-portugal-1407629
• https://www.slideshare.net/limaniBhavik/wap-roll-no-38
• https://thehistoryoftheweb.com/before-there-were-smartphones-there-was-i-mode/
• https://thehistoryoftheweb.com/complete-history/first-things-first-what-is-the-web/
• https://briankardell.wordpress.com/2015/11/22/a-briefish-history-of-the-web-universe-part-i-the-pre-web/
• https://mashable.com/2012/11/19/history-of-flash/
• https://www.theverge.com/2019/3/11/18260449/world-wide-web-www-anniversary-tim-berners-lee-internet
• The History of the Web (by Sutori)

Outras Perspetivas

• web development
• SEO
• IndieWeb

Os elementos da primeira página

Usa <a>, <h1> e description/definition lists (<dl>, <dt> e <dd>)

A primeira página web

explicada por Tim Berners-Lee

Disponível numa página web do w3c

de (S)GML para HTML

• criada por (IBM) para processamento de documentos
• sigla = iniciais dos criadores e 'Generalized Markup Language'

exemplo via briankardell

h1? p? ol? li? Parece-vos familiar?

GML (1969)

SGML (1986?)

A "outra" web...

Gopher - imagem via webdesignmuseum

Mosaic e <img>

• Antes do <img>, só se podia ver imagens através de links (browser abria uma janela nova)
• Proposta por criadores de Mosaic (Andreessen e Bina) PARA o Mosaic
• Apesar da hesitação, foi eventualmente definida para HTML 2.0 (1995)
• Texto alternativo para imagens foi proposto pelo autor de Midas, o rival do Mosaic. Evoluiu eventualmente para o alt
  • como alt era usado também para exibir uma tooltip, havia quem pusesse texto como "click me" como alt, e "separaram-se as águas"

imagem via Wired

Ver mais em "origem da tag <img>"

1990-200X - Tabelas e imagens

imagens via webFX

Spacer GIF - imagem com 1 píxel para definir espaçamentos

Yahoo! (2002)

1996/97 - Browser Wars

IE (3 and 4) vs Netscape

• IE 3 - "dynamic" on window resize (Netscape would reload, forcing cache systems to not lose data, like field values)
• IE 3 - first CSS implementation in browser
• Netscape <blink> VS IE <marquee>
• 97, IE4 had a DOM - now you could "rewrite" whole pages, with stuff like innerHTML...
  • before that, you could only change field values, image urls, links hrefs, but not actually change document structure 

source: History of the Web, by Chris Wilson

Os "loucos" anos 90...

Lost World

<p align="CENTER"> com imagem no lugar de título

fonte de sistema

"float" foi feito para isto!

Imagem em vez de texto 

border-image

Mocha LiveJavaScript?

• Primeira linguagem de scripting (Mocha) feita para Netscape, por Brendan Eich, em 1995
• Feita em poucos dias, baseada em Java e Scheme e Self
• Microsoft desenvolveu versão própria (JScript), que estreou no IE3
• Netscape procurou standardizar a linguagem, e até fez parceria com a Sun (Java)
  • nome passa para JavaScript, para fortalecer ligação com "Java" (apesar de serem distintos)
  • Sun queria entrar no mercado da web com Java, mas esta era inadequada para designers e amadores (público-alvo do Mocha)
• falta de "standard" e detalhes da linguagem impediram-na de arrancar em força nos anos 90
• primeiro standard ECMAScript data de 97

Fontes:

• benastontweet (Medium)
• Auth0

web 1.0 - Nescape (standards) vs Microsoft

AJAX (não AJAJ) - 1999/2005

• Asynchronous Javascript And XML
• Fazer pedidos sem requerer "refresh"
• Possibilita, com JS, interações com outros meios (API, servidores...)
• JS + AJAX = web apps (semelhantes a apps desktop...)

fonte: History of the web

• Origem: Microsoft, com Internet Explorer 5 (1999)
• suporte para Java removido por questões legais (depois de adicionado em IE 3)
• ... mas Outlook funcionava à base do JVM!
• solução: XmlHttpRequest, para buscar dados XML sem requerer 'refresh' do Outlook
• mais tarde adotado por Firefox e outros browsers
• termo definido por Jesse James Garett (2005)

jQuery - 2006

• browsers modernos com specs padrão
• fim de suporte para browsers antigos
• métodos nativos práticos
  • You Might Not Need jQuery

fonte: The History and Legacy of jQuery 

Writing Javascript code should be fun - John Resig, segundo Danny Guo

• Seletores "fáceis"
• Compabilidade com browsers
• meios práticos para Ajax e animações

muito popular (2006)
 

(2015?) declínio

<P> sem </P>

The paragraph tag (yes, in upper case) was intended to separate paragraphs, not wrap them.

 

 

Remy Sharp, in (Why Some HTML is "optional")

Origem do SEO

• https://thehistoryoftheweb.com/where-does-seo-come-from/

As "aventuras" e a "trademark"