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
¿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
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..
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
Twitter/MKG20 - Javier Merchán
→Usable→Indexable→Sociable.
ACCESIBILIDAD
Diseño Web con Wordpress
El sito web pueda verse correctamente en todos los entornos y en la mayoría de los usuarios
ACCESIBILIDAD
Twitter/MKG20 - Javier Merchán
usuarios → Dispositivos Sistemas operativos y
navegadores→ Velocidades de conexión→ Resoluciones de pantalla
USABILIDAD
Diseño Web con Wordpress
Nuestro objetivo el usuario :Aspecto relacionado con la facilidad queun usuario (nuestro usuario) podránavegar por la web, encontrar lo que
Twitter/MKG20 - Javier Merchán
navegar por la web, encontrar lo quebusca, descargar archivos sin dificultad,completar procesos de forma sencilla:Formularios, Carros de compra,… UsoIntuitivo de nuestra web.
Diseño Web con Wordpress
Nuestro objetivo: los buscadores .
INDEXABILIDAD
Twitter/MKG20 - Javier Merchán
Nuestro objetivo: los buscadores .Generación de tráfico
Diseño Web con Wordpress
Nuestro objetivo: La comunidad
SOCIABILIDAD
Twitter/MKG20 - Javier Merchán
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
Diseño Web con Wordpress
→Necesitamos un servidor web con capacidad de procesado PHP y un servidor de Base de Datos MYSQL.
+
ARCHIVOS PHP BBDD
Twitter/MKG20 - Javier Merchán
+
Esto es obvio, pero muy importante saber elegir bien!
Diseño Web con Wordpress
→ Nuestra web debe estar alojada en un servidor con acceso a Internet.
¿Qué tipo de servidor necesitamos?
Diseño Web con Wordpress
WORDPRESS es Software libre
1. Servidor Apache
¿Qué tipo de servidor necesitamos?
Twitter/MKG20 - Javier Merchán
2. Necesitamos MySQL 4 o superior
3. PHP 5 o superior
Instalación en Local
Para trabajar el boceto se instala en el propio equipo: XAMPP
Twitter/MKG20 - Javier Merchán
Capaz de interpretar paginas dinámicas
WORDPRESS, JOOMLA, PRESTASHOP, MAGENTO
¿Porqué xampp?
Instalación en Local
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
Twitter/MKG20 - Javier Merchán
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
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
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
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
Instalación en Local
apache y MYSQL con el
acceso directo a
XAMPP
2. Usar C:// XAMPP como
Twitter/MKG20 - Javier Merchán
si nuestro fuera nuestro
alojamiento
XAMPP
4. Ir a carpeta Htdocs que es donde ubicar los archivos
Instalación en Local
Twitter/MKG20 - Javier Merchán
Normalmente está en EQUIPO/DISCO LOCAL C:/XAMPP/HTDOCS
5. Pegar Wordpress.zip
6. Descomprimir el ZIP en la carpeta RAIZ
Instalación en Local
C:/XAMPP/HTDOCS/WORDPRESS
Twitter/MKG20 - Javier Merchán
7. Abrir el navegador (Firefox, Safari, Explorer, Chrome,…)
Instalación en Local
8. Escribir en la URL: localhost/wordpress
Twitter/MKG20 - Javier Merchán
9. Crear “archivo de configuración”. Este archivo es nuestra
unión entre los archivos y la BBDD. Pulsar Vamos a ello!
Instalación en Local
Twitter/MKG20 - Javier Merchán
Instalación en Local
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
Twitter/MKG20 - Javier Merchán
Instalación en Local
III.- Poner un nombre descriptivo y pulsar CREAR
Twitter/MKG20 - Javier Merchán
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
Twitter/MKG20 - Javier Merchán
11. – Ahora debemos introducir la información de nuestra BBDD, de esta manera:
Instalación en Local y Servidor
Twitter/MKG20 - Javier Merchán
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
Twitter/MKG20 - Javier Merchán
Para Instalar en Servidor, haremos los mismos pasos pero en nuestro Alojamiento contratado.
Instalación en Local y Servidor
Para facilitaros la tarea he desarrollado un manual de instalación en el servidor 1 & 1.
Twitter/MKG20 - Javier Merchán
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
Acceder = localhost”nombrecarpeta”/wp-admin
Descubriendo el Escritorio
Twitter/MKG20 - Javier Merchán
Acceder en remoto = www.midominio.com/wp-admin
Descubriendo el Escritorio
Pulsando en el nombre de
Twitter/MKG20 - Javier Merchán
Pulsando en el nombre de
la web arriba a la izquierda
nos lleva al
Front End
1.- Escritorio
Elementos de ayuda
• Ahora mismo• Publicación rápida• Comentarios recientes
Descubriendo el Escritorio
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
Twitter/MKG20 - Javier Merchán
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
Descubriendo el Escritorio
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
Descubriendo el Escritorio
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
Entradas, Categorías, Páginas
Descubriendo el Escritorio
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
Twitter/MKG20 - Javier Merchán
Entradas: Tienen un editor de contenidos muy intuitivo. Las entradas se ordenan por categorías. Podemos Añadir entradas o modificar una existente.
Descubriendo el Escritorio
modificar una existente.
Twitter/MKG20 - Javier Merchán
Añadir una Entrada:
•Vista Visual o HTML para conocedores de código.
Descubriendo el Escritorio
•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.
Twitter/MKG20 - Javier Merchán
•Integrarla en una categoría•Publicar o Guardar como borrador•Programar su publicación.•Establecer contraseña: Entrada privada
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
Descubriendo el Escritorio
herramientas de trabajo en esta pantalla, que se regula en OPCIONESDE PANTALLA
Twitter/MKG20 - Javier Merchán
Categorías : Organiza tus entradas por temática
Descubriendo el Escritorio
Twitter/MKG20 - Javier Merchán
Multimedia - Librería multimedia: Es aquí donde se almacenan y se gestionan las imágenes, pdf, videos y otros documentos subidos.
Descubriendo el Escritorio
Twitter/MKG20 - Javier Merchán
-Añadir nuevo
Podemos subir archivos desde aquí o desde la entrada o página donde irá
Descubriendo el Escritorio
Podemos subir archivos desde aquí o desde la entrada o página donde irá publicado. Arrastra el archivo y sueeeeeeeelta.
Twitter/MKG20 - Javier Merchán
En este apartado incluimos los enlaces a otros blogs u otras webs relacionadas.
Enlaces
Descubriendo el Escritorio
webs relacionadas.
El intercambio de enlaces es muy importante en el SEO
Twitter/MKG20 - Javier Merchán
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
Descubriendo el Escritorio
Twitter/MKG20 - Javier Merchán
Páginas: Indice, organización y edición rápida de las páginas
Descubriendo el Escritorio
•En Páginas podemos ordenarlas por autor, fecha u orden alfabético.
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.
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.
Descubriendo el Escritorio
Twitter/MKG20 - Javier Merchán
Páginas
Publicar� Para publicar, programar o guardar
Descubriendo el Escritorio
� 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.
Twitter/MKG20 - Javier Merchán
Premium.
Imagen destacada� La imagen que se usa para presentar
la página.� En algunos temas sirve para las
miniaturas
Relación de comentarios y gestión de los mismos
Comentarios
Descubriendo el Escritorio
Twitter/MKG20 - Javier Merchán
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ú .
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.
Twitter/MKG20 - Javier Merchá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
Twitter/MKG20 - Javier Merchán
• Natty WP
Apariencia: Instalar temas
Apariencia > TEMAS
Para instalar temas
podemos usar el
buscador de
Wordpress o subir un archivo que
Twitter/MKG20 - Javier Merchán
un archivo que
tengamos en
nuestro PC.
Apariencia: Subir una plantilla Premium. Ej: Feather
Apariencia > TEMAS
Twitter/MKG20 - Javier Merchán
1 2
Opciones del Tema: Dependen del tema instalado. Dos ejemplos
Apariencia > TEMAS
Twenty Eleven Elegant Themes
Twitter/MKG20 - Javier Merchán
Son aplicaciones que instalamos y que amplían las funciones de Wordpress.
Plugins
Plugins y Widgets
Wordpress.
Twitter/MKG20 - Javier Merchán
Se pueden buscar por palabras o tags
Plugins
Plugins y Widgets
Se pueden subir si lo tenemos en nuestro PC
Ejemplo: Buscar SEO
Twitter/MKG20 - Javier Merchán
Algunos de los mejores Plugins son:
Plugins y Widgets
•Akismet
•All in One SEO
•Q-Translate
•Nexgen Gallery
•Contact Form 7
Twitter/MKG20 - Javier Merchán
•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
Twitter/MKG20 - Javier Merchán
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
Twitter/MKG20 - Javier Merchán
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
Twitter/MKG20 - Javier Merchán
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…
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
Twitter/MKG20 - Javier Merchán
(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
Twitter/MKG20 - Javier Merchán
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)
Twitter/MKG20 - Javier Merchán
Siempre Guardar Cambios antes de salir
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..
Twitter/MKG20 - Javier Merchán
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.
Top Related