¡Hola, amigos! En esta ocasión, hemos 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, representados por nuestro director de marketing digital, Juan Galera, 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 hemos enseñado a manejar por completo: WordPress, el tema Divi, el plugin Divi Builder, WooCommerce y PrestaShop. Nuestra compañera en prácticas, Marta Ruiz, se ha encargado de realizar funciones de apoyo.
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.
Nos gustaría agradecer a Lourdes Figueroa Abrio, asesora del CEP de Jerez, y a José Antonio Moreno Sánchez, miembro del Departamento de Formación, Evaluación e Innovación Educativa y profesor del IES Andrés Benítez, la confianza depositada en nosotros como formadores 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, nuestros 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.
Hemos 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, hemos 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 hemos 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, hemos 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 con garantías, puedes beneficiarte de un 20% en los diferentes planes de Raiola Networks a través de ⭐ nuestra landing page ⭐.
A continuación, hemos explicado cómo configurar y administrar tanto WordPress como PrestaShop por completo. En primer lugar, hemos aclarado cómo iniciar sesión para acceder al backend de ambas plataformas. A partir de aquí, al tratarse de sistemas diferentes, vamos a especificar lo visto durante el curso en los dos CMSs por separado.
En WordPress, hemos 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, hemos 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, hemos 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, hemos 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, hemos 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 hemos optado por el tema Premium Divi, cuya explicación detallaremos 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 solemos usar mayoritariamente para nuestros proyectos de diseño web, puedes hacerlo a través de ⭐ este enlace ⭐.
Además, hemos indicado cómo instalar y gestionar plugins para añadir funcionalidades al proyecto y hemos desvelado los que consideramos 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. Hemos 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.
Hemos continuado la formación enseñando a elaborar y organizar el contenido en el CMS. Para ello, hemos explicado cómo crear y asignar taxonomías: categorías y etiquetas, para estructurar la información relativa al blog. Después, hemos 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, hemos 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, hemos 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, hemos 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 hemos expuesto cómo elaborar y administrar formularios de contacto para brindar la oportunidad a este de enviar sus dudas, consultas o peticiones.
Luego, hemos 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, hemos impartido nociones básicas de programación con código Html y CSS para poder personalizar por completo una página web, hemos 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, hemos detallado como realizar una optimización de SEO On Page para lograr un buen posicionamiento en Google y hemos dado consejos y recomendaciones, basados en nuestra 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, hemos profundizado en el diseño web y hemos 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, hemos repasado las opciones generales del tema Divi y hemos indicado cómo realizar la configuración básica y óptima del mismo. Seguidamente, hemos 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, hemos 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 hemos 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, hemos 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, hemos 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, hemos 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 hemos mostrado cómo aplicar las animaciones. Para terminar, hemos 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.
Hemos 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, hemos ido alternando la explicación del funcionamiento y administración de ambas plataformas. Por ello, hemos 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.
Hemos profundizado y hemos 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, hemos 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, hemos 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 hemos 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…
Seguidamente, hemos 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, etc.
Al igual que en WooCommerce, hemos 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, hemos 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 aclaramos 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 hemos mencionado con anterioridad, existe un plugin para cada propósito de promoción o venta que se tenga en mente. En esta ocasión, hemos explicado cómo confeccionar la página de inicio específicamente para la venta de productos o servicios y nos hemos 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.
Hemos 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, hemos 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 hemos 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, hemos 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 hemos 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 nuestro punto de vista, en PrestaShop dejan mucho que desear.
Después, hemos 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, hemos 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, hemos 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 hemos 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, hemos 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, hemos 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, hemos 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, hemos 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, hemos planteado diversas técnicas y diferentes consejos y recomendaciones basados en nuestra 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, hemos entregado un temario completo de elaboración propia, donde explicamos “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, hemos 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 nos hayamos 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 nuestro 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.
Queremos 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 docentes en Universidad, Instituto, organismo público y empresa, formando a alumnos, profesores y particulares, ya estamos deseando colaborar en nuevos acontecimientos. ¡Os mantendremos informados!
Si buscas una empresa de diseño y desarrollo de páginas web y tiendas online en Jerez y Cádiz, podemos ayudarte a lanzar tu proyecto en Internet de forma profesional. Además, como expertos en SEO, SEM y posicionamiento web en Jerez y Cádiz, podemos hacer que destaques en Google y que tu negocio obtenga la mejor visibilidad posible en la red. También ofrecemos servicios de social media y redes sociales en Jerez y Cádiz para hacer que todo el mundo se entere de la existencia de tus productos o servicios. Buscamos ser la mejor agencia de publicidad y marketing digital en Jerez y Cádiz y aumentar las ventas de nuestros clientes es nuestro principal objetivo. Trabajemos y juntos y logremos los resultados que siempre soñaste. ¿A qué esperas? ¡Solicita YA tu presupuesto!
¿Te ha gustado nuestro post? ¡¡¡Compártelo en las redes sociales!!!
