Meine Seite

Vorwort

M eine private Seite dient „grundsätzlich dem Selbststudium“; ich verspreche mir vertiefende Kenntnisse und praktische Erfahrung u. a. in den Bereichen Softwaretechnik und Webdesign. Durchs Recherchieren und Anwenden lerne ich neues gezielt anzuwenden und mehr Expertise in den genannten Bereichen.

Auch entwickelt man sich durch das Bloggen weiter:
ich lerne mich verständlich auszudrücken, meine Gedanken zu strukturieren und Inhalte interessant aufzubereiten. Viele Beiträge auf dieser Seite sind im Zusammenhang mit der Erstellung dieser Internetpräsenz entstanden bzw. beruhen auf die gemachten Erfahrungen u. a. mit den verwendeten Werkzeugen / Technologien.

Warum mache ich es mir zur Aufgabe, überhaupt HTML, CSS, SEO und JS zu lernen?

…, wenn es doch bereits Software gibt, die sog. „fertige“ Websites erzeugt? Die Antwort ist einfach: es geht darum die Zusammenhänge zu verstehen und dadurch ist man in der Lage, ein erfolgreiches Projekt im Web zu starten bzw. zu begleiten und für mich ganz wichtig zu bewerten. Auch bin ich davon überzeugt, dass die Art wie wir Seiten erstellen sich verändern wird, das bedeutet für mich, dass der Einsatz von Contentmanagementsystemen abnehmen wird.

Themen meines Blogs bzw. meiner Seite

Wer einen Blog betreibt, sollte über das Schreiben, das einen interessiert und da meine Interessen sehr vielfältig sind, grenze ich nicht ab, wie es allgemein empfohlen wird, wenn man einen sog. professionellen Blog betreiben möchte :) d. h. ich schreibe über alles was mich bewegt bzw. interessiert – wie es meine Freizeit zulässt. Mein Ziel ist es, nicht viele einzelne Beiträge zu schreiben – sondern einzelne Themen in einem Block abzuhandeln und in die Tiefe zu gehen. Mit der Möglichkeit, bei Bedarf jederzeit zu ergänzen.

Mir ist auch bewusst, dass einzelne Themengebiete viel zu komplex sind, um diese auf ein paar Zeilen zu reduzieren. Dieser Blog dient mir dabei, Inhalte festzuhalten, die mich beschäftigen und bei denen die Chance besteht, dass sie es wieder tun. Ein Blogbeitrag hat weniger die Eigenschaft, einfach zu verschwinden und es besteht die kleine Chance, dass einzelne Beiträge noch von Nutzen sind.

Die Kombination Softwaretechnik, Webdesign und Urlaub / Vorlieben … mag für den einen oder anderen Besucher auf den ersten Blick irritierend sein – aber das privat entstandene Medienmaterial kann ich ohne Bedenken für meinen Blog verwenden.

SEO

Mir ist bewusst, dass meine Inhalte im Bereich Blog zurzeit nur bedingt gefunden werden, da Suchmaschinen wie Google dynamische Seiten nicht auswerten können. Die Lösung wäre, die Beiträge auch statisch bereitzustellen, da aber das Finden der Inhalte für mich momentan eher zweitrangig ist und ich eine andere Priorisierung habe, muss das erst einmal warten. Hintergrund ist, dass ich zwingend eine sogenannte Single-Page-Application realisieren wollte, da ich von dem Konzept überzeugt bin (siehe Ajax-Programmierung).

Ajax-Programmierung

Ajax (auch AJAX; Apronym von engl. Asynchronous JavaScript and XML) bezeichnet ein Konzept der asynchronen Datenübertragung zwischen einem Browser und dem Server. Dieses Konzept ermöglicht, HTTP-Anfragen durchzuführen, während eine HTML-Seite angezeigt wird, um die Seite zu verändern, ohne sie komplett neu zu laden.

Webseiten ohne AJAX nutzen u. a. Links und Formulare, um mit dem Webserver zu agieren; mittels einem Link oder einer Formularanfrage erfolgt über den Browser eine HTTP(S)-Anfrage an den Webserver. Der Webserver liefert üblicherweise ein HTML-Dokument zurück, das der Browser anstelle des vorherigen Dokument anzeigt. Ohne Ajax muss also immer ein vollständiges HTML-Dokument vom Server geladen werden. d. h. mittels AJAX werden mit dem Server nur Datenpakete ausgetauscht, die gerade benötigt werden. Wie in meinem Blog kommt eine sogenannte Single-Page-Application zum Tragen, bei der es eine Einstiegsseite gibt und der weitere Datenaustausch mit dem Webserver erfolgt per JavaScript im Hintergrund. Über die DOM-Schnittstelle wird das Dokument entsprechend gestaltet.

Kommentare

Ich habe schlicht nicht die Zeit dafür, da ich meine Seite in meiner Freizeit pflege. Eine Seite ohne Kommentar-Funktion ist leichter zu handhaben, da eine Vielzahl an Funktionen / Aufgaben wegfallen wie Spamfilter und Kommentar-Verwaltung. Es verhindert auch Angriffe auf Eingabeformulare und zudem bin ich rechtlich auf der sicheren Seite und muss nicht die Verantwortung für fremde Kommentare tragen. Die meisten Nutzer sind eher passiv unterwegs und kaum noch bereit zu kommentieren.

Trotzdem freue ich mich, wenn jemand ein Feedback zu einem meiner Inhalte äußern will; dazu reicht aus meiner Sicht auch ganz klassisch – eine E-Mail; dies ist für mich deutlich entspannter, da ich somit Zeit habe darauf zu antworten; nützliche Kommentare füge ich den Einträgen per Update-Eintrag hinzu.

Abgrenzung

Sämtliche Beiträge auf jbi-weisendorf.de sind komplett losgelöst von meinen Arbeitgeber zu sehen und meine rein persönliche Angelegenheit.

Moderne Browser / Javascript

Meine Seite richtet sich ausschließlich an Nutzer mit einem modernen Browser, ich habe schlicht nicht die Zeit und Muße sicherzustellen, dass meine Seite auf jeden Browser funktioniert; und ohne JavaScript geht auf dieser Seite nichts!

Status

Dezember 2018

  • Update des verwendeten Frameworks (Bootstrap) auf meiner Webseite auf die Stabile-Version 4.1.3

    Bei einem Update wie in diesem Fall u. a. beim Aktualisieren der CSS-Dateien kommt es vor, dass in mehreren Stilregeln für das gleiche Element unterschiedliche Werte für die gleiche Eigenschaft definiert worden. In solchen Fällen können recht seltsame Dinge passieren, etwa dass das Einklappen bzw. das Ausklappen von Elementen auf meiner Seite nicht mehr möglich war. Und dann begibt man sich in die Tiefen der Externen- und Internen-Stylesheets und sucht nach dem Fehler.

Juli 2018

  • Umleitung aller Domains, die auf dieses Verzeichnis zeigen von http auf https per .htaccess-Datei.

Februar 2018

  • Update des verwendeten Frameworks (Bootstrap) auf meiner Webseite auf die Stabile-Version 4.0

Januar 2018

  • Zur besseren Lesbarkeit sind die News über festgelegte Themenfelder eingrenzbar; dies erfolgt per JavaScript und CSS3.

  • Seiten-Menüs (Navigation) müssen auf jedem Ausgabegerät gut nutzbar sein; eine breite Menüleiste mit etlichen Menüpunkten lässt sich auf mobilen Endgeräten so gut wie nicht darstellen und vor allem nicht bedienen. Daher habe ich mittels JavaScript einige Anpassungen vorgenommen, um die Seite effektiver bedienen zu können; über den Brand-Button, links oben, (Jürgen Bierlein) erfolgt die Navigation über alle Seiten und mittels dem Hamburger-Menü (☰) erfolgt die Steuerung auf der aktuellen Seite u. a. wird per JavaScript beim Öffnen eines Menüs ggf. eine offene Navigation geschlossen.

  • Die Seite zur Malediven-Insel Komandoo ist nun auch Responsive d. h. für die unterschiedlichsten Ausgabegeräte gut nutzbar.

Dezember 2017

  • Update des verwendeten Frameworks (Bootstrap) auf meiner Webseite auf die Version 4.0 beta 3

November 2017

  • Habe mich doch entschlossen, die Seite für den IE11 und den Edge anzupassen.

  • Meine Inhalte, wie eingangs beschrieben werden nicht gefunden, da Suchmaschinen wie Google dynamische Seiten nur bedingt auswerten können. Die Lösung für mich: die einzelnen Beiträge auch statisch bereitzustellen; daher habe ich meinen Workflow entsprechend angepasst d. h. beim Ändern eines Inhalts wie z. B. den Footer erfolgt dies zentral an einer einzigen Stelle in einem ausgelagerten HTML-Code; per Javascript generiere ich den statischen HTML-Code aus den unterschiedlichsten Bausteinen.

    Mittels minifier reduziere ich unnötige Inhalte, die z. B. aus zusätzlichen Leerzeichen, Zeilenumbrüchen und Einzügen resultieren. Bei Verkürzung der HTML-, CSS- und JavaScript-Codes können diese schneller heruntergeladen, geparst und ausgeführt werden.

    Nachfolgend das Script, das ich nutze, um den statischen Code zu speichern.

    function dokumentGeladenForSave(e) {
     if (window.location.protocol === "file:") {
      var quineHtml = '<!doctype html>\n<html>\n' + document.documentElement.innerHTML + '\n<\/html>\n';
      var pathArray = window.location.pathname.split('/');
      var sName = pathArray[pathArray.length - 1];
      var sNameArray = sName.split('.');
      var sTmp = "";
      for (var i = 0; i < sNameArray.length - 1; i++) {
       sTmp += sNameArray[i];
      }
      if (sTmp.endsWith("_JBi")) {
       var blob = new Blob([quineHtml], {
    type: 'text/html5'
    });
    var sDateiName = sTmp.slice(0, sTmp.length -4);
    saveAs(blob, sDateiName +".html");
    }
    }
    }

    if (window.location.protocol === "file:") {
    document.addEventListener("load", dokumentGeladenForSave, false);
    document.addEventListener("DOMContentLoaded", dokumentGeladenForSave, false);
    }

Oktober 2017

  • Auf der ersten Seite und im Blog eine Hilfe integriert.

  • Update des verwendeten Frameworks (Bootstrap) auf meiner Webseite auf die Version 4.0 beta 2
    Quelle: Bootstrap Currently v4.0.0-beta.2

  • Update der Seychellen-Seite mit Informationen und Fotomaterial von unserem Urlaub im Sept. / Okt. 2017.

August 2017

  • Realisierung einer Schlagwortsuche auf der Blog-Seite: ein Schlagwort bezeichnet einen manuell definierten Suchbegriff für einen Beitrag. Beim Erstellen der Beiträge habe ich jedem Beitrag ein Schlagwort oder mehrere Schlagwörter zugeteilt.

  • Erstellung einer News-Seite; diese enthält Beiträge, die es nicht auf die erste Seite bzw. nicht in meinen Blog geschafft haben. In meinem Blog möchte ich nur Beiträge einstellen, die lange Zeit bestand haben und die ich ggf. immer wieder aktualisiere.

  • Erstellung der Seychellen-Seite und der Kärnten-Seite.

  • Erstellung einer Seite zur Unterwasserfotografie.

April 2017

Softwaretechnologie / Unterhaltungselektronik

Motivation, Status, Webpräsenz

Can I Use

Compare Browser

Die Seite Can I Use zeigt die Browserunterstützung für Frontend-Web-Technologien (HTML, SVG, CSS, etc.) für Desktop- und Mobile-Browser an.

Die Ergebnisse können unter der interaktiven Seite tests.caniuse.com für die unterschiedlichsten Browser eingesehen werden.

Passend zum Thema

Das World Wide Web

Browserunterstützung, Frontend-Web-Technologien, Can I Use

Framework für die Gestaltung von Websites

ist ein Framework für die Gestaltung von Websites und Webanwendungen. Es enthält auf HTML und CSS basierende Gestaltungsvorlagen sowie zusätzliche, optionale JavaScript-Erweiterungen und eine hervorragende Dokumentation.

Das Frontend-Framework stammt ursprünglich aus der Entwicklungsabteilung von Twitter. Bootstrap ab der Version 3.0 hat einen strikten Mobile-First-Ansatz. Vor allem dieser Punkt war für mich ausschlaggebend für die Verwendung von Bootstrap.

Update im Februar 2018 zu Bootstrap

Es ist soweit die 4.0-Version von Bootstrap ist online und kann verwendet werden.

Ein Theme ist eine Zusammenstellung von grafischen Elementen und Einstellungen, die das Aussehen und Verhalten einer Benutzeroberfläche festlegen. Folgende Links helfen beim erstellen eines Theme für das Bootstrap-Framework.

Bootstrap-Magic

Easily create your own Twitter Bootstrap theme

Lavis Bootstrap color scheme

Lavis helps to generate your own Bootstrap color scheme from an image and customize to your taste. You can also use samples according to your needs.

Bootstrap color scheme

LayoutIt

LayoutIt create your frontend code simple and quickly with Bootstrap using our Drag & Drop Interface Builder.

Create your frontend code simple and quickly

Nächste Version des Frontend-Frameworks steht in den Startlöchern

Ein visueller Guide vom Theme-Ersteller ThemesGuide zeigt die Änderungen. Unter anderem wurde das Grid-System erweitert und ist jetzt flexibler als in früheren Versionen.

Links

Prototyping, Mockup

Pingendo

The simplest app (Mac, Windows, Linux) for Bootstrap prototyping.

App for Bootstrap prototyping

Bootstrap 4 Cheat Sheet

Eine interaktive Liste von Bootstrap-Klassen für Version 4.0.0-alpha.6; Klasse gemacht :)

interaktive Liste von Bootstrap-Klassen

Snippets

Modales Fenster mittels JavaScript schließen und öffnen: $('#searchModal').modal('toggle');

Bootstrap, Webdesign, Frontend-Framework

Datenbank Migration

Open Source Datenbankmigrations-Tool Flyway

Das Datenbank-Tool Flyway nimmt euch Arbeit ab bei der Migration eurer Datenbank. Außerdem verhindert es Fehler, wenn es darum geht, ein update der Datenbank auf die Zielumgebung durchzuführen. Flyway unterstützt die Migrationen mittels SQL und Java. Rund 20 Datenbanken wie Oracle, Derby, SQL Server und EnterpriseDB werden unterstützt.

Eine Migration lässt sich entweder über die Kommandozeile als Kommandozeilen-Anwendung manuell anstoßen oder im Rahmen eines Build-Skripts oder beim Anwendungsstart über die Flyway-API (Jar) ablaufen. Dank der einfachen API sind beliebige Lösungen denkbar.

Funktionsweise

Die erzeugten Skripte auf Basis SQL oder Java, werden in einem Ordner gespeichert. Flyway durchsucht diesen Order sowie dessen Unterordner und wendet die Skripte bei der Migration an. Damit Flyway erkennen kann zu welcher Version ein Skript gehört, muss ein einfaches Namensschema eingehalten werden.

Datenbank, Migration, Tool, Oracle, Derby, SQL Server, EnterpriseDB

Algorithmen

Hin und wieder habe ich mit Algorithmen zu tun. Wie aus der animierten Grafik zu entnehmen ist, geht es um Lösungsalgorithmen für Irrgärten. Labyrinth bzw. Irrgarten bezeichnet ein System von Linien oder Wegen, das durch zahlreiche Richtungsänderungen ein Verfolgen oder Abschreiten des Musters zu einem Rätsel macht.

Lösungsalgorithmen für Irrgärten beschreiben Methoden, mit denen ein Weg aus einem Irrgarten gefunden werden kann; dabei gibt es Algorithmen wie die zufällige Wegwahl, die Rechte-Hand-Methode, der Pledge-Algorithmus und der Trémaux-Algorithmus.

Betrachtet wird die Rechte-Hand-Methode; dabei nutzt man entweder die linke oder die rechte Hand und sich so orientiert an den Wänden des Irrgartens entlang zu bewegen. Die Rechte-Hand-Regel kann auch in Irrgärten mit drei oder mehr Dimensionen angewendet werden; dazu müssen die Kreuzungen in eine zweidimensionale Ebene projiziert werden. Jedoch muss – anders als im zweidimensionalen Fall – die aktuelle Orientierung im Irrgarten immer bekannt sein, um feststellen zu können, in welche Richtung es „nach rechts“ bzw. „nach links“ geht.

Quelle(n): u. a. aus Wikipedia, der freien Enzyklopädie

Softwaretechnik, Algorithmen

Zugangsdaten gestohlen?

Zahl von Cyberangriffen und Datenlecks nimmt stetig zu

Vor kurzem hat das BKA Millionen von Zugangsdaten im Internet „gefunden“; es ist nicht unwahrscheinlich, dass auch die eigenen Zugangsdaten betroffen sind. Von Zeit zu Zeit sollte jeder prüfen, ob die eigenen Daten geleakt wurden.

Über die Webseite ';--have i been pwned? des Sicherheitsforschers Troy Hunt kannst du deine Daten prüfen, indem du deine E-Mail-Adresse eingibst und schon erfährst du, ob deine Daten betroffen sind.

Links

Passend zum Thema

  • Phishing-Mails
  • Online-Profil
  • Verbreitung von Malware

Online Dienste, Sicherheit

Digitalisierung / Transformation

digitale Bildung

Die Digitalisierung verändert unsere Arbeits- und Lebenswelt. Tätigkeitsfelder und ganze Berufsbilder wandeln sich; neue Qualifikationen werden benötigt. Basierend auf dem Internet als Querschnittstechnologie ist der Wandel so tiefgreifend, dass sich dem keine Organisation entziehen kann.

Big Data / Vorratsdatenspeicherung

Es ist wichtig ein Verständnis zu bekommen, was unter Big Data und Vorratsdatenspeicherung zu verstehen ist; das nachfolgende Video verschafft dir einen Einblick über das Thema.

Vortrag auf dem 33. Communication Congress

Flag

Batik-API

Bei der Batik-API handelt es sich um ein Open Source-Projekt der Apache Software Foundation. Mittels der API kannst du SVG-Dateien generieren, verändern oder in andere Formate umwandeln. Das Framework bietet DOM-Unterstützung sowie Schnittstellen für Java2D und SWING.

Die Batik-API ist in Java programmiert und ist auf sehr vielen unterschiedlichen Plattformen lauffähig; das Paket umfasst u. a. einen Viewer (Squiggle) und weitere Tools, wie den Raster-Converter zum Umwandeln von Raster- in SVG-Grafiken oder einen TrueType-Konverter, der TrueType-Schriften in das SVG-eigene Schriftformat konvertiert.

Vektorgrafik-Format

Scalable Vector Graphics (auf Deutsch: Skalierbare Vektorgrafiken) ist ein Standard zur Beschreibung zweidimensionaler Vektorgrafiken. Dieser wurde 1998 entwickelt und 2001 vom W3C als Empfehlung veröffentlicht. SVG basiert auf XML und die Grafik ist mittels einer Baumstruktur aus definierten Elementen und zugewiesenen Attributen aufgebaut. SVG-Grafiken können per Texteditor erzeugt oder bearbeitet werden.

SVG ist das einzige im Web breit einsetzbare Vektorgrafik-Format. Die HTML5-fähigen Browser können SVG inline ohne Namensraum-Angaben direkt im HTML-Code einbetten, der SVG-Code wird vom HTML5-Parser (also keinem speziellem XML-Parser) verarbeitet.

Für folgende Grafik-Kategorieren bietet sich das SVG-Format an:

  • Icons
  • Logos
  • Illustrationen/Animationen
  • Zeichnungen und Infografiken
  • UI-Elemente
  • interaktive Landkarten
  • Diagramme/Visualisierungen

Links

Pie-Chart (CSS)

aus Wikipedia, der freien Enzyklopädie
Ein Kreisdiagramm (Tortendiagramm) ist eine Darstellungsform für Teilwerte eines Ganzen als Teile eines Kreises. Kreisdiagramme werden häufig für die Darstellung von Verteilungen und Anteilen genutzt. Die Anzahl der Teilwerte sollte nicht mehr als 7 betragen, sonst wird das Diagramm unübersichtlich.

20%
60%

Pie-Chart (SVG)

SVG-Code
<svg width="100" height="100">
<circle cx="50" cy="50" r="49" stroke="#655" stroke-width="1" fill="yellowgreen" />
<circle r="25" cx="50" cy="50" fill="none" stroke="#655" stroke-width="48" stroke-dasharray="10 140"></circle>
</svg>

SVG skalieren per CSS

svgSkalieren {
width: 96%;
height: auto;
}

<svg class ="svgSkalieren" viewbox ="0 0 128 128" style="float:left;">

Mittels CSS wird die Grafik entsprechend der festgelegten Breite skaliert. Das width-Attribut erhält hier einen Wert von 96%. Die viewBox beginnt bei 0,0 und hat eine Breite sowie eine Höhe von 128px. Die Browser berechnen und transformieren die SVG-Grafik entsprechend dieser Werte.

Kreisdiagramm

aus Wikipedia, der freien Enzyklopädie

60% 20% 9% 5% 4% 2% Kreisdiagramm

Softwareentwicklung, Java, SVG, Batik-API

Wozu Bibliotheken gut sind

Die wenigsten Entwickler sind zeitlich in der Lage, den Code für ihr Frontend inkl. Backend komplett selbst zu schreiben, zu testen und zu debuggen. Ganz zu schweigen davon, dass niemand das sprichwörtliche Rad stets von Neuem erfinden möchte. Gute Gründe, die für Bibliotheken sprechen.

Dabei ist es eine Herausforderung mit den aktuellen Web-Technologien Schritt zu halten und nicht den Überblick zu verlieren; täglich werden neue Tools, Frameworks und Bibliotheken veröffentlicht. In dieser Übersicht trage ich Bibliotheken für die Frontend-Entwicklung zusammen.

Flickr

Mit dem nachfolgenden Script lade ich meine Daten von Flickr.

Links

Framework jQuery

jQuery ist eine freie JavaScript-Bibliothek, die u. a. Funktionen zur DOM-Navigation und -Manipulation zur Verfügung stellt; die Bibliothek wird laufend weiterentwickelt.

Das Framework gehört zu den bekanntesten und weit verbreitetsten Helfer, die auf Websites eingesetzt werden. Mit jQuery kannst du auf HTML-Elemente zugreifen und diese ggf. manipulieren oder durch Anpassung der CSS umgestalten. JavaScript ist mittlerweile so mächtig, dass die Verwendung von jQuery nicht mehr zwingend notwendig ist und daher versuche ich, wo immer es geht, den Einsatz zu vermeiden bzw. einzuschränken.

Links

ComicBubbles

Speech Ballon JavaScript-Bibliothek

AOS

AOS ist eine kleine Bibliothek zum Animieren von Elementen auf der Seite beim Blättern, ähnlich wie die WOWJS-Bibliothek. Mit AOS kannst du Elemente animieren, während diese nach unten bzw. nach oben scrollen.

Beim Bildlauf nach oben, werden die Elemente in den vorherigen Zustand versetzt und können wieder animiert werden, wenn du nach unten blätterst. Mit der AOS-Bibliothek kannst du sehr einfach Scroll-Animationseffekte hinzufügen; die Bibliothek ist anpassbar, sehr klein und einfach per CDN nutzbar.

Link styles

<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">

Add scripts

<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>

Init AOS

<script>
AOS.init();
</script>

Basic usage

Alles, was zu tun ist, ist das Hinzufügen eines Daten-AOS-Attribut zum HTML-Element

<div data-aos="animation_name">

Animations-Attribute

  • Fade animations
    • fade
    • fade-up
    • fade-down
    • fade-left
    • fade-right
    • fade-up-right
    • fade-up-left
    • fade-down-right
    • fade-down-left
  • Flip animations
    • flip-up
    • flip-down
    • flip-left
    • flip-right
  • Slide animations
    • slide-up
    • slide-down
    • slide-left
    • slide-right
  • Zoom animations
    • zoom-in
    • zoom-in-up
    • zoom-in-down
    • zoom-in-left
    • zoom-in-right
    • zoom-out
    • zoom-out-up
    • zoom-out-down
    • zoom-out-left
    • zoom-out-right

Darstellung von Quellcode

HighlightJs

Für die Darstellung von Quellcode auf meiner Seite verwende ich u. a. die Javascript-Bibliothek highlight.js . Der Quelltext lässt sich zwar mit den Tags „pre und code“ auszeichnen - aber gefälliger sieht er bei der Verwendung eines Syntax-Highlighter aus.

Die Bibliothek hightligth.js unterstützt aktuell 118 Sprachen und kann die verwendete Sprache automatisch ermitteln, berücksichtigt wird dabei auch die Unterscheidung unterschiedlicher Sprachen, wie es auf Webseiten vorkommt (Javascript, HTML, CSS, etc.).

Es besteht auch die Möglichkeit, sich eine benutzerdefinierte Bibliothek zu generieren, die nur die Sprachen enthält, welche man auf seiner Seite einsetzen möchte. Wer auf der Suche nach einem Highlighter ist, sollte sich auf jeden Fall mit den Bibliotheken highlight.js oder Prism befassen, die unter anderem beim Smashing Magazin, WebPlatform.org und dem Mozilla Developer Network eingesetzt wird.

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js" </script>
/* Funktionsaufruf */
<script>hljs.initHighlightingOnLoad();</script>
/* interpretiert wird innerhalb der folgenden Tags */
<pre><code class="html">…</code</pre>

Google Code Prettify

Zus. verwende ich die Bibliothek Google Code Prettify, die sich aus einem Javascript-Modul, das den Code formatiert und einer CSS-Datei, die das Aussehen bestimmt, zusammen setzt; dadurch ist es möglich, die Darstellung nach eigenen Vorstellungen anzupassen.

Google Code Prettify unterstützt gängige Programmier- und Auszeichnungssprachen, von C++, Java und Objective-C zu Skriptsprachen wie JavaScript, PHP und Ruby bis zu den Auszeichnungssprachen wie CSS, XML und Json.

Dabei wird die verwendete Programmiersprache automatisch ermittelt; die Anzeige von Zeilennummern und zusätzliche Darstellungsoptionen runden das Spektrum dieser offenen Bibliothek ab.

Google Code Prettify tut genau das, was es verspricht; zudem ist es leicht an eigene Bedürfnisse anzupassen. Unter anderem verwendet Stackoverflow diese Bibliothek und das spricht für die Qualität.

The lang-* class specifies the language file extensions.
File extensions supported by default include:
"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl".

jQuery Step Wizard Plugin

Step Wizard ist mit Bootstrap Unterstützung.

Features

  • Bootstrap support
  • Responsive themes
  • Heavily customizable toolbar, option to add extra buttons
  • Theme support with various themes included
  • Customizable css styles
  • Url navigation and step selection
  • Public methods for external function call
  • Enhanced event support
  • In-built reset method
  • Dynamically hide or disable steps
  • Integratable to model window
  • Ajax content loading with option to specify individual url for steps
  • Keyboard navigation
  • Easy navigation with step anchors and navigation buttons
  • Multiple wizard instance on same page
  • Auto content height adjustment
  • Compatible with latest jQuery versions (jQuery 1.9+, jQuery 2+, jQuery 3+)
  • Easy to implement, Minimal HTML required

DataTables.js

