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

Nuevo artículo en #tras42

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

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.

Comparte

Este blog no usa "botones sociales" para que compartas su contenido por respeto a tu privacidad y mejora de su funcionamiento. Además, no los necesitas, ¿o sí?

Publicado el por y Archivado en | | | |

Y para terminar, como agradecimiento a tu visita, déjame sugerirte que te suscribas al blog. Sólo recibirás los nuevos artículos.

También puedes ver alguno de estos artículos que tienen relación con el que acabas de leer:

NUEVO: Puedes insertar pens de Codepen y + en tu comentario

26 comentarios :

  1. Vamos a dejar algo en claro : estás haciendo un blog de CSS experimental.
    Aquí vamos a encontrar muchas soluciones a problemas en páginas industriales, pero todos sabemos que el fuerte de estos artículos es es el uso creativo, no convencional y muchas veces aún ni implementado por los navegadores de los distintos estilos.

    ¡Seguro que siempre va a aparecer "algo" que no termine de andar! ¿Cuál es el problema? ¡Si estamos aquí para probarlo!

    Reconozco que cuando vi todo cambiado se me erizaron los pelos de la nuca, pero ya sabés que ésa es una tara personal, no tiene que ver con otra cosa.

    Y lo de las columnas, insisto en que a mí me pasaba cuando abría artículos con ejemplos linkeados como los sliders de fotos. Para mí el conflicto estaba ahí, pero ya no tiene importancia.

    Este diseño está mucho más alegre. Igual, si no me gusta tampoco me preocupa; el mes que viene lo cambiás de nuevo ;-)

    ResponderEliminar
    Respuestas
    1. Gracias Furoya.
      Pierde cuidado, o hay una tragedia aún por descubrir o es mi intención que esto permanezca así algo más de un mes xDD

      Un saludo

      Eliminar
  2. Quedo mejor, el fondo nomás lo único medio feo, mucha mezcla de colores. Saludos!

    ResponderEliminar
    Respuestas
    1. Gracias, George.
      Pero más que cuestiones estéticas (cada cuál tenemos las nuestras xD me interesan sobremanera el funcionamiento, usabilidad y legibilidad del blog.
      Vamos, que si invita a permanecer en él o a salir corriendo.

      Un saludo

      Eliminar
  3. Esta interesante!!! sigue adelante...

    ResponderEliminar
  4. Muy buenos articulos, pero demasiada confusión visual (mucho color) me gustaba mas la anterior version del block.

    ResponderEliminar
    Respuestas
    1. Gracias Pablo

      ¿Podrías ser un poco más explícito sobre la "confusión visual" , por favor?
      ¿En qué secciones te sucede?

      Gracias.

      Eliminar
    2. Cuando quise buscar los artículos me demore un poco en ubicar en la sección Archivos (me gustaría verlos clasificados por grupo pero debe ser difícil clasificarlos).
      Los link de comentarios a la izquierda debería ser menos relevantes que en navegador (otra forma no círculos).

      Muchas gracias por los artículos, son muy buenos.

      Eliminar
  5. Pues yo difiero de los demás usuarios. Me encanta el colorido(y no porque sea daltónico, que no lo soy xD). Creo que los contrastes son muy acertados y nada molestos. Cabe decir que la anterior versión del blog casi hace despedirme de tu blog. Era innavegable. Vale que iba con Firefox, y ahora estoy visualizando tu página con el nuevo opera 15(yummy!). Ahora va fluida, no carga tanto la máquina como la anterior versión(probado en FF i en opera15). Las animaciones en los enlaces mas fluidas. Me encanta! Lástima que en opera15 no se vea el sidebar lateral de comentarios.

    ResponderEliminar
    Respuestas
    1. Gracias Uri

      He actualizado mi copia de Opera y verificado 2 veces que es la última y la versión que me muestra es la 12.16 (en window$ vi$ta) porque sí puedo ver los comentaristas de la izquierda.

      Porque supongo que lo estarás viendo en pantallas pequeñas. Esa parte la escondo con su @media queri correspondiente

      Eliminar
  6. ¡Cada vez nos sorprendes más! Me encanta este nuevo diseño, casi es imposible poner alguna pega...
    En cuanto a temas técnicos, yo no he encontrado ningún error importante. El único error que yo veo está en la meta viewport: en los móviles, tu blog no se ajusta correctamente y no se aplican las medoa queries, si no que se reduce para mostrar el blog entero. Saludos y enhorabuena por el blog, me ha sido de mucha utilidad en varias ocasiones.

    ResponderEliminar
    Respuestas
    1. Gracias por el aviso, Jorge.
      Efectivamente, no aplican las @medias queries. Así que tarea pendiente: ver qué error he cometido.

      Un saludo

      Eliminar
    2. El error está aquí:
      <meta content='width=1100' name='viewport'/>
      Para que la página se ajuste correctamente la meta sería:
      <meta content='width=device-width,initial-scale=1.0' name='viewport'/>
      Saludos

      Eliminar
    3. Casi, Jorge.
      El causante es ese meta. Pero el error está en que por alguna razón no funciona este condicional.

      <b:if cond='data:blog.isMobile'>
      <meta name="viewport"
      content="width=device-width,
      initial-scale=1.0,
      user-scalable=yes"/>
      <b:else>
      <meta content='width=1100' name='viewport'/>
      </b:if>
      Así que en lo que puedo investigar este tema y ver qué estoy haciendo mal, retiro el condicional y dejo solo el primer meta. Que por cierto, no recuerdo el porqué lo hice así.
      Espero que así funcionen las @medias queries.

      Gracias.

      Eliminar
  7. Ando casi sin conexión este verano y por eso hasta hoy no vi esto. A mí me gusta (casi) todo lo que se salga de lo que últimamente parece un estándar para los blogs "modernos". Por otra parte me resulta más cómoda la navegación que antes, así que bien por el cambio ;)

    ResponderEliminar
    Respuestas
    1. Gracias.

      Procura que dure tu desconexión y disfruta mientras tanto.

      Un saludo

      Eliminar
  8. Yo creo que, y esta es solo mi opinión... yo cambiaría radicalmente el diseño. Los contenidos, que al fin y al cabo son lo más importante... OLÉ!!!! uno de los mejores blogs en español que hay, porque no hay ninguno enfocado al css tan completo. Pero el diseño... buffff!!!... en cuanto a usabilidad es bastante malo, porque resulta muy complicado encontrar las cosas ya que está todo mezclado y es dificilisimo encontrar las cosas. Arriba un menú de cuatro links... a la izqueirda circulos con imagenes que no se saben que son hasta que se pasa por encima... debajo del menú el último post... a su derecha tres cuadros vacios (que si se les mete color es peor aún)... debajo de la primera entrada hay un formulario de contacto, una subscripción y un campo de busqueda... debajo un "top 5".... debajo del formulario las redes sociales.... y debajo aparecen el resto de posts que están tan pegados que cuesta leerlos de manera comoda y hasta casi diferenciarlos... realmente cuesta diferenciar lo que es una entrada con una sección aparte (el formulario... las subscripciones...)... y uno de los problemas m´ñas gordos que veo es la ausencia de zonas blancas, es dercir, está toda mi pantalla ocupada con bloques (y tengo un ancho de pantalla de 1600px, osea, que no es pequeña), practicamente en el diseño no hay ni un espacio vacio y eso crea sensación de agobio, de prisa, de querer meter todo como sea... y no resulta agradable.

    Yo siempre que leo este blog (todos los dias lo reviso) pienso lo mismo: "jope, que pena que sea tan dificil encontrar las cosas y navegar por esta web, porque los contenidos son geniales!!!"

    Pero bueno, esto es SOLO MI OPINIÓN EH!!! :)

    ResponderEliminar
    Respuestas
    1. Gracias Jacobo por dedicarme parte de tu tiempo.

      Espero me permitas que no entre ni a valorar ni mucho menos intentar rebatir tus palabras. Más que nada por una cuestión de respeto.

      Símplemente 2 apuntes breves:
      La portada es la portada (creo que es a la que te refieres) y la premisa básica era que no sea otra más de tantas con sota, caballo y rey y cambio el rosa por el fucsia. No obstante verás que la falta de "blancos" ya la menciono yo en el artículo.

      Sobre encontrar algo en el blog: creo que ya lo he manifestado otras veces. Yo al menos no paso página tras página. O bien hago uso del buscador de la página (las menos de las veces) o utilizo a google con el limitador site: si quiero centrarme en un dominio concreto.

      Un saludo.

      P.D. Sobre los avatares de los comentaristas: No te extrañe ver en un futuro que le otorgue más presencia y relevancia a las opiniones que vertéis y a quienes las hacen. Pero es blogger y las posibilidades o libertades que otorga su código no son muchas.

      Eliminar
  9. Hola!

    Ante todo enhorabuena por el blog. Lo más importante es el contenido, y ahí la calidad se nota :).

    Sobre el rediseño, personalmente me gustaba tanto el anterior como este (aunque yo sea más monocromático xD) Y sobre la usabilidad, yo no lo veo tan "raro" como comentaban por arriba. Está claro que al no ser "sota, caballo y rey" pues tienes que prestar más atención para encontrar lo que buscas, y eso no es necesariamente malo :)

    Por último, comentar un ""fallo"" que he visto al abrir la web en el móvil: el (5) de la lista del top five se baja de línea.

    Un saludo!

    ResponderEliminar
    Respuestas
    1. MEV entre nosotros ¡RAMEN! ;-)

      Efectivamente, Daviz. El cerebro es bastante sibarita y el ojo un vago. Y si se encuentra con un patrón que le resulta familiar pasa sin prestar atención a aquellos elementos que considera "carentes de interés".

      En una disposición típica de header, aside y main en filas y columnas todos nosotros pasamos sin prestar mayor interés al menos a dos elementos y medio. Y todo lo contrario al toparse con algo fuera del esquema esperado y/o conocido.

      Y en mente tenía ese comportamiento del ojo y el cerebro cuando decidí esa disposición en el index.


      Gracias por el aviso del 5. Supongo que es una cuestión de espacio. Lo miraré.

      Un saludo

      Eliminar
  10. Hola Kseso

    Llevo tiempo siguiendo tu blog pues profundizas mucho en el tema de Css y publicas sobre cosas realmente interesantes que apenas son conocidas por la comunidad de desarrolladores ( por ej. la propiedad all y la fullscreen).

    También se me colgó el Firefox con el tema que tenías antes, pero observe que el problema pudo venir con el widget de artículos recomendados, que tardaba mucho en cargarse y llegaba a bloquear el browser, no por el diseño multicolumnas que resultó ser una propuesta atrevida y original.

    Para tu tranquilidad, decirte que me gusta hasta ahora todos los diseños que aplicas a tu blog, y que experimentes con nuevas técnicas pues así es como se aprende de verdad.

    saludos y sigue así, me encanta tu blog.

    ResponderEliminar
  11. Viendo el código fuente de tu blog, me he fijado que has conseguido comentar los estilos predeterminados que añade Blogger (widget_css_2_bundle.css y authorization.css) para que no se ejecuten. ¿Cómo lo has hecho sin que Blogger te diga que la plantilla es incorrecta?

    ResponderEliminar
    Respuestas
    1. Sólo tienes que reemplazar esta línea del código

      <b:skin><![CDATA[/*

      por éste

      <style id='page-skin-1'>/*
      <b:skin><![CDATA[*/


      Pero lo explica mucho mejor E.Cobos en su blog:
      Eliminar los estilos y scripts por defecto de blogger
      Que es de donde lo tomé.

      Un saludo

      Eliminar
  12. dos preguntas, puedo usar el diseño de tu blog en el mio? si es permitido de que manera puedo hacerlo?

    ResponderEliminar
    Respuestas
    1. Hola Mike.
      Dos respuestas y una opinión:
      1: Sí. Todo lo que es de mi autoría en este blog está bajo una licencia Beerware, excepto el c&p literal de los artículos no marcados como "postcrossing"

      2: ¿Cómo lo puedes hacer? Pues como todo en blogger: adaptando el código fuente y los estilos para lograr lo que necesites.

      La opinión: nunca recomendaría a nadie que haga una copia tal cual de algo ya existente. Usa lo que encuentres y sea de tu agrado como inspiración y ayuda para crear algo tuyo en exclusiva.

      Un saludo.

      P.D.: ¡Ah! Por cierto, si lo que estabas buscando sin mencionarlo expresamente era "conseguir la plantilla" de este tema siento decirte que no está disponible ni en "oferta".

      Eliminar
    2. Gracias por las respuestas, y en especial por la opinion, quiero aclarar que no busco la platilla sino adaptar la visuailizacion del sitio pero con lo explicado en tu opinion me has inspirado a crear el mio propio gracias.

      Eliminar