Nuevo tema para PortalLinux: Alpheratz Theme

Estaba trabajando en una renovación de la plantilla de PortalLinux, cuando por misterios que desconozco, el menú en versión móvil no se desplegaba, cansado de no encontrar el problema decidí que era hora de hacer las cosas de verdad y aventurarme a crear una plantilla para WordPress desde CERO. Y este es el resultado.

Actualmente, PortalLinux utiliza una plantilla la cual he llamado Alpheratz Theme. El nombre proviene de la estrella más brillante de la constelación de Andrómeda. Es una estrella binaria espectroscópica, es decir, son dos estrellas muy juntas o tan alejadas de la Tierra que no pueden ser resueltas con la vista. Está a 97 años luz del sistema solar y tiene una luminosidad de unas 200 veces más grande que nuestro Sol. El nombre proviene del árabe y significa “Espalda de caballo” (porqué pertenece a Pegaso).

Y, ¿Porqué este nombre? Pues porque tengo poca imaginación para poner nombre a los proyectos que tengo y me gusta la astronomía y decidí ponerle nombres de estrellas a mis proyectos. Soy informático. Hola.

Alpheratz es una plantilla basada en Bootstrap, por lo que le hace ser una plantilla 100% responsive y adaptative. Se puede visualizar tanto en ordenador, como en tableta o smartphone. Actualmente está en una base beta 0.1, donde al largo de unos meses iré mirando como funciona y arreglando problemas (que espero que la gente me reporte).

A continuación os voy a mostrar que novedades tiene Alpheratz y que permite, por el momento, hacer esta magnifica plantilla de WordPress.

Paleta de colores

He empezado por lo más complicado. Soy horrible decidiéndome por los colores, pero he usado los colores “clásicos” por así decirlo, los que suelo usar para las plantillas de PortalLinux. Un color distintivo azulado para remarcar cosas, enlaces, títulos, hovers, etc. Dos tonalidades de negro: la más oscura para menú y footer la más clara para títulos, segunda zona de footer, etc. Luego un gris, para bordes, sombras y demás. Y por ultimo un blanco “sucio” (por ponerle un nombre) para fondos de cajas.

Paleta

Fuentes utilizadas

Por defecto, Bootstrap viene con una fuente llamada Glyphicons que son los pequeños iconos para las etiquetas y demás. Luego utilizo otra fuente para las redes sociales llamada Socicon. Como en anteriores plantillas, la fuente Signika es para el texto de las entradas. Esta fuente me gusta mucho y la llevo utilizando en trabajos y proyectos, es limpia y muy simple. Me gusta.

Para los ítems del menú, el titulo de la página y para algunas cosas más he utilizado una tipografía llamada Oswald. Muy minimalista. Para los títulos principales de las entradas he empleado una tipografía que se llama Raleway.

Haciendo el repaso, creo que uso demasiadas tipografías, tendré que decidirme por dos y hacer una actualización.

Menú adaptativo

En Alpheratz el menú se adapta al dispositivo, como toda la web. En plantillas anteriores tenia un problema serio con el menú, y es que cuando se desplegaba era muy largo y algunas personas me habían comentado que no veían el final, así que lo primero que hice fue mejorar el menú en ese aspecto, haciendo que cuando sea muy largo, hacer que se muestre en columnas como se muestra en la imagen de abajo:

fotomenu

También he mejorado la opción de buscar dentro de la web, antes, se desplegaba una caja que ocupaba toda la web y quizás era algo molesto. La caja que se despliega ahora mismo es más pequeña y con un aspecto más amigable. Además, en la versión para móvil, esta caja se despliega desde abajo, como se muestra en la imagen de más abajo:

buscarmenu

buscarmenumovil

Pagina principal

Antiguamente, se mostraban 4 noticias pegadas en una línea, cada noticia se mostraba con una imagen y un titulo superior. Tenía un efecto, que a mi me gusta mucho, llamado iHover donde hice ciertas modificaciones pero que a la gran mayoría de gente no le acabada de gustar y siempre me decían que “mareaba” un poco. He decidido quitarlo y darle un diseño distinto y menos “mareante” para la gente que visita la web.

Ahora se muestran tres noticias por línea de manera muy distinta pero siguiendo un mismo esquema que antes. Sin efecto iHover. Y esta vez el título de la noticia se muestra abajo, junto a la fecha y la categoría de la noticia. Además ya llevo tiempo intentando poner de imágenes principales imágenes con un diseño “flat design” (como el logo del PP xD)

noticiasahora

En esta plantilla he integrado el efecto de ir cargando noticias a medida que se hace scroll. Me parece muy útil para el usuario, porqué así no tiene que ir pasando paginas y esperando a que carguen.

Footer

Respecto al footer, han habido cambios significativos. Este footer es algo más delgado y sigue siendo fijo en la pantalla principal y con un color negro más oscuro como el menú. Los iconos de las redes sociales son más pequeños y he quitado el botón que había para visualizar otras paginas porque creo que no tenía mucha utilidad.

Como antes, el footer queda de ser fijo cuando entras en un artículo y cuando estas en la versión para móvil antes solo se visualizaban las redes sociales, esta vez he pensado que sería mejor quitarlo de la pantalla para mostrar más texto de la noticia.

Fotofooter

Footer secundario

El footer secundario no es nada más que una sidebar en la parte de footer. Ésta solo se visualiza en entradas, paginas, búsquedas y artículos por categorías. Y es una sección de “reivindicación”, así la he llamado. No hay widgets informando sobre que artículos hay en el blog, ni las categorías ni nada, solo hay tres imágenes de campañas pro-software libre. Me parecía importante tener un lugar como este en la web, un lugar para decir “Eh, Windows, si estás en mi contra te has ganado un enemigo” y así de paso informar a la gente de las campañas actuales.

footersecundario

¡Vuelve la sidebar!

¡Lo has oído bien! No soy muy fan de las barras laterales, pero pensando en el diseño de la web, pensé que lo mejor sería añadir una barra lateral para poner información del blog. Por el momento, hay dos cosas importantes que he pensado que deberían de estar en la barra lateral. Por un lado, dos pequeños anuncios de proyectos míos: PlanetLibre y Libro De Trucos para GNU/Linux. Que mejor manera para que la gente conozca estos dos proyectos, no?. Y por otro lado las noticias más visitadas del blog. Sencillo, bonito y agradable. No molesta.

Anuncios

Por el momento no hay anuncios en PortalLinux. Estoy mirando de cambiar los anuncios de Google que tenía hasta ahora. Básicamente para tener unos anuncios “más éticos” concorde a la pagina web. Estoy trabajando en ello.

Comentarios y formulario

Los comentarios nada del otro mundo, son sencillos. La verdad es que quería hacer algo diferente pero no se ha ocurrido nada “novedoso” así que los he dejado normal. Les he añadido el UserAgent para visualizar el navegador y el sistema operativo del usuario que comenta. Los avatares funcionan con gravatar.

El formulario es con el mismo diseño que el formulario de contacto de Libro de Trucos. Me quedó tan bien que lo he querido aplicar también en esta plantilla. Me parece que es muy agradable y en smartphones se adapta genial.

Plugins utilizados

He estado buscando plugins nuevos y he cambiado algunos que usaba por otros de mejores, y cuando digo mejores, solo me refiero a que tienen mejores características y más opciones para modificar.

Crayon Syntax Highlighter

Un plugin que cuando lo vi pensé “Y porque no he usado esto antes?”. Permite añadir código en el artículo de manera muy sencilla. Antes tenía que poner la etiqueta <pre> manualmente, eso se acabó.

Easy Bootstrap Shortcode

Ya que uso Bootstrap, vamos a aprovecharnos lo máximo de este magnifico framework. Permite añadir etiquetas para generar tablas, añadir botones, etc. Sin duda lo voy a utilizar mucho.

Infinite Scroll

El efecto para cargas las entradas lo hago con este plugin. La idea es que para futuras versiones de Alpheratz Theme este efecto venga incorporado en el código, así me ahorro un plugin.

Shareaholic

Los botones para compartir artículos en las redes sociales. No hay que explicar mucho, no? Lo único es que esta vez he eliminado las noticias relacionadas.

Yoast SEO

Algo que tenia abandonado. El SEO es importante para una web y un colaborador del blog me lo recordó. A partir de ahora en las entradas se podrá configurar el SEO.

Stylish Popular Posts

Al lado de las entradas, hay las entradas populares. Este conector permite mostrarlas en un wigdet sencillo y con un diseño muy bonito.

Licencia de la plantilla

Próximamente subiré los ficheros de la plantilla a GitHub por si alguien le interesa. Por el momento Alpheratz está en una versión 0.1 beta e iré actualizando los ficheros a medida que vaya encontrando errores. Así que de momento no es recomendable usarla como plantilla principal en un blog (excepto si es PortalLinux, a nosotros nos gustan vivir al límite).

Esta plantilla está bajo la licencia GPL 3.0, por lo tanto eres libre de usar la plantilla con cualquier propósito, de estudiar la plantilla y modificarla, de distribuir copias de la plantilla y por último, de mejorar la plantilla y hacer públicas esas mejoras para que la comunidad se beneficie y por supuesto bajo la misma licencia que la del autor principal.

Huevos de pascua

Como futuro programador, me he aburrido mucho haciendo cosas un poco “pesadas” y me he inventado dos huevos de pascua (si así se puede llamar). Nada, son cosas que si alguien las encuentra pues molaría que me enviara un Tweet diciendo “Eres muy gracioso!” jaja.

Mejoras futuras

Muchas. Hay mucho trabajo. Ahora mismo hay que depurar mucho código que técnicamente es funcional pero que se debería de mejorar más para tener un rendimiento mejor en la plantilla. Ya estoy trabajando también en un apartado de “Configuración de la plantilla” donde poder cambiar los colores fácilmente o donde añadir las redes sociales (porque actualmente se añaden a pelo).

Actualización 29/09/2015

Acabo de subir el código fuente en GitHub, pero falta elaborar la documentación que intentaré hacer este fin de semana. Saludos.

El contenido de esta entrada está bajo licencia Creative Commons

Zagur

Técnico Superior de Administración de Sistemas. Estudiando actualmente Desarrollo de aplicaciones web. #GNU #Linux #CSS #HTML #Python #SoftwareLibre #OpenSource

6 comentarios “Nuevo tema para PortalLinux: Alpheratz Theme”

  1. NeoRanger

    Navega con Google Chrome 49.0.2623.108 Google Chrome 49.0.2623.108 en GNU/Linux x64 GNU/Linux x64

    Zagur, hay algún tutorial para explicar como implementarlo en nuestro wordpress.org? Estaría genial poder hacerlo aunque la plantilla tiene tu impronta, me encantaría por lo menos probarlo. Saludos!!

    Responder
    • Zagur

      Navega con Firefox 45.0 Firefox 45.0 en Ubuntu x64 Ubuntu x64

      Si te descargas el .zip de GitLab en teoría puedes probarlo sin problemas. Se instala como cualquier otro tema, pero personalmente no lo recomiendo porque está en versión alpha y aún queda mucho por arreglar. 😛

      Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Utilizamos cookies propias y de terceros para mejorar nuestros servicios. Si continúa navegando, consideramos que acepta su uso. Doble clic sobre aquí para cerrar.