{"id":5292,"date":"2013-01-20T12:28:42","date_gmt":"2013-01-20T10:28:42","guid":{"rendered":"http:\/\/www.nerd-o-mania.de\/wordpress\/?p=5292"},"modified":"2017-03-15T23:14:37","modified_gmt":"2017-03-15T22:14:37","slug":"mensch-mach-doch-mal-schicker","status":"publish","type":"post","link":"https:\/\/www.nerd-o-mania.de\/wordpress\/2013\/01\/mensch-mach-doch-mal-schicker\/","title":{"rendered":"&ldquo;Mensch, mach doch mal schicker&rdquo;.."},"content":{"rendered":"<p><span style=\"font-family: rock salt;\"><strong><span style=\"color: #a5a5a5;\">..oder: kennen Sie eigentlich CUFON?<\/span><\/strong><\/span><\/p>\n<p align=\"justify\">Alter Mediziner Witz: Was ist das Tier mit der k\u00fcrzesten Lebenserwartung? Das Kliestier \u2013 es macht \u201cPffft\u201d und ist im Arsch\u2026<\/p>\n<p align=\"justify\">Apropos kurze Lebendauer: Eine der schnelllebigsten Branchen ist die IT oder Informationstechnologie) \u2013 dies wissen alle, die in diesem Umfeld t\u00e4tig sind. Keine Woche vergeht, in der nicht eine neue noch bessere, schnellere Hardware vorgestellt wird, andere Datenprotokolle, neue Software mit mehr Funktionen, usw. und so fort..<\/p>\n<p align=\"justify\">Auch das Internet entwickelt sich weiter. Aus dem in den 60er Jahren entwickeltem, alten Arpanet mit der Daten\u00fcbertragungsrate einer fu\u00dfkranken\u00a0 Schnecke, reiner Text\u00fcbertragung und nur im Hochschulbereich von Superintelligenzen genutzt, wurde das superschnelle f\u00fcr jeden Hilfsschulabg\u00e4nger st\u00e4ndig verf\u00fcgbare, kunterbunte, Werbem\u00fcll und Katzenbildchen\u00fcberladene Internet mit Facebook und Co.<\/p>\n<p align=\"justify\">Trotzdem gibt es einige Dinge, die sich aus Gr\u00fcnden der Kompatibilit\u00e4t nicht \u00e4ndern. So basieren die heutigen PCs immer noch auf der <a title=\"Von-Neumann-Rechner\" href=\"http:\/\/de.wikipedia.org\/wiki\/Von-Neumann-Architektur\" target=\"_blank\" rel=\"noopener\">Von-Neumann-Architektur<\/a> aus den sp\u00e4ten 40er Jahren \u2013 mit dem damit verbundenen <a title=\"Von-Neumann-Flaschenhals\" href=\"http:\/\/de.wikipedia.org\/wiki\/Von-Neumann-Architektur#Von-Neumann-Flaschenhals\" target=\"_blank\" rel=\"noopener\">Von-Neumann-Flaschenhals<\/a>.<\/p>\n<p align=\"justify\">Auch das Internet \u2013 obwohl immer bunter, animierter und mit Web 2.0 interaktiver, hat einige Altlasten, die es mit sich rumschleift \u2013 ohne Sicht auf Besserung.<\/p>\n<p align=\"justify\">Dazu geh\u00f6rt zum Beispiel die Darstellung der Schriften auf Webseiten. Grade mal ein Dutzend Schriftarten stehen zur Verf\u00fcgung, da man aus Gr\u00fcnden der Kompatibilit\u00e4t zwischen Unix und Windows nur bestimmte Schriften (auch Fonts genannt) zur Auswahl hatte. Ein weiterer Punkt: Die Schriftart musste auf dem Rechner des\u00a0 Webseitenbesuchers installiert sein, da sonst automatisch eine Standard Schriftart genommen wurde und das mit viel Liebe erstellte Layout bei dem Besucher gelinde gesagt besch\u2026. aussah..<\/p>\n<p align=\"justify\">Einige Leser werden jetzt nat\u00fcrlich fragen: \u201cwieso denn noch mehr Schriften? Die Standardschriften reichen doch..\u201d \u2013 aber wer so was fragt, wird bestimmt auch einen Liebesbrief mit dem Font \u201cRockwell\u201d schreiben.<\/p>\n<p align=\"justify\">Denn Schriften sind einfach ein wichtiges Styling-Element. Sie transportieren Stimmungen. Setzen Akzente, machen die Webseite oder den Blog zu etwas ganz pers\u00f6nlichem mit hohem Wiedererkennungswert..<\/p>\n<p align=\"justify\">Vor ca. 10 Jahren versuchte Microsoft mit speziell eingebetteten Fonts, die dann auf dem Server der Webseite lagen und beim betrachten der Seite tempor\u00e4r installiert wurden, ein bisschen Abwechslung in die fest in Arial, Times, Verdana gemei\u00dfelten Webseiten zu bringen. Ohne Erfolg. Das Projekt verschwand kaum dass es aus der Wiege gehoben war. Das Tool daf\u00fcr hei\u00dft WEFT, findet sich immer noch zum Download auf der Microsoft\u00a0 Seite, stammt aus dem Jahr 2003 und so sieht es auch aus..<\/p>\n<p style=\"text-align: center;\" align=\"justify\"><a href=\"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2013\/01\/microsoft-WEFT.png\"><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-5288 aligncenter\" style=\"width: 303px; height: 306px;\" alt=\"microsoft-WEFT.png\" src=\"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2013\/01\/microsoft-WEFT.png\" width=\"365\" height=\"364\" title=\"\" srcset=\"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2013\/01\/microsoft-WEFT.png 609w, https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2013\/01\/microsoft-WEFT-241x240.png 241w, https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2013\/01\/microsoft-WEFT-301x300.png 301w, https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2013\/01\/microsoft-WEFT-500x498.png 500w, https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2013\/01\/microsoft-WEFT-100x100.png 100w, https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2013\/01\/microsoft-WEFT-66x66.png 66w, https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2013\/01\/microsoft-WEFT-200x199.png 200w, https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2013\/01\/microsoft-WEFT-400x399.png 400w, https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2013\/01\/microsoft-WEFT-600x598.png 600w\" sizes=\"auto, (max-width: 365px) 100vw, 365px\" \/><\/a><\/p>\n<p align=\"justify\"><em>(Spinnweben abwischen und mal gucken? Stammt aus dem Jahr 2003 und riecht auch schon wie tote Katze. Das Microsoft WEFT- Tool. Auch ein Ansatz mal das Internet etwas aufzuh\u00fcbschen..)<\/em><\/p>\n<p align=\"justify\">Seit Jahren gibt es unterschiedliche Ans\u00e4tze, mehr Schriftarten zur Verf\u00fcgung zu stellen. WordPress Benutzer kennen wahrscheinlich das Type-Kit, welches Matt Mullenweg Ihnen anbietet \u2013 gegen entsprechenden Obolus nat\u00fcrlich.<\/p>\n<p align=\"justify\">Leider ist bei Blogs, die bei WordPress.com gehostet werden nicht viel zu machen, au\u00dfer mit den Z\u00e4hnen zu knirschen und jedes Jahr 30 bis 90 $ zu zahlen, wenn man es schick haben will.<\/p>\n<p align=\"justify\">Die selbst gehosteten Blogs bieten aber wesentlich mehr M\u00f6glichkeiten, da man hier sowohl in der Wahl der zu installierenden Plugins, wie auch beim werkeln im Quelltext v\u00f6llig Herr \u00fcber den Blog ist.<\/p>\n<p align=\"justify\">Und jetzt wird\u2019s interessant, denn es gibt mehrere interessante Ans\u00e4tze, wie man coole Schriften verwendet, die dazu dann auch auf allen Ger\u00e4ten angezeigt werden.<\/p>\n<p align=\"justify\">Verabschieden k\u00f6nnen wir uns von der alten Methode in einem Bildbearbeitungsprogramm wie Photoshop (zur Not tut\u2019s nat\u00fcrlich auch Paint) eine Grafik mit der entsprechenden Hintergrundfarbe der Webseite zu erstellen, und dann dort einen Text mit der nicht Systemkompatiblen Schriftart zu erstellen.<\/p>\n<p style=\"text-align: center;\" align=\"justify\"><a href=\"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2013\/01\/Beispieltext.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-5290 aligncenter\" alt=\"Beispieltext.jpg\" src=\"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2013\/01\/Beispieltext.jpg\" width=\"187\" height=\"20\" title=\"\" srcset=\"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2013\/01\/Beispieltext.jpg 312w, https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2013\/01\/Beispieltext-300x34.jpg 300w, https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2013\/01\/Beispieltext-200x22.jpg 200w\" sizes=\"auto, (max-width: 187px) 100vw, 187px\" \/><\/a><\/p>\n<p align=\"justify\"><em>(Eine Methode aus dem Altertum: exotische Texte mittels Grafikprogramm erstellen und in den HTML-Code einbinden \u2013 die Nachteile \u00fcberwiegen: zu Zeitaufwendig und schwierig in bestehenden Text zu integrieren)<\/em><\/p>\n<p align=\"justify\">Auch Flash ist nicht der Weisheit letzter Schluss, weil es nicht unbedingt auf textlastige Seiten den Fokus setzt.<\/p>\n<p align=\"justify\">Jahrelang tat sich nicht viel im Bereich Font Einbettung \u2013 es gab Ans\u00e4tze, die aber schneller wieder in der\u00a0 Versenkung verschwanden, wie Ihre Vorstellung auf der B\u00fchne des Internet gedauert hatte.<\/p>\n<p align=\"justify\">Doch in letzter Zeit sind gleich 2 Vertreter der Schrifteneinbettung ins Rampenlicht getreten, um die triste B\u00fchne der Webseiten mit Exklusivit\u00e4t und Sch\u00f6nheit zu beleben. Die beiden Stars sind auf der einen Seite das CUFON- Projekt \u2013 und auf der anderen Seite hat internet Gigant Google mit den google Webfonts eine Webapplikation geschaffen, welche in Sachen Schriftenvielfalt keine W\u00fcnsche offen l\u00e4sst.<\/p>\n<p align=\"justify\">Auf die google Webfonts stie\u00df ich eher zuf\u00e4llig \u2013 Sie waren in dem Theme \u201cMontezuma\u201d von \u2018Bytesforall\u2019, welches aktuell auf www.petersplace.net noch im Einsatz ist (noch wie gesagt \u2013 denn auch diese altbekannte Webseite wird demn\u00e4chst in <a href=\"http:\/\/www.NERD-O-MANIA.DE\" target=\"_blank\" rel=\"noopener\">www.NERD-O-MANIA.DE<\/a> integriert werden, sodass ich nur noch einen zentralen Blog habe \u2013 der dann allerdings alle Optionen die ein Besucher sich w\u00fcnscht zur Verf\u00fcgung stellt)<\/p>\n<p align=\"justify\">Das Theme \u201cMingle\u201d von <a title=\"http:\/\/para.llel.us\/\" href=\"http:\/\/para.llel.us\/\" target=\"_blank\" rel=\"noopener\">http:\/\/para.llel.us\/<\/a> wiederum folgt einem anderen Ansatz und integriert \u2018CUFON\u2019 Fonts. Und schon stellte sich mir die Frage: Warum Cufon? Warum nicht Google Webfonts \u2013 oder umgekehrt?<\/p>\n<p align=\"justify\">Die Unterschiede bei der Einbettung sind minimal \u2013 bei beiden M\u00f6glichkeiten muss man erst auf die entsprechenden Webseiten \u2013 sucht sich im n\u00e4chsten Schritt die Schrift(en), welche man einsetzen m\u00f6chte \u2013 und bekommt einen Code, den man in seine Webseiten integriert.<\/p>\n<p align=\"justify\">Da beide Versionen fast identische Schriftarten bereithalten, k\u00f6nnte man meinen, dass es letztlich egal ist, welche M\u00f6glichkeit man w\u00e4hlt.<\/p>\n<p align=\"justify\">Dem ist leider nicht so..<\/p>\n<p align=\"justify\">Cufon Fonts haben einen entscheidenden Nachteil, der den Einsatz auf kommerziell ausgerichteten Webseiten und Blogs von selbst verbietet.<\/p>\n<p align=\"justify\">Denn das von Cufon erstellte JavaScript wandelt die Cufon Texte, damit Sie von den Internet Browsern dargestellt werden k\u00f6nnen, in PNG (Portable Network Graphic) Grafiken um. Und genau dies ist der Nachteil. Denn Google kann Grafiken nicht indizieren.<\/p>\n<p align=\"justify\">Da aufgrund der Lesbarkeit des Textes meistens \u00dcberschriften und Subunterschriften gestylt werden, werden diese Seiten bei Einsatz von Cufon kaum in den Top-Suchergebnissen zu finden sein.<\/p>\n<p align=\"justify\">Zum Beweis: der komplett mit google Webfonts designte Beitrag \u201cHallo Siri \u2013 Hallo Schwachkopf\u201d ist immer noch im google Ranking auf Platz 1 (Suchbegriff= Hallo Siri). Testweise versuchte ich dies mit cufon Schriften auf Nerd-o-mania \u2013 mit erschreckendem Ergebnis: Nach knapp 3 Tagen war mein Beitrag, der erst noch simultan unter petersplace.net angezeigt wurde komplett verschwunden.<\/p>\n<p align=\"justify\">Ich habe deshalb die Cufon Schriften wieder gegen die google Webfonts getauscht \u2013 und\u00a0 innerhalb weniger Tage erschienen die Blogbeitr\u00e4ge wieder in den Rankings..<\/p>\n<p align=\"justify\">Wenn Ihr also auf euren Blogs Schriften nutzen wollt, dann gibt es eigentlich nur eine sinnvolle M\u00f6glichkeit \u2013 und die hei\u00dft: GOOGLE WEBFONTS<\/p>\n<p align=\"justify\">\n","protected":false},"excerpt":{"rendered":"<p>..oder: kennen Sie eigentlich CUFON? Alter Mediziner Witz: Was ist das Tier mit der k\u00fcrzesten Lebenserwartung? Das Kliestier \u2013 es macht \u201cPffft\u201d und ist im Arsch\u2026 Apropos kurze Lebendauer: Eine der schnelllebigsten Branchen ist die IT oder Informationstechnologie) \u2013 dies wissen alle, die in diesem Umfeld t\u00e4tig sind. Keine Woche vergeht, in der nicht eine &hellip;<\/p>\n","protected":false},"author":11,"featured_media":5288,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":"","jetpack_post_was_ever_published":false},"categories":[5],"tags":[382,381,319,320],"class_list":["post-5292","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-computer","tag-fonts","tag-schriften","tag-wordpress","tag-wordpress-theme"],"jetpack_featured_media_url":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-content\/uploads\/2013\/01\/microsoft-WEFT.png","jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/posts\/5292","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/comments?post=5292"}],"version-history":[{"count":0,"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/posts\/5292\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/media\/5288"}],"wp:attachment":[{"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/media?parent=5292"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/categories?post=5292"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nerd-o-mania.de\/wordpress\/wp-json\/wp\/v2\/tags?post=5292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}