Internal CI Admin Guide

Dieser Styleguide beschreibt die Gestaltung der X-Event (Designosophie) Webseite.

Inhalt Styleguide

 Schriftart und Farbe

Objekt Format
Titel

Dies ist ein Titel

Überschrift 1 Das ist eine Überschrift..
normaler Fliesstext Dies ist ein normaler Text..
hervorgehobener Text Dieser Text wird besonders hervorgehoben..
Aufzählung
  • Zeile 1
  • Zeile 2
Source

 

//
// Beschreibender Text
//

IF x=1 THEN
    GOTO END
END IF

 Farbtabelle

 RGB

246,146,38 110,189,70 13,150,208 225,0,116
255,203,5 150,23,26 255,251,204 245,246,246

 HEX

#f69226 #6ebd46 #0d96d0 #e10074
#ffcb05 #96171a #fffbcc #f5f6f6

 CMYK

0,50,100,0 60,0,100,0 80,30,3,0 0,100,20,10
0,20,100,0 20,100,100,30 0,0,25,0 0,0,0,3

 «PANTONE® process coated»

DS 32-1 C DS 290-1 C DS 218-2 C DS 142-1 C
DS 5-1 C DS 82-1 C DS 1-8 C DS 325-9 C

Vierfarbprozessabstimmungs-System mit Simulation für glänzend gestrichenes Papier. Diese Farben sind in Europa nicht gebräuchlich. An die Farbnummer wird C für coated angehängt.

 Tabellen

Beispiel 1, Auflistung [...]

Text Text=Fett BG=#fffbcc
aaa Text=Normal BG=#ffffff
bbb Text=Normal BG=#f5f6f6

 

Beispiel 2, Pressespiegel [...]

Title1 Quelle1,  Datum1
Kurztext1 [...]

Beispiel 3, Text Publikation [...]

Zitat:  
Kurztext
Quelle1,  Datum1
Fritz Musterautor
Mirror 1  
 
Langtext
Links und weiterführende Informationen

 

Beispiel 4, Portrait [...]

:-) Kontakt [...]
Über mich [...]
Hobbies / Interessen [...]
Was mich motiviert [...]
Meine Funktion [...]

 

Bildwelten  zum Einsatz kommen ausschliesslich Bilder aus dem freigegebenen Bilderpool.
Bildergallery anzeigen

Bildgrösse
<Bezeichnung>190x99
<Bezeichnung>190x159
<Bezeichnung>190x253
<Bezeichnung>390x99
<Bezeichnung>400x340

Beispiel: /imgolpcexpo08stand190x99.jpg

Formulare das User-Interface entspricht dem Usability Standard.

Show/hide Textarea – die auf-/zuklappen Funktionalität kann wie folgt implementiert werden.

  1. An ../themes/bluemarine/style.css File anfügen
    .hideblock {
    
      	DISPLAY: none; POSITION: relative
    }
  2. Seite im oberen Bereich mit folgender Funktion erweitern
    <script type="text/javascript" language="JavaScript1.2">
    //used for hide and show textarea 
    function showit(idnum)
    {
    	var newelem = document.getElementById(idnum);
    	if (newelem.style.display == 'inline') 
        {
            newelem.style.display = 'none';
        }
        else
        {
        newelem.style.display = 'inline';
        }
    }
    </script>

Beispiel 5, auf-/zuklappen Textbereich
Titel1
Bereich Textblock1 (sichtbar) [...] (<< hier klicken und erweiterter Text wird sichtbar)

Bereich Textblock2 (aufklappbar)

 

Navigationselement für mehrere Seiten

 
Zurück  
O
1
O
2
O
3
O
4
..
..
O
10
O
11
 
  Vorwärts

 

Sub-Navigation (Second/Third Level)

Weiterempfehlen  der Facebook Like Button [Beispiel 1 | Möglichkeiten und Chancen]

<iframe src="http://www.facebook.com/plugins/like.php?href=
http%3A%2F%2Fx-event.designo.ch%2Finit%2F%3Fq%3Dnode%2F288&
amp;layout=standard&amp;show_faces=false&amp;width=320&amp;
action=like&amp;colorscheme=light&amp;height=26" scrolling=
"no" frameborder="0" style="border:none; overflow:hidden;
width:320px; height:26px;" allowTransparency="true"></iframe>

Icons  nebenstehende Icons und Symbole verdeutlichen die Funktionalität von bestimmten Funktionen auf selbsterklärende Weise. Fehlklicks werden verindert.
 Icongallery

Beschreibung Beispiel
Externer Link Wikipedia
Bildergallerie Bildergallery anzeigen
Download Download File
Film Video Podcast anschauen
Zoomen Ansicht vergrössern
Artikel versenden Artikel versenden
Druckansicht aufrufen Dokument drucken
PDF-Version anzeigen Ansicht  
zum Seitenanfang Top
Kalender Kalender anzeigen
Löschen Artikel löschen
Bearbeiten Artikel bearbeiten
Informationen Info
Bild anzeigen Bild anzeigen
Bildschirmgrösse Auf Bildschirmgrösse erweitern
Aktuelle Uhrzeit
Aktuelle Uhrzeit in Bern (Schweiz)  Zeit Bern  
Skype designo (Skype)

Textvorlagen Versionen
   ge en  pt
Protokoll    
Brief Standard      
Brief OLPC / Ondalivre      

Logo- und Bildarchiv  
Logokategorie1/Bild1 auf-/zuklappen
Logokategorie2/Bild1 auf-/zuklappen
Logokategorie3/Bild1 auf-/zuklappen
Zweck/Bezeichnung, Logokategorie3/Bild1
  Anzeigen Bild speichern Bild in Webseite einbetten  
    Paste HTML to embed this picture  
ge Grossansicht Speichern unter / Save picture as jpg-file Speichern unter / Save picture as jpg-file Speichern unter / Save picture as svg-File (..use inkscape to edit)  
en Grossansicht Speichern unter / Save picture as jpg-file Speichern unter / Save picture as jpg-file Speichern unter / Save picture as svg-File (..use inkscape to edit)  
pt .. .. .. .. .. .. ..  

Modding Drupal
a) Sprachwahl temporär ausblenden, solange die Webseite nur in Deutsch verfügbar ist (translation links). Editiere Zeilen in File ../modules/translation/translation.module

  //  foreach ($languages as $langcode => $language) {
  //    if (isset($translations[$langcode])) {
  //      $links["node_translation_$langcode"] = array(
  //        'title' => $language->native,
  //        'href' => 'node/'. $translations[$langcode]->nid,
  //        'language' => $language,
  //        'attributes' => array('title' => $translations[$langcode]->
  //                              title, 'class' => 'translation-link')
  //      );
  //    }
  //  }

b) Taxonomie oben in der Seite ausblenden. Zeile ausklammern in File ../themes/bluemarine/node.tpl.php

<!--
    <div class="taxonomy"><?php print $terms?></div>
-->

c) An ../themes/bluemarine/style.css File anfügen

.hideblock {

  	DISPLAY: none; POSITION: relative
}

d) Ersetze File ../sites/x-event.designo.ch.init/modules/print/icons/print_icon.gif mit imgdrucken.gif

e) Ergänze Zeile in ../includes/common.inc

$output = "<meta http-equiv=\"Content-Type\" content=\"text/html; cha
rset=utf-8\" />\n<link rel=\"shortcut icon\" href=\"/favicon.ico\" />\n";

f) Drupal Update? Parameter FALSE auf TRUE wechseln in File ../sites/x-event.designo.ch.init/settings.php

$update_free_access = FALSE;

g) Robots.vorlage File kopieren nach robots.txt Webroot

Update
System Update Kurzbeschreibung

  1. Files sichern und DB Dump ziehen
  2. Webseite unter "Site maintenance" offline schalten
  3. Verzeichnis überprüfen / umbenennen ../sites/x-event.designo.ch.init
  4. In File ../sites/x-event.designo.ch.init/settings.php
  5. Parameter in Zeile $update_free_access auf TRUE setzen
  6. Parameter in Zeile $db_url überprüfen
  7. Files zurückspielen und DB wiederherstellen
  8. Read/Write Berechtigung auf ../sites/x-event.designo.ch.init/file und ../tmp Ordner setzen
  9. Website neue initialisieren mit x-event.designo.ch/update.php
  10. Parameter in Zeile $update_free_access wieder auf FALSE zurücksetzen
  11. Mit User einloggen ..designo.ch/init/?q=user
  12. Unter "Site maintenance", Webseite wieder online schalten
  13. robots.txt File in Webroot überprüfen, ggf. anpassen
  14. Installierte Zusatzmodule a) admin_menu b) fckeditor c) i18n d) nodeaccess e) poormanscron f) print g) site_map i) cumulus k) views

 

Share/Save/Bookmark