Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Herramientas de lanzamiento. Nuestra web

770 views

Published on

Presentación usada en la sesión de DeustoSTART Digital Donostia I (Programa de activación de empresas de internet y negocios digitales), en octubre de 2015.

Published in: Internet
  • Be the first to comment

Herramientas de lanzamiento. Nuestra web

  1. 1. Herramientas de lanzamiento Nuestra web Lorena Fernández (@loretahur)
  2. 2. 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
  3. 3. Vuestro turno...
  4. 4. ¿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.
  5. 5. Hosting vs Dominio
  6. 6. ¿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
  7. 7. 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).
  8. 8. ¿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.
  9. 9. ¿Cómo afecta el dominio al posicionamiento?
  10. 10. ¿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.
  11. 11. 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
  12. 12. ¿Compramos todos los dominios?
  13. 13. Subdominios ● Diferencia entre subdominio y carpeta. – ¡Ojo con el SEO! ● ¿Con www o sin www? ● La importancia de las redirecciones 301.
  14. 14. 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.
  15. 15. 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
  16. 16. 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:
  17. 17. ¿Pero eso no es para blogs?
  18. 18. 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.
  19. 19. wordpress.com vs. wordpress.org
  20. 20. + 300 plantillas gratis (pero es un catálogo cerrado)
  21. 21. Y sin posibilidad de instalar plugins
  22. 22. Wordpress.org
  23. 23. Una instalación de WordPress es totalmente portable Sólo necesitaremos las carpetas de la web (php) y la BD (MySQL)
  24. 24. 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.
  25. 25. El gran repositorio de WordPress de plugins: https://wordpress.org/plugins
  26. 26. 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.
  27. 27. 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.
  28. 28. 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.
  29. 29. Las plantillas o themes son la capa de presentación. Se puede cambiar esta capa sin que la información se vea afectada
  30. 30. El gran repositorio de WordPress de plantillas: http://wordpress.org/themes
  31. 31. ● Responsive Web Design: Responsive Web Design
  32. 32. 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.
  33. 33. 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.
  34. 34. La estructura básica de un theme
  35. 35. header.php: aquí se define la cabecera de la página
  36. 36. footer.php: aquí se define el pie de página
  37. 37. sidebar.php: aquí se definen las diferentes barras laterales
  38. 38. 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
  39. 39. single.php: este es el fichero que se interpreta cuando se carga un post concreto
  40. 40. archive.php: igual que single.php pero para las páginas de categorías y etiquetas
  41. 41. 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
  42. 42. comments.php: plantilla de los comentarios
  43. 43. searchform.php: formulario de búsqueda search.php: página donde se muestran los resultados de una búsqueda
  44. 44. 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, ...
  45. 45. 404.php: si creamos este fichero, cada vez que algo no se encuentre en el blog, se cargará esta página
  46. 46. 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, ...
  47. 47. 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
  48. 48. 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
  49. 49. 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.
  50. 50. Perfiles de usuarios (II)
  51. 51. Vuestra nueva Biblia: Codex WordPress http://codex.wordpress.org
  52. 52. 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…).
  53. 53. robots.txt
  54. 54. 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.
  55. 55. 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/
  56. 56. 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
  57. 57. 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.
  58. 58. Tenemos plugins para todo esto en WordPress ● Google XML Sitemaps ● WordPress SEO
  59. 59. 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.
  60. 60. Google Webmaster Tools (II) ● Consultas de búsqueda: – Impresiones. – Clics. ● Enlaces a tu sitio y enlaces internos. ● Eliminación de URL.
  61. 61. 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.
  62. 62. ¿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.
  63. 63. ¿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.
  64. 64. ¿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.
  65. 65. ¿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.
  66. 66. 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.
  67. 67. 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.
  68. 68. Política de cookies (II)
  69. 69. 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.
  70. 70. ¡También tenemos plugin de WordPress para esto! WordPress Plugin Ley Cookie
  71. 71. 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í
  72. 72. Cabeceras para redes sociales (I) ● TwitterCards: Twitter ofrece unas cabeceras especiales para que nuestro contenido aparezca enriquecido en su plataforma.
  73. 73. 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.
  74. 74. Cabeceras para redes sociales (III) ● Summary (publicaciones de texto):
  75. 75. 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(); ?>" />
  76. 76. 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.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
  77. 77. Monitorizando nuestra web en Redes Sociales (II) http://buzzsumo.com
  78. 78. Creando una Landing Page (I) ● Plugin WordPress Landing Page. ● Monitoriza las conversiones. ● Se pueden hacer pruebas A/B.
  79. 79. Creando una Landing Page (II) ● Plugin WordPress Landing Page. ● Monitoriza las conversiones. ● Se pueden hacer pruebas A/B.
  80. 80. 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
  81. 81. 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.

×