Category Archives: Programación

Crear un icono (favicon) para nuestra web

15 abril 2008 — Blogs, Internet, Programación, Wordpress & Seo

   

Uno de los detalles que no podemos olvidar cuando nos dedicamos a "tunear" nuestro blog o web, es el favicon, es decir, el icono que se mostrará en la barra de direcciones del navegador, justo delante de la misma:

favicon

Cómo conseguir el nuestro? Es muy sencillo. En primer lugar recomiendo usar alguna de las herramientas online para tal propósito:

El primero es el que he usado yo siempre. El segundo tiene un diseño muchísimo más "currado", y además nos permite editar el icono generado, como si de una aplicación tipo Microangelo se tratara. No obstante, creo que a pesar del aspecto, el icono que genera la primera herramienta es de mejor calidad, menos pixelado. El tercero, sinceramente, no lo he probado nunca…

En cualquier caso, vamos a tener la opción de elegir una imagen de nuestro disco duro para generar a partir de ella el archivo "favicon.ico" (el icono para nuestro website).

Una ven tengamos dicho archivo, hemos de subirlo a la carpeta raíz de nuestra web vía ftp (aquellos que se hayan instalado wordpress, sin duda estarán acostumbrados a estos menesteres).

¿Y ya está? Bueno, en algunos servidores bastará con hacer esto, al tener el favicon.ico en el directorio raíz (principal) de la web, el icono se mostrará automáticamente para todas las páginas. En otros casos, será necesario añadir la siguiente linea en aquellas páginas donde queramos que aparezca el icono:

<link rel="shortcut icon" href="/favicon.ico" />

¿Dónde añadimos este galimatías? Debemos editar para ello directamente el cógido html, y colocarlo entre las etiquetas <head> y </head>. De nuevo, si estamos tratando con wordpress, deberemos editar el archivo header.php (en el 99% de los casos se llamará así), y situarlo como decía en la sección "head" del html. Por ejemplo:

<head>
<title>LinkAlicante</title>
<link rel="shortcut icon" href="/favicon.ico" />
...
...
</head>

Que lo disfrutéis! :)

Un par de cambios en el theme

15 abril 2008 — About Me, Blogs, Curiosidades, Internet, Programación, Wordpress & Seo

   

Inspirado en parte por El Pachinko, he agregado la conocida "tag cloud" (nube de etiquetas) en el -modificado previamente por mí- theme de LinkAlicante, en el sidebar del mismo, que en este caso no se encuentra en el lateral, sino en el pie del blog.

Para ello, y puesto que la sidebar del theme no está widgetizada (la original inferior, la que agregué yo a la izquierda sí lo está), he hecho uso del template tag de wordpress:

<?php wp_tag_cloud(''); ?>

Este sencillo fragmento de código php nos muestra la nube de etiquetas allí donde lo incluimos.

Ya puestos, he cambiado el blogroll, para eliminar las descripciones de cada link, y ahorrar un poco de espacio, sustituyendo la obsoleta llamada:

<?php //get_links(-1, '<li>', '</li>', ' - '); ?>

por la que se debe usar hoy en día:

<?php wp_list_bookmarks('categorize=0&title_li=0'); ?>

Los parámetros categorize=0 y title_li=0 son para que no muestre las categorías en el blogroll. Y eso es todo. Qué opinas, es demasiado grande la sidebar en el pie del blog??

Un poco de html + css

14 marzo 2008 — Internet, Programación, Wordpress & Seo

   

Hace unos días me comentaron en LinkAlicante si sería posible poner mi tema para descargar (el Fontella, con las modificaciones que le he hecho, como la botonera superior, o la “semi-widgetización” de la nueva sidebar creada a la parte izquierda). De momento, hoy os voy a dejar el html y css de la botonera superior:

/** PRIMERO EL HTML **/

<div id=”header”>
 <?php if (is_home()) $cls = ‘class=”current_page_item”‘; else $cls = “”; ?>
 <div id=”menu1″>
  <ul>
   <li <?=$cls?>><a href=”<?php echo get_settings(‘home’); ?>”>Inicio</a></li>
   <li><a href=”#sidebar”>Menu – Categorías</a></li>   
   <?php wp_list_pages(‘title_li’); ?>
  </ul>
 </div>
</div>

/** Y LUEGO EL CSS **/

#menu1 ul{
 margin: 0;
 padding: 0;
}
#menu1 ul li{
 float:left;
 display: inline;
 margin: 0;
 padding: 0;
}
#menu1 ul li a{
 padding: 8px 15px;
 display: block;
 text-decoration: none;
}
#menu1 ul li a:link, #menu1 ul li a:visited{
 background: #222 url(images/menu.png) top left repeat-x;
 color: #ddd;
 border-left: 1px solid #333;
 border-top: 1px solid #333;
}
#menu1 ul li a:hover, #menu1 ul li a:active{
 background: #333 url(images/menu.png) 0 -100px repeat-x;
 color: #fff;
 text-decoration: none;
 border-left: 1px solid #444;
 border-top: 1px solid #444;
}
#menu1 ul li.current_page_item a:link, #menu1 ul li.current_page_item a:visited{
 background: #06c;
 color: #fff;
 border-left: 1px solid #09f;
 border-top: 1px solid #09f;
}

Igual no está demasiado optimizado, pero es el que ahora mismo tengo…

Redirección 301 con mod_rewrite

13 marzo 2008 — Google, Internet, Programación, Wordpress & Seo

   

Desde hacía un tiempo tenía la manía de querer cambiar la URI de mi sección de senderismo de:

http://www.linkalicante.com/duendecillos-del-bosque-senderismo-en-alicante

a esta otra:

http://www.linkalicante.com/senderismo-en-alicante

Eso sí, quería hacerlo de forma que la URI no “perdiese valor”, por decirlo de alguna manera. Es decir, que ni los buscadores, ni los usuarios, se encontrasen con el típico mensaje de “404 NOT FOUND”. La manera óptima de lograr esto es mediante una redirección 301. Para hacerlo, he agregado esta linea:

Redirect permanent /duendecillos-del-bosque-senderismo-en-alicante http://www.linkalicante.com/senderismo-en-alicante

a mi archivo .htaccess, de tal forma que le decimos al navegador (y, al hacerlo de esta forma, también a los robots de los buscadores, que reciben un codigo “301 moved permanently”) que se ha hecho la redirección.

Espero no haber metido la pata! :)

PD: claro, también me he ido a administrar mi página en el wp-admin, y he cambiado el “nombre para URL” del antiguo al nuevo más corto.

Buscando alternativas a Adobe Dreamweaver

14 febrero 2008 — Internet, Programación

   

Hoy me he decidido a probar Aptana (hace tiempo me lo recomendó un amigo) y darle una oportunidad como entorno de desarrollo web, frente al sempiterno Adobe Dreamweaver. La principal razón, aunque seguramente será una tontería, es que Dreamweaver no soporta de una forma “cómoda” la edición de los archivos .htaccess, tan necesarios cuando queremos usar mod_rewrite en nuestro sitio web (al menos en remoto, trabajando directamente contra el ftp, no lo he conseguido, seguramente debe haber una forma, pero no la he encontrado, parece ser que Dreamweaver no lo permite por cuestión de seguridad…)

aptana

El caso es que Aptana sí que lo permite sin ningún problema… hasta ahí bien… Pero la verdad es que todavía le queda bastante al proyecto (aunque tiene MUY buena pinta) para alcanzar la usabilidad de Dreamweaver (que seguramente será cuestión de acostumbrarse). Además aptana parece que tiene soporte “de serie” para Ajax, parte imprescindible de la no tan nueva Web 2.0. En fin, que no me acaba de convencer todavía Aptana, en parte también porque necesitamos tener instalado el Java SE como requisito, y finalmente son más de 130 MB en Ram para mover todo esto (Dreamweaver CS2 utiliza unos modestos 42 MB).

Y buscando otras alternativas a Dreamweaver, me he encontrado con esta más que curiosa TABLA COMPARATIVA DE EDITORES HTML en la Wikipedia, que realmente no tiene desperdicio. La pena, que está en inglés, pero vamos, que me parece que voy a probar más de uno de los editores de la lista…

Tú que opinas de todo esto? Existe realmente una alternativa a Dreamweaver??