Como Lo Hago

Cómo preparar un Kuchen de Manzana

ToPHeR — Thu, 27 Oct 2011 21:00:18 +0000

Hola amigos de CómoLoHago, hoy les traemos un delicioso postre para que puedan disfrutar en familia o en algún evento especial, se trata de un kuchen de manzana.

Para saber cómo podemos realizar esta exquisita receta, como siempre todo luego del salto…

Cómo preparar un Kuchen de Manzana

Ingredientes:

Masa:

1 ½ taza de Harina con polvos de hornear.
½ taza de Azúcar.
½ taza de Mantequilla.
1 Huevo.
1 cucharadita de Canela.

Relleno:

2 Manzanas Verdes.
2 Huevos.
1 ½ taza de Leche.
1 cucharadita de Canela.
3 cucharadas soperas de Azúcar.
1 cucharada rasa de Maicena.

Procedimiento:

Lo primero que haremos será preparar nuestra masa del kuchen, para esto, en un bol pondremos nuestra harina, azúcar, 1 huevo, mantequilla y la cucharadita de canela y mezclamos con la ayuda de nuestras manos, hasta unir los ingredientes.

Ahora cubrimos un molde enmantequillado con nuestra masa como se muestra en la siguientes imágenes.

Con la ayuda de un tenedor pinchamos la masa y decoraremos el borde del molde como se ve en la foto.

Ahora guardamos nuestra masa en el refrigerador mientras preparamos el relleno.

Para preparar nuestro relleno, lo primero que haremos será pelar nuestras manzanas y sacar las semillas y centros. Procederemos a cortarlas en gajos o tajadas.

Luego herviremos nuestra leche en una olla junto el azúcar y la maicena.

Por mientras batiremos 2 claras a nieve y reservamos.

En cuanto suelte el hervor, se retira del fuego y se le agrega 2 yemas y las claras batidas a nieve.

Retiramos la masa de nuestro refrigerador y pondremos nuestros trozos de manzana como se muestra en la siguiente imagen.

Espolvoreamos un de canela sobre las manzanas y agregamos nuestra crema que tenemos en la olla.

Ahora meteremos nuestro kuchen en el horno (ya precalentado a 175º C), por más menos unos 25 a 30 minutos hasta que se dore.

Por último dejamos enfriar y disfrutamos de este excelente Kuchen.

Con esto damos por finalizado nuestra receta y como ya es costumbre les recordamos que este tutorial ha sido…

Cualquier duda o comentario que puedan tener, pueden realizarlos en el área habilitada a continuación.

Esperamos que este tutorial les haya sido de utilidad.

Será hasta una próxima oportunidad.

Staff CLH

Como hacer Panqueques

Dexter — Sat, 23 Oct 2010 04:53:58 +0000

El tutorial de hoy va enfocado a aquellos que les encanta mantener la linea dieciochera y mantener esos kilitos de más ganados después de tanta empanada, anticuchos y demases que disfrutamos los chilenos por estas fechas.

Aunque esta receta no es muy dieciochera, cocinar panqueques y obviamente comerlos, siempre será agradable.

Los invito a seguir leyendo después del salto.

La siguiente receta está pensada para unas 3 a 4 personas

Ingredientes:

1 y 1/2 taza de Harina sin polvos de hornear

3/4 de taza de Azúcar Flor

3 ó 4 Huevos

1 y 1/2 tazas de Leche a temperatura ambiente

1 y 1/2 tazas de Leche a temperatura ambiente

Un par de gotas de extracto de vainilla

Para el relleno, podemos usar manjar(dulce de leche), mermelada, Maple Syrup, etc.

¡Con esto ya podemos empezar a cocinar nuestros panqueques!

Una vez reunidos los ingredientes debemos tomar un bol o recipiente hondo en el cual podamos poner todos los ingredientes juntos, para iniciar la primera fase de cocinar nuestro panqueque.

Haciendo uso de una batidora, mezclamos los ingredientes para que quede una mezcla sin grumos.

En caso de que noten la mezcla muy espesa pueden incorporar más leche.

A continuación debemos tomar un sartén, de preferencia de Teflón,y ponerlo a fuego medio, a la hora de cocinar panqueques (cocinar en general, en verdad) es importante recalcar la temperatura a la que se debe poner el sartén.

Con la ayuda de un cucharón para sopa (aquellos hondos) vertemos la mezcla en el sarten de manera que se esparza homogéneamente por toda la superficie plana del sartén.

En caso de que no puedan cocinar en un sartén de teflón, debe pintarse con aceite para que la masa no se pegue.

Cuando veamos que las orillas de nuestro panqueque se tornen de color café, debemos, con la ayuda de un cuchillo de punta redonda o alguna espátula de punta redonda, comenzar a despegar la masa con mucho cuidado para poder darla vuelta.

Aquí existen tres formas de dar vuelta el panqueque:

La profesional, dando vuelta haciendo uso del mismo sartén. (No recomendable para casas con techos bajos, jajaja.)
La semi-profesional, dando vuelta mediante la ayuda de una espátula
La normal, haciendo uso de un plato, el cual lo ponemos sobre el sartén, damos vuelta el sartén teniendo el plato agarrado de manera que el panqueque quede en el plato y luego volvemos a deslizarlo al sartén.

Debemos ir revisando que nuestros panqueques tomen un color café pero que no se quemen. Cuando agarren ese color, podemos dejar de cocinar el panqueque.

A continuación debemos ponerles el relleno y simplemente enrollarlos. En particular, soy de la idea de no sobre pasarse con el relleno de manera que al enrollar, no se salga el relleno por los lados pero ustedes son libres de poner la cantidad de relleno que deseen.

Luego del esfuerzo de cocinar, ahora falta lo más importante……COMER!!!!

Disfruten!!!

Como siempre, este tutorial ha sido desarrollado, probado y documentado por el equipo de Comolohago.cl, por lo que cuenta con nuestro Sello de Garantía.

Para cualquier consulta no duden en escribirnos. Estaremos felices de responderles y ayudarles en todo lo posible.

Además, en Como Lo Hago siempre estamos al servicio de nuestros lectores, por lo que si hay algo que quieran hacer y no saben como, pueden solicitarlo en esta página que hemos habilitado.

Sin más que agregar, me despido y como siempre, Felices proyectos!!!!!

Como Lo Hago, si se puede, te lo enseñamos.

Staff comolohago.cl

Cómo extraer texto de una imagen

ToPHeR — Thu, 12 Aug 2010 16:50:58 +0000

Hola amigos de CómoLoHago, mas de alguna vez nos ha pasado que hemos escaneado algún documento o libro y deseamos editar su contenido, pero lamentablemente tenemos el texto del libro en formato imagen (Jpg,Gif, etc …) o simplemente con nuestra cámara de fotos le sacamos fotos a texto.

Es por eso que luego del salto les mostraremos 2 alternativas para convertir esas imágenes en texto y así poder editar la información.

Cómo extraer texto de una imagen

Utilizaremos el método conocido como OCR que sus siglas corresponden a Optical Charater Recognition, o en su traducción, reconocimiento óptico de caracteres.

Para lograr esto utilizaremos el software FreeOCR V3 el cual puedes descargar desde el siguiente enlace.

Si bien, el programa es gratis, este no es tan bueno ni exacto como los programas de pagados como el ABBYY FineReader (el cual trae una versión trial por 15 días o 20 impresiones).

Una vez descargado, procederemos a instalar la aplicación, lo cual no nos traerá ningún inconveniente.

Ahora ejecutaremos nuestra aplicación y tendremos una interfaz como la siguiente.

Luego de abrir el programa instalaremos el idioma ESPAÑOL, ya que por defecto viene en Ingles. Para esto descargaremos el siguiente archivo, luego descomprimiremos el archivo y pegaremos su contenido en la carpeta C:\WINDOWS\tessdata y reiniciamos nuestro programa.

Seguido a esto haremos click en OPEN y elegimos la imagen a la cual deseemos extraer el texto.

Ahora solo nos resta marcar la opción OCR y esperaremos a ver los resultados.

En lo personal el programa no es de mi total agrado, ya que este falla bastante al no detectar 100% un tipo de fuente predefinida, es por eso que a continuación les traemos otra opción, más simple y rápida.

Nuestra segunda opción es un servicio Web, al cual podemos ingresar por la dirección: http://www.free-ocr.com/ en donde nos encontraremos con la siguiente página.

En donde marcaremos examinar, donde elegiremos la imagen a transformar en texto, luego escogemos el idioma, rellenamos el sistema de seguridad (re-captcha) y haremos click en “Send File”.

Esperamos unos segundos y se desplegara una nueva pantalla con el texto extraído de la imagen que seleccionamos anteriormente.

Por último les traemos una tercera y cuarta opción, las cuales también son servicios Web. Se trata de http://www.ocrterminal.com/, un sitio en el cual debemos registrarnos y se nos permitirá “scannear” hasta 20 páginas gratis, para luego cobrarnos por volumen mensual “scanneado”. Por último el sitio http://www.newocr.com/ el cual es muy similar al Free-Ocr y es completamente gratis.

Con esto me despido, sin antes recordarles que este tutorial ha sido…

Cualquier duda o comentario que puedan tener, pueden realizarlos en el área habilitada a continuación.

Esperamos que este tutorial les haya sido de utilidad.

Será hasta una próxima oportunidad.

Staff CLH

Cómo hacer un gadget en Windows 7

Cri — Tue, 10 Aug 2010 02:22:32 +0000

Hola amigos de Cómo Lo Hago, tratando de sorprenderlos día a día nos empeñamos en poder crear nuevos tutoriales y ayudarlos en adquirir un mayor conocimiento como también desenvolverse dentro de un nuevo tipo de desarrollo. Esta vez será la ocasión de crear un Gadget el cual nos puede servir para una infinidad de cosas dependiendo del uso que le queramos dar, en este caso veremos como hacer uno con alimentacion RSS de los tutoriales que se hacen en CómoLoHago. Partiendo por una cosa, es muy importante recalcar que no hay que ser programador para poder realizar este tuto, pero sí tener harta paciencia para darle al clavo. Los invito a seguir en este entretenido tuto como siempre despues del salto…

Cómo hacer un gadget en Windows 7

1. ¿Qué necesitamos?

Sistema operativo Windows 7
Aprender un poco de HTML + CSS. Para esto puede recurrir a los siguientes tutoriales

2. ¿Cómo lo hago?

1. Manos a la obra, primero a buscar donde tenemos nuestros Gadgets los cuales se encontrarán siempre por default en Archivos de programa>Windows Sidebar>Gadgets. Una vez ubicados en esta carpeta procederemos a crear la carpta contenedora de nuestro futuro Gadget por desarrollar. Es muy importante que la extensión del nombre sea así:

NOMBREDEMIGADGET.Gadget

2. Una vez creada nuestra carpeta contenedora necesitaremos algunos archivos indispensables para poder personalisar y a la vez desarrollar:

MiGadget.html: Contiene el código principal para los ajustes de color, fondo, letras, links, feeders, etc.

ComoLoHago mi primer gadget

ComoLoHago v1.0

Settings.html: Contiene el código para los ajustes de nuestro Gadget.

Aqui agregan su contenido

MiGadget.js: Contiene el código especial para poder tener ajustes en nuestro Gadget.

// Importantisimo para poder tener los ajustes de nuestro Gadget

System.Gadget.settingsUI = “Settings.html”;

System.Gadget.onSettingsClosing = SettingsClosing;

Gadget.xml: Contiene el autor, nombre, descripción, ícono, logo. En sí es lo necesario para aparecer en el menú para seleccionar el Gadget.

CómoLoHago – Novedades

1.0

© CómoLoHago 2010

Novedades acerca de tutoriales nuevos en tu escritorio

true

Full

2. La flecha blanca indica el ícono que aparecerá en el menú de Gadgets. Este ícono (icono.png) se direcciona desde nuestro archivo XML, en este caso Gadget.xml. También podemos agregar otra imagen para cuando arrastremos nuestro Gadget al escritorio (imagenarrastrada.png).

3. Finalmente nos podemos dar cuenta que nuestro Gadget va adquiriendo la forma que le damos con CSS y HTML ademas de las programaciones que cada uno le dé en javascript.

Para poder mostrar el contenido RSS, tuve que recurrir a la página http://rssxpress.ukoln.ac.uk/lite/include/?t=1 para obtener el script feeder el cual va inserto en MiGadget.html:

Espero les haya gustado, les motive para hacer sus propias creaciones y así poder compartirlas con los demas. Me despido

Como siempre exclusivamente ha sido:

Staff CLH

Cómo utilizar la API de Google Maps

Xabadu — Sun, 08 Aug 2010 19:08:10 +0000

Google Maps, el dominador absoluto a la hora de buscar locaciones alrededor del mundo, tiene disponible hace bastante tiempo una API que podemos integrar en nuestras aplicaciones y sitios Web de manera bastante sencilla. Con esto, podemos entregar funcionalidades bastante interesantes a nuestros usuarios e interactuar de una nueva forma para hacer que su experiencia en nuestros sitios sea aún mejor.

Hoy, en un rápido y sencillo tutorial, veremos como hacer uso de esta API en un sitio Web cualquiera y desplegar mediante un mapa una ubicación indicada mediante georeferencia.

Para el detalle, como siempre, vamos después del salto.

Cómo utilizar la API de Google Maps

Detalles del tutorial

Tiempo aproximado de implementación: 10 min.

Dificultad: Intermedio.

Conocimientos previos: HTML, Javascript.

Implementos necesarios:

Una clave de la API de Google Maps (pueden obtenerla aquí).

Una página Web para desplegar el mapa (puede ser de forma local o en un hosting).

Implementación Básica:

1.- Lo primero que debemos hacer, para poder utilizar la API, es obtener una clave de uso en el sitio de Google Maps. Para eso, nos dirigimos al sitio de inscripción y completamos los datos requeridos:

En la parte inferior, debemos tickear la opción “I have read and agree with the terms and conditions“, y luego en el campo de texto que está a continuación ingresar la URL del sitio donde utilizaremos la API.

Sobre esto último es bueno tener en cuenta un par de cosas:

Una clave de API es única para un dominio y funcionará solo en este. Por ello, si tenemos un servidor de desarrollo (por ejemplo localhost) y uno de producción (por ejemplo www.ejemplo.com), deberemos obtener 2 claves y utilizar una en cada caso, de lo contrario no funcionará.
Al ingresar la URL de nuestro sitio, lo mejor es ingresar la raíz del dominio (http://dominio.com). De esta forma, la clave funcionará con todos los subdominios y directorios del sitio.

2.- Si hemos cumplido los requerimientos, al hacer click en el botón Generate API Key, nos devolverá la clave para utilizar la API en nuestro dominio:

Con esto, ya estamos listos para utilizar la API en nuestro sitio.

3.- Para ello, generaremos en primer lugar, un archivo HTML, el cual llamaremos ejemplo.html. Aquí, incluiremos mediante etiquetas

Los parámetros incluidos en la URL son:

file: Mediante esto, indicamos que estamos haciendo un llamado a la API.

v: Indica la versión de la API que estamos utilizando (la más reciente es la 3).

sensor: Indica si la aplicación está utilizando o no un dispositivo para detectar la posición del usuario (como un GPS). Como es una página, lo dejamos en falso.

key: Indica la clave de uso de la API, que obtuvimos en el paso 1.

4.- Ahora, también dentro del encabezado, crearemos una función en Javascript, la cual inicializará el mapa y lo desplegará, una vez que hagamos el llamado:

Analizando la función escrita anteriormente, nos encontramos con varias cosas a las que debemos ponerle atención:

Lo primero que hacemos, es preguntar si el navegador es compatible con la API. Esto lo obtenemos mediante la función GBrowserIsCompatible. Solo si la respuesta es positiva, se procederá con el resto de los procesos.

Luego, se crea una variable llamada map, en la cual se crea el nuevo objeto que será manipulado con los métodos de la API. Este objeto, hará referencia a un elemento del documento HTML con la id de map. Ahí es donde se mostrará el mapa.

Y finalmente, definimos el punto en donde aparecerá el mapa por primera vez. Esto es mediante el método setCenter, al cual le pasamos un set de coordenadas mediante el objeto GLatLng, entregando una latitud y longitud.

El último parámetro (en este caso el 15), indica el nivel de zoom inicial que tendrá el mapa. Pueden ajustarlo a gusto.

5.- Una vez que tenemos nuestra función definida, solo nos falta hacer la llamada desde el cuerpo del documento HTML. Para ello, deberemos crear un div con una id de map (Si recuerdan, el objeto está enlazado a esa id) para poder desplegarlo. Dentro de ese div, haremos la llamada a la función.

Le hemos dado un ancho y alto de 600px al div para que pueda mostrar el mapa de manera óptima. Para efectos del ejemplo hemos ajustado estilos CSS dentro de la etiqueta, pero es ideal trabajar con archivos externos.

Si abrimos el archivo en nuestro navegador, nos debería desplegar el mapa, con la ubicación centrada en Palo Alto, CA. Hasta aquí vamos muy bien, pero sería genial poder personalizarlo un poco más, ¿no?.

Personalizando el mapa

6.- Lo primero que haremos, será cambiar la ubicación por defecto del mapa. Para esto, reemplazaremos el set de coordenadas que habíamos incluido en el método setCenter. Nos vamos a Google Maps y buscamos una dirección cualquiera:

En la parte superior, la opción Enlace nos entrega una URL completa de la ubicación, la cual incluye las coordenadas correspondientes a la latitud y longitud del lugar. Las copiamos y reemplazamos en el método setCenter para obtener un nuevo mapa al actualizar la página.

7.- Google Maps nos permite añadir diferentes tipos de controles al mapa, que le permitirán al usuario final interactuar sin problemas con él. Entre los controles que podemos agregar, están:

GMapTypeControl: Permite controlar el tipo de mapa a mostrar (entre mapa, satelite e híbrido).

GLargeMapControl: Añade controles de movimiento para el mapa.

GScaleControl: Añade controles de zoom para el mapa.

GOverviewMapControl: Añade una pequeña sobrevista en la esquina inferior derecha.

Para incluirlos, solo añadimos las siguientes líneas a nuestra función inicializar:

map.addControl(new GMapTypeControl()); map.addControl(new GLargeMapControl()); map.addControl(new GScaleControl()); map.addControl(new GOverviewMapControl());

Y si ahora actualizamos el mapa, veremos que se añadieron nuevos controles.

8.- ¿Qué nos falta?. Claramente, añadir una marca en la ubicación que estamos indicando en el mapa, de lo contrario solo veremos un gran cuadro sin nada que destacar.

Para esto, haremos uso de 3 métodos: GLatLng para establecer la ubicación de la marca, GMarker para crear la marca en ese lugar y addOverlay para añadirla sobre el mapa. Por ello, debemos añadir el siguiente código a la función inicializar:

map.addOverlay(new GMarker(new GLatLng(-33.43795,-70.603627)));

Y si actualizamos el mapa, veremos un marcador de color rojo sobre la ubicación.

9.- Y ahora como detalle final, crearemos un pequeño texto de información sobre la marca, para cuando un usuario haga click en ella. Para esto, modificaremos un poco el código creado en el punto anterior. Ahora haremos una función que creará la marca y relacionará la información mediante un eventListener, el cual reaccionará cuando se haga click. En resumen, añadimos el siguiente código a nuestra función inicializar:

function informacion(ubicacion, descripcion) { var marca = new GMarker(ubicacion); GEvent.addListener(marca, "click", function() { marca.openInfoWindowHtml(descripcion); } ); return marca; } var ubicacion = new GLatLng(-33.43795,-70.603627); var descripcion = 'Texto ejemplo
Para tutorial de CLH
'; var marca = informacion(ubicacion, descripcion); map.addOverlay(marca);

Lo que hacemos aquí es crear 3 variables: ubicacion, que genera un punto mediante latitud y longitud (el mismo que habíamos generado antes), descripcion que contiene el texto explicativo y marca que llama a la función informacion, la cual genera la marca, y añade el evento en caso de click sobre ella, retornando el resultado final.

Nuestro código completo queda de la siguiente forma:

Ejemplo de uso - API Google Maps - CLH

Si actualizamos nuestro mapa, y hacemos click en la marca, veremos el texto descriptivo:

Y con eso finalizamos la personalización de nuestro mapa, obtenido a través de la API de Google Maps.

Como se puede apreciar, la implementación es bastante rápida y presenta varias otras opciones que pueden ser analizadas a fondo en la documentación que nos entrega Google al respecto, la cual recomendamos explorar en caso de querer obtener resultados más avanzados.

Por ahora, les recordamos que este tutorial ha sido:

Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas a continuación.

Esperamos que este tutorial haya sido de utilidad para Uds.

Muchas gracias por leer y será hasta una próxima oportunidad.

Staff CLH

Cómo preparar Popcorn

ToPHeR — Thu, 05 Aug 2010 22:11:30 +0000

Hola amigos de CómoLoHago, hoy retomando los tutoriales de cocina, les traemos un muy simple tutorial, se trata de cómo preparar popcorn o como en chile les llamamos cabritas o simplemente palomitas de maíz como en algunos lugares de Sudamérica se les llama.

Para saber cómo podemos lograr este simple tutorial, como siempre todo luego del salto…

-

Cómo preparar Popcorn

-

Ingredientes:

Maíz

Aceite

1 Olla

Sal

Mantequilla (opcional)

Procedimiento:

Para comenzar tomaremos, nuestra olla y en ella verteremos aceite hasta tener aproximadamente 2 milímetros de aceite.

Luego prenderemos el fuego y esperamos unos minutos para que el aceite se caliente.

Ahora verteremos el maíz en la olla con el aceite caliente. La cantidad de maíz es muy variable pero aproximadamente son 25 gramos o media taza, el ideal es llenar 9/10 de la base de la olla con el maíz.

Ahora tapamos nuestra olla y esperamos que nuestras cabritas o popcorn empiecen a explotar.

Al momento que empiecen a explotar o reventar, podemos de manera opcional agregar una cucharada sopera de mantequilla para cambiar el sabor de nuestras clásicas cabritas o popcorn.

Mientras estas siguen explotando y una vez agregada la mantequilla, con la ayuda de un paño de cocina tomaremos las asas y sacaremos del fuego la olla y batiremos con fuerza. Este proceso lo haremos por lo menos 2 veces mientras cocinamos.

En cuanto pasen más de 3 segundos entre una y otra explosión del maíz, apagamos el fuego y agregamos, normalmente el proceso total del maíz no dura más de 3 minutos, tengan precaución con estos tiempos para evitar que se queme nuestro maíz.

Solamente nos resta, agregar la sal y listo tenemos nuestras cabritas, popcorn o palomitas de maíz listas para comer.

Con esto damos por finalizado nuestra receta y como ya es costumbre les recordamos que este tutorial ha sido…

Cualquier duda o comentario que puedan tener, pueden realizarlos en el área habilitada a continuación.

Esperamos que este tutorial les haya sido de utilidad.

Será hasta una próxima oportunidad.

Staff CLH

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

Cómo descargar archivos swf desde tu navegador

Dexter — Mon, 02 Aug 2010 15:39:54 +0000

Cuando uno navega en un sitio web, el copiar un texto o descargar una imagen es relativamente fácil. El otro día navegando encontré una animación que me gustó y me dieron ganas de descargar pero el problema es que no era un archivo GIF (el cual se descarga al igual que una imagen), sino que era un archivo swf.

Investigando la forma más fácil de descargar este archivo, encontré que es mucho más fácil de lo que pensaba. No se necesitan de herramientas adicionales ni Plug-ins. A continuación les mostraré que no es para nada un proceso engorroso ni nada.

Detalles del tutorial

Tiempo aproximado de implementación: 2 min.

Dificultad: Fácil.

Implementos necesarios:

Mozilla Firefox

Antes de explicarles como descargar archivos swf, hay que recordar un principio muy importante de internet. Todo lo que uno ve y observa en un navegador de internet, es visible una vez que todos los objetos son descargados a nuestro computador. Texto, imágenes, videos, etc. que ves en un sitio, se descargan en carpetas especiales en tu computador para que las puedas visualizar en tu navegador. Lo mismo se aplica para los archivos swf.

Internet funciona en el principio Cliente-Servidor. El código que crea el contenido y plantilla de la página web está en el servidor. Cuando tu ingresas la dirección en tu navegador y das Enter o das click en el botón Reload, tu navegador genera una petición que viaja por internet directamente al servidor web.

El servidor web escucha tal petición y responde con un código. Una parte de este código puese ser código estático y otro puede ser código “server-side” (esto quiere decir que el código es ejecutado en el mismo servidor y el resultado es enviado a tu navegador web). Cuando el servidor está listo, envía el código devuelta a tu navegador. En resumen tu navegador:

Recibe el código desde el servidor

Lo guarda en tu computador de manera local

Lo proyecta en tu pantalla

Es obvio a estas alturas que la mayoría de las cosas ya se han descargado en la carpeta de Temporales de Internet cuando las puedes visualizar. El concepto para cuando deseas descargar un archivo swf es el mismo.

Bueno después de esta pequeña introducción, veamos como descargar el archivo.

Si tuviésemos mucho tiempo podríamos ir a la carpeta de Temporales y buscar el archivo. El problema de esto es que no conocemos su nombre y tampoco en cual de todas las carpetas de los archivos temporales podría estar el archivo deseado.

Para este ejemplo utilizaremos el navegador Mozilla Firefox. Esto porque este navegador provee la funcionalidad de poder descargar archivos swf.

Para descargar el archivo swf debemos hacer lo siguiente:

Conectarse a internet y abrir el navegador Mozilla Firefox.

Navegar a un sitio que contiene un archivo swf que deseamos descargar.

Dar click derecho en cualquier parte de la página web

Seleccionar desde el menú la opción “View Page Info”

Damos click en la lengüeta “Media”

Se desplegarán un sinnúmero de ítems en el menú. El archivo swf que deseas descargar en la columna “Address”. El archivo debe ser del tipo “Object” o “Embebed”. Puede ser que aparezca más de un archivo de ese tipo por lo que deberás adivinar cual es.

Das Click en “Save As..”

Paso 4

Paso 5

Paso 6

Voila!! Tu archivo swf ha sido descargado.

Como pueden ver de esta manera también ir viendo los tipos de archivos que posee el sitio web y descargarlos desde este menú.

Bueno con esto me despido, espero que les haya gustado.

Y como siempre, este tutorial ha sido

Felices proyectos!!!!!

Para cualquier consulta no duden en escribirnos.

Estaremos felices de responderles y ayudarles en todo lo posible.

Cómo Lo Hago, si se puede, te lo enseñamos.

Staff CLH

Cómo elegir un buen hosting para tu Web

Xabadu — Mon, 02 Aug 2010 00:37:41 +0000

Una de las recomendaciones que nos solicitan más a menudo en nuestros tutoriales de Web es lo relativo a la selección de un buen alojamiento. Si bien la oferta es variada, el saber que criterios utilizar al momento de la elección es importante para distinguir entre lo que parece bueno y lo que realmente lo es.

Hoy, en CLH, veremos algunos tips que nos ayudarán a evaluar de mejor manera la próxima vez que necesitemos contratar uno de estos servicios.

El detalle, como siempre, después del salto.

Cómo elegir un buen hosting para tu Web

Antes de comenzar con los tips técnicos propiamente tal, es bueno analizar un par de cosas:

¿Qué queremos hacer?

Suena obvio, pero muchas veces omitimos esta pregunta. Antes de adquirir un nuevo hosting e incluso la búsqueda del mismo, es bueno preguntarse y planificar el uso que le daremos.

¿Por qué?. Simple. El uso que finalmente le demos al hosting que contrataremos definirá los requerimientos del mismo, y por ende tanto los criterios con los que evaluaremos como el precio que estaremos dispuestos a pagar y que finalmente desembolsaremos.

No es lo mismo diseñar un sitio Web estático simple para 10 personas al año que un sitio dinámico con uso de bases de datos o un sistema de información en plataforma Web para el cual estimemos una demanda de cientos de miles personas por mes y por ende la necesidad de hosting variará dependiendo de cada uno de estos escenarios. Si bien con un hosting tremendamente potente podemos eventualmente cubrir todos estos escenarios, no siempre será necesario y estaremos perdiendo dinero. Por otro lado, si somos desarrolladores Web y nuestro interés es probar nuevas tecnologías, un hosting que cubra una gran demanda no nos servirá y si uno que soporte diferentes lenguajes.

Por eso, primer paso: definir el objetivo y el uso que le daremos al hosting. Esto será la base de una buena elección.

Somos clientes comprando un producto

Tal como cuando vamos al supermercado, o estamos cotizando un nuevo televisor o un computador en una tienda, al momento de evaluar un hosting estamos realizando una serie de cotizaciones para finalmente decidirnos por el que más nos convenga.. Por ello, tenemos todo el derecho como futuros clientes a solicitar la información que estimemos necesaria para ayudar a nuestra decisión.

Por lo general los proveedores presentan un buen detalle de información en sus sitios Web, pero hay algunos detalles que quizás puedan no quedarnos claros o en los que necesitemos saber un poco más, ya sea de aspectos técnicos o de la empresa propiamente tal. Para estos casos, no debemos dudar en contactarlos y preguntar al respecto. Adicionalmente, esto nos permitirá evaluar de manera preliminar como es su servicio al cliente, un punto para añadir a la decisión que tomaremos posteriormente.

Aspectos a evaluar en un hosting

1.- Uptime o disponibilidad

El uptime o disponibilidad de un hosting se refiere a la capacidad del mismo de operar de forma continuada sin caídas, tanto de sus sistemas como de sus conexiones a Internet.

Todos los servicios de hosting ofrecen un porcentaje de uptime (normalmente cercano al 99%), pero como usuarios dificilmente nos preocupamos de comprobarlo. Por ende, es bueno al momento de cotizar, contactar al proveedor y preguntarle que estadísticas tiene al respecto o bajo que cálculos llegó a ese porcentaje de disponibilidad para obtener una respuesta que sea verdaderamente satisfactoria.

La disponibilidad del hosting que elijamos es esencial para nuestros proyectos, ya que es clave que cuando un usuario quiera acceder a nuestros sitios pueda hacerlo, por la razón que sea. Y por ello, debemos asegurarnos de elegir un proveedor que nos asegure una estabilidad acorde.

2.- Transferencia mensual

La transferencia mensual que nos ofrece un proveedor de hosting se refiere a la cantidad de tráfico que podremos generar desde y hacia el sitio, tanto para descargas como para subidas.

Por ejemplo, si nuestro sitio está compuesto de 100 páginas de 1 kb cada una, y cada usuario que entra ve el sitio completo, hará una descarga de este y por ende se descontarán 100kb de la cantidad de transferencia mensual ofrecida por el proveedor.

Por esto es bueno asegurarnos de que la cantidad de transferencia mensual ofrecida sea suficiente para lo que requerimos, ya que si superamos la cantidad ofrecida ocurrirá una de dos cosas: o se nos cortará el servicio (normalmente bajando el sitio), o bien se nos cobrará la diferencia, lo cual dependiendo de las tarifas, puede llegar a ser alto.

Algo que es bueno recalcar. Varios proveedores ofrecen una “transferencia ilimitada” en la mayoría de los servicios, cuando realmente esto no es así. A lo que normalmente se refieren con transferencia ilimitada es siempre y cuando el sitio no supere las capacidad del servidor propiamente tal, por lo que realmente termina siendo una capacidad definida. Esto normalmente está indicado en los términos y condiciones del servicio, por lo que es bueno informarse ahí o bien preguntarlo directamente antes de contratar.

3.- Almacenamiento

Este es probablemente el aspecto en que todos más nos fijamos, pero nunca está demás destacarlo. El almacenamiento que ofrece un hosting se refiere específicamente al espacio en disco que nos entregan para almacenar archivos.

Como tal, debemos asegurarnos de que este espacio sea suficiente para nuestras necesidades, a pesar de que hoy es posible almacenar algunos tipos de archivos en otros servicios. Por ejemplo, si en nuestro sitio queremos mostrar imágenes y videos, podemos utilizar servicios como Flickr y YouTube y así no usar espacio en disco.

Al igual que la transferencia, muchos proveedores ofrecen un “espacio ilimitado” que normalmente no es así, así que ojo con ese tema.

4.- Correos

Varios proveedores de hosting ofrecen cuentas de correo asociadas al dominio que poseemos. Si bien no es un aspecto esencial, si es un buen adicional para fijarnos ya que sin duda le entregan valor agregado al servicio.

El número de cuentas de correo disponibles, acceso a Webmail, herramientas para combatir spam y facilidad de configuración en otros clientes (ej. Outlook), son aspectos en que fijarse.

De todas formas, es importante pero no esencial, en caso de no ser ofrecido, siempre podemos utilizar otros servicios como Google Apps.

5.- Bases de datos

Hoy en día, practicamente todo lo que vayamos a utilizar en nuestros sitios eventualmente requerirá el uso de bases de datos. Ya sea implementando un administrador de contenidos como Wordpress o Joomla o bien para probar desarrollos propios, el uso y acceso de bases de datos es elemental para poder llevar todo a cabo.

Afortunadamente, la gran mayoría, por no decir todos, los hostings actualmente ofrecen uso y acceso a bases de datos (por lo general MySQL). Por esto, la comparación no entra en si ofrecen o no el servicio, sino que las características del mismo: número de bases de datos, tipos de sistemas de bases de datos (a pesar de que MySQL sea lo más utilizado, puede que para algún proyecto en particular necesitemos de otra, como PostgreSQL), conexiones remotas, aplicaciones para manejar los datos, etc.

Ojo con este tema, ya que una mala elección puede darnos más de un dolor de cabeza.

6.- Dominios

Cuando decidimos contratar un servicio de hosting, siempre se nos solicitará un nombre de dominio para asociarlo (puede ser uno que ya poseamos o muchos proveedores nos entregan la posibilidad de registrar uno al momento de adquirir el hosting), que será el principal asociado.

No obstante, algunos proveedores nos ofrecen un tipo de servicio hacia el que podemos asociar múltiples dominios y tenerlos alojados en la misma locación. Esto es tremendamente util si pensamos lanzar nuevos sitios en el corto y mediano plazo, ya que además de ser conveniente en términos monetarios, la administración de todos ellos se hace mucho más sencilla al tenerlos alojados en el mismo lugar.

Lo mismo va en el caso de los sub-dominios. En caso de que el proveedor ofrezca la funcionalidad de habilitar varios de ellos, se vuelve interesante al momento de querer lanzar sub-secciones o derivados de un proyecto en particular.

7.- FTP

El acceso FTP al hosting es de suma importancia para poder subir y descargar archivos desde y hacia el servidor y por ende es bueno asegurarse que el proveedor ofrezca el acceso (no todos lo hacen), así como las características de este referente al número de cuentas que entregan.

8.- Actualizaciones

A pesar de que los servicios de hosting ofrecen disponibilidades de las más importantes tecnologías del mercado, no siempre cuentan con las últimas versiones de estas, lo cual puede terminar por afectar el desarrollo que estemos haciendo o las aplicaciones que estemos instalando.

Por eso, antes de contratar, es bueno averiguar si se está trabajando con la última versión de la tecnología que necesitemos, y si no es así, que factibilidad exista de realizar la actualización.

9.- Soporte

A medida que vayamos trabajando en el hosting que contratemos, inevitablemente nos irán ocurriendo una serie de problemas que en algunas ocasiones podremos resolver, pero en otras no. Para aquellos momentos, o para cuando necesitemos acceder a información que no está disponible a primera vista, deberá ser necesario contactar al equipo de soporte y solicitar ayuda.

Todos los proveedores de hosting ofrecen distintos servicios de soporte: mesas de ayuda mediante tickets, chat en vivo, formularios vía correo electrónico, MSN. A pesar de los distintos métodos que ofrezcan, lo más importante a evaluar es el tiempo de respuesta que ellos tengan, así como la efectividad de estas respuestas.

Un buen soporte de hosting marcará grandes diferencias en la experiencia que tengamos utilizando el servicio, por lo que debe ser un punto esencial a poner en la balanza al momento de evaluar.

10.- Sistema Operativo

Dependiendo del tipo de desarrollo que hagamos, el sistema operativo del servidor puede o no influir. Si estamos desarrollando en plataformas .NET, es necesario buscar hosting en Windows, los cuales son más escasos y por lo general un poco más costosos que los basados en Linux.

Todo esto dependerá de las tecnologías que necesitemos.

11.- Adicionales

Además de todos los aspectos antes mencionados, hay una serie de adicionales que es bueno considerar al momento de contratar. Si bien no los añadimos más arriba, principalmente porque para el uso mayoritario de hosting no son obligatorios de considerar, si es bueno tenerlos en cuenta en caso de que los queramos para usos en especial.

Con esto nos referimos a:

Acceso SSH: Algunos planes de hosting ofrecen acceso al servidor vía SSH. Esto nos permite ingresar al servidor mediante una terminal y ejecutar comandos tal como si estuviésemos trabajando de forma local en el servidor. Podemos manipular archivos, ejecutarlos, copiarlos y editarlos de forma rápida y sencilla. Esto es tremendamente útil para realizar respaldos tanto de los archivos del sitio como de las bases de datos que este utilice.

Aplicaciones extras: Muchos proveedores ofrecen dentro de sus paneles de control, una serie de packs de aplicaciones de fácil instalación que pueden ser muy útiles para ahorrarnos tiempo. Foros, administradores de contenidos, gestores de noticias y otros, nunca está demás tomar ventaja de esto.

Respaldos automatizados: En algunos servicios de hosting se ofrecen funcionalidades de respaldos automatizados de información. A pesar de que podemos hacerlo de forma manual (y muchas veces es preferible), es bueno tener la opción de respaldar archivos y contenido de bases de datos de forma rápida y automática en caso de que no sepamos como llevar a cabo esta tarea.

Regalos: Lo bueno de que exista tanta competencia entre proveedores de hosting, es que para captar nuevos clientes ofrecen todo tipo de regalos. Ojo que si bien esto no puede ser una razón decidora al momento de elegir (no porque nos den cosas seleccionaremos un servicio de dudosa calidad), es un buen adicional a tener en cuenta. Desde dominios gratis hasta cupones para utilizar en Google AdWords, son todos buenos incentivos.

Conclusiones

La elección de un hosting es seria y debe hacerse de manera informada. Para eso, es bueno evaluar cada criterio que sea importante para el uso que finalmente le daremos y los requerimientos que tengamos.

Lo anterior es una pequeña lista de cosas a tener en consideración. Si bien hay una serie de puntos más que podrían evaluarse, estos son los considerados más importantes que nos llevarán a tomar una buena decisión.

Antes de terminar les recordamos que, como siempre, este tutorial ha sido:

Cualquier duda o comentario que tengan, los invitamos a dejarnos unas líneas a continuación.

Esperamos que este tutorial haya sido de utilidad para Uds.

Muchas gracias por leer y será hasta una próxima oportunidad.

Staff CLH

Cómo acelerar el arranque y apagado en Windows 7

Cri — Thu, 29 Jul 2010 22:26:33 +0000

Hola amigos de Cómo Lo Hago, hace ya varios días que me vengo apestando un poco de lo lento que se ha puesto mi Windows 7 al momento de apagarlo, muchas veces sucede esto por tener demasiados programas pesados corriendo en el equipo, como tambien algun bichito que se pueda haber colado por ahi. Al final, decido inspeccionar y dí con un clavo para matar varios pajaros de un tiro: Matar procesos al apagar en un tiempo de espera menor al configurado por el SO.

Para seguir leyendo, como siempre despues del salto…

Cómo acelerar el arranque y apagado en Windows 7

1. ¿Qué necesitamos?

Sistema operativo Windows 7

2. ¿Cómo lo hago?

1. Como es de costumbre, nuestros pasos seran pocos pero bien completos. Partiendo por mejorar el apagado del equipo debemos dirigirnos a Inicio>Ejecutar>Regedit (ver foto)

2. Una vez que hayamos ingresado al menu del editor de registro nos dirigiremos a HKEY_LOCAL_MACHINE>SYSTEM>Control, aqui buscaremos en la pantalla del lado derecho la opcion WaitToKillService. Por defecto estará en 12000 pero debemos dejarlo en 10000, 8000 (yo lo dejé en 5000). Y con esto realizado tendremos un apagado de nuestro equipo mucho más rapido de lo habitual.

3. Para acelerar el arranque de nuestro equipo l0 que haremos será sacar la animacion de “Iniciando Windows” en donde aparecen cuatro puntos de colores que forman el logo de Microsoft. Para realizar esto debemos dirigirnos nuevamente a Inicio>Ejecutar>msconfig (ver foto)

4. Una vez dentro del menu de configuración del sistema nos dirigiremos a la pestaña arranque (boot) y le pondremos un ticket a la opcion No GUI boot. Con esto tendremos desactivada la animacion y nuestro arranque debería mejorar.

Espero les haya gustado y haya servido para su utilidad. Los invitamos a dejar su comentario en caso de cualquier duda y con esto, me despido.

Como siempre exclusivamente ha sido:

Staff CLH