HTML5 & CSS3 | Antary

selfoss RSS-Reader + Google Reader Design

9. Mai 2013, 12:20 von Tobi | Keine Kommentare

In weniger als zwei Monaten ist es soweit: der Google Reader wird zum 1. Juli 2013 eingestellt. Sehr schade, da ich vor allem die Weboberfläche sehr intensiv genutzt habe. Aus diesem Grund habe ich euch in einem Artikel auch schon zahlreiche Alternativen zum Google Reader vorgestellt.

Obwohl ich bereits alle Dienste mit Weboberflächen getestet habe, konnte ich mich bisher für keine Alternative begeistern. Aktuell kommt einfach nichts an den Google Reader heran. Daher wurde es Zeit erneut die selbstgehosteten Möglichkeiten auszuprobieren. Aktuell gefällt mir selfoss sehr gut.

Der minimalistische RSS-Reader wird von Tobias Zeising als Open-Source-Projekt bei Github entwickelt. Seit der Ankündigung von Google hat selfoss einige Updates erhalten und bekommt auch viel Unterstützung durch die Community. Der Import von Google funktioniert prima und auch die Bedienung weiß zu gefallen. Tastaturkürzel werden unterstützt und auch eine eigene API ist seit der letzten Version verfügbar. selfoss bietet so gut wie keine Möglichkeiten zur Anpassung. Dadurch wirkt der Reader aber auch nicht so überladen wie beispielsweise Tiny Tiny RSS. Andererseits kann der Reader aber auch nicht den eigenen Bedürfnissen angepasst werden. Dennoch hat selfoss großes Potential, ich blicke erwartungsvoll in die Zukunft!

Download selfoss

Google Reader Design für selfoss

Da ich selfoss seit einigen Tagen nutze und mir das Standarddesign etwas unübersichtlich vorkommt, habe ich es kurzerhand etwas modifiziert. Herausgekommen ist ein Design, welches eine große Ähnlichkeit zum Google Reader besitzt Der Screenshot unten zeigt selfoss mit meinem Design. Bei Interesse könnt ihr euch das Google-Reader-Design für selfoss bei Github herunterladen.

selfoss mit Google Reader Design

Windows 8 Design mit CSS3 und jQuery nachbauen

5. März 2013, 19:03 von Tobi | Keine Kommentare

Nach gefühlten 100 Jahren mal wieder ein Artikel von mir über das Thema Web-Design. Bei Google+ hat Sergej heute einen Link gepostet, den ich sehr interessant fand: “Windows 8 Animations“.

Wie der Name schon sagt geht es um die neue Windows 8 Oberfläche und wie man diese mit HTML5, CSS3 und JavaScript bzw. jQuery realisieren kann. Neben dem ausführlichen Tutorial ist auch ein Demo vorhanden, welche das beeindruckende Ergebnis zeigt. Die Demo läuft in aktuellen Versionen von Firefox, Opera, Chrome und Safari. Ebenso im Internet Explorer 10.

Zum Tutorial “Windows 8 Animations”

HTML5 soll 2014 erscheinen, HTML5.1 im Jahr 2016

21. September 2012, 10:43 von Tobi | Keine Kommentare

Das W3C (World Wide Web Consortium) möchte HTML5 unbedingt bis Ende 2014 fertig stellen. Dafür werden einige geplante Neuerungen gestrichen und aus HTML5 herausgenommen. Diese werden dann als Erweiterungen separat weiterentwickelt. Falls sie rechtzeitig fertig werden, sollen die Erweiterungen dann doch noch in HTML5 aufgenommen werden. Ansonsten bleiben sie unabhängige Erweiterungen. Außerdem sollen Tests von bereits im Internet verwendeten Funktionen deutlich geringer ausfallen. Dies betrifft beispielsweise SVG oder MathML.

Des Weiteren wurde festgelegt, dass HTML5.1 bereits im Jahr 2016 erscheinen soll. Die Version wird neue Funktionen ebenfalls in Form von Erweiterungen beinhalten. Verzögern sich geplante Funktionen, werden sie aus HTML5.1 herausgenommen und entsprechend in HTML5.2 integriert werden.

Automatische Silbentrennung mit CSS3

2. August 2012, 18:14 von Tobi | 7 Kommentare

CSS3 bietet in allen Bereichen viele neue Möglichkeiten. Unter anderem auch bei der Textgestaltung. Mit der CSS3-Eigenschaft “hyphens” wurde eine automatische Silbentrennung eingeführt. Damit kann die Darstellung von langen Texten verbessert werden. Wie die Silbentrennung mit CSS3 in der Praxis aussieht, könnt ihr beispielsweise in meinem SSDblog anschauen.

Damit die Silbentrennung funktioniert, muss die korrekte Sprache für die Seite definiert werden. Diese kann für das gesamte Dokument oder für einzelne Textabschnitte angegeben werden.

<html lang="de">

<p lang="de">deutscher Text</p>
<p lang="en">englischer Text</p>

Aktuell muss noch mit den verschiedenen Browser-Präfixen gearbeitet werden, damit die Silbentrennung funktioniert.

p {
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
}

Mit “auto” entscheidet der Browser selbst, wo getrennt werden muss. Bei “none” wird keine Silbentrennung angewendet. Der Standardwert der Eigenschaft ist “manual”. In diesem fall wird lediglich bei solchen Stellen getrennt, die mit “” gekennzeichnet sind.

Firefox und Safari unterstützen die CSS3-Eigenschaft “hypehns” bereits. Opera und Chrome sollten demnächst nachziehen. Auch der Internet Explorer wird die Silbentrennung mit Version 10 unterstützen.

Vector Maps – SVG-Karten mit jQuery

9. Juli 2012, 21:58 von Tobi | 1 Kommentar

Interaktive Karten auf Webseiten sind ein toller Blickfang und können für verschiedene Zwecke eingesetzt werden. Mit modernen Webtechnologien lassen sich mittlerweile vektorisierte Land- oder Weltkarten realisieren, komplett ohne Flash. Stattdessen kommt bei den beiden jQuery-Plugins jQuery Vector Maps und jVectorMap SVG und JavaScript zum Einsatz.

Die Plugins werden von Firefox, Chrome, Opera, Safari und IE9 unterstützt. jQuery Vector Maps ist dabei eine modifizierte Version von jVectorMap, mit einigen Veränderungen und neuen Funktionen. Beide Plugins bieten auf ihrer Homepage eine ausführliche Dokumentation und einige Beispielkarten an. So ist es unter anderem möglich, eigene Karten zu erstellen oder die Farben anzupassen.

jVectorMap – Weltkarte

Kostenloses, responsives HTML5-Template

14. Juni 2012, 18:41 von Tobi | 1 Kommentar

Bei EGrappler gibt es seit wenigen Tagen ein kostenloses, responsives HTML5-Template zum Download. Das Template hört auf den Namen “Brownie” und ist primär für Portfolio- oder Business-Webseiten ausgelegt. Nichtsdestotrotz kann das Template als Basis für ein modernes Design dienen und an die eigenen Bedürfnisse angepasst werden. Auch die gute Dokumentation ist dabei sehr hilfreich.

Neben einem Slider auf der Startseite sind auch eine Fotogallerie, ein Kontaktformular, eine Blog-ähnliche Ansicht und ein- bis vierspaltige Layouts vorhanden. Das Template ist in validem HTML5 und CSS3 erstellt und soll auf allen aktuellen Browsern ohne Probleme funktionieren. Außerdem passt sich das responsive Layout automatisch auf die Auflösung von Desktop, Tablet und Smartphone an. Eine Demo von “Brownie” gibts direkt bei EGrappler.

Download Brownie-Template

Gastartikel – HTML5 – die wichtigsten Elemente

2. Mai 2012, 17:52 von Tobi | Keine Kommentare

Marie arbeitet bei der Projektplattform twago im Online-Marketing. Sie schreibt über App-Programmierung, HTML, iPhone/iPad und Android. Im heutigen Text beschreibt Sie die wichtigsten Elemente von HTML5.

Diese nützliche Technik ermöglicht es, Web-Anwendungen zu entwickeln und bis jetzt nicht denkbare Eigenschaften zu implementieren. Die textbasierte Einführungssprache HTML5 beinhaltet viele neue und zum Teil auch sehr nützliche Elemente. In diesem Artikel werden nun die wichtigsten HTML5-Elemente dargestellt und kurz beschrieben, um einen Überblick über die interessantesten Änderungen zu geben. Die Elemente lassen sich in viele Kategorien einteilen. Fangen wir mit der Kategorie der Gruppierungselemente an.

Gruppierungselemente

figure
Das figure-Element hat die Aufgabe, die Auszeichnung zusätzlicher Inhalte, beispielsweise Abbildungen mit Bildunterschriften, zu vereinfachen; Damit können Abbildungen mit einer Beschriftung versehen werden, wie man es aus dem Printbereich kennt.

header
Das header-Element benennt den Kopfbereich einer Webseite. In diesem Bereich könnte man ein gewünschtes Logo, die Nagivation oder ein Inhaltsverzeichnis platzieren.

footer
Das footer-Element hingegen legt den Fußbereich der Seite fest. Man kann dort Querverweise, Autor-Informationen oder Informationen über die Webseite platzieren.

nav
Das nav-Element ist zum Auszeichnen der Navigation gedacht. Es wird oft nur für die Hauptnagivation verwendet, muss aber nicht.

section
Dieses HTML5-Element hat die Aufgabe zwei Inhaltsbereiche von einander zu differenzieren und trennt somit verschiedene Bereiche der Website. Dies ist auch der Grund, warum es mehrfach verwendet werden kann.

article
Das article-Element eignet dafür Artikeltexte in Form eines Blocks zu umschließen und somit den wichtigsten Inhalt herauszuheben und auszuzeichnen. Durch das zusätzliche section-Element können die Blöcke in mehrere Abschnitte unterteilt werden.

aside
Mit diesem Element kann man eine Sidebar erstellen. Diese Abschnitte, müssen nicht unbedingt mit dem eigentlichen Inhalt zusammen hängen.

details
Das details-Element führt ergänzende Informationen zu einem Thema an. Meistens wird dieser Inhalt bereits standardmäßig ausgeblendet und muss über einen Klick eingeblendet werden.

Formularelemente

input
Diese Element wurde zur Eingabe von Suchbegriffen, Telefonnummern, URL- und E-Mail-Adressen, Datums- und Zeitangaben, Zahlen sowie Farbangaben erweitert.

datalist
Mit dem datalist-Element können Vervollständigungsvorschläge angegeben werden

output
Das output-Element stellt Ergebnisse von Berechnungen dar.

progress
Das progress-Element bildet die Fortschritte einer Aktion ab. Der Fortschritt einer Aktion kann als Prozent- oder Sekundenangabe angezeigt werden und laufend aktualisiert werden.

meter
Das Element gibt einen statistischen Überblick über einen aktuellen IST-Zustand

source
Mit dessen Hilfe können für Medien verschiedene Quellen angegeben werden, aus denen der Browser dann die angemessenste auswählt.

Textauszeichnungselemente

time
Mit dem time-Element können feste Zeitangaben im Dokument integriert werden.

mark
Mit diesem Element können Textabschnitte oder einzelne Wörter, sowie Passagen hervorgehoben werden. Es wird oft verwendet, um Schlüsselbegriffe auf einer Seite hervor zu heben, die als Ergebnis einer Suche geliefert wurden.

Multimedia-Elemente

Video/audio/canvas
Das wichtigste dieser drei Elemente ist das canvas-Element. Mit diesem Element wird eine rechteckige Zeichenoberfläche erzeugt, die mit Inhalten gefüllt werden kann und in der auch Bewegungen eingebaut werden können. So können dynamische und interaktive Grafiken erstellt werden. Es wird behauptet, dass dieses Element das meiste Potenzial für neue Entwicklungen bietet.

Der große Vorteil von HTML5 ist, dass vieles für den HTML-Programmierer vereinfacht wurde und er durch die Anwendung Zeit einspart. Die Web-Entwickler sparen sich viele unnötige Handgriffe und die Suchmaschinen finden HTML Seiten wesentlich schneller.

Marie Schubert

HTML5-Nachfolger HTML.Next in Entwicklung

26. April 2012, 12:26 von Tobi | Keine Kommentare

Obwohl HTML5 vermutlich erst im Jahr 2014 fertiggestellt sein wird, hat das W3C (World Wide Web Consortiums) mit der Entwicklung am Nachfolger begonnen. Die neue HTML-Version trägt vorerst den Namen HTML.Next. Außerdem hat das W3C aufgerufen, erste Vorschläge für HTML.Next einzusenden.

Gleichzeitig plant man weiterhin mit der WHATWG (Web Hypertext Application Technology Working Group) zusammenzuarbeiten. Die WHATWG setzt sich aus Mitarbeitern der Browserhersteller Mozilla und Opera zusammen. Auch einige W3C-Mitglieder sind Teil von WHATWG. Die WHATWG arbeitet schon länger an einem Nachfolger für HTML5. Wenn es nach der WHATWG geht, soll die nächste HTML-Version ohne Versionsnummer auskommen und stattdessen dynamisch weiterentwickelt werden. Es ist davon auszugehen, dass HTML.Next auf einem Vorschlag der WHATWG basieren wird.

Farbe von markiertem Text mit CSS anpassen

15. November 2011, 18:32 von Tobi | 2 Kommentare

In allen Browsern ist die standarmäßige Darstellung von markiertem Text auf weiße Schrift und blauen Hintergrund gesetzt. In letzter Zeit sehe ich jedoch immer mehr Webseiten, die sich davon abwenden. Einerseits um markierte Textstellen besser lesbar zu machen, andererseits um das Design noch einheitlicher zu gestalten.

Farbige Textmarkierungen können mit Hilfe von CSS realisiert werden. Dabei lassen sich die Text- und Hintergrundfarbe von markiertem Text ändern. Unterstützt wird der “selection”-Selektor von Opera ab Version 9.5, vom Internet Explorer ab Version 9, von Chrome und Safari. Firefox kann seit Version 3.6 ebenfalls damit umgehen.

::selection {background: #ff0000; color: #ffffff;}
::-moz-selection {background: #ff0000; color: #ffffff;}

Ursprünglich war der neue Selektor Teil der CSS3-Spezifikation. Mittlerweile wurde der Support eingestellt und der Selektor ist in der neuesten Spezifikation leider nicht mehr vorhanden. Durch die breite Unterstützung auf Browserbasis bleibt der “selection”-Selektor aber weiterhin interessant. Einziger Nachteil beim Einsatz ist, dass dieser Selektor nicht valide ist.

Ich habe euch eine Demo mit drei verschiedenen Beispielen erstellt. Dort könnt ihr selbst testen und den Quellcode kopieren:
http://www.antary.de/wp-content/uploads/2011/11/css_selection.html

Firefox erreicht 100 Punkte im Acid3 Test

26. September 2011, 01:41 von Tobi | Keine Kommentare

Obwohl der Acid3-Test bereits im Februar 2008 veröffentlicht wurde, haben die Firefox Versionen 4 bis 7 den Test bisher nur mit 97 von 100 Punkten bestanden. Seit einem Update des Acid3-Tests vor einigen Tagen kommt Firefox aber auf die volle Punktzahl.

Als Hintergrundinformation sollte man wissen, dass der Acid3-Test nur stichprobenartig bestimmte Webstandards prüft. Darunter befinden sich auch die drei, bisher fehlenden Punkte. Diese beziehen sich auf die Unterstützng von SVG-Fonts. In der Realität hat sich mittlerweile aber WOFF (Web Open Font Format) durchgesetzt, weswegen SVG-Fonts nie genutzt wurden. Selbst andere Browser, die in der Vergangenheit 100 Punkte erreichten, haben SVG-Fonts fehlerhaft implementiert, um auf die werbewirksame Zahl von 100 Punkten zu kommen. Firefox zog jedoch nicht mit und blieb bis vor Kurzem eben bei 97 Punkten stehen.

Seite 1 von 212 »