2010 »Maggio» Yahoo! User Interface Blog (YUIBlog)

Un'introduzione all'utilizzo di YUI 3 in applicazioni off-line

May 27, 2010 at 01:53 di Alexander Kessinger | In Development | 9 commenti

Circa l'autore: Alex Kessinger lavora come front-end ingegnere di Yahoo! passato a lavorare come front-end, gli piace lavorare l'intero stack. Passa anche un sacco di tempo a leggere, curatela, e la scrittura su Internet, social media, siti web e costruzione. Potete trovare tutto questo sul suo sito web alexkessinger.net . Potete anche trovarlo su twitter @ voidfiles .

Potrei dire che HTML5 sta costruendo a vapore, ma che il tempo è passato: HTML5 è qui. Mobile è già enorme, WebKit sta crescendo rapidamente, e il numero di persone che hanno un browser che supporti HTML5 sul loro telefono cellulare e / o portatile nel corso dei prossimi anni creerà una "nuova normalità" in cui le capacità sono lo standard HTML5.

Una delle caratteristiche impressionanti di HTML5 è la cache delle applicazioni , siti web che dà la possibilità di dire al browser quali file di cache e di utilizzare i file memorizzati nella cache quando il browser non dispone di una connessione di rete. È possibile utilizzare la cache delle applicazioni per garantire che un utente sarà in grado di accedere almeno una parte della vostra applicazione, mentre lui è in linea. In caso di dispositivi come i telefoni o le compresse (o anche vecchi dispositivi come computer portatili), ciò potrebbe significare che gli utenti siano in grado di utilizzare la vostra applicazione a bordo di un aereo. Nel frattempo, si arriva a continuare a costruire la tua applicazione con le tecnologie web, piuttosto che imparare Objective-C.

Oltre alla cache delle applicazioni , ci sono anche altre API disponibili in HTML5 che consentono agli sviluppatori web gli strumenti per creare esperienze utili in linea. Ci sono due API di memorizzazione persistente disponibile nella maggior parte dei browser più recenti. Uno è una semplice chiave / valore archivio dati, chiamato localStorage . Il secondo è un database SQL . Entrambi possono essere sfruttate mentre l'utente è offline.

Con questi concetti in mente, ho intenzione di esplorare la sempreverde applicazione "To Do list", usandolo come trampolino di lancio per vedere come possiamo sfruttare la cache delle applicazioni e la memorizzazione permanente in un app che si basa su tutto ciò che amo di YUI 3, tra cui la Galleria 3 YUI.

Markup

Markup è sempre un ottimo punto di partenza quando si costruisce tutto ciò che riguarda il web. La scocca di base della nostra pagina 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>

Anche se stiamo costruendo una linea ready-applicazione, seguire la migliore prassi, ma mettendo nella testa CSS, Javascript e subito prima del tag body di chiusura. Anche se la pagina sarà disponibile non in linea, il caricamento della pagina iniziale deve essere reattivo. (Si noti che stiamo usando la doctype incredibilmente semplice HTML5 qui.)

L'applicazione ha bisogno di qualche markup segnaposto:

  <! 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"> da 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"> Add </ a> </ p>
                 </ Form>
             </ Div>
         </ Div>
         <div class="bd">
             <div class="yui-main">
                 <div class="yui-b">
                     <div class="todo_items">
                         <h2> elementi di attività </ h2>
                         <ul>
                             class="no_items"> <li Recupero di elementi di attività ... </ li>
                         </ Ul>
                     </ Div>
                 </ Div>
             </ Div>
         </ Div>
         <div id="debug"> </ div>
         <-! Processo di inizializzazione / / ->
         <script src="yui-min.js"> </ script>
         <script src="base.js"> </ script>
     </ Div>
 </ Body>
 </ Html>

Questo permetterà all'utente di sapere che stiamo pensando di ottenere alcuni dati per loro la prima volta che carica l'applicazione. Essa stabilisce inoltre il nostro palco, una struttura DOM per la nostra Javascript per iniziare a lavorare con.

Una nota sulla progressive enhancement

Non c'è ragione che un'applicazione non può essere costruita con i principi di miglioramento progressivo e ancora reso disponibile per l'utilizzo offline. In questa esplorazione, sto omettendo la complessità che sarebbe coinvolto in PE, al fine di concentrare il più possibile le tecniche necessarie per il supporto offline. Qualcuno potrebbe criticare questo approccio, e sono in sintonia con tale argomento.

Proprietà aggiuntive per la gestione di dispositivi mobili

browser iPhoneOS e Android in grado di gestire la maggior parte delle pagine web senza alcuna attenzione speciale, ma quando si tratta di dispositivi mobili vale la pena di indagare come il contenuto viene spremuto per adattarle al piccolo schermo. Quirksmode non ha uno , ma due articoli di approfondimento sulla finestra che si merita il vostro tempo.

In breve, c'è un tag meta, chiamata viewport. Sembra qualcosa di simile:

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

Lo scopo del tag viewport è quello di aiutare i browser mobili a capire come visualizzare una pagina web molto grande su un piccolo schermo. I dispositivi mobili bisogno di aiuto, perché la maggior parte dei dispositivi di cercare di spremere 700-1100px di contenuti su un 300-500px schermo. Inoltre, quando abbiamo fissato i nostri larghezze al 100%, il browser prende il suo migliore ipotesi a quanto grande dovrebbe essere la pagina web, e poi le scale da quel grande per stare dentro la dimensione del dispositivo.

Per contribuire si può impostare la finestra a questo.

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

Questo dirà il dispositivo per impostare la larghezza della nostra pagina alla larghezza dello schermo del dispositivo. Se ci assicuriamo che la nostra pagina è fluida, allora la nostra pagina riempirà lo schermo sulla maggior parte dei dispositivi mobili. Questo significa anche che se il telefono dispone di una modalità orizzontale la pagina si espanderà fino a riempire lo spazio extra.

Ci sono altre cose che possiamo fare per la finestra pure. Se hai lavorato con i browser mobili, sai che ti permettono di ingrandire. Se si stanno prendendo per tempo per costruire un sito web per riempire l'intero schermo non si può decidere che un utente essere in grado di eseguire lo zoom. Se abbiamo impostato la nostra viewport di essere qualcosa come il seguente, l'utente non sarà in grado di zoomare in avanti o indietro. Su un dispositivo come l'iPhone questo può farlo sentire più nativo. Ma se si esegue questa operazione, assicurarsi che il contenuto della vostra applicazione offre all'utente alcun motivo per voler mai far zoom (ad esempio, testo di piccole dimensioni), altrimenti questo sarà un vincolo usabilità frustrante.

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

La finestra non è uno standard W3C, ma è una convenzione comune. E 'attualmente supportata dai browser WebKit su iPhone e sistemi operativi Android. Fennec , il browser Mozilla mobile, probabilmente anche sostenere questa convenzione.

CSS

Più che mai, usando l'abilità CSS di essere fluido e dinamico è importante. Se si guarda alla vasta gamma di telefoni, tablet e altri schermi di piccole dimensioni, gli sviluppatori di applicazioni devono essere consapevoli che le nostre applicazioni stanno per essere utilizzato su una pletora di dispositivi. Anche se non esiste la bacchetta magica si può agitare per rendere il tutto funziona, per la maggior parte delle applicazioni non è necessario essere pixel perfetta su ogni dispositivo. Solo le migliori pratiche seguenti ci può portare la maggior parte del modo di sostenere il maggior numero di dispositivi.

A partire da impostare la larghezza della nostra applicazione alla sua base in% è un ottimo inizio. Usando gli em per impostare font-dimensioni è anche utile perché ems sono calcolati in base alla pagina web resa. Un'altra cosa che aiuta è fare in modo che la larghezza delle colonne si basa su percentuali pure. Anche le grondaie colonna può essere impostata in em.

Un ottimo punto di partenza, senza dover fare un sacco di lavoro è un framework CSS. YUI Grids CSS 2 è naturalmente uno dei nostri preferiti, e ci aiuta a pensare la nostra pagina in termini di rapporti, anziché statica larghezza blocchi.

