Tecnologias de interface de usuário para WEB

Gabriela Pellegrini Morasco, Jonathan da Silva e Matheus Nani

Interface

A interface web para usuário, e não apenas para a web, é um item importante em qualquer projeto bem elaborado, tendo em vista que quem irá utilizar o seu sistema terá que se sentir à vontade para navegar entre as páginas e de forma rápida encontrar o que deseja.

O objetivo desse trabalho é explicar o que é uma interface e quais tecnologias atualmente estão sendo utilizadas para criá-las.

Afinal o que é uma interface?

É um conjunto de características que facilita a comunicação entre humanos e máquinas, na qual podem manusear certos dispositivos ou quase todos sem ter um nível alto de conhecimento sobre eles. A tecnologia de interfaces deve ser utilizada sempre que se deseje que o usuário tenha uma abstração maior, onde ele só deve saber o mínimo possível para realizar determinada tarefa, com rapidez, segurança e eficiência, e que ele se lembre de como foi feito sem muito esforço.

Vamos abordar aqui algumas tecnologias utilizadas na criação de interfaces amigáveis tais como: JQUERY /JQUERYUI, HTML/HTML5 e CSS.

  

JQUERY (Write less do More).

É uma biblioteca Javascript criada em 2006 por John Resing, um framework que fornece funções e códigos já prontos, habituais para a maioria dos programadores, facilitando o processo de desenvolvimento e permitindo que se realize uma programação mais rápida e livre de erros. Uma das vantagens é que ela é uma ferramenta gratuita e muito utilizada por sua facilidade de implementação. O framework JQUERY também se unificou ao HTML5 e pode ser utilizado em aplicações mobile http://jquerymobile.com/, que tem como objetivo fazer aplicativos e websites acessíveis por smartphones, tablets e dispositivos desktop.

Vantagens, por que utilizar JQUERY?

Qual a sua vantagem em relação aos outros? É importante mencionar que ele não é o único framework que realiza esse trabalho. Como é normal todo produto ou todo framework tem as suas vantagens e desvantagens, mas, falando em JQUERY, ele é um produto com uma aceitação na comunidade de desenvolvimento muito boa e uma penetração de mercado muito grande, o que o torna uma excelente opção. Outra vantagem de se utilizar Jquery é sua comunidade ativa, com boa documentação de como configurar e aplicar qualquer tipo de interação. http://api.jquery.com/, existem também diversos artigos e tutoriais na web http://learn.jquery.com/.

JQUERY UI (User Interface)

Jquery UI é uma biblioteca que foi criada em 2007 por John Resing. Esta biblioteca utiliza recursos disponíveis na Jquery para abstrair códigos que tomam tempo, como a criação de animações, efeitos avançados e temas customizados. Na biblioteca Jquery UI tudo isso está pronto, basta configurar sua aplicação. Existem também vários plug-ins que ajudam na implementação de validações e máscaras http://plugins.jquery.com/.

Uma coisa que chama atenção ao utilizar essa plataforma é a redução drástica de código. Segue um exemplo básico de como pegar um elemento DOM através do ID.

Javascript tradicional:

• document.getElementById("ID");

Com Jquery:

• $("#ID");

Jquery trabalha com uma linguagem própria e bem reduzida.

Compatibilidade

Jquery/JqueryUI atualmente com compatíveis com diversos navegadores:

• Internet Explorer

• Chrome

• Firefox

• Safari

• Opera

As incompatibilidades podem ocorrer quando o usuário utilizar um navegador desatualizado ou que não execute Javascript. A jquery não é testada ativamente em navegadores de versões antigas e normalmente os bugs não são corrigidos nestas versões.

Como usar?

Primeiramente, para utilizar a biblioteca Jquery, você deve baixá-la no site http://jquery.com/. Caso você queira baixar uma biblioteca gráfica JQUERYUI, neste mesmo site existe uma opção de customizar seu tema e baixá-lo http://jqueryui.com/themeroller/. Feito isso é só adicionar o arquivo JQUERY a seu projeto.

Segurança

Jquery é JavaScript puro com isso torna as mesmas "fraquezas" iguais. O Jquery executa do lado do cliente, e por isso muitos programadores maliciosos criam scripts para rodar em um cliente da web. Os navegadores são criados para tentar evitar esse tipo de ataque de duas maneiras: os scripts só podem executar ações relacionadas à internet, e não podem criar arquivos; Scripts só podem acessar cookies e informações enviadas de outros sites.

  

Adobe Flex

Antes chamada de Macromedia Flex e depois rebatizado como Adobe Flex pela Adobe, lançada em março de 2004 pela Macromedia que suporta o desenvolvimento de aplicações ricas para a internet.

Ajuda no desenvolvimento de aplicações feitas em flash e oferece ao usuário uma experiência muito mais robusta, proporcionando ao usuario facilidade e interatividade em tempo real.

Adoble Flex é um framework multi-plataforma para desenvolvimento de aplicações RIA ou Aplicações Ricas para internet uma aplicação web com caracteristicas e funcionalidades de uma aplicação desktop, e que transfere parte do precessamento para o navegador do usuario, porem mantem o precesso mais pesado no servidor da aplicação.

Flex é uma estrutura de código aberto altamente produtiva para a criação de aplicações web, Que pode executar RIAS nos navegadores usando Flash Player, maquinas virtuais ou no Desktop utilizando Adobe AIR.

Vantagens

• Fácil acesso a serviços externos(webServices)

• Linguagem Orientada a Objetos.

• Integração com diversas linguagens cliente-servidor;

• Vasta documentação

• Design amigavel e de simples utilização;

• Plugins gratuidos.

Desvantagens

• Suporte apenas para ActionScript;

Linguagens utilizadas

MXML – linguagem de marcação baseada no XML

ActionScript – Linguagem de programação orientada à objetos

Desconhecida pela maioria dos programadores

Ferramentas de geração de ralatorios/gráficos são pagas

Limitação de programação (falta suporte para VB, C++ e Python)

HTML

Em termos simples, o HTML usa tags para estruturar as informações de um site. O HTML5, por sua vez, é uma tentativa de padronizar a maneira como os navegadores interpretam as informações recebidas – cada um as interpreta de maneira distinta, o que pode resultar em distorções na visualização.

HTML5

Em resumo, para os desenvolvedores, o HTML5 deixa algumas tarefas mais simples e oferece outras maneiras de fazer as mesmas coisas. Já para os usuários, a mudança será percebida, principalmente, ao usar celulares – ou outros portáteis – para acessar a internet. Isso porque não haveria a necessidade de instalar plugins (algo nem sempre possível nos navegadores para celular) para visualizar aquilo feito com HTML5.

Há cerca de um ano, durante o Mobile World Congress, em Barcelona, 30 empresas se uniram num grupo de trabalho para impulsionar o uso do HTML5 em smartphones e tablets. Fazem parte deste grupo, conhecido como COREMOB (de Core Mobile Web Platform CommunityGroup), nomes como Facebook, Samsung, Microsoft, Nokia, Sony, AT&T, Telefônica e Intel. Ele é parte do W3C, a organização que define os padrões oficiais da internet.

O COREMOB é apenas uma das iniciativas que devem acelerar a adoção dessa tecnologia, tanto na internet como em aparelhos como smartphones, tablets, televisores inteligentes, PCs e até automóveis.

Veja sete razões por que esse conjunto de padrões para a criação de aplicativos e sites tende a se tornar onipresente nos próximos anos.

1. Apps universais - O HTML5 permite criar aplicativos quase universais, capazes de rodar numa variedade grande variedade de dispositivos, como smartphones, tablets, PCs, televisores, etc.
2. O melhor de dois mundos - Aplicativos em HTML5 têm as vantagens de serviços na internet, como o acesso em qualquer aparelho conectado. Mas têm, também, características dos programas nativos, feitos para equipamentos específicos. Podem exibir vídeo, música e animações, além de interagir com o usuário. E podem armazenar dados no próprio aparelho, para que fiquem disponíveis mesmo quando não há acesso à internet.
3. Browsers - O HTML5 vem sendo desenvolvido desde 2004, quando a Mozilla e a Opera Software apresentaram uma primeira proposta para esse padrão, e já foi implementado nos principais browsers.
4. Smartphones - em 2011, havia 336 milhões de dispositivos móveis com suporte a HTML5 no mundo. Em 2013, o número deve passar de 1 bilhão. E a tendência é que ele seja adotado inclusive em aparelhos mais baratos.
5. Grandes empresas - Muitas companhias importantes participam do grupo de trabalho que define o HTML5 no World Wide Web Consortium (W3C). A lista inclui fabricantes como Samsung, LG e Apple.
6. Facebook - O Facebook vem estimulando o uso do HTML5 para desenvolvimento de aplicativos e jogos na rede social. Assim, os apps se tornam compatíveis com múltiplas plataformas.
7. Casos de sucesso - A criação de aplicativos para tablets e smartphones em HTML5 tem trazido bons resultados para algumas empresas. Um exemplo é o jornal londrino Financial Times, que oferece um app desse tipo para o iPad. Foi a maneira encontrada por ele para vender seu conteúdo diretamente ao usuário, sem passar pela AppStore, da Apple.

  

