Livro Linguagens de Programacao III Unisul

linguagens_de_programacao_III.pdf 1 02/02/11 16:53

Universidade do Sul de Santa Catarina

PalhoaUnisulVirtual

2011

Linguagens de Programao IIIDisciplina na modalidade a distncia

linguagem_de_programacao_III.indb 1 04/02/11 11:14

CrditosUniversidade do Sul de Santa Catarina Campus UnisulVirtual Educao Superior a Distncia

Reitor UnisulAilton Nazareno Soares

Vice-Reitor Sebastio Salsio Heerdt

Chefe de Gabinete da ReitoriaWillian Mximo

Pr-Reitora AcadmicaMiriam de Ftima Bora Rosa

Pr-Reitor de AdministraoFabian Martins de Castro

Pr-Reitor de EnsinoMauri Luiz Heerdt

Campus Universitrio de Tubaro DiretoraMilene Pacheco Kindermann

Campus Universitrio da Grande Florianpolis Diretor Hrcules Nunes de Arajo

Campus Universitrio UnisulVirtualDiretoraJucimara Roesler

Equipe UnisulVirtual

Diretora AdjuntaPatrcia Alberton

Secretaria Executiva e CerimonialJackson Schuelter Wiggers (Coord.)Marcelo Fraiberg MachadoTenille CatarinaVanessa Guimaraes Franceschi

Assessoria de Assuntos InternacionaisMurilo Matos Mendona

Assessoria DAD - Disciplinas a Distncia Patrcia da Silva Meneghel (Coord.)Carlos Alberto AreiasFranciele Arruda Rampelotti Luiz Fernando Meneghel

Assessoria de Inovao e Qualidade da EaDDnia Falco de Bittencourt (Coord.)Rafael Bavaresco Bongiolo

Assessoria de Relao com Poder Pblico e Foras ArmadasAdenir Siqueira Viana

Assessoria de Tecnologia Osmar de Oliveira Braz Jnior (Coord.) Felipe Jacson de FreitasJefferson Amorin OliveiraJos Olmpio Schmidt Marcelo Neri da Silva Phelipe Luiz Winter da Silva

Priscila da SilvaRodrigo Battistotti Pimpo

Coordenao dos Cursos

Assistente das CoordenaesMaria de Ftima Martins

Auxiliares das coordenaesFabiana Lange PatricioTnia Regina Goularte Waltemann

Coordenadores GraduaoAdriana Santos RammAdriano Srgio da Cunha Alosio Jos Rodrigues Ana Luisa Mlbert Ana Paula R. Pacheco Artur Beck NetoBernardino Jos da SilvaCarmen Maria C. Pandini Catia Melissa S. RodriguesCharles Cesconetto Diva Marlia Flemming Eduardo Aquino Hbler Eliza B. D. LocksFabiano CerettaHorcio Dutra MelloItamar Pedro BevilaquaJairo Afonso HenkesJanana Baeta NevesJardel Mendes VieiraJoel Irineu LohnJorge Alexandre N. CardosoJos Carlos N. OliveiraJos Gabriel da SilvaJos Humberto D. ToledoJoseane Borges de MirandaLuciana ManfroiLuiz Guilherme B. FigueiredoMarciel Evangelista CatneoMaria Cristina VeitMaria da Graa Poyer Mauro Faccioni FilhoMoacir Fogaa Nlio HerzmannOnei Tadeu Dutra Patrcia FontanellaRaulino Jac BrningRoberto IunskovskiRodrigo Nunes LunardelliRogrio Santos da CostaRosa Beatriz M. PinheiroRose Clr BecheSrgio SellTatiana Lee MarquesThiago Coelho SoaresValnei Campos DenardinVictor Henrique Moreira Ferreira

Coordenadores Ps-GraduaoAloisio RodriguesAnelise Leal Vieira CubasBernardino Jos da SilvaCarmen Maria Cipriani PandiniDaniela Ernani Monteiro WillGiovani de PaulaKarla Leonora NunesLuiz Otvio Botelho LentoThiago Coelho SoaresVera Regina N. Schuhmacher

Gerncia Administrao Acadmica Angelita Maral Flores (Gerente)Fernanda Farias

Gesto DocumentalLamuni Souza (Coord.)Clair Maria CardosoJanaina Stuart da CostaJosiane LealMarlia Locks FernandesRicardo Mello Platt

Secretaria de Ensino a Distncia Karine Augusta Zanoni (Secretria de Ensino) Giane dos Passos (Secretria Acadmica)Alessandro Alves da SilvaAndra Luci Mandira Cristina Mara ShauffertDjeime Sammer Bortolotti Douglas SilveiraFabiano Silva MichelsFelipe Wronski HenriqueJanaina ConceioJean MartinsLuana Borges da SilvaLuana Tarsila HellmannMaria Jos Rossetti Miguel Rodrigues da Silveira JuniorMonique Tayse da SilvaPatricia A. Pereira de CarvalhoPatricia Nunes Martins Paulo Lisboa CordeiroRafaela FusiegerRosngela Mara Siegel Silvana Henrique Silva Vanilda Liordina Heerdt

Gerncia Administrativa e FinanceiraRenato Andr Luz (Gerente)Naiara Jeremias da RochaValmir Vencio Incio

Financeiro AcadmicoMarlene Schauffer Rafael BackVilmar Isaurino Vidal

Gerncia de Ensino, Pesquisa e ExtensoMoacir Heerdt (Gerente)Aracelli Araldi

Elaborao de Projeto e Reconhecimento de CursoDiane Dal Mago Vanderlei Brasil

ExtensoMaria Cristina Veit (Coord.)

PesquisaDaniela E. M. Will (Coord. PUIP, PUIC, PIBIC) Mauro Faccioni Filho (Coord. Nuvem)

Ps-GraduaoClarissa Carneiro Mussi (Coord.)

Biblioteca Soraya Arruda Waltrick (Coord.)Paula Sanhudo da SilvaRenan Felipe CascaesRodrigo Martins da Silva

Capacitao e Assessoria ao DocenteEnzo de Oliveira Moreira (Coord.)Adriana SilveiraAlexandre Wagner da RochaCludia Behr ValenteElaine Cristiane SurianJuliana Cardoso EsmeraldinoSimone Perroni da Silva Zigunovas

Monitoria e SuporteEnzo de Oliveira Moreira (Coord.)Anderson da SilveiraAnglica Cristina GolloBruno Augusto ZuninoClaudia Noemi NascimentoDbora Cristina Silveira

Ednia Araujo AlbertoFrancine Cardoso da SilvaKarla F. Wisniewski DesengriniMaria Eugnia Ferreira CeleghinMaria Lina Moratelli PradoMayara de Oliveira BastosPatrcia de Souza AmorimPoliana Morgana SimoPriscila Machado

Gerncia de Desenho e Desenvolvimento de Materiais DidticosMrcia Loch (Gerente)

Acessibilidade Vanessa de Andrade Manoel (Coord.) Bruna de Souza Rachadel Letcia Regiane Da Silva Tobal

Avaliao da aprendizagem Lis Air Fogolari (coord.)Gabriella Arajo Souza Esteves

Desenho EducacionalCarmen Maria Cipriani Pandini (Coord. Ps)Carolina Hoeller da S. Boeing (Coord. Ext/DAD) Silvana Souza da Cruz (Coord. Grad.) Ana Cludia Ta Carmelita SchulzeCristina Klipp de Oliveira Eloisa Machado Seemann Flvia Lumi MatuzawaGeovania Japiassu MartinsJaqueline Cardozo PollaLygia Pereira Luiz Henrique Milani QueriquelliMarina Cabeda Egger Moellwald Marina Melhado Gomes da Silva Melina de la Barrera Ayres Michele Antunes CorreaNgila Cristina HinckelPmella Rocha Flores da SilvaRafael Arajo SaldanhaRoberta de Ftima Martins Sabrina Paula Soares ScarantoViviane Bastos

Gerncia de Logstica Jeferson Cassiano A. da Costa (Gerente)Andrei Rodrigues

Logstica de Encontros Presenciais Graciele Marins Lindenmayr (Coord.) Ana Paula de AndradeCristilaine Santana MedeirosDaiana Cristina BortolottiEdesio Medeiros Martins FilhoFabiana PereiraFernando Oliveira SantosFernando SteimbachMarcelo Jair Ramos

Logstica de Materiais Carlos Eduardo D. da Silva (Coord.)Abrao do Nascimento GermanoFylippy Margino dos SantosGuilherme LentzPablo Farela da SilveiraRubens Amorim

Gerncia de Marketing Fabiano Ceretta (Gerente)Alex Fabiano WehrleMrcia Luz de OliveiraSheyla Fabiana Batista GuerrerVictor Henrique M. Ferreira (frica)

Relacionamento com o MercadoEliza Bianchini Dallanhol LocksWalter Flix Cardoso Jnior

Gerncia de Produo Arthur Emmanuel F. Silveira (Gerente)Francini Ferreira Dias

Design Visual Pedro Paulo Alves Teixeira (Coord.)Adriana Ferreira dos Santos Alex Sandro XavierAlice Demaria Silva Anne Cristyne PereiraDiogo Rafael da SilvaEdison Rodrigo ValimFrederico Trilha Higor Ghisi LucianoJordana Paula SchulkaNelson RosaPatrcia Fragnani de Morais

Multimdia Srgio Giron (Coord.)Cristiano Neri Gonalves RibeiroDandara Lemos ReynaldoFernando Gustav Soares Lima Srgio Freitas Flores

PortalRafael Pessi (Coord.)Luiz Felipe Buchmann Figueiredo

ComunicaoMarcelo BarcelosAndreia Drewes

e-OLACarla Fabiana F. Raimundo (Coord.) Vinicius Ritta de Moura

Produo IndustrialFrancisco Asp (Coord.)Ana Paula PereiraMarcelo Bittencourt

Gerncia Servio de Ateno Integral ao AcadmicoJames Marcel Silva Ribeiro (Gerente)

AtendimentoMaria Isabel Aragon (Coord.)Andiara Clara FerreiraAndr Luiz PortesBruno Ataide MartinsHoldrin Milet BrandaoJenniffer CamargoMaurcio dos Santos AugustoMaycon de Sousa CandidoSabrina Mari Kawano GonalvesVanessa TrindadeOrivaldo Carli da Silva Junior

Estgio Jonatas Collao de Souza (Coord.)Juliana Cardoso da SilvaMicheli Maria Lino de MedeirosPriscilla Geovana Pagani

ProuniTatiane Crestani Trentin (Coord.) Gisele Terezinha Cardoso FerreiraScheila Cristina MartinsTaize Muller

Avenida dos Lagos, 41 Cidade Universitria Pedra Branca | Palhoa SC | 88137-900 | Fone/fax: (48) 3279-1242 e 3279-1271 | E-mail: [email protected] | Site: www.unisul.br/unisulvirtual


PalhoaUnisulVirtual

2011

Design instrucional

Flavia Lumi Matuzawa

Linguagens de Programao IIILivro didtico

Edson Orivaldo Lessa Junior


Edio Livro Didtico

Professor ConteudistaEdson Orivaldo Lessa Junior

Design InstrucionalFlavia Lumi Matuzawa

Projeto Grfico e CapaEquipe UnisulVirtual

DiagramaoAnne Cristyne Pereira

Daiana Ferreira

RevisoLetra de Forma

Ficha catalogrfica elaborada pela Biblioteca Universitria da Unisul

Copyright UnisulVirtual 2011

Nenhuma parte desta publicao pode ser reproduzida por qualquer meio sem a prvia autorizao desta instituio.

741.6L63 Lessa Junior, Edson Orivaldo

Linguagens de programao III : livro didtico / Edson Orivaldo Lessa Junior ; design instrucional Flavia Lumi Matuzawa. Palhoa : UnisulVirtual, 2011.

462 p. : il. ; 28 cm.

Inclui bibliografia.

1. Desenho grfico. 2. Artes grficas. 3. Desenho comercial. I. Matuzawa, Flavia Lumi. II. Ttulo.


Sumrio

Apresentao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7Palavras do professor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9Plano de estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

UNIDADE 1 - Aspectos do desenvolvimento de aplicaes Web . . . . . . . . 17UNIDADE 2 - JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79UNIDADE 3 - PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149UNIDADE 4 - Sistemas Web com banco de dados (PHP + MYSQL). . . . . . 203UNIDADE 5 - Extensible Markup Language (XML) . . . . . . . . . . . . . . . . . . . . . 291UNIDADE 6 - Asynchronous Javascript and XML (AJAX) . . . . . . . . . . . . . . . 347

Para concluir o estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395Referncias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397Sobre o professor conteudista . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399Respostas e comentrios das atividades de autoavaliao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401Biblioteca Virtual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461


7

Apresentao

Este livro didtico corresponde disciplina Linguagens de Programao III.

O material foi elaborado visando a uma aprendizagem autnoma e aborda contedos especialmente selecionados e relacionados sua rea de formao. Ao adotar uma linguagem didtica e dialgica, objetivamos facilitar seu estudo a distncia, proporcionando condies favorveis s mltiplas interaes e a um aprendizado contextualizado e eficaz.

Lembre-se que sua caminhada, nesta disciplina, ser acompanhada e monitorada constantemente pelo Sistema Tutorial da UnisulVirtual, por isso a distncia fica caracterizada somente na modalidade de ensino que voc optou para sua formao, pois, na relao de aprendizagem, professores e instituio estaro sempre conectados com voc.

Ento, sempre que sentir necessidade, entre em contato, pois voc tem disposio diversas ferramentas e canais de acesso, como: telefone, e-mail e o Espao Unisul Virtual de Aprendizagem, que o canal mais recomendado, pois tudo o que for enviado e recebido fica registrado para seu maior controle e sua comodidade. Nossa equipe tcnica e pedaggica ter o maior prazer em atend-lo, pois sua aprendizagem o nosso principal objetivo.

Bom estudo e sucesso!

Equipe UnisulVirtual.


Palavras do professor

Caro desbravador do conhecimento,

O mundo tecnolgico imenso permanecendo em constante expanso e evoluo. Por essa razo, o conhecimento e as tcnicas de desenvolvimento de software seguem essa linha. Linguagens nascem, envelhecem, algumas morrem outras reestruturam-se e com novas tcnicas so reutilizadas. Assim o aprendizado se torna constante, de tal forma que fora o desenvolvedor a sempre procurar atualizar-se. A tcnica permanece, mas a forma de escrita se altera.

A linguagem de programao nada mais que um dialeto para que a mquina possa entender quais so as ordens que ns damos. Assim como na vida real, uma ma uma ma em qualquer lngua falada pelos homens. A programao no diferente, j que uma varivel sempre ser uma varivel. A forma de escrever o comando pode e deve se alterar, mas o conceito o mesmo.

O desenvolvimento Web possui uma caracterstica maravilhosa que nos leva sempre a utilizar diversas tcnicas e linguagens para alcanar o melhor resultado. Nesta disciplina, voc ver a ponta do iceberg. Voc ser tentado a desbravar esse universo da programao Web. Desvendar seus segredos submersos ser algo inesquecvel e onde voc poder construir uma slida carreira em tecnologia.

Bom estudo!

Professor Edson O. Lessa Jr.


Plano de estudo

O plano de estudos visa a orient-lo no desenvolvimento da disciplina. Ele possui elementos que o ajudaro a conhecer o contexto da disciplina e a organizar o seu tempo de estudos.

O processo de ensino e aprendizagem na UnisulVirtual leva em conta instrumentos que se articulam e se complementam, portanto, a construo de competncias se d sobre a articulao de metodologias e por meio das diversas formas de ao/mediao.

So elementos desse processo:

O livro didtico.

O Espao UnisulVirtual de Aprendizagem (EVA).

As atividades de avaliao (a distncia, presenciais e de autoavaliao).

O Sistema Tutorial.

Ementa

Pginas dinmicas. Conceitos de pginas do lado servidor e cliente. Recursos do Active Server Page (ASP). Comandos bsicos SQL. Introduo a PHP. Configurao de servidores Web. Enquetes, frum, mecanismo de busca. Filtro e totalizao de dados. Formulrios. Desenvolvimento de aplicaes. Implementao de sites dinmicos e seus respectivos testes, avaliao e manuteno.


12


Objetivos

Geral:

O desenvolvimento para Web requer uma ampla gama de conhecimentos em ferramentas necessrias para aperfeioar o resultado. Assim, podemos estudar tcnicas de desenvolvimento para Web utilizando diversas ferramentas para alcanar o melhor resultado possvel.

Especficos:

Identificar e caracterizar as aplicaes Web sob a viso do desenvolvedor e do usurio.

Distinguir o uso de linguagens Client-side e Server-side.

Compreender a dinmica do uso de banco de dados nas aplicaes Web.

Identificar os recursos das linguagens de marcao para transporte e armazenamento de informaes.

Integrar tecnologias a fim de montar uma soluo computacional voltada Web.

Carga Horria

A carga horria total da disciplina 120 horas/aula.

Contedo programtico/objetivos

Veja, a seguir, as unidades que compem o livro didtico desta disciplina e os seus respectivos objetivos. Estes se referem aos resultados que voc dever alcanar ao final de uma etapa de estudo. Os objetivos de cada unidade definem o conjunto de


13

Linguagens de Programao III

conhecimentos que voc dever possuir para o desenvolvimento de habilidades e competncias necessrias sua formao.

Unidades de estudo: 6

Unidade 1 - Aspectos do desenvolvimento de aplicaes Web 20h/a

A primeira unidade voc poder identificar as sutilizas que existem por traz de um desenvolvimento Web. Esta unidade contm as definies necessrias para identificar as principais caractersticas de cada forma de programar, assim como reconhecer as principais vantagens de se desenvolver em plataforma Web.

Unidade 2 - Javascript 20h/a

O JavaScript hoje se torna essencial para o desenvolvimento Web. Esta linguagem tem como o seu principal uso em validaes rpidas e mscaras de campos. A linguagem JavaScript pode ainda ser usada como um recurso de melhoramento visual. Assim voc poder ser capaz de iniciar sua utilizao no universo extenso desta linguagem.

Unidade 3 - PHP 20h/a

Nesta unidade voc conhecer o fantstico mundo do PHP. Conhecer como utiliz-la de forma a aumentar a sua aplicabilidade. Saber algumas bibliotecas ou APIs que possibilitam uma programao mais eficiente.

Unidade 4 - Sistemas Web com banco de dados (PHP + MYSQL) 20h/a

Nesta unidade voc aprender como trabalhar em conjunto com a linguagem e um banco de dados. Desenvolver uma aplicao em que utilizar vrios nveis do desenvolvimento Web. Perceber como a escolha correta das linguagens a serem desenvolvidas com


14


o banco de dados faz diferena na eficincia e na velocidade de desenvolvimento de uma aplicao.

Unidade 5 - Extensible Markup Language (XML) 20h/a

No XML voc ser capaz de identificar as caractersticas que levaram esta linguagem a se tornar base de diversas tecnologias. Voc conhecer as principais aplicabilidades e os detalhes mais relevantes do Extensible Markup Language (XML).

Unidade 6 - Asynchronous Javascript and XML (AJAX) 20h/a

Na Unidade 6 voc condensar todas as unidades anteriores em uma nica soluo. Identificar como o uso em conjunto de diversas linguagens podem resultar em um ganho de performance. Voc compreender o conceito do AJAX, seus benefcios e suas limitaes. Assim, identificar quando ela mais aconselhvel em seu uso.


15


Agenda de atividades/ Cronograma

Verifique com ateno o EVA, organize-se para acessar periodicamente a sala da disciplina. O sucesso nos seus estudos depende da priorizao do tempo para a leitura, da realizao de anlises e snteses do contedo e da interao com os seus colegas e tutor.

No perca os prazos das atividades. Registre no espao a seguir as datas com base no cronograma da disciplina disponibilizado no EVA.

Use o quadro para agendar e programar as atividades relativas ao desenvolvimento da disciplina.

Atividades obrigatrias

Demais atividades (registro pessoal)


1UNIDADE 1Aspectos do desenvolvimento de aplicaes WebObjetivos de aprendizagem

Ao final do estudo desta unidade, importante que voc:

Identifique as principais caractersticas do desenvolvimento Web.

Conhea os mtodos de comunicao entre as linguagens.

Conhea as principais tecnologias disponveis.

Sees de estudo

Seo 1 O ambiente

Seo 2 Conceitos envolvidos no desenvolvimento de aplicaes Web

Seo 3 Caractersticas

Seo 4 Integrao de linguagens

Seo 5 Tecnologias


18


Para incio de estudo

Ao navegar um pouco na Web, voc pode identificar as vantagens do desenvolvimento nesta tecnologia e perceber como as atualizaes dos sistemas so rpidas e amplamente difundidas. Devido a essa velocidade, de se esperar uma reduo significativa de custos das verses comparada com as aplicaes desktops. Alm da reduo de custo, a Web no exige de um usurio uma determinada configurao de mquina para que possa us-la.

Uma aplicao Web possui compatibilidade comprovada com diversos sistemas operacionais disponveis no mercado visto que a aplicao no executada pelo seu equipamento, mas interpretada por um navegador. Essa facilidade a difere das aplicaes desktops, pois estas necessitam de verses diferentes para cada sistema operacional.

Voc ver como funciona a interpretao das regras de negcio e das validaes dos campos e estudar os nveis de comunicao entre os mtodos.

Esses conceitos so extremamente importantes, mas vale lembrar que as linguagem desktop no so o alvo do presente estudo. Esses conceitos so de grande auxlio para sempre buscar a melhor soluo para cada tipo de necessidade dos clientes. Assim voc ter um conhecimento mais refinado para poder optar em determinada linguagem e ou que tipo de tecnologia de desenvolvimento (Web ou desktop) ter um melhor resultado.

Embora no seja o alvo desta unidade, conhecer as linguagens desktop de grande auxilio para a busca da melhor soluo, de acordo com a demanda dos clientes. Conhecer linguagens lhe dar mais subsdios para optar pela tecnologia de desenvolvimento (web ou desktop) mais adequada para proporcionar o melhor resultado para a situao em questo.


19


Unidade 1

Seo 1 O ambiente

Todo o desenvolvimento Web realizado no ambiente da internet, inclusive as aplicaes que so construdas para serem utilizadas em redes privadas. Todas so regidas sobre as vantagens e desvantagens que a internet proporciona.

A internet, nada mais que um grande conjunto de redes de computadores interligadas pelo mundo inteiro, basicamente, um conjunto de documentos. Ela foi criada por um grupo de cientistas do CERN (European Laboratory for Particle Physics), na Sua, com o intuito de facilitar a comunicao interna e externa.

Inicialmente, essa rede integrada continha dados os quais cada equipamento deveria interpret-los individualmente. Ou seja, no existia uma ferramenta que transformasse os dados em informao padronizada. O primeiro a realizar essa tarefa foi o Mosaic (primeiro navegador de grande aceitao no mercado).

O objetivo inicial era centralizar, em uma nica ferramenta, as vrias tarefas necessrias para se obter as informaes disponveis pela internet de forma integrada e visando conectividade independentemente do tipo de mquina a ser utilizada. Para manter essa multicompatibilidade, foi utilizado um conjunto de protocolos e servios em comum, permitindo assim que os usurios a ela conectados pudessem usufruir os servios de informao de alcance mundial.

O HTML (Hyper Text Markup Language) a linguagem padro da internet interpretada pelos browsers. Ela igualmente foi criada pelo CERN tendo como seu principal responsvel Tim Berners-Lee. A motivao de Tim foi encontrar mais praticidade na hora de escrever suas pginas. O HTML proporcionou algumas vantagens, entre elas:

Padronizao: as pginas estritas em HTML tem a aparncia semelhante nas diversas plataformas de trabalho.


20


Diversidade: o HTML permite uma singularidade a diversos elementos do documento, ou seja, ele permite que alguns elementos possam ser modificados para torn-los nicos. Por exemplo, padro da letra, cores etc.

Compactao: as pginas escritas em HTML possuem um tamanho reduzido, a fim de economizar tempo de transmisso por meio da internet.

O HTML construdo para que o documento seja um arquivo texto com marcaes que controlam a forma de exibio do documento. Este documento, pgina ou arquivo pode ser construdo utilizando um framework elaborado, um framework simples ou ainda simplesmente um editor de texto.

Uma das principais vantagens dessa linguagem que, se um browser no entender determinado marcador, ele simplesmente o ignora, evitando qualquer tipo de mensagem de erro (em tempo de execuo) e que pouco afeta o resto do documento. Essa nota tcnica foi elaborada com base na verso 3.0 do HTML. Logo que a produo desta foi concluda, surgiu o HTML 4.0.

O HTML faz metade do trabalho. Basicamente organiza os dados em um formato padro. A outra metade realizada pelos browsers, como sucessores do Mosaic. Os browsers interpretam esses dados organizados pelo HTML.

Durante a histria, j foi utilizado diversos browsers. Alguns permaneceram e evoluram. Outros no conseguiram se adequar s novas tendncias do mercado, como foi o caso do Netscape. Esse browser foi largamente utilizado na dcada de 1990, porm no consegui manter sua preferncia na dcada seguinte.

Nesta poca, existiam muitas diferenas entre a interpretao do HTML. Tanto que muitas vezes existiam pginas em que o usurio deveria informar qual browser estava utilizando. Desta forma, o usurio era encaminhado a seu conjunto de pginas devidamente formatado. Atualmente, esse tipo de problema mais restrito. Desta forma, a escolha do browser acaba muitas vezes por motivos visuais. Vejamos alguns browsers.


21


Unidade 1

Figura 1.1 - Internet Explorer desenvolvido pela Microsoft.Fonte: Elaborada pelo autor (2010).

Figura 1.2 - Chrome desenvolvido pela Google.Fonte: Elaborada pelo autor (2010).

Figura 1.3 - Safari desenvolvido pela Apple.Fonte: Elaborada pelo autor (2010).


22


Figura 1.4 - Firefox desenvolvido pela Mozilla.Fonte: Elaborada pelo autor (2010).

Voc pode perceber que praticamente no h diferena na navegao entre os browsers. Porm, eventualmente, possvel que voc se depare com diferenas muito mais perceptveis.

O HTML est presente em todas as pginas da internet, inclusive nas pginas que possuem sons, imagens, vdeos ou animaes. Essas interaes multimdia so exibidas sobre o HTML.

A sua estrutura se baseia em tags. O documento sempre inicializado pela tag e logo aps vem o cabealho

, o ttulo e o corpo .

Lembre-se que o HTML no case-sensitive, ou seja, ele no distingue , , , . Todas as tags devem ser sempre fechadas, pois desta forma mantm o padro e no h problemas com outras linguagens que podemos vir a usar. As tags de fechamento possuem uma barra /. Alm dos fechamentos, devemos sempre manter a hierarquia do bloco, isto , as tags sejam sempre fechadas do ltimo para o primeiro, deste modo: documento 1 .


23


Unidade 1

Vejamos um exemplo de HTML:

Primeiro teste

Esse um teste

Figura 1.5 - Exemplo de pgina html.Fonte: Elaborada pelo autor (2010).

As principais tags utilizadas no desenvolvimento Web so as que compem o formulrio HTML (form). Eventualmente, para contemplarmos uma soluo mais completa, podemos utilizar de outras tags para nos auxiliar.


24


Seo 2 Desenvolvimento de aplicaes Web

Um dos principais pontos a se destacar quando falamos em desenvolver aplicao para Web que ela possui algumas vantagens que superam desenvolvimento de aplicao desktop. Vamos apresentar alguns conceitos envolvidos no desenvolvimento de aplicaes Web.

O desenvolvimento de software para a Web mantm um princpio bsico: mantenha-o simples; mantenha-o pequeno. Na Conferncia de Tecnologia Emergente do ano de 2006 houve vrios temas em discusso. Rael Dornfest, ex-chefe executivo da OReilly, explanou: grandes negcios sero criados oferecendo menos a voc. Perceba como essa afirmao se torna importante quando pensamos na economia da ateno. Isso quer dizer que no podemos ter mais informaes que o tempo que podemos ler.

Uma das vantagens no trabalho do desenvolvedor Web diz respeito s operaes de manuteno: ele trabalha com uma aplicao centralizada. Ou seja, a aplicao permanece em um nico equipamento onde so acessadas pelos clientes. Desta forma, as operaes de manuteno da aplicao decorrem de forma muito dinmica, onde qualquer alterao na aplicao se reflete instantaneamente a todos os usurios conectados. Alm disso, as operaes de backup e integrao com outras aplicaes so mais bem gerenciadas.

A centralizao permite que as estaes desktops utilizem menos recursos. Essa diminuio favorece na diminuio de custos de um projeto de implementao. Porm, o desenvolvimento Web requer uma metodologia de desenvolvimento mais organizada.

Quando se fala de centralizao, no significa que seja uma obrigatoriedade que exista apenas um servidor. As tecnologias atuais permitem conter equipamentos em diversas camadas. Por exemplo, podemos ter um equipamento com apenas o servidor Web; um segundo equipamento com uma linguagem de interpretao como o ASP; e, por ltimo, um equipamento apenas com o banco de dados.

A forma de organizar a infraestrutura depende da estratgia adotada no projeto de desenvolvimento. Muitas variveis devem


25


Unidade 1

ser levadas em consideraes, como: nmero de acessos, carga de processamento, volume de consultas, entre outras. Apesar de esta anlise no ser o foco de estudo desta disciplina, torna-se importante voc ter conscincia do processo como um todo.

Quanto aos recursos necessrios no desktop para que uma aplicao Web seja executada, so bem resumidos, uma vez que basta ter acesso a um servidor Web por meio de um browser para que a aplicao mais bsica passe a funcionar. As aplicaes mais robustas em grandes empresas tambm no perdem muito essa caracterstica. O servidor Web dever ser mais bem equipado, porm, para algum passar a utilizar a aplicao, basta um browser e uma conexo com o servidor para iniciar o seu trabalho.

Os recursos adicionais que por ventura possam ser necessrios, normalmente se tratam de complementos para o browser executar uma animao, um vdeo ou outra forma de mdia. Esses tipos de complementos so nomeados como plug-ins.

As aplicaes Web necessitam de uma conexo com um servidor Web. Esse servidor pode estar instalado no prprio desktop do usurio ou em outro equipamento em qualquer distncia. Essa conexo com o servidor pode ocorrer de duas formas: pela intranet ou pela extranet. A intranet se caracteriza pela rede LAN (rede local) onde o ambiente muito bem conhecido e controlado. A extranet a internet propriamente dita, assim a aplicao est aberta a qualquer navegador que tenha acesso a ela.

Lembre-se que, com uma aplicao centralizada, o processamento e o volume de dados trafegam em um nico equipamento. Essa preocupao deve estar presente no incio do projeto de desenvolvimento do software.

Uma grande facilidade para o uso das aplicaes Web que a plataforma j se encontra pronta. Isto , a Web utiliza de todos os equipamentos de redes j existentes, uma vez que tudo tratado pelo protocolo TCP/IP.

Assim, os servios de requisies utilizam o seguinte procedimento:

LAN (Local Area Network): sigla para representar uma rede local, a rede de computadores qual sua mquina est conectada.

Protocolos TCP/IP um conjunto de protocolos de comunicao entre computadores em rede.


26


Browser(Usurio) Servidor Web

Servidor Web Browser(Usurio)

Figura 1.6 - Diagrama de interao browser x servidor.Fonte: Elaborada pelo autor (2010).

Esse diagrama representa de forma bsica como a h a interao entre browser e servidor. Utilizam a rede (internet ou intranet) como plataforma de comunicao.

Uma outra forma de exemplificar a dinmica das aplicaes Web utilizar um diagrama com o ASP sendo uma linguagem de interpretao de cdigo. Assim como foi utilizado o ASP, poderia ser qualquer outra linguagem, como PHP, JSP, entre outras.

Figura 1.7 - Diagrama em que o ASP uma linguagem de interpretao de cdigo.Fonte: . Acesso em 06 jan. 2011.


27


Unidade 1

Perceba que, mesmo utilizando uma linguagem para interpretar uma programao existente, a dinmica da aplicao Web no foi alterada.

Logicamente esse desenvolvimento no nasceu do dia para a noite. As linguagens vm evoluindo para que os desenvolvedores possam ter um esforo menor durante seus desenvolvimentos. O esquema a seguir representa a evoluo das principais linguagens Web.

Figura 1.8 - Diagrama de evoluo de linguagens de programao.Fonte: . Acesso em 06 jan. 2011.

A possibilidade de uso das linguagens interpretadas no servidor Web tornou-se possvel criar pginas em que o resultado depende de um tipo de requisio. Ou seja, uma consulta a um banco de dados ou outra forma de armazenamento de dados pode retornar informaes diferentes dependendo dos parmentros para uma mesma pgina. Assim, as pginas que outrora eram estticas passam a ser dinmicas e um universo novo se abre para os desenvolvedores.


28


A definio da Aplicao Web est entrelaado com a definio de pginas dinmicas. Assim, o principal fluxo de informao que trafega nas aplicaes Web o envio (insero ou manipulao de dados) e o resgate (consulta) de informaes de um servidor.

Vale ressaltar que o browser possui um tempo interno para aguardar uma resposta da requisio realizada. Em outras palavras: o browser envia alguns dados para o servidor. Este, por sua vez, realiza uma consulta sobre esses dados. Caso essa consulta seja demasiadamente lenta, o browser entender que a conexo com o servidor no existe mais e retornar uma mensagem de erro. Portanto, qualquer requisio nas aplicaes Web deve conter um retorno rpido, de forma a evitar esse problema.

Alm do retorno das consultas que deve ser levado em considerao, o envio das informaes tambm importante.

Imagine voc enviar um arquivo enorme para o servidor. Se um arquivo muito grande (400 Mb, por exemplo) for enviado para o servidor e se a aplicao no estiver preparada para suportar esse trfego, muito provavelmente toda a aplicao ir parar enquanto processa a sua requisio.

Essas consideraes dependem do link com o servidor. O link, neste caso, refere-se velocidade de uma conexo com o servidor. Quanto maior a velocidade, maior o volume de dados possveis de trafegar na rede.

Outro aspecto que importante ser levado em considerao no projeto de uma aplicao Web o cuidado com a usabilidade. Lembre-se sempre que o custo para diversos browsers interpretarem as pginas Web de forma semelhante a simplicidade do cdigo HTML. Esses elementos grficos no possuem qualidades semelhantes aos elementos de uma aplicao desktop.

O crescente uso da Web como plataforma de sistemas acaba por forar a utilizao de mecanismos que melhorem o visual. Tornando-os mais atrativos para os usurios.


29


Unidade 1

Atualmente existem recursos para minimizar esse problema, como CSS, JavaScript, entre outros. Mas aqui est se referenciando aos elementos bsicos do HTML como os elementos de formulrio. O uso das folhas de estilos (CSS) criam um visual mais amigvel e harmnico. O JavaScript, alm de poder realizar algumas tarefas do CSS, auxilia a interatividade com o usurio como mscaras e validaes de campos.

Assim como qualquer aplicao desktop, o desenvolvimento de aplicaes para Web requer um projeto conciso em que possa abordar as diferentes tecnologias que sero utilizadas. Diferente do desktop, onde uma linguagem adotada para o projeto, a aplicao para Web requer, hoje, o uso de vrias linguagens e tecnologias para atingir um melhor resultado. Por isso, o uso de frameworks auxilia e muito o desenvolvimento em equipes, uma vez que essas ferramentas procuram manter um padro de desenvolvimento uniforme.

Ateno!Todo o projeto de software, seja de pequeno ou grande porte, requer uma fase de anlise rigorosa. Nesta etapa comea-se a identificar possveis problemas e riscos ao desenvolvimento. Ainda nesta fase, possvel direcionar e identificar as tecnologias utilizadas no desenvolvimento. Execute sempre aps o planejamento baseado na anlise do projeto. Aprenda o problema, a soluo j existe!

Apesar de se tratar de um desenvolvimento de software, as aplicaes Web possuem algumas caractersticas que a diferencia.

a) ubiquidade;

b) infraestrutura tecnolgica imprevisvel;

c) alta volatilidade dos requisitos de negcio;

d) equipes multidisciplinares.


30


a) Ubiquidade

A ubiquidade nada mais que a caracterstica de acessar a aplicao de diversos locais para diversos dispositivos. Portanto, para ter essa caracterstica comprovada, a aplicao Web necessita estar disponvel rede. Entenda que, quando mencionado o acesso rede, trata-se de rede domstica, corporativa ou mundial. Hoje, com uso de dispositivos menores para acessar a rede, possvel criar vises especficas para um determinado tipo de dispositivo sem trocar a aplicao.

b) Infraestrutura tecnolgica imprevisvel

O que voc como desenvolvedor deve sempre manter em mente que qualquer pessoa conectada rede pode ter acesso a sua aplicao. No estamos tratando aqui os fatores de segurana, mas sim o nmero de acesso que sua aplicao pode ter.

Assim, um usurio que deseja acessar sua aplicao pode conter uma infinidade de configuraes diferentes em seu equipamento. Podendo assim variar o sistema operacional, a memria, a velocidade de conexo, o tamanho de tela, a resoluo, entre outros.

Todas essas variveis podem afetar diretamente a forma que o usurio poder visualizar a sua aplicao. Os browsers ainda permitem que os usurios alterem suas configuraes livremente desabilitando funcionalidades importantes que sua aplicao pode estar utilizando.

As melhores aplicaes Web so aquelas que preveem o maior nmero de variaes de equipamentos possveis que os usurios possam ter. Um exemplo tpico que os usurios podem desabilitar o uso da linguagem JavaScript. Essa linguagem, como veremos, largamente utilizada em validaes de formulrios. Caso sua aplicao apenas valide o formulrio via o JavaScript, pode sofrer por usurios mal intencionados que esteja acessando sua aplicao.

Outro exemplo seria a dimenso que voc pode estar utilizando. Ao dimensionar sua pgina Web de tal forma que alguns


31


Unidade 1

usurios tenham de mover a barra de rolagem em diversas direes, leva a uma insatisfao por parte dos usurios. Sem falar que podem perder informaes importantes que no estejam sendo mostradas adequadamente.

c) Alta volatilidade dos requisitos de negcio

Lembre-se que em aplicaes Web a regra de negcio fica no servidor Web. Essa caracterstica permite que uma alterao se replique para todos os clientes instantaneamente. Essa ao faz com que seja comum nessas aplicaes um ndice maior na alterao das regras de negcio se comparadas com aplicaes desktops.

Aplicaes para Web no possuem em sua maioria um controle de releases. Contudo, existem algumas aplicaes em que esse controle feito e normalmente so aplicaes Web para uso genrico. Nesses casos, voc adquire uma cpia, instala e passa a usar. Com a evoluo tecnolgica ou com a ocorrncia de relatos de bugs, uma nova release lanada.

d) Equipes multidisciplinares

Os projetos Web so concebidos, normalmente, por profissionais com conhecimentos abrangentes. Um projeto pequeno desenvolvido por um nico profissional acaba por forar este a aprimorar seus conhecimentos em design, banco de dados, linguagem server-side e em linguagem client-side.

Assim, as aplicaes para Web formam profissionais com vises abrangentes sobre a soluo em que est se pretendendo alcanar.

Ateno!Essa ltima caracterstica pode se tornar um ponto fraco, pois muitos profissionais acabam por manter o foco em uma generalizao tamanha que lhes acaba faltando, algumas vezes, conhecimentos mais aprimorados sobre uma tecnologia.

Voc ver adiante mais detalhes sobre a linguagem server-side e client-side.


32


J vimos at o momento diversas informaes que mostram como o desenvolvimento para a Web benfico, mas necessita de alguns cuidados. Chegou a hora de desmitificar uma aplicao Web e um website.

A aplicao Web formada por websites que possibilitam aos usurios interagirem com a aplicao. Toda a aplicao para Web composta por websites que propiciam o servio aos usurios.

A nfase tambm diferente: os websites tm em seu ponto forte os aspectos plsticos do sistema (apresentao, movimento, navegao, informao). As aplicaes para Web, por sua vez, preocupam-se com os aspectos funcionais da soluo (velocidade de resposta, funcionalidade, interatividade, aplicabilidade). Todo esse conjunto facilitado pelo ambiente que a aplicao est sendo desenvolvida, a internet.

O ambiente da internet possui diversas aplicabilidades e finalidades que podem ser atendidas por uma aplicao. Por causa disso, existem diversas tecnologias que auxiliam a alcanar os objetivos.

Muitas dessas tecnologias so definidas por diversas caractersticas como: aparncia, interatividade, disponibilidade no servidor Web, experincia do desenvolvedor ou por uma escolha pessoal do desenvolvedor por uma linguagem especfica.

Ateno!Cuidado com a escolha de uma linguagem, pois a escolha errada pode causar fracasso no projeto. Procure nunca utilizar o lado pessoal durante esse processo. Lembre-se que o objetivo de um desenvolvimento oferecer a melhor soluo para um problema.

Existem inmeras linguagens que podem ser trabalhadas no desenvolvimento Web e possvel interpretar linguagens tipicamente desktops em servidores Web. Lembre-se que, para


33


Unidade 1

uma linguagem ser interpretada, basta que o servidor Web entenda os comandos provenientes desta.

Vejamos mais detalhadamente duas linguagens amplamente disseminadas: (a) Client-Sides e (b) Server-Sides.

a) Linguagens Client-Sides

Client-sides caracterizam as linguagens que so interpretadas pelo browser. Normalmente no fazem parte da regra de negcio composta pelo projeto e possuem uma aplicabilidade de interao imediata.

Linguagens client-sides so mais teis no realce do aspecto visual da aplicao ou quando precisamos de processos simples e rpidos sendo executados na interface, como a validao dos dados digitados pelo usurio.

Hoje, esse tipo de linguagem tem ganhado fora com a usabilidade. As aplicaes atuais possuem um nvel muito grande de personalizao e interao. Por esse motivo, as linguagens como CSS, JavaScript e DHTML so cada vez mais trabalhadas e novos profissionais especialistas surgem no mercado.

As linguagens client-sides mais comuns so:

CSS

HTML

XHTML

Javascript

AJAX

Flash Action Script

Microsoft Silverlight


34


b) Linguagens Server-Sides

Este tipo de linguagem mantm em seu escopo as regras de negcio da aplicao. Pelo fato de as linguagens Server-sides serem executadas no servidor, todo o processamento da aplicao recai sobre ela. Nessa camada se fazem as chamadas a banco de dados e a arquivos de comunicao.

As linguagens server-sides j proveem mecanismos para a implementao da parte lgica da aplicao, como os algoritmos que executam os processos da camada de negcio ou recursos auxiliares, como acesso a banco de dados.

As linguagens mais usadas atualmente so:

PHP

ASP

.NET

CGI, Perl

Java, J2EE, WebObjects

SSJS, Aptana Jaxer, Mozilla Rhino

Python, Django

Ruby, Ruby on Rails

Smalltalk Seaside

ColdFusion

Lotus Domino

Websphere

As linguagens server-sides dependem diretamente do servidor Web. Esse servidor necessita estar configurado para interpretar as linguagens. Em outras palavras, para que uma linguagem


35


Unidade 1

se adque a um desenvolvimento Web e se torne Server-side, basta que o servidor Web interprete o seu cdigo. Mesmo linguagens tipicamente desktop como o C++ pode ser utilizada no desenvolvimento Web. Apenas o servidor tem de identificar seu cdigo e encaminhar para o compilado C.

Software de aplicao (Software as a Service SaaS) so aplicaes executas em um servidor Web ao invs de serem instaladas em um equipamento cliente. Esse tipo de aplicao possui vrios tipos de benefcios, como reduzir a demanda dos departamentos internos de TI. O SaaS ainda pode aumentar a acessibilidade para o uso fora dos escritrios facilitando a sua manuteno. O usurio acessa o software como um servio, desta forma sempre est atualizado. Quaisquer atualizaes efetuadas no servidor causam diretamente impacto a todos os equipamentos dos usurios. Esse tipo de aplicao vem sendo utilizada pelas empresas para facilitar a atualizao dos seus softwares, alm de adotar uma padronizao.

A Google utiliza esse conceito em vrios de seus softwares. Um dos mais usados o Google Docs, que se baseia em um conjunto de aplicativos para escritrios, como um editor de textos e uma planilha eletrnica.

Figura 1.9 - Planilha eletrnica do Google Docs.Fonte: .

A colaborao de projetos torna-se simplificada. Uma vez que o arquivo se encontra no servidor, no necessrio enviar para um colega. Simplesmente o usurio necessita compartilhar o arquivo com os colegas que deseja.


36


Outra forma de aplicativo que vem ganhando muito espao e ateno so os Webtop. Um Webtop um desktop Web, isto , um ambiente de sistema operacional disponvel pelo browser. Esse tipo de aplicao possui um potencial impressionante, j que o usurio poder trocar de equipamento sem perder as suas confi guraes e os seus arquivos.

Figura 1.10 - Webtop, uma forma de trabalhar de forma virtual.Fonte: http://icloud.com/pt. Acesso em 06 jan. 2011

Como voc pde notar, o desenvolvimento Web possui inmeras aplicabilidades e est longe de encontrar o seu limite. Porm, somente desenvolver no tudo. Conhecer o usurio e procurar tcnicas para melhorar o uso das aplicaes so fatores fundamentais. Essa tentativa de facilitar o uso das aplicaes e potencializar o seu uso chama-se de usabilidade.

Seo 3 Usabilidade

J foi mencionado aqui sobre usabilidade, como ela vem ganhando espao e cada vez mais utilizada em aplicaes Web. Mas, afi nal, o que a usabilidade?

Usabilidade uma caracterstica daquilo que utilizvel, funcional. tornar bvio o bvio, tendo em conta as necessidades do utilizador e o contexto em que este est inserido. Podemos relacionar usabilidade com os seguintes verbos: simplifi car, rentabilizar, otimizar, facilitar, melhorar, acelerar. Mais usabilidade sinnimo de maior fl exibilidade e de maior interao com os usurios.


37


Unidade 1

A usabilidade est em todo o lugar, praticamente em todos os produtos que o ser humano desenvolveu possvel alterar para melhor. Porm, nem sempre mudar significa que ir melhorar.

Qualquer pessoa que j tenha operado uma tev poder utilizar qualquer outra. Essa afirmao verdadeira, porm nem sempre poder utilizar no mximo de seus recursos. No so todos os detalhes que o usurio ter conhecimento, como uma funo sleep, mute, canal anterior, menu.

Agora, se alterarmos o produto como celular, forno, forno micro-ondas, lavadoras de loua, computadores, videogame. Percebemos que todos caem cabem nesse exemplo.

Desta forma, a forma que se usa um determinado produto deve ser adequado para que se torne intuitivo. Assim, quando o produto no o faz, o problema do projeto do design, da usabilidade.

Vejamos um caso de sucesso: a Apple se esfora para que seus produtos se tornem completamente intuitivo e que todo o ritual de utilizar um produto da Apple torne-se nico e de uma facilidade sem precedentes.

Botes e informaes nos devidos locais com sua hierarquia de importncia; cores e diagramao intuitivas e adequadas; comportamento adequado ao pblico. Isso usabilidade em ao. Quando um produto usvel, nem se pensa no conceito de usabilidade. O problema est quando o produto no se adqua ao utilizador. A usabilidade um caminhar progressivo em direo ao utilizador, e no o contrrio.

Na internet a usabilidade no basta, mas corresponde a uma boa parte do caminho. Se considerarmos o exemplo de uma loja online, veremos que algo simples: se um usurio no encontra um produto, no o compra. Fazer com que o utilizador encontre o que procura usabilidade em ao.

Um site tem, em uma perspectiva otimista, entre 10 e 15 segundos para convencer, por isso todos os elementos da pgina


38


precisam ser avaliados, pesados, medidos em termos de impacto. Um dos fatores mais apontados para pginas Web a velocidade de carregamento. Um usurio que espera dez segundos para uma pgina carregar, tende a desistir da visita. Todos os elementos grficos necessitam ser altamente otimizados (tamanho, qualidade, interesse). Sempre de boa prtica, verificar se todas as imagens so necessrias. Questionar se todos os elementos grficos so fundamentais. Tratando de aplicaes corporativas, esse questionamento deve ser realizado com muito mais seriedade. Aplicaes corporativas no necessitam vender um produto, mas maximizar a funcionalidade.

Um layout deve ser consistente e implementado com o foco da aplicao. O layout deve mostrar a filosofia, a ideia central em que a aplicao desempenha dentro da empresa. Cada empresa tem uma linguagem, uma imagem que o layout do site necessita sublinhar.

O layout dever ser concebido a partir do ponto onde se pretende que o usurio inicie a movimentao visual. A distribuio dos elementos e as cores escolhidas so importantssimas, normalmente os olhos movimentam-se da esquerda para a direita e de cima para baixo.

Figura 1.11 - Simulao do movimento dos olhos ao ler uma pgina Web.Fonte: Elaborada pelo autor (2010).

Esse formato indica que o layout ideal aquele que leva o usurio sempre a observar primeiro os elementos superiores


39


Unidade 1

esquerdos, normalmente utilizados em muitos sites e softwares como uma rea reservada para logotipo, aps este ponto descendo em diagonal. Os olhos procuram normalmente primeiro os elementos maiores e s depois os menores. A cor influencia, a tendncia primeiramente observamos os elementos mais escuros e s depois os mais claros.

Quando falamos de layout, sempre devemos levar em considerao a coerncia e o equilbrio do visual apresentado. No devemos imprimir um layout onde os elementos grficos sejam maiores que as informaes textuais. No caso de formulrios, devemos evitar cadastros longos. Normalmente os formulrios devem estar totalmente visveis na janela do browser.

Existe uma tcnica de avaliar o equilbrio da tela, devemos traar uma linha imaginria vertical ou horizontalmente em metade da tela. As medidas devem conter aproximadamente a mesma quantidade de texto.

Seo 4 HTML

HTML a linguagem padro de todos os browsers. Portanto, fundamental que voc conhea e entenda muito bem esta linguagem.

Os comandos HTML so representados no texto por meio de tags. O browser interpreta como tags todos os elementos HTML vlidos que estejam entre os sinais menor que (). Sua sintaxe bsica :

Descrio

Algumas tags podem ter um ou mais atributos, que definem alguma caracterstica especial. As tags permitem que voc crie atributos novos. O browser ir ignorar os atributos conhecidos. Esse artifcio permite que voc adicione caractersticas nicas


40


para cada elemento do HTML. As tags com atributos so formatadas da seguinte forma:

teste
Clula
Veja que, no exemplo, o pargrafo est sendo centralizado. J a tabela possui uma borda aparente.

Todo o documento HTML possui uma estrutura de hierarquia. Essa estrutura inicia com a identificao do documento por meio da tag . Dentro do documento, a estrutura separa em cabealho e corpo.

Teste

teste
Clula
A tag delimita a parte do documento sendo o cabealho. O cabealho onde se encontram as informaes do documento. Nenhuma informao contida dentro desse bloco deve conter informaes a serem escritas no browser. Alm de informaes de configurao da pgina, a tag informa o ttulo do documento, que ser apresentado na barra superior do browser. Essa tag deve sempre estar dentro do cabealho.

A tag contm o corpo do documento. Essa tag contm em seu interior toda a informao que ser mostrada em sua pgina. Os textos, as imagens, os formulrios, tudo que ser


41


Unidade 1

apresentado pelo browser. Os atributos dessa tag definem cores para os textos, links, imagem de fundo, entre outras caractersticas.

O HTML ainda oferece uma srie de tag que so utilizadas para formatar as informaes nele contidas. Podemos formatar textos de ttulos utilizando as tags at . A numerao representa os nveis dos ttulos.

42


Alm das tags de ttulos, as quebras de linhas e pargrafos so muito utilizadas em textos e formatao de formulrios. O HTML usa comandos especiais para definir a quebra de um pargrafo ou de uma linha.

A tag

indica a quebra de pargrafos, ela insere automaticamente uma linha em branco. O uso da tag de pargrafo pode ser feito em uma nica linha ou em bloco, esse uso opcional. O comando

permite alinhar o pargrafo dentro do documento.

Teste de pargrafos

Alinhado esquerda

Alinhado ao centro

Alinhado direita

Justificado - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste -

Como fica no browser:


43


Unidade 1

Figura 1.13 - Tags de pargrafo e alinhamento de texto.Fonte: Elaborada pelo autor (2010).

Em vez de inserirmos uma quebra de pargrafo, pode ser necessria uma quebra de linha somente. Neste caso, devemos utilizar a tag
, pois ela finaliza a linha atual e passa para a prxima. Esse elemento no utilizado em bloco. Portanto, o browser quando a encontra entende que o texto posterior a ela colocado em uma nova linha.

Teste de quebra de linhaQuebra de linha
Nova linha

O browser interpreta da seguinte forma:


44


Figura 1.14 - Tag de nova linha.Fonte: Elaborada pelo autor (2010).

A tag informa ao browser que deve interpretar o texto conforme foi digitado.

Teste de pr-formataoTexto pr-formatado. O browser interpretar exatamente desta forma que est sendo digitado. Inclusive com espaos em branco

O browser interpreta desta forma:


45


Unidade 1

Figura 1.15 - Tag de pr-formatao.Fonte: Elaborada pelo autor (2010).

Por ser uma linguagem de formatao, o HTML tambm permite alterar o estilo do texto. Como aplicar negrito, itlico, sublinhado, subscrito, entre outros.

Teste de formatao de textoTexto em negrito
Texto em itlico
Texto sublinhado
Texto sobrescrito
Texto subscrito
Almenta a fonte
Reduz a fonte


46


No browser fica assim:

Figura 1.16 - Tags de alterao de estilo.Fonte: Elaborada pelo autor (2010).

O HTML ainda possibilita a configurao da fonte de texto. O elemento utilizado a tag . Alm do elemento, ainda possvel manipular algumas informaes por meio dos atributos, como tamanho e cor da fonte.

Teste de fonte de texto Teste fonte Verdana
Teste fonte arial
Teste fonte Times New Roman
Teste fonte Tahoma
Teste fonte Lucida
Teste fonte Courier


47


Unidade 1


Figura 1.17 - Tags manipuladores de fontes.Fonte: Elaborada pelo autor (2010).

Uma das tags extremamente utilizadas em uma tentativa de tornar os layouts mais amigveis e atrativos para os usurios. Esta tag a , ela tratada tambm como camada visual em DHTML. J no HTML bsico utilizado como bloco de alinhamento horizontal.

Teste de DivUsando a TAG DIV:

Usando a TAG DIV voc pode alinhar seu texto sem problemas.

Pode utilizar o alinhamento direita, que alinha seu texto na margemdireita da tela. Como um texto criado em editor de textos para ser impresso em uma pgina.

Com a TAG DIV voc pode aproveitar o mesmo alinhamento para vriospargrafos.


48



Figura 1.18 - Tag de camadas.Fonte: Elaborada pelo autor (2010).

Uma forma de organizar as informaes dispostas no browser a utilizao de listas. As listas podem servir como resumos ou ndices de todo o site, contendo links para outras pginas. Podemos dividir as listas em trs tipos:

listas no ordenadas;

listas ordenadas ou numeradas;

listas descritivas.

As listas no ordenadas representam a formatao simples de informaes por meio de indicadores. A tag do comando a e seus tpicos so a . Podemos ainda alterar o tipo do marcador pelo atributo type da tag .


49


Unidade 1

Teste de Lista no OrdenadaTpico 2Tpico 3Tpico 4Tpico 2Tpico 3Tpico 4Tpico 2Tpico 3Tpico 4

O browser interpretar da seguinte forma:

Teste de Lista OrdenadaTpico 2Tpico 3Tpico 4Tpico 2Tpico 3Tpico 4


50


Figura 1.19 - Tags de listas no ordenadas.Fonte: Elaborada pelo autor (2010).

As listas ordenadas no possibilitam enumerar os tpicos por meio de nmeros ou em ordem alfabtica. A tag utilizada a , alm do atributo type que define o tipo de numerador, a tag possui um segundo atributo, o start. Esse atributo informa ao browser em qual nmero a lista deve iniciar.

Tpico 2Tpico 3Tpico 4Tpico 2Tpico 3Tpico 4Tpico 2Tpico 3Tpico 4


51


Unidade 1

A apresentao no browser ser:

Figura 1.20 - Tags lista ordenada.Fonte: Elaborada pelo autor (2010).

As listas descritivas so diferentes das outras listas. Essa lista inicia pela tag . Cada item de uma lista descritiva possui dois componentes: um tpico e uma descrio do tpico .

Teste de Lista DescritivasTpico 1Descrio do tpico 1Tpico 2Descrio do tpico 2Tpico 3Descrio do tpico 3

O browser deve apresentar da seguinte forma:


52


Figura 1.21 - Tags de lista descritivas.Fonte: Elaborada pelo autor (2010).

Outra funcionalidade que amplamente usada em praticamente todas as pginas da internet o link ou hipertexto. Essa funcionalidade representa a ligao primitiva entre as pginas formando a teia da internet.

Os links proporcionam a ligao entre pginas e textos da prpria pgina. Essa ligao interna utilizada principalmente em textos longos com tpicos especficos.

Os links para outras pginas podem ser classificados como locais e externos. Os links locais representam uma ligao com uma pgina que est salva no mesmo local da pgina principal. Isso significa que a pgina que est sendo acessada far uma referncia direta a outro arquivo, sem a necessidade de utilizar o protocolo HTTP. O cdigo para esse tipo de link se torna extremamente simples:

Acessar a segunda pgina

J quando tratamos de links externos, o link necessita realizar a chamada pelo protocolo HTTP.

Acessar o GoogleAcessar pgina trs em outros diretrio


53


Unidade 1

Porm, quando o acesso se tornar de ncora para uma parte do texto da prpria pgina, a sintaxe do HTML se altera um pouco:

Link de Texto (Ancora)

Tabela
AtalhosTabelas

RecursoCriando tabelas com um tecladoVantagemVoc pode capturar informaes tabulares de forma rpida e fcilSituaesReunies, apresentaes, debates pessoais

Tente agora

1. Coloque o cursor ao final da palavra Produto abaixo: Produto

2. Pressione TAB e digite Quantidade. 3. Pressione TAB novamente e digite preo. 4. Pressione ENTER. 5. Pressione TAB para passar de uma clula a outra e digite alguma informao nas clulas. 6. Pressione ENTER ao final da linha. 7. Tente pressionar TAB abaixo, aps Joo e aps Maria: Pessoa Dinheiro que lhes devo Joo Maria


54


Alm dos hipertextos, as tabelas so elementos amplamente utilizados na internet. Ela no faz nenhuma ligao com outras pginas, mas organiza de uma forma matricial qualquer dado da pgina, tanto textos como outros elementos. No caso das aplicaes, as tabelas so utilizadas para organizar o formulrio na pgina.

Quando voc domina o uso das tabelas, acaba tendo uma enorme facilidade em criar layouts organizados. As informaes so dispostas de forma mais clara para o usurio. Quando usada com as folhas de estilos CSS, tornam-se ainda mais amigveis. Porm, o prprio CSS responsvel pelo declnio no uso das tabelas para melhoramento dos layouts de pginas.

Uma tabela pode ser criada de forma simples, apenas para organizar algum elemento ou mesmo o texto que voc queira utilizar. O padro das tabelas no conter bordas. As tabelas so dispostas por linhas e clulas, apesar de no browser dar a falsa impresso que possui colunas.

Atalhos teis: ALT + ENTER insere outra linha dentro de uma clula (quando ENTER no funciona na ltima clula de uma tabela). CTRL + ENTER insere uma linha abaixo. CTRL + ALT + E, R insere uma coluna esquerda ou direita.

Alm disso, tente fazer experincias com DEL, BACKSPACE, HOME, END e ENTER em vrios pontos da tabela. Verifique os Atalhos do Teclado no Office Online para descobrir outras funes de tabela que podem ser executadas em um teclado.


55


Unidade 1

Exemplo de Tabela Linha 1 Clula 1 Linha 1 Clula 2 Linha 1 Clula 3 Linha 1 Clula 4 Linha 2 Clula 1 Linha 2 Clula 2 Linha 2 Clula 3 Linha 2 Clula 4 Linha 3 Clula 1 Linha 3 Clula 2 Linha 3 Clula 3 Linha 3 Clula 4

O browser interpreta desta forma:


56


Figura 1.22 - Tag de tabelas.Fonte: Elaborada pelo autor (2010).

Os atributos das tabelas podem alterar a aparncia, como a disposio do contedo. As bordas, o alinhamento do contedo, o espaamento entre as clulas, os espaos entre os dados e a prxima clula, entre outros, podem ser alterados.

Alguns dos mais usados so:

width - atributo que manipula a largura da tabela em relao ao browser, pode ser tratado com pixels ou percentual relativo.

height - atributo responsvel pela altura da tabela em relao ao browser, pode ser tratado com pix.els ou percentual relativo.

border - atributo que trata da espessura da borda em pixels.

cellspacing - atributo responsvel pelo espao entre uma clula e outra tratado em pixel.

celladding - atributo responsvel pelo espao entre os dados e a borda da tabela tratado em pixels.


57


Unidade 1

Procure pesquisar sobre os atributos das tabelas. Eles so de grande auxlio no desenvolvimento e na apresentao.

Atributos de clulas

Linha 1 Clula 1 Linha 1 Clula 2 Linha 1 Clula 3 Linha 1 Clula 4 Linha 2 Clula 1 Linha 2 Clula 2 Linha 2 Clula 3 Linha 2 Clula 4 Linha 3 Clula 1 Linha 3 Clula 2 Linha 3 Clula 3 Linha 3 Clula 4


58


Tabela com atributos Linha 1 Clula 1 Linha 1 Clula 2 Linha 1 Clula 3 Linha 1 Clula 4 Linha 2 Clula 1 Linha 2 Clula 2 Linha 2 Clula 3 Linha 2 Clula 4 Linha 3 Clula 1 Linha 3 Clula 2 Linha 3 Clula 3 Linha 3 Clula 4

J no browser fica:


59


Unidade 1

Figura 1.23 - Propriedade de tabela.Fonte: Elaborada pelo autor (2010).

As clulas, por sua vez, possuem atributos que so igualmente fundamentais para uma boa utilizao das tabelas. Voc pode manipular o alinhamento vertical e horizontal, a cor da clula, se o texto poder ou no ter quebra automtica de linha, entre outras.


Figura 1.24 - Propriedades de clulas.Fonte: Elaborada pelo autor (2010).

Como voc pode notar, a estrutura da tabela sempre tender a um ajuste automtico. Ou seja, todas as clulas da mesma ordem so foradas a assumir a caracterstica que define o tamanho de uma clula.


60


As linhas no fogem regra, voc pode utilizar alguns atributos como cor, alinhamento, entre outros. Lembre-se sempre que os atributos da linha modificaro todas as clulas contidas nela.

Os atributos das clulas e das linhas podem auxili-lo de forma surpreendente, procure pesquisar mais sobre quais so e como utiliz-los.

As clulas e as linhas ainda podem ser mescladas. Esse artifcio muito utilizado para facilitar a organizao das informaes. Para mesclar as clulas de uma mesma linha, utilize o atributo colspan e o nmero de clulas que voc est mesclando. J para mesclar clulas de linhas diferentes, utilize o atributo rowspan e o nmero de clula que voc est mesclando.

Tabela Mesclando Clulas Linha 1 Clula 1 Linha 1 Clula Mesclada 2 - 3 - 4 Clula 1- Linhas 2 e 3 mescladas Linha 2 Clula 2 Linha 2 Clula 3 Linha 2 Clula 4 Linha 3 Clula 2 Linha 3 Clula 3 Linha 3 Clula 4


61


Unidade 1

A apresentao no browser fica:

Figura 1.25 Mesclando clulas.Fonte: Elaborada pelo autor (2010).

Os formulrios so utilizados em todas as aplicaes Web com base em HTML. O formulrio possibilita ao usurio entrar com informaes destinadas ao servidor. Estes, por sua vez, processam e devolvem uma resposta. Os formulrios no processam as informaes. Essa responsabilidade efetuada por um interpretador no servidor, como o caso do ASP ou PHP. O interpretador ASP l os dados imputados do formulrio e realizar as instrues contidas no programa. Aps o trmino, remete para o usurio o carregamento completo.

Uma linguagem Server-side, como o ASP, podem ser utilizadas de diversas formas. Podemos relacionar algumas:

processar as requisies e os dados enviados pelo usurio por meio de formulrios;

tornar-se uma interface entre HTML e banco de dados SQL, fazendo a converso da transao HTML para SQL e vice-versa;

converter dados do sistema em HTML gerando respostas para o cliente.


62


Os scripts ou programas so escritos em linguagens compatveis com a plataforma sob a qual o servidor est rodando e devem produzir arquivos executveis.

Os elementos de um formulrio so definidos separadamente. Na definio do formulrio, voc informa o local do programa (CGI, ASP, PHP) que controlar o formulrio e a forma ou o mtodo como os dados sero enviados para o servidor.

A tag utilizada para o formulrio o form. Essa tag possui atributos que definem o destino do formulrio, o mtodo de envio, o nome, entre outros. Sobre esses atributos, podemos relacionar:

method: define o mtodo utilizado pelo servidor para receber os dados do formulrio. Este atributo pode receber dois valores:

post: mtodo que transmite toda a informao do formulrio incorporada no documento do HTML;

get: anexa o contedo do formulrio ao endereo da URL, possui limitao de tamanho das informaes;

action: especifica o programa ou a pgina do servidor que processar os dados do formulrio;

name: define o nome do formulrio.

Os elementos de formulrio so campos destinados a receber dados do usurio. Os mais utilizados so: input, select, textarea.

a) Elemento input

O elemento input de longe o mais utilizado. Sua configurao grfica varia conforme os valores do atributo type. Visualmente pode variar de uma caixa de texto para um boto.

Os principais atributos deste elemento so:


63


Unidade 1

type - define o tipo de entrada que o elemento ser:

text - campo simples de entrada de texto, utiliza como principais atributos associados: type, name, value, size, maxlength.

password - texto protegido, no possvel visualizar os caracteres digitados, utiliza como principais atributos associados: type, name, value, size, maxlength.

hidden - utiliza como principais atributos associados: type, name, value.

radio - elemento com um boto de seleo nica, utiliza como principais atributos associados: type, name, value, checked.

checkbox - caixa de seleo onde pode ser checado diversos elementos, utiliza como principais atributos associados: type, name, value, checked.

reset - boto responsvel em limpar os dados do formulrio, utiliza como principais atributos associados: type, name, value.

submit - boto responsvel em enviar o formulrio para o servidor, utiliza como principais atributos associados: type, name, value.

image - mesma funo no atributo submit, porm o boto associado a uma imagem, utiliza como principais atributos associados: type, name, value, src.

button - cria um boto sem ao predefinida, utiliza como principais atributos associados: type, name, value.

file - abre uma janela para selecionar arquivo, utiliza como principais atributos associados: type, name, value.

name - nome do campo ou da varivel.

src - local no servidor onde a imagem deva ser carregada.

value - valor default do campo.


64


checked - indica que o campo deve estar marcado ou no como padro. Quando no possuir valor atribudo assume true.

size - define o tamanho do campo, ou seja, a quantidade de caracteres que ser exibida em campos do tipo text e password.

maxlength - define a quantidade de caracteres que o campo pode receber em campos do tipo text e password.

Teste formulrio

Caixa de texto comum: Texto protegido por senha: Botes de Radio: Qual o seu time? Flamengo Vasco Checkboxes: Que softwares voc cohece? Word Excel


65


Unidade 1

O browser fica:

Figura 1.26 - Formulrios, entrada de dados dos usurios.Fonte: Elaborada pelo autor (2010).

b) Elemento select

O elemento select trata-se de uma lista de itens que podem ser selecionados pelo usurio. Esta seleo pode se dar de forma nica ou mltipla, dependendo dos atributos que o elemento possa ter.

Firefox Boto de Envio: Boto de Limpeza: Tipo File:


66


name - atributo nome do elemento.

size - atributo representa a quantidade de linhas que a lista mostrar.

multiple - define o tipo de seleo da lista. Caso este atributo esteja presente, a lista ter seleo mltipla.

option - esta tag representa a lista propriamente dita. Define cada opo da lista, as opes devem ser definidas entre as tags

67


Unidade 1

O browser aparecer da seguinte forma:

Figura 1.27 Elemento select (combobox).Fonte: Elaborada pelo autor (2010).

Qual seu estado civil Casado Solteiro Divorciado Vivo


68


a) Elemento textarea

Trata-se de uma caixa de texto para serem digitadas vrias linhas de dados. Este tipo de elemento utilizado quando o usurio necessita digitar um grande volume de informao. Normalmente com vrias linhas de texto. Os principais atributos so:

name - atributo nome do elemento.

rows - nmero de linhas da caixa de texto.

cols - nmero de colunas da caixa de texto.

texto - define o texto que aparecer como default.

Formulrio TextArea Digite seu comentrio Pode digitar aqui!

O browser interpretar da seguinte forma:


69


Unidade 1

Figura 1.28 - Elemento de rea de texto.Fonte: Elaborada pelo autor (2010).

Voc pode relembrar alguns dos elementos do HTML. Estes elementos so fundamentais para um bom entendimento de como o desenvolvimento da aplicao realizada e como pode ser controlada.

O HTML exposto nesta seo descreveu diversos elementos nos quais voc utilizar durante o curso. Pesquise e aprofunde seus conhecimentos buscando mais elementos e atributos que possam auxili-lo no desenvolvimento.


70


Seo 4 Integrao de linguagens

As aplicaes Web possuem um alto nvel de integrao entre as linguagens, uma vez que a plataforma em que desenvolvida no proporciona todas as facilidades e ferramentas para que possamos construir uma soluo amigvel.

Quando falamos de integrao, entenda que nos referimos troca de informaes entre uma linguagem e outra por meio de tecnologias disponveis.

Vamos tentar entender desta forma. Via de regra, linguagens no conversam entre si. Para superar esse obstculo, possvel utilizar alguns artifcios para que possamos alcanar os objetivos.

Como j vimos, o HTML a linguagem utilizada para que o browser interprete os dados de uma forma padronizada e formatada. Vimos ainda que as linguagens server-side so responsveis por processar as informaes provenientes do HTML. Ento, como podemos resgatar as informaes de um servidor e escrever de forma dinmica?

Basicamente existem duas formas de enviar informaes para o servidor via HTML. So os mtodos GET e POST.

a) Mtodo GET

O mtodo GET usado quando, no endereo da pgina Web, informaes so encapsuladas para serem lidas pelo servidor. Este encapsulamento pode ser feito de duas formas: escrita da url e por formulrios.

Quando voc utiliza o mtodo GET no formulrio HTML, toda a informao contida no bloco form enviada pela url. Para utilizar, basta colocar na tag form o atributo method=GET e automaticamente ser processado desta forma.

Usando de uma forma prtica, teramos o seguinte formulrio HTML:


71


Unidade 1

Mtodo Get Marca : Modelo: Combustvel : Cor : Ano :


72


Repare que est sendo enviado para um arquivo de processamento ASP chamado Dadosget.asp. Neste arquivo onde se trabalha a diferena de requisio do formulrio. Portanto, teramos o seguinte cdigo:

Processamento dados GET Dados do Automvel:

O comando Response.Write apenas escreve na pgina. J o comando Request.querystring recupera a informao contida nos campos do formulrio. Desta forma, temos um Request.querystring para cada campo do formulrio que ser recuperado.

Ainda para ilustrar, voc pode perceber que a url montada com os valores dos campos contidos no formulrio.

Figura 1.29 - Recuperao de dados por meio do mtodo GET.Fonte: Elaborada pelo autor (2010).


73


Unidade 1

Outra forma de utilizar este mtodo escrever manualmente na url quais so os parmetros que deseja. Este mtodo normalmente utilizado nos links das pginas.

Quando voc digita o endereo , entrar no site da EaD da Universia. Porm, se voc quer acessar uma notcia especfica, deve acessar:

74


Processamento dados Post Dados do Automvel:

Veja que agora se altera o comando para recuperao da informao, mas a estrutura a mesma. Perceba que agora a url no possui parmetros algum. Toda a informao est contida no corpo do HTML.

Conter dois comandos distintos para recuperar as informaes do formulrio um padro entre as linguagens.

Agora que enviamos os dados para o servidor podemos processar o retorno da informao. Normalmente esse retorno est associado a uma busca no banco de dados e a aplicao das regras de negcio sobre essa informao. Quando se envia o resultado, podemos utilizar a forma mais bsica para interagir as linguagens Server-side com as Client-side: as linguagens Server-side escrevem as linguagens Client-side.

Como as linguagens Server-side so executadas no servidor, elas so processadas antes que a informao chegue ao browser. Assim, tm-se as respostas prontas para serem formatas conforme a necessidade e possibilitando a adequao das linguagens Client-side como o HTML e Javascript.


75


Unidade 1

Ateno!Todo o browser possui um tempo de espera da resposta do servidor. Quando um processamento no servidor for muito demorado, o browser interpretar que a conexo com o servidor no existe mais e no receber resposta. Assim sua aplicao ir gerar um erro pelo simples fato de estar com um processamento muito elevado.

A tecnologia est sempre em constantes alteraes e inovaes. Procure pesquisar e manter-se atualizado sobre as novas tendncias que esto surgindo.

Sntese

Durante esta unidade voc viu como possvel identificar uma aplicao Web e como ela trabalha conceitualmente. Voc estudou sobre a importncia do HTML e como utilizar formulrios e seus atributos.

Percebeu que, apesar de o HTML ser uma linguagem simples, possui diversas opes que apresentam variaes significativas.

Para finalizar, voc viu ainda que existem diversas linguagens disponveis para o seu aprendizado, mas todas compartilham dos mesmos conceitos aqui vistos.


76


Atividades de autoavaliao

Ao final de cada unidade, voc ser provocado a realizar atividades de autoavaliao. O gabarito est disponvel no final do livro-didtico. Mas se esforce para resolver as atividades sem ajuda do gabarito, pois assim voc estar estimulando a sua aprendizagem.

1) Voc viu diversas utilidades para as aplicaes Web. Cite e comente duas vantagens e duas desvantagens de uma aplicao Webtop.

2) As aplicaes Web possuem diversas linguagens que podem ser classificadas como Server-side e client-side. Com base nesta afirmao, enumere a segunda coluna de acordo com a primeira.

1 Linguagem Server-side ( ) PostgreSQL

2 Linguagem Client-side ( ) HTML

( ) Oracle

( ) SQLite

( ) Javascript

( ) Microsoft Silverlight

( ) PHP

( ) MySQL

( ) ASP

( ) DB2

( ) .NET

( ) CGI

( ) Perl

( ) Java


77

Linguagem de Programao III

( ) CSS

( ) Python

( ) Microsoft SQL Server

( ) Ruby

( ) Firebird

( ) ColdFusion

( ) Websphere

( ) Flash

3) Voc viu a importncia do HTML e como ele necessrio para o desenvolvimento Web. Viu tambm como existem diversos atributos que manipulam aparncia e em alguns casos os dados que existem neles. Qual o limite de atributos que podemos utilizar em cada tag?

Saiba mais

Se voc desejar, aprofunde os contedos estudados nesta unidade ao consultar as seguintes referncias:

W3Schools. W3Schools Online Web Tutorials, 2010. Disponvel em: . Acesso em: 01 mar. 2010.

W3C. World Wide Web Consortium, 2010. Disponvel em: . Acesso em: 2 mar. 2010.


2UNIDADE 2JavaScriptObjetivos de aprendizagem

Ao final do estudo desta unidade, importante que voc:

Identifique os elementos do Javascript.

Compreenda a sintaxe da linguagem.

Conhea os principais comandos do Javascript.

Sees de estudo

Seo 1 JavaScript aplicado

Seo 2 Tipos de dados

Seo 3 Elementos de linguagem

Seo 4 Scripts JS


80


Para incio de estudo

A linguagem JavaScript possui a caracterstica de ser client-side, ou seja, o browser se encarrega de interpretar seu cdigo. Por causa disso, existem ligeiras diferenas nesta interpretao. A linguagem a mesma para qualquer browser, porm as aes dos browsers divergem um pouco uma das outras. Essas divergncias proporcionam chamadas de eventos distintas, alm de interpretaes de aes diferenciadas como a captura das aes de teclas.

O JavaScript uma linguagem simples, porm extremamente poderosa. Foi concebida inicialmente pela Netscape e teve forte colaborao da Sun Microsystems, empresa responsvel pela linguagem Java. Existe uma discusso sobre o JavaScript ser ou no orientada a objetos. A prtica mostra que ele possui acesso e comportamento de uma linguagem orientada a objetos. Mas esses recursos so limitados e sua programao feita de forma estruturada acessando, quando necessrios, os recursos de orientao a objetos.

Essa linguagem amplamente conhecida e divulgada como JavaScript, j a verso produzida pela Microsoft foi concebido o nome de JScript. Porm, tratam-se de implementaes que sendo fiis norma ECMAScript lhe acrescentaram novas funcionalidades teis, mas respeitando sempre as especificaes oficiais.

Vale lembrar que JavaScript no Java e que a grande semelhana consiste apenas nome.

Seo 1 JavaScript aplicado

O JavaScript trabalha com os elementos do HTML de forma a conceitu-los como objetos a serem acessados. Assim todos os elementos existentes em uma pgina Web so transformados


81


Unidade 2

em objetos pelo JavaScript. Internamente so criados objetos que permitem aos usurios criarem novos objetos dependo da necessidade. Durante o carregamento da pgina, o JavaScript cria os objetos em uso com suas respectivas propriedades e valores que so ajustados pelo contedo da prpria pgina.

Qualquer objeto JavaScript possui uma hierarquia que deve ser respeitada. Cada propriedade pode ser acessada descrevendo toda a hierarquia que se segue.

Figura 2.1 - Hierarquia dos objetos do Javascript.Fonte: JavaScript aplicaes interativas para a Web (2006).

A figura 1 representa a hierarquia de objetos do JavaScript. Veja que vrios objetos so filhos de outros, e para acessar o filho temos de escrever todo o caminho a ser percorrido at ele. Assim, se desejamos acessar a propriedade form, devemos primeiramente acessar o objeto document separando-os por ponto:

document.form

Esta forma hierrquica de chamadas dos objetos HTML so sempre utilizadas no JavaScript. Assim como as chamadas dos mtodos de cada objeto.

O JavaScript permite omitir o objeto window, uma vez que considera todos os objetos da pgina esto abaixo desse objeto. Assim, o exemplo anterior pode ser escrito como: document.form.


82


Todo o objeto do JavaScript possui caractersticas que podem ser manipuladas. A essas caractersticas damos o nome de propriedades. Podemos dizer ento que o objeto form uma propriedade do objeto document. Assim como esse mesmo objeto document possui outras propriedades que no so objetos como a propriedade title.

Alm das propriedades, existe mais um conjunto de atribuies que so deno

Documents

Livro Linguagens de Programacao III Unisul