Frontend. Principios básicos. Una guía de estilo y fundamentos web.

Frontend. Principios básicos. Guía de estilo y fundamentos web. v0.2 Por Kilian Barrera. Web: http://kilianbarrera.com Twitter: @kilianbarrera Bajo licencia Creative Commons

Principio I El contenido separado del diseño. · No maquetes con <table>. · Usa <div> · CSS es tu vida. Dominalo. · El espacio vacío es tu aliado. Deja respirar cada elemento · Usa una paleta de color reducida. · Crea una Guía de Estilo. Te dará consistencia. Mejorala. v

Principio II Navega en tu contenido. · Estructura tu contenido. · Navegalo mentalmente. · Crea mockups. · Crea casos de uso · Crea arboles cortos de navegación. Máximo 4 niveles. Mejor 1. · Cuida tu lenguaje. Usa “Tu perfil” no “Mi perfil”

Principio III Piensa en SEO. · Cada página tiene un <title> y <description> único · Usa los H1,H2,H3... para encabezar tu contenido. · Usa <ul> para menús y elementos repetidos (noticias,productos,etc) · Rutas URL con /nombre-largos-separados-por-guion · Los buscadores son tus aliados. Posicionate naturalmente. · Usa Javascript no instrusivo. · http://www.nombre.com y http://nombre.com

Principio IV No hagas pensar. · Crea menús legibles. · Crea contraste para los links. · Ten formularios equilibrados, ordenados y crea consistencia. · Has pruebas de usuarios con amigos. · Mantenlo simple, ordenado y consistente. · Destaca los cambios. Sobretodo si usas AJAX v

Maquetación CSS Usa un framework CSS. 960.gs, Blueprint... · Manten todo el CSS en un archivo aparte · Usa un “reset” CSS · Para los emails necesitas el CSS embebido en las etiquetas · Usa HAML+SAAS si puedes · Proporcionalidad. Coherencia en los espacios y margenes. · Busca el equilibrio. Ni todo junto, ni todo separado.

Maquetación CSS Ejemplo de HAML y ERB en Ruby on Rails // HAML #profile .left.column #date= print_date #address= current_user.address .right.column #email= current_user.email #bio= current_user.bio // ERB <div id="profile"> <div class="left column"> <div id="date"><%= print_date %></div> <div id="address"><%= current_user.address%></div> </div> <div class="right column"> <div id="email"><%= current_user.email %></div> <div id="bio"><%= current_user.bio %></div> </div> </div>

Maquetación CSS Ejemplo de SAAS en Ruby on Rails // Sass h1 height: 118px margin-top: 1em .tagline font-size: 26px text-align: right /* CSS */ h1 { height: 118px ; margin-top: 1em ; } .tagline { font-size: 26px ; text-align: right ; }

Aprender... leyendo... un buen libro gratuito de CSS... observando... http://960.gs http://www.desink.com Y mejorando con 'Tips' para interfaces... 10 técnicas para mejorar tu interfaz 10 Principios de diseños web efectivos Otros 5 principios de diseños web efectivos

Formularios No hagas pensar. · Validación en el cliente con JS pero siempre validar en el server · Crea mensajes de error comprensibles, cortos y aporta la solución · Marca claramente la información requerida · Informar siempre al usuario cuando fue completado correctamente · Es mejor prevenir el error. Usa ayuda contextual al tipo de campo. · Si usas un Captcha, tiene que soportar audio y un “recargar”

Formulario de registro Estudio de uso · Link de registro en la esquina superior derecha (40%) · Formulario de registro tiene que ser simple y sin distracciones (61%) · 1 sola página de registro (93%) · Atraer al visitante con los beneficios por registrarse (41%) · Los <label>/Title de los inputs en negrita (62%) · La alineación del label a la derecha o sobre el input · Usar como ayuda visual y contextual el "Placeholder text" · Alinear los campos verticalmente (86%) e igualar los "width" · No usar hover, active o focus effect (84%)

Formulario de registro Estudio de uso · Usar ayuda contextual estática (57%) o dinámica (33%) y que aparesca debajo o a la derecha del campo. · Puedes usar validación estática o dínamica. · No usar un email de confirmación (82%) · Usar password de confirmación (72%) · Captcha o no captcha. (48% vs 52%) · No usar botón de Cancelar (92%) · Botón de Submit alineado a la izquierda (56%) o centrado (26%) · Mensaje de agradecimiento ayuda a explorar el servicio. (45%)

Formularios HTML5 Placeholder <form> <input name="q" placeholder="Search Bookmarks and History" > <input type="submit" value="Search"> </form>

Formularios HTML5 Autofocus Autofocus onLoad HTML4 <body onLoad="document.forms.form_name.form_field.focus()" > <form method="get" name=" form_name " action="#"> <input type="text" name=" form_field " size="20" /> <input type="submit" value="Go" /> </form> Autofocus HTML5 <form> <input name="q" autofocus > <input type="submit" value="Search"> </form> Autofocus con fallback Detecta si el navegador soporta el atributo "autofocus", y sólo ejecuta el script de autofocus si no lo soporta. <form name="f"> <input id="q" autofocus> <script> if (!("autofocus" in document.createElement("input"))) { document.getElementById("q").focus(); } </script> <input type="submit" value="Go"> </form>

Formularios Ejemplos de buenas practicas... Mejores practicas para la validación de formularios Teoría... Mensajes del sistema: ¿cuándo usar cuál? Diseño de formularios - Campos (I) Diseño de formularios - Campos (II)

Recursos Internet siempre esta ahí para ayudarte... http://diveintohtml5.org http://librosweb.es http://www.alzado.org http://www.smashingmagazine.com http://haml-lang.com http://sass-lang.com/ http://960.gs/ http://www.desink.com Con Google siempre indexando...

Gracias Preguntas, aportaciones y mejoras serán bienvenidas. Presentación creada para el grupo “Las Palmas on Rails”

http://phpsenior.blogspot.com	972
http://feeds.feedburner.com	71
http://tunelcarpiano.net	46
http://phpsenior.blogspot.com.es	35
http://sigoenlomismo.blogspot.com	31
http://kilianbarrera.com	30
http://phpsenior.blogspot.com.ar	23
http://phpsenior.blogspot.mx	22
http://www.slideshare.net	10
http://www.feedage.com	5
http://www.feedage.com	5
http://127.0.0.1:8795	1
http://phpsenior.blogspot.pt	1

Frontend. Principios básicos. Una guía de estilo y fundamentos web.

by Kilian Barrera on Jan 22, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

13 Embeds 1,252

Statistics

Frontend. Principios básicos. Una guía de estilo y fundamentos web. — Presentation Transcript