Neu auf eKiwi.de: Homepagebau in Eigenregie

Es tut sich etwas auf unserer Webseite eKiwi.de. Unsere neue Rubrik: Schritt für Schritt zur eigenen Homepage ist online. Die Rubrik richtet sich an alle Leute, welche ihre Homepage selbst ins Internet bringen wollen.

Oft weiß man nicht so richtig wie man starten soll, welche Inhalte man online bringen sollte oder welche technischen Hürden zu nehmen sind. Wir erklären, welche Möglichkeiten es gibt. Will man ein fertiges WordPress-Blog verwenden, einen Homepagebaukasten oder lieber alles von Hand machen? Wo bekomme ich Webspace her und wie lade ich die Homepage hoch.

Homepagebau in Eigenregie

Auch andere Themen, wie Grafikbearbeitung, Usability und Optimierung der Homepage finden Sie in der neuen Rubrik.

Noch ist nicht alles fertig, was wir für die neue Rubrik geplant haben. Diese wird in der nächsten Zeit weiter ausgebaut und kontinuierlich mit neuen Inhalten gefüllt.

Link: Homepagebau Schritt für Schritt.

Bilder responsive einbinden

Bilder die man in die Webseite einbindet haben eine feste Breite und Höhe. Damit der Benutzer auf dem mobilen Endgerät nicht hin und her scrollen muss, ist es sinnvoll diese “responsive” zu machen. Zum Glück geht dies recht einfach mit etwas CSS:

img {
max-width: 100%;
height: auto;
}

Ist genug Platz vorhanden, werden die Bilder in der originalen Bildgröße angezeigt, aber nicht größer. Steht weniger Platz zur Verfügung werden die Bilder automatisch verkleiner.

Unused-CSS.com – Unnötigen CSS Ballast entfernen

Wenn die Webseite über lange Zeit gepflegt und erweitert wird, sammelt sich naturgemäß immer etwas Ballast im Quelltext an. Unter anderem in den CSS-Dateien. Hier finden sich dann Elemente die nirgends auf der Webseite mehr verwendet werden. Code der nicht mehr verwendet wird trägt nur noch zur Verlängerung der Ladezeit bei.

Vor kurzem bin ich auf die Webseite www.unused-CSS.com gestoßen. Hier trägt man einfach die URL seiner HTML-Seite ein und nach kurzer Analysezeit wird eine Auswertung präsentiert und die unbenutzten CSS-Elemente dargestellt:

Unused-CSS

Die Basisversion des Dienstes ist kostenlos. Gegen Geld kann man seine gesamte Webseite analysieren lassen und bekommt die gesäuberten CSS-Dateien zugeschickt. In der kostenlosen Variante ist der Dienst leider etwas zu sehr eingeschränkt, so wird maximal eine HTML-Seite untersucht. Zumindest interessant, für den schnellen Überblick. 

CSS Shapes Editor für Google Chrome

Mittels CSS-Shapes lassen sich zum Beispiel Bilder besser in den Textfluss integrieren, bzw. man kann selbst festlegen, wie der Text eine Grafik umfließt. Hier ein Beispiel:

Shape1

Im Code sieht das obere Beispiel so aus:

<img src="remote.png" align="left” style="shape-outside: polygon(0px 0px, 180px 16px, 365px 501px, 0px 506px);">

Die CSS-Shape ist als Polygon definiert. Allerdings ist es nicht gerade einfach die Werte von Hand festzulegen und im Code festzulegen. Eine Hilfestellung bietet sich hier in Form eines Google Chrome-Plugins an, dem “CSS Shapes Editor”. 

Nachdem das Plugin installiert ist, klickt man mit rechter Maustaste auf das gewünschte Element und wählt den Menüpunkt “Inspect Element” aus:

Inspect Element

Es öffnen sich die Entwickler-Tools. Durch Klicken auf den >> Button kann man den “Shapes”-Editor auswählen und durch Klick auf das Plus Icon dem Element die gewünschte Shape-Form hinzufügen. Zur Auswahl stehen Kreis, Ellipse und das Polygon:

Entwickler-Tools

Hat man die gewünschte Form hinzugefügt, klickt man auf den Zeiger (Pointer) neben dem Plus. Anschließend kann man die Form im Browser-Fenster bearbeiten.

Form bearbeiten

Änderungen werden direkt sichtbar. Ist das Ergebnis wie man es sich wünscht, kopiert man nur noch den Quelltext heraus. Eine Besonderheit gibt es zu beachten, bei mir hat der Editor nur funktioniert mit Dateien die auf einem Webserver lagen. Mit einer lokalen Datei funktionierte der Editor nicht. Also ggf. die HTML-Dateien einfach schonmal auf den Webspace kopieren.

Ich habe noch ein kleines Video erstellt, welches die Bedienung beschreibt:

Obwohl CSS-Shapes eine super Sache sind, funktionieren diese derzeit nicht in allen Browser. Google Chrome und Opera unterstützen diese. Firefox, Safari und Internet Explorer ignorieren diese bisher. 

Syntax Highlighting mit highlight.js

Wer ab und zu mal Codesnippets auf seiner Homepage einbinden will, kann sich mal highlight.js anschauen. Die Kombination aus JavaScript- und CSS-Bibliothek erlaubt ein sehr einfaches Syntaxhighlighting von Code in Webseiten.

63 verschiedene Sprachen werden laut Webseite derzeit unterstützt.

