Como Lo Hago » Javascript http://www.comolohago.cl Si se puede, te lo enseñamos Tue, 10 Jan 2012 16:56:56 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Cómo hacer un gadget en Windows 7 http://www.comolohago.cl/2010/08/09/como-hacer-un-gadget-en-windows-7-2/ http://www.comolohago.cl/2010/08/09/como-hacer-un-gadget-en-windows-7-2/#comments Tue, 10 Aug 2010 02:22:32 +0000 Cri http://www.comolohago.cl/?p=3803

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
  1. Aprender HTML
  2. Aprende CSS

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.
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>ComoLoHago mi primer gadget</title>
<!– Para llamar a nuestros Settings.js del gadget –>
<script type=”text/javascript” src=”MiGadget.js”></script>
<style type=”text/css”>
/*/ El cuerpo de nuestro Gadget /*/
body
{
width: 330px;
height: 450px;
font-family: verdana;
font-weight: lighter;
margin:0px;
font-size: 10px;
overflow-x:hidden;
overflow-y:auto;
background-color:#333333;
scrollbar-face-color:#444444; /*/ Color del cuadro /*/
scrollbar-arrow-color:#999999; /*/ Color de la flecha de nuestro scroll /*/
scrollbar-track-color:#333333;  /*/ Color de la vía donde se mueve el scroll /*/
scrollbar-highlight-color:#444444; /*/ Si queremos color desde un ángulo /*/
scrollbar-darkshadow-color:#444444; /*/Color opuesto al lugar al Highlight-Color /*/
scrollbar-shadow-color:#444444; /*/ Si queremos sombra /*/
scrollbar-3dlight-color:#444444;  /*/ Si queremos color de luz 3d /*/
}
#ContenidoDeMiGadget
/*/Aqui se encuentra parte del contenido que se alimentará dentro de nuestro gadget/*/
{
width: 318px;
margin-left:1px;
height:100px;
vertical-align: middle;
text-align:center;
background-color:#333333;
}
/*/ Este es el codigo especial para poder editar todo dentro del contenido rss /*/
/*/ ya sea colores de letras, colores de fondo, bordes, etc/*/
/*/1-Con esto le indicamos al contenido el ancho que ocupará/*/
.rssxpresschannel { width:318px; font-family: Verdana; }
.rssxpresstable {height:200px; width:318px;}
/*/2-Con esto le indicamos al subtitulo “Sí se puede, te lo enseñamos” lo que queremos/*/
.rssxpresschdesc {font-size:10px; background-color:#333333; color:99BBFF; font-style:italic;}
/*/3-Con esto le indicamos al título “Como Lo Hago” lo que queremos/*/
.rssxpresschtitle {font-size:12px; font-family:Arial; color:#99BBFF; background-color:#333333; background-position:right; background-image:url(logo.png); background-repeat:no-repeat; height:69px; width:88px;margin-top:10px;}
/*/4-Con esto le indicamos al título de cada tema lo que queremos/*/
.rssxpressittitle {font-size:10px; margin-right:5px; background-color:#333333; border-top-style:inset; border-top-color:#999999; border-width:thin; }
/*/5-Con esto le indicamos a la descripcion de cada contenido lo que queremos/*/
.rssxpressitdesc {font-size:10px; background-color:#333333; color:#FFFFFF; margin-top:5px; margin-bottom:5px; font-weight:lighter; }
A:link {text-decoration:none;color:#99BBFF;}
A:visited {text-decoration:none;color:#99BBFF;}
A:active {text-decoration:none;color:#99BBFF;}
A:hover {text-decoration:none;color:#00BBFF;}
</style>
</head>
<b style=”margin-left:210px” style=”color:#555555″>ComoLoHago v1.0</b>
<body>
<!–Contenido de mi gadget–>
<div id=”ContenidoDeMiGadget”>
<!–Script alimentador del contenido Rss–>
<script src=”http://rssxpress.ukoln.ac.uk/lite/viewer/?rss=http%3A%2F%2Fwww.comolohago.cl%2Ffeed”></script>
</div>
</body>
</html>
  • Settings.html: Contiene el código para los ajustes de nuestro Gadget.
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<style type=”text/css”>

body
{

/*/ ancho y alto de nuestro menu de ajustes /*/
width:300px;
height:250px;
}

/*/un poco de CSS /*/
#L_settingsTitle
{
font-family:Arial;
font-size:15px;
color:#FF0000;
}

#L_settingsTitleLabel
{
font-family:Arial;
font-size:8px;
font-style:italic;
color:#000000;
}

</style>

<script type=”text/javascript” src=”MiGadget.js”> </script>

</head>

<body>
<p>Aqui agregan su contenido</p>
</body>
</html>

  • 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.
<?xml version=”1.0″ encoding=”utf-8″ ?>
<gadget>
<name>CómoLoHago – Novedades</name>
<version>1.0</version>
<author name=”CómoLoHago Team”>
<info url=”www.ComoLoHago.cl” />
</author>
<copyright>&#169; CómoLoHago 2010</copyright>
<description>Novedades acerca de tutoriales nuevos en tu escritorio</description>
<icons>
<icon height=”48″ width=”48″ src=”icono.png”/>
</icons>
<hosts>
<host name=”sidebar”>
<autoscaleDPI>true</autoscaleDPI>
<base type=”HTML” apiVersion=”1.0.0″ src=”MiGadget.html” />
<permissions>Full</permissions>
<platform minPlatformVersion=”1.0″ />
<defaultImage src=”imagenarrastrada.png”/>
</host>
</hosts>
</gadget>

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

]]> http://www.comolohago.cl/2010/08/09/como-hacer-un-gadget-en-windows-7-2/feed/ 14 Cómo utilizar la API de Google Maps http://www.comolohago.cl/2010/08/08/como-utilizar-la-api-de-google-maps/ http://www.comolohago.cl/2010/08/08/como-utilizar-la-api-de-google-maps/#comments Sun, 08 Aug 2010 19:08:10 +0000 Xabadu http://www.comolohago.cl/?p=3795

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.

toolsImplementos 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 <script>, la llamada a la API, incluyendo los parámetros y la clave. Esto, dentro del encabezado del HTML.

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAHhzikxCQyRAS8ryQoB75mRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQiqBRnE1Iky5sZfKGxzYbUanZ0HA" type="text/javascript"></script>

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:

<script type="text/javascript">

function inicializar() {

    if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 15);
    }
}

</script>

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.

<div id="map" style="width:600px; height:600px">
<script type="text/javascript">inicializar();</script>
</div>

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 = '<b>Texto ejemplo</b><br/>Para tutorial de CLH<br />';
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:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ejemplo de uso - API Google Maps - CLH</title>

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAHhzikxCQyRAS8ryQoB75mRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQiqBRnE1Iky5sZfKGxzYbUanZ0HA" type="text/javascript"></script>
<script type="text/javascript">

function inicializar() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(-33.43795,-70.603627), 15);
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
//map.addOverlay(new GMarker(new GLatLng(-33.43795,-70.603627)));

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 = '<b>Texto ejemplo</b><br/>Para tutorial de CLH<br />';
var marca = informacion(ubicacion, descripcion);

map.addOverlay(marca);

}
}

</script>

</head>
<body>
<div id="map" style="width:600px; height:600px">
<script type="text/javascript">inicializar();</script>
</div>
</body>
</html>

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

]]> http://www.comolohago.cl/2010/08/08/como-utilizar-la-api-de-google-maps/feed/ 24 Cómo crear un formulario de contacto – Versión 2.0 http://www.comolohago.cl/2010/05/29/como-crear-un-formulario-de-contacto-version-2-0/ http://www.comolohago.cl/2010/05/29/como-crear-un-formulario-de-contacto-version-2-0/#comments Sun, 30 May 2010 02:16:33 +0000 Xabadu http://www.comolohago.cl/?p=3557

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.

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

  1. Código HTML – Armado del formulario.
  2. Código CSS – Estilización del formulario.
  3. Código jQuery/Javascript – Validaciones.
  4. Código PHP – Envío de información.

1.- Código HTML

El armado del formulario es bastante estándar:

<div id="container">
  <form name="formulario" id="formulario" method="post" action="envio.php">
    <fieldset><h2>Contacto</h2></fieldset>

 <div>
 <label for="nombre">Nombre: </label>
 <input type="text" name="nombre" id="nombre" size="60">
 <span id="validar-nombre"></span>
</div>

 <div>
  <label for="correo">Correo:</label>
 <input type="text" name="correo" id="correo" size="60"/>
 <span id="validar-correo"></span>
 </div>

<div><label for="sitio">Sitio Web:</label>
 <input type="text" name="sitio" id="sitio" size="60"/>
 <span id="validar-sitio"></span>
</div>

 <div>
 <label for="mensaje">Mensaje: </label>
 <textarea name="mensaje" id="mensaje" rows="10" cols="56"></textarea>
 <span id="validar-mensaje"></span>
 </div> 

 <p id="envio">
 <input type="submit" name="enviar" id="enviar" value="Enviar" />
 </p>    

</form>
 </div>

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('<p>* Obligatorio</p>');

 });

 $('#nombre').blur(function(){

     $('.advertencia').remove();

     valor = $('#nombre').val();

     if(valor != '') {
         $('<img src="imagenes/accept.png" id="resultado-nombre" />').appendTo('#validar-nombre');
     }
     else {
         $('<img src="imagenes/delete.png" id="resultado-nombre" />').appendTo('#validar-nombre');
     }

 });

 $('#correo').focus(function(){

     $('#resultado-correo').remove();
     $('#validar-correo').append('<p>* Obligatorio</p>');

 });

 $('#correo').blur(function(){

     $('.advertencia').remove();

     valor = $('#correo').val();

     if(valor != '') {

       if(validaCorreo(valor)){

          $('<img src="imagenes/accept.png" id="resultado-correo" />').appendTo('#validar-correo');
          var valido = true;

       }
      else {
          $('<span id="resultado-correo">Correo no valido</span>').appendTo("#validar-correo");
      }
    }
    else {
         $('<img src="imagenes/delete.png" id="resultado-correo" />').appendTo('#validar-correo');
    }

 });

 $('#sitio').focus(function(){

     $('#validar-sitio').append('<p>* Opcional</p>');

 });

 $('#sitio').blur(function(){

      $('.advertencia').remove();

 });

 $('#mensaje').focus(function(){

      $('#resultado-mensaje').remove();
      $('#validar-mensaje').append('<p>* Obligatorio</p>');

 });

 $('#mensaje').blur(function(){

     $('.advertencia').remove();

     valor = $('#mensaje').val();

     if(valor != '') {
          $('<img src="imagenes/accept.png" id="resultado-mensaje" />').appendTo('#validar-mensaje');
     }
     else {
        $('<img src="imagenes/delete.png" id="resultado-mensaje" />').appendTo('#validar-mensaje');
     }

 });

 $('#enviar').click(function(){

       if($('#nombre').val()!= '' && $('#correo').val()!='' && $('#mensaje').val()!='' && valido) {

         $('.advertencia').remove();

         $('#envio').append('<img src="imagenes/ajax-loader.gif" alt="Procesando envio" id="cargando" />');

         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('<span id="respuesta">' + resultado + '</span>');
               $('#cargando').fadeOut(500, function() {
                   $(this).remove();
               });

           }
       });

       return false;

   }
   else {
       $('#envio').append('<span>Debe completar los datos requeridos.</span>');
       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

<?php

 /* Recepcionamos los datos enviados asincrónicamente */

 $nombre = $_POST['nombre'];
 $correo = $_POST['correo'];
 $sitio = $_POST['sitio'];
 $mensaje = $_POST['mensaje'];

 /* Definimos el correo donde enviaremos el mensaje y el asunto */

 $destino = "correo@ejemplo.com";
 $asunto = "Contacto sitio Web";

 /* Definimos el formato del mensaje a enviar */

 $cuerpo = "<strong>Nombre: </strong>".$nombre."<br />
 <strong>Correo: </strong>".$correo."<br />
 <strong>Sitio Web: </strong>".$sitio."<br />
 <strong>Mensaje: </strong>".$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&eacute;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

]]> http://www.comolohago.cl/2010/05/29/como-crear-un-formulario-de-contacto-version-2-0/feed/ 34 Cómo optimizar tu sitio Web en 10 pasos http://www.comolohago.cl/2009/11/24/como-optimizar-tu-sitio-web-en-10-pasos/ http://www.comolohago.cl/2009/11/24/como-optimizar-tu-sitio-web-en-10-pasos/#comments Tue, 24 Nov 2009 18:32:40 +0000 Xabadu http://www.comolohago.cl/?p=2476 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 <html>. Los 4 más recomendados de utilizar (siempre que no estemos trabajando con HTML 5), son:

<!DOCTYPE HTML PUBLIC  “-//W3C//DTD HTML 4.01//EN” “http://www.w3c.org/TR/html4/strict.dtd”>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3c.org/TR/html4/loose.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

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:

<p style:=”color: black; font-family:Arial;”>Texto de ejemplo</p>

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:

<p class=”estilo1″>Texto de ejemplo</p>

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 <head> y </head>. 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:

<head>
<title>Mi sitio Web</title>
<link rel=”stylesheet” type=”text/css” href=”estilos.css” media=”screen”>
</head>

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

</div>
<script type=”text/javascript” src=”libreria.js”>
</body>
</html>

La librería se cargara de cualquier forma, pero se le dará una mayor prioridad al contenido y estilo de la página.

4.- Estilizar para cada navegador

Esta es una frase que debiésemos grabarnos a fuego. Todos los navegadores despliegan documentos Web de forma diferente. Es uno de los grandes problemas que nos cuesta comprender, especialmente cuando estamos empezando. Debido a que todos los navegadores son distintos, han sido codificados por empresas diferentes, usan motores que no son iguales a otros (excepto navegadores de la misma familia, como Firefox y Flock), el contenido, o más bien el estilo de este, es interpretado de distintas formas por cada uno de ellos.

Como tal, junto con asegurarnos de siempre probar nuestros diseños en todos los navegadores posibles (nunca podremos asegurar compatibilidad completa con todos, pero si debemos cubrir los más comunes), es esencial definir hojas de estilo para cada uno de ellos e indicarle al documento que junto con detectar el navegador, cargue el estilo correspondiente. El mayor problema es comunmente Internet Explorer, ya que hay muchos estilos que no reconoce, especialmente entre sus distintas versiones (6, 7 y 8 ), por lo que podemos hacer lo siguiente. Dentro de nuestra inclusión de hojas de estilo, añadimos una pequeña excepción para que si el navegador es IE, cargue la hoja de estilo correspondiente:

<!– [if lte IE 7]>
<link rel=”stylesheet” media=”screen” type=”text/css” href=”estiloie7.css”>
<!– [endif]–>

El código anterior indica que si el navegador es IE 7 o alguna versión inferior, entonces cargue la hoja de estilo correspondiente. Esto lo definimos con el parámetro lte, el cual significa less than or equal (menor a o igual a). En caso de solo querer cubrir versiones anteriores a IE 7, cambiamos el parámetro por lt.

5.- En lo posible, cargar todo localmente

Hoy en día, con toda la información disponible en Internet, es posible para los diseñadores y desarrolladores Web contar con un gran número de librerías de acceso libre y gratuito para utilizar en sus sitios. Sin embargo, muchas de estas librerías requieren ser cargadas desde sitios Web de terceros, lo que inevitablemente aumentará el tiempo final de carga de nuestro sitio y por ende empeorará la experiencia del usuario.

Es por esto, que en lo posible, lo recomendable es tener todas, o el mayor número posible, de librerías y hojas de estilo en el mismo servidor donde está el sitio, para que la carga se haga de forma local y mucho más rápida.

6.- Añadir descripciones a las imágenes

Un detalle comunmente pasado por alto son los atributos de descripciones a las imágenes que incluímos en nuestros sitios Web. Si bien al no añadirlas nada sucede y el contenido se despliega de forma correcta, si es necesario incluirlas para efectos de mejorar la accesibilidad de cada página y para el momento de la validación del código. Es importante recordar que los sistemas de navegación para no videntes reconocen este atributo de las imágenes para explicar el tipo de contenido que está ahí, así que a no olvidarlo:

Esto no es correcto:

<img src=”imagen.jpg”>

Esto es correcto:

<img src=”imagen.jpg” alt=”Una imagen cualquiera”>

Adicionalmente, hay algunos navegadores que en vez del atributo alt, reconocen title, por lo que nunca está demás agregar ambos.

