Madrid WordPress Meetup

 

Patrocinadores

  • SiteGround
  • Campus Madrid

Page Builders

¿ángeles o demonios?

DISCLAIMER

VOY A GENERALIZAR

Esto no va a ser ni un si, siempre ni un no, nunca

Pablo López

Pablo López

  • @desarrollowp

    No doy mucho la tabarra, ¡lo prometo! Sólo twitteo sobre WordPress y retwitteo noticias de vez en cuando.
  • https://desarrollowp.com

    Blog donde trato de escribir semanalmente sobre trucos, tutoriales, guías, snippets, consejos, noticias, entrevistas y novedades en el mundo WordPress.
  • En la comunidad...

    Ayudo a organizar el grupo de meetup de Madrid WordPress y la WordCamp Madrid
  • WordPress developer en UNIR

    Trabajo con WordPress siempre pensando en la seguridad, el rendimiento, la robustez y la escalabilidad. Con la mente abierta, siempre dispuesto a aprender y tratando de hacer cada proyecto un poco mejor que el anterior.

UN POCO DE HISTORIA

Presupuesto

Presupuesto 2007

  • Dirección del proyecto

    Llevar la cuenta, reuniones, toma de requisitos, estrategia, planificación, asignación de recursos...
  • Creatividad y Diseño

    Consultoría creativa, dirección creativa, identidad, creación de diseños y artes finales...
  • Desarrollo Técnico

    Maquetación y desarrollo tanto front como back (HTML, CSS, JavaScript, MySQL, ASP/PHP...)

Empiezan a aparecer herramientas que nos facilitan la vida

Aparecen los Page Builders

Juan Palomo

Yo me lo guiso, yo me lo como

Aunque se mantiene la especialización, con el paso del tiempo y con la crisis golpeando todos los sectores:

  • Los diseñadores empiezan a "desarrollar"
  • Los desarrolladores empiezan a "diseñar"

 

Para proyectos pequeños no hacen falta distintos perfiles. Unos se pueden apañar sin los otros

Ventajas

Permiten construir páginas web de una manera fácil, rápida y sin la necesidad de dominar HTML, CSS ó PHP. Cualquiera puede hacer una web

  • Inversión económica reducida

    Puedes encontrarlos en una horquilla entre 35 y 170 euros
  • Fáciles de manejar

    Dinámicos, intuitivos y visuales. Interface drag & drop
  • Multitud de configuraciones

    Colores, imágenes de fondo, fuentes, filas, columnas, botones...
  • Variedad de Módulos

    Contadores, formularios, galerías, mapas, sliders, pestañas, testimonios...
  • Sin una línea de código

    No necesitas conocimientos de PHP para construir una página web
  • Menor coste total del proyecto

    Crear contenido lleva menos tiempo, lo que repercute en un coste menor

Inversión económica reducida

Puedes encontrarlos en una horquilla entre 35 y 170 euros

Depende del Page Builder, esta inversión te da derecho a:

  • Soporte especializado
  • Características avanzadas
  • Nuevas actualizaciones
  • "Licencia" de uso para 1, varios o ilimitados sitios, etc...
Inversión económica

Fáciles de manejar

Dinámicos, intuitivos y visuales. Interface drag & drop

La curva de aprendizaje es prácticamente nula:

  • Dispones de un lienzo donde vas creando filas
  • Cada fila puede tener una o varias columnas
  • En cada columna insertas un módulo
  • Cada módulo tiene su configuración específica
Divi Builder

Multitud de configuraciones

Suelen disponer de un panel de configuraciones generales

Se contemplan multitud de ajustes tales como:

  • Logos
  • Paleta de colores
  • URL redes sociales
  • Efectos de elementos
  • Navegación
Divi Config

Variedad de Módulos

Los módulos son elementos que se arrastran a un área del lienzo

Hay muchos módulos diferentes:

  • Columnas
  • Botones
  • Separadores
  • Google Maps
  • Acordeones
  • Pestañas...
Elementor

Sin una línea de código

La interfaz y las configuraciones no requieren saber de maquetación y/o programación

Aunque siempre viene bien, no es estrictamente necesario conocimientos de lenguajes como HTML, CSS, JavaScript ó PHP para construir una página web

Reducen el coste total del proyecto

Crear contenido lleva menos tiempo, lo que repercute en un coste menor del proyecto

Web corporativas, landing pages, web personales... (sitios de mero contenido), con un builder pueden montarse en cuestión de días.

Los clientes cuando reciben el presupuesto, suelen mostrarse contentos

Inconvenientes

  • No existe una estandarización

    Cada builder hace las cosas a su manera
  • Dependencia total: efecto Lock-in

    Una vez escogido no hay vuelta atrás, quedarás atadao a él
  • Se fía todo a la base de datos

    Control de revisiones vs Control de versiones
  • Desaparece el modelo de datos

    Todo lo que se crea va al mismo saco: el campo post_content
  • Rendimiento ¿pobre?

    Las webs creadas con page builders son lentas, ¿Mito o realidad?
  • Resultados ¿profesionales?

    Webs como churros. Aparecen las webs por 300€ o menos

¿PERO QUÉ ME ESTAS CONTAINER?

No existe una estandarización

Existen tantas maneras de hacer las cosas como builders hay, cada uno sigue su propio camino

Al no existir unas reglas, cada page builder funciona a su manera. Cada uno utiliza sus propios grids, clases, módulos, shortcodes...

No hay reglas

What the page builder industry is severely lacking is standardization. There is zero standard to how page builders should work. This shouldn’t surprise anyone as this is exactly what happens in every ecosystem that experiences a gold rush...

Pippin Williamson (enlace)

 

De lo que carece gravemente la industria de page builders es la estandarización. No hay ningún estándar sobre cómo los page builders deberían funcionar. Esto no debe sorprender a nadie, ya que esto es exactamente lo que sucede en cada ecosistema que experimenta una fiebre del oro...

Efecto Lock-in

Dependencia absoluta. Si lo desactivas encontrarás algo como esto:

[et_pb_section admin_label="section"][et_pb_row admin_label="row"][et_pb_column type="4_4"][et_pb_image admin_label="Imagen" src="http://wptest.dev/wp-content/uploads/2017/08/Madrid1.jpg" show_in_lightbox="off" url_new_window="off" use_overlay="off" animation="left" sticky="off" align="left" force_fullwidth="off" always_center_on_mobile="on" use_border_color="off" border_color="#ffffff" border_style="solid" /][/et_pb_column][/et_pb_row][et_pb_row admin_label="Fila"][et_pb_column type="1_3"][et_pb_circle_counter admin_label="Contadores circulares" title="contador 1" number="56" percent_sign="on" background_layout="light" bar_bg_color="#7EBEC5" /][/et_pb_column][et_pb_column type="1_3"][et_pb_circle_counter admin_label="Contadores circulares" title="contador 2" number="89" percent_sign="on" background_layout="light" bar_bg_color="#7EBEC5" /][/et_pb_column][et_pb_column type="1_3"][et_pb_counters admin_label="Contadores de barra" background_layout="light" background_color="#dddddd" bar_bg_color="#7EBEC5" use_percentages="on" border_radius="0" use_border_color="off" border_color="#ffffff" border_style="solid"] [et_pb_counter percent="52"] contador 3-1 [/et_pb_counter][et_pb_counter percent="78"] contador 3-2 [/et_pb_counter] [/et_pb_counters][/et_pb_column][/et_pb_row]

Migrar algo como esto en un futuro es la muerte a pellizcos

lock in

the_content()
descripción gráfica

Se fía casi todo a la base de datos

Control de revisiones vs Control de versiones

  • ¿Entornos local / desarrollo / staging / producción?
  • ¿SVN / GIT?
  • ¿Despliegues?
  • ¿Integración continua?
  • ¿Test unitarios y de aceptación?
Control de revisiones vs Control de versiones

Desaparece el modelo de datos

Todo lo que se crea va al campo post_content

Todo lo que se construye dinámicamente a través del builder se graba en un sólo campo de la base de datos, haciendo uso de shortcodes que luego se parsean en la parte pública

  • OJO, los shortcodes aparecen en las búsquedas
  • Los custom fields caen en el olvido
  • OJO, pueden aparecer los shortcodes en descriptions, open graphs...

Rendimiento ¿pobre?

Históricamente etiquetados: lentitud, consumo de recursos, consultas a BBDD, tiempos de carga...

Consultas BBDD Assets CSS Assets JS
Elementor 55 q 140,4 KB 182,5 KB
DIVI 37 q 465,7 KB 275,3 KB
Visual Composer 25 q 537,9 KB 127,2 KB

No es tanto como la leyenda dice, pero si es cierto que ejecutan más consultas a BBDD y los recursos estáticos (CSS y JS) suelen ser pesados

Es necesario una gran estrategia de WPO en todos los sentidos para que nuestro sitio esté optimizado.

Resultados ¿profesionales?

¡DEPENDE!

Invierte algo de tiempo en pensar si son la mejor solución a tu proyecto, y piensa en el futuro

Se pueden construir páginas molonas, llamativas, atractivas, con imágenes que hacen flush, textos que hace shwarp, iconos que dan 3 vueltas de campana y un tirabuzón...

No se puede generalizar, cada decisión depende de muchos factores, pero probablemente no sean la mejor opción para proyectos grandes o donde sea necesaria una arquitectura o modelo de datos robusto.

Aunque se pueden personalizar al extremo, la realidad es que al final casi todas las webs construidas se parecen mucho unas entre otras, se pierde la exclusividad

Argumentos como la rapidez y la facilidad implican una dedicación pobre a un proyecto. Se hacen webs como churros por 300 €

Conclusiones

  • Ideales para landings, páginas corporativas, campañas a corto plazo...
  • Ideales para proyectos con bajo presupuesto
  • Hay que tener mucho cuidado con ellos y optimizar su uso para obtener buenos resultados
  • Huir de ellos para proyectos grandes o donde se necesite una estructura o arquitectura de datos sólida
¿ángeles o demonios?

¿ Gutenberg ?