HTML

HTML5 (Hypertext Markup Language) ist eine Auszeichnungssprache, mit der die Inhalte eines Dokuments strukturiert und semantisch ausgezeichnet werden. Typische Elemente sind Überschriften, Textabsätze, Links, Listen, Bilder etc. HTML5 ist eine vom W3C noch nicht fertiggestellte Weiterentwicklung von HTML 4.01 und XHTML. Die Sprache wird dennoch bereits produktiv genutzt; in diesem Zusammenhang ist von einem „offenen Standard“ die Rede. Die verschiedenen Elemente eines HTML-Dokuments werden mit CSS gestaltet.

Responsive Images mit ‹figure› oder ‹picture›-Tag: jQuery Picture

jquery-picture-figure-plugin-responsive

Im Responsive Design ist es zwar möglich identische Inhalte unterschiedlich darzustellen, es ist jedoch nicht ohne weiteres möglich Inhalte auszutauschen. Daher werden auf kleinen Bildschirmen meist viel zu große Bilder geladen die lediglich über CSS auf die Abmessung des Displays skaliert sind.
Im Moment gibt es für dieses Problem keine standardisierte Lösung, nur diverse Scripte die den Bildaustausch übernehmen. jQuery Picture ist ein solches Script. Es lässt sich einfach in die Website integrieren, ist gerade einmal 2KB groß und nutzt entweder das valide <figure>- oder das experimentelle <picture>-Element.

Beitrag zu Ende lesen

Komfortable Form-Validierung ohne Änderungen am HTML-Code: jQuery Walidate

jQuery Walidation Logo / Icon

Um Website-Formulare auf Fehleingaben zu prüfen existieren unzählige Validierungs-Plugins und Tools. Leider sind viele dieser Tools kompliziert zu implementieren und erfordern zudem Anpassungen am HTML-Quellcode des Formulars.
Wenn das Formular allerdings dynamisch generiert wird oder über ein Plugin erstellt wurde, ist es häufig nicht möglich den HTML-Code anzupassen. Hier eilt das jQuery-Plugin „jQuery Walidate“ zur Hilfe und ermöglicht die Validierung bestehender HTML-Formulare ohne Änderungen am Quellcode vornehmen zu müssen. Neben einer einfachen Integration des Plugins in die Website stehen umfangreiche Funktionen wie individuelle Fehlermeldungen etc. zur Verfügung.

Beitrag zu Ende lesen

Turn.js – Page-Flip-Effekt mit jQuery und HTML5 (und ohne Flash)

turn-js

Vor einigen Jahren war der sog. Page-Flip-Effekt sehr populär um mit Hilfe von Flash digitale und realistisch anmutende Bücher zu erstellen. Der Trend flaute in den letzten Jahren zunächst ein wenig ab um dann mit der zunehmenden Verbreitung von Tablets und eBooks wieder an Beliebtheit zu gewinnen.
Und ganz in Sinne moderner Webentwicklung lässt sich der Effekt heute mit jQuery, CSS3 und HTML5 umsetzen.

Beitrag zu Ende lesen

Stylesheets aus HTML-Markup generieren: Bear CSS

bear-css-logo

Die meisten Webdesigner werden beim Coding einer Seite ähnlich vorgehen. Sofern nicht direkt ein Template (z.B. Boilerplate) zum Einsatz kommt, schreibt man zunächst das HTML-Markup. Wenn die HTML-Struktur steht, wird die CSS-Datei angelegt und alles über das Stylesheet gestaltet.
Wenn auch ihr Websites nach diesem Muster umsetzt, kann Bear CSS euren Workflow spürbar beschleunigen.

Beitrag zu Ende lesen

Welche HTML5-Features kann ich heute schon nutzen? HTML5 please!

html5please-logo

HTML5 und CSS3 bieten uns umfangreiche und spannende neue Funktionen, nur leider ist man sich häufig nicht sicher welcher Browser welchen Befehl wie interpretiert. Vor einiger Zeit habe ich euch bereits das Tool Can I Use vorgestellt, mit dem ihr prüfen könnt ob ein Befehl unterstützt wird und ob ihr Vendor-Prefixes benutzen müsst. HTML Please ist ein weiteres Tool dieser Art. Auch hier gebt ihr einen Befehl ein und erhaltet Informationen über die Einsatzmöglichkeiten. Im Gegensatz zu vielen anderen Diensten findet ihr hier jedoch auch sehr detaillierte Informationen über notwendige Fallbacks, Polyfills oder Prefixes.

Beitrag zu Ende lesen

E-Mail-Links (mailto) mit Betreff, Kopie (CC), Blindkopie (BCC) und Nachrichteninhalt

e-mail-optimierung

Eine Kontaktmöglichkeit gehört zu jeder guten Website, doch muss es immer gleich ein komplexes Formular sein? Häufig reicht auch der Link auf eine E-Mail-Adresse. Klickt der Besucher diesen Link an, öffnet sich das Standard-Mailprogramm. Und mit ein paar Zeichen mehr, kann sogar der Betreff oder der Nachrichtentext vordefiniert werden. Selbst mehrere Empfänger sind möglich.

Beitrag zu Ende lesen