jQuery Plugin DataTables

Damit kannst du umfangreiche HTML-Tabellen um Funktionen wie Paging, Sortierung und einer Suche auch auf Spaltenebene - erweitern.

Der Zugriff auf die Daten, die u. a. als Tabelle im HTML-Dokument, per JSON-Objekt (intern / extern) oder als ein Javascript-Array vorliegen, erfolgt per Javascript / Ajax.

Siehe Beispiel auf

Bootstrap Tour

Bibliothek Bootstrap-TourIst eine hervorragende Bibliothek für Entwickler; mit dieser ist es möglich, Seitenbesuchern zu zeigen, wie diese, die erstellte Website nutzen können.

Micro-Frameworks

Micro-Frameworks Micro-Frameworks , ist ein Online-Projekt, das eine Vielfalt an Javascript-Frameworks und Libraries listet, denen allen eines gemeinsam ist - sie spezialisieren sich auf eine einzige Aufgabe und daher sind die Micro-Frameworks sehr klein und übersichtlich.

jquerycards.com

jquerycards.com

TodoMVC

TodoMVC TodoMVC , ist ein Online-Projekt, das verschiedene JavaScript-Frameworks verwendet um eine Todo-Anwendung zu realisieren. Ziel ist es, dem Anwender Hilfestellung zu geben bei der Verwendung dieser Frameworks bzw. als Entscheidungshilfe.

PrettyEmbed.js

Mit Hilfe dieser jQuery-Bibliothek lässt sich der Embedded-YouTube-Player individuell anpassen und konfigurieren. So kann u. a. die Größe, Qualität und das Design geändert werden.

PrettyEmbed.js

Links

GraphicsJS – eine leichtgewichtige Grafikbibliothek

GraphicsJS.js

GraphicsJS ist eine quelloffene JavaScript-Grafikbibliothek, die auf SVG basiert und über eine flexible JavaScript-API verfügt. Die Library bietet Text-Features sowie einen virtuellen DOM – losgelöst von der browserspezifischen Implementation des HTML-DOM.

Hinter der JS-Bibliothek steht AnyChart, eines der führenden Unternehmen im Bereich der Visualisierung von interaktiven Daten. AnyChart setzt GraphicsJS bereits seit Jahren für eigene Produkte ein.

Libraries.io, Suchmaschine für Entwickler

Wer als Entwickler nach quelloffenen Bibliotheken, Frameworks oder Tools sucht, kann die Suchmaschine Libraries.iomit über zwei Millionen indexierten Projekten nutzen.

Libraries.io, Suchmaschine für Entwickler

Paver

Paver ist ein jQuery-gestütztes Plugin, das die einfache Anzeige von Wide- / Panoramabildern ermöglicht.

Ich verwende das Plugin auf meiner Urlaubs-Seite über Kärnten.

Paver-Beispiel

Softwareentwicklung, Webdesign, Librarys, Frameworks, Frontend

Auszeit macht produktiver

Wer seine Tätigkeit für wenige Minuten unterbricht, ist produktiver.

Eine Theorie besagt, dass Pausen nach 90 Minuten am effektivsten sind. Wissenschaftler beziehen sich dabei auf den Basic Rest Activity Cycle (BRAC), den Menschen in der Nacht unterliegen und der eine Gesamtlänge von 90 Minuten ausmacht. Innerhalb dieser Zeit durchläuft der Mensch mehrere Leicht- und Tiefschlafphasen und dieser Zyklus wiederholt sich mehrmals, dabei verarbeitet das Gehirn die Informationen des Alltags und erholt sich anschließend.

Doch wie die Pausen zu gestalten sind, darüber scheiden sich häufig die Geister. Hier ein paar ausgewählte Online-Quellen für die Pause 🙂

Links

Google Maps - Satellitenaufnahmen

Google Maps - Satellitenaufnahmen von Mauritania Google bietet eine Sammlung mit eindrucksvollen Satellitenaufnahmen. Hier geht es zur Galerie - mit einem Klick auf den grünen Button „Open Map“ unter der Aufnahme gelangt ihr vom Ausschnitt zur Karte.

Das Foto zeigt ein Sandsteinplateau von Mauretanien; ein Staat im Nordwesten Afrikas am Atlantik.

Google Cultural Institute

Kulturschätze

Entdecke tausende Werke in hochauflösender Qualität aus Museen und Kunstsammlungen auf Google Cultural Institute ; erkunde Kulturschätze aus der ganzen Welt bis ins kleinste Detail – von kaum bekannten Kostbarkeiten bis zu großen Meisterwerken. Google hat es sich zum Ziel gesetzt, diese Werke, allen zugänglich zu machen.

Die New Tab-Seite von Chrome zeigt standardmäßig das Suchfeld der Google Suche, die am meisten besuchten Webseiten - wobei dies individuell angepasst werden kann - und diverse weitere Links in Abhängigkeit der persönlichen Einstellungen (Google+). Diese Seite kann durch Extensions angepasst werden; das Google Art Project hat eine Extension veröffentlicht, die an dieser Stelle Kunstwerke anzeigt.

Die Erweiterung zeigt das Kunstwerk aus dem Art Project im Browserfenster an; mit einem Klick auf die in der linken unteren Ecke eingeblendeten Informationen u. a. Künstler, Museum, Kunstwerkname landet man direkt auf der dazugehörigen Seite im Art Project. Über diverse Symbole auf der Seite kann wieder die Liste der meistbesuchten Webseiten oder der Standardtab aufgerufen werden; per Einstellungen kann das Verhalten der Extension angepasst werden z. b. ob das Hintergrundbild bei jedem Aufruf zufällig geladen oder nur einmal am Tag ausgetauscht werden soll.

Fazit: „Google Art Project“ ist klasse; die Extension eignet sich sowohl für Kunstbegeisterte, als auch für Nutzer, die beim Surfen eine kurze inspirierende Abwechslung suchen.

Die Chrom Extension Google View Project zeigt statt Kunstwerke ausgewählte Satelliten-Ansichten aus Google Maps bzw. Google Earth an.

1245 Musik-Genres samt Hör-Beispielen auf einer Karte

Every Noise at Once - 1245 Musik-Genres samt Hör-Beispielen auf einer Karte! Auf der Webseite Every Noise at Once oben rechts eine bestimmte Band in das Suchfeld eingeben und du bekommt dann das/die entsprechende Genre(s) angezeigt.

Mit einem Klick auf das entsprechende Genre kommt man auf eine weitere Karte, auf der jeweils die Bands zu sehen und anzuklicken sind, die dem Genre zugeordnet sind.

The Nostalgia Machine

The Nostalgia Machine - die größten Musik-Hits eines Jahres anhören Auf der Webseite The Nostalgia Machine das gewünschte Jahr (1960 bis 2013) auswählen und danach werden dir die 100 größten Musik-Hits des Jahres in einer Thumbnail-Ansicht angezeigt.

Beim Klick auf ein Thumbnail wird das entsprechende Video auf Youtube aufgerufen bzw. bei Klick auf „Open year as playlist in disco.io“ kannst du dir die komplette Liste als Audio-Stream anhören.

Hinweis:
Auf der Haupseite ist im Formular aktuell (Sept. 2016) ein Auswertungsfehler.

Flugsimulatoren

Flugsimulatoren

Microsoft hat Microsoft Flight in der Grundversion kostenlos - veröffentlicht. (Knapp 1,5 GB)

Der 3D-Weltraum-Flugsimulator Oolite ist ein Remake des Flugsimulator-Klassikers Elite, welcher seit seinem Erscheinen 1984 noch immer Maßstäbe in der Komplexität setzt.

Das freie Projekt setzt mit viel Liebe zum Detail den Klassiker um, ohne dabei den Charme eines Retrospiels zu verwirken. Wie beim ehrwürdigen Vorbild kannst du dich in der komplexen Planetenwelt als Händler, Pirat oder Piratenjäger versuchen, neue und bessere Raumschiffe erwerben und ausrüsten und dabei auch die verfügbaren Missionen erfüllen. Die Community um das Spiel bietet zahlreiche Erweiterungen.

Die Version des freien Flugsimulators FlightGear zeichnet sich durch neue Flugmodelle, neue Instrumente, verbesserte Objekte wie Gebäude, Flughäfen etc., aus. Der Simulator kann mit mehr als 400 Flugzeugen aufwarten.

Besonders erwähnt wird die neu dazugekommene Cessna 337G Skymaster, weil dieses Flugzeug mit seinem Schub- und Zugpropeller eine ungewöhnliche Triebwerksandordnung hat, aber auch Ultraleichtflugzeuge, Lenkdrachen, Doppeldecker oder große Verkehrsmaschinen können geflogen werden; es sind Versionen für Windows, Mac und Linux erhältlich.

Darstellung von 30 faszinierenden aber leider vom Aussterben bedrohten Tierarten

Species in Pieces ist eine interaktive Darstellung von 30 faszinierenden aber leider vom Aussterben bedrohten Tierarten - mit Informationen, Zahlen und Fakten; die Darstellung erfolgt mittels CSS Polygons.

Try out experiments at the crossroads of art and technology, created by artists and creative coders with Google Arts & Culture.

Musik-Genres, 🎵, Satellitenaufnahmen, Kultur, Nostalgia Machine, Schätze, Spiele