Ihr möchtet eine Photoshop (PSD Datei) direkt in CSS umwandeln?

Diesen Service bietet kostenlos die Seite www.psd2cssonline.com an.

Tipp: Achtet vor dem konvertieren darauf dass alle Ebenen welche ihr als eigenen CSS-DIV-Layer/-Bild haben möchtet auch in der PSD als eigene Ebene getrennt sind. Dabei zu beachten ist auch „weniger ist mehr“, weil zu viel ebenen versagt der Converter bzw. die erzeugte CSS.

Wenn ihr noch weitere kostenlose Webseiten kennt welche diesen Service kostenlos anbieten, bitte in die Kommentare schreiben und ich nehme es mit in die Liste auf!

Ein paar Tipps zur Nutzung verschiedener HTML5 & CSS3 Techniken findet ihr unter folgendem Link:

http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using

Im Standard Theme von Magento findet man folgendes:

<h1 class="logo"><strong>Magento Commerce</strong><a href="http://demo.magentocommerce.com/" title="Magento Commerce" class="logo" rel="nofollow"><img src="http://demo3.magentocommerce.com/skin/frontend/default/default/images/logo.gif" alt="Magento Commerce" /></a></h1>

Dadurch wird das ggf. fehlende h1-Tag mit dem Alt-Attribute des Shop-Logo-Bildes gesetzt (kann im Admin-Backend konfiguriert werden). Die Idee dahinter ist gut, so ist auf jeder Seite ein h1 vorhanden. Die Umsetzung allerdings fraglich. Durch die folgende CSS Formatierung auf dem Strong-Element wird das h1 für die Human-Visitors versteckt:

strong {
font-size:0;
height:0;
left:-999em;
line-height:0;
overflow:hidden;
position:absolute;
text-indent:-999em;
top:-999em;
width:0;
}

Google mag solch Tricks gar nicht, straft ggf. die Seite so gar ab.

Hier die bessere Lösung:

<h1><a href="http://demo.magentocommerce.com/" title="Magento Commerce"><img src="http://demo3.magentocommerce.com/skin/frontend/default/default/images/logo.gif" alt="Magento Commerce" /></a></h1>

In diesem Fall wird der Alt-Title des Bildes als h1 verwendet, ohne irgend welch Visibility-Tricks welche zur Abmahnung führen könnten.

Als Webdesigner und -Entwickler stößt man häufig über die Problematik große CSS-Dateien ordentlich zu strukturieren und zu dokumentieren, ggf. diese sinnvoll auf mehrere Dateien aufzuteilen.

Ohne eine vernünftige Struktur und Dokumentation kommt spätestens bei der Anpassung das böse Erwachen.

Vor allem bei Projekten an denen mehrere Personen arbeiten ist eine sinnvolle Struktur & Dokumentation unerlässlich.

Dieser Artikel soll daher Möglichkeiten der Strukturierung und Dokumentation von CSS Dateien aufzeigen.

Struktur

Für die Strukturierung gibt es mehrere Vorgehensweise, ich selbst habe mich nach jahrelanger Entwicklung dazu entschieden im ersten Schritt die CSS-Datei wie folgt in folgende Bereich zu gliedern:

• #header
  • #header_logo
  • #header_navigation
• #banner
• #main
  • #main_navigation
  • #main _content
  • #main _sidebar
• #footer
  • #footer_navigation
  • #footer_notice

Dokumentation

Im zweiten Schritt erstelle ich zwei Stylesheet-Dateien, welche ich layout.css und content.css nenne. In der layout.css befinden sich alle Definitionen zur Positionierung der einzelnen Elemente. Die Datei content.css enthält alle Definitionen zum gestalten der einzelnen Elemente. Als nächstes lege ich die Grundstruktur der CSS Dateien fest. Dabei schreibe ich die einzelnen Bereiche, welche oben aufgeführt wurden, in die CSS Datei. Die CSS Datei sieht nun wie folgt aus:

/***************************************
Author : Daniel Briegert <info@fly2mars-media.de>
Date : 2010.06.04
File : css/content.css
***************************************/

/* GENERAL ****************************/
/* HEADER *****************************/
/* HEADER_LOGO ************************/
/* HEADER_NAVIGATION ******************/
/* BANNER *****************************/
/* MAIN *******************************/
/* MAIN_CONTENT ***********************/
/* MAIN_NAVIGATION ********************/
/* MAIN _SIDEBAR **********************/
/* FOOTER *****************************/
/* FOOTER_NAVIGATION ******************/
/* FOOTER_NOTICE **********************/

Anschließend werden die einzelnen Bereiche mit den einzelnen Elementen vervollständigt.
Z.B.  für #main_content einen H1-Tag wird wie folgt definiert:

/* MAIN_CONTENT ************************/

#main_content h1 {
border-bottom: 1px solid;
color: blue;
font: 1.4m Verdana, arial;
}

Sinnvoll ist es die Definitionen innerhalb einer Sektion alphabetisch zu sortieren. Das Beispiel oben veranschaulicht diese Vorgehensweise.

Weitere Informationen

Fertige CSS Frameworks erleichtern die Erstellung. Interessant  ist unter anderem das Framework Blueprint CSS, welches ihr unter dem folgenden Link findet.

Link:

• Blueprint CSS

Ihr kennt sicher das Problem bei zu langen URLs oder Kommentaren welche bei Tabellen freien CSS-Layouts ggf. über den Rand hinaus gehen. Die Lösung ist folgender CSS-Code:

.break-word {
  word-wrap: break-word;
}

Bestimmt für den ein oder anderen Einsteiger nützlich, deshalb wollen wir euch die Links nicht vorenthalten.

jQuery Tutorial für Anfänger

22 Handy HTML5 & CSS3 Tools, Resources And Guides

HTML5 & CSS3 werden nach und nach von den Browsern interpretiert. Viele neue Features ermöglichen Webentwicklern interessante Möglichkeiten auf die viele gewartet haben. Welche das sind und wie ihr die nutzen könnt findet ihr in den folgenden Cheat Sheets für CSS3 & HTML5:

CSS-Cheat-Sheet (PDF)

HTML5-Cheat-Sheet (PDF)

Firebug mit FirePHPCore-Library ansprechen

Mit der folgenden Funktion könnt ihr Firebug mit Hilfe der FirePHPCore ansprechen, dazu ggf. den entsprechenden Pfad zur Library anpassen (bei path to library):

function firebug($array=array(), $error_reporting=true)
{
  if($error_reporting)
error_reporting(E_ALL);
// path to library
require_once PFAD_RELATIV . "/class/Firebug/FirePHP.class.php";
$firephp = FirePHP::getInstance(true);
require_once (PFAD_RELATIV."/class/Firebug/fb.php");
//$firephp->group('Debug Group');
$firephp->dump('dump', $array);
//$firephp->fb($array, 'dump', FirePHP::DUMP);
$firephp->fb($array, 'dump', FirePHP::INFO);
//$firephp->groupEnd();
}

Firebug in ZendFramework ansprechen

Mit der folgenden Funktion könnt ihr Firebug direkt im ZendFramework ansprechen

function firebug($value= '')
{
 $writer = new Zend_Log_Writer_Firebug();
 $logger = new Zend_Log($writer);
 $request = new Zend_Controller_Request_Http();
 $response = new Zend_Controller_Response_Http();
 $channel = Zend_Wildfire_Channel_HttpHeaders::getInstance();
 $channel->setRequest($request);
 $channel->setResponse($response);
 // Start output buffering
 ob_start();
 // Now you can make calls to the logger
 $logger->log($value, Zend_Log::INFO);
 // Flush log data to browser
 $channel->flush();
 $response->sendHeaders();
}

Debug Log Ausgabe in Firebug

<?php
FB::log('Log message');
FB::info('Info message');
FB::warn('Warn message');
FB::error('Error message');
?>

Log Debug Ausgabe in Firebug aus JavaScript

Stack traces

console.trace();

Object Inspection

console.dir(object);

XML Object inspection

console.dirxml(element);

Current Events on the Page

console.dir(window);

With Objects

console.log("The %d item has a value of: %d", fifth, myvalue);

Firebug with Ajax developement

how-to-integrate-firephp-for-ajax-development

Weiter führende Links

• Firebug
• Debug JavaScript with Firebug (Examples)
• FirePHPCore
• FirePHP

Auf Magento-Connect gibt es seit kurzem die kostenlose Extension Developer Toolbar for Magento zum Download.

Nach der Installation über Magento-Connect erscheint in der Fusszeile des Browsers die Developer Toolbar for Magento:

Die Anzeige kann auch im Magento Admin-Backend auf Global, per Website oder auch per Store-View konfiguriert werden.

Ihr findet die Option „Aktiviert Ja / Nein” unter System->Konfiguration->Erweitert->Entwickleroptionen->Developer Toolbar .

Die Optionen in der Developer Toolbar sind bereits vorhandene Funktionalitäten aus dem Backend, der Mehrwert liegt darin dass das suchen der Option bzw. das lästige klicken durch den Menus sowie der Login in das Admin-Backend entfällt. So kann, vor allem bei der Entwicklung, einiges an Zeit eingespart werden.

Sie Benötigen Unterstützung bei der Erstellung oder Anpassung eines Magento eCommerce Shop System?

Fly2Mars-Media unterstützt Sie in diesem und vielen anderen Bereichen rund um das Thema Internet & IT!

Für ein individuelles Angebot nehmen Sie noch heute Kontakt mit uns auf.

Firebug ist einer mit der nützlichsten Tools im Bereich Debuggen von Webseiten ((X)HTML, CSS, JavaScript, etc.).

Mit Hilfe der Mouse & Keyboard-Shortcuts lassen sich viele Funktionen aufrufen oder der Aufruf vereinfachen, die wichtigsten Shortscuts findet ihr hier.