¿Cómo empiezo con HTML5? [cerrado]

42

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

daniel.sedlacek
fuente
Definitivamente sugeriría buscar diveintohtml5 Pero también revise html5rocks htm5rocks y este podría ser desconocido por muchos, pero Facebook está presionando mucho HTML5:
consulte
Haz lo ágil. <html>Hi</html>te ayuda a comenzar porque no necesitas el DOCTYPE. Repetir.
Michael Durrant

Respuestas:

42

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/

Gregg B
fuente
También recomendaría que aprendas JavaScript y el libro que recomendaría para eso es JavaScript: la guía definitiva Por David Flanagan, después de eso jQuery es increíble. En cuanto a un editor, Aptana y DreamWeaver en mi opinión son horribles. Yo recomendaría usar Emacs.
Después de la guía definitiva, debería leer JavaScript: The Good Parts , de Crockford.
kzh
El libro HTML5 mencionado se puede leer de forma gratuita, en su página de inicio: html5forwebdesigners.com
usuario16764
52

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

bobince
fuente
1
Entiendo que lo que a menudo se etiqueta como "desarrollo HTML5" es de hecho una mezcla de HTML, CSS, JS y más ... sin embargo, no creo que se puedan / 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.
2
+1 "como todos sabemos HTML5 se finalizará en 2022, tres años después de los eventos representados en Blade Runner". - tiny.cc/standards-bloat-and-html5
8
No, los proyectos más grandes no se desarrollarían en el Bloc de notas. Eso sería una locura. El Bloc de notas es un editor de texto horrible. Se desarrollarían en Notepad ++. :-)
bobince 01 de
11
@daniel: Al menos creo que esta es una respuesta útil , no importa si es útil para ti. Él aconseja usar un (buen) editor de texto; También me gusta Notepad ++, aunque generalmente uso Emacs (no se pretende la guerra del editor). Él dice que se limite a las funciones comúnmente compatibles y cree neologismos específicos de HTML 5 / CSS 3 (& Co.) en la parte superior de sus páginas web (en ese momento ya funcionan). HTML 5 no es una cosa completamente nueva; si puede conducir un automóvil, puede conducir un automóvil nuevo y brillante con motor híbrido, aire acondicionado y todas las características nuevas que tiene; sin embargo, sigue siendo un automóvil y puede usarlo para conducir.
55
@daniel: Esta respuesta es fácilmente la más útil aquí, incluso para ti, ya que contiene los consejos que necesitas, y no decirme que no va a impedir que vote.
9

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

Kris Erickson
fuente
+1, eso suena emocionante. Creo que probaré su prueba gratuita de 45 días.
He usado IntelliJ IDEA para el desarrollo de Java y nada lo toca en términos de las características que proporciona. Jetbrains también crea el complemento ReSharper para Visual Studio. Si estaba buscando un IDE puro basado en la web, seguro WebStorm. La refactorización sola vale la pena.
8

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.


fuente
Gracias, si lo hago bien, la compatibilidad del navegador siempre es un problema.
Sí, sin embargo, mejora con los navegadores modernos. IE 6-7 y 8 a una parte son bastante malos en este sentido.
Para probar varias versiones de Internet Explorer, use IETester ( my-debugbar.com/wiki/IETester ) o máquinas virtuales proporcionadas por Microsoft ( go.microsoft.com/fwlink/?LinkId=70868 )
6

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.

Jeff
fuente
interesante ... ¿qué complemento de Eclipse para el desarrollo de JS recomendaría?
Nunca usé uno, pero este enlace puede ser útil. Aptana también está disponible como un programa independiente, creo (una alternativa a Eclipse). Mucha gente lo ha recomendado, pero nunca lo he probado. Podría ser algo que valga la pena analizar. stackoverflow.com/questions/613988/…
Jeff
Solo teniendo en cuenta que Notepad es muy diferente de Notepad ++, tampoco desarrollaría un sitio web ( cualquier sitio web) en Notepad.
De acuerdo, entendí que el comentario significa "editor de texto", no estrictamente "MS Notepad", pero si ese fuera el caso, entonces tiene toda la razón
Jeff
5

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.

Spudley
fuente
77
Honestamente, no creo en las herramientas de conversión, el código será, por decirlo suavemente, subóptimo. Sé que Flash es una gran herramienta si no se abusa de ella y permanecerá con nosotros durante mucho tiempo. Pero prefiero escribir JS y CSS con las herramientas apropiadas :)
1
@daniel-estuvo de acuerdo en que las herramientas de conversión generalmente no son tan buenas, y lo dije. Pero podría ser un buen punto de partida para usted si desea convertir su flash existente. Incluso si luego va y vuelve a trabajar manualmente el código HTML resultante, al menos tendrá algo con qué trabajar.
Spudley el
44
nitpick: Adobe compró Flash (tomado Macromedia) y no lo creó.
Kornel el
4

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.

Adam Heath
fuente
2

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)

Santosh Kumar
fuente
Definir grande. Notepad ni siquiera tiene resaltado de sintaxis, y el mantenimiento puede ser un problema con Notepad ... Al menos elegiría Notepad ++ ... ¡incluso VIM! :)
Utilizo Notepad ++ ahora , sino desde hace mucho tiempo que había acabo de utilizar bloc de notas sencillo. Y por "grande" quiero decir "lo suficientemente grande como para ganar suficiente dinero para pagar mis gastos de vida y tener algo de sobra".