Yahoo! User Interface Blog (YUIBlog)

YUI 3.3.0 Preview Release 3

Dicembre 22, 2010 at 12:26 di Eric Miraglia | In Development | 7 commenti

A YUIConf nel mese di novembre abbiamo pubblicato una preview di YUI 3.3.0, la nostra prossima major release del codeline 3 YUI . Siamo ora alla nostra terza versione di anteprima, e se avete un po 'di tempo durante le vacanze invernali per aiutarci a calci le gomme che piacerebbe per voi per dare un giro. È possibile utilizzare il seme YUI 3.3.0pr1 file dal CDN per iniziare, scaricare la distribuzione da YUILibrary.com , o controllare la distribuzione 3.3.0pr3 ospitato su YUIBlog (nota: le prestazioni sono piuttosto lento su YUIBlog a causa della mancanza di combo-trattamento; il resto ha assicurato che i vostri CDN-driven implementazioni sarà generalmente più veloce di corrispondenti 3.2.0 utilizzo).

Alcune delle cose nuove da cercare in questa versione:

• nuovissimo automatico (beta)
• tutti i nuovi grafici (beta) , alimentati da SVG e VML, Tela
• all-new DataTable (beta) , l'inizio di un aggiornamento più modulare dalla famosa YUI 2 componenti
• controllo Dial nuova (beta) , un innovativo assumere un controllo intervallo finito o il cursore creato da Yahoo! stilista Jeff Conniff
• nuovissima utility Resize (beta) , fornito da Eduardo Lundgren di Liferay, coautore con Nate Cavanaugh della YUI 3 basati AlloyUI estensioni disponibili nella Gallery 3 YUI . (Si possono incontrare Eduardo e Nate in questo vortice AlloyUI visita sparato YUIConf 2010 .)

C'è molto di più per amore di YUI 3.3.0, e ci sarà la condivisione di informazioni come la data si avvicina GA. Al momento, stiamo puntando per una finestra di rilascio nella seconda settimana di gennaio. Saremo lieti di ricevere feedback su l'anteprima nel forum YUI e nel database biglietto se si trova questioni di interesse quando si testare la propria implementazione della nuova release.

Trova le conversazioni: bloglines | technorati

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

YUILibrary.com Giù per la manutenzione (aggiornamento: back up ora)

21 dicembre 2010 alle 09:08 pm YUI Team | In Sviluppo | Commenti disabilitati

Aggiornamento 2010/12/21 12:32: Eseguire il backup e la gestione - di farci sapere se si vede tutti i problemi.

Abbiamo preso YUILibrary.com giù questa mattina per la manutenzione. Ci aspettiamo che questo lavoro per durare 4-6 ore. Ci scusiamo per il disagio e cercheremo di mantenere i tempi di inattività più breve possibile.

Se avete domande urgenti di sostegno nel frattempo, si consideri l'abbandono da parte del canale # YUI su Freenode.net, dove spesso troverete decine di YUI membri della comunità aiutano a vicenda.

YUIBlog e @ YUILibrary verrà eseguito gli aggiornamenti quando il sito è tornato up.

Trova le conversazioni: bloglines | technorati

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

YUI 2.9.0 Aggiornamento del rilascio

Dicembre 17, 2010 at 13:50 di Jenny Donnelly | In Development | 9 commenti

La prossima settimana il team di YUI inizierà a pianificare per il rilascio 2.9.0 per essere spediti nella seconda metà del Q1 2011. YUI 2.9.0 sarà l'ultima grande dot-release della codeline 2.x, e la squadra sarà aggressivo rivedere tutti i ticket aperti contro il progetto 2 YUI e sia assegnando loro di essere una parte della versione 2.9.0, chiudendo come "non risolverà", o lo spostamento al progetto 3 YUI.

La realtà dei vincoli di tempo e di risorse ci costringe a concentrarsi sugli elementi più importanti che metteranno a disposizione di chiusura di YUI 2.x e ci permettono di raddoppiare i nostri sforzi sullo sviluppo 3.x. Ecco alcuni dei criteri che useremo per guidarci nel decidere cosa deve essere incluso nella release 2.9.0:

• Problemi che incidono negativamente casi d'uso di base.
• Emergenti questioni relative alla nuova release del browser sulla A-grade matrice.
• Miglioramenti e nuove funzionalità saranno de-la priorità per YUI 2 e preso in considerazione per YUI 3.

Il passaggio del team di YUI in via di sviluppo due codeline a concentrarsi esclusivamente su YUI 3 non significa la fine del progetto 2 YUI. Tutti i presenti e future YUI 2 versioni continueranno ad essere ospitato sul CDN Yahoo!, il codebase YUI 2 continuerà ad essere ospitato in GitHub, e ci piacerebbe esplorare community-based manutenzione di YUI 2 in futuro.

Mentre continuiamo il nostro processo di pianificazione, saremo di fine-tuning il nostro programma, alla ricerca di un feedback da parte della comunità, e comunicando gli aggiornamenti sullo stato di avanzamento per tutto il ciclo di rilascio.

