350 lines
12 KiB
Markdown
Executable File
350 lines
12 KiB
Markdown
Executable File
[[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"
|
|
}]]
|