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­li­chen die ich sonst nir­gends gefun­den habe oder die ich aus an­de­ren Grün­den für wich­tig halte.

HTTP ist unsicher

(?) Frage­zeichen! Google be­haup­tet das. Ja, HTTP ist un­si­cher wenn Sie über ei­ne Seite Pass­wör­ter oder per­sön­liche Da­ten ein­ge­ben und je­mand ge­nug In­teres­se da­ran hat um ei­nen nicht un­er­heb­lichen Auf­wand dafür zu trei­ben. Dies trifft auf meine Site (und un­zählige an­dere) nicht zu. Sie ent­hält In­for­ma­tio­nen, die ich bewusst öf­fent­lich ge­macht habe, die po­li­tisch und recht­lich in wohl je­dem Land der Welt un­be­denk­lich sind, nicht mit per­so­nen­be­zo­ge­nen Da­ten ar­bei­tet und ich wüsste auch nicht, was je­mand davon hät­te mit­zu­le­sen, wie sein Nach­bar oder eine andere $PERSON_OF_INTEREST sich durch mei­ne Site klickt. Dass er es tut kann er auch wenn ich HTTPS ver­wen­de se­hen. Le­dig­lich welche Sei­ten ge­nau und even­tuel­le Einga­ben kann er dann nicht mit­lesen. Aber selbst wel­che Sei­ten sie ab­ru­fen kann er an­hand der über­tra­ge­nen Da­ten­men­ge ziem­lich si­cher er­mit­teln.

Google Chrome wird mei­ne Site ab Juli 2018 als un­si­cher mar­kieren. Ich hoste mei­ne Site kos­ten­los auf mei­nem 1&1-Account, bei dem SSL (und da­mit HTTPS) lei­der nicht mög­lich ist. Ich ver­die­ne damit kei­nen Cent und bin ent­spre­chend auch nicht be­reit, für ei­nen HTTPS-Ser­ver und das ent­sprechende Zer­tifi­kat zu zah­len (und na­tür­lich auch nicht für ent­spre­chen­de Google-An­zei­gen). Wenn Google (der ja Bu­si­ness-orien­tiert denkt) nun mei­ne Site mit die­sem Schein­ar­gu­ment ab­wer­tet wird sie wohl ir­gend­wann ver­schwin­den. Mir scha­det das nicht (ob­wohl es mir na­tür­lich leid tun wür­de), aber den Leu­ten, die von mei­ner Site pro­fi­tie­ren könn­ten. So wird frei­es Wis­sen und Open Source, si­cher­lich nicht nur auf mei­ner Site ver­nich­tet. Nun, tat­säch­lich wird es nicht ver­nich­tet, es ist im­mer noch da, aber Google kann be­wir­ken, dass es wirk­lich schwer zu fin­den ist! Sehr scha­de, aber Geld re­giert be­kannt­lich die Welt! Leu­te wie ich zah­len ja schließ­lich auch nicht für An­zei­gen bei Google und so passe ich nicht in sein Inter­net.

So wer­den tau­sen­de Sites als un­si­cher mar­kiert ob­wohl von ih­nen kei­ne Ge­fahr aus­geht. Das wird letzt­lich dazu führen, dass User das un­si­cher ein­fach igno­rie­ren und so auf tat­säch­lich un­si­che­re Sei­ten he­rein­fal­len wer­den. Wem ist damit ge­hol­fen? Google hat si­cher­lich eine Ant­wort... Ver­mut­lich ist es ein­fach nur Google!

Bullshit by Design

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

Eine Program­mier­sprache, in der Vari­ablen we­der de­kla­riert noch typi­siert wer­den müs­sen ist ein De­sign­feh­ler.

Ich musste zum Glück noch nicht so viel in Java­script pro­gram­mie­ren aber ich bin schon in ei­nige Fal­len getappt und habe Stun­den mit der Suche nach Feh­lern ver­bracht, die es in ei­ner ver­nünf­ti­gen Spra­che ein­fach nicht ge­geben hät­te:

Seit ECMA5, dass 2008 erschien, gibt es zumindest die Möglichkeit durch use strict zumindest den zweiten Punkt zu eliminieren. Na ja, besser spät als nie aber Windows XP ist auch heute noch nicht tot. Schließlich ist es ja auch für mich das beste Windows aller Zeiten! Sie würden es nicht glauben, wieviele Zugriffe ich auch heute noch von XP-Rechnern erhalte...

SI-Prefix

Als ich danach ge­sucht ha­be dachte ich, ich wür­de zig Sei­ten fin­den, die sich da­mit be­schäf­tigen aber ich konn­te nicht ei­ne mit nütz­li­chem In­halt fin­den. Ko­misch, nicht wahr? Hier nun ein klei­nes Java­script das es er­laubt, Ein­ga­ben mit SI-Pre­fixen vorzu­neh­men 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 wan­delt Numbers in ei­ne geeig­nete SI-Schreib­weise.
Das Script ist keine be­son­ders hohe Pro­gram­mier­kunst aber wahn­sinnig nütz­lich und ich hoffe sie haben Freu­de da­ran. Wenn Sie einen Feh­ler da­rin fin­den oder eine Er­wei­terung vor­schla­gen möch­ten wäre ich Ihnen für eine kur­ze Nach­richt dankbar!

Ich muss an dieser Stel­le noch­mal darauf hin­weisen: Die­ses Script hat für mich funk­tio­niert, ich kann je­doch keine Ge­währ dafür über­neh­men, das es unter al­len Um­stän­den und Ein­gabe­beding­ungen (User sind er­finderisch!) kor­rekte Wer­te lie­fert. Wenn Sie es be­nutzen tun sie dies auf ei­gene Ver­ant­wor­tung und ei­ge­nes Ri­si­ko!

Ich ver­wende das Script aus­giebig in mei­nen Elek­tronik-Rech­nern in denen es sich gut be­währt hat.

SSI, UTF und BOM

Ich ver­wen­de Server-Side-In­clu­des um u.A. das Menü in mei­ne Web­seiten zu inte­grieren.
Nun habe ich Stunden damit zuge­bracht heraus­zu­finden, wa­rum auf ei­nem Teil meiner Seiten plötz­lich ein Zwi­schen­raum ober­halb des Lo­gos er­schien.

Des Rätsels Lösung: mein Lieb­lings­edi­tor hat die Include-Datei als UTF mit BOM abge­speichert. Das Include er­zeugte des­halb einen Zeilen­um­bruch vor dem Logo! Al­so, Da­tei ge­la­den, Ko­dierung ge­än­dert auf UTF ohne BOM und es funk­tio­nier­te wie er­war­tet!

Sitemap.xml

Haben Sie sich auch schon mal darüber geär­gert, dass Google von Ihrer Site eine Sitemap.xml-Da­tei ha­ben will? Wer hat sich die­sen Schwach­sinn aus­ge­dacht? Eine Site­map kann (und wird) sich Google an­hand Ihrer in­ternen Links selbst er­stel­len. Wenn Ihre Site tote Seiten en­thält (die nicht von Ihrer Domain aus ver­linkt sind) ist das Ihr Feh­ler. Selbst Xenu kann das.

Allerdings wird eine Site­map in der je­de ein­zel­ne Sei­te die Pri­ority 0.8 hat wohl eher zur Ab­wer­tung füh­ren. Das einzige Plus wäre, dass Sie ak­tiv Wer­tig­kei­ten Ihrer Sei­ten an­geben kön­nen. Das hätte man pro­blem­los auch mit ei­nem Meta-Tag er­rei­chen kön­nen, ohne den Zwang einer XML-Da­tei die, wenn sie nicht ex­trem sorg­fäl­tig vorgehen, nie­mals den vol­len Um­fang Ihrer Sei­ten re­flek­tie­ren oder auch nicht mehr exis­tierende Da­tei­en ent­hal­ten wird (was ver­mutlich zur Ab­wer­tung 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 Mit­teln mög­lichst an erster Stel­le der Google-Tref­fer lan­de. Für die User, die von mei­ner Site profi­tieren könn­ten wä­re es wich­tig, aber nicht für mich. Wenn Sie einen Shop betrei­ben könn­te das natür­lich anders aus­se­hen. Dann viel Spaß mit der Sitemap.xml...

Mehrere H1 pro Seite

Warum nicht? Der Titel der Sei­te steht im Title-Tag. Wa­rum al­so soll­te es ei­ne ein­zige h1 geben, die ge­nau­so lautet wie der Titel? Das ist Quatsch. Eine Html-Seite ist nicht not­wen­diger­weise ein Kapitel eines Buches, es ist eine Sei­te und eine Sei­te kann mehr als eine Über­schrift be­in­hal­ten (oder auch gar kei­ne). Warum soll­te ich ein Lay­out defi­nieren, in dem h2 ge­nau­so aus­sieht wie h1?

Es gibt Stimmen die behaupten, Yahoo (sowie Bing) würde Seiten mit mehreren h1 ab­wer­ten. Nun, die Treffer die ich von Yahoo oder Bing be­komme ma­chen we­niger 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 so­we­nig Yahoo-Treffer weil ich mehrere h1-Tags pro Seite ha­be. Aller­dings würde ich es nicht ris­kieren, 10% mehr Yahoo-Treffer zu be­kom­men ohne sicher zu sein, damit nicht 10% Google-Treffer ein­zubüßen.

Nach meiner Er­fah­rung gibt es nur eine Such­maschine auf die ich mei­ne Site op­ti­mie­ren muss. Den Na­men ken­nen Sie. Alles An­dere ist ab­solut bedeu­tungs­los.

Tooltips

Ich habe viele tolle CSS-Codes gefunden, die hübsche Tooltips er­zeu­gen, aber nicht ein ein­ziges, das auch funk­tio­niert wenn das Ele­ment ganz links oder ganz rechts er­scheint. Stets wurde der Tooltip nicht voll­stän­dig an­ge­zeigt son­dern links oder rechts ab­ge­schnit­ten. Die ein­zige mir naheliegende Methode ist ein simpler <span> mit einem Title-Tag der dann im Tooltip erscheint. Der Brow­ser zeigt ihn stets kom­plett an, nicht in ei­nem Lay­out, das mir ent­spricht, aber es funk­tio­niert im­mer! So ein­fach und so funk­tion­al. Spa­ren Sie sich den Är­ger ir­gend­et­was an­der­es zu ver­su­chen!

Automatische Silbentrennung

... schön wär's! Im Open-Source-En­vi­ron­ment hat sich aspell weit­ge­hend durch­ge­setzt. Sei­ne Trenn­vor­schlä­ge dürf­ten je­doch ein Haupt­quell von Dep­pen­leer­zei­chen im Deut­schen sein. Wäh­rend die Sil­ben­tren­nung im Eng­li­schen ganz gut funk­tio­niert lässt sie sich im Deut­schen nicht so ein­fach au­to­ma­ti­sie­ren. Kennt aspell ein zu­sam­men­ge­setz­tes Wort nicht, schlägt es ein­fach vor, es ge­trennt zu schrei­ben. Und es kennt viele Worte nicht! Und schon haben Sie in 90% der Fälle ein Dep­pen­leer­zei­chen!

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 kur­zer­hand mit FontForge selbst er­stellt und stel­le ihn hier zum Down­load 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 wol­len, es ist frei!

Es würde mich freu­en, wenn er für Sie nütz­lich wä­re und ich wä­re glück­lich über ei­ne Mit­tei­lung, ob und wo­für Sie ihn benut­zen. Danke.

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

ZeichenPositionHTML
Antenne161 (0xa1)&iexcl;
µ181 (0xb5)&micro;
Ω937 (0x3a9)&Omega;

Die ein­ge­stell­te Größe kann er­heb­li­chen Ein­fluss auf die vi­su­elle Dar­stel­lungs­qua­li­tät des Fonts ha­ben, spe­ziell bei Ge­rä­ten mit be­grenz­ter phy­si­ka­li­scher Auf­lösung wie man es bei Web­sei­ten fin­det. Än­dern Sie die Größe um ei­nige Pro­zent um ein bes­seres User-Er­leb­nis zu er­rei­chen.

Web- und TTF-Font LED/LCD 7-Segment

Im Rah­men meines Di­gi­tal-Waage-Pro­jekts war ein Font wün­schens­wert, der die Dar­stel­lung auf der Sie­ben­seg­ment-An­zeige re­alis­tisch wie­der­gibt.

Da ich einen sol­chen nicht im Netz ge­fun­den ha­be, bie­te ich auch mei­ne selbst er­stell­te Ver­sion zum Down­load als TTF oder WOFF an.

Darstellungsbeispiel:
rE5Et. CLEAr. don't touch. 5YNC. 1234567890. YE5. no. N0. N0. Abort. 51-23=28.

Auch hier, frei für je­gli­che Ver­wen­dung außer zum Ver­kauf!

Na­tür­lich kön­nen Sie auch hier Vor­der­grund- und Hin­ter­grund­farbe nach Ih­ren Wün­schen an­pas­sen, bei­spiels­wei­se für ein LCD:
rE5Et. CLEAr. don't touch. 5YNC. 1234567890. YE5. no. N0. N0. Abort. 51-23=28.

Sehen Sie hier die re­ali­sier­ten Zei­chen.

Hin­weis: Dies ist kein voll­wer­tiger Schreib­font! Er ent­hält nur Zei­chen die mit ei­nem Sie­ben­seg­ment-Dis­play dar­stell­bar sind, also z.B. ein großes A aber kein klei­nes, ein klei­nes b aber kein großes, eine ge­schlos­sene ecki­ge Klam­mer aber keine of­fe­ne (die ge­nau­so aus­se­hen wür­de wie das große C). Na­tür­lich ent­hält er auch kein x, w oder v, da die­se Zei­chen mit sie­ben Seg­men­ten nicht dar­stell­bar sind. Für ein großes "O" müs­sen sie ei­ne Zif­fer 0 neh­men, für ein großes I eine Zif­fer 1. Sie­ben­seg­ment halt. Mehr geht nicht. Damit kön­nen Sie aber auch Ihr Sie­ben­seg­ment-Dis­play im Vor­ab recht gut aus­tes­ten!

Auch hier gilt: durch die har­ten Gren­zen des Fonts kann die Dar­stel­lungs­größe er­heb­li­chen Ein­fluß auf den sicht­baren Ein­druck be­wir­ken. Wäh­len Sie ggf. den Font ei­ni­ge Pro­zent größer oder klei­ner um ein bes­se­res User-Er­leb­nis zu er­rei­chen!