Herramientas de lanzamiento. Nuestra web

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
lorena.fernandez@deusto.es

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

¿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:

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

Una instalación de WordPress es totalmente portable
Só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úsqueda
search.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.

Vuestra nueva Biblia: Codex WordPress
http://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
●
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/insig
hts/?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(); ?>" />

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.htm
l
●
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

en Redes Sociales (II)
http://buzzsumo.com

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 Shots
http://browsershots.org
¿Tenemos bien configurado el fichero
robots.txt?
Google Webmaster Tools
https://www.google.com/webmasters/tools
¿Tiene nuestra web un sitemap? Google Webmaster Tools
https://www.google.com/webmasters/tools
¿Carga mi página en menos de 2
segundos?
Page Speed Online
https://developers.google.com/speed/pagespeed/
insights/?hl=es
¿Qué está retrasando la carga de mi
página?
WebPagetest
http://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?
TwitterCards
https://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.

Herramientas de lanzamiento. Nuestra web

Más contenido relacionado

La actualidad más candente (19)

Destacado (8)

Similar a Herramientas de lanzamiento. Nuestra web (20)

Más de Lorena Fernández (20)

Último (20)

Herramientas de lanzamiento. Nuestra web