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!

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.

Zur erstellung & Optimierung von Webpages empfehle ich folgende 2 Plugins für den Firefox:

Html Validator– w3c validation

Page Speed (benötigt firebug plugin)

Foxy SEO Tool – some SEO Features

CSS Reloader – CSS Reloader is an extension that allows you to reload all the CSS of any site without you have to reload the page itself.

FireQuery – a Firebug extension for jQuery development

SenSEO – SenSEO analyzes web pages and tells you how good they fulfill on-page Search Engine optimization criteria. SenSEO is a Firefox add-on integrated with the popular Firebug web development tool. The code is based on the YSlow extension.

Eventbug – diese Extension erweitert Firebug um ein „Events“-Tab und soll die Arbeit mit Event-Handlers erleichtern.

SeoQuake SEO– SeoQuake ist eine SEO-Extension für Webmasters, die mit Suchmaschinenoptimierung (SEO) und Internet-Promotion von Webseiten zu tun haben. SeoQuake ermöglicht die Erfassung und Analyse vieler wichtigen SEO-Parameter von einem Internet-Projekt

User Agent Switcher – Switch Agent to Mobile, GoogleBot, etc

Um ein Text kursiv zu formatieren gibt es die Tags <i> und <em>. Gerade für die für die Suchmaschinen-Optimierung gibt es hier ein signifikanten Unterschied.

Bei der rein grafischen Ausgabe unterscheiden sich die beiden Tags nicht. Wird die Webseite allerdings maschinell ausgelesen (z.B. Screenreader oder Google-Bot), so wird der Unterschied deutlich. Der Tag <i> formatiert eine Textpassage lediglich kursiv. Bei der Benutzung eines Screenreaders  wird das formatierte Wort normal ausgesprochen. Bei der Verwendung des <em> Tags wird das Wort nicht nur kursiv formatiert, sondern von einem Screenreader auch speziell ausgesprochen.

Vor allem bei der Erstellung barrierefreier Webanwendungen spielt das <em> Tag eine besondere Rolle. Google stuft das <em> Tag besser ein als das <i> Tag. Daher ist die Empfehlung nach Möglichkeit nur <em> Tags innerhalb der Website zu verwenden.

Hier eine Liste der kompletten HTML 5 Tags.

• 4* Diese Elemente sind definiert unter 4+
• 5* Diese Elemente sind in HTML 5 definiert
  

Tag	Description	4	5
<comment>	Defines a comment	4	5
<DOCTYPE>	Defines the document type	4	5
<a>	Defines a hyperlink	4	5
<abbr>	Defines an abbreviation	4	5
<acronym>	Not supported. Defines an acronym	4
<address>	Defines an address element	4	5
<applet>	Not supported. Defines an applet	4
<area>	Defines an area inside an image map	4	5
<article>	Defines an article		5
<aside>	Defines content aside from the page content		5
<audio>	Defines sound content		5
<b>	Defines bold text	4	5
<base>	Defines a base URL for all the links in a page	4	5
<basefont>	Not supported. Use CSS instead	4
<bdo>	Defines the direction of text display	4	5
<big>	Not supported. Defines big text	4
<blockquote>	Defines a long quotation	4	5
<body>	Defines the body element	4	5
<br>	Inserts a single line break	4	5
<button>	Defines a push button	4	5
<canvas>	Defines graphics		5
<caption>	Defines a table caption	4	5
<center>	Not supported. Defines centered text	4
<cite>	Defines a citation	4	5
<code>	Defines computer code text	4	5
<col>	Defines attributes for table columns	4	5
<colgroup>	Defines groups of table columns	4	5
<command>	Defines a command button		5
<datagrid>	Defines data in a tree-list		5
<datalist>	Defines a dropdown list		5
<datatemplate>	Defines a data template		5
<dd>	Defines a definition description	4	5
<del>	Defines deleted text	4	5
<details>	Defines details of an element		5
<dialog>	Defines a dialog (conversation)		5
<dir>	Not supported. Defines a directory list	4
<div>	Defines a section in a document	4	5
<dfn>	Defines a definition term	4	5
<dl>	Defines a definition list	4	5
<dt>	Defines a definition term	4	5
<em>	Defines emphasized text	4	5
<embed>	Defines external interactive content or plugin		5
<eventsource>	Defines a target for events sent by a server		5
<fieldset>	Defines a fieldset	4	5
<figure>	Defines a group of media content, and their caption		5
<font>	Deprecated. Defines text font, size, and color	4
<footer>	Defines a footer for a section or page		5
<form>	Defines a form	4	5
<frame>	Not supported. Defines a sub window (a frame)	4
<frameset>	Not supported. Defines a set of frames	4
<h1> to <h6>	Defines header 1 to header 6	4	5
<head>	Defines information about the document	4	5
<header>	Defines a header for a section or page		5
<hr>	Defines a horizontal rule	4	5
<html>	Defines an html document	4	5
<i>	Defines italic text	4	5
<iframe>	Defines an inline sub window (frame)	4	5
<img>	Defines an image	4	5
<input>	Defines an input field	4	5
<ins>	Defines inserted text	4	5
<isindex>	Not supported. Defines a single-line input field	4
<kbd>	Defines keyboard text	4	5
<label>	Defines a label for a form control	4	5
<legend>	Defines a title in a fieldset	4	5
<li>	Defines a list item	4	5
<link>	Defines a resource reference	4	5
<mark>	Defines marked text		5
<map>	Defines an image map	4	5
<menu>	Defines a menu list	4	5
<meta>	Defines meta information	4	5
<meter>	Defines measurement within a predefined range		5
<nav>	Defines navigation links		5
<nest>	Defines a nestingpoint in a datatemplate		5
<noframes>	Not supported. Defines a noframe section	4
<noscript>	Defines a noscript section	4	5
<object>	Defines an embedded object	4	5
<ol>	Defines an ordered list	4	5
<optgroup>	Defines an option group	4	5
<option>	Defines an option in a drop-down list	4	5
<output>	Defines some types of output		5
<p>	Defines a paragraph	4	5
<param>	Defines a parameter for an object	4	5
<pre>	Defines preformatted text	4	5
<progress>	Defines progress of a task of any kind		5
<q>	Defines a short quotation	4	5
<rule>	Defines the rules for updating a template		5
<s>	Not supported. Defines strikethrough text	4
<samp>	Defines sample computer code	4	5
<script>	Defines a script	4	5
<section>	Defines a section		5
<select>	Defines a selectable list	4	5
<small>	Defines small text	4	5
<source>	Defines media resources		5
<span>	Defines a section in a document	4	5
<strike>	Not supported. Defines strikethrough text	4
<strong>	Defines strong text	4	5
<style>	Defines a style definition	4	5
<sub>	Defines subscripted text	4	5
<sup>	Defines superscripted text	4	5
<table>	Defines a table	4	5
<tbody>	Defines a table body	4	5
<td>	Defines a table cell	4	5
<textarea>	Defines a text area	4	5
<tfoot>	Defines a table footer	4	5
<th>	Defines a table header	4	5
<thead>	Defines a table header	4	5
<time>	Defines a date/time		5
<title>	Defines the document title	4	5
<tr>	Defines a table row	4	5
<tt>	Not supported. Defines teletype text	4
<u>	Not supported. Defines underlined text	4
<ul>	Defines an unordered list	4	5
<var>	Defines a variable	4	5
<video>	Defines a video		5
<xmp>	Not supported. Defines preformatted text	4

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;
}

Zwar super simple Sache für jeden der nur ein klein wenig Ahnung von JavaScript hat, aufgrund der Frage eines Freundes wie das geht hier eine kurze Erläuterung. Ausgangssituation ist dass ihr ein Formular (Form-Element) mit einem Input-Submit Button habt. Vor dem absenden des Form möchtet ihr allerdings noch mal den Benutzer fragen ob er das tatsächlich möchte (Ja/Nein-Abfrage).

Das könnt ihr ganz einfach wie folgt umsetzen:

<script language="javascript">function msgBox()
{
  return window.confirm("Wollen Sie wirklich abschicken??");
}
//-->
</script>
<form action="index.php" method="post" name="form1">
<input type="text" name="text1" />
<input type="submit" name="submit1" value="Abschicken" onclick="return msgBox();" />
</form>

Ich hoffe mit diesem simplen Code-Schnippel noch mehr als nur 1 Person geholfen zu haben, deshalb auch die Veröffentlichung hier im Blog!

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.