Kategorien
Design HTML/CSS Webdesign

CSS3-Transitions für komplexe Animationen kombinieren

Animierte Übergänge sind dank CSS3-Transitions mit wenig Aufwand möglich und werden mittlerweile ganz selbstverständlich eingesetzt. Dabei kannst du verschiedene Eigenschaften gleichzeitig verändern. Es gibt aber auch die Möglichkeit, die zu animierenden Eigenschaften zu unterschiedlichen Zeiten und mit unterschiedlicher Länge abzuspielen.

CSS3-Transitions für komplexe Animationen kombinieren

Transitions mit Delay

Die „transitions“-Eigenschaft kennt vier unterschiedliche Werte. Der erste Wert teilt mit, welche Eigenschaften per Transition animiert werden sollen. Während „all“ einfach alle Eigenschaften animiert – insofern es etwas zu animieren gibt –, kannst du auch einfach eine explizite Eigenschaft angeben.

Der zweite Wert steht für die Animationsdauer in Sekunden an und der dritte Wert für das Easing – zum Beispiel „ease“ „ease-out“ oder „ease-in“. Außerdem existiert als viertes noch die Möglichkeit, einen zeitlichen Versatz zu definieren. Hierüber teilst du also mit, dass die Transition erst nach einer bestimmten Zeit beginnen soll.

div {
  transition: all 2s ease 1s;
  border-radius: 0;
  transform: rotate(45deg);
}

div:hover {
  border-radius: 100%;
  transform: rotate(90deg);
}

Im Beispiel werden die Werte für „border-radius“ und „transform“ per Hover verändert. Die Animation dauert zwei Sekunden, beginnt aber erst mit einer Sekunde Versatz.


Transitions mit gleichzeitig animierten Eigenschaften

Mehrere Transitions kombinieren

Den hier vorgestellten Weg kennen wohl die meisten. Er hat jedoch den Nachteil, dass die Transitions für alle Eigenschaften – im Beispiel also „border-radius“ und „transform“ – gleichzeitig ablaufen. Mit einer leicht veränderten Auszeichnung weist du beiden Eigenschaften jedoch eine individuelle Animationsdauer sowie eine jeweils eigene Verzögerung zu.

div {
  transition: transform 0.5s ease, border-radius 1s ease 0.5s;
  border-radius: 0;
  transform: rotate(45deg);
}

Im zweiten Beispiel werden über „transition“ für jede zu animierende Eigenschaft eigene Werte übergeben und diese per Komma voneinander getrennt. Die Animation der „border-radius“-Eigenschaft startet hierbei also erst eine halbe Sekunde, nachdem die Animation der „transform“-Eigenschaft begonnen hat.

kombinierte-transitions2
Transitions mit unabhängig voneinander animierten Eigenschaften

Auf diese Weise realisierst du durchaus komplexe Hovereffekte, ohne JavaScript bemühen oder HTML-Elemente verschachteln und einzeln mit einem Transition-Effekt ausstatten zu müssen.

Im Übrigen bleibt die Animationsfolge auch bei der rückwärts laufenden Bewegung erhalten. Hierbei wird also zuerst „transform“ animiert und anschließend „border-radius“.

Vorteil gegenüber „@keyframes“ und „animation“

Natürlich ist es auch mit der CSS3-Eigenschaft „animation“ in Kombination mit der „@keyframes“-Regel möglich, solche komplexen Animationen zu definieren. Transitions haben jedoch den Vorteil, dass sich beim Wechsel der Klasse oder Pseudoklasse der animierte Übergang automatisch anpasst.

Verlässt du also vor Vollendung der Übergangsanimation den Hover-Status, wird die Animation automatisch wieder zum ursprünglichen Aussehen zurück animiert. Bei „animation“ und „@keyframes“ hast du dieses Verhalten nicht.

Allerdings haben die hier vorgestellten Transitions auch ihre Grenzen – zum Beispiel dann, wenn man unabhängig voneinander verschiedene „transform“-Effekte animieren will – also „scale()“ und „rotate()“ zum Beispiel. Beides definierst du schließlich über dieselbe Eigenschaft. Will man hier ebenfalls unabhängige Animationen haben, muss man doch „@keyframes“ und „animation“ einsetzen.

Beispiel auf Codepen

(dpe)

Kategorien
HTML/CSS Webdesign

HTML5: Automatische Großschreibung mit „autocapitalize“

Formulareingaben auf Smartphones und Tablets sind nicht immer eine angenehme Angelegenheit. Mittels Eingabehilfen werden einem Wörter vorgeschlagen. Auch die Groß- und Kleinschreibung kann beeinflusst beziehungsweise vorgegeben werden. Mit dem HTML-Attribut autocapitalize ist es möglich, für Formularfelder zu definieren, wann Wörter mit einem Großbuchstaben begonnen und wann sie komplett in Großbuchstaben dargestellt werden sollen.

HTML5: Automatische Großschreibung mit „autocapitalize“

Zeichen, Wörter oder Sätze mit Großbuchstaben beginnen lassen

Das Attribut autocapitalize kennt drei verschiedene Formen der Großschreibung. Der Wert „characters“ sorgt dafür, dass jeder eingegebene Buchstabe groß geschrieben wird. Mit „words“ sorgt man dafür, dass jedes Wort mit einem Großbuchstaben beginnt und nach Vergabe von „sentences“ werden Sätze mit einem großen Buchstaben begonnen.

Das Attribut funktioniert bei allen „<input>“- und „<textarea>“-Elementen, die eine Zeicheneingabe erwarten. „<input>“-Elemente, die beispielsweise nur Zahlen oder Zeitangaben erwarten, ignorieren das autocapitalize“-Attribut logischerweise.

<input type="text" autocapitalize="word" />

Ohne Angabe des Attributes wird bei allen „<input>“-Elementen des Typs „text“ und „search“ sowie bei allen „<textarea>“-Elementen standardmäßig der Satzanfang groß geschrieben.

<input type="text" />
<input type="search" />
<textarea></textarea>

Bei allen anderen „<input>“-Elemente findet keine automatische Großschreibung statt. Man kann die automatische Großschreibung mit dem Wert „off“ explizit ausschalten. Dann findet keine automatische Korrektur bei der Eingabe von Buchstaben statt.

<input type="text" autocapitalize="off />

autocapitalize richtig eingesetzt

Der Einsatz des autocapitalize-Attributes will gut überlegt sein. Schließlich verändert man mit dem Attribut das übliche Browserverhalten bei der Formulareingabe. So sollte der Wert „words“ für das Attribut nur dann gewählt werden, wenn ausschließlich Substantive erwartet werden. Das ist bei der Eingabe von Namen der Fall – zum Beispiel bei Feldern, welche die Eingabe eines Personen- oder Firmennamens erwarten.

Der Wert „characters“ dürfte wohl eher selten zum Einsatz kommen. Er sollte nur dann verwendet werden, wenn eine Eingabe ausschließlich Großbuchstaben erwartet. Das ist beispielsweise bei der Eingabe von Kfz-Kennzeichen der Fall. Die Darstellung anderer Zeichen, wie beispielsweise Zahlen, bleiben vom autocapitalize-Attribut ohnehin unberührt.

Für die Eingabe von längeren Texten sollte man letztendlich den Wert „sentences“ verwenden. Großschreibungen innerhalb eines Satzes müssen manuell vom Nutzer vorgenommen werden.

Browser- und Geräteunterstützung

Das autocapitalize-Attribut wurde einst unter iOS 5 eingeführt und ist seit der Version 43 auch in Googles Chrome verfügbar. Es wird ausschließlich auf Mobilgeräten interpretiert. Browser auf Desktopgeräten ignorieren das Attribut gänzlich. Es findet dort also keine automatische Großschreibung statt.

(dpe)

Kategorien
Design HTML/CSS Responsive Design Webdesign

Benutzerfreundlichkeit für moderne, responsive Website-Layouts

Modernes Webdesign verzichtet auf die Methoden, mit denen wir gestern eine Website erstellt haben. Wer braucht noch XHTML und CSS2, wenn uns schon lange moderne HTML5- und CSS3-Techniken zur Verfügung stehen? Natürlich es kann es für den einen oder anderen Altgedienten schwierig sein, sich von tief verwurzelten Techniken zu trennen und einem neuen Workflow begeistert entgegenzusehen. Dennoch werden auch gestalterisch Starrsinnige auf Dauer nicht an der Erkenntnis vorbei kommen, dass modernes und zugängliches Webdesign mehr Liebe zum Detail erfordert, wenn Benutzerfreundlichkeit über alle Geräte die Maxime ist.

Benutzerfreundlichkeit für moderne, responsive Website-Layouts

Die folgenden Design-Tipps sind  gedacht für jene, die sich mit dem Konzept der Zugänglichkeit im (responsiven) Webdesign beschäftigen möchten. Dabei werde ich nicht mehr von einem responsiven Webdesign sprechen, denn ich halte diesen Begriff für veraltet. Responsives Webdesign sollte heute bereits als Normalität angesehen werden. Daher spreche ich im folgenden nur noch von Webdesign oder von Webentwicklung und meine dabei stets responsive Ansätze. Heute sollte jede Website in einer ansprechenden Art und Weise in Handarbeit gestaltet werden, um ein möglichst großes Publikum erreichen zu können.

Vernünftig zu lesende Schriftarten verwenden

Text auf einer Website ist das wichtigste Element, denn jede Website transportiert eine Botschaft zu den Lesern. Wenn jedoch Besucher mit weniger guten Augen die Website besuchen und den Inhalt nicht erfassen können, ist das schlecht. Die einzige Botschaft, die dann transportiert wird, ist: »wir müssen leider draußen bleiben«. Daher ist es wichtig, der Schriftart, der Schriftgröße, dem Kontrast und der Zeilenhöhe ebenso Aufmerksamkeit zu widmen, wie dem Freiraum zwischen den Absätzen. All diese Dinge spielen eine wichtige Rolle bei der Lesbarkeit von Texten.

Schriftarten auf  Websites sollten sich in der Größe der Bildschirmauflösung anpassen können. Dies kann man schnell mit einer entsprechenden CSS-Notierung der Schriftgrößen in REM erreichen. Hier solltest du einige Tests machen, denn zu kleine Schriften auf einer Smartphone- oder Tablet-Ansicht zerstören schnell die Wirkung des Designs.

Perfekt gewählte Schriftgrößen im Responsive Webdesign

Als Beispiel nehmen wir uns hier die Website der Todoist-App. Die Seite verwendet verschiedene Schriftarten und Größen in Verbindung mit einem „Hero“-Hintergrundbild. Auf kleineren Geräten wird das Hintergrundbild anders gesetz. Die Smartphone-Ansicht unterscheidet sich allerdings signifikant. Was gut zu sehen ist, ist, dass sich die Schriftgrößen wunderbar anpassen.

Ein weiteres wirklich gutes Beispiel ist die Website von MightyText. Auch hier kann man beobachten, wie sich die Schriftgröße und die Zeilenhöhen einer kleineren Bildschirmauflösung  anpassen. Das nenne ich gelungenes (responsives) Webdesign.

MightyText

Gelungene Interaktionen

Der überwiegende Teil moderner Mibilnutzer hat kein Problem im Umgang mit einem modernen Smartphone oder Tablet. Touch, Swipe, Tippen und Halten und die anderen Techniken sind vielen Menschen bereits in Fleisch und Blut übergegangen. All diese Techniken sind Teil einer gelungenen, mobilen Benutzeroberfläche. Damit diese Techniken auf einem Smartphone gut funktionieren, bedarf es jedoch einiger Anpassungen. Einfach nur die Bilder und die Textgrößen anpassen, reicht nicht.

Browser-Kompatibilität prüfen

Die Browser-Kompatibilität ist heute nicht mehr die katastrophale Bedrohung von einst. Allerdings sollte trotzdem ein Test der Website mit allen mobilen Browsern erfolgen. Das Ziel ist hierbei, eine nahtlose Schnittstelle auf so vielen Geräten und Browsern wie nur möglich zu gestalten.

Optimal zu bedienende Navigation gestalten

Die Navigation ist eines der wichtigsten Elemente im Webdesign. Hier muss zuerst eine Form eines Navigations-Menüs gefunden werden, das gerade auf kleineren Bildschirmen mit Touch-Bedienung gut funktioniert. Auch hier kann Todoist wieder als Beispiel dienen. Die Seite verwendet ein modernes, verstecktes Menü. Erst bei Bedarf klappt der User das Menü auf und kann es ohne Probleme auch mit weniger filigran konstruierten Fingern auf einem Smartphone-Bildschirm nutzen. Eine Navigation dieser Art bietet eine hervorragende Benutzerfreundlichkeit.

Das vorbildliche Navigations-Menü von Todoist

Benutzerfreundlichkeit: Trenne dich vom Unwesentlichen

Responsive Benutzerfreundlichkeit heißt im Klartext Geschwindigkeit, Effizienz und Klarheit. Bei einer Website, die für große Bildschirme erstellt wurde, hat man ausreichend Raum für Elemente. Du kannst zwei Sidebars verwenden, etliche Werbebanner, viele Widgets und so weiter. Kurzum: Wenn man möchte, kann man das Layout vollstopfen. Abgesehen davon, dass dies auch bei einer für normale Bildschirme designten Website keine gute Idee ist, wird dieses Vorhaben bei einer für mobile Anwendung vorgesehenen Website total scheitern.

Ein responsives Design stellt auf einem Smartphone-Bildschirm alle Elemente untereinander dar. Um eine Website auf die Anwendung mit mobilen Geräten zu optimieren, heißt es, sich vom Unwesentlichen zu trennen. Nicht benötigte Inhalte sollten also entfernt werden.

Diese Elemente sind auf kleinen Auflösungen verzichtbar

Noch mal: für eine wirklich gut auf mobile Ansichten optimierte Website brauchen wir Geschwindigkeit, Effizienz und Klarheit. Alles nicht wirklich benötigte muss also weg. Zuerst einmal könnte das die Sidebar sein. Sie enthält zumeist nichts Wichtiges für Smartphone-User. Auch der Footer sollte entmüllt werden. Ist er überhaupt nötig? Oder ist nur die Anzeige der beiden wichtigen Links »Kontakt und Impressum« wirklich nötig? Ich tendiere immer zu letzterem.

Social-Sharing-Links können am unteren Ende des Bildschirms responsiv angebracht werden. Extragroße Banner gehören definitiv verkleinert und Werbung sollte nur sehr sparsam eingebunden werden. Vielleicht kann sogar nur ein sehr schnell ladender Werbeblock oberhalb des Logos Verwendung finden.

Auf kleinen Bildschirmen alles unwesentliche weglassen

Auf der Beispielseite ist nur ein einzelnes Werbeelement eingebunden, welches zudem noch auf Geschwindigkeit optimiert wurde. Es besteht lediglich aus einer verlinkten Grafik. Geschwindigkeit ist sehr wichtig auf den mobilen Ansichten, denn nicht jeder Smartphone-User hat das Hochgeschwindigkeitsnetz LTE zur Verfügung. Lädt die Website zu lang, wird der Vorgang abgebrochen und deine vielleicht sehr interessante Website nicht besucht.

Die Flexibilität der Inhaltsbereiche

Bei der Gestaltung eines ansprechenden Layouts solltest du stets deinem Instinkt vertrauen. Das beinhaltet auch das Nachdenken über die einzelnen Inhaltsbereiche. Wie werden sie sich bei einer bestimmten Auflösung verhalten? Versuche stets, die Website aus den Augen eines Besuchers zu sehen. Hierbei sind die Inhaltsbereiche sehr wichtig, denn sie müssen sich flexibel den einzelnen Auflösungen anpassen. Dabei funktionieren große Full-Size-Layouts nur selten ohne erhebliche Anpassungen auf kleineren Bildschirmen.

Hier bist du als Designer besonders gefragt, denn bereits in der Planungsphase einer Website sollten die mobilen Ansichten berücksichtigt werden.

Ein Beispiel sehr guter Flexibilität

Die Website von Storify bietet ein hervorragendes Beispiel für die Flexibilität der einzelnen Inhaltsbereiche. Wenn du diese Website scrollst, wirst Du viele Blockelemente bemerken, die abwechselnd links oder rechts aneinander liegen. Doch sobald die Website mit mobilen Geräten angesehen wird, ändern sich diese Bereiche und gliedern sich untereinander an. Die unwesentlichen Elemente werden ausgeblendet, nur das Wesentliche bleibt in der Ansicht auf mobilen Endgeräten erhalten.

Die Website auf großen Bildschirmen
Storify in der Ansicht auf großen Bildschirmen
Die Website auf einem Smartphone betrachtet
Storify auf kleinen Bildschirmen

Wenn das Layout schrumpft, braucht es mehr Finesse, um es ansprechend darstellen zu können. Du wirst mit Sicherheit nicht immer die perfekte Lösung finden. Doch es ist deine Aufgabe, einen gut funktionierenden Kompromiss im Sinne der Benutzerfreundlichkeit zu finden.

Benutzerfreundlichkeit und die Mobile First Strategie

Ein wirklich empfehlenswertes Buch zum Webdesign unserer Tage ist »Mobile First« von Luke Wroblewski. Es ist gut zu lesen und beschreibt anschaulich das Konzept hinter dem Mobile-First-Gedanken. Zumeist ist es wesentlich einfacher, mit einem ansprechenden mobilen Design für Smartphones zu beginnen, um sich dann langsam über die Tablets zu den großen Monitoren für Notebooks und PCs hochzuarbeiten.

Diese Art der Herangehensweise zwingt Dich, zuerst über die wichtigsten Schlüsselelemente nachzudenken. Danach bekommst du dann die Freiheit, je nach wachsendem Bildschirm ergänzende Elemente hinzuzufügen. Mobile First heißt, nur die wichtigsten Design-Elemente zu gestalten, und nach und nach daraus die Full-Size-Version zu entwickeln. So arbeitet die Website auf jeder Bildschirmauflösung optimal benutzerfreundlich.

Fazit

Mit der richtigen Herangehensweise ist (responsives) Webdesign bedeutend einfacher. Es ist erstaunlich, welche Ergebnisse man erreichen kann, wenn zuvor genau bedacht wurde, wie die Website auf welcher Auflösung aussehen soll. Webdesign ist keine leichte Aufgabe in der heutigen Zeit. Umso wichtiger ist es, stets am Ball zu bleiben und sich täglich den neuen Herausforderungen zu stellen. Denn statische Websites locken heute keinen Hund mehr hinter dem Ofen hervor. Hierzu braucht es Kreativität, Planung und die Sicht aus der Perspektive eines Besuchers.

Links zum Beitrag:

(dpe)

*= Affiliate Link: Dr. Web erhält eine Provision für Verkäufe über diesen Link. Für den Käufer ist das Produkt dadurch weder billiger noch teurer.

Kategorien
HTML/CSS JavaScript & jQuery

Trüffelschwein: Knwl.JS filtert Daten automatisch

In Texten stecken gern wichtige Informationen wie Zeit- und Ortsangaben, E-Mail-Adressen, Telefonnummern, Links und andere Datenschnipsel. Die JavaScript-Bibliothek Knwl.JS findet solche Informationen automatisch und kann sie aus dem Text filtern und zur weiteren Verarbeitung verfügbar machen. So sind mit etwas Kreativität sehr flexible Lösungen möglich. Dabei ist die Anwendung kein Hexenwerk.

Trüffelschwein: Knwl.JS filtert Daten automatisch

Knwl.JS: Plugins zum Erkennen verschiedener Inhalte

Knwl.js muss zunächst im HTML-Head eingebunden werden. Anschließend lässt sich ein beliebiger Textabschnitt auf bestimmte Inhalte durchsuchen. Dazu wird der Text direkt oder auch als Variable der Methode KnwlInstance.init() zugewiesen. Anschließend muss man sich für ein Plugin entscheiden, welches den Text nach bestimmten inhaltlichen Mustern durchsucht. Eines dieser Plugins ist date, welches nach Datumsangaben sucht.

KnwlInstant.init("Today is December 19th 2015.");
var output = KnwlInstance.get("date");

Im Beispiel wird per KnwlInstance.get() das Plug-in date aufgerufen. Es durchforstet die zuvor übergebene Zeichenkette auf Datumsangaben und gibt alle gefundenen Angaben im JSON-Format zurück.

var output = [
  {
    "year": 2015,
    "month": 8,
    "day": 11,
    "preview": "Today is August 11th 2015.","found": 2
  }
]

Die JSON-Zeichenfolge enthält nun je nach Plugin unterschiedliche Werte. Bei einem Datum wird dieses in Jahr, Monat und Tag aufgeschlüsselt zurückgegeben. Zusätzlich wird bei allen Plugins per preview der Satz übergeben, in dem der jeweilige Wert gefunden wurde. Über found wird dann rückgemeldet, an welcher Stelle im Text (in Wörtern) die entsprechende Angabe gefunden wurde.

knwljs1

Werden mehrere Daten gefunden, gibt Knwl.js diese als einzelne JSON-Objekte wider.

Datums-, Zeit- und Ortsangaben nur in Englisch

Leider erkennt Knwl.js Datums- und Zeitangaben nur dann, wenn sie in englischer Sprache hinterlegt sind. Andere Sprachen werden zumindest derzeit nicht unterstützt. Gleiches gilt für das Plugin place, welches Ländernamen in Texten erkennt.

var output = [
  {
    "place": "Germany",
    "preview": "This is Germany.","found": 2
  }
]

Ähnlich schwierig, wie Datums-, Zeit- und Ortsangaben, sind auch Telefonnummern in anderen Sprachen zu erkennen. Denn auch hierbei wird nur die übliche englische Schreibweise unterstützt.

Links und E-Mail-Adressen in jeder Sprache möglich

Trotz der ausschließlichen Unterstützung der englischen Sprache kann man Kwnl.js durchaus in deutschen Texten verwenden – zumindest dann, wenn man es nutzen möchte, um Links und E-Mail-Adressen herauszulesen.

var output = [
  {
    "link": "http://www.drweb.de/",
    "preview": "Unter http://www.drweb.de/ gibt es täglich Neues.","found": 1
  }
]

Wichtig bei der Erkennung von Links ist, dass bei diesen das jeweilige Protokoll – „http://“, „https://“ oder „ftp://“ – vorangestellt ist. Auch E-Mail-Adressen werden zuverlässig erkannt.

