Xwork's Blog: basic html

Mostrando las entradas con la etiqueta basic html. Mostrar todas las entradas

Vamos a programar #36 - DecToAny, versión Javascript.

Hola de nuevo a todos, el día de hoy vamos a ver el mismo programa que vimos en el post anterior.
Te preguntarás, lo mismo, otra vez? En esencia es lo mismo, lo único que cambia es el lenguaje en el cual se ejecuta.

Inicialmente iba a hacer la aplicacion para andoid, pero gente me pidio una version en javascript, entonces por eso decidi hace primero esta versióm (y adivinaste, la semana que viene publicaré la version android).

El código.

El código en javascript que convierte de decimal a otras bases es el siguiente:

<html>
	<head>
	<title>Convertidor de decimal a otras bases</title>
	<style type="text/css">
	.h1Cal
	{
	   font-size: 14px;
	}
	.formDecToAny{
		font: 95% Arial, Helvetica, sans-serif;
		max-width: 400px;
		margin: 10px auto;
		padding: 16px;
		background: #F9F9F9;
	}
	.TextCal
	{
		width: 100%;
		box-sizing: border-box;
		border: 2px solid #999;
		border-radius: 4px;
	}

	.ButtonCal
	{
	width: 100%;
		background-color: #26c6da;
		border: none;
		color: white;
		padding: 15px 32px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		-webkit-transition-duration: 0.4s; /* Safari */
		transition-duration: 0.4s;
	}

	.ButtonCal:hover
	{
	width: 100%;
		background-color: #35d5e5;
		border: none;
		color: white;
		padding: 15px 32px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
	}
	</style>
	<script type="text/javascript">

	function DecToAny(Number, Base){
		var LastNumber = parseInt(Number, 10);
		var Garbage;
		var result = []
		debugger;
		if (LastNumber < Base)
		{
			result.push(LastNumber);
		}
		else
		{
			while (LastNumber >= Base) {
				Garbage = LastNumber % Base;
				LastNumber = Math.floor(LastNumber / Base);
				if (LastNumber < Base)
				{
					result.push(Garbage.toString());
					result.push(LastNumber.toString());
				}
				else
				{
					result.push(Garbage.toString());
				}
			}
		}
		return result;
	}

	function NumberToChar(Number){
		if(Number < 10)
			return Number;
		else
			return String.fromCharCode(parseInt(Number, 10) + 55);
	}

	function ArrayToString(){
		var GetNumber = document.getElementById('InputNumber').value;
		var GetBase = document.getElementById('InputBase').value;
		if(GetNumber.length < 1 || GetBase.length < 1)
		{
			alert('El numero/base no puede estar en blanco');
			return;
		}
		var Convert = DecToAny(GetNumber,GetBase);
		var Out = "";
		Convert.reverse()
		for(var i = 0; i < Convert.length; i++)
		{
			Out = Out + NumberToChar(Convert[i])
		}
		document.getElementById('Result').value = Out;
	}
	</script>
	</head>
	<body>
		<form class="formDecToAny">
			<span class="h1Cal">Numero decimal a convertir:</span>
			<input class="TextCal" id="InputNumber" type="text"></input><br />
			<span class="h1Cal">Base a la cual convertir:</span>
			<input class="TextCal" id="InputBase" type="text"></input><br />
			<br />
			<input class="ButtonCal" id="ToAny" onclick="ArrayToString()" type="button" value="Convertir" /><br />
			<br />
			<span class="h1Cal">Resultado:</span>
			<input class="TextCal" id="Result" type="text"></input><br />
			<br />
		</form>
	</body>
</html>

El código esta formado por 3 funciones. La priera es "DecToAny", esta será la encargada de hacer los cálculos, hay que recordar que todo el proceso se lleva a cabo por una sucesión de divisiones. Esta función recibe dos parámetros, el primero es el número que queremos convertir, el segundo es la base objetivo. Devuelve una matriz que contiene los valores en orden inverso.

La segunda función es "NumberToChar", esta recibe un número cómo parámetro y lo único que hace es comprobar si el número es menor a 10, si es así, entonces solo devuelve el número que se ingreso, en caso contrario, convertirá el número ingresado cómo parámetro y lo devolverá con el valor correcto, hay que recordar que cuando usamos el décimo dígito en una base 12; por ejemplo; no podemos poner 0,2,3,4,5,6,7,8,9,10,11,12 (que serian los doce dígitos necesarios para representar todos los números simples hasta la base), en su lugar, debemos de recurrir a letras: 0,1,2,3,4,5,6,7,8,9,0,A,B. Con está función tenemos disponible hasta el dígito Z (base 35).
Finalmente tenemos la función "ArrayToString" que se encarga de convertir todos los datos de la matriz devuelta por la función "DecToAny" a un formato legible para las personas, internamente también llama a la función "NumberToChar" para que el resultado contenga letras cuando se hace uso del décimo o más. Cuando se quiera convertir un número, esta es la función que se debe mandar a llamar.

Para el formulario, solamente se hace uso de tres Textbox(text), uno servirá para introducir el número a convertir, otro recibirá la base de destino y el tercero mostrará el resultado. Ademas se hace el uso de un boton(button) que al hacer clic sobre el, mandará a llamar a la función "ArrayToString".

Cómo podrás ver, el código es realmente similar al de la versión C# que hicimos en el post anterior, con esto quiero demostrar que resulta relativamente fácil portar un programa de un lenguaje a otro, ahora solo queda pendiente la versión para android, pero eso será la semana que viene. Cómo siempre, el código completo lo puedes descargar de mi dropbox, pero además la versión online también esta disponible para su ejecución en este blog.

Por ahora es todo. Los leo luego.

Seguir Leyendo

5/11/2017 05:38:00 p.m. basic html , Basics , binario , Convertidor de bases , CSS , estilos css , hexadecimal , how to , octal , programacion , ternario

Vamos a programar #34 - Depurando código de javascript.

Hola de nuevo a todos, el día de hoy vamos a ver una parte esencial para cualquier persona que se dedica a programar.

Cuando se crea un código nuevo, este siempre estará propenso a errores, está más que garantizado, que sin importar que tanto tiempo lleves en la programación, siempre surgirán errores. Algunos de ellos serán tan simples cómo: "olvide una coma", otros no tan obvios y solo surgirán al momento que se ejecute el código.
Para estos caso, en la mayoría de entornos de desarrollo siempre dispondremos de una herramienta que se encargara de dejarnos ver que es lo que está pasando en determinado punto del programa.

Suponiendo que queremos ver que está pasando en determinado punto del programa, en javascript; existe la palabra reservada "debugger", cuando la ejecución del programa se encuentra con esa palabra, la ejecución se detendrá y mostrará en la consola los datos correspondientes a las variables.

Para que la ejecución del depurador ocurra, el modo desarrollado debe de estar activado, para hacerlo en Google Chrome, basta con oprimir la tecla F12 (y se abrirá un ventana incrustada cómo en la primer imagen). En lo personal, prefiero usar Firefox, para acceder al modo desarrollador, basta con hacer clic en menú>Desarrollador > Depurador. Para el caso de Opera, debes de hacer clic en menú>Desarrollador>Herramientas de desarrollo.

En la siguiente imagen se muestra las partes importantes de la ventana de depuración:

El area con un recuadro rojo (1), son los controles que no servirán para controlar el flujo del código, existen cuatro botones y cada uno hace en orden de aparición lo siguiente:

Continua con el flujo normal del programa; es decir: ejecuta el programa hasta salir de la función o parte de código en la cual se invocó el depurador.
Las siguientes sirven para avanzar de "uno por uno", cada vez que se oprima, el programa avanzará una linea en el programa, si al momento de hacerlo se encuentra con la llamada a una función, el cursor se desplazará hasta ella y continuará la ejecución en la parte donde empieza, si se continua, avanzará sobre las lineas de la función y cuando acabe, volverá a donde se encontraba pero avanzando a la siguiente linea después de la ejecución de la función. Ademas al hacer esto, en la parte enmarcada en verde (2) todas las variables que se creen o cambien se mostraran ahí.
El último botón ejecutara hasta el final del bloque de código y al igual que el anterior, si hay cambios en las variables, se mostrarán en el panel Variables.

Todo esto sirve para revisar paso a paso lo que sucede en cada variable al momento de que se realiza la ejecución. Supongamos que un días llegas ebrio y decides agregar unas cuantas lineas de código, cuando recuperes tu sobriedad, probablemente puedas identificar la mayor parte del código que agregaste, pero si por alguna razón, una linea pasa desapercibida; pueden ocurrir muchos dolores de cabeza (y no lo digo cómo anécdota).

Cuando los errores se detectan, que es lo que se debe de hacer? usualmente los errores que se encuentren, se mostraran en un apartado llamado "consola web"

Por cada error habrá una pequeña descripción acerca de este, en el caso de la imagen, Nos dice que hay un error en la linea 183; nos dice que al tratar de obtener un elemento por su ID, este nos devolvió "NULL", eso puede significar que el objeto que estamos tratando de obtener no existe, pero Nosotros sabemos que si está, al revisar la linea vemos que el código es: "document.getElementById('ResulT').value = Salida;", al revisar los objetos que creamos en el formulario vemos que no hay ningun elemento que tenga esa ID y el mas cercano es "Result". Entonces eso significa que cometimos un error al escribir el ID del objeto que queríamos y en su lugar, mandamos a llamar a otro que no existe. Al cambiar el ID por el correcto, el error desaparece.

Con esas herramientas resultará mas sencilla la tarea de eliminar bug's de nuestro código.
Por el momento es todo, en próximos post, veremos cómo es el proceso de depuración en otras plataformas.

Los leo luego.

Seguir Leyendo

4/06/2017 01:08:00 p.m. basic html , CSS , depuracion , how to , Javascript , programacion

Vamos a programar #33 - Calculadora de Vigenère ver2.0.

Hola de nuevo a todos, el día de hoy vamos a ver una actualización para la calculadora de Vigenere que previamente ya habíamos hecho.
La primera versión de esta cumplía con su trabajo, pero no estaba totalmente hecha, no era capaz de interpretar símbolos que no fueran letras. El día de hoy vamos a agregar el código necesario para que funcione.

El código.

El código javascript para la calculadora de Vigenere es el siguiente:

function AsciiToA1(Char1)
{
	if (IsLower(Char1)){
	 Char1 -= 32;	
	}
	if (IsEnie(Char1)){
	return 15;
	}else if(Char1-64 < 15){
		return(Char1-64);
	}
	else if(Char1-64 >= 15 && Char1-64 < 28){
		return(Char1-63);
	}
}

function IsLetter(c){
	return IsUpper(c) || IsLower(c);
}

function IsEnie(Char2){
	if(Char2 == 209 || Char2 == 241){
		return true;
	}else{
		return false;
	}

}

function IsUpper(Char3){
	if((Char3 >= 65 && Char3 <= 90) || (Char3 == 209)){
		return true;
	}else{
		return false;
	}
}

function IsLower(Char4){
	if((Char4 >= 97 && Char4 <= 122) || (Char4 == 241)){
		return true;
	}else{
		return false;
	}
}

function IsA1Char(Char5){
	if (Char5 > 27){
		return false;
	}else{
		return true;
	}
}
function Encriptar(ModeEnc)
{
	debugger;
	var GetPhrase = document.getElementById('InputText').value;
	var GetPass = document.getElementById('PassWord').value;
	var Codes = [];
	if(GetPhrase.length < 1 || GetPass.length < 1)
	{
		alert('La frase/contraseña no puede estar en blanco')
		return;
	}
	var PassData = PhraseToArray(GetPass);
	var PhraseData = PhraseToArray(GetPhrase);
	var SpaceCount = 0;
	if (ModeEnc == true){
		for(var i = 0; i < PhraseData.length; i++){
			if(IsA1Char(PhraseData[i]) == false){
				Codes.push(PhraseData[i]);
				SpaceCount += 1;
			}else if(IsA1Char(PhraseData[i]) == true){
				Codes.push((PassData[(i - SpaceCount) % PassData.length] + PhraseData[i]) % 27);
			}
		}
	}else{
		for(var i = 0; i < PhraseData.length; i++)	{
			if(IsA1Char(PhraseData[i]) == false){
				Codes.push(PhraseData[i]);
				SpaceCount += 1;
			}else{
				var Value = PhraseData[i] - PassData[(i - SpaceCount) % PassData.length];
				if (Value < 1){
					Value += 27;
				}
			Codes.push(Value % 27);
			}
		}
	}
	document.getElementById('Result').value = Codes;
	return Codes;
}
function RebuildString(Codigos)
{
	var Salida = ""
	for(var i = 0; i < Codigos.length; i++)
	{
		if (IsA1Char(Codigos[i]) == false){
			Salida += String.fromCharCode(Codigos[i]);
		}else{
			if (Codigos[i] == 15 )
				Salida += String.fromCharCode(209);
			if (Codigos[i] == 0)
				Salida += String.fromCharCode(90);
			if(Codigos[i] < 15 && Codigos [i] > 0)
				Salida += String.fromCharCode(Codigos[i]+64);
			if(Codigos[i] > 15 && Codigos[i] < 28)
				Salida += String.fromCharCode(Codigos[i]+63);
		}
	}
	document.getElementById('Result').value = Salida;
}

function PhraseToArray(Text){
	var Out = [];
	for(var i = 0; i < Text.length; i++){
		var CodeChar = Text.charCodeAt(i);
		if(IsLetter(CodeChar) == true){
			Out.push(AsciiToA1(CodeChar));
		}else{
			Out.push(CodeChar);
		}
	}
	return Out;
}

Cómo verás, se han agregado varias funciones, la primera de ellas es "AsciiToA1". Está cómo su nombre lo indica, servirá para que el carácter que se le pase cómo parámetro, lo convierta a su equivalente A1Z27. la función de vuelve un valor entre 1 y 27 que representa la posición de la letra en el alfabeto.

La función "IsLetter" sirve para determinar si el parámetro usado es una letra, para ello comprobara si al llamar a las funciones "IsUpper" ó "IsLower" devuelven true, si al llamar a esas funciones y cualquiera de las dos devuelve un valor false, podemos asumir que el numero de caracter que se pasó, es equivalente a una letra.

La función "IsEnie" sirve para determinar si el parámetro usado es la letra Ñ, ya se mayúscula o minuscula. Hay que recordar que en el standar Ascii extendido, la letra Ñ no es continua a la letra N, en cambio esta hasta la posición 209 para la "Ñ" y 241 para "ñ", cuando se pasan esos números cómo parámetro devuelve true, en caso contrario false.

Las funciones "IsUpper" e "IsLower", sirven para determinar si la letra que se pasó cómo parámetro es mayúscula o minúscula (respectivamente), si el parámetro está dentro del rango 65~90 o es 209, la función "IsUpper" devuelve true. Para la función "IsLower", cuando el parámetro está en el rango 97~122 o es 241, devuelve true, en caso contrario devuelve false.

Finalmente la función "IsA1Char" sirve para determinar si el parámetro que se le pasa, esta dentro del rango 1~27, si es así, devuelve true, en caso contrario devuelve false. Todo esto se usa porque cuando se hace el cálculo, los valores se trabajan de la forma A1Z27, entonces, cualquier valor que se encuentre fuera de este rango, será un símbolo y no se debe de tomar en cuenta.

Además los estilos CSS se mejoraron un poco para hacerlo un poco más vistoso.

.h1v
{
    font-size: 16px;
}
.formVigenere{
    font: 95% Arial, Helvetica, sans-serif;
    max-width: 400px;
    margin: 10px auto;
    padding: 16px;
    background: #F9F9F9;
}
.textareaV
{
    width: 100%;
    height: 150px;
    padding: 2px 5px;
    box-sizing: border-box;
    border: 2px solid #999;
    border-radius: 4px;
    resize: none;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.textareaV:focus
{
    width: 100%;
    height: 150px;
    padding: 2px 5px;
    box-sizing: border-box;
    border: 2px solid #00BB00;
    border-radius: 4px;
    resize: none;
}

.TextV
{
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #999;
    border-radius: 4px;
}

.ButtonV
{
width: 100%;
    background-color: #009900;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.ButtonV:hover
{
width: 100%;
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

Con el uso de estas funciones, la calculadora se ha vuelto más funcional y con el código CSS se ve mejor. El resultado cómo de costumbre lo puedes bajar de mi dropbox.

Por ahora es todo. Los leo luego.

Seguir Leyendo

3/30/2017 04:08:00 p.m. A1Z27 , basic html , cifrado , cifrado vigenere , CSS , estilos css , HTML , Javascript , programacion

Vamos a programar #31 - Calculadora de Vigenere en javascript.

Hola de nuevo a todos el día de hoy vamos a ver cómo automatizar un poco el proceso de encriptar texto usando el cifrado de Vigenere.
En el post anterior vimos cómo realizarlo "a mano" pero cómo hacer eso requiere tiempo, el día de hoy veremos código en javascript que realiza el trabajo de manera mucho más rápida y "eficiente".

El Cuerpo.

Para empezar debemos de incluir un nuevo formulario con los siguientes controles:

TextArea.
Textbox.
Boton1
Boton2.
Text Area.

El código que se encarga de insertar los controles es el siguiente (no olvides que estos van en la seccion "body" de la página).

<form class="formVigenere">
<span class="h1v">Frase a des/encriptar:</span>
<textarea class="textareaV" id="InputText" rows="5"></textarea> 
<span class="h1v">Contraseña</span> 
<input class="TextV" id="PassWord" type="text" /> 
<input class="ButtonV" id="Encrypt" onclick="RebuildString(Encriptar(true))" type="button" value="Encriptar" /> 
<input class="ButtonV" id="UnEncrypt" onclick="RebuildString(Encriptar(false))" type="button" value="Desencriptar" /> 
<span class="h1v">Resultado</span>
<textarea class="textareaV" id="Result" rows="5"></textarea></form>

Con el código anterior insertamos 2 Textareas con ID "InputText" y "Resultado", ellas servirán para pedir la frase que se quiere procesar y para mostrar el resultado.
Tambien insertamos un Textbox con ID "PassWord" que serevirá para que el usuario instroduzca la frase que se usará cómo contraseña.
Finalmente insertaremos dos Buttons con ID "Encrypt" y "UnEncrypt" que se usarán para hace el proceso.

El cerebro.

Ahora veamos el código de javascript que se encarga de hacer los cálculos.

<script type="text/javascript">
  function PhraseToArray(Frase)
  {
   var Out = [];
   for(var i = 0; i < Frase.length; i++)
   {
    var CodeNumber = Frase.charCodeAt(i);
    if(CodeNumber >= 97 && CodeNumber <= 122)
    {
     CodeNumber = CodeNumber - 32;
    }
    if(CodeNumber == 209 || CodeNumber == 241)
    {
     Out.push(15);
    }
    if(CodeNumber == 32)
    {
     Out.push(32);
    }
    else{
     if(CodeNumber-64 < 15)
     {
      Out.push(CodeNumber-64);
     }
     else if(CodeNumber-64 >= 15 && CodeNumber-64 < 28){
      Out.push(CodeNumber-63);
     }
    }
   }
   return Out;
  }
  function Encriptar(ModeEnc)
  {
   var GetPhrase = document.getElementById('InputText').value;
   var GetPass = document.getElementById('PassWord').value;
   var Codes = [];
   if(GetPhrase.length < 1 || GetPass.length < 1)
   {
    alert('La frase/contraseña no puede estar en blanco')
    return;
   }
   var PassData = PhraseToArray(GetPass);
   var PhraseData = PhraseToArray(GetPhrase);
   var SpaceCount = 0;
   if (ModeEnc == true)
   {
    for(var i = 0; i < PhraseData.length; i++)
    {
     if(PhraseData[i] == 32)
     {
      Codes.push(32);
      SpaceCount += 1;
     }else{
      Codes.push((PassData[(i - SpaceCount) % PassData.length] + PhraseData[i]) % 27);
     }
    }
   }else{
    for(var i = 0; i < PhraseData.length; i++)
    {
     if(PhraseData[i] == 32)
     {
      Codes.push(32);
      SpaceCount += 1;
     }else{
      var Value = PhraseData[i] - PassData[(i - SpaceCount) % PassData.length];
      if (Value < 1)
      {
       Value += 27;
      }
     Codes.push(Value % 27);
     }
    }
   }
   return Codes;
  }
<!-- Devolver el resultado -->
  function RebuildString(Codigos)
  {
   var Salida = ""
   for(var i = 0; i < Codigos.length; i++)
   {
    if (Codigos[i] == 15 )
    {
     Salida += String.fromCharCode(209);
    }
    if (Codigos[i] == 32)
    {
     Salida += String.fromCharCode(32);
    }
    if (Codigos[i] == 0)
    {
     Salida += String.fromCharCode(90);
    }
    if(Codigos[i] < 15 && Codigos [i] > 0)
     Salida += String.fromCharCode(Codigos[i]+64);
    else if(Codigos[i] > 15 && Codigos[i] < 28){
     Salida += String.fromCharCode(Codigos[i]+63);
    }
   }
   document.getElementById('Result').value = Salida;
  }
  </script>

El código anterior está "sucio" pero el principal motivo del post es mostrar cómo pasar la idea (lo que hicimos en el post anterior) a su versión de código mas cruda. En el próximo post modificaré el código para evitar todas esas partes que a la hora de la eficiencia se vuelven innecesarias.

Todo el proceso de encriptar se lleva a cabo con tres funciones.
La función "PhraseToArray" se encarga de convertir las letras de la frase a encriptar junto con la contraseña a números que se puedan usar en el cifrado donde "A = 1" y "Z = 27". Pero antes de hacer eso hay que recordar que internamente en una computadora, cada símbolo, letra o número;posee un valor y que realmente cuando pides que la computadora escriba un "@" utiliza un numero que representa a ese símbolo.

	-0	-1	-2	-3	-4	-5	-6	-7	-8	-9	-A	-B	-C	-D	-E	-F
0-		☺	☻	♥	♦	♣	♠	•	◘	○	◙	♂	♀	♪	♫	☼	0-
1-	►	◄	↕	‼	¶	§	▬	↨	↑	↓	→	←	∟	↔	▲	▼	1-
2-		!	"	#	$	%	&	'	(	)	*	+	,	-	.	/	2-
3-	0	1	2	3	4	5	6	7	8	9	:	;	<	=	>	?	3-
4-	@	A	B	C	D	E	F	G	H	I	J	K	L	M	N	O	4-
5-	P	Q	R	S	T	U	V	W	X	Y	Z	[	\	]	^	_	5-
6-	`	a	b	c	d	e	f	g	h	i	j	k	l	m	n	o	6-
7-	p	q	r	s	t	u	v	w	x	y	z	{	\|	}	~	⌂	7-
8-	Ç	ü	é	â	ä	à	å	ç	ê	ë	è	ï	î	ì	Ä	Å	8-
9-	É	æ	Æ	ô	ö	ò	û	ù	ÿ	Ö	Ü	¢	£	¥	₧	ƒ	9-
A-	á	í	ó	ú	ñ	Ñ	ª	º	¿	⌐	¬	½	¼	¡	«	»	A-
B-	░	▒	▓	│	┤	╡	╢	╖	╕	╣	║	╗	╝	╜	╛	┐	B-
C-	└	┴	┬	├	─	┼	╞	╟	╚	╔	╩	╦	╠	═	╬	╧	C-
D-	╨	╤	╥	╙	╘	╒	╓	╫	╪	┘	┌	█	▄	▌	▐	▀	D-
E-	α	ß	Γ	π	Σ	σ	µ	τ	Φ	Θ	Ω	δ	∞	φ	ε	∩	E-
F-	≡	±	≥	≤	⌠	⌡	÷	≈	°	∙	·	√	ⁿ	²	■		F-
	-0	-1	-2	-3	-4	-5	-6	-7	-8	-9	-A	-B	-C	-D	-E	-F

Cómo podrás ver, en la tabla (original de Wikipedia) hay toda una serie de símbolo y letras que se pueden mostrar usando el standard ascii (está es la versón extendida).
Antes que nada lo primero que puedes notar es que las letras minúsculas y mayúsculas tienen un numero diferente, entonces si queremos escribir la letra "A", su valor interno será diferente al de la letra "a", para poder usar el cifrado de Vigenere debemos de buscar una forma tal que sin importar que sea mayúscula o minúscula siempre nos devuelva 1.
Para eso en la función "PhraseToArray" nos encargamos de convertir cualquier valor que entre y dejarlo de tal forma que corresponda a la forma A1Z27.
La funcion "Encriptar" es la que se encargara de hacer los cálculos para que el resultado tenga el mensaje cifrado. Además la misma funcion recibe un parámetro booleano que indica cual es el método a seguir; es decir; si debe de encriptar o des-encriptar el texto. Internamente hace un para de llamadas a la función "PhraseToArray", la primera se usará para volver todas las letras de la frase a encriptar al modo A1Z27 y la segunda hará lo mismo pero está vez lo hará para la contraseña.
Después se encargará de hacer los cálculos, hay que recordar que los "valores" de las letras se suman, pero en ocasiones, la contraseña será mas corta que el texto a encriptar. entonces para evitar que si por ejemplo: tenemos una frase de 10 letras con una contraseña de 4 letras, cuando alcanzamos el numero máximo de letras en la contraseña, hay que repetir otra vez desde el inicio, ademas hay que recordar que cuando trabajamos con texto en una computadora, todos los caracteres tienen un valor por lo que si hay un espacio " " también contara, por lo que si tenemos una frase de 3 palabras con 10 letras podríamos tener en realidad 12 letras en una computadora.
Para evitar ese tipo de errores, la función se encarga de contar los espacios en blanco y hacer las operaciones pertinentes de tal modo que si hay espacios (y eso es lo que se debe de hacer con todos los caracteres NO alfabéticos) al momento de hacer las sumas no se tome en cuenta.
Lo mismo más o menos hace con el otro proceso.
Finalmente, el resultado serán los valores A1Z27 por lo que hay que volverlos a pasar a ASCII.
Para realizar este trabajo se usa la funcion "RebuildString" que lo único que hace es sumar determinado numero de tal forma que si tenemos 1 (que representa a la letra A) nos devuelva la letra en cuestión.
Los botones se usarán para mandar a llamar a la funcion "Encriptar" y el resultado se mostrará en el TextArea "Result".

Un punto importante a resltar es que al haber letras "Ñ" en el idioma español, es realmente importante hacer los cambios necesarios para que en el momento de realizar los calculos no nos llevemos sorpresas. La Ñ ocupa el lugar 15 pero en el standard ASCII si directamente le sumáramos el numero seguido de la N obtendríamos la O. Esto se debe a que la Ñ es representada por los números 209 para la Ñ y 241 para la ñ Mientras que la O es el 79.

Con el código anterior ya estaria todo listo pero para que no quede muy feo el formulario agregamos el siguiente código CSS.

<style type="text/css">
.h1v
{
    font-size: 16px;
}
.formVigenere{
    font: 95% Arial, Helvetica, sans-serif;
    max-width: 400px;
    margin: 10px auto;
    padding: 16px;
    background: #F9F9F9;
}
.textareaV
{
    width: 100%;
    height: 150px;
    padding: 2px 5px;
    box-sizing: border-box;
    border: 2px solid #999;
    border-radius: 4px;
    resize: none;
}
.TextV
{
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #999;
    border-radius: 4px;
}
.ButtonV
{
width: 100%;
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
</style>

Con eso ya tendrás lista la calculadora de Vigenere. En el siguiente post vamos a ver la versión optimizada de este código, se puede reducir bastante, además de que en este si se incluyen símbolos o números, no funciona correctamente.

El resultado:

Los leo Luego.

Seguir Leyendo

3/09/2017 05:36:00 p.m. 10K , A1Z27 , basic html , Challenge , cifrado , cifrado vigenere , CSS , estilos css , Estlos para formularios , programacion , Reto de Xwork

Vamos a programar #21 - Formateando código para HTML.

Hola de nuevo a todos. El día de hoy traigo una aplicación muy corta. Cómo todos sabrán, la mayor parte de este blog trata sobre cosas de programación, por lo que es muy común que publique código fuente en variedad de lenguajes.
Pero al momento de publicar algo, surge un pequeño problema, al copiar el código del editor al blog, este pierde todo el formato. Actualmente uso unos scripts que permiten darle color a la sintaxis, pero cosas como la indentación, se pierden. En lo personal, siempre me gusta ver código que este visiblemente bien, es decir; que se distinga en "donde estás". Un indicador muy claro, es la sangría. Si vez que todo está a la misma distancia, resulta fácil ver que todo es parte de un "if" o parte de un "while".
Para solucionar todo esto y poder formatear el código de una forma más rapida, decidí hacer una aplicación que se encargue del trabajo sucio.

La aplicación es realmente simple, de hecho solo son 10 lineas de código, es una versión beta, y lo único que hace es convertir todos los caracteres que no están admitidos en el html (como "< o >" ).
Dentro las funciones que nos proporciona el api de .NET existe a siguiente función:

RtBResultCode.Text = WebUtility.HtmlEncode(RTBInputCode.Text);

Está función se encuentra en el espacio System.Net; y hace exactamente lo que queremos, formatear todo el código para que lo podamos usar en el lenguaje HTML. Pero bueno si solo quisiera hacer eso no sería una solución a la indentación, de hecho si revisamos el siguiente código (que viene de este blog)

<resources>
<string name="app_name">Calculador de resistencias</string>
 <string-array name="Colores1">
 <item>Negro</item>
 <item>cafe</item>
 <item>Rojo</item>
 <item>Naranja</item>
 <item>Amarillo</item>
 <item>Verde</item>
 <item>Azul</item>
 <item>Violeta</item>
 <item>Gris</item>
 <item>Blanco</item>
 </string-array>
 <string-array name="Colores2">
 <item>Dorado</item>
 <item>Plata</item>
 </string-array>
</resources>

Pero eso no es lo que quiero, si nos damos cuenta todas las tabulaciones han sido reemplazadas por espacios que visualmente son más pequeños.
En cambio cuan usamos el código producido por el programa; lucirá de la siguiente forma:

<resources>
<string name="app_name">Calculador de resistencias</string>
 <string-array name="Colores1">
  <item>Negro</item>
  <item>cafe</item>
  <item>Rojo</item>
  <item>Naranja</item>
  <item>Amarillo</item>
  <item>Verde</item>
  <item>Azul</item>
  <item>Violeta</item>
  <item>Gris</item>
  <item>Blanco</item>
 </string-array>
 <string-array name="Colores2">
  <item>Dorado</item>
  <item>Plata</item>
 </string-array>
</resources>

Por ahora el código solo hace eso, pero si por ejemplo el código tiene espacios en blanco, no obtendremos un resultado diferente al del primer caso.

En la siguiente versión vamos implementar funciones que se encarguen de hacer todo de forma automatica. Si lo que quieres es publicar código, lo ,mejor es que luzca, que al momento de echar un vistazo rápido, puedas ver que al menos está bien estructurado.
Además lo dejo así porque ando un poco corto de tiempo, pero espero ya no estarlo para la próxima semana. Como siempre, el programa lo puedes bajar de dropbox, en cuanto lo actualice haré el siguiente Post.

Por ahora es todo. Los leo luego.

Seguir Leyendo

11/10/2016 08:51:00 p.m. android , basic html , csharp , CSS , estilos css , how to , HTML , Javascript , MatLab , programacion

Vamos a programar #20 - SlideShow en JavaScript + CSS

Hola de nuevo a todos, hace algunos días contacté con alguien que me encontré en Internet con la intención de hacernos publicidad mutuamente, a lo mejor ya viste el banner que puse en la esquina superior derecha.

EL problema es que no encontraba una forma de acomodar todas la cosas que ya había en la pagina principal, ¿Cómo debería acomodar esto?, la opción más sencilla era insertar todas las cosas una tras otra y esperar a que la pagina no se extendiera tanto. Si se pone una imagen diferente para cada página "amiga", si pongo al menos 3, ocuparía un buen espacio.

Para solucionar este problema decidí hacer un pequeño script que se encargue de intercambiar imágenes, así en lugar de poner 4 o 5 imágenes y desplazar todo 600 pixeles hacia abajo, puedo poner n numero de imágenes en un solo espacio de 320 * 110 (o el tamaño que sea la imagen más grande).

Para nuestro ejemplo tomemos las siguientes imágenes:

Al inicio estaba buscando una forma de hacerlo totalmente en javascript, pero alguien me dijo: "Si usas CSS3, es más sencillo". Entonces decidí hacer uso de ambas para lograrlo.

El código CSS.

El código CSS que vamos a usar es el siguiente:

@keyframes FadeFromRight{
 from{
  right:-150px;
  opacity:0
 }
 to{
  right:0;
  opacity:1}
 }

.FadeImage{
 position:relative;
 -webkit-animation:FadeFromRight 0.5s;
 animation:FadeFromRight 0.5s
}
img{border-style:none}

Primeramente creamos una animación a la que llamamos "FadeFromRight", lo que va a hacer es crear el objeto desde la posición -150px con una opacidad del 0 (Transparente) y hará una animación en la que se moverá hasta posición 0 y ademas, su nivel de opacidad sera de 1 (solido).

Después creamos una clase llamada ".FadeImage", en la cual ponemos que la animación que haga la imagen (o lo que sea que haga uso de esta clase), durará 0.5s.

Finalmente definimos un estilo para la etiqueta IMG.

El código HTML.

Luego insertaremos las Imágenes que vayamos a usar, Es preferible que todas estén dentro de una capa, luego a cada una de las imágenes que conformaran el Slide Show, les pondremos el mismo nombre de clase, suponiendo que las imágenes que vayamos a usar se llaman Ban1, Ban2, Ban3 y Ban4, el código html para insertarlas luciria como el siguiente:

<div>
 <img class="Banners FadeImage" src = "BAN1.jpg"/>
 <img class="Banners FadeImage" src = "BAN2.jpg"/>
 <img class="Banners FadeImage" src = "BAN3.jpg"/>
 <img class="Banners FadeImage" src = "BAN4.jpg"/>
</div>

Con el Código anterior estamos indicando que las 4 imágenes pertenecen a la clase "Banners" y también a la clase "FadeImage", con ello tomará los estilos que definimos antes para "FadeImage" y "IMG".

El Código JavaScript.

Para lograr el efecto que deseamos, hay que modificar los estilos, javascript nos permite hacerlo sin tanto problema. El código que nos permite cambiar los estilo de las imágenes es el siguiente:

var myIndex = 0;
ChangeImage();

function ChangeImage() {
 var i;
 var x = document.getElementsByClassName("Banners");
 for (i = 0; i < x.length; i++) {
  x[i].style.display = "none";
 }
 myIndex++;
 if (myIndex > x.length) {myIndex = 1}
 x[myIndex-1].style.display = "block";
 setTimeout(ChangeImage, 5000);
}

El código anterior recorrerá todos los elementos que estén en la clase "Banners" y a todos le asignara el estilo "none" que hará que los elementos no se vean, luego comprobará que el valor iterador esté en lo limites de la cantidad de elementos que la clase "Banners" posea, después al final, se establece que la función "ChangeImage" se ejecutará cada 5000ms (5 segundos).

Tras implementar el código anterior obtendremos algo como lo siguiente (Si solo ves cuatro imágenes fijas, prueba actualizar tu navegador):

No está demás recordar que para que esto funcione, necesitamos un navegador no tan viejo, ademas de que se debe de hacer referencia a las imágenes usando su dirección absoluta. Si quieres hacer uso del código así tal cual, debes de asegurarte primero de que las imágenes están en el mismo directorio y que se llaman Ban1, Ban2, etc.

Cómo siempre, el código completo lo puedes descargar desde mi dropbox, recuerda que puedes usarlo, modificarlo o hacerle lo que quieras, si te resulta útil, no olvides mencionar que lo encontraste en el blog de Xwork.

Para terminar. Si no has visitado la página Gent0.com. ¡Qué estás esperando?!, hay buen información acerca de está distro de linux.

Bien, por ahora es todo. Los leo luego.

P,D. H071?? (solo para los que saben).

Seguir Leyendo

11/03/2016 07:17:00 p.m. aprende , basic html , CSS , DIY , Estilos , HTML , Javascript , programacion

Vamos a programar #3 - Estructura básica de una página HTML

Hola de nuevo a todos, el día de hoy voy a resolver dudas que les surgieron a muchos cuando hicimos la calculadora de resistencias. Es cierto que mi intención no era enseñarte a programar en HTML, pero muchos me preguntaron por MP como es que funcionaba el código completo, por que las etiquetas X iban antes que las Y, etc.

Por eso el día de hoy les voy a mostrar solo un poquito cómo es que esta estructurado el HTML.

Es posible crear una página web muy sencilla en pocos pasos ya que todas tienen una estructura básica que seguir.

Todas las paginas utilizan "etiquetas" y las mas importantes son:

<HTML> <HEAD> <TITLE> <BODY>

Estas se organizan de forma jerárquica, en donde la mas alta es <HTML>. Una pagina debe de empezar con esta etiqueta y terminar con su respectivo cierre </HTML> La siguiente etiqueta es: <HEAD>, Esta etiqueta es el encabezado de la pagina, aquí se puede incluir las características de la pagina, añadir los estilos CSS, el título y funciones de javascript, vbscript, etc. Ademas dentro de esta etiqueta se debe de incluir la etiqueta <TITLE>, esta sirve para cambiar el titulo que se muestra en la barra de titulo del navegador o como titulo de la pestaña. Hay que recordar que todas las etiquetas deben de llevar su respectivo cierre, en este caso como usamos la etiqueta <TITLE>, debemos de escribir el texto que queremos usar y de inmediato poner el cierre </TITLE>. Una vez que agregamos todo lo que necesitamos en el encabezado, también cerraremos el encabezado con </HEAD>.

Después viene la parte del cuerpo, en esta parte se incluirán los elementos que se mostraran al usuario; es decir: Texto, imágenes, vídeos, formularios, etc. La etiqueta <BODY> se usa para indicar que ahí es el comienzo del cuerpo. Dentro de esta etiqueta se pueden poner la mayoría de los elementos que componen a una pagina web: imágenes <IMG></IMG>, formularios <FORM></FORM>, vinculos <A></A>, etc. finalmente se debe de ponder la etiqueta de cierre </BODY> y generalmente no hay nada que agragar despues del cierre del cuerpo asi que tambien hay que cerrar la etiqueta principal </HTML> y con esto se entiende que la pagina ha llegado a su fin.

Algo que es importante resaltar es que el HTML no reconoce minúsculas de mayúsculas, así que es valido; por ejemplo; poner <BODY> que <Body> o <body> y tampoco se toma en cuenta los espacios por lo que se pude poner:

<TITLE>Hola mundo</TITLE>

o

<title>
Hola mundo
</title>

En ambos casos le estamos indicando que el titulo de la pagina es "Hola mundo", solo que en el primer ejemplo todo está escrito en la misma linea. Por recomendación deberías de usar el primer ejemplo, este ahorra datos porque en el no se incluyen los saltos de línea.
Y ya para terminar un ejemplo del programa mas básico de todos.

<HTML>
<HEAD>
<TITLE>Hola Mundo</TITLE>
</HEAD>
<BODY>
Esta cuenta como una pagina funcional que muestra hola mundo.
</BODY>
</HTMl>

La única función del código anterior es mostrar "Esta cuenta como una pagina funcional que muestra hola mundo.", para probarlo en un navegador puedes escribir todo el código anterior en un bloc de notas y guardarlo en archivo con extensión html ("Hello.html" es un nombre por ejemplo). Después lo abres en un navegador de Internet y el resultado deberá de ser similar al siguiente:

Y con esto ya sabrás como es que funciona de forma básica el HTML. ya después veremos cuestiones un poco mas avanzadas. Por lo mientras puedes ver como funciona el código que hicimos antes y comparar con lo que acabas de leer.

Los leo luego.

Seguir Leyendo

7/02/2016 09:14:00 p.m. aprende , basic html , CSS , DIY , how to , HTML , Javascript , programacion

Suscribirse a: Entradas ( Atom )

Xwork's Blog

Vamos a programar #36 - DecToAny, versión Javascript.

El código.

Vamos a programar #34 - Depurando código de javascript.

Vamos a programar #33 - Calculadora de Vigenère ver2.0.

El código.

Vamos a programar #31 - Calculadora de Vigenere en javascript.

El Cuerpo.

El cerebro.

Vamos a programar #21 - Formateando código para HTML.

Vamos a programar #20 - SlideShow en JavaScript + CSS

El código CSS.

El código HTML.

El Código JavaScript.

Vamos a programar #3 - Estructura básica de una página HTML

Archivo del Blog

Visitas.

Post mas vistos.

Etiquetas

Creative Commons

Acerca de mí

	-0	-1	-2	-3	-4	-5	-6	-7	-8	-9	-A	-B	-C	-D	-E	-F
0-		☺	☻	♥	♦	♣	♠	•	◘	○	◙	♂	♀	♪	♫	☼	0-
1-	►	◄	↕	‼	¶	§	▬	↨	↑	↓	→	←	∟	↔	▲	▼	1-
2-		!	"	#	$	%	&	'	(	)	*	+	,	-	.	/	2-
3-	0	1	2	3	4	5	6	7	8	9	:	;	<	=	>	?	3-
4-	@	A	B	C	D	E	F	G	H	I	J	K	L	M	N	O	4-
5-	P	Q	R	S	T	U	V	W	X	Y	Z	[	\	]	^	_	5-
6-	`	a	b	c	d	e	f	g	h	i	j	k	l	m	n	o	6-
7-	p	q	r	s	t	u	v	w	x	y	z	{	\|	}	~	⌂	7-
8-	Ç	ü	é	â	ä	à	å	ç	ê	ë	è	ï	î	ì	Ä	Å	8-
9-	É	æ	Æ	ô	ö	ò	û	ù	ÿ	Ö	Ü	¢	£	¥	₧	ƒ	9-
A-	á	í	ó	ú	ñ	Ñ	ª	º	¿	⌐	¬	½	¼	¡	«	»	A-
B-	░	▒	▓	│	┤	╡	╢	╖	╕	╣	║	╗	╝	╜	╛	┐	B-
C-	└	┴	┬	├	─	┼	╞	╟	╚	╔	╩	╦	╠	═	╬	╧	C-
D-	╨	╤	╥	╙	╘	╒	╓	╫	╪	┘	┌	█	▄	▌	▐	▀	D-
E-	α	ß	Γ	π	Σ	σ	µ	τ	Φ	Θ	Ω	δ	∞	φ	ε	∩	E-
F-	≡	±	≥	≤	⌠	⌡	÷	≈	°	∙	·	√	ⁿ	²	■		F-
	-0	-1	-2	-3	-4	-5	-6	-7	-8	-9	-A	-B	-C	-D	-E	-F

	-0	-1	-2	-3	-4	-5	-6	-7	-8	-9	-A	-B	-C	-D	-E	-F
0-		☺	☻	♥	♦	♣	♠	•	◘	○	◙	♂	♀	♪	♫	☼	0-
1-	►	◄	↕	‼	¶	§	▬	↨	↑	↓	→	←	∟	↔	▲	▼	1-
2-		!	"	#	$	%	&	'	(	)	*	+	,	-	.	/	2-
3-	0	1	2	3	4	5	6	7	8	9	:	;	<	=	>	?	3-
4-	@	A	B	C	D	E	F	G	H	I	J	K	L	M	N	O	4-
5-	P	Q	R	S	T	U	V	W	X	Y	Z	[	\	]	^	_	5-
6-	`	a	b	c	d	e	f	g	h	i	j	k	l	m	n	o	6-
7-	p	q	r	s	t	u	v	w	x	y	z	{	\|	}	~	⌂	7-
8-	Ç	ü	é	â	ä	à	å	ç	ê	ë	è	ï	î	ì	Ä	Å	8-
9-	É	æ	Æ	ô	ö	ò	û	ù	ÿ	Ö	Ü	¢	£	¥	₧	ƒ	9-
A-	á	í	ó	ú	ñ	Ñ	ª	º	¿	⌐	¬	½	¼	¡	«	»	A-
B-	░	▒	▓	│	┤	╡	╢	╖	╕	╣	║	╗	╝	╜	╛	┐	B-
C-	└	┴	┬	├	─	┼	╞	╟	╚	╔	╩	╦	╠	═	╬	╧	C-
D-	╨	╤	╥	╙	╘	╒	╓	╫	╪	┘	┌	█	▄	▌	▐	▀	D-
E-	α	ß	Γ	π	Σ	σ	µ	τ	Φ	Θ	Ω	δ	∞	φ	ε	∩	E-
F-	≡	±	≥	≤	⌠	⌡	÷	≈	°	∙	·	√	ⁿ	²	■		F-
	-0	-1	-2	-3	-4	-5	-6	-7	-8	-9	-A	-B	-C	-D	-E	-F

	-0	-1	-2	-3	-4	-5	-6	-7	-8	-9	-A	-B	-C	-D	-E	-F
0-		☺	☻	♥	♦	♣	♠	•	◘	○	◙	♂	♀	♪	♫	☼	0-
1-	►	◄	↕	‼	¶	§	▬	↨	↑	↓	→	←	∟	↔	▲	▼	1-
2-		!	"	#	$	%	&	'	(	)	*	+	,	-	.	/	2-
3-	0	1	2	3	4	5	6	7	8	9	:	;	<	=	>	?	3-
4-	@	A	B	C	D	E	F	G	H	I	J	K	L	M	N	O	4-
5-	P	Q	R	S	T	U	V	W	X	Y	Z	[	\	]	^	_	5-
6-	`	a	b	c	d	e	f	g	h	i	j	k	l	m	n	o	6-
7-	p	q	r	s	t	u	v	w	x	y	z	{	\|	}	~	⌂	7-
8-	Ç	ü	é	â	ä	à	å	ç	ê	ë	è	ï	î	ì	Ä	Å	8-
9-	É	æ	Æ	ô	ö	ò	û	ù	ÿ	Ö	Ü	¢	£	¥	₧	ƒ	9-
A-	á	í	ó	ú	ñ	Ñ	ª	º	¿	⌐	¬	½	¼	¡	«	»	A-
B-	░	▒	▓	│	┤	╡	╢	╖	╕	╣	║	╗	╝	╜	╛	┐	B-
C-	└	┴	┬	├	─	┼	╞	╟	╚	╔	╩	╦	╠	═	╬	╧	C-
D-	╨	╤	╥	╙	╘	╒	╓	╫	╪	┘	┌	█	▄	▌	▐	▀	D-
E-	α	ß	Γ	π	Σ	σ	µ	τ	Φ	Θ	Ω	δ	∞	φ	ε	∩	E-
F-	≡	±	≥	≤	⌠	⌡	÷	≈	°	∙	·	√	ⁿ	²	■		F-
	-0	-1	-2	-3	-4	-5	-6	-7	-8	-9	-A	-B	-C	-D	-E	-F