Diseño y

desarrollo de
websites
 Diseño y desarrollo de websites
Ayuda

0. Objetivos

1. Introducción

2. Planteamiento del sitio web

3. Estructura de la información

4. El diseño responsive

5. La maqueta (mockup)

6. Color y tipografía

7. Elementos gráficos

8. Dominio y hospedaje

9. El escritorio de WordPress

10. Temas

11. Contenido

12. Plugins

13. Menú principal

14. Conclusiones

Bibliografía

Fin de módulo
Ayuda

PASO 1. Accede desde

el menú principal al
listado de los apartados
de la unidad y sus
secciones.
PASO 2. Muévete entre
las secciones del
apartado utilizando las
flechas y .
PASO 3. Avanza al
siguiente apartado con
las flechas laterales.
PASO 4. Presta atención
a las instrucciones. Te
indicarán cómo
interactuar con los
contenidos.
PASO 5. No olvides
hacer clic en todos los
textos que estén en azul
para ver más
información.

Recuerda revisar todo el contenido de cada módulo.

0. Objetivos

En este manual se detallan una serie de procedimientos y recursos mediante los

cuales usted podrá desarrollar diferentes tipos de sitios web sin necesidad de
extensos conocimientos técnicos. En conjunto con el resto de los módulos
impartidos en este máster, estos recursos le serán de mucha utilidad a la hora de
implementar una estrategia de marketing digital efectiva.

Lo que se plantea aquí es una guía para ejecutar un proyecto de sitio web desde el
concepto hasta la puesta en funcionamiento. Para ilustrar esta guía se desarrollará
un ejemplo utilizando un gestor de contenidos cuyo conocimiento podrá ser de
utilidad en proyectos futuros.
1. Introducción

La Real Academia Española define una página web como “el documento situado
en una red informática, al que se accede mediante enlaces de hipertexto”. Así
pues, podríamos definir un sitio web como el conjunto de dichos documentos.

Hoy en día los sitios web son mucho más que documentos digitales disponibles
para su consulta. En ellos también podemos reproducir imágenes, escuchar
música, conversar, jugar, comprar y desarrollar experiencias que parecían historias
de ciencia ficción cuando se creó la web en los primeros años de la década de
1990.
 Primera página web de Microsoft.

El diseño de estas primeras páginas era muy básico y prácticamente se limitaba a

cajas de texto, colores sólidos y pequeñas animaciones en formato GIF. Hay que
tener en cuenta que la velocidad de transferencia de datos en aquella época era
de apenas unos pocos kB por segundo y que el desarrollo de las páginas web
estaba prácticamente reservado a los programadores, por lo que el código era el
aspecto fundamental y no el diseño. El ancho de banda disponible fue
aumentando rápidamente, así como la capacidad de los navegadores para mostrar
elementos gráficos. Las posibilidades en el campo del diseño se multiplicaron
provocando la aparición de perfiles profesionales especializados: los diseñadores
web.

El número exacto de sitios web que existen hoy en día es muy difícil de calcular;
según la web Internet Live Stats (www.internetlivestats.com), que muestra
diversas estadísticas en tiempo real, el número actual de sitios web está cerca de
llegar a los dos billones. Aunque es muy probable que el número real de sitios
activos sea muy inferior y que muchas páginas web hayan sido creadas como
copias exactas unas de otras —principalmente con el objetivo de captar más
tráfico—, la gran mayoría de páginas web son diferentes entre sí y, por lo tanto,
únicas. Los sitios web están “vivos” y se regeneran constantemente.

Diseño web de los años 90.

En el ámbito del marketing digital, las webs se orientan a la consecución de unos

objetivos previamente establecidos como pueden ser, por ejemplo, la captación de
datos, visibilizar una marca o un producto, visibilizar servicios, e-commerce,
información o generar confianza.

Actualmente, para que un sitio tenga éxito en internet hay que considerar el
diseño como un aspecto fundamental y debe ser fruto de una estrategia muy
planificada.

Un buen especialista en marketing digital debe saber que el diseño es clave

para lograr que el usuario realice las acciones deseadas dentro de un sitio
web. Por otro lado, el especialista en marketing digital también debe tener
ciertos conocimientos técnicos sobre el propio funcionamiento de las páginas
web, tanto si se trata de dirigir un proyecto, un equipo, o si tiene intención de
realizar un proyecto personal.

En cuanto al desarrollo de los sitios, también existen múltiples formas de

afrontarlo. Hoy en día existen herramientas que permiten la creación y
mantenimiento de páginas web de una forma más o menos automatizada, son los
llamados CMS (content management system) o gestores de contenido. Muchos
sitios web de éxito son creados o se mantienen con este tipo de herramientas y
por eso es necesario conocerlas.

En la actualidad el CMS más popular es WordPress, se calcula que más del 30 %

de los sitios web del mundo están realizados con WordPress, aumentando este
porcentaje en España hasta el 60 %, más de 500 páginas nuevas se crean
diariamente utilizando está herramienta. El pasado año, la última versión de
WordPress acumuló más de 8 millones de descargas en menos de un mes.

Podríamos afirmar que el diseño web es una mezcla de técnica y creatividad,

aunque no hay que olvidar que en el campo del marketing digital ambos aspectos
están siempre al servicio de una estrategia.

El diseño de una página web engloba actividades de planificación, diseño,

implementación y mantenimiento de sitios web.
2. Planteamiento del sitio web

Como ya he comentado anteriormente, en la red existen millones de sitios web

diferentes que se pueden clasificar dependiendo del contenido y el uso particular
de cada uno. Podríamos establecer una serie de categorías, por ejemplo: sitios de
noticias, de descargas, de vídeos, de apuestas, de spam, para adultos, para niños,
blogs personales, de comercio electrónico, comunidades virtuales, etc.

En el ámbito del marketing digital el sitio web formará parte de una estrategia más
amplia basada en estudios sobre el mercado, la competencia, los productos, los
servicios y los clientes. Tras la recopilación de toda esta información,
generalmente, se elabora un briefing que reúne las claves del proyecto que se ha
de materializar, y en el mismo debe quedar muy claro el tipo de sitio que vamos a
desarrollar, ya que esto determinará aspectos como el diseño, la usabilidad o el
contenido.

Para un mejor entendimiento de este manual, vamos a enfocarlo en un ejemplo

que sería el desarrollo de una web especializada en el sector del mobiliario y la
decoración para el hogar.

A continuación, veremos algunas de las claves que nos ayudarán a dilucidar el tipo
de sitio web que se plantea a través de unas cuestiones que deberían poder ser
resueltas mediante el briefing previo que se debe realizar antes del desarrollo de
una página web:

¿Para qué queremos el sitio web?

Dependiendo del proyecto, los objetivos del sitio web pueden variar. Por
ejemplo, si quisiéramos desarrollar la web corporativa de una empresa, el
objetivo principal podría ser la captación de clientes para la venta de
productos o servicios. En el caso de nuestra web sobre mobiliario y
decoración, el objetivo es construir un sitio que ofrezca información
especializada en el sector del mueble y la decoración para el hogar.
¿A quién se dirige el sitio web?

Aunque habría que realizar un análisis del mercado mucho más exhaustivo, en
principio se podría afirmar que para lograr el objetivo planteado es necesario
atraer visitantes que buscan noticias o consejos sobre cómo decorar o
amueblar su casa. Debemos tener una idea clara sobre nuestro target.

¿Cómo se va a captar el interés de los visitantes?

Una vez que los visitantes lleguen a nuestro sitio web, debemos encontrar la
manera de lograr que realicen las acciones deseadas. Para atraerlos debemos
ofrecerles exactamente aquello que están buscando o contenidos
relacionados, de manera que capten su interés. En el caso de nuestro blog
debemos generar contenido de calidad sobre los temas planteados.

¿Cómo se van a generar ingresos?

Hoy en día existen muchas formas de generar ingresos a través de los sitios
web, como por ejemplo la venta de contenidos, la afiliación, la suscripción a
contenidos o la publicidad. En el caso de nuestro ejemplo, para monetizar el
sitio web se ubicarán varios banners de publicidad en espacios preferentes.

¿Cuándo tiempo hay para desarrollarlo?

Incluso los sitios web más sencillos requieren un volumen de trabajo backend
considerable. El ejemplo que se muestra en este manual se puede llevar a
cabo en un día, pero los sitios web más complejos pueden llevar meses de
trabajo.

Se denomina frontend a la parte de un sitio web que interactúa con los

usuarios.
El backend es la parte que se conecta con la base de datos y el servidor
que utiliza la página web.

¿Qué recursos se aportarán a la creación del sitio?

Debemos tener en cuenta tanto los recursos técnicos como humanos. Un sitio
web puede ser desarrollado por una sola persona o por un equipo de
desarrollo, de forma completamente gratuita, o también se pueden invertir
miles de euros y varias decenas de especialistas.
 ¿Qué herramientas se utilizarán para el desarrollo del sitio web?

Para construir la web de nuestro ejemplo sobre mobiliario y decoración vamos

a utilizar WordPress como gestor de contenidos debido a la sencillez, rapidez
y versatilidad que nos ofrece a la hora de generar sitios web. En la segunda
parte de este manual veremos de forma detallada cómo utilizar esta
herramienta.

WordPress

WordPress es un sistema de gestión de contenidos surgido en 2003 y

funciona utilizando programación PHP y bases de datos MYSQL.

Aunque en sus inicios surgió como una herramienta bastante simple para
publicar blogs personales, ha evolucionado de tal forma que hoy en día
permite la creación de sitios web diferentes y complejos, desde redes sociales
hasta tiendas virtuales.

Está gestionado por una comunidad de cientos de desarrolladores y se ofrece

de forma totalmente abierta y gratuita.

Básicamente, el sistema utiliza las carpetas del servidor web y una serie de
tablas en la base de datos para almacenar todos los archivos que componen la
página web como plantillas de diseño, textos, imágenes y cualquier
funcionalidad que se le vaya añadiendo. Cuando un usuario visita la web, el
sistema extrae los elementos, compone la página y se los muestra.

Diseños de páginas realizadas con WordPress.

3. Estructura de la información

Para ubicar correctamente la información dentro de un sitio web y establecer la

vinculación entre los diferentes documentos debemos tener en cuenta diversos
aspectos como la usabilidad o la accesibilidad. A partir de dichos aspectos
llegaremos a conceptualizar un diseño de página.

Usabilidad web

La usabilidad web hace referencia a la facilidad de uso de una página web.

Accesibilidad web

La accesibilidad web tiene como objetivo lograr que la web sea utilizable por
el mayor número de usuarios, independientemente de sus conocimientos,
capacidades personales y características técnicas del dispositivo que se
utilice.

Desde la aparición de los primeros sitios web surgió la necesidad de reservar

zonas del diseño visible para colocar hipervínculos de navegación en forma de
índice o menú. Estas zonas permanecían comunes a las diferentes páginas y de
esta manera los usuarios se ubicaban mejor entre los diversos documentos.

Las páginas web han evolucionado mucho y funcionan hoy de forma mucho más
dinámica, pero en la mayoría de los diseños sigue prevaleciendo un conjunto de
estructuras básicas que son reconocidas por los usuarios de manera intuitiva.
Estas estructuras son muy similares a las que encontramos en los diarios o
revistas.
Cabecera (Header)
Cabecera (Header)
La cabecera se ubica en la parte superior de la estructura y
generalmente ocupa todo el ancho de la página. En ella se
suelen incluir el logotipo de la empresa o el nombre del sitio
web y el menú de navegación principal.

Barra lateral (Sidebar)

Aunque en ellas podemos encontrar elementos muy diversos, lo

habitual es que se utilicen para ubicar menús de navegación,
cuadros de búsqueda, nubes de etiquetas y otras pequeñas
aplicaciones. Estas aplicaciones son conocidas como widgets y
también los podemos encontrar en otras partes de una página
como la cabecera o el pie de página.

Pie de página (Footer)

El pie de página se ubica en la parte inferior y en este espacio

se suele ubicar información adicional o que no forma parte del
contenido principal, como los enlaces a información legal sobre
el sitio web, condiciones de uso y privacidad.
 Contenido (Content)

En el espacio que no está ocupado por las zonas anteriores, se

ubica el contenido de la página. En muchos sitios web, la carga
de un contenido u otro es una consecuencia directa de las
acciones realizadas en las zonas que contienen la navegación.
Mientras que el contenido cambia constantemente, la cabecera,
el pie de página y las barras laterales suelen permanecer
iguales.

Mapa web

Un mapa web es una relación de los enlaces de navegación ( links) que contiene
el sitio y es fundamental para poder diseñar la estructura de la información en
un sitio web. Una vez que el sitio esté desarrollado, el mapa web se puede
incluir para que el usuario localice de una manera más rápida y precisa una
página determinada. Es aconsejable que los sitios web con muchas páginas
incluyan un mapa web.

El sitio que vamos a construir en este ejemplo web tendrá una página principal
(portada o home) y nueve páginas de artículos (entradas o posts). Las páginas de
los artículos tendrán exactamente el mismo aspecto, por lo que solo tendremos
que elaborar dos diseños diferentes.
4. El diseño responsive

A la hora de plantear un diseño debemos tener en cuenta que una misma página
web será visualizada por los usuarios desde diferentes dispositivos y navegadores,
como, por ejemplo, ordenadores de sobremesa, tablets y móviles. Este problema
ha afectado a los diseñadores desde los inicios de la web, ya que las resoluciones
de los monitores han ido aumentando con los años y actualmente existen una
gran cantidad de formatos diferentes.

El diseño sensible o responsive es una característica del diseño web que trata de
resolver el problema de cómo visualizar una página web en diferentes
resoluciones de pantalla. Entre estos dispositivos encontramos tamaños de
pantalla diferentes y por eso el diseño debe adaptarse a cada una de estas
resoluciones. Mediante la programación de hojas de estilo CSS (cascade style
sheet) tenemos la posibilidad de ocultar o mostrar ciertos elementos o cambiar el
tamaño y la forma de estos.
Diferentes vistas de un diseño web sensible.

Además, también debemos tener en cuenta que la línea de scroll o fin de pantalla
también será diferente. Estas características van a afectar en gran medida al
planteamiento del diseño, ya que requiere precisión a la hora de decidir qué
elementos son fundamentales y cuáles no.

Resoluciones de pantalla más utilizadas.

Existen diferentes herramientas para comprobar la adaptabilidad de un diseño,

como Responsinator (www.responsinator.com).

Una misma página web se puede diseñar para que ciertos elementos que la
componen tengan una diferente visibilidad dependiendo del dispositivo, es decir,
podemos programar que ciertos elementos se oculten, por ejemplo, en su versión
para dispositivos móviles.
5. La maqueta (mockup)

Una vez que tenemos claro el tipo de sitio web que vamos a desarrollar y la
estructura de la información que tendrá el mismo, podemos proceder a elaborar
una maqueta (wireframe), que es una representación gráfica muy simple de la
disposición de los diferentes elementos que componen una página web.

Un wireframe es un esquema de página que representa el esqueleto o estructura

visual de un sitio web.

Las maquetas se pueden realizar a mano o utilizando programas especializados en

prototipado web como Axure (http://www.axure. com/), que permite realizar
bocetos en unos pocos minutos. Este tipo de aplicaciones nos permiten incluso
elaborar prototipos que se pueden ejecutar en los navegadores web y que
incluyen los enlaces entre las diferentes páginas.

Los wireframes lleva poco tiempo hacerlos y aportan un gran valor informativo
para la implementación de los proyectos, permitiendo observar cómo va a ser la
estructura básica de la página web o app.
Maqueta de la portada (home) y de una página de entrada.
6. Color y tipografía

Para elegir la gama de colores de un sitio web podemos basarnos en valores

preestablecidos como pueden ser los colores corporativos de una empresa, o
podemos buscar otro tipo de paletas que aporten un carácter determinado al sitio.
Nuestra elección de los colores para su aplicación en la página web variará en
función de la identidad de marca, la intención y objetivo del mensaje,
dependiendo también del tipo de usuario al que va dirigido el contenido.

Al igual que ocurre con el prototipado, existen herramientas que nos facilitan la
tarea de buscar gamas de colores para un sitio web. Una de las herramientas más
conocidas entre los profesionales del diseño y que se puede utilizar online es
Adobe Color CC (https://color.adobe.com/create/color-wheel/), antes conocida
como Adobe Kuler.

La rueda de color de Adobe Color CC.

Para el ejemplo de sitio web sobre mobiliario y decoración, utilizaremos el blanco,

el negro y una escala de grises para hacer que los contenidos y la publicidad
resalten más.

En cuanto a los tipos de letra o fuentes debemos elegir aquellas que sean legibles
en diferentes tamaños y refuercen el estilo o carácter que le queremos dar al sitio
web. Actualmente existen diferentes repositorios donde encontrar cientos de
familias de letras diferentes, algunas de pago y otras gratuitas. Muchas plantillas
de diseño profesionales como la que utilizaremos en el desarrollo del blog de
ejemplo incluyen la posibilidad de elegir entre varios tipos de letra. Una buena
tipografía permite que el texto sea legible y determina en gran medida el éxito o el
fracaso de nuestro sitio web.

Google ofrece un amplio catálogo de fuentes gratuito. Para elegir una fuente
determinada para nuestro sitio web podemos dirigirnos a Google Fonts
(www.google.com/fonts) en donde encontraremos más de 600 diferentes.
También existe un amplio catálogo de fuentes en la página Best Web Fonts:
www.bestwebfonts.com.

Errores habituales en la elección del tipo de fuente:

Tamaño no adecuado.
Uso excesivo de diferentes fuentes
Abuso de mayúsculas
Uso abusivo de cursivas

Herramienta de búsqueda Google Fonts.

Para el blog de ejemplo utilizaremos la fuente Noto Sans, que se lee muy bien en
diferentes tamaños y tiene un carácter moderno.
7. Elementos gráficos

Los sitios web de hoy en día son completamente dinámicos y permiten la inserción
de todo tipo de elementos multimedia, ya sea como parte de la estructura y la
navegación de la página o como contenido. La versatilidad de las páginas actuales
nos permite combinar estos elementos de forma creativa. Por ejemplo, podemos
utilizar gráficos animados para representar botones o incrustar un vídeo como
fondo de página.

Veamos algunos elementos gráficos que podemos utilizar en la elaboración de

nuestro sitio web:

Iconos

Los iconos representan conceptos de una manera gráfica y generalmente ayudan

al usuario a entender la información de una forma más clara y con mayor rapidez.
Los iconos constituyen una herramienta visual muy potente. Cuando su uso es
correcto mejoran la navegación e inciden en la satisfacción del usuario.

En internet podemos encontrar cientos de colecciones de iconos clasificados por

categorías, por ejemplo en Webalys (www.webalys.com), aunque en los proyectos
web de cierta envergadura se suele contratar a diseñadores para que elaboren
iconos personalizados.
 Paquete de iconos gratis.

Fotografías

Existen multitud de bancos de imágenes donde encontrar fotografías e

ilustraciones para un sitio web, aunque dependiendo del proyecto puede que nos
interese más contratar a fotógrafos. Por ejemplo, para desarrollar una web de e-
commerce lo más habitual es realizar las fotografías de los productos en un estudio
profesional, pero en el caso de nuestro blog sobre mobiliario y decoración es fácil
encontrar muchas imágenes en internet para acompañar a los artículos.

Podemos encontrar imágenes con diferentes licencias de uso en Foter

(http:/foter.com/), PhotoPin (http:/ photopin.com/) o ImageFinder
(http:/imagefinder.co/).
Buscador de fotografías.

A continuación, veamos dos imágenes que vamos a utilizar en el blog de ejemplo:

Vídeos

En los últimos años el vídeo se ha situado como uno de los contenidos que más
consumen los usuarios y ya supone más de la mitad del tráfico de datos en
internet.

La mayoría de los sitios web que alojan contenido en vídeo permiten a los
creadores insertar reproductores en sus páginas copiando unas pocas líneas de
código. De esta manera no se requieren demasiados recursos técnicos para
vincular este tipo de contenido entre los sitios y esto multiplica su viralidad.

Para reproducir un vídeo dentro de una página web se inserta dentro del código
de la página un pequeño fragmento o script que contiene un vínculo al proveedor
del contenido. Con la utilización de gestores de contenidos web como WordPress,
esta tarea resulta mucho más sencilla y en ocasiones se reduce a copiar y pegar el
enlace del vídeo.

Además de los sitios más conocidos como YouTube o Vimeo, también existen
stocks o repositorios donde podemos encontrar clips de vídeo en bruto como
XstockVideo (http://www.xstockvideo.com/) o Pond5 (http://www.pond5. com/).

Banco de vídeos.
8. Dominio y hospedaje

El nombre del dominio es una parte fundamental en toda estrategia digital, ya que
de él puede depender en gran medida el éxito o el fracaso de la misma. Un
dominio fácil de recordar puede ser muy útil a la hora de conseguir tráfico directo
hacia nuestra web, que es aquel en el que el usuario accede tecleando
directamente el dominio en la barra de su navegador web.

En el caso de las búsquedas en internet, el dominio tiene bastante importancia en

los resultados de los buscadores como Google o Bing. Aunque existen muchos
factores de peso en cómo los algoritmos sitúan unas webs delante de otras en las
páginas de resultados, un usuario puede hacer clic en el tercer resultado y no en el
primero simplemente porque el nombre de dominio le gusta más o le hace pensar
que ahí encontrará la información más acertada. Como paso previo a la elección
de un dominio, utilice el sentido común. Si su sitio web trata sobre A, no busque
un dominio que signifique B o que pueda llevar a confusión a los usuarios.

Por otro lado, ¿cuál era el objetivo del sitio? Si se trata de la web corporativa de
una empresa, el nombre del dominio deberá ser realmente el nombre o la marca
principal. De otra manera podría ser más complicado para posibles clientes dar con
esa empresa en la red.

En nuestro ejemplo sobre mobiliario y decoración no estamos representando

ninguna marca concreta y por eso buscaremos algún dominio que incluya
palabras relacionadas con la temática del sitio. Para ello lo mejor es realizar
un buen estudio SEO. En el módulo correspondiente podrá ampliar la
información sobre cómo hacerlo, pero lo que se puede lograr es encontrar un
grupo de palabras clave relacionadas con la temática de una web y, dentro de
ellas, localizar aquellas que tienen menor competencia de otras webs.

Una vez que tengamos las mejores palabras clave detectadas podemos acudir
a alguna empresa de registro de dominios y encontrar aquellos que más se
ajusten a nuestra búsqueda. Si alguno cumple los criterios exigidos y está
disponible, procederemos a registrarlo.
El hospedaje es el servicio que nos permitirá alojar el sitio web y hacerlo
disponible para su acceso online y las empresas de registro de dominios también
suelen ofrecer el servicio de hosting o alojamiento de páginas web. Aunque no es
estrictamente necesario que el dominio y el alojamiento se contraten con el
mismo proveedor, sí es fundamental que el proveedor de alojamiento nos permita
realizar la redirección del dominio contratado hacia el servidor donde tengamos la
web. Habitualmente este servicio se denomina gestión de DNS.

Por ejemplo, para alojar un sitio web que requiera el almacenamiento y la descarga
de archivos muy pesados como los vídeos, necesitamos que el proveedor nos
ofrezca mucho espacio de almacenamiento en disco y un límite de transferencia
de datos alto. De lo contrario podría ocurrir que el sitio se cargue con gran
lentitud y los usuarios abandonen el mismo. Por otro lado, hay que tener en
cuenta los servicios adicionales que nos pueda ofrecer el proveedor como
buzones de correo, bases de datos o herramientas de marketing.

Si se trata de un proyecto complejo, es conveniente contratar o consultar a

especialistas en desarrollo web para que hagan una estimación de los recursos que
pueda necesitar el sitio y buscar el proveedor adecuado a las necesidades.

Volviendo al ejemplo de nuestra web sobre mobiliario y decoración, hemos

elegido un proveedor que nos ofrece el registro de un dominio y el alojamiento
durante un año por un precio de 47,88 €. Además, necesitamos que el hosting
contratado incluya una base de datos MYSQL, necesaria para el funcionamiento
de WordPress, cuentas de correo y soporte telefónico 24 h.

Tras realizar el estudio de palabras clave y consultar la disponibilidad de los

dominios, el nombre elegido para la web será revistadelmueble.com.

Creación de una cuenta FTP

A continuación, necesitamos acceder al servidor de alojamiento para empezar a

gestionar el sitio web. En el panel de control de nuestro nuevo proveedor de
alojamiento, buscaremos las opciones de acceso FTP para crear una nueva cuenta
de usuario. Al crear esta cuenta obtendremos una serie de datos con los que
pondremos configurar el acceso:

Servidor

El nombre del servidor será diferente según el proveedor, pero habitualmente

es del tipo miservidor.com

Nombre de usuario

El nombre de usuario es único para cada cuenta y normalmente se genera de

forma automática.

Contraseña

Podremos elegir una clave de acceso para un usuario determinado.

Directorio/ruta

Además del nombre de usuario y la contraseña, al configurar la cuenta

debemos indicar cuál es el directorio al que accederá esa cuenta, que puede
ser la carpeta raíz del servidor o una subcarpeta. Por ejemplo:
midominio.com/ o midominio.com/subcarpeta/imágenes.
Gestión de una cuenta FTP.

El protocolo FTP es un protocolo de transferencia de archivos entre ordenadores

conectados en red. En el caso de la web se suelen utilizar clientes FTP que son
programas muy sencillos que nos permiten subir y descargar archivos desde el
servidor de alojamiento.

El cliente FTP

Ahora que ya hemos creado la cuenta de usuario FTP podemos acceder al servidor
y ver los archivos que se encuentran en nuestro alojamiento. Muchos proveedores
de hosting ofrecen herramientas gratuitas para gestionar los archivos desde el
mismo navegador web, aunque es recomendable descargar e instalar un programa
cliente FTP para realizar estas funciones desde el ordenador.

FileZilla es uno de los clientes más utilizados y se puede descargar gratis en la web
http://www.filezilla-project.org. Ofrece funcionalidades básicas, como subir y
descargar colas de archivos de manera muy sencilla, y otras más avanzadas, como
la edición de los archivos en la propia web, sin necesidad de descargarlos.

FileZilla.

Una vez que tengamos el cliente FTP descargado e instalado, procederemos a

introducir los datos de la cuenta FTP que habíamos creado previamente.

En el menú principal de FileZilla diríjase a Archivo > Gestor de Sitios y pulse en

Nuevo Sitio. En la pestaña de la derecha veremos las casillas correspondientes a
los datos de la cuenta que habíamos creado: servidor, usuario y contraseña. Para
la mayoría de los proveedores de alojamiento no es necesario modificar ningún
parámetro más, pero, en caso de que no pueda realizar la conexión con éxito, lea
detenidamente los datos proporcionados por el proveedor.

Si ya ha introducido todos los datos, pulse en Conectar y el cliente FTP se

conectará al servidor mostrando el contenido de las carpetas del ordenador en el
lado izquierdo y el contenido de la carpeta destino del servidor en la parte
derecha. Ahora ya podemos subir, editar y descargar archivos del servidor.
 Gestión de cuentas FTP en FileZilla.

Vamos a comprobar si efectivamente estamos trabajando sobre la carpeta

correcta con una sencilla prueba que además nos familiarizará con el editor de
texto HTML. Aunque los archivos de texto HTML se pueden modificar con
cualquier editor de texto como el Notepad, es recomendable utilizar alguno un
poco más profesional como Sublime Text, que se puede descargar gratis en la web
http://www.sublimetext.com/. Estos editores muestran el código de una forma
más clara y nos ofrecen la posibilidad de autocompletar el mismo.

Para hacer esta prueba vamos a subir al nuevo alojamiento del dominio
revistadelmueble.com un archivo sencillo con un texto personalizado. Una vez
descargado el editor, creamos un nuevo archivo y en la primera línea del código
escribiremos lo siguiente: <html>¡Hola, Mundo!</html>.

Guardamos el archivo con el nombre hola.html y lo subimos a la carpeta destino

del servidor.

A continuación, en la barra de direcciones de nuestro navegador web tecleamos

www.revistadelmueble.com/hola.html y, si vemos el mensaje ,quiere decir que
estamos subiendo los archivos a la carpeta correcta y ya podemos alojar nuestra
web.

Aunque nuestro proveedor de alojamiento nos ofrece la instalación automática de

WordPress, en este manual vamos a explicar cómo se realiza de forma manual.
Conocer este proceso nos puede ayudar a la hora de optimizar el rendimiento de
la web, solucionar incidencias en el funcionamiento de la misma o realizar cambios
más profundos en su estructura. La instalación de WordPress es realmente
sencilla y con un poco de práctica terminará siendo un proceso que se puede
realizar en unos pocos minutos.

Creación una base de datos

Para la correcta instalación de WordPress necesitaremos crear una base de datos

MYSQL.
 MYSQL es un sistema de creación y gestión de bases de datosutilizado en la
actualidad por millones de sitios web, algunos tan grandes como Wikipedia o
Facebook, lo que nos da una idea de su estabilidad y la cantidad de datos que
se pueden manejar con este sistema.

Se trata básicamente de un sistema de tablas organizadas en filas y columnas

donde se puede alojar cualquier tipo de dato. Mediante una serie de
consultas, el sistema extrae y muestra el contenido de las tablas.

En la mayoría de los proveedores de alojamiento, la creación y gestión de bases de

datos es un proceso muy sencillo y similar a la creación de cuentas FTP que
hicimos anteriormente.

Así pues, vamos al panel de control de nuestro proveedor de alojamiento. En este

caso debemos crear la base de datos y un usuario con permiso para acceder a la
misma. Al terminar este breve proceso, el sistema nos mostrará una serie de datos
con los que podremos configurar posteriormente la instalación de WordPress:
Configuración de una base de datos MYSQL .

Antes de continuar vamos a echar un vistazo a la base de datos recién creada. En

el panel de control del hosting, dentro del apartado donde hemos creado nuestra
base de datos, encontraremos un botón de acceso al administrador MYSQL, que
generalmente se denomina phpMyAdmin. En el siguiente panel, veremos la base
recién creada, pero sin tablas ni datos en su interior. Posteriormente, en la
instalación de WordPress, volveremos a este panel para ver cómo se han creado
las tablas automáticamente.
Una base de datos MYSQL sin contenido.

Instalación de WordPress

Una vez creada la base de datos, debemos descargar la última versión del paquete
de WordPress en el idioma en el que estemos interesados desde
http://es.wordpress.org/. Dentro del paquete se localizan todos los archivos y
carpetas que configuran el gestor de contenido.

Página de descarga de WordPress.

Una vez descomprimido todo el paquete de WordPress, se procede a subir al

servidor a través del cliente FileZilla (por ejemplo) y podremos observar la cola de
subida en la ventana inferior. Este proceso se puede prolongar varios minutos
dependiendo de la velocidad de nuestra conexión a internet.
Subiendo los archivos al servidor.

Cuando el programa haya terminado de subir todos los archivos, iremos al

navegador web e introduciremos la siguiente dirección (dependiendo de la versión
de WordPress nos servirá simplemente con escribir el nombre del dominio).

www.revistadelmueble.com/wp-admin/install.php

Posteriormente, introduciremos los datos que se nos solicitan relativos a la base

de datos que hemos creado previamente.
Pulsamos el botón “ Enviar” y ejecutamos la instalación.

Después, para finalizar el proceso, nos aparecerá una ventana de WordPress

donde nos pedirá información básica sobre el título del sitio web y los datos de la
cuenta del administrador que podremos modificar posteriormente si lo deseamos.
Si todo este proceso se ha realizado con normalidad, quiere decir que WordPress
ya está instalado correctamente en nuestro alojamiento. Para comprobarlo,
simplemente teclearemos en el navegador web el nombre del dominio.

Para entrar en la zona de administración de la web debemos escribir el nombre del

dominio añadiendo al final /wp-admin, por ejemplo, midominio.com/wp-admin.
 WordPress recién instalado.

El resultado que se aprecia ahora mismo es bastante pobre. Nuestra web se

encuentra en un estado muy primitivo, sin diseño ni contenido.

¿Qué es lo que hemos hecho hasta ahora?

Para entenderlo mejor podríamos echar un vistazo a la base de datos, accediendo

al administrador de MYSQL (phpMyAdmin) desde el panel de control de nuestro
hosting. Ahora vemos que ya se han creado las tablas dentro de la base de datos.
Si hacemos clic, por ejemplo, en la tabla wp_ options, podremos observar el lugar
exacto donde se han almacenado las opciones que indicamos en la instalación
como el título del sitio web y la descripción.

Atención, mucho cuidado al editar manualmente las bases de datos, ya que

cualquier cambio mal realizado puede provocar errores graves en el sistema.

Conocer en detalle el funcionamiento de las bases de datos de WordPress nos

permitirá realizar y restaurar copias de seguridad con plenas garantías o solucionar
posibles errores que puedan surgir a la hora de instalar plugins o modificar los
archivos del sistema, pero también hay que tener mucho cuidado al editar
manualmente las bases de datos, ya que cualquier cambio mal realizado puede
alterar el contenido WordPress e incluso provocar otros errores graves en el
sistema.

Base de datos MYSQL con las tablas de WordPress.

9. El escritorio de WordPress

Para acceder al panel de control de WordPress o Escritorio, tecleamos en la barra

de direcciones del navegador web la siguiente URL:

www.revistadelmueble.com/wp-admin

Y en la ventana de Login introducimos los datos del Admin.

Dentro del Escritorio encontramos en la parte superior una barra (1) desde la que
podemos visitar el sitio web. También encontramos en la parte derecha una
pestaña de Opciones de pantalla con la que podemos mostrar u ocultar las
ventanas de información y configuración, y una pestaña de Ayuda. Debajo, a la
izquierda encontramos el menú principal (2) y a la derecha las ventanas de
información y configuración (3).

El escritorio de WordPress.

Como todavía no hemos agregado ningún contenido, lo que tenemos es el menú

básico, pero, a medida que vayamos añadiendo extensiones al sistema, veremos
que el menú se va ampliando con la aparición de nuevas opciones de
configuración para dichas extensiones.

Vamos a conocer un poco mejor el contenido del menú:

Escritorio

Contiene un mensaje de bienvenida, enlaces de acceso rápido, un resumen de

los contenidos de WordPress y un editor para escribir nuevas entradas o
borradores. Además, en esta ventana, el sistema nos mostrará avisos cada vez
que la comunidad de WordPress publica una nueva versión del CMS, de las
plantillas de diseño o de los plugins.

De momento no nos interesa demasiado este apartado, ya que iremos

configurando la web paso a paso con el resto de las opciones del menú.

Entradas

En este apartado podremos gestionar la creación de nuevas entradas o

noticias que serán publicadas en la página, así como las categorías o etiquetas
a las que pertenecerán cada una de las ellas. La tabla nos muestra otros datos
como el autor y la fecha de publicación.

Para nuestro blog de ejemplo vamos a crear, en primer lugar, una entrada de
prueba para poder trabajar el aspecto visual propuesto en el planteamiento de
la web y posteriormente procederemos a crear el resto de las entradas.

Medios

Podemos gestionar los archivos multimedia de todo el sitio web tales como
fotografías, gráficos y vídeos. Gracias a que WordPress dispone de los datos
de conexión a nuestra base de datos, desde esta pestaña podemos cargar las
imágenes y realizar diferentes tareas con ellas como cambiar su tamaño o
etiquetarlas.

Páginas

Las páginas que componen el sitio web se controlan desde este apartado de
una manera similar a como se hace con las entradas, y la información que
muestra la tabla es también muy parecida. Dependiendo de la plantilla o tema
de diseño que tengamos instalado, podremos crear estilos de páginas muy
diferentes y combinarlos en el mismo sitio según las necesidades, por ejemplo,
una página de inicio, una de noticias y otra de contacto.

Para el ejemplo que estamos desarrollando, vamos a crear una página principal
o home y otra página de noticia o entrada ( post).
Comentarios

En este apartado se pueden consultar, clasificar o eliminar los comentarios

que realicen los visitantes de nuestra web. En la mayoría de los blogs, los
comentarios están permitidos, pero dependiendo del tipo de sitio web será
más conveniente bloquearlos. En WordPress también existe la opción de
permitir que los visitantes envíen comentarios pero que estos no sean
publicados hasta que sean revisados por un administrador o editor del sitio.

Apariencia

Aquí encontraremos el conjunto de opciones que permiten transformar el

aspecto visual del sitio web. Podremos gestionar la instalación de plantillas o
temas de diseño, añadir barras laterales o widgets y modificar su contenido,
ordenar y situar los menús de navegación de las diferentes páginas y editar el
código de las páginas de WordPress.

En el submenú Temas tenemos la posibilidad de instalar cientos de diseños de

forma gratuita, aunque, como veremos más adelante, también existen sitios
especializados en la venta de temas y otros accesorios para WordPress.

Plugins

Como ya hemos comentado, WordPress admite la instalación de múltiples

paquetes que añaden nuevas funcionalidades al sitio web y al propio sistema.
Actualmente existen plugins para WordPress que nos permiten añadir
prácticamente cualquier funcionalidad y, como en el caso de las plantillas de
diseño, algunos son gratuitos y otros de pago. Desde este apartado podemos
controlar los plugins instalados en nuestro sistema, así como consultar una
extensa base de datos y encontrar información adicional como instrucciones
de instalación, comentarios y valoraciones de los usuarios y ejemplos de uso.

Widgets

Añaden contenido y funcionalidades adicionales en ciertas zonas como en la

barra lateral o pie de página, dependiendo de la plantilla.

Usuarios

En este apartado del menú tenemos la opción de crear, editar y eliminar las
cuentas de los usuarios registrados en nuestro sitio web. Por ejemplo,
podríamos tener un único usuario administrador que realiza todas las tareas o
permitir a otros usuarios la creación de perfiles con diferentes privilegios en la
utilización del sistema como editores, colaboradores, clientes o suscriptores.
Herramientas

El menú Herramientas es tal vez el menos relevante de todo el sistema.

Permite exportar o importar el contenido del sitio web, pero existen plugins
mucho más seguros y completos para realizar copias de seguridad de
WordPress.

Ajustes

Aquí encontraremos los ajustes principales de WordPress. Hay varias

opciones que tendremos que modificar para que nuestro sitio web se adapte
al proyecto y las iremos viendo más adelante.
10. Temas

El aspecto visual de un sitio web creado con WordPress está determinado

principalmente por la plantilla de diseño que se encuentre activa en ese momento.
Un tema de WordPress es un paquete de archivos que podemos instalar en
nuestro sistema y que modificará la disposición, el color, la tipografía y, en general,
todos los aspectos que determinan la forma de mostrar el contenido al visitante.
Digamos que tenemos, por un lado, el esqueleto—que es el paquete de instalación
de WordPress— y, por otro, un envoltorio o contenedor —que es el tema y que le
da un aspecto determinado—.

Existen cientos de temas diferentes para personalizar el aspecto de una web que
incluyen múltiples opciones de configuración. Por otro lado, muchas empresas de
diseño ofrecen la posibilidad de programar temas de WordPress completamente
personalizados y adaptados a las necesidades de un proyecto concreto. Hay
plantillas creadas específicamente para comunidades virtuales, sitios de comercio
electrónico o páginas de fotografía y vídeos.

Además de buscar un tema que se ajuste al tipo de sitio que estamos realizando,
conviene examinar otras características tales como la posibilidad de cambiar los
colores y tipos de letra, mostrar u ocultar menús, barras laterales y otros
elementos de navegación o la posibilidad de que el diseño sea responsive, es decir,
que se adapte de forma automática a la pantalla del visitante.

Por lo tanto, las características del tema a elegir estarán determinadas por el
planteamiento que realizamos previamente del proyecto.

Instalación de una nueva plantilla

A continuación, veremos cómo podemos instalar varios temas en nuestro sistema

y cambiar de uno a otro con rapidez.

En primer lugar, vamos a Apariencia > Temas.

Veremos que la instalación por defecto que hemos realizado de WordPress ya

incluye varios temas. Actualmente tenemos instalado el tema llamado Twenty
Fourteen, creado por el equipo de WordPress para la creación de una revista
digital. Si pulsamos en el botón “Añadir nuevo”, aparecerá un buscador de temas
ofrecidos por la comunidad de WordPress de forma gratuita. Podemos realizar
una búsqueda y aplicar filtros en los resultados para encontrar temas con las
características deseadas, como por ejemplo “negro” o “dos columnas”.

Al pasar el puntero del ratón sobre la imagen en miniatura del tema elegido,
veremos que se activan dos botones. Si se pulsa en Instalar, el sistema descargará
el paquete, lo descomprimirá y lo instalará en el sistema.

A continuación, podemos activar el tema para que el aspecto de la web cambie

inmediatamente o también podemos obtener una vista previa de cómo quedará
antes de aplicar los cambios.

Instalación de temas en WordPress.

Temas premium

Entre los temas gratuitos que se ofrecen en la base de datos de WordPress hay
muchos de gran calidad y que pueden ajustarse perfectamente a las
características de determinados proyectos, pero, cuando se trata de proyectos
más complejos, conviene detenerse a examinar las posibilidades que nos ofrecen
los temas denominados premium.

Existen temas de pago realizados por grandes especialistas en programación y

diseño que, al combinarse con una serie de plugins —generalmente también de
pago— forman paquetes que pueden convertir una simple instalación de
WordPress en un sitio web avanzado. Por otro lado, los temas premium suelen ser
más sencillos de manejar por usuarios sin demasiados conocimientos de
programación, ya que incluyen herramientas que permiten modificar el diseño y
los contenidos de una forma muy intuitiva.
Existen muchas webs especializadas que albergan extensos catálogos de temas y
plugins para WordPress, aunque también es posible encontrar en los buscadores
las páginas de temas concretos. Algunos de los sitios más populares para comprar
temas y plugins son Themeforest.net, Mojo-themes.com y Woothemes.com.
En el caso de revistadelmueble.com, tras analizar las características del tema
requerido y realizar una búsqueda por diferentes webs, optaremos por comprar el
tema The7. En este tema se ofrecen una serie de funcionalidades que, debido al
presupuesto reducido, nos ahorrarán muchísimo tiempo. Las características más
interesantes incluidas en este tema son:
Además, este tema incluye otras funcionalidades como la compatibilidad con
Woocommerce (la plataforma de comercio electrónico para WordPress) o con el
plugin de traducciones WPML. Aunque estas funcionalidades no las utilizaremos
de momento, podrían ser útiles en el futuro y no tendríamos que modificar el tema
actual.

Una vez realizada la compra del tema elegido, obtenemos un archivo para
descargar y a continuación procederemos a la instalación del mismo.

En WordPress, todos los temas instalados se encuentran en el directorio /wp-

contents/themes. Mediante el cliente FTP (FileZilla), subimos los archivos del
nuevo tema al directorio indicado y entramos al escritorio de WordPress para
proceder a su activación como hicimos con el primer tema de prueba que
instalamos.
También es posible instalar un tema nuevo a través de la opción Apariencia >
Temas > Añadir nuevo directamente desde el panel de administración de
WordPress subiéndolo como un archivo zip a través de la función upload theme.

Si observamos ahora el menú lateral del escritorio de WordPress veremos que han
sido añadidas varias pestañas adicionales: Portfolio, Testimonials, Team, Partners,
Benefits, Photo albums, Slideshows y Theme options. Nos centraremos en esta
última, ya que las pestañas anteriores sirven para construir estilos de páginas que
de momento no vamos a utilizar.

Al abrir la pestaña Theme options encontraremos todas las opciones disponibles e

iremos modificando algunas de ellas para que diseño de la página sea idéntico al
del boceto elaborado en la primera parte del manual:
Skins: El tema nos ofrece varios estilos o “pieles” para la página web, es
decir, combinaciones predeterminadas de colores. Elegimos el estilo light,
que combina tonos blancos para los fondos y colores vivos para textos y
recuadros.

General: Aquí encontramos múltiples opciones para determinar la

configuración de algunos detalles generales que serán compartidos entre las
diferentes páginas, como cabeceras, tipos de letra, colores de texto y
enlaces, fondos de página y elementos de navegación.
Fonts: El tema incluye muchas de las fuentes que se encuentran en Google
Fonts y otros repositorios gratuitos, entre ellas la Noto Sans que habíamos
elegido previamente, y nos permite elegir diferentes tamaños, estilos y tipos
de letra para titulares, textos o botones.

Header: Elegimos la altura en píxels de la cabecera, la disposición de los

elementos y la imagen de fondo de la cabecera y la alineamos al centro.
Content area: Aquí podremos elegir el color de los textos y de las cabeceras,
así como los de otros elementos como las líneas divisorias.
 Footer / Bottom bar: En este apartado vamos a configurar el color del pie de
página y la información que contiene, que en este caso será un pequeño
logotipo y la licencia de uso de la página.

Si guardamos las opciones y recargamos la página principal, veremos que ya se va

pareciendo algo más a lo que teníamos en el boceto. Ahora es el momento de
empezar a maquetar el contenido.
La web revistadelmueble.com sin contenido.
11. Contenido

Librería multimedia

El primer elemento que vamos a añadir será una imagen. Para subir una imagen al
servidor vamos al Escritorio > Medios > Añadir Nuevo y arrastramos la imagen
sobre la ventana.

En la Librería multimedia podemos ver y editar los detalles de la imagen que

acabamos de subir. Para conseguir un correcto posicionamiento SEO de las
imágenes es recomendable completar todos los campos. Por otro lado, el enlace
(URL) será de utilidad a la hora de insertar la imagen en nuestras páginas o
entradas.

A continuación, vamos a crear la primera entrada, tomando como punto de partida

la entrada que viene por defecto al instalar WordPress que se titula “Hola Mundo”.
La encontraremos en el Escritorio > Entradas > Todas las entradas y una vez
dentro del editor hacemos clic sobre “Visual Composer”.
Entradas (posts)

Antes de crear la primera entrada, vamos a observar con detenimiento las

diferentes ventanas del editor. Recuerde que puede mostrar y ocultar estas
ventanas haciendo clic en “Opciones de pantalla”, en la esquina superior derecha:
Título de la entrada
Mapa web
Cambia el título de la entrada y muestra el enlace permanente,
que es la URL que tendrá esa página una vez publicada. Para la
primera entrada vamos a cambiar el título “¡Hola Mundo!” por
“La silla de mimbre”.

Editor de la entrada

Podemos cambiar entre el editor clásico y el editor visual

(recomendado). Esta herramienta se incluye en algunos temas
premium y con ella es posible añadir diferentes elementos y
componer páginas de una forma fácil e intuitiva. En los anexos
de este manual encontrará más información sobre todos los
elementos que se pueden añadir a las páginas a través del
compositor visual.

Publicar

En esta ventana configuramos el estado de la entrada

(publicada o borrador), la fecha de publicación y su visibilidad
(pública o privada).

Page header options

El tema que hemos comprado nos ofrece la posibilidad de

colocar los elementos de la cabecera, eligiendo entre varias
configuraciones predeterminadas.
Formato

Es el tipo de entrada que vamos a publicar, según el tipo de

contenido. De momento lo dejaremos en “Estándar”.

Post options

Encontramos diferentes opciones relativas a la publicación de

las entradas. Permite mostrar u ocultar la imagen destacada y
entradas relacionadas.

Categorías

Muestra las categorías previamente creadas en el menú

Escritorio > Entradas > Categorías, o permite crear otras nuevas
en caso de que no existan para clasificar la entrada que estamos
redactando. En este primer caso vamos a crear la categoría
“Mobiliario”.

Comentarios

Podemos activar o desactivar los comentarios para una entrada

o página concreta.

Etiquetas

Además de las categorías podemos añadir etiquetas o palabras

clave a las entradas, de manera que sea más fácil su
clasificación.
 Imagen destacada

Al seleccionar una imagen destacada para una entrada, esta

aparecerá en la página principal junto con un pequeño
fragmento del texto. Vamos a seleccionar la imagen que
habíamos subido previamente haciendo clic en esta opción.

Sidebar options

Es otra opción incluida en el tema premium y con ella es posible

seleccionar rápidamente la ubicación de la barra lateral (Sidebar)
o desactivarla. En este caso la ubicaremos a la izquierda, como
estaba planteado en el boceto de diseño.

Footer options

Permite mostrar u ocultar información específica en el pie de

página.

Una vez modificadas las opciones generales de la entrada, comenzamos a insertar

los elementos del contenido. Para insertar la imagen que habíamos subido
previamente a la galería de medios, hacemos clic en Add element (si tenemos la
administración de WordPress en idioma inglés) y seleccionamos el objeto Fancy
media. En el cuadro emergente pegamos la URL de la imagen y pulsamos en save.
Ahora la imagen ya está insertada en la entrada. Para ver cómo se visualiza en el
navegador web.
A continuación, vamos a añadir un cuadro de texto a la derecha de nuestra
imagen. Debajo del botón Add element encontraremos un pequeño desplegable
con el que podemos hacer que el contenido se divida en varias columnas de
diferente tamaño. En este caso seleccionaremos “1/4 + 3/4” para obtener dos
columnas, una más estrecha a la izquierda y otra más ancha a la derecha. En la
columna de la derecha añadiremos el elemento Text, donde escribiremos el texto
de la entrada, y en la columna de la izquierda añadiremos otro elemento Text para
añadir el pie de foto debajo de la imagen. En el editor visual se vería así:

Si actualizamos la página en el navegador, veremos nuestros elementos

correctamente situados. Cabe señalar que el espacio en blanco que encontramos a
la izquierda está reservado para la barra lateral, tal como le habíamos indicado en
el apartado Sidebar options (11).
El siguiente paso será insertar los espacios de publicidad que habíamos planteado
en el boceto gráfico. El primero de ellos estará situado sobre el texto y la imagen,
y para crearlo añadiremos en el editor visual una nueva fila (row) sobre la que ya
habíamos creado. Dentro de esa fila insertaremos un elemento Text con el código
de inserción del anuncio. Debajo del elemento Text insertaremos un elemento Gap
para separar el anuncio del contenido.
Sidebars y widgets

En WordPress, una barra lateral (sidebar) puede ser común a varias páginas, de
manera que se puede crear una barra que muestre un contenido determinado en
portada y otra barra que muestre otro contenido diferente en las páginas de
noticias. También se podría crear una barra diferente para cada página o una que
puedan ver solo los usuarios registrados. En cada una de estas barras podemos
incluir diferentes widgets.

Ahora vamos a insertar algo de contenido en la barra lateral. Para ello tenemos
que ir al menú Apariencia > Widgets. En la parte izquierda de la ventana
encontraremos una serie de elementos predefinidos como calendario, cuadro de
búsqueda, caja de texto, etc. A la derecha tenemos los widgets disponibles, que en
este caso son la barra lateral y el pie de página. Para incluir elementos en alguno
de los widgets solo tenemos que arrastrar el elemento y soltarlo sobre el widget
deseado. En nuestro caso vamos a componer la barra lateral incluyendo un cuadro
de texto y un cuadro de categorías.

Los elementos pueden desplegarse para ver una serie de opciones de

configuración. Dentro de nuestro cuadro de texto vamos a pegar el código de un
anuncio de tipo gráfico.
Ventana del gestor de widgets.

Configuración de una barra lateral.

Una vez que hemos configurado las propiedades de cada elemento ya podemos
actualizar la página en el navegador y veremos aparecer la barra lateral.
Ahora que ya sabemos cómo crear entradas y categorías vamos a generar unas
cuantas noticias para que nuestro blog tenga algo más de contenido.

Página de inicio (Home)

Vamos a configurar la página de inicio para que muestre la portada con los
titulares y un pequeño resumen de cada entrada.

Primero creamos una nueva página en el menú Páginas > Añadir nueva y le
ponemos por título “Portada”. Utilizando el editor visual, igual que lo hicimos para
crear la entrada “La silla de mimbre”, insertaremos un cuadro de texto con el
código del espacio publicitario y debajo colocaremos un elemento Gap. Debajo del
Gap, en lugar de colocar foto y texto, insertaremos un elemento Blog. En las
opciones de configuración del Blog seleccionaremos la única categoría existente
(Mobiliario) y le indicaremos que muestre 9 posts o entradas en la página.
Guardamos y nos vamos otra vez a la configuración de la página.

Dentro del apartado Sidebar options, seleccionaremos la ubicación izquierda ( left)

para la posición de la barra lateral, al igual que hicimos en la entrada “La silla de
mimbre”. Pulsamos en Publicar y nos vamos al menú Ajustes > Lectura para
configurar las siguientes opciones:

Página frontal muestra: Una página estática (Portada)

Número máximo de entradas a mostrar en el sitio: 8
Configuración de la página Home.

Aspecto de la página Home en el navegador.

12. Plugins

En WordPress, los plugins son aplicaciones generalmente programadas por

terceros que permiten extender las funcionalidades básicas del propio gestor.
Existen decenas de plugins gratuitos o de pago desarrollados para WordPress.
Como ejemplo vamos a instalar y configurar dos plugins.

Instalación del plugin Simple Share Buttons Adder

El primer plugin que vamos a instalar se llama “Simple Share Buttons Adder” y
sirve para añadir los típicos botones para poder enviar y compartir contenidos a
través de las redes sociales. Para añadirlo a nuestro WordPress vamos al menú
Plugins > Añadir nuevo. En la parte derecha veremos un cuadro de búsqueda con
la leyenda “Buscar plugins” donde insertaremos el nombre del plugin que
queremos buscar. Una vez encontrado en los resultados de búsqueda, lo
instalamos y activamos.

Instalación de plugins.

Para configurar el plugin veremos que dentro del menú Ajustes del escritorio se ha
añadido un nuevo elemento llamado Share buttons. Entre las opciones disponibles
podemos seleccionar qué botones de redes sociales queremos que aparezcan en el
sitio web.

Configuración de plugin “Simple Share Button”.

Por último, nos quedaría seleccionar la ubicación donde vamos a situar los
botones, puede ser dentro del contenido de una entrada, en la cabecera, en la
barra lateral, etc. Para ubicarlos en la barra lateral vamos de nuevo al menú
Apariencia > Widgets y veremos que ha aparecido un nuevo elemento llamado
Share buttons. Solo tenemos que arrastrarlo a la barra correspondiente.

Instalación del plugin SEO by Yoast

El otro plugin que vamos a instalar es muy útil para poder aplicar una estrategia
SEO en los sitios web creados con WordPress. Aunque hay otros plugins similares,
este es uno de los más completos y utilizados.

Al igual que hicimos con el plugin anterior, primero vamos a realizar una búsqueda
en el menú Plugins > Añadir nuevo. Una vez que lo tengamos localizado,
procedemos a instalarlo y activarlo.

Ahora veremos que ha aparecido un nuevo elemento dentro del menú del
escritorio de WordPress llamado SEO. Si no está familiarizado con este plugin, es
recomendable que realice el tour introductorio para aprender a utilizarlo, ya que es
bastante complejo.

Lo primero que vemos dentro de este menú es un aviso en color rojo para que
cambiemos la estructura de los permalinks a /%postname%/. Podríamos hacer clic
en el botón “Arreglar esto”, pero vamos a tratar de entenderlo mejor, ya que el
tema de los enlaces permanentes es fundamental para un correcto
posicionamiento de las páginas.

Los enlaces permanentes (permalinks) son las URL específicas de cada página de
un sitio web y gracias a ellos podemos localizar dicha página. Si nos fijamos en la
entrada que creamos con el título “La silla de mimbre”, veremos que su URL actual
en el navegador es:

http://www.revistadelmueble.com/?p=1

Con esta estructura de enlaces podremos navegar sin problemas dentro del sitio
web, ya que WordPress sabe que, si en la portada hacemos clic sobre el título “La
silla de mimbre”, nos debe llevar a esta página, pero si un usuario quiere buscar en
internet artículos relacionados con muebles de mimbre, es mucho más difícil que
encuentre nuestro artículo.

Para cambiar el enlace a algo más amigable, vamos al menú Ajustes > Enlaces
permanentes. Dentro de la ventana Ajustes comunes cambiaremos de
Predeterminado a Estructura personalizada, escribiendo dentro del cuadro de
texto el código: /%postname%/.
Ajuste de enlaces permanente.

Si guardamos y recargamos la página, veremos que ahora la URL de la página

coincide con el título de la misma:

http://www.revistadelmueble.com/la-silla-de-mimbre/

Nos quedaremos con un último detalle sobre este plugin que será muy útil para un
posicionamiento básico de nuestras páginas. Si vamos a editar cualquier página o
entrada, veremos que debajo de la ventana del editor visual tenemos una serie de
opciones nuevas que nos ofrece el plugin SEO: Vista del resumen ( snippet), Palabra
clave principal, Título SEO y Meta-descripción. En las siguientes pestañas también
encontraremos otras opciones, como la configuración del tipo de enlaces de la
página o el texto a mostrar cuando se comparte en redes sociales.
Recomendados

Además de los dos plugins anteriores, existen una gran cantidad de plugins para
dotar a nuestro proyecto de aquellas funcionalidades extra que pudiera necesitar:

WooCommerce W3 Total Cache Broken Link

Checker
(1) (2)
(3)

Contact Form 7 Wordfence Imagify Image

Security Optimizer
(4)
(5) (6)

WooCommerce (1)
Mapa web
Se calcula que casi un 30 % de todos los sitios web de e-commerce utiliza
este plugin para dotar a WordPress de las funcionalidades de tienda online,
convirtiéndose en la solución más popular para todos aquellos que quieren
lanzarse al comercio digital utilizando una solución profesional y
contrastada.
W3 Total Cache (2)
Mapa web
Este plugin nos permite acelerar el proceso de carga de cualquiera de las
páginas que componen un sitio web, optimizar los recursos del servidor,
reducir el tiempo de carga, reducir el consumo de ancho de banda de la web
y favorecer el SEO.

Broken Link Checker (3)

Mapa web
Busca los enlaces que pueden causar errores 404 en tu sitio web de forma
automatizada, enviándote un aviso si algún enlace deja de funcionar.

Contact Form 7 (4)

Mapa web
Este plugin te permite añadir formularios personalizados a tu web.

Wordfence Security (5)

Diseñado para proteger tu web de una amplia gama de amenazas en línea.

Imagify Image Optimizer (6)

Este plugin escanea y optimiza cualquier imagen localizada en la Biblioteca

multimedia de WordPress.
13. Menú principal

Para terminar nuestro blog sobre mobiliario y decoración, vamos a configurar el

menú principal de navegación que se encuentra en la parte derecha de la
cabecera. Para ello iremos al menú Apariencia > Menús.

Una vez dentro, crearemos un nuevo menú llamado “Menú principal” y

añadiremos la página de Portada. También podemos añadir al menú enlaces a
categorías o a páginas determinadas y así configurar la navegación como estaba
previsto en nuestro diseño de la estructura de información.

Antes de salir de esta ventana, es importante indicar la ubicación del menú, en

este caso será Primary Menu:

Con estos últimos ajustes, ya hemos terminado de crear el sitio web Revista del
mueble. Veamos qué aspecto tiene…
14. Conclusiones

Los sitios web que forman parte de estrategias de marketing más o menos
complejas requieren una planificación muy detallada y en su desarrollo
intervienen multitud de personas con perfiles profesionales diversos, como
diseñadores, programadores, redactores, etc.

En este manual hemos visto la creación de un sitio web con una serie de
funcionalidades básicas, aunque el objetivo principal era proponer un ejemplo del
proceso de trabajo que se requiere para pasar del papel a la pantalla y también
conocer el funcionamiento del gestor de contenidos WordPress. Como hemos
visto, la utilización no requiere el conocimiento de lenguajes de programación y su
potencial es inmenso cuando se trata de añadir funcionalidades a un sitio web.

Esperamos que los conocimientos adquiridos en este módulo, en conjunto con los
otros módulos que forman el máster en Marketing Digital, le permitan tener una
idea mucho más precisa de los procesos necesarios para llevar a cabo el desarrollo
de sitios mucho más complejos, dinámicos y eficaces.
Bibliografía

14 de los mejores plugins de WordPress para 2020

https://www.hostinger.es/tutoriales/14-mejores-plugins-wordpress/
El panel de administración de WordPress
https://webdesdecero.com/el-panel-de-administracion-de-wordpress/
Qué es un wireframe para un sitio web
https://www.lucidchart.com/pages/es/que-es-un-wireframe-para-un-sitio-
web
Manual de soporte
https://es.wordpress.org/support/manual-de-soporte/
Manual de FileZilla
https://raiolanetworks.es/blog/manual-filezilla-cliente-ftp/
Fin de módulo

¡Enhorabuena! Has finalizado el módulo.