Sonntags-Zeitvertreib: Erst backen, dann sketchen. Ein Rezept für Lussekatter.

Da will ich mir nur ein bisschen bei Twitter die Zeit vertreiben, da springt es mich sofort an: Ein Foto von frischen Milchbrötchen!!!

„Knurr“, äußert sich sofort der Magen.
Ich schlendere in die Küche und schaue wie absichtslos in den Kühlschrank. Ah, ja, es ist noch frische Hefe da. Zwar seit 15 Tagen abgelaufen, aber Hefe ist da ja nicht so … Bleibt die Frage, ob man sie noch „frisch“ nennen sollte.

Bei Chefkoch gibt es ein Rezept für schwedische Lussekatter, das sich glutenfrei abwandeln lässt. Dass in dem Rezept Salz fehlt und dass man besser noch Kardamom und vielleicht ein bisschen Kurkuma zugibt, das habe ich noch im Kopf.

Stimmt ja, ich wollte das Rezept in 100%ig richtig ja längst mal aufschreiben und abspeichern oder ausdrucken und in die Kochkladde tun. Jetzt hab ich es, während die Teiglinge im lauwarmen Ofen „gingen“, gleich digital auf dem iPad gezeichnet. Mit ProCreate, meiner Lieblings-Zeichen-App.

Das Rezept zeigt in Handschrift und Zeichnungen die Herstellung von schwedischem Safrangebäck. Die Basis ist dies Rezept bei Chefkoch: http://www.chefkoch.de/rezepte/223791092475989/Lussekatter.html . Allerdings fehlen in dem Chefkoch-Rezept 1 TL Salz und 1 TL Kardamon. Zeichnung: © Ania Groß

Weil glutenfreie Teige beim Gehen oft zerfließen, sind meine Lussekatter keine richtigen, aus Strängen geformten, „Katzen“, sondern ich backe sie in (Silikon-)Muffinformen. Schmecken tun sie genauso gut. Digitale Zeichnung: © Ania Groß

Übrigens: Die Lussekatter lassen sich gut einfrieren (und wieder aufbacken).

Vom Standard-Theme zur individuellen Website (Hamburg-Edition)

Diesen Talk habe ich am 16. April 2016 für das WordCamp in Nürnberg gemacht. Eine Wiederholung mit leichten Veränderungen gab es beim WP-MeetUp Hamburg Ende Juni 2016.

Mein WordPress.org-Name WP-Dummie ist Programm, also richtet sich meine Session an WordPress-Einsteigerinnen.
Wer bisher nur Standard-Themes verwendet hat und sich an die Umgestaltung nicht recht herantraute, lernt, dass es gar nicht schwierig ist, eine eigene Gestaltung mit WP umzusetzen oder Änderungen am Lieblingstheme vorzunehmen.

Es ist allerdings Voraussetzung oder mindestens hilfreich, ein bisschen CSS zu können.

Hier kommt mein Ablaufplan:

In 11 Schritten von TwentyEleven zum individuellen Theme (Sketchnote zu Session auf dem WordCamp)

In 11 Schritten von TwentyEleven zum individuellen Theme.

  1. Am Anfang steht z.B. der Wunsch der auftraggebenden Person oder unsere vage Vorstellung von unserer neuen Webpräsenz.
    Im Beispiel funktioniert die aktuelle Website gut und soll gar nicht groß verändert werden. Es gab aber den Wunsch, dass die Website responsive werden soll und die Auftraggeberin wollte selbst den Content ändern.
  2. Im Layout- oder Bildbearbeitungsprogramm entstehen nun unsere Entwürfe. Da die vorliegende Website recht einfach gestaltet ist, bietet sich TwentyEleven zur Umsetzung an: Es ist responsive und gut geeignet für ein Childtheme.
    Beim Gestalten habe ich die Bereiche von TwentyEleven im Hinterkopf:
    • Header
    • Content
    • Sidebar (Widgets)
    • Footer (Widgets)
  3. Die Entwürfe werden als PDF/JPG ausgegeben (oder ausgedruckt) und an die auftraggebende Person geschickt. Möglichst in realistischer Größe/Auflösung. Ich gestalte zunächst für 15-Zoll-Monitore mit 1280 bis 1440 px Breite.
  4. Während die Entscheidung fällt, wird WordPress installiert. Entweder lokal oder auf dem Server. (Das führt zu weit, dafür gibt es jede Menge Tutorials im Netz).
    Aus unserer frischen Installation löschen wir alle Themes und installieren als einziges das Parent-Theme, in diesem Fall TwentyEleven.
  5. Nun ist es sinnvoll, erst einmal ein bisschen Content anzulegen, deswegen kommt WordPress auch standardmäßig mit einer Beispielseite und einem Beispiel-Beitrag („Hallo Welt“). Wenn wir die Texte schon haben, können wir sie alle eingeben. Wir sollten auch eines oder mehrere Menüs anlegen und die entsprechenden Widgets.
  6. Nachdem wir Content haben, installieren wir das Plugin „One click child theme“ Das Plugin sorgt dafür, dass wir beim Anlegen alles richtig machen und sorgt dafür, dass die Installation und das Parent-Theme updatefähig bleiben.
  7. Nun brauchen wir noch einen Screenshot unseres neuen Layouts. Diesen beschneiden wir im Bildbearbeitungsprogramm auf 880×660 px und nennen ihn screenshot.png. Wir legen ihn ebenfalls in unseren Ordner und ersetzen dabei das Bild gleichen Namens, dass das Plugin generiert hatte.
    Im Backend unserer Site unter Design > Themes sollte bereits unser neues Theme ausgewählt sein.
  8. Wir können ein neues Headerbild einbauen. Dazu klicken wir im Frontend ganz oben in der Admin-Bar auf „Anpassen“ und dann auf Header-Bild oder wir gehen im Backend auf Design > Anpassen > Header-Bild. Das Bild sollte 1000 px breit sein.
    Danach können wir noch ein quadratisches Bild als Favicon hochladen (Design > Anpassen > Website-Information. Das Bild sollte eine Kantenlänge von mindestens 512 px haben.
  9. Im Beispiel möchte ich das Bild über dem Seitentitel/Slogan haben. Bei TwentyEleven steht der Text über dem Bild.
    Ich kopiere mir die header.php aus dem Parent-Theme in meinem Child-Theme-Ordner. Und verschiebe die Reihenfolge innerhalb des php-Codes. Dabei achte ich wie der sprichwörtliche Schießhund auf die öffnenden und schließenden spitzen Klammern!
    Und weil ich im Header kein Suchfeld haben möchte, lösche ich es ganz. Nach jedem Step überprüfe ich mein Ergebnis.
  10. Ebenfalls in die header.php kann man Google-Schriften einbetten. Das ist der einfachste Weg. Einfach den von Google zur Verfügung gestellten Codeschnippsel vor dem schließenden </head>-Tag einfügen.
  11. Und jetzt sind wir soweit. Nun brauchen wir nur noch CSS.
    Ich hab da mal was vorbereitet …

PDF der ganzen Präsentation

Übrigens basiert natürlich auch diese Website – sketchnotes-hamburg.de – auf TwentyEleven.

Nochmal neu: WordPress erklären

Ich hatte ja schon einmal eine Sketchnote zu dem Thema gezeichnet. Nun habe ich mir noch eine gemacht, die etwas allgemeiner ist und wo ich nach Wunsch die URL der Auftraggeberin/des Auftraggebers in den freien Platz einfügen kann.
Wieder hab ich den Redakteursbereich und den Adminbereich farblich getrennt. Die Plugins sind Standard, die verwende ich eigentlich bei allen Installationen.

Bedienung WordPress-Website. Gezeichnet von Ania Gross

Bedienung einer WordPress-Website. © Ania Gross

Ich bekam neulich bei einem anderen Workshop das Feedback, dass die Teilnehmerinnen viel mehr Lust darauf hätten, sich mit „Gebrauchsanweisungen“ auseinanderzusetzen, wenn diese gescribbelt sind.
Vielleicht möchte sich jemand eine Anleitung für sein Produkt sketchen lassen? Ich nehme Aufträge an.

 

WordPress erklären: An was ist zu denken?

Im Hauptjob bin ich Grafikerin und Webdesigerin. Und wenn ich jemandem eine WordPress-Website gestalte, dann mache ich am Ende eine Einführung. Dafür hatte ich sonst immer eine handgeschriebene Liste. Aber vor der letzten Einführung hatte ich ein bisschen Zeit, und so habe ich den Leitfaden gesketchnotet.
Violett ist der Bereich, den man mit der Redakteurinnen-Rolle bearbeitet, für die grünen Bereiche braucht man einen Admin-Zugang.

Sketchnote: Visueller Leitfaden für eine WordPress-Einführung.

Visueller Leitfaden für eine WordPress-Einführung.