Agile: September 2019

Mit Hilfe von GitHub Pages ist es relativ schnell möglich eine online Visitenkarte oder auch einen Blog vollkommen kostenlos zu erstellen.

Alles was hierzu nötig ist, ist ein GitHub Account (in der kostenlosen Version):

Jetzt muss man ein Repository erstellen (z.B. mit dem Namen "card"):

Anschließend kann man das noch "leere" Repository aufrufen:

Jetzt kann man direkt eine neue Datei mit dem Namen "index.md" anlegen (https://github.com/shemel/card/new/master) und dort seine Informationen (Visitenkarte etc.) hinterlegen:

Hierbei handelt es sich dann um ein Markdown (vereinfachte Auszeichnungssprache): https://github.com/shemel/card/blob/master/index.md

Unter den Einstellungen (Settings) des Repository kann man unter dem Punkt "GitHub Pages" verschiedene Themes aussuchen:

Hier sollte man jetzt den "master branch" und ein passendes "Theme" auswählen. Das Theme selber wird in der "_config.yml" abgelegt:

Jetzt ist die Visitenkarte unter der folgenden URL abrufbar: https://shemel.github.io/card/

Leaflet.js ist eine Open-Source-JavaScript-Bibliothek für interaktive Karten auf der eigenen Webseite.

Die JavaScript Bibliothek ist klein, einfach und flexibel und derzeit wahrscheinlich die beliebteste Open-Source-Mapping-Bibliothek. Gleichzeitig ist Leaflet.js auch eine gute Alternative zu Google Maps, da eine Verwendung nur noch nach Registrierung möglich ist und nur noch in einem geringen Umfang kostenlos ist.

Die Bibliothek ist kostenlos und frei nutzbar (2-Clause BSD License).

Desweiteren ist es möglich, dass die Karten vom eigenen Server ausgeliefert werden können, somit muss im Impressum bei der Datenschutzerklärung (DSGVO) nicht auf einen externen Service verwiesen werden.

Aktuelles Beispiel, wenn die Verwendung der Google Maps API ohne Registrierung erfolgt:

Folgende Informationen fehlen Google: https://developers.google.com/maps/documentation/javascript/error-messages?utm_source=maps_js&utm_medium=degraded&utm_campaign=keyless#api-key-and-billing-errors

Are you using an API key?
Is billing enabled on your account?
Is the provided billing method no longer valid (for example an expired credit card)?
Is there an exceeded self-imposed daily limit on the API?
Does your API key have an IP addresses restriction?

Integration von Leaflet.js in die eigene Webseite:

Download der Bibliothek: https://leafletjs.com/download.html

Ordner entpacken und unter ../leaflet speichern

In der HTML-Datei ein div element mit einer id hinterlegen:

<div id="map_leaflet"></div>

Die CSS‐Datei und das Leaflet‐API‐Script einbinden:

<link rel="stylesheet" href="leaflet/leaflet.css" rel="stylesheet" />

<script src="leaflet/leaflet.js"></script>

Der Kartencontainer (mapid) muss eine definierte Höhe hat z.B. per CSS festlegen:

#map_leaflet{ height: 392px; }

<div id="map_leaflet" style="width:800px; height:392px"></div>

Damit ein Layer anzeigt werden kann, muss der Kartenbereich (hier mit den Koordinaten) initalisiert werden:

var map = L.map('map_leaflet').setView([50.869333, 9.715948], 14);

Wie auch die Google Maps API benötigt die Leaflet API Kartenbilder (Tiles im .png oder .jpeg Format), diese werden je nach Zoomstufe schachbrettartig zu einer Karten zusammengesetzt:

https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png (Templatestring hinzufügen)
Servernummer = (s)
Zoomlevel = (z)
Koordinaten = (x,y)
Zoom Bereich und Copyright werden festgelegt

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
    attribution: 'Map data © OpenStreetMap and contributors CC-BY-SA',
    maxZoom: 18,
    minZoom: 9
}).addTo(map);

Metrischen Maßstab in der Karte einblenden:

L.control.scale({imperial:false}).addTo(map); // metrisch

Mit der Methode L.marker. kann man Orte auf der Karte markieren:

L.marker([50.869333, 9.715948]).addTo(map);

Mit bindPopup kann ein Popup hinterlegt werden und beim Aufrufen der Karte geöffnet werden:

L.marker([50.869333, 9.715948]).addTo(map).bindPopup("Bahnhofsmission Bad Hersfeld").openPopup();

Weitere Beispiele finden sich auch auf der Herstellerseite: https://leafletjs.com/examples.html

Anbei der komplette Quellcode:

<html>
    <head>
...
        <link rel="stylesheet" href="leaflet/leaflet.css" rel="stylesheet" />
...
        <script src="leaflet/leaflet.js"></script>
...
        <script type="text/javascript">
            function showMap() {
                // initialize the map
                var map = L.map('map_leaflet').setView([50.869333, 9.715948], 14);

                // load a tile layer
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    {
                        attribution: 'Map data © OpenStreetMap and contributors CC-BY-SA',
                        maxZoom: 18,
                        minZoom: 9
                    }).addTo(map);

                L.control.scale({imperial:false}).addTo(map); // metrisch

                //L.marker([50.869333, 9.715948]).addTo(map);
                L.marker([50.869333, 9.715948]).addTo(map).bindPopup("Bahnhofsmission Bad Hersfeld").openPopup();
            }
        </script>
    </head>

    <body onload="showMap()">
...
        <div id="map_leaflet" style="width:800px; height:392px"></div>
...
    </body>
</html>

Agile

Seiten

Freitag, 27. September 2019

Download von Video Streams mit ffmpeg

Viele Filme und Serien von Mediatheken kann man nicht einfach als MP4 Datei herunterladen, da diese im "m3u8" Format vorliegen (siehe auch https://en.wikipedia.org/wiki/HTTP_Live_Streaming).

Samstag, 21. September 2019

Klassische Desktop-Symbole unter Windows 10

Auch unter Windows 10 kann man die klassischen Desktop-Symbole z.B. "Computer" oder "Systemsteuerung" wieder aktivieren.

Dienstag, 17. September 2019

Online Visitenkarte mit GitHub Pages