Buenas prácticas para crear tu página web - Nominalia
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Buenas prácticas para crear tu página web - Nominalia

on

  • 3,864 views

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 ...

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

Statistics

Views

Total Views
3,864
Views on SlideShare
915
Embed Views
2,949

Actions

Likes
1
Downloads
11
Comments
0

8 Embeds 2,949

http://www.escueladeinternet.com 2932
http://www.google.com.mx 5
http://www.escueladeinternet.es 4
http://www.google.com.co 3
http://training.amenworld.pt 2
http://webcache.googleusercontent.com 1
https://www.google.com.mx 1
http://www.google.cl 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Buenas prácticas para crear tu página web - Nominalia Presentation Transcript

  • 1. Buenas prácticaspara crear tupágina web#nominaliaEDIwww.EscueladeInternet.com10/05/2013 Juanmi Barea
  • 2. Sobre el webinarEstamos 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 relacionada2Sobre el webinar
  • 3. DOMAINS & ADVERTISINGLa idea de webCómo empezar a hacerla realidad
  • 4.  Problemas de definición de la idea Problemas de conocimiento del medio Problemas para entender conceptos básicosLo difícil es empezarComo mis ideas se desvanecen ante esa montaña de dudas4Lo difícil es empezar
  • 5.  Inseguridad en el procedimiento Dificultad para entender queherramienta es la mejor Cómo usar las herramientas elegidasLo difícil es empezarComo mis ideas se desvanecen ante esa montaña de dudas5Lo difícil es empezar
  • 6.  La solución para empezar con buen pie un proyecto no está en la tecnología, ni en unsoftware, 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 quiereshacer.Lo difícil es empezarComo mis ideas se desvanecen ante esa montaña de dudas6Lo difícil es empezar
  • 7. DOMAINS & ADVERTISINGConceptos UXPrincipios fundamentales para realizar una buena página web
  • 8.  Facilidad¿Es fácil para tus usuarios entender lainterfaz de tu web? EficienciaUna vez entendido el diseño, ¿cuánto tardanen cumplir las tareas básicas y objetivos quepretendes?Conceptos UXAlgunos principios genéricos a tener siempre en cuenta8Conceptos UX
  • 9.  RecordabilidadCuando un usuario vuelve a tu web despuésde un tiempo ¿Es complicado para ellos“conectar” con tu diseño? Efecto WOW¿Cómo impresionas a los usuarios de tu webpara que permanezcan en tu página ovuelvan a ella?Conceptos UXAlgunos principios genéricos a tener siempre en cuenta9Conceptos UX
  • 10.  Satisfacción¿Se sienten cómodos tus usuarios usando tuweb? Si no genera frustraciones es un buendiseño web. UtilidadFuncionalidad del diseño ¿el usuario logracumplir sus objetivos dentro de tu interfaz?Conceptos UXAlgunos principios genéricos a tener siempre en cuenta10Conceptos UX
  • 11. DOMAINS & ADVERTISINGConsejos útilesPrácticas que ayudan a enriquecer y potenciar nuestra web
  • 12.  Las personas se dan cuenta instintiva e instantáneamente de la existencia de rostrosen su panorama visual. En los sitios Web las personas tienden a enfocarse en rostro y ojos, lo cual da pie aque muchos expertos en marketing aprovechen este hecho para llamar la atención desus usuarios. La atracción hacia los rostros de personas es sólo el principio. Tenemos que trabajarpara redirigir las miradas hacia nuestros objetivos. Focalizar.La importancia del rostroConsejo útil #112Consejos útiles
  • 13. La importancia del rostro13Consejos útiles
  • 14.  Tener un texto optimizado para la lectura esfundamental, no sólo por la presencia enpantalla sino por la eficiencia para el lector. Un texto legible se lee rápido y se comprendemejor. Un texto debe ser directo y enriquecido,pensado para la “lectura vertical”.Legibilidad “obviamente”Consejo útil #214Consejos útiles
  • 15.  Inicio de escritura:Empezar a escribir a una distanciasuficientemente grande desde el margenizquierdo.http://www.nngroup.com/articles/horizontal-attention-leans-left/ Ancho del párrafo:procurar que no haya más de 20 palabras porlinea. Esto se consigue poniendo un ancho deunos 500px en ese párrafo.Legibilidad: párrafoConsejo útil #215Consejos útiles
  • 16.  Tipografía:Los tipos de fuente más recomendados sonaquellas especialmente diseñadas para sermostradas en pantalla (y no en papel). Estasson las Arial, Helvetica, Georgia, Times,Verdana o Courier entre otras. Uso de fuentes externas moderado.Legibilidad: TypeConsejo útil #216Consejos útiles
  • 17.  Nunca justificar los textos en una webAunque entremos en discusión con los diseñadoresgráficos, está demostrado que dificulta la legibilidad.Una web no es un periódico ni es un diseño gráfico. Tamaño de fuenteRecomendable utilizar un tamaño de fuente igual osuperior a los 12px.Legibilidad: formatoConsejo útil #217Consejos útiles
  • 18.  Interlineado:El interlineado es un parámetro fundamental para lograr un texto legible. Nointeresan líneas muy juntas que hagan saltar de una a la otra por error. Tampocolí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: interlineadoConsejo útil #218Consejos útiles
  • 19.  Interlineado:El interlineado es un parámetro fundamental para lograr un texto legible. Nointeresan líneas muy juntas que hagan saltar de una a la otra por error. Tampocolíneas muy distanciadas que visualmente parezcan formar parte de párrafos distintos.Es interesante utilizar un interlineado superior al tamaño de fuente.Legibilidad: interlineadoConsejo útil #219Consejos útiles
  • 20.  El color que los navegadores muestran pordefecto es azul, así que el usuario tieneadquirida esta cultura. Los enlaces tienen que contrastar con elfondo y deben ser bastante diferentes delresto de texto del sitio. En lo que se refiere a usabilidad, hacer loque lo que la mayoría hace, es lo mejor.Links: Los vínculos son azulesConsejo útil #320Consejos útiles
  • 21.  Discusión actual sobre el uso de scroll. Lastendencias y la cultura está cambiando. Cerca del 75% de la gente no usa el scrollen su primera visita a nuestro sitio web.Esto nos advierte de la imporancia quetiene colocar nuestro contenido “clave”dentro de ese primer pantallazoScroll, un problema dudosoConsejo útil #421Consejos útiles
  • 22.  1. Nombre del sitio Web 2. Valor o propuesta de la web (québeneficio ofrece a los usuarios, quepueden encontrar) 3. Menú de navegación por seccionesrelevantes al usuario. Acción ( CTA)Priorización de elementos ( 600px)Consejo útil #522Consejos útiles
  • 23.  El espacio en blanco ayuda a la comprensión. Necesitamos espacio en blanco para ordenar loselementos. Con el espacio en blanco se generan jerarquíasvisuales, podemos jugar con esto. Aislar los CTA es una forma inteligente defocalizar al usuario hacia tus objetivos.El espacio en blancoConsejo útil #623Consejos útiles
  • 24. El espacio en blanco24Consejos útiles
  • 25. DOMAINS & ADVERTISINGProceso de creación webExportando el mundo profesional al ámbito del “small site”
  • 26. Creación web: una realidad peliagudaCómo es el proceso real de una web profesional26Proceso de creación web
  • 27.  En un inicio fue un complemento informativode la empresa. Explosión de internet: Todos pueden tener unaweb, las empresas empiezan a invertir. Tendencia hacia un mundo basado en internet.Cloud es el futuro. Una web profesional implica a mucha gente ensu realización.Creación web: una realidad peliagudaCómo es el proceso real de una web profesional27Proceso de creación web
  • 28.  Estadísticas de tendencia relacionadas con laactividad de vuestra web.http://www.google.es/trends/ Revisar los directorios públicos: Dmozhttp://www.dmoz.es/ Benchmark: comparativa con las webs similaresa tu actividad / propósito.Creación web: AnálisisA tener en cuenta antes de empezar con el diseño web28Proceso 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ónCreación web: ProyectaciónEmpezando a plasmar la idea29Proceso 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áginaCreación web: Partes importantesA tener en cuenta antes de empezar con el diseño web30Proceso de creación web
  • 31.  Estructura eficiente, que facilite elmantenimiento ( archivos fácilmente localizables) Recomendado: organización semántica yexplicativa URL descriptivas e inteligentes:http://www.sitioweb.com/eaf_files/fap.htmlhttp://www.sitioweb.com/astrofisica/fuerzas/atraccion-planetaria.htmlCreación web: Estructura de archivosA tener en cuenta antes de empezar con el diseño web31Proceso de creación web
  • 32.  Html como base. CSS para usar los estilos. El CSS nos va a definirinfinidad de características de la página web. Hayvarias versiones de css y html. Actualmente vamos por la versión html5 y CSS3.Creación web: CodificaciónApuntes breves sobre el html y el css32Proceso 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=editCreación web: CodificaciónApuntes breves sobre el html y el css33Proceso 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 yevolutivahttp://www.escueladeinternet.comCreación web: Diseño evolutivoApuntes breves sobre el html y el css34Proceso de creación web
  • 35. DOMAINS & ADVERTISINGEstándaresUsos y hábitos que deberían seguirse siempre al cerar una web
  • 36.  Exinten estándares web, están establecidos y serecomienda 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 losnavegadores.Respeto por los estándaresAunque resulte pesado es muy aconsejable ser estricto36Respeto por los estándares
  • 37. Respeto por los estándaresSin estándares tu web se ve diferente en navegadores distintos37Respeto por los estándares
  • 38.  Problemas en la maquetación: el CSS no se rigepor la normativa. Diferencias en espacios, paddings, sombras yotros elementos. Problemas de carga de algunos elementos segúnsu propiedad.Respeto por los estándares¿Qué errores se generan fruto de no seguir estándares?38Respeto por los estándares
  • 39.  Seamos conscientes que esto no es una cienciaexacta, si no hacemos codificaciones extrañasno tiene que pasar nada. Navegadores como Internet Explorer no soportanmuchas propiedades y clases, lo cual generaerrores.Respeto por los estándaresNo todo va a ir mal, a veces los navegadores son el problema39Respeto por los estándares
  • 40. Respeto por los estándaresSi todo va mal… ¡Siempre nos quedará el comodín del público!40Respeto por los estándares
  • 41. DOMAINS & ADVERTISING¡Muchas gracias!Encuentra todo el contenido de este seminario web en:www.escueladeinternet.com