Esta presentación esta planeada como un proceso lógico q se sigue con un cliente para el desarrollo exitoso de un web site; es una presentación básica de los temas más importantes a considerar en el desarrollo de un site para un cliente.

1. Diseño Web Diseño y desarrollo de sitios web @dgfrancisco Diciembre 2010

2. ???????????????????

4. ¿Cuál es el cliente/audiencia?

5. ¿cuá es su negocio/producto?

6. ¿Cuál es el principal mensaje que quiere quiere transmitir?

7. ¿Cuál es su competencia?

8. ¿Por qué alguien compraria su producto/negocio?

10. Breif Resultado de las preguntas, de la discusion previa con el cliente, reglas de juego para definir un enfoque.

11. FEEDBACK

12. $$$$$$$$$$$$

13. Mapa de navegación Son una ayuda a la navegación por ofrecer una vista general del contenido de un sitio de un simple vistazo.

14. Arquitectura de Info Busca articular un conjunto de técnicas para ayudar al desarrollo y producción de espacios de información como los sitios web.

15. Arquitectura de informacion @dgfrancisco Diciembre 2010

16. Arquitectura de informacion @dgfrancisco Diciembre 2010

17. Arquitectura de informacion @dgfrancisco Diciembre 2010

19. El etiquetado o rotulado de los contenidos para acceder a la información.

20. La planificación, gestión y desarrollo de contenidos.

22. Wireframe Representación esquemática de una página web sin elementos gráficos que muestran contenido y comportamiento de las páginas. @dgfrancisco Diciembre 2010

23. Wireframe

24. Wireframe

25. Wireframe

26. Wireframe

27. FEEDBACK

28. Diseñar Es el proceso por el cual un problema visual tiene una solucion exitosa, mediante procesos creativos.

29. Estrategia ¿Cómo?

30. Estrategia CMS Admin Dispositivos Framework ¿Cómo?

31. Propuestas Posibles tesis!!!

32. Usabilidad La facilidad con que las personas pueden utilizar una herramienta particular o cualquier otro objeto fabricado por humanos con el fin de alcanzar un objetivo concreto.

33. Usabilidad

34. Usabilidad

35. Usabilidad

36. Usabilidad

38. ¿Qué quieren o necesitan hacer los usuarios?

39. ¿Qué debe dejarse a la máquina? ¿Qué al usuario?

41. Accesabilidad Es el grado en el que todas las personas pueden utilizar un objeto, visitar un lugar o acceder a un servicio, independientemente de sus capacidades técnicas, cognitivas o físicas.

42. Accesabilidad

43. Accesabilidad

44. Accesabilidad @dgfrancisco Diciembre 2010

45. Accesabilidad SEO

46. FEEDBACK

50. Codigo!!!! @dgfrancisco Diciembre 2010

51. Accesabilidad SEO

52. Web semántica Información adicional —que describen el contenido, el significado y la relación de los datos— se deben proporcionar de manera formal, para que así sea posible evaluarlas automáticamente por máquinas de procesamiento (Robots).

53. <h1>Titulo</h1> <div class="titulo">Titulo</div> <p>Titulo</p>

54. FEEDBACK

55. Estándares web conjunto de mejores prácticas estandarizadas para construir sitios web y a la filosofía del diseño y desarrollo web que incluye esos métodos

56. Validar HTML/CSS

58. Trident, IE

59. KHTML/WebCore Konqueror/Safari.

60. Presto: Opera.

61. Tasman: IE para Mac.

62. Gzilla: Dillo.

63. GtkHTML: Links.

65. Pruebas A/B Distintas versiones de un elemento o una página completa que aleatoreamente le mostraremos a los usuarios para saber cuál de ellas está rindiendo mejor, midiéndolo en conversiones como clicks, ventas realizadas, suscripciones, y muchas más.

66. 3% 7%

67. 27% 30%

69. Haml

70. <div id="profile"> <div class="left column"> <h1 id="date">Fecha</h1> <p id="address">Dirección</p> </div> </div>

71. <divid="profile"> <divclass="left column"> <h1id="date">Fecha</h1> <pid="address">Dirección</p> </div> </div>

72. #profile .left.column %h1#date Fecha %p#address Dirección

73. #profile .left.column %h1#date Fecha %p#address Dirección

74. Sass

75. <divid="profile"> <divclass="left column"> <h1id="date">Fecha</h1> <pid="address">Dirección</p> </div> </div>

76. #profile {background: rojo; padding: 10px;} .left, .column {font-size:12px;} h1#date {color: #0c0} h1#fecha {color: #00c} p {font-size: 10px} p#address {margin: 0 0 0 10px;}

77. #profile background: $color padding: 10px .left, .column font-size:+fuentes h1#date color: #0c0

79. http://leaverou.me/ft2010/ http://html5vsflash.tumblr.com/ http://slides.html5rocks.com/#slide1 http://www.chromeexperiments.com/arcadefire/ http://bitelia.com/2010/07/10-muy-entretenidos-experimentos-en-javascript-y-html5-para-hacer-en-tu-navegador