Förslag till att skapa stegvisa webbutvecklingshandledning för Nettuts +

I den här artikeln diskuteras ett sätt att skriva steg-för-steg-handledning. Medan fokus här är för NETTUTS, kan mycket av tillvägagångssättet tillämpas för alla webbplatser. Om du planerar att skriva handledning för NETTUTS, bör du läsa / bläddra i den här artikeln. Det finns också en parallellartikel på PSDTUTS som redaktör Sean Hodge skrev, som faktiskt inspirerade den här.

Kompetens

NETTUTS handlar om handledning för webbutveckling. Det betyder webbläsarbaserad kodning, vilket kräver åtminstone en förståelse av HTML, en del CSS och något webbkodningsspråk. Allt annat beror på vad din handledning kommer att täcka. Detta kan vara CMS / bloggplattformskodning, PHP, JavaScript-bibliotek, CSS-ramar, databaser, etc..

Du har nog lagt märke till att de mest populära handledningarna här fokuserar på webbutveckling med ett design-y-element. Så att veta hur man använder grafikprogramvara som Photoshop eller Fireworks kan hjälpa till. Åtminstone veta hur man får en skärmdump, eftersom det här är det minsta du vill inkludera i din handledning för visuella element.

Planera och ha en checklista

Du behöver inte bli riktigt formell, men du bör planera din handledning och tillämpa en checklista. Här är en föreslagen checklista, men ändå gärna ändra den enligt dina önskemål:

  1. Planera din handledning.
  2. Skriv upp din checklista.
  3. Forskning någon kod bibliotek, plugins, tekniker.
  4. Bestäm om din demokods funktionssats.
  5. Skriv din kod, test och förbättra den tills du är nöjd.
  6. Skriv självstudieteksten.
  7. Integrera din demokod i utdrag, i handledningen (enligt våra instruktionsriktlinjer).
  8. Ange eventuella brister i koden du är medveten om. (Det vill säga, fungerar inte i Internet Exploder 6.0+, etc.)
  9. Ge lämpliga visuella element (bild, skärmdump, animering, etc.) inte bredare än 600 pixlar.
  10. Redigera handledningen och numrera varje avsnitt med "Steg 1", "Steg 2", etc..
  11. Om du har använt bilder som inte är dina, måste du inte bara ge tillskrivning, du måste ha antingen implicit (t.ex. CC-licens på Flickr) eller uttryckligt tillstånd att använda dem. Detta inkluderar bilder som syns i din handledning och i din demo.
  12. Förbered källkoden för nedladdning och ZIP-upp. I samma ZIP-fil, inkludera fungerande demofiler.

Gör det enkelt på dig själv

Det finns ett par sätt du kan gå på att bli publicerad på NETTUTS. Ett sätt är att skicka dina fungerande demofiler, källkod, handledningstext och bilder (alla ZIPped tillsammans) via formulärlänken på guiden Tutorial Guidelines. På så sätt får du ett svar mycket tidigare, men det är mycket arbete för dig att ha gjort om det inte är lämpligt för NETTUTS. (Detta rekommenderas fortfarande om du aldrig har lämnat in en handledning.)

Gör det lättare för dig själv. Istället för att skriva upp demokod och en handledning först, häll en idé först. Det rekommenderas faktiskt om du tidigare skickat en fullständig handledning, även om den inte publicerades:

  1. Kom med en idé och skicka in det till mig via formulärlänken på sidan Handledning för handledning. (Använd en blank ZIP-fil, eftersom formuläret kräver det.) Eller om du tidigare har lagt fram en idé / handledning till mig har du min NETTUTS-e-postadress och du är välkommen att kasta mig direkt.
  2. Om du inte tidigare har skrivit en handledning för webbplatsen finns det ett par steg:
    1. Intresset för din idé är inte ett löfte om publicering. Efter att ha lagt en idé och att få intresse måste du visa demokoden (även om den bara är på din egen server).
    2. Om du gör demo-koden och den är lämplig för NETTUTS frågar jag dig - men inte begära - om du vill skriva handledning, men utan garanti för publicering.
    3. Observera att det här låter orättvist men det är verkligen ingen annorlunda än om du skickar in hela handledningen påbörjade. På så sätt har du några steg där du kan ändra dig och minska din totala insats. Om du hellre skickar din handledning och filer i förskott, så är det bra också.
  3. Å andra sidan, om du redan har skrivit en bra handledning som krävde lite redigering, är jag mycket mer lindrig. Du kan lägga upp tanken, få mig att gå och skriva handledningen.

I båda fallen, om en demo visar potential men handledningen behöver fungera, försöker jag att arbeta med dig på ett begränsat sätt för att förbättra texten. Men jag kan inte skriva det för dig. En massa kodutdrag och en del text som bara funktionellt beskriver vad som händer är inte en handledning.

Gör det enkelt på redaktören

När läsarna av NETTUTS växer, har jag mindre tid att bedöma huruvida en handledning passar NETTUTS. Gör det lätt på mig, gör mig vill använda din handledning och demo:

  1. Använd ditt riktiga namn och e-postmeddelande i inlägget. (Du måste också ha ett PayPal-konto så vi kan betala dig.)
  2. Beskriv klart vad din handledning kommer att visa, och vad din demokod kommer att visa.
  3. Skicka in demokod som fungerar och kräver inte att jag gör en massa inställningar (bortom att ladda upp några filer till en server).
  4. Skicka mig inte demokod som kräver att jag lägger till mina egna bilder eller något annat, speciellt om du inte bry sig om att berätta för mig. Min önskan att hjälpa dig kolliderar med brist på tid.
  5. Totalt sett minskar du hur mycket tid jag måste spendera för att konfigurera din demokod bara för att kunna bedöma den. Ju större ansträngning det tar desto sannolikt kommer det att sättas ner. (Du kan alltid börja med en demo på en av dina webbplatser, men i slutändan måste du skicka filer till mig.)

Sätt dig själv på min plats och fundera på vad som gör att jag vill acceptera din handledning. Testa inte en serie om du inte redan har fått en handledning godkänd och publicerad. Detsamma gäller för cross-site-serier (dvs del 1 för PSDTUTS, del 2 för NETTUTS).

Beskriv varje steg grundligt

I slutändan handledning är för läsare av webbplatsen, inte för mig. Om titeln på handledningen lockar dem, och om de läser igenom handledningen efter att ha tittat på demoen eller till och med den ursprungliga visuella bilden (bild, diagram mm), vill de lära sig. Medan du inte behöver behålla och beskriva varje kodlinje som om en läsare aldrig har kodat tidigare måste du beskriva kodens rader som är relaterade specifikt till bibliotek, plugins eller speciella tekniker du använder.

Det största problemet med inlämningar hittills: Använda ett kodbibliotek eller plugin, som visar en kodbit, men som inte beskriver de relevanta raderna av kod. Att säga, "här är koden att göra X," räcker inte. Varför skulle en läsare stör med din handledning om du inte avslöjar hur-till?

Ton och skrivstil

Innan du skickar in verklig handledningstekst, läs över några av Collis 'handledning här, som utgångspunkt. Även om det är bra att ha din egen stil, måste du också komma ihåg att de flesta webbplatsläsare har lite (eller mycket) webbkodningserfarenhet. Prata med dem, inte hos dem. (Jag är en verbose typ, som kommer från att ha varit en universitetsundervisningassistent / labinstruktör för icke-datorstudenter som tar en obligatorisk datorkurs.)

Riktlinjer och formatering

Det finns redan en handledning för riktlinjer för handledning, som har en länk till en blank handledning ZIP. Kontakta den här sidan och använd den här ZIP-mallen.

Beslut om ditt ämne

Vet du verkligen vad du vill ha typ av handledning du vill göra? Inte singling någon här ute, men några inlägg gav mig intrycket att personen bara ville ha fjädern i sitt lock att ha publicerats på en webbplats som NETTUTS. Deras handledning och demo kod beskrivning var vag, och trots min nudging om vad du ska försöka, bita de inte.

brainstorming

Ett av de bästa sätten att planera och bygga en handledning är att skissa ut dina idéer och skissera funktionerna såväl som vad du demonstrerar. Eftersom NETTUTS handledning är koddriven, har du extra krav att ha funktionskod att presentera. Här är min föredragna process för att skapa en handledning - men glöm inte den tidigare nämnda checklistan:

  1. Brainstorm några applikationsidéer.
  2. Forskning de nödvändiga biblioteken, plugins, funktioner, begränsningar, etc..
  3. Skissera önskade funktioner, skissera eller mockup webbläsarfönster. (Kom ihåg att du kan använda snapshots av de färdiga mockupsna i din handledning.)
  4. Skriv koden, testa och förbättra den. (Test i Browsershots, beskrivs i nästa avsnitt.)
  5. Skriv handledning kring din kod och inkorporera snippets i lätt smältbara bitar, formaterade enligt instruktionsriktlinjerna.
  6. Redigera handledningen om det behövs. Sätt dig i en läsares sinne. Om de konsulterar din handledning eftersom titeln fick sin uppmärksamhet, förstår de förmodligen inte din kod utan en korrekt förklaring. Visa inte bara kodblocket och antar att läsaren borde förstå. Annars skriver du kod, inte en handledning.
  7. Lägg till visuella element (skärmdumpar, etc.). Se avsnittet Visuella nedan.

Demokod och Cross-Browser-problem

Även om det är trevligt att din demo fungerar i alla webbläsare, så är det inte alltid möjligt. Vissa kodbibliotek - t.ex. jQuery - stöder inte bara äldre webbläsare. I åtminstone bör din kod fungera för webbläsarna att bibliotek som du använder stöd.

Förresten, trots protesterna i form av kommentarer från vissa NETTUTS-läsare, är Firefox 3 inte i stor utsträckning vid tidpunkten för detta skrivande. Det är också buggy och fortfarande ett minne hog, enligt vissa Twitter och Plurk användare. Vi måste överväga webbläsarkompatibilitet från fall till fall, men försök att täcka de senaste stabila webbläsarna. Ange om din kod inte fungerar någonstans borde det, och varför det är.

Ett verktyg som hjälper dig med testning av webbläsare är webbplatsens webbläsare, vilket är ett enkelt sätt att testa din kod i flera (virtuella) webbläsare för Linux, Windows, Mac OS och BSD.

visuals

Till skillnad från vår systerwebbplats PSDTUTS, när det gäller web dev-tutorials är det inte alltid lätt att komma med sexiga bilder. Fortfarande gör visuella en handledning mer intressant, liksom hjälp att visa koncept. Så visuella i din handledning är ett måste, och du kanske måste bli kreativ. Här är några alternativ:

  1. Relevant bild.
  2. Skärmbilder av din ansökan i olika användningsområden.
  3. Screencast av din ansökan i bruk, eller något som är relevant för din handledning.
  4. Ett diagram eller en mind map som representerar viss information om din ansökan, dess användning eller dess design och skapande.
  5. Relevant videoinnehåll, kanske till och med en skärmdump av din demokod som används.

Inkorporera visuella bilder så ofta och tidigt som möjligt i din handledning. Många av de handledningar jag har avstått hittills hade inga bilder alls. Det är inte så svårt att ta en skärmbild av din applikation i bruk, eller en mockup-skärm produceras i Photoshop, eller vad som är relevant. Du behöver inte dussintals visuella bilder, men även ett fåtal välgrundade skärmbilder kan vara tillräckligt.

Notera: Om du använder visuella bilder från andra källor - antingen i din handledningstekst eller din demo - måste du ha uttryckligt eller underförstått tillstånd och måste citera källan / källorna. Till exempel kan du använda bilder från en källa som Flickr, under lämplig CC-kommersiell licens.

Citera dina källor

Förutom att kreditera bilder, se till att du krediterar alla kodbibliotek, källor etc. Det betyder inte att du kan presentera någon annans kod som din egen, men snarare om du har en stor handledning och använder en teknik som ursprungligen presenterades av någon annan, kreditera dem.

artiklar

Utöver tutorials publicerar vi en artikel per vecka i samband med webbutveckling. Artikelbidragen är en gång varannan vecka. Resursartiklar är bra kandidater, till exempel min CSS Grid Frameworks artikel - men din behöver inte vara så massivt lång.

Min preferens är att acceptera ställen för artiklar från personer som är erfarna författare / bloggare, men du behöver inte ha skrivit en handledning eftersom stilen är annorlunda.

Svar

Jag försöker att svara på alla så snabbt som möjligt, men i några veckor är volymen av inlägg tillräckligt hög för att det är lätt för mig att förlora spåret. Jag är säker på att jag kommer att svara, men du kan knyta mig om du inte hört tillbaka om några veckor efter att ha skickat en idé eller handledning.

Slutsats

Jag ser fram emot fortsatta idéplatser och inlägg från NETTUTS-läsare. Om du inte vet var du ska börja, är Collis tutorials här på NETTUTS och PSDTUTS en bra modell att följa, både när det gäller skärmklipp, kodning och skrivstil.