senäh

17senäh und so…

Clearfix-Hack Artikelbild

HTML/CSS/JS
29. Feb 2012
Kommentare: 13

Clearfix-Hack für das saubere clearen von float-Elementen

Kategorien: HTML/CSS/JS | 29. Feb 2012 | Kommentare: 13

Ihr kennt doch sicherlich das typische, oft zu beobachtende <div class="clearfix"></div>? Vielleicht habt ihr es sogar massiv selbst in Verwendung?

Wozu clear?

Falls nicht: das ganze ist notwendig, um Elemente mit der CSS-Eigenschaft float funktionsgemäß einzusetzen. Mithilfe von float lassen sich Elemente nebeneinander anordnen (sie “fließen”). Nach dem letzten so positionierten Element muss oft ein clear erfolgen, um das weitere Floaten – und somit ein zerhacktes Layout – zu verhindern.

Faustregel: unnötiges Markup vermeiden

Weiterlesen →

Gamepad Thumb

HTML/CSS/JS
24. Feb 2012
Kommentare: 0

Vorstellung der HTML5 Gamepad API

Kategorien: HTML/CSS/JS | 24. Feb 2012 | Kommentare: 0

HTML5 ist schon eine tolle Sache. Insbesondere für Spieleentwickler sind eine Reihe von interessanten APIs entstanden. Eine davon ist die Gamepad API, welche die Steuerung eines HTML5-Spiels mit Gamepads/Controllern ermöglicht. Gamepads können aber noch für mehr Anwendungen verwendet werden. Gamepads besitzen meist zwei Thumbsticks, welche sich ideal dafür eignen um sich in einem 3D Raum zu bewegen. Dies kann für Simulationen und Visualisierungen nützlich sein. Außerdem sind Gamepads häufig wireless. Wie wäre es beispielsweise die ZDF Mediathek bequem vom Sofa aus zu steuern? Cool oder? (Eine wireless Maus besitze ich nicht…) Wer etwas kreativ ist, wird zahlreiche Verwendungszwecke für ein Gamepad im Browser finden. Ich werde euch im folgenden eine kleine Einführung in das Thema geben und euch an einem kleinem Beispiel zeigen, wie ich mit einer Xbox 360 Controller eine Präsentation steuere :) Weiterlesen →

VMware Fusion Logo

Allgemein
19. Feb 2012
Kommentare: 0

E-Commerce und Usability: lernt von VMware… wie man es nicht macht!

Kategorien: Allgemein | 19. Feb 2012 | Kommentare: 0

Usability ist auch eher ein für Selbstbeweihräucherung benutztes Buzzword als tatsächlich realisiertes Teilgebiet bei der Erstellung von Webseiten. Für Cooperate Websites, die einen Großteil der auftragsgetriebenen Website-Erstellung ausmachen, ist ein Usability-Test zugegebenermaßen auch leicht übertrieben. Doch gerade im Bereich E-Commerce kann die Positionierung eines Buttons, die Größe eines Bildes, ja sogar die Farbe eines Textes über Gewinn oder Verlust entscheiden.

Das merkt man immer dann, wenn von Amazon hin und wieder mal Statistiken durchsickern. Wenn allein 100ms dazu ausreichen, die Verkäufe um 1% zu vermindern, wie wirkt sich dann wohl ein Button aus, der nicht auf Anhieb gefunden wird?

Don’t innovate, imitate!

Vielleicht ist das der Grund, warum Amazon sein Web-Interface seit Jahren mehr oder weniger unberührt lässt. Ist zwar hässlich, funktioniert aber, weil der Kunde das Interface versteht.

Wer sein Produkt über’s Internet verkauft, sollte also doch den ein oder anderen Gedanken der Nutzerfreundlichkeit seiner Webseite widmen. Nach Möglichkeit sollte der Nutzer allein durch den Aufbau der Webseite “gesteuert” werden können, zumindest liegt hier das Ziel. Aufmerksamkeit und Aktivität erzeugen, Elemente so positionieren und gestalten wie der User es erwartet und versteht. Ob und wie gut das dann funktioniert lässt sich dann mit Usability-Tests herausfinden.

Ich bin neulich auf ein absolutes Negativ-Beispiel gestoßen. Anfangs wollte ich lediglich ein bisschen ranten. Ich habe mich jedoch dazu entschieden meine Wut in etwas Kreatives umzumünzen und teile meine Erfahrungen mit euch, in der Hoffnung ein bisschen für das Thema zu sensibilisieren. Weiterlesen →

Code Snippet Thumb

HTML/CSS/JS
15. Feb 2012
Kommentare: 0

Code Snippet: OOP und JavaScript – Klassenstruktur

Kategorien: HTML/CSS/JS | 15. Feb 2012 | Kommentare: 0

Eigentlich komme ich programmiertechnisch ja aus der OOP-Ecke. Hier fühl ich mich wohl, hier kenn‘ ich mich aus. Hoffe ich zumindest ;) Bekanntermaßen(?) ist JavaScript eine objektorientierte, aber klassenlose Sprache. Wie bitte? Vor JavaScript wusste ich nicht, dass man ohne Klassen objektorientiert programmieren kann. Für mich waren Klassen das Fundament von OOP. Umso schwieriger viel mir der Einstieg in JavaScript. Wie konnte ich gewonnene Erfahrungen nur in JavaScript weiter verwenden?

Mittlerweile bin ich um einige Erkenntnisse in JavaScript reicher und weiß das man dank Closures bestimmte OOP-Eigenheiten emulieren kann. Da ich in meinem täglichen Workflow immer wieder auf folgende „klassenartige“ Struktur zurück greife, wollte ich sie hier mit euch teilen. Vielleicht hilft es dem ein oder anderen JavaScript-Einsteiger. Aber immer daran denken: Es ist nur klassenartig und keine echte Klasse! Aber ihr bekommt statische und nicht-statische, sowie private und öffentliche Methoden und Attribute. Weiterlesen →

CSS3 Logo Thumbnail

HTML/CSS/JS
13. Feb 2012
Kommentare: 0

Aus aktuellem Anlass: Nachtrag zum Problem der Vendor-Prefixes

Kategorien: HTML/CSS/JS | 13. Feb 2012 | Kommentare: 0

Jep, eigentlich sind wir eher ein Tutorial-Blog. Eigentlich berichten wir nicht über Neuigkeiten aus der Welt der Webentwicklung sondern zeigen lediglich Anwendungsbeispiele auf. Und eigentlich posten wir auch keine Kommentare oder Meinungen zu gewissen Themen, zumindest nicht derart explizit wie von mir wie am vergangen Mittwoch getan.

Nun hat sich ergeben, dass ausgerechnet in der Woche, in der ich mich entscheide, ausnahmsweise einen solchen Kommentar auf die Allgemeinheit loszulassen, eine recht traurige Diskussion entstanden ist, die besagte Vendor-Prefixes als Grundlage hat.

Mozilla hat ein skurilles, aber begründetes Vorhaben in den Raum geworfen: in zukünftigen Versionen des Firefox will man -webkit-Prefixes unterstützen. Auch andere Nicht-Webkit-Browser sind demgegenüber nicht abgeneigt. Weiterlesen →

CSS3 Logo Thumbnail

HTML/CSS/JS
08. Feb 2012
Kommentare: 4

Kommentar: wozu brauchen wir Vendor-Prefixes und wann werden sie aussterben?

Kategorien: HTML/CSS/JS | 08. Feb 2012 | Kommentare: 4

Die Umsetzung von Website-Designs aus Photoshop in HTML und CSS hat dank CSS3 in Teilbereichen ein viel bequemeres Level erreicht. Für abgerundete Ecken und Schlagschatten ist ein Webentwickler nicht länger auf das Erstellen pixelgenauer Grafiken angewiesen. Ähnlich wie ein Ebeneneffekt in Photoshop angewendet wird, erhält das HTML-Element einfach eine CSS-Eigenschaft und der Browser rendert beispielsweise den gewünschten Schatten.

Schöne, neue Welt. Jedoch bleibt eines zu beachten: solche Eigenschaften sind nicht standardkonform, genauer: sie tauchen in keiner verabschiedeten Spezifikation auf. Die Browser setzen lediglich die aktuellen Spezifikationsentwürfe um.

Gut für uns Webentwickler, da wir nicht bis zur endgültigen Fertigstellung des Standards (geplant für das Jahr 2022) warten brauchen, um mit den neuen, fancy Features von CSS3 rumzuspielen. Der Preis dafür? Das größte Unding seit dem Internet Explorer 6: Vendor-Prefixes. Weiterlesen →

HTML5 Logo Thumbnail 2

HTML/CSS/JS
02. Feb 2012
Kommentare: 2

Clientseitiges Speichern von Daten mit der Indexed Database API

Kategorien: HTML/CSS/JS | 02. Feb 2012 | Kommentare: 2

Letztens habe ich ja über die Web Storage API geschrieben. Einfacher kann man Daten nicht clientseitig speichern! (Meine Meinung ;)) Aber diese Einfachheit geht Hand in Hand mit einigen Beschränkungen. Wer komplexere datenbankartige Speichermöglichkeiten sucht ist bei der Indexed Database API besser aufgehoben – bekommt aber auch ein weit weniger einsteigerfreundliche API. Weiterlesen →