Uma introdução ao uso YUI 3 em Aplicações Offline

Maio 27, 2010 às 1:53 pm por Alexander Kessinger | Em Desenvolvimento | 9 Comentários

Sobre o autor: Alex Kessinger trabalha como engenheiro de front-end no 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 escrito 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. Celular já é enorme, o WebKit está crescendo rapidamente, eo número de pessoas que terão um navegador HTML5-capaz em seu telefone e / ou laptop ao longo dos 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 cache de aplicativos , 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 cache de aplicativos para garantir que um usuário será capaz de acessar pelo menos uma parte do seu aplicativo enquanto ele estiver offline. No caso dos dispositivos como telefones ou comprimidos (ou mesmo antigos aparelhos como laptops), isso poderia significar que os 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 da web ao invés de aprender Objective-C.

Além do cache de aplicativos , há também outras APIs disponíveis em HTML5 que fornecem aos desenvolvedores web as ferramentas para criar experiências úteis offline. Existem duas APIs de armazenamento persistente disponível na maioria dos navegadores mais recentes. Um deles é uma simples chave / valor armazenamento de 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 a sempre-viva "To Do List" do aplicativo, usando-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 amamos sobre YUI 3, incluindo a 3 YUI Galeria.

Markup

A marcação é sempre um ótimo lugar para começar quando a construção de 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, siga as boas práticas, mas colocando na cabeça CSS, Javascript e um 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 um 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 Buscando itens para fazer ... </ 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 eles primeiro carregar o app. Ele também define o nosso palco, uma estrutura DOM para a nossa Javascript para começar a trabalhar.

Uma nota sobre o aumento progressivo

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. Nesta exploração, estou omitindo a complexidade adicional que estaria envolvido em PE, a fim de concentrar o máximo possível sobre as técnicas necessárias para o suporte offline. Alguns podem criticar essa abordagem, e eu sou simpático a esse argumento.

Propriedades adicionais para lidar com dispositivos móveis

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

Resumidamente, há uma meta tag, chamado 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. Os dispositivos móveis precisa de ajuda porque a maioria dos dispositivos tentam espremer 700-1100px de conteúdo em uma tela de 300-500px. Além disso, quando nós colocamos nossos larguras de 100%, o navegador leva o seu melhor palpite em como é grande o site deveria ser, e, em seguida, as escalas a partir desse grande para caber dentro do tamanho do dispositivo.

Para ajudar a que poderíamos definir a janela de exibição 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 certifique-se de 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 janela também. Se você trabalhou com os navegadores móveis, você sabe que eles permitem que você 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 seja capaz de ampliar. Se colocarmos nosso viewport para 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 torná-la mais nativa. Mas se você fizer isso, certifique-se que o conteúdo do seu aplicativo dá ao usuário nenhuma razão para nunca quer ampliar (texto, por exemplo, pequena), 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 sistemas operacionais Android. Fennec , o navegador Mozilla móvel, provavelmente também apoiar esta convenção.

CSS

Mais do que nunca, usando a habilidade CSS para ser fluida e dinâmica é importante. Ao olhar para a vasta gama de telefones, tablets e outros telas pequenas, 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 haja nenhuma varinha mágica que pode acenar para fazer tudo apenas trabalhar, para a maioria das aplicações que não pode precisar de ser pixel perfeito em todos os dispositivos. Apenas seguir as melhores práticas pode nos levar a maior parte da maneira de apoiar a maioria dos dispositivos.

Começando com a definição da largura do nosso aplicativo em sua base em% é um grande começo. Usando Eminem para definir font-tamanhos também é útil porque ems são calculados com base na página web renderizada. 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 Grids CSS 2 é naturalmente um dos nossos favoritos, e isso nos ajuda a pensar em nossa página, em termos de relações ao invés de estática de largura blocos.

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

 . Todo_items {padding-top: 1em;} todo_items ul.. {Padding: 0; margin: 0;} todo_items ul li {margin: 0,125 in 0 .5 em 0; padding: 0,125 in 0 0 0; border-top: 1px solid # ccc; list-style: none; display: block; word-wrap: break-word; texto-wrap:. suprimir;} toRight {text-align: right;} yui3-console {text-align:. esquerda; margin-left: 10px;} corpo h1 {font-size: 200%;} corpo h2 {font-size: 150%;}

Javascript

Em seguida para a nossa aplicação de tarefas offline é o JavaScript. Primeiro baixe yui_min.js a raiz do seu documento, e adicioná-lo à marcação como o que temos acima. Em seguida, coloque isso na sua base.js arquivo: 

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

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

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

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

 });

Nota: Eu não vou mergulhar de coisas a fazer lista de códigos, 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 os passos necessários para aprimorar este aplicativo simples com capacidades offline.

Manifesto Cache

O primeiro passo a tomar uma app web off-line é o cache de aplicativos . O cache de aplicativos pode dizer ao seu navegador que 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-manifesto

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 no lugar, 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 local dizendo nosso navegador que recursos para cache, estamos prontos para pensar sobre o que acontece no modo online versus modo offline. Existem agora duas sequências de "inicialização", a primeira sendo a sequê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 on-line utiliza o CDN Yahoo para carregar os arquivos e os arquivos são combo-tratadas, assim, temos apenas alguns pedidos 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, em seguida, inicializar corretamente YUI para desenhar a partir de recursos armazenados em cache. 

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

Agora, só precisamos de escolher um objeto de configuração baseada em estar 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 | redefinição | pias | grelhas | base / .test (me.name)) {
                                 me.type = 'css';
                                 me.path = me.path.replace (/ \ js /,. "css. ');
                                 me.path = me.path.replace (/ \ / yui2-pele / "/ assets/skins/sam/yui2-skin ');
                             }
                         }
                     }
                 }
             }
         }
      },
      ONLINE = (navigator.onLine)?  true: false;
      CURRENT_CONF = (ONLINE)?  YUI_ONLINE_CONF: YUI_OFFLINE_CONF;

 YUI (CURRENT_CONF) uso. ('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 para o meu servidor porque o W3C especificação afirma que o cache offline tem uma política estrita de origem única. Todos os recursos armazenados em cache deve vir do mesmo domínio que faz o manifesto. Como resultado, não posso confiar no 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 tenho uma combinação de manipulador de instalado no meu próprio servidor.

Finalmente, quero mencionar os groups config. 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 configurei a YUI 3 Galeria aqui para carregar a partir de uma cópia local que eu tenho do repositório yui3 galeria no GitHub.

Quando estamos online, podemos inicialização do CDN Yahoo, mas offline precisamos ter cópias locais dos arquivos. Isso é fácil de fazer. Você pode baixar os arquivos necessários em um arquivo zip grande para o seu diretório: 

  cd docroot;
 http://yuilibrary.com/downloads/yui3/yui_3.1.0.zip wget;
 descompacte 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-galeria galeria--2010.05.19-19-08-0-g2a49f06.zip;
 mv yui-yui3-gallery-2a49f06 yui3-gallery;
 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 está 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 veja como meu site é carregado. 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 que está sendo puxado para dentro, usando algo parecido com o Firebug. Então, em seu manifesto de cache que você irá listar cada arquivo um por um. Será algo parecido com 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 ir até o offline. Se você tiver um dispositivo iPhoneOS ou Android (ou qualquer navegador HTML5-capable), agora você pode visitar sua página, deixá-lo terminar o carregamento, e depois refrescar a página com acesso de Internet do dispositivo desativado.

iPhone específicas extras

O iPhone permite que o 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 os seguintes 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 web é um WebApp HTML5 e que você ganhou a cor da barra de status na parte superior para ser branco. Isso também irá remover todos os cromados a navegação em torno janela do navegador. O segundo duas tags apontar para os arquivos que você 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 a novos desenvolvimentos. Dito isto, ainda hoje existem fantásticas novas capacidades 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ê, junto com todo o poder que você está acostumado a partir do 3 YUI eo YUI Galeria família Widget 2.

Encontrar conversas: bloglines | technorati

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

Trabalhe com YUI como parte do Open da equipe de estratégia Yahoo! Engenharia (YOS)

20 de maio de 2010 às 14:06 por Rohit Dube | Em Engenharia Frontend em Yahoo | Comments Off

O Yahoo! Aberto Estratégia Team (YOS) está a construir a próxima geração de plataformas abertas. Um dos nossos próximos produtos - Connect - é destinada a terceiros editores e desenvolvedores. Connect permite que terceiros para se integrar facilmente com o Yahoo!, soltando algumas linhas de código Javascript em seu site. Além disso, Connect permite que usuários façam login em sites de terceiros usando as suas IDs do Yahoo! e transmitir as suas atualizações para os amigos e seguidores.

Connect utiliza várias tecnologias, incluindo Yahoo YQL e YUI . Em particular, o Connect utiliza as bibliotecas do núcleo de YUI3 (nó, io, eventos personalizados) e da infra-estrutura widget para fornecer uma API consistente e cross-browser experiência. Uma vez totalmente desenvolvido, o Connect será implantado em milhares de web-sites e estar visível para milhões de consumidores. Esta é uma oportunidade emocionante estar envolvido com um projeto que terá alcance do consumidor excepcional e requisitos de escalabilidade desafiadoras.

O candidato ideal terá 5 + anos de experiência em grande escala de desenvolvimento web, incluindo familiaridade com tecnologias navegador do lado do cliente, como Javascript, HTML e CSS e com problemas de compatibilidade cross-browser, técnicas de otimização e de internacionalização. O conhecimento de PHP e uma biblioteca JavaScript - como YUI - são obrigatórios.

Interessado? Veja a lista de empregos em http://careers.yahoo.com/jdescription.php?oid=29752 e Rohit contato Dube (rdube AT yahoo-inc.com).

Encontrar conversas: bloglines | technorati

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

YUI Theater - Ryan Dahl: "Introdução ao NodeJS" (58 min.)

Maio 20, 2010 at 1:26 pm por Allen Rabinovich | Em Desenvolvimento e YUI Theater | 14 Comentários

Discussão Ryan Dahl no evento BayJax no Yahoo! em 05 de maio de 2010.

Duas semanas atrás, o Yahoo! organizou um BayJax meetup dedicado a NodeJS (desde o meetup coincidiu com o Cinco de Mayo, que chamou de "Cinco de Node"). Ryan Dahl , o criador do NodeJS, deu uma palestra sobre o projeto e foi muito tipo para nos deixar gravar sua apresentação para YUI Theater.

PS O vídeo abre com um vislumbre de 30 segundos para o Cinco de Mayo as celebrações no Yahoo!

Se o vídeo incorporar abaixo não aparecer correctamente no seu leitor RSS de escolha, não se esqueça de clicar para assistir a versão de alta resolução do vídeo em YUI Theater .

Outros vídeos Theater recentes YUI:

Encontrar conversas: bloglines | technorati

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

YUI Theater - Elias Insua: "jsdom: a Implementação CommonJS do DOM" (18 min.)

20 de maio de 2010 às 1:24 pm por Allen Rabinovich | Em Desenvolvimento e YUI Theater | Comments Off

Discussão Elias Insua no evento BayJax no Yahoo! em 05 de maio de 2010.

Elias Insua , um desenvolvedor da estrela de Arc90 , apresentou seu trabalho sobre jsdom no Nó de Cinco evento BayJax no Yahoo!. Elias foi apresentar a partir de Brooklyn via Skype (por favor, perdoe o vídeo menos do que ideal e qualidade de áudio), e gentilmente nos permitiu capturar sua palestra para YUI Theater.

Se o vídeo incorporar abaixo não aparecer correctamente no seu leitor RSS de escolha, não se esqueça de clicar para assistir a versão de alta resolução do vídeo em YUI Theater .

Outros vídeos Theater recentes YUI:

Encontrar conversas: bloglines | technorati

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

Foco Implementação: Media Organizer Phanfare

19 de maio de 2010 às 1:51 pm por Eric Miraglia | No Nas selvagens e Implementações YUI | 1 Comentário

Cory Mintz de Phanfare escreveu na semana passada a nos dizer sobre seu lançamento de um produto recente, que é fortemente baseado em YUI 2.8.0.

Acabamos de lançar nosso novo web organizador ontem ... É uma foto cheia e organizador de vídeo construído como uma aplicação web, usando quase todos os 2 YUI componente. Nós achamos que realmente borra a linha entre o desktop eo software web.

Algumas características notáveis ​​são:

  • Usando o Uploader , deixamos as pessoas a organizar e editar suas fotos, eles carregam.
  • Com a ajuda de arrastar e soltar e menu , a grade miniatura tem todos os comportamentos de um navegador de arquivos do sistema operacional. Você pode arrastar selecionar, arrastar e soltar reordenar, multi-select usando Ctrl e Shift, seta entre miniaturas, etc
  • O carregamento dinâmico do TreeView , vamos as contas de usuário com carga preguiçosos 100s de álbuns, uma vez que são hierárquicos (ano -> Álbum -> seção). Isso permite que a página para uma conta muito grande para carregar tão rápido quanto uma pequena conta.

Eu amo o profissionalismo limpa do site e extraordinária atenção aos detalhes na UI. Sinta-se livre para visitar o site - contas de teste são gratuitos e vem preenchida com álbuns de exemplo para lhe dar uma sensação de que o site tem para oferecer. Parabéns a Cory e da equipe para aquele lançamento fantástico.

Encontrar conversas: bloglines | technorati

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

CSS 101: Contextos de formatação do bloco

19 de maio de 2010 às 11:46 pm por Thierry Koblentz | Em Desenvolvimento | 10 Comentários

Sobre o autor: Thierry Koblentz é um engenheiro de front-end no Yahoo!
Ele é dono de TJK Projeto , ez-css.org e css-101.org . Você pode acompanhar Thierry no Twitter em @ thierrykoblentz .

Um contexto formatação do bloco é uma caixa que satisfaz pelo menos uma das seguintes características:

  • o valor de "float" não é "nenhum",
  • o valor usado de "estouro" não é "visível",
  • o valor de "display" é "table-cell", "tabela de legenda", ou "inline-block",
  • o valor de "posição" não é "estático" ou "relativo".

Quando se trata do modelo de formatação visual (é assim que os agentes do usuário processar a árvore de documentos visuais de mídia ), contextos de formatação do bloco são grandes jogadores. Por isso, é crucial para os autores CSS para ter uma sólida compreensão da sua relação com o fluxo, carros alegóricos, claro, e as margens.

O que dizer sobre a especificação ...

Como bloquear o fluxo de contextos formatação

O sistema de posicionamento a que contextos de formatação de blocos pertencem é fluxo normal . Portanto, o "bloco" de um contexto de formatação do bloco é posicionado no fluxo da página como você esperaria com bloco de caixas, formatação linha de embutidos caixas, posicionamento relativo do bloco ou caixas de inline, e posicionamento de run-in caixas. Simplificando, eles são parte do fluxo de página.

O que desencadeia contextos de formatação de blocos

Seção 9.4.1 diz que o seguinte será estabelecer contextos nova formatação do bloco:

  • carros alegóricos,
  • elementos posicionados absolutamente,
  • em linha de blocos,
  • tabela de células,
  • tabela de legendas,
  • elementos denominados de "estouro" (qualquer valor diferente de "visível")

Mas de acordo com a especificação CSS nível 3 , um contexto de formatação do bloco (a "raiz fluxo" Speak no CSS3) é criado quando a seguinte condição:

Esta definição significa que position:fixed estabelece um contexto de uma nova formatação do bloco, também. Esta não é uma falta na seção 9.4.1, embora, posicionamento fixo é uma subcategoria de posicionamento absoluto (9.6.1) e referências na especificação para um elemento posicionado absolutamente (ou sua caixa) implica que o elemento de " posição "propriedade tem o valor "absoluto" ou "fixado".

Note que display:table não estabelece contextos de blocos de formatação, por si só. Mas porque pode gerar caixas de anônimos , um deles (com display:table-cell ) estabelece um contexto de uma nova formatação do bloco. Em outras palavras, o gatilho é a caixa de anônimo não, display:table . Isso é algo que os autores devem ter em mente, porque, mesmo se ambos os estilos estabelecer contextos novos blocos de formatação (implícita ou explicitamente), clear não funcionam da mesma forma com display:table , como faz com display:table-cell .

Um gatilho final é o fieldset elemento. Curiosamente, não havia informações sobre www.w3.org sobre esse comportamento até que o HTML5 especificação. Havia erros de navegadores ( Webkit , Mozilla ) que mencionaram isso, mas "oficiais" nada. Na verdade, mesmo se fieldsets estabelecem contextos de blocos novos de formatação na maioria dos browsers, como por seção 3,2 (UA conformidade), os autores não deveriam levar isso para concedido:

CSS 2.1 não define quais propriedades se aplicam para formar controles e quadros, ou como o CSS pode ser usado para o estilo deles. Os agentes poderão aplicar propriedades CSS para estes elementos. Os autores são recomendados para o tratamento de suporte, como experimental. A nível futuro da CSS pode especificar a este projecto.

O que fazer contextos de formatação de blocos

Contextos de formatação do bloco conter flutua por causa da maneira que o fluxo, e por seção 9.4.1, evitam margens em colapso e não se sobrepõem carros alegóricos:

Num contexto de formatação de bloco, caixas são dispostas uma atrás da outra, na vertical, começando no topo de um bloco que contém. A distância vertical entre duas caixas de irmãos é determinada pelas "margem" de propriedades. Margens verticais entre as caixas de blocos adjacentes em um contexto bloco formatação colapso .

Em um contexto de formatação do bloco, lado esquerdo de cada caixa do exterior toca a borda esquerda do bloco de conteúdo (para a direita para a esquerda a formatação, toque bordas direita). Isto é verdade mesmo na presença de flutuadores (embora caixas de uma caixa de linha podem encolher devido aos flutuadores), a menos que a caixa estabelece um contexto nova formatação bloco (caso em que a própria caixa pode tornar-se mais estreita devido aos flutuadores).

Chega com as especificações, o que significa isso no mundo real?

Contextos de formatação de blocos se comportam mais ou menos como qualquer caixa de bloco, além dessas importantes exceções:

  • Contextos de formatação do bloco evitar margem de colapso

    Margens verticais entre caixas de bloco adjacente colapso , mas apenas se eles estão no mesmo contexto bloco formatação. Em outras palavras, se as caixas adjacentes não pertencem ao mesmo contexto bloco de formatação, a sua margem não entrará em colapso.

    Exemplo:

    Este é um parágrafo dentro de um DIV com um fundo azul, decorados com margin:20px .

    Este é um parágrafo dentro de um DIV com um fundo azul, decorados com margin:20px .

    Este é um parágrafo dentro de um DIV com um fundo azul, é denominado com margin:20px , O DIV pai é desenhado com overflow:hidden;zoom:1 .

    Entre as duas primeiras caixas azuis acima, a margem inferior e superior do colapso parágrafos (a diferença é igual a 20 pixels, e não 40 pixels), mas porque o DIV última cria um contexto de uma nova formatação do bloco, às margens do terceiro parágrafo não entrar em colapso , portanto, eles não "ficar fora" do recipiente do parágrafo, mas sim fazem parte desse caixa do bloco.

    Nota: no IE6, sem margens explícitas do DIV não seria suficiente para incluir as margens.

    Quando se trata de colapso margens, criando um contexto de nova formatação bloco age da mesma forma como a aplicação de border ou padding para o elemento.

  • Contextos de formatação do bloco conter flutuadores

    Tenho certeza que você já ouviu falar da frase "uma bóia contém sempre flutua", ou talvez ouviram falar do FNE ( flutuar quase tudo ) método. Mas a base disso é que os carros alegóricos são contextos de formatação de blocos, de modo a melhor maneira de formular isso é para dizer que "um contexto de formatação bloco contém sempre flutua".

    Exemplo:

    Este número é um float dentro de uma DIV com um fundo azul, é denominado com margin:20px

    Este número é um float dentro de uma DIV com um fundo azul, é denominado com margin:20px . O DIV pai é desenhado com overflow:hidden;zoom:1 .

    O primeiro parágrafo é um flutuador de modo que é removido do fluxo e colapsos seu recipiente, portanto, o fundo deste recipiente não mostra.

    The second paragraph is also a float, but it is contained inside a DIV that creates a new block formatting context, hence that container encloses the child's “margin box”. You should also note that, unlike with the first paragraph, there is no need to clear the previous box. This is often referred to as “self-clearing”, which makes lot of sense considering that block formatting contexts are a normal part of the flow.

    Note : clear only clears floats within the same block formatting context .

  • Block formatting contexts do not overlap floats

    This one is my favorite . According to the spec, the border-box of a block formatting context must not overlap the margin-box of floats in the same block formatting context as the element itself. What this means is that browsers create implicit margins on block formatting contexts to prevent them from overlapping the margin-box of floats. For this very reason, negative margins should have no effect when applied to a block formatting context next to floats (WebKit and IE6 have a problem with this though – see test case ).

    Exemplo: 

     .sideBar { background: skyBlue; float: left; width: 180px; } 
     .sideBar { background: yellow; float: right; width: 180px; } 
     #main { background: pink; overflow: hidden; zoom: 1; border: 5px solid teal; }

    Because this behavior is attached to the “border box” (not the “margin box”), to create space (eg, a 20px gap) between the pink box and its siblings, authors would need to either:

    • Set a 20px margin on the floats
    • Set margin values on the pink box greater than the width of the floats (ie, margin:0 220px )

    Yes, you'd use 220px , not 20px . Because it is the border-box that tries to fit between the floats, not the margin-box. And if I say it tries it is because that container would drop if there was not enough room for it between the two floats.

    In other words, if the pink box was given a 400 pixels width, that box should drop when the parent container is narrower than 770 pixels (180px + 180px + 400px + 10px). As a side note, in a few instances, this behavior appears to be broken in Firefox (at least in v.3.5.9) (ie, when the above construct is the first child of body – see test case ).

    Note : the space that shows in IE6 between the pink box and the two floats is due to the three pixel jog bug .

hasLayout versus block formatting context

As you may have noticed, all previous examples are styled using overflow:hidden;zoom:1 . The former declaration establishes a new block formatting context in modern browsers while the latter triggers hasLayout in Internet Explorer (IE 5.5/6/7). This is because these renderings are very close ( similarities with the CSS specs ). Like block formatting contexts, elements that are given a layout appear to prevent collapsing margins, to contain floats, and to not overlap floats.

Properties/declarations that give elements a layout

The lists below show that the properties that establish a new block formatting context also trigger hasLayout, at least the ones supported by the browser, with the exception of overflow in IE < 7.

In Internet Explorer 5 and 6
position:absolute
position:fixed
float (any value other than ” none “)
display:inline-block
width (any value other than ” auto “)
height (any value other than ” auto “)
zoom (any value other than ” normal “)
writing-mode:tb-rl
-ms-writing-mode:tb-rl
In Internet Explorer 7
min-width (any value)
min-height (any value)
max-width (any value other than none )
max-height (any value other than none )
elements styled with overflow (any value other than visible )
overflow-x and overflow-y (any value other than visible )
Things to consider
  • zoom and writing-mode are proprietary properties and do not validate.
  • IE 5.0 does not support zoom
  • width and height trigger hasLayout on inline elements only when these properties apply to these elements (ie, IE6 in quirks mode).
  • overflow-x and overflow-y are part of the CSS3 box model module
  • hasLayout is also triggered when the layout-flow is different from the parent layout flow (ie, rtl to ltr )

In Quirks Mode and IE7 Mode (All Versions)

  • When overflow is set to something other than visible, table-cell elements do not establish new block formatting contexts.
  • When overflow is set to visible, table-cell elements establish a new block formatting context.

HTML elements that always have a layout:

In Internet Explorer, these elements have - by default – a layout.

  • <body> (as well as <html> in Strict mode)
  • <table> , <tr> , <th> , <td>
  • <img>
  • <hr>
  • <input> , <button> , <select> , <textarea> , <fieldset> , <legend>
  • <iframe> , <embed> , <object> , <applet>
  • <marquee>

Wrap up

To reduce the risk of issues between modern browsers and Internet Explorer ( < 8), authors may choose to give a layout to boxes that establish new block formatting contexts. This way the flow is identical, elements escape floats the same way, clear clears the same floats, and margins collapse where expected. Also, authors must pay attention when styling boxes using hasLayout triggers (ie, width ) as such styling may require making that element a new block formatting context as well.

Outras leituras

Implicações

Demos and testcases

hasLayout articles

Special thanks to Philippe Wittenbergh and Bruno Fassino for finding spec references when one needs them and to Ingo Chao for giving us the best resource on having layout .

Encontrar conversas: bloglines | technorati

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

YUI: Open Hours, Fri May 21st

May 19, 2010 at 10:30 am by Luke Smith | In Development | 2 Comments

It's a new week, and time for another YUI: Open Hours !

This week, we'll be joined by the inimitable Dav Glass , author of (among other things) YUI's Rich Text Editor and Drag and Drop utility , and the primary architect behind yuilibrary.com and the Gallery itself. He'll be discussing the YUI 3 Gallery project — where it's going, how to contribute — and answer any questions about it, about the site, or really about anything else while we have him on the line.

After that, we'll jump into our main event, which will be a “Gallery widget sampler”. We have a number of module authors joining us this week, including

They'll introduce their module, give an example or two, go over their API, and discuss their experience creating it. Besides just being a nice introduction to additional components available to YUI 3 users, it should provide a good platform to talk about widget API best practices and help give a sense of some of the decisions that are made during widget creation.

Thanks again to Caridy Patiño for joining us last week and reviewing his Accordion Node plugin and Dispatcher modules. We'll have more topics in the future about creating Node plugins and the reasons why the plugin approach or the widget approach might be a better fit for your needs. And thanks to Matt Sweeney (author of YUI's Node class and selector engine) for dropping in as a surprise guest as well.

The time will be the same as before, 10am – 12pm PDT and the connection details are also the same:

  1. Dial in to 1-888-371-8922 (non-US participants, email me for a local number)
  2. Enter the attendee code 4718 8953#
  3. Join the screen sharing session (this will prompt you to install the Adobe Connect plugin if this is your first time using it)

And as always, you can keep up to date with the upcoming schedule and topics by following @yuilibrary on Twitter or subscribing to the YUI Event Calendar .

Espero ver você lá!

Encontrar conversas: bloglines | technorati

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

Página Seguinte »
Hospedado por Yahoo!

Copyright © 2006-2012 Yahoo! Inc. Todos os direitos reservados. Política de Privacidade - Termos de Serviço

Alimentado por WordPress em Yahoo! Web Hosting .