Uma das formas mais bacanas de trabalhar com criação em HTML5 hoje em dia (pelo menos de iniciar projetos menores e utilitários) é usando um serviço de editor online. Neles, você pode editar código, testar a vontade e até salvar na própria ferramenta (ganhando uma URL impronunciável, mas com o seu código salvo "nela"). Aqui apresento algumas ferramentas interessantes para isso:
- CodePen - Editor que oferece edição do HTML, CSS e JavaScript, exibindo o resultado abaixo das áreas de edição. Oferece um plano pago, que permite upload de arquivos, modo colaborativo e modo professor.
- JS Bin - Cinco áreas disponíveis: HTML, CSS, JavaScript, Console e Output. O mais completo nesse aspecto. Ainda não o utilizei de fato.
- jsdo.it - Seria uma excelente ferramenta, não fosse um bug muito inconveniente. Nele, você se cadastra e cria projetos. Um projeto pode referenciar outro projeto, o que é bastante útil quando lidamos com bibliotecas e aplicativos de forma separada. Permite também fazer upload, o que dá condições de fazermos jogos em HTML5, mandando imagens e sons para lá. Ele também faz verificação do código escrito, com um depurador JavaScript rodando no cliente deles. O bug de que falei entra justamente aí. A opção Salvar aparentemente não salva, salva apenas para efeito de teste. Nos meus testes, perdi dois dias de trabalho por confiar nessa opção Salvar...
- jsfiddle - O mais popular. Divide a tela em 4 áreas: HTML, CSS, JavaScript e Result. Poderiam oferecer um modo de atualização automática do "Result", mas é uma excelente ferramenta. O grande diferencial é a disponibilidade de várias versões diferentes para as mesmas bibliotecas.
- Liveweave - Divide a área em 4 como o jsfiddle, mas com a vantagem de atualização em tempo real, também com opção de desativar tal recurso. Considero um dos melhores.
- Reloado - Área de JavaScript e de HTML. O usuário escolhe se quer visualizar o resultado em tempo real, a cada mudança, ou se prefere ficar clicando no botão Render. Dos melhores, na minha opinião.
Bem, agora o principal: um comparativo entre eles (adoro essas tabelas-comparison), considerando as bibliotecas oferecidas para fácil inclusão, por padrão, em cada um:
| ||||||
| 1.2.1 1.1.5 1.0.7 | 1.0.3 | 1.2.1 1.1.1 | 1.0.7 |
| |
|
| 20120123 |
|
|
| |
| latest | 1.0.0 | 1.0 | latest | 0.9.1 | |
| latest 2.3.2 | 3.0.0 2.2.2 |
| latest | latest | |
| 0.4.latest |
| 0.4.1 |
|
| |
|
|
| edge |
|
| |
| 2.0.3 |
|
|
|
| |
|
| 0.4.3 |
|
|
| |
|
|
|
| 0.2 |
| |
| Não-identificada |
|
|
| Não-identificada | |
|
| 2013-02-12 | Não-identificada | latest |
| |
| 3.x |
| 3.0.4 | 3.0 |
| |
latest | latest 1.8.4 1.7.4 | 1.7.3 | 1.9.0 1.8.4 1.7.4 1.6 1.5 nightly | latest | 1.6.0 | |
Dijit |
| latest 1.8.4 1.7.4 |
|
|
|
|
| 1.0.0 |
|
| 1.1.2 |
| |
|
| 0.70 |
|
|
| |
| latest 2.2.0 | 2.2.0 2.1 2.0.1 nightly |
| latest |
| |
| 2.0.8 |
|
|
| 1.2.4 | |
Ext-core |
| 3.1.0 |
|
|
| 3.1.0 |
Ext JS | latest |
| 4.0.2 | 4.2.0 4.1.1 4.1.0 3.4.0 3.1.0 3.0.0 | 4.2.0 |
|
Ext JS all |
|
| 4.0.7 |
|
|
|
|
|
| 1.4.0 1.2.0 0.9 | 1.3.0 |
| |
Font Awesome |
| 4.0.3 |
|
|
|
|
| 5.0.3 |
|
|
|
| |
| 1.0.0 |
|
|
|
| |
| Não-identificada |
|
|
|
| |
|
| 2.2.0 |
|
|
| |
latest | 2.x WIP 2.0.3 1.x WIP 1.10.2 1.9.1 1.8.3 | 2.0.3 1.10.2 1.8.3 | 2.x (edge) 2.0.2 1.x (edge) 1.9.1 1.8.3 1.7.2 1.6.4 1.10.1 | latest | latest WIP 1.7.2 1.6.4 | |
Jquery Easing |
|
| 1.3 |
|
|
|
latest | WIP 1.10.4 1.9.2 | 1.10.3 | 1.10.3 | latest | 1.8.13 | |
| 1.2.1 |
| 1.2.1 |
|
| |
| WIP 1.4.0 1.3.2 1.2.1 1.1.2 |
| 1.3.1 | latest | latest 1.0.1 1.1.0rc1 | |
|
|
|
| 1.2.7 |
| |
|
| 0.3.4 |
|
|
| |
JsdoitController |
|
| Não-Identificada |
|
|
|
JSX Transformer |
|
|
| 0.4.0 |
|
|
|
|
| 2.1.0 |
|
| |
| Q3 Q2 |
|
|
|
| |
|
|
| 4.3.1 4.0.5 | 4.7.3 |
| |
| 2.2.1 | 2.1.0 | 3.0.0 2.3.0 2.2.1 2.1.0 2.0.0 | 3.0.0 |
| |
| 1.3.3 |
|
|
| 1.1.3 | |
| 1.2.1 |
| 2.2.1 |
|
| |
| Não-identificada |
|
|
|
| |
| latest |
|
|
|
| |
|
|
| 1.0 Beta 1 |
|
| |
| 2.6.2 |
|
| latest | 2.5.3 | |
latest | latest 1.4.5 | 1.4.2 | 1.4.5 1.3.2 nightly | latest | 1.3.2 1.2.4 | |
|
| 1.4.0.1 | 1.4.0.1 |
|
| |
OrbiterMicro |
|
| 1.1.0.514 |
|
|
|
|
|
| 0.22 | 0.9.9 |
| |
| 0.1.1 |
|
|
|
| |
|
|
| 1.2.0 |
|
| |
Prefixfree |
| 1.0.7 |
|
|
|
|
| 1.4.1 | 1.4.0 | 1.4.1 1.3.6 1.2.3 | 1.4.1 | 1.2.3 | |
latest | latest 1.7.1 1.6.1.0 | 1.7 | 1.7.1 1.6.1.0 | latest | latest 1.7.0.0 1.6.1.0 | |
|
|
|
| 0.30 |
| |
|
|
| 2.1 2.0.3 | 3.0.1 |
| |
| latest |
|
|
|
| |
| 2.1.0 | 1.5.2 | 2.1.0 1.5.2 1.4 | 2.1.0 | 2.0.0 | |
| 0.8.0 |
| 0.4.0 0.3.2 |
|
| |
|
|
| 2.3.1 2.1.1 |
|
| |
| 0.7.4 |
|
|
| 0.6.3 | |
| latest 1.8.3 |
| 1.9 | latest | 1.8.3 | |
Scripty |
|
|
| 2.0b1 |
|
|
| Não-identificada | 2.0.0-gpl |
|
| Não-identificada | |
|
|
| 0.2 nightly |
|
| |
|
|
|
| latest |
| |
|
| 0.8.7 |
|
|
| |
|
|
| 0.x | latest |
| |
|
| 2.2 |
|
|
| |
Thorax |
|
|
| 2.0.0rc6 2.0.0rc3 |
|
|
| r58 | r60 | r54 | latest |
| |
Tmlib JS |
|
| 0.1.5 |
|
|
|
Traceur |
| Não-identificada |
|
|
|
|
| Não-identificada |
|
|
| Não-identificada | |
| Não-identificada | 1.4.4 | 1.4.4 1.4.3 1.3.3 | latest | 1.3.1 | |
Web App Install |
|
|
| 0.1 |
|
|
Web Font Loader |
|
|
|
| 1.4.10 |
|
X Toolkit |
|
|
| edge |
|
|
latest | 3.10.0 2.9.0 | 3.3.0 | 3.8.0 3.7.3 3.6.0 3.5.0 3.4.1 3.14.0 3.10.1 2.8.0r4 | 3.13.0 | 3.3.0 2.8.2 | |
latest | latest 1.0 |
| 1.0rc1 | latest | 0.7 |
Comentários
Just wanted to give you a
Just wanted to give you a heads up que ZingChart http://www.zingchart.com will soon be adding an online tool que may include some of these testers!
Comentar