Inkscape-Visual Code

En Visual Code podemos abrir dibujos creados en Inkscape. Visual Code los traduce automáticamente a lenguaje HTML. Vemos el proceso a continuación. 

Podemos dibujar programando, escribiendo directamente en lenguaje HTML, en aplicaciones de programación como Visual Studio Code, mediante etiquetas <svg> o <canvas>. Hay editores online como el que ofrece la página w3schools.

Pero podemos dibujar en aplicaciones de dibujo como Inkscape (o Corel, o Illustrator, o Indesign, etc, para dibujos vectoriales; Gimp, Photoshop, Paint etc para dibujos ráster) y luego ver el lenguaje html abriendo el archivo de dibujo en Visual Code.

El proceso es: Primero dibujar y luego programar. No escribirlo y luego verlo.

Primero en Inkscape:

• Configuramos la página (ancho, alto...).
• Dibujamos unas figuras: línea, rectángulo, círculo, elipse... (pulsando control se escala uniformemente; pulsando alt también, pero con centro en el lugar donde hemos pinchado).
• Botón derecho, propiedades del objeto:
• ID: sustituimos el nombre por defecto (rect4493) por el que queramos, pero sin acentos ni espacios, separando las palabras escribiendo la primera de cada una, con mayúsculas. Esto es el lenguaje "CamelCase" (es código JavaScript).

Guardamos el archivo como:

• Formato Inkscape (svg)
• Formato Plano
• Formato Optimizado
• Formato Dxf

Luego, en Visual Studio Code, instalamos el plugin que nos permitirá ver los resultados gráficos del lenguaje html.

• En el Visual Code, presionamos el icono Extensiones.

Buscamos el pluggin svg viewer y lo instalamos.

A continuación sale un botón para restaurar la sesión. Le damos. 

Abrimos los archivos que hemos creado en Inkscape.

Ahí podemos observar y comparar los códigos.

• Vemos que en el formato optimizado, se pierden datos importantes del archivo original, como la ID de los objetos.
• El formato dxf es demasiado largo.
• El formato Inkscape o el plano serían los más acertados para los archivos creados con Inkscape.

Podemos ver las formas gráficas, yendo al menú "ver", "paleta de comandos", escribimos "svg"y elegimos "svg viewer". Se abrirá una ventana, el visor gráfico.

Cualquier modificación que hagamos en Visual Code, se modificará en el visor y en el archivo original, automáticamente.

Etiqueta Meta Charset: Acentos

Para que el lenguaje HTML 5 represente bien los acentos y otros caracteres debemos escribir la etiqueta:  <meta charset ="utf-8">   justo debajo de head. De este modo  el navegador conocerá la codificación de caracteres utilizada, antes de que comience a procesar nada.

Además, dentro de los símbolos de la etiqueta de apertura html debemos indicar los parámetros "lang" de "language" (idioma, en inglés) y "dir", de "direction" (refiriéndose a letras), como vemos en la siguiente imagen:

Haciendo esto nos aseguramos que la página se ve correctamente.
En HTML5 la codificación por defecto si no se especifica nada es UTF-8.

En HTML 4 la codificación utilizada por defecto es ISO-8859-1 (latin-1). Con esta codificación todos los caracteres que no aparezcan en el alfabeto latino deberán ser escritos como entidad HTML. Por ejemplo,

• &aacute; para la á,
• &ntilde; para la ñ.

Etiqueta SVG para dibujos vectoriales

Una de las principales actividades en programación gráfica es dibujar programando. Igual que el álgebra representa por escrito figuras geométricas, la programación permite hacer esto con otros idiomas que entienden los ordenadores.

Para ello podemos utilizar las etiquetas "svg" y "canvas".

Vamos a explicar la etiqueta "svg", siguiendo el siguiente tutorial. SVG son las siglas de Scalable Vector Graphics. Los vectores escalables, se recalculan en cada zoom o movimiento del ratón, por lo que siempre se verán nítidos, a diferencia de las imágenes ráster o de mapas de bits, cuya visualización depende de la resolución. Aquí se trata de vectores, funciones matemáticas y no pierden nitidez.

La etiqueta <svg> crea un espacio de dibujo, un lienzo, dentro de la página, y permite dibujar figuras vectoriales en HTML5. La escribimos dentro del Body. Entre las etiquetas de apertura y cierre de <svg> metemos otras etiquetas de las figuras que queremos representar, cada una con sus características, como vemos en la siguiente imagen:

que en el navegador se verá como sigue:

Elemento Ruta (svg Path)

El elemento <ruta> se utiliza para definir una trayectoria. Los comandos siguientes modifican la trayectoria:
M  = moveto
L   = lineto
H   = horizontal lineto
V   = line to verticales
C   = curveTo
S   =  curveTo suave
Q   =  curva cuadrática de Bézier
T   = suave curveTo cuadrática de Bézier
A   = arco elíptico.
Z   = closePath.

Por ejemplo:

Las curvas Bézier se utilizan para modelar curvas suaves que se pueden ampliar de forma indefinida. En general se seleccionan dos puntos extremos y uno o dos puntos de control. Si sólo hay un punto de control se llama curva "cuadrática" .
En la imagen siguiente vemos en azul una curva Bezier con A y C como puntos inicial y final y B punto de control.

Bases de programación

Podríamos asimilar la programación como un idioma, con varios lenguajes:

• lenguaje HTML: crea la estructura, los apartados, el sitio necesario para poner cosas ( < > )
• lenguaje CSS: crea la apariencia de lo que pongamos ( [  ] )
• lenguaje JavaScript (no confundir con Java): que crea la funcionalidad y el dinamismo de lo que pongamos ({ ;})

Para programar necesitamos crear un archivo. Lo haremos con cualquier programa como el "bloc de notas", el "notepad ++",  el "Visual Studio Code" entre otros. De estos tres el visual Studio Code es el más completo. Diferencia los elementos que escribamos con colores, automáticamente, facilitando la comprensión de la estructura. El archivo creado lo guardamos con el nombre deseado, seguido de la extensión ".html". Este archivo lo podemos abrir con el Visual Code por un lado, para editarlo y también podemos abrirlo con el navegador Internet Explorer, o Google Chrome, o Mozilla Firefox, para ver cómo se ve lo que programamos.

Lenguaje HTML:

Consiste en indicar al programa qué hacer, con comandos metidos dentro de "etiquetas", es decir, comandos escritos entre los símbolos "menor qué " y "mayor qué" (<  >). Toda etiqueta debe abrirse "<comando>" y cerrarse, es decir "</comando>", con la barra invertida antes del comando y dentro de los símbolos < >.

La estructura básica de un archivo vendrá dada por 3 etiquetas: html, head, body.
<html>
       <head>
       </head>
  
      <body>
      </body>
</html>

Algunas etiquetas de comandos fundamentales son:

• Antes de la etiqueta "html" se suele poner la etiqueta <!DOCTYPE html> que es sólo un comentario.
• <title>: Dentro de Head, nombre de la pestaña del navegador.
• <h1>: Dentro de Body, las etiquetas h1 a h7 son títulos y subtítulos dentro de la página del navegador.
• <p>: Incrementa el espaciado entre líneas, creando párrafos.
• <img src="imagen.ext">: Inserta una imagen de la misma carpeta donde esté el archivo. Esta etiqueta no necesita cierre. "src" signfica source, fuente.
• <a href=" ">: es un hipervínculo. Entre las comillas de la etiqueta de apertura del comando, ponemos la dirección http del enlace. Entre las etiquetas de apertura y cierre, ponemos la palabra que queremos que sea el hipervínculo: <a href=" "> hipervínculo </a>. Si queremos que el hipervínculo no sea una palabra, sino una imagen, basta sustituir la palabra entre las etiquetas, por la etiqueta de imagen <img src="imagen.png">.

animación con Gimp

Debemos tener una secuencia de fotogramas, generadas previamente y guardadas en una carpeta.

Abrimos Gimp, Menú Archivo, Abrir como capas y elegimos todas las imágenes con la que queramos formar la animación.

A continuación, vamos de nuevo  a Menú Archivo, Exportar como:

En el cuadro diálogo que se abre, elegimos el formato .gif para exportar, damos un nombre al archivo y una ubicación. 

Y damos al botón de abajo "Exportar". Y se abre un último cuadro de diálogo para configurar los parámetros de la animación. Marcamos:

- Como animación.

- Bucle perpetuo

- Retraso entre cuadros a 100 milisegundos.

- Indicamos además que todas las imágenes tienen la misma resolución, como se señala a continuación:

Damos otra vez al botón "Exportar" y se genera el fichero.

Aquí vemos los poliedros platónicos. El archivo gif pesa 6 MB. Consta de 100 fotogramas de 75 KB que generé en Blender, en sistema PAL (así que dura 4 segundos). Aquí en el blog lo he insertado como imagen gif, de la misma forma en que inserto  imágenes jpg, pero como vemos, es una imagen animada.

PDF 3D

Vamos a hacer los conocidos como PDF interactivos 3D: Archivos PDF con elementos manipulables por los usuarios, de manera que puedan girarlo, aumentar su tamaño o elegir las vistas deseadas, para comprender su geometría.

En Blender/ 3D Studio Max / Autocad / Sketch up /Tinkercad.... modelamos la pieza. Guardamos el archivo, además de como archivo de Blender, como archivo .obj e incluso como archivo  .stl

En Meshlab, abrimos el archivo recién creado .obj o el.stl y guardamos como .u3d. Es posible que nos falle el programa y no nos genere el u3d, aludiendo a la falta de algún plugin. En ese caso podemos recurrir a Photoshop. Abrimos el archivo obj en Photoshop desde el menú 3D, "nueva capa desde archivo 3D". En ese mismo menú Ver, "Exportar capa 3D", permite generar el archivo .u3d.

En InkScape, preparamos la página y hacemos un guardar como .pdf, que será la plantilla donde insertaremos el objeto manipulable.

En Adobe Pro, abrimos ese pdf. Vamos al menú Herramientas y elegimos "Medios enriquecidos", "Agregar 3D". Indicamos por selección de ventana dónde irá nuestro objeto. Se abre el cuadro de diálogo "Insertar 3D" donde marcamos la casilla "Mostrar opciones avanzadas". e importamos el archivo .u3d.

Se abre un cuadro de diálogo, donde interesa marcar la casilla "Fondo transparente" en la pestaña "Configuración de inicio".

Y en la pestaña "3D" elegimos el archivo y las siguientes opciones, aunque éstas se pueden modificar después de haber insertado el archivo.

Y listo. Al hacer clic en la imagen, podrás modificar la vista del objeto, como si de una maqueta real se tratara.