SlideShare una empresa de Scribd logo
Drupal.cat | 30/03/2017
Composición de páginas
complejas con Paragraphs
Índice
1. ¿Quién soy?
2. ¿Qué son Paragraphs?
3. ¿Cuando debo usar Paragraphs?
4. ¿Porqué usar Paragraphs?
5. ¿Qué pasa cuando uso Paragraphs?
6. ¿Cómo puedo usar Paragraphs?
Drupal.cat | 30/03/2017
1.¿Quién soy?
Drupal.cat | 30/03/2017
Siddharta Navarro
SIDDHARTA NAVARRO
Co-fundador de Atenea tech
Ingeniero informático por la
FIB - UPC
CONTACTO
93 551 06 86
siddharta@ateneatech.com
SÍGUEME
@sidddi
linkedin.com/in/siddhartanavarro
Drupal.cat | 30/03/2017
Drupal.cat | 30/03/2017
Drupal.cat | 30/03/2017
2.¿Qué son Paragraphs?
Drupal.cat | 30/03/2017
Definición de Paragraphs
Drupal.cat | 30/03/2017
Definición de Paragraphs
Drupal.cat | 30/03/2017
Nodo
Título
Contenido
Contenido
Campo
Campo
Campo
Definición de Paragraphs
Drupal.cat | 30/03/2017
Contenido Paragraphs
Paragraph de tipo 1
Paragraph de tipo 2
...
Campo
Campo referencia a Paragraph
Campo
Definición de Paragraphs
Drupal.cat | 30/03/2017
Paragraphs Paragraph bundle
Campo
Campo
...
Paragraph de tipo 1
Paragraph de tipo 2
...
Características de Paragraphs
Drupal.cat | 30/03/2017
Permite al editor crear estructuras diferentes en cada página
Permite crear estructuras reutilizables entre páginas
Similar a Field Collections, pero puedes elegir entre varios componentes para
un mismo campo
Los componentes de Paragraphs son reordenables
Hablemos del nombre
Drupal.cat | 30/03/2017
3.¿Cómo puedo usar Paragraphs?
Drupal.cat | 30/03/2017
Usar Paragraphs
Drupal.cat | 30/03/2017
Componentes (Paragraph bundle)
son Entidades
0
Creamos un nuevo Componente
Usar Paragraphs
Drupal.cat | 30/03/2017
1
Usar Paragraphs
Drupal.cat | 30/03/2017
Añadimos los campos
2
Usar Paragraphs
Drupal.cat | 30/03/2017
Añadimos un campo referencia a Paragraph
en el tipo de contenido
3
Usar Paragraphs
Drupal.cat | 30/03/2017
Seleccionamos los componentes de Paragraph
disponibles para ese Tipo de contenido
4
Usar Paragraphs
Drupal.cat | 30/03/2017
¡Listo para usar!
5
4.¿Cuando debo usar Paragraphs?
Drupal.cat | 30/03/2017
Disposición de
elementos complejos
Drupal.cat | 30/03/2017
Disposición de
elementos complejos
Drupal.cat | 30/03/2017
Disposición de
elementos complejos
Drupal.cat | 30/03/2017
Layouts flexibles
Drupal.cat | 30/03/2017
Layouts flexibles
Drupal.cat | 30/03/2017
Layouts flexibles
Drupal.cat | 30/03/2017
5.¿Porqué debo usar Paragraphs?
Drupal.cat | 30/03/2017
Diseños complejos
Drupal.cat | 30/03/2017
Responsive
Drupal.cat | 30/03/2017
Edición fácil
Drupal.cat | 30/03/2017
Damos poder al editor
Drupal.cat | 30/03/2017
6.¿Qué pasa cuando uso Paragraphs?
Drupal.cat | 30/03/2017
Desaparecen los Tipos de contenido
Drupal.cat | 30/03/2017
Con un solo Tipo de contenido y una colección grande de Paragraphs podemos
cubrir todas las necesidades de una página
Depende del tipo de web
Hay que buscar un equilibrio entre la “Tipotización” y la “Paragraphización”
Cambia la forma en la que los diseñadores piensan
Drupal.cat | 30/03/2017
Damos muchas más opciones, sobretodo en las páginas
de contenido.
Drupal se convierte en un actor importante para webs
gráficas.
Rompemos los diseños “típico” y “antiguos” de los
CMSs
Liberamos el WYSIWYG
Drupal.cat | 30/03/2017
Con Paragraphs no es necesario dar opciones complejas a los textos en
WYSIWYG.
Hacemos mucho más fácil la tarea de los editores.
Open your mind
Drupal.cat | 30/03/2017
Piensa como un diseñador
Drupal.cat | 30/03/2017
Container
Container
100%
fondo gris
Título
Imagen +
Título +
Texto
Recursos
Drupal.cat | 30/03/2017
Video-tutorial de Paragraphs: http://talkingdrupal.com/123
Demo de Paragraphs: http://paragraphs.site-showcase.com
Distribución Drupal con Paragraphs (D8): https://www.drupal.org/project/leadgen
Conjunto de Paragraphs (D7): https://www.drupal.org/project/paragraphs_pack
¡Gracias!
SIDDHARTA NAVARRO
Co-fundador de Atenea tech
Ingeniero informático por la
FIB - UPC
CONTACTO
93 551 06 86
siddharta@ateneatech.com
SÍGUEME
@sidddi
linkedin.com/in/siddhartanavarro
Drupal.cat | 30/03/2017

