Tecnología - Matemática y Física

Busca el tema de tu interés

Mostrando las entradas con la etiqueta Tecnología. Mostrar todas las entradas
Mostrando las entradas con la etiqueta Tecnología. Mostrar todas las entradas

viernes, 15 de septiembre de 2017

Evento onmouseout con un toque personal

Este post lo dedicaremos a aquellos lectores de este blog que tienen el interés en desarrollar un blog o página web dinámica basada en el lenguaje de programación javascript en donde sus entradas o páginas puedan tener una interacción con sus usuarios, en este post les prestaremos una atención especial  al evento de javascript ¨onnmouseout¨, que se produce cuando tenemos el mouse encima de alguna etiqueta html como, div, input, span etc, y movemos el mouse fuera de esa etiqueta html.

Así que la palabra "onmouseout", que se traduce a la oración ¨On mouse out¨, significa ¨Mouse fuera de¨, partiendo del significado de lo que significa "onmouseout", este evento se produce cuando alejamos o sacamos el mouse o ratón fuera de la zona que tiene programado el evento que repetimos puede ser una etiqueta html, div, input, span o cualquier otro tipo.

Para ilustrar mejor como funciona este evento vamos a escribir algunas líneas de código que ejemplifique lo que hace el evento onmouseout.

Por ejemplo vamos a crear un párrafo con la etiqueta span, que cuando se coloque el mouse encima de este elemento y luego el mouse se salga de esta etiqueta el fondo o background de la etiqueta span cambie de amarillo a limón, si inicialmente la etiqueta span tiene el fondo amarillo, en caso contrario si el fondo es limón, cuando el evento se produzca, entonces el fondo cambie a amarillo.
El código siguiente hace el proceso explicado en el párrafo anterior actuando desde dentro de la etiqueta span:
<span onmouseout="if(this.style.backgroundColor=='yellow'){this.style.backgroundColor='lime'}else{this.style.backgroundColor='yellow'}" style="background-color: yellow; color: black; font-weight: bold; font-size: large;">El fondo de esta etiqueta span cambia de amarillo a limón y viceversa cuando se produce el evento onmouseout.</span>
De amarillo a limón y viceversa con onmouseout.

Pero podemos esmerarnos un poco más para que nuestro código html y javascript se vean más limpios, para esto, escribiremos lo que debe hacer el evento onmouseout en una función externa a la etiqueta span que llamaremos "CambaiandoColorAspan(id)", esta función la escribiremos aparte dentro de las etiquetas <script type="text/javascript"></script>, entonces nuestro códigos quedan asi:
<script type="text/javascript">
  function CambaiandoColorAspan(id)
{
/*Si el fondo de la etiqueta span es amarillo lo cambiamos
a limón y si es limón lo cambiamos a amarillo...
*/
       
       if(id.style.backgroundColor=="yellow")
       {
                id.style.backgroundColor="lime";
       }else {
                id.style.backgroundColor="yellow";
       }
}
</script>

<span onmouseout="CambaiandoColorAspan(this)" style="background-color: yellow; color: black; font-weight: bold; font-size: large;" >De amarillo a negro y viceversa con onmouseout.</span>
Pero todavía podemos seguir limpiando mucho más nuestro códigos html y javascript, para esto asignaremos el evento onmouseout desde fuera de la etiqueta span y además aplicarle estilo a la etiqueta span desde fuera, para esto le asignaremos el atributo id a la etiqueta span y agregándolo el atributo como id="identificoMiSpanYleAplicoEstilo", tal como se muestra a continuación:
<script type="text/javascript">

 function CambaiandoColorAspan(id)

{

/*Si el fondo de la etiqueta span es amarillo lo cambiamos

a limón y si es limón lo cambiamos a amarillo...

*/

       id = this;  //El evento omouseout se ejecuta sobre la etiqueta span actual..       
       if(id.style.backgroundColor=="yellow")

       {

                id.style.backgroundColor="lime";

       }else {

                id.style.backgroundColor="yellow";

       }

}

/*Al cargar la página le asigno el evento onmouseout al elemento span

con id [identificoMiSpanYleAplicoEstilo] y le confirmo el

fondo con un color amarillo...

*/

window.onload=function(){

     var identifico=document.getElementById('identificoMiSpanYleAplicoEstilo');

     identifico.onmouseout = CambaiandoColorAspan;

  identifico.style.backgroundColor="yellow";

};
</script>
<style type="text/css">

          #identificoMiSpanYleAplicoEstilo{

   background-color:yellow;

   color:black;

   font-weight:bold;

   font-size:large;

   }
</style>

<span id="identificoMiSpanYleAplicoEstilo">De amarillo a limón y viceversa con onmouseout.</span>
El código anterior lo podemos dejar aún mas estilizado a nivel de javascript, añadiendo el evento onmouseout directamente como un "Event Listeners" en la consola del navegador usando el siguiente código, la única diferencia es que no nombramos el evento como onmouseout sino como mouseout y funciona bien en google chrome:

<script type="text/javascript">

 function CambaiandoColorAspan(id)
{
/*Si el fondo de la etiqueta span es amarillo lo cambiamos
a limón y si es limón lo cambiamos a amarillo...
*/

       id = this;  //El evento omouseout se ejecuta sobre la etiqueta span actual...
       
       if(id.style.backgroundColor=="yellow")
       {
                id.style.backgroundColor="lime";
       }else {
                id.style.backgroundColor="yellow";
       }
}
/*Al cargar la página le asigno el evento onmouseout al elemento span
con id [identificoMiSpanYleAplicoEstilo] y le confirmo el
fondo con un color amarillo...
*/
window.onload=function(){
     var identifico=document.getElementById('identificoMiSpanYleAplicoEstilo');
//añadimos el evento onmouse directamente en la consola..
     identifico.addEventListener('mouseout', CambaiandoColorAspan, false);
identifico.style.backgroundColor="yellow";
};
</script>
<style type="text/css">
      #identificoMiSpanYleAplicoEstilo{
 background-color:yellow;
 color:black;
 font-weight:bold;
 font-size:large;
 }
</style>
<span id="identificoMiSpanYleAplicoEstilo">De amarillo a limón y viceversa con onmouseout.</span>

Como se puede observar todo estos diferentes procedimientos nos llevan al mismo evento, ejecutado por onmouseout,...

Vea también

Evento onmouseover

martes, 27 de diciembre de 2016

Desbloqueo de contraseña en la bios

Vamos en este post a tratar un tema de tecnología, en días pasados me disponía a abrir mi laptop marca Acer como normalmente lo hago, pero vaya sorpresa que me llevo cuando me aparece un mensaje dentro de una caja azul que decía algo similar a esto.
Harddisk Security
Primary Master----------Lock
Y cuando intenté entrar presionando la tecla "Enter", vaya sorpresa que me llevo, me sale otro cuadro azul pidiéndome que entre una contraseñas tal como el que se muetra en la siguiente imagen.
Entre-su-actual-contraseña
Pero el asunto era que yo no tenía esta contraseña, pues me acordé que días pasados le había prestado mi computador a un sobrino, así que le pregunté si él sabía algo de esto, y su repuesta fue negativa.
Turbado por este incidente empecé una investigación en internet, buscando algún tipo de ayuda respecto de este tema que permitiera entrar a mi computadora de manera normal otra vez, y les cuento que vi algunos tutoriales en youtube que arrojaban luz sobre el tema pero estaban en inglés lo cual no me servían tanto, así que de tanto buscar allí y acá encontré un video mudo en youtube que mostraba gráficas de como resolver este problema y debo dar mil gracias al creador de este video por poner en internet información realmente útil, básicamente en este post lo que hacemos es colocarle una voz a ese video mediante la forma en que resolví mi problema con la ayuda de este youtuber para que otros que tengan este mismo problema puedan resolverlo.
Retomando el tema, cuando me apareció el cuadro azul mencionado más arriba, lo primero que hice fue introducir una contraseñas (password) cualquiera y presioné enter, con lo cual me apareció un mensaje en pantalla similar a este.
Contraseña-incorrecta
Así que como dice el mensaje en inglés "Press any key", presione cualquier tecla, eso hice, y volvió a aparecer el mensaje de una caja azul "Enter Currrent Password", así que volví a entrar una contraseñas cualquiera y volvió a aparecerme el mensaje "Password Check Fall", así que volví nueva vez a presionar una tecla cualquiera, volviéndome a aparecer por tercera vez el mensaje "Enter Currrent Password" y por tercera vez escribí cualquier cosa que se me ocurriera y esta tercera vez me apareció un mensaje en pantalla similar al de la siguiente imagen.
Seleccione-un-ítem
Entonces seleccioné el ítem que dice "Enter Unlock Password" que significa [Entre la contraseña de desbloqueo], una vez mas hice enter en este ítem, me salio un cuadro de dialogo similar al de la siguiente imagen.
Entre-contraseña-de-desbloqueo
Aquí es donde está la parte importante, yo escribí el número que tiene la flecha roja en una libreta 30321455, y entonces me fuí a otro computador y navegué hasta la página www.bios-pw.org una vez dentro de esta página entre el número 30321455 donde dice "Enter your code"[Entre su código], y luego presioné "Get password"[Obtener contraseñas], tal como se observa en la imagen.
Entre-su-código
Así que tomé los números encerrados en el óvalo rojo 24579801, y cuando la pantalla me presentó una vez más el mensaje "Enter Unlock Password(key:30321455)", entonces introduje la contraseñas 24579801 que me dio la página www.bios-pw.org, y gualá problema resuelto.
Entrando-contraseña-de-desbloqueo
Así que aquí les dejo el enlace del video mudo del youtuber antonio sturione que sin palabras me ayudó a resolver este problema .

viernes, 1 de abril de 2016

Gifs con javascript

Los gifs son populares en google+, twitter y otras redes sociales ya que de alguna manera una animación de imágenes o fotografía bien hecha capta la atención de los espectadores ya que es como si las imágenes cobrarán vida, nuestros sentidos captan las imágenes en el gif como si esta se estuvieran moviendo y esto no está más lejos de la realidad, ya que es nuestro cerebro quién percibe este movimiento por que las fotos e imágenes no se mueven, lo que sucede es que las imágenes en un gif son cambiada en un mismo marco y la velocidad con la que percibimos que se mueve el gif es la rapidez con la que son intercambiadas las fotos del gif.
Mientras menor es el tiempo que escogemos para que la fotos se intercambien mayor será la velocidad con que percibiremos el movimiento de las imágenes.
¿Qué es un gif?
Desde mi humilde punto de vista un gif es un conjunto de fotos o imágenes con un ancho y un alto de cada imágen igual que se alternan o intercambian en un intervalos de tiempo determinado.
Para crear un gif para uso en un blog o página web sin tener que usar alguna aplicación en internet que genere el gif a partir de las imágenes o fotos predeterminadas lo podemos hacer usando el lenguaje de programación javascript.
Esta imagen generada a continuación es un gif creado con el lenguaje de programación javascript.

1--Para crear un gif con javascript lo primero que haremos es elegir las url de las imágenes o fotos que queremos que compongan nuestro gif y si estas imágenes tienen el mismo ancho y la misma altura mucho mejor, aunque se puede hacer con imágenes de diferentes anchos y alturas.
2--Segundo hacemos una array o una matriz con una variable con estas url de cada imagen
3--Luego colocamos estas fotos en una etiqueta div otorgándole un id a esta etiqueta en nuestro caso el id va a ser id="gifsconjavascript", pero esto lo haremos por programación, pero debe haber una de las imágenes que vamos a utilizar en el gifs cuando carguemos la pagina en el blog o en nuestra pagina web.
<div id = "gifsconjavascript">
<img href = "https://2.bp.blogspot.com/-Vq8zTu564qc/VvBXx0C4f6I/AAAAAAAAE2g/MFRjSfSs-FA99NklB3dUwglhOXCQjTktw/s1600/gifconjavascript1.gif" />
</div>
4- Vamos a alternar de manera ordenadas las fotos para nuestro gifs para esto utilizaremos los siguientes códigos
Ejemplo estos códigos son lo que hacen parecer que el tigre parezca moverse en la imagen de más arriba
<script type = "text/javascript">
<!--
 var i = 0 ;
window.onload = function(){gif();} ;
function gif()
{

var x = ["http://2.bp.blogspot.com/-Vq8zTu564qc/VvBXx0C4f6I/AAAAAAAAE2g/MFRjSfSs-FA99NklB3dUwglhOXCQjTktw/s1600/gifconjavascript1.gif",
"http://4.bp.blogspot.com/-VUjSKqTZB3Y/VvBX7kNzYnI/AAAAAAAAE2o/HiQwX3d_kNcQvmSmvKORIZmKq_5PHTC4A/s1600/gifconjavascript2.gif",
 "http://3.bp.blogspot.com/-H56wk11g8tQ/VvBYCfvnkNI/AAAAAAAAE2w/mnO5cns6fE8mIGjf-WOczZuxya173yo4g/s1600/gifconjavascript3.gif",
"http://1.bp.blogspot.com/-CU18J9wP9mU/VvBYJlgcqFI/AAAAAAAAE24/2lUBUajzn60mBRPDN56mGJaqkzl9G67Og/s1600/gifconjavascript4.gif",
"http://2.bp.blogspot.com/-etSQmO3IirA/VvBYTCVb7SI/AAAAAAAAE3A/eGB9pDjQldQqj9iRxTrX0WN6qeaGxgTYg/s1600/gifconjavascript5.gif",
"http://4.bp.blogspot.com/-WKdOPw67f1s/VvBYYijfRPI/AAAAAAAAE3I/EWIBDnxE7V07ps5qtzef5OoylN0AbOyig/s1600/gifconjavascript6.gif",
"http://4.bp.blogspot.com/-WKdOPw67f1s/VvBYYijfRPI/AAAAAAAAE3I/EWIBDnxE7V07ps5qtzef5OoylN0AbOyig/s1600/gifconjavascript6.gif",
"http://4.bp.blogspot.com/-WKdOPw67f1s/VvBYYijfRPI/AAAAAAAAE3I/EWIBDnxE7V07ps5qtzef5OoylN0AbOyig/s1600/gifconjavascript6.gif",
"http://4.bp.blogspot.com/-WKdOPw67f1s/VvBYYijfRPI/AAAAAAAAE3I/EWIBDnxE7V07ps5qtzef5OoylN0AbOyig/s1600/gifconjavascript6.gif",
"http://4.bp.blogspot.com/-WKdOPw67f1s/VvBYYijfRPI/AAAAAAAAE3I/EWIBDnxE7V07ps5qtzef5OoylN0AbOyig/s1600/gifconjavascript6.gif" ];
// la variable somo representa la
// etiqueta con id "gifsconjavascript"
var somo = document.getElementById("gifsconjavascript");
// Si ya se han presentado 9 imágenes entonces
// volvemos a imagen 1 osea x[0]
 if(i == 10) i = 0 ;
// cambiamos el atributo src para presentar
// una imagen nueva en la etiqueta con id 
// gifsconjavascript
somo.setAttribute("src",x[i]);

// incrementamos en 1 el valor de i
i += 1;
// Esta código ejcuta la función gif
// cada 300 milisegundos
setTimeout("gif()", '300');
}
-->
</script>
Declaramos la variable i = 0 fuera de la función gif() ya que esto permite que esta variable tenga un alcance global, que irá cambiando desde 0 hasta 9 accediendo a distintas imágenes cada vez que la función gif() es llama por medio del código [setTimeout("gif()",'300');].
window.onload = function(){gif();} ;
El código [window.onload = function{gif():};], permite que podamos ejecutar los códigos en la function gif() cuando carguemos nuestra página.
var i = 0 ;
window.onload = function(){gif();} ;
La variable [x] es la que almacena las url de las imágenes que usamos en el gif, por lo que si usted quiere crear su gif personalizado con estos códigos solo cambie las url que contiene la variable x.
// var x = []; Esta variable almacena las url del gif
//--
var x = ["http://2.bp.blogspot.com/-Vq8zTu564qc/VvBXx0C4f6I/AAAAAAAAE2g/MFRjSfSs-FA99NklB3dUwglhOXCQjTktw/s1600/gifconjavascript1.gif",
"http://4.bp.blogspot.com/-VUjSKqTZB3Y/VvBX7kNzYnI/AAAAAAAAE2o/HiQwX3d_kNcQvmSmvKORIZmKq_5PHTC4A/s1600/gifconjavascript2.gif",
 "http://3.bp.blogspot.com/-H56wk11g8tQ/VvBYCfvnkNI/AAAAAAAAE2w/mnO5cns6fE8mIGjf-WOczZuxya173yo4g/s1600/gifconjavascript3.gif",
"http://1.bp.blogspot.com/-CU18J9wP9mU/VvBYJlgcqFI/AAAAAAAAE24/2lUBUajzn60mBRPDN56mGJaqkzl9G67Og/s1600/gifconjavascript4.gif",
"http://2.bp.blogspot.com/-etSQmO3IirA/VvBYTCVb7SI/AAAAAAAAE3A/eGB9pDjQldQqj9iRxTrX0WN6qeaGxgTYg/s1600/gifconjavascript5.gif",
"http://4.bp.blogspot.com/-WKdOPw67f1s/VvBYYijfRPI/AAAAAAAAE3I/EWIBDnxE7V07ps5qtzef5OoylN0AbOyig/s1600/gifconjavascript6.gif",
"http://4.bp.blogspot.com/-WKdOPw67f1s/VvBYYijfRPI/AAAAAAAAE3I/EWIBDnxE7V07ps5qtzef5OoylN0AbOyig/s1600/gifconjavascript6.gif",
"http://4.bp.blogspot.com/-WKdOPw67f1s/VvBYYijfRPI/AAAAAAAAE3I/EWIBDnxE7V07ps5qtzef5OoylN0AbOyig/s1600/gifconjavascript6.gif",
"http://4.bp.blogspot.com/-WKdOPw67f1s/VvBYYijfRPI/AAAAAAAAE3I/EWIBDnxE7V07ps5qtzef5OoylN0AbOyig/s1600/gifconjavascript6.gif",
"http://4.bp.blogspot.com/-WKdOPw67f1s/VvBYYijfRPI/AAAAAAAAE3I/EWIBDnxE7V07ps5qtzef5OoylN0AbOyig/s1600/gifconjavascript6.gif" ];
Cuando la función gif es llamada por primera vez al cargar la página o entrada de blog se cargará el contenido en x[i], como i=0 entonces x[0], luego cuando la función vuelve a ejecutarse en un tiempo 300 milisegundo se accede al contenido de x[1], luego x[2],...,x[9].
el código encargado de hacer el cambio de imágenes cada vez que se llama la función gif() es.
somo.setAttribute("src",x[i]);
Bueno y la variable "somo" es la encargada de identificar la etiqueta de la imagen img , a la que accedemos cambiando el atributo[attribute] "src", mediante el código.
somo.setAttribute("src",x[i]);
Y el código responsable de que se produzca una alternación de imágenes cada 300 milisegundos es.
setTimeout("gif()", '300');
Vea también
Copiar, pegar y guardar un texto o imagen
Como convertir una foto al formato ico
Ejemplos de tipos de códigos para crear una función de visual basic
Solución de operaciones fraccionarias (Aplicación)
Juego de matemática (Aplicación)

lunes, 29 de febrero de 2016

Juego matemático


Siguiendo el modelo que se observa en la siguiente tabla. En que celda de la que tienen el signo de interrogación [?] se localiza el numero de la suerte?
Nota: Para elegir la celda donde se encuentra el número dado en el rectángulo color púrpura o morado haga click en una de las celdas con el signo de interrogación {?}.
ABC ABC ABC
123 456 789
       
    
1167 Tiempo:  0 s
    
A B C
Aciertos:  0  Fracasos:  0  Total:  0 

¿Como funciona este juego?
Este juego funciona muy simple, sencillamente se trata de elegir en qué celda de las que tiene el signo de interrogación [?] se encuentra ubicado el número dado en el cuadro púrpura o morado es este número dado en el cuadro púrpura o morado sigue un modelo tal como se muestra en primera tabla al principio de este artículo, el juego se inicia automáticamente al cargar esta página con un tiempo predeterminado de 20 segundos que usted puede cambiar haciendo clic en la casilla que contiene el número 20, luego hacemos clic en Play y pasamos a elegir haciendo un clic en la casilla con el signo de interrogación donde se encuentre el número dado en el cuadro color púrpura.

Debemos decir que aunque usted pueda acertar en varias ocasiones no significa que es un juego de azar, ya que detrás de este juego se oculta un algoritmo matemático que si usted lo descubre puede tener aciertos de manera precisa.

Reglas de este juego
Para ganar simplemente hay que hacer clic en la casilla con el signo de interrogación correcta.
Para perder o tener un fracaso en este juego hay dos formas la primera es que se agote el tiempo medido en segundo que usted puede escoger en un intervalo que va de 5 a 20 segundos.


Cuál es el reto en este juego
El reto es acertar de manera correcta en 50 ocasiones sin tener un solo fracaso.

Cual es el premio para aquel que logre romper este reto
Si usted es capaz de acertar en 50 ocasiones sin tener un fracaso entonces como premio usted podrá escribirme a mi correo el algoritmo o la lógica que usted usó para lograr esta hazaña y nosotros nos encargaremos de hacer una entrada en este blog publicando la forma en la que usted logró hacer esta hazaña.
Recuerde los aciertos y fracasos y el total de estos son contabilizado en las casillas de celdas que llevan este mismo nombre .


domingo, 4 de octubre de 2015

Como se usa y para que sirve el evento onmouseover en javascript

Este post lo dedicamos a las personas que trabajan con el diseño y programación usando el lenguaje de programación javascript, en este post hablaremos de como se usa el evento de javascript onmouseover en una página dinámica.

La oración "on mouse over" = onmouseover , si interpretamos esta oración que está escrita en inglés , esta oración se podría interpretar como "Poner el mouse encima", en otras palabras el evento onmouseover se produce o ejecuta cuando ponemos el mouse encima de un elemento de una página web o algún programa, este elemento de esta página web puede ser un párrafo, un botón, un div, ect.

Ahora bien el código de lo que sucederá en una etiqueta de un html se puede escribir dentro del mismo elemento en el que queremos que ocurra el evento onmouseover ejemplo si tenemos una etiqueta correspondiente a un botón llamado 'Probadme' de color negro y queremos que este botón cambie a un color azul cuando coloquemos el mouse encima de este botón, el código es similar a este.

<input onmouseover="if(this.style.backgroundColor == 'black'){this.style.backgroundColor = 'blue'}else{this.style.backgroundColor = 'black'}" style="background-color: black;Color:white;font-weight:bold;font-size:large;" type="button" value="Probadme" />

El código para el evento onmouseover lo que hace es cambiar el color a azul (blue) si el botón está negro (black) cuando ponemos el mouse encima del botón "Probadme", pero si el botón cambia a azul (blue) y volvemos y colocamos el mouse encima del botón "Probadme" el botón vuelve a cambia al color negro,  
Pase el mouse encima "Probadme", y oserve como cambia de color.



Una forma más limpia de escribir el código anterior es asignando una clase al código del botón "Probadme", esta clase (class) la llamaremos "boton", y aplicaremos el estilo a este botón desde fuera con la etiqueta style (estilo).

El código se vería ahora así.

<style>
.boton{
background-color: black; 
color: white;
 font-size: large;
 font-weight: bold;
}

</style>
<input class = "boton" onmouseover="if(this.style.backgroundColor == 'black'){this.style.backgroundColor = 'blue'}else{this.style.backgroundColor = 'black'}"  type="button" value="Probadme" />



Otra forma de ejecutar el evento onmouseover es creando una función que contenga todas las indicaciones que queremos que se ejecuten cuando pasemos el mouse encima del botón "Probadme", lo que sucederá es que cuando pasemos el mouse encima del botón, el evento onmouseover llamará una función con todas las indicaciones que queremos que se ejecuten, para ver un ejemplo la función la llamaremos "Cambiando_Color()" y la colocaremos en las etiquetas script (guión) de nuesstro html y identificaremos nuestro código del botón "Probadme" con el id "cambio" , para luego poder referirnos a esta etiqueta con esta identificación.

<script type = "text/javascript">
function Cambiando_Color(){

//Esta funcion cambia el color de negro a azul cuando
//colocamos el mouse encima de boton "Probadme"
// la variable toma representa el boton con id=cambio

var toma = document.getElementById("cambio");

if(toma.style.backgroundColor == 'black'){
toma.style.backgroundColor = 'blue' ;
}else{toma.style.backgroundColor = 'black' ;
};


}
</script>
<style>
.boton{
color: white;
font-size: large;
font-weight: bold;
}

</style>
<input class = "boton" id="cambio" onmouseover="Cambiando_Color();" style="background-color: black;"  type="button" value="Probadme" />

En este código la etiqueta input nos queda mucho más limpia ya que el estilo a excepción del "background-color", lo aplicamos desde fuera de la etiqueta input y el evento onmouseover llama una función escrita externamente "Cambiando_Color()".

También el código anterior puede ser escrito llamando el evento onmouseover y la función "Cambiando_Color()" desde afuera de la etiqueta input de esta manera la etiqueta input nos queda todavía mucho más limpia.

<script type = "text/javascript">

// la variable toma representa el boton con id=cambio


var toma = document.getElementById("cambio");

// asignamos el evento onmouseover a la etiqueta con // id=cambio 

toma.onmouseover = Cambiando_Color ;

function Cambiando_Color(){

//Esta funcion cambia el color de negro a azul cuando
//colocamos el mouse encima de boton "Probadme"


if(toma.style.backgroundColor == 'black'){
toma.style.backgroundColor = 'blue' ;
}else{toma.style.backgroundColor = 'black' ;
};


}
</script>
<style>
.boton{
color: white;
font-size: large;
font-weight: bold;
}

</style>
<input class = "boton" id="cambio" style="background-color: black;"  type="button" value="Probadme" />


Como se puede ver en el código anterior el evento onmouseover y la llamada a la función "Cambiando_Color()" son hecho desde afuera de la etiqueta input del botón "Probadme", todos los códigos anteriores son equivalentes ya que hacen la misma función, cambiar el color de negro a azul y de azul a negro cada vez que se produce el evento onmouseover




Vea también
Ejemplos de tipos de códigos para crear una función en visual basic
Fundamentos básicos para crear y diseñar una página web

lunes, 24 de agosto de 2015

Aplicación que permite buscar una palabra en un texto y reemplazarla por otra palabra, tantas veces como la palabra aparezca en el texto


Texto a sustituir Nuevo texto
Texto a reparar


¿Cómo se origina esta aplicación?
Un día mientras trabajaba en algunos códigos para una entrada de blog se me presentó el problema de que ya había escrito un mismo código aproximadamente una 100 veces en una entrada que tenía más o menos 300 códigos html y bueno el problema fue que el código que había escrito una 100 veces tuve la necesidad de sustituirlo por otro código, aunque yo podía empezar a buscar manualmente cada código y sustituirlo por el nuevo código esto me iba a tomar un tiempo preciado aparte de que era posible que en este proceso cometiera un error, por lo que pensé Y si hubiera una aplicación o programa que permitiera buscar una palabra en un mar de texto y sustituir esta palabra por una nueva la misma cantidad de veces que aparezca la palabra a sustituir, y es de ahí en donde empiezo a elaborar un aplicación basada en el lenguaje de programación javascript que permita este propósito que hay principio era privado ya que era para mi uso personal pero después pensé y si volvemos esta aplicación de uso público de modo que cualquier persona se beneficie de su uso y de ahí surge esta entrada de este blog, si usted tiene un documento bien extenso y se da cuenta luego de revisar el documento de que una palabra le hace falta un acento, pero el problema es que esta palabra aparece muchas veces en el documento y usted quiere corregir esta palabra entonces esta aplicación es para usted.
¿Cómo funciona esta aplicación?
El usar y sacarle provecho es muy sencillo, simplemente escribimos una porción de texto que nosotros sabemos que aparece en un texto de nuestra propiedad en el campo de la aplicación que dice [Texto a sustituir], luego en el campo [Nuevo texto] escribimos el texto que nosotros queremos que aparezca en nuestro texto, luego en el campo [Texto a reparar] escribimos el texto al que nosotros queremos hacerle los cambio y listo lo último que tenemos que hacer para que la aplicación haga su trabajo es hacer clic en el botón [Ejecutar].
La siguiente captura muestra un ejemplo de la manera de usar esta aplicación.

Limitaciones de la aplicación
 Como toda aplicación esta tiene una limitación, la aplicación no hace las sustituciones cuando el texto a sustituir aparece en el texto a reparar más de 24000 veces es decir por debajo de las 24000 sustituciones la aplicación funciona perfectamente.

¿Quiénes pueden sacarle provecho a esta aplicación?
Creo que esta aplicación le beneficia a todo aquel que necesita hacer lo que esta aplicación hace, aunque debo decir que si usted trabaja con código de programación o diseño de página web esta aplicación le vendrá como anillo al dedo por lo que esta aplicación en si misma hace ahorrarle tiempo y la posibilidad de cometer un error cuando al que hacer múltiples sustituciones de una palabra por otra en un océano de texto y lo mejor es que es online.

jueves, 25 de junio de 2015

Como representar datos estadístico profesionalmente en una gráfica

En este post vamos a aprender a hacer una buena representación de un conjunto de datos estadísticos para fines de presentarlos ante un grupo de trabajo de una empresa o para un trabajo de investigación con fines educativos, para esto nos auxiliaremos de la tecnología informática y de los programas microsoft word y microsoft excel.


En el mundo globalizado se hace necesario que los trabajos sean tabulados u organizado mediante una tabla que presente el recogimiento de los datos en una investigación o una encuesta con un fin especifico y la manera en que uno presenta los datos deja mucho de que hablar de nuestro trabajo a aquella audiencia que valora nuestro trabajo.



Por esto nace este articulo con el objetivo de presentar algunos tips para representar nuestros datos estadísticos de una manera profesional.


Imaginemos que vamos a representar los datos recogido en una investigación mediante la cual se quiere averiguar en una muestra o población de 100 personas en un plantel universitario, ¿cual de 4 materias o asignaturas entre las cuales se encuentran Biología, Química, Matemática y Física es con la que se sienten más a gusto? y imagine que usted obtuvo  los datos siguientes, que a 50 estudiantes le gusta la Biología , a 20 estudiantes le gusta la Química, a 17 le gusta la Matemática y a 13 le gusta la Física, todos los datos equivaldrían en términos de porcentajes, a el 50% de los estudiantes le gusta la Biología, al 20% le gusta la Química, al 17% le gusta la matemática y al 13% le gusta la Física  .



Si se nos ocurriera presentar los datos tal como se han escrito en el párrafo anterior pues la verdad  no tiene nada de malo como lo hemos escrito, el problema es que en el mundo moderno todo debe ser analizado mediante una síntesis  o simplificación y nada mejor para este propósito que una tabla o un gráfico para presentar estos datos.


Para hacer esto utilizaremos la tecnología a nuestra disposición, si usted dispone del programa microsoft word y microsoft excel, estos programas pueden ayudarle a darle el toque profesional que su trabajo estadístico necesita.


Vamos a representar los datos anteriores en una tabla usando el programa microsoft word, en este post usamos microsoft word 7, aunque el proceso es similar en cualquier versión.


1- Abrimos el programa microsoft word y vamos a la cinta del menú de herramientas que dice "Insertar" encerrada en el óvalo rojo y hacemos clic tal como se muestra en la figura siguiente.


2- Vamos a la cinta que dice "Tabla" y hacemos clic, allí escogemos la cantidad de fila y de columna que ha de tener nuestra tabla que en nuestro caso serán  tres columnas y cinco fila es decir  3 x 5 .


Como se puede ver en la foto el óvalo rojo muestra que nuestra tabla tendrá 3 columnas y 5 filas, después de escoger el número de fila y columna hacemos un clic y se nos genera una tabla como esta.

La tabla que se nos genera quizá no tiene el ancho y el alto que nosotros deseemos, para personalizar la tabla haga clic en cualquier parte de la tabla y luego haga clic en la esquina superior izquierda en la cruz encerrada en el circulo rojo.


Luego de que hacemos clic en la esquina superior izquierda la tabla nos queda así.

3- Ahora vamos a cinta de menú que dice "Presentación" y hacemos clic, luego vamos a la sección que dice "Tamaño de celda" y hacemos clic, y allí especificamos el tamaño de las filas y de las columnas.


Ya después de haber personalizado nuestra tabla simplemente procedemos a poner los datos a tabular, los datos y la tabla con los datos organizado se vería así.


La tabla después de aplicarle un diseño personalizado en la cinta que dice "Diseño" la tabla se ve como en la gráfica anterior.


Para representar los datos de la tabla ahora en una gráfica que puede ser de pastel , barra o como uno la prefiera.

1- Vamos a la cinta de microsoft word que dice "Insertar" luego vamos a la sección donde dice "Gráfico" y hacemos clic allí.


Después que hacemos clic se nos abre un cuadro de dialogo con todas las posibles gráficas que podemos utilizar, en nuestro caso vamos a utilizar un gráfico circular para representar los datos ya tabulados en la tabla.

Después que escogemos nuestro gráfico la pantalla se nos divide en dos ventanas, en una visualizaremos el gráfico que se encuentra en el programa microsoft word y en la otra mitad veremos los datos sin personalizar del programa de cálculo microsoft excel esto se debería ver así.


Ahora procedemos a personalizar los datos de la ventana de excel por nuestros datos haciendo un clic en la celdas donde vamos a cambiar los datos y procedemos a escribir los datos que nos competen a nosotros, quedándonos la gráfica así.

Ya después que hemos personalizado los datos de excel con nuestro propios datos, cerramos la ventana de excel y ya los datos de la tabla quedan representado como se muestra a continuación.

La gráfica anterior podemos personalizarla aún más haciendo clic sobre el gráfico y dirigiéndonos a la cintas "Diseño", "Herramientas de gráficos" y "Presentación", veamos la gráfica anterior aplicándole algunas personalizaciones.


Ya por último si no deseamos representar estos datos en un gráfico circular simplemente hacemos clic sobre el gráfico y luego hacemos clic sobre la cinta "Herramientas de gráficos" y allí vamos a la sección que dice "Cambiar gráfico" , el gráfico anterior cambiado por uno de barras se vería así:



Vea también 

Como guardar, copiar y pegar un texto o imágen
Como crear un párrafo en un html o página web 
Como crear un cuadro de diálogo con visual basic
Como como convertir una foto a un formato ".ico"
Ejemplos de códigos para funciones en visual basic