Teste 1 1.Marque a afirmativa que corresponde as assertivas abaixo: a. Um sitio da Web 2.

0 tem o seu conteudo com informacoes geradas por empresas. b. Os anuncios sao contratados por exibicao na Web 2.0. c. Os buscadores usam categorias na Web 2.0. 1) Todas estao corretas. 2) primeira e a u!tima estao corretas. ") #omente a u!tima esta correta. Resposta: Somente a primeira esta errada. $) #omente a segunda esta errada. 2.Marque a resposta que so possui caracteristicas Web 2.0: 1) %oog!e dsense& Wi'ipedia& (ritania On!ine. 2) Website pessoa!& (it Torrent& )age *ie+s. Resposta: Inteligencia Coletiva, Folksonomy, Blogging. ,) Taxonom-& .apster& 'amai. $) Ofoto& Web #ervices& /!ic'r. ". tecnica que permite um c!ique que& em um !in' ou em um botao de formu!ario& atua!i0a as informacoes da pagina atua! sem que se1a necessario carregar uma pagina inteira c2ama3se: 1) 4ot..et. Resposta: Aja . ") )5). ,) #crum. $) #). ,.6uando foi definido o termo Web 2.0: 1) o W"7 determinou que a Web 2avia passado por muitas transformacoes e deveria ser encarada de outra forma. 2) T8M (erners39ee apresentou um novo conceito sobre uso da 8nternet. ") a construcao de paginas passou a usar recursos que eram muito modernos e que os Webdesigners c2amaram de Web 2.0. ,) a Microsoft passou a pub!icar o termo em seu site e os profissionais de informatica passaram a usa3!o. Resposta: nome !sado em !ma serie de con"erencias da #$Reilley. Teste % 1.Marque a afirmativa que corresponde as assertivas abaixo: a. Um interface rica somente pode ser feita usando o /!as2. b. O :avascript pode ser usado sem estar associado ao 1ax. c. )ode ser feito o drag and drop ;arrastar e so!tar) nas interfaces ricas. 1) Todas estao corretas 2) primeira e a u!tima estao corretas ") #omente a u!tima esta correta ,) #omente a primeira esta correta Resposta: Somente a seg!nda e a terceira estao corretas 2.Marque a tecno!ogia que nao possui re!acao ao desenvo!vimento de <8 . 1) 1ax 2) =5TM9 Resposta: &'() ,) /!as2 $) 4OM ". acao de um botao de um formu!ario em uma interface rica deve ser desenvo!vida de que forma> 1) Usando um botao do tipo #U(M8T para c2amar outra pagina. Resposta: *sar o evento onClick para c+amar a "!ncao ,!e ira "a-er a c+amada ao o.jeto /&01ttpRe,!est. ") Usando um botao do tipo <?#?T para c2amar outra pagina. ,) Usar o evento on7!ic' para c2amar a funcao que ira fa0er a c2amada ao metodo submit;) do formu!ario. $) Usando um botao do tipo (UTTO. para c2amar outra pagina@arquivo que esta configurada no atributo action da tag form.

,.Marque um uso que nao pode ser feito com a tag A48*B em uma pagina =5TM9. Resposta: Ser a rai- a pagina /1T&0. 2) presentar texto. ") *erificar se o mouse esta sobre e!e. ,) Ocu!tar uma parte da pagina. $) 7arregar um formu!ario. Teste 2 1.O que e #%M9> 1) Tecno!ogia para criar paginas Web 2) 8mp!ementacao que contem todas as tags do 5TM9 ") sig!a significa #-stem %!oba! Mar'up 9anguage Resposta: &etaling!agem ,!e de"ine as ling!agens de marcacao $) #urgiu a partir do 5TM9 para que fosse criado o =5TM9 2.7omo sao enviados os dados de um formu!ario quando e!e uti!i0a o metodo A%?TB> Resposta: Atraves da *RI. A parte ,!e contem os campos e os dados e c+amada de ,!erystring. 2) #ao enviados 1unto com a requisicao da pagina. ") #ao enviados da mesma forma que o metodo A)O#TB. ,) #ao enviados obrigatoriamente por : =. $) O metodo A%?TB nao envia dados apenas so!icita um recurso do servidor. ". tag A48*B possui varias uti!i0acoes marque a opcao que descreve uma funciona!idade que nao pode ser rea!i0ada pe!a tag. 1) C uti!i0ada para a construcao de menus suspensos ;menus drop do+n). 2) )ermite a montagem do !eiaute ;!a-out) de uma pagina& con2ecido como tab!e!ess. Resposta: (nvio de "orm!lario preenc+ido pelo !s!ario. ,) presentacao de mensagens para o usuario. $) ?xibir e ocu!tar areas da pagina. Teste 3 1.Marque a afirmativa errada: Resposta: # ar,!ivo e terno seg!e as regras do /&0 2) Todas as configuracoes ;formatacoes) devem ser terminadas com um ponto e virgu!a& sendo opciona! na u!tima do esti!o ") )odemos !istar varias tags antes das c2aves& todas e!as terao o esti!o ap!icado ne!as ,) )odemos configurar as !in2as em vo!ta do texto& sendo cada uma com uma cor diferente $) Um dos pseudo e!ementos funciona da mesma forma que eventos& sendo acionado por acoes do usuario enquanto usa a interface 2.)odemos co!ocar os esti!os em tres !ocais diferentes& assina!e a afirmativa correta: 1) criacao de esti!o in!ine permite que se a!tere todo esti!o de um sitio de uma forma faci! 2) Os esti!os incorporados nunca devem ser usados& pois precisam ser reescritos varias ve0es na mesma pagina Resposta: *m estilo inline pode alterar a con"ig!racao especi"icada em !m ar,!ivo e terno para a s!a tag ,) Uma pagina so pode possuir um unico esti!o externo $) Um formatacao usada em um esti!o incorporado a!tera a formatacao de um esti!o in!ine para a sua tag Teste 4 1.O padrao atua! usado para !inguagens scripts c!ientes interpretada pe!os navegadores e o ?7M #cript32D2Marque a afirmacao correta sobre :avascript: Resposta: # padrao at!al !sado para ling!agens scripts clientes interpretada pelos navegadores e o (C&AScript5%6% 2) :avascript e :script foram criadas pe!a .etscape& a segunda foi uma a!teracao da primeira para funcionar no 8nternet ?xp!orer ") Um script feito em :avascript funciona da mesma forma em todos os navegadores ,) O :avascript tem esse nome por ter sido criada a partir do :ava $) Microsoft !ancou o :avascript primeiramente e a .etscape copiou a !inguagem& co!ocando3a em seu navegador 2.Marque a opcao que informa um !oca! inva!ido para ser co!ocado um codigo :avascript em um documento =5TM9 va!ido:

1) 4entro da macacao EscriptE& no interior da marcacao E2eadE. 2) 4entro da macacao EscriptE& no interior da marcacao Ebod-E. ") 4iretamente no evento de um ob1eto. Resposta: 7entro da macacao 8script8, apos a marcacao 8+tml8. $) ?m um arquivo externo& sem a marcacao script. ". s estruturas da !inguagem permitem que repitamos o nosso codigo ou que facamos que apenas parte do codigo se1a executada. Marque a estrutura a opcao que possui a exp!icacao correta para a sua estrutura. 1) for F principa! estrutura de repeticao& uti!i0a uma unica instrucao entre os parenteses Resposta: i" 9 estr!t!ra de selecao ,!e poss!i !m complemento :8else8; para ,!e seja e ec!tado apenas !m dos dois conj!ntos de instr!coes. ") +2i!e F estrutura de se!ecao que permite que um con1unto de instrucoes se1a executado ou nao ,) do F possui um par que informa se o con1unto de instrucoes continuara sendo executado& isso ocorre caso o va!or testado se1a fa!so. $) s+itc2 F estrutura de se!ecao que uti!i0a os operadores re!acionais para determinar qua! opcao sera executada. ,.O evento e a porta do funcionamento das interfaces para os sistemas operacionais de 1ane!a. 7riamos codigos para tratar as operacoes que o usuario ira rea!i0ar com a te!a. interface de um sistema que precise que o c!iente arraste uma imagem do produto para a imagem do produto precisara acompan2ar varios eventos& marque a opcao que !ista eventos que podem ser usados nesse cenario. 1) on!oad F onmouseover 2) onse!ect F on!oad ") onmouseover 3 onsubmit Resposta: onclick 5 onmo!seover $) onsubmit 3 onfocus Teste 6 1.O 45TM9 teve seu inicio em que epoca: 1) /oi introdu0ido no navegador .etscape 2.0 1unto com todas as novidades que e!e trouxe. 2) O 8nternet ?xp!orer revo!ucionou a Web ao apresentar a versao ".0 do seu navegador& e!e contemp!ava a criacao de esti!os com 7##& permitindo a tecnica 45TM9. Resposta: As versoes 3.< dos navegadores =etscape e Internet ( plorer permitiram o desenvolvimento com 71T&0, apesar da grande di"ic!ldade e istente na veri"icacao de erro. ,) O 4OM e o 7## foram introdu0idos no 5TM9 ,.0& so sendo possive! construir 45TM9 para as versoes $.0 dos navegadores 8? e .#. $) O 4OM& o 7## e o :avascript 1a eram tota!mente contemp!ados na versao ".2 do 5TM9& tornando possive! o seu uso comp!eto nas versoes dos navegadores compativeis com essa versao do 5TM9. 2. recomendacao +"7 para se recuperar um campo de formu!ario na estrutura da pagina e: 1) Usar o nome do formu!ario e o nome do campo diretamente apos o ob1eto EdocumentE. 2) Usar o id do formu!ario e o id do campo diretamente apos o ob1eto EdocumentE. ") Usar o metodo get?!ement(-.ame do ob1eto EdocumentE. Resposta: *sar o metodo get(lementById do o.jeto 8doc!ment8. $) Usar o nome do formu!ario e o id do campo apos o ob1eto EdocumentE. ".4evemos usar par recuperar o botao tec!ado do mouse: 1) onmouseover do Ebod-E 2) onmousec!ic' dos e!ementos do 4OM ") onmousedo+n do EdivA ,) evento do ob1eto mouse Resposta: atraves da propriedade .!tton do o.jeto event. ,. verificacao do navegador e sua versao pode ser feita atraves de: Resposta: Atraves das propriedades app=ame e app>ersion do o.jeto 8navigator8. 2) traves das propriedades app.ame e app*ersion do ob1eto Ebro+serE. ") Usando document.app.ame e document.app*ersion. ,) traves das propriedades app.ame e app*ersion do ob1eto E+indo+E. $) Usando +indo+.parent.ode que ira retornar o navegador que esta sendo usado& podendo ser recuperados os va!ores das propriedades app.ame e app*ersion.

Teste ? 1.Marque a unica afirmativa correta sobre 16uer-: 1) C um fame+or' para acesso a bancos de dados atraves de consu!tas ;queries) 2) C baseado no fame+or' protot-pe& assim como <ub- on <ai!s Resposta: @ !m "ameAork javascript ,!e visa dimin!ir a ,!antidade de codigo escrito ,) criacao dos se!etores dificu!taram a criacao com o frame+or' $) Os p!ugins sao desenvo!vidos pe!a equipe do 16uer- para que se1a mantida a comaptibi!idade 2.16uer- possui um metodo AcssBpara os ob1etos recuperados com se!etores. Marque a questao que informa tipos de se!etores va!idos. Resposta: a marcacao, atri.!to id e nome da classe. 2) atributos id e name de uma marcacao. ") o id seguido da c!asse para recuperar uma marcacao especifica. ,) o nome da marcacao seguido do va!or do atributo name dos e!ementos fi!2os. $) usamos os se!etores com o metodo get?!ement(-8d. "./oi introdu0ido no navegador .etscape 2.0 1unto com todas as novidades que e!e trouxe. 1) O 8nternet ?xp!orer revo!ucionou a Web ao apresentar a versao ".0 do seu navegador& e!e contemp!ava a criacao de esti!os com 7##& permitindo a tecnica 45TM9. Resposta: As versoes 3.< dos navegadores =etscape e Internet ( plorer permitiram o desenvolvimento com 71T&0, apesar da grande di"ic!ldade e istente na veri"icacao de erro. ") O 4OM e o 7## foram introdu0idos no 5TM9 ,.0& so sendo possive! construir 45TM9 para as versoes $.0 dos navegadores 8? e .#. ,) O 4OM& o 7## e o :avascript 1a eram tota!mente contemp!ados na versao ".2 do 5TM9& tornando possive! o seu uso comp!eto nas versoes dos navegadores compativeis com essa versao do 5TM9. Teste B 1.Marque a unica afirmativa errada sobre /!as2: 1) )ermite que construamos formu!arios de cadastro Resposta: 'oss!i !ma ling!agem propria c+amada Flas+script ") !in2a do tempo contro!a determina o que esta sendo apresentado no momento ,) ?xistem tres tipos de simbo!os $) O pa!co e o !oca! onde sao co!ocados os e!ementos que poderemos interagir 2. 84? do /!as2 e uma ferramenta com muitos recursos& e!a permite que facamos desen2os& contro!emos nossos simbo!os e programemos. 6ua! o e!emento que tem o funcionamento igua! a de um fi!me /!as2> 1) %rafico 2) (otao ") <etangu!o ,) 7omponente Resposta: Clipe de Filme ".?sco!2a a opcao correta para uso de recursos do /!as2: Resposta: As cenas permitem ,!e ten+amos telas di"erentes, "acilitando a criacao de "ases em jogos, a criacao de 8paginas8 di"erentes em !m site. 2) Os simbo!os servem para a organi0acao das informacoes na te!a. ") Usamos as camadas para organi0ar os desen2os& sendo obrigatorio a co!ocacao de desen2os ou simbo!os em todas as camadas. ,) 1ane!a propriedades permite que a!teremos as configuracao de um e!emento da te!a& inc!usive a conversao para simbo!o. $) Todos os icones da E(arra de /erramentasE possuem um sub3menu para se!ecionar a ferramenta especifica. ,. programacao em /!as2 permite que os fi!mes se1am mais do que simp!es sequencia de quadros& passando a ser uma interface interativo com varios recursos. Marque a opcao errada em re!acao a codificacao: 1) dec!aracao de variaveis com c!asses que nao este1am no mesmo pacote exige que se1a feita a importacao da c!asse ou que se informe o camin2o comp!eto. 2) )odem ser usadas c!asses existentes no ambiente e c!asses definidas pe!o desenvo!vedor na definicao de variaveis. ") O e!emento pode perceber uma acao sobre e!e& essa acao dispara um evento. 4evemos adicionar um escutador ao ob1eto para perceber que o evento ocorreu& associando a funcao que sera executada. Resposta: # Flas+ controla a posicao dos elementos atraves do !so das propriedades 8top8 e 8le"t8 do o.jeto, possi.ilitando ,!e se crie .otoes para altera5las.

$) )ode ser contro!ada a execucao do fi!me& um exemp!o e a possibi!idade de se desviar a execucao para um quadro especifico& mesmo que e!e pertenca a uma outra cena. Teste C 1.Um arquivo =M9 permite que troquemos dados entre sistemas de p!ataformas diferentes. O uso da meta!inguagem para a criacao de documentos forneceu avancos para a criacao de padroes mais faci!mente entendidos por programas. Marque a afirmacao errada em re!acao ao manuseio de dados =M9 em paginas : =. 1) )odemos criar um e!emento atraves do metodo create?!ement do ob1eto document. Resposta: *samos elemento.get(lementsByTag=ame:8nomeDdeDelementoD"il+o8;E<F.node>al!e para rec!perar o te to ,!e "ica entre o par de a.ert!ra e "ec+amento do elemento. ") )odemos andar pe!os fi!2os na 2ierarquia usando a propriedade c2i!d.odes ou com o metodo get?!ements(-Tag.ame. ,) O metodo createText.ode do ob1eto document permite que co!oquemos texto entre o par de abertura e fec2amento do e!emento. $) O metodo append72i!d pode ser usado em qua!quer e!emento para adicionarmos um fi!2o ao e!emento. 2.O ob1eto =M95ttp<equest muda de estado ;read-#tate) durante o processamento da requisicao. ava!iacao do estado permite que tomemos providencias& o processo termina quando c2ega ao va!or quatro. )odemos criar uma funcao para tratar o retorno recebido pe!o ob1eto. Marque a questao errada sobre o processamento do ob1eto. Resposta: # metodo de envio so pode ser "eito por 8)(T8, pois e enviada !ma !rl e nao temos campos de "orm!larios dentro da "!ncao. 2) Usamos o estado 200 que informa que a requisicao foi comp!eta com exito para tratarmos o retorno dos dados. ") O ob1eto pode recuperar a informacao recebida como texto ;reponseText) ou como =M9 ;response=M9)& para traba!2armos com :#O. e usado o retorno de texto. ,) O metodo open do ob1eto permite que se informe o endereco da pagina que sera requisitada. $) O metodo send envia a requisicao para o servidor Web enquanto o open apenas configura. Teste 1< 1. Marque a caracteristica que nao tem re!acao com o desenvo!vimento dot .et: 1) 8mp!antacao simp!ificada Resposta: Compilacao !nica ") 8nteroperabi!idade ,) #eguranca $) 8ndependencia de !inguagem 2.#imbo!o usado para se representar 2eranca na dec!aracao de uma c!asse: 1) 3G 2) . ") H Resposta: : $) I ". Marque a opcao que possui a definicao correta para o modificador de acesso: 1) protected 3 )ermite acesso pe!a c!asse e por c!asses fi!2as 2) private 3 )ermite acesso no mesmo programa e por c!asses fi!2as Resposta: protected 5 'ermite acesso no mesmo programa ,) pub!ic 3 )ermite acesso apenas pe!a propria c!asse $) private F .ao possui restricoes& qua!quer c!asse pode acessa3!a diretamente ,. O frame+or' dot .et possui ob1etos para tratamento de acesso ao banco de dados. Marque o espaco de nomes ;namespace) que nao cu1a fina!idade nao e possuir c!asses para manuseios de dados persistidos. 1) #-stem.4ata.O!e4( 2) #-stem.4ata.#q!T-pes Resposta: System.7ata.S,lT7S ,) #-stem.4ata.#q!7!ient $) #-stem.4ata. 7ommon $. Marque a caracteristica que nao tem re!acao com o ambiente de desenvo!vimento *isua! Web 4eve!oper:

1) )ermite o uso da !inguagem *(..?T 2) )odemos criar uma conexao com auxi!io de caixas de dia!ogos ") C possive! acessar gerenciadores de banco de dados de outras empresas& desde que exista um driver dot.net para e!e ,) C possive! exibir dados de uma tabe!a do banco em uma pagina Web sem se escrever uma !in2a de codigo Resposta: ling!agem de acesso ao .anco de dados &ySG0 !sada nele e o '1'. A!la 1 ?*O9U7 O 4 W?( Web passou por varias transformacoes desde sua criacao& o ob1etivo inicia! era para podermos inter!igar documentos& permitindo que as pessoas pudessem acessar as fontes usadas em pesquisas& continuacoes de traba!2os. Os navegadores evo!uiram e passaram a ter mais recursos& a recon2ecer uma gama maior de marcacoes ; tags )& forcando ao 7onsocio gestor da Web a incorporam a!gumas no padrao do 5TM9. O uso da Web cresceu em uma ve!ocidade e uma dimensao nunca esperada. 7omecou3se a usar a Web para varios fins diferentes& criou3se o comercio e!etronico& as animacoes em %if animado foram substituidas por fi!mes em /!as2& a Web rea!mente mudou. 9%U.# / TO# 1JJ0 F T8M (erners39ee pub!ica uma proposta para a Wor!d Wide Web 1unto com <obert 7ai!!iau 1JJ1 F 9ancamento do .7# Mosaic ;.7# 3 7entro .aciona! de #upercomputacao p!icada) 1JJ, F :im 7!ar' e Marc ndreessen se 1untam e fundam a Mosaic 7ommunications& que posteriormente foi rebati0ada para .etscape 7ommunications. 1JJ$ F Microsoft !anca o 8nternet ?xp!orer. 1JJJ F C !ancada a versao $ do 8nternet ?xp!orer. O navegador 1a possuia a )8 =M95ttp<equest. 2000 F Microrft disponibi!i0a o Out!oo' Web ccess& c!iente de emai! que usava o navegador como frontend e uti!i0ava a tecnica 1ax de contrucao de ap!icacao Web. 2002 F O pro1eto Mo0i!!a inc!ui uma versao comp!etamente funciona! ns8=M95ttp<equest& permitndo que crie ap!icacoes 1ax no navegador. 200, F #afari !anca uma versao com a )8. 200$ F Konqueror e Opera !anca a sua versao com a )8 O desenvo!vimento de sitios poderia ter mudado desde 2000 com a possibi!idade inc!uida pe!a Microsoft& mas os programadores ainda estavam se acostumando com as possibi!idades criadas pe!as !inguagens Web e os outros navegadores ainda nao ofereciam suporte a )8& !imitando o uso desses tipos de pagina apenas em 8ntranets. 5TM9 e =5TM9 Tim (erners39ee propos a especificacao do 5TM9 1.0 contendo 20 tags& que 1unto com o programa Mosaic& tornando possive! a confeccao de paginas e a navegacao sobre o protoco!o 5TT). !inguagem 1a possuia suporte a !in'& !istas e cabeca!2os& a!gumas foram descontinuadas. Os navegadores so!icitam as paginas Web. Os #ervidores procuram os arquivos e devo!vem as paginas com os outros aquivos que a compoe. ?m 1JJ"& inicia o uso do 7%8 ;7ommon %ate+a- 8nterface)& permitindo que as paginas +eb nao possuam apenas !in's& mas enviem informacoes para o servidor Web& que deixam de ter a tarefa de apenas encamin2ar arquivos e passam a rea!i0ar processamento no servidor. primeira !inguagem difundida para aumentar as funciona!idades das paginas foi o )?<9. Muitas outras !inguagens foram e sao usadas para que possamos ter paginas com conteudo dinamico. )articiparam da especificacao do 7%8: <ob Mc7oo! ;autor do servidor Web da .7# ). :o2n /ran's ;autor do %. +eb server). ri 9uotonen ;4esenvo!vedor do servidor Web do 7?<.). Ton- #anders ;autor do servidor Web )!exus). %eorge )2i!!ips ;suporte do servidor Web da Universit- of (ritis2 7o!umbia). Tim e 4anie! 7onno!!- fa0em a proposicao da 5TM9 2.0 1unto ao W"7 em 1JJ"& tendo sido oficia!i0ada pe!o W"7 em 1JJ$ com tags adicionais. !inguagem passa a permitir a!gumas caracteristica a mais como imagem& titu!o da pagina e formu!arios. umenta a interatividade das paginas& permitindo que o usuario envie informacoes para o servidores Web& sendo as informacoes processadas por scripts e programas 7%8.

