Forensis Virtualis: HTML
Posts mit dem Label HTML werden angezeigt. Alle Posts anzeigen
Posts mit dem Label HTML werden angezeigt. Alle Posts anzeigen

Montag, 5. November 2018

Blog Schriftarten / Web Fonts

Es gehen neue Internetprojekte an den Start. Und wieder steht man vor der Qual der Wahl bei den Webfonts, denn die Lesbarkeit ist einer der wesentlichen Faktoren für den Erfolg, gerade bei textlastigen Projekten.

Trotz aller "Web 2.0" Entwicklung scheinen immer noch dieselben Schriften vorrangig zu sein:

>> Auf der sicheren Seite ist man mit den Web Core Fonts von Microsoft. Diese sind auf 98-99% aller Windows- und Mac-Rechner installiert. Dazu gehören Arial, Courier New, Verdana, Times New Roman, Trebuchet MS, Impact, Comic Sans und Georgia.<<


Mehr hier:
https://www.webmasterpro.de/design/news/2009/02/02/verbreitung-von-schriftarten-im-web.html
https://www.maplemoonwebdesign.com/best-font-to-use-for-your-blog/

So richtig neue Versionen von 2018 gibt es dazu gar nicht - es bleibt also alles eigentlich "beim Alten".

Grundsätzliche Empfehlung: serifenlose Schriften für den Fliesstext, denn >> Sans Serif fonts do not have the little hooks or serifs on the end of the letters. These will display clearer, crisper and bolder on most monitor resolutions. This makes them easier to read and thus, the perfect choice for your blog.<<

Das spiegelt sich in einer anderen Statistik wider, die die Schriftarten der erfolgreichsten Blogs analysiert:

Lucida Sans 100.0%
Tahoma 99.95%
Arial 99.85%
Verdana 99.85%
Microsoft Sans Serif 99.80%
Courier New 99.75%
Times New Roman 99.70%
Trebuchet MS 99.70%
Comic Sans MS 99.46%
Georgia 99.12%

Na, dann wollen wir mal eine hübsche Schriftkombi aussuchen gehen (nicht für dieses Blog, aber für die neuen Projekte)



Montag, 15. Oktober 2018

Kartenausschnitte

Braucht jemand eine Karte für Blog oder Webseite?

Natürlich gibt's da was von Google:

https://www.google.com/maps
Menü > Meine Orte > Karten > Karte erstellen

Eventuell funktioniert auch der direkte Link (ich bin mir nicht sicher):
https://www.google.com/maps/d/u/0/edit?hl=de&hl=de&mid=1Fa-20v3AX4MSVSM8qJcF6PPU-2Epplgj&ll=51.04816036506509%2C10.4515265&z=6

Dann solange rumspielen, bis die Wunschkarte erstellt ist.
Wenn fertig, auf "Teilen" klicken > Zugriff: "öffentlich".

Unter den drei Punkten steht der Kartenname, dort findet man auch die Option "In meine Website einbinden". HTML Code schnappen, in Blog oder Webseite kopieren, fertig.

Alternativen

Wer lieber auf open source statt Kommerz zurückgreift, mag vielleicht das hier lieber (bei Wordpress ist das angeblich sogar bereits integriert, muss ich noch testen):

https://leafletjs.com/examples/quick-start/

LOL - ich sehe gerade, hier finden sich bereits perfekte Beschreibungen:
https://www.katzentante.at/karten-blog-posts-einfugen/

Weitere Alternativen:
https://de.batchgeo.com/features/embedded/
http://mapsblog.de/spezielle-online-maps/reiseblog-karten-speichern/
https://blog.outdooractive.com/2012/07/25/einbindung-von-karten-in-eigene-webseiten/

Mittwoch, 10. Oktober 2018

HTML für klick/klappbare Seitenleiste

Ich aktualisiere gerade das Blog, dabei fallen einige alte Inhalte weg. Hier möchte ich allerdings ein Script aufbewahren, dass immer recht nett war: eine aufklappbare Seitenleiste mit "Untermenüs", also ein klappbare Linkliste für die Blogspot-Blogs. Einfach im Layout/Design einen HTML Block einsetzen, und dieses Script verwenden (die Link-Inhalte natürlich individuell anpassen):




<style type="text/css"><!--
 .subm {padding-left:3px;}
//--></style>

<script language="JavaScript" type="text/javascript"><!--
function show(start,ende) { if(document.getElementById) {
  if(document.getElementById("subm"+start).style.display == 'inline') { hide(start,ende); }
  else { for(i=start; i<ende+1; i++) { document.getElementById('subm'+i).style.display = 'inline'; } } } }
function hide(start,ende) { 
  if(document.getElementById('subm'+start).style.display == 'none') { show(start,ende); }
  else { for(i=start; i<ende+1; i++) { document.getElementById('subm'+i).style.display = 'none'; } } }
--></script>

