Denne artikkelen diskuterer en fremgangsmåte for å skrive trinnvise opplæringsprogrammer. Mens fokuset her er for NETTUTS, kan mye av tilnærmingen brukes for et hvilket som helst nettsted. Hvis du planlegger å skrive opplæringsprogrammer for NETTUTS, bør du lese / bla gjennom denne artikkelen. Det er også en parallell artikkel på PSDTUTS som redaktør Sean Hodge skrev, som faktisk inspirerte denne.
NETTUTS handler om opplæringsprogrammer for webutvikling. Det betyr nettleserbasert koding, noe som krever minst en forståelse av HTML, noen CSS og noen webkodningsspråk. Alt annet avhenger av hva opplæringen din vil dekke. Dette kan være CMS / bloggplattformskoding, PHP, JavaScript-biblioteker, CSS-rammer, databaser, etc..
Du har sikkert lagt merke til at de mest populære opplæringsprogrammene her fokuserer på web dev med et design-y-element. Så det er mulig å vite hvordan du bruker grafikkprogramvare som Photoshop eller Fireworks. Minst, vet hvordan du får et skjermbilde, siden dette er minimumet du vil inkludere i opplæringen din for visuelle elementer.
Du trenger ikke å bli veldig formell, men du bør planlegge opp opplæringen din og bruke en sjekkliste. Her er en anbefalt sjekkliste, men vær så snill å endre den til din smak:
Det er et par måter du kan gå på å bli publisert på NETTUTS. En måte er å sende dine arbeidende demofiler, kildekode, opplærings tekst og bilder (alle ZIPped sammen) via skjema lenken på veiledningsveiledning siden. På denne måten får du et svar mye før, men det er mye arbeid for deg å ha gjort hvis det ikke passer for NETTUTS. (Dette anbefales fortsatt hvis du aldri har sendt inn en opplæring.)
Gjør det lettere på deg selv. I stedet for å skrive opp demo kode og en opplæring første, legger du først en ide. Dette anbefales faktisk hvis du tidligere har sendt en full opplæring, selv om den ikke ble publisert:
I begge tilfeller, hvis en demonstrasjon viser potensial, men opplæringen trenger arbeid, prøver jeg å jobbe med deg på et begrenset grunnlag for å forbedre teksten. Imidlertid kan jeg ikke skrive det for deg. En masse kodeutdrag og litt tekst som bare funksjonelt beskriver hva som skjer, er ikke en opplæring.
Etter hvert som leseren av NETTUTS vokser, har jeg mindre tid til å vurdere om en opplæring passer til NETTUTS. Gjør det enkelt med meg, la meg få bruke din opplæring og demo:
Sett deg på mitt sted og tenk på hva som gjør at jeg vil godta opplæringen din. Ikke legg meg en serie hvis du ikke allerede har fått en opplæring godkjent og publisert. Det samme gjelder for cross-site-serier (dvs. del 1 for PSDTUTS, del 2 for NETTUTS).
Til slutt er opplæringen for leserne av nettstedet, ikke for meg. Hvis tittelen på opplæringen tiltrekker dem, og hvis de leser gjennom opplæringen etter å ha sett demoen eller til og med den første visuelle (bilde, diagram, etc.), så vil de lære. Mens du ikke trenger å holde inne og beskrive hver linje av kode som om en leser aldri har kodet før, må du beskrive linjene med kode relatert spesielt til bibliotek, plugin eller spesielle teknikker du bruker.
Det største problemet med innleveringer så langt: ved hjelp av et kodebibliotek eller et plugin, som viser en kodestykke, men ikke egentlig beskriver de relevante kodelinjene. Å si, "her er koden for å gjøre X," er ikke nok. Hvorfor ville en leser plage med opplæringen din hvis du ikke avslører hvordan?
Før du sender inn faktisk opplærings tekst, les gjennom noen av Collis 'opplæringsprogrammer her, som utgangspunkt. Selv om det er bra å ha din egen stil, må du også huske at de fleste leserne har noe (eller mye) av webkodingserfaring. Snakk med dem, ikke på dem. (Jeg er en verbose type, som kommer fra å ha vært en høyskoleundervisningsassistent / laboratorieinstruktør for ikke-studentelever som tar et obligatorisk datakurs.)
Det er allerede en veiledningsside for opplæringsveiledning, som har en lenke til en tom veiledning ZIP. Ta kontakt med denne siden og bruk denne ZIP-malen.
Vet du virkelig hva du vil ha litt opplæring du vil gjøre? Ikke singler noen her ute, men noen innleveringer ga meg inntrykk av at personen bare ønsket at fjæren i hatten hadde blitt publisert på et nettsted som NETTUTS. Deres veiledning og demo kode beskrivelse var vag, og til tross for min nudging om hva du skal prøve, biter de ikke.
En av de beste måtene å planlegge og bygge opp er å skisse ut ideene dine og skissere funksjonene så vel som hva du demonstrerer. Siden NETTUTS opplæringsprogrammer er kodedrevne, har du det ekstra kravet om å ha funksjonskode å presentere. Her er min foretrukne prosess for å lage en opplæring - men ikke glem sjekklisten nevnt tidligere:
Mens det ville være fint at din demo fungerer i alle nettlesere, er det ikke alltid mulig. Noen kodebiblioteker - for eksempel jQuery - støtter bare ikke eldre nettlesere. I det minste bør koden din fungere for nettleserne at biblioteker du bruker støtte.
Forresten, til tross for protester i form av kommentarer fra noen NETTUTS-lesere, er Firefox 3 ikke i utbredt bruk på tidspunktet for denne skrivingen. Det er også buggy og fortsatt en minne hog, ifølge noen Twitter og Plurk brukere. Vi må vurdere nettleserens kompatibilitet i hvert enkelt tilfelle, men prøv å dekke de nyeste stabile nettleserne. Angi om koden din ikke virker et sted det burde, og hvorfor det er.
Et verktøy som kan hjelpe deg med tester i nettleseren, er nettstedet Browsershots, som er en enkel måte å teste koden på i flere (virtuelle) nettlesere for Linux, Windows, Mac OS og BSD..
I motsetning til våre søstersider PSDTUTS, når det gjelder web dev-opplæringsprogrammer, er det ikke alltid lett å komme opp med sexy bilder. Imidlertid gjør visuals en veiledning mer interessant, samt bidra til å demonstrere konsepter. Så visualer i opplæringen din er et must, og du må kanskje bli kreativ. Her er noen alternativer:
Innlemme bilder så ofte og tidlig som mulig i opplæringen din. Mange av opplæringene jeg har slått av så langt, hadde ingen bilder overhodet. Det er ikke så vanskelig å ta et skjermbilde av applikasjonen din i bruk, eller en mockup-skjerm blir produsert i Photoshop, eller hva som er relevant. Du trenger ikke dusinvis av visualer, men til og med noen veloverveiende utvalgte skjermfangster kan være nok.
Merk: Hvis du bruker visualer fra andre kilder - enten i opplæringsteksten eller din demo - må du ha eksplisitt eller implisitt tillatelse og må sitere kilden / kildene. For eksempel kan du bruke bilder fra en kilde som Flickr, under egnet CC-kommersiell lisens.
I tillegg til å kreditere bilder, må du sørge for at du krediterer alle kodebiblioteker, kilder osv. Dette betyr ikke at du kan presentere andres kode som din egen, men heller hvis du har en stor opplæring og bruker en teknikk som opprinnelig ble presentert av noen andre, kreditere dem.
I tillegg til opplæringsprogrammer, publiserer vi en artikkel per uke knyttet til webutvikling. Artikkelbidragene er en gang hver annen uke. Ressursartikler er gode kandidater, for eksempel min CSS Grid Framework-artikkel - selv om din ikke trenger å være så massivt lenge.
Min preferanse er å akseptere plasser for artikler fra personer som er erfarne forfattere / bloggere, selv om du ikke trenger å ha skrevet en opplæring siden stilen er annerledes.
Jeg prøver å svare på alle så raskt som mulig, men i noen uker er volumet av innleveringer høyt nok til at det er lett for meg å miste sporet. Vær sikker på at jeg vil svare, selv om du kan knuse meg hvis du ikke har hørt om noen få uker etter at du har sendt inn en ide eller opplæring.
Jeg gleder meg til fortsatte ideestillinger og innleveringer fra NETTUTS-lesere. Hvis du ikke vet hvor du skal begynne, er Collis 'opplæringsprogrammer her på NETTUTS og på PSDTUTS en flott modell å følge, både når det gjelder skjermkort, koding og skrivestil.