versao " do 5TM9 e proposta em 1JJ$ com uma gama de novas funciona!idades& e!a 1a inc!uia #t-!e #2eet& o documento possuia 1$0 paginas. s empresa que criavam os navegadores imp!ementaram parcia!mente as especificacoes& fa0endo que o 5TM9 " nao fosse um padrao de fato no inicio. O 7onsocio W" forma!i0a o padrao 5TM9 ".2& os grande produtores de bro+sers participaram das revisoes da especificacao& assim como todas as organi0acoes membros do consorcio. O padrao tra0ia a!gumas evo!ucoes como tabe!as& app!ets :ava& texto na mesma !in2a que imagens& subscrito e sobrescrito. !inguagem passa a possuir uma definicao de tipo de documento. ?strutura padrao 5TM9 ".2 4ave <aggett& 1unto com rnaud 9e 5ors e 8an :acobs fa0em a proposicao do 5TM9 ,. nova especificacao contin2a aprimoramentos& podemos citar a programacao para 4OM ;4ocument Ob1ect Mode!) e a inc!usao da possibi!idade se usar o esti!o em cascata ;7## F 7ascate #t-!e #2eet). u!tima versao do 5TM9 foi revisada para ,.0.1& se mantendo como u!tima ate que a versao $.0 este1a 2omo!ogada e funcionando nos navegadores. O W"7 recomenda que se usa =T5M9 desde 2000& quando reformu!aram o 5TM9 ,& usando como base o =M9 1.0. Os documentos em 5TM9 passaram a seguir as regras do =M9& podendo ser va!idados e verificados com uma 4T4 ;4ocument T-pe 4efinition). (enefifios obtidos com a confeccao de paginas em =5TM9 1.0 em re!acao ao uso de 5TM9: O =M9 permite a sua extensao com mais faci!idade& fa0endo com que desenvo!vedores e navegadores possam imp!ementar nova funciona!idades sem muita comp!icacao. O =5TM9 possui uma especificacao para a inc!usao de novos modu!os. ?stao surgindos novas formas de acesso a 8nternet& a visua!i0acao dos documentos podem ser direcionados para os equipamentos ou navegadores usados de uma forma mais faci! com a adocao do =5TM9. Web 2.0 EWeb 2.0 e a mudanca para uma internet como p!ataforma& e um entendimento das regras para obter sucesso nesta nova p!ataforma. ?ntre outras& a regra mais importante e desenvo!ver ap!icativos que aproveitem os efeitos de rede para se tornarem me!2ores quanto mais sao usados pe!as pessoas& aproveitando a inte!igencia co!etivaE Tim OL<ei!!O termo Web 2.0 foi criado pe!a OL<ei!!- Media para dar nome para um con1unto de conferencias em 200,. O termo foi associado a um con1unto de tecno!ogias& tecnicas de criacao de paginas e ob1etivo dos sitios que estavam sendo criados. O nome nao foi bem recebido por todas as pessoas& Tim (erners39ee contestou ouso do nome& pois muitos conceitos considerados como Web 2.0 1a existiam 2a bastante tempo. O que nao podemos negar e que mesmo que o pai da 8nternet nao goste do termo& e!e passou a ser considerado por todos. Os servicos on!ine gratuitos tambem vieram a substituir o uso de a!guns programas pagos& a Web estava rep!eta de mudancas em re!acao a sua proposta inicia!& nao so quanto ao seu inicio& mas tambem em contraste aos primeiros sites de servico. interacao& as funciona!idades& os frame+or's :avascript que estavam surgindo& o crescimento do acesso a grande rede& o surgimento de conexoes mais rapidas& eram mudancas em cima de mudancas. O cenario nao era mais o mesmo& o nome pode nao estar adequado para a!guns& mas a sua criacao a1udou a produ0ir um marco para a Web& aumentou3se a discussao sobre um mundo que estava a parte dos foruns sobre metodo!ogias& o desenvo!vimento Web precisava amadurecer. .as conferencias W?( 2.0& os seguintes principios foram destacados como caracteristicas fundamentais: Web 2.0 usa a rede como uma p!ataforma. Usuario recebe& manipu!a e contro!ados os dados no site. rquitetura participativa na qua! o usuario pode adicionar ou editar tota! ou parcia!mente uma ap!icacao de acordo com suas necessidades e experiencia. Uma interface rica& interativa e amigave!& baseado em 1ax ou estruturas simi!ares. Mode!os de negocios enxutos faci!itados pe!o gerenciamento de conteudos e servicos. /im do 7ic!o de soft+are ; versao beta ) !guns aspectos de rede socia!. !gumas interfaces graficas& como gradientes e cantos arredondados ;ausente na c2amada era Web 1.0). 7onteudo gerado pe!o usuario O 7O.T?U4O %?< 4O )?9O U#U <8O T?M #84O 75 *? ) < MU8T # 4 # ?M)<?# # 984?<?# 4? W?( 2.0. ?M)<?# 48#)O.8(898M UM /?<< M?.T 6U? U=898 O U#U <8O UT898M .4O # 8./O<M 7N?# 8.#?<84 # )O< ?9?. ?##? MO4?9O )O4? #?< ?.7O.T< 4O ?M #8T?# 7OMO M MO.& ?( O& M?<7 4O 98*<?& MO.#T?<& 98.K?48.

OU OOU TU(?. 7OMU.84 4? %<?% * 9O< 7<8 4O# #O(<? O 7O.T?U4O 4O U#U <8O.

?##?# #8T?#& 6U?& ?M MU8TO# 7 #O#& # O 6U #? 8.T?8< M?.T?

M MO. UT898M # 8./O<M 7N?# 4O# 798?.T?# ) < U=898 < UM U#U <8O& MO#T< .4O )<O4UTO# 6U? /O< M 46U8<84O#& :U.TO 7OM O )<O4UTO 6U? ?#T O(#?<* .4O& ?##? T8)O 4? U=898O ) ##OU #?< U# 4O )O< OUT< # 9O: # )O.TO 7OM. O ?( O ? O 79O.? . 78O. 9& M?<7 4O 98*<?& /O<.?7?M ) < O *?.4?4O< UM M(8?.T? ) < 48*U9% < O# #?U# )<O4UTO# ? U=898 *?.4 7OM /?<< M?.T # ) < ) % M?.TO. ?##? MO4?9O 8M)U9#8O.OU O MO4?9O 4? *?.4 ?.T<? )?##O # /8#87 #& )O<?M 7<8OU UM M(8?.T? 4? #O.?% 7 O /8#7 9. 8nte!igencia co!etiva C O 7O.7?8TO 4? 6U? 7O9 (O< 7 O )O4? <?#U9T < ?M 84?8 # 8.T?98%?.T?#. T< ( 95 .4O :U.TO# O# U#U <8O# 7OM(8. M #?U 7O.5?78M?.TO ) < O (?.?/878O 4? TO4O#. O M 8O< #8M(O9O 4?##? T8)O 4? U#O # O O# W8K8#. O# W8K8# # O #8T?# W?( 6U? )?<M8T?M O# U#U <8O# ?48T < O 7O.T?U4O ?=8#T?.T? ? 7<?#7?.T < .O* # 8./O<M 7N?#& # O ?=7?9?.T?# ?=?M)9O# 4? 7O.T?U4O %?< 4O )?9O U#U <8O ? 8.T?98%?.78 7O9?T8* . O W8K8 M 8# )O)U9 < C O W8K8)?48 & UM ?.7879O)?48 %?< 4 )?9 7OMU.84 4? 7OM <T8%O# 48#)O.8*?8# ?M M 8# 4? 200 848OM #. W8K8)?48 7O./8 6U? #?U# U#U <8O# #?%U8< M 4?T?<M8. 4 # <?%< # 7OMO . O ?=79U8< 8./O<M 7N?# 7O<<?T # .?M 7<?#7?.T < 8./O<M 7N?# T?.4?.48O# # ? )?<M8T? 6U? M?M(<O# 4 7OMU.84 4? 8M)O.5 M # <?%< #. )?<M8T? 6U? 79 ##8/86U?MO# 7O.T?U4O# 7O9O7 .4O M <7 7N?#& # ) %8. # .T8% # )O##U8 M # M <7 7N?# /?8T # )?. # )?9 )?##O 6U? 7O.#T<U8 & )O8# ?< U# 4 T % M?T . O# U#U <8O# ) ## < M 8./O<M < O <?9 78O. M?.TO 6U?O 7O.T?U4O T8.5 ) < O M?8O 4?9 & )98 .4O O 7O.7?8TO 4? (U#7 4? 8./O<M 7N?#. O# *84?O# 4O OOU TU(? )U4?< M #?< 79 ##8/87 4O# ##8M 7OMO O 7O.T?U4O 4? UM (9O%& # M <7 7N?# ) ## < M #?< T O 48. M87 # 6U .TO O 7O.T?U4O 6U? ?#T * #?.4O 7O.#T<U84O . W?(. O 4?9.878O.U# ? O /987K< % .5 M ?M . *?% 7 O 7OM U#O 4 # T %#& )O8# O# / TO# <?9 78O. 4O# # O M <7 4O# 7O./O<M? * O #U<%8.4O& M)98 .4O ?=)?<8?.78 4O U#U <8O. OUT<O# #8T?# #? UT898M M 4?##? <?7U<#O ) < / M?< 7OM 6U? ##U.TO# % .5?M M 8# 8M)O<T .78 7OMO O 48%%. s rede sociais comecaram a ser usadas muito antes da Web 2.0& as possibi!idades nessa nova era da 8nternet foi amp!iado pe!as tecno!ogias existentes. O primeiro sitio considerado como <ede #ocia! que temos con2ecimento e o #ix4egrees.com& e!e foi !ancado 1JJP. Uma rede socia! tem a fina!idade de conectar pessoas& permitindo que e!as se1am !oca!i0adas e se agrupem. ?!a deve possibi!itar que exista privacidade 1unto com a visibi!idade& parece que se1am antagonicos& mas a visibi!idade permite que as pessoas se1am encontradas& enquanto que a privacidade permite que se contro!e que conteudo pode estar disponive! ou nao. ?xistem varias c!assificacoes que podem ser feitas nas redes sociais& tais como: site de re!acionamento& redes de profissionais& 1ogos on!ine& etc. O (rasi! atingiu a marca de maior numero de usuarios no Or'ut. Midia #ocia! EUm grupo de ap!icacoes para 8nternet construidas com base nos fundamentos ideo!ogicos e tecno!ogicos da Web 2.0& e que permitem a criacao e troca de 7onteudo %erado pe!o Uti!i0ador ;U7%)E 3 ndreas Kap!an e Mic2ae! 5aen!ein diminuicao do preco das cameras +eb& cameras digitais e das fi!madoras digitais possibi!itou que um grande numero de pessoas gerasse muita informacao& criando a necessidade de que essa midia fosse disponibi!i0ada para as pessoas con2ecidas. #urgiram sites que permitiam que co!ocassemos esse novo tipo de materia! na 8nternet e que outros acessassem o conteudo. mudanca que ocorreu com a Web 2.0 e que a informacao era comparti!2ada& podia3se buscar as informacoes e fa0er registros& nao estava mais pessoa! e sim g!oba!& fa0ia paste de uma ga!eria dos navegantes da Web. O OouTube passou a ser o maior simbo!o desse movimento& onde as pessoas co!ocam os seus videos e os espectares podiam ava!iar& guardar em favoritos& comparti!2ar e receber os videos afins. Os b!ogs datam da decada de J0& criado por :orn (arger com o nome de Web!og. O primeiro site foi o 2ttp:@@robot+isdom.com& que obteve um grande numero de acesso apesar de nao ter nen2um requiste visua!. O nome passou a ser c2amado de (!og quando )eter Mer2o!0 dividiu a pa!avra em duas& ficando We3(!og& no fina! dos anos J0. ?!es possuiam varios usos& desde diarios on!ine ate a uma visao 1orna!istica& o que foi mais perceptive! na epoca em que estavam comecando a se discutir sobre a Web 2.0& pois os usuarios estavam construindo a informacao.

Um b!og e composto de textos que sao co!ocados& acompan2ados ou nao de fotos& podendo possuir !in's para outras paginas ou b!ogs. Os visitantes podem fa0er comentarios sobre as postagens rea!i0adas. ?xistiram b!ogs para tudo o que se possa imaginar. O numero de b!ogs passa da casa dos 100 mi!2oes em toda a 8nternet. A!la 1 8ntroducao O crescente uso da Web trouxe necessidades& ap!icacoes e usuarios. O tipo de funcionamento incomodava os navegantes da grande teia& pois era necessario esperar um !ongo tempo para que cada pagina fosse carregada& a!em disso& cada sitio processava uma so!icitacao apos a outra& diferentemente dos programas usados& que permitiam executar tarefas enquanto uma anterior ainda nao tivesse terminado. inc!usao da )8 =M95ttp<equest pe!a Microsoft permitiu que a construcao de paginas evo!uisse. .ao era mais necessario esperar o termino de uma acao para que pudessemos c!icar em outro botao. evo!ucao do 45TM9 ;4-namic 5TM9 F :avascript Q 7## Q 5TM9) permitia que as te!as tivessem mais possibi!idades na interacao& aumento a atratividade e mantendo o usuario mais tempo acessando a mesma pagina. Os desenvo!vedores comecaram a mudar a forma de construir suas paginas& trocando as tabe!as por camadas como ferramenta de estruturar os !eiautes& essa modo de se criar paginas e con2ecido como tab!e!ess. O cenario estava propicio para que os programadores e designers Web adotassem uma nova tecnica& o 1ax passa a ser o grande artificio para que as paginas funcionem de forma seme!2ante aos programas que eram executados nos computadores. /unciona!idades possiveis em interfaces ricas 3 )reenc2imento automatico a partir de se!ecoes. 3 4rag and drop ;arrastar e so!tar). 3 tua!i0acoes parciais das paginas. 3 Menus dinamicos. 3 nimacoes dinamicas. O termo <8 foi usado pe!a primeira ve0 em marco de 200" em um +2ite paper ;documento oficia! pub!icado) pe!a Macromedia. Outros termos foram usados para definir o mesmo tipo de construcao de paginas& como <emote #cripting pe!a Microsoft em 1JJJ. Os navegadores passam a contro!ar as respostas as acoes do usuario& as atua!i0acoes das partes da te!a e o funcionamento da interface na maquina do usuario. atua!i0acao das informacoes e os processamentos continuam ocorrendo no servidor Web. 4iferenciando o funcionamento s paginas Web possuiam o seu funcionamento ditado pe!os !in's do 5TM9& onde uma pagina c2amava outra& ocorrendo sempre o carregamento inteiro de uma pagina. Uma forma uti!i0ada para se diminuir o carregamento foi a uti!i0acao de paginas com frames& usando3se as tags frameset e frames para se definir as divisoes. pagina era c2amada para um quadro especifico& enquanto os outros mantin2am as suas informacoes& nao sendo necessario transferir novamente os arquivos para os outros quadros. Os designers contestavam muita a uti!i0acao de frames. construcao de paginas com a tecnica 1ax muda a forma de estruturar os sitios. primeira pagina possuira o tratamento das funciona!idades que irao contro!ar a navegacao& esse tratamento e rea!i0ado por funcoes :avascript. s acoes do usuario irao c2amar arquivos que devo!verao informacoes ou partes das paginas& diminuindo significativamente a quantidade de informacao a ser transferida para o usuario a partir do servidor Web. criacao de frame+or's faci!itou a criacao de interfaces ricas& pois e!es oferecem as funciona!idades necessarias e rea!i0am os tratamentos necessarios para que as paginas funcionem em varios navegadores. Tecno!ogias uti!i0adas construcao de interfaces ricas pode ser feita com uma grande variedade de tecno!ogias& tecnicas e !inguagens. )odemos usar o =5TM9 como base ou produtos desenvo!vidos por empresas. 3 =5TM9 6uando usamos o =5TM9 para construir a interface& necessitamos do :avascript para tratar as acoes do usuario& a!terar as informacoes da te!a. O 7## e usado para que possamos configurar a aparencia dos ob1etos. )8 =M95ttp<equest ira fa0er a requisicao dos arquivos no servidor Web& a maioria das ve0es esses arquivos serao formados por !inguagens que sao executas no servidor& sendo essas responsaveis por acessar informacoes em bases de dados ou atua!i0a3!as& enviar emai!s& atua!i0ar arquivos& entre tantas funciona!idades possiveis. 3 /9 #5 #oft+are desenvo!vido pe!a /utureWave #oft+are para o sistema operaciona! )en)oint O#. O ap!icativo foi portado para funcionar na 8nternet. Macromedia adquiriu o ap!icativo renomeando3o para /!as2. )ermite a construcao de interfaces bem e!aboradas& possibi!itando a inc!usao de som e video. ?!e e muito poderoso& permitindo a criacao de 1ogos. !inguagem embutida& ction#cript& fornece ao desenvo!vedor o contro!e sobre todos os ob1etos uti!i0ados na te!a.

O arquivo gerado pe!o ap!icativo e c2amado de fi!me /!as2. O navegador necessita que se1a insta!ado p!ug3in para que e!e possa executar o fi!me. versao de p!ug3in pode ser estipu!ada ao se confeccionar o fi!me. s atua!i0acoes das informacoes sao rea!i0adas atraves de c2amadas a !inguagens executadas no servidor. dobe possui o /!ex& e!e possui a funcao de faci!itar a integracao entre o fi!me e as c2amadas aos codigos que sao executados no servidor Web& integrasse de uma forma mais simp!es com a !in2a de tempo dos fi!mes /!as2. 3 M# #89*?<98%5T Microsoft criou um concorrente para o /!as2& o frame+or' #i!ver!ig2t. )ermite criar interfaces do usuario usando o b!oco de notas& o *isua! #tudio ou qua!quer outro editor& porem o traba!2o fica muito faci!itado com o Microsoft ?xpression (!end& que e uma ferramenta WO#8WO%. Uti!i0a o = M9 ;?xtensib!e pp!ication Mar'up 9anguage) para descrever os ob1etos da te!a. O #i!ver!ig2t uti!i0a uma parte do frame+or' dot .et& que e uti!i0ado para c2amadas aos codigos do servidor tambem. (eneficios s ap!icacoes ricas vieram auxi!iar aos usuarios que nao possuem muita 2abi!idade no uso do computador. ?!as permitem a construcao de faci!idades no uso& textos de a1uda& informacoes de retorno e interfaces mais intuitivas. Os frame+or's a1udaram bastante a padroni0ar o funcionamento dos ob1etos de te!a& o que deixa o usuario mais seguro ao interagir com as paginas. Muitas ferramentas estao sendo migradas para a p!ataforma Web& muitas de!as necessitam de funciona!idades que o 5TM9 nao consegue suprir. Os recursos que podem ser desenvo!vidos com o uso de :avascript e 7## a!iados ao 4OM do =5TM9& transformaram os ap!icativos Web muito poderosos. O tempo de resposta para o usuario em <8 e menor& o que me!2ora a satisfacao. ?!as permitem que se executem outras tarefas sem exigir que se espere o termino de um anterior& aumentando a funciona!idade da interface. aproximacao do formato das te!as de programas que sao executados !oca!mente no computador& auxi!ia o aprendi0ado dos novos usuarios nesse novo ambiente. A!la 2 8ntroducao a =5TM9

#%M9 #T .4 <4 %?.?< 98M?4 M <KU) 9 .%U %? UM M?T 98.%U %?M T< *?# 4 6U 9 )O4?MO# 4?/8.8< 98.%U %?.# 4? M <7 7 O ) < 4O7UM?.TO#. =M9 ?=T?.#8(9? 5O)?< T?=T M <KU) 9 .%U %? T M(?M C UM M?T 98.%U %?M& C 4?<8* 4 4 #%M9. T?M 7OMO O(:?T8*O ?#T<UTU< 7 O 4? 4 4O#.

=5TM9 ?=T?.#8(9? 5O)?< T?=T M <KU) 9 .%U %? 1.0 C )<8M?8< ?#)?78/87 7 O ) < / M898 =5TM9& 7O.T8.U 7OM M?#M *?<# O& #?.4O <?7OM?.4 4 ?M : .?8<O 4? 2000& <?7?(?.4O UM <?*8# O ?M 2002& *?<# O 1.1 )O##U8 #U <?7OM?.4 7 O 4 T 4 4? .O*?M(<O 4? 2010. ?9 <? 98M UM <?/O<MU9 7 O 4O# 4O7UM?.TO# 5TM9 ,& TO<. .4O #? 7OMO )987 7N?# 4? =M9. ?9 )O##U8 T .TO #8.T =? ? <?%< # =M9 1 ) < 8M)9?M?.T < # /U.78O. 984 4?# 4O 5TM9 ,. criacao de paginas Web vem evo!uindo desde o seu inicio. Os navegadores gan2aram versoes mais atua!i0adas& contendo mais recursos e recon2ecendo uma gama maior de marcacoes. !inguagem recomendada pe!o W"7 e o =5TM9 1.1. versao $.0 da 5TM9 ainda esta em fase de desenvo!vimento& mas a!gumas novidades 1a sao recon2ecidas pe!os navegadores. 8remos ver a =5TM9 e nos ater aos recursos mais uti!i0ados para a construcao de interfaces ricas. Outras discip!inas possibi!itaram que voces criassem interfaces e que se apropriassem da construcao de paginas com =5TM9& faremos a!gumas recordacoes necessarias. O =5TM9 possui a estrutura de um arquivo =M9 e as marcacoes do 5TM9& como 1a vimos nas au!as anteriores. mudanca veio tra0er a!gumas faci!idades para va!idacao do documento e criacao de navegadores para outros equipamentos. O 5TM9 e uma ap!icacao da #%M9.

?strutura estrutura das paginas =5TM9 continua seguindo o que 1a era imposto pe!o 5TM9 ,& porem passamos a ter a rigide0 do =M9& a!iado a isso& podemos va!idar o nosso documento& pois a determinacao de uma 4T4 ;4ocument T-pe 4efinition) permite que programas verifiquem se o documento segue a definicao. ?!a especifica qua! a estrutura do documento& quais marcacoes podem ser co!ocadas internas as outras e os atributos aceitos por uma especifica& informando a sua obrigatoriedade ou nao. ?strutura basica de uma pagina =5TM9 1.0

?strutura da pagina mostrando e!ementos e atributos

4O7TO)? 4efine o tipo do documento. 8nformando qua! a 4T4 ;4ocument T-pe 4efinition) sera uti!i0ada para va!idar o documento.

)arte da 4T4 que define a tag E2tm!E ;informa que e!a so pode possuir 2ead e bod-) 4T4 #T<878T .ao permite o uso de tags@atributos descontinuados. C indicada para uso em con1unto com 7##. O documento deve ser bem formado. RS4O7TO)? 2tm! )U(987 E3@@W"7@@4T4 =5TM9 1.0 #trict@@?.E E2ttp:@@+++.+".org@T<@x2tm!1@4T4@x2tm!13strict.dtdEG 4T4 T< .# T8O. 9 )ermite o uso de tags@atributos descontinuados. O documento deve ser bem formado. RS4O7TO)? 2tm! )U(987 E3@@W"7@@4T4 =5TM9 1.0 Transitiona!@@?.E E2ttp:@@+++.+".org@T<@x2tm!1@4T4@x2tm!13transitiona!.dtdEG 4T4 /< M?#?T )ossui as mesmas caracteristicas da 4T4 Transationa!& inc!ui a possibi!idade do documento possuir frameset& criacao de estrutura de quadros. RS4O7TO)? 2tm! )U(987 E3@@W"7@@4T4 =5TM9 1.0 /rameset@@?.E E2ttp:@@+++.+".org@T<@x2tm!1@4T4@x2tm!13frameset.dtdEG MU4 .7 # %?< 4 # )?9 4O7 O 4? =5TM9 adocao do =M9 como forma de estruturar o documento trouxe a!gumas mudancas na confeccao de paginas Web. 7aracteristicas: s marcacoes sempre ser propriamente anin2ados. .ao podem existir tags interca!adas& uma marcacao nao pode possuir uma terminacao antes que todas as internas a e!a este1am fec2adas. ?x: correto 3 RtrG RtdGtexto R@tdG R@trG ?x: errado 3 RtrG RtdGtexto R@trG R@tdG ;o fec2amento do tr deveria vir apos o fec2amento do td) Todas as marcacoes devem possuir a terminacao.

