Como Lo Hago » Diseño Web

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 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 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 crear un contador de caracteres para tus formularios

Xabadu — Sun, 04 Jul 2010 05:37:56 +0000

Entre las tantas peticiones que nos han llegado ultimamente, una de las más recurrentes es sobre como crear un contador de caracteres para áreas de texto, similar a la funcionalidad que despliega Twitter en su sitio Web cada vez que enviamos una actualización (o tweet para nuestros amigos más 2.0). Pues bien, luego de analizarlo y darle un par de vueltas, pudimos notar que es una utilidad bastante sencilla de lograr mediante HTML y nuestro siempre querido jQuery.

Así que sin más, hoy mediante un sencillo y rápido tutorial, veremos el paso a paso para poder implementarlo en nuestros formularios.

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

Cómo crear un contador de caracteres para tus formularios

Detalles del tutorial

Tiempo aproximado de implementación: 15 min.

Dificultad: Básico.

Implementos necesarios:

jQuery.

Un editor Web (recomendamos Aptana Studio o Notepad++).

¿Qué haremos?

Para llevar a cabo este contador de caracteres, partiremos por definir un pequeño formulario que contendrá un área de texto y un botón de envío para el mensaje.

Ahora, si pensamos en el proceso propiamente tal, la lógica nos dice que debemos estar atentos a cada caracter que escriba el usuario, y en base a eso, ir generando el contador para advertirle cuanto más puede escribir. Esto último es posible hacerlo de manera muy sencilla mediante un método de jQuery llamado keydown, el cual detecta cada vez que se presiona una tecla dentro de un elemento en particular (en este caso, el textarea).

Con eso claro, vamos, manos a la obra:

HTML

Partiremos por definir un formulario sencillo, con un área de texto y un botón de envío. Esto lo envolveremos en un div, el cual contendrá este formulario y adicionalmente otro pequeño div, que es donde incluiremos el mensaje indicando los caracteres que restan.

Ejemplo contador de caracteres - CLH

Escribe tu mensaje

Mensaje:

jQuery

Ahora que tenemos nuestro formulario armado, crearemos el código en jQuery que será responsable de detectar la inclusión de cada nuevo caracter y procederá a descontar de una cantidad que definimos a modo de ejemplo (en este caso 150):

$(function(){ /* Definimos variables que utilizaremos valor: En ella almacenaremos cuantos caracteres hay en el área de texto. contador: Almacenará el número de caracteres restantes, descontando el valor actual desde el máximo (150). parrafo: Almacenará en que tipo de clase (estilo) se mostrará el mensaje (verde si no se ha pasado el límite, rojo si se sobrepasado). */ var valor, contador, parrafo; // Mostramos un mensaje inicial y lo añadimos al div de id contador. $('
Tienes 150 caracteres restantes
').appendTo('#contador'); // Definimos el evento para que detecte cada vez que se presione una tecla. $('#mensaje').keydown(function(){ // Redefinimos el valor de contador al máximo permitido (150). contador = 150; /* Quitamos el párrafo con clase advertencia o indicador, en caso de que ya se haya mostrado un mensaje */ $('.advertencia').remove(); $('.indicador').remove(); // Tomamos el valor actual del contenido del área de texto valor = $('#mensaje').val().length; // Descontamos ese valor al máximo. contador = contador - valor; /* Dependiendo de cuantos caracteres quedan, mostraremos el mensaje de una u otra forma (lo definiremos a continuación mediante CSS */ if(contador < 0) { parrafo = '
'; } else { parrafo = '
'; } // Mostramos el mensaje con el número de caracteres restantes. $('#contador').append(parrafo + 'Tienes ' + contador + ' caracteres restantes
'); }); });

CSS

Y finalmente estilizamos un poco nuestro formulario y mensajes (esto último es opcional):

body { font-family: Arial, Helvetica, sans-serif; font-size: 11px; } h1 { font-size: 20px; } label { display: block; } #mensaje { padding: 5px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #publicar { border: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; background: #999999; padding: 10px; font-weight: bold; color: white; } #publicar:hover { background: #666666; cursor: pointer; } .advertencia { color: red; } .indicador { color: green; }

Con esto obtendríamos nuestro contador de caracteres, el cual según se puede apreciar, es posible construirlo de manera sencilla, con solo algunas líneas de codificación y entregando una funcionalidad más que interesante para nuestros usuarios.

Antes de cerrar:

Y como siempre, les recordamos que este tutorial ha sido:

Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada 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 crear un formulario de contacto – Versión 2.0

Xabadu — Sun, 30 May 2010 02:16:33 +0000

Hace algún largo tiempo ya, les trajimos un tutorial sobre como armar un formulario de contacto para nuestros sitios Web, en el cual vimos todo el proceso de creación, desde el armado hasta el envío de los datos vía correo electrónico.

Pero como el tiempo pasa, y nos vamos poniendo viejos, y sabemos que las soluciones no son eternas ni apropiadas para estos tiempos, hoy hemos decidido sacar a relucir nuestros talentos musicales y poéticos desarrollísticos (¿desarrolladores?) y traerles una nueva versión de este formulario, ahora con sabor a limón y algunas características que lo convierten en una versión mucho más óptima que la anterior.

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

Cómo crear un formulario de contacto – Versión 2.0

Como siempre, lo primero:

Detalles del tutorial

Tiempo aproximado de implementación: 30 minutos.

Dificultad: Básico (para implementar tal cual) – Intermedio (para personalizar).

Conocimientos previos requeridos: Entendimiento de HTML, CSS, jQuery y PHP.

Implementos necesarios:

Un editor Web (Recomendamos Aptana Studio o Notepad++, ambos gratuitos).

Ahora, la pregunta de rigor. ¿Qué trae de nuevo este formulario 2.0?:

Validaciones de ingreso de datos en tiempo real mediante jQuery.

Validación del correo electrónico en tiempo real mediante expresiones regulares.

Envío de información de forma asincrónica (sin recargar la página) mediante el método .ajax de jQuery.

Mejoras de estilo y codificación.

Así que con eso claro, vamos, manos a la obra:

Procedimiento:

Separaremos este desarrollo en las siguientes partes:

Código HTML – Armado del formulario.

Código CSS – Estilización del formulario.

Código jQuery/Javascript – Validaciones.

Código PHP – Envío de información.

1.- Código HTML

El armado del formulario es bastante estándar:

Contacto

Nombre:

Correo:

Sitio Web:

Mensaje:

Con este código tendremos un formulario bastante estándar armado en nuestra página de contacto. Este contará con campos de texto para que el visitante ingrese su nombre, correo electrónico y sitio Web, así como un área de texto para que ingrese su mensaje. Y obviamente al final añadimos un botón para el envío.

Como podrán fijarse, a continuación de cada campo de texto y área de texto, hemos añadido un span sin contenido. Esto lo hemos hecho para insertar mensajes y resultados de las validaciones posteriormente mediante jQuery.

A continuación, haremos la estilización del formulario, mediante CSS.

2.- Código CSS

body { height: 100%; background: #348075; font-family: Arial; font-size: 11px; color: white; } #container { width: 1000px; margin: 0 auto; background: #5b5c5c; border: 1px solid white; -moz-border-radius: 20px; -webkit-border-radius: 20px; } #formulario { padding: 1em; } #formulario fieldset { width: 400px; padding: 0 0 0 0; border: 0; } #formulario label { display: block; padding: 5px 0 5px 0; } #formulario input[type=text], textarea { padding: 10px 0 10px 0; border: 1.5px solid black; color: #5b5c5c; font-family: inherit; font-size: inherit; -moz-border-radius: 5px; -webkit-border-radius: 3px; } #formulario input[type=text]:focus, textarea:focus { background: #f5f2c9; } #formulario input[type=submit] { border: none; margin-right: 1em; padding: 6px; text-decoration: none; font-size: 12px; font-weight: bold; -moz-border-radius: 4px; background: #348075; color: white; width: 100px; } #formulario input[type=submit]:hover { background: #287368; cursor: pointer; } #validar-nombre, #validar-correo, #validar-sitio, #validar-mensaje { position: absolute; width: 100px; } #validar-nombre img, #validar-correo img, #validar-mensaje img { padding:10px 0 0 5px; }

Como podrán ver, en algunas partes hemos utilizado la propiedad border-radius (con moz y webkit para apuntar a distintos navegadores). Esta propiedad, tal como hemos indicado anteriormente, es de CSS3, por lo que no está completamente soportada por todos los navegadores, especialmente los más antiguos. El efecto que logra es el de bordes redondeados, así que ojo, si utilizan IE o algún navegador de mayor antiguedad no lo podrán apreciar.

3.- Código jQuery / Javascript

Acá debemos fijarnos en algunas cosas. Primero, debemos asegurarnos de descargar e incluir jQuery en la cabecera de nuestro formulario, y luego, crear un documento js en el que incluiremos el código en jQuery que hará las validaciones y el correspondiente a Javascript que contendrá la expresión regular que evaluará la dirección de correo ingresada para ver si es válida. Partamos con jQuery:

$(function(){ var valor; var i = 0; $('#nombre').focus(function(){ $('#resultado-nombre').remove(); $('#validar-nombre').append('
* Obligatorio
'); }); $('#nombre').blur(function(){ $('.advertencia').remove(); valor = $('#nombre').val(); if(valor != '') { $('').appendTo('#validar-nombre'); } else { $('').appendTo('#validar-nombre'); } }); $('#correo').focus(function(){ $('#resultado-correo').remove(); $('#validar-correo').append('
* Obligatorio
'); }); $('#correo').blur(function(){ $('.advertencia').remove(); valor = $('#correo').val(); if(valor != '') { if(validaCorreo(valor)){ $('').appendTo('#validar-correo'); var valido = true; } else { $('Correo no valido').appendTo("#validar-correo"); } } else { $('').appendTo('#validar-correo'); } }); $('#sitio').focus(function(){ $('#validar-sitio').append('
* Opcional
'); }); $('#sitio').blur(function(){ $('.advertencia').remove(); }); $('#mensaje').focus(function(){ $('#resultado-mensaje').remove(); $('#validar-mensaje').append('
* Obligatorio
'); }); $('#mensaje').blur(function(){ $('.advertencia').remove(); valor = $('#mensaje').val(); if(valor != '') { $('').appendTo('#validar-mensaje'); } else { $('').appendTo('#validar-mensaje'); } }); $('#enviar').click(function(){ if($('#nombre').val()!= '' && $('#correo').val()!='' && $('#mensaje').val()!='' && valido) { $('.advertencia').remove(); $('#envio').append(''); var nombre = $('#nombre').val(); var correo = $('#correo').val(); var sitio = $('#sitio').val(); var mensaje = $('#mensaje').val(); $.ajax({ url: 'envio.php', type: 'POST', data: 'nombre=' + nombre + '&correo=' + correo + '&sitio=' + sitio + '&mensaje=' + mensaje, success: function(resultado) { $('#respuesta').remove(); $('#envio').append('' + resultado + ''); $('#cargando').fadeOut(500, function() { $(this).remove(); }); } }); return false; } else { $('#envio').append('Debe completar los datos requeridos.'); return false; } }); });

Varias cosas a las que ponerle atención en el código anterior:

Utilizamos 3 imágenes en los procesos de validación y envío (accept.png, delete.png, ajax-loader.gif). Estas imágenes son utilizadas para validar correcta e incorrectamente así como mostrar un pequeño cargador al momento de enviar los datos. Pueden obtenerlas en el código fuente que hemos adjuntado al final.

Hacemos uso del método ajax de jQuery, el cual nos permite enviar asincrónicamente los datos a una página en PHP mediante un método como POST o GET y que esta se ejecute sin la necesidad de recargar la página. Como se puede apreciar, en caso de éxito de esta llamada (el código correspondiente a success), hay un parámetro que es devuelto (resultado), el cual corresponde a un mensaje desplegado por el script que ejecutamos, lo que podremos ver más adelante.

Hemos incluido en 2 partes un return false. Esto se ha hecho para que el formulario no ejecute el action (de enviar a la página envio.php) de forma normal, sino que ejecute todo de forma asincrónica. Si el usuario tiene desactivado Javascript en su navegador, se ejecutará todo de forma normal.

En la validación del correo se hace un llamado a una función que lo evaluará, esa la incluiremos a continuación.

El código básicamente ejecuta acciones cada vez que se selecciona un campo de texto (focus) y/o se sale de el (blur). Ahí evalua de acuerdo a los parámetros que hemos definido (que existan datos) y en base a eso muestra un resultado de la validación. Luego, al final, cuando se hace click en el botón de envío, evalúa que existan datos en todos los campos y en ese caso envía. De lo contrario, despliega un mensaje indicando la necesidad de completar el formulario.

Luego, a continuación del código jQuery, incluiremos una función en Javascript que evaluará el correo mediante una expresión regular para verificar que tenga el formato correcto:

function validaCorreo(correo) { var expresion = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*) |("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66}) \.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\. |1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.) {2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i); return expresion.test(correo); }

Entre estos 2 códigos se encargan de toda la validación del formulario, tal como indicamos, en tiempo real. Lo que nos queda hacer ahora es crear nuestro script en PHP para el envío final de los datos.

4.- Código PHP

Nombre: ".$nombre."
Correo: ".$correo."
Sitio Web: ".$sitio."
Mensaje: ".$mensaje; /* Definimos las cabeceras del mensaje */ $cabecera = "MIME-Version: 1.0\r\n"; $cabecera .= "Content-type:text/html; charset=iso-8859-1\r\n"; $cabecera .= "From: $correo\r\n"; $cabecera .= "Reply-to: $correo\r\n"; $cabecera .= "Cc: $correo\r\n"; /* Enviamos vía correo, devolviendo un mensaje en caso de éxito o falla */ if(mail($destino, $asunto, $cuerpo, $cabecera)) { echo 'Su mensaje ha sido enviado. De ser necesario, nos pondremos en contacto con Ud.'; } else { echo 'No se pudo enviar el mensaje. Inténtelo nuevamente'; } ?>

Los mensajes desplegados en el if y else cuando enviamos el correo son aquellos que son devueltos al método .ajax de jQuery (el parámetro resultado del que hablamos anteriormente), los cuales son desplegados en el formulario.

Conclusión

Y con eso tenemos nuestro formulario de contacto terminado, el cual valida en tiempo real y envía los datos de forma asincrónica. En caso de que el visitante tenga Javascript desactivado en su navegador, esto se ejecutará de forma normal, es decir, el script PHP se cargará al momento de presionar el botón Enviar y no habrá validación en tiempo real.

Antes de terminar:

Y como siempre, les recordamos que este tutorial ha sido:

Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada 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 crear un cuadro de información de autores en Wordpress

Xabadu — Sun, 23 May 2010 02:33:05 +0000

Es común que cuando tenemos múltiples autores escribiendo en un sitio, querramos mostrar la información del responsable de cada artículo para que los usuarios puedan conocer quien está detrás de cada cosa que se escribe. Si bien en CLH en un principio optamos por no mostrar la información, y luego hacer una pequeña referencia al comienzo de cada artículo, eventualmente hemos llegado al punto de incluirlo (principalmente por Dexter, que quiere ser famoso )

En la búsqueda de alternativas, dimos con varios plugins que ayudan a automatizar la tarea, pero nada que nos satisfaciera por completo en cuanto a diseño y personalización. Luego de analizar el tema más a fondo fue posible darse cuenta que armar un cuadro de información desde cero no es una tarea compleja, y si entrega una gran flexibilidad para el armado, por lo que echamos manos a la obra y hoy, en un sencillo y rápido tutorial, les enseñaremos el proceso paso a paso.

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

Cómo crear un cuadro de información de autores en Wordpress

Antes de todo, como siempre:

Detalles del tutorial

Tiempo aproximado de implementación: 10 minutos.

Dificultad: Básico (para implementar tal cual) – Intermedio (para personalizar).

Conocimientos previos requeridos: Entendimiento de HTML, CSS, PHP y las funciones de Wordpress.

Implementos necesarios:

Un sitio con Wordpress.

Procedimiento:

La implementación de un cuadro de información de autores, cuenta con varias partes:

Código HTML para crear el cuadro.

Código CSS para estilizarlo.

Código PHP para insertar las funciones de Wordpress.

Así que vamos, a implementar:

Código HTML

Con esto armaremos la estructura de nuestro cuadro de información de autores, el esqueleto por ponerlo de alguna forma. En el, incluiremos principalmente 3 cosas:

Imagen del autor.

Información del autor (nombre y sitio Web).

Bio del autor.

Para verlo de forma más gráfica, armaremos algo de la siguiente forma:

Como podemos ver, no es demasiado complejo. Desarmando esa imagen es posible apreciar que necesitamos un Div para el cuadro completo que debe contener a su vez 2 Div’s: Uno para la imagen del autor y una para la bio e información del autor. Así que viendo esto en código, sería algo de la siguiente forma:

Aqui iría la imagen del autor

Aquí iría la información y bio del autor

Vamos viendo. En el código anterior está claro que irá contenido dentro de cada Div, por lo que rellenarlo es bastante sencillo. Podríamos agregar una etiqueta para imágenes y luego abajo escribir el texto que querramos que aparezca. Sin embargo, ¿qué pasa si tenemos múltiples autores?, o más bien ¿cómo le decimos a Wordpress que incluya la información del autor del artículo y no de otra persona?. Ahí es donde entran las funciones de Wordpress.

Código PHP

Afortunadamente, Wordpress trae funciones incorporadas que nos permiten referenciar de manera muy sencilla la información de un autor en particular y relacionarla al artículo desde donde se está haciendo la llamada. Así, si Dexter escribe un artículo, aparece el cuadro con la información de Dexter, pero si el artículo lo escribe Topher, aparecerá su información, ya que WP sabe diferenciar de acuerdo a la ID de cada artículo y recupera los datos en base a eso.

Así que, listando, la información que debemos rescatar es:

Imagen del autor.

Su nombre o pseudónimo.

Un enlace a su sitio Web.

Su bio.

Si se fijan, los 3 últimos parámetros están incluidos en el perfil de cada autor en Wordpress, por lo que es sumamente sencillo recuperarlos. Ahora, el primero, correspondiente a la imagen es un poco más complejo, ya que el perfil en si no está asociado a ninguna imagen.

¿La solución?, Wordpress incluye una función que nos permite referenciar el gravatar asociado a la cuenta de correo del autor. Así que si el autor tiene un gravatar, este será mostrado en el cuadro.

O sea, en base al listado anterior, llamaremos a las siguientes funciones de Wordpress:

get_avatar( ), entregando como parámetro la función the_author_meta y como parámetro a esta última user_email.

the_author_link( ), sin parámetros.

the_author_meta( ) , entregando como parámetro user_url.

the_author_meta( ), entregando como parámetro description.

Donde:

La función get_avatar nos permite recuperar el gravatar asociado a una cuenta de correo. Por eso pasamos como parámetro el correo electrónico del autor del artículo.

La función the_author_link nos entrega el nombre o pseudónimo del autor, enlazado a una enumeración de todos los artículos que ha escrito en el sitio.

La función the_author_meta nos entrega información relacionada al autor del artículo, dependiendo del parámetro enviado, por eso al enviar user_url nos entrega el sitio Web asociado a la cuenta del autor, y si enviamos description nos entrega la bio que está en su perfil.

Así que con eso, el código quedaría de la siguiente forma (incluyendo el HTML anterior):

Escrito por

Como pueden ver, hicimos uso de las funciones destacadas anteriormente para rescatar el gravatar del autor, su nombre, sitio Web y bio del perfil.

Ahora, si se fijan, hay un parámetro que incluimos en la función get_avatar que no indicamos anteriormente, el cual tiene un valor de 80. Este parámetro corresponde al tamaño de la imagen. Como los avatars son cuadrados, este valor se toma como ancho y alto de la imagen, la cual en este caso será de 80 pixeles.

Con eso ya tenemos nuestro cuadro armado en estructura y con la información del autor mostrándose, pero probablemente si lo vemos en el navegador, se verá desordenado y bastante horrible, ya que no hemos estilizado nada. Eso, precisamente, será nuestro próximo paso:

Código CSS

Mediante CSS vamos a encargarnos de posicionar los elementos dentro de cada bloque y de estilizar para hacerlo más agradable a la vista. El código que entregamos aquí es referencial, de acuerdo a lo que utilizamos para los cuadros de este sitio, así que siéntanse libres de modificar de acuerdo al estilo de su sitio:

div#info-autor { background: #f7f7fa; padding: 10px; margin: 0 0 15px 0; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; overflow: auto; } div#info-autor div#imagen-autor { float: left; margin: 0 10px 5px 0; border: 3px solid #626263; } div#info-autor div#imagen-autor a img{ border: none; } div#info-autor p{ text-align: justify; font-style: italic; } div#info-autor h4{ font-weight: bold; padding-bottom: 5px; color: #403f3a; letter-spacing: -1px; line-height: 1em; font-size: 18px; }

Algunos detalles a tener en consideración:

La propiedad border-radius (-moz-border-radius para Firefox y -webkit-border-radius para navegadores basados en Webkit), corresponde a CSS3, por lo que navegadores más antiguos o algunos modernos que no soporten CSS3 por completo (IE) no desplegarán correctamente el efecto. ¿Qué efecto se preguntarán?, esquinas redondeadas para los bloques.

Los últimos 2 bloques de código (para párrafos y para encabezados h4) los incluímos para que el estilo fuera distinto al que por defecto tiene la hoja de estilo en otros sectores del sitio. Sin embargo, esto es opcional.

Y con esos ajustes de CSS tenemos terminado nuestro cuadro de información de autores. ¿Se preguntan como queda el resultado? Fácil de ver, siguiendo más abajo, luego de la calificación del tutorial pueden verlo completamente implementado.

Nuevamente, los parámetros tanto de estilo como de estructura, son los que utilizamos acá. Si quieren armarlo de forma distinta, o posicionar y estilizar de manera más acorde a su sitio, no tengan miedo en jugar con el código. Esa es la base, pero todo lo que se puede lograr depende de cada uno

Por ahora, les recordamos que como siempre este tutorial ha sido:

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

Esperamos que este tutorial haya sido de utilidad para Uds.

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

Cómo crear un identificador de teléfonos móviles

Xabadu — Sun, 09 May 2010 04:00:27 +0000

¿Cuántas veces nos hemos encontrado con la siguiente situación?:

Nuestro plan de telefonía móvil nos entrega X cantidad de minutos a la Compañía 1, Y cantidad de minutos a la Compañía 2 y Z cantidad de minutos a la compañía 3. Agotamos una de las opciones y necesitamos hacer una llamada urgente, pero empezamos a pensar ¿Y si es de los minutos que ya no me quedan? Me cobrarán extra o no podré hacer la llamada. Y ante la duda, una oportunidad pasa.

Hoy en Internet es posible encontrar algunas aplicaciones que nos permiten reconocer la compañía a la que pertenece un número móvil. Sin embargo, algunas de ellas presentan requisitos específicos o son de licencia comercial, lo que no las hace accesibles para cualquier persona.

Pero que no panda el cúnico amigos nuestros, que hoy en CLH, mediante un realmente simple y rápido tutorial (siempre lo decimos, pero este en verdad es muy simple), les enseñaremos a construir un identificador de teléfonos móviles de forma gratuita y en la comodidad de su hogar.

¿Qué hacer? Solo seguirnos después del salto

Cómo crear un identificador de teléfonos móviles

Detalles del tutorial

Tiempo aproximado de implementación: 30 minutos.

Dificultad: Básico.

Implementos necesarios:

Un servidor Web que ejecute archivos PHP y un sistema de gestión de bases de datos MySQL (Recomendamos XAMPP).

La base de numeración telefónica móvil publicada por la Subtel. Pueden descargarla en formato PDF desde el siguiente enlace.

Un editor para la codificación (Recomendamos Notepad++).

Notas sobre el proceso:

Probablemente en este punto se preguntarán: ¿Cómo funciona esto? Bastante sencillo. La Subsecretaría de Telecomunicaciones en Chile define una serie de prefijos los cuales son asignados en rangos a las distintas compañías que entregan servicios de telefonía móvil. Estos prefijos están compuestos por 4 dígitos y van desde el 6200 hasta el 9999.

Ahora, ¿qué tienen que ver estos prefijos? Son ellos los que forman la primera mitad de nuestros números de teléfonos móviles. En consecuencia, cada prefijo tiene 4 dígitos más que forman un número único completo. Si nuestras matemáticas no fallan, podemos deducir que eso significa que existe un total de 9999 números de teléfonos móviles únicos por cada prefijo. Considerando que son 3799 prefijos en total, en Chile tenemos 37.986.201 posibles combinaciones de números.

¿Eso significa que eventualmente habrán 37 millones de celulares dando vuelta en el país?. Puede ser, pero de momento no, ya que como podrán fijarse en la base de numeración, hay prefijos asignados a compañías que actualmente no ofrecen servicios de telefonía móvil de libre acceso al público general… pero nunca se sabe. Adicionalmente, hay algunos rangos de prefijos que no están asignados, lo que deja un total 2620 prefijos y por ende 26.197.380 combinaciones. Pero eso es un dato anecdótico más que nada.

Con esa información, ya tenemos la lógica clara para realizar nuestra aplicación, así que manos a la obra.

Procedimiento:

1.- Lo primero que debemos hacer, y que es el paso más crítico, es transformar la base de numeración telefónica a un formato adecuado, ya que la que descargamos esta en formato PDF y no podremos acceder a ella de forma normal, así que nuestro objetivo es traspasarla a nuestra base de datos MySQL con el fin de poder consultarla mediante el script que desarrollaremos.

Para esto tenemos varias opciones:

Podemos copiar el contenido de la base y traspasarlo a una planilla Excel, en la cual debemos eliminar las XXXX que aparecen en el campo suscriptor y solo mantener el prefijo y en otra columna la compañía a la que pertenece ese prefijo. Adicionalmente, es bueno que al menos para las tres compañías más conocidas, cambiemos sus nombres completos o razones sociales a nombres más amigables y reconocibles para el usuario (por ej. ENTEL PCS TELECOMUNICACIONES S.A. a ENTEL PCS).

Una vez que tenemos nuestro Excel armado con el formato que queremos, lo traspasamos a MySQL. ¿Dudas sobre como hacerlo? No se preocupen, en el pasado hemos hecho un tutorial que cubre el proceso de forma completa.

Pero, equipo de CLH, este proceso es largo y tedioso, ¿pueden echarnos una mano por favor?. Bueno, bueno, pero solo porque lo pidieron por favor. Si hacen click en este enlace, pueden descargar la base de datos completa lista para importar a MySQL. Pero no le cuenten a nadie, ¿ya?.

El archivo que les dejamos es un fiel reflejo de la base de datos que creamos, llamada moviles, la cual tiene una tabla llamada numeracion. Esta a su vez tiene 2 campos: prefijo (INT) y empresa (TEXT). Más sencillo imposible.

2.- Ahora que hemos ordenado nuestros datos, podemos empezar a codificar lo que será nuestra pequeña aplicación. Para empezar, haremos un formulario el cual contendrá un campo de texto para que el usuario ingrese el número de teléfono móvil a consultar y un botón para enviar la consulta. Para esto, crearemos un archivo en formato PHP, llamado consulta.php, el cual contendrá además de lo anterior, un autollamado donde se ejecutará el script y consultaremos la base de datos. Pero primero, el formulario:

Ingrese el número a consultar:

3.- Luego de codificar nuestro formulario, procedemos a hacer el código PHP, el cual validará el número ingresado y luego hará cortará los primeros 4 caracteres de la cadena ingresada (para igualarlo al prefijo), hará la consulta en la base de datos y desplegará el resultado de acuerdo a lo que se obtenga:

if($_POST) { if($_POST['numero'] == '') { $mensaje = "Debe ingresar un número para consultar."; } else { if(!$conexion = mysqli_connect("localhost", "usuario", "clave", "bd")) { $mensaje = "No se pudo conectar a la base de datos."; } else { $numero = substr(trim($_POST['numero']), 0, 4); $consulta = "SELECT empresa FROM numeracion WHERE prefijo = ".$numero; if($resultado = mysqli_query($conexion, $consulta)) { if(mysqli_num_rows($resultado) == 0) { $mensaje = "No hay coincidencias para el número ".$_POST['numero']."."; } else { $datos = mysqli_fetch_array($resultado, MYSQL_ASSOC); $mensaje = "El número ".$_POST['numero']." pertenece a ".$datos['empresa'].""; } } else { $mensaje = "Ocurrió un error al ejecutar la consulta. Inténtelo nuevamente."; } } } }

4.- El código en si es bastante autoexplicativo. Comprobamos primero si se enviaron datos, conectamos a la base de datos y ejecutamos la consulta. En cada paso creamos una variable llamada mensaje, la cual almacena información correspondiente al resultado de la operación. Este mensaje lo añadiremos al final del formulario para que le informe al usuario que sucedió:

5.- De forma opcional, si así lo deseamos, podemos estilizar un poco esta pequeña aplicación, creando un archivo estilos.css y añadiéndolo a la cabecera de consulta.php:

#formulario { width: 450px; margin: 0 auto; font-family: Arial; font-size: 11px; border: solid 1px black; padding: 20px; background-color: #fac519; } #formulario-consulta { margin-left: 150px; } #submit { font-family: inherit; font-size: 11px; } label { display: block; } #mensaje { font-family: Arial; font-size: 11px; padding: 3px; border: 1px dashed black; } #exito { background-color: #6ad11b; } #error { background-color: #f51414; }

6.- Finalmente, nuestro consulta.php quedaría de la siguiente forma:

Identificador de teléfonos móviles Debe ingresar un número para consultar."; } else { if(!$conexion = mysqli_connect("localhost", "root", "dumbass", "movil")){ $mensaje = "No se pudo conectar a la base de datos."; } else { $numero = substr(trim($_POST['numero']), 0, 4); $consulta = "SELECT empresa FROM numeracion WHERE prefijo = ".$numero; if($resultado = mysqli_query($conexion, $consulta)) { if(mysqli_num_rows($resultado) == 0) { $mensaje = "No hay coincidencias para el número ".$_POST['numero']."."; } else { $datos = mysqli_fetch_array($resultado, MYSQL_ASSOC); $mensaje = "El número ".$_POST['numero']." pertenece a ".$datos['empresa'].""; } } else { $mensaje = "Ocurrió un error al ejecutar la consulta. Inténtelo nuevamente."; } } } } ?>

Ingrese el número a consultar:

Probamos y todo debiese funcionar sin problemas.

Y así de simple tenemos un identificador de números móviles para cuando lo necesitemos. Si nos fijamos, el proceso es bastante simple de implementar, por lo que los incentivamos a animarse, en solo minutos tendrán una muy útil aplicación para compartir.

Notas antes del cierre:

1.- Para nuestros amigos de fuera del país, lamentablemente este proceso sirve para Chile. Sin embargo, nos imaginamos que afuera debe ser bastante similar, por lo que los invitamos a compartir sus experiencias con otros usuarios.

Antes de terminar:

Y como siempre les recordamos que este tutorial ha sido:

Cualquier duda que puedan tener, los invitamos a dejar un comentario 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 incrementar la seguridad de Wordpress en 10 pasos

Xabadu — Mon, 03 May 2010 14:08:09 +0000

Continuando con nuestros tutoriales sobre Wordpress, sin duda el CMS favorito a la hora de levantar blogs e incluso sitios de distinto tipo, hoy les traemos un nuevo listado de tips y consejos sobre como incrementar la seguridad de nuestra implementación y de esta forma evitar, o al menos hacer más difícil, posibles ataques que nos dejen sin nada en las manos.

Hemos recopilado 10 buenas prácticas a tener en cuenta, ya sea antes de instalar, o cuando tenemos nuestro sitio andando. Todas son bastante sencillas de implementar y sin duda que nos ahorrarán más de un dolor de cabeza en caso de que ocurra algún problema.

Los invitamos a leer el detalle, como siempre, después del salto.

Cómo incrementar la seguridad de Wordpress en 10 pasos

Detalles del tutorial

Tiempo aproximado de implementación: 1 hora.

Dificultad: Intermedio.

Implementos necesarios:

Un sitio con Wordpress.

Un cliente FTP.

Un editor Web.

Accesos al panel de control de nuestro hosting y/o base de datos.

Nota: Este artículo es una recopilación de tips, consejos y buenas prácticas encontrados en una serie de sitios y basados principalmente en un ensayo creado por la gente de BlogSecurity, a los cuales hemos añadido algunas otras cosas que encontramos bastante útiles para tener en cuenta.

Con eso claro, vamos, manos a la obra:

1.- Cambiar el prefijo de las tablas

Al momento de empezar el proceso de una nueva instalación de Wordpress, es necesario hacer algunas ediciones en el archivo wp-config.php, el cual, como su nombre lo indica, contiene parámetros de configuración que permitirán la correcta implementación y posterior funcionamiento del CMS.

Entre las ediciones que se deben hacer, se nos solicita indicar un prefijo para las tablas que se crearán en la base de datos, las cuales contendrán toda la información relativa a nuestros artículos, comentarios de los usuarios, opciones y más. Por defecto, Wordpress nos indica el prefijo wp_, el cual a pesar de que se nos recomienda cambiar, mucha gente opta por dejarlo, teniendo como resultado tablas en la base de datos como: wp_comments, wp_options y más.

Está demás decir que este prefijo se debe cambiar por alguna cadena de texto aleatoria que decidamos (por ej: iehr23_). Esto hará más difícil el acceso a posibles atacantes, ya que al asumir que hay un prefijo por defecto definido como wp_, existen hoy en día múltiples scripts preparados para detectar esa falla de seguridad.

Ahora, lo importante, ¿Cómo cambiarlo?

a) Previo a la instalación de Wordpress:

Es el caso más sencillo. Tan simple como ir al archivo wp-config.php (en caso de que recién hayamos descargado, es wp-config-sample.php que posteriormente se renombra a wp-config.php) donde veremos aproximadamente en la línea 56:

$table_prefix = 'wp_';

Y cambiar wp_ por la cadena que hayamos ideado. Por ej, si nuestra cadena fuera iehr23, lo dejaríamos como:

$table_prefix = 'iehr23_';

Y luego seguimos con el proceso normal de instalación.

b) Posterior a la instalación de Wordpress:

Este proceso es un poco más largo, pero no presenta una gran dificultad, por lo que si es su caso, recomendamos seguirlo.

Ya que nuestra instalación de Wordpress está completa y corriendo, debemos hacer varias ediciones para asegurarnos de que todas las referencias al prefijo por defecto sean cambiadas al nuevo que vamos a definir.

Al igual que para el caso previo a la instalación, debemos editar la misma línea del archivo wp-config.php, pero en este caso el que ya está arriba en nuestro hosting corriendo y hacer el cambio del prefijo por el nuevo.

Luego, debemos acceder a nuestra base de datos (a través de un interfaz de administración, como por ejemplo phpMyAdmin) y debemos renombrar todas las tablas que contienen el prefijo wp y cambiarlos al nuevo. Por ejemplo, la tabla wp_comments pasaría a ser iehr23_comments si elegimos ese prefijo como nuevo.

A continuación, debemos entrar a editar valores en la tabla wp_options (que ya a este punto debe estar con el nuevo prefijo) y buscar en el campo option_name el valor wp_user_roles y cambiarlo a nuestro nuevo prefijo, o sea, para el caso del ejemplo sería iehr23_user_roles.

Y finalmente debemos entrar a editar valores en la tabla wp_usermeta (o iehr23_usermeta si ya cambiamos los prefijos) y buscar en el campo meta_key los valores wp_autosave_draft_ids, wp_capabilities y wp_user_level y cambiarlos por los nuevos prefijos, o sea, para el caso del ejemplo serían: iehr23_autosave_draft_ids, iehr23_capabilities e iehr23_user_level. En algunos casos encontrarán también en la misma tabla otros valores con el prefijo wp. Asegúrense de cambiarlos al nuevo prefijo.

Y listo. Así de simple.

c) Automatizando el proceso:

Si nos complica mucho hacer los cambios de forma manual, la gente de BlogSecurity ha creado un plugin que se encarga de llevar a cabo todo el proceso. Este plugin se llama WP Prefix Table Changer y pueden descargarlo del siguiente enlace.

2.- Accesos a la base de datos

Un aspecto que por lo general se descuida mucho, pero que es de tremenda importancia. Para acceder a la base de datos donde tenemos nuestra instalación de Wordpress, es necesario contar con un usuario, el cual a su vez tiene una serie de privilegios para operar sobre ella (crear tablas, insertar datos, seleccionar, actualizar, eliminar, etc.), con el fin de poder cumplir los procedimientos básicos de Wordpress, como la creación y despliegue de artículos, recepción de comentarios y más.

Es de tremenda importancia que a este usuario le dejemos habilitados solo los privilegios necesarios y nada más que eso. De la misma manera, el usuario debiese tener acceso solo a la base de datos donde tenemos nuestra instalación de Wordpress y no a otras que pudiesemos tener (en caso de que nuestro proveedor de hosting nos entregue múltiples bases de datos o schemas). La razón de esto es que si tenemos una vulnerabilidad que le permita a un atacante acceder a la base de datos con ese usuario, no solo afectará la base de datos correspondiente a Wordpress, si no que pudiese afectar otros proyectos que tuviésemos alojados ahí, haciendo el daño mucho mayor.

De la misma forma, nunca, pero nunca debemos dejar el usuario root para nuestra instalación de Wordpress, ya que el por defecto tiene accesos y privilegios para hacer cualquier cosa. Siempre debemos crear un nuevo usuario y restringir sus privilegios.

En caso de que se nos permita tener un solo usuario en nuestro sistema de gestión de bases de datos, con que habilitemos los siguientes permisos basta y sobra:

Para manipulación de datos: SELECT, INSERT, UPDATE, DELETE.

Para definición de datos: CREATE, ALTER, DROP.

Ahora, si es que nuestro proveedor de hosting nos permite crear múltiples usuarios, lo que podemos hacer es habilitar uno nuevo para tareas rutinarias y habilitarle los siguientes permisos:

Para manipulación de datos: SELECT, INSERT, UPDATE, DELETE.

Para definición de datos: ALTER.

Y luego cambiamos el usuario en el archivo wp-config.php. Ojo que este usuario nos limitará la creación de tablas, por lo que si implementamos algún plugin que requiera crear una nueva tabla en la base de datos, deberemos habilitar el privilegio.

Para manejar nuestros usuarios, debemos acceder a algún interfaz de administración como phpMyAdmin y dirigirnos a la pestaña Privilegios, en donde podremos definir todo lo anteriormente descrito.

3.- Eliminar archivos de instalación

Hemos comentado en numerosas ocasiones lo sencillo que es hacer una instalación de Wordpress. Mediante su interfaz, solo agregando algunos datos podemos contar con nuestro CMS implementado y funcional en solo minutos.

No obstante, posterior a la instalación, normalmente dejamos los archivos de instalación ahí, en nuestro servidor, lo cual puede provocar fallas de seguridad. Por ende, una vez que tengamos nuestro sitio corriendo, es bueno quitarlos, con la ayuda de algún cliente FTP y dirigiéndonos al directorio wp-admin, en donde debemos eliminar los siguientes archivos:

install.php

install-helper.php

upgrade.php

4.- Cambiar el usuario por defecto

Al instalar Wordpress, se nos crea un usuario por defecto (admin), el cual tiene todos los privilegios habilitados para administrar la plataforma por completo. Al igual que en el caso de los prefijos, al ser un usuario por defecto, es tremendamente vulnerable para scripts automatizados, tanto por su nombre como por su id (el cual siempre es 1). Es por esto que es tremendamente recomendable habilitar un nuevo usuario con privilegios de administración y eliminar este usuario admin, con el fin de no caer en las vulnerabilidades antes indicadas.

En caso de que tengamos una instalación de Wordpress andando y ya hayamos utilizado el usuario admin para publicar artículos y/o comentarios, luego de crear el nuevo usuario, debemos actualizar las tablas wp_posts y wp_comments y cambiar los id por el nuevo.

5.- Elección de contraseñas

Algo que va mucho más allá de Wordpress, pero de la misma forma aplicable. Creo que nunca se puede hablar lo suficiente de la importancia de definir contraseñas fuertes y dificiles de descifrar. Hace algún tiempo una importante red de medios sufrió un ataque debido a que sus principales administradores poseían contraseñas débiles y que además utilizaban en otros servicios, lo que hizo que los ataques sufridos las descifraran de manera bastante sencilla.

Es por esto que hay que poner especial cuidado al momento de definir las contraseñas para nuestros usuarios. Algunos tips importantes para tener en consideración:

No repetir la contraseña con la que usemos en otros servicios.

Definir una cadena de texto de mínimo 8 a 10 caracteres.

Mezclar letras y números.

No utilizar palabras facilmente reconocibles en algún lenguaje.

No utilizar palabras relacionadas al nombre de usuario, nombre del blog o contenido.

Adicionalmente, debemos preocuparnos de cambiar las contraseñas de forma frecuente.

Un buen consejo es utilizar algún servicio como The Password Meter , el cual nos informará sobre la seguridad de nuestra contraseña y los aspectos de ella que la hacen vulnerable.

6.- Usuarios independientes para publicar y administrar

Ya que hemos hablado bastante de los usuarios y sus accesos, es importante recordar que Wordpress nos permite definir roles y privilegios para cada uno de ellos. Desde el más bajo (suscriptor) hasta el más alto (administrador), cada uno de ellos tiene distintos accesos y se les permite diferentes funcionalidades.

Considerando que el usuario que utilizamos para publicar está expuesto y puede ser visto facilmente por todos aquellos que visitan nuestro sitio, es importante que este no tenga accesos como administrador y que solo tenga los permisos necesarios para publicar. Así, en caso de que este usuario sea utilizado como base para algún tipo de ataque, es posible limitar el daño que finalmente se haga.

Por otro lado dejamos un usuario administrador para tareas de mantención en el sitio, el cual no es conocido ni visto publicamente por nuestros visitantes.

Un plugin muy útil para hacer esto es Role Manager, el cual además de fijar niveles, nos permite añadir o quitar privilegios a cada usuario de forma independiente.

7.- Restringir accesos a wp-admin, wp-content y wp-includes

Los tres directorios principales de Wordpress son wp-admin, wp-content y wp-includes, ellos manejan tanto el aspecto de administración, como las plantillas, plugins y archivos necesarios para el funcionamiento normal del CMS.

Por ende, es importante restringir el acceso a ellos y solo habilitar lo que sea necesario, para así impedir que estos puedan ser vistos por usuarios malintencionados.

a) Restringiendo el acceso a wp-admin:

Aquí se puede aplicar una utilidad muy buena, en caso de que tengamos acceso a Internet mediante una IP fija (todo depende del método que utilice nuestro proveedor de servicios de Internet), ya que podemos bloquear el acceso a este directorio a todas las direcciones IP excepto la nuestra, solo añadiendo lo siguiente a nuestro archivo .htaccess:

Order deny, allow
Allow from 127.0.0.1
Deny from all

Reemplazamos 127.0.0.1 por nuestra IP Pública y eso restringirá el acceso a cualquier dirección IP que no sea la nuestra.

b) Restringiendo el acceso a wp-content y wp-includes:

Otra restricción que podemos habilitar es a nuestros directorios wp-content y wp-includes, los cuales contienen nuestra plantilla, plugins y otros archivos de importancia para el funcionamiento normal de Wordpress. Mediante una pequeña restricción en el .htaccess podemos definir que se limite el acceso a los directorios y que solo se acepten peticiones por cierto tipo de archivos, como hojas de estilo, imágenes y scripts de Javascript, los que serán requeridos para mostrar la plantilla.

Para esto, deberemos crear un archivo .htaccess dentro de cada directorio en el cual incluiremos:

Order Allow,Deny
Deny from all

Allow from all

8.- Restricciones de autentificación

Junto a lo anterior, también es posible realizar restricciones y exigir una autentificación adicional para poder acceder a ciertos directorios, como wp-admin. Esto lo haremos creando 2 archivos, un .htaccess que ubicaremos dentro de wp-admin y un .htpasswd que ubicaremos en algún directorio fuera de la raíz de nuestro sitio (usualmente un nivel más arriba que el directorio public_html o www).

En el archivo .htaccess incluiremos:

AuthUserFile ruta absoluta hacia nuestro archivo/.htpasswd
AuthType Basic
AuthName “Algun nombre para nuestro sitio”
require user nombre-de-usuario-que-pediremos

La primera línea corresponde a la ruta, en nuestro servidor, donde tenemos el archivo .htpasswd. Si la desconocemos podemos verla facilmente subiendo un archivo .php que contenga el siguiente código:

La linea 4 es donde debemos indicar que usuario se pedirá y se buscará en el .htpasswd.

Luego, debemos crear un archivo .htpasswd y almacenarlo en la misma ruta que indicamos en AuthUserFile de nuestro .htaccess y esta archivo debe contener el usuario y contraseña que podrá ser autentificado en formato usuario:contraseña. Eso si, la contraseña debe estar codificada. Para ayudarnos, podemos acceder a este sitio que nos permite ingresar los datos en texto plano y nos entrega el resultado directo a pegar en nuestro .htpasswd.

Por ejemplo, si tuviésemos un usuario ejemplo y una contraseña 1234, el resultado a pegar en el .htpasswd sería:

ejemplo:Dmrb3P4VUgfdw

Con eso, cada vez que ingresemos al directorio wp-admin nos solicitará una autentificación adicional, que será validada con el archivo .htpasswd.

Como consejo adicional, en lo posible traten de darle un nombre distinto al archivo .htpasswd , por ejemplo .jeio23 , haciendo el cambio respectivo en la primera línea del .htaccess. Eso hará aún más difícil la detección.

9.- Actualizar, actualizar y actualizar

Adicionalmente a todas las medidas indicadas, una muy básica y que siempre debemos tener en cuenta: Siempre actualizar a la última versión disponible de Wordpress. Este CMS, como cualquier software existente en el mercado, siempre se le detectan fallas o posibles vulnerabilidades que son corregidas con una nueva versión, por lo que estando siempre actualizados disminuimos el riesgo de ser víctimas de alguna de esas fallas.

Para eso es conveniente estar al tanto de las noticias en el sitio oficial de Wordpress o ver en nuestro mismo tablero, donde se nos avisa apenas se ha lanzado una nueva versión.

10.- Plugins

Los queridos y nunca bien ponderados plugins. Es realmente sorprendente la cantidad de funcionalidades y su extensibilidad, además de la simpleza para nosotros como administradores de plataforma.

Sin embargo, hay que tener 2 cosas en cuenta que nos ayudarán a mantener todo de forma mucho más segura.

a) No abusar de los plugins:

Es cierto, nos ayudan de sobremanera, pero tal como eso es que no debemos abusar e implementar todo lo que se nos ocurra. Además de sobrecargar innecesariamente el sitio, siempre debemos recordar que cada plugin es un script que se ejecuta, el cual puede poseer vulnerabilidades que pueden afectar nuestro sistema. Por eso, debemos ser cuidadosos con cual de ellos utilizar, fijándonos principalmente en el tipo de operaciones que ejecutan y las referencias/revisiones que hayan tenido por parte de los usuarios.

¿Qué tipo de plugins evitar? Por una parte los que ejecuten operaciones automáticas sobre nuestras bases de datos, como el caso de los respaldos. En caso de que estos plugins presenten alguna vulnerabilidad, estaríamos otorgando acceso directo a lo más preciado de nuestro sistema, por lo que hay que ser cuidadosos. Sabemos que es tremendamente cómodo automatizar nuestros respaldos, pero hay veces que ciertas operaciones es mejor hacerlas de forma manual.

b) Actualizar siempre a la última versión:

El mismo caso que Wordpress. Al incluir scripts, es muy probable que presenten vulnerabilidades que son corregidas mediante lanzamientos de nuevas versiones. Así que a estar atentos y siempre utilizar las versiones más recientes.

Bonus #1 – Respaldos

La primera recomendación, que si bien no tiene mucho que ver con seguridad propiamente tal, nos ahorrará un buen dolor de cabeza en caso de sufrir algún ataque. Es de extrema importancia realizar respaldos constantes, tanto de nuestra base de datos como de los archivos de nuestro sitio.

Ya hemos cubierto en el pasado la importancia de esto y como hacerlo, por lo que si tienen dudas, les recomendamos revisar este artículo.

Bonus #2 – Mantener una copia local

Esta es una opción similar y paralela al tema de los respaldos que nunca está demás considerar: Mantener una copia legítima del sitio en nuestro equipo corriendo un servidor local.

Si podemos hacerlo, es tremendamente recomendable, ya que además de servirnos de ayuda en caso de querer probar modificaciones, nuevos plugins o actualizaciones, la tendremos disponible y a mano en caso de que nuestro sitio sufra un ataque para reestablecerlo lo antes posible.

Si tienen dudas de como hacer esto, nuestro buen Jorge Nitales hizo un tutorial al respecto hace algún tiempo. Los invitamos a revisarlo.

Conclusiones

Con la seguridad nunca se puede ser demasiado paranoico. Por eso es recomendable siempre aplicar la mayor cantidad de medidas posibles y siempre estar al tanto de fallas de seguridad que sean encontradas para corregirlas. A veces un descuido puede llevarnos a perder información realmente valiosa.

A pesar de todas las medidas que podamos aplicar, siempre existe la posibilidad que un ataque sea exitoso. Por ende, denle suma importancia a los bonus que incluimos, ya que es lo único que en la peor instancia nos podrá ayudar.

Y con eso damos por terminado este pequeño tutorial sobre como incrementar la seguridad de tu blog en Wordpress. Esperamos que estos tips sean de utilidad y cualquier duda que puedan tener, los invitamos a dejarnos un comentario a continuación.

Como siempre, este tutorial ha sido:

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

Staff CLH

Cómo hacer un efecto estilo The Matrix

Cri — Sun, 02 May 2010 02:31:18 +0000

Hola amigos!

Retomando nuestro amigo photoshop aqui les mostraré un tutorial super simple para poder “hacer una similitud” respecto al efecto de los códigos que van cayendo en matrix.

Como es costumbre los invito a leer más acerca del tema despues del salto…

Cómo hacer un efecto estilo The Matrix

1. ¿Qué necesitamos?

Nuestro querido y fiel compañero Adobe Photoshop

2. ¿Cómo lo hago?

Fácil, para comenzar debemos crear un nuevo documento en blanco con las dimensiones a nuestra elección (en este caso usaré 500×400 pixeles), en modo RGB Color.

Para crear un nuevo documento, recuerden que debemos dirigirnos a Archivo (o File) y luego escoger la opción Nuevo (o new).

Nos aparecerá la siguiente ventana donde debemos escoger las dimensiones.

3. Luego de tener el documento creado y ajustado para nuestro trabajo nos dirigiremos a la tabla de herramientas (para los que no ven la tabla de herramientas, deben dirigirse a Ventana o Window y luego seleccionar Herramientas o Tools). Como lo indica la flecha BLANCA debemos seleccionar el color negro (pinchando en ese cuadro negro, seleccionamos color y luego OK), y luego dirigirnos hacia donde apunta la flecha ROJA y elegir el balde de pintura (Letra G) para pintar nuestro fondo de color negro.

Nota: Si les aparece otra herramienta en ese lugar, dejen pulsado el boton izquierdo un segundo y les aparecerá para elegir la opción del balde de pintura.

4. Siguiendo con los pasos ahora nos dirigiremos a

Filtro > Textura > Granulado

Intensidad: 60

Contraste: 40

Tipo de granulado: Vertical

5. Ahora falta agregarle el detalle a nuestro granulado para que vaya obteniendo el estilo Matrix, para esto nos iremos a Filtro > Trazos de pincel > Bordes Acentuados

Ancho Borde: 1

Brillo Borde: 26

Suavidad: 1

6. Dándo los toques finales como a los “códigos” que se ven caer en este efecto Matrix ahora nos dirigiremos a Filtro > Textura > Azulejo de mosaico

Tamaño azulejo: 2

Grout Width(no se como es en espanish): 2

Lighten Grout: 1

7. Ahora, procederemos a copiar nuestra capa (en mi caso duplicate layer) y luego ajustaremos las opciones de esta en Opciones de Fusión (en mi caso Blending options) sobre la capa recién copiada.

8. Dentro de las Opciones de Fusión debemos dirigirnos a la siguiente sección y seleccionar lo siguiente.

Color Overlay: Superposición de colores

Modo fusión: Superposición

Color: #0CFF00 (o algo similar)

9. Finalmente, solo para retocar más y dar unos pocos efectos de luz iremos a

Filtro > Interpretar > Efectos de iluminación

10. Clickeamos OK y estaríamos listos con nuestro efecto.

Espero les haya gustado y servido para vuestra utilidad. Los invitamos a dejar su comentario.
Como siempre exclusivamente ha sido.

Staff CLH