Gestern startete die beyond tellerrand – eine Konferenz für Web-Begeisterte mitten in Düsseldorf. Ich nahm an Seb Lee-Delisle’s Workshop »Creative JS and HTML5« teil. Und um das hier vorweg zu nehmen: allein dafür hat sich der Besuch schon gelohnt.

Seb ist nicht nur ein sehr kreativer Coder, er hat auch das Talent seine Begeisterung mit anderen zu teilen. In kürzester Zeit ließen wir mit dem Canvas Objekt animierte Partikelsysteme entstehen und generierte Bäume wachsen. Beides Dinge, von denen ich bisher dachte, man müsste entweder ein kleines Mathe-Genie oder ein extrem begabter Programmierer sein – am besten beides. Da ich weder das eine noch das andere bin, spricht das wohl für Seb.

Eine Sammlung von schicken Beispielen liefert die Sammlung CreativeJS (u.a. von Seb kuratiert).

Ich bin nun umso gespannter auf die nächsten beiden Tage. Die hochkarätige Liste der Redner lässt allerdings nicht viel Raum für Enttäuschungen, da bin ich mir sicher.

Vom allerersten schalter-bedienbaren Gerät, über virtuelle Schalter, bis hin zu aktuellen Touchscreens ala. iPad werden einige interessante Aspekte beleuchtet.

Dank diesem sehr übersichtlichen Nachschlagewerk kann man nun auf einen Blick erkennen, welcher Browser welche HTML5 Formularelemente unterstützt und welcher nicht.

Sehr nützlich. Und leider auch sehr ernüchternd, schaut man sich den aktuellen Stand für HTML5 Elemente im Internet Explorer 9 an.

Neben der Kompatibilitätstabelle gibt es zu jedem Punkt noch nähere Informationen sowie Beispielseiten, auf denen man die neuen Formularelemente in Aktion sehen kann.

The Current State of HTML5 Forms (wufoo.com)

Problem:

Nachdem ich die Daten per CSV Import/Export in den neuen Shop eingespielt hatte, sah alles sehr zufriedenstellend aus: die Produkte tauchten auf der Shopseite inkl. Bilder auf. Änderte man allerdings die Kategorie eines dieser Produkte, verschwand die Produktabbildung! Ein kurzer Blick in den Produktkatalog im Backend zeigte: die »Bilder«-Reiter sämtlicher importierten Produkte enthielten keine Daten mehr. Allem Anschein nach wurde beim Kategoriewechsel dann auch noch die letzte Referenz zur ursprünglich zugewiesenen Bilddatei gelöscht.

Lösung:

Sicherheitskopie der Datenbank machen – sicher ist sicher!

Nach einem CSV Produktimport muss folgendes SQL-Skript auf der Magento-Datenbank ausgeführt werden (bspw. per phpMyAdmin):

INSERT INTO catalog_product_entity_media_gallery (attribute_id, entity_id, `value`)
SELECT ga.attribute_id, v.entity_id, v.value
FROM catalog_product_entity_varchar v
INNER JOIN eav_entity_type et ON et.entity_type_code='catalog_product'
INNER JOIN eav_attribute va ON va.entity_type_id=et.entity_type_id AND va.frontend_input='media_image' AND va.attribute_id=v.attribute_id
INNER JOIN eav_attribute ga ON va.entity_type_id=et.entity_type_id AND ga.attribute_code='media_gallery'
LEFT JOIN catalog_product_entity_media_gallery g ON g.entity_id=v.entity_id AND g.value=v.value
WHERE v.value<>'no_selection' AND v.value<>'' AND g.value IS NULL;

Dadurch werden die korrekten Einträge im »Bilder«-Reiter für die betroffenen Produkte wieder hergestellt.

Vielen Dank an Unirgy, der diese Lösung im offiziellen Magento-Wiki bereitgestellt hat.

• HTML & CSS
  Darf es eine leere Seite sein oder Beispielinhalt?
• JavaScript
  Kein JavaScript  oder eine Geschmacksrichtung von jQuery?
• Browserkompatibilität
  Modernizr oder HTML5Shiv?
• Serverkonfiguration
  Verschiedene Basiskonfigurationen für den Apache, ASP.Net, etc.

Nach dem man seine Wahl getroffen hat, kann man die entsprechende Vorlage als Archiv herunterladen und sein eigenes Projekt darauf aufbauen – mit dem guten Gewissen, auf einem soliden Fundament aufzusetzen.

Link: Initializr – HTML5 Templates Generator

Darin erzähle ich etwas über das Prinzip hinter Responsive Design und zeige neben einer kurzen Live-Demo noch einige Beispiele aus freier Wildbahn.

Danke noch Mal an die Teilnehmer für’s Zuhören und die darauf folgenden Diskussionen.

P.S.: So viele tolle Möglichkeiten Responsive Design bieten mag – es ist auch Vorsicht geboten, denn CSS Media Query for Mobile is Fool’s Gold.

Im November letzten Jahres hielt ich einen kurzen Vortrag beim Webdevelopment Fulda Treffen über die Blogging/CMS-Software »Wordpress«. Die dazu gehörige Präsentation vermittelt einen ersten Überblick über die Kernfunktionen von WordPress und beinhaltet auch einige Pluginempfehlungen.

Inhalt:

• Was ist WordPress?
• Warum WordPress?
• Kernfunktionen
• Inhaltstypen
  • Artikel vs. Seiten
  • Kommentare
  • Medien
  • Links
• WordPress Installation
  • Anti-Spam Plugin installieren
  • Suchmaschinenfreundliche URLs
• Nützliche Plugins

WordPress – Einführung und Überblick über die Kernfunktionen (auf SlideShare)

Hier eine kleine Auswahl deutscher Webdesigner die, weit weg von zu Hause, wunderschöne Webseiten bauen.

brizk design

brizk design ist das Portfolio von Kai Brach, der im weit entfernten Australien seine Zelte aufgeschlagen hat. Dort arbeitet er, neben seiner Tätigkeit als Freelancer, an seiner eigenen Reisecommunity globalzoo.de.

Pixelblast

Ins Land der aufgehenden Sonne – nach Tokio um genau zu sein – hat es Kilian Muster verschlagen. Wenn er nicht gerade großartige Artikel über die Besonderheiten japanischer Typographie schreibt, erstellt er für die Kunden seines Unternehmens Pixelblast Webseiten, Illustrationen und Designs.

Jens Meiert

Nicht vom Tellerwäscher zum Millionär, sondern vom Webdekorateur zum Spezialisten für benutzerfreundliches und technisch hochwertiges Webdesign bei Google hat sich Jens Meiert hochgearbeitet. Respekt!

Noch mehr?

Fehlt jemand auf dieser noch recht überschaubaren Liste? Dann bitte ab in die Kommentare damit!

Die Internet Explorer Versionen 6, 7, 8 und die Vorabversion des Internet Explorer 9 parallel benutzen, ohne Installation?

Das erlaubt die Spoon Browser Sandbox. Alles was man dafür tun muss, ist ein kleines Plugin zu installieren. Danach kann man die verschiedenen Browser direkt von der Seite starten. Sehr nützlich, da es unter Windows extrem schwierig ist, verschiedene Versionen des Internet Explorers parallel zu verwenden.

Darüber hinaus bietet Spoon auch noch alle restlichen aktuellen Browser an und sogar Programme und Spiele.

Sehr schicke Werbeplakate im Stil der 60er/70er Jahre für moderne Social Media Webseiten wie Facebook und YouTube. Großartige Idee – großartige Ausführung!

Gefunden bei MC Winkel.