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

Eine Einführung in die Verwendung von YUI 3 im Offline-Anwendungen

27. Mai 2010 um 13.53 Uhr durch Alexander Kessinger | In Entwicklung | 9 Kommentare

Über den Autor: Alex Kessinger arbeitet als Front-End-Engineer bei Yahoo! früheren Laufbahn als Front-End, genießt er die Arbeit an den gesamten Stapel. Er verbringt viel Zeit mit Lesen, kuratiert und Schreiben über das Internet, soziale Medien und der Gestaltung von Websites. Sie können das alles zu seiner Website zu finden alexkessinger.net . Dort finden Sie auch ihm auf Twitter @ voidfiles .

Ich könnte sagen, dass HTML5 baut Dampf, aber diese Zeit ist vergangen: HTML5 ist hier. Mobile ist bereits riesig, wird WebKit schnell wächst, und die Zahl der Menschen, die einen HTML5-fähigen Browser auf ihrem Handy und / oder Laptop über die nächsten Jahre wird eine "neue Normalität", in der HTML5-Fähigkeiten sind der Standard zu schaffen.

Eines der großartigen Features von HTML5 ist die Anwendungs-Cache , die Webseiten die Möglichkeit gibt, den Browser-Cache-Dateien, die zu erzählen und die Cache-Dateien verwenden, wenn der Browser nicht über eine Netzwerkverbindung. Sie können mit dem Application Cache, um sicherzustellen, dass ein Benutzer in der Lage sein, zumindest einen Teil Ihrer Anwendung zugreifen kann, während er offline ist. Im Falle von Geräten wie Handys oder Tabletten (oder sogar altmodisch Geräte wie Laptops), könnte dies bedeuten, dass Ihre Anwender in der Lage, Ihre Anwendung in einem Flugzeug verwenden sind. Mittlerweile bekommen Sie weiterhin den Aufbau Ihrer Anwendung mit Web-Technologien, anstatt zu lernen Objective-C.

Neben dem Application Cache , es gibt auch andere APIs zur Verfügung, die in HTML5 Web-Entwickler geben die Werkzeuge, um nützliche Offline-Erfahrungen zu schaffen. Es gibt zwei persistenten Speicher-APIs in den meisten neueren Browsern. One ist eine einfache Schlüssel / Wert-Datenspeicher, genannt localStorage . Die zweite ist eine SQL-Datenbank . Beide können genutzt, während der Benutzer offline ist.

Mit diesen Konzepten im Kopf, ich werde den Evergreen "To Do-Liste" Anwendung zu erforschen und nutzen sie als Sprungbrett zu prüfen, wie wir eine Hebelwirkung auf das Anwendungs-Cache und persistente Speicherung in einer Anwendung, die auf alles, was wir lieben, über YUI baut aussehen 3, einschließlich der YUI 3 Gallery.

Markup

Markup ist immer ein großartiger Ort zu starten beim Bau alles im Zusammenhang mit dem Web. Die grundlegenden Shell unserer HTML5-Seite:

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

Obwohl wir bauen eine Offline-Anwendung bereit sind, nach den optimalen Verfahren, sondern setzen CSS im Kopf, und Javascript direkt vor dem schließenden Body-Tag. Selbst wenn Ihre Seite wird offline verfügbar sein, sollte der erste Laden der Seite reagieren. (Beachten Sie, dass wir mit dem einfachen awesomely HTML5 Doctype hier.)

Die App benötigt einige Platzhalter-Markup:

  <! 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">
     <div id="doc3">
         <div class="hd">
             <h1> ToDo App </ h1>
             <a class="callout" href="http://alexkessinger.net" target="_blank"> von 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"> hinzufügen </ a> </ p>
                 </ Form>
             </ Div>
         </ Div>
         <div class="bd">
             <div class="yui-main">
                 <div class="yui-b">
                     <div class="todo_items">
                         <h2> Todo Artikel </ h2>
                         <ul>
                             <li class="no_items"> holen ToDo Artikel ... </ li>
                         </ Ul>
                     </ Div>
                 </ Div>
             </ Div>
         </ Div>
         <div id="debug"> </ div>
         <-! Initialisierung / / ->
         <script src="yui-min.js"> </ script>
         <script src="base.js"> </ script>
     </ Div>
 </ Body>
 </ Html>

Auf diese Weise können die Benutzer wissen, dass wir auf immer einige Daten für sie, wenn sie geladen werden zuerst die App planen. Es richtet auch unsere Bühne, eine DOM-Struktur für unsere Sie Javascript, um mit der Arbeit beginnen.

Ein Hinweis zum Progressive Enhancement

Es gibt keinen Grund, dass eine Anwendung nicht mit den Grundsätzen der Progressive Enhancement gebaut werden und immer noch zur Verfügung gestellt für die Offline-Nutzung. In diesem Exploration, ich Fortfall der zusätzlichen Komplexität, die in PE einbezogen werden sollten, um so viel wie möglich auf den Techniken für die Offline-Unterstützung erforderlich. Manch einer mag kritisieren diesen Ansatz, und ich habe Verständnis für dieses Argument.

Zusätzliche Eigenschaften für den Umgang mit mobilen Geräten

iPhoneOS und Android-Browser können die meisten Webseiten ohne besondere Aufmerksamkeit zu behandeln, aber im Umgang mit mobilen Geräten lohnt es sich zu untersuchen, wie der Inhalt gequetscht wird, um auf dem kleineren Bildschirm passen. Quirksmode hat nicht ein sondern zwei ausführliche Artikel über Ansichtsfenster, die es wert sind, Ihre Zeit.

Kurz gesagt, gibt es einen Meta-Tag, genannt Ansichtsfenster. Es sieht ungefähr so aus:

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

Das Ziel des Viewport-Tag ist zu helfen, mobile Browser herausfinden, wie man einen wirklich großen Webseiten auf einem kleinen Bildschirm angezeigt werden. Mobile Geräte brauchen Hilfe, weil die meisten Geräte mit 700-1100px von Inhalten auf eine 300-500px Bildschirm quetschen versuchen. Auch wenn wir unseren Breiten auf 100% gesetzt, nimmt der Browser seine beste Vermutung an, wie groß die Webseite sein sollte, und dann skaliert das aus dem großen, um im Inneren der Größe des Geräts passen.

Damit konnten wir den Viewport, dies einzustellen.

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

Dies sagt dem Gerät, um die Breite unserer Seite auf die Breite des den Bildschirm des Geräts eingestellt. Wenn wir sicher, unsere Seite ist flüssig zu machen, dann auf unserer Seite den Bildschirm ausfüllen und auf den meisten mobilen Geräten. Dies bedeutet auch, dass, wenn das Telefon verfügt über einen Landscape-Modus wird die Seite zu erweitern, um den zusätzlichen Platz zu füllen.

Es gibt andere Dinge, die wir zum Viewport tun können, als auch. Wenn Sie mit mobilen Browsern gearbeitet haben, wissen Sie, sie ermöglichen es Ihnen zu zoomen. Wenn Sie sich Zeit, um eine Website zu bauen einnehmen, um den gesamten Bildschirm ausfüllen, können Sie nicht wollen ein Benutzer in der Lage sein zu vergrößern. Wenn wir unsere Ansichtsfenster so etwas wie die folgende zu sein, wird der Benutzer nicht in der Lage sein, um zu vergrößern, bzw. zu verkleinern. Auf einem Gerät wie dem iPhone Dies kann es fühlen sich heimisch. Aber wenn Sie dies tun, stellen Sie sicher, dass der Inhalt Ihrer Anwendung dem Benutzer gibt keinen Grund, jemals vergrößern möchten (z. B. kleine Textdateien), andernfalls wird dies eine frustrierende Einschränkung Usability sein.

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

Der Viewport ist nicht ein W3C-Standard, sondern ist eine allgemeine Konvention. Es wird derzeit von WebKit-Browser auf dem iPhone und Android-Betriebssystemen unterstützt. Fennec , der mobile Browser Mozilla, wird wohl auch diese Konvention zu unterstützen.

CSS

Mehr als je zuvor, mit Hilfe von CSS in der Lage zu sein fließend und dynamisch ist wichtig. Betrachtet man die breite Palette von Telefonen, Tabletten und anderen kleinen Bildschirmen, müssen Entwickler von Anwendungen bewusst sein, dass unsere Anwendungen werden uns auf eine Vielzahl von Geräten verwendet werden. Auch wenn es keinen Zauberstab schwingen wir können, um alles genau zu arbeiten, für die meisten Anwendungen können wir nicht brauchen, um perfekte Pixel auf jedem Gerät sein. Einfach folgenden Best Practices kann uns die meisten der Weg, um die Geräte zu unterstützen.

Beginnend mit Einstellung der Breite unserer App an seiner Basis in% ist ein guter Start. Mit Hilfe von EM zu font-Größen gesetzt ist auch hilfreich, weil ems basierend auf der Webseite wiedergegeben werden berechnet. Eine andere Sache, die hilft, ist, sicherzustellen, dass Sie die Spaltenbreiten gründen auf der Prozentsätze sowie der. Auch Dachrinnen Spalte kann in em ist einstellbar.

Ein großartiger Ort zu starten, ohne dass eine Menge Arbeit zu tun ist ein CSS-Framework. YUI Grids CSS 2 ist natürlich einer unserer Favoriten, und es hilft uns, denken Sie an unserer Seite in Bezug auf die Verhältnisse, statt statisch-Breite Blöcke.

So bauen Sie YUI Grids CSS 2 Hier ist der Ausgangspunkt für meine CSS-App.

  . Todo_items {
     padding-top: 1em;
 }

 . Todo_items ul {
     padding: 0;
     margin: 0;
 }
 . Todo_items ul li {
     Marge: 0,125 em 0 .5 em 0;
     padding: 0,125 em 0 0 0;
     border-top: 1px solid # ccc;
     list-style: none;
     display: block;
     word-wrap: break-word;
     Text-wrap: zu unterdrücken;
 }

 . ToRight {
      text-align: right;
 }

 . YUI3-Konsole {
      text-align: left;
      margin-left: 10px;
 }

 Körper h1 {font-size: 200%;}
 Körper h2 {font-size: 150%;}

Javascript

Die nächste Aufgabe für unsere Offline-To-Do-Anwendung ist die JavaScript. Laden Sie zunächst yui_min.js zu Ihrem Document-Root, und fügen Sie es dem Markup wie wir oben haben. Dann legen Sie diese in Ihrem base.js Datei:

  YUI (). Verwenden ('Knoten', function (y) {
     Y.one ("todo_items h2.") SetContent ("ich fliege").;
 });

Neben der Knoten, werde ich übrigens auch, um die YUI 3 CSS-Reset- und YUI Grids CSS-2. Ich werde ein Modul aus der auch YUI 3 Galerie , Ryan Grove hervorragende Storage-Lite wird, dass alle möglichen lokale Datenspeicherung Methoden zu einem einzigen, leicht zu bedienende API zu wickeln.

  YUI (). Einsatz ('cssreset', 'yui2-Grids "," Galerie-storage-lite', 'Knoten', function (y) {

   / / To-Do Liste Anwendungs-Code

 });

Anmerkung: Ich werde mich nicht in die To-do-Liste Code, noch in einige der Techniken, die ich verwenden, um es leichter, diese Art von Projekt auf mobilen Geräten zu debuggen würde zu tauchen. Sie können alle, die auf GitHub finden: YUI3-todo . Innerhalb base.js finden Sie die Gesamtheit der App. Außerdem können Sie die App und läuft auf http://html5.alexkessinger.net/yui/ytodo/ . Hier werde ich über die notwendigen Schritte, um diese einfache App mit Offline-Fähigkeiten zu verbessern konzentrieren.

Cache-Manifest

Der erste Schritt für die Absolvierung eines Web-App offline ist das Anwendungs-Cache . Die Anwendungs-Cache können Sie Ihren Browser, welche Dateien Sie heruntergeladen und offline halten wollen. In diesem Beispiel, ich weiß, ich möchte meine JavaScript-und CSS mein offline, als auch die wichtigsten HTML-Seite für den App halten. Mit dem im Verstand, werden meine Cache-Manifest wie folgt aussehen:

  CACHE MANIFEST

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

Einige Dinge, die über den Cache manifestieren beachten.

Es muss mit der Zeile beginnen CACHE MANIFEST .
Sie müssen es mit einem Content-Type-Header text / Cache-manifest dienen

Wenn Sie auf Apache sind, können Sie den folgenden Schnipsel hinzufügen .htaccess , die richtige Art des Inhalts erhalten.

  AddType text / Cache-Manifest. Manifest

Mit dem im Ort, zu jeder Datei mit einer .manifest wird mit dem Suffix serviert werden text/cache-manifest Content-Type-Header.

Als nächstes brauchen wir, um den Browser-Cache des manifesten informieren, zu tun, dass wir ein Attribut hinzufügen, um unseren HTML-Tag:

  <html manifest="todo.manifest">

Nun, wenn Sie Ihre Seite in einem Browser, der offline Anwendungen unterstützt gehen, werden Sie wahrscheinlich eine Meldung die besagt, dass diese Webseite anfordert Offline-Zugriff.

Offline / Online

Mit dem Manifest an Ort und Stelle erzählen unsere Browser-Cache, welche Ressourcen, sind wir bereit, über das Geschehen im Online-Modus im Vergleich zu Offline-Modus zu denken. Es gibt nun zwei "boot Sequenzen", die erste ist die vollständige Online-Sequenz, die wir bereits haben (und während dessen Ressourcen sind für die Offline-Nutzung zwischengespeichert). Dieser Online-Sequenz verwendet die Yahoo EUR, um die Dateien zu laden, und die Dateien sind Combo-behandelt, so dass wir nur ein paar HTTP-Requests zu haben.

Aber wir bauen auch eine Offline-Boot-Prozedur. Wir müssen in der Lage sein, die Tatsache, dass der Browser offline zu initialisieren und dann richtig zu YUI von Ressourcen im Cache zu ziehen, ist zu erkennen.

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

