Programação Web Introdução

Apresentação em tema: "Programação Web Introdução"— Transcrição da apresentação:

1 Programação Web Introdução
Tópico 1 Prof MSc Vitor Mesaque Alves Lima

2 Internet e a World Wide Web
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.

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

4 Crescimento da Internet
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 ( ) Brasil Usuários da Internet milhões (2005) milhões (2009)

5 Conectividade Internacional e Internet (1991)

6 Conectividade Internacional e Internet (1997)

7 Interatividade 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

8 Hipertexto 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.

9 Conceitos Básicos 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…

10 Hipertexto 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)

11 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.

12 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

13 Exemplo de Hiperdocumento
Ligação Âncora Um hiperdocumento é composto de nós inter-relacionados por ligações . Um sistema hiperdocumento é um software que permite ao autor criar e manipular hiperdocumentos. Um nó pode ter ligações para outros nós. Por Exemplo: para um mapa e Para a definição de hiperdocumento A ligação define uma relação entre 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 representadas de diversas formas no conteúdo do hiperdocumento, como palavras sublinhadas, ícones ou botões.

14 Visão abstrata de um hipertexto
Um hipertexto pode ser visto como um grafo Elos ou Ligações Âncoras origem Âncoras destino Nós

15 Hipertexto 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

16 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

17 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

18 Hipertexto & Internet 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

19 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

20 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.

21 Hipermídia = Hipertexto + Multimídia
nós contém informação em diferentes mídias: texto, gráficos, imagens, vídeos, som... Hipermídia = Hipertexto + Multimídia

22 Hipermí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...

23 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.

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!

25 Conceitos Básicos 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.

26 Leitura recomendada 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.

27 Bibliografia Nielsen, J. The art of navigating through hypertext. Communications of the ACM, v.33, n. 3, p , March 1990. Ginige, A. Hypermedia authoring. IEEE Multimedia, p , Winter 1995. NIELSEN, J. “Usabilidade na Web: Projetando Websites com Usabilidade”, Campus, 2007.