<b><a href="javascript:hide(101,107);">ר Friends & Projects</a></b><br/>
<div id="subm101" style="display:none"><div class="subm"><a href="http://www.debiler-leben.de.gg/">♥ debiler-leben.de.gg</a></div></div>
<div id="subm102" style="display:none"><div class="subm"><a href="http://kassandra-irrealewelt.blogspot.com/">♥ Kassandra's Irreale Welt</a></div></div>  
<div id="subm103" style="display:none"><div class="subm"><a href="http://www.momentos-sinceros.de.gg/">♥ Momentos Sinceros</a></div></div>  
<div id="subm104" style="display:none"><div class="subm"><a href="http://prinzgoliath.blogspot.com/">♥ Prinz Goliath</a></div></div>  
<div id="subm105" style="display:none"><div class="subm"><a href="http://nilsisblog.blogspot.com/">♥ Nilsi's Blog</a></div></div>  
<div id="subm106" style="display:none"><div class="subm"><a href="http://www.wir-in-guetersloh.de.gg/">♥ Wir in GT</a></div></div>  
<div id="subm107" style="display:none"><div class="subm"><a href="http://schoen-heits-farm.blogspot.com/">♥ schoen-heits-farm</a></div></div>  

<!-- ####### -->

<b><a href="javascript:hide(201,299);">ר Photo & Video</a></b><br/>
<div id="subm201" style="display:none"><div class="subm"><a href="http://www.youtube.com/profile_play_list?user=forentube">Φ youtube: forentube</a></div></div>
<div id="subm202" style="display:none"><div class="subm"><a href="http://picasaweb.google.com/forengeist">Φ picasa: forengeist</a></div></div>  
<div id="subm203" style="display:none"><div class="subm"><a href="http://de.sevenload.com/mitglieder/wir-in-gt">Φ sevenload: wiringt</a></div></div>  
<div id="subm204" style="display:none"><div class="subm"><a href="http://www.flickr.com/photos/baer_chi/">Φ flickr: baer_chi</a></div></div>  
<div id="subm205" style="display:none"><div class="subm"><a href="http://www.flickr.com/photos/baerchn/">Φ flickr: baerchn</a></div></div>  
<div id="subm206" style="display:none"><div class="subm"><a href="http://www.fotocommunity.de/pc/pc/mypics/844487">Φ Kassi's FotoCommunity</a></div></div>  
<div id="subm207" style="display:none"><div class="subm"><a href="http://shop.posterxxl.com/cgi-bin/xps_shop_poster.cgi?xps=0711261404">Φ KassaForens Poster</a></div></div>  
<div id="subm250" style="display:none"><div class="subm"><hr/></div></div>  
<div id="subm251" style="display:none"><div class="subm"><a href="http://www.flickr.com/badge.gne">- flickr badge</a></div></div>  
<div id="subm252" style="display:none"><div class="subm"><a href="http://www.picnik.com">- picnik.com</a></div></div>  
<div id="subm253" style="display:none"><div class="subm"><a href="http://www.fotoflexer.com">- fotoflexer</a></div></div>  
<div id="subm254" style="display:none"><div class="subm"><a href="http://www.slide.com">- slide.com</a></div></div>  
<div id="subm255" style="display:none"><div class="subm"><a href="http://www.save.tv">- save.tv</a></div></div>  

<!-- ####### -->

<b><a href="javascript:hide(301,315);">ר Online Office</a></b><br/>
<div id="subm301" style="display:none"><div class="subm"><a href="http://www.google.de/ig?hl=de">> I-Google</a></div></div>
<div id="subm302" style="display:none"><div class="subm"><a href="http://mail.google.com/mail">>> Google Mail</a></div></div>
<div id="subm303" style="display:none"><div class="subm"><a href="http://www.google.com/calendar">>> Google Kalender</a></div></div>
<div id="subm304" style="display:none"><div class="subm"><a href="http://www.google.com/reader/">>> Google Reader</a></div></div>
<div id="subm305" style="display:none"><div class="subm"><a href="https://webmailcluster.1und1.de/">>> 1&1 WebMail</a></div></div>

<div id="subm306" style="display:none"><div class="subm"><a href="http://www.facebook.com">> facebook.com</a></div></div>
<div id="subm307" style="display:none"><div class="subm"><a href="http://www.gmx.de">> gmx.de</a></div></div>
<div id="subm308" style="display:none"><div class="subm"><a href="http://www.web.de">> web.de</a></div></div>
<div id="subm309" style="display:none"><div class="subm"><a href="http://www.freenet.de">> freenet</a></div></div>
<div id="subm310" style="display:none"><div class="subm"><a href="http://www.yahoo.de">> yahoo</a></div></div>

<div id="subm311" style="display:none"><div style="padding-top:3px;" class="subm"><a href="http://www.eBuddy.com">> Msg eBuddy</a></div></div>
<div id="subm312" style="display:none"><div class="subm"><a href="http://www.meebo.com">> Msg meebo</a></div></div>

<div id="subm313" style="display:none"><div class="subm"><a href="http://www.pfingo.com">> Tel & Msg. pfingo.com</a></div></div>
<div id="subm314" style="display:none"><div class="subm"><a href="http://www.debitel-light.de">> Tel debitel-light.de</a></div></div>
<div id="subm315" style="display:none"><div class="subm"><a href="http://www.blau.de">> Tel blau.de</a></div></div>


<!-- ####### -->

<b><a href="javascript:hide(401,407);">ר WebTools & Scripts</a></b><br/>
<div id="subm401" style="display:none"><div class="subm"><a href="http://de.wikipedia.org/wiki/Benutzer:1001/Sonderzeichen_und_Entit%C3%A4ten">Ξ 1000 Sonderzeichen</a></div></div>
<div id="subm402" style="display:none"><div class="subm"><a href="http://www.opinionatedgeek.com/DotNet/Tools/HTMLEncode/Encode.aspx">Ξ HTML Encoder</a></div></div>
<div id="subm403" style="display:none"><div class="subm"><a href="http://www.bitteklickensiehier.de/webseiten/_blogstuff/forengeist/media-converter.html">Ξ Media Converter</a></div></div>
<div id="subm404" style="display:none"><div class="subm"><a href="http://www.feeddigest.com/">Ξ FeedDigestl</a></div></div>
<div id="subm405" style="display:none"><div class="subm"><a href="http://www.drawanywhere.com/">Ξ DrawAnyWhere</a></div></div>
<div id="subm406" style="display:none"><div class="subm"><a href="http://docx-converter.com/">Ξ DocXConverter</a></div></div>
<div id="subm407" style="display:none"><div class="subm"><a href="http://www.tinyurl.com">Ξ TinyUrl</a></div></div>

<!-- ####### -->

<b><a href="javascript:hide(501,505);">ר Suchen & Nachgucken</a></b><br/>
<div id="subm501" style="display:none"><div class="subm"><a href="http://www.dasoertliche.de/e">> Tel: DasOertliche</a></div></div>
<div id="subm502" style="display:none"><div class="subm"><a href="http://www.11880.com/">> Tel: 11880</a></div></div>
<div id="subm503" style="display:none"><div class="subm"><a href="http://dict.leo.org">> D/E Wörterbuch</a></div></div>
<div id="subm504" style="display:none"><div class="subm"><a href="http://books.google.com/books?hl=de">> Google Books</a></div></div>
<div id="subm505" style="display:none"><div class="subm"><a href="http://www.postleitzahl.org/">> postleitzahl.org</a></div></div>

<!-- ####### -->

<b><a href="javascript:hide(601,611);">ר Musik & Radio</a></b><br/>
<div id="subm601" style="display:none"><div class="subm"><a href="http://www.bitteklickensiehier.de/webseiten/_blogstuff/forengeist/ringtones/">Ω Ringtones</a></div></div>   
<div id="subm602" style="display:none"><div class="subm"><a href="http://yp.shoutcast.com/directory/index.phtml">Ω Radios: shoutcast.com</a></div></div>
<div id="subm603" style="display:none"><div class="subm"><a href="http://www.ndr2.de/pages_special_lib/0,3322,SPM9296,00.html">Ω Radio GT</a></div></div>
<div id="subm604" style="display:none"><div class="subm"><a href="http://www1.ndr2.de/pages_special_lib/0,3322,SPM7078,00.html">Ω Radio NDR2</a></div></div>  
<div id="subm605" style="display:none"><div class="subm"><a href="http://www.wdr.de/radio/wdr2/musik/playlist.phtml">Ω Radio WDR2</a></div></div>  
<div id="subm606" style="display:none"><div class="subm"><a href="http://www.starlight-media.de/radioefr/">Ω Radio EFR</a></div></div>  
<div id="subm607" style="display:none"><div class="subm"><a href="http://www.rmnradio.de/index2.html">Ω Radio RMN</a></div></div>  
<div id="subm608" style="display:none"><div class="subm"><a href="http://www.phonostar.de/">Ω phonostar.de</a></div></div>  
<div id="subm609" style="display:none"><div class="subm"><a href="http://www.mpex.net/">Ω mpex.net</a></div></div>  
<div id="subm610" style="display:none"><div class="subm"><a href="http://www.musopen.com/music.html">Ω musopen.com</a></div></div>   
<div id="subm611" style="display:none"><div class="subm"><a href="http://www.laut.de/">Ω laut.de</a></div></div>   

<!-- ####### -->

<b><a href="javascript:hide(701,705);">ר Bookmarks</a></b><br/>
<div id="subm701" style="display:none"><div class="subm"><a href="http://www.google.com/bookmarks/">> Google Bookmarks</a></div></div>
<div id="subm702" style="display:none"><div class="subm"><a href="http://my.foxmarks.com/">> foxmarks.com</a></div></div>  
<div id="subm703" style="display:none"><div class="subm"><a href="http://terese.linkarena.com/linklist">> linkarena</a></div></div>  
<div id="subm704" style="display:none"><div class="subm"><a href="http://www.mister-wong.de/user/Forengeist/">> mister-wong.de</a></div></div>  
<div id="subm705" style="display:none"><div class="subm"><a href="http://del.icio.us/forengeist?setcount=50">> del.icio.us</a></div></div>