Arquitectura de información de mi web

Arquitectura de Información, la importancia de organizar bien los contenidos de mi web.

Transcript

1. Arquitectura  de  información   La  importancia  de  organizar  bien  los  contenidos  de  mi  web   Dani  Reguera   Mondragon  Unibertsitatea   dreguera@mondragon.edu   h@ps://twi@er.com/dreguera   h@p://slideshare.net/dreguera   h@ps://linkedin.com/in/danireguera    
2. Indice   §  Introducción  a  la  Arquitectura  de  información   §  Diseño  orientado  al  objeGvo  de  mi  página   §  Arquitectura  de  la  página   §  Arquitecturas  mulGdisposiGvo   §  ProtoGpado  de  nuestra  página   §  Arquitectura  y  posicionamiento   §  Ejercicio  prácGco   2  
3. ObjeGvos  del  curso   §  Entender  la  importancia  que  Gene  la   arquitectura  de  información  en  una  web   §  Estructurar  los  contenidos  de  una  web   §  ProtoGpar  una  web  simple  en  función  de  su   Gpología   3  
4. ¿Qué es arquitectura de información?
5. ¿Qué es arquitectura de la información? §  Agrupar todo el contenido generando categorías y subcategorías para todo el contenido existente en la web §  Organizar la información de la web de tal manera que sea fácil de encontrar para el usuario y para Google §  Priorizar el contenido de la web para destacar lo más importante al usuario y a Google.
6. Dos  Gpos  de  arquitectura   §  ARQUITECTURA  ON  PAGE   §  ARQUITECTURA  SEO   6  
7. Arquitectura on page §  Estructura de las diferentes landing pages de nuestro sitio web, aproximando lo más posible al diseño final. Importancia de los prototipados o wireframes.
8. Arquitectura  SEO   §  Directrices dentro de la arquitectura de la web, tanto en URLs como en los diferentes contenidos que vayan a ser indexables (imágenes, archivos) para que su posicionamiento sea óptimo en los diferentes buscadores.   8  
9. Libro  VS  revista   9  
10. Nuestro  siGo  web  es  “una  revista”   §  Debemos  facilitar  la  lectura   §  Debemos  estructurar  los  contenidos   §  Lo  que  no  aparezca  en  la  portada  “no  se  va  a   ver”   §  Debemos  maquetar  cada  página   §  Debemos  definir  nuestra  arquitectura  en   función  del  objeGvo  del  siGo.   10  
11. Diseño  orientado  a  objeGvo   11  
12. Diseño  orientado  a  objeGvo   §  Antes  de  construir  nuestra  web  tenemos  que   tener  claro  varios  aspectos:   ¨  ¿Cuál  es  el  objeGvo  de  la  página?   ¨  ¿Cuál  es  el  público  objeGvo  de  la  página?   ¨  ¿Que  mensaje  queremos  transmiGr?   ¨  ¿Que  contenido  mulGmedia  tenemos?   §  Si  somos  capaces  de  responder  a  estas   cuesGones  tenemos  la  mayoría  del  trabajo  ya   hecho.   12  
13. Diseño  orientado  a  objeGvo   13  
14. Diseño  orientado  a  objeGvo   14  
15. Diseño  orientado  a  objeGvo   15  
16. Diseño  orientado  a  objeGvo   16  
17. Diseño  orientado  a  objeGvo   §  ¿Cual  es  nuestro  público  objeGvo?   ¨  Nos  dirigiremos  a  ese  público  mediante  el   lenguaje,  imágenes,  manera  de  expresarnos   §  ¿Cual  es  el  objeGvo  de  la  página?   ¨  Estructuraremos,  priorizaremos  y  agruparemos  el   contenido  de  la  página  para  saGsfacer  este   objeGvo     17  
18. Arquitectura  de  la  página   18  
19. Arquitectura  de  la  página   §  Jerarquía  de  una  página  web:   ¨  Título  de  la  página  <Gtle>   ¨  Titular  de  la  página  <h1>   ¨  Subktulos  <h2>….<h4>   ¨  Párrafos  <p>   ¨  Imágenes  <img>     19  
20. Arquitectura  de  la  página  -­‐  Estructura   20  
21. Arquitectura  de  la  página  -­‐  Estructura   §  <Gtle>Servicio  de  mantenimiento  de  ascensores  para  todas  las  marcas  -­‐   Orona</Gtle>   §  <h1  class="Gtulo"  style="margin:0;"><strong>Mantenimiento  de   ascensores</strong></h1>   §  <h2>Un  ópGmo  mantenimiento  del  ascensor  al  mejor  precio</h2>   §  <h3  class="contratoMantenimiento">Contratos  de  mantenimiento</h3>   §  <p>Gracias  a  nuestros  programas  de  mantenimiento  prevenGvo  y   correcGvo,  <em>garanGzamos  la  plena  disponibilidad  del  ascensor</em>  y   su  <em>sostenibilidad</em>  en  el  Gempo.</p>   21  
22. Arquitectura  de  la  página  –  Menu  de  navegación   22  
23. Arquitectura  de  la  página  –  Menu  de  navegación   §  El  menu  es  de  lo  más  importante  de  nuestro   siGo  web.   §  Ese  menu  es  la  entrada  a  nuestra  casa.   §  Hemos  de  ser  concisos  y  representaGvos.   §  No  debemos  tener  mas  de  tres  niveles  de   navegación.   §  Olvidemonos  del  “INICIO  –  QUIENES  SOMOS  –   DONDE  ESTAMOS…”   23  
24. Arquitectura  de  la  página  –  Menu  de  navegación   §  Vamos  a  crear  opciones  de  menú  en  función   de  nuestro  objeGvo   §  Vamos  a  crear  opciones  del  menú  en  función   de  nuestro  contenido   §  Vamos  a  crear  opciones  de  menú  en  función   de  qué  queremos  transmiGr   24  
25. Arquitectura  de  información  -­‐  Imágenes   §  Debemos  añadir  imágenes  que  estén  en   contexto  de  nuestro  siGo   §  OpGmizar  las  imágenes:   ¨  SEO:   •  Alt   •  Desc   •  Titulo   ¨  Tamaño  de  la  imagen:  Nada  de  poner  imagenes   profesionales  que  sean  muy  pesadas.   25  
26. Arquitectura  de  información  -­‐  Contenido   §  ¿Como  agrupamos  el  contenido?   §  ¿Cómo  mostramos  el  contenido?   §  ¿Qué  contenido  priorizamos?   26  
27. Arquitectura  de  información  -­‐  Contenido   §  Recopilar  contenidos   §  Categorizar  contenidos:  CardsorGng   §  Estructurar  los  contenidos   §  Definir  la  estructura  de  navegación   §  ProtoGpar   27  
28. Arquitectura  de  información  -­‐  Contenido   28  
29. Arquitectura  de  información  –  Redes  sociales   29  
30. Arquitectura  de  la  información  –  Redes  sociales   30  
31. Arquitectura  de  la  información  –  Redes  sociales   §  Son  muchas  webs  que  intentar  dar  dinamismo   a  la  misma  añadiendo  sus  perfiles  en  RRSS   §  Si  es  dificil  que  llegue  la  gente  a  nuestra  web…   ¿les  vamos  a  echar?   §  Hemos  de  poner  nuestra  presencia  en  RRSS   pero  no  incitar  al  visitante  que  se  marche  a   otro  siGo.   §  Si  estoy  aquí  es  porque  quiero  leer  tu  web,   tratame  bien.   31  
32. Arquitectura  de  la  información  –  Redes  sociales   §  Que  sea  “visible”  pero  tampoco  que  sea  una   puerta  de  salida…     32  
33. Arquitectura  mulGdisposiGvo   33  
34. Arquitectura  mulGdisposiGvo   §  Cada  vez  la  gente  navega  mas  desde  el  móvil   §  Cada  vez  la  gente  busca  mas  desde  el  móvil   §  Cada  vez  la  gente  accede  a  la  información  más   desde  el  movil   34  
35. Arquitectura  mulGdisposiGvo   §  Adecuar  nuestra  web  a  movil  no  significa   miniaturizar.   §  Podemos  pensar  que  la  web  desktop  sería  el   hipermercado  y  la  web  para  móvil  el  mercado   de  barrio.   §  No  tenemos  que  mostrar  de  la  misma  manera   35  
36. Arquitectura  mulGdisposiGvo   §  Diseño  web  mulGdisposiGvo:   ¨  Responsive  web  design  (The  very  best)   •  Misma  URL  y  mismo  contenido.  Maquetamos  de   diferente  manera  en  función  del  disposiGvo.   ¨  Publicación  dinámica  (Not  bad)   •  Dos  versiones  en  la  misma  URL   ¨  Web  independiente  (Up  to  you)   •  Dos  webs  diferenciadas  completamente,  tanto  en   contenido  como  URL   36  
37. Arquitectura  mulGdisposiGvo   37  
38. Arquitectura  mulGdisposiGvo   38  
39. Arquitectura  mulGdisposiGvo   39  
40. Arquitectura  mulGdisposiGvo   40  
41. Arquitectura  SEO   41  
42. Arquitectura  SEO   §  Title   §  DescripGon   §  Keyword   §  H1   §  Img   42  
43. Arquitectura  SEO   §  Una  buena  arquitectura  SEO  nos  va  a   posibilitar  una  mejor  indexación  en  los   buscadores   §  Lograremos  mejores  posiciones  en  los   resultados  de  búsqueda   §  Lo  mismo  que  estructuramos  bien  para  el   usuario,  no  nos  olvidemos  de  los  buscadores   43  
44. Arquitectura  SEO  -­‐  URLs §  Las  URLs  de  un  siGo  web,  juegan  un  papel  muy   importante  dentro  del  posicionamiento  en  los   diferentes  buscadores,  y  una  buena  estrategia   de  URLs  nos  va  facilitar  el  trabajo.   §  Las  URLs  amigables  facilitan  al  usuario   encontrar  la  información  que  necesita,  y  le   asignan  un  valor  adicional  a  éstas.  
45. Arquitectura  SEO  -­‐  URLs §  URLs  en  minúsculas,  sin  Gldes  ni  caracteres  especiales   §  Para  separar  palabras  en  las  URLs  se  uGlizará  el  guión  “-­‐“   §  Evitar  el  uso  de  parámetros  en  las  URLs  a  no  ser  que  sean   estríctamente  necesarios   §  La  URL  estará  en  el  idioma  del  contenido  de  la  página   §  Integrar  palabras  clave  en  las  URLs   §  Evitar  las  extensiones  de  las  páginas  en  la  URL   §  Para  el  contenido  a  posicionar  no  deberían  de  exisGr  más  de   tres  niveles  de  directorios  (sin  contar  el  directorio  de  idioma   en  los  siGos  mulGlingües)  
46. ProtoGpado  –  El  paso  previo  al  diseño   46  
47. ProtoGpado  –  El  paso  previo  al  diseño   47  
49. Eskerrik  asko!   Dani  Reguera   Mondragon  Unibertsitatea   dreguera@mondragon.edu   h@ps://twi@er.com/dreguera   h@p://slideshare.net/dreguera   h@ps://linkedin.com/in/danireguera