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.

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

48. 48

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