• No se han encontrado resultados

DISEÑO DE PÁGINAS WEB parte 2 - wordpress

N/A
N/A
Protected

Academic year: 2021

Share "DISEÑO DE PÁGINAS WEB parte 2 - wordpress"

Copied!
109
0
0

Texto completo

(1)

PRODETUR

DISEÑO DE PÁGINAS WEB – parte 2 - wordpress

Mairena del aljarafe, 18 de abril de 2016

(2)

ACCESO A WORDPRESS

(3)

PRODETUR

(4)

ACCESO A WORDPRESS

(5)

PRODETUR Descubriendo el Escritorio

(6)

Descubriendo el Escritorio

Pulsando en el nombre de

la web arriba a la izquierda

nos lleva al

(7)

PRODETUR

El Escritorio

Así es al principio

nuestra web o blog

(8)
(9)

PRODETUR

• Lo usamos para el contenido de actualización

periódica como noticias, novedades, artículos,

promociones, etc…

• Entran con fuerza pero se diluyen

(10)

• Lo usamos para ordenar y clasificar las entradas.

• Pueden dividirse según diferentes criterios que elije

el autor: tema, localización, segmento, etc…

• Ej: Futbol,Baloncesto, Motor,

• Ej: Web, SMM, LOPD

(11)

PRODETUR

• Lo usamos para publicar contenido estático y

descriptivo.

• Se trata de páginas HTML reales

• Se puede publicar prácticamente cualquier

contenido

• Está siempre a la vista.

• Ej: Acerca de, Aviso Legal, Quienes somos, nuestros

productos

(12)
(13)

PRODETUR

Entradas: Tienen un editor de contenidos muy intuitivo. Las

entradas se ordenan por categorías. PodemosAñadir entradas o modificar una existente.

(14)

Dependiendo del tema instalado tendremos más o menos funciones para las entradas. También los plugins que instalamos muestran sus herramientas de trabajo en esta pantalla, que se regula en OPCIONES

DE PANTALLA

(15)

PRODETUR

(16)

Es aquí donde se almacenan y se gestionan las

imágenes, pdf, videos y otros documentos

subidos.

(17)

PRODETUR

•Podemos subir archivos desde aquí o desde la entrada o página donde irá

publicado. Arrastra el archivo y suelta.

•Puedes subir varios archivos a la vez

(18)
(19)

PRODETUR

Páginas: Indice, organización y edición rápida de las páginas

Organización de páginas

Twitter/MKG20 - Javier Merchán

•En Páginas podemos ordenarlas por autor, fecha u orden alfabético. •Podemos buscar por palabras o tags.

(20)

Páginas: La edición es igual a la de una entrada. Se le puede asignar una

plantilla predeterminada, que según el TEMA tendrá más variedad.

(21)

PRODETUR

Características de páginas

Publicar

• Para publicar, programar o guardar borrador. Permite crear entradas privadas. • Aquí también permite enviar

la página a la papelera

Atributos de página

• Ubicación de la página en el menú.

• Posición que irá en el menu

Imagen destacada

• La imagen que se usa para presentar la página.

• En algunos temas sirve para las miniaturas

(22)

IMAGEN DESTACADA

(23)

PRODETUR

Relación de comentarios y gestión de los mismos

(24)

Menús: La barra de Navegación

• Los Menús Personalizados te permiten colocar las páginas y

categorías que deben aparecer en el Menú de Navegación, y

ordenar su posición en el mismo.

(25)

PRODETUR

Apariencia > Menu

•Para crear un menú personalizado dale un nombre y haz clic en

Crear menú.

•Después elige objetos como páginas, categorías o enlaces

personalizados de la columna izquierda para añadirlos a este

menú.

•Después de añadir tus objetos, arrastra y suéltalos en el orden

que desees.

•También puedes hacer clic en cada objeto para ver opciones de

configuración avanzadas.

•Cuando hayas terminado de crear tu menú personalizado,

asegúrate de hacer clic en el botón Guardar menú.

(26)

Apariencia > Menu

Crear Menu

(27)

PRODETUR

Apariencia > Menu

(28)

Apariencia > Menu

(29)

PRODETUR

Aquí damos de alta a los administradores, Editores,

Autores, Colaboradores o suscriptores

(30)

Publicar esto: Nos permite “coger prestado” facilmente texto de otras

fuentes. Funciona insertando en la barra de marcadores el enlace PUBLICA ESTO

Herramientas

Importar y Exportar: Muy útil para trasladar los contenidos

(entradas, comentarios, …) de un blog a otro.

(31)

PRODETUR

(32)
(33)

PRODETUR

Apariencia > TEMAS

• El diseño que tendrá nuestra web lo define el TEMA que tengamos instalado.

• El tema por defecto que nos viene en Wordpress es el TwentyTen

y TwentyEleven

• Existen miles de temas diferentes y cada tema tiene sus propias opciones de personalización.

• Los temas gratuitos dan muy poco juego y NO dan un aspecto profesional.

• Los temas

Premium

nos proporcionan una web bonita y con

(34)
(35)

PRODETUR

Subir una plantilla vía Escritorio

(36)

Plantillas Premium

• Las principales empresas que diseñan plantillas

Premium para Wordpress son las siguientes.

WOO Themes

Studio Press

Theme Forest

Elegant Themes

(37)

PRODETUR

(38)

Elegir una buena plantilla

• Adaptada a objetivo de la web

• Diseño versátil: Multitud de posibilidades

• Shortcodes

(39)

PRODETUR

¿Cuál es el

objetivo de

la web?

(40)
(41)

PRODETUR

shortcodes

• Los shortcodes de WordPress son pequeños códigos que puedes 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 necesites

hacer esa tarea.

• Son como tags HTML que usan corchetes ([ ]) en vez de los símbolos de

“mayor y menor qué” (< >). Vamos, algo así:

(42)
(43)

PRODETUR

Opciones del Tema:

(44)

Opciones del Tema:

Configuración

(45)

PRODETUR

Herramienta de apoyo

(46)
(47)

PRODETUR

Son aplicaciones que instalamos y que amplían las funciones de Wordpress.

(48)

Búsqueda de plugins y widgets

Se pueden buscar por palabras o tags

Se pueden subir si lo tenemos en nuestro PC

Ejemplo: SEO

(49)

PRODETUR

Antes de instalar un Plugin

• Tener en cuenta si se actualiza

frecuentemente

• Los Plugins pueden hacer nuestro WP más lento o

crear errores de funcionamiento.

• Pueden abrir agujeros de seguridad en la web,

haciendo nuestro sitio vulnerable y expuesto a

cualquier tipo de ataque.

(50)

Pregúntate antes de instalar un Plugin

1. ¿Necesito instalar este plugin?

2. ¿Puedo hacer lo que necesito sin este plugin?

3. ¿Es este plugin mejor que otros similares? ¿Cuál autor

cuenta con mejor reputación?

4. ¿Cuál de los plugins lleva el mejor registro de

actualizaciones?

(51)

PRODETUR

(52)

Los Mejores Plugins

• Akismet

• All in One SEO vs SEO by YOAST

• WPML

• WP Super Cache • Nexgent Gallery • WooCommerce

• Contact Form 7 + Really Simple Captcha

• Google XML Sitemaps

• Google Map for Wordpress • Twitter Facebook Social

Share– Sexy Bookmarks

(53)

PRODETUR

Vamos a configurar

plugins

• Contact Form 7

• Nexgen Gallery

(54)

Plugins Premiun Interesantes

Existen plugins fuera del repositorio por que son

de pago, pero que ofrecen un resultado muy

(55)

PRODETUR

(56)
(57)

PRODETUR

(58)
(59)

PRODETUR

Widgets

Widgets: Los usamos para mostrar

en nuestra web las

funcionalidades de wordpress, del

tema o de los plugins.

• Tenemos widgets preinstalados

• Generalmente van en el sidebar

o en el Footer.

(60)
(61)

PRODETUR

El punto débil de WP: los idiomas

• El mayor quebradero de cabeza de WordPress han sido

siempre los sitios multilingües.

• Una alternativa muy usada ha sido crear una

instalación independiente para cada idioma

• Esta opción tiene la desventaja del doble trabajo y

el doble mantenimiento

(62)

Localización y traducción

• Localización es la traducción de los archivos de

código: traducir un plugin, una plantilla, un

formulario, etc…

• Traducción: Tener el texto y los metas en

varios idiomas en la misma base de datos

(63)

PRODETUR

Localización

• Codestyling Localization

(64)

Traducción personalizada

• Qtranslate:

– Gratis

– El mejor para webs sencillas o blogs.

– Ensucia el código y hay que usar etiquetas

• WPML:

– El más completo y mejor plugin de idioma hasta el momento.

– Más complejo

– Mejor para SEO

– Más limpio

(65)

PRODETUR

(66)
(67)

PRODETUR

(68)
(69)

PRODETUR

Ajustes Generales

Twitter/MKG20 - Javier Merchán

1. Los campos en esta pantalla determinan algunas configuraciones básicas de tu sitio.

2. La mayoría de los temas muestran el título del sitio en la parte superior de cada página, en la barra de título del navegador, y como nombre identificativo para los feeds. La descripción corta también se muestra en muchos temas.

3. La URL de WordPress y la URL del sitio pueden ser las mismas (ejemplo.com) o diferentes; por ejemplo, puedes tener los archivos

del core de WordPress en un subdirectorio

(70)

Ajustes Generales

4. Si deseas que los visitantes se puedan registrar en tu sitio, en vez

de que el administrador del sitio deba registrarlos, marca la casilla de miembros. Se otorgará un perfil predeterminado a cada nuevo usuario. Da igual que se registren ellos mismos o que les registre el administrador del sitio.

5. UTC quiere decir Hora universal coordinada (Coordinated

Universal Time)

6. Recuerda hacer clic en la parte inferior de la pantalla sobre el

(71)

PRODETUR

Ajustes Generales

Twitter/MKG20 - Javier Merchán

IMPORTANTE:

 Dar de alta un buen Título y Descripción (SEO)

 Visibilidad del sitio: Permitir que el Blog sea indexado

 Enlaces permanentes: Colocar en NOMBRE DE ENTRADA(SEO)

(72)

Seguridad:

Recomendaciones I

1. Mantener WordPress actualizado a la última

versión, única garantía de control de

(73)

PRODETUR

Seguridad:

Recomendaciones II

2. Instalar solamente plugins seguros, a ser posible

desde el repositorio oficial.

3. Instalar solamente temas seguros, a ser posible

desde el repositorio oficial.

4. Revisar la

sección de seguridad de Ayuda

WordPress

para comprobar que has realizado

todas las acciones de seguridad necesarias.

5. Suscribirte al

feed de Ayuda WordPress

para

(74)

Seguridad: Algunos consejos

1. Cambiar el prefijo de la BBDD

2.

Bulletproof security

Este plugin ofrece un entorno de

seguridad muy completo, protegiendo tu WordPress de

inyecciones de código y ataques a SQL.

3. Realiza comprobaciones de seguridad del prefijo de la base

de datos, seguridad del fichero wp-config.php así como de

las carpetas del núcleo de WordPress y ficheros.htaccess.

(75)

PRODETUR

OPTIMIZACIÓN WP

• ENLACES PERMANENTES

• COPIAS DE SEGURIDAD

• TRASLADO DE LOCAL A SERVIDOR

• SOPORTE: TIRA DE FOROS

(76)
(77)

PRODETUR

Como hacer copias de seguridad

1. Hacer copia de los archivos

2. Hacer copias de las BBDD

(78)

Traslado de Local a Servidor

• Trasladar carpeta con archivos via FTP o

comprimido en ZIP

• Exportar BBDD de PHPMyadmin local.

• Crear nueva BBDD en servidor e Importar BBDD.

• Modificar archivo WP-CONFIG

• Modificar entrada BBDD WP_OPTIONS:

(79)

PRODETUR

Exportar BBDD

1.- Marcar todos

2.- Exportar

(80)
(81)

PRODETUR

(82)
(83)

PRODETUR

Soporte: Busca en la red

• Si tenemos problemas con nuestra web:

(84)
(85)

PRODETUR

¿Qué es el SEO?

SEM

(86)

• Más cara la inversión pero más económico a

medio/ largo plazo.

• Se amortiza más porque permanece en el

tiempo.

(87)

PRODETUR