Così la costruzione di off YUI Grids CSS 2: ecco il CSS di partenza per la mia app.

  . Todo_items {
     padding-top: 1em;
 }

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

 . ToRight {
      text-align: right;
 }

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

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

Javascript

Next up per la nostra linea di fare applicazione è il JavaScript. Per prima cosa scarica yui_min.js per la document root, e aggiungere al markup come abbiamo sopra. Poi mettere questo nel vostro base.js file:

  YUI (). Utilizzare ('nodo', function (Y) {
     Y.one ("todo_items h2.") SetContent ("Sto volando").;
 });

Inoltre Node, sto anche andando a includere la YUI CSS 3 reset e YUI Grids CSS 2. Ho intenzione di includere un modulo dal YUI 3 Galleria , eccellente Ryan Grove storage Lite , che andrà a capo di tutti i possibili metodi di archiviazione dei dati locali per uno facile da usare API.

  YUI (). Uso ('cssreset', 'yui2-reti', 'Galleria-storage-lite', i 'nodi', function (Y) {

   / / TO-DO LIST CODICE APPLICAZIONE

 });

Nota: io non ho intenzione di immergersi nella to-do list del codice, né in alcune delle tecniche che avevo usare per rendere più semplice eseguire il debug di questo tipo di progetto su dispositivi mobili. Potete trovare tutto questo in github: yui3-todo . All'interno base.js troverete la totalità del app. È anche possibile vedere l'applicazione e l'esecuzione a http://html5.alexkessinger.net/yui/ytodo/ . Qui, ho intenzione di concentrarsi sulle misure necessarie per migliorare questo semplice applicazione con funzionalità offline.

Cache Manifest

Il primo passo per prendere una web app offline è la cache delle applicazioni . La cache delle applicazioni può dire il vostro browser quali file si desidera scaricare e tenere in linea. In questo esempio, so che voglio mantenere la mia JavaScript e il mio offline CSS, così come la pagina HTML principale per l'applicazione. Con questo in mente, il mio manifesto di cache sarà simile a questa:

  CACHE MANIFEST

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

Alcune cose da notare a proposito del manifesto cache.

Si deve iniziare con la linea CACHE MANIFEST .
È necessario servire con un header Content-Type text / cache-manifesto

Se siete su Apache, è possibile aggiungere il seguente frammento di .htaccess per ottenere il giusto tipo di contenuto.

  AddType text / cache-manifesto. Manifest

Con quella in atto, con un qualsiasi file .manifest suffisso sarà servita con il text/cache-manifest Content-Type.

Poi abbiamo bisogno di informare il browser del manifesto cache, per fare questo si aggiunge un attributo alla nostra tag HTML:

  <html manifest="todo.manifest">

Ora, se si va alla pagina in un browser che supporta applicazioni offline probabilmente vedrete una notifica che indica che il sito richiede l'accesso offline.

Offline / Online