7.- Nunca olvidar cerrar cada etiqueta

HTML o XHTML, es 100% acerca de tener una estructura ordenada y definida en cada documento. Y como tal, siempre debemos asegurarnos de que cada etiqueta que abramos, sea cerrada. No importa si los navegadores obvien en algunas ocasiones este tema, es nuestro deber asegurarnos que todo esta abierto y cerrado como y cuando corresponde. De esta forma, nuestro sitio validará de mejor forma y nos haremos un gran favor al momento de realizar edición de código o bien si estamos realizando un trabajo colaborativo, para que otras personas sepan siempre donde empieza y donde termina cada parte del documento.

Esto no es correcto:

<p> Un párrafo de texto
<p> Otro párrafo de texto
<p> Y otro más

Esto es correcto:

<p> Un párrafo de texto </p>
<p> Otro párrafo de texto </p>
<p> Y otro más </p>

Con XHTML además, tenemos la posibilidad de cerrar la etiqueta en la misma de apertura y es considerado una práctica correcta:

<br /> -> Una etiqueta abierta y cerrada.

8.- Favorecer PNG por sobre JPG, y el entrelazado

Este corresponde más a un tip gráfico que Web, pero considerando que normalmente incluímos un gran número de imágenes en nuestros sitios Web, no está demás remarcar.

El formato más común para tratar imágenes es JPG, es de los más utilizados, pero no por eso el mejor. La verdad es que cada vez que manipulamos una imagen en formato JPG, ya sea al abrirla, editarla, cambiarla de tamaño, añadirle algo encima, o lo que sea y la volvemos a guardar, esta va perdiendo calidad, y así sucesivamente cada vez que trabajemos sobre ella, por lo que si estamos realizando constantes modificaciones, después de un tiempo la imagen será de una calidad notablemente inferior a la original.

Por esto es recomendable el uso de PNG, que es un formato que se encarga de mantener la calidad a través de los distintos cambios, algo a tener muy en cuenta, especialmente si trabajamos con imágenes de gran resolución o si son nuestra fuente primaria de trabajo (por ej. si tenemos un sitio con un portafolio de trabajos gráficos).

Adicionalmente a esto, al utilizar PNG, una técnica bastante buena para utilizar en imágenes que vayamos a desplegar en la Web, es guardarlas con entrelazado. ¿Qué significa esto?, bastante simple. El entrelazado añade características a la imagen para que esta se cargue de forma distinta a que si se guardara convencionalmente.

Por ejemplo, si tenemos una imagen sin entrelazado y la insertamos en un documento Web, la carga de esta se realizará de forma vertical, de arriba hacia abajo. Con esto, si la conexión es lenta, o la imagen muy grande, se irá viendo como se carga, trozo por trozo, de arriba hacia abajo.

Por otra parte, con el entrelazado, la modalidad de carga cambia, y en vez de realizarse de forma vertical como el caso anterior, esta se va realizando por capas, desde el fondo hasta el frente de la imagen, cargando en una primera etapa la imagen completa, viéndose como si estuviese pixeleada y eventualmente cargando capa tras capa encima de esta, de cierta forma despixeleándose. Con esto, el contenido de la imagen puede ser apreciado antes que termine de cargarse, y por lo general se muestran de forma mucho más rápida que de forma convencional.

9.- Tablas para los datos, nunca para el diseño

Cuando empecé a meterme de lleno en el diseño Web, hace unos 10 años, la mayoría de los sitios eran diseñados utilizando 2 técnicas: Frames o marcos y con tablas.

Ámbos métodos eran bastante útiles, ya que permitían hacer una organización del contenido de forma sencilla y bastante rápida y ordenada. Por una parte los frames nos permitían separar el sitio en secciones y trabajar cada una de ellas mediante archivos independientes y por otra, las tablas, nos permitían definir una estructura segmentada y ordenada mediante filas, columnas y celdas, detallando contenido en ellas tal como si fuese un rompecabezas.

Sin embargo, con el tiempo y evolución que ha tenido HTML, hace bastante que no es visto con buenos ojos definir el diseño de un sitio mediante alguna de estas 2 técnicas, y es recomendable hacer el uso de bloques (o div’s) para hacer el diseño propiamente tal, utilizando posicionamientos en CSS  y dejar las tablas solamente para presentar información tabulada.

Sin duda que el dominar de forma correcta el uso de bloques puede ser tremendamente complejo al compararlo con lo que hacíamos mediante tablas, pero a medida que se va teniendo un mejor entendimiento de como funcionan es posible alcanzar un mejor grado de ubicación de cada componente, así como un orden ideal.

Es por esto que si sus sitios están actualmente diseñados bajo una estructura de tablas, es recomendable empezar a actualizar los conocimientos y hacer los traspasos necesarios, todo con el fin de tener un sitio mejor adaptado a lo que hoy es considerado correcto.

10.- Validar, validar y luego seguir validando

Dejamos al final un punto que tiene tanta o más importancia que los anteriormente mencionados, que es el tema de la validación.

Cuando hablamos de validar un sitio, nos referimos a inspeccionarlo con el fin de determinar que toda la codificación haya sido hecha de forma correcta, y de esa forma asegurarnos que cada navegador verá exactamente lo que queremos mostrar. De esta forma podemos asegurarnos que los usuarios tendrán una buena experiencia visualizando el sitio y también ayudaremos a que los buscadores indexen de mejor forma en sus resultados.

Para validar tenemos varias opciones, como por ejemplo:

  • La primera, y más utilizada, es el validador oficial de la W3C, en el cual al ingresar la URL de nuestro sitio nos entregará un detalle de cualquier problema que haya.
  • Existen complementos para navegadores que nos ayudan en la tarea, como es el caso de Web Developer y Firebug para Firefox.

Adicionalmente existen otros sitios que validan nuestro código, pero con lo anterior podrán hacerlo sin problemas.

Y con este último punto damos cierre a esta práctica guía para optimizar tu sitio Web en tan solo 10 pasos. Al ir terminando nos hemos dado cuenta de algunos importantes que se nos quedaron fuera y que es importante recalcar, por lo que probablemente en un futuro cercano haremos una continuación sobre este tema, que sin duda a muchos les servirá.

Por ahora lo dejamos hasta aquí, recordando como siempre que este tutorial ha sido:

Cualquier comentario o duda 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

]]> http://www.comolohago.cl/2009/11/24/como-optimizar-tu-sitio-web-en-10-pasos/feed/ 9 CLH Express: Compresión CSS/Javascript, Feedburner, Blogger, Firefox, Pdf’s y más Pdf’s http://www.comolohago.cl/2009/11/14/clh-express-compresion-cssjavascript-feedburner-blogger-firefox-pdfs-y-mas-pdfs/ http://www.comolohago.cl/2009/11/14/clh-express-compresion-cssjavascript-feedburner-blogger-firefox-pdfs-y-mas-pdfs/#comments Sun, 15 Nov 2009 00:38:02 +0000 Xabadu http://www.comolohago.cl/?p=2415 clh-expressContinuando con la sección que hace poco dimos por inaugurada, hoy cubriremos algunos tips y peticiones pequeñas que han llegado al buzón oficial de CLH. Desde incrustar archivos PDF en un sitio Web, hasta comprimir nuestras hojas de estilo y utilizar Feedburner en blogs de Blogger, los invitamos a conocer el detalle, como siempre, después del salto.

CLH Express: Compresión CSS/Javascript, Feedburner, Blogger, Firefox, Pdf’s y más Pdf’s

Les recordamos que si nos quieren hacer llegar sus peticiones, solo deben contactarnos en la sección correspondiente de nuestro sitio.

En el CLH Express de hoy:

  1. Cómo incrustar archivos PDF en un sitio Web.
  2. Cómo utilizar Feedburner en Blogger.
  3. Cómo comprimir nuestros CSS y Javascript.
  4. Cómo evitar el refresco automático de Firefox.
  5. Cómo convertir de PDF a Excel.

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

1.- Cómo incrustar archivos PDF en un sitio Web

Cuando hablamos de incrustar, nos referimos a la funcionalidad de reproducir un contenido dentro de otro, el cual puede ser del mismo tipo o bien distinto. La gracia de todo esto, es lograr un impacto mínimo a los ojos del usuario, con el fin de que se vea una integración casi nativa entre las 2 partes.

