Atentos a esta maravilla. La etiqueta <meter> (soportada por todos los navegadores) podemos describir de manera semántica cualquier cosa que se está midiendo: el estado de algo, un resultado; y el navegador lo mostrará de manera gráfica.
Con este código de Sven Wolfermann, podemos darle el estilo que queramos gracias al poder de manejar elementos gráficos en SVG y adaptarlo al típico caso de mostrar una reseña con estrellas.
Código: https://codepen.io/maddesigns/details/oQoMre/
Todas las entradas de: Pablo RM
[WebDevTip] Forzar el refresco de CSS (y javascripts) cacheados
[Vía: Force CSS changes to “go live” immediately | Mark on WordPress]
TL;DR Un sencillo truco, cada vez que se actualiza el fichero, se le añade su fecha detrás de la interrogación. Este parametro GET no se utiliza para nada, pero al cambiar la URL el navegador no la tiene cacheada y deber refrescar ese contenido. Mientras no se cambie el fichero la URL no cambiará.
Cuando actualizas el archivo style.css de tu tema de WordPress, es posible que hayas notado que tienes que «forzar la recarga» de tu sitio en el navegador para ver los cambios. Esto se debe a que el navegador guarda una copia del CSS en caché en tu disco duro. Dependiendo de cómo esté configurado tu servidor, es posible que no verifique una nueva versión de la hoja de estilos durante un par de horas o incluso más tiempo. Incluso si fuerzas la recarga para ver los cambios, los visitantes que hayan accedido previamente a tu sitio aún podrían obtener la versión anterior del CSS. Una forma de solucionar esto es «versionar» tu archivo CSS, agregando ?v=123 al URL en el elemento de tu hoja de estilos. Sin embargo, hacer esto manualmente cada vez puede resultar tedioso, por lo que aquí te presento una manera mucho mejor de hacerlo:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />Con este código, se actualizará automáticamente la parte final ?12345678 cada vez que modifiques el archivo. ¡Boom! Ahora todos verán instantáneamente tus cambios.
Explicación del código
El código utiliza la función filemtime() para obtener la fecha de modificación del archivo style.css. Luego, se agrega esta información al URL del enlace a la hoja de estilos mediante echo '?' . filemtime( get_stylesheet_directory() . '/style.css'). Al hacerlo, se crea un nuevo valor después del signo de interrogación que cambia cada vez que se realiza una modificación en el archivo CSS.
De esta manera, cuando actualices el archivo style.css, el URL de la hoja de estilos cambiará automáticamente y el navegador del usuario solicitará la nueva versión en lugar de usar la versión en caché.
Beneficios de forzar el refresco del CSS
Al versionar el archivo CSS de esta manera, garantizas que los cambios realizados se muestren instantáneamente a los visitantes de tu sitio web. Ya no tendrás que preocuparte por los usuarios que siguen viendo la versión anterior del CSS debido a la caché del navegador. Además, si trabajas en colaboración con otros desarrolladores o si tienes un equipo de mantenimiento de tu sitio web, todos podrán ver rápidamente las actualizaciones realizadas sin tener que realizar acciones adicionales.
Forzar el refresco del CSS es una técnica muy útil para asegurarte de que los cambios que realizas en tu hoja de estilos se reflejen inmediatamente en tu sitio web. Mediante el versionado automático del archivo CSS, te aseguras de que los visitantes vean siempre la última versión y evitas problemas causados por la caché del navegador. ¡Utiliza este método y olvídate de las dificultades para ver tus cambios en tiempo real!
HTML: ¿Como tacho? «Strike» vs «Del» vs «S»
A estas alturas, tenemos claro que presentación y contenido debería estar separados cuando realizamos una web. Que el HTML es el contenido y que el CSS es la manera de presentar, y que podríamos entender el contenido sin el CSS.
Quizá alguna parte de nuestro texto tenga un texto que se eliminó en el pasado pero que queremos que se mantenga para que una persona que venga después pueda leerlo, o algo que no es válido y, aunque se muestra, se muestra como erróneo. En la especificaciones de HTML 3.2 se planteó el uso de strike, pero pensando en que se eliminaría en favor de s, con al representación visual de una línea que tacha el texto. Finalmente este elemento se retiró en HTML 4 y XML 1.0 y se declaró obsoleto en HTML5.
Entonces ¿como tacho? Pues si estamos indicando que es un elemento que fue escrito en el pasado pero borrado, deberemos usar del, que además permite añadir un atributo datetime con la marca temporal del momento en que fue eliminado. Con esto decimos que el elemento ya no es importante para el contenido actual, pero que lo mantenemos por razones de consulta (para poder ver los cambios).
Sin embargo para mostrar un texto que sería incorrecto antes de algo correcto es recomendable usar s. Un ejemplo de caso de uso donde utilizo s es para indicar dos precios, el normal y el oferta, el primero no se ha retirado, pero tiene prevalencia la oferta.
Otra opción es usar la propiedad CSS text-decoration: line-through; que marcará con un tachado el texto, pero entonces no estaremos indicado semánticamente nada. Y en tal caso tendremos que apoyarnos en otra etiqueta, pero en ningún caso usaría un em para tachar algo, ya que para mi s, es un anti-em: lo que viene a continuación es importante, pero esto es a lo que no tienes que mirar. Por cierto, el opuesto a del, es ins, que marca un texto que se ha introducido posteriormente.
Gamevelopers y otras hierbas…
Soy feliz organizando Betabeers, los encuentros de desarrolladores que trabajan programando en startups y que quieren compartir sus tribulaciones. Y en la historia de Betabeers lo que mas me sorprendió es que en otras ciudades también han ido surgiendo nuevos Betabeers, pero de manera espontánea. Me refiero a que allí podían haber montado otros encuentros informales de desarrolladores, pero sin embargo cuando alguien ha querido montar uno nuevo, nos ha llamado, le ha puesto la misma marca y el mismo formato. Nosotros hemos pedido muy poco a cambio, seguir las (flexibles) directrices del formato, usar Betabeers.com para anunciarlo y tener algo de constancia.
Mientras, en el cercano terreno de los desarrolladores de videojuegos, noto que hay movimiento, pero el movimiento es desestructurado. Surgen distintas propuestas, pero cada una tiene unas cabezas diferentes al frente y me hace dudar de si se conocen o no quieren conocerse…
Seguir leyendo Gamevelopers y otras hierbas…
neo4j en Ubuntu 12.04 LTS
En ocasiones me pregunto cuanto tiempo tardaría en volver a poner en marcha un ubuntu con todas las personalizaciones que le he hecho. Quizá debería hacer un script cada vez que hago alguna cosa, para poder correrlo y ponerlo todo en vereda… Hoy voy a hablar de como he conseguido poner en marcha neo4j en mi Ubuntu 12.04 (soy un chico LTS).
neo4j es una base de datos de grafos, y va a ser nueva herramienta de mi navaja suiza. En mi entorno local me puedo descargar la versión Community edition…. pero a la hora de instalarlo hay un par de problemitas.
Seguir leyendo neo4j en Ubuntu 12.04 LTS