Xwork's Blog: HTML

Mostrando las entradas con la etiqueta HTML. Mostrar todas las entradas

Vamos a programar #99 - Modo obscuro en CSS 3.

Hola de nuevo a todos, el día hoy vamos a ver como aplicar el modo obscuro a una página web de manera sencilla.

Si te has dado vueltas por el blog, podrás observar que ahora, dependiendo de la configuración del sistema operativo-navegador, la página cambia de color, si el tema es obscuro, la página también lo será y si es claro, pasa lo mismo.

Para poder aplicar un tema de un color para cada caso, existe una forma sencilla de hacerlo y para poder apreciarlo mejor, vamos a ver un ejemplo con los estilos para la calculadora de Vigenere.

Para empezar, veamos cuales son los estilos actuales (dependiendo de cuando leas esto, los estilos pudieron haber cambiado, para que no haya problema puedes ir y revisar el código fuente de la página en vivo).

.h1v
{
    font-size: 16px;
}
.formVigenere{
    font: 95% Arial, Helvetica, sans-serif;
    max-width: 400px;
    margin: 10px auto;
    padding: 16px;
    background: #000;
}
.textareaV
{
    width: 100%;
    height: 150px;
    padding: 5px 8px;
    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 #50b;
    border-radius: 4px;
    resize: none;
}

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

.ButtonV
{
width: 100%;
    background-color: #57a2e2;
    border: none;
  border-radius: 4px;
    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: #224360;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

En CSS3, podemos definir clases que serán estilos para los objetos, cada vez que se le asigne una clase a un objeto, si está definido, este tomara la apariencia que la clase diga, pero además es posible sobrecargar ciertos estilos. En este caso, el primero paso para poder aplicar un tema obscuro, debemos de definir los estilos que serán predeterminados y para esto asumiremos que el estado normal siempre será el tema claro y la mayor parte del tema se basara en este.

Si observamos el caso de nuestro formulario tenemos que el texto es de color negro, el fondo es de color gris claro, los botones son de color azul claro y el área de las cajas de texto es blanco. Para poder idear un esquema de colores para el caso del tema obscuro, uno pensaría que bastaría con invertir los colores, pero no siempre es tan sencillo.

Si observamos la imagen de nueva cuenta, es el resultado de invertir los colores y si no está tan mal, hay que tener en cuanta cual es el color base del tema, en el caso del blog, la mayoría de elementos son de color azul y deberíamos de tratar de preservar la mayor parte de elementos de este color.

Analizando las partes del formulario, observamos que consta de los siguientes elementos: etiquetas, cajas de texto, botones de opción, botones y el área del formulario. Si por ejemplo observamos que las etiquetas tienen el fondo transparente y el color de las letras es negro, bastará con cambiar el área del formulario que directamente afecta el color de fondo de las etiquetas, que al ser transparentes tomaran el color del área del formulario y por lo cual solo debemos de ocuparnos del color del texto. Para eso bastara con tener en cuenta que para el área del formulario queremos un color muy oscuro o simplemente negro, para las etiquetas vamos a querer un color claro o blanco y para poder elegir uno adecuado, podemos usar las herramientas que nos ofrecen la mayoría de navegadores.

En google chrome si presionamos F12 se abrirá las herramientas para desarrolladores y podremos inspeccionar los elementos que la conforman, al poner el ratón sobre un elemento, se mostraran algunas propiedades y veremos que hay una que dice "Contrast" si aparece un icono de exclamación (cómo en la imagen anterior) quiere decir que la combinación de colores podría resultar difícil de leer.

En cambio si aparece una marca verde, eso indica que la combinación es adecuada para la lectura, pero además nos sirve para crear nuestro esquema de colores.

La ventaja del color azul que seleccioné para el blog es que resalta, pero no solo en colores oscuros, si no también en los obscuros, por eso podemos cambiar el área del formulario, el color de las letras en las etiquetas y con eso bastaría para que la lectura sea agradable em ambos modos: obscuro y claro.

Una vez que hemos determinado que es lo que se va a cambiar, en CSS3 existe una clase o consulta (queries) en la cual se va a aplicar cierto estilo basado en la configuración del sistema operativo, en este caso va a ser en el aspecto, tanto windows cómo Mac os tienen un ajuste en el cual se puede establecer si la mayor parte de los elementos serán claros o obscuro, pero además la mayoría de los navegadores tienen está misma opción.

Para hacer uso debemos usar "@media (prefers-color-scheme: dark)" y cuando el sistema operativo, navegador diga que se debe de usar el tema oscuro, todas las clases que estén aquí se aplicaran automáticamente sobrecargando las actuales (si se usan).

en nuestro caso, veamos que la definición para el área del formulario es:

.formVigenere{
    font: 95% Arial, Helvetica, sans-serif;
    max-width: 400px;
    margin: 10px auto;
    padding: 16px;
    background: #eee;
}

para hacer el cambio, dentro de "@media (prefers-color-scheme: dark)", debemos de crear una subclase que sera igual a la queremos modificar, en este caso, ".formVigenere" y solo incluiremos las propiedades que se van a cambiar en función al color, por lo que tendríamos algo así:

@media (prefers-color-scheme: dark) {
.formVigenere{
  background: #000;
  }

Para cada elemento iremos haciendo lo mismo hasta cubrir los cambio necesarios.

Y bien, por ahora es todo, cómo podrás ver, resulta sencillo hacer el cambio de esquemas y sirve de introducción para poder crear una variedad de temas y no solo claro y obscuro.

Los leo luego.

Seguir Leyendo

1/16/2022 02:19:00 p.m. aprende , CSS , HTML

Vamos a programar #56 - Los números de Munchhausen (ver. Javascript)

Hola de nuevo a todos, el día de hoy vamos a continuar con la prueba de la conjetura de los números de Munchhausen.

En el post anterior vimos cuales son las reglas, por lo que ahora pasaremos directamente al código javscript para ver las diferencias entre la versión de C# y esta.

El código.

El código en javascript para probar los números de Munchhausen es el siguiente:

<html>
	<head>
		<style type="text/css">
		.h1M
		{
			font-size: 16px;
		}
		.formVigenere{
			font: 95% Arial, Helvetica, sans-serif;
			max-width: 400px;
			margin: 10px auto;
			padding: 16px;
			background: #F9F9F9;
		}
		.textareaM
		{
			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;
		}

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

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

		.ButtonM
		{
		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;
		}

		.ButtonM:hover
		{
		width: 100%;
			background-color: #4CAF50;
			border: none;
			color: white;
			padding: 15px 32px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
		}
		</style>
		<script type="text/javascript">
		function NumberToDigits(Number){
			var Out = [];
			for(var i = 0; i < Number.length; i++){
				var CodeChar = Number.charCodeAt(i);
					Out.push(CodeChar - 48);
			}
			return Out;
		}

		function IsMunchhausen(Number){
			var Result = 0;
			var Digits = NumberToDigits(Number);
			for(var i = 0; i < Digits.length; i++){
				Result += Math.pow(Digits[i], Digits[i]);
			}
			if (Number == Result.toString()){
				return true;
			}
			else{
				return false;
			}
		}
		function TestNumbers(){
			document.getElementById('Result').value = "";
			BeginNumber = document.getElementById('MinNumber').value;
			EndNumber = document.getElementById('MaxNumber').value;
			SHowAll = document.getElementById('ShowAll').checked;
			for (var i = BeginNumber; i <= EndNumber; i++){
				if (IsMunchhausen(i.toString()))
					document.getElementById('Result').value += "La conjetura se cumple para el número " + i + "\n";
				else if (SHowAll)
					document.getElementById('Result').value += "El número " + i + " no cumple la conjetura\n";
			}
		}
		 </script>
	</head>
	<body>
	Utilidad para probar la conjetura de Munchhausen usando javascript.
	<form class="formVigenere">
		<span class="h1M">Numero de donde empezar:</span>
		<br />
		<input class="TextM" id="MinNumber" value = "1" type="text"></input><br />
		<span class="h1M">Numero hasta donde llegar</span><br /><br/>
		<input class="TextM" id="MaxNumber" value = "5000" type="text" /><br />
		<br />
		<input class="ButtonM" id="Calcula" onclick="TestNumbers()" type="button" value="Calcular" /><br />
		<br />
		<input type="checkbox" id = "ShowAll" value="Bike">Mostrar Todo<br><br>
		<span class="h1M">Resultado</span><br/>
		<textarea class="textareaM" id="Result" rows="5"></textarea><br/><br/>
	</form>
	</body>
<html>

El código anterior solo consta de tres funcione en esta ocasión en la función "NumberToDigits()" al convertir el número de entrada a los dígitos que lo forman, directamente hace la resta de 48 para poder usar el número directamente. Para poder recuperar los valores de cada control, hacemos uso de la función "document.getElementById".

Cómo de costumbre, el código lo dejo en mi dropbox para que lo pruebes, al ser el mismo "concepto" que la versión de C#, no requiere una explicación mayor. La semana que viene, veremos la versión para android.

Los leo luego.

Seguir Leyendo

8/12/2018 01:55:00 p.m. CSS , HTML , Javascript , munchhausen , 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 #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

Vamos a programar #2

Terminando lo anterior.

El día de hoy vamos a terminar de implementar la calculadora de resistencias, en la entrada anterior puse el código que se encarga de hacer el "cálculo" ademas del código de lo que vendría siendo la interfaz. Quedo pendiente la parte de como implementarlo.

Cómo dije antes esto no es un curso para aprender a programar; así que la creación de la ultima parte del código supongo que ya muchos lo implementaron pero si no, no te preocupes en la entrada de hoy terminaremos de implementar todo el código para que sea funcional y estético.

Luce aburrido, Lo sé.

Un formulario con "estilo"

Para empezar vamos a usar CSS3 para darle un poco de vida al formulario.

Para nuestra calculador usamos los componentes FORM , BUTTON, SELECT LABEL H1. A cada uno hay que darle un poco de estilo y para eso usaremos CSS.
Primero empezaremos con toda el area del formulario, para eso agregamos el siguiente código:

form {
font: 95% Arial, Helvetica, sans-serif;
max-width: 400px;
margin: 10px auto;
padding: 16px;
background: #F9F9F9;
}

Con esto le estamos indicando que nosotros queremos que todo el cuerpo del formulario tenga la fuente ARIAL (Helvetica o sans-serif en su defecto), que el ancho máximo será de 400 píxeles, tendrá un marco de 10 píxeles, un padding de 16 píxeles y que todo el fondo tendrá un color grisáceo (#F9F9F9).
Si lo aplicamos y guardamos lucirá así:

Despues le aplicaremos estilo a las listas, para eso utilizaremos el siguiente código:

select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}

Con el código anterior le estamos diciendo que todas las listas SELECT deberan de tener las siguientes características:

Deberan de tener el 100% del ancho del formulario que las contenga.
Tendran padding de16 píxeles.
No tendran borde.
Las esquinas estaran redondeadas con un radio de 4 píxeles
El color de fondo sera gris claro (#F1F1F1).

Tras implementar el código, el formulario deberá de tener un aspecto similar al siguiente:

Ahora hay que aplicar el estilo a los botones y para eso utilizaremos el siguiente codigo:

input[type="button"],
input[type="reset"]
{ box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
padding: 3%;
background: #43D1AF;
border-bottom: 2px solid #30C29E;
border-top-style: none;
border-right-style: none;
border-left-style: none;
color: #fff;
}

El código anterior hace lo siguiente:

Hace que el tamaño total del boton sea el especificado, pero que en incluya la suma de el ancho de los bordes y el padding que se aplique, asi que si se modifica el valor de estos no afectara en el tamaño final.
El boton medira 100% del ancho del formulario.
Tendra 3% del tamaño como padding.
Será de color verde (#43D1AF)
La linea del borde inferior sera de color verde oscuro (#30C29E) y medirá 2 píxeles.
La linea del borde superior no tendre ningun estilo/color.
La linea del borde derecho no tendre ningun estilo/color.
La linea del borde izquierdo no tendre ningun estilo/color.
Las letras serán de color blanco.

Tras implementar el codigo el formulario lucirá asi:

Si quieres definir un estilo para la etiqueta <H1> puedes hacerlo.
El resultado final lo puedes descargar Aquí

Por ahora es todo, si hay algo en lo que tengan dudas, no duden en preguntar.
Los leo luego.

Seguir Leyendo

6/29/2016 02:24:00 p.m. codigo de colores para resistencias , CSS , DIY , electronica basica , Estlos para formularios , HTML , Javascript , programacion , Resistencias

Vamos a programar

Recientemente publiqué una aplicación escrita en Javascript cuya única función era la de obtener el valor de una resistencia basado en los colores de las franjas que esta posea. El día de hoy te voy a mostrar como programar una similar.

El resultado es el mismo código que el de la entrada anterior pero con un look diferente.

**!!Esto no es un tutorial para aprender a programar en Javascript o HTML, para poder de hacerlo deberás de saber el mínimo de programación.!!**

Ahora que es lo que necesitamos:

Un bloc de notas, cualquiera funciona pero yo prefiero usar Notepad++.
Un navegador de internet (Opera por ejemplo).
Si no eres experto programando; un poco de paciencia

Creando los controles.

Lo primero que vamos a hacer es insertar una lista que contenga los colores:

<select size="1" name="Valor 1" id = "Valor1">

En este caso usamos una lista "Select" indicándole que sea de una linea (Size = "1"), su nombre es "Valor 1" y su id es "Valor1". El último valor es el mas importante de todos ya que se utilizará para poder "encontrarlo" desde el código de javascript.

Luego procedemos a crear los elementos que conformaran la lista, en este caso serán los colores del código de las resistencias: Negro, Café, Rojo, Naranja, Amarillo, Verde, Azul, Viloeta, Gris y Blanco
El Código resultante puede lucir como el que sigue:

<HTML>

    <HEAD></HEAD>

    <TITLE></TITLE>

    <BODY>

    <h1>Calculadora de resistencias</h1>

        <form>

            <label>Calcular</label>

            <p>

            <label>Primer valor</label>

                <select size="1" name="Valor 1" id = "Valor1">

                <option value="0">Negro</option>

                <option value="1">Cafe</option>

                <option value="2">Rojo</option>

                <option value="3">Naranja</option>

                <option value="4">Amarillo</option>

                <option value="5">Verde</option>

                <option value="6">Azul</option>

                <option value="7">Violeta</option>

                <option value="8">Gris</option>

                <option value="9">Blanco</option></select>

            </p>

        </form>

    </BODY>

</HTML>

Solo habrá que repetir este paso dos veces más para tener las listas que representarían las franjas en una resistencia y ademas agregar una lista más que contendrá los valores dorado y plateado, que son equivalentes a la tolerancia que está posea. El código requiere además de un botón (button) que será el encargado de llamar a nuestra función de javascript y 3 etiquetas (label) en donde se mostrará el resultado.
El código resultante tras añadir las listas que se necesitan puede lucir como el siguiente:

<HTML>

    <HEAD></HEAD>

    <TITLE></TITLE>

    <BODY>

    <h1>Calculadora de resistencias</h1>

        <form>

        <label>Calcular</label>

        <p><label>Primer valor</label> <select size="1" name="Valor 1" id = "Valor1">

        <option value="0">Negro</option>

        <option value="1">Cafe</option>

        <option value="2">Rojo</option>

        <option value="3">Naranja</option>

        <option value="4">Amarillo</option>

        <option value="5">Verde</option>

        <option value="6">Azul</option>

        <option value="7">Violeta</option>

        <option value="8">Gris</option>

        <option value="9">Blanco</option></select></p>

    <p><label>Segundo valor</label> <select size = "1" name = "Valor 2" id = "Valor2">

        <option value="0">Negro</option>

        <option value="1">Cafe</option>

        <option value="2">Rojo</option>

        <option value="3">Naranja</option>

        <option value="4">Amarillo</option>

        <option value="5">Verde</option>

        <option value="6">Azul</option>

        <option value="7">Violeta</option>

        <option value="8">Gris</option>

        <option value="9">Blanco</option></select></p>

    <p><label>Tercer valor</label> <select size = "1" name = "Valor 3" id = "Valor3">

        <option value="0">Negro</option>

        <option value="1">Cafe</option>

        <option value="2">Rojo</option>

        <option value="3">Naranja</option>

        <option value="4">Amarillo</option>

        <option value="5">Verde</option>

        <option value="6">Azul</option>

        <option value="7">Violeta</option>

        <option value="8">Gris</option>

        <option value="9">Blanco</option></select></p>

    <p><label>Cuarto valor</label> <select size = "1" name = "Valor 4" id = "Valor4">

        <option value="0">Dorado</option>

        <option value="1">Plata</option></select></p>

            </p>

        </form>

    </BODY>

</HTML>

Ahora el código de javascript

El código lo pongo tal cual para que se entienda completo, ademasde que he añadido los comentarios que considero pertinentes para poder usarlo facilmente.

<script type="text/javascript">

  //Funcion para calcular el valor de una resistencia basado en sus colores

  //Esta funcion solo recupera lo que seria equivalente a los numeros significativos

    function GetSignificant()

    {

        var ColorSelector1 = document.getElementById('Valor1');

        var Color1=ColorSelector1.options[ColorSelector1.selectedIndex].value;

        var ColorSelector2 = document.getElementById('Valor2');

        var Color2=ColorSelector2.options[ColorSelector2.selectedIndex].value;

        return parseInt(Color1 + Color2);

       

    }

    //Esta funcion solo obtiene la tolerancia de la resistencia

    function GetTolerancia()

    {

        var ColorSelector4 = document.getElementById('Valor4');

        var Color4=ColorSelector4.selectedIndex;

        switch (Color4)

        {

            case 0:

            return "+5% de tolerancia"

            break

            case 1:

            return "+10% de tolerancia"

            break

        }      

    }

    //Esta funcion regresa el valor total de la resistencia

    function GetValor()

    {

        var ColorSelector3 = document.getElementById('Valor3');

        var Color3=ColorSelector3.options[ColorSelector3.selectedIndex].value;



        switch (Color3)

        {

            case '0':

            return GetSignificant()*1;

            break

            case '1':

            return GetSignificant()*1e1;

            break

            case '2':

            return GetSignificant()*1e2;

            break

            case '3':

            return GetSignificant()*1e3;

            break

            case '4':

            return GetSignificant()*1e4;

            break

            case '5':

            return GetSignificant()*1e5;

            break

            case '6':

            return GetSignificant()*1e6;

            break

            case '7':

            return GetSignificant()*1e7;

            break

            case '8':

            return GetSignificant()*1e8;

            break

            case '9':

            return GetSignificant()*1e9;

            break

        }

    }

    //Esta funcion se encarga de mostrar el resultado y debe de llamar desde un boton

    function ShowResult()

    {

        var label1 = document.getElementById('lblResultado');

        var label2 = document.getElementById('lblResultadoK');

        var label3 = document.getElementById('lblResultadoM');

        var Total = GetValor();

        label1.innerHTML = Total.toString()+'&#8486 ' + GetTolerancia();

        label2.innerHTML = (Total/1e3).toString()+' Kilo&#8486 ' + GetTolerancia();

        label3.innerHTML = (Total/1e6).toString()+' Mega&#8486 ' + GetTolerancia();

    }

  </script>

Esto es todo lo que se necesita para poder usar la aplicacion.Si tienes dudas o comentario no dudes en comentar.
En el siguiente articulo le pondremos un look en verde para que se vea un poco mejor.
Los leo luego.

Seguir Leyendo