Foro phpBB

Como estrategia de promoción de nuestra web, y para dotarla de servicios de valor añadido hemos decidido crear un foro.

Hemos decidido usar phpBB, que es un sistema de foros gratuito desarrollado en PHP, y bajo licencia publica general (GNU), su implementación es muy sencilla, y las posibilidad de personalización muy amplias.

El proceso de instalación y configuración esta totalmente automatizado (rollo web 2.0), cualquiera con unos mínimos conocimientos puede montarlo.

El primer paso es descargarnos el paquete de instalación, con esto obtendremos un fichero ZIP comprimido, el cual pasamos a descomprimir en nuestro ordenador.

Una vez descomprimido, nos conectaremos vía FTP con nuestro servidor, y  crearemos una carpeta nueva, que sera el lugar donde se instalara el foro, en nuestro caso www.rezetas.tk/foro (carpeta foro). Una vez creada la carpeta, subiremos via FTP todo el contenido del fichero que hemos descomprimido, y lo colocaremos en la carpeta recién creada.

Antes de seguir con la instalación de phpBB, si no la tenemos creada, debemos crear una base de datos en nuestro servidor. En nuestro caso ya tenemos una base de datos creada, para los datos de las rezetas, podriamos usar esta misma base de datos, aunque ya que no tenemos restricciones de número de bases de datos, hemos decidido crear una base de datos nueva y separada de la que alberga el contenido de la web. Una vez creada, guardamos los datos de conexión, ya que nos haran falta al iniciar la instalación de phpBB.

Ya estamos listos para empezar la instalación de nuestro foro, dicha instalación la realizamos con el navegador web, y siguiendo un comodo he intuitivo asistente.

Para acceder al instlador tecleamos la url donde hemos copiado los ficheros anteriormente www.rezetas.tk/foro y nos aparece una pantalla como la siguiente.

Pulsamos en la pestaña INSTALL , seleccionamos el motor de base de datos que quermos usar (MySql en nuestro caso), y seguimos con el siguiente paso.

Rellenamos los datos de conexión que hemos anotado anteriormente, seguimos avanzando. Normalmente el apartado 2 y 3, no será necesario rellenar. En nuestro servidor de hosting, si que debe rellenarse el parado 2, ya que las bases de datos no son accesibles via localhost. Dependera del servicio de hosting que estemos usando, por defecto en blanco.

Si la conexión es correcta, en este paso se crearan todas las tablas necesarias para que funcione el módulo de foros. 

A parir de aquí ya "simplemente" se trata de configurar el foro a nuestro gusto, definir usuarios, administradores, crear foros, aplicar estilos, cambiar idioma, y un largo etc.

Hay que acordarse de eliminar la carpeta install, donde se hallan los scripts de instalación, hasta que no la eliminamos el foro no esta activo.

Optimización Web

Como ya comente en entradas anteriores, vamos a dedicar máximo esfuerzo a que la web de nuestra práctica este optimizada.

Antes de empezar, tenemos una cosa clara, es que cuanto más pequeños sean los ficheros (html, cssl, jpg,...) y cuantas menos peticiones realicemos, más rápida será la página. Pero claro,  para obtener unos resultados aceptables, requerimos de unos mínimos.

Las herramientas que usaremos, será un analizador de velocidad y rendimiento web. En el guión de la práctica, se nos propone usar, WebSiteOptimization .  En mi opinión esta herramienta está un poco anticuada (última versión Sept 2008), constantemente hace referencia a modems de 56K (los cuales han pasado a la historia), por ejemplo en el apartado de tamaño dice "Consider reducing total page size to less than 100K", partiendo que por ejemplo jQuery v1.9.0 en su formato minificado pesa 91K, conseguir el objetivo de 100K es prácticamente imposible. Otra pega que le veo, es que en el fondo es publicidad de un libro, y efectivamente te indica que cosas están mal de nuestra web, pero nos remite al libro para solucionarlo.

En nuestro caso vamos a utilizar tres páginas alternativas, que desde mi punto de vista nos ofrecen una información más actualizada y completa, así como una guía para solucionar los problemas.

Las dos primeras serán gtMtrix.com y PingDom Tools, y la tercera Page Speed de Google Developers. Aunque las puntuaciones mejoran simultáneamente en las tres, damos especial importancia a la de Google, porque en el fondo, durante toda la práctica hemos usado herramientas de google (sites, blogger, youtube, trend,drive,...), y nuestro objetivo es mejorar para conseguir posicionamiento en las búsquedas, búsquedas de Google.

La primera vez que evaluamos nuestra página, fue bastante desolador, parecía que todo estaba mal, pero poco a poco ha ido mejorando.

Antes de empezar a realizar los cambios que recomendaban los analizadores, mi primera intuición es que habría mucho trabajo a realizar en la codificación HTML, pero me equivoque, el apartado que había que manipular era la configuración del servidor, y el mecanismo para hacerlo era mediante el uso del fichero .htaccess.

Como que hasta la fecha nunca había editado este fichero, ni sabia que podía hacerse en él, toco tirar de buscador y documentarse sobre el tema.

En este fichero haremos varias coas importantes para mejorar el rendimiento de nuestro sitio:

• Definir que todas las cabeceras servidas son UTF-8, y sacar esta información de nuestro código HTML
• Habilitar compresión, las paginas servidas serán comprimidas con gZip, lo cual permitirá mejorar uno de los objetivos principales, reducción de tamaño.
• Especificar cache de navegador, se trata de definir un tiempo de caducidad alto para los elementos estáticos de nuestra web, de esa forma no es necesario que cada vez se recarguen, y el navegador puede usarlos de la cahe.
• Y otros pequeños cambios, como desactivar ETag, ...

Este es un estracto del fichero .htaccess con los diferentes ajustes que he realizado:

AddDefaultCharset UTF-8 Header unset ETag FileETag None # BEGIN Cache-Control Headers <ifModule mod_headers.c> <filesMatch "\.(ico|jpe?g|png|gif|swf)$"> Header set Cache-Control "max-age=2592000, public" </filesMatch> ...

# END Cache-Control Headers # compress text, HTML, JavaScript, CSS, and XML AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html ...

Con esto ya hemos mejorado bastante, hemos conseguido reducir el tamaño de los ficheros servidos, y hacemos un uso más óptimo de la cache. 

El objetivo ya lo dijimos al principio de esta entrada, reducir el tamaño de los ficheros, y reducir el número de peticiones. 

Sigamos reduciendo los tamaños de ficheros:

• Imagenes, por supuesto debemos utilizar imágenes que nos aporten la mejor calidad con el menor tamaño, JPG. Pero aún suponiendo que estamos usando un formato adecuado, es bueno pasar todas las imagenes por un compresor de imágenes como Smush.it de Yahoo, esto nos permitirá ahorrarnos unos cuantos K. El siguiente punto importante con las imágenes en no servir imágenes de tamaño mayor al que queremos visualizar, es un derroche de bytes el tener que reescalar una imagen, las imágenes deberian ser servidas al tamaño que queremos visualizarlas.

• Minimizar CSS, JS. Se trata de eliminar los datos innecesarios de los ficheros CSS y JS, mayormente espacios en blanco, comentarios, tabulaciones. En lar red podemos encontrar muchas herramientas para reducir el tamaño (minify tools), nostros usamos http://refresh-sf.com/yui/ . Los JS ademas de minificar también podemos aplicarle Obfuscation, nosotros no lo hemos usado, este método lo que hace es renombrar variables y nombres de funciones, a nombres más cortos, para así ahorrar bytes. El resultado de minify y obfuscation, es un código fuente prácticamente ilegible, pero eso no nos importa, lo importante es que funcione la web bien, y rápido. Nosotros nos guardamos una copia de código fuente sin reducir para su mantenimiento  y le aplicamos la reducción antes de subirla al servidor. Aunque no lo hemos hecho, el código HTML también se puede minimiizar.

En este punto ya no podemos reducir mucho más los tamaños, ahora vamos a intentar reducir el numero de peticiones http. Como sabemos cada petición tiene un coste de bytes (cabeceras de petición y respuesta), la idea es combinar en la medida de lo posible todos los ficheros JS y CSS en un solo fichero de cada tipo, en lugar de tener n ficheros .JS, concentrar todo nuestro JS en un solo fichero, con lo que solo haremos una petición GET. Esto no nos ha llevado mucho trabajo, simplente combiar los ficheros.

El analizador nos informa que ahora donde hacemos más peticiones es al cargar las imágenes para montar  menús, logos, etc, y nos sugiere que apliquemos la técnica de CSS sprites. Otra vez toca documentarse, esta técnica consiste en unificar todas las pequeñas imágenes de nuestra web, en una sola (de esa forma solo haremos una petición ), y para visualizarlas haremos referencia a las coordenadas y tamaño de la porción de imagen que queremos usar. Suena complicado, pero es fácil encontrar generadores de CSS sprites que nos juntan las imágenes  y nos devuelven un CSS con los tamaños y coordenadas de cada imagen, en nuestro caso usamos la siguiente imagen combinada con el CSS.

Con esto hemos conseguido rebajar 9 peticiones http.

Llegados a este punto, hemos conseguido mejorar mucho el rendimiento de nuestra web, y aunque siguen habiendo posibles mejoras, su impacto es menor, o bien no lo podemos aplicar. 

Una recomendación es usar CDN, pero salvo para jQuery, el resto no podemos, otra se refiere a problemas de rendimiento de código de terceros (botón me gusta de FaceBook), y otras sencillamente no han significado mejoría (usar diferente fuentes para descarga de imágenes  y de esa forma paralizarlas, en teoría debiera mejorar, pero perdemos la mejora con el tiempo de DNS). 

HML5, nos permite hacer carga asíncrona de algunos elementos, no reduce el tiempo global, pero evita bloqueos.

SEO Search Engine Optimization

"El tiempo pone a cada uno en su lugar, y si hace SEO, un poco más arriba"

No se quien es el autor original de la frase, pero la he leído y escuchado varias veces, y sencillamente me parece genial. Creo que define claramente lo que es SEO (Search Engine Optimization), en el fondo las webs llegan a ocupar su puesto natural en el buscador, por su estructura, su contenido, su popularidad, y si hacemos SEO, pues eso, un poquito más arriba.

En definitiva SEO, no es magia, puede ayudar a subir posiciones, pero detrás debe de haber una buena web, con unos buenos contenidos y un indice de popularidad alto.

Pero siempre se puede intentar forzar la máquina, y sobrevalorar o posicionar más arriba una página de lo que realmente le corresponderia, viene a ser una batalla entre el SEO y Google.  Los algoritmos de Google van evolucionando día a día  y cambiando alguno de  sus criterios, con la intención de detectar "malas prácticas" por parte de los SEO (texto oculto, sobre-optimizción, backlinks, contenido duplicado, ...).

Los dos ultimo cambios más importantes en esa batalla, son la aparición de  Google Panda y Google Penguin.

Groso modo Google Panda es un cambio en el algoritmo de calificación de los resultados de búsqueda. Es una variación en la forma en que Google puntúa y valora cada sitio web.

Google Penguin es un filtro que mide la calidad global del contenido de un sitio web, y penaliza con un mal resultado a las web que considera irrelevantes para el usuario, webs con contenido basura, o que no tiene nada que ver con los enlaces que tiene o recibe.

Hasta hace unos años se podia hacer SEO, siguiendo una serie de recomendaciones, paso a paso. Hoy en día esto ha pasado a la historia, si bien algunas de las recomendaciones siguen siendo válidas, su peso en la puntuación se ha visto mermado, cosas como los METATAGS, las etiquetas TITLE, H1, etc siguen pesando, pero mucho menos. Ahora se da mucha más importancia a las redes sociales, retwits, Like de facebook, y sobre todo +1 de Google + (barriendo para casa), pero lo que es evidente es que ha dejado de haber una guia de como hacer SEO, hay unas lineas básicas a seguir, pero el resto es experimentación y adaptación a los algoritmos de google, que como sabemos son cambiantes, y con criterios diferenciados según la temática de la web, sector, volumen de tráfico, etc.

Y que podemos hacer como humildes estudiantes que somos, con un dominio recién creado, y con un contenido inventado para una práctica. Difícilmente conseguiremos posicionar nuestra página en los primeros lugares, pero intentaremos hacerlo lo mejor posible, una de las cosas que tiene en cuenta actualmente los algoritmos de Google, es la estructura del HTML, y la velocidad de carga.

Nuestros contenidos quizás no sean reales, pero la parte técnica de HTML5, CSS, JS si lo son. Intentaremos ser mejores que nuestra competencia, por lo menos en ese aspecto, también seguiremos la guía de recomendaciones que vimos en clase con referencia a metatags, palabras claves, generación de sitemap, ...

Algunas de las acciones que haremos para mejorar nuestra web serán:

• Validar la no existencia de errores
• Incluir alt en todas las imágenes
• Crear robot.txt y sitemap.xml
• No usar imágenes escaladas
• Nos fijamos los siguiente objetivos de obtimización:
• Servir la página en menos de 1.5 s
• Peso total de página inicial menor de 1 MB
• Peticiones para carga la página menor de 60

De tamaño y peticiones vamos bien, pero nos queda bastante por optimizar en cuanto a velocidad.

Taller de accesibilidad

Después de las vacaciones de Navidad, empezamos el curso con el que será el último taller, accesibilidad.
Este es un tema importantisimo, y del cual hasta hace poco no estaba demasiado concienciado, pero después de asistir a una conferencia de Ángel García Crespo en el transcurso del IV congreso de Televisión Digital Interactiva organizado el año pasado por el LTIM, me di cuenta de lo importante que era tener en cuenta la accesibilidad en nuestros desarrollos, porque de lo contrario estamos discriminado un porcentaje elevado de gente.


Como todo, no diré que hacer una web accesible sea fácil,  pero si nos imponemos una serie de hábitos y pautas al ir creando contenido web, nos permitirá crear contenidos accesibles, en el taller de hoy se han repasado las principales puntos a tener en cuenta, las categorias existentes de accesibilidad, y las herramientas disponibles para validar que todo esta en orden.

Un punto importante, es que WCAG 2.0 (Web Content Accessibility Guidelines) de W3C, se ha convertido en un estándar ISO, en concreto el ISO/IEC 40500:2012. El hecho de que sea un estándar ISO permitirá que su implementación sea menos ambigua y uniforme en todos los países. Otro tema a tener en cuenta, es que la mayoría de países vayan incluyendo en su legislación la obligatoriedad del cumplimiento de normas con referencia a la accesibilidad en la web.

En España, esta legislado, y es de obligatorio cumplimiento, aunque es cierto que queda mucho trabajo por hacer, por lo menos las bases legales ya existen, y en el futuro imagino que la mayoría de empresas y organismos oficiales se irán adecuando a la ley, sin duda las denuncias y multas ayudaran a que se cumpla la ley, pero espero que también la sociedad se vaya concienciando de la necesidad de disponer de contenidos accesibles, sin que existan discriminaciones.

Para profundizar sobre la ley de accesibilidad, el blog usable&accesible de Olga Carreras nos ofrece abundante e interesante información

Registro de dominio y alta de web

Como ya comente en una entrada anterior, para realizar la practica subiremos nuestro trabajo a un hosting gratuito(Nixiweb), y usaremos también un dominio gratuito de dot.tk.

El primer paso que haremos es registrar un dominio tk ( islas Tokelau ) que este disponible, en nuestro caso rezetas.tk.
Para comprobar la disponibilidad, tecleamos el dominino que nos interera en la página de dot.tk

Si el dominio esta disponible, ya nos aparece la pantalla donde debemos rellenar la información, espceialmente importante es la configuracion del servidor DNS, que nos permitirara asociar nuestro dominio con nuestra cuenta en el servicio de hosting de NixiWeb. La información de DNS la conseguimos en la página de nuestro proveedor de hosting. En nuestro caso estos los parametros.

En este punto ya tenemos registrado nuestro dominio por un periodo de doce meses, y asociado a nuestrop proveedor de hosting.

El siguiente paso es darnos de alta en Nixiweb, al crear una nueva cuenta, indicamos cual será el dominio asocidado (justo el que acabaos de crear).

Una vez concluido este paso, recibiremos en nuestra cuenta de correo un mail con información para poder acceder a nuestro hosting. Entro otras dispondremos de acceso via FTP,  cuentas de correo para nuestro dominio, base de datos MySql, ...

Este es el panel de control 

En definitiva, un proceso nada complicado, que nos permite estar en la red de una forma muy económica (gratis), y que nos brinda unos excelentes servicios.