De HTML a WordPress: Mi Sistema para Crear Bloques Reutilizables

Posted on by Tony Lopez

Durante muchos años, desarrollar páginas en WordPress significaba crear templates separados para cada sección del website o depender completamente de builders visuales como Elementor. Pero hoy existen maneras mucho más flexibles, escalables y costo efectivas de construir proyectos modernos.

En este video y conversación estratégica, comparto cómo estoy utilizando Pinegrow, Bootstrap, HTML y herramientas de AI para crear una plantilla completamente personalizada basada en bloques reutilizables. La idea no es simplemente “hacer páginas”, sino construir un sistema modular donde cada componente funcione como piezas de LEGO que luego permiten montar cualquier diseño dentro de WordPress.

Más allá del código, este enfoque cambia completamente la forma de trabajar proyectos web. Reduce dependencia de suscripciones, facilita mantenimiento a largo plazo y permite automatizar procesos que antes requerían mucho trabajo manual.

Creando Bloques Reutilizables en WordPress

El video comienza mostrando el desarrollo de una plantilla customizada para WordPress utilizando Pinegrow. El enfoque principal gira alrededor de crear bloques reutilizables, específicamente banners, áreas de texto e iconos que luego pueden ensamblarse para construir páginas completas.

La comparación utilizada es muy interesante: los bloques funcionan como piezas de LEGO. En lugar de diseñar una plantilla distinta para cada página —como “Nosotros”, “Contacto” o “Servicios”— se crean componentes independientes que luego pueden reutilizarse en cualquier parte del website.

Cada bloque puede personalizarse individualmente:

  • Cambiar textos
  • Modificar colores
  • Subir imágenes
  • Reemplazar iconos
  • Ajustar estilos

Esto permite construir páginas dinámicamente sin rehacer el diseño cada vez.

Pinegrow, HTML y la Libertad del Desarrollo Custom

Uno de los puntos más importantes del video es la filosofía detrás del desarrollo custom.

En vez de depender completamente de page builders tradicionales, el flujo de trabajo se basa en HTML, Bootstrap y Pinegrow como capa de integración hacia WordPress.

Pinegrow convierte los elementos visuales y el código HTML en bloques compatibles con WordPress. Internamente, WordPress guarda esos bloques como fragmentos HTML dentro de la base de datos.

El creador explica que le gusta tener control directo sobre:

  • La estructura
  • Las clases CSS
  • El branding
  • La lógica visual

Por eso prefiere Bootstrap 5, framework que conoce desde hace muchos años, aunque menciona que también podría trabajarse con Tailwind.

Branding, Restricciones Inteligentes y Flexibilidad

Aquí se habla de algo que muchos desarrolladores experimentados entienden: dar demasiada libertad al cliente puede terminar dañando el diseño.

Aunque técnicamente se puede permitir que el usuario cambie cualquier color mediante un color picker, esto puede romper el branding del proyecto.

Por eso el enfoque utilizado mantiene:

  • Flexibilidad controlada
  • Libertad dentro de ciertos límites
  • Estructuras visuales consistentes
  • Identidad de marca protegida

La idea es construir sistemas donde el cliente pueda editar contenido sin destruir la coherencia visual del website.

AI, Automatización y Flujo de Trabajo Moderno

El transcript entra luego en uno de los temas más interesantes: la integración de AI dentro del proceso de desarrollo.

El AI se utiliza principalmente para:

  • Generar estructuras HTML
  • Crear ideas visuales
  • Agilizar prototipos
  • Ayudar con código

Pero el desarrollador aclara algo importante: todavía prefiere construir manualmente muchas partes del proyecto porque busca un nivel de control y calidad más artesanal.

El flujo actual incluye:

  1. Generar estructura con AI
  2. Refinarla en Bootstrap Studio
  3. Convertirla en bloques HTML
  4. Pasarla a Pinegrow
  5. Exportarla como plantilla WordPress

Cada exportación genera nuevas versiones del template, permitiendo trabajar con versionado similar a software profesional.

También menciona cómo esto podría conectarse con GitHub para automatizar aún más el flujo de trabajo.

La Ventaja de Evitar Dependencias de Suscripciones

Uno de los argumentos más fuertes del video es el aspecto costo efectivo.

Se compara este método con el ecosistema de plugins y suscripciones típicas de builders visuales:

  • Addons
  • Extensiones premium
  • Licencias anuales
  • Renovaciones constantes

El problema no es solamente económico, sino también la experiencia con el cliente.

Muchas veces el cliente no entiende por qué debe seguir pagando múltiples herramientas después de terminado el proyecto.

En cambio, al crear un sistema custom:

  • El proyecto pertenece más al cliente
  • Hay menos dependencias externas
  • Menos riesgo de incompatibilidades
  • Mayor estabilidad a largo plazo

 

WordPress Dinámico, AI y Automatización de Contenido

La parte final entra en una visión más avanzada del futuro del desarrollo web.

Se explica cómo los posts dinámicos de WordPress deberían separarse completamente del diseño visual. Cuando esto se hace correctamente:

  • Un post puede alimentar múltiples áreas del website
  • El contenido se replica automáticamente
  • Todo se conecta dinámicamente

Luego se conecta esta idea con automatización utilizando herramientas como:

  • AI
  • n8n
  • Publicación automática
  • Integración con redes sociales

La visión final es construir sistemas donde:

  • Se publica contenido una sola vez
  • El website se actualiza automáticamente
  • Las redes sociales se sincronizan
  • Gran parte del trabajo administrativo desaparece

El objetivo ya no es simplemente crear páginas, sino construir ecosistemas automatizados y sostenibles.

Este video no solamente habla sobre Pinegrow o WordPress. Realmente presenta una filosofía moderna de desarrollo web basada en modularidad, automatización y control creativo.

El enfoque combina:

  • HTML artesanal
  • AI como asistente
  • WordPress dinámico
  • Bloques reutilizables
  • Automatización de contenido
  • Menos dependencia de terceros

En lugar de construir websites rígidos y difíciles de mantener, la meta es crear sistemas escalables que puedan evolucionar durante años sin depender constantemente de suscripciones, plugins externos o reconstrucciones completas.

Aprende a Programar tu Página Web desde Cero

Posted on by Tony Lopez

Descubre el fascinante mundo de la programación web desde cero con nuestro curso. Domina las habilidades fundamentales para crear tu propia página web paso a paso. Desde conceptos básicos hasta técnicas avanzadas, este curso te guiará en el viaje emocionante de convertirte en un programador web autodidacta.

¡Comienza tu aventura digital hoy y dale vida a tus ideas en la web!

Cambiando La Imagen del Header por un Video – Demo

Posted on by Tony Lopez

Cambiar la imagen del encabezado por un video en desarrollo web significa reemplazar la imagen estática en la parte superior de una página web con un video que se reproduce automáticamente. En lugar de ver solo una imagen fija, los visitantes de la página verán un video en esa área. Los beneficios de esta modificación son varios.

En primer lugar, añade dinamismo y atractivo visual a la página, capturando la atención de los usuarios de una manera más impactante que una imagen estática. El video puede transmitir información de manera más efectiva, contar una historia o simplemente crear una experiencia más atractiva para quienes visitan el sitio web.

Además, el uso de videos en el encabezado puede mejorar la retención de usuarios, ya que es más probable que permanezcan en la página para ver el contenido en movimiento. Esto puede ser especialmente útil para destacar productos, promociones o simplemente para crear una primera impresión memorable.

Herramienta Para Manejar Gifs Animados

Posted on by Tony Lopez

Gifs Media Uploader

Puedes utilizar este proyecto para crear tu sitio para manejar gifs.

La página index.php mostrará todos los gifs que han sido subidos a tu página.

La página media.php mostrará la imagen seleccionada con los campos llenos.

  • El campo de imagen muestra la ruta del gif.

  • El campo de la página muestra la ruta de la página media.php y la imagen gif seleccionada.

  • El campo download puedes descargar la imagen a tu computadora.

Si deseas subir un gif animado, deberás hacer Log In.  Los accesos están en el código.

  • Email: admin@domain.com

  • Password: admin

Una vez tengas acceso, serás redireccionado a la página anterior.

Ahora verás una opción en el menú llamada Upload que te llevará a la página para subir las imágenes. Busca el archivo y presiona el botón de Upload.

Luego de que la foto suba, serás redireccionado a la página de media.php con la imagen subida.

La página _process.php es donde todo el proceso es realizado.

La página de login.php y logoff.php crean una crean y destruyen la variable de sesión para que tengas acceso a uploader.php y _process.php

La plataforma que se utilizó para hacer el html + css se encuentra en getBootstrap.com. El lenguaje de servidor es PHP 5.4 o mayor.

 

Puedes descargar el código desde: https://github.com/lopezpagan/Gifs-Media-Uploader

Ventajas y Desventajas de una Página Web «One Page»

Posted on by Tony Lopez

Actualmente la tendencia es desarrollar sitios web utilizando el formato de una página «one page». Debes tener en cuenta que aunque se vé muy bien, este formato no es para todo tipo de negocios.

A continuación algunos puntos que te indican las ventajas y desventajas de utilizar el formato de una página «one page» para desarrollar tu sitio web.

Ventajas:

  • Simplicidad: Lo más sencillo es ofrecer todos tus servicios al visitante en una sola página. No necesita tener ninguna experiencia poder para navegar la página y el aumento en el uso de los equipos móviles hacen que sea fácil de utilizar y adaptarse, ya que es el comportamiento más común de los usuarios.

  • Mobile-friendly: Estas páginas son más sencillas para adaptar a un equipo móvil, porque su diseño es prácticamente similar. La mayoría de las plantillas de una página son “responsive”, se adaptan a los teléfonos inteligentes, tabletas y computadoras de mesa.

  • Mayor Porcentaje de Conversión: No importa el tipo de métrica de conversión sea, notificaciones, registros, ventas o suscripciones esta página hará el trabajo. Lo usuarios estarán a un paso de comenzar el proceso y podrán deslizarse rápidamente de un paso a otro, sin ningún problema.

  • Fácil de Mantener: Es una página solamente que necesitas mantener, nada más.

Desventajas:

  • Escalabilidad: Cuando decidas comenzar a crear más contenido y artículos para un blog, no podrás hacerlo con un sitio web con el formato de una página «one page». Tendrás que hacer un rediseño completo de tu sitio web e implementar los elementos de la navegación con los estilos de las demás páginas.

  • Optimización de los Motores de Búsqueda (SEO): Los buscadores les encanta el contenido y el formato de una página «one page» no tiene mucho contenido. De hecho, tener todo el contenido en una sola página, le crea dificultad a los buscadores para encontrar las palabras claves “keywords”, las cuales ayudan a los motores de búsqueda a dirigir el tráfico.

    Podrás estar ubicado entre los primeros utilizando las palabras claves de tu negocio, pero no podrás aprovechar la oportunidad de que las personas puedan encontrarte a través de las frases y sub-tópicos que se encuentran en tu sitio web, y así, poder ofrecer más información relacionada a los temas de la página.

  • Compartir en las Redes Sociales: Es fácil compartir una página en las redes sociales, lo difícil, es que puedas compartir un contenido específico dentro de esta página, porque todos el contenido está dentro de una sola dirección de url. Aunque es posible, integrarse los botones para compartir secciones individuales dentro de una página, requiere más trabajo y la mayoría de las veces no es costo-eficiente.

  • Analíticos Significativos: Es más complicado analizar el rendimiento de un sitio web con el formato de una página «one page» que de un sitio con múltiples páginas. Con el formato de las múltiples páginas podrás ver las visitas con las conversiones y saber cuál de ellas está funcionando y cuál necesita un ajuste.

    Con el formato de una página, si el visitante llega y se va inmediatamente, no hay manera de saber por qué y reducir el por ciento de rebote “bounce rate”. Y es difícil refinar tu estrategia, cuando desconoces dónde estás fallando.

La Mejor Alternativa es Hacer un Híbrido

Si te gusta el formato de una página, pero piensas que tienes mucho contenido para hacer que funcione para tu negocio, puedes pensar en utilizar el formato de una página para la página de inicio “home” y hacer toda la conversión en esta página. Luego, creas distintas páginas para lo que resulta ser tu página de blog, preguntas frecuentes “faq”, información de la compañía, etc. Puedes utilizar las secciones de la página de inicio para dirigir el tráfico a las demás páginas.

Algunos ejemplos de compañías que están utilizando este formato híbrido son:

La mayoría de los sitios web necesitan ser rediseñados constantemente para poder cumplir con las exigencias de la tecnología emergente y las necesidades de los usuarios.

Al final del día, hacer un rediseño con cambios drásticos se resumen en la siguiente pregunta: ¿Qué necesita mi sitio web para poder ser exitoso? Para unos es una página. Para otros son 50 páginas. Yo creo que la mejor alternativa, está ubicado en el medio de ambas.


Descarga la Presentación/Diapositiva: 

Fuente: AddThis

¿Cómo Puedo Mostrar los Días Hábiles en PHP?

Posted on by Tony Lopez

Escribo este artículo en respuesta a la pregunta que me hicieron de ¿Cómo puedo mostrar los días hábiles en PHP?

Debes Saber:

Para poder hacer este ejercicio debemos tener cierto conocimiento en las funciones de fecha, formato de fecha y arreglos. Los nombres de las funciones de php que estaremos trabajando son date() y date_format().  Asegúrate de que la función trabaje con tu versión de PHP.

Esta es la función de date() y los parámetros que acepta.

string date ( string $format [, int $timestamp = time() ] )

Es muy importante que estudies y utilices de referencia la tabla del formato que puedes utilizar para la fecha. Puedes entrar a página web de la documentación de PHP. No es necesario aprendértelos todos, pero debes conocer algunos que estarás utilizando la mayoría de las veces.

Y = 2015 (año completo)
y = 15 (últimos 2 dígitos del año)
m = 12 (número del mes)
d = 01 (número del día en 2 días)
h = 09 (hora en formato de 12 horas)
i = 30 (minutos con el cero al inicio)
s = 23 (segundos con el cero al inicio)

Aunque no lo mencioné anteriormente, utilicé otra función de php llamada «date_create()» que te permite convertir un «string» (cadena de caracteres) en el formato de fecha y así asignarle el formato que deseas utilizar.

$date = date_create('2015-12-13');
echo date_format($date, 'Y-m-d H:i:s');

La Búsqueda:

Es importante que entiendas siempre existe más de una forma de realizar las cosas, pero lo que buscamos es que podamos tener un código que sea re-utilizable, o sea, pasar el trabajo una vez. Sea que te sientes a programar el código tu mismo, o hagas una búsqueda en la internet, es tiempo que se te resta de la fecha final del proyecto.

Así que debemos volvernos expertos en decidir qué momentos, programar y qué momentos hacer la búsqueda en internet, ya que existen un sin número de ejemplos de pequeños pedazos de códigos que nos pueden servir para nuestro proyecto, pero debemos saber leer e interpretar el mismo.

El Código:

Este código lo tomé de https://eval.in/90006 y me pareció muy acertado para responder a la pregunta que me hicieron. Al ser una función nos permite aplicarlo de manera sencilla.

function number_of_working_dates($from, $days) {
    $workingDays = [1, 2, 3, 4, 5]; # date format = N (1 = Monday, ...)
    $holidayDays = ['*-12-25', '*-01-01', '2013-12-24', '2013-12-25']; # variable and fixed holidays

    $from = new DateTime($from);
    $dates = [];
    $dates[] = $from->format('Y-m-d');
    while ($days) {
        $from->modify('+1 day');

        if (!in_array($from->format('N'), $workingDays)) continue;
        if (in_array($from->format('Y-m-d'), $holidayDays)) continue;
        if (in_array($from->format('*-m-d'), $holidayDays)) continue;

        $dates[] = $from->format('Y-m-d');
        $days--;
    }
    return $dates;
}

print_r( number_of_working_dates('2015-12-23', 10) );

Le añadí algunas otras líneas para que pudieran ver cómo se puede utilizar un código base para desarrollar lo que deseamos.

$dates = number_of_working_dates('2015-12-23', 10); //Arreglo del resultado de las fechas

foreach ( $dates as $date ) {
    $fecha = date_create($date); //Convertir 'string' a formato de fecha
    echo($date . ' - ' . $fecha->format('D') . '
');  
    //Muestro los formatos que deseo (fecha y el día)
    
}

//Aquí puedo seleccionar el día deseado
$fecha = date_create($dates[0]);
//echo( ''.$dates[0] . ' - ' . date_format($fecha, 'D') . '');  //Método tradicional
echo( ''.$dates[0] . ' - ' . $fecha->format('D') . '');  //Orientado a objeto

Resultado final:

Este es el resultado final del código completo para que lo puedan utilizar.

function number_of_working_dates($from, $days) {
    $workingDays = [1, 2, 3, 4, 5]; # date format = N (1 = Monday, ...)
    $holidayDays = ['*-12-25', '*-01-01', '2013-12-24', '2013-12-25']; # variable and fixed holidays

    $from = new DateTime($from);
    $dates = [];
    $dates[] = $from->format('Y-m-d');
    while ($days) {
        $from->modify('+1 day');

        if (!in_array($from->format('N'), $workingDays)) continue;
        if (in_array($from->format('Y-m-d'), $holidayDays)) continue;
        if (in_array($from->format('*-m-d'), $holidayDays)) continue;

        $dates[] = $from->format('Y-m-d');
        $days--;
    }
    return $dates;
}

//print_r( number_of_working_dates('2015-12-23', 10) );
$dates = number_of_working_dates('2015-12-23', 10);

foreach ( $dates as $date ) {
    $fecha = date_create($date);
    echo($date . ' - ' .  $fecha->format('D') . '
'); 
    
}


$fecha = date_create($dates[0]);
//echo( ''.$dates[0] . ' - ' . date_format($fecha, 'D') . '');
echo( ''.$dates[0] . ' - ' . $fecha->format('D') . '');  //orientado a objetos

Lo Próximo:

Luego tomaré un tiempo para crear un video que muestre cómo se hace todo, ya que hay muchas personas que se les hace más fácil aprender cuando lo ven. Saludos y hasta la próxima.

Referencias:

¿Cómo Auto-Completar Un Formulario?

Posted on by Tony Lopez

 

Este video te mostrará como ingresar un código y auto-completar un formulario con los valores de la tabla.

Recomiendo a que veas el video Cómo Borrar Récords de una Tabla y Añadirlos en Otra con PHP.

Descarga el proyecto:
https://github.com/lopezpagan/youtube-tutorials/tree/master/4-fThzGTB5g

Para más tutoriales entra a: lopezpagan.com/youtube.

¿Cómo Borrar Records de una Tabla y Añadirlos en Otra con PHP?

Posted on by Tony Lopez

A través de este tutorial muestro Cómo Borrar Records de una Tabla y Añadirlos en Otra con PHP.
Continue reading «¿Cómo Borrar Records de una Tabla y Añadirlos en Otra con PHP?» →

¿Cómo Hacer Una Búsqueda por Fechas con un Formulario en PHP?

Posted on by Tony Lopez

Este es un tutorial básico en el cuál muestro cómo hacer una búsqueda por fechas con un formulario en PHP.

Recomiendo que veas el video: ¿Cómo Manejar la Fecha en los Formularios? – HTML y PHP

Descarga el proyecto: 

https://github.com/lopezpagan/youtube-tutorials/tree/master/7cjh3aGNH00

 

Para más tutoriales entra a: lopezpagan.com/youtube

¿Cómo verificar los errores en tu programación?

Posted on by Tony Lopez

Este es un tutorial básico en el cuál muestro como puedes verificar los errores de tu programación.

Puedes ver cómo se pueden verificar los errores en jQuery, Javascript, PHP y cómo verificar los estilos en CSS utilizando tu navegador.

Para más tutoriales entra a: lopezpagan.com/youtube

¿Cuales son las Etapas del Desarrollo de una Página Web?

Posted on by Tony Lopez

En esta presentación sencilla te muestro las etapas de desarrollo de una página web.  En algún momento, te has preguntado: ¿Cómo se desarrolla una página web? ¿Cuál es el proceso de su desarrollo? ¿Cómo se divide un proyecto de desarrollo web?  Pues estas y otras interrogantes deseo responder con ésta presentación / diapositiva.

Estas son las 6 Etapas del Desarrollo de una Página Web.

1. Recopilación de Información
2. Planificación
3. Diseño
4. Desarrollo
5. Pruebas y Entrega
6. Mantenimiento

 


Descarga la presentación / diapositiva: http://www.slideshare.net/lopezpagan/how-its-made-digitally

¿Qué es un Wireframe? ¿Cómo se crea un Wireframe?

Posted on by Tony Lopez

En diseño web, un wireframe es una representación esquemática de una página web sin elementos gráficos que muestran contenido y comportamiento de las páginas.

Sirven como herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes. También se pueden utilizar para comprobar la usabilidad de un sitio web.

La principal ventaja es que ofrece una perspectiva basada solamente en la arquitectura del contenido, obviando el diseño y evitando elementos accidentales que puedan distraer (colores, tipografías, imágenes, textos, etc.).

Aunque es un video del 2013, te muestro como debo desarrollar una estructura de una página antes de comenzar a diseñarla y programarla.  Pronto haré un video más actualizado mencionando las herramientas que existen para desarrollar wireframes y prototipos.

¿Cómo Manejar las Bases de Datos con PHPMyAdmin?

Posted on by Tony Lopez

 

Aprende como manejar las bases de datos. Instalar, conectar, crear y diseñar las bases de datos de MySQL con PHPMyAdmin.

– Instalar una base de datos local
– Instalar un manejador de la base de datos
– Crear una base de datos
– Conectarse a una base de datos
– Diseñar tablas en una base de datos
– Alterar y borrar tablas en una base de datos
– Insertar, editar, seleccionar y borrar datos de una tabla

http://www.mamp.info
http://dev.mysql.com/downloads/

¿Cómo Hacer una Búsqueda con Multiples Criterios?

Posted on by Tony Lopez

Este video es la continuación del tutorial #7 y amplía el tema discutido en el tutorial #2. Te muestra cómo puedes hacer una búsqueda a través de un formulario y con varios criterios de búsqueda.

Descarga el proyecto:
https://github.com/lopezpagan/youtube-tutorials/tree/master/4DHd9Ewx7I8

Lee más: lopezpagan.com/youtube

¿Cómo Desarrollar una Página Web de Manera Simple?

Posted on by Tony Lopez

Aquí enseño como puedes desarrollar una página web sobre la plataforma de Bootstrap. Es fácil y sencillo de hacer. Este video forma parte de una serie de tutoriales en los cuales hemos ido desarrollando un proyecto existente.

Descarga el proyecto:
 https://github.com/lopezpagan/youtube-tutorials/tree/master/aZG2F8snYQM

Para más tutoriales entra a: lopezpagan.com/youtube.

¿Cómo Subir un Archivo con un Formulario a tu Servidor?

Posted on by Tony Lopez

Aquí enseño a crear un formulario, el cuál te permite subir un archivo a tu servidor.  Este video forma parte de una serie de tutoriales en los cuales hemos ido desarrollando un proyecto existente.

Descarga el proyecto:
https://github.com/lopezpagan/youtube-tutorials/tree/master/3gDKl4tGiAE

Página de tutoriales: lopezpagan.com/youtube

¿Cómo Hacer una Búsqueda y Mostrar los Resultados con PHP?

Posted on by Tony Lopez

Aquí mostramos cómo hacer una búsqueda y mostrar los resultados en una página utilizando PHP. Este video forma parte de una serie de tutoriales en los cuales hemos ido desarrollando un proyecto existente.

Descarga el proyecto:
https://github.com/lopezpagan/youtube-tutorials/tree/master/afo5WcdbuG0

Página de tutoriales: lopezpagan.com/youtube

¿Cómo Listar, Añadir, Editar, Borrar Records con Dreamweaver y PHP?

Posted on by Tony Lopez

Aquí enseño como puedes utilizar Adobe Dreamweaver y PHP para listar, añadir, editar y borrar records. Este video forma parte de una serie de tutoriales en los cuales hemos ido desarrollando un proyecto existente.

Descarga el proyecto:
https://github.com/lopezpagan/youtube-tutorials/tree/master/ieeRfZEFOAc

Página de tutoriales: lopezpagan.com/youtube

¿Cómo Cargar Una Página Dentro de un DIV con jQuery?

Posted on by Tony Lopez

Cómo cargar una página dentro de un DIV con jQuery utilizando Adobe Dreamweaver CS6.

-> Para el problema de «same origin policy»
Ver video: http://lopezpagan.com/como-cargar-varias-paginas-dentro-de-la-misma-pagina/

Descarga el proyecto:
 https://github.com/lopezpagan/youtube-tutorials/tree/master/f4pXZ_LeqxE

Para más tutoriales entra a: lopezpagan.com/youtube.