Was zeichnet für Dich ein Ideales Programmier-Tutorial aus?

[Masterofweb]

Hallo zusammen,

Zeitnah möchte ich eine Blog mit Tutorials über JavaScript, Angular, Ionic in Deutsch starten. Mir ist aufgefallen, dass es für diese Programmier-Sprachen bzw. Framework nur English sprachige Blogs und Dokus gibt.

Meine Idee:

Anhand interessante Projekte eine Sprache in meinen Tutorials mit Erklärungstexten und Code Snippets lernen. Die Texte sollen auf Anfänger und Fortgeschritten der Programmierung zugeschnitten sein. Die erstellten Apps, Webseiten und Projekte sollen dem Lernenden nach Fertigstellung etwas nutzen: Notizblock, Rekorder…

Meine Fragen:

Was beinhaltet für Dich das perfekte Coding Tutorial?
Mit Screenshots oder mit Videos erklären?
Viele Hintergrundinfos oder nur auf das wesentliche reduzieren?
Wie lange sollte ein Tutorial sein?
Mehrere zusammenhängende Tutorails oder kurze?
-----------
Gesammelte Ideen bisher:

Das ideale Tutorial hat…

• Text, Videos, Screenshots (Resultate und Zwischenergebnisse)
• Videos, aber nicht mit LiveCoding --> Mehr für Konzepte und Statements
• Links zu absolute Grundlagen frü Beginner
• 1Basic Tutorial / sonst nur praxisorientierte Projekte
• Hintergrundwissen hinter Detaillinks
• Gut kommentierter Code
• Mit Inhaltsverzeichnis bei längeren Tutorials
• Quelltext seht im Mittelpunkt
• Vielleicht mit Humor und Bilder auflockern?
• Texttutorial als Listing?
• Kniffe der IDE erklärt

Aufbau für ein Standardtutorial

• Problem / Aufgabe / Thema
  • Was wird behandelt?
  • Welches Resultat wird erwartet?
• Konzept mit Löungssansatz
  • Was sind die wichtigsten Zeilen Code?
  • Alternative Löungen
• Theorie-Lösungen (Kleines Beispiel)
  • Entscheidender Codeabschnitt mit Kommentar über Funktionen
• Umsetzung in der Praxis (großes Beispiel)
  • Gliederung des Herzstücks
  • Baue ein App / einer Webseite mit Text, Snipptes und Erklärungen
  • Mit Thema / freundlicher Gestaltung
  • Kniffs der IDE per Screenshots
  • Clean Code Snippets, die wieder verwendet werden können
• Erweiterungen (fortgeschrittene Subthemen)
  • Was sind die nächsten Schritte?
  • Wie kann ich mein Projekt erweitern?
• Fazit

Weitere Features:

• Download als PDF des Tutorials
• Screenshots mit Beschriftung
• Code-Snippet mit Hervorhebungen
• Ähnliche Struktur und Design wie bei Backlinko https://backlinko.com/google-search-console
• Next Chapter-Fipper Button?
• Tipps fürs Debuggen

Ausrichtung

Zielgruppe von Anfänger, der schon mal programmiert hat, bis zum ambitionierten Fortgeschritten 20–35 Jahre alt
Praktische und nütlzliche Coding-Projekte, die man der Realität auch so bauen würde

Zum Debuggen habe ich mir nicht so viele Gedanken gemacht, könnt aber dazu auch ein Tutorial bauen;

Anpassbarkeit des Codes ist mir auch wichtig. Möchte mit Clean Code Funktionen so universal wie möglich gestalten

 

[raekaos]

Sehr gute Idee.
Ich mag eine Kombination aus Videos und Text/Screenshots zum nachschlagen.
Die Länge sollte umbedingt durch das Thema oder den Themenkomplex bestimmt sein.
Grundsätzlich sind Projekttutorials eine schöne Sache, wenn sie gut aufgemacht sind. D.h. ein Tutorial welches grundsätzlich ehr für Fortgeschrittene gedacht ist, aber bei Bedarf, aufgrund der vorhandenen Beispiele über Links die Grundlagen oder komplexe Funktionen aufgliedert und erläutert, um Anfänger mitzunehmen.

So reicht ein Basic Tutorial welches die Grundlagen vermittelt und der Rest wird praxisnahe Projekte weitergegeben, in denen jeder selbst entscheiden kann wieviel Hilfe er benötigt.

 

[Axxid]

Videos können helfen, ich würde mich aber nicht zu sehr darauf versteifen. Gerade beim coden hilft ein Screenshot oder Beispielcode mehr als ständig ein Video zu müssen

 

[andy_m4]

Mit Screenshots oder mit Videos erklären?

Weder noch. Screenshots und Videos mögen ganz nötzlich sein, wenn es um die Bedienung von Programmen geht.
Fürs "Coding" wie Du es nennst ist es weder nützlich noch sinnvoll. Grad Videos sind da eher nervig. Man kann sie halt nicht "querlesen". Man ist auch gezwungen oft auf Stop, Zurück und Weiter zu klicken, weil es halt ein festes Tempo hat ohne auf das Tempo des Rezipienten Rücksicht nehmen zu können.

Und Screenshots eher in dem Sinne "So soll hinterher die Webseite aussehen" oder dergleichen.

Was beinhaltet für Dich das perfekte Coding Tutorial?

Wenn es sich gut in die Entwicklungsumgebung integriert. Allerdings weiß ich jetzt da bei Javascript gar nicht, ob es da sowas gibt.

Viele Hintergrundinfos oder nur auf das wesentliche reduzieren?

Beides. Nur würde ich Hintergrundinfos eher hinter einem "Details-Link" verstecken, damit das halt nicht das eigentliche Tutorial aufbläht.

Wie lange sollte ein Tutorial sein?

Das ist im Prinzip egal, weil man es ja nicht zwangsläufig an einem Stück durcharbeiten muss. :-)
Ansonsten haben natürlich überschaubare Kapitel schon was für sich. Man muss halt den richtigen Punkt treffen. Es darf natürlich nicht zu kurz sein. Es darf aber auch nicht so lang sein, dass man als Rezipient das gar nicht verdauen kann. Und das hängt im Wesentlichen davon ab, wie schwer das Thema ist. Aber natürlich auch, wieviel Vorwissen man mitbringt.

 

[Alchemist]

Schöne Idee, wenn du online gehst, kann hier gerne mal ein Link hin
Ich finde auch Code Beispiele sehr hilfreich, wenn sie insbesondere gut kommentiert sind. Ein Nachteil von Videos ist, dass man sie so schlecht durchsuchen kann. Hier fände ich ein Inhaltsverzeichnis schön.

Viele Hintergrundinfos oder nur auf das wesentliche reduzieren?

Kommt sehr auf die Länge an. Ein Tutorial >1h mit Coding im Wert von 20 Minuten würde ich spontan sagen, ist ein schlechtes Verhältnis.

Mehrere zusammenhängende Tutorails oder kurze?

Wenn ohne Inhaltsverzeichnis gearbeitet wird, wären kurze eine gute Alternative. Wer will, kann alle hintereinander schauen und wer nur eine spezielle Funktion sehen will, kann diese schnell finden und in 10 Minuten anschauen.

 

[new Account()]

Weder noch. Screenshots und Videos mögen ganz nötzlich sein, wenn es um die Bedienung von Programmen geht.
Fürs "Coding" wie Du es nennst ist es weder nützlich noch sinnvoll. Grad Videos sind da eher nervig. Man kann sie halt nicht "querlesen". Man ist auch gezwungen oft auf Stop, Zurück und Weiter zu klicken, weil es halt ein festes Tempo hat ohne auf das Tempo des Rezipienten Rücksicht nehmen zu können.

Also ich bin auch ein großer Fan von Videos. Man bekommt von einem Video durch das Live-Coding viel mehr mit mMn, und Code-Beispiele und Konzepte können auch viel Praxisnäher und besser (viel mehr visueller Input!) erklärt werden.

Mit Inhaltsverzeichnis kann man zielgesteuert im Video hin und herspringen (bzw. wenn man wirklich ernsthaft das Video schaut, weiß man eh wo man hinmuss). Hat man was nicht ganz verstanden, kann man immer mit der Pfeiltaste 5 Sekunden zurück und wenn es einem zu langsam geht kann man die Geschwindigkeit vom Video auch erhöhen.

Meiner Meinung nach sind Videos daher gerade fürs Lernen des Programmierens, d.h. für Anfänger, geeignet, da das Interesse des Überspringens von Inhalten eher weniger gegeben ist. Anders sieht es bei fortgeschrittenen Themen aus, aber da gibts ja eh schon StackOverflow.

Ich würde die Videos übrigens längenmäßig an das Thema anlehnen: Werden z.B. Klassen erklärt, sollte das Konzept derer vollständig erklärt werden. Vorzeitig abbrechen stört nur den Gedankenfluss und daher den Lerneffekt. Halb ein neues Thema anzufangen ist Schwachsinn.
Die Mindestlänge der Videos sollte mindestens 15 Minuten sein. Geht man darunter, kann man mMn in den Videos einzelne Themen nicht ausreichend tief behandeln. Und man sollte tief reingehen, ansonsten kann man sich gut auch einfach ein 01815 Tutorial reinziehen.
Ein Negativbeispiel, was herauskommt, wenn man versucht komplexe Inhalte innerhalb weniger Minuten hinzukotzen:

YouTube

An dieser Stelle steht ein externer Inhalt von YouTube, der den Forumbeitrag ergänzt. Er kann mit einem Klick geladen und auch wieder ausgeblendet werden.

YouTube-Embeds laden

Ich bin damit einverstanden, dass YouTube-Embeds geladen werden. Dabei können personen­bezogene Daten an YouTube übermittelt werden. Mehr dazu in der Datenschutzerklärung.

YouTube-Embeds laden

Datenschutzerklärung

YouTube

An dieser Stelle steht ein externer Inhalt von YouTube, der den Forumbeitrag ergänzt. Er kann mit einem Klick geladen und auch wieder ausgeblendet werden.

YouTube-Embeds laden

Ich bin damit einverstanden, dass YouTube-Embeds geladen werden. Dabei können personen­bezogene Daten an YouTube übermittelt werden. Mehr dazu in der Datenschutzerklärung.

YouTube-Embeds laden

Datenschutzerklärung

Keine Chance, dass da ein unwissender etwas mitnimmt.

Weiterhin wichtig wäre für Videotutorials, dass jedes Video einen klaren roten Faden und Aufbau hat (z.B. Problemstellung -> Lösung -> Konzept -> kleines Beispiel -> größeres Beispiel -> fortgeschrittenere Subthemen mit ähnlichem Aufbau.

Ein vorbildliches Projekt diesbezüglich kann hier gefunden werden: https://www.youtube.com/playlist?list=PLIMrZfX3DMVF7nLENd7R5HYFKJJBk2jZ7
Ist eigentlich Eine Vorlesung, aber macht sich mindestens genauso gut als Videotutorial.

 

[lemon03]

Gleichzeitig Video-Tutorials schauen und coden halte ich auch für eher kontraproduktiv. Selbst mit zwei Monitoren empfinde ich es als sehr anstrengend. Energie, die anders besser genutzt werden sollte. zB mit einem Buch neben der Tastatur Geht aber natürlich auch ein pdf auf dem zweiten Monitor.

Videos haben imo eher den Zweck einer Lehrsendung. Man schaut sich das an und ist dann hinterher ein wenig klüger. Zwar nicht in allen Einzelheiten, aber man hat schon einen gewissen Durchblick. Ähnlich, wie man sich auch ein Lehrbuch ganz durchlesen könnte, bevor man sich an die Übungen macht.

Zu Länge und Art des Tutorial finde ich diese Reihe ganz ansprechend, auch wenn es nicht eine der genannten Sprachen ist:

YouTube

An dieser Stelle steht ein externer Inhalt von YouTube, der den Forumbeitrag ergänzt. Er kann mit einem Klick geladen und auch wieder ausgeblendet werden.

YouTube-Embeds laden

Ich bin damit einverstanden, dass YouTube-Embeds geladen werden. Dabei können personen­bezogene Daten an YouTube übermittelt werden. Mehr dazu in der Datenschutzerklärung.

YouTube-Embeds laden

Datenschutzerklärung

 

[Masterofweb]

Also ich bin auch ein großer Fan von Videos. Man bekommt von einem Video durch das Live-Coding viel mehr mit mMn, und Code-Beispiele und Konzepte können auch viel Praxisnäher und besser (viel mehr visueller Input!) erklärt werden.

Mit Inhaltsverzeichnis kann man zielgesteuert im Video hin und herspringen (bzw. wenn man wirklich ernsthaft das Video schaut, weiß man eh wo man hinmuss). Hat man was nicht ganz verstanden, kann man immer mit der Pfeiltaste 5 Sekunden zurück und wenn es einem zu langsam geht kann man die Geschwindigkeit vom Video auch erhöhen.

Meiner Meinung nach sind Videos daher gerade fürs Lernen des Programmierens, d.h. für Anfänger, geeignet, da das Interesse des Überspringens von Inhalten eher weniger gegeben ist. Anders sieht es bei fortgeschrittenen Themen aus, aber da gibts ja eh schon StackOverflow.

Ich würde die Videos übrigens längenmäßig an das Thema anlehnen: Werden z.B. Klassen erklärt, sollte das Konzept derer vollständig erklärt werden. Vorzeitig abbrechen stört nur den Gedankenfluss und daher den Lerneffekt. Halb ein neues Thema anzufangen ist Schwachsinn.
Die Mindestlänge der Videos sollte mindestens 15 Minuten sein. Geht man darunter, kann man mMn in den Videos einzelne Themen nicht ausreichend tief behandeln. Und man sollte tief reingehen, ansonsten kann man sich gut auch einfach ein 01815 Tutorial reinziehen.
Ein Negativbeispiel, was herauskommt, wenn man versucht komplexe Inhalte innerhalb weniger Minuten hinzukotzen:

YouTube

An dieser Stelle steht ein externer Inhalt von YouTube, der den Forumbeitrag ergänzt. Er kann mit einem Klick geladen und auch wieder ausgeblendet werden.

YouTube-Embeds laden

Ich bin damit einverstanden, dass YouTube-Embeds geladen werden. Dabei können personen­bezogene Daten an YouTube übermittelt werden. Mehr dazu in der Datenschutzerklärung.

YouTube-Embeds laden

Datenschutzerklärung

YouTube

An dieser Stelle steht ein externer Inhalt von YouTube, der den Forumbeitrag ergänzt. Er kann mit einem Klick geladen und auch wieder ausgeblendet werden.

YouTube-Embeds laden

Ich bin damit einverstanden, dass YouTube-Embeds geladen werden. Dabei können personen­bezogene Daten an YouTube übermittelt werden. Mehr dazu in der Datenschutzerklärung.

YouTube-Embeds laden

Datenschutzerklärung

Keine Chance, dass da ein unwissender etwas mitnimmt.

Weiterhin wichtig wäre für Videotutorials, dass jedes Video einen klaren roten Faden und Aufbau hat (z.B. Problemstellung -> Lösung -> Konzept -> kleines Beispiel -> größeres Beispiel -> fortgeschrittenere Subthemen mit ähnlichem Aufbau.

Ein vorbildliches Projekt diesbezüglich kann hier gefunden werden: https://www.youtube.com/playlist?list=PLIMrZfX3DMVF7nLENd7R5HYFKJJBk2jZ7
Ist eigentlich Eine Vorlesung, aber macht sich mindestens genauso gut als Videotutorial.

Vielen Dank für die Umfangreiche Ideen Sammlung. Ich werde es so weit wie möglich umsetzen.

Ergänzung (17. Mai 2018)

Noch eine Frage: Wäre ein 10 Teiler mit so 1000 Wörter pro Teil, um eine vollständige Ionic App Schiritt für Schritt zu bauen zu lang oder soll ich lieber kleine unabhängige Themen behandeln. Z.B Wie verbinde ich mit einer Datenbank? // Sicher Login mit Google+ // Darstellung von Listen//

 

[andy_m4]

Also ich bin auch ein großer Fan von Videos. Man bekommt von einem Video durch das Live-Coding viel mehr mit mMn, und Code-Beispiele und Konzepte können auch viel Praxisnäher und besser (viel mehr visueller Input!) erklärt werden.

Gerade Live-Coding finde ich eher nervig wenn man eigentlich die meiste Zeit damit verbringt zuzugucken, wie ein anderer Code eingibt (man kann nicht mal schnell was copypasten, wenn man was probieren will).

Gut. Ich will es jetzt nicht zu sehr runtermachen. LiveCoding kann man ganz sinnvoll sein, weil man da sehr viel kleinschrittiger sieht wie der Profi Lösungen erarbeitet.
Aber insgesamt ist für mich Live-Coding eher Unterhaltung mit Lerneffekt. So ein bisschen wie, als wenn man eine populärwissenschaftliche Sendung guckt.
Im Rahmen eines Tutorials kann man das durchaus mal machen. Aber ich weiß nicht, ob es ne gute Idee ist das regelmäßig oder gar zum zentralen Mittel zu machen.

Früher ..... also vor der Zeit mit Internet oder gar Bücher auf den CDs bei waren mussten wir Programm-Listings abtippen. Ehrlich gesagt fand ich es grausam. Aber, auch wenn man den Quelltext nicht gleich verstanden hat, ist er schon allein durchs eingeben .... sozusagen einmal ins Auge durchs Gehirn zu den Fingern schon mal durch den Kopf gegangen. Man hat sich schon mal in einer gewissen Art und Weise damit auseinander gesetzt. Und das war durchaus hilfreich. Auch wenn man es nicht gleich gemerkt hat und eigentlich eher zum k*tzen fand.

Was ich eigentlich sagen will, es geht bei der Wissensaufnahme nicht unbedingt primär darum Fun zu haben. Das kann auch ein motivierender Aspekt sein. Aber wenn Du wirklich was lernen willst, kommst Du nicht umhin Dich auch mal "dreckig" zu machen.
Oder auch mal knifflige Probleme zu lösen. Das heißt, nicht gleich bei der erst besten Frage in irgendein Forum zu gehen, sondern wirklich sich mal Gedanken zu machen, wie löse ich mein Problem.
Das ist alles anstrengend, aber dabei lernt man wirklich das meiste.

Ein Tutorial sollte also auch nicht zu seicht sein. Gut. Richtet sich natürlich immer so ein bisschen danach, an wen man sich richtet. Jemand der schon seit 20 Jahren programmiert dem bringst Du sowas wie AngularJS anders nahe als jemanden der gerade man Javascript fehlerfrei schreiben kann. Die Tendenz dabei ist dann eher, umso weniger Vorkenntnisse Deine Zielgruppe hat, umso mehr Staub wird sie fressen müssen damit das was wird.

Und dessen muss man sich halt bewusst sein, wenn man so ein Tutorial machen will. Gehts darum möglichst viele Likes zu bekommen oder hat man den Anspruch, dass derjenige der das Tutorial durchgearbeitet hat am Ende auch ein echten Schritt nach vorne gemacht hat.

Mit Inhaltsverzeichnis kann man zielgesteuert im Video hin und herspringen (bzw. wenn man wirklich ernsthaft das Video schaut, weiß man eh wo man hinmuss). Hat man was nicht ganz verstanden, kann man immer mit der Pfeiltaste 5 Sekunden zurück und wenn es einem zu langsam geht kann man die Geschwindigkeit vom Video auch erhöhen.

Man kann auch einfach sagen: Video ist ein suboptimales Medium.
Ehrlich gesagt geht es mir immer auf den Wecker, wenn ich nach irgendwas suche und anstatt ne schöne Textanleitung zu bekommen, mich da irgendwer aus dem Youtube-Video anquatscht.

Mag sein, dass ich da untypisch bin und die Leute heutzutage irgendwie immer diesen Videoinput brauchen, weil es sie schlicht überfordert mal nen Text zu lesen. Ich finde Text aber vorteilhaft. Man kann querlesen. Man kann ihn durchsuchen. Man kann Sachen problemlos rauskopieren. Man braucht nicht seine Umgebung mitzubeschallen, wenn man sich schnell mal eben was zu Gemüte führt (gut; es gibt Kopfhörer; aber erstens hat man nicht immer ein dabei und zweitens kriegt man dann seine Umgebung nicht mehr mit; wenn einen jemand ruft oder das Telefon klingelt).
Text geht auch gut über schmalbandige Internetanbindungen oder gar welche, die irgendein Volumenkontingent haben.
Irgendwie seh ich nur Nachteile. Und das waren jetzt auch die, die mir spontan eingefallen sind.
Aber wie gesagt. Das lässt sich sicher nicht auf jeden übertragen. Denn irgendwie scheint es ja Bedarf an Videos zu allem möglichen Sch*** zu geben, sonst wäre das Internet ja nicht voll davon.

Eine Vorlesung, aber macht sich mindestens genauso gut als Videotutorial.

Gut. Aber eine Vorlesung ist jetzt etwas anderes, als ein Tutorial. Bei einer Vorlesung geht es ja darum irgendwie Wissen zu vermitteln so eher im Stile von Hintergrundwissen oder auch Konzepte.
Beim Tutorial gehts dann mehr um die konkrete Umsetzung oder Anwendung von Konzepten.

Ein vorbildliches Projekt diesbezüglich kann hier gefunden werden: https://www.youtube.com/playlist?list=PLIMrZfX3DMVF7nLENd7R5HYFKJJBk2jZ7

Gut, aber da gehts ja eher um die Bedienung eines Programms (Visual Studio) und eher weniger um die Programmierung. Wenns so Sachen sind a-la "erst musst Du dort klicken und dann dort" das ist tatsächlich im Text etwas ungünstig. Entweder man schreibt das aus, was nicht gerade übersichtlich ist oder es kommen seitenlang irgendwelche Screenshots. Da bin ich ganz bei Dir. Da macht ein Video Sinn.

 

[new Account()]

Aber ich weiß nicht, ob es ne gute Idee ist das regelmäßig oder gar zum zentralen Mittel zu machen.

Also ich finde so etwas sehr hilfreich:
Der Sprecher codet ja nicht nur, sondern erläutert nebenbei ja auch immer warum er was genau macht, auf was man noch aufpassen muss, wie das ganze ins Konzept passt, und was für Kniffe die IDE dann noch bereitstellt.

Ich hab mir früher auch in Mathethemen ab und zu Videos angesehen (bin da auch über die Fouriervideos gestolpert).
Wenn da jemand beispielhaft etwas durchgerechnet hat, und dabei auch immer laut geschlussfolgert hat, hat mir das extrem geholfen.

Man kann querlesen. Man kann ihn durchsuchen. Man kann Sachen problemlos rauskopieren. Man braucht nicht seine Umgebung mitzubeschallen, wenn man sich schnell mal eben was zu Gemüte führt (gut; es gibt Kopfhörer; aber erstens hat man nicht immer ein dabei und zweitens kriegt man dann seine Umgebung nicht mehr mit; wenn einen jemand ruft oder das Telefon klingelt).
Text geht auch gut über schmalbandige Internetanbindungen oder gar welche, die irgendein Volumenkontingent haben.

Bezüglich rauskopieren: Ist ja eigentlich nicht gerade zielfördernd in einem Tutorial, zumal es ja nicht als StackOverflow-Ersatz gedacht ist.
Wenn man in einem Video ein Projekt umsetzt, kann man den Code ja immer noch auf GitHub zur Verfügung stellen.

Aber eine Vorlesung ist jetzt etwas anderes, als ein Tutorial. Bei einer Vorlesung geht es ja darum irgendwie Wissen zu vermitteln so eher im Stile von Hintergrundwissen oder auch Konzepte.

In diesem Fall ist das sehr praxisorientiert, wobei auch Konzepte vermittelt warden, was aber DAZU gehört. Gerade das hilft den Anfängern doch am meisten. Einerseits um den Überblick zu behalten und andererseits um später selbst zu wissen wie man an Probleme herantreten kann.

Wie kann er denn Konzepte umsetzen, von denen er keine Ahnung hat?

Gut, aber da gehts ja eher um die Bedienung eines Programms

Ähm, ich zielte eher auf die ganze Videoreihe ab
Das ist Eine Episode von ca. 100-200, weiß es gerade nicht, wie viele es sind.


Mir kommt es ein bisschen vor als würdest du zusehr in der Haut eines Profis stecken - z.B. denke ich eher weniger, dass ein Anfänger groß Bedarf hat Sachen zu durchsuchen und dann rauszukopieren. Ich glaube das ist gerade das, was er nicht braucht. Er braucht die Erklärungen mit Zusammenhängen und Konzepten dazu und nicht nur einen Code. Und die wird er sich nicht eben mal im Bus reinziehen, weil diese neu für ihn sind.

Ergänzung (17. Mai 2018)

@Masterofweb Für mich ist deine Frage etwas zu spezifisch für die Infos, die zur Verfügung stehen.

EDIT: LiveCoding kann man ja verschieden einsetzen: Man will etwas veranschaulichen ("Unterhaltung"), man möchte einfach nur Dinge vorstellen, oder man möchte Dinge erläutern, wie in einem Tutorial. Man sollte daher nicht alles in einen Topf werfen.

 

[andy_m4]

Der Sprecher codet ja nicht nur, sondern erläutert nebenbei ja auch immer warum er was genau macht, auf was man noch aufpassen muss, wie das ganze ins Konzept passt, und was für Kniffe die IDE dann noch bereitstellt.

Gut aber das kann man ja auch im Text unterbringen. Das Text-Tutorial besteht ja auch nicht nur aus Quellcode.
Wenns so wäre, würde ich es eher als Listing bezeichnen. ;-)

Bezüglich rauskopieren: Ist ja eigentlich nicht gerade zielfördernd in einem Tutorial, zumal es ja nicht als StackOverflow-Ersatz gedacht ist.

Das nicht. Aber manchmal will man einfach nur schnell Sachen ausprobieren, weil man gerade ne spontane Idee hat.

Wenn man in einem Video ein Projekt umsetzt, kann man den Code ja immer noch auf GitHub zur Verfügung stellen.

Man nutzt also erst ein unzulängliches Medium und um diese Unzulänglichkeiten auszugleichen, macht man dann doch wieder klassisch Text. verstehe. :-)

In diesem Fall ist das sehr praxisorientiert, wobei auch Konzepte vermittelt warden, was aber DAZU gehört.

Jaein. Es lässt sich halt nicht immer so verknüpfen. Zumindest macht das nicht immer Sinn, weils sonst zuviel wird. Klar. Bei einfachen Sachen kann man das machen. Aber nicht bei Schwierigen.
Und klar. Manchmal ist es auch hilfreich Konzepte anhand von Beispielen zu vermitteln. Nur brauch ich dafür wiederum nicht unbedingt ein Video.

Gerade das hilft den Anfängern doch am meisten. Einerseits um den Überblick zu behalten und andererseits um später selbst zu wissen wie man an Probleme herantreten kann.

Auch das kann ich bei Text viel besser. Ich kann mir ja zwei verschiedene Views auf den Text auf machen. Einmal, wo es mehr ums Konzept geht. Den anderen Teil, wo es im Code umgesetzt wird. Und dann hab ich irgendwo vielleicht noch mein Texteditor/IDE wo ich selbst drin tippe. Und das alles kann ich bequem so anordnen, dass es gut auf meinen Bildschirm passt und ich kann es auch so anordnen, wie es für mich am besten/übersichtlichsten ist.
Mit der Videolösung bin ich da immer am Arsch. Weil ich kann nicht mal vernünftig zoomen ohne das es entweder unlesbar oder unscharf wird.

Wie kann er denn Konzepte umsetzen, von denen er keine Ahnung hat?

Hab ich doch geschrieben. Man geht erst das Konzept als solches durch und dann von mir aus anhand eines konkreten Beispiels. Oder von mir aus auch beides zusammen. Aber Du hast das mit der Vorlesung ins Spiel gebracht. Ich hab das lediglich aufgegriffen und meinen Senf dazu gegeben.

Ähm, ich zielte eher auf die ganze Videoreihe ab
Das ist Eine Episode von ca. 100-200, weiß es gerade nicht, wie viele es sind.

Ja. Ich hab mir dann auch spätere Teile angesehen und da hat man genau das Problem, was ich bereits schilderte.

Wie gesagt. Es gibt auch Live-Coding-Videos, denen ich wirklich was abgewinnen kann.
Das hier hatte ich mal vor geraumer Zeit angesehen ->

YouTube

An dieser Stelle steht ein externer Inhalt von YouTube, der den Forumbeitrag ergänzt. Er kann mit einem Klick geladen und auch wieder ausgeblendet werden.

YouTube-Embeds laden

Ich bin damit einverstanden, dass YouTube-Embeds geladen werden. Dabei können personen­bezogene Daten an YouTube übermittelt werden. Mehr dazu in der Datenschutzerklärung.

YouTube-Embeds laden

Datenschutzerklärung

und es war sehr lehrreich. Ich hab einige Sachen tatsächlich gebrauchen können. Aber ich hab es halt nicht als Tutorial konsumiert (dafür ist es auch gar nicht gedacht; das wäre eher was, was ich unter einer Vorlesung verstehen würde). Sondern einfach ... na wie gesagt .... als Vorlesung. Als Bildungsfernsehen oder wie auch immer man das umschreiben möchte. Und das fand ich völlig in Ordnung, interessant, hilfreich.

Ich finde auch echtes Live-Coding sehr hilfreich. Also wo man wirklich Live beim Tutor ist und ggf. auch mal fragen kann. Also so gewissermaßen wie Unterricht.

Mir kommt es ein bisschen vor als würdest du zusehr in der Haut eines Profis stecken

Mag sein. Kommt natürlich drauf an, an wen sich ein Tutorial richtet. Ich denke schon, dass man als blutiger Anfänger mehr geführt werden muss als jemand der schon Vorwissen hat und jetzt zum Beispiel an irgendein Framework herangeführt werden soll oder weiß der Geier.

Nichtsdestotrotz war ich ja auch mal Anfänger und bin es ja bei vielen Sachen auch heute noch. Also auch wenn man zum Beispiel außerhalb der IT guckt. Und wie schon gesagt, wenn ich dann irgendwie im Internet was suche und da will mir irgendwer was per Video erklären, dann weiß ich schon vorher, dass wird mich eher nerven.
Wobei es auch hier wieder drauf ankommt. Irgendein Gerät montieren oder so, da macht wieder wieder absolut Sinn. Auch wenn ich dort ständig am spulen bin aber manchmal hast Du halt so Handgriffe, die werden in einem Text gern vergessen und im Video kannst Du notfalls genauer hinschauen, selbst wenn er das nicht kommentiert.

z.B. denke ich eher weniger, dass ein Anfänger groß Bedarf hat Sachen zu durchsuchen

Hast Du ne Ahnung. Der verwendet im Video irgendwie was, was er vor 3 oder 4 Minuten erklärt hat. Im Text würde ich einfach suchen / querlesen. Im Video muss ich erst umständlich rumprobieren, wo jetzt die Stelle war.

und dann rauszukopieren.

Zum rauskopieren hab ich eigentlich schon alles gesagt. Ich will manchmal einfach schnell ein paar Sachen ausprobieren. Gerade als Anfänger. Wie verhält sich jetzt eigentlich der Code, wenn ich "das_und_das" mache. Dieses rumexperimentieren finde ich ein ganz wichtigen Faktor beim lernen.
Und wie oft hatte ich so in meiner Anfangszeit die Situation das ich mir dann beim Blick auf den Quelltext gesagt hab "Hm. Wenn Du das und das machst, müsste ja dann eigentlich das passieren". Ausprobiert. War so. Irgendwas erst dadurch wirklich verstanden, weils im Text (oder wahlweise durch den Sprecher) nicht ganz genau rüber kam.

Ich glaube das ist gerade das, was er nicht braucht. Er braucht die Erklärungen mit Zusammenhängen und Konzepten dazu und nicht nur einen Code. Und die wird er sich nicht eben mal im Bus reinziehen, weil diese neu für ihn sind.

Ja. Aber ich denke, dass ich dazu auch in diesem Posting schon alles gesagt habe.

Wie schon gesagt. Ich hab ja auch nicht dagegen wenn man solche Sachen wie Live-Coding durchaus mal mit einbaut. Ich sehe es aber nicht als zentrales Mittel der Wahl ein solches Tutorial aufzuziehen.
Ist ja auch durchaus möglich, dass ich mich irre. Wie gesagt. Jeder ist ja auch anders und ich erhebe ja keinen Anspruch darauf, dass meine Meinung die (einzig) richtige ist.

Ich habe nur meine Sicht der Dinge dargelegt und begründet und was jeder daraus macht, dass liegt dann nicht mehr bei mir.

 

[Masterofweb]

Hallo zuammen,

vielen Dank für Eure vielen Antworten und Tipps: Hier eine Zusammenfassung eurer Ideen als Prof of Concept. Bitte kritisiert, erweitert und verbessert diesen, damit ich eine gute Grundlage für grandiose Tutorials habe:

Das ideale Tutorial hat…

• Text, Videos, Screenshots (Resultate und Zwischenergebnisse)
• Videos, aber nicht mit LiveCoding --> Mehr für Konzepte und Statements
• Links zu absolute Grundlagen frü Beginner
• 1Basic Tutorial / sonst nur praxisorientierte Projekte
• Hintergrundwissen hinter Detaillinks
• Gut kommentierter Code
• Mit Inhaltsverzeichnis bei längeren Tutorials
• Quelltext seht im Mittelpunkt
• Vielleicht mit Humor und Bilder auflockern?
• Texttutorial als Listing?
• Kniffe der IDE erklärt

Aufbau für ein Standardtutorial

• Problem / Aufgabe / Thema
  • Was wird behandelt?
  • Welches Resultat wird erwartet?
• Konzept mit Löungssansatz
  • Was sind die wichtigsten Zeilen Code?
  • Alternative Löungen
• Theorie-Lösungen (Kleines Beispiel)
  • Entscheidender Codeabschnitt mit Kommentar über Funktionen
• Umsetzung in der Praxis (großes Beispiel)
  • Gliederung des Herzstücks
  • Baue ein App / einer Webseite mit Text, Snipptes und Erklärungen
  • Mit Thema / freundlicher Gestaltung
  • Kniffs der IDE per Screenshots
  • Clean Code Snippets, die wieder verwendet werden können
• Erweiterungen (fortgeschrittene Subthemen)
  • Was sind die nächsten Schritte?
  • Wie kann ich mein Projekt erweitern?
• Fazit

Weitere Features:

• Download als PDF des Tutorials
• Screenshots mit Beschriftung
• Code-Snippet mit Hervorhebungen
• Ähnliche Struktur und Design wie bei Backlinko https://backlinko.com/google-search-console
• Next Chapter-Fipper Button?
• Tipps fürs Debuggen

Ausrichtung

Zielgruppe von Anfänger, der schon mal programmiert hat, bis zum ambitionierten Fortgeschritten 20–35 Jahre alt
Praktische und nütlzliche Coding-Projekte, die man der Realität auch so bauen würde

Zum Debuggen habe ich mir nicht so viele Gedanken gemacht, könnt aber dazu auch ein Tutorial bauen;

Anpassbarkeit des Codes ist mir auch wichtig. Möchte mit Clean Code Funktionen so universal wie möglich gestalten

 

[RalphS]

Weil es vielleicht ein bißchen untergegangen ist (oder ich es übersehen hab?):

- Ein Tutorial lebt davon, schnell Erfolge zu generieren und dabei verständlich zu bleiben. Hab ich 100 Codezeilen, die der Leser erstmal abtippen (oder abkopieren) soll, dann nützt das ebensowenig, wie wenn ich drei Codezeilen hab, die nicht sofort funktionieren.

- Ideale Tutorials sind daher gut strukturiert und Unterseiten können auf verschiedenen Wegen erreicht warden (Beispiel: via Objektname > Methoden, via Themenkomplex>Problemstellung, alphabetisch sortiert, via Methodenname selber, usw usf).

Ich sehe bereits, daß die Meinungen dazu weit auseinandergehen, daher nur soviel: "für mich" steht ein Video einem Tutorial konträr gegenüber. Ich krieg keine schnellen Erfolge, sondern ich muß mir das Video angucken, und (persönlicher Erfahrung nach) sind 90%+ eines jeden Tutorialvideos voll von überflüssigem Ballast, der frustriert und so dem Credo "schneller Erfolg" nicht nur nicht entspricht, sondern ihm widerspricht.


Wenn man den geneigten Leser halten kann, und wenn das auch der Anspruch sein soll/kann/darf, dann würde ich für mich begrüßen, wenn ein Tutorial eine überspannende "Handlung" hätte; lies: es gibt ein größeres Projekt, was man mit Abschluß des Tutorials nachgebaut hat und welches (natürlich) auch funktioniert. An dieser Stelle - also mit Abschluß -- hat man dann einen Einblick in verschiedene Elemente der Sprache, verschiedene Möglichkeiten der Einbindung externer Quellen (Daten, COM-Objekte, sonstwas) und verschiedene Ansätze gelernt (bzw verfestigt) wie man mit der jeweiligen Programmiersprache umzugehen hat (Beispiel: man kann JAVA auch prozedural angehen, nur ist es dafür halt nicht gedacht).

Wenn man den Leser aber nicht halten kann oder davon ausgehen muß, daß dem so ist, dann bleibt nur, das Tutorial so erfolgversprechend und so einfach wie möglich zu halten; im Extremfall: ein HelloWorld und das war's. (Wenn es sein muß, kann man das ja auch übertreiben und sich sein HelloWorld in fünf Klassen und zehn Methoden aufteilen.)

Aber ich geh mal davon aus, daß das nicht der Anspruch ist und auch nicht sein soll.

 

[Masterofweb]

Hallo,

frohe Neuigkeiten: Ich habe ein Tutorial für das Ionic Framework veröffentlicht. Schaut euch es mal an und kommentiert es, sodass ich Eure Verbesserung einarbeiten kann:

Googelt mal:

ionic tutorial steffen lippke

oder

Ionic Tutorial – Hybride App Entwicklung

• z.B. von Ionic-Fehlern, die auftreten...
• Installations- Probleme...
• Text- Stellen, die undeutlich geschildert wurden
• Eure Kritik mit Verbesserungsvorschlägen...
• Vorschläge für neue Post oder andere Programmiersparchen...

 

[kling1]

Hab auch demnächst vor mit einem PHP Blog demnächst mal online zu gehen. Könnte ja in Sachen Blogpartnerschaft ganz interessant ein.

Zu deinem Blog. Das Theme ist irgendwie zu bunt und die Schrift zu fett/groß. Das ist nicht gerade sehr einladen.
Du könntest wenn du schon ein Javascript Blog machst, statt Wordpress,ein in Javascript Static Site Genrator nutzen wie Hexo oder so. Dann landen die Seiten auch schneller, da dann am ende nur einfache HTML Seiten rauskommen und kein ganzes CMS dahinter ist.
Ich werde für mein Blog vuepress nehmen.

 

[Nase]

Ehrlich gesagt: Nichts für mich. Da ist einfach zu viel falsch, fehlt oder ist total durcheinander. Am Tablet sind die Code-Schnipsel kaum zu lesen (schwarzer Text auf schwarzem Hintergrund, einzig der Textschatten ist noch vorhanden), am Desktop macht der Textschatten die Schrift unleserlich unscharf, Links in Textfarbe sind auch nicht gerade nützlich, usw. Und bei der schlechten allgemeinen Rechtschreibung habe ich einfach keine Lust, mir das überhaupt ganz durchzulesen.

 

[Masterofweb]

Hab auch demnächst vor mit einem PHP Blog demnächst mal online zu gehen. Könnte ja in Sachen Blogpartnerschaft ganz interessant ein.

Zu deinem Blog. Das Theme ist irgendwie zu bunt und die Schrift zu fett/groß. Das ist nicht gerade sehr einladen.
Du könntest wenn du schon ein Javascript Blog machst, statt Wordpress,ein in Javascript Static Site Genrator nutzen wie Hexo oder so. Dann landen die Seiten auch schneller, da dann am ende nur einfache HTML Seiten rauskommen und kein ganzes CMS dahinter ist.
Ich werde für mein Blog vuepress nehmen.

Danke für Dein ehrliches Feedback.

Die Idee mit der Blog-Partnerschaft finde ich eine gute Idee. Wir können uns später noch darüber austauschen, wie wir den Rahmen am Besten gestalten können.

Viele Deiner Kritikpunkte habe ich umgesetzt. Der Punkt mit dem Javascript Site Generator wollte ich erst mal zurückstellen, da ich nicht nur Javascript-Tutorials machen möchte und ich schon Erfahrung mit Wordpress habe.

Schau Dir nochmal die überarbeitete Version Ionic Tutorial – Hybride App Entwicklung an und sage mir, ob es Dir jetzt besser gefällt.

Ergänzung (3. Juni 2018)

Ehrlich gesagt: Nichts für mich. Da ist einfach zu viel falsch, fehlt oder ist total durcheinander. Am Tablet sind die Code-Schnipsel kaum zu lesen (schwarzer Text auf schwarzem Hintergrund, einzig der Textschatten ist noch vorhanden), am Desktop macht der Textschatten die Schrift unleserlich unscharf, Links in Textfarbe sind auch nicht gerade nützlich, usw. Und bei der schlechten allgemeinen Rechtschreibung habe ich einfach keine Lust, mir das überhaupt ganz durchzulesen.

Danke auch für Deine Kritikpunkte.

Die Code-Snippets habe ich leserlicher gemacht und vereinfacht, die Linksfarbe nocheinmal eingestellt und mich bemüht den Text ein 2. Mail aufzuarbeiten (ich bin im Lernprozess ).

Deine Bemerkung hat mich weitergebracht.

Ich freue mich, wenn Du noch mal einen Blick über den Artikel wirfst.

 

[Nase]

Weißt du, es sind Dinge wie diese, die in einem Tutorial auf Gedeih und Verderb nicht vorkommen dürfen:

ionic gerneate page meineNeueSeite // Generiert Seite
ionig gnerate provider getMyData // neue Daten

Ein paar Änderungen sehe ich, aber die grundlegenden Dinge bleiben. Besonders was Rechtschreibung angeht, muss da für mich noch richtig viel passieren. Das geht schon bei den ganzen Namen los (es heißt iOS, nicht Ios, Xcode, nicht Xocde, iTunes, nicht Itunes, usw.). Und heißt es für dich jetzt der App, die App oder das App? Wie auch immer, aber: Entscheide dich für eine Schreibweise.

Dann sind am Anfang die Bilder vertauscht (Xcode-Screenshot steht bei Windows, bei Mac ein Screenshot vom Android-Studio).

Was willst du mir mit Punkt 5 bei "Technische Voraussetzungen" sagen? Ebenso ist Visual Studio Code eine Voraussetzung zum Erstellen von Ionic-Apps? Und ich muss einen Windows-PC und einen Mac haben?

Dass man npm installiert haben muss, verschweigt die Anleitung auch.

Und es sind noch so viele weitere Dinge ...