1&1 Frontend Workshop II

Frontend-Workshop YUI Loader vs. Jasmin YUI Loader Jasmin-Servlet als Nachfolger des YUI Loaders Praktische Anwendung beider Konzepte Ausblick shop:ingrid als Nachfolger der eTables Geschichte was shop:ingrid besser macht als die eTables Praktische Anwendung Conditional Comments Wozu sind die gut? Was wurde damit bereits realisiert? Praktische Anwendung Templates die die Arbeit erleichern Cart-Templates Variant-Templates Praktische Anwendung Kleine Helferlein

YUI Loader vs. Jasmin Bieten beide die Möglichkeit, externe Ressourcen (CSS/JavaScript) zu modularisieren Darauf aufbauend werden diese Module bestimmten Seiten zugeordnet Use Case: „Lade für alle Seiten nur auf der Stage die CSS/JavaScript-Ressourcen für den Stage Assistent“

YUI Loader Teil der Yahoo! User Interface Library JavaScript-basiert kommt noch bei allen Hosting-Shops zum Einsatz zu finden unter [project]/htdocs/script/loader.js loader = new UNOUNO.util.Loader; loader.loadModules({ page: 'all', stage: 'stageassistent' });

YUI Loader Module werden unter [project]/common/script/loader.js konfiguriert Können Abhängigkeiten auf weitere Ressourcen/Module haben this.loader.addModule({ name: 'stageassistent', type: 'js', fullpath: '/modules/stageassistent/script/main-min.js', verifier: this.checkStageAssistent, requires: ['stageassistent-css', 'stagenotes'] });

Vorteile des YUI Loaders Definition von Abhängigkeiten Sicherstellung einer korrekten Auflösung und richtigen Reihenfolge beim Laden der Ressourcen Keine doppelte Einbindung von Ressourcen Nutzt ausschließlich bestehende Technologien -> keine Infrastruktur nötig

Nachteile des YUI Loaders Basiert auf JavaScript CSS-Ressourcen können deshalb nur bedingt und nur als Teil von JavaScript-Komponenten geladen werden (kein CSS bei deaktiviertem JavaScript!) Für jede Ressource (sowohl CSS als auch JavaScript) wird ein Server-Request erzeugt Umständliches Konzept zum Festellen des vollständigen Ladens von Ressourcen checkStageAssistent: function(name, loaderCallback) { if (UNOUNO.util.StageAssistent) { loaderCallback(); } else { setTimeout(function() { checkStageAssistent(name, loaderCallback); }, 50); } }

Jasmin Das Jasmin-Servlet wurde entwickelt, um alle diese Nachteile zu umgehen Basiert auf Java und ist Teil der Pustefix-Infrastruktur Erzeugt nur je einen Request für alle CSS- und JavaScript-Ressourcen Bezieht seine Ressourcen aus dem lokalen Dateisystem, aus JARs oder über HTTP Ist ebenfalls modular Verwaltet ebenfalls Abhängigkeiten Kommt bei allen pfixschlundAS-, pfixEntertainment-Projekten und bei pfixHosting zum Einsatz Wird den YUI Loader auch bei pfixorder im Zuge von TEC.448 (WH Order Process Refactoring) ablösen

Jasmin Kann an 3 Stellen konfiguriert werden /order-modules/[modul]/src/main/resources/META-INF für Maven-Module /[repository]/res/META-INF für globale Konfigurationen /[project]/conf für lokale Konfigurationen Das Laden der Module geschieht in /[project]/txt/components.xml <shop:loadJasminModules min=„true“> <module> <pages> <page>all</page> </pages> <stage> <module>stageassistent</module> </stage> </module> </shop:loadJasminModules>

Jasmin Zugehörige Modul-Konfiguration <library> <name>stageassistent</name> <ressource> <type>js</type> <base>classpath</base> <path>script/main.js</path> </ressource> <ressource> <type>css</type> <base>classpath</base> <path>style/main.css</path> </ressource> <dependencie>animation</dependencie> <dependencie>stagenotes</dependencie> </library>

Jasmin Generierte Tags zum Einbinden der Module <script type=„text/javascript“ href=„/xml/jasmin/js-min/dslorder-de+stageassistent“ /> <link type=„text/css“ src=„/xml/jasmin/css-min/dslorder-de+stageassistent“ /> Auf der Stage werden die Ressourcen unkomprimiert eingebunden

Ausblick Zukünftig wird das Konzept des Jasmin-Servlets noch erweitert Einbindung sämtlicher externer Ressourcen, also auch Bilder, Flash etc. Automatisches gZippen, eTaggen, Zuweisen von Expires-Headern etc. Statistiken zum Abruf dieser Ressourcen Aufhebung der Browserbegrenzung von 2 parallelen Requests durch transparente Subdomain-Nutzung

Weiterführende Informationen http://developer.yahoo.com/yui/yuiloader/ http://wiki.intranet.1and1.com/bin/view/Pustefix/JasminServlet http://wiki.intranet.1and1.com/bin/view/PO/ProjectTEC505

shop:ingrid eTables und nxLib sind als deprecated markiert und werden nicht mehr weiterentwickelt/supportet Viele Layouts konnten mit dem Tabellen-Layout der eTables nicht umgesetzt werden nxLib nicht ordentlich dokumentiert und vom Code schwer zu verstehen eTables und nxLib nicht standardkonform und nicht valide

shop:ingrid Basiert auf den Elementen row, left, right, both Layout wird komplett über CSS gesteuert Maximale Freiheit bei der Gestaltung Seit Beginn der Formular-Umsetzungen mit shop:ingrid alle Layouts abbildbar

Praktische Anwendung <pfx:forminput> <pfx:image src=„/telesales/img/content/header.jpg“ /> <div class=„container_box“> <h2 class=„first“>Vermittlerdaten</h2> <shop:errorbox /> <div class=„container_form“> <shop:ingrid prefix=„login“> <row> <left> <label for=„id“ mandatory=„true“ /> </left> <right> <item name=„id“ type=„text“ size=„11“ /> </right> </row> </shop:ingrid> </div> <div class=„submit“> <pfx:xinp alt=„Weiter“ src=„weiter.gif“ type=„image“ /> </div> </div> </pfx:forminput>

Praktische Anwendung <row> <left> <label for=„id“ mandatory=„true“ /> </left> <right> <item name=„id“ type=„text“ size=„11“ /> </right> </row> <row> <left> <label for=„action“ /> </left> <right> <item name=„action“ type=„select“> <pfx:option value=„default“> Standard-Angebot </pfx:option> <pfx:option value=„kwk“> KWK-Aktion </pfx:option> </item> </right> </row> <row> <left> <label for=„action“ /> </left> <right> <item name=„action“ type=„freetext“> <ixsl:value-of select=„$action“ /> </item> </right> </row>

Praktische Anwendung <row> <left /> <right> <item name=“psfee” type=“check” value=“true” class=“inline nospace” default=“true” /> <label for=“psfee-true” colon=“false” style=“margin-left: 18px;” /> </right> </row> <row> <both> <span class=“inline text” style=“padding-right: 20px; padding-left: 50px;”> Sind Sie bereits Kunde von 1&1? </span> <item class="inline" type="radio" value="false“ name="isRecurring" default="true" /> <label class="inline" for="isRecurring-false“ style="padding-right: 25px;" colon="false“ /> <item class="inline" type="radio" value="true“ name="isRecurring" /> <label class="inline" for="isRecurring-true" colon="false"/> </both> </row>

Praktische Anwendung <row> <left> <label for=“zipCode“ mandatory=“true” /> </left> <right> <item type=“multi”> <ixsl:choose> <ixsl:when test=“/formresult/addresschoice/plzchoice”> <item class=“inline” name=“zipCode” type=“dynamic” path=“/formresult/addresschoice/plzchoice” /> </ixsl:when> <ixsl:otherwise> <item class=“inline” name=“zipCode” size=“5” type=“text” /> </ixsl:otherwise> </ixsl:choose> <label for=“city” class=“inline” mandatory=“true” /> <ixsl:choose> <ixsl:when test=“/formresult/addresschoice/citychoice”> <item name=“city” class=“inline nospace” type=“dynamic” path=“/formresult/addresschoice/citychoice” /> </ixsl:when> <ixsl:otherwise> <item name=“city” class=“inline nospace” size=“33” type=“text” /> </ixsl:otherwise> </ixsl:choose> </item> </right> </row>

Praktische Anwendung <pfx:script> function onJSLoad() { var ingrid=“new UNOUNO.ajax.InputGrid(); ingrid.initToggle('newcustomer.mode-private', null, ['toggle.companyHint', 'toggle.companyName'], 'newcustomer.mode-company'); ingrid.initToggle('newcustomer.mode-company', ['toggle.companyHint', 'toggle.companyName'], null, 'newcustomer.mode-private'); ingrid.initAllToggles(); } </pfx:script> [...] <row> <left /> <right> <item class=“inline” type=“radio” value=“private” name=“mode” default=“true” /> <label class=“inline” for=“mode-private” style=“padding-right: 25px;” colon=“false” /> <item class=“inline” type=“radio” value=“company” name=“mode” /> <label class=“inline” for=“mode-company” colon=“false” /> </right> </row> <row id=“toggle.companyHint”> ... </row> <row id=“toggle.companyName”> ... </row>

Praktische Anwendung <pfx:script> function onJSLoad() { var infobox = new UNOUNO.ajax.InfoBox(); infobox.initInfoBoxMagic(‘info.vodafonepassport.passportId’, [4, 220, 80, 0, -35]); } </pfx:script> <row> <left> <label for=“passportId“ mandatory=“true” /> </left> <right> <info for=“passportId” class=“big” style=“margin-right: 200px;”> Bei deutschen Ausweisen müssen 10 Stallen eingegeben werden <a href=“mustermann.jpg”>(siehe Beispiel)</a> Bei ausländischen kann alles vorkommen. </info> <item type=“multi”> <item class=“inline” maxlength=“10” name=“passportId” size=“10” type=“text” /> <item class=“inline nospace” type=“freetext” noid=“true”> siehe </item> </item> </right> </row>

shop:ingrid Die gezeigten Beispiele sind als Cheat-Sheets verfügbar

Conditional Comments Technologie von Microsoft zum Einbinden versionsabhängiger IE-Styles Use Case: „Wende auf das Dokument folgende Styles nur für den IE6 an.“ * html gehört damit der Vergangenheit an Derzeit spezifische Styles für IE6 und IE7 möglich

Conditional Comments Die CSS-Dateien sind sowohl global als auch lokal zu finden /common/style/general/ie6.css /common/style/general/ie7.css /[project]/htdocs/style/general/ie6.css /[project]/htdocs/style/general/ie7.css

Conditional Comments HTC-PNG-Hack für PNG-Transparenz im IE6 Clearfix zum Clearen von Floats im IE6 Wird vom Multible IE nicht richtig interpretiert, da dieser eine falsche Browserkennung liefert (Besser: IE6 mit Virtual PC) Keine derartige Technologie für Mozilla-Browser

Conditional Comments http ://msdn2.microsoft.com/en-us/library/ms537512.aspx http ://www.quirksmode.org/css/condcom.html http ://de.wikipedia.org/wiki/Conditional_Comments

Cart-Templates Kommen in Zusammenhang mit dem Warenkorb zum Einsatz Bei pfixschlundAS, pfixEntertainment und pfixHosting Erleichtern den Umgang mit Artikeln, Slots, Bundles, Preisen und Workflows Im Zuge von TEC.448 bei pfixorder

Cart-Templates Use Case: Article in Cart <cart:article-in-cart article= " nis " > ... </cart:article-in-cart> Check whether an Article (NIS) is in Cart. <cart:article-not-in-cart article="nav"> ... </cart:article-not-in-cart> Check whether an Article (NAV) is not in Cart. Use Case: Property in Cart <cart:property-in-cart property="16000"> ... </cart:property-in-cart> Check whether a Property (16000) is in Cart. <cart:property-not-in-cart property="6000"> ... </cart:property-not-in-cart> Check whether a Property (6000) is not in Cart. Use Case: Article available This template is not available in all shops! <cart:article-available variant="old" article="nis"> ... </cart:article-availabel> Check whether an Article (NIS) is available in a variant (old). The variant therefore is optional. <cart:article-not-avaiable article="nav"> ... </cart:article-not-available> Check whether an Article is not available. Use Case: Attribute in Cart <cart:attribute-in-cart attribute="attr" value="val"> ... </cart:attribute-in-cart> Check whether any of the Articles in Cart has an Attribute (attr) with a given value(val).

Cart-Templates Use Case: Check Slots <cart:slot-available slot="tal">...</...> Check whether a Slot is available. <cart:slot-not-available slot="tal">...</...> Check whether a Slot is not available. <cart:slot-complete slot="tal">...</...> Check whether a Slot ist complete. <cart:slot-incomplete slot="tal">...</...> Check whether a Slot ist incomplete. <cart:slot-empty slot="tal">...</...> Check whether a Slot is empty. <cart:slot-not-empty slot="tal">...</...> Check whether a Slot is not empty. Use Case: Check Cart Overview <cart:overview-empty /> Check whether Cart Overview is empty. <cart:overview-not-empty /> Check whether Cart Overview is not empty. Use Case: Check Cart <cart:complete /> Check whether Cart Overview is complete. <cart:incomplete /> Check whether Cart Overview is incomplete. Use Case: Check Cart <cart:empty ignore-meta="true" /> Check whether Cart Overview is empty by ignoring Meta-Articles. <cart:not-empty ignore-meta="false" /> Check whether Cart Overview is not empty by including Meta-Articles.

Cart-Templates Use Case: Price of an Article This template is not available in all shops! <cart:article-costs [article= " ... " | type= " ... " | name= " ... " | formatted= " ... " | image= " ... " ]> ... </cart:article-costs> Fetches a Price of an Article. article – ID of the Artcle. type – Type of the Price. Can be once or monthly . name – Name of the Price. In general it should be set to default . formatted – Format Price. Must be true . image – Display Price as Image. Can be true or src-only . Use Case: Remove Articles from the Cart <cart:remove page="costs" type="image"> <cart:article id="nis" /> <cart:article id="nav" /> <pfx:image src="delete.gif" alt="Löschen" /> </cart:remove> Remove articles from cart. page – Remove article and jump to page (optional). type – Type of Link. Can be text or image . id – ID of the Article. Use Case: Add Articles or Bundles to the Cart <cart:add type= " text " label="Hier klicken"> <cart:article id="nis" amount="1" /> <cart:article id="nav" amount="2" /> </cart:add> Add Article(s) to the Cart. type – Type of Link. Can be text , markup or image . label – If type is text there must be a label . id – ID of the Article. amount – Amount of Articles added to Cart. <cart:add [ignoreFlow="true"|changeFlow="Order"]> <cart:bundle id="bundle1" /> </cart:add> Add a Bundle to the Cart. The Attributes ignorFlow and changeFlow can optionally be used to manipulate normal Flow. Use Case: Clear one or more Slots <cart:clear page="overview" type="markup"> <cart:slot id="vod-hardware" /> <cart:slot id="line" /> <strong>Löschen</strong> </cart:clear> Clear one or more Slots in the Cart (Remove Articles from Slots).

Cart-Templates Use Case: Change Workflow <cart:change-flow flow="Static" /> Change the current Workflow to flow . Use Case: Continue Workflow <cart:continue-flow /> Continue the current Workflow and go one step further. Use Case: Skip Step in Workflow <cart:skip-step /> <cart:skip-step step="OrderDomain" /> Skip the next Step in Workflow or skip custom step . Use Case: Check current Flowpage <cart:if-current-flowpage> ... </cart:if-current-flowpage> Check whether the current page is the current flow page.

Cart-Templates Die gezeigten Beispiele sind als Cheat-Sheets verfügbar

Variant-Template Kommen in Zusammenhang mit dem Variantenmanager zum Einsatz Bei allen Projekten nutzbar

Variant-Template Use Case: Selecting current Variant <variant:get-current/> Gets current Variant, e.g. lead:def . <variant:get-current-base/> Gets base of the current Variant, e.g. lead if variant is lead:def . Use Case: Choose a variant <variant:choose> <variant:when alias="myvariant"> Some foo Text. </variant:when> <variant:otherwise> Otherwise for other Variants. </variant:otherwise> </variant:choose> Works the same as the well known xsl:choose . Attributes used with Variant Templates The following Attributes are possible when working with Variant Templates. variant Matches the exact full Name of the Variant base Matches the Part before first Double Point end Matches the End of a Variant start Matches when Variant starts with this String alias Matches the Alias of a Variant Use Case: Restrict Block to a Variant <variant:restrict-to variant="lead:def"> Some foo Text. </variant:restrict-to> Text (or other Markup) is only shown if Variant is lead:def . Use Case: Restrict Block to a Variant <variant:except base="PS"> Some foo Text. <variant:except> Text (or other Markup) is shown in all Variants except Variants with Base PS .

Variant-Template Die gezeigten Beispiele sind als Cheat-Sheets verfügbar

Kleine Helferlein ant atavista (zum Auffinden von nicht genutzten Bildern und Includes) Page Configuration Matrix (zum Auffinden veralteter Seiten und falscher Konfigurationen) Stage Notes (zum Kommunizieren von Nachrichten direkt über die Website)

ant atavista Name als Kombination aus dem Putzmittel „ATA“ und der Suchmaschine „Alta Vista“ Hilft beim Aufspüren nicht mehr verwendeter Grafiken und Includes +

ant atavista Der Ant-Task, welcher den Report generiert, wird folgendermaßen aufgerufen: ant atavista -Dtype=[images|includes] -Dinclude=[project] -Dexclude=[filter] Zu finden ist der generierte Report dann unter folgendem URL: http://adm.stage25.pem2.schlund.de/modules/tools/report/report.html (oder jede andere Stage)

ant atavista "Generiere einen Report unbenutzter Grafiken für das Projekt oneandone_us." ant atavista -Dtype=images -Dinclude=oneandone_us "Generiere einen Report unbenutzter Grafiken für das Projekt oneandone_us und ignoriere den Ordner captchas." ant atavista -Dtype=images -Dinclude=oneandone_us -Dexclude=captchas "Generiere einen Report unbenutzter Includes für das Projekt oneandone_uk." ant atavista -Dtype=includes -Dinclude=oneandone_uk "Generiere einen Report unbenutzter Grafiken in den countdown-Ordnern." ant atavista -Dtype=images -Dinclude=countdown

ant atavista Nach einer initialen Aufräumaktion soll ein Zustand erreicht werden, der automatisiert überwacht werden kann Warnungen per Mail an den Site-Manager kommunizieren http ://wiki.intranet.1and1.com/bin/view/WM/DokuPustefixReport

Page Configuration Matrix Zum Auffinden veralteter Seiten und fehlerhafter Konfigurationen Zu erreichen über die Seite PageConfigurationMatrix Idee: In der depend.xml müssen 2, in der order.conf.xml zusätzlich 1 Eintrag zu einer Seite vorhanden sein Fehlerausgabe, wenn einer dieser Einträge nicht vorhanden ist auf der Platte eine Seite gefunden wird, zu der gar kein Eintrag existiert Einträge gefunden werden aber die Datei auf der Platte nicht exisitiert Wichtig! Der dritte Eintrag in der order.conf.xml kann aus verschiedenen Gründen fehlen, ohne daß die Seite dadurch in Mitleidenschaft gezogen wird (andere Handler, neurdings auch Seiten ohne Handler) Deshalb sollte in diesem Fall immer geprüft werden, ob die Seite auch wirklich gelöscht werden kann Beim Löschen von Dateien auf der Platte den angegebenen Link zum Neuladen benutzen (erzwingt Neugenerierung)

Page Configuration Matrix http ://wiki.intranet.1and1.com/bin/view/WM/DokuSystemePustefixPCM

Stage Notes Zum „Anheften“ von Informationen an Webseiten-Elemente Angabe von Empfänger stellt die Nachricht entsprechend zu Erledigte Nachrichten können als „completed“ markiert und dadurch gelöscht werden

Stage Notes (1) Bereich einschränken (2) Stage Notes anzeigen (3) Neue Stage Note anlegen (4) Eingeblendete Stage Notes verstecken (1) (2) (3) (4)

Stage Notes (1) Absender (2) Nachricht (3) Link zum Löschen der Stage Note (4) Empfänger (variiert je nach Shop) (5) Speichern/Abschicken (1) (2) (3) (4) (5)

Weitere denkbare Workshops Producing-Guidelines korrekte Semantik Vorher-Nachher Coding-Guidelines (Vorstellung guter Editoren) Vorschlag eines Prozesses zur Vereinheitlichung gleicher Elemente AJAX-Inspirationen – Was machen andere? linkId, orderLinkId und log-Tags Wie benutzte ich die richtig? Was kann ich damit auswerten? Vorschläge von eurer Seite?

1&1 Frontend Workshop II

Weitere ähnliche Inhalte

Mehr von Nico Steiner (9)

1&1 Frontend Workshop II