Qual è il flusso di lavoro consigliato per imparare HTML5? Quali strumenti devo installare? Quale SDK? Dove iniziare? Come testare? Come eseguire il debug? Cosa leggo?
Capisco che ciò che viene spesso definito "sviluppo HTML5" sia in realtà una combinazione di HTML, CSS, JS e altro, tuttavia non credo che i progetti più grandi vengano sviluppati in Blocco note. Questo è il motivo per cui ti chiedo di rivelare i tuoi suggerimenti e trucchi sul tuo flusso di lavoro.
Se dovessi iniziare da zero un nuovo progetto HTML5, probabilmente farei qualcosa del genere:
Scarica e utilizza HTML5 Boilerplate . Questo ti darà una nuova pagina con la maggior parte delle cose importanti inizializzate e pronte per il test. Include anche alcune funzioni di debug che dovresti usare insieme a firebug
Guarda Immergiti in HTML5 per vedere la cronologia e l'utilizzo del codice.
Sul mio Mac uso Coda, e al lavoro utilizzo Dreamweaver nella vista Codice. Non costruiranno la pagina per te, ma il completamento del codice, l'allerta e la codifica a colori funzionano bene. Sono sicuro che Aptana e simili offrono grandi funzioni, ma ho sempre trovato più semplice essere migliore quando si tratta di html.
Sicuramente raccogli i HTML5 e CSS3 book s di "A Book Apart" (i CSS3 usciranno più tardi questo mese)
E infine - per cercare di capire tutto questo controlla:
Rete per sviluppatori di Opera - link
Foglio Cheat Sheet - link
Come disegnare con HTML5 Canvas link
HTML5 non è una singola cosa integrata. Si tratta di una raccolta di estensioni all'HTML, alcune delle quali sono ampiamente implementate e possono essere utilizzate in sicurezza, alcune delle quali non implementano ancora nessuno, e molto nel mezzo. Se cerchi di considerare HTML5 come una piattaforma di sviluppo singola coerente e "impara tutto", avrai un momento davvero difficile.
Invece quello che devi imparare è il web nel suo insieme: HTML di base, CSS, JavaScript, Core DOM, HTML DOM, il modello di base del browser. Quindi puoi aggiungere funzionalità del Nuovo Web come e dove ti servono, e il supporto del browser consente: estensioni HTML5, proprietà CSS3, disegno su tela, websocket, le altre estensioni DOM e BOM derivate dal lavoro HTML5 ...
Il set di funzionalità del Web è in continua evoluzione e non esiste un unico punto di riferimento. W3Schools (che è niente da fare con W3C per inciso) prova, ma è pieno zeppo di errori. Non fidarti di ciò che dice come vangelo.
Potrebbe essere necessario fare riferimento al HTML4 , CSS2 . DOM Core e DOM HTML specifiche per essere sicuro. Probabilmente vorrai anche consultare il riferimento DOM di MDC e Riferimento DOMMSMS per ciò che supporto per Firefox e IE. La specifica HTML5 contiene un sacco di roba DOM più aggiornata, oltre al nuovo Estensioni HTML, ma è un documento lungo e ingombrante, abbastanza difficile da usare anche per gli standard dei documenti standard. Anche se non così male come l'impenetrabile ECMAScript specifica. (Fortunatamente probabilmente ne avrai già una buona conoscenza se sei abituato a lavorare con ActionScript.)
Non hai bisogno di un SDK o IDE per sviluppare HTML / CSS / JS. Puoi usare un IDE se vuoi, ma sono abbastanza contento di fare tutto nel mio editor di testo preferito. Non ci sono passaggi di compilazione / compilazione di cui preoccuparsi, basta salvare il file e premere ricarica, lavoro fatto. La maggior parte dei browser Web moderni dispone di un debugger e di altri strumenti di sviluppo incorporati (ad esempio IE8) o prontamente disponibili come estensioni (ad esempio Firebug ).
Consiglio vivamente WebStorm , da JetBrains (o da uno qualsiasi dei loro IntelliJ prodotti basati, come PHPStorm, RubyMine, PyCharm in quanto supportano HTML). Ottieni CSS, completamento automatico HTML e live (mentre scrivi) per verificare la correttezza. Supporto per refactoring per Javascript (qualcosa che non ho visto da nessun'altra parte) e persino la possibilità di eseguire il debug di Javascript nell'IDE (se Firebug o gli strumenti di sviluppo di Chrome mancano per te). Ha il supporto del progetto e supporto SVN, Git, Perforce e CVS. E una tonnellata di altre funzionalità, altamente raccomandato ...
Diversi strumenti inestimabili
Questi strumenti sono principalmente per il debug di Javascript e per capire cosa riguarda il posizionamento degli elementi e gli stili CSS applicati.
Se stai cercando una raccomandazione IDE, Eclipse è abbastanza buono. Se stai cercando strumenti Javascript, Firebug è ottimo per il debug.
Tuttavia, non hai davvero bisogno di "strumenti". Penso che la nozione secondo cui "i progetti più grandi non possono essere / non sono sviluppati nel Blocco note" è, molto semplicemente, falsa. Uso Notepad ++ per scrivere tutto il mio codice HTML / CSS / Javascript e penso che questo sia un approccio molto comune, anche per i web designer professionisti. Notepad ++ ha l'evidenziazione della sintassi per HTML, CSS e Javascript, oltre al completamento automatico. Se si desidera un software che offre di più, si prega di essere specifici in quali caratteristiche sono importanti per voi. (A proposito, se sei un utente mac, prova BBEdit).
I siti più grandi sono spesso scritti con framework come Django o Ruby on Rails, ma questo in realtà non ha nulla a che fare con l'utilizzo o l'apprendimento di HTML5.
Credo che Adobe (i creatori di Flash) stiano attualmente rilasciando uno strumento di conversione da Flash a HTML5, che potrebbe valerne la pena esaminare.
Di conseguenza, Flash diventa uno strumento per lo sviluppo di HTML5.
E da questa settimana, Microsoft ha annunciato che stanno andando in una direzione simile con Silverlight, quindi sembra che adesso tutto stia andando in HTML5.
L'unica domanda che ho è quanto sarà buono il codice HTML5 generato da questi due strumenti? Non sapremo la risposta fino a quando non verranno effettivamente rilasciati, ma non ho mai trovato il codice generato di qualità particolarmente buona. Speriamo di non finire con l'equivalente moderno di MS Front Page.
Raccomando vivamente di configurare un sistema di compilazione per il codice Javascript e di controllarlo con JSLint ogni build. Ho scoperto che questo raccoglie molti errori all'inizio e promuove una buona codifica (gioca con le opzioni se è troppo severa). Guarda il sistema di costruzione di jQuery su GitHub per un buon esempio.
Oltre a quello per il montaggio, sono un grande fan di Notepad ++ perché non ho ancora trovato un IDE che fornisca funzionalità utili senza un intero carico di complicazioni GUI e ingombranti.
Potresti comunque guardare l'ultimo Dreamweaver, l'editor di codice non è male e hanno una galleria di widget con un numero di HTML5 widget puoi semplicemente inserire.
I don't believe that bigger projects can be/are developed in Notepad
Ti sbaglieresti lì. Sono un utente Notepad di lunga data e penso che sia il modo migliore di andare. Per il debug, utilizzo gli strumenti per sviluppatori di IE, FireBug di Firefox e Chrome's Inspector.
Per quanto riguarda HTML5, è fondamentalmente solo HTML normale con alcuni giocattoli extra. Inoltre, non c'è nulla che ti impedisca di dichiarare un documento HTML5, quindi utilizzare solo elementi che sono in versioni precedenti di HTML.
Una cosa che consiglierei di evitare a tutti i costi sono programmi come Dreamweaver. Rendono le cose semplici con gli strumenti di progettazione grafica, ma quando vuoi fare le tue cose diventa molto difficile. (Sto guardando gli altri studenti sul corso che sto facendo quando dico questo)
Leggi altre domande sui tag html html5 javascript ajax css