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.

HTML-Texte an Pfad ausrichten: CSS3 Warp

pfadtext-css

In Photoshop und Illustrator ist die Funktion längst bekannt: zunächst wird ein Pfad erstellt, anschließend wird diesem Pfad ein Text zugewiesen um ihn in beliebigen Formen verlaufen zu lassen. Soll ein solches Design dann allerdings ins Web übertragen werden, so wird meist eine Grafik verwendet was natürlich zum Nachteil hat, dass der Text weder vergrößert noch markiert werden kann und darüber hinaus zusätzlich im Code versteckt werden muss um von Suchmaschinen indexierbar zu bleiben.
Mit CSS3-Funktionen und dem Online-Tool CSSWarp lassen sich diese Pfadtexte nun kinderleicht auch als Plain-Text in die eigene Website integrieren.

Beitrag zu Ende lesen

Flash zu HTML5 Converter von Adobe: Wallaby

adobe-wallaby

Flash verliert mit der zunehmenden Verbreitung von HTML5 immer mehr an Boden. Nicht zuletzt weil Apple Flash aus dem iOS verbannt hat. Ob das nun gut oder schlecht ist mag ich hier gar nicht bewerten aber offenbar hat Adobe die Zeichen der Zeit erkannt und stellt nun mit Wallaby ein Konvertierungs-Tool für Flash-Dokumente bereit.

Beitrag zu Ende lesen

Tipp zum HTML5-<footer>-Element im Firefox/Opera

html5-logo-icon

Bei einem aktuellen HTML5-Projekt fiel mir auf, dass sowohl im Firefox- als auch im Opera-Browser das <footer>-Element nicht auf mein angewandtes CSS-Styling reagierte. Trotz korrekt angegebener Breite und neuster Browser-Generationen brach der Footer komplett aus dem Layout heraus und ließ sich überhaupt nicht mit CSS ansprechen. Sobald ich den <footer> in ein <div> umwandelte und eine ID vergab funktionierte alles wie gewohnt.
Das Problem war glücklicherweise schnell identifiziert und leicht behoben. Damit Ihr in Zukunft sofort wisst warum dieses Verhalten auftreten kann erkläre ich Euch kurz woran es liegt.

Beitrag zu Ende lesen

HTML5-Templates auf Boilerplate-Basis mit Initializr generieren

html5

HTML5 Boilerplate ist ein extrem umfangreiche HTML5 Startpaket für die Arbeit mit HTML5-Websites. Allerdings müsst Ihr Boilerplate je nach Bedürfnis ziemlich abspecken bzw. anpassen. Initializr übernimmt diese Aufgabe für Euch. Ihr legt zunächst fest welche Bestandteile von Boilerplate Ihr für die neue Website einsetzen wollt - jQuery, Modernizr, Serverconfigs etc. Anschließend erhaltet Ihr ein dokumentiertes Download-Paket und könnt direkt loslegen. Selbst eine ToDo wird mit exportiert, so dass Ihr genau wisst was angepasst werden muss. Wie beispielsweise das Favicon oder der <title>-Tag.

Beitrag zu Ende lesen

Erweiterte Kontaktdaten in der humans.txt

humans-txt

Vergangene Woche bin über die Idee zu einer humans.txt für Websites gestolpert. Im Gegensatz zur robots.txt mit deren Hilfe Suchmaschinen-Bots weitere Informationen erhalten dient die humans.txt den Menschen die eine Website besuchen. In der Textdatei werden Informationen zum Ersteller der Website festgehalten. Ein Hauptgrund ist, dass der Auftraggeber - also der Besitzer der Website - häufig nicht erlaubt, dass der Designer oder Programmierer sich im Impressum oder gar im dem Footer einer Website verewigt. Hier soll die humans.txt Abhilfe schaffen und getrennt vom Code der Website eben jene Informationen abbilden. Das Textformat wurde gewählt weil es sehr einfach in der Handhabung ist.

Beitrag zu Ende lesen

Conditional Comments

conditional-comment

Um einen HTML-Abschnitt ausschließlich im Internet Explorer auszuführen existieren die sog. Conditional Comments (bedingte Kommentare). Mit Ihrer Hilfe ist es möglich gezielt bestimmte Versionen des IE anzusprechen oder zu ignorieren. Es ist sogar möglich den Code nur für Internet Explorer größer oder kleiner einer bestimmten Version auszugeben. Den Möglichkeiten sind kaum Grenzen gesetzt.

Beitrag zu Ende lesen

WordPress Snippets

wp-snippets

Mit WPSnippets ist vor Kurzem eine Microsite online  gegangen die mehr oder weniger bekannte WordPress Hacks, Tipps und Snippets aggregiert. Die Seite wird regelmäßig erweitert und bietet somit eine schöne Quelle an Code-Schnipseln die Ihr sofort in Euer Theme einbauen könnt.

Beitrag zu Ende lesen