[[post_data {
    "author" : "KyMAN",
    "since" : 20210518,
    "version" : 20210525
}]]
# Multimedia

Los elementos Multimedia son aquellos elementos como el Audio, Imágenes, Vídeos, etc. Incluso
incrustaciones como los propios PDF o librerías que interpretan cosas como ThreeJS contra elementos
3D. En este caso, y por la imposibilidad por la carga de trabajo que ésto supone, se expondrán
ciertas integraciones contra WMarkDown para poder trabajar de forma sencilla algunos elementos, el
resto han de ser tratados directamente sobre HTML, CSS y JS. Es importante tener en cuenta que este
módulo es un Parámetro Customizado, que aunque halla sido externalizado por extensión del mismo de
"custom_parameters", éste no deja de trabajar con la misma estructura sintáctica, es por lo que se
sigue considerando un Parámetro Customizado.

Éste módulo se amplía en JavaScript por el hecho del Lazying, que de forma nativa, en los
componentes HTML existe para IMG, AUDIO y VIDEO pero no es un estándar para todos los navegadores
por lo que la falta de compatibilidad dio lugar a la creación de un fragmento de código JS para
gestionar el Lazy. Para compatibilizar con SEO sobre etiquetados HTML se hace uso de la etiqueta
NOSCRIPT, donde se pondrá en formato HTML todos los elementos sin Lazying, de esta forma, cuando un
indexador busque por el código HTML, éste no podrá ejecutar JS para acceder a los resultados finales
ni interpretar el parámetro "data-src" utilizado para poner las URL; sin embargo, sí sería capaz de
intepretar como HTML el contenido del NOSCRIPT al ser un entorno que no tiene habilitada la
ejecución de Scripts.

Como parte común para todas las operaciones que tenemos con el módulo Multimedia tenemos la sintaxis
de llamada, que viene siendo como un Componente Customizado usando la encapsulación con dobles
corchetes; a continuación el nombre del componente multimedia que queramos representar, incluyendo
su nombre de conjunto; y finalmente los datos de fuentes y textos que requiramos para dicho elemento
multimedia. A continuación marcamos una estructura de como se pondría:

```md

# Estructura de elementos Multimedia

[[COMPONENTE FUENTES]]

```

Cada elemento multimedia, a excepción de los Links embedados como Youtube, Soundcloud, etc. Pueden
tener más de una fuente opcional para que en caso de que caiga una de ellas pueda cargarse otra, y
pueden meterse tantas fuentes opcionales como se desee. Para llevar a cabo dicha tarea se usa un
Script JS que se adjunta a las librerías JS de WMarkDown la cual va cargando mediante Lazying los
elementos, y durante la carga, analiza de forma ordenada, desde el primero hasta el último, buscando
el primer Link que esté disponible para el recurso, el cual será el que use para mostrar el
contenido. En caso de no encontrarse ninguna opción, se dejará en blanco. Un ejemplo de esta
mecánica podría ser el siguiente:

<table style="width:100%;">
    <thead>
        <tr>
            <th style="width:50%;">WMarkDown</th>
            <th style="width:50%;">Resultado</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>

```md

# Ejemplo de carga opcional

[[image [
    "https://dictionary.cambridge.org/es/images/thumb/cog_noun_002_07459.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/9/92/Cog_font_awesome.svg",
    "https://cdn.icon-icons.com/icons2/2066/PNG/512/cog_icon_125323.png",
    "https://cdn.pixabay.com/photo/2013/07/12/18/19/cog-153268_960_720.png",
    "https://cdn.icon-icons.com/icons2/1875/PNG/512/cog_120288.png",
    "https://cdn.icon-icons.com/icons2/2066/PNG/512/cog_icon_125323.png"
] Configuración]]

```

            </td>
            <td>

[[image [
    "https://dictionary.cambridge.org/es/images/thumb/cog_noun_002_07459.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/9/92/Cog_font_awesome.svg",
    "https://cdn.icon-icons.com/icons2/2066/PNG/512/cog_icon_125323.png",
    "https://cdn.pixabay.com/photo/2013/07/12/18/19/cog-153268_960_720.png",
    "https://cdn.icon-icons.com/icons2/1875/PNG/512/cog_120288.png",
    "https://cdn.icon-icons.com/icons2/2066/PNG/512/cog_icon_125323.png"
] Configuración]]

            </td>
        </tr>
    </tbody>
</table>

En el Array de URLs de imagen cogerá la primera URL en el orden en el que se encuentran en el mismo
Array, que retorne una imagen correctamente, de esta forma, si falla la primera irá a la segunda, si
falla la segunda irá a la tercera, y así sucesivamente.

Con respecto al SEO es importante destacar que al ser un Script el cual gestiona qué URL mostrar, se
le impide al SEO detectar dicha imagen, por lo que se hace uso de la etiqueta NOSCRIPT de HTML que
permite meterle contenido String y el cual será interpretado por navegadores o entornos donde no se
pueda ejecutar Scripts, como pueden ser los Metabuscadores o los indexadores, pero si los Scripts
están habilitados, esta etiqueta será ignorada y no se mostrará al usuario, por lo que dicha
etiqueta tendrá los objetos de cada uno de los recursos opcionales dados, permitiendo al SEO ganar
puntos de posicionamiento aún a pesar de ser un sistema dinámico basado en Scripts clientes.

[[image ["/images/doc/multimedia_noscript.png"] Ejemplo del NOSCRIPT para el SEO.]]

Los textos que acompañan a los elementos multimedia son textos opcionales y no requieren de
encapsularse entre comillas pues se detecta como Link hasta donde halla una separación, tabulación o
salto de línea.

## Imágenes

Las imágenes son el elemento más sencillo y pueden ser tratadas de forma independiente o de forma
conjunta. La idea es poder poner una imagen en formato de bloque en HTML, es decir, que sea
independiente al resto del texto; o un conjunto de imágenes que pase lo mismo pero quedando todo en
un único bloque con imágenes más pequeñas visualmente.

Para llevar a cabo dicha operación usaremos usaremos el nombre de componente ___image___ para una
única imagen que ocupe casi todo el ancho; o bien ___images___ para un Grid de imágenes sucesivas.
Cada imagen vinculará consigo misma.

En la presentación del módulo Multimedia tenemos un ejemplo de muestreo de una imagen con 6 links
opcionales, donde podemos apreciar la siguiente estructura:

```md

[[image SOURCES TEXTO?]]

[[images
    SOURCES_1 TEXTO_1?
    SOURCES_2 TEXTO_2?
    SOURCES_3 TEXTO_3?
    ...
    SOURCES_N TEXTO_N?
]]

```

- **SOURCES** _(required)_: Array de Links de imágenes alternativas. Puede estar vacío, tener una o
más fuentes.
- **TEXTO** _(optional)_: Texto que acompaña a la imagen.

A continuación se exponen varios ejemplos de imagen única:

<table style="width:100%;">
    <thead>
        <tr>
            <th style="width:33%;">Descripción</th>
            <th style="width:33%;">WMarkDown</th>
            <th style="width:33%;">Resultado</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                Imagen con un único Link.
            </td>
            <td>

```md

[[image https://i.imgur.com/YueKYv4.png]]

```

            </td>
            <td>

[[image https://i.imgur.com/YueKYv4.png]]

            </td>
        </tr>
        <tr>
            <td>
                Imagen con un único Link acompañada de una texto.
            </td>
            <td>

```md

[[image https://i.imgur.com/bAlLssr.png Aprendiendo a programar en Java...]]

```

            </td>
            <td>

[[image https://i.imgur.com/bAlLssr.png Aprendiendo a programar en Java...]]

            </td>
        </tr>
        <tr>
            <td>
                Imagen con 6 Links alternativos de un icono de configuración con su texto de
                configuración.
            </td>
            <td>

```md

[[image [
    "https://dictionary.cambridge.org/es/images/thumb/cog_noun_002_07459.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/9/92/Cog_font_awesome.svg",
    "https://cdn.icon-icons.com/icons2/2066/PNG/512/cog_icon_125323.png",
    "https://cdn.pixabay.com/photo/2013/07/12/18/19/cog-153268_960_720.png",
    "https://cdn.icon-icons.com/icons2/1875/PNG/512/cog_120288.png",
    "https://cdn.icon-icons.com/icons2/2066/PNG/512/cog_icon_125323.png"
] Configuración]]

```

            </td>
            <td>

[[image [
    "https://dictionary.cambridge.org/es/images/thumb/cog_noun_002_07459.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/9/92/Cog_font_awesome.svg",
    "https://cdn.icon-icons.com/icons2/2066/PNG/512/cog_icon_125323.png",
    "https://cdn.pixabay.com/photo/2013/07/12/18/19/cog-153268_960_720.png",
    "https://cdn.icon-icons.com/icons2/1875/PNG/512/cog_120288.png",
    "https://cdn.icon-icons.com/icons2/2066/PNG/512/cog_icon_125323.png"
] Configuración]]

            </td>
        </tr>
        <tr>
            <td>
                Imagen GIF con 3 links opcionales, acompañada de texto.
            </td>
            <td>

```md

[[image [
    "https://i.imgur.com/xL3UgP6.gif",
    "http://i.redd.it/ibw4tcsb00wx.gif",
    "http://moviecitynews.com/wp-content/uploads/2013/06/Steven-Seagal-dancing.gif"
] Steven Seagal bailando en Rusia]]

```

            </td>
            <td>

[[image [
    "https://i.imgur.com/xL3UgP6.gif",
    "http://i.redd.it/ibw4tcsb00wx.gif",
    "http://moviecitynews.com/wp-content/uploads/2013/06/Steven-Seagal-dancing.gif"
] Steven Seagal bailando en Rusia]]

            </td>
        </tr>
    </tbody>
</table>

Por otro lado, para representar más de una imagen hemos de seguir el mismo procedimiento anterior
pero nombrando ***images*** en vez de *images*, y por cada línea se entenderá como una imagen
independiente a la anterior.

<table style="width:100%;">
    <thead>
        <tr>
            <th style="width:33%;">Descripción</th>
            <th style="width:33%;">WMarkDown</th>
            <th style="width:33%;">Resultado</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                Ejemplo de múltiples imágenes, donde la primera tiene un Link secundario, cada uno
                con sus textos.
            </td>
            <td>

```md

[[images
    ["https://i.ytimg.com/vi/J-YXLy9Lc7Y/maxresdefault.jpg", "https://images-na.ssl-images-amazon.com/images/I/61nwQasys5L._SY355_.jpg"] Classixx NYC
    https://images-na.ssl-images-amazon.com/images/I/61nwQasys5L._SY355_.jpg Classixx, sesión de Youtube.
    https://i.ytimg.com/vi/BeuWg4jdYaY/maxresdefault.jpg Classixx mixmag
]]

```

            </td>
            <td>

[[images
    ["https://i.ytimg.com/vi/J-YXLy9Lc7Y/maxresdefault.jpg", "https://images-na.ssl-images-amazon.com/images/I/61nwQasys5L._SY355_.jpg"] Classixx NYC
    https://images-na.ssl-images-amazon.com/images/I/61nwQasys5L._SY355_.jpg Classixx, sesión de Youtube.
    https://i.ytimg.com/vi/BeuWg4jdYaY/maxresdefault.jpg Classixx mixmag
]]

            </td>
        </tr>
    </tbody>
</table>

## Vídeos

Los vídeos tienen la misma sintaxis que las imágenes con la diferencia de que éstos tienen a
mayores, opcionalmente, un segundo link o conjunto de Links que viene siendo el Poster o carátula a
mostrar mientras no se reproduzca el vídeo. Básicamente puede tener las dos siguientes estructuras:

```md

[[video SOURCES POSTER? TEXTO?]]

[[videos
    SOURCES_1 POSTER_1? TEXTO_1?
    SOURCES_2 POSTER_2? TEXTO_2?
    SOURCES_3 POSTER_3? TEXTO_3?
    ...
    SOURCES_N POSTER_N? TEXTO_N?
]]

```

Cada campo indica lo siguiente:

- **SOURCES** _(required)_: Link o Links fuente del vídeo.
- **POSTER** _(optional)_: Link o Links fuente de la imagen que hace de poster.
- **TEXTO** _(optional)_: Texto que acompaña al vídeo.

Como con el caso de las imágenes, la carga de los elementos de vídeo se hacen mediante Lazying para
evitar un consumo excesivo del ancho de banda. A continuación se exponen unos cuantos ejemplos, uno
por cada caso principal que pueda salir.

## Audios



## Embeds



[[html_data {
    "title" : "WMarkDown - Multimedia",
    "url" : "https://wmarkdown.k3y.pw/es/doc/modules/multimedia.html",
    "author" : "Tarsier, KyMAN",
    "since" : 20210518,
    "version" : 20210525,
    "key_words" : "Whalers,MarkDown,MediaWiki,WMarkDown,módulo,multimedia,imágenes,imagen,video,vídeos,audio,audios,sonidos,embed,incrustación",
    "description" : "Módulo de Multimedia.",
    "project" : "WMarkDown",
    "logo" : "https://wmarkdown.k3y.pw/images/wmarkdown.png",
    "language" : "es"
}]]