¿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.
<html>Hi</html>te ayuda a comenzar porque no necesitas el DOCTYPE. Repetir.Respuestas:
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/
fuente
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 ).
fuente
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 ...
fuente
Varias herramientas invaluables
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.
fuente
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.
fuente
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.
fuente
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.
fuente
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)
fuente