Presentación del webinar "Buenas prácticas para crear tu página web", impartido por Juanmi Barea, especialista UX de Nominalia el 9/5/2013. Te enseñamos algunas técnicas y procedimientos que te ayudarán a crear una página web de calidad, siguiendo los estándares. Resolvemos en directo varios problemas habituales, enseñamos herramientas útiles y mostramos ejemplos de buenas prácticas

1. Buenas prácticas
para crear tu
página web
#nominaliaEDI
www.EscueladeInternet.com
10/05/2013 Juanmi Barea

2. Sobre el webinar
Estamos a punto de abordar los siguientes temas:
• La base: de la idea a la web
• Conceptos y consejos UX para mejorar / crear una web de calidad
• El proceso de creación: Exportando el mundo profesional al ámbito del “small site”
• Conociendo los estándares
• Crossbrowsing y problemática relacionada
2
Sobre el webinar

3. DOMAINS & ADVERTISING
La idea de web
Cómo empezar a hacerla realidad

4.  Problemas de definición de la idea
 Problemas de conocimiento del medio
 Problemas para entender conceptos básicos
Lo difícil es empezar
Como mis ideas se desvanecen ante esa montaña de dudas
4
Lo difícil es empezar

5.  Inseguridad en el procedimiento
 Dificultad para entender que
herramienta es la mejor
 Cómo usar las herramientas elegidas
Lo difícil es empezar
Como mis ideas se desvanecen ante esa montaña de dudas
5
Lo difícil es empezar

6.  La solución para empezar con buen pie un proyecto no está en la tecnología, ni en un
software, ni en un libro. La solución está en tu cabeza.
 Coge un papel y haz un brainstorming, tanto textual como gráfico
 Redacta en 3 lineas que pretendes con esa web y escribe en una linea que quieres
hacer.
Lo difícil es empezar
Como mis ideas se desvanecen ante esa montaña de dudas
6
Lo difícil es empezar

7. DOMAINS & ADVERTISING
Conceptos UX
Principios fundamentales para realizar una buena página web

8.  Facilidad
¿Es fácil para tus usuarios entender la
interfaz de tu web?
 Eficiencia
Una vez entendido el diseño, ¿cuánto tardan
en cumplir las tareas básicas y objetivos que
pretendes?
Conceptos UX
Algunos principios genéricos a tener siempre en cuenta
8
Conceptos UX

9.  Recordabilidad
Cuando un usuario vuelve a tu web después
de un tiempo ¿Es complicado para ellos
“conectar” con tu diseño?
 Efecto WOW
¿Cómo impresionas a los usuarios de tu web
para que permanezcan en tu página o
vuelvan a ella?
Conceptos UX
Algunos principios genéricos a tener siempre en cuenta
9
Conceptos UX

10.  Satisfacción
¿Se sienten cómodos tus usuarios usando tu
web? Si no genera frustraciones es un buen
diseño web.
 Utilidad
Funcionalidad del diseño ¿el usuario logra
cumplir sus objetivos dentro de tu interfaz?
Conceptos UX
Algunos principios genéricos a tener siempre en cuenta
10
Conceptos UX

11. DOMAINS & ADVERTISING
Consejos útiles
Prácticas que ayudan a enriquecer y potenciar nuestra web

12.  Las personas se dan cuenta instintiva e instantáneamente de la existencia de rostros
en su panorama visual.
 En los sitios Web las personas tienden a enfocarse en rostro y ojos, lo cual da pie a
que muchos expertos en marketing aprovechen este hecho para llamar la atención de
sus usuarios.
 La atracción hacia los rostros de personas es sólo el principio. Tenemos que trabajar
para redirigir las miradas hacia nuestros objetivos. Focalizar.
La importancia del rostro
Consejo útil #1
12
Consejos útiles

13. La importancia del rostro
13
Consejos útiles

14.  Tener un texto optimizado para la lectura es
fundamental, no sólo por la presencia en
pantalla sino por la eficiencia para el lector.
 Un texto legible se lee rápido y se comprende
mejor.
 Un texto debe ser directo y enriquecido,
pensado para la “lectura vertical”.
Legibilidad “obviamente”
Consejo útil #2
14
Consejos útiles

15.  Inicio de escritura:
Empezar a escribir a una distancia
suficientemente grande desde el margen
izquierdo.http://www.nngroup.com/articles/horizontal-
attention-leans-left/
 Ancho del párrafo:
procurar que no haya más de 20 palabras por
linea. Esto se consigue poniendo un ancho de
unos 500px en ese párrafo.
Legibilidad: párrafo
Consejo útil #2
15
Consejos útiles

16.  Tipografía:
Los tipos de fuente más recomendados son
aquellas especialmente diseñadas para ser
mostradas en pantalla (y no en papel). Estas
son las Arial, Helvetica, Georgia, Times,
Verdana o Courier entre otras.
 Uso de fuentes externas moderado.
Legibilidad: Type
Consejo útil #2
16
Consejos útiles

17.  Nunca justificar los textos en una web
Aunque entremos en discusión con los diseñadores
gráficos, está demostrado que dificulta la legibilidad.
Una web no es un periódico ni es un diseño gráfico.
 Tamaño de fuente
Recomendable utilizar un tamaño de fuente igual o
superior a los 12px.
Legibilidad: formato
Consejo útil #2
17
Consejos útiles

18.  Interlineado:
El interlineado es un parámetro fundamental para lograr un texto legible. No
interesan líneas muy juntas que hagan saltar de una a la otra por error. Tampoco
líneas muy distanciadas que visualmente parezcan formar parte de párrafos distintos.
Idealmente, es interesante utilizar un interlineado superior al tamaño de fuente.
Legibilidad: interlineado
Consejo útil #2
18
Consejos útiles

19.  Interlineado:
El interlineado es un parámetro fundamental para lograr un texto legible. No
interesan líneas muy juntas que hagan saltar de una a la otra por error. Tampoco
líneas muy distanciadas que visualmente parezcan formar parte de párrafos distintos.
Es interesante utilizar un interlineado superior al tamaño de fuente.
Legibilidad: interlineado
Consejo útil #2
19
Consejos útiles

20.  El color que los navegadores muestran por
defecto es azul, así que el usuario tiene
adquirida esta cultura.
 Los enlaces tienen que contrastar con el
fondo y deben ser bastante diferentes del
resto de texto del sitio.
 En lo que se refiere a usabilidad, hacer lo
que lo que la mayoría hace, es lo mejor.
Links: Los vínculos son azules
Consejo útil #3
20
Consejos útiles

21.  Discusión actual sobre el uso de scroll. Las
tendencias y la cultura está cambiando.
 Cerca del 75% de la gente no usa el scroll
en su primera visita a nuestro sitio web.
Esto nos advierte de la imporancia que
tiene colocar nuestro contenido “clave”
dentro de ese primer pantallazo
Scroll, un problema dudoso
Consejo útil #4
21
Consejos útiles

22.  1. Nombre del sitio Web
 2. Valor o propuesta de la web (qué
beneficio ofrece a los usuarios, que
pueden encontrar)
 3. Menú de navegación por secciones
relevantes al usuario.
 Acción ( CTA)
Priorización de elementos ( 600px)
Consejo útil #5
22
Consejos útiles

23.  El espacio en blanco ayuda a la comprensión.
 Necesitamos espacio en blanco para ordenar los
elementos.
 Con el espacio en blanco se generan jerarquías
visuales, podemos jugar con esto.
 Aislar los CTA es una forma inteligente de
focalizar al usuario hacia tus objetivos.
El espacio en blanco
Consejo útil #6
23
Consejos útiles

24. El espacio en blanco
24
Consejos útiles

25. DOMAINS & ADVERTISING
Proceso de creación web
Exportando el mundo profesional al ámbito del “small site”

26. Creación web: una realidad peliaguda
Cómo es el proceso real de una web profesional
26
Proceso de creación web

27.  En un inicio fue un complemento informativo
de la empresa.
 Explosión de internet: Todos pueden tener una
web, las empresas empiezan a invertir.
 Tendencia hacia un mundo basado en internet.
Cloud es el futuro.
 Una web profesional implica a mucha gente en
su realización.
Creación web: una realidad peliaguda
Cómo es el proceso real de una web profesional
27
Proceso de creación web

28.  Estadísticas de tendencia relacionadas con la
actividad de vuestra web.
http://www.google.es/trends/
 Revisar los directorios públicos: Dmoz
http://www.dmoz.es/
 Benchmark: comparativa con las webs similares
a tu actividad / propósito.
Creación web: Análisis
A tener en cuenta antes de empezar con el diseño web
28
Proceso de creación web

29.  Brainstorming visual
 La importancia del boceto rápido
 Definición de los elementos que participan
 Tener en cuenta el diseño de interacción
Creación web: Proyectación
Empezando a plasmar la idea
29
Proceso de creación web

30.  Encabezado
 Info principal ( H1, H2…)
 Intro
 Logo
 Cuerpo
 Columnas/ barras auxiliares
 Contenido principal
 Desarrollo de las acciones principales
 Pie de página
Creación web: Partes importantes
A tener en cuenta antes de empezar con el diseño web
30
Proceso de creación web

31.  Estructura eficiente, que facilite el
mantenimiento ( archivos fácilmente localizables)
 Recomendado: organización semántica y
explicativa
 URL descriptivas e inteligentes:
http://www.sitioweb.com/eaf_files/fap.html
http://www.sitioweb.com/astrofisica/fuerzas/atraccion-
planetaria.html
Creación web: Estructura de archivos
A tener en cuenta antes de empezar con el diseño web
31
Proceso de creación web

32.  Html como base.
 CSS para usar los estilos. El CSS nos va a definir
infinidad de características de la página web. Hay
varias versiones de css y html.
 Actualmente vamos por la versión html5 y CSS3.
Creación web: Codificación
Apuntes breves sobre el html y el css
32
Proceso de creación web

33.  Vamos a coger el ejemplo del wireframe y ver como está estructurado el código.
 http://webinarsjm.newcloudsite.com/?mode=edit
Creación web: Codificación
Apuntes breves sobre el html y el css
33
Proceso de creación web

34.  Organización según las necesidades.
 Haz crecer tu web como a un niño
 Escuela de internet es un buen ejemplo de ello:
 Plan de desarrollo inicial
 Crecimiento en elementos principales
 Creación de elementos auxiliares
 Mejora continua y
evolutivahttp://www.escueladeinternet.com
Creación web: Diseño evolutivo
Apuntes breves sobre el html y el css
34
Proceso de creación web

35. DOMAINS & ADVERTISING
Estándares
Usos y hábitos que deberían seguirse siempre al cerar una web

36.  Exinten estándares web, están establecidos y se
recomienda encarecidamente respetarlos.
http://www.w3c.es/estandares/
 Dan confianza a la hora de hacer una web.
 Garantiza un cierto éxito.
 Facilitan la carga de la página en todos los
navegadores.
Respeto por los estándares
Aunque resulte pesado es muy aconsejable ser estricto
36
Respeto por los estándares

37. Respeto por los estándares
Sin estándares tu web se ve diferente en navegadores distintos
37
Respeto por los estándares

38.  Problemas en la maquetación: el CSS no se rige
por la normativa.
 Diferencias en espacios, paddings, sombras y
otros elementos.
 Problemas de carga de algunos elementos según
su propiedad.
Respeto por los estándares
¿Qué errores se generan fruto de no seguir estándares?
38
Respeto por los estándares

39.  Seamos conscientes que esto no es una ciencia
exacta, si no hacemos codificaciones extrañas
no tiene que pasar nada.
 Navegadores como Internet Explorer no soportan
muchas propiedades y clases, lo cual genera
errores.
Respeto por los estándares
No todo va a ir mal, a veces los navegadores son el problema
39
Respeto por los estándares

40. Respeto por los estándares
Si todo va mal… ¡Siempre nos quedará el comodín del público!
40
Respeto por los estándares

41. DOMAINS & ADVERTISING
¡Muchas gracias!
Encuentra todo el contenido de este seminario web en:
www.escueladeinternet.com