Como Lo Hago » Jorge Nitales

Cómo hacer un formulario de ingreso desplegable

Jorge Nitales — Thu, 05 Aug 2010 04:35:52 +0000

Hoy vamos a ver un pequeño truquillo para mejorar tu sitio web, veremos como crear un formuario de ingreso desplegable al momento de hacer click en algún lugar y que además se esconda si volvemos a hacer click. Con esto evitaremos la carga de una página para que los usuarios puedan acceder al sitio.

Para ver Cómo lo hago y que necesito, vamos después del salto.

Cómo hacer un formulario de ingreso desplegable

Información del Tutorial

Dificultad: Baja

Tiempo de Realizacíon: 30 min

¿Qué necesito?

Un editor web

Conocimiento básico en HTML. Recomendamos esta saga

Conocimiento básico en CSS. Recomendamos esta saga

¿Cómo Lo Hago?

1.- Necesitamos crear una página HTML básica donde usemos hojas de estilo, que contenga nuestro menú donde una de las opciones sea “Login”, “Ingresar” o lo que ustedes prefieran.

En este caso haremos lo siguiente:

En HTML:







Untitled Document





Home
Galería
Contacto
Log-in

en CSS

table
{
background:green;
margin:auto;
font-family:verdana,helvetica;
font-size:14px;
}

a:link,a:active,a:visited
{
color:white;
text-decoration:none;
}

a:hover
{
text-decoration:underline;
}

No ganará ningun concurso de diseño, pero para la explicación sirve.

Con lo anterior tendremos algo así.

2.- Ahora necesitamos crear nuestro formulario de ingreso, para esto usaremos un “

”, ya que este estará siempre en la página, pero se vera cuando nosotros los indiquemos.

Para esto, creamos un div como el siguiente:

Como ven, este div tiene un “id” que es un identificador, adicionalmente a esto, agregamos una etiqueta “id” al link del menu que corresponde a “login”, quedando el HTML de la siguiente forma:







Untitled Document





Home
Galería
Contacto
Log-in

También debemos agregar un nuevo código a la hoja de estilos para darle forma a nuestro formulario, por lo que agregaremos a nuestro CSS lo siguiente:

#login-form
{
width:120px;
background:gray;
text-align:center;
}
#login-form input[type=text],#login-form [type=password]
{
background:black;
color:white;
display:block;
margin-left:10px;
width:100px;
}

Quedando nuestro sitio así.

Sigue sin ganar ningun premio, pero nuevamente es funcional para el ejemplo.

En la hoja de estilos, al id del formulario, agregamos lo siguiente:

display:none;

margin:auto;

quedando nuestro CSS de la siguiente manera:

table
{
background:green;
margin:auto;
font-family:verdana,helvetica;
font-size:14px;
}

a:link,a:active,a:visited
{
color:white;
text-decoration:none;
}

a:hover
{
text-decoration:underline;
}

#login-form
{
width:120px;
background:gray;
text-align:center;
margin:auto;
display:none;
}

#login-form input[type=text],#login-form [type=password]
{
background:black;
color:white;
display:block;
margin-left:10px;
width:100px;
}

Como verán, si es que estan haciendo esto a la vez que leen, nuestro formulario desapareció y jamas volvera, así que fin del tutorial. Lo que pasa que está inicialmente escondido, como necesitamos que este, además lo centramos, pero como no pueden ver, aun no lo sabe.

De aquí en adelante empieza la magia.

Primero que todo, como empezaremos a usar JQuery, necesitan bajar la librería y agregarla en el encabezado de su sitio.

Para descargarla lo pueden hacer aquí

y para agregarlo, ponen la siguiente linea en el encabezado de su sitio.

Y ahora, necesitamos crear un nuevo archivo, que para efectos de ejemplo, llamaremos “funciones.js”

en el cual pondremos el siguiente código (se comentará el código para explicar su funcionamiento)

$(function(){
/* Con esto se esta diciendo "una vez que se cargue el sitio",
cuando eso se cumpla se sigue con lo demas */

$('#login').toggle(function(){
/* Usamos la funcion toggle, que sirve para hacer cierta acción con el primer click
y otra con el segundo. Los clicks se deben hacer sobre #login que es el
identificador de "login" en nuestro menu */

$('#login-form').slideDown();
/* Con el primer click, hacemos que el formulario se despliegue hacia abajo */

},function(){ 

//y con el segundo click...

$('#login-form').slideUp();
// hacemos que el formuario se "guarde" hacia arriba

}); //cerramos la funcion que realiza toggle

}); //cerramos las funciones

Es importante decir que la función Toggle tiene al menos 12 mil usos más. En verdad 12 mil fue un número al azar y quizás exagerado, pero si tiene muchas más.

Ahora si vuelven a su sitio y hacen click en login.. ¡¡¡no pasará nada!!!

Y esto es porque tenemos que agregar este archivo de funciones a la cabecera de nuestro sitio, de la siguiente manera (a esta altura creo que debí hacer esto en video)

Como ven se agregó abajo de la librería de jquery, si lo agregar sobre esta, no funcionará nada. ¡Avisados!

Ahora ya esta funcionando, pero antes de mostrar como quedó, agregaremos unas funciones más. ¿Para qué?

Para que cuando alguien haga click en el input de usuario o contraseña, se borre el texto que por defecto esta y lo deje en blanco, lo hacemos agregando lo siguiente, debemos agregarlo despues del cierre de la funcion de toggle pero antes del cierre de todas las funciones.

$('#usuario').focus(function(){
// Esto quiere decir, que cuando se selecciones el input con id "usuario"...
$(this).val(''); 
// el valor, idetificado como val, que es lo que esta dentro del campo sea igual a.. nada.

}); // Cerramos la funcion y abajo repetimos lo mismo con el input password

$('#password').focus(function(){
$(this).val('');

});
});    
/* Cerramos las funciones, no lo hicimos 2 veces,
recuerden que esto va abajo de la funcion anterior y antes del cierre */

Para evitar confusiones mostraremos todo el archivo de funciones sin comentarios.

$(function(){

$('#login').toggle(function(){

$('#login-form').slideDown();

},function(){

$('#login-form').slideUp();

});

$('#usuario').focus(function(){
$(this).val('');

});

$('#password').focus(function(){
$(this).val('');

});
});

Y como podemos ver, funciona si problemas, aquí

Para terminar, agregaremos un “

” que contenga todo lo anterior, para poder centrarlo y que nuestro formulario quede a la derecha con CSS. Ahora mostraremos los códigos de todo, para que vean el resultado final.

HTML









Untitled Document






Home
Galería
Contacto
Log-in














});
});

CSS

#contenedor
{
width:215px;
margin:auto;
}

table
{
background:green;
font-family:verdana,helvetica;
font-size:14px;
}

a:link,a:active,a:visited
{
color:white;
text-decoration:none;
}

a:hover
{
text-decoration:underline;
}

#login-form
{
width:120px;
background:gray;
text-align:center;
display:none;
float:right;
}

#login-form input[type=text],#login-form [type=password]
{
background:black;
color:white;
display:block;
margin-left:10px;
width:100px;
}

JQuery

$(function(){

$('#login').toggle(function(){

$('#login-form').slideDown();

},function(){

$('#login-form').slideUp();

});

$('#usuario').focus(function(){
$(this).val('');

});

$('#password').focus(function(){
$(this).val('');
});
});

El resultado final aquí

Con esto, tienen listo su formulario desplegable. Solo queda hacer un diseño bonito para acompañar.

Cualquier duda que puedan tener, los invitamos a dejarnos un comentario a continuación.

Por ahora,

Me despido

Staff CLH

Recordando Tutoriales: Cómo instalar un Font en Windows

Jorge Nitales — Wed, 21 Jul 2010 02:02:30 +0000

Hace unos días me preguntaron 3 veces en el mismo día, todos usuarios de Windows, como se podía instalar un font o tipografía. Luego de responder a la tercera persona me dije a mi mismo: “Hey mismo, ¿por que no haces un tutorial al respecto?”.

Al recordar que ya lo había hecho, pero que estaba perdido en lo más recóndito de CLH, decidí traerlo a la vida nuevamente.

Vamos a ver algo muy simple pero que no todos saben y que además puede ser de mucha utilidad, vamos a aprender a instalar un Font en Windows.

Cómo instalar un Font en Windows

¿Qué es un font?

Un font es una tipografía, es decir un estilo o tipo de letra que usamos para escribir en el PC, ya sea en un procesador de texto o en algún programa de diseño, las más comunes son Arial, Verdana y la nunca bien ponderada Times New Roman.

¿Pero que pasa cuando bajo un Font de Internet?

Bueno, tengo que instalarla y eso es lo que aprenderemos ahora.

Detalles del tutorial

Tiempo aproximado de implementación: 2 min.

Dificultad: Muy Fácil.

Implementos necesarios:

Un PC con Windows (No probado en Windows Vista) (Nota de Actualización: Ahora si se probo y también en Windows 7 y si, funcionó)

Una font o tipografía

Empecemos:

1.- Lo primero que tienen que hacer es descomprimir el Font, el archivo que tiene que quedar es Ravie.ttf (si el Font ya esta descomprimido, omitimos el paso)

2.- Cortamos (o copiamos) el archivo y lo pegamos en la siguiente ruta “C:\WINDOWS\Fonts”. Más simple aún, vamos a “Mi PC”, luego a “C:”, luego a la carpeta “Windows” y una vez adentro abrimos la carpeta “Fonts”, con la carpeta abierta pegamos el archivo Ravie.ttf dentro del directorio.

Resaltamos el “abrir” ya que muchas veces, por no decir siempre, si damos click derecho a la carpeta y ponemos copiar, el font no se instalará.

3.- Esperamos que se instale (por lo general se demora 1 segundo).

Y listo, ya tenemos instalado el Font.

Ahora podremos escribir usando esa tipografía cualquier tipo de texto.

En algunos casos, deberemos cerrar y abrir la aplicación que estamos utilizando y en otros casos, muy pocos, deberemos reiniciar el equipo para que algunas aplicaciones reconozcan la fuente recién instalada.

Notas Importantes:

1.- Si escribes un texto usando ese font y le mandas el archivo de texto a otra persona que no tiene ese font, esta persona no verá la tipografía. Por otra parte, si crean una imagen con ese Font y envían la imagen, la persona verá el Font que usaron.

En base a esto, nunca envíen un informe o algún curriculum en alguna fuente que no venga por defecto en Windows, ni siquiera en la famosa Calibri de Office 2007, ya que si la persona no tiene instalado este programa, es muy probable que no tenga la fuente y no solo no la podrá ver, si no que el cambio de fuente puede descuadrar todo un documento y eso, nunca, pero nunca, se ve bien.

2.- Solo hagan este proceso, no modifiquen nada más de la carpeta “Windows”.

¡Nada de nada!

No duden en dejar sus comentarios o problemas a continuación. Como siempre, este tutorial ha sido:

Por ahora,

Me despido.

Staff CLH

Cómo generar números aleatorios en C

Jorge Nitales — Wed, 23 Jun 2010 05:14:10 +0000

Quizás recuerden hace algún tiempo que el buen Xaba Daba Du, nos mostró como generar números aleatorios en PHP. Ésta vez y por petición expresa de nadie de millones de personas, les traemos lo mismo, pero ésta vez en otro lenguaje, el siempre presente y nunca querido C.

Para ver Cómo lo Hago, vamos después del salto.

Cómo generar números aleatorios en C

¿Qué necesitamos?

Un editor de lenguaje C, tipo Borland C++.

¿Cómo Lo Hago?

1.- Primero explicaremos algunos conceptos:

En C, existe una función llamada rand(), que genera números aleatorios. El problema que tiene esta función es que siempre que reinicies el programa, aparecerán los mismos números.

Para evitar esto, hay que darle un número “semilla”, el cual operará como base para la generación de la secuencia de números. El problema con esto, es que si le damos un número fijo, volvemos al problema anterior, ya que siempre utilizará la misma base definida y por ende la secuencia será la misma.

Entonces, lo que necesitamos es darle un número “semilla” dinámico, esto es, que vaya cambiando cada vez que ejecutemos el programa.

Sabiendo esto, la función que da la semilla a rand() es srand(), que recibe como parámetro (lo que va entre los paréntesis) el número semilla, que en este caso, será la hora del sistema en segundos. Así, a menos que el programa se ejecute 2 o más veces en menos de un segundo, los números cambiarán.

La función para saber la hora actual del sistema es time(NULL).

Sabiendo esto, vamos al código. Haremos un generador de números aleatorios, donde la cantidad de estos, la decidirá el usuario, ingresando esta cantidad por teclado.

#include  // libreria basica para entrada y salida
#include // libreria para el uso de rand()
#include  // libreria para el uso de getch()
#include   // libreria para el uso de time()
void main( )
{
     // Declaracion de variables
     int numero,cantidad,contador;
     int hora = time(NULL);

     // Semilla de rand();
     srand(hora);

     /* Recogemos por teclado la cantidad de
        numeros que quiere el usuario */

        printf("Ingrese la cantidad de numeros
        aleatorios que desea generar\n");
        scanf("%d",&cantidad);

        /* Generamos un ciclo que se repite la cantidad
           de veces indicada. En cada vuelta del ciclo se
           genera y se imprime un numero aleatorio. */

        for(contador = 0; contador
A pesar de que esta explicado con comentarios, desmenucemos un poco.
#include  // libreria basica para entrada y salida
#include // libreria para el uso de rand( )
#include  // libreria para el uso de getch( )
#include   // libreria para el uso de time( )

Estos cuatro includes, son para llamar a las librerías necesarias para ejecutar el programa. La librería conio.h, no es necesaria para que el programa funcione, solo la llamamos pasar usar la función getch( ) y generar una pausa en el programa. Con esto podremos ver el resultado por pantalla antes que se cierre el programa.
// Declaración de variables

int numero,cantidad,contador;
int hora = time(NULL);

Acá declaramos el tipo y que variables utilizaremos. Definimos 4 variables de tipo int (entero), 3 de ellos sin inicializar (es decir, sin valor inicial) y una de ella inicializada.
Las 3 sin valor inicial, serán el número aleatorio que se genera (número). La cantidad de números aleatorios que se generarán (cantidad) y un contador para crear un ciclo.
// Recogemos por teclado la cantidad de numeros que quiere el usuario

printf("Ingrese la cantidad de numeros aleatorios que desea generar\n");
scanf("%d",&cantidad);
Mostramos por pantalla el mensaje para el usuario y asignamos el valor que se ingrese, a la variable cantidad usando el símbolo & (ampersand).
// Generamos un ciclo que se repite la cantidad de veces indicada
// en cada vuelta del ciclo se genera y se imprime un numero aleatorio.

for(contador = 0; contador < cantidad; contador++)
{
      numero = rand()%100;
      printf("%d ", numero);
}

getch();     // genera una pausa en la ejecucion del programa

}

Aquí es donde generamos el ciclo, con el bucle for. Tenemos 3 parámetros separados por ; (punto y coma), en el primero inicializamos la variable contador con el valor cero. En la segunda ponemos la condición que se debe cumplir para terminar el ciclo, en este caso decimos que el ciclo se repita siempre que contador sea menor que cantidad. Ojo, aquí decimos que sea menor que el número porque el valor inicial es cero y empezamos a contar desde cero y no de uno.
Al final aplicamos un getch( ) para detener el programa y lograr ver los resultados.
Les invito a realizarlo y hacer sus aportes. Cualquier consulta o comentario que puedan tener, no duden en dejarnos unas líneas a continuación. Como siempre, este tutorial ha sido:



Por ahora,
Me despido.
Staff Cómo Lo Hago

Cómo hacer un caracol de goma eva

Jorge Nitales — Wed, 09 Jun 2010 03:30:42 +0000

Luego de sufrir en el exilio por haberme comido el último pedazo de pizza, vuelvo (así es, me había ido) para traerles un sencillísimo pero siempre útil adorno de goma eva, más específicamente y como dice el título, un caracol.

Si todo es como yo recordaba, el resto del tutorial, después del salto.

Cómo hacer un caracol de goma eva

¿Qué necesitamos?

2 láminas de goma eva de distinto color y de al menos 30 cm de largo y unos 10 cm de alto.
2 alfileres, pueden ser con cabeza de color o normales.
1 palito de brocheta, los mismos para hacer anticuchos.

¿Cómo Lo Hago?

1.- Cortamos 2 tiras de goma eva de 30 cm x 1 cm aprox. una de cada color.

2.- Podrán notar unos hoyos o agujeros hechos en la goma eva, ya se explicará porque así que no desesperen, lo que tenemos que hacer ahora es tomar una de las 2 tiras y hacer un corte que simulará la “cola” del caracol.

3.- Tomamos ambas tiras y las igualamos por el lado en donde no hicimos el corte.

4.- Ahora enrollamos dejando la tira que tiene la “cola” por dentro, de la siguiente manera.

5.- Cómo puede ver, la “cola” no se enrolla con el resto del cuerpo.

6.- Ahora, con el palito de brocheta, atravesamos desde el final de la tira negra (la que no tiene el corte) hasta lo más adentro que podamos, pero nunca dejando que el palito se asome, basta con que pase de la mitad, esta es la razón por la que estabas hechos los hoyos, una posibilidad es hacerlos antes para que no cueste atravesar hasta dejarlo firme, pero la verdad, hacerlos calzar es mas trabajo que cualquier otra cosa, así que no se recomienda.

7.- Ahora cortamos 2 tiras mas, del mismo grosor, pero esa vez una de unos 7 cm y otra de unos 5 cm.

8.- Repetimos el proceso, con la tira más larga por fuera.

9.- Atravesamos con los 2 alfileres este nuevo rollo, los alfileres deben quedar simulando las antenas.

10.- Cómo ven, pusimos unos pequeños cuadrados de goma eva en los alfileres, cosa que no es necesaria si tienen alfileres con cabeza de color. Es importante que los alfileres queden pasados como se ve en la foto.

11.- Ahora, lo obvio, unimos la cabeza al cuerpo.

¡¡¡ESTÁ VIVO!!!

Con esto ya tienen un sencillo caracol de goma eva que nos les demorará más de 10 minutos realizar.

Cualquier duda que puedan tener, los invitamos a dejar su comentario a continuación. Como siempre, este tutorial ha sido:

Por ahora,

Me despido.

Staff Cómo Lo Hago

Cómo hacer un texto “sucio”

Jorge Nitales — Wed, 24 Mar 2010 04:16:06 +0000

Luego de un pequeño break, volvemos con un nuevo tutorial de la saga de textos en Photoshop. Esta vez haremos un texto que dé la impresion de ser escrito sobre algo sucio, como petroleo.

Para ver Cómo Lo Hago, vamos después del salto.

Cómo hacer un texto sucio

¿Qué necesitamos?

- Adobe Photoshop

¿Cómo lo hago?

1.- Creamos un documento en blanco del tamaño que deseamos.

2.- Asegurándonos de tener el color negro como principal y el blanco como secundario, vamos a Filtro->Interpretar->Nubes:

3.- Luego, con la herramienta de texto, elegimos la fuente que queremos usar (recomiendo Impact) y con letra grande escribimos nuestro texto encima.

4.- Ahora tenemos que seleccionar el contorno de nuestro texto, para eso presionamos control y hacemos click sobre la “T” que hay en la ventana Capas. Hecho esto, damos click derecho y borramos esta capa dejando solo la selección.

5.-Ahora, con esta selección vamos a Filtro->Interpretar->Nubes de Diferencia y aplicamos el filtro 2 ó 3 veces.

6.- Ahora debemos aplicar 2 filtros, el primero:

Filtro->Estilizar->Bordes Resplandecientes, con:

Anchura: 5
Brillo: 8
Suavizado:8

Después,

Filtro-> Artistico -> Plastificar, con:

Intensidad: 10
Detalle: 10
Suavizado: 5

Además, con la herramienta Desenfocar (gota) repasamos los bordes de nuestro texto.

Con esto, tenemos nuestro texto sucio.

Cualquier duda que puedan tener, los invitamos a dejar su comentario. Como siempre, les recordamos que este tutorial ha sido:

Por ahora,

Me despido.

Staff Cómo Lo Hago

Cómo armar una mochila de emergencia

Jorge Nitales — Fri, 12 Mar 2010 05:48:08 +0000

A riesgo de ser sensacionalistas, decidimos crear un tutorial para casos cómo el que nos toco vivir a mi a mis compatriotas hace poco en Chile. A pesar de que podría ser considerado tarde y aunque esperamos realmente no sea necesario, mostraremos que debe tener una mochila de emergencia, en caso de tener que hacer rapido abandono del hogar.

Cómo armar una mochila de emergencia

Nos saltaremos el que “¿Que necesitamos?” porque eso es basicamente el tutorial.

¿Cómo lo Hago?

Lo que se necesita es tener lo escencial a mano, entonces, en una mochila espaciosa e idealmente comoda de llevar debemos tener:

- Agua envasada: Esto quiere decir agua que se venda embasada y sellada, no bidones llenados por uno, claro que ante la ausencia de la primera, la seguna es una opción. La cantidad es aproximadamente 4 lts por persona por día.

- Alimentos no perecibles: Es decir, enlatados, secos, basicamente que no se descompongan.

- Radio a pilas: Puede parecer innecesario, pero en caso de una emergencia es importante saber que informaciones se estan entregando, sobre posibles albergues o hacia donde dirigirse.

- Una linterna: En caso de que sea o se haga de noche y esten en un lugar sin luz o que ocurra un corte de luz, siempre es útil una linterna

- Pilas: Baterias extras, tanto para la radio como para la linterna, nunca esta de más decir que tienen que confirmar que correspondan al aparato, unas pilas AA no sirven de nada en una linterna que use pilas de tipo AAA.

- Abrelatas: Para la comida enlatada.

- Ropa Abrigada y/o Frazadas: No importa que sea verano, en una emergencia que obligue a pasar la noche a la intemperie, tener esto sirve para palear el frío.

- Un Pito: Si se encontrasen en la sitación de que hubiesen equipos de rescate, un pito o silbato puede ser de gran utilidad para ser encontrado.

- Articulos de Higiene: Es lógico pensar que de ser necesario arrancar de algo, los articulos de higiene pueden no ser escenciales, pero la verdad si lo son, mantener la higiene ayuda a prevenir posibles infecciones.

- Fósforos: En caso de necesitar una fogata, siempre es bueno tenerlos a mano.

- Y por supuesto un botiquín, el cual debe tener por lo menos:

- Algodón

- Gasa

- Antisepticos

- Alcohol

- Jabón

- Tijeras (Afiladas)

- Curitas

- Termómetro

- Agua Oxigenada

Con esto tienen una mochila básica de emergencia armada, no duden en hacer sus aportes.

Esperamos que no tengan que hacer uso de ella, pero de necesitarla, esperamos que les sea de útilidad.

Reiteramos el llamado de ayuda para la gente victima del terremoto recién ocurrido y las dispocición de este portal para lo que sea necesario.

Un gran y fraterno abrazo a las personas que estan necesitada.

Por ahora,

Me despido.

Staff Como Lo Hago

Cómo dominar Excel Parte 3

Jorge Nitales — Mon, 22 Feb 2010 02:59:28 +0000

Hoy vamos a retomar una saga que había quedado pendiente por diferentes razones y que finalmente vuelve en gloria y majestad, la parte 3 de como dominar Excel. Hoy veremos funciones de información, para reconocer tipos de datos o contar celdas en blanco. Para ver Cómo lo Hago, como siempre, después del salto.

Cómo dominar Excel Parte 3

¿Qué necesitamos?

- Excel

- Idealmente, haber leído las 2 partes anteriores.

¿Cómo lo hago?

Bien, esta vez veremos:

1.- La función CONTAR.BLANCO: la manera de usar esta función es “=CONTAR.BLANCO(celdainicial:celdafinal)” sin comillas y reemplazando las celdas por las que correspondan. Como siempre un ejemplo ayudará a explicar mejor:

En el ejemplo podemos ver como contaremos la cantidad de celdas en blanco de el cuadrado seleccionado donde B4 es la celda superior izquierda y D9 la inferior derecha. La función contará las celdas blancas y devolverá la cantidad, en este caso 4.

2.- La función ES.PAR: Con esto podremos ver si el valor numérico de una celda es par. Su modo de empleo es “=ES.PAR(celda)” sin las comillas y reemplazando con la celda deseada. Veamos la función con el ejemplo anterior:

En este caso, la celda devolvería un falso ya que la celda referenciada contiene un numero impar (5), claro que eso es un ejemplo, la función toma una real utilidad cuando se aplica a una celda que devuelva el resultado de una operación matematica.

3.- La función ES.IMPAR: Lo mismo que la función anterior, pero esta vez comprueba si el valor es IMPAR.

En este caso devolvería verdadero.

4.- Por último, para complementar las funciones anteriores existe una función llamada ESNUMERO, la cual sirve para saber si el valor de una celda es o no un número. Su modo de uso es “=ESNUMERO(celda)” sin comillas y reemplazando con la celda deseada. Usemos el mismo ejemplo.

En este caso devuelve verdadero porque el valor es numérico.

Bueno con esto concluímos esta parte de la saga, continuando en un futuro cercano con otras utilidades con el fin de poder llegar a dominar Excel. Como siempre, cualquier duda que pueda asomar al respecto, los invitamos a dejar su comentario.

Como siempre, este tutorial ha

Por ahora,

Me despido.

Staff Cómo Lo Hago

Recordando Tutoriales: Como instalar Wordpress en Localhost

Jorge Nitales — Sun, 14 Feb 2010 04:38:15 +0000

Hoy vamos a ver como poner montar su blog en su pc para que tengan la posibilidad de editar sin conexion a internet y de una manera más comoda y rapida.

Para ver Como Lo Hago, vamos despues del salto.

Como instalar Wordpress en Localhost

¿Que Necesitamos?

- Xampp, lo pueden descargar aquí

- Wordpress, lo pueden descargar aquí

Ojo, con el paso del tiempo las versiones pueden ser incompatibles.

¿Como Lo Hago?

1.- Instalamos Xampp, recomiendo la ubicación C:Xampp, que además es la que viene por defecto.

2.- Realizado esto, vamos a la carpeta donde instalamos Xampp y ejecutamos el archivo Xampp_Start.exe, se abrirá una ventana, esperamos a que se cierre por si sola.

Si en este punto, xampp se ejecuta pero no logran ver las páginas, es por causa de la compatibilidad antes dichas

3.- Una vez que se haya cerrado la ventana, abrimos Internet Explorer y vamos a la URL http://localhost/phpmyadmin, nos encontraremos con algo parecido a un panel de cotrol, al centro de la pantalla encontramos algo como esto:

Click para agrandar

4.- Con esto crearemos una base de datos, el nombre lo puede elegir ustedes, recomiendo Wordpress para no confundirse.

5.- Hecho esto, descomprimimos el archivo de wordpress que descargamos y copiamos el contenido dentro de la carpeta htdocs que se encuentra donde instalamos Xampp (copiamos toda la carpeta que probablemente se llame “Wordpress”).

6.- Una vez hecho esto, volvemos a Internet Explorer y ahora vamos a la URL http://localhost/wordpress, se abrira una página como esta:

Click para agrandar

7.- Presionamos en Crear un archivo de configuración.

8.- Pasamos a otra ventana de Bienvenida e indicaciones, click en “vamos alla”, llegaremos a la siguiente ventana:

Click para agrandar

9,. Llenamos los datos que nos piden:
Nombre de Base datos: Ponemos el nombre de la base de datos que creamos al principio, en este caso “Wordpress”
Nombre de Usuario: Usamos el que viene por defecto en Xampp “Root”
Contraseña: Lo dejamos en blanco, ya que el usuario “Root”, por defecto no tiene contraseña
Host de la base de datos: Necesariamente “Localhost”
Prefijo de las tablas: Todas las tablas que creen en esa base de datos tendran el prefijo que pongan acá, por ejemplo si crean la tabla “nombre” se llamara wp_nombre, tambien recomiendo el prefijo “wp_”.

Luego de completar los datos, click en “Continuar”

10.- Pasamos a otra ventana donde nos da un mensaje de aprobación, click en “Hacer la instalacion”

11.- Llegamos ahora a una página como esta:

Click para agrandar

Llenamos los datos y click en “instalar wordpress”

12.- Hecho esto llegamos a una página donde nos dan nuestro usuario y contraseña para entrar al panel de wordpress, anotenla en alguna parte. Anotada la contraseña, click en “Iniciar Sesión”.

13.- Cuando hayan hecho click, llegarán a su Panel de Wordpress y ya puede empezar a trabjar sobre su blog, para ir a su blog, deben nuevamente ir a la direccion http://localhost/wordpress

Y con esto ya tienen Wordpress instalado en su PC.

Cualquier duda, dejen su comentario.

Por ahora,

Me despido.

Staff Comolohago.cl

CLH Express N°6: Especial Firefox

Jorge Nitales — Thu, 11 Feb 2010 02:13:07 +0000

Hoy, en una nueva edición de CLH Express decidímos hacer un especial Firefox (lo aclaro por si el titulo no era lo bastante claro ), por lo que hoy veremos:

Atajos con el Mouse, cómo ingresar URL más rapido, cómo buscar en tus páginas favoritas desde la barra de direcciones y cómo acelerar firefox.

Cómo siempre, después del salto.

CLH Express N°6: Especial Firefox

¿Qué necesitamos?

- Firefox (se utlizó Firefox 3)

¿Cómo lo Hago?

Vamos por orden:

1.- Atajos con el Mouse

Control + Rueda hacia arriba: Realiza un Zoom a la página que se está viendo.

Control + Rueda hacia abajo: Achica la página que se está viendo.

Click con botón central (si tienen rueda, click en la rueda): Abre un link en una nueva pestaña.

Click botón central sobre una pestaña abierta: Cierra esa pestaña.

Shift + Rueda hacia arriba: Página siguiente.

Shift + Rueda hacia abajo: Página anterior.

2.- Ingresar una URL más rápido

Parte de este truco se mencionó en tutoriales anteriores, pero además de recordar lo ampliaremos:

En vez de ingresar una dirección entera en la barra de direcciones solo ponen el nombre, por ej: en vez de www.google.com solo escriben google y:

Control + Enter: Agrega automaticamente el www y el .com, quedando www.google.com

Shift + Enter: Agrega automaticamente el www y el .net, quedando www.google.net

Control + Shift + Enter: Agrega automaticamente el www y el .org, quedando www.google.org

3.- Cómo buscar rapidamente en tus páginas preferidas

Este truco es genial, supongamos que son asiduos lectores de un sitio llamado Cómo Lo Hago, entonces lo que deben hacer es:

- Ir a ese gran sitio.

-Hacer click derecho sobre la barra de busqueda que tiene el sitio y eligen la opción “Añadir una palabra clave para esta busqueda”.

- En la ventana que aparecerá, tendran 3 campos “Nombre”, “Carpeta” y “Palabra Clave”. En nombre ponen lo que quieran, carpeta lo dejan igual y en palabra clave eligen su palabra para buscar rápido, digamos la palabra “tutorial”.

- Hecho esto, ahora en su barra de direcciones bastará con que escriban “Tutorial Guitarra” sin las comillas y Firefox automaticamente buscará guitarra en el buscador de Cómo lo Hago y los llevará a la página de resultados.

Logicamente, esto lo pueden hacer con cualquier página que tenga un buscador.

4.- Cómo acelerar Firefox

Esto depende mucho de su conexión, pero si tienen una buena, con esto podrán sacar más provecho de la velocidad de Firefox:

- En la barra de direcciones escribir “about:config” sin las comillas, si aparece una página de advertencia, solo pongan continuar.

- En la página que los lleva hay una serie de líneas. Esta es la configuración de Firefox. Vamos a hacer unas modificaciones para acelerar el navegador.

- Arriba tenemos una barra que dice “Filtro”, dentro de ella escribimos:

network.http.pipelining

Abajo aparecerá solo esta línea, le damos doble click y su valor pasará de “false” a “true” (si ya esta en true, así lo dejan).

- Hacemos lo mismo con: network.http.proxy.pipelining y con network.http.pipelining.maxrequests en este último deben cambiar el valor a “30″

- Por último debemos crear una nueva línea de configuración, para esto, abajo donde esta la lista, hacen click derecho en un espacio en blanco y ponen “Nuevo” -> “Entero”, como nombre ponen nglayout.initialpaint.delay y como valor ponen “0″ (cero)

Con esto ya tenemos acelerado nuestro Firefox

Esperamos que la información les haya sido de utilidad, cualquier duda que puedan tener, los invitamos a dejar su comentario. Además, les recordamos que como siempre, este tutorial ha sido:

Por ahora,

Me despido

Staff CLH

Como manejar tu PC con el teclado

Jorge Nitales — Sun, 07 Feb 2010 04:41:58 +0000

Más de alguna vez me ha pasado que necesito hacer algo urgente en el PC y paf! muere el mouse y en esa situación me ví en la obligación de usar el teclado para todo. Dentro de ese todo, hay muchas cosas que simplemente no sabía como hacer o que resultaban realmente tediosas, así que hoy enseñaremos a hacer uso del teclado para manejar su PC y hacer, en esos casos, la vida más simple.

Cómo siempre, todo el detalle después del salto.

Cómo manejar tu PC con el teclado

¿Qué necesitamos?

- Un PC, con Windows.

¿Cómo lo hago?

Lo que haremos será una lista de comandos y la explicación de para que sirve cada uno:

Veamos primeros la famosa “Tecla Windows” que casi nunca usamos y por general resulta ser una molestia cuando estamos jugando y la presionamos sin querer, pero no, no esta pensada para arruinarnos los juegos, si no como accesibilidad y aquí tenemos algunas funciones. Abreviaremos la tecla de Windows como TW por una cosa comodidad:

TW : Muestra u oculta el menú Inicio.

TW + M: Minimiza todas las ventanas abiertas, un gran alivio ya que hacer esto con el teclado es realmente una molestia.

TW + Shift + M: Restaura todas las ventanas, ideal si quieren volver a lo que estaban luego de usar el comando anterior.

TW + F: Si están sin mouse y necesitan buscar algún archivo en su PC, con este comando abrirar el buscador de Windows rapidamente.

TW + L: Con esto se bloquea el equipo, si nuestra sesión tiene contraseña será necesario ingresarla para volver a lo que estabamos, ideal para una salida rapida del escritorio.

TW + R: Abrimos rapidamente el cuadro de Ejecutar.

Tenieniedo en cuenta el paso anterior, veremos que podemos hacer de útil en el cuadro de ejecutar, para hacer uso de esto, tenemos que poner el comando en el cuadro de texto y luego dar un Enter:

regedit: Abre el registro de Windows, si no saben lo que es, no conviene modificarlo

calc: Abre la calculadora

notepad: Ejecuta el block de notas, sin mouse y teniendo que tomar una nota rapida la tenemos facil, TW+R+”notepad”+Enter y ya tenemos nuestro block abierto.

iexplore: Vamos a Internet Explorer, ojo que no está mal escrito, es explore y no explorer, sin la “r” final.

cmd: Abre el simbolo de sistema.

sol: Para distraernos jugando solitario, aunque sin mouse sería bastante dificil

%temp%: Entramos a la carpeta de Archivos Temporales, en caso de que no estemos en nuestro PC y queramos eliminarlos.

firefox: Si no queremos usar Internet Explorer.

wordpad: Ejecutamos… Wordpad.

Además de todo esto, podemos acceder a los elementos que esten en la pantalla usando la tecla TAB, con esta tecla se salta de un elemento a otro el cual se pondra con un fondo gris o en su defecto con una linea punteada al rededor, para hacer uso del elemento seleccionado, solo hace falta un Enter.

Con la tecla ALT, acceden, en general, a los menús de las aplicaciones, también se pone gris o punteado e igualmente accedemos con un Enter.

Podemos usar las flechas del teclado para movernos de un elemento a otro.

Por supuesto, aquí no se a dicho todo y quien quiera hacer su aporte, bienvenido sea, pero con esto por lo menos no se verán completamente amarrados de manos en caso de que su mouse decida dejar de funcionar.

Cualquier duda que puedan tener, los invitamos a que dejen su comentario. Como siempre, este tutorial ha sido:

Por ahora,

Me despido.

Staff CLH