Kategorie-Archive: Webworking

Google und die Webfonts

Veröffentlicht am  von

Soeben findet Googles Entwicklerkonferenz I/O statt, auf der technische Neuerungen und Ideen rund ums Web vorgestellt werden. Man kann nun zwar zu Google allgemein hinsichtlich ihrer Datensammelwut in den verschiedensten Bereichen geteilter Meinung sein, abver darum soll es hier nicht gehen. Ebenfalls Fakt ist, dass man bei Google auch immer wieder Novitäten und Kreatives im Bereich Webentwicklung erfindet.

Neueste Beispiele sind die auf der I/O vorgestellten Google Font API und Google Font Directory, die dabei helfen, die Typografie von Webseiten zu verbesser (oder zu verschönern) und es ermöglichen auf Webseiten standardkonform Schriftarten anzuzeigen, die nicht auf dem Rechner des Besuchers vorliegen.

Weiterlesen→

jQuery Snippets

Veröffentlicht am  von

Nachfolgend ein paar sehr hilfreiche jQuery-Snippets, die den täglichen Alltag des Webdevelopers streßfreier gestalten können. Demnächst mehr!


Zebrastreifen für ungeordnete Listen oder Tabellen

Der nachfolgende Code fügt jedem ungeraden Element die Klasse „ungerade“ hinzu:

$("tr:odd").addClass("ungerade");
$("li:odd").addClass("ungerade");


Externe Links automatisch in einem neuen Fenster öffnen

Bisher hat man das gerne über die Vergabe des Zieles „_blank“ gemacht, das ist unter XHMTL Strict aber nicht mehr erlaubt. jQuery bietet eine Lösung, die das Öffnen jedes externen Links in einem neuen Fenster (Tab) erzwingt:

$('a').each(function() {
 var a = new RegExp('/' + [removed].host + '/');
 if(!a.test(this.href)) {
  $(this).click(function(event) {
   event.preventDefault();
   event.stopPropagation();
   window.open(this.href, '_blank');
  });
 }
});

Weiterlesen→

Stylizer – ein fantastischer CSS-Editor

Veröffentlicht am  von

Üblicherweise arbeiten dedizierte CSS-Editoren oder solche in Web-IDEs alle nach einem ähnlichen Prinzip: Man gibt den Code manuell ein und ändert ihn auch so. Auch in sogenannten WYISWYG-Editoren wie Dreamweaver ist die Ansicht in aller Regel neu zu laden, um Änderungen sehen zu können. Weiterhin arbeitet der Webworker aller Wahrscheinlichkeit nach mit der Firefox-Erweiterung Firebug, um sich den CSS-Code auf einer Webseite ansehen zu können.

Stylizer von der kanadischen Firma Skybound verfolgt einen verblüffend anderen Weg als üblich, der im Prinzip den Firebug-CSS-Ansatz in einen mächtigen Editor verfeinert. Statt eine CSS-Datei gezielt zu öffnen, öffnet man eine Webseite, sei es lokal oder über FTP. Die wird dann im Editor angezeigt, an der rechten Seite werden alle Styles des Stylsheet gelistet und können auf verschiedene Weise manipuliert werden, nicht nur über Direkteingabe von Werten, sondern auch mit Schiebereglern beispielsweise für numerische Parameter.

Weiterlesen→

FullCalendar – ein jQuery-Plugin

Veröffentlicht am  von

FullCalendarFullCalendar ist ein jQuery-Plugin, das einen Kalender darstellen kann. Das ist jetzt noch nichts Bahnbrechendes oder Aufsehenerregendes. Tatsächlich steckt aber mehr dahinter, denn FullCalendar kann die Kalenderdaten von fast beliebigen Datenquellen beziehen (bereits dabei ist ein Interface für Google Calendar), kann also für vorhandene Kalenderdatenformate ebenso angepasst werden, wie die Möglichkeit besteht, ein neues, eigenes zu definieren.

Das Aussehen von FullCalendar kann leicht angepasst werden, er holt sich seine Daten via AJAX on-the-fly von der Datenquelle und man kann verschiedene Events wie Klick oder Drag mit eigenen Funktionen belegen.

Sehr feines und nützliches jQuery Plugin!

PHP-Template Engine in einer Zeile

Veröffentlicht am  von

Auf der Suche nach brauchbaren Template-Engines für PHP, die ohne zu großen Overhead auskommen und eine brauchbare Performance bieten können, bin ich über ein sehr smartes Stück Code gestolpert, das mit Sicherheit für viele, insbesondere für kleine Anwendungen mehr als ausreicht. Die Template „Engine“ besteht aus einer Zeile:

print preg_replace("/\{([^\{]{1,100}?)\}/e","$$1",file_get_contents("template.tpl"));

Die Datei template.tpl sieht wie folgt aus:

{header}

{text}

Im PHP-Script setzt man jetzt die Variablen analog zu den Template-Platzhaltern:

$title="Example page";
$header="My Examples";
$text="See the placeholders replaced?";

Ich gebe zu: Man kann sich darüber streiten, ob man einer Template-Engine (und nichts anderes ist PHP ja im Prinzip) noch eine weitere Template-Engine überstülpen muss… Grundsätzlich ist es aber mindestens aus Gründen der Übersichtlichkeit sinnvoll, Logik und Darstellung zu trennen. Da kann der Einzeiler insbesondere bei kleinen Projekten sehr hilfreich sein, ohne dass man gleich den Dinosaurier Smarty oder ähnliche Vertreter nutzen muss.

Links mit Dateityp-Icons via CSS

Veröffentlicht am  von

Es gibt ja verschiedene Möglichkeiten, Links über Javascript kleine Icons hinzuzufügen, die dem Benutzer anzeigen, auf was für einen Dateityp verlinkt wird oder ob es sich um einen internen oder externen Verweis handelt.

Das kann man allerdings auch sehr einfach mit reinem CSS 2.1 realisieren. Wie immer bleibt das Fossil Internet Explorer 6 außen vor, aber das Problem kennt der gestresste Webentwickler ja bereits.

Update: Wie ich inzwischen auf die harte Tour feststellen mußte, beherrscht auch der IE7 kein display:inline-block; Dumm gelaufen.
Weiterlesen→