Hace ya algún tiempo (demasiado quizá) Juan Andrés me pidió que escribiera un artículo sobre optimización de blogs. Aunque pueda parecer un tema menor, entra de lleno en la categoría de los pequeños detalles que mejoran un blog. También podría parecer aburrido, aunque para mi no lo es en absoluto. A ver si consigo que no se me duerman.
Antes de ver qué podemos hacer para optimizar un blog, es necesario dominar algunos conceptos. Si, el concepto, lo de siempre el coñazo (o no tanto) de la teoría. Un blog ya sea de WordPress, Blogger (del que Álvaro está haciendo un excelente tutorial) o cualquier otro, siempre va a tener estos componentes: html, javascript, css, php (más común), e imágenes. Luego, dependiendo de otros factores como temática, audiencia, etc.., puede haber archivos flash, pdfs, doc, etc. Pero el núcleo del blog, lo que hace que funcione simpre serán los primeros. Vamos a ver qué es y para qué vale cada uno:
HTML
¿Hay alguien leyendo este artículo que no conozca el HTML? Espero que no. El HTML es el andamio sobre el que se construye cualquier página web. Lo que ocurre, como muchas inventos humanos, es que se diseñó para una cosa muy concreta (trasmitir texto e imágenes entre los cerebritos del CERN) y luego se ha ido construyendo sobre el miles de aplicaciones, negocios. En definitiva, el andamio ha tenido que ir siendo mejorado con otros componentes. Por cierto, su última mejora el HTML5 tiene una funcionalidades realmente interesantes que ya incorporan muchas de las carencias que tenía el antiguo HTML, la más destacada, en mi opinión es la capacidad de reproducir vídeo sin necesidad de Flash, ¿será por eso que el iPad no lo incorpora?
Javascript
Como os decía como buen andamio, el HTML es algo rígido. Para darle vida vino en su ayuda el JavaScript. Un lenguaje de programación (se parece a Java solo en la sintaxis) que permite dotar de vida a nuestras páginas HTML. Por ejemplo, alert(“Hola”); nos muestra una ventanita en el navegador que nos dice Hola. En su origen, se utilizó masivamente para validar formularios, y hacer algún tipo de efectos que con se conseguían con el HTML. Cuando parecía que Javascript estaba perdiendo fuelle, y que se iba a relegar a meras funciones de validación y efectos, en favor de Flash u otras opciones, una marca de detergente vino en su ayuda. AJAX. Es broma, AJAX es acrónimo de Asyncronous Javascript and XML, y volvió a poner a Javascript al frente de la programación web. En muy pocas palabras, permite actualizar el contenido de una web, sin necesidad de que se tenga que recargar por completo. ¿Cuántas veces habéis enviado un formulario, esperado para luego ver que os faltaba un campo? Con AJAX se puede validar cada campo en tiempo real, sin necesidad de enviar toda la página a un servidor que compruebe que todo está bien.
Además del AJAX, o mejor dicho a la vez y gracias a su éxito, JavaScript ha sido tomado muy en serio entre la comunidad de programadores Web. De hecho, han surgido muchas librerías javascript (una especie de navajas suizas para hacer más fácil la vida a los programadores) como Dojo, Scriptaculous o jQuery. Sin lugar a dudas, uno de los mayores motivos de su éxito fue la adopción de este modelo de programación por parte de Google en dos aplicaciones rompedoras: Google Maps, y GMail. ¿Os habéis fijado que nunca se recarga la página completamente cuando las usamos? ¿que nunca nos quedamos viendo una página en blanco o una que ponga cargando…? Ahí está la potencia del AJAX y es dónde JavaScript es el amo.
CSS
Si Javascript convirtió a nuestro rígido andamio de HTML en algo dinámico, el CSS le puso guapo. En un principio el HTML tiene un estilo por defecto horrible, y para darle un aspecto más atractivo lo único que se podía hacer era incluir imágenes y hacer formatos con tablas. Muy rudimentario. El CSS vino al rescate. Con uno o varios archivos podemos cambiar la forma en la que nuestro navegador renderiza (nos pinta) los elementos de HTML. Por ejemplo, podemos dar un identificador a un botón (id) y luego en CSS decir que el id tal tiene color rojo, y que su texto es blanco. Pero las bondades del CSS no acaban ahí, permiten que, junto con javascript, podamos modificar cualquier aspecto del HTML sin necesidad de que tengamos que recargar la página. Además, permite que se aplique un estilo u otro en función de las necesidades o preferencias de los usuarios.
Imágenes
Las imágenes siempre han estado en internet desde el principio. Una de las razones de ser del HTML fue que los científicos del CERN, necesitaban intercambiar información de imagenes. Sin embargo, el mundo de las imágenes ha cambiado mucho desde entonces. Ahora mismo hay 3 formatos de imágenes que son los más ampliamente extendidos. Cada uno tiene unas características que le hace más adecuado para una funcion u otra. Son GIF, JPG y PNG. Para la fotografía el formato más extendido es el JPG. Sin embargo, tiene una grave carencia cuando se trata de usarlo en las páginas web. No admite transparencias. Un ejemplo, imaginar que queremos mezclar 3 imágenes en una la cabecera de nuestro blog, poniendo una sobre otra. Con JPGs no se podría porque la de más arriba ocultaría a las demás. Aquí es donde entra en juego el GIF, que sí admite transparencias, peeero, su compresión es mucho peor que la del JPG para fotografías, no así para textos o imágenes con muy poco cambio de color. Ahora sí, nuestra opción sería el PNG que no solo admite transparencias, sino que además tiene un ratio de compresión mejor que el GIF (aunque peor que el JPG). Como veis, el asunto tiene más miga de lo que podría parecer. En cualquier caso, y como norma muy general podéis aplicar lo siguiente, si vais a subir una foto usar JPG. Si vais a subir un rótulo, logo o imagen animada (aunque siempre me ha parecido un poco hortera) usar GIF. Si necesitáis imágenes más complejas con alguna transparencia el PNG será vuestra opción.
PHP
El rey del mundo de los blogs. WordPress, la plataforma sobre la que funciona el propio bloguismo, está construído sobre PHP. Todas las tecnologías anteriores se ejecutan en el navegador de la persona que se conecta a nuestro blog. Pero esto haría muy difícil crear blogs por parte de los autores. Cada vez que quisieran hacer una entrada nueva, tendrían que reescribir la página inicial, y no podríamos añadir comentarios, buscar artículos, mostrar categorías o etiquetas. Mal asunto ¿no? Para dotar de potencia a un blog (o cualquier otra aplicación de internet) hacen falta bases de datos que se encarguen de estas búsquedas. El problema es que no podemos instalar una base de datos para cada usuario que se conecte al blog. Por tanto, las bases de datos tienen que estar en un único sitio, el servidor desde el que se van mostrar nuestras páginas. Ahí es donde PHP hace su magia. Se encarga, entre otras muchas cosas, de hablar el lenguaje del servidor (HTML) y de la base de datos (SQL). De esta forma, se pueden almacenar todos los artículos en tablas, hacer búsquedas, categorías, plugins, etc y encargar a PHP que nos busque esa información y nos la muestre en HTML. Genial ¿no?. En realidad hace muchas más cosas, como proporcionarnos herramientas para poder configurar la propia base datos sin ni siquiera saber que existe a través de un panel de administración. PHP no es la única tecnología de servidor, ni la única usada para hacer blogs, pero sí la más extendida, entre otras cosas porque es OpenSource. Es decir, no depende de una compañía determinada, sino de un grupo de desarrolladores de varias compañías, lo que la hace menos influenciable por las estrategias o vaivenes particulares de cada empresa.
Toc, toc. ¿Estáis aún ahí? Espero no haberos dormido. Si es así, no os preocupéis, podréis sobrevivir como bloggers sin saber esto, pero tarde o temprano os pasará algo y vendréis a pedirme que os ayude. ¡Ni hablar, no haberos dormido! Es broma. Si tenéis alguna duda podéis contactar conmigo a través de bloguismo. Lo que no os garantizo es que sepa resolverla (sobre todo si es de PHP del que solo sé el “Hola Mundo”).
En un próximo artículo veremos cómo estos 5 elementos influyen decisivamente en el rendimiento de nuestros blogs, y por qué. En un capítulo final veremos qué podemos hacer para que nuestro blog vaya como un rayo, y que nuestros lectores no tengan la tentación de ir a otra página porque el nuestro tarda mucho en cargar.
(La imagen que ilustra este artículo es de psd y ha sido publicada bajo Licencia Creative Commons)
Hola, me llamo Aitor Calero, estoy casado y soy padre de una niña. Internet ha sido el medio en el que me he ganado la vida desde que empecé a trabajar, sobre todo haciendo webs de mapas (como las de Google Maps). Ahora estoy en fase de aprendizaje para ser blogger. Me podéis leer en Un Cafelito a las Once, con temas sobre tecnología y estilo de vida.
4 comentarios en «No hagas esperar a tus lectores. Optimiza tu blog (parte 1)»
Genial información, estoy deseando ver la siguiente parte.
El único problema es que aprender estos lenguajes es bastante difícil si vas sólo por tu cuenta.
Un saludo.
Bueno, en realidad lo único necesario para aprender bien estos lenguajes, es un un proyecto interesante en el que trabajar. Luego solo hay que ir practicando y buscando buena información por internet.
una introduccion buenisma, para una serie que seguro va ser de miedo… sobre todo para los que somos autodidactas
Ha sido muy interesante. De hecho, estaré atenta a los siguientes artículos para ver si solucionas unas cuantas dudas que tengo como cavernícola digital que soy. Aunque da miedo lo que he aprendido de htlm y css este año a base de ensayo-error.
En cumplimiento con Ley 34/2002, de servicios de la sociedad de la información te recordamos que al navegar por este sitio estás aceptando el uso de cookies. Aceptar
Privacy & Cookies Policy
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
Genial información, estoy deseando ver la siguiente parte.
El único problema es que aprender estos lenguajes es bastante difícil si vas sólo por tu cuenta.
Un saludo.
Bueno, en realidad lo único necesario para aprender bien estos lenguajes, es un un proyecto interesante en el que trabajar. Luego solo hay que ir practicando y buscando buena información por internet.
una introduccion buenisma, para una serie que seguro va ser de miedo… sobre todo para los que somos autodidactas
Ha sido muy interesante. De hecho, estaré atenta a los siguientes artículos para ver si solucionas unas cuantas dudas que tengo como cavernícola digital que soy. Aunque da miedo lo que he aprendido de htlm y css este año a base de ensayo-error.