Permalink

Kurztipp: Form · iOS-Prototyping unter OS X

Kurzer Hinweis auf Form, eine App, die fürs iOS-Prototyping geeignet und die durch die Übernahme durch Google kostenlos (der Preis lag sonst bei bis zu 129,99 Euro) im Mac App Store zu haben ist.

2014-11-20_15h18_55

Features

  • Live updates – Your document updates on the device as you work, without resetting the composition.
  • Native prototypes – Use device sensors such as the camera, accelerometer and gyroscope.
  • 3D – Views support 3D content and perspective.

Ohne, dass ich die App jetzt selbst groß getestet habe, empfehle ich folgendes Video zum Einstieg.

Die zu Form passende Viewer-App für iOS ist ebenfalls kostenlos zu haben. Mehr Infos sind auf der Webseite des Entwicklers zu finden. Für Video-Tutorials steht ein Vimeo-Kanal zur Verfügung.

[app 906164672]
[app 909186799]
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

Kurztipp: SnapRuler (Mac)

Du bist Designer oder Web-Entwickler und auf der Suche nach einer App, mit der man auf Klick pixelgenau den Desktop vermessen, die Dimensionen in Code-Form in die Zwischenablage kopieren oder Screenshots speichern kann?

Dann schau dir SnapRuler an, welches momentan kostenlos (der Preis liegt sonst bei 8,99 Euro) im Mac App Store zum Herunterladen angeboten wird und das wir vor ein paar Jahren auch schon mit einem kleinen Review bedacht hatten.

Bildschirmfoto 2014-10-22 um 16.40.18 

An (Code-)Formaten für die Dimensionen werden HTML, CSS, CoreGraphics, SASS/SCSS, jQuery/JavaScript, Rails, Quartz und AppleScript unterstützt. Dazu ist die Snapfunktion (mit gedrückter Shift-Taste) recht hilfreich, die SnapRuler bei sichtbaren Objekten automatisch einrasten lässt.

Zur Installation wird Mac OS X 10.6 Snow Leopard vorausgesetzt.

[app 477970167]

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.

youtube/watch?v=VKitqLpJtAY

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

PortKit: UX Metaphor Equivalents for iOS & Android

Nachdem ich letzte Woche schon das (Icon-)Template für iOS 7 vorgestellt hatte, soll heute auch wieder ein kleiner Tipp für App-Entwickler bzw. -Designer folgen.

portkit_featured_image

PortKit ist eine vollständige Sammlung aller Cocoa UI Elemente von iOS 6 bzw. iOS 7 und deren Android (ab Version 4+) Pendant. Das betrifft neben Schaltern, Knöpfen, Slidern, Menü- oder Text-Bausteinen auch sämtliche anderen UI-Elemente.

Das kann gerade sinnvoll sein, wenn man eine App von iOS auf Android oder umgekehrt portieren möchte. Zudem sieht man hier noch mal, für diejenigen, die es noch nicht kennen, deutlich den Design-Unterschied zwischen iOS 6 und iOS 7.

Bildschirmfoto 2013-06-24 um 10.51.00

Am Ende sind auch Referenzen zur Erstellung von Icons, zu verwendende Fonts und ein paar ‘Handy Utilities’, die bei der App-Entwicklung helfen, verlinkt.

-> PortKit

Permalink

Angeschaut: WebCode 1.0 · Code am Mac zeichnen

PaintCode erzeugte vor einiger Zeit, ich glaube es war im letztem Jahr, einige Wellen im Bereich iOS und Mac Development.

Mit PaintCode konnte man Grafiken, zum Beispiel für GUI-Elemente wie Buttons oder zur Navigation erstellen, zusammenbauen, zeichnen und dann mit einem Klick daraus Objective-C Core Graphics Code erzeugen. Diesen Code konnte man dann wiederum in seinen App einbauen. Coole Sache!

Webcode 1

Nun kommt vom gleichen Entwickler PixelCut eine neue App, die dieses Prinzip für den Web-Developer bereitstellen möchte. Mit der neuen App WebCode soll man JavaScript-, Canvas-, CSS-, HTML-, SVG-Code erzeugen können, um grafische Elemente zu zeichnen.

WebCode ist seit ein paar Tagen im App Store erhältlich und ich habe mir diese App mal ein wenig genauer angesehen.

WebCode sieht und benimmt sich in erster Linie wie eines dieser typischen Vektor-Grafik-Tools. Kennt man diese, wird man sich wohl recht schnell zu Hause fühlen. So findet man die bekannten Bedienelemente wie Rechtecke, Linien, Kreise, Bezierkurven, Text und Polygone und kann diese beliebig anordnen, verändern, vergrößern und verkleinern.

Im unteren Drittel der App sieht man dann in Echtzeit, wie WebCode aus den Zeichnungen direkt HMTL & CSS-, JavaScript Canvas- oder SVG-Code erzeugt. Diesen kann man jeder Zeit nehmen und weiterverwenden.

Bildschirmfoto 2013-04-11 um 07.23.55

Zu den erwähnenswerten Features gehören unter anderen der Import von PSD-(Layer&FX)- und SVG-Dateien, der Retina-Support und die Exportmöglichkeiten in die Formate PNG, TIFF, PDF und SVG.

Bildschirmfoto 2013 04 11 um 07 26 38   Bildschirmfoto 2013 04 11 um 07 26 17

Bildschirmfoto 2013 04 11 um 08 03 03

Auf der rechten Seite der App befindet sich die Library, wo man die Farben, Schatten, Verläufe und Bilder projektbasiert sammeln und verwalten kann.

Bildschirmfoto 2013 04 11 um 07 48 14

So kann man z.B. eine Farbe für mehrere Objekte definieren und diese dann hier zentral auch mit einem Mal ändern. Das gleiche gilt auch für Schatten und Verläufe. Einmal definiert – global veränderbar. Darüber hinaus können diese Eigenschaften auch Beziehungen zu einander haben. Die Benennung von Farben und Eigenschaften ist beliebig.

Bildschirmfoto 2013-04-11 um 08.07.35

Es gibt auch noch ein Previewmodus, welcher aus einem kleinen Fenster besteht in dem man schon zur Erstellung sehen kann, wie WebKit diesen Code rändern wird.

Bildschirmfoto 2013-04-11 um 08.21.24

WebCode setzt mindestens OS X 10.7 Lion zur Installation voraus und kostet im Mac App Store momentan 44,99 Euro.

Eine kostenlose Demo kann man sich hier laden und 30 Tage beliebig ausprobieren. Genügend gute Beispiele findet man ebenfalls auf der Produktseite.

[app 570644822]

FAZIT

WebCode wirkt für eine erste Version schon sehr rund. Man merkt, das hier viel Arbeit aus PaintCode drinsteckt. So ist es nicht verwunderlich, dass die beiden Apps 100% kompatibel sind und ihre erzeugten Dokumente sich gegenseitig austauschen lassen.

Ein abschließendes Urteil erspare ich mir aber, weil man mit so einem komplexen Entwicklertool erst einige Projekte umgesetzt haben muss, um die versteckten Tücken zu entdecken. Die ersten Eindrücke sind aber durchweg positiv. Entwicklern und Designern wird gleichermaßen eine tolle App geboten.

-> http://www.paintcodeapp.com/
-> http://webcodeapp.com/