ilimitado Web Entwickler Blog

Schön langer sind mir Homepages mit diesen Vorschau Screenshots in Sprechblasen von verlinkten Homepages aufgefallen.
Diese Technik in die eigene Homepage einzubinden ist überraschend leicht. Ein einfacher Account bei Snap Shots™ reicht, um sich ein Stück HTML Quellcode erstellen zu lassen, welchen man einfach im HTML Header der eigenen Homepage einfügen kann. Es handelt sich dabei um ein JavaScript, welches für die Spracheblase mit den Vorschau Screenshots der Homepages welche man verlinkt sorgt.
Mehr ist nicht zu tun, nur dieses Script einzubinden.
Dabei ist die Farbe und Größe der Sprechblase anpassbar.

Vor einigen Tagen bin ich auf ein interessantes und all umfassendes Buch für angehende Webdesigner gestoßen.
Das Buch Webseiten programmieren und gestalten – HTML, CSS, JavaScript, PHP, MySQL, AJAX mit DVD von Mark Lubkowitz schafft eine sehr gute Übersicht und Grundlage für Webdesign. Zunächst wird HTML, die Markup Sprache des Internets besprochen, im Anschluss daran CSS, die Sprache für Layout und Darstellung eines HTML Dokumentes. Danach geht es über zu JavaScript.
Die nächsten Kapitel führen in Server seitige Script Sprachen ein, darunter Perl, PHP sowie die Datenbank Sprache MySQL.
Des weiteren kommen modernste Themen wie XML, Ajax, barrierefreies Webdesign, Weblogs und RSS zur Sprache.
Auf diesen über 1100 Seiten ist unglaublich viel Wissen gepackt und wird gut vermittelt. Es lohnt sich daher sogar für bereits erfahrene Webdesigner einmal hineinzuschauen um das bisher gesammelte Wissen zu perfektionieren.
Das allumfassende Buch bringt sogar eine DVD mit Lernvideos, und 3 weiteren Openbooks, Codebeispielen sowie einer Entwicklungsumgebung für Webdesigner oder Internet Programmierer mit sich.
Der Buchtipp eignet sich also um Webdesign zu lernen, um sein Wissen auf den aktuellen Stand zu bringen und kann auch als gutes (standard) Nachschlagewerk oder auch Referenz dienen. Zudem sind am Ende der Kapitel stets Hinweise auf weiterführende Literatur. Also Ideal zum Webdesign Selbststudium und eine klare lese Empfehlung.

Durch einen Zufall bin ich am Wochenende auf Google Notebooks aufmerksam geworden. Google Notebooks stellt einen Dienst bereit, um kleine Textfeeds, oder auch ganze Seiten einfach wie auf einem Notizblock abzulegen. Das ganze funktioniert am besten mit einem Browser Plugin, welches für Internet Explorer ab Version 5 und Firefox ab Verison 1.0 verfügbar ist. Bei Internetrecherchen für die Uni oder auch für Blogbeiträge ist es oft einfach lästig die relevanten Informationen zusammen zu kopieren. Früher habe ich mir eine Notepad Datei geöffnet und die relevanten Auszüge einfach untereinander kopiert. Dies ist in so fern wirklich nervig gewesen, weil ich dann öfters noch einmal etwas nachschlagen wollte und ich dann die Seite nicht mehr finden konnte, weil ich dummerweise vergessen hatte die URI mit abzuspeichern. Nun markiere ich die relevanten Textstellen einfach im Dokument und schreibe den markierten Text mit rechter Maustaste in meinen Notizblock. Diesen kann ich sowohl über das Browser Plugin auslesen oder auch über meinen Google account. Der Workflow wird wie ich finde wirklich enorm beschleunigt. Relevante Stellen schreibe ich einfach kurz in meinen Notizblock. Weil zusätzlich auch die URI abgespeichert, kann ich bei Bedarf noch einmal zu dem ganzen Artikel springen um das Feed in den Gesamt Zusammenhang einzuordnen. Nun kann ich jederzeit von überall auf der Welt meinen Notizblock abrufen und über das Webinterface sogar ohne Erweiterung befüllen oder auswerten. Voraussetzung um das ganze nutzen zu können ist ein Google Account. Danach kann man google Notebooks ohne Einschränkungen, wie bei fast allen Google Produkten, nutzen. Ich bin wirklich begeistert davon, weil so nicht nur Internetrecherchen enorm vereinfacht und beschleunigt werden, sondern weil es auch optimal im Team eingesetzt werden kann. Wir benutzen das ganze jetzt auch auf unserem Google Firmenaccount. So kann ich nun immer sehen was für Textfeeds die anderen sich notiert haben und diese eventuell in meine Texte/Recherchen mit einbauen.

Soeben bin ich auf die Homepage des Internet Archive Wayback Machine gestoßen. Die Betreiber erstellen sozusagen Backups des Internets. Im Archiv sind alte Versionen von Homepages bis hin ins Jahr 1996 gespeichert. Zwar handelt es sich dabei nur um den HTML Code ohne Bilder und ohne JavaScript, Flash,… aber es kommt hier auch mehr auf den Inhalt an…
Es ist ganz interessant, zu sehen, wie große Portale wie EBay oder Amazon einmal angefangen haben und wie deren Homepages heute aussehen und ob sich da überhaupt groß was geändert hat.
Aber auch interessant ist es zu sehen was denn auf “neuen” Domains vor einigen Jahren vielleicht einmal veröffentlicht war, was hier online war und so weiter.
Ein Kandidat ist zum Beispiel DiGG, heute bekannt als ein Anbieter von Social Bookmarks, war früher eine Präsenz von “Digg Records”…

Beim lesen des W3C Working Drafts zur Integration der Barrierefreiheit in Rich Client Anwendungen bin ich im Anhang auf eine auf eine interessante Firefox Erweiterung gestoßen. Die Erweiterung wurde vom iCITA, dem Illinois Center for Information Technology Accessibility, entwickelt und kann auf der Homepage von iCITA heruntergeladen werden. Die Firefox barrierfrei Erweiterung richtet sich zum einen an Menschen, die auf barrierefreie Homepages angewiesen sind, und gibt Ihnen ein Hilfsmittel zum schnelleren erfassen und navigieren in den Dokumenten. Zum anderen bietet die Erweiterung eine große Anzahl an Entwickler Tools mit denen die eigenen barrierefreien Homepages auf Einhaltung der W3C und WAI Standards überprüft werden können. Eine treffende Beschreibung findet sich auch auf der Homepage des iCITA.

In PHP kann man Daten aus einer XML Datei auf mehrere Wege auslesen.
Der bekannteste Weg führt über die PHP DOM Functions, der DOM Level 2 API von PHP. Hierbei wird das XML Dokument geparst und als Objekt in den Arbeitsspeicher geladen. Möchte man nun auf Elemente und Daten der XML Datei zugreifen, kann mann über XPATH oder der DOM API schnell und einfach an die Daten heran kommen und diese zum Beispiel in PHP Variablen speichern und damit weiterarbeiten.

Wem es nicht bereits aufgefallen ist, ilimitado.de und der ilimitado Entwickler Blog haben nun eigene Favicons.

Favicons (von Favorit und Icon) sind kleine, 16×16 Pixel großes Bildchen. Sie werden in der Adresszeile eines Browsers links von der URL angezeigt, sowie auch in den Lesezeichen (Favoriten).
Das Format ist das Microsoft .ICO Format (MIME-Type image/vnd.microsoft.icon).
Eingebunden in die Homepage werden sie über die HTML – Meta Angabe

<link href="/path/to/favicon.ico" rel="Shortcut Icon" />

innerhalb des HTML – HEAD Bereichs.

Auf der Suche nach freien Symbol Library für den Adobe Illustrator bin ich auf eine interessante Homepage gestoßen. Auf www.brandsoftheworld.com kann man eine umfangreiche Datenbank an Firmenlogos durchsuchen. Im Katalog sind grob geschätzt 150.000 Logos bekannter Firmen im Vektor Format EPS gespeichert.
Man hat auch die Möglichkeit eigene Logos in den Katalog zu laden.

Schon seit dem ersten verfassten Blog Beitrag (Post) mit Code Beispielen, hat der Wordpress Editor uns dabei nur Probleme bereitet. Ein einfaches enkapsulieren in <code> Tags ist kaum möglich, da Wordpress hier ständig <p> Tags einfügt. Meistens sahen die Beiträge (Posts) nacher komisch aus und wahren auch nicht mehr W3C valid.

Ein kleines Wordpress Plugin schafft nun Abhilfe. WP-Syntax, basierend auf GeSHi unterstützt über 80 Sprachen. Damit stehen nun für die wichtigsten Programmiersprachen Syntaxhighlighting zur Verfügung, darunter PHP, HTML4STRICT, XML, CSS, JAVA, MYSQL, JS, uvm.

Adobe Illustrator CS2 stellt 3 verschiedene Arten von 3D Effekten bereit. Extrude & Bevel, Rotate und Revolve. Für dieses Tutorial verwenden wir den Revolve Effekt von Illustartor. Der Effekt funktioniert eigentlich ganz einfach, wenn man einmal verstanden hat wie er funktioniert. Bis jetzt haben wir gerade einmal einen Halbkreis gezeichnet. Grund hierfür ist, dass der Illustrator Revolve Effekt diesen Pfad nimmt und ihn einmal 360° um eine imaginäre vertikale Achse dreht. Um sich das ganze besser vorstellen zu können, vielleicht die folgende Überlegung. Nimmt man ein 10 Cent Stück und schnippt es mit dem Finger an, so sieht es bei genauerem hinschauen, durch die schnelle Drehung um die eigene Achse, auch wie eine Kugel aus. Wir wählen also den Halbkreis mit dem Selection Tool aus und wählen dann Effect->3D->Revolve. Folgendes Fenster erscheint: