El widget "Entrada destacada": versión Blogger vs a la manera #EsCss

Con motivo del lanzamiento del nuevo widget oficial para Blogger "Entrada Destacada" lo evalúo, lo descarto por simplista y poco o nada configurable y te comparto la "manera #EsCss ", cómo lo hago yo en el blog.

El widget "Entrada destacada": versión Blogger vs a la manera #EsCss

Por Kseso ✎ 21

Ayer día 11 de Diciembre de 2015 el pequeño ecosistema de usuarios de Blogger se alborotó (bueno, no mucho) con el anuncio por parte de esta plataforma de un nuevo widget disponible para su uso.

Entrada destacada o Highlight the posts that matter the most que es el título del artículo en que lo dan a conocer.

Básicamente lo que hace es que seleccionas un artículo cualquiera de los que tengas publicados y te lo mostrará allá donde quieras colocarlo en la plantilla de tu blog.

La configuración, como suele ser normal, es de lo más simple y a prueba de cualquiera:

Entrada destacada a la manera Blogger

captura pantalla nuevo widget entrada destacada
Opciones entrada destacada en Blogger

Cuando quieras leer esto seguro que ya habrá cienes y cienes de píos a mayor gloria de la Nueva Buena que para eso estamos en Adviento. Así que yo también me sumo para mayor gloria y difusión

Pero para lamentar que siendo un widget nativo de la brigada en la sombra (aka desarrolladores de Blogger) sea algo tan simplista y carente de funciones básicas.

En un vistazo rápido vemos que, sin entrar en qué recursos necesita el widget, sus carencias principales son:

tamaño imagen cargada
  1. Sólo puedes seleccionar una entrada.
  2. Siempre será el mismo post. Resultado: a la segunda o tercera visita a tu página pasará desapercibido por repetitivo.
  3. El sumario no es optativo y tampoco puedes controlar su tamaño.
  4. La imagen es cargada a su tamaño y peso natural y redimensionada vía Css.
  5. La imagen es cargada con el protocolo http así que si usas el seguro https en tu blog...
  6. La imagen "será la primera de la entrada" y ¿si no hay imagen? No investigué si pillará cualquiera (el avatar de un comentario i.e.) o qué hara porque no hay opción a especificar una como reserva.
  7. El orden de los elementos (título, sumario, imagen) tampoco lo puedes configurar.

A grandes rasgos y sin analizarlo en profundidad estas son las limitaciones o contras que le encuentro. Algunas imperdonables y que para mi, al menos, lo hacen digno de irse al limbo.

Aunque quizás todas estas carencias que yo le he encontrado sean corregibles buscando en el código fuente los scripts que cargue y recursos que necesite para funcionar y modificarlos según convenga. Quizás.

Entradas destacadas aleatorias a la #EsCss

Los usuarios habituales del blog posíblemente hayan reparado que en la plantilla que estoy usando en estos momentos, tanto en el índex del blog como en el aside de las entradas o artículos se muestran resúmenes de posts similares a esta "entrada destacada".

Unas veces con imagen asociada y otras si ellas y con o sin sumario. Pero de forma aleatoria: con cada carga de la página cambian (o deberían) lo mostrado.

Ya todos conocéis mi ignorancia de javascript. Lo siguiente no es algo que yo haya creado. Cuando tuve necesidad de ello hice aquello de: "busca, compara, combina y modifica". Esto es, lo siguiente es fruto de trabajos de terceros (desconozco autoría original) mezclados y alterados por mi como buenamente pude para cubrir mis necesidades.

A continuación el script que uso en los casos que quiero y muestro una imagen con cada post. Las características principales son las opciones de configuración que puedes ver en su inicio:

<script type='text/javascript'> //<![CDATA[ var num_Posts=1; //número posts a mostrar var random_Posts=true; //false: muestra siempre el más nuevo de esa label var ver_Sumario=true //false: sin sumario var long_Sumario=300; //número caracteres sumario var ver_Imagen=true; //false: no muestra imagen var size_Imagen="/s400/"; //anchura REAL de la imagen var sin_Imagen="ruta/tu/imagen/de/sustitución/mi.jpg"; //ruta a tu imagen sustitución var src_1=/\/s\d*\//; var src_2=/\/s\d*-c\//; //nombre función coincidente con parámetro 'callback=' script del feed function bardialon(r){ var t=r.feed.openSearch$totalResults.$t; var f=new Array(); for(var h=0;h<t;++h){f[h]=h} if(random_Posts==true){f.sort(function(){return 0.5-Math.random()})} if(num_Posts>t){num_Posts=t} for(h=0;h<num_Posts;++h){ var l=r.feed.entry[f[h]]; var e=l.title.$t; for(var g=0;g<l.link.length;g++){ if(l.link[g].rel=="alternate"){ posturl_Escss=l.link[g].href;break} } if("content" in l){var p=l.content.$t} s=p; a=s.indexOf("<img"); b=s.indexOf('src="',a); c=s.indexOf('"',b+5); d=s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){ var n=d.match(src_1)||d.match(src_2); var o=d.replace(n,size_Imagen); //cambia ruta imagen a protocolo https var m=o.replace("http:","https:") } else{var m=sin_Imagen} //imprime el marcado html salida: título e imagen document.write('<figure><a href="'+posturl_Escss+'"><h3>'+e+"</h3>"); if(ver_Imagen==true){document.write('<img src="'+m+'" alt="'+e+'"/>')} var q=/<\S[^>]*>/g; p=p.replace(q,""); if(ver_Sumario==true){ if(p.length<long_Sumario){document.write(p)} else{ p=p.substring(0,long_Sumario); var j=p.lastIndexOf(" "); p=p.substring(0,j); //imprime sumario con marcado html document.write("<figcaption>"+p+"…</figcaption>") } } //cierra marcado html generado document.write("</a></figure>") } }; //]]> </script> //Llamada al RSS feed del mismo blog donde se incluyen las entradas destacadas //Si las quieres es otro blog distinto añade al inicio el nombre del blog: //src='http://nombreBlog.blogspot.com/feeds/posts... <script src='/feeds/posts/default/-/LABEL?alt=json-in-script&callback=bardialon&max-results=500'></script>

Antes de seguir con las explicaciones puedes ver la demo y el script usado limpio de comentarios y codificación html para que el blog lo muestre. Pero lo mejor es que edites el pen para poder modificar todas y cada una de las opciones.

See the Pen Random posts a la #EsCss by Kseso (@Kseso) on CodePen.

Opciones de configuración

var num_Posts=1;
¿Cuántos post quieres mostrar?
var random_Posts=true;
'true' para que los muestre de forma aleatoria; 'false' mostrará siempre el más reciente de la etiqueta seleccionada.
var ver_Sumario=true
'false' no muestra sumario
var long_Sumario=300;
número caracteres que se mostrará en el sumario.
var ver_Imagen=true;
'false' no mostrará imagen.
var size_Imagen="/s400/";
La anchura REAL de la imagen que se cargará. Mantén siempre la 's' previa a los dígitos.
var sin_Imagen="ruta";
La ruta a tu imagen sustitución que se mostrará en caso de que el post no tuviese.
function bardialon(r){
Este nombre de la función has de colocarlo en el valor del parámetro callback= del segundo script que llama al feed del que esnifa los posts.
var m=o.replace("http:","https:")
Como blogger puede servir las imágenes almacenadas en su servicio con protocolo seguro aquí lo elegimos.
//imprime el marcado html salida:
A partir de este comentario en el script es la parte que imprime el contenido del las entradas destacadas. Deberías adaptar el marcado html a tus necesidades.
<script src='/feeds/posts/default/-/LABEL?alt=...
En este segundo script has de cambiar la cadena textual 'LABEL' por el nombre de la etiqueta que desees emplear para obtener los posts correspondientes a ella. Asegúrate también que el valor del parámetro callback= de este script es el mismo que el de la función mencionada antes function bardialon(r){
Esto es importante porque si quieres mostrar en la misma página "entradas destacadas" de varias etiquetas tendrás que repetir ambos scripts para la otra etiqueta cambiando el nombre de la función.

Estos dos scripts los has de colocar en tu plantilla allí donde quieras que se muestren. Esto es, dentro del elemento que hará de caja padre de tus 'entradas destacadas'.

Y este es el 'entradas destacadas' a la manera #EsCss que yo vengo utilizando en el blog en estos momentos (Diciembre 2015) desde que cambié a esta plantilla.

Y como en la página de inicio del blog abuso del "entradas aleatorias por etiquetas" habrás observado que en otros casos sólo muestro el título. Para esos listados de enlaces empleo otro script que no necesita tanto.

Pero este mejor para otra entrada del blog. Eso sí, recuerda que si lo quieres o necesitas sólo tienes que ver el código fuente y hacerte con él ;-)

Actualización

Por las razones apuntadas por Jorge en los comentarios, el script previo lo modifiqué un poco para facilitar y aligerar la carga de la página así como el ejecutar la llamada al feed de forma asíncrona.

Al usar document.querySelector(''); permite colocar ambos scripts al final del documento y mostrar las entradas en el elemento indicado en entre las comillas.

El código final es el siguiente: [ver en codepen con marcado html de lista en los ítems]

<script type='text/javascript'> //<![CDATA[ function cherrinchales(r){ var elemtShow = '.aside-0'; // el elemento donde mostrar los ítems identificado pos su clase (mejor que sea única) var num_Posts=150; var random_Posts=false; var ver_Sumario=false; var long_Sumario=150; var ver_Imagen=false; var size_Imagen="/s400/"; var sin_Imagen="https://4.bp.blogspot.com/-ZjvXymz0GYE/Va5cQvX1i2I/AAAAAAAALYg/wgh4luGpJqE/s400/dragon.jpg"; var src_1=/\/s\d*\//; var src_2=/\/s\d*-c\//; var widgetRWD=document.querySelector(elemtShow); var salidaRWD=""; var t=r.feed.openSearch$totalResults.$t; var f=new Array(); for(var h=0;ht){num_Posts=t} for(h=0;h<num_Posts;++h){ var l=r.feed.entry[f[h]]; var e=l.title.$t; for(var g=0;g<l.link.length;g++){ if(l.link[g].rel=="alternate"){ posturl_Escss=l.link[g].href;break} } if("content" in l){var p=l.content.$t} s=p; a=s.indexOf("<img"); b=s.indexOf('src="',a); c=s.indexOf('"',b+5); d=s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){ var n=d.match(src_1)||d.match(src_2); var o=d.replace(n,size_Imagen); var m=o.replace("http:","https:") } else{var m=sin_Imagen} salidaRWD+='<a class="aleatorio" href="'+posturl_Escss+'"><h3>'+e+'</h3>'; if(ver_Imagen==true){salidaRWD+='<img src="'+m+'" alt="'+e+'"/>'} var q=/<\S[^>]*>/g; p=p.replace(q,""); if(ver_Sumario==true){ if(p.length<long_Sumario){salidaRWD+=p} else{p=p.substring(0,long_Sumario); var j=p.lastIndexOf(" "); p=p.substring(0,j); salidaRWD+='<span>'+p+'...</span></a>'; } } } widgetRWD.innerHTML='<h4>CSS Grid Layout</h4>' + salidaRWD; // Título de la relación de posts }; //]]> </script> <script async='async' src='//escss.blogspot.com/feeds/posts/default/-/NOMBRE_ETIQUETA?alt=json-in-script&callback=cherrinchales&max-results=500' type='text/javascript'/>

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 Don Kseso Kseso

Comentarios: 21

  1. A mí tampoco me gustó nada este gadget. Lo puedes replicar con un gadget HTML/JavaScript añadiendo fijo un título, imagen y texto, pero entiendo que útil para quién no sepa/quiera teclear ni una línea de código. Sin embargo, si esta es la finalidad, tiene las carencias que comentas... básicamente algunas opciones más de configuración.

    A ver si la semana que viene me puedo dar una vuelta por tus últimas publicaciones, que llevo como dos semanas OFF de todo.

    Por cierto... felices fiestas.

    ResponderEliminar
    Respuestas
    1. Es que está hecho así a propósito, para fomentar el estudio de HTML, CSS, javascript, ...




      Bueno, quizá no.


      Si no nos vemos antes, felicidades.

      Eliminar
    2. ¿Se notó mucho?
      Bueno, os cuento algo. Ambos sabéis de mi opinión sobre el "autismo" de Blogger con sus usuarios.

      En lo que va de año, tanto en el blog donde anunciaron este widget, como en su cuenta en G+ como en Twitter no han publicado más de 6 entradas en cada una de ellas.

      Así que supongo que si dedican una en cada una de esas plataformas a anunciar esta "novedad" debe ser porque creen que es tan extraordinario el widget como el hecho de que se relacionen con los simples usuarios de su CMS.

      Y ahora también sale un aviso en el panel de control del blog.

      Vamos, lo están poniendo a la misma altura o más que el poder disponer del protocolo HTTPS.
      Y si Blogger con sus actos así lo cree...

      Bueno, eso o es que tienen que alcanzar un mínimo de mensajes y el año se acaba xD =P

      Un saludo, pareja.

      Eliminar
  2. Hola. Perdona mi ignorancia, pero como puedo ponerlo en el blog... ¿En un widget HTML/Javascrip?
    Me gusta la idea para mi nuevo diseño, pero yo estas cosas como no las expliquen para que las entienda mi abuela, no me entero mucho, soy torpe ¿Que le voy a hacer...?
    Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola Jose María
      Como bien dices puedes incluirlo usando un widget html/js para ello.
      O también puedes hacerlo de una manera más limpia yendo diréctamente al código de tu plantilla (Plantilla > Editar Html) y pegar el código allí donde quieras que se visualicen tus entradas.

      Un saludo

      Eliminar
    2. Hola, muy interesante. 2 preguntas:
      Por qué dices que es más limpia que poniendo el código en la plantilla?
      Cabe la posibilidad de añadirle algo al script para que en el caso de que el número de posts fuesen 2 o más el resultado fuese idéntico pero en horizontal y no en vertical? Este segundo punto del resultado en horizontal me interesa muchísimo.
      Gracias.

      Eliminar
    3. Hola Johnny
      1º: Digo de forma más limpia porque los widget HTML/Javascrip suelen generar una serie de elementos anidados que quizás no siempre son necesarios y además no se pueden incluir en cualquier parte y de cualquier manera en la plantilla.

      2º: Si te refieres al nativo de Blogger la respuesta (cuando escribí el artículo) es no. Sólo puedes mostrar uno.

      Si te refieres al usado por mi la respuesta es sí. Dos o todos los que quieras y para que se muestren sólo tienes que cambiar para figure el valor de display: block que ahora tiene por defecto por otro que lo permita, como flex o inline-block por ejemplo.

      Un saludo

      Eliminar
  3. Me parece que con este diseño se está abusando demasiado de los scripts. El script que genera los widgets "Entradas destacadas", "Entradas con la etiqueta...", etc. hace que el tiempo de carga del blog se ralentice excesivamente.

    Al incluir la llamada al script justo en el lugar donde se generará el widget, se detiene temporalmente la carga del resto del contenido hasta que el script esté listo. Si coincide una baja velocidad de conexión con una lenta respuesta del servidor de Blogger, como me acaba de pasar, resulta muy frustrante que se quede "pillado" mostrando únicamente la cabecera del blog y no apareza el artículo porque hay un script que impide su carga.

    Como una sugerencia constructiva, propongo incluir todos los scripts de widgets al final de la página, cuando el contenido del artículo ya esté cargado, ya que javascript puede editar un elemento cuando sea.
    [code]
    <script>
    function bardialon(r){
    var widgetElement=document.querySelector(".widget-destacados"); // elemento donde aparecerá el widget una vez cargado
    var salida=""; // variable donde se almacenará el contenido del widget según se va generando

    salida+="<figure><div>"; // en lugar de document.write, el HTML se guarda en una variable

    // ...... el script hace sus cálculos

    widgetElement.innerHTML=salida; // una vez terminado, se añade el contenido del widget a su elemento

    };
    </script>
    <script src='/feeds/posts/default/-/LABEL?alt=json-in-script&callback=bardialon&max-results=500'></script>
    </body><!-- los scripts de los widgets se insertan justo antes del cierre del body para un mejor rendimiento del sitio -->
    [/code]

    ResponderEliminar
    Respuestas
    1. Gracias Jorge
      done!

      Sí, soy consciente de los retrasos introducidos tanto por los scripts para los distintos "random" que uso en portada como del efecto FOIT por las @font-face.
      El segundo ya estaba entre los pendiente/urgente y el primero en estado "investigar" debido a mi proclamada ignorancia en js.

      Así que has venido con tu aviso + solución como miel a las hojuelas ;-)

      Ya me comentarás si arreglamos algo la carga.

      Un saludo

      P.D.: Creo que ya te has ganado la cerveza y el pincho más que de sobra, así que la próxima vez que te acerques por la capi en ti está avisar. Si la quieres.

      Eliminar
    2. Si me permiten, me gustaría redondear tu concepto, Jorge MG con el otro punto de vista, más que nada porque hace mucho que no encuentro con quien jugar al Abogado del Diablo.

      El punto de la demora en ejecutar escripts y reescribir contenidos es totalmente válido. Y lo era también hace añares cuando las conexiones dial-up nos demoraban la bajada de páginas y las limitadas posibilidades de CSS nos obligaban a crear efectos JS que destruían y reconstruían textos e imagen dejando a los microprocesadores con la lengua afuera.
      Entonces teníamos que elegir entre "detener" la carga hasta modificar la parte que no nos servía, o cargar todo el documento y reescribir después ... cambiando posiciones, tamaños, orientaciones, mientras el visitante ya la estaba leyendo. Porque nadie espera a que baje todo el contenido para empezar a leer las primeras lineas; pero un escript sí puede esperar hasta el </html> para cambiar esas primeras lineas.

      Es una decisión difícil, y en la mayoría de los casos es personal; depende de lo que prefiera el diseñador. Los usuarios nos podemos quejar y sugerir alternativas, pero no más que eso.

      En cualquier caso, hablamos de "efectos" creados para suplir las faltas de la plataforma. Son "hacks" porque CSS no era capaz de rotar un texto 90° o porque Blogger no te deja reescribir directamente desde el documento en el servidor. En un mundo ideal esto no pasaría, pero aquí —repito— tenemos que elegir.

      Eliminar
    3. En este caso, Furoya el problema no era tanto de reflows o repaints (pues las alturas de las cajas quedan marcadas principalmente por los resúmenes de los posts) si no de bloqueo en la carga.

      Creo, en lo poco que he podido observar, que al adoptar la sugerencia de Jorge ese aspecto ha mejorado.

      Y ya puestos me sirve para meterme a modificar algún que otro script que ahora no puedo cargar asíncronamente (async="async").

      Al final, entre los dambos, va a terminar por parecer que se algo de js. Como si lo viese. xD xD

      Un saludo

      Eliminar
    4. Mucho mejor, a falta de mover al final los scripts de "Último post" y "Comentarios recientes".
      No había caído en el uso de async, pero según he encontrado es redundante cuando el script está al final de la página, así que sería cuestión de probar su eficacia.

      Otra ventaja de este método es que se puede añadir un contenido estático, no generado por JS, al elemento donde aparecerá el widget, evitando dejar el elemento vacío si el usuario no dispone de JavaScript. Cuando JS haya cargado el widget, reemplazará el contenido mediante elemento.innerHTML.

      (Gracias por la cerveza, Kseso, me alegro de poder aportar algo que complemente todo el CSS que tú aportas en este blog)

      Eliminar
    5. Tú, Jorge, por pedir que no quede ¿no? xD xD
      ¡Ale! Deseo concedido.

      Interesante el link sobre async al final, como casi todos los de ese blog ;-)
      Pero tengo una duda o cuestión:
      último último sólo puede haber uno, así que los previos al último aún pueden bloquear/demorar la carga del resto de scripts que estén al final del documento, así que aunque pudiera ser redundante el atributo async "mejor que zozobre que noz falte ¿no?
      Pregunto.

      Un saludo

      Eliminar
  4. Justo lo que buscaba, gracias.

    ResponderEliminar
  5. Saludos, gracias por este tan util codigo
    ¿como le haces para incluir varios de estos en una misma pagina?
    me perdi y no se que codigo cambiar para que no choquen el 1ro con el segundo

    ResponderEliminar
    Respuestas
    1. Repetir los del 2do codigo el primero ya le encontre el modeo :)

      Eliminar
    2. Ya lo entendi XD
      la clave esta en el nombre de la function - el callback en el ultimo script
      y en la clase o id por querySelector

      Eliminar
  6. Hola. No sé si me estoy saltando algo (aunque no parece demasiado complicado) pero no me funciona.

    ResponderEliminar
    Respuestas
    1. Pues ya lo siento Dabid, pero con sólo un "(a mi) o me funciona" nadie puede hacer nada.

      Bueno, excepto recomendarte esta lectura.

      Un saludo

      Eliminar
    2. jajaja perdona, no pretendía una solución, aunque quizás había dejado de funcionar para todos. Pero no no, era yo el torpe.
      Una pregunta: alguna forma de que no discrimine por etiquetas? Es decir, que elija entre TODAS las entradas?

      He probado mil códigos por Internet pero todos me bloquean la página del editor de Blogger (ni idea por qué) así que sólo me queda probar con este, pero me gustaría que eligiera entre todas las entradas. Es posible?

      Un saludo.

      Eliminar
    3. Lo acabo de averiguar. Voy a ver si puedo personalizar el aspecto y creo que puede ser una solución para mi! Gracias por el artículo, por cierto.

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap