Como Lo Hago » HTML

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 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 una galería de imágenes para tu Web

Xabadu — Mon, 29 Mar 2010 18:41:56 +0000

Continuando con nuestra larga saga de tutoriales sobre diseño Web, en esta ocasión les traemos un pequeño desarrollo que sin duda puede ser de gran utilidad para nuestros sitios, en especial si queremos montar una especie de portafolio o una simple galería para desplegar imágenes.

En un esfuerzo conjunto e integración de tecnologías como PHP, jQuery, CSS, XHTML y un poco de MySQL, hoy veremos un paso a paso de como construir una simple galería de imágenes desde cero.

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

Cómo crear una galería de imágenes para tu Web

Como siempre, lo primero:

Detalles del tutorial

Tiempo aproximado de implementación: 60 minutos.

Dificultad: Intermedio.

Conocimientos requeridos: Idealmente nociones de PHP, XHTML, CSS, jQuery y bases de datos, especialmente si quieren personalizar el diseño final. De cualquier forma, todo será explicado paso a paso en caso de que deseen implementar tal como está acá.

Implementos necesarios:

Un servidor que pueda ejecutar archivos PHP. (Recomendamos XAMPP para Windows, Linux y Mac).

Un sistema gestor de bases de datos MySQL (En XAMPP viene uno incluido).

Opcionalmente un editor Web (Recomendamos Adobe Dreamweaver o Aptana Studio).

Un editor de imágenes (Recomendamos Adobe Photoshop).

La librería jQuery, que pueden obtener desde su sitio oficial.

Imágenes para montar en la galería. Para este caso utilizamos algunas de la galería de JoesSistah, las cuales están bajo una licencia Creative Commons.

Con eso claro, vamos, manos a la obra:

1.- Lo primero que haremos será crear una base de datos en nuestro MySQL y en el una tabla llamada imagen, la cual contendrá 4 campos de información:

CREATE TABLE 'clh'.'imagen' ( 'id' INT NOT NULL AUTO_INCREMENT PRIMARY KEY , 'titulo' VARCHAR( 50 ) NOT NULL , 'descripcion' TEXT NOT NULL , 'archivo' VARCHAR( 20 ) NOT NULL ) ENGINE = InnoDB CHARACTER SET utf8 COLLATE utf8_unicode_ci

Repasando nuestro código anterior, lo que hemos hecho ha sido crear una tabla llamada imagen, la cual contiene 4 campos:

id: Contendrá un número identificatorio para cada imagen, lo hemos dejado con auto increment para que cada vez que se inserte un nuevo registro aumente automáticamente.

titulo: Contendrá el título de la imagen.

descripcion: Contendrá la descripción de la imagen.

archivo: Contendrá el nombre del archivo y su extensión para luego llamarlo desde nuestra galería.

2.- Luego que hemos creado la tabla, insertaremos información de 4 imágenes:

INSERT INTO imagen( titulo, descripcion, archivo ) VALUES ( 'Paisaje Numero 1', 'Imagen representativa de un paisaje con costa', '1.jpg') INSERT INTO imagen( titulo, descripcion, archivo ) VALUES ( 'Paisaje Numero 2', 'Imagen representativa de un paisaje con nieve', '2.jpg') INSERT INTO imagen( titulo, descripcion, archivo ) VALUES ( 'Paisaje Numero 3', 'Imagen representativa de un paisaje con una luna en el fondo', '3.jpg') INSERT INTO imagen( titulo, descripcion, archivo ) VALUES ( 'Imagen abstracta', 'Representacion de una mariposa', '4.jpg')

3.- Con eso debiésemos tener una tabla de la siguiente forma:

id titulo descripcion archivo

1 Paisaje Numero 1 Imagen representativa de un paisaje con costa 1.jpg

2 Paisaje Numero 2 Imagen representativa de un paisaje con nieve 2.jpg

3 Paisaje Numero 3 Imagen representativa de un paisaje con una luna en el fondo 3.jpg

4 Imagen abstracta Representacion de una mariposa 4.jpg

4.- Con nuestra tabla creada, y antes de empezar a codificar, haremos la preparación de nuestras imágenes. Para la galería, necesitaremos 3 tamaños de las mismas imágenes, 2 los fijaremos en imágenes distintas y 1 lo redimensionaremos vía CSS. Así que necesitaremos:

Tamaño normal de las imágenes para la vista completa. En este caso utilizamos 400px.

Tamaño reducido para los previews o thumbnails. En este caso utilizamos 150px.

Tamaño aún más reducido para los previews bajo la vista completa. En este caso utilizamos 75px. Este es el que ajustaremos vía CSS.

Los 2 primeros pueden hacerlo mediante su editor de imágenes favorito.

5.- Con todo aquello listo, procedemos a codificar. Nuestra galería contará de 2 archivos en formato PHP, uno donde desplegaremos un preview de las imágenes y añadiremos un pequeño efecto en jQuery para que estas aparezcan oscuras al cargar la página y que solo sean completamente visibles cuando el usuario pase el mouse por encima, y el otro funcionará como un visor de la imagen en tamaño completo, con su respectiva información y enlaces para imágenes siguientes y anteriores, así como otro preview de la misma galería en un tamaño más pequeño. Adicionalmente codificaremos un archivo en formato CSS para el estilo de la galería y un archivo en formato JS para nuestras funciones en jQuery. Así que resumiendo, los archivos que crearemos son:

index.php

visor.php

estilos.css

funciones.js

Vamos con el primero. Los comentarios como siempre, dentro del código:

index.php

/* Incluimos la hoja de estilos, la libreria jquery y nuestra libreria de funciones */ Galería de Imágenes

Mi galería de imágenes
query($consulta); // Desplegamos las imagenes con un enlace a su id while($filas = $resultado->fetch_array(MYSQLI_ASSOC)) { ?> " alt="imagen" />

En resumen, lo que hemos hecho en nuestro index.php, yendo paso a paso:

Incluimos la hoja de estilo, la librería jQuery y nuestra librería de funciones.

Conectamos a la base de datos y obtenemos toda la información de las imágenes que tenemos almacenadas.

Desplegamos las imágenes con un enlace hacia el visor y pasamos como parámetro el id de la imagen para luego obtener más información.

Y ahora continuamos con el visor, en donde podremos mostrar las imágenes en tamaño completo y con más información:

visor.php

query($consulta); $fila = $resultado->fetch_array(MYSQLI_ASSOC); /* Luego conectamos a la BD y obtenemos la primera y ultima id de imagen, para saber cuando se trata de la ultima y/o primera imagen de la galeria */ $consulta = "SELECT min(id) as minimo, max(id) as maximo FROM imagen"; $resultado = $conexion->query($consulta); $datos = $resultado->fetch_array(MYSQLI_ASSOC); ?> // Creamos el titulo de la pagina de acuerdo a la imagen Galería de Imágenes - <?php echo $fila['titulo'];?> // Incluimos la hoja de estilo y librerias
/* De lo contrario, mostramos una imagen indicando que no hay nada antes */ /* Desplegamos la imagen actual en tamaño completo con su respectiva descripcion */ " alt="" /> /* Comparamos la id actual a la mayor id de la tabla para saber si es la ultima imagen. Si no es igual mostramos un enlace para la imagen siguiente */ /* De lo contrario, mostramos una imagen indicando que no hay nada despues */ /* Establecemos un pequeño div para la informacion de la imagen. Cuando el usuario pase el mouse por encima, apareceran los datos (titulo y descripcion) */
Información de la imagen
/* Este div mostrara la informacion de la imagen. Por defecto lo dejaremos oculto mediante CSS y solo se mostrara al pasar el mouse sobre el */

Título:

Descripción:

/* Al igual que en index, mostraremos la galeria completa, solo que esta vez las imagenes seran mas pequeñas */

Mis otras imágenes
query($cons); while($filas = $res->fetch_array(MYSQLI_ASSOC)) { ?> " alt="imagen" />

Resumiendo el archivo anterior, lo que hicimos fue:

Obtuvimos la id enviada por parámetro para obtener la información de la imagen actual.

Obtuvimos la primera y última id de imágenes almacenadas para saber cuando tratamos con la primera y/o última imagen de la galería.

Cargamos la hoja de estilos y librerías.

Comparamos la id actual con la menor existente en la base de datos para saber si es la primera imagen de la galería. De ser así, mostramos una imagen que indica que no hay nada antes. De lo contrario, mostramos una imagen con un enlace a la imagen anterior.

Mostramos la imagen actual en tamaño completo.

Lo mismo que el punto 4, pero ahora con la última id y la imagen siguiente.

Creamos un div para la información de la imagen el cual permanecerá oculto hasta que el usuario pase el mouse por encima.

Ya con eso listo, nos falta declarar nuestras funciones en jQuery y nuestra hoja de estilos. Partiremos por las funciones:

funciones.js

$(function(){ /* Este es un efecto inicial sobre la galeria, en el cual decimos basicamente que cuando la pagina cargue, las imagenes se muestren mas oscuras y que al pasar el mouse por encima tomen su opacidad natural. Para esto utilizamos las funciones animate, hover y stop de jQuery. */ $('#galeria img').animate({ "opacity" : .5 }); $('#galeria img').hover(function(){ $(this).stop().animate({ "opacity" : 1 }); }, function(){ $(this).stop().animate({ "opacity" : .5}); }); /* Repetimos el mismo efecto para la galeria pequeña que mostramos en el visor */ $('#galeria-small img').animate({ "opacity" : .5 }); $('#galeria-small img').hover(function(){ $(this).stop().animate({ "opacity" : 1 }); }, function(){ $(this).stop().animate({ "opacity" : .5}); }); /* Ahora aplicamos la funcion para que cuando un usuario pase el mouse por encima del div con id masinfo, se despliegue la informacion del div info del visor. Esto lo haremos mediante las funciones hover, fadeIn y fadeOut de jQuery */ $('#masinfo').hover(function(){ $('#info').fadeIn(); }, function(){ $('#info').fadeOut(); }); });

En resumen, lo que hicimos aquí fue:

Creamos 3 funciones para que estén disponibles cuando la página cargue.

La primera agregará un efecto de opacidad sobre la galería que se desactivará cuando el usuario pose el mouse encima.

La segunda agregará el mismo efecto pero a la galería pequeña que añadimos al visor.

La tercera hará aparecer la información de la imagen cuando el usuario pose el mouse sobre el div ‘masinfo’ del visor y a su vez la hará desaparecer cuando mueva el mouse de ahí.

Y ahora nos queda la parte final, que es declarar los estilos:

estilos.css

body { background: black; color: white; font-family: Arial, Helvetica, sans-serif; width: 100%; margin: 0 auto; } #galeria{ width: 800px; margin: 0 auto; } #galeria img{ border: 1px solid white; padding: 1px; margin-right: 10px; margin-bottom: 10px; } #galeria-small{ width: 800px; margin: 0 auto; } #galeria-small img{ width: 100px; height: 100px; border: 1px solid white; } #contenedor{ width: 800px; margin: 0 auto; padding-top: 10px; } #imgcompleta{ border: 1px solid white; } a img{ border: none; } /* Este es el div con informacion de la imagen. Inicialmente cargara con display:none para que no sea visto a menos que el usuario pose el mouse encima */ #info { display: none; }

Y con eso tenemos nuestro resultado final:

Primera vista de la galería

La imagen toma su opacidad natural al pasar el mouse por encima

Vista completa de la primera imagen

Información de la primera imagen al pasar el mouse por encima del div de información

Vista completa de imagen que tiene una previa y una siguiente

Vista completa de la última imagen

Antes de terminar, y comprendiendo que este tutorial ha sido largo, integramos una nueva característica a estos tutoriales:

Y con eso damos por terminado este tutorial, recordándoles como siempre que ha sido:

Esperamos que haya sido de utilidad para Uds. Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.

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

Staff CLH

Cómo superponer contenido sobre una animación en Flash

Xabadu — Tue, 23 Feb 2010 00:20:28 +0000

Gracias al posicionamiento mediante CSS es posible controlar el lugar donde aparecerá cada uno de los elementos de nuestras páginas en la pantalla de los visitantes. Si bien con propiedades como float es posible acomodar con facilidad cada capa en un costado de la pantalla, hay una propiedad muy interesante que nos permite superponer distintos contenidos entre sí y de esta forma lograr un complejo efecto visual sobre animaciones, imágenes u otro tipo de contenidos que queramos desplegar.

Es por eso que hoy, en un nuevo tutorial que les trae CLH, estaremos viendo en detalle la propiedad z-index de CSS, la cual nos permite lograr lo antes descrito.

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

Cómo superponer contenido sobre una animación en Flash

Si bien lo que veremos hoy es bastante más generalizado que ‘Superponer contenido sobre una animación en Flash’, hemos decidido denominarlo de esa forma ya que es uno de los problemas más comunes que llevan a la profundización de esta propiedad. Sin embargo, lo expuesto hoy puede aplicarse para todo tipo de contenido, incluyendo imágenes, textos o menús de navegación entre otras cosas.

Con eso claro, vamos con lo primero:

Implementos necesarios:

Opcionalmente un editor Web. De cualquier forma de no utilizar alguno, se puede realizar el procedimiento mediante bloc de notas.

Antes de entrar de lleno al procedimiento, es bueno hacer una aclaración de conceptos. Como mencionábamos en la introducción de este tutorial, estaremos hablando de y trabajando con la propiedad z-index de CSS. Así que para los curiosos (como Topher) y los preguntones (como Dexter):

¿Qué es z-index?

La pregunta de la olla millonaria de caldos mag.. sin propaganda mejor clave de todo este asunto. Si nos remontamos a épocas antiguas, por alla por los tiempos estudiantiles de cada uno y hacemos un pequeño repaso por matemáticas, o más especificamente geometría análitica, es posible recordar aquellos temibles contenidos sobre el plano cartesiano, rectas, pendientes y demases.

Si hacemos más memoria aún, recordaremos que un factor común de esos contenidos era cuando nos hablaban sobre los puntos en el espacio y los ejes a los que pertenecían. Esos ejes, al menos en ese momento, eran principalmente 2: el eje x, el cual representaba la horizontalidad y el eje y, el cual representaba la verticalidad. Para los que le hayan hecho la cruz a la geometría posterior a eso.. (la cruz.. intersección de 2 puntos.. humor matemático y juego de palabras, que lindo ¿no?) y se hayan perdido el resto de la historia, existe además un tercer eje, el cual es conocido como eje z y representa la profundidad en el espacio. Esto se relaciona directamente a las 3 dimensiones en las que vivimos y vemos los seres humanos: horizontal (x), vertical (y), profundidad (z). Esta es la parte donde todos decimos “Oooohhhh” al ver como todo está conectado entre sí.

Computacionalmente el asunto no es muy diferente. La pantalla en donde vemos todo tipo de contenidos, desde recursos multimedia, archivos, aplicaciones, juegos, etc. opera con la lógica del plano, teniendo un eje horizontal y uno vertical, los cuales son representados por las resoluciones de pantalla (por ej. al hablar de una resolución de 1024×768 pixeles, estamos diciendo que en la pantalla vemos 1024 pixeles horizontalmente y 768 de forma vertical). A su vez acá también tenemos un plano z de profundidad, el cual si bien a simple vista no notamos, si existe. La mejor prueba para notarlo es ver que al momento de abrir una aplicación, el escritorio no desaparece, solo queda parcial o totalmente oculto por el nuevo contenido que se superpuso.

En diseño Web, o más especificamente en CSS, podemos manejar el tema de las profundidades de los contenidos que estamos desplegando. Esto lo hacemos mediante la propiedad z-index, la cual se encarga de asignar una posición de profundidad a cada contenido de acuerdo al valor que le demos. A mayor valor asignado a esta propiedad para un contenido, se irá superponiendo a cada contenido restante que tenga un valor menor. Al final, todos los contenidos irán formando una pila, de menor a mayor.

Para que un elemento pueda hacer uso de la propiedad z-index, debe siempre estar posicionado, ya sea absoluta o relativamente. Si el elemento no está posicionado, no podrá usarse la propiedad. Adicionalmente, si 2 elementos comparten el mismo z-index se posicionarán de acuerdo al orden que le hayamos dado en el documento HTML.

Con esa larga explicación lista, podemos empezar a trabajar en nuestro proyecto de hoy y ver como resulta todo:

Procedimiento:

Lo que haremos hoy será bastante simple. Crearemos un documento HTML en donde añadiremos un pequeño encabezado, el cual estará compuesto de una animación flash (en el fondo) y una barra en imagen (superpuesta a la animación) para luego insertar un menú de navegación. Junto a eso añadiremos un pequeño botón como detalle. Este botón podrá ser manipulado tal como si fuese una imagen normal, es decir, añadiéndole un enlace total o por mapa, viendo sus propiedades, copiando la ruta, etc. Lo mismo corre para el menú de navegación.

Entonces basicamente contaremos con 3 capas: una para la animación, otra para nuestra barra y menú de navegación y finalmente una que irá sobre todas las anteriores con el botón.

1.- Utilizaremos los siguientes elementos:

Una animación de fondo:

Un botón (para hacer botones, los invitamos a revisar este tutorial donde hemos cubierto el proceso por completo):

Y adicionalmente hemos creado una barra de color blanco (la cual por razones obvias no pondremos acá) de 1×60 px, la cual montaremos sobre la animación y modificaremos vía CSS.

Para no extender en demasía este tutorial, el menú de navegación lo incluiremos como texto plano, con el fin de ubicar donde iría el código final y como se posiciona en términos de profundidad con respecto a los otros elementos. Empezar a hacer el menú desde cero acá probablemente nos llevaría un buen rato y lo hemos visto en otros tutoriales, así que lo haremos de esta forma.

2.- Con nuestros elementos listos, prepararemos nuestro CSS, el cual definirá las propiedades a aplicar a cada parte del contenido:

body{ margin: 0; } #uno{ position: absolute; z-index: 1; width:100%; } #dos{ position: absolute; z-index: 2; background-image: url(barra.png); background-repeat: repeat; width: 100%; height: 60px; opacity: .50; -moz-opacity: .50; filter: alpha(opacity=50); margin-top: 10px; font-weight: bold; text-indent:20px; } #tres{ position:absolute; z-index: 3; margin-left:450px; }

Entonces ordenemos el cuento:

Cada id declarado (uno, dos y tres) corresponden a uno de los elementos que agregaremos (animación en el uno, barra y menú de navegación en el dos y botón en el tres). Los tres han sido posicionados de forma absoluta y se les ha asignado un z-index correlativo con el fin de que la animación salga al fondo, sobre ella la barra y el menú de navegación y sobre todos ellos el botón.

A su vez, la barra se ha agregado como fondo en el id dos, con el fin de escribir el texto sobre esta imagen de fondo y así poder aprovechar una imagen pequeña (1×60 px) y repetirla a lo largo del encabezado.

Adicionalmente hemos utilizado las propiedades opacity, -moz-opacity y filter para agregar transparencia a la barra y que no se vea solida en blanco, si no que nos permita ver el resto de la animación que está en el fondo.

Todo lo demás lo hemos acomodado mediante márgenes e indentaciones de texto para acomodar de acuerdo al diseño que teníamos en mente.

Ahora ojo, hemos hecho todos los posicionamientos con medidas fijas en pixeles, para efectos de demostración. Al momento de hacer diseños definitivos es bueno adaptarse a como se ha diseñado el sitio completo, especialmente si son diseños líquidos cuyas medidas están en porcentajes.

3.- Con el CSS listo, ahora crearemos un archivo HTML, en donde insertaremos div’s con el respectivo contenido, los cuales tomarán propiedades del CSS y se posicionarán como lo teníamos pensado originalmente. Entonces:

Ejemplo de superposicion

Inicio | Quienes Somos | Contacto

Guardamos todo y vemos en nuestro navegador favorito para observar el resultado final:

Como podemos ver en la imagen anterior, tenemos nuestra animación hecha en Flash en el fondo. Sobre ella se ha agregado la barra que creamos (repetida y con la opacidad alterada vía CSS). Sobre la barra nuestro menú de navegación y sobre todo ello el botón. Se ha ordenado tal como los valores que hemos dado a cada z-index.

Simple ¿no?. Así que en resumen:

¿Qué hemos aprendido hoy?

Mediante z-index podemos manejar la profundidad de varios elementos, aún cuando compartan el mismo espacio físico.

Para utilizar z-index, debemos posicionar los elementos de forma relativa o absoluta.

2 elementos pueden compartir el mismo z-index y serán mostrados de acuerdo al orden que se agregan.

Podemos superponer todo tipo de contenidos, así que a animarse y probar.

La geometría analítica está relacionada a como vemos y vivimos los humanos, y todo eso a como se grabó Avatar.

Y con eso damos todo por terminado hoy, recordándoles que como siempre, este tutorial ha sido:

Cualquier duda o comentario que tengan, no sean tímidos, los invitamos a dejarnos unas líneas a continuación. Somos buena onda para responder, lo prometemos

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 convertirse en un campeón de HTML – Parte 1

Xabadu — Thu, 11 Feb 2010 22:04:43 +0000

Volviendo a la vida después de unas extremadamente cortas vacaciones, al llegar a los cuarteles generales de CLH tuve la oportunidad de revisar nuestro siempre lleno buzón de peticiones. A medida que pasaba por los distintos correos, cartas, botellas de bebida vacías y postales que han echado ahí, nos fue posible ver un denominador común en el cual mucha gente nos preguntaba sobre el proceso de creación de sitios Web desde cero.

Si bien hemos cubierto distintos aspectos para diseñar sitios Web (como tutoriales de CSS, buenas prácticas y tips o funcionalidades específicas), a la fecha nunca nos habíamos sentado a redactar una guía sobre la base de todo: HTML. Pues bien, hoy daremos comienzo al que esperamos que sea un largo camino de tutoriales en los cuales veremos desde los conceptos más básicos de este lenguaje, pasando por todo lo necesario para poder codificar como un campeón.

El detalle, como siempre (o ‘as usual’ para nuestros amigos ángloparlantes), después del salto.

Cómo convertirse en un campeón de HTML – Parte 1

Al igual que en otras sagas que hemos hecho en el pasado como “Cómo aprender a programar y no morir en el intento” (la cual ya tendrá una parte 11, lo prometemos, paciencia) o “Cómo dominar CSS sin salir del escritorio” , este primer capítulo contendrá más teoría que práctica, algo que se irá revirtiendo a medida que vayamos avanzando. Sin embargo, intentaremos hacer algo distinto, que es fijar un ejercicio a modo de ejemplo al final de cada tutorial para que vayamos practicando desde el comienzo.

Implementos necesarios:

Un editor Web o en su defecto bloc de notas (ya entraremos en detalle en esto).

Un navegador Web (idealmente más de uno, ya veremos porque).

Contenidos:

¿Qué es HTML?

Tipos, versiones y sabores.

Estructura vs Estilo.

Estructura básica de un documento HTML.

Editores Web.

Ejercicio: Primera página en HTML.

Tenemos bastantes contenidos por delante, así que sin más que añadir, manos a la obra:

1.- ¿Qué es HTML?

Ahh.. nuestro viejo, querido (y hace poco actualizado) HTML. Si tuvieramos que definir una base estructural para todo lo que hoy vemos en sitios Web sería este lenguaje, y ya podremos ir viendo porque.

HTML (Hyper Text Markup Language – Lenguaje de marcas de hipertexto) es un lenguaje utilizado para la creación de documentos Web o páginas. Creado originalmente en la década de los 80 en el CERN (aunque sus primeras versiones vieron la luz recién en los 90), se define como un lenguaje de marcas que busca definir una estructura en los documentos Web que publicamos. Esto se hace mediante la definición de secciones dentro del documento (por eso define estructura), tales como encabezados, títulos, cuerpos, párrafos, etc. Adicionalmente cuenta con una serie de elementos para el ordenamiento correcto de la información como listas y bloques, así como permitir la inserción de elementos multimedia como imágenes, sonidos, animaciones, e incluso herramientas para interactuar con los usuarios como formularios.

Uno de los objetivos principales con la definición de este lenguaje, ha sido no solo entregar herramientas para la confección de un documento en particular, sino que también funcionalidades que nos permita enlanzar este documento a otros mediante enlaces, hipervínculos o hipertextos.

Desde su primera versión (1.0) hasta la más actual (HTML 5), se han ido incluyendo funcionalidades que permiten a este lenguaje interactuar con cada nueva tecnología Web que ha ido apareciendo a través de los años: desde inserción de hojas de estilo hasta incrustación de lenguajes de programación Web como PHP.

Si bien HTML es un lenguaje de estructura y no de programación propiamente tal, cuenta con varios elementos similares que pueden ser reconocidos y facilitan el aprendizaje para quienes conozcan otros lenguajes, como la semántica y la estructura de sus partes, lo que podrá ser apreciado a medida que se van desarrollando nuevos documentos.

La base de HTML radica en el uso de etiquetas para definir el inicio y término de una sección de un documento Web en particular. Estas etiquetas encierran el contenido que desplegaremos a través del navegador y cada una de ellas posee atributos y características que hacen que la información se muestre de cierta manera. A medida que vayamos desarrollando ejemplos podremos ver esto de forma más clara.

Antes de continuar, es bueno aclarar algunas preguntas frecuentes:

1.- ¿Qué formato tienen los documentos HTML?

Principalmente 2, aunque es 1 realmente ya que se trata del mismo. Los documentos HTML (que solo contengan este lenguaje y no otros incrustados) son de formato htm o html, el cual básicamente es el mismo y es reconocido de igual manera por los navegadores. La diferencia radica simplemente en que algunos sistemas operativos y sistemas de archivos más antiguos (como DOS y FAT respectivamente) no permitían extensiones de archivos de más de 3 letras.

2.- ¿Es necesario algún conocimiento previo antes de aprender HTML?

No. Si bien siempre ayuda tener conocimientos o nociones de otros lenguajes o del funcionamiento propiamente tal de la Web, no es un requerimiento, ya que es posible aprender y dominar HTML sin haber estudiado nada relacionado anteriormente. En mi caso personal, cuando empecé a diseñar sitios Web hace más de 10 años, HTML fue lo primero que aprendí sin tener ningún otro conocimiento al respecto (con suerte lo que era una URL), por lo que puedo dar fé de que es posible.

3.- ¿Cuál es el nivel de dificultad del lenguaje?

Relativamente bajo. Un alto porcentaje de las etiquetas que contiene el lenguaje son prácticamente autoexplicativas, y para las que no, con un poco de práctica y prueba/error basta para dominarlas. Dedicándole un poco de tiempo diario (nunca más de 1 hora), se puede tener un buen entendimiento y dominio del lenguaje en menos de 1 semana.

4.- Tengo mala memoria, ¿debo aprenderme todas las etiquetas?

En lo absoluto. HTML cuenta con un gran número de etiquetas, cada una con funcionalidades y atributos distintos, por lo que recordar exactamente cada una es una perdida de espacio en la cabeza. Sin embargo, si bien no es necesario recordarlas al pie de la letra, es esencial saber que hace cada una para tener un entendimiento completo de la estructura de un documento en particular. A medida que vamos tomando más experiencia, nos vamos apoyando en herramientas como editores Web, los cuales mediante interfaces gráficos nos ayudan a codificar de manera más rápida y óptima, dejando la codificación “a mano” para casos más específicos y corrección de errores.

5.- ¿Qué necesito para visualizar un documento HTML?

Un navegador Web. Los navegadores actuales están preparados para interpretar todas las etiquetas correspondientes a HTML, a excepción de versiones más antiguas que puedan no reconocer alguna funcionalidad de las versiones más recientes del lenguaje.

Hay mucho más que podríamos decir sobre HTML y su historia, pero no es la idea alargarnos en este tema cuando hay tanto aún por delante. A medida que vayamos avanzando iremos viendo uno que otro concepto interesante que pueda servirnos.

2.- Tipos, versiones y sabores

Si bien no hay en chocolate, vainilla ni Dr. Pepper, HTML cuenta con varias versiones, tipos y hasta una derivación que ya veremos.

Tal como hemos comentado, la primera versión de HTML, la 1.0, vió la luz por allá por los inicios de los 90. A la fecha se han lanzado 4 versiones adicionales, siendo la 5 la más reciente, cada una de las cuales ha añadido nuevos elementos y quitado o depreciado algunos de versiones anteriores. Las adiciones más notables y/o renombradas tienen que ver con la integración de nuevas tecnologías Web que han ido apareciendo desde entonces y las eliminaciones con respecto a un punto que veremos más adelante, que refiere a la definición más estricta de HTML como un lenguaje de estructura de documentos Web y no tanto de estilo.

Si bien ya vamos en la versión 5 de HTML, la más utilizada a la fecha sigue siendo la 4.01, ya que la primera fue lanzada hace poco tiempo y aún está en etapa de adaptación e integración por parte de los diseñadores y desarrolladores. Hoy es posible ver sitios en HTML 5, pero corresponden a la minoría, principalmente por lo indicado anteriormente y porque aún gente que posee navegadores más antiguos, los cuales no están preparados para interpretar algunas funcionalidades de la nueva versión.

Adicionalmente, existe una derivación del lenguaje, conocido como XHTML, el cual corresponde a una mezcla entre XML y HTML, con lo cual se aplica una variación y se define un lenguaje mucho más estricto con respecto a ciertas reglas, como por ejemplo el cierre correcto de cada sección y el no omitir etiquetas, algo que en HTML a veces es permitido. En próximas ediciones entraremos más en detalle en este tema, ya que por ahora no es necesario y alargaríamos aún más esta primera etapa.

3.- Estructura vs Estilo

Si bien es algo temprano para discutir esto, en lo personal lo considero un concepto tremendamente importante a aprender antes de entrar de lleno al lenguaje en sí. Siempre, cuando estamos aprendiendo a dominar una nueva tecnología, es de suma importancia entender cuales son los alcances reales y correctos de esta, especialmente porque es tremendamente común encontrar una serie de malas prácticas definidas que pueden llevarnos a errores más adelante.

Cuando HTML fue definido en un comienzo, siempre se pensó como un lenguaje de estructura para documentos Web, tal como lo hemos indicado anteriormente. Sin embargo, a medida que fue pasando el tiempo y los requerimientos comenzaron a evolucionar, se fue haciendo necesario contar con funcionalidades que permitieran estilizar las página para entregarle al usuario una experiencia más agradable. Con esto, se empezó a hacer común el uso de etiquetas como font face para definir el tipo de letra a utilizar en un texto, font color para definir su color o b, i, u para el formato del texto (negrita, cursiva y subrayado respectivamente).

A medida que estas etiquetas comenzaban a utilizarse más y más, se comenzó a apreciar que HTML dejaba de ser un lenguaje netamente de estructura y de a poco se convertía en un híbrido que mezclaba tanto la estructura como el estilo del documento, un propósito muy distinto para el que inicialmente se había ideado. Debido a esto es que lenguajes de estilo como CSS comienzan a potenciarse y las etiquetas antes mencionadas a depreciarse y dejar de ser soportadas por nuevos navegadores, devolviendo HTML a su propósito inicial, solamente preocuparse de la estructura y dejar que el estilo lo maneje un lenguaje específico definido para esto.

Resumiendo un poco lo anterior, es de suma importancia entender el concepto de lo que es HTML, un lenguaje creado para definir la estructura de documento Web y no su estilo. Es por esto que no debemos esperar o apuntar a utilizar etiquetas que nos ayuden a configurar formatos de visualización o estilos gráficos. Para eso existen otras herramientas y debemos tener claro cual es el alcance y el correcto uso de cada una de ellas.

4.- Estructura básica de un documento HTML

Un documento HTML tiene una estructura básica definida por etiquetas (encerradas entre los símbolos < y > para la apertura de una sección y para el cierre de la misma), cada una de las cuales demarca una sección del mismo:

Inicio del documento.

Cabecera.

Cuerpo del documento.

Cierre del documento.

Viendo en detalle:

a) Inicio del documento: Corresponde a la apertura oficial, donde le indicamos al navegador que se trata de un documento Web en formato HTML, por lo que debe proceder a interpretar las etiquetas para mostrar el contenido en pantalla. Este inicio se marca con la etiqueta .

b) Cabecera del documento: Indica toda la información relativa al documento, como su título y opcionalmente librerías externas y/o hojas de estilo que deseemos cargar de forma externa. La cabecera propiamente tal se encierra en las etiquetas y , llevando dentro de ellas como mínimo la correspondiente al título, la cual va entre y .

c) Cuerpo del documento: Es la sección principal del documento, en donde incluiremos todo el contenido que se desplegará en pantalla. Corresponde a las etiquetas y .

d) Cierre del documento: Tal como lo abrimos, debemos cerrarlo mediante la etiqueta .

O sea, un documento básico existe de la siguiente manera:

Titulo del documento Contenido del documento

Cada documento que creemos es importante guardarlo siempre en su nombre con minúsculas, ya que los navegadores son sensitivos a las mayúsculas y por eso, al momento de enlazar (algo que veremos más adelante) no reconoceran http://www.misitio.com/ejemplo.html si el archivo se llama Ejemplo.html, así que mucho ojo con eso.

5.- Editores Web

La gran manzana de la discordia, especialmente entre desarrolladores Web. Años atrás, cuando Netscape e Internet Explorer luchaban por el dominio entre los usuarios, Frontpage era el niño cool del barrio y comparábamos los modems de 33.6k y 54k, la mayoría de los editores Web que hoy conocemos no existían, y los que si estaban disponibles (como el maldito bendito Frontpage) eran bastante rudimentarios de utilizar, con una curva alta de aprendizaje y sin un beneficio real para quienes diseñaban o desarrollaban sitios Web. Es por esto que muchos (incluyéndome) hacían uso del buen y querido bloc de notas para codificar, ya que este permitía hacerlo de forma rápida, guardando en el formato necesario y sin utilizar muchos recursos (algunos luego empezaron a utilizar Word, pero ese ya es otro tema).

A medida que pasaron los años, grandes aplicaciones de edición Web comenzaron a aparecer, como es el caso de Dreamweaver, KompoZer, Nvu y Coda por nombrar algunos, los cuales comenzaron a integrar interfaces gráficos realmente amigables y simples de usar, lo que terminó por entregarle la posibilidad a los diseñadores de crear documentos Web de manera rápida y sencilla solo presionando algunos botones.

Hoy la oferta es amplia, hay para todo gusto y es algo realmente recomendable de usar, a pesar de que muchos desarrolladores acostumbrados a la época de antaño lo reprueben. Por eso nos tomamos el tiempo de entregar el consejo de buscar un buen editor Web que nos asista en la tarea y tomar provecho de todas las ventajas que nos ofrecen. Sin duda que hacen la tarea más fácil y nos permiten quemar pestañas en interfaces algo más agradables que simples editores de texto.

Si la posibilidad está a su alcance, hagan uso de esas herramientas. Asistan su proceso de creación y háganlo lo más sencillo posible, para que se preocupen de lo que realmente importa, que es la confección de buenos sitios y la generación de un aún mejor contenido.

Sobre cual elegir en particular, va en cada uno, lo que más nos acomode y esté a nuestro alcance. En lo personal me agrada tanto Dreamweaver para Windows como Coda para Mac. Lamentablemente ámbos tienen un costo bastante elevado, por lo que a veces es mejor optar por alternativas más económicas o de código abierto como Nvu o KompoZer. Lo más importante es encontrar el que mejor sirva para nuestros propósitos.

6.- Ejercicio: Primera página en HTML

Y llegamos a la sección con la que esperamos cerrar cada uno de los capítulos. Un pequeño ejercicio que nos sirva para aplicar todo lo que hemos aprendido en esta edición. Hoy veremos la creación de una sencilla primera página en HTML, para poder desplegarla en un navegador y empezar a experimentar a futuro con técnicas más avanzadas.

Para eso, abrimos nuestro editor Web favorito (o un editor de texto como bloc de notas) y escribimos el siguiente código, el cual como siempre, va con los comentarios respectivos:

// Abrimos el documento // Declaramos la cabecera // Agregamos el título Mi primer documento Web // Cerramos la cabecera // Declaramos el cuerpo // Llenamos con un párrafo
Un texto de ejemplo
// Cerramos el cuerpo // Cerramos el documento

Como pueden ver, utilizamos una nueva etiqueta que no habíamos visto:
. Esta etiqueta sirve para encerrar un párrafo de texto normal, lo que veremos en detalle en una próxima edición.

Por ahora con eso basta. Guardamos el documento con extensión .html y lo abrimos en un navegador para ver el resultado.

Y luego de ver toda esta introducción, algo de conceptos y un pequeño ejercicio, damos por terminada la primera edición de esta saga, la cual esperamos sea de utilidad para todos Uds. y que podamos hacer una gran cantidad de números en el futuro, para que podamos ver todo el detalle de este grandioso lenguaje llamado HTML.

Por ahora lo dejaremos hasta aquí, recordándoles que siempre es bueno comer chicle para la memoria y no masticar pasas, ya que hace muy mal… o bueno, algo así.

Como siempre, este tutorial ha sido:

Cualquier duda, comentario o si hay algún tema en especial que quieran ver a futuro, los invitamos a dejarnos unas líneas en el área habilitada a continuación.

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

Staff CLH

Cómo implementar donaciones vía PayPal

Xabadu — Tue, 26 Jan 2010 04:42:51 +0000

Hace algún tiempo nos llegó una petición sobre como incorporar un sistema simple de donaciones vía PayPal en un sitio Web cualquiera. Luego de investigar un poco al respecto, porque en verdad no sabíamos nada sobre el proceso propiamente tal, nos dimos cuenta que es bastante simple y rápido de hacer, ya que el propio PayPal se encarga de la mayor parte del proceso, dejando que nos preocupemos de lo más importante: personalizar y recibir el dinero que los usuarios nos quieran donar.

Hoy, en CLH, veremos como implementar este simple sistema de donaciones en nuestros sitios Web. Y lo veremos en detalle, como siempre, después del salto.

Cómo implementar donaciones vía PayPal

Como siempre, lo primero:

Implementos necesarios:

Una cuenta de PayPal.

Un sitio Web (e idealmente usuarios dispuestos a hacer donaciones )

Sin más que detallar, vamos, manos a la obra:

Procedimiento:

1.- Lo primero que debemos hacer es ir al sitio de PayPal, en donde deberemos ingresar si ya tenemos una cuenta, o de lo contrario registrarnos.

2.- Una vez que hayamos ingresado a nuestra cuenta, debemos ir a la pestaña Vender en su Web:

3.- En aquella sección, podremos ver en la parte inferior un cuadro de Funciones clave. Ahí debemos seleccionar Botones comprar ahora:

4.- Esto nos llevará a un formulario proporcionado por PayPal, el cual nos dejará configurar una serie de parámetros para crear un botón de “Comprar ahora”, a través del cual los usuarios podrán hacer una compra de un determinado producto (en nuestro caso donaciones), solo haciendo click en el:

Acá debemos hacer los siguientes ajustes:

5.- En la sección Aceptar pagos por, debemos cambiar la opción Productos por Donativos. Esto cambiará las opciones que viene más adelante en el formulario.

6.- En Nombre de organización o servicio ponemos nuestro nombre o el del sitio Web donde recibiremos las donaciones y en Id. del donativo podemos fijar un código especial para identificar esas donaciones (por ejemplo si estamos recibiendo dinero en PayPal desde ese sitio por otro concepto, es bueno diferenciar). Este último es opcional.

7.- Luego, en la sección Personalizar botón, podemos definir las características gráficas del botón que se mostrará en nuestro sitio, ya sea el que nos proporciona PayPal, o uno que podemos definir nosotros mismos a partir de una imagen. Hay una serie de opciones que podemos acomodar a nuestro gusto, por lo que recomendamos probar hasta encontrar la configuración ideal:

Al parecer ahora en Chile hablamos inglés.. Get it? -> !

8.- Finalmente definiremos la divisa (o moneda) en que recibiremos los aportes, así como si dejaremos a los usuarios definir cuanto donaran o si es una cantidad por defecto y como recibiremos las notificaciones de pago:

9.- Una vez que definimos todos los parámetros, debemos presionar el botón que dice Crear botón y nos llevará a una página en donde se nos entregará el código correspondiente al botón creado:

Este código debemos insertarlo en cualquier parte de nuestro sitio Web. De esta forma, cuando un usuario haga click en él, lo llevará a un interfaz de PayPal en donde se le preguntará cuanto desea donar y podrá hacerlo de forma rápida y sencilla.

Con lo que hemos visto ahora basta y sobra para hacer un sistema sencillo de donaciones para nuestro sitio Web. Sin embargo, antes de cerrar, veremos un pequeño truco que puede ser muy útil para darle un estilo especial a las donaciones.

Como es posible ver, el código que nos entrega PayPal no es más que un formulario con valores en campos ocultos y una imagen utilizada como botón. Los valores enviados como ocultos permiten definir a quien pertenece el botón de donación y ejecuta el script de PayPal para procesar los pagos. Lo bueno de esto, es que es posible enviar otros valores de forma oculta. Uno de los valores que se puede enviar, es return, el cual permite definir una página donde el usuario será llevado una vez que haga la donación. Esto es útil si queremos que el usuario siga navegando en nuestro sitio después de donar, así como también más comodo para el visitante, quien no querrá salir del área donde estaba originalmente. Para utilizar este valor, solo debemos incluir esta línea dentro del código anterior:

Aquí podemos diseñar una pequeña página con un agradecimiento por la donación o algo por el estilo. Sin duda que le dará un toque especial.

Ahora ojo. Este parámetro actualmente no figura de forma ‘oficial’ dentro de los botones de compra de PayPal, ya que se utilizaba anteriormente, por lo que no es seguro que siempre funcione. Nosotros lo probamos con 2 cuentas y funcionó sin problemas en una de ellas, en la otra no. Desconocemos realmente la razón, pero es bueno probar en caso de que sirva.

Y así de simple tenemos un pequeño sistema de donaciones vía PayPal para insertar en nuestros sitios Web en solo minutos. Es una forma muy práctica para recibir aportes de los usuarios que estén interesados en nuestros contenidos y sin duda que nos servirá.

Anees de terminar, 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.

Staff CLH

id	titulo	descripcion	archivo
1	Paisaje Numero 1	Imagen representativa de un paisaje con costa	1.jpg
2	Paisaje Numero 2	Imagen representativa de un paisaje con nieve	2.jpg
3	Paisaje Numero 3	Imagen representativa de un paisaje con una luna en el fondo	3.jpg
4	Imagen abstracta	Representacion de una mariposa	4.jpg