Comment démarrer avec HTML5? [fermé]

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

Je comprends que ce qui est souvent appelé "développement HTML5" est en fait un mélange de HTML, CSS, JS, etc., mais je ne crois pas que de plus gros projets soient développés dans Notepad. C'est pourquoi je vous demande de révéler vos trucs et astuces concernant votre flux de travail.

Si je devais commencer un nouveau projet HTML5 à partir de maintenant, je ferais probablement quelque chose comme ceci:

Téléchargez et utilisez le Boilerplate HTML5 . Cela vous donnera une nouvelle page avec la plupart des choses importantes initialisées et prêtes pour le test. Inclut également quelques fonctionnalités de débogage intéressantes que vous devriez utiliser avec firebug

Regardez sur Dive pour HTML5 pour voir l'histoire et de l' utilisation du code.

Sur mon Mac, j'utilise Coda et au travail, j'utilise Dreamweaver en mode Code. Ils ne vont pas créer la page pour vous, mais la complétion de code, les conseils et le codage en couleurs fonctionnent bien. Je suis sûr qu'Aptana et ses semblables offrent d'excellentes fonctionnalités, mais j'ai toujours trouvé plus simple d'être meilleur en ce qui concerne le langage HTML.

Prenez définitivement les livres HTML5 et CSS3 dans "A Book Apart" (CSS3 paraîtra plus tard ce mois-ci)

Et enfin - pour essayer de comprendre tout cela, vérifiez:

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

Aide-mémoire sur le canevas - http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

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

HTML5 n'est pas une chose intégrée unique. Il s'agit d'une collection d'extensions au format HTML, dont certaines sont largement implémentées et peuvent être utilisées en toute sécurité, d'autres encore non implémentées et beaucoup entre les deux. Si vous essayez de traiter HTML5 comme une plate-forme de développement unique cohérente et que vous «apprenez tout», vous passerez un moment vraiment difficile.

Ce que vous devez apprendre, c’est le Web dans son ensemble: HTML de base, CSS, JavaScript, le Core DOM, le HTML DOM, le modèle d’objet de navigateur de base. Vous pouvez ensuite ajouter des fonctionnalités du nouveau site Web au fur et à mesure de vos besoins et la prise en charge du navigateur permet: extensions HTML5, propriétés CSS3, dessin de canevas, websockets, les autres extensions DOM et BOM dérivées du travail HTML5 ...

L'ensemble des fonctionnalités du Web évolue constamment et il n'y a pas un seul point de référence. W3Schools (qui n’a rien à voir avec le W3C) essaie, mais il regorge d’erreurs. Ne faites pas confiance à ce que dit l'évangile.

Vous devrez peut-être vous référer à la version définitive HTML4 , CSS2 . Les spécifications DOM Core et DOM HTML à vérifier. Vous voudrez aussi probablement regarder la référence DOM de MDC et la référence DOM de MSDN pour ce support Firefox et IE. La spécification HTML5 contient également de nombreuses informations plus récentes sur le DOM, ainsi que les nouvelles extensions HTML, mais il s’agit d’un document long et encombrant, assez difficile à utiliser, même aux normes des documents standard. Bien que pas aussi grave que l'impénétrable ECMAScript spec. (Heureusement, vous en connaîtrez probablement déjà beaucoup si vous avez l'habitude de travailler avec ActionScript.)

Vous n'avez pas besoin d'un SDK ou d'un IDE pour développer HTML / CSS / JS. Vous pouvez utiliser un IDE si vous voulez, mais je suis assez content de tout faire dans mon éditeur de texte préféré. Il n’ya pas d’étapes de construction / compilation à faire, il vous suffit de sauvegarder votre fichier et de cliquer sur reload, travail terminé. 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’extensions (par exemple, Firebug ).

Je recommande fortement WebStorm , de JetBrains (ou l'un de leurs produits basés sur IntelliJ , comme PHPStorm, RubyMine, PyCharm, car ils prennent tous en charge le langage HTML). Vous obtenez CSS, l'auto-complétion HTML et en direct (pendant que vous tapez) vérifier l'exactitude. Refactoring du support pour Javascript (quelque chose que je n'ai vu nulle part ailleurs), et même la possibilité de déboguer Javascript dans l'IDE (si les outils de développement pour Chrome ou Chrome sont absents pour vous). Il prend en charge les projets ainsi que SVN, Git, Perforce et CVS. Et une tonne d'autres fonctionnalités, hautement recommandées ...

Plusieurs outils précieux

• FireBug - plugin de développement pour Firefox. Permet de déboguer JS, HTML, Styles.
• Barre d'outils IE Developer pour les anciennes versions d'Internet Explorer (6,7). Pas beaucoup de HTML5 là-bas cependant. Nouvel IE a l'outil F12.
• Chrome a ses outils de développement

Ces outils sont principalement destinés au débogage Javascript et à la compréhension du positionnement des éléments et des styles CSS appliqués.

Si vous recherchez une recommandation IDE, Eclipse est très bon. Si vous recherchez des outils Javascript, Firebug est idéal pour le débogage.

Cependant, vous n'avez vraiment besoin d'aucun "outil". Je pense que la notion que "les plus gros projets ne peuvent pas être / ne sont pas développés dans Notepad" est tout simplement fausse. J'utilise Notepad ++ pour écrire tout mon code HTML / CSS / Javascript et je pense que cette approche est très courante, même pour les concepteurs Web professionnels. Notepad ++ a la coloration syntaxique pour HTML, CSS et Javascript, ainsi que la complétion automatique. Si vous souhaitez un logiciel offrant davantage que cela, précisez quelles fonctionnalités sont importantes pour vous. (BTW, si vous êtes un utilisateur mac, essayez BBEdit).

Les sites plus grands sont souvent écrits avec des frameworks tels que Django ou Ruby on Rails, mais cela n'a vraiment rien à voir avec l'utilisation ou l'apprentissage de HTML5.

Je pense qu'Adobe (les créateurs de Flash) est en train de publier un outil de conversion de Flash en HTML5, qui peut valoir la peine d'être examiné.

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

Effectivement, Flash devient un outil de développement HTML5.

Et à compter de cette semaine, Microsoft a annoncé qu’il allait dans la même direction avec Silverlight. Il semble donc que tout se passe maintenant au format HTML5.

La seule question que je me pose est la qualité du code HTML5 généré par ces deux outils. Nous ne connaîtrons pas la réponse à cette question avant leur publication, mais je n'ai jamais trouvé que le code généré était d'une qualité particulièrement bonne. Espérons que nous ne finirons pas avec l'équivalent moderne de MS Front Page.

Je recommanderais fortement de mettre en place un système de compilation pour votre code Javascript et de le vérifier par rapport à JSLint à chaque compilation. J'ai trouvé que cela ramassait beaucoup d'erreurs au début et favorisait un bon codage (jouez avec les options si c'est trop strict). Regardez le système de compilation de jQuery sur GitHub pour un bon exemple.

Autre que celui de l'édition, je suis un grand fan de Notepad ++, car je n'ai pas encore trouvé d'EDI offrant des fonctionnalités utiles, sans beaucoup de tracasseries et de ruses graphiques.

Vous pouvez toutefois consulter la dernière version de Dreamweaver, l'éditeur de code n'est pas mauvais et ils ont une galerie de widgets avec un certain nombre de widgets HTML5 que vous pouvez simplement visiter.

Je ne crois pas que de plus gros projets puissent être / sont développés dans le Bloc-notes

Vous auriez tort là-bas. Je suis un utilisateur de Notepad depuis longtemps et je pense que c'est la meilleure façon de faire. Pour le débogage, j'utilise les outils de développement d'Internet Explorer, FireBug de Firefox et Chrome Inspector.

En ce qui concerne HTML5, il s’agit essentiellement de HTML normal avec quelques jouets supplémentaires. En outre, rien ne vous empêche de déclarer un document HTML5, utilisez uniquement des éléments des versions antérieures de HTML.

Une chose que je recommanderais d'éviter à tout prix sont les programmes comme Dreamweaver. Les outils de conception graphique facilitent la tâche, mais deviennent très difficiles lorsque vous voulez créer vos propres tâches. (Je regarde les autres étudiants du cours que je fais quand je dis cela)