JMiur [E]

Y seguimos con el magazine, este estilo de plantilla que se ha hecho popular en WordPress.

No cabe duda, cuando vemos uno de los demos de ese tipo de plantillas, nos asombramos, salen del esquema normal de un blog y es probable que eso sea lo que nos llama la atención. Deja de ser una sucesión de entradas una debajo de la otra, se parecen ... a un sitio "normal" sorpresa1

Y tal vez el punto clave venga por ese lado. Un blog es un blog. Un blog no es una página web común y en esas diferencias están sus pros y sus contras. Tal vez, bajo ciertas condiciones y con ciertos contenidos, este formato magazine sea útil pero no siempre porque devirtua la escencia misma del blog y esto no es ni malo ni bueno, sólo es distinto.

De todas manera, como cualquier herramienta, abre posibilidades que pueden explorarse aunque en Blogger, las limitaciones son muchas.

A mi juicio, un tema tipo magazine no está definido porque las entradas se muestren resumidas y en varias columnas. Un tema tipo magazine tiene una característica especial que es la que podemos ver en cualquier portal de noticia: en la página principal (en relativamente poco espacio) se muestran los títulos de los últimos artículos, un copete o bajada que nos da una idea del contenido de cada uno de ellos, otros artículos destacados y cierto contenido dinámico auxiliar en alguna sidebar (videos, galería de imágenes, etc).

Todo eso, hace que, utilizar alguna plantilla de este tipo en el mismo WordPress, con todas sus ventajas, no sea sencillo; implica pensar la diagramación, agregar datos extras para que la plantilla los interprete, colocar imágenes especiales, etc, etc, etc. Obviamente, cuanto más sofisticada sea, más cosas habrá que tener en cuenta pero, siempre es posible resignar funcionalidades y simplificar las cosas.

Sigo creyendo que en Blogger el tema es complejo si es que queremos sacarle el máximo partido y avanzar un poco más, no limitarnos a cortar el post en cierto punto sino pensarlo desde cero para que las entradas se muestren de dos maneras diferentes y no sólo gráficamente, sino también su contenido.

Partiendo de eso, entonces, vamos a ver qué posibilidades nos quedan ... pocas, es cierto.

La idea es: escribo un post, cualquiera, tiene videos, imágenes, lo que se me ocurra. Si uso un modelo magazine con algún sistema tipo Leer Más, tendré que armarlo de alguna manera para que lo que se muestre en la página principal no descalabre todo. Puede hacerse, hay que pensarlo pero, prefiero no hacerlo porque es demasiado trabajo y no siempre conseguiré algo razonable. Prefiero buscar una forma de agregarle a ese post, algo que me sirva de "copete/bajada" un extracto especial, algo que sólo veré allí y no en la entrada individual.

Voy a hacer lo siguiente, colocaré ese extracto al inicio de mi entrada, en un bloque DIV al que le daré una clase:
<div class="extractoOculto">
Este es el contenido del extracto o resumen oculto de la entrada.
</div>
..........
y aquí colocaré el post "normal"
Ahora, modificaré la plantilla y me baso en la misma que en los casos anteriores, una plantilla mínima.

Expandimos los artilugios y buscamos el área donde se muestran los posts:
<div class='post-body entry-content'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Vamos a cambiar ese código por este otro:
<b:if cond='data:blog.pageType == "item"'>
  <!-- en una página individual no hay cambios -->
  <div class='post-body entry-content'>
    <data:post.body/>
    <div style='clear: both;'/>
  </div>
<b:else/>
  <!-- extracto para la página principal -->
  <div class='post-body entry-content'>
    <div expr:id='&quot;original-&quot; + data:post.id' style='display:none;'>
      <data:post.body/> <!-- CONTENIDO ORIGINAL DEL POST NO VISIBLE -->
    </div>
    <div style='clear: both;'/>
  </div>
  <!-- ejecutar función JavaScript -->
  <script type='text/javascript'>
    // enviará el ID generado por Blogger (data:post.id)
    ejecutarExtracto(&#39;<data:post.id/>&#39;);
  </script>
</b:if>
¿Qué hemos hecho? Usamos los condicionales para saber si estamos en una página individual (y en ese caso no hacemos nada) o si estamos en la página principal que es donde queremos cambiar las cosas.

El lugar de mostrar, lo tenemos oculto hasta analizarlo utilizando JavaScript y allí cambiaremos su contenido, lo re-escribiremos y recién luego lo mostraremos.

Pondremos ahora el CSS al igual que hicimos antes, justo antes de </head>:
<b:if cond='data:blog.pageType != "item"'>
  <style>
    /* las propiedades de las entradas en la página principal */
    .post {
      background-color: #FAF5FF;
      border-bottom: 10px solid #FFFFFF;
      float: left;
      height: 190px; /* el alto es fijo */
      margin: 0 10px;
      overflow: hidden;  /* evitamos barras en caso de error */
      width: 310px; /* el ancho es la mitad de una entrada normal */
    }
    .post img {
      float: left;
      height: 100px;
      margin: 0 5px 0 0;
      width: 100px;
    }
  </style>
<b:else/>
  <style>
    /* ocultamos el extracto en las páginas individuales */
    .extractoOculto {display:none;}
  </style>
</b:if>
Inmediatamente debajo de eso, agregamos la función del script:
<script type='text/javascript'>
//<![CDATA[

// llega con el ID del post
function ejecutarExtracto(idPOST) {
  var namePOST = "original-" + idPOST; // el DIV del post normal
  var divPOST = document.getElementById(namePOST);
  // buscamos los DIVS
  var lista = divPOST.getElementsByTagName("div");
  if(lista.length>0){
    // buscamos un DIV con la clase extractoOculto
    for(var i=0; i<lista.length; ++i) {
        if(lista[i].className=="extractoOculto") {
          // cambiamos el contenido del psot por el de ese DIV
          divPOST.innerHTML = lista[i].innerHTML;
          // lo mostramos
          divPOST.style.display = "block";
          return;
        }
      }
    }
}
//]]>
</script>
Y eso es todo. Un ejemplo de esto es el que puede verse en este demo online.

A mi entender, habría que resolver dos cosas más, la primera es tratar que este tipo de formato se muestre en la página principal exclusivamente y no en otro tipo de páginas con listas como Archivos, Búsqueda o cuando avanzamos o retrocedemos con la barra de navegacion inferior del blog. Este es un tema complejo y no sé si tiene solución.

El otro punto que sería interesante es ver si existe la posibilidad de agregar contenido dinámico, es decir, realizar el proceso inverso, tener en el post algún tipo de información extra que no se vea en la página principal y tampoco en las páginas individuales sino que se ubique en alguna otra parte del blog, por ejemplo en la sidebar.

REFERENCIAS:
  • Magazine Parte 1

  • Magazine Parte 2
  • 44 comentarios:

    Gem@  

    Tenías razón, es más complejo de lo que parece ya no por la imagen sino por el buen funcionamiento, aún voy por la primera "lección" espero tener más tiempo mañana y ...empezaré a preguntar :)

    Responder
    Daniel Mora  

    Se vé muy bien el resultado... habrá que probarlo...
    Como aporte al tema, les dejo un link con un articulo muy bueno acerca del uso de los layout estilo revista. (Está en ingles)
    http://www.smashingmagazine.com/2008/08/28/magazine-themes-usage-and-considerations/

    Responder
    KyuBit  

    Aunque no llegue a utilizar una plantilla del tipo "magazine" creo que si podría llegar a utilizar el truco que muestras, es realmente interesante.
    Estaré pendiente de la saga...

    Responder
    Ariane  

    me sinto tão frustrada! já fiz e refiz e tudo o que consigo é fazer meus posts desaparecerem! :S em algum ponto não estou compreendendo claramente sua instrução...e também já é tarde, volto a tentar amanhã.

    o resultado no seu blog de testes é exatamente o que procuro! abraços

    Responder
    Graciela de Palomas  

    :( voy en la primera lección Profesor, ayer me daba error a cada rato...pero lo lograré...viajaré a tu casa :O, no lo sé de alguna manera saldrá...me encantó el demo, SI SALE TODO BIEN LO USARÉ EN EL BLOG DE TRADUCCIÓN (INTENTO DE TRADUCCIÓN)...besos y un día maravilloso!!!

    Responder
    Monjaguerrillera  

    Me gustaria hacerlo, pero me resulta muy dificil

    Responder
    sharysce  

    JMiur: hola, quisiera hacerte una pregunta con respecto a este tema ;)

    ¿cuales considerarías que son las ventajas y desventajas de tener un blog con este tipo de estructura?

    Responder
    Anahí  

    Se ve más que bien, JMiur, pero antes de meterme "en la aventura", ¿esto modifica las entradas anteriores? Digo, puedo controlar qué poner en las nuevas, pero no en las antiguas, ¿o no?
    (Yo quise por ej. implementar un Leer más... pero me aparece por todos lados :o )
    Saludos.

    Responder
    Víctor  

    Yo una vez logre adaptar el sistema de los post que tiene la plantilla Neo de hackosphere, es mas logre sacarle el codigo limpio que permite adaptarsela a cualquier plantilla y convertirla en una Neo en pocos pasos, pero luego me desilusione por que habian problmas como que solo podia tenerse un solo post en la pantalla, logre obviar eso y aunque solo el primer post cambiaba todo su contenido haciendo click a los titulos que estaban en un widget lateral, de todos modos me enfrente a otros problemas como que las entradas individuales debian tener el leer mas activo y ademas, al post Neo habia que arrastrarle todo el sistema de comentarios, ya que quedaba fijado en el comentario del primer post.

    Si deseas hacerte una plantilla magazine ultra especial quiza podrias intentar usar el sistema de Ramani para que el primer post cambie segun se haga click en los titulos del widget, ese era mi proyecto "ultra secreto" hace un tiempo (crearme una plantilla magazine) pero me dio pereza :D

    Suerte, pilas con lo que logres y no te olvides de separar los codigos para poder adaptar ciertas cosas a eleccion a nuestras plantillas.

    Victor.

    Responder
    JMiur  

    Gem@: Suerte. Como experimento, no está nada mal y una vez que se entiende el funcionamiento, termina siendo más o menos sencillo.

    Gracias, Daniel. alguien había hablado de ese artículo pero no lo había encontrado así que yalo tengo marcado para leer :)

    KyuBit: La idea tal vez tenga otros usos o sirva para pensar en alguna alternativa. En realidad, de eso se trata :D

    Ariane: En este ZIP está la plantilla del demo y uno de los posts. Tal vez te sea útil :)

    Graciela: Sería bueno ver un ejemplo real así que espero que lo consigas :)

    sharysce: Esa es una pregunta complicada de responder y muy subjetiva. Es un modelo complejo de manejar en general y en Blogger mucho más. Me parece que puede ser adecuado cuando los blogs son básicamente textos o los posts tienen todos una estructura similar, por ejemplo, alguno con noticias. Si los posts son surtidos, las cosas se complican.

    Anahi: ese es el problema del que hablaba en el post y me parece muy importante si se quiere usar algún modelo tipo magazine en un blog existente ¿Qué pasa con los posts "viejos"? Sería una locura modificarlos. La lógica es que un modelo así SOLO se vea en el home y nada más. Esa es la clave y sobr lo que hay que seguir investigando.

    Victor: en realidad, no pretendo crear una plantilla sino, simplemente ver que cosas se pueden hacer, cómo podemos acceder a ciertos datos y manejarlos. Recuerdo haber visto alguna vez esa plantilla Neo pero me pareció muy hermética, creo que usaba Json o alguna cosa similar.

    Responder
    sharysce  

    JMiur: si....estaba pensando lo mismo, se podría considerar que para un blog que es meramente de entretenimiento causaría mucha flojera para el usuario, que al fin y al cabo es para quien se escribe.

    Es muy buen detalle para un blog informativo, de noticias, si no, porque otra causa estarías consultando el blog si no vas a seguir la noticia.

    Gracias.

    Responder
    Anónimo  

    Jmiur, porque puede ser que no se me ven las caritas en mi plantilla de mi pagina web, tiene las imagenes subidas y creo que esta todo ok

    Responder
    Anónimo  

    recien me baje el modelo4 que publicaste en comentario de arriba para comparar el error que estoy cometiendo.
    te pregunto:
    que hago para que me desaparezca el cartel? tengo que meter el codigo del .txt? donde?

    muchas gracias
    Christian

    Responder
    Anónimo  

    lo que no hace es reducirme el tamaño de las imagenes en la pagina principal como te lo hace en la plantilla de ejemplo3 que pusiste en la entrada anterior
    por que puede ser?

    saludos
    Christian

    Responder
    JMiur  

    Christian:

    El TXT contiene un ejemplo de un post cualquiera. Publica uno con ese contenido. En realidad, es un post cualqueira donde al inicio hay div con el extracto:
    <div class="extractoOculto"> ...... </div>

    Para que no se muestre la ventana de error, simplement ecambai esto:

    alert ("ERROR");

    por esto:

    // alert ("ERROR");

    o elimina la linea. Sólo está puesto para advertir que un post no tiene un extracto ya que si no lo tiene, lo que pasará es que se verá el post "normal" y cortado en cualquier parte.

    Responder
    Anónimo  

    muchas gracias!
    puedo seguir preguntando?
    como logro el efecto del ejemplo de plantilla "vp magazine 3" "Test entrada 2" donde solo aparece la imagen "pequeña" en la pag principal y en la pag individual aparece la imagen "grande" + el texto ???

    saludos
    y gracias nuevamente!
    Christian

    Responder
    JMiur  

    ¿Has visto que hay un estilo dentro de la condición del header?

    Agrega todas las propiedades que necesites. Por ejemplo, en esa plantilla tiene esto:

    <b:if cond='data:blog.pageType != "item"'>
    <style>
    .post {
    ......................
    }
    .post img {
    border:none;
    float:left;
    height:100px;
    padding:0 10px 0 0;
    width:100px;
    }

    ......................

    Responder
    Anónimo  

    esta es la linea que pongo pero no se redimensiona ninguna imagen, ni las de las entradas anteriores ni las de las nuevas entradas

    .post img {float: left; height: 100px; padding: 0 10px 0 0; width: 100px;}

    supongo que sera por lo esto que decis:
    "En la mayoría de estos casos, deberemos modificar el código que coloca Blogger cuando insertamos imágenes ya que en ese código se establece la dimensión así que el CSS no funcionaría."

    gracias!
    saludos
    Christian

    Responder
    JMiur  

    Es posible. Si lo viera online te podría confirmar eso.

    Edita el post y quítale el ancho y el alto a la etiqueta IMG.

    Responder
    Anahí  

    Bueno, maístro, entonces espero a que avance en sus investigaciones :D , luego veré si aplico su tecnología y dónde.
    Y perdón que lo haga acá, pero le quiero pedir ayuda: yo tengo el "menú de solapa" en un widget arriba de los posts, y lo quiero poner como usté abajo de la cabecera, pero se me "descalabra" el muy turro. ¿me puede ayudar? (Si me da el OK lo pongo como para que lo vea online)
    Saludos.

    Responder
    Anónimo  

    perdón por ser tan pesado!
    jaja!

    podrias en algun momento suber un .zip del ejemplo que de "jugando con los posts (Magazine 2)" que en ese si funcionaba lo de la redimension de imagenes

    muchas gracias
    por contestarme una y otra vez!

    saludos
    Christian

    pd: es que hace muchos..muchos años programaba y ahora despues de tantos años voy un poco perdido

    Responder
    JMiur  

    Anahí:
    Adelante, hazlo visible y estudiamos el asunto :)

    Anonimo:
    En este ZIP están las plantillas de los modelos 2 y 3. La idea en ambas es la misma.

    Responder
    Anónimo  

    sos un crack!
    muchas gracias!

    y me corrijo: "no voy un poco perdido, lo estoy totalmente!" jaja

    saludos
    Christian

    Responder
    Anahí  

    Gracias, JMiur, mire ya la puse, pero no sé por qué milagro ahora no se me "descalabra". pero sí queda un poco más ancha que la cabecera, a ver cómo la podría hacer encajar?
    Saludos.

    Responder
    JMiur  

    Espero que no te pierdas demasiado :D No es complejo, sólo requiere práctica y equivocarse mil veces :D

    Anahí: Lo veo bien. Si querés angostarlo y que sea igual que el header, deberás cambiarle el ancho:

    .solapamenu {
    ........
    width: 100%;
    }

    En lugar de 100% coloca width: 880px; Creo que ese valor es suficiente para igualarlos.

    Responder
    Anahí  

    Pues sí, JMiur, pues sí que sí. Vaya usté a saber que joropos estaba haciendo yo antes de preguntarle... :O
    Gracias.

    Responder
    JMiur  

    Jajaja Me alegro que funcionara :D

    Responder
    Anónimo  

    todo perfecto!
    excepto que no pude hacer lo de minimizar el tamaño de las imagenes en la pagina principal

    muchas gracias!
    de momento lo dejo asi y despues te voy atacar nuevamente con mis preguntas al respecto

    saludos
    Christian

    Responder
    Pizcos  

    JMiur un aporte ;), el redimensionamiento de las imagenes es posible usando max-width y max-height...eso soluciona el problema :S
    Salu2

    Responder
    Pizcos  

    Por cierto tercer intento de comentar, los dos anteriores andan viajando por las tripas de blogger
    :(

    Responder
    JMiur  

    Es lo más normal del mundo con este formulario, no me sorprende, Pizcos. Me llamaría la atención si funcionara :D

    Responder
    Abraham  

    Hola esta interesante la nota pero el proceso de tranformar mi plantilla al estilo magazine se puede volver inverso

    me refiero a que mi plantilla magazine la pueda volver como una normal, si se podria que es lo que debo hacer para hacerlo.

    espero que me responda porfavor

    Responder
    JMiur  

    En teoría, es posible pero habría que ver la plantilla en si misma. Puede legar a ser engorroso. No hay una técniva única para resolverlo.

    Responder
    MAND  

    Muy bueno el truco, estoy trabajando en ello todo el día, y le he encontrado un problema, que es el hecho de que no se pueden escribir comillas simples (') en las entradas, pues de lo contrario aparecerán en blanco. Quizás sea culpa del script, y no sé si habrá alguna forma de solucionarlo. Por lo demás voy bastante bien. Las imágenes, para que no queden deformadas puedes ponerle el ancho que quieras y el alto se lo pones automático (height:auto;), y así salen perfectas. Posiblemente tenga problemillas con el float a la hora de igualar los post, ya que si pones una altura determinada te quedarán espacios en blanco o entradas cortadas, y si la pones automática no se alinearán correctamente. Ya te preguntaré si tengo dudas al respecto.

    Saludos.

    Responder
    MAND  

    Ah y para la primera de tus cosas a resolver (textualmente: tratar que este tipo de formato se muestre en la página principal exclusivamente y no en otro tipo de páginas con listas como Archivos)
    creo que he encontrado una solución, que al menos hace que en archivos (supongo que en el resto también, aún no puedo probar en búsquedas) se muestren las entradas normal, como se mostrarían cuando las abres individualmente.

    El truco está en que en vez de usar b:if cond='data:blog.pageType != "item"' en el CSS de las propiedades de las entradas en la página principal, si utilizas b:if cond='data:blog.pageType == "index"' sólo te mostrará el formato magazine en la página principal.

    Ahora, como te decía, el problema lo tengo a la hora de igualar las entradas en la página principal, pues no quisiera que se me cortaran ni que hubiese espacios demasiado grandes, como consecuencia del float.

    Saludos.

    Responder
    JMiur  

    Hay muchas formas de conseguir lo mismo; dependerá del uso que se le quiera dar al blog. Sólo son preguntas retóricas y continuan en la última parte de la serie.

    Responder
    MAND  

    Ah claro, no había visto yo la parte final jeje. Gracias por el link.

    Responder
    Cristian  

    Se le podría poner algún subtítulo corto a las entradas?

    Responder
    JMiur  

    Cristian: No sé exactamente cuál es tu idea pero, en esta entrada se habla de algo así.

    Responder
    We Game / Emilio  

    es muy bonito de hecho lo quiero colocar en mi web (www.webwegame.co.cc) pero podrias decirme una cosa?? mira esque me gustaria que la primera entrada no se ponga contraida, es decir, todas, menos la mas actual ¿se puede? ¿como?

    gracias :)

    Responder
    JMiur  

    Hay una condición que define eso:

    <b:if cond='data:post.isFirstPost'>
    ...... es el primer post del home o bien una entrada individual .......
    <b:else/>
    ....... son el resto .......
    </b:if>

    Podrías intentar con eso.

    Responder
    Otto la piloto  

    Hola, soy yo otra vez, jeje. He podido instalar una función 'leer más' expandible, pero el blog me ha quedado así ahora: lotaoto.blogspot.com
    Sabes cómo podría modificar el html para eliminar los posts ocultos y a la vez hacer que me quede el texto dentro del recuadro? mil gracias

    JMiur  

    Revisa lo que has hecho porque hay algún error en tu plantilla ya que se ve esto:

    expr:id='"post-" + data:post.id'>

    Otto la piloto  

    OK, bueno, ya he vuelto a la anterior plantilla. Mi idea era instalar este código para hacer que los posts se pudieran expandir y recoger
    http://www.gemablog.com/2007/07/leer-ms-con-efecto-expandir-y-recoger.html
    gracias

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
    De todos modos, también puede accederse a ellos a través de SkyDrive

    Nota: sólo los miembros de este blog pueden publicar comentarios.

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

     
    CERRAR