¿Cómo empiezo con HTML5? [cerrado]

¿Cuál es el flujo de trabajo recomendado para aprender HTML5? ¿Qué herramientas debo instalar? ¿Qué SDK? ¿Donde empezar? ¿Cómo hacer la prueba? ¿Cómo depurar? ¿Qué leo?

Entiendo que lo que a menudo se denomina "desarrollo HTML5" es de hecho una mezcla de HTML, CSS, JS y más, sin embargo, no creo que se desarrollen proyectos más grandes en el Bloc de notas. Es por eso que le pido que revele sus consejos y trucos sobre su flujo de trabajo.

Si tuviera que comenzar un nuevo proyecto HTML5 desde cero en este momento, probablemente haría algo como esto:

Descargue y use HTML5 Boilerplate . Esto le dará una página nueva con la mayoría de las cosas importantes inicializadas y listas para probar. También incluye algunas características agradables de depuración que deberías usar junto con firebug

Revisa Sumérgete en HTML5 para ver el historial y el uso del código.

En mi Mac uso Coda, y en el trabajo uso Dreamweaver en la vista de Código. No van a construir la página para usted, pero la finalización del código, las sugerencias y la codificación de colores funcionan bien. Estoy seguro de que Aptana y similares ofrecen excelentes funciones, pero siempre he encontrado que lo más simple es mejor cuando se trata de html.

Recoja definitivamente los libros HTML5 y CSS3 de "A Book Apart" (CSS3 saldrá a finales de este mes)

Y finalmente, para tratar de resolver todo esto, echa un vistazo:

Red de desarrolladores de Opera - http://dev.opera.com/articles/view/html-5-canvas-the-basics/

Hoja de trucos de lienzo: http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

Cómo dibujar con HTML5 Canvas http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/

HTML5 no es una sola cosa integrada. Es una colección de extensiones de HTML, algunas de las cuales están ampliamente implementadas y se pueden usar de manera segura, algunas de las cuales nadie implementa aún, y muchas más entre medio. Si intenta tratar HTML5 como una plataforma de desarrollo única coherente y 'aprenderlo todo', tendrá un momento realmente difícil.

En cambio, lo que necesita aprender es la web en su conjunto: HTML básico, CSS, JavaScript, Core DOM, HTML DOM, el modelo básico de objetos del navegador. Luego, puede agregar características de la Nueva Web como y donde las necesite, y el soporte del navegador permite: extensiones HTML5, propiedades CSS3, dibujo de lienzo, sockets web, las otras extensiones DOM y BOM derivadas del trabajo HTML5 ...

El conjunto de características de la web está en constante evolución y no hay un solo punto de referencia. W3Schools (que no tiene nada que ver con W3C por cierto) intenta, pero está lleno de errores. No confíes en lo que dice como evangelio.

Es posible que deba consultar el HTML4 definitivo , CSS2 . DOM Core y DOM HTML especificaciones para asegurarse. También es probable que desee ver en referencia DOM del MDC y la referencia DOM de MSDN por lo que el apoyo de Firefox e IE. La especificación HTML5 también contiene muchas cosas DOM más actualizadas, así como las nuevas extensiones HTML, pero es un documento largo y difícil de manejar, bastante difícil de usar incluso para los estándares de los documentos estándar. Aunque no es tan malo como la impenetrable especificación ECMAScript . (Afortunadamente, probablemente ya esté familiarizado con mucho de eso si está acostumbrado a trabajar con ActionScript).

No necesita un SDK o IDE para desarrollar HTML / CSS / JS. Puede usar un IDE si lo desea, pero estoy muy contento de hacer todo en mi editor de texto favorito. No hay que preocuparse por los pasos de compilación / compilación, solo guarde su archivo y presione recargar, trabajo hecho. La mayoría de los navegadores web modernos tienen un depurador y otras herramientas de desarrollo integradas (por ejemplo, IE8) o fácilmente disponibles como extensiones (por ejemplo, Firebug ).

Recomiendo encarecidamente WebStorm , de JetBrains (o cualquiera de sus productos basados ​​en IntelliJ , como PHPStorm, RubyMine, PyCharm, ya que todos admiten HTML). Obtiene CSS, HTML autocompletado y verificación en vivo (mientras escribe) de la corrección. Refactorización de soporte para Javascript (algo que no he visto en ningún otro lugar), e incluso la capacidad de depurar Javascript en el IDE (si Firebug o las herramientas para desarrolladores de Chrome faltan para usted). Tiene soporte para proyectos, así como soporte SVN, Git, Perforce y CVS. Y muchas otras características, muy recomendables ...

Varias herramientas invaluables

• FireBug: complemento de desarrollador para Firefox. Permite depurar JS, HTML, Estilos.
• Barra de herramientas de IE Developer para versiones anteriores de IE (6,7). Sin embargo, no hay mucho HTML5. El nuevo IE tiene la herramienta F12.
• Chrome tiene sus herramientas de desarrollador

Esas herramientas son principalmente para la depuración de Javascript y para resolver cosas relacionadas con el posicionamiento de elementos y los estilos CSS aplicados.

Si está buscando una recomendación IDE, Eclipse es bastante bueno. Si está buscando herramientas Javascript, Firebug es ideal para la depuración.

Sin embargo, realmente no necesita ninguna "herramienta". Creo que la noción de que "los proyectos más grandes no pueden / no se desarrollan en el Bloc de notas" es, simplemente, falso. Uso Notepad ++ para escribir todo mi HTML / CSS / Javascript y creo que este es un enfoque muy común, incluso para diseñadores web profesionales. Notepad ++ tiene resaltado de sintaxis para HTML, CSS y Javascript, así como la finalización automática. Si desea un software que ofrezca más que eso, sea específico en qué características son importantes para usted. (Por cierto, si eres un usuario de Mac, prueba BBEdit).

Los sitios más grandes a menudo se escriben con marcos como Django o Ruby on Rails, pero eso realmente no tiene nada que ver con el uso o el aprendizaje de HTML5.

Creo que Adobe (los creadores de Flash) en realidad están en el proceso de lanzar una herramienta de conversión de Flash a HTML5, que puede valer la pena.

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

Efectivamente, Flash se convierte en una herramienta para desarrollar HTML5.

Y a partir de esta semana, Microsoft ha anunciado que van en una dirección similar con Silverlight, por lo que parece que todo se está volviendo HTML5 ahora.

La única pregunta que tengo es qué tan bueno será el código HTML5 generado por estas dos herramientas. No sabremos la respuesta hasta que se publiquen, pero nunca he encontrado que el código generado sea de una calidad particularmente buena. Esperemos que no terminemos con el equivalente moderno de MS Front Page.

Recomiendo encarecidamente configurar un sistema de compilación para su código Javascript y hacer que verifique con JSLint cada compilación. He descubierto que esto detecta muchos errores al principio y promueve una buena codificación (juegue con las opciones si es demasiado estricto). Mira el sistema de compilación de jQuery en GitHub para un buen ejemplo.

Aparte de eso para la edición, soy un gran admirador de Notepad ++ ya que todavía tengo que encontrar un IDE que proporcione características útiles sin una carga completa de distorsiones y trucos de GUI.

Sin embargo, podría ver el último Dreamweaver, el editor de código no es malo y tienen una galería de widgets con varios widgets HTML5 que puede colocar.

No creo que se puedan / se desarrollen proyectos más grandes en el Bloc de notas

Te equivocarías allí. Soy un usuario de Notepad desde hace mucho tiempo, y creo que es la mejor manera de hacerlo. Para la depuración, utilizo las herramientas de desarrollador de IE, FireBug de Firefox y el Inspector de Chrome.

En lo que respecta a HTML5, es básicamente HTML normal con algunos juguetes adicionales. Además, no hay nada que le impida declarar un documento HTML5, y luego solo usar cosas que están en versiones anteriores de HTML.

Una cosa que recomendaría evitar a toda costa son programas como Dreamweaver. Hacen que las cosas se vean fáciles con herramientas de diseño gráfico, pero cuando quieres hacer tus propias cosas se vuelve muy difícil. (Estoy mirando a los otros estudiantes en el curso que estoy haciendo cuando digo esto)