sábado, 6 de marzo de 2010

La Informática, la Música Digital y su Puta Madre v2

Antes, este blog era como en la captura de pantalla de arriba: una Mínima Black ligeramente modificada. Ahora es una Simplexive notablemente destrozada.

Llevaba mucho tiempo queriendo hacer el cambio, pero muchas cosas han sido las que lo han ido demorando, hasta que un día me dije: voy a dedicarme sólo a la nueva plantilla hasta que logre algo que medio me guste. Y como soy tan sólo un aficionado en temas de diseño web y de Blogger en concreto, pues me ha costado lo mío conseguirlo.

Es evidente que, aunque lo he hecho solo, tengo que agradecer a muchas personas, que son autores de varios blogs de los que se llaman "de ayuda", el esfuerzo que han hecho para que gente torpe y autodidacta, como un servidor, pueda hacer prácticamente lo que imagine de su rinconcito en la web.

Para tod@s ell@s he creado esta página a modo de agradecimiento. Bueno, para ell@s, y para quienes tengáis curiosidad en saber dónde he aprendido lo necesario para crear este nuevo diseño. La lista está en constante revisión, así que es posible que falte alguien o algún post en concreto del que aprendí algo. Poco a poco iré desgranando cada cosa de lo aprendido en entradas más detalladas aquí mismo.

Todavía faltan muchos detalles por pulir, pero el ojetivo de este diseño ya está logrado, o al menos eso creo, que es la rapidez en la carga y resaltar los contenidos, gracias al ensanche de la columna principal, la elección de los colores y el nuevo botón para ensanchar, todavía más, el cuerpo de las entradas.

Los enlaces a directorios y demás cosas las iré colocando poco a poco. Tengo una lista de blogs provisional que hará el papel de blogroll hasta que la tenga colocada aquí como es debido.

Este diseño está optimizado para Firefox 3.5 en adelante, Google Chrome 4 y Safari. En la versión 10.50 de Opera se ve casi igual y... Bueno, los usuarios de IE ya os habréis dado cuenta del aviso en la página principal. No tengo acceso a ese navegador, así que no sé hasta qué punto veréis errores. Si hay alguno gordo de verdad, avisadme.

Ahora sí me voy a dedicar a llenar de contenido este rincón. Rediseñarlo me ha llevado demasiado tiempo y tengo mucho que escribir y contar por aquí. Y también tengo mucho que componer, tocar y grabar... Y ahí os quiero a tod@s, cuando publique mis trabajos... Y pasaré lista .

39 comentarios:

  1. Te ha quedado genial! Te felicito, gran trabajo ;-)

    Salud/OS!

    ResponderEliminar
  2. Juas, y además te carga tela de rápido:PingdomTools la mia tarda el doble :-S

    ResponderEliminar
  3. Increíble jeje, no imagine un aspecto tan moderno en Blogger...

    El cambio como dices era necesario y precisamente mejora en los puntos que comentas, mucho más rápido, ni comparación :P

    Y este aspecto renderiza mucho mejor (no se si en IE será así :S jaja) y me ha gustado mucho el toque moderno que ha hecho que olvidará el anticuado aspecto :P

    Salu2 y enhorabuena!!

    ResponderEliminar
  4. Pues a ver, ahora me pillas un poco de buya, mañana si tengo tiempo le hecho un vistazo más a fondo. Bonito es, sin dudarlo. Y cargar, lo que se dice cargar, carga rápido. ;)

    Sin embargo, una vez cargado, al moverse rápidamente por la página el movimiento no es del todo fluido. Será que soy un tiquismiquis. Primero pensé que era cosa de Opera (en el que no se ve del todo bien, todo sea dicho de paso), así que probé en Safari pero pasa igual.

    Bueno, pues eso. Es un pequeño detalle, casi imperceptible. Pero bueno.

    Saludos!!

    ResponderEliminar
  5. Menudo cambio!! Felicidades José :)

    ResponderEliminar
  6. ¡Está chulísima, José! El tono este azulón me gusta mucho. Gran trabajo, enhorabuena :D

    Un abrazo ^^

    ResponderEliminar
  7. Aunque me parece algo feucho el icono que tienes en marcadores sociales de Google Buz, te paso uno que parece que es algo mejor :D

    http://i50.tinypic.com/1z566h3.jpg
    No he encontrado tu e-mail para enviartelo por correo así que te lo dejo en un comentario :P
    Salud/OS!

    ResponderEliminar
  8. Gracias a tod@s por vuestras opiniones. Si encontráis algo mal, decídmelo, por favor. :S

    Me alegro que te mole, Lukas.

    PDD20, el aspecto depende del CSS casi exclusivamente, y Blogger es bastante flexible en eso.

    La rapidez parece que la he logrado, pero lo que me dices, erMoya, la lentitud al moverse por la página, lo atribuía al calentón del portátil, pero es evidente que hay algo más. Me lo tendré que mirar a ver qué es...

    Gem@, no me has dado ni tiempo a avisarte... ¡Qué rapida! :D Gracias.

    Emma, iba a basar en tonos grises el blog, pero mi esposa me sacó del error a tiempo, y opté por unos tonos azul-verdosos, cercanos al turquesa, que es el color del año, según Pantone. (Fuente)

    Espineli, gracias por tus comentarios, y por ese icono, que he tardado segundos en colocarlo ahí. La verdad es que era feote, el condenado, se ve que al redimensionarlo se quedó deforme ;)

    Faltan unos detalles más por arreglar, como el hecho de que no se vea el icono de los feeds en la barra de direcciones, como antes, entre otras cositas. Lo podía haber hecho en el blog de pruebas, pero no podía aguantar más a estrenarla xD

    ResponderEliminar
  9. Bueno, yo venía a ver lo del icono del feed, pero ya veo que lo has solucionado, así que ahora sólo tengo que añadir que disfrutes de tu trabajo ;D

    Para que puedas ir sabiendo como anda la cosa en otros navegadores, lo he visto en IE8 y no aprecio ninguna diferencia con respecto a Firefox.

    Y bueno, si me permites sugerencias (creo que las voy a hacer igual :D) el color final del rótulo que forma el nombre del blog, quizás lo movería un poco hacia abajo o usaría otro color, ya que sobre todo la primera línea, no se distingue muy bien. Algo parecido ocurre con el fondo de tus comentarios, ya que se hace algo difícil la lectura de tu texto.

    Lo dicho, buen trabajo y gracias por las referencias.

    ResponderEliminar
  10. De lo único que estoy seguro es que no es un asunto de conexión.

    Primero vi la pagina donde suelo verla siempre, en mi ya renqueante pc con Opera 10.10 sobre Windows XP (conectado por Ethernet). Y como digo, al hacer el desplazamiento vi bastante lentitud. Se hacía bastante notable este hecho. Mi instinto lo atribuyó al pc, lógicamente, así que cambié al portatil.

    En el portátil usé Safari 4 sobre Mac OX 10.6.2 (por WiFi). La lentitud se sigue notando. Mucho menos, pero por ejemplo lo comparo con mi sobrecargadísimo blog, y el mío va mas rápido.

    Como ves, no parece que sea cosa de la conexión. Además, es algo que se produce a posteriori, después de haber cargado la totalidad de la página. Se me ocurren varias cosas. Puede que haya algún elemento que no se esté cargando bien o no se llegue a cargar. Aunque ninguno de éstos dos navegadores me da señales al respecto. Puede también que tengas mucho javascript haciendo cosas en tiempo real, o en constante espera, que pueda sobrecargar la página. Aunque si tuviera que apostar por algo, apostaría por algo gráfico, y a mi me pica la cantidad de texturas que has metido. Los fondos de cada "layer" es una textura. Los recuadritos mas oscuros para los títulos y demás, también son texturas. El fondo de los comentarios también es una textura (a lo que añado que estoy con Oloman).

    ¿Me permites más comentarios?

    Al fondo, hay un enlace "Crear un enlace" y debajo una flechita. Pues bien, el borde inferior de la capa está justo encima de "Crear un enlace", justo en una posición como si lo estuviera tachando. Obviamente queda feo, y se soluciona rápido.
    Arriba, al logo de google del buscador le pasa casi lo mismo.

    Los iconos del pc portatil. Sinceramente, no pegan con el diseño. Pero bueno, eso es subjetivo. Lo que si te digo es que tienes el mismo icono para tareas distintas (ir a la página principal o ir arriba, por ejemplo). Y eso es indeseable. Puede crear confusión o molestia en el visitante tanto habitual como eventual. Quizá podrías hacer alguna modificación al icono para distinguir sus distintas tareas.
    Y por favor, púlelo, se ve demasiado pixelado.

    Y de momento no veo nada más. Eso si, a pesar del comentario (por favor no te molestes, es que soy exigente y más cuando me piden opinión... soy como un profesor con manía hacía el alumno :P), no creo que hayas destrozado la plantilla, me gusta mucho más ésta que aquella en la que te has basado.

    Saludos!

    ResponderEliminar
  11. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  12. " MUY CURRAO ".
    Enhorabuena, me gusta un montón.

    ResponderEliminar
  13. Rosa fue más rápida, Oloman, ¡je, je, je!

    De todas formas tengo algún tipo de problema con el feed de los comentarios. En mi contador no me muestra la cifra real. Algo debe faltar a esta plantilla, que no lee bien el feed de los comentarios.

    En cuanto a lo de mis comentarios, estoy trabajando en una imagen transparente para que se lea todo mejor. Mientras, la tengo quitada. Sobre lo del rótulo (que aprendí de tu blog, por cierto), con el nombre que tiene este blog, casi que hasta me interesa que no se lea bien... :D

    Siento decirte que no me creo del todo que en IE se vea bien esta plantilla.

    Gracias por pasarte y por todo lo que has aportado a esta plantilla, que no es poco.

    erMoya, he ido quitando cosas, empezando con las texturas, que no son más que diminutas imágenes que el CSS repite. El fondo del body es una delgada línea de uno o dos píxels, no me acuerdo bien, pero también he probado a quitarla.

    Luego he ido eliminando scripts uno a uno, y la pesadez sigue ahí. Al menos en la versión linux de Google Chrome, aunque he notado mejoría en Firefox y Opera.

    He tomado los scripts más pesados y los he alojado en Sites. Tardará un poco más en cargar la página, pero igual conseguimos que no ralentice la navegación. Ya me dices si hay algún progreso.

    Por cierto, en el comentario que tú mismo te has borrado puede que esté la clave, puede que esté cargando unas imágenes que no se llegan a ver, pero por hoy ya no puedo hacer más pruebas. De momento dejo el blog tal como lo publiqué ayer y ya me pondré a ver qué puede ser...

    En cuanto a los detalles tontos esos de los enlaces de navegación y demás, eso poco a poco los iré puliendo. El portátil (foto real del mío) se quedará nada más que para la carga de la página, y los iré sustituyendo poco a poco por flechas, casitas y demás iconos más adecuados.

    Tus comentarios son, de hecho, junto los de Oloman y Espineli, los más constructivos hasta ahora (agradeciendo los demás, claro), así que, lejos de molestarme, me alegro que me saquéis esas pegas que uno mismo no ve.

    Me alegro que te guste, Mayo. ¿El mástil de mi guitarra ha influido en algo? ;)

    ResponderEliminar
  14. Me gusta mucho el nuevo diseño de tu blog. Enhorabuena :D

    ResponderEliminar
  15. Imaginaba que era tu guitarra y se perfectamente que es una parte muy importante en tu vida y tenía que estar en un lugar preferente.
    Y por otro lado, disfruto viendo lo que podéis conseguir los que sabéis de esto de la informática. Me ha gustado el cambio.

    Un fuerte abrazo.

    ResponderEliminar
  16. El cambio es notable, me gusta, no me extraña que hayas tardado tanto tiempo. El nuevo header esta muy logrado y la elección de los colores es acertada. Te puedo asegurar que la plantilla se ve perfectamente con el Explorer, es el que tengo en el trabajo y desde el que te estoy escribiendo. Eso si, como ya comentabais la plantilla carga bien, pero cuando te mueves por ella parece que da algunos saltos. Felicidades por el trabajo.

    ResponderEliminar
  17. Gracias, RorPieTh^. :)

    La verdad es que no se nada de informática, Mayo. Todo lo voy aprendiendo de los blogs de ayuda y con los buscadores como herramienta principal.

    Josepin, ayer le di mil vueltas al tema que comentas de los saltos, que ya dijo erMoya también. Dejé la plantilla limpia de imágenes de fondo y de scripts y el problema persistía. Yo también lo noto, pero lo atribuía a lentitud en Firefox, porque tengo la maldita costumbre de tener mil pestañas abiertas a la vez. :S

    Si el tema de los saltos o pesadez le pasa a más gente y os resulta muy molesto, veré de resolver el problema más a fondo, pero si no resulta una molestia demasiado grande, lo dejaremos correr, si os parece bien.

    Por cierto, ya funcionan los enlaces del formulario de contacto y el de acceso al blogroll provisional.

    ResponderEliminar
  18. Muy buen cambio, está muchísimo mejor ahora : )

    ResponderEliminar
  19. Te ha quedado genial socio!
    Me gusta mucho hasta la tonalidad que tiene y el diseño.

    Parece que stoy en otro sitio :)

    Un abrazo.

    ResponderEliminar
  20. me gusta el cambio y las texturas usadas...lo del fed de comentarios lleva ya algun tiempo, Blogger tiene problemas con eso...

    ☺☺☺

    ResponderEliminar
  21. Excelente!! Todos los cambios son buenos!

    Saludos.

    ResponderEliminar
  22. Realmente has conseguido una bonita plantilla y carga muy rápido como un rayo si comparamos con lo habitual en otros blogs. Felicidades por tu nueva "casa", es divina. No me extraña que te llevara tiempo conseguirlo y leer muchos posts sobre el tema. Un abrazo José GDF.

    ResponderEliminar
  23. Jueee, qué bonito! Queda muy bien.

    ResponderEliminar
  24. Sigue sin ser un Wordpress, como a ti te gustaría, pero está mejor, ¿no, Jose? ;)

    Con suerte, estarás en otro sitio cuando comience ya postear lo que tengo en mente. El cambio de diseño era sólo un paso necesario para lo que viene después socio Európides.

    El caso, Pizcos, es que justo antes del cambio de plantilla me marcaba mil y pico comentarios el contador de la columna lateral, y ahora marca esos doscientos treinta y tantos. No se me ocurrió hacer una captura... Lo que quiero decir es que sí, es fallo de Blogger, pero algo había en la antigua Mínima, que esta no tiene, que facilita la lectura correcta del feed de comentarios. Un buen ejemplo es lo del icono de los feeds, que me ayudó Rosa a solucionarlo en su blog.

    Los cambios, si son a mejor, son todos buenos, Mijel ;)

    Me llevó mucho más tiempo del que me pensaba que me iba a llevar, Carlos. Si bien es cierto que he logrado que cargue rápido, ya me han avisado que se hace pesado subir y bajar haciendo scroll. Tengo que solucionar ese problema, aunque si no resulta demasiado molesto y no consigo averiguar la causa, lo dejaré correr.

    Gracias Pablo.

    Y a todos, gracias por expresar vuestras opiniones y detectarme los bugs, y mil disculpas si he tardado un poco en dar señales de vida, pero esta semana la he tenido (y la tengo, que no ha acabado todavía) hasta las orejas de trabajo.

    ResponderEliminar
  25. Me gusta, los efectos de sombreado, el degradado y demás efectos de texturas.

    Sin embargo noto lo mismo que erMoya, el movimiento no es tan fluido cuando se termina de cargar, en mi experiencia ha ocurrido por alguna imagen de fondo.

    ResponderEliminar
  26. Me alegro que te guste, Bonzu.

    Este fin de semana volveré a quitar cosas una a una hasta que de con la que sea lo que produce eso, aunque ya hice una prueba similar el sábado pasado. Llegué a dejar el blog sin cabecera, sin texturas y sin casi scripts durante unos cuantos minutos y no di con la causa. A ver si esta vez hubiera algo más de suerte.

    De lo que estoy casi seguro es de que la causante no es una pequeña imagen que hay en el footer, que alguien me regaló por aquí, ejem... ;)

    ResponderEliminar
  27. Sin duda has hecho un excelente trabajo, es una plantilla muy pulcra y ordenada.
    Te comento que en IE8 el único problema que le vi es que el botón del buscador se sale un poco por la derecha, fuera de eso todo está en su lugar.
    Felicidades por el tremendo trabajo que has hecho y que la disfrutes.

    ResponderEliminar
  28. Gracias, Potro. En realidad se sale un poco en todos los navegadores. Pasa desde que oculté el logo de Google del buscador, porque se desplazó a la derecha. Un poco de margin-right y resuelto.

    Gracias también por pasarte :)

    Tuve oportunidad de ver en IE8 el blog y vi algo extraño en la parte donde debería estar el formulario incrustado de comentarios. Los que decís que lo veis bien con IE, ¿seguro que se veía bien esa parte? ¿Qué opción para comentar utilizasteis?

    ResponderEliminar
  29. Bueno, esto ha mejorado los días que he estado off-line xD

    A ver, en Opera (Pc) sigo notando algo de lentitud, pero ya es otra cosa, ya no se hace pesado navegar por aquí. Lo raro es que ahora si que noto mucha lentitud (más que antes) en Firefox (Pc) :S

    En Chrome, Opera y Safari (todos en Mac) se ve ya sin ningún problema. Pero en Firefox (Mac)... vale, no es como en windows, es algo muchisimo mas sutil, pero no se navega igual de bien que en los otros.

    Esto me hace pensar que puedas estar usando código específico para Firefox y que esté dando algún problema.

    De todas formas tu eres usuario de Firefox, no se como lo verás tu.

    Saludos!

    ResponderEliminar
  30. Está chula, aunque en el primer momento me despistó - no encontraba los títulos de los artículos - (solo fueron segundos).

    Enhorabuena. un saludo

    ResponderEliminar
  31. Lo que pasa es que la imágen que estás usando de fondo, ésta:

    http://lh4.ggpht.com/_hn3o5iw5uW0/S5Bp-3BAdpI/AAAAAAAACDE/kvFSQ54pQho/ver14_trans.png

    Aunque sea pequeña, es en formato PNG, yo por lo qu entiendo el formato png es mucho más pesado que .gif o .jpg y claro aunque sea pequeña tiene su peso y cómo se repite pues el peso se multiplica y puede que al hacer el scroll no se vea "ligero" el blog en la transición de desplazar de arriba a abajo el blog con el ratón.

    Yo haría una pequeña prueba cambiandole la extensión a .gif ya que .jpg perdería "demasiada" calidad la imagen (pienso), sólo es una opinión.


    Y ya por último a la url que se ve al lado de los marcadores sociales que "acorta la dirección" podrías ponerle un icono XD (supongo que se te ha pasado :-) (aquí tienes el de blogger en 16x16px) http://www.motoevolution.net/showthread.php?p=11940

    Saludos!!
    Salu2!!

    ResponderEliminar
  32. Aunque sinceramente ahora mismo yo veo bien el tema del scroll y no me molestaría en cambiarle la extensión a la imágen que te he dicho, pero lo del icono yo me lo miraría, queda un poco "extraño" ver los marcadores sociales para compartir un post con iconos menus uno :-D

    Salu2!!

    ResponderEliminar
  33. Yo usé el incrustado pero desde Chrome que es el que uso, pero ahora que lo menciones desde IE8 el incrustado no aparece y el enlace de Pop up dice en su lugar if (!window.google || !google.friendconnect) { document.write('
    Vaya lío con IE :S

    ResponderEliminar
  34. Posiblemente tiene razón Espineli, porque como te comento el problema igual me ocurrió con una imagen de fondo, aunque hay que aclarar que con cambiarle la extensión no es suficiente para cambiar el formato.

    "Con el poder de Blogger" igual y yo estoy absolutamente seguro de que el banner de ese alguien no es el culpable ;-).

    Quizá no me creas pero me emocioné al verlo :-).

    ResponderEliminar
  35. Hasta con un móvil soy capaz de escribir de las cuatro maneras posibles. Qué especial llega a ser IE... Ahora voy al portátil y os respondo como es debido... :)

    ResponderEliminar
  36. erMoya, he optimizado un poco más la plantilla: he colocado gadgets de manera que algunos sólo carguen (no que sean invisibles, sino que no carguen de verdad) en la página principal, otros que sólo carguen con las entradas, y otros que no carguen en las búsquedas por etiquetas.

    El único código específico para Firefox que uso es el CSS para las curvas en los bordes, pero ahora mismo me va muy ligero el scroll en Firefox para Linux, aunque si que está algo perezoso en Opera. En la versión inestable que aún tengo de Chrome, ni lo tengo en cuenta, de momento.

    Me alegro que te guste, J_hash. Ahora espero llenarlo pronto de contenidos que tal vez sean de tu interés. De informática musical, aplicada a mi home studio personal, para ser exactos, además de las secciones habituales de software libre y demás.

    Espineli, como le acabo de decir a erMoya, ya no me preocupa el tema del scroll. Además, lo primero que hice para descartar fue quitar todas las imágenes de fondo, incluida la de la cabecera, y el problema persistía. Realemente no sé qué he hecho para que mejore esto, la verdad, pero no voy a tocar mucho más la plantilla, no sea que la cague.

    En cuanto al tema de la URL corta, la idea es esa precisamente: un enlace que se pueda copiar fácilmente y pegar, por ejemplo, en Twitter. Si lo convierto en icono, al pinchar sobre él, lo único que harías sería... Volver aquí mismo. Lo que quizá debería hacer es quitarle las etiquetas de enlace <a>.

    Potro, me extrañaba que nadie más me dijera lo de if (!window.google || !google.friendconnect) { document.write('. ¿A que tampoco era visible el formulario incrustado? Lo pude ver hace unos días, que tuve acceso a IE, pero no lo podré arreglar en un tiempo. Y ya veremos cómo. Gracias.

    Completamente de acuerdo, Bonzu: cambiando la extensión no cambias el interior del archivo de imagen, más bien lo único que conseguiría es marear a algún navegador aún más... Lo he dejado todo tal como estaba.

    Lo del banner, tiene más sentido si lees toda la frase que lo acompaña en el footer:

    "Diseño original de BloggerThemes
    Completamente destrozado por José GDF, con el poder de Blogger
    ".

    Es bonito, y merecía un lugar destacado en la plantilla. ¿Qué mejor lugar que junto a la firma de la plantilla? :)

    Saludos a todos :H

    ResponderEliminar
  37. Solo quiero dejar un apunte a algo que aquí se ha dicho.

    PNG no es más pesado que GIF. Al menos no lo suficiente como para hacer que una página vaya lenta. De hecho, es el formato que yo recomiendo para la web, pues puede* llegar a dar una calidad algo superior al jpg ocupando menos, y admite transparencias igual que el gif.

    Podríamos pensar, eso si, que alguno de los motores de los navegadores no lo soportasen bien, pero actualmente todos lo soportan perfectamente.

    Saludos!

    *Explicar esto podría dar para un post entero, pero para imágenes con poca o media variedad de color PNG da una calidad enorme ocupando realmente poco. Sin embargo para imágenes reales (tiradas con una cámara de fotos, por ejemplo) suele aumentar mucho su tamaño, siendo preferible en la mayoría de los casos el jpg.

    ResponderEliminar

No hay normas especiales para publicar comentarios en este blog. Sólo las básicas: respeta, no insultes, y no hagas SPAM descaradamente. Tampoco se admitirán comentarios que vulneren la Ley. Cualquier aportación, consulta y crítica es bienvenida, a condición de cumplir estas normas básicas.

Si lo que quieres es ponerte en contacto directamente conmigo, dispones para ello de un formulario de contacto.