Archiv des Schlagworts "HTML"
Cheat sheets für Web-Entwickler
Cheat sheet übersetzt man wohl am besten mit “Spickzettel” und im Netz gibt es sie inzwischen in x-facher Form. Denn es ist fast schon zu einem Sport für Web-Entwickler, -Designer und Konzepter geworden, solche Spickzettel für die unterschiedlichsten Bereiche anzulegen. Zudem tun dann auch Blogger und Online-Redakteure das, was sie bei einer solchen Schwemme gerne tun: Sie legen Listen an.
Ich für meinen Teil lege darum heute auch eine Liste an, eine Meta-Liste mit Cheat-Sheet-Listen:
- Design Reviver: 10 Web Design Cheat Sheets You Can’t Live Without
- Dr.Web: Cheat Sheet List – Spickzettel Sammlung
- t3n: Hilfreiche Cheat-Sheets zu HTML5, CSS3 und jQuery
- HTML5Tutorial: 9 hilfreiche HTML5 und CSS3 Cheat Sheets
- WebDesign by mts: 10 Spickzettel oder Cheat Sheets
- Added Bytes: Cheat Sheets
- it republik – PHPmagazin: Etliche Cheat Sheets für PHP, CSS, Drupal u.v.a.
- Elmastudio: 18 hilfreiche Cheat Sheets für Programmierer
- Web Tuts: 25+ aktuelle Cheat Sheets für Webworker
- Smashing BUZZ: Ultimate WordPress Cheat Sheet to Enhance Blog Skills
von Matthias Zellmer
Ein paar aktuelle Lesetipps
Da ich in den vergangenen Tagen ausgiebig einige RSS-Reader getestet habe, habe ich im Zuge dessen auch einige Artikel und Beiträge mehr gelesen als üblich. Darum gibt es hier und heute mal wieder ein paar Lesetipps … los geht’s:
Selbstdarstellung vs. Wissensaustausch: Die zwei Seiten des Teilens im Netz
In diesem Artikel schreibt Martin Weigert von netzwertig.com über die guten und schlechten Seiten des Teilen von Informationen und Wissen im Netz. Dazu animiert hat ihn das Zitat “Climb a mountain, tell no one” … einer Sache, die im Zeiten von Sozial Networking für viele von uns fast schon undenkbar ist.
EU-Studie über Online-Piraterie: diese schadet dem digitalen Musikabsatz nicht
Ronny vom Kraftfuttermischwerk weißt auf eine Studie hin, die … mal wieder … belegt, dass Filesharing den Verkäufen von digitaler Musik nicht weiter schadet und “deshalb nicht überbewertet werden sollte.”
Blog-HTML: Wie sich embeded Tweets zentrieren lassen
Es ist schon länger recht einfach, einzelne Tweets in seinem Blog zu veröffentlichen: Bei Twitter zu einen Tweet gehen und über den Punkt “Mehr” sich den Code zum Einbetten holen. Nun ist es aber so, dass man bei der Darstellung des Tweets wenig anpassen kann. Doch auf karrierebibel.de erklärt Jochen Mai Schritt für Schritt, wie man Tweets zumindest mal zentrieren kann.
Liste der wichtigsten Social Media- und Marketing-Studien 2013
Lars Kroll hat im Blog des SocialMedia Institute eine recht umfangreiche Liste mit Social Media Studien angelegt. Er kam auf 45 deutschsprachige Studien … nur aus diesem Jahr! Reife Leistung, liebe Social Media Masters.
31 CSS-Frontend-Frameworks im Vergleich
Last but not least: Auch auf t3n mögen sie Listen und Tabellen. Diesmal hat dort Moritz Stückler einen Vergleichstabelle mit 31 CSS-Frameworks veröffentlicht. Da ich kein Frontend-Entwickler bin, sagen mir die meisten der dort aufgeführten Frameworks nichts, nur Twitter Boottrap, 960 Grid System, YAML und YUI CSS sind mir bei meiner Arbeit schon mal über den Weg gelaufen. Darum finde ich diese Tabelle auch so interessant. Horizont erweitern und so …
von Matthias Zellmer
Checkliste für Webdesigner
Auf findmebyip.com gibt es eine ganz ansehnlich HTML5/CSS3-Checkliste für Webdesigner. Mit ihr lässt sich recht schnell abchecken, was im Bezug auf HTML5 und CSS3 in den verschiedenen Browsern bei Mac und Windows-Rechnern alles funktioniert und vor allem, was nicht.
Es ist dabei keine große Überraschung, dass vor allem die Internet Explorer (IE 6-8) dabei nicht gerade gut abschneiden. Bleibt zu hoffen, dass der für Ende 2010 erwartete IE 9 da einiges an Boden wieder wettmacht. In der im März veröffentlichen Entwickler-Version des IE 9 soll ja gerade im Bezug auf CSS3 schon einiges möglich sein.
Gefunden habe ich den Link zu der Webdesigner’s Checklist in einem auch interessanten Dr.Web-Magazin-Artikel zum Thema Web-Typografie.
von Matthias Zellmer
HTML5 und Video
Das iPad ist da. Und wie man so hört, ist dieser Tablet-Computer, neben dem Surfen im Web, vor allem zum Konsumieren von eBooks, Musik und Videos ausgelegt. Wobei sich für letzteres in den vergangenen Jahren im Web immer mehr Flash als Standard herauskristallisiert hat. Nun unterstützt das iPad aber kein Flash. Bei Apple scheint man diesbezüglich sehr auf HTML5 zu setzen. Und wenn das iPad sich so etabliert wie zuvor das iPhone, dann sollte HTML5 eine rosige Zukunft bevorstehen.
HTML5 Video ist aber nicht nur für das iPad interessant. Auch für Smartphones wie das iPhone oder mein Nokia 5800 könnte sich da eine Technologie-Lücke schließen.
Die Videoportale Youtube und Vimeo wie auch die Video-Plattform Brightcove haben HTML5 Video schon ins Portfolio genommen. Zudem gibt es inzwischen auch schon Videoplayer-Umsetzungen auf HTML5-Basis, die den Standard-Player erweitern und auch etwas schicker machen.
Wer sich nun mal ein bisschen mit der Umsetzung von HTML5 Video beschäftigen möchte, findet z.B. in der HTML5-Tags-Referenz von w3schools natürlich auch einen Abschnitt vom video-Tag und seinen Attributen. Weiter finde ich auch die Website html5video.org recht gelungen. Dort gibt es neben regelmäßigen aktuellen News zum Thema, auch die HTML5-Video-Library Kaltura … inkl. Demos.
Persönlich habe ich den Eindruck, dass sich HTML5 ziemlich schnell durchsetzen wird. Es gibt noch ein paar Unstimmigkeiten bzgl. der in den Browsern zugrunde gelegten Video-Codecs … von Google und Apple wird H.264 favorisiert, Mozilla und Opera setzen auf das freie Ogg Theora. Aber ich denke, dass sich H.264 als Standard durchsetzen wird, da z.B. auch Flash auf diesen Codec setzt und der Entwickler zugesagt haben, dass H.264 bis Ende 2015 frei nutzbar bleiben wird … im Web eine kleine Ewigkeit.
von Matthias Zellmer
Frontend Coding Tips von Jon Raasch
Die Tage wurde ich auf den Beitrag “10 Javascript Performance Boosting Tips from Nicholas Zakas” auf dem Blog von Jon Raasch gestoßen. Zunächst habe ich den Beitrag nur überflogen. Doch schon dabei bin ich auf einige Dinge gestoßen, die absolut einleuchtend waren und für die ich mir vornehme, sie in Zukunft zu beachten.
Beim anschließenden Stöbern fand ich zahlreiche weitere interessante Beiträge rum um die Themen JavaScript und Frontend-Entwicklung im Allgemeinen. Jon Raasch scheint genau zu wissen, über was er da schreibt. Er schafft es, die Inhalte verständlich aufzuschreiben und seinen Beiträgen genau die richtige Länge zu geben. Man erhält die erwarteten Informationen so portioniert, dass einen der Informationsgehalt nicht erschlägt. Möchte man mehr wissen kann man den Links folgen, die eigentlich immer zur Verfügung stehen.
Befasst man sich mit dem Entwickeln von Frontends für das Web lohnt es sich (denke ich) in jedem Fall, regelmäßig bei Jon Raasch vorbei zu schauen.
von Katrin Schneider
selfHTML jetzt auch als Wiki
Als ich 1996 anfing meine ersten HTML-Seiten zu basteln, wurde mir von einem Freund selfHTML empfohlen. Seitdem begleitet mich mich diese Webprojekt kontinuierlich. In den ersten 10 Jahren deutlich mehr als heute, da ich heute kaum noch selbst entwickle. Aber wenn ich mal was über Web-Technologien wie HTML/CSS/etc. in der Praxis nachschauen will, dann ist selfHTML immer noch meine erste Adresse.
Darum freut es mich, dass es wieder ein selfHTML-Wiki gibt. 2006 hatten die Leute um den selfHTML-Gründer Stefan Münz schon mal ein Wiki-Test-Projekt gestartet, aber schnell wieder gestoppt. Und wie bei einem Wiki-Projekt üblich, können/dürfen/sollen nun an dem Wachsen und Gedeihen des selfHTML-Wikis mitarbeiten. Ich persönlich hoffe, dass die Web-Entwickler von dieser Möglichkeit regen Gebrauch machen werden.
von Matthias Zellmer
Bomomo zeigt, was mit HTML5 auch möglich ist
Die Stuttgarter Philipp Lenssen und Nikolai Kordulla haben mit der kleinen grafischen Web-Anwendung Bomomo auf nette Art und Weise demonstriert, was mit JavaScript, HTML5 und dessen Canvas-Element inzwischen machbar ist. Laut Wikipedia ist:
das Canvas-Element […] Bestandteil von HTML5 und gestattet ein dynamisches Rendern von Vektorgrafiken und Bitmap-Grafiken.
Achtet aber bitte darauf, dass ihr einen modernen Browser verwendet. Oder zumindest Flash installiert habt, das ist nämlich das Fallback für Web-User aus dem letzten Jahrtausend.
Weitere interessante grafische Sachen von den Beiden findet man übrigens auf ihrer Website Sketchory.
Gefunden bei Chrome Experiments – Not your mother’s JavaScript … nebenbei bemerkt: das ist auch eine Site, die ein bisschen zum Stöbern einlädt.
von Matthias Zellmer
Browser-Performance: JavaScript vs. HTML
Gestern bin ich auf AjaxLine.com auf einen interessanten Artikel gestoßen, der sich mit der Performance von Browsern bezüglich JavaScript befasst. Wie der Titel “The Browsers Performance in Dependence of HTML Coding” schon sagt, ist dieser Artikel kein weiterer reiner Vergleich der JavaScript-Engines verschiedener Browser. Vielmehr beschäftigt er sich damit, wie performant Browser JavaScript in Abhängigkeit vom zu rendernden HTML-Code ausführen.
Der Autor, Sergey Chikuyonok (Blog), hat verschiedene HTML-Konstrukte in folgenden Browsern getestet: IE6, IE7, IE8b2, FF2, FF3, FF3.1a, Opera 9.62, Chrome 0.3, Safari 3.1.2, FF3 (Mac), FF3.1a (Mac), Safari 3.1.2 (Mac), Opera 9.6.1 (Mac), WebKit r37790 (Mac).
Es wurde beispielsweise überprüft, ob absolute oder relative Positionierung von Elementen performanter ist, oder wie sich die Anzahl der DOM-Elemente auf die Browser-Performance auswirkt. Die Ergebnisse der einzelnen Test sind jeweils grafisch aufbereitet dargestellt. Aus besonders eindeutigen Ergebnissen formuliert Chikuyonok außerdem klare Handlungsanweisungen.
Am Ende des Artikels befindet sich ein Resümee, in dem folgende Maßnahmen zur Verbesserung der Browser-Performance vorgeschlagen werden:
- interaktive Elemente sollten absolut positioniert werden
- interaktive Elemente sollten bereits von Anfang an bedacht und eingeplant und nicht nachträglich eingefügt werden
- zu viele Elemente auf einer Seite können sich negativ auf die Performance auswirken
- gleiches gilt für zu tiefes Verschachteln von Elementen
- das Verwenden von <img />-Elementen ist performanter als das Einsetzen des Background-Image-Attributs
- Bilder sollten nicht vom Browser skaliert werden
Die getesteten HTML-Konstrukte sind typisch für Szenarien, in denen DOM-Manipulation über JavaScript stattfindet. Doch das Befolgen einiger der vorgeschlagenen Maßnahmen – wie beispielsweise der Verzicht auf Skalierung von Bildern über den Browser – ist sicher auch ratsam, wenn kein JavaScript zum Einsatz kommt.
via spic
von Katrin Schneider
Gravatare nun auch im Netzlogbuch
Gravatar steht für Globally Recognized Avatar und ist ein Web-Dienst, der die eigene E-Mail-Adresse mit einem Bild verknüpft. Registriert man also seine E-Mail-Adresse bei Gravatar, so kann man dort dazu ein Bild hochladen. Schreibt man nun in einem Blog einen Kommentar oder hinterlässt auf irgendeiner Website, die Gravatar unterstützt, diese E-Mail-Adresse, so wird das bei Gravatar hinterlegte Bild dort dargestellt.
WordPress unterstützt Gravatar von Haus aus, so dass man es im Prinzip nur noch in seinem Theme integrieren muss. Das war beim Netzlogbuch nur zum Teil geschehen, nämlich bei der Kommentar-Eingabe. Und nachdem sich sogar unserer treuer Leser Jan über diese Inkonsistenz beschwert hat, habe ich mich gestern Abend hingesetzt und Gravatar auch bei der Kommentar-Ausgabe integriert.
Ich hab das aber nicht nur für Jan getan. Ich finde auch, dass es unserem Blog eine noch mal etwas persönlichere Note gibt. Und außerdem ist Gravatar ein einfacher, aber echt cooler Dienst. Ich steh auf sowas!
Wer das Ganze nun mal ausprobieren will, ist hiermit herzlich eingeladen, unten einen Kommentar zu verfassen. Taucht da übrigens eine weiße Silhouette auf grauem Grund auf, dann heißt es, schnell zu gravatar.com und die verwendete E-Mail-Adresse mit einem schönen Bildchen registrieren.
von Matthias Zellmer
Highslide JS – Lightbox-Alternativen
Highslide JS ist eine Open Source Galerie-Bibliothek auf Basis von JavaScript. Sie bietet mehrere schicke Lightbox-Alternativen zu den ungeliebten Pop-ups einspunktnulliger Tage.
Sehr schön: Highslide JS bringt seinen eigenen Fallback-Mechanismus schon mit. Das heißt, ist der Browser mit dem die Bilder betrachtet werden sollen, nicht JavaScript-fähig oder wurde es deaktiviert, legen sich die Großansichten nicht über die Galerie-Ansicht, sondern werden einfach als Grafik angezeigt. Somit sind die Lightboxen aus der Highslide-Bibliothek sogar in barrierefreien Web-Angeboten einsetzbar.
Via Gratisscript
von Matthias Zellmer
