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.
La Modernidad y Arquitectura Moderna - Rosibel Velásquez
Frontend. Principios básicos. Una guía de estilo y fundamentos 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.
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 "Placeholder text" · Alinear los campos verticalmente (86%) e igualar los "width" · 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%)
14. 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>
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...