Yahoo! User Interface Blog (YUIBlog)

CSS Quick Tip: Hoe maak je een "float drop" in IE6 te voorkomen

28 oktober 2010 om 13:52 door Thierry Koblentz | In CSS 101 , Ontwikkeling | 4 Opmerkingen

Hoewel dit probleem wordt wel een " float druppel "of een" drop float ", de kolom druppels niet een drijver zijn ... heeft slechts breder zijn dan de ruimte die voor. Merk op dat dit door de spec en het is een gemeenschappelijk gedrag in verschillende browsers, als een kolom is "te breed", dan zal het dalen.

Wat maakt IE 6 staan, is dat deze browser niet volledig ondersteunt de width woning (noch height wat dat betreft). Vandaar dat het laat containers steeds meer op hun inhoud. Het is deze groei dat de daling van maakt, want de doos passen niet in de ontworpen ruimte.

Meestal is de boosdoeners zijn elementen die niet wikkelen (bijvoorbeeld plaatjes, URL's, enz.), maar font styling (bijvoorbeeld IE en cursief ) kunnen ook verantwoordelijk zijn.

Bijvoorbeeld, om de juiste kolom druppel op YUIBlog in IE 6, alles wat ik moest doen is de stijl een van de afbeeldingen in de juiste rail met een breedte van meer dan 210 pixels. Dit beeld dwingt IE 6 breder maken van de rechterkant, die dan niet meer passen naast de linker kolom.

De gebruikelijke fixes:

word-wrap: break-word;

Strings wrap door het breken aan de rechterrand van het vak.

wbr met wbr:after {content:"\00200B"} voor Opera

Het wbr element vertegenwoordigt een regeleinde kans. Plaatsen van wbr in lange s snaren kan de browser om een nieuwe regel toe te voegen als dat nodig is.

overflow-x:hidden;

Alle inhoud breder dan de container cut-off aan de rechterrand van de genoemde doos.

Merk op dat de eerste twee oplossingen werken alleen op strings en zal geen afbeeldingen, enz. te voorkomen dat de uitbreiding van de doos.

Bij bekende oplossingen niet op korte

Een paar weken terug, werd ik gevraagd om een ​​"float drop" vast te stellen op een van de Yahoo! Finance pagina's. In de moderne browsers, werd een lange reeks uit te steken van de rechter rail (screenshot), maar in IE 6 diezelfde snaar de juiste kolom vallen onder de vouw (screenshot). Helaas is dat de inhoud kwam van een provider, zodat het bewerken van de mark-up was geen optie.

Vanwege de aard van de string, die een door komma's gescheiden lijst van symbolen, de fixes boven waren niet bevredigend. Breaking die lijst op een willekeurige plaats was beter dan snij het af, maar nog steeds niet een levensvatbare oplossing ...

Het maken van IE 6 gedragen als de grote jongens

De truc om IE 6 te gedragen als elke moderne browsers die er is om de stijl van de doos met een negatieve rechtermarge (plus position:relative ).

Live Demonstratie

Zonder de fix

Screenshot voor degenen die deze pagina niet zien in IE 6.

Met de fix

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

De negatieve marge kan elke waarde zolang deze waarde groter is dan de delta tussen de toegewezen breedte en de eigenlijke breedte van de uitgebreide doos. Het is die verklaring dat de daling vlotter voorkomt. Het doel van position:relative is om IE toont de inhoud buiten de grenzen van de bovenliggende container.

Omdat ik graag stijlelementen hetzelfde over de hele linie, heb ik meestal niet zandbak deze regel.

Wat u moet weten

Deze hack zorgt ervoor dat de kolom in plaats, maar dat betekent dat de container niet voorkomen dat breder. Dit betekent dat u niet de stijl van het element met een achtergrond of een grens, omdat ze zouden worden geschilderd buiten de wrapper. Hier is een screenshot van wat achtergrond en rand moet eruit zien als toegepast in combinatie met deze techniek in IE 6:

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | Digg it! | reddit!

jQuery en YUI 3: A Tale of Two JavaScript-bibliotheken

27 oktober 2010 om 14:08 door Mark Rall | In Ontwikkeling , YUI Implementaties | 5 Commentaren

Onlangs had ik de kans om mijn eerste JavaScript front-end toepassing te bouwen. Wat volgt is een kort verhaal van de ontdekking en de evolutie die tot stand komt wanneer het proberen om hulpmiddelen die niet geschikt zijn voor de baan bij de hand te gebruiken. Het is een verslag van het leren verworven door het ontwikkelen van hetzelfde front-end applicatie met behulp van twee zeer verschillende bibliotheken, jQuery en YUI 3. Details van de opdrachtgever en het project zijn met opzet weggelaten.

Overzicht

Het project omvatte de refactoring van een aantal uiteenlopende Flash gereedschappen in een interactieve toepassing op basis van open standaarden voor een grote inhoud uitgever. Van groot belang is, moest de applicatie sterk worden geoptimaliseerd met een kleine eerste foot print door het grote aantal dagelijkse paginaweergaves ontvangt de klant. Verschillende fasen werden van, waarbij de eerste is een eerste proof of concept.

Het concept betrokken zijn de ontwikkeling van een beeld van wat zou het ingevulde aanvraagformulier te zijn. Het bestond uit:

• Een eerste zaad bestand (<1 KB) verantwoordelijk voor het dynamisch laden van alle kaders (bv. jQuery of YUI 3) en de initiële aanvraagdossier.
• De ontwikkeling en integratie van jQuery plugins om vorm element styling en te valideren alsmede dynamische grafiek visualisaties te ondersteunen.
• Het genereren en de bevolking van UI, op basis van gebruiker invoert, Standaardinstellingen en de toepassing de locatie binnen de site van de uitgever.
• De berekening en presentatie van informatie op basis van de gebruiker input.

In het belang van volledige openheid, had mijn eigen ervaring tot dit punt geweest bij de ontwikkeling van kleine, standalone-oplossingen, het soort waarvan je zou kunnen omschrijven als typisch plugins. Deze omvatten dynamische UI-componenten zoals beeld-carrousels, interactieve kaarten en Twitter / Flickr widgets. Op het moment van de eerste ploeteren met JavaScript, jQuery was populair, gemakkelijk te leren en kon ik snel halen de basis die nodig is voor de projecten waar ik mee bezig was. Echter deze waren staande eenheden geen noodzaak om te interageren met code of deel van een groter toepassing.

Eerste poging

Op de voltooiing van de eerste fase van het project, werd het pijnlijk duidelijk dat ik te maken had met een heel ander beest dan wat ik gewend was. Gelet had weinig ervaring in de code organisatie, mijn code werd al snel chaotisch, inefficiënt en repetitief. Hierdoor het eerste deel van wat een veel grotere toepassing worden was traag. In feite zou het nog acht seconden nodig om dat ene proof of concept te genereren. Een grote verandering was nodig en terwijl ik had overwogen met behulp van een kleine bibliotheek, zoals Base decaan Edward's of eenvoudige JavaScript John Resig de erfenis patroon op klassen gebaseerde overerving toe te voegen aan jQuery, heb ik besloten om een stap verder te gaan.

Wat ik wilde was een complete, volwassen kader om mijn eerste OO applicatie te ontwikkelen. Iets dat effectief zou me begeleiden door het proces. Bij het beoordelen van de beschikbare bibliotheken heb ik besloten om YUI 3 vast te stellen om de volgende redenen:

• Geïntegreerde, erfenis-based applicatie ontwikkeling ondersteuning inclusief attribuut en klas management.
• Lange termijn oplossing:
  • Ondersteuning voor standaarden en toegankelijkheid.
  • Gefinancierd door een grote bekende organisatie, Yahoo!
  • In verband met gerespecteerde namen als Douglas Crockford , Nicholas Zakas en Stoyan Stefanov .
• Optimalisatie van prestaties:
  • Eerste seed-bestand van slechts 7KB.
  • Lazy-geladen modules op aanvraag.
  • CDN levering.
• Gevarieerde en uitgebreide documentatie:
  • Yahoo! Developer Network
  • YUI 3 API Documentatie
  • YUI Theater
  • YUI Bibliotheek
  • YUI Blog
• Volwassen, consistente evolutie tussen releases.
• Geïntegreerde tools in YUI Compressor , YUIDoc , YUI Builder , en Console .
• Niet alleen JavaScript, een CSS-kader ook.

Take Two

De integratie van YUI 3 bracht een aantal directe en indirecte voordelen voor het project:

• Inheritance gebaseerde architectuur en klasse management door middel van de Kenmerk -interface, en Base en Widget klassen de productie van performante, herbruikbare en georganiseerde code.
• Scheiding van de presentatie van model en de gegevens met behulp van de Widget klasse om alternatieve standpunten (inline of overlay) op basis van de locatie van de toepassing binnen de site weer te geven.
• Sandboxing en dynamische module insluiting door YUI.use ().
• Cross-browser console debuggen met behulp van YUI Console .
• Op save, performance optimalisatie met behulp van YUI Compressor in Eclipse.
• Eenvoudige integratie en integratie van de reeds bestaande jQuery plugins.
• Op save, geautomatiseerde code documentatie met behulp van YUIDoc .

Het uiteindelijke resultaat was een tevreden klant en een afgewerkt product met minder dan een seconde laadtijden (herinneren duurde het 8 seconden de eerste proof of concept te laden).

Geleerde lessen

Selecteer de juiste tool voor de job

Bij het lezen van dit bericht Ik weet zeker dat sommige lezers zal dit zien als anti-jQuery. Helemaal niet. jQuery is een fantastisch project verantwoordelijk voor veel innovaties. Maar, zoals met elke tool, het heeft zijn voordelen en beoogde doel. Zijn kracht ligt in het normaliseren van browser inconsistenties, het verlagen van de drempel voor toetreding voor de beginnende en de verbetering van de efficiëntie van ervaren programmeurs. De primaire leren die kwam van het project was dat je niet kan beroepen op een gereedschap voor elke klus. YUI bouwt voort op wat jQuery kan door ook het aanbieden van een goed architected applicatie framework. Maar het eerlijk is om te zeggen dat het komt tegen een kostprijs, zie het volgende punt.

Steile leercurve

Je moet geduld, vooral als het schrijven van uw eerste applicatie met een onbekende bibliotheek als ik. Echter, de uitbetaling is immens. Door te leren een andere bibliotheek, zal niet alleen uw core JavaScript-vaardigheden te verbeteren, zult u ook een dieper begrip van hoe bibliotheken werken en de voordelen te ontwikkelen. Ik probeer iets nieuws over YUI elke dag te leren en hoe meer ik leer, hoe meer ik ben onder de indruk van de gedachte en pure talent dat er niet meer is in de bouw van YUI.

Alleen inhoud laden wanneer het nodig is

Hoewel het zeker is programmatisch makkelijker om gewoon alles wat u nodig heeft vooraf te laden, de performance verbeteringen opgedaan als een direct gevolg van luie laad-inhoud alleen wanneer je het nodig hebt is enorm. Dit was een van de belangrijkste factoren voor het drastisch verbeteren van de prestaties van de applicatie.

Interactie met de DOM zo weinig mogelijk

Dit punt heeft geen betrekking op de specifieke gebruikte bibliotheek. Door caching de vereiste DOM-elementen en het gebruik van HTML-sjablonen meer, UI rendering tijd fors gedaald. Nodes kunnen worden gecached met Y.one (), terwijl knooppunt lijsten kunnen worden vastgelegd met behulp van Y.all (). Ook Y.Node.create () was zeer nuttig bij het efficiënt omzetten van grote tekst snaren van HTML naar DOM-elementen voorafgaand aan het inbrengen.

Leren door bijvoorbeeld gebruik maken van een CDN

Bij het gebruik van YUI's CDN geleverd bibliotheek hebben we besloten om alle van het project activa over te dragen via CDN. Dit was waarschijnlijk de op een na grootste factor die bijdraagt ​​aan de prestaties te verbeteren.

Pub, onder drukte

Voor degenen die ervaren programmeurs die er zijn, probeer niet te lachen om deze. Na zijn gebruikt voor het schrijven van iets meer dan plugins in het verleden, had ik geen idee hoe applicaties intern te communiceren. Zelfs na het lezen van "Custom Events kunt u de interessante momenten of gebeurtenissen in je eigen code te publiceren, zodat andere componenten op de pagina kunnen zich abonneren op deze gebeurtenissen en reageren tegen hen: 'Ik heb nog steeds gemist.

Het blijkt dat, aangepaste gebeurtenis YUI's publish-and-subscribe model werkt perfect voor inter-klasse en inter-object communicatie. U kunt zelfs voor en na de abonneren op evenementen en onder andere dynamische logica om te borrelen te onderdrukken op basis van bepaalde voorwaarden.

Integreer de beste praktijk in uw workflow

Met behulp van Eclipse konden we JSLint en YUI Compressor te integreren in het bouwproces. Simpel gezegd, wordt elke keer dat je Ctrl / Cmd + S op de JavaScript-code gevalideerd en geoptimaliseerd. Dat betekent dat je het testen aan geoptimaliseerde-, productie-kwaliteit-code vanaf de eerste regel code. Het betekent ook dat u niet zult vergeten te optimaliseren in de hectische laatste race om de leveringstermijn.

Leren YUI aan het werk

Hoewel iedereen heeft een andere leerstijl, ik dacht dat ik te delen welke middelen ik vroeger YUI leren met een specifiek doel voor ogen.

• Bekijk de relevante YUI Theater afleveringen om een ​​algemeen overzicht van de bibliotheek te krijgen of een specifieke module te leren. Ik kan iedereen aanraden te beginnen met:
  • Eric Miraglia's Welkom bij YUI 3
  • Todd Kloots op YUI 3 Sugar
  • Matt Sweeney's YUI 3 Performance
  • Luke Smith Debugging in YUI 3
  • Isaac Schlueter op het oplossen van problemen met YUI 3
  • Eric Ferraiuolo op Web App ontwikkeling met YUI 3
  • Luke Smith's Evenementen Evolved
• Lees over YUI op Yahoo! Developer Network . Ik probeer een beetje te lezen elke week en meer te leren elke keer als ik opnieuw te lezen.
• Lees de API- documentatie. Als je het niet kunt vinden op YUI Theater of op de Developer Network, graven in de API. Het loont ook om de code direct te lezen.
• Lees en vragen posten op het forum op YUILibrary.com .
• Speel veel en veel plezier!

Conclusie

YUI 3 is een full-featured, volwassen en zich voortdurend ontwikkelende bibliotheek geschikt voor kleine tot grote projecten. Als front-end web applicaties steeds complexer worden, zal de behoefte aan bibliotheken, zoals YUI te laten groeien. Terwijl voor de niet-ingewijden kan het een ontmoedigende ervaring op het eerste zijn, als je de stok met, zul je beloond worden.

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | Digg it! | reddit!

YUIConf 2010 uitverkocht; aankondiging van twee speciale avond evenementen

26 oktober 2010 om 15:35 door Jenny Donnelly | In Ontwikkeling , YUI Evenementen | Comments Off

YUIConf 2010 is uitverkocht! Dank aan iedereen die zich heeft ingeschreven - we kijken uit naar jullie allemaal in november. We zijn nu de laatste hand op het programma, maar u kunt een kijkje nemen op wat we in petto hebben hier: http://yuilibrary.com/yuiconf2010/schedule.php .

Hoogtepunten zijn onder andere:

• Een Node.js volgen, waar u kunt opvoeren op alle spannende dingen die gebeuren met server-side JavaScript. We hebben Node.js maker Ryan Dahl presenteren en zittend op een panel over de toekomst van front-end engineering, en we hebben YUI's Dav Glass, een van de eersten om aan te tonen Node-gebaseerde progressieve verbetering met behulp van off-the-shelf componenten-bibliotheek (van YUI 3), waaruit blijkt hoe de toekomst eruit ziet.
• Een YQL spoor om u op de hoogte over hoe om gebruik te maken YQL om gegevens vanaf elke locatie op het internet. De YQL team zelf staat voor u klaar om u te vertellen over hun nieuwste werk.
• Case studies die bloot te leggen hoe de echte wereld projecten YUI te implementeren in veeleisende productieomgevingen. Ingenieurs van Flickr en Yahoo Mail worden bij de hand, en Eric Ferraiuolo - winnaar van een PayPalX prijs voor zijn recente werk - zal hier zijn om te praten over Tip het web , zijn nieuwste YUI 3-based project.
• Inzichtelijke presentaties over de manier waarop mobiele / touch ervaringen te leveren.
• Diepe duiken op YUI modules, van AutoAanvullen om CSS Grids naar Galerij bijdragen.

Alle sessies worden gearchiveerd om video en beschikbaar op YUI Theater kort na de conferentie.

We zijn verheugd om krachten te bundelen met het Yahoo! Developer Network op twee bijzondere avonden die zullen worden opengesteld voor het grote publiek te organiseren. Dus hoewel de conferentie is al uitverkocht, kan iedereen deelnemen aan de avonden door omhoog te ondertekenen op Meetup.com. Ruimte is beperkt, dus snel aanmelden! (YUIConf deelnemers hoeven niet aan te melden.)

YUIConf 2010 Paneldiscussie: "The Future of Web Development" gemodereerd door Ben Galbraith en Dion Almaer
08 november 2010, 06:30-twintig

Meld je aan voor de paneldiscussie bij te wonen http://www.meetup.com/BayJax/calendar/15239592/ .

YUIConf heeft samengebracht deze onderscheiden panel naar de nabije toekomst van het vakgebied te verkennen in een tijd van grote veranderingen. Geplande panelleden zijn onder andere Elaine Wherry, oprichter en frontend architect bij Meebo, Douglas Crockford, JavaScript architect bij Yahoo!, Tantek Çelik, technoloog en auteur; Ryan Dahl, de maker van Node.js, Joe Hewitt van Facebook, de maker van Firebug en een van de meest gedownloade mobiele applicaties aller tijden (Facebook voor IOS), Thomas Sha, YUI oprichter van Yahoo!.

YUIConf 2010 Keynote: "Project Future" door Douglas Crockford
10 november 2010, 06u30-twintig

Meld je aan voor de keynote bij te wonen http://www.meetup.com/BayJax/calendar/15239717/ .

In software-ontwikkeling, we dromen over architectuur. Dit is het waargebeurde verhaal van een dergelijke droom.

Zitplaatsen is beperkt voor deze speciale evenementen, dus zorg ervoor dat u snel te registreren!

CC foto's:

• 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's gebruikt met toestemming:

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

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | Digg it! | reddit!

Aankondiging YUI 2.8.2 - belangrijke beveiligingsupdate voor alle gebruikers van YUI 2.4.0-2.8.1

25 oktober 2010 om 11:34 am door Eric Miraglia | In ontwikkeling | 6 Commentaren

De YUI team vrijgegeven YUI 2.8.2 vandaag. Deze versie corrigeert een security-gerelateerde defect dat werd geïntroduceerd in de YUI 2 Flash component infrastructuur die begint met de YUI 2.4.0 release. Dit defect kunnen JavaScript-injectie exploits worden gemaakt tegen de domeinen die host beïnvloed YUI .swf -bestanden. het beveiligingsbulletin Bezoek voor YUI 2.8.2 voor meer details over hoe te identificeren en te vervangen aangetaste bestanden .

Als uw site host een YUI 2 verdeling tussen versie 2.4.0 en 2.8.1 die deze bestanden bevat, wordt getroffen door dit beveiligingslek.

Als uw site laadt YUI 2 van Yahoo's CDN ( yui.yahooapis.com ) of van Google's CDN ( ajax.googleapis.com ), en de bestanden worden niet gehost op uw eigen domein, bent u niet beïnvloed. YUI 3 wordt niet beïnvloed door dit probleem.

U kunt YUI 2.8.2 (en gepatchte versies van YUI 2.4.0-2.8.1) van de YUILibrary.com downloads pagina .

Zie het beveiligingsbulletin voor meer informatie over hoe u kunt bepalen of uw site wordt beïnvloed, hoe het probleem op te lossen, en hoe u de oplossing te controleren.

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | Digg it! | reddit!

In de YUI 3 Gallery: Extensies voor SVG, gemaakt voor SVG Wow!

18 oktober 2010 om 11:18 uur door Vincent Hardy | In Ontwikkeling , YUI 3 Galerij | 2 Commentaren

Introductie

SVG ( Scalable Vector Graphics ) is een declaratieve syntax voor interactieve, geanimeerde 2D afbeeldingen: vormen, afbeeldingen en tekst. SVG ondersteuning is onderdeel van de HTML 5 -specificatie en SVG wordt uitgevoerd door alle grote browsers, inclusief Microsoft's Internet Explorer in versie 9 .

De svg-wow.org website vitrines wat kan worden gedaan met SVG vandaag. De demo's op deze website zijn gemaakt voor de SVG Open conferentie, waar de SVG Wow! sessies zijn een traditie voor meerdere jaren. De SVG Wow! sessies werden die gestart zijn door Dean Jackson, vervolgens in samenwerking met mezelf en daarna voortgezet door Erik Dahlstrom . Erik en ik hebben collorated op de sessie voor de 2009 en 2010 edities van de conferentie.

In de afgelopen twee jaar zijn de demo's steeds vaker gebruikt AJAX frameworks, het toepassen van functies, waarmee het SVG in plaats van (of naast) HTML. YUI is het meest gebruikte raamwerk op de website, die zowel gebruik maakt van YUI 2 en YUI 3 .

Ik zal beginnen met een snel SVG overzicht en vervolgens ingaan op de aard van de demo's die YUI ondersteund en de uitbreidingen die ik heb toegevoegd aan de YUI 3 Galerij te laten werken met SVG. (Deze uitbreidingen zijn nu gratis te gebruiken onder de voorwaarden van BSD-licentie YUI's .)

SVG overzicht

Net als HTML, SVG is een W3C specificatie. Het biedt een syntax voor het beschrijven van basisvormen (rechthoeken, cirkels, lijnen, polygonen, ellipsen, polylijnen), willekeurige vormen (beschreven in termen van padsegmenten die kunnen worden lijnen, kwadratische of kubieke Bezier-curves), tekst en afbeeldingen.

De volgende afbeelding is een screenshot van de alternatieve stylesheet bijvoorbeeld op SVG-wow.org en toont enkele SVG-functies in het spel: rijke rendering (schaduw effecten, verlopen, patronen) en de eenvoudige en complexe vormen.

Omdat SVG-afbeeldingen worden gedefinieerd in termen van geometrie en rendering eigenschappen, is het mogelijk om ze te maken bij elke resolutie. Hierdoor kan SVG beelden worden geschaald naar elke grootte behoud van een hoge renderingkwaliteit, bijvoorbeeld bij het afdrukken (geen scherpe randen).

De volgende ingezoomde weergave toont hetzelfde beeld SVG eerder getoond, maar zijn verkregen bij een hogere resolutie met behoud van de hoge kwaliteit.

Net als HTML, SVG ondersteunt interactiviteit: het is mogelijk om gebeurtenislisteners toe te voegen op grafische objecten voor de muis of het toetsenbord interacties. Natuurlijk, SVG ondersteunt het Document Object Model, waardoor het makkelijk te manipuleren de verschillende eigenschappen van grafische objecten, zoals de geometrie of rendering stijl.

Er is veel aan de SVG specificatie: geavanceerde rendering stijlen (strelen, vulling, patronen, verlopen), filter-effecten (vlekken, schaduwen, kleur matrices), CSS styling, geavanceerde tekst-functies (zoals tekst op een pad) en declaratieve animatie . U kunt kijken op de referenties aan het einde van dit bericht voor meer informatie over de SVG-formaat functies.

SVG en HTML

Met HTML5 , kan SVG tussen de tekst in HTML-documenten zonder meer. Browsers beginnen om die functie (bijvoorbeeld ondersteuning van Firefox 4 ). Op dit moment zijn alle grote browsers ondersteunen SVG inline in XHTML, die dezelfde functionaliteit biedt. SVG in XHTML vereist alleen dat namespaces goed worden gedeclareerd.

 <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 inhoud hier ->
         </ Svg>
     </ Body>
 </ Html>
        

Alle codevoorbeelden op deze pagina te gebruiken deze manier van inlining SVG in XHTML.

SVG en YUI

SVG ondersteunt declaratieve animatie. Zo kunt u een animatie van de straal van een <circle> element zoals dit:

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

De <animate> tag is ontleend aan de SMIL -specificatie en, samen met de andere animatie-elementen, biedt het een zeer krachtige animatie engine naar SVG.

Helaas, tot voor kort, browser ondersteuning voor SVG-animatie was schaars. Het is verbeterd de afgelopen twee jaar, maar Microsoft heeft duidelijk gemaakt dat het niet ondersteunt declaratieve SVG animatie in IE 9.

Als gevolg daarvan het grootste deel van de demo's op de svg-wow.org website te gebruiken gescripte animatie in plaats van declaratieve animaties. Aan de ene kant is dit jammer, want declaratieve animaties zijn efficiënter dan scripted animaties. Op de kop, kan gescript animaties zijn zeer flexibel, en ze werken heel implementaties erg goed.

De behoefte aan een goed script animatie oplossing is wat dreef het gebruik van YUI op de svg-wow demo's. De demo ook andere YUI eigenschappen, met name de lader en Node modules.

Animeren SVG met YUI

De demo's op de svg-wow gebruiken YUI te maken elastische drum beats , morphing vormen of roterende tekst en vormen bijvoorbeeld. Met behulp van YUI met SVG nodig een paar YUI extensies, ik zal deze te beschrijven in slechts een moment.

draaiende tekst en vormen	morphing vormen
elastische drum beats

Het volgende illustreert hoe YUI is handig om gewoon te animeren en SVG-afbeeldingen te manipuleren.

Animeren van de SVG transform attribuut

Alle SVG grafische elementen hebben een transform attribuut. Dat attribuut geeft aan een 2D- affiene transformatie op elementen, die gebruikt kan worden op te schalen, scheeftrekken, roteren of te vertalen.

De svg-wow.org YUI extensies voor SVG laat het animeren van de transform attribuut als volgt uit:

 var anim = new Y.Animate ({
     knooppunt: '# circleA',
     van: {
         transformeren: {tx: 0, ty: 0, sx: 2, SY: 2}
     }
     tot: {
         transformeren: {tx: 20, Ty: 20, sx: 1, SY: 1}
     }
     transformTemplate: "vertalen (# tx, # ty) schaal (# sx, sy #)",
     duur: 1
 });
        

Zie de transformatie animaties tests.

U zult merken dat de transformatie waarden worden gedefinieerd in termen van "componenten" (zoals tx of ty ), die worden gecombineerd tot een waarde in met de te vormen transformTemplate vinden op de animatie configuratie object.

De sjabloon is een flexibel mechanisme voor het bouwen van transformeren waarden, met afzonderlijke componenten maken het gemakkelijk om de geanimeerde waarden te berekenen. Dit is een voorbeeld waar de YUI animatie model toegestaan ​​meer flexibiliteit (en meer expressieve kracht) dan SVG's SMIL animatie element ( animateTransform ). Om de animatie hierboven beschreven maken het equivalent SMIL verklaring zijn:

 <circle ...>
     <AnimateTransform attributeName = "transform" type = "translate"
                       from = "0,0" to = "20,20" tijdens = "1s" begin = "scaleAnim.begin" />
     <AnimateTransform id = "scaleAnim" attributeName = "transform" type = "schaal"
                       from = "2,2" to = "1,1" tijdens = "1s" begin = "onbepaalde tijd" />
 </ Cirkel>
        

Merk op hoe de bovenstaande fragment meerdere vereist animateTransform elementen worden gesynchroniseerd: het begin kenmerk van de eerste animatie op scaleAnim.begin het begin van de twee animaties synchroniseren. Een leuke feature van de YUI animatie motor is dat de timing van een animatie (dat wil zeggen, begin, einde en duur) gedeeld kunnen worden toe te passen op meerdere element eigenschappen.

De YUI-extensie voor het animeren SVG-transformaties wordt op grote schaal gebruikt, zoals in de camera en geanimeerde teksten voorbeelden. Eerstgenoemde gebruikt verlenging van YUI 3 de andere is een uitbreiding van YUI 2.

Animeren geometrie

Basisgeometrie

Animeren SVG geometrie met YUI is heel simpel. In het volgende voorbeeld wordt de animatie een <rect> element breedte, hoogte en hoek stralen:

 var anim = new Y.Animate ({
     knooppunt: '# recta',
     van: {
         width: 200,
         hoogte: 100,
         RX: 5,
         Ry: 5
     }
     tot: {
         width: 300,
         hoogte: 100,
         RX: 10,
         ry: 10;
     }
     duur: 2,
     easing: Y.Easing.elasticOut
 });
        

Zie de vorm van animaties tests.

Zoals later besproken, een aantal wijzigingen onder de motorkap YUI maakte dit werk. Maar vanuit het perspectief van een ontwikkelaar, deze animatie werkt op exact dezelfde manier als de animatie van een andere HTML-attribuut of CSS-eigenschappen.

De <path> 's d -attribuut

Een geometrie attribuut is een beetje speciaal: de d -attribuut op de <path> element. De <path> element wordt gebruikt voor willekeurige complexe geometrie. Een <path> kunnen beschrijven elke gewenste vorm. De d eigenschap beschrijft de geometrie op het gebied van padsegmenten die kunnen worden lijnen, bogen, kwadratische of kubieke Bezier-curven (er zijn een paar commando's, maar ze hebben allemaal kaart om Bezier-curves).

Animeren van de d -attribuut ook nodig een beetje uitbreiding van animatie YUI de motor, maar met die extensie, de d -attribuut kunnen worden geanimeerd als ieder ander, zoals hieronder afgebeeld.

 var anim = new Y.Animate ({
     node: "# Patha",
     uit: {d: "M 0 0 C 50 0 100 50 100 100 C 50 100 0 50 0 0 Z"},
     tot: {d "M 0 0 C 100 0 100 0 100 100 C 0 100 0 100 0 0 Z '}
     duur 1s,
     easing: Y.Easing.bounceBack
 });
        

Zie de paden animaties tests, waaruit blijkt, onder andere, een vinkje verandert in een kruis in de tijd, zoals weergegeven in de volgende beelden.

De Gandhi citaten demo gebruikt deze techniek van het animeren van de d attribuut om morph vormen in de figuur van Gandhi.

Animeren andere SVG-attributen

Uiteraard zijn de YUI animaties niet beperkt tot geometrie eigenschappen. Elke SVG attribuut kan worden geanimeerd. Bijvoorbeeld, de volgende animatie bezielt de blur radius op een horizontale blur filter.

 / / SVG snippet
 <Filter ..
     <FeGaussianBlur id = "BlurFilter" stdDeviation = "10 10" ...  />
 </ Filter>

 / / JavaScript animatie
 var anim = new Y.Animate ({
     knooppunt: '# BlurFilter',
     van: {stdDeviation [0, 20]}
     tot: {stdDeviation [0, 0]}
 });
        

Zie de filter animaties tests. De volgende afbeelding laat zien hoe animaties met een Gaussiaanse vervaging kan worden gebruikt om de overgang tussen de knop staten.

Dit type effect wordt gebruikt in de fast blur effect demo, ook al is die demo niet YUI animatie, maar declaratieve SMIL-animatie elementen niet te gebruiken (ten koste van en draait alleen bekijken in browsers die die functie, zoals eerder uitgelegd).

Animeren CSS-eigenschappen

Net als HTML, SVG-elementen hebben attributen en ook CSS eigenschappen. SVG heeft een aantal specifieke CSS-eigenschappen . Deze eigenschappen kunnen worden geanimeerd, soms tot verrassende effecten te creëren. Bijvoorbeeld, de stroke-dashoffset kan worden eigenschap te simuleren tekenen van een vorm.

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

 / / JavaScript
var anim = new Y.Animate({
    node: "#rectA",
    to: {'stroke-dashoffset': 0},
    duration: 0.25
});
        

See the stroke animations tests.

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. Bijvoorbeeld:

  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. Bijvoorbeeld:

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.

Conclusie

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.

References

• 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!