Arquivo da categoria ‘JQuery’

O JQuery emprestou do CSS o conceito de seletores para tornar fácil manipular qualquer elemento em uma pagina da web. Os seletores permitem acesso direto aos elementos de uma pagina utilizando varias técnicas diferentes, como seleção por atributos, seletores básicos, por filhos, utilizando filtros, forms, hierarquia, visibilidade e outros.

Os seletores de filtro de conteúdo são divididos em quatro tipos, eles são:

  • $(elemento:contains) – Seleciona todos os elementos que contem um texto especifico.
  • $(elemento:empty) – Seleciona todos os elementos vazios.
  • $(elemento:has()) – Seleciona todos elementos que coincidem com os elementos especificados.
  • $(elemento:parent) – Seleciona todos os elementos que possuem pelo menos um parente.
JQuery - Filtro de Conteúdo

JQuery – Filtro de Conteúdo

Exemplo:

Neste exemplo utilizamos tipos de seletores para selecionar e modificar os elementos CSS da pagina web. Preste atenção ao código HTML que contem tags que são os elementos especificados para se utilizar a seleção por filtro de conteúdo.

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() {
                                  
    // Seleciona por ID
   	 $("#header").css("background-color", "#000000")
   	             .css("color", "white")
   	             .css("padding", "5px")
   	             .css("text-align","center");               	 
   	 
       $("#section").css("width", "900px")
                    .css("float","left")
                    .css("padding","15px");
       
       $("#footer").css("background-color", "#000000")
                   .css("color", "white")
                   .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", "8px");
       
       // Seleciona por elementos
       $("td, th").css("border","none")
                  .css("background-color","#dddddd")
                  .css("padding","5px")
                  .css("width","100px")                
         	 
   	 $("a").css("color", "#000000");
   	 
   	 // *********************************
       // ** Seletores de Filtro Conteúdo **
       // *********************************	 
       
       // Filtro contem
       $("td:contains(Abap)").css("background-color", "yellow");
       
       // Filtro vazio
       $("td:empty").css("background-color", "limegreen");
       
        // Filtro contem um elemento
       $("td:has(span)").css("background-color", "aqua");
       
       // Filtro elemento parente
       $( "th:parent" ).css("background-color", "fuchsia")
                       .fadeTo( 2500, 0.3 );
       
	});       

   </script>
</head>
 
<body>
<div id="header">
<h1>Desenvolvimento Aberto</h1>
</div>
 
<div id="section">
    
    <table class="caixa">
			<tr>
				<th></th>
				<th>10:00</th>
				<th>14:00</th>
				<th>16:00</th>
				<th>19:00</th>
			</tr>
			<tr>
				<th>Segunda</th>
				<td colspan="2"><span>Java</span></td>
				<td>C++</td>
				<td>C#</td>
			</tr>
			<tr>
				<th>Terça</th>
				<td colspan="3">Ruby</td>
				<td></td>
			</tr>
			<tr>
				<th>Quarta</th>
				<td colspan="2">Javascript</td>
				<td>CSS</td>
				<td>JQuery</td>
			</tr>
			<tr>
				<th>Quinta</th>
				<td colspan="3">Python</td>
				<td></td>
			</tr>
			<tr>
				<th>Sexta</th>
				<td colspan="3" >Abap</td>
				<td><span>NetWeaver</span></td>
			</tr>
		</table>
		  </div>
		  
   <p>
     <span style="background-color:yellow;font-weight:bold">Filtro</span> busca um conteúdo. 
   </p>
   <p>
     <span style="background-color:limegreen;font-weight:bold">Filtro</span> conteúdos vazios. 
   </p>
   <p>
     <span style="background-color:aqua;font-weight:bold">Seletor</span> contem a tag (span). 
   </p>
   <p>
     <span style="background-color:fuchsia;font-weight:bold">Seletor</span> contem pelo menos um parente.
   </p>	
   
<div id="footer">
Desenvolvimento Aberto © desevolvimento.aberto@live.com
</div>

</body> 
</html>
Anúncios

O JQuery emprestou do CSS o conceito de seletores para tornar fácil manipular qualquer elemento em uma pagina da web. Os seletores permitem acesso direto aos elementos de uma pagina utilizando varias técnicas diferentes, como seleção por atributos, seletores básicos, por filhos, utilizando filtros, forms, hierarquia, visibilidade e outros.

Você pode saber mias sobre os seletores de filtros básicos no seguinte link:

Basic Filter: http://api.jquery.com/category/selectors/basic-filter-selectors/ 

JQuery - Filtros Básicos

JQuery – Filtros Básicos

Exemplo:

Neste exemplo utilizamos tipos de seletores para selecionar e modificar os elementos CSS da pagina web.

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() {

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

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

       $("#footer").css("background-color", "#000000")
                   .css("color", "white")
                   .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", "8px");

       // Seleciona por elementos
       $("td, th").css("border","none")
                  .css("background-color","#dddddd")
                  .css("padding","5px")
                  .css("width","100px")                

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

   	 // *********************************
       // ** Seletores de Filtro Básicos **
       // *********************************	 

       // Filtro: primeiro e ultimo
       $("table span:first").css("background-color","yellow");
       $("table span:last").css("background-color","yellow");

       // Filtro: valores impares= odd / pares= even
       $("table td:odd").css("background-color","limegreen");

       // Filtro valores exato
       $("table td:eq(6)").css("background-color","aqua");

       // Filtro comparação
       $("table td:gt(9)").css("background-color","fuchsia");
	});       

   </script>
</head>

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

<div id="section">

    <table class="caixa">
			<tr>
				<th></th>
				<th>10:00</th>
				<th>14:00</th>
				<th>16:00</th>
				<th>19:00</th>
			</tr>
			<tr>
				<th>Segunda</th>
				<td colspan="2"><span>Java</span></td>
				<td>C++</td>
				<td>C#</td>
			</tr>
			<tr>
				<th>Terça</th>
				<td colspan="3">Ruby</td>
				<td>Rails</td>
			</tr>
			<tr>
				<th>Quarta</th>
				<td colspan="2">Javascript</td>
				<td>CSS</td>
				<td>JQuery</td>
			</tr>
			<tr>
				<th>Quinta</th>
				<td colspan="3">Python</td>
				<td>Linux</td>
			</tr>
			<tr>
				<th>Sexta</th>
				<td colspan="3" >Abap</td>
				<td><span>NetWeaver</span></td>
			</tr>
		</table>
		  </div>

   <p>
     <span style="background-color:yellow;font-weight:bold">Filtro</span> primeiro e ultimo (tag: span).
   </p>
   <p>
     <span style="background-color:limegreen;font-weight:bold">Filtro</span> valores impares.
   </p>
   <p>
     <span style="background-color:aqua;font-weight:bold">Seletor</span> valores exatos.
   </p>
   <p>
     <span style="background-color:fuchsia;font-weight:bold">Seletor</span> valores maior que.
   </p>	

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

</body>
</html>

O JQuery emprestou do CSS o conceito de seletores para tornar fácil manipular qualquer elemento em uma pagina da web. Os seletores permitem acesso direto aos elementos de uma pagina utilizando varias técnicas diferentes, como seleção por atributos, seletores básicos, por filhos, utilizando filtros, forms, hierarquia, visibilidade e outros.

Os seletores hierárquicos são divididos em quatro tipos, eles são:

  • $(parente>filho) – Seleciona todos os filhos do parente especificado.
  • $(antecessor descendente) – Seleciona todos os antecessores de um determinado descendente.
  • $(prévio + próximo) – Seleciona todos os próximos elementos adjacentes.
  • $(prévio ~ irmãos) – Seleciona todos os elementos irmãos do elemento prévio.
JQuery - Seletor de Hierárquia

JQuery – Seletor de Hierárquia

Exemplo:

Neste exemplo utilizamos tipos de seletores para selecionar e modificar os elementos CSS da pagina web. Preste atenção ao código HTML que contem elementos com identificadores que são os elementos prévios para se utilizar a seleção por hierarquia.

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() {

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

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

       $("#footer").css("background-color", "#000000")
                   .css("color", "white")
                   .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", "8px");

       // Seleciona por elementos
       $("td, th").css("border","none")
                  .css("background-color","#dddddd")
                  .css("padding","5px")
                  .css("width","100px")                

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

   	 // ****************************
       // ** Seletores hierarquicos **
       // ****************************	 

       // Seleciona por elemento descendente
       $("table span").css("background-color","yellow");

       // Seleciona filhos
       $("tr > th").css("background-color","limegreen");

       // Seleciona irmãos (siblings)
       $("#irmao ~ td").css("background-color","aqua");

       // Seleciona adjacente
       $("#adjacente + td").css("background-color","fuchsia");

	});       

   </script>
</head>

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

<div id="section">

    <table class="caixa">
			<tr>
				<th></th>
				<th>10:00</th>
				<th>14:00</th>
				<th>16:00</th>
				<th><span> 19:00</span></th>
			</tr>
			<tr>
				<th>Segunda</th>
				<td colspan="2" id="irmao">Java</td>
				<td>C++</td>
				<td>C#</td>
			</tr>
			<tr>
				<th>Terça</th>
				<td colspan="3">Ruby</td>
				<td>Rails</td>
			</tr>
			<tr>
				<th>Quarta</th>
				<td colspan="2">Javascript</td>
				<td>CSS</td>
				<td>JQuery</td>
			</tr>
			<tr>
				<th>Quinta</th>
				<td colspan="3">Python</td>
				<td>Linux</td>
			</tr>
			<tr>
				<th>Sexta</th>
				<td colspan="3" id="adjacente">Abap</td>
				<td>NetWeaver</td>
			</tr>
		</table>
               </div>
   <p>
     <span style="background-color:yellow;font-weight:bold">Seletor</span> de descendente.
   </p>
   <p>
     <span style="background-color:limegreen;font-weight:bold">Seletor</span> de filhos.
   </p>
   <p>
     <span style="background-color:aqua;font-weight:bold">Seletor</span> de irmãos.
   </p>
   <p>
     <span style="background-color:fuchsia;font-weight:bold">Seletor</span> de adjacente.
   </p>	

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

</body>
</html>

O JQuery emprestou do CSS o conceito de seletores para tornar fácil manipular qualquer elemento em uma pagina da web. Os seletores permitem acesso direto aos elementos de uma pagina utilizando varias técnicas diferentes, como seleção por atributos, seletores básicos, por filhos, utilizando filtros, forms, hierarquia, visibilidade e outros.

Os seletores básicos são divididos em quatro tipos, eles são:

  • $(*) – Seleciona todos os elementos.
  • $(.class) – Seleciona uma classe.
  • $(elemento) – Seleciona o elemento especificado.
  • $(#Id) – Seleciona o elemento pelo seu ID.
JQuery - Selectors

JQuery – Selectors

Exemplo:

Neste exemplo utilizamos tipos de seletores para selecionar e modificar os elementos CSS da pagina web. Para testar o exemplo utilize uma imagem qualquer com o tamanho de 350×300.

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", "#000000")
                   .css("color", "white")
                   .css("padding", "5px")
                   .css("text-align","center");               	 

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

       $("#footer").css("background-color", "#000000")
                   .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", "8px");

       $("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/imagen01.jpg" width="350" height="300" alt="minha imagem" align="left" />

   	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>

Websites – Chaining – JQuery – Linux

Publicado: 23 de outubro de 2014 em JavaScript, JQuery

Chaining é um conceito do JQuery que significa encadeamento e nos permite executar vários métodos jQuery continuadamente. Se você chamar um método em uma seleção e o método retornar um objeto jQuery, você pode continuar a chamar métodos jQuery no objeto sem parar até que você finalize o método o encerrando com um caractere ponto e vírgula.

Ao contrario do exemplo anterior que utilizamos o mesmo método e o chamamos varias vezes utilizando inúmeras linhas de instruções JQuery para o mesmo elemento, agora chamamos o objeto uma única vez e o repetimos até que nossa condição seja satisfeita utilizamos uma única linha para cada elemento.

JQuery - Chaning - Animado

JQuery – Chaning – Animado

Exemplo:

Neste exemplo utilizamos o conceito de encadeamento para repetir instruções JQuery para criar o CSS e uma animação para a pagina do website.

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
	     o 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() {

       $("body").css("background-color", "#FFFFFF");

       $("#header").css("background-color", "#000000").css("color", "white")
   	          .css("padding", "5px").css("text-align","center");

       $("#nav").css("background-color", "#9C9C9C").css("color", "#696969").css("height", "370px")
   	       .css("width", "100px").css("float","left").css("padding","5px");   	             

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

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

       $("a").css("color", "#6C7B8B");

       $("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="nav">
HTML<br>
CSS<br>
Javascript<br>
JQuery<br>

</div>

<div id="section">
	<p>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>

O jQuery é uma biblioteca livre de código aberto e que possui uma licença dual, fazendo uso da Licença MIT ou da GNU. A sintaxe do jQuery foi desenvolvida para tornar mais simples a navegação do documento HTML, a seleção de elementos DOM, criar animações, manipular eventos e desenvolver aplicações AJAX. A biblioteca também oferece a possibilidade de criação de plug-ins. Fazendo uso de tais facilidades, os desenvolvedores podem criar camadas de abstração para interações de mais baixo nível, simplificando o desenvolvimento de aplicações web dinâmicas de grande complexidade.

JQuery: http://jquery.com/

Sendo uma biblioteca JavaScript rápida, pequena e rica em recursos. O JQuery mudou a maneira que milhões de pessoas passaram a escrever JavaScript. Grandes empresas como a IBM, Mozilla, Adobe entre outras se tornaram-se parceiras do JQuery e prestam suporte tornando possível a Fundação JQuery. Fundada com parcerias da IBM e WordPress, está parceria visa melhorar a web aberta, tornando-a acessível a todos, através do desenvolvimento e suporte de software de fonte aberto, e colaboração com a comunidade de desenvolvimento.

JQuery Fundation: https://jquery.org/

Instalando o JQuery

O JQuery é um arquivo de tamanho muito pequeno e simples de instalar, você pode utiliza-lo localmente baixando o arquivo no seu computador e fazendo referencia ao script jquery.js ou pode utiliza-lo diretamente da web.

Hello World - JQuery

Hello World – JQuery

Sintaxe JQuery

A sintaxe do JQuery possui basicamente a proposta de selecionar elementos e executar ações sobre eles. O sinal $ (dólar) define o acesso ao JQuery e suas funções e assim manipular os elementos através de eventos.

Ready

O Ready é um evento do JQuery que ao contrario do JavaScript que utiliza o evento LOAD quando a página é processada e o LOAD não é acionado até que todos os ativos, como as imagens tenham sido completamente carregadas. O READY pode ser executado logo que a hierarquia de DOM possa ser totalmente construída, de modo que este geralmente é o melhor lugar para anexar todos os outros manipuladores de eventos e executar outro código jQuery

Exemplo:

Neste exemplo básico acessamos o JQuery através da web e o utilizamos para manipular um evento de clique sobre um link e o CSS da pagina HTML.

<!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
	     o 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 equivalente ao Load da pagina html-->     

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

          $("body").css("background-color", "#363636");
          $("body").css("color", "#ffffff");
          $("h1").css("background-color", "#483D8B");
          $("h1").css("padding", "20px");
          $("h2").css("background-color", "#4682B4");
          $("h2").css("padding", "20px");
          $("p").css("background-color", "#ffffff");
          $("p").css("color", "#64645A");
          $("p").css("padding", "20px");
          $("a").css("color", "#E066FF");

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

   </script>
</head>

<body>
	<h1> Desenvolvimento Aberto</h1>
	<h2>Aprenda JQuery --> Hello World!</h2>
	<p>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>
</body>
</html>