Frontend. Principios básicos. Una guía de estilo y fundamentos web. Es una rápida recopilación de ideas, principios y conceptos sin terminar. Con este documento pretendo dar algo de luz a los que empiezan en el diseño y desarrollo web. Por otro lado, espero que otros muchos les sirva como recordatorio. Me gustaría que la comunidad me ayudara a ir completando este documento. Recibir un feedback constructivo. Ahora mismo es un pobre powerpoint que espero pasar muy pronto a un documento más formal y estrucuturado. Mi intención es ir creando un manual báscio sobre la creación de Frontend. Lo dicho, nace con la intención de ayudar a los diseñadores y desarrolladores web.

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

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

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

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

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

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

7. 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=&quot;profile&quot;> <div class=&quot;left column&quot;> <div id=&quot;date&quot;><%= print_date %></div> <div id=&quot;address&quot;><%= current_user.address%></div> </div> <div class=&quot;right column&quot;> <div id=&quot;email&quot;><%= current_user.email %></div> <div id=&quot;bio&quot;><%= current_user.bio %></div> </div> </div>

8. 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 ; }

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

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

11. 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 &quot;Placeholder text&quot; · Alinear los campos verticalmente (86%) e igualar los &quot;width&quot; · No usar hover, active o focus effect (84%)

12. 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%)

13. Formularios HTML5 Placeholder <form> <input name=&quot;q&quot; placeholder=&quot;Search Bookmarks and History&quot; > <input type=&quot;submit&quot; value=&quot;Search&quot;> </form>

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

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

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

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