web analytics

fernastro.com G8

Publicado: 11.04.2014 » Actualizado: 10.04.2014

Nuevo formato, misma ruta. La del frikismo, la opinión y los juegos. Y los tutoriales amenos. Ahora mucho más rápido y adaptado para mostrarse de la mejor forma desde en un teléfono hasta en una pantalla a 1080p, y también en tu tablet y notebook. Bienvenidos al nuevo fernastro punto com, Generación 8.

Un cambio que obedece no solo a los requerimientos que toda web de verdad profesional debería cumplir, como el adaptarse sin problemas a cualquier dispositivo; sino a los que el creciente número de visitas agregó (un aumento que no esperaba y que agradezco humildemente). Un cambio que también me permite consolidar los contenidos que aquí trato, para enfocarme en los que realmente generan comentarios, destacarlos y mantenerlos actualizados con nuevos artículos de la misma (o mejor) calidad.

Un cambio necesario

A mí el diseño anterior, el de la generación 7, me gustaba. Todavía lo veo y me sigue gustando. Sin embargo, una cosa es que se viera bien, que le entregara una identidad visual propia a mi sitio, pero otra es que tuviera defectos bien serios que aceleraron su envejecimiento y la necesidad de ya no mejorarlo (que se intentó en más de una ocasión) sino reemplazarlo por uno nuevo, creado desde cero, que cumpliera todas las exigencias del flujo de visitas que recibe y los cambios por los que ha pasado la Web en el último tiempo… o mejor dicho, el cambio en los dispositivos desde los que ahora esta se revisa.

Me estaba comiendo el ancho de banda que mi hosting me entrega cada mes. Una cuota de gigabytes descargados desde el servidor donde se hospeda ferdotcom, que aumentaba paulatinamente mes tras mes, coincidiendo con un crecimiento en el número de visitas efectivas de la misma intensidad. Más gente revisando una web con imágenes grandotas de fondo significa más datos “bajados” desde mi espacio en el servidor. Así que el nuevo diseño tenía que olvidarse de las fotos gigantes y ahorrar en bytes lo más que se pudiera.

Y por otro lado, más y más gente revisando esta web desde móviles y tablets. El aspecto de fernastro.com G7 no estaba adaptado para ellos. Le instalé uno especial para celulares, pero no se podía personalizar a mis requerimientos y consumía tanto o más ancho de banda que el tema para escritorio, que también era el que se mostraba en tablets, pese a solo mostrarse aceptablemente en el iPad o tablets Android en el rango de las 10 pulgadas. Y ocurre que no son esas, sino las de 7 pulgadas las que está prefiriendo cada vez más gente.

En 2013 planifiqué un diseño de fernastro dot com especial para móviles. Al final lo tuve que cancelar debido a que lo que alcancé a desarrollar funcionaba bien solo en equipos con iOS y en Androids, derechamente el resultado era un desastre. La idea la dejé congelada, sin embargo, la inminencia de cierto cambio muy importante en mi vida personal (que ocurrirá al mismo tiempo que la G8 esté disponible para todos, y del que también me gustaría una palabra de apoyo ;) ) y el descubrir primero el exceso de consumo de ancho de banda (en febrero estuve a punto de quedarme sin sitio y en marzo casi me quedo 7 días sin web de no ser porque lo moví a un servidor gratuito hasta que empezara abril), me motivó, ahora sí, a cambio de diseño tan drástico, que ya se trataba de un cambio de generación.

Inicialmente iba a basarme en Bootstrap, pero leer la documentación me complicó demasiado la existencia. Además, al enterarme que lo había desarrollado Twitter, menos ganas me dieron de implementar una tecnología creada por una empresa que cada vez me cae peor, con un servicio que hace mucho dejo de ser lo que era hace unos años (ya por culpa de su comunidad, pero me salí del tema).

Al final, a poco investigar sobre “responsive design”; me di cuenta que la base para conseguirlo no estaba en manejar un código complejo, sino en dominar nuevas instrucciones de un viejo querido por servidor: Las CSS. Y con eso, podía crear un formato con esta nueva funcionalidad pero siguiendo lo que más me gustó de G7: el poder controlar cada detalle del diseño de mi web. Y en mucho menos tiempo, gracias a la experiencia adquirida por mi parte y no tener que aprender tantos trucos nuevos. El resultado final, ahora lo describo en sus aspectos más fundamentales.

Diseño responsivo: Un cambio de paradigma

Un diseño responsivo hacia todas los dispositivos no solo debe considerar móviles, tablets y computadoras, sino además que en ordenadores, ahora tenemos monitores con resoluciones enormes que no se aprovechan. Pues ferdotcom G8 también las toma en cuenta, las pantallas grandotas y también las más pequeñas.

devicedemo

Si tuviera que describir en pocas palabras a Vanilla & Cinnamon, que es como apodé al nuevo formato para los artículos, me limitaría a decir: “el texto en primer lugar”: Mostrar los textos de tal forma que resulten cómodos de leer en cualquier dispositivo. Conseguirlo requería quitar todo distractor, nada de imágenes de fondo, la familiaridad del fondo blanco junto a un margen gris para otorgar la sensación de estar leyendo un libro electrónico más que una página web. Con tamaños de letra e interlineados adaptados de verdad para el tamaño de la pantalla donde se esté revisando. Y textos en negro, nada de grises, a alguien se le ocurrió que ponerlos en gris se veía bonito cuando no saben lo que se sufre leyéndolos cuando se es miope.

Esta nueva forma de mostrar texto requería una nueva tipografía. Pero no fue necesario buscarla tan lejos, con ir a la Isla de Pascua bastaba: Les presento Inika, la fuente que usarán todos los textos de los artículos de ferdotcom y que ahora será la compañera fiel de la igual presente Aller Font Family. Creada por la chilena Constanza Artigas, e inspirada en la cultura pascuence, es sino una, la mejor de todas las con serifas que puedes conseguir en el directorio de Google Web Fonts. Con la que los textos de ferdotcom, vaya que de verdad quedan destacados antes que todo.

Este nuevo enfoque, implicó otro cambio: Nada de sidebars, barras laterales, que distraen mi objetivo de “el texto en primer lugar”. Aunque, la verdad, creo que ya ni usaba barras laterales en el diseño anterior. Los sitios recomendados los movi a una región justo sobre el aviso de copyright… y la publicidad tendrá un posición más destacada que explicaré más adelante.

Además, con V&C, ahora las imágenes y vídeos incrustados se muestran como nunca antes, siempre con una proporción sincronizada con el ancho de la superficie de los textos. Lo que permite exponerlos en toda su grandeza en una pantalla a 1080p, pero igualmente bien en una tableta de 7 pulgadas o en un notebook a 1336 x 768.

devicedemo2

Me comprometo a, ahora sí, publicar más foto-historias. Más con este nuevo formato que aprovecha al máximo las posibilidades de las pantallas enormes, o la vista en vertical de una tablet de 10 pulgadas. Y los puntos intermedios y los de menor tamaño.

devicedemo3

Y el resto de los aspectos de ferdotcom G8 siguen la filosofía de aprovechar al máximo las posibilidades de espacio que te otorgan las proporciones de pantalla de los distintos dispositivos desde los que se navega por la Web hoy en día. Puede parecer un esfuerzo titánico, pensando en las multiples e “infinitas” resoluciones de los miles de tablets y smartphones en el mercado… pero ocurre que en realidad no son tantas las proporciones reales de pantalla que hay que considerar cuando uno diseña para teléfonos y tablets, que son menos de las que parecen. Esto lo explico de mucha mejor forma en esta guía, que preparé precisamente para guiarme hacia conseguir este objetivo de un ferdotcom responsivo.

Menos código

Y eso es todo lo que debo describir sobre el nuevo diseño. No es mucho, y está hecho aposta. Para reducir el consumo de ancho de banda, reduje considerablemente el código del aspecto de WordPress de fernastro dot com. Menos archivos, menos líneas de código, menos hojas de estilo en cascada. Y menos imágenes: Todas las fotos de fondo ahora se descargan desde servidores externos, no desde fernastro.com. Lo mismo con las Google Fonts, excepto la Aller Font Famliy y el Icomoon, que sus licencias me obligan a hospedarla en el mismo servidor desde donde se utilicen. Y el jQuery y todo lo que se pudiera almacenar desde servidores de terceros.

Los archivos del aspecto de fernastro.com G7, pesaban 9.5 MB. Los de G8, los reduje a 2.5 MB al momento de escribir esto (con el aspecto listo en un 85%) y todavía podria disminuírlo más.

Con esta reducción, también me será más sencillo hacerle posteriores cambios al diseño (de la misma forma que G7 empezó con un aspecto de los artículos que con el tiempo lo fuí cambiando y mejorando, G8 seguirá recibiendo modificaciones conforme lo requiera)

Menos secciones

No he borrado artículos, pero en vez de tenerlos desordenados en muchas secciones que al final, no se actualizaban, opté por consolidarlos, fusionar secciones y destacar en el home y el menú superior solo las que de ahora en adelante recibirán nuevos posts.

Aunque en realidad, sección que no tendrá más posts hay una sola: La caja de música. Ya la tenía abandonada desde hace bastante tiempo, pero ahora que puedo explayarme sobre los cambios en ferdotcom, lo confirmo: Oficialmente congelada y no actualizaré más hasta nuevo aviso. ¿El motivo?, que no me motiva escribir sobre música a la que apenas se le da cobertura entre el público hispanoparlante como el smooth jazz (y menos en mi país) y además, prefiero priorizar en las secciones donde recibo más interacción y visitas.

El nuevo formato del home me permite, además, destacar las series especiales de artículos para que ahora sí se note que son especiales. Como la de elementary OS, que pretendía hacerla de cuatro partes y que sin embargo, debido a la enorme acogida que ha recibido (y a que el blog de elementary update cerró… ¿¡para convertirse en uno sobre cuidado del hogar!?) tendrá el número de articulos que sea necesario. No olviden que cada vez está más cerca la llegada de “Isis”, el sucesor de “Luna”, ahora basado en Ubuntu 14.04 y con un diseño que promete revolucionar todavía más.

Aún así, hay una sección nueva. No está destacada en el home, pero está. Encuentro que promocionarla y destacarla, no es un tema.

Si, con publicidad

En el diseño anterior incorporé tímidamente publicidad, en un sidebar. Ahora, todos los articulos cuentan con banners de los de Google, incluídos los Express y los especiales. También en el home. Sé que puede resultarles molesto, pero les pido comprensión: Mi objetivo tras incorporar estos avisos (ahora sin restricciones) es bien modesto, nada de forrarme con vuestras visitas, sino que de aquí a 2015 este sitio se pueda autofinanciar, en plan Televisión Nacional de Chile, pero sin que la publi condicione los contenidos, como pasa con esa televisora.

Que no tenga que sacar de mi bolsillo para pagar el hospedaje y el dominio, sino con los ingresos que reciba por la publicidad. Ya si obtengo algún extra, muy bienvenido será, pero hay que ir a por la meta más aterrizada primero, y con los U$S 100 de pago mínimo de AdSense se puede costear un año de hosting y dominio.

Eso lo conseguiré simplemente con trabajo, publicando con más frecuencia artículos nuevos y de interés. Pero también con vuestra ayuda. Por eso, si les han resultado útil los artículos que he publicado, por favor desactiven el AdBlock en fernastro.com cada vez que lo visiten (es más, yo les aconsejo que desactiven los bloqueos de publi en cualquier blog o sitio preferido: Es la mejor forma de apoyar un proyecto web bien realizado)

Eso sí, me comprometo a, de agregar más publicidad, no llegar a colocar avisos intrusivos, molestos o engañosos, con lo que me sumo en su totalidad al Acceptable Ads Manifesto. Ah, y con publicidad que engaña, incluyo a las nefastas HotWords, que son una soberana mierda. Todo lo explico mejor en la Política de privacidad de ferdotcom.

¿Por qué G8?

Las “versiones” de ferdotcom las llamo generaciones y no versiones número punto número por una inspiración busóloga. ya que así Marcopolo denomina sus generaciones de buses interurbanos. Ellos todavía van en la G7 (¿Han visto el Paradiso 1800 DD G7? Es una belleza, aunque todavía no me suba en él xD). Aún así, al decir que esta es la G8, represento que esta no es la versión 8 de una web en particular, sino la octava generación de mi lugar personal en la web para escribir y publicar mis contenidos, que no siempre estuvo en fernastro.com.

Considero que se avanza de generación no por el cambio de diseño, sino por el cambio en la forma en que voy a plantear desde ahora sus contenidos. Desde el “unificar y reunir todo lo que tenía en muchas partes, en una sola web”, que fue la idea de la G7, a “concentrarse solo en lo relevante, en los contenidos de calidad y por los que genero visitas e interacción”, de la G8. Una retrospectiva de las generaciones anteriores a la 7 en este articulo.

Agradecimientos

  • A mis únicos dos betatesters, Ejner Alfredo Galaz y Marco “noquierouser” González Luengo, con su web gatuna que me ha servido más de una vez como salvapantallas y lugar para relajo visual.
  • A la orientación inicial en diseño responsivo de Javier “ZendKommissar” Godoy.
  • A Game Over y especialmente a Normas de Equivocación, por mantenerme concentrado en la labor chunga de desarrollo mientras me reía escuchando sus retardeces y chistes. ¡Lo siento Hardita, pero el nick de León Luna mola!
  • A los creadores de elementary OS. Puedo decir orgullosamente que este diseño se realizó bajo esta plataforma, con la que todo funcionó mejor y más rápido que si lo hubiese realizado con Windows.
  • A ustedes, mis visitantes fieles.
  • A mis amigos del mundo real, que me mantuvieron aterrizado en esta etapa que incluyó más cosas que el nuevo diseño de esta web: Jonathan, Raúl, Guillermo, Luisa, Mauricio.
  • Más que a mis followers en Twitter, a quienes todavía interactúan conmigo en twitter.
  • Y (el mejor para el final) a Juan Esteban, que ha sido mi inspiración y motivación para hacer este cambio y muchos otros más en lo personal.
  • ejner

    Un honor formar parte de su grupo reducido (muy reducido) de betatesters. También por mantener este blog, que aún cuando no comento, lo visito muy seguido (de hecho, gracias a usted descargue y llore con “To the moon”).

    Un abrazo mister, ojalá esté bien :)

    PD: Creo que mi sitio lo comenzaré a nombrar con carrocerías de buses, y no por copiarlo, sino porque me encantan esas cosas.