SwissChecklist

Checklist: DotNetNuke Skin mit YAML (CSS-Framework) erstellen

YAML ("Yet Another Multicolumn Layout") ist ein (X)HTML/CSS Framework für die Erstellung von modernen, flexiblen Layouts und ersetzt die veralteten Tabellenlayouts. Dabei steht die Flexibilität für den Webdesigner und die Zugänglichkeit der Nutzer im Vordergrund.

Diese Checkliste zeigt die wichtigsten Schritte ein eigenes Layout als DotNetNuke Skin mit YAML umzusetzen.

  • Vorbereitung und Design

    Show Details Show Substeps Show Substeps Show Substeps

  • Layout Konzept auswählen (fix, flexibel, elastisch)

    Show Details Show Substeps Show Substeps Show Substeps
    Fixe Layouts basieren auf fest vorgegebenen Breiten in der Einheit Pixel für alle Bereiche des Layouts. Diese Art von Layouts passt sich werder dem verfügbaren Platz noch veränderbaren Schriftgrössen an.

    Flexible Layouts basieren auf Prozentwerten zur Festlegung von Breitenangaben. Flexible Layouts passen sich daher automatisch an die verfügbare Breite des Ausgabemediums an.

    Elastische Layouts basieren auf den Einheiten "em" oder "ex". Damit wachsen elastische Layouts bei der Vergrösserung des Textzooms bzw. der Schriftgrösse proportional mit.

    Hinweis: Feste Schriftgrössen stellen in manchen Browsern (zum Beispiel Internet Explorer 6) eine Barriere dar, da sie vom Nutzer nur schwer veränderbar sind. Deshalb sollte die Masseinheit für Schriften, aber auch für Bereiche, Abstände usw. relativ sein (Angaben in em).

  • Screendesign erstellen (z.B. in Adobe Fireworks oder Photoshop)

    Show Details Show Substeps Show Substeps Show Substeps

  • sicherstellen, dass die Masse definiert sind (width, min-width, max-width, height, min-height, max-height)

    Show Details Show Substeps Show Substeps Show Substeps
    min-width und max-width wird nur für flexible/elastische Layouts benötigt.

    Minimale & Maximale Breiten für flexible Layouts

  • Usabilty sicherstellen

    Show Details Show Substeps Show Substeps Show Substeps
    • ist die Schrift gut lesbar? (Schriftgrösse, Schriftfarbe, Schriftart)
    • genug Tonwertunterschied zwischen Vorder- und Hintergrundfarbe?
    • sehen die Links klickbar aus?
    • sind alle Elemente gemäss Benutzererwartung positionert? (z.B. Dropdown-Pfeile rechts der Auswahl)
    • Hauptnavigation nicht mehr als 7 Menüpunkte (sonst z.B. "Über uns", "Kontakt" etc. in eine Systemnavigation auslagern)

    ... weitere Punkte unter Die ultimative Usability-Checkliste

  • benötigte Layoutgrafiken exportieren

    Show Details Show Substeps Show Substeps Show Substeps
    Achte auf eine sinnvolle Komprimierung und auf den richtigen Dateityp

  • Layout als Skin umsetzen mit YAML

    Show Details Show Substeps Show Substeps Show Substeps

  • sicherstellen, dass eine funktionierende, aktuelle DotNetNuke Installation vorhanden ist

    Show Details Show Substeps Show Substeps Show Substeps

  • aktuellsten DotNetNuke & YAML Basis-Skin downloaden unter http://yaml.dnn.ch

    Show Details Show Substeps Show Substeps Show Substeps

  • Skin auf dem DotNetNuke Portal installieren (Skin noch nicht zuweisen!)

    Show Details Show Substeps Show Substeps Show Substeps
    Skin Installation in DotNetNuke 4
    1.Klicke im Admin Menü auf "Seitenlayouts"
    2.Klicke dann auf "Seitenlayout hochladen"
    3.Wähle die Zip-Datei auf deinem Rechner aus und lade sie hoch.
    4.Weise nun den Skin zu. Fertig!

    Skin Installation in DotNetNuke 5
    1.Klicke im System Menü auf "Seitenlayouts"
    2.Klicke dann auf "neues Seitenlayout installieren"
    3.Wähle die Zip-Datei auf deinem Rechner aus und lade sie hoch.
    4.Es erscheint eine Meldung "This package does not have a manifest. Old Skins and Containers do not contain manifests. If this is a legacy Skin or Container Package please check the check box below and reupload the package." Wähle hier: Legacy Skin und öffne erneut die Skin Datei. Klicke dann auf "weiter".
    5.Weise nun den Skin zu. Fertig!

  • YAML Builder öffnen unter http://builder.yaml.de

    Show Details Show Substeps Show Substeps Show Substeps

  • Layout (Anzahl Spalten, Massangaben etc.) aus dem Screendesign im YAML Builder übernehmen

    Show Details Show Substeps Show Substeps Show Substeps

  • Generierten Code aus dem YAML Builder in die Skin Dateien exportieren

    Show Details Show Substeps Show Substeps Show Substeps
    1. Klicke auf "Get Code" unten rechts im YAML Builder
    2. Kopiere aus dem Tab "(X)HTML Code" alles innerhalb von <body> </body> und füge es unter /Portals/0/Skins/YamlBasic in der Skindatei Blank.ascx ein.
    3. Code aus dem Tab "my_layout.css" musst du in der Regel nicht kopieren
    4. Kopiere alles aus dem Tab "basemod.css" und ersetze es mit dem Inhalt unter /Portals/0/Skins/YamlBasic/CSS/Screen/Basemod.css
    5. Kopiere alles aus dem Tab "patch_my_layout.css" und ersetze es mit dem Inhalt unter /Portals/0/Skins/YamlBasic/CSS/Patches/PatchBlank.css

  • ContentPane und weitere DotNetNuke Panes im Skin integrieren

    Show Details Show Substeps Show Substeps Show Substeps
    1. öffne die Datei /Portals/0/Skins/YamlBasic/Blank.ascx
    2. füge den ContentPane in die gewünschte Spalte ein, z.B. innerhalb von <div id="col3_content"> <div id="ContentPane" runat="server"></div> </div>
    3. füge weitere Panes ein z.B. <div id="NewsPane" runat="server" containertype=L" containername="YamlBasic" containersrc="News.ascx"></div>

    DotNetNuke benötigt einen ContentPane damit der Skin geladen werden kann!

  • Navigation Modul integrieren

    Show Details Show Substeps Show Substeps Show Substeps
    Standardmässig verwendet DotNetNuke 4 das Modul "Solpart Menu". Leider generiert es für jeden Menüpunkt eine verschachtelte Tabelle, es ist weder für Suchmaschinen, noch für barrierenarme Websites geeignet.

    Wir empfehlen dringend ein CSS basiertes Menu zu verwenden. Das Modul "CSS NavMenu" von Snapsis ist zum Beispiel sehr empfehlenswert.

  • DotNetNuke Login integrieren

    Show Details Show Substeps Show Substeps Show Substeps
    Füge das DNN Login z.B. im Footer ein
    <dnn:login runat="server"></div>

  • Nehme weitere individuelle Layoutanpassungen im basemod.css und content.css vor

    Show Details Show Substeps Show Substeps Show Substeps

  • Optimiere das Drucklayout

    Show Details Show Substeps Show Substeps Show Substeps
    http://www.yaml.de/de/dokumentation/css-bausteine/das-drucklayout.html

  • New Step

    Show Details Show Substeps Show Substeps Show Substeps
Use this Checklist

Preview/Print

Use

Change

Sort

Delete Template