herramientas de lanzamiento. nuestra web
TRANSCRIPT
Herramientas de lanzamiento
Nuestra web
Lorena Fernández (@loretahur)
Metodología
● Obligatorio interrumpir en cualquier momento.
● Obligatorio generar debate y discusión.● Para cualquier duda o
sugerencia: Lorena Fernández
@loretahur
Vuestro turno...
¿Qué vamos a ver hoy?
● Nuestra casa, nuestra web:
– Hosting y dominio.– Buscando un CMS para nuestra
web.– WordPress a fondo.– Puesta a punto de nuestra web.
Hosting
vs
Dominio
¿Qué es eso del DNS?
● DNS: Domain Name System.
● Traducir (resolver) nombres inteligibles para las personas en direcciones IP que entienden las máquinas.
● Nslookup.
● Mirando nuestra IP www.whatismyip.com
● Mirando la IP de un dominio www.dnswatch.info
● Obteniendo más información de un dominio whois.domaintools.com
Dominios de nivel superior
● Dominios de nivel superior geográficos (ccTLD): .es, .eu, .uk, …
● Dominios de nivel superior genéricos (gTLD):
– No restringidos (.com, .info, .net, .org).
– Restringidos (.travel, .xxx, .mobi, ...).● Dominios de nivel superior internacionalizados
(con caracteres distintos del alfabeto latino).
¿Qué caracteres puedo utilizar en mi dominio?
● Tu dominio podrá contener todas las letras del alfabeto (aunque ojo con la ñ), los números del 0 al 9 y el guión medio (-).
● El guión no puede aparecer al principio ni al final del nombre de dominio.
● No se puede usar guión bajo, ni puntos, ni acentos, ni caracteres especiales como &, %, $…
● Longitudes máximas y mínimas: 64 y 2 caracteres.
¿Cómo afecta el dominio al
posicionamiento?
¿Cómo afecta el dominio al posicionamiento?
● En el último algoritmo de Google, tres factores influyen con mayor fuerza:
– Antigüedad del dominio.
– Duración del contrato de renovación.
– Dominios geográficos (por ejemplo, Google España premiará a los .es), al igual que la ubicación de los servidores.
Comprando el dominio
● GoDaddy: http://es.godaddy.com
● ¿Cuánto me va a costar? Dependerá del dominio de nivel superior (.net, .com, .org, .es, …) *:
– .net: 17,13 € / año
– .com: 15,13 € / año
– .org: 18,13 € / año
– .es: 10,99 € / año* Búsqueda realizada el 05/10/2015
¿Compramos todos los dominios?
Subdominios
● Diferencia entre subdominio y carpeta.
– ¡Ojo con el SEO!● ¿Con www o sin www? ● La importancia de las redirecciones
301.
Hosting
● Dos tipos de hospedaje: – Compartido.
– Dedicado.
● Importante aquí saber cuál va a ser la tecnología que usemos para implementar nuestra página.
● Revisar el límite de espacio y de transferencia que tenemos al mes.
Hosting
● ¿Dónde comprar?– http://es.godaddy.com (compartido desde
6,04 € / mes).
– www.dedispace.com (compartido desde 9,95 € / mes).
– www.layeredtech.com (un servidor básico dedicado nos puede salir por unos 150 € / mes).
* Búsqueda realizada el 05/10/2015
Content Management System
● Mejor que crear una web desde cero, hacer uso de un CMS existente.
● CMS: Content Management System, sistema de gestión de contenidos.
● Más utilizados:
¿Pero eso no es para blogs?
Pros de WordPress
● Es el CMS más extendido, lo que nos asegura continuidad del proyecto. De hecho, se actualiza constantemente (actualizaciones de seguridad y de incorporación de funcionalidades).
● Cuenta con una gran comunidad de desarrolladores por detrás que están trabajando en themes y plugins.
● Es software libre.
● Está optimizado para SEO.
● Gran cantidad de recursos disponibles (plantillas y plugins).
● Muy usable como usuarios y fácil de evolucionar como desarrolladores.
wordpress.com vs. wordpress.org
+ 300 plantillas gratis
(pero es un catálogo cerrado)
Y sin posibilidad de instalar plugins
Wordpress.org
Una instalación de WordPress es totalmente portableSólo necesitaremos las carpetas de la web (php)
y la BD (MySQL)
Un core que se “vitamina” con plugins
Tiene una serie de funcionalidades que vienen en su núcleo (gestión de feeds, búsquedas, etiquetas, categorías, …) y
luego se le pueden añadir otras muchas a través de plugins.
El gran repositorio de WordPress de plugins:
https://wordpress.org/plugins
Plugins imprescindibles (I)
● Akismet: el tragador de spam. Viene instalado ya por defecto.
● Contact Form 7: para crear formularios personalizados en múltiples idiomas, con múltiples campos y diferentes validaciones. Por ejemplo, el de contacto.
● qtranslate: si queremos tener nuestro site en varios idiomas.
● All in One SEO Pack: para optimizar al máximo nuestro site frente a los buscadores. El complemento ideal es Google XML Sitemaps, que genera de forma automática nuestro sitemap cada vez que se publica algo nuevo.
Plugins imprescindibles (II)
● WordPress Related Posts nos muestra publicaciones relacionadas, con imágenes y texto.
● WordPress Backup to Dropbox para el backup de base de datos.
● Members only, para limitar el acceso a la página (también se pueden poner páginas concretas privadas sin necesidad de plugin).
● Custom Login para personalizar la página de inicio de sesión.
● Broken Link Checker para inspeccionar enlaces rotos.
● W3 Total Cache para mejorar la velocidad y el rendimiento de nuestra página.
Plugins imprescindibles (III)
● Si queremos que nuestros artículos puedan ser mandados de forma fácil a redes sociales como Facebook, Twitter, LinkedIN, etc... Shareaholic es nuestro plugin.
● FeedWordPress para crear un planeta de blogs o agregar contenidos de otras plataformas.
● TubePress para hacer una mediateca de YouTube.
Las plantillas o themes son la capa de presentación.Se puede cambiar esta capa sin que
la información se vea afectada
El gran repositorio de WordPress de plantillas:
http://wordpress.org/themes
● Responsive Web Design:
Responsive Web Design
La estructura de WordPress (I)
● wp-config.php: fichero de configuración. Aquí está almacenado el usuario y el nombre de la base de datos, así como otros datos de seguridad. Este fichero no se machaca con las actualizaciones de WP.
● wp-admin y wp-includes: carpetas que guardan los ficheros php que hacen que funcione el blog. Ambas carpetas se machacan con las actualizaciones.
La estructura de WordPress (II)
● wp-content: esta carpeta guarda los datos y configuraciones propias del blog. No se toca nada en la actualizaciones de WP. La estructura interna es la siguiente:
– uploads: todas las imágenes, vídeos y archivos que se suban a la librería de wordpress. Normalmente se organiza por años y luego por meses. Ejemplo: uploads/2015/12.
● plugins: todos los plugins que tenemos disponibles para el blog (aunque no estén activos).
● languages: aquí van los ficheros .mo de los idiomas en los que queremos tener WP (tanto la parte visible como la de administración).
● themes: todas las plantillas que tenemos disponibles para "vestir" al blog.
La estructura básica de un theme
header.php: aquí se define la cabecera de la página
footer.php: aquí se define el pie de página
sidebar.php: aquí se definen las diferentes barras laterales
index.php: este es el fichero que carga de inicio el site.
Desde aquí se invoca la carga de cabecera (get_header();), barras laterales (get_sidebar();) y footer (get_footer();)
y en el cuerpo central, se ejecuta el bucle para cargar la información
single.php: este es el fichero que se interpreta cuando se carga un post concreto
archive.php: igual que single.php pero para las páginas de categorías y etiquetas
category.php: plantilla para las categorías. Cuando un usuario pincha sobre el enlace de una categoría,
WordPress prueba si existe el fichero category.php. Si no lo encuentra, carga archive.php.
Y si éste tampoco lo encuentra, se va a por el index.php
comments.php: plantilla de los comentarios
searchform.php: formulario de búsquedasearch.php: página donde se muestran los
resultados de una búsqueda
functions.php: aquí se recogerán funciones propias del theme. Por ejemplo, si queremos registrar varias barras laterales para que aparezcan en la sección de widgets, indicar a WP dónde
están los ficheros de idiomas, quitar filtros, ...
404.php: si creamos este fichero, cada vez que algo no se encuentre en el blog, se cargará esta página
Desde el apartado de administración se podrá configurar la apariencia de una forma muy visual mediante widgets (en Apariencia -> Widgets).
Aquí aparecen las barras laterales definidas y múltiples funcionalidades que se pueden colocar: comentarios recientes, posts recientes, buscador, una caja
donde introducir nuestro propio código html, ...
También desde el apartado de administración (Ajustes -> Lectura) podemos configurar que en la portada se cargue una página y no el
formato blog de entradas, dándole más carácter de página web
Recursos libres
● Recursos libres para poder usar en el diseño de nuestra web: http://makerbook.net
● Y para crear banners de una manera rápida: https://www.canva.com
Perfiles de usuarios (I)
● Suscriptor: es un mero lector que puede configurar su avatar, su dirección de correo, su página web...
● Colaborador: puede crear entradas pero no las puede publicar.
● Autor: puede crear entradas y publicarlas.
● Editor: puede crear, eliminar, modificar y publicar entradas (tanto suyas como de otros). Lo mismo con las páginas y las categorías.
● Administrador: a lo que hace el editor, se le suma la administración de usuarios, gestión de plantillas y plugins, así como opciones generales del blog.
Perfiles de usuarios (II)
Vuestra nueva Biblia: Codex WordPresshttp://codex.wordpress.org
Monitorizando nuestra web
● Para monitorizar el estado de nuestra web www.montastic.com: alertas de correo cuando alguna de nuestras páginas no responde.
● Si tenemos un servidor dedicado, podemos instalar otras herramientas como mrtg (uso de la CPU, memoria, disco duro, ancho de banda…).
robots.txt
robots.txt
● Les decimos a las arañas de los buscadores (Google, Bing, Yahoo...) dónde pueden entrar y dónde no.
● El archivo robots.txt debe estar en la raíz del alojamiento y ser público y accesible.
● Reducen la sobrecarga del servidor, porque se puede controlar el tiempo de acceso de algunos robots “pesados” o incluso que no rastreen nuestra web (siempre y cuando sean formales y hagan caso de robots.txt).
● Sirve también para eliminar contenido duplicado.
Cómo crear un archivo robots.txt
● El archivo robots.txt más simple utiliza dos reglas:
– User-agent: el robot al que se aplica la regla siguiente.
– Disallow: la URL que quieres bloquear.● Podemos indicar también el sitemap.
● Ejemplo:
User-agent: *
Disallow: /carpeta1/
Archivo robots.txt
● Para controlar el tiempo en el que los robots indexan las páginas se pueden utilizar alguna de estas directivas:
– Permitir trabajar a los buscadores de 2 am a 7:45 am (las horas son siempre en Greenwitch):
● Visit-time: 0200-0745– Que espere 30 segundos entre cada acceso:
● Crawl-delay: 30
sitemap.xml
● Los sitemaps son una forma fácil que tienen los webmasters para informar a los motores de búsqueda de las páginas que se pueden rastrear en sus sitios web.
● Un sitemap, en su forma más sencilla, es un archivo XML que enumera las URL de un sitio junto con metadatos adicionales acerca de cada una de ellas: la última actualización, frecuencia de modificación, importancia, en relación con las demás URL del sitio; así, los motores de búsqueda pueden llevar a cabo rastreos del sitio de una forma más inteligente.
Tenemos plugins para todo esto en WordPress
● Google XML Sitemaps● WordPress SEO
Google Webmaster Tools (I)
● www.google.es/webmasters/tools ● Nos avisa si las arañas de Google tienen
problemas con nuestra web.
– DNS.– Conectividad del servidor. – Información de robots.txt
● Nos da información de urls indexadas.
Google Webmaster Tools (II)
● Consultas de búsqueda:– Impresiones.– Clics.
● Enlaces a tu sitio y enlaces internos.
● Eliminación de URL.
Probar el archivo robots.txt
● En Google Webmaster Tools, sigue los siguientes pasos:
1) En Rastrear, haz clic en URL bloqueadas.
2) Si aún no se ha seleccionado, haz clic en la pestaña Probar robots.txt.
3) Copia el contenido del archivo robots.txt y pégalo en el primer cuadro.
4) En el cuadro URL, indica el sitio en el que quieras probar el archivo.
5) En la lista User-agents, selecciona los user-agents que quieras.
6) No se guardará ninguno de los cambios que realices en esta herramienta. Para guardar un cambio, tendrás que copiar el contenido y pegarlo en el archivo robots.txt.
¿Cómo se ve nuestra web en diferentes navegadores y SO?
● http://browsershots.org● Diferentes navegadores y diferentes
sistemas operativos (Linux, Windows, Mac).
● Diferentes resoluciones. ● Javascript, java o flash habilitados o
deshabilitados.
¿Cómo de rápida es nuestra web?
● Para el SEO (y la paciencia de nuestros usuarios) es muy importante que nuestra web cargue rápido (tiempo ideal, por debajo de 2 segundos).
● Page Speed Insights (Google): https://developers.google.com/speed/pagespeed/insights/?hl=es
– Nos muestra recomendaciones para móvil y escritorio.
● WebPagetest: http://www.webpagetest.org
– Podemos simular nuestra localización y navegador.
¿Cómo optimizar esa carga? (I)
● Sacar todos los estilos y javascripts a un único css y un único js. Por cada fichero que incluimos, el navegador web tiene que hacer una petición. Esa petición tiene un consumo de tiempo y ancho de banda.
● Cuando tengamos un único css y un único js, lo mejor es reducir el tamaño de ambos. Utilidades:
– Para los javascripts: jsmin o YUI Compressor ponen todo el código en una única línea, reduciendo el tamaño del fichero considerablemente, pero poniendo difícil la posterior edición y revisión del código
– Clean CSS o CSS compressor hace lo mismo para los estilos.
¿Cómo optimizar esa carga? (II)
● Hay que comprobar que no enlazamos a ningún fichero que ya no existe. Esto lo podemos revisar con el plugin para firefox firebug. Si algún elemento nos devuelve un 404, esto suele retrasar bastante la carga.
● Bajar el tamaño de nuestras imágenes. Además especificar su ancho y alto en la etiqueta img para que el navegador no tenga que calcularlo.
● Si usamos varias imágenes fijas, lo mejor es cargarlas en un único fichero y colocarlas luego con CSS sprites. Por ejemplo, Google lo hace en su página de resultados. Carga todo en una imagen y luego usa cada uno de los elementos mediante coordenadas. Así se evita un montón de peticiones.
Estadísticas
● Si no medimos, no entendemos a nuestra audiencia.
● No olvidar incluir la línea de Google Analytics en el theme o mejor, usar plugin para ello (Google Analytics for WordPress).
● Creador de URLs de campañas de GA.
Política de cookies (I)
● Ley de Servicios de la Sociedad de Información (LSSI), segundo apartado del artículo 22 de la ley 34/2002.
● Si usas cookies (por ejemplo Google Analytics), debes poner un mensaje:
– Tipo 1: "En este sitio usamos Cookies.... ¿Aceptas nuestra política? Sí, No y Más información.
– Tipo 2: "En este sitio usamos Cookies...si sigues navegando entendemos que aceptas nuestra política." Aceptar y más información.
Política de cookies (III)
● Información por capas:
– 1ª capa: barra siempre bien visible en la pantalla en la pantalla hasta que el usuario realice la acción requerida para la obtención del consentimiento.
– 2ª capa:
● La definición y función de las cookies.● Información sobre el tipo de cookies que utiliza la página
web y su finalidad.● Información sobre la forma de desactivar o eliminar las
cookies.● Identificar a las posibles terceras empresas, con las que
hayas celebrado un contrato o aceptado unas condiciones generales de contratación y que utilizan los datos obtenidos a través de las cookies.
¡También tenemos plugin de WordPress para esto!WordPress Plugin Ley Cookie
Integrar muy bien nuestras redes sociales en la web.
Que se vea en qué redes sociales estamos y que
compartan fácil nuestro contenido allí
Cabeceras para redes sociales (I)
● TwitterCards: Twitter ofrece unas cabeceras especiales para que nuestro contenido aparezca enriquecido en su plataforma.
Cabeceras para redes sociales (II)
● 3 tipos de etiquetado: texto, imagen y contenido de vídeo (summary, photo o player).
● Herramienta de Twitter para probar si está bien y que nos habiliten los tuits expandidos: https://dev.twitter.com/cards
● Luego podemos ver en https://analytics.twitter.com en cuántos tuits se ha compartido nuestra web.
Cabeceras para redes sociales (III)
● Summary (publicaciones de texto):
Cabeceras para redes sociales (IV)
● En WordPress (en el head y, a poder ser, en el single.php con if(is_singular())):
<meta name="twitter:site" content="@TWITTER_DE_LA_WEB" />
<meta name="twitter:creator" content="@TWITTER_DEL_REDACTOR" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:image" content="CODIGO_DE_IMAGEN" />
<meta name="twitter:url" content="<?php get_permalink(); ?>" />
<meta name="twitter:title" content="<?php the_title(); ?>" />
<meta name="twitter:description" content="<?php the_excerpt(); ?>" />
Monitorizando nuestra web en Redes Sociales (I)
● Si se distribuye un link acortado con bit.ly, solo hay que poner un “+” después de la url para obtener las estadísticas de los clicks recibidos. Si además tenemos cuenta, podremos obtener esos datos.
● Si se pone topsy.com/ delante de cualquier url, se obtiene una lista de las personas que han mencionado dicha url en Twitter. Ejemplo: http://topsy.com/blog.loretahur.net/2014/01/e-memoria.html
● Si se pone graph.facebook.com delante de cualquier url, podemos saber cuántas veces se ha compartido dicho enlace en Facebook. Ejemplo: https://graph.facebook.com/http://blog.loretahur.net/2014/01/e-memoria.html
Creando una Landing Page (I)
● Plugin WordPress Landing Page.
● Monitoriza las conversiones.
● Se pueden hacer pruebas A/B.
Creando una Landing Page (II)
● Plugin WordPress Landing Page.
● Monitoriza las conversiones.
● Se pueden hacer pruebas A/B.
Checklist para mi web (I)
Comprobar Dónde
¿Está el hosting en la misma zona que mi público principal?
Información del hosting.
¿Se ve bien mi web en todos los navegadores y sistemas operativos?
Browser Shotshttp://browsershots.org
¿Tenemos bien configurado el fichero robots.txt?
Google Webmaster Toolshttps://www.google.com/webmasters/tools
¿Tiene nuestra web un sitemap? Google Webmaster Toolshttps://www.google.com/webmasters/tools
¿Carga mi página en menos de 2 segundos?
Page Speed Onlinehttps://developers.google.com/speed/pagespeed/insights/?hl=es
¿Qué está retrasando la carga de mi página?
WebPagetesthttp://www.webpagetest.org
Checklist para mi web (II)
Comprobar Dónde
¿Tiene mi web la política de cookies instalada?
En la web.
¿Estoy monitorizando mi web? www.montastic.com o servicios en servidor tipo mrtg.
¿Hemos instalado un servicio de estadísticas?
Código de Google Analytics en la web.
¿Se ven de forma elegante nuestros contenidos en Twitter?
TwitterCardshttps://dev.twitter.com/docs/cards
¿Sé si están compartiendo mis contenidos en redes sociales?
Bit.ly, topsy y estadísticas de Twitter y Facebook.
¿Están nuestras redes sociales visibles en la web? ¿Se pueden compartir de una manera sencilla nuestros contenidos en redes sociales?
En la web.