Tipps zu SEO, Internet Marketing, Webdesign und IT-Themen

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
  

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);</pre>
// 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();
}

Firebug allg ansprechen

<?php

FB::log('Log message');
FB::info('Info message');
FB::warn('Warn message');
FB::error('Error message');

?>

Stack traces

console.trace();

Object Inspection

console.dir(object);

XML Object inspection

console.dirxml(element);

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.

Magento Connect Developer Toolbar for Magento

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

Magento Developer Toolbar

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.

Hier findet ihr ein paar nützliche Cheet-Sheets für Web-Entwickler für HTML, XHTML, CSS, Apache, mod_rewrite, reguläre Ausdrücke, Java-Script, MySQL, Smarty und Jquery.

Gerade Webentwickler die von Firefox zu Opera umsteigen vermissen ggf. ein Webmaster-Tool wie das Plugin Firebug.

Als Alternative dazu findet ihr im Opera unter “Extras -> Weiteres -> Entwicklerwergzeuge” ein Tool Namens “Opera Dragonfly”, welches ähnlich dem Firefox Plugin Firebug, als nützliches Debugging-Tool für Webmaster ist.

Opera Dragonflyer Screenshot 1

Dragon Flyer ScreenShot 2

Neben der aufbereiteten (X)HTML, CSS, XML & JavaScripts besteht die Möglichkeit der Debug-Ausgabe, z.B. Debuggen von JavaScript mit Hilfe von Haltepunkten.

In der Kommandozeile ist die direkte Eingabe von Befehlen möglich, wodurch das Testen und Probieren ungemein erleichtert wird.

Anzeigen und Bearbeiten von CSS-Eigenschaften ist ebenso möglich wie die Vorschau des gesamten Seitenlayouts.

Eine Navigation durch den DOM-Baum und die Durchführung von Änderungen klappt ebenfalls wunderbar.

Ähnlich dem Firebug gibt es eine Console, die Fehlermeldungen und sonstige Ausgaben anzeigt und praktische Filtermöglichkeiten zur bereit stellt.

Download Opera Dragonflyer

Englische Einleitung in DragonFlyer