Ferramentas para Internet CST Sistemas para Internet

Tamanho: px

Começar a partir da página:

Download "Ferramentas para Internet CST Sistemas para Internet"

Maria Vitória Costa Lencastre
8 Há anos
Visualizações:

1 Ferramentas para Internet CST Sistemas para Internet Marx Gomes Van der Linden ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida )

2 Ferramentas para Internet Web design: HTML CSS Javascript Fundamentos de gráficos para web XML

3 Bibliografia Learning Web Design O'Reilly Jenniger Niederst Robbins Quaisquer referências sobre HTML, CSS e Javascript Sistema de ajuda do Dreamweaver Manuais e tutoriais encontrados na Web

4 Internet Breve Histórico Características Iniciais Uso restrito (Público e aplicações) Ausência de protocolos bem definidos Baixa velocidade de transmissão Monomídia Aplicações Básicas Transferência de Arquivos Terminal Remoto Correio Eletrônico Notícias 4

Baixa velocidade de transmissão Monomídia Aplicações Básicas

5 Hipertexto Definições É um documento que se pode ler de maneira não sequencial. [Wikipedia] Cada documento é ligado a um outro através de um elemento de texto, como palavra-chave ou imagem. esportes.html Seleção da Indonésia vai jogar... Indonesia.html Devido ao Tsunami, haverá uma partida Beneficiente... notícias.html As últimas partidas de Futebol do fim de Semana foram... 5

palavra-chave ou imagem. esportes.html Seleção da Indonésia vai jogar... Indonesia.

6 Histórico da Web 1990 Tim Berners-Lee, do CERN, cria um sistema baseado em hipertexto para facilitar o uso e compartilhamento de documentos científicos através da internet Surge a primeira especificação pública de HTML, a linguagem de marcação de documentos na web. HTML 1.0

documentos científicos através da internet.

7 Solução Servidores distribuídos geograficamente Ligações contidas nos documentos Capítulo 1 Blá blá blá Blá blá blá Blá blá blá Blá blá blá Capítulo 2 Blá blá blá Blá blá blá Blá blá blá Blá blá blá Capítulo 1 Capítulo 2 Capítulo 3 Capítulo 3 Blá blá blá Blá blá blá Blá blá blá Blá blá blá 7

Capítulo 2 Blá blá blá Blá blá blá Blá blá blá Blá blá blá Capítulo 1

8 HTML 1.0 Primeira implementação real do conceito de hyperlink. Fácil navegação entre páginas localizadas em diferentes partes do mundo. Todas as páginas seguiam o mesmo esquema de fontes e cores. Suporte limitado a imagens. Sem suporta a formulários e tabelas.

9 Mosaic 1992 Navegador Mosaic Primeira implementação robusta e multiplaforma de um navegador gráfico para a web. Unix, Windows e Mac. Popularização da internet fora do meio acadêmico. Início do primeiro Boom da internet.

11 Histórico da Web 1994 Criação da W3C World Wide Web Consortium Objetivo: criação e manutenção de padrões internacionais para a web 1995 HTML 2.0 Primeira versão padronizada do HTML Suporte a cores e formulários Melhor suporte a imagens Implementação do Mosaic

12 Guerra dos Browsers Netscape Navigator Sucessor do Mosaic 1994 Versão Versão Versão 3.0 Microsoft Intenet Explorer 1995 Versões 1.0, Versão 3.0 Primeira se popularizar

13 Guerra dos Broswers Novas versões de cada navegador surgindo a cada 2 ou 3 meses. Pouco suporte aos padrões. Navegadores largamente incompatíveis entre si. Era do "site melhor visualizado com..."

14 Guerra dos Browsers

15 Histórico da Web Janeiro de 1997 HTML 3.2 Grande expansão no número de atributos que permitem personalizar a apresentação da página Fontes Estilos Bordas Backgrounds Primeiro suporte a folhas de estilo (CSS 1.0). Implementação pobre nos navegadores.

personalizar a apresentação da página Fontes Estilos Bordas

16 Histórico da Web Dezembro de 1997 HTML 4.0 Rumo oposto ao HTML 3.2 Remoção de todo tipo de elementos relacionados à apresentação da página. Maio de 1998 CSS 2.0 Especificação mais madura das folhas de estilo. Separação entre estrutura e apresentação. Adoção extremamanete lenta entre os navegadores.

Maio de 1998 CSS 2.0 Especificação mais madura das folhas de estilo.

17 HTML Arquivo de texto simples, organizado por tags. <nomedatag atributo1="valor1" atributo2="valor2"> Conteúdo </nomedatag> Nomes das tags não distinguem maiúsculas e minúsculas. Espaços extras não são levados em consideração. Deve especificar a estrutura do documento. 17

</nomedatag> Nomes das tags não distinguem maiúsculas e minúsculas.

18 HTML (1/2) 18

19 HTML (2/2) 19

20 HTML 20

21 HTML + CSS 21

22 HTML 22

23 CSS Cascading Style Sheets Especificam a formatação do documento. Um arquivo CSS pode ser aproveitado para vários arquivos HTML. Uso de CSS facilita a separação entre estrutura e apresentação. 23

24 24

25 25

26 26

27 Web Design hoje Design gráfico Design de informações Design de interfaces Produção de HTML, CSS Programação de cliente (Javascript) Programação de servidor (Java, ASP, PHP, etc...) Multimídia (vídeo, Flash) 27

28 Design Gráfico A Web é um meio visual. Edição gráfica é uma parte essencial de qualquer projeto de web design. Photoshop, GIMP, etc... Projeto geral do site. Design individual das imagens. 28

29 Design de Informações Como organizar as informações de um web site? Linear Linear com alternativas Hierárquica 29

30 Design de Interfaces Design Gráfico Aparência Design de Interfaces Funcionalidade Usabilidade e Acessibilidade Como fazer o usuário encontrar rapidamente as funcionalidades que procura? "Não me faça pensar!" Experimentos com usuários reais. 30

31 Produção de Documentos Design de páginas propriamente dito. Requer grande familiaridade com HTML e CSS. 31

32 Programação de Cliente (Javascript) Funcionalidades avançadas do site: Não requer conhecimentos específicos de design Código produzido precisa estar bem integrado à estrutura e design da página (HTML+CSS) 32

33 Javascript Linguagem de programação embutida no navegador Javascript Java! Usada para mainpular dinamicamente os elementos de uma página Verificação de campos digitados Mudança de conteúdo sem recarregamento da página Construção de menus e ferramentas de interface personalizadas 33

34 Javascript <html> <head><script type="text/javascript"> function changesrc(){ document.getelementbyid("myimage").src = "hackanm.imagem2"; } </script></head> <body> <img id="myimage" src="imagem1.png" width="107" height="98"> <br><br> <input type="button" onclick="changesrc()" value="change image"> </body> </html> 34

35 Relação entre Tecnologias Estrutura (HTML) Apresentação (CSS) Computação (JavaScript) 35

36 Programação de Servidor Geração de páginas dinâmicas. Sites personalizados de acordo com informações enviadas pelo usuário. Fornecimento de serviços. Aplicativos on-line Linguagens e Plataformas: JSP (Java), PHP, ASP.NET, VB.NET, Ruby on Rails, etc... 36

37 HTTP 37

38 HTTP Hypertext Transfer Protocol Porta 80 Modelo de Requisição e Resposta 38

39 Requisição Cliente (User Agent) emite uma Requisição, pedindo um Recurso: Método (GET ou POST) + Recurso Cabeçalho Corpo da Mensagem GET /index.html HTTP/1.1 Host: User-Agent: Mozilla/5.0 (X11; U; Linux i686; ptbr; rv: ) Gecko/ Firefox/3.0.1 Accept-Language: pt-br,pt;q=0.8,enus;q=0.5,en;q=0.3 39

40 Resposta Servidor HTTP retorna uma Resposta. Contém um Código de Status 200 = OK 302 = Redirecionamento 403 = Não autorizado 404 = Não encontrado etc... 40

41 Resposta HTTP/ OK Cache-Control: private, max-age=0 Date: Sun, 27 Jul :47:50 GMT Expires: -1 Content-Type: text/html; charset=utf-8 Content-Length: 2739 <html><head><meta http-equiv="content-type" content= "text/html; charset=utf-8"><title>google</title><sty le>body,td,a,p,.h{font-family:arial,sans-serif}.h{co lor:#3366cc}.q{color:#00c}.ts td{padding:0}.ts{borde r-collapse:collapse}.lnc:link,.lnc:visited{color:#00 c}.pgtab,.pgtab:hover,.pgtabselected,.pgtabside{text -align:center;text-decoration:none;color:#00c;displa y:block;height:27px;float:left;overflow:hidden;backg round:url(/intl/ja/images/productlinktabs.png) no-re (...) 41

42 42

43 Ferramentas Básicas Editor HTML/CSS Adobe Dreamweaver Microsoft Expression Web Editor de Texto Simples (Bloco de Notas) Software Gráfico The GIMP Adobe Photoshop Corel Photo-Paint 43

44 Ferramentas Básicas Navegadores Firefox Internet Explorer Opera Safari FTP (Transferência de Arquivos) Integrado à maiora dos editores de grande porte CuteFTP Filezilla 44

45 Considerações... A World Wide Web hoje é o serviço mais popular da Internet atende às mais diversas necessidades de milhões de pessoas diariamente Sites devem ser bem projetados para terem sucesso... Domínio de tecnologias padronizadas auxiliam ao desenvolvimento de sites bem projetados! 45

Documentos relacionados

Aplicativos para Internet Aula 01

Aplicativos para Internet Aula 01 Arquitetura cliente/servidor Introdução ao HTML, CSS e JavaScript Prof. Erika Miranda Universidade de Mogi das Cruzes Uso da Internet http://www.ibope.com.br/pt-br/noticias/paginas/world-wide-web-ou-www-completa-22-anos-nesta-terca-feira.aspx