Diagramme einfach mit Javascript-Modul Mermaid erstellen

Mit dem freien Javascript-Modul Mermaid lassen sich mit einer einfachen Textsyntax ohne Kosten Diagramme erstellen. Sie eignen sich besonders für den Einsatz auf Internetseiten. Wer gelegentlich kleine bis mittelgroße Infografiken von Fluss- und Tortengrafiken bis zu Gantt-Diagramme auf Internetseiten veröffentlicht, braucht dafür nicht unbedingt Bilddateien aus lizenzpflichtiger Standalone-Software einbinden. Das freie Javascript-Modul Mermaid reicht in vielen Fällen schon aus. Mermaid wandelt nach einem bestimmten Muster aufgebaute Texte ganz automatisch in Diagramme um. Dieser „Diagramm-Quellcode“ kann ganz einfach direkt in eine HTML-Datei geschrieben werden. Das sich daraus ergebende Diagramm passt sich der HTML-Darstellung im Browser an und verpixelt zum Beispiel auch bei starkem Zoom nicht. Mermaid unterstützt eine Reihe von Diagramm-Typen. Das sind in der aktuellen Version 8.13.9 zunächst die Klassiker wie Fluss- und Tortendiagramme und Gantt-Diagramme für Projektmanagement. Darüber hinaus stehen auch stärker technisch ausgerichtete Sequenz-, Klassen- und Zustandsdiagramme zur Verfügung. Voraussetzungen für die Nutzung Technisch kann Mermaid auf nahezu jedem System eingesetzt werden. Zum Testen muss noch nicht einmal ein Webserver installiert sein – dafür braucht man nur einen Texteditor und einen Browser. Mermaid kommt als einzelne Javascript-Datei mermaid.js. Diese Datei muss als Quelle in einem Script-Tag im HTML-Code angegeben werden. Dabei kann sie über die URL   https://cdn.jsdelivr.net/npm/mermaid@8.13.9/dist/mermaid.js auch direkt aus dem Content-Delivery-Network JSDelivr heraus eingebunden [...]

2022-04-09T15:20:09+02:00April 9th, 2022|Coding, CSS, HTML, Javascript|Kommentare deaktiviert für Diagramme einfach mit Javascript-Modul Mermaid erstellen
Weiterlesen

PHP und Symfony: Erste Hauptversion der Bibliothek Panther

Von der Version 0.1.0 bis Version 1.0 brauchte es zwei Jahre Entwicklungszeit, und endlich  liegt die Browser-Testing- und Web-Scraping-Bibliothek Panther in der ersten Hauptversion vor. Die Standalone-Bibliothek basiert auf der WebDriver W3C-Spezifikation und steht jetzt für alle Entwickler zur Nutzung mit PHP und Symfony bereit. Mit ihr lassen sich Webseiten scrappen und End-to-End-Tests mit Browsern durchführen. In Chrome und Firefox ist die native Unterstützung für Panther schon eingebaut. Die Browser Safari, Edge und Opera brauchen dazu noch eine zusätzliche Konfiguration. Die Software unterstützt auch Cloud-Testing-Anbieter wie zum Beispiel Sauce Labs und Browserstack. Integration mit JavaScript Bei Symfony arbeitet das Team an einer unkomplizierten JavaScript-Integration in das Framework. Dazu kommt Panther mit einer Implementierung für die BrowserKit-API, mit der man das Framework im Symfony-Umfeld einfacher nutzen kann. Deshalb lassen sich bestehende funktionale Tests mit Panther in einem Browser fast ohne Codeänderungen ausführen. Per JavaScript erweiterte Twig-Templates kann man beispielsweise mit dem Test-Framework PHPUnit testen. Panther startet automatisch einen Webserver, der die Anwendungen und Browsertreiber exportiert – es braucht also keinen Selenium Server. Danach verwendet Panther die PHP WebDriver-Bibliothek, um den Vorgang durchzuführen. Neue Flex Recipes und Assertionen In der neuen Version 1.0 erhält Panther eine neue Anweisung für Symfony Flex (Flex Recipe), welche die benötigte Konfiguration erzeugt. Mit [...]

2021-02-12T00:24:04+02:00Februar 12th, 2021|Browser, Coding, Javascript, PHP, Webwerkzeuge|Kommentare deaktiviert für PHP und Symfony: Erste Hauptversion der Bibliothek Panther
Weiterlesen

Chrome 70 könnte Tausende Webseiten sperren

Am nächsten Dienstag, dem 16. Oktober 2018, veröffentlicht Google seinen neuen Browser Chrome 70. Das könnte möglicherweise dazu führen, dass tausende von Internetseiten mit dem Google-Browser nicht mehr aufrufbar sein werden. Der Grund sind veraltete Sicherheitszertifikate. Google hatte schon vor einiger Zeit angekündigt, dass Zertifikate von Symantec, die vor dem Dezember 2017 ausgestellt wurden in Chrome und in Chrome OS nicht mehr unterstützt werden. Trotzdem haben viele der betroffenen Seitenbetreiber bisher nicht darauf reagiert, dabei unter anderem auch einige der meistbesuchten Seiten der Welt. Besucher von Internetseiten, die noch ein für Chrome nicht mehr vertrauenswürdiges Symantec-Zertifikat benutzen, sehen dann möglicherweise nur noch eine Fehlermeldung. Auch Internetseiten, deren Ressourcen wie beispielsweise JavaScript- oder CSS-Stylesheets von einem Host mit einem solchen Symantec-Zertifikat bereitgestellt werden, funktionieren dann möglicherweise nicht mehr korrekt. Welche Zertifikate blockiert werden, ist von der Chrome-Version und dem Datum abhängig, an dem die Zertifikate erstellt wurden: Chrome-Version Standardverhalten (blockieren) Chrome 66 bis Chrome 69 Von Symantec nach dem 01.12.2017 und vor dem 01.06.2016 ausgestellten Zertifikaten wird misstraut, aber alle zwischen diesen Daten ausgestellten Zertifikate sind zulässig. Chrome 70 bis Chrome 73 Allen von Symantec ausgestellten Zertifikaten wird misstraut.  

2018-10-11T09:45:11+02:00Oktober 11th, 2018|Browser, CSS, Javascript|Kommentare deaktiviert für Chrome 70 könnte Tausende Webseiten sperren
Weiterlesen

Javascript-Engine Chakra unter Windows 10 für alle Anwendungen

Das haben sich viele Programmierer gewünscht, und Microsoft erfüllt den Wunsch nun endlich: Die Javascript-Engine Chakra, die mit HTML, CSS und JavaScript geschriebene Browser-Anwendungen in Windows 10 ausführt, kann unter dem kommenden Windows Programme auch außerhalb des Browsers ablaufen lassen. Chakra kann unter Windows 10 sowohl in klassischen Win32-Programmen als auch in Verbindung mit Universal Windows Applications. Die geänderten APIs unterstützen die Universal Windows Platform (UWP) sowie ECMAScript 6 nativ und werden in einem Blogbeitrag der Entwickler im Detail beschrieben. Bisher ließ sich Chakra außerhalb des Browsers nur für besondere serverseitige Anwendungsfälle in Verbindung mit Microsoft-Produkten wie Outlook.com und DocumentDB, Microsofts eigener NoSQL-Datenbank auf Azure nutzen. Screenshot: thewindowsclub.com  

2015-05-19T15:58:43+02:00Mai 19th, 2015|Allgemein, Webwerkzeuge|Kommentare deaktiviert für Javascript-Engine Chakra unter Windows 10 für alle Anwendungen
Weiterlesen

Das Ende der Browser-Plugins naht

Deutliche Verbesserungen bei JavaScript und CSS haben die klassischen Plug-ins inzwischen zu überflüssigen Relikten gemacht. Weil es mit NPAPI kaum möglich ist, Plug-ins einigermaßen sicher in der Sandbox auszuführen oder wie bei modernen Browsern direkt Grafikprozessoren anzusprechen, um Performance-Reserven aus der Hardware herauszuholen, aber auch wegen häufiger Abstürze wird NPAPI in Chrome in Zukunft nicht mehr unterstützt. Der Rückzug läuft etappenweise:Zurzeit führt Chrome solche Plugins (außer Java) noch per Default aus. Ab Januar laufen sie aber nur noch nach Aktivierung durch den Benutzer, und ab April 2015 auch dann nicht mehr, nur das Flag enable-npapi kann sie nach April ausnahmsweise nochmal aktivieren – bis auch das im September nächsten Jahres nicht mehr geht. Bei Mozillas Firefox sind die NPAPI-Plugins schon seit Version 30 defaultmäßig deaktiviert. Einige veraltete Plugins (z.B. Java, Quicktime und Flash) stehen dort schon auf einer Sperrliste. Der Internet Explorer von Microsoft unterstützt die NPAPI-Plug-Ins aus Sicherheitsgründen schon seit mehr als 10 Jahren nicht mehr.

2014-11-25T19:49:10+02:00November 25th, 2014|CSS, HTML, Javascript|1 Kommentar
Weiterlesen

Adobe-Editor Brackets 1.0 veröffentlicht

Adobe hat soeben seinen quelloffenen Editor Brackets in der  Version 1.0 veröffentlicht. Brackets wurde schon im Juni 2012 präsentiert, und obwohl er erst jetzt die für viele Open-Source-Projekte wichtige Version 1.0 erreicht hat, bekam er schon früh ein Backing auch durch kommerzielle Produkte. Brackets ist unter anderem die Basis für Edge Code, den Editor von Adobes Creative Cloud, und wird auch bei Intels XDK (Cross Platform Development Kit) eingesetzt Der Editor selbst wurde in HTML, CSS und JavaScript geschrieben und ist für die Entwicklung mit genau diesen Webtechniken vorgesehen. Er hat interessante Features wie eine "Live Preview", über die man einfach zwischen Browser-Sicht und Sourcecode wechseln kann, einen Inline-Editor, Unterstützung für Präprozessoren und die Möglichkeit, Erweiterungen und Workflow-Tools wie Git-Integration und JSHint-Unterstützung zu nutzen. Mit Brackets 1.0 zusammen gibt es eine Preview-Ausgabe von Extract for Brackets. Diese Erweiterung soll automatisch Design-Information wie Farben, Gradienten und Bildelementen aus einem Photoshop-Dokument ziehen und daraus ein CSS erzeugen können. Ein interessantes Werkzeug von Adobe für Entwickler von Internetseiten!

2014-11-06T16:29:11+02:00November 6th, 2014|Allgemein, Webwerkzeuge|Kommentare deaktiviert für Adobe-Editor Brackets 1.0 veröffentlicht
Weiterlesen

Mozilla bringt neuen Firefox für Entwickler

Der Schwerpunkt der Verbesserungen bei der in der nächsten Woche erscheinenden neuen Version des Mozilla-Browsers Firefox zielt auf Entwickler. “Wir haben den Browser überarbeitet, indem wir ihn mit ganz anderen Augen betrachtet haben, um die Interessen von Entwicklern voranzustellen”, liest man dazu in einem Eintrag im Mozilla-Blog. Wer Internetseiten erstellt, wird sich über die vielen Programmiertools freuen, die jetzt in Firefox zur Verfügung stehen. Dazu gehören Tools wie WebIDE, das eine integrierte Entwicklungsumgebung mit einem Editor für HTML, JavaScript und CSS-Dateien enthält,  und der Firefox Tools Adapter, der es den Programmierern ermöglicht, ihre Internetseiten und Apps mit Browsern anderer Anbieter wie Chrome für PCs, Chrome für Android und Safari für iOS zu testen.

2014-11-04T10:21:16+02:00November 4th, 2014|CSS, HTML, Javascript|Kommentare deaktiviert für Mozilla bringt neuen Firefox für Entwickler
Weiterlesen

Google bringt Betaversion von Chrome 37

Direkt nach der Vorstellung einer neuen Finalversion hat Google wie immer nach dem stabilen Chrome 36 jetzt auch die erste Betaversion von Chrome 37 online gestellt. Schriften sind unter Windows besser lesbar Für Nutzer von Windows geht ein lange bestehender Wunsch in Erfüllung. Die Schriften in den Webseiten werden jetzt besser lesbar gerendert. Chrome nutzt jetzt für die Schriften Microsofts Programmierschnittstelle DirectWrite API, die geräteunabhängig ein klareres Schriftbild liefert. Bis jetzt nutzte Chrome das alte GDI. Windows-Nutzer forderten schon seit Jahren Verbesserungen. Die Umstellung auf DirectWrite hat angeblich so lange gedauert, weil eine umfangreiche Überarbeitung der Font-Rendering-Engine nötig gewesen ist. Mit der endgültigen Version von Chrome 37 sollten alle Windows-Anwender beim Erscheinungsbild von Texten die Verbesserungen deutlich erkennen, verspricht Google. Neues bei HTML5, CSS Shapes und JavaScript Ganz neu ist jetzt auch, dass Chrome 37 das HTML-5-Element dialog versteht, mit dem man Dialoge erstellen kann. Das Element kann mit einem form-Element kombiniert werden, so dass Programme Formulare in eigenen Fenstern anzeigen können. Bisher ging so etwas nur mit JavaScript-Frameworks. Solche Dialoge können auch modal sein, so dass das Weiterarbeiten erst nach ihrem Schließen möglich ist. Dabei liefern sie auch einen Rückgabewert an die Anwendung. Standardmäßig ist jetzt zum Berechnen von Hashwerten, Signieren und Prüfen von Signaturen sowie zum Ver- und Entschlüsseln die JavaScript Cryptography API aktiviert, ebenso das CSS-Shapes-Modul, mit dem man [...]

2014-07-18T17:02:43+02:00Juli 18th, 2014|CSS, HTML, Javascript|Kommentare deaktiviert für Google bringt Betaversion von Chrome 37
Weiterlesen

Online-Shops mit xt:Commerce sind akut gefährdet

Zehntausende von Online-Shops haben ein Problem: Die Shopsoftware xt:Commerce 3 und deren Forks wie Gambio und Modified haben zwei Schwachstellen, die es zusammen Angreifern gestatten, Shops komplett zu übernehmen. Nach ersten groben Schätzungen wird die Software in ungefähr 50.000 Shops genutzt. Es gibt allerdings schon Workarounds und Patches, um sich dagegen zu schützen. Entdeckt wurde die Lücke von Gambio-Entwicklern, die das Problem selbst als kritisch einstuften und alle ihre registrierten Shopbetreiber schon informierten. Die Lücken wurden bei internen Tests entdeckt. Deshalb nehmen die Entwickler an, dass sie aktuell noch nicht aktiv ausgenutzt werden. Das könnte sich aber nach dem Bekanntwerden jetzt sehr schnell ändern. Es handelt sich bei den Sicherheitslücken um ein persistentes XSS (Cross Site Scripting)- und ein CSRF (Cross Site Request Forgery)-Problem. Richtig ausgenutzt, können Angreifer damit den Admin-Zugang des Shops übernehmen. Betroffen sind davon xt:Commerce bis Version 3.04 SP2.1, Gambio bis v2.0.13.3, Modified (alle Versionen) und möglicherweise noch weitere xt:Commerce-Weiterentwicklungen.

2013-12-13T06:31:39+02:00Dezember 13th, 2013|Allgemein, Webwerkzeuge|Kommentare deaktiviert für Online-Shops mit xt:Commerce sind akut gefährdet
Weiterlesen

Der Einsatz von Lightbox 2 für Bilder und Galerien

Sie kennen das Javascript-Programm Lightbox 2 sicher schon von diversen Seiten im Netz. Gerade, wenn mehrere Bilder von Produktfotos bis zu Partnerseiten-Fotos angezeigt werden, wird die Seite dunkel geschaltet und ein Fenster mit dem ersten Bild als Overlay darüber gelegt. Die Lightbox 2 gibt es kostenlos im Internet, aktuell ist die Version Lightbox 2.51. Nach dem Download wird das Paket entpackt. Für einen ersten Test kann man das Verzeichnis lightbox komplett auf den Internetserver verschieben. Mit Aufruf der index.html in diesem Verzeichnis bekommt man die Demobeispiele mit Einbindungsanleitung auf den Bildschirm. Um die Lightbox im eigenen Projekt zu nutzen, gibt man im Header der Seite die Javascript-Dateien und die Style-Datei an: <link href="css/lightbox.css" rel="stylesheet" /> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/lightbox.js"></script> Die Lightbox wird durch das rel-Attribut angesteuert. Mit der Zeile <a href="images/bild1.jpg" rel="lightbox" title="my caption">Bild 1</a> wird ein einzelnes Bild im Lightbox-Overlay angezeigt, mit den Zeilen <a href="images/bild1.jpg" rel="lightbox[roadtrip]">Bild 1</a> <a href="images/bild2.jpg" rel="lightbox[roadtrip]">Bild 2</a> <a href="images/bild3.jpg" rel="lightbox[roadtrip]">Bild 3</a> bringt man alle drei Bilder als Galerie ins Lightbox-Overlay. Beachten Sie aber beim Einbinden in Ihr Projekt die korrekten Pfade für die Javascript-Dateien, die CSS-Datei und auch für die Bilder und passen Sie die wenn nötig entsprechend an.

2013-03-28T10:14:40+02:00März 28th, 2013|Bildbearbeitung, CSS, HTML, Javascript|Kommentare deaktiviert für Der Einsatz von Lightbox 2 für Bilder und Galerien
Weiterlesen
Nach oben