taller de wordpress

WEBS AMIGABLES CON WEBS AMIGABLES CON BUSCADORESBUSCADORESBUSCADORESBUSCADORES

TALLER DE TALLER DE

Formador: @merchanjavier

→ Adquirir nociones imprescindibles de blog, web y gestores

Objetivos del curso

→ Adquirir nociones imprescindibles de blog, web y gestoresde contenidos.

→ Conocer cuando usar WP.COM y WP.ORG

→ Aprender la instalación de un CMS como Wordpress

→ Conocer los aspectos fundamentales de Wordpress que nos ayuden a comprender mejor el funcionamiento de una web y su relación con los buscadores.

→Descubrir los requisitos recomendables que debe tener una web hoydía para competir en Internet.

→Diseñar una web de manera sencilla con Wordpress y a sacarle elmáximo rendimiento al software libre.

buscadores.

Taller de WordPress

Contenidos del Módulo

1. Breve Introducción sobre Wordpress

2. Diseño Web con Wordpress

3. Instalación de Local y Remoto

4. Descubriendo el Escritorio

5. Apariencia: Los Menus y los Temas

Twitter/MKG20 - Javier Merchán

5. Apariencia: Los Menus y los Temas

6. Plugins ,Widgets, Usuarios y Herramientas

7. Ajustes generales

8. Práctica

1. Breve Introducción sobre WP

¿Qué es un CMS?

• Sistema de Gestión de Contenidos• Sistema de Gestión de Contenidos

“…programa que permite crear una estructurade soporte (framework ) para la creación yadministración de contenidos, principalmenteen páginas web , por parte de losen páginas web , por parte de losadministradores, editores, participantes y demásroles…” “…controla una o varias bases dedatos donde se aloja el contenido …”

Tipos de gestores de contenidos

• Webs y Blogs: Wordpress, Drupal, • Webs y Blogs: Wordpress, Drupal, Joomla

• Foros : FluxBB, Vanilla2, Simpleboard• Wikis : Wikia, Mediawiki• E-learning : Moodle• E-learning : Moodle• Comercio electrónico: Prestashop,

Magento

¿Porqué Wordpress?

• Software de Código Abierto• Software de Código Abierto• Herramienta de blogs más utilizada de su

segmento.• Está en desarrollo continuo y muy activo.• La tecnología antispam de Akismet• La tecnología antispam de Akismet• Facilidad de uso• Gran capacidad de Posicionamiento SEO

Ejemplos de webs con WP

WP.COM VS WP.ORG

WORDPRESS.COM WORDPRESS.ORGWORDPRESS.COM

• Gratuito lo + básico

• Fácil de empezar• Mantenimiento externo

• Anuncios

WORDPRESS.ORG

• Millones de Temas y Plugins

• Personalización Total• Integración de Flash,

otras webs, reservas, …• Anuncios

• Poca Personalización• Nombre de plantillas y

WP en footer

• No plugins

• Control de los archivos y BBDD.

• Hay que aprender ….

Cuando WP.COM

• Para blogs muy sencillos.• Para blogs muy sencillos.• Para proyectos personales.• Cuando no se tiene apoyo o tiempo para

mantener el blog.• Cuando no importa la personalización.• Cuando no importa la personalización.• No tienes muchas visitas.

Cuando WP.ORG

• Para proyectos profesionales.• Para proyectos profesionales.• Cuando queremos diferenciación.• Para proyectos más complejos. • Para web y blogs en varios idiomas.• Para usar plugins que potencian nuestro • Para usar plugins que potencian nuestro

plan de e-Marketing: Newsletter, CRM, Integración de sistemas, etc..

Vamos a ver WORDPRESS.ORGWORDPRESS.ORG

2. Diseño Web con Wordpress

EL CÓDIGO ES POESÍA

WordPress es una avanzada plataforma semántica de

publicación personal orientada a la estética, los

estándares web y la usabilidad. WordPress es libre y, estándares web y la usabilidad. WordPress es libre y,

al mismo tiempo, gratuito .

Diseño Web con Wordpress

Nuestro objetivo es convertir nuestra web en una herramienta de venta .

→Una web de rápida carga→Accesible y compatible→Usable


→Usable→Indexable→Sociable.

¿Qué buscamos?



ACCESIBILIDAD


El sito web pueda verse correctamente en todos los entornos y en la mayoría de los usuarios

ACCESIBILIDAD


usuarios → Dispositivos Sistemas operativos y

navegadores→ Velocidades de conexión→ Resoluciones de pantalla

USABILIDAD


Nuestro objetivo el usuario :Aspecto relacionado con la facilidad queun usuario (nuestro usuario) podránavegar por la web, encontrar lo que


navegar por la web, encontrar lo quebusca, descargar archivos sin dificultad,completar procesos de forma sencilla:Formularios, Carros de compra,… UsoIntuitivo de nuestra web.


Nuestro objetivo: los buscadores .

INDEXABILIDAD


Nuestro objetivo: los buscadores .Generación de tráfico


Nuestro objetivo: La comunidad

SOCIABILIDAD


Nuestro objetivo: La comunidadEstablecer vínculos de relación con clientes, colaboradores, profesionales, amigos, etc...

La mayoría de los CMS funcionan de la siguiente manera:

→Necesitamos un servidor web con capacidad de procesado PHP y un


→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

¿Qué tipo de servidor necesitamos?


2. Necesitamos MySQL 4 o superior

3. PHP 5 o superior

BBDDDiseño Web con Wordpress


3. Instalación en Local y Remoto

Instalación en Local

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


Capaz de interpretar paginas dinámicas

WORDPRESS, JOOMLA, PRESTASHOP, MAGENTO

¿Porqué xampp?


En nuestro caso usaremos un servidorde sitios web instalado en nuestroequipo.

Lo usan los diseñadores como unaherramienta de desarrollo porque es másrápido y seguro.

El programa que nos proporciona el


El programa que nos proporciona elentorno de trabajo es XAMPP

Enlace Xampp:http://www.apachefriends.org/es/xampp.html

XAMPP para Windows o MAC

Instalación de XamppXampp 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 WORDPRESSTALLER 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

Instalación en MAC

Instrucciones para la instalación en MACInstrucciones para la instalación en MAC

• http://www.apachefriends.org/en/xampp-macosx.html#849

Para instalar en Windows

Instalación en Windows• El enlace de descarga esta en • El enlace de descarga esta en

la HOME. Como se ve en la imagen está al final .

• Éste es el link para Windowshttp://sourceforge.net/projects/xampp/files/XAMPP%20Windowsampp/files/XAMPP%20Windows/1.7.7/xampp-win32-1.7.7-VC9-installer.exe/download

El Link a utilizar es INSTALLER

Pinchamos en el Archivo descargado con un icono naranja y ejecutamos en la versión ENGLISH

Aviso para los Windows Vista

• Para los windows vista hay que • 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 Instalación

Instalar en carpeta c:/Xampp

Dejar tal como aparece. INSTALL

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

Instalación completada

Instalar Wordpress

Instalación en Local y Remoto

Instalar Wordpress

• Preparamos nuestro entorno Xampp• Nos hacemos con los archivos de WP• Buscamos nuestra web en el navegador • Buscamos nuestra web en el navegador • Creamos una base de datos• Unimos la BBDD a los archivos

1. Accionar el servidor


apache y MYSQL con el

acceso directo a

XAMPP

2. Usar C:// XAMPP como


si nuestro fuera nuestro

alojamiento

XAMPP

3. Descarga: http://es.wordpress.org/



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



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

5. Pegar Wordpress.zip

6. Descomprimir el ZIP en la carpeta RAIZ


C:/XAMPP/HTDOCS/WORDPRESS


7. Abrir el navegador (Firefox, Safari, Explorer, Chrome,…)


8. Escribir en la URL: localhost/wordpress


9. Crear “archivo de configuración”. Este archivo es nuestra

unión entre los archivos y la BBDD. Pulsar Vamos a ello!




10. Es el momento de: Crear una base de datos

I.- Abrir el navegador e ir a localhost/phpmyadminII.- Pulsar en Base de DatosII.- Pulsar en Base de Datos



III.- Poner un nombre descriptivo y pulsar CREAR


Nuestros datos son:Nombre de la Base de datos : “elnombrehemosescritoarriba”Usuario : ROOTContraseña : “ninguna”

Instalación en Local y Servidor

Se une la BBDD con los archivos

+Wp-config


11. – Ahora debemos introducir la información de nuestra BBDD, de esta manera:



Escribir en algún sitio las contraseñas de entrada y el nombre de usuario si no queremos dejar inutilizado el portal

Instalación en Local y Remoto

y el nombre de usuario si no queremos dejar inutilizado el portal

INSTALAR WORDPRESS y luego ACCEDER

Ahora se están escribiendo las tablas en la BBDD


Para Instalar en Servidor, haremos los mismos pasos pero en nuestro Alojamiento contratado.


Para facilitaros la tarea he desarrollado un manual de instalación en el servidor 1 & 1.


Instalación en 1&1

CLAVES PARA PRUEBAS• 1.disenowebsevilla.org• 1.disenowebsevilla.org• 2.disenowebsevilla.org• 3.disenowebsevilla.org• 4.disenowebsevilla.org• 5.disenowebsevilla.org

– Usuario: admin– Pass: disenowebsevillax

Atención : cambiar una vez entramos

4. Descubriendo el escritorio

Acceder = localhost”nombrecarpeta”/wp-admin

Descubriendo el Escritorio


Acceder en remoto = www.midominio.com/wp-admin


Pulsando en el nombre de


Pulsando en el nombre de

la web arriba a la izquierda

nos lleva al

Front End



Así es al principio nuestra web o blog

1.- Escritorio

Elementos de ayuda

• Ahora mismo• Publicación rápida• Comentarios recientes


Servidor de Noticias

• Comentarios recientes• Últimos borradores• Enlaces entrantes

• Blog oficial de Wordpress• Plugins • Otras Noticias de Wordpress

2.- Actualizar

Personalizable

en

Opciones de Pantalla


2.- Actualizar

•Versión de WP

•Plugins

•Temas

Para actualizar SIEMPRE debemos tener una copia de seguridad

de nuestro Wordpress.

Entradas, Categorías, Páginas



Entradas :

• Lo usamos para el contenido de actualizacion periodicacomo noticias, novedades, artículos, promociones, etc…como noticias, novedades, artículos, promociones, etc…

• Entran con fuerza pero se diluyen

Entradas


Categorías :

• Lo usamos para ordenar y clasificar las entradas.• Pueden dividirse según diferentes criterios que elije • Pueden dividirse según diferentes criterios que elije

el autor: tema, localización, segmento, etc…• Ej: Futbol,Baloncesto, Motor,• Ej: Web, SMM, LOPD



Páginas :

• Lo usamos para publicar contenido estático y descriptivo.

• Está siempre a la vista.• Está siempre a la vista.

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

EntradasDescubriendo el Escritorio

Para gestionar el contenido dinámico


Entradas: Tienen un editor de contenidos muy intuitivo. Las entradas se ordenan por categorías. Podemos Añadir entradas o modificar una existente.


modificar una existente.


Añadir una Entrada:

•Vista Visual o HTML para conocedores de código.


•Vista Visual o HTML para conocedores de código.•Texto en negrita, cursiva, tamaño, viñetas, gramática, …•Botón para ver más opciones•Hipervinculos•Linea de leer más•Comilla de Cita•Pegar desde un word u otra web.•Subir o insertar imágenes, videos u objetos.


•Integrarla en una categoría•Publicar o Guardar como borrador•Programar su publicación.•Establecer contraseña: Entrada privada

IMAGEN DESTACADA



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


herramientas de trabajo en esta pantalla, que se regula en OPCIONESDE PANTALLA


Categorías : Organiza tus entradas por temática



Novedades Multimedia

Wordpress 3.5Wordpress 3.5

Multimedia - Librería multimedia: Es aquí donde se almacenan y se gestionan las imágenes, pdf, videos y otros documentos subidos.



-Añadir nuevo

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


Podemos subir archivos desde aquí o desde la entrada o página donde irá publicado. Arrastra el archivo y sueeeeeeeelta.


En este apartado incluimos los enlaces a otros blogs u otras webs relacionadas.

Enlaces


webs relacionadas.

El intercambio de enlaces es muy importante en el SEO


Tipos de enlaces

• _blank — nueva ventana o pestaña.• _blank — nueva ventana o pestaña.• _top — ventana o pestaña actual, sin

marcos.

“Usaremos Blank para enlaces a otras webs “Usaremos Blank para enlaces a otras webs externas y Top para enlaces propios, ya que seguiremos teniendo al visitante en nuestra web”

Lo subimos a nuestro blog a través de los WIDGETS

Enlaces



TODAS LAS PÁGINAS: Organización de las páginas publicadas


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


•En Páginas podemos ordenarlas por autor, fecha u orden alfabético.


•En Páginas podemos ordenarlas por autor, fecha u orden alfabético.

•Podemos buscar por palabras o tags.

•Podemos editar rápidamente algunas modificaciones.

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.



Páginas

Publicar� Para publicar, programar o guardar


� 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� Tipo de página que queremos publicar.

Premium.


Premium.

Imagen destacada� La imagen que se usa para presentar

la página.� En algunos temas sirve para las

miniaturas

IMAGEN DESTACADA



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

Comentarios



5. Apariencia: Menús y Temas

Menús

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

Apariencia > Menu

• 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.

Apariencia > Menu

•Para crear un menú personalizado dale un nombre y haz clic enCrear menú .Crear menú .

•Después elige objetos como páginas, categorías o enlacespersonalizados de la columna izquierda para añadirlos a este menú.

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

•También puedes hacer clic en cada objeto para ver opciones de•También puedes hacer clic en cada objeto para ver opciones deconfiguración avanzadas.

•Cuando hayas terminado de crear tu menú personalizado, asegúratede hacer clic en el botón Guardar menú .

Crear Menu

Apariencia > Menu

Selecciona elementos Menu

Apariencia > Menu

Ordenalos y Ubícalos en el tema

Apariencia > Menu

Temas

Apariencia > TEMAS

Novedades Themes

Wordpress 3.5Wordpress 3.5

Apariencia

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

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 Twenty Ten , Eleven y Twelve

• 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.

Plantillas Premium

Apariencia > TEMAS

• Las principales empresas que diseñan plantillas Premium para Wordpress son las siguientes.

• WOO Themes• Studio Press• Theme Forest• Elegant Themes• Natty WP


• Natty WP

Ejemplo Plantilla Premiun


Apariencia: Administrar Temas

Apariencia > TEMAS


Apariencia: Instalar temas

Apariencia > TEMAS

Para instalar temas

podemos usar el

buscador de

Wordpress o subir un archivo que


un archivo que

tengamos en

nuestro PC.

Apariencia: Subir una plantilla Premium. Ej: Feather

Apariencia > TEMAS


1 2

Opciones del Tema: Dependen del tema instalado. Dos ejemplos

Apariencia > TEMAS

Twenty Eleven Elegant Themes


6. Plugins, Widgets , usuarios y Herramientas

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

Plugins

Plugins y Widgets

Wordpress.


Se pueden buscar por palabras o tags

Plugins

Plugins y Widgets

Se pueden subir si lo tenemos en nuestro PC

Ejemplo: Buscar SEO


Plugins Instalados

Plugins y Widgets


Algunos de los mejores Plugins son:

Plugins y Widgets

•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

Widgets: Los usamos para mostrar en nuestra web lasfuncionalidades de wordpress, del tema o de los plugins.

Plugins y Widgets

� Tenemos widgetspreinstalados, además los Pluginsse muestran al exterior mediante Widgets


Widgets

� Generalmente van en el sidebar o en el Footer.

� Se arrastran para activarlos.

Aquí damos de alta a los administradores, Editores, Autores, Colaboradores o suscriptores

Usuarios


Publicar esto: Nos permite “coger prestado” facilmente texto de otras fuentes. Funciona insertando en la barra de marcadores el enlace PUBLICA ESTO

Herramientas

PUBLICA ESTO

Importar y Exportar : Muy útil para trasladar los contenidos


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

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

Ajustes Generales

básicas de tu sitio.

2. La mayoría de los temas muestran el título del sitio en la partesuperior de cada página, en la barra de título del navegador, ycomo nombre identificativo para los feeds. La descripción cortatambié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


(ejemplo.com) o diferentes; por ejemplo, puedes tener los archivosdel core de WordPress en un subdirectorio(ejemplo.com/wordpress) en vez de en el directorio raíz.

4. Si deseas que los visitantes se puedan registrar en tu sitio, en vezde que el administrador del sitio deba registrarlos, marca la casilla

Ajustes Generales

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

5. UTC quiere decir Hora universal coordinada (CoordinatedUniversal Time)

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


6. Recuerda hacer clic en la parte inferior de la pantalla sobre elbotón Guardar cambios para que los nuevos ajustes surtan efecto

IMPORTANTEIMPORTANTE::

Ajustes Generales

IMPORTANTEIMPORTANTE::

� 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

Ajustes Generales


7. Práctica

El ejercicio consiste en rediseñar la web de tu empresa o una parte de ella en

Rediseño de una página web con WordPress

Ejercicio

El ejercicio consiste en rediseñar la web de tu empresa o una parte de ella en

Wordpress, con al menos los siguientes puntos:

1.- La página tendrá al menos 5 Items en el Menú.

2.- Algún elemento del Menú deberá ser despegable

3.- Insertar contenidos multimedia: Fotos, Videos, etc..


4.- Insertar los accesos a las redes sociales a través de Plugins.

5.- Elegir un tema y trabajar el diseño de la plantilla

6.- Insertar los Metas a través de algún plugin o la plantilla Premium.

MUCHAS GRACIAS

[email protected] -twitter/merchanjaviertwitter/merchanjavier

taller de wordpress

Documents