Nun müssen wir nur noch eine Konfiguration auf sein Objekt offline oder online, zu wählen.

  var YUI_ONLINE_CONF = {},
     YUI_OFFLINE_CONF = {
         Basis: "yui3/build /",
         kombinieren: 0,
         Gruppen: {
             Galerie: {
                 Basis: 'yui3-gallery/build /',
                 Muster: {'Galerie-': {}}
             },
             yui2: {
                 Basis: '2 in3/dist/2.8.0/build / ',
                 Muster: {
                     'Yui2-': {
                         configFn: function (me) {
                             if (/-Haut | Reset | Schriften | Gitter | base / .test (me.name)) {
                                 me.type = 'CSS';
                                 me.path = me.path.replace (/ \ js /,. 'CSS.');
                                 me.path = me.path.replace (/ \ / yui2 Haut-/, '/ assets/skins/sam/yui2-skin');
                             }
                         }
                     }
                 }
             }
         }
      },
      ONLINE = (navigator.online)?  true: false;
      CURRENT_CONF = (ONLINE)?  YUI_ONLINE_CONF: YUI_OFFLINE_CONF;

 YUI (CURRENT_CONF). Einsatz ('cssreset', 'yui2-Grids "," Galerie-storage-lite', 'Knoten', function (y) {
     ...
 });

Die YUI_OFFLINE_CONF Konfiguration Möglicherweise müssen einige Erläuterungen. Erstens bin ich der Basisstation ändern, um meine Dokument-Root + yui3/build/ . Ich habe die komplette Distribution von YUI 3 auf meinen Server geschrieben, weil der W3C-Spezifikation besagt, dass der Offline-Cache eine strikte Politik einzigen Ursprung hat. Alle Ressourcen im Cache aus der gleichen Domäne kommen, müssen ebenso wie das Manifest. Als Ergebnis kann ich nicht! vertrauen auf Yahoo! oder Google oder einer anderen ab, um meine Dateien zu dienen - sie alle müssen für die Zwischenspeicherung von meinem Server zur Verfügung.

Der nächste Teil, combine:0 , erzählt die YUI Loader zum Combo nicht automatisch die Dateien, weil ich nicht über ein Combo-Handler auf meinem eigenen Server installiert.

Schließlich möchte ich erwähnen, um die groups config. Gruppen ist ein neues Feature in YUI 3.1.1, die Sie definieren ganze Gruppen von Dateien, die aus dem gleichen Ort kommen können. Sie können auch konfigurieren, dass sie von der Quelle combo'd werden. Ich baute das YUI 3 Galerie hier, um von einer lokalen Kopie Ich habe der YUI3-Galerie-Repository auf GitHub zu laden.

Wenn wir online sind, können wir aus der Bootstrap Yahoo EUR, aber offline, müssen wir lokale Kopien der Dateien zu haben. Das ist einfach zu tun. Sie können entweder die Dateien herunterladen muss in einer großen Zip-Datei in Ihrem Verzeichnis:

  cd docroot;
 wget http://yuilibrary.com/downloads/yui3/yui_3.1.0.zip;
 entpacken 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-gallery-Galerie-2010.05.19-19-08-0-g2a49f06.zip;
 mv yui-YUI3-gallery-2a49f06 YUI3-Galerie;
 wget http://download.github.com/yui-2in3-yui-2in3.3-0-gdf09025.zip;
 mv yui-2in3-yui-2in3.3-0-gdf09025 2in3;

Oder Sie klonen die Git-Repositories von github direkt git, wenn auf Ihrem Rechner installiert ist:

  cd docroot;
 git clone git :/ / github.com/yui/yui3.git YUI3;
 git clone git :/ / github.com/yui/yui3-gallery.git YUI3-Galerie;
 git clone git :/ / github.com/yui/2in3.git 2in3;

Zu Testzwecken. Ich werde manchmal gesetzt ONLINE = false und überprüfen, wie meine Seite lädt. Wenn Sie das tun, dann besuchen Sie Ihre Anwendung in einem normalen Browserfenster können Sie sehen, jede Datei, die einzeln aufgenommen werden muss. Um es korrekt zu füllen Sie unser Cache manifestieren, müssen Sie zur Kenntnis, jede Datei in herausgezogen zu nehmen, mit so etwas wie Firebug. Dann in Ihrem Cache manifestieren Sie listet die Dateien jeweils um eins. Es wird in etwa so aussehen.

  CACHE MANIFEST
 # Ein Kommentar
 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

An dieser Stelle können wir den ganzen Weg gehen offline. Wenn Sie eine iPhoneOS oder Android-Gerät (oder einen HTML5-fähigen Browser), die Sie besuchen können nun Ihre Webseite haben, lassen Sie es vollständig geladen, und dann laden Sie die Seite mit dem Gerät die Internetverbindung deaktiviert.

iPhone-spezifische Extras

Das iPhone bietet dem WebApp Entwickler die Möglichkeit, Ihre Anwendung zu geben etwas Platz auf dem Home-Bildschirm genauso wie alle anderen Anwendungen. Sie können sogar ein glänzendes Symbol und Startup-Bildschirm, wie Sie mit einem "native" Anwendung müsste. Zuerst müssen Sie die folgenden Spezifikationen für das Symbol und den Startbildschirm. Und dann können Sie fügen Sie die folgenden meta -Tags:

  <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" />

Die ersten beiden mobilen Safari-Tags sagen, dass Ihre Web-Seite ein HTML5 WebApp ist und dass Sie wan die Farbe der Statusleiste am oberen Rand, weiß zu sein. Dadurch werden auch alle die Navigation Chrom rund um Browser-Fenster. Die zweiten zwei Tags verweisen auf die Dateien, die Sie für Ihr Symbol und Start-Bildschirm verwenden.

Wie geht es weiter

Das HTML5-Spezifikation ist immer noch ein sich bewegendes Ziel. Halten Sie ein Auge für neue Entwicklungen. Das heißt, auch heute gibt es fantastische neue Funktionen in modernen Browsern. Wie Sie aus diesem Tutorial sehen kann, ist es nicht schwer, eine Web-Anwendung offline zu nehmen, drastisch zu erhöhen sie den potenziellen Nutzen. Und, wenn Sie offline gehen, zögern Sie nicht, YUI 3 mitnehmen, zusammen mit all der Kraft die Sie aus der YUI 3 Gallery und dem YUI 2 Widget-Familie gewohnt sind.

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

Arbeiten Sie mit YUI als Teil des Yahoo! Open Strategy (YÖS) Engineering Team

20. Mai 2010 um 14.06 Uhr von Rohit Dube | Im Frontend Engineering Jobs bei Yahoo | Keine Kommentare

Die Yahoo! Open Strategy (YÖS) Team baut die nächste Generation von offenen Plattformen. Einer unserer kommenden Produkte - Connect - wird an Dritthersteller und Entwickler. Connect ermöglicht es Drittanbietern zu integrieren leicht mit Yahoo! durch Fallenlassen ein paar Zeilen JavaScript-Code auf ihrer Website. Weiterhin ermöglicht Connect Benutzer zu Websites Dritter mit ihrer Yahoo!-IDs einloggen und senden ihre Updates zu Freunden und Anhängern.

Connect nutzt verschiedene Technologien, darunter Yahoo YQL und YUI . Insbesondere nutzt die Kern-Connect-Bibliotheken aus YUI3 (Knoten, io, benutzerdefinierte Ereignisse) und der Widget-Infrastruktur, um eine konsistente API und Cross-Browser-Erlebnis zu bieten. Sobald sie vollständig entwickelt ist, wird Connect über Tausende von Web-Seiten eingesetzt werden und sichtbar sein für Millionen von Verbrauchern. Dies ist eine aufregende Gelegenheit, mit einem Projekt, das hervorragende und anspruchsvolle Verbraucher Reichweite Skalierbarkeit Anforderungen müssen beteiligt sein werden.

Der ideale Kandidat hat 5 + Jahre von großen Web-Entwicklung Erfahrung, auch die Vertrautheit mit Browser-Side-Client-Technologien wie Javascript, HTML und CSS und mit Cross-Browser Kompatibilität, Optimierungsverfahren und Internationalisierung. Kenntnisse in PHP und eine JavaScript-Bibliothek - wie YUI - erforderlich sind.

Interessiert? Die vollständige Stellenbeschreibung bei http://careers.yahoo.com/jdescription.php?oid=29752 und Kontakt Rohit Dube (rdube at yahoo-inc.com).

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

YUI Theater - Ryan Dahl: "Einführung in die NodeJS" (58 min.)

20. Mai 2010 um 01.26 Uhr von Allen Rabinovich | In Entwicklung , YUI Theater | 14 Kommentare

