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

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

miércoles, 10 de junio de 2015

Creación de un párrafo en un html

En este post vamos a explicar que etiqueta debemos usar para crear un párrafo y aplicarle un estilo personalizado ya sea utilizando los atributos dentro de la misma etiqueta del párrafo o aplicandoles estos atributos al párrafo desde fuera nombrandolo con una clase especifica en un html o una página web .



La Etiqueta dentro de la cual vá el párrafo y que le dice al navegador que lo que está leyendo es un párrafo.
<p>
Este es un parrafo
</p>


La etiqueta del parrafo admite los atributos de estilo que se muestran en la siguiente tabla:


Atributos de estilo
Modo de uso
Valores
Background-color
Expresión alfa-numérica que sirve para cambiar el color del fondo del párrafo
Hexadecimale(#000000,#dadada,..) y de cadena(white,blue,green,red,purple)
Color
Expresión alfa-numérica que cambia el color de las letras dentro del párrafo
Hexadecimale(#000000,#dadada,..) y de cadena(white,blue,green,red,purple)
Text-size
Expresión alfa-numérica que cambia el tamaño de las letras
Númerico(n px,n em,n cm) y de cadena(xx-large,x-large,large,xx-small,x-small,small)
Text-align
Expresión de cadena que Alignea el texto a la derecha, izquierda y el centro
Left,Right,Center.
Width
Expresión numérica que especifica el ancho del parrafo
Numérico(n px,n em,n cm, n pt) y en porcentajes(n %)
Height
Expresión numérica que especifica el alto de un parrafo
Numérico(n px,n em,n cm) y en porcentajes(n %)
Font-weight
Expresión numérica que especifica
el cuerpo  de una letra
extra-light,demi-light,light,medium,extra-bold,demi-bold, bold
Font-family
Expresión de cadena que indica el tipo de fuente de texto que utiliza el parrafo
Arial,Times,Times New Roman,Helvetica,Verdana,sans-serif entre otras.
Float
Expresión de cadena que  especifica si el párrafo se úbica a la izquierda, derecha o al centro respecto a una etiqueta contenedora del párrafo.
Left,Right,Center


Como todo los atributos anteriores son de estilo casi siempre se incluyen en una estiqueta de estilo(style) que suele estar dentro de la misma etiqueta a la que se le quiere dar el estilo o puede estar fuera de la etiqueta a la que se quiere dar el estilo, dentro de la etiqueta "<style> ....</style>", o en una hoja de estilo fuera del html donde se encuentra la etiqueta a la que se le quiere dar estilo.

Ejemplo veamos un código que incluye gran parte de los atributos mencionados en la tabla, donde los atributos estan dentro de la etiqueta del párrafo("<p>").



<p style="font-family: Helvetica;background-color: blue; font-size: 30px; text-align: center; width: 300px;">
En este blog encontrarás todo lo referente a cálculos matemáticos, físicos y tecnologicos......
</p>



Este código anterior genera en un navegador  algo semejante  a esto.

En este blog encontrarás todo lo referente a cálculos matemáticos, físicos y tecnologicos......

Los atributos tambien pueden estar fuera para esto solo tenemos que poner el nombre de la etiqueta a la que queremos darle el estilo, ejemplo usando el mismo código anterior tenemos



<style>
p{
font-family: Helvetica;
background-color: blue; 
font-size: 30px; 
text-align: center;
width: 300px;

</style>

<p>
En este blog encontrarás todo lo referente a cálculos matemáticos, físicos y tecnologicos......
</p>


Un código como este se vería en un navegador así.

En este blog encontrarás todo lo referente a cálculos matemáticos, físicos y tecnologicos......

El problema con el código anterior es que si el html o página web tiene más párrafos, todos quedarán con el mismo estilo, para solucionar este pequeño inconveniente, en caso de que sólo le querramos aplicar este estilo a un párrafo especifico cuya clase es "parrafo" el código anterior deberá ser:

<style>

.parrafo{
font-family: Helvetica;
background-color: blue; 
font-size: 30px; 
text-align: center; 
width: 300px;

</style>

<p class="parrafo">

En este blog encontrarás todo lo referente a cálculos matemáticos, físicos y tecnologicos......

</p>


De esta manera el estilo definido en el código solo se aplicará a aquel párrafo cuya clase(class) sea "parrafo".
Una última observación es que la gran mayoría de estos atributos de estilo son aplicables a otras etiquetas que estaremos analizando en otro artículo.
Vea tambien
Fundamentos básicos para crear y diseñar una página web