Blog - EDVAS Webdesign | Interaktive Websites mit Joomla!

Relaunch von edvas.de

Thu, 15 Dec 2011 09:18:55 +0100

Seit dem 15. Dezember 2011 erstrahlt www.edvas.de im neuen Gewand. Vieles wurde verbessert; Einiges ist neu hinzugekommen. Updates gehören nun mit zu den Leistungen von EDVAS und per Newsletter kann man sich über Neuigkeiten informieren lassen.

Der Relaunch ist die konzequente Weiterentwicklung der Website. In der Auswahl der Referenzen wird nun jeweils genau beschrieben, welche Leistungen EDVAS und unsere Partner erbracht haben. Unter Infos stellt sich das Team von EDVAS vor, bestehend aus Alexander Schmidt, Nina Schmidt und Nicolas Schmidt. Dieser Blog wurde um einige Beiträge erweitert. Ab sofort schreibt Alexander Schmidt, auch bekannt als Bloggerschmidt, hier seine Fachartikel rund um Webdesign mit Joomla!.

Wir wünschen unseren Besuchern viel Spaß mit der neuen Website und hoffen. Für Lob und Kritik sind wir immer zu haben. Einfach diesen Beitrag kommentieren oder per Kontaktformular schreiben.

@font-face - Die sicherste Methode Webfonts zu nutzen

Thu, 08 Dec 2011 12:14:40 +0100

Fontspring schreibt im Artikel „The New Bulletproof @Font-Face Syntax“ über die browserübergreifende Methode Webfonts zu nutzen, also eigene Schrifttypen. Der Trick besteht dabei aus einem einzigen Zeichen: Der Raute #.

Die „Fontspring-CSSNinja @Font-Face Syntax“

Der folgenden Code wurde von Fontspring entwickelt und von CSSNinja verbessert. Voraus ging damals der Artikel Bulletproof @font-face syntax von Paul Irish 2009.

@font-face {
  font-family: 'MyFontFamily';
  src: url('myfont-webfont.eot#') format('eot'), 
       url('myfont-webfont.woff') format('woff'), 
       url('myfont-webfont.ttf')  format('truetype'),
       url('myfont-webfont.svg#svgFontName') format('svg');
}

Warum es funktioniert

Die Internet Explorer Versionen unter 9 haben alle einen Bug im Parser für das src-Attribut. Wenn du darüber mehr als eine Schriftart einbindest, schafft es der IE nicht sie zu laden und meldet einen 404-Fehler. Der Grund dafür ist, dass der IE versucht, alles zwischen den Klammern als eine Datei zu laden. Das zwingt dich das EOT-Format als erstes zu nennen, angehängt mit einer einzelnen Raute #. Der IE denkt dann, dass der Rest der Zeichenfolge ein URL-Fragment ist und lädt nur die EOT-Datei. Alle andere Browser folgen weiter den Spezifikationen und wählen das Format, was sie brauchen.

Browser-konform

Getestet wurde der Code unter

Safari 5.03
IE 6-9
Firefox 3,6-4
Chrome 8
iOS 3,2-4,2
Android 2,2-2,3
Opera 11

Demo anschauen

Änderungen in IhrTemplate, das Template zum Buch „Templates für Joomla! 1.6“

Thu, 08 Dec 2011 12:12:10 +0100

Das Template zum Buch Templates für Joomla! 1.6 ist in der Version 1.0.1 erschienen. Insgesamt gab es sieben Änderungen. Fünf davon betreffen die CSS-Selektoren, eine Sprachvariable und die Funktion zum Herausnehmen von Mootools wurden geändert. Das aktuelle Template zum Buch kann herunterladen werden unter http://ihrtemplate.blank.vc. Vielen Dank an die Leser des Buches, die uns auf die Fehler aufmerksam gemacht haben.

template.css.php

Die Datei template.css.php ist zu finden im Order css des Template-Verzeichnis. Folgende Änderungen wurden unternommen:

Die Klassen

.item10X

(X steht für die Zahlen 1-4) wurden geändert in die jeweilige ID

#item-10X

Aus der ID

#current

wurde

.current

Die ID

#mod_search_searchword

wurde geändert in

#mod-search-searchword

Genauso wie aus

#search_searchword

die ID

#search-searchword

wurde.

Aus der Klasse

.blog-featured-home

wurde

.blog-featured

Drei Zeilen für den Footer komplettieren das Cascading Stylesheet (Danke an Oliver -> Kommentar).

/* FOOTER
*********************************************/
.infooter .moduletable {float:left; padding-right:20px; width:220px;}
.infooter h3 {color:#fff; font-size:16px; margin-bottom:7px;}
.infooter p {color:#3f3f3f; font-size:12px; line-height:20px; padding:5px 0;}

index.php

Diese Datei ist im Rootverzeichnis des Templates zu finden. Hier wurde in der Browserweiche für den Internet Explorer ebenfalls die Klasse

.blog-featured-home

.blog-featured

geändert.

Die Funktion zum Herausnehmen von Mootools lautet jetzt anstatt

if ($this->params->get('mootools')==0) {
    JHTML::_('behavior.mootools');
}

if ($this->params->get('mootools')==1) {
    $headerstuff = $this->getHeadData();
    $scripts = $headerstuff['scripts'];
    $headerstuff['scripts'] = array();
    foreach($scripts as $url=>$type) {
        if (strpos($url, 'mootools') === false) {
            $headerstuff['scripts'][$url] = $type;
        }
    }
    $this->setHeadData($headerstuff);
}

default_form.php

Diese Datei gehört zum Override der Kontakt-Komponente com_contact und ist zu finden im Order html/com_contact/contact. Hier wurde aus der Sprachvariable

COM_CONTACT_CONTACT_EMAIL_ADDRESS

die Variable

JGLOBAL_EMAIL

Joomla! Backend

Das letzte Modul des Footers bekommt einen Modul-Klassen-Suffix, damit die Klasse moduletable nicht greift. Der Name spielt keine Rolle und kann z. B. -last lauten.

Um den Banner auf den Folgeseiten anzeigen zu lassen, erstellt man ein neues Modul (Eigene Inhalte) auf der Position banner. In diesem Modul fügt man dann das Banner-Bild ein (header2.jpg) und läßt es in der Menüzuweisung Auf allen Seiten mit Ausnahme der gewählten erscheinen. Die gewählte Seite ist Home.

Danke

Danke für die vielen hilfreichen Kommentare (siehe unten) und an S.Bev und J.Maas und ihren Rezensionen auf Amazon. Allen Lesern weiterhin viel Spaß beim Entwickeln der eigenen Templates.

Template-Upgrade 1.5 auf 1.6

Thu, 08 Dec 2011 11:53:52 +0100

Eine Leseprobe aus dem Buch Templates für Joomla! 1.6, das ich zusammen mit Andreas Lehr schrieb; erschienen im Franzis-Verlag, November 2010.

Liegt ein Template für Joomla 1.5 vor, kann es mit einigen Handgriffen in ein Template für 1.6 überführt werden. Folgende Dateien werden dabei geändert ...

Eine Leseprobe aus dem Buch Templates für Joomla! 1.6, das ich zusammen mit Andreas Lehr schrieb; erschienen im Franzis-Verlag, November 2010.

Liegt ein Template für Joomla 1.5 vor, kann es mit einigen Handgriffen in ein Template für 1.6 überführt werden. Folgende Dateien werden dabei geändert:

index.php
templateDetails.xml
template.css und template.css.php
error.php

Diese Dateien werden neu erstellt:

template_preview.png
ggf. Sprachdateien

index.php

In dieser Datei gilt es einiges umzuschreiben, aber keine Angst: Es sieht nach mehr aus, als es ist.

Die Zeile

defined( '_JEXEC' ) or die( 'Restricted access' );

wird zu

defined( '_JEXEC' ) or die;

Hier wird einfach nur etwas weggelassen. Als Nächstes gilt es, eine neue Variable zu deklarieren.

$app = JFactory::getApplication();

Diese Variable ersetzt $mainframe aus Joomla 1.5, und anstatt

$mainframe->getCfg('live_site');

wird nun

$app->getCfg('live_site');

eingesetzt (weitere Template-Befehle siehe Referenzteil).

templateDetails.xml

Hier ändert sich der Dokumententyp von

<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd">

<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">

Direkt darunter ändert sich die Zeile

<install version="1.5" type="template">

<install version="1.6" type="template">

Die Methode der Parameter hat sich verändert. Als Beispiel ändert sich der folgende Code:

<params>
  <param name="parameter1"
      type="radio"
      default="0"
      label="Parametername"
      description="Parameterbeschreibung">
    <option value="0">deaktiv</option>
    <option value="1">aktiv</option>
  </param>
</params>

<config>
  <fields name="params">
    <fieldset name="basic">
      <field name="parameter1"
          type="radio"
          default="0"
          label="Parametername"
          description="Parameterbeschreibung" >
        <option value="0">FIELD_OPTION_YES</option>
        <option value="1">FIELD_OPTION_NO</option>
    </fieldset>
  </fields>
</config>

Parameter können jetzt mit fieldset gruppiert werden, z. B. in basic und advanced.

template.css und template.css.php

Im Cascading Stylesheet des Templates werden folgende Klassen ersetzt:

.article_separator

wird ersetzt durch

.item-separator

Die Klasse

.blog_more

wird ersetzt durch

.items-more

Die Artikel-Icons Print, PDF, E-Mail werden jetzt in eine unsortierte Liste (ul) der Klasse actions gepackt. Mithilfe von Firebug lässt sich der 1.6-Quelltext sehr gut nach neuen Klassen durchsuchen.

<ul class="actions">
    <li class="print-icon">
        <a href="http://www.edvas.de/..."><img src="http://www.edvas.de/..." alt="Print"></a>
    </li>
    <li class="email-icon">
        <a href="http://www.edvas.de/..."><img src="http://www.edvas.de/..." alt="Email"></a>
    </li>
</ul>

Die neuen Klassen werden in das Stylesheet aufgenommen.

.actions {
    list-style: none;
    ...
}
.print-icon { ... }
.email-icon { ... }

error.php

In der Fehlerseite ändert sich die Ausgabe des Error-Codes und der Error-Nachricht.

Die Zeile

$this->error->code;

wird ersetzt durch

$this->error->getCode();

und die Zeile

$this->error->message;

durch

$this->error->getMessage();

template_preview.png

Neben dem kleinen Vorschaubild template_thumbnail.png ist es nun möglich, ein 800 x 600 Pixel großes Vorschaubild namens template_preview.png zu hinterlegen. Klickt man im Backend auf das kleine Bild, öffnet sich das große Bild in einer Lightbox. Das neue Bild gehört in das Stammverzeichnis des Templates (gleiche Ebene wie index.php) und sollte mit in die templateDetails.xml aufgenommen werden.

<filename>template_thumbnail.png</filename>

Sprachdateien

Neu in Joomla 1.6 ist, dass nun auch System-Sprachdateien eingebettet werden. Diese Dateien erlauben es dem Programmierer, den Namen und die Beschreibung der Erweiterung in der Sprache des Benutzers anzeigen zu lassen. Neben

de-DE.tpl_TEMPLATENAME.ini

gehört jetzt auch eine

de-DE.tpl_TEMPLATENAME.sys.ini

dazu. Wichtig ist das zusätzliche .sys im Namen. Alle Dateien können jetzt auch im gleichen Ordner des Template-Verzeichnisses landen, z. B. languages. Mit

<languages folder="languages">
    <language tag="de-DE">de-DE.tpl_templatename.ini</language>
    <language tag="de-DE">de-DE.tpl_templatename.sys.ini</language>
    <language tag="en-GB">en-GB.tpl_templatename.ini</language>
    <language tag="en-GB">en-GB.tpl_templatename.sys.ini</language>
</languages>

werden die Sprachdateien mit in die Datei templateDetails.xml aufgenommen.

Weitere gute Artikel zum Thema in englischer Sprache:

Joomla 1.5 to 1.6 Template Upgrade Tutorial (Part 1)

Joomla 1.6 Templates: What Designers Should Know