Risorse per gli sviluppatori Web Una Mega-Compilation

Internet è in costante crescita e ci sono centinaia di migliaia di risorse collettive per i futuri sviluppatori web. Dagli articoli online, tutorial, strumenti, guide, ai video, puoi imparare praticamente tutto sul Web. Non è mai stato così facile saltare online!

Di seguito ho messo insieme una vasta raccolta di risorse per gli sviluppatori Web molto utili. Questi includono materiale per principianti per HTML5 / CSS3 insieme a teorie più complicate per la programmazione di JavaScript e PHP. È possibile che un paio di entusiasti sviluppatori studino queste lingue e costruiscano applicazioni web molto popolari come Twitter o Tumblr. Se sei interessato a risorse utili per i moderni sviluppatori web, allora amerai questa raccolta di risorse affidabili.

Riviste online utili

Il mondo dei blog è esploso con centinaia di migliaia di nuovi scrittori che si sono rivolti a Internet. Molti di questi blog online sono incentrati sulla progettazione e sullo sviluppo web. Puoi trovare molte risorse utili semplicemente sfogliando questi feed RSS.

A seconda del tipo di lingua che codifichi, determinerà il tuo interesse in ognuno di questi blog. Possiamo concentrarci sullo sviluppo web e supponiamo che questo includa tutto il lavoro front-end (HTML5 / CSS3 / JavaScript) e semplici script back-end (PHP / RoR / Python / SQL). Mi sono preso la libertà di costruire una sola lista dei blog di sviluppo più popolari che si concentrano sul codice di front-end e di back-end.

Nettuts+
24 modi
Webmonkey
Smashing Coding
Webitect
Ispeziona elemento
Codice di gatti
Line25 Web Design Blog

Ci sono sicuramente molti altri da considerare. Consiglio di colpire Google in cerca di tutorial e articoli sulla tua lingua preferita. Quindi utilizzando un aggregatore di feed RSS come Google Reader è possibile impostare elenchi di tutti gli articoli più recenti di queste riviste. Questo è un ottimo modo per iniziare la tua giornata di lavoro, o anche per ammazzare un po 'di tempo a sfogliando le esercitazioni.

jQuery Plugin Galore

Sia la libreria di base jQuery che jQuery Mobile hanno guadagnato molta trazione nell'ultimo anno. Queste librerie open source lavorano per progettare un'esperienza front-end ricca di animazioni ricche e funzionalità Ajax facili da implementare, sebbene la libreria mobile non sia riuscita a raggiungere i suoi genitori in termini di plug-in e codice di terze parti.

Allo stesso modo un altro fantastico prodotto bgStretcher può essere usato come uno script di sfondo dinamico. Occorrerà una serie di immagini e alcuni ridimensionamenti delle dimensioni in proporzione alla risoluzione dello schermo dell'utente. Guarda la demo meravigliosa per vedere questo in azione. Entrambi questi plugin sono gratuiti per il download e si comportano come semplici esempi per il fantastico codice di terze parti creato da jQuery. Lavorare con queste risorse ti farà risparmiare un sacco di tempo sul lavoro del progetto in modo da non dover reinventare la ruota.

In generale, consiglio anche di consultare i siti Web Ajax Blender e Dynamic Drive per frammenti di codice / plug-in JavaScript. La biblioteca non è enorme ma cresce costantemente dai nuovi contenuti inviati dagli utenti. I siti include non solo i plugin jQuery ma anche le librerie MooTools e Prototype.

Se finisci a lavorare con la libreria jQuery Mobile, voglio raccomandare un altro strumento jqmPhp. È una classe dinamica di PHP in cui è possibile fare riferimento a funzioni semplici per l'output di linee e righe di codice HTML5 alimentato tramite jQuery Mobile. È onestamente il modo più semplice per prototipare le app mobili dinamiche costruite attorno a una shell PHP. Il blog del sito ha molti esempi di riferimenti da scavare.

Costruire in HTML5 e CSS3

Quando parliamo di sviluppo web front-end, generalmente si tratta di efficienza. Non hai gli stessi problemi nella creazione di un sito Web in HTML / CSS come se dovessi codificare un'applicazione Ruby di back-end. Non esiste una vera gestione della logica o dell'errore in HTML: si tratta principalmente della velocità con cui è possibile ridimensionare correttamente il layout in tutti i browser.

Per prima cosa devo iniziare raccomandando la piastra di collegamento HTML5. Questo è un modello spogliato delle ossa nude che include tutto il “standard” Elementi della pagina Web HTML5 in un unico pacchetto. Questo include un foglio di stile predefinito, JavaScript, una favicon, icone Apple touch e molte altre chicche. È un progetto gratuito al 100% e puoi anche contribuire al loro repo Github. Questa è una risorsa indispensabile per tutti gli sviluppatori prima di iniziare qualsiasi progetto web serio.

Ora se lavori su questo boilerplate hai la possibilità di aggiungere tutto il tuo codice personalizzato. Ma suggerisco di fare il passo successivo e di costruire con un'app come Initializr. Questo genererà un tipico layout del sito Web e ti consentirà anche di personalizzare quali elementi sono inclusi nel tuo pacchetto boilerplate. Sono disponibili il codice di Google Analytics, i file jQuery miniati, .htaccess o web.config, oltre a una dozzina di altre opzioni.

Designer CSS

Ora che abbiamo analizzato un po 'la codifica HTML5 dovremmo prendere in considerazione alcuni dei popolari framework CSS3. Questi sono più aperti dei modelli HTML poiché puoi fare molto di più con i CSS. I progettisti realizzeranno inoltre la difficoltà di creare codice conforme agli standard per tutti i browser Web moderni.

Il Golden Grid System è fantastico come framework per i responsive web design. Questi layout si adatteranno agli schermi mobili e si piegheranno verso l'interno mentre ridimensionate la finestra del browser. Aiuta anche a pianificare la larghezza e la dimensione di ogni area della colonna. Blueprint è un altro pratico framework CSS da verificare. È ottimo per creare siti Web personalizzati e offre una documentazione fantastica.

Per quanto riguarda gli strumenti CSS, tuttavia, CSS3 PIE deve essere tra i miei primi tre preferiti. È una semplice applicazione web che emette il codice corretto per il rendering di effetti CSS3 supportati in Internet Explorer 6-9. È possibile creare gradienti lineari dinamici, angoli arrotondati e ombre di riquadri con impostazioni personalizzabili. Il sito ha esempi di IE se vuoi verificarli anche tu.

Gli sviluppatori cercheranno anche di ridurre le dimensioni dei file per la produzione. Clean CSS è una risorsa in cui è possibile selezionare tra numerose opzioni per semplificare il codice e ridurre le dimensioni del file. Un altro codice Beautifier alternativo non offre tante opzioni ma può essere più facile da usare.

Personalizzare i temi con WordPress

La pubblicazione di WordPress è facilmente il CMS più popolare in questa era. Abbiamo visto probabilmente milioni di nuovi blog e siti web tutti alimentati da questa fantastica soluzione di gestione dei contenuti. E come tale gli sviluppatori di WordPress sono molto richiesti per la creazione di widget personalizzati e temi del sito web.

La nuova versione di Constellation Theme offre agli sviluppatori di WordPress un punto di partenza più semplice rispetto ai modelli predefiniti. Il nuovo tema Twenty Eleven è molto furbo e minimalista, ma non può competere con un intero modello di tema creato su HTML5Boilerplate. Il tema Constellation WP include anche le query multimediali per varie risoluzioni del dispositivo come i tablet iPhone e iPad.

Wonderflux è un altro modello di tema WordPress che non è abbastanza lontano nello sviluppo. E 'stato rilasciato di recente dalla beta nella v1.0 insieme ad alcuni documenti online. Questo tema è un po 'più complicato di Constellation che ti dà più controllo sul layout. Gli sviluppatori hanno incluso ganci, funzioni e filtri PHP personalizzati per rendere il tuo sito WordPress più dinamico.

Gli sviluppatori di WP seriali dovrebbero verificare entrambe le soluzioni per vedere se una delle due potrebbe essere d'aiuto per il futuro lavoro del progetto.

Ricerca di omaggi per sviluppatori Web

Rispetto ai PSD e alla grafica, la community di sviluppo web sembra un po 'carente nelle gallerie freebie. Puoi sempre trovare script fantastici su Github, ma dovrai spesso cercare e testarli da solo.

È difficile trovare siti web che offrono download gratuiti e demo, nonché esempi di script. La mia nuova risorsa preferita è CodeVisually che cataloga strumenti di sviluppo, plug-in, librerie e altri oggetti di sviluppo inviati dall'utente. Il layout è configurato come una galleria in cui ogni pagina include un collegamento al prodotto, uno screenshot dimostrativo e altri dettagli.

La galleria include centinaia di esempi di codice template HTML / HTML5, librerie CSS3 e sicuramente anche molte cose jQuery. Ho anche scoperto che questo è un ottimo sito Web per inviare il proprio codice open source al pubblico. Il tuo nome è legato all'invio, inoltre puoi inserire link al tuo sito web in cui gli utenti possono accedere al codice.

API di applicazioni Web

Una tendenza molto popolare nello sviluppo web moderno sta costruendo le API come app di terze parti. La maggior parte dei principali marchi di social networking include un segmento API e documentazione funzionante direttamente sul proprio sito web. Inoltre ci sono tonnellate di classi wrapper gratuite su Github scritte in tutti i principali linguaggi di programmazione back-end.

Gli sviluppatori dovrebbero sentirsi a proprio agio a lavorare con questi tipi di librerie di codici man mano che aumentano la domanda. Utilizzando il sistema OAuth è possibile creare rapidamente una base utente da molte di queste applicazioni. Ho elencato di seguito solo alcuni riferimenti alle API online più diffuse e alla loro documentazione completa.

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

Approfitta di queste risorse su nuovi progetti quando possibile. Il Web sta diventando sempre più connesso e gli utenti si affollano sempre alla prossima grande app. Puoi reclutare altri migliaia di membri dedicati nella tua app quando i tuoi visitatori non hanno bisogno di registrare un nuovo account e possono invece registrarsi direttamente tramite Twitter o Facebook.

Domande e risposte

L'esperienza più vantaggiosa tra gli sviluppatori è porre domande e apprendere nuove tecniche. La comunità di sviluppatori è sempre così utile ai nuovi arrivati e desiderosa di offrire la propria esperienza in molte situazioni. Se hai qualche difficoltà o domande specifiche su un progetto, cerca su Google un forum degli sviluppatori web correlati.

Personalmente devo raccomandare di unirmi alla community di Stack Exchange se non sei già un membro. Ciò include siti Web sorprendenti come Stack Overflow e Super User in cui è possibile ottenere assistenza di programmazione praticamente su qualsiasi cosa. I membri della comunità sono ben informati in tutti i principali linguaggi web, tra cui jQuery e classi PHP più piccole.

Un trucco ben fatto che ho imparato è cercare in Google e vedere se il tuo problema è già stato risolto. Inserisci alcune parole chiave nella ricerca Google e aggiungi il suffisso sito: stackoverflow.com. Tutti i risultati di ricerca restituiti saranno domande all'interno degli archivi Stack Overflow: se sei fortunato potresti trovare esattamente la soluzione al tuo problema attuale.

Testare la velocità della pagina online

Questo nuovo strumento rilasciato da Google Developers è stato davvero impressionante. L'app Page Speed Online analizzerà il contenuto del tuo sito web e genererà un rapporto di analisi sulle tue velocità. Ciò include possibili soluzioni per ridurre i tempi di caricamento e mantenere i visitatori sul sito più a lungo.

Può anche aiutarti a determinare i problemi con la frequenza di rimbalzo e le conversioni più basse. Google Analytics è un must per qualsiasi sito web, ma ritengo che Page Speed raggiunga solo un livello più alto di analisi.

L'output del report viene classificato in base alla priorità da alta a bassa e spesso include molti articoli diversi. Se comprendi le configurazioni LAMP e lavori sui server Apache, puoi anche prendere in considerazione il modulo mod_pagespeed. Esegue automaticamente molte di queste ottimizzazioni sul tuo sito web per ridurre i tempi di caricamento e memorizzare nella cache importanti dati web (immagini, icone, script).

Il miglior software per sviluppatori

Tra i due sistemi operativi più popolari, puoi trovare decine di programmi. Dal software di grafica agli editor di codice sorgente e IDE, ci sono molte risorse per gli sviluppatori web tra cui scegliere. Ma se stai cercando suggerimenti popolari ti consiglio i seguenti titoli.

Mac OS X

Panic è una società di software che ha creato Coda - di gran lunga la migliore app di sviluppo web per Mac. È possibile accedere a un editor di codice sorgente, terminale e client FTP in cui è possibile apportare modifiche direttamente ai file del server. Coda supporta inoltre una lunga lista di evidenziazione della sintassi per linguaggi come HTML, XML, CSS, JavaScript, PHP, SQL e molti altri.

Se tuttavia hai bisogno di una soluzione gratuita, dovresti dare un'occhiata a Komodo Edit. Il software è sviluppato per Windows e Mac, open source e totalmente gratuito da scaricare. Include lo stesso supporto per l'evidenziazione della sintassi e molte funzionalità simili come Coda (purtroppo non FTP). TextWrangler è un'altra soluzione gratuita che potresti voler provare, anche solo un semplice editor di testo.

Per un'applicazione FTP gratuita controlla Cyberduck sul Mac App Store. Anche se personalmente preferisco un'alternativa a pagamento come Yummy FTP o Transmit.

Microsoft Windows

La suite software Adobe viene sempre in mente quando si pensa alla progettazione e allo sviluppo del web. Gli utenti di Windows hanno molte alternative a Dreamweaver e molti di questi sono totalmente gratuiti.

Notepad ++ è un ottimo esempio di alcuni software Win32 open source. Il progetto è ancora in fase di sviluppo e rilascia frequentemente aggiornamenti (quasi mensilmente). Adoro la loro interfaccia a schede e il supporto per tanti plugin aggiuntivi. Come ho detto sopra, Komodo Edit è disponibile anche per Windows XP / Vista / 7, quindi puoi provare come alternativa.

Gli sviluppatori Web su Windows non sono senza un client FTP. Filezilla è probabilmente l'alternativa gratuita più popolare. Per alternative, consulta la nostra lista di client FTP gratuiti insieme a strumenti simili.

Altre utili risorse di sviluppo

100 strumenti di sviluppo Web essenziali
Best Of 2011: i migliori utili plugin ed esercitazioni jQuery
Esercitazioni Ruby on Rails per principianti di sviluppo Web
7 entusiasmanti tendenze di sviluppo Web per il 2011

Conclusione

Finora il primo trimestre del 2012 è iniziato con un botto! Abbiamo già visto alcuni fantastici contenuti di designer e sviluppatori web da tutto il mondo. I professionisti che costruiscono per il web hanno così tanti strumenti a loro disposizione rispetto a 1-2 anni fa.

Spero che questa enorme raccolta di strumenti e risorse spingerà la tua metodologia per uno sviluppo migliore. Mi piace lavorare con gli sviluppatori web e conoscere continuamente nuovi progetti. Eppure c'è solo così tanto spazio per nuove risorse che possiamo includere, quindi sono destinato ad aver perso alcune gemme. Se hai idee o suggerimenti per risorse relative agli sviluppatori web, faccelo sapere nell'area di post discussione.