Eigene Plugins entwickeln

Will man das Erkennen deutschsprachiger Zeit- und Ortsangaben unterstützen, muss man selbst Hand anlegen und ein eigenes Plugin für Knwl.js entwickeln. In der Dokumentation der Bibliothek findet man dazu einen eigenen Abschnitt. Jedes Plugin wird in einer eigenen JavaScript-Datei hinterlegt.

Auf diese Weise kann man sich recht einfach eigene Plugins bauen. Natürlich sind nicht nur „Übersetzungen“ ins Deutsche möglich. Man kann auch gänzlich eigene Plugins entwickeln, welche beispielsweise metrische Maße, Währungen oder Farben aus einem Text herausfiltern.

Einige experimentelle Plugins findet man in der Dokumentation zu Knwl.js.

Fazit

Knwl.js bietet vielfältige Möglichkeiten, strukturierte Werte aus Texten herauszufiltern. Aufgrund der Fixierung auf die englische Sprache muss man zwar vieles anpassen, kann aber mit etwas Fantasie auch sehr individuelle Werte herausfinden lassen.

knwljs2
Demo zum Probieren

Neben einer Dokumentation gibt es eine Demo, bei der beliebiger Text eingegeben und per Knwl.js geparst werden kann.

(dpe)

Kategorien
Design HTML/CSS

HTML5-Video: Grundwissen für alle

Hast du schon mal davon geträumt, eine eigene App im Stile von Twitch.tv zu bauen, um so einen Livestream der eigenen Arbeit aufzusetzen? Oder wie wäre es mit einem Programm, dass deine neuesten Videos abspielen kann, so wie YouTube? Vielleicht hast du ja für solche Rich Media-Inhalte bisher Flash, Java oder Silverlight genutzt. Aber, nachdem nun diese Plugins von Chrome ab 42 nicht mehr unterstützt werden, ist es wohl höchste Zeit, sich ernsthaft mit HTML5 zu befassen.

Bevor ich für Microsoft arbeitete, war ich Senior Engineer im Team Produktentwicklung von Comcast, wo ich an Video-Playern für eine Reihe von Plattformen arbeitete: vom Web, über die Xbox One, die Xbox 360 bis hin zu SmartGlass. Es war eine hervorragende Möglichkeit, alles über die aktuellen Videotechnologien zu lernen und ich bin froh, dass ich in meiner jetzigen Rolle dieses Wissen weitergeben kann.

Was du in diesem Moment liest, ist der erste Teil einer Artikelserie darüber, wie man die Azure Media Services nutzen kann, um HTML5-Video zu erstellen und anzuschauen. In diesem Tutorial werde ich erklären, wie man die Cloud Media-Lösung einrichtet und dann beginnen kann, mit Live oder On Demand-Video zu experimentieren.

Kurze Einführung in Videoformate

Videoformate gibt es viele. Hier stelle ich nur einige der heute gebräuchlichen vor. Dafür sollten wir zu allererst verstehen, wie adaptives Streaming funktioniert, schließlich arbeiten viele der vorgestellten Technologien damit.

<iframe width="560" height="315" 
		src="https://www.youtube.com/embed/AeJzoqtuf-o" 
		frameborder="0" allowfullscreen>
</iframe> 

Adaptives Streaming zerlegt eine Videodatei in kleine Teile. Das "adaptive" daran besteht darin, dass Videos in verschiedenen Bitraten und Auflösungen codiert werden können. Dadurch entstehen Stücke von unterschiedlicher Größe. Daraus kann der Player verschiedene Bitraten/Auflösungen auswählen und sich automatisch an kleinere oder größere Teile der Datei anpassen, abhängig von der jeweiligen Qualität der Netzwerkverbindung.

Scott Hanselman hat das mal ganz gut beschrieben (also zumindest das Smooth Streaming).

Man muss es sehen, um es zu verstehen. Aber eigentlich ist es in seiner Einfachheit bestechend clever. Manche flippen aus, wenn sie z.B. eine 200 MB große Videodatei für Smooth Streaming codieren und das entstehende Dateiverzeichnis sagt ihnen so was wie 500 MB. Dann beschweren sie sich wahrscheinlich: Es ist jetzt viel größer! Das übersteigt meine Bandbreite! In Wirklichkeit wird aber viel weniger übertragen, als die Datei auf der Festplatte an Platz einnimmt. Die Idee dahinter ist, dass Smooth Streaming verschiedene “Schritte” von Bitraten erstellt. Die Datei wird in unterschiedlichen Bitraten codiert und auf dem Rechner gespeichert. 

Smooth Streaming DJ Hero

Progressive MP4

Übersicht bei Adobe.com

Dieses Format lädt Videos und legt sie in einen Zwischenspeicher auf dem Rechner des Betrachters. Es dauert einen kurzen Moment, den Anfang des Videos zu „puffern“, bevor die Datei abgespielt werden kann. Wenn das Video erstmal im Zwischenspeicher ist, fällt beim Abspielen in der Regel keine weitere Puffer-Zeit mehr an. Unter Nutzung des Standard HTTP-Protokolls werden progressiv heruntergeladene Dateien meist über ein Content Delivery Network (CDN) bereitgestellt. Der Video-Player stellt also eine direkte HTTP-Verbindung mit den Servern des CDN her (in unserem Beispiel Azure), um den Inhalt abzurufen.

Der riesige Nachteil bei so einem Verfahren, ist die Verschwendung von Bandbreite. Der Player startet die Wiedergabe des Videos, sobald er genug Daten hat – und er lädt immer weitere Daten nach, unabhängig davon, wieviel der User von dem Video tatsächlich anschauen wird. Was passiert, wenn der User nach einer Minute genug hat? Verschwendete Bandbreite.

Außerdem kann während des Downloads die Qualität der Videodatei nicht geändert werden. Die folgenden Formate hingegen sind dazu in der Lage.

HLS

Übersicht bei Streamingmedia.com

HTTP Live Streaming (HLS) kommt von Apple, basiert auf adaptivem Streaming und generiert in der Regel einzelne Stücke von 10 Sekunden Länge. Das Format unterstützt sowohl Live-Video als auch Video-on-Demand.

<iframe width="560" height="315" 
			src="https://www.youtube.com/embed/wVsntdILdxU" 
			frameborder="0" allowfullscreen>
</iframe> 

Smooth Streaming

Überblick bei RBGnetworks.com

Dieses Format wurde im Oktober 2008 als Teil von Silverlight veröffentlicht und ist ein Feature der Internet-Information-Service-(IIS)-Media-Services, einer integrierten HTTP-basierten Plattform zur Auslieferung multimedialer Inhalte.

Smooth Streaming besitzt alle typischen Eigenschaften des adaptiven Streamings. Ausgeliefert wird in kleine Teile zerlegt über HTTP. Meist werden verschiedene Bitraten codiert. Auf diese Weise kann der Player abhängig von der Netzwerkverbindung die beste Bitrate auswählen, um eine optimale Betrachtung zu gewährleisten.

<iframe width="560" height="315" 
			src="https://www.youtube.com/embed/orKUmNoO0z8" 
			frameborder="0" allowfullscreen>
</iframe> 

Niedrige web-basierte Infrastrukturkosten, Kompatibilität zu Firewalls und die dynamische Umschaltung der Bitraten sind nur einige der Vorteile dieses adaptiven Streamings.

MPEG Dash

Überblick bei Streamingmedia.com

Der große Unterschied von DASH ist, dass es ein internationaler Standard, überwacht durch ein Standardisierungskomitee – der Motion Picture Experts Group (MPEG) – , ist. Das steht in deutlichem Gegensatz zu Smooth Streaming (reguliert von Microsoft) oder HLS (reguliert von Apple). Mehrere Unternehmen haben mitgeholfen, die Schaffung und Standardisierung von MPEG DASH durchzusetzen, darunter Microsoft, Apple, Netflix, Qualcomm, Ericsson, Samsung und viele andere.

Wir denken, dass MPEG-DASH alle Features, die wir in den vergangenen Jahren mit Smooth Streaming eingeführt und umgesetzt haben, ersetzen wird.  Nach und nach werden wir DASH-Features genau so unterstützen wie Smooth Streaming und sogar noch coolere Features vorstellen, die nur mit einem Industriestandard wie DASH umsetzbar sind.

HTML5 Video Support

Den Video Tag (<video>) gibt es in HTML5 seit einigen Jahren und alle modernen Browser unterstützen ihn. Die W3C Schools-Seite zeigt deutlich die Verbreitung der Nutzung.

HTML5 video support chart

Und so leicht ist es, ihn zu einer Seite hinzuzufügen:

Genauer gesagt, nutzen ihn sehr viele User jeden Tag: Netflix setzte früher Silverlight als Video Player ein, verwendet aber inzwischen HTML5-Video. YouTube lief vormals auf der Basis von Flash, aber nun wird der Content in HTML5 umgewandelt. Und die Video Player in der Xbox One (YouTube, Xbox Video, Netflix usw.)? Genau, auch sie funktionieren alle mit HTML5.

Es ist sogar inzwischen viel einfacher geworden, HTML5-Video in verschiedenen Browsern zu testen. Das betrifft vor allem unterschiedliche Versionen des Internet Explorer und den neuen Microsoft Edge. Dafür muss man sich nur kostenlose virtuelle Maschinen besorgen oder Remote Testings auf Mac-, iOS-, Android- oder Windows-Geräten durchführen.

netflix video

Noch ein Wort zu Playern

Die Auswahl ist sehr groß. In diesem Tutorial nutze ich den Azure Media Services Player, weil er gerade am Anfang sehr gut geeignet ist, um ein Gefühl dafür zu bekommen wie Media-Streaming funktioniert. Er enthält eine Reihe von Beispielvideos und ein einfaches Aktionsmenü, mit dem man die unterschiedlichen Formate auswählen, sowie die jeweiligen Technologien und Schutzniveaus dahinter verstehen kann.

Der Player unterstützt von Haus aus viele Formate, einschließlich:

  • Smooth Streaming
  • MPEG Dash
  • HLS
  • Progressive MP4

Azure Media Services Player

Das Beste daran: Man muss sich keinen eigenen Player oder eine Webseite bauen, mit denen man die Videoinhalte testen kann. Man ändert einfach die URL des jeweiligen Contents – und los geht´s.

Eine andere Möglichkeit ist das Open Source-Framework video.js . Es ähnelt dem Microsoft Player (siehe unten), bietet aber auch eine ganze Reihe von Style-Optionen an. Dazu gehört z.B. ein hervorragender Skin-Designer. Wer mit fortgeschrittenem CSS nicht so vertraut ist, sollte allerdings die Finger davon lassen.

Einen eigenen Video-Player bauen

Es gibt einige Player-Frameworks, die wir nutzen könnten. Aber um die Sache einfach zu halten, nehmen wir hier den HTML5-Player von Microsoft. Hier ist eine Dokumentation dazu. Außerdem gibt es ein lauffähiges Beispiel.

Das sind einige Vorteile des Players:

Das HTML5-Player-Framework sorgt für ein durchgängiges Videoerlebnis im Browser. Möglich wird das durch die Unterstützung für verschiedene beim Client verfügbare Video-Player-Formate (z.B. HTML5-Video, Silverlight usw.) und der Bereitstellung der gleichen JavaScript-API und der gleichen Steuerungen, unabhängig von der benutzten Technologie. Es arbeitet sich zudem so lange durch eine Liste von Fallback-Video-Player-Technologien, bis eine unterstützte Technologie gefunden ist.

