Arquitectura	
  de	
  información	
  

La	
  importancia	
  de	
  organizar	
  bien	
  los	
  contenidos	
  de	
  mi	
  we...
Indice	
  
§  Introducción	
  a	
  la	
  Arquitectura	
  de	
  información	
  
§  Diseño	
  orientado	
  al	
  objeGvo	
...
ObjeGvos	
  del	
  curso	
  
§  Entender	
  la	
  importancia	
  que	
  Gene	
  la	
  
arquitectura	
  de	
  información	...
¿Qué es arquitectura de información?
¿Qué es arquitectura de la información?
§  Agrupar todo el contenido generando
categorías y subcategorías para todo
el co...
Dos	
  Gpos	
  de	
  arquitectura	
  
§  ARQUITECTURA	
  ON	
  PAGE	
  
§  ARQUITECTURA	
  SEO	
  

6	
  
Arquitectura on page
§  Estructura de las diferentes landing
pages de nuestro sitio web,
aproximando lo más posible al di...
Arquitectura	
  SEO	
  
§  Directrices dentro de la arquitectura
de la web, tanto en URLs como en los
diferentes contenid...
Libro	
  VS	
  revista	
  

9	
  
Nuestro	
  siGo	
  web	
  es	
  “una	
  revista”	
  
§  Debemos	
  facilitar	
  la	
  lectura	
  
§  Debemos	
  estructu...
Diseño	
  orientado	
  a	
  objeGvo	
  

11	
  
Diseño	
  orientado	
  a	
  objeGvo	
  
§  Antes	
  de	
  construir	
  nuestra	
  web	
  tenemos	
  que	
  
tener	
  clar...
Diseño	
  orientado	
  a	
  objeGvo	
  

13	
  
Diseño	
  orientado	
  a	
  objeGvo	
  

14	
  
Diseño	
  orientado	
  a	
  objeGvo	
  

15	
  
Diseño	
  orientado	
  a	
  objeGvo	
  

16	
  
Diseño	
  orientado	
  a	
  objeGvo	
  
§  ¿Cual	
  es	
  nuestro	
  público	
  objeGvo?	
  
¨ 

Nos	
  dirigiremos	
  a...
Arquitectura	
  de	
  la	
  página	
  

18	
  
Arquitectura	
  de	
  la	
  página	
  
§  Jerarquía	
  de	
  una	
  página	
  web:	
  
Título	
  de	
  la	
  página	
  <G...
Arquitectura	
  de	
  la	
  página	
  -­‐	
  Estructura	
  

20	
  
Arquitectura	
  de	
  la	
  página	
  -­‐	
  Estructura	
  
§  <Gtle>Servicio	
  de	
  mantenimiento	
  de	
  ascensores	...
Arquitectura	
  de	
  la	
  página	
  –	
  Menu	
  de	
  navegación	
  

22	
  
Arquitectura	
  de	
  la	
  página	
  –	
  Menu	
  de	
  navegación	
  
§  El	
  menu	
  es	
  de	
  lo	
  más	
  importa...
Arquitectura	
  de	
  la	
  página	
  –	
  Menu	
  de	
  navegación	
  
§  Vamos	
  a	
  crear	
  opciones	
  de	
  menú	...
Arquitectura	
  de	
  información	
  -­‐	
  Imágenes	
  
§  Debemos	
  añadir	
  imágenes	
  que	
  estén	
  en	
  
conte...
Arquitectura	
  de	
  información	
  -­‐	
  Contenido	
  
§  ¿Como	
  agrupamos	
  el	
  contenido?	
  
§  ¿Cómo	
  most...
Arquitectura	
  de	
  información	
  -­‐	
  Contenido	
  
§  Recopilar	
  contenidos	
  
§  Categorizar	
  contenidos:	
...
Arquitectura	
  de	
  información	
  -­‐	
  Contenido	
  

28	
  
Arquitectura	
  de	
  información	
  –	
  Redes	
  sociales	
  

29	
  
Arquitectura	
  de	
  la	
  información	
  –	
  Redes	
  sociales	
  

30	
  
Arquitectura	
  de	
  la	
  información	
  –	
  Redes	
  sociales	
  
§  Son	
  muchas	
  webs	
  que	
  intentar	
  dar	...
Arquitectura	
  de	
  la	
  información	
  –	
  Redes	
  sociales	
  
§  Que	
  sea	
  “visible”	
  pero	
  tampoco	
  qu...
Arquitectura	
  mulGdisposiGvo	
  

33	
  
Arquitectura	
  mulGdisposiGvo	
  
§  Cada	
  vez	
  la	
  gente	
  navega	
  mas	
  desde	
  el	
  móvil	
  
§  Cada	
 ...
Arquitectura	
  mulGdisposiGvo	
  
§  Adecuar	
  nuestra	
  web	
  a	
  movil	
  no	
  significa	
  
miniaturizar.	
  
§ ...
Arquitectura	
  mulGdisposiGvo	
  
§  Diseño	
  web	
  mulGdisposiGvo:	
  
¨ 

Responsive	
  web	
  design	
  (The	
  ve...
Arquitectura	
  mulGdisposiGvo	
  

37	
  
Arquitectura	
  mulGdisposiGvo	
  

38	
  
Arquitectura	
  mulGdisposiGvo	
  

39	
  
Arquitectura	
  mulGdisposiGvo	
  

40	
  
Arquitectura	
  SEO	
  

41	
  
Arquitectura	
  SEO	
  
§  Title	
  
§  DescripGon	
  
§  Keyword	
  
§  H1	
  
§  Img	
  

42	
  
Arquitectura	
  SEO	
  
§  Una	
  buena	
  arquitectura	
  SEO	
  nos	
  va	
  a	
  
posibilitar	
  una	
  mejor	
  index...
Arquitectura	
  SEO	
  -­‐	
  URLs
§  Las	
  URLs	
  de	
  un	
  siGo	
  web,	
  juegan	
  un	
  papel	
  muy	
  
importa...
Arquitectura	
  SEO	
  -­‐	
  URLs
§  URLs	
  en	
  minúsculas,	
  sin	
  Gldes	
  ni	
  caracteres	
  especiales	
  
§ ...
ProtoGpado	
  –	
  El	
  paso	
  previo	
  al	
  diseño	
  

46	
  
ProtoGpado	
  –	
  El	
  paso	
  previo	
  al	
  diseño	
  

47	
  
48	
  
Eskerrik	
  asko!	
  
Dani	
  Reguera	
  
Mondragon	
  Unibertsitatea	
  
dreguera@mondragon.edu	
  
h@ps://twi@er.com/dre...
Upcoming SlideShare
Loading in …5
×

Arquitectura de información de mi web.

2,814 views

Published on

Arquitectura de Información, la importancia de organizar bien los contenidos de mi web.
Transparencias del curso utilizadas en Garaia Enpresa Digitala sobre arquitectura de información.

Published in: Technology
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,814
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
0
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

Arquitectura de información de mi web.

  1. 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. 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. 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. 4. ¿Qué es arquitectura de información?
  5. 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. 6. Dos  Gpos  de  arquitectura   §  ARQUITECTURA  ON  PAGE   §  ARQUITECTURA  SEO   6  
  7. 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. 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. 9. Libro  VS  revista   9  
  10. 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. 11. Diseño  orientado  a  objeGvo   11  
  12. 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. 13. Diseño  orientado  a  objeGvo   13  
  14. 14. Diseño  orientado  a  objeGvo   14  
  15. 15. Diseño  orientado  a  objeGvo   15  
  16. 16. Diseño  orientado  a  objeGvo   16  
  17. 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. 18. Arquitectura  de  la  página   18  
  19. 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. 20. Arquitectura  de  la  página  -­‐  Estructura   20  
  21. 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. 22. Arquitectura  de  la  página  –  Menu  de  navegación   22  
  23. 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. 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. 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. 26. Arquitectura  de  información  -­‐  Contenido   §  ¿Como  agrupamos  el  contenido?   §  ¿Cómo  mostramos  el  contenido?   §  ¿Qué  contenido  priorizamos?   26  
  27. 27. Arquitectura  de  información  -­‐  Contenido   §  Recopilar  contenidos   §  Categorizar  contenidos:  CardsorGng   §  Estructurar  los  contenidos   §  Definir  la  estructura  de  navegación   §  ProtoGpar   27  
  28. 28. Arquitectura  de  información  -­‐  Contenido   28  
  29. 29. Arquitectura  de  información  –  Redes  sociales   29  
  30. 30. Arquitectura  de  la  información  –  Redes  sociales   30  
  31. 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. 32. Arquitectura  de  la  información  –  Redes  sociales   §  Que  sea  “visible”  pero  tampoco  que  sea  una   puerta  de  salida…     32  
  33. 33. Arquitectura  mulGdisposiGvo   33  
  34. 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. 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. 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. 37. Arquitectura  mulGdisposiGvo   37  
  38. 38. Arquitectura  mulGdisposiGvo   38  
  39. 39. Arquitectura  mulGdisposiGvo   39  
  40. 40. Arquitectura  mulGdisposiGvo   40  
  41. 41. Arquitectura  SEO   41  
  42. 42. Arquitectura  SEO   §  Title   §  DescripGon   §  Keyword   §  H1   §  Img   42  
  43. 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. 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. 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. 46. ProtoGpado  –  El  paso  previo  al  diseño   46  
  47. 47. ProtoGpado  –  El  paso  previo  al  diseño   47  
  48. 48. 48  
  49. 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    

×