Yahoo! User Interface Blog (YUIBlog)

CSS Rychlý tip: Jak zabránit "float" pokles v IE6

Říjen 28, 2010 v 1:52 hodin Thierry Koblentz | V CSS 101 a rozvoj záložky | 4 Komentáře

I když toto chování je často nazýván " float kapku "nebo" kapka float ", sloupec, který klesá nemusí být float ... jen musí být širší než prostoru přiděleného pro něj. Všimněte si, že toto je specifikace a je to běžné chování napříč prohlížeči, pokud je sloupec "příliš velká", pak to bude klesat.

Co dělá IE 6 stánek, je, že tento prohlížeč není plně podporují width vlastnost (ani height na to přijde). Proto, to nechá kontejnery růst přizpůsobit jejich obsah. Je tento růst, který vytváří pokles, protože pole nevejde do své určené místo.

Obvykle, viníky jsou prvky, které nejsou zábal (např. obrázky, URL atd.), ale styl písma (např. IE a kurzívou ) mohou být zodpovědné také.

Například, aby se v pravém sloupci pokles o YUIBlog v IE 6, vše, co jsem musel udělat, je styl jeden z obrazů, v pravém zábradlí o šířce větší než 210 pixelů. Tento obraz nutí IE 6 zvýšit šířku pravého sloupce, které pak již nemůže sedět vedle v levém sloupci.

Obvyklé opravy:

word-wrap: break-word;

Řetězce zábal tím, že rozbije na pravém okraji pole.

wbr s wbr:after {content:"\00200B"} na Opera

wbr element představuje konec řádku příležitost. Vložení wbr je uvnitř dlouhých řetězců umožňuje prohlížeč přidat řádku v případě potřeby.

overflow-x:hidden;

Jakýkoliv obsah širší než kontejneru je cut-off na pravém okraji uvedeného pole.

Všimněte si, že první dvě řešení, funguje pouze na struny a nebude bránit obrázků, atd. od rozšíření pole.

Při známé opravy nepodaří krátká

Před pár týdny jsem byl požádán, aby stanovily "float drop" na jednu ze stránek Yahoo! Finance. V moderních prohlížečích, dlouhý řetězec byl trčí z pravé kolejnice (screenshot), ale v IE 6, který stejný řetězec dělal pravý sloupec pokles pod řasy (screenshot). Bohužel, že obsah přišla od poskytovatele, tak editaci značky není možné.

Vzhledem k povaze řetězce, který byl čárkami oddělený seznam značek, opravy výše uvedené nejsou uspokojivé. Prolomit tento seznam v libovolném místě byl lepší než odstřižením, ale stále není schůdné řešení ...

Tvorba IE 6 chovat jako velké kluky

Trik, aby IE 6 se chovají jako všechny moderní prohlížeče tam je styl krabice s negativním pravém okraji odst. a position:relative ).

Živá ukázka

Bez opravy

Screenshot pro ty, kteří nevidí tuto stránku v IE 6.

S opravy

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

Záporná marže může být jakékoliv hodnoty, pokud je tato hodnota vyšší než delty mezi přidělenou šířku a skutečné šířce rozšířeném okně. To je to, že prohlášení, které brání pádu plovák. Účelem position:relative je, aby se IE zobrazí obsah mimo hranice nadřazeného kontejneru.

Protože jsem chtěl stylu prvků stejné ve všech oblastech, obvykle ne pískoviště toto pravidlo.

Co je třeba vzít v úvahu

Tento hack udržuje sloupec na místě, ale to nebrání tomu, aby obal od získání širší. To znamená, že nemůžete styl prvek s pozadím nebo ohraničením, protože by je maloval mimo obal. Zde je screenshot toho, co pozadí a pohraniční vypadat při použití v kombinaci s touto technikou v IE 6:

Hledat konverzace: Bloglines | technorati

Sdílet a rozšiřovat: Záložka se Del.icio.us | Digg to! | reddit!

jQuery a YUI 3: Příběh dvou knihoven JavaScript

27. října 2010 v 2:08 hod. od Marka Rall | V rozvoje a implementace Yui záložky | 5 Komentáře

Nedávno jsem měl příležitost postavit svou první JavaScript čela aplikace. To, co následuje, je povídka o objevu a vývoje, který přijde, když se snaží používat nástroje, které nejsou vhodné pro práci v ruce. Je to popis učení získaných prostřednictvím rozvoje stejný čela aplikace pomocí dvě velmi odlišné knihovny, jQuery a YUI 3. Podrobné údaje o klientovi a projektu byly záměrně vynechány.

Přehled

Projekt zahrnoval refaktoring několika různorodých Flash nástrojů do jednoho interaktivní aplikace založené na otevřených standardech, pro velký obsah vydavatele. Velký význam, aplikace měla být vysoce optimalizované s malým počátečním nohou tisku díky velké množství denních zobrazení stránek klient obdrží. Několik fáze byly zapojeny, přičemž první první důkaz pojetí.

Koncepce zahrnovala vývoj jednoho pohledu, co by bylo vyplněnou žádost. To sestávalo z:

• První semena soubor (<1 kb) zodpovědný za dynamického zatížení všech rámců (např. jQuery nebo YUI 3) a původní aplikace souboru.
• Rozvoj a začlenění jQuery pluginů pro podporu prvek formuláře styl a ověřování a dynamických grafů vizualizace.
• Generace a populační UI, na základě uživatelských vstupů, konfigurace výchozí hodnoty a umístění aplikace na disku v rámci vydavatele místě.
• Výpočet a prezentace informací založena na uživatelském vstupu.

V zájmu úplné zveřejnění, moje vlastní zkušenost až do tohoto bodu byl ve vývoji malé, samostatné řešení, typu, které byste mohli popsat jako obvykle pluginů. Jednalo se dynamické UI komponent, jako jsou kolotoče obrazu, interaktivní mapy a Twitter / Flickr vychytávkami. V době prvního pustily s jazykem JavaScript, jQuery byl populární, snadno se učí a dovolil mi, abych se rychle zvednout základy potřebné pro projekty jsem pracoval na. Nicméně tito byli všichni samostatné jednotky a nemá potřebu komunikovat s jiným kódem, nebo jako součást větší aplikace.

První pokus

Po ukončení první fáze projektu, to stalo se bolestně jasné, že jsem se zabýval zcela jiným zvířetem, než to, co jsem byl zvyklý. Poté, co měl malou zkušenost v organizaci kódu, můj kód rychle stal se zmatený, neefektivní a opakující se. Jako výsledek, první část toho, co by se stalo mnohem větší žádost byla pomalé k načtení. Ve skutečnosti to trvalo osm sekund generovat, že jediný důkaz pojetí. Velkou změnou bylo potřeba, a když jsem se za pomocí malé knihovny jako databáze Dean Edwarda nebo John Resig Simple JavaScript dědické vzor pro přidání třídy založené na dědictví jQuery, jsem se rozhodl jít ještě o krok dále.

To, co jsem chtěl, bylo kompletní, zralý rámec, v němž lze vytvářet své první OO aplikaci. Něco, co by ve skutečnosti mi průvodce celým procesem. Při přezkoumávání dostupných knihoven jsem se rozhodl přijmout Yui 3 z následujících důvodů:

• Integrovaný, dědičnost aplikace založená na podporu rozvoje, včetně atribut třídy a řízení.
• Dlouhodobé řešení:
  • Podpora standardů a přístupnosti.
  • Financovány z velké známé organizace, Yahoo!
  • Spojeny s významnými jmény jako Douglas Crockford a Nicholas Zakas a Stoyan Stefanov .
• Optimalizaci výkonu:
  • Počáteční vklad soubor pouze 7kB.
  • Lazy-naložené moduly na zakázku.
  • CDN dodání.
• Pestrá a komplexní dokumentace:
  • Yahoo! Developer Network
  • YUI 3 Dokumentace API
  • YUI Theater
  • Knihovna YUI
  • YUI blog
• Starší, konzistentní vývoj mezi verzí.
• Integrované nástroje v YUI Compressor a YUIDoc a Yui Builder a Console týden
• Není to jen JavaScript, CSS rámec taky.

Trvat dva

Integrace Yui 3 přinesl několik přímých a nepřímých přínosů k projektu:

• Dědičnost na bázi architektury a třída vedení přes atribut rozhraní a základní a Widget třídy vyrábějící výkonný, opakovaně použitelné a organizované zákoníku
• Oddělení prezentace od modelu a dat pomocí Widget třídu k tomu, aby alternativní názory (inline nebo nanášení) na základě umístění aplikace na disku v rámci webu.
• Sandboxu a dynamický modul začlenění prostřednictvím YUI.use ().
• Cross-browser konzole ladění pomocí Yui konzoly .
• Na úspory, optimalizaci výkonu pomocí YUI Compressor v Eclipse.
• Snadná integrace a integrace již existujících jQuery pluginů.
• Na uložení, automatické kód dokumentace pomocí YUIDoc .

Konečný výsledek byl spokojený klient a hotový výrobek se sub-sekundových časech zatížení (zapamatování trvalo 8 sekund pro načtení první důkaz pojetí).

Zkušenosti získané

Vyberte ten správný nástroj pro práci

Při čtení tohoto příspěvku jsem si jistý, že někteří čtenáři budou vnímat jako anti-jQuery. Vůbec ne. jQuery je fantastický projekt zodpovědný za mnoho inovací. Ale stejně jako u jakéhokoliv nástroje, má své silné stránky a zamýšlený účel. Její síla spočívá v normalizaci prohlížeči nesrovnalosti, snižuje překážky vstupu na trh pro nováčky a zlepšení účinnosti zkušených programátorů. Primární vzdělávání, který vyšel z projektu bylo, že se nelze spoléhat na jeden nástroj pro každou práci. YUI staví na tom, co jQuery může poskytnout svoji nabídku také dobře architekturu aplikace rámce. Ale je třeba říci, že to něco stojí, viz následující bod.

Strmá křivka učení

Musíte trpělivost, a to zejména při psaní své první aplikace s velmi neznámém knihovny jako já. Nicméně přínos je obrovský. Do učení jinou knihovnu, bude nejen vaše schopnosti základní JavaScript zlepšení, budete také rozvíjet hlubší pochopení toho, jak knihoven práce a jejich přínosem. Snažím se naučit něco nového o YUI každý den a čím víc se učím, tím víc jsem v úžasu na myšlení a naprostý talent, který je pryč do budování YUI.

Načítat pouze obsah, když ji potřebujete

I když je to určitě programově jednodušší načíst vše, co budete potřebovat předem, zvýšení výkonu získal jako přímý důsledek pomalé načítání obsahu pouze tehdy, když ji potřebujete, je obrovská. To byl jeden z klíčových faktorů, které přispívají k výrazně zlepšit výkon aplikace.

Interakci s DOM co nejméně

Tento bod se nevztahuje na konkrétní použité knihovny. Do mezipaměti požadované DOM prvky a využití HTML šablon více, UI zobrazování času výrazně snížil. Uzly mohou být do mezipaměti pomocí Y.one (), zatímco uzel seznamy mohou být snímány Y.all (). Také Y.Node.create () je velmi užitečné při převádění efektivně velké textové řetězce HTML DOM prvky před zavedením.

Se učí například použít CDN

Při použití Yui je CDN dodané knihovny jsme se rozhodli dodat všechny projektu majetek přes CDN. Toto bylo pravděpodobně příští největší prospěšný faktor k zlepšení výkonu.

Hospoda, sub rámus

Pro ty zkušené programátory tam, snažte se smát tento jeden. Poté, co byla použita k psaní o málo víc než pluginy v minulosti, neměl jsem tušení, jak aplikace by měla komunikovat interně. I po přečtení "Vlastní akce umožňují, aby zveřejnila zajímavé momenty, akce ve vaší vlastní kód tak, že ostatní prvky na stránce se mohou přihlásit na tyto události a reagovat na ně," Pořád to uniklo.

Jak to dopadá, Yui zvykem událostí publish-and-subscribe model funguje krásně na inter-třídy a mezi objekt komunikace. Můžete si dokonce objednat před a po na události a zahrnují dynamické logiku k potlačení varu na základě určitých podmínek.

Integrace osvědčených postupů do workflow

Pomocí Eclipse se nám podařilo integrovat JSLint a Yui kompresor do procesu sestavení. Jednoduše řečeno, je pokaždé, když Ctrl / Cmd + S si JavaScript kód ověřeny a optimalizovány. To znamená, že jste proti testování optimální, výrobní třídy kódu z prvního řádku kódu. To také znamená, že nebudete zapomenout na optimalizaci v horečném závěrečném závodě na dodací lhůty.

Učení Yui v práci

I když každý má jiný styl učení, myslel jsem si, co sdílet zdroje jsem se učit Yui s konkrétním cílem na mysli.

• Podívejte se na příslušné YUI Theater epizody získat všeobecný přehled o knihovně nebo se dozvědět konkrétní modul. Mohu vřele doporučuji začít s:
  • Erica je Miraglia Vítejte na YUI 3
  • Todd Kloots na YUI 3 cukr
  • Matt Sweeney je YUI 3 Performance
  • Luke Smith je ladění v YUI 3
  • Isaac Schlüeter na řešení problémů s YUI 3
  • Eric Ferraiuolo na webové vývoj aplikací s YUI 3
  • Luke Smith je akcí Evolved
• Přečtěte si o YUI na Yahoo! Developer Network . Snažím se číst trochu každý týden a dozvědět se více pokaždé, když jsem znovu přečíst.
• Přečtěte si API dokumentaci. Pokud nemůžete najít na Yui divadla nebo na Developer Network, kopat do API. To platí i přečíst kód přímo.
• Číst a psát dotazy na fóra o YUILibrary.com .
• Hrát hodně a bavte se!

Závěr

YUI 3 je plně vybavený, vyzrálý a neustále se vyvíjející knihovna vhodná pro malé i velké projekty. Jako přední koncové aplikace webové stále složitější, bude potřeba knihoven, jako je Yui růst. Zatímco pro nezasvěcené to může být skličující zážitek na první pohled, pokud se budete držet s ním budete odměněni.

Hledat konverzace: Bloglines | technorati

Sdílet a rozšiřovat: Záložka se Del.icio.us | Digg to! | reddit!

YUIConf 2010 vyprodají, představila dva speciální večerní akce

26 října 2010 v 3:35 hod. od Jenny Donnelly | V rozvojových a Yui Akce | Komentáře Vypnuto

YUIConf 2010 je vyprodáno! Díky všem, kteří se zaregistrovali - těšíme se na setkání s vámi všemi v listopadu. Jsme nyní uvedení poslední úpravy na našem plánu, ale můžete se podívat na to, co máme na skladě zde: http://yuilibrary.com/yuiconf2010/schedule.php~~dobj .

Mezi hlavní výhody patří:

• A Node.js sledovat, kde se můžete rozjet na všechny zajímavé, co se děje s server-side JavaScript. Máme Node.js tvůrce Ryan Dahl prezentaci a sedí na panelu o budoucnosti frontend inženýrství, a máme je Yui Dav Sklo, jeden z první demonstrovat Uzel založený na postupné zvyšování pomocí off-the-police komponenty knihovny (od Yui 3), které ukazují, co budoucnost vypadá.
• YQL trať k vám až do rychlosti o tom, jak využít YQL přístup k datům z libovolného místa na internetu. YQL tým sám postará o to, říct o jejich nejnovější práce.
• Případové studie, které vystavují, jak v reálném světě projekty realizovat Yui v náročných produkčních prostředích. Inženýři z Flickr a Yahoo! Mail bude po ruce, a Eric Ferraiuolo - vítěz ceny PayPalX pro jeho poslední práce - zde bude mluvit o tom, Tip na webu , jeho poslední YUI 3 na bázi projektu.
• Promyšlené prezentace o tom, jak poskytovat mobilní / dotykový zkušenosti z praxe
• Hluboké ponory na modulů Yui, od automatického dokončování do CSS sítí, aby se galerie příspěvky.

Všechny semináře jsou archivovány na video a je k dispozici na YUI Theater krátce po konferenci.

Jsme rádi, že spojí své síly s Yahoo! Developer Network hostit dva speciální večerní akce, které budou otevřené pro širokou veřejnost. Takže i když konference je již vyprodaná, každý může zúčastnit večerní akce po přihlášení na Meetup.com. Prostor je omezený, takže zaregistrujte se brzy! (YUIConf účastníci nemusí zaregistrovat.)

YUIConf 2010 Panelová diskuse: "Budoucnost vývoj webových" moderuje Ben Galbraith a Dion Almaer
08.11.2010, 06:30 až dvacet hodin

Přihlaste se k účasti na panelové diskusi na http://www.meetup.com/BayJax/calendar/15239592/~~pobj .

YUIConf spojila tento význačný panel prozkoumat blízkou budoucnost oboru v době velké změny. Naplánované jsou panelisté Elaine pramice, zakladatel a architekt nadstavbu na Meebo, Douglas Crockford, JavaScript architekt v Yahoo!, Tantek Celik, technolog a autor; Ryan Dahl, tvůrce Node.js, Joe Hewitt Facebook, tvůrce Firebug a jeden z Nejstahovanější mobilní aplikace všech dob Facebook pro IOS), Tomáš SHA, YUI zakladatel na Yahoo!.

YUIConf 2010 Keynote: "Projekt Future" Douglas Crockford
10.11.2010, 06:30 až dvacet hodin

Přihlaste se k účasti na klíčovou myšlenku na http://www.meetup.com/BayJax/calendar/15239717/~~pobj .

Ve vývoji softwaru, sníme o architektuře. Toto je pravdivý příběh takového snu.

Sezení je omezen na tyto speciální akce, tak se určitě brzy zaregistrovat!

CC fotografie:

• Dion Almaer: http://www.flickr.com/photos/seanosh/3306058997/
• Tantek Celik: 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/

Fotografie použité s laskavým svolením slovy:

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

Hledat konverzace: Bloglines | technorati

Sdílet a rozšiřovat: Záložka se Del.icio.us | Digg to! | reddit!

Vyhlášení YUI 2.8.2 - důležitou aktualizaci zabezpečení pro všechny uživatele Yui 2.4.0-2.8.1

25.října 2010 v 11:34 Eric Miraglia | V rozvoji záložky | 6 Komentáře

Tým YUI propuštěn YUI 2.8.2 dnes. Tato verze opravuje vadu, týkající se zabezpečení , které bylo zavedeno v Yui 2 infrastruktury komponenty Flash začátku s YUI 2.4.0 vydání. Tato vada umožňuje JavaScript injekce využije být vytvořen před domén, které hostí ovlivněna Yui .swf soubory. Navštivte bulletin zabezpečení pro YUI 2.8.2 pro úplné informace o tom, jak identifikovat a nahradit příslušné soubory .

Pokud vaše stránky hostí Yui 2 rozdělení mezi verzí 2.4.0 a 2.8.1, která obsahuje tyto soubory, je touto chybou zabezpečení.

Pokud vaše stránky zatížení Yui 2 z CDN Yahoo odst. yui.yahooapis.com ) nebo z CDN Google odst. ajax.googleapis.com ) a soubory nejsou umístěny na vlastní doméně, máte nejsou dotčena. YUI 3 není tímto problémem ohrožena.

Zde si můžete stáhnout YUI 2.8.2 (a opravenou verzi YUI 2.4.0-2.8.1) ze stránky YUILibrary.com stažení .

Prohlédněte si bulletin zabezpečení informace o tom, jak zjistit, zda vaše stránky je ovlivněna tím, jak k nápravě problému, a jak ověřit opravu.

Hledat konverzace: Bloglines | technorati

Sdílet a rozšiřovat: Záložka se Del.icio.us | Digg to! | reddit!

V Yui 3 Galerie: Rozšíření pro SVG, vytvořený pro SVG Wow!

18.října 2010 v 11:18 Vincent Hardy | V rozvoji a Yui 3 Galerie záložky | 2 Komentáře

Úvod

SVG ( Scalable Vector Graphics ) poskytuje deklarativní syntaxi interaktivních animovaných 2D grafiku: Tvary, obrázky a text. SVG podpora je součástí v HTML 5 specifikaci a SVG je realizován ve všech hlavních prohlížečích, včetně Internet Exploreru od Microsoftu ve verzi 9 .

V SVG-wow.org vitríny webových stránek, co lze udělat s SVG dnes. Ukázky na této webové stránce byly vytvořeny pro SVG Otevřít konferenci, kde Wow SVG! zasedání byly tradici již několik let. SVG Wow! zasedání byly odstartovány Dean Jackson, pak ve spolupráci s sebou a pak pokračoval Erik Dahlström . Erik a já jsem collorated na zasedání pro rok 2009 a 2010 vydání konference.

V uplynulých dvou letech, dema stále více využívají AJAX rámců, aby uplatňovaly své funkce pro SVG místo (nebo vedle) HTML. YUI je nejrozšířenější rámce na webové stránce, která využívá jak YUI 2 a 3 Yui .

Začnu s rychlým přehledem SVG a pak diskutovat o typ demonstrací, které YUI podporovaný a rozšíření, jsem přidal do galerie Yui 3 , aby to fungovalo s SVG. (Tato rozšíření jsou nyní zdarma k použití v souladu s podmínkami BSD licencí Yui je .)

SVG přehled

Stejně jako HTML, SVG je W3C. Poskytuje syntaxi pro popis základní tvary v obdélníky, kruhy, čáry, polygony, elipsy, křivky), libovolných tvarů v popsány z hlediska segmentů cesty, které mohou být čáry, kvadratické nebo kubické Bézierovy křivky), text a obrázky.

Následující obrázek je snímání obrazovky z alternativní stylesheet například na SVG-wow.org a ukazuje některé vlastnosti SVG ve hře: Bohaté vykreslování (stínové efekty, přechody, vzory) a jednoduché a složité tvary.

Vzhledem k tomu, SVG obrázky jsou definovány z hlediska geometrie a vykreslování atributů, je možné, aby se staly v libovolném rozlišení. V důsledku toho může SVG obrazy mohou být zmenšen na libovolnou velikost při zachování vysoké kvality vykreslování, například při tisku (už žádné zubaté hrany).

Následující přiblížení-v pohledu ukazuje stejný SVG obrázek je uvedeno výše, ale poskytnutý na vyšší rozlišení při zachování vysoké kvality.

Stejně jako HTML, SVG podporuje interaktivitu: je možné přidat posluchače událostí na grafických objektů pro myši nebo klávesnice interakcí. Samozřejmě, SVG podporuje Document Object Model, který usnadňuje manipulaci rozdílné vlastnosti grafických objektů, jako je jejich geometrie nebo renderování stylu.

Tam je hodně specifikace SVG: Pokročilé vykreslování stylů (hlazení, plnicích, vzory, sklony), filtrační účinky (rozostří, stíny, barevné matice), CSS styling, pokročilé textové funkce (jako je text na cestě) a deklarativní animace . Můžete se podívat na odkazy na konci tohoto příspěvku se dozvědět více o formátu SVG funkcí.

SVG a HTML

S HTML5 , SVG můžete být inline v HTML dokumenty bez dalších okolků. Prohlížeče se začínají podporovat tuto funkci (např. Firefox 4 ). V současné době, všechny hlavní prohlížeče podporují SVG inline v XHTML, který poskytuje stejné funkce. SVG v XHTML prostě vyžaduje, aby obory názvů jsou řádně přihlášen.

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

         <Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1"
          xmlns: XLink = "http://www.w3.org/1999/xlink"
          width = "100%" height = "100%" id = "backgroundSVG">
             <-! SVG obsahu zde ->
         </ Svg>
     </ Body>
 </ Html>
        

Všechny ukázky kódu na této stránce použít tento způsob inlining SVG v XHTML.

SVG a YUI

SVG podporuje deklarativní animace. Například, můžete animovat poloměr <circle> prvku, jako je tento:

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

<animate> tag je půjčil si od SMIL specifikace a spolu s ostatními prvky animace, poskytuje velmi výkonný motor animace SVG.

Bohužel, až do nedávné doby, prohlížeče podpora pro SVG animace byla rozptýlená. To se zlepšila v posledních dvou letech, ale Microsoft dal jasně najevo, že nebude podporovat SVG deklarativní animace v IE 9.

Jako výsledek, většina z dema na SVG-wow.org webové stránky pomocí skriptů animace místo deklarativní animace. Na jedné straně je to nešťastné, protože deklarativní animace jsou účinnější než skriptovaných animací. Na druhou stranu, může skriptované animace být velmi flexibilní, a jejich práce je v celé implementace velmi dobře.

Potřeba dobré skriptované animace řešení je to, co řídil používání Yui na SVG-wow dema. Nicméně, dema používat i další funkce, Yui, zejména Loader a uzlů modulů.

Animace SVG s YUI

Dema na SVG-wow použít Yui k vytvoření elastické bicích beaty a tvarové tvary či rotující text a tvary například. Použití Yui s SVG vyžaduje několik Yui rozšíření, budu popisovat to jen na chvíli.

rotující text a tvary	morphing tvary
elastické buben bije

Následující ukazuje, jak YUI přijde vhod jednoduše animovat a manipulovat s SVG grafiku.

Animace SVG transform atribut

Všechny SVG grafické prvky mají transform atribut. To atribut určuje 2D afinní transformaci na prvky, které lze použít v měřítku, zkosení, otočení nebo přeložit.

SVG-wow.org Yui rozšíření pro SVG umožňují animace transform atribut takhle:

 var anim = new Y.Animate ({
     uzel: "# circleA"
     od: {
         transformace: {tx: 0, ty: 0, sx: 2, sy: 2}
     }
     na: {
         transformace: {tx: 20, ty: 20, sx: 1, sy: 1}
     }
     transformTemplate: "přeložit (# tx, ty #), měřítko (# sx, sy #)",
     Doba trvání: 1
 });
        

Podívejte se na animace transformace testy.

Všimněte si, že transformace hodnoty jsou uvedeny v podmínkách "složek" (jako je tx nebo ty ), které jsou sloučeny do hodnoty pomocí transformTemplate našel na objektu animace konfigurace.

Šablona je flexibilní mechanismus pro budování hodnot při transformaci samostatné díly, aby bylo snadno vypočítat animované hodnoty. To je příklad, kdy animace YUI modelu povoleno větší flexibilitu (a výraznější výkon) než animace SVG je SMIL prvku, animateTransform ). S cílem vytvořit animaci popsané výše by tento ekvivalent SMIL prohlášení byly:

 <circle ...>
     <AnimateTransform attributeName = "transformace" type = "translate"
                       z = "0,0" to = "20,20" dur = "1s" begin = "scaleAnim.begin" />
     <AnimateTransform id = "scaleAnim" attributeName = "transformace" type = "měřítko"
                       z = "2,2" na 1,1 "=" dur = "1s" begin = "neurčité" />
 </ Kruh>
        

Všimněte si, jak výše úryvek vyžaduje více animateTransform prvky, které mají být synchronizovány: begin atribut první animace je nastaven na scaleAnim.begin synchronizovat start dvou animací. Příjemnou vlastností motoru animace Yui je, že načasování animace (tj. začátek, konec a trvání) mohou být sdíleny vztahuje na více prvků vlastností.

Rozšíření YUI pro animaci SVG transformace je používán značně, jako například v kameře a animované texty příklady. Bývalý používá rozšíření Yui 3, zatímco druhý používá rozšíření Yui 2.

Animace geometrii

Základní geometrie

Animace SVG geometrii s YUI je poměrně jednoduché. V následujícím příkladu se pohybuje dané <rect> elementu šířka, výška a rohové poloměry slovy:

 var anim = new Y.Animate ({
     uzel: "# recta",
     od: {
         šířka: 200,
         výška: 100,
         rx: 5,
         Ry: 5
     }
     na: {
         šířka: 300,
         výška: 100,
         rx: 10,
         ry: 10;
     }
     Doba trvání: 2,
     uvolnění: Y.Easing.elasticOut
 });
        

Podívejte se na tvar animace testy.

Jak bylo později, některé změny pod kapotou Yui dělal tuto práci. Ale z pohledu vývojáře, tato animace funguje přesně stejným způsobem jako animace jiného HTML atributu nebo CSS vlastnosti.

<path> je d atribut

Jedním z geometrie atribut je trochu zvláštní: d atribut na <path> prvku. <path> prvek se používá pro libovolně složité geometrie. <path> popsat jakýkoliv tvar. Jeho d atribut popisuje geometrii, pokud jde o cesty, které mohou být segmenty čáry, oblouky, kvadratické nebo kubické Bézierovy křivky (tam je několik příkazů, ale všechny mapy se Bézierových křivek).

Animace d atribut vyžaduje také trochu rozšíření na animací motoru Yui, ale s tímto rozšířením, d mohou být animovány atribut jako každý jiný, jak je uvedeno níže.

 var anim = new Y.Animate ({
     uzel: "# pathA"
     od: {d: "M 0 0 50 0 C 100 50 100 100 C 50 100 0 50 0 0 Z"}
     na: {d: "M 0 0 C 100 0 100 0 100 100 0 100 0 C 100 0 0 Z"}
     Doba trvání 1s,
     uvolnění: Y.Easing.bounceBack
 });
        

Podívejte se na cestami animace testy, které ukazují, kromě jiného, ​​zaškrtnutí morfování do kříže v průběhu času, jak jsou zastoupeny v následujících obrázků.

Gandhi citace demo používá tuto techniku ​​animace d atribut morph tvary do postavu Gándhího.

Animace další atributy SVG

Samozřejmě, YUI animace není omezena na geometrické atributy. Každý atribut SVG mohou být animovány. Například následující animace oživuje poloměr rozostření na vodorovné rozostření filtr.

 / / SVG úryvek
 <Filtr ..
     <FeGaussianBlur id = "blurFilter" stdDeviation = "10 10" ...  />
 </ Filtr>

 / / JavaScript animace
 var anim = new Y.Animate ({
     uzel: "# blurFilter"
     od: {stdDeviation: [0, 20]},
     na: {stdDeviation: [0, 0]}
 });
        

Podívejte se na filtru animace testy. Následující obrázek ukazuje, jak oživovat rozostření Gaussovo mohou být použity k přechodu mezi státy tlačítko.

Tento typ efektu je používán v rychlém efekt rozostření demo, i přesto, že demo nepoužívá Yui animaci, ale deklarativní smil animační prvky (na úkor běží pouze v prohlížečích podporujících tuto funkci, jak bylo vysvětleno dříve).

Animace vlastnosti CSS

Stejně jako HTML, SVG elementy mají atributy a také CSS vlastnosti. SVG má některé specifické vlastnosti CSS . Tyto vlastnosti mohou být animovaný, někdy vytvářejí překvapující účinek. Například stroke-dashoffset lze majetek použít k simulaci kreslení tvar.

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

 / / JavaScript
 var anim = new Y.Animate ({
     uzel: "# recta",
     na: {"zdvihu dashoffset": 0},
     doba trvání: 0,25
 });
        

Podívejte se na tahu animace testy.

Graffitis demo používá tuto techniku ​​(i když bez Yui animace), a tak se kamera demo (tentokrát s YUI animace).

YUI a SVG: Pod kapotou

SVG-wow.org web používá jak YUI 2 a 3 a Yui má SVG-specifická rozšíření pro obě strany. V následující části tohoto článku se zaměřuje na rozšíření Yui 3.

Prodloužení bylo potřeba, aby:

• aby Yui specifika práce s DOM v SVG
• představují rozdíly implementace
• přidat podporu pro nové typy atributů, jako je SVG transformace
• přidat další animace časování a synchronizace funkcí

Účetnictví pro vykreslování SVG DOM specifika

Jak bylo popsáno výše, mohou být animovány atributy SVG deklarativní s prvky jako <animate> . Pro podporu SVG je animace modelu, SVG hodnoty atributů mít jak animovaný a základní hodnoty. Například, r atribut na <circle> prvku je SVGAnimatedLength definován takto:

 Rozhraní SVGAnimatedLength {
   readonly atribut SVGLength baseVal;
   readonly atribut SVGLength animVal;
 };

Jako výsledek, a to i v implementacích, které nepodporují deklarativní animace, musíme se dostat dolů do baseVal číst atribut má hodnotu:

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

Rozšíření bylo zapotřebí, aby animace motor k účtu pro SVG atributy "neobvyklá hodnota modelu. 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. Například:

  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. Například:

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.

Závěr

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.

Odkazy

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

Hledat konverzace: Bloglines | technorati

Sdílet a rozšiřovat: Záložka se Del.icio.us | Digg to! | 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. ( Původní zdroj. ) #
  
• 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.” #
  

Hledat konverzace: Bloglines | technorati

Sdílet a rozšiřovat: Záložka se Del.icio.us | Digg to! | 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
• a mnohem, mnohem víc!

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.

Hledat konverzace: Bloglines | technorati

Sdílet a rozšiřovat: Záložka se Del.icio.us | Digg to! | reddit!