Como funcionan los buscadores

• Índice (o catálogo) que clasifica a partir de las palabras

significativas que encuentra en las páginas web

(88)
(89)

PRODETUR

¿Cómo sabemos en que puesto estamos?

(90)
(91)

PRODETUR

(92)

Esquema SEO a seguir

1. Optimización de la web

2. Optimización del contenido

3. Incrementar las visitas y la interacción con el

exterior

(93)

PRODETUR

Arquitectura

(94)

Optimiza tus Metas

• Asegurate que cada página tiene su propio

<title>

• Deben ser descriptivos y concisos

• Evita el Keyword Stuffing (repetición

innecesaria y pedante con varias formas)

• Utiliza tu marca o tu producto

(95)

PRODETUR

Snippets

BUENOS TÍTULOS EXPLICACION

Nudo de corbata: ¿cómo hacer un nudo de corbata?

La palabra clave al principio de la frase (relevancia) y se repite dos veces con manera natural

Colchones de látex: colchón de látex NATURA

Plural y singular cuando se comprueba que ambas son muy demandadas

Instalación de césped sintético o artificial Onlygarden

Título descriptivo. El nombre de la

empresa no es relevante para SEO, por lo que va al final

Maleta Spinner 4 ruedas 82cm American Tourister

Título descriptivo y específico para ecommerce

(96)
(97)
(98)

Estilos básicos

•H1

•Title

•Meta

(99)

PRODETUR

Secciones del Plugin

1. Titles & Metas

2. Social

3. Sitemaps XML

4. Enlaces permanentes o permalinks

5. Enlaces Internos

6. RSS

7. Importar y Exportar

8. Editar Archivos

(100)
(101)

PRODETUR

Titles & Metas

• La etiqueta <title> y la etiqueta <meta

name=”description”>

– General: Fuerza la reescritura de <titles>

– Portada: Títulos Generales. :

– Tipo de Entradas:Plantilla de Pg, Post, MM, ..

– Taxonomías: Plantilla de Categorías, Etiquetas, ..

– Otro: Autor, archivo

(102)
(103)

PRODETUR

(104)

XML Sitemap

Genera automáticamente un resumen de las páginas, entradas,

(105)

PRODETUR

Optimiza tu web

• Velocidad de Carga

– WP Cache

P3- Profiler

• Analiza la velocidad que pierde Wp por los

plugins

• BBDD Limpia

(106)
(107)

PRODETUR

HTML 5

HTML 5 indexa mejor y esta mejor estructurado

Responsive design + tráfico moviles y tablets

(108)

Link Building

“Dime quien te enlaza y te diré quien eres”

•Cómo debe ser un enlace <a href=“url” title=“kw”>kw</a>

•Dónde conseguir enlaces

– Inclusión en directorios (gratis y de nicho) – Altas en foros y blogs

– Notas de prensa – Redes sociales

– Intercambio de enlaces

(109)

PRODETUR

PARA CUALQUIER CUESTIÓN RELACIONADA

CON ESTA SESIÓN PUEDES DIRIGIRTE A:

formacion@prodetur.es

954486800 (Dpto. formación)

www.prodetur.es

Referencias

Documento similar

If certification of devices under the MDR has not been finalised before expiry of the Directive’s certificate, and where the device does not present an unacceptable risk to health

In addition to the requirements set out in Chapter VII MDR, also other MDR requirements should apply to ‘legacy devices’, provided that those requirements

The notified body that issued the AIMDD or MDD certificate may confirm in writing (after having reviewed manufacturer’s description of the (proposed) change) that the

In medicinal products containing more than one manufactured item (e.g., contraceptive having different strengths and fixed dose combination as part of the same medicinal

Products Management Services (PMS) - Implementation of International Organization for Standardization (ISO) standards for the identification of medicinal products (IDMP) in

Products Management Services (PMS) - Implementation of International Organization for Standardization (ISO) standards for the identification of medicinal products (IDMP) in

This section provides guidance with examples on encoding medicinal product packaging information, together with the relationship between Pack Size, Package Item (container)

Package Item (Container) Type : Vial (100000073563) Quantity Operator: equal to (100000000049) Package Item (Container) Quantity : 1 Material : Glass type I (200000003204)