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
2 – Escolha a versão adequada a seu computador e aceite a licença:
Licença
3 – Baixe o pacote LibIndicator7: http://packages.ubunu.com/trusty/libs/libindicator7
libindicator7
4 – Baixe o pacote Libappindicator1: http://packages.ubuntu.com/trusty/libappindicator1
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
6 – Você pode abrir o Google Chrome caso deseje testar a instalação:
Google Chrome
7 – Abra o Brackets e utilize o código abaixo:
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
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>
Ricardo Mantovani
Desenvolvimento Código Aberto 