Archiv der Kategorie: CSS

Speed is a feature – Tuning für Ihre Homepage

Wer eine Webseite besucht, möchte normalerweise nicht auf ein weißes „Blatt Papier“ starren.

Um die eigene Webseite richtig schnell zu machen, muss Men eigentlich nichts tun. Wenn man ein statisches HTML-Dokument erstellt und dieses weder gestaltet noch per JavaScript aufpeppt, ist die Seite schneller beim Betrachter, als der gucken kann.

Aber wer will schon eine ungestaltete Webseite? Also kommen CSS, JavaScript, Bilder und all die anderen Zutaten hinzu, mit denen man den Besuch zu einem Erlebnis für den Betrachter macht.

Damit die Seite trotzdem blitzschnell beim Betrachter ankommt, kann man an verschiedenen Schrauben drehen. Dabei muss die Seite nicht immer schneller laden: es kommt auch darauf an, wann die großen Brocken übertragen werden. So kann man beispielsweise die meisten JavaScripte nach den eigentlichen Inhalten laden. Der Besucher bekommt auf diese Weise schnell etwas zu sehen und im Hintergrund wird noch unbemerkt weitergeladen.

Wie das geht und noch viel mehr erklärt die Seite browserdiet.com (die eigentlich Websitediet heißen müsste)

Auch Erfahrene Entwickler finden hier noch die eine oder andere Perle – und weil die Texte kurz und übersichtlich geordnet sind, lassen sich diese Perlen auch schnell finden.

20130331-110203.jpg

CSS3-Kacheln

Es gibt zahlreiche Galerien und Generatoren, die den Hintergrund einer Webseite von einer weißen Schneewüste in einen lebendigen und abwechslungsreichen Blickfang verwandeln. Ich hoffe, ich habe bald mal Zeit den einen Generator oder die andere Galerie besonders ausführlich zu testen und dann auch hier zu besprechen. Einstweilen möchte ich nur die Galerie von Lea Verou hervorheben, weil die ein paar besonders schöne Muster bereithält und schon lange existiert. Zu dieser Galerie darf auch jeder gerne beitragen:

http://lea.verou.me/css3patterns/

Für heute möchte ich noch die Ergebnisse meiner Google-Suche anfügen, die zeigen, wie viel Anregungen und Tools dort draußen im unendlichen Netz darauf warten, entdeckt zu werden:

Galerien:

https://www.google.de/search?q=css3+patterns+gallery&ie=UTF-8&oe=UTF-8&hl=de

Generatoren:

https://www.google.de/search?q=css3+patterns+gallery&ie=UTF-8&oe=UTF-8&hl=de&client=safari#hl=de&gs_nf=3&tok=_AJuOlRWFMg1ZB3fPc6BKA&pq=css3%20patterns%20gallery&cp=16&gs_id=w&xhr=t&q=css3+patterns+generator&pf=p&sclient=tablet-gws&safe=off&client=safari&tbo=d&oq=css3+patterns+ge&gs_l=&pbx=1&bav=on.2,or.r_gc.r_pw.r_cp.&fp=9fe72bfeddd77f69&bpcl=37643589&biw=1024&bih=672

Responsive Webseite bonn-realis.de online gegangen

Unter der Adresse www.bonnrealis.de ist meine erste durchweg responsive Internetseite online gegangen. Die im Rahmen meiner Arbeit als Angestellter der Bundesanstalt für Landwirtschaft und Ernährung entstandene Seite ist eine angepasste Version eines ungebrandeten TYPO3-Setups, mit dem sich individualisierbare, aber ähnliche Webseiten in kurzer Zeit mit überschaubarem Aufwand realisieren lassen (ähnlich eines Themes).

Für die Seite habe ich die CSS3- und HTML5-Templates für TYPO3 vorgegeben.

Die Seite ist reagiert responsiv sowohl auf Änderungen des Browserfensters, als auch Anpassung der Schriftgröße. Außerdem sollte die Seite gut oder sehr gut zugänglich nach BITV-Test sein (Ergebnis steht noch aus).

Design: Veronika Chakraverty
TYPO3-Umsetzung: Sacha Vorbeck
Copyright: Bundesanstalt für Landwirtschaft und Ernährung (BLE)

HTML5 und CSS3: Neue Kurse ab September 2012

Logos der Auszeichnungssprache HTML5 und der Formatierungssprache CSS3
Die offiziellen Logos der Sprachen HTML5 und CSS3

Lernen Sie, wie man Webseiten erstellt von einem Praktiker und Fachbuchautor!

Die Sommerferien sind vorbei und die neue Weiterbildungssaison hat begonnen! Los geht es mit den Anfängerkursen. Hier liegt der Schwerpunkt auf HTML5. Sie erfahren, wie man HTML-Dokumente nach dem neusten Stand der Technik erstellt. Unterrichtet wird an modern ausgestatteten PCs (Windows7) in der Volkshochschule Bonn. Damit die Wege für alle Bonner auf jeden Fall kurz bleiben, finden zwei Anfängerkurse statt: einer in Godesberg und einer in Duisdorf.Der Fortgeschrittenenkurs findet im November statt. Dann liegt der Schwerpunkt auf der Formatierungssprache CSS3, mit der Webseiten gestaltet werden können. Im Anfängerkurs bekommen Sie schon eine ganz kurze Einführung in CSS3, im Fortgeschrittenen-Kurs lernen Sie auch anspruchsvollere Aufgaben Layouts umzusetzen.

Bringen Sie Ihre eigenen Ideen ruhig mit. Wenn irgend möglich werde ich Ihre Gestaltungswünsche und Ideen für Ihre persönliche Homepage berücksichtigen und Ihnen die Techniken zeigen, damit Sie Ihre Webseite so aussehen lassen können, wie Sie es sich vorstellen. HTML5 und CSS3: Neue Kurse ab September 2012 weiterlesen

Übersicht Webseiten-Techniken

3D CSS Box Model Diagramm von Jon Hicks.
3D CSS Box Model Diagramm von Jon Hicks.

Eine sehr schöne und kompakte Übersicht über Techniken, die auf jeder Webseite zum Einsatz kommen, gibt es auf der Seite isobar.com

Eine ganze Reihe namhafter Autoren hat sich zusammengesetzt, um Herangehensweisen, vorbildliche Beispiele und sinnvolle Arbeitsweisen vorzustellen.

Die Autoren sind

 

 

 

 

Der Artikel ist in englischer Sprache abgefasst.

http://na.isobar.com/standards

Rezension: The CSS3 Anthology: Take Your Sites to New Heights

Das Buch ist leicht verständlich. Technisch sind mir keine größeren Fehler aufgefallen.

Allerdings gibt es doch viele Dinge, deretwegen ich das Buch nicht selber nutzen oder gar für den Unterricht verwenden würde. Dazu gehören Kleinigkeiten, wie die gedankenlose Bemerkung, dass inline-styles die einfachste Methode sind, Formatierungsanweisungen anzuwenden. Das klingt gerade für Anfänger verlockend und scheint daher das Mittel der Wahl. inline-styles gelten aber zu recht als schlechter Stil und sie führen (wie von der Autorin später selber dargelegt) die Vorteile von CSS ad absurdum. Die einzige sinnvolle Anwendung von CSS geschieht in einer zentralen Datei. Wie gesagt, das wird dann später noch dargelegt, aber ich kenne es aus eigener Erfahrung, dass ich, wenn ich mich in ein Thema einarbeite, gerne erst einmal die Methode ausprobiere, die als „am einfachsten“ bezeichnet wird. Das führt dann dazu, dass man die Methode die „am besten“ ist, später nochmal lernen muss. Unnötiger Aufwand und daher didaktisch unklug solche Sätze zu verwenden. Wie gesagt, das mag kleinlich erscheinen. Aber es zieht sich durch das Buch. So wird behauptet, dass feste Layouts auf einem Desktop-Computer mit großem Bildschirm gut zu nutzen sind. Gerade das von der Autorin verwendete Beispiel mit absoluten Positionen, in Pixeln angegebenen Breiten und relativen Schriftgrößen kann sehr schnell zu Problemen führen, da lange Worte nicht in die vorgegebenen Boxen passen werden, wenn ein Besucher die Schriften im Browser vergrößert. Die Verwendung des Seitenzooms wird zudem dazu führen, dass das Layout schnell aus dem Browserfenster wächst.
Schon die nächste Kapitelüberschrift „How do I create a design that works well on mobile devices“ unterstellt, dass ein herkömmliches (nicht responsives) Layout auf mobilen Geräten nicht funktioniert. Tatsächlich ist die Desktop-Version einer ordentlich gemachten Webseite aber mein persönlicher Favorit auf iPhone, iPad und Co. – Diese Geräte bieten mir auf ihren vergleichsweise kleinen Geräten einen schnellen Überblick über die gesamte Website. Ein „Doppeltipp“ auf eine Spalte vergrößert diese bildschirmfüllend und alle Elemente sind an den Stellen, an denen ich sie vom großen Computer her gewöhnt bin: Suche oben rechts, Navigation links usw. Der Überblick ist besonders hilfreich auf Webseiten, die sich nicht an solche Konventionen halten.
Herkömmlich gestaltete Seiten sind also durchaus auf mobilen Geräten nutzbar und ich bin nicht der einzige, der diese Darstellung bevorzugt. Deswegen sollte es auf Seiten, die sich auf kleinen Displays automatisch anders verhalten, wenigstens ein Link zur „normalen Version“ vorhanden sein. Aber so ein Link wird weder umgesetzt, noch wird auf diese ganze Diskussion überhaupt eingegangen.
Vielmehr wird der von der Autorin bevorzugte Weg hier und an anderer Stelle als beste oder gar einzige Methode dargestellt – was sicher gut gemeint war, kostet hier die Lernenden unter Umständen unnötig Zeit.
So wird responsives Design als die beste Methode genannt, um Bildschirme mit unterschiedlicher Breite zu berücksichtigen. Unterschiedliche Wünsche von Nutzern, wie oben beschrieben werden nicht behandelt.
Außerdem werden einige gerätespezifische Dinge hinzugefügt. Diese sind zwar sinnvoll, aber meiner Meinung nach nicht komplett. Ich vermisse hier Hinweise auf fertige Sets, wie die HTML5boilerplate.com – die Zeiten sind längst vorbei, in denen jeder Entwickler für sich einen Satz von Formaten schreiben musste, die der Harmonisierung von Browserunterschieden dienen. Auch hier wird wieder fahrlässig mit der Zeit der Käufer umgegangen.

