LINGUAGENSDEPROGRAMAÇÃO PARAAINTERNET. GivailsondeSouzaNeves

Transcrição

1 LINGUAGENSDEPROGRAMAÇÃO PARAAINTERNET GivailsondeSouzaNeves INFORMAÇÃOECOMUNICAÇÃO

2

3 Autor Givailson de Souza Neves Revisão NT Editora e Figuramundo Projeto Gráfico NT Editora Editoração Eletrônica NT Editora e Figuramundo Capa NT Editora NT Educação, uma empresa do Grupo NT SCS Q2 - Bl. D - Salas 307 e Ed. Oscar Niemeyer CEP Brasília - DF Fone: (61) sac@grupont.com.br e Linguagens de Programação para Internet. / NT Editora. -- Brasília: p. : il. ; 21,0 X 29,7 cm. ISBN Linguagens de Programação para a Internet Conceitos. Copyright 2014 por NT Editora. Nenhuma parte desta publicação poderá ser reproduzida por qualquer modo ou meio, seja eletrônico, fotográfico, mecânico ou outros, sem autorização prévia e escrita da NT Editora.

4 LEGENDA ÍCONES Prezado(a) aluno(a), Ao longo dos seus estudos, você encontrará alguns ícones na coluna lateral do material didático. A presença desses ícones o(a) ajudará a compreender melhor o conteúdo abordado e também como fazer os exercícios propostos. Conheça os ícones logo abaixo: Saiba Mais Esse ícone apontará para informações complementares sobre o assunto que você está estudando. Serão curiosidades, temas afins ou exemplos do cotidiano que o ajudarão a fixar o conteúdo estudado. Importante O conteúdo indicado com esse ícone tem bastante importância para seus estudos. Leia com atenção e, tendo dúvida, pergunte ao seu tutor. Dicas Esse ícone apresenta dicas de estudo. Exercícios Toda vez que você vir o ícone de exercícios, responda às questões propostas. Exercícios Ao final das lições, você deverá responder aos exercícios no seu livro. Bons estudos!

5 Sumário 1. INTRODUÇÃO À WEB A Web é um sistema hipertexto/hipermídia A Web Os navegadores Linguagem HTML Partes de um documento HTML A especificação XHTML Páginas estáticas x páginas dinâmicas PÁGINAS DINÂMICAS E PRINCÍPIOS DE PROGRAMAÇÃO Conceito de páginas dinâmicas Diferenças entre páginas dinâmicas e estáticas Páginas dinâmicas de cliente Páginas dinâmicas de servidor Alguns aspectos práticos sobre programação para a Web Conceitos básicos de programação I Conceitos básicos de programação II LINGUAGENS WEB DE CLIENTES Introdução a linguagens do lado cliente O que é Javascript? O que é DHTML O que é CSS? O que são os Applets de Java? ActionScript x Silverlight x JavaFX NT Editora

6 4. LINGUAGENS WEB DE SERVIDOR Linguagens de lado servidor O que é CGI? O que é Perl? O que são ASP e ASP.NET? O que é PHP? O que é JSP? O que são Frameworks? O que é Ruby on Rails? INTRODUÇÃO AO XML O que é XML? História do XML Sintaxe do XML Tecnologias relacionadas ao XML Entendendo o Ajax Linguagens de Programação para Internet 5

7

8 1. INTRODUÇÃO À WEB A Web se enquadra dentro da Internet e é um dos muitos serviços prestados pela rede. Entre esses serviços, podemos encontrar: A Internet é um conglomerado de redes em escala mundial de milhões de computadores interligados pelo TCP/IP que permite o acesso a informações e todo tipo de transferência de dados. Ela carrega uma ampla variedade de recursos e serviços, incluindo os documentos interligados por meio de hiperligações da World Wide Web, e a infraestrutura para suportar correio eletrônico e serviços como comunicação instantânea e compartilhamento de arquivos. 1.1 A Web é um sistema hipertexto/hipermídia A Web é construída com base em um sistema chamado hipertexto que é, na verdade, um agrupamento de páginas conectadas por links. Os sistemas de hipertexto são utilizados em outros contextos além da Web, como por exemplo, a documentação de uma linguagem de programação. São sistemas de fácil manuseio, visto que seu acesso é feito por meio de links, que podem ser facilmente acessados com o clique do mouse e permitem uma maior dinamicidade na navegação do conteúdo. Linguagens de Programação para Internet 7

9 Javadoc da Sun em modo on-line. A Web não se limita a apresentar apenas textos e links. Ela também pode nos oferecer imagens, vídeos, áudio e vários outros tipos de apresentações. Com isso, torna-se o serviço mais rico em meios da Internet. Por essa razão, para fazer referência ao sistema que implementa a Web (hipertexto), foi criado um novo termo: hipermídia. Esse termo faz referência à possibilidade de usar recursos multimídias da Web. 1.2 A Web 2.0 Muitos especialistas afirmam que o conceito de Web 2.0 não está bem definido e não possui muito fundamento para existir, dentre estes está o criador da Web, Tim Berners-Lee. Os defensores desse conceito tentam justificá-lo como sendo uma nova maneira de explorar ainda mais os recursos da Web. A seguir, conheceremos mais dessa nova fase da Web que é tão difundida entre os desenvolvedores e programadores de hoje. 8 NT Editora

10 Mas, afinal, o que é Web 2.0? Este termo web 2.0 foi criado pela empresa O Reilly Media, sediada nos Estados Unidos, e serve para designar um novo conceito no uso da Internet. No qual o usuário possui uma gama maior de recursos, tais como redes sociais e serviços que permitem ao mesmo interagir com o resto do mundo, formando o que eles chamam de inteligência coletiva no uso da Internet. Muitos especialistas, dentre eles o próprio Tim Berners-Lee, apontam que este conceito é fraco, pois não há oficialmente nada de novo nas tecnologias utilizadas para a criação desta nova fase da Web. Segue abaixo a definição do próprio Tim O Reilly sobre a Web 2.0. Web 2.0 é a mudança para uma Internet como plataforma, e um entendimento das regras para obter sucesso nesta nova plataforma. Entre outras, a regra mais importante é desenvolver aplicativos que aproveitem os efeitos de rede para se tornarem melhores quanto mais são usados pelas pessoas, aproveitando a inteligência coletiva Tim O Reilly Na área da programação para a Web 2.0, o que está em alta são os softwares que demonstram interações similares às aplicações desktop. Entre as características mais utilizadas nesta maneira de desenvolver páginas e sítios para Web podemos destacar: Resposta aparentemente imediata, sem a necessidade do carregamento de outra página para que o resultado seja apresentado ao usuário. Permitir que o sistema (página) execute tarefas sem que para isso o usuário seja privado de uma interação com o sistema. Exemplo: anexar arquivo (tarefa do sistema) enquanto se digita o (tarefa do usuário). Para melhor exemplificar estas funcionalidades, vamos enumerar os procedimentos necessários para que um com anexo seja enviado. No primeiro exemplo iremos demonstrar o envio sem os recursos acima apresentados. No segundo, faremos uso dos recursos e em ambos os casos iremos delimitar os procedimentos necessários e qual é a sensação do usuário quanto a estes passos. Para simplificar o processo, tenha em mente que o usuário já está com a sua página de s aberta e acabou de efetuar o procedimento necessário para a criação de um novo . Exemplo 1 (Envio de com anexo pelo conceito Web 1.0). Usuário Solicita que um arquivo seja anexado Indica local onde está o arquivo a ser anexado Aguarda até que o arquivo esteja corretamente carregado Finaliza janela responsável por criar os anexos Preenche os campos assunto, destinatário e texto do . Seleciona a opção enviar Sistema web Exibe página que permita ao usuário anexar um novo arquivo Inicia o carregamento do arquivo e exibe tela de carregamento Exibe informação de que o arquivo está corretamente carregado Retorna o usuário para a janela de criação de Exibe tela de envio correto Linguagens de Programação para Internet 9

11 Exemplo 2 (Envio de com anexo pelo conceito Web 2.0). Usuário Sistema web 2.0 Indica local onde está o arquivo a ser anexado Preenche os campos assunto, destinatário e texto do . Seleciona a opção enviar Inicia o carregamento do arquivo e permite ao usuário continuar escrevendo o seu , sem que uma nova página seja carregada Verifica se o arquivo já está anexado, caso não, solicita que o usuário aguarde até que este esteja pronto. Após isso, exibe tela de envio correto Note que no primeiro caso o usuário corre o risco de ficar muito tempo ocioso, aguardando que seu arquivo seja anexado. Já no segundo caso, o sistema não muda de tela nem necessita que o carregamento seja concluído para que o usuário retome a edição do seu texto, sendo apenas necessário que o carregamento do anexo seja concluído antes do envio do . É muito importante entender que a maneira como os servidores trabalham e o modo de trafegar as informações não mudaram para o surgimento da Web 2.0. O que na verdade está acontecendo é que os recursos do computador do usuário e os da Web foram utilizados em um nível que o usuário não perceba diretamente as tarefas que estão sendo realizadas. Isso proporciona uma maneira mais inteligente no uso da Web, onde o desperdício de tempo e recursos, seja do usuário ou do potencial de sua máquina, estão sendo reduzidos ao máximo. Isso garante uma maior produtividade nas atividades cotidianas dos usuários da Web. Várias tecnologias precisam ser unidas no intuito de alcançar este objetivo. Vale ressaltar que muitas dessas tecnologias já eram utilizadas antes do conceito oficial de Web 2.0, a exemplo das gigantes: Microsoft, Google e Yahoo que já utilizam estes recursos há muito tempo. Iremos destacar o Ajax (acrônimo em língua inglesa para Asynchronous Javascript And XML, que em português significa Assíncrono javascript e xml) que é muito utilizado hoje em dia na criação de aplicações Web 2.0, mas este momento somente ocorrerá quando já existir um claro entendimento das tecnologias embarcadas no Ajax, tais como javascript e XML. Os exemplos mais visuais do conceito de Web 2.0 podem ser vistos no Gmail (Google), Orkut (Google), Windows Live (Microsoft), YouTube (Google), Twitter (Jack Dorsey, Biz Stone, e Evan Williams em março de 2006). As RIAs Outro conceito que tem tido grande foco no desenvolvimento da Web 2.0 e o de Aplicações de Internet rica (da sigla em inglês RIA Rich Internet Application). Esta tecnologia tem o foco em deixar as aplicações da Internet mais parecidas com as aplicações desktop. 10 NT Editora

12 Uma maneira prática de entender esta diferença é perceber que as interações realizadas em um software desktop são prontamente atendidas enquanto na Web, antes do conceito e práticas 2.0, o usuário era obrigado a aguardar o carregamento da página de resposta. As aplicações desenvolvidas sobre o conceito de RIA podem até parecer, à primeira vista, um software comum de desktop, mas a sua maior vantagem está no fato de buscar informações em um servidor que pode estar localizado em qualquer outro país do mundo. Muitas empresas têm investido em tecnologias que permitam que os softwares não só trabalhem como aplicações desktop, mas também pareçam com estas. É o caso da Adobe, por exemplo, que comercializa tecnologias como o Flash e o Air. Existem ainda as emergentes que estão disponibilizando tecnologias para o mesmo propósito, são os casos da Sun Micro Systems com o Java FX e da Microsoft com o Silverlight. 1.3 Os navegadores O navegador, Browser em inglês, é a principal ferramenta de acesso ao conteúdo Web. É por meio dele que inúmeros serviços e recursos são acessados pelos usuários da Web. Os navegadores são programas especializados no acesso ao conteúdo Web, o qual é feito por meio das chamadas URL s. Estes possuem nativamente a capacidade de acessar vários formatos de informação, como por exemplo, as codificações HTML, XML, XHTML, entre outras, e com o auxílio de plug-ins específicos, tais como flash player (Adobe) e a jre (Sun Microsystems), são capazes de realizar as mais diversas interações com o usuário. URL (de Uniform Resource Locator), em português Localizador de Recursos Universal. É a maneira padrão de localização de recursos de rede, seja ela tão vasta quanto à Internet ou apenas uma rede local. Funciona basicamente como um endereço de uma casa que se deseja encontrar. Plug-ins são mini programas que em combinação com o navegador permitem a execução de conteúdo diverso. Sem um plug-in de vídeo adequado, por exemplo, não é possível a execução do mesmo. Linguagens de Programação para Internet 11

13 Os primeiros navegadores trabalhavam somente em modo texto, o que não contribuía muito para a disseminação da Web. A grande explosão da Web ocorreu em setembro de 1993 com o lançamento do NCSA Mosaic, desenvolvido inicialmente por Marc Andreessen e Eric Bina no NCSA (acrónimo de National Center for Supercomputing Applications, que significa Centro Nacional de Aplicações de Supercomputação em inglês). Atualmente, o mercado dos navegadores encontra-se dividido entre várias versões e modelos de web-browser. Eles são disponibilizados por empresas e comunidades de iniciativa livre. A maioria é disponibilizada sem nenhum custo ao usuário final, que pode facilmente efetuar a sua instalação em seu sistema operacional. Entre os navegadores existentes, iremos destacar o Internet Explorer (Microsoft), Firefox (Mozilla inc), Safári (Apple) e o Chrome (Google). Devido à grande concorrência do passado pelas vendas dos navegadores e a inexistência de padrões para a criação dos navegadores, o conteúdo publicado pode assumir diferentes formatos conforme o navegador utilizado pelo usuário. Isso ocorre porque a maneira como o conteúdo é apresentado ao usuário é tratada diretamente no navegador, por meio da interpretação das linguagens de marcação existentes, como, por exemplo, o HTML que iremos estudar a seguir. Hoje em dia todo o bom desenvolvedor da Web deve, antes da publicação do conteúdo, verificar se o layout e as funcionalidades estão compatíveis com os navegadores utilizados pelo público-alvo. Uma dica importante é que você esteja sempre atento às recomendações estabelecidas pela W3C (World Wide Web Consortium), que atualmente é o órgão responsável pelos padrões e normas do desenvolvimento Web. Para saber mais acesse o link: Linguagem HTML HTML (acrônimo para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores. Inicialmente, o HTML foi criado por Tim Berners-Lee e tinha como propósito a resolução do seu problema de comunicação e disseminação de pesquisas com o seu grupo de colegas. O HTML recebeu publicação oficial na década de 1990 com base nas propostas originais de Tim Berners-Lee. No início, o HTML era uma linguagem de normas mais flexíveis, o que causava certos problemas de portabilidade entre navegadores. Hoje o HTML encontra-se na versão 4.1 e possui um documento 12 NT Editora

14 de recomendações, publicadas e mantidas pela W3C que está disponível em sua versão inglês pelo site: Quando vemos uma página Web em nosso navegador ou cliente Web, parece se tratar de uma só entidade, mas não é bem assim. Na verdade, ela é composta por uma infinidade de diferentes arquivos, imagens, possíveis vídeos e, o mais importante, o código-fonte. O código das páginas, em sua maior parte, é escrito em HTML, que indica basicamente onde colocar cada texto, cada imagem e cada vídeo. O HTML também indica a forma que terão esses elementos ao serem colocados na página. Essa linguagem utiliza, por exemplo, etiquetas com as formas <B> ou <P>. Cada etiqueta possui um significado. Exemplo: <B> indica que se escreve em negrito (bold), <P> indica um parágrafo, <A> indica um link, etc. Quase todas as etiquetas têm sua correspondente etiqueta de fechamento. A partir de sua utilização, essa etiqueta de fechamento define que não deve mais haver uso da propriedade da etiqueta. Exemplo: </B> é utilizado para indicar que não se deve mais escrever em negrito. Portanto, o HTML é formado por uma série de etiquetas utilizadas para definir a forma ou o estilo que queremos aplicar em um documento. 1.5 Partes de um documento HTML Um documento HTML deve estar delimitado pelas etiquetas <html> e </html>. Dentro desse documento, podemos distinguir outras duas partes prin cipais. São elas: O cabeçalho, que é delimitado por <head> e </head>. Nele colocaremos etiquetas informativas. Exemplo: o título de nossa página. O corpo, que é delimitado pelas etiquetas <body> e </body>. Nele, colocaremos o texto e as imagens delimitados por outras etiquetas como as que vimos anteriormente. O curso de criação de páginas para Internet com Dreamweaver CS4 desenvolve de forma mais aprofundada a linguagem HTML abordando formatação básica, definição de cores e textos, inserção de imagens, links, tabelas, etc. Esse curso é uma excelente oportunidade para aprofundar seus conhecimentos sobre o assunto. 1.6 A especificação XHTML No passado existiu uma grande concorrência na venda dos navegadores, que foi chamada de Guerra dos Navegadores, onde as empresas ofereciam recursos diversificados em seus navegadores. Linguagens de Programação para Internet 13

15 O problema gerado nesse período foi que as empresas modificaram e até acrescentaram etiquetas ao HTML, fazendo com que não existisse um padrão na linguagem. Com a falta de padrão, o conteúdo Web poderia assumir diferentes formas ou simplesmente não ser exibido caso o navegador do usuário não possuísse os recursos solicitados. Para sanar o problema resultante dessa confusão gerada pela Guerra dos Navegadores, a W3C criou inicialmente, em 1999, um manual de recomendações para o HTML e posteriormente publicou a norma XHTML, que a empresa julgava ser a substituta do HTML. A recomendação XHTML(acrónimo de EXtensible HyperText Markup Language, que significa linguagem de marcação de hipertexto extensível em inglês) surgiu como uma junção das linguagens HTML e XML tendo em vista que, diferentemente do HTML, o XHTML tem uma estrutura mais rígida e menos ambígua. Este manual de recomendações foi oficialmente publicado em 26 de janeiro de 2001 e pode se acessado, em inglês, pelo link: XML (extensible Markup Language) é uma recomendação da W3C para gerar linguagens de marcação para necessidades especiais. Os principais motivos para a criação do XHTML foram a padronização da linguagem HTML e a garantia de maior portabilidade das páginas Web entre diferentes tipos de dispositivos (microcomputadores, celulares, pocket pc s e etc) e navegadores existentes. Veja abaixo as principais normas do XHTML: Os nomes das etiquetas devem ser em letra minúscula. Não é permitida a existência de etiquetas como <HEAD> ou similares. Sendo <head> a escrita correta pare este caso. 1. Todas as etiquetas devem ser fechadas. Para as etiquetas únicas como o <br> (quebra de linha), o fechamento deve ser realizado nele mesmo. Exemplo: <br />. Nos casos em que a etiqueta possui uma forma de fechamento, como no caso da etiqueta <body>, o fechamento se dá pela repetição da etiqueta com o caractere de fechamento barra /. Exemplo: <body> </body>. 2. As etiquetas devem respeitar a ordem hierárquica de abertura e fechamento. Usos do tipo: (<i><b> texto negrito e itálico </i></b>), são errôneos perante as recomendações XHTML. Perceba que a etiqueta <i> (itálico) e a <b> (negrito) não seguem uma linha correta de criação e finalização. Para visualizar a maneira correta, conforme as recomendações XHTML, entenda que a primeira etiqueta a ser criada será a última a ser fechada, salvo nos casos de etiquetas singulares como o <br/> cujo fechamento já deve vir nela mesma. Como exemplo, tomemos por base a correção do exemplo anterior, escrito agora conforme prevê a recomendação: (<i><b> texto negrito e itálico </b> </i>). Perceba que agora a ordem está precisa, a etiqueta <i> é a primeira a ser aberta e somente deve ser fechada quando todas as etiquetas internas tenham sido fechadas. 3. As etiquetas <html> e </html> devem ser únicas e seguir a estrutura padrão de abertura e fechamento. Os elementos internos devem vir em pares e respeitando a ordem hierárquica de criação. Ex.: <html> <head>... </head> <body>... </body> </html> 14 NT Editora

16 Por fim, veja um exemplo de uma correta codificação XHTML: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN > <html xmlns= > <head> <meta http-equiv= Content-Type content= text/html; charset=utf-8 /> <title>titulo do documento</title> </head> <body> <b> texto negrito <i> texto negrito com itálico </i> </b> <br /> <i> texto itálico. </i> </body> </html> Existem várias outras especificações para o XHTML, porém não iremos nos aprofundar nelas. 1.7 Páginas estáticas x páginas dinâmicas Na Web, podemos encontrar ou construir dois tipos de páginas. São elas: 1º As páginas sem movimento e sem funcionalidades além dos links. 2º As páginas que têm efeitos especiais e que permitem interação. As primeiras páginas são as que chamamos de páginas estáticas. São cons truídas, basicamente, com a linguagem HTML, e não permitem grandes manobras para criar efeitos nem funcionalidades além dos links. Essas páginas são facilmente criadas, mas oferecem poucas vantagens tanto aos que desenvolvem a página como aos visitantes, já que só podem apresentar textos planos acompanhados de imagens e, no máximo, conteúdos multimídia (vídeos ou áudios). Linguagens de Programação para Internet 15

17 O segundo tipo de página é denominado página dinâmica. Uma página é dinâmica quando se inclui qualquer efeito especial ou funcionalidade e, para isso, é necessário utilizar linguagens de programação além do simples HTML. Enquanto as páginas estáticas podem ser imaginadas por todos e não exi gem mais explicações, as páginas dinâmicas são mais complexas e versáteis. Para esclarecer esse conceito, no próximo capítulo, conheceremos mais detalhes das páginas dinâmicas. Exercícios Parabéns, você finalizou esta lição! Agora responda às questões ao lado. Questão 01 A Web se enquadra dentro da Internet, e nada mais é que um serviço dos muitos que presta à Rede, entre os que podemos encontrar: a) comércio eletrônico; b) downloads de programas; c) globalização; d) todas as alternativas acima estão corretas. Questão 02 Web é um sistema Hipertexto/Hipermídia. O sistema com o qual está construída a Web se chama hipertexto e é um emaranhado... a) de páginas conectadas com links; b) de conexões de rede; c) de cabos de redes; d) de computadore. Questão 03 Com os sistemas de hipertexto é fácil encontrarmos o que buscamos rapidamente. Isso acontece em função da facilidade de acessar as informações que mais nos interessam a partir dos disponíveis. a) Páginas. b) Sites de busca. c) Links. d) Home pages. Questão 04 A Web não só se limita a apresentar textos e links, também pode nos oferecer: a) imagens; b) vídeos; c) todo tipo de apresentações; d) todas as alternativas acima estão corretas. Questão 05 Na Web podemos encontrar, ou construir, dois tipos de páginas: I. Páginas Multimídias; II. Páginas Dinâmicas; III. Páginas Estáticas; 16 NT Editora

18 a) Apenas II e a III estão corretas. b) Apenas a III está correta. c) Apenas a alternativa II está incorreta. d) Todas as alternativas são incorretas. Questão 06 Um documento HTML deve ser iniciado e finalizado pelas etiquetas: a) <html></html>; b)<head></head>; c)<body></body>; d)<b><i></i></b>. Questão 07 Atualmente, qual o órgão responsável pelas normas e boas práticas de implementação na Web? a) Google. b) Yahoo. d) Microsoft. d) W3C. Questão 08 De acordo com a recomendação XHTML, aponte a implementação de código incorreta. a) <b><i>pedro fique quieto. </b></i>. b) <b> Pedro <i>fique</i> quieto.</b>. c) <b> Pedro <i>fique quieto. </i></b>. d) <b><i>pedro fique quieto. </i></b>. Questão 09 Sobre a norma XHTML é correto afirmar que: a) as etiquetas não precisam seguir uma ordem hierárquica de fechamento e abertura; b) para facilitar a implementação e organização do desenvolvedor, as etiquetas e os atributos podem ser escritos em caixa alta; c) as declarações de etiquetas e atributos devem ser escritas em letra minúscula; d) para melhor organização do código, o desenvolvedor pode definir quantos blocos desejar da etiqueta <html></html>. Questão 10 Páginas dinâmicas são normalmente utilizadas para: a) exibir conteúdo que não permita a interação do usuário; b) exibir uma matéria ou imagens desenvolvidas puramente com o código HTML; c) exibir conteúdo dinâmico e interativo às ações do usuário; d) exibir conteúdo que não permita qualquer tipo de interação por parte do usuário. Linguagens de Programação para Internet 17