diff --git a/init/imagens/applications-development.png b/init/imagens/applications-development.png
index 2b08a90..1a28ba1 100755
Binary files a/init/imagens/applications-development.png and b/init/imagens/applications-development.png differ
diff --git a/init/index.js b/init/index.js
index 5f6620c..a65f78e 100755
--- a/init/index.js
+++ b/init/index.js
@@ -113,7 +113,7 @@ botoesIni = [
 	"target": "_self"
 },{
 	"img":"applications-development.png",
-	"href": location.href.replace("index.php","") +  "../pacotes/utils/index.php",
+	"href": location.href.replace("index.php","") +  "../utilitarios/index.php",
 	"titulo":$trad(33,g_traducao_init),
 	"subtitulo": $trad("33a",g_traducao_init),
 	"fa": "wrench",
diff --git a/init/index.php b/init/index.php
index 1110406..9969efc 100755
--- a/init/index.php
+++ b/init/index.php
@@ -230,7 +230,7 @@ include "head.php";
 				trigger: "click focus",
 				content: function(){
 					var urlqr = "../pacotes/qrcode/php/qr_img.php?host=" + window.location.host + "&u=" + $(this).attr("data-url");
-					return "<img style='width:200px; height: 200px;' src='" + urlqr + "' '>";
+					return "<a title='click' href='"+ $(this).attr("data-url") +"'><img style='width:200px; height: 200px;' src='" + urlqr + "' '></a>";
 				}
 			});
 		}
diff --git a/pacotes/utils/index.php b/pacotes/utils/index.php
deleted file mode 100755
index 283db42..0000000
--- a/pacotes/utils/index.php
+++ /dev/null
@@ -1,132 +0,0 @@
-﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-<head>
-<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<link rel="stylesheet" type="text/css" href="../../admin/html/admin.css">
-<script type="text/javascript" src="../../classesjs/i3geo.js"></script>
-<style>
-
-.r {
-	border: 1px solid #F0F0F0;
-	border-radius: 5px 5px 5px 5px;
-	box-shadow: 1px 1px 1px 1px lightgray;
-	float: left;
-	height: 150px;
-	margin: 0px 25px 20px auto;
-	padding: 5px;
-	width: 200px;
-	background: white;
-	vertical-align: middle;
-	font-size: 0.4cm;
-	position: relative;
-	display: block;
-	text-align: center;
-	z-index: 2;
-}
-
-table {
-	width: 100%;
-}
-
-td {
-	font-size: 0.4cm;
-	text-align: center;
-	height: 150px;
-}
-
-h1 {
-	font-size: 0.6cm;
-	text-align: left;
-	margin: 25px;
-}
-
-#bandeiras {
-	width: 80px;
-	text-align: left;
-	position: absolute;
-	left: 0.2cm;
-	z-index: 10;
-}
-
-a {
-	margin: 0px auto;
-	text-decoration: none;
-	font-size: 14px;
-}
-</style>
-</head>
-<body class=" yui-skin-sam " style="background-color:white;text-align:left;">
-	<div class="bordaSuperior">
-		<div id="bandeiras"></div>
-		<div>
-			<a href="http://www.softwarepublico.gov.br" target="_blank" style="color: white;">
-				<b><?php include("../../versao.php"); echo $mensagemInicia;?> </b>
-			</a>
-		</div>
-	</div>
-
-	<div id="conteudo" style="position: relative; top: -10px; margin: auto; max-width: 1000px; left: 10px;">
-		<div style="margin-top: 5px;">
-			<br>
-			<div id="botoes" style=""></div>
-
-		</div>
-	</div>
-
-</body>
-<script>
-botoesIni = [];
-botoesIni.push(
-	{
-		"img":"",
-		"href":"rgbcolors.html",
-		"titulo": "Lista de cores e conversor RGB/HEX/nome"
-	},
-	{
-		"img":"colorbrewer.png",
-		"href":"http://colorbrewer2.com/",
-		"titulo": "Escolha de conjunto de cores - Colorbrewer"
-	},
-	{
-		"img":"http://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Wikimedia_labs_logo_with_text.svg/103px-Wikimedia_labs_logo_with_text.svg.png",
-		"href":"http://tools.wmflabs.org/geohack/",
-		"titulo": "GeoHack"
-	},
-	{
-		"img":"",
-		"href":"http://stevemorse.org/jcal/latlon.php",
-		"titulo": "Conversor de endere&ccedil;os to/from Latitude/Longitude/Altitude"
-	},
-	{
-		"img":"",
-		"href":"https://maptools.info/tools/converter/",
-		"titulo": "Conversor de coordenadas"
-	},
-	{
-		"img":"",
-		"href":"http://codebeautify.org/",
-		"titulo": "Free Online Tools For Developers - To Beautify, Validate, Minify, Analyse and Convert"
-	}
-);
-mostraBotoes();
-
-function mostraBotoes(){
-	var ins = [],i,n = botoesIni.length,texto, img;
-	for(i=0;i<n;i++){
-		img = "";
-		if(botoesIni[i].img != ""){
-			img = '<img src="'+botoesIni[i].img+'" /><br>';
-		}
-		texto = '<div class="r" ><table ><tr><td><a target=_blank href="'+botoesIni[i].href+'" >'+ img + botoesIni[i].titulo+'</a>';
-		if(botoesIni[i].subtitulo){
-			texto += botoesIni[i].subtitulo;
-		}
-		texto += '</td></tr></table></div>';
-		ins.push(texto);
-	}
-	document.getElementById("botoes").innerHTML = ins.join("");
-}
-
-</script>
-</html>
diff --git a/utilitarios/dicionario.js b/utilitarios/dicionario.js
new file mode 100755
index 0000000..08cbe96
--- /dev/null
+++ b/utilitarios/dicionario.js
@@ -0,0 +1,29 @@
+//veja em index.js o objeto que utiliza essa traducao
+g_traducao_util =
+{
+		"util" : [{
+			pt : "Utilit&aacute;rios",
+			en : "",
+			es : ""
+		}],
+		"rgbcolors" : [{
+			pt : "Lista de cores e conversor RGB/HEX/nome",
+			en : "",
+			es : ""
+		}],
+		"Colorbrewer" : [{
+			pt : "Escolha de conjunto de cores - Colorbrewer",
+			en : "",
+			es : ""
+		}],
+		"end" : [{
+			pt : "Conversor de endere&ccedil;os to/from Latitude/Longitude/Altitude",
+			en : "",
+			es : ""
+		}],
+		"coord" : [{
+			pt : "Conversor de coordenadas",
+			en : "",
+			es : ""
+		}]
+};
diff --git a/utilitarios/index.js b/utilitarios/index.js
new file mode 100755
index 0000000..8aecb80
--- /dev/null
+++ b/utilitarios/index.js
@@ -0,0 +1,64 @@
+botoesIni = [
+	{
+		"link":"../pacotes/utils/rgbcolors.html",
+		"corpo": $trad("rgbcolors",g_traducao_util)
+	},
+	{
+		"link":"http://colorbrewer2.com/",
+		"corpo": $trad("Colorbrewer",g_traducao_util)
+	},
+	{
+		"link":"http://tools.wmflabs.org/geohack/",
+		"corpo": "GeoHack"
+	},
+	{
+		"link":"http://stevemorse.org/jcal/latlon.php",
+		"corpo": $trad("end",g_traducao_util)
+	},
+	{
+		"link":"https://maptools.info/tools/converter/",
+		"corpo": $trad("coord",g_traducao_util)
+	},
+	{
+		"link":"http://codebeautify.org/",
+		"corpo": "Free Online Tools For Developers - To Beautify, Validate, Minify, Analyse and Convert"
+	}
+];
+
+function mostraBotoesBT(){
+	//
+	//essa funcao obtem a lista unica de tags para montar o indice
+	//
+	var html = "", novalista = [], n, nc, i, j, chaves = [], nchaves = [];
+
+	n = botoesIni.length;
+	for(i=0; i<n; i++){
+		chaves.push(botoesIni[i].tag);
+	}
+	chaves = chaves.getUnique();
+	chaves.sort();
+	nc = chaves.length;
+	for(j=0;j<nc;j++){
+		for(i=0; i<n; i++){
+			if(botoesIni[i].tag == chaves[j]){
+				botoesIni[i]["id"] = "a"+j;
+				novalista.push(botoesIni[i]);
+			}
+		}
+	}
+	html = Mustache.to_html(
+			"{{#d}}" + $("#botoesTpl").html() + "{{/d}}",
+			{"d":novalista}
+	);
+	$("#botoesTpl").html(html);
+
+	for(j=0;j<nc;j++){
+		nchaves.push({"tag":chaves[j],"id":"a"+j});
+	}
+	html = Mustache.to_html(
+			"{{#d}}" + $("#tplLista").html() + "{{/d}}",
+			{"d":nchaves}
+	);
+	var r = new RegExp("&amp;","g");
+	$("#tplLista").html(html.replace(r,"&"));
+}
diff --git a/utilitarios/index.php b/utilitarios/index.php
new file mode 100755
index 0000000..fd51837
--- /dev/null
+++ b/utilitarios/index.php
@@ -0,0 +1,58 @@
+<?php
+define ( ONDEI3GEO, ".." );
+include (dirname ( __FILE__ ) . "/../ms_configura.php");
+error_reporting ( 0 );
+include "../init/head.php";
+?>
+<body style="background-color: #eeeeee; padding-top: 55px;">
+	<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
+		<div class="container-fluid">
+			<div class="navbar-header">
+				<a class="navbar-brand" href="../init/index.php"><?php echo $mensagemInicia;?> <i
+					class="fa fa-home fa-1x"></i></a>
+			</div>
+		</div>
+	</nav>
+	<div class="container-fluid">
+		<div class="row">
+			<ol class="breadcrumb">
+				<li><a href="../init/index.php">i3Geo</a></li>
+				<li class="active"></li>
+			</ol>
+		</div>
+	</div>
+	<div class="container-fluid">
+		<div class="row center-block">
+			<div class="col-sm-12">
+				<!-- Template para criacao dos quadros ver index.js -->
+				<div id="botoesTpl" class="hidden">
+					<div class="{{id}} exemplo col-xs-12 center-block"
+						style="width: 260px; min-width: 260px; max-width: 260px;">
+						<div class="panel panel-default">
+							<div class="panel-body" style="height: 150px; overflow: auto;">
+								<h4><a href="{{{link}}}" target="_blank" role="button">{{{corpo}}}</a></h4>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<script src='../classesjs/compactados/mustache.js'></script>
+		<script src='../classesjs/compactados/dicionario_compacto.js'></script>
+		<script src='../classesjs/compactados/classe_util_compacto.js'></script>
+		<script src='../classesjs/compactados/classe_idioma_compacto.js'></script>
+		<script src='dicionario.js'></script>
+		<script src='index.js'></script>
+
+		<script>
+	$(document).ready(function(){
+		i3GEO.configura = {"locaplic" : "..","sid": ""};
+		$(".active").html($trad("util",g_traducao_util));
+		mostraBotoesBT();
+		$('.hidden').removeClass('hidden');
+		$.material.init();
+	});
+	</script>
+
+</body>
+</html>
--
libgit2 0.21.2