Brackets – Editor for Web Developers – Linux

Publicado: 28 de outubro de 2014 em JavaScript, JQuery, Linux
0

O Brackets é um projeto de código aberto, inicialmente criado pela Adobe, agora mantido por uma comunidade de desenvolvedores ativa e crescente. O Brackets se encontra sob a licença MIT, e é atualmente mantido no GitHub, seu download está disponível para as plataformas para Mac, Windows e Linux.

O Brackets é um novo editor de código para HTML, CSS e JavaScript construídos com HTML, CSS e JavaScript. O Brackets possui vários recursos inovadores entre eles ​​atualizações HTML e CSS em tempo real (sem recarregar o navegador) e também possui realce de elementos selecionados em arquivos HTML e CSS que são destacados dentro do navegador, mas para estes recursos o Brackets requer trabalho em conjunto com Google Chrome. O Brackets também completa automaticamente código JQuery.

Projeto Brackets: http://brackets.io/

Outros Projetos Adobe OpenSource: http://html.adobe.com/opensource/

Instalando o Google Chrome no Ubuntu

Para instalar o Google Chrome no Ubuntu precisamos instalar alguns pacotes adicionais que podem ser encontrados no site de pacotes do Ubuntu.

1 – Primeiro baixe o Google Chrome: http://www.google.com.br/chrome/browser/

Google Chrome Downloads

Google Chrome Downloads

2 – Escolha a versão adequada a seu computador e aceite a licença:

Licença

Licença

3 – Baixe o pacote LibIndicator7: http://packages.ubunu.com/trusty/libs/libindicator7

libindicator7

libindicator7

4 – Baixe o pacote Libappindicator1: http://packages.ubuntu.com/trusty/libappindicator1

Libindicatator1

Libindicatator1

5 – Instale os três pacotes com a extensão Debian e instale o Brackets utilizando um PPA para o Ubuntu:

sudo dpkg -i libindicator7_12.10.2+14.04.20140402-0ubuntu1_amd64.deb
sudo dpkg -i libappindicator1_12.10.1+13.10.20130920-0ubuntu2_amd64.deb
sudo dpkg -i google-chrome-stable_current_amd64.deb

sudo add-apt-repository ppa:webupd8team/brackets
sudo apt-get update
sudo apt-get install brackets
Terminal

Terminal

6 – Você pode abrir o Google Chrome caso deseje testar a instalação:

Google Chrome

Google Chrome

7 – Abra o Brackets e utilize o código abaixo:

Brackets Editor

Brackets Editor

8 – Clique no ícone do raio localizado no canto superior direito do editor, chamado Live Preview para verificar o resultado do código:

Live Preview

Live Preview

Exemplo:

Verifique que o Brackets possui um ótimo editor cheio de recursos para desenvolvimento web, note que entre os recursos o Brackets auto completa seu código JQuery. Para saber como utilizar o Brackets clique no link a seguir:

Usando o Brackets: https://github.com/adobe/brackets/wiki/How-to-Use-Brackets

JQuery

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta charset="utf-8" />
        <title>Desenvolvimento Aberto</title>

        <!-- Está é uma instalação do JQuery, você apenas precisa apontar
             para o respectivo script da versão que você deseja utilizar -->

       <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

       <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
            Todo o script roda no evento equivalent ao OnLoad da pagina html-->    

       <script>
       $( document ).ready(function() {

        // Seletores - seleciona todos os elementos
        // $(*).css("color", "blue");  

       // Seleciona por elemento
           $("body").css("background-color", "#FFFFFF");

        // Seleciona por ID
           $("#header").css("background-color", "#36648B")
                       .css("color", "white")
                       .css("padding", "5px")
                       .css("text-align","center");                  

           $("#section").css("width", "740px")
                        .css("float","left")
                        .css("padding","15px");

           $("#footer").css("background-color", "#36648B")
                       .css("color", "white")
                       .css("clear", "both")
                       .css("text-align", "center")
                       .css("padding","5px");

           // Seleciona por Classe
           $(".caixa").css("-moz-box-shadow", "5px 5px 5px 5px #777777")
                      .css("-webkit-box-shadow", "5px 5px 5px 5px #777777")
                      .css("box-shadow", "5px 5px 5px 5px #777777")
                      .css("padding", "20px");

           $(".imagem").css("padding", "5px")
                       .css("border", "10px");

           $("a").css("color", "#000000");

           $("p").slideUp(100).slideDown(3000);      

        $( "a" ).click(function( event ) {
            alert( "Desenvolvimento Aberto.\nObrigado por visitar!" );
        });
        });       

       </script>
    </head>

    <body>
    <div id="header">
    <h1>Desenvolvimento Aberto</h1>
    </div>

    <div id="section">

      <p class="caixa">

        <img src="Imagem/imagem01.jpg" width="350" height="300" alt="minha imagem" align="left" class="imagem"/>

        Desenvolvimento Aberto é uma organização voltada para o aprendizado e discussão de técnicas de
        desenvolvimento focado em algumas linguagens de programação sendo parcialmente/totalmente abertas ou
        com licenças gratuitas para desenvolvedores de cada uma de suas respectivas marcas registradas.<br />  <br />
        Desenvolvimento Aberto foi escrito e desenvolve utilizando ferramentas gratuitas disponibilizadas
        pelas melhores empresas de software da atualidade, incluindo a própria hospedagem e design deste site,
        sendo assim, também proporciona conteúdo gratuito, isso quer dizer que você não paga nada para aprender
        e utilizar as tecnologias de ponta que podem ser manuseadas através das linguagens de programação mais
        requisitadas pelas empresas no mercado atual.       

        </p>
        <a href="#">Clique aqui!!!</a>
            </div>

    <div id="footer">
    Desenvolvimento Aberto © desevolvimento.aberto@live.com
    </div>

    </body>
    </html>

Deixe um comentário