Upload
athena-thompson
View
38
Download
2
Embed Size (px)
DESCRIPTION
Programação para Internet. PLANO DE ENSINO Prof. Francisco Olivar Junior. www.franciscoolivar.com. - PowerPoint PPT Presentation
Citation preview
Ementa
A arquitetura da web: navegadores; servidores de paginas e de aplicações; protocolos de comunicação. Construção de aplicações para a web: uso de linguagem de programação web; prototipação de sistemas; utilização do padrão W3C e de outros padrões de projeto; persistência de dados; instalação da aplicação. Ferramentas para o desenvolvimento de aplicações na web.
Objetivos
Realizar a representação esquemática de páginas web. Desenvolvimento de páginas para internet com uso de linguagem de marcação (X)HTML e folhas de estilo CSS. Implementação de sites de acordo com os padrões web propostos pelo W3C. Linguagem de Programação PHP com Banco de dados Mysql, AJAX.
Conteúdo Programático
UNIDADE I - A Internet (Histórico, Fundamentos e Conceitos) - Aspectos Tecnológicos - Linguagem HTML - Servidor de Páginas WWW - Linguagem de Script - Instalação e Configuração dos softwares necessários UNIDADE II - Introdução ao PHP - Formato Básico de um programa PHP - Tipos de Dados - Operadores Aritméticos, Lógicos, Atribuição e Comparação
Conteúdo Programático
- Estrutura de Controle Repetitiva - Estrutura de Controle Condicional - Entrada de Dados: Formulários HTML - Manipulação de Vetores - Java Script - AJAX - CSS - CMS UNIDADE III - Funções - Funções Parametrizadas - Classes
Conteúdo Programático
UNIDADE IV - Banco de Dados para Web - Manipulação de Banco de Dados Relacionais - Conectando o PHP com Banco de Dados - Executando comandos SQL - Exibindo o resultado de uma Consulta SQL - Manipulando Dados através de Formulários - Gerenciamento de Usuários UNIDADE V - Autenticação de Usuários - Autenticação Realizada pelo Servidor - Autenticação de Cookies - Manipulação de Sessões
Conteúdo Programático
UNIDADE VI - Projetando uma Página WEB - Desenvolvimento de Aplicações WEB - Definição de um Sistema para Internet - Desenvolvimento do Sistema
Avaliação
1 SEMESTRE 1 PROVA ESCRITA = 7,5 PTS 1 TRABALHOS (SEMINÁRIO) = 1,5 PTS PARTICIPAÇÃO * = 1,0 PTS TOTAL GERAL = 10,0 PTS 2 SEMESTRE 1 PROVA ESCRITA = 5,0 PTS 1 TRABALHOS (SEMINÁRIO) = 2,0 PTS PARTICIPAÇÃO * = 0,5 PTS TOTAL = 7,5 PTS AVALIAÇÃO INTEGRADA = 2,5 PTS TOTAL GERAL = 10,0 PTS *Participação (Freqüência, Entrega de exercícios e Post Blog) DATAS 1ª AI - 29/03/2012 2ª AI - 31/05/2012
Trabalhos
DEFINIÇÃO
1 - Sistemas de Gerenciamento de Conteúdo (CMS -Content Management System)
Seminário em Grupo: Joomla, wordpress, drupal e Concret5 DATA DE ENTREGA: 08/03/2012
2 - Projeto e Sistema WEB Utilizando PHP e MySQL
- Individual
DATA DE ENTREGA: 14/06/2012
Trabalhos
FORMAÇÃO DOS GRUPOS
Sistemas de Gerenciamento de Conteúdo (CMS -Content Management System)
DATA DE ENTREGA: 08/03/2012
DETALHES SITE: www.franciscoolivar.com
Bibliografia
BÁSICA DAVIS, M. E.; PHILLIPS, J. A. Aprendendo PHP e MYSQL. Rio de Janeiro: Alta Books, 2008. GOODMAN, Danny. Javascript: A Bíblia. Rio de Janeiro: Campus, 2001.LIBERTY, Jesse. Aprendendo a desenvolver documentos XML para Web. São Paulo: Makron Books, 2001. .Bibliografia Complementar: YNEMINE, Silvana Tauhata. Conhecendo o Javascript. Florianópolis: Visual Books, 2005.
Teste 1
• 1) O que é Internet?• 2) Quais os Principais serviços da Internet?• 3) O que é HTML?• 4) Cite 3 Liguagem WEB? • 5) O que é um BackBone?
• OBS: Não utilizar ferramentas de busca
•O que é a Internet?É uma rede mundial de computadores ligados entre si através de redes telefônicas, ligações por satélite e fibras ópticas.
INTERNATIONAL NETWORK
INTERNET
Internet
•Para que serve?
Serve para procurar e trocar conteúdos (informação) com carácter profissional ou apenas entretenimento (Jogos, Redes Sociais, etc)
Internet
•De que necessitamos para estabelecer uma ligação à Internet?
▫Computador▫Modem▫Linha telefónica normal, linha RDIS, ligação
por cabo ou ADSL▫Conta de acesso a um fornecedor de serviços
Internet – ISP (Telepac, Clix, Sapo, Via.Net.Works, Oninet, IOL, Netcabo)
▫Software (que permite o reconhecimento do modem e da ligação do computador à Internet e outros, como um browser, etc.)
Internet
1959 - DARPA
1966 - ARPANET
1988 – BITNET – no Brasil
1990 – Mosaic (WWW – World Wide Web)
1995 - RENPAC
2005 – WEB 2.0
2011 – RUMORES DA WEB 3.0
Histórico da Internet
1957 – TIME-SHARING
IP – Internet Protocol – Número do Computador na rede
Domínio – Ex: www.globo.com
Modem – Modulador/Demodulador
Backbone – Espinha dorsal da Internet, são Cabos de Fibras Ópticas de alta Velocidade que interligam redes menores;
Provedor – Computador que dar acesso a Internet
Site – Página na Internet
Conceitos
E-mail (ex: [email protected])
HTTP – Hiper Text Transfer Protocol
FTP – File Transfer Protocol (Download)
Chat – Bate-Papo (Skype, MSN)
Fórum e Blogs
Comércio Eletrônico
Ex: www.franciscoolivar.com
Ensino a Distância
Pesquisa (Busca) – Google, Bing, Yahoo, etc.
Serviços
Redes Sociais, Vídeos e Jogos
HTML é um acrônimo para Hyper Text Markup Language.
Linguagem que permite apresentar informações na internet.
Foi criada em 1991 pelo inglês Tim Berners-Lee, para interligar computadores de um laboratório a outro, exibindo documentos científicos de forma simples e fácil.
Linguagem “Client Side”
Softwares necessários para a utilização do HTML:Visualização Criação
HTML
• Hiper Text Mark-up Language: Linguagem de Marcação de Hiper Texto;
• Linguagem de marcação: Linguagem que combina texto, com informação extra sobre o texto, informação esta, representada por simbolos ou palavras chaves diferentes. (ex: XML)
• Hipertexto: texto multidimensional em que numa pagina, trechos de texto se intercalam com referencias para outros paginas
HTML
•É a linguagem padrão na WEB.•Existem varias linguagens na WEB, que
podem ser usada em separado ou combinadas com HTML.
HTML
• Browser/Navegador: Abre um determinado arquivo, e se o arquivo conter códigos html, interpreta-os. (IE, Mozzila, Netscape)
• Extensões: .htm ou .html• Editores: Programa usado para criar códigos
HTML. ▫ Editores tipo texto: Notepad –Somente código fonte ▫ WYSIWYG ( What you see is what you get) -
DreamWeaver, FrontPage, Homesite – Mostram código fonte e visualizam a página
HTML
•Documento HTML▫Indica ao browser que contém conteúdo HTML▫<html> </html>
•Cabeça▫Atributos principais do documento▫<head> </head>
•Corpo▫Todo segmento de código que será mostrado
no browser.▫<body> </body>
HTML
Primeira Página
<html><head>
<title>FIT – Programação Web</title></head><body>
Alô Mundo!</body>
</html>
HTML
Etiquetas de marcação - Tags•Aparecem em sinais de < e >•São usadas aos pares. Uma de inicio e
outra de fim precedida por /.•Definem a estrutura da página, a ser
apresentada no browser.▫Tabelas, listas...
• Indicam a formatação do texto inserido no documento a apresentado graficamente. ▫Tamanho das letras, cores...
•<b>Texto</b>•Existem tags sem etiqueta de fecho: br, p
HTML
Elementos
•Estrutura semântica constituída por etiqueta de abertura, conteúdo e etiqueta de fecho.
HTML
Elementos•Servem para definir uma propriedade de
um elemento•Localizam-se na etiqueta de abertura após
o nome do elemento•Composto por nome do atributo =
“valor do atributo”
HTML
Cabeçalho – Head
<html><head>
<title>FIT – Programação Web</title></head><body>
A minha primeira página</body>
</html>
HTML
Cabeçalho - Head•Contém informações de caracter geral.•Os elementos contidos no head não serão
exibidos na tela do browser.▫<base> - URL comum para todas as
ligações da página▫<link> Referencia a um recurso externo▫<title> - Título da página ▫<meta> - informações relativas ao
conteúdo da página
HTML
Título da Página
•Todo documento deve possuir um título•Deve estar dentro do cabeçalho - head•Será exibido no topo do browser
▫<title> Conselho Municipal </title>
HTML
Corpo - Body
•Tudo o estiver nessa secção será visualizado no browser.
•Pode conter cabeçalhos, parágrafos, listas, tabelas, links, formulários, animações..
HTML
Cabeçalho
•São usados para títulos e subtítulos•Existem em 6 níveis: 1 a 6•Quanto menor o nível maior o destaque. •<H1> Meu título</H1>•<H1,2,3..6> </H1,2,3...6>
HTML
Parágrafo, Quebra de Linha
•<p> É usada para definir o início de um parágrafo, criando uma linha em branco entre os parágrafos. ▫Permite também o alinhamento de parágrafos
. <p align=“Left”> - Center, Right, Justify.
•<br> Usado para quebrar uma linha sem necessariamente criar um parágrafo. (Quebra Linhas);
HTML
Parágrafos: Divisão
•<div>•Permite alinhar horizontalmente qualquer
elemento dentro da página. •Posição: center, left, right<div align=“center”>
Alinhado a esquerda</div>
HTML
Comentários• Servem essencialmente para explicar certos
segmentos de código ao programador.• Serão automaticamente ignorados pelo browser.• Inicia com o ponto final
▫<!-- Este é o comentário -->
HTML
Elementos Básicos•<html> - Instruções para página HTML•<title> - define o título da página•<body> - Contém o corpo da página•<h1>..<h6> - Define o cabeçalho dos
textos•<p> - define os parágrafos•<br> - Divide a linha em duas - •<!-- --> - Permite inserir comentários•<HR> - Linha Horizontal
HTML
Cor de Fundo• Código RGB(Decimal) (Red, Green, Blue) –
bgcolor=“rgb(10,21,22)” • cor hexadecimal – bgcolor=“#000000” • Nome da cor - bgcolor=“red”• Atributo bgcolor, ao nível da etiqueta body.
<body bgcolor=“#FFFCCC”>Teste da cor de fundo
</body>
HTML
Cor: Decimal e Hexadecimal• Definem a quantidade de vermelho, verde e azul
que entram na composição de uma determinada cor
• rgb(0,123,200) - Variam de 0 a 255• “#000000” – Variam de 00 a FF• Preto rgb(0,0,0) ou #000000• Branco rgb(255,255,255) ou #FFFFFF
HTML