Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a...

46
Thiago Miranda dos Santos Souza Apresentação e Visão Geral sobre a Web Autoria Web

Transcript of Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a...

Page 1: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Thiago Miranda dos Santos Souza

Apresentação e Visão Geral sobre a Web

Autoria Web

Page 2: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Thiago Miranda dos Santos Souza

Apresentação

• Thiago Miranda • Email: [email protected]

• Site: www.thiagomiranda.net

Autoria Web

Page 3: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Thiago Miranda dos Santos Souza

Objetivos da Disciplina • Conhecer os limites de atuação profissional em Web Design • Conhecer como a web funciona • Compreender as linguagens HTML e CSS, seus conceitos, estruturas, elementos e funcionamento • Conhecer as melhores práticas do desenvolvimento Web • Compreender os conceitos de Usabilidade e Acessibilidade na concepção de Web sites • Aprender a analisar e projetar interfaces para sites e aplicações na web.

Autoria Web

Page 4: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Thiago Miranda dos Santos Souza

Ementa da Disciplina 1. Introdução à Internet, conceitos históricos e evolução de websites 2. Estrutura básica de páginas web:

a) Principais tags e atributos do HTML; b) Formatação de uma página; c) Inserção de imagens; d) Criação de vínculos; e) Criação de tabelas; f) Frames; g) Formulários

3. Folha de estilos (CSS) 4. Desenvolvimento de interfaces para web 5. Usabilidade 6. Acessibilidade

Autoria Web

Page 5: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Thiago Miranda dos Santos Souza

Competências • Conhecer o funcionamento da internet e da Web • Possuir conhecimentos técnicos sobre desenvolvimento de

páginas web utilizando a linguagem de marcação HTML • Compreender o funcionamento das folhas de Estilo e

como aplicá-las em documentos HTML. • Identificar características de usabilidade e acessibilidade

de interfaces. • Conhecer os limites de atuação profissional em

desenvolvimento Web • Compreender os conceitos de usabilidade e acessibilidade

no desenvolvimento de páginas web

Autoria Web

Page 6: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Thiago Miranda dos Santos Souza

Habilidades • Desenvolver interfaces web com o uso de linguagens de

marcação e estilo; • Utilizar a linguagem HTML para a construção de páginas. • Utilizar folhas de estilo para a formatação visual de

páginas web. • Compreender procedimentos e técnicas para o

desenvolvimento de websites com conteúdos estáticos;

Autoria Web

Page 7: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Thiago Miranda dos Santos Souza

Proposta de trabalho

• Enfoque teórico e prático com uso de muitos exercícios, realizados em sala e em casa para fixação • Aprendizado visando a aplicação prática do conhecimento • Avaliação Serial e diária

Autoria Web

Page 8: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Thiago Miranda dos Santos Souza

Conteúdos

Os materiais de aula, apostilas e outras informações estarão disponíveis em:

www.thiagomiranda.net

Autoria Web

Page 9: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Introdução

Thiago Miranda dos Santos Souza

Autoria Web

Page 10: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Internet Junção de duas palavras: interconnected + network • Conjunto de computadores interligados em rede, através da qual são transmitidos textos, sons, imagens, entre outros dados

Thiago Miranda dos Santos Souza

Autoria Web

Page 11: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Internet Internet é um conjunto de redes diferentes que utilizam certos protocolos comuns e oferecem certos serviços comuns. • Comunicação é transparente para o usuário;

• Cada ponto tem uma identidade;

• O funcionamento de cada rede é independente das outras;

• Utiliza regras para comunicação entre os pontos.

Thiago Miranda dos Santos Souza

Autoria Web

Page 12: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Como Funciona a Internet

Thiago Miranda dos Santos Souza

Autoria Web

Page 13: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Como Funciona a Internet

Thiago Miranda dos Santos Souza

Autoria Web

Page 14: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Como Funciona a Internet

Thiago Miranda dos Santos Souza

Autoria Web

Page 15: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Como Funciona a Internet

Thiago Miranda dos Santos Souza

Autoria Web

Page 16: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Como Funciona a Internet

Thiago Miranda dos Santos Souza

Autoria Web

Page 17: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Como Funciona a Internet

Thiago Miranda dos Santos Souza

Autoria Web

Page 18: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Como Funciona a Internet

Thiago Miranda dos Santos Souza

Autoria Web

Page 19: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Protocolo Protocolo é um conjunto de regras que uma rede utiliza para a comunicação entre seus pontos. A internet utiliza principalmente os protocolos TCP/IP TCP - (Protocolo de Controle de Transmissão) é um mecanismo de transporte

"confiável", orientado à conexão garantindo assim que os dados cheguem

íntegros (não danificados e em ordem).

IP – (Protocolo de Interconexão) é um protocolo de comunicação usado entre

duas ou mais máquinas em rede para encaminhamento dos dados.

Thiago Miranda dos Santos Souza

Autoria Web

Page 20: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

TCP

Thiago Miranda dos Santos Souza

Autoria Web

- Estabelece Conexão - Transfere Dados - Encerra a Conexão - Cuida da comunicação entre duas aplicações; - É responsável pelos controles de correção, ordenação e perda das informações;

Page 21: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

IP

Thiago Miranda dos Santos Souza

Autoria Web

- Dados Encapsulados - Endereçamento - Encaminhamento - Responsável pela quebra e transmissão da informação em pacotes; - Comunicação é feita entre pontos; - Exemplos de endereços IPs:

10.9.98.145 192.168.0.1

Page 22: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

HTTP

Thiago Miranda dos Santos Souza

Autoria Web

Permite visualizar recursos multimídia através da Internet; O protocolo HTTP é o responsável pelo funcionamento da Web; Ele funciona através de um padrão de requisição e resposta; Um recurso disponível na Web é localizado por um Localizador de Recurso Uniforme (URL);

Page 23: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

HTTP

Thiago Miranda dos Santos Souza

Autoria Web

sessão HTTP é uma conexão de rede composta por um conjunto de requisições e respostas; O início da sessão se da por uma requisição do cliente HTTP;

Page 24: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

DNS

Thiago Miranda dos Santos Souza

Autoria Web

O DNS (Domain Name System - Sistema de Nomes de Domínios) é um sistema de gerenciamento de nomes hierárquico e distribuído.

Você não digita 186.192.82.163

Mas sim http://www.globo.com

Page 25: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

URL

Thiago Miranda dos Santos Souza

Autoria Web

URL (Uniform Resource Locator):

http://www.ifba.edu.br/ensino/material/html/url.html 1 - Protocolo de acesso ao recurso

2 – Endereço em que se encontra o recurso 3 – caminho de diretórios até o recurso 4 – recurso a ser obtido

Page 26: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

História da Internet

Thiago Miranda dos Santos Souza

Autoria Web

Page 27: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Quanto tempo uma tecnologia demorou para atingir 50 milhões de usuários

Thiago Miranda dos Santos Souza

Autoria Web

Page 28: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

O que é um site?

Thiago Miranda dos Santos Souza

Autoria Web

Um website ou site, é um conjunto de páginas web, isto é, de hipertextos acessíveis geralmente pelo protocolo HTTP na Internet.

As páginas num site são organizadas a partir

de um URL básico onde fica a página principal, e geralmente residem no mesmo diretório de um servidor.

Page 29: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Origem do nome

Thiago Miranda dos Santos Souza

Autoria Web

Quando a World Wide Web foi criada no CERN, ela recebeu esse nome de seu criador Tim Berners-Lee.

Ele comparou a sua criação com uma teia, "web" em inglês. Cada nó dessa teia é um local (virtual) onde há hipertextos. Como a palavra inglesa para local é site (também derivada do latim situs: "lugar,local"), quando as pessoas queriam se referir a um local da teia, elas falavam, web site.

Page 30: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Propósito dos sites

Thiago Miranda dos Santos Souza

Autoria Web

Institucional: muitas empresas usam seus sites como ponto de contato entre uma instituição e seus clientes, fornecedores, etc.

Page 31: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Propósito dos sites

Thiago Miranda dos Santos Souza

Autoria Web

E-commerce: Web site que estabelece a venda de produtos e serviços para os clientes por meio de uma transação comercial. O e-commerce é um dos mais importantes fenômenos da Internet e em constante crescimento.

Page 32: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Propósito dos sites

Thiago Miranda dos Santos Souza

Autoria Web

Portal: Web sites que possuem conteúdos dos mais diversos assuntos e tipos, oferecendo esse serviço no mesmo web site. Funcionam como uma "porta" de entrada e mostram uma gama de opções para o usuário.

Page 33: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Propósito dos sites

Thiago Miranda dos Santos Souza

Autoria Web

Aplicativos: funcionam como programas de computador. O objetivo é trabalhar como ferramentas de automação, compartilhamento de informações, produtividade, consultas e análise. O propósito é substituir as aplicações em "desktops" permitindo a mobilidade e a conectividade da organização e seus colaboradores. Uma agenda, planilhas eletrônicas, editores de texto, são exemplos pertinentes a essa categoria.

Page 34: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Propósito dos sites

Thiago Miranda dos Santos Souza

Autoria Web

Informativos : Web sites que tem o objetivo de passar informação. Os veículos de comunicação compreendem essa categoria e veiculam notícias e informativos.

Page 35: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Propósito dos sites

Thiago Miranda dos Santos Souza

Autoria Web

Blogs : O que caracteriza um blog é a publicação de novos conteúdos que é feita em ordem cronológica, ou seja, o último artigo aparece na primeira posição da página inicial.

Page 36: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Propósito dos sites

Thiago Miranda dos Santos Souza

Autoria Web

Redes Sociais Uma rede social é uma estrutura social composta por pessoas ou organizações, conectadas por um ou vários tipos de relações, que partilham valores e objetivos comuns.

Page 37: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

A Evolução da Web

Thiago Miranda dos Santos Souza

Autoria Web

•Pré-Web •Passado (web 1.0) •Presente (web 2.0) •Futuro (web 3.0)

Page 38: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Pré-web

Thiago Miranda dos Santos Souza

Autoria Web

•Tentativa de tornar a internet útil, mas ... •os serviços de informação oferecidos eram pequenos espaços e... •os usuários navegavam restritos a esses espaços •Soluções eram proprietárias e as plataformas não-abertas

Page 39: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Web 1.0

Thiago Miranda dos Santos Souza

Autoria Web

O passado da Web (web 1.0) Hiperlinkagem em documentos Tim Berners Lee inventou a Web em 1989. Sua genialidade foi criar e juntar três simples tecnologias, mas muito elegantes: •Localizador ou Identificador Uniforme de Recursos (URL ou URI) para identificar recursos (por exemplo, documentos, dados) na Web, e saber onde encontrá-los. •Hypertext Markup Language (HTML) linguagem para representar o conteúdo em termos de páginas na Web e de expressá-las em links •Hypertext Transfer Protocol (HTTP) protocolo para mover dados na Web e em toda a Internet

Page 40: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Web 1.0

Thiago Miranda dos Santos Souza

Autoria Web

Page 41: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Web 2.0

Thiago Miranda dos Santos Souza

Autoria Web

O presente da Web (web 2.0)

Páginas dinâmicas

Colaboração

Alta interaRvidade

Projeto centrado no usuário

Facilidade para gerar conteúdo

Excesso de informação

Redes sociais, blogs, wiKis, sites de comparRlhamento d

e vídeo, mashups, etc.

Page 42: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Web 2.0

Thiago Miranda dos Santos Souza

Autoria Web

O presente da Web (web 2.0) A Web cresceu muito e rapidamente ... mais de 100 milhões de sites ativos mais de 1 bilhão de pessoas acessam a Web de: Hiperlinkagem de documentos; para: Conteúdo dinâmico gerado pelos usuários

~ 80 milhões de vídeos ~ 4 milhões de usuários [email protected]

Page 43: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Web 3.0

Thiago Miranda dos Santos Souza

Autoria Web

Page 44: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Web 3.0

Thiago Miranda dos Santos Souza

Autoria Web

O futuro da Web (web 3.0) A próxima evolução na Web, se não for uma revolução, será a da linkagem de dados e dispositivos. Novas formas de integração e de combinação de dados para conseguir informações e ideias nunca antes possível. Novas maneiras de conectar à Internet através de uma variedade de dispositivos capazes de pesquisar, combinar e analisar os dados. o W3C busca padronizar as tecnologias emergentes que permitirão a Web 3,0 se tornar uma realidade •Web Semântica •Vídeo na Web •Web Móvel •Web Ubíqua

Page 45: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

W3C

Thiago Miranda dos Santos Souza

Autoria Web

•Consórcio World Wide Web (W3C) "Para levar a web ao seu potencial máximo, desenvolvendo protocolos e orientações que garantam o crescimento da web no longo prazo." • Fundada por Tim Berners-Lee em 1994 • Desenvolve Recomendações abertas (Padrões Web) • Até agora mais de 80 padrões… • Engajado em educação, expansão e desenvolvimento de orientações • Um forum neutro para construir consenso em torno de padrões web

Page 46: Apresentação e Visão Geral sobre a Web - Thiago Miranda · Apresentação e Visão Geral sobre a Web ... Introdução à Internet, conceitos históricos e evolução de ... •

Atividade

Thiago Miranda dos Santos Souza

Autoria Web

• Faça um resumo sobre a história da internet e como ela funciona e seus protocolos mais utilizados (Falando o que você entendeu de cada um deles) .

• Pense em um negócio ou empresa para desenvolver um site, pode ser fictício, porém é melhor que seja alguma empresa real, de um amigo, parente ou conhecido que necessite de um site.