CARLOS EDUARDO DE MELO RODOVALHO RA: 1100398

Plataforma de desenvolvimento web

ESTUDO DA APLICAO DE ELEMENTOS HTML5 E CSS3 EM AMBIENTE DE PRODUO DE SISTEMAS DE INFORMAO.

Orientador: Prof. Esp. Marcos Henrique De Paula Centro Universitrio Claretiano

UBERABA 2012

ESTUDO DA APLICAO DE ELEMENTOS HTML5 E CSS3 EM AMBIENTE DE PRODUO DE SISTEMAS DE INFORMAO

RESUMO
Este artigo tem como objetivo estudar a aplicao e a aceitao por parte de desenvolvedores e usurios, de novos elementos e tecnologias introduzidas pelas novas verses da linguagem de marcao de hypertexto HTML5 e da tecnologia de folhas de estilo CSS3 em sistemas de informao baseados na internet em ambiente de produo, fornecendo subsdios para o desenvolvimento de novos sistemas que possam ofertar aos usurios um ambiente rico e produtivo, ao mesmo tempo em que diminui as dificuldades dos desenvolvedores e promove a acessibilidade de contedos e ferramentas atravs de estruturao semntica. Palavras-chave: html5; css3; sistemas de informao; ambiente de produo; acessibilidade; semntica; web Standards; interface.

INTRODUO
A quinta verso da linguagem de marcao para desenvolvimento de contedo web, HTML, est em processo de especificao e estima-se que em 2014 esse processo se finalize e a especificao dos elementos da linguagem estar totalmente concluda. A nova verso tem como principais objetivos promover a acessibilidade do ambiente web (no s para usurios com limitaes fsicas, mas tambm para meios no convencionais de acesso, como um celular ou o computador de bordo de um carro) e construir uma estrutura semntica para o contedo, permitindo que os dados possam ser manipulados de maneira mais inteligente e eficiente, tanto pelo desenvolvedor quanto pelo agente do usurio (navegador). Atualmente possvel observar uma tendncia crescente no meio de desenvolvimento de sistemas de informao, a migrao das aplicaes para o ambiente web, que oferece possibilidades interessantes para o usurio, como colaborao entre usurios, informao centralizada, consistente e acessvel independente de localizao e portabilidade, alm de outras caractersticas. Porm pode-se observar que o HTML no foi concebido para esse ambiente, e no evoluiu muito no aspecto de ferramenta para sistemas web at a atual verso 4.01. Na verdade o HTML sempre foi orientado a criao de sites, sem muitas possibilidades para manipulao dinmica de contedo e interao do usurio. Existem muitas ferramentas, plugins, frameworks e tcnicas de terceiros usados para estender as possibilidades de desenvolvimento em ambiente web, e isso tornou possvel a criao de aplicaes muito eficientes e versteis, usando HTML como base. Porm essa base acabou se tornando um gargalo para todo o sistema, pois suas limitaes obrigam que sejam criadas solues para problemas simples que poderiam ser tratados de maneira muito mais inteligente em um ambiente mais rico em recursos. Existem vrias demandas de diferentes softwares tanto no setor privado quanto no setor pblico. Do mesmo modo, na Universidade Federal do Tringulo Mineiro h a necessidade da construo de aplicaes que ofeream aos usurios melhores formas de tratar a informao. Uma delas a construo de um sistema para inscrio de controle das equipes de organizao de concursos pblicos e vestibulares, onde a equipe pretende aplicar alguns recursos de HTML5 e CSS3, tanto para permitir novas possibilidades aos usurios como para experimentar e testar o comportamento desses novos recursos em ambiente de produo. Ao introduzir esses novos elementos no ambiente de produo, ser possvel criar parmetros comparativos em relao aplicabilidade e aceitao da nova tecnologia, ao mesmo tempo em que se possvel perceber qual o nvel de ganho de produtividade de

desenvolvimento e de uso da aplicao por parte dos usurios, que podem contar com mais facilidades.

METODOLOGIA
Suporte tecnologia Por serem tecnologias em desenvolvimento, os usos dos novos elementos e recursos do HTML5 e CSS3 deve ser feito com cuidado especial. Cada recurso deve ser estudado e testado em vrias verses de diversos navegadores disponveis no mercado, a fim de aferir como os agentes de usurio renderizam e controlam cada elemento. A deteco do suporte a uma tecnologia deve ser feito para que a aplicao possa informar ao usurio a ausncia desse suporte e, de acordo com cada situao, informar essa deficincia e sugerir a atualizao do agente de usurio, conforme ilustra a Figura 1, ou oferecer o contedo ou controle de maneira alternativa, como mostra a Figura 2, onde o usurio pode mover os elementos entre os recipientes selecionando-os e usando os botes centrais.

