Yahoo! User Interface Blog (YUIBlog)

CSS Quick Tip: Come prevenire una "goccia float" in IE6

Ottobre 28, 2010 at 1:52 pm da Thierry Koblentz | In CSS 101 e Sviluppo | 4 Comments

Anche se questo comportamento è spesso chiamato un " goccia float "o un" float drop ", la colonna che scende non deve essere un float ... deve solo essere più ampio lo spazio allocato per questo. Si noti che questo è spec ed è un comportamento comune tra i vari browser, se una colonna è "troppo larga", quindi lascerà cadere.

Ciò che rende IE 6 stand fuori è che questo browser non supporta completamente l' width della proprietà (né height per quella materia). Quindi, lascia crescere i contenitori per accogliere il loro contenuto. E 'questa crescita che crea la goccia, perché la casella non può essere contenuto nel suo spazio progettato.

Di solito, i colpevoli sono elementi che non si avvolgono (es. immagini, URL, ecc), ma lo stile dei caratteri (ad esempio, IE e corsivo ) può essere responsabile anche.

Ad esempio, per far cadere sulla colonna di destra YUIBlog in IE 6, tutto quello che dovevo fare è di stile una delle immagini sul binario giusto con una larghezza superiore a 210 pixel. Tale immagine costringe IE 6 per aumentare la larghezza della colonna destra, che quindi non può più adatta accanto alla colonna di sinistra.

Le solite correzioni:

word-wrap: break-word;

Impacco Strings rompendo sul bordo destro della casella.

wbr con wbr:after {content:"\00200B"} per Opera

Il wbr elemento rappresenta un'opportunità di interruzione di riga. Inserimento wbr s stringhe lunghe all'interno del browser permette di aggiungere una interruzione di linea, se necessario.

overflow-x:hidden;

Qualsiasi contenuto più ampio del contenitore è cut-off sul bordo destro della finestra di detto.

Si noti che le due prime soluzioni funzionano solo su stringhe e non impedire che le immagini, ecc espanda il box.

Quando i fix noti non riescono a breve

Poche settimane fa, mi fu chiesto di fissare un "drop galleggiante" su una delle pagine di Yahoo! Finanza. In browser moderni, una lunga serie è stato conficcato nella guida a destra (screenshot), ma in IE 6, che la stessa stringa fatto la goccia colonna di destra sotto la piega (screenshot). Purtroppo, che il contenuto veniva da un provider, in modo da modificare il markup non era un'opzione.

A causa della natura della corda, che era un elenco separato da virgole dei simboli, le correzioni di cui sopra non sono stati soddisfacenti. Ultime tale elenco in un luogo arbitrario era meglio tagliarla, ma non ancora una soluzione praticabile ...

Fare IE 6 si comportano come i grandi ragazzi

Il trucco per rendere IE 6 si comportano come tutti i moderni browser là fuori è lo stile la scatola con un margine negativo di destra (più position:relative ).

Demo

Senza la correzione

Screenshot per coloro che non vedono questa pagina in IE 6.

Con la correzione

.fixMe { margin-right:-100px; position:relative; }
.fixMe { margin-right:-100px; position:relative; } 

Il margine negativo può essere di qualsiasi valore purché questo valore è maggiore del delta tra la larghezza assegnato e la larghezza effettiva della scatola espansa. E 'questa dichiarazione che impedisce il galleggiante goccia. Lo scopo di position:relative è quello di rendere IE mostrare il contenuto al di fuori dei confini del contenitore padre.

Perché mi piace elementi di stile la stessa su tutta la linea, io di solito non sandbox questa regola.

Le cose da considerare

Questo hack mantiene la colonna al suo posto, ma non impedisce di ottenere che il contenitore più ampio. Ciò significa che non è possibile lo stile l'elemento con uno sfondo o un bordo perché sarebbero dipinta all'esterno della confezione. Ecco uno screenshot di quello sfondo e il bordo simile a quando applicato in combinazione con questa tecnica in IE 6:

Trova le conversazioni: bloglines | technorati

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

jQuery e YUI 3: A Tale of Two librerie JavaScript

Ottobre 27, 2010 at 14:08 da Mark Rall | In Development , le implementazioni YUI | 5 commenti

Recentemente ho avuto l'opportunità di costruire la mia prima applicazione di front end JavaScript. Quello che segue è una breve storia della scoperta e l'evoluzione che avviene quando si tenta di utilizzare strumenti che non sono adatti per il lavoro a portata di mano. Si tratta di un conto delle conoscenze acquisite attraverso lo sviluppo della stessa applicazione front-end con due librerie molto diverse, jQuery e YUI 3. Dettagli del cliente e il progetto sono stati volutamente omessi.

Panoramica

Il progetto prevedeva la refactoring di diversi strumenti di Flash disparate in un'unica applicazione interattiva basata su standard aperti per un editore di contenuti di grandi dimensioni. Di grande importanza, la domanda doveva essere altamente ottimizzato con una piccola stampa del piede iniziale, a causa del gran numero di page impression al giorno il cliente riceve. Varie fasi sono stati coinvolti, con il primo è una prova iniziale di concept.

Il concetto ha comportato lo sviluppo di una visione di quello che sarebbe l'applicazione completata. Si trattava di:

• Un file seme iniziale (<1KB) responsabile per il caricamento dinamico di tutte le strutture (ad esempio, jQuery o YUI 3) e il file domanda iniziale.
• Lo sviluppo e l'inclusione dei plugin jQuery per sostenere elemento stilistico forma e la validazione, e visualizzazioni dinamiche grafico.
• La generazione e la popolazione di interfaccia utente, basata su input dell'utente, le impostazioni predefinite di configurazione e la posizione dell'applicazione all'interno del sito della casa editrice.
• Il calcolo e presentazione delle informazioni in base all'input dell'utente.

Ai fini di una completa informativa, la mia esperienza fino a questo punto era stato lo sviluppo di piccole soluzioni indipendenti, il tipo di cui si potrebbe descrivere come plugin in genere. Tra questi i componenti dell'interfaccia utente dinamici come caroselli di immagini, mappe interattive e Twitter / Flickr widget. Al momento della prima dilettarsi con JavaScript, jQuery era popolare, facile da imparare e mi ha permesso di raccogliere rapidamente le basi necessarie per i progetti su cui stavo lavorando. Tuttavia queste erano tutte le unità standalone e non aveva bisogno di interagire con altro codice o come parte di un'applicazione più complessa.

Primo tentativo

Al termine della prima fase del progetto, è diventato dolorosamente ovvio che avevo a che fare con un animale molto diverso da quello a cui ero abituato. Avendo avuto poca esperienza in organizzazione del codice, il mio codice è diventato rapidamente disorganizzato, inefficiente e ripetitivo. Come risultato, la prima parte di quello che sarà un'applicazione molto maggiore è lento da caricare. In realtà ci sono voluti otto secondi per generare quella un'unica prova di concetto. Un grande cambiamento era necessario e, mentre io avevo pensato di utilizzare una piccola biblioteca come la Base di Edward Dean e John Resig Simple Inheritance JavaScript modello per aggiungere classe a base di eredità a jQuery, ho deciso di fare un passo avanti.

Quello che volevo era un quadro completo, maturo all'interno del quale sviluppare la mia prima applicazione OO. Qualcosa che potrebbe effettivamente mi guiderà attraverso il processo. Nel rivedere le librerie disponibili, ho deciso di adottare YUI 3 per i seguenti motivi:

• Integrato, l'ereditarietà sviluppo basato su supporto applicativo inclusi attributi e la classe di gestione.
• Soluzione a lungo termine:
  • Il supporto per gli standard e l'accessibilità.
  • Finanziato da un grande noto l'organizzazione, Yahoo!
  • Associata con nomi di tutto rispetto come Douglas Crockford , Nicholas Zakas e Stoyan Stefanov .
• Ottimizzazione delle prestazioni:
  • Seme del file iniziale di 7KB solo.
  • Lazy-caricati i moduli su richiesta.
  • Consegna CDN.
• Documentazione varia e completa:
  • Yahoo! Developer Network
  • YUI 3 Documentazione API
  • YUI Theater
  • YUI Biblioteca
  • YUI Blog
• Maturo, coerente evoluzione fra le release.
• Strumenti integrati di YUI Compressor , YUIDoc , YUI Builder e Console .
• Non solo JavaScript, un framework CSS troppo.

Take Two

Integrare YUI 3 ha portato diversi benefici diretti e indiretti al progetto:

• Ereditarietà basata su architettura e la gestione della classe tramite l' attributo di interfaccia, Base e Widget classi produttrici performante, codice riutilizzabile e organizzato.
• Separazione della presentazione dal modello e dati utilizzando il Widget di classe per rendere visualizzazioni alternative (in linea o sovrapposizione) in base alla posizione dell'applicazione all'interno del sito.
• Sandboxing e dinamica modulo inclusione attraverso YUI.use ().
• Cross-browser debug console utilizzando YUI Console .
• Il risparmio, l'ottimizzazione delle prestazioni con YUI Compressor in Eclipse.
• Facile inserimento e l'integrazione dei pre-esistenti plugin jQuery.
• Il salvataggio, documentazione del codice automatizzate con l'uso YUIDoc .

Il risultato finale è stato un cliente felice e un prodotto finito con sub-secondo i tempi di caricamento (ricordando ci sono voluti 8 secondi per caricare la prova iniziale di concetto).

Lessons Learned

Selezionate lo strumento giusto per il lavoro

Nel leggere questo post sono sicuro che alcuni lettori potranno vedere questo come anti-jQuery. Niente affatto. jQuery è un progetto fantastico responsabile di molte innovazioni. Ma, come con qualsiasi strumento, ha i suoi punti di forza e uno scopo previsto. La sua forza sta nella incoerenze del browser normalizzare, abbassando la barriera all'entrata per i principianti e migliorare l'efficienza dei programmatori esperti. L'apprendimento primario che è venuto fuori del progetto era che non si può contare su uno strumento per ogni lavoro. YUI si basa su ciò che jQuery in grado di fornire, ma propongono anche un framework per applicazioni ben architettato. Ma è giusto dire che si tratta di un costo, si veda il punto successivo.

Curva di apprendimento ripida

Ci vuole pazienza, soprattutto quando si scrive la tua prima applicazione, con una biblioteca familiare come ho fatto io. Tuttavia, il payoff è immenso. Imparando un'altra libreria, non solo le vostre abilità di base JavaScript migliorare, potrai anche sviluppare una più profonda comprensione di come funzionano le biblioteche ed i vantaggi che ne derivano. Cerco di imparare qualcosa di nuovo su YUI tutti i giorni e più imparo, più mi trovo in soggezione del pensiero e talento puro che è andato nella costruzione di YUI.

Solo caricare il contenuto quando ne avete bisogno

Mentre è certamente di programmazione più facile solo per caricare tutto il necessario in anticipo, i miglioramenti delle prestazioni ottenuto come risultato diretto di contenuti lazy loading solo quando ne avete bisogno è enorme. Questo è uno dei fattori principali che contribuiscono per migliorare drasticamente la prestazione dell'applicazione.

Interagisci con il DOM il meno possibile

Questo punto non riguarda la libreria specifico utilizzato. Con la memorizzazione nella cache gli elementi necessari DOM e utilizzando modelli HTML in più, il tempo di rendering dell'interfaccia utente sono notevolmente diminuiti. I nodi possono essere memorizzati nella cache utilizzando Y.one () mentre gli elenchi dei nodi possono essere catturato usando Y.all (). Anche Y.Node.create () è stato molto utile in modo efficiente la conversione di stringhe di testo di grandi dimensioni agli elementi HTML DOM prima dell'inserimento.

Impara per esempio, utilizzare un CDN

In biblioteca con CDN consegnato YUI abbiamo deciso di consegnare tutte le attività del progetto tramite CDN. Questo è probabilmente il più grande successivo fattore che contribuisce al miglioramento delle prestazioni.

Pub, confusione sub

Per i programmatori esperti là fuori, cercate di non ridere di questo. Essendo stato abituato a scrivere poco più di plugins in passato, non avevo idea di come le applicazioni devono comunicare internamente. Anche dopo aver letto "Eventi personalizzati consentono di pubblicare i momenti interessanti o eventi nel proprio codice in modo che altri componenti della pagina possono iscriversi a questi eventi e rispondere loro:" ho ancora perso.

Come si è visto, evento personalizzato YUI publish-and-subscribe modello funziona a meraviglia per la comunicazione inter-classe e inter-oggetto. Puoi anche iscriverti pre e post agli eventi e includono la logica dinamica per eliminare bolle sulla base di determinate condizioni.

Integrare le migliori pratiche nel flusso di lavoro

Utilizzo di Eclipse siamo stati in grado di integrare JSLint e YUI Compressor nel processo di compilazione. In parole povere, ogni volta che si preme Ctrl / Cmd + S il codice JavaScript viene convalidato ed ottimizzato. Ciò significa che si sta testando contro ottimizzato, codice di produzione di qualità dalla prima riga di codice. Significa anche che non si dimentica di ottimizzare la frenetica corsa finale al termine di consegna.

Imparare YUI on the Job

Anche se ognuno ha un diverso stile di apprendimento, ho pensato di condividere le risorse che ho usato per imparare YUI con un obiettivo specifico in mente.

• Guarda i relativi episodi Theater YUI per avere una panoramica generale della libreria o imparare un modulo specifico. Consiglio vivamente di iniziare con:
  • Eric Miraglia Benvenuti a YUI 3
  • Todd Kloots su YUI 3 zucchero
  • Matt Sweeney YUI 3 Performance
  • Debugging Luke Smith in YUI 3
  • Isaac Schlueter sulla soluzione dei problemi con YUI 3
  • Eric Ferraiuolo sul Web App per lo sviluppo con YUI 3
  • Luke Smith Eventi Evolved
• Leggi su YUI sul Yahoo! Developer Network . Cerco di leggere un po 'ogni settimana per saperne di più ogni volta che lo ri-lettura.
• Leggi la API documentazione. Se non riesci a trovare su YUI Theater o sul Developer Network, scavare nella API. Si paga anche per leggere il codice direttamente.
• Leggere e inviare domande al forum sulla YUILibrary.com .
• Gioca molto e buon divertimento!

Conclusione

YUI 3 è una libreria completo, maturo e in continua evoluzione adatto per piccole e grandi progetti. Come front end di applicazioni web diventano più complesse, la necessità di librerie come YUI crescerà. Mentre per chi non lo sapesse può essere un'esperienza scoraggiante in un primo momento, se si bastone con esso sarete ricompensati.

Trova le conversazioni: bloglines | technorati

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

YUIConf 2010 vende fuori; l'annuncio di due serate speciali

26 Ottobre 2010 alle 3:35 pm Jenny Donnelly | In Sviluppo e YUI Eventi | Commenti disabilitati

YUIConf 2010 è sold out! Grazie a tutti coloro che si sono registrati - non vediamo l'ora di vedere tutti voi nel mese di novembre. Stiamo dando gli ultimi ritocchi sul nostro programma, ma potete dare uno sguardo a ciò che abbiamo in negozio qui: http://yuilibrary.com/yuiconf2010/schedule.php .

I punti culminanti includono:

• A Node.js pista dove si può dilagare su tutte le cose che accadono con server-side JavaScript. Abbiamo Node.js creatore Ryan Dahl la presentazione e seduto su un pannello sul futuro dell'ingegneria frontend, e abbiamo YUI Dav Glass, uno dei primi a dimostrare Node-based progressive enhancement utilizzando off-the-shelf componenti di libreria (da YUI 3), mostrando ciò che il futuro assomiglia.
• Una pista YQL per arrivare fino a velocità su come sfruttare YQL di accedere ai dati da qualsiasi punto di Internet. Il team YQL stessa sarà a disposizione per raccontare il loro ultimo lavoro.
• Casi di studio che espongono il modo progetti reali implementare YUI in ambienti di produzione. Ingegneri da Flickr e Yahoo! Mail sarà a portata di mano, e Eric Ferraiuolo - vincitore di un premio PayPalX per il suo recente lavoro - sarà qui per parlare di Tip il Web , il suo ultimo YUI 3-based del progetto.
• Presentazioni perspicaci su come offrire esperienze mobili / touch.
• Immersioni profonde sui moduli di YUI, da automatico a Grids CSS ai contributi Galleria.

Tutte le sessioni saranno archiviate in video e disponibile su YUI Theater poco dopo la conferenza.

Siamo entusiasti di unire le forze con Yahoo! Developer Network per ospitare due serate speciali che saranno aperti al pubblico. Quindi, anche se la conferenza è già sold out, chiunque può assistere alle serate iscrivendosi al Meetup.com. Lo spazio è limitato, quindi iscriviti subito! (Partecipanti YUIConf non è necessario registrarsi.)

YUIConf 2010 Tavola rotonda: "Il futuro dello sviluppo Web" moderato da Ben Galbraith e Dion Almaer
8 novembre 2010, 6:30-08:00

Iscriviti a partecipare alla tavola rotonda presso http://www.meetup.com/BayJax/calendar/15239592/ .

YUIConf ha riunito questo pannello distinto per esplorare il futuro prossimo della disciplina in un momento di grande cambiamento. Relatori pianificate comprendono Elaine Wherry, fondatore e architetto frontend a Meebo, Douglas Crockford, architetto JavaScript a Yahoo!; Tantek Çelik, tecnologo e autore; Dahl Ryan, creatore di Node.js, Joe Hewitt su Facebook, creatore di Firebug e uno dei più scaricati applicazioni mobili di tutti i tempi (Facebook per iOS), Thomas Sha, fondatore YUI a Yahoo!.

YUIConf Keynote 2010: "Progetto Futuro" di Douglas Crockford
10 novembre 2010, 6:30-20:00

Iscriviti per partecipare al keynote di http://www.meetup.com/BayJax/calendar/15239717/ .

Nello sviluppo di software, sogniamo di architettura. Questa è la storia vera di un sogno.

Posti a sedere è limitato per questi eventi speciali, quindi assicuratevi di iscriversi presto!

CC foto:

• Dion Almaer: http://www.flickr.com/photos/seanosh/3306058997/
• Tantek Çelik: http://www.flickr.com/photos/thomashawk/409672754/
• Ryan Dahl: http://www.flickr.com/photos/blank22763/4089950858/
• Elaine Wherry: http://www.flickr.com/photos/drewm/3016944830/
• Ben Galbraith: http://www.flickr.com/photos/seanosh/3306056383/

Foto utilizzate per gentile concessione:

• Douglas Crockford: http://www.flickr.com/photos/allenr/4482834276/
• Douglas Crockford: http://www.flickr.com/photos/allenr/4341338168/

Trova le conversazioni: bloglines | technorati

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

Annunciando YUI 2.8.2 - Aggiornamento di sicurezza importante per tutti gli utenti di YUI 2.4.0-2.8.1

25 ottobre 2010 alle 11:34 am da Eric Miraglia | In Development | 6 commenti

Il team di YUI YUI 2.8.2 rilasciato oggi. Questa release corregge un difetto relativo alla protezione che è stata introdotta agli inizi due infrastrutture YUI componente Flash con la release 2.4.0 YUI. Questo difetto permette exploit di iniezione JavaScript deve essere creato contro i domini che ospitano colpito YUI .swf file. Visita il bollettino sulla sicurezza per YUI 2.8.2 per maggiori dettagli su come identificare e sostituire i file interessati .

Se il sito ospita un 2 Distribuzione YUI tra la versione 2.4.0 e 2.8.1 che include questi file, è interessato da questa vulnerabilità.

Se il tuo sito carichi YUI 2 dal CDN di Yahoo ( yui.yahooapis.com ) o da CDN di Google ( ajax.googleapis.com ), ei file non sono ospitati sul proprio dominio, non sono interessati. YUI 3 non è interessato da questo problema.

È possibile scaricare YUI 2.8.2 (e versioni modificate di YUI 2.4.0-2.8.1) dalla pagina di download YUILibrary.com .

Vedere il bollettino sulla sicurezza per informazioni su come determinare se il vostro sito è influenzato, come per risolvere il problema, e come verificare la correzione.

Trova le conversazioni: bloglines | technorati

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

Nella Galleria 3 YUI: Estensioni per SVG, creato per SVG Wow!

18 ottobre 2010 alle 11:18 pm Vincent Hardy | In Development e YUI 3 galleria | 2 commenti

Introduzione

SVG ( Scalable Vector Graphics ), fornisce una sintassi dichiarativa per interattive, animazioni grafiche 2D: forme, immagini e testo. Supporto SVG è parte del HTML 5 e le specifiche SVG è implementato da tutti i principali browser, tra cui Microsoft Internet Explorer in versione 9 .

Le svg-wow.org sito web vetrine cosa si può fare oggi con SVG. Le demo di questo sito web sono stati creati per l' SVG Apri conferenza, dove il SVG Wow! sessioni sono una tradizione da diversi anni. La SVG Wow! le sessioni sono stati avviati da Dean Jackson, poi in collaborazione con me e poi continuato da Erik Dahlstrom . Erik e ho collorated sulla sessione per i 2009 e 2010 edizioni del convegno.

Negli ultimi due anni, i demo sono sempre più utilizzati framework AJAX, applicando loro caratteristiche, per SVG, invece di (o in aggiunta a) HTML. YUI è il framework più diffuso sul sito web, che utilizza sia YUI 2 e YUI 3 .

Inizierò con una rapida panoramica SVG e poi discutere il tipo di demo che YUI sostenuto e le estensioni che ho aggiunto alla Galleria 3 YUI per farlo funzionare con SVG. (Queste estensioni sono ora liberi di usare sotto i termini della licenza BSD YUI ).

SVG panoramica

Come l'HTML, SVG è una specifica W3C. Esso fornisce una sintassi per descrivere forme di base (rettangoli, cerchi, linee, poligoni, ellissi, polilinee), forme arbitrarie (descritto in termini di segmenti di percorso che possono essere linee, curve di Bezier quadratica o cubica), testo e immagini.

L'immagine che segue è una schermata del foglio di stile alternativo esempio su SVG-wow.org e mostra alcune caratteristiche SVG in gioco: il rendering ricchi (gli effetti delle ombre, le sfumature, motivi) e di forme semplici e complesse.

Poiché le immagini SVG sono definiti in termini di geometria e attributi di rendering, è possibile rendere in qualsiasi risoluzione. Come risultato, immagini SVG può essere scalata a qualsiasi dimensione mantenendo una elevata qualità di rendering, ad esempio quando si stampa (non estremità più frastagliate).

Il seguente vista ingrandita mostra la stessa immagine SVG mostrato in precedenza, ma fusi a una risoluzione più elevata pur mantenendo l'alta qualità.

Proprio come HTML, SVG supporta l'interattività: è possibile aggiungere listener di eventi sugli oggetti grafici per le interazioni del mouse o la tastiera. Naturalmente, SVG supporta il Document Object Model, che lo rende facile manipolare le diverse proprietà degli oggetti grafici, quali la loro geometria o stile di rendering.

Ci sono un sacco alla specifica SVG: stili di rendering avanzate (carezze, di riempimento, pattern, gradienti), effetti filtro (sfocature, ombre, matrici di colore), stile CSS, funzioni di testo avanzati (quali il testo su un percorso) e l'animazione dichiarativa . È possibile verificare i riferimenti alla fine di questo post per saperne di più sulle caratteristiche del formato SVG.

SVG e HTML

Con HTML5 , SVG può essere inline nei documenti HTML senza ulteriori indugi. I browser stanno iniziando a supportare questa funzione (ad esempio, Firefox 4 ). Per il momento, tutti i principali browser supportano SVG inline in XHTML, che fornisce la stessa funzionalità. SVG in XHTML richiede solo che i namespace sono stati correttamente dichiarati.

 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         ....
     </ Head>
     <body>
         <h1> Inline SVG </ h1>

         <Xmlns svg = versione "http://www.w3.org/2000/svg" = "1.1"
          xmlns: xlink = "http://www.w3.org/1999/xlink"
          altezza width = "100%" id = "100%" = "backgroundSVG">
             <-! Contenuti SVG qui ->
         </ Svg>
     </ Body>
 </ Html>
        