Trova le conversazioni: bloglines | technorati

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

Modalità Strict Is Coming To Town

Dicembre 14, 2010 at 14:12 di Douglas Crockford | In Development | 20 commenti

Questo è il tempo e la stagione in cui la gente di tutto il mondo dimenticare le loro differenze e si incontrano in pace e comunione per celebrare il primo anniversario dell'approvazione da parte della ECMA dell'Assemblea Generale della Programmazione della lingua standard ECMAScript, quinta edizione. La caratteristica più importante ES5 è la nuova modalità Strict. Modalità Strict è un opt-in mode che le riparazioni o rimuove alcune delle caratteristiche più problematici del linguaggio.

Di specificare la modalità Strict

Ci sono due modi per richiedere modalità rigorosa. Il primo è quello di inserire questo pragma

  "Use strict"; 

all'inizio di un file o unità di compilazione. Deve apparire prima tutte le altre istruzioni, ma può essere preceduto da uno spazio e commenti. Ha la forma di una dichiarazione inutile stringa letterale, in modo che venga ignorato da ES3 sistemi. Ciò significa che è possibile scrivere ES5/strict programmi eseguibili anche sui browser più vecchi. Rigoroso codice può anche interagire con non-strict (o sciatta) codice, in modo funzioni rigorosi possibile chiamare le funzioni sciatta, e le funzioni sloppy possibile chiamare le funzioni rigorose. Questo elevato livello di compatibilità rende l'adozione della modalità rigorosa facile.

Tutto il codice nel file o unità di compilazione con il "use strict"; preambolo saranno trattati come codice rigoroso. C'è un problema, però. Considerazioni sulle prestazioni attualmente ci costringono per concatenare file JavaScript molti insieme per evitare ritardi HTTP cumulativi. Se un file con un "use strict"; preambolo ha il codice sciatta aggiunto ad esso, il codice sciatto verrà elaborato come rigoroso e probabilmente fallirà. C'è una regola semplice: Non mischiare rigoroso e scrupoloso nello stesso file, ma abbiamo già visto alcuni siti web famosi ottenere questo torto.

Il secondo modo è quello di inserire il pragma è come prima istruzione di una funzione. Che dichiara che l'intera funzione sarà rigorosa, comprese le funzioni che sono nidificati all'interno di esso. Rigore la funzione aspetti campo di applicazione, il codice in modo rigoroso e scrupoloso del codice possono essere mescolati nello stesso file. Questa seconda forma funziona molto bene con il modello del modulo e delle sue molte varianti. La seconda forma è preferibile perché evita il pericolo concatenamento.

  (Function () {
    "Use strict";
    / / Questa funzione è rigido ...
 } ());

 (Function () {
    / / Ma questa funzione è sciatta ...
 } ()); 

Portata

Storicamente, JavaScript è stato confuso su come funzioni sono limitate. A volte sembrano essere staticamente ambito, ma alcune caratteristiche li rendono si comportano come se fossero in modo dinamico ambito. Questo è motivo di confusione, rendendo i programmi difficili da leggere e capire. Misunderstanding causa bug. È anche un problema per le prestazioni. Static scoping permetterebbe variabile vincolante per accadere in fase di compilazione, ma l'esigenza di scope dinamico significa che l'associazione deve essere rinviata al runtime, che viene fornito con una penalizzazione delle prestazioni significativo.

Modalità Strict richiede che tutti variabile vincolante essere fatto in modo statico. Ciò significa che le caratteristiche che in precedenza richiedevano binding dinamico deve essere eliminato o modificato. In particolare, l' istruzione with viene eliminato, e la eval capacità funzione di manomettere l'ambiente della sua chiamante è fortemente limitata.

Uno dei vantaggi di rigido codice è che strumenti come YUI Compressor può fare un lavoro migliore quando l'elaborazione.

Impliciti variabili globali

JavaScript ha comportato variabili globali. Se non si dichiara esplicitamente una variabile, una variabile globale è implicitamente dichiarato per voi. Questo facilita la programmazione per i principianti perché possono trascurare alcune delle loro attività di manutenzione di base. Ma rende la gestione di grandi programmi molto più difficile e si degrada in modo significativo l'affidabilità. Quindi, in modalità rigorosa, implicite variabili globali non vengono più create. È necessario dichiarare in modo esplicito tutte le variabili.

Perdita globale

Ci sono una serie di situazioni che potrebbero causare this di essere vincolato all'oggetto globale. Per esempio, se si dimentica di fornire il new prefisso quando si chiama una funzione di costruzione, il costruttore è this sarà vincolato in modo imprevisto all'oggetto globale, così invece di inizializzare un nuovo oggetto, che sarà invece in silenzio manomissione con le variabili globali. In queste situazioni, modalità rigorosa sarà invece legare this al undefined , che farà sì che il costruttore per un'eccezione, invece, consentendo l'errore di essere rilevato molto prima.

Il mancato Noisy

JavaScript ha sempre avuto proprietà di sola lettura, ma non si poteva crearle da soli fino ES5 di Object.createProperty funzione esposta questa capacità. Se si è tentato di assegnare un valore a una proprietà di sola lettura, non riuscirebbe in silenzio. L'assegnazione non cambierebbe il valore della proprietà, ma il vostro programma si procede come se avesse. Si tratta di un pericolo che può causare l'integrità dei programmi per andare in uno stato incoerente. In modalità rigorosa, il tentativo di modificare una proprietà di sola lettura genera un'eccezione.

Octal

Il (o base 8) rappresentazione ottale dei numeri è stata estremamente utile quando si fa macchina livello di programmazione su macchine la cui parola dimensioni sono un multiplo di 3. Avevi bisogno ottale quando si lavora con il mainframe CDC 6600, che aveva una dimensione di parola di 60 bit. Se si potesse leggere ottale, si poteva guardare una parola a 20 cifre. Due cifre rappresentato il codice op, e uno individuato una cifra di 8 registri. Durante il lento passaggio dai codici della macchina per linguaggi di alto livello, è stato pensato per essere utile prevedere forme ottali nei linguaggi di programmazione.

In C, una rappresentazione estremamente sfortunato octalness è stato selezionato: zero iniziale. Quindi, in C, 0100 significa 64 non, 100, e 08 è un errore non, 8. Ancor più sfortunatamente, questo anacronismo è stato copiato in quasi tutte le lingue moderne, tra cui JavaScript, dove viene utilizzato solo per creare gli errori. Non ha altro scopo. Quindi, in modalità rigorosa, ottali forme non sono più consentite.

Et cetera

Le arguments di matrice pseudo diventa un po 'più array-come in ES5. In modalità rigorosa, perde la sua callee e caller proprietà. Questo permette di passare i vostri arguments di codice non attendibile senza rinunciare a un sacco di contesto confidenziale. Inoltre, la arguments proprietà delle funzioni viene eliminata.

In modalità rigorosa, duplicare chiavi in ​​un valore letterale di funzione produrrà un errore di sintassi. Una funzione non può avere due parametri con lo stesso nome. Una funzione non può avere una variabile con lo stesso nome di uno dei suoi parametri. Una funzione non può delete sue variabili. Un tentativo di delete un non configurabile oggi proprietà genera un'eccezione. Valori di base non sono implicitamente avvolti.

Se il programma passa JSLint , allora probabilmente funzionerà anche in modalità rigorosa.

E 'ancora un mondo imperfetto

Ci sono ancora problemi in JavaScript che strict mode non riesce a fronteggiare. Ad esempio, punto e virgola inserimento è ancora un pericolo, e 0,1 + 0,2 non è ancora uguale a 0,3. La correzione di questi problemi dovrà aspettare per le edizioni future.

Perché Matters modalità Strict

Oltre agli ovvi benefici per l'affidabilità e la leggibilità del programma, in modalità rigorosa sta aiutando a risolvere il problema Mashup. Vogliamo essere in grado di invitare codice di terze parti sulle nostre pagine per fare cose utili per noi e per i nostri utenti, senza dare il codice della licenza per conquistare il browser o di travisare se stesso per l'utente o sui nostri server. Abbiamo bisogno di vincolare il codice di terze parti. Sistemi come Caja Google farlo, ma a un costo significativo in termini di prestazioni e disagi. Preferiti AdSafe fa anche questo sistema, ma a costo di eliminare this e [] indicizzazione di dalla lingua, che può rendere difficile l'adozione. Modalità Strict ci permette di rendere il codice di terze parti con la convenienza e le prestazioni del AdSafe e l'espressività di Caja. Questo sarà estremamente importante in quanto i nostri siti diventano più complessi e più connesso.

Strict mode non risolve il problema XSS. La soluzione a questo problema dipende dal W3C prendono qualche azione positiva .

ES5/strict è ora in anteprime, e sarà presto equipaggiamenti di serie in tutti i browser compatibili con gli standard in tutto il mondo.

Trova le conversazioni: bloglines | technorati

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

La proprietà CSS Position

14 Dicembre, 2010 alle 7:35 pm da Thierry Koblentz | In CSS 101 , i design e sviluppo | 6 commenti

Questa proprietà si applica a tutti gli elementi. Ha cinque possibili valori:

• static
• relative
• absolute
• fixed
• inherit

position: static

Dalla sezione 9 modello di formattazione visuale :

Il box è una scatola normale, di cui secondo il normale flusso . I top , right , bottom e left le proprietà non si applicano.

Cose da notare in questa demo

• La seconda casella mostra esattamente dove sarebbe senza la dichiarazione di posizione.
• Il valore dato al top non si applica perché in un contesto 'statico', il valore calcolato di compensazioni box è sempre auto .

Cose da ricordare

• Se la position proprietà di un elemento ha il valore di static , che non è detto elemento ad essere posizionato.
• Poiché static è il valore iniziale (il valore di default), non vi è alcuna necessità di includere tale stile in un blocco di dichiarazione meno che non sia a sovrascrivere un valore diverso.

position: relative

Dalla sezione 9 modello di formattazione visuale :

La posizione della scatola è calcolata secondo il normale flusso (questo è chiamato la posizione in flusso normale ). Poi la scatola è spostato rispetto alla sua posizione normale. Quando una scatola B è posizionato relativamente, la posizione della scatola seguente viene calcolata come se B non è stata compensata.

Cose da notare in questa demo

• Box 'two' è scesa da 300 pixel, ma casella 'tre', nonché i paragrafi seguenti rimase al suo posto. Sembra come se la casella è stato revocato dalla pagina, lasciando la sua impronta alle spalle. Questo perché una finestra di compensazione posizionato relativamente non disturba il flusso.
• Le sovrapposizioni box posizionati in modo relativo i seguenti elementi. Essa mostra davanti altre caselle.

Cose da ricordare

• Valori calcolati sono sempre a sinistra =-destra e dall'alto in = basso. Se la direction del blocco contenitore è ltr , il valore di 'left' vittorie e 'destra' diventa - 'left'. Se direction del blocco contenitore è rtl , 'right' vittorie e 'di sinistra' viene ignorato. Gli autori potrebbero approfittare di come funzionano le cose impostando il valore pari a proprietà opposte.
• A differenza con il modello di 'assoluto', top , right , bottom , e la left proprietà non può allungare, né ridurre le dimensioni del box (che non può cambiare la sua dimensione).

position: absolute

Dalla sezione 9 modello di formattazione visuale :

La posizione del riquadrato (e possibilmente la misura) è specificata con l' top , right , bottom , e la left proprietà. Queste proprietà specificano gli spostamenti rispetto alla scatola del blocco contenitore . Una finestra di posizionamento assoluto viene rimosso dal flusso normale interamente (non ha alcun impatto sui successivi fratelli) e assegnata una posizione rispetto ad un blocco contenitore. Inoltre, anche se posizionati in modo assoluto scatole hanno margini, non crollare con ogni altro margine.

Cose da notare in questa demo

• Poiché nessuna finestra di offset viene specificato, box 'two' non si mosse dalla sua posizione originale, ma se avessimo usato top:0;left:0; per esempio, che la casella sarebbe in alto a sinistra della finestra .
• Layout di saggio, è come box 'due' era stata disegnata con display:none . La scatola è stato rimosso dal flusso.
• Con scatola out 'due' del flusso, cassetta di 'tre' si è spostato contro casella 'uno' (i paragrafi hanno seguito).
• Come tutti gli elementi rimossi dal flusso, cassetta di 'due' è orizzontale termoretraibile.

Cose da ricordare

• Per ogni elemento 'assoluto' o 'fixed' posizionato il valore calcolato per la display è block .
• Per ogni elemento 'assoluto' o 'fixed' posizionato il valore calcolato per float è none .
• A 'blocco contenente' è una casella che stabilisce un contesto di posizionamento. Si è stabilito dal più vicino antenato con una 'posizione' di 'assoluto', 'parente' o 'fixed'. Ciò significa che il riquadrato genitore non può essere il blocco contenitore .
• La posizione predefinita di un box posizionato in modo assoluto, non è sempre lo stesso come se fosse stata disegnata con top: 0; left: 0; (in un contesto LTR). E questo è per due motivi:
  1. Il blocco contenitore per un riquadrato posizionato è stabilito dal più vicino antenato posizionato, se non c'è nessuno, il contenitore di riferimento è l'elemento principale. Il blocco contenente, in cui l'elemento radice la vita è un rettangolo chiamato il blocco contenitore iniziale. Per il supporto continuo, ha le dimensioni della finestra (una finestra o altra area di visualizzazione sullo schermo) ed è ancorato all'origine tela. Questo esempio mostra la finestra posizionata in relazione alla finestra (il blocco di default che contiene).
  2. L'elemento è posizionato in riferimento alla casella imbottitura, non la scatola contenuto né la scatola bordo del blocco contenitore. Questo nuovo esempio mostra dove casella 'due' sarebbe se i bordi della casella di padding non toccare i bordi della finestra contenuto (il blocco che contiene sia body ).
• La dimensione della scatola può essere il risultato della top , right , bottom , e left valori delle proprietà. Per esempi, azzerando tutte le proprietà renderà il tratto casella per corrispondere alle dimensioni della scatola imbottitura del suo blocco contenitore. Vedi azzerando tutti gli offset box (nota: IE6 non allungare il box).
• Per creare una sovrapposizione di maschera che non scorre con il documento (come nel precedente esempio ), utilizzare fixed al posto di absolute o stile body , con position:relative come il blocco di posizionamento iniziale è la viewport (styling html non avrebbe funzionato in IE) . Dato che questo demo overlay mostra.
• position:absolute trigger hasLayout .

La cosa più importante da ricordare

Perché questo schema di posizionamento rimuove box dal flusso, si è ritenuto pratice male usarlo per il layout.

position: fixed

Dalla sezione 9 modello di formattazione visuale :