Mehr Informationen dazu findest du in meinem nächsten Artikel.

So geht es weiter: Browser Embed. App Wrap.

In meinem nächsten Artikel (hier in englischer Sprache) erkläre ich, wie man einen eigenen Player innerhalb des Browsers erstellt. Besser noch, wir können diese HTML5-Seite und den Player “zusammenpacken” und mit einem Tool wie Cordova auch Hybrid-Anwendungen für mobile Geräte und Windows erstellen.

Danach werden wir einen Azure Account einrichten und unseren ersten Media-Services-Content erzeugen, den wir auf unserem neu gebauten Player abspielen lassen können. Wer jetzt schon loslegen will, kann sich gleich für einen kostenlosen Test von Azure und bei der Visual Studio Community (kostenlose IDE) anmelden oder mich kontaktieren, um Informationen darüber zu erhalten, wie man einen BizSpark Account mit monatlichem Azure-Guthaben eröffnet.

Mehr über Azure Media Services erfahren

Hier sind einige hervorragende Quellen, um weitergehende Informationen zu Azure zu erhalten:

Außerdem haben wir da noch die Schulungsreihe unseres Teams zu den Themen HTML, CSS und JS:

Dieser Artikel ist Teil der Web-Dev Tech-Series von Microsoft. Wir freuen uns Microsoft Edge (früher Project Spartan genannt) und seine neue Rendering Engine mit euch zu teilen. Kostenlose Virtual Machines oder Remote Testings für Mac, iOS, Android oder Windows gibt es hier: @ dev.modern.IE.

(dpe)

Kategorien
Design Essentials HTML/CSS Icons & Fonts

Simunity Icon Maker: Schicke Piktogramme in Sekundenschnelle selbst erstellt

Auf der Basis der für Bootstrap verwendeten Font Awesome Icons erstellten die Erfinder des Homepagebaukastens Simbla einen Icon Maker, der es dir ermöglicht, in Sekundenschnelle zu individuellen Piktogrammen zu gelangen. Dazu genügen zwei Farbwähler, ein paar Schieberegler und zwei Kollektionen mit Schatten und Rahmen.

Simunity Icon Maker:

Font Awesome als Designbasis

Für ihren kostenlosen Icon-Generator entschieden sich die Macher von Simbla für Font Awesome, weil es unter der sehr liberalen Open Font-Lizenz steht, sehr umfangreich ist und seit jüngstem nicht einmal mehr eine Attributionspflicht besteht. Das sind beste Voraussetzungen für höchsten Nutzwert.

Unter Simunity.net steht der Generator zur unkomplizierten Verwendung bereit. Keine Registrierung oder sonstige Anmeldung wird verlangt. Du wählst einfach das Basis-Piktogramm aus dem Font Awesome-Fundus aus und veränderst es im Handumdrehen. Dabei ist der Funktionsumfang natürlich nicht mit Illustrator zu vergleichen. Die Ergebnisse sind dafür weit schneller greifbar.

Simunity Icon Maker

Simunity Icon Maker: Wenige Schritte zum Erfolg

Der Simunity Icon Maker stellt die Wahl des zu editierenden Icons sinnvollerweise an den Anfang des Prozesses. Dabei wird ein Grid aller in Font Awesome enthaltenen Piktogramme gezeigt. Dieses Grid kann über eine oberhalb erreichbare Liste eingeschränkt werden. So könnte man das Grid direkt auf zum Beispiel Zahlanbieter-Icons reduzieren, um nicht jedes Mal erneut durch alle Symbole scrollen zu müssen.

Simunity Icon Maker

Das ausgewählte Icon wird in einem Vorschaurahmen unterhalb des Grid angezeigt. Links neben dem Vorschaurahmen finden sich die Bearbeitungswerkzeuge. So kannst du etwa die Größe des Icons, sowie die des umgebenden Hintergrunds in Pixeln per Schieberegler oder durch direkte Werteingabe festlegen. Die Farben sowohl des Piktogrammes, wie die des Hintergrunds lassen sich als Hex-Codes separat voneinander definieren. Wer den Code nicht kennt, kann die gewünschte Farbe per Palette auswählen.

iconmakerwerkzeugefarbe

Die stärksten Manipulationen erreichst du allerdings durch die Veränderung des Rahmens und des Schattens. 20 verschiedene Rahmen und acht verschiedene Schattendesigns lassen dich das jeweilige Piktogramm zu deinem eigenen machen. Unter den Schattenstilen finden sich unter anderem die beliebten Long Shadows, die aus dem Flat Design nicht wegzudenken sind. Aber auch Konturweichzeichner und harte Konturen stehen zur Verfügung.

iconmakerschatten

Wenn du mit dem Ergebnis zufrieden bist, kopierst du den unterhalb des Bearbeitungsbereichs angezeigten HTML-Code aus und in dein Webprojekt wieder ein. Der Simunity Icon Maker kann kostenlos sowohl für private, wie auch kommerzielle Projekte, ebenso in Auftragsarbeiten für Kunden verwendet werden. Nicht erlaubt ist es, das Tool als solches zur kostenpflichtigen Nutzung, etwa durch den Einbau in eigene Angebote, bereit zu stellen. Aber, mal im Ernst, darauf muss man erstmal kommen…

Simunity Icon Maker: für die Akzente im Projekt

Etwas umständlich gerät das Ganze, wenn man viele Icons im gleichen Stil erstellen möchte. Das geht nur eins nach dem anderen und die individuellen Änderungen müssen jeweils einzeln erneut vorgenommen werden. Ebenfalls nicht möglich, ist die Veränderung der Piktogramme an sich. Daher bleibt das Tool auf Akzente beschränkt und eignet sich eher nicht für die Entwicklung eines durchgängigen Iconkonzepts für ein komplettes Projekt, wenn man mal vom Prototyping absieht.

Schlussendlich kann ich dir nur empfehlen, dir Simunitys Icon Maker selber mal anzusehen. Hier ist er.

Kategorien
E-Business E-Commerce HTML/CSS Technik Webdesign

Erstelle HTML5-Banner im Handumdrehen mit diesen vier Tools

Dass Bannerwerbung per Flash ausgespielt wird, kommt immer seltener vor. Auch in der Online-Werbung hat sich HTML5 als Standard durchgesetzt. Dabei sind Animationen dank CSS3 und Interaktionen mit JavaScript problemlos möglich. Natürlich lassen sich HTML5-Banner von Hand erstellen. Aber es gibt eine Vielzahl an sowohl kostenlosen als auch kostenpflichtigen Tools, die sich auf das Erstellen von HTML5-basierten Bannern spezialisiert haben.

Erstelle HTML5-Banner im Handumdrehen mit diesen vier Tools

HTML5-Banner: Vorgaben berücksichtigen

Online-Werbung unterlag immer schon speziellen Vorgaben. Schließlich soll ein Banner universell – also in möglichst vielen Werbenetzwerken – einsetzbar sein. Daher müssen Regeln für Auflösung, Dateigröße und zulässige Technik her, damit es keine Probleme gibt. Welche Standards es für HTM5-Banner gibt, hat in Deutschland der Bundesverband Digitale Wirtschaft (BVDW) festgelegt. Sie wiederum basieren auf internationalen Standards.

Je nach Einsatz eines HTML5-Banners musst du entscheiden, welche Standards berücksichtigt werden müssen. Im Zweifel gibt dir der Werbevermarkter oder die Website, auf der die Werbung geschaltet werden soll, Auskunft darüber. Folgende Programme und Webanwendungen helfen dir bei der Gestaltung und technischen Umsetzung von HTML5-Bannern.

HTML5-Banner: Google Web Designer als klassische Desktopanwendung

Mit dem Web Designer hat Google eine Anwendung herausgebracht, mit der du recht unkompliziert Webinhalte unterschiedlicher Art erstellen kannst. Neben klassischen Webseiten gibt es spezielle Vorlagen, um HTML5-Banner zu erstellen. Hierbei hast die die Auswahl zwischen klassischen Bannern, Expandable-Anzeigen und Interstitials. Während Expandable-Anzeigen ihre Größe verändern, werden Interstitials als Layer über den eigentlichen Inhalt der Seite gelegt.

google-web-designer
Google Web Designer

Nachdem du dich für einen der Typen entschieden hast, wählst du eine gängige Auflösung für das Banner aus. Neben vorgegebenen Größen kannst du eine individuelle Breite und Höhe festlegen. Hier solltest du dich aber vergewissern, dass diese Auflösung tatsächlich unterstützt wird.

Da jedes Werbenetzwerk im Detail unterschiedliche Vorgaben hat, kannst du beim Web Designer die Werbeplattform auswählen. Zur Auswahl stehen wenig überraschend Googles eigene Vermarkter Doubleclick, AdWords und AdMob. AdMob ist speziell für Banner in mobilen Apps gedacht. Je nach Vermarkter stehen dir nur die Bannerformate zur Verfügung, die der jeweilige Vermarkter auch unterstützt.

Jetzt kannst du die Anzeige beziehungsweise das Banner gestalten. Die Oberfläche von Google Web Designer erinnert stark an Flash – einschließlich der Zeitleiste für Animationen. Du kannst Texte setzen, Bilder platzieren und Interaktionen festlegen. Das fertige HTML5-Banner wird als ZIP-Datei gepackt und kann direkt beim entsprechenden Vermarkter hochgeladen werden.

Der Google Web Designer nimmt einem viel Arbeit ab, hat aber den Nachteil, dass er Standardbanner nur für Google Werbedienste erstellt. Dafür ist das Tool komplett kostenlos.

HTML5 Maker mit Flash-Fallback

Der HTML5 Maker ist eine Webanwendung, die aber ähnlich einfach zu bedienen ist wie Googles Web Designer. Um den Dienst kennen zu lernen, ist keine Anmeldung nötig. Willst du ein fertiges Banner allerdings herunterladen, musst du ein Konto anlegen oder dich per Facebook oder Google anmelden.

html5maker
HTML5 Maker

Dank fertiger Presets und einer Bibliothek mit Bildmaterial ist ein Banner sehr schnell erstellt – inklusive einfacher Fade-in- und Slide-in-Animationen. Bilder, Texte und andere grafische Elemente kannst du dir ganz einfach in die Zeichenfläche ziehen und bearbeiten.

Aus einer Auswahl einer Vielzahl gängiger Bannerformate wählst du etwa verschiedene Rectangle-, Skyscraper- und Square-Formate. Auf Wunsch kannst du ein Banner responsiv gestalten. Das fertige Banner lädst du anschließend ebenfalls als ZIP-Datei mit allen dazugehörigen Dateien herunter.

Allerdings ist der HTML5 Maker nicht komplett kostenlos. Es gibt insgesamt fünf Tarife, wobei nur der Basistarif kostenfrei ist. In diesem Tarif wird immer ein Wasserzeichen des HTML5 Makers mit ins Banner eingebaut. Außerdem stehen einem keine professionellen Vorlagen zur Verfügung.

Die anderen Tarife kosten zwischen 4,99 und 49,99 US-Dollar im Monat. Der größte Unterschied zwischen den Tarifen ist die Anzahl der Banner, die gehostet werden können.

Der HTML5 Maker hat zwei Besonderheiten. Zum einen gibt es für jedes Banner ein HTML-Dokument mit fester und eines mit responsiver Größe, welches sich in der Breite jeweils anpasst. Als zweites hast du die Möglichkeit, dir jedes Banner als Flash-Fallback herunterzuladen. Dazu wird dir eine SWF-Datei bereitgestellt.

Wie beim Google Web Designer werden vornehmlich Googles Werbedienste unterstützt. Insgesamt ist die Bedienung einfach und das Ergebnis dank Fallback-Lösung sehr ausgereift.

Bannersnack kann zusätzlich auf Facebook werben

Ganz ähnlich wie der HTML5 Maker funktioniert der Dienst Bannersnack. Auch hier ist eine Anmeldung unter anderem per Facebook und Google möglich. Es gibt insgesamt vier Tarife, wobei hier ebenfalls ein kostenloser dabei ist. Mit diesem ist allerdings nur das erste erstellte Banner kostenlos. Um ein zweites Banner anzulegen, ist ein kostenpflichtiger Tarif notwendig. Diese kosten zwischen 16 und 36 US-Dollar im Monat.

bannernsack
Bannersnack

Von der Funktionalität her gibt es ebenfalls viele Ähnlichkeiten zum HTML5 Maker. Es steht eine eigene Bibliothek mit Bildern sowie die Möglichkeit, Texte und vorkonfigurierte Animationen – Fade, Slide, Alpha und Scale – einzusetzen, zur Verfügung. Außerdem kannst du mit einigen verfügbaren Vorlagen direkt loslegen.

Mit Bannersnack legst du zudem komplette Werbekampagnen an. So kannst du Budgets und Zielgruppen für deine Anzeigen festlegen und diese in Googles Werbenetzwerk sowie auf Facebook schalten. Vor allem bei den Funktionen der Kampagnen unterscheiden sich die verschiedenen Tarife des Dienstes.

Zwar beherrscht auch Bannersnack Flash-Banner. Diese lassen sich jedoch nur unabhängig von HTML5-Bannern erstellen. Eine automatische Generierung einer Flash-Fallback-Lösung aus einem HTML5-Banner ist nicht möglich.

Bannerflow mit großem Werbenetzwerk

Der Anbieter Bannerflow startet mit monatlichen Kosten von 79 US-Dollar. Das ist durchaus nicht wenig, dafür aber  unterstützt er eine Vielzahl von Werbenetzwerken. Unter anderem sind Googles Doubleclick und weitere knapp 30 Werbevermarkter dabei.

bannerflow
Bannerflow

Es gibt eine umfangreiche Kampagnenverwaltung einschließlich Analytics sowie die Möglichkeit, Banner in verschiedene Sprachen zu übersetzen. Es werden automatisch Fallbacks hergestellt, um sowohl im Browser als auch in Apps für die Darstellung einer Anzeige sorgen zu können.

Außerdem sind Banner generell responsiv, so dass verschiedene Display- und Browsergrößen berücksichtigt werden.

Der Banner-Builder erlaubt es dir, wie bei den anderen genannten Diensten über eine einfach zu bedienende Benutzeroberfläche HTML5-Banner zu erstellen. Auch hier sind verschiedene Animationen und das Hochladen von Bildern möglich.

Fazit

Sowohl Googles Web Designer als auch die Webdienste haben ihre Stärken. Während der Google Web Designer komplett kostenlos und sehr übersichtlich ist, liegt die Stärke beim HTML5 Maker in der Bereitstellung kompletter responsiver Lösungen inklusive Fallback und bei Bannersnack bei seinem Rundumpaket inklusive Kampagnenverwaltung. Bannerflow besticht durch die Unterstützung zahlreicher Werbenetzwerke.

Was verwendest du zur Erstellung von Werbung im HTML5-Format?

(dpe)

Kategorien
Design E-Business HTML/CSS SEO & Online-Marketing Technik

HTML5: Neue Standards für Online-Werbung

Was zu Beginn der Online-Werbung das animierte GIF war, war später für lange Zeit das Flash-Format. Während Flash in der zeitgemäßen Webentwicklung keine Rolle mehr spielt, hat die Online-Werbung erst spät damit begonnen, sich von Flash als Standard für Bannerwerbung zu verabschieden. Das ist nicht völig unverständlich, denn Flash hat ja gerade für die Werbeschaffenden einige Vorteile. Das Format ist platzsparend, lässt sich in einer einzigen Datei ausgeben und muss nicht groß auf Browserkompatibilität getestet werden. Dort wo Flash läuft, läuft natürlich auch ein Flash-Banner. Aber Flash läuft längst nicht mehr überall. Und für die Werbeindustrie ist das natürlich ein Problem.

HTML5: Neue Standards für Online-Werbung

Nachdem sich Apple und Google entschieden haben, Flash auf Mobilgeräten nicht mehr zu unterstützen, ist klar, dass die Online-Werbung gerade für den mobilen Markt reagieren muss – zumal der Anteil der mobilen Internetnutzung stets zunimmt.

Eigener Standard für HTML5-Werbung

Da gerade der Werbemarkt auf eigene Standards angewiesen ist, um Werbung unkompliziert auf verschiedenen Websites ausspielen zu können, gibt es mittlerweile konkrete Richtlinien, wie HTML5-Werbung technisch auszusehen hat. Der Bundesverband Digitale Wirtschaft (BVDW) hat eine eigene Richtlinie (PDF)  herausgegeben, welche technische Spezifikationen für HTML5-basierte Bannerwerbung für den Online-Werbemarkt in Deutschland festlegt. Diese Richtlinien basieren auf einem internationalen Standard, der vom Interactive Advertising Bureau (IAB) entwickelt wurde.

bvdw_website
Website des DVDW

Da anders als bei Flash HTML5-Banner nicht in einer Datei gebündelt werden können, legt die Richtlinie fest, welche Dateien vorhanden sein müssen. Eine „index.html“ als Ausgangspunkt ist zwingend erforderlich. Neben dieser Ausgangsdatei können CSS- und JavaScript-Dateien sowie Bilder und auch Videos Bestandteil einer HTML5-Werbung sein.

Ausgeliefert wird ein HTML5-Banner als ZIP-Datei, welche alle Dateien enthält. Ausnahmen kann es hier geben, wenn Dateien extern geladen werden – zum Beispiel ein Video, was von einer externen Quelle eingebunden wird.

Dateigrößen: Je kleiner, desto besser

Was beim GIF- und Flash-Format seit jeher gilt, gilt gleichermaßen bei HTML5-Werbung. Für schnelle Ladezeiten müssen Werbeformate geringe Dateigrößen aufweisen. Daher sollten Grafiken im besonderen Maße komprimiert werden. Sowohl für JPEG- als auch PNG-Dateien gibt es zahlreiche Komprimierungswerkzeuge, die das ein oder andere Kilobyte zusätzlich einsparen können. In der Online-Werbung kommt es da auf jedes Kilobyte an.

Beim HTML-, CSS- oder JavaScript-Quelltext solltest du Kommentare und alles andere Verzichtbare weglassen. Durch das Weglassen von Zeilenumbrüchen lässt sich zusätzlich einiges einsparen.

Kein Flash, viele Vorteile

Dass der Verzicht auf Flash kaum Nachteile bei den gestalterischen Möglichkeiten mit sich bringt, zeigt der Blick auf die Fähigkeiten, die CSS3, Webschriften und SVG mit sich bringen. Animationen, eigene Schriften und komplexe grafische Elemente kannst du ebenfalls nutzen wie Videos. Alles, was rund um HTML5 entwickelt wurde, ersetzt Flash mittlerweile komplett.

html5_flash_werbung

Dazu kommt, dass HTML5-Werbung weitere Vorteile hat. Während Flashbanner eine feste physische Breite und Höhe hatten, können HTML5-Banner responsiv entwickelt werden. Sie können sich also der jeweiligen Auflösung eines Monitors beziehungsweise Displays anpassen. Google AdSense nutzt bereits länger die Möglichkeiten der responsiven Werbung für seinen Werbedienst.

Ein Grund, warum große Websites auf responsive Gestaltung verzichten, dürfte die nicht vorhandene Unterstützung bei den Bannerformaten sein, die nach wie vor auf feste Größen setzen. Auch wenn mittlerweile viel in HTML5 realisiert wird, ist Responsivität in der Bannerwerbung noch nicht weit verbreitet.

HTML5 und wenige Nachteile

Der Wechsel zum HTML5-Standard bringt nicht ausschließlich Vorteile. Für die Werbetreibenden gibt es durchaus einige Nachteile. So sind die Entwicklungskosten bei HTML5-Werbung höher. Denn anders als Flash muss HTML5-Werbung in verschiedenen Browsers und Versionen getestet werden. Trotz HTML5- und CSS3-Standard kann man sich nicht darauf verlassen, dass jeder Browser ein HTML5-Banner unbedingt gleich darstellt. Gerade ältere Versionen müssen schließlich berücksichtigt werden.

Wer zudem Browser unterstützen möchte, die mit HTML5 noch gar nichts anfangen können, muss eine Fallback-Lösung bereitstellen. Diese kann im einfachsten Fall ein statisches Bild sein, was anstelle des HTML5-Banners ausgegeben wird.

Fazit

Vermutlich ist den wenigsten Internetnutzern bislang überhaupt schon aufgefallen, dass Werbung mittlerweile zum Großteil im HTML5-Format ausgespielt wird. Das bedeutet immerhin, dass ein Unterschied zum ehemaligen Flash-Standard optisch kaum feststellbar ist. Lediglich Werbetreibende und Webentwickler haben mit dem neuen Standard mehr Möglichkeiten und – zumindest derzeit – auch mehr Aufwand.

(dpe)

Kategorien
Design HTML/CSS Webdesign

CSSgram: Bildeffekte wie auf Instagram mit CSS

CSSgram ist eine sehr kleine CSS-Bibliothek, die dir ermöglicht, 15 Filter, die du schon von Instagram kennst, per CSS auf beliebige Fotos anzuwenden. Wenn du auf diese Art der Bildverfremdung stehst, kannst du bedenkenlos zugreifen. Denn wesentlich einfacher kannst du schicke Fotoeffekte nicht einsetzen.

CSSgram: Bildeffekte wie auf Instagram mit CSS

CSSgram: 1kb großes Kraftpaket für deine Bilder

Una Kravets aus Austin in Texas zeichnet verantwortlich für das kleine Bildereffektkraftpaket. CSSgram ist unter der liberalen MIT-Lizenz, also frei für den privaten und kommerziellen Einsatz, auf Github erhältlich. Die CSS-Bibliothek befindet sich in sehr aktiver Entwicklung, die allerdings aktuell durch einen kleinen Angriff auf das Repository etwas ins Stocken geraten ist. Das betrifft allerdings nur die künftigen Perspektiven. Die CSS-Bibliothek in ihrer derzeitigen Ausgestaltung mit 15 Filtern funktioniert, so wie ist, sehr gut und zuverlässig.

Die Effektfilter kennst du bereits von Instagram. Wenn dir also der Vintagelook der gängigen Instagram-Filter zusagt, dann ist CSSgram die flexible Filtermaschine für deine Website-Bilder. CSSgram setzt CSS Filters und CSS Blend Modes ein. Du kannst dir also schon denken, dass das nicht in allen Browsern funktioniert. Problemlos funktionieren Chrome ab 43, Firefox ab 38, Opera ab 32 und Safari ab 8. Der Internet Explorer bleibt außen vor. Schlimm ist das indes alles nicht, denn das einzige, was passiert, ist ja, dass der Filter nicht auf das Bild angewendet wird.

Auf der Website zum Projekt kannst du dir alle Filter in voller Pracht ansehen und per Hover direkt den Unterschied zwischen Original und Filtereffekt erkennen. Das sind ein paar der verfügbaren Effekte auf ein Beispielbild angewendet:

cssgram-beispiele

CSSgram: So einfach wendest du einen Filter an

Der Einsatz von CSSgram stellt dich selbst dann nicht vor Probleme, wenn du kein ausgewiesener Webdesigner, sondern mehr ein ambitionierter Seitenbetreiber bist. Zunächst musst du die Bibliothek in dein Projekt einbinden. Füge den folgenden Link in die header.php deines Themes ein:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cssgram/0.1.10/cssgram.min.css">

Das war es schon fast. Jetzt wird lediglich noch das entsprechende Bild mit einer Klasse ausgestattet, die den Filtereffekt angibt, etwa so:

<figure class="aden">
        <img src="../img.png">
</figure>

Oder einfacher:

<div class="aden">
        <img src="../img.png">
  </div>

Wenn du dich auf einen Effekt begrenzen willst, kannst du eine noch kleinere CSS-Bibliothek, die lediglich diesen einen Effekt bietet, verwenden, z.B.:

<link rel="stylesheet" href="css/vendor/aden.min.css">

CSSgram gibt es ebenso für diejenigen, die Sass bevorzugen, in einer entsprechenden Geschmacksrichtung. Hier werden die Effekte dann per @extends definiert. Auch für die Sass-Variante stehen einzelne Dateien pro Effekt zur Verfügung.

Im Ergebnis spricht nichts gegen die Verwendung von CSSgram für schicke Bildeffekte. Lass den Photoshop aus und filtere dir ein paar schicke Bilder zurecht. Das geht schnell und ist nicht destruktiv. Viel Spaß!

Kategorien
HTML/CSS Webdesign

Tridiv: Interessanter CSS3-Editor für 3D-Objekte

Die gestalterischen Möglichkeiten von CSS3 sind vielfältig. Neben Animationen lassen sich dank der „transform“-Eigenschaft Elemente auch dreidimensional darstellen. Mit einigen Kniffen können sogar dreidimensionale Objekte ausgezeichnet und im Raum angeordnet werden. Mit etwas JavaScript sind auch 3D-Animationen möglich. Die Webanwendung Tridiv stellt eine grafische Benutzeroberfläche zur Verfügung, mit der solche dreidimensionalen CSS3-Objekte erstellt werden können.

tridiv-teaser_DE

Einfache Formen erstellen und gestalten

Weder HTML5 noch CSS3 sind dafür geeignet, komplexe 3D-Objekte zu erschaffen. Aber zumindest geometrische Grundformen können einfach und recht schnell ausgezeichnet werden. Dazu bedarf es einiger HTML-Elemente und etwas CSS3. Tridiv stellt solche Grundformen zur Verfügung. Möglich sind Quader, Zylinder, Prisma und Pyramide. Je nach Form werden diese aus unterschiedlich vielen „<div>“-Elementen zusammengesetzt. Dabei stellt jedes Element eine Seite der Form dar. Per CSS3 werden die einzelnen Formen dreidimensional zueinander angeordnet.

Dazu schafft man mit „transform-style“ und der Eigenschaft „preserve-3d“ einen Raum, in den die einzelnen Elemente dank der „translate“-Möglichkeiten unterschiedlich platziert werden können.

tridiv_editor
Editor mit vier Ansichten

Tridiv stellt dazu eine Arbeitsfläche zur Verfügung, auf welche die 3D-Grundformen platziert werden. Die Anordnung der einzelnen „<div>“-Elemente eines Form zueinander erledigt Tridiv. Jede Form kann jedoch über verschiedene Regler sowie Eingabe- und Auswahlfelder verändert werden. Größe und Farbe sind ebenso frei zu definieren wie die Opazität.

Bilder als Textur verwenden

Statt die einzelnen Seiten einer Form nur mit einer Farbe zu versehen, kann man sie mit einem Bild als Textur versehen. Dabei gibt man für alle Seiten ein Bild oder für jede Seite ein anderes Bild an.

tridiv_bild
Bild als Textur für Seiten einer 3D-Form

Bilddateien werden dabei nicht hochgeladen, sondern als URL übergeben. Die zu verwendenden Bilder müssen also bereits irgendwo im Web vorhanden sein, um sie einsetzen zu können. Die Bilder werden jeweils über die gesamte Seite skaliert und nötigenfalls verzerrt.

Formen im Raum anordnen

Der Editor besitzt vier verschiedene Ansichten in der Arbeitsfläche. Die erste Ansicht stellt die Formen in der 3D-Ansicht dar. Die anderen drei Ansichten zeigen die Formen zweidimensional auf den drei Raumebenen. So können Elemente einfach auf der Fläche der X- und Z-Achse, der Z- und Y-Achse sowie der X- und Y-Achse verschoben und gedreht werden.

Auch wenn die einzelnen Formen nur sehr einfach gehalten sind, so können sich durchaus komplexe 3D-Objekte aus einer Vielzahl dieser Grundformen zusammensetzen. Beispiele auf der Website zeigen, dass sogar ein X-Wing aus etwas HTML und CSS3 entstehen kann.

In der 3D-Ansicht kann man den Blickwinkel nach Belieben verändern. So lassen sich die Formen von allen Seiten begutachten. Entsprechende Hilfslinien geben Orientierung und verraten, wo sich die einzelnen Achsen befinden.

Vorschau und Einbindung

Per Regler wechselt man zwischen Editor und Vorschau einfach hin und her. In der Vorschau werden die Formen ohne Hilfslinien angezeigt. Um die 3D-Welt in ein anderes Projekt einzubinden, gibt es zwei Möglichkeiten. Zum einen kann man den HTML- und CSS-Quelltext kopieren. Hier hat man dann jedoch keine interaktive Ansicht der 3D-Ansicht. Das heißt, eine Bewegung des 3D-Objektes ist nicht möglich.

tridiv_beispiel
X-Wing aus HTML und CSS3

Allerdings besteht zudem die Möglichkeit, die 3D-Ansicht per Iframe einzubinden. Hierbei hat man den Vorteil, dass man sich per Drag-&-Drop nach Belieben innerhalb der 3D-Ansicht bewegen kann. Außerdem ist es möglich, die Ansicht zu vergrößern oder zu verkleinern.

Keine Anmeldung nötig

Besonders erwähnenswert ist es, dass die Nutzung von Tridiv keine Anmeldung für die Webanwendung erfordert. Selbst das Speichern von Projekten ist möglich. Diese werden nicht etwa über ein Benutzerprofil, sondern im lokalen Browser-Speicher („localStorage“) gespeichert.

Der Nachteil dieser Methode ist natürlich, dass bei Neuinstallation des Browsers die gespeicherten Projekte wieder verloren sind. Da alle Projekte aber zusätzlich serverseitig gespeichert werden, ist jedes Projekt über eine eigene URL erreichbar.

Fazit

Tridiv zeigt sehr schön die technischen Möglichkeiten von 3D-Animationen mittels HTML und CSS3. Sicherlich ist vieles mehr als Spielerei zur verstehen. Aber hier und da lassen sich doch für eigene Webprojekte einfache 3D-Formen erstellen und gestalten. Die Bedienung ist einfach und intuitiv.

(dpe)

Kategorien
Design HTML/CSS UI/UX Webdesign

20 Codeschnipsel für interaktive Buttons

Kannst du dir eine Website ohne Buttons vorstellen? Schwierig, oder? Das ist wenig überraschend, haben sich diese kleinen, zunächst rechteckigen Formen doch als fundamentaler Teil einer jeden UI etabliert. Dabei müssen sie inzwischen weder langweilig aussehen, noch statisch auf den Klick lauern. Mit ein bisschen Interaktion ausgestattet, können Buttons zu wahren Konversionsmaschinen aufgebohrt werden. Selbst, wenn es dir nicht um Verkäufe geht, können interessante Button-Konzepte die Nutzererfahrung deutlich verbessern und den Erfolg deines Call-to-Action steigern.

20 Codeschnipsel fuer interaktive Buttons

Dabei sind elementare Designaspekte, wie Form, Farbe, Typografie, aber auch das Verhalten des Buttons an sich zu beachten. Gerade der letztgenannte Aspekt unterscheidet sich je nach Zielsetzung. So kann es in einem Fall empfehlenswert sein, einen Spinner einzubauen, der dem Nutzer signalisiert, dass es eine kurze Wartezeit geben wird. In einem anderen Fall kann es sinnvoll sein, starke visuelle Effekte einzusetzen, die die Aufmerksmakeit des Betrachters sofort für sich vereinnahmen. Auf jeden Fall wird Interaktion stets den Effekt eines jeden Buttons verstärken. Unsere heutige Sammlung bringt dir zwanzig unterschiedliche Effekte für unterschiedliche Zwecke. Viel Spaß beim – wohl überlegten – Einsatz.

Blobs Button 

blobs button
Erstellt von: Nikolay Talanov

Particle Button Made With Canvas and HTML5

particle button
Erstellt von: Ignacio Correia

Gelatin Over Button Effect with Sass 

gelatin over button effect
Erstellt von:  François Lesenne

3D Paper Button Effects

3d paper button
Erstellt von: Ashley Nolan

CSS Only „Material Design“ Animated Buttons

material design button effect
Erstellt von: Jon Brennecke

3d Button Effect

3d button
Erstellt von: drus unlimited

Close Button Effects

close button ui
Erstellt von: Jonas Badalic

A Bunch of Funky CSS3 Toggle Buttons

funky toggle buttons
Erstellt von: Ashley Nolan

Pure CSS Button Effects

pure css button effects
Erstellt von: Overly Engineered

Hover Effect

elegant hover effect
Erstellt von: Deep

Jelly Button

jelly button
Erstellt von: ayamflow

Button Hover States

button hover effects
Erstellt von: James Power

Gaming Button With Hover Effect

hover over effect
Erstellt von: kaigth

Share Button

share button
Erstellt von: Vincent Durand

Flipside

flipside
Erstellt von: Hakim El Hattab

Particle Button

button with particle animation
Erstellt von: Timo Hausmann

CSS3 Button Examples

ecommerce buttons
Erstellt von: Volusion Services

Inspiration for Button Styles and Effects

series of button effects
Erstellt von: Mary Lou

Creative Button Styles

creative buttons
Erstellt von: Mary Lou

Animated 3D Buttons

creative 3d buttons
Erstellt von: Zachary Minner

(dpe)

Kategorien
Boilerplates & andere Tools Design Essentials HTML/CSS Programmierung Responsive Design Webdesign

15 Webseiten voller kostenloser Bootstrap-Themes