Tags que nao possuam uma terminacao devem informar na abertura que nao existe um par para e!a. ?x: em par 3 RpG texto do paragrafo R@pG ?x: marcacao unica 3 Rinput t-peTEtextE nameTEenderecoE @G ;a barra deve fica co!ada ao sina! de maior) .ao e permitido o uso de marcacao sem fec2amento. quebra de !in2a e um outro exemp!o dessa necessidade& passou a ser escrita com a barra: Rbr @G Os nomes das marcacoes devem sempre estar em !etra minuscu!a. tributos devem estar sempre entre aspas. 5TM9 permitia que o va!or de um atributo ficasse co!ado ao sina! de igua! sem estar entre aspas& isso nao e permitido em =5TM9. O documento deve possuir somente um e!emento rai0. * 984 7 O 4? 4O7UM?.TO# =5TM9 criacao de documentos usando uma 4T4 permite que se1a verificado o codigo& podemos verificar a estrutura e va!idar as marcacoes uti!i0adas& tanto na sua posicao dentro do documento quanto a uti!i0acao dos atributos. O W"7 fornece um !in' para fa0ermos a ava!iacao& porem a informacao retornada e se o arquivo esta com erros ou nao. !gumas 84?s fornecem feedbac's na posicao do erro& o 4ream+eaver apresenta mensagens para tags sem fec2amento ou sem abertura& o .et(eans fornece avisos para erros em atributos tambem& a!em de possuir auxi!io para e!ementos e atributos possiveis& mostrando !istagem de va!ores possiveis para os atributos. *antagens Os documentos =5TM9 estao em conformidade com a estruturacao estabe!ecida na =M9& permitindo que e!es se1am va!idados atraves da 4T4 se!ecionada. )odem ser usadas ferramentas para editar arquivos =M9 para manipu!ar o documento. criacao de novos navegadores e mais faci!& pois as regras da =M9 sao mais concisas& faci!itando a interpretacao dos codigos e sua posterior renderi0acao. O documento 5TM9 permite o uso de marcacoes que o navegador so tera certe0a que nao tin2a um par de termino ao c2egar ao seu fim& fa0endo que todas as informacoes permanecam empi!2adas na memoria do computador e gerando a necessidade de um numero maior de ava!iacoes& o documento =5TM9 diminui o traba!2o do navegador& ace!erando a interpretacao e apresentacao da pagina. Os documentos podem inc!uir Mat2M9& #M89& or #*%& aumentando as possibi!idades com a apresentacao de outros recursos como o desen2o vetoria! criado com #*%.

/ormu!arios

Os formu!arios permitem que os usuarios entrem com informacoes em uma pagina Web. O uso do formu!ario permitiu que os sitios construidos passassem a oferecer muitas possibi!idades& os desenvo!vedores puderam construir sistemas Web com as mesmas fina!idades dos sistemas que eram executados nos computadores dos c!ientes. marcacao EformE possui atributos para configurar o seu funcionamento& entre e!as podemos citar o atributo Emet2odE& e!e informa como serao enviados os dados para o arquivo especificado no atributo EactionE. s interfaces ricas uti!i0am o 1ax para enviar os dados& podendo envia3!os atraves do metodo )O#T ou %?T& da mesma forma que seria enviada diretamente pe!o metodo EsubmitE formu!ario. O atributo EidE e usado pe!a !inguagem :avascript para fa0er referencia a uma tag no documento& sendo obrigatorio o seu uso nas partes da pagina que serao acessadas pe!as funcoes da !inguagem. #abemos que o formu!ario fornece uma porta de entrada para as informacoes do usuario& mas vamos tentar abordar a!gumas uti!i0acoes possiveis& iremos abordar tambem as diferencas geradas pe!o uso de 1ax e interfaces ricas. ?sse par fe0 com que a!gumas interacoes que eram feitas por !in's ou por formu!arios pudessem ser feitas com outros ob1etos sendo se!ecionados ou arrastados pe!a te!a. O uso do botao !impar ;Rinput t-peTEresetE @G) sempre foi questionado por mim& pois poderia causar uma situacao desagradave! se nao tivesse nen2um tratamento. 6ua!quer usuario ficaria muito irritado ao c!icar erradamente no botao !impar de um formu!ario apos comp!etar quarenta campos de informacoes& esse botao poderia ter tratamento com :avascript& quase nunca se encontra o tratamento. /ormu!arios que possuem campos interdependentes exigiam que os dados digitados pe!o usuario fossem preenc2idos novamente quando a pagina fosse recarregada& as se!ecoes em a!guns campos fossem ativadas novamente e o campo que possui dados de acordo com a informacao de outro viesse com as suas informacoes disponiveis. O 1ax permite que o preenc2imento ou a fi!tragem de campos interdependentes se1a feita sem a necessidade que esses campos recebam o tratamento !istado& pois os campos vao sendo preenc2idos com o usuario informando os dados pedidos& sem que a pagina se1a recarregada. 7amadas O desenvo!vimento de paginas Web passou por varias fases. O uso de ape!os visuais sempre esteve presente& desde que se usavam pequenos %8/s animados ate as animacoes interativas feitas em /!as2. entrada dos Adesigns de pape!B para a area de criacao de !eiaute de paginas mudou muito a forma de se pensar interfaces& passamos a ter te!as mais e!aboradas. O uso de imagens pesadas foi marcante nesse inicio& 2ouve um tempo de adaptacao& o que podia se constatar e que tudo estava mais bonito. criacao da estrutura do !eiaute com tabe!as era comum& porem traba!2osa e dificu!tava o uso de pessoas acostumadas com as ferramentas graficas. Um termo se popu!ari0ou nessa epoca& o Atab!e!essB& a proposta era de que se construisse o formato da te!a sem o uso de tabe!as e sim com camadas posicionadas em posicoes especificas. 8sso foi possive! com a uti!i0acao de 7##. !gumas marcacoes foram usadas para se criar camadas sao AspanB e AdivB. .etscape 2avia !ancado a proposta de se usar uma marcacao c2amada A!a-erB& porem e!a nao foi aceita pe!o W"7. ?ssas marcacoes podem ser usadas para definir formatacoes em uma determinada regiao& mas o crescimento do uso de AdivB acontece com o uso !eiautes Atab!e!essB& tendo a funciona!idade de uma camada como as usadas em programas graficos. s areas de!imitadas possuem uma funciona!idade propria podendo ser co!ocadas em areas da pagina& ocu!tadas& arrastadas& ter o seu conteudo a!terado. !gumas paginas uti!i0avam desse funcionamento para que fosse possive! me!2orar as informacoes para o usuario e a faci!idade de interacao com os ob1etos de te!a. ?xemp!o: R21G7omecando com camadasR@21G Rdiv tit!eTEexemp!oE G )rimeira camada R@divG Rdiv tit!eTE?xperimentandoE G #egunda camada R@divG

Outras Tags

Uma pagina =5TM9 e feita de muito mais marcacoes do que apenas formu!ario e camadas& nao vamos entrar em deta!2es nas outras pois 1a foram examinadas em outras discip!inas& mas estamos !embrando que voce precisara de todo o arsena! de tags para poder construir interfaces ricas. )recisaremos das tabe!as para dispormos informacoes& precisaremos dos !in's& mesmo que se1am usados para que o carregamento das paginas se1a feito com funcoes :avascript e c2amadas 1ax& precisaremos da imagem para que o usuario queira interagir com as pagina e con2ecer a aparencia de produtos. )odemos construir interfaces ricas com /!as2& mas o =5TM9 tambem permite. Os frame+or's :avascript poupam muito traba!2o& mas nao fa0em a interface toda& apenas interagem com o que voce construir. A!la 3 8ntroducao O 7## aumentou muito a possibi!idade de se formatar paginas 5TM9& nao inc!uindo apenas padroes& mas adicionando possibi!idades na criacao de configuracoes e adornos que o 5TM9 nao possuia. 8nicia!mente existia apenas a fo!2a de esti!os& posteriormente foi adicionada a possibi!idade de se ap!icar o esti!o gradua!mente em cascata. /oram criadas ferramentas que faci!itavam a criacao de fo!2as de esti!o externas& posteriormente os construtores de paginas passaram a possuir essa faci!idade. s 84?s WO#8WO% auxi!iam na uti!i0acao de fo!2as de esti!os& pois podemos verificar enquanto vamos construindo a pagina. O 7## permite que a mesma pagina possua aparencias diferentes& sendo cada uma destinada para e!a se1am exibida em um meio diferente& podemos construir uma formatacao para e!a ser apresentada no navegador e outra para a impressora& isso e uti! em comprovantes impressos pe!o sitio. criacao de paginas gan2ou com o uso de esti!os& podemos ter mais contro!e do que dese1amos que o navegador exiba& s formas e as cores bem usadas me!2oram a aparencia& deixando a interface mais agradave! para o usuario. 5istorico /o!2a de esti!o existe desde a decada de U0& porem temos a sua inc!usao no 5TM9 ".0 em 1JJ$. /oram feitas nove proposicoes para aumentar as possibi!idades de se formatar a aparencia das paginas Web& duas formaram a base do que se transformou no 7## que temos 2o1e. 5V'on Wium 9ie propos em outubro de 1JJ, a 75## ;7ascading 5TM9 #t-!e #2eets). (ert (os apresenta em abri! de 1JJ$ o navegador rgo ao W"7& e!e uti!i0ava uma !inguagem propria de esti!os o ##) ;#tream3based #t-!e #2eet )roposa!). convite de 9ie e!es se 1untaram para desenvo!ver o padrao 7## baseados na 75##& como a fo!2a de esti!o poderia ser usada em outras !inguagens de marcacao removeram o 5. 9ie e Oves 9afon se 1untaram com 4ave <aggett ;traba!2o na prposicao do 5TM9 ,) para fa0er com que o navegador rena suportasse 7##& esse foi apresentado tambem em abri! de 1JJ$. 7omecando com 7## )ara podermos entender o funcionamento de esti!os& precisamos primeiramente saber como criamos e o que e um esti!o. Um esti!o possui um con1unto de regras de formatacao que podem ser ap!icados a uma marcacao ou a um con1unto de marcacoes. )odemos definir que sempre que uma marcacao este1a sempre com uma marcacao& a!em disso& e possive! se definir uma c!asse para posterior uso.

Onde& #e!etor F nome de uma tag. 7!asse F nome um esti!o que pode ser usado em uma tag. W X F opciona!& podemos definir c!asses associadas a uma marcacao especifica ou so!ta& podendo ser usada em qua!quer marcacao nesse caso.

/oram formatadas as marcacoes ApB e Abod-B.

u!tima formatacao do esti!o nao necessita que se informe o simbo!o de fim de instrucao AYB.

%<U) .4O )odemos informar mais de uma tag na mesma formatacao.

U# .4O 79 ##?# s c!asses criadas nas definicoes dos esti!os podem ser usadas em qua!quer tag& se nao estiver associada a uma marcacao especifica& ou nas marcacoes definidas para diferenciar formatacoes.

)rioridade dos esti!os prioridade para o efeito cascata em ordem crescente: 3 /o!2a de esti!o padrao do navegador do usuarioY 3 /o!2a de esti!o do usuarioY 3 /o!2a de esti!o do desenvo!vedorY 3 ?sti!o externoY 3 ?sti!o incorporadoY 3 ?sti!o in!ine Y 3 4ec!aracoes do desenvo!vedor com S8mportantY 3 4ec!aracoes do usuario com S8mportantY 8remos fa!ar e mostrar a!gumas formatacoes existente no 7##& mas o idea! e ter contato com todas e saber como podemos consu!tar para con2ecer todo o seu poder. 7onfigurando fontes e textos O 7## permite que se configure o texto nas paginas& oferecendo uma quantidade enorme de formatacoes. 8remos o!2ar a!gumas e pedir que faca a!guns exercicios para que consiga compreender o funcionamento. 7o!or 4efine a cor da fonte. O va!or atribuido pode ser um nome de cor con2ecido ou uma combinacao de cores no padrao rgb& a combinacao pode ser feita com um va!or 2exadecima! ou com o uso da funcao rgb e os va!ores em decima! separados por cor. .ome no 7## aqua b!ac' b!ue fuc2sia gragreen !ime maroon navo!ive purp!e red si!ver tea! +2ite -e!!o+ 7or 0u! c!aro )reto 0u! <osa 7in0a *erde *erde3!imao Marrom 0u! escuro Marrom c!aro <oxo *erme!2o )rata *erde3agua (ranco mare!o

7onfigurando 7aixas

?xistem varias configuracoes que podemos usar para que nossas interfaces fiquem mais atraentes. s caixa permitem que co!oquemos !in2as em vo!ta do texto ou em uma tag especifica& as !arguras e a!turas podem ser especificadas. s formatacoes de fundo possuem varios recursos& existe forma de se fixar imagens no fundo& fa0er com que e!a expanda& atribuir cor de fundo para uma marcacao apenas. 8remos apresentar a!gumas formatacoes para que se possa ter contato com a formatacao de caixas.

Usando pseudo e!ementos e pseudo c!asses O 7## possui a!gumas formatacoes que estao re!acionadas com situacoes especificas. Os 2iper!in's fornecem a possibi!idade de se configurar tres estados& norma! ;o !in')& visitado e ativo ;com o foco do cursor). O paragrafo permite que existam configuracoes especificas para a primeira !etra& a primeira !in2a& antes e depois do paragrafo. pagina permite se configure as margens direita e esquerda. s marcacoes percebem se o mouse esta sobre e!a ou nao& apesar de ser mais usado com a tag EaE& a pseudo c!asse pode ser usada com as outras marcacoes.

?xemp!os de uti!i0acao de 7## O 7## possui a!gumas formatacoes que estao re!acionadas com situacoes especificas. Os 2iper!in's fornecem a possibi!idade de se configurar tres estados& norma! ;o !in')& visitado e ativo ;com o foco do cursor). O paragrafo permite que existam configuracoes especificas para a primeira !etra& a primeira !in2a& antes e depois do paragrafo. pagina permite se configure as margens direita e esquerda. s marcacoes percebem se o mouse esta sobre e!a ou nao& apesar de ser mais usado com a tag EaE& a pseudo c!asse pode ser usada com as outras marcacoes. ssista a!guns videos para maior con2ecimento. A!la 4 5istorico do :avascript O :avascript foi desenvo!vido pe!a .etscape por (rendan ?ic2. !inguagem foi inicia!mente c2amada de Moc2a. 6uando a versao 2.0 do .etscape e !ancada em setembro de 1JJ$& o navegador 1a interpretava a !inguagem& porem& e!a 2avia sido rebati0ada para 9ivescript. !inguagem 1a se c2amava :avascript na atua!i0acao da versao do navegador 2.0(" em de0embro do mesmo ano. uti!i0acao do nome surge de uma associacao entre a .etscape e a #un& quando o navegador passou a possuir suporte a tecno!ogia :ava& permitindo o uso de pp!ets. .etscape apresentou a especificacao da !inguagem para a ?cma 8nternationa!& exsitia a intencao de que e!a fosse considerada como um padrao da industria. entidade ciniiou grupos de traba!2o para gerar um padrao& foi criado ?7M #cript. Microsft !ancou a sua !inguagem script com sintaxe oriunda de E7QQE para nao ter prob!ema com patentes& o :script. O navegador 8nternet ?xp!orer tambem possuia um interpretador para *bscript& porem e!a nao funcionava no .etscape. O :script foi inc!uido na versao ".0 do

navegador. ?!a seguia inicia!mente o que existia no :avascript& tendo a!gumas funciona!idades distintas& posteriormente passou a seguir o padrao& ?7M #cript. diferenca entre o funcionamento das !inguagens script no .etscape e no 8nternet ?xp!orer sempre foi um prob!ema para os desenvo!vedores. O :avascript transformou o mundo Web& permitiu que os navegadores deixassem de ser meros espectadores& passando a ter a missao de entender e executar codigos de uma !inguagem de programacao. criacao de scripts :avascript trouxe animacoes nas paginas& va!idacoes de formu!arios& entre tantas outras possibi!idades. criacao de interfaces ricas aumenta a necessidade do uso de :avascript e o 1ax tambem amp!ia essa necessidade& os dados deixaram de ser enviados quando o navegador requisita uma pagina& mas quando um ob1eto de!e fa0 isso& necessitando da !inguagem para rea!i0ar esse traba!2o. #intaxe da !inguagem O :avascript segue a sintaxe basica do :ava para as suas estruturas. .ao e fortemente tipada& permitindo que suas variaveis funcionem de acordo com o conteudo que estao arma0enando. !inguagem nao exige que suas variaveis se1am dec!aradas& bastando atribuir uQ.JQ.m va!or para que e!as possam ser usadas a partir de um determinado ponto. ?strutura basica de inc!usao de scripts nas paginas 5TM9. RscriptG #et de instrucoes R@scriptG marcacao script de!imita uma area para que co!oquemos codigos. TO)? M8M?3t-pe 3 especifica o tipo de arquivo. Z text@1avascript ;usaremos este) Z text@ecmascript Z app!ication@ecmascript Z app!ication@1avascript Z text@vbscript 75 <#?T ?specifica a codificacao usada para os caracteres Z E8#O3UU$J31E F padrao para as !inguas 9atinas& contem os acentos e o cedi!2a Z EUT/3UE F codificacao que contemp!a todos os a!fabetos& existe a proposta em transforma3!o em padrao. ?xistem varias codificacoes& atendendo as !inguagens TO)? 8nforma o arquivo com o seu camin2o& veremos o uso de arquivo externo. )odemos inserir comentarios em nossos codigos& e usado o @@ ;barra barra) para comentarios de uma !in2a e @[ texto [@ ;barra asteristico e asteristico barra) para comentarios de varias !in2as. Onde podemos co!ocar os codigos :avascript marcacao EscriptE pode ser co!ocada dentro de E2eadE ou Ebod-E& iremos usar o E2eadE para co!ocarmos nossas funcoes e o Ebod-E quando necessitarmos que o :avascript apresente a!guma caixa de dia!ogo ou gere ob1etos da te!a e textos na te!a quando a pagina for carregada. ?xiste tambem a possibi!idade de que se1am co!ocados codigos diretamente nos eventos& iremos ver isso no assunto eventos. ?xemp!o de se!ecao simp!es: R2tm!G R2eadG Rti!teGTitu!o da )aginaR@tit!eG Rscript t-peTEtext@:avascriptE G @@codigo R@scriptG R@2eadG Rbod-G

R@bod-G R@2tm!G Operadores 4ividimos os operadores inicia!mente em operadores aritmeticos& re!acionais e !ogicos& existem tambem operadores de bit& operador de se!ecao ;ternario). Os operadores aritmeticos permitem que facamos expressoes e obten2amos um resu!tado que ira depender dos tipos de dados e dos proprios operadores. Os operadores re!acionais obtem um va!or !ogico como resu!tado de sua ava!iacao. Operadores !ogicos comparam va!ores !ogicos& gerando um novo va!or !ogico. Usaremos o metodo E+riteE do ob1eto EdocumentE& o metodo adiciona informacoes na pagina& fa0endo com que o navegador exiba os dados recebidos. 4e!imitadores de b!oco O :avascript uti!i0a as c2aves como de!imitador de b!oco. ?!es permitem que varias instrucoes recebam o mesmo funcionamento que a instrucao apos a estrutura da !inguagem& a!gumas interferem na instrucao imediatamente apos a e!a. estrutura EifE rea!i0a um teste condiciona! que executa ou nao a proxima instrucao& para que esse tratamento se1a ap!icado a varias instrucao devemos circunda3!a com de!imitadores de b!oco. ?xemp!o de (!oco: Rscript t-peTEtext@:avascriptE G @@[[[[[[[ @@ sem b!oco @@[[[[[[[ if ;10 R D) a!ert;E)rimeiro texto.E)Y a!ert;E#egundo texto.E)Y a!ert;ETerceiro texto.E)Y @@[[[[[[[ @@ com b!oco @@[[[[[[[ if ;10 R D) \ a!ert;E)rimeiro texto.E)Y a!ert;E#egundo texto.E)Y a!ert;ETerceiro texto.E)Y ] R@scriptG 7aixas de dia!ogo s caixas de dia!ogo sao 1ane!as que permitem que o nosso sistema interrompa seu funcionamento& aguardando que o usuario intera1a com e!as antes de prosseguir& esse tipo de funcionamento e c2amado de 1ane!a moda!& impede que o usuario acione qua!quer outra parte do sistema antes de fec2ar a 1ane!a atua!. Mostramos duas caixas de dia!ogo em nossos exemp!os& ficando apenas uma de fora. ?xiste uma para podermos enviar um aviso ao usuario& uma segunda para pedirmos que o usuario entre com a!guma informacao e uma terceira que pede ao usuario para esco!2er entre opcoes com dois botoes ;OK e 7ance!ar)& como os navegadores e que interpretam o 5TM9 e o :avascript esses va!ores podem ser diferentes. ?xemp!os com as caixas de dia!ogo:

/uncoes

funcao possui varios aspectos dentro de !inguagens de programacao& iremos comecar o!2ando pe!a otica de diminuirmos o esforco de digitacao e manutencao& uma funciona!idade do programa pode possuir a necessidade de ser uti!i0ada em varios !ocais pode ser co!ocada em uma funcao. ?ssa estrategia permite que a manutencao se1a rea!i0ada em um unico !oca!& diminuindo esforco futuro e risco de inconsistencia. Outro aspecto a se considerar e a divisao de traba!2o& uma equipe de desenvo!vimento pode receber tarefas individua!i0adas& a modu!ari0acao permite que cada pessoa crie parte do programa. O tratamento de evento e norma!mente associado a uma funcao. !goritmo diferencia procedimento de funcao& o :avascript ira criar sempre como funcao& atraves do retorno ou nao de um va!or pe!a funcao e que iremos diferenciar se esta no pape! de funcao ou de procedimento. criacao de funcoes e feita dentro da marcacao EscriptE& podemos cria3 !as em arquivos externos. !gumas ava!iacoes de performance indicam que podemos me!2orar o carregamento das paginas co!ocando3as no fina! do documento& co!ocando a marcacao EscriptE dentro de Ebod-E& perto de seu fec2amento. 7riando uma funcao function nome4a/uncao ;)arametros) \ instrucoes da funcao ... ] )odemos criar funcoes com varios ob1etivos& vamos exemp!ificar com uma funcao que ten2a como ob1etivo informar se uma pessoa e maior ou menor de idade& recebendo como parametro a sua idade. ?xemp!o Rscript t-peTEtext@:avascriptE G function diMaior;anos)\ if ; nos G 1P) \ a!ert ;EMaior de 8dadeE)Y ] e!se \ a!ert ;EMenor de 8dadeE) Y ] ] R@scriptG ?ssa funcao estara tendo o seu processamento como um procedimento. Uma funcao nao e iniciada so0in2a& e!a precisa ser c2amada por outro processamento. 4ireito mbienta! )odemos passar informacoes para a funcao& essas informacoes tem o nome de parametro. Uma variave! comum e passada por va!or& a funcao recebe uma copia de seu va!or e esse e arma0enado na variave! que e criada quando a funcao inicia& a variave! origina! possui seu va!or ina!terado. 6uando passamos ob1etos ou vetores nos parametros o :avascript nao cria uma copia de!e& e criada uma referencia para o proprio ob1eto& todas as a!teracoes rea!i0adas nos va!ores sao feitas diretamente no ob1eto ou vetor passado& nao 2avendo preservacao do va!or origina!. funcao pode ser definida com nen2um parametro ou varios& podemos tambem criar funcoes que possuam um numero de parametros variave!& recuperando3os atraves do vetor EargumentsE. ?ventos Os ob1etos de uma pagina =5TM9 percebem a!gumas acoes sobre e!es& c2amamos de eventos essas acoes recon2ecidas. programacao motivada por eventos comecou nos sistemas operacionais com 1ane!as& o programador insere codigo para tratar acoes que o usuario deveria rea!i0ar com a te!a. ?m seguida apresentamos a !ista de a!guns eventos possiveis& indicando os momentos em que os mesmos podem ocorrer& bem como& os ob1etos passiveis de sua ocorrencia. on!nload marcacao Ebod-E pode c2amar a!gum tratamento antes de o usuario sair da pagina. onc+ange Ocorre quando o ob1eto perde o foco e 2ouve mudanca de conteudo& va!ido para os ob1etos text& se!ect e textarea. on.l!r 6uando o cursor sai do ob1eto& e!e perde o foco. ?sse evento e usado quando se dese1a tratar mesmo que nao ten2a 2avido mudanca& va!ido para os ob1etos text& se!ect e textarea. on"oc!s

/unciona de forma inversa do anterior& e!e e c2amado sempre que o ob1eto receber o foco& va!ido para os ob1etos text& se!ect e textarea. onclick Ocorre quando o ob1eto recebe um c!ic' do mouse& va!ido para todos ob1etos de te!a& usamos mais para o ob1eto Rinput t-peTEbuttonE @G. onmo!seover Ocorre quando o ponteiro do mouse passa por sobre o ob1eto. )odemos usar esse evento no ob1etos da te!a. )ossui muitas possibi!idades na criacao de interfaces ricas& permite que se1a percebido se um produto foi arrastado para uma imagem do carrin2o por exemp!o. onselect Ocorre quando o texto dentro do ob1eto e se!ecionado& va!ido para os ob1etos Einpt textE e textarea. ons!.mit Ocorre quando um formu!ario esta sendo enviado. Uti!i0amos esse evento para podermos va!idar formu!arios& podendo cance!ar o seu envio. )ara cance!ar um envio& basta que e!e retorne Efa!seE. Rform actionTEava!ia.aspxE onsubmitTEreturn va!ida7ampo;)YE G .ome Rinput t-peTEtextE nameTnomeE idTEnomeE @G Rbr @G Rinput t-peTEsubmitE va!ueTE8nc!uirE @G R@form G A!la 6 7on2ecendo o 45TM9 O 45TM9 uti!i0a outras tecno!ogias para criar interatividade nas interfaces Web. uniao do 5TM9 que define os e!ementos de nossa pagina& o :avascript com a programacao script& o 7## com as suas possibi!idades de formatacao e posicionamentos& unidos a definicao de estrutura 2ierarquica de ob1etos oferecida pe!o 4OM permitem que construamos te!as com animacoes& que sao a!teradas de acordo com as acoes do usuario& com avisos visuais sobre os e!ementos da interface& as possibi!idades passam a ser !imitadas por nossa criatividade. guerra dos navegadores existe desde que o 8nternet ?xp!orer ".0 foi !ancado& apesar de ainda ser inferior do que o .etscape nessa epoca. O 8nternet ?xp!orer comeca a fa0er frente ao .etscape quando !anca a sua versao ,.0 e a Microsoft o inc!uiu como parte do sistema operaciona!& fa0endo com que todos usassem o Windo+s 1a tivessem o navegador& pois vin2a 1unto e nao poderia ser retirado. O .escape ,.0 e !ancado em 1un2o de 1JJP e o 8nternet ?xp!orer !ogo apos& em outubro do mesmo ano. ?!es possuem recursos que possibi!itam a criacao de 45TM9 de forma basica.

versao ,.0 do 5TM9 1a possuia o 4OM 1.0& permitindo com que o 45TM9 possa ser desenvo!vido de uma forma mais natura!& pois o que os navegadores interpretavam antes ainda estava em desenvo!vimento e nao estava comp!etamente padroni0ado& era c2amado de versao 0 do 4OM. versao ,.0 do 5TM9 tambem trouxe uma a!teracao nos esti!os& inseriu a possibi!idade de se ap!icar os esti!os em cascata& mudando o seu nome para 7##. 5ouve um aumento nas formatacoes possiveis e uma tentativa na padroni0acao dos esti!os nos navegadores. O :avascript e o :script nos dois navegadores possuem uma estrutura bem proxima& ficando as diferencas por conta de deta!2es no 7## e na estrutura do 4OM que cada um imp!ementava. 4OM O W"7 define 4OM como: E T2e 4ocument Ob1ect Mode! is a p!atform3 and !anguage3neutra! interface t2at +i!! a!!o+ programs and scripts to d-namica!!- access and update t2e content& structure and st-!e of documents.A O 4OM possibi!ita que as !inguagens naveguem pe!a estrutura do documento& insira um e!emento& a!tere os va!ores dos atributos& construa3o dinamicamente. ?!e e uma )8 de programacao para documentos& contem os metodos que permitam interagir com os e!ementos& assim como os eventos percebidos por e!es e suas propriedades.

rquitetura do 4OM s especificacoes do 4OM definem modu!os para tratar um uso especifico. Os modu!os dependem de outros& todos dependem do nuc!eo principa!.

?strutura no 5TM9 O 4om determina a estrutura basica do documento 5TM9& o primeiro e!emento do documento e o document& porem e!e e interpretado dentro de uma 1ane!a de um navegador& tornando o +indo+ como o primeiro e!emento. 7ada marcacao e uma representacao do ob1eto e!ement& o e!ement possui atributos ;attribute) que ficam postados dentro da marcacao& entre a abertura e fec2amento da marcacao podemos co!ocar textos ;text). Um e!emento pode possuir e!ementos fi!2os& gerando a 2ierarquia do documento.

Os e!ementos podem ser recuperados de a!gumas formas& podemos acessar um e!emento atraves de seu id& podemos andar pe!a estrutura ate c2egar ao no dese1ado e podemos recuperar todas as marcacoes do mesmo tipo& ate c2egar ao e!emento procurado. ?xiste a possibi!idade de se andar pe!os names das marcacoes& porem nao e a recomendacao +"c.

