Programação para Internet

1. Programação para Internet PLANO DE ENSINO Prof. Francisco Olivar Junior www.franciscoolivar.com

2. 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. Ementa

3. 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. Objetivos

4. 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

5. - 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

6. 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

7. UNIDADE VI - Projetando uma Página WEB - Desenvolvimento de Aplicações WEB - Definição de um Sistema para Internet - Desenvolvimento do Sistema Conteúdo Programático

8. 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 Avaliação

9. 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

10. FORMAÇÃO DOS GRUPOS • Sistemas de Gerenciamento de Conteúdo • (CMS -Content Management System) Trabalhos DATA DE ENTREGA: 08/03/2012 DETALHES SITE: www.franciscoolivar.com

11. 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. Bibliografia

12. Introdução a Programação para WEB

13. Teste 1 • 1) O que é Internet? • 2) QuaisosPrincipaisserviçosda Internet? • 3) O que é HTML? • 4) Cite 3 Liguagem WEB? • 5) O que é um BackBone? • OBS: Nãoutilizarferramentas de busca

15. Internet • 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. NETWORK INTERNATIONAL INTERNET

16. Internet • Para que serve? Serve para procurar e trocar conteúdos (informação) com carácter profissional ou apenas entretenimento (Jogos, Redes Sociais, etc)

17. 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.)

18. Histórico da Internet 1959 – Redes Militares Utilizavam Protocolos TCP

19. Histórico da Internet 1957 – TIME-SHARING 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

20. Conceitos Backbone– Espinha dorsal da Internet, são Cabos de Fibras Ópticas de alta Velocidade que interligam redes menores; IP – Internet Protocol – Número do Computador na rede Provedor – Computador que dar acesso a Internet Domínio – Ex: www.globo.com Modem – Modulador/Demodulador Site – Página na Internet

23. Serviços E-mail (ex: franciscoolivar@gmail.com) HTTP – Hiper TextTransferProtocol Ex: www.franciscoolivar.com Pesquisa (Busca) – Google, Bing, Yahoo, etc. FTP – File TransferProtocol (Download) Chat – Bate-Papo (Skype, MSN) Fórum e Blogs Comércio Eletrônico Ensino a Distância Redes Sociais, Vídeos e Jogos

24. HTML HTML é um acrônimo para HyperText 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 “ClientSide” Softwares necessários para a utilização do HTML: Visualização Criação

25. HTML Exemplo de Código

26. 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

27. HTML • É a linguagem padrão na WEB. • Existem varias linguagens na WEB, que podem ser usada em separado ou combinadas com HTML.

28. 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

29. 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>

30. HTML Primeira Página <html> <head> <title>FIT– Programação Web</title> </head> <body> Alô Mundo! </body> </html>

31. 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

32. HTML Elementos • Estrutura semântica constituída por etiqueta de abertura, conteúdo e etiqueta de fecho.

33. 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”

34. HTML Cabeçalho – Head <html> <head> <title>FIT – Programação Web</title> </head> <body> A minha primeira página </body> </html>

35. 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

36. 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>

37. 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..

38. 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>

39. 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);

40. 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>

41. 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 -->

42. 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

43. 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>

44. 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

45. Tabela de Cores

46. Abra um editor de Texto e Escreva o Código HTML para a Página WEB abaixo: Exercício

47. Faça o HTML do Site abaixo: Exercício

48. F I MOBRIGADO !