14
1 Programação e Designer para WEB Introdução Prof. Rodrigo Rocha [email protected] Apresentação Prof. Rodrigo Rocha – [email protected] Ementa Introdução a hipertexto. A linguagem HTML. Ambientes para programação em HTML. Linguagem de Programação PHP. Conceitos de usabilidade e usabilidade para Web.

Programação e Designer para WEB - bolinhabolinha.com · “Entrega” páginas para o web browser do cliente “Hospeda domínios” • Página estáticas: html • Páginas dinâmicas

  • Upload
    lydung

  • View
    230

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Programação e Designer para WEB - bolinhabolinha.com · “Entrega” páginas para o web browser do cliente “Hospeda domínios” • Página estáticas: html • Páginas dinâmicas

1

Programação e Designer para WEBIntrodução

Prof. Rodrigo [email protected]

Apresentação Prof. Rodrigo Rocha – [email protected]

Ementa• Introdução a hipertexto. • A linguagem HTML. • Ambientes para programação em HTML. • Linguagem de Programação PHP. • Conceitos de usabilidade e usabilidade para Web.

Page 2: Programação e Designer para WEB - bolinhabolinha.com · “Entrega” páginas para o web browser do cliente “Hospeda domínios” • Página estáticas: html • Páginas dinâmicas

2

Bibliografia Livro texto

• NIEDERAUER, Juliano. Desenvolvendo Websites com PHP : Aprenda a criar Websites dinâmicos e interarativos. 2ª ed. São

• Paulo: Novatec, 2004.

Básica• MELO, Alexandre Altair De. PHP profissional : aprenda a

desenvolver sistemas profissionais orientados a objetos compadrões de projeto. 1ª ed. São Paulo: Novatec, 2008.

• BUDD, Andy; MOLL, Cameron; COLLISON, Simon. Criando Páginas Web com CSS : Soluções avançadas para padrões WEB. 1ª ed. São Paulo: Pearson Education, 2007.

Metodologia e Avaliação Metodologia

• Aula expositiva• Dinâmicas de grupo• Debates• Exercício em classe• Laboratório

Avaliação• 40%

Atividades (3,0)Avaliação (7,0)

• 60%Atividades (3,0)Avaliação Oficial (7,0)

Page 3: Programação e Designer para WEB - bolinhabolinha.com · “Entrega” páginas para o web browser do cliente “Hospeda domínios” • Página estáticas: html • Páginas dinâmicas

3

Cronograma

Por Que????? Por que estudar programação para WEB?

Page 4: Programação e Designer para WEB - bolinhabolinha.com · “Entrega” páginas para o web browser do cliente “Hospeda domínios” • Página estáticas: html • Páginas dinâmicas

4

A era da informação Mundo que muda rapidamente

• Especialmente na área da tecnologia da informação e computação

Agricultura• Passado: 100 acres para produção agrícola• Hoje: 1 acre (otimização e desempenho)

1950 – inicio da era da informação• Desenvolvimento do computador

1990 – popularização dos computadores• Internet

Ambiente WEB História

• 1960. Rand CorporationPesquisa patrocinada pela força aéra americanaComo desenvolver uma rede de comunicação distribuída

– Robusta– Consiga sobreviver a um ataque nuclear

• ARPANETAgência do departamento de defesa americano 4 pontos de comunicação entre faculdades amercianasPercursor da internet

• Transmission Control Protocol/Internet Protocol (TCP/IP)Conjunto de protocolos de comunicaçãoConectar redes separadas em uma grande rede Inicialmente somente serviços básicos

– Correio eletrônico, transferência de arquivos e login remoto

Page 5: Programação e Designer para WEB - bolinhabolinha.com · “Entrega” páginas para o web browser do cliente “Hospeda domínios” • Página estáticas: html • Páginas dinâmicas

5

Quem são seus usuários?

Quem são seus usuários?

Page 6: Programação e Designer para WEB - bolinhabolinha.com · “Entrega” páginas para o web browser do cliente “Hospeda domínios” • Página estáticas: html • Páginas dinâmicas

6

Será que existe algum tipo de programação ?

WebServer Smtp DNS Servidor de Arquivos Firewall Scripts WebServices WebMail Intranet Extranet

Definindo alguns termos Endereço IP

• Endereço lógico que referência uma máquina no protocolo TCP/IP WebBrowser

• Navegador (“lê” páginas em html)• Navegadores antigos (http://browsers.evolt.org/)

WebServer• Servidor que mantém as páginas hospedadas• Possui um serviço que roda na porta 80. Ex: Apache, IIS, TomCat

HTTP• Protocolo de transferência de hipertexto

FTP• Serviço de transferência de arquivos

DNS• Tradução de Nomes em endereço IP

SMTP e POP• Protocolos de transferência de mensagens (e-mail)

Page 7: Programação e Designer para WEB - bolinhabolinha.com · “Entrega” páginas para o web browser do cliente “Hospeda domínios” • Página estáticas: html • Páginas dinâmicas

7

Ambiente WEB “estático” Servidor

• IIS• Apache

Cliente• Browser

IE FireFox

Ambiente Web “Dinâmico” Servidor Web Cliente

• Navegadores

Servidores de BD

Page 8: Programação e Designer para WEB - bolinhabolinha.com · “Entrega” páginas para o web browser do cliente “Hospeda domínios” • Página estáticas: html • Páginas dinâmicas

8

“Aparelhinhos” interessantes

O menor servidor Web do mundohttp://www-ccs.cs.umass.edu/~shri/iPic.html

Porta retratos IPhttp://www.ceiva.com/

Tostadeira habilitada para a Web +Previsão do tempohttp://dancing-man.com/robin/toasty/

fonte: www.nuperc.unifacs.br/suruagy/redes

Geladeira com acesso a internethttp://www.lge.com

Segurança Ataques a aplicativos web . Fonte: http://www.milw0rm.com

Page 9: Programação e Designer para WEB - bolinhabolinha.com · “Entrega” páginas para o web browser do cliente “Hospeda domínios” • Página estáticas: html • Páginas dinâmicas

9

E a questão de segurança Seu firewall cuida dos problemas na

programação das aplicações web?

World Wide Web História

• 1991, Berners Lee (Cern) e colaboradoresIntroduziu o conceito de WWWAjudaram na adoção de padrões da webHypertext Transfer Protocol (HTTP) Hypertext Markup Language (HTML) Universal Resource Locator (URL)

Definição• sistema de hipertexto gráfico que roda sobre a

Internet, e éGlobal, interativo, dinâmico, mutiplataforma, distribuído

(Lymay; Colburn, 2006)

Page 10: Programação e Designer para WEB - bolinhabolinha.com · “Entrega” páginas para o web browser do cliente “Hospeda domínios” • Página estáticas: html • Páginas dinâmicas

10

Sistema de Hypertexto “Permite a você ler e navegar por texto e

informações visuais de uma maneira não linear”• Pular de um ponto a outro• Obter mais informações• Voltar• Navegar entre tópicos

Navegação através de hyperlinks (links)

Gráfico e fácil de navegar Passado

• “navegadores” via DOS• MOSAIC

Primeiros navegadores gráficos

Histórico siteshttp://archive.org

Page 11: Programação e Designer para WEB - bolinhabolinha.com · “Entrega” páginas para o web browser do cliente “Hospeda domínios” • Página estáticas: html • Páginas dinâmicas

11

Multi-plataforma Não importa a arquitetura do computador Acesso via “qualquer dispositivo”

Distribuído Não tem um servidor de arquivos central Todos os dados são armazenados em inúmeros hosts

espalhados pela Internet Cada hosts possui uma identificação (IP) ou nome (DNS)

Page 12: Programação e Designer para WEB - bolinhabolinha.com · “Entrega” páginas para o web browser do cliente “Hospeda domínios” • Página estáticas: html • Páginas dinâmicas

12

Dinâmico Conteúdo muda a todo momento

• Help desk• Mecanismos de pesquisas• Sites de notícias, relacionamentos, etc..

Interativo Ter uma resposta a sua ação. Exemplos:

• Navegação• Chats• Educação a distância• Voz sobre IP

Page 13: Programação e Designer para WEB - bolinhabolinha.com · “Entrega” páginas para o web browser do cliente “Hospeda domínios” • Página estáticas: html • Páginas dinâmicas

13

WebServer Software que responde a requisições HTTP “Entrega” páginas para o web browser do

cliente “Hospeda domínios”

• Página estáticas: html• Páginas dinâmicas

Exemplos:• Internet Information Server IIS• Apache• Apache TomCat

Exercícios Estime a quantidade de dispositivos

“diferentes” que poderão surgir nos próximos anos e suas funcionalidades.

Page 14: Programação e Designer para WEB - bolinhabolinha.com · “Entrega” páginas para o web browser do cliente “Hospeda domínios” • Página estáticas: html • Páginas dinâmicas

14

Processo de registro de um domínio Registrar o nome do domínio

• Nacional http://www.registro.br

• Internacional Várias empresas são credenciadas (http://www.internic.com/alpha.html)

2 servidores de DNS• Traduzem o nome www.seila.com para um endereço IP 200.200.20.1

• Consultando servidores DNS nslookup www.seila.com.br nslookup –type=NS

Consultando a página• GET http://a.b.c/HTTP/1.1 <enter>• Host: a.b.c <enter>• Connection: close <enter>