Kategorie: HTML

View Source – Quelltext von Webseiten unter IOS anzeigen

Den Seitenquelltext von Webseiten anzeigen zu lassen gehört zu den Funktionen im Browser welche ich oft benötige. Gerade bei Supportanfragen zu unseren Produkten verrät ein Blick in den Quelltext der HTML-Seite oft schnell was falsch läuft. 

Leider fehlt diese Funktion im Browser von IOS auf dem iPhone und iPad. Doch diese Funktion lässt sich unter IOS 8 mit einer kleinen App für 89 Cent nachrüsten: View Source.

View Source

Die App klingt sich direkt in Safari ein. Neben der Anzeige des Quelltextes lässt sich zum Beispiel die Dokumentenstruktur anzeigen. Der Info-Tab zeigt an, wann die Webseite zuletzt aktualisiert wurde und welche Cookies gesetzt worden sind. Der Assets-Tab zeigt Bilder, ausgehende Links, Stylesheets und eingebundene Scripte an. Diese kann man sich ebenfalls in der App im Quelltext anzeigen lassen.


Für echte Poweruser kann man zudem eigenes Java-Script schreiben und in die Webseite injizieren und ausführen. Inwieweit dies auf eine Touch-Screen Spaß macht sei mal dahingestellt. :-)

Ansonsten eine feine App. Sicher werde ich keinen ausführlichen Support direkt auf meinem Telefon leisten, aber für einen schnellen Überblick im Quelltext reicht es allemal. 


CSS Shapes Editor für Google Chrome

Mittels CSS-Shapes lassen sich zum Beispiel Bilder besser in den Textfluss integrieren, bzw. man kann selbst festlegen, wie der Text eine Grafik umfließt. Hier ein Beispiel:

Shape1

Im Code sieht das obere Beispiel so aus:

<img src="remote.png" align="left” style="shape-outside: polygon(0px 0px, 180px 16px, 365px 501px, 0px 506px);">

Die CSS-Shape ist als Polygon definiert. Allerdings ist es nicht gerade einfach die Werte von Hand festzulegen und im Code festzulegen. Eine Hilfestellung bietet sich hier in Form eines Google Chrome-Plugins an, dem “CSS Shapes Editor”. 


Nachdem das Plugin installiert ist, klickt man mit rechter Maustaste auf das gewünschte Element und wählt den Menüpunkt “Inspect Element” aus:

Inspect Element

Es öffnen sich die Entwickler-Tools. Durch Klicken auf den >> Button kann man den “Shapes”-Editor auswählen und durch Klick auf das Plus Icon dem Element die gewünschte Shape-Form hinzufügen. Zur Auswahl stehen Kreis, Ellipse und das Polygon:

Entwickler-Tools

Hat man die gewünschte Form hinzugefügt, klickt man auf den Zeiger (Pointer) neben dem Plus. Anschließend kann man die Form im Browser-Fenster bearbeiten.

Form bearbeiten

Änderungen werden direkt sichtbar. Ist das Ergebnis wie man es sich wünscht, kopiert man nur noch den Quelltext heraus. Eine Besonderheit gibt es zu beachten, bei mir hat der Editor nur funktioniert mit Dateien die auf einem Webserver lagen. Mit einer lokalen Datei funktionierte der Editor nicht. Also ggf. die HTML-Dateien einfach schonmal auf den Webspace kopieren.

Ich habe noch ein kleines Video erstellt, welches die Bedienung beschreibt:

Obwohl CSS-Shapes eine super Sache sind, funktionieren diese derzeit nicht in allen Browser. Google Chrome und Opera unterstützen diese. Firefox, Safari und Internet Explorer ignorieren diese bisher. 


HTML-Formulare mit abhängigen Auswahlfelder

Da des öfteren Anfragen von DA-FormMaker Kunden kamen, habe ich ein neues Tutorial auf eKiwi.de geschrieben: Erstellen von abhängigen Combo-Boxen, bzw. Auswahlfeldern in HTML. 

Worum geht es? Der Benutzer wählt in einem Auswahlfeld etwas aus und passend dazu werden in einem zweiten Auswahlfeld die Elemente angepasst:

ComboDas ganze funktioniert natürlich nicht nur in DA-FormMaker Formularen, sondern auch in ganz normalen selbst erstellten HTML-Formularen. 

Hier geht es zum Tutorial.


HTML Dateien von PHP parsen lassen

Will man in eine HTML-Webseite nachträglich PHP-Code einbauen, muss man normalerweise die Dateien umbenennen, damit diese auf .php enden. 

Es geht aber auch einfacher mit einer .htaccess Datei, sofern man einen Apache-Webserver einsetzt. Eine Textdatei erstellen, folgenden Inhalt einfügen. Als .htaccess abspeichern und auf den Webspace laden:

# HTML-Dateien von PHP parsen 
AddType application/x-httpd-php .htm .html

Anschließend werden die .htm und .html Dateien wie .php Dateien behandelt. 


HTML: Alle Formularfelder sollen die gleiche Breite haben

Aus einer aktuellen Supportanfrage, im HTML-Formular die gleiche Breite haben. Konkret geht es natürlich um ein DA-FormMaker Formular, aber dies lässt sich prinzipiell natürlich bei Formularen aus jeder anderen Software anwenden.

Lösen lässt sich das mit etwas CSS, welches wir im Head der HTML-Datei definieren:

Same width 1

Wie man sieht genügt es nicht, einfach die Breite zu definieren, man muss explizit “border” und “padding” auf die gleichen Werte bringen.

Hier sieht man auch gleich das grundsätzliche Problem. Textareas und Input-Felder lassen sich recht leicht auf die gleiche Breite bringen. Hat man Auswahlfelder wird es schwieriger. Hier werden je nach Browser die Bedienelemente, z.B. Scrollbar vom Betriebssystem übernommen, dann haut es mit der Breite nicht immer hin. Hier hilft nur ausprobieren und natürlich testen in verschiedenen Browsern.

In dem Beispiel sieht man, dass die Breite vom “select” etwas größer ist.


So sieht das ganze dann aus:

Same size2

Download der Beispieldatei hier.


Tooltips mit Hint.css

Eine kleine feine CSS-Bibliothek: hint.css. Nachdem das Stylesheet eingebunden ist, kann man Elemente seiner Webseite sehr leicht mit Tooltips ausstatten, welche erscheinen, wenn man mit der Maus über dem Element ist:

Hint CSS

Das Einbinden im Code geht sehr einfach, Beispiel:

<a href="javascript:void(0)" class="hint--top" data-hint="Yeah, I am >:D">Look, there is something over me.</a>

Mehr Beispiele gibt es auf der Webseite. Es gibt verschiedene Arten von Tooltips, zum Beispiel für Warnungen oder Fehlermeldungen. 


WordPress Überschriften auslesen und in Webseite einbinden

Vor etwa einem Jahr hatte ich kurz beschrieben wie man WordPress Überschriften aus dem Newsfeed von WordPress auslesen kann und in eine beliebige Webseiten einbinden kann.

Damals hatte ich den Atom-Feed verwendet. Dieser ist bei neuen WordPress Installationen nicht mehr dabei. Daher funktioniert das alte Script an dieser Stelle nicht mehr.

Aus diesem Grund hier nun das aktualisierte PHP-Script, welches nun den RSS-Feed verwendet:

<?php
//Einstellungen
$blog_url = "http://blog.ekiwi.de"; //URL des Blogs OHNE abschließendes /
$count = 5; //Anzahl der letzten Artikelüberschriften die angezeigt werden soll
 
//--------------------------------------------------------------------------------
//ab hier nichts mehr editieren, wenn man nicht weiß was man tut :-)    
$content = @file_get_contents($blog_url . "/?feed=rss2");
 
preg_match_all("/<item[ ]?.*>(.*)<\/item>/Uis", $content, $items);
$items = $items[1];
if(!empty($items)) {
 
    if ($count > sizeof($items)) 
      $count = sizeof($items);
 
    for($i = 0; $i < $count; $i++) { 
      //Den Link auslesen
      preg_match("/<link>(.*)<\/link>/Uis", $items[$i], $link);
 
      //Den Titel auslesen
      preg_match("/<title>(.*)<\/title>/Uis", $items[$i], $array_title);
 
      $title = str_replace("<![CDATA[", "", $array_title[1]);
      $title = str_replace("]]>", "", $title);
 
      //Ausgabe des Titels mit Link
      echo "<li>\n";
      echo "  <a href=\"$link[1]\" title=\"zum Blog...\">$title</a>\n";
      echo "</li>\n"; 
    }     
}
?>

Das Script einfach an der Stelle der HTML einfügen, wo das ganze erscheinen soll.
Und so sieht das ganze dann z.B. aus:

image


Favicons online erstellen – www.xiconeditor.com

Ein schönes Favicon gehört ja mittlerweile zu jeder Webseite.

Wer bereits ein schönes Bild hat, kann dieses z.B. mit unserem Favicon-Generator erstellen. Mit unserem Generator wird das Bild direkt in ein Icon konvertiert und eine Beispiel HTML-Datei erstellt.

Genug Eigenwerbung! Auch andere Dienste im Netz bieten nette Funktionen an. In diesem Fall die Webseite http://www.xiconeditor.com.

Man kann dort ebenfalls Bilder importieren, aber auch nachbearbeiten. Das Icon kann anschließend in verschiedenen Größen exportiert werden:

XIconEditor

Die Standardwerkzeuge, welche man aus Zeichenprogrammen kennt stehen zur Verfügung. Transparenz ist ebenfalls möglich. Insgesamt sehr nettes Online-Tool.


CSS 3.0 Maker

Wer mal ein wenig mit CSS herumspielen will, sollte sich die Webseite http://www.css3maker.com/ancshauen:

image

Man wählt einfach die gewünschte CSS Option aus, spielt ein wenig an den Einstellungen und kann das Resultat direkt anschauen. Sowohl in Code als auch als Live-Ansicht. Außerdem wird zu jedem Effekt die Browserkompatibilität angezeigt (Desktop und mobile Browser).


Cappuccino – RSS Feeds unter MacOS

Kleiner Software-Tipp für Google Reader Benutzer. Die kostenlose Software Cappuccino ruft alle Newsfeeds von eurem Google Reader Account ab und stellt diese übersichtlich in in der Anwendung dar:

Cappucino

Die Software bekommt ihr im App-Store vom Mac.

Was ist der Vorteil einer richtigen Software im Gegensatz zur Webanwendung? Zum einen finde ich die Darstellung in der Software schöner als im Google Pendant online (wo Google das Design gerne mal ändert). Außerdem werden die ungelesenen News im Dock als Badge dargestellt:

badge