HTML and Javascript Page in English
HTML and Javascript Page in English

HTML und Javascript

Hier möchte ich einige Tips und Java­scripts veröffent­lichen die ich sonst nir­gends gefun­den habe oder die ich aus anderen Gründen für wich­tig halte.

Bullshit by Design

Das ist meine Zusam­menfas­sung für Java­script.

Eine Program­mier­sprache, in der Vari­ablen we­der de­klariert noch typi­siert wer­den müs­sen ist ein Design­fehler.

Ich musste zum Glück noch nicht so viel in Java­script program­mieren aber ich bin schon in einige Fal­len getappt und habe Stun­den mit der Suche nach Fehlern verbracht, die es in einer 'ver­nünftigen' Sprache ein­fach nicht ge­geben hätte:

SI-Prefix

Als ich danach gesucht habe dachte ich, ich würde zig Sei­ten finden, die sich damit be­schäf­tigen aber ich konnte nicht eine mit nütz­lichem Inhalt finden. Komisch, nicht wahr? Hier nun ein klei­nes Java­script das es er­laubt, Ein­ga­ben mit SI-Pre­fixen vorzu­nehmen und das Aus­gaben in eben­solchen dar­stellt.
Es konver­tiert Eingaben wie 1k3, 1.2M oder sogar ver­gleichs­weise unsin­nige wie 1e6u in eine entspre­chende Java­script-Number und wandelt Numbers in eine geeig­nete SI-Schreib­weise.
Das Script ist keine be­son­ders hohe Program­mier­kunst aber wahn­sinnig nütz­lich und ich hoffe sie haben Freude daran. Wenn Sie einen Fehler darin fin­den oder eine Erwei­terung vor­schlagen möch­ten wäre ich Ihnen für eine kurze Nachricht dankbar!

Ich muss an dieser Stelle noch­mal darauf hin­weisen: Dieses Script hat für mich funk­tioniert, ich kann jedoch keine Ge­währ dafür über­nehmen, das es unter allen Um­stän­den und Ein­gabe­beding­ungen (User sind er­finderisch!) kor­rekte Werte liefert. Wenn Sie es be­nutzen tun sie dies auf eigene Ver­ant­wor­tung und ei­genes Risiko!

Ich verwende das Script aus­giebig in meinen Elek­tronik-Rechnern in denen es sich gut be­währt hat.

SSI, UTF und BOM

Ich verwende Server-Side-Includes um u.A. das Menü in meine Webseiten zu inte­grieren.
Nun habe ich Stunden damit zuge­bracht heraus­zu­finden, warum auf einem Teil meiner Seiten plötz­lich ein Zwi­schen­raum ober­halb des Logos erschien.

Des Rätsels Lösung: mein Lieb­lings­editor hat die Include-Datei als UTF mit BOM abge­speichert. Das Include er­zeugte des­halb einen Zeilen­umbruch vor dem Logo! Also, Datei geladen, Kodierung geändert auf UTF ohne BOM und es funkt­ionierte wie erwartet!

Sitemap.xml

Haben Sie sich auch schon mal darüber geär­gert, dass Google von Ihrer Site eine "Sitemap.xml"-Datei haben will? Wer hat sich diesen Schwach­sinn ausgedacht? Eine Site­map kann (und wird) sich Google anhand Ihrer internen Links selbst erstellen. Wenn Ihre Site tote Seiten enthält (die nicht von Ihrer Domain aus verlinkt sind) ist das Ihr Fehler. Selbst Xenu kann das.

Allerdings wird eine Sitemap in der jede einzelne Seite die Priority 0.8 hat wohl eher zur Abwer­tung führen. Das einzige Plus wäre, dass Sie aktiv Wertigkeiten Ihrer Seiten angeben können. Das hätte man problem­los auch mit einem Meta-Tag erreichen können, ohne den Zwang einer XML-Datei die, wenn sie nicht extrem sorg­fältig vorgehen, nie­mals den vollen Umfang Ihrer Seiten reflek­tieren oder auch nicht mehr exis­tierende Dateien enthalten wird (was ver­mutlich zur Abwertung führt).

Ich habe keine Sitemap eingereicht und werde das auch nicht tun. Das ist mir einfach zuviel Arbeit! Für mich ist es auch nicht wichtig, dass ich mit allen Mitteln möglichst an erster Stelle der Google-Treffer lande. Für die User, die von meiner Site profi­tieren könnten wäre es wichtig, aber nicht für mich. Wenn Sie einen Shop betrei­ben könnte das natür­lich anders aussehen. Dann viel Spaß mit der Sitemap.xml...

Mehrere H1 pro Seite

Warum nicht? Der Titel der Seite steht im Title-Tag. Warum also sollte es eine einzige h1 geben, die genauso lautet wie der Titel? Das ist Quatsch. Eine Html-Seite ist nicht not­wen­diger­weise ein Kapitel eines Buches, es ist eine Seite und eine Seite kann mehr als eine Über­schrift beinhalten (oder auch gar keine). Warum sollte ich ein Layout defi­nieren, in dem h2 genauso aussieht wie h1?

Es gibt Stimmen die behaupten, Yahoo (sowie Bing) würde Seiten mit mehreren h1 abwerten. Nun, die Treffer die ich von Yahoo oder Bing bekomme machen weniger als 1% aus so dass mir das wirk­lich ziemlich egal ist. Google scheint sich meiner Mei­nung anzu­schliessen :-)

Es mag sein, dass dies ein selbst­verstär­kender Vor­gang ist. Viel­leicht habe ich nur des­halb sowenig Yahoo-Treffer weil ich mehrere h1-Tags pro Seite habe. Aller­dings würde ich es nicht ris­kieren, 10% mehr Yahoo-Treffer zu be­kommen ohne sicher zu sein, damit nicht 10% Google-Treffer ein­zubüßen.

Nach meiner Erfahrung gibt es nur eine Such­maschine auf die ich meine Site op­ti­mie­ren muss. Den Namen kennen Sie. Alles Andere ist absolut bedeu­tungslos.

Web- und TTF-Font LCD 5x7

Für meine Eload-Seite war ein Zeichen­satz wün­schens­wert, der dem eines 5x7 Dis­plays mit einem HD44780 ent­spricht.

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ

Ich habe ihn kurzer­hand mit FontForge selbst erstellt und stelle ihn hier zum Download als TTF und als WOFF-Font zur Ver­fügung. Frei für jeg­liche Ver­wen­dung außer zum Ver­kauf. Pimpen Sie Ihre ge­druckte Do­kumen­tation oder Ihre Web­site, privat oder gewerb­lich, was Sie wollen, es ist frei!

Es würde mich freuen, wenn er für Sie nützlich wäre und ich wäre glücklich über eine Mitteilung, ob und wofür Sie ihn benutzen. Danke.

Ich habe mich bemüht, eine pixel­genaue Wieder­gabe des HD44780 zu er­reichen. Aller­dings sind die Zeichen ober­halb 127 nicht im­plemen­tiert. Dafür habe ich einige Zei­chen einge­fügt, die ich als Soft-Characters in meinen Pro­jekten ver­wende:

ZeichenPositionHTML
Antenne161 (0xa1)¡
µ181 (oxb5)µ
Ω937 (0x3a9)Ω

Die eingestellte Größe kann erheblichen Einfluss auf die visuelle Darstellungs­qualität des Fonts haben, speziell bei Geräten mit begrenzter physikalischer Auflösung wie man es bei Webseiten findet. Ändern Sie die Größe um einige Prozent um ein besseres User-Erlebnis zu erreichen.