ZonaW » Programación Web http://www.zonaw.com Información práctica, consejos y recursos de interés para webmasters, desarrolladores y diseñadores web de todos los niveles. Wed, 22 Feb 2012 15:42:41 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Textos con efectos http://www.zonaw.com/textos-con-efectos/ http://www.zonaw.com/textos-con-efectos/#comments Tue, 21 Feb 2012 09:09:21 +0000 ZonaW http://www.zonaw.com/?p=1786 textualizer

Textualizer es un plugin jQuery con el que podrás realizar transiciones entre textos con hasta cuatro efectos diferentes como:  aparición progresiva (fadeIn), desplazamiento a la izquierda (slideLeft), desplazamiento arriba (slideTop) y efecto aleatorio (ramdom), además el plugin acepta cualquier número de palabras.

Para ello primero definimos los tres estados diferentes:

.textualizer('pause') // Pausar animaciones finalizando la animación
.textualizer('stop') // Parar la animación
.textualizer('destroy') // Elimina la instancia

Para utilizarlo, descargar el fichero js y alojarlo en tu servidor, realizar las llamadas correspondientes desde tu código, estas son algunas de las variables que se pueden configurar:

var list = ['first blurb', 'second blurb', 'third blurb'];  // list of blurbs

var txt = $('#txtlzr');  // The container in which to render the list

var options = {
    duration: 1000,          // Time (ms) each blurb will remain on screen
    rearrangeDuration: 1000, // Time (ms) a character takes to reach its pos.
    effect: 'random',        // Animation effect the characters use to appear
    centered: true           // Centers the text relative to its container
}

txt.textualizer(list, options); // textualize it!
txt.textualizer('start'); // start

Textualizer es compatible con los principales navegadores web: Chrome, Safari, Firefox, Internet Explorer (6,7,8,9+), Opera y Safari.

 

]]> http://www.zonaw.com/textos-con-efectos/feed/ 0 SQL de provincias y poblaciones españolas http://www.zonaw.com/sql-de-provincias-y-poblaciones-espanolas/ http://www.zonaw.com/sql-de-provincias-y-poblaciones-espanolas/#comments Tue, 14 Feb 2012 11:51:10 +0000 ZonaW http://www.zonaw.com/?p=1774 Una gran utilidad para webmasters y programadores, es disponer de una base de datos SQL de provincias y poblaciones españolas.

Son muchos los proyectos en internet que requieren completar formularios con los clásicos campos de población y provincia y cada vez más útil también las coordenadas latitud y longitud así como el código postal.

La tabla de provincias de España contiene los elementos:

  • idprovincia: un identificador
  • provincia: el nombre de la provincia
  • provinciaseo: la provincia sin espacios, letras raras, etc…
  • provincia3: un identificador de 3 letras

La tabla de poblaciones de España contiene los elementos:

  • idpoblacion: un identificador
  • idprovincia: el identificador de la tabla provincias
  • poblacion: el nombre de la población
  • poblacionseo: la población sin espacios, letras raras, etc…
  • postal: el código postal “principal” del lugar (si hay varios en una misma población, sólo se toma el “de numeración menor”)
  • latitud: la latitud aproximada
  • longitud: la longitud aproximada

Puedes descargar la tabla desde SQL de Municipios de España con Código Postal, Latitud y Longitud o también por separado: Tabla de provincias y Tabla de municipios (click derecho guardar como en cada uno de los enlaces).

]]> http://www.zonaw.com/sql-de-provincias-y-poblaciones-espanolas/feed/ 0 Mostrar información sobre el tiempo de carga y consumo en WordPress http://www.zonaw.com/mostrar-informacion-sobre-el-tiempo-de-carga-y-consumo-en-wordpress/ http://www.zonaw.com/mostrar-informacion-sobre-el-tiempo-de-carga-y-consumo-en-wordpress/#comments Mon, 06 Feb 2012 12:21:35 +0000 ZonaW http://www.zonaw.com/?p=1725 En muchas ocasiones, especialmente cuando tenemos un blog en WordPress que nos está dando problemas con la velocidad de carga o se demora más de lo previsto al realizar consultas, nos puede ser de gran utilidad conocer información a cerca de tiempo de carga, consumo de PHP y de las consultas realizadas a la base de datos.

wordpress-stats-zonaw

Para conocer esta información bastará con añadir el siguiente código comentado en el píe de nuestro blog (por lo general en el fichero footer.php) justo antes de la etiqueta </body>

<!– Tiempo de carga: <?php timer_stop(1); ?> segundos. –>
<!– Consumo de PHP: <?php echo round(memory_get_usage()/1048576,2) ?>MB. –>
<!– Base de datos: <?php echo get_num_queries(); ?> consultas. –>

Puede ser que si estamos utilizando algún plugin de caché ya tenga integradas estas líneas para comprobar su correcto funcionamiento, también al final de nuestro código.

]]> http://www.zonaw.com/mostrar-informacion-sobre-el-tiempo-de-carga-y-consumo-en-wordpress/feed/ 0 Mostrar el contenido de un objeto (Javascript) http://www.zonaw.com/mostrar-el-contenido-de-un-objeto-javascript/ http://www.zonaw.com/mostrar-el-contenido-de-un-objeto-javascript/#comments Thu, 02 Feb 2012 15:46:43 +0000 ZonaW /?p=1709 Para mostrar el contenido completo de un objeto, en Firefox, se puede utilizar la siguiente sentencia:

alert(object.toSource());

También se puede acceder a todos los elementos de un objeto mediante un bucle FOR EACH (utilizado para recorrer los elementos de una estructura de datos). En la siguiente sentencia MostrarObjeto monstrará un alert() que muestra todas las propiedades y los valores respectivos.

function ImprimirObjeto(o) {
var salida = ”;
for (var p in o) {
salida += p + ‘: ‘ + o[p] + ‘\n’;
}
alert(salida);
}

Por ejemplo:

<head>
<title>Mostrar el contenido de un objeto</title>
<script type="text/javascript">
function MostrarObjeto(o) {
var salida = '';
for (var p in o) {
salida += p + ': ' + o[p] + '\n';
}
alert(salida);
}
var Objeto = {'contador1': 1, 'contador2': 2};
</script>
</head>
<body>
<a href="javascript:ImprimirObjeto(Objeto);">Muestra</a>
</body>

]]> http://www.zonaw.com/mostrar-el-contenido-de-un-objeto-javascript/feed/ 0 Cómo cambiar la estructura de enlaces (WordPress) http://www.zonaw.com/cambiar-estructura-de-enlaces/ http://www.zonaw.com/cambiar-estructura-de-enlaces/#comments Wed, 01 Feb 2012 12:03:06 +0000 ZonaW /?p=1700 Los blogs que empezaron en WordPress hace unos años o las instalaciones por defecto de nuevos blogs, arrastran un “problema” con la estructura de sus enlaces permanentes (permalink). A pesar de ser muchos los que se han interesado con el tema de posicionamiento en buscadores (SEO) por mejorar esta estructura de enlaces en los últimos años, aún quedan bastantes blogs donde se puede ver la siguiente estructura de enlaces nada recomendable.

Por ejemplo, esta es la estructura de permalink que crea WordPress por defecto recién instalado:

  • http://www.ejemplo.com/?p=666

Con el interés por el posicionamiento en los blogs se hizo muy popular la siguiente estructura, a pesar de ser mucho más larga que la anterior. Aporta datos interesantes dentro de la misma URL como: fecha exacta y palabras clave:

  • http://www.ejemplo.com/2011/12/22/nombre-del-articulo

Poco después, se dió una vuelta más a las URLs eliminando el apartado de la fecha para intentar potenciar aún más el posicionamiento en buscadores:

  • http://www.ejemplo.com/nombre-del-articulo

Actualmente es recomendable si el número de visitas de nuestro blog aumenta de forma considerable y notamos cierta sobrecarga de nuestra base de datos, optar por un modelo de URLs donde se combinen por ejemplo, el identificador del artículo y las palabras clave del titular. Con esto evitamos que WordPress consuma toda la memoria del servidor y haga muchas más llamadas a bases de datos de las necesarias.

  • http://www.ejemplo.com/nombre-del-articulo/666

¿Cómo realizar de forma correcta un cambio de estructura de enlaces permanentes en WordPress?

El primer paso para realizar el cambio de estructura de URLs es acceder a la sección Ajustes > Enlaces permanentes en el panel de configuración de WordPress y añadir la estructura personalizada:

  • Primer ejemplo: Por defecto
  • Segundo ejemplo: /%year%/%monthnum%/%day%/%postname%/
  • Tercer ejemplo: /%postname%/
  • Cuarto ejemplo: /%postname%/%post_id%/

Hay que prestar especial atención a este cambio de URLs ya que pueden dejar de funcionar los enlaces que ya enlazaban a nuestra web desde otras páginas.

Gracias a la herramienta de Yoast, podemos generar las redirecciones para que al hacer el cambio de estructura todas las URLs antiguas sigan funcionando y los usuarios que accedan a ellas sean redireccionados a las nuevas URLs.

yoast-redirects

Para ello sólo tienes que rellenar los campos “URL” de tu site (si está en un subdirectorio ej: /blog) y la estructura de enlaces antigua. Una vez terminado pulsamos sobre “Generate Redirects” y nos dará una línea de código que tendremos que pegarla en el fichero .htaccess alojada en el directorio raíz de WordPress.

]]> http://www.zonaw.com/cambiar-estructura-de-enlaces/feed/ 0 Formularios más accesibles http://www.zonaw.com/formularios-mas-accesibles/ http://www.zonaw.com/formularios-mas-accesibles/#comments Tue, 31 Jan 2012 08:15:52 +0000 ZonaW /?p=1694 Cualquier webmaster que ofrezca o requiera que sus usuarios rellenen un formulario online, sabrá de las dificultades que supone que sus usuarios completen correctamente todo el procesos de registro y/o compra. A pesar de que la mayoría de navegadores ofrecen opciones de autocompletado de formularios y de ayudas para que los usuarios realicen el proceso de alta de datos correctamente, sin necesidad de que rellenen los mismos datos una y otra vez durante el día, recordando la información que ya han introducido, por ejemplo: nombres, direcciones, correo electónico, fechas…

propuesta formulario

Desde Google, se ha comenzado a dar soporte a un nuevo atributo en fase de pruebas de tipo de autocompletado. Este permite a los desarrolladores web etiquetar texto de forma inequívoca y seleccionar campos con tipos de datos habituales como, por ejemplo, el nombre completo, la dirección o el DNI. Gracias a este atributo los webmasters pueden generar conversiones en sus sitios al marcar sus formularios para autocompletado sin necesidad de cambiar la interfaz del usuario ni el servidor.

La forma correcta de implementarlo sería la siguiente:

Añadir un atributo al elemento de introducción de datos, por ejemplo para el campo de dirección de e-mail puede tener un aspecto similar:

<input type=”text” name=”field1” x-autocompletetype=”email” />

Recordar que es una propuesta inicial por parte de Google, y está siendo implementada en su navegador Google Chrome para abrir un diálogo de cómo admitir de la mejor forma posible los formularios que se completan automáticamente en la especificación HTML5.

]]> http://www.zonaw.com/formularios-mas-accesibles/feed/ 0 Eliminar enlaces de todos los temas de un foro de forma automática http://www.zonaw.com/eliminar-enlaces-de-todos-los-temas-de-un-foro-de-forma-automatica/ http://www.zonaw.com/eliminar-enlaces-de-todos-los-temas-de-un-foro-de-forma-automatica/#comments Wed, 25 Jan 2012 07:59:48 +0000 ZonaW /?p=1679 El caso Megaupload está causando muchas preocupaciones entre webmasters de foros en los que se intercambiaban enlaces para descargar desde este tipo de servidores. Por el momento ya han quedado inutilizables todos los enlaces que apuntaban hacia megaupload.com y se espera que ocurra lo mismo con otros servidores similares.

El caso es que en estos foros existen multitud de temas abiertos con este tipo de enlaces y en la mayoría de los casos eliminar enlace por enlace dentro de cada tema del foro se hace una tarea inviable.

¿Cómo podemos eliminar los enlaces de todos los temas de un foro de forma automática?

Existen varias posibilidades, (si se te ocurre alguna mejor, puedes dejárnosla en los comentarios) pero la que nos parece más sencilla y rápida de llevar a cabo es la siguiente:

Cambiar todos los enlaces que apunten hacia megaupload.com por la url de nuestra propia página del foro:

Antes de nada, muy importante, realizar una copia de seguridad de todo el foro. El siguiente paso es ejecutar la siguiente consulta SQL desde al AdminCP o desde el mismo MyPhpAdmin (recuerda que el usuario de Admincp debe tener permisos, para ello modifica el fichero config.php añadiendo el ID del usuario “Admin” por ejemplo).

(Importante prestar atención a las urls, las “www” y la posibilidad de utilizar comodines)

update post
set pagetext= replace(pagetext,
'http://www.megaupload.com','http://www.urldelforo.com')

Una vez ejecutada la sentencia utilizar una redirección 404 en el fichero .htaccess

]]> http://www.zonaw.com/eliminar-enlaces-de-todos-los-temas-de-un-foro-de-forma-automatica/feed/ 0 Crear un contador de caracteres (estilo Twitter) http://www.zonaw.com/crear-un-contador-de-caracteres-estilo-twitter/ http://www.zonaw.com/crear-un-contador-de-caracteres-estilo-twitter/#comments Tue, 24 Jan 2012 07:57:18 +0000 ZonaW /?p=1676 Seguro que te has parado a pensar en más de una ocasión cómo funciona el contador de caracteres de Twitter. Pues bien, implementarlo en tu página es mucho más sencillo de lo que pueda parecer.

Gracias al siguiente plugin jQuery conseguirás la misma función que utiliza Twitter dentro de las cajas para escribir un nuevo tweet, con la opción de alertar con la cantidad de caracteres restantes. De gran utilidad por ejemplo, para cajas de comentarios dentro de un blog.

Lo primero que conseguimos con este plugin es crear un elemento “sibling” que se añade seguido del elemento form que será el contador “counter“, que es donde se almacena la información de caracteres restantes. Cada vez que se rellena un campo, cambia la función “counter” y el elemento cambia en consecuencia. Por otro lado, si el número de caracteres restantes se acera a cero “warning” mediante una clase en nuestra hoja de estilos se cambiaría el color, por ejemplo, a números en amarillo y si el contador llega a cero o supera cero una nueva clase con estilo rojo, donde se muestra claramente que se ha excedido el límite de caracteres.

contador-de-caracteres

El siguiente es el código que genera el plugin:

<span class=”counter”>140</span>

Algunas de las opciones que ofrece el plugin son:

  • limit: 140: límite de caracteres que deseas setear para tu textarea o input.
  • warning: 25: cuando los caracteres restantes llegan al número seteado con esta opción la clase css de nombre “warning” se aplicará al elemento contador.
  • counterElement: ‘span’: el tipo de elemento que deseas inyectar en el DOM como contador. Por defecto, es un elemento SPAN, pero puedes utilizar p, div, etc.
  • css: ‘counter’: nombre de clase añadida al contador. Utiliza esta clase como un selector de css para cambiar la apariencia del elemento.
  • cssWarning: ‘warning’: nombre de clase añadida al contador una vez que se llega al número de “advertencia” (warning).
  • cssExceeded: ‘exceeded’: nombre de la clase añadida al elemento contador una vez que llega a cero.
  • counterText: ” si deseas añadir algún texto al número de caracteres restantes, lo puedes hacer utilizando esta opción. Por defecto se encuentra vacía.

El siguiente es el código por defecto:

$(“#mensaje1″).charCount();

Código personalizado para admitir 140 caracteres y alertar a falta de 25:

$(“#mensaje2″).charCount({
allowed: 140,
warning: 25,
counterText: ‘Caracteres restantes: ‘
});

Estilos CSS utilizados:

form .counter{
position:absolute;
right:0;
top:0;
font-size:20px;
font-weight:bold;
color:#ccc;
}
form .warning{color:#600;}
form .exceeded{color:#e00;}

Demostración

]]> http://www.zonaw.com/crear-un-contador-de-caracteres-estilo-twitter/feed/ 0 Eliminar espacios y tabulaciones del código fuente http://www.zonaw.com/eliminar-espacios-y-tabulaciones-del-codigo-fuente/ http://www.zonaw.com/eliminar-espacios-y-tabulaciones-del-codigo-fuente/#comments Mon, 16 Jan 2012 09:26:46 +0000 ZonaW /?p=1646 A pesar de que a la hora de programar y ver el código fuente de nuestra página se hace mucho más sencillo visualizarlo tabulado y con espacion entre etiquetas, una muy buena forma de agilizar la carga de la página es mostrar el código html sin tabulaciones ni espacioes entre tags. Añadiendo la siguiente función conseguiremos comprimir el código de nuestra web:

function limpiarhtml($codigo){
  $buscar = array('/\>[^\S ]+/s','/[^\S ]+\</s','/(\s)+/s');
  $reemplazar = array('>','<','\\1');
  $codigo = preg_replace($buscar, reemplazar, $codigo);
  $codigo = str_replace("> <", "><", $codigo);
  return $codigo;
}

El siguiente es un ejemplo de código html con tabulaciones y espacios entre tags:

<div class="sinestilo">
   <h1>
      <span>
          Recursos Webmaster
      </span>
    </h1>
</div>

Aplicando la función php “limpiarhtml” conseguiremos el mismo código anterior pero en un espacio más reducido y por lo tanto más sencillo de interpretar para los robots de buscadores.

<div class="sinestilo"><h1><span>Recursos Webmaster</span></h1></div>
]]> http://www.zonaw.com/eliminar-espacios-y-tabulaciones-del-codigo-fuente/feed/ 0 Detectar cuando Google visita tu web http://www.zonaw.com/detectar-cuando-google-visita-tu-web/ http://www.zonaw.com/detectar-cuando-google-visita-tu-web/#comments Fri, 13 Jan 2012 11:48:59 +0000 ZonaW /?p=1638 A pesar de que existen otras formas de detectar cuando Google visita nuestra web, la siguiente puede servirnos especialmente cuando lanzamos una web que aún no tiene mucho contenido y por lo tanto, no esperamos que los rastreadores de Google, también llamados spider, nos visiten muy a menudo.

La idea es pegar el siguiente script en tu web y que cada vez que Googlebot se pasa por ella, nos llegue un email a la dirección que nosotros especifiquemos para avisarnos de que el spider de Google ha visitado nuestra página.

<?php if ( strpos( $_SERVER['HTTP_USER_AGENT'], ‘Googlebot’ ) !== false )
{
// Escribe tu correo electronico
$email_address = ‘tu@email.com’;
// Enviar un email cada vez que Google pase por tu web
mail($email_address,’Spider de Google’,'El spider
de Google ha visitado tu pagina: ‘.$_SERVER['REQUEST_URI']);
}
?>

También podemos utilizarlo en nuestro blog para saber la frecuencia de rastreo del sitio, aunque un buen consejo es configurar filtros en el programa de correo electrónico, ya que la cantidad de correos que puede llegarnos al cabo de los días a la bandeja de recibidos puede llegar a ser estresante.

Nota: Este truco también es aplicable a otros user-agent, por ejemplo podríamos conocer con que frecuencia de rastreo el spider de Adsense, visitan nuestra página:

Lista de los user-agent

Googlebot:  Spider de Google

Googlebot/2.1 (+http://www.googlebot.com/bot.html)
Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)

Yahoo! Slurp: Buscador de Yahoo!

Mozilla/5.0 (compatible; Yahoo! Slurp; http://help.yahoo.com/help/us/ysearch/slurp)
Mozilla/5.0 (compatible; Yahoo! Slurp China; http://misc.yahoo.com.cn/help.html)

msnbot: robot de Microsoft Live.

msnbot/1.0 (+http://search.msn.com/msnbot.htm)
msnbot-media/1.0 (+http://search.msn.com/msnbot.htm)

noxtrumbot: Buscador de TPI (paginas amarillas).

noxtrumbot/1.0 (crawler@noxtrum.com)

ia_archiver: Robot de Alexa e Internet Archive.

Snapbot: Robot se encarga de realizar capturas de pantalla para utilizar en el servicio de snapshots.

Snapbot/1.0 (Snap Shots, +http://www.snap.com)

W3C: Robot del validador HTML y CSS.

W3C_Validator/1.555
Jigsaw/2.2.5 W3C_CSS_Validator_JFouffa/2.0
]]> http://www.zonaw.com/detectar-cuando-google-visita-tu-web/feed/ 0