Nuevos cambios y avances en el tema del blog

Saludos a todos.. Queremos seguir mejorando, queremos marcar nuestro propio estilo y es por ello que estamos trabajando arduamente en el nuevo tema presentado hace unos días atrás.

Como les dije en su momento, el tema no estaba terminado, más bien estaría sometido a cambios visuales constantemente buscando una mejor experiencia para el usuario. Pero, (si, siempre hay un pero), mientras más bonito queremos que quede el tema, con efectos y demás, más pesado se hace.

Si por mi fuese, DesdeLinux tendría un diseño plano, sencillo, sin tanto adorno o imágenes, sin código JS ni cosas por el estilo, pero el resto de mis colegas son de los que piensan que las cosas entran primero por los ojos, así que no tengo otra opción 😀

Estamos trabajando sin descanso para corregir los errores que se han ido presentando, y mejorar el rendimiento del sitio, pero no somos expertos. Estamos sacando lo mejor de nuestra experiencia y conocimiento para optimizar todo lo más posible. Una vez que he dicho esto, pues pasamos a las novedades.

Nuevo diseño para la página principal

Este cambio es experimental, pero obedece a la idea de que lo que el usuario necesita encontrar en nuestro blog es información, y por ende, entonces lo primordial es resaltar los artículos.

Ahora el diseño tiene 3 columnas por defecto (lo sentimos mucho por aquellos usuarios que odian la nueva interfaz de Google Plus), desapareciendo a la vista el sidebar.

Pero ojo, la información que contenía el panel derecho del blog no ha desaparecido, sino que la hemos ocultado en 4 botones:

Es bueno destacar que se ha añadido el botón con información para todo aquel que quiera hacer donaciones monetarias (o de otra forma) para el blog.

Al pinchar sobre cualquiera de ellos se nos desplegará un diálogo Modal, resaltando la información que queramos ver:

También hemos modificado los Artículos al Azar (a.k.a Recomendados), adaptando el diseño a la nueva forma en que se muestran los post en la página principal:

Siguiendo los consejos y sugerencias de algunos usuarios, hemos eliminado el extracto con el texto del post. Ahora solo tenemos la imagen destacada y el título del mismo:

Por debajo del capó hemos realizado algunos cambios en el código, así como en el formato de algunas imágenes para reducir su peso.

NOTA Para los editores y colaboradores del blog: Es importante que las imágenes destacadas sean de proporción 4:3. Si lo prefieren suban una imagen con las medidas 320px de ancho por 245px de alto


72 comentarios

  1.   Yukiteru dijo

    Me gusta el diseño bastante limpio y como dije antes, la paleta de colores es muy buena y agradable a la vista.

    1.    elav dijo

      Gracias por el comentario 😉

  2.   Pavloco dijo

    La verdad es que va excelente, el diseño anterior no lucía bien en mi netbook. Buen trabajo.

    1.    elav dijo

      Genial! Me gusta que te guste 😀

  3.   Anibal dijo

    genial ! me encantaron los cambios y el nuevo diseño ! sigan asi !!!

    1.    elav dijo

      Gracias ^_^

  4.   Filo dijo

    Ha mejorado mucho y a pantalla completa se ve de vicio. Al redimensionar la ventana se desajusta ligeramente las tres columnas de post respecto al menú y a la noticia destacada. Seguro que se puede reajustar fácilmente.

    1.    elav dijo

      Si, esto sucede porque solo ajustamos el tema a resoluciones de pantallas específicas. Esto es algo que se puede resolver pero es muy engorroso, pues lleva tiempo y pruebas constantes. De todos modos estaremos trabajando en ello.
      Gracias por el comentario.

  5.   Arnoldo R L F dijo

    les recomiendo esta pagina con tips para optimizar su pagina web http://browserdiet.com/es/

  6.   dnoser dijo

    Muy bueno, aunque yo no habría ocultado las redes sociales tras un botón, es mucho mejor que sean todas accesibles a un solo click.

    1.    elav dijo

      En realidad están ocultas solo a la vista.. para el robot si están.. 😀

  7.   AurosZx dijo

    Pues no se ve nada mal, ya probé en varios dispositivos de diferente resolución y se ajusta bastante bien, y las animaciones se dan a una velocidad decente. Aunque me resulta algo extraño como se ve en mi Tablet, resolución 1280×800 (más o menos el mismo caso en horizontal y vertical, no se aprovecha bien el espacio): http://imagebin.org/265253.
    Por lo demás, me gusta 🙂

    1.    elav dijo

      Mmm. Gracias por el pantallazo. Ahí es donde radica el problema a la hora de testear el tema. En mi navegador con la resolución en 1280 se ve correctamente. Crap, y no tengo un tablet para probar como Dios manda.

  8.   Marco dijo

    Me gusta como luce. Y hasta el momento no he tenido problemas.

  9.   Israel dijo

    Va quedando muy bien en cuanto a diseño .. Muy limpio y ordenado la verdad que esta bastante agradable y nada engorroso… Aunque eso si el logo de DesdeLinux me parece a un pollo he dicho jajaja…. Pero muy bien en general.

  10.   gussound dijo

    El tema esta muy bueno, solamente me gustaria comentarles que en mi laptop las 3 columnas estan descentradas hacia la izquierda, les hago llegar una captura de pantalla por si les sirve para hacer alguna corrección.
    Sigan asi, ofreciendonos lo mejor. Abrazo grande

    http://img40.imageshack.us/img40/2701/45bs.png

    1.    elav dijo

      Gracias por el feedback.. ¿Qué resolución tienes?

      1.    gussound dijo

        1366X768

        1.    elav dijo

          Es la misma resolución que yo uso y se ve perfectamente. Estás seguro que tienes la vista del sitio en 100%?

          1.    gussound dijo

            si, si necesitas que haga algun otro ajuste me avisas. Abrazo

          2.    gussound dijo

            Elav, modifique la vista de la pagina varias veces, finalmente la dejé al 100 % y la vista de columnas se centró, seguramente creía que la vista la tenía al 100 % y no era así. Te dejo una captura
            http://img600.imageshack.us/img600/6590/racf.png
            Abrazo

    2.    Manuel de la Fuente dijo

      Iba a reportar lo mismo, aunque a mi parecer el problema no es que esté descentrado sino que el diseño solo se adapta a las resoluciones inferiores y no a las superiores. No estaría mal que el número máximo de columnas no fuese 3 sino que se mostraran tantas como la resolución lo permita, para rellenar ese enorme espacio en blanco.

      1.    elav dijo

        El problema con eso es que, si la resolución soporta 6 columnas una al lado de la otra, entonces habría que cargar 6 columnas más de los post anteriores.. Y como que todavía no llegamos a ese nivel de programación 😀

        1.    Manuel de la Fuente dijo

          Pues ponte a estudiar, jajaja.

          Si no se puede, la alternativa sería la que dice gossound, y/o hacer que las tarjetas tengan un ancho flexible.

          BTW, mi resolución es 1280×800 y lo veo igual que en la captura.

          1.    eliotime3000 dijo

            Tanto en mi recientemente actualizado Chromium 28 desde los repos de seguridad de Debian Wheezy como el Chromium 30 que uso en Vista (ódienme, pero prefiero mil veces usar Windows Vista que Windows 8), la página se ve espléndidamente bien hecha.

          2.    Manuel de la Fuente dijo

            @eliotime3000: Yo en Chromium de Arch Linux y Chrome en Windows 8 veo las columnas tiradas a la izquierda. En Firefox se ven bien, centradas.

            P.D. Sí, te odio por usar Windows Vista.

    3.    Filo dijo

      Eso pasa cuando no está la ventana de navegador maximizada.

  11. lo sentimos mucho por aquellos usuarios que odian la nueva interfaz de Google Plus

    Esto no es como la interfaz de Google Plus, esto es un diseño estilo Magazine y está bien. El diseño de Google Plus (tipo Pinboard) tiene tarjetas de diferentes tamaños dispuestas a diferentes alturas, lo que crea un desorden visual horrible donde no se entiende nada. El estilo Magazine tiene tarjetas iguales a la misma altura, como éste. Mucho más ordenado y entendible. Así que no te preocupes, cancelo mi vuelo a Cuba… por ahora. 😀

    1.    elav dijo

      Jajaja.. y yo que ya había comprado par de machetes.. 😛

      1.    Manuel de la Fuente dijo

        Lo sé, y yo que quería estrenar mi bazuca; pero bueno, ya habrá una próxima vez, cuando ahora sí desgracies el diseño y deba hacerte una no muy cordial visita. 😉

    2.    eliotime3000 dijo

      Por lo de pinboard es que tengo abandonado mi perfil de pinterest, ya que realmente me mareaba ese estilo y pocas veces uso el G+ para ver qué hay de nuevo en la red de desdelinux.

      Aunque les sugeriría el diseño de la página inicial de libreoffice.org si desean adaptarlo a tablets, además que le da una sensación de tener un menú de niveles de Angry Birds.

  12.   Leo dijo

    Algo que me ayudó a redactar fue la guia que Elav (creo que fue él redactó) en:

    http://blog.desdelinux.net/guia-para-colaboradores-de-desdelinux/

    Sería útil que todos estos datos estén en una guía similar actualizadad para ser más fácil la redacción.

  13.   RafaGCG dijo

    me gusta mucho!!
    te dejo una captura a 1920×1200 a escala 100%
    http://i42.tinypic.com/wtepvt.jpg

  14.   set92 dijo

    No, me opongo totalmente xD se que mi voto no cuenta nada pero es abrir el blog y veo 6 noticias, verdad que en principio no deberia necesitar mas porque el ritmo de crear estas noticias permite no necesitar ver mas de 6 si visitas este blog diariamente como yo, pero justo darle un pequeño golpecito a la rueda del raton y ya ver los numeros de las paginas para empezar a pasar paginas…como haya alguien que venga solo 2 dias por semana o incluso solo los sabados o ha estado de vacaciones, viene a ver noticias y tiene que estar pasando hojas por cada 6 noticias….va a acabar hasta las narices..por no decir que queda feo que la ruleta solo me sirva para ver el pie de pagina y los numeritos de las paginas, y bueno esa carita feliz que habeis puesto justo al final de la web, me imagino que la pusisteis para hacer alguna prueba o algo.

    Soluciones? Pues la mejor que yo veo y es mas actual es que segun vayas bajando con la ruleta te vayan apareciendo las noticias nuevas, no tener que estar tu clickando, cada vez mas hemos pasado de una web simple como las que te gustan a ti a algo mas dinamico, que ofrezca mas opciones y funcionalidades, sino otra opcion mas sencilla seria poner simplemente 9 o 12 noticias por pagina.

    Y el porque nadie os ha dicho esto hasta ahora puede ser porque no lo vean como un problema o porque no se note tanto en las resoluciones “normales”, aunque en la foto de RafaGCG yo creo que se empieza a apreciar un poco lo que digo, y yo que tengo una resolucion de 1440p lo noto mucho mas, mi margen de la pantalla lleva hasta justo la linea de los numeros de pagina, es decir veo toda la web de un vistazo, y eso sin contar las pantallas 4k que aunque nos parezcan lejanas en 3 4 años yo creo que ya habra bastantes y estaran como estan ahora las de 1440p, caras pero con gente comprandolas.

    1.    elav dijo

      Un pantallazo por favor.

      1.    Manuel de la Fuente dijo

        En resumen: ancho líquido y scrobbling infinito.

        No logro entender para qué quieren esas megaresoluciones si todas las páginas las ven minúsculas, jajaja. Aunque imagino que las películas HD deben verse genial. 😀

        Ya lo sabré cuando cambie de laptop. 😛

        1.    elav dijo

          Las tarjetas no pueden tener tamaño flexible, porque eso significa que tienen que cargar una imagen cada vez más grande y por ende, puede provocar que el diseño se rompa o que se demore más en cargar el sitio.

        2.    eliotime3000 dijo

          Las tarjetas me recuerdan a las páginas que hacen temas gratuitos para Wordpress, además de darle un tema más agradable a la vista y no saturarlo más de la cuenta.

          En fin, el diseño es relajante para mí y no me incomoda para nada, teniendo un monitor HP L1706 con una resolución de 1280*1024.

          1.    eliotime3000 dijo

            Pues aquí les dejo un pantallazo de mi PC con Vista mostrando el site >> http://imgur.com/sraFD2D

        3.    set92 dijo

          Ya puestos a contestar..xD casi me olvido de tixD, mas que nada cambie porque tenia una resolucion menor y como vi los monitores coreanos que al final son 222€ + aduanas pues dije…vamos a arriesgarnos…no me ha salido del todo mal y para lo que mas me sirve es porque soy programador y al poner la pantalla en vertical puedo tener muchas mas lineas de codigo en pantalla, y en horizontal puedo tener muchas mas cosas en pantalla, aunque hasta verano he estado todo el rato con un portatil de 15″ FullHD y sin quejas pero ya cuando volvi al sobremesa pues ya es diferente.

      2.    RafaGCG dijo

        yo creo que asi está perfecto. Hoy en dia hay mucho dispositivo portatil con pantallas pequeñas. Y yo mismo en la pantalla de 1920×1200 la uso siempre con un 120% de ampliación
        http://i43.tinypic.com/wqy713.jpg

        respecto a que enseñe 12 noticias en portada, me imagino que si ponen 6 es por optimizar de recursos. Esperemos que todos apoyemos y se pueda contratar una maquina en condiciones, para que el sitio vuele con toda la comunidad usándolo.

        1.    set92 dijo

          Tambien tienes toda la razon, la mayoria de gente tiene menos de FullHD y tiene equipos medios, y a mi al fin y al cabo no me termina de molestar porque lo visito diariamente, y si me molesta pues me tendre que fastidiar porque es un gran blog y no pienso dejar de visitarlo por un par de fallitos 😀 pero bueno mejor tener en cuenta todos los fallos y asi saber donde se puede mejorar cuando se pueda

      3.    set92 dijo

        Esta esta en pantalla completa http://i.imgur.com/ZzTa5dJ.jpg le he quitado tambien la barra de Windows para que se aprecie mas aunque normalmente suelo estar con la barra pero no se si otros no la tendran..

        Y esta otra me acabo de fijar ahora que es cuando tienes el explorador solo en un trozo de la pantalla. http://i.imgur.com/8PrlbXF.png Yo creo que quedaria mejor centrado en vez de a la izquierda.

        1.    elav dijo

          Gracias por el feedback.. 😉

    2.    Manuel de la Fuente dijo

      La carita feliz la agrega el módulo de estadísticas de JetPack. Se puede ocultar con un poco de CSS si molesta…

      1.    set92 dijo

        No, solo era porque me habia parecido curioso la carita y no sabia a que se debia 😛

  15.   Giskard dijo

    Muy buenos los cambios. Se ve genial y me gusta mucho. Sin embargo, aún hay algo de lentitud. En especial al cargar la primera vez el site. Se los cuento porque sé que están en pruebas y necesitan de ese feedback.
    Sigan adelante 😀

  16.   Maximiliano dijo

    La verdad me gusta mucho el nuevo diseño.

    Vengo de usemos linux.

    Mi consejo seria que le agreguen un texto o algo en la barra del menu para la version mobile digamos. asi no queda la barra vacia con el icono nomas.

    Lo demas me gusta mucho el diseño y bootstrap 😛

    saludos

  17.   st0rmt4il dijo

    Luce bastante bien este cambio en <Linux!

    Saludos!

  18.   eliotime3000 dijo

    Muy bueno el diseño, además que se ha adaptado muy bien el tema a varios navegadores.

    1.    eliotime3000 dijo

      Curiosamente, la tipografía que usa esta página es bastante similar al Seoge UI de Windows.

      1.    elav dijo

        Pues solo usamos Droid Sans y Open Sans.. 😛

  19.   Rayonant dijo

    Genial, en el Netbook se ve muy bien Elav, total aprovechamiento del espacio, y en la otra pantalla (la 1600×900) se acomodan ahora mejor todas las cosas y no se siente la antigua sensación de vacíos en los lados.

    PD; Y digo yo, aprovechando las épocas de remodelación, cuando van a mirar el pobre paste!, que bien feo que siempre ha sido (útil claro esta) pero feo xD

    1.    elav dijo

      Excelente Rayonant.. gracias por el feedback.

  20.   gato dijo

    La carga y velocidad de la versión móvil mejoraron considerablemente, bien hecho chicos 😉

    1.    elav dijo

      Gracias por el dato 😉

  21.   AleQ. dijo

    Mi critica va desde el punto de vista personal y ojala también sea constructiva..
    – La pagina principal y de entrada es como una especie de speed dial, eso esta bueno. pero el problema es que las imágenes ilustrativas de las entradas son muy grandes.. lo que obliga al lector a tener que deslizar la barra de desplazamiento lateral del navegador para tener una visión general de todas las entradas.. .. seria mucho mas atractivo si se pudiera evitar eso, y poder ver todas las entradas sin necesidad de deslizar la barra.. así de un solo click elegir cual nos interesa mas leer !!
    Saludos y sigan adelante !!

    1.    elav dijo

      Gracias por la sugerencia. Créeme que este tema seguirá evolucionando y mejorando. No te preocupes.

    2.    RafaGCG dijo

      Juas! y por ahí arriba pedían justo lo contrario, más cosas en la pantalla y prepararlo para resoluciones 4K. Yo creo que este ancho va bien, las imagenes mas pequeñas para 1920×1200 desde luego que no, ya lo uso con +120% normalmente todo. Lo que si podria estar bien son más filas no 6 noticias, pero si come mucha maquina…. bueno, poco a poco.

  22.   xaviP dijo

    +1 diseño líquido y muy claro
    IMHO, el banner después de cabecera, el que destaca un artículo pasado, es demasiado ancho y se come demasiada pantalla (en 1024px)

    1.    xaviP dijo

      Perdón, quería decir demasiado alto, no ancho

  23.   pandev92 dijo

    En internet explorer no cargan los botones XDDD

    1.    Manuel de la Fuente dijo

      Es lo que te mereces por usar Internet Explorer, jajaja.

      Ya en serio, ¿cuáles botones?

  24.   set92 dijo

    Y ya por pedir…xD Que los comentarios se integren con Disqus que lo vi hace poco en http://www.muylinux.com/ y me resulto util darle a Mi Disqus y ver todos los comentarios nuevos y novedades sin tener que checkear unos checkboxs por cada comentario que hago o tener que recibir esa informacion en el email que no lo quiero porque el email lo uso solo para trabajo, por lo que me viene bien entrar a ver X noticia y luego ver si alguien ha contestado a algun comentario.

    PD: Si no os gusta que de ideas o asi decidme que a veces me paso hablando o hago comentarios que igual parece que infravoloro el trabajo de lo hecho hasta ahora y asi, pero a mi me gustaria que me dijeran los fallos que tengo y si es posible soluciones por lo que tiendo a hacer eso mismo.

    1.    Manuel de la Fuente dijo

      Gracias por las sugerencias. Veamos, por partes:

      1. Lo de los comentarios con Disqus, si mal no recuerdo, ya lo habíamos discutido antes. El detalle está en que con Disqus perdemos el control sobre la personalización de los comentarios, y como ves los tenemos muy personalizados, apareciendo los usuarios diferenciados por rangos y ese plugin que nos gusta tanto que muestra el navegador, sistema operativo y escritorio del comentarista. Con Disqus no podríamos hacer nada de eso, y por contraparte, no se me ocurre ninguna ventaja que pudiera brindarnos y que compense esa pérdida de control.

      2. En cuanto a los checkbox supongo que te refieres a los campos de nombre, correo y sitio web, pero no tienes que llenarlos cada vez que comentes, basta con que inicies sesión con tu cuenta del blog y el sistema automáticamente los rellena por ti. De hecho no entiendo cuál es el problema ya que así es como has enviado este comentario, y en Disqus para comentar también necesitas rellenar campos o iniciar sesión, así que no me parece que haya ninguna diferencia.

      Si acaso, lo que no tiene el sistema nativo es la opción de iniciar sesión con tu cuenta de Twitter o Facebook, pero esa opción ya la probamos antes y la quitamos porque tenía muchas fallas (NO pidas su regreso POR FAVOR :D).

      3. Si estás recibiendo correo no deseado, antes de comentar verifica que los campos de notificación que están debajo del formulario de comentarios se encuentren desmarcados, y para cancelar las suscripciones que ya tienes activas encontrarás la opción en los mismos e-mails.

      Gracias de nuevo por el feedback, cualquier otra queja o sugerencia que tengas no dudes en exponerlas, que todas son bienvenidas. 🙂

  25.   Juan Carlos dijo

    Bueno, lo puse en otro artículo porque no había visto este.

    @elav: No quiero resultarte antipático, pero la verdad que el blog así como está, para mí, se ve horrible. No me gusta. Me parece bien que estén los artículos así, a primera vista, pero el diseño en sí no se ve bien, mejor dicho, no lo veo bien.

    1.    Manuel de la Fuente dijo

      ¿Concretamente qué es lo que no te gusta? A mí no me parece que haya cambiado mucho en realidad…

      1.    Juan Carlos dijo

        No me gusta la portada del blog. El interior está muy bueno, pero la portada me resulta fea, es como que no me transmite nada. Puede que quedaría mejor un estilo de dos columnas en lugar de tres, y en el espacio donde ahora está la tercera se podría poner otro tipo de información relacionada con el blog. No me mal interpreten, a primera vista es muy útil esa especie de “vista preliminar” de los artículos, pero visualmente no me convence.

        En fin, es solo una opinión.

        Saludos

        1.    Manuel de la Fuente dijo

          es como que no me transmite nada

          Creo que ahí le has dado. Se ve muy apagada a mi parecer. Quizás con un color de fondo más claro, y algo que haga resaltar los elementos, como marcos o sombras.

          También pienso que el artículo destacado ocupa un espacio excesivo. Se come en torno al 30% de la pantalla, y junto con los cuatro botones que están debajo de él casi sacan los artículos de la vista, que se supone son lo más importante. Se le podría reducir un poco el ancho y usar ese nuevo espacio para colocar un panel a un lado donde se agrupen los cuatro botones, los cuales podrían tener colores más intensos, ya que ahora están muy pálidos.

          Todo esto en conjunto quedaría un poco mejor, ¿no crees?

          1.    Juan Carlos dijo

            “Afirmativo” diría un militar amigo que tengo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

  1. Responsable de los datos: Miguel Ángel Gatón
  2. Finalidad de los datos: Controlar el SPAM, gestión de comentarios.
  3. Legitimación: Tu consentimiento
  4. Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.