Come posso iniziare con HTML5? [chiuso]

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 etichettato come "sviluppo HTML5" è in realtà una miscela di HTML, CSS, JS e altro, tuttavia non credo che progetti più grandi vengano sviluppati in Notepad. Ecco perché ti sto chiedendo di rivelare i tuoi consigli e suggerimenti sul tuo flusso di lavoro.

Se dovessi iniziare un nuovo progetto HTML5 da zero in questo momento probabilmente farei qualcosa del genere:

Scarica e usa la 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

Dai un'occhiata a Immergiti in HTML5 per vedere la cronologia e l'utilizzo del codice.

Sul mio Mac uso Coda e al lavoro utilizzo Dreamweaver in vista Codice. Non costruiranno la pagina per te, ma il completamento del codice, i suggerimenti e la codifica a colori funzionano bene. Sono sicuro che Aptana e simili offrono grandi funzionalità, ma ho sempre trovato più semplice essere migliore quando si tratta di HTML.

Prendi sicuramente i libri HTML5 e CSS3 da "A Book Apart" (CSS3 uscirà alla fine di questo mese)

E infine - per provare a capire tutto questo, controlla:

Rete degli sviluppatori di Opera - http://dev.opera.com/articles/view/html-5-canvas-the-basics/

Canvas Cheat Sheet - http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

Come disegnare con HTML5 Canvas http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/

HTML5 non è una singola cosa integrata. È una raccolta di estensioni per HTML, alcune delle quali sono ampiamente implementate e possono essere utilizzate in modo sicuro, alcune delle quali nessuno implementa ancora, e molto nel mezzo. Se provi a trattare HTML5 come un'unica piattaforma di sviluppo coerente e "impara tutto", avrai un momento davvero difficile.

Invece quello che devi imparare è il web nel suo insieme: HTML di base, CSS, JavaScript, DOM principale, DOM HTML, il modello di oggetti browser di base. 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 estratte dal lavoro HTML5 ...

Il set di funzionalità del Web è in continua evoluzione e non esiste un unico punto di riferimento. W3Schools (che non ha nulla a che fare con W3C per inciso) ci prova, ma è pieno zeppo di errori. Non fidarti di ciò che dice come vangelo.

Potrebbe essere necessario fare riferimento a HTML4 definitivo , CSS2 . DOM Core e DOM HTML specifiche per essere sicuri. Probabilmente vorrai anche guardare il riferimento DOM di MDC e il riferimento DOM di MSDN per ciò che supporta Firefox e IE. Le specifiche HTML5 contengono anche molte altre cose DOM aggiornate, così come le nuove estensioni HTML, ma è un documento lungo e poco maneggevole, abbastanza difficile da usare anche per gli standard dei documenti standard. Sebbene non sia così grave come l'impenetrabile ECMAScript spec. (Per fortuna probabilmente ne avrai già a conoscenza molto se sei abituato a lavorare con ActionScript.)

Non è necessario un SDK o IDE per sviluppare HTML / CSS / JS. Puoi usare un IDE se vuoi, ma sono abbastanza felice 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 ha un debugger e altri strumenti di sviluppo integrati (ad es. IE8) o prontamente disponibili come estensioni (ad es. Firebug ).

Consiglio vivamente WebStorm , da JetBrains (o uno qualsiasi dei loro prodotti basati su IntelliJ , come PHPStorm, RubyMine, PyCharm poiché supportano tutti HTML). Ottieni CSS, completamento automatico HTML e controllo in tempo reale (durante la digitazione) per verificarne la correttezza. Supporto del refactoring per Javascript (qualcosa che non ho visto altrove) e persino la possibilità di eseguire il debug di JavaScript nell'IDE (se mancano gli strumenti di Firebug o Chrome Developer per te). Ha il supporto del progetto e SVN, Git, Perforce e CVS. E molte altre funzionalità, altamente raccomandato ...

Diversi strumenti preziosi

• FireBug - plugin per sviluppatori per Firefox. Permette il debug di JS, HTML, Stili.
• Barra degli strumenti di sviluppo IE per le versioni precedenti di IE (6,7). Non c'è molto HTML5 lì però. Il nuovo IE ha lo strumento F12.
• Chrome ha i suoi strumenti di sviluppo

Questi strumenti sono principalmente per il debug di Javascript e per capire le cose riguardanti il ​​posizionamento degli elementi e gli stili CSS applicati.

Se stai cercando una raccomandazione IDE, Eclipse è abbastanza buono. Se stai cercando strumenti Javascript, Firebug è perfetto per il debug.

Tuttavia, in realtà non hai bisogno di alcun "strumento". Penso che l'idea che "i progetti più grandi non possano essere / non siano sviluppati in Blocco note" sia, semplicemente, falsa. Uso Notepad ++ per scrivere tutto il mio 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, nonché il completamento automatico. Se vuoi un software che offra molto di più, si prega di essere specifici in quali funzionalità sono importanti per te. (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 ciò non ha nulla a che fare con l'uso o l'apprendimento di HTML5.

Credo che Adobe (i creatori di Flash) stiano effettivamente rilasciando uno strumento di conversione da Flash a HTML5, che può valere la pena di essere esaminato.

http://news.softpedia.com/news/Adobe-Showcases-Flash-to-HTML5-Converter-163709.shtml

In effetti, quindi, Flash diventa uno strumento per lo sviluppo di HTML5.

E a partire da questa settimana, Microsoft ha annunciato che stanno andando in una direzione simile con Silverlight, quindi ora sembra che tutto vada 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 saranno effettivamente rilasciati, ma non ho mai trovato il codice generato di qualità particolarmente buona. Speriamo di non finire con il moderno equivalente di MS Front Page.

Consiglio vivamente di impostare un sistema di compilazione per il tuo codice Javascript e di controllarlo su JSLint ad ogni build. Ho scoperto che questo raccoglie molti errori all'inizio e promuove una buona codifica (gioca con le opzioni se è troppo severo). Guarda il sistema di build di jQuery su GitHub per un buon esempio.

Oltre a quello per l'editing, sono un grande fan di Notepad ++ poiché non ho ancora trovato un IDE che offra funzionalità utili senza un carico eccessivo di inganno e inganno della GUI.

Potresti guardare l'ultimo Dreamweaver, l'editor di codice non è male e hanno una galleria di widget con un numero di widget HTML5 che puoi semplicemente inserire.

Non credo che progetti più grandi possano essere / siano sviluppati in Blocco note

Ti sbaglieresti lì. Sono un utente Notepad di lunga data e penso che sia il modo migliore di procedere. Per il debug, utilizzo gli strumenti per sviluppatori di IE, Firefox FireBug e Chrome's Inspector.

Per quanto riguarda HTML5, in pratica è solo un normale HTML con qualche giocattolo in più. Inoltre, non c'è nulla che ti impedisca di dichiarare un documento HTML5, quindi di usare solo cose che sono nelle versioni precedenti di HTML.

Una cosa che consiglierei di evitare a tutti i costi sono programmi come Dreamweaver. Rendono le cose facili con gli strumenti di progettazione grafica, ma quando vuoi fare le tue cose diventa molto difficile. (Sto guardando gli altri studenti del corso che sto facendo quando dico questo)