Adaptar el tamaño de una web a pantallas grandes con un simple zoom vía CSS

Mirad, lo que os voy a contar no es la más optima de las soluciones, pero sí es un recurso que en algún momento os puede ahorrar trabajo para salir del paso.

Hoy por hoy, todo es optimización para dispositivos móviles, de hecho la web va camino de tener que orientarse casi exclusivamente para ese tipo de pantallas, dejando las de sobremesa en un segundo lugar, ¿os suena eso del «mobile first«? Pero siempre está ese cliente puñetero o ese usuario final exigente al que le da por ver vuestro trabajo en su televisor HD y os dice con su voz más odiosa: «Pues en mi pantalla se ve todo muy pequeño y con mucho fondo por los lados…» ¿¡En serio!? ¿Quién ve las webs de artículos de lectura en sus televisores? La gente. La gente ve cualquier cosa en cualquier tipo de dispositivo porque para eso somos muchos, con demasiado tiempo y con multitud de formas de enfrentarnos a la misma sencilla y pequeña página web.

Lo ideal, en estos casos, sería ponerse a diseñar una nueva disposición para que nuestra web encajara también en pantallas «enormes» al igual que ya lo hace en las de las tabletas y las de los móviles… o, por qué no, contar con una ordenación de parrilla o cuadrícula al más puro estilo Pinterest, de manera que los elementos se agrupen de uno en uno, dos, tres o veinte dependiendo de cada pantalla. Pero muchas veces este tipo de presentación no es compatible con lo que necesitamos o con lo que nos han pedido y, si somos un poco rastreros, a ese usuario de antes le hubiéramos contestado: «¿Es que no sabes usar el zoom de tu navegador?» ¡Eureka!, ¿y si obligamos a la página a hacer zoom aunque el inútil de turno no sepa? Pues dicho y hecho.

Imagen que compara la vista entre la web sin zoom y con zoom
Continuar leyendo «Adaptar el tamaño de una web a pantallas grandes con un simple zoom vía CSS»

Google ya no es ese amigo que te ayuda con los deberes, ahora es el matón de la clase

¿Os acordáis de cuando Google era sólo un buscador? Hacía sólo una cosa, buscar, pero lo hacía de maravilla. Los años, la expansión empresarial, los cambios de tendencias, la forma en la que nos relacionamos con nuestros dispositivos, sean móviles o fijos, han ido modelando un nuevo Google que, con la sonrisa por delante –que para eso está el marketing– nos ha ido vendiendo sus nuevos productos como la mejor de las alternativas a lo existente. Y en un principio sí era así, porque Gmail, con su giga de «gratis» que ofrecía entonces, encandilaba nuestras mentes entumecidas por culpa de los Hotmail, Mixmail, Terra, Telefónica o a saber.

Pero con el tiempo, ese amigo siempre dispuesto a ayudarnos que no quería ser malo, empezó a jugar con un boli vacío transformado en cerbatana y nos fue lanzando molestas bolitas de papel: que si únete a Google+, que si ahora en YouTube no se pueden usar alias, que si como no me haces caso converjo Google+ con Youtube, que si te cierro Google Reader que no me sale a cuenta… Y eso a nivel usuario, porque si te metías por detrás, queriendo destacar en lo que seguía siendo el principal motor de Google, su buscador, te desquiciabas cada vez que le daba por cambiar la forma en la que la maquinaria indexaba las webs para que aparecieran unas u otras más arriba, según los criterios del momento.

Por norma general, nunca me han molestado mucho los cambios en el algoritmo del buscador de Google, pues hace años creí entender que lo que perseguían desde la empresa, actualización tras actualización, era ofrecerle a las personas –a sus usuarios– los resultados más apropiados, de manera que si una web era honesta, hablaba de su actividad con franqueza, estaba al quite en las redes sociales, se mantenía al día… todo le vendría rodado con los resultados de búsqueda. Que hay técnicas específicas, sí; que se pueden pagar anuncios, también; que la lucha puede ser encarnizada, bueno… Allá se peleen las grandes empresas con grandes presupuestos, que los negocios locales con el trabajo día a día tienen bastante.

En su (supuesto) empeño de mostrar los resultados más relevantes para el usuario en sus búsquedas, Google da ahora un nuevo paso: Sin versión responsive desapareces el 21 de abril. Como suena, si tu web no está adaptada a móviles y tabletas, ciao ciao, be bye. Y bien mirado, oye, que sí, que me parece correcto que, si estás en un dispositivo móvil, te afinen la búsqueda con resultados que van a ser adecuados a tu pantalla y ligeros de carga. Pero como con todo, hay que fijarse en la letra pequeña. Y la letra pequeña de este movimiento por parte de Google dice que, para comprobar que tu web se adapta, des a GoogleBot la libertad de ver tu site como si fuera una persona, es decir, que si tienes restricciones para robots, que las vayas quitando, que la discriminación es fea y los robotos de las webs tienen su corazoncito.

Imagen de Prueba de optimización para móviles Continuar leyendo «Google ya no es ese amigo que te ayuda con los deberes, ahora es el matón de la clase»

Buscar y remplazar con expresiones regulares en Sublime Text

Imagen explicativa del patrón de búsqueda a-z 0-9

Típico trabajo en el que te endosan una tabla html arcaica a la que hay que cambiarle todos los estilos, quitar columnas, respetar parte del contenido pero deshacerte de otra parte y, todo eso, repetirlo tantas miles de veces como filas infinitas tiene la tabla. Vamos, para echarse a temblar de lo tedioso y laaaaaaaargo que aparenta.

Analizando nuestro problema, lo que ocurre es que tenemos un puñado de código que se encuentra fácilmente con ⌘F (o Ctrl + F), pero también un puñado más de textos que varían y que nos fastidia la tarea de buscar todo y remplazarlo en un sólo golpe.

No sé si os habréis fijado –yo no lo había hecho hasta que me ha tocado semejante marrón– que el editor de código Sublime Text tiene una serie de iconos delante de la caja de búsqueda (de derecha a izquierda sirven) para resaltar las coincidencias, para buscar en la selección, para que dé la vuelta al documento y siga buscando, para buscar la palabra exacta, para distinguir entre mayúsculas y minúsculas y, finalmente, para poder buscar utilizando expresiones regulares. ¡Ésta es la nuestra!

Imagen aclarativa de cómo activar las expresiones regulares para la búsqueda

Lo primero de todo, en la parte de la búsqueda, hay que activar las expresiones regulares, bien pinchando en el icono con el ratón o bien con ⌥⌘R (Mac), Alt + R (Windows/Linux). Y después, a buscar como locos utilizando estas expresiones donde sean necesarias.

Buscar sin discriminar contenido

(.*)

Busca cualquier cosa, es decir, que si sólo escribes esto te selecciona el documento entero, pero no se trata de eso, se trata de combinarlo, por ejemplo: <td(.*) buscaría todo aquello que empezara por <td (aka, las etiquetas <td>) y seleccionaría todo el contenido que le siga en esa línea de código.

Imagen explicativa del selector genérico All

Buscar patrones de letras y números

([a-zA-Z0-9#])

Busca cualquier carácter entre el 0 y el 9 y entre la A y la Z, incluyendo mayúsculas y minúsculas y también las almohadillas (#).

([a-zA-Z0-9#])+

Busca cualquier conjunto que combine números, letras o almohadillas. CONJUNTO (gracias al + que significa que ese carácter inicial va seguido de uno o más iguales), con lo que tendremos desde palabras completas a colores en hexadecimal (#7fffd4).

Imagen explicativa del patrón de búsqueda a-z 0-9
Fijaos en el término de búsqueda, para que funcionara ha sido necesario escapar el signo de interrogación en la url.

Buscar sólo colores hexadecimales

(#([a-f0-9]{6}|[a-f0-9]{3}))

La búsqueda sólo devolverá valores hexadecimales (#7fffd4, #fff).

Imagen explicativa del patrón de búsqueda hexadecimal
Observad que selecciona los colores precedidos de almohadilla e ignora los que no la llevan.

Buscar con tildes y eñes

([a-záéíóúñA-ZÁÉÍÓÚÑ0-9])+

Aquí variamos el patrón de búsqueda para el español, de manera que no ignore las tildes y la ñ.

Imagen explicativa del patrón con caracteres latinos
Queda clara la diferencia entre la selección de cada tipo de patrón.

Continuar leyendo «Buscar y remplazar con expresiones regulares en Sublime Text»