Sugestii pentru crearea de tutori de dezvoltare web pas cu pas pentru Nettuts +

Acest articol discută o abordare pentru scrierea tutoriale pas-cu-pas. În timp ce focalizarea este pentru NETTUTS, o mare parte din abordare poate fi aplicată pentru orice site. Dacă intenționați să scrieți tutoriale pentru NETTUTS, ar trebui să citiți / răsfoiți acest articol. Există, de asemenea, un articol paralel la PSDTUTS pe care editorul Sean Hodge la scris, care la inspirat de fapt pe acesta.

Set de calificare

NETTUTS este vorba despre tutoriale pentru dezvoltarea web. Asta inseamna codarea bazata pe browserul web, care necesita cel putin o intelegere a HTML-ului, a unor CSS-uri si a unor limbi de codare web. Totul depinde de ce va acoperi tutorialul tău. Aceasta ar putea fi codarea platformei CMS / blog, PHP, biblioteci JavaScript, cadre CSS, baze de date, etc.

Probabil că ați observat că cele mai populare tutoriale se concentrează aici pe web dev având un element de design-y. Deci, știind cum să folosești software-ul grafic, cum ar fi Photoshop sau Fireworks ar putea ajuta. Cel puțin, știți cum să obțineți o captură de ecran, deoarece aceasta este minimul pe care doriți să îl includeți în tutorialul dvs. pentru elemente vizuale.

Planificați și aveți o listă de verificare

Nu trebuie sa te obtii cu adevarat formal, dar trebuie sa iti planifici tutorialul si sa aplici o lista de verificare. Iată o listă de verificare sugerată, dar nu ezitați să o modificați în funcție de preferințele dvs.:

1. Planificați tutorialul.
2. Scrie lista de verificare.
3. Cercetați orice biblioteci de coduri, pluginuri, tehnici.
4. Alegeți setul de caracteristici al codului dvs. demo.
5. Scrieți codul, testați-l și perfecționați-l până când sunteți mulțumit.
6. Scrieți textul tutorialului.
7. Includeți codul dvs. demo în fragmente, în tutorial (conform Ghidului Tutorial).
8. Arătați orice neajunsuri ale codului despre care știți. (Adică, nu funcționează în Internet Exploder 6.0+ etc.)
9. Furnizați elemente vizuale adecvate (imagine, captura de ecran, animație etc.) care să nu fie mai mari de 600 de pixeli.
10. Editați textul și numărul de tutorial în fiecare secțiune cu "Pasul 1", "Pasul 2", etc.
11. Dacă ați folosit imagini care nu sunt ale dvs., nu trebuie doar să dați atribuire, trebuie să aveți fie implicit (de exemplu, licența CC pe Flickr), fie permisiunea explicită de a le utiliza. Acestea includ imaginile vizibile în tutorial și în demo.
12. Pregătiți codul sursă pentru descărcare și completați-l. În același fișier ZIP, includeți fișiere demo de lucru.

Faceți-o ușor pe cont propriu

Există câteva moduri în care puteți să faceți publicarea pe NETTUTS. O modalitate este să trimiteți fișierele demo de lucru, codul sursă, textul tutorial și imaginile (toate cuplate împreună) prin intermediul link-ului de formare din pagina Ghidul tutorialului. În acest fel, veți primi un răspuns mult mai devreme, dar este o mulțime de lucruri pe care ați făcut-o dacă nu este potrivit pentru NETTUTS. (Acest lucru este recomandat dacă nu ați trimis niciodată un tutorial.)

Îți faci mai ușor. În loc să scrieți codul demo și un tutorial mai întâi, alegeți o idee mai întâi. Acest lucru este de fapt recomandat dacă ați trimis anterior un tutorial complet, chiar dacă nu a fost publicat:

1. Vino cu o idee și trimite-mi asta prin intermediul link-ului de pe pagina Tutoriale Ghid. (Utilizați un fișier ZIP gol, deoarece formularul o cere.) Sau dacă ați trimis anterior o idee / tutorial pentru mine, aveți adresa mea de e-mail NETTUTS și sunteți binevenit să mă puneți direct.
2. Dacă nu ați scris anterior un tutorial pentru site, există câteva etape:
   1. Interesul pentru ideea dvs. nu este o promisiune de publicare. După ce ați făcut o idee și ați obținut un interes, va trebui să afișați codul demo (chiar dacă numai pe propriul dvs. server).
   2. Dacă faceți codul demo și este potrivit pentru NETTUTS, vă întreb - dar nu cereți - dacă doriți să scrieți tutorialul, dar fără garanție de publicare.
   3. Rețineți că acest lucru pare a fi nedrept, dar nu este altfel decât dacă trimiteți în prealabil tutorialul complet. În acest fel, aveți câteva etape în care vă puteți schimba mintea, reducând efortul total. Dacă doriți mai degrabă să trimiteți tutorialul și fișierele în prealabil, este chiar bine.
3. Pe de altă parte, dacă ați scris deja un tutorial bun care necesită puțin editare, sunt mult mai indulgent. Puteți pune ideea, puteți continua și scrieți tutorialul.

În ambele cazuri, dacă un demo arată potențial, dar tutorialul trebuie să funcționeze, voi încerca să lucrez cu dvs. pe o bază limitată pentru a îmbunătăți textul. Totuși, nu pot să o scriu pentru tine. O grămadă de fragmente de cod și un text care descrie doar funcțional ceea ce se întâmplă nu este un tutorial.

Faceți-o ușor pe Editor

În timp ce cititorii NETTUTS cresc, voi avea mai puțin timp pentru a evalua dacă un tutorial este potrivit pentru NETTUTS. Faceți-o ușor pe mine, fă-mă să vreau să folosesc tutorialul și demonstrația:

1. Utilizați numele real și adresa de e-mail în transmitere. (Trebuie să aveți și un cont PayPal pentru a vă putea plăti.)
2. Descrieți în mod clar ce va afișa tutorialul dvs. și ce va demonstra codul dvs. demo.
3. Trimiteți un cod demo care funcționează și nu necesită o mulțime de configurare (dincolo de încărcarea unor fișiere pe un server).
4. Nu-mi trimiteți codul demo care necesită adăugarea propriilor mele imagini sau altceva, mai ales dacă nu vă deranjează să-mi spuneți în avans. Dorința mea de a vă ajuta să vă confruntați cu lipsa de timp.
5. În general, minimizați timpul necesar pentru a vă stabili codul demo doar pentru a-l evalua. Cu cât este nevoie de mai mult efort, cu atât mai mult va fi refuzată. (Puteți începe întotdeauna cu un demo pe unul dintre site-urile dvs., deși în cele din urmă va trebui să furnizați fișiere pentru mine.)

Puneți-vă în locul meu și gândiți-vă la ceea ce mă face să vreau să vă accept tutorialul. Nu te juca o serie dacă nu ai avut deja un tutorial acceptat și publicat. Același lucru este valabil și în cazul seriei cross-site (adică partea 1 pentru PSDTUTS, partea 2 pentru NETTUTS).

Descrieți fiecare pas pe deplin

În cele din urmă, tutorialul este pentru cititorii site-ului, nu pentru mine. Dacă titlul tutorialului îi atrage, și dacă citesc prin tutorial după vizualizarea demo-ului sau chiar vizualului inițial (imagine, diagramă etc.), atunci vor să învețe. Deși nu este nevoie să rețineți și să descrieți fiecare linie de cod ca și când un cititor nu a codat niciodată înainte, trebuie să descrieți liniile de cod asociate în mod specific cu orice biblioteci, pluginuri sau tehnici speciale pe care le utilizați.

Cea mai mare problemă cu trimiterile până acum: folosind o bibliotecă de cod sau un plugin, care prezintă un fragment de cod, dar care nu descrie efectiv liniile de cod relevante. Spunând, "Iată codul de făcut X", nu este suficient. De ce un cititor va deranja cu tutorialul dvs. dacă nu dezvăluiți modul cum să?

Tonul și stilul de scriere

Înainte de a trimite textul tutorialului real, citiți câteva dintre tutorialele lui Collis aici, ca punct de plecare. Deși este bine să aveți propriul dvs. stil, trebuie să rețineți că majoritatea cititorilor de site-uri au o experiență de codificare web (sau o mulțime). Vorbește cu ei, nu cu ei. (Sunt un tip verbose, care vine din faptul că a fost un asistent de instruire colegiu / instructor de laborator pentru non-calculator elevii care au luat un curs obligatoriu de calculator.)

Ghiduri și formatare

Există deja o pagină de instrucțiuni pentru instrucțiuni, care are un link spre un manual ZIP existent. Consultați această pagină și utilizați acest șablon ZIP.

Decide pe tema ta

Știți cu adevărat ce doriți un fel de tutorial pe care doriți să-l faceți? Nu lăsăm pe nimeni aici, dar câteva sugestii mi-au dat impresia că persoana pur și simplu dorea ca penele să fie publicate pe un site ca NETTUTS. Descrierea tutorialului și a codului demo a fost vagă și, în ciuda faptului că am încercat să încerc, nu au muscat.

Brainstormingul

Una dintre cele mai bune modalități de a planifica și de a construi un tutorial este de a schița ideile dvs. și a schița caracteristicile, precum și ceea ce vă demonstrează. Deoarece tutorialele NETTUTS sunt codate, aveți cerința suplimentară de a prezenta codul funcțional. Aici este procesul meu preferat pentru crearea unui tutorial - dar nu uitați lista de verificare menționată mai sus:

1. Brainstorm câteva idei de aplicare.
2. Cercetarea bibliotecilor, pluginurilor, caracteristicilor, limitărilor etc.
3. Descrieți caracteristicile dorite, schițe sau ferestre de navigare machetă. (Rețineți că puteți folosi instantaneele machetelor finite din tutorial.)
4. Scrieți codul, testați-l și perfecționați-l. (Testarea în Browsershots, descrisă în secțiunea următoare.)
5. Scrieți tutorialul în jurul codului și încorporați fragmente în bucăți ușor de digerat, formatate conform Ghidului Tutorial.
6. Editați tutorialul, dacă este necesar. Puneți-vă în minte un cititor. Dacă vă consultă tutorialul deoarece titlul le-a atras atenția, atunci probabil că nu vă înțeleg codul fără o explicație adecvată. Nu arătați doar blocul de cod și presupuneți că cititorul ar trebui să înțeleagă. În caz contrar, scrieți un cod, nu un tutorial.
7. Adăugați elemente vizuale (capturi de ecran etc.). Vedeți secțiunea Vizuale de mai jos.

Codul demo și problemele de browser încrucișat

Deși ar fi bine ca demo-ul dvs. să funcționeze în toate browserele, acest lucru nu este întotdeauna posibil. Unele biblioteci de coduri - de exemplu, jQuery - nu acceptă browsere mai vechi. Cel puțin, codul dvs. ar trebui să funcționeze pentru browserele pe care bibliotecile pe care le utilizați.

Apropo, în ciuda protestelor prin comentariile unor cititori NETTUTS, Firefox 3 nu este folosit pe scară largă în momentul acestei scrieri. Este, de asemenea, buggy și încă un porc de memorie, potrivit unor utilizatori Twitter și Plurk. Va trebui să luăm în considerare compatibilitatea browser-ului de la caz la caz, dar încercați să acoperiți cele mai recente browsere stabile. Aflați dacă codul dvs. nu funcționează undeva, și de ce este acesta.

Un instrument care vă va ajuta cu testele cross-browser este site-ul Browsershots, care este o modalitate ușoară de a testa codul dvs. în mai multe browsere (virtuale) pentru Linux, Windows, Mac OS și BSD.

visuals

Spre deosebire de site-ul nostru surori PSDTUTS, atunci când vine vorba de tutorialele web dev, nu este întotdeauna ușor să vină imagini sexy. Cu toate acestea, vizuale fac un tutorial mai interesant, precum și ajuta la demonstrarea conceptelor. Deci, vizuale în tutorialul dvs. sunt o necesitate, și ar putea fi necesar să vă creați. Iată câteva opțiuni:

1. Imagine relevantă.
2. Imagine instantanee a aplicației dvs. în diferite stări de utilizare.
3. Vizualizarea aplicației dvs. în uz sau ceva relevant pentru tutorialul dvs..
4. O diagramă sau o hartă a minții care reprezintă câteva informații despre aplicația dvs., despre utilizarea acesteia sau despre proiectarea și crearea acesteia.
5. Conținut video relevant, poate chiar și un screencast al codului dvs. demo în uz.

Incorporați vizualuri cât mai des și mai devreme posibil în tutorialul dvs. Multe dintre tutorialele pe care le-am refuzat până acum nu aveau niciun fel de imagini. Nu este atât de greu să faceți un instantaneu de ecran al aplicației dvs. în uz sau un ecran de tip mockup produs în Photoshop sau orice este relevant. Nu aveți nevoie de zeci de vizualizări, dar chiar și câteva capturi de ecran alese în mod judicios ar putea fi suficiente.

Notă: Dacă folosiți imagini din alte surse - fie în textul tutorialului, fie în demo - trebuie să aveți permisiune explicită sau implicită și trebuie să citeți sursa (sursele). De exemplu, puteți utiliza imagini dintr-o sursă, cum ar fi Flickr, sub licență comercială CC adecvată.

Citează-ți sursele

În plus față de creditarea imaginilor, asigurați-vă că ați creditat orice biblioteci de cod, surse etc. Aceasta nu înseamnă că puteți prezenta codul altcuiva ca pe propriul dvs., ci mai degrabă dacă aveți un tutorial mare și utilizați o tehnică inițial prezentată de altcineva, le cred.

Articole

În plus față de tutoriale, publicăm un articol pe săptămână referitor la dezvoltarea web. Contribuțiile articolului sunt o dată la două săptămâni. Articolele despre resurse sunt candidați buni, cum ar fi articolul meu despre CSS Grid Frameworks - deși dvs. nu trebuie să fie la fel de lung.

Preferința mea este să accept terenuri pentru articole de la persoane care sunt scriitori / bloggeri cu experiență, deși nu trebuie să fi scris un tutorial, deoarece stilul este diferit.

Raspuns

Încerc să răspund tuturor cât mai repede posibil, deși în câteva săptămâni volumul de observații este suficient de mare încât este ușor să pierd șansa. Fiți siguri că voi răspunde, deși mă puteți împinge dacă nu ați auzit în câteva săptămâni după ce ați trimis o idee sau un tutorial.

Concluzie

Aștept cu nerăbdare idei și sugestii continue de la cititorii NETTUTS. Dacă nu știți de unde să începeți, tutorialele de la Collis de la NETTUTS și de la PSDTUTS sunt un model excelent de urmărit, atât în ​​ceea ce privește interceptarea ecranului, codarea și stilul de scriere.