Zudem wird mir nicht klar, für wen das Buch sein soll. Für Anfänger ist das Buch aufgrund der einseitigen Sichtweise nicht empfehlenswert. Für Fortgeschrittene sind Beispiele und Erläuterungen zu banal.

Fazit:
Die eigene, subjektive Meinung der Autorin, wird häufig als „die beste“ dargestellt. Gerade der Anfänger kann die Vorteile und Nachteile der aufgezeigten Lösungen nicht bewerten und erhält an vielen Stellen auch keine Entscheidungshilfe. Beispiele, wie man es nicht machen sollte (Breitenangaben in Pixeln, absolute Positionierung), führen den Leser in eine falsche Richtung. Formulierungen wie „am einfachsten ist…“ verführen dazu schlechtere Lösungen zu bevorzugen.
Außerdem bleibt das Buch oft hinter den Möglichkeiten der aktuellen Browser zurück. Was als Vorteil verkauft wird (funktioniert auch in alten Browsern), betrifft gerade Leute, die erst mit CSS3 beginnen kaum noch. Schon mit dem IE8 ist mehr möglich, als die Autorin zeigt (z. B. einfach umzusetzende Spalten-Layouts mit CSS-Tabellen).
Die Beispiele sind oft veraltet, statt aktueller HTML-Elemente werden divs benutzt, denen dann nicht einmal ein role-Attribut mitgegeben wird. Das ist richtig schlecht. Mit den semantisch korrekten Elementen (nav, article, aside usw) würden auch die für z. B. blinde Nutzer so wichtigen WAI-ARIA-Landmarks mitgeliefert – ohne im Detail erklären zu müssen, was die machen, ohne dass der Anfänger das überhaupt wissen muss (in ein HTML5-Buch würde das natürlich rein gehören).

Hinweis:
Diese Rezension beruht lediglich auf dem Überfliegen der auf Amazon.de bereitgestellten Vorschau. Es ist durchaus möglich, dass andere Kapitel sinnvollere Beispiele, bessere Erläuterungen oder aber auch noch mehr Ungenauigkeiten/Probleme/Fehler enthalten.

 

Wer sich selber ein Bild machen möchte, findet das Buch bei amazon beispielsweise.

Neue Kurse „Webseiten erstellen“ (HTML und CSS)

Am 30. Januar geht es mit dem Vorbereitungskurs wieder los. Hier lernen Sie die Grundbegriffe, was Webdesign ist, was Sie sich vor der ersten Webseite überlegen sollten und was Sie dafür außer Ihrer eigenen Kreativität benötigen.

Alle meine Kurse des ersten Halbjahres 2012 bauen aufeinander auf.

Vorkenntnisse sind kaum nötig. Es reicht, wenn Sie sich mit Windows oder einem anderen grafischen Betriebssystem gut auskennen. Wer unsicher ist, kann im Vorbereitungskurs feststellen, ob er über die nötigen Kenntnisse verfügt und diese nötigenfalls festigen.

Einzige Ausnahme: Der Wochenendkurs für Eilige. Hier können Sie vorhandene Kenntnisse auffrischen und auf den neuesten Stand bringen (HTML5 und CSS3).

Da in zwei Tagen ein Großteil der beiden anderen Kurse vermittelt wird, ist das Tempo entsprechend anspruchsvoll. Es gibt aber auch reichlich Lektüre zum mitlesen und nachbereiten.

Wenn Sie neugierig geworden sind, besuchen Sie doch mal die Übersicht meiner Kurse bei der Volkshochschule Bonn.

bittersmann.de

Allen Webentwicklern mit Lernpotential und -interesse sei ein Blick auf die Seite von Gunnar Bittersmann ans Herz gelegt. Eine hilfreiche Alternative für Floats, (zum Beispiel um Bildergalerien zu realisieren) löst ein lästiges Problem, wenn man es mit unterschiedlich hohen Elementen zu tun hat (in der Bildergalerie zum Beispiel Grafiken mit unterschiedlich langen Bildunterschriften). Wer also an gut erklärten Lösungen interessiert ist, schaut sich das mal an. Und alle die bereits alles zu wissen behaupten: seht es Euch trotzdem mal an, Ihr müsst es ja niemandem verraten. :-)