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

Uvod Korištenje Yui 3 u Applications Offline

Svibanj 27, 2010 at 1:53 pm by Aleksandra Kessinger | U razvoju se | 9 Komentari

O Autor: Alex Kessinger radi kao front-end inženjer na Yahoo! prošlost radeći kao front-end, on uživa radeći na cijelom stog. On je također troši puno vremena čitanja, kustoske i pisanje o internetu, socijalnim medijima i izgradnju web stranice. Možete pronaći i sve to na njegovoj web stranici alexkessinger.net . Također možete ga pronaći na Twitteru mijenjate brzine voidfiles .

Mogao bih reći da HTML5 gradi para, ali to vrijeme je prošlo: HTML5 je ovdje. Mobitel je već ogroman, WebKit ubrzano raste, a broj ljudi koji će imati HTML5 sposobne za preglednik na svom telefonu i / ili laptop u narednih nekoliko godina će stvoriti novi "normalne" u kojoj su mogućnosti HTML5 standardu.

Jedan od Awesome značajke u HTML5 je Zahtjev Cache , koja daje web stranica sposobnost da ispričaju preglednik datoteke koje se cache i koristiti spremljene datoteke kada preglednik ne imate mrežnu vezu. Možete koristiti Cache aplikacija kako bi se osiguralo da korisnik će moći pristupiti barem dio svog app dok je on odsutan. U slučaju uređajima poput mobitela ili tablete (ili čak staromodan uređaji poput prijenosnih računala), to bi moglo značiti da korisnici mogu koristiti svoj app dok je na avionu. U međuvremenu, možete dobiti nastaviti izgradnju svoje aplikacije s web tehnologijama, a ne učenje Objective-C.

Uz prijavu Cache , postoje i druge API dostupan u HTML5 da web programeri daju alate za stvaranje korisne offline iskustva. Postoje dvije trajne pohrane API dostupan u većini novijih preglednika. Jedan od njih je jednostavno ključ / vrijednost pohrana podataka, zove localStorage . Drugi je SQL baza podataka . I može se utjecati dok je korisnik odsutan.

S tim u vidu koncepata, idem istražiti zimzelenu "učiniti list" aplikacija, koristeći ga kao odskočnu dasku pogledati kako možemo iskoristiti Primjena Cache i uporni spremište u aplikaciji koja gradi na svemu što voliš o Yui 3, uključujući i Yui 3 galerije.

Marža

Marža je uvijek dobro mjesto za početak kada je zgrada ništa se odnose na webu. Osnovna ljuska našeg HTML5 stranici:

  <! DOCTYPE HTML>
 <Html
 <head>
     <title> YUI ToDo </ title>
     <link rel="stylesheet" href="base.css" type="text/css" media="screen" title="no title" charset="utf-8">
 </ Head>
 <body class="yui-skin-sam">
     <script src="yui-min.js"> </ script>
     <script src="base.js"> </ script>
 </ Body>
 </ Html>

Iako ste mi izgradnje offline-ready prijavu, slijedite najbolje prakse, ali stavljanjem CSS u glavu i Javascript neposredno prije završne oznake tijela. Čak i ako vaša stranica će biti dostupna izvanmrežno, početno opterećenje stranica bi trebao biti odgovarajući. (Imajte na umu da smo koristeći zastrašujuće jednostavan HTML5 DOCTYPE ovdje.)

App treba neki rezerviranog mjesta oznake:

 <! DOCTYPE HTML> <html> <head> <title> YUI ToDo </ title> <vode rel = "stylesheet" href = "base.css" type = "text / css" Mediji = "screen" title = "ne naslov "charset =" utf-8 "> </ head> <body class="yui-skin-sam"> <div id="doc3"> <div class="hd"> <h1> App ToDo </ h1 > <a class="callout" href="http://alexkessinger.net" target="_blank"> Alex Kessinger </ a> <div class="item_entry"> <form class="entry_form"> <input type = "text" name = "todo_item_input" class = "todo_item_input"> <p class="toRight"> <a class="addItem" href="#add"> Dodaj </ a> </ p> </ form > </ div> </ div> <div class="bd"> <div class="yui-main"> <div class="yui-b"> <div class="todo_items"> <h2> Todo stavke </ h2> <ul> <li class="no_items"> Dohvaćanje Todo stavke ... </ li> </ ul> </ div> </ div> </ div> </ div> <div id = " debug "> </ div> <- proces inicijalizacije / / -> <script src="yui-min.js"> </ script> <script src="base.js"> </ script> </ div> </ body> </ html>

Ovaj htijenje pustiti korisnik znati da smo na planiranje uzimajući neke podatke za njih kad su prvi put učitati aplikaciju. Ona također postavlja našoj pozornici, DOM strukture za naše JavaScript za početak rada s.

Napomena O Progressive poboljšanje

Nema razloga da se zahtjev ne može biti izgrađen s načelima progresivne dodatne opreme i još uvijek su dostupne za izvanmrežno korištenje. U ovom istraživanju, ja sam izostavljajući dodatnu složenost da bi se uključeni u PE kako bi se fokusirati što više na tehnike potrebne za offline podršku. Neki bi mogli kritiziraju taj pristup, i ja sam sluha za tu tvrdnju.

Dodatna svojstva za rukovanje mobilnih uređaja

iPhoneOS i Android preglednici mogu nositi većinu web stranice bez posebne pažnje, ali kad se bavi mobilnim uređajima je vrijedno istražuju kako je sadržaj dobiva stisnut da bi stali na manjem zaslonu. Quirksmode ima ne jedan već dva in-dubina članaka na Pogledu koji su dobro vrijedno vašeg vremena.

Ukratko, postoji meta tag, pod nazivom pogleda. To izgleda ovako:

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

Cilj pogleda tag je pomoći mobilne preglednike shvatiti kako prikazati stvarno veliku stranicu na malom ekranu. Mobilni uređaji trebate pomoć, jer većina uređaja pokušati ugurati 700 1100px sadržaja na 300-500px zaslonu. Također, kada smo postavili naše širine od 100 posto, preglednik ima svoju najbolju nagađati na koliko je velika web stranica bi trebao biti, a zatim ga iz vage da je velika da stane unutar veličini uređaja.

Da bi mogli postaviti pogleda na to.

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

To će reći uređaj postaviti širinu naše stranice na širinu uređaja na zaslonu. Ako mi bi bili sigurni naša stranica je tekućina, onda je naša stranica će popuniti ekran na većini mobilnih uređaja. To također znači da ako je telefon ima pejzažnom načinu rada stranica će se proširiti ispuniti dodatni prostor.

Postoje i druge stvari koje možete učiniti kako bi u Pogledu, kao dobro. Ako ste radili s mobilnim preglednicima, znate da vam omogućiti da povećavanje. Ako uzimate na vrijeme za izgradnju web stranicu za popuniti cijeli ekran možda ne želite korisnik biti u mogućnosti da biste povećali. Ako smo postavili naš Pogledu biti nešto poput sljedećeg, korisnik neće biti u mogućnosti za povećavanje, ili smanjivanje. Na uređaju kao što je iPhone to može učiniti osjećaju materinji. Ali, ako to učinite, pobrinite se da sadržaj Vašeg app daje korisniku nema razloga da ikad želite povećati (npr. mala tekst), u suprotnom, to će biti frustrirajuće upotrebljivost ograničenje.

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

Pogledu nije W3C standard, ali je zajednička konvencija. Trenutno je podržan od strane WebKit preglednika na iPhone i Android operativnim sustavima. Fennec , Mozilla mobilni preglednik, vjerojatno će također podržavaju ovu Konvenciju.

CSS

Više nego ikad, pomoću CSS-a sposobnost da se tekućine i dinamičan je važno. Kada se gleda na širokom rasponu uređaja, tablete, i drugih malih ekrana, programeri aplikacija moraju biti svjesni da su naši aplikacije će se koristiti na pletora uređaja. Iako ne postoji čarobni štapić možemo mahati da bi sve samo posao, za većinu aplikacija ne može moraju biti savršena piksela na svakom uređaju. Samo sljedeće najbolje prakse može potrajati nam većina na način da podržavaju najviše uređaja.

Počevši s postavljanjem širinu naše aplikacije u svoju bazu u% je odličan početak. Korištenje em je postaviti font-veličina je također koristan jer se ems izračunata na temelju donesene web stranicu. Još jedna stvar koja pomaže kako bi bili sigurni da ste temeljiti širine stupaca na postocima kao dobro. Čak i stupaca žljebovi se može postaviti u em je.

Veliko mjesto za početak, bez potrebe za napraviti puno posla je CSS okvir. YUI 2 Rešetke CSS je, naravno, jedan od naših favorita, a to nam pomaže razmišljati o našoj stranici u smislu omjera, umjesto statički širine blokova.

Tako izgradnju off Yui 2 CSS mrežama ovdje je početna CSS za moj app.

  . Todo_items {
     padding-top: 1em;
 }

 . Todo_items ul {
     padding: 0;
     margin: 0;
 }
 . Todo_items ul li {
     margin: 0,125 em em 0 0,5 0;
     padding: 0,125 em 0 0 0;
     granica-top: 1px solid # ccc;
     Popis stilu: none;
     display: block;
     Riječ-wrap: break-riječ;
     tekst-wrap: suzbijanje;
 }

 . ToRight {
      text-align: right;
 }

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

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

Javascript

Sljedeća se na naš offline za napraviti prijavu je JavaScript. Prvo preuzimanje yui_min.js na svoj dokumenta korijena, te ga dodati oznake kao što smo gore. Zatim stavite ovo u svoj base.js datoteku:

  YUI (). Koristiti ('čvor', funkcija (Y) {
     Y.one ("todo_items h2"). SetContent ("Ja sam leti").;
 });

Uz čvor, ja sam također će uključivati 3 YUI Reset CSS i Yui 2 CSS rešetke. Ja ću uključiti modul od Yui 3 galerije , Ryan Grove je izvrsna za pohranu Lite , koji će završiti sve moguće metode za pohranu podataka lokalnih u jednom jednostavno za korištenje API-ja.

  YUI (). Korištenje ('cssreset', 'yui2-rešetke se', 'galerija-spremište-Lite "," čvor ", funkcija (y) {

   / / TO-DO LIST aplikacijski kod

 });

Napomena: Ja sam ne idući zaroniti u to-do lista kod, niti u neke od tehnika bih koriste kako bi se lakše ispravljanje ovu vrstu projekta na mobilnim uređajima. Možete pronaći sve to na github: yui3-todo . Unutar base.js ćete pronaći cjelinu app. Također možete vidjeti app gore i trčanje na http://html5.alexkessinger.net/yui/ytodo/~~pobj . Evo, ja ću se fokusirati na potrebne korake kako bi se poboljšala ovu jednostavnu aplikaciju sa offline sposobnosti.

Cache manifest

Prvi korak za uzimanje offline web app je Zahtjev Cache . Cache Zahtjev može reći vaš preglednik slika što želite preuzeti i zadržati offline. U ovom primjeru, ja znam da želite zadržati svoju JavaScript i moj CSS offline, kao i glavni HTML stranicu za app. Imajući to na umu, moj manifest cache će izgledati ovako:

  Cache manifest

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

Neke stvari na umu o cache manifesta.

To mora početi s linije CACHE MANIFEST .
Morate ga poslužiti s Content-Type zaglavlje teksta / predmemorija-očitovanje

Ako ste na Apache, možete dodati sljedeće isječak u .htaccess da bi dobili pravo vrstu sadržaja.

  AddType tekst / predmemorija-deklaraciji. Očitovati

Imajući to na mjestu, bilo koju datoteku s .manifest sufiks će biti poslužen s text/cache-manifest Content-Type zaglavlje.

Sljedeća moramo obavijestiti pregledniku cache objaviti, to smo dodali atribut našeg HTML oznake:

  <html manifest="todo.manifest">

Sada, ako idete na svoju stranicu u pregledniku koji podržava offline aplikacije vjerojatno će vam se obavijest navodi da ova web stranica zahtijeva izvanmrežni pristup.

Offline / Online

Uz očituje u mjestu poruccuju preglednik Koji su resursi na cachea, spremni smo razmišljati o tome što se događa u online modu u odnosu na izvanmrežnom načinu rada. Sada postoje dvije "boot sekvence," prvi je pun online niz koji već imamo (i tijekom kojeg su resursi spremljeno za izvanmrežno korištenje). Ovaj online slijed koristi Yahoo CDN za učitavanje datoteka, a datoteke su combo-rukovati tako da imamo samo nekoliko HTTP zahtjeva.

No, mi smo također izgradnji offline pokretanja. Moramo biti u mogućnosti to otkriti činjenicu da je offline preglednik, a zatim inicijalizirati Yui ispravno izvući iz spremljeni resursa.

  var online = (navigator.onLine)?  istina: false;

Sada samo trebamo odabrati konfiguraciju objekta na temelju što offline ili online.

  var YUI_ONLINE_CONF = {},
     YUI_OFFLINE_CONF = {
         baza: "yui3/build /",
         kombinirati: 0,
         skupine: {
             Galerija: {
                 Baza: 'yui3-gallery/build /',
                 obrasci: {"Galerija-': {}}
             },
             yui2: {
                 baza: '2 in3/dist/2.8.0/build / ',
                 obrasci: {
                     'Yui2-": {
                         configFn: funkcija (ja) {
                             if (/-skin | resetira se | fontovi | rešetke | baza / .test (me.name)) {
                                 me.type = 'css';
                                 me.path = me.path.replace (/ \ js /,. 'css.');
                                 me.path = me.path.replace (/ \ / yui2-koža / '/ assets/skins/sam/yui2-skin');
                             }
                         }
                     }
                 }
             }
         }
      },
      ONLINE = (navigator.online)?  istina: false;
      CURRENT_CONF = (online)?  YUI_ONLINE_CONF: YUI_OFFLINE_CONF;

 YUI (CURRENT_CONF). Korištenje ('cssreset', 'yui2-rešetke se', 'galerija-spremište-Lite "," čvor ", funkcija (y) {
     ...
 });

YUI_OFFLINE_CONF konfiguracija možda trebati neko objašnjenje. Prvo, ja sam promjenom baze na moj dokument root + yui3/build/ . Poslao sam cijelu distribuciju Yui 3 na moj server jer W3C spec navodi da je offline predmemorija ima stroge politike jednog podrijetla. Svi spremljene resursi moraju biti iz iste domene kao i manifestirati. Kao rezultat toga, ne mogu osloniti na Yahoo! ili Google ili bilo koje druge CDN služiti moje datoteke - svi oni moraju biti dostupni za caching iz mog poslužitelju.

Sljedeći dio, combine:0 , govori Yui Loader nije automatski kombinirani datoteke, jer nemam combo-handler instalira na svoje poslužitelju.

Na kraju, želim spomenuti groups config. grupe je nova značajka u YUI 3.1.1 koji omogućava definiranje cijele skupine datoteka koje dolaze iz istog mjesta. Također možete konfigurirati da se combo'd iz izvora. Ja postaviti Yui 3 Galeriju ovdje za učitavanje iz lokalnoj kopiji imam od yui3-galerijskom spremištu na GitHub.

Kad smo online, možemo dizanje iz Yahoo CDN, ali offline moramo imati lokalne kopije datoteka. To je lako učiniti. Možete preuzimanje datoteka treba u velikom zip datoteku na vašem imeniku:

  cd docroot;
 wget http://yuilibrary.com/downloads/yui3/yui_3.1.0.zip;
 unzip yui_3.1.0.zip;
 MV YUI yui3;
 wget http://download.github.com/yui-yui3-gallery-gallery-2010.05.19-19-08-0-g2a49f06.zip;
 Unzip YUI-yui3-galerija-galerija-2010.05.19-19-08-0-g2a49f06.zip;
 MV YUI-yui3-galerija-2a49f06 yui3-galerija;
 wget http://download.github.com/yui-2in3-yui-2in3.3-0-gdf09025.zip;
 MV YUI-2in3-YUI-2in3.3-0-gdf09025 2in3;

Ili možete klonirati na Git iz repozitorija github izravno ako Git je instaliran na vašem računalu:

  cd docroot;
 Git klonirati Git :/ / github.com/yui/yui3.git~~dobj~~HEAD=dobj yui3;
 Git klonirati Git :/ / github.com/yui/yui3-gallery.git~~dobj~~HEAD=dobj yui3-galerije;
 Git klonirati Git :/ / github.com/yui/2in3.git~~dobj~~HEAD=dobj 2in3;

Za potrebe testiranja. Ponekad će postaviti ONLINE = false i provjeriti kako moj stranica teret. Ako to učinite, a zatim posjetiti svoj app u normalnom pregledniku, možete vidjeti svaku datoteku koja treba biti uključena pojedinačno. Da bi pravilno ispunite naš predmemorije očitovati, morate uzeti na znanje svaku datoteku se izvukao u, koristeći nešto poput Firebug. Zatim u priručnu manifestirati ćete popis svakoj datoteci jedan po jedan. To će izgledati otprilike ovako.

  Cache manifest
 # Comment
 index.html
 base.css
 base.js
 YUI-min.js
 yui3/build/loader/loader-min.js
 yui3/build/widget/assets/skins/sam/widget.css
 yui3/build/console/assets/skins/sam/console.css
 yui3/build/oop/oop-min.js
 yui3/build/event-custom/event-custom-min.js
 yui3/build/intl/intl-min.js
 yui3/build/console/lang/console.js
 yui3/build/attribute/attribute-min.js
 yui3/build/event/event-base-min.js
 yui3/build/pluginhost/pluginhost-min.js
 yui3/build/dom/dom-min.js
 yui3/build/node/node-min.js
 yui3/build/event/event-delegate-min.js
 yui3/build/event/event-focus-min.js
 yui3/build/base/base-min.js
 yui3/build/classnamemanager/classnamemanager-min.js
 yui3/build/widget/widget-min.js
 yui3/build/substitute/substitute-min.js
 yui3/build/console/console-min.js
 yui3/build/cssreset/reset-min.css
 2in3/dist/2.8.0/build/yui2-grids/yui2-grids-min.css
 yui3-gallery/build/gallery-storage-lite/gallery-storage-lite-min.js
 yui3/build/json/json-min.js
 startup.png
 icon.png

U ovom trenutku možemo ići sve mreže. Ako imate iPhoneOS ili Android uređaj (ili bilo HTML5-sposoban browser) sada možete posjetiti Vašu web stranicu, neka se završi učitavanje, a zatim ponovno učitati stranicu s uređajem je onemogućen pristup internetu.

iPhone specifične Goodies

IPhone pruža u webapp developer mogućnost dati svoj app neki prostor na početnom zaslonu, baš kao i sve ostale aplikacije. Možete čak imati jedan sjajan ikonu i početnog zaslona kao što bih s "rodnom" aplikacije. Prvo, morate slijediti naočale za ikone i početni zaslon. A onda možete dodati sljedeće meta oznake:

  <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="white" />
 <link rel="apple-touch-icon" href="icon.png"/>
 <link rel="apple-touch-startup-image" href="startup.png" />

Prve dvije oznake reći mobilni Safari da Vaša web stranica je HTML5 webapp i da wan boju statusnoj traci na vrhu biti bijela. To će također ukloniti sve navigacija krom oko prozora preglednika. Druga dva tags ukazati na datoteke koje želite koristiti za svoje ikone i početni zaslon.

Što je sljedeće

HTML5 spec još uvijek se kreće cilj. Držite se za oko novim razvojima. To je rekao, i danas postoje fantastične nove mogućnosti u modernim preglednicima. Kao što možete vidjeti iz ovog tutorial, to nije teško uzeti offline web aplikacija, dramatično povećava svoju potencijalnu korisnost. A, kada idete offline, ne oklijevajte da se Yui 3 s vama, zajedno sa svim moći ste navikli od Yui 3 galerije i Yui 2 widget obitelji.

Podijelite i proširiti: Označi s del.icio.us | digg it! | Reddit!

Rad s Yui kao dio Yahoo! Otvoreno Strategije YOS) inženjerski tim

Svibanj 20, 2010 at 2:06 pm by Rohit Dube | U krajnji inženjerstvo Poslovi u Yahoo | Komentari Isključeno

Yahoo! Otvoreno Strategija (YOS) Momčad koja gradi novu generaciju otvorenim platformama. Jedan od naših budućih proizvoda - Connect - usmjerena je na third-party izdavača i developera. Connect omogućuje trećim stranama jednostavno integrirati s Yahoo! ispuštanjem nekoliko redaka JavaScript koda na njihovim stranicama. Nadalje, Connect omogućuje korisnicima da se prijavite na web stranice trećih osoba koji koriste svoje Yahoo! ID i emitirati svoje ažuriranja prijateljima i sljedbenicima.

Connect koristi nekoliko Yahoo tehnologije, uključujući YQL i Yui . Konkretno, Connect utjecati temeljne biblioteke iz YUI3 (čvor, IO, prilagođeni događaje) i widget infrastrukture kako bi osigurao dosljednu API i cross-preglednik iskustvo. Kada bude u potpunosti razvijen, Connect bit će raspoređeno diljem tisuća web-stranica i biti vidljiv milijunima potrošača. To je uzbudljiva prilika da se sudjeluje u projektu koji će imati izvrsne potrošača doseg i skalabilnost izazovne zahtjeve.

Idealan kandidat će imati 5 + godina velikog iskustva web development, uključujući poznavanje preglednik na strani klijenta tehnologije kao što su JavaScript, HTML, CSS i cross-IE kompatibilnost pitanja, optimizacija tehnike i internacionalizacije. Poznavanje PHP i JavaScript biblioteka - kao što je Yui - su obavezna.

Zanima me? Pogledajte cijeli opis radnog mjesta na http://careers.yahoo.com/jdescription.php?oid=29752~~pobj i kontakt Rohit Dube (rdube AT yahoo-inc.com).

Podijelite i proširiti: Označi s del.icio.us | digg it! | Reddit!

YUI Kazalište - Ryan Dahl: "Uvod u NodeJS" (58 min.)

Svibanj 20, 2010 at 1:26 pm by Allen Rabinovich | U razvoj i YUI Kazalište se | 14 Komentari

Prije dva tjedna, Yahoo domaćin BayJax meetup posvećen NodeJS (od meetup podudara s Cinco de Mayo, to smo nazvali "Cinco de čvor"). Ryan Dahl , tvorac NodeJS, održala je predavanje o projektu i bio je vrlo vrsta da nas snimiti svoju prezentaciju za Yui kazališta.

PS video otvara s 30-drugi pogled u Cinco Mayo slavlja na Yahoo!

Ukoliko video ugradili u nastavku ne prikazuju se ispravno u svoj RSS čitač izbora, budite sigurni da klikati gledati visoke rezolucije verziju video na Yui kazališta .

Ostali Prijašnje Yui Kazalište Videos:

Ilija Insua: jsdom: CommonJS Provedba DOM - Ilija Insua uvodi server-side provedbu JavaScript DOM NA svibnja 2010 BayJax meetup na Yahoo.
Nicholas Zakas, Stoyan Stefanov, Ross Harmes, Julien Lecomte, Matt Sweeney: High Performance JavaScript - Pet doprinose O'Reilly visokih performansi JavaScript razgovarali napredne JavaScript i DOM skriptiranje optimizacija na travanj 2010 BayJax meetup na Yahoo.
Douglas Crockford: Stanje i budućnost JavaScript - Yahoo! JavaScript arhitekture Douglas Crockford raspravlja o nedavnom ECMA5 razvojni proces i napore za poboljšanje jezik u budućnosti.
DAV Staklo: prilog Yui - YUI inženjer DAV Staklo vas uvodi u Galeriji Yui i korake u procesu izrade doprinos Yui projekt.

Podijelite i proširiti: Označi s del.icio.us | digg it! | Reddit!

YUI Kazalište - Ilija Insua: "jsdom: CommonJS Provedba DOM" (18 min.)

20. svibanj 2010 u 1:24 pm by Allen Rabinovich | U razvoj i YUI Kazalište | Komentari Isključeno

Ilija Insua , zvijezda razvijen od Arc90 , predstavila je svoj rad na jsdom na Cinco de Node BayJax događaja u Yahoo!. Ilija je predstavljanje iz Brooklyna putem Skype (pa vas molimo da oprosti manje-nego-idealnim video i audio kvalitete), i milostivo dopustio da snimiti svoj razgovor za Yui kazališta.

Ukoliko video ugradili u nastavku ne prikazuju se ispravno u svoj RSS čitač izbora, budite sigurni da klikati gledati visoke rezolucije verziju video na Yui kazališta .

Ostali Prijašnje Yui Kazalište Videos:

Ryan Dahl: Uvod u NodeJS - Ryan Dahl, tvorac NodeJS, predstavlja projekt i razgovori o uspješnosti poboljšanja i nove arhitekture. Razgovor je održan u svibnju 2010 BayJax meetup na Yahoo.
Nicholas Zakas, Stoyan Stefanov, Ross Harmes, Julien Lecomte, Matt Sweeney: High Performance JavaScript - Pet doprinose O'Reilly visokih performansi JavaScript razgovarali napredne JavaScript i DOM skriptiranje optimizacija na travanj 2010 BayJax meetup na Yahoo.
Christian Heilmann: YQL i YUI: zgrada blokovi za Brzi Applications - Mreža Yahoo! Developer međunarodna Evanđelist Christian Heilmann spominju njegovu filozofiju za izradu brze i moćne, snažne aplikacije koristeći Yahoo jezik upita (YQL) i Yahoo korisničkog sučelja knjižnica (YUI) .
Luka Smith: Događanja Evolved - YUI inženjer Luke Smith pruža duboku uvod u Yui 3 događaja sustava, uključujući podršku za DOM događaja, događaja delegiranja, sintetičkih događanja, i prilagođenih događaja.

Podijelite i proširiti: Označi s del.icio.us | digg it! | Reddit!

Provedba Fokus: Phanfare Media Organizator

19. svibanj 2010 u 1:51 pm Eric Miraglia | U u divljini i implementacija Yui | 1 Komentar

Cory Mintz od Phanfare napisao prošlog tjedna govore o svojim nedavnim lansiranjem proizvoda, koji se temelji na jako YUI 2.8.0.

Mi smo upravo objavio naš novi web organizator jučer ... To je puni foto i video Organizator izgrađena kao web aplikacija, koristeći pravedan o svaki Yui 2 komponente. Mislimo da to stvarno zamagljuje granicu između desktop i web softvera.
Neki ističe značajke su:
Korištenje Uploader smo da ljudi organizirati i urediti njihov fotografija kao što su učitavanje.
Uz pomoć povuci i ispusti i Meni , thumbnail mreža ima sve od ponašanja OS datotečnog preglednika. Možete vući odabir, povucite i ispustite preuredili, multi-select pomoću CTRL i SHIFT, strelica između sličica, itd.
Dinamička opterećenja od TreeView , neka nam lijeni opterećenja korisničke račune s 100s albuma jer su hijerarhijska (godine -> Album -> dio). To omogućava stranica za iznimno veliki račun za učitavanje jednako brzo kao mala račun.

Volim čisti profesionalizam mjestu i izvanrednom pozornost na detalje u UI. Slobodno obići mjesto - suđenje računi su besplatni, a dolaze naseljeni uzorka albuma dati osjećaj za ono što stranica ima za ponuditi. Čestitke Cory i tim za takav fantastičan lansiranja.

Podijelite i proširiti: Označi s del.icio.us | digg it! | Reddit!

CSS 101: Blok za oblikovanje Konteksti

19. svibanj 2010 u 11:46 am Thierry Koblentz | U razvoj | 10 Komentari

O autoru: Thierry Koblentz je front-end inženjer u Yahoo!
On posjeduje TJK Dizajn i EZ-css.org i CSS-101.org . Možete pratiti na Twitteru Thierry na thierrykoblentz mijenjate brzine .

Kontekst blok oblikovanje okvir koji ispunjava najmanje jedan od sljedećih načina:

vrijednost "Float" nije "none",
koristi vrijednost "prelijevanja" nije "vidljiv",
vrijednost "pokazivati" je "stol stanica", "table-caption", ili "inline-block",
vrijednost "položaj" nije ni "statična" niti "relativna".

Kada je riječ o vizualno oblikovanje modela (to je kako korisnički agenti obraditi dokumenta stablo za vizualnim medijima ), blok oblikovanja konteksti su veliki igrači. Dakle, to je presudno za CSS autora da imaju solidnu razumijevanje njihovog odnosa s toka, plovi, jasno, i margine.

Što reći o spec ...

Kako blokirati oblikovanje kontekstima protok

Pozicioniranje shema na koju blok oblikovanja kontekstima pripadaju je normalan tijek . Dakle, "blok" u kontekstu oblikovanja bloka se nalazi u protoku stranice kao što biste očekivali s tiskanim kutije, inline oblikovanja od inline kutije, u odnosu pozicioniranja bloka ili inline okvire i pozicioniranje run-u kutije. Jednostavno rečeno, oni su dio stranice toka.

Što izaziva kontekste blok oblikovanja

Odjeljak 9.4.1 kaže da sljedeće će uspostaviti nove kontekste blok oblikovanja:

pluta,
apsolutno pozicionirani elementi,
inline-blokovi,
stol-stanice,
stolni opisi,
elementi stila s "prelijevanja" (bilo koja vrijednost osim "vidljiva")

No, prema razini CSS 3 specifikacijom , blok kontekst oblikovanja ("tijek root" u CSS3 govoriti) nastaje kad se sljedeći uvjet ispunjen:

Vrijednost " položaju "nije ni" statična "niti" relativna "(vidi [CSS3POS] ).

Ova definicija znači da position:fixed uspostavlja novi kontekst blok oblikovanje, previše. Ovo nije miss u odjeljku 9.4.1, iako, fiksno pozicioniranje je podkategoriju apsolutnog pozicioniranja (9.6.1) i reference u specifikaciji na apsolutno pozicionirani element (ili njegov okvir) upućuje da je element je " stav "imovina vrijednost "apsolutna" ili "popraviti".

Imajte na umu da display:table ne uspostavlja kontekst blok oblikovanja po sebi. No, budući da može generirati anonimne polja , jedan od njih (uz display:table-cell ) uspostavlja novi kontekst oblikovanja bloka. Drugim riječima, povod je anonimna okvir, a ne display:table . To je nešto što autori trebaju imati na umu, jer čak i ako su oba stila uspostaviti nove kontekste blok oblikovanje (implicitno ili eksplicitno), clear ne radi isto sa display:table kao što to čini sa display:table-cell .

Okidač je konačna fieldset element. Čudnovato dovoljno, nije bilo nikakvih informacija o www.w3.org o ovom ponašanja do HTML5 specifikacije. Bilo je browser bugovi ( Webkit , Mozilla ) da spomenuta, ali ništa "službeni". Zapravo, čak i ako fieldsets uspostavljaju novim kontekstima bloka oblikovanja u većini preglednika, kao što je navedeno u odjeljku 3.2 (UA sukladnosti), autori nisu trebali uzeti zdravo za gotovo:

CSS 2,1 ne definira svojstva koja vrijede u obliku kontrole i okvira, ili kako se CSS može se koristiti kako bi ih stil. Korisnički agenti mogu se primijeniti CSS svojstva tih elemenata. Autorima se preporučuje za liječenje takvu podršku kao eksperimentalnu. Budućnost razina CSS može odrediti to dalje.

Što učiniti blok oblikovanja konteksta

Blok oblikovanja kontekstima sadrže pliva zbog načina na koji su tijeku, a po sekciji 9.4.1, oni bi se spriječilo urušavanja margine i ne preklapa se pliva:

U kontekstu blok oblikovanje, kutije su postavljeni jedan iza drugoga, okomito, s početkom u vrhu sadrže bloka. Vertikalna udaljenost između dvije kutije braće određuje se prema "margin" svojstvima. Vertikalne granice između susjednih blokova kutije u kontekstu bloka oblikovanje kolapsa .
U kontekstu blok oblikovanje, svakoj kutiji je lijevi vanjski rub dodiruje lijevi rub sadrže bloka (za pravo-na-lijevo oblikovanja, desni rub osjetljiv na dodir). To vrijedi čak iu prisutnosti plovaka (iako kutija liniju kutije može se smanjiti zbog plovaka), osim okvir uspostavlja novi kontekst blok oblikovanje (u kojem slučaju kutija sama može postati uži zbog plovaka).

Dosta specifikacije, što to znači u stvarnom svijetu?

Blok oblikovanja kontekstima ponašaju manje ili više kao i svaki blok okvir, osim tih važnih iznimaka:

Blok kontekstu oblikovanja spriječiti slobodu smanjujućih
Vertikalne granice između susjednih blok kutija propasti , ali samo ako su u istom kontekstu oblikovanja bloka. Drugim riječima, ako susjedna kutije ne pripadaju istoj blok oblikovanje kontekstu, njihova marža ne sruši.
Primjer:
To je točka unutar DIV s plavom pozadinom, imenovan s margin:20px .
To je točka unutar DIV s plavom pozadinom, imenovan s margin:20px .
To je točka unutar DIV s plavom pozadinom, to je styled s margin:20px , roditelj DIV je styled s overflow:hidden;zoom:1 .
Između prva dva plava kutija gore, donji i gornji rub od stavka kolapsa (razlika iznosi 20 piksela, a ne 40 piksela), ali je zbog prošle DIV stvara novi kontekst oblikovanja bloka, na marginama trećeg stavka ne propasti , stoga ne "držati" iz stavka u kontejner nego su dio tog bloka okvir.
Napomena: u IE6, bez izričite marginama DIV će uspjeti priložiti margine.
Kada je riječ o urušavanja margine, stvara novi kontekst blok oblikovanje djeluje isto kao i primjenom border ili padding na element.
Blok oblikovanja konteksti sadrže pliva
Siguran sam da ste čuli kazne "float uvijek sadrži pliva", ili možda čuli za FNE ( plutati gotovo sve ) metoda. No, osnova je da pluta su blok za oblikovanje konteksta, tako da bolji način formulirati ovo reći da je "u kontekstu oblikovanja blok uvijek sadrži pliva".
Primjer:
Ovaj stav je float unutar DIV s plavom pozadinom, to je styled s margin:20px
Ovaj stav je float unutar DIV s plavom pozadinom, to je styled s margin:20px . Roditelj DIV je styled s overflow:hidden;zoom:1 .
Prvi odlomak je plovak tako da je uklonjen iz toka i spremnik propadne, pa je pozadina ove posude ne pokazuje.
Druga stavka je float, ali je sadržana unutar DIV koji stvara novi kontekst oblikovanja bloka, stoga da je kontejner zatvara djeteta "margin okvir". Također, treba napomenuti da, za razliku od prvog stavka, nema potrebe da se jasno prethodni okvir. This is often referred to as “self-clearing”, which makes lot of sense considering that block formatting contexts are a normal part of the flow.
Note : clear only clears floats within the same block formatting context .
Block formatting contexts do not overlap floats
This one is my favorite . According to the spec, the border-box of a block formatting context must not overlap the margin-box of floats in the same block formatting context as the element itself. What this means is that browsers create implicit margins on block formatting contexts to prevent them from overlapping the margin-box of floats. For this very reason, negative margins should have no effect when applied to a block formatting context next to floats (WebKit and IE6 have a problem with this though – see test case ).
Primjer:
```
 .sideBar { background: skyBlue; float: left; width: 180px; } 
```
```
 .sideBar { background: yellow; float: right; width: 180px; } 
```
```
 #main { background: pink; overflow: hidden; zoom: 1; border: 5px solid teal; } 
```
Because this behavior is attached to the “border box” (not the “margin box”), to create space (eg, a 20px gap) between the pink box and its siblings, authors would need to either:
- Set a 20px margin on the floats
- Set margin values on the pink box greater than the width of the floats (ie, margin:0 220px )
Yes, you'd use 220px , not 20px . Because it is the border-box that tries to fit between the floats, not the margin-box. And if I say it tries it is because that container would drop if there was not enough room for it between the two floats.
In other words, if the pink box was given a 400 pixels width, that box should drop when the parent container is narrower than 770 pixels (180px + 180px + 400px + 10px). As a side note, in a few instances, this behavior appears to be broken in Firefox (at least in v.3.5.9) (ie, when the above construct is the first child of body – see test case ).
Note : the space that shows in IE6 between the pink box and the two floats is due to the three pixel jog bug .

hasLayout versus block formatting context

As you may have noticed, all previous examples are styled using overflow:hidden;zoom:1 . The former declaration establishes a new block formatting context in modern browsers while the latter triggers hasLayout in Internet Explorer (IE 5.5/6/7). This is because these renderings are very close ( similarities with the CSS specs ). Like block formatting contexts, elements that are given a layout appear to prevent collapsing margins, to contain floats, and to not overlap floats.

Properties/declarations that give elements a layout

The lists below show that the properties that establish a new block formatting context also trigger hasLayout, at least the ones supported by the browser, with the exception of overflow in IE < 7.

In Internet Explorer 5 and 6: position:absolute; position:fixed; float (any value other than ” none “); display:inline-block; width (any value other than ” auto “); height (any value other than ” auto “); zoom (any value other than ” normal “); writing-mode:tb-rl; -ms-writing-mode:tb-rl
In Internet Explorer 7: min-width (any value); min-height (any value); max-width (any value other than none ); max-height (any value other than none ); elements styled with overflow (any value other than visible ); overflow-x and overflow-y (any value other than visible )

Stvari koje treba uzeti u obzir

zoom and writing-mode are proprietary properties and do not validate.
IE 5.0 does not support zoom
width and height trigger hasLayout on inline elements only when these properties apply to these elements (ie, IE6 in quirks mode).
overflow-x and overflow-y are part of the CSS3 box model module
hasLayout is also triggered when the layout-flow is different from the parent layout flow (ie, rtl to ltr )

In Quirks Mode and IE7 Mode (All Versions)

When overflow is set to something other than visible, table-cell elements do not establish new block formatting contexts.
When overflow is set to visible, table-cell elements establish a new block formatting context.

HTML elements that always have a layout:

In Internet Explorer, these elements have - by default – a layout.

<body> (as well as <html> in Strict mode)
<table> , <tr> , <th> , <td>
<img>
<hr>
<input> , <button> , <select> , <textarea> , <fieldset> , <legend>
<iframe> , <embed> , <object> , <applet>
<marquee>

Wrap up

To reduce the risk of issues between modern browsers and Internet Explorer ( < 8), authors may choose to give a layout to boxes that establish new block formatting contexts. This way the flow is identical, elements escape floats the same way, clear clears the same floats, and margins collapse where expected. Also, authors must pay attention when styling boxes using hasLayout triggers (ie, width ) as such styling may require making that element a new block formatting context as well.

Daljnje čitanja

Implications

Page breaks and block-formatting contexts: Allowed page breaks (13.3.3) .
Clearfix and block formatting contexts: Everything you Know about Clearfix is Wrong

Demos and testcases

hasLayout articles

Special thanks to Philippe Wittenbergh and Bruno Fassino for finding spec references when one needs them and to Ingo Chao for giving us the best resource on having layout .

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

YUI: Open Hours, Fri May 21st

May 19, 2010 at 10:30 am by Luke Smith | In Development | 2 Comments

It's a new week, and time for another YUI: Open Hours !

This week, we'll be joined by the inimitable Dav Glass , author of (among other things) YUI's Rich Text Editor and Drag and Drop utility , and the primary architect behind yuilibrary.com and the Gallery itself. He'll be discussing the YUI 3 Gallery project — where it's going, how to contribute — and answer any questions about it, about the site, or really about anything else while we have him on the line.

After that, we'll jump into our main event, which will be a “Gallery widget sampler”. We have a number of module authors joining us this week, including

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

They'll introduce their module, give an example or two, go over their API, and discuss their experience creating it. Besides just being a nice introduction to additional components available to YUI 3 users, it should provide a good platform to talk about widget API best practices and help give a sense of some of the decisions that are made during widget creation.

Thanks again to Caridy Patiño for joining us last week and reviewing his Accordion Node plugin and Dispatcher modules. We'll have more topics in the future about creating Node plugins and the reasons why the plugin approach or the widget approach might be a better fit for your needs. And thanks to Matt Sweeney (author of YUI's Node class and selector engine) for dropping in as a surprise guest as well.

The time will be the same as before, 10am – 12pm PDT and the connection details are also the same:

Birajte na 1-888-371-8922 (non-US sudionika, elektronička pošta mene za lokalni broj)
Enter the attendee code 4718 8953#
Pridružite sjednicu screen sharing (to će vas zatražiti da instalirate plugin Adobe Connect, ako je to vaš prvi put ga koristite)

And as always, you can keep up to date with the upcoming schedule and topics by following @yuilibrary on Twitter or subscribing to the YUI Event Calendar .

Nadam se da vas vidjeti tamo!

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

Sljedeća stranica »

Marža

Napomena O Progressive poboljšanje

Dodatna svojstva za rukovanje mobilnih uređaja

CSS

Javascript

Cache manifest

Offline / Online

iPhone specifične Goodies

Što je sljedeće

Ostali Prijašnje Yui Kazalište Videos:

Ostali Prijašnje Yui Kazalište Videos:

Što reći o spec ...

Kako blokirati oblikovanje kontekstima protok

Što izaziva kontekste blok oblikovanja

Što učiniti blok oblikovanja konteksta

Dosta specifikacije, što to znači u stvarnom svijetu?

Blok kontekstu oblikovanja spriječiti slobodu smanjujućih

Blok oblikovanja konteksti sadrže pliva

Block formatting contexts do not overlap floats

hasLayout versus block formatting context

Properties/declarations that give elements a layout

Stvari koje treba uzeti u obzir

HTML elements that always have a layout:

Wrap up

Daljnje čitanja

Implications

Demos and testcases

hasLayout articles

YUI knjižnica na Twitteru

Prevesti

Sindikat

Recent Posts

YUI knjižnica

Archives:

Blogroll

Komentiraj politiku

Postanite Yahoo!

Meta: