11.01.2011
Abgefischt: Sprites online gestalten
Was sind Sprites (bezogen auf Webdesign)?
Ich habe sie hier und hier schon einmal erwähnt.
In der Wikipedia steht dazu
Im Webdesign wird der Begriff Sprites als Bezeichnung für Grafikdateien verwendet, welche aus mehreren kleinen Einzelgrafiken bestehen. Diese Sprites werden per CSS derart in Webseiten eingebunden, dass vom Webbrowser jeweils die benötigten entsprechend zugeschnittenen Teilgrafiken angezeigt werden. Zweck dieser Technik ist einerseits die Verringerung der Gesamtladezeit einer Webseite durch Reduzierung der Serveranfragen und andererseits das Verhindern von Verzögerungen, die durch Nachladen – beispielsweise bei Hovereffekten – entstehen würden
Besser kann ich es ja nicht erklären.
Das Erstellen von Sprites hat immer etwas mit dem Abmessen einer Grafik und dem Formulieren von CSS-Eigenschaften zu tun. Ein praktisches Onlinetool namens Spritebox greift einem dabei unter die Arme. Gefunden habe ich den Hinweis auf dieses Tool bei hpvorlagen24.de. Und weil dort auch sehr schön erklärt ist, wie man das Tool bedient, spar ich mir das hier.
10.01.2011
JavaScript-Tutorials für Beginner
Kleiner Tutorial-Tipp für Leute, die einen Einstieg in JavaScript finden möchten, aber zu faul zum Lesen sind. Voraussetzung ist allerdings, dass man englisch versteht.
Auf der Webseite learntoprogram.tv gibt es ein sechsteiliges Video-Tutorial für Einsteiger in die Programmiersprache. Ich habe ja selbst nicht viel Ahnung davon und verschaffe mir gern anhand solcher Angebote einen ersten Überblick über ein Thema, hier eben JavaScript. Jedes Video dauert um die 10 Minuten. Folgende Themen werden behandelt:
- Hello World
- Variables
- Branching and Conditionals
- Loops
- Arrays
- The String Object
Wenn es dann tiefer in die Materie gehen soll, stehe ich ja auf Bücher. Es müssen zum Einstieg ja nicht unbedingt die neuesten sein. Günstig gibt es etwas ältere Exemplare z.B. bei Terrashop.
04.01.2011
Flickr-Album als Widget in Flatpress integrieren
Dieser Blog dient ja auch dem sinnfreien persönlichen Spieltrieb. Der führte dazu, dass ich mich fragte, ob man zwischen Bildern, die bei Flickr liegen, und einem Flatpress-Blog eine Verbindung herstellen kann. Und zwar ohne Plugin-Programmierung, denn das kann ich ja nicht. Ein mögliches Ergebnis könnt ihr rechts unten in der Sidebar sehen. So wird es gemacht:
Flickr-Modul erstellen
Bei vorhandenem Flickr-Account kann ich mir ein eigenes Modul erstellen. Dazu rufe ich die entsprechende Seite auf. Hier habe ich die Wahl zwichen einem HTML und einem Flash-Modul.
Sie können Elemente aus Ihrer eigenen Sammlung, einer Ihrer Gruppen oder Uploads von allen Benutzern auswählen. Wenn Sie möchten, können Sie jede dieser Optionen nach einem Tag filtern.
Ich nehme das Flash-Modul.
Inhalte auswählen
Der Screenshot spricht für sich selbst. Meine Wahl: Album.
Farben bestimmen
Wenn ich möchte kann ich die Farbgebung noch beeinflussen oder Rahmen und Hintergrund entfernen, was meine Wahl ist.
Code erhalten
Im letzten Schritt bekomme ich den Code ausgeworfen, den ich nun irgenwie auf meiner Webseite unterbringen muss.
Das HTML-Modul wird analog erstellt. Die möglichen Optionen sind etwas anders, aber der Assistent leitet verständlich durch den Gestaltungsvorgang.
Übernahme in den Blog
Dies geht sehr einfach mit dem Blockparser-Plugin, das zur Standard-Flatpressinstallation gehört.
Statische Seite erstellen
Das Blockparser-Plugin arbeitet mit einer statischen Seite zusammen. Diese muss zuerst im Administrationsbereich erstellt werden. Auf diese Seite wird dann der erhaltene Code eingefügt. Hier ein Beispiel. (Der Code wurde für den Screenshot gekürzt!)
Die Eingabe der HTML-Tags nicht vergessen! Auch wenn in der Blogkonfiguration die Option “Inline-HTML” aktiviert ist!
Blockparser-Widget erstellen
In der Widget-Konfiguration den Bereich Blockparser-Widgets auswählen. Die gerade erstellte Seite muss hier für das Blockparser-Plugin aktiviert werden.
Blockparser-Widget positionieren
In der Widgetverwaltung kann man nun das neue Blockparser-Widget in die Sidebar einfügen.
Auf Änderungen speichern klicken nicht vergessen.
Ausblick
Auf die gleiche Weise kann man natürlich auch anderen Code in die Sidebar bringen. Das Blockparser-Plugin ist schon eine schöne Sache.