Vor zwei Wochen fand in Yahoo! eine BayJax Meetup gewidmet NodeJS (da die Meetup fiel mit Cinco de Mayo, nannten wir es "Cinco de Node '). Ryan Dahl , der Schöpfer von NodeJS, hielt einen Vortrag über das Projekt und war sehr Art, um uns aufzunehmen seiner Präsentation für YUI Theater.

PS Das Video beginnt mit einer 30-Sekunden-Blick in die Cinco die Mayo-Feierlichkeiten bei Yahoo!

Wenn das Video einbetten unten nicht richtig dargestellt wird in Ihren RSS-Reader der Wahl, achten Sie darauf, klicken Sie sich durch, um die hochauflösende Version des Videos auf YUI Theater zu sehen .

Andere Recent YUI Theater Videos:

Elijah Insua: jsdom: ein CommonJS Implementierung des DOM - Elijah Insua führt eine Server-seitige Implementierung der JavaScript-DOM im Mai 2010 BayJax Meetup bei Yahoo.
Nicholas Zakas, Stoyan Stefanov, Ross Harmes, Julien Lecomte, Matt Sweeney: High Performance JavaScript - Fünf Beiträge zur High Performance O'Reillys JavaScript discuss erweitertem JavaScript und DOM-Scripting Optimierungen am April 2010 BayJax Meetup bei Yahoo.
Douglas Crockford: Der Zustand und die Zukunft von JavaScript - Yahoo! JavaScript Architekt Douglas Crockford diskutiert die jüngsten ECMA5 Entwicklungsprozess und die Bemühungen um die Sprache, in der Zukunft zu verbessern.
Dav Glass: Beitrag zur YUI - YUI Ingenieur Dav Glass führt Sie in die Galerie und YUI Schritten durch den Prozess der Beiträge zum YUI Projekt.

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

YUI Theater - Elijah Insua: "jsdom: ein CommonJS Implementierung des DOM" (18 min.)

20. Mai 2010 um 01.24 Uhr von Allen Rabinovich | In Entwicklung , YUI Theater | Kommentare deaktiviert

Elijah Insua , ein Star-Entwickler aus Arc90 , präsentierte seine Arbeit auf jsdom am Cinco de Node BayJax Veranstaltung bei Yahoo!. Elias wurde aus Brooklyn präsentieren via Skype (so bitte vergib die weniger-als-idealen Video-und Audio-Qualität), und gnädig uns erlaubt, seinen Vortrag für YUI Theater zu erfassen.

Andere Recent YUI Theater Videos:

Ryan Dahl: Einführung in die NodeJS - Ryan Dahl, der Schöpfer von NodeJS, stellt das Projekt und spricht über Performance-Verbesserungen und neue Architektur. Der Vortrag fand im Mai 2010 BayJax Meetup bei Yahoo.
Nicholas Zakas, Stoyan Stefanov, Ross Harmes, Julien Lecomte, Matt Sweeney: High Performance JavaScript - Fünf Beiträge zur High Performance O'Reillys JavaScript discuss erweitertem JavaScript und DOM-Scripting Optimierungen am April 2010 BayJax Meetup bei Yahoo.
Christian Heilmann: YQL und YUI: Bausteine für Quick Applications - der Yahoo! Developer Network internationalen Evangelist Christian Heilmann beschreibt seine Philosophie für die Erstellung von schnellen, leistungsstarken, überzeugende Anwendungen mit der Yahoo Query Language (YQL) und die Yahoo User Interface Library (YUI) .
Luke Smith: Veranstaltungen Evolved - YUI-Ingenieur Luke Smith gibt einen tiefen Einstieg in das YUI 3 Event-System einschließlich der Unterstützung für DOM-Ereignisse, Event-Delegation, synthetische Ereignisse und benutzerdefinierte Ereignisse.

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

Umsetzung in den Vordergrund: Phanfare Media Organizer

19. Mai 2010 um 13.51 Uhr von Eric Miraglia | In In the Wild , YUI-Implementierungen | 1 Kommentar

Cory Mintz aus Phanfare schrieb in der vergangenen Woche mit uns über ihre jüngsten Produkteinführung, die sich stark auf YUI 2.8.0 basiert erzählen.

Wir haben soeben unsere neue Web Veranstalter gestern ... Es ist eine vollständige Foto-und Video-Organizer als Web-Anwendung gebaut, mit fast jedem YUI 2-Komponente. Wir denken, es ist wirklich verwischt die Grenze zwischen Desktop-und Web-Software.
Einige bemerkenswerte Eigenschaften sind:
Mit dem Uploader , lassen wir die Menschen organisieren und bearbeiten ihre Fotos, wie sie hochladen.
Mit Hilfe von Drag and Drop und Menü , hat der Thumbnail-Netz alle Verhaltensweisen eines Betriebssystems die Datei-Browser. Sie können per Drag auswählen, per Drag & Drop neu anordnen, multi-select mit Strg und Shift, Pfeil zwischen Thumbnails, etc.
Die dynamische Belastung des TreeView , lassen Sie uns Lazy Load Benutzerkonten mit 100s von Alben, da sie hierarchisch sind (Jahr -> Album -> Abschnitt). Dadurch kann die Seite für einen extrem großen Konto genauso schnell wie eine kleine Rechnung zu laden.

Ich liebe die saubere Professionalität des Standortes und der außergewöhnlichen Liebe zum Detail in der Benutzeroberfläche. Fühlen Sie sich frei, um die Site Tour - Trial-Accounts sind kostenlos und kommen bevölkert mit Probe Alben, um Ihnen ein Gefühl dafür, was der Ort zu bieten hat. Herzlichen Glückwunsch an Cory und dem Team für eine solche fantastischen Start.

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

CSS 101: Block Formatting Contexts

19. Mai 2010 um 11:46 Uhr von Thierry Koblentz | In Entwicklung | 10 Kommentare

Über den Autor: Thierry Koblentz ist ein Front-End-Engineer bei Yahoo!
Er besitzt TJK Gestaltung , ez-css.org und css-101.org . Sie können Thierry auf Twitter unter @ thierrykoblentz .

Ein Block-Formatierung Kontext ist eine Box, die mindestens einen der folgenden Schritte erfüllt:

der Wert von "float" ist nicht "ohne",
das verwendete Wert von "Überlauf" ist nicht "sichtbar",
Der Wert von "Display" ist "table-cell", "table-caption", oder "inline-block",
Der Wert von "Position" ist weder "statische" noch "relativ".

Wenn es um die kommt visuellen Formatierung Modell (das ist, wie User Agents den Prozess Dokument Baum für visuelle Medien ), sind Block-Formatierung Kontexten Big Player. So ist es von entscheidender Bedeutung für CSS-Autoren auf ein solides Verständnis von ihrer Beziehung mit dem Strom, Schwimmern, klar, und die Margen haben.

Was bedeutet die Spezifikation zu sagen ...

Wie blockieren Formatierung Kontexten Flow

Die Positionierung Regelung , auf die Block-Formatierung Kontexten angehören, ist normalen Fluss . Daher wird die "Block" aus einem Block Formatierung Kontext, in dem Strom der Seite positioniert, wie Sie erwarten würden, mit Block -Boxen, Inline-Formatierung von Inline -Boxen, die relative Positionierung von Block-oder Inline-Boxen, und die Positionierung der Run-in -Boxen. Einfach ausgedrückt, sie sind Teil der Seite fließen.

Was löst Block Formatierung Kontexten

Abschnitt 9.4.1 besagt, dass der folgende neue Block-Formatierung Kontexten zu etablieren:

Schwimmer,
absolut positionierten Elementen,
Inline-Blöcke,
Tisch-Zellen,
Tisch-Beschriftungen,
Elemente mit "Überlauf" (ein anderer Wert als "sichtbar") gestylt

Aber nach dem CSS Level 3-Spezifikation ist ein Block-Formatierung Kontext (ein "Flow root" in CSS3 sprechen) erstellt, wenn die folgende Bedingung erfüllt ist:

Der Wert von " Position "ist weder" statische "noch" relativ "(siehe [CSS3POS] ).

Diese Definition bedeutet, dass position:fixed wird ein neuer Block Formatierung Kontext auch. Dies ist kein Fräulein in Abschnitt 9.4.1, obwohl; feste Positionierung ist eine Unterkategorie der absolute Positionierung (9.6.1) und Referenzen in der Spezifikation zu einem absolut positionierten Elements (oder dessen Kasten) implizieren, dass das Element der " Position "Eigenschaft hat der Wert "absolute" oder "fixiert".

Beachten Sie, dass display:table begründet keinen Block Formatierung Kontexten an sich. Aber weil es erzeugen können anonyme Boxen , einer von ihnen (mit display:table-cell ) wird ein neuer Block Formatierung Kontext. Mit anderen Worten, ist der Auslöser der anonyme Feld nicht display:table . Das ist etwas Autoren im Hinterkopf behalten sollte, denn selbst wenn beide Stile zu etablieren neue Block-Formatierung Kontexten (implizit oder explizit), clear nicht funktioniert das gleiche mit display:table , wie es mit tut display:table-cell .

Eine endgültige Auslöser ist die fieldset -Element. Seltsamerweise gab es keine Informationen über www.w3.org zu diesem Verhalten, bis der HTML5 -Spezifikation. Es gab Browser-Bugs ( Webkit , Mozilla ), die dies erwähnt, aber nichts "offizielles". Eigentlich, auch wenn Fieldsets gründen neuen Block Formatierung Kontexte, in den meisten Browsern, wie pro Abschnitt 3.2 (UA-Konformität), wurden Autoren eigentlich alles für selbstverständlich halten:

CSS 2.1 wird nicht definiert, welche Eigenschaften die Kontrollen und Rahmen bilden gelten, oder wie CSS verwendet werden, um Stil zu werden. Benutzerprogramme können CSS-Eigenschaften, um diese Elemente anzuwenden. Autoren werden empfohlen, um eine solche Unterstützung als experimentell zu behandeln. Eine zukünftige Niveau der CSS angeben kann diese weiter.

Was Block Formatierung Kontexten zu tun

Block-Formatierung enthalten Kontexten schwimmt wegen der Art, sie fließen, und pro Abschnitt 9.4.1, verhindern sie einstürzenden Margen und sich nicht überlappen Schwimmern:

In einem Block-Formatierung Zusammenhang werden die Boxen aus einer nach dem anderen, vertikal verlegt, beginnend an der Spitze eines umschließenden Blocks. Der vertikale Abstand zwischen zwei Geschwister-Boxen wird durch die "Marge" Eigenschaften. Vertikale Ränder zwischen benachbarten Block-Boxen in einem Block-Formatierung Zusammenhang Zusammenbruch .
In einem Block Formatierung Kontext, berührt jedes Feld die linke äußere Kante die linke Kante des umschließenden Blocks (für Rechts-nach-Links-Formatierung, rechts Kanten berühren). Dies ist auch in Anwesenheit von Schwimmern (obwohl einer Box Line-Boxen kann durch den Schwimmern schrumpfen) wahr ist, es sei denn, das Feld wird ein neuer Block Formatierung Kontext (in diesem Fall die Box selbst kann schmaler werden durch den Schwimmern).

Genug mit den Spezifikationen, was bedeutet das in der realen Welt bedeuten?

Block-Formatierung Kontexten verhalten sich mehr oder weniger wie jeder Block-Box, abgesehen von diesen wichtigen Ausnahmen:

Block-Formatierung Kontexten verhindern Marge kollabierenden
Vertikale Ränder zwischen benachbarten Block-Boxen Zusammenbruch , aber nur, wenn sie im selben Block Formatierung Kontext. Mit anderen Worten, wenn die benachbarten Boxen nicht im gleichen Block Formatierung Kontext gehören, werden ihre Marge nicht zusammenbrechen.
Beispiel:
Das ist ein Absatz in einem DIV mit einem blauen Hintergrund, mit gestylt margin:20px .
Das ist ein Absatz in einem DIV mit einem blauen Hintergrund, mit gestylt margin:20px .
Das ist ein Absatz in einem DIV mit einem blauen Hintergrund, es ist gestylt mit margin:20px , wird die übergeordnete DIV mit gestylt overflow:hidden;zoom:1 .
Zwischen den beiden ersten blauen Kästchen oben, die unteren und oberen Rand des Zusammenbruchs Absätzen (der Abstand entspricht 20 Pixel, nicht 40 Pixel), sondern weil das letzte DIV erstellt eine neue Block-Formatierung Zusammenhang haben die Margen des dritten Absatzes nicht zusammenbrechen , damit sie nicht "durchhalten" des Absatzes der Container, sondern sind Teil dieses Block-Box.
Hinweis: im IE6, ohne ausdrückliche Margen der DIV scheitern würden, um die Ränder umschließen.
Wenn es um die kollabierenden Margen kommt, die Schaffung eines neuen Block-Formatierung Kontext wirkt die gleiche Anwendung wie border oder padding auf das Element.
Block-Formatierung enthalten Kontexten Schwimmern
Ich bin sicher, Sie haben der Satz zu hören "ein Schwimmer enthält immer schwebt", oder vielleicht der FNE (gehört zu schweben fast alles )-Methode. Aber die Grundlage dafür ist, dass Schwimmer sind Block-Formatierung Zusammenhängen, so dass ein besserer Weg, dies zu formulieren, ist zu sagen, dass "ein Block-Formatierung Kontext enthält immer schwebt".
Beispiel:
Dieser Absatz ist ein Schwimmer in einem DIV mit einem blauen Hintergrund, ist es mit gestylt margin:20px
Dieser Absatz ist ein Schwimmer in einem DIV mit einem blauen Hintergrund, ist es mit gestylt margin:20px . Die übergeordneten DIV ist mit gestylt overflow:hidden;zoom:1 .
Der erste Absatz ist ein Schwimmer, so wird es aus dem Fluss und seinen Behälter kollabiert entfernt, daher auch der Hintergrund dieser Behälter nicht zu zeigen.
Der zweite Absatz ist auch ein Schwimmer, aber es wird in einem DIV-Block, der eine neue Formatierung Kontext schafft enthalten, damit, dass Behälter des Kindes "margin-Box" umschließt. Sie sollten auch beachten, dass, anders als mit dem ersten Absatz, gibt es keine Notwendigkeit, um die vorherige zu deaktivieren. 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 ).
Beispiel:
```
 .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 )

Dinge zu beachten,

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.

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:

Dial in to 1-888-371-8922 (non-US participants, email me for a local number)
Enter the attendee code 4718 8953#
Join the Screen-Sharing-Sitzung (dies wird Sie auffordern, die Adobe Connect-Plugin zu installieren, wenn dies Ihre erste Mal benutzen)

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 .

Wir hoffen, Sie dort zu sehen!

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

Nächste Seite »

Präsentiert von WordPress auf Yahoo! Web Hosting .

Markup

Ein Hinweis zum Progressive Enhancement

Zusätzliche Eigenschaften für den Umgang mit mobilen Geräten

CSS

Javascript

Cache-Manifest

Offline / Online

iPhone-spezifische Extras

Wie geht es weiter

Andere Recent YUI Theater Videos:

Andere Recent YUI Theater Videos:

Was bedeutet die Spezifikation zu sagen ...

Wie blockieren Formatierung Kontexten Flow

Was löst Block Formatierung Kontexten

Was Block Formatierung Kontexten zu tun

Genug mit den Spezifikationen, was bedeutet das in der realen Welt bedeuten?

Block-Formatierung Kontexten verhindern Marge kollabierenden

Block-Formatierung enthalten Kontexten Schwimmern

Block formatting contexts do not overlap floats

hasLayout versus block formatting context

Properties/declarations that give elements a layout

Dinge zu beachten,

HTML elements that always have a layout:

Wrap up

Further readings

Implications

Demos and testcases

hasLayout articles

YUI-Bibliothek auf Twitter

Übersetzen

Syndikat

Aktuelle Beiträge

YUI-Bibliothek

Archiv:

Blogroll

Richtlinien für Kommentare

Werden Sie Yahoo!

Meta: