Taller de Wordpress

WEBS AMIGABLES CON BUSCADORES
TALLER DE
Formador: @merchanjavier
Objetivos del curso
Adquirir nociones imprescindibles de blog, web y gestores de contenidos. Conocer cuando usar WP.COM y WP.ORG Aprender la instalacin de un CMS como Wordpress Conocer los aspectos fundamentales de Wordpress que nos ayuden a comprender mejor el funcionamiento de una web y su relacin con los buscadores. Descubrir los requisitos recomendables que debe tener una web hoy da para competir en Internet. Disear una web de manera sencilla con Wordpress y a sacarle el mximo rendimiento al software libre.
Contenidos del Mdulo
Taller de WordPress
1. Breve Introduccin sobre Wordpress 2. Diseo Web con Wordpress 3. Instalacin de Local y Remoto 4. Descubriendo el Escritorio 5. Apariencia: Los Menus y los Temas 6. Plugins ,Widgets, Usuarios y Herramientas 7. Ajustes generales 8. Prctica
Twitter/MKG20 - Javier Merchn
1. Breve Introduccin sobre WP
Qu es un CMS?
Sistema de Gestin de Contenidos
programa que permite crear una estructura de soporte (framework) para la creacin y administracin de contenidos, principalmente en pginas web, por parte de los administradores, editores, participantes y dems roles controla una o varias bases de datos donde se aloja el contenido
Tipos de gestores de contenidos

Webs y Blogs: Wordpress, Drupal, Joomla Foros: FluxBB, Vanilla2, Simpleboard Wikis: Wikia, Mediawiki E-learning: Moodle Comercio electrnico: Prestashop, Magento
Porqu Wordpress?
Software de Cdigo Abierto Herramienta de blogs ms utilizada de su segmento. Est en desarrollo continuo y muy activo. La tecnologa antispam de Akismet Facilidad de uso Gran capacidad de Posicionamiento SEO
Ejemplos de webs con WP
WP.COM VS WP.ORG
WORDPRESS.COM Gratuito lo + bsico Fcil de empezar Mantenimiento externo Anuncios Poca Personalizacin Nombre de plantillas y WP en footer No plugins WORDPRESS.ORG Millones de Temas y Plugins Personalizacin Total Integracin de Flash, otras webs, reservas, Control de los archivos y BBDD. Hay que aprender .
Cuando WP.COM
Para blogs muy sencillos. Para proyectos personales. Cuando no se tiene apoyo o tiempo para mantener el blog. Cuando no importa la personalizacin. No tienes muchas visitas.
Cuando WP.ORG
Para proyectos profesionales. Cuando queremos diferenciacin. Para proyectos ms complejos. Para web y blogs en varios idiomas. Para usar plugins que potencian nuestro plan de e-Marketing: Newsletter, CRM, Integracin de sistemas, etc..
Vamos a ver WORDPRESS.ORG
2. Diseo Web con Wordpress
EL CDIGO ES POESA
WordPress es una avanzada plataforma semntica de publicacin personal orientada a la esttica, los estndares web y la usabilidad. WordPress es libre y, al mismo tiempo, gratuito.
Diseo Web con Wordpress
Nuestro objetivo es convertir nuestra web en una herramienta de venta. Una web de rpida carga Accesible y compatible Usable Indexable Sociable.

Qu buscamos?
ACCESIBILIDAD
El sito web pueda verse correctamente en todos los entornos y en la mayora de los usuarios Dispositivos Sistemas operativos y navegadores Velocidades de conexin Resoluciones de pantalla

USABILIDAD
Nuestro objetivo el usuario: Aspecto relacionado con la facilidad que un usuario (nuestro usuario) podr navegar por la web, encontrar lo que busca, descargar archivos sin dificultad, completar procesos de forma sencilla: Formularios, Carros de compra, Uso Intuitivo de nuestra web.
INDEXABILIDAD
Nuestro objetivo: los buscadores. Generacin de trfico
SOCIABILIDAD
Nuestro objetivo: La comunidad Establecer vnculos de relacin con clientes, colaboradores, profesionales, amigos, etc...

La mayora de los CMS funcionan de la siguiente manera: Necesitamos un servidor web con capacidad de procesado PHP y un servidor de Base de Datos MYSQL.
ARCHIVOS PHP BBDD
+

Esto es obvio, pero
muy importante saber elegir bien!
Nuestra web debe estar alojada en un servidor con acceso a Internet.
Qu tipo de servidor necesitamos?
WORDPRESS es Software libre

1. Servidor Apache 2. Necesitamos MySQL 4 o superior 3. PHP 5 o superior
BBDD
3. Instalacin en Local y Remoto
Instalacin en Local
Para trabajar el boceto se instala en el propio equipo: XAMPP
Capaz de interpretar paginas dinmicas WORDPRESS, JOOMLA, PRESTASHOP, MAGENTO
Instalacin en Local Porqu xampp? En nuestro caso usaremos un servidor de sitios web instalado en nuestro equipo. Lo usan los diseadores como una herramienta de desarrollo porque es ms rpido y seguro. El programa que nos proporciona el entorno de trabajo es XAMPP
XAMPP para Windows o MAC
Enlace Xampp: http://www.apachefriends.org/es/xampp.h tml

Instalacin de Xampp
Xampp es un servidor con el que podremos trabajar cualquier CMS (Wordpress, Joomla, Magento, Prestashop, etc) directamente en nuestro ordenador. Lo usaremos para practicar en el .
TALLER DE WORDPRESS
Formador: @merchanjavier
Busca Xampp en Google y pincha en este enlace
Elige tu sistema operativo
PARA EL USO EN WINDOWS
PARA EL USO EN MAC
Instalacin en MAC
Instrucciones para la instalacin en MAC http://www.apachefriends.org/en/xamppmacosx.html#849
Para instalar en Windows
Instalacin en Windows
El enlace de descarga esta en la HOME. Como se ve en la imagen est al final. ste es el link para Windows http://sourceforge.net/projects/x ampp/files/XAMPP%20Windows /1.7.7/xampp-win32-1.7.7-VC9installer.exe/download
El Link a utilizar es INSTALLER
Pinchamos en el Archivo descargado con un icono naranja y ejecutamos en la versin ENGLISH
Aviso para los Windows Vista

Para los windows vista hay que deshabilitar el control de usuario. AQU explica como. Para XP y Siete no hay problemas. Pulsa Aceptar
Comienza la Instalacin
Instalar en carpeta c:/Xampp
Dejar tal como aparece. INSTALL
Aparece una pantalla en MS-DOS. Es Normal y desaparece sola
Instalacin completada
Instalacin en Local y Remoto
Instalar Wordpress
Preparamos nuestro entorno Xampp Nos hacemos con los archivos de WP Buscamos nuestra web en el navegador Creamos una base de datos Unimos la BBDD a los archivos
Instalacin en Local 1. Accionar el servidor apache y MYSQL con el acceso directo a XAMPP
2. Usar C:// XAMPP como si nuestro fuera nuestro alojamiento
XAMPP
Instalacin en Local 3. Descarga: http://es.wordpress.org/
Instalacin en Local 4. Ir a carpeta Htdocs que es donde ubicar los archivos
Normalmente est en EQUIPO/DISCO LOCAL C:/XAMPP/HTDOCS

Instalacin en Local 5. Pegar Wordpress.zip 6. Descomprimir el ZIP en la carpeta RAIZ C:/XAMPP/HTDOCS/WORDPRESS
Instalacin en Local 7. Abrir el navegador (Firefox, Safari, Explorer, Chrome,) 8. Escribir en la URL: localhost/wordpress
Instalacin en Local 9. Crear archivo de configuracin. Este archivo es nuestra unin entre los archivos y la BBDD. Pulsar Vamos a ello!
Instalacin en Local 10. Es el momento de: Crear una base de datos I.- Abrir el navegador e ir a localhost/phpmyadmin II.- Pulsar en Base de Datos
Instalacin en Local III.- Poner un nombre descriptivo y pulsar CREAR
Nuestros datos son: Nombre de la Base de datos: elnombrehemosescritoarriba Usuario: ROOT Contrasea: ninguna
Instalacin en Local y Servidor Se une la BBDD con los archivos
Wp-config
+
Instalacin en Local y Servidor 11. Ahora debemos introducir la informacin de nuestra BBDD, de esta manera:
Instalacin en Local y Servidor
Instalacin en Local y Remoto
Escribir en algn sitio las contraseas de entrada y el nombre de usuario si no queremos dejar inutilizado el portal INSTALAR WORDPRESS
y luego
ACCEDER
Ahora se estn escribiendo las tablas en la BBDD
Instalacin en Local y Servidor Para Instalar en Servidor, haremos los mismos pasos pero en nuestro Alojamiento contratado. Para facilitaros la tarea he desarrollado un manual de instalacin en el servidor 1 & 1.
Instalacin en 1&1
CLAVES PARA PRUEBAS

1.disenowebsevilla.org 2.disenowebsevilla.org 3.disenowebsevilla.org 4.disenowebsevilla.org 5.disenowebsevilla.org
Usuario: admin Pass: disenowebsevillax
Atencin: cambiar una vez entramos
4. Descubriendo el escritorio
Descubriendo el Escritorio
Acceder =
oc! "o#$%no&'rec!rpe$!%()p-!d&in
Acceder en re&o$o = )))*&ido&inio*co&()p-!d&in

Pulsand en el n m!re de la we! arri!a a la iz"uierda n s lleva al
+ron$ End
A#, e# ! principio n-e#$r! )e' o ' og

.*- E#cri$orio Elementos de ayuda Ahora mismo Publicacin rpida Comentarios recientes ltimos borradores Enlaces entrantes
Pers naliza!le en Opcione# de P!n$! !
Servidor de Noticias /*- Ac$-! i0!r
Blog oficial de Wordpress Plugins Otras Noticias de Wordpress
#ersi$n de %P Plugins Temas
Para actualizar SIEMPRE debemos tener una copia de seguridad de nuestro Wordpress.
Entradas, Categoras, Pginas

Entradas:
Lo usamos para el contenido de actualizacion periodica como noticias, novedades, artculos, promociones, etc Entran con fuerza pero se diluyen
Entradas
Categoras:
Lo usamos para ordenar y clasificar las entradas. Pueden dividirse segn diferentes criterios que elije el autor: tema, localizacin, segmento, etc Ej: Futbol,Baloncesto, Motor, Ej: Web, SMM, LOPD
Entradas, Categoras, Pginas

Pginas:
Lo usamos para publicar contenido esttico y descriptivo. Est siempre a la vista. Ej: Acerca de, Aviso Legal, Quienes somos, nuestros productos
Entradas
Para gestionar el contenido dinmico
Descubriendo el Escritorio Entradas: Tienen un editor de contenidos muy intuitivo. Las entradas se ordenan por categoras. Podemos Aadir entradas o modificar una existente.
Descubriendo el Escritorio Aadir una Entrada: Vista Visual o HTML para conocedores de cdigo. Texto en negrita, cursiva, tamao, vietas, gramtica, Botn para ver ms opciones Hipervinculos Linea de leer ms Comilla de Cita Pegar desde un word u otra web. Subir o insertar imgenes, videos u objetos. Integrarla en una categora Publicar o Guardar como borrador Programar su publicacin. Establecer contrasea: Entrada privada
Descubriendo el Escritorio IMA1EN DES2ACADA
Descubriendo el Escritorio Dependiendo del tema instalado tendremos ms o menos funciones para las entradas. Tambin los plugins que instalamos muestran sus herramientas de trabajo en esta pantalla, que se regula en OPCIONES DE PANTALLA
Descubriendo el Escritorio Categoras : Organiza tus entradas por temtica
Novedades Multimedia
Wordpress 3.5
Multimedia - Librera multimedia: Es aqu donde se almacenan y se gestionan las imgenes, pdf, videos y otros documentos subidos.
-Aadir nuevo Podemos subir archivos desde aqu o desde la entrada o pgina donde ir publicado. Arrastra el archivo y sueeeeeeeelta.
Enlaces
En este apartado incluimos los enlaces a otros blogs u otras webs relacionadas. El intercambio de enlaces es muy importante en el SEO
Tipos de enlaces
_blank nueva ventana o pestaa. _top ventana o pestaa actual, sin marcos.
Usaremos Blank para enlaces a otras webs externas y Top para enlaces propios, ya que seguiremos teniendo al visitante en nuestra web
Descubriendo el Escritorio Enlaces Lo subimos a nuestro blog a travs de los WIDGETS
Descubriendo el Escritorio 2ODAS LAS P31INAS4 &rganizaci$n de las pginas pu!licadas
Descubriendo el Escritorio P5gin!#4 'ndice( rganizaci$n ) edici$n rpida de las pginas
*n P5gin!# p dem s rdenarlas p r aut r( +echa u rden al+a!,tic P dem s !uscar p r pala!ras tagsP dem s editar rpidamente algunas m di+icaci nes-
Descubriendo el Escritorio P5gin!#4 .a edici$n es igual a la de una entrada- /e le puede asignar una plantilla predeterminada( "ue seg0n el T*M1 tendr ms variedad-
P5gin!#
Publicar Para publicar, programar o guardar borrador. Permite crear entradas privadas. Aqu tambin permite enviar la pgina a la papelera Atributos de pgina Ubicacin de la pgina en el men. Posicin que ir en el menu Tipo de pgina que queremos publicar. Premium. Imagen destacada La imagen que se usa para presentar la pgina. En algunos temas sirve para las miniaturas
Descubriendo el Escritorio IMA1EN DES2ACADA
Descubriendo el Escritorio Co&en$!rio# 2elaci$n de c mentari s ) gesti$n de l s mism s
5. Apariencia: Mens y Temas
Apariencia > Menu Mens Los Mens Personalizados te permiten colocar las pginas y categoras que deben aparecer en el Men de Navegacin, y ordenar su posicin en el mismo.
Apariencia > Menu Para crear un men personalizado dale un nombre y haz clic en Crear men. Despus elige objetos como pginas, categoras o enlaces personalizados de la columna izquierda para aadirlos a este men. Despus de aadir tus objetos, arrastra y sultalos en el orden que desees. Tambin puedes hacer clic en cada objeto para ver opciones de configuracin avanzadas. Cuando hayas terminado de crear tu men personalizado, asegrate de hacer clic en el botn Guardar men.
Apariencia > Menu Crear Menu
Apariencia > Menu Selecciona elementos Menu
Apariencia > Menu Ordenalos y Ubcalos en el tema
Apariencia > TEMAS Temas
Novedades Themes
Wordpress 3.5
Apariencia > TEMAS

Ap!rienci!
El diseo que tendr nuestra web lo define el TEMA que tengamos instalado. El tema por defecto que nos viene en Wordpress es el Twenty Ten , Eleven y Twelve Existen miles de temas diferentes y cada tema tiene sus propias opciones de personalizacin. 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.
Apariencia > TEMAS
Plantillas Premium
Las principales empresas que disean plantillas Premium para Wordpress son las siguientes. WOO Themes Studio Press Theme Forest Elegant Themes Natty WP
Ejemplo Plantilla Premiun
Apariencia > TEMAS

Ap!rienci!4 1dministrar Temas
Apariencia > TEMAS

Ap!rienci!4 'nstalar temas
Para instalar temas p dem s usar el '-#c!dor de % rdpress #-'ir -n !rc"i6o "ue tengam s en nuestr PC-
Apariencia > TEMAS

Apariencia: Subir una plantilla Premium. Ej: Feather
Apariencia > TEMAS Opciones del Tema: Dependen del tema instalado. Dos ejemplos Twenty Eleven Elegant Themes
6. Plugins, Widgets, usuarios y Herramientas
Plugins y Widgets Plugins Son aplicaciones que instalamos y que amplan las funciones de Wordpress.
Plugins y Widgets Plugins Se pueden buscar por palabras o tags Se pueden subir si lo tenemos en nuestro PC Ejemplo: Buscar SEO
Plugins y Widgets Plugins Instalados
Plugins y Widgets Algunos de los mejores Plugins son:
Akismet All in One SEO Q-Translate Nexgen Gallery Contact Form 7 Really Simple Captcha Google Map for Wordpress Twitter Facebook Social Share Sexy Bookmarks
Plugins y Widgets Widgets: Los usamos para mostrar en nuestra web las funcionalidades de wordpress, del tema o de los plugins.
Tenemos widgets preinstalados, adems los Plugins se muestran al exterior mediante Widgets Generalmente van en el sidebar o en el Footer. Se arrastran para activarlos.
Usuarios Aqu damos de alta a los administradores, Editores, Autores, Colaboradores o suscriptores
Herramientas Publicar esto: Nos permite coger prestado facilmente texto de otras fuentes. Funciona insertando en la barra de marcadores el enlace PUBLICA ESTO
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
7. Ajustes Generales
Ajustes Generales 1. Los campos en esta pantalla determinan algunas configuraciones bsicas de tu sitio. 2. La mayora de los temas muestran el ttulo del sitio en la parte superior de cada pgina, en la barra de ttulo del navegador, y como nombre identificativo para los feeds. La descripcin corta tambin 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 raz.
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 botn Guardar cambios para que los nuevos ajustes surtan efecto
Ajustes Generales
IMPORTANTE: IMPORTANTE: Dar de alta un buen Ttulo y Descripcin (SEO) Visibilidad del sitio: Permitir que el Blog sea indexado Enlaces permanentes: Colocar en NOMBRE DE ENTRADA (SEO)
Siempre Guardar Cambios antes de salir
Ajustes Generales
7. Prctica
Ejercicio
Redi#e7o de -n! p5gin! )e' con WordPre## *l e4ercici c nsiste en redise5ar la we! de tu empresa una parte de ella en % rdpress( c n al men s l s siguientes punt s6 3-- .a pgina tendr al men s 7 'tems en el Men02-- 1lg0n element del Men0 de!er ser despega!le 8-- 'nsertar c ntenid s multimedia6 9 t s( #ide s( etc-:-- 'nsertar l s acces s a las redes s ciales a trav,s de Plugins7-- *legir un tema ) tra!a4ar el dise5 de la plantilla ;-- 'nsertar l s Metas a trav,s de alg0n plugin la plantilla Premium-
MUCHAS GRACIAS
jmerchan@mkg20.com twitter/merchanjavier

Taller de Wordpress

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Taller de Wordpress

Uploaded by

Copyright:

Available Formats

WEBS AMIGABLES CON BUSCADORES

Objetivos del curso

Contenidos del Mdulo

1. Breve Introduccin sobre WP

Tipos de gestores de contenidos

Ejemplos de webs con WP

Vamos a ver WORDPRESS.ORG

2. Diseo Web con Wordpress

Diseo Web con Wordpress

Diseo Web con Wordpress

Twitter/MKG20 - Javier Merchn

Diseo Web con Wordpress

Twitter/MKG20 - Javier Merchn

Diseo Web con Wordpress

Twitter/MKG20 - Javier Merchn

Diseo Web con Wordpress

Nuestro objetivo: los buscadores. Generacin de trfico

Twitter/MKG20 - Javier Merchn

Diseo Web con Wordpress

Diseo Web con Wordpress

Diseo Web con Wordpress

muy importante saber elegir bien!

Nuestra web debe estar alojada en un servidor con acceso a Internet.

Diseo Web con Wordpress

Qu tipo de servidor necesitamos?

WORDPRESS es Software libre

Diseo Web con Wordpress

Twitter/MKG20 - Javier Merchn

Diseo Web con Wordpress

Twitter/MKG20 - Javier Merchn

3. Instalacin en Local y Remoto

Para trabajar el boceto se instala en el propio equipo: XAMPP

Capaz de interpretar paginas dinmicas WORDPRESS, JOOMLA, PRESTASHOP, MAGENTO

Twitter/MKG20 - Javier Merchn

Enlace Xampp: http://www.apachefriends.org/es/xampp.h tml

Busca Xampp en Google y pincha en este enlace

Elige tu sistema operativo

PARA EL USO EN WINDOWS

PARA EL USO EN MAC

Para instalar en Windows

El Link a utilizar es INSTALLER

Pinchamos en el Archivo descargado con un icono naranja y ejecutamos en la versin ENGLISH

Aviso para los Windows Vista

Instalar en carpeta c:/Xampp

Dejar tal como aparece. INSTALL

Aparece una pantalla en MS-DOS. Es Normal y desaparece sola

Instalacin en Local y Remoto

2. Usar C:// XAMPP como si nuestro fuera nuestro alojamiento

Instalacin en Local 3. Descarga: http://es.wordpress.org/

Twitter/MKG20 - Javier Merchn

Instalacin en Local 4. Ir a carpeta Htdocs que es donde ubicar los archivos

Normalmente est en EQUIPO/DISCO LOCAL C:/XAMPP/HTDOCS

Instalacin en Local 5. Pegar Wordpress.zip 6. Descomprimir el ZIP en la carpeta RAIZ C:/XAMPP/HTDOCS/WORDPRESS

Twitter/MKG20 - Javier Merchn

Twitter/MKG20 - Javier Merchn

Twitter/MKG20 - Javier Merchn

Twitter/MKG20 - Javier Merchn

Twitter/MKG20 - Javier Merchn

Instalacin en Local III.- Poner un nombre descriptivo y pulsar CREAR

Instalacin en Local y Servidor Se une la BBDD con los archivos

Twitter/MKG20 - Javier Merchn

Instalacin en Local y Servidor

Twitter/MKG20 - Javier Merchn

Twitter/MKG20 - Javier Merchn

Acceder en re&o$o = )))&ido&inioco&()p-!d&in