DISEÑO DE PÁGINAS WEB parte 2 - wordpress - prodetur.es
Transcript of DISEÑO DE PÁGINAS WEB parte 2 - wordpress - prodetur.es
PRODETUR
DISEÑO DE PÁGINAS WEB – parte 2 - wordpress
Mairena del aljarafe, 18 de abril de 2016
[email protected] Telf.: 954 486 800
PRODETUR
PANEL DE CONTROL: ESCRITORIO
PRODETUR
Descubriendo el Escritorio
Twitter/MKG20 - Javier Merchán
PRODETUR
Descubriendo el Escritorio
Pulsando en el nombre dela web arriba a la izquierdanos lleva al
Front End
PRODETUR
El Escritorio
Así es al principio nuestra web o blog
PRODETUR
Visión del Escritorio
Twitter/MKG20 - Javier Merchán
PRODETUR
• Lo usamos para el contenido de actualización periódica como noticias, novedades, artículos, promociones, etc…
• Entran con fuerza pero se diluyen
Entradas
PRODETUR
• 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
Categoría
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
Páginas
PRODETUR
Twitter/MKG20 - Javier Merchán
Gestión de Entradas
PRODETUR
Entradas: Tienen un editor de contenidos muy intuitivo. Las
entradas se ordenan por categorías. PodemosAñadir entradas o
modificar una existente.
Edición de entradas
PRODETUR
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
Twitter/MKG20 - Javier Merchán
Tipos de Entrada
PRODETUR
Categorías
PRODETUR
Es aquí donde se almacenan y se gestionan las
imágenes, pdf, videos y otros documentos
subidos.
Librería Multimedia
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
Agregar multimedia
PRODETUR
Organización páginas
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.
•Podemos editar rápidamente algunas modificaciones.
PRODETUR
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.
Edición de páginas
PRODETUR
Características de páginas
Publicar• Para publicar, programar o
guardar borrador. Permite crear entradas privadas.
• Aquí también permite enviarla página a la papelera
Atributos de página
• Ubicación de la página en elmenú.
• 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
PRODETUR
IMAGEN DESTACADA
Descubriendo el Escritorio
PRODETUR
Relación de comentarios y gestión de los mismos
Comentarios
PRODETUR
Menús: La barra de Navegación
• Los Menús Personalizados te permiten colocar las páginas ycategorías que deben aparecer en el Menú de Navegación, yordenar su posición en el mismo.
PRODETUR
Apariencia > Menu
•Para crear un menú personalizado dale un nombre y haz clic enCrear menú.•Después elige objetos como páginas, categorías o enlacespersonalizados de la columna izquierda para añadirlos a estemenú.•Después de añadir tus objetos, arrastra y suéltalos en el ordenque desees.•También puedes hacer clic en cada objeto para ver opciones deconfiguración avanzadas.•Cuando hayas terminado de crear tu menú personalizado,asegúrate de hacer clic en el botón Guardar menú.
PRODETUR
Apariencia > Menu
Crear Menu
PRODETUR
Apariencia > Menu
Selecciona elementos Menu
PRODETUR
Apariencia > Menu
Ordenalos y Ubícalos en el tema
PRODETUR
Aquí damos de alta a los administradores, Editores,
Autores, Colaboradores o suscriptores
Usuarios
PRODETUR
Publicar esto: Nos permite “coger prestado” facilmente texto de otras
fuentes. Funciona insertando en la barra de marcadores el enlace
PUBLICAESTO
Herramientas
Importar y Exportar: Muy útil para trasladar los contenidos
(entradas, comentarios, …) de un blog a otro.
Por ejemplo de WP.COM a WP.ORG, de BLOGGER a WP, etc…
PRODETUR
USO DE PLANTILLAS
PRODETUR
TEMAS – THEMES – PLANTILLAS - TEMPLATES
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 muchas posibilidades por poco dinero.
PRODETUR
Plantillas Gratuitas
PRODETUR
Subir una plantilla vía Escritorio
1 2
PRODETUR
Plantillas Premium
• Las principales empresas que diseñan plantillas Premium para Wordpress son las siguientes.
• WOO Themes• Studio Press• Theme Forest• Elegant Themes• Natty WP
PRODETUR
Ejemplo Plantilla Premiun
PRODETUR
Elegir una buena plantilla
• Adaptada a objetivo de la web
• Diseño versátil: Multitud de posibilidades
• Shortcodes
• Responsive Design
PRODETUR
¿Cuál es el objetivo de la web?
PRODETUR
versátil
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í:
[youtube id=“xxxxxxxxx" ancho="600" alto="450"]
PRODETUR
Responsive
PRODETUR
Opciones del Tema: Dependen del tema instalado
PRODETUR
Opciones del Tema: Configuración
PRODETUR
Herramienta de apoyo
INSPECTOR DE ELEMENTOS DE CHROME
PRODETUR
PLUGINS: INSTALACIÓN Y + USADOS
PRODETUR
Son aplicaciones que instalamos y que amplían las funciones de
Wordpress.
Plugins y Widgets
PRODETUR
Búsqueda de plugins y widgets
Se pueden buscar por palabras o tags
Se pueden subir si lo tenemos en nuestro PC
Ejemplo: SEO
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 acualquier tipo de ataque.
PRODETUR
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?
5. ¿Cuál de los plugins ha sido instalado más veces?
PRODETUR
Repositorio de Plugins
PRODETUR
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
• Buddy Press
PRODETUR
Vamos a configurarplugins
• Contact Form 7
• Nexgen Gallery
PRODETUR
Plugins Premiun Interesantes
Existen plugins fuera del repositorio por que son de pago, pero que ofrecen un resultado muy profesional.
PRODETUR
WP Sticky
PRODETUR
Foobar
PRODETUR
Social Image Hover
PRODETUR
Pop Up Ninja
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.• Se arrastran para activarlos.
PRODETUR
WP MULTILINGÜE: IDIOMAS
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
PRODETUR
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
PRODETUR
Localización
• Codestyling Localization
• WPML: Incluye todo
PRODETUR
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– De pago
PRODETUR
Traducción Automática
PRODETUR
Traducción Automática
PRODETUR
AJUSTES EN WP
PRODETUR
Ajustes Generales
Twitter/MKG20 - Javier Merchán
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
(ejemplo.com/wordpress) en vez de en el directorio raíz.
PRODETUR
Ajustes Generales
Twitter/MKG20 - Javier Merchán
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
botón Guardar cambios para que los nuevos ajustes surtanefecto
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)
Siempre Guardar Cambios antes de salir
PRODETUR
Seguridad: Recomendaciones I
1. Mantener WordPress actualizado a la última versión, única garantía de control de vulnerabilidades conocidas.
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 estar informado de las alertas de seguridad.
PRODETUR
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 basede datos, seguridad del fichero wp-config.php así como delas carpetas del núcleo de WordPress y ficheros.htaccess.
4. ANTIVIRUS: http://wordpress.org/extend/plugins/antivirus/
PRODETUR
OPTIMIZACIÓN WP
• ENLACES PERMANENTES
• COPIAS DE SEGURIDAD
• TRASLADO DE LOCAL A SERVIDOR
• SOPORTE: TIRA DE FOROS
PRODETUR
Enlaces permanentes
PRODETUR
Como hacer copias de seguridad
1. Hacer copia de los archivos
2. Hacer copias de las BBDD
• Existen Plugins que facilitan la tarea
PRODETUR
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:
– SITE URL y HOME
• Revisar links metidos a mano
PRODETUR
Exportar BBDD
1.- Marcar todos2.- Exportar
PRODETUR
Importar BBDD
PRODETUR
Modificar Siteurl y Home (WP_OPTIONS)
PRODETUR
WP CONFIG
PRODETUR
Soporte: Busca en la red
• Si tenemos problemas con nuestra web:
o
PRODETUR
3.SEO PARA WP
PRODETUR
¿Qué es el SEO?
SEM
SEO
PRODETUR
• Más cara la inversión pero más económico a medio/ largo plazo.
• Se amortiza más porque permanece en el tiempo.
• Es más fiable para los navegantes.
PRODETUR
Como funcionan los buscadores
• Índice (o catálogo) que clasifica a partir de las palabras significativas que encuentra en las páginas web
PRODETUR
PRODETUR
¿Cómo sabemos en que puesto estamos?
Whatsmyserp
PRODETUR
Mide tus Progresos
PRODETUR
Añade Google Analytics a WP
PRODETUR
Esquema SEO a seguir
1. Optimización de la web2. Optimización del contenido
3. Incrementar las visitas y la interacción con el exterior
4. Conseguir enlaces
PRODETUR
Arquitectura
PRODETUR
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
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
PRODETUR
SEO by YOAST
PRODETUR
PRODETUR
Estilos básicos
•H1
•Title
•Meta
•SiteMap
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
PRODETUR
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
PRODETUR
Optimiza cada página o entrada
PRODETUR
Social
PRODETUR
XML SitemapGenera automáticamente un resumen de las páginas, entradas, categorías, autores de tu sitio y envíaselas a los principales buscadores.
PRODETUR
Optimiza tu web
• Velocidad de Carga
– WP Cache
– P3- Profiler
• Analiza la velocidad que pierde Wp por los plugins
• BBDD Limpia
– WP CleanFix
PRODETUR
Webmaster Tool
PRODETUR
HTML 5HTML 5 indexa mejor y esta mejor estructurado
Responsive design + tráfico moviles y tablets
PRODETUR
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
• Enlaces rotos: Broken link checker
PRODETUR
PARA CUALQUIER CUESTIÓN RELACIONADA CON ESTA SESIÓN PUEDES DIRIGIRTE A:
[email protected] (Dpto. formación)
www.prodetur.es