Share
Questo articolo discute un approccio alla scrittura di tutorial passo-passo. Mentre l'attenzione è rivolta a NETTUTS, gran parte dell'approccio può essere applicata a qualsiasi sito. Se hai intenzione di scrivere tutorial per NETTUTS, dovresti leggere / sfogliare questo articolo. C'è anche un articolo parallelo su PSDTUTS che l'editore Sean Hodge ha scritto, che in realtà ha ispirato questo.
NETTUTS è interamente dedicato alle esercitazioni per lo sviluppo web. Ciò significa codifica basata su browser Web, che richiede almeno una comprensione dell'HTML, di alcuni CSS e di alcuni linguaggi di codifica Web. Tutto il resto dipende da ciò che il tuo tutorial coprirà. Questo potrebbe essere codifica di piattaforme CMS / blog, PHP, librerie JavaScript, framework CSS, database, ecc.
Probabilmente avrai notato che i tutorial più popolari qui si concentrano su Web Dev con un elemento di design-y. Quindi sapere come usare un software di grafica come Photoshop o Fireworks può essere d'aiuto. Almeno, sai come ottenere uno screenshot, poiché questo è il minimo che vuoi includere nel tuo tutorial per gli elementi visivi.
Non devi essere veramente formale, ma dovresti pianificare il tuo tutorial e applicare una checklist. Ecco un elenco di suggerimenti suggerito, anche se sentiti libero di modificarlo a tuo piacimento:
Ci sono un paio di modi in cui puoi essere pubblicato su NETTUTS. Un modo è quello di inviare i tuoi file demo di lavoro, il codice sorgente, il testo di esercitazione e le immagini (tutti in formato ZIP insieme) tramite il collegamento al modulo nella pagina delle Linee guida per l'esercitazione. In questo modo, riceverai una risposta molto prima, ma è molto lavoro da fare per te se non è adatto a NETTUTS. (Questo è ancora raccomandato se non hai mai presentato un tutorial.)
Rendi più facile la tua vita. Invece di scrivere il codice demo e un tutorial prima, lancia un'idea prima. Questo è effettivamente consigliato se hai già inviato un'esercitazione completa, anche se non è stata pubblicata:
In entrambi i casi, se una demo mostra delle potenzialità ma il tutorial ha bisogno di lavoro, cercherò di lavorare con voi su base limitata per migliorare il testo. Tuttavia, non posso scriverlo per te. Un sacco di frammenti di codice e un testo che descrive solo funzionalmente quello che sta accadendo non è un tutorial.
Man mano che i lettori di NETTUTS crescono, avrò meno tempo per valutare se un tutorial è adatto a NETTUTS. Rendilo semplice con me, fammi usare il tuo tutorial e demo:
Mettiti al mio posto e pensa a cosa mi fa venir voglia di accettare il tuo tutorial. Non dirmi una serie se non hai già un tutorial accettato e pubblicato. Lo stesso vale per le serie cross-site (cioè, Parte 1 per PSDTUTS, Parte 2 per NETTUTS).
In definitiva, il tutorial è per i lettori del sito, non per me. Se il titolo del tutorial li attrae, e se leggono attraverso il tutorial dopo aver visto la demo o anche la visuale iniziale (immagine, diagramma, ecc.), Allora vogliono imparare. Mentre non è necessario tenere in mano e descrivere ogni riga di codice come se un lettore non avesse mai codificato prima, è necessario descrivere le righe di codice relative specificamente a qualsiasi libreria, plugin o tecniche speciali che si stanno utilizzando.
Il più grande problema con le presentazioni finora: l'uso di una libreria di codici o di un plug-in, che mostra uno snippet di codice ma che in realtà non descrive le linee di codice rilevanti. Dire "ecco il codice per fare X" non è abbastanza. Perché un lettore dovrebbe preoccuparsi del tuo tutorial se non stai rivelando la guida?
Prima di inviare un vero testo tutorial, leggi alcuni tutorial di Collis qui, come punto di partenza. Anche se è bello avere il tuo stile, devi anche ricordare che la maggior parte dei lettori di siti ha (o molti) esperienza di codifica web. Parla con loro, non con loro. (Sono un tipo prolisso, che deriva dal fatto di essere stato un assistente universitario / istruttore di laboratorio per studenti non informatici che frequentano un corso obbligatorio di informatica.)
C'è già una pagina delle linee guida per i tutorial, che ha un link a un tutorial ZIP vuoto. Consulta questa pagina e usa questo modello ZIP.
Sai davvero cosa vuoi che tipo di tutorial tu voglia fare? Non ho individuato nessuno qui, ma alcune osservazioni mi hanno dato l'impressione che la persona volesse semplicemente la penna nel cappuccio di essere stata pubblicata su un sito come NETTUTS. Il loro tutorial e la descrizione del codice dimostrativo erano vaghi, e nonostante il mio suggerimento su cosa provare, non mordevano.
Uno dei modi migliori per pianificare e creare un tutorial è quello di delineare le tue idee e delineare le caratteristiche e le azioni che stai dimostrando. Poiché i tutorial di NETTUTS sono guidati dal codice, hai il requisito aggiuntivo di avere un codice funzionale da presentare. Ecco il mio processo preferito per la creazione di un tutorial, ma non dimenticare la checklist menzionata in precedenza:
Mentre sarebbe bello che la tua demo funzioni su tutti i browser, non è sempre possibile. Alcune librerie di codici, ad esempio jQuery, non supportano semplicemente i browser meno recenti. Per lo meno, il tuo codice dovrebbe funzionare per i browser delle librerie che stai utilizzando.
A proposito, nonostante le proteste per mezzo di commenti di alcuni lettori di NETTUTS, Firefox 3 non è molto diffuso al momento della stesura di questo articolo. È anche buggy e continua a essere un ricordo, secondo alcuni utenti di Twitter e Plurk. Dovremo considerare la compatibilità del browser caso per caso, ma provare a coprire i browser stabili più recenti. Indica se il tuo codice non funziona da qualche parte, e perché è così.
Uno strumento che ti aiuterà con i test cross-browser è il sito Browsershots, che è un modo semplice per testare il tuo codice in più browser (virtuali) per Linux, Windows, Mac OS e BSD.
A differenza del nostro sito gemello PSDTUTS, quando si tratta di tutorial per il Web Dev, non è sempre facile trovare immagini sexy. Tuttavia, le immagini rendono un tutorial più interessante e aiutano a dimostrare concetti. Quindi le immagini del tuo tutorial sono indispensabili e potresti dover essere creativo. Ecco alcune opzioni:
Incorporare le immagini il più spesso e precocemente possibile nel tuo tutorial. Molte delle esercitazioni che ho rifiutato finora non avevano immagini di sorta. Non è così difficile scattare un'istantanea della schermata dell'applicazione in uso, o uno schermo di mockup prodotto in Photoshop, o qualsiasi cosa sia rilevante. Non hai bisogno di decine di immagini, ma anche alcune catture di schermate selezionate con giudizio potrebbero essere sufficienti.
Nota: Se utilizzi immagini provenienti da altre fonti, nel tuo testo tutorial o nella tua demo, devi disporre di un permesso esplicito o implicito e devi citare le origini. Ad esempio, è possibile utilizzare le immagini da una fonte come Flickr, sotto adeguata licenza commerciale CC.
Oltre ad accreditare immagini, assicurati di accreditare librerie di codice, fonti, ecc. Questo non significa che puoi presentare il codice di qualcun altro come tuo, ma piuttosto se hai un tutorial di grandi dimensioni e usi una tecnica originariamente presentata da qualcun altro, accreditarli.
Oltre ai tutorial, pubblichiamo un articolo alla settimana relativo allo sviluppo web. I contributi articolo sono una volta ogni due settimane. Gli articoli di risorse sono buoni candidati, come il mio articolo sui CSS Grid Framework - anche se i tuoi non devono essere altrettanto lunghi.
La mia preferenza è di accettare i pitch per articoli di persone che sono scrittori / blogger esperti, anche se non è necessario aver scritto un tutorial poiché lo stile è diverso.
Cerco di rispondere a tutti il più rapidamente possibile, anche se in alcune settimane il volume delle submission è abbastanza alto da farmi perdere facilmente traccia. Ti assicuro, ti risponderò, anche se puoi darmi una gomitata se non hai ricevuto risposta in un paio di settimane dopo aver inviato un'idea o un tutorial.
Non vedo l'ora di continuare le idee e le presentazioni dei lettori di NETTUTS. Se non sai da dove iniziare, le esercitazioni di Collis qui su NETTUTS e su PSDTUTS sono un ottimo modello da seguire, sia in termini di snapshot dello schermo, di codifica e stile di scrittura.
Accentsconagua