„Wer suchet, der findet.“ In Kenntnis der intelligenten, nahezu allumfassenden Suchmaschine Google ist es ziemlich schwer, dieses Zitat zu bestreiten. Wenn die Zeit allerdings gegen dich spielt, wirst du um effiziente Wege, den Prozess etwas zu verkürzen, kämpfen. In diesem Fall sind Verzeichnisse, Sammlungen und Artikel mit einem schnellen Zugang zu einer Masse von hilfreichen Links und Ressourcen, die dich schnell mit den benötigten Elementen versorgen, sehr willkommen. So baust du dir einen Werkzeugkasten auf, der immer weiter gefüllt werden kann. Der folgende Artikel könnte ein Teil dieses Kastens sein.

websitesfreebootstrap-teaser_DE

Wenn du auf der Suche nach ein paar gutaussehenden, professionell angefertigten Bootstrap-Schablonen bist, die entweder als Startpunkt für eine weitere Umwandlung zu einem CMS-Theme, oder schnell individualisiert und angepasst als eine simple, dennoch funktionelle Webseite benutzt werden können, dann ist unsere Liste sicherlich hilfreich. Heute haben wir 15 Ressourcen mit kostenlosen Bootstrap-Themes zusammengestellt.

BootstrapZero

BootstrapZero
Features: Bootstrap-Themes, Starter-Themes, zugängliche Vorlagen

ThemeForces

themeforces
Features: Bootstrap-Themes, WordPress-Themes

GrayGrids

graygrids
Features: Webseiten-Vorlagen, Verwaltungsthemes

UniqueCrown

unique crown
Features: zugängliche Vorlagen

The Bootstrap Themes

the bootstrap themes
Features: Startseiten, Portfolio-Vorlagen

Graphberry

graphberry
Features: Startseiten, Portfolios

ShapeBootstrap

shape bootstrap
Features: Verwaltungs- und Firmenschablonen, WordPress-Themes, Joomla-Vorlagen

Bootswatch

bootswatch
Features: viele verschiedene lebhafte Themes

Start Bootstrap

start bootstrap
Features: Einseiter, Startseiten, Portfolio-Vorlagen

Design Bootstrap

design bootstrap
Features: Portfolios, Themes, Codeschnipsel

Template Garden

template garden
Features: Vorlagen für Multipage-Websites, Portfolios

WebThemez

webthemez
Features: verschiedene Bootstrap-Vorlagen

W3 Layouts

w3 themes
Features: enorm viele verschiedene Bootstrap-Themes und HTML-Vorlagen

Bootstrap Taste

bootstrap taste
Features: zugängliche Bootstrap-Themes

Black Tie

blacktie
Features: kostenlose und erstklassige Bootstrap-Vorlagen und WordPress-Themes

Wenn ihr noch andere zuverlässige Ressourcen kennt, die Entwicklerkollegen helfen können, teilt sie mit uns im Kommentarbereich.

(dpe)

Kategorien
HTML/CSS JavaScript & jQuery Webdesign

So gehts: Kreismarkierungen mit Traceit.js und jQuery

Bei klassischen Präsentationen auf Whiteboards oder Flipcharts werden wichtige Schlagworte gerne mal eingekreist, um sie hervorzuheben. Mit dem jQuery-Plugin „traceit.js“ lässt sich diese Möglichkeit der Hervorhebung und Markierung auf Webprojekte übertragen. Ohne großen Aufwand werden beliebige HTML-Elemente mit einem Kreis umzingelt, der an von Hand gezeichnete Einkreisungen erinnert. Vor allem bei Tutorials lassen sich mit „traceit.js“ sehr einfach und effektiv Bereiche auszeichnen, auf die man aufmerksam machen möchte.

traceitjs-teaser_DE

 Traceit.js einbinden und einsetzen

Um „traceit.js“ einzusetzen, muss neben jQuery auch die JavaScript-Bibliothek „Raphaël“ eingebunden sein, da das Plug-in für die Kreise die SVG-Zeichenmethoden von „Raphaël“ verwendet. Alternativ steht auch eine kombinierte JavaScript-Datei zur Verfügung, die sowohl das Plug-in als auch die „Raphaël“-Bibliothek beinhaltet.

traceit

Sind die JavaScript-Dateien eingebunden, kann ein beliebiger Inhalt wie folgt eingekreist werden.

<p><span id="schlagwort">Schlagworte</span> sollten immer auffallen.</p>

Im Beispiel soll der Inhalt eines „<span>“-Elementes mit einer Einkreisung versehen werden. Dazu wird eine ID vergeben, die „traceit.js“ übergeben wird, um das Plug-in darauf anzuwenden.

$("#schlagwort").trace();

traceitjs-standard
Standard-Einkreisung

Das Plug-in sorgt dafür, dass der Inhalt entsprechend seiner Größe eingekreist wird. Dabei sind die Einkreisungen nicht auf Textelemente beschränkt. Auch auf Bilder lässt sich „traceit.js“ anwenden. Problematisch wird es lediglich, wenn mehrere Wörter eingekreist werden sollen und diese sich über mehrere Zeilen erstrecken. Ansonsten berechnet das Plug-in sehr zuverlässig die Größe des einzukreisenden Elementes.

Aussehen der Umkreisung anpassen

Standardmäßig werden Elemente mit einer grünen, dünnen Linie versehen. Per „traceOpt“ lässt sich das Aussehen der Linie jedoch individuell anpassen. Neben Linienfarbe und -stärke kann auch eine Füllfarbe angegeben werden.

$("#schlagwort").trace({
  traceOpt {
    "stroke": "red";
    "stroke-width": 5,
    "stroke-opacity": 0.5,
    "fill": "yellow",
    "fill-opacity": 0.25,
    "z-index": -1,
    "stroke-linecap": "round"
  }
});

Im Beispiel wird eine fünf Pixel starke rote Linie gezeichnet. Diese hat eine 50-prozentige Opazität. Gefüllt wird der Kreis mit einer gelben Fläche mit einer 25-prozentigen Opazität. Auch die Position der Linie kann per „z-index“ definiert werden. Für die Darstellung der Linie können alle CSS-Eigenschaften verwendet werden, die das SVG-Format kennt. So kann man zum Beispiel per „stroke-linecap“ die Linien mit abgerundeten Anfangs- und Endpunkten versehen. Das macht die Umkreisung noch etwas realistischer.

traceitjs-individuell
Individuelle Einkreisung

Standardmäßig wird die Linie über das jeweilige Element gelegt. Im Beispiel wird sie dahinter platziert. Von Hand gezeichnete Kreise liegen logischerweise immer über den Inhalten. Hier und da kann es aufgrund der Lesbarkeit – vor allem bei Texten – sinnvoll sein, den Kreis hinter den Inhalt zu zeichnen. Vor allem bleibt der Inhalt dann auch auswählbar.

Da „traceit.js“ handgezeichnete Kreise nachahmt, stimmen Anfangs- und Endpunkt des Kreises beziehungsweise der Ellipse nicht überein. Mit der Option „traceCanvasPadding“ kann man die Differenz zwischen den beiden Punkten angeben. Bei einem Wert von 0 wird quasi eine perfekte Ellipse gezeichnet. Bei Werten darüber wird die Ellipse nicht geschlossen. Per „redrawSpeed“ wird die Geschwindigkeit der Kreiszeichnung angegeben. Für eine realistische Darstellung sollte man „traceCanvasPadding“ und „redrawSpeed“ immer gemeinsam ändern. Denn je schneller man mit der Hand etwas einkreist, desto höher ist meist der Abstand zwischen Anfangs- und Endpunkt des Kreises beziehungsweise der Ellipse.

Umkreisung als SVG-Element gezeichnet

Die Umkreisung selbst wird – wie bereits erwähnt –  als SVG-Element per „Raphaël“ realisiert. Dazu wird ein SVG-Element innerhalb eines „<div>“-Containers platziert. Dieser Container erhält eine ID bestehend aus der ID des zu umkreisenden Elementes – im Beispiel „schlagworte“ – gefolgt von der Zeichenkette „_wrap“. Per „traceDivPref“ kann man auch die Benennung dieses Containers ändern. Das kann sinnvoll sein, wenn die generierten IDs bereits anderweitig vergeben sind.

Die Positionierung der Umkreisung erfolgt per Stylesheets über den „<div>“-Container. Da dieser über die ID erreichbar ist, können Position und Aussehen der Umkreisung auch individuell über CSS noch geändert werden. So ist das SVG-Element standardmäßig so per Inline-CSS ausgezeichnet, dass überstehende Inhalte ausgeblendet werden („overflow: hidden“). Das führt teilweise dazu, dass das Ende der Linie nicht immer dargestellt wird, da es aus der Zeichenfläche ragt. Per Stylesheets lässt sich dies überschreiben.

#schlagwort_wrap svg {
  overflow: visible !important;
}

So erreicht man, dass die gezeichnete Ellipse immer komplett sichtbar ist.

Verhalten für die Umkreisung definieren

Um eine Einkreisung wieder verschwinden zu lassen, genügt ein Klick darauf. Dann wird diese dezent ausgeblendet. Alternativ kann man die Linienzeichnung auch per „trigger()“-Methode ausblenden.

$("#schlagwort").trigger("hide.trace");

„traceit.js“ stellt zudem drei Callbacks zur Verfügung. Diese ermöglichen es, eine Funktion auszuführen, wenn die Animation abgeschlossen ist („onEndTrace“), wenn ein Klick auf die Einkreisung erfolgt („onClick“) oder wenn diese ausgeblendet wurde („onHide“).

$("#schlagwort").trace({
  onEndTrace: function() {
    alert("Umkreisung abgeschlossen.");
  }
});

Im Beispiel wird ein Alert ausgegeben, sobald die Einkreisung gezeichnet wurde.

Fazit

„traceit.js“ ist schnell eingebunden und angewendet. Gerade wenn es darum geht, die Aufmerksamkeit auf ein bestimmtes Element zu lenken, hat man mit dem Plug-in eine einfache Möglichkeit, dies dezent und ansprechend zu tun.

(dpe)

Kategorien
Design HTML/CSS Webdesign

HTML-Formulare verbessern mit „autocomplete“

Um Formulare schneller ausfüllen zu können, bieten Browser die Möglichkeit der Autovervollständigung an. Einmal gemachte Eingaben werden gespeichert und bei erneutem Ausfüllen desselben Formulars oder eines anderen Formulars mit identischem Namen werden bisher gemachte Eingaben zur Vorauswahl angeboten. Das Problem dabei ist, dass abweichende Bezeichnungen für bestimmte Eingaben – zum Beispiel ein Name oder auch eine Kreditkartennummer – dazu führen, dass die Autovervollständigung nicht mehr funktioniert. Das neue Attribut „autocomplete“ vereinheitlicht die Bezeichnungen für eine Reihe vorgegebener Formulareingaben.

html-formulare-teaser_DE

Unterschiedliche Bezeichnungen für Eingabefelder

Wer ein HTML-Formular erstellt, kann die „name“-Attribute, die zur Weiterverarbeitung der Inhalte wichtig sind, frei vergeben. Wird bei einer Kaufabwicklung die Kreditkartennummer abgefragt, gibt es unzählige Varianten, wie das Eingabefelder benannt werden kann: „kreditkarte“, „credit-card“ und „ccard“ sind nur drei Beispiele. Die unterschiedlichen möglichen Bezeichnungen machen es dem Browser unmöglich, immer zu erkennen, wann eine Kreditkartennummer eingegeben werden muss. Daher können Browser immer nur solche Eingaben zur Autovervollständigung anbieten, deren „name“-Attribut identisch ist.

autocomplete_input
Beispiel für eine Autovervollständigung

Um diese Problematik zu beseitigen, gibt es das neue Attribut „autocomplete“. Anders als das „name“-Attribut, welches frei definiert werden kann, gibt es für „autocomplete“ vordefinierte Werte, die immer für eine bestimmte Eingabe stehen. So steht der Wert „cc-number“ für eine Kreditkartennummer.

<input type="text" name="kreditkarte" autocomplete="cc-number" />

Wird das Eingabefeld im Beispiel ausgefüllt, wird der Browser die Eingabe unter der Bezeichnung „cc-number“ für die Autovervollständigung speichern. Der Browser wird die Eingabe bei jedem Eingabefeld vorschlagen, welches dieselbe Bezeichnung für „autocomplete“ besitzt – unabhängig vom Wert des „name“-Attributes.

Feste Werte für Kreditkarten, Namen und Kontaktdaten

Da gerade die Bezahlung per Kreditkarte beim E-Commerce beliebt ist, gibt es für alle wichtigen Angaben für Kreditkartenzahlung entsprechende „autocomplete“-Werte. Neben der Kreditkartennummer („cc-number“) gibt es auch feste Begriffe für den Inhabernamen („cc-name“), die Kartenprüfnummer („cc-csc“), den Kartentyp („cc-type“) sowie das Ablaufdatum („cc-exp-year“ für das Ablaufjahr, „cc-exp-month“ für den Ablaufmonat und „cc-exp“ für das komplette Ablaufdatum).

Für die Angabe eines Namens gibt es ebenfalls mehrere vordefinierte Werte, die den vollständigen Namen („name“), den Vornamen („given-name“), den mittleren beziehungsweise zweiten Vornamen („additional-name“) und den Nachnamen („family-name“) darstellen.

Auch für Adressangaben gibt es unterschiedliche „autocomplete“-Werte. So wird zwischen Adresseingaben unterschieden, die sich auf ein Eingabefeld beschränken („street-address“) und die zwei Eingabefelder vorsehen („address-line1“ und „address-line2“). Der Wert „address-level1“ steht für die Eingabe eines Landes beziehungsweise einer Provinz und „address-level2“ für die Stadt. Die Postleitzahl wird mit „postal-code“ und der Staat per „country“ angegeben.

Außerdem kann bei Adresseingaben zwischen Liefer- und Rechnungsadresse unterschieden werden. Dazu können optional die beiden Schlüsselwörter „shipping“ und „billing“ mit übergeben werden.

<input type="text" name="lieferung_strasse" autocomplete="shipping street-address" />
<input type="text" name="lieferung_plz" autocomplete="shipping postal-code" />
<input type="text" name="lieferung_ort" autocomplete="shipping address-level1" />

Im Beispiel werden Straße, Postleitzahl und Ort für die Lieferadresse abgefragt.

Für die Angabe von E-Mail-Adressen und Telefonnummern gibt es mit „email“ und „tel“ jeweils nur einen Wert. Eine weitere Unterscheidung beispielsweise zwischen geschäftlicher und privater Telefonnummer gibt es nicht.

Browsersupport

Derzeit unterstützt nur Chrome ab Version 43 dieses neue Feature. Allerdings kann es bedenkenlos eingesetzt werden, da ältere Versionen beziehungsweise andere Browser diese Eigenschaft einfach ignorieren.

(dpe)

Kategorien
Boilerplates & andere Tools HTML/CSS Responsive Design

INK: So erstellt ihr responsive E-Mail-Newsletter, die einfach funktionieren

Schon der erste Satz auf der Website des Anbieters Ink verrät uns, was hier das Ziel ist: „Erstellen Sie schnell ansprechende Responsive-HTML-Mails, die auf jedem Gerät und in jeder Software arbeiten. Selbst in Outlook.“ Mit diesem Augenzwinker-Hinweis auf Microsofts Problemkind (in Bezug auf die Darstellung von HTML-E-Mails) soll eines gleich klar werden: mit uns habt ihr diese Probleme nicht. Wir haben uns das Angebot daraufhin einmal angeschaut.

ink-newsletter-teaser_DE

HTML-E-Mails sind leider immer noch eine Welt für sich. Da gibt es eigene Gesetze und Regeln, Techniken und Tricks, und trotzdem gibt es dann immer noch mindestens einen Kandidaten, der die E-Mail nicht korrekt anzeigen mag. Oft ist das ausgerechnet der Client, der beim Kunden zum Einsatz kommt. Die Cross-Browser-Ärgernisse vergangener Jahre erscheinen dagegen wie das kleinere Übel (man stelle sich einmal vor, für 50 verschiedene Internet Explorer optimieren zu müssen). Hinzu kommt die mobile Nutzung mit der Anforderung, die E-Mails auch noch responsive zu gestalten.

ink2

Ink möchte diese Probleme lösen. Dazu bietet es uns (wie Bootstrap, Foundation und andere Frameworks für die Webseiten-Gestaltung) ein Gerüst an, welches mit eigenen Inhalten, Farben und einem Logo individualisiert werden kann. Dank einigen vorhandenen Vorgaben können wir sicher gehen, am Ende eine HTML-E-Mail zu erhalten, die unkompliziert funktioniert. Wenige HTML-Kenntnisse reichen dazu aus.

Wer zuvor die schon vorhandenen E-Mail-Templates im Browser als Vorschau sehen möchte, besucht die entsprechende Templates Built-Seite, wobei die jeweiligen Umsetzungen als Screenshots in zahlreichen Versionen präsentiert werden, getrennt nach Desktop-, mobilen und Web-basierten Anwendungen. Generell sollte der erste eigene Test in Outlook erfolgen. Denn das ist auf jeden Fall der schwierigste Gegner. Nach dem Hinzufügen eigener Styles wird natürlich weiter getestet, wobei der Anbieter dazu eine Empfehlung für den kostenpflichtigen Dienst Litmus ausspricht.

ink3

Ink ist Open Source, bringt eine ausführliche Dokumentation mit und bietet einige durchaus nennenswerte Features. So hat es ein eigenes Gridsystem, CSS-Klassen zur Sichtbarkeit (um gezielt zu bestimmen, in welchen Klienten, welche HTML-Elemente angezeigt werden), sowie Buttons, die reagieren, falls ein E-Mail-Empfänger Bilder standardmäßig deaktiviert hat. Ergänzend ist das Ink-Inliner-Tool gedacht, um hinzugefügte Styles schnell so umzusetzen, dass auch wirklich die größte Anzahl an Klienten bedient werden kann. Eine gute Basis also, um sicher zu einem HTML-Newsletter zu kommen, der wie gewünscht ankommt.

(dpe)

Kategorien
Design HTML/CSS JavaScript & jQuery Webdesign

JavaScript: Ramjet transformiert HTML-Elemente untereinander

Transformationen und Animationen kommen dank CSS3 und HTML5 auf immer mehr Websites zum Einsatz. Die JavaScript-Bibliothek ramjet nutzt die CSS3-Möglichkeiten und ermöglicht es, ein beliebiges HTML-Element in ein anderes transformieren zu lassen.

javascript-ramjet-teaser_DE

Einfacher Effekt mit großer Wirkung

Im Grunde ist der Transformationseffekt, den ramjet verwendet, ein einfacher. Man nehme zwei beliebige HTML-Elemente –Bilder, Texte und SVG-Grafiken können dabei kombiniert werden; auch die Position und Größe der Elemente spielt keine Rolle. Über einen einfachen JavaScript-Aufruf erreicht man, dass das erste Element per Animation in das zweite transformiert wird.

ramjet_beispiel
Beispiel für eine Transformationsanimation, wie man sie von iOS kennt

Dabei wird die Größe und Position des ersten Elementes an das zweite angeglichen. Gleichzeitig wird das erste Element aus- und das zweite, dahinter angeordnete eingeblendet. In einer zügigen Animation erreicht man einen eindrucksvollen Transformationseffekt. Je länger die Animationsdauer ist, desto deutlicher wird die Art und Weise der Tranformation und verliert ein wenig am Wow-Effekt.

Elemente per ID ansprechen und tranformieren

ramjet ist sehr einfach angewendet. Ist die JavaScript-Bibliothek eingebunden, lassen sich die beiden zu transformierenden HTML-Elemente aufgrund ihrer ID ansprechen.

ramjet.transform(elementA, elementB);

Im Beispiel wird ein Element mit der ID „elementA“ in das Element mit der ID „elementB“ transformiert. In dieser einfachen Variante bleiben die beiden Ausgangselemente als solche sichtbar.

Will man erreichen, dass das zweite Element erst durch die Transformation erscheint und das erste Element dadurch ausgeblendet wird, muss man etwas mehr JavaScript in den Effekt investieren.

elementA.style.opacity = 0;

ramjet.transform(elementA, elementB, {
  done: function () {
    elementB.style.opacity = 1;
  }
});

Für das Beispiel muss zunächst das zweite Element („elementB“) versteckt werden. Das erreicht man zum Beispiel, indem man seine Sichtbarkeit (per CSS-Eigenschaft „opacity“) auf Null setzt. Anschließend wird per JavaScript zu Beginn der Transformationsanimation auch das erste Element („elementA“) versteckt. Dann leiten wir per „ramjet.transform()“ die Transformation ein, indem wir die beiden IDs („elementA“ und „elementB“) übergeben. Während der Animation sind die beiden Ursprungselemente somit nicht sichtbar.

ramjet_animation
Ablauf der Animation von Element A zu Element B

Über den Parameter „done“ wird eine Funktion ausgeführt, sobald die Transformationsanimation abgeschlossen ist. Diese sorgt dafür, dass das zweite Element sichtbar wird, sobald die Animation beendet wurde.

Zusätzliche Parameter

Neben dem Parameter „done“ gibt es weitere Möglichkeiten, den Übergang zu bestimmen. Per „duration“ kann beispielsweise die Länge der Animation angegeben werden. Außerdem besteht mit „easing“ die Möglichkeit, eine Easing-Methode für das Beschleunigen und Abbremsen der Animation festzulegen.

ramjet.transform(elementA, elementB, {
  duration: 5000,
  easing: ramjet.easeIn
});

Während „ramjet.linear“ die Standard-Easing-Methode ist, gibt es „ramjet.easeIn“, „ramjet.easeOut“ und „ramjet.easeInOut“ für unterschiedliche Animationseffekte.

Statt die Elemente direkt per „style.opacity“ unsichtbar zu machen, kann man auch die Methoden „ramjet.hide()“ und „ramjet.show()“ verwenden. Diese setzen die „opacity“-Eigenschaft ebenfalls auf 0 beziehungsweise 1.

Browsersupport und Link zum Beitrag

ramjet läuft auf allen modernen Browser wie Chrome und Firefox. Außerdem funktioniert die Bibliothek im Internet Explorer ab Version 9. ramjet wurde unter die MIT-Lizenz gestellt, ist also kostenfrei auch für kommerzielle Projekte einsetzbar.

(dpe)