Cómo enfrentar un  Proyecto Web Del Wireframe a Javascript
Sumario <ul><li>Aspectos Generales </li></ul><ul><li>Wireframes y Mockups </li></ul><ul><li>Maquetación </li></ul><ul><li>...
Aspectos Generales <ul><li>¿Dónde arranca un proyecto web? </li></ul><ul><li>El contenido es el rey… ausente </li></ul><ul...
Wireframes y Mockups <ul><li>Piensa, intenta, borra, piensa, intenta de nuevo… </li></ul><ul><li>Wireframe: Enfocado a la ...
Maquetación <ul><li>Maqueta en forma general y flexible </li></ul><ul><li>Semántica, estándares y validaciones </li></ul><...
CSS <ul><li>CSS Reseter </li></ul><ul><li>Frameworks CSS </li></ul><ul><li>Ordena y comenta tu CSS </li></ul>Reseters Popu...
Javascript <ul><li>Evita que tu Javascript sea Intrusivo </li></ul><ul><li>AJAX: WIN – Abuso de AJAX: FAIL </li></ul><ul><...
Enfoque <ul><li>¿Progressive Enhancement o Graceful Degradation? </li></ul><ul><li>Dos enfoques a un mismo problema </li><...
<ul><li>¿Preguntas? </li></ul>
Muchas Gracias
Upcoming SlideShare
Loading in …5
×

Cómo enfrentar un proyecto web

899 views
817 views

Published on

Algunos consejos sobre la manera de tratar con un proyecto web, desde la planificación inicial (Wireframe) hasta la implementación

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
899
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Cómo enfrentar un proyecto web

  1. 1. Cómo enfrentar un Proyecto Web Del Wireframe a Javascript
  2. 2. Sumario <ul><li>Aspectos Generales </li></ul><ul><li>Wireframes y Mockups </li></ul><ul><li>Maquetación </li></ul><ul><li>CSS </li></ul><ul><li>Enfoque </li></ul>
  3. 3. Aspectos Generales <ul><li>¿Dónde arranca un proyecto web? </li></ul><ul><li>El contenido es el rey… ausente </li></ul><ul><li>Inspírate en quien quieras, no te copies de nadie. </li></ul><ul><li>Más propuestas, más problemas </li></ul>
  4. 4. Wireframes y Mockups <ul><li>Piensa, intenta, borra, piensa, intenta de nuevo… </li></ul><ul><li>Wireframe: Enfocado a la estructura – Mockup: enfocado al diseño. </li></ul><ul><li>Este es el momento de pensar en usabilidad </li></ul>Techtástico: 15 herramientas en línea para hacer mockups, wireframes o prototipos http://techtastico.com/post/mockups-online PSDFan: A comprehensive guide to mockups in web design http://psdfan.com/inspiration/web-design/a-comprehensive-guide-to-mockups-in-web-design
  5. 5. Maquetación <ul><li>Maqueta en forma general y flexible </li></ul><ul><li>Semántica, estándares y validaciones </li></ul><ul><li>¡Las tablas no son para maquetar! </li></ul>
  6. 6. CSS <ul><li>CSS Reseter </li></ul><ul><li>Frameworks CSS </li></ul><ul><li>Ordena y comenta tu CSS </li></ul>Reseters Populares: Trípoli Reset: http://devkick.com/lab/tripoli CSS Reset (Erick Meyers): http://meyerweb.com/eric/tools/css/reset Frameworks Populares: 960 Grid System: http://960.gs YUI Library: http://developer.yahoo.com/yui Blueprint: http://blueprintcss.org
  7. 7. Javascript <ul><li>Evita que tu Javascript sea Intrusivo </li></ul><ul><li>AJAX: WIN – Abuso de AJAX: FAIL </li></ul><ul><li>Si usas un Framework no todo requiere un plugin </li></ul><ul><li>Trata de que tu código pueda ser usado en más de un sitio. </li></ul>
  8. 8. Enfoque <ul><li>¿Progressive Enhancement o Graceful Degradation? </li></ul><ul><li>Dos enfoques a un mismo problema </li></ul><ul><li>Progressive Enhancement: Independiente del browser, enfocado en el contenido. </li></ul><ul><li>Graceful Degradation: Enfocado en el diseño. </li></ul>A List Apart: Understanding Progressive Enhancement http://alistapart.com/articles/understandingprogressiveenhancement
  9. 9. <ul><li>¿Preguntas? </li></ul>
  10. 10. Muchas Gracias

×