HELP EDIT - Editor HTML grátis
Quando eu estava começando a aprender HTML e utilizar minhas primeiras TAGs, francamente, quis desistir de tudo e viver de artesanato (risos). Eu não tinha dinheiro pra comprar uma licença do Dreamweaver, e como eu utilizei muito (muito mesmo) o PC da empresa, era completamente inviável instalar o Notepad++. Então sim, eu fiz tudo no bloco de notas (realmente na raça!), e de certa forma foi muito bom! Pois foi assim que decorei como funciona inúmeras TAGs e elementos do Web Designer. Apesar disso, não muda o fato de ser muito chato manipular tudo pelo bloco de notas (Edite o código > Salve o arquivo > Atualize a pagina no navegador > Verifique as mudanças > Repita) e isso já estava me deixando louco.
Enfim, depois de muita dor de cabeça comecei a aprender javascript e a manipular elementos com ele, então pensei: "Poderia fazer algo que facilitasse minha vida". Então comecei a desenvolver esse projeto. Estudei uma coisa aqui e outra acolá e finalmente está pronto!
Nesta ferramenta você consegue editar e depurar em tempo real o seu código (testei HTML, CSS e Javascript), assim você pode acompanhar com mais precisão as etapas de edição dos elementos, também pode identar o seu código da maneira que achar melhor.
sinta-se livre para editar o código-fonte da ferramenta como quiser, tanto para engenharia reversa quanto para melhorias, se possível me mande um e-mail para trocarmos uma ideia.
SALVANDO O ARQUIVO: Copie todo o código-fonte abaixo e cole em seu bloco de notas, salve com o nome que quiser na extensão ".html".
Espero ter te ajudado. :)
------------------------------
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "XHTML1-f.dtd" >
<html xmlns="http://www.w3.org/TR/1999/REC-html-in-xml" xml:lang="en" lang="en" >
<head>
<title>HELP EDIT</title>
<script type="text/javascript" charset="utf-8">
window.addEventListener("load", init);
var editboxHTML =
'<html class="expand close">' +
'<head>' +
'<style type="text/css">' +
'.expand { width: 100%; height: 100%; background-color: #00062d; color: #fff; font-family: Monospace;}' +
'.close { border: none; margin: 0px; padding: 0px; }' +
'html,body { overflow: hidden;}' +
'#codigo{padding-left: 5px; padding-right: 2px; border-left: 3px solid #fff; height:97%;}' +
'textarea{resize: none; transition: 0.5s;}'+
'textarea::selection{background-color: #fc0; color: #000;}'+
'#back{background-color:#fff;}' +
'textarea::-webkit-scrollbar {width: 1em; transition: 1s;}' +
'textarea::-webkit-scrollbar-track { background-color: rgba(0,0,0,0); transition: 1s;}' +
'textarea::-webkit-scrollbar-track:hover { background-color: rgba(255,255,255,.2); transition: 1s;}' +
'textarea::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.3); border-radius: 1em; transition: 1s;}' +
'textarea::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.9); border-radius: 1em;}' +
'.colorButtons {position: relative; display: inline-block; z-index: 1000; bottom: 0px; height: 100%; width:calc(25% - 6px); padding: 1px; transition: 0.3s; border: 2px solid #fff;}' +
'#b1 {background-color: rgba(0,0,0,1);}' +
'#b2 {background-color: rgba(144,0,0,1);}' +
'#b3 {background-color: rgba(31,144,0,1);}' +
'#b4 {background-color: rgba(0,6,45,1);}' +
'.colorButtons:hover {bottom: 30px;}' +
'<\/style>' +
'<script>window.onbeforeunload = function(e) {return \'Tem a certeza que quer fechar a janela?\';};<\/script>' +
'<\/head>' +
'<body class="expand close" onload="document.f.ta.focus(); document.f.ta.select();">' +
'<form class="expand close" id="back" name="f">' +
'<textarea class="expand close" id="codigo" name="ta" wrap="hard" spellcheck="false" border="2px red solid">' +
'<\/textarea>' +
'<center>' +
'<div class="colorButtons" id="b1" onclick="var backcolor = document.getElementById(\'codigo\'); backcolor = backcolor.style.backgroundColor=\'rgba(0,0,0,1)\';"><\/div>' +
'<div class="colorButtons" id="b2" onclick="var backcolor = document.getElementById(\'codigo\'); backcolor = backcolor.style.backgroundColor=\'rgba(144,0,0,1)\';"><\/div>' +
'<div class="colorButtons" id="b3" onclick="var backcolor = document.getElementById(\'codigo\'); backcolor = backcolor.style.backgroundColor=\'rgba(31,144,0,1)\';"><\/div>' +
'<div class="colorButtons" id="b4" onclick="var backcolor = document.getElementById(\'codigo\'); backcolor = backcolor.style.backgroundColor=\'rgba(0,6,45,1)\';"><\/div>' +
'<\/center>' +
'<\/form>' +
'<script>function enableTab(id) { var el = document.getElementById(id); el.onkeydown = function(e) { if (e.keyCode === 9) { var val = this.value, start = this.selectionStart, end = this.selectionEnd; this.value = val.substring(0, start) + \'\t\' + val.substring(end); this.selectionStart = this.selectionEnd = start + 1; return false; } };}enableTab(\'codigo\');<\/script>' +
'<\/body>' +
'<\/html>';
var defaultStuff =
'<!DOCTYPE html>\n' +
'<html lang="pt-br">\n\n' +
'<head>\n' +
'\t<meta charset="UTF-8"/>\n' +
'\t<title>HELP EDIT<\/title>\n' +
'\t<script> <\/script>\n' +
'\t<style>\n' +
'\t\tbody {\n' +
'\t\t\tbackground-color: #ddd;\n' +
'\t\t\tfont-family: Calibri;\n' +
'\t\t\tcolor: #00062d;\n' +
'\t\t}\n' +
'\t<\/style>\n' +
'<\/head>\n\n' +
'<body>\n' +
'\t<h3>Seja bem vindo ao HELP EDIT<\/h3>\n' +
'\t<p>Coloque em pratica os seus conhecimentos em HTML5, Javascript e CSS3.<\/p>\n' +
'\t<p>Basta digitar o seu código diretamente.<\/p>\n' +
'\t<p><b>DICA:<\/b> Para salvar copie o código e salve em um bloco de notas com a extensão <b>".HTML"<\/b> na pasta que preferir.<\/p>\n' +
'\t<p>Este projeto apoia a licença <b>GNU GPL (General Public Licence)<\/b> que é uma licença de código-fonte aberto. Por favor, sinta-se livre para execultar/verificar/estudar/editar/distribuir este código-fonte conforme a sua necessidade. Para ter acesso ao código-fonte utilize o atalho de seu teclado <b>"CTRL + U"<\/b>.<\/p>\n' +
'<\/body>\n' +
'<\/html>';
var creditHTML =
'<!DOCTYPE html>\n' +
'<html lang="pt-br">\n\n' +
'<head>\n' +
'\t<meta charset="UTF-8"/>\n' +
'\t<title>Creditos<\/title>\n' +
'\t<script> <\/script>\n' +
'\t<style> body {background-color: #000; font-family: Calibri; text-align: left;} p {color: #fc0; font-size: 13pt;} b{ font-family: Lucida Console; color: #fff; transition: 7s;} .name { color: #fc0; trasition: 1s;} #title {position: relative; margin: auto; top: 10px; text-align: center; height: 1px; color: #fff; font-size: 20pt; transition: 10s;} #title:hover {text-shadow: 0px 0px 10px #fff; color: #000; transition: 1s;} .name:hover b {font-size: 15pt; transition: 1s;}<\/style>\n' +
'<\/head>\n\n' +
'<body>\n' +
'\t<div id="title">HELP EDIT 4.0.6<\/div>\n' +
'\t<div class="name">Developed by: <b>Guilherme Niles<\/b><\/div>\n' +
'\t<div class="name">E-mail: <b>guilhermern.contato@gmail.com<\/b> <\/div>\n' +
'<\/body>\n' +
'<\/html>';
var old = '';
function init(){
window.frames.credit.document.write(creditHTML);
window.frames.editbox.document.write(editboxHTML);
window.frames.editbox.document.close();
window.frames.editbox.document.f.ta.value = defaultStuff;
update();
}
function update(){
var textarea = window.frames.editbox.document.f.ta;
var d = dynamicframe.document;
if (old != textarea.value) {
old = textarea.value;
d.open();
d.write(old);
if (old.replace(/[\r\n]/g,'') == defaultStuff.replace(/[\r\n]/g,''))
d.close();
}
window.setTimeout(update, 150);
}
</script>
</head>
<frameset resizable="false" rows="*,60px" border="0">
<frameset resizable="yes" cols="60%,*" border="8px" bordercolor="#000">
<frame name="dynamicframe">
<frame name="editbox">
</frameset>
<frame name="credit">
</frameset>
</html>
Enfim, depois de muita dor de cabeça comecei a aprender javascript e a manipular elementos com ele, então pensei: "Poderia fazer algo que facilitasse minha vida". Então comecei a desenvolver esse projeto. Estudei uma coisa aqui e outra acolá e finalmente está pronto!
Nesta ferramenta você consegue editar e depurar em tempo real o seu código (testei HTML, CSS e Javascript), assim você pode acompanhar com mais precisão as etapas de edição dos elementos, também pode identar o seu código da maneira que achar melhor.
sinta-se livre para editar o código-fonte da ferramenta como quiser, tanto para engenharia reversa quanto para melhorias, se possível me mande um e-mail para trocarmos uma ideia.
SALVANDO O ARQUIVO: Copie todo o código-fonte abaixo e cole em seu bloco de notas, salve com o nome que quiser na extensão ".html".
Espero ter te ajudado. :)
------------------------------
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "XHTML1-f.dtd" >
<html xmlns="http://www.w3.org/TR/1999/REC-html-in-xml" xml:lang="en" lang="en" >
<head>
<title>HELP EDIT</title>
<script type="text/javascript" charset="utf-8">
window.addEventListener("load", init);
var editboxHTML =
'<html class="expand close">' +
'<head>' +
'<style type="text/css">' +
'.expand { width: 100%; height: 100%; background-color: #00062d; color: #fff; font-family: Monospace;}' +
'.close { border: none; margin: 0px; padding: 0px; }' +
'html,body { overflow: hidden;}' +
'#codigo{padding-left: 5px; padding-right: 2px; border-left: 3px solid #fff; height:97%;}' +
'textarea{resize: none; transition: 0.5s;}'+
'textarea::selection{background-color: #fc0; color: #000;}'+
'#back{background-color:#fff;}' +
'textarea::-webkit-scrollbar {width: 1em; transition: 1s;}' +
'textarea::-webkit-scrollbar-track { background-color: rgba(0,0,0,0); transition: 1s;}' +
'textarea::-webkit-scrollbar-track:hover { background-color: rgba(255,255,255,.2); transition: 1s;}' +
'textarea::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.3); border-radius: 1em; transition: 1s;}' +
'textarea::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.9); border-radius: 1em;}' +
'.colorButtons {position: relative; display: inline-block; z-index: 1000; bottom: 0px; height: 100%; width:calc(25% - 6px); padding: 1px; transition: 0.3s; border: 2px solid #fff;}' +
'#b1 {background-color: rgba(0,0,0,1);}' +
'#b2 {background-color: rgba(144,0,0,1);}' +
'#b3 {background-color: rgba(31,144,0,1);}' +
'#b4 {background-color: rgba(0,6,45,1);}' +
'.colorButtons:hover {bottom: 30px;}' +
'<\/style>' +
'<script>window.onbeforeunload = function(e) {return \'Tem a certeza que quer fechar a janela?\';};<\/script>' +
'<\/head>' +
'<body class="expand close" onload="document.f.ta.focus(); document.f.ta.select();">' +
'<form class="expand close" id="back" name="f">' +
'<textarea class="expand close" id="codigo" name="ta" wrap="hard" spellcheck="false" border="2px red solid">' +
'<\/textarea>' +
'<center>' +
'<div class="colorButtons" id="b1" onclick="var backcolor = document.getElementById(\'codigo\'); backcolor = backcolor.style.backgroundColor=\'rgba(0,0,0,1)\';"><\/div>' +
'<div class="colorButtons" id="b2" onclick="var backcolor = document.getElementById(\'codigo\'); backcolor = backcolor.style.backgroundColor=\'rgba(144,0,0,1)\';"><\/div>' +
'<div class="colorButtons" id="b3" onclick="var backcolor = document.getElementById(\'codigo\'); backcolor = backcolor.style.backgroundColor=\'rgba(31,144,0,1)\';"><\/div>' +
'<div class="colorButtons" id="b4" onclick="var backcolor = document.getElementById(\'codigo\'); backcolor = backcolor.style.backgroundColor=\'rgba(0,6,45,1)\';"><\/div>' +
'<\/center>' +
'<\/form>' +
'<script>function enableTab(id) { var el = document.getElementById(id); el.onkeydown = function(e) { if (e.keyCode === 9) { var val = this.value, start = this.selectionStart, end = this.selectionEnd; this.value = val.substring(0, start) + \'\t\' + val.substring(end); this.selectionStart = this.selectionEnd = start + 1; return false; } };}enableTab(\'codigo\');<\/script>' +
'<\/body>' +
'<\/html>';
var defaultStuff =
'<!DOCTYPE html>\n' +
'<html lang="pt-br">\n\n' +
'<head>\n' +
'\t<meta charset="UTF-8"/>\n' +
'\t<title>HELP EDIT<\/title>\n' +
'\t<script> <\/script>\n' +
'\t<style>\n' +
'\t\tbody {\n' +
'\t\t\tbackground-color: #ddd;\n' +
'\t\t\tfont-family: Calibri;\n' +
'\t\t\tcolor: #00062d;\n' +
'\t\t}\n' +
'\t<\/style>\n' +
'<\/head>\n\n' +
'<body>\n' +
'\t<h3>Seja bem vindo ao HELP EDIT<\/h3>\n' +
'\t<p>Coloque em pratica os seus conhecimentos em HTML5, Javascript e CSS3.<\/p>\n' +
'\t<p>Basta digitar o seu código diretamente.<\/p>\n' +
'\t<p><b>DICA:<\/b> Para salvar copie o código e salve em um bloco de notas com a extensão <b>".HTML"<\/b> na pasta que preferir.<\/p>\n' +
'\t<p>Este projeto apoia a licença <b>GNU GPL (General Public Licence)<\/b> que é uma licença de código-fonte aberto. Por favor, sinta-se livre para execultar/verificar/estudar/editar/distribuir este código-fonte conforme a sua necessidade. Para ter acesso ao código-fonte utilize o atalho de seu teclado <b>"CTRL + U"<\/b>.<\/p>\n' +
'<\/body>\n' +
'<\/html>';
var creditHTML =
'<!DOCTYPE html>\n' +
'<html lang="pt-br">\n\n' +
'<head>\n' +
'\t<meta charset="UTF-8"/>\n' +
'\t<title>Creditos<\/title>\n' +
'\t<script> <\/script>\n' +
'\t<style> body {background-color: #000; font-family: Calibri; text-align: left;} p {color: #fc0; font-size: 13pt;} b{ font-family: Lucida Console; color: #fff; transition: 7s;} .name { color: #fc0; trasition: 1s;} #title {position: relative; margin: auto; top: 10px; text-align: center; height: 1px; color: #fff; font-size: 20pt; transition: 10s;} #title:hover {text-shadow: 0px 0px 10px #fff; color: #000; transition: 1s;} .name:hover b {font-size: 15pt; transition: 1s;}<\/style>\n' +
'<\/head>\n\n' +
'<body>\n' +
'\t<div id="title">HELP EDIT 4.0.6<\/div>\n' +
'\t<div class="name">Developed by: <b>Guilherme Niles<\/b><\/div>\n' +
'\t<div class="name">E-mail: <b>guilhermern.contato@gmail.com<\/b> <\/div>\n' +
'<\/body>\n' +
'<\/html>';
var old = '';
function init(){
window.frames.credit.document.write(creditHTML);
window.frames.editbox.document.write(editboxHTML);
window.frames.editbox.document.close();
window.frames.editbox.document.f.ta.value = defaultStuff;
update();
}
function update(){
var textarea = window.frames.editbox.document.f.ta;
var d = dynamicframe.document;
if (old != textarea.value) {
old = textarea.value;
d.open();
d.write(old);
if (old.replace(/[\r\n]/g,'') == defaultStuff.replace(/[\r\n]/g,''))
d.close();
}
window.setTimeout(update, 150);
}
</script>
</head>
<frameset resizable="false" rows="*,60px" border="0">
<frameset resizable="yes" cols="60%,*" border="8px" bordercolor="#000">
<frame name="dynamicframe">
<frame name="editbox">
</frameset>
<frame name="credit">
</frameset>
</html>
Comentários
Postar um comentário