Uma introdução ao uso YUI 3 em aplicações offline »Blog Yahoo! User Interface (YUIBlog)

Uma introdução ao uso YUI 3 em aplicações offline

27 de maio de 2010 às 1:53 pm por Alexander Kessinger | Em Desenvolvimento | 9 Comments

Sobre o autor: Alex Kessinger trabalha como engenheiro de front-end em Yahoo! passado a trabalhar como um front-end, ele gosta de trabalhar em toda a pilha. Ele também passa muito tempo lendo, curadoria, e escrever sobre a internet, mídia social e sites de construção. Você pode encontrar tudo isso em seu site alexkessinger.net . Você também pode encontrá-lo no twitter @ voidfiles .

Eu poderia dizer que o HTML5 está a construir a vapor, mas esse tempo é passado: HTML5 está aqui. Móveis já é enorme, o WebKit está crescendo rapidamente, eo número de pessoas que terão um browser com capacidade HTML5 em seu telefone e / ou laptop mais nos próximos anos irá criar um "novo normal", em que as capacidades são o padrão HTML5.

Uma das características impressionantes em HTML5 é o Application Cache , que concede aos sites a capacidade de dizer ao navegador que arquivos de cache e usar os arquivos em cache quando o navegador não tiver uma conexão de rede. Você pode usar o Application Cache para garantir que um usuário será capaz de acessar pelo menos uma parte do seu aplicativo enquanto ele estiver offline. No caso de dispositivos como telefones ou comprimidos (ou até mesmo antiquado dispositivos como laptops), isso pode significar que seus usuários são capazes de usar a sua aplicação, enquanto em um avião. Enquanto isso, você começa a continuar a construir sua aplicação com as tecnologias web em vez de aprender Objective-C.

Além do Application Cache , também existem outras APIs disponíveis em HTML5 que dar aos desenvolvedores web as ferramentas para criar experiências úteis offline. Existem duas APIs de armazenamento persistente disponível na maioria dos browsers mais recentes. Um deles é uma simples chave / valor armazenar dados, chamado localStorage . O segundo é um banco de dados SQL . Ambos podem ser aproveitados enquanto o usuário estiver offline.

Com esses conceitos em mente, vou explorar o evergreen "To Do List" aplicação, utilizando-a como um trampolim para ver como podemos aproveitar o cache de aplicativos e armazenamento persistente em um aplicativo que se baseia em tudo o que amo sobre YUI 3, incluindo os 3 YUI Galeria.

Markup

Marcação é sempre um ótimo lugar para começar ao construir qualquer coisa relacionada à web. O shell básico de nossa página HTML5:

  <! DOCTYPE HTML>
 <Html
 <head>
     <title> YUI ToDo </ title>
     <link rel="stylesheet" href="base.css" type="text/css" media="screen" title="no Title" charset="utf-8">
 </ Head>
 <body class="yui-skin-sam">
     <script src="yui-min.js"> </ script>
     <script src="base.js"> </ script>
 </ Body>
 </ Html>

Ainda estamos construindo uma aplicação offline-pronto, seguir as melhores práticas CSS, mas colocando na cabeça, e Javascript pouco antes da tag body de fechamento. Mesmo que sua página vai estar disponível offline, o carregamento da página inicial deve ser responsivo. (Note que estamos usando a impressionante simples doctype HTML5 aqui.)

O aplicativo precisa de algum espaço reservado a marcação:

  <! DOCTYPE HTML>
 <html>
 <head>
    <title> YUI ToDo </ title>
    <link rel="stylesheet" href="base.css" type="text/css" media="screen" title="no Title" charset="utf-8">
 </ Head>
 <body class="yui-skin-sam">
     <div id="doc3">
         <div class="hd">
             <h1> ToDo App </ h1>
             <a class="callout" href="http://alexkessinger.net" target="_blank"> por Alex Kessinger </ a>
             <div class="item_entry">
                 <form class="entry_form">
                     <input type="text" name="todo_item_input" class="todo_item_input">
                     <p class="toRight"> <a class="addItem" href="#add"> Adicionar </ a> </ p>
                 </ Form>
             </ Div>
         </ Div>
         <div class="bd">
             <div class="yui-main">
                 <div class="yui-b">
                     <div class="todo_items">
                         Itens <h2> Todo </ h2>
                         <ul>
                             class="no_items"> <li Recuperando Itens de ToDo ...</ li>
                         </ Ul>
                     </ Div>
                 </ Div>
             </ Div>
         </ Div>
         <div id="debug"> </ div>
         <-! //--> Processo de inicialização
         <script src="yui-min.js"> </ script>
         <script src="base.js"> </ script>
     </ Div>
 </ Body>
 </ Html>

Isso permitirá que o usuário saiba que estamos pensando em começar alguns dados para eles quando primeiro carregar o app. Ele também define o nosso palco, uma estrutura DOM para os nossos Javascript para começar a trabalhar.

Uma nota sobre Progressive Enhancement

Não há razão para que um aplicativo não pode ser construído com princípios de melhoria progressiva e ainda disponível para uso offline. Nessa exploração, estou omitindo a complexidade adicional que estariam envolvidos no PE, a fim de concentrar o máximo possível sobre as técnicas necessárias para suporte offline. Alguns poderiam criticar essa abordagem, e eu sou simpático a esse argumento.

Propriedades adicionais para a Manipulação de dispositivos móveis

iPhoneOS e navegadores Android pode lidar com mais páginas, sem qualquer atenção especial, mas quando se lida com dispositivos móveis vale a pena investigar como o conteúdo é comprimido para caber na tela menor. Quirksmode não tem um , mas dois artigos de fundo sobre a viewport que valem bem a pena o seu tempo.

Resumidamente, há uma meta tag, chamada viewport. Parece algo como isto:

  <meta name="viewport" value="">

O objetivo da tag viewport é ajudar os navegadores móveis descobrir como exibir uma página muito grande em uma tela pequena. Dispositivos móveis precisam de ajuda porque a maioria dos dispositivos de tentar espremer 700-1100px de conteúdo em uma tela de 300 500px. Além disso, quando nós colocamos nossos larguras a 100%, o browser leva o seu melhor palpite de como é grande o webpage devem ser, em seguida, as escalas que a partir desse grande para caber dentro do tamanho do dispositivo.

Para ajudar a que poderíamos definir o visor para isso.

  <meta name="viewport" value="width=device-width">

Isto irá dizer o dispositivo para definir a largura da página à largura da tela do dispositivo. Se nós nos certificamos nossa página é fluido, então a nossa página irá preencher a tela na maioria dos dispositivos móveis. Isto também significa que se o telefone tem um modo de paisagem a página será expandida para preencher o espaço extra.

Há outras coisas que podemos fazer para a viewport também. Se você trabalhou com navegadores móveis, você sabe que eles permitem zoom. Se você está tomando o tempo para construir um site para preencher toda a tela você não pode querer que um usuário ser capaz de zoom. Se colocarmos a nossa viewport a ser algo como o seguinte, o usuário não será capaz de ampliar, ou para fora. Em um dispositivo como o iPhone isso pode fazê-lo sentir-se mais nativa. Mas se você fizer isso, certifique-se que o conteúdo do seu aplicativo dá ao usuário nenhuma razão para que nunca querem zoom (de texto, por exemplo, pequenas), caso contrário, este será um constrangimento usabilidade frustrante.

  <meta name="viewport" value="width=device-width,user-scalable=no">

O visor não é um padrão W3C, mas é uma convenção comum. É atualmente suportada por navegadores WebKit no iPhone e Android sistemas operacionais. Fennec , o navegador móvel da Mozilla, provavelmente também apoiar esta convenção.

CSS

Mais do que nunca, usando a habilidade CSS para ser fluido e dinâmico é importante. Ao olhar para a vasta gama de telefones, comprimidos, e outras pequenas telas, os desenvolvedores de aplicativos precisam estar cientes de que nossos aplicativos estão indo para ser usado em uma infinidade de dispositivos. Mesmo que não há varinha mágica que pode acenar para fazer tudo apenas trabalhar, na maioria das aplicações que não podem precisar de ser perfeita em cada pixel de dispositivo. Basta seguir as melhores práticas pode nos levar a maioria dos forma de apoiar a maioria dos dispositivos.

Começando com ajuste a largura do nosso aplicativo em sua base em% é um grande começo. Usando los para definir font-tamanhos também é útil porque ems são calculados com base na página prestados. Outra coisa que ajuda é ter certeza de que você basear a largura das colunas em porcentagens bem. Mesmo calhas coluna pode ser definida em Eminem.

Um ótimo lugar para começar, sem ter que fazer um monte de trabalho é um framework CSS. YUI 2 Grids CSS é naturalmente um dos nossos favoritos, e isso nos ajuda a pensar em nossa página, em termos de rácios de estática em vez de largura blocos.

Assim, a construção off YUI 2 Grids CSS aqui é o CSS de partida para a minha app.

  . Todo_items {
     padding-top: 1em;
 }

 . Todo_items ul {
     padding: 0;
     margin: 0;
 }
 . Todo_items ul li {
     margin: 0,125 em 0 .5 em 0;
     padding: 0,125 em 0 0 0;
     border-top: 1px solid # ccc;
     list-style: none;
     display: block;
     word-wrap: break-word;
     quebra de texto: suprimir;
 }

 . ToRight {
      text-align: right;
 }

 . Yui3-console {
      text-align: left;
      margin-left: 10px;
 }

 corpo h1 {font-size: 200%;}
 corpo h2 {font-size: 150%;}

Javascript

Em seguida acima para o nosso off-line para-do aplicativo é o JavaScript. Primeiro baixe yui_min.js à sua raiz do documento, e adicioná-lo à marcação como nós temos acima. Em seguida, coloque isso no seu base.js arquivo:

  YUI (). Use ('nó', function (Y) {
     Y.one ("todo_items h2.") SetContent ("Eu estou voando.");
 });

Além Nó, eu também vou incluir o YUI CSS 3 Redefinir e YUI 2 Grids CSS. Vou incluir um módulo da 3 YUI Gallery , excelente Ryan Grove Armazenamento Lite , que vai envolver todos os métodos possíveis locais de armazenamento de dados para uma fácil de usar API.

  YUI (). Use ('cssreset', 'yui2-redes', 'galeria de armazenamento-lite', 'nó', function (Y) {

   / / TO-DO CÓDIGO DE APLICAÇÃO LISTA

 });

Nota: Eu não vou mergulhar nas to-do código lista, nem em algumas das técnicas que eu uso para torná-lo mais fácil de depurar este tipo de projeto em dispositivos móveis. Você pode encontrar tudo isso no github: yui3-todo . Dentro base.js você encontrará a totalidade do app. Você também pode ver o aplicativo instalado e funcionando em http://html5.alexkessinger.net/yui/ytodo/ . Aqui, eu vou focar as medidas necessárias para aprimorar este aplicativo simples com capacidades offline.

Manifesto Cache

O primeiro passo a tomar uma app web off-line é o Application Cache . O Application Cache pode dizer ao seu navegador os arquivos que deseja baixar e manter offline. Neste exemplo, eu sei que eu quero manter o meu JavaScript e CSS meu off-line, bem como a página HTML principal para o aplicativo. Com isso em mente, meu manifesto de cache será parecido com este:

  MANIFEST CACHE

 index.html
 base.css
 yui_min.js
 base.js

Algumas coisas a notar sobre o manifesto de cache.

Deve começar com a linha CACHE MANIFEST .
Você deve servi-la com um cabeçalho Content-Type de texto / cache manifestar-

Se você estiver em Apache, você pode adicionar o seguinte trecho para .htaccess para obter o tipo de conteúdo certo.

  AddType text / cache de se manifestar. Manifestar

Com isso em lugar, em qualquer arquivo com um .manifest sufixo será servido com o text/cache-manifest cabeçalho Content-Type.

Em seguida, precisamos informar o browser do manifesto de cache, para isso vamos adicionar um atributo para a nossa tag HTML:

  manifest="todo.manifest"> <html

Agora, se você ir para sua página em um browser que suporte aplicativos off-line você provavelmente verá uma notificação informando que a página está solicitando acesso offline.

Offline / Online

Com o manifesto no lugar dizendo nosso navegador que recursos de cache, estamos prontos para pensar sobre o que acontece no modo online versus mode offline. Existem agora duas "seqüências de inicialização", o primeiro sendo a seqüência completa on-line que já temos (e durante o qual os recursos são armazenados em cache para uso off-line). Esta seqüência online usa o CDN Yahoo para carregar os arquivos e os arquivos são combo-tratado por isso temos apenas umas poucas solicitações HTTP.

Mas estamos também a construir um procedimento de inicialização offline. Precisamos ser capazes de detectar o fato de que o navegador está offline e depois inicializar YUI adequadamente para desenhar a partir de recursos armazenados em cache.

  var online = (navigator.onLine)?  true: false;

Agora, só precisamos de escolher um objeto de configuração baseada em ser offline ou online.

  var YUI_ONLINE_CONF = {},
     YUI_OFFLINE_CONF = {
         base: "yui3/build /",
         combinar: 0,
         grupos: {
             Galeria: {
                 base: "yui3-gallery/build / ',
                 padrões: {'galeria': {}}
             },
             yui2: {
                 base: '2 in3/dist/2.8.0/build / ',
                 padrões: {
                     "Yui2 ': {
                         configFn: function (me) {
                             if (pele /-| redefinir | fontes | grelhas | base / .test (me.name)) {
                                 me.type = 'css';
                                 me.path me.path.replace = (. / \ js / '. css');
                                 me.path = (pele yui2 / \ / /, '/ assets/skins/sam/yui2-skin') me.path.replace;
                             }
                         }
                     }
                 }
             }
         }
      },
      ONLINE = (navigator.online)?  true: false;
      CURRENT_CONF = (ONLINE)?  YUI_ONLINE_CONF: YUI_OFFLINE_CONF;

 YUI (CURRENT_CONF). Use ('cssreset', 'yui2-redes', 'galeria de armazenamento-lite', 'nó', function (Y) {
     ...
 });

O YUI_OFFLINE_CONF configuração pode precisar de alguma explicação. Primeiro, eu estou mudando a base para a minha raiz do documento + yui3/build/ . Tenho postado a distribuição completa do YUI 3 a meu servidor porque os estados especificação W3C que o cache offline tem uma política estrita de origem única. Todos os recursos armazenados em cache deve vir do mesmo domínio como o faz o manifesto. Como resultado, não posso dependem Yahoo! ou Google ou qualquer outro CDN para servir meus arquivos - todos eles devem estar disponíveis para o cache do meu servidor.

A próxima parte, combine:0 , diz o carregador YUI para não combinação automaticamente os arquivos, porque eu não tiver uma combinação de manipulador de instalado no meu próprio servidor.

Finalmente, quero mencionar os groups de configuração. Grupos é um novo recurso no YUI 3.1.1 que permite definir grupos inteiros de arquivos que vêm do mesmo lugar. Você também pode configurá-los para ser combo'd da fonte. Eu configuro o YUI 3 Galeria aqui para carregar de uma cópia local eu tenho do repositório yui3 galeria-on GitHub.

Quando estamos online, podemos bootstrap a partir da CDN Yahoo, mas offline precisamos ter cópias locais dos arquivos. Isso é fácil de fazer. Você pode baixar os arquivos necessidades em um arquivo zip grande para o seu diretório:

  cd docroot;
 http://yuilibrary.com/downloads/yui3/yui_3.1.0.zip wget;
 unzip yui_3.1.0.zip;
 mv yui yui3;
 http://download.github.com/yui-yui3-gallery-gallery-2010.05.19-19-08-0-g2a49f06.zip wget;
 unzip yui-yui3-gallery-galeria-2010/5/19-19-08-0-g2a49f06.zip;
 mv yui-yui3-gallery-2a49f06 yui3-galeria;
 http://download.github.com/yui-2in3-yui-2in3.3-0-gdf09025.zip wget;
 mv yui-2in3-yui-2in3.3-0-gdf09025 2in3;

Ou você pode clonar os repositórios git github de diretamente se git é instalado em sua máquina:

  cd docroot;
 git clone git: / / github.com/yui/yui3.git yui3;
 git clone git: / / github.com/yui/yui3-gallery.git yui3 galeria;
 git clone git: / / github.com/yui/2in3.git 2in3;

Para fins de teste. Eu, às vezes, definir ONLINE = false e verificar como cargas meu site. Se você fizer isso, e depois visitar o seu aplicativo em um navegador normal, você pode ver cada arquivo que precisa ser incluído individualmente. Para preencher corretamente a nossa manifestar cache, você precisa tomar nota de cada arquivo a ser puxado em, usando algo parecido com o Firebug. Então, em seu manifesto de cache que você irá listar cada um arquivo por um. Vai ser algo como isto.

  MANIFEST CACHE
 # Um comentário
 index.html
 base.css
 base.js
 yui-min.js
 yui3/build/loader/loader-min.js
 yui3/build/widget/assets/skins/sam/widget.css
 yui3/build/console/assets/skins/sam/console.css
 yui3/build/oop/oop-min.js
 yui3/build/event-custom/event-custom-min.js
 yui3/build/intl/intl-min.js
 yui3/build/console/lang/console.js
 yui3/build/attribute/attribute-min.js
 yui3/build/event/event-base-min.js
 yui3/build/pluginhost/pluginhost-min.js
 yui3/build/dom/dom-min.js
 yui3/build/node/node-min.js
 yui3/build/event/event-delegate-min.js
 yui3/build/event/event-focus-min.js
 yui3/build/base/base-min.js
 yui3/build/classnamemanager/classnamemanager-min.js
 yui3/build/widget/widget-min.js
 yui3/build/substitute/substitute-min.js
 yui3/build/console/console-min.js
 yui3/build/cssreset/reset-min.css
 2in3/dist/2.8.0/build/yui2-grids/yui2-grids-min.css
 yui3-gallery/build/gallery-storage-lite/gallery-storage-lite-min.js
 yui3/build/json/json-min.js
 startup.png
 icon.png

Neste ponto podemos percorrer todo o caminho offline. Se você tiver um dispositivo iPhoneOS ou Android (ou qualquer navegador HTML5-capable), agora você pode visitar sua página, deixá-lo terminar de carregar, e depois refrescar a página com o acesso do dispositivo de internet com deficiência.

iPhone específicas Goodies

O iPhone permite ao desenvolvedor WebApp a capacidade de dar o seu app algum espaço na tela inicial assim como todos os outros aplicativos. Você pode até ter um ícone brilhante e tela de inicialização que você teria com uma aplicação "nativa". Primeiro, você precisa seguir as especificações para o ícone e tela de inicialização. E então você pode adicionar o seguinte meta tags:

  <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="white" />
 <link rel="apple-touch-icon" href="icon.png"/>
 <link rel="apple-touch-startup-image" href="startup.png" />

As duas primeiras marcas dizem Safari móvel que sua página da web é uma WebApp HTML5 e que você wan a cor da barra de status na parte superior para ser branco. Isso também irá remover todos os cromados em torno de navegação janela do navegador. O segundo duas tags apontar para os arquivos que deseja usar para o seu ícone e tela de inicialização.

Qual é o próximo

A especificação HTML5 ainda é um alvo em movimento. Mantenha-se atento para novos desenvolvimentos. Dito isso, ainda hoje existem novas capacidades fantásticas em navegadores modernos. Como você pode ver a partir deste tutorial, não é difícil fazer uma aplicação web off-line, aumentando dramaticamente sua utilidade potencial. E, quando você ficar offline, não hesitará em tomar YUI 3 com você, juntamente com todo o poder que você está acostumado a partir do 3 YUI eo YUI Galeria família widget 2.

Compartilhar e ampliar: Bookmark com del.icio.us | digg it! | reddit!

9 Comentários

Eu sei que a questão aqui é a demo, mas ainda precisamos ver o código que poderia ser usado na vida real. Poderia haver um bug nos browsers que não suporte navigator.online
você teste desta forma
var online = (navigator.online)? true: false;
assim um IE vai sempre considerar que é off-line porque a propriedade não existe, que a aplicação poderia trabalhar, pelo menos, on-line
Comentário por jpvincent - 28 de maio de 2010 #
Parei de ler em? verdadeiro: falso.
Comentário por hj - 28 de maio de 2010 #
Ambos FF 3.6.3 e Chrome 6dev não tem a propriedade navigator.online mas navigator.onLine. Com grandes L.
Comentário por Matjaž ultra-som pulsado - 28 de maio de 2010 #
Gostaria muito de abraçar HTML5, mas, não é cedo demais para pular no vagão HTML5?
com base na wikipedia diz:
citação do wikipedia:
"... Especificação HTML5, espera que a especificação para chegar à fase Recomendação W3C candidatos durante 2012, e da Recomendação W3C no ano de 2022 ou mais tarde ...".
Comentário por Levan - 28 de maio, 2010 #
@ Jpvincent o navigator.onLine foi no IE desde 4.0.
@ Matjaž ultra-som pulsado você está correto. Este realmente o caso em todos os lugares e não apenas o iPhone. Temos consertou o erro no artigo, e também tenho fixa-lo no meu código.
@ Levan HTML5 é um alvo móvel, mas os browsers têm implementado partes dele já. Também telefones e outros dispositivos móveis com provavelmente apenas começam com capacidade HTML5. Também no futuro, parece como se o grupo de normas está se movendo para uma seqüência de versões novas não-número. Então, em essência nós não vamos ver algo como "HTML7" a especificação continuará a evoluiu lentamente, e os desenvolvedores terão que tomar decisões sobre características individuais ao invés de tentar decidir se são ou não vai apoiar a coisa toda.
Comentário por Alexander Kessinger - 28 de maio de 2010 #
[...] Uma Introdução ao Uso YUI 3 em Aplicações off-line Uma das características impressionantes em HTML5 é o cache do aplicativo, que concede aos sites a capacidade de dizer ao navegador que arquivos de cache e usar os arquivos em cache quando o browser doesn ' t tem uma conexão de rede. Você pode usar o Application Cache para garantir que um usuário será capaz de acessar pelo menos uma parte do seu aplicativo enquanto ele estiver offline. (Tags: html javascript 2010) Scritto il 30/05/10 da giorgio_v. [...]
Pingback por links para 2010/05/30 - ReFactor.it - 30 de maio de 2010 #
Erro de digitação: "... e que você wan na cor da barra de status ..."
"Wan" s / b "querem"
Comentário por Kovacs - 30 de maio de 2010 #
[...] Ou armazenamento de dados para armazenar os seus componentes. Pós Alex Kessinger Blog recentes YUI, uma introdução ao uso YUI 3 em aplicações offline, pode ser de interesse para YUI 3 desenvolvedores considerando que este [...]
Pingback por Limites Mobile Browser Cache: Android, iOS e webOS »Blog Yahoo! User Interface (YUIBlog) - 28 de junho de 2010 #
Minhas observações sobre os aspectos a mesma origem:
Como por meus testes e leitura da especificação [1], a origem do mesmo restrição só se aplica às entradas de cache explícita referência, se você está acessando o manifesto sobre https (ou algum outro protocolo seguro).
Assim, no exemplo acima, parece que teria sido bom para puxar código YUI do CDN. Deve ainda ter em cache para uso offline. Eu estaria interessado em saber se você vê o contrário.
[1] HTML 5, Parsing Manifestos Cache off-line (ver ponto 28: Tokens Parsing)
Comentário por Satyen Desai - 12 de outubro, 2010 #

Desculpe, o formulário de comentário é fechado neste momento.

Alimentado por WordPress em Yahoo! Web Hosting .

Usuário Yahoo! interface Blog (YUIBlog)