4OM e :avascript O 4OM define metodos que os ob1etos devem possuir para que possamos gerenciar a estrutura do documento. O :avascript interage com os ob1etos& criando3os e c2amando seus metodos& tornando possive! a a!teracao da estrutura da pagina& mesmo depois de sua exibicao. !inguagem permite que manipu!emos os e!ementos. <ecuperando um e!emento O primeiro passo e a identificacao do e!emento que sera a abse da acao& para tanto usaremos o metodo get?!ement(-8d. Rscript t-peTEtext@1avascriptEG min2a(orbo!eta T document.get?!ement(-8d;Eborbo!etaE)Y a!ert; min2a:ane!a )Y R@scriptG O ob1eto document possui o metodo get?!ement(-8d que retorna o e!emento que possui o id informado. caixa de dia!ogo ira exibir que min2a(orbo!eta possui um e!emento do 5TM9. )odemos usar document.odemos usar document. get?!ements(-Tag.ame;EmarcacaoE) para retornar todos os e!ementos do com o mesmo nome de marcacao& pode ser retornado todos os e!ementos do tipo EtrE. Metodos dos ob1etos 4OM *amos ver os metodos para podermos entender o uso de!es. 2as ttribute;EatributoE) 3 *erfica se o e!emento possui o atributo. set ttribute;EatributoE&Eva!orE) 3 tribui um va!or ao atributo. 7aso o e!emento nao o possua& entao o atributo sera criado. get ttribute;EatributoE) 3 Obtem o va!or do atributo. remove ttribute;EatributoE) 3 <emove o atributo. append72i!d;ob1eto) 3 diciona um e!emento como fi!2o do e!emento atua!. O navegador ira exibir o e!emento se for uma marcacao =5TM9 con2ecido por e!e. create?!ement;Ee!ementoE) 3 7ria um e!emento para que se1a possive! adiciona3!o a estrutura da pagina. createText.ode;EconteudoE) 3 8nsere um texto entre o par da marcacao parent.ode 3 <etorna o e!emento pai do no ;e!emento) atua!. c2i!d.odes 3 <etorna a co!ecao de fi!2os do e!emento. first72i!d 3 <etorna o primeiro no interno ao e!emento. !ast72i!d 3 <etorna o u!timo no interno ao e!emento. next#ib!ing 3 <etorna o proximo no fi!2o do mesmo pai que o no atua!. Traba!2ando com o cursor O mouse pode ser usado para o usuario interagir com a interface a!em do c!ique simp!es& podemos arrastar ob1etos& verificar se e!e esta sobre uma determinada posicao& sobre um ob1eto& se movendo& entre outras possibi!idades. *amos ver como podemos verificar esses eventos. s marcacoes =5TM9 possuem a!guns eventos que 1a fa!amos na au!a sobre :avascript. Os eventos sao percepcoes que os ob1etos possuem& e!es conseguem detectar que a!guma acao ocorreu. Os desenvo!vedores escrevem codigos para os eventos& por isso que esse tipo de programacao c2ama3se motivado por eventos. s marcacoes percebem a!guns eventos& mas foi criado um ob1eto c2amado de EeventE para permitir que se obten2a a!gumas informacoes em re!acao ao tipo de acao que o usuario fe0. O botao do mouse que o usuario esta segurando& a tec!a pressionada& o s2ift esta pressionado sao informacoes que podemos recuperar com o ob1eto EeventE. 7amadas s camadas permitem que se1am introdu0idos conteudos no seu interior& podemos adicionar textos sem formatacoes ou partes de =5TM9 comp!etamente formatadas. 6uando se comecou a criar !eiautes sem tabe!as& usando o posicionamento de camadas& usando EdivE ou EspanE& o uso de 7## passou a crescer& pois os esti!os permitiam o posicionamento e a a!ternancia entre visive! e ocu!to o estado da camada. )ara a!terarmos o conteudo de uma EdivE usamos a sua propriedade Einner5TM9E. function a!tera;)\

@@<ecuperando a div var camada T document.get?!ement(-8d;Emin2a7amadaE)Y @@<ecuperando o campo de texto var texto T document.get?!ement(-8d;EtextoE)Y @@<ecuperando a caixa de se!ecao var negrito T document.get?!ement(-8d;EnegritoE)Y info T texto.va!ueY @@ verificando se esta se!ecionado if ;negrito.c2ec'ed) \ @@ co!ocando negrito para a caixa se!ecionada info T ERspan st-!eTLfont3+eig2t: bo!dLGE Q info Q ER@spanGEY ] @@co!ocando o texto na EdivE camada.inner5TM9 T info Y ] O posicionamento de camadas pode ser feito dinamicamente& veremos ainda nessa au!a. ?xemp!o de menu construcao de menus 45TM9 e muito usada no desenvo!vimento de interfaces Web. construcao se baseia no conceito de exibir e ocu!tar camadas e o posicionamento das camadas. O exemp!o abaixo visa i!ustrar a configuracao visibi!it- do 7##& existem a!gumas formas de fa0er que o funcionamento se1a mais perfeito. Uma das formas de reso!ver o prob!ema e de se co!ocar uma camada inferior que eng!obe todo o meu& fa0endo com que e!a ocu!te todos os submenus. Rscript t-peTEtext@1avascriptEG function exibe;sub)\ @@ <ecuperando o menu var camada#ub T document.get?!ement(-8d;sub)Y @@?xibindo o menu camada#ub.st-!e.visibi!it- T Evisib!eEY ] function ocu!ta;camada#ub)\ @@ .ao necessita recuperar o e!emento& @@ pois e que foi passado. @@ Ocu!tando o menu camada#ub.st-!e.visibi!it- T E2iddenEY ] R@scriptG tivando as funcoes com o tempo O :avascript possui dois funcoes que permitem que se c2ame uma EfunctionE apos um determinado tempo& setTimeout e set8nterva!. funcao setTimeout permite que se esco!2a uma funcao apos decorrem um tempo determinado& enquanto a set8nterva! c2amara a funcao a cada interva!o de tempo determinado. :avascript e 7## O :avascript permite que se a!tere esti!os de campos da pagina& que se a!tere va!or para um esti!o. O esti!o pode ser informado de tres formas conforme foi visto na au!a de 7##. )odemos determinar para um e!emento qua! formatacao que sera ap!icada ne!e& a!terar a c!asse que esta sendo ap!icada ou a!terar a fo!2a de esti!os para a pagina. )odemos fa0er que o !in' nao !eva para nen2uma pagina e nao mova o documento atua!. 7o!ocando3se Ereturn fa!seYE no fina! do evento Eonc!ic'E o navegador cance!a o que seria feito com o c!ic'. Ra 2refTEfo!2a 2E onc!ic'TE fo!2a;2)Y return fa!seYE Gfo!2a 2R@aG !terando 8magens

)odemos a!terar as imagens atraves de ob1etos imagens ou atraves da propriedade EsrcE& fa0endo a a!teracao atraves de codigo :avascript. ?xistem a!gumas ap!icacoes que se uti!i0am desses recursos para mostrar varias visoes de produto. uniao da a!teracoes de imagens com a possibi!idade de se ocu!tar e exibir camadas permite que !o1as on!ine apresentem 0oom de seus produtos com a!gumas imagens. Rscript t-peTEtext@1avascriptE G var qua! T 1Y function trocar;)\ if ;qua! TT 1)\ qua! T 2Y ] e!se \ qua! T 1Y ] var ref T document.get?!ement(-8d;ErefE)Y @@ propriedade src esta sendo usada para @@ informar o enderco da nova imagem ref.src T Eimg@refriE Q qua! QE.1pgE ] R@scriptG :avascript e o 5TM9$ O 5TM9 $ esta perto de ser uma recomendacao& os navegadores correm em passar a compreende3!o para que possam aumentar a sua !ista de usuarios. ?!e gan2a marcacoes para tratar ob1etos mu!timidia. intencao da nova versao e de que se contro!e video pe!a pagina com codigos :avascript. s paginas com interacoes e conteudo ricos possuirao mais possibi!idades. O :avascript tera que interagir com os ob1etos& gan2ando mais funciona!idades Um a!iado a nova versao e o 7##"& que ira auxi!iar na tarefa de aumentar as possibi!idades da interface. O mode!o 4OM se adequa as a!teracoes feitas& permitindo que vo!temos com mais forca para a construcao de interfaces dinamicas. criacao dos codigos sempre foi traba!2osa& a verificacao para que as paginas tivessem o mesmo tipo de comportamento nos navegadores mais usados. Os frame+or's comecaram a fa0er as atua!i0acoes para poderem contemp!ar os novos recursos& nao permitindo que os espacos gan2os com os usuarios fossem perdidos. A!la ? 5istorico do 16uer!guns frame+or's comecaram a surgir& o )rotot-pe e um bom exemp!o que tem a sua primeira versao em fevereiro de 200$& e!e e base para muitos outros frame+or's tais como <ub- on <ai!s& script.acu!o.us e <ico. O desenvo!vimento do 16uer- e inicado em agosto de 200$. :o2n <esig questionava o quanto era escrito para que se inc!uisse um :avascript& comecou a desenvo!ver um mode!o de como e!e ac2ava que o tratamento dos comportamentos deveria ser imp!ementado. ?sse estudo se transformou em um frame+or' cu1a primeira versao data de 1aneiro de 200D& a primeira versao estave! ;1.0) e de agosto do mesmo ano. intencao e que o frame+or' se c2amasse :#e!ect& mas o dominio 1a estava registrado na Web& forcando3o a esco!2er um outro nome& o nome !eva a crer que seria para consu!tas a banco de dados. 16uer- e uma bib!ioteca de codigo aberto e possui !icenca dua!& fa0endo uso da 9icenca M8T ou da %.U %enera! )ub!ic 9icense versao 2. O 16uer- permite a acrescimo de suas funciona!idades com a uti!i0acao de p!ugins. )odemos uti!i0ar um existente ou criar o nosso proprio. Uma das vantagens de se estender o 16uer- e que as paginas estarao usando um unico tipo de sintaxe& faci!itando o aprendi0ado de novos desenvo!vedores e a manutencao das paginas existentes. Um p!ugin contem uma co!ecao de ob1etos que possuem comportamentos proprios. 7omecando a traba!2ar com o /rame+or' O uso de um frame+or' sempre comecara pe!a obtencao do mesmo& deve ser baixada u!tima versao estave!. s versoes de teste devem ser usadas quando 1a dominamos a tecno!ogia e dese1amos nos preparar para as novidades que virao na proxima versao& podemos tambem participar do pro1eto& nesse caso testamos as funciona!idades e re!atamos os erros apresentados para que possam ser retirados. )rimeiro contato

)ara usarmos o frame+or'& devemos fa0er a referencia do arquivo :avascript na nossa pagina =5TM9. O arquivo baixado do site do 16uerfoi co!ocado na pasta E1sE dentro do sitio. 4evemos inc!uir a marcacao script com o atributo EsrcE contendo o camin2o e o nome do arquivo. bib!ioteca possui todo arcabouco& porem precisamos c2amar as funcoes e para isso temos que ter o nosso codigo :avascript& usaremos um arquivo externo para esses codigos.

#e!etores 7## trouxe a separacao entre conteudo e !a-out& permitindo que as paginas pudessem ser formatadas atraves de arquivos externos. Os esti!os eram ap!icados aos e!ementos& foram criados se!etores para que fosse possive! se determinar qua! receberia a configuracao. tag\ esti!o: configuracaoY ] tag.c!asse\ esti!o: configuracaoY ] ^id\ esti!o: configuracaoY ] O 16uer- usa a mesma forma de acesso& e!e uti!i0a o simbo!o EIE ou a pa!avra 16uer-. I ;se!etor) ou 16uer- ;se!etor) )odemos recuperar ob1etos do =5TM9 com os se!etores como fi0emos nas outras au!as para e!ementos do 4OM com get?!ement(-8d. !gumas diferencas existem& e!as serao vistas na au!a de 2o1e. O 16uer- ap!ica o metodo a um e!emento ou varios de acordo com a quantidade de e!ementos que se enquadrem ao padrao informado. o procurarmos usando um se!etor para uma marcacao =5TM9& serao retornados todos os e!ementos que se1am da marcacao. 7orpo T I ;Abod-B)Y !ert ;corp)Y )odemos se!ecionar varios e!ementos& bastando separa3!os por virgu!as. #e!etores compostos 6uando existe a necessidade de se recuperar um e!emento que esta interno a outro& podemos usar no se!etor a sequencia ate a marcacao dese1ada. )ode ser recuperado um con1unto de e!ementos que se enquadrem na busca.

#e!etores para formu!arios #ao se!etores criados especia!mente para uso em formu!arios. I;L:inputL) F para todas as marcacoes EinputE I;L:textL) F os campos de formu!ario do tipo EtextE I;L:pass+ordL) F os campos de formu!ario do tipo Epass+ordE

I;L:c2ec'boxL) 3 os campos de formu!ario do tipo E c2ec'boxLE o mesmo serve para inputs do tipo radio& button& submit& reset& image e fi!e. I;L:enab!edL) 3 todos os e!ementos do formu!ario que este1am abi!itados I;L:disab!edL) 3 todos os e!ementos do formu!ario que este1am desabi!itados I;L:c2ec'edL) F todos os e!ementos se!ecionados em campos do tipo radio e c2ec'box I;L:se!ectedL) F todos os e!ementos se!ecionados nos se!ects do formu!ario #o e va!ido se for criado codigo para andar pe!os campos& e mais indicado o uso do EidE para recuperar um campo especifico. 7onfigurando a aparencia com o 7## ?xistem muitas possibi!idades criadas com o 7##& podemos acessa3!as usando o metodo EcssE do ob1etos recuperados pe!o 16uer-. Os nomes usados para as propriedades configuradas sao os mesmo uti!i0ados em 45TM9.

O 16uer- possui metodos que permitem que atribuamos dinamicamente c!asses& temos tambem a possibi!idade de remove3!as de um e!emento. s c!asses podem ter os seus va!ores atribuidos com programacao& sendo em resposta a eventos ou nao. ?stamos exibindo um codigo com o evento Ec!ic'E& podemos usar: EmouseoverE& EmouseoutE& E2overE. O evento mouse permite que informemos duas funcoes& sendo a primeira para quando o mouse estiver sobre o e!emento e a segunda para o caso contrario.

8nteragindo com os e!ementos pagina =5TM9 possui uma estrutura 2ierarquica de e!ementos& o frame+or' oferece a!gumas formas de andarmos pe!o documento 4OM. *imos como podemos acessar os e!ementos com um se!etor& vamos exp!orar um pouco mais as possibi!idades de se recuperar e manusear os e!ementos. interacao do usuario pode gerar a necessidade de inc!uirmos um e!emento ;marcacao)& a!terarmos o va!or de um atributo& o 16uer- oferece metodos simp!es para esses tipos de manipu!acao. administracao de dados atraves de : = passa para o navegador a responsabi!idade de atua!i0ar a interface& enviar dados para as paginas que irao registrar as novas informacoes& entre processamentos possiveis. 4evemos ter cuidado com as a!teracoes de va!ores de atributos& pois serao afetados todos os e!ementos recuperados pe!a se!ecao. o se a!terar um va!or para uma se!ecao que recuperou a marcacao EaE& todos os !in's da pagina serao atua!i0ados. O uso do atributo EidE atraves do uso da tra!2a diminui esse risco quando se pretende trocar o va!or para apenas uma das marcacoes da pagina. Metodos: text 3 Obtem ou atribui conteudos de texto& caso o e!emento possua 5TM9& e!e sera removido. attr 3 Obtem ou atribui o va!or do atributo fornecido. +idt2 3 Obtem ou atribui a !argura em pixe!s& apenas o primeiro e!emento na se!ecao sera afetado caso a se!ecao retorne varios.

2eig2t 3 Obtem ou atribui a a!tura em pixe!s o e!emento ou o primeiro da se!ecao. position 3 Obtem um ob1eto de posicao que possui o topo e a esquerda do e!emento& ou do primeiro da se!ecao. e!emento que o contem& ao seu e!emento pai. *a! 3 Obtem ou atribui o va!or de e!ementos que sao campos de formu!ario de formu!arios. /uncoes atribuidas aos eventos dos botoes: /oi usado o metodo Eva!E que retorna os va!ores dos campos de formu!ario para obter as informacoes 7rie um formu!ario com todos os tipos de campos de formu!ario e apresente todas as informacoes digitadas dentro de um EtextareaE. 7oncatene todos os dados antes de co!ocar dentro do textarea. posicao e re!ativa ao

7apturando a interacao com o usuario Os eventos que os ob1eto percebem e podem ser tratados por :avascript tambem sao recon2ecidos pe!o 16uer-. Usamos o Ec!ic'E em nossos exemp!os& mas existem mais eventos.

construcao pode ser feita com o acesso direto ao evento do e!emento& como fi0emos& outra forma e o uso do metodo EbindE& e!e associa uma funcao ao evento para o e!emento& e a terceira forma e feita com o uso de Eadd?vent9istenerE.

7aixas de dia!ogo O p!ugin 16uer- User 8nterface fornece um con1unto de ob1etos de te!a& temos muito gan2o de aparencia e nossas ap!icacoes com a uti!i0acao de!es. 8remos fa!ar um pouco sobre o E4ia!ogE. ?!e permite que se1a criada uma caixa de dia!ogo com mais possibi!idades do que as oferecidas pe!o :avascript& e criada uma camada contendo uma interface =5TM9& podendo ser moda! ou nao.

nimacoes )odemos criar muitos efeitos com os ob1etos da te!a& efeitos de transicao& na imagem& a!terar taman2o& mover ob1etos& a!em dos efeitos existentes ainda temos a possibi!idade de inc!uir p!ugins que reso!vam a!guma necessidade. O p!ugin 16uer- U8 possui o tratamento de drag and drop& permitindo que arrastemos ob1etos da te!a com o mouse. Os arquivos :avascript ui.mouse.1s e ui.draggab!e.1s devem ser inc!uidos na pagina para que se possa uti!i0ar a funciona!idade. 7omecando a usar a tecnica 1ax 8nternet <ica so tem ra0ao de ser ao ser uti!i0ada 1unto com o : =& que fa0 com que os processamentos de servidor ocorram sem que a interface saia da frente do usuario. O ob1eto =M95ttp<equest criado pe!a Microsoft permitiu que construissemos te!as mais interativas. O 16uer- possui a funcao I.a1ax;options) que incia!i0a uma c2amada : =& onde as opcoes configuram a forma de envio e o que sera enviado. )odemos enviar os dados por post ou get. O ob1eto que contro!a o envio possui metodos que sao disparados conforme o envio passa por etapas.

A!la B O ambiente de desenvo!vimento do /!as2 )ara comecarmos a traba!2ar com o /!as2 precisamos con2ecer o ambiente e as ferramentas que e!e possui& como e!e contro!a o tempo& o que sao as camadas e os ob1etos que e!e permite que construamos. O /!as2 permite que se1a mudada a area de traba!2o atraves do menu E:ane!aE e submenu E?spaco de Traba!2oE& podendo a distribuicao das ferramentas de acordo com o tipo de traba!2o que estiver rea!i0ando. Outro !oca! que podemos usar para a esco!2a e a caixa de combinacao existente na parte superior& a imagem esta com o padrao E?ssenciaisE se!ecionado. O ambiente possui varios paineis para que possamos criar o nosso fi!me& cada uma para uma funciona!idade diferente. de Traba!2oE ira disponibi!i0ar as ferramentas que sao mais usadas para determinado ob1etivo. esco!2a do E?spaco

)odemos fec2ar paineis ou enco!2e3!os que nao estamos usando para aumentar o espaco da area do fi!me& faci!itando a interacao com os ob1etos da te!a. Usamos o simbo!o com dois triangu!os na parte superior de um para rea!i0ar a acao. O menu E:ane!aE permite que se1am exibidas outras 1ane!as dentro de seu paine!. O uso de ata!2os tambem agi!i0a o traba!2o& podemos usar E/JE para c2amarmos a 1ane!a de acoes. 6uando usamos a te!a com os paineis fec2ados& em forma de icone& sera exibida a 1ane!a esco!2ida ao se c!icar no botao do icone.

O /!as2 c2ama area do fi!me de E)a!coE& e o !oca! onde serao co!ocados os ob1etos& onde podem ser feitos desen2os& onde co!ocaremos as nossas imagens. E9in2a de TempoE contro!a o que acontece em re!acao ao tempo& e!a permite que as informacoes se1am dispostas em camadas para que ob1etos aparecam sobre outros. 7omecando a desen2ar Uma forma de entender como funciona a construcao de fi!mes /!as2 e comecar com os desen2os. 8remos criar ob1etos simp!es para poder mostrar o seu funcionamento. )recisamos con2ecer a A(arra de /erramentasB& e!a possui os ob1etos de desen2o que podemos inserir no nosso A)a!coB. 8remos criar retangu!os e ovais. O desen2o de formas permite que se a!terne entre a!guns tipos& bastando que pressione o botao esquerdo do mouse e espere a exibicao do menu. ?sse procedimento pode ser feito em todas os icones que possuam um pequeno triangu!o preto na parte inferior direita. O pince! e o retangu!o possuem um menu de opcoes. 7!ique no pa!co e arraste o mouse com o botao do mouse pressionado& faca o mesmo com o s2ift tambem pressionado& iremos desen2ar um retangu!o e quadrado. *amos configurar os ob1etos& para tanto podemos configurar o preenc2imento e a !in2a de contorno. 7!ique na E/erramenta de #e!ecaoE& e!a e a seta preta na parte superior da E(arra de /erramentasE. #e!ecione o quadrado e c!ique no icone E)ropriedadesE& e!e fica na parte superior direita da 84?. 7onfigure a !in2a para 10& esco!2a a cor a0u! ;^000077) para a !in2a e verme!2a ;^770000) para o fundo& vertifique o !fa& deixando3o em 100_. !tere para trace1ada o esti!o da !in2a. )odemos usar as 1ane!as E7orE e E mostras para podermos configurar as cores dos e!ementos de desen2o tambem& !embrando sempre que o desen2o vetoria! me permite a!terar os e!ementos apos desen2a3!os& faci!itando correcoes e a1ustes. E:ane!a de !in2amentoE permite que a1ustemos os ob1etos da te!a& fa0endo com que fiquem a!in2as em um mesmo referencia!. Temos no mesmo grupo E8nformacoesE& possibi!ita que se1am feitos a1ustes de taman2o e posicao& e ETransformarE& possibi!itado que a!tere taman2o& rode e mude configuracoes de "4. ?xistem outras ferramentas que podem ser usadas& como o !apis que traca !in2as e o pince! que pinta fundos. s ferramentas para a!teracao auxi!iam apos o desen2o ser feito& a borrac2a e o ba!de sao desse tipo& ainda temos o conta gotas que permite que capturemos a cor de um e!emento. 9in2a de tempo e camadas !in2a de tempo contro!a o que esta sendo apresentado& e!a permite que se1am apresentadas informacoes diferentes& bastando que se inc!ua& remova ou a!tere os e!ementos no E)a!coE. !in2a de tempo e composta de quadros& existe um tipo especia! de quadro que e c2amado de E6uadro372aveE. 6uadros comuns repetem o conteudo da te!a& fa0endo apenas que o tempo passe& enquanto os E6uadros372aveE permitem que se1am a!terados os e!ementos da te!a& podemos trocar a te!a toda ou apenas fa0er uma a!teracao pequena& fa0endo uma animacao por quadros. Os simbo!os permitem que se1am feitas animacoes mais e!aboradas& com camin2os. )odemos dispor os e!ementos em camadas& gerando um maior contro!e do que acontece no pa!co. s camadas podem ser co!ocadas atraves do ob1eto inferior da esquerda na 1ane!a da !in2a do tempo& podemos tambem dup!icar e exc!ui3!as. s camadas podem ser re3arrumadas& tra0endo para cima ou baixo de forma a que este1am na posicao correta. 7ena Um fi!me pode ser dividido em muitas cenas& esse funcionamento permite que se1am criadas te!as tota!mente distintas em !ocais separados& com e!ementos e fundo diferentes. divisao em cenas faci!ita a administracao e manutencao do traba!2o. insercao de uma cena e feita atraves do menu E8nserirE. O simbo!o no /!as2 O /!as2 possui varias possibi!idades ao convertemos um desen2o em simbo!o& podemos converter em grafico& botao e c!ip de fi!me ;movie c!ip). Os simbo!os permitem que se ten2a contro!e sobre o que esta acontecendo nas cenas& esse contro!e e obtido atraves de programacao. 7!ipe de /i!me /unciona como uma parte de um fi!me& e!e e usado para criarmos animacoes interativas ou para termos partes da te!a com funcionamentos independentes. (otao O desen2o passa a ter as caracteristicas de um ob1eto c!icave!. Um grande parte da interacao com o usuario e feita atraves de c!iques do mouse. %rafico Usado para se criar animacoes simp!es& podemos usar para pontos da te!a que podemos ter a!guma interacao tambem.

(ib!ioteca: Os simbo!os sao arma0enados na bib!ioteca& podendo ser usados em varios !ugares ou varias ve0es no mesmo !ugar. )odem ser criadas pastas para aumentar a organi0acao& faci!itando o uso em traba!2os maiores. Os simbo!os guardados na bib!ioteca podem ser arrastados para o pa!co& passando a fa0er parte do mesmo. Traba!2ando com c!ipe de fi!me Um c!ipe de fi!me& como foi mencionado antes& funciona como um fi!me& a diferenca fica por conta de e!e ter uma area e uma !in2a de tempo propria. )odem ser editados apos ter sido comp!etado& basta um c!ique dup!o no c!ipe para que e!e se1a apresentado para a!teracao& podemos fa0er a acao atraves do menu de contexto& c!icando3se com o botao direito do mouse. Os componentes Os componentes sao simbo!os especiais com comportamento& e!es foram desenvo!vidos inicia!mente para dar suporte aos formu!arios& permitindo que fossem criadas interfaces de entrada de dados de uma forma faci!itada. 8remos o!2ar a!guns para entender o seu funcionamento& iremos continuar a fa!ar um pouco mais no ctionscript. !guns E?spacos de Traba!2oA 1a apresentam a 1ane!a E7omponentesE& porem a c!assica nao. inc!usao e feita atraves do menu B:ane!aE F E7omponentesE& podendo ser co!ocado onde se sentir mais a vontade& iremos co!ocar em nossos exemp!os abaixo E(ib!iotecaE e E)redefinicoes de MovimentoE. O /!as2 apresenta componentes de interface do usuario& para uti!i0acao com /!ex e para tratamento de videos. criacao de uma interface deve faci!itar o uso pe!o navegante& a internet possui usuarios de todos os tipos& a!guns padroes estabe!ecidos aumentam o conforto de!es. *amos criar um formu!ario simp!es de cadastro para i!ustramos o uso dos formu!arios. 8remos cadastrar os seguintes dados: nome& nascimento& emai!& estado e cidade. /!ex 3 O !ado servidor /!ex e um poderoso frame+or' de codigo aberto que permite que voce faci!mebnte construa ap!icacoes moveis para o iO#& ndroid e (!ac'(err- Tab!et O# dispositivos& bem como ap!icacoes tradicionais para o navegador e des'top usando o mesmo mode!o de programacao& ferramentas e base de codigo. s ap!icacoes podem acessar os recursos do dispositivo& tais como %)#& ace!erometro& camera e banco de dados !oca!. 84? dobe /!as2 (ui!der& que e uma customi0acao do ?c!ipse 84?. ?!a oferece recursos de produtividade& dispositivo de depuracao e simu!acoes de dispositivos moveis para testar em taman2os e reso!ucoes de te!a. O frame+or' possibi!ita integracao com !inguagens e tecno!ogias que sao executados no servidor& inc!uindo :ava& #pring& 5ibernate& )5)& <ub-&. .?T& dobe 7o!d/usion& e a!guns padroes da industria como <?#T& #O )& :#O.& :M#& e M/. O /!ex uti!i0a o ctionscript e o M=M9& e uma !inguagem dec!arativa baseada em =M9. A!la C 8ntroducao ao 1ax O primeiro ponto que devemos firmar e que : = e uma tecnica& nao e uma tecno!ogia ou uma !inguagem. tecnica se uti!i0a de outros recursos e so e possive! apos a criacao pe!a Microsoft de um componente para o 8nternet ?xp!orer $.0. equipe que criou o Out!oo' Web ccess para o Microsft ?xc2ange #erver 2000& criou um componente que permitia que as so!icitacoes pudessem ser feitas pe!o navegador atraves de um componente ctive= c2amado por programacao script no navegador. O ob1eto veio como uma evo!ucao do M#=M9& a mesma ainda e usada para podermos navegar por ob1etos =M9. tecnica ficou essencia!mente confinada ao Out!oo' Web ccess do ?xc2ange 200" ate marco de 200"& quando recebeu o nome de : =. Out!oo' Web ccess O Microsoft Out!oo' Web ccess e a primeira ap!icacao 1ax desenvo!vida& c!iente de emai! com acesso ao servidor de emai! da Microsoft. O funcionamento Web era muito simi!ar as versoes inta!adas nas maquinas. /uncionamento do : = O desenvo!vimento tradiciona! fa0 com que cada pagina se1a enviada para o navegador& =5TM9 e outros arquivos so!icitados& podemos me!2orar com o uso de cac2e. O uso do : = transforma uma pagina em muitas paginas& as partes da te!a sao atua!i0adas com informacoes& nao necessitando de se enviar os arquivos e imagens que compoe o !a-out. mudanca dimui a quantidade de (-tes que e enviada em uma ap!icacao Web que o usuario precisa uti!i0ar& aumenta a espera da primeira e me!2orando a sensascao de uso pe!a me!2ora nas resposatas das proximas so!icitacoes. <ecuperando informacoes e atua!i0ando a interface

s informacoes sao so!icitadas para a funcao 1ax& sao fornecidas as informacoes necessarias para que o codigo c2ame o arquivo no servidor e que atua!i0e a parte da interface. Uma das maneiras de se rea!i0ar essa a!teracao na te!a e o retorno de codigo =5TM9 que sera atribuido a area com o uso da propriedade inner5TM9& e!a substitui o conteudo do e!emento pe!o va!or passado. funcao apresentada rea!i0a esse tipo de atribuicao dentro do evento Eonread-statusc2angeE. /aremos uso de!a no exemp!oa seguir& quando carregaremos um arquivo contendo toda a formatacao. 7onstrucao #imp!es: *amos construir uma interface simp!es com informacoes para experimentar a funcao& o evento Aon!oadB da marcacao Abod-B e acionado quando toda a pagina e carregada& so e possive! acessar um e!emento da pagina quando e!e 1a foi interpretado pe!o navegador& por isso que existe a necessidade de se usar o Aon!oadB& podemos co!ocar a c2amada apos o e!emento& forcando a sua execucao depois de que a marcacao faca parte da pagina. Os arquivos c2amados podem ser criados com qua!quer !inguagem ou tecno!ogia processada no servidor& !inguagens como :ava& )5)& )-t2on& <ub-& 7o!d /usion ; possui uma proposta diferente )& e tecno!ogias como dot .et sao formas que podemos usar para acessarmos o banco de dados e rea!i0armos os processamentos necessarios para o sistema. 72amada da funcao Rbod- on!oadTBc2ama)roc ;Anoticia1.2tm!`& aco!una`& 1)BG 7amada que tera o seu conteudo preenc2ido pe!a pagina so!icitada. Rdiv idTBco!una1BGR@divG Usando 4om e =M9 O ob1etivo desse tipo de construcao e que as requisicoes retornem apenas dados& as propriedades do ob1eto =M95ttp<equest& permitem que recuperemos os dados no formato =M9. O exemp!o mostrado anteriormente& preenc2e uma area com uma pagina =5TM9 atraves da propriedade Einner5TM9E. Os exemp!os que iremos ver a seguir usarao as funcoes que manipu!am o 4OM. O ob1eto recuperado atraves da propriedade Eresponse=M9E e do tipo =M9& permitindo que usemos as funcoes de navegacao por seus e!ementos e atributos& podemos varrer todos os fi!2os do e!emento rai0& descendo pe!a 2ierarquia. )odemos !oca!i0ar um e!emento especifico ou grupo de e!ementos. Usaremos um exemp!o com um arquivo =M9 sobre peixes. rquivo =M9 Usaremos no exemp!o um arquivo =M9 com os dados dos peixes. 8remos andar pe!a estrutura com 4OM e inserir e!emento a e!emento na camada de destino.

?nvio de dados de formu!ario O uso de 1ax para envio de dados de um formu!ario para outra pagina pode ser feita atraves do metodo E%?TE ou E)O#TE da mesma forma que fa0emos no modo tradiciona!& a grande diferenca e que devemos recuperar as informacoes para que e!as se1am enviadas para o arquivo que

as recebera. funcao 1ax deve ser a!terada para que possibi!ite esse tipo de tratamento& caso voce ten2a percebido a funcao apresentada esta com o metodo padrao estipu!ado. O metodo E%?TE envia as informacoes atraves do endereco de c2amada da pagina& sao passadas informacoes apos o nome do arquivo. O simbo!o que separa o nome do arquivo dos dados e a interrogacao. Os campos de formu!arios sao adicionados ao endereco no formato campo igua! va!or& os pares sao separados pe!o simbo!o e comercia! ;H). O nome dado para esse con1unto de pares e Equer-stringE. )odemos montar com programacao a c2amada ao arquivo com todos os dados necessarios. construcao usando o metodo E)O#TE nao diferencia muito& mas os dados sao enviados atraves do metodo EsendE do ob1eto =M95ttp<equest. 8remos mostrar as mudancas rea!i0adas para gerar uma funcao de envio atraves de EpostE. primeira a!teracao e que temos um parametro a mais para que possa ser enviada a !ista de campos no padrao de uma Equer-stringE. funcao na pagina que c2ama a que rea!i0a a c2amada assincrona deve recuperar os campos e criar a variave! com os dados. assinatura da funcao contendo o parametro campos. /unction c2ama)roc)ost;pagina& destino& func& campos& mostraMsg)\

O metodo deve ser trocado para E)O#TE no metodo EopenE e devemos informar os cabeca!2os para envio de dados no metodo.

Usando 4om e :#O. ?xistem outras formas que podemos organi0ar as informacoes para envio de dados entre ap!icacoes& uma bastante usada na Web e a :#O.. O padrao :#O. organi0a os dados da mesma forma que criamos uma estrutura em :avascript& permitindo uma 2ierarquia um e!emento pode ter uma co!ecao de fi!2os& da mesma forma que o =M9. O taman2o do arquivo gerado e um pouco menor que se fosse usado o =M9 para descrever os dados. s a!teracoes feitas na funcao para recuperar dados com =M9 sao pequenas& a primeira parte que temos que fa0er e a conversao do texto retornado em um ob1eto :avascript& usamos a funcao Eeva!E do :avascript para executar o texto que esta no texto. O formato :#O. tras a vantagem de estarmos dentro de uma estrutura :avascript& permitindo acesso mais direto aos e!ementos dentro da 2ierarquia. 16uer- e 1ax O /rame+or' 16uer- possui varios recursos& entre e!es podemos citar o gan2o no uso com o 1ax e traba!2o com a estrutura. Toda a comp!exidade de se tratar o navegador& troca de estados e evento disparado pe!o ob1eto =M95ttp<equest ficam a cargo do frame+or'. simp!icidade no retorno de texto com o resu!tado formatado e muito grande& bastando c2amar uma funcao. /unction usando:6uer-;)\ I;A^apresentaB).!oad;Apagina.2tm!B)Y ] ?xemp!o de c2amada simp!es onde o retorno sera carregado no e!emento com id igua! a apresenta. O metodo E!oadE possui mais parametros opcionais que permitem um maior contro!e da resposta. #intaxe: I;se!ector).!oad;ur!&data&function;response&status&x2r))Y Onde:

ur! F endereco do arquivo data F dados que serao enviados pe!o ob1eto =M95ttp<equest ;formato quer-string) function F pode ser criada uma funcao& sendo passado apenas o nome& ou criada uma funcao anonima em !in2a. parametros mostrados na sintaxe. response F contem o retorno da requisicao status F pode conter os va!ores: EsuccessE& EnotmodifiedE& EerrorE& EtimeoutE ou EparsererrorE x2r F contem o ob1eto =M95ttp<equest A!la 1< Microsoft e o /rame+or' dot .et

funcao deve ter os tres

?xistem muitas ferramentas e !inguagens para que tornam possive! o desenvo!vimento de funciona!idades em sistemas 8nternet. ?m nossa primeira au!a& destacamos a evo!ucao& ate que fosse criado a 7%8 e a marcacao EformE com os seus campos. evo!ucao das !inguagens& tecno!ogias e servidores Web& exige uma atua!i0acao constante dos profissionais. Microsoft possuia dois produtos para o desenvo!vimento Web& o /ront )age e o *isua! 8nter4ev. ?!es foram substituidos com a criacao do frame+or' dot .et. Ocorreu uma demora de um ano e meio apos a apresentacao do frame+or' ate disponibi!i0ar a sua versao fina! em 2002. ?xistem outras ferramentas vo!tadas para a criacao de sistemas Web da empresa& o WebMatrix era a so!ucao gratuita para inicio na tecno!ogia& sendo usada para que pessoas experimentassem o seu funcionamento& o ?xpression Web substituiu o /ront )age como construtor de paginas& tendo codigo de servidor ou nao& o ?xpression (!end possui a funcao de ser um integrador de tecno!ogias Web& o *isua! Web 4eve!oper e o ambiente de desenvo!vimento para #) dot .et. 8remos focar os nossos exemp!os no ambiente *isua! Web 4eve!oper ?xpress& faci!itando a uti!i0acao por todos por ser gratuito. /rame+or' dot .et Microsoft desenvo!veu uma maquina virtua!& 7ommon 9anguage <untime ;79<)& para que fosse executado o seu novo padrao& o dot .et. O frame+or' foi desenvo!vido para dar suporte tambem aos sistemas distribuidos& uma tendencia que 1a era percebida na epoca de sua criacao. ?!e funciona como uma co!ecao de funciona!idades disponiveis para o desenvo!vimento de ap!icacoes. 7aracteristicas: Z 8nteroperabi!idade. Z 8ndependencia de !inguagem. Z 8mp!antacao simp!ificada. Z #eguranca. Z )ortabi!idade. O codigo dot .et uti!i0a uma forma simi!ar ao :ava& o codigo e compi!ado para um estado que intermediario c2amado (-tecode. O /rame+or' e a!guns componentes 7ommon T-pe #-stem ;7T#) ?specificacao que define todos os tipos de dados. 7ommom 9anguage <untime ;79<) Maquina virtua! onde o codigo sera executado. 7ommon 9anguage 8nfrastructure ;798) /ornece uma p!ataforma para desenvo!vimento e execucao de ap!icacoes dor .et. (ase 7!ass 9ibrar- ;(79) (ib!ioteca fornece c!asses que encapsu!am funcoes comuns& inc!uindo !eitura e escrita de arquivos& processamento grafico& a interacao de banco de dados& manipu!acao de documentos =M9& entre outras.

9inguagem 7^ !inguagem 7^ e orienta a ob1etos e fortemente tipada& as varaveis necessitam ser definidas e passam a possuir as caracteristicas de seu tipo. O frame+or' dot .?T possui a definicao dos tipos de variaveism& assim como& fornece um grande con1unto de c!asses para suprir as necessidades de desenvo!vimento. sintaxe basica da !inguagem e as estruturas seguem o formato da !inguagem 7. Tipos de 4ados !inguagem fornece duas formas de funcionamento da variave!: e!a arma0ena um va!or ;uma constante e arma0enada ne!a) ou e!a arma0ena uma referencia para um endereco de memoria ;!oca! onde a informacao esta a!ocada). )ode ser feita referencia ao mesmo endereco de memoria por mais de uma variave!& podemos ter uma variave! apontando para as informacoes de um carro e depois fa0er com que outra aponte tambem& a a!teracao dos dados podera ser feita em qua!quer uma das duas. 7riamos um ob1eto a partir de uma c!asse 7arro e o arma0enamos na variave! carro. tribuimos a variave! carro a outra variave! carro.ovo& a segunda variave! nao arma0ena uma copia& e!a aponta para os dados originais& tudo que for a!terado atraves de!a sera percebido atraves da variave! carro. 7ontro!es Os formu!arios possuem campos para que a pagina possa enviar informacoes para o codigo que e executado no servidor Web. )odemos usar marcacoes 5TM9 de campos de formu!ario com o atributo ErunatE contendo o va!or EserverE ou contro!es #)..?T. Os contro!es permitem que o funcionamento se1a simi!ar aos usados em programacao des'top& fa0endo com que os eventos disparem codigos no servidor. ?xistem a!guns contro!es usados para exibicao de informacoes. !ista a seguir mostra a!guns dos contro!es que podemos usar.

cesso ao banco de dados

Microsoft atua!i0ou o seu metodo de acessar banco de dados do 4O para o 4O..?T ; ctive= 4ata Ob1ects ..?T). ?!e possui uma estrutura de ob1etos destinados para o acesso e manuseio de banco de dados. /ormas de acesso do 4O..?T

?spacos de .ome do #)..?T #-stem.4ata 3 ;4ados do sistema) 3 c!asses fundamentais para gerenciar dados como 4ata#et e 4ata<e!ation. #-stem.4ata.7ommon 3 ;4ados comuns de #istema) 3 c!asses bases que sao 2erdadas por outras c!asses. #-stem.4ata.O!e4b 3 c!asses usadas para rea!i0ar conexao com o provedor O9? 4(. #-stem.4ata.#q!7!ient 3 c!asses para conexao com um banco de dados #69 #erver via interface T4# ;Tabu!ar 4ata #tream) #-stem.4ata.#q!T-pes 3 ;Tipos #69 de dados) F permite que facamos uso de dados fornecidos ou recebidos por um banco de dados re!aciona!. umenta a seguranca em re!acao aos dados traba!2ados. 7riando uma conexao )ara podermos executar scripts #69 em um servidor de banco de dados& primeiramente& precisamos fa0er com que um ob1eto se conecte ao banco de dados. pos termos uma conexao com um banco de dados& podemos executar os scripts& acessando os ob1etos do banco. )ara exibirmos os dados na te!a& temos que recupera3!os em um ob1eto. )asso 1: 7onexao com o banco )asso 1: 7onexao com o banco ?xistem a!gumas formas de nos conectarmos a um banco de dados& pode ser feita atraves de uma conexao O4(7 previamente configurada no sistema operaciona!& podemos usar O9?4( que permite se configure pe!a programacao& por exemp!o. )asso 2: ?xecutando comandos )asso 2: ?xecutando comandos )recisamos informar para um ob1eto de comandos o #69 que pretendemos usar. construcao da instrucao #69 pode ser feita de duas formas& pode ser criado um texto com o script concatenando3se a parte fixa com as informacoes recebidas da requisicao 5TT)& ou podemos criar um texto com caracteres de escape que indicam que existem parametros que precisam ser informados& sendo posteriormente substituidos pe!as informacoes recebidas& EbE. ?x1: command.7ommandText T E8.#?<T 8.TO pessoa ;nome& idade) E* 9U?# ;E ELE Q <eques./ormWEnomeEX Q EL& E Q <eques./ormWEidadeEX Q E)EY ?x2: command.7ommandText T E8.#?<T 8.TO pessoa ;nome& idade) E Q E* 9U?# ;bnome& bidade)EY

#q!)arameter param.ome T .e+ #q!)arameter;EbnomeE& #q!4bT-pe.Text& 0)Y #q!)arameter param8dade T .e+ #q!)arameter;EbidadeE& #q!4bT-pe.8nt& 0)Y command.)arameters. dd;param.ome)Y command.)arameters. dd;param8dade)Y param.ome.va!ue T <eques./ormWEnomeEXY param8dade.va!ue T 7onvert.To8nt"2;<eques./ormWEidadeEX)Y @@<ea!i0a a configuracao parametros com o comando. command.)repare;)Y command.?xecute.on6uer-;)Y )asso ": <ecuperando registros de tabe!a )asso ": <ecuperando registros da tabe!a )odemos recuperar o retorno da instrucao #69& a !ista de registro pode ser exibida na te!a. Usamos o metodo E?xecute.on6uer-E no exemp!o anterior& e!e envia o script para ser processado pe!o gerenciador de banco de dados e nao recebe retorno. Usaremos o metodo E?xecute<eaderE& e!e retorna um ob1eto do tipo #q!4ata<eader. @@ @@string de conexao @@ string connection#tring T bE4ata #ourceT.c#ervidor#69YE Q E 8nitia! 7ata!ogT)ets2opYE Q E 8ntegrated #ecurit-TTrueYE Q E )oo!ingT/a!seEY @@ @@ *ariave! para arma0enar a consu!ta #69 @@ string quer- T E#?9?7T [ /<OM )eixeEY @@ @@ Ob1etos para andar pe!os dados @@ #q!4ata<eader reader T nu!!Y #q!7onnection conn T nu!!Y tr- \ @@ @@instancia da conexao @@ conn T ne+ #q!7onnection;connection#tring)Y @@ @@abre conexao @@ conn.Open;)Y @@ @@ 7riacao do ob1eto comando& @@que recebe a quer- que sera uti!i0ada na operacao @@e a conexao com o banco. @@ #q!7ommand cmd T ne+ #q!7ommand;quer-& conn)Y @@ @@ ?xecuta comando& passando para reader o retorno @@ reader T cmd.?xecute<eader;)Y @@ @@interage com a tabe!a retornada @@ +2i!e ;reader.<ead;))

\ @@ <ecuperando dados da tabe!a @@readerWEnomeEX.To#tring;) Y @@readerWEdescricaoEX.To#tring;)Y ] @@ @@ /ec2a conexao com o banco @@ conn.7!ose;)Y ] catc2 ;?xception ex) \ 7onso!e.Write9ine;ex.Message)Y ] fina!!\ @@ @@ %arante que a conexao sera fec2ada mesmo que ocorra a!gum erro. @@ .ao existe prob!ema em fec2ar uma conexao duas ve0es. @@ O prob!ema esta em abrir uma conexao duas ve0es. @@ if ;conn ST nu!!) \ conn.7!ose;)Y ] ] ?xemp!o de Uso 8remos fa0er um exemp!o usando as faci!idades fornecidas pe!o ambiente *isua! Web 4eve!oper. O 84? nos fornece faci!idades para se criar a ap!icacao e acessar banco de dados. O ambiente e simi!ar ao *isua! #tudio que voces tiveram contato nas discip!inas que traba!2am a!goritmo e estruturas de dados. ?!e e muito intuitivo e de faci! aprendi0ado. O ambiente fornece temp!ates para podermos comecar sistemas com estruturas padroes inc!usas ou podemos comecar com um pro1eto va0io. !em disso& podemos especificar qua! a !in2agem que sera adotada. !inguagem nao ira interferir muito o modo de desenvo!vimento& pois o uso do frame+or' dot .et ira direcionar o que sera usado& a diferenca fica por conta da sintaxe. *amos fa0er uma ap!icacao va0ia para podermos diminuir a comp!exidade e conseguir gerar um codigo funciona!. 8remos fa0er uma !istagem& a aparencia da !istagem sera simp!es& mas pode ser me!2orada com pouco traba!2o. O primeiro passo e a criacao do banco de dados. s 2ospedagens oferecem a!guns tipos de bancos de dados para fa0er a persistencia de nossos dados& muito oferecem gratuitamente o M-#69 e o /irebird& mas cobram pe!o uso do M# #69 #erver. Usamos no nosso exemp!o o pacote ?as- )5) por ser um produto gratuito. ?!e fornece um servidor pac2e com )5)& o gerenciador de banco de dados M-#69 e o front end )5) M- dmin para M-#69. O mo pode ser visto na aba 4esigner ;a c2ave estrangeira composta nao e exibida) 7onc!usao O ambiente de desenvo!vimento dot .et da Microsoft faci!ita o desenvo!vimento& diminuindo o tempo de construcao de ap!icacoes& mas e!e nao fa0 tudo so0in2o e devemos nos aprimorar para tirar o maximo de proveito e criar sistemas com qua!idade. O estudo de banco de dados e essencia! para um me!2or funcionamento dos sistemas informati0ados. 6uanto me!2or for a sua interface& quanto menor dificu!dade e!a oferecer ao usuario& maior a c2ance de sucesso.