Prueba otra vez...

Por JMAP.

---

En esta ocasión, trataré de alterar el diseño y estilo de esta página, en particular, insertando directamente la descripción de cómo se mostrará esta página, en el editor proporcionado por este CMS. Para ello, atiéndase a que sólo una parte será modificada, respecto al aspecto de la página de inicio de este blog. Pues, deseo tratar de mantener un diseño coherente.

Por otra parte, la intención de esta página es evidenciar, mediante ejemplos, la utilidad del lenguaje para la creación de formas geométricas y no geométricas, vectoriales y escalables: SVG.

En este sentido, el desarrollo de utilidades destinadas al diseño gráfico y la implementación de modos de comprehender la www, más allá de lo que sus creadores imaginaron. En algunos casos, ha generado —en mi opinión— una pérdida de la esencia en la manera de estructurar y presentar la información y, además, del porqué de publicar o documentar algo. Así, las características necesarias para que un sitio virtual sea realmente accesible, es decir, que la cualquier entidad, bien personas, bien asistentes intangibles... Sean, capaces de entender y manejarse dentro de una web, obteniendo la información esperada, se ha desvanecido en un “océno de extrañas inquietudes”.

---

The web is more a social creation than a technical one, I designed it for a social effect —to help people work together— and not as a technical toy. The ultimate goal of the Web is to support and improve our weblike existence in the world.

Tim Berners-Lee. Weaving the web. Chapter 10. Web of the people. HarperCollins Publishers Inc. 1999. P. n.^ro 123.

---

Se ruega la aplicación del ius usus inocui [1] [2] [3], atendiendo a que, principalmente, toda la información expuesta en este sitio (https://.acalibra.blogspot.com) no tiene como objeto, el lucro del autor de este blog. Gracias.

---

¿Por qué no realizar un ejercicio usando aquello que es inherente a la web?

Veamos...

Ciertamente, un docto en alguna ocasión afirmó que: «el orden vence al tiempo» pero, también depende de los utensilios que uno use. Por ello, éstos, hay que estudiarlos y evaluar su eficacia, su capacidad de resolver en un corto tiempo el problema y su complejidad... ¿Es necsario para diseñar una web aprehender, previamente, un utensilio destinado a otro propósito?

Tratemos, en este caso, acerca del lenguaje SVG...

No voy detenerme en reproducir lo escrito en otros sitios acerca de esta clase de lenguaje y sus características, simplemente, comenzaré mostrando un pequeño ejemplo, de cómo, en mi caso, me resulta más útil recurrir a la escritura para generar ciertas imágenes y animaciones.

A continuación, el código que escribí para dar “vida” a ésto...

<svg width="400px" height="300px" xmlns="http://www.w3.org/2000/svg"> <!-- Interior --> <!-- Tetrágono paralelogramo derecho. --> <polygon points="10,90 55,60 55,200 10,230" fill="#e5e0df" stroke="black"/> <!-- Tetrágono paralelogramo inferior. --> <polygon points="10,230 55,200 375,200 330,230" fill="#e5e0df" stroke="black"/> <!-- Tetrágono rectángulo derecho. Parte trasera derecha. --> <rect x="55" y="90" width="115" height="110" fill="#ada8a8"/> <polygon points="10,170 55,140 215,140 170,170" fill="#e5e0df" stroke="black"/> <polygon points="170,90 215,60 215,200 170,230" fill="#e5e0df" stroke="black"/> <rect x="215" y="90" width="115" height="110" fill="#ada8a8"/> <polygon points="170,170 215,140 375,140 330,170" fill="#e5e0df" stroke="black"/> <polygon points="10,90 55,60 375,60 330,90" fill="#e5e0df" stroke="black"/> <polygon points="330,90 375,60 375,200 330,230" fill="#e5e0df" stroke="black"/> <!-- Exterior --> <rect id="d1" x="10" y="90" width="80" height="140" fill="whitesmoke" stroke="black"/> <polyline points="80,175 75,180 75,210 80,215" stroke="#8f8b8b" stroke-width="4px" fill="none"/> <rect id="d2" x="90" y="90" width="80" height="140" fill="whitesmoke" stroke="black"/> <polyline points="105,175 100,180 100,210 105,215" stroke="#8f8b8b" stroke-width="4px" fill="none"/> <rect id="d3" x="170" y="90" width="80" height="140" fill="whitesmoke" stroke="black"/> <polyline points="240,175 235,180 235,210 240,215" stroke="#8f8b8b" stroke-width="4px" fill="none"/> <rect id="d4" x="250" y="90" width="80" height="140" fill="whitesmoke" stroke="black"/> <polyline points="265,175 260,180 260,210 265,215" stroke="#8f8b8b" stroke-width="4px" fill="none"/> <!-- Animaciones --> <animate href="#d1" attributeName="opacity" from="1" to="0" dur="3s" fill="freeze" repeatCount="indefinite"/> <animate href="#d2" attributeName="opacity" from="1" to="0" dur="4s" fill="freeze" repeatCount="indefinite"/> <animate href="#d3" attributeName="opacity" from="1" to="0" dur="5s" fill="freeze" repeatCount="indefinite"/> <animate href="#d4" attributeName="opacity" from="1" to="0" dur="6s" fill="freeze" repeatCount="indefinite"/> </svg>

Sé que este ejemplo podría “optimizarse” un poco más pero, por el momento he preferido insertarlo así, como instrumento de aprehendizaje.

Continuará...