Introducción al desarrollo web avanzado II. En esta clase presentaremos los aspectos básicos para el desarrollo web desde sus orígenes hasta las tendencias actuales.

1. Desarrollo Web
Avanzado II
Introducción
Ing. Pablo Bejarano
pabhoz@usbcali.edu.co

2. ¿WEB?

3. Desarrollo Web Avanzado II
¡El primer tramo!: 1991 WEB 1.0

4. Desarrollo Web Avanzado II
La evolución de la web: 2004 WEB 2.0

5. Desarrollo Web Avanzado II
La revolución de la web: 2006 WEB 3.0 (¿BETA?)
 Metadatos
 Bases de datos
 Inteligencia Artificial
 Web Semántica
 Evolución del 3D

6. Desarrollando para la web
La plataforma mas grande también tiene sus roles
WEBMASTER DESIGNFRONTEND BACKEND
UX USABILITY
AHORAANTES
Metodo Soyla
Trabajo por roles

7. Frontend es todo el elemento
visual del usuario
FRONTEND
Presentación Interactividad
Tecnologías para desarrollo Frontend:

8. ¿Quién es un frontend
developer?FRONTEND
Webmaster != Frontend Developer
Programadores especializados en el lado del cliente
Diseñador != Frontend Developer

9. Herramientas Frontend
FRONTEND
Preprocesadores: Programas individuales que compilan un metalenguaje en un
lenguaje objetivo.

10. Ilusionistas del código
FRONTEND
- Frontend Developer: ¿Te gusta lo que ves? Bueno, es mi trabajo
hacerlo atractivo.

11. El lado oscuro, desarrollo
del lado del servidorBACKEND
Integración Procesamiento
Tecnologías para desarrollo Frontend:

12. ¿Y en que desarrollan los
grandes?BACKEND
Google Facebook YouTube Wikipedia Twitter eBay

13. ¿Quién es un backend
developer?BACKEND
Webmaster != Backend Developer
Programadores especializados en el lado del servidor
• Bases de datos
• Algoritmos complejos
• Web Services
• Procesamiento de
datos y solicitudes

14. El poder oculto
BACKEND
- Backend Developer: El usuario no ve nada de lo que hago, pero
es el precio de ser rudo.

15. De la idea a los pixeles
DESIGN

16. Responsive Design y la
metodología Mobile FirstDESIGN

17. Experiencia de usuario y
usabilidadUX &
USABILITY Evalúa y propone soluciones eficaces, eficientes, fáciles,
útiles, placenteras y divertidas al usuario.
Dogma 1:
“Cualquier cosa
que exista solo
para satisfacer las
políticas internas
del dueño del sitio
debe ser
eliminada”
Dogma 2:
“Cualquier cosa
que exista solo
para satisfacer el
ego del diseñador
debe ser
eliminada”
Dogma 3:
“Cualquier cosa
que sea
irrelevante para el
contexto de la
pagina debe ser
eliminada”
Dogma 4:
“Cualquier rasgo o
técnica que
reduzca la
habilidad del
cliente de navegar
libremente debe
ser adaptada o
eliminada”
Dogma 5:
“Cualquier objeto
interactivo que
fuerce al visitante
a preguntar su
significado debe
ser adaptado o
eliminado”
Dogma 6:
“No deben
requerir ningún
software, aparte
del navegador en
sí mismo para
trabajar en el sitio
correctamente”
Dogma 7:
“La utilidad nunca
debe ser
sacrificada por
una hoja de
estilo”