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:

                    

                    

                        
                        Language
                        md
                    
                
                    

                        
                        Lines
                        5
                    
                
                    

                        
                        Characters
                        66
                    
                
                    
                        

                        

# 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:

WMarkDown

Resultado

Language md Lines 12 Characters 522 # 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]]

Configuración

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.

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:

                    

                    

                        
                        Language
                        md
                    
                
                    

                        
                        Lines
                        11
                    
                
                    

                        
                        Characters
                        149
                    
                
                    
                        

                        

[[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:

Descripción	WMarkDown	Resultado
Imagen con un único Link.	Language md Lines 3 Characters 45 [[image https://i.imgur.com/YueKYv4.png]]
Imagen con un único Link acompañada de una texto.	Language md Lines 3 Characters 80 [[image https://i.imgur.com/bAlLssr.png Aprendiendo a programar en Java...]]	Aprendiendo a programar en Java...
Imagen con 6 Links alternativos de un icono de configuración con su texto de configuración.	Language md Lines 10 Characters 491 [[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]]	Configuración
Imagen GIF con 3 links opcionales, acompañada de texto.	Language md Lines 7 Characters 217 [[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]]	Steven Seagal bailando en Rusia

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.

Descripción	WMarkDown	Resultado
Ejemplo de múltiples imágenes, donde la primera tiene un Link secundario, cada uno con sus textos.	Language md Lines 7 Characters 349 [[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 ]]	Classixx NYC Classixx, sesión de Youtube. Classixx mixmag

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:

                    

                    

                        
                        Language
                        md
                    
                
                    

                        
                        Lines
                        11
                    
                
                    

                        
                        Characters
                        197
                    
                
                    
                        

                        

[[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