Más contenido relacionado

Más de Atenea tech

Entidades en drupal 8
Entidades en drupal 8Entidades en drupal 8
Entidades en drupal 8
Atenea tech
 
Cultura empresarial, Open Source y Drupal
Cultura empresarial, Open Source y DrupalCultura empresarial, Open Source y Drupal
Cultura empresarial, Open Source y Drupal
Atenea tech
 
Formularios en Drupal 8
Formularios en Drupal 8Formularios en Drupal 8
Formularios en Drupal 8
Atenea tech
 
Introduciendo drupal 8
Introduciendo drupal 8Introduciendo drupal 8
Introduciendo drupal 8
Atenea tech
 
Contratos y presupuestos en proyectos Drupal - Drupal Camp Spain 2014
Contratos y presupuestos en proyectos Drupal - Drupal Camp Spain 2014Contratos y presupuestos en proyectos Drupal - Drupal Camp Spain 2014
Contratos y presupuestos en proyectos Drupal - Drupal Camp Spain 2014
Atenea tech
 
Éxitos y desastrosas experiencias con el agilismo en la gestión de proyectos ...
Éxitos y desastrosas experiencias con el agilismo en la gestión de proyectos ...Éxitos y desastrosas experiencias con el agilismo en la gestión de proyectos ...
Éxitos y desastrosas experiencias con el agilismo en la gestión de proyectos ...
Atenea tech
 
Drupal: Funcionalitats i mòduls
Drupal: Funcionalitats i mòdulsDrupal: Funcionalitats i mòduls
Drupal: Funcionalitats i mòduls
Atenea tech
 
Drupal: Posada en Funcionament
Drupal: Posada en FuncionamentDrupal: Posada en Funcionament
Drupal: Posada en Funcionament
Atenea tech
 
Introducció a Drupal
Introducció a DrupalIntroducció a Drupal
Introducció a DrupalAtenea tech
 
Context vs panels
Context vs panelsContext vs panels
Context vs panels
Atenea tech
 
Presentación sobre Display Suite en el Drupal Day Valencia 2012
Presentación sobre Display Suite en el Drupal Day Valencia 2012Presentación sobre Display Suite en el Drupal Day Valencia 2012
Presentación sobre Display Suite en el Drupal Day Valencia 2012
Atenea tech
 
Xarxes socials
Xarxes socialsXarxes socials
Xarxes socials
Atenea tech
 
Display suite - Drupal.cat
Display suite - Drupal.catDisplay suite - Drupal.cat
Display suite - Drupal.cat
Atenea tech
 
AEPap web en Drupal desenvolupada per Atenea tech
AEPap web en Drupal desenvolupada per Atenea techAEPap web en Drupal desenvolupada per Atenea tech
AEPap web en Drupal desenvolupada per Atenea techAtenea tech
 
Fundacio Cim Drupal Camp 2010
Fundacio Cim   Drupal Camp 2010Fundacio Cim   Drupal Camp 2010
Fundacio Cim Drupal Camp 2010
Atenea tech
 
Drush Make & Feature Server - Drupal Camp Spain 2010
Drush Make & Feature Server - Drupal Camp Spain 2010Drush Make & Feature Server - Drupal Camp Spain 2010
Drush Make & Feature Server - Drupal Camp Spain 2010
Atenea tech
 
Open Atrium para la gestión de proyectos - Drupal Camp 2010
Open Atrium para la gestión de proyectos - Drupal Camp 2010Open Atrium para la gestión de proyectos - Drupal Camp 2010
Open Atrium para la gestión de proyectos - Drupal Camp 2010
Atenea tech
 
Presentación de Atenea tech en Innovacamp Mediterranea
Presentación de Atenea tech en Innovacamp MediterraneaPresentación de Atenea tech en Innovacamp Mediterranea
Presentación de Atenea tech en Innovacamp Mediterranea
Atenea tech
 
Presentació Web de Sant Climent de Llobregat a Drupal.cat
Presentació Web de Sant Climent de Llobregat a Drupal.catPresentació Web de Sant Climent de Llobregat a Drupal.cat
Presentació Web de Sant Climent de Llobregat a Drupal.cat
Atenea tech
 
Drupal
DrupalDrupal
Drupal
Atenea tech
 

Más de Atenea tech (20)

Entidades en drupal 8
Entidades en drupal 8Entidades en drupal 8
Entidades en drupal 8
 
Cultura empresarial, Open Source y Drupal
Cultura empresarial, Open Source y DrupalCultura empresarial, Open Source y Drupal
Cultura empresarial, Open Source y Drupal
 
Formularios en Drupal 8
Formularios en Drupal 8Formularios en Drupal 8
Formularios en Drupal 8
 
Introduciendo drupal 8
Introduciendo drupal 8Introduciendo drupal 8
Introduciendo drupal 8
 
Contratos y presupuestos en proyectos Drupal - Drupal Camp Spain 2014
Contratos y presupuestos en proyectos Drupal - Drupal Camp Spain 2014Contratos y presupuestos en proyectos Drupal - Drupal Camp Spain 2014
Contratos y presupuestos en proyectos Drupal - Drupal Camp Spain 2014
 
Éxitos y desastrosas experiencias con el agilismo en la gestión de proyectos ...
Éxitos y desastrosas experiencias con el agilismo en la gestión de proyectos ...Éxitos y desastrosas experiencias con el agilismo en la gestión de proyectos ...
Éxitos y desastrosas experiencias con el agilismo en la gestión de proyectos ...
 
Drupal: Funcionalitats i mòduls
Drupal: Funcionalitats i mòdulsDrupal: Funcionalitats i mòduls
Drupal: Funcionalitats i mòduls
 
Drupal: Posada en Funcionament
Drupal: Posada en FuncionamentDrupal: Posada en Funcionament
Drupal: Posada en Funcionament
 
Introducció a Drupal
Introducció a DrupalIntroducció a Drupal
Introducció a Drupal
 
Context vs panels
Context vs panelsContext vs panels
Context vs panels
 
Presentación sobre Display Suite en el Drupal Day Valencia 2012
Presentación sobre Display Suite en el Drupal Day Valencia 2012Presentación sobre Display Suite en el Drupal Day Valencia 2012
Presentación sobre Display Suite en el Drupal Day Valencia 2012
 
Xarxes socials
Xarxes socialsXarxes socials
Xarxes socials
 
Display suite - Drupal.cat
Display suite - Drupal.catDisplay suite - Drupal.cat
Display suite - Drupal.cat
 
AEPap web en Drupal desenvolupada per Atenea tech
AEPap web en Drupal desenvolupada per Atenea techAEPap web en Drupal desenvolupada per Atenea tech
AEPap web en Drupal desenvolupada per Atenea tech
 
Fundacio Cim Drupal Camp 2010
Fundacio Cim   Drupal Camp 2010Fundacio Cim   Drupal Camp 2010
Fundacio Cim Drupal Camp 2010
 
Drush Make & Feature Server - Drupal Camp Spain 2010
Drush Make & Feature Server - Drupal Camp Spain 2010Drush Make & Feature Server - Drupal Camp Spain 2010
Drush Make & Feature Server - Drupal Camp Spain 2010
 
Open Atrium para la gestión de proyectos - Drupal Camp 2010
Open Atrium para la gestión de proyectos - Drupal Camp 2010Open Atrium para la gestión de proyectos - Drupal Camp 2010
Open Atrium para la gestión de proyectos - Drupal Camp 2010
 
Presentación de Atenea tech en Innovacamp Mediterranea
Presentación de Atenea tech en Innovacamp MediterraneaPresentación de Atenea tech en Innovacamp Mediterranea
Presentación de Atenea tech en Innovacamp Mediterranea
 
Presentació Web de Sant Climent de Llobregat a Drupal.cat
Presentació Web de Sant Climent de Llobregat a Drupal.catPresentació Web de Sant Climent de Llobregat a Drupal.cat
Presentació Web de Sant Climent de Llobregat a Drupal.cat
 
Drupal
DrupalDrupal
Drupal
 

Último

FICHA DE EDUCACIÓN RELIGIOSA 17 DE CTUBRE LA oracion.docx
FICHA DE EDUCACIÓN RELIGIOSA  17 DE CTUBRE LA  oracion.docxFICHA DE EDUCACIÓN RELIGIOSA  17 DE CTUBRE LA  oracion.docx
FICHA DE EDUCACIÓN RELIGIOSA 17 DE CTUBRE LA oracion.docx
EmilyEsmeraldaQuispe
 
Diapositiva Herramientas Web, Tema Web 3.0.pptx
Diapositiva Herramientas Web, Tema Web 3.0.pptxDiapositiva Herramientas Web, Tema Web 3.0.pptx
Diapositiva Herramientas Web, Tema Web 3.0.pptx
erick502105
 
5 CRITERIOS PARA EL DISEÑO DE DIAGRAMAS DE FLUJO.pptx
5 CRITERIOS PARA EL DISEÑO DE DIAGRAMAS DE FLUJO.pptx5 CRITERIOS PARA EL DISEÑO DE DIAGRAMAS DE FLUJO.pptx
5 CRITERIOS PARA EL DISEÑO DE DIAGRAMAS DE FLUJO.pptx
AlexanderCR12
 
SLIDESHARE, qué es, ventajas y desventajas
SLIDESHARE, qué es, ventajas y desventajasSLIDESHARE, qué es, ventajas y desventajas
SLIDESHARE, qué es, ventajas y desventajas
ruthechepurizaca
 
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
NoraRoberts5
 
Oración a Pomba Gira María Padilha .docx
Oración a Pomba Gira María Padilha .docxOración a Pomba Gira María Padilha .docx
Oración a Pomba Gira María Padilha .docx
LuisAlbertoCordovaBa
 
APLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptxAPLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptx
cpadua713
 
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidadESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
jorgejhonatanaltamir1
 
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNETCOMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
Kevin Aguilar Garcia
 
SEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
SEGURIDAD INFORMATICA- Ariana Vicente CruzattSEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
SEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
vicenteariana54
 
Clases de Informática primaria para niños de colegios católicos
Clases de Informática primaria para niños de colegios católicosClases de Informática primaria para niños de colegios católicos
Clases de Informática primaria para niños de colegios católicos
mcavero2019
 

Último (11)

FICHA DE EDUCACIÓN RELIGIOSA 17 DE CTUBRE LA oracion.docx
FICHA DE EDUCACIÓN RELIGIOSA  17 DE CTUBRE LA  oracion.docxFICHA DE EDUCACIÓN RELIGIOSA  17 DE CTUBRE LA  oracion.docx
FICHA DE EDUCACIÓN RELIGIOSA 17 DE CTUBRE LA oracion.docx
 
Diapositiva Herramientas Web, Tema Web 3.0.pptx
Diapositiva Herramientas Web, Tema Web 3.0.pptxDiapositiva Herramientas Web, Tema Web 3.0.pptx
Diapositiva Herramientas Web, Tema Web 3.0.pptx
 
5 CRITERIOS PARA EL DISEÑO DE DIAGRAMAS DE FLUJO.pptx
5 CRITERIOS PARA EL DISEÑO DE DIAGRAMAS DE FLUJO.pptx5 CRITERIOS PARA EL DISEÑO DE DIAGRAMAS DE FLUJO.pptx
5 CRITERIOS PARA EL DISEÑO DE DIAGRAMAS DE FLUJO.pptx
 
SLIDESHARE, qué es, ventajas y desventajas
SLIDESHARE, qué es, ventajas y desventajasSLIDESHARE, qué es, ventajas y desventajas
SLIDESHARE, qué es, ventajas y desventajas
 
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
 
Oración a Pomba Gira María Padilha .docx
Oración a Pomba Gira María Padilha .docxOración a Pomba Gira María Padilha .docx
Oración a Pomba Gira María Padilha .docx
 
APLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptxAPLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptx
 
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidadESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
 
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNETCOMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
 
SEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
SEGURIDAD INFORMATICA- Ariana Vicente CruzattSEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
SEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
 
Clases de Informática primaria para niños de colegios católicos
Clases de Informática primaria para niños de colegios católicosClases de Informática primaria para niños de colegios católicos
Clases de Informática primaria para niños de colegios católicos
 

Composición de páginas complejas con paragraphs

Notas del editor

  1. Módulo de Drupal Permite crear estructuras que se repiten en los tipos de contenido Permite al editor añadir contenido basado en componentes
  2. Le damos al editor poder para realizar su web como quiera