{"id":2345,"date":"2020-06-21T13:32:04","date_gmt":"2020-06-21T13:32:04","guid":{"rendered":"http:\/\/blog.rastersoft.com\/?p=2345"},"modified":"2021-01-01T22:38:58","modified_gmt":"2021-01-01T22:38:58","slug":"memes-animados-de-hoy-y-de-siempre","status":"publish","type":"post","link":"https:\/\/blog.rastersoft.com\/?p=2345","title":{"rendered":"Memes animados de hoy y de siempre"},"content":{"rendered":"\n<p>Estoy preparando una entrada nueva y me apeteci\u00f3 a\u00f1adir <em><a href=\"https:\/\/en.wikipedia.org\/wiki\/Internet_meme\">memes<\/a><\/em> en el texto, porque ayudan a leerlo al permitir descansar la vista entre p\u00e1rrafo y p\u00e1rrafo, y le dan un toque m\u00e1s divertido y agradable.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter meme\"><video height=\"180\" style=\"aspect-ratio: 320 \/ 180;\" width=\"320\" autoplay loop src=\"https:\/\/blog.rastersoft.com\/wp-content\/uploads\/2020\/06\/think.mp4\"><\/video><\/figure>\n\n\n\n<p>Por desgracia, la cosa no es tan sencilla. Una primera opci\u00f3n es buscar <a href=\"https:\/\/es.wikipedia.org\/wiki\/Graphics_Interchange_Format\">GIFs<\/a> animados, pero esto tiene varios problemas:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>El tama\u00f1o de un GIF es bastante grande<\/li><li>El n\u00famero de colores es limitado<\/li><\/ul>\n\n\n\n<p>La soluci\u00f3n obvia es utilizar v\u00eddeos en su lugar, algo que <em>WordPress<\/em> soporta perfectamente. Para ello hay que embeberlo, activar la reproducci\u00f3n autom\u00e1tica, el bucle, quitar los controles y, sobre todo, quitar el sonido. Esto \u00faltimo es muy importante, pues si no, el navegador se negar\u00e1 a reproducirlo hasta que el usuario haya interaccionado con la p\u00e1gina (lo que obliga a haber hecho <em>click<\/em> en ella, pero no sirve con hacer <em>scroll<\/em>). El motivo para esto es evitar que una p\u00e1gina reci\u00e9n cargada empiece a reproducir sonido <em>por sorpresa<\/em>, pues es algo muy molesto. Si no se hace, el v\u00eddeo no se reproducir\u00e1 hasta que el usuario lo ponga en marcha a mano.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter meme\"><video height=\"146\" style=\"aspect-ratio: 186 \/ 146;\" width=\"186\" controls src=\"https:\/\/blog.rastersoft.com\/wp-content\/uploads\/2020\/06\/susto.mp4\"><\/video><\/figure>\n\n\n\n<p>Aunque es muy f\u00e1cil, por desgracia tiene el problema de que obliga a acordarse de todos los pasos, con lo que es bastante sencillo que, por despiste, se nos cuele alguno y nos quede el meme <em>mal<\/em>. Por eso decid\u00ed hacer un poco de <a href=\"https:\/\/en.wikipedia.org\/wiki\/JavaScript\"><em>JavaScript<\/em> <\/a>para solucionar esto de manera sencilla.<\/p>\n\n\n\n<p>Lo primero es bajarse alg\u00fan <em>plugin<\/em> que permita a\u00f1adir <em>JavaScript<\/em> a nuestra plantilla. Yo uso <em><a href=\"https:\/\/es.wordpress.com\/\">WordPress<\/a><\/em>, por lo que escog\u00ed <em><a href=\"https:\/\/es.wordpress.org\/plugins\/custom-css-js\/\">Simple Custom CSS and JS<\/a><\/em>. Una vez instalado y activado, s\u00f3lo tenemos que a\u00f1adir en nuestra plantilla este trozo de c\u00f3digo:<\/p>\n\n\n\n<p class=\"mycode\">let memeList = [];<br>function setPlayStatus(element) {<br>   \/\/ check if it is visible<br>   var rect = element.getBoundingClientRect();<br>   let isVisible = (<br>     rect.bottom &gt;= 0 &amp;&amp;<br>     rect.right &gt;= 0 &amp;&amp;<br>     rect.top &lt;= (window.innerHeight || document.documentElement.clientHeight) &amp;&amp;<br>    <em> rect.left &lt;= (window.innerWidth || document.documentElement.clientWidth)<\/em><br>  );<br>  if (isVisible != element.memeData.isVisible) {<br>    if (isVisible) {<br>      element.memeData.video.play();<br>    } else {<br>      element.memeData.video.pause();<br>    }<br>    element.memeData.isVisible = isVisible;<br>  }<br>}<br><br>function checkForMemes() {<br>  let elements = document.getElementsByTagName(\u00abfigure\u00bb);<br>  for (let element of elements) {<br>    if (!element.classList.contains(&#8216;meme&#8217;)) {<br>      continue;<br>    }<br>    memeList.push(element);<br>    element.memeData = {};<br>    for (let child of element.childNodes) {<br>      if (&#8216;controls&#8217; in child) {<br>        element.memeData.video = child;<br>        element.memeData.isVisible = false;<br>        child.muted = true;<br>        child.controls = false;<br>        child.loop = true;<br>        child.autoplay = true;<br>        setPlayStatus(element);<br>      }<br>    }<br>  }<br>}<br><br>function refreshMemesStatus() {<br>  for (let meme of memeList) {<br>    setPlayStatus(meme);<br>  }<br>  return true;<br>}<br><br>window.addEventListener(\u00abload\u00bb, checkForMemes);<br>window.addEventListener(\u00abDOMContentLoaded\u00bb, refreshMemesStatus, false);<br>window.addEventListener(\u00abscroll\u00bb, refreshMemesStatus, false);<br>window.addEventListener(\u00abresize\u00bb, refreshMemesStatus, false);<\/p>\n\n\n\n<p>Con esto lo \u00fanico que tenemos que hacer es a\u00f1adir al elemento <em>video<\/em> la clase CSS <em>meme<\/em>, y autom\u00e1ticamente se establecer\u00e1n los par\u00e1metros necesarios para que el v\u00eddeo funcione a la primera. A mayores, cuando el meme\/v\u00eddeo se sale de la zona visible de la pantalla, se le da la orden de <em>pausa<\/em> para que no consuma nada de procesador. Aunque es probable que los navegadores lo tengan en cuenta, no es mala idea dejar indicado de manera expl\u00edcita que nos da igual que el v\u00eddeo no siga avanzando mientras no lo vemos.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter meme\"><video height=\"288\" style=\"aspect-ratio: 288 \/ 288;\" width=\"288\" src=\"https:\/\/blog.rastersoft.com\/wp-content\/uploads\/2020\/06\/tadah.mp4\"><\/video><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Estoy preparando una entrada nueva y me apeteci\u00f3 a\u00f1adir memes en el texto, porque ayudan a leerlo al permitir descansar la vista entre p\u00e1rrafo y p\u00e1rrafo, y le dan un toque m\u00e1s divertido y agradable. Por desgracia, la cosa no es tan sencilla. Una primera opci\u00f3n es buscar GIFs animados, pero esto tiene varios problemas: &hellip; <a href=\"https:\/\/blog.rastersoft.com\/?p=2345\" class=\"more-link\">Seguir leyendo <span class=\"screen-reader-text\">Memes animados de hoy y de siempre<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-2345","post","type-post","status-publish","format-standard","hentry","category-trucos"],"_links":{"self":[{"href":"https:\/\/blog.rastersoft.com\/index.php?rest_route=\/wp\/v2\/posts\/2345","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.rastersoft.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.rastersoft.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.rastersoft.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.rastersoft.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2345"}],"version-history":[{"count":15,"href":"https:\/\/blog.rastersoft.com\/index.php?rest_route=\/wp\/v2\/posts\/2345\/revisions"}],"predecessor-version":[{"id":2366,"href":"https:\/\/blog.rastersoft.com\/index.php?rest_route=\/wp\/v2\/posts\/2345\/revisions\/2366"}],"wp:attachment":[{"href":"https:\/\/blog.rastersoft.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.rastersoft.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2345"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.rastersoft.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}