Herramientas de Contenidos para Diseñar un E-commerce en WordPress y WooCommerce PDF

Herramientas de Contenidos para Diseñar un ECommerce en WordPress y Woocommerce BIENVENIDOS Ideas fuerza UNIDAD 1 Introducción ¿Qué es WordPress? ¿Qué son los plugins de WordPress? Cómo instalar WordPress.org en un hosting ¿Qué es un CMS? Ejercicios Conclusión UNIDAD 2 Introducción Cómo...

Herramientas de Contenidos para Diseñar un ECommerce en WordPress y Woocommerce BIENVENIDOS Ideas fuerza UNIDAD 1 Introducción ¿Qué es WordPress? ¿Qué son los plugins de WordPress? Cómo instalar WordPress.org en un hosting ¿Qué es un CMS? Ejercicios Conclusión UNIDAD 2 Introducción Cómo hacer una página Web en WordPress Ideas ejemplos para maquetar y diseñar páginas en WordPress Ejercicios Conclusión C IER R E DEL C UR S O Evaluación Lesson 1 of 14 Ideas fuerza 1 WordPress es una aplicación de software que permite crear una tienda virtual de fuentes abierta y de forma gratuita. 2 Se pueden utilizar plugins y plantillas para la construcción del WordPress. 3 El Content Management System (CSM), permite poner en marcha un sitio web de forma práctica y rápida. 4 Realizar una página web en WordPress requiere ciertas consideraciones para su implementación que se deben tener presente. 5 Para maquetear una página web hay diversas ideas que pueden ser útiles a la hora de construir una página web. CO N T IN U AR → Lesson 2 of 14 Introducción Bienvenidos al siguiente aprendizaje... – El mundo nunca había estado tan conectado como hoy en día. El escenario de consumo actual involucra dispositivos de todo tipo, una buena conexión a internet y empresas innovadoras dispuestas a aprovechar todo esto al máximo, comenzando por sitios web y canales virtuales. Estamos hablando de una serie de recursos que permiten impulsar un negocio, generar más ventas de manera consistente y brindarles más opciones a los consumidores, al mismo tiempo que se le ofrece una mejor experiencia de compra. Sin embargo, muchas empresas aún no tienen sitio web o no logran resultados palpables. El principal argumento para explicar malos resultados al usar internet como canal de captación y retención de clientes, es la falta de conocimientos técnicos para crear y gestionar las páginas y los contenidos. Ahí es donde entra el Content Management System como solución definitiva a este problema, como también diferentes herramientas que podemos utilizar para un desarrollo óptimo como WordPress. Te invitamos a trabajar en la lectura del material de estudio. CO N T IN U AR → Lesson 3 of 14 ¿Qué es WordPress? La definición más simple de WordPress es que se trata de una aplicación de software para crear y gestionar sitios web. Hay muchas aplicaciones de este tipo, las cuales se conocen también como CMS (“Content Management System”, sistema de gestión de contenidos). WordPress tiene, además, la peculiaridad de ser un proyecto de software libre y de fuentes abiertas que depende de la Fundación WordPress, una fundación sin ánimo de lucro, presidida por Matt Mullenweg, el creador de esta aplicación. Esto quiere decir que su código es creado y mantenido por una comunidad de miles de desarrolladores voluntarios (lo que garantiza su continuidad) y que se puede disponer de la aplicación gratis. 1.1 ¿Para qué se usa WordPress y a quiénes sirve? – La razón para usar este tipo de aplicaciones (CMS) es muy simple, permiten crear webs y sus contenidos de una forma visual, sin tener que programar, de una manera parecida a cómo se trabaja en un editor de texto moderno como Microsoft Word. Esto no fue siempre así. En los comienzos de la web, las páginas web se tenían que codificar en un lenguaje llamado HTML (una especie de lenguaje de programación). Programar en HTML a mano para crear contenidos era tedioso, ineficiente y limitado. Crear una página web se convertía en “picar piedra” y, sobre todo, cosas que requerían un poco de funcionalidad y lógica, como una simple sección de comentarios, implicaba un esfuerzo considerable y estaba solo al alcance de programadores. Por eso nacieron los CMS, que son aplicaciones web que le permiten al usuario crear los contenidos con un interfaz visual, de una manera sencilla, rápida y sin conocimientos de programación, algo que permite que prácticamente cualquier persona pueda manejarlos. Luego, es el CMS quien genera “por detrás” el HTML sin que el usuario tenga que intervenir. Además, los CMS ya traen incorporados las funcionalidades típicas que se repiten en casi todas las webs, como el ejemplo de la sección de comentarios que se mencionaba antes, formularios de contacto, etc. 1.2 ¿Qué sitios web se pueden crear con WordPress? Ejemplos – Todo el mundo sabe que WordPress se usa mucho para la creación de blogs personales. Lo que es bastante menos conocido es el hecho de que también permite crear prácticamente cualquier tipo de web, no solo sitios personales y blogs, sino webs corporativas, revistas, tiendas online… incluso periódicos digitales, WordPress es una opción frecuente. Lo que suele sorprender es la cantidad de webs de marcas mundialmente conocidas que están basadas en WordPress. En el “WordPress Website Showcase” de WordPress.org puedes encontrar un listado de webs de empresas que pertenecen al Fortune 500, que es la lista publicada de forma anual por la revista Fortune con 500 empresas estadounidenses de mayor cotización bursátil. Aquí encontrarás las webs de empresas y marcas como Walt Disney, Time Magazine, Sony Music, etc. https://diegopaz.net/wordpress-en-numeros-infografia-2020/ CO N T IN U AR → Lesson 4 of 14 ¿Qué son los plugins de WordPress? El hecho de ser un software libre y de código abierto ha sido uno de los factores esenciales en el éxito de WordPress. Otro de los grandes factores es su arquitectura flexible gracias a los temas y los plugins, lo que ha permitido que se pueda ajustar a prácticamente cualquier necesidad que pueda tener un usuario. Empecemos por los plugins: “Pluguin”, es un término bastante utilizado para referirse a un componente de software (código) con una funcionalidad muy concreta que se añade muy fácilmente a una aplicación existente para ampliarla con esta nueva funcionalidad. Esta idea se usa también, en los navegadores web donde muchos de ellos permiten usar plugins a los que llaman también “extensiones”, “complementos”, etc. En el repositorio de pliguins de WordPress.org, se encuentran más de 50.000 plugins gratuitos para añadir todo tipo de funcionalidades que trae “de fábrica” y que es relativamente básico. Además, hay una ingente cantidad de plugins de pago de diferentes marcas. Un ejemplo de plugin muy sencillo y útil que se usa en este mismo blog es el Auto-poster de NextScripts (en su versión de pago). Este plugin, tras la publicación de un post o página, lo difunde automáticamente en todas aquellas cuentas y/o grupos de redes sociales que se hayan configurado, lo que ahorra mucho tiempo. A este se añaden otras funcionalidades muy útiles como, por ejemplo, poder crear una rueda de publicaciones, es decir, republicar periódicamente los contenidos existentes. WordPress.org Otro ejemplo de plugin, en este caso, mucho más amplio en funcionalidad, sería WooCommerce, el plugin para creación de tiendas online más popular para WordPress y, en general, una de las soluciones más masivas para crear tiendas online. Ambos plugins son, además, ejemplos de productos “freemium” que son aquellos productos para los cuales el fabricante crea, junto con la versión de pago comercial, una versión gratuita limitada que permite conocer el producto antes de comprarlo. ¿Qué son las plantillas de WordPress? Las plantillas (o “temas”) de WordPress son un concepto muy parecido a los plugins, pero están pensadas específicamente para el diseño web, o sea la apariencia, aunque muchas veces también incluyen cierta funcionalidad. Las plantillas funcionan a modo de diseños “prefabricados” con su estilo de maquetación, tipos de letra, tamaños de letra, su conjunto y combinaciones de colores, etc. La gracia de esto es que las plantillas son 100% independiente del contenido y eso permite cambiar de diseño en un sitio WordPress casi tan fácil como quien se cambia de traje. Es básicamente elegir una nueva plantilla, activarla, realizar algunos ajustes menores (configurar el logo, seleccionar imágenes de cabecera, etc.) y con esas simples acciones se ha cambiado el diseño al sitio por completo. La contrapartida es que la gran mayoría de las plantillas, especialmente las gratuitas, suelen ser bastante limitadas en cuanto a posibilidades de personalización. ¿Qué es y cómo funciona WordPress.org? Hasta este momento hemos hablado de WordPress a secas y en otras ocasiones de “WordPress.org”. Esto tiene que ver con el hecho de que existen dos modos muy diferentes de crear un sitio WordPress: con WordPress.org y con WordPress.com. Empecemos con WordPress.org: éste es el sitio del proyecto de código abierto, es decir, la “sede” de la comunidad que desarrolla WordPress y dónde como usuario también puedes descargar la versión actual de la aplicación de WordPress (en el botón azul arriba a la derecha): WordPress.org Si nos fijamos en el menú de la página de arriba, podemos ver que está también el acceso al repositorio de temas y plugins gratuitos para WordPress. Además, está disponible un foro de soporte, información sobre eventos y cómo colaborar en el proyecto si deseas participar, etc. CO N T IN U AR → Lesson 5 of 14 Cómo instalar WordPress.org en un hosting Para instalar WordPress se necesita un ordenador conectado a internet funcionando las 24 horas del día y una dirección IP vinculada a un nombre de dominio. Aunque todo esto se podría montar en una casa, no parece muy práctico. La preparación del ordenador para que sea posible instalar WordPress requiere serios conocimientos técnicos y la idea de tener un ordenador conectado las 24 horas para esto tampoco resulta muy atractiva. Y aquí es donde entra el concepto de hosting web (“alojamiento web” en español, aunque se usa mayoritariamente el término en inglés de “hosting”). En un servicio de hosting web (o hosting a secas) se puede alquilar un ordenador en una granja de ordenadores (denominadas “centros de datos”) ya preparados para todo esto, donde tan solo quedaría instalar WordPress. Sería algo así como alquilar una vivienda (tu ordenador) en un edificio (el centro de datos). Ahora se entiende también por qué se usa el término de “alojamiento” en esto. Es importante que saber que en este tipo de instalaciones no se habla de ordenadores, sino de “servidores”, un tipo de ordenador muy potente y especialmente diseñado para estos entornos. Es más, al 99,9% de las personas le basta con alquilar un “trocito” de un servidor. Este “trocito” está perfectamente aislado de los demás clientes, y como usuario tendrás la sensación como si fuera una máquina para solo para uno. Volviendo al ejemplo, sería alquilar una habitación individual con un espacio privado y compartido dentro de la vivienda, lo que se conoce como hosting compartido y, gracias a la potencia de los servidores actuales, permite tener decenas de webs en un mismo servidor. Esto ha sido una auténtica revolución porque ha permitido que todo el mundo pueda crear una web de nivel profesional (que es lo que permite hacer WordPress) a precios muy bajos (en torno a 5€/mes ya hay buenos hostings). 3.1 Cómo utilizar WordPress.org en español WordPress es de origen inglés. Pero, por suerte, está traducida a muchos idiomas. Para el caso de los hispanoparlantes, es recomendable ir al sitio de WordPress.org en español, es decir, es.wordpress.org en vez de wordpress.org (la sede de EEUU que está en inglés). De este modo, utilizar WordPress en español no tiene más misterio que descargar la aplicación desde su sede en español e instalarla. A partir de ahí, todo es automático, las actualizaciones se harán con la versión en español, al igual que al instalar temas y plugins, también se usarán sus versiones en español. Eso sí, aunque la mayoría de los plugins y temas están traducidos al español, hay una parte no despreciable de ellos que no lo están. Los menús específicos dentro de WordPress de estos temas y plugins no traducidos, estarán en inglés, aunque el resto del interfaz esté en español. 3.2 ¿Qué es y cómo funciona WordPress.com? El creador de WordPress, Matt Mullenweg, a la luz del éxito de WordPress, acabó creando también la empresa de software Automattic con la idea de ofrecer servicios basados en WordPress y otras aplicaciones relacionadas. Su servicio más importante es WordPress.com, un servicio que permite crear un sitio WordPress sin tener que contratar un hosting, ni instalar la aplicación WordPress. Aquí también son necesarios servidores, pero la diferencia es que vienen integrados. Simplemente hay que crear una cuenta de usuario en WordPress.com, igual que se haría en otros servicios “en la nube” como Gmail, por ejemplo. La ventaja de este concepto es que simplifica al usuario la parte técnica de WordPress, el proceso inicial de crear el blog es más fácil y también se simplifica algo el mantenimiento. Pero tiene la contrapartida con las limitaciones de WordPress.com frente a una instalación propia de WordPress en un hosting, sobre todo, en los planes más baratos. Como se puede ver en la siguiente imagen los planes disponen de diferentes prestaciones: WordPress.org En los planes se puede acceder a un plan gratuito muy limitado hasta un plan “Business” muy completo. La idea es adecuar estos planes a diferentes necesidades de usuario, aunque ellos mismos vienen a reconocer que al avanzar con el blog, será necesario usar uno de los planes de pago. CO N T IN U AR → Lesson 6 of 14 ¿Qué es un CMS? El término CSM proviene del inglés Content Management System, que significa Sistema de Gestión de Contenidos. Es un sistema online que nos permite poner en marcha un sitio web de forma práctica y rápida, pero no es únicamente eso, sino que su gran ventaja, es como su nombre lo dice, la posibilidad de administrar contenidos dinámicos de forma sencilla, es decir, mantener un blog, un e-commerce o cualquier otro tipo de página web que demande una actualización constante. Imagina tener que realizar de forma manual actualizaciones semanales o, incluso, diarias, sin duda no funcionaría. Para esto y mucho más, un CSM es la solución ideal para todos los que necesita un sitio web que no sea 100% estático o momentáneo (o sea, hecho para permanecer funcionando por un breve período). Uno de los mayores beneficios del CSM es su facilidad de uso ya que permite concentrarte más en la estrategia y menos en la parte operativa. Todos los contenidos se administran de manera eficiente, pues la estructura está diseñada para garantizar un mejor desempeño de las páginas, una buena experiencia al usuario y, además, para dar posibilidad de escalar el sitio sin problemas en el futuro. ¿Cuáles son las características principales de un CSM? Puede que no lo parezca, pero producir y publicar un contenido simple o una página en un sitio web involucra muchos elementos que deben tener soporte de un CSM. Esto queda muy claro cuando miramos algunas de las principales características de este tipo de sistema: Creación y publicación de páginas. Edición de textos y códigos de sitios web. Moderación de comentarios. Control de inventario y sistema de ventas (si es e-commerce). Instalación de plugins y extensiones para aumentar las funciones del sitio. Biblioteca de medios para cargar imágenes y videos que se utilizarán en el sitio web. ¿Cuáles son los beneficios de un CSM? – 1. Facilidad de creación y mantenimiento: Puede ser que la principal ventaja de utilizar un software CSM sea la gran facilidad que ofrece a quienes quieren desarrollar una página y mantenerla actualizada. El acceso al trabajo se realiza directamente en el navegador, es decir, no es necesario descargar ningún sistema específico y complejo. Nada que ocupe espacio en el computador o teléfono celular. 2. Facilidad de uso: – Con un buen CSM, además de la facilidad que mencionamos, cualquier miembro del equipo podrá ayudar a mantener la estrategia digital. Esto incluye crear páginas en el sitio web de la empresa, agregar imágenes, videos, testimonios de clientes y más. Todo esto se puede hacer de manera extremadamente fácil y rápida, sin la necesidad de un conocimiento profundo de programación, diseño o diagramación. 3. Gran cantidad de recursos adicionales: – El principal CSM del mercado tiene una amplia gama de características adicionales. Estos se pueden agregar al sitio web con unos pocos clics para crear la mejor experiencia posible para el consumidor y hacer que la administración sea más eficiente. 4. Posibilidad de optimización para búsquedas orgánicas: – El SEO tiene como objetivo aumentar las posibilidades de que los motores de búsqueda, como Google, encuentren las páginas del sitio, pues cuantas más personas lo encuentren de forma orgánica (sin anuncios), mejor será el proceso de adquisición de clientes. Siempre y cuando se tenga una estrategia de contenidos sólida y un plan de marketing adecuado. Se pueden utilizar diferentes técnicas, como: Link building para aumentar la autoridad y mejorar el posicionamiento en las SERPs. Optimización de imágenes para que los contenidos también puedan ser encontrados mediante búsquedas visuales. Uso estratégico de palabras clave, especialmente long tail. Estructuración de los contenidos para que puedan ser consumidos de una manera agradable para, de esa forma, aumentar el tiempo de permanencia de los navegantes. 5. Versatilidad para proyectos de todo tipo y tamaño: – Este es otro beneficio de un CSM, logra dar soporte a diferentes proyectos de distintos tamaños con la misma estructura y funcionamiento interno. Todo lo que se necesita hacer es configurar las características que ofrece la plataforma de la elección de acuerdo con las necesidades del proyecto. 6. Buena velocidad de carga: – Otro gran beneficio de tener una solución CSM es que generalmente contribuye a aumentar la velocidad de carga de la página. Este elemento es crucial para ofrecer una buena experiencia al consumidor, sin mencionar que es un factor considerado en el ranking SEO. 7. Bajos costos de actualización y mantenimiento: – Con un CSM todo es más económico, desde la implementación hasta la actualización y el mantenimiento. El software utilizado, en general, es gratuito, ya que la mayoría de los CSM son creados por programadores de todo el mundo que trabajan de forma colaborativa. https://yiminshum.com/cms-content-manager-system/ CO N T IN U AR → Lesson 7 of 14 Ejercicios Estimado(a) estudiante: Una vez realizada la lectura comprensiva del materias de estudio, lo(a) invitamos a realizar una serie de ejercicios de aplicación de conocimientos. Question 01/05 ¿Qué es WordPress? Es un blog. Es un componente de un software. Es un diseño prefabricado. Es una aplicación de software para crear y gestionar sitios web. Question 02/05 ¿Qué sitios web se puede crear con WordPress? : I. Blog. II. Revistas. III. Tiendas online. IV. Webs corporativas. I y II II y III I, II y III Todas Question 03/05 "Componente de software (código) con una funcionalidad muy concreta que se añade muy fácilmente a una aplicación existente para ampliarla con esta nueva funcionalidad". Esta definición hace referencia a: Plantillas. Hosting. CMS. Plugins. Question 04/05 Las plantillas son: Componente de software (código) con una funcionalidad muy concreta. Están pensadas para el diseño web, o sea la apariencia. Alojamiento web. Ordenadores. Question 05/05 "Sistema online que nos permite poner en marcha un sitio web de forma práctica y rápida." Esta descripción hace referencia a: Plantillas. Hosting. CMS. Plugins. Lesson 8 of 14 Conclusión Para concluir... – Un sistema de gestión de contenidos es un programa que permite crear una estructura de soporte para la creación y administración de contenidos, principalmente en páginas web, por parte de los administradores, editores, participantes y demás usuarios. Consiste en una interfaz que controla una o varias bases de datos donde se aloja el contenido del sitio web. El sistema permite manejar de manera independiente el contenido y el diseño. Así, es posible dar en cualquier momento un diseño distinto al sitio web sin tener que cambiar el formato al contenido de nuevo, además de permitir la fácil y controlada publicación en el sitio a varios editores. Un ejemplo clásico es el de editores que cargan el contenido al sistema y otro de nivel superior que permite que estos contenidos sean visibles a todo el público. Hasta el próximo aprendizaje. CO N T IN U AR → Lesson 9 of 14 Introducción Bienvenidos al siguiente aprendizaje... – Diseñar una página web siempre implica crear una serie de páginas adicionales, como la información de los creadores, contacto, las páginas de servicios, porfolio y otras similares. Crear este tipo de páginas complementarias es fundamental para darle una estructura al sitio web y mostrar al usuario toda la información relacionada con el negocio o proyecto. Se debe tener en cuenta que estas páginas deben seguir la estética e imagen del sitio web en relación a: colores, fotografías, tipografías, textos, entre otros. Para diseñar páginas en WordPress, existen diferentes plugins o maquetadores visuales que servirán para optimizar el sitio y agregar valor a lo que se busca comunicar. Éxito en tu estudio. CO N T IN U AR → Lesson 10 of 14 Cómo hacer una página Web en WordPress 1. Diseñar la estructura y contenidos del sitio Lo primero es empezar por el principio de cualquier idea. No se puede crear una página sin tener claro que es lo que se va a hacer o lo que se quiere lograr, por ello, según el tipo de negocio o de marca personal hay que escoger un papel y definir: Colores, tipografías y logotipo: Hay que establecer los códigos de color de la web utilizando un máximo de dos o tres para que el aspecto estético tenga una coherencia. También es recomendable que, cuando se seleccionen las tipografías, se combinen dos como máximo para títulos y párrafos. Hay que tener cuidado con las tipografías de estilo handwriting que a veces no son muy legibles. A la hora de escoger un logotipo, se recomienda apostar por la sencillez y legibilidad. No mezclar más de dos colores y ser lo más conceptual posible. Estructura: En la estructura es importante tener claro qué secciones se van a incluir para poder hacer el menú. Por ejemplo: home, sobre mí, mis servicios, contacto, etc. Cada una de estas secciones serán páginas de la web que se deben diseñar una a una. Nombrar las secciones de la página de una forma coherente permite que el usuario pueda encontrar rápidamente lo que busca. A la hora de definir los servicios no se debe utilizar una sola página para incluirlos todos. La página de servicios necesariamente debe tener un submenú y cada uno de ellos debe tener una página, con el objetivo de trabajar la palabra clave que le corresponda. Esto tiene que ver con el SEO básico de una web. Contenidos: Definidas las secciones del sitio, otro punto de vital importancia en cómo hacer una página web, es redactar bien los contenidos. No incorporar texto por rellenar y pensar bien lo que se va a escribir. Hay que ser persuasivo y seguir las siguientes normas básicas: Hacer un estudio SEO para saber cuáles son las palabras más buscadas que se corresponden con los servicios y sector para utilizarlas. Escribir más de 300 palabras por página. Lo idóneo es que fueran entre 600 y 900 pero no siempre es posible extenderse tanto por lo que más de 300 tiene que ser el objetivo para no ser penalizado como thin content (contenido pobre) por el algoritmo de Google. Utilizar la palabra clave con una densidad de entre el 0,5% y el 1%. Por ejemplo, si se es “estilista” en la página de inicio o home debería repetir “estilista” en el 0,5% del contenido. Del mismo modo en los servicios si uno de ellos es “asesor de moda”, en la página que corresponda repetir la palabra clave para lograr esta densidad. Diseño: Después de haber desarrollado el contenido escrito, hay que seleccionar imágenes o hacer fotografías que cuadren con la extensión y disposición de los textos. En ese sentido, es recomendable hacer fotografías de calidad, ya que una mala imagen puede echar a perder de un plumazo contenidos bien trabajados. Si no se pueden hacer fotografías, es recomendable invertir algo de dinero en comprar contenidos gráficos profesionales en bancos de imágenes. Aunque existen también bancos de imágenes gratuitos, lo normal es ver esas fotos mil veces replicadas en otras webs con lo que perderás la originalidad. Una vez seleccionado el contenido y las imágenes se puede ver que es fácil diseñar la web, ya que solo se deben encajar las piezas. Cada contenido escrito se debe asociar a una imagen, esto se debe dejar esbozado en el papel donde se reflejó desde el comienzo la estructura del sitio a la espera de conseguir el servidor. 2. Elegir dominio y hosting Puede que este sea uno de los puntos más determinantes en cómo hacer una página web. Escoger un mal dominio o servidor puede afectar directamente la visibilidad y a las ventas o conversiones. Dominio: Es el nombre de la página web y cómo se va a buscar en la barra del navegador. En un mundo ideal debería incluir la palabra clave (por ejemplo analopezestilista.com), pero no siempre es posible por la extensión resultante. Los dominios deben ser cortos, fáciles de recordar y se debería comprar tanto la versión .com como la versión .es para que no lo pueda usar otra persona. La recomendación es utilizar .com para la página y se redirija la versión .es al sitio. Hosting, servidor o alojamiento: Puede que más del 80% de la responsabilidad sobre la velocidad de carga del sitio (punto básico para un buen SEO) radique en el proveedor de alojamiento. Es recomendable evitar los servidores cutres. Aunque hay muchas opiniones al respecto, el mejor hosting que existe a día de hoy es siteGround, que es el único recomendado oficialmente por la comunidad WordPress. Tiene soporte técnico 24/7, está especializado en WordPress y dispone de herramientas exclusivas para clientes que permiten sacar el mayor partido a una web. 3. Descargar e instalar la última versión de WordPress Cuando ya dispones del servidor, hay que descargar un paquete de WordPress de la última versión en el dominio. Hacer esto es muy fácil y normalmente el proveedor da las instrucciones y soporte para poder hacerlo. Si se contrata un hosting que no da la opción de instalar el paquete, directamente hay que descargar e instalar WordPress manualmente. Este paquete de WordPress incluye un tema gratuito que posteriormente se puede cambiar. 4. Seleccionar e instalar un tema de WordPress Para seleccionar un tema adecuado se debe tener en cuenta la actividad a desarrollar. En Envato hay un montón de opciones de plantillas premium para WordPress divididas por estilo que son responsive y con las que se puede hacer cualquier diseño. 5. Instalar los plugins Cuando se construye un sitio web en WordPress, es totalmente necesario contar con la instalación de plugins que van a ayudar en la gestión. Existen plugins básicos que instalar como es SEO By Yoast, porque ayudan a tener controlado el SEO de una forma básica cada vez que se escriba en el blog. También WP Rocket, es un plugin de caché que ayuda a mantener optimizada la velocidad del sitio. Otros los irás necesitando o no en función de las características de la web. Los plugins van evolucionando con el tiempo y los que ahora son buenos puede que no lo sean en un futuro o surjan otros mejores. Se deberán controlar estos cambios de tendencia para ir probando nuevos y desechando algunos que se quedan obsoletos o ya no resultan necesarios. 6. Configurar todas las opciones del tema WordPress Llega el momento de configurar las opciones de la plantilla de WordPress, dependiendo de cuál sea el tema, las opciones se llamarán de una forma u otra. Por ejemplo, para el tema Bridge, las opciones de diseño se llaman “Quode Options”. En estas opciones se elige la apariencia de todos y cada uno de los aspectos del sitio: Tamaños y tipos de letra Colores Estilo de cabecera y footer Estilos para el Blog Configuración de la sidebar Recuerda que, mientras se construye la página y se definen todas las opciones, la web debe estar en “Modo mantenimiento” y con la opción “Disuadir a los motores de búsqueda” habilitada para que Google no indexe el contenido antes de tiempo. 7. Optimizar las imágenes Otro aspecto determinante en cómo hacer una página web es la optimización de imágenes. Este punto afecta de forma determinante a la velocidad de carga de un sitio. Antes de subir las imágenes, se recomienda utilizar Photoshop y elegir la opción Exportar> Guardar para web, con el objetivo de para comprimirlas o, si el paquete Adobe no va contigo, utiliza Tiny PNG o Compressor.io. 8. Cargar todos los contenidos Ha llegado el momento de diseñar, solo se debe utilizar un maquetador para ir cargando los elementos de texto y de imagen de la forma que más nos guste. Existen diferentes maquetadores visuales para WordPress. Si se compra un tema premium de WordPress, es habitual que tenga incluido el Visual Composer. En este maquetador se encuentran todos los elementos que se necesitan para construir las páginas. Seleccionar filas y dentro de éstas introducir bloques de texto para añadir contenidos escritos o contenedores de imágenes para subir el contenido gráfico. Luego, es cuestión de ir ajustando tamaños para que cuadre dentro de la estructura de la plantilla. Cuando la página está diseñada se publica para que sea visible. Tener cuidado con el contenido demo que trae por defecto, debe encontrarse en borrador para que cuando indexes la web Google no lo rastree. Se trata de un error muy común que luego tarda en subsanarse. 9. Evaluar el SEO de la página web El último aspecto importante de cómo hacer una página web es evaluar el SEO. Aunque ya se ha comentado qué normas se deben seguir a la hora de escribir los contenidos y cómo se deben optimizar las imágenes, hay que hacer una serie de comprobaciones antes de indexar: Revisar las URLS que estén limpias y sin palabras freno como preposiciones o artículos, ni acentos, ni mayúsculas ni “ñ”. Comprobar que los H1 de las páginas son correctos y no hay más de uno por página. Revisar los subtítulos H1 y H2 con palabra clave en algunos. Establecer los títulos SEO y las metadescripciones para favorecer el CTR. Comprobar que la densidad de las palabras clave en todo el sitio es correcta. Revisar que el menú está bien configurado y los enlaces internos no dan errores 404 o de página no encontrada. Eliminar todo el contenido demo o comprueba que no está publicado. Revisar que todas las imágenes están optimizadas. No dejar faltas de ortografía. 10. Indexar el sitio web El último punto a tener en cuenta en cómo hacer una página web es la indexación. Para indexar el sitio hay que desmarcar la opción “disuadir a los motores de búsqueda” y quitar el “Modo mantenimiento”. Además, es necesario configurar el sitemap.xml y subirlo a la cuenta de Google Search Console. Como el sitio es nuevo, las arañas de Google irán rastreándolo poco a poco hasta indexar todas las páginas en sus resultados de búsqueda. Se puede ir comprobando el proceso escribiendo site:tudominio en el navegador para ver las páginas que ya han sido rastreadas. Si para ciertas páginas se desea una indexación más rápida en Google se puede forzarla manualmente desde Search Console. CO N T IN U AR → Lesson 11 of 14 Ideas ejemplos para maquetar y diseñar páginas en WordPress Slider o carrusel de entradas: Los sliders o carruseles de entradas son muy habituales en los sitios web con estructura de blog, sirven para mostrar varias entradas de forma muy visual y con un gran tamaño, pues suelen disponer de una imagen con ancho completo, el título de post, la fecha y demás metadatos, y cuentan con un botón para acceder a su lectura. Son un tipo de recurso de maquetación que no es recomendable para cualquier diseño, pues suelen consumir una gran cantidad de recursos y también tiempo hasta que se deslizan todas las entradas. Listados con varias columnas: Los listados son un recurso muy habitual a la hora de maquetar y diseñar páginas en WordPress. Gracias a ellos se pueden mostrar diferentes clientes, diseños, colaboraciones, trabajos, etc. Si se recurre a distribuir el contenido en varias columnas, se conseguirá un diseño más atractivo y organizado. Header o cabecera con ancho completo: Si hay una tendencia que predomina en el diseño web en estos momentos es la forma de plasmar diferentes elementos y contenido en un solo espacio de forma muy visual y creativa. En este sentido, es habitual encontrar sitios web que tienen cabeceras con ancho completo y en las que incluyen diferentes elementos: texto (títulos, subtítulos, descripciones, etc), botones, imágenes e incluso videos. Tablas de contenido: Las tablas también son un recurso muy utilizado en diseño web, ya que permiten ordenar y mostrar gran cantidad de información en un espacio reducido. Son habituales para mostrar precios, listar contenido, características o detalles de un producto / servicio, etc. Íconos: Los íconos son un recurso gráfico que están muy de moda en diseño web para ilustrar servicios, apartados de una web o diferentes ideas. Además, existen íconos de dos tipos: vectores e íconos web (los que incluyen las plantillas o maquetadores). Galerías de imágenes: Las galerías son un recurso ideal para mostrar diferentes fotografías. Son muy buena idea para páginas de fotógrafos o de cualquier servicio que se pueda mostrar como porfolio de trabajos. Cuadrículas o formato grid: Organizar el contenido en forma de cuadrícula o formato grid es un tipo de diseño que también está muy de moda. Sirve tanto para mostrar entradas de un blog como para presentar diferentes servicios o apartados en una web. Pestañas: Otra forma muy interesante de presentar el contenido son las pestañas. Permiten organizar las entradas de un sitio web en función de diferentes temáticas, categorías o tipos de posts. Aunque parezca un menú, realmente no lo es. Son diferentes pestañas dentro de una página de WordPress que muestran el contenido por categorías (en este caso, como es una web de viajes, por destinos turísticos). Además, cada pestaña incluye una descripción del destino, un botón que lleva a otra página donde hay más información sobre esa ruta y varias entradas en forma de cuadrícula (grid). Animaciones: Las animaciones son otro gran recurso visual que se suele usar para maquetar y diseñar páginas en WordPress de forma muy atractiva y visual. Para usar animaciones hay que seguir ciertos criterios de diseño y animar aquellos elementos que realmente aporten valor y destaquen (no animar por animar sin criterio alguno). Las animaciones están incluidas en la mayoría de las plantillas de pago para WordPress, así como en los diferentes maquetadores visuales. En el caso de querer animar elementos en el sitio web, pero la plantilla no las incluya y no se utilice un maquetador, siempre se puede recurrir al código CSS. Antes de pasar al siguiente y último recurso de diseño, es importante revisar brevemente el efecto Parallax. ¿Qué es el efecto Parallax? Se trata de un efecto que produce un desplazamiento de los elementos a una velocidad diferente a la del resto de la página cuando el usuario se desplaza. Botones: Por último, otro recurso muy extendido son las llamadas a la acción que incluyen botones. Se suelen utilizar como elemento único o como acompañamiento a títulos o llamadas a la acción. Además, también sirven para colocar disparadores, es decir, ventanas emergentes que aparecen cuando se hace clic en un botón. CO N T IN U AR → Lesson 12 of 14 Ejercicios Estimado(a) estudiante: Una vez realizada la lectura comprensiva del materias de estudio, lo(a) invitamos a realizar una serie de ejercicios de aplicación de conocimientos. Question 01/05 Cuando se diseña la estructura y contenidos de una página web, ¿en qué se debe poner atención? I. Colores, tipografía y logotipos. II. Estructura. III. Contenido. IV. Diseño. I y II I, III y IV II, III y IV Todas Question 02/05 "Escoger un mal dominio o servidor puede afectar directamente la visibilidad y a las ventas o conversiones"¿A qué hace referencia esta descripción? Seleccionar e instalar un tema de WordPress. Diseñar la estructura y contenidos del sitio. Instalar los plugins. Elegir dominio y hosting. Question 03/05 El slider o carrusel sirve para: Mostrar varias entradas de forma muy visual y con un gran tamaño. Plasmar diferentes elementos y contenido en un solo espacio. Mostrar diferentes clientes, diseños, colaboraciones y trabajos. Ilustrar servicios, apartados de una web o diferentes ideas. Question 04/05 Hearder es: Forma de plasmar diferentes elementos y contenido en un solo espacio de forma muy visual y creativa. Recurso ideal para mostrar diferentes fotografías. Organizar el contenido en forma de cuadrícula o formato grid. Organizar las entradas de un sitio web en función de diferentes temáticas. Question 05/05 "Permiten ordenar y mostrar gran cantidad de información en un espacio reducido." Esta descripción hace referencia a: Listado con varias columnas. Tablas de contenido. Cabecera con ancho completo. Carrusel de entradas. Lesson 13 of 14 Conclusión Para concluir... – Aunque es muy fácil construir una web con WordPress, hay que tener claro que tomará tiempo y que quizás haya aspectos que no se puedan personalizar del todo. Además, también hay que elegir un hosting especializado y optimizado para WordPress lo que es fundamental a la hora de hacer una página web. Para finalizar, si se considera que no se cuenta con el tiempo suficiente o hay puntos que escapan a la comprensión, lo mejor es siempre que ponerse en manos de un diseñador web. Nos vemos en un próximo aprendizaje, adiós. CO N T IN U AR → Lesson 14 of 14 Evaluación Question 01/08 ¿Cuáles son algunos aspectos importantes a considerar al elegir una plataforma de comercio electrónico? El número de seguidores en redes sociales La cantidad de anuncios publicitarios que se pueden poner en la plataforma La posibilidad de búsqueda intuitiva y la existencia de categorías La cantidad de colores disponibles para personalizar la tienda Question 02/08 ¿Qué aplicaciones pueden ayudar a automatizar gran parte del proceso de dropshipping? Amazon Aliexpress Oberlo Question 03/08 ¿Qué significa CSM en inglés y cuál es su función principal? Content System Manager, diseñar sitios web estáticos. Content Management System, administrar contenidos dinámicos de forma sencilla. Creative Site Maker, crear sitios web de manera innovadora. Question 04/08 ¿Por qué es beneficioso utilizar un CSM para administrar un sitio web? Permite concentrarse en la parte operativa del sitio web. Garantiza un mejor desempeño de las páginas y una buena experiencia al usuario. Ambas opciones son correctas. Question 05/08 ¿Qué tipo de elementos son soportados por un CSM? Edición de textos y códigos de sitios web. Moderación de comentarios. Control de inventario y sistema de ventas (si es e-commerce) Todas las opciones son correctas. Question 06/08 ¿Qué se busca en la segunda etapa del embudo de ventas? Ofrecer contenido más específico y que ayude al usuario a solucionar su problema. Fidelizar al cliente. Convertir al usuario en un comprador leal. Question 07/08 ¿Qué se busca en la última etapa del embudo de ventas? Fidelizar al cliente. Convertir al usuario en un comprador leal. Dar a conocer la marca y ser visible para el público objetivo. Question 08/08 Qué estrategias de marketing pueden utilizarse para atraer tráfico al sitio web en la parte superior del embudo de ventas? Inbound y outbound marketing Publicidad en periódicos y revistas Ventas directas y telemarketing Marketing de guerrilla y patrocinios deportivos