SwissChecklist

Checkliste: 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

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

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen
    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)

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

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

    Minimale & Maximale Breiten für flexible Layouts
  • Usabilty sicherstellen

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen
    • 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

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen
    Achte auf eine sinnvolle Komprimierung und auf den richtigen Dateityp
  • Layout als Skin umsetzen mit YAML

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen
  • sicherstellen, dass eine funktionierende, aktuelle DotNetNuke Installation vorhanden ist

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

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

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen
    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

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

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

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen
    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

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen
    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

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen
    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

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen
    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

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen
  • Optimiere das Drucklayout

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen
    http://www.yaml.de/de/dokumentation/css-bausteine/das-drucklayout.html
  • Neuer Schritt

    Details anzeigen Unterschritte anzeigen Unterschritte anzeigen Unterschritte anzeigen
Diese Checkliste verwenden

Vorschau/Drucken

Verwenden

Verändern

Sortieren