ZonaW » Tags HTML 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 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 Eliminar o cambiar el enlace “autor” en WordPress http://www.zonaw.com/eliminar-o-cambiar-el-enlace-autor-en-wordpress/ http://www.zonaw.com/eliminar-o-cambiar-el-enlace-autor-en-wordpress/#comments Fri, 03 Feb 2012 10:00:27 +0000 ZonaW /?p=1715 Siempre es bueno mantener el enlace de autor de los artículos en los blogs donde por lo general existe más de un autor. El enlace nos puede llevar a una página de archivo con todos los artículos de ese autor en exclusiva, a una página de presentación preparada con información sobre él, artículos, foto… o a un enlace fuera de la página por ejemplo, a su cuenta de Twitter, perfil de Facebook, blog…

Por lo general en WordPress, la estructura de página de autor es la siguiente:

http://www.EJEMPLO.es/author/NOMBRE

Para cambiar el nombre por defecto “author” o cambiar la url podemos hacer lo siguiente:

Añadir en el fichero “functions.php” el siguiente código:

function cambiar_author_permalink() {
global $wp_rewrite;
$wp_rewrite->author_base = ‘autor’;
$wp_rewrite->author_structure = “/” . $wp_rewrite->author_base . ‘/%author%’;
add_rewrite_rule(‘autor/([^/]+)/?$’, ‘index.php?author_name=$matches[1]‘, ‘top’);
}
add_action(‘init’,'cambiar_author_permalink’);
Nos quedará una URL como la siguiente, cambiando “author” por “autor”
http://www.EJEMPLO.es/autor/NOMBRE

Otra opción, es redirigir esa página de autor a otra como puede ser su blog personal, facebook o Twitter. Para ello bastará con eliminar todo el código anterior y sustituirlo por un simple enlace de texto.
Por otro lado, si somos los únicos autores de nuestro blog, para evitarnos un montón de enlaces que carecen de utilidada, una buena medida es eliminar el código de nuestro theme que haga referencia a la página de autor y por supuesto los enlaces en cada uno de los artículos.
Localizamos y eliminamos de nuestra plantilla (generalmente en el fichero “single.php”) el siguiente código:
< ?php printf( esc_attr__( ‘About %s’, ‘twentyten’ ), get_the_author() ); ? >
]]> http://www.zonaw.com/eliminar-o-cambiar-el-enlace-autor-en-wordpress/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 Cambiar el cursor del ratón http://www.zonaw.com/cambiar-el-cursor-del-raton/ http://www.zonaw.com/cambiar-el-cursor-del-raton/#comments Thu, 19 Jan 2012 11:31:58 +0000 ZonaW /?p=1669 Aunque parezca que es una práctica que ya no se lleva a cabo, cambiar el cursor o puntero del ratón puede servirnos en más de una ocasión para mejorar la accesibilidad en nuestra página, así como señalar por ejemplo, cuando existe un enlace con el puntero de la mano, cunado se muestre algún mensaje de ayuda con el puntero de una interrogación o simplemente punteros con flechas de todo tipo.

Para conseguir adaptar el puntero o cursor del ratón a cada situación nos bastará con añadir un estilo en nuestra hoja de CSS para forzar a nuestro navegador y que de este modo no se rija por las normas convencionales de los punteros, sino con lo indicado en la hoja de estilos.

Hay dos posibilidades de cambiar el cursor en nuestra web, para todo el documento o para partes del documento determinadas.

Cambiar el cursor del ratón a todo el do cumento:

<html>
<title>Cambiar el cursor del raton</title>
<head>
<style type="text/css">
<!--
body {cursor: crosshair}
-->
</style>
</head>
<body>
</body>
</html>

Cambiar el cursor del ratón a algunas partes dentro de un documento:

<html>
<title>Cambiar el cursor del raton</title>
<head>
</head>
<body>
<h1 style="cursor: pointer">pointer (mano)</h1>
<h1 style="cursor: move">move (cruz con flecha)</h1>
<h1 style="cursor: help">help (signo de pregunta)</h1>
<h1 style="cursor: default">default (flecha)</h1>
<h1 style="cursor: crosshair">crosshair (cruz)</h1>
<h1 style="cursor: text">text (I-beam)</h1>
<h1 style="cursor: wait">wait (reloj de arena)</h1>
<h1 style="cursor: nw-resize">nw-resize (flecha al noroeste)</h1>
<h1 style="cursor: ne-resize">ne-resize (flecha al noreste)</h1>
<h1 style="cursor: se-resize">se-resize (flecha hacia el sudeste)</h1>
<h1 style="cursor: sw-resize">ne-resize (flecha hacia el sudoeste)</h1>
<h1 style="cursor: n-resize">n-resize (flecha hacia arriba)</h1>
<h1 style="cursor: s-resize">s-resize (flecha hacia abajo)</h1>
<h1 style="cursor: e-resize">e-resize (flecha a la derecha)</h1>
<h1 style="cursor: w-resize">w-resize (flecha a la izquierda)</h1>
</body>
</html>

Recordar que también se puede personalizar el puntero del ratón mediante, una imagen o gif animado.

]]> http://www.zonaw.com/cambiar-el-cursor-del-raton/feed/ 0 Autocompletar etiquetas http://www.zonaw.com/autocompletar-etiquetas/ http://www.zonaw.com/autocompletar-etiquetas/#comments Tue, 17 Jan 2012 16:03:01 +0000 ZonaW /?p=1651 TaggingTools es un plugin gratuito para jQuery que sirve para añadir en nuestra página la funcionalidad de generar automáticamente etiquetas (tags) mientras escribimos en cualquier campo input con solo teclear las primeras letras y presionar enter.

Estas etiquetas además de generarse mientras escribimos también nos serán sugeridas de forma similar a otros métodos de autocompletado, como por ejemplo, los autocompletados de las cajas de búsqueda.

En la siguiente imagen se muestra cómo se generan las etiquetas con este plugin activo:

TaggingTools

Para utilizarlo añadir lo siguiente:

$(".tagbox").tagbox() .find(".input input") .autocomplete();

Podemos ver una demostración de los 3 tipos de funciones, prestando especial atención al campo input donde se sugieren las palabras o tags en base a lo que estemos tecleando. Sencillo de utilizar y apenas son necesarias unas líneas de código para implementarlo.

]]> http://www.zonaw.com/autocompletar-etiquetas/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 Reproductor de video de código abierto basado en HTML y Javascript http://www.zonaw.com/reproductor-de-video-de-codigo-abierto-basado-en-html-y-javascript/ http://www.zonaw.com/reproductor-de-video-de-codigo-abierto-basado-en-html-y-javascript/#comments Tue, 10 Jan 2012 09:58:57 +0000 ZonaW /?p=1624 Video-Player-Sample

Video Player Sample es el nombre del reproductor de video de código abierto que a lanzado el equipo de Chrome Web. Ofrece soporte para múltiples formatos de video como: MP4 (video H.254 y AAC audio), OGG/OGV (video Theora y Vorbis audio), WEBM (video VP8 y Vorbis audio) y es compatible con las últimas versiones de los navegadores: Safari, Google Chrome, Firefox 4+, Internet Explorer 7+, Opera 11.

También nos ofrece la posibilidad de compartir nuestros video a través de las redes sociales más conocidas (Twitter, Facebook y Google+), aunque no dispone de la opción de ofrecer el código <embed> para que otros usuarios puedan incrustar el reprocuctor en su web.

Toda la configuración para la reproducción se realiza mediante los ficheros: config.json y data.json (puedes encontrar toda la información sobre su configuración en Appspot). El proceso principal es el ApplicationController que carga los ficheros JSON, episodios y datos de categorías, registra los componentes y controladores específicos y establece los enlaces.

Lo mejor es que puedes ver su código fuente y utilizarlo bajo la licencia libre (Apache License v2.0). Un buen ejemplo de uso es la creación de un portal de videos.

Ver demostración de Video Player Sample.

]]> http://www.zonaw.com/reproductor-de-video-de-codigo-abierto-basado-en-html-y-javascript/feed/ 0 Cómo solucionar el problema de ñ y acentos en PHP http://www.zonaw.com/solucionar-problema-acentos-php/ http://www.zonaw.com/solucionar-problema-acentos-php/#comments Thu, 05 Jan 2012 16:04:30 +0000 ZonaW /?p=1619 Un problema que se nos suele presentar a muchos webmasters cuando programamos en PHP está relacionado con los problemas al mostrar caracteres latinos como la ñ y las letras con acentos.

En muchas ocasiones nos ocurre que al realizar una llamada a los datos procesados interfiere algún tipo de limpiador anti-injecciones de código, que nos genera un cambio en la estructura del texto en un formato diferente al de UTF-8 que es el utilizado para que todos los símbolos y caracteres latinos utilizados sean reconocidos correctamente.

El primer paso para solucionar estos problemas con caracteres latinos es colocar una llamada al inicio con <meta chartset=”utf-8″ /> y verificar que nuestra base de datos tenga la misma configuración. Con esto descartamos que el problema sea de tipo de lectura a nuestro documento.

La causa de estos problemas de caracteres suele estar en la siguiente función, que realiza un ajuste completo de la string y convierte el texto en entidad independiente de HTML. Al realizar este proceso, se convierte a un estilo por defecto que no incluye ñ y acentos. Muy común en sitios que utilizan un CMS (sistema de gestión de contenidos) que llaman datos procesados con esta función:

function limpiarString($string) //función para limpiar strings
   {
      $string = strip_tags($string);
      $string = htmlentities($string);
      return stripslashes($string);
// al ejecutar en mySQL agregar al final mysql_real_escape_string($string);
   }

Por eso si utilizas un CMS es muy probable que tenga la anterior función de limpieza de código, no olvides añadir el siguiente código a la función htmlentities()

$string = htmlentities($string, ENT_QUOTES,'UTF-8');

La explicación del código anterior es que ENT_QUOTES es una propiedad que tiene la función que convierte las comillas ( ” ) y la comilla simple  ( ‘ ). Y el ‘UTF-8′ especifica a la función que el tipo de conjunto de caracteres (charset) que queremos usar es el UTF-8, el cual contiene los caracteres latinos como la ñ y las letras con acentos.

]]> http://www.zonaw.com/solucionar-problema-acentos-php/feed/ 0 Conseguir un color aleatorio utilizando PHP http://www.zonaw.com/conseguir-un-color-aleatorio-utilizando-php/ http://www.zonaw.com/conseguir-un-color-aleatorio-utilizando-php/#comments Tue, 27 Dec 2011 18:53:22 +0000 ZonaW /?p=1597 Con la siguiente función obtendremos un color aleatorio en formato hexadecimal en nuestra página. Nos puede servir por ejemplo para utilizar un color de fondo aleatorio en nuestra web.

<?php
function randomColor() {
$str = '#';
for($i = 0 ; $i < 6 ; $i++) {
$randNum = rand(0 , 15);
switch ($randNum) {
case 10: $randNum = 'A'; break;
case 11: $randNum = 'B'; break;
case 12: $randNum = 'C'; break;
case 13: $randNum = 'D'; break;
case 14: $randNum = 'E'; break;
case 15: $randNum = 'F'; break;
}
$str .= $randNum;
}
return $str;
}
$color = randomColor();
echo '<span style="color:'.$color.'">Random color: '.$color.'</span>';
?>

Puedes ver el código en funcionamiento en Simple random color generator.

]]> http://www.zonaw.com/conseguir-un-color-aleatorio-utilizando-php/feed/ 1 Añadir efecto nieve en tu web http://www.zonaw.com/efecto-nieve-en-tu-web/ http://www.zonaw.com/efecto-nieve-en-tu-web/#comments Thu, 15 Dec 2011 09:31:41 +0000 ZonaW /?p=1558 La navidad está cada vez más cerca y con ella la oportunidad que tienen muchos webmasters de decorar sus webs para la ocasión, ya sea añadiendo elementos navideños al logo de nuestros sites, como: Papá Noel, trineos, gorros navideños, dulces… y sobre todo nieve, mucha nieve.

Aunque pueda parecer cosa del pasado, añadir el efecto nieve a nuestra web, parece que vuvleve a estar más de moda que nunca este año, después de encontrarse el siguiente huevo de pascua en Google, ‘Let it snow‘ (‘Deja que nieve’)

Para conseguir un efecto tipo tipo nieve en nuestro site tendremos que copiar el siguiente código Javascript justo después de la etiqueta <body> de nuestro site.

<script language=”JavaScript1.2″>

//Configurar la ruta de la imagen
var snowsrc=”nieve1.gif”
// Configurar el tipo de nieve
var no = 10;

var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;

if (ns4up||ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();

for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write(“<layer name=\”dot”+ i +”\” left=\”15\” top=\”15\” visibility=\”show\”><a href=\”http://dynamicdrive.com/\”><img src=’”+snowsrc+”‘ border=\”0\”><\/a><\/layer>”);
} else {
document.write(“<layer name=\”dot”+ i +”\” left=\”15\” top=\”15\” visibility=\”show\”><img src=’”+snowsrc+”‘ border=\”0\”><\/layer>”);
}
} else if (ie4up||ns6up) {
if (i == 0) {
document.write(“<div id=\”dot”+ i +”\” style=\”POSITION: absolute; Z-INDEX: “+ i +”; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\”><a href=\”http://dynamicdrive.com\”><img src=’”+snowsrc+”‘ border=\”0\”><\/a><\/div>”);
} else {
document.write(“<div id=\”dot”+ i +”\” style=\”POSITION: absolute; Z-INDEX: “+ i +”; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\”><img src=’”+snowsrc+”‘ border=\”0\”><\/div>”);
}
}
}

function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout(“snowNS()”, 10);
}

function snowIE_NS6() { // IE and NS6 main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = ns6up?window.innerWidth : document.body.clientWidth;
doc_height = ns6up?window.innerHeight : document.body.clientHeight;
}
dx[i] += stx[i];
if (ie4up){
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
else if (ns6up){
document.getElementById(“dot”+i).style.top=yp[i];
document.getElementById(“dot”+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
}
}
setTimeout(“snowIE_NS6()”, 10);
}

if (ns4up) {
snowNS();
} else if (ie4up||ns6up) {
snowIE_NS6();
}

</script>

Recordar configurar la ruta de la imagen de los copos de nieve. Estos son algunos ejemplos que puedes utilizar.

nieve1 nieve3nieve2

Para terminar, recuerda que con esta misma técnica y código podrás realizar que caigan de tu web: estrellas, dinero… cualquier imagen que tenga que ver c on la temáticas de website.

]]> http://www.zonaw.com/efecto-nieve-en-tu-web/feed/ 0