Posizionamento fisso è una sottocategoria del posizionamento assoluto. L'unica differenza è che per un box posizionato in modo fisso, il blocco contenitore è stabilito dalla finestra . Per i media continui , i riquadrati fissi non si muovono quando il documento viene fatto scorrere. In questo senso, sono simili a immagini di sfondo fisse . Per i media a pagine (dove il contenuto del documento è diviso in una o più pagine discreti), scatole con posizioni fisse sono ripetuti in ogni pagina. Questo è utile per l'immissione, ad esempio, una firma al fondo di ciascuna pagina. Scatole con posizione fissa che sono più grandi rispetto all'area della pagina vengono tagliati. Parti della casella di posizione fissa che non sono visibili nel blocco contenitore iniziale non viene stampato.

Cose da notare in questa demo :

• Dal momento che il posizionamento fisso è una sottocategoria del posizionamento assoluto, tutto ciò che era vero per 'assoluta' è anche vero per 'fixed' (l'elemento shrink-wrap, viene rimosso dal flusso, ecc.)
• La scatola è posizionato in relazione alla finestra, esso non scorre con la pagina.
• In IE 6, la finestra appare come una scatola statica , ma c'è un "funny" workaround per questo.
• Quando si stampa il documento, box 'two' appare su ogni singola pagina.

Cose da ricordare:

• La posizione della scatola è calcolata secondo il modello 'assoluto', ma in aggiunta, la scatola è fissato rispetto a qualche riferimento. In caso di palmare, proiezione, schermo, tty, tv e tipi di supporti, il riquadrato è fisso rispetto alla finestra e non si muove quando viene scrollato.
• I contenuti possono essere inaccessile per gli utenti vedenti se una parte della scatola è al di fuori dell'area di viewport.
• Nel caso del tipo di supporto di stampa, gli autori possono vuole evitare che un elemento di apparire su ogni pagina stampata. Magari usando una regola @ media, come in:

    @ Media print { 
     # Logo {position: static;}
   } 

• Come position:absolute , position:fixed attiverà hasLayout in IE.

posizione: ereditare

Se position:inherit è specificata per un box dato, quindi ci vorrà lo stesso valore calcolato della proprietà per i genitori della scatola.

Si noti che IE 6 e 7 non supportano questa parola chiave, tranne quando viene utilizzato con direction e visibility (si veda il valore della proprietà CSS ereditare ).

Le cose da considerare

Box offset

Essere consapevoli del fatto che, per assoluta e fissi riquadrati posizionati, valori impostati in percentuale top , right , bottom , e la left sono calcolati in base alle dimensioni del blocco che contiene (che non può essere del riquadrato genitore).

'Position' e 'overflow'

Una scatola in stile con overflow:hidden , ritaglierà relativamente elementi posizionati (scatole cinesi), ma non sempre nascondere quelli posizionati in modo assoluto. Questo perché la finestra di genitore non è sempre il blocco contenitore (il più vicino antenato con una 'posizione' di 'assoluto', 'parente' o 'fixed').

In breve, questo significa che gli elementi posizionati in modo assoluto mostrerà al di fuori di una scatola in stile con overflow: hidden meno che il loro blocco contenitore è la stessa scatola o un elemento all'interno della scatola detto. Questa pagina demo mostra come funzionano le cose.

Margini

Gli autori possono utilizzare margini sugli elementi indipendentemente dal loro schema di posizionamento.

Il caso di IE

In IE, 'posizionamento' una scatola può essere una benedizione o una maledizione:

• In IE6, position:relative (with haslayout) può essere utilizzato per prevenire una scatola in stile con margini negativi da essere ritagliato da un contenitore principale (vedere come il posizionamento del box risolve questo problema).
• Posizionamento di un elemento può "disturbare" lo stack come scatole in IE 6 e 7, questo potrebbe stabilire un nuovo contesto di impilamento (vedere un caso di test ).

L'ordine di sovrapposizione e stacking livello

• Secondo la sequenza nel codice sorgente, le scatole vengono posizionati di fronte a carri e scatole nel flusso normale.
• Gli autori possono specificare i livelli di stack tramite la proprietà 'z-index' solo su riquadrati posizionati.
• In IE6 e 7, il semplice fatto di posizionamento di un box in grado di stabilire un contesto di stratificazione (vedi sopra, " il caso di IE ").

I dispositivi mobili

Leggi l'articolo di PPK, il [sesto] valore di posizione , per scoprire perché i produttori di browser mobili non si può davvero sostenere position:fixed .

Ulteriori letture

• Il modello di formattazione visuale
• Posizione (proprietà CSS)
• La posizione dichiarazione

Un'analogia "fantasma" di DrLangbhani:

Un elemento di posizione relativa è sempre disassata rispetto alla sua posizione normale nel flusso. In altre parole, esso viene spostato rispetto a dove sarebbe in circostanze normali, e spostando non influenza la disposizione degli elementi intorno ad esso. E 'come un fantasma che ha lasciato il suo corpo dietro. Un corpo che ha la larghezza e l'altezza e colpisce i suoi dintorni, ma è invisibile. La scatola spettrale è in grado di muoversi, ma è ancora collegato al corpo vecchia che la sua posizione è ancora misurata da esso. Ora, un elemento con posizione assoluta è ancora più facile. Esso non influenza più suoi dintorni affatto (è tirato fuori dal flusso layout). E 'ormai un fantasma vero senza corpo lasciato alle spalle. Per quanto riguarda i suoi elementi di pari livello sono interessati è come se non esiste più. Per ottenere la sua posizione, guardare attraverso ciascuno dei suoi elementi principali fino a trovare uno con entrambe le posizioni: relative, [position: fixed,] o position: absolute. Tale elemento servirà come punto di riferimento. Solo se non si trova un elemento "posizionato" verrà compensata dal documento.

Trova le conversazioni: bloglines | technorati

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

Nella Galleria 3 YUI: Il modulo Carousel

13 dicembre 2010 alle 11:53 am da Gopal Venkatesan e Fabian Frank | In Development e YUI 3 galleria | 16 commenti

Che cosa è una giostra?

Un controllo Carousel fornisce un widget per la navigazione tra un insieme di oggetti come disposti verticalmente o orizzontalmente in una regione pagina sovraccarico. La metafora del "carosello" deriva da un'analogia di scivolare giostre nei giorni di fotografia a pellicola, il controllo Carousel in grado di mantenere fedeltà a questa metafora, consentendo un continuo, circolare di navigazione attraverso tutti i blocchi contenuti.

Il Carosello è parte di una famiglia di widget che permettono di "sovraccarico" uno spazio sulla pagina, fornendo più contenuti per quello spazio che si inserisce all'interno le sue dimensioni, fornendo un facile meccanismo intuitivo per l'utente a scoprire e navigare il contenuto aggiuntivo . Fisarmoniche, Spartiti, Alberi e ScrollViews sono altri esempi di questo genere.

Perché ancora un altro controllo Carousel?

YUI 3 ha bisogno di un robusto, ricco di funzionalità Carousel (come abbiamo fatto in due YUI ). L'obiettivo del progetto per il Carousel è stato quello di rendere più nitidi e affidabili e aggiungere configurazioni aggiuntive tramite plugin, approfittando della YUI 3 ' s supporto intrinseco per la modularità di preservare la leggerezza e la velocità.

YUI 3 Widget Framework

Uno dei maggiori vantaggi di scrivere widget personalizzati utilizzando YUI 3 è il framework Widget (più sul framework Widget: guida per l'utente , in modo approfondito video introduttivo ). Confrontando il Carousel in YUI 2.8.2 al mio YUI 3 Carousel Galleria , il YUI versione 3 è magra ed elegante. Questo perché la maggior parte del lavoro rispetto a fornire la base che fornisce insieme comune di attributi widget, un ciclo di vita disciplinato, supporto progressive enhancement, ecc venire con la classe Widget.

Il framework Widget YUI 3 fornisce anche un modello coerente MVC che promuove ogni widget di adottare metodi di separazione di Stato contro i metodi di aggiornamento dell'interfaccia utente. Questo rende il codice molto pulito e gestibile. In realtà questo è uno dei fattori importanti per cui la YUI 3 Carousel è migliore rispetto al suo precedente YUI 2-based cugino.

Il 3 Plugin YUI modello consente agli sviluppatori di aggiungere nuove funzionalità o modificare il comportamento esistente agli oggetti. Questo consente di aggiungere funzionalità aggiuntive sulla parte superiore del Carousel di tirare in modo dinamico attraverso gli elementi Ajax, ecc Quindi, il YUI 3 Carousel non ha codice di animazione in cotto, ma invece ho creato un plugin che aggiunge il supporto di animazione per i casi in cui è necessario . Ciò contribuisce a mantenere il componente molto leggero.

A Carousel Galleria per il proprio sito web

Dopo aver letto su ciò che una giostra e come può aiutare a migliorare il vostro sito web, speriamo, a sentirsi desiderosi di sporcarsi le mani. Non preoccupatevi, con il nostro YUI estensione di 3 Galleria Carousel, attuando una giostra sul tuo sito web è facile come fornire un elenco puntato in HTML. Questo non è solo un passo di vendite - è così che abbiamo recentemente integrato un carosello Galleria nella ricerca Yahoo! Sports pagina dei risultati.

Un esempio semplice

Cominciamo con un semplice esempio che coprirà quasi tutto quello che dovete sapere. Il modo più semplice per poter utilizzare la nuova galleria Carousel è quello di far YUI 3 automagicamente caricarlo da rete di contenuti di Yahoo di consegna. Ricordando ciò che è una giostra, un elenco di voci, creiamo una lista in HTML. Includiamo la lista in un div, che permette alla nostra JavaScript di trovare facilmente e lavorare con esso. Se hai già alcuni dati che è rappresentata in una lista simile modo nel markup, si potrebbe anche solo mettere il div carosello intorno ad esso e testare la vostra fortuna! E 'molto importante dire che, anche se stiamo usando un esempio immagine qui, è possibile utilizzare Carousel Galleria per tutto quello che vuoi!

  <div class="carousel" id="container">
   <ol>
     <li> <img src="img/c1.jpg"> </ li>
     <li> <img src="img/c2.jpg"> </ li>
     <li> <img src="img/c3.jpg"> </ li>
     <li> <img src="img/c4.jpg"> </ li>
     <li> <img src="img/c5.jpg"> </ li>
     </ Ol>
 </ Div> 

Ora che abbiamo i nostri dati con cui lavorare, vogliamo migliorare il look mostrando tutti e cinque gli elementi che utilizzano il widget Carousel. Supponendo che si sta già utilizzando YUI 3 questo è un compito semplice. L'unica cosa che forse non avete mai visto prima, a seconda di quanto in profondità si è scavato in YUI 3 e la Galleria in passato, è che stiamo specificando una versione Galleria esplicitamente. Questo è necessario perché stiamo usando un widget nuovo di zecca, che non è compreso nella Galleria build loader YUI cerca di caricare da default. Tuttavia, come YUI e YUI Galleria mature, questo non sarà più necessario in futuro, quando il valore predefinito numero di build viene aumentato.

  YUI ({gallery: 'gallery-2010/10/20-19-33'})
  . Uso ("galleria-carosello", "galleria-carosello-Anim", "sostituto", function (Y) {
   var = new carosello Y.Carousel ({boundingBox: "# container",
    contentBox: "# container> olo"});
   carousel.plug (Y.CarouselAnimPlugin, {animazione: {speed: 0.7}});
   carousel.render ();
 }); 

(A proposito, se siete interessati a ottenere roba nuova di zecca si può visitare la Galleria YUI 3 repository su GitHub o forcella Gopal , dove sviluppa Carousel. Se si trova un bug, siamo sempre felici di saperlo.)

Tornando al nostro esempio ... YUI ci vorrà da qui. Il caricatore tira automaticamente Galleria Carousel e le sue dipendenze dalla rete di contenuti di Yahoo di consegna. Dopo di che, il carosello viene inizializzato e visualizzato. L'utente può quindi fare clic sulla freccia sinistra o destra per scorrere. Vi prego di scusarmi per aver portato in una linea di inutili complessità, ma non ho potuto resistere. Ho usato Y.CarouselAnimPlugin per far scorrere la nostra giostra senza problemi da una pagina all'altra invece di visualizzare la pagina successiva all'istante. Sentitevi liberi di giocare con il parametro della velocità se lo si desidera.

Come potete vedere dallo screenshot sopra, il Carousel è attivo e funzionante. Tuttavia, la CSS non potrebbe adattarsi molto bene al resto della pagina. Questo ci conduce alla nostra prossima sezione, dove parleremo di come personalizzare Carousel Gallery.

Personalizzazione Galleria Carousel

Ora che avete la vostra Carousel installato e funzionante e ha individuato un caso d'uso per il tuo sito, si spera, desidera integrare senza soluzione di continuità. Come accennato in precedenza, lo abbiamo fatto per la nostra ricerca Sports pagina dei risultati. Se si vuole aumentare il numero di elementi visibili, ad esempio da tre a quattro, è possibile farlo modificando la linea che crea un'istanza Carousel.

  var = new carosello Y.Carousel ({boundingBox: "# container",
  contentBox: "# container> olo", numVisible: 4}); 

Ancora non è abbastanza buono? Sì, giusto. Fortunatamente CSS ci permette di aggiungere le nostre definizioni di stile proprie e anche sovrascrivere quelli iniziali senza toccare alcun CSS esistente. Quindi il primo passo sarà probabilmente quello di eliminare le frontiere, perché sono abbastanza invadente. Basta aggiungere il seguente CSS per l'intestazione di pagina.

  . YUI {3-carosello
   bordo: nessuno importante;
 }
 . YUI 3-giostra-nav {
   fondo: nessuno importante;
 }
 . Carosello ol li {
   bordo: nessuno importante;
 } 

Ora, che sembra migliore. Ho anche usato un margine negativo per ridurre il divario tra la mia Carousel e la rubrica. Tuttavia, non siamo ancora del tutto lì. Suppongo che anche voi volete utilizzare i pulsanti personalizzati, che si integrano perfettamente in qualsiasi layout di pagina. Per questo esempio useremo gli stessi tasti che vengono utilizzati anche sulle pagine di ricerca di Yahoo risultato. Ciò richiede un po 'di più, ma ancora semplice, CSS.

  . YUI 3-giostra-button {
   fondo: url ("sprite_button.png") no-repeat scroll 0 0 trasparente importante;
   height: 20px importante, larghezza! 28px importante;
 }
 . YUI 3-giostra-nav-item {
   fondo: url ("sprite_button.png") no-repeat scroll 0 0 trasparente importante;
   ! background-position:-133px 0 importante;
 }
 . YUI 3-giostra-first-button {
   ! background-position: 0-90px importante;
   margin-right: 35px importante;
 }
 . YUI 3-giostra-first-button-disabled {
   ! background-position: 0-60px importante;
   margin-right: 35px importante;
 }
 . YUI 3-giostra-next-button {
   ! background-position: 0-30px importante;
 }
 . YUI 3-giostra-button-disabled {
   background-position: 0 0 importante;!
 }
 . YUI 3-giostra-nav-item {selezionata
   ! background-position:-121px 0 importante;
 } 

Lasceremo a quella di oggi e spero ti senti pronto per iniziare. Almeno questo era tutto ciò che abbiamo bisogno. Tuttavia, a seconda della grandezza del vostro sito e come si è interessato nella sua esecuzione, ci sono pensieri generali sul caricamento di qualcosa da un terzo Content Delivery Network partito che si applicano anche qui. Ad esempio, Sidnei da Silva disposte alcune interessanti riflessioni in un post sul blog all'inizio di questo mese. Saremo lieti di fornire un How To che spiega come un widget YUI e le sue dipendenze possono essere spostati al tuo sito web o rete di distribuzione anche il contenuto, in modo che siano in grado di mantenere il numero di richieste HTTP al livello più basso possibile. Fateci sapere se siete interessati, saremo lieti i vostri commenti!

Più da esplorare nella Galleria

La squadra eccellente di Eduardo Lundgren e Nate Cavanaugh di Liferay hanno una componente Carousel nella Galleria e - certamente la pena di verificare se siete nel mercato per questo tipo di controllo.

Trova le conversazioni: bloglines | technorati

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

YUI Theater - Ryan Grove: "Introducing YUI 3 Completamento automatico" (42 min.)

10 Dicembre, 2010 alle 5:55 am da Eric Miraglia | In YUI Theater | Commenti disabilitati

In questo discorso da YUIConf 2010 , YUI 3 AutoComplete autore Ryan Grove ( @ yaypie ) ti porta in un tour di alcuni dei molti modelli completamento automatico reso possibile da questo componente (che è in arrivo nel breve-to-be-released YUI 3,3 0,0) e fornisce un tuffo profondo nel suo nuovo e potente YQL integrazione, filtraggio, e capacità di evidenziazione. (Nota: Se vi piace questo discorso, si potrebbe voler controllare altro discorso eccellente Ryan a partire da quest'anno, " Il raggiungimento di prestazioni Zen con YUI 3 . ")

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 .

• Scaricare video HD (480p ~ 297MB)
• Scarica il video (m4v)
• Scarica le diapositive

Altri recenti YUI Theater Video:

• Paul Donnelly e Nagesh Susarla: YQL + YUI: costruzione End-to-end - Durante lo sviluppo di widget, non è come utilizzare i dati YQL che viene come una domanda, ma piuttosto come accedervi. In questo YUIConf sessione 2010, YQL ingegneri Paul Donnelly e Nagesh Susarla riesame di iniziare la vostra ricerca nel YQL console, l'accesso ai dati YQL attraverso i vari endpoint, e passando attraverso gli strati YQL di autenticazione diversi.
• Eric Ferraiuolo: TipTheWeb.org: Heavy Duty 3 e YUI YQL - In questa sessione YUIConf dal 2010, cofondatore e TipTheWeb YUI contributor Eric Ferraiuolo discute la creazione di un progetto di scala codebase con 3 YUI, YUI 3 Galleria e YQL.
• Burke Reid: Yeti: Interfaccia semplice YUI Testing - Test di cross-browser applicazioni web è stato troppo difficile per troppo tempo: Stai ricaricare manualmente browser o alle prese con complicati software di automazione. In questa sessione da YUIConf 2010, YUI ingegnere Burke Reid parla di come YUI Yeti progetto contribuisce a risolvere questi problemi. Reid discute quando è necessario utilizzare test automatici per il codice frontend, come Yeti lavora con YUI test, come impostare cross-browser testing in pochi minuti e in che modo il team Yeti YUI utilizza per spedire un prodotto migliore.
• Douglas Crockford: Progetto Futuro - Yahoo! JavaScript architetto Douglas Crockford riflette sulla vita di Walt Disney, che sognava di creare una 'città del futuro' in Florida come parte del progetto che è diventato Disney World. (Questa non è una sessione tecnica, ma piuttosto uno sui sogni e le grandi lezioni di vita che possiamo trarre da loro.)
• Tom Hughes-Croucher: Come smettere di scrivere codice Spaghetti - In questa sessione da YUIConf 2010, Yahoo! engineer Tom Hughes-Croucher esplora diversi stili di codifica per event-driven, non-blocking server-side JavaScript e quali sono gli stili di maggior successo.

Contenuti CC / Usato per gentile concessione:

• http://www.flickr.com/photos/franksvalli/5166422476/~~V
• http://www.flickr.com/photos/franksvalli/5165821437/~~V

Iscrizione a YUI Theater:

• YUI Theater RSS feed
• YUI Theater su iTunes

Trova le conversazioni: bloglines | technorati

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