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»

¿Has llegado hasta aquí y no encuentras la solución que buscas? ¡Pídela por favor!

Fotografía de una pantalla de ordenador mostrando una entrada del blog

Se va el mes de enero y yo sin ayudaros. Esto se debe en buena parte a un proyecto personal que tiene algo que ver con los romanos pero mucho más con un desafío propio. Se come mi tiempo, lo engulle. Así que he pensado que mejor os reclamo un poco de interactividad y dejo la pelota en vuestro tejado.

Esto de hablar de higos a brevas de temas tan dispares provoca que, con el discurrir del tiempo, muchos de esos temas se vayan quedando obsoletos ya que, por norma general, no los retomo.

Fotografía de una pantalla de ordenador mostrando una entrada del blog
Una de las tantas entradas que, por lo que ha llovido, seguramente esté desactualizada.

Algunos casos sangrantes como las actualizaciones de la API de Twitter (o incluso de su aplicación con el dichoso cambio de tono) sí son recurrentes. Pero otros como los mapas de Google o los códigos QR, no. He soltado algunos parches, pero generalmente no me molesto en volver a mirarlos salvo que alguien me advierta del desfase.

Así que, desde aquí, os animo a que, si alguna entrada de este blog en el que acabáis buscando ayuda no os “ayuda” porque los métodos explicados estén demasiado desactualizados, comentéis vuestras frustraciones al respecto por si pudiera yo, por mi parte, volver a dar con la solución.

Lo dicho, la pelota en vuestro tejado :P

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»