Tutti gli esempi di codice in questa pagina utilizzare questo modo di inlining SVG in XHTML.

SVG e YUI

SVG supporta l'animazione dichiarativa. Ad esempio, è possibile animare il raggio di un <circle> elemento come questo:

 <circle cx="50" cy="100" r="40">
     <animate attributeName="r" values="40,60,20,40" dur="1.5s" />
 </ Cerchio>
       

Il <animate> tag è preso in prestito dal SMIL specifica e, insieme agli altri elementi di animazione, fornisce un motore di animazione molto potente per SVG.

Purtroppo, fino a poco tempo, il supporto del browser per l'animazione SVG era scarsa. Ha migliorato negli ultimi due anni, ma Microsoft ha messo in chiaro che non sosterrà dichiarativa animazione SVG in IE 9.

Come risultato, la maggior parte delle demo sul svg-wow.org sito utilizza animazione con script, invece di animazioni dichiarativi. Da un lato, questo è un peccato perché le animazioni dichiarativi sono più efficienti di animazioni con script. Sul lato positivo, animazioni con script può essere molto flessibile, e lavorano tra le implementazioni molto bene.

La necessità di una buona soluzione dell'animazione con script è quello che ha spinto l'utilizzo di YUI sulle svg-wow demo. Tuttavia, le demo anche utilizzare altre funzioni YUI, in particolare il Loader e nodo moduli.

Animare SVG con YUI

Le demo su SVG-wow usare YUI per creare ritmi elastici , le forme di morphing o testo rotazione e forme , per esempio. Utilizzo di YUI con SVG richiesto alcune estensioni YUI, mi descriverà in un attimo.

testo rotante e forme	forme di morphing
elastiche drum beats

Il seguente illustra come YUI è utile per animare in modo semplice e manipolare la grafica SVG.

Animare il SVG transform attributo

Tutti gli elementi grafici SVG hanno una transform attributo. Questo attributo specifica un 2D trasformazione affine su elementi, che può essere utilizzato per scalare, inclinare, ruotare o tradurre.

Le svg-wow.org estensioni YUI per SVG consente animare la transform attributo in questo modo:

 var = new anim Y.Animate ({
     nodo: '# circleA',
     da: {
         trasformazione: {tx: 0, ty: 0, sx: 2, sy: 2}
     },
     a: {
         trasformazione: {tx: 20, ty: 20, sx: 1, sy: 1}
     },
     transformTemplate: "tradurre (# tx, ty #) scala (# sx, sy #)",
     durata: 1
 });
        

Vedere le animazioni di trasformazione test.

Noterete che i valori di trasformazione sono definiti in termini di "componenti" (come tx o ty ), che vengono combinati per formare un valore utilizzando il transformTemplate trova l'oggetto di configurazione animazione.

Il modello è un meccanismo flessibile per la costruzione di trasformare i valori mentre i componenti separati rendono facile per calcolare i valori animati. Questo è un esempio in cui il modello di animazione YUI ha permesso una maggiore flessibilità (e più potenza espressiva) di elemento di animazione SVG SMIL ( animateTransform ). Al fine di creare l'animazione sopra descritto, la dichiarazione equivalente SMIL sarebbe:

 <circle ...>
     <AnimateTransform nomeAttributo = tipo di "trasformazione" = "translate"
                       from = "0,0" a dur = "20,20" = "1s" begin = "scaleAnim.begin" />
     <AnimateTransform nomeAttributo id = "scaleAnim" = tipo "trasformazione" = "scale"
                       from = "2,2" a dur = "1,1" = "1s" begin = "indefinite" />
 </ Cerchio>
        

Si noti come il frammento di codice richiede più animateTransform elementi che devono essere sincronizzato: l' begin attributo della prima animazione è impostata su scaleAnim.begin per sincronizzare l'inizio dei due animazioni. Una bella caratteristica del motore di animazione YUI è che i tempi di un'animazione (cioè, inizio, fine e durata) può essere condivisa da applicare alle proprietà degli elementi multipli.

L'estensione YUI per animare le trasformazioni SVG viene utilizzato estensivamente, come ad esempio nella fotocamera e testi animati esempi. Il primo utilizza una estensione di YUI 3, mentre il secondo usa un'estensione di YUI 2.

Animare la geometria

Geometria di base

Animare la geometria SVG con YUI è abbastanza semplice. Le anima Nell'esempio riportato di seguito uno <rect> raggi larghezza, altezza e angolo dell'elemento:

 var = new anim Y.Animate ({
     nodo: '# recta',
     da: {
         larghezza: 200,
         altezza: 100,
         rx: 5,
         ry: 5
     },
     a: {
         larghezza: 300,
         altezza: 100,
         rx: 10,
         ry: 10;
     },
     durata: 2,
     easing: Y.Easing.elasticOut
 });
        

Vedere le animazioni forma test.

Come discusso in seguito, alcuni cambiamenti sotto il cofano YUI fatto questo lavoro. Ma dal punto di vista di uno sviluppatore, questa animazione funziona esattamente allo stesso modo come l'animazione di qualsiasi altro attributo HTML o proprietà CSS.

Il <path> 's d attributo

Un attributo geometria è un po 'speciale: il d attributo sul <path> elemento. Il <path> elemento viene utilizzato per la geometria complessa arbitrariamente. A <path> può descrivere qualsiasi forma. Il suo d attributo descrive la sua geometria in termini di segmenti di percorso che possono essere linee, archi, quadratiche o cubiche curve di Bezier (ci sono alcuni comandi, ma tutti mappa per le curve di Bezier).

