IFTTT If This Then That

Gehört zu: Internet

IFTTT If This Then That

IFTTT ist ein Service (“Automatisierungsdienst”) im Web, mit dem man Regeln aufstellen kann (If <this> then <that>) um bestimmte Aufgaben zu automatisieren.

Man muss ich bei IFTT anmelden.

  • URL:  http://www.ifttt.com
  • Dort eine Konto einrichten mit UserId & Password (und einer E-Mail-Adresse)

Zur momentanen Verwirrung hat IFTTT vor einiger Zeit seine Begriffswelt geändert, sodass Erklär-Videos z.B. von Youtube  für den heute neu anfangenden IFTTT-User nur schwer verständlich sind.

IFTTT Applets

Regeln hießen früher “Recipes” und neuerdings “Applets“.

Solche Regeln (also Applets) haben ja die Form:  if <this> then <that>, wobei das <this> die Bedingung ist unter der die <that> genannte Aktion ausgeführt werden soll.
Im IFTTT-Jargon heißt die Bedingung <this> “Trigger” und die Aktion <that> “Action“.

IFTTT Services

Trigger und Actions werden bei IFTTT mit Hilfe von sog. Services (alter Name:  Channels)  definiert.

Solche Services sind z.B. “Email”, “Dropbox”, “Google Drive”, “Date & Time” etc.
Services, die wir bei der Formulierung von Triggers und Actiones verwenden wollen, müssen für IFTTT aktiviert werden. Das heisst im IFTTT-Jargon Services müssen “connected” werden, dann können sie als “Quelle” oder “Ziel” verwendet werden.

Ein Trigger kann dann z.B. formuliert werden als “Wenn über den Email-Service eine Mail eintrifft, dann …”

Eine Action kann z.B. formuliert werden als “speichere den E-Mail-Anhang mithilfe des Dropbox-Service in der Dropbox die beim “connecten” des Dropbox-Service angegeben wurde.

Sammelsurium

Frage: Können im <that>-Teil eines Applets auch mehrere Actions stehen?

Bemerkung: Man kann Applets (Regeln) wie oben angedeutet, komplett selbst definieren oder auch Applets, die andere gemacht haben benutzen.

Alternativen: Zapier, WappwolfAutomator, Hooks

Computer: WordPress: Welche Datenbank Version von MySQL oder MariaDB

Gehört zu: WordPress

WordPress bei Strato funktioniert nicht mehr

Anfang Januar 2017 funktionierte mein WordPress-Blog http://blog.kr8.de  bei meinem Web-Hoster Strato nicht mehr richtig.
Die Ursache des Problems bei Strato ist ungeklärt.
Bei Strato sichere ich mein WordPress mit dem Plugin UpdraftPlus auf meine Dropbox – und das hat noch funktioniert.

Die Ursache: utf8mb4

Um weiter arbeitsfähig zu bleiben, wollte ich die Updraft-Sicherung von Strato in mein lokales WordPress einspielen was aber zu einer Fehlermeldung führte, die sagte, dass meine MySQL-Version zu alt dafür sei. Weitere Recherchen ergaben, dass es an der MySQL collation “utf8mb4_unicode_ci” liegt, die das WordPress bei Strato verwendet aber von meinen lokalen MySQL 5.0 nicht unterstützt wird.

Meine lokalen WordPress-Installationen verwendeten als Datenbank MySQL in der Version 5.0.41 und diese unterstützten utf8 aber nicht  utf8mb4.  Letzteres bildet ein utf-Zeichen auf 4 statt drei Bytes ab. Contine reading

Internet: Graphics in HTML

Gehört zu: Vektorgrafik

Vektorgrafiken in HTML-Seiten

Auch in HTML-Seiten möchte man ja ab und zu auch schöne Vektorgrafiken einbauen – nicht nur Pixel-Bilder.

Je nach Format (SVG, SWF, ODG, VSD, PPT,…) sind da unterschiedliche Lösungen möglich, wo bei schon das Upload solcher Grafiken ein Problemchen sein kann.

Upload von SVG-Grafiken

Bei WordPress muss man den Dateityp “SVG” zulassen zum Upload z.B. durch Installation des WordPress-Plugins “SVG Support”. Dies habe ich in Graphis in WordPress beschieben.

Bei Flickr geht es so:…

Bei Google Photos geht es so: …..

SVG Grafik in eine HTML-Seite einbinden

SVG Browser Support heute

Kein Web-Browser unterstützt den aktuellen SVG-Standard in vollem Umfang.

Mozilla Firefox hat sehr gute SVG-Unterstützung.

Microsoft Internet Explorer und Edge nur mittelmäßige SVG-Unterstützung. Contine reading

Computer: Evolution from B2/Cafelog to WordPress 1.0

Gehört zu: WordPress

Evolution of WordPress: B2/Cafelog to WordPress 1.0

by on July 14th, 2008 in WordPress

A few days ago we had told you what you should know about WordPress 2.6. The post described new features that will be introduced shortly in WordPress 2.6. Though there are several new features that you may like in this new version, there might be many that have gone unnoticed that were introduced in the earlier versions of WordPress. To quell the anticipation that users might have for the latest version, we wanted to write a series of posts that will cover WordPress from its infancy to WordPress 2.5 (the latest major version) that many of you use.

The WordPress team has been naming their major releases after popular Jazz legends and we will take a look at code names for the past releases. Contine reading

Computer: Adobe Flash Player – Shockwave – in Mozilla Firefox

The Situation with my Graphics

My older websites do use vector graphics in Shockwave format – originally produced by Feehand and converted from .fla to .swf

In the long run I am planning to convert .swf to a more open and modern format ( like .svg or html5 or ….)

At the moment I want to keep my older websites “alive”, so I need to know how to embed SWF-files in HTML and how to render them in the important Web Browsers (Mozilla Firefox,…)

My traditional website, that I want to keep “alive” is:  http://www.kr8.de (original) resp. http://web.kr8.de (converted to bootstap).

Adobe Flashplayer

As I understood, I need Adobe Flashplayer as a plugin into my web browser in order to render my SWF graphics properly.

My favorite web browser is Mozilla Firefox. With Firefox version 43.04 I was unable to install the Adobes Flashplayer plugin.
With Mozilla Firefox 28.0 the installation of the Adobe Flash Plugin went well. To be exact: I installed Shockwave Flash 22.0.0.209 as a plugin to Mozilla Firefox 28.0.

Rendering SWF in HTML

My SWF files showed up perfectly on my HTML-Pages in Mozilla Firefox.
Example: http://web.kr8.de/ldap.html

This is the code I used for embedding the SWL into the HTML:

<object align=”left” classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0″ width=”294″ height=”126″>
<param name=”movie” value=”img/ldap.swf” />
<param name=”wmode” value=”transparent” />
<param name=”quality” value=”high” />
<embed quality=”high” pluginspage=”http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash” type=”application/x-shockwave-flash” src=”img/ldap.swf” width=”294″ height=”126″  wmode=”transparent” />
</embed>
</object>

Potential Problems

  • Use the right file path in the SRC parameter e.g. src=”img/ldap.swf”
  • Use wmode=”transparent”
  • Other Firefox-Plugins may interfere with the Shockwave Flash plugin, e.g. Shockwave Director or others…

Als SVG-Grafik geht es ganz einfach

Wenn wir statt Shockwave das SVG-Format nehmen, geht es einfacher:

Computer: SVG Vektorgrafiken (aus Wiki)

Gehört zu: Grafik
Siehe auch: Graphics in WordPress

SVG Scalable Vector Graphics (aus Wiki)

  • SVG ist ein auf XML beruhender W3C-Standard für VektorGrafik.
    • SVG 1.0: 2001
    • SVG 1.1: 2003
    • SVG 1.2: 2005
    • SVG 2.0: hieran wird seit 2011 gearbeitet (“Candidate Recommendation”)
  • SVG wurde sehr stark von der Firma Adobe unterstützt. Zum 1.1.2008 hat Adobe “End of Life” verkündet.
  • SVG hat als offenes; d.h. nicht-proprietäres Format große Unterstützung durch OpenSourceSoftware
  • SVG wird von MediaWiki unterstützt
  • SVG wird von WordPress unterstützt
  • WebBrowser unterstützen SVG auch…?
  • Konkurrierend zu SVG ist: Flash von Macromedia (aufgekauft von Adobe)

SVG Grafiken Einbetten in…

 Bekannte Probleme mit SVG

  • Darstellung von Pfeilspitzen an Linien
  • Welche Schrifttypen werden unterstützt?
  • Darstellung von Fließtext (ab SVG 1.2 möglich)

 Weblinks zu SVG

 SVG die ersten Schritte

  • Koordinatensystem
    • X-Achse waagerecht vom linken Bildrand nach rechts
    • Y-Achse senkrecht vom oberen Bildrand nach unten
  • Elemente
    • Rechteck
    • Text, auch Fließtexte
    • Bezierkurven
    • Kreis, Ellipse, Bogen
    • Pfad
    • Pfeilspitzen ????????

Beispiel für einen Pfad

Pfad aus “M” (=move to) und “L” (= line to):

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" 
     width="200" height="300">
  <path stroke="black" stroke-width="1px" fill="none"
     d="M 50,250 L 50,150 L 100,77.5 L 150,150 L 55,150 L 150,250 L 54.5,250 L 150,154 L 150,246"/>
</svg>

Dies als Grafik:

http://blog.kr8.de/wp-content/uploads/2016/08/DasHausvomNikolaus.svg

SVG-Grafik: Path

Beispiel für Bogenstücke

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300">
<g stroke="black" stroke-width="1" fill="none">
<path d="M150 50 A100 100 0 0 0 50 150" />
<path d="M0 150 L150 150" stroke="red"/>
<path d="M150 0 L150 150" stroke="blue" />
<path d="M50 200 A50 50 0 0 1 100 250" />
<path d="M50 160 L50 300 M0 250 L150 250" stroke="gray"/>
</g>
</svg>

Dies als Grafik:

Beispiel für zwei einzelne Textzeilen

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"  width="265" height="65" 
     xml:space="preserve" color-interpolation-filters="sRGB" fill="none">
	<title>Balanced Scorecard</title>
	<desc>Aus:  pres_030806.ppt TTC</desc>
	<style type="text/css">
		.st2 {fill:rgb(0,103,171);font-family:Verdana;font-size:20pt;font-style:italic;font-weight:bold}
	</style>
	<g>	
                <rect x="1" y="1" fill="none" stroke="black" width="264" height="64"/>
		<text x="18" y="29" class="st2">Basic Balanced</text>	
		<text x="50" y="55" class="st2">Scorecard</text>		
	</g>
</svg>

Dies als Grafik:

http://blog.kr8.de/wp-content/uploads/2019/03/BalancedScorecard-3.svg

Beispiel für Fließtext

Fließtext wurde in SVG 1.2 neu eingeführt. Nicht alle SVG-Tools unterstützen dies.
SVG-Quellcode:

<?xml version="1.0" standalone="no"?>
<svg version="1.2" xmlns="http://www.w3.org/2000/svg"
    id="body" width="350" height="350">
  <title>SVG flowPara Example.</title>
  <g>
    <rect stroke="blue" fill="gold" x="10" y="10" width="200" height="300"/>
    <flowRoot>
      <flowRegion>
        <rect stroke="blue" fill="gold" x="10" y="10" width="200" height="300"/>
      </flowRegion>
      <flowDiv text-align="start">
        <flowPara font-family="Arial" font-size="20" fill="#000000" text-align="start">
                  P1 The quick brown fox jumped over the lazy dog.</flowPara>
        <flowPara font-family="Arial" font-size="20" fill="#000000" text-align="start">
                  P2 Gallia est omnis divisa in partes tres quarum unam incolunt Belgae.</flowPara>
        <flowPara font-family="Arial" font-size="20" fill="#000000" text-align="start">
                  P3 a b c d e f g h i j k l m n o p q r s t u v w x y z</flowPara>
      </flowDiv>
    </flowRoot>
  </g>
</svg> 

Dies als SVG-Grafik mit Version 1.2 Elementen zum Fließtext:

Flow-2.jpg

SVG-Grafik mit Fliesstext

Da hier SVG 1.2 kan das SVG nicht als Original Flow-2.svg richtig angezeigt werden. Daher wir es in ein Flow-2.jpg umgewandelt (mit Inkscape und Libre Office Draw).

 

SVG Tools

SVG Tools 1

 SVG Tools2

SVG Beispiele

 SVG Beispiel 1: Hello World

So sieht der SVG Quelltext aus:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="260" height="60">
	<rect x="10" y="10" fill="blue" width="240" height="40"/>
	<text x="40" y="40" style="fill:gold; font-size:20pt">
		Hello World!
	</text>
</svg>

Diese SVG-Datei wurde als “normale” Grafik auf die WordPress Media Libray hochgeladen.

Das Einfügen dieser SVG-Grafik erfolgt dann in WordPress  “normal” über den “Add Media” Buttom im Editor (der dann ein HTML.IMG daraus macht):

Und so sieht die SVG-Grafik dan hier  aus:

http://blog.kr8.de/wp-content/uploads/2016/08/Helloworld.svg

SVG-Grafik: Hello World

 

SVG Beispiel 2: Tageslänge

http://blog.kr8.de/wp-content/uploads/2016/08/Helloworld.svg

SVG Beispiel 3: RSS Family

Dies Beispiel stammt von der Seite: RSS.

http://blog.kr8.de/wp-content/uploads/2016/08/Rss-family.svg

SVG-Grafik: RSS-Family

 

SVG Beispiel 4: SWISH Flash Animation

Dies SVG-Beispiel stammt von der Seite: SWiSH

http://blog.kr8.de/wp-content/uploads/2016/08/Swish_Flash_Animation.svg

 

Internet: Google Webmaster Tools: Google Analytics – Google AdWords

Gehört zu: Internet
Siehe auch: Google

Google Webmaster Tools

Alle gehosteten WebSites sind im Google Webmasters Tool registriert: http://www.google.com/webmasters/tools

und bei Google Analytics unter Google-Konto mit Tacking-IDs angemeldet: http://www.google.com/analytics/

Google Analytics

Anmelden bei Google Analytics:  http://www.google.com/analytics/

Als erstes benötigen wir ein Google-Konto. Das haben wir normalerweise schon…
Contine reading

Computer: WordPress Menüs – Navigation

WordPress Menüs – Navigation

Gehört zu: WordPress

Menüs zur Navigation zu WordPress-Seiten, kann man ja sehr intuitiv im WordPress-Backend unter dem Punkt “Design > Menüs” einrichten.

Zuvor muss jedes Menü aber “angemeldet” werden. Diese Anmeldung geschieht bei WordPress-Thems in der PHP-Datei “functions.php”.
Nachdem ein Menü in “functions.php” angemeldet wurde und im WordPress-Backend von seiner Struktur her definiert wurde, muss man als dritten Schritt noch für die Ausgabe des Menüs sorgen.

WordPress-Menü anmelden in “functions.php”

 
Die Anmeldung der Menüs erfolgt mit der PHP-Funktion “register_nav_menues()” und kann etwa wie folgt aussehen:
 
register_nav_menus( array(
             primary =>  Erstes Menu ,
             secondary => Zweites Menu,
             tertiary => Drittes Menu,
      ) ) ;
 
Man spricht von “slugs”  ( primary, secondary, tertiary) und “descriptions”  (Erstes Menu, Zweites Menu, Drittes Menu).
Die Bezeichnungen ‘Erstes Menu’, ‘Zweites Menu’ und ‘Drittes Menu’  erscheinen dann im WordPress-Backend unten unter Menü-Einstellungen – Position im Theme.

Menü-Strukturen definieren im WordPress-Backend unter Design > Menüs

 
Im WordPress-Backend werden nun Menü-Strukturen (Hierarchie von Seiten) definiert.  Die Seiten müssen zu diesem Zeitpunkt schon mal vorhanden sein – ggf. nur als Dummies mit leerem Inhalt o.ä.

Im WordPress-Backend  bekommt jede hier angelegte Menü-Struktur einen weiteren sprechenden Namen, der ausschließlich hier im WordPress-Backend zur Benennung und Auswahl (“Wähle ein Menü zum Bearbeiten:…” – richtiger Weise “Wähle eine Menü-Struktur….”) benutzt wird. Ich kann hier beliebig viele Menü-Strukturen definieren. Muss dann aber letztlich jedem angemeldeten Menü (s.o.) eine Menü-Struktur zuordnen. Dazu wird bei einer Menü-Struktur unten im WordPress-Backend unter Menü-Einstellungen – Position im Theme eine “Description” ( ‘Erstes Menu’, ‘Zweites Menu’ und ‘Drittes Menu’ ) angehakt.

WordPress-Backend-Menuestruktur.jpg

WordPress backend Menue-Strucktur

WordPress-Menü Ausgeben auf die Web-Seite

 
Für die Ausgabe eines Menüs ist die Position (Ort)  auf der Web-Seite und die Gestaltung des Menüs (Farben, Schrift, Kästchengröße, Verhalten bei Klick, Hover etc.) anzugeben.
Typischweise ist der Ort eines Menüs im Header-Bereich – kann aber auch an anderen Stellen plaziert werden.
Die Ausgebe-Befehle (z.B. in der PHP-Datei “header.php”) erfolgt mit der PHP-Funktion “wp_nav_menu()” und kann etwa wie folgt aussehen:
   <?php
                      wp_nav_menu( array(
                          theme_location     => primary,
                          depth              => 2,
                          container          =>  div,
                          container_class    => collapse navbar-collapse navbar-ex1-collapse,
                          menu_class         =>  nav navbar-nav,
                          fallback_cb        => wp_bootstrap_navwalker::fallback,
                          walker             => new wp_bootstrap_navwalker())
                      ) ;
        ?>
Man sieht, dass hier die Menüs mit ihrem “slug” (also ‘ primary’, ‘ secondary’ etc.),  so wie bei der Anmeldung vergeben, identifiziert werden.
Die Gestaltung (Aussehen) des Menüs erfolgt dann durch die diversen CSS-Klassen ( z.B. “nav”, navbar-nav”) und das  “Walker-Objekt”…..

Computer: Web Prototyping

Web Prototyping

Für das Prototyping von HTML-Seiten gibt es viele ganz unterschiedliche Tools.

Pingendo ist ein HTML-Editor auf Bootstrap-Basis

http://t3n.de/news/pingendo-einfaches-prototyping-608076/

Stichworte

  • Stichwort: wireframe
  • Stichwort: Click-through    Clickpfad  Klickpfad
  • Stichwort: Mockup

Tools

  • Tool: Fireworks
  • Tool: Axure
  • Tool: Pencil Project   http://pencil.evolus.vn/Downloads.html
  • Tool: Balsamiq