El widget "Entrada destacada": versión Blogger vs a la manera #EsCss 12.12.15
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
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
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:
- Sólo puedes seleccionar una entrada.
- Siempre será el mismo post. Resultado: a la segunda o tercera visita a tu página pasará desapercibido por repetitivo.
- El sumario no es optativo y tampoco puedes controlar su tamaño.
- La imagen es cargada a su tamaño y peso natural y redimensionada vía Css.
- La imagen es cargada con el protocolo
http
así que si usas el segurohttps
en tu blog... - 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.
- 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 antesfunction 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8aajSJXTQ2LGiL8klM_SZHW4k_5cKJwqSBsDbxxa16LdDwTPIU2pZykgEPu1x-whKB4zI-RnlMxhckWIjba54_fwKqxg8B1TOmpQ59BSM6jKrXyUs9hf4FEmgF22u_-mubrjRaBeSBwo/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'/>
Kseso
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
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.
ResponderEliminarA 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.
Es que está hecho así a propósito, para fomentar el estudio de HTML, CSS, javascript, ...
EliminarBueno, quizá no.
Si no nos vemos antes, felicidades.
¿Se notó mucho?
EliminarBueno, 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.
Hola. Perdona mi ignorancia, pero como puedo ponerlo en el blog... ¿En un widget HTML/Javascrip?
ResponderEliminarMe 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.
Hola Jose María
EliminarComo 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
Hola, muy interesante. 2 preguntas:
EliminarPor 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.
Hola Johnny
Eliminar1º: 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
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.
ResponderEliminarAl 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]
Gracias Jorge
Eliminardone!
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.
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.
EliminarEl 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.
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.
EliminarCreo, 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
Mucho mejor, a falta de mover al final los scripts de "Último post" y "Comentarios recientes".
EliminarNo 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)
Tú, Jorge, por pedir que no quede ¿no? xD xD
Eliminar¡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
Justo lo que buscaba, gracias.
ResponderEliminarSaludos, gracias por este tan util codigo
ResponderEliminar¿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
Repetir los del 2do codigo el primero ya le encontre el modeo :)
EliminarYa lo entendi XD
Eliminarla clave esta en el nombre de la function - el callback en el ultimo script
y en la clase o id por querySelector
Hola. No sé si me estoy saltando algo (aunque no parece demasiado complicado) pero no me funciona.
ResponderEliminarPues ya lo siento Dabid, pero con sólo un "(a mi) o me funciona" nadie puede hacer nada.
EliminarBueno, excepto recomendarte esta lectura.
Un saludo
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.
EliminarUna 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.
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.
EliminarHola, estoy montando una plantilla nueva para mi blog, y me ha gustado bastante esta entrada. Lo que no tengo claro es como poner los códigos, no se cual va en la plantilla y cual en widget html, o como va, ni lo que hay que cambiar. Si me lo pudieras aclarar un poco te estaría agradecido. Por si te vale te dejo la dirección del blog, las pondría donde están ahora las entradas aleatorias que no me acaban de convencer. Un saludo.
ResponderEliminarhttps://alcoleamalon.blogspot.com.es/
Hola Fernando
EliminarAntes de nada mis disculpas por el retraso.
Los códigos necesarios para que funcionenson "todos": el código html (elemento donde inyectar las entradas), el script y la llamada al feed.
Si lo usas vía widget lo suyo sería que lo incluyas todo en el mismo widget y si lo haces modificando diréctamente la plantilla (código html) puedes colocar los scripts a continuación del elemento html ya que la llamada se hace con el atributo async.
De esta forma si haces uso de condicionales para mostrarlos sólo en determinadas páginas todo estará afectado por dichos condicionales.
Un saludo
Gracias por responder, he conseguido que funcione pero debo tener algo mal configurado en el feed porque con tu blog funciona, y cuando lo cambio al mio ya no funciona. También me pasa con uno de comentarios recientes, que funciona, pero cuando le cambio el nombre al mio ya no, bueno tengo puesto que muestre 5 comentarios y solo muestra uno, cambie en el feed alguna cosa pero sigue sin funcionar. Me parece que me voy a quedar sin los dos. Saludos.
ResponderEliminar