programação e designer para web - bolinhabolinha.com · “entrega” páginas para o web browser...
TRANSCRIPT
![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](https://reader033.vdocuments.net/reader033/viewer/2022052715/5c05667809d3f2183a8d48a3/html5/thumbnails/1.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052715/5c05667809d3f2183a8d48a3/html5/thumbnails/2.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052715/5c05667809d3f2183a8d48a3/html5/thumbnails/3.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052715/5c05667809d3f2183a8d48a3/html5/thumbnails/4.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052715/5c05667809d3f2183a8d48a3/html5/thumbnails/5.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052715/5c05667809d3f2183a8d48a3/html5/thumbnails/6.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052715/5c05667809d3f2183a8d48a3/html5/thumbnails/7.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052715/5c05667809d3f2183a8d48a3/html5/thumbnails/8.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052715/5c05667809d3f2183a8d48a3/html5/thumbnails/9.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052715/5c05667809d3f2183a8d48a3/html5/thumbnails/10.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052715/5c05667809d3f2183a8d48a3/html5/thumbnails/11.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052715/5c05667809d3f2183a8d48a3/html5/thumbnails/12.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052715/5c05667809d3f2183a8d48a3/html5/thumbnails/13.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022052715/5c05667809d3f2183a8d48a3/html5/thumbnails/14.jpg)
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>