PGDT 409 Manual

SERVICIO NACIONAL DE ADIESTRAMIENTO EN TRABAJO INDUSTRIAL
COMPUTACIÓN E
INFORMÁTICA
MANUAL DE APRENDIZAJE
DISEÑO PARA
LA WEB
CÓDIGO: 89001825
Profesional Técnico
CONTENIDO
TAREA-DENOMINACIÓN PÁG N°
I. DESARROLLAR IMÁGENES EN HERRAMIENTAS DE DISEÑO. 5
II. DISEÑO WEB-WORDPRESS. 51
III. TRABAJANDO CON SEO, ELEMENTOS Y SERVIDORES
68
REMOTOS.
IV. CREACIÓN DE PÁGINAS, CONFIGURACIÓN DE MENÚS Y
92
SLIDER.
V. IMPLEMENTAR WORDPRESS EN UN HOSTING. 111
VI. DISEÑAR WEB RESPONSIVE, SHORTCODES, PLUGINS Y
125
TIENDA ONLINE.
VII. TRABAJAR CON PLANTILLAS EN WORDPRESS. 159
DISEÑO PARA LA WEB
I. DESARROLLAR IMÁGENES EN HERRAMIENTAS DE DISEÑO.
En esta tarea se tratarán las siguientes operaciones:

1.1. Ambiente y Entorno de Trabajo en Adobe Photoshop.
1.2. Diseño y Trabajo de PhotoMerge.
1.3. Diseños de Objetos 3D.
1.4. Manejo de Videos en Adobe Photoshop.
1.5. Formato de Imágenes para la Web.
EQUIPOS Y MATERIALES:
- Computadora con microprocesadores Core 2 Duo o mayor capacidad.
- Sistema operativo Windows.
- Adobe Photoshop.
- Acceso a Internet.
ORDEN DE EJECUCIÓN:
- Reconocer las diferentes herramientas del tratamiento de imágenes.
- Manejo de imágenes 3D y videos.
- Reconocer los diferentes formatos de imágenes para la web.
1.1. AMBIENTE Y ENTORNO DE TRABAJO EN ADOBE PHOTOSHOP.
Sin duda, el programa de diseño gráfico por excelencia es Adobe Photoshop. Para los
diseñadores de páginas web es una herramienta que resulta incluso más potente de lo
necesario.
BARRA DE HERRAMIENTAS DE PHOTOSHOP.
La barra de herramientas, contiene las utilidades que se debe de aprender para poder
sacarle partido al programa. La botonera de herramientas de Photoshop aparece en
una ventana flotante que suele estar situada a la izquierda del área de trabajo del
programa. Desde el menú "Ventana / Herramientas" se le puede indicar a Photoshop
que la muestre o la oculte, según sus necesidades.
Una vez abierto el programa se observara las diferentes barras y paneles distribuidos
en el entorno de trabajo. Se abrira una imagen de prueba para que todas las opciones
se encuentren disponibles. Se puede abrir los archivos a través del menú Archivo →
Abrir.
Una vez abierta la imagen, todas las barras y paneles se encuentran activos y el área
de trabajo toma esta forma:
ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 5

DISEÑO PARA LA WEB
Se puede hacer que la disposición de los paneles y barras vuelvan al estado

predeterminado haciendo clic en la opción Ventana → Espacio de trabajo:
O directamente desde la barra superior:
BARRA DE MENÚ
La barra en el extremo superior es la Barra de Menú, esta barra aparece en la mayoría

de programas por lo que ya debes estar acostumbrado a ella. Desde aquí podrás
acceder a diferentes opciones de menú, como por ejemplo abrir un archivo, guardarlo
y luego cerrarlo. También podrás acceder a opciones mucho más complejas que
iremos viendo a lo largo del curso.
PANEL DE HERRAMIENTAS
Este panel tiene dos formas diferentes de presentarse, una es la que se puede ver en
la imagen. La otra (predefinida por Photoshop CS4) es exactamente igual pero con
todas las herramientas dispuestas en vertical. Para cambiar de visualización sólo se

DISEÑO PARA LA WEB
tendrá que hacer clic en el botón que aparece en la esquina superior izquierda
“Cambiar visualización”.
Se observa que algunas de ellas tienen un pequeño triángulo en su esquina inferior

derecha “Herramienta Pincel”. Éste es el indicador de grupo de herramientas. Si se
posiciona el cursor sobre alguno de estos iconos y se mantiene pulsado un instante el
botón del ratón (o se pulsa el botón derecho), se desplegará la lista de herramientas
pertenecientes al grupo.
Por ejemplo, si se despliega el menú del icono pincel se desplegará la lista de

herramientas de dibujo.
Dentro del grupo de herramientas de dibujo se puede encontrar el Pincel, el Lápiz y la

Herramienta Sustitución de color. La letra que aparece a la derecha del nombre de la
herramienta, informa del método abreviado de teclado para acceder a la herramienta
activa de este grupo. La herramienta activa se encuentra siempre marcada por un
cuadrado negro a la izquierda del icono.
En el panel de herramientas se puede encontrar también los selectores de color ,

en Photoshop se trabajara siempre con dos colores activos, que pueden ser
totalmente configurados por el usuario. El color situado al frente será el color Frontal,
la mayoría de las herramientas lo tomarán como color de trabajo. El que se encuentra
detrás es el color de Fondo, se puede establecer este color como el color del fondo del
documento, de esta forma se podrá utilizar herramientas que pinten con el color de
fondo y así imitar de alguna forma el borrado de píxeles.
El recuadro que se encuentra al frente muestra el color que se está utilizando, en

cualquier momento se puede hacer clic sobre el icono de doble flecha para
intercambiar los colores de los recuadros entre sí, permitiendo que el color que se
encontraba en el recuadro del fondo pase al frente y, por lo tanto, las herramientas
usarán ese color como predeterminado.
Se observa que en cualquier momento se puede hacer clic sobre el icono para
restablecer los colores activos a negro y blanco (los iniciales de Photoshop).
Para seleccionar un color, se dará clic sobre uno de los recuadros y se abrirá el cuadro
de diálogo Selector de color. Una vez aquí, se podrá elegir un color de entre toda la
paleta que Photoshop ofrece.

DISEÑO PARA LA WEB
Al seleccionar un color podría aparecer unos iconos como estos:
El icono Advertencia de incompatibilidad con impresión advierte al usuario que el

color seleccionado se halla fuera de la paleta de impresión, y es posible que cuando
se quiera imprimir la imagen, este color no se corresponda exactamente con el que se
ha seleccionado y se muestre con un tono diferente.
Lo mismo ocurre con el icono de incompatibilidad web, Advertencia de

incompatibilidad con web , si se crea una imagen que contenga un color no
compatible con los estándares web es muy probable que se muestre de diferentes
formas según el navegador y el sistema operativo utilizado.
HERRAMIENTAS: Este grupo de herramientas se utiliza para crear trazados.
Los trazados se utilizan para crear formas vectoriales (líneas y curvas definidas
matemáticamente). Estas formas son independientes a la resolución y pueden
redimensionarse sin problemas.
La primera opción, la herramienta Cuentagotas, toma muestras de color de cualquier

parte del lienzo
- La herramienta Muestra de color toma hasta como máximo 4 muestras de color del
lienzo para mostrar sus propiedades en la paleta de Información (junto al
Navegador).
- La herramienta Regla, mide la distancia entre dos puntos dados mostrándose el
resultado, también, en la paleta Información.
- La herramienta Nota, permite crear una nota, como un post-it, en el Área de trabajo.

DISEÑO PARA LA WEB
- La herramienta Recuento permite colocar sobre el lienzo marcas que ayudarán a

contar elementos en el área de trabajo. Esta herramienta añadirá literales con un
número que se irá incrementando automáticamente.
LA BARRA DE OPCIONES DE HERRAMIENTAS.
En la parte superior de la ventana y bajo la barra de menú se encuentra la barra de

Opciones de Herramientas, el contenido de esta barra cambiará según la herramienta
que se tenga seleccionada.
Desde aquí se puede cambiar aspectos de la herramienta como su tamaño, su

opacidad, etc. Cada vez que se realice un cambio en la herramienta, éste se
mantendrá para que cuando se vuelva a seleccionarla su estado sea el mismo que era
cuando se utilizó por última vez. Si en algún momento se desea restaurar la
herramienta a su estado original, Se dará clic con el botón derecho del ratón sobre la
imagen de la herramienta en la barra de opciones de herramienta y seleccionar
Restaurar Herramienta.
BARRA DE ESTADO.
La barra que se encuentra al pie del espacio de trabajo se llama Barra de Estado.
Como se puede observar, a la izquierda se ubica un porcentaje, este número es el
zoom aplicado a la imagen abierta.
Por defecto Photoshop intenta ajustar la imagen al tamaño del área de trabajo, si ésta
es muy pequeña o la imagen es demasiado grande, Photoshop reducirá el zoom para
poder mostrar la imagen completa en pantalla. Se debe recordar que el zoom no
afecta al tamaño de la imagen, sino a la vista. Aunque se reduzca o se amplié el zoom
para ver con mayor claridad la imagen, las dimensiones de ésta siguen siendo las
mismas. Entonces, ya que el porcentaje que se muestra en la barra de estado indica el
nivel de zoom que se está aplicando; se puede hacer clic sobre este porcentaje y
modificarlo, introduciendo un número diferente y pulsando la tecla Enter. Se observa
cómo cambia el zoom de la imagen.

DISEÑO PARA LA WEB
Dando clic sobre ellas se mostrara la información.
VENTANA NAVEGADOR.
Hacer clic sobre Navegador y se mostrará una miniatura de la imagen con la que se
esté trabajando.
HERRAMIENTA PINTURA Y EDICIÓN:
En el panel de herramientas se puede encontrar el icono Pincel, Al hacer clic derecho

sobre él, se desplegará una lista mostrando el grupo formado por la herramienta
Pincel, la herramienta Lápiz y la herramienta Sustitución de color, las dos primeras con
características parecidas, pero con algunas diferencias.
El Lápiz y el Pincel, permiten pintar con el color frontal actual, aunque por defecto la
herramienta Pincel crea trazos mucho más suaves mientras que los bordes del lápiz
son más irregulares.
La herramienta Pincel Mezclador sirve para dar un efecto artístico a la composición,

simulando el mismo efecto que pasar un pincel por un cuadro con pintura fresca.
HERRAMIENTA PINCEL:
Una de las diferencias respecto al Lápiz es la posibilidad de convertir esta herramienta

en aerógrafo, para ello se tiene que pulsar el botón en la barra de Opciones de
Herramientas. Este botón tiene dos estados, pulsado (el aerógrafo está activado) e
inactivo (el pincel actuará normalmente).
Esta opción es útil cuando se quiere que la herramienta pinte conforme a la presión
ejercida por el pincel. Así, si se mantiene el botón del mouse pulsado durante un
tiempo se irá añadiendo más pintura a la imagen, mientras que si el aerógrafo se
encuentra desactivado, por mucho que se mantenga la presión, la cantidad de pintura
en un punto será siempre la misma.

DISEÑO PARA LA WEB
Además de esta posibilidad, existe otra opción única del Pincel: el Flujo El flujo
establece la velocidad con la que la herramienta Pincel aplica la pintura, por lo que
cuanto menor sea el porcentaje que se aplique, más suave será el resultado. Se
puede encontrar el calibrador de flujo en la barra de Opciones.
HERRAMIENTA LAPIZ:
El Lápiz, al pertenecer al mismo grupo, comparte casi todas sus opciones con el
Pincel. Su única herramienta propia es: el Borrado automático
Esta opción, como prácticamente todas, también se encuentra en la barra de Opciones

de Herramientas, y se comporta del siguiente modo:
Color frontal y de fondo
Si el primer píxel en el que se hace clic es del color frontal, el lápiz pintará con el color
de fondo borrando el color frontal. Si el primer píxel en el que se hace clic es de otro
color, el lápiz usa el color frontal para pintar.
Existen algunas características de los Pinceles:
También se pueden determinar desde Menú Ventana – Pincel:

DISEÑO PARA LA WEB
HERRAMIENTAS DE BORRADO:
Del mismo modo que existen herramientas que sirven para añadir pintura al lienzo, ya
sea en forma de color plano, de un motivo preestablecido o incluso de una copia de
una zona de la imagen, existen herramientas que permiten eliminarlo. Estas
herramientas pertenecen al grupo de los Borradores.
El Borrador permite quitar la pintura de una zona determinada del lienzo y

sustituirla por el color de Fondo. En la barra de opciones se encuentra prácticamente
todas las opciones ya conocidas. Esto es porque se puede utilizar el borrador como si
de un pincel se tratase, configurando su dureza, opacidad o flujo hasta adaptarse a las
necesidades.
Borrador Mágico:
El Borrador mágico actúa únicamente sobre un color en la imagen, dejando las

áreas afectadas de color transparente. Esta herramienta acepta un valor de Tolerancia
que, según aumente, borrará también los colores similares al color
seleccionado en principio. Si se selecciona la casilla Contiguo (activada por
defecto) sólo se borrarán las áreas con el color de muestra conectadas a ésta. Si se
encontrase desactivada, el color de muestra se borraría de toda la imagen. Para
acabados más profesionales, se puede trabajar con las opciones Suavizar , que
hará más suave la transición del área borrada a la que se mantiene intacta. Y la opción
Opacidad , que en rangos bajos no borra totalmente el color, sino que lo hace
más transparente.

DISEÑO PARA LA WEB
Esta herramienta se comporta de forma muy similar al Bote de pintura , pero en vez
de rellenar con un color, lo borra.
Borrador de Fondos:
El Borrador de Fondos resulta de gran ayuda cuando es necesario extraer un

objeto de una imagen. La punta de esta herramienta tiene una forma especial. Está
formada por una base redondeada (como un pincel normal) pero añade una mirilla en
forma de aspa en su centro .
Esto es debido a que este borrador evalúa el color que se encuentra en el aspa y lo
borra si se encontrase en el resto de la punta. Consiguiendo así poder borrar un fondo
manteniendo intacto el objeto que queremos extraer de la imagen. Por lo tanto,
funcionará mejor cuanto mayor sea la diferencia de color entre el fondo y el elemento
que se quiere extraer. Desde luego, existen muchísimas opciones para configurar esta
herramienta y poder conseguir resultados más logrados. Como el Borrador de fondos
actúa de la misma forma que las herramientas de pintura, dispone del siguiente menú
para modificar la forma en la que el trazo es aplicado:
LAS CAPAS.
Trabajando con Capas:
1. Añadir un Texto a la Imagen ; para el ejemplo, ingresar la palabra “Senati”, se

observa que ya se agregó la capa de texto en la ventana de Capas.
2. Cambiar la estructura de la capa texto, agrandando la fuente a 100pt, cambiando a

color blanco.

DISEÑO PARA LA WEB
3. Dar clic izquierdo en la venta capas, a la capa de texto “Senati” y arrastrarla hacia
debajo de la segunda capa, para observar cómo cambia el orden de las mismas.
4. Es factible también ocultar las capas, según fuera la necesidad, ocultando o

mostrando dando clic en icono del ojo en la capa correspondiente.
5. Así mismo, se puede cambiar la Opacidad, para volver transparente una capa,
según el porcentaje seleccionado.
LAS CAPAS.
Una capa es como una lámina de acetato transparente y el programa te permite

trabajar con cuantas capas necesites. Imagina, pues, un conjunto de láminas de
acetato; la que se encuentre en la parte superior tapará a las otras, pero sólo en las
zonas en las que tenga pintura, el resto permanecerá transparente. Sería como la

DISEÑO PARA LA WEB
forma tradicional de hacer dibujos animados, en los que se pintaba un fondo, y los
personajes se superponían sobre láminas transparentes.
Ventana De Capas.
Si la ventana Capas no se encontrase en el Área de ventanas, se puede activar desde

el menú Ventana → Capas o pulsando la tecla F7
La ventana de Capas mostrara cada una de ellas, representando el orden de la

posición:
Crear nuevas capas:
Para añadir nuevas capas (hojas de acetato) a la composición, se deberá hacer clic en
el icono de Nueva capa , se observa, como el programa añade una capa
transparente sobre todas las que ya estaban creadas. Por defecto, Photoshop, nombra
a las capas automáticamente. Si se desea dar un nombre para reconocerla más
fácilmente, sólo se tiene que hacer doble clic sobre el nombre de la capa y escribir el
nuevo nombre en su lugar.
Enlazar capas:
Enlazar es una función que permite mantener la posición relativa entre 2 o más capas.
Para enlazar dos capas sólo se tiene que seleccionar ambas manteniendo la tecla Ctrl
pulsada (para crear selecciones múltiples) y pulsar el botón de Enlazar capas .

DISEÑO PARA LA WEB
Este icono enlazar indica que la capa está enlazada a la capa activa del momento.
La selección múltiple de capas permite, además, una opción muy útil: el alineamiento.
Se puede observar la barra de opciones de la herramienta Mover :
Alineamiento automático de capas.

Photoshop incorpora una opción muy útil en la composición de imágenes: el
Alineamiento automático de capas. Esta opción tiene como objetivo el estudio de las
diferentes capas seleccionadas para intentar encuadrarlas para que formen un todo
homogéneo. De esta forma se puede crear imágenes panorámicas utilizando
diferentes tomas de un mismo paisaje. Para utilizar esta opción sólo se tiene que
seleccionar las capas que intervendrán en la operación y aplicar el comando Edición
→ Alinear capas automáticamente.
- Automático: Photoshop analiza las imágenes y aplica una transformación en

perspectiva o cilíndrica a las capas, además de cambiar su posición si fuese
necesario.
- Perspectiva: Photoshop aplica una transformación de perspectiva, sesgo y escala
sobre las imágenes para que se acoplen correctamente. La imagen central
permanecerá intacta, el resto se ajustará a ella.
- Collage: Permite mover, rotar y escalar cada imagen.
- Cilíndrico: Como en el anterior, la imagen central no se modifica, el resto se
transforma mostrándose como un cilindro abierto verticalmente. Esta opción es muy
aconsejable para panoramas amplios.
- Esférica: Parecido a la anterior, pero muestra la imagen como en el interior de una
esfera.

DISEÑO PARA LA WEB
- Cambiar posición: Cuando las imágenes están tomadas sin ningún tipo de
perspectiva esta opción es la más adecuada. Reconstruye el resultado moviendo
las capas seleccionadas haciendo coincidir sus bordes superponiéndolos.
- Muchas de las cámaras actuales son capaces de proporcionar a Photoshop la
información necesaria para que elija el mejor modo. Una vez aplicado el
Alineamiento automático de capas se puede utilizar la opción Edición → Fusionar
capas automáticamente para que las inconsistencias y cambios de exposición y
color entre las diferentes capas se igualen y quede una imagen compuesta
uniforme.
Bloquear las capas.

Cuando se tengan capas en estados finales, es decir, que no se requiera moverlas o
modificarlas más, se pueden bloquear para evitar hacer cambios sobre ellas por error.
Existen diferentes tipos de bloqueos y todos se encuentran en la ventana de Capas.
Tipos de Bloqueo en la ventana Capas
- El bloqueo de píxeles transparentes bloquea la edición de estas zonas, no

permitiendo añadir pintura en las zonas transparentes.
- El bloqueo de píxeles de imagen deshabilita el uso de cualquier herramienta que
pudiese afectar a la pintura de la capa.
- El bloqueo de posición bloquea la capa en el sitio en el que se encuentra.
Puedes seguir trabajando con ella, pero no puedes desplazarla mientras siga
bloqueada.
- Si se pulsa el botón Bloquear todas , la capa se bloquea completamente y no es
posible realizar ningún cambio sobre ella.
En todos los casos anteriores aparece el símbolo de bloqueo junto al nombre de la

capa .
LOS CANALES.
La ventana Canales, se puede ver haciendo clic en la pestaña Canales, que
normalmente está en el mismo grupo que Capas.
En esta ventana se verá la lista de canales de la imagen. Cada uno de ellos guarda
información sobre los elementos de color de la imagen. El número de canales depende
de su modo de color, por ejemplo el modo CMYK tiene al menos cuatro canales, uno
reservado para el cian, otro para el magenta, para el amarillo y un último para el negro.

DISEÑO PARA LA WEB
En el caso del RGB sólo se encontraran tres. Se puede añadir más canales (Alfa) que
almacenarán información sobre selecciones hechas sobre el lienzo.
SELECCIONES.
La selección es una parte de la capa, que aparece delimitada por un borde de líneas
discontinuas blancas y negras. Cuando hay algo seleccionado, las acciones que se
realicen sólo pueden aplicarse a esa selección. Por ejemplo, no se puede pintar fuera
de la selección, y si se copia, solo copiara solo el contenido de la selección.
Herramientas de Selección:
- Herramientas de selección de Marco:
- Herramientas de selección de Lazo:
- Herramientas de Selección Rápida:
REDIMENSIONAR LA IMAGEN.
A pesar de no tratarse de una herramienta de selección, la herramienta Recortar

coincide en rasgos generales con estas herramientas. Sirve para recortar parte del
documento para desecharlo. Su funcionamiento es el siguiente:

DISEÑO PARA LA WEB
1. Seleccionar la herramienta Recortar en el panel de herramientas.

2. Seleccionar el área de la imagen que se quiera que permanezca.
3. Se puede modificar el alto y el ancho de la selección utilizando las guías de tamaño
. También se puede desplazar haciendo clic sobre ella y arrastrándola a la
posición correcta.
4. Cuando se tenga el área deseada encuadrada en el rectángulo, dar doble clic sobre
ella o pulsar el icono en la Barra de opciones.
Una vez aceptado el recorte, la parte sobrante se desecha y la imagen toma el tamaño
de la selección del recorte.
Si se desmarca la casilla Eliminar píxeles recortados, no se perderá el tamaño original

de forma que siempre se podrá volver a recortar para hacer más grande la imagen sin
perder todas las modificaciones que posteriormente se haya hecho a la imagen.
Otro modo de editar el tamaño del lienzo de la imagen es utilizando el comando

Imagen → Tamaño de lienzo.
Desde aquí se puede modificar la altura y anchura del lienzo y escoger dónde anclar la
imagen existente, para que en caso de recorte se mantenga en el centro o en alguna
de las esquinas. Si el tamaño final es mayor al original, se podrá elegir el color del
sobrante desde el menú que se encuentra al pie:
También existe la opción de redimensionar la imagen sin recortarla. Simplemente

cambiando su altura y/o anchura y dejando que Photoshop se encargue de calcular la
redimensión. Para ello, se debe de hacer clic en el comando Imagen →Tamaño de
imagen y modificar las dimensiones en píxeles del documento:

DISEÑO PARA LA WEB
INDCrear máscaras de capa.
Crear una máscara es muy sencillo, sólo hay que seguir unos pocos pasos:
Paso 1. Máscara de capa en la Ventana Capas

Paso 2. Seleccionar en la ventana Capas la capa sobre la que se quiere que actúe la
máscara.
Paso 3. Pulsar el botón Añadir máscara vectorial en la misma ventana.
Paso 4. La imagen arriba muestra el resultado de seguir estos pasos en la ventana
Capas.
Aparece una nueva miniatura a la derecha de la miniatura de la capa. Ésta es la

miniatura de la nueva máscara . En principio la máscara se muestra en blanco, por
lo que la capa sobre la que actúa no se ve afectada en su opacidad por ningún
cambio. El recuadro que rodea a la miniatura de la máscara indica sobre dónde se
está aplicando la pintura. Se observara que haciendo clic en una de las miniaturas, se
cambia su estado, activándolas y permitiendo el uso de pintura sobre ella.
A veces es aconsejable el uso de pinceles por su suavizado, esto permite crear

transiciones de opacidad más fácilmente en los bordes. Para crear la capa, se puede
activar su visibilidad desde la pestaña de Canales, al lado de la pestaña Capas, o
desde el menú Ventana → Canales.
Además de los tres canales de color, se encuentran los canales Alfa y las máscaras de
selección y de capa. Activando el icono de visibilidad , se puede ver la máscara de
capa sobre el lienzo.

DISEÑO PARA LA WEB
Está predefinido que las máscaras se muestren de color rojo y con una opacidad del
50%, pero se podría cambiar estas propiedades haciendo doble clic sobre su
miniatura.
También se puede hacer clic derecho en su miniatura para ver sus opciones:
Las últimas sirven para crear diversas selecciones a partir de la forma de la máscara.
- Eliminar máscara de capa; elimina la máscara de capa restaurando la capa a su

estado original.
- Aplicar máscara de capa; fusiona la capa y la máscara dando como resultado una
sola capa con los efectos obtenidos.
- También es posible Deshabilitar la máscara de capa para no eliminarla, pero
manteniendo sus efectos inactivos.
LAS MÁSCARAS.
Las máscaras son una solución muy buena a muchos de los retoques que se
requieran realizar. Una máscara, en principio, no es más que un delimitador que se
colocara sobre una capa. Este delimitador determinará el nivel de opacidad de la capa
sobre la que actúa. Las máscaras sólo permiten colores pertenecientes a la gama de
escala de grises. El color negro en una máscara indica que la capa sobre la que actúa
en esa zona será totalmente transparente. Al contrario, una zona blanca en una
máscara indicará que la capa afectada mantendrá su opacidad al 100% en esa zona.
De ahí que los diferentes niveles de grises equivalgan a diferentes niveles de

opacidad.

DISEÑO PARA LA WEB
CAMBIANDO LA RESOLUCIÓN DE IMAGEN.

Lo primero que se debe de tener en cuenta es la resolución de la imagen. Es
aconsejable que la resolución se encuentre entre los 240 y 300ppp para imprimir la
imagen con calidad. Para averiguar la resolución de la imagen, se deberá de hacer clic
en Imagen → Tamaño de imagen.
Este cuadro de diálogo proporciona los datos sobre la imagen. Si la resolución fuese
menor a 240, se podrá modificar siguiendo los siguientes pasos:
- Desactiva la casilla Remuestrear la imagen si se encontrase activada. Esta acción
protegerá los píxeles de la imagen impidiendo a Photoshop que la redimensione
interpolando nuevos píxeles en la imagen.
- Escribir la nueva resolución de la imagen en la caja de texto de Resolución. Se
podrá observar cómo cambia el tamaño final de la imagen. Esto se debe a que
Photoshop, al no poder remuestrear la imagen para que se creen más píxeles por
cm2, reduce el tamaño de salida de la imagen porque así la profundidad de píxeles
aumentará.
- Pulsar el botón OK y la resolución se aplicará.
1.2. DISEÑO Y TRABAJO DE PHOTOMERGE.
Este comando permitirá la creación de panorámicas utilizando varios archivos

diferentes de forma automática. Esta herramienta utiliza el Alineamiento automático de
capas y la fusión automática. Sólo que en este caso la interacción por parte del
usuario es mínima. Para acceder a esta opción, se deberá hacer clic en el menú
Archivo → Automatizar → Photomerge.

DISEÑO PARA LA WEB
Al hacer clic en esta opción, aparecerá el siguiente cuadro de diálogo:
Seleccionar los archivos que serán parte de la panorámica haciendo clic en Explorar.
Marcar la opción Fusionar imágenes si se quiere que el comando Fusionar capas
automáticamente se ejecute (de esta forma se homogeneizará el color y tono de la
fotografía final). Antes de pulsar OK, se deberá de seleccionar un modo de
Composición. La Composición interactiva, abrirá un nuevo cuadro de diálogo que
permitirá comprobar la composición antes de aceptarla. Desde este último cuadro de
diálogo también se podrá elegir si utilizar perspectiva o sólo un cambio de posición.
Curiosamente, el resultado con esta herramienta suele dar mejores resultados que
utilizando los comandos de alineamiento y fusión de capas automáticamente.
GUARDAR PARA WEB.

- Una vez tengas tu imagen acabada.
- Dar clic en el menú Archivo – Exportar – Guardar para la Web.

DISEÑO PARA LA WEB
- Aparecerá el siguiente cuadro de dialogo: Se puede observar que en primera

instancia se muestra la imagen con los ajustes optimizados para un tamaño de
archivo pequeño con una calidad aceptable.
- Dar clic en la pestaña 2 copias. Se mostrará a la izquierda la imagen original y a la

derecha la pre visualización de la imagen comprimida. Al pie de la imagen se podrá
ver sus características de compresión:
- Modificar las opciones para lograr una mayor compresión, o para alcanzar mayor
calidad. Se puede usar los ajustes predefinidos de Photoshop.
- Se puede observar como el tamaño del archivo cambia según se escoja un ajuste u
otro. Para los formatos de archivo GIF y PNG, se puede decidir los colores que se
almacenarán sirviéndose de la paleta y los botones de configuración. Pulsar para
añadir nuevos colores. Pulsar para eliminar existentes.

DISEÑO PARA LA WEB
- Dar clic en la pestaña 4 copias para trabajar con diferentes modelos de ajuste a un
mismo tiempo. Se podrá crear 3 tipos diferentes de formatos para comparar entre
ellos.
- Cuando se tenga un modelo optimizado y se quiera guardar, se dará clic sobre él

para seleccionarlo. Pulsar el botón Guardar y se abrirá el cuadro de diálogo de
Guardar optimizado como. Dar un nombre al archivo y pulsar Guardar.
Nota Importante: Utilizar los formatos .jpg, .gif y .png para imágenes que se utilizaran
en las páginas web.
1.3. DISEÑO DE OBJETOS 3D.
Aunque Photoshop no es un programa especializado en gráficos en tres dimensiones,

como 3DMax, Rhinoceros o SolidWorks, dispone de las funciones básicas para
trabajar en gráficos 3D. Uno de los usos más frecuente de 3D en Photoshop es para
crear textos en tres dimensiones. También se pueden crear otro tipo de objetos a partir
de trazados, capas y selecciones. Un objeto 3D en Photoshop está definido por seis
elementos: Malla, material, iluminación, cámara, entorno y escena.
La malla define la forma de objeto y depende del elemento de partida que se
seleccione al crear el objeto (texto, forma, selección, etc.).

DISEÑO PARA LA WEB
El material determina la textura y el color del objeto, se puede cambiar los materiales
de varias formas: con colores, con materiales predefinidos y a partir de imágenes
proporcionadas por el usuario.
La iluminación define los brillos y las sombras del objeto. Se Puede modificar la
intensidad de la iluminación y añadir nuevos puntos de luz.
La posición de la cámara define desde qué ángulo se ve el objeto 3D. Se puede girar,
mover y escalar en cada uno de tres ejes.
El entorno y la escena afectan a elementos como el fondo y la sombra en la línea de

tierra.
También existe gran cantidad de material dentro de la página de Adobe.
Para crear un objeto 3D, ir al menú 3D y allí se encontrara varias opciones, como
muestra la siguiente imagen.
Nueva capa 3D a partir de archivo:

Se puede abrir un archivo 3D creado con otro programa, los formatos admitidos son
los que se puede ver en la siguiente imagen.
Nueva extrusión 3D a partir de capa seleccionada.

Se creará un objeto 3D a partir de los elementos que haya en la capa que se tenga
seleccionada. Por ejemplo, si es una capa de texto, se creará un texto en 3D, y si es
una capa que contiene una forma predefinida se creará el objeto 3D de esa forma
predefinida.

DISEÑO PARA LA WEB
Otra forma equivalente de crear un objeto de texto en 3D es desde el menú Texto →

Extruir a 3D.
Nueva extrusión 3D a partir del trazado seleccionado.

Se creará un objeto 3D a partir del trazado que se tenga seleccionado. Por ejemplo, se
puede dibujar un trazado con la herramienta lápiz y convertirlo en un objeto 3D.
Nueva extrusión 3D a partir de la selección actual.

Se creará un objeto 3D a partir de la selección actual. Se Puede crear una selección
con cualquiera de las herramientas de selección y se creará un objeto 3D con la forma
de la selección. Por ejemplo, en la siguiente imagen se ha seleccionado un texto con
la herramienta Rectángulo, se observa que lo que está en 3D es el rectángulo, no las
letras que contenía.
Nueva malla a partir de capa.

A partir de esta opción se abrirán varias opciones más, como se puede ver en la
siguiente imagen.
Unas de las más utilizadas son las que se muestra en la siguiente imagen, Ajuste
preestablecido de malla que permiten crear objetos 3D de formas geométricas
conocidas, como el Cono, Cubo, Cilindro, Rosco, etc. En la siguiente imagen se puede
ver la forma Rosco.
INTERFAZ 3D.
Una vez creado un objeto 3D, se verá el entorno de trabajo 3D. Para ver este entorno
se debe de tener seleccionada la herramienta Mover . En el centro de la pantalla se

DISEÑO PARA LA WEB
tiene la vista principal con el objeto 3D, en este caso el texto "Senati" y un entramado
o cuadrícula en lo que sería "el suelo" que sirve de referencia para ver las tres
dimensiones. En la esquina inferior izquierda aparecen los ejes XYZ que son muy
útiles para saber dónde se encuentra cada eje, algo que no es evidente si se da
muchas vueltas al objeto. Como se sabe el eje X es el de color rojo y que en esta
imagen apunta a la derecha, el eje Y de color verde y que apunta hacia arriba y el eje
Z de color azul que apunta hacia adelante. En la esquina superior izquierda aparece la
vista secundaria. En esta vista se puede definir el punto de vista que se quiera, desde
arriba, desde la izquierda, etc. En cualquier momento se puede intercambiar las vistas
primaria y secundaria con el botón intercambiar situado en la vista secundaria.
En la parte derecha se verá el panel de propiedades y el panel 3D. Al seleccionar un

elemento del panel 3D aparecen sus características en el panel de propiedades
situado justo encima. Por ejemplo, en la imagen anterior se tenía seleccionada el
elemento “Senati” y en el panel de propiedades se observa sus características como
Capturar sombras, Proyectar sombras, etc. Los controles gráficos permiten realizar
giros, movimientos y escalar en cada uno de tres ejes.
Materiales 3D.
Se creara un objeto de texto 3D y a partir de él se explicara varios aspectos,
empezando por los materiales. El material determina la textura y color del objeto. Lo
que se va a explicar para el texto 3D se puede aplicar también a otros objetos 3D
creados por las diferentes opciones de extrusión 3D que se han citado anteriormente.
Crear un documento nuevo con fondo blanco y con la herramienta texto escribimos la
letra "S", como se ve en la siguiente imagen. Se Podría escribir más letras, pero con
una sola se verá mejor. Asignar un tamaño grande de 150 ptos.

DISEÑO PARA LA WEB
Ubicarse en el menú 3D y elegir Nueva extrusión 3D a partir de capa seleccionada, lo

cual creará un objeto 3D. Se Pasara al espacio de trabajo en 3D con la interfaz que ya
se ha visto y el panel 3D tendrá el aspecto que muestra la imagen siguiente.
El panel refleja las partes de un objeto 3D: Entorno, Escena, Malla, Materiales, Luz y
Cámara. Ahora se observara los materiales. Una extrusión de un objeto 3D de texto
está formada por cinco materiales, tal y como se ven en la imagen anterior. Se puede
entender a qué se refiere cada material si se observa la siguiente figura.
El material de inflación posterior es el que queda por la parte de atrás de la letra, y lo

mismo ocurre con el material de bisel posterior. Se puede modificar cada material de
forma independiente o varios a la vez, según lo que se seleccione. Puesto que se ha
seleccionado la fila a Material de inflación frontal, solo se va a modificar este material.
Inicialmente el panel de propiedades de este material es el siguiente.
Un material está compuesto por cuatro tipos de texturas: Difusión, Especular,

Iluminación y Ambiente. Estas texturas se pueden definir de un color o mediante un
archivo que contiene la textura (salvo Ambiente). Un material también tiene las
propiedades de brillo, reflejo, rugosidad, relieve, opacidad y refracción. Estas
propiedades se pueden regular moviendo el mando deslizador que hay a su lado, o
dando un valor numérico en la casilla correspondiente. También mediante un archivo

DISEÑO PARA LA WEB
que contiene la textura (salvo Refracción). El tipo de textura Difusión es el que

determina principalmente el color del material.
Tanto el cuadrado como la bola roja de la derecha es de ese color porque el texto del
que se partió antes de realizar la extrusión era rojo, pero se puede modificarlo
haciendo clic en el cuadrado para abrir el selector de colores, o también haciendo clic
en la bola para abrir el desplegable y asignar una de las texturas predefinidas, por
ejemplo, Tela, como se puede ver en la siguiente imagen.
Pulsando en el botón de la esquina superior derecha se pueden cargar más texturas

que previamente se deben de descargar de internet. Asignar una de estas texturas
predefinidas es la opción más fácil, pero existe otra posibilidad que consiste en utilizar
una textura creada por los usuarios. Para ello se debe hacer clic en el botón que hay al
lado de Difusión y se presentarán dos opciones, como muestra la siguiente imagen.
Nueva textura permite crear la textura en ese momento. Cargar textura permitirá
cargar una textura creada previamente y guardada en un archivo. Tanto en un caso
como en otro, para crear una textura se puede utilizar las herramientas de Photoshop
para crear una imagen que represente la textura que se busca. Una vez se tenga la
textura cargada se puede editarla, para ello hay que hacer clic en el botón que hay al
lado de Difusión y ahora se presentarán cinco opciones, como muestra la imagen
anterior. Si se escoge Editar propiedades de UV, aparecerá el siguiente cuadro de
diálogo donde es muy útil variar la escala U y V para ajustar la textura al tamaño del
objeto 3D.

DISEÑO PARA LA WEB
Esto que se ha visto para el tipo de textura Difusión se puede repetir para otros dos
tipos de textura: Especular e Iluminación. El tipo Especular define el color que se
muestra para las propiedades especulares (iluminación, resplandor o brillo). El tipo
Iluminación define el color que no se debe a la iluminación que llega al objeto, sino que
es como si el objeto estuviese iluminado desde dentro. El grupo del brillo, reflejo,
rugosidad, relieve, opacidad y refracción hacen lo que indica su nombre y lo mejor es ir
probando para ver el efecto que produce cada uno de ellos en el material que se tenga
asignado.
Malla 3D.
Como ya se ha mencionado, la malla es la parte de un objeto 3D que contiene la
estructura o forma del objeto. La malla está formada por muchos polígonos pequeños
que a su vez están formados por vectores. No es posible modificar a mano estos
polígonos pero sí se tienen opciones para deformar la malla en su conjunto. Se puede
aumentar y disminuir la escala del objeto sin que se pierda resolución ya que los
vectores están definidos de forma matemática, no por pixeles.
Para acceder a las propiedades de la malla se debe de hacer doble clic en la línea del
panel 3D que contiene la malla, normalmente la malla se representa por este icono ,
pero en caso de objetos de texto, como el ejemplo que se está tratando, el icono es
distinto, tiene esta forma .
En cualquier caso, para editar las propiedades de la malla se debe hacer doble clic en
la línea del panel 3D que contiene la malla. Aparecerá el siguiente cuadro de diálogo:
Desde aquí se puede editar las propiedades de la malla. Si se marca el recuadro

Capturar sombras, se verán las sombras que se generan dentro del propio objeto 3D,
si el objeto no tiene huecos, por ejemplo un cilindro, no se generarán sombras de este
tipo. En muchas de las letras de un texto sí se generan. Si se marca el recuadro
Proyectar sombras, se verán las sombras que proyecta el objeto sobre el fondo. Al
abrir el Selector de extrusiones que contiene la miniatura del objeto 3D se verá una
imagen como la siguiente.

