Die Werkzeugkästen der drei großen Browser

Die führenden modernen Browser von Googles Chrome über Mozillas Firefox bis zum Microsoft-Browser Edge haben alle einen Werkzeugkasten mit dabei, der hauptsächlich für die Ersteller von Internetseiten gedacht ist. Die Entwickler können mit den darin vorhandenen Tools zum Beispiel Fehler in ihren JavaScript-Skripten aufspüren oder herausfinden, ob Performance-Probleme die zügige Darstellung ihrer Anwendungen ausbremsen und vor allem, welche Komponente oder Funktion das auslöst. Die Toolboxen sind auch für Normalos hilfreich Allerdings lohnt es sich durchaus auch für Otto Normalsurfer, sich die Entwicklertools anzuschauen. Und auch für Webseiten-Betreiber ist es eine gute Idee, mithilfe des Werkzeugkastens seines Browsers herauszufinden, warum das Schloss vor der URL-Eingabe plötzlich nicht mehr grün und geschlossen ist und die angezeigte Internetseite als „unsicher“ angeprangert wird. Das passiert zum Beispiel bei Blogs auf Basis des CMS Wordpress in der Regel, wenn ein neu angelegter und illustrierter Artikel ein Bild enthält, das nicht mit https://meineseite.de, sondern mit http://meineseite.de aufgerufen wird. Bei Googles Chrome ruft man einfach mit F12 den Werkzeugkasten auf, klickt auf den Menüpunkt „Console“ und sieht im Klartext, welches Bild das verursacht. Dann noch schnell das fehlende „s“ in dem Link beseitigen, und schon verschwindet die Sicherheitswarnung und das Schloss geht wieder zu. Aufruf der Werkzeugkästen immer mit F12 Der Aufruf des [...]

2018-12-02T08:31:48+02:00Dezember 2nd, 2018|Bildbearbeitung, Browser, CMS, Coding, Javascript, Webwerkzeuge|Kommentare deaktiviert für Die Werkzeugkästen der drei großen Browser

If-Bedingung mit MySQL statt PHP

Häufig soll eine Ausgabe vom Inhalt eines Tabellenfeldes einer SQL-Datenbank abhängig gemacht werden. Hier ein Beispiel dazu in PHP, bei dem in einer Personenliste durch ein Bild gekennzeichnet werden soll, ob es sich um eine Frau oder einen Mann handelt: while ($zeile = mysql_fetch_array( $ergebnis )) {     if ($zeile['geschlecht'] == 1)     {         echo '<img src="frau.png" />';     }     elseif ($zeile['geschlecht'] == 0)     {         echo '<img src="mann.png" />';     } } Das lässt sich mit einer IF-Bedingung direkt in MySQL deutlich eleganter lösen: $sql = "SELECT IF(`geschlecht`=1, 'frau.png', 'mann.png') as `sex`         FROM `tabelle`"; // Die Ausgabe dazu... while ($zeile = mysql_fetch_array( $ergebnis )) {     echo '<img src="' . $zeile['sex'] . '" />'; }

2013-07-30T09:05:49+02:00Juli 30th, 2013|MySQL, PHP|Kommentare deaktiviert für If-Bedingung mit MySQL statt PHP

Bildtexte semantisch korrekt zuordnen mit HTML5

Für erfolgreiche Suchmaschinenoptimierung (SEO) wird es immer interessanter, einen Bildtext dem dazugehörigen Bild semantisch einwandfrei dem dazugehörigen Bild zuzuordnen, damit die Suchmaschinen diesen Zusammenhang auch erkennen. Bisher machte man das üblicherweise so: <img src="PfadZumBild.jpg" alt="Mein Bild" />   <p>Ein schönes Bild</p> Damit ist der Zusammenhang zwischen Bild und Text für den Roboter einer Suchmaschine nicht eindeutig erkennbar. Mit HTML5 wurde das Figure-Element mit dem Figcaption-Element eingeführt, das hier eindeutig die bessere Lösung ist: <figure>       <img src=" PfadZumBild.jpg " alt=" Mein Bild " />       <figcaption>           <p>Ein schönes Bild </p>       </figcaption>   </figure>

2012-08-30T09:20:17+02:00August 30th, 2012|Allgemein, HTML|Kommentare deaktiviert für Bildtexte semantisch korrekt zuordnen mit HTML5

Die Quellcodes von GIMP 2.8 stehen zum Download bereit

Heute wurden die Quellcodes zur neuen Version 2.8 des beliebten Bildbearbeitungsprogramms GNU Image Manipulation Program (GIMP) zum Download bereitgestellt. Installationspakete dazu werden bald folgen. Für die Erstellung von Webseiten ist GIMP ein gutes kostenloses Werkzeug, das seit einiger Zeit auch als Windows-Version zur Verfügung steht. Viele werden sich dar+ber freuen, dass GIMP 2.8 jetzt statt in drei oder mehr Einzelfenstern ketzt auch in einem Fenster ablaufen kann. Das Textwerkzeug wurde für die neue Version stark überarbeitet. Kerning und Textfarbe können jetzt geändert werden und man muss Texte nicht mehr in ein Fenster eingeben, sondern kann das direkt in der Zeichenfläche machen. Über einen Polygonrahmen lassen sich jetzt auch Teile eines Bildes verzerren.  Auch die Gruppierung von Ebenen ist jetzt möglich. Eine vollständiger Beschreibung der neuen Funktionen von GIMP 2.8 gibt es schon seit Mitte letzten Jahres bei Golem.

2012-05-03T22:43:36+02:00Mai 3rd, 2012|Allgemein|Kommentare deaktiviert für Die Quellcodes von GIMP 2.8 stehen zum Download bereit

Anzeigen, ob ein Besucher bei Facebook, Twitter oder Google+ eingeloggt ist

Einen interessanten Trick hat sich Tom Anthony einfallen lassen, um bei allen wichtigen Browsern festzustellen, ob ein Besucher seiner Internetseite aktuell bei Facebook, Twitter oder Google+ eingeloggt ist. Bei Facebook ist das ja noch einfach, denn die Funktion FB.getLoginStatus aus dem API beantwortet die Frage direkt. Auch Twitter bietet mit twitterSessionsPresent eine ähnlich API-Funktion, die funktioniert aber nicht bei Surfern, die mit dem Internet Explorer 9 unterwegs sind. Google+ bietet keine API-Funktion dazu, so dass sich der Entwickler etwas einfallen lassen musste. Bei seiner Lösung nutzt er aus, dass eine Ressource, genau gesagt ein Bild, nur aufrufbar ist, wenn der Benutzer eingeloggt ist. In dem Fall kann er über eine Redirect-URL auf das Bild zugreifen. Die gesamte Lösung mit allen Details hat Tom Anthony auf seiner Homepage veröffentlicht.  

2012-02-20T14:36:44+02:00Februar 20th, 2012|Javascript|Kommentare deaktiviert für Anzeigen, ob ein Besucher bei Facebook, Twitter oder Google+ eingeloggt ist

HTML: Buttons mit Grafik und Text

Das HTML-Tag <button> erzeugt Schaltflächen, die man auch außerhalb von <form> – Tags benutzen kann. Dabei kann das Tag aus einem Bild und einem Text bestehen. Bilder oder Texte, die man zwischen dem öffnenden und dem schließenden <button>-Tag einsetzt, werden mit in dem Button gerendert, auch die meisten HTML-Tags funktionieren im <button>-Tag. Image-Maps funktionieren allerdings nicht innerhalb des <button>-Tags. Mit <button> wird ein Inline-Element erzeugt, das keinen Zeilenvorschub erzwingt. Die beiden Schaltflächen im Beispiel basieren auf folgendem Code: <button type="button"> <img src="weiter.gif"> <span style="display: block; width: 80px; color: #0000ff">Dortmund</span> </button><button type="button"> <img src="weiter.gif"> <span style="display: block; width: 80px; color: #0000ff">Köln</span> </button>

2011-04-28T09:23:54+02:00April 28th, 2011|Allgemein|Kommentare deaktiviert für HTML: Buttons mit Grafik und Text
Nach oben