Forslag til å lage trinnvise webutviklingsopplæringer for Nettuts +

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.

Ferdighetssett

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.

Planlegg og ta en sjekkliste

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:

  1. Planlegg opplæringen din.
  2. Skriv opp sjekklisten din.
  3. Forskning noen kodebiblioteker, plugins, teknikker.
  4. Bestem deg demo-kodes funksjonssett.
  5. Skriv koden din, test, og avgrense den til du er fornøyd.
  6. Skriv opp veiledningsteksten.
  7. Ta med din demo-kode i utdrag, i opplæringen (som i våre veiledningsveiledning).
  8. Oppgi eventuelle mangler i koden du er klar over. (F.eks., Fungerer ikke i Internet Exploder 6.0+, etc.)
  9. Gi passende visuelle elementer (bilde, skjermbilde, animasjon, etc.) ikke større enn 600 piksler.
  10. Rediger opplæringsteksten og nummer hvert avsnitt med "Trinn 1", "Trinn 2", osv.
  11. Hvis du har brukt bilder som ikke er ditt, må du ikke bare gi tilskrivning, du må ha enten implisitt (for eksempel CC-lisens på Flickr) eller eksplisitt tillatelse til å bruke dem. Dette inkluderer bilder som er synlige i opplæringen din og i din demo.
  12. Forbered kildekoden for nedlasting og ZIP-opp. I samme ZIP-fil, inkludere arbeidende demofiler.

Gjør det enkelt på deg selv

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:

  1. Kom opp med en ide og send det til meg via skjema lenken på veiledningsveiledningssiden. (Bruk en tom ZIP-fil, siden skjemaet krever det.) Eller hvis du tidligere har sendt inn en ide / opplæring til meg, har du min NETTUTS e-postadresse og du er velkommen til å kaste meg direkte.
  2. Hvis du ikke tidligere har skrevet en opplæring for nettstedet, er det et par faser:
    1. Interesse i ideen er ikke et løfte om publisering. Etter å ha pitched en ide og få interesse, må du vise demo-kode (selv om det bare er på din egen server).
    2. Hvis du gjør demo-koden og den passer til NETTUTS, spør jeg deg - men ikke be om - hvis du vil skrive opp veiledningen, men uten garanti for publisering.
    3. Merk at dette høres urettferdig, men er egentlig ikke annerledes enn hvis du sender inn hele opplæringen på forhånd. På denne måten har du noen stadier hvor du kan forandre deg, redusere din samlede innsats. Hvis du hellere vil sende opplæringen og filene dine på forhånd, er det greit også.
  3. På den annen side, hvis du allerede har skrevet en god opplæring som krevde lite redigering, er jeg mye mer lindrende. Du kan kaste ideen, få meg til å gå, og skriv opp veiledningen.

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.

Gjør det enkelt på redaktøren

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:

  1. Bruk ditt virkelige navn og e-post i innleveringen. (Du må også ha en PayPal-konto slik at vi kan betale deg.)
  2. Beskriv klart hva opplæringen din vil vise, og hva din demokode vil demonstrere.
  3. Send inn demo kode som fungerer og krever ikke at jeg gjør mye oppsett (utover å laste opp noen filer til en server).
  4. Ikke send meg demo kode som krever at jeg legger til mine egne bilder eller noe annet, spesielt hvis du ikke bry meg om å fortelle meg på forhånd. Mitt ønske om å hjelpe deg i sammenstøt med mangel på tid.
  5. Samlet, minimer mengden tid jeg må bruke til å sette opp din demo-kode bare for å vurdere den. Jo mer innsats det tar, desto mer sannsynlig vil det bli slått av. (Du kan alltid starte med en demo på et av nettstedene dine, men til slutt må du sende filer til meg.)

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).

Beskriv hvert trinn grundig

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?

Tone og skrivestil

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.)

Retningslinjer og formatering

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.

Bestem deg om emnet ditt

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.

brainstorming

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:

  1. Brainstorm noen applikasjonsideer.
  2. Forskning de nødvendige biblioteker, plugins, funksjoner, begrensninger, etc..
  3. Skisse ønskede funksjoner, skissere eller mockup nettleserskjermer. (Husk at du kan bruke stillbilder av de ferdige mockupene i opplæringen din.)
  4. Skriv koden, test og finjuster den. (Test i nettleserbilder, beskrevet i neste avsnitt.)
  5. Skriv opp veiledningen rundt koden din, og ta med utdrag i lett fordøyelige biter, formatert i henhold til veiledningen for opplæringen.
  6. Rediger opplæringen om nødvendig. Sett deg i en lesers sinn. Hvis de konsulterer opplæringen din fordi tittelen fikk oppmerksomheten, forstår de sannsynligvis ikke koden din uten en ordentlig forklaring. Ikke bare vis kodeblokken og antar at leseren skal forstå. Ellers skriver du kode, ikke en opplæring.
  7. Legg til visuelle elementer (skjermbilder, etc.). Se delen Visuelle under.

Demo Code og Cross-Browser Issues

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..

Optikken

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:

  1. Relevant bilde.
  2. Skjermbilder av søknaden din i ulike bruksvilkår.
  3. Screencast av søknaden din i bruk, eller noe som er relevant for opplæringen din.
  4. Et diagram eller tankekart som representerer litt informasjon om søknaden din, bruken eller utformingen og opprettelsen.
  5. Relevant videoinnhold, kanskje til og med en skjermbilde av demokoden din i bruk.

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.

Oppgi dine kilder

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.

artikler

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.

Respons

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.

Konklusjon

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.