soy Kseso y esto EsCSS

Lo siento mucho. Me equivoqué, y seguro que no será la última vez

Artículo de los proqués, presentación y detalles más significativos del nuevo tema (elaboración casera) del blog.

Lo siento mucho. Me equivoqué, y seguro que no será la última vez

·Por Kseso ✎ 26

flat ui: nueva plantilla blogger para ksesocssTanto cambio nunca puede ser nada bueno. Ni para ti, usuario del blog, ni para mi. Así que de entrada mis disculpas poque seguro que más de uno y de dos se encontrarán desconcertados ante este nuevo cambio en la apariencia del blog.

Pero esta vez sí que estaba obligado a reparar el fallo y error que supuso el tema anterior a este que ves. La decisión de implantar las multicolumnas se demostró totalmente errada.

Una breve explicación por si lo desconoces: recibí avisos de varios usuarios de que Firefox se les colgaba al acceder al blog. No pude ni reproducir el error ni averiguar en qué combinaciones de SO y versiones ocurría. Así que fue obligado el retirar esa característica.

Y una vez fuera esa parte, todo el tema carecía de alma y cuerpo. Quedaba insípido y anodino. Incluso hasta desagradable.

Así que una vez más mis disculpas por todo ello:

Lo siento mucho. Me he equivocado y no volverá a ocurrir. Seguro.
Porque de los errores aprendemos todos.

Lección que debería aprender de este fracaso: los experimentos en casa y con con gaseosas.

Digo que debería aprender, pero aquí estoy de nuevo con lo que creo es una plantilla totalmente diferente a lo que suele encontrarse. No mejor o peor. Sólo diferente.

Diseccionando el nuevo tema: el home

Vamos con una pequeña presentación de la nueva apariencia del blog. Sin descubrir todo para que te tomes un momento y puedas hallarlas por ti mismo.

El index y páginas de resultados

nueva plantilla blogger ksesocssEn la página de inicio ocupa un lugar relevante el último artículo publicado y a su lado el avatar de los últimos usuarios que han dejado un comentario. El inicio de su parlamento se muestra al :hover

A su lado, y por primera vez en todos mis años como bloguero, incluyo 3 espacios para patrocinio. Si estás interesado en que tu marca, producto o actividad se muestre ahí utiliza el formulario de contacto.

Como has podido ver, no hay un header como tal y lo que aparenta una estructura de 2 columnas al hacer scroll queda desmentido.

La parte social

flat ui: nueva plantilla ksesocssAl renunciar voluntariamente al header y aside decidí integrar la parte social (formas de contacto) y las herramientas como el buscador formando un todo con el index pero diferenciadas de los posts. Forman un bloque.

Por cierto, quizás dedique un artículo a las notificaciones de error o conformidad del formulario de contacto. Blogger, como es típico en él, encierra una pequeña "sorpresa" en esa parte.

Tanto la galería de artículos más leídos como la caja con el contacto desaparecen en las siguientes páginas de entrada así como en la segunda y posteriores de los resultados de búsqueda.

El resto de resúmenes del index

nueva plantilla ksesocss flat uiPara cerrar la portada 7 artículos (sus resúmenes) más. Rompiendo la uniformidad y distribución equitativa con los tamaños y presentación del 3º al 5º.

En este tema he retirado el scroll infinito así que son obligados los típicos enlaces "adenlante/atrás" precediendo a un discreto pie de página.

Una sensación sobre el home

Hay un aspecto que en estos momentos iniciales me causa cierto desasosiego: creo que las distintas cajas "no respiran", les falta aire a su alrededor. Posíblemente esta sensación sea debida a los colores del gradiente.

Espero que con tus comentarios me ayudes a resolver este aspecto. Gracias.

Los artículos o pageType == 'item'

nueva plantilla blogger ksesocss 5No está resuelta la columna de la derecha que contiene los widgets. Y no lo está porque no termina de convencerme su existencia. Así que o encuentro otra forma o desaparecerán. Su única razón de existir es dar continuidad a los tres "patrocinadores" y por rellenar inicialmente esa parte en pantallas anchas.

De momento ya desaparecen los widgets al reducir la anchura de la ventana.

Así que si tienes alguna idea, por descabellada que te parezca, estoy predispuesto a escucharla.

La idea de separar los datos introductorios del artículo, como el título, fecha, autoría y las descripción, y el separarlos del cuerpo proviene de html5rocks.

Del cuerpo del artículo nada reseñable. Fondo blanco con font-size y line-height más que generosas para facilitar la lectura del mismo.

Sólo espero que la decisión de integrar el pié de artículo (suscripción, redes sociales para compartir y los relacionados) formando un todo con el post sea de tu agrado y que sean usados realmente.

Por cierto, a estas alturas ya habrás descubierto cómo incluyo mi "v-card" o el "sobre el autor" tanto en el índex como en los ítem. Sí, es a "la manera, que no copia, de G+". ¿Tu opinión? Sí, ya se, pasa desapercibido. Pero es una información secundaria.

Y en esta ocasión sí que he reservado espacio par incluir unos cuantos enlaces a páginas que considero interesantes. Al menos para mi. Es un pequeño cajón "de/sastre". Hay de todo un poco. Y espero sorprenderte con un par de ellas que no conozcas. Eso sí. Tendrás que llegar hasta el final para verlos, al igual que para encontrar tu avatar si me tienes en tus círculos de G+.

Créditos y reconocimientos

Además de los mencionados Html5rocks y G+ lo que ves es el resultado de estropear el trabajo de otros, entre los que cabe mencionar a:

La interfaz y visual

Como soy el primero en reconocer que "mi buen gusto" y dotes para "el buen diseño" son demasiado particulares y más que discutibles, busqué inspiración y ayuda en unos cuanto sitios dedicados a ello. En esta ocasión la ayuda me vino de las imágenes de UI de Creative Mints en dribbble. De varias de ellas saqué la idea de la distribución en el índex.

La trama o html de base

nueva plantilla blogger ksesocss flatLo segundo, una vez que tenía la idea visual, fue encontrar una plantilla sobre la que trabajar para no tener que partir de cero. Que esto es blogger y soy un ignorante de sus códigos, datas e includes obligados, condicionales y todas esas "particularidades" que hacen tan ameno trabajar con su código.

En esta ocasión la elegida fue la plantilla que basada en el trabajo Flat UI de designmodo ha sido adaptada a blogger por Prayag Verma como Flat UI theme.

Pero si buscas entre el código inicial y el resultante de mi tijera encontrarás más bien poco. Lo primero que hice fue eliminar todo el css, widgets y sus scripts y el etiquetado del html.

Otros elementos

Las imágenes de fondo del "top 5" o galería del index provienen de grupo de G plus Macro Photography unsplash.com.

Y ya para terminar, la ayuda en aspectos puntuales que he encontrado en blogs dedicados a blogger. Gracias al trabajo compartido por personas como Manolo, Emilio, Gema, Jesús... Antonio M... y tantos que es imposible referenciaros a todos. Las penas y quebrantos de lidiar con blogger se hacen más divertidas teniéndolos a mano.

El aspecto tipográfico

Y para cerrar este extenso post exculpatorio y justificativo del cambio dos recursos sin los que no luciría ni igual ni parecido y una de tiempos:

Dos son los orígenes de las fuentes tipográficas empleadas:

  1. De google fonts: la familia "dosis" en sus diversos tipos (font-weight) empleada en casi la totalidad de los textos, excepto las itálicas que es tipografía "Volkhov". La monospace de los códigos la verás con la que tengas definida en tu navegador.
  2. De We love icon fonts proviene la tipografía de iconos "Entypo" que tan profusamente ves por un lado y otro,

Tiempos de carga

nueva plantilla blogger ksesocss: tiempos de cargaY lo mejor para el final. Pese a todo lo que ves y tras la limpieza que te comentaba antes, los tiempos de carga del blog se mantienen en valores más que aceptables:

  • El índex realiza 56 peticiones (incluidas imágenes) y me carga en poco más de 4s. Y si le doy un Ctrl + F5 un poco más: 5s.
  • En los artículos sube un poco más, como es lógico. Para el anterior a éste (las grandes sombras en el flat design) con todas la imágenes del post y los widgets estos sob los datos: 134 requests ❘ 775 KB transferred ❘ 6.86 s (onload: 6.36 s, DOMContentLoaded: 2.50 s)

Y fin

Yo, al menos de momento y a falta de pulir algún detalle pendiente como el post al azar o de construir la página de todos los archivos y algo más, podría decir que estoy medianamente satisfecho de este tema.

Y sólo necesito saber una cosa: tú impresión y opiniones al respecto. ¿Me haces un favor y las compartes con todos nosotros en un comentario? Gracias.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso