Profile picture Über mich

sebadorn | blog

Opera Extensions und XHR

OEX und XHR

Zur Zeit schreibe ich an einer Opera Extension. Bisher zu finden auf GitHub, später möchte ich sie dann auch im Katalog von Opera einstellen. Das als Vorgeschichte.

Situation

Bei berühren eines Links zu einer Grafik, wird selbige angezeigt.

Das JavaScript-Skript der Extension wird auf der besuchten Seite eingebunden. Sobald der Mauscursor einen Link berührt, wird geprüft, ob das Ziel ein Bild (endend auf .JPG, .PNG etc.) ist und falls dem so ist, angezeigt. Führt der Link nicht direkt zu einer Grafik, aber zu einem Dienst mit einer verfügbaren API, wird diese gefragt. Einige Dienste, die sich auf Medien wie Grafiken und Videos spezialisiert haben, bieten den oEmbed-Standard an; so auch deviantART.

Ein Beispiel, wie das abläuft:

  1. Folgender Link wird gesetzt: http://fav.me/d468yca. Dabei haben wir keinen direkten Link zur Grafik selbst, aber zu dessen Galerie-Seite.
  2. Um die URL für die Grafik selbst herauszufinden, fragen wir die API des Dienstes – in diesem Fall deviantART: http://backend.deviantart.com/oembed?url=http://fav.me/d468yca.
  3. Die Antwort enthält den Pfad zur Grafik:
    "url":"http://fc02.deviantart.net/fs70/i/2011/223/0/4/cloudsdale_by_karzahnii-d468yca.png"
Read more

HTML5. Do like.

Es gibt mehr semantisch-wohlklingende Elemente, wodurch sich Quelltext besser lesen lässt. Damit gewinnt man mehr Übersicht und findet sich besser zurecht. Weniger <div>s, hooray! Von woorkup.com gibt es ein Cheat Sheet für HTML5; wobei das vorige mir besser gefällt.


So sind derzeit meine Blogeinträge aufgebaut:

<article class="post" id="post-504">
	<header>
		<h2><a href="…">HTML5. Do like.</a></h2>
		<span>? <a href="…">Informatik</a></span>
	</header>

	<div class="content">
		<p>Es gibt mehr semant… [Endlosrekursion voraus!]</p>
	</div>

	<footer>
		<a class="comments" href="…">0 Kommentare</a>
		<time datetime="2010-02-11">11. Februar 2010</time>
		<span class="author"> … </span>
		<span class="tags"> … </span>
	</footer>
</article>
Read more