Animare il d attributo richiesto anche un po 'di proroga al motore di animazione YUI, ma con tale estensione, il d attributo può essere animato come gli altri, come illustrato di seguito.

 var = new anim Y.Animate ({
     nodo: "# patha",
     da: {d: "M 0 0 C 50 0 100 50 100 100 C 50 100 0 50 0 0 Z"},
     di: {d: "M C 0 0 100 0 100 0 100 100 C 0 100 0 100 0 0 Z"},
     durata 1s,
     easing: Y.Easing.bounceBack
 });
        

Vedere le animazioni percorsi test, che mostra, tra le altre cose, un segno di spunta trasformarsi in una croce nel corso del tempo, come rappresentato nelle immagini seguenti.

Il Gandhi citazioni demo utilizza questa tecnica di animazione del d attributo alle forme trasformarsi in figura di Gandhi.

Animare altri attributi SVG

Naturalmente, il animazioni YUI non sono limitati a geometria attributi. Qualsiasi attributo SVG può essere animato. Ad esempio, i seguenti anima animazione il raggio di sfocatura su un filtro di sfocatura orizzontale.

 / / Snippet SVG
 <Filtro ..
     <FeGaussianBlur stdDeviation id = "blurFilter" = "10 10" ...  />
 </ Filter>

 / / JavaScript animazione
 var = new anim Y.Animate ({
     nodo: '# blurFilter',
     da: {stdDeviation: [0, 20]},
     di: {stdDeviation: [0, 0]}
 });
        

Vedi i filtri animazioni test. L'immagine seguente mostra come animare una sfocatura gaussiana può essere utilizzato per la transizione tra gli stati dei pulsanti.

Questo tipo di effetto viene utilizzato nel veloce effetto di sfocatura demo, anche se tale demo non utilizzare l'animazione YUI, ma dichiarativi elementi di animazione SMIL (a spese di funziona solo nei browser che supportano tale funzionalità, come spiegato in precedenza).

Animare le proprietà CSS

Come l'HTML, SVG elementi hanno anche attributi e proprietà CSS. SVG ha alcune proprietà specifiche CSS . Queste proprietà possono essere animati, a volte per creare effetti sorprendenti. Ad esempio, l' stroke-dashoffset proprietà può essere utilizzata per simulare disegnando una forma.

 / / Snippet SVG
 <rect id="rectA" width="100" height="50" stroke-dasharray="300 300" stroke-dashoffset="300" />

 / / JavaScript
 var = new anim Y.Animate ({
     nodo: "# recta",
     di: {'stroke-dashoffset': 0},
     durata: 0.25
 });
        

Vedere i tempi animazioni test.

The graffitis demo uses this technique (even though without YUI animation) and so does the camera demo (this time with YUI animation).

YUI and SVG: Under the hood

The svg-wow.org web site uses both YUI 2 and YUI 3 and has SVG-specific extensions for both. The following section of this article focuses on the YUI 3 extensions.

Extensions were needed to:

• make YUI work with SVG's DOM specificities
• account for implementation differences
• add support for new attribute types such as SVG transforms
• add additional animation timing and synchronization features

Accounting for SVG DOM Specificities

As described earlier, SVG attributes can be animated with declarative elements such as <animate> . To support SVG's animation model, SVG attribute values hold both an animated and a base value. For example, the r attribute on a <circle> element is an SVGAnimatedLength defined as follows:

interface SVGAnimatedLength {
  readonly attribute SVGLength baseVal;
  readonly attribute SVGLength animVal;
};

As a result, even in implementations that do not support declarative animation, we need to reach down to the baseVal to read an attribute's value:

var circle = document.getElementById('#myCircle');
var rValue = circle.getAttribute('r').baseVal.value;

Extensions were needed to allow the animation engine to account for the SVG attributes' unusual value model. Thankfully, YUI 3 has a concept of animation behaviors . Behaviors are essentially attribute-specific hooks, and it was fairly easy to add support to handle SVG attribute values. For example, SVGAnimatedLength attributes are handled like so:

var lengthBehavior = {
    set: function (anim, att, from, to, elapsed, duration, fun) {
        // SVG specific handling
    },

    get: function (anim, attr) {
        // SVG specific handling
     }
};

// Handle <circle>'sr attribute
Y.Animate.behaviors.r = lengthBehavior;

There are more extensions for other SVG attributes values such as the transform attribute, color attribute values (like fill , stroke or stop-color ) and attributes such as stdDeviation mentioned earlier.

A few similar tweaks were required, for example in the Y.Node.prototype.toString method, again to account for SVG's baseVal (this time on the className node property). Another example is the default node setter in the Node module.

Accounting for browser differences

While the previous extensions are required because of specification differences between HTML and SVG, the following are required because of implementation variations between browsers.

SVG has a special category of attributes called presentation attributes . In implementations also supporting CSS styling (which all browsers support), these presentation attributes are really just another way to specify a CSS property with a low specificity . From the SVG specification:

The presentation attributes thus will participate in the CSS2 cascade as if they were replaced by corresponding CSS style rules placed at the start of the author style sheet with a specificity of zero. In general, this means that the presentation attributes have lower priority than other CSS style rules specified in author style sheets or 'style' attributes.

Unfortunately, some browsers do not implement the specification correctly and window.getComputedStyle does not always account for all possible sources for setting the SVG CSS properties: CSS selectors, style attribute and presentation attributes.

YUI came to the rescue thanks to the Node module which could be extended to hide these browser differences. The Y.DOM.CUSTOM_STYLES and the Y.Node.prototype.getComputedStyle could be extended to offer a uniform way to read SVG style properties.

Extending Y.DOM

YUI wraps all DOM access through the Node interface. As a result, some SVG specific DOM methods, such as getBBox (used to compute the bounds of an SVG element), are not accessible on the wrapped object.

To make things easier to program for SVG, extensions to the default Y.DOM module (which Node uses) were added to either expose SVG DOM features or add convenience methods, commonly needed when manipulating content:

• firstElement/lastElement/prevElement/nextElement/removeAllChildren (not SVG specific)
• getMatrix/setMatrix . Provides an easy way to manipulate transforms on SVG elements, something notoriously difficult with the standard SVG DOM
• getBBox/getViewportBBox provide simple ways to access bounding box in the element's coordinate system or in viewport space.
• loadContent . A utility to insert a DOM fragment described using a JavaScript object literal. Ad esempio:

  myNode.loadContent({
      tag: 'g',
      fill: 'red',
      stroke: 'none',
      children: [{
          tag: "rect",
          x: 10,
          y: 10,
          width: 200,
          height: 300
      }, {
          tag: 'circle',
          r: 10,
          cx: 105,
          cy: 155
      }, {
          tag: 'image',
          'xlink:href': 'images/photo.png',
          width: 200,
          height: '300px'
      }, prevSibling);
          

  is a shorthand for making various DOM calls (such as createElementNS , setAttributeNS and appendChild ) to create a g element and its children and inserting it before prevSibling under myNode . The utility deals with namespaces for attributes and elements.

Additions to the Animation engine for timing and synchronization

Many, if not most effects involving animation require multiple choreographed animation instances. Typically, several animations are required to create a desired effect, and the start or end of animations depend on each other, sometimes with a time offset: animations need to be synchronized.

For example, if you have a set of shapes which need to fade in one after the other, you will need to create a fade animation for each element and then chain their start time with a slight offset.

var chained = Y.all('#chained circle'),
    firstAnim, previousAnim;

chained.each(function (circle) {
    var anim = new Y.Animate({
        node: circle,
        from: {'fill': 'white'},
        to: {'fill': 'gray'},
        duration: 0.25
    });
    if (previousAnim !== undefined) {
        // Synchrnoize the start of anim to be 0.15 seconds after the begining
        // of the previous circle's animation (previousAnim).
        previousAnim.onBegin(anim, 0.15);
    } else {
        firstAnim = anim;
     }
    previousAnim = anim;
});

// Start the first animation 1s after a click on any of the circles.
// Note that this is an extension to the default YUI run method which does not
// take a time offset.
chained.on('click', function () {
    firstAnim.run(1);
});

See the time offsets tests.

The method onBegin makes it easy to synchronize the start of two animations, with an optional time offset. Actually, onBegin can also invoke a function with a time offset. Likewise, the onEnd extension makes it easy to synchronize with the end of an animation.

By default, YUI animations have events which provide a way to synchronize. The onBegin and onEnd methods express the synchronization more concisely (a similar example of conciseness is shown below).

In addition, it is sometime necessary to synchronize an animation with an event, again with a time offset. The beginOn and endOn extensions allow us to express that. Ad esempio:

anim.beginOn(Y.one('#button'), 'click', 0.5);

will start the animation 0.5s after the element with id 'button' was clicked. This is a short-hand for:

Y.one('#button').on('click', function () {
    setTimeout(500 /* ms */, function () {anim.run();});
});

A final extension made to the animation class was the ability to make an animation object apply its first frame's state before it was actually started. This is often needed when creating animation effects involving multiple animations which start at different time offsets.

var anim = new Y.Animate({
    node: Y.one('#button'),
    from: {r: 30, 'fill-opacity': 0, color: 'crimson'},
    to: {r: 80, 'fill-opacity': 1, color: 'gold'},
    duration: 0.25
});

// the following will set the desired state on the target object prior to
// actually starting the animation.
anim.applyStartFrame();
anim.run(2);

The picture shuffle demo uses animation offsets for the effect that spreads the stack of pictures or puts the pictures back in a stack.

Conclusion

Working with SVG and YUI, and in particular YUI 3, has been a very enjoyable experience: a lot of the YUI functionality applies to SVG right out of the box and YUI's extensible architecture made it possible to work around occasional issues and to add desired functionality.

Of course, increased standard support for SVG in YUI would be helpful, in particular making YUI work with stand alone SVG documents and making the Node class wrap SVG elements without workarounds.

There are also a few enhancements that would be helpful. For example, it would help if animations could target multiple elements. Likewise, supporting multiple values (as in the <animate> SVG element for example) would be helpful to create more sophisticated effects.

The demos on svg-wow.org were written for YUI 3.1 and ported to 3.2 for the purpose of this blog. In 3.2, transitions were introduced which make use of native CSS transitions if available in the browser. It might be possible for the YUI animation engine to similarly leverage SMIL animation where available (Opera, Firefox and WebKit at the time of this writing) which should also yield performance improvements.

The SVG extensions on the svg-wow.org web site are available as a YUI 3 Gallery module for those who want to enjoy the fun of working with YUI and SVG.

Riferimenti

• SVG Wow!
• SVG Specification
• SVG Tutorial
• Adobe's SVG Zone (a little dated, but still has good examples)
• carto.net examples
• KevLinDev

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

In the Wild for October 15, 2010

October 15, 2010 at 10:03 am by Eric Miraglia | In In the Wild | 2 Comments

YUIConf 2010 is right around the corner , and we continue to have our heads down working on that event and the upcoming YUI 3.3.0 release. In the meantime, here's what we've noted in the community in the past few weeks. Let us know @yuilibrary (or in the comments below) what we missed!

• Andrew Wooldridge, “Learning YUI: Pt. 2 – Community, Logging, and the Console” : Andrew Wooldridge (@triptych) is back with part 2 of his new “Learning YUI” blog series. I particularly like (and agree with) his take on the YUI community: “In a word, community is really what makes YUI stand out to me as a javascript library. If you need help working with YUI, there are community forums , an IRC channel , as well as Open Hours that allow you to talk directly with YUI developers. I would recommend that you get connected early on in your learning experience, especially with the IRC channel because you will discover a helpful group of smart folks hang out there and are willing to answer any question, no matter how seemingly mundane. You also should follow yuilibrary on twitter as you will be tapped into the latest YUI news there.” Check out the full blog post for more . I covered part one in a previous “In the Wild” column . #
  
• Andrew Burgess's “Crash Course” on YUI 2 Grids on NetTuts : Andrew Burgess's “Crash Course” on YUI 2 Grids, which we first noted in May last year , has been picked up by NetTuts and is bringing a new wave of attention to what has historically been one of YUI's most popular projects. #
  
• Create a BlogRoll with Google Spreadsheets and YUI3 : Andrew Wooldridge (@triptych) continues his series of YUI 3-focused articles with a new entry that ties together YUI 3 and Google Docs. “I admit it: I was inspired by this article by Codeinfront.com. The idea of creating a snippet of code that anyone can share, update, and learn from is just extremely compelling and gratifying. So, I offer to you something that you may have never thought of. You can use Google Spreadsheets as a JSON data source. YUI3′s JSONP module talks very nicely to this JSON data source and allows you to essentially create sites that can be data driven and yet never require you to have a complicated PHP MyAdmin setup or MYSQL database. You can do it all via client-side technologies and some help from Google Spreadsheets. If you combine this with the Forms ability in G Spreadsheets, you could even create a cool report page based on some survey you create. Let's get down to code.” Get down to code with the full blog post here #
  
• Video Remixing Site Dragontape Using YUI 3 : Video remixing site Dragontape is making extensive use of YUI 3. Here's how the site's authors describe the project: “Dragontape is a webapp that enables you to create mixtapes of your favorite online videos, so you can watch them as a continuous show. The tapes you create are accessed through a single URL, so you can easily share with friends or embed them in a webpage. The source clips remain in their original locations, Dragontape simply remembers where to find them.” #
  
• Erik Eldridge, “Simple YUI 3 Module for Yahoo! Login” : YDN evangelist Erik Eldrige has written up a nice tutorial on his personal blog that shows you how to leverage YUI 3 and Yahoo!'s OpenID system simply and efficiently. Writes Erik: “Looking at the OpenID landing page on the YDN site might give the impression that logging users into a site with a Yahoo! ID is difficult. Given the following conditions, however, adding Yahoo! login to your site can be quite simple:
  1. Because we're only targeting Yahoo! accounts, we can preset the login location to https://open.login.yahooapis.com/openid/op/auth
  2. If we log users in via a popup, but manage everything via JavaScript on the parent page, we can skip validation of the response coming back from Yahoo!”
  You can find the full tutorial here . #
  
• Upstage, a New YUI 3-powered HTML5 Presentation System by Reid Burke : @Reid is just getting this project underway, but there's a lot to like already. Following in the footsteps of a series of standards-based presentation tools that have launched in the last few years, Upstage puts a YUI 3 twist on the genre. Code is on GitHub — download, fork, and have fun. ( Original source. ) #
  
• A Simple Twitter Widget with YUI 3 and YQL (by @codeinfront) : @codeinfront has posted a new tutorial on using YUI 3 and YQL in a Twitter mashup. “While in between projects I've been playing around with JavaScript dates including conversion to relative time. This then lead me to testing the function within a Twitter widget context. I ended up with a Twitter widget using YUI 3 and YQL. The code below explores a couple of interesting concepts…” Check out the blog post for full details . #
  
• “YUI, How Dare You Make Me Rethink…” : Michigan Techie writes that YUI 3 is designed to break bad habits and challenges him to find new, hopefully better coding patterns. “When you use YUI3 you have a YUI().use() and everything gets encapsulated within that bit of code. So if I were to just move the MyApp code into the YUI block I'm no longer able to access it from the page of content I want to run JS on. So this is good, no JS globals, but it's bad…not the way I've been doing things.” You can see MT's full epiphany here . #
  
• Jeez.eu on Building a Custom Search Engine with YUI : Jeez.eu's tutorial on building a custom search engine relies heavily on YUI 2 widgets and utilities. #
  
• Node.js Resource List from @codeinfront Includes Crockford, Dav Glass : Blogger Mark Rall (@codeinfront) has compiled a set of his favorite Node.js-related resources. Key among them are two recent YUI Theater talks from Douglas Crockford and Dav Glass. For his other favorites, head over to his blog . #
• ErisDS Has Updated Her Carousel Custom-navigation Example for 2.8.x : Northampton blogger ErisDS has updated her work on custom navigation for YUI 2 Carousel to support YUI 2.8.x. “Last year I published two parts of a three part tutorial (doh) on the YUI2 Carousel Widget which worked with YUI Carousel 2.7.0. Since that time, a new couple of new versions of the YUI2: Carousel widget have been released (2.8.0 and 2.8.1), and it seems my examples do not work with the updated code. This post covers the issues, the reasons why they occur and how to resolve them.” Check out the full post here . #
  
• Tweet of the Week : From @bartt : “Being able to use #YUI on both client & server is so nice. JavaScript + my favorite library on both sides of the fence == !context switch.” #
  

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

YUIConf 2010: Early-bird registration ends this week

October 7, 2010 at 9:03 am by Jenny Donnelly | In Development , YUI Events | 2 Comments

An awesome lineup is in place for YUIConf 2010 , which will be held at Yahoo!'s Sunnyvale, CA campus this November 8-10. Douglas Crockford will be back with a new talk entitled “Project Future”, and Dion Almaer and Ben Galbraith will be moderating a panel on the future of the discipline. We have a stellar lineup of speakers, including Christian Heilmann, Dav Glass, and Nicholas Zakas, taking the podium this year on topics spanning YQL, NodeJS, and YUI:

• An Introduction to YQL
• YQL + YUI: Building End-to-End Applications
• Building YQL Open Data Tables with YQL Execute
• Using (Not Abusing) YQL for Caching, Filtering and Collating Data
• NodeJS + YUI 3
• Using NodeJS and YUI 3 for Server or Browser Side View Rendering
• Avoiding Spaghetti Code with Server-Side JavaScript
• Understanding Progressive Enhancement with YUI: Write Less, Achieve More
• Internationalizing Applications Using YUI 3
• Editor: The Next Generation
• AutoComplete: Deep Space Nine
• The Journey from Idea to Functioning Widget in YUI 3
• Finger Tips: Lessons Learned From Building a Touch-Based Experience
• and much, much more!

Be sure to sign up this week to receive the early-bird rate of $35. After October 8, tickets cost $50.

For folks traveling from outside the Bay Area, we have made available Yahoo! rates at a couple nearby hotels. Check out http://yuilibrary.com/yuiconf2010/ for more details.

CC photo of Dion Almaer by seanosh on Flickr.

Update: The early-bird price was incorrect. Tickets cost $35 through October 8.

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!