Introducción
Para mostrar las posibilidades que brinda la programación de aplicaciones HTML, hice este pequeño programa que permite generar texto con efecto de degradado para post en sitios que soporten BBCode.
Cómo utilizar este programa
Para probar el programa pega el código siguiente en el Bloc de notas:
Luego se debe guardar el código en una carpeta cualquiera pero encerrando el nombre entre comillas para que tome la extensión .hta. Por ejemplo:
"BBColor.hta"
Ahora sólo queda abrir el Explorador de Windows, buscar la aplicación HTML antes guardada y ejecutarla haciendo doble click sobre su icono.
Código fuente
El código escrito en DHTML es el siguiente:
Para conocer más...
Para conocer más sobre aplicaciones HTML mirá mis post anteriores:
•
•
•
Espero que les haya gustado. Saludos.
Para mostrar las posibilidades que brinda la programación de aplicaciones HTML, hice este pequeño programa que permite generar texto con efecto de degradado para post en sitios que soporten BBCode.
Cómo utilizar este programa
Para probar el programa pega el código siguiente en el Bloc de notas:
Luego se debe guardar el código en una carpeta cualquiera pero encerrando el nombre entre comillas para que tome la extensión .hta. Por ejemplo:
"BBColor.hta"
Ahora sólo queda abrir el Explorador de Windows, buscar la aplicación HTML antes guardada y ejecutarla haciendo doble click sobre su icono.
Código fuente
El código escrito en DHTML es el siguiente:
aleantin dijo:
<html>
<head>
<title>BBColor</title>
<hta:application id="htaMain" applicationname="BBColor" border="thin" innerborder="no" maximizebutton="no" scroll="no" singleinstance="yes">
<script language="JavaScript">
<!--
//Posicionar la ventana.
self.resizeTo(640, 480);
self.moveTo((screen.availWidth - 640) / 2, (screen.availHeight - 480) / 2);
//Variables de uso general.
var arrColor = [["000000", "Negro"], ["000080", "Azul oscuro"], ["008000", "Verde oscuro"], ["008080", "Verde azulado"], ["800000", "Rojo oscuro"], ["800080", "Púrpura"], ["808000", "Oliva"], ["808080", "Gris oscuro"], ["c0c0c0", "Plata"], ["0000ff", "Azul"], ["00ff00", "Verde"], ["00ffff", "Cian"], ["ff0000", "Rojo"], ["ff00ff", "Fuccia"], ["ffff00", "Amarillo"], ["ffffff", "Blanco"]];
var blnEdit = false;
//Función para generar el código de colores.
function ftnGetCode()
{
var strTitle = "";
var strCode = "";
var intLength = 0;
var arrColor = [0, 0, 0];
with (document.frmMain)
{
intLength = txtMain.value.length - 1;
if (intLength < 1) txtMain.value = "El texto debe poseer más de 1 carácter";
if (radMain[0].checked)
{
var arrEnd = [0, 0, 0];
var arrStep = [0, 0, 0];
arrColor = ftnSplitColor(parseInt(txtStart.value, 16));
arrEnd = ftnSplitColor(parseInt(txtEnd.value, 16));
arrStep[0] = (arrEnd[0] - arrColor[0]) / intLength;
arrStep[1] = (arrEnd[1] - arrColor[1]) / intLength;
arrStep[2] = (arrEnd[2] - arrColor[2]) / intLength;
for (var intItem = 0; intItem <= intLength; intItem++)
{
if (intItem == intLength) arrColor = arrEnd;
strTitle += "<font color=\"#" + ftnGetHex(arrColor) + "\">" + txtMain.value.charAt(intItem) + "</font>";
if (txtMain.value.charAt(intItem) == " " ) strCode += " ";
else strCode += "[" + "color=#" + ftnGetHex(arrColor) + "]" + txtMain.value.charAt(intItem) + "[" + "/color]";
arrColor[0] = arrColor[0] + arrStep[0];
arrColor[1] = arrColor[1] + arrStep[1];
arrColor[2] = arrColor[2] + arrStep[2];
}
}
else
{
var dblColor = 0x0000FF;
var dblStep = (0xFF00FF - dblColor) / intLength;
for (var intItem = 0; intItem <= intLength; intItem++)
{
if (intItem == intLength) dblColor = 0xFF00FF;
arrColor = ftnSplitColor(parseInt(dblColor));
strTitle += "<font color=\"#" + ftnGetHex(arrColor) + "\">" + txtMain.value.charAt(intItem) + "</font>";
if (txtMain.value.charAt(intItem) == " " ) strCode += " ";
else strCode += "[" + "color=#" + ftnGetHex(arrColor) + "]" + txtMain.value.charAt(intItem) + "[" + "/color]";
dblColor += dblStep;
}
}
spnMain.innerHTML = strTitle;
txaMain.value = strCode;
}
}
//Función para convertir un valor en una cadena hexadecimal.
function ftnGetHex(arrColor)
{
var strColor = (parseInt(arrColor[0]) + parseInt(arrColor[1]) * 256 + parseInt(arrColor[2]) * 65536).toString(16);
var strFormat = "000000";
strColor = strFormat.substr(0, 6 - strColor.length) + strColor;
return strColor.toLowerCase();
}
//Función para cargar la listas de colores.
function ftnLoadData()
{
with (document.frmMain)
{
for (var intItem = 0; intItem < arrColor.length; intItem++)
{
var optStart = new Option(arrColor[intItem][1], arrColor[intItem][0]);
var optEnd = new Option(arrColor[intItem][1], arrColor[intItem][0]);
optStart.style.backgroundColor = "#" + arrColor[intItem][0];
optEnd.style.backgroundColor = "#" + arrColor[intItem][0];
if (intItem < 8)
{
optStart.style.color = "#ffffff";
optEnd.style.color = "#ffffff";
}
selStart.add(optStart);
selEnd.add(optEnd);
}
var optStart = new Option("Personalizado", "000000" );
var optEnd = new Option("Personalizado", "ff0000" );
selStart.add(optStart);
selEnd.add(optEnd);
selStart.selectedIndex = 0;
selEnd.selectedIndex = 12;
}
}
//Función para mostrar el color seleccionado.
function ftnSetCode()
{
with (document.frmMain)
{
txtStart.value = selStart.options[selStart.selectedIndex].value;
txtStart.disabled = (selStart.selectedIndex < selStart.options.length - 1);
txtEnd.value = selEnd.options[selEnd.selectedIndex].value;
txtEnd.disabled = (selEnd.selectedIndex < selEnd.options.length - 1);
}
}
//Función para comprobar el color personalizado.
function ftnSetCustom()
{
with (document.frmMain)
{
var intStart = parseInt(txtStart.value, 16);
var intEnd = parseInt(txtEnd.value, 16);
var strFormat = "000000";
if (isNaN(intStart)) txtStart.value = "000000";
if (isNaN(intEnd)) txtEnd.value = "000000";
txtStart.value = strFormat.substr(0, 6 - txtStart.value.length) + txtStart.value;
txtEnd.value = strFormat.substr(0, 6 - txtEnd.value.length) + txtEnd.value;
selStart.options[selStart.options.length - 1].value = txtStart.value;
selEnd.options[selEnd.options.length - 1].value = txtEnd.value;
}
}
//Función para descomponer un color en valores RGB.
function ftnSplitColor(intColor)
{
return [(intColor & 0xFF), ((intColor & 0xFF00) / 0x100), ((intColor & 0xFF0000) / 0x10000)];
}
//Rutina para el efecto de la barra de títulos (no necesaria para la aplicación).
var strCaption = "BBColor - Programa de Ale Antin para Taringa! ";
var strTemp = "";
var intChar = 0;
var intSpeed = 150;
function ftnMarquee()
{
strTemp = strTemp + strCaption.charAt(intChar);
document.title = strTemp;
intChar++;
if (intChar == strCaption.length)
{
intChar = 0;
strTemp = "";
}
setTimeout("ftnMarquee()", intSpeed);
}
//-->
</script>
<style type="text/css">
<!--
body,form,td,input,span {font-family:sans.serif,Arial;font-size:10pt;}
body {background-color:ButtonFace;color:ButtonText;}
p {width:100%;padding:4px;background-color:ButtonShadow;color:ButtonHighlight;font-family:sans-serif,Arial;font-size:12pt;}
textarea {width:100%;font-family:monospace,"Courier New";font-size:10pt;}
input.code {font-family:monospace,"Courier New";font-size:10pt;}
span {width:100%;border-style:inset;border-width:2px;padding:4px;background-color:#ffffff;color:#000000;font-size:12pt;}
-->
</style>
</head>
<body onLoad="ftnLoadData();ftnMarquee()" onContextMenu="return blnEdit" onSelectStart="return blnEdit">
<p><b>Generador de títulos BBCode</b></p>
<form name="frmMain" onSubmit="return false">
<table border="0" width="100%" cellpadding="4" cellspacing="0">
<tr><td colspan="4"><input type="text" name="txtMain" value="Escriba una frase a la cual aplicar el efecto" style="width:100%;" onFocus="blnEdit = true;this.select()" onBlur="blnEdit = false"></td></tr>
<tr valign="top"><td><input type="radio" name="radMain" checked> Gradiente</td>
<td> </td>
<td> </td>
<td><input type="radio" name="radMain"> Arco Iris</td></tr>
<tr valign="top"><td>Color inicial:</td>
<td><select name="selStart" onChange="ftnSetCode()">
</select></td>
<td># <input type="text" name="txtStart" value="000000" size="6" maxlength="6" class="code" disabled onChange="ftnSetCustom()" onFocus="blnEdit = true" onBlur="blnEdit = false"></td>
<td> </td></tr>
<tr valign="top"><td>Color final:</td>
<td><select name="selEnd" onChange="ftnSetCode()">
</select></td>
<td># <input type="text" name="txtEnd" value="ff0000" size="6" maxlength="6" class="code" disabled onChange="ftnSetCustom()" onFocus="blnEdit = true" onBlur="blnEdit = false"></td>
<td> </td></tr>
<tr><td colspan="4" align="center"><button onClick="ftnGetCode()">Obtener BBCode</button></td></tr>
<tr><td colspan="4">Vista previa:<br>
<span id="spnMain">Escriba una frase a la cual aplicar el efecto</span></td></tr>
<tr><td colspan="4">BBCode:<br>
<textarea name="txaMain" rows="8" readonly onFocus="blnEdit = true" onBlur="blnEdit = false">Escriba una frase a la cual aplicar el efecto</textarea></td></tr>
</table>
</form>
</body>
</html>
Para conocer más...
Para conocer más sobre aplicaciones HTML mirá mis post anteriores:
•
•
•
Espero que les haya gustado. Saludos.