ABC-urile de dezvoltare web

Dezvoltarea web poate fi adesea o afacere complet uimitoare. Astăzi, destinat începătorilor, aș vrea să vă prezint douăzeci și șase concepte sau tehnologii, fiecare cartografindu-se la o literă a alfabetului. Sunetele se încurcă? Probabil că este! Să începem după salt.

Tutorial publicat

La fiecare câteva săptămâni, revizuim câteva postări preferate ale cititorului nostru de-a lungul istoriei site-ului. Acest tutorial a fost publicat pentru prima dată în martie 2011.


A - AJAX

AJAX înseamnă Asynchronous JavaScript și XML și este principala forță motrice din spatele tuturor acestor aplicații web extrem de netede pe care le-ați utilizat în ultimii ani.

AJAX, ca o tehnologie, a fost destul de mult toate pervasive. GMail? Verifica. Flickr? Verifica. eBay? Verifica. Puteți găsi chiar și în panoul de administrare WordPress. Și ce anume face și cum o face?

În centrul tuturor lucrurilor este XMLHttpRequest, care permite trimiterea și primirea apelurilor, după o pagină a fost complet redată fără a atinge restul paginii. Acest lucru înseamnă, în esență, că o aplicație web nu trebuie să treacă prin reîmprospătarea completă a paginii pentru fiecare acțiune. Acest lucru, la rândul său, oferă o experiență mult mai lină, mult mai imersivă, ca experiența utilizatorului.

Citirea în legătură

  • Cum de a face AJAX cererile cu Javascript Raw
  • 24 cele mai bune practici pentru implementările AJAX
  • Trimiteți un formular fără a reîmprospăta pagina utilizând jQuery

B - Browser

Un browser este structura subevaluată pe care vă încadrați capodoperele magnifice, fie că este vorba de site-uri web sau de aplicații. Ele nu se limitează însă la recuperarea de site-uri web - browserele web moderne sunt fiarele de multitasking. Instalarea mea, de exemplu, robinete în IRC, FTP în serverele mele de dezvoltare și îmi sincronizează acreditările pe fiecare dispozitiv pe care îl folosesc.

După cum probabil ați presupus, browserele sunt în același timp cauza multă înverșunare și furie față de dezvoltatorul web modern - sunt instrumente de neprețuit, precum și fiare enervante. Orice dezvoltator care trebuie să se asigure că munca lui trebuie să arate perfect în fiecare browser-ul va cunoaște durerea.

Citirea în legătură

  • 13 moduri de testare a browserului și validarea lucrării
  • Top 5 moduri de a testa browserul dvs.
  • 9 Cele mai comune bug-uri IE și cum să le rezolvați

C - CSS

CSS este un vârf al tridentului de dezvoltare frontală. CSS, care reprezintă coli de stil cascadă, este limba în care definiți modul în care este afișată o pagină - prezentarea acesteia, dacă doriți.

În timpul zilelor de groază ale dezvoltării web, dezvoltatorii ar trebui să pună frecvent codul de prezentare în sursa lor. CSS, printre alte tehnologii, a atenuat acest lucru în mare măsură prin oferirea unei metode de a împărți prezentarea din conținut.

Citirea în legătură

  • CSS susținut cu Sass și Compass (curs)
  • CSS3 Essentials (curs)
  • 30 de zile pentru a învăța HTML și CSS (curs)
  • Cele 30 de selecții CSS pe care trebuie să le memori
  • 30 de bune practici CSS pentru începători
  • Înțelegerea specificității CSS

D - DOM

DOM, o abreviere a modelului Object Document, este convenția acceptată pentru interacțiunea cu documente HTML [sau XML]. API-ul DOM oferă o modalitate de a traversa și manipula un document programat.

DOM-ul creează o ierarhie care se potrivește structurii documentului HTML parsat. Copiii sunt numiți noduri sau noduri DOM.

Dacă auziți pe cineva care vorbește despre DOM, sunt șanse să vorbească despre scriptingul DOM. Acesta este termenul folosit pentru a descrie programarea accesării și manipulării DOM prin JavaScript. Acesta este tehnologia din spatele celor mai moderne site-uri Web și aplicații pe care le vedeți astăzi.

Citirea în legătură

  • JavaScript și seria DOM: Lecția 1
  • Javascript și DOM: Lecția 2
  • Domul este o mizerie - Prelegere de John Resig

E - evenimente

Aplicațiile web moderne sunt afacerile profund determinate de evenimente. Dar ce este un eveniment? Cele mai multe lucruri pe care le faceți pe o pagină web constituie un eveniment. Hover-ul trepidator peste o legătură amuzantă, dar posibil NSFW, făcând clic pe un buton, apăsând pe tab-ul pentru a trece la câmpul de text următor sunt toate evenimentele valabile.

Manipularea evenimentului se referă la procesul în care atașăm o anumită bucată de cod care trebuie executat ori de câte ori un anumit eveniment este declanșat. Din nou, acesta este unul dintre acele concepte fundamentale din spatele dezvoltării web moderne pe care va trebui să-l stăpânești.

Citirea în legătură

  • JavaScript din Null: Capitolul 5 - Evenimente
  • Evenimente JavaScript de la Ground Up
  • JavaScript de la Null: Legarea de evenimente Cross-Browser
  • Desfășurarea evenimentului JavaScript în 4 minute

F - Firebug

Orice artizan are nevoie de instrumentele sale pentru a lucra eficient. Dezvoltatorii web nu sunt deviatori din această regulă. Unul dintre cele mai robuste instrumente din jur este Firebug.

Firebug este o extensie Firefox care vă va galvaniza fluxul de lucru. Vă permite să editați și să monitorizați fiecare aspect al unei pagini în zbor. Nu pot explica foarte bine toate caracteristicile pe care le oferă, deci asigurați-vă că ați lovit link-urile de mai jos.

Citirea în legătură

  • 10 motive pentru care ar trebui să utilizați Firebug
  • Cum să temati orice CMS folosind Firebug
  • Firebug: centură albă până la negru

G - Grilă

Grilele sunt cadrele vizuale pe care sunt structurate paginile. Trasate de la industria de imprimare care se dezvoltă odată, grilele reprezintă o parte esențială a fluxului de lucru modern de dezvoltare web.

Există o serie de cadre CSS care se potrivesc exact acestei nevoi, deoarece construirea unui layout bazat pe rețea, pentru un număr netrivial de pagini și layouts, poate fi un exercițiu în masochism.

Citirea în legătură

  • O privire detaliată asupra cadrului 960 CSS
  • O privire mai clară asupra cadrului CSS Blueprint
  • Crash Course: Griduri YUI CSS
  • Gestionarea sistemului 960 Grid

H - HTML

Dacă citiți acest lucru astăzi, probabil că aveți deja o idee vagă despre ce este acesta. Dacă ați fost înșelată în această legătură, totuși, citiți mai departe. Apropo, bun venit la Nettuts! Putem scrie despre dezvoltarea web, cookie-urile și Justin Bieber.

HTML reprezintă HyperText Markup Language, limbajul defacto markup al web-ului - este vorba de paginile web, deoarece cărămizile sunt la case. HTML constă din mai multe componente sau elemente - etichete, atribute de etichetă și conținutul inclus în etichete.

Cea mai recentă versiune a standardului HTML, HTML5, este acum asupra noastră care aduce o serie de caracteristici noi, simplificând fluxul de lucru și stabilind câteva incompatibilități.

Citirea în legătură

  • 30 de zile pentru a învăța HTML și CSS
  • "HTML5 și tu" Curs
  • 30 cele mai bune practici HTML pentru începători
  • 28 Caracteristicile HTML5, sfaturi și tehnici pe care trebuie să le cunoașteți
  • Cele 10 etichete HTML pe care începătorii nu le utilizează

I - IE

Ahh, Internet Explorer. Numele evocă atît venerația, cît și furia. Odată ce un erou care a adus noi caracteristici impresionante pe piață, mișcând singur industria înainte, a scăzut și mingea, permițând browserului să stagneze. Pana la data, este, de asemenea, principala cauza de alopecie in dezvoltatorii front-ends. După un deceniu de battering, cea mai recentă versiune a Internet Explorer, 9, este din nou pe calea cea bună către inovare.

Indiferent de poziția dvs. față de Internet Explorer, este o parte intrinsecă și inextricabilă a procesului de dezvoltare web.

Citirea în legătură

  • Lucrurile Internet Explorer au dreptate
  • 9 Cele mai comune bug-uri IE și cum să le rezolvați
  • Internet Explorer a obținut modelul Box Right?

J - JavaScript

JavaScript este ultimul membru al trioului esențial de dezvoltare web. JavaScript, care nu este Java, este limba de scripting a web-ului. Utilizarea sa în miliarde de pagini web și, mai important, site-uri web care se susțin. Definiți comportamentul prin JavaScript - gestionați evenimentele, manipulați DOM și discutați cu serverul.

Datorită adoptării incredibile a bibliotecilor, cum ar fi jQuery, conștientizarea și cunoașterea JavaScript a crescut în fiecare an, an după an. Cred că este necesar să spun că JavaScript este o necesitate absolută pentru fiecare dezvoltator web modern.

Citirea în legătură

  • Bazele JavaScript (curs)
  • Bazele JavaScript avansate (curs)
  • 24 cele mai bune practici JavaScript pentru începători
  • JavaScript de la Null: Seriale video
  • 33 Dezvoltatori trebuie să te abonezi ca pe un Junkie JavaScript

K - optimizarea cuvintelor cheie

SEO se referă numai tangențial la dezvoltarea web-ului, dar chiar și atunci, este important pentru un dezvoltator web să aibă cunoștințe de bază despre ce este SEO și ce face.

Optimizarea cuvintelor cheie se referă la procesul de alegere a cuvintelor cheie corecte pentru site-ul dvs. web și apoi la optimizarea acestora, astfel încât publicul dvs. să poată găsi site-ul dvs. În timp ce sunteți dabbling cu toate principiile de SEO, amintiți-vă acest lucru: conținutul este rege. Dacă aveți conținut rău cu SEO excelent, utilizatorii vă vor găsi, dar veți pleca imediat după. Dacă aveți un conținut bun, utilizatorii vă vor găsi și veți rămâne.

Citirea în legătură

  • Singurele instrumente SEO pe care le veți avea vreodată

L - Mai puțin

Mai puțin este o limbă de stil cu o mie de acuri. Site-ul lor afirmă asta Mai puțin extind CSS cu comportament dinamic, cum ar fi variabilele, mixurile, operațiile și funcțiile și am tendința de a fi de acord.

Mai puțin este CSS pe steroizi anabolizanți. Da, suna mai bine în capul meu, dar știi ce înseamnă. Acesta aduce conceptele unui limbaj dinamic la CSS, făcând astfel foi de stil umongești mult mai ușor de gestionat.

Citirea în legătură

  • Cum de a stoarce cel mai mult din mai puțin
  • Trebuie să verificați LESS.js
  • Nu introduceți niciodată un prefix de furnizor

M - MVC

Modelul modelului View Viewer, mai cunoscut sub numele de MVC, este unul dintre cele mai utilizate în lumea dezvoltării web. Este un model arhitectural care separă fiecare parte a unei aplicații web în bucăți logice pentru o mai bună întreținere - modelele se ocupă de date, vizualizările se ocupă de prezentare, în timp ce controlerul coordonează fluxul de informații între cele două.

Dacă ați folosit un cadru modern de dezvoltare web, ați folosit MVC. Ruby on Rails, Code Igniter și Zend Framework folosesc toate aceste modele.

Citirea în legătură

  • MVC pentru Noobs
  • Creați prima dvs. Tv MVC Boilerplate cu PHP
  • ASP.NET de la Scratch: MVC

N - Node.JS

Node.JS a inaugurat o nouă eră a dezvoltării web. Acesta permite rularea JavaScript pe un VM incredibil de rapid [V8]. Consecințele unei astfel de schimbări de paradigmă nu pot fi imediat evidente, dar o oră sau cam așa va fi clar ca ziua.

Viteza incredibilă, precum și abilitatea de a gestiona mii de evenimente IO concurente sunt principalele puncte de discuție împreună cu baza de utilizatori a dezvoltatorului JavaScript apropiat universal.

Citirea în legătură

  • O introducere la Node.js (curs)
  • Construiți aplicații web în nod și expres (curs)
  • Învățați JavaScript de la server-side cu Node.js
  • Node.JS Site-ul oficial

O - Obiect

Programarea orientată pe obiecte a fost adoptată pe scară largă de către comunitatea de programare pentru flexibilitatea pe care o aduce la masă. Cu PLO poți scrie câteva rânduri de cod, fă-o mai uscată și deci mult mai ușor de întreținut.

Dar ce anume este un obiect? Este destul de greu să o explici într-o singură propoziție semantic autonomă, deci asigurați-vă că ați lovit legăturile de mai jos!

Citirea în legătură

  • Object-oriented PHP pentru începători
  • Elementele de bază ale JavaScript-ului orientat pe obiecte
  • Link-ul Wikipedia

P - PHP

PHP este fără echivoc cea mai populară limbă a serverului - are puteri de milioane sau chiar miliarde de pagini web și de aplicații.

Chiar și în fața mai multor opțiuni mai noi, probabil mai bune pentru a scrie aplicații web, PHP nu numai că a supraviețuit, dar a înflorit. WordPress, Joomla, Drupal, MediaWiki toate utilizează PHP în spatele scenei. Unul dintre motivele principale este ușurința implementării și ușurința relativă cu care puteți găsi gazde care susțin PHP.

Citirea în legătură

  • Bazele PHP (curs)
  • Ce este nou în PHP 5.4 (curs)
  • Laravel Essentials (curs)
  • 30+ PHP Best Practices pentru începători
  • De ce esti un programator PHP prost
  • 9 Funcții și funcții utile PHP ce trebuie să știți

Q - Interogare

O interogare, în contextul nostru, se poate referi la o serie de lucruri. O limbă de interogare este utilizată pentru a interfața cu sistemele externe pentru a obține informații. SQL este un exemplu bun care este folosit pentru a obține informații din bazele de date relaționale.

Un șir de interogări, pe de altă parte, sunt bucăți de informații care sunt transmise aplicației web ca parte a adresei URL. Aceste date pot fi ceva din pagina pe care utilizatorul încearcă să o acceseze la ID-ul de autorizare al unei tranzacții. Fișierele de interogare sunt formatate ca perechi de valori cheie.

Citirea în legătură

  • CodeIgniter from Scratch: Rezultatele căutării fără șirul de interogare
  • "Mesaje populare prin numărul de comentarii" SQL Query în WordPress

  • R - Expresii regulate

    Expresiile regulate oferă o modalitate flexibilă de a potrivi șiruri de text cu modele specifice. Este scris într-o limbă specifică interpretată de un parser. Toate limbile moderne vin cu suport pentru expresii regulate.

    Citirea în legătură

    • Expresii regulate: În sus și în desfășurare (curs)
    • Expresii regulate pentru manechine: seria Screencast
    • Nu știți nimic despre expresii regulate: un ghid complet
    • Sfaturi și tehnici avansate de expresie regulată

    S - controlul sursei

    Controlul sursei este un termen predominant în întreaga comunitate de dezvoltare, indiferent de aspectul pe care se concentrează - programatorii care lucrează pe toate, de la metale goale la cloud computing folosesc sursa de control.

    Dar ce este? Pur și simplu, controlul sursei permite unei echipe de dezvoltatori să lucreze pe același subset de fișiere, cu modificările făcute de fiecare membru trasabil și identificabil. Fiecare versiune a bazei de coduri poate fi comparată, îmbinată sau chiar restaurată.

    Citirea în legătură

    • Terminal, Git și GitHub pentru restul de noi: Screencast
    • O introducere vizuală în Git
    • Controlul versiunii ușoare cu Git
    • Obținerea Hang of GitHub

    T - TDD

    Din nou, unul dintre elementele comune în rândul tuturor dezvoltatorilor. TDD reprezintă Test Drive Development și se referă la procesul în care codurile și testele automate pentru a testa acel cod sunt scrise aproape simultan. Acest lucru elimină o mare parte din plictisirea testelor software și, prin urmare, încurajează dezvoltatorii să testeze mai des.

    Citirea în legătură

    • Ghidul lui Newbie privind dezvoltarea bazată pe teste
    • Test de dezvoltare JavaScript în practică
    • Cum să testați codul JavaScript cu Qunit

    Testul U - Unit

    Testarea unităților este un subset al TFF unde unitățile mici din codul sursă sunt testate pentru a vă asigura că sunt pregătite pentru producție. În timp ce o unitate se referă adesea la o metodă în OOP, în general se referă la cea mai mică parte a unei aplicații care poate fi testată independent.

    Citirea în legătură

    • Cum să testați codul JavaScript cu Qunit

    V - VIM

    Vim este un editor de text profund polarizator pe care îl folosește editorul Nettuts, Jeffrey Way. Vim este gratuită, open source și are o caracteristică extrem de bogată. Pe de altă parte, curba de învățare este aproape inacceptabilă și fără resurse adecvate, veți fi pierduți pentru o lungă perioadă de timp. Apăsați legăturile de mai jos pentru a vedea dacă merită comutatorul.

    Citirea în legătură

    • 25 Tutoriale Vim, Screencast-uri și Resurse
    • Top 10 capcane la trecerea la Vim
    • Venturing în Vim

    Nota editorului: Echipa Nettuts + nu poate confirma și nici nu neagă că editorul Nettuts + este ... "șold".


    W - WordPress

    WordPress a început ca un sistem de bloguri minime, dar în starea sa actuală este impresionabil de extensibil. Este extensibil până la punctul că este folosit ca totul de la un CMS la un sistem de e-commerce la tot ce este între ele.

    De asemenea, are un grup aproape cultușal de adepți, alcătuit atât din dezvoltatori, cât și din designeri care jură pe platformă, făcându-l o platformă fiabilă pe care să vă bazeze site-ul viitoare.

    Citirea în legătură

    • WordPress Plugin Dezvoltare Essentials (curs)
    • Cum de a crea o temă WordPress de la zero
    • Plugin-uri esențiale pentru fiecare instalare WordPress
    • Scalarea WordPress pentru High-Traffic
    • Top 50 Tutoriale WordPress

    X - XSS

    XSS este o interfață de scripting pentru site-uri Cross-site. Este unul dintre numeroasele posibile securități pe care le puteți face atunci când creați o aplicație web.

    XSS se referă la actul de încărcare a site-ului web vulnerabil sau a aplicației cu scenarii malware pentru a obține privilegii ridicate sau informații sensibile, adesea ambele.

    Citirea în legătură

    • Poți să-ți haci propriul site? O privire asupra unor considerente esențiale de securitate
    • CodeIgniter from Scratch: Securitate
    • 5 Sfaturi utile pentru crearea de aplicații PHP securizate

    Y - YUI

    Biblioteca de interfață de utilizator Yahoo este o bibliotecă JavaScript care simplifică procesul de creare a aplicațiilor web interactive. Ca majoritatea bibliotecilor moderne, acesta oferă suport pentru manipularea DOM și AJAX din cutie.

    Deși nu este la fel de cunoscut ca jQuery, YUI are încă o bază de utilizatori non-trivială. și este dezvoltat activ.

    Citirea în legătură

    • O introducere în YUI
    • 2010 prin obiectivul Teatrului YUI

    Z - Z index

    Z-Index este o proprietate CSS care definește modul în care un element este stivuit pe o pagină - definește cât de aproape este un element în partea de sus a ferestrei de vizualizare. Un număr mai mare înseamnă că va apărea pe partea de sus a elementelor cu un număr mai mic.

    Deși această proprietate poate fi relativ specializată, acest lucru intră în joc aproape imediat când construiți widget-uri sau proiecte web mai complicate.

    Citirea în legătură

    • Înțelegerea z-indexului CSS
    • Proprietatea C-Index CSS: Un aspect cuprinzător

    E un Wrap

    Și am terminat. Sper că ați citit cât de mult le-am pus împreună. Vă mulțumesc foarte mult pentru lectură!

Cod