frontend. principios básicos. una guía de estilo y fundamentos web

para mens 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 mens 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

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

Maquetacin 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

Maquetacin 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.gshttp://www.desink.com

Y mejorando con 'Tips' para interfaces...10 tcnicas para mejorar tu interfaz10 Principios de diseos web efectivos Otros 5 principios de diseos web efectivos

Formularios

No hagas pensar.

Validacin en el cliente con JS pero siempre validar en el server

Crea mensajes de error comprensibles, cortos y aporta la solucin

Marca claramente la informacin 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 pgina de registro (93%) Atraer al visitante con los beneficios por registrarse (41%) Los /Title de los inputs en negrita (62%) La alineacin 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 esttica (57%) o dinmica (33%) y que aparesca debajo o a la derecha del campo. Puedes usar validacin esttica o dnamica. No usar un email de confirmacin (82%) Usar password de confirmacin (72%) Captcha o no captcha. (48% vs 52%) No usar botn de Cancelar (92%) Botn de Submit alineado a la izquierda (56%) o centrado (26%) Mensaje de agradecimiento ayuda a explorar el servicio. (45%)

Formularios HTML5

Placeholder

Formularios HTML5

Autofocus

Autofocus onLoad HTML4

Autofocus HTML5

Autofocus con fallbackDetecta si el navegador soporta el atributo "autofocus", y slo ejecuta el script de autofocus si no lo soporta.
if (!("autofocus" in document.createElement("input"))) { document.getElementById("q").focus(); }

Formularios

Ejemplos de buenas practicas...

Mejores practicas para la validacin de formularios

Teora...

Mensajes del sistema: cundo usar cul?Diseo de formularios - Campos (I)Diseo de formularios - Campos (II)

Recursos

Internet siempre esta ah para ayudarte...

http://diveintohtml5.orghttp://librosweb.eshttp://www.alzado.orghttp://www.smashingmagazine.comhttp://haml-lang.comhttp://sass-lang.com/http://960.gs/http://www.desink.com

Con Google siempre indexando...

Gracias

Preguntas, aportaciones y mejoras sern bienvenidas.

Presentacin creada para el grupo Las Palmas on Rails

frontend. principios básicos. una guía de estilo y fundamentos web

Design