ABC erna för webbutveckling

Webbutveckling kan ofta vara en fullständigt förvirrande affär. Idag, riktad mot nybörjare, skulle jag vilja presentera dig för tjugosju koncept eller tekniker, varje kartläggning till ett bokstav i alfabetet. Låter wonky? Det är förmodligen! Låt oss komma igång efter hoppet.

Publicerad handledning

Varje par veckor besöker vi några av våra läsares favoritinlägg från hela webbplatsens historia. Denna handledning publicerades först i mars 2011.


A - AJAX

AJAX står för asynkron JavaScript och XML och är den viktigaste drivkraften bakom alla dessa superlösa webbapplikationer du har använt de senaste åren.

AJAX, som en teknik, har varit ganska mycket allomfattande. Gmail? Kontrollera. Flickr? Kontrollera. eBay? Kontrollera. Du kan även hitta den i WordPress administrationspanel. Så vad gör det exakt och hur gör det det?

I centrum av allt är XMLHttpRequest som tillåter att samtal skickas och tas emot, efter en sida har gjorts fullständigt utan att röra resten av sidan. Detta innebär i huvudsak att en webbapplikation inte behöver gå igenom en fullständig siduppdatering för varje åtgärd. Detta ger i sin tur en mycket mjukare, mycket fördjupande skrivbord som användarupplevelse.

Relaterad läsning

  • Hur man gör AJAX-förfrågningar med Raw Javascript
  • 24 bästa praxis för AJAX-implementeringar
  • Skicka in en blankett utan siduppdatering med jQuery

B - Browser

En webbläsare är den diskreta strukturen där du ramar dina magnifika mästerverk, vare sig det är webbplatser eller applikationer. De är inte begränsade till att hämta webbplatser ändå - moderna webbläsare är ganska multitasking djur. Min installation, till exempel, tappar till IRC, FTPs i mina utvecklingsservrar och synkroniserar mina referenser över alla enheter jag använder.

Som du kanske har antydit, är webbläsare samtidigt orsaken till mycket jubel och raseri mot den moderna webbutvecklaren - de är ovärderliga verktyg och irriterande djur. Varje utvecklare som måste se till att hans arbete måste se ut perfekt i varje webbläsaren kommer att känna smärtan.

Relaterad läsning

  • 13 sätt att webbläsaren testar och verifierar ditt arbete
  • Topp 5 sätt att webbläsare-Testa din webbplats
  • 9 vanligaste IE-fel och hur man fixar dem

C - CSS

CSS är en ledstång i framkantutvecklingstridenten. CSS, som står för Cascading Style Sheets, är det språk som du definierar hur en sida visas - dess presentation, om du vill.

Under webbutvecklingens skräckdagar vägrade utvecklarna ofta presentationskoden i sin källa. CSS, bland andra tekniker, lindrade detta kraftigt genom att tillhandahålla en metod för att splittra presentationen från innehållet.

Relaterad läsning

  • Underhålls CSS Med Sass och Kompass (Kurs)
  • CSS3 Essentials (Kurs)
  • 30 dagar att lära sig HTML och CSS (kurs)
  • De 30 CSS Selectors du måste memorera
  • 30 CSS bästa praxis för nybörjare
  • Förstå CSS-specificitet

D - DOM

DOM, en förkortning av Document Object Model, är den accepterade konventionen för att interagera med HTML [eller XML] -dokument. DOM API ger ett sätt att kryssa och manipulera ett dokument programmatiskt.

DOM skapar en hierarki som matchar strukturen för det analyserade HTML-dokumentet. Barnen heter noder eller DOM-noder.

Om du hör någon som pratar om DOM är chansen att de pratar om DOM-skript. Detta är termen som används för att beskriva programmatiskt åtkomst till och manipulering av DOM via JavaScript. Detta är tekniken bakom de flesta moderna webbplatser och applikationer som du ser idag.

Relaterad läsning

  • JavaScript och DOM-serien: Lektion 1
  • Javascript och DOM: Lektion 2
  • Dom är en Mess - Föreläsning av John Resig

E - händelser

Moderna webbapplikationer är djupt händelsedrivna affärer. Men vad är en händelse? De flesta saker du gör på en webbsida utgör en händelse. Den spökiga svävaren över en rolig men möjligen NSFW-länk, klicka på en knapp, tryck på fliken för att flytta till nästa textfält är alla giltiga händelser.

Händelsehantering hänvisar till processen där vi bifogar en specifik bit av kod som ska köras när en viss händelse avfyras. Återigen är detta ett av de grundläggande begreppen bakom modern webbutveckling som du behöver behärska.

Relaterad läsning

  • JavaScript från Null: Kapitel 5 - Händelser
  • JavaScript-händelser från Ground Up
  • JavaScript från Null: Cross-Browser Event Binding
  • JavaScript-evenemangsdelegation om 4 minuter

F - Firebug

Någon hantverkare behöver sina verktyg för att fungera effektivt. Webbutvecklare är inte avvikande från denna regel. Ett av de mest robusta verktygen är Firebug.

Firebug är en Firefox-förlängning som galvaniserar ditt arbetsflöde. Det låter dig redigera och övervaka en sidas alla aspekter i flygningen. Jag kan inte förklara alla funktioner som den ger, så se till att klicka på länkarna nedan.

Relaterad läsning

  • 10 skäl till varför du borde använda Firebug
  • Så Tema någon CMS Använda Firebug
  • Firebug: Vit till svart bälte

G - Grid

Grids är de visuella ramarna på vilka sidor är strukturerad. Överfört från den en gång växande utskriftsindustrin är nätet en viktig del av det moderna webbutvecklingsarbetet.

Det finns ett antal CSS-ramar som tillgodoser exakt detta behov, eftersom en gridbaserad layout, för ett icke trivialt antal sidor och layouter, kan vara en övning i masochism.

Relaterad läsning

  • En detaljerad titt på 960 CSS Framework
  • En närmare titt på Blueprint CSS Framework
  • Crash Course: YUI Grids CSS
  • Mastering av 960-nätverket

H - HTML

Om du läser detta idag har du förmodligen redan en vag idé om vad det här är. Om du blev lurad i den här länken, läs vidare. Förresten, välkommen till Nettuts! Vi skriver om webbutveckling, cookies och Justin Bieber.

HTML står för HyperText Markup Language, webben defacto markup-språk - det är till webbsidor som tegelstenar är hemma. HTML består av flera komponenter eller element - taggar, tagattribut och innehållet som bifogas taggarna.

Den senaste versionen av HTML-standarden, HTML5, ligger nu på oss med ett antal nya funktioner som effektiviserar arbetsflödet och fastställer några inkompatibiliteter.

Relaterad läsning

  • 30 dagar att lära sig HTML och CSS
  • "HTML5 och You" Course
  • 30 HTML Best Practices för nybörjare
  • 28 HTML5-funktioner, tips och tekniker du måste veta
  • De 10 HTML-taggarna börjar inte använda

I-IE

Ahh, Internet Explorer. Namnet framkallar både vördnad och ilska. En gång en hjälte som frambringade imponerande nya funktioner på marknaden, släppte den ena sidan industrin framåt, det slog också bollen genom att låta webbläsaren stagnera. Till dags dato är det också den främsta orsaken till alopeci i framändarna utvecklare. Efter ett årtionde av misshandel är den senaste versionen av Internet Explorer 9, återigen på rätt väg mot innovation.

Oavsett din inställning till Internet Explorer är det en inbyggd och oupplöslig del av webbutvecklingsprocessen.

Relaterad läsning

  • Sakerna Internet Explorer fick rätt
  • 9 vanligaste IE-fel och hur man fixar dem
  • Hade Internet Explorer rätt modell?

J - JavaScript

JavaScript är den slutliga medlemmen av den väsentliga webbutvecklingstrioen. JavaScript, som inte är Java, är webbsspråksspråket. Dess användning i miljarder webbsidor och, ännu viktigare, webbplatser stakes som hävdar. Du definierar beteende via JavaScript - hanterar händelser, manipulerar DOM och pratar med servern.

Tack vare det otroliga adoptionen av bibliotek, som jQuery, har medvetenhet och kunskap om JavaScript ökat varje år, år efter år. Jag tycker att det är lämpligt att säga att JavaScript är ett absolut måste för alla moderna webbutvecklare.

Relaterad läsning

  • JavaScript Grundläggande (Kurs)
  • Avancerade JavaScript Grundläggande (Kurs)
  • 24 JavaScript Bästa praxis för nybörjare
  • JavaScript från Null: Video Series
  • 33 Utvecklare du MÅSTE Prenumerera på som en JavaScript Junkie

K - Nyckelordsoptimering

SEO gäller endast tangentiellt för webbutveckling men även då är det viktigt för en webbutvecklare att ha grundläggande kunskaper om vad SEO är och vad det gör.

Nyckelordoptimering avser processen att välja rätt nyckelord för din webbplats och sedan optimera dem så att publiken kan hitta din webbplats. Medan du dabbling med alla principer om SEO, kom ihåg det här: Innehållet är kung. Om du har dåligt innehåll med utmärkt SEO kommer användarna att hitta dig men lämna snart efter. Om du har bra innehåll kommer användarna att hitta dig och stanna.

Relaterad läsning

  • Det enda SEO-verktyget du någonsin behöver

L - Mindre

Mindre är ett stylesheet språk med några ess upp sina ärmar. Deras webbplats säger att MINDRE utökar CSS med dynamiskt beteende som variabler, mixins, operationer och funktioner och jag är benägen att hålla med.

MINDRE är CSS på anabola steroider. Ja, det lät bättre i mitt huvud men du vet vad det betyder. Det ger konceptet ett dynamiskt språk till CSS vilket gör humongous stylesheets mycket enklare att hantera.

Relaterad läsning

  • Hur man klämmer ut det mesta av mindre
  • Du måste kolla in LESS.js
  • Skriv aldrig ett försäljningsprefix igen

M - MVC

Model View Controller mönstret, mer känt som MVC, är en av de mest använda i webbutvecklingsvärlden. Det är ett arkitektoniskt mönster som skiljer varje del av en webbapplikation till logiska bitar för bättre underhåll - modeller hanterar data, visningar hanterar presentationen medan regulatorn samordnar informationsflödet mellan de två.

Om du har använt en modern webbutvecklingsram har du använt MVC. Ruby on Rails, Code Igniter och Zend Framework använder alla detta mönster.

Relaterad läsning

  • MVC för Noobs
  • Skapa din första lilla MVC Boilerplate med PHP
  • ASP.NET från scratch: MVC

N - Node.JS

Node.JS inledde en ny era av webbutveckling. Det gör det möjligt att köra JavaScript på en otroligt snabb VM [V8]. Konsekvenserna av ett sådant paradigmskifte kan inte vara omedelbart uppenbart, men en timme eller så med det kommer att göra det klart som dag.

Otroligt snabb samt förmågan att hantera tusentals samtidiga IO-händelser är de viktigaste samtalspunkterna tillsammans med den nästan universella JavaScript-utvecklarens användarbas.

Relaterad läsning

  • En introduktion till Node.js (kurs)
  • Bygg Web Apps i Node och Express (Course)
  • Learning Server-Side JavaScript med Node.js
  • Node.JS Officiell webbplats

O - Objekt

Objektorienterad programmering har i stor utsträckning antagits av programmeringsgemenskapen för den flexibilitet som den tar med sig till bordet. Med OOP kan du skriva några rader kod, göra det mer DRYer och därmed mycket lättare att underhålla.

Men vad exakt är ett föremål? Det är ganska svårt att förklara det i en enda semantiskt självständig mening så var noga med att slå på länkarna nedan!

Relaterad läsning

  • Objektorienterad PHP för nybörjare
  • Grunderna för objektorienterad JavaScript
  • Wikipedia länk

P - PHP

PHP är otvivelaktigt det mest populära serverns sidspråket - det står för miljoner, eventuellt miljarder, av webbsidor och applikationer.

Även inför ett antal nyare, utan tvekan bättre alternativ för att skriva webbapplikationer, har PHP inte bara överlevt utan blomstrat. WordPress, Joomla, Drupal, MediaWiki använder alla PHP bakom kulisserna. En av de främsta orsakerna är enkel implementering och den relativa lättnad som du kan hitta värdar som stöder PHP.

Relaterad läsning

  • PHP Grundläggande (Kurs)
  • Vad är nytt i PHP 5.4 (Kurs)
  • Laravel Essentials (Course)
  • 30 + PHP bästa praxis för nybörjare
  • Varför du är en dålig PHP-programmerare
  • 9 Användbara PHP-funktioner och funktioner du behöver veta

Q - Query

En fråga, i vårt sammanhang, kan hänvisa till ett antal saker. Ett fråge språk används för att koppla samman med externa system för att få information. SQL är ett bra exempel som används för att få information från relationsdatabaser.

En frågesträng å andra sidan är bitar av information som skickas till webbapplikation som en del av webbadressen. Den här informationen kanske är allt från sidan som användaren försöker få åtkomst till auktorisations-ID för en transaktion. Query-strängar formateras som nyckelvärdespar.

Relaterad läsning

  • CodeIgniter from Scratch: Sökresultat utan frågesträngar
  • "Populära inlägg av kommenteringsräkning" SQL-fråga i WordPress

  • R - Regelbundna uttryck

    Regelbundna uttryck ger ett flexibelt sätt att matcha textsträngar med specifika mönster. Det är skrivet i ett specifikt språk som tolkas av en parser. Alla moderna språk levereras med regelbundet uttryckssupport.

    Relaterad läsning

    • Regelbundna uttryck: Upp och Running (kurs)
    • Regelbundna uttryck för dummies: Screencast Series
    • Du vet inget om regelbundna uttryck: En komplett guide
    • Avancerade regelbundna uttryckstips och tekniker

    S - Source Control

    Källkontroll är en term som förekommer i hela utvecklingssamhället, oavsett vilken aspekt de är inriktade på - programmerare som arbetar med allt från blotta metall till molnberäkning använder källkontroll.

    Men vad är det? Enkelt uttryckt tillåter källkontroll att ett team utvecklare arbetar på samma delmängd av filer med ändringar som gjorts av varje medlem som kan spåras och identifieras. Varje version av kodbasen kan jämföras, slås samman eller till och med återställas.

    Relaterad läsning

    • Terminal, Git och GitHub för resten av oss: Screencast
    • En visuell introduktion till Git
    • Enkel versionskontroll med Git
    • Hänger på GitHub

    T - TDD

    Återigen, en av de gemensamma elementen bland nästan alla utvecklare. TDD står för testdriven utveckling och hänvisar till processen där kod och automatiserade tester för att testa den koden skrivs nära samtidigt. Detta tar bort mycket av tråkigheten i mjukvarutestning och därmed uppmuntrar utvecklare att testa oftare.

    Relaterad läsning

    • Nybörjarens guide till testdriven utveckling
    • Testdriven JavaScript-utveckling i praktiken
    • Så här testar du JavaScript-koden med QUnit

    U - Enhetstestning

    Enhetstestning är en delmängd av TFF där små enheter i källkoden testas för att säkerställa att de är redo för produktion. Medan en enhet ofta refererar till en metod i OOP, hänvisar det i allmänhet till den minsta delen av en applikation som kan testas oberoende.

    Relaterad läsning

    • Så här testar du JavaScript-koden med QUnit

    V - VIM

    Vim är en djupt polariserande textredigerare som den sköna höftnätredaktören Jeffrey Way använder. Vim är gratis, öppen källkod och mycket funktionen packad. På flipsidan är inlärningskurvan nästan oacceptabelt brant och utan de rätta resurserna kommer du att gå vilse under en lång tid. Klicka på länkarna nedan för att se om det är värt att växeln.

    Relaterad läsning

    • 25 Vim Tutorials, Screencasts, och resurser
    • Topp 10 fallgropar när man byter till Vim
    • Venturing in Vim

    Redaktörens anmärkning: Nettuts + -teamet kan inte bekräfta eller neka att Nettuts + -redigeraren är ... "höft".


    W - WordPress

    WordPress började som ett minimalt bloggningssystem men i sitt nuvarande tillstånd är det imponerande. Det är utökat till den punkt som det används som allt från ett CMS till ett e-handelssystem till allt däremellan.

    Det har också en nästan kult grupp av anhängare som består av både utvecklare och designers som svär på plattformen, vilket gör det till en pålitlig plattform för att basera din kommande webbplats.

    Relaterad läsning

    • WordPress Plugin Development Essentials (kurs)
    • Så här skapar du ett WordPress-tema från början
    • Viktiga plugins för varje WordPress-installation
    • Skalning WordPress för högtrafik
    • Top 50 WordPress Tutorials

    X-XSS

    XSS står för cross-site scripting. Det är ett av ett antal möjliga säkerhetsrobotar du kan möta när du skapar en webbapplikation.

    XSS avser åtgärden att ladda den sårbara webbplatsen eller applikationen med skadliga skript för att få förhöjda behörigheter eller känslig information, ofta båda.

    Relaterad läsning

    • Kan du hacka din egen webbplats? En titt på några viktiga säkerhetshänsyn
    • CodeIgniter from Scratch: Security
    • 5 Användbara tips för att skapa säkra PHP-applikationer

    Y-YUI

    Yahoo användargränssnitt biblioteket är ett JavaScript-bibliotek som förenklar processen att skapa interaktiva webbapplikationer. Liksom de flesta moderna bibliotek ger det stöd för DOM-manipulation och AJAX ur lådan.

    Medan inte så känt som jQuery, har YUI fortfarande en icke trivial användarbas. och är aktivt utvecklad.

    Relaterad läsning

    • En introduktion till YUI
    • 2010 genom linsen på YUI Theatre

    Z-Z index

    Z-Index är en CSS-egenskap som definierar hur ett element staplas på en sida - det definierar hur nära ett element är överst i visningsporten. Ett högre antal betyder att det kommer att visas ovanpå element med lägre nummer.

    Medan den här egenskapen kan vara relativt specialiserad, kommer detta till spel nästan när du bygger widgets eller mer komplicerade webbdesigner.

    Relaterad läsning

    • Förstå CSS z-index
    • Z-Index CSS Property: Ett omfattande utseende

    Vi är klara

    Och vi är klara. Jag hoppas att du hade så mycket att läsa detta som jag hade lagt på det här tillsammans. Tack så mycket för att läsa!