Softwareentwicklung: Unterschied zwischen den Versionen
Codica (Diskussion | Beiträge) |
Codica (Diskussion | Beiträge) |
||
(34 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
== Aktuelles == | == Aktuelles == | ||
− | + | Siehe | |
− | + | * [http://www.heise.de/developer heise.de] | |
− | + | * [http://www.golem.de golem.de] | |
* [http://www.heise.de/developer/podcast/ Heise.de - Podcast für Entwickler] | * [http://www.heise.de/developer/podcast/ Heise.de - Podcast für Entwickler] | ||
+ | * [https://open.hpi.de/courses Kurse zu IT des Hasso-Plattner-Instituts] | ||
== Programmiertechniken == | == Programmiertechniken == | ||
Zeile 107: | Zeile 108: | ||
Außerdem muss man als dependencies zum Projekt die Plugins maven-jar-plugin und maven-dependency-plugin hinzufügen. | Außerdem muss man als dependencies zum Projekt die Plugins maven-jar-plugin und maven-dependency-plugin hinzufügen. | ||
Die erzeugte JAR findet sich im Ordner <code>target/</code> des Projekts, nachdem man mit Rechtsklick auf das Projekt und "Build with Dependencies" den Bauprozess gestartet hat. | Die erzeugte JAR findet sich im Ordner <code>target/</code> des Projekts, nachdem man mit Rechtsklick auf das Projekt und "Build with Dependencies" den Bauprozess gestartet hat. | ||
+ | |||
+ | ===== JAR mit allen Abhängigkeiten ===== | ||
+ | |||
+ | Um ein einziges JAR mit allen Abhängigkeiten (fat JAR oder uber-jar) zu erzeugen, kann man das maven-assembly-plugin, das onejar-maven-plugin oder wohl auch das maven-shade-plugin nutzen. | ||
+ | |||
+ | Siehe | ||
+ | * https://stackoverflow.com/questions/574594/how-can-i-create-an-executable-jar-with-dependencies-using-maven | ||
+ | * http://tutorials.jenkov.com/maven/maven-build-fat-jar.html | ||
==== Projektmanagement allgemein ==== | ==== Projektmanagement allgemein ==== | ||
Zeile 135: | Zeile 144: | ||
* [http://www.eclipse.org/jubula/ Eclipse Jubula] kann u.a. [[Java Swing]]-Anwendungen testen. | * [http://www.eclipse.org/jubula/ Eclipse Jubula] kann u.a. [[Java Swing]]-Anwendungen testen. | ||
* [https://www.qfs.de/de/index.html QF-Test], eine proprietäre Testsuite u.a. für [[Java]]-Desktopanwendungen z.B. mit [[Swing]] | * [https://www.qfs.de/de/index.html QF-Test], eine proprietäre Testsuite u.a. für [[Java]]-Desktopanwendungen z.B. mit [[Swing]] | ||
+ | |||
+ | === Low Code === | ||
+ | |||
+ | Low Code oder [https://de.wikipedia.org/wiki/No-Code-Plattform No Code] sind Entwicklungsumgebungen, die mit verhältnismäßig mächtigen Elementen arbeiten, um rasch Anwendungen entwickeln zu können. | ||
+ | |||
+ | Beispiele: | ||
+ | |||
+ | * [https://www.airtable.com/pricing Airtable] | ||
+ | * [https://www.make.com/ Make], früher als Integromat bezeichnet | ||
== Reguläre Ausdrücke == | == Reguläre Ausdrücke == | ||
Zeile 143: | Zeile 161: | ||
== Künstliche Intelligenz == | == Künstliche Intelligenz == | ||
+ | |||
+ | === Allgemeines === | ||
Siehe [[Neuronale Netze]] | Siehe [[Neuronale Netze]] | ||
+ | |||
+ | === ChatGPT === | ||
+ | |||
+ | ChatGPT ist eine künstliche Intelligenz, mit der man Dialoge im WhatsApp-Stil führen kann. Es kann nach Anmeldung auf openai kostenlos genutzt werden. | ||
+ | |||
+ | Eine lustige Anwendung ist [https://www.ricoshet.com/ ricoshet.com]; dort spricht - nach Vorgabe eines Themas - ChatGPT mit sich selbst. | ||
+ | |||
+ | Siehe | ||
+ | * https://www.golem.de/news/kuenstliche-intelligenz-so-funktioniert-chatgpt-2302-171644-3.html | ||
== Datenbanken == | == Datenbanken == | ||
Zeile 203: | Zeile 232: | ||
* [https://www.openxava.org/ate/matrify-alternative OpenXava] erlaubt mit einfachen [[Java]]-Klassen recht schnell Web-Datenbankanwendungen zu erstellen. | * [https://www.openxava.org/ate/matrify-alternative OpenXava] erlaubt mit einfachen [[Java]]-Klassen recht schnell Web-Datenbankanwendungen zu erstellen. | ||
+ | * [https://www.edgedb.com/docs/intro/quickstart#ref-quickstart EdgeDB] | ||
+ | * LowDB - kann nicht als wirkliche Datenbank bezeichnet werden, aber möglicherweise sinnvoll für Persistenz von wenigen Daten. | ||
==== CouchDB ==== | ==== CouchDB ==== | ||
Zeile 213: | Zeile 244: | ||
* Die in Google Firebase integrierte Echtzeitdatenbank | * Die in Google Firebase integrierte Echtzeitdatenbank | ||
** https://levelup.gitconnected.com/todo-app-using-firebase-react-typescript-ea0a34bd417d | ** https://levelup.gitconnected.com/todo-app-using-firebase-react-typescript-ea0a34bd417d | ||
+ | * [[SurrealDB]] | ||
+ | * [[Supabase]] | ||
=== Datenbanken als Service === | === Datenbanken als Service === | ||
Zeile 230: | Zeile 263: | ||
* [[IndexedDB]] | * [[IndexedDB]] | ||
** kann in [[Node.js]] z.B. zum Testen imitiert werden, siehe [https://www.npmjs.com/package/fake-indexeddb fake-indexeddb] | ** kann in [[Node.js]] z.B. zum Testen imitiert werden, siehe [https://www.npmjs.com/package/fake-indexeddb fake-indexeddb] | ||
+ | * [https://github.com/julienetie/db64 db64] ist ein kleiner Wrapper um [[IndexedDB]] | ||
+ | * [https://github.com/jakearchibald/idb idb] ist wohl der häufigst genutzte Wrapper [[IndexedDB]] | ||
* [https://dexie.org/ Dexie.js], unterstützt auch [[TypeScript]] | * [https://dexie.org/ Dexie.js], unterstützt auch [[TypeScript]] | ||
* [https://nanosql.io/ NanoSQL] | * [https://nanosql.io/ NanoSQL] | ||
Zeile 247: | Zeile 282: | ||
* https://restdb.io/features/ | * https://restdb.io/features/ | ||
+ | |||
+ | === Append-only Datenbanken === | ||
+ | |||
+ | Unveränderliche Datenbanken, also Datenbanken, die die gesamte Historie bis zum Erreichen des aktuellen Status behalten, (Insert-only- bzw. Append-only-Datenbanken) gibt es in unterschiedlicher Ausprägung. | ||
+ | |||
+ | Z.B. | ||
+ | * Oracle Immutable Tables (oder Blockchain-Tables) | ||
+ | * temporale Tabellen mit "as of <timestamp>"-Operator | ||
+ | ** [https://mariadb.com/kb/en/system-versioned-tables/ MariaDB] | ||
+ | * Datenbanken mit Versionskontrolle | ||
+ | ** [https://www.dolthub.com/ Dolt] | ||
+ | ** [https://terminusdb.com/ TerminusDB] | ||
+ | * [https://immudb.io/ ImmuDb] | ||
+ | |||
+ | |||
+ | Siehe auch | ||
+ | * https://www.dolthub.com/blog/2022-03-21-immutable-database/ | ||
+ | * https://en.wikipedia.org/wiki/Merkle_tree | ||
== Webbrowser steuern == | == Webbrowser steuern == | ||
Zeile 332: | Zeile 385: | ||
* [http://www.htmlgoodies.com/html5/client/the-complete-guide-to-building-html5-games-with-canvas-svg.html#fbid=1sCuPBXjCgS Anleitung zum Bau von HTML5-Spielen auf Basis des Canvas- | * [http://www.htmlgoodies.com/html5/client/the-complete-guide-to-building-html5-games-with-canvas-svg.html#fbid=1sCuPBXjCgS Anleitung zum Bau von HTML5-Spielen auf Basis des Canvas- | ||
Elements] | Elements] | ||
+ | |||
+ | ==== HTML5 Web Share API und Web Share Target API ==== | ||
+ | |||
+ | Auf Mobil-Browsern wird die Web Share API, mit der Webapplikationen Inhalte mit nativen Apps "teilen" können, bereits weitverbreitet. | ||
+ | |||
+ | Eher suchen muss man noch die [https://w3c.github.io/web-share-target/level-2/ Web Share Target API], mit der Webapplikationen im nativen "Teilen"-Dialog der Smartphones bzw. im "Öffnen mit ..."-Dialog der Desktops erscheinen können. In [[Chrome]] scheint es sich noch hinter einer Einstellung zu verstecken. Zu den Einstellungen kommt man mit chrome://flags. | ||
+ | |||
+ | Siehe | ||
+ | * https://mconverter.eu/blog/web_share_target_api/ | ||
+ | * https://web.dev/web-share-target/ | ||
+ | |||
==== HTML5 Frameworks ==== | ==== HTML5 Frameworks ==== | ||
+ | ===== React ===== | ||
+ | Siehe [[React]] | ||
===== Ember.js ===== | ===== Ember.js ===== | ||
Zeile 564: | Zeile 630: | ||
** basiert auf [https://github.com/mwilliamson/mammoth.js mammoth.js] | ** basiert auf [https://github.com/mwilliamson/mammoth.js mammoth.js] | ||
* https://stackoverflow.com/questions/44698896/javascript-library-to-read-doc-and-docx-on-client | * https://stackoverflow.com/questions/44698896/javascript-library-to-read-doc-and-docx-on-client | ||
+ | |||
+ | Lesen von Word-Docx-Dokumenten | ||
+ | * [https://www.npmjs.com/package/word-extractor?activeTab=readme word-extractor] - liest nur Text | ||
+ | * [https://github.com/mwilliamson/mammoth.js mammoth.js] erzeugt simples HTML aus Word. | ||
+ | ** [https://jstool.gitlab.io/demo/preview-ms-word-docx-document-in-browser/ Mammoth-Online-Demo] | ||
* [https://www.npmjs.com/package/any-text any-text] ermöglicht, den Text eines Docx-Dokuments auszulesen. | * [https://www.npmjs.com/package/any-text any-text] ermöglicht, den Text eines Docx-Dokuments auszulesen. | ||
+ | * [https://github.com/dkiyatkin/node-office node-office] nutzt unoconv zur Extrahierung von Text | ||
+ | ** [https://wiki.ubuntuusers.de/unoconv/ unoconv] ist ein Kommandozeilentool zur Konvertierung von Office-Dokumenten, das ein installiertes OpenOffice oder LibreOffice nutzt. | ||
=== Google Apps Script === | === Google Apps Script === | ||
Zeile 615: | Zeile 688: | ||
** https://medium.com/@gajus/parsing-absolutely-anything-in-javascript-using-earley-algorithm-886edcc31e5e | ** https://medium.com/@gajus/parsing-absolutely-anything-in-javascript-using-earley-algorithm-886edcc31e5e | ||
* PEG.js kann mit Hilfe eines Plugins auch TypeScript-Parser bauen. | * PEG.js kann mit Hilfe eines Plugins auch TypeScript-Parser bauen. | ||
+ | |||
+ | === Diagramme darstellen in Javascript === | ||
+ | |||
+ | ==== Darstellung von Graphen ==== | ||
+ | |||
+ | Siehe | ||
+ | * [https://js.cytoscape.org/ Cytoscape] (MIT-Lizenz) | ||
+ | * [https://mermaid.js.org/ mermaid.js] - Darstellung von in Text-Notation beschriebenen Graphen | ||
+ | ** https://blog.ordix.de/flowcharts-as-code-mit-mermaid-js | ||
+ | * https://github.com/jpb12/react-tree-graph | ||
+ | * [https://kroki.io/ Kroki] ist ein freier HTTP-Dienst, der Diagramme erzeugt. Er basiert auf Open Source. | ||
=== Test JavaScript === | === Test JavaScript === |
Aktuelle Version vom 20. November 2024, 15:48 Uhr
Aktuelles
Siehe
Programmiertechniken
Einführung in die Programmierung
Programmieren für Kinder
Mit scratch
lassen sich einfache Skripte mit der Maus zusammensetzen.
Teamorganisation
Agile Entwicklung
V-Modell XT
Der IT-Beauftragte der Bundesregierung empfiehlt zur Systementwicklung das so genannte "V-Modell XT".
Siehe
- https://www.heise.de/developer/artikel/V-Modell-XT-an-Unternehmen-anpassen-Teil-1-227030.html
- https://www.heise.de/developer/artikel/V-Modell-XT-an-Unternehmen-anpassen-Teil-2-227032.html
Design Patterns
- Kurzreferenz für Design Patterns
- 101 Design Patterns & Tips for Developers
- Design Patterns für Java
- Java Companion Book zu Design Patterns
- einige wichtige Patterns in Kurzform
Sicherheit
- Microsoft hat als den Entwicklungszyklus begleitendes Sicherheitssystem ein Konzept namens Security by Design.
Projektmanagement
Apache Maven
Zu Apache Maven siehe
- Maven: The Definitive Guide
- Netbeans Maven Best Practices
- Einzelne JARs zum lokalen Maven-Repository hinzufügen
- Ausführbare JARs (mit MANIFEST.MF) erzeugen (nutzt neueres maven-assembly-plugin) (Alternative; nutzt älteres maven-jar-plugin)
- Maven kann frei konfiguriert werden, allerdings ist es grundsätzlich sinnvoll, sich an die Standard-Verzeichnisstruktur eines Maven-Projekts zu halten. Damit kommen auch fremde Entwickler leichter zurecht.
- Diese Struktur kann zum Einsatz von Integration Tests modifiziert werden. Siehe auch Tutorial zu Integrationstest mit Maven.
Maven Quick Start
Mit
mvn archetype:generate maven-archetype-quickstart
und Angabe von frei wählbarem groupId, artifactId und version kann ein neues leeres Maven-Java-Projekt im aktuellen Verzeichnis erstellt werden.
Maven und Webpack
Mit dem frontend-maven-plugin kann Maven ein projekt-spezifisches node.js nutzen. Damit kann z.B. Webpack genutzt werden, um JavaScript-Dateien zu bündeln.
Main Class in Maven JAR
Um eine Main Class z.B. in einem mit Netbeans erzeugten Maven-Projekt festzulegen, kann man Folgendes[1] zur pom.xml hinzufügen:
<build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-jar-plugin</artifactId> <version>2.3.2</version> <configuration> <archive> <manifest> <addClasspath>true</addClasspath> <classpathPrefix>lib/</classpathPrefix> <mainClass>MYPACKAGE.MYMAINCLASS</mainClass> </manifest> </archive> </configuration> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-dependency-plugin</artifactId> <version>1.0</version> <executions> <execution> <id>copy</id> <phase>install</phase> <goals> <goal>copy-dependencies</goal> </goals> <configuration> <outputDirectory> ${project.build.directory}/lib </outputDirectory> </configuration> </execution> </executions> </plugin> </plugins> </build>
Außerdem muss man als dependencies zum Projekt die Plugins maven-jar-plugin und maven-dependency-plugin hinzufügen.
Die erzeugte JAR findet sich im Ordner target/
des Projekts, nachdem man mit Rechtsklick auf das Projekt und "Build with Dependencies" den Bauprozess gestartet hat.
JAR mit allen Abhängigkeiten
Um ein einziges JAR mit allen Abhängigkeiten (fat JAR oder uber-jar) zu erzeugen, kann man das maven-assembly-plugin, das onejar-maven-plugin oder wohl auch das maven-shade-plugin nutzen.
Siehe
- https://stackoverflow.com/questions/574594/how-can-i-create-an-executable-jar-with-dependencies-using-maven
- http://tutorials.jenkov.com/maven/maven-build-fat-jar.html
Projektmanagement allgemein
Softwareprojekte sind auch ganz herkömmliche Projekte. Zum Projektmanagement allgemein siehe Lexikoneintrag mit weiteren Nachweisen. Für das Projektmanagement gibt es verschiedenste Projektmanagementsoftware. Außerdem gibt es noch Online-Sites, die Projektmanagement anbieten. Z.B.:
- Quassum (für 5 Benutzer / 5 Projekte kostenlos)
- Trello (kostenlos, Extrafunktionen jedoch kostenpflichtig)
- Wunderlist (kostenlos, derzeit nur etwas erweiterte Todo-List)
Versionsmanagement
- Zu Subversion siehe Versionsmanagement-Tipps
Test
Das Testen von Sofwareprodukten ist ein wichtiger Bestandteil der Entwicklung.
Neben der manuellen Kontrolle, für die es auch Testmethoden und -tools gibt, sollte die Automatisierung von Tests eine wichtige Rolle einnehmen. Letztere sind zwar beim ersten Mal meist aufwändiger, rentieren sich aber über die Laufzeit eines Projekts, weil sie Rückschritte bei der Entwicklung verhindern können, da sie bei jeder Änderung ohne großen Aufwand erneut durchlaufen werden können.
Zu unterscheiden sind
- Unit-Tests (dabei werden einzelne Funktionen getestet)
- Integrations-Tests (dabei wird das Zusammenspiel vieler Komponenten, teilweise auch auf verschiedenen Maschinen getestet)
- Oberflächen-Tests (dabei wird die GUI getestet).
Für Oberflächentests gibt es verschiedenste Tools, z.B.
- Selenium für den Test von Webanwendungen
- Tosca, eine proprietäre Testsuite u.a. zum Test von Java-Desktopanwendungen z.B. mit Swing
- Eclipse Jubula kann u.a. Java Swing-Anwendungen testen.
- QF-Test, eine proprietäre Testsuite u.a. für Java-Desktopanwendungen z.B. mit Swing
Low Code
Low Code oder No Code sind Entwicklungsumgebungen, die mit verhältnismäßig mächtigen Elementen arbeiten, um rasch Anwendungen entwickeln zu können.
Beispiele:
Reguläre Ausdrücke
Künstliche Intelligenz
Allgemeines
Siehe Neuronale Netze
ChatGPT
ChatGPT ist eine künstliche Intelligenz, mit der man Dialoge im WhatsApp-Stil führen kann. Es kann nach Anmeldung auf openai kostenlos genutzt werden.
Eine lustige Anwendung ist ricoshet.com; dort spricht - nach Vorgabe eines Themas - ChatGPT mit sich selbst.
Siehe
Datenbanken
Datenbankdesign
Mit der MySQL Workbench lassen sich Datenbanken designen.
SQL
SQL Syntax
- Ein übersichtliches Verzeichnis der SQL-Befehle als Tutorial findet sich bei w3schools.com.
- Auch die Wikipedia gibt einen guten Überblick über die SQL-Standard-Befehle.
- SQL für little Idiots
- Apache Derby SQL reference
- SQL-Tipps
Indexbildung
Siehe
Pivotieren
Zeilenwerte in Spalten darstellen ist ein häufigeres Problem. Dies kann bei Aggregationen dadurch gelöst werden, dass man die FILTER
-Klausel verwendet:[2]
SELECT SUM(Betrag) AS Jahressumme, SUM(Betrag) FILTER (WHERE month="Januar") AS Januarsumme, SUM(Betrag) FILTER (WHERE month="Februar") AS Februarsumme,... FROM daten
Doppelte Daten entfernen
Siehe
MySQL
Dokumentation
MySQL-Nutzer
Verwaltung mit phpMyAdmin
- Zugriff von phpMyAdmin (Setzen der Zugriffsrechte): Die Rechte in der Datei
/etc/dbconfig-common/phpmyadmin.conf
werden mit folgendem Befehl geändert und umgesetzt:
sudo dpkg-reconfigure phpmyadmin
CSV in MySQL importieren
Siehe
HSQLDB
HSQLDB ist eine kleine Java-Datenbank, die auch In-Memory-Tabellen bietet. Zusammen mit Hibernate kann sie auch als Persistenzschicht für POJOs genutzt werden.
NoSQL
Siehe
- OpenXava erlaubt mit einfachen Java-Klassen recht schnell Web-Datenbankanwendungen zu erstellen.
- EdgeDB
- LowDB - kann nicht als wirkliche Datenbank bezeichnet werden, aber möglicherweise sinnvoll für Persistenz von wenigen Daten.
CouchDB
Siehe CouchDB
Echtzeit-Datenbanken
- https://rethinkdb.com/
- Die in Google Firebase integrierte Echtzeitdatenbank
- SurrealDB
- Supabase
Datenbanken als Service
- ElephantSQL - Postgres as a service
- Google Firebase
- IBM Cloudant basierend auf CouchDB
- Nhost u.a. mit PostgreSQL
- Back4App
- Kinvey
- Kuzzle
Datenbanken im Browser
- SQLite
- pouchdb, basiert im Browser auf IndexedDB, läuft aber auch in Node.js
- IndexedDB
- kann in Node.js z.B. zum Testen imitiert werden, siehe fake-indexeddb
- db64 ist ein kleiner Wrapper um IndexedDB
- idb ist wohl der häufigst genutzte Wrapper IndexedDB
- Dexie.js, unterstützt auch TypeScript
- NanoSQL
- LocalForage
- lovefield, SQL-angelehnt
- idb dünne Hülle um IndexedDB
- idb-keyval, einfacher Schlüssel-Wert-Speicher, basierend auf IndexedDB
Datenbank-Frontends
- kexi tritt als Alternative für MS Access oder FileMaker an.
- Symphytum, intuitives Datenbank-Frontend (und -Backend), noch in der Entwicklung, bisher keine relationale Daten (Stand: Okt. 2020)
- LibreOffice Base
Datenbank-Frontend in der Cloud
Append-only Datenbanken
Unveränderliche Datenbanken, also Datenbanken, die die gesamte Historie bis zum Erreichen des aktuellen Status behalten, (Insert-only- bzw. Append-only-Datenbanken) gibt es in unterschiedlicher Ausprägung.
Z.B.
- Oracle Immutable Tables (oder Blockchain-Tables)
- temporale Tabellen mit "as of <timestamp>"-Operator
- Datenbanken mit Versionskontrolle
- ImmuDb
Siehe auch
- https://www.dolthub.com/blog/2022-03-21-immutable-database/
- https://en.wikipedia.org/wiki/Merkle_tree
Webbrowser steuern
- Das Heft ct 4/2010 hat einen Praxisteil zur Erstellung von Webrobotern
- Siehe auch JavaXPConn.
- Mechanize scheint in verschiedenen Skript-Sprachen (Perl, Ruby) die Möglichkeit zu geben, verschiedene Browser (Firefox,Safari) fernzusteuern.
- Selenium RC (Dokumentation) ermöglicht, z.B. von Java) verschiedene Browser zu steuern. Für Firefox lässt es sich auch mit einem bestimmten Browserprofil (z.B. bestimmte Developer-Addons wie FireBug nutzen.
- Wenn man Selenium 2 (WebDriver) nutzt, muss man etliche zusätzliche Bibliotheken in ein Java-Programm einbinden.
- http://stackoverflow.com/questions/1248598/greasemonkey-like-firefox-plugin-for-automatic-browsing
- Watir erlaubt von Ruby aus, verschiedene Webbrowser zu steuern.
Java
- Java-Tipps (J2ME Programmierung, Synchronization, SyncML, vCard/vCalendar, Bluetooth)
Python
- Python-Homepage
- Einrichten von Visual Studio Code als Python-IDE
Python Package Manager PIP
PIP ist der Standard-Packagemanager für Python. Er lässt sich folgendermaßen auf Ubuntu/Debian installieren:
sudo aptitude install python3-pip
Wenn er durcheinander kommt und z.B. folgende Fehlermeldung zeigt:
PermissionError: [Errno 13] Permission denied: '/usr/local/lib/python3.8/dist-packages/python_dateutil-2.8.1.dist-info'
dann kann das an fehlenden Berechtigungen liegen. Das kann man beheben. Um den Benutzer USER der Gruppe staff
hinzuzufügen, kann man folgendes Kommando nutzen:
sudo adduser USER staff
Warnung: staff lässt recht weitgehende Veränderungen am System zu. Bitte nur nutzen, wenn man wirklich versteht, was man tut!
XML
- XSLT-Tutorial auf zvon.org
CSS
- Siehe SitePoint CSS-Referenz
- Siehe HTML#Lightbox
- Siehe Artikel über CSS-Tools
- Zueinander passende Farben findet man bei
Siehe auch
HTML
Allgemeines
- Siehe die kurze HTML-Referenz und selfthml von Stefan Münz.
- WebStandards-Einführung von Opera
- SitePoint HTML-Reference
Sonderzeichen
In HTML-Code kann man viele Sonderzeichen einbetten. Siehe
Favicon
- Ein kleines Bild, das auf den Reitern der Webbrowser dargestellt wird, nennt man Favicon. selfhtml oder wikipedia zeigen, wie man ein solches Logo auf seine HTML-Seite einbindet.
HTML5
Mit HTML5 lassen sich auch Offline-Apps erstellen, z.B. für das iPhone. Der Vorzug von HTML5-Apps gegenüber Android- bzw. iPhone-Apps ist die relative Plattformunabhängigkeit.
Siehe
Siehe Beispiel-Apps bei
HTML5 Canvas
Siehe u.a.
- [http://www.htmlgoodies.com/html5/client/the-complete-guide-to-building-html5-games-with-canvas-svg.html#fbid=1sCuPBXjCgS Anleitung zum Bau von HTML5-Spielen auf Basis des Canvas-
Elements]
Auf Mobil-Browsern wird die Web Share API, mit der Webapplikationen Inhalte mit nativen Apps "teilen" können, bereits weitverbreitet.
Eher suchen muss man noch die Web Share Target API, mit der Webapplikationen im nativen "Teilen"-Dialog der Smartphones bzw. im "Öffnen mit ..."-Dialog der Desktops erscheinen können. In Chrome scheint es sich noch hinter einer Einstellung zu verstecken. Zu den Einstellungen kommt man mit chrome://flags.
Siehe
HTML5 Frameworks
React
Siehe React
Ember.js
Ember.js ist wie AngularJS ein umfassendes Javascript-Framework.
Neben der offiziellen guten Dokumentation gibt es auch verschiedene Bücher, z.B.
- EmberCli 101, online kostenlos zu lesen
- Build Pacman mit Ember.js
- kostenloses Ebook zur Ember Run Loop
AngularJS
Allgemeines zu AngularJs
Siehe
AngularJS 2.0
Die Version 2.0 kommt einer Neuprogrammierung des Frameworks, allerdings mit einem Upgrade-Pfad, gleich. Die Version 2.0 verzichtet dabei auf Browserunterstützung des Internet Explorers vor Version 10. Favorisierte Programmiersprache des von Google gestützten Frameworks ist die als Open Source veröffentlichte Programmiersprache TypeScript.
Einen ersten Einblick liefert ein Artikel auf heise Developper.
AngularJS and Google Visualization API
AngularJS und Google Visualization API arbeiten etwas holprig zusammen: AngularJS darf erst arbeiten, wenn die Google Visualization API geladen ist.
Daher darf das ng-app
-Attribut nicht im HTML-Quellcode stehen, sondern die Zuordnung zur AngularJS-App muss dynamisch nach dem Laden der Visualisierungs-API geladen werden[3]:
google.setOnLoadCallback(function () { angular.bootstrap(document.body, ['my-app']); }); google.load('visualization', '1', {packages: ['corechart']});
HTML für Smartphones
Die Entwicklung für Smartphones ist aufgrund der Vielzahl von Systemen nicht gerade einfach. Auf Basis von HTML5 versuchen verschiedene Frameworks dem Webentwickler zu erlauben, beinahe native Apps für Android,iOS... zu entwickeln, ohne allzuviel auf die Bedürfnisse der Plattformen eingehen zu müssen:
- PhoneGap, künftig "Apache CallBack" ist ein Open Source-Framework für sieben mobile Plattformen. Dieses Framework versucht HTML-JavaScript-Code die Features der Smartphones zur Verfügung zu stellen, für die normalerweise Nativer Code erforderlich ist.
- DoJo Mobile
- XUI
- jQuery Mobile
- Sencha Touch
- Jo HTML5 Mobile App, Open Source-Framework
Lightbox
Um eine HTML-Seite kurz in den Schatten zu stellen, um z.B. dem Benutzer einen kurzen Dialog (Login) zu zeigen, nutzt man eine sog. Lightbox.
Treemap
Treemaps stellen hierarchische Datenstrukturen in verschieden großen Flächen, z.B. Rechtecken, dar.
Für HTML/Javascript/CSS gibt es dazu verschiedene frei nutzbare Hilfsmittel
- jQWidget jqxTreemap
- JsTreemap.com lässt sich frei verwenden. Es erzeugt per Javascript ein Canvas-Element (also nicht für jeden Knoten ein HTML-Element), in das es den gesamten Treemap einzeichnet. Es kann weitgehend auf Benutzerwünsche angepasst werden.
- das Treemap-Modul von D3.js, das z.B. auf diesem Blogartikel genutzt wird
- treemap-squared legt den Fokus auf schönes Aussehen, allerdings scheint darunter die Interaktivität zu leiden.
- Google Visualization (nicht offline nutzbar)
- Treemap-Modul des Javascript InfoViz Toolkit
HTML5 Drag and Drop
Mit HTML5 ist es u.a. möglich, Elemente einer Webseite aus dieser heraus- und in eine andere geöffnete Webseite mit der Maus zu ziehen. Die entsprechende API war ursprünglich im Internet Explorer implementiert und wurde dann standardisiert.
Neben dem Attribut draggable=true
muss für WebKit-Browser noch mit etwas CSS nachgeholfen werden. Firefox scheint auch entsprechende JavaScript- drag- und -drop-Handler zu benötigen.
Hyperlinks zu nativen Anwendungen
Unter den verschiedenen Betriebssystemen lassen sich auch aus dem Browser native Anwendungen starten. Dazu muss man dem Betriebssystem einen Protokollhandler für ein bestimmtes Protokoll bekannt machen.
In Windows muss man dazu die Registry ändern.
Siehe auch
- Anleitung für Hyperlinks zu nativen Anwendungen auf shotgunsoftware.com
- Frage zu Scheme Handlern auf stackoverflow.com
Unter Windows kann man nicht nur Handler für eigene Protokolle (z.B.: "office:") registrieren, sondern auch Handler für Dateitypen (MIME-Handler), die bereits vor dem Herunterladen der Datei aufgerufen werden und so die Art des Herunterladens bestimmen können.[4]
REST
REST hat folgende Eigenheiten:
- Jede Resource hat eine URL/URI[5].
- Es gibt nur simple Operationen:
- GET (hole Info, "retrieve", idempotent)
- PUT (aktualisiere Info, "update", idempotent)
- POST (erzeuge neue Info, "create", kann non-idempotent sein)
- DELETE (lösche Info, "delete",idempotent)
- kurz: CRUD
- zusätzlich HEAD (hole Meta-Info über eine Ressource)[6].
- Das Protokoll ist HTTP.
Siehe auch
- Einführung in REST mit dem Java-Open Source-Framework Jersey.
- REST-API mit PHP
- Client-Part of the REST API
- Spielwiese auf PHP/MySQL-Basis
- Simple Rest Server in PHP
- restSQL - eine Java-Programmierschnittstelle, um möglichst einfach auf SQL-Daten mittels Rest-Clients zuzugreifen.
- sqlREST - eine andere Mittelschicht zwischen Http/Rest-Client und SQL-Datenbank, die in Java programmiert wurde
- Dreamfactoy - eine Open Source - REST-Schnittstelle zu SQL-Datenbanken. Zusätzlich werden noch APIs u.a. für AngularJS angeboten.
Alternativen zu HTML
- Textile und Markdown sind sog. leichtgewichtige Markup-Sprachen, die in HTML konvertiert werden können.
JavaScript
Projektmanagment
JavaScript kann in einem einfachen Editor geschrieben werden und im Browser laufen.
Üblicherweise werden aber Projektmanagementtools verwendet:
- Gulp
- Grunt
- Maven mit dem maven-frontend-plugin
- Webpack - eigentlich nur ein Paketierer für einzelne JavaScript-Dateien.
Daneben gibt es viele Build- und Hosting-Plattformen in der Cloud, z.B.
- Netlify
- GatsbyJS
- Back4app
Allgemeines
- Javascript-Dokumentation von selfhtml
- Mozilla JavaScript Reference
- JavaScript Reference
- Sitepoint JavaScript
- Kurze Übersicht über JavaScript
- Blog "Konsole&Kontext" über funktionale Sprachen insbesondere am Beispiel JavaScript
- Neuerungen in ECMAScript 2015 bzw. ECMAScript6
Siehe auch HTML5 und HTML für Smartphones.
Sprachkonstrukte
Algorithmen und Datenstrukturen
Siehe
Promises
Siehe
Coding Style
Mit JavaScript Standard wird ein Coding Standard nicht nur festgelegt, sondern auch automatisch überwacht.
Inversion of Control
Auch für JavaScript gibt es Frameworks zum Implementieren des Inversion of Control-Musters:
jQuery
Mit dem jQuery-Framework werden JavaScript-Aufgaben erleichtert.
JQuery hat eine Plugin-Architektur, z.B.
- TableSorter zum Ausstatten einer HTML-Tabelle mit Sortierknöpfen.
JavaScript Multitasking
Für Threads in JavvaScript sieht HTML5 Web-Workers vor.
Service Worker
Mittels Service Worker kann man (als Ersatz für den früheren AppCache) Offline-Applikationen für den Browser schreiben. Die Service Worker sind spezielle Web Worker mit längerem Lebenszyklus.
Das Konzept ist aber komplex und man kann viele Fehler beim Erfassen dieses Konstrukts machen.
Bereits das Aktualisieren des Service Workers scheint komplex zu sein:
- Der Service Worker sollte mit einem HTTP-Header ausgeliefert werden, der kein oder nur ein kurzes Caching erlaubt. Z.B. den Node.js-Server
http-server
mit der Option-c-1
aufrufen. - Im Web-Front-End muss registration.update() aufgerufen werden.
- Im Install-Handler des Service Workers muss self.skipWaiting() und
- Im Activate-Handler des Service Workers self.clients.claim() aufgerufen werden.
Grundsätzlich erlauben die Browser aus Sicherheitsgründen nur HTTPS-Verbindungen. Zu Entwicklungszwecken kann aber auch der localhost mit einer HTTP-Verbindung genutzt werden, also http://127.0.0.1:PORT
Siehe
- https://vaadin.com/pwa/build
- https://davidwalsh.name/service-worker-claim
- https://serviceworke.rs/immediate-claim_service-worker_doc.html
- https://vaadin.com/pwa/build/production-pwa-with-webpack-and-workbox
HTTP Long Polling und WebSockets
Für HTTP-Long Polling bieten sich JavaScript-Closures an. Siehe jQuery-Long Polling Example.
In HTML5 gibt es für Server-Push die sogenannten WebSockets. Socket.IO ist eine JavaScript-Bibliothek, die die Server-Push-Technologie (HTTP Long Poll oder Implementierungen von Websockets) kapselt.
WebSockets
Mit
kann man einen Server und einen Client in der Shell starten, um Websockets ein wenig auszuprobieren.
Bearbeiten von PDFs mit JavaScript
PDFs können derzeit noch nicht mit reinem JavaScript bearbeitet werden, sondern nur entweder erzeugt (PDF.js) oder angezeigt werden.
Siehe
- http://pdfmake.org
- PDFKit ist eine JavaScript-Bibliothek, um PDFs zu erzeugen. Einlesen kann sie PDFs nicht[7] (Stand: Mitte 2018).
- jsPDF ist eine JavaScript-Bibliothek, um PDFs zu erzeugen. Einlesen kann sie PDFs (noch, Stand:Mitte 2018) nicht.
- HummusJS erzeugt und modifiziert PDF-Dateien. Es läuft in Node.js, nicht im Browser. Es läuft auf Basis der entsprechenden C++-Bibliothek.
- PDFedit scheint nicht mehr weiterentwickelt zu werden.
- https://github.com/officeonlinesystems/pdfeditor_chromeextension sollte man sich mal anschauen, ob es etwas hilft.
- https://stackoverflow.com/questions/742271/generating-pdf-files-with-javascript
Eine Alternative zur Erzeugung von PDFs könnte das Erstellen von SVGs sein:
Bearbeiten von Word-DOCX-Dokumenten
Siehe
- DocxTemplater
- docx4js - ein Docx-Parser
- Rendern von Docx im Browser
- basiert auf mammoth.js
- https://stackoverflow.com/questions/44698896/javascript-library-to-read-doc-and-docx-on-client
Lesen von Word-Docx-Dokumenten
- word-extractor - liest nur Text
- mammoth.js erzeugt simples HTML aus Word.
- any-text ermöglicht, den Text eines Docx-Dokuments auszulesen.
- node-office nutzt unoconv zur Extrahierung von Text
- unoconv ist ein Kommandozeilentool zur Konvertierung von Office-Dokumenten, das ein installiertes OpenOffice oder LibreOffice nutzt.
Google Apps Script
Google Apps Script basiert auf JavaScript, hat aber Erweiterungen, um auf Google Produkte zugreifen zu können. Entsprechende Scripte können beispielsweise in Googles Tabellen eingebunden oder mittels eines Timers regelmäßig gestartet werden. Siehe
JavaScript DB Frameworks
JavaScript for PostgreSQL
Siehe
- pg ist der Standard für Zugriffe von Node.js auf PostgreSQL
- slonik ist insbesondere für TypeScript-Nutzer eine Möglichkeit, weitgehend typensicher SQL-Code zu schreiben und trotzdem uneingeschränkt SQL-Code zu nutzen.
- pg-promise baut auf pg auf und ermöglicht insbesondere Transaktionsmanagement mittels Promises.
- knex ist ein SQL-Dialekt-übergreifende Möglichkeit, SQL in JavaScript-Funktionsaufrufen zu schreiben. Es unterstützt u.a. auch PostgreSQL via pg. Siehe
- Knex-Homepage mit Dokumentation
- Siehe aus dem Java-Bereich dazu auch JOOQ
- Bookshelf.js ist eine "leichte" ORM-Ebene, die sich Knex bedient. Für spezielle Abfragen kann auf Knex zurückgegriffen werden.
JavaScript for PostgresSQL NOTIFY/LISTEN
- https://github.com/andywer/pg-listen
- https://www.npmjs.com/package/pg-pubsub
- https://github.com/emilbayes/pg-ipc
JavaScript UI Frameworks
React
React ist ein von Facebook entwickeltes Framework zum Darstellen von HTML-UI-Komponenten. Es gibt es auch in einer React Native-"Geschmack" zum Erstellen von nativen Android- oder iOS-Apps.
Angular
Siehe Angular
Slim.js
Siehe https://github.com/slimjs/slim.js/wiki
Bauen eines DSL-Parsers in JavaScript
Siehe
- Grundsätzliches zum Parsen in Javascript
- Earley
- Nearley
- PEG.js kann mit Hilfe eines Plugins auch TypeScript-Parser bauen.
Diagramme darstellen in Javascript
Darstellung von Graphen
Siehe
- Cytoscape (MIT-Lizenz)
- mermaid.js - Darstellung von in Text-Notation beschriebenen Graphen
- https://github.com/jpb12/react-tree-graph
- Kroki ist ein freier HTTP-Dienst, der Diagramme erzeugt. Er basiert auf Open Source.
Test JavaScript
Zur Steuerung von Webbrowsern bzw. zum Simulieren von Webbrowser-Nutzung siehe
- Selenium (steuert verschiedene Browser)
- https://github.com/puppeteer/puppeteer - Puppeteer lädt eine passende Chromium-Version herunter
- PhantomJS (basiert auf WebKit, wird nicht mehr weiterentwickelt)
- CasperJS (basiert auf PhantomJS)
- SlimerJS (basiert auf Gecko, der Firefox-Engine)
Unit-Tests:
- Jest - ein JavaScript / TypeScript-Test-Framework einschließlich Mocking-Hilfsmittel
- Mocha
PHP
Authentifizierung
OAuth ist ein offener Standard zur Identifizierung für einzelne Web-Dienste. Der Upgrade auf Oauth 2.0 wird von manchen Beteiligten kritisch gesehen.
Siehe auch
OPA
OPA ist eine Programmiersprache, deren Ausführung unbemerkt vom Entwickler sowohl auf dem Server (mit Datenbank) als auch auf dem Client läuft.
Webservices
- Einen Überblick über im Netz bereitstehende Webservices bietet xmethods.org
- GIS
Google Gadgets
- ↑ Vgl. http://www.ibm.com/developerworks/library/j-5things13/
- ↑ Vgl. https://modern-sql.com/de/anwendung/pivot
- ↑ http://gavindraper.com/2013/07/30/google-charts-in-angularjs
- ↑ Siehe https://msdn.microsoft.com/de-de/library/jj215788%28v=vs.85%29.aspx
- ↑ http://architects.dzone.com/news/common-rest-design-pattern
- ↑ http://architects.dzone.com/news/common-rest-design-pattern
- ↑ Siehe https://github.com/devongovett/pdfkit/issues/83