Qué es un CMS

En Programación escribes cada página a mano: un archivo HTML por página, y si quieres cambiar un texto, abres el código. Funciona muy bien para webs pequeñas, pero imagina un periódico que publica cincuenta noticias al día, o un cliente que quiere actualizar su web sin saber HTML.

Para eso existen los CMS (Content Management System, sistema de gestión de contenidos): programas que se instalan en un servidor y permiten crear y editar la web desde un panel de administración, con formularios y botones, como quien escribe en un procesador de textos.

Cómo funciona por dentro

Una web hecha a mano es estática: el servidor guarda los archivos HTML tal cual y los envía. Una web con WordPress es dinámica: el HTML se fabrica en el momento, cada vez que alguien la visita.

1. 01PeticiónEl navegador pide una página, igual que en cualquier web (lo vimos en Programación I).
2. 02PHPEn el servidor, WordPress (escrito en el lenguaje PHP) se pone en marcha.
3. 03Base de datosBusca en la base de datos (MySQL) los textos, imágenes y ajustes de esa página.
4. 04HTMLJunta el contenido con el diseño del tema y envía al navegador el HTML resultante.

Idea clave: en un CMS, el contenido (lo que se guarda en la base de datos) está separado del diseño (el tema). Por eso se puede cambiar todo el aspecto de una web sin tocar ni un texto, y escribir una noticia sin pensar en el diseño.

WordPress.org y WordPress.com

WordPress nació en 2003 como una herramienta para escribir blogs y hoy mueve más del 40 % de todas las webs del mundo: medios de comunicación, tiendas, portfolios, webs de empresas. Es software libre: gratuito, y cualquiera puede usarlo, estudiarlo y modificarlo.

Hay dos «WordPress», y conviene no confundirlos:

En clase usamos WordPress.org: lo instalaremos primero en nuestro ordenador y, al final del curso, en un servidor de verdad.

¿WordPress o código a mano?

Ninguna opción es mejor que la otra: depende del proyecto. Un buen profesional sabe cuándo usar cada una.

Fíjate: lo que aprendes en Programación no se pierde con WordPress. Al revés: entender HTML y CSS te permitirá saber qué hace Elementor por debajo, arreglar lo que se rompa y añadir CSS a medida cuando el maquetador no llegue.

Instalar WordPress en local

WordPress necesita un servidor con PHP y una base de datos. En vez de contratar uno, vamos a convertir nuestro ordenador en un servidor de pruebas con Local, un programa gratuito para Windows y Mac. A esto se le llama trabajar en local: la web sólo existe en tu ordenador y nadie más puede verla.

1. Descarga Local desde localwp.com e instálalo.
2. Pulsa + › Create a new site y escribe el nombre del sitio (por ejemplo, portfolio).
3. Elige la configuración Preferred (la recomendada).
4. Escribe un nombre de usuario, una contraseña y un correo para el administrador. Apúntalos: son la llave de tu web.
5. Cuando termine, pulsa Open site para ver la web y WP Admin para entrar en el panel.

Truco: al panel de administración de cualquier WordPress se entra añadiendo /wp-admin a la dirección de la web: portfolio.local/wp-admin.

El escritorio

Al entrar al panel llegas al escritorio. A la izquierda está el menú con todas las secciones:

Arriba hay una barra negra, la barra de administración, que también aparece cuando visitas la web con la sesión iniciada. Desde ella puedes saltar del panel a la web y viceversa, o editar la página que estás viendo.

Los primeros ajustes

Antes de crear contenido, conviene dejar bien configuradas unas pocas cosas en el menú Ajustes:

• Generales: el título del sitio, la descripción corta (una frase que lo resume), el idioma (español) y la zona horaria (Madrid).
• Enlaces permanentes: elige Nombre de la entrada. Así las direcciones serán legibles (/sobre-mi/) en lugar de números (/?p=123). Hazlo al principio: cambiarlo después rompe los enlaces.
• Lectura: decide si la portada muestra las últimas entradas (un blog) o una página fija (lo normal en un portfolio o una web de empresa).
• Lectura: mientras la web está en construcción, marca Pedir a los motores de búsqueda que no indexen este sitio. No te olvides de desmarcarlo al publicarla.
• Comentarios: si la web no los necesita, desactívalos en Ajustes › Comentarios. Te ahorrarás mucho spam.

Borra también el contenido de ejemplo que trae WordPress: la entrada «¡Hola, mundo!», la página de ejemplo y el comentario de prueba.

Usuarios y roles

Una web puede tener varias personas que la gestionan, y no todas necesitan poder hacerlo todo. Cada usuario tiene un rol:

Idea clave: cuando hagas una web para un cliente, no le des el rol de administrador si no lo necesita. Con el de editor puede actualizar todo el contenido sin riesgo de romper el diseño o borrar un plugin por error.

Práctica

1. Instala Local y crea un sitio llamado portfolio. Guarda en un lugar seguro el usuario y la contraseña.
2. Recorre todas las secciones del escritorio y escribe una frase sobre qué hay en cada una.
3. Configura los ajustes de la lista de comprobación y borra el contenido de ejemplo.
4. Crea un segundo usuario con el rol de editor, entra con él en una ventana privada del navegador y comprueba qué secciones del menú han desaparecido.

Entradas y páginas

WordPress tiene dos tipos de contenido, y elegir bien cuál usar es lo primero que hay que aprender:

Pruébate: ¿entrada o página?

Categorías y etiquetas

Sirven para organizar las entradas y para que quien visita la web encuentre lo que busca:

• Las categorías son los grandes cajones temáticos, pocos y fijos, como las secciones de un periódico: Ilustración, Diseño web, Fotografía. Pueden tener subcategorías. Toda entrada tiene al menos una.
• Las etiquetas describen detalles concretos de cada entrada, como palabras clave: acuarela, Figma, cartel. Son opcionales y puede haber muchas.

WordPress crea automáticamente una página para cada categoría y cada etiqueta, con todas sus entradas. Por ejemplo, /category/ilustracion/.

Ojo: WordPress trae una categoría llamada «Sin categoría». Cámbiale el nombre en Entradas › Categorías por uno que tenga sentido en tu web, porque se mostrará en público.

Imágenes y medios

Todo lo que subes (imágenes, vídeos, PDF) se guarda en la biblioteca de medios. Las imágenes son lo que más pesa en una web, así que aquí se aplica todo lo que aprendiste en Medios I:

• Redimensiona antes de subir: una imagen a todo lo ancho no necesita más de 1600–2000 px. Una foto del móvil de 4000 px pesa varios megas sin ninguna necesidad.
• Comprime: JPG o WebP para fotos, PNG para gráficos con transparencia, SVG para logotipos. Que ninguna pase de unos 300 KB.
• Pon nombre al archivo antes de subirlo: cartel-festival-jazz.jpg, no IMG_4532.jpg.
• Escribe el texto alternativo de cada imagen en la biblioteca: describe lo que se ve, para las personas que no pueden verla y para los buscadores.

Al subir una imagen, WordPress crea automáticamente varias copias de distintos tamaños (miniatura, mediano, grande) y usa en cada sitio la más adecuada.

Cada entrada puede tener una imagen destacada: la que la representa en los listados, en la portada del blog y al compartirla en redes. Se elige en la columna derecha del editor.

Fíjate: WordPress no admite SVG por defecto, por seguridad (un SVG puede llevar código dentro). Para subir logotipos en SVG hace falta un plugin como Safe SVG, que los revisa antes de aceptarlos.

El editor de bloques

Al crear una entrada o una página se abre el editor de bloques (también llamado Gutenberg). Cada elemento del contenido es un bloque: un párrafo, un encabezado, una imagen, una lista, un botón. Son, en el fondo, las etiquetas HTML que ya conoces.

• Para añadir un bloque, pulsa el + o escribe / al principio de una línea y el nombre del bloque: /imagen, /lista, /encabezado.
• Al seleccionar un bloque aparece una barra con sus opciones básicas, y la columna derecha muestra todos sus ajustes.
• La vista de lista (el icono de tres rayas arriba a la izquierda) muestra todos los bloques en orden, como el panel de capas de Photoshop.
• Respeta la jerarquía de encabezados, como en HTML: el título de la entrada ya es el h1, así que dentro usa h2, h3…

Los botones de arriba a la derecha son Guardar borrador, Vista previa y Publicar. Una entrada no se ve en la web hasta que se publica, y también se puede programar para que se publique sola en una fecha.

Idea clave: en este curso usaremos el editor de bloques para escribir el contenido de las entradas (textos, imágenes), y Elementor para maquetar las páginas y las plantillas con un diseño a medida.

Práctica

1. Planifica el contenido de tu portfolio: qué páginas tendrá (Inicio, Sobre mí, Proyectos, Contacto…) y qué categorías para los proyectos. Dibuja el esquema en papel o en Figma.
2. Crea las páginas, aunque de momento sólo tengan un título y un párrafo.
3. Crea las categorías y publica al menos cuatro entradas, una por proyecto, con texto, dos o tres imágenes optimizadas, imagen destacada, categoría y etiquetas.
4. Comprueba en la biblioteca de medios que ninguna imagen pasa de 300 KB y que todas tienen texto alternativo.

Qué es un tema

Un tema es el conjunto de plantillas y estilos que decide cómo se ve la web: la tipografía, los colores, dónde va el menú, cómo se muestra una entrada. Como el contenido está separado del diseño, se puede cambiar de tema y todo el contenido sigue ahí.

Se instalan en Apariencia › Temas › Añadir tema. Hay miles gratuitos en el directorio oficial, y otros de pago. Sólo puede haber un tema activo a la vez.

Hello Elementor: un tema casi vacío

Como el diseño lo vamos a hacer con Elementor, no nos interesa un tema que traiga mucho diseño propio: estorbaría. Usaremos Hello Elementor, un tema gratuito de los creadores de Elementor, casi en blanco, muy ligero y pensado para que todo el diseño se haga con el maquetador.

1. Ve a Apariencia › Temas › Añadir tema y busca Hello Elementor.
2. Pulsa Instalar y después Activar.
3. Borra los temas que no uses (deja sólo uno de los que trae WordPress, como reserva por si algo falla).

Qué es un plugin

Un plugin es una extensión que añade una función a WordPress: un formulario de contacto, una galería, una tienda, copias de seguridad automáticas. Hay más de 60.000 gratuitos en el directorio oficial. Elementor y ProElements, que veremos en los próximos temas, son plugins.

Se instalan en Plugins › Añadir nuevo plugin: se buscan por nombre, se instalan y se activan. Un plugin instalado pero desactivado no hace nada.

Cómo elegir un plugin

Cualquiera puede publicar un plugin, y uno malo puede ralentizar la web, chocar con otros o abrir un agujero de seguridad. Antes de instalarlo, mira en su ficha:

• Última actualización: hace semanas o pocos meses. Si lleva más de un año sin actualizarse, descártalo.
• Instalaciones activas: cuantas más, más probado está.
• Valoraciones: la media y, sobre todo, lo que dicen las malas.
• Compatibilidad: que funcione con tu versión de WordPress.

Idea clave: cuantos menos plugins, mejor. Cada uno es código que hay que cargar, actualizar y vigilar. Antes de instalar uno, pregúntate si de verdad lo necesitas, y desinstala (no sólo desactives) los que no uses.

Los imprescindibles

Casi todas las webs acaban necesitando lo mismo. Éstos son algunos de los plugins gratuitos más usados para cada cosa (basta con uno por función):

Práctica

1. Instala y activa el tema Hello Elementor. Mira tu web: ¿qué ha cambiado y qué sigue igual?
2. Busca en el directorio un plugin de galerías de imágenes y compara tres según la lista de comprobación. Escribe cuál elegirías y por qué.
3. Instala Safe SVG y sube el logotipo que diseñaste en Illustrator.

Instalar Elementor y conocer el editor

Instala el plugin Elementor desde Plugins › Añadir nuevo plugin y actívalo. Después, abre cualquier página y pulsa Editar con Elementor. El editor tiene tres zonas:

• Al hacer clic sobre un elemento del lienzo, el panel muestra sus opciones en tres pestañas: Contenido (el texto, la imagen, el enlace), Estilo (colores, tipografía, bordes) y Avanzado (márgenes, rellenos, animaciones, visibilidad).
• El navegador muestra la estructura de la página en forma de árbol, como la vista de lista del editor de bloques o el panel de capas de Photoshop. Es la forma más segura de seleccionar un elemento que está dentro de otro.
• El historial permite deshacer (también con Ctrl/Cmd + Z) y volver a versiones anteriores de la página.

Truco: en Ajustes de la página (el engranaje) elige el diseño Elementor a ancho completo para que la página ocupe todo el ancho, o Elementor Canvas para una página totalmente en blanco, sin cabecera ni pie (útil para una página de «próximamente»).

Contenedores

Toda página de Elementor se construye con contenedores: cajas que agrupan elementos y los colocan. Un contenedor puede tener dentro widgets y también otros contenedores, como las cajas anidadas de HTML.

Y aquí viene lo bueno: un contenedor de Elementor es un Flexbox o un Grid, exactamente lo que estudiaste en Programación I. Las opciones del panel son las propiedades de CSS con otro nombre:

Si quieres repasar estas propiedades, las tienes en el esquema de Recursos.

Idea clave: piensa la página como una pila de secciones a todo lo ancho (un contenedor para la cabecera, otro para los proyectos, otro para el contacto) y, dentro de cada una, contenedores en fila o en columna. Igual que harías en HTML con <section> y <div>. Pon nombre a los contenedores en el navegador: te orientarás mucho mejor.

Los widgets básicos

Los widgets son los elementos que se arrastran desde el panel a los contenedores. La versión gratuita de Elementor trae los fundamentales:

Ojo: que algo se vea grande no lo convierte en un título. Usa el widget Título con el nivel correcto (sólo un H1 por página) y cambia su tamaño en la pestaña Estilo. La estructura semántica importa igual que en HTML.

Estilos globales

Si cambias el color de cada botón uno por uno, el día que el cliente quiera otro azul tendrás que repetirlo en cincuenta sitios. Para evitarlo, Elementor tiene los ajustes del sitio (en el menú de la barra superior), donde se define el estilo de toda la web una sola vez:

• Colores globales: la paleta de la web (principal, secundario, texto, acento…). Usa siempre estos colores, no uno escrito a mano: así, al cambiar un color global, cambia en toda la web.
• Fuentes globales: las tipografías y tamaños para títulos, texto y botones.
• Tipografía, botones, imágenes, campos de formulario: el estilo por defecto de cada elemento.
• Diseño: el ancho máximo del contenido y el espacio por defecto entre elementos.

Fíjate: los colores y las fuentes globales son lo mismo que las variables de CSS de Programación o las muestras globales de Illustrator: se define una vez y se reutiliza en todas partes. Antes de maquetar nada, traslada a los ajustes del sitio la paleta y las tipografías de tu diseño en Figma.

Diseño responsive

Con el icono de dispositivos de la barra superior se cambia entre las vistas de ordenador, tableta y móvil. Las páginas son responsive desde el principio, pero casi siempre hay que ajustar algo:

• Las opciones que tienen al lado el icono de un dispositivo se pueden cambiar sólo para ese tamaño: por ejemplo, un título de 64 px en ordenador y de 36 px en móvil, o un contenedor en fila que pasa a columna.
• Lo que cambias en ordenador se hereda en tableta y móvil, salvo que lo cambies ahí. Por eso conviene diseñar primero el ordenador y después ir revisando las vistas más pequeñas.
• En Avanzado › Responsive se puede ocultar un elemento en un tamaño concreto. Úsalo con moderación: el contenido oculto sigue cargándose.

Detrás de todo esto están las media queries que viste en Programación I: Elementor las escribe por ti.

Práctica

1. Instala Elementor y define en los ajustes del sitio los colores y las fuentes globales de tu portfolio, sacados de tu diseño en Figma.
2. Maqueta la página de Inicio con al menos tres secciones: una cabecera de presentación con título y botón, una cuadrícula de proyectos y una llamada al contacto.
3. Pon nombre a todos los contenedores en el navegador.
4. Revisa las vistas de tableta y móvil y ajusta lo necesario: que no haya scroll horizontal y que los textos se lean bien.

Qué es ProElements

ProElements es un plugin gratuito que añade a Elementor casi todas las funciones de la versión Pro: el constructor de temas, los formularios, las ventanas emergentes, el contenido dinámico y muchos widgets más. Necesita tener instalado Elementor (el gratuito), porque funciona como una extensión suya.

¿Cómo puede existir algo así? Elementor, como WordPress, tiene una licencia de software libre (GPL) que permite usar, copiar y modificar su código. ProElements aprovecha esa licencia. Es legal, pero conviene conocer sus diferencias con Elementor Pro:

Idea clave: ProElements es perfecto para aprender y para proyectos personales. En una web profesional para un cliente, lo recomendable es comprar la licencia de Elementor Pro: tendrás actualizaciones automáticas (importantes para la seguridad) y soporte si algo falla. Inclúyela en el presupuesto.

Instalar ProElements

1. Comprueba que Elementor (el gratuito) está instalado y activado.
2. Descarga el archivo .zip de la última versión desde proelements.org. No lo descomprimas.
3. Ve a Plugins › Añadir nuevo plugin › Subir plugin, elige el .zip y pulsa Instalar ahora. Después, Activar.

Descárgalo siempre de su web oficial, nunca de otras páginas: un plugin descargado de cualquier sitio puede llevar código malicioso.

El constructor de temas

Hasta ahora, con Elementor diseñabas el contenido de cada página, pero la cabecera, el pie y el aspecto de las entradas los ponía el tema. El constructor de temas (Plantillas › Constructor de temas) permite diseñar con Elementor esas partes que se repiten en toda la web:

Al publicar una plantilla, Elementor pregunta dónde se muestra: son las condiciones. Lo normal es «Todo el sitio» para la cabecera y el pie, y «Todas las entradas» para la plantilla de entrada individual. También se puede crear, por ejemplo, una cabecera distinta sólo para la portada.

Fíjate: una plantilla de entrada individual se diseña una vez y se aplica a todas las entradas, las de hoy y las que se escriban dentro de cinco años. Es la gran ventaja de un CMS: el cliente sólo escribe el texto y sube las fotos, y el diseño se pone solo.

Contenido dinámico

En una plantilla no se escribe el título de una entrada concreta: se pone un hueco que WordPress rellenará con el título de cada entrada. Es el contenido dinámico.

• Hay widgets que ya son dinámicos: Título de la entrada, Imagen destacada, Contenido de la entrada, Metadatos (fecha, autoría, categorías).
• En muchos campos de otros widgets aparece el icono de etiquetas dinámicas (una pila de discos): sirve para rellenar ese campo con un dato de la web, como el título del sitio, el logotipo o el enlace a la entrada.
• El widget Entradas (o el Loop Grid, más flexible) muestra automáticamente una cuadrícula con las últimas entradas, o las de una categoría. Perfecto para la sección de proyectos de un portfolio: cada proyecto nuevo aparecerá solo.

Menús, formularios y ventanas emergentes

Menús

Los menús se crean en WordPress, en Apariencia › Menús: se eligen las páginas, se ordenan arrastrando y se guardan con un nombre. Después, en la plantilla de cabecera, el widget Menú muestra ese menú y lo convierte en un botón de hamburguesa en el móvil, sin escribir código.

Formularios

El widget Formulario permite crear formularios de contacto con los campos que quieras (nombre, correo, mensaje, una casilla de aceptación). En Acciones después del envío se decide qué pasa al enviarlo, normalmente enviar un correo a una dirección.

Ojo: en local, los formularios no envían correos, porque tu ordenador no es un servidor de correo. Para probarlos, Local tiene una herramienta llamada Mailpit que captura los correos enviados. En un servidor real sí funcionarán. Y recuerda añadir una casilla para aceptar la política de privacidad: lo exige la ley (lo vemos en el Tema 6).

Ventanas emergentes

Con Plantillas › Ventanas emergentes se diseñan popups: avisos, suscripciones a un boletín, una galería ampliada. Se decide cuándo aparecen (al cargar, al hacer clic en un botón, al ir a salir de la página). Úsalos con mucha moderación: una ventana que interrumpe sin motivo es una de las cosas que más molestan al navegar.

Práctica

1. Instala ProElements siguiendo los pasos de este tema.
2. Crea el menú principal en Apariencia › Menús y diseña con el constructor de temas la cabecera (logotipo y menú) y el pie de tu portfolio, con la condición «Todo el sitio».
3. Diseña la plantilla de entrada individual para tus proyectos, usando sólo widgets dinámicos. Comprueba que se aplica a todas las entradas.
4. En la página de Inicio, sustituye la cuadrícula de proyectos hecha a mano por un widget Entradas o Loop Grid.
5. Crea la página de Contacto con un formulario que tenga casilla de aceptación de la privacidad.

Hosting y dominio

Para que la web sea pública hacen falta dos cosas, que vimos en el Tema 0 de Programación I:

• Un hosting (alojamiento): espacio en un servidor conectado a internet las 24 horas. Para WordPress, busca uno que ofrezca PHP y MySQL actualizados, copias de seguridad, certificado SSL gratuito (para el https) e instalador de WordPress con un clic. Para webs pequeñas basta un hosting compartido, de unos pocos euros al mes.
• Un dominio: el nombre de la web (tunombre.es), que se alquila por años. Muchos hostings incluyen el primer año gratis.

Para practicar sin pagar existen alojamientos gratuitos, con limitaciones, pero para un portfolio profesional merece la pena un hosting y un dominio propios: dicen mucho de ti.

De local a internet

Una web de WordPress no es sólo una carpeta de archivos: también tiene la base de datos. Por eso, para moverla de Local a un servidor se usa un plugin de migración, que lo empaqueta todo en un archivo:

1. 01ExportarEn la web local, el plugin (Duplicator o All-in-One WP Migration) crea un paquete con archivos y base de datos.
2. 02PrepararEn el hosting, instala un WordPress limpio con el instalador de un clic, o prepara una base de datos vacía.
3. 03ImportarSube el paquete con el mismo plugin: sustituye todo por el contenido de tu web local.
4. 04RevisarEntra con tu usuario de local, guarda los enlaces permanentes y repasa que todo funcione.

Ojo: después de publicar, ve a Ajustes › Lectura y desmarca la casilla que pide a los buscadores no indexar el sitio. Es el error más habitual: la web está publicada, pero Google no la muestra.

Actualizaciones, copias y seguridad

WordPress es tan popular que es el objetivo favorito de los ataques automáticos. La mayoría de webs hackeadas lo son por descuido. Con estas costumbres, tu web estará a salvo:

• Actualiza WordPress, el tema y los plugins en cuanto haya versiones nuevas: muchas corrigen fallos de seguridad. Recuerda que ProElements no avisa: revisa su web de vez en cuando.
• Haz una copia de seguridad antes de actualizar, y programa copias automáticas (con UpdraftPlus, por ejemplo) guardadas fuera del servidor, como en Google Drive.
• Usa una contraseña larga y única, y no llames admin al usuario administrador: es lo primero que prueban los ataques.
• Activa la verificación en dos pasos y limita los intentos de acceso (Wordfence lo hace).
• Instala sólo plugins y temas del directorio oficial o de sus webs oficiales. Nunca versiones «gratis» de plugins de pago descargadas de webs dudosas: suelen llevar virus.
• Borra los plugins y temas que no uses.

Lo que pide la ley

En España, una web que se publica, sobre todo si es de una empresa o recoge datos, tiene que cumplir varias leyes: el RGPD (protección de datos, europeo), la LOPDGDD (su versión española) y la LSSI (servicios de internet). En la práctica, la web necesita:

Plugins como Complianz ayudan a generar estos textos y el aviso de cookies. Aun así, en una web para un cliente, lo recomendable es que los revise un profesional del derecho.

SEO básico

El SEO (Search Engine Optimization) es el conjunto de buenas prácticas para que una web aparezca bien en los buscadores. Lo esencial está a tu alcance:

• Contenido bien estructurado: un H1 por página, encabezados en orden, textos útiles. Lo mismo que en Programación.
• Título y metadescripción de cada página: el texto azul y el resumen que aparecen en los resultados de Google. Con un plugin como Yoast SEO o Rank Math se escriben en un recuadro debajo de cada página.
• Direcciones legibles (los enlaces permanentes del Tema 1) e imágenes ligeras y con texto alternativo (Tema 2).
• Google Search Console: una herramienta gratuita de Google para avisarle de que tu web existe, enviarle el mapa del sitio (WordPress lo genera solo, en /wp-sitemap.xml) y ver con qué búsquedas te encuentran.

Práctica

1. Compara tres hostings para WordPress: precio del primer año y de la renovación, si incluyen dominio, SSL, copias de seguridad e instalador de WordPress.
2. Instala un plugin de copias de seguridad, haz una copia completa de tu web local y comprueba dónde se ha guardado.
3. Crea las páginas de aviso legal, privacidad y cookies con un plugin como Complianz, y enlázalas desde el pie.
4. Escribe el título y la metadescripción de cada página de tu portfolio.

El encargo

Diseña y construye con WordPress la web de un cliente ficticio (un estudio de diseño, un festival, un restaurante, una asociación…) o tu propio portfolio. Tiene que ser una web que el cliente pueda actualizar sin ti: añadir proyectos, noticias o eventos sin tocar el diseño.

1. 01PlanificarObjetivo de la web, público, páginas y contenido. Mapa del sitio.
2. 02DiseñarWireframes y diseño visual en Figma, en ordenador y móvil, con paleta y tipografías.
3. 03ConstruirWordPress en local: contenido, ajustes del sitio, plantillas y páginas con Elementor.
4. 04RevisarResponsive, accesibilidad, velocidad, textos legales, SEO.
5. 05PublicarMigración al hosting y revisión final en internet.

Requisitos

Obligatorios para aprobar:

• Al menos cinco páginas, entre ellas Inicio y Contacto, más los textos legales.
• Una sección que se alimenta de entradas (proyectos, noticias o eventos), con al menos seis, organizadas en categorías.
• Cabecera, pie y plantilla de entrada individual hechas con el constructor de temas.
• Colores y fuentes globales definidos en los ajustes del sitio, sin colores escritos a mano.
• Formulario de contacto con casilla de privacidad.
• Funciona bien en ordenador, tableta y móvil, sin scroll horizontal.
• Imágenes optimizadas (ninguna de más de 300 KB) y con texto alternativo; un solo H1 por página.
• Un usuario con rol de editor para el cliente.

Para subir nota (elige los que quieras):

• La web publicada en un hosting real, con dominio propio.
• Una ventana emergente o una animación de entrada usadas con criterio.
• Una página de error 404 diseñada.
• Título y metadescripción en todas las páginas, y la web dada de alta en Google Search Console.
• Algún detalle con CSS personalizado (ver el bloque «Para saber más»).

selector:hover {
  transform: translateY(-4px);
  transition: transform 0.3s ease;
}

Entrega

• El diseño en Figma (enlace con permiso de lectura).
• La dirección de la web publicada o, si está en local, el paquete exportado con Duplicator o All-in-One WP Migration.
• Un usuario de editor para la revisión.
• Una memoria breve: el cliente, las decisiones de diseño, los plugins usados y por qué, y qué mejorarías con más tiempo.

Idea clave: este proyecto puede ser la mejor pieza de tu portfolio. Documenta el proceso (bocetos, capturas de antes y después) igual que documentas un proyecto de diseño: a quien te contrate le interesa tanto el resultado como cómo has llegado a él.