Permalink

Nativefier · Native Apps von Webseiten erstellen

Unter OS X nutze ich seit etlichen Jahren Fluid, um aus Webseiten native Apps zu basteln. Ich nenne nur mal WordPress, zur Verwaltung dieses Blogs, Facebook, Trello oder auch WhatsApp (Web).

Gleiches funktioniert, plattformübergreifend aber weniger endnutzerfreundlich, mit dem Chromium-Framework Electron (fka Atom Shell). Genau an dieser Stelle kommt ein Node.js Paket namens Nativefier ins Spiel, das sich dieser Sache annimmt und schlussendlich mit nur einem simplen Befehl in der Kommandozeile aus Webseiten native Apps für Windows, Linux oder OS X erstellt.

Bildschirmfoto 2016-03-23 um 14.49.44

Nativefier is a command line tool that allows you to easily create a desktop application for any web site with succinct and minimal configuration. Apps are wrapped by Electron in an OS executable (.app, .exe, etc.) for use on Windows, OSX and Linux.

Was ist zu tun?

1.
In einem ersten Schritt muss Node.js installiert werden. Hier kann man entweder den direkten Weg oder die Webseite oder indirekten Weg über Homebrew nehmen. In diesem Zusammenhang weise ich gerne noch mal auf das oben im Screenshot zu sehende Cakebrew, das nichts anderes als eine GUI für Homebrew ist, hin.

brew update
brew doctor
brew install node

2.
Anschließend installiert man Nativefier mit folgendem Terminal-Befehl:

npm install nativefier -g

Bildschirmfoto 2016-03-18 um 20.44.23-minishadow

3.
Das war es quasi auch schon. Ab sofort kann man für jede Webseite mit nur einem Befehl in der Kommandozeile eine App erstellen.

nativefier "http://aptgetupdate.de"

Bildschirmfoto 2016-03-18 um 20.45.44-minishadow

Dazu gibt es eine Reihe von Optionen, mit der man die App mit Hinsicht auf das Icon oder die Standardauflösung anpassen kann.

-> https://github.com/jiahaog/nativefier

Permalink

MoneyMoney · HTML-Export der Umsätze

Dass der Funktionsumfang der Onlinebanking App MoneyMoney durch Extensions erweiterbar ist, sollte eigentlich hinlänglich bekannt sein.

Interessant ist in diesem Zusammenhang der HTML-Export der Umsätze inkl. Kategorie und Kommentar von Boris Penck (Direktdownload), der, dank entsprechendem Stylesheet, einer Art Kontoauszug mit schickem Anzug gleichkommt.

Bildschirmfoto 2014-11-19 um 11.01.36-minishadow 

Zur Installation geht man folgendermaßen vor:

  • MoneyMoney starten und entsperren
  • im Menü Hilfe > Zeige Datenbank im Finder anklicken
  • die heruntergeladene HTML Export.lua  Datei in das Extensions Verzeichnis kopieren

Zur Kontrolle kann man über die MoneyMoney Einstellungen > Extensions kontrollieren, ob die Erweiterung auch korrekt erkannt wurde.

Anschließend kann man seine Umsätze über das Menü mit Konto > Umsätze exportieren auch im HTML Format ansehen.

-> http://moneymoney-app.com/extensions/

Permalink

Brackets · Open Source Code-Editor für Mac, Linux und Windows in Version 1.0 veröffentlicht

Kurznews:
Der Open Source Code Editor Brackets, den ich während seine ausgiebigen Beta-Phase schon mal angesprochen hatte, hat seit gestern Abend die finale Version 1.0 erreicht.

Bildschirmfoto 2014-11-05 um 00.24.39-minishadow.jpg

Ich persönlich nutze die App, deren Funktionen durch unzählige Extensions (fast) beliebig erweiterbar ist, mittlerweile recht gerne. Web- oder Front-End-Entwickler, die Brackets noch gar nicht kennen, sollten definitiv einen Blick riskieren.

-> http://brackets.io
-> https://github.com/adobe/brackets

Permalink

Brackets · Open Source Code-Editor für Mac, Linux und Windows

Bei Brackets handelt es sich um einen open source Code-Editor für Webdesigner und Front-End-Entwickler, der zum Schreiben von HTML, JavaScript und CSS-Dateien optimiert ist.

screenshot-mac-sprint-34

Neben vielen Annehmlichkeiten wie Syntax-Highlighting, Autovervollständigung, Theseus-Integration oder Quick Edit unterstützt Brackets eine Live Preview im Browser. Ändert man etwas am Code, wird diese Änderung ohne Reload-Knopf direkt im Browser aktualisiert. Dazu kann man die Funktionen der App über Extensions erweitern.

Brackets unterliegt einer sehr aktiven Entwicklung (es lohnt sich definitiv ein Blick in die Releases-Sektion), wird von Adobe betreut und ist unter der MIT Lizenz veröffentlicht.

-> http://brackets.io/
-> https://github.com/adobe/brackets

Permalink

LightTable · Klasse Editor nun OpenSource

Bildschirmfoto 2014-01-09 um 07.03.38

LightTable eine leichtgewichtige IDE vom Entwickler Chris Grangerist nun als OpenSource auf Github verfügbar. (via)

“Today Light Table is taking a huge step forward – every bit of its code is now on Github and along side of that, we’re releasing Light Table 0.6.0, which includes all the infrastructure to write and use plugins”

LightTable ist für OS X, Linux und Windows verfügbar. Diese noch sehr junge IDE bietet jetzt eine Plugin-Infrastruktur, über die diese zum Beispiel für diverse Sprachen angepasst werden kann. LightTable fühlt sich ziemlich gut an. Am besten einfach mal folgendes Video ansehen und sich auf die Tutorials stürzen.

https://github.com/LightTable/LightTable

http://www.lighttable.com/

Permalink

Page Layers: Internetseiten in PSD konvertieren + Verlosung

Page Layers nimmt sich der Mammutaufgabe an Internetseiten in vollständige „gelayerte“ Photoshop-Dateien umzuwandeln. Was für den Ottonormalanwender sicherlich uninteressant ist, kann Designern, die sich nicht immer mit Quelltexten rumschlagen möchten oder können, eine Menge Zeit ersparen. Die App besitzt eine schlichte, übersichtliche Benutzeroberfläche.

Um eine Internetseite jetzt abfotografieren, ruf man sie per Adresszeile auf, stellt die gewünschte Auflösung ein und zieht nach Wunschformat das PSD oder PNG-Icon in den Ordner der Wahl. Auflösungstechnisch wird übrigens immer nur eingestellte Breite berücksichtigt und die gesamte Höhe abgebildet. Das Ergebnis valider, sauber aufgebauter Seiten, wie daringfireball.net ist eine in ziemlich logischen Ebenen aufgebaute Datei.

Die Schachtelung der Ebenen entspricht manchmal nicht ganz dem Quelltext, im Großen und Ganzen stellen simple Seiten aber kein Problem dar. Anders sieht es dagegen bei semantischen Katastrophen, wie Aptgetupdate aus (ein bisschen Selbstkritik ist an dieser Stelle mal angebracht, wir arbeiten auch gerade an was Neuem). Hier kommt Page Layers schon deutlich ins Schwitzen und kriegt Stabilitätsprobleme. Ich brauchte 4 Versuche, um überhaupt eine PSD zu bekommen, weil die App vorher immer während des Speichervorgangs einfror. Oliver kann die App nicht mal starten, Björn hatte dagegen keine Probleme. Es scheint da noch Nachholbedarf zu geben.

Das PSD-Abbild selbst ist sehr präzise, selbst Schatten sind einzeln anwählbar, nur Text wird leider noch nicht als solcher, sondern als einfaches Grafikobjekt abgelegt. Auch das Speichern per Drag & Drop erweist sich zuweilven als etwas problematisch, da immer der Dateiname page.psd verwendet wird, kann es hier zu Doppelbelegungen bzw. einem unerwünschten Überschreiben-Dialog kommen. Einen Menüpunkt wie Speichern unter, welches das Problem beheben würde, sucht man jedoch vergebens, so bleibt nur das Umbenennen der vorher erstellten Datei.

Von den Stabilitätsproblemen abgesehen, sind die oben genannten kleineren Mankos eigentlich kein Problem, wäre da nicht der happige Preis von 23,99€. So kann ich guten Gewissens leider keine Kaufempfehlung aussprechen, zumal es auch keine irgendwie geartete Testversion gibt. Die Idee ist klasse, nur an der Umsetzung mangelt es bisher.

Page Layers - Website screenshots with layers (AppStore Link) Page Layers - Website screenshots with layers
Hersteller: Ralf Ebert
Freigabe: 17+
Preis: 38,99 € Download


Ralf Ebert hat uns netterweise einen Promocode zur Verlosung überlassen, herzlichen Dank dafür. Es genügt der übliche „Will haben“-Kommentar bis zum 11.01.12, 15:00, um an der Verlosung teilzunehmen. Viel Glück!

Update (12.01.12): Herr Ebert hat sich löblicherweise und sehr schnell mit uns wegen der angesprochenen Kritikpunkte in Verbindung gesetzt und arbeitet bereits an Verbesserungen.