Xwork's Blog

The lord is waiting to take your hand.

Vamos a programar #2

6/29/2016 02:24:00 p.m. , , , , , , , , No hay comentarios.

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:

  1. Deberan de tener el 100% del ancho del formulario que las contenga.
  2. Tendran padding de16 píxeles.
  3. No tendran borde.
  4. Las esquinas estaran redondeadas con un radio de 4 píxeles
  5. 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:

  1. 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.
  2. El boton medira 100% del ancho del formulario.
  3. Tendra 3% del tamaño como padding.
  4. Será de color verde (#43D1AF)
  5. La linea del borde inferior sera de color verde oscuro (#30C29E) y medirá 2 píxeles.
  6. La linea del borde superior no tendre ningun estilo/color.
  7. La linea del borde derecho no tendre ningun estilo/color.
  8. La linea del borde izquierdo no tendre ningun estilo/color.
  9. 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.

No hay comentarios. :

Publicar un comentario

Vamos a programar

6/27/2016 02:27:00 p.m. , , , , , , No hay comentarios.
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:


  1. Un bloc de notas, cualquiera funciona pero yo prefiero usar Notepad++.
  2. Un navegador de internet (Opera por ejemplo).
  3. 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.

No hay comentarios. :

Publicar un comentario

Calculadora básica para resistencias.

6/25/2016 11:30:00 a.m. , , , , , 2 comentarios

En esta ocasión he diseñado una calculadora para resistencias.
Solamente debes de escoger los colores de cada una de las franjas y dejar que el programa haga el resto. Se incluyen los prefijos comunes para simplificar el trabajo.
Puedes por ejemplo pedir un resistencia de 22000Ω o una de 22 KiloΩ (es lo mismo).

















2 comentarios :

Publicar un comentario

Lo básico #2

6/24/2016 01:38:00 p.m. , , , , , No hay comentarios.
Retomando lo mas básico que creo que debes de saber antes de adentrarte al mundo de los componentes eléctricos.

En el mundo de la electrónica existen varios componentes, cada uno puede desarrollar una función compleja o simple en el circuito, pero todos estos se pueden agrupar en 3: resistores, capacitares e inductores.

El día de hoy haré una introducción a las resistencias.
Apariencia física de la mayoría de las resistencias.
Las resistencias son componentes que se encargan de limitar el flujo de corriente que pasa por un circuito. De ahí su nombre de "resistencia".

La unidad de medida de las resistencias es el OHM (en honor al físico George Simon Ohm) y esta se define de la siguiente manera:
"Se define a un ohmio como la resistencia eléctrica que existe entre dos puntos de un conductor, cuando una diferencia de potencial constante de 1 voltio aplicada entre estos dos puntos, produce, en dicho conductor, una corriente de intensidad de 1 amperio"
Representación simbólica de la resistencia.

La mayor parte de las resistencias tiene en su superficie marcas de colores, estos no son elegidos al azar. De hecho cada color significa un numero y estos variaran en función a la resistencia.

La siguiente imagen muestra el código de colores que se sigue para determinar el valor de las resistencias.
Código de colores.

¿Cómo interpretarlo?

Retomando la primera imagen. En ella podemos ver que cada resistencia posee 4 lineas, cada una de ellas representa un valor. Para leerla correctamente se debe de empezar con la lineas que estén mas juntas, en nuestro caso tenemos los siguiente:
Resistencia de 560ohm
En este caso las primeras lineas son valores literales, es decir los debemos de anotar con su valor; en este caso la primera linea es la verde; y su valor es: 5, lo anotamos así tal y cómo está. la segunda linea es la azul; y su valor es de 6; lo anotamos y hasta ahora tenemos 56. La tercera linea es el multiplicador; en la tabla vemos que el café es un multiplicador de x10, eso significa que los números que ya teníamos anotados los debemos de multiplicar por 10; el resultado para esta resistencia es 560 ohms.

Este es uno de los componentes básicos pero necesarios para la mayoría de los circuitos. Mas adelante hablaremos de otros tipos de resistores. Por ahora esto es lo básico que necesitas saber.

Los leo después.


No hay comentarios. :

Publicar un comentario

Si andas por aquí tienes que saber esto.

6/23/2016 12:59:00 p.m. No hay comentarios.

¿Que es eso?

En este blog se trataran cosas de programación, y cosas de electrónica básica (arduino mas que nada). Le echaremos un vistazo a los componentes básicos y algunos medianamente complejos.

El primer elemento y el mas indispensable desde mi punto de vista es este:

ProtoBoard/BreadBoard
Puede parecer compleja pero no lo es.
Si actualmente ya sabes como es que funciona, por ahora puedes salir y comer un helado en lo que los que no sabemos como funciona, averiguamos como lo hace.


¿Cómo funciona?


El "protoboard","breadboard" o "placa board" es un tablero con orificios conectados eléctricamente entre sí, habitualmente siguiendo patrones de líneas, en el cual se pueden insertar componentes electrónicos y cables para el armado y prototipado de circuitos electrónicos y sistemas similares...
Vista superior e inferior.
Si apreciamos bien la imagen, vemos que está compuesto por raíles. 4 dispuesto de forma vertical y los demás puestos de forma horizontal (los horizontales su número puede variar dependiendo del tamaño del protoboard).

¿Cómo conectarlos?

Cuando se conecta un cable toda la linea se puede considerar cómo una extensión. Por ejemplo: si conectamos una pila de 1.5v, conectamos el polo positivo a la linea extrema derecha (que tiene un signo de positivo [+]), ahora toda esa linea sera el positivo. Si requerimos alimentar algún dispositivo al positivo de la pila, bastara con conectarlo a la linea al la cual conectamos nuestra pila.

Si conectamos un cable a cualquiera de los orificios, queda dispuesto como en la imagen. en este caso imagina que se han conectados 2 cables, cada uno representado por un color.

Un ejemplo

Una demostración sencilla de como funciona. 
Supongamos que tenemos conectados un Diodo LED, una resistencia y un cable de la siguiente, manera:


Si marcamos el flujo que sigue la corriente lucirá cómo el siguiente:

Este es una pequeña introducción a como funciona un protoboard. Las cosas que hagan falta mencionar las veremos después a como las vayamos utilizando.

Los leo después.

No hay comentarios. :

Publicar un comentario

¿Un Acertijo? ¿Por qué no?

6/21/2016 12:30:00 p.m. , , 5 comentarios
Muchas veces me he topado con gente que halla una manera de hacer las cosas mas interesantes en mi vida.
Una de ellas fue la encargada de introducir el concepto de cifrado a mi vida. Si bien ya sabía los conceptos básicos; véase cifrado de Cesar, Cifrado de Vigenère, etc. Esa persona me dio un acertijo que no pude resolver.
¿Fácil, no?
Las unicas pista que tuve fueron las obvias:
  1. Tiene que ver con el estandar ASCII
  2. La contraseña es: Mercury.
  3. El mensaje está en Inglés.
  4. Vas a sufrir un poquito.
Lo intenté por un tiempo hasta que me rendí y decidí por eso publicarlo en internet para ver si un alma caritativa lo resuelve.

Diviértanse y los leo después.

5 comentarios :

Publicar un comentario

Hello World

6/21/2016 11:04:00 a.m. , , No hay comentarios.


Si estás en este lugar probablemente andes perdido. Puedes quedarte y ver que hay, pero por el momento no hay nada que mostrar. Vuelve a darte una vuelta mas tarde y encontraras algunas cosas interesantes.

Att: Xwork

No hay comentarios. :

Publicar un comentario

Suscribirse a: Entradas ( Atom )

Acerca de mí

Mi foto
Tengo paciencia para lo no importante.