Im Gegensatz zu anderen Tools, wie z.B. www.toHTML.com, wird der eigentliche Quelltext nicht verändert und hart mit HTML formatiert.

Um highlight.js zu verwenden, lädt man es entweder von der Homepage herunter und bindet die Dateien in die Homepage ein oder verwendet die gehostete Version. In diesem Fall ist es mit dem Einfügen von folgendem HTML-Code in den “head” der HTML-Datei getan:



Der eigentliche Quelltext wird nun mittels “pre” und “code” Tag eingebunden:

Code

Wie man sieht wird der Quelltext nicht mit HTML-Tags verändert. Dies erleichtert spätere Änderungen ungemein und das Design kann jederzeit gewechselt werden.

Das Ergebnis sieht dann z.B. so aus:

Highlight

Wer etwas mehr Farben haben will, verschiedene Themes stehen auf der highlight.js Webseite zur Verfügung. Einfach einbinden, fertig:

Highlight2

CSS – Elemente mit Schatten versehen

Die Zeiten in denen man Elemente mit irgendwelchen Tricks mit einem Schatten versehen konnte, sind zum Glück weitestgehend vorbei. Zumindest sofern der Browser CSS3
unterstützt.

Will man eine HTML-Element, z.B. ein DIV mit einem Schatten versehen, kann man dies recht leicht mittels CSS realisieren:

box-shadow:3px 3px 3px #a8a8a8;

Kurze Erkärung, die ersten beiden Werte geben den Abstand in X und Y Richtung wieder, der dritte Wert den “Blur” Radius und zuletzt die Farbe des Schattens:

Schatten

Wer etwas mit den Einstellungen herumspielt entdeckt schnell neue Möglichkeiten, z.B. statt einem Schatten einen Glow-Effect:

box-shadow:0px 0px 10px #ec0707;

Rotes Glühen

Auch mehrere Schatten lassen sich kombinieren:

box-shadow: 8px 8px 8px green,
        -8px 8px 8px red,         
        8px -8px 8px blue,
        -8px -8px 8px black;

Mehrere Schatten

Soll der Schatten innen und nicht außen sein, auch kein Problem:

box-shadow: inset 3px 3px 3px #a8a8a8;

Schatten Innen

Viel Spaß beim Experimentieren!

HTML: Alle Formularfelder sollen die gleiche Breite haben

Aus einer aktuellen Supportanfrage, im HTML-Formular die gleiche Breite haben. Konkret geht es natürlich um ein DA-FormMaker Formular, aber dies lässt sich prinzipiell natürlich bei Formularen aus jeder anderen Software anwenden.

Lösen lässt sich das mit etwas CSS, welches wir im Head der HTML-Datei definieren:

Same width 1

Wie man sieht genügt es nicht, einfach die Breite zu definieren, man muss explizit “border” und “padding” auf die gleichen Werte bringen.

Hier sieht man auch gleich das grundsätzliche Problem. Textareas und Input-Felder lassen sich recht leicht auf die gleiche Breite bringen. Hat man Auswahlfelder wird es schwieriger. Hier werden je nach Browser die Bedienelemente, z.B. Scrollbar vom Betriebssystem übernommen, dann haut es mit der Breite nicht immer hin. Hier hilft nur ausprobieren und natürlich testen in verschiedenen Browsern.

In dem Beispiel sieht man, dass die Breite vom “select” etwas größer ist.

So sieht das ganze dann aus:

Same size2

Download der Beispieldatei hier.

Tooltips mit Hint.css

Eine kleine feine CSS-Bibliothek: hint.css. Nachdem das Stylesheet eingebunden ist, kann man Elemente seiner Webseite sehr leicht mit Tooltips ausstatten, welche erscheinen, wenn man mit der Maus über dem Element ist:

Hint CSS

Das Einbinden im Code geht sehr einfach, Beispiel:

<a href="javascript:void(0)" class="hint--top" data-hint="Yeah, I am >:D">Look, there is something over me.</a>

Mehr Beispiele gibt es auf der Webseite. Es gibt verschiedene Arten von Tooltips, zum Beispiel für Warnungen oder Fehlermeldungen. 

CSS 3.0 Maker

Wer mal ein wenig mit CSS herumspielen will, sollte sich die Webseite http://www.css3maker.com/ancshauen:

image

Man wählt einfach die gewünschte CSS Option aus, spielt ein wenig an den Einstellungen und kann das Resultat direkt anschauen. Sowohl in Code als auch als Live-Ansicht. Außerdem wird zu jedem Effekt die Browserkompatibilität angezeigt (Desktop und mobile Browser).

Acko.net–3d Webdesign

Heute nur ein kleiner Linktipp, der zeigt, was mit modernen Browsern und Webdesign (und ordentlich Know-How) alles so möglich ist. Ohne Flash wohlgemerkt: http://acko.net

Einfach die Seite besuchen und nach unten scrollen, dann sieht man den 3D Effekt. Ich habe das Ganze mit Google Chrome getestet. Ob es auf anderen Browsern auch funktioniert, müsst ihr ausprobieren.

image

Die technischen Hintergründe werden hier etwas genauer erklärt. Das ganze geht sogar so weit, dass der Programmierer der Webseite gleich noch einen Editor zusammengehackt hat, mit dem ihr das Aussehen der Webseite in einem 3d Editor bearbeiten könnt:

image