rmbit - La bitácora personal de Ricardo Martín
La bitácora personal de Ricardo Martín
Comentando cosas desde 2004
11 de octubre de 2005

RICO, AJAX para todos

RICO

Por fin la tecnología AJAX, de la que ya hablé en una ocasión, se concreta en un conjunto de librerías de funciones JavaScript, organizada de forma sistemática. El resultado es un proyecto de código abierto llamado RICO. Promete ser una revolución en la programación para la web.

Existen numerosos casos en los que es perfectamente posible sustituir AJAX por Macromedia Flash. RICO lo facilitará. Permite realizar efectos de movimiento, drag and drop y otras acciones de forma fácil y rápida.

Yo por mi parte, ya me pongo a experimentar. Por supuesto os contaré mis descubrimientos.

24 de agosto de 2005

El poder de AJAX

No sólo es un producto de limpieza. No sólo es un equipo de fútbol. AJAX es un conjunto de tecnologías que por sí solas ya existen desde hace bastante tiempo, pero que combinadas confieren a la web una versatilidad nunca antes vista y suponen una clara alternativa a Flash. Se puso de moda hace unos meses, cuando se comenzaron a implementar webs con estas técnicas. Ejemplos del uso de estas tecnologías la vemos en Gmail, Google Maps o la impresionante Protopage, que permite que diseñemos nuestra propia página de inicio.

Podemos decir que AJAX está formado por:

  • Lenguaje de script de cliente JavaScript
  • HTML
  • XML, manipulado a través del componente JavaScript HTTPXMLRequest

A pesar de que creo que aún no hay ningún libro sobre AJAX publicado en castellano, sí es posible encontrar abundante documentación sobre el tema en internet.

Una de las grandes ventajas de AJAX es su dinamismo, ya que es posible recibir y enviar datos (a través de XML) sin tener que recargar las páginas. A través del modelo DOM controlado con JavaScript podemos tener acceso a todos los elementos de una página, así como modificarlos a nuestro antojo de manera dinámica (arrastrar capas, cambiar colores, ocultar o mostrar zonas, etc).

Las ventajas de AJAX son, sin duda, su adecuación a los estándares web y su rapidez de carga y ejecución. Por contra, se trata de un conjunto de tecnologías complicadas y lentas de implementar, aunque sus resultados son siempre espectaculares.

20 de agosto de 2005

Uso de Flash

Herramienta inicialmente desarrollada por FutureWave a mediados de los noventa y comprada posteriormente por Macromedia, el Flash es uno de los estándares de internet más discutidos y polémicos. ¿Quién no ha tenido que desesperarse aguardando a que finalice una interminable introducción en Flash?

En un principio fue concebida como una herramienta para la creación de animaciones exportables a páginas web con cierta facilidad. Con la llegada de las nuevas versiones, estas posibilidades se multiplicaron y hoy día es posible crear todo un sitio web únicamente con Flash, fácilmente actualizable y sin que pese demasiado. Pero para ello posiblemente haya que invertir tres o cuatro veces más tiempo que para desarrollar una web en cualquiera de los lenguajes dinámicos existentes. En mi opinión el resultado no merece la pena.

Tal vez sea un problema de conceptos. Los hay que conciben la red como un mundo multimedia, donde el dinamismo, la apariencia y la espectacularidad está por encima de todo. Y luego otros, como yo, que piensan que la red es un lugar en donde la información debe fuir clara y simple, debe ser de acceso intuitivo y sin grandes aspavientos. Una simple web en HTML puede ser mucho más agradable y rápida que una hecha en Flash.

Hace ya algunos años que aprendí algo de esta herramienta. Permite infinidad de posibilidades, pero no resulta sencillo explorarlas ni aplicarlas. Si conoces bien su lenguaje (ActionScript) tal vez se pueda sacar algo de jugo y no limitarse a las interminables animaciones a 15 fotogramas por segundo que no aportan nada a la web, más bien la lastran y hacen que los visitantes no vuelvan más.

He visto webs increíbles íntegramente hechas en Flash y con un razonable tiempo de carga, pero son las menos. Así que, ante la duda, o eres un gran gurú de la herramienta o, por favor, usa HTML, CSS, PHP y MySQL. Todos lo agradeceremos. Además, Flash es una herramienta propietaria. En teoría para usarla tenemos que haber comprado previamente una licencia.

12 de agosto de 2005

Enlaces permanentes con WordPress

Los enlaces permanentes es uno de los aspectos más importantes de las bitácoras, sobre todo de cara a su gestión y a su indexación por los motores de búsqueda. Configurarlos bien es vital para conseguir una buena accesibilidad y hacer las webs más humanas.

WordPress cuenta con un sistema de configuración de enlaces permanentes bastante avanzado. Mi intención era pasar de un enlace permanente del tipo:

dominio.com/?p=99

que semánticamente no significa nada, a otro del tipo:

dominio.com/2005/08/12/ejemplo-enlace/

mucho más intuitivo y que puede ser indexado para que, por ejemplo, si alguien busca en Google las palabras ‘ejemplo enlace’, nuestra entrada aparezca en las primeras posiciones.

Configurando WordPress

Para conseguir esta organización debemos comprobar que el directorio raíz de la bitácora tenga derechos de escritura. Si no es así tenemos que hacerlo antes de continuar. Cualquier programa de FTP cuenta con esta posibilidad.

Una vez completado este paso entramos en la zona de administración de WordPress y vamos a Opciones/Permalinks. Dentro de esta pantalla se explica bastante claramente las etiquetas o ‘tags’ que podemos utilizar para configurar la estructura de nuestros enlaces permanentes. El formato más utilizado es el que indiqué arriba, con año, mes, día y titulo de la entrada.

Una vez que hemos colocado las etiquetas en la caja de texto titulada ‘Estructura’ también tenemos la posibilidad de usar una categoría base o directorio virtual raíz a partir del cual ‘cuelga’ toda la estructura de directorios virtuales. Después de establecer todos estos parámetros pulsamos el botón para actualizar.

NOTA: Como se indica, si nuestro servidor no es Apache tenemos que poner /index.php/ antes de la estructura.

Lo que WordPress realiza a continuación es escribir un archivo de instrucciones especiales que Apache interpretará cuando sirva una página. Este archivo se llama .htaccess. Con estas instrucciones se enmascararán las direcciones ‘feas’ para que se vean con el formato que hemos configurado.

El funcionamiento de .htaccess

Vamos a ver rápidamente el funcionamiento de este archivo con una instrucción como ejemplo. Cogemos una de las instrucciones de este archivo .htaccess:

RewriteRule ^([0-9]{4})/([0-9]{1,2})/([0-9]{1,2})/?$ /index.php?year=$1&monthnum=$2&day=$3 [QSA,L]

Literalmente la orden ‘reescribe la regla’ de forma que convierte /index.php?year=$1&monthnum=$2&day=$3 (ejemplo: /index.php?year=2005&monthnum=08&day=12) en otra de la forma /2005/08/12/?nombre_post. Esto se consigue a través de expresiones regulares que controlan el formato de salida.

Inconvenientes y mejoras

Todo esto está muy bien si vives en el mundo anglosajón. A pesar de que tengo instalada la actualización que convierte WordPress al castellano, después de completar todo el proceso y conseguir que los enlaces se muestren como yo quiero, veo que las rutas a las categorías están en inglés. Me salen cosas del tipo /category/informatica/ cuando pincho en esta categoría. Mi intención era cambiarlo por /categoria/informatica/, aunque por el momento no lo he conseguido.

Lo primero que se me ocurrió fue editar manualmente el archivo .htaccess para sustituir las conversiones en inglés por otras en castellano. Pero inexplicablemente me fue imposible sobreescribirlo, a pesar de que tiene todos los permisos necesarios. Si alguien sabe como hacerlo, por favor que deje un comentario o me envíe un correo contándomelo. Se lo agradecería.

12 de julio de 2005

Cómo hice rmbit

rmbit es una bitácora, blog o weblog, esto es, un diario o una especie de periódico donde se pueden ir dejando anotaciones que el autor o autores redactan mediante un sistema de publicación llamado gestor de contenidos o en inglés content management system o CMS y que cualquier visitante puede comentar a través de un subsistema que permite la inclusión de notas alusivas al artículo.

La idea es que, a través de estas pequeñas instrucciones, vosotros mismos podáis montaros vuestra propia bitácora. Doy por hecho que tenéis conocimientos avanzados como usuarios de internet, ya que voy a utilizar más de una palabra técnica tipo FTP, PHP.

Elementos necesarios

Los ‘ingredientes’ que necesitamos son:

  1. Alojamiento web. Lo primero que me planteé a la hora de crear el blog fue encontrar el alojamiento adecuado. Hoy día existen muchos sitios web donde ofrecen alojamiento gratuito para weblogs, por ejemplo bitacoras.com o Blogger. Normalmente estos sitios responden a muchas de las necesidades de los que buscan rapidez y huyen de las complicaciones. Pero también cuenta con importantes inconvenientes: tienen un espacio muy limitado, a veces el sistema de publicación es demasiado rígido, abusan de la publicidad o no nos permiten tener un dominio propio (mibitacora.com por ejemplo). Yo al final decidí contratar un alojamiento web con la empresa Abansys.com. Me permite tener bases de datos MySQL ilimitadas y ejecutar scripts en PHP.
  2. Gestor de contenidos. Existen multitud de ellos: TextPattern, Movable Type (de pago) o WordPress. Desde que el sistema de publicación Movable Type pasó a ser de pago, muchos bloggers migraron a WordPress, que hoy día puede considerarse como el más utilizado en todo el mundo. Sin dudarlo elegí este último. Es gratuito, existe traducción al castellano y hay gran cantidad de documentación disponible en internet.

Descargando e instalando WordPress

Desde la web de WordPress me descargué la última versión en paquete ZIP del software (a día de hoy la 1.5.2) y después el módulo de traducción al castellano de aquí. Yo elegi el archivo es_ES_1.5.1.2.zip. Una vez descargados el programa y la traducción descomprimí el paquete ZIP del primero en una carpeta y en otra su traducción. Subí a mi cuenta mediante una aplicación de FTP el contenido de la primera carpeta.

A continuación entré en el panel de control del alojamiento (que en mi caso es el Plesk 7), desde el que se controlan todos los parámetros y busco la opción para crear una nueva base de datos MySQL. Debemos darle un nombre. Yo le puse el que usa WordPress por defecto, que es wordpress. Una vez creada tuve que añadir un nuevo usuario y una contraseña para esa base de datos. En este artículo llamaremos usuario al usuario y password a la contraseña. La dirección del servidor MySQL siempre suele ser localhost, y WordPress siempre la usa por defecto.

Crear base de datos con Plesk

Con todos estos datos fui al navegador para ejecutar por primera vez el WordPress. Automáticamente detecta si existe archivo de configuración. Como no toqué nada aún no se ha creado por lo que se ejecutará un asistente que generará uno. Siguiendo los pasos que se indican e introduciendo los datos necesarios se instalará el sistema y se establecerán las conexiones necesarias con la base de datos. En mi caso todo funcionó a la primera sin problemas. Me generó un usuario admin y una contraseña aleatoria que después podemos cambiar. Cuidado con no olvidarla. Si esto ocurre hay que borrar toda la instalación y la base de datos y volver a empezar de cero.

Pantalla de introducción de los parámetros para la instalación de WordPress

El siguiente paso es instalar la traducción. Como bien se indica en la documentación que se incluye con el módulo y que debemos leer antes de hacer nada, crearemos a través del programa FTP una carpeta llamada languages dentro de /wp-includes/ y colocar allí el archivo .mo. Editamos también el archivo wp-config.php que nos ha creado la instalación y cambiamos la línea define ('WPLANG', ''); por otra que diga define (‘WPLANG’, ‘es_ES’);. Con esto estamos diciéndole a WordPress que el idioma que usaremos en nuestro sistema será el español. Automáticamente reconocerá el modulo que hemos subido.

En definitiva, el archivo wp-config.php si lo editamos deberá tener este aspecto (he omitido los comentarios para hacerlo más claro):

< ?php // ** MySQL settings ** // define('DB_NAME', 'wordpress'); define('DB_USER', 'usuario'); define('DB_PASSWORD', 'password'); define('DB_HOST', 'localhost'); $table_prefix = 'wp_'; define ('WPLANG', 'es_ES'); define('ABSPATH', dirname(__FILE__).'/'); require_once(ABSPATH.'wp-settings.php'); ?>

Si ahora entramos en el sistema de gestión mediante nuestro_dominio/wp-admin/ e introducimos el usuario admin y la contraseña aleatoria y no obtenemos ningún error, ya tenemos WordPress instalado en nuestra cuenta.

Pantalla de entrada a WordPress

A partir de aquí, la administración es bastante intuitiva y la única forma de aprender es probando y experimentando. Os recomiendo que lo primero que hagáis sea cambiar la contraseña.

Pantalla de gestión de entradas de WordPress

Personalizando WordPress: la plantilla rmbit

Una de las características más llamativas de WordPress es la gran facilidad que tiene para personalizar su front-end o parte visible para los usuarios. Hay muchos temas predefinidos que podemos descargarnos, pero también se puede diseñar uno. Eso fue lo que hice. Partiendo del tema ‘Classic‘ que viene por defecto, me construí uno nuevo. Es relativamente fácil personalizar la ubicación de cada elemento de la plantilla mediante las etiquetas o ‘tags‘ de WordPress. Eso ya es cuestión de gustos. Cada tema está compuesto por varios archivos. Algunos de ellos son opcionales:

  • index.php: El cuerpo de cada una de las páginas que se mostrarán.
  • header.php: La cabecera que será incluida en todas las páginas. En el diseño de mi plantilla no aparece.
  • footer.php: El pie de la página.
  • sidebar.php: El menú o barra lateral donde se incluye información adicional sobre la bitácora, así como los enlaces. En el diseño de la plantilla de rmbit, como podéis ver, el logo ha sido incluido en esta barra, omitiendo la cabecera, donde tradicionalmente se incluye el logo o el título de la bitácora.
  • comments.php: El bloque para añadir y visualizar los comentarios.
  • comments-popup.php: La plantilla de gestión de comentarios en el caso de que usemos los comentarios en ventana aparte. En mi caso no lo uso por no resultar demasiado práctico.

Aspecto de los elementos que componen la plantilla de rmbit

La apariencia viene establecida por el archivo de hojas de estilo style.css. Modificando éste podemos obtener infinitas configuraciones diferentes. Lo mejor es que vosotros mismos experimentéis ‘destripando’ los temas que vienen por defecto o los que os descarguéis.

Conclusión

Y hasta aquí, a grandes rasgos, estos son los pasos a dar para crear vuestra bitácora con WordPress. No he entrado en detalles porque ya hay multitud de documentos que explican muy bien todos estos pasos.



rmbit está bajo una licencia de Creative Commons.
Plantilla de diseño propio en constante evolución.
Página servida en 0,067 segundos.
Gestionado con WordPress