Diseño Web y sentido común

Presentación para la Universidad Tecnológica Emiliano Zapata del Estado de Morelos.

Transcript

1. Diseño Web y sentido común Rogelio Martínez @rogeliomtx +RogelioMartinez
2. Rogelio Martínez Ingeniero en Tecnologías de la Información Co-fundador/Blogger en Klicxel Diseñador y Desarrollador Web Analista Programador en Centro de Desarrollo de Software Certificado Java Programmer SE6 Oracle
3. • Cross-browser • Guías de estilo • Diseño UI/UX • Sentido común ¿Dónde iniciar?
4. Cross-browser ¿Funciona en todos lados Internet Explorer?
5. Los sitios no necesariamente tienen que ser iguales en todos los navegadores. Es necesario que primero sean funcionales. Cross-browser https://www.modern.ie/en-us/category/code-with- standards/
6. Inicia con una base sólida «normalize.css» por ejemplo Cross-browser http://necolas.github.io/normalize.css/
7. Usa validadores Web W3C Markup Validation Service W3C CSS Validation Service Cross-browser http://www.w3.org/
8. Usa etiquetas específicas del fabricante (navegador) y javascript para verificar funcionabilidad. Cross-browser http://msdn.microsoft.com/en- us/magazine/hh475813.aspx 1) <script type="text/javascript"> if (navigator.userAgent.indexOf("MSIE") > 0){ // Run custom code for Internet Explorer. } </script> 2) <!--[if lte IE 7]> <style TYPE="text/css">@import url(ie7.css);</style> <![endif]-->
9. 3) <script type="text/javascript"> functionisCanvasSupported(){ var e = document.createElement('canvas'); return e.getContext && e.getContext('2d'); } </script> 4) <video> <source src="video.mp4" type="video/mp4" /> <source src="video.webm" type="video/webm" /> Your browser doen't suppport videos natively. </video> Usa etiquetas específicas del fabricante (navegador) y javascript para verificar funcionabilidad. Cross-browser
10. Otros recursos http://css3test.com/ http://html5test.com/ https://html.spec.whatwg.org/multipag e/embedded-content.html http://fmbip.com/ Cross-browser
11. Estrategia, diseño y desarrollo Guías de estilo
12. Diseño de componentes como sistema centrado en consistencia. Que sea fácil para el usuario aprender rápidamente, por compleja que pudiera ser la herramienta. Guías de estilo
13. Tener módulos reutilizables y bien documentados. Hacer esto hará más fácil de mantener el código y más rápido actualizar componentes para mejorarlos o corregir errores. Guías de estilo
14. Compártelo, mejóralo constantemente. Nada mejor que un ejercito de desarrolladores añadiendo armamento a tu excelente desarrollo. Guías de estilo
15. Otros recursos http://alistapart.com/article/creating- style-guides http://getbootstrap.com/ Guías de estilo
16. Conocer a tu usuario debes Diseño UI/UX
17. Conoce a tu target. Cuidado con ser demasiado «abstracto» o minimalista. No confundas a tus usuarios, procura ser lo más claro con tu diseño basado en su conocimiento previo. Diseño UI/UX
18. Conoce el comportamiento y necesidades de tu usuario. El diseño es una herramienta para alcanzar objetivos de mejor manera. Diseño UI/UX
19. Concéntrate en el contenido, lo que es esencial. El desarrollo, el desempeño, los colores, los espacios, TODO tiene que ayudar al usuario a centrarse en lo que a él le interesa. Diseño UI/UX
20. Se claro. Si mandas un mensaje al cliente, que sea claro la razón y si es por un problema, dile que puede hacer para solucionarlo. Diseño UI/UX
21. Otros recursos http://notasfuertes.blogspot.mx/2012/ 01/los-10-principios-de-la- usabilidad.html https://medium.com/@TGines/designi ng-user-interfaces-for-your-mother- dd45ec50f7b0 Guías de estilo
22. Sentido común
23. • Céntrate en tu contenido • Conoce a tu target • Conoce tus herramientas • El tiempo importa • Inspírate • Investiga Algo de sentido común http://blogvecindad.com/psicologia- del-color-pantone/ http://tympanus.net/codrops/ http://alistapart.com/article/on-web- typography