Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

DeepL - ein neuer Online-Übersetzungsdienst

Samstag, 9. September 2017

Symbolbild

Texte mal schnell in oder aus eine(r) Fremdsprache übersetzen, das war bisher eine Domäne des Platzhirschs Google Translate.
Es geht auch anders - schneller, und nach ersten kurzen Tests vor allem besser:
Mit DeepL
Bisher sind leider nur 6 Sprachen verfügbar:

  • DEUTSCH
  • ENGLISCH
  • FRANZÖSISCH
  • SPANISCH
  • ITALIENISCH
  • NIEDERLÄNDISCH
  • POLNISCH

Aber vielleicht werden's noch mehr.
Meine Empfehlung: Ausprobieren.

Und hier der obige Text von DeepL ins Englische übersetzt:

Translating texts quickly into or out of a foreign language, that used to be a domain of Google Translate.
There's another way - faster, and after a few short tests, it's better:
With DeepL
Only 6 languages are available so far:

  • GERMAN
  • ENGLISH
  • FRENCH
  • SPANISH
  • ITALIAN
  • NETHERLANDS
  • POLISH

But maybe there'll be more.
My recommendation: Try it out.


Responsive Web Design RWD - iOS (und Android) Specials

Freitag, 25. August 2017

Einige Tipps & Kniffe, die mir beim Erstellen von mobile-freundlichen Webseiten schon oft geholfen haben.

Unstreitig das wichtigste Meta-Element - gehört in den <head>-Bereich jeder Seite:


<meta name="viewport" content="width=device-width, initial-scale=1">

Dieses Meta-Element bewirkt, dass der Inhalt an die Monitorgröße angepasst wird.

Als nächstes wollen wir vermutlich vermeiden, dass sich die Schriftgröße ändert, wenn das Smartphone statt im Hoch- im Querformat gehalten wird.

Hierzu dient die CSS-Anweisung:

html {
-webkit-text-size-adjust: 100%;
}

Und jetzt noch zwei Spezialfälle:

  1. Beim Antippen eines Links blitzt kurz ein dunkler Hintergrund auf. Die Farbe dieses Hintergrunds kann man mittels CSS nach Bedarf einstellen:
    element {-webkit-tap-highlight-color: red;}
    Nützlich kann es in besonderen Fällen sein, diese Hintergrundfarbe auf transparent zu setzen.
    Mehr zu diesem Trick bei MDN web docs
  2. Falls der Link mittels JavaScript eine weitere Funktion ausübt, z.B. Öffnen eines Untermenüs o.ä., kann es vorkommen, dass der Hyperlink erst bei einem zweiten Tippen ausgeführt wird. Ohne weiteres Zutun ist der Link bzw. die Site dann kaputt, weil man vom Besucher nicht erwarten kann, dass er so eine ungewöhnliche Aktion ausführt.
    Abhilfe schafft ein kleines JavaScript-Snippet:
    <script>document.addEventListener("touchstart", function(){}, true);</script>
    Mehr dazu bei coffeebreak-blog.de

PS: Alle Snippets sind natürlich vom Betriebssystem unabhängig, funktionieren also grundsätzlich sowohl unter iOS als auch Android, weil sie ausschließlich das Rendering durch den jeweiligen Browser betreffen.


Wie komme ich kostenlos an eine Software-Lizenz von webdesign weisshart?

Sonntag, 16. Juli 2017

Logo PayPalEin neuer Trick, sich eine Lizenz für meine Tools kostenlos zu erschleichen, mit Hilfe von PayPal.

So funktioniert's:

Ich verschicke die Lizenz für meine Tools incl. Freischaltcode und ggf. zusätzlichen Dateien per E‑Mail, nachdem ich die die Mitteilung über eine erfolgte PayPal-Zahlung erhalten habe.
Bei PayPal kann nun ein vermeintlich pfiffiger Zeitgenosse ganz einfach behaupten, er hätte diese E‑Mail nicht erhalten. Diese, nur schwer widerlegbare Behauptung genügt PayPal, die Zahlung zu stornieren, und den Kaufpreis an den Käufer zurückzuerstatten. Das Verfahren nennt sich "Käuferschutz". Im Internet finden sich zahlreiche Beschreibungen von Betrug dieser Art.
Nun hat der "Käufer" ohne Bezahlung die Lizenz und den Lizenzschlüssel.
Glaubt er.
Funktioniert leider nicht.

Warum's doch nicht funktioniert:

Ich verschicke — aus obigem Grund — die Lizenz ausschließlich an die bei PayPal hinterlegte Kontaktadresse des Käufers.
Nun muss aber auch der Käuferschutz von PayPal über genau diese Adresse abgewickelt werden. Und dass ein "Kunde" zwar die E‑Mail von PayPal erhält, nicht aber meine Lizenz an die gleiche Adresse, das glaubt nicht mal PayPal.

PS: Wer glaubt, es dennoch versuchen zu müssen: Ich hab' noch einen zusätzlichen Schritt in der Hinterhand, den ich — aus sicher verständlichen Gründen — hier nicht näher erklären werde. :-)


Das große ẞ (Eszett)

Freitag, 30. Juni 2017

Das große EszettEndlich ist das große ẞ offiziell. Die Reaktion der meisten: irgendwo zwischen "häßlich" und "braucht kein Mensch".
Anders, wenn man zufällig Weißhart heißt.
Das Argument pro großes ẞ lautet: Wenn in Ausweisdokumenten der Name in Versalien geschrieben wird, werden Menschen wie ich zu WEISSHART.
Der neue Buchstabe macht mich vermutlich in zukünftigen Ausweisen zu WEIẞHART. Und damit bin ich wohl im Rest der Welt (außer D und A) wieder ein Weibhart. Ich mochte das noch nie so richtig.

Und was hat das alles mit Webdesign zu tun?

  1. Damit das Zeichen im Browser korrekt angezeigt wird, muss es in der entsprechenden Schriftart verfügbar sein. Entsprechende Schriftart: Das sind z.B. auf Windows-Systemen Arial, Courier New, Tahoma, Times New Roman und Verdana, und auf macOS nur Geneva. Damit die Anzeige einigermaßen zuverlässig funktioniert, muss also mindestens eine der o.g. Windows Schriftarten sowie auf jeden Fall Geneva als font-face deklariert werden. Unter iOS funktioniert das große ẞ ohne jegliche Schriftdeklaration. Unter Android …?
  2. Und wie gibt man jetzt das große ẞ auf der Tastatur ein?
    Wikipedia zeigt diverse Möglichkeiten.
    Webworker haben es leichter: Einfach &#7838; ins HTML.

Apps nicht kompatibel mit iOS 11

Samstag, 17. Juni 2017

Seit längerer Zeit warnt Apple vor Apps "die dein iPhone verlangsamen". Aktuell lautet dieser Hinweis drastischer: "… müssen aktualisiert werden, um auf künftigen iOS Versionen zu funktionieren."
Was es mit diesem Hinweis auf sich hat, erklärt Apple hier. Nicht ganz zutreffend. Denn endgültig werden diese Apps nicht mehr funktionieren, wenn iOS mit Version 11 nur noch 64 bit-Apps unterstützt.

Screenshot
Welche Apps auf deinem Gerät davon betroffen sind, kannst du mit Einstellungen > Allgemein > Info > Apps auflisten.

Bei mir waren ursprünglich 40 Apps betroffen. Ich hab' mir einen Ruck gegeben, und nach kurzem Nachdenken alle entsorgt. Bei der Gelegenheit auch noch Hardware entsorgt, die ohne die unterstützenden Apps nutzlos sind.
PS: Wenn unter Einstellungen > Allgemein > Info > Apps keine App gelistet wird, dann ist dein Gerät bereits "sauber". Gratuliere.


iPhone App - alte Version aus Backup installieren

Mittwoch, 31. Mai 2017

Logo App Store iPhone-/iPad App upgedatet - und jetzt ist die neue Version kaputt. Das kommt immer wieder mal vor.
Aber wozu mach' ich eigentlich Backups?
Nun: Man kann alte Versionen aus einem Backup auf das Gerät installieren. Und wenn man weiß wie, ist es sogar ganz einfach. weiterlesen…


Eine Screenshot-App - wozu soll das gut sein?

Samstag, 27. Mai 2017

Ein Screenshot vom iPhone - nichts einfacher als das. (Home-Button und Ausschalter gleichzeitig drücken, falls es jemand nicht weiß.)
Dafür extra eine App?
Ja. Wenn man, wozu auch immer, die ganze Webseite in voller Länge fotografieren will.

Hinweis: Den Demo-Screenshot hier kann man nicht nur Scrollen, sondern durch Antippen auch in voller Höhe sehen; wenn auch vermutlich verkleinert, es sei denn, ihr habt einen Monitor mit 3000 px Höhe ;-)

iTunes Link: Awesome Screenshot for Safari
Übrigens: Es gibt die App auch für den Mac.


Documents by Readdle - die eierlegende Wollmilchsau unter iOS

Donnerstag, 25. Mai 2017

Logo Die App war immer schon so etwas wie eine eierlegende Wollmilchsau. Was irgendwie unter iOS machbar ist - Documents kann es. (Die Feature-Liste am Ende dieses Beitrags)

Neu in der aktuellen Version 6 [iTunes Link] u. a.:
Documents kann Dateien direkt in der Cloud bearbeiten. Konkret z. B. Dropbox, aber auch FTP. Und Documents kann Textdateien durchsuchen.

Für mich bedeutet das:
Ich kann auch unterwegs auf dem iPhone Korrekturen an Webseiten per FTP erledigen, und die zugehörige Dokumentation, die als Textfile in der Dropbox liegt, aktuell halten. Die Suche in Textdateien ist für beides unerlässlich, weil die Übersicht auf dem kleinen iPhone-Monitor natürlich nicht gegeben ist.

Ein Wermutstropfen: Für VoiceOver-Nutzer ist Documents nur bedingt empfehlenswert. So ist beispielsweise die Suchfunktion nicht nutzbar.

weiterlesen…


Responsive Formulare - automatisches Zoomen beim Betreten vermeiden

Montag, 22. Mai 2017

Da hat man sich redlich Mühe gegeben, Formulare responsive zu gestalten. Auf dem Smartphone / iPhone sieht das Ergebnis auch bestens aus.

Screenshot 1
Ein Kontaktformular, optimiert für die Darstellungen auf einem Smartphone-Monitor

Nach dem Antippen eines Formularfeldes aber:

Screenshot 2
Nach dem Antippen eines Formularfelds öffnet sich die Bildschirmtastatur, und die Anzeige wird automatisch gezoomt, so dass sie auf dem Bildschirm nicht mehr zur Gänze sichtbar ist

Was passiert da? Wie kann man diesen unschönen Effekt vermeiden?
iOS oder Android versuchen, die Eingabefelder mit einer Mindestschriftgröße darzustellen. Falls diese Mindestgröße nicht vorgegeben ist (per CSS), dann kommt es zu diesem Zoom-Effekt.
Abhilfe? Ins CSS:
input, textarea {font-face:16px}
So einfach kann es sein - wenn man's weiß.


E-Privacy-Verordnung

Montag, 8. Mai 2017

Aus der EU-Cookie-Richtlinie wird die E-Privacy-Verordnung
(Google-Suche nach E-Privacy-Verordnung)
Inkrafttreten der Verordnung ist geplant für Mai 2018. Und, anders als bisher die Richtlinie, wird eine EU-Verordnung sofort mit Inkrafttreten für alle Länder verbindlich.
Der Entwurf der Verordnung (Kommentar zum Entwurf) sieht u.a. vor, dass

  1. Ein Opt-out oder "Take it or leave" nicht mehr genügt. Vielmehr ist eine bewusste Zustimmung des Besuchers (Opt-in) erforderlich.
  2. Seitenanbieter ein im Browser gesetztes Do not Track (DNT) respektieren müssen.

Beide Forderungen erfüllt meine Lösung bereits heute. Ich dürfte auf alle Fälle auf der sicheren Seite liegen.

Screenshot vom iPhone
Der "Cookie-Hinweis" auf Smartphones, mit der Wahl zwischen "Bitte keine Analyse" und "Kein Problem, ich stimme zu".

tl;dr weiterlesen…


Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE