Comment démarrer avec HTML5? [fermé]

42

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.

daniel.sedlacek
la source
Je suggérerais certainement de regarder dans diveintohtml5 mais vérifiez également html5rocks htm5rocks et celui-ci pourrait être inconnu par beaucoup mais Facebook pousse beaucoup de HTML5: Vérifiez leur page html5 ici facebook.com/html5
VJth
Faites la chose agile. <html>Hi</html>vous permet de démarrer car vous n'avez pas besoin de DOCTYPE. Répéter.
Michael Durrant

Réponses:

42

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/

Gregg B
la source
Je vous recommanderais également d'apprendre JavaScript et le livre que je recommanderais à cet effet est JavaScript: le guide de référence Par David Flanagan, Après cela, jQuery est génial. En ce qui concerne un éditeur, Aptana et DreamWeaver à mon avis sont horribles. Je recommanderais d'utiliser Emacs.
Après le guide définitif, vous devriez lire JavaScript: The Good Parts , de Crockford.
dimanche
Le livre HTML5 mentionné peut être lu gratuitement sur sa page d'accueil: html5forwebdesigners.com
user16764
52

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 ).

bosse
la source
1
Je comprends que ce qui est souvent qualifié de "développement HTML5" est en fait un mélange de HTML, CSS, JS, etc., mais je ne pense pas que des projets plus volumineux puissent être / 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.
2
+1 "comme nous le savons tous, le HTML5 sera finalisé en 2022, trois ans après les événements décrits dans Blade Runner." - tiny.cc/standards-bloat-and-html5
8
Non, les plus gros projets ne seraient pas développés dans le Bloc-notes. Ce serait fou. Notepad est un éditeur de texte horrible. Ils seraient développés dans Notepad ++. :-)
bobince
11
@daniel: Au moins, je pense que c'est une réponse utile , peu importe si cela vous est utile. Il conseille en utilisant un (bon) éditeur de texte; J'aime aussi Notepad ++, bien que j'utilise généralement Emacs (aucun éditeur de texte n'a été conçu). Il recommande de s'en tenir aux fonctionnalités couramment prises en charge et de construire des néologismes spécifiques à HTML 5 / CSS 3 (& Co.) au-dessus de vos pages Web (qui fonctionnaient déjà déjà). HTML 5 n'est pas une chose entièrement nouvelle. si vous pouvez conduire une voiture, vous pouvez conduire une nouvelle voiture brillante avec un moteur hybride, la climatisation et toutes les nouvelles fonctionnalités dont elle dispose; Cependant, c'est toujours une voiture et vous pouvez l'utiliser pour conduire votre chemin.
5
@daniel: Cette réponse est facilement la plus utile ici, y compris pour vous car elle contient les conseils dont vous avez besoin, et rien ne me dit que ça ne va pas m'empêcher de voter.
9

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 ...

Kris Erickson
la source
+1, cela semble excitant. Je pense que je vais essayer leur essai gratuit de 45 jours.
J'ai utilisé IntelliJ IDEA pour le développement Java et rien ne le touche en termes de fonctionnalités. Jetbrains crée également le plugin ReSharper pour Visual Studio. Si je cherchais un IDE purement basé sur le Web, j'essayais WebStorm à coup sûr. Le refactoring à lui seul en vaut la peine.
8

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.


la source
Merci, si je comprends bien, la compatibilité du navigateur est toujours un problème.
Oui, cela devient meilleur avec les navigateurs modernes. IE 6-7 et 8 à une partie sont assez mauvais à cet égard.
Pour tester différentes versions d'Internet Explorer, utilisez IETester ( my-debugbar.com/wiki/IETester ) ou des machines virtuelles fournies par Microsoft ( go.microsoft.com/fwlink/?LinkId=70868 )
6

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.

Jeff
la source
intéressant ... quel plugin Eclipse pour le développement JS recommanderiez-vous?
Jamais utilisé un, mais ce lien peut être utile. Aptana est également disponible en tant que programme autonome, à mon avis (une alternative à Eclipse). Beaucoup de gens l'ont recommandé, mais je ne l'ai jamais vraiment essayé. Pourrait être quelque chose d'intéressant à regarder. stackoverflow.com/questions/613988/…
Jeff
N'oubliez pas que Notepad est très différent de Notepad ++, je ne voudrais pas non plus développer un site Web ( n'importe quel site Web) dans Notepad.
D'accord, j'ai pris le commentaire pour signifier "éditeur de texte" pas strictement "MS Notepad", mais si tel était le cas, alors vous avez tout à fait raison
Jeff
5

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.

Spudley
la source
7
Honnêtement, je ne crois pas aux outils de conversion, le code sera, pour le dire gentiment, sous-optimal. Je sais que Flash est un excellent outil s’il n’est pas utilisé de manière abusive et qu’il restera longtemps avec nous. Mais je préférerais écrire JS et CSS avec les outils appropriés :)
1
@daniel-convenu que les outils de conversion ne sont généralement pas très bons, et je l'ai dit autant. Mais cela pourrait être un bon point de départ pour vous si vous voulez convertir votre flash existant. Même si vous retravaillez manuellement le code HTML résultant, vous aurez au moins un moyen de travailler.
Spudley
4
nitpick: Adobe a acheté Flash (repris sur Macromedia) et ne l’a pas créé.
Kornel
4

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.

Adam Heath
la source
2

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)

Santosh Kumar
la source
Définir grand. Notepad n'a même pas la coloration syntaxique, et la maintenance peut être un problème avec Notepad ... Je voudrais au moins opter pour Notepad ++ ... même VIM! :)
J'utilise Notepad ++ maintenant , mais pendant longtemps je n'utilisais que Notepad. Et par «gros», je veux dire «assez gros pour gagner assez d’argent pour payer mes frais de subsistance et en avoir pour épargner».