Programação Web Introdução

Tópico 1

Prof MSc Vitor Mesaque Alves Lima

Internet◦ maior conglomerado de redes de comunicações em escala

mundial vários computadores e dispositivos conectados em uma rede mundial milhões de dispositivos interligados pelo protocolo de

comunicação TCP/IP que permite o acesso a informações e todo tipo de transferência de dados.

◦ carrega uma ampla variedade de recursos e serviços, incluindo os documentos interligados por meio de hiperlinks da World Wide Web.

World Wide Web (que em português se traduz literalmente por teia mundial), também conhecida como Web e WWW, é um sistema de documentos em hipermídia que são interligados e executados na Internet.

Internet e a World Wide Web

Visualização gráfica de várias rotas em uma porção da Internet mostrando a escalabilidade da rede.

Nos EUA, a Internet atingiu 50 milhões de usuários em apenas 4 anos, ao passo que, para atingir esse número de usuários:◦ o computador pessoal tardou 16 anos◦ a televisão 13 anos◦ o rádio 38 anos◦ o telefone 74 anos

Outro dado que corrobora a velocidade de disseminação da Internet é o da Conectividade Internacional (1991-1998)

Brasil◦ Usuários da Internet 37 milhões (2005) 65 milhões (2009)

Crescimento da Internet

Conectividade Internacional e Internet (1991)

Conectividade Internacional e Internet (1997)

A interatividade é a maior colaboração que o computador traz ao processo. Ela envolve a possibilidade de:

◦ Buscar, pesquisar e selecionar informações

◦ Interromper e prosseguir de onde se parou

◦ Voltar ao que já se viu, saltar para frente, passar os olhos pelas informações

◦ Marcar, anotar, cruzar referências

7

Interatividade

O Hipertexto surgiu para romper a linearidade dos textos propondo uma nova forma de leitura em rede.

Nenhum outro tipo de mídia permitia a interatividade do leitor com o conteúdo de forma tão intuitiva.

A idéia do Hipertexto surgiu a partir das enciclopédias que já apresentavam a idéia de não linearidade e não tinha a intenção de que um leitor simplesmente realizasse a sua leitura na íntegra e de forma sequencial.

8

Hipertexto

9

Texto convencional: seqüencial, linear◦ Ex.: livros, jornal, revistas...

Hipertexto: não seqüencial◦ Não existe uma única seqüência de leitura pré-

definida, mas várias alternativas◦ Ex.: texto tradicional com notas de rodapé

(“rodapé generalizado”); enciclopédias (“referências cruzadas”), websites, indices dinâmicos…

Conceitos Básicos

10

Fragmentos de informação interligados◦ Podem ser exibidos de diferentes formas (telas,

janelas, arquivos, ...)

Nó (node): uma unidade de informação

Ligação (link): “ponteiro” que conecta nós

Estrutura de um hipertexto: rede de nós e ligações (grafo)

Hipertexto

O Hipertexto que por sua natureza já conta com recursos computacionais, agiliza o processo de busca e redirecionamento na seqüência de leitura dos documentos.

O objetivo do Hipertexto é sanar dúvidas e atender aos interesses dos leitores da forma mais adequada possível através de consultas rápidas, referências a temas relacionados, ilustrações, gráficos, sons e outros documentos no formato digital, sempre com o objetivo de explicar conceitos, tirar dúvidas e atender às necessidades dos leitores.

11

Hipertexto

Hiperlinks nos Hipertextos são palavras marcadas em um documento que redirecionam a leitura para um outro ponto do texto ou para outro texto

Cada página de um hipertexto possui hiperlinks que desviam a leitura de um texto para outra parte deste texto ou para outra parte de outro texto

A unidade conceitual agora é uma página e não mais um texto completo

12

Hipertexto

Exemplo de Hiperdocumento

13

Nó

Ligação

Âncora

Um hiperdocumento é composto de nós inter-relacionados por ligações .

Um sistema hiperdocumento é umsoftware que permite ao autor criar e

manipular hiperdocumentos.

Um nó pode ter ligaçõespara outros nós. Por

Exemplo: para um mapa ePara a definição de hiperdocumento.

A ligação define uma relaçãoentre as informações contidas nos

nós do hiperdocumento. Para habilitá-la durante a navegação

deve-se clicar em uma âncora ou indicação.

As âncoras podem ser representadasde diversas formas no conteúdo do

hiperdocumento, como palavrassublinhadas, ícones ou botões.

Um hipertexto pode ser visto como um grafo

14

Visão abstrata de um hipertexto

Âncoras origem

Âncoras destino

Elos ou Ligações

Nós

navegação (browsing): processo de “ler” o hipertexto, visitando diferentes nós

◦ cabe ao leitor determinar a sequencia de leitura

◦ ligações são direcionadas: saem de um nó origem (ou nó âncora) e levam a um nó destino

◦ ligações estão normalmente ancoradas a uma região específica do nó origem

15

Hipertexto

âncora: representação visual da ligação

backtracking: retorno a um nó previamente visitado

muitos sistemas registram a sequencia de nós visitados e permitem o retorno na ordem inversa à da visita. ◦ Ex. A->B->E->D

16

Hipertexto

A maioria dos sistemas suporta apenas ligações unidirecionais◦ leitor vê para onde pode ir a partir de onde está,

mas não vê os nós que apontam para o nó onde está...

Ligações bidirecionais: permitiriam que o leitor visse os caminhos alternativos pelos quais poderia ter atingido o nó atual

Ligações para nós em bases de dados externas

17

Hipertexto

A Internet possui uma grande parcela de responsabilidade na proliferação dos hipertextos

Uma vez que, o mundo inteiro esteja conectado, é possível ligar textos de forma geograficamente ilimitada e com um dinamismo muito acentuado

18

Hipertexto & Internet

Com o recurso de rede de computadores, é possível realizar desvios entre documentos armazenados em diferentes computadores. Cada computador possui um conjunto de documentos e os disponibiliza para um gama muito grande de leitores através da Internet.

Constante de atualização => Uma consulta realizada ontem possivelmente não terá os mesmos resultados que uma consulta hoje

19

Hipertexto & Internet

Multimídia

O que é multimídia?

◦ Multimídia corresponde a integração de diferentes modalidades de mídia: gráficos, imagens, textos, audio, animação ( que possibilita melhor visualização de imagens em 3-D, enriquece representações gráficas, permite mapear fenômenos que mudam com o tempo, etc) e vídeo (utilizado para mostrar coisas que se movem) na representação de dados.

20

◦ nós contém informação em diferentes mídias: texto, gráficos, imagens, vídeos, som...

21

Hipermídia

Hipermídia = Hipertexto + Multimídia

Âncoras podem estar no texto, nos gráficos, imagens, vídeo...

Âncoras podem ser indicadas na forma de texto, ícones (icons)◦ representação visual é necessária...

22

Hipermídia

Evolução do Hipertexto

◦ Quase que imediatamente após os Hipertextos terem surgido já surgiu o conceito de Hipermídia que reúne não somente textos como também imagens, sons, vídeos e quaisquer outras informações que venham possuir sua representação no formato digital

O que impossibilitou que a Hipermídia fosse amplamente utilizada logo que seu conceito tenha surgido foi o de não haver recursos computacionais de hardware suficientes na época

◦ Conforme os recursos de imagens, vídeos e sons foram sendo criados, os mesmos foram sendo introduzidos na Hipermídia permitindo que ambientes se tornassem cada vez mais realistas.

23

Hipermídia

24

Hipermídia

A Hipermídia une recursos textuais, visuais, sonoros e outros quaisquer que possuam sua representação digital para a

elaboração de documentos navegáveis não-lineares.

Hipertexto + Mídias!

Hipertexto: Pode ser definido como um grafo, onde os nós representam pedaços de textos e os "links" uma correlação entre os mesmos. É a forma mais comum de representação da hipermídia. O texto é apresentado na tela do computador de uma maneira diferente da representação seqüencial (como a de um livro, por exemplo) usando "links" onde o usuário pode navegar entre pedaços de textos relacionados.

Hipermídia: É uma maneira de se criar documentos, usando um computador, onde pode-se combinar texto, gráfico, animação, vídeo, som e qualquer outra mídia que venha a ser desenvolvida usando os "links" para conectar os nós(neste caso os nós representam qualquer mídia ou combinação entre elas). Pode se dizer que Hipermídia é uma expansão do conceito de Hipertexto que contempla outras mídias.

Multimídia: É uma maneira de se criar documentos, usando um computador, onde pode-se combinar texto, gráfico, animação, vídeo, som e qualquer outra mídia que venha a ser desenvolvida. Diferente de Hipermídia os documentos (ou sistemas) criados em multimídia podem ser seqüenciais.

25

Conceitos Básicos

Conklin, J. Hypertext: An Introduction and Survey. IEEE Computer, v. 20, n. 9, pp.17-41, 1987.

Apesar de antigo, e portanto desatualizado, este é um artigo importante porque define toda a terminologia básica e discute problemas clássicos associados ao hipertexto.

26

Leitura recomendada

Nielsen, J. The art of navigating through hypertext. Communications of the ACM, v.33, n. 3, p. 297-310, March 1990.

Ginige, A. Hypermedia authoring. IEEE Multimedia, p. 24-35, Winter 1995.

NIELSEN, J. “Usabilidade na Web: Projetando Websites com Usabilidade”, Campus, 2007.

27

Bibliografia