DISEÑO PARA LA WEB
Aquí se puede seleccionar el tipo de malla que se quiera para el objeto, los iconos son
bastante descriptivos de las distintas posibilidades. Se puede hacer que aparezca el
bisel, que se curve la parte frontal, etc. Se puede hacer diversas pruebas, siempre se
puede volver a la situación inicial con el botón Restaurar deformación. Por ejemplo, la
quinta opción, inflar, produce el siguiente efecto.
Con el regulador de Profundidad de extrusión se puede hacer que la extrusión sea

más o menos profunda, o dicho de otra forma, se puede hacer que el grosor de la letra
sea mayor o menor. Si se pulsa en Texto se podrá cambiar el color del texto. Al hacer
clic en el botón Panel Carácter se accederá a las opciones para cambiar el tipo de
letra, tamaño, etc. El botón Editar origen permite editar el texto, cambiar, borrar y
añadir letras.
Se han visto las opciones más utilizadas de la malla pero todavía hay otras opciones
que permiten ajustar más parámetros para realizar deformaciones de la extrusión y
para modificar la tapa (parte frontal y parte trasera). Para acceder a estas opciones
hay que pulsar en el segundo botón Deformar y tercer botón Tapa del panel de
Propiedades.
Por ejemplo, desde Deformar se pueden torcer estrechar y curvar el objeto 3D, estas
operaciones se pueden realizar desde los reguladores del panel o desde un manejador
gráfico utilizando el mouse. Por ejemplo, en la siguiente imagen se ve el manejador en
la función de curvar.

DISEÑO PARA LA WEB
Rotar, desplazar y escalar.

Un objeto 3D tiene una representación en dos dimensiones que depende de la
posición donde se coloque el observador. En Photoshop el observador está
representado por la cámara. El otro elemento que interviene en la representación es el
sistema de coordenadas. Ya se conoce el significado de los ejes XYZ y su miniatura
situada en la esquina inferior izquierda.
Se pueden rotar, mover y escalar el objeto a lo largo de los tres ejes de dos formas, la
más intuitiva y gráfica es utilizando los controles gráficos que trae esta versión de
Photoshop CS6. Para activarlos basta tener seleccionada la herramienta Mover y
hacer clic dentro del objeto 3D, entonces aparecerán los controles.
Hay tres controles en cada eje y un control en el centro, para activar cada control
basta hacer clic sobre él (para seleccionarlo) y arrastrar el cursor para realizar la
acción correspondiente. Por ejemplo, para mover sobre el eje X, hacemos clic en el
control con forma de cono y pasará a color amarillo, sin soltar, arrastramos el cursor y
el objeto 3D se desplazará sobre el eje X.
Como se ve en la figura anterior hay un control para Escalar, otro para Rotar y otro
para Mover en cada eje, además en el centro hay un control en forma de cubo que
sirve para Escalar de forma uniforme todo el objeto sobre los tres ejes.
Estos controles gráficos son muy fáciles de usar, también se puede realizar acciones
sobre la representación del objeto3D con los botones Modo 3D.
- El primer botón rotar , hace rotar el objeto sobre el eje X al mover el cursor arriba
y abajo; y rotar sobre el eje Y al mover el cursor hacia derecha/izquierda, al pulsar
la tecla Alt rota sobre el eje Z.
- El segundo botón desplazar , hace rotar al objeto sobre el eje Z (igual que el
botón anterior pulsando Alt).
- El tercer botón Arrastrar , mueve el objeto hacia derecha/izquierda y arriba/abajo,
para moverse hacia adelante/atrás pulsar la tecla Alt. Es similar al primer botón
pero lo que se mueve es el punto de vista de la cámara.
- El cuarto botón deslizar es similar al anterior, mueve el punto de vista de la
cámara hacia derecha/izquierda y hacia adelante/atrás.
- El quinto botón escalar cambia la escala del objeto.
Iluminación 3D.
En Photoshop no sólo se puede representar la geometría de un objeto 3D, también se
puede representar las sombras que genera según la posición de la luz que recibe. Al
representar las sombras el objeto adquiere mayor realismo. Por defecto un objeto está
iluminado por una luz infinita, pero se puede añadir luces de más tipos: luz puntual y
luz de foco. En la siguiente imagen el objeto está iluminado por dos luces infinitas, un
foco y una luz puntual. Para añadir una nueva luz basta hacer clic en el botón inferior
nueva luz y preguntará qué tipo de luz se desea crear. Para eliminar una luz hay
que seleccionarla y pulsar el botón de la papelera.

DISEÑO PARA LA WEB
Una vez creada una luz, se puede indicar la dirección de la luz haciendo clic en la fila
del panel 3D correspondiente a esa luz, aparecerá un control gráfico como el que se
ve en la siguiente imagen. Haciendo clic y moviendo el extremo del control se puede
variar la dirección desde la que se emite la luz. Al hacer clic en la fila del panel 3D
correspondiente a la luz también aparecerá el panel de propiedades que se ve en la
imagen anterior. Desde este panel se puede cambiar el tipo de luz, su color,
intensidad, si produce o no sombra sobre el fondo y el grado de suavizado de la luz.
La luz por defecto es la luz infinita que tiene el origen en el infinito y sus rayos de luz
son paralelos, sería el equivalente de la luz solar. La luz puntual tiene el origen en un
punto más cercano y sus rayos tienen forma de cono. Sería el equivalente de una
bombilla. El foco es una luz concentrada en un punto y en la que se puede variar el
ángulo del haz de luz y el ángulo del cono. Es el equivalente de enfocar con una
linterna una parte del objeto 3D.
El entorno y la escena.
El entorno permite definir propiedades de lo que rodea al objeto 3D. En la siguiente
imagen se puede ver estas propiedades.
Las propiedades que se pueden definir en la escena son superficie, líneas, puntos y
alinear colores. Los ajustes preestablecidos afectan a la forma de representar el objeto
3D y se pueden elegir entre una larga lista que contiene vistas en forma de malla

DISEÑO PARA LA WEB
metálica, máscara de pintura, vértices sombreados, etc. Si se marca la casilla Sección

transversal aparecerá el objeto partido por la mitad.
INTERPRETAR Y RENDERIZAR.
Como se ha dicho un objeto 3D está formado por vectores, no por pixeles, y tiene
definidas unas características de iluminación, textura y mallas. Una vez que se ha
acabado de diseñar un objeto 3D hay que someterle a un proceso para que todo esto
se aplique de forma precisa, este proceso es la interpretación. Para ello se debe ir al
menú 3D → Interpretar.
Una vez finalizada la interpretación se tendrá una imagen de más calidad con los
bordes mejor definidos y las sombras mejor calculadas. Es un proceso lento que
puede tardar varios minutos dependiendo de la potencia del ordenador y de la tarjeta
gráfica, por lo tanto es conveniente realizar la interpretación una vez se haya
terminado totalmente de diseñar el objeto 3D.
En el menú Edición → Preferencias 3D se puede elegir la calidad de la sombra. Por

último, el proceso de Rasterizar convierte la capa 3D en una capa normal, y el objeto
3D formado por vectores en una imagen de mapa de bits.
El objeto 3D deja de existir y ya no se podrá realizar cambios de las propiedades del

modelo 3D, como cambiar la posición o la textura, por esto conviene guardar una
copia de la versión 3D antes de rasterizarla.
Para rasterizar hay que salir de la herramienta Mover y pulsar con el botón derecho
sobre el objeto 3D y elegir Rasterizar en el menú contextual.
1.4. MANEJO DE VIDEOS EN ADOBE PHOTOSHOP.
Abrir y Colocar vídeo.

Para abrir un archivo de vídeo en Photoshop sólo se tiene que ir al menú Archivo →
Abrir y seleccionar un archivo de vídeo de un formato compatible con Photoshop. Otra
posibilidad es crear un archivo nuevo y en Predefinir seleccionar Película y vídeo y en
Tamaño elegir el adecuado al tipo de vídeo que se va a utilizar. Por ejemplo
seleccionar HDV 1080p/29,97

DISEÑO PARA LA WEB
A continuación ir a Archivo → Colocar y seleccionar el archivo que se quiere abrir. Una

vez que se tenga un archivo de vídeo abierto, se puede agregar más vídeos con el
comando Abrir → Colocar. También se puede agregar vídeos desde el botón + de la
parte derecha de las pistas de vídeo.
INTRODUCCIÓN
En esta versión CS6, Photoshop ha mejorado bastante el tratamiento del vídeo. Ahora
ya se puede utilizar Photoshop para realizar las tareas básicas de edición de vídeo sin
necesidad de recurrir a otros programas específicos para esa tarea.
Nuevas funciones:
Línea de tiempo similar a los programas especializados en edición de vídeo como
Adobe Premier.
Nuevos formatos para importar y exportar vídeo.

Nuevas funciones para cortar y editar vídeo, así como transiciones y efectos. Se
puede ver un vídeo en mp4 realizado con Photoshop a partir de un vídeo tomado con
una cámara de fotos en formato .AVI. En los vídeos se pueden cortar y pegar varios
fragmentos de vídeo con transiciones, se puede añadir texto e incluso se puede
realizar un efecto pictórico sobre un fragmento.
LÍNEA DE TIEMPO.
La línea de tiempo es el panel específico para manejar los vídeos dentro de
Photoshop. Como se puede ver en la siguiente imagen la línea de tiempo tiene un
aspecto similar a los programas especializados en edición de vídeo como Adobe
Premier. Consta de varias líneas horizontales llamadas pistas donde se pueden
colocar los elementos que intervienen en el vídeo. Pueden ser pistas de vídeo o de
audio. En la pistas de vídeo también se puede poner fotos, gráficos, texto, etc. Por
ejemplo, en la pista de vídeo puede existir una capa de texto. Con las pistas de vídeo
ocurre igual que con las capas, la situada más arriba tapa a la de abajo. Una capa de
texto que puede estar en la parte de arriba, puede contener un fondo transparente
para permitir ver la capa inferior.
En la parte superior puede existir una escala de tiempo y sobre ella estar el cabezal
reproductor que indica en qué fotograma del vídeo se encuentra situado. El vídeo se
visualiza en la zona de trabajo de Photoshop. En la parte izquierda están los controles
para reproducir el vídeo (avanzar, retroceder, reproducir, etc.) y los botones Dividir
y Transición .

DISEÑO PARA LA WEB
Cortar y pegar vídeo:

Una de las funciones más usadas al editar vídeo es modificar la duración del vídeo y
añadir trozos de vídeo en el orden que se quiera. Estas funciones están muy bien
resueltas en el editor de vídeo de Photoshop.
Recortar por los extremos:

Basta colocar el cursor en el principio o en el final del vídeo y el cursor tomará esta
forma en ese momento hay que hacer clic y arrastrar hasta la posición que se
quiera. Para poder recortar con más precisión, al hacer clic aparecerá una ventana
mostrando el fotograma correspondiente.
Cortar por el centro:

Para eliminar un trozo de vídeo de la parte central, se debe de hacer estos dos pasos:
Primero seleccionar el vídeo haciendo clic sobre él (se verá un fino recuadro a su
alrededor) y colocar el cabezal reproductor en la posición deseada y finalmente pulsar
el botón Dividir en cabeza lectora . Esto dividirá el vídeo en dos trozos. Ahora basta
aplicar el segundo paso que consiste en colocar en el punto que se ha dividido y
recortar hacia la derecha el segundo trozo que ha quedado de la división Las dos
partes del vídeo dividido quedarán una al lado de la otra sin ninguna separación de
tiempo.

DISEÑO PARA LA WEB
Otra forma de hacer lo mismo es dividir el vídeo dos veces, con lo cual se tendrá tres
fragmentos, y eliminar el fragmento central. Una característica importante de la
herramienta para recortar que se acaba de ver es que no es destructiva. Es decir, si
después de recortar y hacer otras cosas, y se considera que no fue una buena idea el
cortar, se puede volver a la zona recortada y hacer clic y arrastrar en sentido inverso
para recuperar el trozo eliminado.
Pegar:
Para pegar un fragmento de vídeo detrás de otro lo único que se tiene que hacer es
seleccionar el fragmento y arrastrarlo a continuación del vídeo que se desea. Ambos
fragmentos pueden estar en la misma pista de vídeo o en distintas pistas. Es decir
para pegar vídeo lo único que se tiene que hacer es colocarlo en la línea de tiempo a
continuación del momento que se quiera. Para traer nuevos vídeos se debe utilizar el
comando Colocar o el botón +, como ya se ha explicado anteriormente.
Transiciones:
Una transición permite pasar de un elemento a otro de forma suave. Puede haber
transiciones para pasar de un fragmento de vídeo a otro, o para para pasar de un texto
a un vídeo, fotografía, etc. La transición puede ser de inicio o de finalización según se
coloque al principio o al final del fragmento, esto lo hace Photoshop de forma
automática. Si se coloca la transición al inicio de un fragmento comenzará en fondo
transparente para gradualmente ir pasando a la imagen del vídeo (o del texto,
fotografía, etc.) También se puede pasar de fondo transparente a elegir un color.
Si se coloca la transición al final de un fragmento la imagen se irá desvaneciendo

hasta quedar en fondo transparente. Es conveniente colocar transiciones siempre que
se pase de un vídeo a otro para evitar saltos bruscos en la imagen. Para crear una
transición hay que hacer clic en el icono Transición para que se abra una ventana
flotante.
Ahora se debe de elegir la transición que se quiera y arrastrarla a la pista que se

desee y en el instante de la línea de tiempo que se requiera. Se verá como aparece un
icono en forma de triángulo en el punto donde se ha colocado la transición, tal y como
se puede ver en la siguiente imagen.

DISEÑO PARA LA WEB
Al crear la transición se puede elegir su duración modificando el campo Duración. Una

vez creada también se puede cambiar la duración colocando el cursor en el icono de la
transición y arrastrando el cursor hacia la izquierda o derecha. En la siguiente imagen
se puede ver un ejemplo.
Los diferentes tipos de transición son:

- Transición. Es la transición estándar, parte de un fondo transparente, si es una
transición de inicio, o acaba en un fondo transparente, si es una transición de
finalización.
- Transición transversal. Se utiliza para unir dos fragmentos, equivale a poner una
transición de finalización y otra de inicio, son con fondo transparente.
- Transición con negro. Es igual que la transición estándar pero en lugar de acabar o
empezar con fondo transparente, lo hace en color negro.
- Transición con blanco. Es igual que la transición estándar pero en color blanco.
- Transición con color. Es igual que la transición estándar pero en el color que se ha
definimos en la ventana emergente.
En cualquier transición, si se hace clic con el botón derecho en el icono de la transición

aparece una ventana emergente en la que se puede modificar las propiedades de la
transición: el tipo, la duración y el color (en cualquier caso), también se puede eliminar
la transición.
Texto en un vídeo.
Para añadir texto a un vídeo se debe de crear una Capa de Texto y colocarla en la
línea de tiempo encima del vídeo, como el fondo de la capa de texto es transparente,
se verá el texto y debajo el vídeo.

DISEÑO PARA LA WEB
Si se quiere ver sólo el texto, se debe de colocar debajo una capa del color que se
desee. A la capa de texto se le puede aplicar los efectos y filtros que se deseen, como
a cualquier capa de texto. En la imagen que se ve a continuación se le ha aplicado un
efecto de bisel y relieve. En la siguiente imagen se puede ver la línea de tiempo con
una capa de texto situada encima de la pista de vídeo.
Sonido en un vídeo.
Para añadir audio a un vídeo se puede incluir archivos de sonido en la Pistas de
sonido. Si se ha grabado un vídeo con sonido, ese sonido estará incluido en la propia
pista de vídeo, no se creará para él una pista propia de sonido, de forma que no se
puede editar ese sonido de forma independiente. Photoshop no tiene editor de sonido
de forma que los sonidos que se incluyan en el vídeo ya deben venir bien acabados.
Lo único que se puede hacer es aumentar o disminuir el volumen, difuminarlo y
desaparecerlo. Para utilizar estas posibilidades se debe hacer clic con el botón
derecho en la pista de sonido para que aparezca la siguiente ventana.

DISEÑO PARA LA WEB
En la pista de audio se tiene el botón silenciar sonido para silenciar el audio y el

botón sonido que abre el desplegable que se ve en la imagen anterior y que permite
Añadir sonido (importar archivo de audio) Eliminar clip de audio (borra el clip
seleccionado) Reemplazar clic de audio (sustituye por otro archivo de audio) Nueva
pista de audio y Eliminar pista.
Efectos y filtros para vídeos.

La gran ventaja de editar vídeo con Photoshop es poder aplicar muchas de las
herramientas del programa al vídeo. Por ejemplo, los filtros. Esto permite grandes
posibilidades creativas. También se puede aplicar los filtros y efectos a las capas de
texto, así como a otros elementos, por ejemplo, las formas predeterminadas. Así se
podrá incluir en el vídeo diversas formas como flechas, estrellas, corazones, etc.
Antes de aplicar un filtro a un fragmento de vídeo hay que convertir la capa que lo
contiene en objeto inteligente desde Filtro → Convertir para filtros inteligentes. A partir
de ese momento se puede aplicar a la capa filtros y estilos de capa que afectarán a
todo el vídeo de la capa. Por ejemplo, en la siguiente imagen se puede ver como la
capa 21084 – 300774 tiene aplicado un filtro inteligente y galería de filtros,
concretamente se ha aplicado el filtro Trazos de pastel, en la parte izquierda se puede
ver el efecto del filtro sobre el vídeo.

DISEÑO PARA LA WEB
Publicar el vídeo.
Una vez que se ha terminado el vídeo se debe de guardar como un archivo .PSD por
si más adelante se quiere modificar y a continuación se debe crear un archivo en uno
de los formatos de vídeo disponibles. A este proceso se le suele llamar generar o
renderizar el vídeo, pero Photoshop lo ha llamado Interpretar. Para realizar esta acción
hay que ir a Archivo → Exportar → Interpretar vídeo.
Aparecerá la siguiente pantalla para fijar los parámetros del proceso de interpretar el
vídeo.
Aunque este cuadro de diálogo tiene muchos parámetros, Photoshop los ajusta
inicialmente a las características del documento por lo que bastaría elegir la calidad
que se quiere de las tres que el programa ofrece (Calidad alta, media o baja) y dejar el
valor por defecto en los demás parámetros. Hay bastante diferencia en el tamaño del

DISEÑO PARA LA WEB
archivo generado entre elegir calidad alta y baja, este último puede ocupar hasta
cuatro veces menos. Puede ser interesante generar en las dos calidades y comprobar
el resultado ya que la pérdida de calidad puede no ser muy grande y si se tiene que
subir el archivo a Internet, es importante que no sea de un tamaño demasiado grande.
En Formato se puede elegir entre H.264 y DPX. El más común es H.264 que va a
generar un archivo con extensión .mp4. Una vez fijado el formato H.264 en el campo
Predefinir se puede seleccionar una de las calidades, o si se tiene muy claro dónde se
va a utilizar el vídeo, se puede elegir una de la opciones que se presentan según el
dispositivo y la resolución, tal y como se puede ver en la siguiente imagen.
Por ejemplo, si se va a subir el vídeo a YouTube basta con que se seleccione una de
las opciones existentes para YouTube dependiendo de la resolución del vídeo. En el
caso que se quiera cambiar el tamaño del vídeo generado, se puede seleccionar el
valor A medida en el campo Tamaño y escribir los valores de anchura y altura. Por
ejemplo, si se ha capturado el vídeo a 1280 x 720, se puede escribir los valores de 640
x 360 y el vídeo quedará generado a la mitad del tamaño original.
Finalmente, presionar Interpretar y empezara la exportación del Video.

DISEÑO PARA LA WEB
IMÁGENES. USO Y TRATAMIENTO PARA LA WEB.

El uso de las imágenes en la web se ha disparado en los últimos años. Esto es debido
a muchos factores, por ejemplo, a la mejora de la tecnología HTML5 y CSS3, el
enorme aumento de la velocidad de las conexiones ADSL, fibra óptica tanto en los
ordenadores de sobremesa como en los dispositivos móviles y desde luego por las
tendencias. Se estima que más del 60% del tráfico de descargas en Internet es de
imágenes.
Las imágenes en particular y los elementos multimedia en general permiten dotar a la

web de mayor dinamismo y ofrecer un aspecto visual mucho más atractivo. No es lo
mismo ver una web solo con texto, que si se le acompaña con elementos multimedia.
Para poder ofrecer una buena experiencia al usuario con las imágenes, estas deben
estar bien tratadas y optimizadas, para que dispongan de la mejor calidad posible y a
su vez puedan descargarlas con facilidad. Así no serán un obstáculo en la
optimización web y no van a suponer un problema para la velocidad de carga.
Y este sigue siendo el talón de Aquiles del diseño web, en el que curiosamente, no se
le presta la atención necesaria. Incluso hay muchos casos en los que se prescinde
casi por completo del uso de imágenes simplemente para que la web cargue más
rápido. Es curioso observar la preocupación por comprimir archivos js o css, arañar
bytes por aquí o por allá como sea, pero se olvida con demasiada frecuencia de la
optimización de imágenes. Y, son con diferencia lo que más puede ralentizar la carga
de una web. Si se está intentando hacer la web por propia cuenta, no solo se debe
buscar imágenes impactantes y gratis. Una vez que se descarguen, se debe de
tratarlas antes de subirlas. Para ello lo primero que se debe saber es que formatos de
imágenes se debe de utilizar y luego como optimizarlas.
1.5. FORMATOS DE IMÁGENES PARA LA WEB.
 JPG. Es el más utilizado en general. Es un formato comprimido en el que (explicado

de una manera muy rápida) se eliminan todos aquellos píxeles que no son
necesarios al comprimir. Pero es un formato con pérdida y si se trabaja una foto y
se comprime una y otra vez, acabará por degradarse por completo. Es el formato
ideal para subir una foto o cualquier tipo de imagen que no tenga una
transparencia. Dicho de otra manera, por norma general, lo que se debe subir a la
web son archivos de imagen en formato jpg.
También se podría encontrar con imágenes en el formato jpg. En teoría son lo

mismo y la diferencia fundamental es que jpg es el formato para Windows y el jpg
es para Mac. Pero, en una web no se está ni en Windows ni en Mac. Por lo general
se está en Linux y hay mejor compatibilidad para jpg. Eso no quiere decir, que si se
sube un jpeg no se vea, pero de cara a la optimización es donde se encontrará las
dificultades.
 PNG. Este formato en teoría, utiliza compresión sin pérdida pero las imágenes
suelen pesar mucho más, salvo excepciones. La particularidad es que utiliza
transparencias. Por ejemplo tal vez pueda apetecer eliminar el fondo en una imagen

DISEÑO PARA LA WEB
en la que uno aparece, de tal manera que la figura se funda con el fondo de la web.
O por ejemplo, cuando se quiere añadir un efecto de degradado con el fondo. Es en
estos casos y solo en ellos, es cuando se debe utilizar un archivo PNG.
 GIF. En su día fueron muy utilizados, pero ahora su uso se limita prácticamente a
los banners animados, es decir, donde van apareciendo varias imágenes dentro de
la misma imagen. Un claro ejemplo de ello son los banners publicitarios.
 SVG. Es un formato de imagen vectorial. No sirve para usarlo como una imagen,
sino que por su naturaleza vectorial es estupendo para usarlo con iconos o incluso
logotipos, porque se puede aumentar y disminuir su tamaño sin pérdida de calidad.
Esto es genial para el uso responsivo, ya que se reescala y visualiza perfectamente
en cualquier dispositivo. Además las imágenes en SVG pesan muy poquito.
 WebP Posiblemente sea el formato del futuro (ya muy próximo). Es un nuevo
formato de imagen para web que incluye compresión con y sin pérdidas además de
un canal alpha de 8-bits para transparencias. Se puede decir que es un todo en uno
que incluye lo bueno de todos los formatos actuales JPG, PNG y GIF.
Perteneciente a Google. Lo han hecho tanto para imágenes como para video con el
formato WebM. Según Google, las imágenes WebP sin pérdidas pesan un 26%
menos que un PNG. Si se le compara con un JPG, entre un 25% y un 34%.
El problema es el de siempre con todos los formatos. Este solo funciona en

Chrome, Opera y dispositivos Android. Claro que también es verdad que suponen el
64% del mercado.
Firefox no soporta este tipo de imágenes porque parece que están haciendo su
propio encoder para JPG. Microsoft y Apple también a su rollo. Esto es como lo de
los motores de renderizado de los navegadores. Hay que usar diferentes
instrucciones en CSS para que todos ellos lo interpreten bien. Así hay que andar
buscando compatibilidad para todos. En fin, el tiempo dirá lo que ocurre con este
nuevo formato pero se considera que es muy interesante. Además se puede
implementar con relativa facilidad en una web o incluso hacer que se muestren solo
si están disponibles.
El tratamiento de las imágenes.

Fundamentalmente hay cuatro cosas que se deben hacer con las imágenes que se
suben a la web.
Seleccionar el formato de imagen adecuado.

Recortar o adaptar la imagen a la resolución y medidas que va a ser mostrada en la
web.
Optimizarla comprimiendo y eliminando los metadatos que añaden peso innecesario
en la descarga. Subir la imagen e insertarla indicando sus medidas.

DISEÑO PARA LA WEB
Seleccionar el formato de imagen adecuado.

Si son imágenes, utilizar el jpg y si son imagen con transparencia, utilizar png. Esto
debe ser así siempre y de forma sistemática. Si se va a usar banners, entonces se
tendrá que elegir el formato GIF.
Si se descargan imágenes de Internet, se debe de tener en cuenta que muchas

pueden estar ya comprimidas. Recordar que cada vez que se comprime un jpg, se irá
degradando. Demasiadas compresiones pueden estropear la imagen. Recortar o
adaptar la imagen a la resolución y medidas que se va a mostrar en la web. Si se
recurre a webs para descargar imágenes libres de derechos, generalmente estas
vienen con una gran resolución y tamaño. Evidentemente no se pueden subir estas
imágenes tal y como se las descarga.
En primer lugar se debe tener en cuenta que la resolución de una imagen para una
web debe ser de 72 ppp (píxeles por pulgada). Habitualmente se descargan a una
resolución de 300 ppp. Al bajar la resolución automáticamente cambian las medidas
haciéndose más pequeñas, pero esto no es suficiente. El siguiente paso es saber qué
medidas exactamente se deben de poner en cada imagen. Otra cuestión importante es
que no es nada conveniente usar imágenes verticales y horizontales de forma
indiscriminada. Salvo excepciones y cosas puntuales, utilizar unas u otras, pero no
una mezcla de ellas, porque solo se conseguirá un mosaico poco agradable.
Es conveniente utilizar imágenes proporcionales. Por ejemplo: Si se tiene una imagen

cuyo original tiene unas medidas de 1000×1000, cualquier tamaño proporcional valdrá
para poner la imagen en la web y que no se deforme. Es decir, si se cuelga esa
imagen a 500×500 se verá exactamente igual, aunque más pequeña. Pero si se tiene
unas medidas de 1024×768 y si se la pone a 500×500, lo que se hará es deformarla.
La medida proporcional más cercana para una medida de 500×500 sería 500×375. Por
tanto, esto quiere decir que es muy importante, decidir de antemano, qué medidas se
van a necesitar en la web para las imágenes. Si se utiliza una imagen vertical la
proporcionalidad es completamente diferente, ya que aquí la altura es mayor que la
anchura. Esto dependerá fundamentalmente de donde vayan a ir situadas y de
cuantas columnas se usarán en la página.
Por ejemplo, si se utiliza 3 columnas, las medidas serán más grandes que si se usa
4,5 o 6. Tener claro esto de antemano, ahorrará tiempo a la hora de trabajar las
imágenes. Es cierto que en WordPress independientemente de cómo se suban, el
wordpress las adaptará, pero no se trata de que las adapte, porque entonces se estará
cometiendo un error garrafal y solo se contribuirá a que la velocidad de carga se
resienta de forma importante. Por otra parte, no tiene ningún sentido subir una imagen
a un tamaño enorme, cuando la resolución media de un monitor de sobremesa puede
estar en 1440×900 y con menor performance para los móviles y tablets.
OPTIMIZACIÓN Y COMPRESIÓN.
Una vez que se tenga la imagen con su resolución y medidas, toca optimizar su peso.
Para ello es necesario comprimirlas y eliminar los metadatos. Esto es aplicable en el
caso de las fotografías, que suelen incluir los datos EXIF que ha incorporado la

DISEÑO PARA LA WEB
cámara fotográfica. Estos añaden peso y no aportan nada, salvo que se tenga la
necesidad de mostrarlos. No es suficiente hacerlo desde Photoshop. Se van a
necesitar herramientas externas para poder comprimir bien el JPG y especialmente el
PNG. Hay que decir que el formato PNG, aunque en teoría es un formato de
compresión sin pérdidas, una vez se comprima, si las habrá y aunque suelen quedar
muy bien, el problema surge con los degradados. Se debe de tener mucho cuidado
con esto.
Subir la imagen e insertarla indicando sus medidas.

Si ya se tiene todo y solo queda subirla al wordpress. Una vez que se tenga en la
biblioteca, se puede insertar en una galería, página estática, portfolio o un post. Las
necesidades serán diferentes en función de donde se vaya a insertar, pero lo
importante, es que al añadirla aparezcan en el código las medidas de la misma. Si se
utiliza la opción añadir objeto, no se tendría que preocupar por nada, WordPress se
encarga de todo.
HERRAMIENTAS DE OPTIMIZACIÓN.
Hay muchas y gratuitas y otras de pago. Conoceremos algunas importantes.
Photoshop.
Lo mejor de lo mejor para el tratamiento de imágenes según muchos desarrolladores
Web. El problema es que no todo el mundo tiene acceso a él y si se tiene, no se es del
todo profesional, no se le saca ni el 10% del partido que este increíble programa
puede ofrecer. Una posibilidad muy completa sería utilizar GIMP, que es un programa
gratuito y que tiene más que de sobra para trabajar en diseño web. Estos programas
se utilizan para el diseño, establecer las medidas e incluso para comprimir, sin
embargo no son la herramienta adecuada o definitiva para la compresión web.
TinyPNG o TinyJPG
Esta es una herramienta fabulosa para la compresión de imágenes tanto en jpg como
en png. Aunque son dos URL diferentes, ahora ya se puede acceder desde tinyPNG y
comprimir también los JPG. El nivel de compresión es máximo y la pérdida es mínima,
salvo en los casos de los PNG donde hay degradados. Lo mejor de todo es que es
completamente gratuito.

DISEÑO PARA LA WEB
Ahora es posible incluirlo como plugin en WordPress y da la opción de comprimir hasta

500 imágenes por mes. A partir de ahí ya pasa a ser de pago, sin embargo, en la web
es completamente gratuita.
También es posible utilizar TinyPNG como un plugin de Photoshop a un precio más

que razonable y también puede ser instalado a nivel de servidor. Al instalarlo en un
servidor, comprimirá todas las imágenes que se suban de forma automática.
https://tinypng.com/
PageSpeed Insights y GTmetrix

Aunque no son unas herramientas en si para comprimir imágenes, cuando se hace un
test a la web, si detectan imágenes que deben ser optimizadas, Se las ofrecen
completamente gratuitas y lo que es mejor, a la perfección, sin pérdida y sin
metadatos.
https://developers.google.com/speed/pagespeed/insights/
https://gtmetrix.com/

DISEÑO PARA LA WEB
Jpegmini
Es una herramienta de pago para comprimir archivos jpeg y jpg sin pérdida de calidad.
La compresión es impresionante y apenas es posible percibir los cambios. Puede
comprimir a más de la mitad una imagen, sin que se dé cuenta en la calidad, incluso
para imprimir. Sin embargo cuando se haga un test a la web con PageSpeed o
GTmetrix, dirán que aún se pueden comprimir más. Esta herramienta no sirve para
archivos PNG.
http://www.jpegmini.com/
Exif Eraser
Una herramienta efectiva y rápida para eliminar de un plumazo los datos exif de una
foto o de una carpeta completa de fotos. Es una utilidad para Windows aunque ahora
parece que no tiene activa su web puedes conseguirlo a través de plataformas de
descarga, por ejemplo desde aquí.
http://descargar.cnet.com/Free-Exif-Eraser/3000-12511_4-75289373.html

DISEÑO PARA LA WEB
XnView
Es un completo programa que funciona como visualizador, organizador y convertidor.
Fantástico para trabajar imágenes por lotes. De tal manera que se pueden comprimir,
eliminar datos exif, recortar, añadir marcas de agua, renombrar archivos y un sin fin de
cosas más. Disponible una versión gratuita y también de pago.
http://www.xnview.com/en/

DISEÑO PARA LA WEB
II. DISEÑO WEB – WORDPRESS.
En esta tarea tratarán las siguientes operaciones:

2.1. Usos del WordPress.
2.2. Ventajas y Desventajas del WordPress.
2.3. XAMP, Instalación y WordPress dentro de XAMP.
- Computadora con microprocesadores Core 2 Duo o mayor capacidad.
- Acceso a internet.
- XAMP y WordPress
- Reconocer la Arquitectura de WordPress.
- Reconocer el Funcionamiento y los múltiples usos de WordPress.
- Reconocer el funcionamiento de XAMP y el Servidor con WordPress.
CONCEPTOS BÁSICOS.
WordPress es un sistema de gestión de contenidos (CMS) que permite crear y
mantener un blog u otro tipo de web. Con casi 10 años de existencia y más de un
millar de temas (plantillas) disponibles en su web oficial, no es solo un sistema sencillo
e intuitivo para crear un blog personal, sino que permite realizar toda clase de web
más complejas.
WordPress es un sistema ideal para un sitio web que se actualice periódicamente. Si

se escribe contenido con cierta frecuencia, cuando alguien accede al sitio web, puede
encontrar todos esos contenidos ordenados cronológicamente (primero los más
recientes y por último los más antiguos). Es el sistema ideal para los principiantes, o
para los que no tienen demasiados conocimientos técnicos. WordPress dispone de un
sistema de plugins, que permiten extender las capacidades de WordPress, de esa
forma se consigue un CMS más flexible.
2.1. USOS DEL WORDPRESS.
En muchas ocasiones se asocia WordPress con una herramienta que solo sirve para
hacer blogs. Esto no es correcto: con WordPress podemos hacer un blog y mucho
más: webs empresariales, tiendas online, periódico digital, central de reservas, etc. A
continuación se verá algunas de las cosas que se pueden crear con este gestor de
contenidos.
Blog.
Es su función más conocida. WordPress incorpora, en su instalación por defecto todas
las funcionalidades típicas de un blog: mostrar artículos en formato blog, opción de
añadir comentarios a las entradas, posibilidad de organizar los artículos por categorías
o etiquetas, etc.

DISEÑO PARA LA WEB
Además se podrán agregar en la web diversos módulos, llamados widgets en

WordPress, habituales de los blogs: listado de categorías del blog, listado de
etiquetas, buscador, lista de artículos más leídos, lista de últimos comentarios, etc.
Con todo ello se puede decir que posiblemente WordPress sea la mejor herramienta
para crear un blog, con más razón si cabe si tenemos en cuenta su sencillez de
manejo.
Web Corporativas.
WordPress puede servir perfectamente para crear una web empresarial, entendiendo
como tal una página donde se pueda informar sobre todo lo que concierne a la
empresa o negocio: quiénes somos, servicios, clientes, etc. Gracias a la multitud de
plantillas disponibles para WordPress se puede conseguir diseños muy variados para
la web, que podrían ir desde una web con diseño minimalista y que muestre poca a
información, a webs completas que carguen muchos datos en cada página.
Se pueden crear distintos apartados en la web para organizar los contenidos. Estos no
se limitan a páginas estáticas, o una página de blog, sino que gracias a los miles de
plugins disponibles para WordPress se pueden añadir más funcionalidades como
formulario de contacto, foro, directorios, etc.

DISEÑO PARA LA WEB
Tienda Online.
Aunque existan otros gestores de contenidos específicos para crear tiendas online
(PrestaShop, Magento, etc.), WordPress puede ser una opción completamente válida,
ya que dispone de varios plugins que permitirán incorporar una tienda online en la
web. De todos ellos, WooCommerce sería la opción más recomendable, aunque se
pueda elegir otro plugin.
Gracias a WordPress y el plugin WooCommerce se puede disponer de una tienda

online con todas las funcionalidades típicas que se espera encontrar en una aplicación
de este tipo: creación de productos ilimitada, organización de productos por categoría,
posibilidad de agregar atributos a los productos, diversos sistemas de pago y envío,
gestión avanzada de pedidos, etc.
Las funcionalidades de la tienda no se acabarán con las que incorpore el propio

WooCommerce, sino que se podrá añadir cientos de nuevas opciones gracias a los
plugins específicos para él: importación masiva de productos, portes de envío por
código postal, pasarelas de pago con tarjeta de crédito, precios de producto por
cantidad, generación de facturas, etc.
Otros usos.
Los miles de plugins disponibles para WordPress permitirán extender las posibilidades
de las web en WordPress, para poder conseguir casi cualquier cosa: foro de soporte,
web de gestión de reservas, directorio de empresas, canal de vídeos, etc. Si a esto se
le suma los miles de temas (plantillas) disponibles, las posibilidades para conseguir
cualquier tipo de web son casi infinitas.
2.2. VENTAJAS Y DESVENTAJAS DEL WORDPRESS.
Los 3 componentes más importantes de WordPress que permiten que sea una
herramienta tan poderosa son:

DISEÑO PARA LA WEB
- PLUGINS. Son complementos (software) que aumentan las capacidades y

posibilidades de WordPress hasta límites inimaginables. Los plugins se usan para
mejorar WordPress en diferentes áreas como marketing, redes sociales, seguridad,
SEO, diseño Web, contenido, tráfico Web, etc.
- TEMAS. Son plantillas que se utilizan en WordPress para modificar la apariencia y

diseño del sitio. Existe un sinfín de temas gratuitos y “premium” (de pago) que
ayudan a adaptar WordPress a cualquier tipo de necesidad y tipo de página Web.
Lo más recomendable es invertir en un tema “premium” ya que ofrece muchas más

posibilidades de diseño y personalización. Los temas premium más recomendables,
son:
Woothemes Thesis
Studiopress ThemeForest
También se puede utilizar, temas gratuitos, pero en cuanto es recomendable en

cuanto se tenga las posibilidades, cambiar a alguna de las opciones ya antes
mencionadas.
- WIDGETS. Son pequeños bloques de información que se utilizan en las Sidebars

de WordPress. Ayudan a darle al usuario un mayor control sobre el diseño y
contenido de su sitio Web o blog. Los widgets se pueden expandir y usar de
diferente forma dependiendo del tema y plugins que se instalen. Por ejemplo, un
plugin de email marketing podría incluir un widget para colocarlo en la sidebar y así
mostrar de suscripción. Los widgets se pueden usar en la sidebar pero algunos
temas permiten usar Widgets personalizados en el Footer, en el encabezado o
incluso usarlos para armar una página de inicio con diferentes secciones.

DISEÑO PARA LA WEB
¿POR QUÉ WORDPRESS?
WordPress ofrece muchas ventajas, entre las que destacan:
- Es muy fácil aprender a usarlo y está al alcance de cualquier usuario.

- No se necesitan conocimientos técnicos, de programación o diseño Web para crear
un sitio Web.
- El mantenimiento lo puede hacer el mismo usuario.
- Instalación y configuración en pocos minutos.
- Amigable con los motores de búsqueda.
- Muchas posibilidades de diseño.
- Se adapta a cualquier tipo de necesidad en la Web.
No importa el tipo de página Web que se quiera crear, WordPress es la mejor opción
para hacerlo de forma rápida y personalizada. No se necesita gastar miles de dólares
en un programador o diseñador. Lo único que se necesita para comenzar a usar la
plataforma es una cuenta de hospedaje Web y un dominio (aproximadamente $20
USD).
¿CÓMO SE ADMINISTRA O MANEJA WORDPRESS?
Todo se hace desde el “Escritorio” o Dashboard principal, en el cual se tiene todo para
manejar las diferentes áreas de WordPress y el sitio Web. En la siguiente imagen se
muestra los componentes principales:

DISEÑO PARA LA WEB
1. Ventana Principal: Es la ventana principal del Escritorio en donde se podrá ver un

resumen de las entradas publicadas, los comentarios recientes, noticias del mundo
de WordPress, escribir un post rápido y mucho más. Se puede manejar las cosas
que aparecen en esta en la parte superior donde dice “Opciones de Pantalla”.
2. Actualizaciones: Todo lo que se tenga que actualizar en WordPress, temas y
plugins, se podrá realizar en esta sección.
3. Entradas: En esta parte se puede agregar y editar nuevas entradas (o posts). Si se
requiere crear un blog, el desarrollador pasará una gran cantidad de tiempo en esta
sección.
4. Medios: En esta sección se podrá agregar una nueva imagen, documento o incluso
video.
5. Páginas: En esta sección se podrá agregar páginas más estáticas y que no tienen
fecha de publicación como los posts. Son muy usadas para crear sitios
corporativos, empresariales o de venta.
6. Comentarios: Se Maneja la sección de comentarios incluyendo edición,
aprobación, spam y papelera.
7. Genesis: En la imagen se puede ver que dice “Genesis”, este es el tema que se
está utilizando en el WordPress capturado. Se puede apreciar las opciones del
tema que se esté utilizando para poder modificar aspectos de diseño, tipografía,
estructura y mucho más.
8. Apariencia: En esta sección se puede editar e instalar nuevos temas, modificar el
código o CSS para mejorar el diseño, cambiar el encabezado y fondo del sitio.
También se puede encontrar la sección de Widgets.
9. Plugins: En esta sección se puede Instalar nuevos plugins, revisar los que ya se
tienen instalados, eliminar los que no se necesitan o también se puede editar el
código si fuera necesario.
10. Usuarios: En esta sección se puede agregar nuevos usuarios, editar el perfil y
administrar los diferentes perfiles de las personas que tienen acceso al sitio Web.
11. Herramientas: En esta sección se puede consultar todas las herramientas
disponibles (algunas vienen con plugins) y también importar o exportar

DISEÑO PARA LA WEB
configuraciones de temas o documentos de otras plataformas como Blogger,

LiveJournal, WordPress.com o Tumblr.
12. Ajustes: En esta sección se puede observar la configuración básica del sitio, de
escritura, lectura, comentarios, medios y enlaces permanentes.
Como se puede apreciar, el escritorio o Dashboard de WordPress, es como el corazón

de un software que cualquier usuario con conocimiento básico de computación puede
utilizar y administrar sin ningún problema.
2.3. XAMP, INSTALACIÓN Y WORDPRESS DENTRO DE XAMP.
Pasos para la instalación de Xamp en Windows:
a. Se puede descargar de varias páginas web, pero siempre será recomendable

desde la página web oficial, para este ejemplo, se descargara de la siguiente
dirección web: http://www.apachefriends.org/en/xampp-windows.html.
b. Abrir el programa descargado:
c. Se mostrará el asistente de instalación: Dar clic en Si – “Yes”, luego Ok.
d. Se mostrará la siguiente ventana: Clic en Siguiente – “Next”

DISEÑO PARA LA WEB
e. Seleccionar las herramientas a Instalar, o dejar las herramientas por defecto. Dar
clic en siguiente – “Next”
f. Seleccionar el lugar de destino de la aplicación. Dar clic en Siguiente – “Next”
g. Se mostrarán las herramientas a instalar y trabajar desde el XAMP Server

instalado, entre ellos WordPress, Drupal, y Joomla, Dar clic en siguiente – “Next”
h. En la ventana que se muestra, indica que el setup empezará la instalación en el

ordenador. Dar clic en siguiente – “Next”

DISEÑO PARA LA WEB
i. La instalación de cada una de las herramientas empezará a continuación. Se puede

apreciar que se instalan el PHPMyAdmin, el MySql y el Perl principalmente. Dar clic
en siguiente – “Next”
j. Activar la opción de ejecutar el panel de control del Xamp. Dar clic en Finalizar –
“Finish”
k. Abrir el Panel de Control de XAMPP. Se ubicará en la barra de tareas, en la

esquina inferior derecha de la ventana (al costado de la hora del sistema), si no se
visualiza, desplegar la lista de elementos. Dar clic en el Xamp

DISEÑO PARA LA WEB
l. Se mostrará la ventana del Panel de Control del Xamp, en la cual se activarán los
servicios de cada una de las herramientas instaladas.
m. Se mostrará una ventana de mensaje solicitando permiso al Firewall para poder

trabajar con el Servidor Apache. Dar clic en Permitir Acceso.
n. En cualquier navegador se podría poner de manera manual la dirección de

LocalHost para ver el entorno.

DISEÑO PARA LA WEB
¿Qué es XAMPP?
Es un servidor de plataforma libre, es un software que integra en una sola aplicación,

un servidor web Apache, intérpretes de lenguaje de scripts PHP, un servidor de base
de datos MySQL, un servidor de FTP FileZilla, el popular administrador de base de
datos escrito en PHP, MySQL, entre otros módulos.
Permite instalar de forma sencilla Apache en tu propio ordenador, sin importar el

sistema operativo (Linux, Windows, MAC o Solaris). Y lo mejor de todo es que su uso
es gratuito.
¿Para qué sirve?
Es una herramienta de desarrollo que permite probar el trabajo (páginas web o

programación por ejemplo) en el propio ordenador sin necesidad de tener que accesar
a internet. Si se es un desarrollador que recién está comenzando, XAMPP le provee
de una configuración totalmente funcional desde el momento que se instala, sin
embargo, es bueno acotar que la seguridad de datos no es su punto fuerte, por lo cual
no es suficientemente seguro para ambientes grandes o de producción.
XAMPP es un paquete formado por un servidor web Apache, una base de datos
MySQL y los intérpretes para los lenguajes PHP y Perl. De hecho su nombre viene de
ello, X (para cualquier sistema operativo), A (Apache), M (MySQL), P (PHP) y P (Perl).
INSTALACIÓN DE WORDPRESS DE MANERA LOCAL EN XAMPP.
1. Primero se debe de activar Apache y MySQL en el XAMPP Control Panel para

poder trabajar con el servidor local y crear la base de datos.
2. Luego ingresar al panel de PHPMyAdmin que debería mostrarse en la siguiente

dirección: http://localhost/phpmyadmin/.

DISEÑO PARA LA WEB
3. El siguiente paso será dar clic en “Nueva” para crear una nueva base de datos.
4. Como nombre de la base de datos, ingresar “devcode” y como cotejamiento se

seleccionara “utf8_general_ci” para evitar inconvenientes con los caracteres del
lenguaje español, no es la única opción que permite esto pero es el que se
empleara en el ejemplo, luego dar clic en “Crear”.
5. Una vez creada la base de datos, no será necesario crear las tablas, así que se
dejara la base de datos así como está.

DISEÑO PARA LA WEB
6. Ir al sitio web oficial de WordPress para descargar la versión en español, aparecerá

disponible la última versión, dar clic en el botón Descargar WordPress.
es.wordpress.org
7. Una vez descargado, se podrá acceder a la ubicación del archivo y se deberá de

descomprimir.
8. Luego dentro del disco C, en la carpeta xampp, en la carpeta htdocs, se deberá

crear una carpeta nueva donde se instalara el WordPress, en este caso la carpeta
se llamará “devcode”.

DISEÑO PARA LA WEB
9. Ahora ingresar en la carpeta descomprimida, dentro de ella, ingresar a la carpeta

WordPress y se podrá observar todos los archivos que son parte del CMS de
WordPress, los cuales se deberán de seleccionar y copiar.
10. El contenido se copia en la carpeta “devcode” anteriormente creada.
11. Ahora se deberá de ingresar en el navegador, a la ubicación del proyecto en

WordPress http://localhost/devcode/, el cual se re direccionará a
http://localhost/devcode/wp-admin/setup-config.php

DISEÑO PARA LA WEB
12. Ahora se le dará clic en “Vamos a ello” y pedirá llenar los campos con la
información correcta.
13. Como “Nombre de la base de datos” se ingresara “devcode”, como “Nombre de

Usuario” se ingresara “root”, que es el usuario por defecto que posee todos los
privilegios, en “Contraseña” se dejara el campo vacío, dado que no se le ha hecho
ningún cambio en la configuración por defecto de XAMPP y por ende este valor se
deja en blanco, en caso de tener ya una contraseña definida para root, se debería
de colocar esa o en caso de haber definido otro usuario para esta base de datos
se debería de colocar con su respectiva contraseña, en “Servidor de la base de
datos” se dejara el valor en “localhost” y como “Prefijo de tabla” se dejara el valor
en “wp_” que serán los 3 caracteres iniciales de cada tabla que se cree en la base
de datos y luego dar clic en “Enviar”.
14. Una vez hecho esto correctamente, WordPress comenta que todo está bien. Dar
clic en “Ejecutar instalación”.

DISEÑO PARA LA WEB
15. Ingresar el “Título del Sitio”, en este ejemplo se colocara “Devcode”, como
“Nombre de usuario” se colocara “admin”, en “Contraseña” se colocara
“miclavesecreta”, cabe señalar que en realidad se puede colocar el título, nombre
y contraseña de su preferencia, en “Correo electrónico” colocar un correo personal
o corporativo que administre; y en “Privacidad” se deseleccionara esa opción, esto
último sirve para permitir que el sitio en WordPress sea indexado por los
buscadores, al estar trabajando de manera local no afectará en nada. Luego dar
clic en “Instalar WordPress”.
16. Una vez realizado todo lo anterior, aparecerá el mensaje indicando que
WordPress se instaló correctamente. Luego dar clic en “Acceder”.
17. Ahora para acceder al panel del sitio en WordPress, Ingresar a la siguiente
dirección: http://localhost/devcode/wp-login.php, se colocará como “Nombre de
usuario” el texto “admin” y como “Contraseña” el texto “miclavesecreta” o lo que
sea que se haya colocado dentro de la configuración. Luego dar clic en “Acceder”.

DISEÑO PARA LA WEB
18. Después de acceder al panel del sitio en WordPress, Se encontrarán diferentes

opciones y funcionalidades que permitirán explotar al máximo el potencial de
WordPress.
19. Así mismo se podrá visualizar como se ve el sitio en el navegador accediendo a la

siguiente URL http://localhost/devcode/ donde se puede observar una plantilla por
defecto que proporciona WordPress.

DISEÑO PARA LA WEB
3. TRABAJANDO CON SEO, ELEMENTOS Y SERVIDORES REMOTOS.

3.1. Conceptos básicos y definiciones de SEO.
3.2. Conocer el Escritorio y Primeros Pasos con WordPress.
3.3. Manejo de Imágenes, Entradas y PDF en WordPress.
3.4. Estructurar Temas, Widgets, Lecturas y Usuarios.
3.5. Implementar Servidores Remotos para WordPress.
- Computadora con microprocesadores Core 2 Duo o de mayor capacidad.

- Reconocer el trabajo de SEO y el Escritorio de WordPress.

- Realizar las Pruebas e Implementación de herramientas WordPress.
- Reconocer el uso de servidores remotos.
3.1. CONCEPTOS BÁSICOS Y DEFINICIONES DE SEO.
Los primeros buscadores surgieron a principios de los 90 y hasta que Google apareció
en 1996 se crearon muchos, entre ellos Yahoo; entonces fue cuando comenzó el
boom de las páginas web y la gente se dio cuenta que realmente se podía ganar
dinero con ellas. Fue entonces cuando de manera obvia llegaron a la conclusión de
que necesitaban atraer tráfico y ¿cuál era el mejor método de atraer tráfico?,
efectivamente, los motores de búsqueda. En ese preciso momento los dueños de las
webs empezaron a pensar cómo podrían alcanzar las primeras posiciones… ¡el SEO
había nacido!
El SEO se centra en los resultados de búsqueda orgánicos, es decir, lo que no son

pagados:

DISEÑO PARA LA WEB
¿QUÉ ES EL SEO?
El posicionamiento en buscadores u optimización de motores de búsqueda es el
proceso de mejorar la visibilidad de un sitio web en los resultados orgánicos de los
diferentes buscadores. También es frecuente nombrarlo por su título inglés, SEO
(Search Engine Optimization).
El SEO es una de las “disciplinas” que más ha cambiado en los últimos años, solo se
tendría que observar la gran cantidad de actualizaciones que ha habido de Penguin y
Panda, y cómo éstas han dado un vuelta de 180 grados a lo que se entendía por SEO
hasta hace poco. Ahora con el SEO se persigue lo que el propio Matt Cutts califica
como “Search Experience Optimization” o lo que es lo mismo, todo por el usuario.
Aunque existen miles de factores en los que un motor de búsqueda se basa para
posicionar una página u otra se podría decir que hay dos factores básicos: la autoridad
y la relevancia
- La Autoridad es básicamente la popularidad de una web, cuanto más popular sea

una página o una web más valiosa es la información que contiene. Este factor es el
que un motor de búsqueda tiene más en cuenta dado que se basa en la propia
experiencia del usuario, cuanto más se comparta un contenido es que a más
usuarios les ha parecido útil.
- La Relevancia es la relación que tiene una página frente a una búsqueda dada, esto
no es simplemente que una página contenga un montón de veces el termino
buscado (en los comienzos era así) si no que un motor de búsqueda se basa en
cientos de factores on-site para determinar esto.
A su vez el SEO se puede dividir en dos grandes grupos: el SEO on-site y el SEO off-
site.
- On-site: El SEO on-site se preocupa de la relevancia, asegurándose de que la web

está optimizada para que el motor de búsqueda entienda lo principal, que es el
contenido de la misma. Dentro del SEO On-site se incluirá la optimización de
keywords, tiempo de carga, experiencia del usuario, optimización del código y
formato de las URLs.
- Off-site: El SEO off-site es la parte del trabajo SEO que se centra en factores
externos a la página web en la que se trabaja. Los factores más importantes en el

DISEÑO PARA LA WEB
SEO off-site son el número y la calidad de los enlaces, presencia en redes sociales,
menciones en medios locales, autoridad de la marca y rendimiento en los
resultados de búsqueda, es decir, el CTR que tengan nuestros resultados en un
motor de búsqueda. Seguro que se está pensando que todo esto está muy bien y
que es muy interesante pero que se está aquí para saber porque se necesita el
SEO en la web y que beneficios se obtendrá si se integra en la estrategia online.
El SEO se puede diferenciar en si se sigue o no las “recomendaciones” del motor de

búsqueda: Black Hat SEO o White Hat SEO
- Black Hat SEO: Se llama black hat al intento de mejorar el posicionamiento en

buscadores de una página web mediante técnicas poco éticas o que contradicen las
directrices del motor de búsqueda. Algunos ejemplos de Black Hat SEO son el
Cloaking, Spinning, SPAM en foros y comentarios de blogs, o el Keyword Stuffing.
El black hat puede proporcionar beneficios en el corto plazo, pero generalmente es
una estrategia arriesgada, sin continuidad en el largo plazo y que no aporta valor.
- White Hat SEO: Consiste en todas aquellas acciones éticamente correctas y que
cumplen las directrices de los motores de búsqueda para posicionar una página
web y los resultados de búsqueda. Dado que los buscadores dan una mayor
importancia a las páginas que mejor responden a una búsqueda del usuario, el
White Hat comprende las técnicas que buscan hacer más relevante una página
para los buscadores a través de aportar valor para sus usuarios.
¿POR QUÉ ES EL SEO IMPORTANTE?
La razón más importante por la que es necesario el SEO es porque hace más útil tu
página web tanto para los usuarios como para los motores de búsqueda, aunque estos
últimos cada día son más sofisticados, aún no pueden ver una página web como lo
hace un humano. El SEO es necesario para ayudar a los motores de búsqueda a
entender sobre qué trata cada página y si es o no útil para los usuarios.
Ahora se utilizara un ejemplo para ver las cosas más claras:
Se tiene un comercio electrónico dedicado a la venta de libros infantiles, pues bien,

para el término “dibujos para colorear” hay unas 673.000 búsquedas mensuales,
suponiendo que el primer resultado que aparece tras hacer una búsqueda en Google
obtiene el 22% de clics (CTR = 22%), se obtendría unas 148.000 visitas al mes.
Ahora bien ¿cuánto valen esas 148.000 visitas? Pues si para ese término el gasto
medio por clic es de S/. 0.20 se estaría hablando de más de S/. 29.000 al mes. Esto
solo en Perú, si se tiene un negocio orientado a varios países, cada hora se realizan
1.4 billones de búsquedas en el mundo, de esas búsquedas, un 70% de los clics son
en los resultados orgánicos y el 75% de los usuarios no llegan a la segunda página; si
se tiene en cuenta todo esto, se ve que son muchos clics al mes para el primer
resultado.

DISEÑO PARA LA WEB
El SEO es la mejor manera de que los usuarios lo encuentren a través de búsquedas

en las que la página web es relevante, estos usuarios buscan lo que se les ofreces y la
mejor manera de llegar a ellos es mediante un motor de búsqueda.
¿CÓMO FUNCIONAN LOS MOTORES DE BÚSQUEDA?
El funcionamiento de un motor de búsqueda se puede resumir en dos pasos: rastreo e

indexación.
Rastreo.
Un motor de búsqueda recorre la web rastreando con lo que se llaman bots, estos bots
recorren todas las páginas a través de los enlaces (de ahí la importancia de una buena
estructura de enlaces) al igual que haría cualquier usuario al navegar por el contenido
de la Web, pasan de un enlace a otro y recopilan datos sobre esas páginas web que
proporcionan a sus servidores. El proceso de rastreo empieza con una lista de
direcciones web de rastreos anteriores y de sitemaps proporcionada por otras páginas
web. Una vez acceden a estas web, los bots buscan enlaces a otras páginas para
visitarlas. Los bots se sienten especialmente atraídos por los sitios nuevos y a los
cambios en las web existentes.
Son los propios bots los que deciden qué páginas visitar, con qué frecuencia y cuánto
tiempo van a rastrear esa web, por eso es importante tener un tiempo de carga óptimo
y un contenido actualizado.
Es muy común que en una página web se necesita restringir el rastreo de algunas
páginas o de cierto contenido para evitar que estas aparezcan en los resultados de
búsqueda. Para esto se le puede decir a los bots de los motores de búsqueda que no
rastreen ciertas páginas a través del archivo “robots.txt”.
Indexación.
Una vez que un bot ha rastreado una página web y ha recopilado la información
necesaria, estás páginas se incluyen en un índice donde se ordenan según su
contenido, su autoridad y su relevancia; de este modo cuando se haga una consulta al
motor de búsqueda le resultará mucho más fácil mostrar los resultados que están más
relacionados con la consulta.
Al principio los motores de búsqueda se basaban en el número de veces que se

repetía una palabra en una página, al hacer una búsqueda rastreaban en su índice
esos términos para encontrar qué páginas los tenían en sus textos, posicionando
mejor la que más veces lo tenía repetido. Actualmente, los motores de búsqueda son
más sofisticados, y basan sus índices en cientos de aspectos diferentes como la fecha
de publicación, si contienen imágenes, vídeos o animaciones, micro formatos, etc.
Ahora dan más prioridad a la calidad del contenido.
Una vez que las páginas son rastreadas e indexadas, llega el momento en el que
actúa en los algoritmos son los procesos informáticos que deciden qué páginas
aparecen antes o después en los resultados de búsqueda. Una vez realizada la
búsqueda, en cuestión de milisegundos, los algoritmos son capaces de buscar en los

DISEÑO PARA LA WEB
índices y saber cuáles son las páginas más relevantes teniendo en cuenta los cientos
de factores de posicionamiento.
3.2. CONOCER EL ESCRITORIO Y PRIMEROS PASOS CON WORDPRESS.
El Escritorio es el nombre que recibe el panel de administración de la web. Es decir,

desde aquí se escribirá los nuevos contenidos y se controlara todos los aspectos de
configuración: diseño, comentarios, plugins, etc. Todo lo que al desarrollador web se le
pueda ocurrir.
ACCEDER AL ESCRITORIO.
Como primer paso en WordPress, se encuentra la instalación y el acceso al web o
blog. Aunque el asistente de instalación llevaba directamente a la pantalla de ingreso,
es de esperar que también se quiera acceder más adelante.
Simplemente, basta con añadir la ruta /wp-admin a la dirección del blog. A estas
alturas se estará trabajando en local, así que será una dirección del estilo
http://localhost/wordpress/wp-admin. Cuando se mude a un entorno de producción,
adquirirá este otro formato: www.miblog.es/wp-admin.
Cuando se ingrese en dicha página, se tendrá que introducir las credenciales de

administrador y presionar el botón Acceder.
LA PANTALLA DE BIENVENIDA.
La primera vez que se accede al Escritorio, se verá un panel especial de bienvenida
listando algunas de las acciones más comunes de la administración del sitio. Se puede
ir probando todas las tareas que propone. Si no, se puede dejar ahí para otra ocasión
o cerrarlo para siempre con el enlace Descartar.
EL MENÚ LATERAL.

DISEÑO PARA LA WEB
El Escritorio cuenta con un menú lateral compuesto de varias entradas desplegables.

Cada una de ellas dará lugar a un submenú flotante con más opciones. Como se
puede apreciar, está separado en tres bloques temáticos más o menos definidos: el
inicio, la gestión de contenidos, y, por último, la configuración del sitio web. Cabe
mencionar que si en algún momento se necesita más espacio horizontal en el
Escritorio, se puede contraer este menú dando clic en la última entrada Cerrar menú.
LOS MÓDULOS DE LA PARTE SUPERIOR.

Aunque la mayoría de tareas se lanzarán desde el menú lateral, en ocasiones se
podrá ahorrar un par de clics con los menús de la parte superior. La parte de la
izquierda incluye enlaces a recursos oficiales de Wordpress, a las diferentes partes del
sitio, a la moderación de comentarios y, por último, accesos directos a la creación de
nuevos contenidos.
En el área de la derecha se encontrará, en primer lugar, con el panel de gestión del

perfil. Desde aquí se podrá editar los datos y, lo que es más importante, salir de la
cuenta. Cuando se termine de usar el Escritorio, se debe recordar siempre cerrar la
sesión activa o alguien podría realizar cambios no solicitados en el blog usando el
perfil de administrador.
Debajo del panel de gestión también se encuentra el personalizador de vistas y, a su

lado, un panel de ayuda contextual muy útil, especialmente en los primeros días de
uso de WordPress.
PRIMEROS PASOS CON WORDPRESS.

Toma de contacto con WordPress. Una vez instalado WordPress, de forma exitosa, es
hora de acceder al panel de administración, para ello se coloca wp-admin tras la url,
quedado así http://localhost/wp/wp-admin para ver la pantalla de acceso a WordPress:

DISEÑO PARA LA WEB
Se deberá loguear con el nombre de usuario y la contraseña que se eligió durante la

instalación, para acceder al escritorio de WordPress. Allí se encuentra la primera
instancia que es una pantalla de bienvenida, donde se ofrece acceso a la
documentación de primeros pasos de WordPress (inglés), y enlaces con los
principales puntos a configurar de WordPress. Se deberá, cerrar este mensaje de
bienvenida con el botón “Omitir”, y continuar con las partes del escritorio:
En la zona de administración de WordPress, se encuentra el logotipo de WordPress

que lleva a los distintos enlaces de documentación: foro de soporte y sugerencias. A
continuación, en la parte superior se tiene el Título del sitio Web que lleva a la parte
pública. En el lado izquierdo se tiene el Menú Principal desde donde se accede a
todas las opciones de edición y configuración de WordPress.
En el centro, ocupando la mayor parte de la pantalla, se encuentra el Escritorio, donde

WordPress hace gala de su flexibilidad, al ser muy configurable, y facilidad de uso, ya
que para poner el escritorio a gusto sólo se debe de arrastrar las distintas ventanas, y
soltarlas en el lugar que más se adecuen.
DIFERENCIA ENTRE ENTRADA Y PÁGINA:

Una de las primeras cosas que se debe saber sobre WordPress es la diferencia entre
una Entrada o Post y una Página, que aunque no tiene mucha dificultad puede llevar a
confusión. Se debe de entender que aunque WordPress es un CMS muy potente y

DISEÑO PARA LA WEB
extendido, originalmente fue concebido para generar Blogs, y conserva esta cualidad,
que proporciona ventajas adicionales sobre otros gestores más complejos como
Joomla! o Drupal.
La Entrada o Post, es el contenido dinámico de la página, característica propia del

Blog. Puede ser actualización o noticia, que permite ir actualizando la Web de forma
cronológica, aunque también se puede organizar las entradas por categorías, tags
(etiquetas) o autores.
La Página, es el contenido estático de la Web, donde se muestra la información

referente a los servicios que se prestan u otro tipo de información, útil para los
visitantes. Las páginas se organizan mediante los Ítems de menú. En su instalación
WordPress, integra una post de ejemplo 'Hola Mundo' y una 'página de ejemplo' en su
menú principal.
3.3. MANEJO DE IMÁGENES, ENTRADAS Y PDF EN WORDPRESS.
Para añadir imágenes en WordPress, se deberá dirigir al editor, y luego colocar una
imagen dentro del Post que se Ha creado anteriormente. En primer lugar hacer clic en
el botón Subir/Insertar, y se abrira la ventana “Añadir objeto”:
En un primer vistazo se puede ver que añadir una imagen es tan fácil como arrastrar el
archivo a la ventana de 'Añadir objeto' o seleccionarla del ordenador con el botón

DISEÑO PARA LA WEB
“Elegir archivos”. También se tiene otras dos opciones desde las pestañas superiores,
que son añadir “Desde una URL” externa, usando siempre imágenes con licencia y
desde un servidor propio para no perder el enlace, y “Librería Multimedia”, que son las
imágenes que ya se han subido previamente para otros usos. Posteriormente se
tendrá la pestaña “Galería” con parecida función a la “Librería Multimedia”. También
tiene la capacidad de alertar de que el tamaño máximo de las imágenes que se
quieren subir es de 2Mb, lo que ya es una imagen muy grande para Web. Tras
seleccionar el archivo de imagen correspondiente, se abrirá una nueva ventana de
configuración:
Desde esta ventana se puede editar todos los parámetros de la imagen, como la
alineación o el tamaño de la misma. También se puede definir los parámetros de
accesibilidad con el Texto alternativo o la Descripción, muy útiles para los lectores de
pantalla (para invidentes) o los motores de búsqueda. Haciendo clic en “Insertar en la
entrada” publicara la imagen en el post.
LA ENTRADA
En el Escritorio se cuenta con una ventana de 'Publicación Rápida', que se puede
utilizar para añadir nuevas entradas, aunque no es recomendable ya que se
prescinden de ciertas herramientas de Edición, con las que se cuenta en el editor de
WordPress. Por lo tanto, se dejara el mouse sobre el ítem “Entradas” del Menú
Principal, Se desplegaran varias opciones, donde se elegirá “Añadir nueva”. En la
nueva ventana se encuentra el Editor “wysiwyg” de WordPress (What You See Is What
You Get en inglés, "lo que ves es lo que obtienes"), donde se comenzara a introducir

DISEÑO PARA LA WEB
la primera entrada. En primer lugar se introducirá el título de la entrada, y a

continuación se puede introducir el texto del Post. Las partes del editor serían las
siguientes:
1. Barra de Título.
2. Cuerpo del Post, donde introducimos el texto, imágenes o contenido multimedia.
3. Barra de opciones de edición.
4. Barra avanzada (se despliega con el ultimo botón de la barra básica).
5. Conmutador de editor “wysiwyg” y editor HTML.
6. Subir/Insertar.
La opción de editar el texto HTML es muy interesante en WordPress, aunque no es

imprescindible para trabajar con este CMS.
CONFIGURAR UNA ENTRADA.

Para mejorar la navegación del usuario y la organización interna de las entradas,
WordPress, permite configurar las entradas por categorías y etiquetas, lo cual supone
un acceso rápido e intuitivo a la información de la web. Para ello, se debe de editar la
entrada y observar en los paneles de la derecha, en la configuración estándar de
WordPress, en la cual se encuentran los cuatro paneles:
- Formato: Define cómo se mostrará la entrada.

- Categorías: Qué organiza la entrada en una o más categorías.
- Etiquetas: Permite insertar las palabras clave del post.
- Imagen destacada: Permite resaltar una de las imágenes del post.

DISEÑO PARA LA WEB
Observar los paneles de Categorías y Etiquetas. En el panel de Categorías se puede

crear la categoría Cursos y asignar el Post. En el Panel Etiquetas, se puede
seleccionar las palabras clave del Post, se debe ser coherentes con el nombre que se
ponga a las etiquetas, de modo que si ahora se utiliza la etiqueta “diseño Web”, no se
debe de usar “diseño de páginas” en otro Post que pueda recibir esta etiqueta. En la
parte práctica se puede ver que se ha creado la categoría “Cursos” y que el Post tiene
las etiquetas que se le ha asignado:
LOS VÍNCULOS O HIPERENLACES.

Desde el primer día una de las mayores ventajas de Internet ha sido El Vínculo o
Hiperenlace, que ha llevado de un sitio a otro con un sólo clic, y desde luego, será una
de la opciones que más se va a utilizar en la Web con WordPress. Realizar enlaces
desde el Editor de WordPress es un proceso muy fácil. En primer lugar se editara de
nuevo la entrada, e introducir el texto que hará de enlace, para seleccionarlo y dar clic
en el icono de Hiperenlaces:
A continuación se abre la ventana de Insertar/Editar enlace:

DISEÑO PARA LA WEB
En esta ventana se definirá la URL de destino, el título del enlace que aparece al pasar
el mouse sobre el vínculo, y la opción de abrir el enlace en una nueva ventana o
pestaña. También se tiene la opción de enlazar con contenido existente en la Web.
Tras completar los parámetros, se deberá hacer clic en “añadir enlace” y actualizar el
post para ver los resultados.
TRABAJAR CON PDF DESDE WORDPRESS.

En el caso de trabajar con documentos en PDF, se tienen dos opciones, que es o
enlazar un PDF del mismo modo que se creo un enlace a una página externa o
enlazándolo con cualquier documento en PDF de Internet, aunque ésta no es una
práctica muy adecuada cuando no se es propietario de ese documento y no se puede
garantizar que siempre estará en el lugar donde se le ha enlazado. La opción más
recomendable es añadir el archivo PDF del mismo modo que se ha añadido las
imágenes en los anteriores enunciados:
PÁGINAS.
Después de ver las entradas que serán el contenido dinámico de la Web, se verán los
contenidos estáticos o permanentes como el “quienes somos” o los distintos servicios
que se ofrecen en una Web corporativa. A las distintas páginas se accede desde el
menú de WordPress, y a continuación se hará clic en el Ítem “Paginas” y
seleccionamos “Añadir nueva”:
Se puede observar un editor idéntico al que se encontró con las entradas, aunque los
paneles laterales tienen opciones muy distintas:

DISEÑO PARA LA WEB
En el panel “Publicar”, se encuentra las opciones de “Estado” para situar la página

como 'borrador', 'publicada' o 'pendiente de revisión'. En “Visibilidad” se establecerá
quien puede ver la página. Con cada nueva página se añade un nuevo Ítem en el
menú principal de la Web. En el panel “Atributos de la página” se tiene la opción de
situar este Ítem en la parte superior del menú o anidarlo dentro de otro Ítem existente,
para que sólo se muestre al pasar el mouse sobre el Ítem superior. También se puede
seleccionar una estructura distinta para la página de 'Plantilla' y establecer un 'Orden'
entre los Ítems del menú. Como en las entradas, se tiene la posibilidad de seleccionar
una “Imagen destacada”.
Como se puede ver en la imagen anterior, se ha creado una nueva página con un
Ítem de menú, y otro anidado dentro de él. Por defecto WordPress incluye la opción de
“Comentarios” para todas las páginas, dentro de otros parámetros que se pueden
configurar. En el panel de “Administración”, seleccionar “Páginas” y con el mouse
situado sobre cualquier página, seleccionar “Edición rápida”.
3.4. ESTRUCTURAR TEMAS, WIGETS, LECTURAS Y USUARIOS.
Los temas o las plantillas de WordPress definen la apariencia que tendrá la Web para
los visitantes. La instalación y configuración de los temas es, una vez más, una tarea
fácil, aunque se pueda encontrar algún conflicto que se tendría que solventar. Se
deberá Seleccionar Apariencia > Temas, y se mostrara una ventana con las plantillas
preinstaladas en WordPress.

DISEÑO PARA LA WEB
Dar clic en “Opciones del Tema” del tema activo se podrá observar los parámetros que
se pueden configurar; éstas dependerán de cada plantilla. En WordPress se
encuentran un gran número de Temas que se pueden utilizar de forma gratuita y que
se encuentran fácilmente haciendo una búsqueda en Google. Existe la opción de
comprar plantillas profesionales, aunque esto dependerá del presupuesto y
expectativas de cada uno. La propia Web de WordPress, ofrece una gran cantidad de
platillas gratuitas en http://wordpress.org/extend/themes/
También, se puede buscar e instalar temas directamente desde el Panel de

Administración de WordPress, haciendo clic en la pestaña superior “Instalar Temas”,
donde se encuentran, varias opciones como 'Buscar' en el directorio de WordPress,
'Subir' desde el ordenador un tema que se tenga descargado, o ver los temas
'Destacados' o 'Recientes' del directorio de WordPress:

DISEÑO PARA LA WEB
Instalar un tema es tan fácil como hacer clic en “Instalar”, aunque en una gran mayoría
de ocasiones la configuración de seguridad del servidor lanzará un error y no permitirá
finalizar la instalación. Pero se tienen más opciones, como descargar el Tema en
formato ZIP y descomprimir el archivo dentro de las carpetas de sistema de
WordPress, concretamente en /wp-content/themes. Esta opción también está
disponible en un servidor remoto con la ayuda de un FTP. Para mayor comodidad,
existe la opción 'Subir' en la instalación de Temas:
Después, se buscara el nuevo tema instalado y tan sólo se deberá de dar clic en
'Activar':
Se tendrá una nueva apariencia en la Web, en relación al Tema seleccionado sin

ningún tipo de cambio en el contenido que se tenía creado anteriormente.
LOS WIDGETS.
Un Widgets es una aplicación adicional muy útil que da acceso a funciones de uso
habitual. Por ejemplo en el panel de la derecha del WordPress, se encontraran varios
Widgets como el de búsqueda, entradas recientes etc. Los Widgets, pueden cambiar
en función de la plantilla que se esté utilizando. El trabajo con Widgets, es fácil e
intuitivo, ya que sólo hay que arrastrarlos.
Se puede acceder desde el menú de la administración a Apariencia > Widgets:

DISEÑO PARA LA WEB
En el panel de la derecha se encuentran lo Widgets que están activos en la platilla, y

que también se encuentran en la barra derecha del WordPress. Simplemente se tienen
que arrastrar para cambiar su orden, o arrastrar fuera de la barra para eliminar la
publicación. En el centro de la pantalla se encuentran los Widgets disponibles, que
igualmente, sólo se tienen que arrastrar hasta su lugar correspondiente en la “Barra
lateral” para publicarlos. Finalmente se encuentra, una ventana donde se pueden
arrastrar los Widgets para ubicarlos en inactivos o para configurarlos correctamente
antes de su publicación. Haciendo clic en la pequeña flecha de la derecha de cada
Widget, se puede acceder a la configuración específica de cada uno:
LECTURA.
Se establecerá una página de Bienvenida o de Inicio a la web, y se publicara las
entradas en una nueva pestaña de menú que se puede llamar Blog o Noticias. En
primer lugar se creara dos nuevas páginas, una que se llamara Inicio, y donde se
introducirá un texto de bienvenida:

DISEÑO PARA LA WEB
A continuación se creará una nueva página que en este ejemplo se llamará Blog,
donde no se introducirá ningún texto en el editor. Una vez que se tienen creadas las
dos páginas, se debe configurar los ajustes de lectura de la página, entrando en
Ajustes > Lectura. En la primera opción se encuentran “La página inicial mostrará”, y
se puede definir cuál será la página que se mostrará al entrar en la web, y se
seleccionará la página “Inicio”.
Luego se tendrá que definir donde se mostrarán las entradas relativas a noticias o
actualizaciones dentro de la web. Además se podrá editar más opciones como el
número de post que se publicarán por página, si el número total de entradas supera al
que se estableció, WordPress creará un paginado de forma automática.
A continuación se realizará el orden el que se muestran las páginas en el menú para

mejorar la apariencia y ser más coherente con los estándares de la Web, esto se
ingresará en el Ítem “Páginas”:

DISEÑO PARA LA WEB
A continuación, al pasar el mouse sobre una página se tendrá la opción de “Edición

rápida” donde se podrá seleccionar el orden en que se mostrarán las páginas. En este
ejemplo, se ha seleccionado el “1” para Inicio, el número “2” para la página “Curso de
WP” y el número “3” para el Blog, y se ha eliminado la página de ejemplo que trae
WordPress predeterminada, quedando en la web de esta manera:
LOS USUARIOS.
Desde WordPress se pueden crear y administrar varios usuarios asignándole distintos
perfiles o roles como Suscriptor, Administrador, Editor, Autor o Colaborador,
dependiendo del perfil establecido el nuevo usuario tendrá permisos para publicar
automáticamente o necesitara de la supervisión de otro usuario. Para crear un
nuevo usuario, se deberá de acceder a Usuarios en el menú principal y seleccionar
“Añadir nuevo”:
A continuación se completarán los campos que solicita:

DISEÑO PARA LA WEB
Nombre de Usuario, Correo electrónico y Contraseña son datos obligatorios, más

