Blogger extremo: usar Blogspot como hosting gratis de sitio web (no blog)

-

Quizás alguna vez hayas pensado en usar Blogger como CMS para en base a él construir un sitio web pero no blog. Ya fuese de una sola página o múltiples, y así contar con todas las ventajas que el sistema de Google ofrece.

Quizás también desechases la idea por todo el trabajo, que supusiste, supondría modificar y/o eliminar todo el código innecesario o que pudiese chocar/impedir tus propósitos.

Posíblemente lo que te cuento a continuación no sea nada original. Seguro que alguien antes que yo ya lo logró. La cuestión está en que hace unas fechas se me ocurrió una de esas ideas locas para lograrlo de forma rápida y sencilla. Y cosa extraña ¡funcionó!

Sentemos los principios o requerimientos para que el utilizar el CMS de Blogger para alojar un sitio web no blog tenga sentido. Esto es, sea algo más que una curiosidad y pueda ser utilizado incluso para proyectos reales:

  • Que sólo sea servido lo que necesite el sitio web: Eliminar todo lo innecesario que viene por defecto y genera Blogger. Tanto los scripts, como el CSS, como el marcado HTML, como... cualquier otra cosa.
  • Que lo anterior no suponga más energía que la necesaria para crear el sitio web.
  • Que una vez en línea nada indique que estas viendo un Blogger, excepto por la URL. Y si te asomas al código sólo por un par de detalles menores inevitables en forma de comentarios HTML.
Blogger extremo: usar Blogspot como hosting gratis de sitio web (no blog) | Opiniones: 2
Blogger extremo: usar Blogspot como hosting gratis de sitio web (no blog)

Troceado de imagen con javascript y manejo de cada parte

-
mosaico

Retomamos los efectos con imágenes. Aunque no sean más que una excusa para ensayar métodos y técnicas que alguna vez nos van a servir para proyectos más útiles.

Hace un tiempo hablamos en la comunidad Puro CSS sólo demos de las máscaras aplicadas sobre elementos simulando "cortes" o "calados" para ver el fondo (12. Text mask); y una versión que parece cortar imágenes en partes circulares podría ser ésta:

See the Pen Decomposed image in circles. (Simulation with opaque masks.) by solipsistaCP (@solipsistacp) on CodePen.

Aquí tenemos un primer ejemplo con una máscara sobre una img y otro con una hecha en el background-image del figure contenedor.

Pero al cambiar el BGColor del documento ya le vemos los piolines. El color negro solamente "parece" ser el fondo, así que si tenemos un diseño detrás, el método no sirve.

Más tarde publiqué una versión que sí transparenta una parte del elemento usando CSS blend ( Imagen con degradado...) que aún no funciona en los navegadores de Microsoft. Un equivalente a la demo anterior sería:

Troceado de imagen con javascript y manejo de cada parte | Opiniones: 1
Troceado de imagen con javascript y manejo de cada parte

Textos truncados con Css

-
Textos truncados con Css

Para Css todos los elementos del documento al que aplica generan/son una caja que los encierra o contiene y sobre el que actúan los estilos. Así es desde una simple letra en medio de la página hasta el viewport en el que se representa.

Lógicamente las particularidades de cada caja varían en función del tipo de elemento de que se trate así como también las propiedades Css que admiten y el cómo se relacionan o influyen con las otras cajas adyacentes.

Esta concepción es la base de Css y se conoce como el modelo de caja o Css box-model.

Este modelo también es de aplicación a los elementos textuales. Así, cada vez que escribes un texto, lo que estás haciendo, para css, es poner unas cajas anónimas al lado de otras:

█ ⌷ ☐ ⌷ ⌷ ☐ ⌷ ☐ ⌷ ☐ ⌷ ☐
Textos truncados con Css | Opiniones: 0

CSS para mejorar rendimiento del navegador: CSS containment

-
CSS para mejorar rendimiento del navegador

Verdad de perogrullo: CSS tiene declaraciones para todos los gustos. Principalmente de dos grandes tipos: estructurales y de adorno.

Y hay propiedades que para funcionar necesitan de algún tipo de recurso, por lo general ajenos al propio CSS, como archivos externos de imágenes, svg, tipográficos... étc.

Y el uso de ambas (declaraciones y recursos) inciden en el proceso de conformar la página en el lado del cliente (máquina del usuario que visita la web). Lo que se conoce como carga de la web ('carga' en el sentido de cosas transportadas).

Al aumento de esta "carga" contribuyen no sólo los archivos CSS con todo lo que contienen (su llamada y descarga, acceso a los recursos, aplicación de ellos) y el resto de elementos contenidos en la página (objetos como imágenes, vídeos..., recursos como scripts, étc). Además de ésto otro factor determinante es la aplicación de los mismos en la composición de la web y sus alteraciones a medida que el navegador los va teniendo disponibles y procesando.

Básicamente dos efectos son más que notorios y molestos a medida que aumenta "la carga": demoras y bloqueos y repaints y reflows.

CSS para mejorar rendimiento del navegador: CSS containment | Opiniones: 6

El filtro SVG feColorMatrix y su matriz: imágenes duotono o monocromáticas

- El filtro SVG feColorMatrix: cómo crear su matriz para obtener los tonos deseados

Si has seguido los artículos que he dedicado a los filtros, especialmente el dedicado a los filtros equivalentes de SVG con los de Css que usan una palabra clave habrás observado que algunos filtros nativos de SVG usan lo que se conoce como matriz de color.

Son los filtros conocidos como feColorMatrix por ser el elemento del SVG en el que se declara la matriz de color a usar por el filto.

La potencia y posibilidades que ofrecen los filtros SVG feColorMatrix basados en una matriz de color son bestiales. Pero obtener el efecto deseado primero hay que conocer el significado de cada valor de la matriz y cómo funciona.

El filtro SVG feColorMatrix y su matriz: imágenes duotono o monocromáticas | Opiniones: 0

CSS Intrinsic Sizes: tamaños en función del contenido

-
Intrinsic Sizes: El contenido de los hijos define la anchura del padre

width: min-contentCon los elementos con su display computado como "block" siempre ha habido pelea por su tendencia a ocupar todo el ancho que tengan a mano. Circunstancia que, según el caso, complica la vida del desarrollador. Más, si cabe, en la era del RWD y del mantra el contenido lo primero.

Con el tema de las anchuras de los padres y la relación que mantienen con su contenido o hijos hay unos comportamientos típicos en el modelo de caja tradicional y lo definido por la especificación CSS2.1:

  1. Si el padre es o está declarado como 'block' ocupara toda la anchura disponible, con independencia de su contenido.
  2. Esto se puede evitar si lo hacemos flotar o ser del tipo 'inline-block'. En esta situación su anchura viene definida por el elemento más ancho. O lo que es lo mismo: crecerá a medida que lo hace el hijo con mayor anchura.
  3. Recurrir al display: table/table-X
  4. Fijar la anchura del padre ya sea a un valor fijo (absoluto o relativo) o limitado con max/min-width.

Es obligado aclarar que este comportamiento (ocupación de todo el espacio disponible) es posible alterarlo con los nuevos desarrollos de CSS3 concernientes al display interior o display-inside como el flex layout, CSS Grid, Regiones CSS o incluso las multicolumnas CSS.

CSS Intrinsic Sizes: tamaños en función del contenido | Opiniones: 3

La propiedad CSS Display ¿Qué hay de nuevo, vieja?

-

Hoy te propongo un pequeño juego o reto antes de seguir leyendo este artículo. ¿Te atreves? ¿Sí? Pues vamos con él.

Pilla papel y bolígrafo o abre tu editor de textos favorito y a continuación escribe todos y cada uno de los valores que admite la propiedad de CSS DISPLAY. Pero no hagas trampas que nadie se enterará. Ni consultes documentación ni sigas leyendo antes de terminar tu lista.

TIC
TAC
TIC
TAC TicTac
¿Cuántos te salieron?

La propiedad CSS Display ¿Qué hay de nuevo, vieja?

Antes de hacer recuento de los valores posibles para la propiedad CSS display y que puedas comparar con tu respuesta un pequeño recordatorio sobre esta propiedad por si alguno lo necesita. ¿Vale?

El valor de la propiedad display es el que marca qué tipo de caja genera el elemento al que se le declara. Esto es, la naturaleza del elemento o lo que tradicionalmente se ha conocido como el Modelo de formato visual

Este valor de display influye o condiciona al elemento en varios aspectos, hacia su exterior y en su interior:

La propiedad CSS Display ¿Qué hay de nuevo, vieja? | Opiniones: 4