{"id":76237,"date":"2017-08-10T06:42:20","date_gmt":"2017-08-10T06:42:20","guid":{"rendered":"http:\/\/2-contenedor-web"},"modified":"2021-09-09T16:33:37","modified_gmt":"2021-09-09T16:33:37","slug":"2-contenedor-web","status":"publish","type":"post","link":"https:\/\/proyectos.comunicaciondigital.es\/en\/2-contenedor-web\/","title":{"rendered":"2. Contenedor web"},"content":{"rendered":"[et_pb_section admin_label=\u00bbsection\u00bb]\n\t\t\t[et_pb_row admin_label=\u00bbrow\u00bb]\n\t\t\t\t[et_pb_column type=\u00bb4_4&#8243;][et_pb_text admin_label=\u00bbText\u00bb]    \n      <div class=\"wp-block-group atavist-title-design cover-text-simple\">\n        <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n\n    \n      <h2 class=\"aligncenter has-text-align-left atavist-title-h2 wp-block-heading\">Contenedor web<\/h2>\n    \n\n\n\n\n        <\/div>\n      <\/div>\n    \n<h2 class=\"wp-block-heading\"><b>\u00bfPara qu\u00e9 un contenedor web?<\/b><\/h2>\n<p>Para la elaboraci\u00f3n del reportaje o informe digital necesitamos una aplicaci\u00f3n que nos permita desarrollar e integrar este. Se trata de utilizar una aplicaci\u00f3n web que nos facilite el proceso de \u201cunir\u201d en un mismo espacio todos nuestros contenidos multimedia del reportaje o informe.<\/p>\n<p>Actualmente existen numerosas aplicaciones para el desarrollo web. Desde los editores de c\u00f3digo (Editra, Notepad++\u2026), las suites dedicadas (Adobe CS6 Cloud\u2026), Frameworks (Eclipse, Flex\u2026), Gestores de Contenido (CMS), Aplicaciones en navegador (WebNG o Cloud Computing), que nos permiten realizar completos desarrollos web e integrar nuestros informes multimedia de forma sencilla y \u00e1gil.<\/p>\n<p>Entre las diferentes soluciones, los CMS (<em>Content Management System) <\/em>nos permiten trabajar de forma r\u00e1pida y sencilla. Un CMS es, b\u00e1sicamente, un sistema que contiene un conjunto de herramientas destinadas a la producci\u00f3n de contenidos multimedia de forma sencilla y dirigida.Una caracter\u00edstica b\u00e1sica de los CMS es que separan el contenido de su presentaci\u00f3n: el contenido se almacena en una base de datos mientras que su presentaci\u00f3n en la web se dise\u00f1a y define en una plantilla.As\u00ed, permiten la creaci\u00f3n de contenidos, el mantenimiento, la publicaci\u00f3n, el control de presentaci\u00f3n, el control de flujos de trabajo, la asistencia de sistemas de colaboraci\u00f3n y construcci\u00f3n social de conocimiento, etc.<\/p>\n<p>Por lo tanto, un \u201ccontenedor web\u201d servir\u00e1 para cubrir estas necesidades (una, varias a todas):<\/p>\n<ul class=\"wp-block-list\">\n<li>Para <b>agrupar los distintos contenidos digitales<\/b> que se producen o enlazan\n<\/li>\n<li>Para <b>publicar en Internet<\/b> nuestros productos de comunicaci\u00f3n digital\n<\/li>\n<li>Para <b>configurar un entorno personalizado<\/b> de comunicaci\u00f3n y permitir el acceso (restringido o abierto) a trav\u00e9s de la Red\n<\/li>\n<\/ul>\n<h2 class=\"wp-block-heading\"><b>Muchas opciones para elegir<\/b><\/h2>\n<p>En la actualidad, existen cientos de CMS en el mercado, cada uno de ellos con caracter\u00edsticas y funcionalidades muy diferentes. Por lo tanto no existe un CMS universal. A la hora de abordar un proyecto en red, deber\u00e1 atenderse a las necesidades espec\u00edficas del proyecto para determinar cu\u00e1l ser\u00e1 el CMS m\u00e1s adecuado.<\/p>\n<p>Simplificando, podemos hablar de cuatro tipos de soluciones adaptadas a nuestro caso, y que se ordenan en funci\u00f3n de su sencillez vs potencia:<\/p>\n<ul class=\"wp-block-list\">\n<li>Plataformas de publicaci\u00f3n multimedia: <a href=\"https:\/\/urjconline.atavist.com\/las-posibilidades-de-atavist-para-urjconline\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Atavist<\/a>\n<\/li>\n<li>Drag-and-drop WSB (Website Builder): <a href=\"http:\/\/www.weebly.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Weebly<\/a>\n<\/li>\n<li>CMS sencillo: <a href=\"http:\/\/wordpress.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">WordPress.com<\/a> \u2013 <a href=\"http:\/\/wordpress.org\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">wordpress.org<\/a>\n<\/li>\n<li>CMS avanzado: <a href=\"http:\/\/www.joomla.org\/download.html\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Joomla<\/a> \u2013 <a href=\"http:\/\/drupal.org\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Drupal<\/a>\n<\/li>\n<\/ul>\n<h2 class=\"wp-block-heading\">Nuestra elecci\u00f3n: WordPress y Divi<\/h2>\n<p>Como contenedor utilizaremos el servicio web <a href=\"https:\/\/es.wordpress.org\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">WordPress<\/a>. Se trata de un CMS online que trabaja contra el navegador y cuyo almacenamiento reside en un servidor bajo el modelo SaaS (Software como servicio).<\/p>\n<p>Su principal virtud es que permite componer proyectos web relativamente complejos mediante una interfaz muy sencilla, lo que facilita que nuestro esfuerzo se centre en c\u00f3mo aprovechar las posibilidades multimedia del informe m\u00e1s que en \u201cpelearnos\u201d con cuestiones t\u00e9cnicas.<\/p>\n<p>Dentro de la instalaci\u00f3n de WordPress utilizamos el framework o constructor Divi que facilita la elaboraci\u00f3n de composiciones complejas editando una \u00fanica p\u00e1gina web.<\/p>\n    \n      <div class=\"wp-block-group atavist-title-design cover-text-simple\">\n        <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n\n    \n      <h2 class=\"aligncenter has-text-align-left atavist-title-h2 wp-block-heading\">Maquetando con Divi<\/h2>\n    \n\n\n\n\n        <\/div>\n      <\/div>\n    \n<p>Este Manual del constructor Divi ofrece informaci\u00f3n detallada sobre las diferentes posibilidades que da para realizar la maquetaci\u00f3n multimedia.<\/p>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            [googleapps domain=\u00bbdrive\u00bb dir=\u00bbfile\/d\/1kcZ1s_Cr_YCQ0YO0t04jDY2dT_R7vPwG\/preview\u00bb query=\u00bb\u00bb width=\u00bb100%\u00bb height=\u00bb780&#8243; \/]\n\n          <\/div>\n        <\/div>\n      \n\n\n<p>Y este videotutorial se presenta el proceso b\u00e1sico para crear un informe.<\/p>\n\n\n        \n          <figure class=\"wp-block-embed is-type-video aligncenter is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\">\n            <div class=\"wp-block-embed__wrapper\">\n              <iframe loading=\"lazy\" title=\"Tutorial Crear reportajes\" width=\"1080\" height=\"810\" src=\"https:\/\/www.youtube.com\/embed\/1qpBTQaD6FM?feature=oembed\"  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n            <\/div>\n          <\/figure>\n        \n\n\n    \n      <div class=\"wp-block-group atavist-title-design cover-text-simple\">\n        <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n\n    \n      <h2 class=\"aligncenter has-text-align-left atavist-title-h2 wp-block-heading\">Shortcordes para maquetaci\u00f3n<\/h2>\n    \n\n\n\n\n        <\/div>\n      <\/div>\n    \n<p>Los <i>shortcodes<\/i> nos permiten incorporar, dentro del editor visual, peque\u00f1as funciones que facilitan la maquetaci\u00f3n de los art\u00edculos.Realmente no estamos escribiendo c\u00f3digo, sino incluyendo \u201cllamadas\u201d al c\u00f3digo que hace que se produzcan determinados comportamientos tales como dividir el texto en columnas, generar pesta\u00f1as, etc. <\/p>\n<p>Podemos ver los <a href=\"http:\/\/www.elegantthemes.com\/preview\/TheProfessional\/shortcodes\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">resultados en este enlace<\/a>, y en este otro, el <a href=\"http:\/\/www.elegantthemes.com\/preview\/TheProfessional\/357-2\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">detalle de uso de los shortcodes<\/a>.<\/p>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n\n          <\/div>\n        <\/div>\n      \n\n\n<p>Veamos cu\u00e1les son las principales que podremos utilizar:<\/p>\n<p><b>Insertar pesta\u00f1as<\/b>.<b> <\/b>Las pesta\u00f1as nos permiten estructurar mejor la informaci\u00f3n, fragmentando bloques mayores en unidades m\u00e1s peque\u00f1as organizadas mediante etiquetas que la almacenan.<\/p>\n<p>Los tipos de pesta\u00f1a pueden ser:<\/p>\n<ul class=\"wp-block-list\">\n<li>\u201ctop tabs\u201d: las pesta\u00f1as se cargan en horizontal en la parte superior\n<\/li>\n<li>\u201cleft labs\u201d: las pesta\u00f1as se cargan en vertical en el lado izquierdo\n<\/li>\n<li>\u201csimple\u201d: no lleva t\u00edtulos y funciona como una especie de slider\n<\/li>\n<li>\u201cimages\u201d: carga im\u00e1genes en las pesta\u00f1as a partir de URLs; funciona como un slider de im\u00e1genes.\n<\/li>\n<\/ul>\n<p><b>Learn more block. <\/b>Esta funcionalidad permite crear una caja en la que se introduce informaci\u00f3n (texto, im\u00e1genes, etc.), que puede estar oculta o ocultarse a voluntad de lector.<\/p>\n<p><b>Box. <\/b>Las cajas permiten resaltar un contenido mediante un fondo de color en el que lo inserta, y un icono identificativo<\/p>\n<p><b>Button: <\/b>Permite crear botones enlazables.<\/p>\n<p><b>Author. <\/b>Incorpora una caja transparente con borde de color, que muestra una imagen alineada la izquierda m\u00e1s el texto o c\u00f3digo que se desee a la derecha.<\/p>\n<p><b>Distribuir el texto en columnas<\/b>. Se pueden crear layouts complejos de texto a dos, a tres o a cuatro columnas, con distribuci\u00f3n sim\u00e9trica o proporcional o asim\u00e9trica (por ejemplo, 1\/3 &#8211; 2\/3)<\/p>\n<p><b>Tooltips<\/b>. Permiten incorporar texto que aparecer\u00e1 sobre una palabra o frase o sobre un elemento gr\u00e1fico al pasar por encima con el rat\u00f3n.<\/p>\n    \n      <div class=\"wp-block-group atavist-title-design cover-text-simple\">\n        <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n\n    \n      <h2 class=\"aligncenter has-text-align-left atavist-title-h2 wp-block-heading\">Crear enlaces internos a m\u00f3dulos<\/h2>\n    \n\n\n\n\n        <\/div>\n      <\/div>\n    \n<p>Para crear enlaces internos entre elementos o contenidos del informe usaremos \u201canchors\u201d o anclas.<\/p>\n<p>Cada elemento que incluimos en el editor Divi es considerado un m\u00f3dulo. Y cada m\u00f3dulo puede identificarse de forma un\u00edvoca con un ID. Una vez que lo hacemos, ya podemos crear un enlace que lleve al mismo. Para ello:<\/p>\n<ul class=\"wp-block-list\">\n<li>Abre el editor del m\u00f3dulo al que quieres enlazar.\n<\/li>\n<li>Abre la pesta\u00f1a \u201cCSS personalizado\u201d y en \u201cIdentificador CSS\u201d incluye el nombre con el que quieras nombrar ese elemento. Por ejemplo, para el t\u00edtulo del informe podr\u00eda ser \u201cinicio\u201d (esto nos servir\u00e1 para crear enlaces, dentro del informe, que lleven a la cabecera del mismo)\n<\/li>\n<\/ul>\n\n\n      \n        <figure class=\"wp-block-image alignwide\">\n          <img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/e0c6f-idanclas-1502367198-25.png\" alt=\"\">\n\n        <\/figure>\n      \n\n\n<ul class=\"wp-block-list\">\n<li>Ahora, en el lugar que quieras realizar el enlace, selecciona la opci\u00f3n de crear enlace del editor sobre el texto o imagen que haga de elemento hipertextual.\n<\/li>\n<li>En la edici\u00f3n del enlace incluye el s\u00edmbolo de la almohadilla # seguido del nombre que le hayas dado al elemento a enlazar.\n<\/li>\n<\/ul>\n\n\n      \n        <figure class=\"wp-block-image aligncenter\">\n          <img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/b7381-enlaceaele-1502367238-6.png\" alt=\"\">\n\n        <\/figure>\n      \n\n\n<ul class=\"wp-block-list\"><li>Confirma el enlace y guarda los resultados.\n<\/li><\/ul>\n<p>Aqu\u00ed puedes ver el proceso con mayor detalle:<\/p>\n\n\n      \n        <figure class=\"wp-block-image alignwide\">\n          <img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/3b920-addingcssi-1502367278-80.gif\" alt=\"\">\n\n        <\/figure>\n      \n\n\n    \n      <div class=\"wp-block-group atavist-title-design cover-text-simple\">\n        <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n\n    \n      <h2 class=\"aligncenter has-text-align-left atavist-title-h2 wp-block-heading\">Insertar popups<\/h2>\n    \n\n\n\n\n        <\/div>\n      <\/div>\n    \n<p>En ocasiones resulta \u00fatil que un contenido (imagen, texto, v\u00eddeo o interactivo) se abra en un popup o ventana emergente.<\/p>\n<p>A veces es necesario porque la aplicaci\u00f3n para crear interactivos presenta alg\u00fan conflicto con el framework de Divi. Por ejemplo, actualmente (mayo de 2017) sucede entre los contenidos de H5p y Divi.<\/p>\n<p>En ambas situaciones podemos hacer uso del plugin WP Popup. Para ello, los pasos ser\u00e1n:<\/p>\n<ol class=\"wp-block-list\">\n<li>Crear el popup a trav\u00e9s del men\u00fa de administrador. Ajustar las propiedades de tama\u00f1o, transparencia, etc. Es importante se\u00f1alar que el trigger sea manual, para que se active cuando queramos.\n<\/li>\n<li>En el lugar de una entrada, proyecto o p\u00e1gina que necesitemos, debemos seleccionar en el men\u00fa del editor el icono \u201cAdd Popup\u201d para seleccionar el que queramos. Se incluir\u00e1 el shortcode correspondiente al popup. Como su fuese un enlace, podremos asociarlo a un texto o a una imagen.\n<\/li>\n<\/ol>\n    \n      <div class=\"wp-block-group atavist-title-design cover-text-simple\">\n        <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n\n    \n      <h2 class=\"aligncenter has-text-align-left atavist-title-h2 wp-block-heading\">Tabla para fuentes<\/h2>\n    \n\n\n\n\n        <\/div>\n      <\/div>\n    \n<p>Las tablas html permiten incorporar datos tabulados de forma que tenga estructura y, por lo tanto, sem\u00e1ntica. Por defecto siempre incluiremos las tablas en formato estructurado, bien insertadas dentro del informe o reportaje, bien enlazando un fichero (hoja de c\u00e1lculo, base de datos&#8230;). Por tanto, no se incluir\u00e1n tablas en formato de imagen o en pdf. <\/p>\n<p>Para incorporar directamente tablas, disponemos de un plugin instalado que nos facilita que las tablas estructuradas en html puedan mostrarse con un buscador incorporado y con selectores (filtros) por columna, lo que permite al usuario recuperar la informaci\u00f3n de una manera m\u00e1s eficiente y adaptada a sus necesidades.<\/p>\n\n\n      \n        <figure class=\"wp-block-image alignwide\">\n          <img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/859ee-capturadep-1502368040-47.png\" alt=\"\">\n\n        <\/figure>\n      \n\n\n<p>Veamos los pasos para incorporar una tabla:<\/p>\n<ol class=\"wp-block-list\">\n<li>En primer lugar deb\u00e9is organizar las fuentes en una hoja de c\u00e1lculo de forma que la informaci\u00f3n de las fuentes quede estructurada. Deber\u00edan contener los campos b\u00e1sicos: autores, fecha, t\u00edtulo, recuperado de y NFCF (o el modelo de valoraci\u00f3n)\n<\/li>\n<li>Luego se copian los datos de la hoja de c\u00e1lculo y se transforman a tabla html con un servicio como <a href=\"http:\/\/tableizer.journalistopia.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Tableizer<\/a>.\n<\/li>\n<li>Se copia el c\u00f3digo en vista html en el lugar del espacio correspondiente. Y se asigna la clases footable a la etiqueta <em style=\"font-size:1rem;\">table<\/em> de apertura (class=\u201dfootable\u201d)\n<\/li>\n<li>El resultado es una tabla filtrable por los campos en los que se ha organizado la informaci\u00f3n y que permite buscar datos concretos.\n<\/li>\n<\/ol>\n[\/et_pb_text][\/et_pb_column]\n\t\t\t[\/et_pb_row]\n\t\t[\/et_pb_section]<div class=\"pdfprnt-buttons pdfprnt-buttons-post pdfprnt-bottom-right\"><a href=\"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts\/76237?print=pdf\" class=\"pdfprnt-button pdfprnt-button-pdf\" target=\"_blank\" ><img decoding=\"async\" src=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/plugins\/pdf-print\/images\/pdf.png\" alt=\"image_pdf\" title=\"View PDF\" \/><span class=\"pdfprnt-button-title pdfprnt-button-pdf-title\">Versi\u00f3n en PDF<\/span><\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>Contenedor web \u00bfPara qu\u00e9 un contenedor web? Para la elaboraci\u00f3n del reportaje o informe digital necesitamos una aplicaci\u00f3n que nos permita desarrollar e integrar este. Se trata de utilizar una aplicaci\u00f3n web que nos facilite el proceso de \u201cunir\u201d en un mismo espacio todos nuestros contenidos multimedia del reportaje o informe. Actualmente existen numerosas aplicaciones&hellip; <a class=\"continue\" href=\"https:\/\/proyectos.comunicaciondigital.es\/en\/2-contenedor-web\/\">Continua leyendo<span> 2. Contenedor web<\/span><\/a><\/p>","protected":false},"author":4,"featured_media":76238,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"    <!-- wp:group {\"className\":\"atavist-title-design cover-text-simple\"} -->\n      <div class=\"wp-block-group atavist-title-design cover-text-simple\">\n        <div class=\"wp-block-group__inner-container\">\n\n    <!-- wp:heading {\"textAlign\":\"left\",\"level\":2,\"align\":\"center\"} -->\n      <h2 class=\"aligncenter has-text-align-left atavist-title-h2\">Contenedor web<\/h2>\n    <!-- \/wp:heading -->\n\n\n\n\n        <\/div>\n      <\/div>\n    <!-- \/wp:group -->\n<!-- wp:heading {\"level\":2} --><h2><b>\u00bfPara qu\u00e9 un contenedor web?<\/b><\/h2>\n<!-- \/wp:heading --><!-- wp:paragraph --><p>Para la elaboraci\u00f3n del reportaje o informe digital necesitamos una aplicaci\u00f3n que nos permita desarrollar e integrar este. Se trata de utilizar una aplicaci\u00f3n web que nos facilite el proceso de \u201cunir\u201d en un mismo espacio todos nuestros contenidos multimedia del reportaje o informe.<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph --><p>Actualmente existen numerosas aplicaciones para el desarrollo web. Desde los editores de c\u00f3digo (Editra, Notepad++\u2026), las suites dedicadas (Adobe CS6 Cloud\u2026), Frameworks (Eclipse, Flex\u2026), Gestores de Contenido (CMS), Aplicaciones en navegador (WebNG o Cloud Computing), que nos permiten realizar completos desarrollos web e integrar nuestros informes multimedia de forma sencilla y \u00e1gil.<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph --><p>Entre las diferentes soluciones, los CMS (<em>Content Management System) <\/em>nos permiten trabajar de forma r\u00e1pida y sencilla. Un CMS es, b\u00e1sicamente, un sistema que contiene un conjunto de herramientas destinadas a la producci\u00f3n de contenidos multimedia de forma sencilla y dirigida.Una caracter\u00edstica b\u00e1sica de los CMS es que separan el contenido de su presentaci\u00f3n: el contenido se almacena en una base de datos mientras que su presentaci\u00f3n en la web se dise\u00f1a y define en una plantilla.As\u00ed, permiten la creaci\u00f3n de contenidos, el mantenimiento, la publicaci\u00f3n, el control de presentaci\u00f3n, el control de flujos de trabajo, la asistencia de sistemas de colaboraci\u00f3n y construcci\u00f3n social de conocimiento, etc.<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph --><p>Por lo tanto, un \u201ccontenedor web\u201d servir\u00e1 para cubrir estas necesidades (una, varias a todas):<\/p>\n<!-- \/wp:paragraph --><!-- wp:list --><ul>\n<li>Para <b>agrupar los distintos contenidos digitales<\/b> que se producen o enlazan\n<\/li>\n<li>Para <b>publicar en Internet<\/b> nuestros productos de comunicaci\u00f3n digital\n<\/li>\n<li>Para <b>configurar un entorno personalizado<\/b> de comunicaci\u00f3n y permitir el acceso (restringido o abierto) a trav\u00e9s de la Red\n<\/li>\n<\/ul>\n<!-- \/wp:list --><!-- wp:heading {\"level\":2} --><h2><b>Muchas opciones para elegir<\/b><\/h2>\n<!-- \/wp:heading --><!-- wp:paragraph --><p>En la actualidad, existen cientos de CMS en el mercado, cada uno de ellos con caracter\u00edsticas y funcionalidades muy diferentes. Por lo tanto no existe un CMS universal. A la hora de abordar un proyecto en red, deber\u00e1 atenderse a las necesidades espec\u00edficas del proyecto para determinar cu\u00e1l ser\u00e1 el CMS m\u00e1s adecuado.<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph --><p>Simplificando, podemos hablar de cuatro tipos de soluciones adaptadas a nuestro caso, y que se ordenan en funci\u00f3n de su sencillez vs potencia:<\/p>\n<!-- \/wp:paragraph --><!-- wp:list --><ul>\n<li>Plataformas de publicaci\u00f3n multimedia: <a href=\"https:\/\/urjconline.atavist.com\/las-posibilidades-de-atavist-para-urjconline\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Atavist<\/a>\n<\/li>\n<li>Drag-and-drop WSB (Website Builder): <a href=\"http:\/\/www.weebly.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Weebly<\/a>\n<\/li>\n<li>CMS sencillo: <a href=\"http:\/\/wordpress.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">WordPress.com<\/a> \u2013 <a href=\"http:\/\/wordpress.org\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">wordpress.org<\/a>\n<\/li>\n<li>CMS avanzado: <a href=\"http:\/\/www.joomla.org\/download.html\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Joomla<\/a> \u2013 <a href=\"http:\/\/drupal.org\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Drupal<\/a>\n<\/li>\n<\/ul>\n<!-- \/wp:list --><!-- wp:heading {\"level\":2} --><h2>Nuestra elecci\u00f3n: Wordpress y Divi<\/h2>\n<!-- \/wp:heading --><!-- wp:paragraph --><p>Como contenedor utilizaremos el servicio web <a href=\"https:\/\/es.wordpress.org\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">WordPress<\/a>. Se trata de un CMS online que trabaja contra el navegador y cuyo almacenamiento reside en un servidor bajo el modelo SaaS (Software como servicio).<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph --><p>Su principal virtud es que permite componer proyectos web relativamente complejos mediante una interfaz muy sencilla, lo que facilita que nuestro esfuerzo se centre en c\u00f3mo aprovechar las posibilidades multimedia del informe m\u00e1s que en \u201cpelearnos\u201d con cuestiones t\u00e9cnicas.<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph --><p>Dentro de la instalaci\u00f3n de Wordpress utilizamos el framework o constructor Divi que facilita la elaboraci\u00f3n de composiciones complejas editando una \u00fanica p\u00e1gina web.<\/p>\n<!-- \/wp:paragraph -->    <!-- wp:group {\"className\":\"atavist-title-design cover-text-simple\"} -->\n      <div class=\"wp-block-group atavist-title-design cover-text-simple\">\n        <div class=\"wp-block-group__inner-container\">\n\n    <!-- wp:heading {\"textAlign\":\"left\",\"level\":2,\"align\":\"center\"} -->\n      <h2 class=\"aligncenter has-text-align-left atavist-title-h2\">Maquetando con Divi<\/h2>\n    <!-- \/wp:heading -->\n\n\n\n\n        <\/div>\n      <\/div>\n    <!-- \/wp:group -->\n<!-- wp:paragraph --><p>Este Manual del constructor Divi ofrece informaci\u00f3n detallada sobre las diferentes posibilidades que da para realizar la maquetaci\u00f3n multimedia.<\/p>\n<!-- \/wp:paragraph -->\n\n      <!-- wp:group {\"className\":\"atavist-embed\"} -->\n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container\">\n            <!-- wp:html -->[googleapps domain=\"drive\" dir=\"file\/d\/1kcZ1s_Cr_YCQ0YO0t04jDY2dT_R7vPwG\/preview\" query=\"\" width=\"100%\" height=\"780\" \/]<!-- \/wp:html -->\n\n          <\/div>\n        <\/div>\n      <!-- \/wp:group -->\n\n\n<!-- wp:paragraph --><p>Y este videotutorial se presenta el proceso b\u00e1sico para crear un informe.<\/p>\n<!-- \/wp:paragraph -->\n\n        <!-- wp:embed {\"align\":\"center\",\"className\":\"wp-block-embed is-type-video aligncenter is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\",\"url\":\"https:\/\/www.youtube.com\/watch?v=1qpBTQaD6FM\",\"type\":\"video\",\"providerNameSlug\":\"youtube\",\"responsive\":true} -->\n          <figure class=\"wp-block-embed is-type-video aligncenter is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\">\n            <div class=\"wp-block-embed__wrapper\">\n              https:\/\/www.youtube.com\/watch?v=1qpBTQaD6FM\n            <\/div>\n          <\/figure>\n        <!-- \/wp:embed -->\n\n\n    <!-- wp:group {\"className\":\"atavist-title-design cover-text-simple\"} -->\n      <div class=\"wp-block-group atavist-title-design cover-text-simple\">\n        <div class=\"wp-block-group__inner-container\">\n\n    <!-- wp:heading {\"textAlign\":\"left\",\"level\":2,\"align\":\"center\"} -->\n      <h2 class=\"aligncenter has-text-align-left atavist-title-h2\">Shortcordes para maquetaci\u00f3n<\/h2>\n    <!-- \/wp:heading -->\n\n\n\n\n        <\/div>\n      <\/div>\n    <!-- \/wp:group -->\n<!-- wp:paragraph --><p>Los <i>shortcodes<\/i> nos permiten incorporar, dentro del editor visual, peque\u00f1as funciones que facilitan la maquetaci\u00f3n de los art\u00edculos.Realmente no estamos escribiendo c\u00f3digo, sino incluyendo \u201cllamadas\u201d al c\u00f3digo que hace que se produzcan determinados comportamientos tales como dividir el texto en columnas, generar pesta\u00f1as, etc. <\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph --><p>Podemos ver los <a href=\"http:\/\/www.elegantthemes.com\/preview\/TheProfessional\/shortcodes\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">resultados en este enlace<\/a>, y en este otro, el <a href=\"http:\/\/www.elegantthemes.com\/preview\/TheProfessional\/357-2\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">detalle de uso de los shortcodes<\/a>.<\/p>\n<!-- \/wp:paragraph -->\n\n      <!-- wp:group {\"className\":\"atavist-embed\"} -->\n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container\">\n            <!-- wp:html --><!-- \/wp:html -->\n\n          <\/div>\n        <\/div>\n      <!-- \/wp:group -->\n\n\n<!-- wp:paragraph --><p>Veamos cu\u00e1les son las principales que podremos utilizar:<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph --><p><b>Insertar pesta\u00f1as<\/b>.<b> <\/b>Las pesta\u00f1as nos permiten estructurar mejor la informaci\u00f3n, fragmentando bloques mayores en unidades m\u00e1s peque\u00f1as organizadas mediante etiquetas que la almacenan.<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph --><p>Los tipos de pesta\u00f1a pueden ser:<\/p>\n<!-- \/wp:paragraph --><!-- wp:list --><ul>\n<li>\u201ctop tabs\u201d: las pesta\u00f1as se cargan en horizontal en la parte superior\n<\/li>\n<li>\u201cleft labs\u201d: las pesta\u00f1as se cargan en vertical en el lado izquierdo\n<\/li>\n<li>\u201csimple\u201d: no lleva t\u00edtulos y funciona como una especie de slider\n<\/li>\n<li>\u201cimages\u201d: carga im\u00e1genes en las pesta\u00f1as a partir de URLs; funciona como un slider de im\u00e1genes.\n<\/li>\n<\/ul>\n<!-- \/wp:list --><!-- wp:paragraph --><p><b>Learn more block. <\/b>Esta funcionalidad permite crear una caja en la que se introduce informaci\u00f3n (texto, im\u00e1genes, etc.), que puede estar oculta o ocultarse a voluntad de lector.<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph --><p><b>Box. <\/b>Las cajas permiten resaltar un contenido mediante un fondo de color en el que lo inserta, y un icono identificativo<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph --><p><b>Button: <\/b>Permite crear botones enlazables.<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph --><p><b>Author. <\/b>Incorpora una caja transparente con borde de color, que muestra una imagen alineada la izquierda m\u00e1s el texto o c\u00f3digo que se desee a la derecha.<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph --><p><b>Distribuir el texto en columnas<\/b>. Se pueden crear layouts complejos de texto a dos, a tres o a cuatro columnas, con distribuci\u00f3n sim\u00e9trica o proporcional o asim\u00e9trica (por ejemplo, 1\/3 - 2\/3)<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph --><p><b>Tooltips<\/b>. Permiten incorporar texto que aparecer\u00e1 sobre una palabra o frase o sobre un elemento gr\u00e1fico al pasar por encima con el rat\u00f3n.<\/p>\n<!-- \/wp:paragraph -->    <!-- wp:group {\"className\":\"atavist-title-design cover-text-simple\"} -->\n      <div class=\"wp-block-group atavist-title-design cover-text-simple\">\n        <div class=\"wp-block-group__inner-container\">\n\n    <!-- wp:heading {\"textAlign\":\"left\",\"level\":2,\"align\":\"center\"} -->\n      <h2 class=\"aligncenter has-text-align-left atavist-title-h2\">Crear enlaces internos a m\u00f3dulos<\/h2>\n    <!-- \/wp:heading -->\n\n\n\n\n        <\/div>\n      <\/div>\n    <!-- \/wp:group -->\n<!-- wp:paragraph --><p>Para crear enlaces internos entre elementos o contenidos del informe usaremos \u201canchors\u201d o anclas.<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph --><p>Cada elemento que incluimos en el editor Divi es considerado un m\u00f3dulo. Y cada m\u00f3dulo puede identificarse de forma un\u00edvoca con un ID. Una vez que lo hacemos, ya podemos crear un enlace que lleve al mismo. Para ello:<\/p>\n<!-- \/wp:paragraph --><!-- wp:list --><ul>\n<li>Abre el editor del m\u00f3dulo al que quieres enlazar.\n<\/li>\n<li>Abre la pesta\u00f1a \u201cCSS personalizado\u201d y en \u201cIdentificador CSS\u201d incluye el nombre con el que quieras nombrar ese elemento. Por ejemplo, para el t\u00edtulo del informe podr\u00eda ser \u201cinicio\u201d (esto nos servir\u00e1 para crear enlaces, dentro del informe, que lleven a la cabecera del mismo)\n<\/li>\n<\/ul>\n<!-- \/wp:list -->\n\n      <!-- wp:image {\"align\":\"wide\",\"className\":\"wp-block-image alignwide\"} -->\n        <figure class=\"wp-block-image alignwide\">\n          <img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/e0c6f-idanclas-1502367198-25.png\" alt=\"\">\n\n        <\/figure>\n      <!-- \/wp:image -->\n\n\n<!-- wp:list --><ul>\n<li>Ahora, en el lugar que quieras realizar el enlace, selecciona la opci\u00f3n de crear enlace del editor sobre el texto o imagen que haga de elemento hipertextual.\n<\/li>\n<li>En la edici\u00f3n del enlace incluye el s\u00edmbolo de la almohadilla # seguido del nombre que le hayas dado al elemento a enlazar.\n<\/li>\n<\/ul>\n<!-- \/wp:list -->\n\n      <!-- wp:image {\"align\":\"center\",\"className\":\"wp-block-image aligncenter\"} -->\n        <figure class=\"wp-block-image aligncenter\">\n          <img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/b7381-enlaceaele-1502367238-6.png\" alt=\"\">\n\n        <\/figure>\n      <!-- \/wp:image -->\n\n\n<!-- wp:list --><ul><li>Confirma el enlace y guarda los resultados.\n<\/li><\/ul>\n<!-- \/wp:list --><!-- wp:paragraph --><p>Aqu\u00ed puedes ver el proceso con mayor detalle:<\/p>\n<!-- \/wp:paragraph -->\n\n      <!-- wp:image {\"align\":\"wide\",\"className\":\"wp-block-image alignwide\"} -->\n        <figure class=\"wp-block-image alignwide\">\n          <img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/3b920-addingcssi-1502367278-80.gif\" alt=\"\">\n\n        <\/figure>\n      <!-- \/wp:image -->\n\n\n    <!-- wp:group {\"className\":\"atavist-title-design cover-text-simple\"} -->\n      <div class=\"wp-block-group atavist-title-design cover-text-simple\">\n        <div class=\"wp-block-group__inner-container\">\n\n    <!-- wp:heading {\"textAlign\":\"left\",\"level\":2,\"align\":\"center\"} -->\n      <h2 class=\"aligncenter has-text-align-left atavist-title-h2\">Insertar popups<\/h2>\n    <!-- \/wp:heading -->\n\n\n\n\n        <\/div>\n      <\/div>\n    <!-- \/wp:group -->\n<!-- wp:paragraph --><p>En ocasiones resulta \u00fatil que un contenido (imagen, texto, v\u00eddeo o interactivo) se abra en un popup o ventana emergente.<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph --><p>A veces es necesario porque la aplicaci\u00f3n para crear interactivos presenta alg\u00fan conflicto con el framework de Divi. Por ejemplo, actualmente (mayo de 2017) sucede entre los contenidos de H5p y Divi.<\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph --><p>En ambas situaciones podemos hacer uso del plugin WP Popup. Para ello, los pasos ser\u00e1n:<\/p>\n<!-- \/wp:paragraph --><!-- wp:list --><ol>\n<li>Crear el popup a trav\u00e9s del men\u00fa de administrador. Ajustar las propiedades de tama\u00f1o, transparencia, etc. Es importante se\u00f1alar que el trigger sea manual, para que se active cuando queramos.\n<\/li>\n<li>En el lugar de una entrada, proyecto o p\u00e1gina que necesitemos, debemos seleccionar en el men\u00fa del editor el icono \u201cAdd Popup\u201d para seleccionar el que queramos. Se incluir\u00e1 el shortcode correspondiente al popup. Como su fuese un enlace, podremos asociarlo a un texto o a una imagen.\n<\/li>\n<\/ol>\n<!-- \/wp:list -->    <!-- wp:group {\"className\":\"atavist-title-design cover-text-simple\"} -->\n      <div class=\"wp-block-group atavist-title-design cover-text-simple\">\n        <div class=\"wp-block-group__inner-container\">\n\n    <!-- wp:heading {\"textAlign\":\"left\",\"level\":2,\"align\":\"center\"} -->\n      <h2 class=\"aligncenter has-text-align-left atavist-title-h2\">Tabla para fuentes<\/h2>\n    <!-- \/wp:heading -->\n\n\n\n\n        <\/div>\n      <\/div>\n    <!-- \/wp:group -->\n<!-- wp:paragraph --><p>Las tablas html permiten incorporar datos tabulados de forma que tenga estructura y, por lo tanto, sem\u00e1ntica. Por defecto siempre incluiremos las tablas en formato estructurado, bien insertadas dentro del informe o reportaje, bien enlazando un fichero (hoja de c\u00e1lculo, base de datos...). Por tanto, no se incluir\u00e1n tablas en formato de imagen o en pdf. <\/p>\n<!-- \/wp:paragraph --><!-- wp:paragraph --><p>Para incorporar directamente tablas, disponemos de un plugin instalado que nos facilita que las tablas estructuradas en html puedan mostrarse con un buscador incorporado y con selectores (filtros) por columna, lo que permite al usuario recuperar la informaci\u00f3n de una manera m\u00e1s eficiente y adaptada a sus necesidades.<\/p>\n<!-- \/wp:paragraph -->\n\n      <!-- wp:image {\"align\":\"wide\",\"className\":\"wp-block-image alignwide\"} -->\n        <figure class=\"wp-block-image alignwide\">\n          <img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/859ee-capturadep-1502368040-47.png\" alt=\"\">\n\n        <\/figure>\n      <!-- \/wp:image -->\n\n\n<!-- wp:paragraph --><p>Veamos los pasos para incorporar una tabla:<\/p>\n<!-- \/wp:paragraph --><!-- wp:list --><ol>\n<li>En primer lugar deb\u00e9is organizar las fuentes en una hoja de c\u00e1lculo de forma que la informaci\u00f3n de las fuentes quede estructurada. Deber\u00edan contener los campos b\u00e1sicos: autores, fecha, t\u00edtulo, recuperado de y NFCF (o el modelo de valoraci\u00f3n)\n<\/li>\n<li>Luego se copian los datos de la hoja de c\u00e1lculo y se transforman a tabla html con un servicio como <a href=\"http:\/\/tableizer.journalistopia.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Tableizer<\/a>.\n<\/li>\n<li>Se copia el c\u00f3digo en vista html en el lugar del espacio correspondiente. Y se asigna la clases footable a la etiqueta <em style=\"font-size:1rem;\">table<\/em> de apertura (class=\u201dfootable\u201d)\n<\/li>\n<li>El resultado es una tabla filtrable por los campos en los que se ha organizado la informaci\u00f3n y que permite buscar datos concretos.\n<\/li>\n<\/ol>\n<!-- \/wp:list -->","_et_gb_content_width":"","footnotes":""},"categories":[221],"tags":[],"class_list":["post-76237","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-banco-conocimiento"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>2. Contenedor web - Portal de proyectos multimedia<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/proyectos.comunicaciondigital.es\/en\/2-contenedor-web\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"2. Contenedor web - Portal de proyectos multimedia\" \/>\n<meta property=\"og:description\" content=\"Contenedor web \u00bfPara qu\u00e9 un contenedor web? Para la elaboraci\u00f3n del reportaje o informe digital necesitamos una aplicaci\u00f3n que nos permita desarrollar e integrar este. Se trata de utilizar una aplicaci\u00f3n web que nos facilite el proceso de \u201cunir\u201d en un mismo espacio todos nuestros contenidos multimedia del reportaje o informe. Actualmente existen numerosas aplicaciones&hellip; Continua leyendo 2. Contenedor web\" \/>\n<meta property=\"og:url\" content=\"https:\/\/proyectos.comunicaciondigital.es\/en\/2-contenedor-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Portal de proyectos multimedia\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-10T06:42:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-09T16:33:37+00:00\" \/>\n<meta name=\"author\" content=\"Manuel Gertrudix Barrio\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/2-contenedor-web\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/2-contenedor-web\\\/\"},\"author\":{\"name\":\"Manuel Gertrudix Barrio\",\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/#\\\/schema\\\/person\\\/4699e2d8a8c19b218ae2f96940a3c337\"},\"headline\":\"2. Contenedor web\",\"datePublished\":\"2017-08-10T06:42:20+00:00\",\"dateModified\":\"2021-09-09T16:33:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/2-contenedor-web\\\/\"},\"wordCount\":1499,\"image\":{\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/2-contenedor-web\\\/#primaryimage\"},\"thumbnailUrl\":\"\",\"articleSection\":[\"banco-conocimiento\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/2-contenedor-web\\\/\",\"url\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/2-contenedor-web\\\/\",\"name\":\"2. Contenedor web - Portal de proyectos multimedia\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/2-contenedor-web\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/2-contenedor-web\\\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2017-08-10T06:42:20+00:00\",\"dateModified\":\"2021-09-09T16:33:37+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/#\\\/schema\\\/person\\\/4699e2d8a8c19b218ae2f96940a3c337\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/2-contenedor-web\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/2-contenedor-web\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/2-contenedor-web\\\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/2-contenedor-web\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"2. Contenedor web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/#website\",\"url\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/\",\"name\":\"Portal de proyectos multimedia\",\"description\":\"Grupo Ciberimaginario\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/#\\\/schema\\\/person\\\/4699e2d8a8c19b218ae2f96940a3c337\",\"name\":\"Manuel Gertrudix Barrio\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/wp-content\\\/litespeed\\\/avatar\\\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1779727757\",\"url\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/wp-content\\\/litespeed\\\/avatar\\\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1779727757\",\"contentUrl\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/wp-content\\\/litespeed\\\/avatar\\\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1779727757\",\"caption\":\"Manuel Gertrudix Barrio\"},\"url\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/en\\\/author\\\/gertrudix\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"2. Contenedor web - Portal de proyectos multimedia","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/proyectos.comunicaciondigital.es\/en\/2-contenedor-web\/","og_locale":"en_GB","og_type":"article","og_title":"2. Contenedor web - Portal de proyectos multimedia","og_description":"Contenedor web \u00bfPara qu\u00e9 un contenedor web? Para la elaboraci\u00f3n del reportaje o informe digital necesitamos una aplicaci\u00f3n que nos permita desarrollar e integrar este. Se trata de utilizar una aplicaci\u00f3n web que nos facilite el proceso de \u201cunir\u201d en un mismo espacio todos nuestros contenidos multimedia del reportaje o informe. Actualmente existen numerosas aplicaciones&hellip; Continua leyendo 2. Contenedor web","og_url":"https:\/\/proyectos.comunicaciondigital.es\/en\/2-contenedor-web\/","og_site_name":"Portal de proyectos multimedia","article_published_time":"2017-08-10T06:42:20+00:00","article_modified_time":"2021-09-09T16:33:37+00:00","author":"Manuel Gertrudix Barrio","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/proyectos.comunicaciondigital.es\/2-contenedor-web\/#article","isPartOf":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/2-contenedor-web\/"},"author":{"name":"Manuel Gertrudix Barrio","@id":"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/4699e2d8a8c19b218ae2f96940a3c337"},"headline":"2. Contenedor web","datePublished":"2017-08-10T06:42:20+00:00","dateModified":"2021-09-09T16:33:37+00:00","mainEntityOfPage":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/2-contenedor-web\/"},"wordCount":1499,"image":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/2-contenedor-web\/#primaryimage"},"thumbnailUrl":"","articleSection":["banco-conocimiento"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/proyectos.comunicaciondigital.es\/2-contenedor-web\/","url":"https:\/\/proyectos.comunicaciondigital.es\/2-contenedor-web\/","name":"2. Contenedor web - Portal de proyectos multimedia","isPartOf":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/2-contenedor-web\/#primaryimage"},"image":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/2-contenedor-web\/#primaryimage"},"thumbnailUrl":"","datePublished":"2017-08-10T06:42:20+00:00","dateModified":"2021-09-09T16:33:37+00:00","author":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/4699e2d8a8c19b218ae2f96940a3c337"},"breadcrumb":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/2-contenedor-web\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/proyectos.comunicaciondigital.es\/2-contenedor-web\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/proyectos.comunicaciondigital.es\/2-contenedor-web\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/proyectos.comunicaciondigital.es\/2-contenedor-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/proyectos.comunicaciondigital.es\/"},{"@type":"ListItem","position":2,"name":"2. Contenedor web"}]},{"@type":"WebSite","@id":"https:\/\/proyectos.comunicaciondigital.es\/#website","url":"https:\/\/proyectos.comunicaciondigital.es\/","name":"Portal de proyectos multimedia","description":"Grupo Ciberimaginario","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/proyectos.comunicaciondigital.es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/4699e2d8a8c19b218ae2f96940a3c337","name":"Manuel Gertrudix Barrio","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1779727757","url":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1779727757","contentUrl":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1779727757","caption":"Manuel Gertrudix Barrio"},"url":"https:\/\/proyectos.comunicaciondigital.es\/en\/author\/gertrudix\/"}]}},"_links":{"self":[{"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts\/76237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/comments?post=76237"}],"version-history":[{"count":2,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts\/76237\/revisions"}],"predecessor-version":[{"id":76983,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts\/76237\/revisions\/76983"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/media?parent=76237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/categories?post=76237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/tags?post=76237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}