Como inicio o HTML5? [fechadas]

42

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.

daniel.sedlacek
fonte
Definitivamente, sugiro que investigue o diveintohtml5. Mas também confira html5rocks htm5rocks e este pode ser desconhecido por muitos, mas o Facebook está empurrando muito HTML5: verifique a página html5 aqui facebook.com/html5
VJth
Faça a coisa ágil. <html>Hi</html>inicia porque você não precisa do DOCTYPE. Repetir.
Michael Durrant

Respostas:

42

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/

Gregg B
fonte
Eu também recomendaria que você aprendesse JavaScript e o livro que eu recomendaria para isso é JavaScript: o guia definitivo Por David Flanagan, Depois disso, o jQuery é incrível. Quanto a um editor, Aptana e DreamWeaver, na minha opinião, são horríveis. Eu recomendaria usar o Emacs.
Após o guia definitivo, você deve ler JavaScript: The Good Parts , de Crockford.
kzh 23/05
O livro HTML5 mencionado pode ser lido gratuitamente, em sua página inicial: html5forwebdesigners.com
user16764
52

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

bobince
fonte
1
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 possam ser / sejam desenvolvidos no Bloco de Notas. É por isso que estou pedindo que você revele suas dicas e truques sobre seu fluxo de trabalho.
2
+1 "como todos sabemos que o HTML5 será finalizado em 2022, três anos após os eventos descritos em Blade Runner". - tiny.cc/standards-bloat-and-html5
8
Não, projetos maiores não seriam desenvolvidos no bloco de notas. Isso seria insano. O bloco de notas é um editor de texto horrível. Eles seriam desenvolvidos no Notepad ++. :-)
bobince
11
@daniel: Pelo menos eu acho que é uma resposta útil , não importa se é útil para você. Ele aconselha o uso de um (bom) editor de texto; Eu também gosto do Notepad ++, embora eu costumo usar o Emacs (sem intenção de guerra de editores). Ele diz que se apega aos recursos comumente suportados e cria neologismos específicos do HTML 5 / CSS 3 (& Co.) nas suas páginas da web (naquele momento já em funcionamento). O HTML 5 não é uma coisa totalmente nova; se você pode dirigir um carro, você pode dirigir um carro novo e brilhante com motor híbrido, ar-condicionado e todos os novos recursos que ele possui; no entanto, ainda é um carro e você pode usá-lo para seguir seu caminho.
5
@daniel: Esta resposta é facilmente a mais útil aqui, inclusive para você, pois contém os conselhos de que você precisa, e não me diga que não é isso vai me impedir de votar.
9

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

Kris Erickson
fonte
+1, isso parece emocionante. Acho que vou tentar o teste gratuito de 45 dias.
Eu usei o IntelliJ IDEA para desenvolvimento em Java e nada o afeta em termos dos recursos que ele fornece. O Jetbrains também cria o plug-in ReSharper para o Visual Studio. Se eu estava procurando por um IDE puro baseado na Web, experimentei o WebStorm com certeza. Só a refatoração vale a pena.
8

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.


fonte
Obrigado, se eu acertar, a compatibilidade do navegador é sempre um problema.
Sim, torna-se melhor com os navegadores modernos. IE 6-7 e 8 a uma parte são muito ruins nesse sentido.
Para testar várias versões do Internet Explorer, use o IETester ( my-debugbar.com/wiki/IETester ) ou máquinas virtuais fornecidas pela Microsoft ( go.microsoft.com/fwlink/?LinkId=70868 )
6

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.

Jeff
fonte
interessante ... qual plugin Eclipse para desenvolvimento JS você recomendaria?
Nunca usei um, mas esse link pode ser útil. O Aptana também está disponível como um programa independente, acredito (uma alternativa ao Eclipse). Muitas pessoas recomendaram, mas eu nunca tentei. Pode ser algo que vale a pena investigar. stackoverflow.com/questions/613988/…
Jeff
Apenas tendo em mente que o Notepad é muito diferente do Notepad ++, eu também não desenvolveria um site ( nenhum site) no Notepad.
Acordado, eu levei o comentário para significar "editor de texto" não estritamente "MS Notepad", mas se fosse esse o caso, então você está completamente certo
Jeff
5

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.

Spudley
fonte
7
Honestamente, eu não acredito em ferramentas de conversão, o código será, para dizer o mínimo, subótimo. Eu sei que o Flash é uma ótima ferramenta se não for abusada e permanecerá conosco por muito tempo. Mas eu preferiria escrever JS e CSS com as ferramentas apropriadas :) #
1
@daniel - concordou que as ferramentas de conversão geralmente não são tão boas, e eu disse isso. Mas pode ser um bom ponto de partida para você, se você deseja converter seu flash existente. Mesmo que você refaça manualmente o código HTML resultante, pelo menos terá algo com o que trabalhar.
Spudley
4
nitpick: a Adobe comprou o Flash (adquirido pela Macromedia) e não o criou.
Kornel
4

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.

Adam Heath
fonte
2

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)

Santosh Kumar
fonte
Defina grande. O bloco de notas nem sequer possui destaque de sintaxe, e a manutenção pode ser um problema com o bloco de notas ... eu pelo menos escolheria o Notepad ++ ... até o VIM! :)
Eu uso o Notepad ++ agora , mas por muito tempo eu tinha usado o Notepad simples. E por "grande" quero dizer "grande o suficiente para ganhar dinheiro suficiente para pagar meus custos de vida e ter algum sobra".