Grupo B - Sistemas com suporte pleno, exceto às funcionalidades AJAX para navegação.

Transcrição

1 jquery mobile I- Definição: jquery mobile é um framework para desenvolvimento web, explorando a interatividade através de toque, destinado à criação de aplicações para smartphones e tablets e visando fornecer mecanismos adequados para criar sistemas unificados de interface de usuário. É baseado em HTML5 e CSS3 com as funcionalidades para todas as plataformas móveis através das bibliotecas jquery e jquery UI, disponibilizando um rico conjunto de controles e widgets (toggles, abas, sliders, etc). O foco principal do framework consiste em fazer mais escrevendo menos, princípio de desenvolvimento da biblioteca jquery, criando aplicações únicas para todos os dispositivos móveis e sistemas operacionais. II- Suporte: Considerando que esta ferramenta oferece o desenvolvimento de aplicações suportadas pela maioria dos navegadores atuais desktop e das plataformas para smartphones e tablets, os navegadores antigos e dispositivos com limitações também são capazes de suportar tais aplicações atravéz da renderização. O grupo de desenvolvimento do framework classificou os diversos dispositivos móveis de usuários em 3 grupos: A, B e C: Grupo A - Sistemas com suporte pleno às funcionalidades criadas pelo framework, entre elas, animação de páginas baseadas em AJAX. Grupo B - Sistemas com suporte pleno, exceto às funcionalidades AJAX para navegação. Grupo C - Sistemas com suporte para funcionalidades básicas, conteúdo funcional, mas sem incrementos HTML. Ferramentas para Webdesign Prof. Ricardo v Unidade 01-1

2 Tabela com os dispositivos avaliados nos laboratórios do grupo de criação o framework: Grupo A Suporte Pleno, com animação de páginas baseada em AJAX Plataforma Dispositivos Avaliados Apple ios beta ipad (3.2/4.3), ipad 2 (4.3), iphone (3.1), iphone 3 (3.2), 3GS (4.3) e 4 (4.3/5.0 beta) Android HTC Incredible (2.2), Droid (2.2), Nook Color (2.2), HTC Aria (2.1), Google Nexus S (2.3). Funcionais em 1.5 & 1.6, mas com performance lenta. Testado no Google G1 (1.5) Android Honeycomb Sansung Galaxy Tab 10.1 Windows Phone 7 HTC 7 Surround Blackberry 6.0 Torch 9800 e Style 9670 Blackberry 7 Blackberry Torch 9810 Blackberry Playbook PlayBook versões 1.0.1/1.0.5 Palm WebOS ( ) Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0) Palm WebOS 3.0 HP TouchPad Firebox Mobile (Beta) Android 2.2 Opera Mobile 11.0 iphone 3GS e 4 (5.0/6.0), Android 2.2 (5.0/6.0), Windows Mobile 6.5 (5.0) Meego 1.2 Nokia 950 Kindle 3 Built-in WebKit browser incluído no dispositivo Kindle 3 Chrome Desktop OS X e Windows 7 Firefox Desktop OS X e Windows 7 Internet Explorer 7-9 Windows XP, Vista e (pequenas inconsistências CSS) Opera Destop OS X e Windows 7 Grupo B Suporte Pleno, exceto as funcionalidades em AJAX Plataforma Dispositivos Avaliados Blackberry The Storm , Bold 9770 Opera Mini ( ) Testado no ios 3.2/4.3 Nokia Symbian^3 Nokia N8 (Symbian^3), C7 (Symbian^3), e também funciona no N97 (Symbian^1) Grupo C Suporte Básico, sem incrementos HTML, conteúdo funcional Plataforma Dispositivos Avaliados Blackberry 4.x Curve 8330 Windows Mobile Testado no HTC Leo (WinMo 5.2) Todas as plataformas Todos os dispositivos sem suporte para media queries foram enquadrados neste grupo antigas para smartphone e featurephones Ferramentas para Webdesign Prof. Ricardo v Unidade 01-2

3 III- Histórico: Agosto 2010 John Resig criador da biblioteca jquery, juntamente com uma equipe de colaboradores, desenvolveu um framework baseado nas bibliotecas jquery e jquery UI focados nos dispositivos móveis e com apoio inicial da Palm Inc., Mozilla, Blackberry, DeviceAtlas, Nokia, Adobe e o grupo Filament. Desde o início, segundo Resig, o desenvolvimento do framework teve como objetivo a criação de uma interface unificada, servindo os navegadores mais utilizados para smartphones e uma programação JavaScript de alto nível. Outubro 2010 Resig anunciou o lançamento da primeira versão alpha do framework jquery Mobile 1.0 Alfa 1 jqm 1.0a1, com as seguintes funcionalidades: Tema e Layout Topo e Rodapé (fixos e persistentes) Controles de formulário Caixas de diálogo Listagens Eventos Transições Novembro 2010 Segunda versão: jquery Mobile 1.0 Alfa 2 jqm 1.0a2: Correção dos bugs e extensão da versão anterior nas funcionalidades: Eventos API e Métodos Manipulação de formulários com AJAX Manipulação de URL e transições Configuração global e Layout Fevereiro 2011 Surge o jquery Mobile 1.0 Alfa 3 jqm 1.0a3 Extensão da versão anterior com as seguintes adequações: Estudou e soluçionou aproximadamente 480 sugestões. Correção de aproximadamente 150 bugs. 240 unidades de teste foram criadas e praticamente todas passaram na maioria dos navegadores. O core do framework e os plugins de navegação foram refatorados e aperfeiçoados em vários aspectos, como também os mecanismos de consistência às APIs dos plugins. Aumento do suporte a navegadores do Grupo A e para a maioria dos navegadores modernos em suas versões para desktop. Incorporação da funcionalidade datepicker da jquery UI, otimizando a interação por toque (fora do escopo do projeto inicial). Ferramentas para Webdesign Prof. Ricardo v Unidade 01-3

4 Inclusão de funções de teclado e suporte geral para acessibilidade no VoiceOver. Suporte quase total no Grupo A para Windows Phone 7 e Nokia. Grandes aperfeiçoamentos e otimizações em várias áreas. Março 2011 Todd Parker lançou a quarta e última versão alpha do framework jquery Mobile 1.0 Alpha 4 jqm 1.0a4, corrigindo bugs, extendendo a versão anterior e principalmente desenvolvendo suporte e mecanismos evitando colisões com funcionalidades do HTML5 e de outros frameworks e também a implementação de funcionalidades que tornaram nativos os menus de seleção. Abril 2011 Manutenção da versão alpha anterior, jquery Mobile 1.0 Alpha 4.1 jqm 1.0a4.1. Junho 2011 Primenira versão beta do Framework jquery Mobile 1.0 Beta 1 jqm 1.0b1, onde além de uma série de melhorias no framework, a grande novidade foi o suporte ao Blackberry 5 e ao Opera Mini. Agosto 2011 Segunda versão beta jquery Mobile 1.0 Beta 2 jqm 1.0b2 Destacando suporte para a série 60 dos smartphones da Nokia, além de uma série de melhorias no Framework. Setembro 2011 Primeira versão RC jquery Mobile 1.0 RC1 jqm RC1 Suporte para a plataforma Meego, correções de bugs, refinamentos e otimizações do Framework. Outubro 2011 jquery Mobile 1.0 RC2 jqm RC2 Expansão do suporte para controle do tipo date, time e color, refinamentos e otimizações do Framework. Novembro 2011 jquery Mobile 1.0 RC3 jqm RC3 - Melhoria geral da performance do Framework. Novembro A implantação da versão final 1.0, o jquery Mobile 1.0 ou jqm 1.0 usando exclusivamente a biblioteca jquery O suporte para a versão 1.7 da biblioteca jquery está associado com a versão 1.1 do framework. IV- Visão Geral: Os princípios de desenvolvimento com o uso do framework jquery Mobile apresentam as configurações necessárias à criação de um ambiente de desenvolvimento compatível e capaz de ser manipulado pelas funcionalidades do framework e também pelos princípios e premissas de funcionamento, através do desenvolvimento de códigos simples para a criação de páginas que podem ser visualizadas no site ou em dispositivos móveis. O framework foi desenvolvido e otimizado para o uso com marcação HTML5, CSS3 e as bibliotecas jquery e jquery UI. Ferramentas para Webdesign Prof. Ricardo v Unidade 01-4

5 V- Instalação: Para o desenvolvimento do framework (jquery Mobile) não é necessária a instalação de componentes, plug-ins, aplicativos ou recursos adicionais. Primeiro definir o código de marcação HTML do documento. Um link apontando para uma folha de estilos padrão do framework. Outro link para a biblioteca jquery. Um terceiro link o arquivo framework jquery Mobile. Dessa forma, teremos a seguinte sintaxe: <link rel= stylesheet href= /> <script src= ></script> <script src= ></script> IMPORTANTE: A ordem dos links deve ser definida exatamente como foi apresentada. NÃO DEVE SER ALTERADA! 1- Declaração da folha de estilos 2- Definição da biblioteca jquery 3- Definição do framework jquery Mobile Através disso, é possível obter condições e aproveitar as funcionalidades, a simplicidade do desenvolvimento do código para todos os dispositivos móveis existentes no mercado, sem a preocupação com modelos, marcas, plataformas ou sistemas operacionais. Os 3 arquivos definidos na estrutura anterior, estão disponíveis para download para hospedagem em um servidor e direcionar os links para o endereço de hospedagem. Os criadores do framework, recomendam que a melhor opção é direcionar os links para o endereço de hospedagem dos arquivos em um CDN (Content Distribution Network Rede de Distribuição de Conteúdos), mas será o o desenvolvedor que irá definir a opção entre a hospedagem própria ou o acesso através do CDN. CDN é um sistema de computadores, com cópias de um arquivo de dados definidos estrategicamente em diferentes nós (pontos) de uma rede. Um CDN bem planejado e implementado, apresenta inúmeras vantagens sobre o armazenamento em um servidor próprio, entre elas, destacamos: Ferramentas para Webdesign Prof. Ricardo v Unidade 01-5

6 Melhoria sensível do acesso aos dados em cachê e a redução do consumo de banda. Incremento do paralelismo, isto é, a capacidade de oferecer acesso simultâneo. Redução da latência servindo os dados de um servidor mais próximo do usuário. Para os usuários, o público em geral, os dados mais comuns em cachê nos CDNs são os objetos web e os objetos para download, como por exemplo, arquivos de mídia, softwares e documentos, aplicações, streaming de mídia e resultados de consultas a banco de dados. Os arquivos jquery estão hospedados em 3 CDNs diferentes: - Google Libraries API: Microsoft Ajax Content Delivery Network: jquery CDN: Lembramos mais uma vez que é o desenvolvedor quem definirá por CDN ou por hospedagem dos arquivos em servidor próprio. Para auxiliá-lo nessa escolha, comparando as vantagens e desvantagens de cada CDN e também conhecer melhor os detalhes para a atribuição dos links direcionados para os arquivos, é possível ter acesso da documentação hospedada no Blog jquery CDN, através do endereço: e a documentação dos CDNs, através dos 3 endereços já mencionados anteriormente. Ferramentas para Webdesign Prof. Ricardo v Unidade 01-6

7 VI- Template mínimo: Para desenvolver uma página que possa ser interpretada pelos dispositivos móveis, basta definir no código a maneira e a estrutura corretas e linkar com os arquivos indicados anteriormente. <!DOCTYPE hmtl> <html lang= pt-br > <head> <meta charset= utf-8 /> <meta name="viewport" content="width=device-width, inicial-scale=1" /> <title>jquery Mobile</title> <link rel= stylesheet href= /> <script src= ></script> <script src= ></script> <head> <body> <! - - Marcação da página de acordo com as diretrizes do framework - -> </body> </html> Metatag viewport do dispositivo móvel Metatag fundamental para o funcionamento do código em dispositivos móveis. Ao navegador do dispositivo móvel, é informado a necessidade de renderização do código, através das dimensões da viewport do dispositivo, a definição do zoom. Definida pela Apple para o navegador Safari, atualmente é suportada pela maioria dos navegadores e sistemas operacionais dos dispositivos móveis. <meta name="viewport" content="width, height, user-scalable, inicial-scale, maximum-scale, minimum-scale" /> Nesta metatag, para definir as características da viewport do dispositivo móvel, aplicamos nomes/valores ao atributo content. Exemplos: <meta name="viewport" content="width=320px, height=480px, user-scalable=yes, inicial-scale=1, maximumscale=2, minimum-scale=0.5" /> <meta name="viewport" content="width=480px, height=640px, inicial-scale=1 /> Não é obrigatório constar todos os valores para o atributo. Ferramentas para Webdesign Prof. Ricardo v Unidade 01-7

8 Renderização - É o processo pelo qual pode-se obter o produto final de um processamento digital qualquer. Este processo aplica-se essencialmente em programas de modelagem 2D e 3D (3ds Max, Maya, CINEMA 4D, Blender, Adobe Photoshop, Gimp, Corel PhotoPaint, etc.), bem como áudio (CUBase, Ableton Live!, Logic Pro, etc) e vídeo. Quando a metatag viewport não é declarada, o dispositivo móvel interpreta a marcação como sendo para desktop. Neste caso, a visualização em um dispositivo móvel é idêntica a um desktop. A renderização da largura total do site será mostrada na largura da viewport. Sobre a ilegibilidade, envolve definições como resolução das telas de dispositivos móveis até o conceito de densidade de pixel. Navegadores de dispositivos móveis são projetados para resoluções que variam aproximadamente de 900px (800ps a 980px). Um site planejado para desktop com uma largura de 900px com renderização em um dispositivo móvel, teria que acomodar 900px em uma tela de 320px através de zoom diminuindo até se ajustar na disponibilidade da tela, o que causaria a ilegibilidade. Nos dispositivos móveis, a resolução de tela não é padronizada. Smarthphone e tablets apresentam uma resolução que vai de 240px a mais 1000px e também é possível selecionar tela, nas posições portrait e landscape. Tabela de valores para o atributos Características Descrição Valores width Indica a largura da viewport Número de pixels height Indica a altura da viewport Número de pixels user-scalable Indica a ativação ou não do zoom no e yes inicial-scale Valor inicial para o zoom no documento Número de pixels maximum-scale Valor máximo para o zoom no documento Número de pixels minimum-scale Valor mínimo para o zoom no documento Número de pixels VII- Principais características do framework jquery Mobile: Desenvolvimento baseado na biblioteca jquery e incorporando os mecanismos e as funcionalidades da jquery UI. A sintaxe proporciona aprendizado rápido e não exige programação sofisticada como acontece com a programação jquery. Compatível com a maioria dos dispositivos móveis, tablets e das plataformas desktop. Todos os navegadores modernos definidos nos 3 grupos A, B e C que oferecem suporte. Tamanho reduzido e dependência mínima de imagens permitem o carregamento rápido. Baseada na Arquitetura Modular, permite a seleção personalizada dos componentes, conforme as necessidades de cada aplicação. Ferramentas para Webdesign Prof. Ricardo v Unidade 01-8

9 HTML5, código de marcação integrado, possibilitando num desenvolvimento ágil e com pouca dependência de scripts. Uso de técnicas quer possibilitam o desenvolvimento de aplicações com todas as funcionalidades avançadas para dispositivos modernos sem o bloqueio de acesso aos dispositivos anteriores. Técnicas de desenvolvimento que permitem a definição de escala automaticamente para as aplicações de interfaces, atendendo smartphones e tablets e também dispositivos para desktop. Mecanismos de navegação com base em AJAX, criam animações para transições de páginas, não comprometendo a funcionalidade de botões de retrocesso, armazenamento de favoritos e o controle das URLs. Funcionalidades para acessibilidade com inclusão dos mecanismos da WAI-ARIA, assegurando correta leitura das páginas por leitores de tela (Ex: VoiceOver no ios) e outras tecnologias assistivas. Suporte para interação por toque, para eventos de mouse e de foco com uso de uma API simples. Conjunto padronizado de widgets otimizados para interface de usuário com interatividade por toque, estilizáveis, fáceis de usar, multiplataforma e capazes de substituir controles nativos. Framework para aplicação de temas, ThemeRoller, personalizável e fácil de usar. Uso de uma API própria, robusta e completa, possibilitando o fornecimento de funcionalidades para desenvolvimento de scripts de personalização para todos os mecanismos do framework. Ferramentas para Webdesign Prof. Ricardo v Unidade 01-9

10 VIII- Módulos: O FRAMEWORK (jquery Mobile) foi desenvolvido com base em uma arquitetura modular divididos em 2 grandes grupos: Módulos Componentes: Módulo para páginas e caixas de diálogo Módulo para barras de ferramentas Módulo para botões Módulo para formatação de conteúdos Módulo para elementos de formulários Módulo para listas Módulos API: Módulo para configurações padrão Módulo para eventos Módulo para métodos e utilidades Módulo para temas Referência: SILVA, Maurício Samy jquery Mobile Desenvolva aplicações para web para dispositivos móveis com HTML5, CSS3, Ajax, jquery e jquery UI Novatec, 2012 Ferramentas para Webdesign Prof. Ricardo v Unidade 01-10