¿Cuál es el flujo de trabajo recomendado para aprender HTML5? ¿Qué herramientas debo instalar? ¿Qué SDK? ¿Donde empezar? ¿Cómo probar? ¿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 los proyectos más grandes se desarrollen en el Bloc de notas. Por eso 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 la HTML5 Boilerplate . Esto le dará una nueva página con la mayoría de las cosas importantes inicializadas y listas para la prueba. También incluye algunas características de depuración agradables que deberías usar junto con firebug
Revise Sumérjase 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 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 es más simple ser mejor cuando se trata de html.
Defintiely recoge el HTML5 y CSS3 book s de "A Book Apart" (CSS3 se publicará a finales de este mes)
Y, por último, para intentar averiguar todo esto, echa un vistazo:
Opera Developer Network - enlace
Canvas Cheat Sheet - enlace
Cómo dibujar con HTML5 Canvas enlace
HTML5 no es una sola cosa integrada. Es una colección de extensiones a HTML, algunas de las cuales están ampliamente implementadas y se pueden usar de manera segura, algunas de las cuales nadie implementa todavía, y mucho en el medio. Si intentas tratar a HTML5 como una plataforma de desarrollo única y coherente y "aprendes todo", pasarás un momento realmente difícil.
En su lugar, 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 a medida que las necesite, y el soporte del navegador le permite: extensiones HTML5, propiedades CSS3, dibujo de lienzo, websockets, 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 único punto de referencia. W3Schools (que no es nada hacer con el W3C por cierto) lo intenta, pero está lleno de errores. No confíes en lo que dice el evangelio.
Es posible que deba consultar el HTML4 definitivo, CSS2 . DOM Core y DOM HTML para asegurarse. Probablemente también querrá ver referencia de DOM del MDC y Referencia de DOM de MSDN para lo que son compatibles con Firefox e IE. La especificación de HTML5 también contiene muchas más cosas DOM actualizadas, así como el nuevo Extensiones HTML, pero es un documento largo y difícil de manejar, bastante difícil de usar incluso por los estándares de los documentos estándar. Aunque no es tan malo como el impenetrable 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 feliz de hacer todo en mi editor de texto favorito. No hay pasos de compilación / compilación de los que deba preocuparse, simplemente guarde su archivo y presione reload, 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 altamente WebStorm , de JetBrains (o cualquiera de sus Productos basados en IntelliJ , como PHPStorm, RubyMine, PyCharm ya que todos admiten HTML). Obtiene CSS, autocompletado de HTML y verificación en vivo (mientras escribe) para verificar la exactitud. Compatibilidad con refactorización para Javascript (algo que no he visto en ningún otro lugar), e incluso la capacidad de depurar Javascript en el IDE (si le faltan las herramientas Firebug o Chrome Developer para usted). Tiene soporte para proyectos, así como soporte para SVN, Git, Perforce y CVS. Y un montón de otras características, muy recomendables ...
Varias herramientas invaluables
Estas herramientas son principalmente para la depuración de Javascript y para resolver problemas relacionados 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 de Javascript, Firebug es ideal para la depuración.
Sin embargo, realmente no necesitas ninguna "herramienta". Creo que la noción de que "los proyectos más grandes no pueden desarrollarse o no en Notepad" es, simplemente, falsa. Utilizo Notepad ++ para escribir todo mi HTML / CSS / Javascript y creo que este es un enfoque muy común, incluso para los diseñadores web profesionales. Notepad ++ tiene resaltado de sintaxis para HTML, CSS y Javascript, así como finalización automática. Si desea un software que ofrezca más que eso, especifique qué funciones son importantes para usted. (Por cierto, si eres 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 usar o aprender HTML5.
Creo que Adobe (los creadores de Flash) están actualmente en el proceso de lanzar una herramienta de conversión de Flash a HTML5, lo que puede valer la pena analizarlo.
Efectivamente, entonces, 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 a Silverlight, por lo que parece que todo va en 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 a eso hasta que se publiquen, pero nunca he encontrado que el código generado tenga una calidad particularmente buena. Esperemos que no terminemos con el equivalente moderno de MS Front Page.
Recomendaría encarecidamente configurar un sistema de compilación para su código Javascript, y hacer que se verifique contra JSLint cada compilación. Descubrí que esto recoge muchos errores al principio y promueve la buena codificación (juegue con las opciones si es demasiado estricto). Mire el sistema de compilación de jQuery en GitHub para ver un buen ejemplo.
Aparte de eso para la edición, soy un gran fan de Notepad ++ porque todavía tengo que encontrar un IDE que proporcione funciones útiles sin una carga completa de engaños y trucos GUI.
Sin embargo, puedes ver la última versión de Dreamweaver, el editor de código no es malo y tienen una galería de widgets con varios HTML5 widgets solo puedes ingresar.
No creo que los proyectos más grandes se puedan desarrollar en Notepad
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, uso las herramientas de desarrollo de IE, FireBug de Firefox y el Inspector de Chrome.
En lo que respecta a HTML5, es básicamente un HTML normal con algunos juguetes adicionales. Además, no hay nada que le impida declarar un documento HTML5, luego solo usa cosas que están en versiones anteriores de HTML.
Una cosa que recomendaría evitar a toda costa son los programas como Dreamweaver. Hacen que las cosas se vean fáciles con las 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)
Lea otras preguntas en las etiquetas html html5 javascript ajax css