Ferramenta brackets

217 visualizações

Publicada em

Explicação da Ferramenta

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
217
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
2
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Ferramenta brackets

  1. 1. Instalação
  2. 2. Editor Menu Arquivo Live Preview Gerenciador de Extensões
  3. 3. Sobre o Brackets  Um novo editor open-source para a próxima geração da web.  HTML5, Css3, JavaScript;  Edições rápidas para as linguagens;  Comandos e atalhos para ajudar no código CSS e HTML;
  4. 4.  É rápido – muito rápido. Excelente para desenvolvimento front-end, desde pequenas coisas até grandes projetos;  Tem o recurso de Live Preview – por utilizar o próprio navegador para exibir o resultado do desenvolvimento on-the-fly, temos uma visualização real do que está acontecendo;
  5. 5.  É fácil – a interface é simples e intuitiva. Tem opção para vários idiomas, incluindo o português brasileiro;  É extensível – o editor pode receber novos recursos através da adição de extensões. Além disso, o repositório de extensões é grande o suficiente para cobrir soluções para diversas situações pelas quais outros desenvolvedores já passaram;  Integração com Theseus – o desenvolvimento, a análise de código e a depuração de Javascript ficam fáceis com o a integração com Theseus. De fato, não é surpresa um editor que utiliza Node.js como infra ter uma boa integração para depuração JavaScript;
  6. 6.  É multiplataforma – possui pacotes pré-compilados para Windows, Mac e Linux. Apesar de o pacote para Linux ser Debian, a característica open source do editor permite que terceiros empacotem para outras distros, como o Fedora;  Gerenciador de projetos – o gerenciador de pastas funciona como um gerenciador de projetos. Um recurso que falta no Sublime text, mas que foi bem implementado no Brackets. Não é preciso levantar várias instâncias do editor, basta selecionar o projeto em que vamos trabalhar. Além disso, o editor se lembra dos arquivos abertos na última vez que o projeto foi trabalhado, trazendo essa seleção automaticamente;  Construído com tecnologia web – a ferramenta não é apenas focada em web, é construída com tecnologia web. Exatamente por isso, ela pode ser modificada utilizando apenas marcação, CSS e JavaScript;
  7. 7. Click em cima de uma tag HTML e aperte Ctrl + E
  8. 8. No CSS e JS segue o mesmo estilo
  9. 9. Contras  É fundamental uma resolução alta para o Live Preview – a grande vantagem do Live Preview é poder colocar o editor lado a lado com a janela do navegador. No meu caso, com 1920x1080px, a experiência foi excelente. Mas, em resoluções menores, a experiência do Live Preview pode ser prejudicada.  Não permite abrir outro código que tenha codificação diferente da UTF-8;
  10. 10. Gerenciador de Extensões Instalar o Emmet;
  11. 11. Emmet  Emmet (anteriormente conhecido como codificação Zen) é um conjunto de ferramentas de desenvolvedor web que podem melhorar muito o seu fluxo de trabalho de HTML & CSS.
  12. 12.  Após digitar aperte Ctrl+Alt+Enter;
  13. 13.  # usado para id;  . Usado para Class;  * Quantidade de repetição da tag;  + Quantidade de tags;
  14. 14. Referências:  http://imasters.com.br/desenvolvimento/software- livre/brackets-o-editor-para-web-que-faz-jus-ao-seu- proposito/  https://github.com/adobe/brackets/blob/master/samples/p t-br/Primeiros%20Passos/index.html  https://github.com/adobe/brackets/wiki/How-to-Use- Brackets  http://brackets.io/  http://www.youtube.com/watch?v=NhVdn7_ub5k  http://emmet.io/
  15. 15. Dúvidas?

×