Suggesties voor het maken van stapsgewijze zelfstudies voor webontwikkeling voor Nettuts +

Dit artikel bespreekt een benadering voor het schrijven van stapsgewijze zelfstudies. Hoewel de focus hier ligt op NETTUTS, kan een groot deel van de aanpak worden toegepast voor elke site. Als u van plan bent zelfstudies voor NETTUTS te schrijven, moet u dit artikel lezen / bladeren. Er is ook een parallelle artikel op PSDTUTS dat Editor Sean Hodge schreef, die eigenlijk deze heeft geïnspireerd.

Vaardigheden

NETTUTS draait helemaal om tutorials voor webontwikkeling. Dat betekent webbrowser-gebaseerde codering, die op zijn minst een goed begrip van HTML, een beetje CSS en een vorm van webcodering vereist. Al het andere hangt af van wat uw zelfstudie zal behandelen. Dit kan CMS / blogplatformcodering, PHP, JavaScript-bibliotheken, CSS-frameworks, databases, enz. Zijn.

Je zult waarschijnlijk al gemerkt hebben dat de meest populaire tutorials hier focussen op web dev met een design-y element. Dus het zou kunnen helpen om grafische software zoals Photoshop of Fireworks te gebruiken. Zorg er in ieder geval voor dat je een screenshot kunt krijgen, want dit is het minimum dat je in je tutorial voor visuele elementen wilt opnemen.

Plan en heb een checklist

U hoeft niet echt formeel te worden, maar u moet uw zelfstudie plannen en een checklist toepassen. Hier is een voorgestelde checklist, maar voel je vrij om deze naar wens aan te passen:

1. Plan je zelfstudie.
2. Noteer uw checklist.
3. Onderzoek alle codebibliotheken, plug-ins, technieken.
4. Bepaal de functies van uw democode.
5. Schrijf uw code, test en verfijn deze totdat u tevreden bent.
6. Schrijf de tutorialtekst.
7. Neem uw democode op in fragmenten, in de zelfstudie (volgens onze zelfstudiehandleiding).
8. Noem eventuele tekortkomingen van de code waarvan u op de hoogte bent. (Dat wil zeggen, werkt niet in Internet Exploder 6.0+, etc.)
9. Zorg voor geschikte visuele elementen (afbeelding, screenshot, animatie, enz.) Die niet breder zijn dan 600 pixels.
10. Bewerk de zelfstudietekst en nummer elke sectie met "Stap 1", "Stap 2", enz.
11. Als u afbeeldingen hebt gebruikt die niet van u zijn, moet u niet alleen een toeschrijving geven, u moet impliciet zijn (bijvoorbeeld CC-licentie op Flickr) of expliciete toestemming hebben om ze te gebruiken. Dit omvat afbeeldingen die zichtbaar zijn in uw zelfstudie en in uw demo.
12. Bereid de broncode voor om deze te downloaden en op te ritsen. Voeg in hetzelfde ZIP-bestand werkende demo-bestanden toe.

Maak het makkelijk voor jezelf

Er zijn een aantal manieren waarop u kunt gaan publiceren op NETTUTS. Eén manier is om uw werkende demobestanden, broncode, zelfstudietekst en afbeeldingen (allemaal samen ZIPped) te verzenden via de formulierkoppeling op de pagina Zelfstudielichtlijnen. Op deze manier krijg je veel sneller antwoord, maar het is veel werk dat je hebt gedaan als het niet geschikt is voor NETTUTS. (Dit wordt nog steeds aanbevolen als je nog nooit een zelfstudie hebt ingediend.)

Maak het jezelf gemakkelijker. In plaats van eerst een democode en een tutorial op te stellen, eerst een idee pitchen. Dit wordt zelfs aanbevolen als u eerder een volledige zelfstudie hebt verzonden, zelfs als deze niet is gepubliceerd:

1. Kom met een idee en dien mij dit in via de formulierlink op de pagina Zelfstudielichtlijnen. (Gebruik een leeg ZIP-bestand, omdat het formulier dit vereist.) Of als u eerder een idee / tutorial bij mij hebt ingediend, hebt u mijn NETTUTS-e-mailadres en bent u welkom om mij rechtstreeks te pitchen.
2. Als u nog geen zelfstudie voor de site hebt geschreven, zijn er een aantal fasen:
   1. Interesse in uw idee is geen belofte van publicatie. Na het plaatsen van een idee en het krijgen van interesse, moet u de democode tonen (zelfs als deze alleen op uw eigen server staat).
   2. Als je de democode doet en deze geschikt is voor NETTUTS, zal ik je vragen - maar niet aanvragen - als je de tutorial wilt schrijven, maar zonder garantie op publicatie.
   3. Merk op dat dit oneerlijk klinkt, maar dat is niet anders dan wanneer je de volledige tutorial vooraf hebt ingediend. Op deze manier heb je een aantal fasen waarin je van gedachten kunt veranderen, waardoor je algehele inspanning vermindert. Als je liever je tutorial en bestanden van tevoren stuurt, is dat ook goed.
3. Aan de andere kant, als je al een goede tutorial hebt geschreven die weinig bewerking vereist, ben ik veel milder. Je kunt het idee pitchen, mijn gang gaan en de tutorial schrijven.

In beide gevallen, als een demo potentieel toont, maar de tutorial moet werken, probeer ik op beperkte basis met je samen te werken om de tekst te verbeteren. Ik kan het echter niet voor u schrijven. Een hoop codefragmenten en een tekst die alleen functioneel beschrijft wat er gebeurt, is geen zelfstudie.

Maak het gemakkelijk op de editor

Naarmate het lezerspubliek van NETTUTS groeit, zal ik minder tijd hebben om te beoordelen of een tutorial geschikt is voor NETTUTS. Maak het me gemakkelijk, laat me je tutorial en demo gebruiken:

1. Gebruik uw echte naam en e-mailadres in de inzending. (Je moet ook een PayPal-account hebben, zodat we je kunnen betalen.)
2. Beschrijf duidelijk wat je tutorial zal laten zien, en wat je demo-code zal laten zien.
3. Dien een democode in die werkt en waarvoor ik niet veel hoef op te zetten (behalve het uploaden van sommige bestanden naar een server).
4. Stuur me geen democode waarin ik mijn eigen afbeeldingen of iets anders moet toevoegen, vooral als je niet de moeite neemt om me dit vooraf te vertellen. Mijn verlangen om je te helpen botst met het gebrek aan tijd.
5. Kortom, minimaliseer de hoeveelheid tijd die ik moet besteden aan het instellen van uw democode om deze te beoordelen. Hoe meer moeite het kost, hoe groter de kans dat het wordt afgewezen. (U kunt altijd beginnen met een demo op een van uw sites, maar uiteindelijk moet u bestanden aan mij leveren.)

Zet jezelf in mijn plaats en denk na over waarom ik je tutorial wil accepteren. Zet me geen serie als je nog geen tutorial hebt geaccepteerd en gepubliceerd. Hetzelfde geldt voor series over meerdere sites (d.w.z. Deel 1 voor PSDTUTS, Deel 2 voor NETTUTS).

Beschrijf elke stap grondig

Uiteindelijk is de zelfstudie bedoeld voor lezers van de site, niet voor mij. Als de titel van de tutorial hen aantrekt, en als ze de tutorial doorlezen na het bekijken van de demo of zelfs de eerste visuele (afbeelding, diagram, enz.), Dan willen ze leren. Hoewel u niet elke regel code hoeft vast te houden en te beschrijven alsof een lezer nog nooit eerder heeft gecodeerd, moet u wel de regels beschrijven die specifiek betrekking hebben op bibliotheken, plug-ins of speciale technieken die u gebruikt.

Het grootste probleem met submissies tot nu toe: het gebruik van een codebibliotheek of plug-in, waarbij een codefragment wordt weergegeven, maar de relevante coderegels niet worden beschreven. Zeggen "hier is de code om X te doen" is niet genoeg. Waarom zou een lezer zich druk maken over je tutorial als je de how-to niet onthult??

Toon- en schrijfstijl

Lees hier, voordat u echte zelfstudietekst indient, een deel van de tutorials van Collis als uitgangspunt. Hoewel het goed is om je eigen stijl te hebben, moet je ook onthouden dat de meeste sitelezers een aantal (of veel) webcoderingservaringen hebben. Praat met ze, niet met hen. (Ik ben een breedsprakig type, dat komt van een universiteitsonderwijspedent / laboratoriuminstructeur voor niet-computerstudenten die een verplichte computercursus volgen.)

Richtlijnen en formatteren

Er is al een pagina met zelfstudiegidsen, die een koppeling bevat naar een lege zelfstudie ZIP. Raadpleeg deze pagina en gebruik deze ZIP-sjabloon.

Bepaal uw onderwerp

Weet je echt wat je wilt, soort zelfstudie die je wilt doen? Ik heb hier niemand uitgekozen, maar een paar inzendingen gaven me de indruk dat de persoon simpelweg de veer in zijn pet wou hebben omdat hij op een site als NETTUTS was gepubliceerd. Hun tutorial en democodebeschrijving waren vaag, en ondanks mijn nudging over wat ik moest proberen, bijten ze niet.

brainstormen

Een van de beste manieren om een ​​zelfstudie te plannen en samen te stellen, is door je ideeën te schetsen en de functies te beschrijven, evenals wat je aan het demonstreren bent. Omdat NETTUTS-zelfstudies door codes worden uitgevoerd, hebt u de extra vereiste dat functionele code aanwezig moet zijn. Dit is mijn voorkeursproces voor het maken van een zelfstudie - maar vergeet de eerder genoemde checklist niet:

1. Brainstorm een ​​paar applicatie-ideeën.
2. Onderzoek de nodige bibliotheken, plug-ins, functies, beperkingen, enz.
3. Geef een overzicht van de gewenste functies, schetsen of mockup-browserschermen. (Vergeet niet dat je snapshots van de voltooide mockups in je zelfstudie kunt gebruiken.)
4. Schrijf de code, test en verfijn hem. (Test in browsershots, beschreven in het volgende gedeelte.)
5. Schrijf de tutorial rond uw code en neem fragmenten op in gemakkelijk verteerbare brokken, opgemaakt volgens de Tutorial Guidelines.
6. Bewerk de zelfstudie indien nodig. Stel jezelf voor aan een lezer. Als zij uw tutorial raadplegen omdat de titel hun aandacht trok, begrijpen ze uw code waarschijnlijk niet zonder een juiste uitleg. Toon niet alleen het codeblok en neem aan dat de lezer dit zou moeten begrijpen. Anders schrijf je code, geen zelfstudie.
7. Visuele elementen toevoegen (schermafbeeldingen, enz.). Zie het gedeelte Visuals hieronder.

Demo-code en cross-browser-problemen

Hoewel het leuk zou zijn als je demo in alle browsers werkt, is dat niet altijd mogelijk. Sommige codebibliotheken - bijv. JQuery - ondersteunen gewoon geen oudere browsers. Op zijn minst zou uw code moeten werken voor de browsers die bibliotheken die u gebruikt ondersteunen.

Trouwens, ondanks de protesten bij wijze van commentaar van sommige NETTUTS-lezers, is Firefox 3 op het moment van schrijven nog niet wijdverspreid gebruikt. Het is ook een buggy en nog steeds een geheugenzwaard, volgens sommige gebruikers van Twitter en Plurk. We moeten de compatibiliteit van de browser per geval bekijken, maar proberen de meest recente stabiele browsers te gebruiken. Geef aan of uw code niet werkt waar het hoort, en waarom dat zo is.

Een tool die u kan helpen bij het testen van verschillende browsers is de site Browsershots. Dit is een eenvoudige manier om uw code te testen in meerdere (virtuele) browsers voor Linux, Windows, Mac OS en BSD.

visuals

In tegenstelling tot onze zustersite PSDTUTS, als het gaat om web dev-tutorials, is het niet altijd gemakkelijk om met sexy afbeeldingen te komen. Toch maken visuals een tutorial interessanter en helpen ze concepten te demonstreren. Dus visuals in je tutorial zijn een must en je moet misschien creatief worden. Hier zijn enkele opties:

1. Relevante afbeelding.
2. Scherm snapshots van uw applicatie in verschillende gebruikstoestanden.
3. Screencast van uw applicatie die wordt gebruikt of iets dat relevant is voor uw zelfstudie.
4. Een diagram of mindmap die enige informatie bevat over uw toepassing, het gebruik of het ontwerp en de creatie ervan.
5. Relevante video-inhoud, misschien zelfs een screencast van je gebruikte democode.

Neem visuals zo vaak en zo vroeg mogelijk op in uw zelfstudie. Veel van de tutorials die ik tot nu toe heb afgewezen, hadden helemaal geen afbeeldingen. Het is niet zo moeilijk om een ​​schermmomentopname te maken van uw applicatie die wordt gebruikt, of een mockup-scherm dat wordt geproduceerd in Photoshop, of wat dan ook relevant is. Je hebt geen tientallen visuals nodig, maar zelfs een paar oordeelkundig geselecteerde schermopnamen is misschien genoeg.

Notitie: Als u afbeeldingen uit andere bronnen gebruikt, hetzij in uw zelfstudietekst of in uw demo, moet u expliciete of impliciete toestemming hebben en de bron (nen) vermelden. U kunt bijvoorbeeld afbeeldingen van een bron zoals Flickr gebruiken onder een geschikte commerciële CC-licentie.

Citeer uw bronnen

Naast het crediteren van afbeeldingen moet je ervoor zorgen dat je codebibliotheken, bronnen, enz. Crediteert. Dit betekent niet dat je de code van iemand anders kunt presenteren als die van jezelf, maar dat je een grote tutorial hebt en een techniek gebruikt die oorspronkelijk door iemand anders is gepresenteerd, crediteer ze.

artikelen

Naast tutorials publiceren we één artikel per week met betrekking tot webontwikkeling. De artikelbijdragen zijn eens in de twee weken. Resourceartikelen zijn goede kandidaten, zoals mijn CSS Grid Frameworks-artikel - hoewel het jouwe niet zo enorm lang hoeft te zijn.

Mijn voorkeur gaat uit naar plaatsen voor artikelen van mensen die ervaren schrijvers / bloggers zijn, maar je hoeft geen zelfstudie te schrijven omdat de stijl anders is.

antwoord

Ik probeer iedereen zo snel mogelijk te antwoorden, maar in enkele weken is het aantal inzendingen zo hoog dat ik gemakkelijk de leiding kan verliezen. Wees gerust, ik zal reageren, hoewel je me kunt duwen als je niet binnen een paar weken hebt gehoord nadat je een idee of zelfstudie hebt ingediend.

Conclusie

Ik kijk uit naar blijvende ideeplaatsen en inzendingen van NETTUTS-lezers. Als je niet weet waar te beginnen, zijn de tutorials van Collis hier bij NETTUTS en bij PSDTUTS een geweldig model om te volgen, zowel op het gebied van schermklikken, codering en schrijfstijl.