Ferramenta brackets
-
Upload
carlos-rodrigo-de-araujo -
Category
Technology
-
view
222 -
download
0
Transcript of Ferramenta brackets
![Page 1: Ferramenta brackets](https://reader030.fdocumentos.tips/reader030/viewer/2022021420/58d080161a28ab012d8b4b97/html5/thumbnails/1.jpg)
FERRAMENTA DE DESENVOLVIMEN
TO WEB
Carlos Rodrigo de Araújo
![Page 2: Ferramenta brackets](https://reader030.fdocumentos.tips/reader030/viewer/2022021420/58d080161a28ab012d8b4b97/html5/thumbnails/2.jpg)
Instalação
![Page 3: Ferramenta brackets](https://reader030.fdocumentos.tips/reader030/viewer/2022021420/58d080161a28ab012d8b4b97/html5/thumbnails/3.jpg)
Editor
MenuArquivo
Live PreviewGerenciador de Extensões
![Page 4: Ferramenta brackets](https://reader030.fdocumentos.tips/reader030/viewer/2022021420/58d080161a28ab012d8b4b97/html5/thumbnails/4.jpg)
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;
![Page 5: Ferramenta brackets](https://reader030.fdocumentos.tips/reader030/viewer/2022021420/58d080161a28ab012d8b4b97/html5/thumbnails/5.jpg)
É 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;
![Page 6: Ferramenta brackets](https://reader030.fdocumentos.tips/reader030/viewer/2022021420/58d080161a28ab012d8b4b97/html5/thumbnails/6.jpg)
É 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;
![Page 7: Ferramenta brackets](https://reader030.fdocumentos.tips/reader030/viewer/2022021420/58d080161a28ab012d8b4b97/html5/thumbnails/7.jpg)
É 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;
![Page 8: Ferramenta brackets](https://reader030.fdocumentos.tips/reader030/viewer/2022021420/58d080161a28ab012d8b4b97/html5/thumbnails/8.jpg)
![Page 9: Ferramenta brackets](https://reader030.fdocumentos.tips/reader030/viewer/2022021420/58d080161a28ab012d8b4b97/html5/thumbnails/9.jpg)
![Page 10: Ferramenta brackets](https://reader030.fdocumentos.tips/reader030/viewer/2022021420/58d080161a28ab012d8b4b97/html5/thumbnails/10.jpg)
Click em cima de uma tag HTML e aperte Ctrl + E
![Page 11: Ferramenta brackets](https://reader030.fdocumentos.tips/reader030/viewer/2022021420/58d080161a28ab012d8b4b97/html5/thumbnails/11.jpg)
No CSS e JS segue o mesmo estilo
![Page 12: Ferramenta brackets](https://reader030.fdocumentos.tips/reader030/viewer/2022021420/58d080161a28ab012d8b4b97/html5/thumbnails/12.jpg)
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;
![Page 13: Ferramenta brackets](https://reader030.fdocumentos.tips/reader030/viewer/2022021420/58d080161a28ab012d8b4b97/html5/thumbnails/13.jpg)
Gerenciador de Extensões
Instalar o Emmet;
![Page 14: Ferramenta brackets](https://reader030.fdocumentos.tips/reader030/viewer/2022021420/58d080161a28ab012d8b4b97/html5/thumbnails/14.jpg)
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.
![Page 15: Ferramenta brackets](https://reader030.fdocumentos.tips/reader030/viewer/2022021420/58d080161a28ab012d8b4b97/html5/thumbnails/15.jpg)
![Page 16: Ferramenta brackets](https://reader030.fdocumentos.tips/reader030/viewer/2022021420/58d080161a28ab012d8b4b97/html5/thumbnails/16.jpg)
Após digitar aperte Ctrl+Alt+Enter;
![Page 17: Ferramenta brackets](https://reader030.fdocumentos.tips/reader030/viewer/2022021420/58d080161a28ab012d8b4b97/html5/thumbnails/17.jpg)
# usado para id; . Usado para Class; * Quantidade de
repetição da tag; + Quantidade de tags;
![Page 18: Ferramenta brackets](https://reader030.fdocumentos.tips/reader030/viewer/2022021420/58d080161a28ab012d8b4b97/html5/thumbnails/18.jpg)
![Page 19: Ferramenta brackets](https://reader030.fdocumentos.tips/reader030/viewer/2022021420/58d080161a28ab012d8b4b97/html5/thumbnails/19.jpg)
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/
pt-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/
![Page 20: Ferramenta brackets](https://reader030.fdocumentos.tips/reader030/viewer/2022021420/58d080161a28ab012d8b4b97/html5/thumbnails/20.jpg)
Dúvidas?