Es común que hoy en día en nuestros sitios Web ofrezcamos documentos en formato PDF, los cuales pueden ser descargados por los visitantes o bien abiertos en el mismo navegador en una nueva pestaña o ventana.

Pero, ¿qué pasa si queremos que el usuario pueda visualizar el documento sin dejar nuestro sitio?, es aquí donde la incrustación juega un papel vital. Hoy en día, gracias a Google Docs, la visualización de archivos PDF se ha vuelto realmente cómoda y natural, por lo que podemos aprovecharla y utilizarla desde nuestro propio sitio, para obtener las claras ventanas.

¿Cómo lo haremos?, bastante simple. Sólo debemos crear un documento HTML para nuestra Web (si es que no tenemos uno ya) y crear un iframe en el, desde el cual cargaremos la URL del visor de PDF de Google Docs y a este le indicaremos, mediante un parámetro, que cargue nuestro archivo PDF. El código queda de la siguiente forma:

<iframe src=”http://docs.google.com/gview?url=direccion de nuestro archivo PDF&embedded=true” style=”width:ancho del visor; height:alto del visor;” frameborder=”0″></iframe>

Por ejemplo, si quisiéramos mostrar en este artículo un PDF que incluímos en nuestro tutorial “Cómo tocar cumpleaños feliz en guitarra”, iría algo así:

<iframe src=”http://docs.google.com/gview?url=http://www.comolohago.cl/uploads/Tab.pdf&embedded=true” style=”width:500px; height:375px;” frameborder=”0″></iframe>

Al cargar ese documento HTML en nuestro navegador, se cargará un visor con el documento PDF y algunas funciones para manipularlo.

2.- Cómo utilizar Feedburner en Blogger

Desde hace mucho tiempo que un aspecto vital de los sitios Web (especialmente los que están generando nuevo contenido de forma continua) son los feeds. Estos nos permiten entregarle a los usuarios una forma cómoda para que se enteren de nuevas actualizaciones, ya que la oferta de lectores de RSS hoy es bastante amplia, pudiendo incluso integrarlos a los navegadores Web o servicios de Google.

Configurar Feedburner para nuestros blogs en Wordpress es bastante sencillo, solo basta crear la cuenta y apuntarlo. Sin embargo, en Blogger requiere de un poco más de trabajo, aunque no por eso se hace más complejo. Hoy veremos como en unos breves pasos podemos dejar todo andando:

1.- Lo primero que haremos será ir al sitio de Feedburner y crear una cuenta si es que no tenemos.

2.- Luego, en el cuadro Burn a feed right this instant debemos ingresar la dirección de nuestro blog y hacemos click en Next:

3.- A continuación, nos mostrará un cuadro de selección con los feeds que detectó desde el blog. Probablemente serán 2, uno en formato Atom y uno en RSS. Optaremos por el segundo y haremos click en Next.

4.- Luego nos pedirá que definamos el título del feed y la URL de este. Aquí podemos fijar según queramos y hacemos click en Next. Con esto habremos activado el feed desde el sitio de Feedburner.

5.- Ahora debemos dirijirnos al nuestro panel de control en Blogger, y dentro de Configuración buscaremos la opción Feed del sitio.

6.- Dentro de esta última, buscamos la opción llamada Publicar URL redireccionada del feed y en ella ingresamos la URL que definimos en el último paso en Feedburner:

7.- Guardamos la configuración y listo. Desde ahora nuestros feeds se harán en formato RSS a través de Feedburner.

3.- Cómo comprimir nuestros CSS y Javascript

Una buena práctica en el desarrollo de sitios Web, la cual lamentablemente es obviada por muchos, es la compresión de hojas de estilo CSS y archivos Javascript una vez que tenemos las versiones finales y nos aprontamos a subirlas al servidor. Los beneficios de hacer esto incluyen desde mejorar el tiempo de carga de los sitios (algo que siempre debiesemos tener en cuenta), eliminar partes innecesarias (como por ejemplo comentarios, los cuales está bien tenerlos en las versiones que manejamos a la hora de desarrollar, pero en el sitio en si no cumplen ninguna funcionalidad) o bien optimizar mediante la combinación de secciones, cuando por ejemplo 2 marcas utilizan el mismo estilo y están declaradas por separado.

Hoy hacer compresión de CSS y Javascript es bastante sencillo, ya que se encuentran disponibles muchos servicios que nos permiten realizarlo en línea y en solo unos segundos. Les recomendamos 2:

  1. Para las hojas de estilo: CSS Compressor de CSS Drive Gallery, el cual pueden encontrar aquí.
  2. Para Javascript: Javascript Compressor, el cual pueden encontrar aquí.

Ambos servicios son sumamente sencillos de utilizar. Sólo debemos ingresar nuestro código y presionar un botón para que nos entregue la versión comprimida. Así que a tenerlo en cuenta a la hora de desarrollar.

4.- Cómo evitar el refresco automático de Firefox

Una de las tantas funcionalidades que Firefox ofrece por defecto a la hora de instalarlo es el refresco automático de páginas que estemos viendo. Si bien en algunos casos puede ser útil, hay otros en los que se vuelve bastante molesto, por lo que una opción es desactivarlo, lo cual se puede hacer en unos cuantos pasos:

1.- Abrimos Firefox y en la barra de direcciones escribimos about:config , con lo que se abrirá el interfaz de configuración:

2.- Hacemos click en ¡Tendré cuidado, lo prometo! y nos llevará a las opciones de configuración. Una vez ahí, en el filtro debemos escribir:

accessibility.blockautorefresh

Y nos buscará la opción con el mismo nombre:

3.- Por defecto esta opción viene con el valor false. Hacemos click con el botón derecho del mouse sobre ella y seleccionamos Modificar:

4.- Y veremos como el valor se cambia a true:

Y tenemos el refresco automático bloqueado. Si queremos volver a activarlo, solo debemos repetir el proceso y modificar el valor para que quede en false.

5.- Cómo convertir de PDF a Excel

Dentro de las peticiones que nos llegan día a día, la conversión de formatos (especialmente involucrando PDF) es la categoría más llena. Una de las que teníamos en carpeta hace tiempo era la conversión de archivos PDF a formato Excel, la cual en un principio nos sorprendió bastante, ya que desconocíamos que fuera posible. Sin embargo, nuestro buen Topher, quien es la portabilidad hecha persona, nos ha mostrado un servicio que en lo personal me ha dejado impactado por su simpleza y rapidez. Hablamos de PDF to Excel, el cual puede ser accedido desde el siguiente enlace,  que nos permite hacer la conversión en solo 3 pasos, enviándonos el archivo convertido a nuestro correo electrónico.

Para convertir:

1.- Ingresamos al sitio oficial de PDF to Excel:

2.- Seguimos los 3 pasos para la conversión que vemos en el sitio principal:

  • Seleccionamos el archivo a convertir.
  • Seleccionamos el formato de destino (aunque solo está disponible XLS).
  • Ingresamos nuestro correo electrónico para que nos envíen el archivo.

3.- Hacemos click en Convertir y esperamos mientras se sube el archivo al servidor:

4.- Una vez subido, nos mostrará el mensaje de éxito y a continuación solo debemos esperar que nos llegue a nuestro correo:

Para tener una noción aproximada, al momento de probar el servicio subimos un PDF de 850KB. La carga del archivo al servidor demoró unos 30 segundos y en no más de 5 minutos lo teníamos disponible en nuestro correo. Sin embargo, estos tiempos pueden variar dependiendo de nuestra conexión y de la carga que tenga el servidor al momento de utilizar el servicio.

Bastante simple.

Y así damos por terminada esta edición de CLH Express, en donde buscamos responder todas aquellas dudas que presenten soluciones cortas y sencillas que no necesiten de un completo paso a paso. Les recordamos que pueden seguir enviándonos sus peticiones a nuestro buzón oficial.

Como siempre, este CLH Express 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 CLH Express haya sido de utilidad para Uds.

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

Staff CLH

]]> http://www.comolohago.cl/2009/11/14/clh-express-compresion-cssjavascript-feedburner-blogger-firefox-pdfs-y-mas-pdfs/feed/ 1 Cómo añadir campos a un formulario dinámicamente http://www.comolohago.cl/2009/08/15/como-anadir-campos-a-un-formulario-dinamicamente/ http://www.comolohago.cl/2009/08/15/como-anadir-campos-a-un-formulario-dinamicamente/#comments Sat, 15 Aug 2009 04:10:19 +0000 Xabadu http://www.comolohago.cl/?p=1810

En CLH, en nuestro afán de cubrir hasta los últimos posibles detalles en cada temática, hemos hablado en varias ocasiones de los formularios Web. Ya sea estilizándolos, validándolos por Javascript, añadiendo Calendarios o incluso haciéndolos, esto se debe a lo que siempre remarcamos, que es su importancia dentro de un sitio que pretenda interactuar con sus visitantes.

Pues bien, hoy añadimos una nueva página a las numerosas lecciones al respecto. En esta ocasión, les enseñaremos a añadir campos al formulario de forma dinámica, para permitirle a un usuario en particular definir cuantos datos de un tipo quiere ingresar.

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

Cómo añadir campos a un formulario dinámicamente

Antes de partir, una pequeña explicación:

¿Qué haremos?

Lo que haremos, será añadir una pequeña funcionalidad a nuestro formulario, para que mediante un botón, el usuario pueda añadir más campos para ingresar un tipo de dato en particular y así definir la cantidad que estime conveniente. Esto lo haremos mediante un formulario en HTML y un código en Javascript, además de un poco de PHP para procesar el formulario.

¿Por qué hacerlo?

Es una muy buena pregunta, que tiene una respuesta así de buena. Cuando hacemos un formulario, en algunas ocasiones nos presentamos con la problemática de que para una información en particular, el número de datos a ingresar puede ser relativo.

Por ej: Si le queremos preguntar al usuario el nombre de sus hermanos o familiares, ¿Cómo definimos cuantos tendrán?. Claro, podríamos irnos a la segura y poner 10 o 15 campos, pero si el usuario solo tiene 1 hermano, estaríamos manejando una gran cantidad de datos innecesariamente.

Por esto es mejor darle el control al usuario y permitirle añadir más campos para el mismo dato según estime conveniente.

Implementos Necesarios

  1. Un editor Web.
  2. Idealmente un hosting que pueda ejecutar archivos PHP.

Con eso claro, vamos, manos a la obra:

Procedimiento

1.- Lo primero que haremos, será crear nuestro formulario con los datos que querremos que el usuario ingrese. Si tienen dudas sobre como hacerlo, les recomendamos leer este tutorial donde hemos cubierto el proceso por completo.

2.- Una vez que hemos creado nuestro formulario debemos hacer los ajustes para preparar nuestros campos dinámicos. Para eso nos dirigimos a donde están este campo (dentro de la celda, o entre las etiquetas td y /td si hemos insertado una tabla dentro del formulario, lo que es recomendable) y ahí lo que haremos será crear otra tabla en donde dejaremos los campos dinámicos. Así nos aseguraremos que sin importar cuantos campos se agreguen, ni el formulario ni la tabla principal pierdan la forma, así que dentro de la celda, agregaremos el código correspondiente. En este caso, como demostramos con un formulario para agregar nuevos usuarios añadiremos:

<table id=”tablaUsuarios”>

<tr’>

<td width=”175″>Nombre</td>

<td width=”175″>Sitio Web </td>

<td width=”100″>Correo</td>

<td width=”100″>Acciones</td>

</tr>

</table>

Lo que hemos hecho aquí es simplemente añadir una fila con 3 celdas, en las que se indica el nombre de un usuario, su sitio Web y su correo. Ojo que solo agregamos las celdas con los títulos. Los campos de texto los agregaremos en el siguiente paso para ver como lo hacemos dinámicamente.

3.- A continuación, en una nueva fila de la tabla principal que está en el formulario, agregaremos y alinearemos a la derecha un botón para agregar nuevas filas:

<td align=“right”>
<input type=“button” onClick=“agregarUsuario()”
value=“A&ntilde;adir usuario” >
</td>

Con esto, hemos creado una celda alineada a la derecha y hemos añadido un botón al cual se le ha asignado un atributo onClick, es decir, cuando se pulse este botón, se ejecutará una acción, en este caso, llamará a una función agregarUsuario() en Javascript que ya definiremos.

4.- Como describimos en el paso anterior, haremos una llamada a una función en Javascript que se encargará de añadir un campo cada vez que pulsemos el botón. Así que entre las etiquetas head y /head, agregaremos el siguiente código. La explicación, como siempre, en negrita, cursiva y entre /* y */:

<script language=”javascript” type=”text/javascript”> /* Abrimos etiqueta de código Javascript */

/* Partimos por definir una variable llamada posicionCampo. Esta variable servirá como índices para marcar cuantos campos se han agregado dinámicamente. La inicializamos en 1, ya que la primera llamada ocurrirá cuando no hayan campos agregados */

var posicionCampo=1;

/* Declaramos la función agregarUsuario( ) */

function agregarUsuario(){

/* Declaramos una variable llamada nuevaFila y a ella le asignamos la recuperación del elemento HTML designado por el id tablaUsuarios. En este caso, la tabla en la que manejamos los campos dinámicamente y llamamos a la función insertRow para agregar una fila */

nuevaFila = document.getElementById(“tablaUsuarios”).insertRow(-1);

/* Asignamos a la propiedad id de nuevaFila el valor de posicionCampo, que inicializamos en 1 */

nuevaFila.id=posicionCampo;

/* Luego en otra variable llamada nuevaCelda, agregaremos una celda a la tabla, mediante la función insertCell */

nuevaCelda=nuevaFila.insertCell(-1);

/* Con la celda creada, insertamos dinámicamente un campo de texto, el cual almacenaremos en un array llamado nombre, con una posición equivalente a la variable posicionCampo. Una vez terminado, repetimos la acción para el sitio Web y correo, asignando al array respectivo */

nuevaCelda.innerHTML=”<td><input type=’text’ size=’15′ name=’nombre["+posicionCampo+"]‘ ></td>”;

nuevaCelda=nuevaFila.insertCell(-1);

nuevaCelda.innerHTML=”<td> <input type=’text’ size=’10′ name=’web["+posicionCampo+"]‘ ></td>”;

nuevaCelda=nuevaFila.insertCell(-1);

nuevaCelda.innerHTML=”<td> <input type=’text’ size=’10′ name=’correo["+posicionCampo+"]‘ ></td>”;

/* Finalmente añadimos una última celda para las acciones y ahí agregamos un botón llamado Eliminar, el cual al ser presionado (definiendo la propiedad onClick), llamará a una función eliminarUsuario, pasando como parámetro la fila correspondiente */

nuevaCelda=nuevaFila.insertCell(-1);

nuevaCelda.innerHTML=”<td><input type=’button’ value=’Eliminar’ onclick=’eliminarUsuario(this)’></td>”;

/* Incrementamos el valor de posicionCampo para que empiece a contar de la fila siguiente */

posicionCampo++;

}

/* Definimos la función eliminarUsuario, la cual se encargará de quitar la fila completa del formulario. No es necesario hacer modificaciones sobre este código */

function eliminarUsuario(obj){

var oTr = obj;

while(oTr.nodeName.toLowerCase()!=’tr’){

oTr=oTr.parentNode;

}

var root = oTr.parentNode;

root.removeChild(oTr);

}

/* Cerramos el código Javascript */

</script>

5.- Y listo. Ahora podemos agregar campos dinámicamente y enviarlos a través del formulario, almacenando los datos en arrays, lo cual hará más sencillo de procesar y rescatar después mediante PHP o algún otro lenguaje dinámico, para manipular esos datos y hacer con ellos lo que necesitemos, como insertar en una BD o simplemente desplegar por pantalla.

Como siempre, les recordamos que este tutorial ha sido:

Esperamos que haya sido de utilidad para Uds.

Cualquier duda que tengan, los invitamos a dejarnos un comentario en el área habilitada a continuación.

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

Staff CLH

]]> http://www.comolohago.cl/2009/08/15/como-anadir-campos-a-un-formulario-dinamicamente/feed/ 64 Cómo añadir un calendario a tus formularios http://www.comolohago.cl/2009/08/04/como-anadir-un-calendario-a-tus-formularios/ http://www.comolohago.cl/2009/08/04/como-anadir-un-calendario-a-tus-formularios/#comments Tue, 04 Aug 2009 16:36:32 +0000 Xabadu http://www.comolohago.cl/?p=1710 calendario2

Muchas veces cuando presentamos formularios en nuestros sitios o sistemas Web, necesitamos que los usuarios ingresen una fecha para utilizar como parámetro. El principal problema que se presenta es asegurarnos que esta fecha se ingrese en el formato ideal.

Una de las mejores respuestas para esta inquietud es integrar un calendario al formulario, el cual además de darnos el formato requerido, presenta una funcionalidad atractiva visualmente para quienes hacen uso del sitio.

Hoy en CLH, les enseñaremos mediante un sencillo tutorial a realizar esta tarea.

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

Cómo añadir un calendario a tus formularios

Como siempre, lo primero:

Implementos necesarios:

  1. Una página Web con un formulario.
  2. Un editor Web (en CLH recomendamos y utilizamos Adobe Dreamweaver. Pueden descargar la versión CS4 desde este enlace).
  3. Popcalendar, que es un calendario emergente hecho en Javascript. (pueden descargarlo desde el sitio de su creador).

Con todo lo necesario, vamos, manos a la obra:

Procedimiento:

1.- Lo primero que debemos hacer es confeccionar un formulario al cual le añadiremos un campo de texto para ingresar la fecha. Si tienen dudas sobre como crear un formulario, pueden revisar este tutorial donde hemos cubierto el proceso por completo.

2.- Una vez que tenemos nuestro formulario listo y hemos descargado la librería Popcalendar (indicada en la sección Implementos Necesarios), debemos descomprimirla en alguna parte de nuestro computador.

Al descomprimir, tendremos una serie de archivos. Debemos mover popcalendar.js y el directorio images a la carpeta donde tenemos alojado nuestro sitio Web con el formulario (ya sea local o en algún FTP de alojamiento Web). Es muy importante mantener la estructura de rutas. Si deseamos mover las imágenes, debemos editar las rutas de estas en el archivo .js.

3.- A continuación, debemos realizar la edición en el archivo de la página donde tenemos el formulario y añadiremos, entre las etiquetas head y /head lo siguiente:

<script language=’javascript’ src=’popcalendar.js’></script>

Con ese trozo de código lo que hemos hecho es incluir la librería correspondiente al calendario a la página con nuestro formulario. El atributo src corresponde a la ubicación del script, por lo que solo debemos mantenerlo así si es que la hemos guardado en el mismo directorio que nuestra página. De lo contrario, debemos modificar aquella ruta para que realice la llamada como corresponde.

4.- Luego que hemos realizado la inclusión del archivo, debemos hacer la modificación correspondiente en el campo de texto donde queremos que se ingrese la fecha.

Lo que haremos será añadir un atributo a este campo de texto llamado onClick, de esta forma cuando un usuario haga click sobre el campo de texto (intentando escribir por ejemplo) se desplegará el calendario en pantalla para que seleccionen la fecha y esta se escribirá automáticamente en el formato que definamos sobre el campo.

Así que revisamos el código de nuestro formulario y vamos a la etiqueta correspondiente al campo de texto de la fecha, por ejemplo, en este caso, tendríamos algo como:

<input name=”fecha” type=”text” size=”10″ id=”fecha”  />

A esa etiqueta debemos agregarle una pequeña modificación para que sepa que debe realizar la llamada al calendario, por lo que modificaremos el atributo id y añadiremos onClick tal como habíamos detallado antes (en negrita lo que añadiremos/cambiaremos):

<input name=”fecha” type=”text” size=”10″ id=”dateArrival” onClick=“popUpCalendar(this, form1.dateArrival, ‘dd/mm/yyyy’);”>

Pues bien, ¿qué hicimos aquí?

  • Cambiamos el id a dateArrival para que reconozca el id correspondiente al calendario para estilizar la etiqueta.
  • Añadimos el atributo onClick que le dice al formulario: “Cuando se haga click, ejecute esto” y ejecutará la función popUpCalendar de la librería, enviando como parámetro el nombre del formulario (form1 que viene por defecto, si lo han cambiado deben modificar aquí) y el formato de la fecha (en este caso dimos un formato día/mes/año, con 2 dígitos para el día, 2 dígitos para el mes y 4 dígitos para el año. Pueden modificarlo como lo necesiten).

Una vez que hemos hecho las ediciones, guardamos el archivo y probamos todo. Al hacer click en el campo, nos mostrará el calendario con las fechas correspondientes, parecido a este:

calendario

Simple, ¿no? Ahora podemos añadir una atractiva funcionalidad que sera muy útil tanto para nuestros usuarios como para nosotros al momento de manipular los datos.

Es común que al implementar el calendario no resulte la primera vez, les recomendamos fijarse en la etiqueta del formulario, que las comillas esten bien definidas, eso es un problema común.

Adicionalmente, si necesitamos implementar más de un calendario en la misma página podemos hacerlo de la misma forma, solo asegurándonos de cambiar el atributo id de la etiqueta para que no sea el mismo.

Con esto damos por terminado este tutorial, esperamos que sea de utilidad y agrado de Uds.

Y recuerden que como siempre, esto ha sido:

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

]]> http://www.comolohago.cl/2009/08/04/como-anadir-un-calendario-a-tus-formularios/feed/ 45 Cómo crear un menu desplegable para Web http://www.comolohago.cl/2009/05/21/como-crear-un-menu-desplegable-para-web/ http://www.comolohago.cl/2009/05/21/como-crear-un-menu-desplegable-para-web/#comments Thu, 21 May 2009 08:52:38 +0000 Xabadu http://www.comolohago.cl/?p=425

Debo reconocerlo: Siempre he sido un fan acérrimo de los desarrollos Web. Y como tal, siempre me gusta estar buscando nuevas herramientas y utilidades para añadir a nuevos proyectos. Una de las cosas que más me gusta de cada nuevo desarrollo es la creación de los menús, algo que sin duda forma gran parte de la estructura visual de lo que haremos.

Dentro de los menús, sin duda que los desplegables son de los más funcionales que podamos utilizar. Esto se debe a que nuestros proyectos, ya sean simples sitios Web, Blogs o Sistemas, normalmente cuentan con una serie de secciones, las cuales son más fáciles de acomodar mediante un buen menú desplegable con secciones y sub-secciones.

Para el desarrollo de estos menús existen varias alternativas: Software que construye menús en Flash o DHTML, librerías, frameworks de CSS y más. Hoy en CLH, mediante un sencillo tutorial, les enseñaremos a construir un menú desplegable simple, funcional y atractivo graficamente, con el uso de algunas librerías fáciles de implementar.

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

Cómo crear un menú desplegable para Web

Para el desarrollo de este tutorial, nos basaremos en un framework de Javascript, de lado cliente, llamado Ext, el cual presenta una serie de interesantes funcionalidades que esperamos cubrir a fondo en próximos tutoriales.

Así que como siempre, lo primero:

Implementos necesarios:

  1. Las librerías correspondientes al framework, que pueden descargar desde nuestro sitio Web.
  2. Un editor Web. CLH utiliza y recomienda Adobe Dreamweaver.

Procedimiento:

1.- Luego de descargar las librerías, procedemos a descomprimirlo en algún lugar de nuestro computador.

2.- Al descomprimir deberíamos tener menu.css, menu.js, examples.css, ext-core.js y ext-core-debug.js además de un directorio con imágenes que utilizaremos.

3.- Con todo eso listo, ahora crearemos un archivo HTML en donde formaremos nuestro menú. Vamos a nuestro editor Web favorito e insertamos el siguiente código:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CLH</title>
/* Llamamos a las hojas de estilo que utilizaremos */
<link href=”examples.css” rel=”stylesheet” />
<link href=”menu.css” rel=”stylesheet” />

/* Ahora llamamos a las librerías JS del framework ext3 que utilizaremos en la creación del menú  y añadimos el script correspondiente que se encargará de los ‘despliegues’ del menú. */

<script src=”ext-core-debug.js”></script>
<script src=”menu.js”></script>

<script>
Ext.onReady(function() {
new Ext.ux.Menu(’simple-horizontal-menu’, {
transitionType: ’slide’,
direction: ‘horizontal’, // default
delay: 0.2,              // default
autoWidth: true,         // default
transitionDuration: 0.3, // default
animate: true,           // default
currentClass: ‘current’  // default
});

});
</script>
<style>
.ux-menu a.current {
background-image: url(‘imagenes/menu-item-bg-current.png’);
border-color: #cbc0b7;
}
</style>
</head>

<body>
/* Damos un título a nuestro menú y lo conformamos con una lista no ordenada y un listado de ítems. La lista no ordenada referenciará al id ’simple-horizontal-menu’ definido por defecto en las hojas de estilo, el cual se encargará de dar los toques necesarios al menú. Podemos ir reemplazando las secciones y subsecciones según nos acomode */
<h3>Cómo Lo Hago</h3>
<ul id=”simple-horizontal-menu”>
<li>
<a href=”#”>Nosotros</a>
<ul>
<li><a href=”#”>Quienes Somos</a></li>
<li>
<a href=”#”>Historia</a>
<ul>
<li><a href=”#”>Principio</a></li>
<li><a href=”#”>Medio</a></li>
<li><a href=”#”>Final</a></li>
</ul>
</li>
<li><a href=”#”>Créditos</a></li>
</ul>
</li>
<li><a href=”#”>Tutoriales</a></li>
<li>
<a href=”#”>Categorías</a>
<ul>
<li><a href=”#”>Computación</a></li>
<li><a href=”#”>Diseño</a></li>
<li><a href=”#”>Manualidades</a></li>
</ul>
</li>
<li><a href=”#”>Contacto</a></li>
</ul>

</body>
</html>

4.- Ejecutamos en nuestro navegador favorito y podemos disfrutar de nuestro menú desplegable horizontal.

Algunas notas adicionales:

a) Este menú está basado en un framework llamado ext3, el cual ofrece una serie de funcionalidades, así como modificaciones a este ejemplo. Como todos los ejemplos de diseño Web, partimos enseñando lo más básico pero los incentivamos a indagar más a fondo. En futuros tutoriales iremos viendo otros ejemplos y como hacer desarrollos más personalizados.

b) El estilo del menú es por defecto. Si quieren realizar cambios a los colores o imagenes utilizadas, les recomendamos revisar las hojas de estilo (de extensión CSS) y el directorio imágenes.

Fácil y bonito ¿no?. Como ven, ya no es necesario desgastarse y revisar líneas y líneas de código para disfrutar de un recurso Web útil e impresionante para nuestros visitantes.

Como siempre, recuerden que este tutorial ha sido:

Cualquier duda o comentario, pueden 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

]]> http://www.comolohago.cl/2009/05/21/como-crear-un-menu-desplegable-para-web/feed/ 24 Cómo validar campos de un formulario mediante Javascript http://www.comolohago.cl/2009/02/26/como-validar-campos-de-un-formulario-mediante-javascript/ http://www.comolohago.cl/2009/02/26/como-validar-campos-de-un-formulario-mediante-javascript/#comments Thu, 26 Feb 2009 23:31:30 +0000 Xabadu http://www.comolohago.cl/?p=347

Hoy en día, es muy común utilizar una serie de formularios en nuestros sitios Web. Ya sea para establecer canales formales de contacto, o si necesitamos autentificar usuarios para acceder a los contenidos o simplemente para distintas funcionalidades que podamos ofrecer, sin duda que es la herramienta más útil, sencilla y conocida que hay.

Un aspecto importante de estos formularios es que los usuarios ingresen los datos solicitados para que podamos operar con ellos. Si bien una vez que envían esta información podemos validarla al momento de ser procesada, esto muchas veces causa recargas innecesarias en el servidor y es por eso que es mucho mejor hacer la validación antes de que sea enviada y así cargar el contenido siguiente solo si es necesario.

Hoy les enseñaremos una sencilla validación mediante Javascript.

Todo el detalle, como siempre, después del salto.

Cómo validar campos de un formulario mediante Javascript

Implementos necesarios:

  1. Un editor Web (recomendamos y utilizamos Adobe Dreamweaver). Si no poseen, pueden escribir el código en algún editor de texto como block de notas.

Con todo eso claro, vamos, manos a la obra:

Procedimiento:

1.- Lo primero que haremos será crear un nuevo archivo HTML, en donde incluiremos un formulario y definiremos una función en Javascript que se encargará de la validación.

2.- En nuestro HTML, creamos un formulario, el cual contendrá 3 campos:

  • Un campo de texto para ingresar el nombre.
  • Un campo de texto para ingresar la edad.
  • Una lista desplegable indicando el motivo del contacto.

Adicionalmente añadiremos un botón para el envío de datos. El código del formulario es el siguiente:

<form name=”form1″ action=”pagina-de-destino.html”>
<table>
<tr>
<td>Nombre: </td>
<td><input type=”text” name=”nombre” size=”30″ maxlength=”100″></td>
</tr>
<tr>
<td>Edad: </td>
<td><input type=”text” name=”edad” size=”3″ maxlength=”2″></td>
</tr>
<tr>
<td>Motivo:</td>
<td>
<select name=motivo>
<option value=”Seleccionar”>Seleccionar
<option value=”General”>Contacto General
<option value=”Tecnico”>Problemas Técnicos
<option value=”Sugerencias”>Sugerencias
</select>
</td>
</tr>
<tr>
<td colspan=”2″ align=”center”><input type=”button” value=”Enviar” onclick=”validar_formulario()”></td>
</tr>
</table>
</form>

Como podemos apreciar, el código es el estándar de un formulario como los que hemos hecho en otros tutoriales. Sin embargo, en la etiqueta HTML correspondiente al botón de envío hemos agregado un nuevo atributo llamado onclick, el cual cumple la función de que cuando se presione el botón en vez de cargar una página, llamará a una función Javascript de nombre validar_formulario()

3.- A continuación, añadiremos la función en Javascript que realizará la validación. El código es el siguiente, el cual debemos insertarlo entre las etiquetas <head> y </head>. Los comentarios van en negrita, cursiva y entre /* y */:

<script> /* Abrimos etiqueta de código */
function validar_formulario(){ /* Abrimos la función validar_formulario */
/* Partimos por validar que se haya ingresado un valor para el nombre, esto lo hacemos mediante un if y preguntamos si el campo es igual a 0, si es así, desplegamos un mensaje para que se ingrese el nombre y volvemos al formulario. */
if (document.form1.nombre.value.length==0){
alert(“Debe ingresar su nombre”)
document.form1.nombre.focus()
return 0;
}

/* Luego validamos la edad, viendo si se ingresa una mayor a 18 años. Asignamos primero a una variable el valor ingresado y luego comprobando que no este vacío y que cumpla el requerimiento. También llamaremos a una función validarEntero que definiremos en el siguiente paso, dándole como parámetro la edad ingresada. Esta función realizará las validaciones necesarias para definir si es un dato numérico. */
edad = document.form1.edad.value
edad = validarEntero(edad)
document.form1.edad.value=edad
if (edad==”"){
alert(“Debe ingresar su edad.”)
document.form1.edad.focus()
return 0;
}else{
if (edad<18){
alert(“Debe ser mayor de 18″)
document.form1.edad.focus()
return 0;
}
}

/* Finalmente, validamos el motivo del contacto */
if (document.form1.motivo.selectedIndex==0){
alert(“Debe seleccionar un motivo de su contacto.”)
document.form1.interes.focus()
return 0;
}

/* Si paso todas las validaciones, desplegamos un mensaje de éxito y enviamos el formulario */
alert(“Los datos fueron ingresados correctamente y seran enviados”);
document.form1.submit();
}
</script>

4.- A continuación de la función anterior, crearemos otra función que realizará una conversión del dato ingresado para la edad a entero y comprueba si lo que se ingresó es realmente un valor numérico:

function validarEntero(valor){
/* Mediante parseInt intentaremos transformar el valor a número entero. Si el dato fue ingresado bien y ya lo era, no hará nada */
valor = parseInt(valor)

/* Se comprobará si el valor es un número */
if (isNaN(valor)) {
/* Si no lo es, se devuelve una cadena vacía */
return “”
}else{
/* De lo contrario se devuelve el número */
return valor
}
}

Y con ese procedimiento tenemos una sencilla validación activada para nuestro formulario. De esta forma, nos aseguraremos de que los datos enviados estén siempre correctos y no sobrecargaremos a nuestro servidor procesando datos que puedan estar nulos o incorrectos. Es sin duda muy útil.

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

]]> http://www.comolohago.cl/2009/02/26/como-validar-campos-de-un-formulario-mediante-javascript/feed/ 17 Cómo mejorar tu sitio Web mediante JavaScript http://www.comolohago.cl/2008/09/28/como-mejorar-tu-sitio-web-mediante-javascript/ http://www.comolohago.cl/2008/09/28/como-mejorar-tu-sitio-web-mediante-javascript/#comments Sun, 28 Sep 2008 05:31:56 +0000 Xabadu http://www.comolohago.cl/?p=186

No, no se ofendan. Con el título de este tutorial no pretendemos decirles que sus sitios sean malos o algo por el estilo, pero un aspecto que todo Webmaster debe tener en cuenta es que siempre se puede mejorar.

Con JavaScript disponemos de un poderoso lenguaje que nos permite añadir muy buenas funcionalidades a nuestras páginas Web con solo unas pocas líneas de código. En el tutorial de hoy, les traemos algunos sencillos trucos que nos ayudarán a obtener esa funcionalidad que tanto buscamos.

Todo el detalle, como siempre, después del salto.

Cómo mejorar tu sitio Web mediante JavaScript

Nota: El propósito de este artículo no es entrar en detalle sobre que es JavaScript ni detallar su funcionamiento. Lo que intentamos es entregar algunos pequeños códigos para que puedan insertarlos en sus sitios y saber que es lo que hace cada uno de ellos.

Con ese aviso, vamos de lleno a este tutorial. La verdad es que para el desarrollo no necesitaremos materiales especiales, a lo más un editor Web (como Dreamweaver o NVU) o simplemente un editor de texto (como Block de Notas) para insertar los códigos.

Contenidos:

En resumen, hoy veremos:

  1. Crear un link para que añadan nuestro sitio a Favoritos.
  2. Que dejen nuestro sitio como página de inicio.
  3. Abrir una ventana emergente.
  4. Evitar doble envío de formularios.
  5. Marcar/desmarcar todos los checkboxes de un formulario.
  6. Redirigir de acuerdo a la resolución de pantalla del usuario.
  7. Imprimir la página.

Así que con los contenidos ya definidos, vamos manos a la obra:

Procedimiento:

1.- Añadir sitio a Favoritos: Este pequeño truco nos sirve para crear un vínculo (mediante texto o imagen) para que nuestros visitantes le hagan click y automáticamente añadan nuestra página a Favoritos. El código es bastante sencillo, y es como sigue:

<a href="javascript:window.external.AddFavorite('http://www.ejemplo.com','Titulo del

sitio');">Agregar a favoritos</a>

Solo deben cambiar la URL por la suya y el “Título del Sitio” por el que corresponda. Además si desean, el texto Agregar a favoritos pueden reemplazarlo por una imagen.

2.- Página de Inicio: Otra manera de crear lealtad con nuestros usuarios es otorgarles la posibilidad de dejar nuestro sitio como página de inicio, para que cada vez que abran su navegador, cargue nuestro sitio directamente. Esto se hace añadiendo el siguiente código, el cual creará un vínculo para que cuando hagan click se establezca la página de inicio:

<a href="http://www.ejemplo.com#" class="chlnk"

onclick="this.style.behavior='url(#default#homepage)';

this.setHomePage('http://www.ejemplo.com');"

style="cursor: hand"> Haznos tu página de inicio</a>

3.- Abrir una ventana emergente: También conocidos como “pop-ups”. A pesar de lo odiosos que pueden ser, tienen una cierta utilidad para algunos contenidos que queramos desplegar. Para abrir ventanas emergentes, debemos primero insertar la siguiente función entre las etiquetas <head> y </head>:

<script language="JavaScript">
  function Abrir_ventana (pagina) {
var opciones="toolbar=no, location=no, directories=no, status=no,
menubar=no, scrollbars=no, resizable=yes, width=508, height=365,
top=85, left=140";
  window.open(pagina,"",opciones);
  }
  </script>

En esta función podemos editar varios parámetros de la ventana a abrir, como por ejemplo si tendra barra de estado, su ancho, alto, si tendra scrollbar, etc. Ahí podrán ajustar dependiendo de la necesidad que tengan. Luego para hacer uso de esa función, en los vínculos desde donde las llamaremos ponemos:

<a href="javascript:Abrir_ventana('popup.html')">Abrir la
ventana</a>

Donde popup.html es la página que se abrirá en la ventana emergente.

4.-Evitar el doble envío de formularios: Cuando tenemos formularios en nuestro sitio (contacto, registro, etc), muchas veces ocurre que algunos usuarios por distintas razones realizan más de un click y se produce un doble envío. Para prevenirlo, debemos partir por insertar la siguiente función entre las etiquetas <head> y </head>:

<script LANGUAGE="JavaScript">
    <!--
    var cuenta=0;
    function enviado() {
    if (cuenta == 0)
    {
    cuenta++;
    return true;
    }
    else
    {
    alert("El formulario ya está siendo enviado, por favor aguarde un instante.");
    return false;
    }
    }
    // -->
    </script>

Y luego en las propiedades del formulario añadimos la parte de ‘onSubmit” del siguiente código, tal como se muestra:

<form method="POST" action="proceso.php"
  onSubmit="return enviado()">
    ...
    <input type="submit" value="Enviar">
    </form>

5.- Marcar/desmarcar todos los checkbox de un formulario: Cuando presentamos un formulario a los visitantes, en ocasiones les entregamos una serie de opciones que les dejamos marcar o desmarcar. Para esto es muy útil añadir un pequeño link para que los marquen o desmarquen todos si así lo desean. Para esto primero añadimos entre las etiqueas <head> y </head>:

<SCRIPT LANGUAGE = "JavaScript">
    <!--
    function modificar_boxes(chequear,cantidad){
    for (i=0; i < cantidad ; i++ ){
    if (chequear){
    document.forms[0].opcion[i].checked=true;
    }else{
    document.forms[0].opcion[i].checked=false;
    } }}
    -->
            </SCRIPT>

Y luego en el formulario luego de que añadimos los checkboxes, añadimos lo siguiente:

<INPUT TYPE=button NAME="marcar" VALUE="Marcar todos"
    onClick="modificar_boxes(true,3)">
    <INPUT TYPE=button NAME="desmarcar" VALUE="Desmarcar todos"
    onClick="modificar_boxes(false,3)">

6.- Redirigir de acuerdo a la resolución de pantalla del usuario: Cuando construimos un sitio Web, un aspecto importante a tener en cuenta es la resolución de pantalla de los visitantes. Siempre se ha pensado en un estandar de 1024×768 pero hoy en día muchos usuarios tienen resoluciones mayores y en algunos casos menores, por lo que es una buena opción tener distintas modalidades de nuestro Sitio y redirigirlos de acuerdo a la que tienen. Primero debemos añadir entre las etiquetas <head> y </head>:

<script LANGUAGE="JavaScript">
function redireccionar() {
var url640x480 = "http://www.tu-sitio.com/640x480";
var url800x600 = "http://www.tu-sitio.com/800x600";
var url1024x768 = "http://www.tu-sitio.com/1024x768";
if ((screen.width == 640) && (screen.height == 480))
window.location.href= url640x480;
else if ((screen.width == 800) && (screen.height == 600))
window.location.href= url800x600;
else if ((screen.width == 1024) && (screen.height == 768))
window.location.href= url1024x768;
else window.location.href= url640x480;
}
</script>

Ahí podemos modificar de acuerdo a las resoluciones que deseemos soportar. Y luego modificamos la etiqueta <body> dejandola así:

<body onLoad="redireccionar()">

7.- Imprimir la página: Para el final dejamos un truco bastante sencillo, el cual nos permitirá entregarle a los usuarios la utilidad de que impriman la página actual, mediante el siguiente código:

<a
href="javascript:print()">Imprimir</a>

Con eso podrán imprimir el resultado de alguna información que les presentemos.

Con ese último truco terminamos este tutorial por hoy. En una próxima oportunidad iremos presentandoles algunas otras cosas interesantes para que vayan implementando en sus sitios y hacerlos cada vez más cómodos y completos para sus visitantes.

Como siempre este tutorial ha sido desarrollado, probado y documentado por el equipo de Como Lo Hago, por lo que cuenta con nuestro Sello de Garantía. Cualquier duda, problema o comentario que puedan tener, pueden 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

]]> http://www.comolohago.cl/2008/09/28/como-mejorar-tu-sitio-web-mediante-javascript/feed/ 4