abajo se puede seleccionar si se requiere enviar un correo electrónico con la
contraseña al nuevo usuario. Desde el desplegable perfil, se puede determinar el rol
de cada usuario, que se detalla a continuación:
- Suscriptor: son usuarios que pueden acceder a contenidos privados o solo para
suscriptores. Es un perfil ideal para webs donde se permita solo el acceso a los
contenidos a usuarios registrados, capacidad que se habilita también en el panel de
administración.
- Colaborador: es cualquier usuario que pueda escribir nuevos artículos y noticias, y
modificarlos. Cualquier contenido nuevo no se publica directamente sino que
requiere aprobación de un administrador. Ideal para blogs con muchos
colaboradores y que requieran de un nivel mínimo de calidad en las nuevas
entradas.
- Autor: es otro perfil de colaborador pero este puede publicar directamente sus
escritos.
- Editor: es casi un administrador que, salvo las funciones propias del administrador
(instalaciones, modificación de plantillas, plugins, etc.) puede gestionar artículos y
noticias de cualquier otro usuario. Sería el Redactor Jefe si se utiliza una analogía
periodística.
- Administrador: tiene acceso a todo en el blog y es quien recibe en su correo las
notificaciones de los eventos que se sucedan (nuevos comentarios, contacto,
actualizaciones, etc.). Es el encargado de las actualizaciones, instalación de
plugins, cambio de plantillas y configuración.
LOS USUARIOS CONFIGURACIÓN.

En WordPress todas las entradas y páginas tiene la opción de ser comentadas por los
visitantes a la web, estos comentarios pueden ser administrados por el administrador,
realizando así un filtro de los contenidos que se consideren convenientes. Por defecto
WordPress, muestra los comentarios en su Escritorio al acceder a la administración:

DISEÑO PARA LA WEB
Los comentario de usuarios no registrados se muestran en color amarillo, y lo creados

por los usuarios del sistema se muestran con normalidad. También se puede acceder
a Ítem de comentarios del Menú de WordPress.
Al pasar el mouse sobre el comentario, se puede administrar el mismo, con varias

opciones como: Aprobar, responder, Editar, Spam o Enviar a la Papelera. En el caso
de seleccionar Spam el sistema bloqueará permanentemente al usuario que ha dejado
este comentario.
Cuando se requiera que los visitantes puedan dejar comentario en las páginas o
entradas, se deberá de acceder a la edición rápida, por ejemplo, una entrada y se
desactivara la opción “Permitir comentarios”, que normalmente esta activada por
defecto en todas las publicaciones:

DISEÑO PARA LA WEB
3.5. IMPLEMENTAR SERVIDORES REMOTOS PARA WOTDPRESS.
WordPress es especialmente conocido por la facilidad de instalación. Bajo la mayoría

de las circunstancias, instalar WordPress es un proceso muy simple y lleva menos de
cinco minutos completarlo. El proceso de instalación en el Servidor Remoto, será
similar al que se vio para el servidor local salvo en un par de puntos, que se detallan a
continuación:
Para instalar WordPress es necesario disponer de un servidor LAMP (Linux Apache

con Mysqql y Php). Esta cuestión no complica en el más mínimo la instalación, ya que
el 99% de los servidores Web usan esta tecnología.
En primer lugar, se tendrá que dirigir a uno de los muchísimos proveedores de

dominios y hosting. Ahora se deberá escoger el nombre de dominio y usar la extensión
más adecuada para el sitio como “.pe” para páginas de Perú, el “.com” para empresas,
“.org” para las organizaciones sin ánimo de lucro o el “.net” para los servicios
relacionados con Internet y las nuevas tecnologías, entre otras muchas opciones. A la
hora de elegir el Hosting, Se deberá asegurar que cuenta con un espacio mínimo de
1Gb con lo que se tendrá un espacio de sobra para casi cualquier proyecto. También
se podrá observar los servicios adicionales que ofrecen como las cuentas de correo o
el número de bases de datos de que se dispone, etc.
Tras contratar el servicio, llegará un correo electrónico con toda la información que se
necesita para acceder al panel de control o “cpanel” desde donde se creara y
administrara las cuentas de correo electrónico del dominio, como las bases de datos
desde “PhpMyAdmin”, para crear la base de datos necesaria para la Web. En el correo
electrónico del proveedor o en el cpanel se tendrá acceso a la cuenta de FTP, del
dominio, y se tendrán que proporcionar un nombre de servidor, un usuario y una
contraseña.
En este punto se necesita de una nueva herramienta para realizar las subida de los
archivos de WordPress al servidor vía FTP, para ello se puede utilizar Filezilla por ser
un producto de Software Libre que se puede descargar libremente para cualquier
sistema operativo desde http://filezilla- project.org/. En los sistemas operativo Linux,
tan sólo se necesita abrir un terminal e introducir sudo apt-get install filezilla para
descargar e instalar Filezilla de forma automática.

DISEÑO PARA LA WEB
Desde Filezilla, se puede introducir los datos que se proporcionaron desde el

proveedor para acceder al disco donde se alojara la Web. En Filezilla se tiene que
tener en cuenta los siguientes espacios:
1. Nombre del Servidor que será como: ftp.nombredominio.es

2. Nombre de usuario de FTP.
3. Contraseña.
4. Se encuentran los archivos del disco duro del ordenador.
5. Se observan los archivos del disco del Servidor.
Para subir los archivos es suficiente con seleccionarlos y arrastrarlos hasta el disco del
servidor. A continuación, se abrirá un navegador e introducirá la URL de la página para
instalar WordPress del mismo modo en que se instaló de forma Local, con la
precaución de tener creada previamente la base de datos en “Mysql”.
EXPORTAR E IMPORTAR.
En este momento se encontraran con un WordPress instalado y con todo su contenido
en Local y otro WordPress totalmente limpio en Remoto, y es el momento de pasar
todo lo que se ha hecho en Local a la que será la Web definitiva. En primer lugar, se
accederá a la administración del sitio en Local, y en el menú dirigirse a Herramientas >
Exportar, y seleccionar “Todo el contenido”, dar clic en el botón para descargar el
Archivo de Importación.
Se obtendrá un fichero “.xml” que se descargara en el ordenador:
A continuación se accederá a la administración del sitio remoto y en el menú

seleccionar Herramientas > Importar.

DISEÑO PARA LA WEB
Desde esta pantalla se indica la posibilidad de instalar distintos plugins para la

importación de contenidos de distintas plataformas como Blogger o el mismo
WordPress, que se deberá instalar para continuar con el proceso de importación.
Se puede instalar el Plugin directamente si el servidor lo permite, o ir a la Web del

Plugin y descargarlo. Una vez descomprimido, se colocara en la carpeta wp-
content/plugins con ayuda del programa FTP para instalarlo.
Una vez instalado de forma automática o subida por FTP, se deberá activar en la
administración de la Web para continuar con el proceso de importación.

DISEÑO PARA LA WEB
Con el Plugin Wordpress-Importer instalado y activo, se deberá volver al menú

Herramientas > Importar donde se seleccionara el fichero “.xml” que se exporto del
WordPress en Local.
Durante este proceso se podría realizar alguna pregunta, como el nombre del usuario
administrador, y al finalizar brindara un aviso totalmente normal sobre los errores de
Importación, ya que faltarán todos los archivos PDF o imágenes que se utilizan en
local y que ahora se tendrán que subir por FTP. Además se tendrá que revisar las
rutas de los enlaces a los archivos internos que tendrán la dirección del servidor local.
También se encuentra todo el contenido de ejemplo de WordPress de la instalación

básica junto al contenido que se ha importado, por lo que solo queda una labor de
limpieza hasta dejar la Web a punto.
LOS PLUGINS.
Los plugins son aplicaciones que modifican al propio gestor y que en algunos casos
parezcan widgets. Se puede decir que son partes de programas independientes con
los cuales se pueden completar y configurar la plataforma a la medida, de esta forma
no habrá dos usuarios con la misma configuración. La instalación de los plugins es
similar al de un tema.

DISEÑO PARA LA WEB
4. CREACIÓN DE PÁGINAS, CONFIGURACIÓN DE MENÚS Y SLIDER.
4.1. Reconocer la importancia de las páginas estáticas.

4.2. Trabajar con Menús y sus características.
4.3. Insertar Slider en las páginas.

- Servidor XAMP y WordPress
- Manejar páginas estáticas.

- Crear y asignar categorías y etiquetas en los Menús de WordPress.
- Desarrollar Slider e implantarlos en las páginas de WordPress.
4.1. RECONOCER LA IMPORTANCIA DE LAS PÁGINAS ESTÁTICAS.
Páginas Web Estáticas:

Las páginas de WordPress son como las entradas normales, sólo que han sido
diseñadas para estar fijas en un sitio de la web. Durante la instalación se creó una
página de ejemplo que se puede visitar desde la portada del blog.
Ubicarse en el Escritorio y entrar en la sección Páginas. Se puede editar la página de

ejemplo pulsando sobre la única entrada que se encuentra en la lista o, si no,
eliminarla y empezar de cero dando clic en el botón Añadir nueva.

DISEÑO PARA LA WEB
Redacta los contenidos de la forma habitual y pulsar en Publicar o Actualizar, según

corresponda.
REORDENAR LAS PÁGINAS.

Si se necesita crear más de una página, se terminara con más de un enlace en el
menú de navegación. Por defecto, estarán ordenados alfabéticamente, pero se puede
modificar desde el menú de edición de cada una de ellas. De la misma forma, se
puede anidar una bajo otra para establecer subniveles. Simplemente, se debe
especificar los parámetros adecuados en el panel Atributos, a la derecha del editor
visual.
4.2. TRABAJAR CON MENÚS Y SUS CARACTERÍSTICAS.
WordPress permite una total flexibilidad a la hora de gestionar la navegación en el

blog. Para ello, dirigirse a la sección Apariencia> Menús.
AÑADIR NUEVOS ENLACES AL MENÚ

La interfaz del editor está dividida en dos partes. A la izquierda, se disponen una serie
de paneles desplegables desde los que se puede añadir nuevas entradas. Basta con
seleccionar el tipo de enlace (Página, Enlace personalizado o Categoría), marcar la

DISEÑO PARA LA WEB
casilla correspondiente (o escribir la dirección del enlace) y presionar en el botón

Añadir al menú.
CAMBIAR EL ORDEN DEL MENÚ.

Se puede seleccionar y añadir varias a la vez. Desgraciadamente, la jerarquía de
categorías y subcategorías no se conserva en la adición múltiple, pero se puede
restaurar fácilmente arrastrando ligeramente cada sub entrada hacia la derecha.
El método de arrastrar y soltar también servirá para cambiar el orden de las entradas
del menú. Simplemente, se desplazara las entradas hasta la posición deseada. La
única precaución que se debe tener es no dejarlas como sub entrada de la que esté
por encima.
CREAR EL ÁRBOL DE CATEGORÍAS EN WORDPRESS.
Cuando se haya terminado con el árbol, hay que insertarlo en WordPress. Para ello,
se debe de acceder al Escritorio y dar clic en la sección Entradas> Categorías del
menú lateral. En la parte izquierda del panel principal se presentará un formulario con
todos los campos necesarios para crear una nueva categoría.

DISEÑO PARA LA WEB
El primero es sencillo: simplemente se escribe el nombre que se le quiere dar. El

segundo quizá suene algo más extraño. El slug es, normalmente, una versión reducida
del nombre completo de la categoría, utilizado para generar las URLs amigables. Por
ejemplo, si la categoría se llama “Frutos sin cáscara”, el slug sería algo como “frutos-
sin-cascara”. Como se ve, nada de tildes, espacios ni mayúsculas.
AÑADIR LOS DETALLES DE LA CATEGORÍA.
En el desplegable de abajo se puede elegir, si procede, bajo qué categoría existente

se quiere anidar la hipotética subcategoría. Se puede repetir el proceso cuantas veces
se quiera, generando así varios niveles de jerarquía. Eso sí, no suele ser necesario
crear más de tres, por lo que si se ve que necesita seis niveles, quizá se deba
replantear el diseño del árbol de categorías.
Por último, el último campo permite insertar una descripción. Escribir de forma que sea
relevante y añada información al título, pues será utilizada en las meta descripciones e
impactará de forma positiva en la puntuación SEO. Cuando se termine, dar clic en el
botón Añadir nueva categoría y repetir el proceso hasta completar todo el árbol.
REVISAR EL LISTADO DE CATEGORÍAS.
En la parte de la derecha del Panel de WordPress se puede ver el listado completo tal
y como se ha ido creando. Si se pasa el cursor por encima de una de las entradas,
aparecerán algunos enlaces para que se edite o elimine la categoría en cuestión.
También hay un enlace para ver qué contenidos están agrupados bajo ella y una serie

DISEÑO PARA LA WEB
de casillas para aplicar las acciones en lote con ayuda del desplegable de la parte
superior.
REVISAR LAS ETIQUETAS.
Normalmente, se crearan las etiquetas in situ, al redactar los contenidos. No obstante,

conviene saber desde qué parte de la interfaz se puede gestionar el listado completo
para revisar que no haya entradas demasiado parecidas (“fulbito” y “futbol”, por
ejemplo), ya que eso tendría un impacto negativo en la usabilidad del blog (y el
posicionamiento).
Por tanto, se puede administrar a su antojo desde la sección Entradas > Etiquetas. Las
acciones disponibles son las mismas que en el caso de las categorías: editar sus
propiedades (nombre, slug y descripción), ver los contenidos vinculados o eliminarla.
Eso sí, se debe de tener cuidado al modificar el slug o eliminarla por completo, ya que
si existen enlaces que usen un enlace que contenga dicho slug, dejará de funcionar.
CATEGORÍAS Y ETIQUETAS.
WordPress permite jerarquizar los contenidos en categorías que, a su vez, pueden
contener varios niveles de subcategorías. Adicionalmente, es posible etiquetar los
contenidos con palabras clave para identificar temas comunes que no tienen por qué ir
en la misma categoría. Piensa, luego escribe.
Un blog es una forma muy sencilla y directa de comunicar ideas y pensamientos, pero
si no se le dota de cierta coherencia y estructura, quizá acabe convertido en un caos
sin sentido. A lo mejor es justo lo que se busca. En ese caso, adelante, a lanzarse a
escribir. En caso de que se quiera dar cierta coherencia al blog en WordPress, se tiene
que tener muy en cuenta las categorías y etiquetas, pues ellas son las estructurarán
en contenido. No obstante, algunos usuarios pueden acabar sumidos en ese
sinsentido sin darse cuenta, simplemente por no haber creado un buen sistema de
categorías. Por tanto, antes de ponerse a escribir todo eso que se o se quiere contar,

DISEÑO PARA LA WEB
es mejor detenerse un momento y pensar: ¿De qué voy a hablar? Es tan sencillo como
coger papel y lápiz y dibujar un pequeño árbol de categorías.
¿QUÉ SON LOS WIDGETS Y CÓMO SE INSTALAN?
INSTALAR NUEVOS WIDGETS.

Por supuesto, la oferta de widgets está a la par con la de plugins, e instalarlos es igual
de fácil. De hecho, se instalan desde el mismo menú (Plugins> Añadir nuevo), porque,
al fin y al cabo, los widgets son sólo un tipo especial de plugins. Busca el widget
deseado y se procede de la misma forma que se ha trabajado con los plugins. Tras
activarlo, aparecerá junto al resto en el gestor de widgets.
EL EDITOR DE WIDGETS.
A diferencia de los plugins, los widgets no tienen su apartado individual en el Escritorio
de WordPress. Como se utilizan para modelar el aspecto de la web, están recogidos
en el menú Apariencia> Widgets. Allí se podrá ver un panel central con todos los
widgets disponibles y, a la derecha, las áreas de inserción que hay implementadas en
el tema seleccionado.

DISEÑO PARA LA WEB
GESTIONAR LOS WIDGETS.

La interfaz es tremendamente intuitiva. Para insertar, eliminar o reordenar un widget
sólo se tiene que arrastrar a la posición deseada. Esto es, para añadir uno a una de
las áreas de inserción, basta con seleccionarlo en el panel central y llevarlo hasta el
área pertinente.
Para eliminarlo, lo único que se tiene que hacer es “sacarlo fuera” de su área de
inserción. El reordenamiento funciona exactamente igual: ponerlo donde se quiera y
listo.
CONFIGURA UN WIDGET.
Los parámetros de cada widget activo aparecen cuando se presiona sobre su título.
Cada widget ofrece su propio formulario de configuración, así que se tendrá que
especificar los valores que se pidan.
CREAR FORMULARIOS DE CONTACTO - CONTACT FORM 7.
GUÍA CONTACT FORM 7.

1. Instalar el plugin Contact Form 7.
2. Creando el formulario.
3. Configurar el destinatario del mensaje.
4. Usando el auto respondedor.
5. Instalar plugin WP Mail SMTP.
INSTALAR EL PLUGIN CONTACT FORM 7.

El primer paso es instalar el plugin, esto es muy sencillo, se instala como cualquier
otro plugin, ir a wp-admin -> plugins -> Añadir nuevo y en el buscador escribir “contact
form 7” y el primer resultado será el que se instalará.

DISEÑO PARA LA WEB
Una vez instalado y activado, se pasara con la segunda parte de la guía contact form
7.
CREANDO EL FORMULARIO.
Al activar el plugin, se observa como aparece una nueva opción en el menú lateral
izquierdo llamada “contacto”, ingresar allí y se observara creado ya un formulario de
contacto, en este caso dirigirse a crear uno nuevo, así que se debe hacer clic en
“añadir nuevo” que está en la parte superior.
En la siguiente pantalla se elegirá el idioma, está en español por defecto así que solo
se dará clic en el botón azul que dice “Añadir Nuevo” y aparecerá el editor del
formulario. El panel de edición del formulario se divide en 5 bloques, el primero es el
bloque “Formulario”. Este bloque está dividido en dos columnas, en la columna
izquierda está el campo de edición del formulario y en la columna derecha hay un
listado de las opciones que se pueden agregar al formulario.
Por defecto la columna izquierda viene con un formulario ya elaborado, se puede

utilizar ese si se desea, pero en este caso se borrara y se armara desde cero. El

DISEÑO PARA LA WEB
formulario tendrá 4 campos nombre, email, asunto y mensaje seguido del botón de
enviar. Lo primero será saber qué tipo de input o etiqueta es cada campo, en este
ejemplo los tipos de etiqueta son:
 campo nombre => campo de texto

 campo email => email
 campo asunto => campo de texto
 campo mensaje => área de texto
Sabiendo esto, es momento de agregar los campos, el primer campo a agregar será el
campo de texto así que en la columna derecha se debe de elegir la etiqueta “campo de
texto”, al elegirlo mostrará un cuadro con opciones para rellenar.
Función de cada campo:

- Campo requerido: Si se marca esta opción, este campo será obligatorio de llenar.
- Nombre: El nombre para identificar ese campo, puede ser cualquiera, por defecto el
plugin agrega un nombre al azar.
- Id: Si se requiere que este input tenga un id, acá se le colocara (opcional).
- Class: Si se quiere que este input tenga una clase, en esta sección se coloca
(opcional).
- Size: Ancho del campo, el theme ya tiene definido eso en el css así que no hay
necesidad de colocar un ancho (opcional).
- Maxlenght: Máximo de caracteres que se pueden introducir en el campo (opcional).
- Valor por defecto: Si se requiere que el campo ya tenga un dato introducido, se
puede colocar acá.
- Usar texto como marcador: Si se quiere que el campo tenga un placeholder, es
decir un texto que no sea un valor que diga “escribe tu nombre aquí”, llenar el valor
por defecto y marcar esta opción.
- Shortcode largo: Es para pegarlo en el editor del formulario, es decir en la columna
izquierda.
- Shortcode corto: Servirá para ingresar un código corto.
El mismo paso se repetirá con todos los campos, al final se tendrá algo parecido a
esto:

DISEÑO PARA LA WEB
Por último, se debe agregar el botón de enviar, en este caso el botón solo tiene tres
opciones, las dos primeras son las mismas que en los otros campos y la etiqueta es el
texto que figurará en el botón, algo como “Enviar Mensaje”.
Listo, ya se ha acabado con la primera parte, ahora se observara cómo quedo el

formulario, para ello se debe guardar el formulario haciendo clic en el botón azul de
Guardar, además se le puede colocar un nombre a ese formulario haciendo clic en el
texto “Sin título” y colocando el que se desee, para el ejemplo se le pondrá “Mi
Formulario”.
Al guardar el formulario, automáticamente generará un shortcode que se podrá pegar

en cualquier página donde se quiera agregar el formulario.
Ahora, a ver cómo quedó el formulario, en este caso el formulario quedo así:

DISEÑO PARA LA WEB
TIP: Los campos están muy juntos, esto se puede solucionar; para ello solo se debe
de editar el formulario nuevamente y cada campo colocarlo entre la etiqueta “<p>”,
quedando de esta forma:
<p>[text* nombre placeholder “Ingresa tu nombre”]</p>

<p>[email* email “Ingresa tu email”]</p>
<p>[text asunto placeholder “Escribe el asunto de tu mensaje”]</p>
<p>[textarea* comentario placeholder “Escribe tu comentario”]</p>
<p>[submit “Enviar Mensaje”]</p>
Guardar los cambios, con ello, los campos ya están separados.
CONFIGURAR EL DESTINATARIO DEL MENSAJE.
Una vez terminado el formulario lo siguiente será indicarle al plugin a que correo
queremos que envíe los datos llenados por el usuario en el formulario, obviamente, se
requiere que estos datos se envíen al correo para poder leer el mensaje del usuario y
poder contestarle. Para hacer esto, se debe ir nuevamente al cuadro de edición del
formulario y esta vez ir al bloque dos “E-mail” donde se deberá llenar con los datos del
formulario como figura en esta imagen:
Aquí se explica cada campo:
- Para: El correo a dónde se desea enviar los datos.

- De: email que se le dirá al cliente de email (gmail, hotmail, etc.) que envió ese
correo, aquí se debe de poner el correo porque si se pone otro correo como el del

DISEÑO PARA LA WEB
usuario puede que gmail o hotmail tomen el correo como suplantación de identidad
y no lo recibas.
- Asunto: Asunto o título del correo.
- Encabezados adicionales: Indica a que correo se quiere enviar la respuesta en
caso se haga, es decir si se abre el correo, se lee y se le da “responder”, esa
respuesta se enviará al correo indicado allí.
- Archivos Adjuntos: Si se quiere adjuntar algún archivo (opcional).
- Usar contenido html: Si se quiere usar códigos html en el mensaje (opcional).
- Cuerpo del mensaje: El mensaje que se enviará al correo, aquí deben figurar los
datos que envió el usuario, es aquí donde entra al juego el shortcode corto indicado
antes, ya que será el que indique el campo y valor a agregar.
Posiblemente no se haya guardado el shortcode corto, porque no se indicó, pero es

muy fácil saber cuál es, el shortcode corto es simplemente el nombre que tiene el
campo, en este caso al campo nombre le pusimos como nombre “nombre” por lo que
el shortcore sería [nombre], a email se le puso “email” así que sería [email] y así
sucesivamente. Si no se recuerda el nombre que se le puso al campo tampoco hay
problema, solo es cuestión de mirar el shortcode largo y se verá que indica cuál es su
nombre:
[text* nombre placeholder “Ingresa tu nombre”] -> El nombre siempre estará

después del tipo de campo, en este caso el nombre es “nombre”.
GUARDAR LOS CAMBIOS.

Con esto ya se puede usar el formulario de contacto tranquilamente, pero hay
ocasiones en las que se querrá enviar un mensaje automático apenas el usuario
rellena el formulario, algo así como enviar un mensaje que diga “gracias por
contactarnos lo atenderemos en 24 horas”, para ello se debe utilizar el auto
respondedor del plugin.
USANDO EL AUTO RESPONDEDOR.

Esta parte de la guía contact form 7 es opcional, si no quieres agregar una respuesta
automática al usuario cuando rellena el formulario no tienes porqué configurar esto,
pero si lo deseas te enseñare como hacerlo. Esta parte se configura en el bloque 3
llamados “E-mail (2)”, para usarlo debes activar la casilla que dice “usar e-mail (2)”
Al marcar la casilla, se vera que aparecen varios campos para llenar que son los
mismos que en el caso anterior con la única diferencia que estos datos son los que
recibirá el usuario y no el administrador, por lo tanto se debe configurar para el
usuario, ¿qué se quiere decir con esto? que por ejemplo en la casilla “Para” se debe
colocar el email del usuario, es decir el shortcode [email], en “de” colocar el email y el

DISEÑO PARA LA WEB
nombre del administrador y así con los demás, el resultado será como en la siguiente
imagen:
INSTALAR PLUGIN WP MAIL SMTP.

Si se va a utilizar el auto respondedor, es recomendable que también se instale este
plugin y es que el plugin envía el correo al usuario vía la función de php mail() que no
es bien visto por los servidores de correo, por lo tanto hay muchas probabilidades de
que el correo llegue a spam.
En cambio sí se instala el plugin y se configura correctamente el mensaje, se enviará

por un entorno seguro, siendo casi seguro que llegue a la bandeja de entrada del
usuario. La instalación es igual que con todos los plugins, dirigirse a wp-admin ->
plugins -> añadir nuevo y buscar el plugin “wp mail smtp”, se instala y se activa. Ahora
dirigirse a Ajustes -> Email y rellenar los campos de SMTP Option como en la
siguiente imagen:
Se explica cada campo:

- SMTP Host: La url del servidor smtp del hosting wordpress, esto se puede ver en
cPanel en la parte de emails “configurar cliente email” o preguntar al proveedor de
hosting.
- SMTP Port: Puerto que usa el servidor smtp, por defecto es 765 si se va a encriptar
el correo con TLS.
- Encryption: Esta opción indica si se quiere encriptar o no el correo, lo
recomendable es que sí y con TLS, ya se dejó de usar SSL debido a su última
vulnerabilidad poodle.
- Authentication: Si se va a autenticar el correo o no, elegir que sí para no terminar
en spam.
- Username y password: El usuario y contraseña del correo.

DISEÑO PARA LA WEB
Una vez hecho esto, se puede hacer una prueba para confirmar que los datos están
correctos, para ello está la opción “Send a Test email” donde se debe colocar el correo
a donde se enviará un mensaje de prueba.
CONTACT FORM 7:
La función de este plugin, es crear formularios de contacto en el WordPress, ya que
por defecto WordPress no trae formularios de contacto, además se puede utilizar el
auto respondedor de contact form que no es más que enviar un mensaje automático al
usuario una vez rellene un formulario.
4.3. INSETAR SLIDER EN LAS PÁGINAS.
Creación Slider.
Después de activar el plugin deslizante-IT, que debe aparecer en el panel izquierdo del
panel de WordPress. Hacer clic en él para entrar deslizante> Agregar nuevo Slider.
Hacer clic en "Añadir Image Slider". En el uso de la opción Estándar Media Uploader,
se debe seleccionar las imágenes que se desea añadir al deslizador. Se puede
agregar imágenes como uno por uno y el uso de selección múltiple, añadir varias
imágenes a la vez. Cada imagen debe ser llenada con la información individual de la
página de administración.
- Título: Aquí se puede proporcionar un título para la imagen deslizante.

- Descripción: Proporcionar los detalles de la imagen. Este será visible en una capa
transparente sobre el deslizante. La descripción del texto se puede construir usando
HTML.
- URL: Esta es una característica opcional. Se puede proporcionar un enlace en la
barra de desplazamiento para llevar a la ubicación específica en la página web u
otro sitio web. La dirección URL debe ser proporcionada en http: // formulario. Junto
a él se puede seleccionar "abrir en una pestaña nueva" opción.

DISEÑO PARA LA WEB
LA CREACIÓN DE VIDEO SLIDER.

Haga clic en "Añadir diapositiva de vídeo", se abrirá una ventana con "Añadir URL de
video de Youtube o Vimeo", es aquí, donde se debe insertar el enlace del vídeo. Una
vez insertado el vídeo se verá algunas opciones de configuración y el deslizador del
vídeo estará listo.
CREACIÓN DEL SLIDER DE ANUNCIO.

Dar clic en "Añadir mensaje deslizante", se observara una ventana que permitirá
añadir un deslizante posterior por medio de 2 maneras diferentes. Una de ellas es de
forma manual, llamado "Mensajes estáticos". Al hacer clic en él, se verá una lista de
mensaje, que se puede seleccionar. La segunda manera es utilizar "Últimos
Mensajes", aquí solo tiene que seleccionar la cantidad de mensajes que debe tomar, y
realizar algunos ajustes ligeramente.
Nota: cada puesto debe tener una imagen destacada con el fin de ser visto en el
control deslizante. No se recomienda usar control deslizante posterior mezclado con
un sencillo control deslizante.

DISEÑO PARA LA WEB
OPCIONES DE SLIDER ACTUALES.
Estas opciones están disponibles en la versión gratuita, y permite realizar ajustes

individuales de cada deslizador. Se pueden encontrar directamente en el panel
derecho de la página de administración del deslizador.
- Anchura: Especificar el ancho de la barra de desplazamiento en píxeles. Tiene

límite máximo – el deslizador no será más grande que el tamaño del tema de su
contenedor.
- Altura: Especificar la altura de la barra de desplazamiento en pixeles. Si tiene límite
máximo – el deslizador no será más grande que el tamaño del tema de su
contenedor.
- Efectos: Seleccionar el efecto que se aplicará al deslizador.
- Tiempo de pausa: Especificar el tiempo de pausa para el control deslizante en
milisegundos.
- Cambio de velocidad: Especificar la velocidad de cambio en milisegundos.
- Deslizador de posición: Elegir dónde postular el control deslizante dentro de su
recipiente fijo.
- Cargando Icono: Esta opción es importante. Si el sitio jQuery en su tiempo de
carga es más lento, puede tener un control deslizante con poco movimiento.
- Por navegar: Decidir cómo navegar con el deslizador. Tiene tres maneras:
utilizando puntos, imágenes en miniatura, o hay navegación en absoluto.
- Hacer una pausa en la libración: Seleccione si desea hacer una pausa en el
control deslizante con el mouse o dejar que sea con cambio de imagen.
OPCIONES DE EDICIÓN SLIDER GENERALES.

Para cambiar los estilos y colores del Slider, se debe dar clic a Opciones de TI
deslizante> Slider.
Estilos de imagen y colores:
- Comportamiento de la imagen: Seleccionar “natural” para mostrar las imágenes

en su tamaño natural. En este caso el control deslizante tendrá fondo.
- Color de fondo del Regulador del Slider: Seleccionar el color de fondo de la
imagen. El color será visible durante el cambio y los efectos.

DISEÑO PARA LA WEB
- Tamaño del margen del Slider: Añadir un margen en la parte superior e inferior de
la barra deslizante.
- Color del Borde del Slider: Pintar el margen con el nuevo color.
- Radio del margen del Slider: Configurar radio del margen.
- Cargando Imagen en el Slider: Mientras que la opción de carga de icono se
encuentre activado, se puede elegir un estilo para él.
Título estilos y colores:
- Color del título: Ajuste del color para el título.

- Color de fondo del título: Elegir el color de la celda que contiene el título.
- Título tamaño de la fuente: Especificar el tamaño de fuente para el título de la
imagen.
- Tamaño del borde del título: Establecer el margen del título.
- Color del borde del título: Seleccionar el margen del título.
- Radio del borde del título: Establecer el radio de borde para el título.
- Posición título: Definir la posición del título utilizando la vista del gráfico.
DESCRIPCIÓN ESTILOS Y COLORES.
- Descripción del Color: Ajustar el color para la descripción de la imagen.

- Descripción del color de fondo: Elegir el color de la celda que contiene la
descripción de la imagen.

DISEÑO PARA LA WEB
- Descripción tamaño de la fuente: Especificar el tamaño de fuente para la

- Descripción tamaño del borde: Especificar la frontera para la descripción de la
imagen.
- Descripción del color del borde: Seleccione el color del borde de la descripción
de la imagen.
- Descripción del radio del borde: Establecer el radio de borde para la celda de
- Descripción de la posición: Seleccionar el posicionamiento de la descripción.
Asegurarse de que no coincide con la posición del título para evitar sobrecargas.
ESTILOS DE LAS MINIATURAS DE NAVEGACIÓN.
- Count of Thumbs Slides: Seleccionar el número de imágenes que tendra el

Slides.
- Slider Thumb Height: Seleccionar la altura que contendrán los elementos del
Slide.
- Thumbnalls Background Color: Es el color de fondo que tendrán los elementos.
- Passive Thumbnall Overlay Color: Determinará el color que tendrá el elemento
cuando se superpongan encima de él (mouse).
- Title Background Transparency: Determina la transparencia del fondo del título
del elemento.
ESTILOS Y COLORES DE NAVEGACIÓN.
- Navigation Dots Position: Define la posición de las flechas de navegación.

- Navigation Dots Color: Seleccionar el color del punto para la navegación.
- Navigation Active Dot Color Especificar el color para el punto de la imagen que se
muestra actualmente.

DISEÑO PARA LA WEB
- Mostrar flechas de navegación: Seleccionar para ver las flechas de navegación

en el control Slider.
- Estilo de flechas de navegación: Elija el estilo de flecha de navegación entre los
16 tipos diferentes.
INSERTAR EL CONTROL DESLIZANTE.

Insertar el control Slider en la parte posterior de la página:
Se debe utilizar el código generado automáticamente en la parte posterior de la
página. El código corto toma la forma siguiente: [id = huge_it_slider N], donde N es el
número de identificación del cursor creado.
Insertar el control deslizante en la plantilla:

El código corto se puede insertar fácilmente en una plantilla. Para ello se debe insertar
el siguiente código corto: <? Php echo do_shortcode ([id = huge_it_portfolio N]); ?>
Donde N es el número de identificación del cursor creado.
LA INTEGRACIÓN DE WIDGETS.
Desde la lista de widgets, se pueden encontrar Huge-IT Slider, y se puede agregar

como se haría con un widgets.

DISEÑO PARA LA WEB
5. IMPLEMENTAR WORDPRESS EN UN HOSTING.
5.1. Implementar WordPress en un Hosting.

5.2. Desarrollar Menús y Subniveles en WordPress.
5.3. Desarrollar el entorno físico de la Página Web.

- Reconocer las Herramientas de los Hosting para la Implementación de WordPress.

- Reconocer las Herramientas para la creación de Menús.
- Reconocer las Herramientas para Maquetación en WordPress.
5.1. INSTALAR WORDPRESS EN UN HOSTING.
Para instalar WordPress de manera automática, se deberá de realizar los siguientes

pasos:
- Ingresar al panel de gestión del hosting.

- Acceder al panel de control del servidor y comprobar si el hosting ofrece algún
modo automático de instalación o instalación a 1 clic. Casi todos los hosting
premium ofrecen este servicio para que se pueda instalar WordPress en un
minuto sin necesidad de complicarse la vida. La ventaja, su sencillez y rapidez. El
inconveniente, que no se controla el proceso hasta el último detalle y, además, no
se disfruta tanto.
Por ejemplo en el hosting Webempresa basta con ir al Software y Servicios y hacer clic
en Packs Webempresa. Si se tiene otro hosting, se debe buscar bien o preguntar si
ofrecen este servicio automático de instalación WordPress.

DISEÑO PARA LA WEB
Durante la instalación rápida, se preguntara la ruta en la que quieres instalar

WordPress, así como el nombre de usuario y la contraseña para el login en el
WordPress. Además, podrá elegir un título para el sitio web y establecer
actualizaciones automáticas para WordPress. Una vez configurado, ya se puede
acceder a la web poniendo en el navegador lo siguiente: http://www.tudominio.com/wp-
login
Nota: cPanel es uno de los estándares de gestión para hostings más extendidos y
profesionales. Si se tiene otro panel, simplemente se buscara dónde hacerlo porque
casi todos los hostings ofrecen las mismas funcionalidades.
1. INSTALAR WORDPRESS DE MANERA AVANZADA. MODO MANUAL.

Si el hosting no ofrece instalación automática a un clic, o si se prefiere hacerlo de
manera manual para controlar todo el proceso, se debe seguir los pasos que se
detallaran a continuación. La ventaja de este método es que se puede configurar toda
la instalación de manera sencilla, elegir el nombre y contraseña que se quiera para la

DISEÑO PARA LA WEB
base de datos, etc. Además, aprender a gestionar el hosting en profundidad, se

perfeccionara y se ganara soltura para realizar acciones más avanzadas en el futuro
como por ejemplo migrar la web de un hosting a otro. El inconveniente, que es un poco
más laborioso, pero el objetivo es realizarlo paso a paso para que realmente se
consiga los resultados.
1.1 Descargar WordPress.org

Dirigirse a la web de WordPress.org y descargar el paquete de archivos para la
instalación de WordPress. Como ya se debe saber, WordPress es un software
gratuito. Una vez se descargue el archivo .zip de WordPress, se debe descomprimir y
entrar en la carpeta WordPress. Una vez dentro, seleccionar todos los archivos de
instalación y comprimirlos en un único archivo .zip. Esto se hará así porque cuando
después se vaya a subir y descomprimir los archivos en el servidor, se necesitara que
los archivos estén directamente volcados en la carpeta principal del dominio, en lugar
de estar dentro de una carpeta llamada WordPress, que es la que viene por defecto.
1.2 Entrar al panel de gestión del hosting.

Al igual que en el modo anterior, se debe de ingresar al panel de control del hosting.
Como ya se ha comentado, el ejemplo se realizara con el Panel de Webempresa.
1.3 Ir al Administrador de archivos.

El Administrador de Archivos es el lugar donde se puede ver y modificar los archivos
que hay en el hosting. En otros hostings esta zona se llama File Manager y cosas así.
Esto también se podría hacer mediante un cliente FTP tipo Filezilla.
1.4 Decidir dónde se va a instalar WordPress

En un hosting premium se puede tener varias webs alojadas, cada una con su propio
dominio. Normalmente, cada web diferente tiene su propia carpeta en el servidor,
dentro de la cual se deberá instalar WordPress, es decir, una instalación de
WordPress independiente para cada una de las webs que se tengan en el hosting.
1.4.1 Si sólo se tiene un dominio comprado y se quiere instalar WordPress

Simplemente se debe de dirigir a la carpeta public_html o carpeta raíz. En algunos
servidores esta carpeta principal puede tener otros nombres, pero es fácil de
encontrar. Es la carpeta principal o raíz, de modo que lo que se instale en ella se verá
en el dominio principal. En public_html se le dará Cargar y subir el archivo .zip que se

DISEÑO PARA LA WEB
ha comprimido anteriormente y que contiene todos los archivos de WordPress. Una

vez se haya cargado, se debe seleccionar y darle a Extraer. Si todo va bien, se tendrá
los 20 archivos de instalación de WordPress directamente volcados sobre public_html
como se ve en la imagen.
1.4.2 Si se tiene varios dominios comprados y se va a instalar WordPress en

cada uno de ellos
Para tener varias webs diferentes alojadas en un mismo hosting, primero se debe
añadir cada dominio como Dominio Adicional. Para ello, se deberá de dirigir al Panel
de nuevo y entrar en la sección Dominios > Dominios Adicionales.
Aquí se debe añadir el nombre del dominio para la nueva web que se va a hacer en el
hosting aparte de la que se tiene en el directorio principal. Se observara que, al añadir
el dominio, automáticamente el hosting crea una carpeta en public_html que será la
raíz principal de la nueva web. En esta carpeta public_html/tudominio.com se tendrá
que hacer una instalación específica para esta web, subiendo los archivos de
WordPress al igual que se ha hecho anteriormente.

