Kategorie: HTML

Chrome Remote Debugging mit Google Nexus 7

1. Google USB-Treiber installieren
google-usb-driver

2. Einstellungen im Goole Nexus 7 vornehmen

  1. Chrome for Mobile – Settings > Developer Tools > Enable USB Web debugging
  2. Device – Settings > Developer options > USB debugging

3. Google Nexus 7 über USB am PC anschließen

4. Windows-Kommandos in der Eingabeaufforderung

cd C:\Android\adt-bundle-windows-x86_64-20130219\sdk\platform-tools
adb forward tcp:9222 localabstract:chrome_devtools_remote

5. Aufruf im Chrome-Webbrowser
Danach „Inspectable pages“ im Chrome Browser über die Adresse http://localhost:9222/ aufrufen.

Update:
In neueren Chrome-Versionen können Seiten auch über chrome://inspect inspiziert werden. Man braucht dann nicht mehr http://localhost:9222/ öffnen. Der Vorteil von chrome://inspect ist außerdem, dass man dann HTML-Elemente in die Zwischenablage des inspizierenden PCs kopieren kann.

Bild in einem SVG-Element zentrieren

Man kann ein Bild in einem SVG-Element wie folgt zentrieren:

<svg id="box" width="200" height="200">
<image 
  width="114" 
  height="158" 
  xlink:href="images/card.png"
 
  x="50%" 
  y="50%" 
  transform="translate(-57, -79)"
  >
</image>
</svg>

In Worten:

  1. Obere linke Ecke des Bildes in der Mitte der Fläche ansetzen (x="50%", y="50%")
  2. Bild um die Hälfte der Bildgröße nach links verschieben (-57)
  3. Bild um die Hälfte der Bildhöhe nach oben verschieben (-79

Pinch-Zooming auf Android-Geräten deaktivieren

Auf Android-Geräten kann mit einem Tap auf einer Webseite herangezoomt werden. Genau so ist es möglich, aus einer Webseite heraus zu zoomen (Pinch-Zoom). Um das zu verhindern, kann folgendes Meta-Tag eingesetzt werden:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Abweichende Browser-Implementierungen der Eigenschaft pointer-events

Ein neues Feature in der HTML5-Spezifikation ist die Eigenschaft pointer-events. Das W3C definiert die pointer-events Eigenschaft im Rahmen des SVG-Standards und beschreibt, dass das Setzen der Eigenschaft Auswirkungen darauf hat, ob eine skalierbare Vektorgrafik das Ziel eines Click-Events (z.B. Mausklick) werden kann oder nicht.

Leider ist HTML5 noch kein verabschiedeter Standard sondern ein in der Entwicklung befindlicher Standard (work-in-progress proposal). Browserhersteller müssen daher diese Vorschläge nicht strikt implementieren, sondern haben einen gewissen Handlungsspielraum. Schaut man in die pointer-events Beschreibung von WebKit, so findet man dort die Angabe, dass es Bugs in der Implementierung bei Mozilla (Bug 380573) und WebKit (Bug 11395) selbst gibt.

Die Gecko Rendering Engine (verwendet im Mozilla Firefox) als auch die WebKit HTML-Rendering-Engine implementieren die pointer-events, entgegen dem W3C-Vorschlag, nicht nur für Vektorgrafiken (SVG), sondern für alle HTML-Elemente. Praktisch führt dieses unterschiedliche Verhalten zu einem Problem, das ich kurz vorstellen möchte.
Abweichende Browser-Implementierungen der Eigenschaft pointer-events weiterlesen

Get user agent with Server Side Includes

This is how you can show the user agent with Server Side Includes:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>SSI Page</title>
  </head>
  <body>
    <!--#echo var="HTTP_USER_AGENT" -->
  </body>   
</html>

Custom website image and description for Facebook Share

If you share a link of a website on Facebook, then Facebook will display the title, description and an image of that website. If you are a webmaster, then you can define what will be shown on Facebook. Let’s have a look at my example:

<title>Der Blog von Benny Neugebauer</title>
<meta name="description" content="Benny Neugebauer schreibt in seinem Blog über Tipps und Tricks in der Webentwicklung. Zu den Themen zählen JavaScript, Java, PHP, HTML5, SEO und Photoshop." />
<meta name="medium" content="blog" />
<link rel="image_src" href="https://www.bennyn.de/images/logo.png" / >

Explanation:

  1. Facebook will show the standard HTML title of your webpage.
  2. You can set description, which will be shown. It can be 160 characters long but to be compatible with the Google search, it should not be longer than 130 characters.
  3. It is recommended to determine the type of your website. Possible values are: audio, image, video, blog, news and mult (multiple).
  4. Finally you can set a thumbnail picture for your website. The size should be 100×100 pixels.

Here is the final result of my customization:

More information can be found in the Facebook Share documentation.