Programação para Internet

PLANO DE ENSINOProf. Francisco Olivar Junior

www.franciscoolivar.com

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. 

Introdução a Programação para WEB

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 – Redes Militares Utilizavam Protocolos TCP

Histórico da 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: franciscoolivar@gmail.com)

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

Exemplo de Código

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

Tabela de Cores

Exercício

• Abra um editor de Texto e Escreva o Código HTML para a Página WEB abaixo:

Exercício

Faça o HTML do Site abaixo:

F I MOBRIGADO

!