Con il manifesto in luogo raccontare il nostro browser quali risorse da memorizzare nella cache, siamo pronti a riflettere su ciò che accade nella modalità versus online in modalità offline. Ora ci sono due "sequenze di avvio", la prima è la sequenza completa online che abbiamo già (e durante la quale le risorse vengono memorizzati nella cache per l'utilizzo offline). Questa sequenza on-line utilizza il CDN Yahoo per caricare i file, ei file sono manipolate in modo combo-abbiamo solo alcune richieste HTTP.

Ma stiamo anche costruendo una procedura di avvio non in linea. Dobbiamo essere in grado di rilevare il fatto che il browser è in linea e quindi inizializzare correttamente YUI ad attingere risorse memorizzate nella cache.

  var = on-line (navigator.onLine)?  true: false;

Ora, abbiamo solo bisogno di scegliere un oggetto di configurazione basata sull'essere offline o online.

  var YUI_ONLINE_CONF = {},
     YUI_OFFLINE_CONF = {
         base: "yui3/build /",
         combinano: 0,
         gruppi: {
             galleria: {
                 base: 'yui3-gallery/build /',
                 modelli: {'galleria': {}}
             },
             yui2: {
                 base: '2 in3/dist/2.8.0/build / ',
                 modelli: {
                     'Yui2-': {
                         configFn: function (me) {
                             if (/-skin | Reset | acquasantiere | griglie | base / .test (me.name)) {
                                 me.type = 'css';
                                 me.path = me.path.replace (/ \ js /,. 'css.');
                                 me.path = me.path.replace (/ \ / yui2-pelle /, '/ 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-reti', 'Galleria-storage-lite', i 'nodi', function (Y) {
     ...
 });

Il YUI_OFFLINE_CONF configurazione potrebbe essere necessario qualche spiegazione. In primo luogo, io sto cambiando la base alla mia document root + yui3/build/ . Ho inviato la distribuzione completa di YUI 3 al mio server perché gli Stati specifiche W3C che la cache non in linea ha una rigorosa politica di sola origine. Tutte le risorse memorizzate nella cache devono provenire dallo stesso dominio come fa il manifesto. Di conseguenza, non posso contare su Yahoo! o Google o qualsiasi altra CDN per servire i miei file - tutti devono essere disponibili per la cache dal mio server.

La parte successiva, combine:0 , dice al loader di YUI combo non automaticamente i file, perché non si dispone di un combo-handler installato sul mio server.

Infine, vorrei menzionare i groups config. Gruppi è una nuova funzionalità in YUI 3.1.1 che permette di definire interi gruppi di file che provengono dallo stesso luogo. È inoltre possibile configurare loro di essere combo'd dalla sorgente. Ho impostato il YUI 3 Galleria qui per caricare da una copia locale ho della yui3-gallery repository su GitHub.

Quando siamo online, possiamo bootstrap dal CDN Yahoo, ma in linea dobbiamo avere copie locali dei file. Questo è facile da fare. È possibile scaricare i file necessari in un file zip grande directory di:

  cd docroot;
 http://yuilibrary.com/downloads/yui3/yui_3.1.0.zip wget;
 decomprimere 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-gallery-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;

Oppure è possibile clonare i repository git da github direttamente se git è installato sulla vostra macchina:

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

Per scopi di testing. Io a volte impostare ONLINE = false e controllare come i miei siti carichi. Se lo fai, e poi visitare la vostra applicazione in un normale browser, si può vedere ogni file che deve essere incluso individualmente. Per compilare correttamente il nostro manifesto cache, è necessario prendere nota di ogni file che viene tirato in, usando qualcosa come Firebug. Poi, nel vostro manifesto della cache si elencare ogni file uno per uno. Sarà simile a questo.

  CACHE MANIFEST
 # Un commento
 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

A questo punto possiamo andare fino in fondo in linea. Se avete un dispositivo Android o iPhoneOS (o qualsiasi browser che supporti HTML5) è ora possibile visitare la vostra pagina web, lasciate terminare il caricamento, e quindi ricaricare la pagina con accesso a Internet del dispositivo disabilitato.

iPhone specifici Goodies

L'iPhone offre allo sviluppatore WebApp la capacità di dare la vostra applicazione po 'di spazio sullo schermo principale, proprio come tutte le altre applicazioni. Si può anche avere l'icona di un lucido e la schermata di avvio, come si avrebbe con una applicazione "nativa". In primo luogo, è necessario seguire le specifiche per l'icona e la schermata di avvio. E poi è possibile aggiungere le seguenti meta tag:

  <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" />

I primi due tag indicano Safari mobile che la pagina web è una WebApp HTML5 e che wan il colore della barra di stato nella parte superiore di colore bianco. Questo rimuoverà anche tutte le cromature intorno alla finestra di navigazione del browser. Le seconde due tag puntare ai file che si desidera utilizzare per l'icona e la schermata di avvio.

Cosa c'è di nuovo

Le specifiche HTML5 è ancora un bersaglio mobile. Tenete gli occhi aperti per nuovi sviluppi. Detto questo, anche oggi vi sono fantastiche nuove funzionalità nei browser moderni. Come si può vedere da questo tutorial, non è difficile prendere una linea di applicazioni web, aumentando notevolmente la sua potenziale utilità. E, quando si va offline, non esitate a prendere YUI 3 con voi, insieme con tutto il potere si è abituati a dalla Galleria 3 YUI e il 2 famiglia widget di YUI.

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

Lavora con YUI come parte di Yahoo! Open Strategy (YOS) Engineering Team

20 maggio 2010 alle 14:06 da Rohit Dube | In Ingegneria front-end a Yahoo | Commenti disabilitati

L'Open Yahoo! Strategy (YOS) Team sta costruendo la prossima generazione di piattaforme aperte. Uno dei nostri prossimi prodotti - Connect - si rivolge a editori terzi e sviluppatori. Connect permette di terze parti di integrarsi facilmente con Yahoo! facendo cadere poche righe di codice Javascript sul loro sito. Inoltre, Connect permette agli utenti di accedere a siti di terze parti che utilizzano i loro ID Yahoo! e trasmettere le loro aggiornamenti di amici e seguaci.

Connect utilizza diverse tecnologie tra cui Yahoo YQL e YUI . In particolare, Connect sfrutta le librerie di base da YUI3 (nodo, io, eventi personalizzati) e l'infrastruttura per fornire un widget di api coerente e cross-browser esperienza. Una volta completamente sviluppato, Connect sarà distribuito a migliaia di siti web ed essere visibili a milioni di consumatori. Si tratta di una interessante opportunità di essere coinvolti in un progetto che avrà portata eccezionale consumatore e requisiti di scalabilità impegnativi.

Il candidato ideale avrà 5 anni + della grande esperienza di sviluppo web, tra cui la familiarità con il browser tecnologie lato client quali Javascript, HTML e CSS e cross-browser problemi di compatibilità, le tecniche di ottimizzazione e di internazionalizzazione. La conoscenza di PHP e di una libreria JavaScript - come YUI - sono obbligatori.

Interessati? Guarda la descrizione completa dell'offerta di lavoro a http://careers.yahoo.com/jdescription.php?oid=29752 e contatto Rohit Dube (rdube AT yahoo-inc.com).

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

YUI Theater - Ryan Dahl: "Introduzione alla NodeJS" (58 min.)

May 20, 2010 at 01:26 di Allen Rabinovich | In Development e YUI Theater | 14 commenti

Due settimane fa, Yahoo! ha ospitato una BayJax meetup dedicato al NodeJS (in quanto il meetup ha coinciso con Cinco de Mayo, abbiamo chiamato 'Cinco de Node'). Ryan Dahl , il creatore di NodeJS, ha tenuto una conferenza sul progetto ed era molto genere a farci registrare la sua presentazione per YUI Theater.

PS Il video si apre con 30 secondi di sguardo verso il Cinco le celebrazioni Mayo a Yahoo!

Se il video qui sotto incorporare non viene visualizzato correttamente nel vostro lettore RSS di scelta, essere sicuri di scegliere attraverso per visualizzare la versione ad alta risoluzione del video su YUI Theater .

Altri recenti YUI Theater Video:

Elia Insua: jsdom: un'implementazione CommonJS del DOM - Elia Insua introduce un server-side attuazione del DOM JavaScript nel 2010 BayJax meetup a Yahoo.
Nicholas Zakas, Stoyan Stefanov, Ross Harmes, Julien Lecomte, Matt Sweeney: High Performance JavaScript - Cinque collaboratori di O'Reilly High Performance JavaScript discuss avanzata JavaScript e DOM scripting ottimizzazioni al 2010 Aprile BayJax meetup a Yahoo.
Douglas Crockford: Lo Stato e futuro di JavaScript - Yahoo! JavaScript Architect Douglas Crockford discute la recente ECMA5 processo di sviluppo e gli sforzi per migliorare la lingua nel futuro.
Dav Glass: Contribuire alla YUI - YUI ingegnere Dav Glass si presenta alla Galleria YUI e passi attraverso il processo di creazione di contributi al progetto YUI.

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

YUI Theater - Elia Insua: "jsdom: un CommonJS Attuazione del DOM" (18 min.)

20 maggio 2010 alle 01:24 da Allen Rabinovich | In Development e YUI Theater | Commenti disabilitati

Elia Insua , uno sviluppatore stella da Arc90 , ha presentato il suo lavoro sulla jsdom alla manifestazione de Cinco nodo BayJax a Yahoo!. Elia è stato presentato da Brooklyn via Skype (quindi ti prego di perdonare il meno che ideale qualità video e audio), e gentilmente ci ha permesso di catturare il suo discorso per YUI Theater.

Altri recenti YUI Theater Video:

Ryan Dahl: Introduzione alla NodeJS - Ryan Dahl, il creatore di NodeJS, introduce il progetto e parla di miglioramenti delle prestazioni e nuova architettura. Il colloquio ha avuto luogo al maggio 2010 BayJax meetup di Yahoo.
Nicholas Zakas, Stoyan Stefanov, Ross Harmes, Julien Lecomte, Matt Sweeney: High Performance JavaScript - Cinque collaboratori di O'Reilly High Performance JavaScript discuss avanzata JavaScript e DOM scripting ottimizzazioni al 2010 Aprile BayJax meetup a Yahoo.
Christian Heilmann: YQL e YUI: Building Blocks per le applicazioni veloci - Il Developer Network di Yahoo! internazionali evangelista Christian Heilmann discute la sua filosofia per la creazione di veloci e potenti, le applicazioni accattivanti utilizzando il Query Language Yahoo (YQL) e Yahoo User Interface Library (YUI) .
Luke Smith: Eventi Evolved - YUI ingegnere Luke Smith fornisce una introduzione profonda al sistema 3 evento YUI compreso il suo sostegno per gli eventi DOM, delega eventi, eventi sintetici ed eventi personalizzati.

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

Attuazione Focus: Phanfare Media Organizer

19 Maggio 2010 alle 13:51 da Eric Miraglia | In In The Wild , le implementazioni YUI | 1 commento

Cory Mintz da Phanfare scritto la scorsa settimana per raccontarci la loro recente lancio di un prodotto, che è fortemente basata su YUI 2.8.0.

Abbiamo appena rilasciato il nostro nuovo organizzatore web di ieri ... E 'una fotografia completa e organizzatore video integrato come applicazione web, utilizzando quasi ogni componente 2 YUI. Pensiamo che offusca il confine tra realtà software desktop e web.
Alcune caratteristiche degne di nota sono:
Utilizzando il Uploader , lasciamo che la gente organizzare e modificare le loro foto come upload.
Con l'aiuto di Drag and Drop e Menu , la griglia di miniature ha tutti i comportamenti del browser di file di un sistema operativo. È possibile trascinare selezionare, trascinare e rilasciare riordinare, selezione multipla con Ctrl e Shift, freccia tra miniature, ecc
Il caricamento dinamico del TreeView , farci carico pigri account utente con 100s degli album dato che sono gerarchico (anni -> Album -> sezione). In questo modo la pagina per un account estremamente grande per caricare velocemente come un piccolo conto.

Mi piace la professionalità pulita del sito e la straordinaria attenzione ai dettagli l'interfaccia utente. Sentitevi liberi di visitare il sito - account di prova sono gratuiti e vengono popolati con gli album di esempio per darvi un'idea di ciò che il sito ha da offrire. Congratulazioni a Cory e la squadra per un lancio fantastico.

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

CSS 101: Contesti di formattazione a blocchi

19 Maggio 2010 alle 11:46 am da Thierry Koblentz | In Development | 10 commenti

Circa l'autore: Thierry Koblentz è un front-end ingegnere di Yahoo!
Egli possiede TJK Progettazione , ez-css.org e css-101.org . Puoi seguire Thierry su Twitter all'indirizzo @ thierrykoblentz .

Un contesto di formattazione a blocchi è una scatola che soddisfa almeno uno dei seguenti:

il valore di "float" non è "none",
il valore utilizzato di "troppo pieno" non è "visibile",
il valore di "display" è "table-cell", "table-caption", o "inline-block",
il valore di "posizione" non è "statico" o "relativo".

Quando si tratta del modello di formattazione visuale (questo è come gli interpreti elaborare la struttura del documento per visivi dei media ), i contesti di formattazione a blocchi sono grandi giocatori. Quindi è fondamentale per gli autori di CSS di avere una solida conoscenza della loro relazione con il flusso, galleggianti, chiaro e margini.

Che cosa le specifiche dicono ...

Come bloccare il flusso contesti di formattazione

Lo schema di posizionamento a cui appartengono i contesti di formattazione a blocchi è normale flusso . Pertanto, il "blocco" di un contesto di formattazione a blocchi è posizionata nel flusso della pagina come ci si aspetterebbe con blocco scatole, formattazione in linea di linea scatole, il posizionamento relativo del blocco o in riga, e il posizionamento di run-in scatole. Semplicemente, fanno parte del flusso pagina.

Che cosa innesca contesti di formattazione a blocchi

Sezione 9.4.1 dice che il seguente stabilirà nuovi contesti di formattazione a blocchi:

galleggianti,
elementi posizionati in modo assoluto,
inline-block,
tabella cellule,
table-didascalie,
elementi di stile con "overflow" (qualsiasi valore diverso da "visibile")

Ma secondo la specifica CSS di livello 3 , un contesto di formattazione a blocchi (uno "root flusso" Speak in CSS3) si crea quando la condizione seguente è soddisfatta:

Il valore della " posizione "non è" statico "o" relativo "(si veda [CSS3POS] ).

Questa definizione significa che position:fixed stabilisce un nuovo contesto di formattazione a blocchi, anche. Questa non è una miss nella sezione 9.4.1, anche se, il posizionamento fisso è una sottocategoria del posizionamento assoluto (9.6.1) e riferimenti nella specifica a un elemento posizionato in modo assoluto (o il suo box) implica che l'elemento della " posizione di proprietà "ha il valore "assoluto" o "fissa".

Si noti che display:table non stabilisce contesti blocchi di formattazione di per sé. Ma perché in grado di generare riquadrati anonimi , uno dei quali (con display:table-cell ), stabilisce un nuovo contesto di formattazione a blocchi. In altre parole, il grilletto è la casella di anonimo non, display:table . Questo è qualcosa che gli autori dovrebbero tenere a mente, perché anche se entrambi gli stili stabilire nuovi contesti di formattazione a blocchi (implicitamente o esplicitamente), clear non funziona lo stesso con display:table come fa con display:table-cell .

Un trigger finale è il fieldset elemento. Stranamente, non c'era nessuna informazione su www.w3.org su questo comportamento fino a quando il HTML5 specifica. Ci sono stati i bug dei browser ( Webkit , Mozilla ) che ha ricordato, ma niente di "ufficiale". In realtà, anche se fieldset stabiliscono nuovi contesti di formattazione a blocchi nella maggior parte dei browser, come da sezione 3.2 (UA conformità), gli autori non avrebbero dovuto darlo per scontato:

CSS 2.1 non definisce a quali proprietà si applicano ai controlli del modulo e telai, o come CSS possono essere utilizzati per lo stile. Gli interpreti possono applicare le proprietà CSS per questi elementi. Gli autori sono raccomandati per il trattamento di supporto come ad esempio sperimentale. Un livello futuro dei CSS può specificare ulteriormente.

Quali contesti di formattazione a blocchi fare

Contesti di formattazione a blocchi contengono carri allegorici a causa del modo in cui il flusso, e per la sezione 9.4.1, impediscono i margini crollano e non si sovrappongono carri allegorici:

In un contesto di formattazione blocco, scatole sono disposti uno dopo l'altro, verticalmente, cominciando dalla parte superiore di un blocco contenitore. La distanza verticale tra due caselle di pari livello è determinata dalle "margine" proprietà. I margini verticali fra riquadrati a blocco adiacenti in un contesto di formattazione a blocchi collasso .
In un contesto di formattazione a blocchi, limite esterno sinistro ciascuna casella tocca il bordo sinistro del blocco contenitore (da destra a sinistra la formattazione, giusto tocco bordi). Questo è vero anche in presenza di carri allegorici (anche se riquadrati di riga di un riquadrato può restringersi a causa dei carri), a meno che il riquadrato stabilisce un nuovo contesto di formattazione a blocco (nel qual caso la scatola stessa può diventare più stretto a causa dei flottanti).

Basta con le specifiche, cosa significa questo nel mondo reale?

Contesti di formattazione a blocchi si comportano più o meno come una qualsiasi finestra di blocco, a parte queste eccezioni importanti:

Contesti di formattazione a blocchi prevenire margine di crollo
I margini verticali fra caselle adiacenti blocco crollo , ma solo se sono nello stesso contesto di formattazione a blocchi. In altre parole, se le caselle adiacenti non appartengono allo stesso contesto di formattazione a blocchi, il loro margine non crollerà.
Esempio:
Questo è un paragrafo all'interno di un DIV con uno sfondo blu, in stile con margin:20px .
Questo è un paragrafo all'interno di un DIV con uno sfondo blu, in stile con margin:20px .
Questo è un paragrafo all'interno di un DIV con uno sfondo blu, è in stile con margin:20px , il DIV genitore è in stile con overflow:hidden;zoom:1 .
Tra le due prime scatole blu di cui sopra, il margine inferiore e superiore del crollo paragrafi (il divario non è uguale a 20 pixel, 40 pixel), ma perché il DIV ultima crea un nuovo contesto di formattazione a blocchi, i margini del terzo comma non collassano , di conseguenza, essi non "sporgono" del contenitore del paragrafo, ma sono invece parte di quel riquadrato a blocco.
Nota: in IE6, senza margini espliciti il DIV non riuscirebbe a racchiudere i margini.
Quando si parla di crollo dei margini, creando un nuovo contesto di formattazione a blocco agisce la stessa applicazione di border o padding all'elemento.
Contesti di formattazione a blocchi contengono galleggianti
Sono sicuro di aver sentito parlare della frase "un float contiene sempre galleggia", o forse sentito parlare di rete fissa ( float quasi tutto ) il metodo. Ma la base di questo è che i carri sono contesti di formattazione a blocchi, quindi un modo migliore per formulare questo per dire che "un contesto di formattazione a blocchi contiene sempre galleggianti".
Esempio:
Questo paragrafo è un float all'interno di un DIV con uno sfondo blu, è in stile con margin:20px
Questo paragrafo è un float all'interno di un DIV con uno sfondo blu, è in stile con margin:20px . Il DIV genitore è in stile con overflow:hidden;zoom:1 .
The first paragraph is a float so it is removed from the flow and its container collapses , hence the background of this container does not show.
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 ).
Esempio:
```
 .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.

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

Iliyan Peychev ( Accordion )
Andrew Bialecki ( Lightbox )
Matt Snider ( Radial Menu )
Jacob Fogg ( Sliding Sidebar )
and hopefully more

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:

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

E come sempre, è possibile tenersi aggiornati con il programma imminente e gli argomenti seguendo @ yuilibrary su Twitter o iscrivendoti al Calendario degli eventi YUI .

Spero di vedervi lì!

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

Pagina successiva »

Markup

Una nota sulla progressive enhancement

Proprietà aggiuntive per la gestione di dispositivi mobili

CSS

Javascript

Cache Manifest

Offline / Online

iPhone specifici Goodies

Cosa c'è di nuovo

Altri recenti YUI Theater Video:

Altri recenti YUI Theater Video:

Che cosa le specifiche dicono ...

Come bloccare il flusso contesti di formattazione

Che cosa innesca contesti di formattazione a blocchi

Quali contesti di formattazione a blocchi fare

Basta con le specifiche, cosa significa questo nel mondo reale?

Contesti di formattazione a blocchi prevenire margine di crollo

Contesti di formattazione a blocchi contengono galleggianti

Block formatting contexts do not overlap floats

hasLayout versus block formatting context

Properties/declarations that give elements a layout

Things to consider

HTML elements that always have a layout:

Wrap up

Further readings

Implications

Demos and testcases

hasLayout articles

YUI Library su Twitter

Tradurre

Sindacato

Messaggi Recenti

YUI Biblioteca

Archives:

Blogroll

Regole del blog

Diventa Yahoo!

Meta: