Como Lo Hago » CSS

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 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 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 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

Cómo optimizar tu sitio Web en 10 pasos

Xabadu — Tue, 24 Nov 2009 18:32:40 +0000

Cientos de miles de millones de horas más tarde, trasnoches al por mayor, litros y litros del buen café-café, dosis interminables de snacks y un sinfín de decisiones tomadas (¿Qué color? ¿Verde? ¿Rojo?) te han llevado al momento que tanto esperabas: El sitio está terminado y listo para el lanzamiento. A descansar ahora ¿no?, nada más lejos de la realidad.

Para todos aquellos que les gusta el diseño Web, trabajan en ello, o bien ambas, no hay mejor momento que cuando un sitio es terminado y se lanza. Sin embargo, junto con eso, se sabe que el trabajo no está ni cerca de terminar, ya que desde ese instante en adelante comienza el proceso interminable de la optimización y mejoramiento de lo que se ha hecho, lo cual, siendo bastante honestos, puede terminar siendo aún más exhaustivo e interminable que el proceso de diseño y desarrollo.

Pues bien, hoy en CLH, en nuestro continuo afán de hacer la vida un poco más sencilla, les traemos un sencillo top ten con algunos tips y trucos para que puedan optimizar sus sitios Web, para al menos partir con un poco de orientación en este largo y complejo camino.

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

Cómo optimizar tu sitio Web en 10 pasos

Nota: La optimización de un sitio Web es un proceso continuo y bastante extenso, que de seguro toma bastante más que los 10 pasos presentados a continuación. Sin embargo, les presentamos algunos de los que consideramos, en nuestra opinión, más esenciales para poder partir, y esperamos en un futuro traer algunos más.

En este tutorial, al ser de un tipo distinto que los normales, no necesitamos ningún tipo de implementos de forma requerida, quizás es recomendable algún editor Web para alguna de las tareas, pero ahí lo podrán apreciar en cada punto.

Lo que veremos hoy es un conjunto de buenas prácticas, consejos útiles y tips de mejora de rendimiento que nunca están demás.

Sin más que decir, vamos con nuestro top ten:

1.- Siempre declarar el DocType (y asegurarse que sea el correcto)

Este es un punto al que muchos, incluyéndome, en algunas ocasiones le hemos dado poca importancia, pero sin duda que la tiene. El declarar el DocType o tipo de documento es clave para permitir que los navegadores interpreten de forma correcta el código que tenemos en cada página, ya sea HTML o XHTML. Si bien al no declarar, existe la posibilidad de que en nuestro navegador se vea de forma correcta, esto no asegura que el código se interprete bien para cada usuario y será complejo al momento de validar.

La gran mayoría de los editores Web (como Adobe Dreamweaver), agregan el DocType de forma automática, por lo que no hay que preocuparse. Sin embargo, nosotros lo podemos añadir de forma manual, siempre al inicio del documento, es decir, antes de la etiqueta . Los 4 más recomendados de utilizar (siempre que no estemos trabajando con HTML 5), son:

La diferencia de utilizar una de las 4 formas anteriores depende primero de si estamos utilizando HTML o XHTML para codificar (las 2 primeras para HTML y las 2 últimas para XHTML) y de si estamos utilizando la versión Strict o la Transitional del lenguaje. La diferencia de lo último depende si queremos permitir el uso de etiquetas que estén descontinuadas de versiones anteriores del lenguaje (Strict no permite, Transitional si). Más allá de eso, cualquiera de las 4 es correcta.

2.- Nunca estilizar dentro de las etiquetas

Esto corresponde a una buena práctica, y si bien es un comportamiento adoptado y adaptado por la gran mayoría de diseñadores Web, siempre hay por ahí algún caso que cae en el error, por lo que es bueno recordarlo.

Con la popularización de CSS, y la descontinuación de etiquetas de estilo (como font face) en HTML, se buscaba hacer una separación completa y absoluta entre el estilo de los documentos Web y su estructura, por lo que al aplicar un estilo dentro de una etiqueta en particular caemos en lo que tanto se ha intentado evitar. Para muestra, un botón (aunque no es un botón realmente, sino que más un ejemplo):

Esto es incorrecto:

Texto de ejemplo

Esto es correcto:

En una hoja de estilo externa, declarar:

p{
color:black;
font-family:Arial;
}

O bien, en la misma hoja de estilo externa, declarar:

.estilo1{
color:black;
font-family:Arial;
}

Y luego, en nuestro HTML:

Texto de ejemplo

De esta forma, separamos completamente la estructura del estilo, realizandolo de forma correcta y ahorrándonos bastante tiempo al momento de hacer modificaciones.

3.- CSS al comienzo, Javascript al final

Este es un error en el que personalmente he caído bastante, con las librerías en Javascript, pero vamos por parte:

Lo recomendable para las hojas de estilo externas en CSS es siempre cargarlas al inicio del documento, entre las etiquetas y . Esto nos asegura tanto una carga más rápida de la página propiamente tal, como asegurar que siempre los estilos se carguen junto al documento y no luego de que se ha cargado el contenido, ya que si el usuario detiene la carga de la página, o su conexión se cae, se desplegará el contenido sin ningún estilo aplicado, entregando una experiencia visual bastante mala.

Lo correcto es:

Mi sitio Web

Por otro lado, las librerías en Javascript es todo lo contrario. Lo recomendable en este caso es incluirlas al final del documento, para que las cargas las realice cuando el contenido ya se depliegue en pantalla. ¿Por qué?, porque normalmente un documento Web no se seguirá cargando mientras una parte de el no se termine de cargar (enredado ¿no?). Considerando que las librerías en Javascript pueden llegar a tener un tamaño mayor al mismo documento, es muy probable que la carga se tome algunos instantes para poder seguir, por lo que a no ser que sea estrictamente necesario (por ej. si una librería determina como se despliega el sitio en si), lo más conveniente es cargarlas al final, y de esta forma presentarle el contenido al usuario lo más rápido posible para que este pueda empezar a navegar, sin necesitar que se cargue todo el documento.

Un ejemplo sería así: