¡Hola, amigos! En esta ocasión, he tenido el placer de impartir un curso intensivo de diseño web y e-commerce para profesores en el Instituto de Educación Secundaria Andrés Benítez de Jerez de la Frontera.
Ha sido un privilegio participar en un programa formativo englobado dentro de las Medidas para la Mejora y Difusión de la Formación Profesional, organizado por el CEP (Centro del Profesorado) de Jerez, perteneciente a la Conserjería de Educación y Deporte de la Junta de Andalucía, y cofinanciado por el Ministerio de Educación y Formación Profesional y por el Fondo Social Europeo, donde he enseñado a manejar por completo: WordPress, el tema Divi, el plugin Divi Builder, WooCommerce y PrestaShop.
A la formación, 100% práctica y de 3 semanas de duración, han acudido docentes de FP de las ramas de Comercio y Marketing y de Informática y Comunicaciones de toda la provincia de Cádiz, quienes han interiorizado conocimientos profesionales avanzados y desde cero que podrán compartir posteriormente con los alumnos de sus respectivos centros de trabajo y aplicar en sus proyectos personales.
Quiero agradecer a Lourdes Figueroa, asesora del CEP de Jerez, y a José Antonio Moreno, miembro del Departamento de Formación, Evaluación e Innovación Educativa y profesor del IES Andrés Benítez, la confianza depositada en mí como formador de formadores para enseñar a desarrollar páginas web y tiendas online en este apasionante proyecto.
El uso de las TICs por parte de las empresas como herramientas de promoción y venta de sus productos ha cobrado gran importancia en la actualidad. La transformación digital de estas es ya una realidad y el comercio electrónico es un complemento imprescindible para cualquier negocio físico, por lo que hay que adaptarse a las demandas del mercado y optimizar el proceso de compra y el entorno web para no perder clientes.
Por ello, con este curso se ha buscado fomentar el uso de las nuevas tecnologías y la actualización técnica del profesorado de formación profesional, mostrando a los asistentes de forma real cómo se utilizan las principales herramientas del diseño web y el e-commerce y cómo complementarlas y aumentar su eficacia con el marketing digital.
Los contenidos han sido expuestos con la mínima teoría posible, trabajando, que es como mejor se aprende, y elaborando desde cero tanto una página web como una tienda online, compartiendo, además, mis conocimientos en diferentes áreas, disciplinas, técnicas, estrategias y herramientas del marketing digital para hacer las mismas rentables, siendo los objetivos concretos del CEP formar a los profesores para ser capaces de:
- Dominar por completo el CMS WordPress y el constructor visual Divi para desarrollar páginas web profesionales.
- Dominar por completo el sistema de comercio electrónico de WooCommerce y PrestaShop para desarrollar tiendas online profesionales.
- Saber cómo vender por Internet y comprender el funcionamiento del comercio electrónico para emprender un negocio digital con garantías.
- Desarrollar estrategias de marketing digital adecuadas para optimizar los resultados de un negocio online.
He comenzado con una breve introducción a WordPress, Divi, WooCommerce y PrestaShop, explicando las características, la utilidad y las ventajas e inconvenientes de cada herramienta, las posibilidades que ofrecen un CMS (sistema de gestión de contenidos) y un constructor visual a la hora de crear una página web, las diferencias entre los dos sistemas de comercio electrónico y cuándo hacer uso de cada uno en función del tipo de tienda online que se quiera desarrollar.
Seguidamente, he enseñado a montar y configurar un servidor local y a trabajar en plataformas de staging, pruebas y desarrollo en la nube para poder crear un proyecto online de forma totalmente gratuita. También he mostrado cómo adquirir un dominio y un certificado SSL, cómo contratar un hosting de pago y optimizarlo para obtener el máximo rendimiento del mismo y cómo realizar la instalación de WordPress y PrestaShop de forma manual y automática tanto en una como en otra opción.
Asimismo, he indicado cómo crear un email corporativo, tanto a través del hosting como del proveedor del dominio, cómo usar este en un gestor de correo electrónico como Gmail, cómo realizar copias de seguridad y cómo migrar una página web o una tienda online de un servidor local a un hosting y viceversa tras su desarrollo.
Si estás interesado en contratar un hosting profesional para crear tu página web o tu tienda online con garantías, puedes beneficiarte de un 20% en los diferentes planes de Raiola Networks a través de ⭐ mi landing page ⭐.
A continuación, he explicado cómo configurar y administrar tanto WordPress como PrestaShop por completo. En primer lugar, he aclarado cómo iniciar sesión para acceder al backend de ambas plataformas. A partir de aquí, al tratarse de sistemas diferentes, voy a especificar lo visto durante el curso en los dos CMSs por separado.
En WordPress, he comenzado exponiendo el funcionamiento del escritorio, del panel de administración y de la barra de herramientas, así como las opciones de pantalla y la sección de ayuda y soporte. Seguidamente, he aclarado la importancia de cara al SEO de establecer una configuración adecuada de los enlaces permanentes para que las urls del sitio web sean amigables para Google.
Luego, he detallado cómo realizar los pertinentes ajustes para obtener un funcionamiento óptimo de la plataforma, cómo llevar a cabo las actualizaciones, cómo utilizar las herramientas que ofrece el sistema por defecto, haciendo hincapié en la exportación e importación de contenido, y cómo abordar y gestionar el apartado de privacidad, tan candente en la actualidad. También cómo definir las páginas de portada o inicio (estática) y blog (dinámica), en caso de querer incorporar uno en el proyecto web, cómo gestionar los comentarios en este y cómo añadir usuarios y administrar sus perfiles para un manejo conjunto de WordPress, asignando determinados roles y permisos a los mismos. De igual forma, he enseñado a crear un Gravatar, la imagen o icono que identifica al usuario en el entorno WordPress.
El siguiente paso ha sido mostrar a los profesores cómo instalar, tanto de forma manual como a través del repositorio oficial, y gestionar temas o plantillas para poder modificar la apariencia de la página web. Del mismo modo, he indicado cómo crear temas hijos para poder personalizar los anteriores mediante código y aplicar los cambios en estos de forma permanente sin que se pierdan con las actualizaciones.
Por ser un referente en el ámbito del diseño web y por su enorme potencial para construir páginas web a medida, para esta formación he optado por el tema Premium Divi, cuya explicación detallaré un poco más adelante. Los asistentes han podido comprobar, viendo la zona de administración de una y otra opción, las grandes diferencias entre un tema multipropósito y una plantilla básica. Si estás interesado en adquirir Divi, que es el tema que uso mayoritariamente para mis proyectos de diseño web, puedes hacerlo ⭐ aquí ⭐.
Además, he indicado cómo instalar y gestionar plugins para añadir funcionalidades al proyecto y he desvelado los que considero imprescindibles para solucionar las limitaciones y carencias de WordPress en un sitio web profesional. Actualmente, existe un plugin para prácticamente cualquier necesidad, por lo que las posibilidades de WordPress para crear páginas web son casi infinitas. He profundizado en el manejo del plugin Divi Builder, por si no se quiere emplear el tema Divi pero sí aprovechar su constructor visual en otra plantilla.
He continuado la formación enseñando a elaborar y organizar el contenido en el CMS. Para ello, he explicado cómo crear y asignar taxonomías: categorías y etiquetas, para estructurar la información relativa al blog. Después, he pasado al apartado de los widgets, detallando cómo insertar nuevos bloques de contenido o funcionalidades en la barra lateral (sidebar) y en las diferentes áreas del pie de página.
De igual forma, he instruido en el uso de la biblioteca de medios, aclarando cómo subir y editar todo tipo de archivos: imágenes, vídeos, documentos, etc; y en la creación y administración de páginas, para el contenido estático que no se prevé modificar frecuentemente, y de entradas, para el contenido dinámico y periódico del blog.
Para que puedan trabajar cómoda y libremente según sus preferencias, he enseñado a utilizar por completo tanto el editor Gutenberg, que viene por defecto en WordPress desde su versión 5.0 y que funciona por bloques, como el editor clásico TinyMCE, que continúa teniendo una gran aceptación entre los usuarios de la plataforma y que requiere el uso de un plugin al no venir incluido ya en el CMS.
A posteriori, he explicado cómo crear menús de navegación y cómo organizar y gestionar sus ubicaciones y elementos para ofrecer una correcta usabilidad y accesibilidad al usuario. También he expuesto cómo elaborar y administrar formularios de contacto para brindar la oportunidad a este de enviar sus dudas, consultas o peticiones.
Luego, he enseñado el proceso de integración y sincronización de las redes sociales y el email marketing, cómo cumplir la normativa vigente sobre protección de datos y qué deben contener los textos legales.
Finalmente, he impartido nociones básicas de programación con código Html y CSS para poder personalizar por completo una página web, he planteado técnicas WPO para mejorar el rendimiento de esta, obtener la máxima velocidad de carga y ofrecer la mejor experiencia de usuario posible, he detallado como realizar una optimización de SEO On Page para lograr un buen posicionamiento en Google y he dado consejos y recomendaciones, basados en mi propia experiencia, para desarrollar un proyecto web totalmente operativo y funcional que supere las expectativas de cualquier cliente.
Después de aleccionar a fondo en el funcionamiento y manejo de WordPress, he profundizado en el diseño web y he enseñado a maquetar a medida, siguiendo cualquier indicación o demanda, una página web con un constructor visual.
Antes de comenzar a diseñar, he repasado las opciones generales del tema Divi y he indicado cómo realizar la configuración básica y óptima del mismo. Seguidamente, he explicado el funcionamiento del personalizador, de cada uno de los módulos (imagen, vídeo, audio, texto, galería, deslizador, botón, separador, anuncio, conmutador, portafolios, tablas de precios, contadores, pestañas, llamada a la acción, recomendaciones…), que ofrecen diversas funcionalidades y diferentes elementos y posibilidades de diseño, y del constructor de plantillas, que permite diseñar a medida y de forma global la cabecera, el cuerpo y el pie de una página web, dejando como único límite a la estructuración de un proyecto online la imaginación del desarrollador.
A continuación, he aclarado cómo hacer un uso adecuado del editor de roles, de la biblioteca, para importar y exportar archivos en formato JSON, y del centro de soporte. También he expuesto cómo cargar plantillas o diseños predefinidos, que permiten lanzar una página web en pocas horas modificando simplemente los textos y las imágenes.
Como punto fuerte, siendo la base del diseño web, he enseñado a estructurar una página mediante secciones (estándar y de ancho completo), filas y columnas, a ubicar sus elementos y a gestionar los espacios donde y como se estime oportuno mediante los márgenes y los rellenos, y a dar vida a los fondos a través de colores, degradados, elementos divisores, imágenes, vídeos, efectos parallax, etc. Del mismo modo, he instruido en el manejo de los tres tipos de constructores que incluye Divi: el estándar, que trabaja en el backend, el visual, que trabaja en el frontend, ofrece más opciones que el anterior y permite ver el resultado en tiempo real, aunque puede resultar algo incómodo, y el híbrido, que unifica las ventajas y reduce los inconvenientes de los otros dos.
Además, he profundizado en los ajustes de página, en las múltiples opciones de diseño que ofrece el tema (alineaciones, tamaños, sombreados, filtros, perspectivas y transformaciones, hovers…) y he mostrado cómo aplicar las animaciones. Para terminar, he expuesto cómo realizar la adaptación a dispositivos móviles y obtener un diseño responsive para que la página web se visualice correctamente en smartphones y tablets. En ocasiones, se requiere crear dos versiones distintas de la página, una para estos y otra para escritorio u ordenador.
Tras esta primera parte, partiendo de cero y sin conocimientos previos, los profesores, ahora convertidos en alumnos, han quedado plenamente capacitados para diseñar un proyecto web avanzado, personalizado y de calidad que se adapte a todo tipo de pantallas. Además, podrán hacerlo tanto con el tema Divi como con cualquier plantilla del repositorio oficial de WordPress, pudiendo modificar posteriormente su apariencia y hacerla única con el plugin Divi Builder.
He comenzado el apartado de comercio electrónico instalando el plugin WooCommerce, que, a diferencia de PrestaShop, no es una plataforma o CMS en sí, sino un complemento de WordPress. También otros plugins necesarios para el correcto funcionamiento de una tienda online, ya que, al no ser este un sistema propio de e-commerce, presenta algunas carencias, en especial para los usuarios europeos.
Para poder mostrar las diferencias entre WooCommerce y PrestaShop, he ido alternando la explicación del funcionamiento y administración de ambas plataformas. Por ello, he instalado también de inicio los correspondientes módulos para un desempeño óptimo de PrestaShop. Esta es una de las particularidades notables de cada sistema, WordPress utiliza plugins y PrestaShop módulos para añadir funcionalidades a la tienda online, aunque su gestión es similar.
El siguiente paso ha sido enseñar a realizar la configuración adecuada y los pertinentes ajustes de WooCommerce: opciones generales, dirección, moneda, opciones de producto, medidas, valoraciones, inventario o estocaje, productos descargables, cuentas y privacidad, avisos por email, establecimiento de remitente, personalización de la plantilla de correo electrónico, opciones avanzadas, APIs, webhooks, etc.
He profundizado y he hecho especial hincapié en la explicación de la gestión de los impuestos, las zonas, las opciones y las clases de envío y los métodos de pago, al ser los apartados más complejos y difíciles de asimilar. Del mismo modo, he aclarado cómo incorporar un sistema de facturación, cómo adaptar los formularios de registro y de finalizar compra para cumplir la normativa de protección de datos y qué deben contener los textos legales de una tienda online, ya que estos difieren de los de una página web.
En PrestaShop el proceso es más amplio, requiere algo más de tiempo y puede proyectar una mayor dificultad, aunque, una vez que se conocen las diferentes opciones y se entiende el modo de proceder de las dos plataformas, el grado de complejidad es prácticamente el mismo.
Para empezar, he mostrado el escritorio, con su correspondiente ventana principal de inicio, y los elementos y el funcionamiento del panel de administración y de la barra de herramientas, que tienen una estructura similar a la de WordPress, y he indicado cómo configurar los parámetros generales de la tienda online: ajustes básicos, activación de SSL, redondeos, multitienda, actividad, modo mantenimiento, configuración de pedidos, estados de pedidos y devoluciones, opciones de regalo, configuración de productos, modo catálogo, novedades, página del producto, administración del stock, paginación, ajustes de clientes, grupos de clientes, tratamientos, formulario de contacto, datos de contacto y tiendas físicas, apartado y opciones de SEO, configuración de urls y formato de los enlaces, activación de urls amigables, generación de sitemap y archivo robots.txt, motores de búsqueda de Internet, afiliados y comisiones, configuración del buscador y del grado de importancia (peso) de los diferentes campos de búsqueda de PrestaShop, indexación, localizaciones, geolocalización por dirección IP, moneda, medidas, etc.
Seguidamente, he detallado cómo configurar los parámetros avanzados: información del sistema, opciones de rendimiento, caché y Smarty, modo depuración, características opcionales, WPO, combinación y compresión de código, servidores de medios, configuración de zona de administración, cookies, cuota de subida y modificaciones, configuración del correo electrónico y del remitente, importación de contenido, equipo de trabajo, opciones de empleados, perfiles y permisos, ajustes y respaldo de base de datos, opciones de copia de seguridad, registro de logs y nivel de gravedad, alertas por email, webservice, tareas Cron…
Al igual que en WooCommerce, he puesto especial énfasis en la explicación de la gestión de los impuestos, del transporte y los distintos transportistas, de las ubicaciones geográficas (zonas, países y provincias) y sus opciones de envío, del formato de las direcciones, de los métodos de pago y de las traducciones, al ser los apartados más complicados de abordar y afinar.
A continuación, he enseñado a personalizar el diseño de la tienda online y a añadir funcionalidades o utilidades adicionales a la misma según las necesidades del proyecto. En la parte relativa a WordPress y el diseño web ya aclaré cómo modificar la apariencia de una página web con el tema Divi y el plugin Divi Builder, en caso de usar una plantilla diferente, y en WooCommerce el procedimiento es el mismo, pudiendo dotar a la tienda prácticamente de cualquier estructura que se desee con los módulos específicos para e-commerce. Para el resto, como ya he mencionado con anterioridad, existe un plugin para cada propósito de promoción o venta que se tenga en mente. En esta ocasión, he explicado cómo confeccionar la página de inicio específicamente para la venta de productos o servicios y me he centrado más en PrestaShop.
Al ser un sistema propio de comercio electrónico, PrestaShop no ofrece tantas opciones ni posibilidades de diseño como la combinación de WordPress y WooCommerce, ni siquiera con sus temas Premium, aunque se pueden conseguir resultados sorprendentes, sobre todo si se hace uso de código personalizado. Por ello, esta vez, al contrario que con la configuración de la tienda, el proceso es más simple.
He expuesto cómo establecer el logotipo de la empresa y el favicon para el navegador, cómo seleccionar un tema con un diseño y una estructura adecuados en función de la actividad y del tipo de negocio y cómo adquirirlo a través del catálogo de temas, cómo estructurar y personalizar el diseño y el aspecto de cada página por defecto de PrestaShop, profundizando en la configuración de la home o página de inicio y en las páginas de producto y categoría de producto, y cómo crear temas subordinados (temas hijos en WordPress) para poder hacer uso de la personalización avanzada del CMS, emplear código a medida o modificar el de los archivos existentes y no perder los cambios con las actualizaciones que se lleven a cabo.
Además, he planteado cómo añadir funcionalidades a PrestaShop desde el catálogo de módulos oficial y cómo administrar y configurar estos desde el gestor de módulos (module manager). También he aclarado dónde se reciben las notificaciones y las alertas, cómo subir módulos y temas de forma manual a PrestaShop y cómo llevar a cabo las actualizaciones de los mismos, no siendo el proceso tan simple como en WordPress en el caso de los temas, al requerir un módulo específico para ello.
De igual forma, he detallado cómo personalizar las plantillas de los avisos por correo electrónico, cómo agregar páginas adicionales, al igual que en WordPress, a la tienda e insertar contenido en estas, cómo cambiar y gestionar las posiciones de los módulos en la página de inicio mediante los hooks, cómo configurar el tamaño de las diferentes miniaturas y el formato y la compresión o calidad de las imágenes, y cómo añadir o editar bloques de enlaces o hipervínculos en el pie de página. También he mostrado cómo realizar una instalación híbrida en el hosting de PrestaShop y WordPress para poder aprovechar el potencial de este último e integrar un blog con un manejo y apariencia decentes en la tienda online, ya que los módulos de blog, incluso los Premium, bajo mi punto de vista, en PrestaShop dejan mucho que desear.
Después, he enseñado a crear las taxonomías: categorías y etiquetas de producto, en ambas plataformas, para estructurar el sistema de venta y jerarquizar su contenido. También, solo en el caso de PrestaShop, las marcas de los productos y los proveedores de los mismos, para obtener una organización más completa. Del mismo modo, he explicado cómo crear los atributos y las características y sus diferentes valores o términos para los productos que cuenten con más de una modalidad.
Asimismo, siendo uno de los puntos más importantes en una tienda online, he detallado como añadir, configurar, administrar, aplicar variaciones en caso necesario, y exportar e importar los diferentes tipos de productos del catálogo: simple (normal, virtual y descargable), agrupado, externo/afiliado y variable en WooCommerce, y estándar (simple y con combinaciones), pack de productos y producto virtual en PrestaShop.
También he desvelado cómo hacer un uso correcto de los productos relacionados para realizar ventas cruzadas, el tamaño ideal de las imágenes, que no es el mismo en ambas plataformas, cómo optimizar estás de forma adecuada en PhotoShop, cómo adjuntar archivos a las descripciones de los productos, y cómo trabajar el SEO On Page para e-commerce, que, además de abordarse de un modo distinto en WooCommerce y PrestaShop, tiene un planteamiento o enfoque específico que difiere del de una página web.
Por otro lado, he indicado cómo agregar los elementos relativos a la tienda online que interesen al menú de navegación de WordPress y WooCommerce, cómo crear y estructurar el menú en PrestaShop y añadir al mismo las categorías, subcategorías, páginas y enlaces pertinentes, y como hacer que se muestren determinados productos como destacados y que aparezcan las novedades en el orden deseado en la home o página principal, así como establecer y promocionar los productos en oferta en esta.
De igual forma, he aclarado cómo administrar por completo WooCommerce, profundizando en la explicación de la tramitación de los pedidos y la atención al cliente, y exponiendo, además, cómo crear cupones de descuento promocionales en dicha plataforma. Respeto a PrestaShop, he mostrado cómo gestionar los pedidos, las facturas, los albaranes, los abonos y los carritos de compra, cómo hacer uso de los descuentos pertinentes, aplicando reglas tanto en los precios del carrito como en los del catálogo de productos de la tienda, cómo controlar el stock de un modo generalizado y los diferentes movimientos que se producen en este, cómo agregar clientes y editar sus datos, y cómo abordar el servicio de atención al cliente, los mensajes de los pedidos y las devoluciones.
En último lugar, he detallado cómo generar informes, cómo analizar el estado del sistema y cómo añadir extensiones a WooCommerce. También cómo utilizar e interpretar en PrestaShop tanto la sección de monitoreo, para observar rápidamente las categorías vacías, los productos con y sin combinaciones sin stock, los productos desactivados y los productos sin imágenes, sin descripción y sin precio, como el completo sistema de estadísticas que incluye por defecto el CMS. Asimismo, he planteado diversas técnicas y diferentes consejos y recomendaciones basados en mi propia experiencia para aumentar las ventas y fidelizar clientes en ambas plataformas.
Tras la segunda parte de la formación, los profesores cuentan con los conocimientos necesarios para poder desarrollar una tienda online profesional tanto con WooCommerce como con PrestaShop, los dos sistemas de comercio electrónico más demandados y utilizados en la actualidad, y están plenamente capacitados, al dominar ambas plataformas por completo, para administrar un proyecto de e-commerce de forma autónoma. Además, han aprendido y puesto en práctica los recursos fundamentales para el desarrollo de una actividad comercial en Internet y acciones de marketing digital eficaces para garantizar su viabilidad.
Al finalizar curso, he entregado un temario completo de elaboración propia, donde explico “paso por paso” cómo crear una página web y una tienda online y cómo hacerlas rentables mediante el marketing digital, por si les surgen dudas posteriormente sobre lo visto en el mismo. De igual forma, he facilitado un kit de herramientas con todos los elementos puestos en práctica en la formación para que puedan iniciar un proyecto web profesional sin coste alguno.
Seguramente me haya olvidado de algo pero, resumiendo, los profesores de formación profesional de las ramas de Comercio y Marketing y de Informática y Comunicaciones de las diferentes localidades de la provincia de Cádiz que han asistido a mi curso de diseño web y e-commerce en el Instituto de Educación Secundaria Andrés Benítez de Jerez de la Frontera pueden lanzar su propio proyecto online, reduciendo los riesgos al mínimo, formar a sus alumnos o ejercer como profesionales en estas materias con total garantía.
Quiero terminar dando las gracias a los asistentes por su gran interés e involucración. Ha sido un honor formar a gente tan preparada y con tantas ganas de seguir aprendiendo. Tras haber ejercido ya como docente en Universidad, Instituto, organismo público y empresa, formando a alumnos, profesores y particulares, ya estoy deseando colaborar en nuevos acontecimientos. ¡Os mantendré informados!
Si estás buscando una empresa de diseño web en Jerez, puedo crear tanto tu página web como tu tienda online para que puedas iniciar tu proyecto en Internet de forma profesional. Asimismo, si necesitas la ayuda de un consultor SEO en Jerez, puedo hacer que destaques en Google. De igual forma, con mi servicio de redes sociales en Jerez, puedo hacer que todo el mundo se entere de la existencia de tus productos o servicios. Por otro lado, si lo que te interesa es contratar una agencia de marketing digital en Jerez, puedo desarrollar tu estrategia personalizada y aumentar las ventas de tu negocio. ¿A qué esperas? Trabajemos juntos y cumplamos tus objetivos. ¡Solicita YA tu presupuesto!
¡¡¡Si te ha gustado mi post, compártelo en las redes sociales!!!
