Como inicio o HTML5? [fechadas]

Qual é o fluxo de trabalho recomendado para aprender HTML5? Quais ferramentas devo instalar? Qual SDK? Onde começar? Como testar? Como depurar? O que eu leio?

Entendo que o que geralmente é rotulado como "desenvolvimento HTML5" é de fato uma mistura de HTML, CSS, JS e mais, no entanto, não acredito que projetos maiores sejam desenvolvidos no Bloco de Notas. É por isso que estou pedindo que você revele suas dicas e truques sobre seu fluxo de trabalho.

Se eu fosse iniciar um novo projeto HTML5 do zero agora, provavelmente faria algo assim:

Faça o download e use o Boilerplate HTML5 . Isso fornecerá uma página nova com a maioria das coisas importantes inicializadas e prontas para teste. Também inclui alguns recursos interessantes de depuração que você deve usar junto com o firebug

Olhe sobre Mergulhe no HTML5 para ver o histórico e o uso do código.

No meu mac, uso o Coda e, no trabalho, o Dreamweaver no modo de exibição de código. Eles não vão criar a página para você, mas a conclusão do código, dicas e códigos de cores funcionam bem. Tenho certeza de que o Aptana e similares oferecem ótimos recursos, mas sempre achei mais simples ser melhor quando se trata de html.

Definitivamente, pegue os livros em HTML5 e CSS3 de "A Book Apart" (o CSS3 será lançado ainda este mês)

E finalmente - para tentar descobrir tudo isso, confira:

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

Folha de dicas do Canvas - http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

Como desenhar com o HTML5 Canvas http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/

HTML5 não é uma coisa integrada única. É uma coleção de extensões para HTML, algumas das quais são amplamente implementadas e podem ser usadas com segurança, algumas das quais ninguém implementa ainda e muito no meio. Se você tentar tratar o HTML5 como uma plataforma coerente de desenvolvimento único e 'aprender tudo', terá um tempo muito difícil.

Em vez disso, o que você precisa aprender é a web como um todo: HTML básico, CSS, JavaScript, o DOM principal, o DOM HTML, o Modelo básico de objetos do navegador. Em seguida, você pode adicionar recursos da Nova Web como e onde precisar deles, e o suporte ao navegador permite: extensões HTML5, propriedades CSS3, desenho de tela, websockets, as outras extensões DOM e BOM desmembradas do trabalho HTML5 ...

O conjunto de recursos da Web está em constante evolução e não há um único ponto de referência. O W3Schools (que não tem nada a ver com o W3C aliás) tenta, mas está cheio de erros. Não confie no que diz como evangelho.

Pode ser necessário consultar o HTML4 definitivo , CSS2 . DOM Core e DOM HTML especificações para garantir. Você provavelmente também desejará consultar a referência DOM do MDC e a referência DOM do MSDN para saber o que o Firefox e o IE suportam. A especificação do HTML5 também contém muito mais informações atualizadas sobre o DOM, bem como as novas extensões HTML, mas é um documento longo e pesado, bastante difícil de usar, mesmo pelos padrões dos documentos de padrões. Embora não seja tão ruim quanto a especificação impenetrável do ECMAScript . (Felizmente, você provavelmente já estará familiarizado com muito disso, se estiver acostumado a trabalhar com o ActionScript.)

Você não precisa de um SDK ou IDE para desenvolver HTML / CSS / JS. Você pode usar um IDE, se quiser, mas estou muito feliz em fazer tudo no meu editor de texto favorito. Não há etapas de compilação / compilação para se preocupar, basta salvar seu arquivo e clicar em recarregar, o trabalho foi concluído. A maioria dos navegadores modernos possui um depurador e outras ferramentas de desenvolvimento incorporadas (por exemplo, IE8) ou prontamente disponíveis como extensões (por exemplo, Firebug ).

Eu recomendo o WebStorm , do JetBrains (ou qualquer um de seus produtos baseados em IntelliJ , como PHPStorm, RubyMine, PyCharm, pois todos suportam HTML). Você obtém CSS, preenchimento automático de HTML e verifica ao vivo (enquanto digita) a correção. Suporte à refatoração de Javascript (algo que eu não vi em nenhum outro lugar) e até a capacidade de depurar Javascript no IDE (se estiver faltando as ferramentas do Firebug ou do desenvolvedor do Chrome). Possui suporte a projetos, além de suporte a SVN, Git, Perforce e CVS. E uma tonelada de outros recursos, altamente recomendados ...

Várias ferramentas inestimáveis

• FireBug - plugin de desenvolvedor para o Firefox. Permite depurar JS, HTML, Styles.
• Barra de ferramentas do desenvolvedor do IE para versões mais antigas do IE (6,7). Não há muito HTML5 lá. O novo IE possui a ferramenta F12.
• Chrome tem suas ferramentas de desenvolvedor

Essas ferramentas são principalmente para depuração de Javascript e para entender o posicionamento de elementos e estilos CSS aplicados.

Se você está procurando uma recomendação de IDE, o Eclipse é muito bom. Se você procura ferramentas Javascript, o Firebug é ótimo para depuração.

No entanto, você realmente não precisa de nenhuma "ferramenta". Eu acho que a noção de que "projetos maiores não podem ser / não são desenvolvidos no Bloco de Notas" é, simplesmente, falsa. Eu uso o Notepad ++ para escrever todo o meu HTML / CSS / Javascript e acho que essa é uma abordagem muito comum - mesmo para web designers profissionais. O Notepad ++ possui destaque de sintaxe para HTML, CSS e Javascript, além de conclusão automática. Se você deseja um software que ofereça mais do que isso, seja específico em quais recursos são importantes para você. (BTW, se você é um usuário de mac, tente o BBEdit).

Sites maiores costumam ser escritos com estruturas como Django ou Ruby on Rails, mas isso realmente não tem nada a ver com o uso ou a aprendizagem de HTML5.

Acredito que a Adobe (os criadores do Flash) esteja realmente lançando uma ferramenta de conversão de Flash para HTML5, que pode valer a pena.

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

Efetivamente, o Flash se torna uma ferramenta para o desenvolvimento de HTML5.

E a partir desta semana, a Microsoft anunciou que está indo em uma direção semelhante ao Silverlight, então parece que tudo está passando para HTML5 agora.

A única pergunta que tenho é quão bom será o código HTML5 gerado por essas duas ferramentas? Não saberemos a resposta até que eles sejam realmente lançados, mas nunca achei que o código gerado tivesse uma qualidade particularmente boa. Espero que não terminemos com o equivalente moderno do MS Front Page.

Eu recomendo a configuração de um sistema de compilação para o seu código Javascript e a verificação do JSLint a cada compilação. Descobri que isso corrige muitos erros desde o início e promove uma boa codificação (brinque com as opções se for muito rigoroso). Veja o sistema de compilação do jQuery no GitHub para um bom exemplo.

Além disso, para editar, sou um grande fã do Notepad ++, pois ainda tenho que encontrar um IDE que ofereça recursos úteis sem muita carga de inchaço e truques da GUI.

Você pode olhar para o Dreamweaver mais recente, porém, o editor de código não é ruim e eles têm uma galeria de widgets com vários widgets HTML5 nos quais você pode simplesmente entrar.

Não acredito que projetos maiores possam ser / são desenvolvidos no Bloco de Notas

Você estaria errado lá. Eu sou um usuário de longa data do Bloco de Notas e acho que é o melhor caminho a percorrer. Para depuração, eu uso as Ferramentas de desenvolvedor do IE, o FireBug do Firefox e o Inspetor do Chrome.

No que diz respeito ao HTML5, é basicamente apenas HTML comum com alguns brinquedos extras. Além disso, não há nada que o impeça de declarar um documento HTML5, apenas usando itens que estão em versões mais antigas do HTML.

Uma coisa que eu recomendaria evitar a todo custo são os programas como o Dreamweaver. Eles tornam as coisas fáceis com as ferramentas de design gráfico, mas quando você quer fazer suas próprias coisas, fica muito difícil. (Estou olhando para os outros alunos do curso que estou fazendo quando digo isso)