Rehaciendo flopez.com.mx: El proceso y los archivos

Esta es la segunda parte del breve recuento de la más breve reconstrucción de flopez.com.mx. En el post pasado te conté sobre su planeación. Ahora entremos de lleno en la construcción del sitio en sí.

Sitio nuevo, proceso nuevo

En la versión anterior de mi sitio web experimenté con Nanoc. Esta herramienta me permitió trabajar con MarkDown, Sass y Compass, así como Haml para los templates. Nanoc genera el sitio completo de manera estática y su configuración, si no fue la más sencilla, terminó siendo aceptable gracias a la documentación en línea.

Esta vez decidí volver a hacer una evaluación de las diferentes herramientas disponibles para creación de sitios estáticos pequeños. Tras de un par de intentos fallidos, gracias sobre todo a la guía de este post,  encontré a un aliado en Middleman. Me decidí por Middleman por su facilidad de uso y por ser una herramienta madura.

Middleman

Como Nanoc, Middleman proporciona scaffolding de proyectos; te permite usar MarkDown, Sass y Compass desde el inicio. Y, al igual que Nanoc, Middleman está hecho en Ruby y se instala fácilmente mediante gem. (Un poco menos fácil si, como yo, insistes en desarrollar en Windows.)

Middleman incluye una herramienta para línea de comandos, aunque también puedes elegir usar programas de compilación diversos.

La estructura del directorio raíz de flopez.com.mx, generada por Middleman.
La estructura del directorio raíz de flopez.com.mx, generada por Middleman.

La estructura de un proyecto en Middleman es sencilla pero configurable. Por defecto creará una carpeta “source”, donde residan los archivos fuente, y una carpeta “build” que contendrá los archivos compilados, listos para subirse a un servidor.

En mi caso, estoy aprovechando dos características “avanzadas” que Middleman hace sencillo usar. Una es  un “caché buster”: al agregar una cadena aleatoria al nombre de cada archivo, la cual cambia cada vez que éstos son compilados, garantizamos que los visitantes siempre obtengan las últimas versiones, en vez de que el browser use la versión guardada en su caché.

La otra opción que uso permite que las páginas aparte de la inicial simulen estar en sus propios fólders una vez que se suben. Así, un visitante puede entrar a flopez.com.mx/portfolio/ para visitar un archivo que en realidad está en la raíz del sitio y se llama portfolio.html. Esto intenta ser un método de conveniencia para que las URLs sean más fáciles de recordar.

Ya con mi método de construcción definido, terminé de definir el texto de la página inicial, creé el templete del HTML (usando solo ERB en vez de Haml esta vez) y comencé a trabajar en mis estilos.

Una vez más estoy usando Sass y Compass, mis caballitos de batalla. Los estilos del sitio intentan ser lo más sencillos posible, y esto ayudó mucho a la hora de crear una experiencia similar en cualquier dispositivo; el observador notará que las transiciones entre diversos anchos de la página son mínimas.

En lo que a gráficos respecta, solo uso una fotografía que, si bien es ancha, no es muy alta. Ciertamente trato aquí de evitar el “look cinematográfico”, la imagen de intro de pantalla completa que es una tendencia tan actual, pero que perjudica tanto a la eficiencia de los sitios. La imagen funciona como fondo del mensaje introductorio, vinculando definitivamente el lenguaje textual con el visual: la idea de “comunicación” es respaldada por la imagen de un puente (el Golden Gate, ni más ni menos).

Screenshot de flopez.com.mx, septiembre de 2015
El logo y la imagen principal de flopez.com.mx, septiembre de 2015.

El logo… fue al final algo fortuito: es una obra que hace mucho tiempo había encargado a mi estimado Armando Camacho de Cárico Estudio, pero que en su momento decidí no usar. Sin embargo, pude rescatarlo de las entrañas de mis respaldos mientras buscaba información para mi página de portafolios… y descubrí que hoy día es mucho más adecuado a mis necesidades.

Aprovechando cuán codo fui con las imágenes, lo que sí decidí utilizar fue dos tipografías externas: Arimo y Montserrat, usando Google Fonts.

Finalmente, como estaba planeado, la página de inicio culmina en una forma de contacto. Debo reconocer que ésta aún no me convence del todo, pero por lo pronto respeta, al menos, el principio de ser tan corta y clara como sea posible. Procuré usar el estilo “madlibs” que tiene un gran potencial de aumentar conversiones.

En el próximo post, el último de la serie, te comparto algunas técnicas de optimización que le permiten al sitio tener calificaciones casi estelares a los ojos de Google.

 

Publicado por

flopez

Desarrollador web con énfasis en front-end y usabilidad. Actualmente trabajo en Justia, Inc.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *