Devitácora

Un blog informático

Aplicar estilos al ­«Layout» (Diseño) de Blogger

Cuando maquetaba mi blog observé que la estructura de mi sitio no se veía reflejada en la página de los elementos de Blogger (es la sección Layout o Diseño), todo se mostraba en una sola columna. Intenté agregar el CSS correspondiente a ese apartado de varias maneras en la plantilla, pero no era tomado en cuenta. Sabía que algo estaba omitiendo, como buen newbie, y era la etiqueta b:template-skin; con ella le indicamos a Blogger que las instrucciones que encierre se deben aplicar en dicha sección:

<b:template-skin>
  REGLAS DE CSS
</b:template-skin>

Pero hay que tener presente algo, que lo que se defina ahí afectará de igual manera al blog; para evitarlo, podemos anteponer body#layout al referirnos a los elementos:

<b:template-skin>
   body#layout #main {
     DECLARACIONES
   }
   body#layout #sidebar {
     DECLARACIONES
   }
</b:template-skin>

Si al guardar los cambios nos envía un error tipo bX, debemos verificar que la etiqueta de apertura <html> lleve incluido b:version='2':

<html b:version='2' ... >
Comentar

Fuente: https://blog.danifernao.com/2016/05/aplicar-estilos-al-layout-de-blogger.html
Licencia: https://creativecommons.org/licenses/by/4.0/deed.es

Anular los ­­«scripts» de los «widgets» de Blogger

Al igual que con el CSS de los widgets, podemos hacer lo mismo con los scripts de los elementos de Blogger para evitar que se apliquen en nuestra plantilla, aprovechando que el servicio toma como referencia la etiqueta de cierre </body> para agregarlos y que el HTML en texto plano es interpretado:

&lt;/body&gt;&lt;!-- </body> --&gt;

Si reemplazamos </body> por lo anterior, en nuestro código fuente veremos que tanto la etiqueta como los scripts aparecen encerrados entre comentarios, perdiendo todo su efecto y quedando como válido el cierre del body que lleva definido al inicio.

Ese mismo procedimiento podemos seguir para retirar el script que se añade antes de la etiqueta de cierre </head>:

&lt;/head&gt;&lt;!-- </head> --&gt;

Cabe recordar que esos scripts son necesarios para el buen funcionamiento del blog, inhabilitarlos solo viene como anillo al dedo en esas situaciones en las que podamos prescindir de ellos.

Actualización (10/10/18): gracias a las nuevas etiquetas de Blogger, podemos retirar definitivamente los scripts de los elementos con simplemente copiar lo siguiente:

b:js='false'

Y pegarlo en la etiqueta de apertura HTML:

<html b:js='false' ...

Cabe anotar que lo anterior no retira el script de la cabecera.

Comentar

Fuente: https://blog.danifernao.com/2016/04/anular-scripts-de-los-widgets-de-blogger.html
Licencia: https://creativecommons.org/licenses/by/4.0/deed.es

Herramientas para «webmasters»

Presento una breve lista de algunas de mis herramientas en línea preferidas para testear el comportamiento de mis sitios y validar su estructura, entre otros aspectos:

  • Markup Validation Service, para validar nuestro HTML.
  • CSS Validation Service, para validar nuestro CSS.
  • Structured Data Testing Tool, para validar los datos estructurados (microdata) de nuestras páginas.
  • PageSpeed Insights, para optimizar la respuesta de nuestro sitio.
  • WebPagetest, para testear la respuesta de nuestras páginas en distintas conexiones y plataformas.
  • WooRank (de prueba), para analizar nuestro sitio web en materia de SEO.
  • Code Beautify, un conjunto de herramientas para optimizar nuestros documentos.
  • Otras herramientas:
    • Type Tools, para mantenernos en el número ideal de caracteres en los títulos y en las descripciones de nuestros artículos.
    • JSCompress, para simplificar nuestros scripts.
    • Adobe Color CC, para elegir o generar una paleta de colores.
    • Iconmonstr, para buscar iconos vectoriales gratuitos, con la posibilidad de obtenerlos como SVG y en Base64.
    • SVG Repo, un repositorio de iconos SVG.
Comentar

Fuente: https://blog.danifernao.com/2016/04/herramientas-para-webmasters.html
Licencia: https://creativecommons.org/licenses/by/4.0/deed.es

Anular los estilos de los «widgets» de Blogger

Algo que me resultó muy molesto de Blogger fue la imposición de su propia hoja de estilos en mi plantilla, sin la posibilidad de retirarla; sin embargo, podemos valernos de un sencillo y conocido truco para impedir que se aplique:

El servicio destina la etiqueta b:skin (obligatoria) para que declaremos los estilos de nuestra plantilla:

<b:skin>
REGLAS DE CSS
</b:skin>

Lo primero que debemos hacer es sacar nuestro CSS de ahí:

<b:skin></b:skin>
<style type='text/css'>
REGLAS DE CSS
</style>
Leer más
Comentar

Fuente: https://blog.danifernao.com/2016/04/anular-el-css-de-los-widgets-de-blogger.html
Licencia: https://creativecommons.org/licenses/by/4.0/deed.es

Cuando el «Archivo del blog» no funciona en la versión móvil

Si empleamos el elemento Archivo del blog (estilo jerarquía) en nuestra plantilla personalizada para móviles, es probable que no trabaje correctamente. Lo anterior se debe a que Blogger no añade en el CSS destinado a tales dispositivos cierta instrucción necesaria, más un error cuando se intenta obtener ciertos datos.

La instrucción omitida en la hoja de estilos es la siguiente:

#ArchiveList .collapsed ul {
  display: none;
}

Ese código es el responsable de mantener las fechas compactadas, debe estar predefinido para que se desplieguen y plieguen acertadamente.

El segundo problema radica con los elementos que vienen contraídos por defecto. El script que emplea el servicio se vale de las URL (data:interval.url) de los períodos (meses, semanas o días) para tomar y mostrar las entradas que comprenden, pero su comportamiento se verá entorpecido cuando la dirección no sea canónica, y como en los móviles las direcciones llevan como parámetro m=1 o m=0 (versión de escritorio accedida desde el móvil), el resultado no será el esperado.

¿Cómo lidiamos con ese detalle? Como no encuentro una etiqueta de la que podamos obtener la dirección canónica para ese caso, tocará apoyarnos en un sencillo script que simplemente retire ese parámetro. El siguiente código puede ir en cualquier parte de la plantilla posterior al widget:

<b:if cond='data:blog.url != data:blog.canonicalUrl'>
  <script>
    var e = document.getElementsByClassName("post-count-link");
    for (i = 0; i &lt; e.length; i++)
      e[i].href = e[i].href.split("?m=")[0];
  </script>
</b:if>
Comentar

Fuente: https://blog.danifernao.com/2016/04/cuando-el-archivo-del-blog-no-funciona.html
Licencia: https://creativecommons.org/licenses/by/4.0/deed.es

El viejo inconveniente del modo «Vista previa» de Blogger

Cuando empleamos la etiqueta data:blog.url en una sentencia condicional para preguntar si nos encontramos en la página principal, su comportamiento no será el esperado en tal caso visualicemos una entrada o una página desde el editor. Para dejarlo más claro, supongamos que tenemos lo siguiente en nuestra plantilla:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
¡HOLA, ESTÁS EN LA PÁGINA PRINCIPAL!
</b:if>

Ese mensaje debería aparecer solo en la página principal de nuestro blog; sin embargo, cuando estemos creando o editando una publicación y vayamos a modo Vista previa, de igual forma lo veremos. Lo anterior se debe a que data:blog.url vale lo mismo que data:blog.homepageUrl en ese caso.

Para parchear el asunto, podemos preguntar si el tipo de página en la que estamos es de tipo index (la página principal es de clase index), ya que la etiqueta que contiene dicho dato siempre arrojará el valor previsto: item para las entradas o static_page para las páginas. Continuando con el ejemplo, ahora quedaría así: 

<b:if cond='data:blog.url == data:blog.homepageUrl and data:blog.pageType == &quot;index&quot;'>
¡HOLA, ESTÁS EN LA PÁGINA PRINCIPAL!
</b:if>

Actualización (19/02/18): Gracias a las nuevas etiquetas de Blogger, podemos recurrir a data:view.isPreview para averiguar si nos encontramos en el modo Vista previa:

<b:if cond='data:blog.url == data:blog.homepageUrl and not data:view.isPreview'>
¡HOLA, ESTÁS EN LA PÁGINA PRINCIPAL!
</b:if>
Comentar

Fuente: https://blog.danifernao.com/2016/03/el-inconveniente-del-modo-vista-previa.html
Licencia: https://creativecommons.org/licenses/by/4.0/deed.es

Reemplazar el «No hay comentarios» en Blogger

Cambiar el mensaje «No hay comentarios» por uno de nuestra preferencia es muy sencillo. La etiqueta que se encarga de mostrarlo (se repite varias veces) es la siguiente:

<data:post.commentLabelFull/>

Basta con reemplazarlo por esta línea:

<b:eval expr='data:post.numComments == 0 ? &quot;Sé el primero en comentar&quot; : data:post.commentLabelFull'/>

Lo que se hizo fue emplear el operador ternario para preguntar si el número de comentarios, almacenado en data:post.numComments, es cero, y mostrar nuestro mensaje en tal caso de serlo; de lo contrario, que haga lo suyo.

Comentar

Fuente: https://blog.danifernao.com/2016/03/cambiar-el-no-hay-comentarios-en-blogger.html
Licencia: https://creativecommons.org/licenses/by/4.0/deed.es

Distinguir siempre la etiqueta actual en Blogger

Al listar las entradas por una etiqueta, esta deja de ser un enlace en el widget correspondiente, pero al pasar a la página siguiente, vuelve a ser un vínculo, desentonando con el proceder anterior. La línea responsable es la siguiente:

<b:if cond='data:blog.url == data:label.url'>

Esa sentencia lo que hace es comparar si la dirección actual de la página en la que estás es igual al de la etiqueta del widget. Al principio funciona, ambas direcciones son iguales, pero cuando se añaden los parámetros necesarios a la dirección del blog para mostrar las entradas de las páginas posteriores, data:label.url toma todo eso y la sigue comparando con la dirección inicial de la etiqueta, comportándose de la manera descrita al inicio.

Una posible solución sería reemplazar lo anterior (aparece dos veces) por esto:

<b:if cond='data:label.name == data:blog.searchLabel'>

En data:label.name se almacena el nombre de la etiqueta del widget y en data:blog.searchLabel el nombre de la etiqueta con la que se realizó la consulta, algo que no va a cambiar por más páginas que pasemos.

Comentar

Fuente: https://blog.danifernao.com/2016/03/distinguir-la-etiqueta-actual-en-blogger.html
Licencia: https://creativecommons.org/licenses/by/4.0/deed.es

Resaltar la entrada actual en el «Archivo del blog»

Continuando con el Archivo del blog, también deseaba resaltar el enlace de la entrada en tal caso estuviéramos en ella. La parte del widget encargada de maquetar la lista es la siguiente:

<b:includable id='posts' var='posts'>
  <ul class='posts'>
    <b:loop values='data:posts' var='post'>
      <li>
        <a expr:href='data:post.url'>
          <data:post.title/>
        </a>
      </li>
    </b:loop>
  </ul>
</b:includable>

Bastaba con añadir una clase o emplear un nombre único al vínculo para posteriormente aplicarle los estilos, así que recurrí al operador ternario para colocarlo en el enlace correspondiente, comparando su dirección con la de la página actual:

<b:includable id='posts' var='posts'>
  <ul class='posts'>
    <b:loop values='data:posts' var='post'>
      <li>
        <a expr:href='data:post.url' expr:class='data:post.url == data:blog.url ? &quot;current-post&quot; : &quot;&quot;'>
          <data:post.title/>
        </a>
      </li>
    </b:loop>
  </ul>
</b:includable>

Lo que restaba por hacer era agregar las instrucciones en el CSS. Un ejemplo sería:

#ArchiveList .current-post {
  color: red !important; /* Lo colorea de rojo */
  text-decoration: none !important; /* Evita que se subraye */
}
Comentar

Fuente: https://blog.danifernao.com/2016/03/resaltar-la-entrada-actual-en-el-archivo.html
Licencia: https://creativecommons.org/licenses/by/4.0/deed.es

Contraer los períodos del «Archivo del blog» de Blogger

De aquí en adelante iré publicando mis experiencias en Blogger, tratando de compartir lo que no esté ya trillado. ¡Empecemos!

Uno de los aspectos que me incomodó cuando estaba diseñando el blog fue ver en el archivo del mismo (estilo jerárquico) la fecha reciente expandida, ¡ansiaba contraerlo! Era un mero capricho, así que no entremos en razonamientos. Para lograr tal cometido, solo edité algunas líneas en el código de dicho elemento:

La siguiente línea es la responsable de mantenerlos expandidos o contraídos:

<li expr:class='&quot;archivedate &quot; + data:interval.expclass'>

El valor de data:interval.expclass será expanded o collapsed dependiendo del caso, así que bastaría con reemplazarlo por collapsed para obligarlos a contraerse:

<li class='archivedate collapsed'>

El tema no terminó ahí, porque el comportamiento de los iconos que acompañan a los días, semanas, meses y años ahora no era el acertado. El trozo responsable era este:

<b:if cond='data:interval.expclass == &quot;expanded&quot;'>
[CÓDIGO]
</b:if>

Con eliminar lo anterior y colocar el código HTML de la flechita en su lugar se zanja el asunto:

&#9658;&#160;
Comentar

Fuente: https://blog.danifernao.com/2016/03/contraer-las-fechas-del-archivo-del-blog.html
Licencia: https://creativecommons.org/licenses/by/4.0/deed.es

Hablemos un poco de las plantillas en Blogger

Blogger nos ofrece decenas de plantillas para nuestros blogs con la posibilidad de personalizarlas de manera sencilla; sin embargo, si ninguna nos convence, también nos facilita el medio para optar por las de terceros. Uno de mis sitios preferidos para empezar la búsqueda es BTemplates, que cuenta con una inmensa colección de plantillas gratuitas para el servicio de Google. Una vez que nos cansemos de tanto observar, simplemente descargamos una y seguimos las instrucciones que ellos mismos nos describen.

En tal caso deseemos manipular nuestra plantilla, debemos comprender primero el lenguaje que emplea Blogger en ella, cuya documentación está siempre a la mano en la página de Ayuda de Blogger. Los temas que nos interesan están agrupadas en el apartado Cambiar el aspecto de tu blog:

En el foro de Blogger en inglés suelen explicar a fondo las novedades:

La documentación de Blogger puede ser un suplicio si no poseemos ciertas nociones en algunos temas, es ahí en donde su gran comunidad entra en acción para tendernos una mano, comenzando con su Foro de ayuda en español y pasando por sitios como Oloblogger o Vagabundia.

Hace poco (20 de agosto de 2018) descubrí Blogger Code, un hermoso lugar en donde se detalla todas las etiquetas de Blogger. No hay nada que se le compare. Está en francés, pero eso no es ningún inconveniente en estos días, el mismo sitio nos ofrece un traductor.

Comentar

Fuente: https://blog.danifernao.com/2016/03/sobre-las-plantillas-en-blogger.html
Licencia: https://creativecommons.org/licenses/by/4.0/deed.es

¿Me «hackearon» la cuenta?

Seguridad

«Me hackearon», lo primero que expresamos cuando notamos manipulaciones en nuestras cuentas personales; aunque en la mayoría de los casos no se trata de hackeos como tal, sino que son el resultado de la inocencia de nuestra parte más la viveza de los amigos de lo ajeno. Estos son algunos puntos que nos hacen más propensos a caer en tales situaciones:

  • Tenemos esa mala costumbre de asignar la misma vieja contraseña a todas las cuentas, cediendo el control total de nuestra existencia en la red al afortunado que logre descubrirla.
  • Tendemos a crear contraseñas simples y fáciles de adivinar o captar, como emplear palabras familiares, frases comunes o combinaciones recurrentes.
  • Somos muy perezosos y hasta nos irritamos cuando el servicio nos aconseja agregar un correo electrónico alternativo o un número telefónico, datos que pueden salvarnos.
  • Somos muy confiados cuando se trata de prestar nuestros equipos a extraños, dándoles la oportunidad de acceder a las contraseñas guardadas en el navegador a través de tretas o de instalar aplicaciones que registran nuestra actividad.
  • No cerramos nuestras sesiones cuando empleamos equipos de terceros, como cuando dejamos nuestras cuentas abiertas al salir de un cibercafé, confiando demasiado en la buena fe del siguiente cliente.
  • Nos pasamos de inocentes con cuanto correo recibamos, obedeciendo instrucciones, siguiendo enlaces y ofreciendo datos sin detenernos a observar de dónde procede el mensaje y de lo que estamos comprometiendo.

Siempre es aconsejable pasarse por las opciones de seguridad de nuestras cuentas y averiguar cómo podemos protegernos. Muchos sitios nos permiten revisar si hay actividades extrañas, cerrar las sesiones que hayamos dejado activas en otros equipos y fortalecer la seguridad con la Verificación de dos pasos, levantando un muro ante cualquiera que logre obtener nuestras contraseñas, ya que siempre se requerirá de un código enviado a nuestros móviles para poder proseguir con la autenticación.

Fuente de la imagen

Comentar

Fuente: https://blog.danifernao.com/2016/03/me-hackearon-la-cuenta.html
Licencia: https://creativecommons.org/licenses/by/4.0/deed.es

Políticas de Google Chrome para cuentas locales en Windows

A veces se nos presenta la necesidad de limitar el uso de ciertas funciones de Chrome a los usuarios locales (usuario estándar) en Windows. Gracias a las Políticas de Google Chrome podemos hacer lo anterior, como restringir el acceso a secciones del navegador, bloquear la instalación de extensiones, entre otros aspectos.

Para no complicarnos tanto, sigamos los pasos en nuestra sesión con permisos administrativos:

  1. Lo primero que debemos hacer es descargar las plantillas haciendo clic aquí. Descomprime el archivo, localiza la carpeta adm y guárdala.
  2. Presiona las teclas Windows + R, escribe el comando mmc y presiona el botón Aceptar.
  3. Haz clic en el menú Archivo de la nueva ventana que se despliega, luego en Agregar o quitar complemento, doble clic en Editor de objetos de directiva de grupo de la lista del panel izquierdo, presiona el botón Examinar, clic en la pestaña Usuarios, doble clic en la cuenta local deseada, presiona el botón Finalizar y luego Aceptar
  4. Expande Directiva Equipo Local, haz lo mismo con Configuración de usuario, clic derecho en Plantillas administrativas, clic en Agregar o quitar plantillas, presiona el botón Agregar, ubícate en la carpeta adm guardada anteriormente, ingresa en la carpeta del idioma preferido (es), doble clic en el archivo chrome.adm y cierra la ventana.
  5. Expande Plantillas administrativas, luego Plantillas administrativas clásicas (ADM), sigue con Google y haz clic en Google Chrome.

Lo demás ya es cuestión de lo que deseas hacer, aquí encontrarás la documentación sobre el tema: Policy List.

Sistema operativo empleado: Windows 10.

Comentar

Fuente: https://blog.danifernao.com/2016/03/politicas-de-google-chrome-en-windows.html
Licencia: https://creativecommons.org/licenses/by/4.0/deed.es

¡Y empezamos!

La primera entrada oficial de este sencillo blog, y puede que esta sea la única por largo tiempo, porque no tengo la más remota idea de qué publicar en este espacio. Tenía pensado ir en contra de la esencia de este servicio y utilizarlo solo como una sencilla tarjeta de presentación, que es lo que se ve al principio (ya no existe), algo común en los que desean hacer una simple y vaga presencia en la red; sin embargo, terminé también adaptando el blog, resultado de la ociosidad, como todo lo demás. Y pues... heme aquí, publicando esta aburrida entrada sin sentido alguno.

Primer logotipo
Primer intento de logotipo.

Editado para hacer algunas aclaraciones con respecto al estado actual del blog.

Fuente: https://blog.danifernao.com/2016/03/empezamos.html
Licencia: https://creativecommons.org/licenses/by/4.0/deed.es

Suscribirse a: Entradas (Atom)
search-icon home-icon blog-icon about-icon envelop-icon calendar-icon tag-icon comment-icon share-icon gmail-icon blogger-icon twitter-icon facebook-icon printer-icon link-icon list-icon rss-icon logo-icon