Custom Post Type UI

Plugin-Test on the run: Custom Post Type UI

Ein wahrer Test wie er im Buche steht. Der Test eines Plug-In läuft meistens im Verborgenen ab und erst wenn der Schreiberling diverser Blogs voll und ganz mit der Funktionalität eines Plug-In vertraut ist. Aber der Test eines Plug-In sollte meiner Meinung nach auch beinhalten, wie sich ein Neuling zurecht findet. Daher wird dieser Beitrag sofort veröffentlicht und regelmäßig aktualisiert, um neu Erlerntes und Verbesserungsvorschläge sowie auch Lob zum Plug-In, um das es hier geht (Custom Post Types UI) mit euch zu teilen.

Darüber hinaus teste ich gleichzeitig mit CPT UI auch ein weiteres Plug-In on the run, dass hier aber nicht weiter beschreiben werden soll, sondern in einem späteren Artikel thematisiert wird. Es handelt sich um Advanced Custom Fields oder kurz ACF.

1. Eindruck

Im Grunde wird jeder Benutzer der sich mit CPT UI auseinandersetzt grundlegendes Wissen über die WordPress-Architektur haben oder zumindest wissen, was Custom Post Types sind. Der Benutzer wird ein Ziel haben, was er mit diesen umsetzen möchte und sich vorher auch über die Begriffe Taxonomie, Posttypes und dergleichen schlau machen.

Startseite

Die Oberfläche mit der CPT UI uns begrüßt, bietet einen ersten Überblick über die Funktionalität und klärt einige erste Fragen. Soweit schonmal wunderbar, aber kein Grund, da weiter drüber zu reden.

Add New (neuen Post Type erzeugen)

Taucht man tiefer in das PlugIn ein findet man sich bei Add New wieder. Hier können wir nun einen neuen eigenen Post Types erstellen und auch sofort Taxonomien dazu erstellen. Positiv zu betonen ist die einfach gestaltete Oberfläche mit einigen kurzen Erklärungstexten und das Angebot von grundlegenden Feldern, um eigene Post Types zu erstellen. Man bekommt alle notwendigen Felder gezeigt um eigene Post Types zu erstellen, hat aber zusätzlich die Möglichkeit weitere Felder einzublenden, wie etwa  weitere Labelnamen, Sichtbarkeiten und vieles mehr.

Custom Post Type UI

Custom Post Type UI

Nun kommen wir zum ersten kleinen Stolperstein, den man allerdings nach circa zwei Minuten ausprobieren und lesen überwindet:

Füllt man das Formular für einen Post Type aus, klickt aber noch nicht auf Create Custom Post Type und möchte sich dann dazu sofort eine zugehörige Taxonomie erstellen wundert man sich, warum man diese Taxonomien nicht dem neuen Post Type verbinden kann. Die Tatsache, dass man sofort die Erzeugung von beidem angeboten bekommt, macht aus Usebility-Sicht meiner Meinung nach wenig Sinn, da es so den Eindruck erweckt, man könne sofort alles in einem Rutsch erledigen, was aber nicht der Fall ist. Unter dem Punkt Attach to Post Type taucht unser neuer Post Type den wir erzeugen möchten nämlich gar nicht auf. Natürlich ist klar warum das nicht funktioniert, weil bis zu dem Klick auf Create Custom Post Type dieser neue Typ nicht existiert. Wenn man sich vorher alles genau durchliest, wird man dieses Hindernis wahrscheinlich sogar umgehen, aber ich schätze aus DAU-Sicht wird es zu Verständnisproblemen kommen.

Mein Vorschlag:
1. Eine Funktion einbauen, die mit einem Hinweis wie “noch nicht erzeugt” oder “geplant” den Titel des neuen Post Type ebenfalls und Attach to Post Type anbietet, sodass noch nicht erzeugte aber geplante Post Types sofort mit Taxonomien verknüpft werden können.

2. Trennung von Taxonomie und Post Type Erzeugung, sodass beide Erzeugungsmodi immer die aktuellsten Daten auslesen und anbieten.

Man kann diese Verknüpfung zwar noch im Nachhinein festlegen, jedoch will ich an dieser Stelle lediglich sagen, dass es ein kleines Hindernis beim anfänglichen Verständnis des Plug-In darstellt und einen User somit schnell verschrecken kann.

Die anderen beiden Menüpunkte von CPT UI sind absolut klar strukturiert und verständlich. Wir haben die Möglichkeit dort unsere Post Types sowie die Taxonomien zu managen oder, und das möchte ich als absoluten Pluspunkt des Plug-In besonders betonen, sich den php-Code zum eigenen Post Type anzeigen lassen, um diese dauerhaft über die functions.php in ein Theme einfliessen zu lassen. Dazu: Daumen hoch!

Beispielerzeugung eines eigenen Post Type

Wir möchten nun einmal ein Beispiel Post-Type erstellen in denen wir eigene Projekte hinzufügen und managen können. Projekte können dann unterteilt werden, in thematische Schwerpunkte wie WordPress, Photoshop oder was einem eben so einfällt. Wir brauchen also zu unserem Post Type Projekt eine Taxonomie Schwerpunkt. Und so geht es:

Ein neuer Post Type wird erstellt

Ein neuer Post Type wird erstellt

Wie oben beschrieben würde ich euch empfehlen, das Taxonomien-Formular erst einmal nicht auszufüllen, da bei euch der Post Type Projekte auf der rechten Seite noch nicht stehen wird (sondern nur Beiträge und Seiten), könnt ihr eure Taxonomie auch nicht dem Post Type Projekt zuordnen. Klickt also nun zuerst auf Create Custom Post Type und euer neuer Post Type ist nun erzeugt und kann über das WordPress-Menü benutzt werden.

Eine Taxonomie erstellen

Eine Taxonomie erstellen

Sehr ähnlich verhält es sich bei den Taxonomien. Füllt das Formular aus aber achtet nun darauf, dass ein Haken bei dem Post Type gesetzt wird, der diese Taxonomie haben soll. Bei mir also die Projekte. Klickt auf Create Custom Taxonomy und nun hat euer eigener Post Type auch eine eigene Schlagwort- oder Unterscheidungskategorie.

Der Test von CPT UI wird weiter gehen, aber der erste Schritt ist nun getan und ich verabschiede mich bis dahin und hoffe von Euch in den Kommentaren zu lesen. Im nächsten Teil, werde ich mir die Erzeugung eines Projektes ansehen und auch wieder versuchen eventuelle Probleme zu erläutern oder gut gelöste Dinge zu zeigen.

Pinsel erstellen - Ein fertiges Beispiel

Eigene Pinsel in Photoshop erstellen

Eigene Pinsel in Photoshop erstellen zu können, gehört zu den Dingen, die man einfach drauf haben sollte. Denn sie erleichtern einem oft extrem die Arbeit. Man kann mit eigenen Pinseln große Flächen mit komplexen Strukturen füllen oder Formen, die sich sehr oft wiederholen sollen, nach ein wenig Vorbereitung schnell und einfach erzeugen. Weiterlesen

Zechenturm mit Landschaft

Zechenturm in Illustrator erstellen und Farben importieren

Als Niederrheiner und Bürger einer der Städte, die dem großen Zechensterben zum Opfer gefallen sind, möchte ich dem Bergbau auf meine Art ein Denkmal setzen. Dazu kommt Illustrator zum Einsatz und wir wollen damit einen Zechen- oder Förderturm in einer stark minimalistischen Form kreieren. Hier einmal das fertige Ergebnis:

Mein fertiger Zechenturm

Mein fertiger Zechenturm

Und hier das Original von mir fotografiert:

Zechen- oder Förderturm

Zechen- oder Förderturm

Farben

Es gibt sicherlich elegantere Wege die Farben, die wir benötigen in Illustrator zur Verfügung zu stellen. Allerdings hat sich dieses Verfahren bei mir so eingebürgert und es hat sich als ganz gut nutzbar erwiesen. Über andere Wege die Farben zu extrahieren bin ich natürlich dankbar und hoffe, Ihr lasst mich in den Kommentaren davon wissen. Nun zum eigentlichen.

Exportieren aus Photoshop

Importiert bzw. öffnet euer Bild in Photoshop. Aktiviert dann zu Anfang die Farbpipette und stellt den Aufnahme-Berich oben auf 5×5 Pixel Durchschnitt um.

Aufnahme-Bereich umstellen

Aufnahme-Bereich umstellen

Der Sinn dahinter ist der folgende: Nimmt man die Farbe über einen einzigen Pixel auf, kann es zu falschen Farben kommen, da die Kamera nicht jeden Pixel exakt so abbildet, wie es in Wirklichkeit ist. Wir selbst sehen diese falschen oder sagen wir lieber nicht ganz richtigen Pixel nicht, da unser Auge ebenfalls so etwas wie einen Durchschnitt erstellt und uns so die Farbe als solche übermittelt. Je besser eure Kamera ist, desto weniger tritt der Effekt der falschen Pixel auf. Jedoch sind noch viele andere Faktoren wichtig dabei. Aber das soll hier nicht das Thema sein. Wir nehmen also den Durchschnitt aus 25 Pixeln auf, um so eine möglichst natürliche Farbwiedergabe zu erreichen.

Farbdurschnitt mit der Pipette aufnehmen

Farbdurschnitt mit der Pipette aufnehmen

Wir nehmen alle Farben, die wir brauchen auf und speichern sie in den Farbfeldern durch einen Klick auf das kleine Icon neben der Mülltonne. Ich habe in meinem Bild die braunen Flächen, die Betonfassaden unterhalb sowie oberhalb des Geländers aufgenommen. Ausserdem das Geländer selbst. Zuletzt noch die Fläche im Bereich der Fenster.

Sind die Farben aufgenommen sichert ihr eure Farbfelder für einen Austausch über das entsprechende Menü und speichert sie dort ab, wo Ihr es finden könnt. Es wird als *.ase Datei gespeichert.

Farbfelder zum Austausch speichern

Farbfelder zum Austausch speichern

Photoshop speichert die gesamte Farbpalette, aber das soll uns egal sein, denn beim importieren in Illustrator suchen wir uns wieder genau die Farben aus die wir benötigen. Also kommen wir nun dazu.

Importieren der Farben in Illustrator

Startet Illustrator und erstellt euch ein neues 512px mal 512px Dokument und stellt das Profil auf Web. Nun klickt ihr in den Bedienfeldern das Icon für die Farbfelder und erzeugt mit einem weiteren Klick auf das Ordner-Icon eine neue Farbgruppe. Benennt die Farbgruppe wie Ihr möchtet.

Neue Farbgruppe in Illustrator erstellen

Neue Farbgruppe in Illustrator erstellen

Sollte bereits eure aktuelle Farbe als Element in der Farbgruppe auftauchen könnt ihr diese der Ordnung halber über das Mülltonnen-Icon löschen.

Klickt nun links unten auf das Icon mit den kleinen Büchern, um eine Andere Farbbibliothek zu öffnen. Wählt dann über den Dialog eure eben erstellte *.ase Datei. Nun wird euch die gesamte Palette wieder angezeigt und ihr markiert eure gewünschten Farben. Zieht diese Auswahl nun per Drag and Drop in die vorhin erzeugte Farbgruppe.

Importierte Farbfelder-Auswahl per Drag&Drop in die Farbgruppe ziehen

Importierte Farbfelder-Auswahl per Drag&Drop in die Farbgruppe ziehen

Das war’s!

Das eigentliche Malen in Illustrator

Nun da wir alle Vorbereitungen getroffen haben können wir endlich los legen. Mein Zechenturm soll eine sehr minimalistische Interpretation des Turmes werden und nur seine Grundmerkmale zeigen. So erkennt man ihn sofort wieder, ohne jedoch zu viel Details einbauen zu müssen. Dazu möchte ich noch einige Effekte hinzufügen, der meinen Turm zum Schluss wie Bastelkarton wirken lässt.

Wählt nun in Illustrator das Rechteck-Werkzeug aus und zeichnet die Grundform des Turmes. Jedoch erst nur den unteren Teil bis zum Geländer. Ist das Rechteck so wie ihr es haben wollt, stellt die Füllfarbe auf die richtige Farbe um. Wählt dazu das Feld aus der Farbgruppe aus, dass ihr vorhin in Photoshop dafür vorgesehen habt. Zuletzt entfernt noch die Kontur.

Grundform des Turmes erstellen

Grundform des Turmes erstellen

Sollte man von der pingeligen Sorte sein, kann man auch oben rechts über die H- und B-Werte die exakten Maße eingeben und so später die weiteren Objekte nach Größe und Position exakt berechnen.

B- und H-Werte für exakte Größenangaben

B- und H-Werte für exakte Größenangaben

Ich gehöre zu den genauen Menschen und habe hier schon exakte Werte eingegeben und werde die folgenden Formen alle genau berechnen. Oder zumindest werde ich es versuchen :) Ich teste mein Können nun also sofort einmal an den braunen Feldern des Turms. Wenn Ihr nicht mehr genau wisst welche ich meine, schaut noch einmal das Foto oben an.

Vorn hat er fünf dieser Felder und sie sind alle gleich breit. Da unsere Grundform 250px breit ist, ergibt sich somit eine Pixelbreite der braunen Felder von rund 50px pro Feld. Ziehen wir nun die beiden breiten Betonfassaden ganz rechts und ganz links ab, bleiben uns nur noch ca. 200px Grundfläche. Also sind unsere braunen Felder nur noch etwa 40px breit. Aber wir müssen noch etwas abziehen. Die Felder sind immer durch einen schmalen Streifen Beton voneinander getrennt. Wählen wir für diese Streifen eine Breite von 5px, ergibt sich für alle Streifen eine Breite von 4 mal 5px also 20px. Verteilt auf 5 braune Felder haben wir also dann eine exakte Breite der braunen Felder von 40px-4px = 36px. Erstellt jetzt diese Felder. Ihr werdet relativ schnell merken, wie euch die Hilfs- und Abstandslinien, die Illustrator immer wieder automatisch einblendet, beim exakten Positionieren helfen.

Erzeugen der brauenen Felder. Die Hilfslinien leisten gute Arbeit!

Erzeugen der braunen Felder. Die Hilfslinien leisten gute Arbeit!

Kommen wir nun zum Geländer im oberen Teil des Turms. Eigentlich werden wir zunächst nur die Ebene an sich ohne das Geländer zeichnen, da das Geländer selbst später vor dem oberen Aufbau erscheinen soll. Erstellt  nun eure Geländer-Ebene. Zeichnet dazu wieder mit dem Rechteck-Werkzeug ein Rechteck und füllt es mir der entsprechenden Farbe. Ihr könnt euch bei der Breite dieses Rechtecks wieder an den exakten Werten orientieren. Ich werde die Ebene rechts und links jeweils um 5 Pixel überlappen lassen. Also wird mein Rechteck 260px breit werden.

Die Geländer-Ebene sitzt oben auf

Die Geländer-Ebene sitzt oben auf

Was oben auf den Fotos leider nicht so gut zu sehen ist, ist, dass der Aufbau oben nicht ganz so breit ist wie der Teil unten. Dies müssen wir beim Zeichnen des Aufbaus berücksichtigen und verkürzen ihn auf beiden Seiten um jeweils 10px. Im Verhältnis zum grauen Grundelement unten versteht sich. Also 250px – 20px = 230px Breite für den Aufbau. Die Höhe wählen wir einfach wieder frei und passen auf unsere Farbe wieder an. Sofort danach setzen wir auch unser Fenster ein und passen es ebenfalls den Verhältnissen unseres Vorlagen-Fotos von oben an. Ich habe die Breite des Aufbaus genommen und rechts und links jeweils 25px abgezogen. Also hat unser Fenster eine Breite von 180px.

Oberer Aufbau mit Fenster

Oberer Aufbau mit Fenster

Was nun folgt ist ein wenig aufwändig, muss aber auch erledigt werden: Das Geländer. Hierzu kopiert euch einfach via Copy/Paste eure Geländer-Ebene von vorhin und verändert die Höhe auf 1px. Positioniert das Geländer nun so, dass es euch gefällt.

Danach, verbindet ihr Geländer-Ebene und Geländer durch zwei weitere Rechtecke und setzt diese kleinen Exemplare von 1px Breite rechts und links als Abschluss.

Das Geländer entsteht

Das Geländer entsteht

Kopiert nun dieses kleine Verbindungsstück so oft, dass ihr damit das gesamte Geländer aufbauen könnt. Achtet vor allem darauf, dass eure Abstände gleich bleiben. Sollte es jedoch am Ende so auskommen, dass eine etwas größere Lücke über bleibt, dann positioniert diese Lücke am besten irgendwo in der Mitte. Das wirkt dann als wäre es beabsichtigt. Am Ende sollte alles in etwa so aussehen:

Das fertige Geländer

Das fertige Geländer

Wir sind beinahe fertig. Denn einige Details wollen oder müssen wir doch übernehmen, da die ganze Komposition sonst irgendwie noch nicht so richtig wirken mag. Betrachten wir das Fenster noch einmal. Auf dem Foto ist zu sehen, dass es nicht ein großes sondern viele kleine Fenster sind. Wir wollen nicht alle übernehmen, aber die groben Strukturen schon. Ich entscheide mich dazu das Fenster in fünf waagerechte und sieben senkrechte Bereiche zu unterteilen. Ich erstelle mir dazu wieder ein Rechteck von einem Pixel breite bzw. Höhe und unterteile damit das Fenster. Als Farbe habe ich die Fensterfarbe gewählt und ein bisschen ins dunkle korrigiert.

Fensterunterteilung

Fensterunterteilung

Der letzte Schritt besteht nun noch darin das Dach zu setzen. Dazu erzeugen wir auch hier wieder ein neues Rechteck mit 2px Höhe und der gleichen Farbe wie das aller erste Rechteck, das wir erstellt haben. Natürlich darf auch der Fahnenmast nicht fehlen, den wir am Ende als schwarze Linie auf das Dach setzen. Im Grunde sind wir nun fertig und unser Ergebnis sieht nun so aus:

Das Ergebnis

Das Ergebnis

Jetzt geht es an die Details und die Verschönerung. Denn bisher haben wir uns ja nur ein Grundgerüst geschaffen, mit dem wir nun im Prinzip jetzt schon einiges anstellen können. Einige Dinge wollen wir aber bereits hier in Illustrator realisieren, bevor wir den Turm rüber zu Photoshop nehmen.

Schlagschatten & Schein nach innen

Wie zu Anfang erwähnt soll unser Turm wie aus Pappkarton gebastelt aussehen. Solche kreativen Arbeiten bestehen meist aus dem Übereinanderlagern von verschiedenen Pappen. Diese werfen minimale Schatten. Darüber hinaus sind die Kanten durch Abnutzung oder Lichteinfall auch oft etwas heller. Beides möchten wir natürlich auch haben. Beginnen werden wir mit den braunen Feldern.

Über das Menü Effekt > Stilisierungseffekte > Schlagschatten bietet uns Illustrator diese Möglichkeit. Probiert einfach ein wenig aus und stellt euren Schatten so ein, dass er euch gefällt. Setzt den Haken bei Vorschau um eure Änderungen sofort am Objekt sehen zu können. Unterstützen werde ich den Effekt noch etwas durch einen Schein nach innen über das Menü Effekt > Stilisierungseffekte > Schein nach innen. Hier meine Einstellungen zu beiden Effekten:

Schlagschatten

Schlagschatten

Schein nach innen

Schein nach innen

Damit die Flächen auch tatsächlich wie Pappe aussehen, fügen wir ihnen noch eine Struktur hinzu. Dies erledigen wir über eine Auswahl aller großen Flächen, die wie Pappe wirken sollen. Diese Auswahl erweitern wir um den Struktureffekt über das Menü Effekt > Strukturierungseffekte > Mit Struktur versehen. Meine Einstellungen seht Ihr hier:

So erstellt Ihr eine Struktur auf den Flächen

So erstellt Ihr eine Struktur auf den Flächen

Ich möchte hier jetzt nicht jede einzelne Fläche und ihre Schattierungen und andere Effekte auflisten. Ich habe euch gezeigt, wie das Grundprinzip funktioniert und nun liegt es an euch, alles so einzustellen wie Ihr es haben wollt. Ihr sollt ja hier nicht nachmachen, sondern lernen wie man es selbst macht.

Mein Zechenturm sieht nach der Benutzung der Effekte so aus.

Zechenturm mit Effekten

Zechenturm mit Effekten

Nun haben wir ein Grundgerüst mit entsprechenden grundlegenden Effekten. Dieses können wir benutzen, um daraus in Photoshop beispielsweise Kompositionen zu erstellen. Die eigentliche Datei, die wir nun hier in Illustrator erstellt haben, besteht gänzlich aus Vektorgrafiken und ist so jederzeit, auch in Photoshop, frei skalierbar und verliert bei Transformationen keinerlei Qualität. Ein überaus praktischer Punkt, der nicht vergessen werden darf ist, dass man die Illustrator-Datei aus Photoshop heraus, durch einen Doppelklick auf die Ebene, wieder in Illustrator bearbeiten kann. Wieder ein tolles Beispiel, wie gut Illustrator und Photoshop zusammenarbeiten.

Hier ein fertiges Beispiel:

Zechenturm mit Landschaft

Zechenturm mit Landschaft

Hat euch das Tutorial gefallen? Lasst es mich wissen und äußert Kritik über die Kommentarfunktion!

Bildschirmfoto 2013-03-24 um 23.09.01

Selbstversuch: Wechsel von Safari zu Chrome

Safari ist seit mindestens zwei Jahren der Browser meiner Wahl und eigentlich spricht auch nichts für einen Wechsel von Safari zu Chrome. Jedoch wird für mich seit etwa Anfang diesen Jahres ein Wechsel immer interessanter. Es gibt einige Punkte, die besonders für die Webentwicklung wichtig oder praktisch sind und natürlich der Grund für eine Entscheidung von Safari zu Chrome zu wechseln: Die Geschwindigkeit. Chrome hat schon seit einiger Zeit im wahrsten Sinne des Wortes die Nase vorn, was Ladezeiten und Performance angeht und auch Tests von einschlägigen Computer-Zeitschriften und Online-Agenturen bestätigen dies. Darüber hinaus bietet Chrome eine hervorragende HTML5-Kompatibilität und da ich mich mit dieser Technologie in Zukunft mehr beschäftigen will, ist dies ein triftiges Argument für den Wechsel von Safari zu Chrome. Der letzte und unwichtigste Grund sei ebenfalls noch erwähnt, nämlich, dass mir persönlich die iOS-App von Chrome in Sachen Aussehen und Usability besser gefällt als Safari. Allerdings ist das ja nur meine persönliche Meinung.

Verzicht auf Funktionen?

Natürlich will ich nicht auf die Vorteile von Safari verzichten müssen. Vorteile, wie etwa die Anbindung an die iCloud und damit verbundene Sync-Optionen zwischen meinem iMac und meinen anderen iDevices. Welche Tabs habe ich gerade auf dem MacBook geöffnet? Sind alle meine aktuellen Lesezeichen vom iMac auch auf meinem MacBook? All diese Fragen gilt es am Ende des Wechsels von Safari zu Chrome mit einem großen “JA!” zu beantworten.

Ich werde diesen Artikel hier einfach als einen Echtzeit-Wechsel gestalten und meine aktuellen Einstellungen, Lesezeichen und weiteres in Safari als Ausgangspunkt nehmen. Danach werde ich mir eine leere und frische Chrome-Installation auf die Platte spielen und dann nach und nach versuchen alle Funktionen, die ich brauche in Chrome umzusetzen.

Zunächst fertige ich mir aber eine Auflistung an, welche Funktionen ich in Chrome definitiv brauche.

  1. Aktuelle Lesezeichen von Safari zu Chrome überführen
  2. Synchronisation der Lesezeichen zwischen meinen Macs und dem iPhone
  3. Aktuell geöffnete Tabs auf allen Geräten anzeigen
  4. Evernote-Plugin
  5. Flash blockieren und Werbung verhindern
  6. Aussagekräftiger Code-Inspector

Lesezeichen

Erst einmal gilt es natürlich die aktuellen Lesezeichen von Safari in Chrome zu exportieren. Ich will also erst einmal den aktuellen Status meines Safari-Browsers in Chrome reproduzieren. Dies ist zunächst das Wichtigste, da ich auf meine bisherige Lesezeichen-Sammlung nicht verzichten will.

Export der Lesezechen von Safari zu Chrome

Safari bietet wie jeder moderne Browser eine Exportfunktion für die Lesezeichen an. Eigentlich brauchen wir diese Funktion aber gar nicht, weil man nach der Installation und dem ersten Starten von Chrome automatisch entsprechende Optionen angeboten bekommt. Erst einmal ernennen wir den neuen Browser über die gelbe Hinweisleiste zum Standard-Browser und fahren dann durch einen Klick auf “Lesezeichen jetzt importieren…” fort.

Eine frische Chrome-Installation

Eine frische Chrome-Installation

Safari Lesezeichen in Chrome importieren

Safari Lesezeichen in Chrome importieren

Nun ist unsere neue Chrome-Installation mit den gleichen Lesezeichen ausgestattet wie die alte Safari-Installation. Des weiteren hat man nun noch einige Möglichkeiten Einstellungen vorzunehmen. Welche man benötigt oder haben will, bleibt natürlich jedem selbst überlassen. Ich nehme hier erst einmal keine weiteren Einstellungen vor, sondern will schauen welche Anforderungen sich an Chrome ergeben, wenn ich die weiteren Funktionen umsetze, die ich brauche.

Synchronisation zwischen den Installationen der verschiedenen Geräte

Die Synchronisierung der Lesezeichen zwischen Safari-Installationen erfolgt in der Regel über einen iCloud Account. Um diese Funktion zwischen verschiedenen Chrome-Installation zu bewerkstelligen wird ebenso ein Google-Account benötigt. Entweder man legt sich diesen an dieser Stelle schnell an oder man hat bereits einen und es möge weiter gehen. Ich habe bereits einen und logge mich nun mit diesem Account über Chrome > Einstellungen > In Chrome anmelden ein.

Im nächsten Schritt werde ich darum gebeten meine Synchronisierungseinstellungen zu bestätigen. Dies tue ich aber noch nicht, sondern klicke erst einmal auf erweitert um festzulegen, was alles zwischen den Browsern synchronisiert werden soll.

Synchronisierungseinstellungen bestätigen

Synchronisierungseinstellungen bestätigen

Was soll alles synchronisiert werden?

Was soll alles synchronisiert werden?

Meine Einstellungen sind bis auf einen Punkt auf den Default-Settings verblieben. Ich stelle lediglich die Einstellung unter Verschlüsselte Datentypen so ein, dass alle übermittelten Daten verschlüsselt werden.

Schaut man sich die Checkboxen oben einmal genauer, an merkt man schon, dass der Rest unserer Anforderungsliste oben ab hier schnell abgearbeitet ist.

Synchronisierung der Lesezeichen: Check!
Synchronisierung der geöffneten Tabs: Check!

Synchronisierung der geöffneten Tabs

Dies teste ich prophylaktisch einmal zwischen MacBook und iPhone. Sollte man es noch nicht erledigt haben, dann muss man auch auf dem iPhone oder anderen iDevices Chrome installieren, öffnen und sich mit seinem Google-Account einloggen, um die Synchronisierung nutzen zu können.

Testweise öffne ich meine Website auf dem iPhone und siehe da, es funktioniert so wie es soll.

Auf dem iPhone geöffneter Tab...

Auf dem iPhone geöffneter Tab…

...wird auch auf dem Mac angeboten

…wird auch auf dem Mac angeboten

So weit, so gut!

Evernote

Da die Benutzung von Evernote unumgänglich für mich ist, möchte ich bei meinem Wechsel von Safari zu Chrome auch darauf nicht verzichten. Ich nutze Evernote beinahe jeden Tag und speichere mir damit Websites oder Artikel, sowie eigene Notizen. In der Bahn oder unterwegs kann man sich so schnell interessante Artikel zum späteren Lesen sichern und hat über die interne Sync-Funktion von Evernote alles jederzeit und auf jedem Gerät zur Hand. Wer Evernote noch nicht kennt: Unbedingt ansehen.

Evernote und Chrome-Desktop

Nun gilt es zu testen wie man diese Anbindung von Chrome an Evernote zustande bringt. Der erste Blick führt mich in den Chrome Web Store, da ich die Evernote-Funktion in Safari ebenfalls über ein nachinstalliertes Plugin realisiert habe.

Tatsächlich! Auch hier gibt es die passende Erweiterung Evernote Web Clipper, die ich sofort über einen Klick auf Hinzufügen in Chrome installiere. War der Vorgang erfolgreich, steht euch rechts neben der Adressleiste (in Chrome heisst sie OmniBox) das kleine Elefanten-Logo von Evernote zur Verfügung. Ich möchte hier jetzt nicht die Verwendung des Webclippers thematisieren. Probiert etwas herum, dann wird es relativ schnell klar, was es damit auf sich hat.

Evernote Web Clipper wurde erfolgreich installiert

Evernote Web Clipper wurde erfolgreich installiert

Evernote und Chrome für iOS

Hier gestaltet sich das erste Problem auf das ich gestoßen bin. In Safari für iOS gibt es eine solche direkte Anbindung an Evernote ebenfalls nicht, aber daher gilt es genau dies bei meinem Wechsel von Safari zu Chrome zu überprüfen und diese fehlende Funktion vielleicht endlich zu realisieren. Wer jedoch wie ich keine Umwege über JavaScript-Bookmarks gehen will, wird auch hier leider enttäuscht. Eine direkte Möglichkeit Websites aus Chrome heraus an Evernote zu senden bleibt mir nach wie vor verborgen. Wenn Ihr etwas kennt, dass das Problem löst, lasst es mich wissen.

Also bleibt auch hier nach wie vor nur die Möglichkeit die URL der interessanten Website zu kopieren, Evernote zu öffnen und manuell eine neue Notiz zu erstellen. Nun ja, nicht wirklich toll, aber auch keine Verschlechterung zu Safari. In diesem Punkt also ein Remis.

Flash blockieren und Werbung verhindern

Auch diese beiden Aufgaben lasse ich von Plugins ausführen. Ich suche dabei explizit zwei Plugins, die sich bereits bewährt haben und immer genau das taten was sie auch sollten.

Das erste ist der AdBlock Plus, der sich um die Ausblendung und das Blockieren von Werbebannern, -anzeigen und -videos kümmert.

Zusätzlich hatte ich früher noch den FlashBlocker installiert, der wie der Name es bereits erahnen lässt, Flash-Elemente nicht sofort lädt, sondern dies erst durch einen Klick auf eine entsprechende Schaltfläche erlaubt. Kann man installieren, muss man aber nicht.

Aussagekräftiger Code-Inspector

Zuletzt noch das vielleicht wichtigste Werkzeug eines Webentwicklers: Der Code-Inspector. Hier kann man in Echtzeit Änderungen an einem CSS- oder HTML-Dokument vornehmen und so Einstellungen oder Styles testen, ohne das ganze Dokument selbst verändern zu müssen.

Der eingebaute Inspector von Chrome bietet im Prinzip die selben Funktionen wie der von Safari, ist meiner Meinung jedoch etwas flotter und lässt ein etwas flüssigeres Arbeiten zu.

Code-Inspector von Chrome

Code-Inspector von Chrome

Neben Document-Editing lassen sich auch Fehleranalysen über die Konsole durchführen oder Ladezeiten von einzelnen DOM-Elementen überprüfen. Alles was man eben so braucht.

Fazit des Wechsels von Safari zu Chrome

Natürlich wird erst eine Benutzung über mehrere Wochen zeigen, ob der Wechsel von Safari zu Chrome erfolgreich über die Bühne gegangen ist. Jedoch kann ich jetzt schon sagen, dass alle Voraussetzungen geschaffen sind. Alles was nun noch ausschlaggebend sein wird ist die tägliche Benutzung von Chrome.

Wartung: Check!

Für alle die es in der Zwischenzeit probiert haben: Wir sind wieder aus dem Wartungsmodus erwacht! Leider keine optischen Neuerungen, aber innen drin hat sich einiges getan. Genaueres dazu in einem baldigen Tutorial!

Stanz-Effekt bei einer Navigationsliste

Listenelemente durch gestanzte Konturen trennen

Des öfteren werden euch schon Navigationsmenüs im Web begegnet sein, die gestanzte Konturen in irgendeiner Form hatten. Als ich vor einigen Jahren mit dem Webdesign angefangen habe, bin ich nicht sofort darauf gekommen wie man das macht (heute frage ich mich warum ;) ). Daher möchte ich euch diesen kleinen Trick nicht vorenthalten und zeige euch nun einmal wie das geht. Bevor ich irgendwie versuche mit Worten zu erklären was das genau dieser Effekt ist, hier ein Beispiel:

Stanz-Effekt bei einer Navigationsliste

Stanz-Effekt bei einer Navigationsliste

Die einzelnen Menüpunkte sehen aus als hätten sie gestanzte Konturen. Dieser Effekt ist mit nur sehr wenig CSS-Code umzusetzen, wirkt dafür aber sehr gut. Erst einmal brauchen war dazu eine Liste.

Soweit keine große Kunst. Jedoch gibt es im nächsten Schritt eine Kleinigkeit, die man bedenken muss. Man löst den eigentlich Effekt für gestanzte Konturen in erster Linie über die Rahmen, also die borders. Wir setzen dazu in unserem CSS-Code die top- und die bottom-border für die Listenelemente. 

Wenn Ihr die Links benutzen wollt, um die borders zu setzen, vergesst nicht diese via CSS auf display:block; zu setzen. So geht Ihr auf Nummer Sicher, dass die Kanten der Listenelemente genau aneinander stoßen. Warum wir dies brauchen sehen wir jetzt.

Was wir hier nun erreichen wollen ist, dass die untere Border eines Listenelementes (A) und die obere Border des nachfolgenden Listenelementes (B) genau über- bzw. untereinander liegen. Denn nun können wir A dunklere Farbe geben (natürlich an euren Hintergrund angepasst) und B eine hellere Farbe.

Prägung im Detail

Prägung im Detail

Der Sinn dahinter ist logisch: Da meine Lichtquelle irgendwo von oben her strahlt, liegt die obere Kante der Prägung im Schatten, während die untere Kante beleuchtet wird. Wenn Ihr keine gestanzte Konturen sondern vielleicht ein Relief haben wollt, dreht dieses Prinzip einfach um.

Soweit so gut, wenden wir nun einmal das eben gelernte an und schauen uns das Ergebnis an:

Beinahe fertig

Beinahe fertig

Irgendetwas scheint schief gelaufen zu sein, denn die obere und untere Kante sehen nicht wie gestanzte Konturen aus. Und das ist logisch, denn das erste Listenelement hat als CSS-Regel unten eine dunklere Border und oben eine helle. Unten ist alles korrekt, aber oben fehlt einfach der dunkle Partner der Border. Wie lösen wir das?

Ganz einfach: Da wir beim ersten und letzten Element das prinzipiell gleiche Problem lösen müssen, nutzen wir die Border, die wir noch zur Verfügung stehen haben und die ebenfalls exakt an die Grenzen der Listenelemente heranragen. Ich rede von den Kanten der Liste selbst. Setzen wir also bei ihr ebenfalls unsere CSS-Regel.

Voila! Unsere Navigation ist nun gestanzt und überall ist der Effekt korrekt umgesetzt. Ausserdem könnt Ihr nun ohne Probleme weitere Elemente der Liste hinzufügen und durch die Regeln werden die Links der Navigationen immer durch gestanzte Konturen aufgehübscht sein.

Der Effekt ist fertig

Der Effekt ist fertig

Habt Ihr den Effekt auch schon benutzt oder weitere Tipps, was diesen netten kleinen, aber auch einfachen CSS-Trick erweitern. Lasst es mich wissen und hinterlasst einen Kommentar.

Google Reader macht dicht! Was nun?!

Bye, bye Google Reader

Und das war’s dann! Viele werden die Nachricht auf dem Google Reader Blog ebenfalls gelesen oder diese eher ärgerliche Botschaft über andere Quellen bezogen haben. Jedenfalls steht fest: Google Reader stellt am 1. Juli den Dienst ein.

Natürlich ist es so, dass dadurch RSS nicht sofort komplett aussterben wird, aber meiner Meinung nach wird dies die Entwicklung entscheidend vorantreiben, da es einfach weitaus umständlicher ist, ohne Google Reader seine Feeds zu verwalten.

Natürlich, warum nicht einfach die Feeds der jeweiligen Website im gewohnten Feedreader weiter beziehen? Da spricht erst einmal nichts dagegen. Aber gehen wir einen Schritt weiter und nehmen unser Smartphone und unser Tablett mit in den Ring. Schon wird dem alten Google Reader Hasen klar, wie unglaublich ärgerlich die Situation der Feedjunkies ist. Zumindest wenn es darum geht, auf allen Plattformen bzw. Geräten die selben Feeds zu bekommen. Mit Google Reader stirbt ein zentralisierter und für dritte App-Entwickler nutzbarer Weg, Feeds zu verwalten oder Feed-Funktionen in Apps zu nutzen.

Was nun?

Nun ja, in erster Linie müssen wir uns natürlich fügen. Allerdings gibt es einige Lösungen und Alternativen, die ich hier einmal aufzählen möchte.

Twitter

Auch ich habe in den letzten Jahren vermehrt auf Twitter zurückgegriffen, um meine News zu bekommen, die ich möchte. Jeder dem das Prinzip von Twitter klar ist, wird mir sicherlich zustimmen, wenn ich behaupte, dass Twitter vom Prinzip her alles bietet, was Feeds leisten. Menschen deren Arbeit man schätzt, werden ge-followed und man sagt so: “Hey, wenn du was neues hast, interessiert es mich!”

Feeds manuell und einzeln adden

Nach wie vor wird es natürlich möglich sein, Feeds neu mittels eines Feed-Reader neu zu abonnieren und so aktuelle News zu bekommen. Wie die Entwickler von Reeder über Twitter ankündigen, wird das Ableben von Google Reader nicht selbiges von Reeder bedeuten. Dies lässt bei mir den Schluss zu, dass die Entwickler der App keine Angst haben, dass RSS aussterben wird.

Allerdings entsteht nun das Problem, wie oben schon erwähnt, dass man einen Feed auf dem Desktop-Rechner hinzufügt und nun dieser dann noch lange nicht auf dem Smartphone, dem Tablet, dem Arbeits-Rechner und anderen Geräten ist. Also gilt es dann, auf allen Geräten wieder das kleine Plus zu drücken und auf jedem den Feed ebenfalls hinzuzufügen. Keine sonderlich elegante Lösung, aber möglich.

Integrierte Synchronisationslösungen

Wenn ich mich richtig erinnere, war eine Synchronisierungsfunktion bereits Teil der App Flipboard. Die App erledigt ebenfalls das Abholen neuer Feeds und stellt diese dazu noch wirklich sehr nett da. Unbedingt anschauen!

Im Grunde kann man auch auf solche App-Internen Dienste zurück greifen. Allerdings ist die Nutzung durch dritte Parteien, die ebenfalls einen Feed-Dienst oder eine App mit Feed-Funktion anbieten wollen, dadurch eher schlecht zu realisieren. Wer also plötzlich oder zusätzlich andere Apps als Flipboard nutzen will oder muss, steht nun vor dem gleichen Problem wie oben bereits beschrieben: Die Feeds sind nicht zentralisiert gespeichert.

Hoffen

Es bleibt die Hoffnung, dass ein anderer Entwicklerkreis die Arbeit fortführt. Vielleicht gibt es da draussen schon eine Gruppe von fleißigen Menschen, die an einer Alternative von Google Reader basteln und so die zentralisierte Verwaltung von RSS-Feeds wieder ermöglichen werden. Die Softwareschmiede um Feedly berichtete etwas sehr vielversprechendes, dass es sicherlich gilt im Auge zu behalten.

Fazit

Zum Schluss sei noch erwähnt, dass denjenigen, die ihre bisherigen Abonnements sichern wollen steht Google Takeout zur Verfügung. Der Export-Dienst erstellt XML und JSON Dateien, welche problemlos in andere Feed-Reader importiert werden können. Eure Abonnements, Shares und Likes können so kinderleicht gerettet werden.

Google Takeout

Google Takeout

Ergebnis des Google Takeout Exports

Ergebnis des Google Takeout Exports

Am Ende sagen wir alle gemeinsam “Goodbye Google Reader” oder besser optimistisch “Auf Wiedersehen” und ich hoffe, Ihr werdet diesen Artikel durch eure Meinungen und weitere Tipps und Alternativen zu Google Reader in den Kommentaren ergänzen.

Videotutorials mit MacOS X Bordmitteln

Videotutorials mit Quick Time erstellen

Videotutorials mit Quick Time erstellen ist sicherlich eine Vorgehensweise, die vielen Lesern aber auch Menschen, die sich selbst mit dem Thema befassen ein lautes “Niemals!” oder “Viel zu umständlich!” entlocken. Ich möchte hier einmal zeigen, dass mit Bordmitteln von MacOS X genau so gute Videotutorials erstellt werden können, wie mit vergleichbaren kostenpflichtigen Alternativen.

Was brauchen wir für ein verständliches Videotutorial?

  • Bildschirmaufnahmen in einer guten Framerate, damit es nicht ruckelt.
  • Ton- bzw. Mikrofonaufnahmen, die gut verständlich sind.
  • Eine Zoom-Funktion, um etwas detaillierte Dinge zu zeigen.
  • Schneidefunktion sowie Übergänge hinzufügen
  • Mausmarkierungen
  • Spaß am Reden und eine einigermaßen angenehme Stimme.

Im Prinzip also nicht viel und vor allem habt Ihr alles mit eurem Mac zusammen bekommen, was Ihr braucht. Außer vielleicht die Stimme. Meiner Meinung nach sind jegliche Drittanbieter-Tools, zumindest für meine Zwecke, überflüssig. Alle Aufgaben sind mit MacOS X selbst oder iMovie ohne große Umstände lösbar.

Ich werde das Tutorial in zwei Teile gliedern. Zunächst der Teil der Bildschirmaufnahme selbst und danach den Teil der Nachbearbeitung mit iMovie, welches beim Kauf eures Mac normalerweise mitgeliefert wurde. Also zwar kein Bordmittel, aber trotzdem verfügbare Software.

Des weiteren werde ich den textuellen Teil nach dem ersten Teil des Tutorials beenden und in ein solches Videotutorial übergehen, in dem ich euch zeige, wie Ihr die Nachbearbeitung angehen könnt.

Bildschirmaufnahme mit dem Quick Time Player (Erster Teil)

Um eine Bildschirmaufnahme zu starten, braucht Ihr gar nicht viel zu machen. Öffnet einfach erst einmal Quick Time und macht euch etwas mit dem Menü in der Finderbar vertraut. Recht schnell werdet Ihr den Menüpunkt Ablage > Neue Bildschirmaufnahme finden.

Neue Bildschirmaufnahme

Neue Bildschirmaufnahme

Klickt Ihr diesen Menüpunkt an, öffnet sich ein kleines schwarzes Fenster.

Die Quick Time Bildschirmaufnahme

Die Quick Time Bildschirmaufnahme

Im Prinzip könnt Ihr sofort los legen, es gibt allerdings noch einen Punkt, den man gerade für unsere Zwecke einstellen sollte. Klickt auf den kleinen Pfeil, der oben im Bild ein bisschen leuchtet und setzt einen Haken bei Mausklicks in der Aufnahme anzeigen.

Mausklicks in der Aufnahme anzeigen

Mausklicks in der Aufnahme anzeigen

Jetzt können euch eure Leser schon viel besser folgen, wenn Ihr etwas zeigen möchtet oder nicht jedes mal erklären wollt, wo sich der Button befindet auf den Ihr gerade klickt. Ihr selber werdet beim Aufnehmen allerdings nicht dadurch gestört und könnt ganz intuitiv erklären, da die Kennzeichnung der Klicks wirklich nur in der späteren Aufnahme zu sehen ist. Das schwarze Quick Time Fenster wird in eurem Film später allerdings ausgeblendet, sodass euch auch dies in der Aufnahme nicht stören wird.

Startet nun eure erste Aufnahme und probiert etwas herum. Testet dabei besonders ausgiebig die Lautstärke eurer Aufnahme und stellt es so ein, dass Ihr nicht zu sehr schreien müsst, also zu leise, aber auch nicht so laut, dass man ein Hintergrundrauschen hört.

Seid Ihr fertig, beendet eure Aufnahme auf dem Stop-Symbol und exportiert eure Aufnahme in iMovie. Am besten geht das über das Quick Time Menü unter Ablage > Exportieren zu > iMovie.

Das Video in iMovie exportieren

Das Video in iMovie exportieren

Ein aufgenommenes Tutorial nachbearbeiten (Zweiter Teil)

Wie oben erwähnt, werde ich nun ohne viel Umschweife das Medium wechseln und euch mit einem Videotutorial zeigen, wie Ihr eure eben erstellte Bildschirmaufnahme in iMovie noch ein wenig aufhübschen könnt. Also bis gleich!

Gestaltung und Entwicklung