Figura 1: Mensagem de erro informando a ausncia de suporte tecnologia. Fonte: Acervo pessoal.

Figura 2: Controle alternativo tecnologia Drag and Drop. Fonte: Acervo pessoal.

Tal deteco pode ser feita via Javascript, usando tcnicas de identificao do agente de usurio e, baseado em cada motor, fazer testes de criao de elementos ou a existncia de determinadas propriedades particulares ao recurso ou tecnologia que se deseja detectar e, com o resultado desse teste, determinar e agir de acordo com o suporte. No entanto, existem recursos que tornam essa tarefa mais simples e apresentam um resultado mais eficiente, como o uso de bibliotecas do framework JQUERY. Ao utilizar a biblioteca Modernizr, o desenvolvedor pode tratar a deteco dos recursos de forma intuitiva, dispensando a identificao do agente de usurio, e podendo tratar a apresentao de contedos e controles alternativos de maneira modularizada. No trecho de Cdigo fonte 1 demonstrado o uso do plugin Modernizr para realizar a deteco do suporte ao recurso geolocation, que permite ao sistema saber a localizao fsica do usurio.

1 2 3 4 5 6 7

if (Modernizr.geolocation) { //Apresenta contedo usando geolocation } else { //Apresenta mensagem de erro //ou //Apresenta contedo alterantivo }

Cdigo fonte 1: Uso do plugin Modernizr. Fonte: Acervo pessoal.

Alm da deteco do suporte tecnologia, a equipe de desenvolvimento deve monitorar periodicamente o estado da especificao dos elementos usados e a maneira como os agentes tratam esses elementos, pois como padro em desenvolvimento, o comportamento ou aparncia desses elementos pode mudar a qualquer momento, podendo causar instabilidades ou at mesmo o no funcionamento do sistema. O projeto foi desenvolvido com base nos navegadores com maior suporte e similaridade de funcionamento dos elementos entre si, a fim de garantir um maior grau de consistncia aos usurios. Como o projeto dispe de infra estrutura sob controle, possvel orientar ao usurio usar determinado navegador para usar o sistema, por isso o projeto foi desenvolvido para funcionar nos navegadores: Mozzila Firefox 16 ou superior Google Chrome 23 ou superior Anlise do sistema O sistema desenvolvido trata do processo de inscrio, seleo e organizao de pessoas interessadas em trabalhar como fiscais durante os processos seletivos de alunos da Universidade Federal do Tringulo Mineiro. Os grupos de usurios do sistema so compostos por funcionrios da universidade, que podem se inscrever como colaboradores ou controlar o processo de organizao dos fiscais. O sistema funciona na rede interna da universidade, usando a infra-estrutura necessria aos seus requisitos, como sistema operacional e navegadores apropriados, e para o grupo de usurio que gerencia o processo oferecido treinamento. O processo dividido em duas etapas principais: o perodo de inscrio dos colaboradores interessados em trabalhar no vestibular e o perodo de organizao do vestibular, onde o processo de inscries encerrado. Ao usurio que se inscreve como colaborador oferecido um cadastro onde ele deve manter atualizados seus dados pessoais, funcionais e financeiros (necessrios porque os colaboradores recebem pelo trabalho). Tambm disponibilizado o ambiente onde o colaborador pode se inscrever para trabalhar em determinado vestibular e tambm acompanhar sua inscrio, sabendo qual funo ele ir exercer, em qual local de prova ir trabalhar ou qualquer outro tipo de informao pertinente.

Aos usurios do grupo de organizadores do vestibular, o sistema deve permitir: - Que dentre os colaboradores cadastrados, possam ser selecionados (a seleo feita por meio de sorteio realizado manualmente) os colaboradores que efetivamente vo trabalhar no vestibular. - A distribuio dos colaboradores selecionados em grupos e funes, para que o processo de alocao dos fiscais nos locais de trabalho seja mais organizado e para separ-los de acordo com a funo que exercem, o que define o valor que recebero. - A alocao dos fiscais nos locais de trabalho, para que seja atendida a demanda de fiscais estabelecida no edital do vestibular. - A consulta e localizao dos fiscais nos locais de trabalho, e a consulta dos seus dados pessoais e tambm o registro das experincias de cada colaborador, para melhor orientar o organizador em relao afinidade de cada colaborador com determinada tarefa. - A emisso de relatrios descritivos e analticos, bem como a impresso de adesivos colocados nos crachs que identificam o fiscal. Com base nesses requisitos e na infra estrutura disponvel, foi realizada a prototipao da interface do sistema, que apresentada e aprovada pela equipe de organizao do vestibular, foi construda a interface utilizado recursos e tecnologias do HTML5 e CSS3 que apresentam um nvel de compatibilidade e consistncia satisfatrio. Elementos estruturais Muitos dos novos elementos disponveis na nova verso do HTML no so elementos essencialmente visuais ou oferecem uma funcionalidade nova, como o caso do canvas ou um campo do tipo date, que apresenta um calendrio para o usurio. Grande parte desses elementos oferece uma maneira mais inteligente de estruturao da pgina, adicionando sentido (semntica) ao contedo, a fim de permitir que o agente de usurio trabalhe melhor com o contedo, que ele possa ser mais bem trabalhado para ofertar acessibilidade ao usurio, alm de proporcionar ao desenvolvedor uma organizao da estrutura da pgina que realmente faz sentido, sem objetos genricos que necessitam da criao de uma metodologia de identificao.

Estes so os elementos que foram usados no projeto, selecionados de acordo com a sua aplicabilidade no contexto e com o nvel de compatibilidade oferecido nos navegadores disponveis. <section> A tag section define uma nova seo genrica no documento, contendo elementos que tem relao entre si, diferente da tag div, que no representa qualquer tipo contexto, e deve ser usada somente para propsitos de manipulao ou formatao, a tag section geralmente tem um cabealho (heading) que identifica a temtica dos elementos que ela agrupa. O bloco de Cdigo fonte 2 mostra o uso de sees de contedo no projeto:

1 2 3 4 5 6

<section id="sectionDadosPessoais"> //dados pessoais </section> <section id="sectionContatos"> //informaes de contato </section>

Cdigo fonte 2: Uso da tag <section> no projeto. Fonte: Acervo pessoal.

Como o formulrio foi dividido em abas, para melhor apresentao e organizao dos dados de acordo com o contexto, facilitando o preenchimento do formulrio, foram usadas sees para conter os elementos que tem relao entre si. <header> O elemento header representa um grupo de introduo ou elementos de navegao. O elemento header pode ser utilizado para agrupar ndices de contedos, campos de busca ou at mesmo logos. No bloco de Cdigo fonte 3, mostrado como a tag <header> abriga a identificao da tela e instrues ao usurio para manter seu cadastro atualizado.

1 2 3 4 5 6

<header> <h1 class="tituloTelas">Meus dados</h1> <p> //... </p> </header>

Cdigo fonte 3: Cabealho usando a tag <header>. Fonte: Acervo pessoal.

<nav> Estrutura que representa uma seo onde esto colocados os controles de navegao da pgina ou sistema, abrigando links para os documentos por onde o usurio poder navegar. As abas do formulrio principal so links que permitem ao usurio navegar pelas divises contextuais. Agrupadas pela tag <nav> esses links se diferem dos demais links por terem um sentido co-relativo, como mostrado no bloco de Cdigo fonte 4.

2 3 4 5 6

<nav> <a <a <a <a </nav>

href="#" href="#" href="#" href="#"

id="DadosPessoais">Dados pessoais</a> id="Contatos">Contatos</li> id="Bancarios">Dados bancrios</li> id="Experiencias">Experiencia</li>

Cdigo fonte 4: Uso da tag <nav> estruturando o menu. Fonte: Acervo pessoal.

Controles de formulrios Foram introduzidos novos tipos de controles para formulrios, permitindo principalmente ao agente do usurio, que sejam ofertados recursos de preenchimento de dados de acordo com o tipo e/ou formato de dado esperado. Esses novos tipos so implementados no atributo type do elemento <input>: search Um campo de busca . A aparncia e comportamento do campo podem mudar ligeiramente dependendo do agente de usurio, para parecer com os demais campos de busca do sistema, como por exemplo, adicionar um cone de lupa no final do campo. Pode formatar e/ou validar os dados no formato de endereo eletrnico, podendo ser tratado de maneira especifica pelo navegador, como por exemplo a integrao com a agenda de contatos ou oferecer botes @ e .com no teclado virtual.

email

datetime

Para trabalhar com datas, possvel que o navegador disponibilize ao usurio um calendrio para a escolha da data de forma mais natural. Tambm pode ser dos tipos: date, month, week, time e datetime-local. Existe tambm o atributo adicional step, que recebe valores numricos e define, para os validadores e auxlios ao preenchimento, a diferena mnima entre dois horrios.

tel

Aceita valores numricos no formato de telefone, tambm pode ser tratado de maneira relevante pelo agente do usurio, como integrao com a agenda de contatos ou apresentao de teclado numrico. Para realizar a entrada de valores numricos. possvel que o navegador crie um controle interativo onde o valor pode ser acrescido ou decrescido em passos (aqui tambm determinado pelo atributo adicional step).

number

Alm dos novos tipos de elementos, outros atributos foram introduzidos nos elementos de formulrios, garantindo navegao facilitada, novos meios para orientar o usurio e recursos de validao client-side.

required

Valor: true/false. Indica se o elemento deve ser obrigatoriamente preenchido para que um formulrio seja enviado. Cabe ao navegador, e no mais ao desenvolvedor, fazer a checagem do preenchimento do campo e informar o usurio de tal necessidade. Valor: true/false. Para que o controle receba o foco da ao do usurio (cursor de digitao ou centralizao na tela) imediatamente aps a finalizao do carregamento da pgina. Valor: numrico. Delimita o nmero de caracteres que podem ser inseridos pelo usurio. Valor: expresso regular. Permite ao desenvolvedor validar a entrada de dados neste controle com base em uma expresso regular que defina o formato desejado de dado. Valor: texto. Define um texto para ocupar o valor de um controle de entrada de texto, enquanto ele estiver vazio, com o intuito de oferecer ao usurio uma orientao quanto ao valor ou tipo de dado esperado.

autofocus

maxlength

pattern

placeholder

Drag and Drop API O HTML5 no se trata apenas de marcao, mas tambm de um conjunto de novas funcionalidades encapsuladas em APIs que podem ser acessadas via JavaScript. A API que oferece o recurso de arrastar e soltar elementos dentro da pgina foi incorporada ao projeto para permitir que os colaboradores fossem colocados em grupos de maneira mais intuitiva, uma vez que ela se assemelha ao que fazemos quando separamos elementos relativos entre si em situaes no mundo real. Para a implementao da API, so necessrias duas caractersticas bsicas no documento: Que os objetos que podero ser agarrados para serem deixados sobre outros elementos contenham o atributo draggable com o valor true. Que os eventos principais que representam as aes durante o processo de Drag and Drop sejam manipulados nos elementos participantes da ao. Tais eventos se dividem em: Eventos que acontecem no elemento que est sendo arrastado: dragstart O objeto comeou a ser arrastado. Houve um clique do mouse, mas o usurio no soltou o boto antes de comear a mover o mouse, por exemplo. drag dragend O objeto est sendo arrastado. A ao de arrastar terminou, o usurio soltou o boto do mouse em qualquer posio da pgina.

O objeto sobre o qual outro arrastado sofre os seguintes eventos: dragenter O objeto sendo arrastado entrou (est sobre) no objeto atual. dragleave O objeto sendo arrastado deixou o objeto atual. dragover drop O objeto sendo arrastado se move sobre o objeto atual. O objeto sendo arrastado foi solto sobre o objeto atual.

O Cdigo fonte 5, mostra um exemplo de implementao dos eventos que compe a API Drag and Drop.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

$(".colaboradorBox").bind('dragstart', function(event){ /* Dentro do objeto eventtemos o objeto 'dataTransfer' que usado pela API do Drag'Drop para guardar dados durante a interao.Separamos esse objeto em 'data' */ var data = event.originalEvent.dataTransfer; /* Guarda na variavel 'src' o ID do objeto que disparou o evento */ var src = $(this).attr("id"); /* Armazena na variavel 'data' o valor de 'src' com a chave id_pessoa */ data.setData("id_pessoa", src); }); $(".grupo").bind('drop', function(event){ /* Cancela a ao padro do evento ondrop porque ela pode variar de acordo com o browser e o elemento associado */ event.preventDefault(); //Pega o objeto 'dataTransfer' que contem os dados var data = event.originalEvent.dataTransfer; /* Coloca na variavel 'src' o valor passado no objeto com a chave id_pessoa */ var src = data.getData("id_pessoa"); //Muda o CSS para remover o destaque do elemento $(this).removeClass('grupoDragOver'); /* Remove o elemento que iniciou o drag do DOM, para que o colaborador no aparea na lista */ $("#"+src).remove(); /* Fazer a requisio ao banco de dados no servidor e passar via AJAX os ids do grupo e colaborador */ });

50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77

/* Cancela a ao padro do evento 'dragentger' para que ela permita o drop */ $(".grupo").bind('dragenter', function(event) { event.preventDefault(); return false; }); /* Cacela a ao padro do evento 'dragover' para que ele no mude a operao, o que seu comportamento padro */ $(".grupo").bind('dragover', function(event) { event.preventDefault(); /*Adiciona a classe CSS que faz o destaque do elemento. */ $(this).addClass('grupoDragOver'); return false; }); //Muda o CSS para remover o destaque do elemento $(".grupo").bind('dragleave', function(event) { $(this).removeClass('grupoDragOver'); return false; });

Cdigo fonte 5: Eventos da API Drag and Drop. Fonte: Acervo Pessoal.

importante observar que alguns eventos do processo de Drag and Drop possuem aes padro, que caso executadas podem impedir o funcionamento da ao ou trat-la de forma diferente por cada navegador. Os eventos dragenter e dragover so eventos que merecem essa ateno e devem ter suas aes padro canceladas, utilizando uma funo com retorno falso (return false) ou usando o mtodo preventDefault() do evento via JQuery. A API oferece ao desenvolvedor um objeto de transferncia de dados durante a operao de Drag and Drop, para que os dados dos objetos envolvidos e seus contedos possam ser transferidos de um elemento a outro, o objeto DataTransfer.

CSS 3 Existem recursos novos tambm na nova verso do CSS3, porm a compatibilidade da maioria desses novos recursos ainda escassa ou inconsistente entre os navegadores disponveis, alm disso, alguns recursos no possuem aplicabilidade no contexto desenvolvido, portanto pouco se pode experimentar neste projeto. Existem tambm casos de novos recursos que, por falta de um consenso ou especificao, esto sendo largamente usados, mas necessitam do uso de prefixos especficos para cada navegador/motor (-webkit, -moz, -ms, etc). Como o objetivo do projeto usar elementos que j possuam um grau de compatibilidade e maturidade alto o suficiente para ser usado fora do ambiente experimental, tais recursos no foram usados, o que acaba melhorando a qualidade geral do projeto, pois demanda menos manuteno especfica para cada navegador. Foram usados os seguintes recursos: Formatao de textos: text-overflow Permite controlar a renderizao do texto dentro de um elemento caso o texto transborde para fora de um elemento que no permite a alterao de tamanho para comport-lo. possvel definir trs possibilidades para o texto que passa dos limites: text-overflow: clip limite. text-overflow: ellipsis text-overflow: texto substituir as reticncias. word-wrap Permite que palavras tambm sejam quebradas para se ajustarem ao elemento que contm o texto. Adiciona reticncias ao final do texto cortado, indicando que ele continua. - Similar ao anterior, mas tem a flexibilidade de permitir ao autor definir um texto que ir - Corta o texto no seu

Como resultado, possvel trabalhar com textos com comprimentos indefinidos de maneira mais elegante, como mostra a Figura 3:

Figura 3: Exemplo de uso da propriedade text-overflow, com reticncias. Fonte: Acervo pessoal.

Seletores de atributos: Com seletores que oferecem um grau de especificidade mais avanado, foi possvel controlar com mais preciso e menos improvisaes casos especficos de formatao, como a diferenciao do sexo dos colaboradores, usando cores para representar masculino e feminino. input[value=masculino] { background-color:#E7EFFB; }

RESUTADOS
Foi possvel observar os resultados do projeto por duas perspectivas diferentes, a perspectiva do desenvolvedor e a dos usurios do sistema. Para o desenvolvedor, pde-se observar que a utilizao dos novos recursos das tecnologias implementadas trouxe como maior benefcio a reduo de utilizao de ferramentas de terceiros (plugins). Conseqentemente, com a utilizao de recursos nativos aos motores de renderizao, existe um ganho de compatibilidade entre os navegadores disponveis, que no apresentaram quaisquer divergncias na renderizao e funcionamento dos elementos. Outro fator importante o nmero de requisies ao servidor que, ao abandonar o uso de recursos externos, cai imediatamente, por dispensar a solicitao dos arquivos de JavaScript ou CSS que compe tais recursos, o que acaba diminuindo tambm o tamanho do download para o usurio. Alm disso, a qualidade geral do cdigo aumentou, pois a estrutura geral da pgina se apresenta mais consistente, com elementos que agregam sentido ao contedo, reduzindo o uso de elementos genricos antes usados somente para estruturao visual. Em relao ao processo de desenvolvimento, houve um aumento do tempo geral de produo do projeto, justificado pela necessidade constante de consulta documentao, seleo de elementos e recursos de acordo com o nvel de maturidade da especificao e compatibilidade, realizao de testes de renderizao e comportamento de cada elemento e integrao dos recursos no projeto. Todavia, ao se considerar somente o perodo de anlise do sistema e codificao, ouve uma diminuio do tempo de desenvolvimento e aumento da reusabilidade das estruturas. Para os usurios, alguns dos novos recursos so invisveis, porm outros, como a possibilidade de arrastar elementos (Drag and Drop) e novos controles de formulrio puderam ser percebidos imediatamente. A possibilidade de adicionar um texto explicativo em campos de formulrio em branco (placeholder) diminuiu o nvel de incerteza dos usurios quanto ao dado esperado e reduziu drasticamente o nmero de ligaes ao desenvolvedor com o objetivo de consultar como realizar o preenchimento do formulrio. Ainda em relao aos formulrios, a entrada de dados de maneira incorreta diminuiu. Os campos de entrada de data e numricos foram deixados sem validao server side, com o intuito de observar como seria feito o preenchimento desses valores usando a facilidade que o campo do tipo data oferece (calendrio para escolha da data) e os recursos de validao nativos. Observou-se que, como

os usurios usaram o navegador apropriado, que dispe do recurso de calendrio, no houve preenchimento incorreto do campo de data e nem a entrada de textos em campos numricos. Campos com formatos especficos, como CPF, que foram validados com expresses regulares e campos de preenchimento obrigatrio tambm foram preenchidos adequadamente. Comparando o mtodo de agrupamento dos colaboradores, realizado no sistema anterior, por meio de listas de nomes, funes e locais, agrupados dentro de caixas de texto, com a nova abordagem, utilizando Drag and Drop, os usurios relataram um enorme ganho de produo, pois eles puderam organizar os colaboradores na metade do tempo esperado, devido diminuio drstica da realizao de atividade repetitiva. O novo recurso praticamente eliminou a necessidade de treinamento dos usurios para a realizao da tarefa. Houve a necessidade da adequao da infra estrutura dos usurios para utilizao do sistema, o que atrasou os testes em um dia, necessrio para a equipe de manuteno instalar e atualizar os navegadores.

DISCUSSO
Ao observar os resultados apresentados, os benefcios do uso de novos recursos que foram desenvolvidos para suprir necessidades a muito tempo contornadas pelos desenvolvedores por meio de plugins e improvisaes, novas perspectivas de acessibilidade, tanto motora quanto tecnolgica, simplicidade e robustez do resultado final, fcil se deixar seduzir pela nova tecnologia, porm necessrio que a abordagem seja feita com muito estudo e cautela. Como foi possvel observar, existe uma grande gama de elementos e tecnologias nas novas verses do HTML e CSS, que esto em um estgio avanado de maturidade, sendo amplamente utilizados, no s em ambientes controlados, mas tambm na rede aberta, onde o risco de ter usurios sem a devida infra-estrutura enorme. Porm, mesmo tais elementos devem ser usados com certo controle, pois fazem parte de um sistema em desenvolvimento, passvel de mudanas a qualquer momento. Nesse contexto, mais do que nunca, de extrema importncia que os usurios sejam estudados durante o processo de concepo do projeto, para que o analista possa conhecer a sua base de usurios, e saber tomar as decises certas a fim de permitir a todos a acessibilidade ao contedo. Ao apostar, por exemplo, no uso da API Drag and Drop, a fim de permitir aos usurios aes mais naturais, papel do analista preparar o projeto para os usurios que no tero condio tcnica de acessar tal contedo, e atravs do uso de ferramentas de deteco (como o plugin Modernizr), apresentar ao usurio formas alternativas de contedo, e no simplesmente uma mensagem Atualize o seu navegador. Conhecer os custos dessa mudana, a viabilidade e disponibilidade dos recursos para permitir aos usurios tais possibilidades devem ser os pilares de um projeto que usa recursos novos. Para os usurios, foi possvel observar que as novas possibilidades, que antes seriam muito custosas, demandando um maior trabalho de implementao, testes e correo de defeitos, e que por isso costumam ficar de fora dos projetos, trouxeram benefcios imediatos. O maior exemplo disso o ganho de produo tido com a utilizao da API Drag and Drop, pois permitiu aos usurios realizar uma tarefa antes complexa, de maneira natural e intuitiva. O ser humano aprende a pegar coisas e agrup-las na infncia, uma ao natural e intuitiva, baseado nisso, foi possvel dispensar qualquer tipo de treinamento para o usurio, bastando mostrar que os colaboradores (representados por retngulos com suas fotos e dados pessoais) poderiam ser arrastados para os blocos que representam as possveis funes que ele pode assumir, para que o usurio j compreenda a mecnica da ferramenta.

CONCLUSO
O estudo demonstra que possvel fazer o uso de muitos dos novos recursos das tecnologias hoje, pois muitas delas apresentam um nvel de maturidade elevado, o que garante ao desenvolvedor a consistncia do sistema. Como qualquer mudana, ela deve ser feita baseada em planejamento e estudo, adaptada ao ambiente em que estar inserida e preparada para lidar com imprevistos. Nesse ambiente se observa o conceito de Progressive Enhancement, onde o uso de tecnologias web em camadas que permitem que todos os usurios, independente de browser e velocidade de conexo, tenham acesso as funcionalidades bsicas e contedo de uma pgina. E quanto mais avanado for o browser do usurio e sua conexo, mais rica ser sua experincia. Oferecer tais benefcios aos usurios vai alm de facilitar a experincia ou o desenvolvimento da ferramenta, mas representa o rompimento de uma barreira, impulsiona a indstria a evoluir. A base de usurios um elemento muito importante no ambiente de sistemas de internet, e evoluir essa base tambm se mostra ser um papel da comunidade. valido observar que nesse momento, existem caractersticas que podem ser traioeiras, por isso necessrio que a abordagem seja feita com cautela. Vrios navegadores oferecem aos desenvolvedores recursos proprietrios, como o uso de prefixos especficos para cada navegador para propriedades CSS, o que remete ao passado, quando a guerra dos navegadores (aproximadamente entre 1995 e 1999), forava os desenvolvedores a criarem sistemas destinados a clientes especficos. Tais caractersticas devem ser evitadas, pois necessrio manter a maior caracterstica da internet: o acesso livre ao contedo, sem qualquer dependncia tecnolgica ou fsica.

REFERNCIAS BIBLIOGRFICAS
KALBACH, J. Design de navegao Web, Otimizando A Experiencia Do Usuario. Porto Alegre : Bookman, 2009. SILVA, M. S. Construindo sites com CSS e (X) HTML : Sites controlados por folhas de estilo em cascata. So Paulo : Novatec, 2008. SILVA, M. S. HTML5 - A linguagem de marcao que revolucionou a web. So Paulo : Novatec Editora, 2011. Eis, D.; Ferreira, E. HTML5 e CSS3 com farinha e pimenta. So Paulo: Lulu.com, 2012. WORLD WIDE WEB CONSORTIUM. W3C HTML5 Working Draft. Disponvel em: < http://www.w3.org/TR/html5/ >. Acesso em 21/11/2012. WORLD WIDE WEB CONSORTIUM. Cascading Style Sheets Home Page. Disponvel em: <http://www.w3.org/Style/CSS/Overview.en.html >. Acesso em 21/11/2012. HTML5 DOCTOR. Helping you implement HTML5 today. Disponvel em: < http://html5doctor.com/ >. Acesso em 21/11/2012. ATES, F. Modernizr, Front-end development done right. Disponvel em: < http://modernizr.com/docs/>. Acesso em 21/11/2012. SIGHTS. The HTML5 test. How well does your browser support HTML5?. Disponvel em: < http://html5test.com/ >. Acesso em 21/11/2012. GOOGLE. HTML5 Rocks. Disponvel em: < http://www.html5rocks.com/en/ >. Acesso em 21/11/2012.