DISEÑO PARA LA WEB
En este caso, se debe de subir los archivos de WordPress dentro de esta carpeta
public_html/tudominio.com porque se está instalando una web diferente a la que se
tiene en el directorio principal public_html. Este proceso se deberá de hacer con cada
uno de los dominios que se tenga comprados. Si se va de nuevo a Administrador de
Archivos, se verá que efectivamente ya se ha creado la nueva carpeta en la que se
instaló WordPress para ese dominio concreto.
1.4.3 Si se tiene un dominio comprado en otro hosting y se quiere usarlo con

la instalación de WordPress que se va a hacer en el nuevo hosting
Se tienen dos opciones:
- Hacer un apuntado de DNS. En el panel de control del servidor donde se tenga

comprado el dominio, acceder a la zona donde se pueda gestionar las DNS de este
dominio. Para ello, buscar una sección llamada DNS o Name Servers. En este
apartado se debe de cambiar las DNS actuales del dominio por las DNS del nuevo
hosting al que se quiere apuntar este dominio. Las DNS son por lo general dos
direcciones que proporciona el hosting. Si no se encuentra, se debe de contactar
con el proveedor para que las envíe, esto es algo que permiten todos los hostings.
El tiempo necesario para que el dominio apunte al nuevo hosting no suele exceder
de 24-48 horas. Una vez se tenga ya apuntado correctamente, se podrá trabajar en
la web instalada en el nuevo hosting y esta web tendrá asignado el dominio que se
tiene en el otro servidor.
- Solicitar una transferencia de dominio. Para traer el dominio del hosting anterior al
hosting nuevo y tener legalmente dentro de este nuevo hosting, se debe solicitar en
el hosting anterior un código de autorización EPP o Auth Code. A continuación, se
va al hosting nuevo y solicitar una transferencia de dominio. En este proceso
pedirán que se introduzca el código para validar que efectivamente es el que está
solicitando de manera legítima la transferencia. Al tratarse de una nueva alta de
dominio en el nuevo hosting, normalmente esto se cobra como cuota de dominio.
El proceso de transferencia suele tardar un poco más ya que se trata de una

gestión más compleja que el apuntado DNS.

DISEÑO PARA LA WEB
En ambos casos, una vez se tenga el dominio disponible en el nuevo hosting, se

debe realizar el paso 2.4.2, para que el hosting asigne una carpeta concreta en la
que instalar WordPress y construir una página web en el dominio.
1.4.4 Si aún no se tiene un dominio comprado en ningún hosting

Se pide al hosting una dirección temporal en la que se pueda trabajar la web. Los
hostings Premium dan una dirección provisional por defecto, pero en algunos otros
hostings se debe solicitar expresamente. Luego, cuando se termine la web y se
compre un dominio o se traiga desde otro hosting, es sencillo cambiar el dominio a
esta web para pasar del dominio provisional al dominio definitivo.
Para hacerlo, se debe de ingresar al panel de administración de la web WordPress y

en Ajustes > Generales, introducir el nombre de dominio en Dirección de WordPress
(URL) y en Dirección del sitio (URL). Antes de hacerse, se debe de asegurar de que el
dominio que se ha traído desde otro servidor ya esté disponible en el nuevo hosting.
1.5 Crear una base de datos.

WordPress, al igual que cualquier plataforma de gestión de contenidos o CMS,
necesita una base de datos donde guardar los contenidos de la web, configuraciones,
datos de acceso, etc. Para hacerlo, en el panel de gestión del hosting o en el Panel,
dirigirse a MySQL Bases de Datos. A continuación, elegir un nombre para la base de
datos y darle Crear una base de datos. Importante: Por seguridad, es conveniente
elegir un nombre para la base de datos que sea una sucesión de cifras y letras
aleatorias.
1.6 Crear un usuario para la base de datos.

Para que la base de datos funcione correctamente, se debe de crear un usuario de
base de datos con todos los privilegios y asignarlo a esta base de datos. Al igual que
en el caso anterior, se debe de elegir un nombre de usuario difícil de descifrar y
ponerle una contraseña. Dar clic a Crear Usuario.
1.7 Añadir el usuario a la base de datos

Seleccionar la base de datos y el usuario creados para esta instalación de WordPress
y darle clic a Añadir.

DISEÑO PARA LA WEB
1.8 Darle al usuario todos los privilegios.

Esto va a servir para que se pueda realizar todas las acciones necesarias en la web
como usuario administrador.
Importante: Este NO es el usuario de acceso a la web WordPress. Este es el usuario

de la base de datos.
1.9 Lanzar el asistente de instalación-

Para terminar el proceso de instalación de WordPress, se necesita acceder al
asistente de instalación, que lo guiará hasta el final. Para ello, abrir una nueva pestaña
del navegador y escribir la dirección URL de la instalación WordPress. Esta URL es la
ruta de la carpeta donde se ha subido los archivos de WordPress anteriormente. Si se
ha subido a public_html directamente, es decir, a la raíz del servidor, simplemente se
tecleará el nombre de dominio y darle a Enter.
Si se ha subido los archivos de WordPress a otra carpeta, siempre que esa carpeta
esté asignada a un dominio en Dominios > Añadir Dominios, bastará con que se teclee
en el navegador el nombre de ese dominio y se lanzará el asistente de instalación.
Importante: Si se está trabajando en una instalación que aún no tiene un dominio

asignado o la transferencia o apuntado DNS está en proceso y no se ha completado
aún, escribir en el navegador la URL temporal que haya dado el hosting.

DISEÑO PARA LA WEB
1.10 Rellenar los datos en el asistente de instalación.

Si ya se ha conseguido lanzar el asistente de instalación, se está muy cerca de instalar
WordPress. Tan sólo quedan 2 pasos para terminar. Dar clic en ¡Vamos a ello! y en la
siguiente interfaz introducir los datos requeridos.
En Nombre de la base de datos introducir el nombre que se eligió para la base de

datos en el paso 2.5.
Importante: Dirigirse a la sección MySQL Bases de Datos y en la tabla copiar

exactamente el nombre completo de la base de datos, ya que el servidor siempre
añade un prefijo junto al nombre que se elija.
En Nombre de Usuario repetir el proceso copiando el nombre de usuario directamente

desde la sección MySQL Bases de Datos. Escribir la contraseña que se puso al
usuario de base de datos y darle Enviar.
Nota: Los otros dos campos, Servidor de la Base de Datos y Prefijo de Tabla
normalmente no es necesario que se rellenen, se puede dejar como está. Cambiarlos
sólo en el caso de que se quiera modificar el localhost (por indicación del hosting) o los
prefijos de tabla de la base de datos para aumentar la seguridad o tener dos o más
webs instaladas con la misma base de datos. Una vez se le da a Enviar, si los datos
son correctos aparecerá la siguiente pantalla. Darle a Ejecutar la instalación.
El último paso de la instalación; En esta pantalla se elige un Título para el sitio (que se
podrá cambiar luego cuando se ingrese en la instalación de WordPress), un Nombre
de usuario para acceder a la web y una Contraseña. Desde la última versión 4.3.1.,

DISEÑO PARA LA WEB
WordPress sugiere una contraseña de seguridad Fuerte para proteger el sitio. Se

puedes utilizar la que se recomienda por sistema o cambiarla uno mismo, pero se
debe de asegurar de que sea una contraseña difícil de descifrar.
Introducir una dirección de Correo Electrónico a la que llegará una notificación cuando
se termine la instalación de WordPress y que será la cuenta de Email asociada a la
web, a la que le llegarán por defecto los correos del formulario de contacto y demás
notificaciones del sitio. Esto se puede cambiar posteriormente dentro del panel
WordPress en Ajustes Generales.
Por último, WordPress le da la posibilidad de indexar o desindexar el sitio web de cara

a los buscadores. En un principio, cuando se está diseñando el sitio web, aún se tiene
poco contenido o directamente se ha instalado contenido demo de un tema o plantilla.
Si Google indexa el sitio con poco contenido o con contenido duplicado de las páginas
demo del tema probablemente se penalizará en posicionamiento SEO, y perjudicará
notablemente de cara al futuro cuando se quiera posicionar la web.
Por ello, en este paso inicial se desactiva la casilla Permitir a los buscadores que
indexen el sitio, y posteriormente, cuando se haya terminado de diseñar la página web,
se podrá volver a indexar el sitio en Google en la sección Ajustes > Lectura del panel
WordPress.
Si se ha rellenado correctamente todos los campos, Dar clic a Instalar WordPress para
concluir la instalación en unos pocos segundos y acceder a la nueva web
introduciendo el usuario y la contraseña elegidos. En el futuro, cuando se quiera
acceder al panel de administración de la web WordPress, basta con que se escriba la
dirección http://www.tudominio.com/wp-admin en el navegador.
¡Enhorabuena! Se ha conseguido instalar WordPress de manera manual y a partir de

ahora se sabrá cómo hacerlo siempre que se quiera en cualquier carpeta de un
servidor.

DISEÑO PARA LA WEB
5.2. DESARROLLAR MENÚS Y SUBNIVELES EN WORDPRESS.
CREANDO UN PROPIO MENÚ EN WORDPRESS

Muy bien, manos a la obra. Lo primero que se necesita para crear un menú, es
acceder al panel de administración del WordPress. En este ejemplo, para ilustrar el
proceso, se va a utilizar una de las plantillas para WordPress, en este caso Meadow,
un blog con estilo. Una vez dentro del panel de administrador, se debe navegar hasta
la pestaña “Apariencia” del WordPress situada en la barra lateral izquierda. Hacer clic
y se desplegará un menú donde se tendrá varias opciones (Menús, Widgets, Temas,
etc.) En este caso interesa los Menús, así que hacer clic en “Menú”.
Perfecto, ya se ha accedido al panel de administración de los menús. Como se podrá

observar, y esta es la novedad que incorpora la nueva versión de WordPress en
cuanto a la gestión de menús, se tienen dos pestañas:
- Administrador de Menús: donde poder crear y organizar los menús. Como se verá
a continuación se puede crear tantos menús como se requieran.
- Localización de menús: la segunda pestaña es el siguiente paso una vez se ha
creado el menú, pues se le indicara a WordPress que el menú que se ha creado se
va a ubicar en la cabecera, el pie de página, la barra lateral, etc.
Por lo tanto, se volverá a la pestaña de “Administración de Menús” y direccionarse a

crear un menú nuevo, con el nombre que se desee, en este ejemplo, se llamara
“silocreativo”. Una vez creado, ya se puede empezar a llenar el menú de contenido.
Como se habrá podido observar, WordPress lo pone sencillo: en la parte izquierda se

DISEÑO PARA LA WEB
tiene algunas cajas con el contenido que se tiene publicado, es decir, los artículos o
post, páginas, categoría.
Ahora tan solo se necesita hacer clic en los elementos que se quieran añadir al menú,
y pulsar el botón añadir. Automáticamente se añadirán dichos elementos en forma de
barra. Perfecto, ya se tiene el menú creado para el WordPress, con el nombre y con
los contenidos que se desean.
Los Menús WordPress

Los menús son una parte fundamental de todo diseño web o blog, pues les sirve a los
visitantes y usuarios del sitio como sistema de navegación para acceder a los
contenidos. Cuanto mayor sea el diseño del menú y mejor esté estructurado, más
satisfactoria será la navegación para los usuarios y clientes en el sitio web. Nunca se
debe de olvidar esto, buscar siempre poner las cosas sencillas a los visitantes, se lo
agradecerán.
Lo ideal sería poder acceder a todo el contenido a través del menú de navegación, sin
embargo, ya se habrán dado cuenta que cuando una web comienza a tener cierto
contenido, es muy difícil ubicar todo esas páginas, secciones, artículos y categorías en
el menú del WordPress.
Por ello, es necesario contar con un menú que permita ubicar desplegables y
submenús, donde colocar elementos secundarios o categorías dependientes de una
principal, pero sin caer, como en la imagen, en colapsar el sitio con menús
desplegables infinitos. Para ello, es fundamental haber seleccionado antes una buena
estrategia de navegación; así que como siempre se dice, primero lápiz y papel y a
pensar.
DISEÑO PARA LA WEB
Por último, y no menos importante, se tiene que tener claro la ubicación de dicho menú
de navegación antes de crearlo, pues como se entiende, pueden existir menú en la
cabecera, en el pie de página o incluso en la barra lateral. La mayoría de las veces
depende de las plantillas que se estén utilizando en WordPress, aunque como
decimos, la mayoría de las veces se suelen ubicar en la cabecera.
AÑADIR SUBNIVELES AL MENÚ.

Ahora se tiene que ordenar el menú, y establecer submenús y subniveles, para poder
tener elementos desplegables. Como se puede observar, los artículos y páginas que
se han añadido y que ahora aparecen con forma de barra son arrastrables. Tan solo
dar clic en uno de ellos, y sin soltar el mouse, moverlos abajo o arriba para ordenarlos
dentro del menú.
De igual forma que se ha desplazado dichos menús arriba y abajo, también se puede
desplazar ligeramente a la derecha, hasta dejar un espacio en blanco delante de dicha
barra. Lo que se está haciendo con esto es establecer los menús y submenús. Se
puede crear tanto subniveles como le parezca, pero tampoco se debe abusar de ellos
o de los usuarios que no verán adecuadamente los contenidos del blog o sitio Web.
Igualmente, se puede cambiar el texto que va a parecer en el menú, pues aunque el

artículo o página se llame “Inicio”, se puede cambiar el nombre por “Casa” o “Home”,
afectando únicamente a lo que se muestra en el menú.
Una cuestión importante, los submenús únicamente se muestran cuando se pasa el

mouse por encima del elemento padre, y este se despliega automáticamente. Pero,
¿Se ha pensado que sucede en dispositivos móviles y tablets? Efectivamente, estos
usuarios no poseen mouse, y solo pueden hacer clic, por lo que nunca verán el menú
desplegable.
La solución a esto es el “responsive design”, una técnica de diseño web que permite
que la web se adapte automáticamente al dispositivo donde se vaya a visualizar, sin
tener que generar más contenido o crear ningún otro menú de navegación.

DISEÑO PARA LA WEB
Como se puede ver, la plantilla para WordPress Meadow que se está utilizando para
este ejemplo es responsive, por lo que se adapta automáticamente si el visitante es
usuario de smartphones y tablets, y así hacerles la navegación más fácil y sencilla, sin
que pierdan nada de contenido. Así que, si el WordPress no se adapta, se debe
instalar plantillas para WordPress con “responsive design” o diseño adaptable.
Consejo: Sucede a veces que lo que interesa es crear un submenú con todas las
categorías (como el caso del ejemplo), y como elemento principal o contenedor, si se
desea colocar un elemento llamado “Categorías”, que si bien sirve para agrupar todas
las categorías, en sí mismo no es una página o artículo propiamente dicha, pues no
tiene ningún contenido ¿Que sucede si un usuario hace clic en ella? ¿A dónde le
lleva?
Una forma de solucionar esto es añadir un “enlace personalizado“, se puede hacer

desde una de las cajas de la izquierda. En los campos que se pueden rellenar, es

DISEÑO PARA LA WEB
importante que en la “url” se añada un numeral “#”. Con esto se asegura que el
elemento tenga entidad, que el menú funcione correctamente y que al dar clic sobre él,
WordPress no direccione a ninguna página.
5.3. DESARROLLAR EL ENTORNO FÍSICO DE LA PÁGINA WEB.
UBICAR EL MENÚ EN LA CABECERA O EN EL PIE DE PÁGINA.

Perfecto, si se ha llegado a este punto, ya se tiene un menú prácticamente creado.
Únicamente falta ubicarlo en la web. Por lo tanto, se pasara a la siguiente pestaña de
“localización”.
Aquí se mostrará las ubicaciones posibles que puede tener el menú en WordPress.
Esto depende fundamentalmente del tema o plantilla de WordPress que se tenga
instalado. Si la plantilla es a dos columnas, con una barra lateral a la izquierda y el
contenido a la derecha, el menú se ubicará en dicha barra lateral. Si por el contrario, la
plantilla para WordPress con la que se está trabajando posee un “header” o cabecera,
seguramente este sea el punto de ubicación.
En este caso, se ubicara el menú en la cabecera, pues es el espacio que primero

visualiza un visitante cuando accede a la web, y por lo tanto es lo primero que va a
utilizar para navegar. Una vez se ha seleccionado el menú que se quiere mostrar, en
este caso “silocreativo”, es el momento de guardar y visualizar el resultado. Para ello,
en la barra superior, se hará clic en “visitar sitio” y se podrá observar como se muestra
el menú creado en WordPress.
Consejo: ¿Qué pasa si se cambia de tema o plantilla y ya se tenía un menú creado?

Es una pregunta muy común. No se deberá de preocupar, el menú se guarda en la
pestaña de “administrador de menú”, sin embargo, el menú se desvinculará de la
ubicación. Únicamente se deberá de repetir este último paso, el de ubicar el menú
creado en su localización, y guardar, para ver nuevamente el menú de navegación
funcionando en la nueva plantilla de WordPress

DISEÑO PARA LA WEB
VI. DISEÑAR WEB RESPONSIVE, SHORTCODES, PLUGINS Y TIENDA ONLINE.
6.1. Desarrollar Ambiente de Trabajo para múltiples dispositivos, Responsive.

6.2. Manejos de Shortcodes.
6.3. Implementar Plugins gratuitos y Premium.
6.4. Implementación de Tiendas Online (WooCommerce).

- Reconocer el trabajo con diseños responsive y HTML5.

- Reconocer los diferentes plugins utilizables en WordPress.
- Desarrollar plugin para tiendas online en WordPress.
6.1. DESARROLLAR AMBIENTE DE TRABAJO PARA MÚLTIPLES

DISPOSITIVOS, RESPONSIVE.
Seguro que, si recientemente se ha interesado por el mundo del diseño web o el

desarrollo web, se ha oído hablar del diseño responsive (o lo que es lo mismo, pero
llamado de forma distinta, diseño web responsable, adaptable o adaptativo)
El diseño web responsive es un término relativamente frecuente, que persigue una

estrategia de creación de webs en base a contenidos e imágenes fluidas. Seguro que
se recuerda hace unos años, cuando se trataba de acceder a una web y decía que
para su correcta visualización era necesario cambiar la resolución de pantalla. Pues
esto se acabó. Ya no se diseña más para resoluciones concretas. La web es capaz de
adaptarse a todos los dispositivos y tamaños de pantalla, ¿Suena bien verdad?
Con esto se consigue que sea cual sea el tamaño de la pantalla del portátil donde se
visualiza, la web va a ser capaz de adaptarse al tamaña del mismo, sin que esto afecte
al contenido ni al diseño. Pero es que aún hay más: la misma web es capaz de
mostrarse y adaptarse en tablets y móviles sin que el usuario tenga que hacer zoom.
Doblemente genial.

DISEÑO PARA LA WEB
¿QUÉ OTRAS VENTAJAS TIENE EL DISEÑO WEB RESPONSIVE?

Una web responsive solo tiene hoy por hoy ventajas. Es más, una web responsive no
sólo está preparada para el día de hoy, sino también para el de mañana, pues sea
cual sea el próximo tamaño de pantalla o próximo smartphone, la web estará
preparada para adaptarse a él. Estas son algunas de las ventajas de diseño web
adaptativo:
 Misma versión y contenidos en Tablet, Smartphone y ordenador: Es decir, no hay

que editar y subir tres tipos de contenidos, ni mantener tres tipos de web. ¡Un
contenido, una web y muchos visitantes!
 Estamos en móvil: Seguro que, si se tiene una empresa o algún negocio, han
sugerido más de una vez que se lance una app, que se está perdiendo una gran
cantidad de público y tal. Con una web responsive, se vuelve a estar disponible a
ese target sin la inversión que puede suponer lanzar una app.
 Google y SEO: A Google le gusta el responsive, y a cualquiera le gusta que la web

se posicione en Google. ¡Pues no se hable más! Google en las últimas
actualizaciones está comenzando a posicionar mejor las webs que cuentan con
diseño responsive, sobre todo si la búsqueda proviene desde un dispositivo móvil. Y
esto solo es una tendencia.
 Preparados para el futuro: Cada día salen al mercado nuevos dispositivos,

nuevos tamaños de pantalla, los televisores comienzan a tener acceso a internet y
cuentan ya con navegadores, las videoconsolas (como la Xbox) ofrecen también
navegación web. ¿Vas a estar pendiente de modificar tu web o lanzar una versión
para cada dispositivo? Eso no es viable, adelantarse a los acontecimientos y
preparar la web para el futuro.
DISEÑO WEB CON HTML5: COMPOSICIÓN Y ESTRUCTURA.

Una de las ventajas que ha traído HTML5 al campo del diseño web, es una estructura
de las etiquetas HTML mucho más semánticas, es decir, un marcado con un
significado para lo que realmente va a servir dicho identificador. En otras palabras,
HTML5 ha hecho el trabajo al diseñador web mucho más sencillo que con versiones
anteriores, sobre todo cuando se tiene que modificar un diseño web de otro
compañero.

DISEÑO PARA LA WEB
Estructura de una web en HTML5.

A la hora de diseñar una web, había ciertos elementos o partes de la página, que eran
claramente identificados y a grandes rasgos, eran aceptados por la mayoría de la
comunidad, ya sean usuarios o diseñadores. Esto se refiere a la cabecera (header), al
pie de página (footer), a la barra lateral (aside).
Sin embargo, en anteriores ediciones, estos elementos eran diseñados en la web

como simples divisiones mediante el uso de la etiqueta <div>, teniendo que identificar
cada una de ellas como lo que realmente eran. Así se tenía una lista de etiquetas divs,
cada una con su correspondiente identificador, que se tenía que darle los mismos:
<div id=”header”> o <div id=”footer”>, sin embargo, también se podía llamarlos <div
id=”cabecera”> o <div id=”pie-de-pagina”>, con lo que cada diseñador tenía su propia
forma de identificar las partes de sus webs.
Efectivamente, parece lógico que estos elementos, que siempre se repiten en todos
los diseños web que se trabajan, tuvieran sus propias etiquetas, semánticas e
identificativas. Así pues, se pasó de un <div id=”cabecera”> a un <header>, mucho
más limpio, fácil para los diseñadores y muy útil para los buscadores como Google,
que podrán identificar de forma más rápida la estructura de una web.
¿Y la composición de HTML5 en responsive design?

Exactamente igual, nada cambia (Si aún no se ha escuchado hablar del diseño
adaptable o diseño responsive). Simplemente los elementos “fluidos” de la web se van
a adaptar al dispositivo donde se visualice la página, sin perder el diseño, haciendo
más fluida y sencilla la experiencia de navegación al usuario.

DISEÑO PARA LA WEB
Estas mismas etiquetas se adaptarán al soporte, aunque como se ve, varios

elementos si mantienen su orden, como la cabecera de la web y el pie de página. Sin
embargo, elementos como la barra lateral (sidebar), o un posible menú de navegación
lateral (nav) pasarán a ubicarse por encima o debajo de la sección principal (la que
antes llamamos “main”)
Con esta composición, las etiquetas de HTML5 que normalmente siempre están
presentes en todos los diseños web que se realizan son:
 <header></header> Es el elemento que abre la web. Normalmente lleva ubicado el

logotipo o el texto representativo. En los casos que la web lleve publicidad, también
se suele ubicar el banner de cabecera dentro de él. En muchos casos contiene al
menú de navegación <nav> aunque no necesariamente.
 <nav></nav> Todos los enlaces de navegación que llevan a las distintas secciones
de nuestra web. Es una de las partes más importante, pues debe ser fundamental
para que el usuario sea capaz de navegar por las categorías y páginas.
 <section></section> Es la etiqueta que viene a sustituir por defecto al <div>, y lo

que indica es que se está en una sección distinta, como si de un capítulo de un libro
se tratase.
 <article></article> La etiqueta article está diseñada para contener una unidad

propia de información y contenido, que a su vez puede tener la cabecera (header),
cuerpo (section) y pie de artículo (footer). Un section puede contener varios
artículos independientes.
 <aside></aside> Viene a sustituir al sidebar o barra lateral, aunque su uso es para

llenarlo de contenido que no esté relacionado directamente con esa página, por
ejemplo un listado de enlaces, anuncios, iconos sociales…
 <footer></footer> Y el pie de página, presente en casi todas las webs, sirve para
ubicar los datos de contacto, algo de información extra, iconos sociales,
actualizaciones de twitter…hasta incluso un segundo menú de navegación.
 <audio>,<video>… Otras etiquetas para mostrar contenido si la necesidad de

contar con plugin de terceros, como flash. Por todo ello, HTML5 se va a convertir (si
no lo ha hecho ya) en un lenguaje que va a estructurar el diseño web de una forma
mucho más semántica y fácil de identificar.
6.2. MANEJO DE SHORTCODES.
Lo primero es elegir el archivo PHP que “acogerá” las funciones de los shortcodes. La
elección más habitual es el fichero functions.php del tema activo, que casi todos
incluyen, y si no, se puede crear manualmente. También se puede crear un propio

DISEÑO PARA LA WEB
plugin de funciones, una opción habitualmente más limpia y controlable. Los dos pasos
básicos son estos:
1. Crear la función primaria PHP.

2. Crear el conector add_shortcode, cuya función es conectar la función primaria PHP
a WordPress (crear el shortcode para la función PHP y luego se inserta en el editor
de WordPress para que active esa función).
Como se ha apuntado, una vez se inserte el [shortcode] en el editor, WordPress se

conectará con el archivo functions.php o plugin de funciones y reemplazará de manera
automática el shortcode con la función que se creó. Una vez se haya creado las
funciones, sean pocas o muchas, todo lo que se tiene que hacer es insertar el
shortcode único asociado a cada función cada vez que se quiera usar en el editor.
1. Abrir el archivo de funciones (functions.php) del tema, normalmente en /wp-

content/themes/eltema/functions.php, o el plugin de funciones y crear la función. Un
ejemplo sencillo sería algo así:
Guardar los cambios del archivo de funciones, ya está listo para usar el nuevo
shortcode.
2. Poner el nuevo shortcode [gracias] en el lugar que se desea del editor de

WordPress. Una vez se guarde los cambios en la página se vería el resultado de la
función “llamada” por el shortcode
SHORTCODES DE WORDPRESS
Los shortcodes de WordPress son pequeños códigos que se puede añadir en el editor
de WordPress. Se usan para añadir funciones al contenido de tus entradas y páginas
sin tener que escribir un script cada vez que se necesite hacer esa tarea.
Son como tags HTML que usan corchetes ([ ]) en vez de los símbolos de “mayor y
menor qué” (< >). Seria de la siguiente manera:
Se pueden añadir “shortcodes” manualmente mediante un código en el fichero

(functions.php) o plugin de funciones, desde el tema si ya los incluye o desde algunos

DISEÑO PARA LA WEB
plugins que ofrecen “shortcodes” listos para utilizar (un buen ejemplo son los plugins
para insertar vídeos, que usan shortcodes del tipo”.
VENTAJAS DE USAR SHORTCODES.

La principal es no tener que repetir códigos o tareas habituales en el editor de
WordPress. Los shortcodes son grandes ahorradores de tiempo. También facilitan
tareas habitualmente tediosas o que requieren mucho tecleo. Se puede usar para
añadir textos repetitivos, para hacer llamadas a funciones, para aplicar clases CSS,
casi para todo.
DESVENTAJAS DE USAR SHORTCODES.

Los shortcodes que se creen prácticamente no tienen desventajas, no así los que
facilitan temas y plugins. ¿El motivo?, bien sencillo, que crean una dependencia, pues
si mañana se cambia de tema o plugin y se utilizó mucho sus shortcodes, se tendrá
que hacer limpieza de esos shortcodes que dejarán de funcionar.
6.3. IMPLEMENTAR PLUGINS GRATUITOS Y PREMIUM.
A veces lo que es simple para unos, puede resultar terriblemente complicado para
otros. Por eso, siempre es bueno recopilar temas básicos que seguro que ayudan a
todos aquellos que se están iniciando con WordPress, y la instalación de plugins es
una de ellas.
Pueden resultar cosas obvias, pero con una cuota de uso de más del 23% en toda la
web, los usuarios que utilizan WordPress son muy variados y heterogéneos, con una
horquilla de edades y experiencia muy diversas. Dicho esto, se verá qué es eso de los
plugins y las distintas formas que se tienen de instalarlos en WordPress
PLUGINS DE WORDPRESS: Se deben de usar con moderación. Los plugins son

extensiones que se instalan en el WordPress para aumentar alguna funcionalidad del
core. Al igual que los temas, los hay gratuitos y Premium, y la temática es muy diversa
(plugins para formularios de contacto, SEO, ecommerce, foros, etc.), prácticamente de
todo.
Pero es importante no pasarse e instalar solo los necesarios, ya que si no se tiene

control, se puede llenar la web de plugins y esto puede afectar directamente al
comportamiento de la web y la velocidad de carga de la misma, incidiendo
negativamente en la experiencia de usuario, algo que no es nada bueno.
Estos plugins se instalan en el servidor, más concretamente en la carpeta wp-

content/plugins/. Importante, siempre se habla de plugins para wordpress.org. Se debe
de recordar que para wordpress.com no es posible instalar ningún plugin como se
comentaba en esta comparativa.

DISEÑO PARA LA WEB
FORMAS DE INSTALAR UN PLUGIN.

Las formas de instalar un plugin son muy similares a la instalación de las plantillas
WordPress. Hay tres formas principales:
- Directamente buscando y seleccionando el plugin que se quiere instalar desde el

panel Plugins > Añadir nuevo. Se tiene a disposición todos los plugins del
repositorio oficial, que son todos gratuitos.
- Subiendo el .zip del plugin vía Plugins > Añadir nuevo. En la misma ubicación se
tiene una opción de subir el plugin en formato .zip desde el ordenador. Esta es la
forma más habitual para instalar los plugins Premium.
- Instalación vía FTP: si algunos de los métodos anteriores no es el idóneo, también
se puede instalar un plugin vía FTP. Esta es la opción que usan los desarrolladores,
sobre todo en fases de desarrollo del plugin, para actualizar los cambios de forma
rápida.
INSTALAR UN PLUGIN DEL REPOSITORIO DE WORDPRESS.ORG:

Esta es la forma más sencilla y fácil para el usuario. Simplemente se tiene que
acceder al panel de administración, a Plugins > Añadir nuevo. En esta pantalla se verá
los plugins más usados, pero se puede usar el buscador para buscar el plugin que se
necesite.
Es importante que el plugin que se instale sea compatible con la versión del
WordPress. Además, el tiempo de la última actualización del plugin también es
importante. Si lleva más de dos años, se entiende que el plugin está abandonado y
puede no ser del todo recomendable su instalación.
También se puede hacer uso de la pestaña de plugin “favoritos”, y hacer una propia
lista de plugins para tenerlos siempre marcados. Muy útil para cuando haya que
realizar otra instalación de WordPress y se vaya a usar los mismos plugins.

DISEÑO PARA LA WEB
INSTALAR UN PLUGIN PREMIUM.

Este proceso es muy similar al de los temas. Previamente es necesario tener los
archivos preparados. Será necesario el .zip del plugin, y es recomendable comprobar
que dentro de este archivo se encuentra una única carpeta, que es la que se va a
instalar. Es proceso es válido también para los plugins descargados del repositorio.
Es importante, solo instalar plugins de fuentes de confianza. Instalar plugins

descargados de otras vías que no sean el Marketplace, el repositorio de WordPress o
la web del autor del plugin no es recomendable, ya que pueden dañar la instalación
con otros fines: spam, publicidad encubierta o algo peor.
Una vez comprobado, se tiene que hacer clic en el botón “subir plugin”, para llegar a la
pantalla donde se realizara la subida del archivo .zip.
Una vez subido el zip, el plugin estará preparado para instalarse. Cuando el proceso
de instalación haya terminado, se puede decidir si activarlo o dejarlo desactivado. Si
se va a utilizar ya, es el momento de activarlo.
MANTENER LOS PLUGINS ACTUALIZADOS

Una cuestión importante es mantener los plugins actualizados, ya que suelen ser una
de las vías por donde se puede tener accesos no deseados al sistema. En los últimos
días se han encontrado algunas vulnerabilidades en plugins muy conocidos. Por ello
siempre es importante estar muy atento y actualizarlos en cuanto se pueda. Una
buena norma puede ser realizar una comprobación una vez a la semana, aunque sí
con menor periodicidad, sería mucho mejor.
Se debe de recordar, no por tener más plugins, el WordPress va a ser mejor. Más bien
al contrario, un sitio sobrecargado de plugins puede bajar su rendimiento y afectar a
cuestiones relativas a la velocidad del sitio, tan importante para el SEO.
MODIFICAR O AÑADIR CSS AL TEMA WORDPRESS.

Es una pregunta muy recurrente sobre todo en los foros de WordPress. Si se supone
que se quiere modificar un elemento muy concreto del diseño: el tamaño de los H1, la
gama de colores o simplemente la tonalidad de los botones sociales, estas

DISEÑO PARA LA WEB
modificaciones requieren en la mayoría de los casos de un poco de CSS. Pero no hay

que alarmarse, existen varios métodos para hacerlo de forma segura y sin necesidad
de tocar apenas código.
El otro escenario es que directamente se tenga un extracto de CSS que se quiera

añadir al tema. WordPress por defecto no trae ningún editor ni campo para introducir
estas reglas de estilos. Se debe por tanto, modificar la plantilla o recurrir a algunos de
los métodos alternativos (y recomendables).
LOS TEMAS WORDPRESS SE ENCARGAN DEL CSS.

Salvo que un plugin en particular tenga un estilo propio y traiga consigo una hoja de
estilos CSS propia, lo cierto es que toda la carga del diseño del WordPress pertenece
exclusivamente a la plantilla. Por tanto, ¿Porque no editar directamente la plantilla?
Error!
Las plantillas de WordPress son, al igual que los plugins, elementos que se actualizan,
se mejoran y se sobre escriben sobre la versiones anteriores. Y además sin
contemplaciones, no se guardan los cambios que se hayan realizado en dicha plantilla.
Por tanto, eso quiere decir que si se actualiza el tema a una nueva versión, se perderá
todos los cambios que se hayan realizado (en los archivos CSS o php claro está, el
contenido no tiene nada que ver).
Comentados los antecedentes, se enumeran cuáles son los métodos más

recomendables y su dificultad, para añadir o modificar vía CSS algún elemento de
diseño.
MÓDULO JETPACK CSS PERSONALIZADO.

Sin duda el método más sencillo y bastante eficiente si ya se utilizan Jetpack. Si no se
utiliza aún, consiste en descargar el plugin Jetpack (si no se tiene cuenta en
WordPress.com también se puede utilizar el plugin gratuito Slim JetPack) y activar el
módulo de CSS personalizado.

DISEÑO PARA LA WEB
Los pasos son sencillos:
1. Instalar plugin.
2. Activar el plugin. (Posiblemente pedirá que se conecte con la cuenta de
WordPress.com)
3. Ir a JetPack (justo encima de Entradas en el menú lateral del panel de WordPress)
y buscar el módulo de CSS personalizado.
4. Una vez activado, se tendrá una nueva pestaña en el menú Apariencia > CSS
personalizado. Un completo editor CSS del tema al alcance.
Nota: si se opta por Slim JetPack, no es necesario que se realice la activación en el

paso 2, y en el paso 3, se deberá acudir a Ajustes > Slim JetPack. El resto todo es
igual.
Listo, ya se tiene activado el editor donde pegar o escribir las reglas CSS que
modificarán el diseño o tema. Lo fantástico de este método, es que JetPack va a incluir
los estilos CSS que se definan en este editor justo detrás en la carga de los que el
tema trae por defecto (style.css), por lo que se puede sobre escribirlos sin problemas,
sin miedo a perder los cambios en futuras actualizaciones.
USANDO EL PLUGIN SIMPLE CUSTOM CSS.

Igual de fácil que usar el módulo de Jetpack. Después de instalar Simple Custom CSS
y activar el plugin, simplemente se tiene que navegar hasta Apariencia > Custom CSS
y añadir las líneas de CSS personalizado.
CREAR UN CHILD THEME (O TEMA HIJO).

Un método más complejo pero igual de eficaz. Consiste en crear un tema hijo, que
modifica los estilos del tema padre. Básicamente se va a realizar la misma tarea que
con el método anterior: cargar una hoja de estilos propia justo después de la hoja de
estilos del tema padre. Sobre escribir y añadir nuevas reglas sin tocar el tema original.
Sin embargo, para algunos usuarios, este método puede resultar algo tedioso. Se
necesitará un editor de CSS (notepad puede servir, pero no es lo más recomendable,
mejor sublime text), y acceso al FTP o empaquetar el child theme e instalarlo vía
Apariencia > Temas.

DISEÑO PARA LA WEB
Aunque es entendible que sólo se utilice cuando las modificaciones tienen una cierta
entidad. Para una pequeña modificación, el método vía Editor CSS de JetPack es más
sencillo y rápido.
Por otro lado, si no se tiene problemas en crear temas hijos, es recomendable que
esta sea siempre la primera opción. El motivo principal es que es escalable: si se
necesita incluir alguna funcionalidad o template extra, se puede hacer en el
fuctions.php del tema hijo (algunas pueden ser muy interesantes, sobre todas referidas
al responsive o a incluir una web font en el WordPress).
Con Jetpack no se puede modificar y añadir nuevas funciones. Solo es hojas de estilo.
Y por otro lado, solo se está incluyendo una llamada más a un solo archivo CSS
(style.css del child theme) mientras que para la primera opción, de partida ya estar
cargando un plugin más la llamada al servidor del nuevo CSS. Pero lo dicho, ambas
son muy buenas.
EDITAR DIRECTAMENTE EL STYLE.CSS DEL TEMA.

Se pasa a la zona gris de la edición de CSS en WordPress. Editar directamente el
CSS del tema (style.css) no es la solución más limpia. Tanto si es un tema Premium
como un tema gratuito, se va a perder dichos cambios cuando el tema se actualice.
Además, si no se tiene conocimiento de CSS, se debe de tener mucho cuidado con las
puntuaciones y los cierres de reglas. Dejarle una llave abierta, u olvidar un punto y
coma puede hacer la hoja de estilos ilegible para algunos navegadores. Si aun así, se
está convencido de que este es el método adecuado, se verá cómo se puede realizar
directamente a través del panel de Administración de WordPress. Los pasos son:
1. Ir a Apariencia > Editor

2. Buscar el archivo style.css (comprobar que se está seleccionando el tema actual).
3. Editar con sumo cuidado.

DISEÑO PARA LA WEB
Además de los inconvenientes citados anteriormente, este método no dará acceso a

todo el CSS en algunos temas. Un ejemplo claro: si el autor del tema ha decidido
dividir los estilos en varios CSS, puede que alguno de ellos esté inaccesible desde
dicho editor, al encontrarse dentro de una carpeta tipo library, assets o css.
OTROS MÉTODOS Y ALTERNATIVAS.

Existen otros métodos y alternativas: principalmente plugins que permiten definir una
hoja de estilos, o algún tema que trae consigo un campo para las modificaciones que
se quieran realizar. Pero suelen ser muy minoritarios. Lo importante, es que se decida
el método que se decida, se debe de realizar una copia de aquellos archivos que se
puedan perder y utilizar la alternativa que más se adecue a sus conocimientos. Es
recomendable inclinarse por lo sencillo y lo que se controle.
6.4. IMPLEMENTACIÓN DE TIENDAS ONLINE (WOOCOMMERCE).
INSTALAR EL PLUGIN GRATUITO WOOCOMMERCE.
1. Crear y configurar una Tienda Online completa y gratuita.

2. Crear y configurar productos para la Tienda Online.
3. Establecer diversos métodos de pago.
4. Gestionar los pedidos que llegan a la Tienda Online.
5. Añadir la tienda al menú de la web.
6. Crear un catálogo de productos.
7. Añadir widgets súper útiles para la Tienda Online.
8. Añadir plugins espectaculares para mejorar la Tienda Online.
9. Crear cupones promocionales para los usuarios de la Tienda Online
10. Posicionar la Tienda Online en Google con técnicas SEO.
11. Elegir una plantilla o theme Premium para Tienda Online.
12. Mejorar y vender más con la Tienda Online.
¿POR QUÉ CREAR UNA TIENDA ONLINE EN WORDPRESS CON

WOOCOMMERCE?
- Porque es sencillo, de hecho es mucho más fácil que otras plataformas. Aunque
nunca antes se haya creado una Tienda Online, con esta guía manual se podrá
hacer en poco tiempo.
- Porque es potente. Existen multitud de extensiones y plugins, gratuitos y de pago,
diseñados para WooCommerce.
- Porque es gratuito. Tanto la plataforma WordPress como el plugin WooCommerce
son gratuitos, aunque sea difícil de creer.
- Porque es compatible con casi todas las plantillas, con lo cual se puede añadir la
Tienda Online a una web que se tenga hecha previamente sin dificultad ni coste
adicional.
- Porque se puede usar temas WordPress realmente espectaculares y profesionales.
En este enlace se puede encontrar plantillas para Tienda Online.
- Porque es muy favorable para el SEO, ya que tanto WordPress como
WooCommerce están muy enfocados al posicionamiento en Google.

DISEÑO PARA LA WEB
- Porque se puede personalizar por completo gracias a la filosofía del código abierto.
- Porque existe una amplísima comunidad de desarrolladores y expertos añadiendo
mejoras y solucionando problemas, dando soporte, etc.
- Porque es profesional, cada vez hay más empresas importantes que optan por
WordPress y WooCommerce para vender productos por internet.
- Porque WordPress es hoy en día la herramienta más importante y extendida en el
mundo para crear páginas web profesionales.
INSTALAR EL PLUGIN GRATUITO WOOCOMMERCE

En el Escritorio de WordPress, dirigirse a Plugins > Añadir Nuevo y en el buscador
ingresar WooCommerce. A continuación, dar clic a Instalar, seleccionar el primer
resultado que se muestra, el del erizo.
Luego dar clic a Activar plugin. Estos son los dos pasos básicos siempre que se instale
un plugin desde el repositorio oficial y gratuito de WordPress:
Si ya se tiene funcionando el plugin WooCommerce para comenzar a crear una Tienda

Online. A continuación, saldrá un asistente online que va a guiar en la configuración
básica:

DISEÑO PARA LA WEB
Lo primero y más importante, instalar las páginas esenciales de la tienda. Son Tienda,
Carrito, Finalizar Compra y Mi Cuenta. Para ello, dar clic en Continuar. Con estas
páginas básicas ya se puede comenzar a vender productos con la Tienda Online,
aunque más adelante se mostrara cómo añadir nuevas páginas con diferentes
contenidos y funcionalidades para enriquecer el comercio electrónico.
En la siguiente pantalla toca configurar una serie de cuestiones relacionadas con la

Localización de la Tienda. Definir la ubicación de la tienda, moneda, separador para el
precio, cantidad de decimales y unidades de medida para los productos. Cuando se
haya introducido todos estos datos (algunos se pueden dejar como están) hacer clic
en Continuar.
A continuación, se define si se va a enviar productos físicos a los clientes y los costos

de envío nacionales e internacionales, si se va a vender fuera del país. Además, se
puede decidir acerca de la aplicación de impuestos sobre la venta, de modo que los
productos de la tienda ya muestren el precio final con los impuestos incluidos o éstos
se añadan posteriormente en el proceso de compra. Cuando se termine de configurar
esta parte, se le deberá de dar clic a Continuar.

DISEÑO PARA LA WEB
En la siguiente interfaz, se va a definir los métodos de pago que posteriormente se

pueden configurar más a fondo dentro de los Ajustes de WooCommerce. Si se va a
aceptar pagos mediante PayPal, introducir la dirección de correo de la cuenta de
negocio de PayPal. Ahora dar clic en Continuar.
En la última pantalla, el asistente informa de que ya se han realizado los pasos

básicos para configurar la Tienda Online y da la posibilidad de comenzar a crear el
primer producto. Pero, antes de hacerlo, se debe de realizar una serie de ajustes más
avanzados en la tienda dando clic a Volver al Escritorio WordPress.
CONFIGURAR LOS AJUSTES A FONDO.

Para configurar por completo la Tienda Online se debe ir al Escritorio de WordPress y
dentro de él a WooCommerce > Ajustes. Dentro de Ajustes hay diversos apartados
donde se puede configurar todos los aspectos esenciales de la tienda online:
Ajustes > Generales.

En WooCommerce > Ajustes > Generales se puede acceder a la pantalla de
configuración básica que se han visto en el primer paso del asistente. Aquí además se
puede activar la geolocalización para determinar la ubicación del comprador.

DISEÑO PARA LA WEB
Ajustes > Productos.

En la siguiente sección Productos, dentro de la pestaña Generales en la parte de
abajo, se puede habilitar las calificaciones para los productos de la tienda.
En la pestaña Presentación, se puede determinar cómo va a ser por defecto la página

de la tienda, si mostrará sólo productos, o productos y categorías, etc. Además, se
puede establecer un orden predeterminado para los productos y habilitar un efecto de
visualización en Lightbox o caja de luz para las imágenes de los productos.

DISEÑO PARA LA WEB
En la pestaña Inventario, se puede habilitar la gestión de stocks, es decir, permitir que

se pueda añadir a cada producto una cantidad específica de existencias.
En Mantenga Imágenes, se puede hacer que la tienda bloquee durante 60 minutos (o

los que se decida) el producto que ha seleccionado el usuario hasta que éste proceda
al pago.
También se puede habilitar notificaciones para las diversas acciones de la tienda y

avisos de stock bajo que llegarán a la cuenta de correo que se elija, así como definir
umbrales de stock bajo, esto es, que a partir de una cierta cantidad de productos que
se decida, en la tienda aparecerá un aviso de stock bajo para ese producto.
Otro aspecto interesante es el de Agotado Visibilidad. Aquí, marcando la casilla

Ocultar los artículos comunes del catálogo, se puede hacer que la tienda no muestre
los artículos que estén temporalmente sin stock. Si sólo se va a utilizar la tienda como
catálogo, es decir, para mostrar productos sin posibilidad de comprarlos, se debe de
asegurar de que no está marcada esta casilla.
En la pestaña Productos Descargables, se puede definir qué sucederá cuando un

usuario adquiera un producto descargable de la tienda. Si el producto se descarga
automáticamente, se le redirige a una página de descarga o se le envía un correo con
un enlace de descarga. También se puede habilitar restricciones para que los usuarios
sólo puedan descargar los productos cuando hayan iniciado sesión en tu tienda.

DISEÑO PARA LA WEB
Ajustes > Impuesto.

En este apartado se define el impuesto o impuestos que se aplicarán a los productos
de la tienda. En primer lugar, en la pestaña Opciones de Impuestos, se debe de
informar sobre la legislación de comercio electrónico en el país y si es necesario
asegurarse de que los precios de la tienda ya muestran los impuestos incluidos. Para
ello, marca Sí, voy a entrar en los precios incluyen impuestos, para que al crear los
productos se puedan introducir los precios definitivos con impuestos incluidos.
Además, en Mostrar precios de la tienda y en Mostrar Precios Durante carro y la

salida, se puede elegir el impuesto que se aplicará a los productos tanto en la parte de
la tienda como en la zona de carrito y finalizar compra. De este modo, los precios se
estarán mostrando como definitivos con impuestos incluidos en todos los lugares de la
Tienda Online.
En la pestaña Tarifas Estándar, se va a definir el impuesto básico que se aplicará por

defecto a todos los productos de la tienda. Para ello, se deberá introducir el código de
país, tipo impositivo para el impuesto y nombre del impuesto. Por último, se puede
hacer que este impuesto se aplique automáticamente a los costos de envío o no.
Si se quiere definir diferentes tipos impositivos según provincias, se puede insertar

tantas filas como se quieran para especificar los diferentes porcentajes de IGV para
cada provincia. Por suerte, existen tablas ya confeccionadas que se pueden importar
en formato CSV y después modificarlas a su gusto.

DISEÑO PARA LA WEB
Ajustes > Finalizar Compra.

En este apartado se puede escoger y configurar los diferentes métodos de pago que
se van a habilitar en la tienda. Además, se puede activar el uso de cupones e incluso
definir una página de términos y condiciones para el formulario de pago.
En la zona inferior se tienen los diferentes métodos de pago. Haciendo clic en cada
uno de ellos se puede entrar a activarlos y configurarlos. Es recomendable que se
habiliten la mayor cantidad de métodos de pago posibles para que el usuario tenga
donde elegir y siempre encuentre el modo que le resulte más cómodo o habitual, pues
la ausencia del método de pago favorito del cliente podría convertirse en un
impedimento para la venta.
Transferencia Bancaria.
En este apartado se puede habilitar el pago mediante transferencia bancaria y
personalizar el mensaje e instrucciones que leerá el usuario en la pasarela cuando
escoja este método de pago. Por último, insertar el número de cuenta bancaria para
que automáticamente se envíe al usuario un correo con el número de cuenta y pueda
realizar la transferencia o ingreso.

DISEÑO PARA LA WEB
Pago en entrega o contra reembolso.

Si se obvia el pago con cheques por ser un sistema antiguo (el propio plugin lo avisa) y
se pasa al pago en entrega. En este apartado, además de personalizar el nombre y
descripción, se puede definir el costo fijo que tendrá este método de pago. Para ello,
en Habilitar para métodos de envío, seleccionar un método de envío de los que
posteriormente se van a configurar. De esta manera, este método de envío y su
correspondiente importe se aplicará a los pagos en entrega.
PayPal.
Si se habilita el método de pago con PayPal, tan sólo se tiene que introducir la
dirección de correo que se ha dado de alta en PayPal al crear la cuenta de empresa o
negocio. Con la opción PayPal Sandbox se puede habilitar pagos de prueba ficticios
para probar la herramienta y asegurarse de que la tienda funciona correctamente y
está preparada para recibir pagos reales.
Pago con tarjeta (Redsys).

No viene incluido por defecto en WooCommerce, pero se debe de conocer cómo
configurarlo ya que se trata del método más extendido y cómodo para el usuario. Este
método de pago se puede implementar con un plugin añadido que enriquece las
posibilidades de WooCommerce: Redsys Gateway for WooCommerce Pro.

DISEÑO PARA LA WEB
Hasta el 23 de noviembre del 2015 este plugin era gratuito, pero desde entonces, el
cambio de cifrado por parte de Redsys ha obligado a los desarrolladores del plugin a
reescribirlo por completo. El costo del plugin es de 19,95€. Una vez que se obtenga,
se debe de ir a Plugins > Añadir Nuevo y subir el plugin en formato .zip. Al instalar y
activar el plugin, en Finalizar Compra, aparecerá un nuevo apartado llamado Redsys.
Para habilitar el pago con tarjeta en la Tienda Online, lo primero que se debe de hacer
es hablar con el banco para que activen un TPV o pasarela de pago para el sitio web.
Una vez que se contrate el servicio, Redsys enviará un correo electrónico con todas
las instrucciones necesarias para configurar el método de pago con tarjeta.
Los datos para rellenar todos los campos que se ven en la imagen anterior, se
obtienen de este correo electrónico. Además, permiten realizar una compra en modo
prueba para verificar que la tienda está funcionando correctamente antes de pasar al
modo producción en el que los pagos ya pasan a ser reales.
Si se ha habilitado Redsys, opcionalmente se puede establecer el método de pago con
Iupay. ¿En qué consiste Iupay? Se trata de una nueva funcionalidad de pago que
permite a los usuarios tener sus credenciales de tarjeta guardadas y asociadas a una
determinada cuenta de usuario con contraseña de modo que al pagar en una tienda
online no necesite introducir todos los datos de la tarjeta, sino tan sólo sus datos de
usuario en Iupay.
Para habilitar y configurar este método de pago, se necesita descargar el plugin de

Iupay y posteriormente, en la nueva pestaña que aparece en Finalizar Compra,
introducir los datos que se han utilizado para el método de pago con Redsys. Así de
sencillo.
Ajustes > Envío.

En este apartado se puede configurar los diferentes métodos de envío y sus costos.
También se puede habilitar la calculadora de envío para que el usuario calcule los
costos de su pedido, así como establecer que el selector de métodos de envío sea en

DISEÑO PARA LA WEB
formato botones o desplegable. En la zona inferior se definen los diferentes métodos

de envío:
En Precio Único, se puede establecer un costo estándar para todos los envíos:
Con el Envío Gratuito, se puede definir este tipo de envío sin costo para todas las
compras o sólo para las que cumplan una serie de requisitos, como alcanzar un
determinado importe que pueda decidir uno mismo o tener un cupón de envío gratuito
que previamente se haya enviado a los usuarios:
Por último, se puede fijar un costo para Envíos internacionales, y también un importe
para envíos locales a determinados códigos postales que uno mismo introduzca,
incluyendo la posibilidad de recogida local.
Ajustes > Cuentas.

DISEÑO PARA LA WEB
En este apartado se puede configurar el modo en el que los usuarios crearán su

cuenta de clientes en la tienda. Si se marca Habilitar registro en el “Caja” página (sí, la
traducción es un tanto “peculiar”), se permitirá a los usuarios la posibilidad de
registrarse al final del proceso, justo en la página de Finalizar Compra. De este modo
se les permite que vayan añadiendo productos al carrito y sólo al final se les pide los
datos de registro.
Ajustes > Correos electrónicos.

Aquí se puede personalizar los correos electrónicos que se enviarán al usuario para
notificar el estado de su compra, como Nuevo pedido, Pedido cancelado, Procesando
el pedido, Pedido completado, Pedido devuelto, Factura del cliente, Nota para el
cliente, Restablecer contraseña y Nueva cuenta. En este apartado se tiene la
posibilidad de establecer un nombre para el remitente de estos correos de notificación,
escribir sus propios textos para cada notificación, añadir imágenes de cabecera con la
imagen de marca, usar los colores corporativos en el cuerpo del email y los textos, etc.
De este modo se consigue aplicar correctamente el branding en todas las
comunicaciones con el cliente. En el caso del correo remitente, en ocasiones resulta
oportuno introducir un correo del tipo [email protected], para evitar que las
notificaciones a clientes se conviertan en una vía de comunicación con los clientes que
en realidad no se pueden atender.

DISEÑO PARA LA WEB
CREAR LOS PRODUCTOS DE LA TIENDA ONLINE.

Una vez que se ha configurado a fondo los ajustes, ha llegado el momento de dar de
alta los productos que se van a vender en la Tienda Online. Para ello, en el Escritorio
de WordPress, ir a Productos > Añadir Producto.
Dentro de la interfaz de creación de nuevo Producto, se tiene una zona para el título
del producto. Aquí es conveniente ser muy precisos con el nombre del producto y
además añadir palabras clave. Posicionar bien el producto en Google será decisivo
para conseguir ventas.
Más abajo se tiene la zona de texto donde introducir la descripción del producto. Lo
dicho para el título vale para el contenido de esta descripción. Precisión en la
descripción y palabras clave para el posicionamiento SEO. Y muy importante: evitar
contenido duplicado, es decir, escribir un contenido original e inédito en lugar de copiar
la descripción de otras tiendas o incluso de la página oficial de la marca. A Google no
le gusta el contenido duplicado y se podría recibir penalizaciones en el
posicionamiento orgánico de los productos, lo cual sería nefasto para la estrategia.
En la zona de la derecha hay un apartado de Categorías de los Productos donde se

debe añadir una categoría (o varias) para el producto. Se puede añadir la categoría
directamente aquí o hacerlo de manera más genérica para toda la tienda en Productos
> Categorías. Se deben de tener muy claras cuáles serán las categorías y estructurar

DISEÑO PARA LA WEB
bien la tienda, evitando la improvisación en este aspecto. Un poco más abajo, al igual
que en las entradas, se puede añadir etiquetas específicas para cada producto. Abajo
del todo a la derecha, se tiene la zona de Imagen del Producto, donde se sube una
imagen destacada principal para el producto, o Galería del Producto, donde se puede
añadir varias imágenes del producto en diversos ángulos y contextos.
Muy importante: la imagen principal del producto debe ser una buena foto, si se puede
contratar a un profesional para ello es mejor. Es la primera toma de contacto visual del
usuario con el producto y puede resultar decisiva de cara a la compra final. Además,
añadir galería permite al usuario ver más ángulos del producto, fotos en detalle,
personas interactuando con el producto, etc. Esto aumenta la confianza del usuario
respecto al producto y a la tienda y, por tanto, puede incrementar las ventas. No se
debe utilizar imágenes de Google ni fotos de poca calidad. Se trata de un aspecto
totalmente esencial de cara a conseguir ventas. En la parte de abajo a la izquierda hay
un amplio apartado llamado Información del producto. Aquí, lo primero que se va a
hacer es definir qué tipo de producto se va a vender:
- Un producto simple es el que se vende en una única versión final, sin variaciones
de color, tamaños, tallas, capacidad, etc.
- Por contra, un producto variable es el que permite elegir al comprador entre
diversos tamaños, colores, opciones, etc., y en función de ello puede variar de
aspecto, método de envío, precio, etc.
- Un producto agrupado es aquel que pertenece a una misma categoría junto a otros
productos. La finalidad de agruparlos es facilitar al usuario la compra y además
aumentar las ventas.
- Un producto externo o afiliado en realidad se vende desde otra web y normalmente
otro vendedor, pero se vende desde la tienda y a cambio se obtiene un porcentaje
de beneficio.
- Dentro de Información del Producto, en la pestaña Generales, se puede insertar un
SKU o código de referencia. En Precio Habitual se define el precio del producto, y
en Precio Rebajado se puede ofrecer una rebaja del producto para un periodo de
tiempo determinado de manera automática. En Situación Fiscal elige la opción
Imponible para que se aplique al producto el impuesto que se seleccione en Clase
de impuesto (normalmente el impuesto estándar, para Perú es el IGV).
En la pestaña de Inventario, se puede habilitar la gestión de stocks a nivel de

producto, es decir, indicar cuántas unidades exactas quedan de este producto
concreto.

DISEÑO PARA LA WEB
En Permitir pedidos pendientes, se puede permitir que los usuarios compren productos
que es posible que no tenga en stock en ese momento determinado (pero que se
supone se repondrá pronto), lo que sería algo así como una reserva del producto. Si el
plazo de reposición va a ser más elevado de lo habitual, se debe de marcar notificar al
cliente, si por el contrario la reposición del producto es un proceso rápido y continúo no
es necesario que se avise al cliente pues recibirá su pedido en los plazos habituales.
Más abajo, se puede indicar el estado del producto, En stock o Agotado. En el caso de
que se marque Agotado, aparecerá un cartel dentro del producto en la tienda que
indica al usuario que no hay existencias. Por último, si se quiere que sólo se pueda
comprar una unidad del producto (por ejemplo, para evitar la reventa cuando se vende
entradas), se debe de marcar la casilla Habilitar esto sólo para que uno de este
artículo que se compra en un solo pedido (otro error del traductor).
En la pestaña Envío, se puede introducir características del producto como Peso y

Dimensiones y elegir un método de envío determinado para el producto, de entre
todos los métodos habilitados, esto se realiza en Ajustes > Envío. Si no se selecciona
ninguno, el usuario será el que decida qué método de envío prefiere.
En Productos Vinculados, se pueden hacer recomendaciones de productos, productos

relacionados con el actual y agrupamientos de productos.

DISEÑO PARA LA WEB
En Atributos, se puede definir diversos atributos o características del producto y

asignarle valores para que se muestren en la ficha del producto. Además, en el caso
de Productos Variables, se puede hacer que estos atributos generen variaciones del
producto a cada una de las cuales se puede atribuir una imagen, un método de envío,
peso, medidas, precio, etc., en función del valor que escoja el usuario.
En Nombre, se escribe un atributo, por ejemplo Color. En Valores, se podrá insertar

los diferentes valores del atributo color, por ejemplo: Verde, Rojo, Azul. Si se marca las
casillas Visible en la página de productos y Usado para variaciones, se puede editar
por separado cada variación en la pestaña Variaciones, en la cual se genera todas las
combinaciones según los atributos y valores introducidos. Así, si por ejemplo el
producto de color azul tiene un precio diferente a los otros dos, se podrá poner un
precio diferente y además añadir la foto correspondiente del producto en color azul, ya
sea una camiseta, un reproductor mp3 o cualquier otro producto.
Por último, en la pestaña Avanzado, se puede añadir una nota adicional que se
enviará al usuario después de la compra, asignar un orden al producto en relación a
los otros y habilitar comentarios de usuario para este producto (los comentarios
pueden moderarse para aceptarlos o rechazarlos desde la sección Comentarios del
Escritorio de WordPress).
DISEÑAR Y PERSONALIZAR LA PÁGINA TIENDA (SHOP).

Ya se ha configurado los ajustes de la tienda y creado los productos, ahora ha llegado
el momento de que se personalice la sección Tienda de modo que tenga un aspecto
atractivo y usable para el usuario.
Esto se puede hacer mediante widgets que se podrán añadir a las zonas laterales de
la página tienda (siempre que la plantilla permita esta opción). En ocasiones, en
algunas plantillas, para que la página tienda muestre una barra lateral, es necesario

DISEÑO PARA LA WEB
ajustarlo en la propia página. En otras plantillas se configura directamente en las

opciones del tema, donde se puede encontrar un apartado Tienda o Shop.
En el Escritorio de WordPress, dirigirse a Apariencia > Widgets y se observaran los

nuevos widgets que se tienen disponibles al haber instalado el plugin WooCommerce.
Como se puede observar, hay nuevos widgets en la zona izquierda que se pueden
arrastrar a las diversas áreas de widgets de la zona de la derecha. Hay plantillas que
sólo permiten una sidebar para todas las páginas y otras, más avanzadas, que tienen
un área de widgets específica para tienda.
A continuación, se muestra un listado de los widgets que incluye la instalación de

WooCommerce:
- Búsqueda de producto.
- Capa de navegación (para reducir la lista de los productos durante la visualización
de las categorías de productos).
- Carrito.
- Categorías de Productos (listado de todas las categorías de productos que se
pueden utilizar como menú de navegación para la tienda).
- Etiquetas de Productos.
- Filtro de Precios (barra deslizable para acotar rango de precios en la visualización
de los productos).
- Productos mejor valorados.
- Productos vistos recientemente.
- Productos (listado de todos los productos de la tienda).
- Revisiones recientes (comentarios recientes a productos).
AÑADIR LA PÁGINA TIENDA AL MENÚ PRINCIPAL DEL SITIO-

Para añadir la página Tienda al menú principal de la web, en el Escritorio de
WordPress, dirigirse a Apariencia > Menús y aquí seleccionar el menú principal del
sitio y darle a Elegir. A continuación, a la izquierda, en Páginas seleccionar la página
Tienda. Si no se encuentra, es posible que la instalación automática de páginas que
realizó el asistente de WooCommerce al comienzo haya creado la página con el

DISEÑO PARA LA WEB
nombre en inglés. Para solucionarlo, dirigirse a Páginas y en el buscador de arriba a la

derecha buscar Shop. Cuando se encuentre la página Shop, darle a editar, cambiar el
nombre a Tienda (o el que se quiera) y darle a Actualizar. Ahora volver a Apariencia >
Menús y ya se tendrá la página Tienda en la zona izquierda para añadirla al menú.
Puede ser interesante que bajo el botón Tienda, se añada un desplegable con todas
las categorías de productos de la tienda. De este modo, se permite al usuario navegar
directamente hacia la categoría que desee para ver los productos que más le
interesen. Esto mejora la usabilidad del sitio.
Para hacerlo, se debe de desplegar en la parte de la izquierda, la caja de Categorías

de los Productos y añadir las categorías al menú. A continuación, colocar los botones
de categorías ligeramente desplazados a la derecha bajo el botón Tienda, como si
estuvieran tabulados. Esto creará un desplegable en el menú bajo el botón Tienda.
Nota: si en la zona izquierda de esta sección no se encuentra la caja de Categorías de

los Productos, situarse arriba a la derecha y hacer clic en la pestaña Opciones de
pantalla. Una vez desplegadas las opciones, asegurarse de marcar el ítem de
Categorías de los productos.
GESTIONAR LOS PEDIDOS DE LA TIENDA ONLINE.

Para gestionar los pedidos de la tienda, se debe de situar en el Escritorio de
WordPress y hacer clic en WooCommerce > Pedidos. En esta sección se tiene un
listado con todos los pedidos realizados por los clientes de la Tienda Online y un
resumen del estado, fecha, importe total, datos del cliente, etc.

DISEÑO PARA LA WEB
En este apartado, se puede indicar el estado de cada pedido en la zona de Acciones

de la derecha. Aquí, con un sólo clic se puede actualizar el estado del pedido a
Procesando o Completo. Si se quiere especificar con más detalle el estado del pedido,
se debe de dar clic al icono del ojo y entrar al pedido para cambiar el estado en la lista
desplegable.
Nota: cada vez que se actualiza el estado del pedido, el cliente recibe una notificación
en su correo electrónico. Se debe de recordar que todos estos mensajes de
notificación se crean y editan dentro de WooCommerce, en la sección Ajustes >
Correos Electrónicos.
CREAR CUPONES PROMOCIONALES.

Es muy fácil crear un cupón descuento o envío gratuito para los clientes de la Tienda
Online. Para hacerlo, situarse en WooCommerce > Cupones y hacer clic en Añadir
Cupón.

DISEÑO PARA LA WEB
En esta sección se puede crear un cupón para enviar a los clientes e incentivarles a
comprar. Introducir un código para el cupón (el usuario posteriormente introducirá este
código cuando esté a punto de finalizar la compra), elegir un tipo de descuento,
importe a descontar, si se va a incluir envío gratuito y fecha de expiración para el
cupón. Además, en Restricción de Uso y Límites de Uso, se puede definir condiciones
de uso más concretas para el cupón, limitar su validez para determinados productos,
etc.
Es interesante que se combinen la creación de cupones con el envío de Newsletters,

en las cuales se incluyan los códigos de cupones, con lo cual se conseguirá un
incremento de ventas en determinados momentos. Para la creación, diseño y envío de
Newsletters, es recomendable el plugin Mail Poet, con el que se puede automatizar el
envío de Newsletters a determinadas listas de correo.
PLANTILLAS PREMIUM PARA CREAR UNA TIENDA ONLINE.

Si se va a crear una web con Tienda Online, lo mejor es que se compre un buen tema
para WordPress que tenga un diseño atractivo y moderno, que permita personalizar al
máximo el diseño y que esté bien codificada de cara al tiempo de carga y al
posicionamiento SEO.
WooCommerce es un plugin que funciona bien casi con cualquier plantilla en la que se
instale, aunque no sea una plantilla específica de eCommerce. No obstante, comprar
una plantilla específica de Tienda Online tiene ventajas, pues las plantillas Premium
incluyen páginas y secciones ya diseñadas que se pueden utilizar en el proyecto y se
va a ahorrar mucho tiempo y además se va a dar un resultado excelente. En el
siguiente listado mostraremos los que son a criterio de muchos desarrolladores, los
mejores themes Premium para hacer una Tienda Online en WordPress, por su
atractivo gráfico, funcionalidades, facilidad de uso y optimización. Además, de incluir
un enlace de compra y descarga.

DISEÑO PARA LA WEB
¿QUÉ ES WOOCOMMERCE?
WooCommerce es el plugin por excelencia para crear y diseñar una tienda online en
WordPress. Aunque parezca difícil de creer se trata de un plugin gratuito que va a
permitir crear en muy poco tiempo un e-commerce en el sitio web y configurar todos
los aspectos necesarios para el funcionamiento de la tienda online como formas de
pago, precios, costes de envío, impuestos, carrito, página de pago y facturación,
cuenta privada de cliente, página de seguimiento del pedido y un sinfín de opciones.
Crear un producto con WooCommerce es muy sencillo, casi como crear una página
simple de WordPress, y además se va a poder añadir todo tipo de características
específicas al producto, descripciones, precios variables, productos combinados,
promociones temporales, etc.
Otra de las grandes ventajas de WooCommerce es que al instalarlo se crea un montón

de widgets adicionales que se pueden insertar simplemente arrastrando y que incluyen
elementos tan útiles como carrito de la compra que se va actualizando a tiempo real
en la barra lateral, barra deslizante para acotar rango de precio, categorías de
productos, productos más vendidos y más valorados, reviews u opiniones de clientes,
etc. Sin duda, la mejor opción gratuita para hacer una tienda online en WordPress de
una manera rápida y sencilla pero con toda la potencia y posibilidades de un plugin de
pago. Un imprescindible.
THE RETAILER.
Se trata de una plantilla Premium para hacer una Tienda Online en WordPress.
Destaca por su calidad visual y su gran cantidad de opciones de personalización.
Incluye contenido demo, es decir, páginas y secciones ya diseñadas que se puede
modificar al gusto para usarlas en el propio proyecto.
SHOPKEEPER.
Shopkeeper es un tema Premium de ecommerce concebido para crear tiendas online
muy visuales y con un estilo vintage, donde destacan por encima de todo las imágenes
de los productos. Incluye hasta 9 páginas de inicio muy atractivas con estilo landing
page, además de secciones diversas para diseñar la tienda.

DISEÑO PARA LA WEB
LABOMBA.
Labomba es una plantilla Premium para diseñar una tienda online muy elegante y
minimalista, ideal para productos de lujo, con imágenes y efectos modernos de estilo
parallax y mega menú avanzado. Incluye 21 páginas de inicio y diversas secciones de
contenido demo que se pueden instalar en la web y usarlas para diseñar sus propias
secciones.
CONSEJOS PARA MEJORAR Y OPTIMIZAR LA TIENDA ONLINE.

Para conseguir el éxito en la Tienda Online, además de la correcta configuración de
WooCommerce, hay diversos aspectos que se deben de tener en cuenta y que
pueden ayudar a mejorar las estrategias para vender por internet:
- Insertar widgets para mejorar la usabilidad de la tienda y aumentar la interacción de

los usuarios y las ventas. Carrito de la compra a tiempo real, filtro para rango de
precios, productos más vendidos y mejor valorados, menús de categorías, etc.
Aparte de los widgets que añade WooCommerce de manera automática, existen
plugins que sirven para añadir nuevos widgets a la tienda.
- Buscar las mejores ofertas en servicios de envío y logística. Intentar conseguir

promociones que permitan abaratar los envíos y, muy importante, asegurarse de
que el servicio es eficaz y profesional. Una empresa de envío que no respete plazos
ni procedimientos puede hacer perder credibilidad y clientes.
- Utilizar imágenes de buena calidad para los productos de la tienda. Si se puede

permitir, contratar a un fotógrafo profesional que elabore un catálogo fotográfico. A
los usuarios les gusta ver los productos al detalle, con imágenes de buena calidad y
en diversos ángulos. Esto mejora la confianza de los clientes en el eCommerce.
- Un buen modo de aumentar las ventas de un determinado producto en un momento

concreto es creando una landing page para el producto y trabajándola en
posicionamiento SEO. De este modo se consigue más ventas y, muy importante, se
puede medir conversiones con mayor detalle.
- Es muy recomendable que se coloque en un lugar visible las certificaciones y

homologaciones oficiales de la Tienda Online. Comprar en internet es un acto de
confianza para muchos usuarios y toda acción que se lleve a cabo para aumentar
esta confianza es importante. Intentar ofrecer un servicio de atención al cliente no

DISEÑO PARA LA WEB
sólo postventa, sino también preventa, para aclarar posibles dudas previas a la
compra y aumentar la confianza y cercanía.
- Ofrecer promociones, descuentos y premios a los clientes, motivarlos a volver y a

que hablen de la tienda a otros usuarios, fidelizarlos. No utilizar la newsletter para
saturarlos con información comercial, usarlo más bien para ofrecerles valor real.
Tratarlos con verdadera cercanía, felicitarles en fechas especiales, ofrecerles
promociones en días señalados, hacer que se sientan especiales.
- Habilitar todos los métodos de pago que sea posible. Pasarela de pago con tarjeta,
PayPal, transferencia, contra reembolso, etc. Hay usuarios que están
acostumbrados a utilizar un único método de pago y sería una pena que se pierda
una venta por no poner a su disposición su favorito.
- Evitar el contenido duplicado cuando se escriba las descripciones de los productos.

No copiar las descripciones de la página oficial de la marca o de otras tiendas
online. Escribir las ideas y comentarios propios, siendo lo más descriptivo posible y
utilizando palabras clave para el posicionamiento SEO.
- Utilizar llamadas a la acción en toda la web para incentivar que los usuarios realicen
la acción de compra. Emplear un lenguaje cercano y atractivo, que incite a hacer
clic de un modo natural. Más que a comprar, motivarles a descubrir las cualidades
de los productos.
- Estudiar las conductas de los usuarios. Analizar, monitorizar. Observar cuáles son
las categorías de productos más vendidas y las rutinas más habituales de los
usuarios dentro de la tienda y reestructurar, rediseñar, de modo que la web se
parezca cada vez más a lo que los usuarios esperan de ella.
- Fomentar las interacciones por parte de los usuarios y clientes. Intentar que hagan
reviews, reseñas, comentarios y valoraciones de los productos, ofrecerles a cambio
algún descuento o ventaja. Dar una dimensión social al eCommerce puede ser
extremadamente ventajoso. Dar visibilidad a la tienda en redes, permitir el
marketing de recomendación y aumentar la confianza en nuevos clientes.
- Ser creativo. Se pueden desarrollar muchas estrategias en redes sociales que van
mucho más allá del típico “comparte esta imagen en tu muro y participa en un
sorteo”. Crear comunidad, convertirse en el Community Manager de la propia marca
y diferenciarse del resto con ingenio. Evitar ser invasivo. Tener fe en el Marketing
de Contenidos.

DISEÑO PARA LA WEB
VII. TRABAJAR CON PLANTILLAS EN WORDPRESS.
7.1. Manejo de Plantillas y Blogs.

7.2. Integración de Plugins y Estadísticas.
7.3. Implementar WordPress desde PenDrive y USB.

- XAMP, WordPress.
- Reconocer el manejo de plantillas básicas y premium.

- Reconocer el manejo de los plugins y Google Analytics.
- Reconocer la Instalación de WordPress desde unidades extraíbles.
7.1. MANEJO DE PLANTILLAS Y BLOGS.
CÓMO Y DÓNDE ELEGIR PLANTILLAS DE WORDPRESS.

1. Entrar en Themeforest, para opinión de muchos desarrolladores, esta es la mejor
plataforma donde comprar temas para WordPress. Aunque hay otras como Elegant
Themes.
2. Hacer clic en la pestaña WordPress para empezar a buscar entre todo el catálogo
enorme de plantillas. Se puede restringir la búsqueda haciendo clic en la parte
izquierda, para ir directamente a plantillas corporativas, e-commerce, blog,
magazine, etc.

DISEÑO PARA LA WEB
3. Una vez que se encuentre alguna que pueda parecer interesante, se le deberá de
hacer clic. Aquí se verá un resumen de lo que ofrece la plantilla y un enlace (Live
preview) en el que se puede ver cómo funciona la plantilla con contenido ficticio. En
la parte derecha se tiene una ficha con el precio, fecha de creación y última
actualización, características y compatibilidades.
¿Qué es un tema o plantilla?

Se trata del diseño predeterminado que tendrá la web, estructura, funcionalidades,
cabeceras, menús, áreas de contenido, colores, tipografías, etc. Elegir una plantilla no
significa que la web deba ser algo poco creativo y que todos los usuarios que compren
la plantilla tengan que hacer una web similar. Una plantilla sirve para partir de una
buena base a la hora de diseñar. Una buena plantilla, que tenga un aspecto moderno y
funcional, que incluya elementos atractivos, que cumpla las reglas de usabilidad y
tenga una buena codificación en cuanto a los estándares oficiales y al posicionamiento
SEO supone comenzar en el buen camino.
CONSEJOS PARA ELEGIR PLANTILLA DE WORDPRESS.
1. Buscar una plantilla que tenga bastantes descargas. Las plantillas muy
descargadas suelen ser sinónimo de calidad.
2. Mirar la fecha de creación. Que no sea muy antigua (no más de dos años) y, muy
importante, la fecha de actualización. Asegurarse de que se compra una plantilla
que sea actualizada habitualmente, pues esto significa que el desarrollador sigue
perfeccionándola y corrigiendo eventuales fallos. Si la fecha de actualización es
superior a 6 meses es posible que esa plantilla esté “abandonada”, es decir, cuando
se esté diseñando y se tenga un problema o una duda, quizá no se reciba un
soporte adecuado.
3. Asegurarse de que se trata de una plantilla responsive (se adapta a todos los
dispositivos) y que es compatible con todos los navegadores principales del
mercado (aunque se ponga que es compatible con Explorer, abrir la plantilla en este
navegador y comprobar que todo va bien, a veces la “joya” de Windows suele dar
sorpresas).
4. Mirar en la parte izquierda las cosas que incluye. Cantidad de demos disponibles,
es decir, todos los diferentes tipos de web que se pueden hacer con la plantilla y
contenido demo, esto es, páginas y secciones ya construidas para tener una base
sobre la que comenzar a diseñar. También se debe tener en cuenta que incluya
plugins Premium de pago de modo que se adquiera funcionalidades muy
interesantes de manera gratuita ya incluidas en el tema. Y muy importante, que
traiga integrado un plugin de maquetación visual, de manera que se pueda diseñar
y maquetar las secciones con facilidad, lo cual hace la tarea más sencilla y permite
alcanzar un resultado profesional en los diseños. De todos ellos, el favorito de
muchos es sin duda Visual Composer por su calidad, fiabilidad y profundidad.

DISEÑO PARA LA WEB
Algunos de los elementos que se pueden insertar a un clic con Visual Composer.
5. Ir a la pestaña de comentarios de la plantilla y observar lo que dice la gente y la
frecuencia con la que el desarrollador responde a las preguntas de los usuarios. Un
truco: teclear en el buscador del foro palabras como “error”, “problem”, “bug”, etc. Si
el buscador devuelve una cantidad desproporcionada de mensajes de usuarios que
incluyen estas palabras es síntoma de que la plantilla tiene muchos problemas y
quizá sería conveniente que se busque otra.
6. Mirar las capturas de pantalla que incluye el vendedor y observar cómo es por
dentro la plantilla, cómo son las secciones, si incluye muchas opciones de
configuración, etc.
AJUSTAR LAS OPCIONES BÁSICAS DE LA PLANTILLA.

Las plantillas de WordPress suelen incluir una sección de opciones del tema, donde se
puede configurar aspectos como logo, colores, tipografías, cabeceras, pie de página,
favicon o icono para la pestaña del navegador, estructuras para el blog, edición de
CSS, etc. Cuanto mejor es una plantilla más amplias son las opciones de
personalización. Una plantilla que no incluya una amplia sección de opciones, hace
más difícil la posibilidad de personalizar la web a gusto, con lo cual limitara bastante.
Este es uno de los motivos por los que es recomendable comprar siempre plantillas
Premium para los proyectos web. Un excelente ejemplo de plantilla Premium que
incluye una completísima sección de opciones es Bridge.
Importante: Antes de comenzar a configurar las opciones de la plantilla, se debe abrir

el manual de uso de la plantilla. Es un archivo que incluyen junto a los demás archivos
de instalación de la plantilla, y suele llamarse Documentación. Las plantillas Premium
suelen incluir una documentación muy detallada.

DISEÑO PARA LA WEB
CREAR UN BLOG DENTRO DE LA WEB WORDPRESS.
1. Ir a Páginas > Añadir Nueva y crear una página de título Blog (o cualquier otro título
que se quiera poner al botón que va a servir para que los usuarios accedan a los
artículos). No es necesario que se cree contenido dentro de la página Blog, a
continuación se explica cómo hacer que esta página muestre automáticamente
todas las entradas que se publique en la web WordPress.
2. Ir a Ajustes > Lectura y en “Página Frontal Muestra”, en Página de entradas
seleccionar la página Blog que se ha creado anteriormente y dar clic en Guardar. A
partir de ahora, esta sección mostrará todas las entradas ordenadas de más
reciente a menos. Muy importante, no olvidar volver a Apariencia > Menús y colocar
esta página Blog en el menú principal para que los usuarios puedan acceder.
Nota: si en lugar de una página web corporativa con una página de inicio, se prefiere
hacer un blog y nada más, en Ajustes > Lectura, en “Página Frontal Muestra”
seleccionar las últimas entradas. Esto hará que el sitio muestre por defecto las
entradas directamente en la página de inicio.
CREAR UN BLOG EN WORDPRESS.

Tener un blog es actualmente una opción excelente para dar a conocer la marca y
traer tráfico de calidad al sitio para generar conversiones. Esto es el Marketing de
Contenidos o Content Marketing, una estrategia basada en conseguir que los usuarios
visiten no por los contenidos comerciales sino por los contenidos de valor.
Publicar buenos posts y dinamizarlos en redes sociales gracias a los usuarios que los
comparten es un modo increíblemente rentable de conseguir visitas y lograr los
objetivos comerciales, es decir, vender los productos. Y puede ser mucho más barato
que invertir en publicidad. Tan sólo se trata de pensar en el usuario, qué contenidos
necesita, qué contenidos pueden funcionar bien en redes sociales y ponerse a escribir.
Algunas empresas no quieren mezclar su blog con su web corporativa y por ello los
alojan en dominios distintos. Muchos desarrolladores coinciden claramente por integrar
el blog dentro de la web comercial, de modo que el tráfico que se trae a las entradas
del blog entra directamente en el dominio principal donde se puede ofrecer servicios y
promociones. Y es un tráfico que viene ya interesado en el área de negocio si se
consigue acertar con la temática de los artículos. Si además se fideliza a los lectores
del blog mediante formularios de suscripción se habrá conseguido construir una
estrategia ganadora.
CREAR ENTRADAS, POSTS O ARTÍCULOS EN WORDPRESS.

La creación de entradas es una de las funcionalidades básicas y principales de
WordPress desde sus comienzos, y es un proceso sencillo y al mismo tiempo muy
potente.

DISEÑO PARA LA WEB
1. Ir a Entradas > Añadir Nueva y crear la primera entrada. Poner un título adecuado
al artículo y escribir el contenido. También se puede añadir contenido multimedia
haciendo clic en Añadir Objeto. Aquí se accede a la librería multimedia en la que se
puede subir cualquier imagen, foto o icono que se quiera. Poner muchos iconos
para adornar visualmente el contenido y ayudar a los usuarios a leer con mayor
comodidad. Añadir imágenes entre los textos muy largos.
2. No olvidar asignar una categoría al artículo en la parte derecha de la zona de
edición. Las categorías deben ser temáticas centrales del sitio, no se debe poner
muchas, es preferible poner nombres descriptivos y genéricos.
3. Añadir una imagen de cabecera principal. Ir a la zona inferior derecha de la zona de
edición de entrada y hacer clic en Imagen destacada. De nuevo acceder a la librería
multimedia. Colocar una cabecera para el post que sea atractiva, con un texto para
aumentar la interacción de los usuarios cuando la vean en redes sociales, con
elementos modernos y gráficamente potentes, bien diseñados. A veces los usuarios
lo primero que ven del post es la cabecera, y de ella puede depender que entren a
visitar el artículo o no.
4. Asegurarse de que se ha dejado marcada la casilla de Permitir Comentarios para
que los usuarios dejen opiniones y exista una interacción. Además, los comentarios
benefician el posicionamiento SEO.
5. Cuando se haya terminado de escribir, darle clic a Publicar. Automáticamente, esta
entrada ya aparecerá en la sección Blog arriba del todo. Ir a Visitar Sitio y hacer clic
en el botón Blog del menú principal para comprobar que la entrada se ha colocado
correctamente en el sitio.
6. Escribir buen contenido, que sea original y útil, que los usuarios compartan, que la
gente lea de verdad de principio a fin y se consiga un tiempo de permanencia alto lo
cual mejorará el SEO. Jamás se debe de copiar ni plagiar contenidos de otros
blogs. Esto dará mala reputación y, muy importante, se penalizará en
posicionamiento SEO.
CONSEJOS PARA ESCRIBIR BUENOS TÍTULOS PARA LAS ENTRADAS

1. Poner palabras clave que tengan muchas búsquedas mensuales. Usar
herramientas como Google Trends, Planificador de palabras clave de Google
Adwords y Keywordtool.io.
2. No escribir más de 60 caracteres. De este modo, el título no quedará cortado
cuando se vea en los resultados de búsqueda de Google.
3. Incluir palabras que inviten a hacer clic. Incluir promesas que luego se cumplan
dentro del contenido.

DISEÑO PARA LA WEB
DESCARGAR E INSTALAR UNA PLANTILLA EN WORDPRESS DE DIFERENTES

MANERAS
Las plantillas, temas o themes, (suelen llamarlas de esta manera) son la cara de la
página web, lo que ven los visitantes, lectores o usuarios y envuelve las publicaciones
con un aspecto distintivo. WordPress tiene miles de ellas para todos los gustos y elegir
el adecuado para la página web y su temática será parte del éxito.
PASOS PARA ELEGIR UNA PLANTILLA DE WORDPRESS
PLANTILLA DE WORDPRESS GRATIS O PREMIUM.

Esta es la primera pregunta y una de las más complicadas. Desde la experiencia de
los diseñadores y desarrolladores web, se recomienda que se elija una plantilla
Premium, a menos que se apetezca el fascinante proceso de la edición de código de
WordPress, que puede resultar muy satisfactorio (y lento). Plantilla de wordpress
Premium:
- Su precio es irrisorio: Los precios son tan bajos por algo tan bien hecho, que no
se debería plantease otra cosa jamás. Se habla básicamente de cantidades entre
los 30€ y los 60€. Además del tiempo que se va a ahorrar, el resultado va a ser
mucho mejor con un esfuerzo muy parecido.
- Sus funciones abarcan muchas configuraciones: Las plantillas gratuitas,
generalmente, vienen con las funciones básicas implementadas, suficientes para
muchos blogueros que se estén iniciando. No obstante, para funciones más
avanzadas que se vayan a necesitar, habrá que realizarse mediante código o
plugins. Es mucho más cómodo tener todo incluido en el panel de control.
DISEÑO WEB ADAPTATIVO DE LA PLANTILLA.

Independientemente del tipo de página web o blog que se vaya a desarrollar en
WordPress, hay una característica que se debería ser obligatoria al elegir la plantilla:
Responsive Web Design, o lo que es lo mismo, diseño web adaptativo. Los internautas
se conectan cada vez más desde su teléfono móvil o su tableta, por lo que las páginas
web deben saber adaptarse a las nuevas modalidades de conexión. Cada terminal
tiene características y resoluciones de pantalla propias que hacen que la visualización
de un sitio web sea diferente. Esto implica darle una vuelta al enfoque de creación de
la página web para anticipar mejor las diferentes limitaciones relacionadas a cada
soporte. El diseño web adaptativo es actualmente una solución ineludible si se quiere

DISEÑO PARA LA WEB
conservar una buena presencia en internet y cualquiera que sea el soporte de

navegación usado por el cibernauta.
Pero ¿Cómo saber si un tema es adaptable a diferentes dispositivos? Lo normal es

que ponga bien claro “responsive design“ o “diseño responsive” en la imagen
destacada o en la descripción de la plantilla, aunque lo mejor es trabajar y probar uno
mismo la demo de la plantilla desde varios dispositivos (se puede usar estas
herramientas para probar una página web en dispositivos móviles). Si da la casualidad
de que se tenía creada la página web o blog y se necesita usar obligatoriamente una
plantilla que no sea responsive o se ha comprado un theme que no es adaptable,
existen plugins de WordPress como el WPTouch, que crean una versión de la página
adaptada a cualquier dispositivo móvil (de hecho, dispone de una versión PRO muy
interesante).
NIVEL DE PERSONALIZACIÓN Y EDICIÓN DE LA PLANTILLA

Si no se quiere manchar las manos editando el código de la plantilla de WordPress, se
debe de encontrar una que ofrezcan todas las características que se necesite:
- Cambiar fácilmente la tipografía y los esquemas de color: Normalmente las

plantillas vienen muy limitadas en este aspecto, aunque existen ciertas plantillas
que permiten escoger entre cientos de familias de fuentes de Google Fonts.
- Disponer de sidebars, tanto en lado izquierdo como en el derecho: En función
de cuánto contenido extra se desea mostrar mediante widgets, este punto es más
importante de lo que parece, sobre todo si se quiere una página dinámica, con
llamadas a la acción que inciten al usuario a seguir navegando por la página.
- Fácil personalización de la cabecera de la página web o blog: Se puede
parecer algo de “principiante”, pero todavía existen plantillas de wordpress en el
mercado que no dejan hacer este paso fácil y cómodo. Se necesita una plantilla de
wordpress que permita ubicar bien el logo y el título de la página sin demasiadas
restricciones de tamaño.
- Sección de blog con un diseño moderno y funcional: Si la página de inicio es
estupenda pero el blog es un caos, se debe de olvidar de esa plantilla.
- Formularios de contacto y comentarios personalizables: Aunque este punto no
es tan importante, porque hay plugins que hacen un buen trabajo en este aspecto
sin demasiada carga para la página, como siempre es mejor que “venga de fábrica”,
lo que permitirá tener una página más rápida y recibir opiniones y conectar con los
lectores de una manera más cercana y personal.
- Buen soporte para vídeo e integración con YouTube y Vimeo: Es importante
que al incrustar un video éste sea adaptable, que la ventana del reproductor se
ajuste al tamaño, igual que el resto de la plantilla responsive.
- Variedad de Shortcodes: Los shortcodes son pequeñas frases de código que
permitirán presentar los contenidos de diferentes maneras visuales y de una
manera muy sencilla.
- Integración de opciones para redes sociales: Es importante que el usuario
pueda compartir el contenido fácilmente en las redes sociales redes sociales.

DISEÑO PARA LA WEB
- Diseños de página predefinidos: Cuando se crea una nueva página, es

importante que la plantilla de wordpress cuente con diseños (templates) que se
pueden elegir para organizar rápidamente las funciones: página de contacto, home
page, portfolio, página de tamaño de ancho completo.
SOPORTE PARA RESOLVER LAS DUDAS.

Este apartado es prácticamente de uso exclusivo de plantillas de pago y no todo el
mundo lo necesita, pero hay casos en los que es un factor crítico. Si se es un
desarrollador con poca experiencia seguro que se necesitara alguien que esté ahí para
resolver las dudas cuando se instale y configure el WordPress.
DOCUMENTACIÓN ACCESIBLE Y COMPLETA.

A lo largo del proceso de instalación y configuración es normal encontrarse con
problemas, sobretodo en plantillas con muchas opciones de personalización o
funcionalidades avanzadas. Asegurarse de que el tema esté bien documentado para
que se pueda avanzar sin dejarse tanto esfuerzo en cada paso.
Nota: Observar cuando ha sido la última vez que se ha actualizado la plantilla, huir de
temas que no se actualicen con frecuencia.
VALORACIONES Y OPINIONES POSITIVAS.

Sobre el papel el tema puede parecer mejor o peor, pero no hay nada como leer las
opiniones de usuarios que ya lo han utilizado. Eso ayudará a saber si presenta
problemas serios o si hay quejas importantes que no se están resolviendo.
PÁGINAS PARA COMPRAR PLANTILLAS DE WORDPRESS.

Una vez que se tiene elegida una plantilla de calidad, que no de problemas, se
procederá a adquirirla. Las páginas que se recomiendan son para comprar themes
Premium o de pago. Las 3 ofrecen muy buenos precios y plantillas de altísima calidad.
LAS MEJORES PLANTILLAS PREMIUM DE WORDPRESS.
Si se está pensando en crear una página web de empresa utilizando WordPress, se

necesitará una plantilla con calidad profesional y con las funcionales necesarias para
que el negocio tenga éxito en Internet. Para ayudar a encontrar esa plantilla adecuada
para la empresa, se ha recopilado las que al entender de muchos diseñadores web

DISEÑO PARA LA WEB
son las mejores Themes WordPress Premium. La mayoría de las plantillas

seleccionadas cuentan con un bonito diseño, con facilidad de personalización (color de
fondo, logotipo, botones, etc.) con las mejores técnicas de programación web como
lenguajes HTML5 y CSS3, con funcionalidades sencillas de implementar por cualquier
usuario (banners dinámicos, formularios de contacto, etc.), versión Responsive, para
que la página web se pueda ver en todos los dispositivos móviles, con posibilidad de
optimización SEO y soporte drag-and-drop (pinchar y soltar, ideal para subir imágenes
desde la PC al theme).
Son plantillas WordPress Premium recientemente desarrolladas, por lo tanto, con las
últimas técnicas de código e implementación. El que cuenten con un diseño web
adaptado a móviles o Responsive Design hace que estos Themes WordPress
Premium sigan las nuevas tendencias de diseño. Con ello se asegura de que la página
web se adaptará automáticamente a cualquier tipo de pantalla de dispositivo que el
visitante esté utilizando para navegar por ella (iPhones, iPads, smartphones, portátiles,
etc.).
Dado que cada vez más las personas navegan a través de dispositivos móviles por
Internet para obtener información, esta es la tendencia más importante en diseño web.
Otra ventaja de usar una de las plantillas de esta recopilación es que pueden funcionar
correctamente con los plugins de WordPress (extensiones) más importantes y
necesarios hoy en día para cualquier página web de empresa. Por ejemplo, si el
negocio necesita realizar ventas online, en esta lista se va a encontrar themes que son
compatibles con plugins wordpress ecommerce como WooCommerce, con lo que
fácilmente se tendrá una tienda virtual completa y con todas las características
necesarias para que se pueda vender todo tipo de productos o servicios por Internet.
Además, la compatibilidad de estas plantillas con extensiones similares permitirá
integrar fácilmente en la página carritos de la compra, pasarelas de pago, opciones de
envío, gestión de pedidos, y mucho más. Afortunadamente, hay una gran cantidad de
temas Premium de WordPress sorprendentes y útiles, creados específicamente para
páginas web de noticias, revistas o incluso páginas que combinan a la vez noticias y
revistas. Se ha recopilado los mejores temas de WordPress para revistas y periódicos,
que seguro ayudarán a ahorrar tiempo a la hora de elegir el tema más adecuado para
la empresa.
Descargar la plantilla.
Normalmente, cuando se va a comprar una plantilla o descargar una del repositorio de
WordPress, estará en forma de fichero comprimido (.zip). Se descarga, se
descomprime en el ordenador y – una de dos – una carpeta o un fichero sencillo. En
algunos casos vendrá acompañado de un fichero de texto con explicaciones acerca de
su uso e instalación, es recomendable que se lea siempre.

DISEÑO PARA LA WEB
Seleccionar el tema de Themeforest y hacer clic en “All files & documentation” o “Installable
WordPress file only” (ambas son correctas).
Descomprimir los archivos que se han descargado y revisarlos.
El archivo principal del tema de WordPress suele ser un fichero con extensión .php
donde, si se abre con un editor de texto, se verá que también suele dar información de
su función, autor, versión, etc. Esta información es la que se suele visualizar en la
ventana de administración de plugins del blog.
SUBIR E INSTALAR PLANTILLAS DE WORDPRESS.COM

Si la web está alojada en el servidor de WordPress.com, las plantillas están más
restringidas que en un hosting propio. Al ser un servicio gratuito no se puede instalar
nuevos temas, ya sean gratuitas o de pago. Sólo se permite escoger entre la inmensa
variedad de plantillas gratuitas o de pago que ofrece WordPress. De hecho, permite
elegir entre casi 500 plantillas. El proceso es muy fácil, y además WordPress ofrece 2
opciones.
 INSTALAR LA PLANTILLA CUANDO SE CREA UN BLOG GRATIS NUEVO.

La primera opción es durante el proceso de creación de un blog gratis nuevo en
WordPress.com. Cuando se hace clic en el botón “Añadir nuevo WordPress”,
enseguida aparecerá la opción de instalar una plantilla. Esto facilita el proceso para
usuarios principiantes, ya que se puede dejar el theme listo para usar en muy pocos
pasos.

DISEÑO PARA LA WEB
Cuando se crea un nuevo blog gratuito en WordPress se tiene la opción de elegir la plantilla
directamente.
 INSTALAR LA PLANTILLA WORDPRESS DESDE EL PANEL DE

ADMINISTRACIÓN DE WORDPRESS.COM
Esta opción es la más habitual, ya que no siempre se crea un blog nuevo. Para
cambiar o instalar una nueva plantilla en la instalación de WordPress, se debe de
dirigir al menú principal en “Personalizar”, en el lateral de la izquierda, y hacer clic
en la sección “Temas”.
Elegir el tema que más le guste entre la amplia variedad. Se cuenta con un
buscador, útil si se ha aconsejado el nombre de una plantilla para localizarla
rápidamente entre las 402. Asimismo, está clasificado por tendencias, temas
populares y novedades. Una vez que se ha elegido la plantilla, el proceso es
sencillo: pasar el mouse por encima de la plantilla y hacer clic en el botón
“Previsualizar” que aparece encima de la imagen.
Instalar la plantilla desde el administrador en “Personalizar > Temas” dando clic en

“Previsualizar”

DISEÑO PARA LA WEB
Configurar la plantilla de la instalación de WordPress: Colores, fondos, menú, etc., y hacer clic en
“Guardar y activar”
Una vez seleccionado el Theme, hacer clic en “Probar y personalizar”
 INSTALAR LA PLANTILLA VÍA UN CLIENTE FTP.

Si por cualquier circunstancia (a veces ocurre) fallara la instalación de la plantilla, se
tiene otra opción que no falla nunca. Lo primero de todo es tener un cliente FTP
para el sitio. En la inmensa mayoría de hosting puede ser creado por el mismo
usuario. Si no se sabe, se puede pedir ayuda a la empresa con la que se tenga
contratado el hosting. Después, hará falta un programa para conectar con el
servidor, por ejemplo, el cliente de FTP FileZilla (elegir la opción client), que es
gratuito y muy fácil de manejar.
Antes de subir los archivos de la plantilla o theme, leer bien el archivo readme por si
hubiera alguna instrucción especial. Asimismo, se tendrá que descomprimirlo en
una carpeta que normalmente llevará el nombre de la plantilla. En el servidor,
ubicarse en la carpeta pública, normalmente “public html“, y buscar la carpeta “wp-
content/themes“. En este directorio es donde se va a subir la plantilla nueva desde
el ordenador.

DISEÑO PARA LA WEB
Elegir la carpeta del hosting que contenga los archivos públicos (normalmente public html o algo
parecido)
Elegir la carpeta “wp-content”
Elegir la carpeta “themes”
Seleccionar la plantilla (ya descomprimida) y arrastrarla a esa carpeta

DISEÑO PARA LA WEB
Una vez realizado este paso, dirigirse a menú “Apariencia> Temas” y debería de
aparecer la plantilla que se acaba de subir. En caso afirmativo, se activara el tema y
se ha terminado. En caso contrario, revisar el readme y comprobar si se ha subido
todos los archivos dentro de la carpeta del tema.
 INSTALAR LA PLANTILLA DESDE EL REPOSITORIO OFICIAL DE

WORDPRESS.
A la hora de instalar una plantilla del repositorio oficial de WordPress, dirigirse a
“Apariencia > Temas“, donde se tendrá acceso directo al repositorio de plantillas
gratuitas de WordPress. Si ese es el deseo (es recomendable que se invierta algo
de dinero en una plantilla Premium, no son nada caras y darán un aire muy
interesante a la página web o blog), buscar la que más les guste y hacer clic en
“Instalar“.
Elegir la plantilla gratuita del repositorio de WordPress que más les guste y hacer clic en “Instalar”
Hacer clic en “Activar” para disfrutar de la nueva plantilla
Elegir cualquiera de las opciones, todas son fáciles de ejecutar. La opción de subir la
plantilla desde WordPress a veces da error, por lo que es conveniente aprender a
hacerlo a través del cliente de FTP, porque de esa manera se podrá hacer esto y
muchas cosas más, sin tener que tocar nada en el administrador de WordPress.

DISEÑO PARA LA WEB
PERSONALIZAR EL BLOG CON PLANTILLAS.

ADAPTAR EL TEMA PREDETERMINADO.
La forma más rápida y sencilla de empezar a personalizar el blog es modificar el tema
predeterminado de WordPress, “Twenty Thirteen”. Si aún se conserva el panel de
bienvenida en el Escritorio, se puede presionar en el gran botón azul que dice
‘Personaliza tu sitio’. Si no, dirigirse a Apariencia> Personalizar. En seguida se verá el
editor de temas en tiempo real.
Utilizar los paneles desplegables de la izquierda para modificar el título y subtítulo de

la web, alterar el esquema de colores, cambiar la imagen de fondo de la cabecera o
elegir qué mostrar en la portada. Todo lo que se cambie se irá actualizando en el panel
de pre visualización de la derecha. Cuando se esté satisfecho con las modificaciones,
pulsar en Guardar y publicar. Utilizar una imagen propia para la cabecera.
Si se quiere que la cabecera del blog tenga un fondo más personal, quizá no se quiera
utilizar los predeterminados. Esta vez, dirigirse a la sección Apariencia> Cabecera y
seguir las instrucciones en pantalla para subir una propia imagen. Tener en cuenta la
resolución recomendada o, de lo contrario, se tendrá que recortar.
En esta sección también se puede cambiar el color que se utiliza en el texto de la

cabecera. Sólo se tiene que ir hasta la parte de debajo de la página y escoger un
nuevo color de la paleta interactiva. Si no se quiere ningún texto, desactivar la casilla
que hay justo encima. Cuando se termine de realizar estas acciones, presionar el
botón Guardar cambios.

DISEÑO PARA LA WEB
ENCONTRAR UN TEMA A LA MEDIDA.

El estilo predeterminado de WordPress es lo suficientemente neutro como para
funcionar bien con muchos tipos de contenidos pero, siendo honestos, por mucho que
se personalice nunca será demasiado ‘único’. Como diseñar un tema desde cero está
fuera del alcance de un usuario convencional, la otra solución es utilizar un tema
creado por otras personas. Dirigirse a Apariencia> Temas y, en la parte superior,
cambiar a la pestaña Instalar temas.
Lo primero que se verá es el buscador, lo que quizá despiste a más de uno. ¿No sería
mejor ofrecer de primeras una selección con los temas más populares? No se debe de
desesperar, se puede dar clic en el enlace Destacados de la parte superior para ver
los mejores temas de WordPress y encontrar ese diseño que se estaba buscando.
INSTALAR EL TEMA QUE MÁS LES GUSTE.

El listado muestra una miniatura más o menos grande que puede servir como anticipo
del aspecto final del diseño, pero nunca se sabrá si es el tema que se buscaba hasta
que se pruebe en el propio blog, ¿verdad? Aunque esto no es posible, si se pulsa en el
enlace Vista Previa que hay bajo cada imagen, se podrá ver cómo le sienta a una web
genérica, ¡sin tener que instalarlo! Algo es algo.

DISEÑO PARA LA WEB
Se puede ir probando con todos los candidatos y cuando se encuentre uno que sea
conveniente, presionar en el botón Instalar de la barra lateral.
ACTIVAR EL TEMA Y ADÁPTARLO.

Esperar a que WordPress termine de bajar los paquetes y, cuando se termine, se
podrá pinchar en el enlace Activar. Acto seguido, el asistente llevará a la vista principal
del menú Apariencia. Dar clic en el botón Personalizar del tema que se acaba de
activar y revisar las opciones que éste ofrece, ya que, como se ve, dependen de quién
haya creado el tema.
LOS MEJORES TEMAS PARA WORDPRESS.

Aunque el catálogo de WordPress ofrece un número bastante aceptable de temas, la
red aloja muchos más que no están recogidos ahí. Hay muchas agencias de diseño
que lanzan un tema nuevo cada mes con una calidad realmente sorprendente. No
solamente son verdaderas joyas estéticas, sino que además ofrecen funcionalidades
extendidas de personalización y usabilidad para los usuarios. Eso sí, operan bajo un
modelo de negocio basado en suscripciones, por lo que no son gratuitos.

DISEÑO PARA LA WEB
CREAR UNA PÁGINA WEB CON WORDPRESS.

Cuando se instala WordPress, por defecto, viene con una entrada de blog y una
“Página de ejemplo” creadas por default. La página de ejemplo se la puede ver en la
sección “Páginas” del menú lateral izquierdo del panel de administración de
WordPress.
Si se ingresa a esta sección, se puede observar que aparece una lista de las páginas
creadas (en este caso una sola que es la página de ejemplo) y ofrece además la
posibilidad de crear más páginas en el enlace “Añadir nueva”. Si se acerca el cursor
del mouse al título se podrá observar que se despliega un menú con las opciones:
Editar, Edición rápida, Papelera y Ver. Hacer clic en Editar.
Antes de continuar, y para ahorrar algo de tiempo, vamos a mostrar tres pequeños
pasos que se tienen que realizar para que se configure las URL’s de cada página que
se esté creando optimizadas para SEO. Se debe tener en cuenta que estos pasos solo
hay que realizarse cuando WordPress se encuentra instalado en un servidor remoto,
es decir, cuando se encuentre online.
• Primero: Dirigirse a la sección “Ajustes” y entrar en el apartado “Enlaces

permanentes”. Seleccionar “Nombre entrada” y se verá que en el campo “Estructura
personalizada aparecerá algo como esto: /%postname%/. Hacer clic en “Guardar
cambios”.
Con esto se estará indicando a WordPress que las URL de las páginas tendrán el
nombre del título de la página.
• Segundo: En la misma sección de Ajustes entrar en el apartado “Lectura”. En

“Página frontal de muestra” seleccionar la opción “Una página estática” y en el
campo desplegable “Página inicial” seleccionar “Página de ejemplo”. Hacer clic en
“Guardar cambios”. Al seleccionar esta opción, WordPress tomará como página de
inicio del sitio la página “estática” que se ha indicado en el campo desplegable. Si
se tuviera más páginas creadas, aparecerían en este campo desplegable.

DISEÑO PARA LA WEB
• Tercero: Dirigirse a la sección “Plugins” y entrar en el apartado “Añadir nuevo”.

Buscar un plugin con el siguiente nombre: Custom Permalinks, instalarlo y activarlo.
También se puede descargar desde la siguiente dirección web:
http://wordpress.org/plugins/custom-permalinks/ y subirlo mediante FTP, instalarlo y
activarlo.
Plugin Custom Permalinks para URL’s amigables
Descripción de una página en WordPress
1. Campo del título: Aquí es donde se debe escribir el título de la página. Este título
será el H1 respectivo de la página.
2. Enlace permanente: El plugin “Customs Permalink” añade este campo para que se
escriba una URL personalizada de la página. Al ser esta la página de inicio no se
tendrá que escribir nada ya que la página de inicio coincide con el dominio. Este
plugin además permite añadir cualquier terminación como .html, .php o la que se
quiera a la URL. Si no se instala este plugin, no pasa nada. WordPress permitirá
personalizar la URL, que no necesariamente tiene por qué coincidir con el título,
pero no dejará utilizar ninguna terminación. Por defecto se asignará la barra “/” al
final de la URL.
3. Se tienes 2 pestañas, Visual y Texto. En modo “Visual” se podrá trabajar

como en “Word”: Se podrás escribir tranquilamente, usar los atributos de texto
que ofrece WordPress e incluso seleccionar directamente “shortcodes” que
ofrezcan otras plantillas web para WordPress. Este modo es más recomendable
para usuarios que no estén familiarizados con HTML. En modo “Texto” se tiene más
ventajas si se está familiarizado con HTML ya que se permitirá añadir etiquetas
HTML y personalizar el texto como se guste.

DISEÑO PARA LA WEB
4. Atributos de texto: Al igual que en Word, WordPress te ofrece unos atributos para
que se personalice el texto como negritas, cursiva, listas, enlaces entre otros.
5. Contenido: En este espacio es donde se puede agregar todo el contenido, textos e

imágenes, que se desee que aparezca en la página. Se debe tener en cuenta que,
aunque se trabaje en modo “Texto”, por defecto no se podrá añadir ningún tipo de
contenido dinámico, como código PHP, ya que WordPress no lo permite por
defecto.
6. Comentarios: Al igual que si se tratara de un blog, WordPress ofrece la posibilidad

de que se añada un formulario de comentario a cada página que se cree.
7. Publicar: En este apartado se puede ver las estadísticas de la página como el

estado y fecha de publicación además de poder bórralo (enviarlo a la papelera) y el
botón “Actualizar” (“Publicar” si se está creando una nueva).
8. Atributos de página: Este apartado parece una buena idea al momento de

desarrollar páginas web muy grandes ya que permite agregar un orden (enumerar
las páginas) y asociarlas a una página “madre” (“Superior”) para llevar un control de
la estructura de la página.
CREAR UNA PÁGINA CON WORDPRESS.

WordPress es un potente software diseñado originalmente para funcionar como blog
pero tiene la capacidad además de adaptar su funcionamiento para la creación de
páginas web tanto estáticas como dinámicas. Antes de comenzar a crear una página
es necesario que se familiarice con la configuración básica de WordPress y se
conozca cómo funciona su panel de administración.
¿POR QUÉ CREAR UNA PÁGINA?

Es muy importante conocer la finalidad que va a tener el sitio web antes de crearlo.
Teniendo claro lo que se va a ofrecer a los usuarios o clientes, se puede desarrollar
una página web, un blog, un portfolio o cualquier tipo de portal que presente los
servicios o ideas de la manera más adecuada.

DISEÑO PARA LA WEB
Una “página web” básicamente está compuesta por un logo, menú principal y el
contenido y se puede que un segundo menú en el lateral de la página. Esta, a
diferencia de un blog, se caracteriza por mostrar un contenido “estático”, aunque se
puede convertir en dinámico mediante el uso de plugins, pero básicamente presenta
un contenido que se actualiza manualmente en la mayoría de casos. Cuando se
trabaja con WordPress para crear páginas, se debe de tener en cuenta solo las
funciones básicas que ofrece WordPress, crear una página y a esta se le tiene que
asociar un enlace de menú para que esté vinculada desde cualquier parte de la
página.
PUBLICAR UNA NUEVA PÁGINA EN WORDPRESS.

Hasta ahora se ha visto cómo se compone una página ya publicada en WordPress
pero ahora vamos a ver qué diferencias hay cuando se publica una nueva página. En
la sección “Páginas” hacer clic en el apartado “Añadir nueva”. Se verá que “casi todo”
es como la página anterior que ya estaba publicada excepto porque no aparece el
campo de enlace permanente y el botón para guardar cambios dice “Publicar”.
También se puede observar que en “Comentarios” están las dos casillas marcadas
que por defecto así las tiene WordPress.
Escribir algo en el título y en el contenido y WordPress mostrará automáticamente el

campo “Enlace permanente” para que se asigne una URL a esta página. Se observara
que WordPress asignará una URL provisional como esta “?page_id=97” (id puede
tener cualquier valor) la cual se puede y se debe cambiar para tener URL amigables.
Se puede escribir algo como “pagina-prueba.html”.
En comentarios se debe desmarcar las casillas si se desea. Esto se deja a discreción

y elección del desarrollador. En “Atributos de página” se escribe en “Orden” el Numero
2 para que sea la segunda página y hacer clic en “Publicar”. En el apartado “Publicar”
se tiene la opción de programar la página para que se publique automáticamente el
día y la hora que se quiera pero esto en página no tiene sentido. Tiene más sentido
hacerlo en un blog. Se puede observar que aparece un mensaje que indica que la
página ha sido publicada y el botón “Publicar” ha cambiado a “Actualizar”. Si se hace
clic en “Todas las páginas” se podrá ver la nueva página justo debajo de la página de
ejemplo.

DISEÑO PARA LA WEB
Listado de páginas creadas en WordPress
CREAR UN MENÚ EN WORDPRESS.

En modo “blog”, WordPress trae por defecto el widget “Entradas recientes” que es la
manera de enlazar con un nuevo artículo automáticamente sin tener que hacer nada
más. En modo “página” este widget no funciona. Para que la nueva página creada se
pueda ver, se necesitará crear un enlace desde el menú principal, por ejemplo, de la
página. Para esto, dirígete a la sección “Apariencia” y hacer clic en el apartado
“Menús”.
Menú en WordPress
CREAR UN MENÚ EN WORDPRESS.
Menú en WordPress
Como se puede observar en la imagen, una estructura de menú parcialmente formada

por WordPress. En “Nombre del menú” se escribe el nombre que se quiera para el
menú principal (por ejemplo Menú Principal). En “Estructura del Menú” se tiene 3
ítems: Inicio, Página de ejemplo y Otra página de ejemplo. Inicio y Página de ejemplo
son las mismas ya que WordPress toma la primera como su Inicio y luego las toma
todas como páginas secundarias. Desplegar Página de ejemplo y borrarla y hacer clic
en “Crear menú”.

DISEÑO PARA LA WEB
Asignación del menú principal a la plantilla
Una vez creado el menú se podrá observar unas nuevas opciones: Añadir páginas
automáticamente, la cual irá añadiendo las páginas al menú a medida que se vayan
creando en el apartado “Páginas” y Ubicación del tema, el cual se debe seleccionar
para indicarle a WordPress que este es el menú principal de la plantilla que se está
utilizando. En este caso se está utilizando la plantilla Twenty Thirtheen de WordPress
la cual sólo admite un menú. Clic en “Guardar menú”.
Front End final de WordPress funcionando como página
Si se sitúa ahora al Front End del WordPress se podrá ver el menú que se ha creado
anteriormente.
Conclusión:
Esta peculiar característica que posee WordPress para crear páginas le convierte en
“casi” el mejor CMS que existe actualmente. Es ligero y sencillo de usar y con algunos
plugins puede funcionar desde tienda online hasta una red social. Es tener las
herramientas a mano y un poco de creatividad para desarrollar infinidad de proyectos
con WordPress.
CREA EL PRIMER ARTÍCULO

Acceder al Escritorio con las credenciales de administrador y entrar en la sección
Entradas > Añadir nueva y se llegará a la pantalla principal de edición.
Alternativamente, se puede usar el atajo del menú superior Nuevo> Entrada. Para
empezar, introducir el título del artículo.

DISEÑO PARA LA WEB
REDACTAR EL PRIMER ARTÍCULO.

WordPress incluye un editor visual (WYSIWYG) para que, desde el propio navegador,
se escriba todos los artículos, posts y entradas que se necesiten. El proceso no puede
ser más intuitivo, así que darle rienda suelta al teclado.
EL EDITOR VISUAL.
Una de las ventajas de los CMS como WordPress es que no se necesita instalar
ningún programa en la PC para usarlos. En el caso de los blogs, esto significa que se
puede escribir directamente en el editor visual. El formato de texto se aplica igual que
en Word: seleccionar el fragmento deseado y usar los botones para ponerlo en negrita,
cursiva, subrayado, tachado, etc. Si se necesita cambiar la tipografía, el tamaño o su
color, se tendrá que activar los controles avanzados con el último botón de la barra de
herramientas.
INSERTAR IMÁGENES.
Siendo honestos, pocos visitantes estarán dispuestos a leer una buena retahíla de
palabras si no se les da un poco de vida. Esto es, adjuntar una imagen relevante de
vez en cuando o, incluso, insertar un vídeo. También conviene incluir alguna negrita en
las palabras clave del artículo y hacer un buen uso de los párrafos y títulos para
facilitar la lectura del texto.
Si se quiere insertar una imagen, presionar el botón Añadir objeto. Se abrirá una
ventana emergente desde la que se podrá subir la imagen desde la PC; solo se tiene
que arrastrarla al diálogo. Procurar que no tenga un tamaño excesivo e introducir
algunos detalles sobre la imagen en el formulario de la derecha. Cuando se tenga todo
listo, presionar en el botón Insertar en la entrada y aparecerá en el editor.

DISEÑO PARA LA WEB
INCRUSTAR UN VÍDEO.
Desde YouTube, accede al vídeo que se quiera insertar y, bajo el reproductor, situarse
en la pestaña Compartir. Elegir la opción Insertar y copiar el código que aparece en el
recuadro inferior.
Volver al editor e insertar una línea en blanco en el lugar donde se quiera insertar el
vídeo. A continuación, en la esquina superior derecha del editor, cambiar a la pestaña
Texto. Sólo se tiene que pegar el código que se acaba de copiar en el lugar deseado.
Cuando se vuelva a la vista normal no se verá el vídeo, pero no hay problema,

aparecerá cuando se guarde el artículo. En cualquier caso, es mejor dejar para el final
todas aquellas tareas que impliquen modificar manualmente el código HTML. Así que,
si se vas a insertar vídeos, se debe de hacer justo antes de guardar la entrada.
ENLAZA CONTENIDOS RELEVANTES

La inserción de enlaces funciona igual que el resto del editor. Seleccionar el fragmento
que se quiere enlazar y dar clic en el botón correspondiente; en este caso, se tiene
forma de eslabón. En la nueva ventana, pegar la dirección web en cuestión y, si es
una página ajena al portal, marcar la casilla “Abrir enlace en una nueva

DISEÑO PARA LA WEB
ventana/pestaña”. Así se abrirá en una pestaña nueva y no abandonarán la web al

seguir el enlace.
Con el objetivo de retener al visitante el mayor tiempo posible, no está de más enlazar
algunas partes del texto a contenido relacionado con la entrada. Por ejemplo, si se
tiene una página de recetas, es muy probable que un lector en la mermelada de fresa
quiera saber cómo se hace una tarta de queso con mermelada de fresa. Aprovechar la
composición del texto para reformular alguna frase y enlazarla a contenido relevante;
eso sí, tampoco se debe de forzar demasiado o quedará artificioso y poco natural.
RELLENA LOS DETALLES DE LA ENTRADA.

Cuando se esté satisfecho con el resultado del artículo, se puede publicar
directamente con el botón azul “Publicar” de la derecha, aunque quizá antes se
debería comprobar cómo ha quedado con el botón Vista previa. No se debe olvidar
marcar las categorías en las que se quiere ubicar la entrada. Aunque se puede
seleccionar todas las que se quiera, no es recomendable marcar más de dos.
SOCIALIZA EL BLOG CON FACEBOOK Y TWITTER.

Las grandes redes sociales acumulan millones de usuarios, lo que les confiere un
potencial de difusión enorme. Un simple like o retweet puede hacer que la última
entrada se haga viral, así que mejor facilitar esta tarea todo lo posible con plugins
sociales diseñados para WordPress.
ACTIVA ALGUNOS PANELES DE JETPACK.

Este plugin ya ha aparecido en el curso actual. Entre otras muchas cosas, incorpora
una serie de herramientas sociales que facilitarán tareas como compartir los
contenidos en los perfiles o añadir widgets para que los visitantes twitteen
directamente desde el blog. Cuando se tenga todo listo, dirigirse al menú Jetpack y
activar el panel Compartir.

DISEÑO PARA LA WEB
7.2. INTEGRACIÓN DE PLUGINS Y ESTADÍSTICAS.
CONFIGURAR EL PLUGIN COMPARTIR.

Acto seguido, presionar en Configurar. Lo primero que se debe hacer es seleccionar
qué servicios se quiere habilitar. Seleccionar uno de los botones de la parte superior
(por ejemplo, el de Facebook) y arrastrarlo hasta la sección inferior.
Repetir el proceso con todas las redes que se necesiten y, más abajo, escoger las
opciones generales del plugin. Cuando se tenga todo listo, presionar en Guardar
cambios. Los botones aparecerán en las zonas de la web que se hayan marcado,
normalmente bajo el texto de la entrada.
MÁS PLUGINS SOCIALES.

Otra estrategia común es enlazar los contenidos desde la cuenta de Twitter. Se puede
hacer a mano o, si se prefiere, confiarle esta tarea a uno de los plugins de Jetpack. En
esta ocasión, se trata del panel Divulgar. También se puede activar las suscripciones
por correo electrónico o incluir un enlace al perfil de Google+. Basta con encontrar el
panel adecuado y activarlo.

DISEÑO PARA LA WEB
INTEGRAR LAS ESTADÍSTICAS DE GOOGLE ANALYTICS

Analytics es uno de los servicios de Google más atractivos para el webmaster.
Proporciona estadísticas muy completas y fáciles de interpretar, por lo que es muy
recomendable para monitorizar las visitas al blog, cómo se comportan los usuarios,
cuánto tiempo invierten en las entradas, etc. Antes de nada, se necesitará un perfil en
Analytics. El proceso es completamente análogo; simplemente se debe recordar
anotar el código de identificación.
La otra parte consiste en instalar un plugin que permita integrar Analytics en

Wordpress. Ir a Plugins> Añadir nuevo y buscar ‘analytics’. Aparecerán bastantes
opciones. Se puede elegir la que se prefiera, pero se debe asegurar de que es
compatible con la versión de WordPress. Por ejemplo, Google Analyticator. Presionar
en Instalar ahora y, luego, actívarlo como de costumbre.
A continuación, presionar en el enlace Settings que aparecerá bajo su entrada en la

sección Plugins. Analyticator permitirá integrar el panel de control de Google Analytics
en Wordpress, pero en realidad no es necesario. Se puede dar clic en el botón
Continue without authentication y, en la siguiente página, cambiar el primer
desplegable a Enabled. Pegar el código de identificación en la siguiente casilla y dejar
el resto como está. Un clic en Save changes activará la monitorización y Google
Analytics empezará a recoger los datos de las visitas.

DISEÑO PARA LA WEB
CLAVES PARA ELEGIR PLANTILLA WORDPRESS PARA EL PRÓXIMO

PROYECTO.
Hacerse con una Plantilla de WordPress Fácil de Modificar.

En el repositorio de WordPress hay bastantes Plantillas que se puede descargar
gratis, pero que dejan mucho que desear si se quiere hacer cambios. Este tipo de
Plantillas WordPress están pensadas para personas de perfil técnico. De tal forma que
se tendrá que “manchar las manos de código” si se quiere realizar algún cambio (por
muy pequeños que sea). Ya sea una persona de perfil técnico o no, resulta bastante
frustrante tener que modificar la plantilla para hacer cambios en lugar de poder hacerlo
desde el propio panel de WordPress. Si se es adicto a lo Gratis probablemente se
puede conformar con una de estas plantillas. Ahora bien, si se necesita hacer
cambios, es recomendable invertir algo de dinero en una plantilla de pago que haga la
vida más fácil.
Necesita una Plantilla diseñada para lo más importante: El Contenido.

Olvidarse de florituras y elementos de diseño que no aporten valor al contenido
principal de la Web. Se debe de buscar una plantilla minimalista para que todo el foco
de la Página Web sea el contenido. Además, hay una regla no escrita que se puede
aplicar al tiempo de carga de una Página Web: cuanto más sencilla más rápida. Si se
quiere que la página web cargue rápido y que la gente lea o compre los productos o
servicios será mejor que se opte por unas plantillas minimalistas.
Soporte para diferentes dispositivos.

Los sitios web normalmente tienen una media del 20% de usuarios que usan
dispositivos móviles (aquí se incluyen teléfonos, tabletas y demás). Si se tiene algún
proyecto en Internet estaría bien que se compartiera en los comentarios el 100% de
usuarios móviles de la Web. Es interesante dejar constancia en los comentarios así
dentro de unos años se podrá mirar atrás y ver cómo ha cambiado el panorama.
Todo un clásico que no pasa de moda: SEO.

Elegir una plantilla con cuidado, no vaya a ser que se descargue unas plantillas que
tengan alguna aberración que impida posicionar bien en buscadores. Hay algunos
fallos a la hora de crear plantillas de WordPress que pueden afectar negativamente a
nivel SEO: menús duplicados, etiquetas HTML inventadas, muchos errores en el
código, etc. Aparecer en los primeros resultados de los buscadores bien merece que
se dedique un tiempo a buscar buenas Plantillas WordPress. Y si se habla de
Plantillas de pago, tener en cuenta que por ser de pago no tiene por qué ser mejores
en este sentido. Hacer el trabajo correcto, buscar una buena plantilla, porque a fin de
cuenta posicionar bien en buscadores es importante para que el proyecto en Internet
tenga éxito.
Soporte para diferentes Idiomas.

Asegurarse que la Plantillas que se compren o se descarguen gratis cuenten con
soporte para diferentes idiomas. Si ésta ha sido desarrollada con cabeza estará
preparada para ser traducida e incluso contará con traducciones incluidas. Por

DISEÑO PARA LA WEB
ejemplo: la Plantilla de WordPress Yourself cuenta con traducciones en inglés, español

y portugués. Además, está preparada para que se pueda traducir a cualquier otro
idioma: Catalán, Gallego, Francés, Alemán, etc. o cualquier idioma que se necesite.
Actualizaciones Disponibles.
Antes de instalar una plantilla para el próximo proyecto o para uno ya existente, se
debe asegurar de que el desarrollador que la ha hecho, proporcione actualizaciones
en un futuro. Teniendo en cuenta que WordPress saca unas cuantas versiones nuevas
cada año es de vital importancia que se tenga en cuenta este factor antes de lanzarse
a instalar una nueva Plantilla de WordPress.
Soporte para resolver las dudas.

Esto suele ser más propio de Plantillas de pago y no todo el mundo lo necesita, pero
hay casos en los que es un factor crítico. Si se es una persona con poca experiencia
seguro que se necesita a alguien que esté ahí para resolver las dudas cuando se
instale y configure las Plantillas WordPress. Otro colectivo que debería tener en cuenta
este factor son los Freelances. Si se dedican a crear páginas para los clientes
utilizando Plantillas WordPress, es clave que se cuente con un proveedor de plantillas
que ayude si se tiene algún problema creando Páginas Web para los clientes.
Además, teniendo en cuenta que a un cliente se le puede cobrar entre S/. 1.000 o S/.
2.000 por crearle una página Web, invertir 50 o 70 soles por una Plantilla que cuenta
con soporte, es una inversión que todo Freelance debería hacer.
LAS 10 MEJORES PLANTILLAS DE WORDPRESS PARA PROFESIONALES.

Si se dedica profesionalmente al diseño web y se están quedando sin ideas, y para
colmo el próximo proyecto es para una gran empresa, estos temas para WordPress
serán de gran ayuda. Su uso básico no es diferente al resto, pero ofrece un mundo de
posibilidades cuando los exprimes al máximo.
#1 X
Sus creadores lo presentan como “el último tema que tendrás que comprar”, haciendo
alusión directa a la versatilidad de este diseño. Incluye tres ‘stacks’ que sirven para
mostrar de qué es capaz esta plantilla. Se puede personalizar los stacks hasta

DISEÑO PARA LA WEB
encontrar el diseño que se buscaba o, si se prefiere, partir de cero y crear uno con el
editor visual. Soporta tipografías personalizadas, interfaz responsive, shortcodes y
todo lo que se pueda imaginar.
URL: http://themeforest.net/item/x-the-theme/5871901
#2 DIVI
Divi ya ha aparecido en una de las listas de plantillas para WordPress, pero se ha

ganado un espacio en ésta sección gracias a su editor in situ y magnífica versatilidad.
Numerosos plugins ayudarán a modelar la portada que se haya esbozado con Page
Builder. Revisar las muestras que hay en la demo, bajo la sección Page Layouts, para
ver de qué es capaz este tema.
URL: http://www.elegantthemes.com/gallery/divi/
#3 NIMBLE
Otra entrega de Elegant Themes, con un aspecto más moderno y desenfadado, lo que
lo acerca más al terreno de las empresas de publicidad y agentes creativos. Por
supuesto, también incluye Page Builder y un sinfín de plugins y animaciones para
enriquecer cualquier sección de la próxima web corporativa.
URL: http://www.elegantthemes.com/gallery/nimble/
#4 COMPANY

DISEÑO PARA LA WEB
El nombre lo dice todo. Este tema se centra en lograr una estética limpia a la vez que
funcional, sin olvidarse de los detalles técnicos: 100% responsive, efectos CSS3 muy
cuidados y una paleta de colores compensada. Los shortcodes te ayudarán a
conseguir mejores resultados con un esfuerzo mínimo.
URL: https://www.theme-junkie.com/themes/company/
#5 THE7
Una plantilla para empresas más cercanas al sector de la tecnología, con algunos
toques que recuerdan a la nueva interfaz de iOS 7. Como viene siendo habitual en los
mejores temas Premium de WordPress, incluye soporte para shortcodes, efectos y
animaciones CSS3 sutiles y elegantes, así como widgets preparados para destacar
secciones concretas de la web.
URL:http://themeforest.net/item/the7-responsive-multipurpose-wordpress-
theme/5556590
#6 FOXY
Un tema que logra unir conceptos del diseño web clásico con algunas de las
tendencias más actuales. En vez de recurrir al ancho completo de la página, opta por
enmarcar todo el contenido en un marco generoso que, eso sí, deja lucir algunas
sombras CSS3. Eso no impide que la plantilla sea responsive y legible a la vez, pues
los elementos de dispondrán automáticamente para optimizar la mejor lectura posible.
URL: http://www.elegantthemes.com/gallery/foxy/
#7 BUSINESS ESSENTIALS

DISEÑO PARA LA WEB
Si la imagen corporativa ha recibido cierta influencia de la estética Modern de

Windows 8, Business Essentials resultará de lo más idóneo. Colores planos y bien
elegidos van dibujando la portada con soltura, dejando que las transiciones terminen
de perfilar una experiencia de uso relajada.
URL: http://themeforest.net/item/business-essentials-wordpress-theme/4375646
#8 CHAPELCO
Las startups tecnológicas encontrarán en este tema el diseño web que se estaba
buscando. Ya sea para presentar una nueva app o un entorno de desarrollo, Chapelco
se las arreglará sin problemas. Los blancos y azules elegidos acompañan
perfectamente a las tipografías personalizadas para darle ese toque limpio y
vanguardista.
URL: http://www.rockettheme.com/wordpress/themes/chapelco
#9 LAVA
A medio camino entre diseño de portfolio o de web corporativa, Lava ofrece un diseño
más sutil a las tendencias actuales. Conservador en algunos conceptos, innovador en
otros, este tema de YooTheme valdrá tanto para WordPress como para Joomla,

DISEÑO PARA LA WEB
gracias a la plataforma Warp, con la que se podrá añadir crear diseños HTML5 +
CSS3/LESS en un santiamén.
URL: http://yootheme.com/themes/buy-now#wordpress
#10 RT THEME 17
Aunque el nombre no aporte mucha información sobre las intenciones de este tema,
se puede entrever fácilmente al visitar la página de ejemplo. Se puede presumir de un
amplio abanico de diseños predeterminados y una alta frecuencia de actualización: la
plantilla se lanzó en 2012 y ha sido actualizada por última vez en el 2015. Entre las
características extra, destaca Page Builder, lo que hará la creación de la web mucho
más sencilla.
URL: http://themeforest.net/item/rttheme-17-responsive-wordpress-theme/2703099
PROBAR EL BLOG CON WORDPRESS EN UN PENDRIVE.

WordPress se ha convertido en la plataforma estrella para publicar un blog o página
personal. Si todavía no se tiene un blog en WordPress, o se quiere modificar de forma
drástica el aspecto del que ya existe, por lo que pudiera pasar, es probar el blog de
WordPress en un pendrive antes de ponerlo online.
INSTALA WORDPRESS EN UN PENDRIVE.

WordPress es uno de los sistemas de gestión de contenido más utilizados para crear
blogs o páginas webs. No obstante, instalar nuevos plugins, modificar el aspecto y la
distribución del contenido o aplicar nuevos ajustes puede tener un resultado
desastroso si se hace directamente sobre una página activa. Si algo falla,
probablemente el sitio web permanecerá inaccesible hasta que se solucione el
problema.
Para evitar riesgos, crear un entorno de pruebas emulando el blog donde se podrá
aplicar todos los cambios hasta que funcione correctamente y, posteriormente,
exportar todos estos cambios a la versión online de la página web o blog. Todo ello
con el menor riesgo de error posible y evitando las esperas que implican las subidas
de archivos al servidor con cada cambio que se realice en los archivos de la página.

DISEÑO PARA LA WEB
El primer paso será instalar WordPress en una unidad USB, así como todo el entorno
que le permite funcionar. Para ello utilizar Instant WordPress
(http://www.instantwp.com/). Descargar en el equipo el ejecutable que contiene la
herramienta desde la página web de sus creadores. Este ejecutable no instalará nada
en el equipo, simplemente se encarga de descomprimir su contenido en la llave USB
que se le indique y ejecutar los scripts que instalarán automáticamente los
componentes y servicios necesarios en esa unidad.
Antes de comenzar la instalación, se debe conectar la llave USB al equipo y

asegurarse de que el ordenador la reconozca. Después, hacer doble clic sobre el
instalador de Instant WordPress, hacer clic sobre el botón Browse y seleccionar la
unidad USB. Es recomendable que esta unidad se encuentre totalmente vacía para
que no haya confusión con las carpetas que se crearán. A continuación, pulsar sobre
Install para comenzar la instalación de WordPress en la llave USB indicada. No
desconectar la unidad hasta que el instalador indique que se ha finalizado el proceso.
Cuando termine, hacer clic sobre Close.
PRIMEROS PASOS CON INSTANT WORDPRESS

Tras su instalación en la llave USB, accede a la carpeta InstantWP que se ha creado
en la raíz de la misma. Allí se encontrará el ejecutable InstantWP.exe. Hacer clic con
el botón derecho del mouse sobre él y elegir Ejecutar como administrador para
iniciarlo. Acto seguido, se inicia el cuadro de opciones de la aplicación. Dado que esta
es una instalación local, la dirección IP de la página web no está enlazada a ningún
dominio o a la dirección IP de ningún servidor. Se enlaza directamente con la red local.
En la parte superior se encontrará el URL, la cual se podrá copiar con el botón Copy
WordPress URL to Clipboard y pegarla en la barra del navegador favorito o pulsar
sobre WordPress Frontpage para ver el aspecto actual del blog.

DISEÑO PARA LA WEB
Ahora, se comienza a modificar el aspecto de este WordPress, para convertirlo en una

copia exacta del que se tiene online. Hacer clic sobre WordPress Admin y se abrirá en
navegador con la pantalla de inicio de sesión en WordPress. Escribir admin en el
campo Username, password en el campo con el mismo nombre y pulsar en Log in. A
continuación, se accederá a la pantalla Escritorio de WordPress, idéntica a la que se
puede encontrar en el blog. Desde aquí se podrá configurar todos los ajustes de esta
instalación de WordPress.
COPIAR EL BLOG A UN USB.

Ahora que ya se tiene completada y totalmente funcional la instalación de WordPress
en la unidad USB, es el momento de replicar en ella el estado actual del blog para
poder aplicarle las modificaciones y realizar las pruebas que se crean convenientes.
Para realizar esta copia exacta del blog se necesitará descargar un archivo de
exportación que WordPress generará. Para conseguir ese archivo de exportación, se
debe acceder al Escritorio del blog en WordPress iniciando sesión como
administrador. A continuación, acceder al menú Herramientas y hacer clic sobre
Exportar. Después, marcar la casilla Todo el contenido y pulsar sobre el botón
Descargar el archivo de exportación. Ahora, desde el Escritorio de la instalación de
WordPress de la llave USB, acceder al mismo menú, aunque dado que la instalación
está en inglés, será el menú Tools. Hacer clic sobre el apartado Import y elegir la
opción WordPress.

DISEÑO PARA LA WEB
Después, pulsar sobre Examinar, elegir el archivo de exportación que se ha

descargado del blog y pulsar sobre Upload a file import. Tras esto, marcar la casilla
Download and import file attachments para que se descarguen las imágenes y
adjuntos del blog y pulsar en Submit. Acto seguido se iniciará la importación de todo el
contenido del blog a la llave USB.
Este proceso puede llevar algunos minutos en función del contenido del blog.
Cuando termine la importación, pulsar la tecla F5 para recargar la ventana del
navegador y se mostrará todo el contenido del blog.
AÑADIR PLUGINS Y TEMAS.

Al igual que sucede desde la versión “online” del blog, en la versión USB del blog
también se puede actualizar, añadir y modificar los temas desde el menú Appearance
>Themes del Escritorio de WordPress o instalar y configurar plugins desde el menú
Plugins para ver su funcionamiento.
No obstante, también se puede hacer copiando los archivos del plugin o tema a sus
respectivas carpetas de instalación en WordPress. Acceder a estas carpetas pulsando
sobre las opciones Plugins Folder o Themes Folder del cuadro de opciones de
InstantWP. Después, los archivos que se copien a estas carpetas, aparecerán como
disponibles en sendos menús de opciones de WordPress desde donde se podrán
instalar, activar y configurar.
ESTRUCTURA DE UN THEME PARA WORDPRESS.

Mucha gente, incluso empresas, vive del desarrollo de temas visuales para
WordPress. Se tiene que poseer el arte del diseño web, tener gusto y además saber
programar y controlar los entresijos de WordPress, o bien se puede dedicar solamente
a programar y tener un socio diseñador. El objetivo de esta entrada es definir la
estructura básica de un theme para WordPress, para ello, ir desde lo más simple a lo
más complicado pero primero de todo es muy importante manejar la jerarquía de los
templates de WordPress cortesía de WPTuts.

DISEÑO PARA LA WEB
Si se quiere crear un nuevo tema para la instalación de WordPress, se tiene que crear
una carpeta dentro de la carpeta themes, nombrándola de manera distintiva (es
opcional pero recomendable). Se debe de olvidar por unos momentos de la imagen
superior, y centrarse en el archivo style.css. Este archivo es el que, en su inicio debe
tener un contenido que indica la existencia de ese tema, dicho contenido debe ir entre
comentarios. A continuación el ejemplo del tema Twentytwelve.
1. Theme Name: Twenty Twelve

2. Theme URI: http://wordpress.org/themes/twentytwelve
3. Author: the WordPress team
4. Author URI: http://wordpress.org/
5. Description: The 2012 theme for WordPress is a fully responsive theme
that looks great on any device. Features include a front page template
with its own widgets, an optional display font, styling for post
formats on both index and single views, and an optional no-sidebar
page template. Make it yours with a custom menu, header image, and
background.
6. Version: 1.3
7. License: GNU General Public License v2 or later
8. License URI: http://www.gnu.org/licenses/gpl-2.0.html
9. Tags: light, gray, white, one-column, two-columns, right-sidebar,
fluid-layout, responsive-layout, custom-background, custom-header,
custom-menu, editor-style, featured-images, flexible-header, full-
width-template, microformats, post-formats, rtl-language-support,
sticky-post, theme-options, translation-ready
Con este archivo WordPress, detecta el tema que se está creando, pero falta un
archivo tan importante como este, el index.php. Como se ve en la jerarquía superior,
por defecto, si no se encuentra ningún archivo de la jerarquía se invoca a index.php,
por lo que es indispensable tenerlo. En este archivo se podría ya llamar al loop de
WordPress y hacer lo que se quisiera, pero para crear los temas para WordPress se
sigue el concepto DRY (Don’t Repeat Yourself), por lo que junto con index.php se

DISEÑO PARA LA WEB
puede crear otra serie de archivos e invocarlos desde el fichero de índice. Index.php
por lo general lleva la cabecera, el footer, el sidebar y el bucle mostrando las entradas
del blog. Estos archivos son:
- Header.php: Se puede invocar con get_header().

- Footer.php: Se puede invocar con get_footer().
- Sidebar.php (aunque podemos crear otros sidebars, por ejemplo sidebar-
footer.php): Se invoca con get_sidebar() o get_sidebar(“footer”).
- Cualquier fichero nombre.php: Se puede incluir con get_template_part(“nombre”).
Con estos ficheros se podría crear un tema visual básico, pero se puede extender
mucho más.
HOME.PHP
En este fichero va el contenido que se muestra por defecto en la página que se asigna
en WordPress que sea la de “Blog”.
FRONT-PAGE.PHP
En este fichero va el contenido que se muestra por defecto en la página que se asigna
en WordPress como página estática de inicio. Se puede incluir lo que se quiera, desde
últimas noticias, novedades de los productos, un formulario para captar clientes, etc.
404.PHP
Es el contenido que se muestra cuando no se encuentra la página en la que se ha
navegado dentro de la web, es útil para el usuario, ya que ha obtenido una página que
no se encuentra, ofrecerle un formulario de búsqueda.
SEARCH.PHP
Es la página que muestra los resultados de búsqueda realizados a través del
formulario de búsqueda del blog.
SEARCHFORM.PHP
Se puede sobrecargar el formulario de búsqueda que trae el núcleo de WordPress, e
invocarlo desde cualquier lado con get_search_form();
DATE.PHP
Muestra la relación de posts para una fecha (año, mes o día).
AUTHOR-{NICENAME}.PHP, AUTHOR-{ID}.PHP, AUTHOR.PHP

Muestra las entradas para un determinado autor, el primero y el segundo de ellos
permiten una plantilla específica para un autor en concreto, indicando tanto por el
nombre como por la id del autor. Author.php es la plantilla genérica.
CATEGORY-{SLUG}.PHP, CATEGORY-{ID}.PHP, CATEGORY.PHP

Como en el caso anterior se puede tener diferentes plantillas para diferentes
categorías, para la categoría Terror se puede querer un fondo oscuro o una imagen

DISEÑO PARA LA WEB
aterradora, pero para la categoría Happy se quiere que aparezca más colorido y con
una cara sonriente. Category.php sería la plantilla genérica para mostrar las entradas
de una categoría.
TAG-{SLUG}.PHP, TAG-{ID}.PHP, TAG.PHP

El mismo caso que con las categorías, pero con las etiquetas de las entradas.
TAXONOMY-{TAXONOMY}-{TERM}.PHP, TAXONOMY-{TAXONOMY}.PHP,
TAXONOMY.PHP
Se puede tener taxonomías personalizadas, estos ficheros, en orden, permiten mostrar
las entradas de dicha taxonomía asociadas a un término de la misma. O bien mostrar
igual todas las entradas de esa taxonomía personalizada o mostrar igual todas las
taxonomías.
SINGLE.PHP
Muestra el contenido de una entrada.
SINGLE-{POSTTYPE}.PHP
Muestra el contenido de una entrada de un tipo personalizado de post.
{MIME_TYPE}.PHP, ATTACHMENT.PHP
Muestra los ficheros adjuntos a las entradas, dependiendo del tipo o bien en general.
{CUSTOM-TEMPLATE}.PHP, PAGE-{SLUG}.PHP, PAGE-{ID}.PHP, PAGE.PHP

En el mismo orden, se puede mostrar páginas individuales de un tipo personalizado de
templates, mostrar una página para un título en concreto, para una id o cualquier
página. Para crear templates personalizados se tendría que en el fichero php añadirle
al comienzo entre comentarios:
/*Template Name: Full Width*/

Para que se entienda, si se creó un fichero que se llame template-full.php y en primera
línea incluyo el comentario anterior, luego a la hora de elegir la plantilla para cada
página se puede seleccionar esta plantilla. Además de los ficheros *.php al theme se le
puede añadir una serie de carpetas que serán útiles para organizar los ficheros. En
este caso, se ha creado una serie de carpetas que son las siguientes:
- Img: Incluirán todas las imágenes para el theme.

- Js: Incluirán todos los scripts (JavaScript) que usará el theme.
- 3rd: Para aquellas librerías de terceros.
- Inc: Para aquellos elementos del theme, como taxonomías personalizadas, tipos de
entradas personalizados, etc.
- Kernel: Aquí irá todo el código de gestión del tema, este código será común a los
diferentes temas, por ejemplo, widgets, ficheros JS generales, panel de
administración personalizado, etc.
Por último, la clave de la personalización de los temas. El fichero functions.php.

DISEÑO PARA LA WEB
Aquí se incluirá todos los ficheros que llaman al núcleo de WordPress para cualquier
acción, se llamara a los ficheros del kernel y a los de inc. Functions.php es como el
cerebro del theme, donde se conecta con el núcleo de WordPress. El tema que se
creara se llama Chead y será del tipo portfolio / blog personal. Poco a poco se ira
guiando paso a paso como crear un theme conforme se vaya programando. No se
debe de olvidar de crear el fichero screenshot.png, será la visualización previa del
theme en el apartado de apariencia de WordPress. El desarrollo de themes permite
compartirlo en repositorios como Themeforest, venderlos, crear versiones Premium de
themes gratis, etc.
INSTALAR GOOGLE ANALYTICS EN UNA PÁGINA WEB WORDPRESS

MODO 1 O MODO SENCILLO. CON PLUGINS DE WORDPRESS PARA GOOGLE
ANALYTICO.
Existen plugins de WordPress para instalar Google Analytics en el sitio de un modo
rápido y sencillo, sin necesidad de saber código HTML. Sólo se necesita tener una
cuenta en Google Analytics para la página web o blog, y tener a mano el código UA
que brinda la herramienta. En la mayor parte de los casos, basta con introducir este
código.
Ventajas: Es rápido de configurar y no se necesita ser un experto. Simplemente,

introducir el código UA o sincronizar la página web con la cuenta de Google Analytics.
Desventajas: Se está utilizando un plugin para algo que se podría hacer mediante
código HTML. Siempre que se pueda hacer de otro modo, es recomendable evitar
instalar un plugin, ya que de esta manera se optimiza los tiempos de carga de la
página web y el espacio en el servidor, además de evitar posibles incompatibilidades
entre plugins cuando se tienen muchos instalados. Es bueno recordar que Google
tiene en cuenta los tiempos de carga de la página web para el posicionamiento SEO.
Si se quiere medir y optimizar el rendimiento de los plugins instalados en el sitio, es
recomendable el plugin P3 (Plugin Performance Profiler). A continuación se muestra
cuáles son los plugins de WordPress más recomendables para instalar Google
Analytics de manera rápida y fácil:
1. SIMPLE GOOGLE ANALYTICS.
Este plugin tiene una configuración muy sencilla y se va a hacer en menos de un

minuto. Simplemente se introduce el ID de Google Analytics o código UA y ya lo tendrá
funcionando. Permite rastrear todos los datos de los sitios web y además ofrece la
posibilidad de medir la velocidad de carga, registrar los enlaces externos y las
descargas, informes demográficos y de intereses, etc. La mejor opción para instalar
Google Analytics en la página web o blog sin complicarse la vida.

DISEÑO PARA LA WEB
2. GOOGLE ANALYTICS BY YOAST.
Creado por Joost de Valk, autor del aclamado plugin SEO Yoast, este plugin permite
sincronizar rápidamente la página web o blog con la cuenta de Google para comenzar
a registrar los datos de tráfico. También se puede hacer manualmente, introduciendo
el código UA del sitio web. Una vez instalado y activado, en Configuraciones se puede
ajustar una serie de opciones avanzadas, como rastrear enlaces salientes y
descargas, tipo de archivos de descarga para rastrear, activar la opción de
seguimiento universal, habilitar informes demográficos y de interés, monitorizar
subdominios, modo depuración, etc. Además, se tiene un Dashboard donde consultar
los informes de analítica dentro del panel de administración del sitio. Una opción
excelente y con el sello de calidad del Equipo Yoast.

DISEÑO PARA LA WEB
3. GOOGLE ANALYTICATOR.
Con Google Analyticator, al igual que en el caso anterior, se puede sincronizar el sitio
web con la cuenta de Google y acceder a un Dashboard avanzado en el que
monitorizar los datos de tráfico y configurar diversas opciones como rastreo de enlaces
salientes con una funcionalidad mejorada, descargar por tipos de archivos
descargados, obtener informes de remarketing, demografía e intereses, etc. Además,
se tiene incluso la posibilidad de rastrear las estadísticas de la cuenta de Google
Adsense introduciendo el ID. Si no interesa usar la funcionalidad de Dashboard interno
en el panel de WordPress se puede optar por hacer un simple rastreo del sitio para ver
las estadísticas en el panel de Google Analytics simplemente introduciendo el código
UA, como en el caso anterior. Otra fantástica herramienta para instalar Google
Analytics en la página web o blog.
MODO 2 O MODO AVANZADO. CON CÓDIGO HTML DENTRO DE LA ETIQUETA

<HEAD>.
Si se es un usuario un poco más avanzado y se conoce algo de código HTML, se tiene
otra alternativa: pegar el código de Google Analytics directamente en la etiqueta
<head> del sitio web. Si se ha diseñado páginas web en HTML se sabrá que en el
código de cada página HTML se tiene en la parte de arriba una etiqueta <head> de
apertura y otra </head> de cierre. Entre ambas etiquetas de apertura y cierre hay una
serie de líneas de código donde habitualmente se insertan los enlaces a la hoja de
estilo del sitio, fuentes, archivos de JavaScript, etc.
En el caso de WordPress, se trata de un sistema basado en lenguaje PHP y las

páginas se construyen dinámicamente, es decir, para crear cada página la herramienta
toma porciones de código de diversos archivos y de este modo las construye de

DISEÑO PARA LA WEB
manera inteligente. Normalmente, entre los archivos del sitio, hay uno llamado
header.php donde se incluye todo el código HTML que va a añadir a todas las páginas
del sitio para que todas ellas tengan una misma cabecera.
Por ello, para implementar el código de Google Analytics basta con que se acceda a la
zona de edición del panel de WordPress y después se vaya al archivo header.php,
donde se va a encontrar en la parte de arriba todo el código HTML de la cabecera del
sitio: etiquetas <head><meta><title>, etc. Aquí lo que se tiene que hacer es pegar el
código de Google Analytics en un renglón que se encuentre entre las etiquetas <head>
y </head>. Una vez que se haya hecho esto, Google Analytics ya puede empezar a
rastrear las estadísticas del sitio web o blog.
Ventajas: Permitirá ahorrar la instalación de plugins, con lo que se optimiza la

velocidad del sitio. Se debe recordar que los plugins son una ayuda maravillosa y uno
de los puntos fuertes de WordPress, pero si se abusa de ellos (y si no se documenta
bien y no se testea antes) pueden convertirse en el talón de Aquiles del sitio web y
lastrar su rendimiento, provocar incompatibilidades y comportamientos anómalos de la
página, etc. Por ello, de manera general, siempre que se pueda hacer sin plugins,
pues hacerlo sin plugins.
Desventajas: Se requiere un conocimiento más avanzado, saber un poco de código

HTML y meterse a editar un archivo .php con el riesgo que esto conlleva si no se es
del todo experto. Si no se introduce el código en el lugar adecuado o si se borra o
modifica las líneas de código del tema, se puede estropear su correcto funcionamiento
y finalmente tener que volver a instalar todo de nuevo. Aparte de esto, al hacerlo
mediante código, simplemente se está habilitando el rastreo de la página web o blog
por parte de Google Analytics, pero se puede estár perdiendo todas las posibilidades
de monitorización y configuración en un Dashboard interno en WordPress que ofrecen
algunos de los plugins citados anteriormente. Por ello, antes de tomar la decisión, se
debe reflexionar qué se va a necesitar exactamente y valorar si se tiene los
conocimientos necesarios para aventurarse a modificar el código del tema o plantilla.
1. Acceder a la zona de edición de archivos de WordPress.

Para acceder a la zona donde se puede editar los archivos se debe ir a Apariencia >
Editor en el menú principal del Dashboard de WordPress.
2. Localizar el archivo header.php

DISEÑO PARA LA WEB
En la parte derecha de esta sección se tiene un listado con todos los archivos que se
pueden editar en el tema o plantilla. Buscar el archivo header.php y hacer clic para que
se despliegue todo el código en la zona central.
3. Localizar las etiquetas <head> y </head> e introducir el código.

Buscar dentro del código las etiquetas <head> y </head> y en cualquier lugar entre
ambas etiquetas pulsar enter para abrir un renglón nuevo. A continuación pegar el
código que se ha proporcionado por Google Analytics para la instalación manual de la
funcionalidad de rastreo de la página web o blog. Una vez que se ha pegado el código,
hacer clic en el botón Actualizar archivo que se encuentra en la parte inferior izquierda.
Ahora ya se tiene funcionando el rastreo de Google Analytics para el sitio.
¿CÓMO OBTENER EL CÓDIGO DE GOOGLE ANALYTICS PARA INSERTAR EN

EL SITIO WEB?
El código de Google Analytics o código de seguimiento se obtiene entrando a la

cuenta en Google Analytics. A continuación, se tiene que hacer clic en la pestaña
Administrador, y en la primera columna (Cuenta), luego seleccionar la página web para
la que se quiere obtener los datos de seguimiento.

DISEÑO PARA LA WEB
Una vez seleccionada la página web (se puede tener varios sitios web rastreados con
Google Analytics), Ir a la segunda columna (Propiedad), y dar clic en Información de
seguimiento.
Posteriormente, en el desplegable, pulsar en Código de seguimiento.
Una vez dentro de esta sección, la herramienta se muestra un código que se debe
introducir entre las etiquetas <head> y </head> de la página web o blog.

PGDT 409 Manual

Cargado por

Copyright:

Formatos disponibles

PGDT 409 Manual

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

PGDT 409 Manual

Cargado por

Copyright:

Formatos disponibles

SERVICIO NACIONAL DE ADIESTRAMIENTO EN TRABAJO INDUSTRIAL

I. DESARROLLAR IMÁGENES EN HERRAMIENTAS DE DISEÑO.

En esta tarea se tratarán las siguientes operaciones:

1.1. AMBIENTE Y ENTORNO DE TRABAJO EN ADOBE PHOTOSHOP.

BARRA DE HERRAMIENTAS DE PHOTOSHOP.

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 5

Se puede hacer que la disposición de los paneles y barras vuelvan al estado

O directamente desde la barra superior:

La barra en el extremo superior es la Barra de Menú, esta barra aparece en la mayoría

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 6

Se observa que algunas de ellas tienen un pequeño triángulo en su esquina inferior

Por ejemplo, si se despliega el menú del icono pincel se desplegará la lista de

Dentro del grupo de herramientas de dibujo se puede encontrar el Pincel, el Lápiz y la

En el panel de herramientas se puede encontrar también los selectores de color ,

El recuadro que se encuentra al frente muestra el color que se está utilizando, en

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 7

Al seleccionar un color podría aparecer unos iconos como estos:

El icono Advertencia de incompatibilidad con impresión advierte al usuario que el

Lo mismo ocurre con el icono de incompatibilidad web, Advertencia de

HERRAMIENTAS: Este grupo de herramientas se utiliza para crear trazados.

La primera opción, la herramienta Cuentagotas, toma muestras de color de cualquier

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 8

- La herramienta Recuento permite colocar sobre el lienzo marcas que ayudarán a

LA BARRA DE OPCIONES DE HERRAMIENTAS.

En la parte superior de la ventana y bajo la barra de menú se encuentra la barra de

Desde aquí se puede cambiar aspectos de la herramienta como su tamaño, su

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 9

Dando clic sobre ellas se mostrara la información.

HERRAMIENTA PINTURA Y EDICIÓN:

En el panel de herramientas se puede encontrar el icono Pincel, Al hacer clic derecho

La herramienta Pincel Mezclador sirve para dar un efecto artístico a la composición,

Una de las diferencias respecto al Lápiz es la posibilidad de convertir esta herramienta

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 10

Esta opción, como prácticamente todas, también se encuentra en la barra de Opciones

Color frontal y de fondo

Existen algunas características de los Pinceles:

También se pueden determinar desde Menú Ventana – Pincel:

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 11

El Borrador permite quitar la pintura de una zona determinada del lienzo y

El Borrador mágico actúa únicamente sobre un color en la imagen, dejando las

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 12

El Borrador de Fondos resulta de gran ayuda cuando es necesario extraer un

Trabajando con Capas:

1. Añadir un Texto a la Imagen ; para el ejemplo, ingresar la palabra “Senati”, se

2. Cambiar la estructura de la capa texto, agrandando la fuente a 100pt, cambiando a

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 13

4. Es factible también ocultar las capas, según fuera la necesidad, ocultando o

Una capa es como una lámina de acetato transparente y el programa te permite

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 14

Si la ventana Capas no se encontrase en el Área de ventanas, se puede activar desde

La ventana de Capas mostrara cada una de ellas, representando el orden de la

Crear nuevas capas:

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 15

Alineamiento automático de capas.

- Automático: Photoshop analiza las imágenes y aplica una transformación en

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 16

Bloquear las capas.

Tipos de Bloqueo en la ventana Capas

- El bloqueo de píxeles transparentes bloquea la edición de estas zonas, no