web-dev-qa-db-fra.com

Comment puis-je commencer avec HTML5?

Quel est le flux de travail recommandé pour apprendre HTML5? Quels outils dois-je installer? Quel sdk? Où commencer? Comment tester? Comment déboguer? Qu'est-ce que je lis?

Je comprends que ce qui est souvent étiqueté comme "Développement HTML5", est en fait un mélange de HTML, CSS, JS et plus, mais je ne crois pas que les projets plus importants sont développés dans le bloc-notes. C'est pourquoi je vous demande de révéler vos astuces et vos astuces sur votre flux de travail.

42
daniel.sedlacek

Si je devais démarrer un nouveau projet HTML5 à partir de zéro, je ferais probablement quelque chose comme ça:

Téléchargez et utilisez le HTML5 Boileret . Cela vous donnera une nouvelle page avec la plupart des choses importantes initialisées et prêtes à être testées. Comprend également de bonnes fonctionnalités de débogage que vous devez utiliser avec Firebug

Regardez le dessus plongez dans HTML5 pour voir l'historique et l'utilisation du code.

Sur mon Mac, j'utilise Coda et au travail que j'utilise Dreamweaver dans la vue Code. Ils ne vont pas construire la page pour vous, mais la fin des codes, l'allusion et le codage de couleur bien fonctionnent bien. Je suis sûr qu'Aptana etc. offrent d'excellentes fonctionnalités, mais j'ai toujours trouvé plus simple d'être meilleur en matière de HTML.

Définalement ramasser le HTML5 et livre CSS S de "Un livre séparé" (CSS3 sort plus tard ce mois-ci)

Et enfin - essayer de déterminer ce tout, vérifiez:

Réseau de développeurs d'opéra - http://dev.opera.com/articles/view/html-5-canvas-the-basics/

Tape de triche en toile - http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

Comment dessiner avec la toile HTML5 http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/

42
Gregg B

HTML5 n'est pas une seule chose intégrée. C'est une collection d'extensions sur HTML, dont certaines sont largement implémentées et peuvent être utilisées en toute sécurité, certaines desquelles aucun instrument de non-un, et un lot entier intermédiaire. Si vous essayez de traiter HTML5 comme une plate-forme de développement unique cohérente et "apprendre tout", vous aurez une période très difficile.

Au lieu de cela, c'est le Web dans son ensemble: HTML de base, CSS, JavaScript, Core DOM, HTML DOM, le modèle d'objet de base du navigateur. Ensuite, vous pouvez ajouter des fonctionnalités du nouveau Web comme et l'endroit où vous en avez besoin, et la prise en charge du navigateur permet: Extensions HTML5, propriétés CSS3, dessin en toile, Webockets, autres extensions DOM et BOM Spun Off du travail HTML5 ...

L'ensemble de fonctionnalités de la bande évolue constamment et il n'y a pas un seul point de référence. W3schools (qui est rien à faire avec le W3C accessoirement) essaie, mais il est rempli d'erreurs. Ne faites pas confiance à ce que cela dit comme évangile.

Vous devrez peut-être vous référer à la définitive html4 , CSS2 . DOM Core et DOM HTML Spécifications pour vous assurer. Vous voudrez probablement probablement regarder référence DOM de MDC et référence DOM de MSDN Pour ce que Firefox et IE support. The SPECT HTML5 contient également beaucoup d'autres produits DOM à jour, ainsi que les nouvelles extensions HTML, mais c'est un document long et manidifié, assez difficile à utiliser même par le Normes de documents de normalisation. Bien que pas aussi mauvais que l'impénétrable ECMAScript Spec. (Heureusement, vous serez probablement familiarisé avec beaucoup de cela déjà si vous êtes habitué à travailler avec ActionScript.)

Vous n'avez pas besoin d'un SDK ou IDE _ pour développer HTML/CSS/JS. Vous pouvez utiliser un IDE si vous le souhaitez, mais je suis assez heureux de tout faire dans mon éditeur de texte préféré. Il n'y a pas de pas de construction/compile à vous soucier de vous soucier de sauvegarder votre fichier et de frapper Recharge, travail effectué. La plupart des navigateurs Web modernes ont un débogueur et d'autres outils de développement intégrés (par exemple, IE8) ou facilement disponibles en tant qu'extualités (par exemple Firebug ).

52
bobince

Je recommande vivement Web PASTORT , de Jetbrains (ou des produits basés sur leurs Intellij , comme PhPstorm, RubyMine, Pycharas, car ils supportent tous HTML). Vous obtenez CSS, l'achèvement automatique HTML et Live (pendant votre type) vérifiant l'exactitude. Support refactoring pour JavaScript (quelque chose que je n'ai vu nulle part ailleurs), et même la possibilité de déboguer JavaScript dans le IDE (si Firebug ou le fichier Chrome Developer Les outils font défaut pour vous). Il dispose d'un support de projet ainsi que d'un support SVN, Git, Perforce et CVS. Et une tonne d'autres caractéristiques, fortement recommandé ...

9
Kris Erickson

Si vous recherchez une recommandation IDE, Eclipse est plutôt bonne. Si vous recherchez des outils JavaScript, Firebug est idéal pour le débogage.

Cependant, vous n'avez vraiment pas besoin de "outils". Je pense que la notion que "les grands projets ne peuvent pas être/ne sont pas développés dans le bloc-notes" est tout simplement faux, faux. J'utilise Notepad ++ pour écrire tous mes HTML/CSS/JavaScript et je pense que c'est une approche très courante ... même pour les concepteurs de sites Web professionnels. NotePad ++ a la syntaxe sur la surbrillance pour HTML, CSS et JavaScript, ainsi que l'achèvement automatique. Si vous voulez un logiciel qui offre plus que cela, veuillez être spécifique dans lequel les fonctionnalités sont importantes pour vous. (BTW, si vous êtes un utilisateur Mac, essayez Bbedit).

Les plus gros sites sont souvent écrits avec des cadres tels que Django ou Ruby sur rails, mais cela n'a vraiment rien à voir avec l'utilisation ou l'apprentissage de HTML5.

6
Jeff

Je crois qu'Adobe (les créateurs de Flash) sont en réalité en train de relâcher un flash à l'outil de conversion HTML5, ce qui peut valoir la peine de regarder.

http://news.softpedia.com/news/adobe-showcases-flash-a-html5-converter-163709.shtml

Effectivement, Flash devient un outil pour développer HTML5.

Et à compter de cette semaine, Microsoft a annoncé qu'ils se déroulent dans une direction similaire avec Silverlight, il semble donc que tout se passe html5 maintenant.

La seule question que j'ai est la qualité du code HTML5 généré par ces deux outils? Nous ne saurons pas la réponse à cela jusqu'à ce qu'ils soient réellement libérés, mais je n'ai jamais trouvé de code généré pour être particulièrement bonne qualité. Espérons que nous ne finirons pas avec l'équivalent moderne de la page d'accueil MS.

5
Spudley

Je vous recommande vivement de configurer un système de construction pour votre code JavaScript et de le vérifier - JSlint chaque construction. J'ai trouvé cela relevé de nombreuses erreurs tôt et favorise le bon codage (jouer avec les options si elle est trop stricte). Regardez le système de construction de JQuery sur GitHub pour un bon exemple.

Autre que celui de l'édition, je suis un gros fan de Notepad ++, car je n'ai pas encore trouvé de IDE qui fournit des fonctionnalités utiles sans une charge entière de gonfleur et de guidure.

Vous pouvez examiner le dernier Dreamweaver, l'éditeur de code n'est pas mauvais et ils ont une galerie de widget avec un certain nombre de widgets HTML5 widgets Vous pouvez simplement déposer.

4
Adam Heath

Je ne crois pas que les grands projets peuvent être/sont développés dans le bloc-notes

Vous auriez trompé là-bas. Je suis un utilisateur de longue date de Notepad, et je pense que c'est la meilleure façon d'y aller. Pour déboguer, j'utilise les outils de développement de IE, le Firefox's Firebug et l'inspecteur de Chrome.

En ce qui concerne HTML5, c'est essentiellement juste un HTML régulier avec quelques jouets supplémentaires. En outre, rien ne vous empêche de déclarer un document HTML5, puis utilisez uniquement des objets dans les anciennes versions de HTML.

Une chose que je recommanderais d'éviter à tout prix sont des programmes tels que Dreamweaver. Ils fabriquent des choses faciles avec des outils de conception graphique, mais lorsque vous voulez faire vos propres trucs, cela devient très difficile. (Je regarde les autres étudiants sur le parcours que je fais quand je dis cela

2
Kolink