Cascading Style Sheets (CSS)

CSS é uma linguagem de estilo, que descreve o modo de como os documentos são apresentados, seu principal objetivo e separa o formato e o conteúdo de um documento. Nele coloca-se a formatação separada do conteúdo e cria-se um link (ligação) entre a página de estilo, ou seja, para alterar a formatação de todas as páginas basta alterar a página de CSS.

Uma folha de estilo consiste uma lista de regras. Cada regra ou conjunto de regras consiste de um ou mais seletores.

Seletores são usados para detalhar quais elementos de marcação um estilo se aplica.

Navegadores Compatíveis

2008-11-25 A Google disponibilizou navegador web Chrome.

2008-07-01 A Apple lançou a versão 3 do navegador web Safari. Este é baseado na biblioteca de HTML/CSS de código aberto «WebKit» (por sua vez, derivada de KHTML). (Mac OS X, Windows, iPhone; gratuito)

2006-11-24 A Microsoft lançou a versão 7 do navegador web Internet Explorer, com suporte de CSS 2, PNG transparente e muito mais. (Windows; gratuito)

2001-11-07 A Adobe concebeu um plugin SVG para navegadores em Mac e Windows e para o Mozilla 0.9.1 em Linux e Solaris. Suporta SVG com estilização em CSS

  

Especificações

As CSS apresentam vários níveis, os navegadores representam 1,2 e 3, os outros são PDA, telemóvel, televisor, impressora, sintetizador de voz, etc.

O CSS nível 3 encontra-se em desenvolvimento. Inclui todo o nível 2 e acrescenta novos seletores, limites e fundos aperfeiçoados, texto vertical, interação com o utilizador, voz e muito mais.

O CSS nível 2 revisão 1 («CSS 2.1») contém todo o CSS nível 1 e acrescenta elementos completamente posicionados, numeração automática, quebras de página e texto da direita para a esquerda, entre outros.

O CSS nível 1 (1996, 1999) contém propriedades para tipos de letra, margens, cores, etc. de que praticamente todos os perfis de CSS necessitam. O CSS Mobile Profile 1.0 destina-se a dispositivos como telemóveis e PDA.

O CSS Print Profile é ainda um projecto. Destina-se a impressoras económicas.

O CSS TV Profile 1.0 destina-se a navegadores que funcionam em televisores.

Outras especificações relativas a CSS:

A SVG contém as propriedades de CSS para a estilização de gráficos vectoriais. Accessibility Features of CSS é uma Nota sobre o modo como as CSS podem tornar os documentos mais acessíveis. Traduções de CSS nível 1 e traduções de CSS nível 2.

Nossos slides:

http://www.slideshare.net/slideshow/embed_code/17161195
     
Leia mais em:

• http://www.webstyles-portuguese.info/Style/CSS/
• http://www.webstyles-portuguese.info/track.php?l=www.w3.org/Style/LieBos3e/
• http://www.criarweb.com/manual-jquery/
• http://jqueryui.com/
• http://jquerymobile.com/
• http://help.adobe.com/pt_BR/as3/dev/WS5b3ccc516d4fbf351e63e3d118666ade46-7f0e.html
• https://developer.mozilla.org/pt-PT/docs/JavaScript
• http://jqueryui.com/themeroller/
• http://jqueryui.wordpress.com/
• http://www.w3schools.com/jquery/default.asp
• http://info.abril.com.br/noticias/carreira/7-razoes-pelas-quais-o-html-5-se-tornara-onipresente-06032012-25.shl
• http://www.tecmundo.com.br/flash/4587-quais-as-vantagens-do-html5-para-o-usuario-comum-.htm#ixzz2MkbuWicl