Presentando en sociedad el nuevo tema del Blog. Incluye una presentación de los artíciulos en multicolumnas Css en vieports con tamaño suficiente para ellas.
La mejor manera de descubrir los fallos es poner en funcionamiento y dejar que todos escrudiñen la plantilla.
Así que aquí tenéis un espacio para ir descubriendo qué tengo que arreglar a la vez que voy adaptando este nuevo tema al blog. Os agradecería me los indiquéis en comentarios.
Ampliado y tema licenciado
Con los créditos y reconocimientos y mi ofrecimiento del tema para quien desee instalarlo
Una vez pulidos los fallos y despistes más gordos añadiré los detalles y créditos de este nuevo tema. Mientras y hasta entonces, comencemos con los créditos:
Créditos y Reconocimientos
Esta versión es deudora y posible gracias a un buen puñado de personas y servicios que comparten sus conocimientos y saber hacer, como:
@tommikaikkonen
Las multicolumnas son fruto del trabajo de una realización de Tommi Kaikkonen: "Typesetting Responsive CSS3 Columns". En ese artículo encontrarás una amplia explicación y detalles.
E.Cobos
Este tema parte de la realización de Emilio: "Lienzo – Una plantilla básica para blogger". Yo ya me las arreglé después para estropear su trabajo lo suficiente. Todo lo que el limpió yo enredé.
Para los sumarios de portada y otras cosillas propias de Blogger me apoyé en unos cuantos artículos de autores diversos para comprender su funcionamiento. Un ejemplo es el artículo de Oloman en su blog al respecto.
Eché de menos que blogger tenga tan poca información pública sobre algunos aspectos de su código.
We Love Icon Fonts
Para los pictogramas o tipografía de iconos uso el servicio que ofrece WeLoveIconFonts, en concreto el paquete Font Awesome. En este artículo tienes una explicación detallada de este servicio
Tipografías
De Google Fonts. En concreto tres: Raleway para el título de los artículos y el texto en general. Quicksand: La redondilla gruesa del nombre del blog y los hn dentro de los artículos. Droid Serif: para citas, blockquotes y afines. En su variante itálica.
Los códigos y demás tiene declarada la familia genérica monospace. Así que cada cual la verá con la que tenga definida.
Trabajo Pendiente
Como decía en al inicio, hay aspectos que necesitan mejorarse. Poco a poco iré corrigiéndolos con tu ayuda si eres tan amable de dejarme en un comentario aquello que encuentres mejorable.
Un aspecto pendiente de evaluación es que se carguen los artículos en la versión "columnas" o "vertical". Depende de vosotros, usuarios y visitantes, y de vuestras opiniones al respecto.
También como nota secundaria y como algunos han preguntado en el pasado: me estoy planteando incluir algún tipo de "publicidad". Así que ahora sí estoy abierto a sugerencias y propuestas. Si quieres que tu marca, producto o empresa colabore con este blog ahí tienes el formulario de contacto.
Este tema lo comparto
Sí, pese a que esté recién salido del horno con todo sus fallos, errores y posible malfuncionamiento COMPARTO EL TEMA bajo pedido expreso en un comentario en esta entrada. Nada de peticiones por cauces privados.
Aquí e indicando el blog en el que quieras instalarlo. Sólo una condición. Que sea un blog "de autor", nada de empresas (de cualquier naturaleza) o de actividades económicas.
Eso sí, ni se ofrece soporte técnico (otra cosa es ayuda puntual) ni responsabilidad alguna derivada de su uso. Todo bajo tu exclusiva y única responsabilidad.
Y otra nota que me parece importante de resaltar: no es un tema al uso. Las modificaciones para adaptarlos no son a base de widgets. A puro y duro código.
the obCSServer ᛯ 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
Kseso
Gracias George por esa captura. La miraré con detenimiento.
Siento que te resulte menos usable y grata esta versión. Bueno, mejor dicho, lo siento por tu ratón, por ese click de más que tienes que dar [ xDD ;-) es broma ] para tenerla en vertical.
¡ Viva la experimentación y el riesgo! Es problema de salirse de lo habitual es que el usuarioo se encuentra desorientado y necesita un cierto tiempo para identificar el nuevo funcionamiento. Ahora que el 90% de las páginas se hacen con wordpress y estamos habituados aun menú a la izquierda y una lectura vertical, la navegación horizontal resulta extraña. La mayoria de los usuarios van a sentir rechazo, pero posiblemente encuentres algunos elementos que sean validos. Cosas que yo haria: las columnas no ocupen el 100% de modo que se "entrevea" el principio de la siguiente columna y se identifique su contiunuidad. Algo que me gusta: el menu fijo superior. Algo que no me gusta: algunos iconos necesitan alguna palabra fija (aparte de la explicacion emergente). Suerte y animo
Sí, lo de la navegación horizontal resulta extraña y hasta casi "antinatural" hoy día.
Las columnas tienen una anchura en rem, así que el tamaño final depende de la configuración por usuario de ese aspecto en su navegador y se verá más o menos dependiendo del monitor de cada cual.
Sobre la falta de información en los iconos es algo pendiente y obligado. Quizás un title o quizás un tooltip... peró sí, deben mostrar info.
Sorpresa, sorpresa, pero no tanto porque ya te había leído contando tus problemas con algunas cosillas :)
Evidentemente cuesta hacerse. Yo he estado como 10 minutos familiarizándome con la navegación y lo más "raro" es lo de ir leyendo en horizontal. Es una opinión no vinculante -no podía ser de otra manera- pero creo que eso es más adecuado para sitios con contenido gráfico. A mí al menos me cuesta mucho ir leyendo en vertical y tener que "saltar" a la derecha al terminar la pantalla.
Y ahora algunas cosas que he visto por si todavía no te diste cuenta tú. Unas para reparar seguro, otras mejorables y otras muy muy opinables:
- No salen las entradas relacionadas (undefined) - Enorme salto tras comentarios G+ en http://ksesocss.blogspot.com/2013/04/comentarios-googleplus-blogger-compatibles.html - La sombra en los títulos es original pero me incomoda la lectura - Demasiado retardo en los tooltips del menú superior. Me llevó una eternidad leerlos todos para saber qué hacía cada botón antes de empezar a navegar. Si no llega a ser porque estaba repasando, posiblemente en el tercero o cuarto habría pinchado para ver de una vez dónde. O peor... habría abandonado. - Demasiados efectos de transición en casi todos los enlaces o quizás demasiado notables y/o largos en el tiempo. Algo similar a lo que me pasaba con el menú superior.
Para el final dejo lo bueno.
Ahora sí tiene sentido el scroll infinito en portada. Anteriormente tenías cosas en el pie de página que era imposible ver. Las barras fijas arriba y a la izquierda complementan muy bien ese efecto dejando siempre a la vista los enlaces principales de navegación y los cacharritos que te interesan.
Y sobre todo me encanta que sea cual sea el resultado final, se innove y se huya de los mismos diseños que todo el mundo tiene. He leído en el anterior comentario que el 90% de las páginas se hacen con WP. Supongo que ese dato debe ser erróneo, pero coincido en que todas son iguales... las de WP me refiero ;)
Gracias Oloman por tomarte el tiempo de analizar tan a fondo la página y darme tu opinión.
.- No de las relacionadas es notorio. Pero he preferido centrarme en otros aspectos.
.- El salto tan grande debo mirar el porqué se creo. Supongo que alguna colisión entre js pues crea el estilo en línea y le inyecta una altura desorbitada.
.- Tomo nota de la sombra. Subo el font-size a 2rem y la sombra la paso a #d5d5d5 .- Como verás el menú lateral ha desaparecido y sus efectos con retardo. Bajaré un poco el valor de delay en las transiciones. Y posíblemente alguna transition salga fuera.
Sobre las columnas, es una apuesta y la base del cambio. Pese a mis propias dudas y a las tentaciones que tuve de renunciar a ellas. Como ya he indicado, quizás lo que sí sea buena idea es que no carguen por defecto, sino a demanda. Pero eso después de que se hayan visto durante un tiempito, para que sepáis de su existencia xD
Y acabo de descubrir algo más complicado de resolver respondiendo a este comentario tuyo. Al pinchar en el enlace (Responder) el foco se ha ido a la izquierda y casi que no encuentro el formulario que quedó en su sitio. Otra cosilla sobre los comentarios es que no queda muy bien que alargue la caja hasta el final de la pantalla con la mayoría de ella vacía. Sólo tienes que ver mi primer comentario con una altura de ventana "normal". Es curioso porque cuando la haces menos alta sí se ajusta bien. Pero no voy a ver más, que ya tengo bastante entretenimiento con "lo mío" y hay que dejar para los demás, en este caso para tí.
Y lo que iba a decir de primeras... personalmente me gusta más alguna que otra cosa que consideres más relevante en la barra izquierda pues ahora hay más de esos tooltips gigantes que no me gustan del todo XD
Por último, no te dejes llevar por todo lo que comentemos, que si no te volverás loco haciendo cambios y quizás te desvies mucho de tu idea. De todo lo dicho toma en cuenta sólo aquello en lo que tú mismo tenías dudas.
No, no. Pierde cuidado. Que como tenga una idea... Lo de "más pinturitas" arriba y las cajas gigantes (según en qué ventana se vean) ya lo tenía pensado de antes.
Todas esos funcionamientos anómalos vienen por el escaso control (y menor soporte de los navegadores) a muchos aspectos de los elementos dentro de las columnas css.
La suerte mía es que tengo una buena excusa para todos los errores (propio o ajenos): "Es un tema experimental" xD
Hola ! Pues a mi me ha encantado ! Sobre todo por ser distinto a tooooodo lo que hay por ahí, y cuadra bien para un proyecto de blog que tengo en mente, me encantaría tenerlo, seguiré al pendiente. Enhorabuena !
Coincido un poco con Oloman que cuesta acostumbrarse al tipo de lectura que al menos hacemos en los blogs (ya que en la vida real sí vivimos pegando el salto a la derecha para seguir la lectura de una revista, libro, cuaderno, etc) pero fuera de eso la veo realmente innovadora, tal cual! Siempre uno ve con algunas variantes y truquillos lo mismo, esta realmente ha roto el molde!!
Que pasada! ahora que he podido ver el template desde un navegador web sólo te puedo decir una cosa: Es el template más innovador que he visto hasta el momento en blogger.
Se me hace raro leer en Horizontal el contenido, pero está muy trabajado.
A simple vista, me ha gustado el diseño. Es muy innovador, claro, limpio y sencillo. En mi opinión quizá la sombra interior la haría más pequeña y discreta o la barra lateral izquierda un poco más estrecha, pero para gustos los colores. El scroll horizontal se hace raro, pero es una buena idea. He encontrado pocos errores técnicos, por ejemplo que se pueden ver enlaces que normalmente sólo ve el administrador, como el "Eliminar" de los comentarios o la llave inglesa de edición de widgets que llevan a páginas de "No tienes permiso para hacer esto". Pero en general, me ha gustado el cambio.
Gracias Jorge Pensaba que esos enlaces e iconos los incluía blogger sólo para el admin estando logueado. Bueno, hasta meterme con el código y añadir algún if: o condición lo arreglo como mejor y más fácil me es: un display: none.
No se a qué sombra interior te refieres. ¿Quizás la que acompaña a las cajas desplegables del menú superior? Si son esas el deseo es que simule el efecto del típico lightbox sin serlo.
¿La barra lateral izquierda la ves muy grande? Podría ser, tiene un tamaño declarado de 11.1rem, así que el computado depende de tu configuración de ese valor en tu navegador. Lo típico está entre 16 y 18px por rem. Por lo que en la mayoría de usuarios su valor computado estará entre 178 y 200px. No la considero excesiva.
Una vez más, gracias por la valoración y sobre todo por los errores que detectaste.
Yo me di cuenta de lo de los iconos de blogger por casualidad: al traducir la página con Google Traductor salen esos iconos porque siempre están en el código fuente, aunque no se suelan ver. Sobre las sombras, me refiero a la que está debajo de la barra fija de iconos. En mi opinión, es un poco grande, pero como ya he dicho, para gustos los colores. Otra cosa más: yo normalmente uso Firefox pero acabo de abrir tu blog con Chrome por un problema técnico y he visto que el ✓ azul y la X roja del botón "Columnas" sólo salen en Chrome. Saludos.
Buenísimo. Llevamos toda nuestra vida leyendo en horizontal; prensa, revistas o libros a dos columnas. Me parece una muy buena idea traerlo a la web. A mí al menos me favorece la lectura. Es cierto que normalmente se usa para lo gráfico, pero ahí está la novedad; la innovación.
En cuanto a experiencia de usuario, tampoco debe haber queja en este sentido ya que das opción a ponerlo en vertical. Al gusto del lector (auténtica aplicación web).
¡Bravo!
PD: ¿Algún pero? Lo cierto es que la navegación no me termina de llegar. El aspecto de la barra en sí es muy bueno, me refiero al despliegue de los contenidos al hacer hover. Los veo demasiado grandes y el sombreado exagerado. Quizás reduciendo el tamaño tanto de los bloques como de la sombra sería más agradable. Algo así para que me entiendas: http://arodriguez.cc/img/ksesocss_nav.png o http://arodriguez.cc/img/ksesocss_nav2.png. En fin, una apreciación personal.
PD 2: Sobre la publicidad no te lo plantees más, no pierdes nada. Algo de remuneración por el trabajo que haces aquí creo que es más que razonable.
La mejor manera de descubrir los fallos es poner en funcionamiento y dejar que todos escrudiñen la plantilla.
No me gusto, prefiero la anterior por la facilidad de lectura (al menos con este monitor no se ve tan bien).
ResponderEliminarGracias George por esa captura. La miraré con detenimiento.
EliminarSiento que te resulte menos usable y grata esta versión. Bueno, mejor dicho, lo siento por tu ratón, por ese click de más que tienes que dar [ xDD ;-) es broma ] para tenerla en vertical.
Un saludo
Pasa que en ese monitor no es tan cómodo como en este o como en la versión anterior xD. Y si, había usado la vista vertical también :P
Eliminar¡ Viva la experimentación y el riesgo!
ResponderEliminarEs problema de salirse de lo habitual es que el usuarioo se encuentra desorientado y necesita un cierto tiempo para identificar el nuevo funcionamiento.
Ahora que el 90% de las páginas se hacen con wordpress y estamos habituados aun menú a la izquierda y una lectura vertical, la navegación horizontal resulta extraña.
La mayoria de los usuarios van a sentir rechazo, pero posiblemente encuentres algunos elementos que sean validos.
Cosas que yo haria: las columnas no ocupen el 100% de modo que se "entrevea" el principio de la siguiente columna y se identifique su contiunuidad.
Algo que me gusta: el menu fijo superior.
Algo que no me gusta: algunos iconos necesitan alguna palabra fija (aparte de la explicacion emergente).
Suerte y animo
Gracias Luis Miguel por el análisis.
EliminarSí, lo de la navegación horizontal resulta extraña y hasta casi "antinatural" hoy día.
Las columnas tienen una anchura en rem, así que el tamaño final depende de la configuración por usuario de ese aspecto en su navegador y se verá más o menos dependiendo del monitor de cada cual.
Sobre la falta de información en los iconos es algo pendiente y obligado. Quizás un title o quizás un tooltip... peró sí, deben mostrar info.
Un saludo
Sorpresa, sorpresa, pero no tanto porque ya te había leído contando tus problemas con algunas cosillas :)
ResponderEliminarEvidentemente cuesta hacerse. Yo he estado como 10 minutos familiarizándome con la navegación y lo más "raro" es lo de ir leyendo en horizontal. Es una opinión no vinculante -no podía ser de otra manera- pero creo que eso es más adecuado para sitios con contenido gráfico. A mí al menos me cuesta mucho ir leyendo en vertical y tener que "saltar" a la derecha al terminar la pantalla.
Y ahora algunas cosas que he visto por si todavía no te diste cuenta tú. Unas para reparar seguro, otras mejorables y otras muy muy opinables:
- No salen las entradas relacionadas (undefined)
- Enorme salto tras comentarios G+ en http://ksesocss.blogspot.com/2013/04/comentarios-googleplus-blogger-compatibles.html
- La sombra en los títulos es original pero me incomoda la lectura
- Demasiado retardo en los tooltips del menú superior. Me llevó una eternidad leerlos todos para saber qué hacía cada botón antes de empezar a navegar. Si no llega a ser porque estaba repasando, posiblemente en el tercero o cuarto habría pinchado para ver de una vez dónde. O peor... habría abandonado.
- Demasiados efectos de transición en casi todos los enlaces o quizás demasiado notables y/o largos en el tiempo. Algo similar a lo que me pasaba con el menú superior.
Para el final dejo lo bueno.
Ahora sí tiene sentido el scroll infinito en portada. Anteriormente tenías cosas en el pie de página que era imposible ver. Las barras fijas arriba y a la izquierda complementan muy bien ese efecto dejando siempre a la vista los enlaces principales de navegación y los cacharritos que te interesan.
Y sobre todo me encanta que sea cual sea el resultado final, se innove y se huya de los mismos diseños que todo el mundo tiene. He leído en el anterior comentario que el 90% de las páginas se hacen con WP. Supongo que ese dato debe ser erróneo, pero coincido en que todas son iguales... las de WP me refiero ;)
Gracias Oloman por tomarte el tiempo de analizar tan a fondo la página y darme tu opinión.
Eliminar.- No de las relacionadas es notorio. Pero he preferido centrarme en otros aspectos.
.- El salto tan grande debo mirar el porqué se creo. Supongo que alguna colisión entre js pues crea el estilo en línea y le inyecta una altura desorbitada.
.- Tomo nota de la sombra. Subo el font-size a 2rem y la sombra la paso a #d5d5d5
.- Como verás el menú lateral ha desaparecido y sus efectos con retardo. Bajaré un poco el valor de delay en las transiciones. Y posíblemente alguna transition salga fuera.
Sobre las columnas, es una apuesta y la base del cambio. Pese a mis propias dudas y a las tentaciones que tuve de renunciar a ellas.
Como ya he indicado, quizás lo que sí sea buena idea es que no carguen por defecto, sino a demanda.
Pero eso después de que se hayan visto durante un tiempito, para que sepáis de su existencia xD
Una vez más, gracias por todas las indicaciones.
Y acabo de descubrir algo más complicado de resolver respondiendo a este comentario tuyo. Al pinchar en el enlace (Responder) el foco se ha ido a la izquierda y casi que no encuentro el formulario que quedó en su sitio. Otra cosilla sobre los comentarios es que no queda muy bien que alargue la caja hasta el final de la pantalla con la mayoría de ella vacía. Sólo tienes que ver mi primer comentario con una altura de ventana "normal". Es curioso porque cuando la haces menos alta sí se ajusta bien. Pero no voy a ver más, que ya tengo bastante entretenimiento con "lo mío" y hay que dejar para los demás, en este caso para tí.
EliminarY lo que iba a decir de primeras... personalmente me gusta más alguna que otra cosa que consideres más relevante en la barra izquierda pues ahora hay más de esos tooltips gigantes que no me gustan del todo XD
Por último, no te dejes llevar por todo lo que comentemos, que si no te volverás loco haciendo cambios y quizás te desvies mucho de tu idea. De todo lo dicho toma en cuenta sólo aquello en lo que tú mismo tenías dudas.
No, no. Pierde cuidado. Que como tenga una idea...
EliminarLo de "más pinturitas" arriba y las cajas gigantes (según en qué ventana se vean) ya lo tenía pensado de antes.
Todas esos funcionamientos anómalos vienen por el escaso control (y menor soporte de los navegadores) a muchos aspectos de los elementos dentro de las columnas css.
La suerte mía es que tengo una buena excusa para todos los errores (propio o ajenos): "Es un tema experimental" xD
Hola ! Pues a mi me ha encantado ! Sobre todo por ser distinto a tooooodo lo que hay por ahí, y cuadra bien para un proyecto de blog que tengo en mente, me encantaría tenerlo, seguiré al pendiente. Enhorabuena !
ResponderEliminarGracias Key
EliminarTú sí que sabes y no estos xDDD :-D~
Un saludo
Coincido un poco con Oloman que cuesta acostumbrarse al tipo de lectura que al menos hacemos en los blogs (ya que en la vida real sí vivimos pegando el salto a la derecha para seguir la lectura de una revista, libro, cuaderno, etc) pero fuera de eso la veo realmente innovadora, tal cual! Siempre uno ve con algunas variantes y truquillos lo mismo, esta realmente ha roto el molde!!
ResponderEliminarGracias Paula
EliminarCreo que más que nada es una cuestión de costumbre o hábitos.
Pero bueno, el objetivo lo estoy cumpliendo. Me estáis dando opiniones y análisis muy valiosas.
Un saludo.
Que pasada! ahora que he podido ver el template desde un navegador web sólo te puedo decir una cosa: Es el template más innovador que he visto hasta el momento en blogger.
ResponderEliminarSe me hace raro leer en Horizontal el contenido, pero está muy trabajado.
Enhorabuena ;)
Anda, acabo de descubrir que pinchando en "Columnas" tb se puede leer en vertical :))
EliminarA simple vista, me ha gustado el diseño. Es muy innovador, claro, limpio y sencillo. En mi opinión quizá la sombra interior la haría más pequeña y discreta o la barra lateral izquierda un poco más estrecha, pero para gustos los colores. El scroll horizontal se hace raro, pero es una buena idea. He encontrado pocos errores técnicos, por ejemplo que se pueden ver enlaces que normalmente sólo ve el administrador, como el "Eliminar" de los comentarios o la llave inglesa de edición de widgets que llevan a páginas de "No tienes permiso para hacer esto". Pero en general, me ha gustado el cambio.
ResponderEliminarGracias Jorge
EliminarPensaba que esos enlaces e iconos los incluía blogger sólo para el admin estando logueado.
Bueno, hasta meterme con el código y añadir algún if: o condición lo arreglo como mejor y más fácil me es: un display: none.
No se a qué sombra interior te refieres. ¿Quizás la que acompaña a las cajas desplegables del menú superior?
Si son esas el deseo es que simule el efecto del típico lightbox sin serlo.
¿La barra lateral izquierda la ves muy grande? Podría ser, tiene un tamaño declarado de 11.1rem, así que el computado depende de tu configuración de ese valor en tu navegador. Lo típico está entre 16 y 18px por rem. Por lo que en la mayoría de usuarios su valor computado estará entre 178 y 200px.
No la considero excesiva.
Una vez más, gracias por la valoración y sobre todo por los errores que detectaste.
Un saludo
Yo me di cuenta de lo de los iconos de blogger por casualidad: al traducir la página con Google Traductor salen esos iconos porque siempre están en el código fuente, aunque no se suelan ver.
EliminarSobre las sombras, me refiero a la que está debajo de la barra fija de iconos. En mi opinión, es un poco grande, pero como ya he dicho, para gustos los colores.
Otra cosa más: yo normalmente uso Firefox pero acabo de abrir tu blog con Chrome por un problema técnico y he visto que el ✓ azul y la X roja del botón "Columnas" sólo salen en Chrome.
Saludos.
Buenísimo. Llevamos toda nuestra vida leyendo en horizontal; prensa, revistas o libros a dos columnas. Me parece una muy buena idea traerlo a la web. A mí al menos me favorece la lectura. Es cierto que normalmente se usa para lo gráfico, pero ahí está la novedad; la innovación.
ResponderEliminarEn cuanto a experiencia de usuario, tampoco debe haber queja en este sentido ya que das opción a ponerlo en vertical. Al gusto del lector (auténtica aplicación web).
¡Bravo!
PD: ¿Algún pero? Lo cierto es que la navegación no me termina de llegar. El aspecto de la barra en sí es muy bueno, me refiero al despliegue de los contenidos al hacer hover. Los veo demasiado grandes y el sombreado exagerado. Quizás reduciendo el tamaño tanto de los bloques como de la sombra sería más agradable. Algo así para que me entiendas: http://arodriguez.cc/img/ksesocss_nav.png o http://arodriguez.cc/img/ksesocss_nav2.png. En fin, una apreciación personal.
PD 2: Sobre la publicidad no te lo plantees más, no pierdes nada. Algo de remuneración por el trabajo que haces aquí creo que es más que razonable.
PD 3: Inspeccionando en 3, 2, 1...
Gracias Twilvaro por tu opinión.
EliminarVeo que esa emulación del efecto lightbox no gusta y que las cajas son vistas como desmesuradas. Prometo repensar la idea.
Un saludo