Resursele web pentru dezvoltatori O mega-compilare

Internetul este în continuă creștere și există sute de mii de resurse colective pentru viitori dezvoltatori web. Din articole online, tutoriale, instrumente, ghiduri, clipuri video, puteți afla mai multe despre orice pe Web. Nu a fost niciodată mai ușor să sari online!

Mai jos am creat o colecție imensă de resurse foarte utile pentru dezvoltatorii web. Acestea includ materialul începătorului pentru HTML5 / CSS3, împreună cu teoriile mai complicate pentru programarea JavaScript și PHP. Este posibil ca unii dezvoltatori entuziasti să studieze aceste limbi și să construiască aplicații web populare, asemănătoare cu cele de la Twitter sau Tumblr. Dacă aveți un interes pentru activele utile pentru dezvoltatorii web moderni, atunci vă va plăcea această compilație de resurse de încredere.

Revistele utile online

Lumea blogurilor a explodat cu sute de mii de scriitori noi care au accesat Internetul. Multe dintre aceste blog-uri on-line se concentrează în jurul designului și dezvoltării web. Puteți găsi o mulțime de resurse utile doar prin rotirea acestor fluxuri RSS.

În funcție de tipul de limbă pe care îl codificați, aceasta va determina interesul dvs. pentru oricare dintre aceste bloguri. Putem să ne concentrăm asupra dezvoltării web și să presupunem că aceasta include toate lucrările de front-end (HTML5 / CSS3 / JavaScript), precum și simple script-uri back-end (PHP / RoR / Python / SQL). Am luat libertatea de a construi o singură listă a celor mai populare bloguri dev care se concentrează atât pe front-end, cât și pe codul back-end.

Nettuts+
24 moduri
Webmonkey
Smashing Coding
Webitect
Inspectează elementul
Pisicile care codifică
Line25 Web Design Blog

Cu siguranță, trebuie să luați în considerare multe altele. Vă recomandăm să apăsați pe Google în căutarea unor tutoriale și articole despre limba preferată dev. Apoi, folosind un agregator de feed-uri RSS precum Google Reader, puteți seta liste cu toate cele mai recente articole din aceste reviste. Aceasta este o modalitate excelentă de a vă începe ziua de lucru, sau chiar de a ucide un pic de timp chugging prin tutoriale.

jQuery Plugins Galore

Atât biblioteca de bază jQuery, cât și jQuery Mobile au câștigat multă tracțiune în ultimul an. Aceste biblioteci open source lucrează pentru a proiecta o experiență front-end plină de animație bogată și facilități ușor de implementat Ajax, deși biblioteca mobilă nu a ajuns destul de mult în legătură cu plug-in-ul și cu codul părții terțe.

În mod similar, un alt produs fantastic bgStretcher poate fi folosit ca script de fundal dinamic. Va fi nevoie de o serie de imagini și de o scalare a dimensiunilor proporțional cu rezoluția ecranului utilizatorului. Check out demo minunat pentru a vedea acest lucru în acțiune. Ambele pluginuri sunt gratuite pentru a fi descărcate și se comportă ca exemple simple pentru codul terți extraordinar construit din jQuery. Lucrul cu aceste resurse vă va ajuta să economisiți timp pe parcursul lucrărilor de proiect, astfel încât să nu trebuie să reinventați roata.

În general, recomand, de asemenea, navigarea pe site-urile Ajax Blender și Dynamic Drive pentru fragmente de cod JavaScript / pluginuri. Biblioteca nu este uriașă, dar crește în mod constant din conținutul nou introdus de utilizatori. Site-urile includ nu numai plug-in-urile jQuery, ci și bibliotecile MooTools și Prototype.

Dacă ați terminat lucrul cu biblioteca jQuery Mobile vreau să recomand un alt instrument jqmPhp. Este o clasă PHP dinamică în care puteți să vă referiți la funcții simple la linii de ieșire și la linii de cod HTML5 alimentate prin jQuery Mobile. Este sincer cel mai simplu mod de a face prototipuri de aplicații mobile dinamice construite în jurul unei cochilii PHP. Blogul site-ului are o multime de referinte de exemplu pentru a sapa prin.

Construcția în HTML5 și CSS3

Când vorbim despre dezvoltarea web-ului front-end, este vorba, în general, de eficiență. Nu aveți aceleași probleme în construirea unui site web în HTML / CSS pe măsură ce codificați o aplicație Ruby back-end. Nu există nici o logică reală sau o eroare în HTML - este vorba mai ales despre cât de repede puteți să scalați corect un design al aspectului în toate browserele.

Mai intai trebuie sa incep prin a recomanda placa de baza HTML5. Acesta este un șablon dezbrăcat de oase goale, care include toate “standard” Elementele paginii HTML5 dintr-un singur pachet. Aceasta include o foaie de stil implicită, JavaScript, favicon, pictograme Apple touch și multe alte bunate. Este un proiect gratuit de 100% și puteți contribui chiar și la repo Github. Aceasta este o resursă must-have pentru toți dezvoltatorii înainte de a începe pe orice proiect web serios.

Acum, dacă lucrați de pe această boilerplate, aveți opțiunea de a adăuga tot codul personalizat. Dar îți sugerez să faci următorul pas și să construiești o aplicație precum Initializer. Acest lucru va genera un aspect tipic al site-ului și chiar vă va permite să personalizați elementele care sunt incluse în pachetul dvs. de boilerplate. Codul Google Analytics, fișierele jQuery miniaturizate, htaccess sau web.config, plus aproximativ o duzină de alte opțiuni sunt disponibile.

CSS Designeri

Acum că am aruncat o privire în codificarea HTML5, ar trebui să luăm în considerare și câteva dintre cadrele CSS3 populare. Acestea sunt șabloane mai deschise decât HTML, deoarece puteți face cu mult mai mult cu CSS. Designerii vor realiza, de asemenea, dificultatea de a construi codul compatibil cu standardele pentru toate browserele web moderne.

Sistemul Golden Grid este fantastic ca un cadru pentru designul web receptiv. Aceste machete se vor adapta ecranelor mobile și se vor orienta spre interior în timp ce redimensionați fereastra browserului. De asemenea, ajută la planificarea lățimii și mărimii fiecărei zone a coloanei. Blueprint este un alt cadru CSS la îndemână pe care ar trebui să îl verificați. Este grozav pentru construirea de site-uri personalizate și oferă o documentație fantastică.

Cu toate acestea, când vine vorba de instrumente CSS, CSS3 PIE trebuie să fie printre primele mele favorite. Este o aplicație web simplă, care transmite codul corespunzător pentru a reda efecte CSS3 acceptate în Internet Explorer 6-9. Puteți crea gradienți liniari dinamice, colțuri rotunjite și umbre cu cu setări personalizabile. Site-ul are exemple IE dacă doriți să le verificați.

De asemenea, dezvoltatorii vor căuta să reducă dimensiunile fișierelor pentru producție. Clean CSS este o resursă în care puteți selecta din numeroase opțiuni pentru a vă simplifica codul și a reduce dimensiunea fișierului. O altă alternativă a codului Beautifier nu oferă cât mai multe opțiuni, dar poate fi mai ușor de utilizat.

Personalizarea temelor cu WordPress

Publicarea WordPress este cu ușurință cea mai populară CMS din această epocă. Am văzut, eventual, milioane de noi bloguri și site-uri web, toate alimentate de această soluție fantastică de gestionare a conținutului. Și întrucât astfel de dezvoltatori WordPress sunt în cerere foarte mare pentru a construi widget-uri personalizate și teme de pe site.

Noua versiune a temei Constellation oferă dezvoltatorilor WordPress un punct de pornire mai ușor decât șabloanele implicite. Noua temă Twenty Eleven este foarte delicată și minimalistă, dar nu poate concura cu un șablon de temă construit pe partea de sus a HTML5Boilerplate. Tema Constellation WP include chiar interogări media pentru diferite rezoluții ale dispozitivului, cum ar fi tablete iPhone și iPad.

Wonderflux este un alt tema tematica WordPress care nu este la fel de departe de-a lungul dezvoltarii. Acesta a fost recent lansat din beta în v1.0, împreună cu o documentație online. Această temă este un pic mai complicată decât Constellation, care vă oferă mai mult control asupra aspectului. Dezvoltatorii au inclus cârlige, funcții și filtre personalizate PHP pentru a face din site-ul dvs. WordPress mai dinamic.

Dezvoltatorii serios WP ar trebui să verifice ambele soluții pentru a vedea dacă unul dintre ele ar putea ajuta la viitoarea lucrare de proiect.

Găsirea Freebies pentru dezvoltatori de web

Comparativ cu PSD-urile și grafica, comunitatea de dezvoltare web pare puțin lipsită de galerii gratuite. Puteți găsi întotdeauna scripturi minunate pe Github, dar de multe ori va trebui să căutați și să le testați singuri.

Este dificil să găsiți site-uri care oferă descărcări și demonstrații gratuite, precum și exemple de scenarii. Resursa mea preferată nouă este CodeVisually care cataloghează instrumentele de dezvoltare prezentate de utilizatori, pluginurile, bibliotecile și alte lucruri îngrijite. Aspectul este setat ca o galerie unde fiecare pagină include un link către produs, o captură de ecran demo și câteva detalii suplimentare.

Galeria include sute de exemple de cod HTML pentru șabloane HTML / HTML5, biblioteci CSS3 și, de asemenea, o mulțime de chestii jQuery. De asemenea, am descoperit că este un site excelent pentru a trimite publicului propriul cod open source. Numele dvs. este legat de trimitere, plus puteți plasa linkuri către propriul dvs. site unde utilizatorii pot accesa codul.

Aplicații API pentru aplicații web

O tendință foarte populară în dezvoltarea web modernă este construirea API-urilor ca aplicație terță parte. Cele mai multe dintre brandurile de rețea socială de bază includ un API de lucru și un segment de documentație chiar pe site-ul lor. În plus, există tone de clase de împachetare gratuite pe Github scrise în toate limbile de programare majore de back-end.

Dezvoltatorii ar trebui să se simtă confortabil în lucrul cu aceste tipuri de biblioteci de cod, pe măsură ce cresc în cerere. Utilizând sistemul OAuth, puteți crea rapid o bază de utilizator pentru multe dintre aceste aplicații. Am enumerat mai jos doar câteva referințe la API-uri populare online și documentația completă.

Twitter API
API CloudApp
Instagr.am API
eBay API
Foursquare API
Dribbble API
Github API

Profitați de aceste resurse pe proiecte noi ori de câte ori este posibil. Web-ul devine din ce în ce mai conectat și utilizatorii intră mereu în următoarea aplicație mare. Puteți recruta alte mii de membri dedicați în aplicația dvs. atunci când vizitatorii dvs. nu au nevoie să înregistreze un cont complet nou și pot, în schimb, să se înregistreze direct prin Twitter sau Facebook.

Resurse Q & A

Experiența cea mai benefică între dezvoltatori este de a pune întrebări și de a învăța noi tehnici. Comunitatea dezvoltatorilor este întotdeauna atât de utilă pentru noii veniți și este dispusă să ofere experiența lor în multe situații. Dacă aveți probleme sau întrebări specifice despre un proiect, căutați prin intermediul Google un forum pentru dezvoltatori de site-uri similare.

Eu personal trebuie să vă recomand să vă înscrieți în comunitatea Stack Exchange dacă nu sunteți deja membru. Aceasta include site-uri web uimitoare cum ar fi Stack Overflow și Super User, unde puteți obține ajutor de programare pentru orice. Membrii comunității au cunoștințe în toate limbile web majore, inclusiv jQuery și clasele PHP mai mici.

Un truc pe care l-am învățat este să căutăm prin Google și să vedem dacă problema dvs. a fost deja rezolvată. Introduceți câteva cuvinte cheie în căutarea Google și adăugați sufixul site-ul: stackoverflow.com. Toate rezultatele de căutare returnate vor fi întrebări din arhivele Stack Overflow - dacă aveți noroc, puteți găsi exact soluția problemei curente.

Testarea vitezei online a paginii

Acest nou instrument pus de Google Developers a fost de fapt foarte impresionant. Aplicația Speed Page Online pentru aplicații va analiza conținutul site-ului dvs. web și va genera un raport de analiză privind vitezele dvs. Acestea includ soluții posibile pentru reducerea duratelor de încărcare și menținerea vizitatorilor pe site mai mult timp.

De asemenea, vă poate ajuta să determinați problemele cu rate de respingere și conversii mai mici. Google Analytics este o necesitate pentru orice site web, dar consider că Page Speed atinge un nivel mai ridicat de analiză.

Raportul de ieșire este clasificat de la o prioritate înaltă la un nivel scăzut și adesea include multe elemente diferite. Dacă înțelegeți setările LAMP și lucrați pe serverele Apache, atunci puteți lua în considerare și modulul mod_pagespeed. Acesta efectuează automat multe din aceste optimizări pe site-ul dvs. web pentru a reduce timpul de încărcare și a cache-ul de date web importante (imagini, pictograme, scripturi).

Cel mai bun software pentru dezvoltatori

Între cele două sisteme de operare cele mai populare, puteți găsi zeci de programe. De la software-ul grafic la editorii de cod sursă și IDE-urile, există multe resurse pentru dezvoltatorii web de a alege. Dar dacă căutați sugestii populare, vă recomandăm următoarele titluri.

Mac OS X

Panic este o companie software care a creat Coda - de departe cea mai bună aplicație de dezvoltare web pentru Mac. Aveți acces la un editor de cod sursă, un terminal și un client FTP unde puteți efectua modificări direct la fișierele serverului. Coda suportă în plus o listă lungă de evidențiere a sintaxelor pentru limbi precum HTML, XML, CSS, JavaScript, PHP, SQL și multe altele.

Dacă totuși aveți nevoie de o soluție gratuită, ar trebui să verificați Komodo Edit. Software-ul este dezvoltat pentru Windows și Mac, open source, și complet gratuit pentru descărcare. Acesta include tot sprijinul pentru evidențierea sintaxelor și o mulțime de caracteristici similare cu cele ale lui Coda (din păcate, fără FTP). TextWrangler este o altă soluție gratuită pe care doriți să o încercați, de asemenea, doar un simplu editor de text.

Pentru o aplicație FTP gratuită, verificați Cyberduck pe Mac App Store. Deși personal prefer o alternativă plătită, cum ar fi Yummy FTP sau Transmit.

Microsoft Windows

Suita de software Adobe vine întotdeauna în minte atunci când vă gândiți la proiectarea și dezvoltarea web. Utilizatorii Windows au multe alternative la Dreamweaver, iar multe dintre ele sunt gratuite.

Notepad ++ este un exemplu excelent al unor programe open source Win32. Proiectul este încă în curs de dezvoltare activă și actualizează frecvent actualizările (aproape lunar). Îmi place interfața tabelă și suportul pentru multe pluginuri suplimentare. După cum am menționat mai sus, Komodo Edit este de asemenea oferit pentru Windows XP / Vista / 7, astfel încât să puteți încerca acest lucru ca o alternativă.

Dezvoltatorii web pe Windows nu au nici un client FTP. Filezilla este probabil cea mai populară alternativă gratuită. Pentru alternative, verificați lista noastră gratuită de clienți FTP împreună cu instrumente similare.

Alte resurse de ajutor utile

100 de instrumente esențiale de dezvoltare web
Best Of 2011: Cele mai bune plug-in-uri jQuery utile și Tutoriale
Ruby on Rails Tutoriale pentru incepatori de dezvoltare web
7 Tendințe extinse de dezvoltare web pentru 2011

Concluzie

Până în prezent primul trimestru al anului 2012 a început cu un bang! Am văzut deja un conținut extraordinar care revarsă designeri și dezvoltatori web din întreaga lume. Profesioniștii care construiesc pentru web au la dispoziție atât de multe instrumente, comparativ cu 1-2 ani în urmă.

Sper că această vastă compilație de instrumente și resurse vă va impulsiona metodologia pentru o dezvoltare mai bună. Îmi place să lucrez cu dezvoltatorii web și să învăț tot timpul despre proiecte noi. Cu toate acestea, există atât de mult spațiu pentru noi resurse pe care le putem include, așa că trebuie să fi ratat câteva pietre. Dacă aveți idei sau sugestii pentru resursele de dezvoltatori web similare, anunțați-ne în zona de discuții post.