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.

Inhalte per Ajax (jQuery) nachladen

ajax

Wenn Website-Inhalte nachgeladen oder verändert werden ohne dass die Website dazu vollständig neu geladen werden muss spricht man von Ajax (Asynchronous JavaScript and XML). Meist wird Ajax mit komplexen Funktionen oder Formularabfragen in Verbindung gebracht, es macht es aber auch in eher einfachen Projekten Sinn nicht direkt benötigte Inhalte per Ajax nachzuladen und somit die Performance zu verbessern. In diesem Beitrag archiviere ich ein kleines jQuery-Snippet mit dessen Hilfe HTML-Inhalte per Klick nachgeladen werden können.

Beitrag zu Ende lesen

Die neue Quelle für Webentwickler – WebPlatform.org

webplattform-org-logo

Mit der Website webplatform.org wurde eine neue Anlaufstelle für Webworker geschafften. Angefangen bei den Klassikern HTML5 und CSS3 über thematische Schwerpunkte wie Animationen, Media Queries und Medienformate deckt das Projekt diverse Bereiche der modernen Webentwicklung ab. Die Community steht dabei ganz klar im Mittelpunkt. Die Inhalte werden in Form eines Blogs, diverser Foren, Tutorials und Frage/Antwort-Seiten vermittelt und von der Community ergänzt. Unterstützt wird das Projekt von den ganz Großen der Szene: Adobe, Facebook, Google, HP, Microsoft, Nokia, Mozilla, Opera und das W3C sind mit von der Partie.

Beitrag zu Ende lesen

Höhe von Facebook iframe-Tabs anpassen

facebook-scroller

Aus aktuellem Anlass (und da ich bereits diverse Mails erhalten habe) ein kurzer Hinweis. Um den Scrollbalken in langen Facebook-Tabs zu deaktivieren und die Höhe des Tabs an den Inhalt anzupassen, wird ein kleines JavaScript benötigt. Das bisherige Snippet funktioniert seit einigen Tagen nicht mehr! Ich habe den entsprechenden Beitrag hier im Blog aktualisiert. Ersetzt einfach das alte Snippet mit dem neuen Code und tragt eure App-ID und die Höhe des Inhalts ein.

Scrollbalken in Facebook-iFrame-Tabs deaktivieren →

Syntax Highlighting mit Prism

Prism Syntax Highlighter

Plugins und Scripte zum farbigen Strukturieren von Quellcode gibt es einige. Mit Prism ist ein weiteres Script erschienen, das im Vergleich zu den anderen mir bekannten Methoden einige Vorteile bietet. Ihr müsst beispielsweise keinen für das Plugin angepassten Quellcode verwenden, sondern werdet vielmehr gezwungen semantisch korrektes HTML5-Markup zu schreiben. Das Script lässt sich darüber hinaus kinderleicht anpassen, kommt in drei Designs daher und ist gerade einmal 1.5KB groß.

Beitrag zu Ende lesen

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