font

Ebay: Auktionen optimieren

Als Verkäufer bei Ebay sollten Sie Ihre Artikel und damit Ihren Shop mit einem schicken Design versehen. Damit erhöhen Sie Ihr Vertrauen beim Kunden und steigern gleichzeitig Ihren Umsatz.

Ebay mit HTML ein eigenes Shop-Design erstellen

Der Texteditor von Ebay ist leider sehr eingeschränkt – bis auf den Font, die Schriftart und Standard-Formatierungen können Sie hier leider nichts einstellen. Abhilfe schafft optionaler HTML-Code, den Sie statt des normalen Textes in den HTML-Editor einfügen können. HTML ist die Programmiersprache von Internetseiten – wenn Sie sich damit nicht auskennen, können Sie einen speziellen Editor verwenden (siehe unten). Bei der eigenen Design-Programmierung gibt es folgendes zu beachten:

  • Leider gibt es für Verkäufer unterschiedliche Regeln für den HTML-Editor: Geprüfte Mitglieder, Powerseller und Verkäufer mit über 500 Verkäufen dürfen in Ihrem Code Scripte und Iframes verwenden – so können Sie etwa Ihre Webseite im Ebay-Shop einbinden.
  • Kleine Verkäufer dürfen keine externen CSS- oder Javascript-Dateien einbinden – CSS-Elemente müssen Sie daher sehr eingeschränkt über den „style“-Befehl von div-Boxen setzen.
  • Bilder können Sie wie gewohnt über den Code <img src=“URL“> einbinden. Bei der Positionierung von Bildern müssen Sie auf das Ebay-Design Rücksicht nehmen: Sonst können Ihre Bilder etwa in den Footer der Webseite reichen.

Ein gutes Tool für den Mac hierfür ist der Auction Listing Designer. Für Windows kann man den ListingFactory verwenden. Möchte man sein Layout online erstellen kann man gegen eine monatliche Gebühr auf den Crazylister zurückgreifen.

 

Einbindung externer Webseiten in Ebay mittels iFrame

Möchte man spezielle Webseiten, die (extra) für Ebay entworfen wurden über einen iFrame einbinden, so benötigt man folgenden Code:

<style>
</style>
&nbsp;
<iframe src="http://www.domain.com/ebay/product1.html" height="1500" width="1000"></iframe>

Höhe und Breite können dementsprechend angepasst werden.

 

 

Google Fonts über den eigenen Server einbinden

Es gibt verschiedene Methoden, um Google Fonts in eine Webseite einzubinden. Die klassische Methode ist, die Schriften über einen Link in der header.php oder – besser – über die functions.php ins Theme einzubinden. Ellen Bauer hat einen ausführlichen Artikel dazu geschrieben: Google Fonts in WordPress Themes

Bei dieser Methode liegen die Schriften auf den Google-Servern und werden über einen Link auf meine Webseite geholt. Wird meine Seite geladen, schickt sie eine Anfrage an den Google Server und der liefert dann die Schriften aus. Davon merkt man in der Regel nicht viel. Aber es bleibt die Tatsache, dass eine Abfrage passiert und das dauert ein paar Millisekunden.

Je nach der Qualität der Datenverbindung kann es auch passieren, dass die Schriften nicht schnell genug ausgeliefert werden. Dann erscheinen alle Texte plötzlich in Arial oder Times.
Auch Firewalls können ein Problem darstellen – in manchen Firmen gelten so strenge Regeln, dass die Mitarbeiter keine Google Fonts zu sehen kriegen.

Google Fonts herunterladen und Webfont erzeugen

Aus diesen Gründen bin ich in letzter Zeit dazu übergegangen, Google Webfonts nicht mehr per Link einzubinden, sondern direkt auf den Sever zu laden, auf dem auch das WordPress-Theme liegt. Ich gehe davon aus, dass das rechtlich kein Problem ist, denn die Google Webfonts haben eine SIL Open Font License, die das Herunterladen erlaubt.

Wenn man sich bei den Google Webfonts eine Auswahl zusammengestellt hat, kann man diese Auswahl über einen Link herunterladen. Der Link versteckt sich hinter dem kleinen Pfeil rechts über der bunten Page-Load-Anzeige.

 

Allerdings befindet sich in dem zip-Archiv, das im Download-Ordner landet, nur eine TrueType-Version der Schrift. Damit können nicht alle Browser etwas anfangen. Der Font muss in mehreren Formaten (ttf, eot, woff, woff2, svg) zur Verfügung gestellt werden.

Das ist aber nicht weiter schwierig, denn es gibt Tools um aus einem TrueType-Font einen Webfont zu erzeugen. Zum Beispiel den Google Webfonts Helper. Ich nutze sehr gerne den Webfont-Generator von fontsquirrel.com.

Beide Tools bringen praktische CSS-Schnipsel mit, die man per Copy & Paste in die CSS-Datei des WordPress-Themes übertragen kann. Hier ein Beispiel von FontSquirrel.

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 12, 2016 */
@font-face {
    font-family: 'fira_sansthin';
    src: url('firasans-thin-webfont.eot');
    src: url('firasans-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('firasans-thin-webfont.woff2') format('woff2'),
         url('firasans-thin-webfont.woff') format('woff'),
         url('firasans-thin-webfont.ttf') format('truetype'),
         url('firasans-thin-webfont.svg#fira_sansthin') format('svg');
    font-weight: normal;
    font-style: normal;

}

Geschwindigkeit deiner Website optimieren

Wir alle kennen die Tools zum Messen der Geschwindigkeit einer Website: Pagespeed, YSlow, Pingdom, Webpagetest oder das Kombitool aus Pagespeed und YSlow GTMetrix. Aber wie wird zum Beispiel Browser Caching aktiviert? Wer sich damit nicht auskennt, der findet viele, viele Artikel dazu, die viel Code in sich haben und nichts erklären. Hier ist noch einer davon. 😉
Über die vergangenen Jahre habe ich dieses Gist immer wieder ergänzt, verbessert und korrigiert. Entstanden ist eine sehr praktische Sammlung von Einstellungen, die fail safe die jeweiligen Möglichkeiten des Hosters ausnutzen. Die entsprechenden Anweisungen sind in If-Abfragen gekapselt, so dass es bei guten Hostern keine Probleme mit nicht unterstützen Modulen geben sollte.

Die Einstellungen teilen sich in drei Bereiche: Komprimierung (Deflate/GZip), Browser Caching (Ablaufdatum für statische Caching-Inhalte definieren) und dem Setzen von sinnvollen Headern (Keep Alive, Accept Encoding, etc.).

#
# Sources:
# http://stackoverflow.com/questions/7704624/how-can-i-use-gzip-compression-for-css-and-js-files-on-my-websites
# http://codex.wordpress.org/Output_Compression
# http://www.perun.net/2009/06/06/wordpress-websites-beschleuinigen-4-ein-zwischenergebnis/#comment-61086
# http://www.smashingmagazine.com/smashing-book-1/performance-optimization-for-websites-part-2-of-2/
# http://gtmetrix.com/configure-entity-tags-etags.html
# http://de.slideshare.net/walterebert/die-htaccessrichtignutzenwchh2014
# http://de.slideshare.net/walterebert/mehr-performance-fr-wordpress
#
<IfModule mod_deflate.c>
# Insert filters / compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/vtt 
AddOutputFilterByType DEFLATE text/x-component
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/js
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE application/atom+xml 
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE application/ld+json 
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject 
AddOutputFilterByType DEFLATE application/x-font-ttf 
AddOutputFilterByType DEFLATE application/x-web-app-manifest+json 
AddOutputFilterByType DEFLATE font/opentype 
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
# Exception: Images
SetEnvIfNoCase REQUEST_URI \.(?:gif|jpg|jpeg|png|svg)$ no-gzip dont-vary
# Drop problematic browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</IfModule>
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 week"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 month" 
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/html "access plus 1 minute"
ExpiresByType text/plain "access plus 1 month"
ExpiresByType text/x-component "access plus 1 month" 
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/javascript "access plus 1 months"
ExpiresByType application/x-javascript "access plus 1 months"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/ld+json "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds" 
ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" 
ExpiresByType text/cache-manifest "access plus 0 seconds" 
ExpiresByType audio/ogg "access plus 1 month" 
ExpiresByType video/mp4 "access plus 1 month" 
ExpiresByType video/ogg "access plus 1 month" 
ExpiresByType video/webm "access plus 1 month" 
ExpiresByType application/atom+xml "access plus 1 hour" 
ExpiresByType application/rss+xml "access plus 1 hour" 
ExpiresByType application/font-woff "access plus 1 month" 
ExpiresByType application/vnd.ms-fontobject "access plus 1 month" 
ExpiresByType application/x-font-ttf "access plus 1 month" 
ExpiresByType font/opentype "access plus 1 month" 
</IfModule>
## EXPIRES CACHING ##
#Alternative caching using Apache's "mod_headers", if it's installed.
#Caching of common files - ENABLED
<IfModule mod_headers.c>
<FilesMatch "\.(ico|pdf|flv|swf|js|css|gif|png|jpg|jpeg|txt|html|htm)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
</IfModule>
<IfModule mod_headers.c>
 <FilesMatch "\.(js|css|xml|gz)$">
 Header append Vary Accept-Encoding
 </FilesMatch>
</IfModule>

<filesMatch "\\.(js|js.gz)$">
Header set Cache-Control "max-age=604800, private"
</filesMatch>
<IfModule mod_gzip.c>
 mod_gzip_on Yes
 mod_gzip_dechunk Yes
 mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
 mod_gzip_item_include handler ^cgi-script$
 mod_gzip_item_include mime ^text/.*
 mod_gzip_item_include mime ^application/x-javascript.*
 mod_gzip_item_exclude mime ^image/.*
 mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
# Set Keep Alive Header
<IfModule mod_headers.c>
 Header set Connection keep-alive
</IfModule>
# If your server don't support ETags deactivate with "None" (and remove header)
<IfModule mod_expires.c> 
 <IfModule mod_headers.c> 
 Header unset ETag 
 </IfModule> 
 FileETag None 
</IfModule>

Steak auf Nummer sicher

[et_pb_section admin_label=“Sektion“ fullwidth=“off“ specialty=“off“][et_pb_row admin_label=“Zeile“][et_pb_column type=“1_3″][et_pb_image admin_label=“Bild“ src=“https://wissen.web-profis.com/wp-content/uploads/entrecote-steak.png“ show_in_lightbox=“off“ url_new_window=“off“ animation=“left“ sticky=“off“ align=“left“ force_fullwidth=“off“ always_center_on_mobile=“on“ use_border_color=“off“ border_color=“#ffffff“ border_style=“solid“] [/et_pb_image][/et_pb_column][et_pb_column type=“2_3″][et_pb_text admin_label=“Text“ background_layout=“light“ text_orientation=“left“ text_font_size=“14″ use_border_color=“off“ border_color=“#ffffff“ border_style=“solid“]

500g Entrecôte will man nicht verhunzen. Ich sag Euch wie das gelingt: rückwärts braten. Man kümmert sich zuerst um die Kerntemperatur und dann ums Anbraten.

Einen Gefrierbeutel (am besten so einen mit Zipperverschluss) mit Thymian, Rosmarin, etwas Knoblauch und einem guten Schuss Pflanzenöl bestücken. Fleisch ordentlich salzen, ab in den Beutel und über Nacht im Kühlschrank ziehen lassen. Im Beutel sollte dabei möglichst wenig Luft eingeschlossen sein.

  • Keine Sorge. Das Salz macht das Fleisch nicht trocken. Im Gegenteil: es wird dadurch herrlich mürbe und geschmacksintensiv.

 

  • Ein Stündchen wandert der verschlossene Beutel bei ca. 55°C in den Ofen.

 

  • Jetzt in einer Pfanne wenig (!) Pflanzenöl erhitzen und das gut trockengetupfte Steak bei sehr großer Hitze von jeder Seite 3 bis 5 Minuten braun braten. Es soll ordentlich Farbe bekommen, denn die Röstaromen bringen Geschmack.

 

  • 5 Minuten ruhen lassen, pfeffern, gegen die Faser in Streifen schneiden und mit bestem Olivenöl beträufeln.

 

>>> Dazu passt ein schlichter Römersalat mit Ceasar-Dressing, frischen Tomaten und roten Zwiebeln.

PS: Wer hat, kann mit einem Fleischthermometer die Kerntemperatur checken. 55-57°C sind das Ziel.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

YourFonts: Die eigene Handschrift als Font und Schrift für Windows verwenden

Handschrift ist out.  Im Zeitalter von Computer, Textverarbeitung und Laserdrucker werden E-Mails und Briefe in Schriftarten mit blumigen Namen wie Times, Arial oder Verdana verfasst. Sie mögen es lieber individueller? Dann können Sie Ihre Handschrift wiederbeleben und aus Ihrer eigenen Handschrift ganz einfach eine Windows-Schriftart machen lassen, die Sie überall einsetzen können – in E-Mails oder Word-Dokumenten zum Beispiel.

Aus der Handschrift einen Font machen

Der Anbieter YourFonts erzeugt aus Ihrer eigenen Handschrift eine Computerschriftart, die Sie auf allen Rechnern verwenden können. Normalerweise kostet der Service etwa 10 US-Dollar. Meist gibt es aber auf Couponseiten wie couponfollow.com/site/yourfonts.com zeitlich begrenzte Coupons für eine kostenlose Handschrift. Am besten suchen Sie bei Google einfach nach “Yourfonts Coupon“.

So funktioniert das Ganze: Um aus der eigenen Handschrift eine Windows-Schriftart zu machen, drucken Sie per Klick auf „Print Template“ ein Zeichenformular aus, das Sie dann per Hand ausfüllen. Die ausgefüllte Vorlage scannen Sie ein und schicken sie an YourFonts. Anschließend können Sie die fertige Schrift herunterladen und in den Ordner “\Windows\Fonts kopieren”. Ab sofort steht die eigenen Handschrift als neue Schriftart in allen Windows-Anwendungen zur Verfügung.