SlideShare una empresa de Scribd logo
Desarrollo Web
Avanzado II
Introducción
Ing. Pablo Bejarano
pabhoz@usbcali.edu.co
¿WEB?
Desarrollo Web Avanzado II
¡El primer tramo!: 1991 WEB 1.0
Desarrollo Web Avanzado II
La evolución de la web: 2004 WEB 2.0
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
Desarrollando para la web
La plataforma mas grande también tiene sus roles
WEBMASTER DESIGNFRONTEND BACKEND
UX USABILITY
AHORAANTES
Metodo Soyla
Trabajo por roles
Frontend es todo el elemento
visual del usuario
FRONTEND
Presentación Interactividad
Tecnologías para desarrollo Frontend:
¿Quién es un frontend
developer?FRONTEND
Webmaster != Frontend Developer
Programadores especializados en el lado del cliente
Diseñador != Frontend Developer
Herramientas Frontend
FRONTEND
Preprocesadores: Programas individuales que compilan un metalenguaje en un
lenguaje objetivo.
Ilusionistas del código
FRONTEND
- Frontend Developer: ¿Te gusta lo que ves? Bueno, es mi trabajo
hacerlo atractivo.
El lado oscuro, desarrollo
del lado del servidorBACKEND
Integración Procesamiento
Tecnologías para desarrollo Frontend:
¿Y en que desarrollan los
grandes?BACKEND
Google Facebook YouTube Wikipedia Twitter eBay
¿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
El poder oculto
BACKEND
- Backend Developer: El usuario no ve nada de lo que hago, pero
es el precio de ser rudo.
De la idea a los pixeles
DESIGN
Responsive Design y la
metodología Mobile FirstDESIGN
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”

Más contenido relacionado

PDF
Responsive Web Design: Sin fronteras para una excelente experiencia de usuari...
PDF
Construyendo y publicando nuestra primera app multi plataforma (II)
KEY
BlueBox for BlackBerry PlayBook on AppCircus 2011
PPTX
PPTX
Herramientas de diseño web
PPTX
Azure Functions Spanish
 
Responsive Web Design: Sin fronteras para una excelente experiencia de usuari...
Construyendo y publicando nuestra primera app multi plataforma (II)
BlueBox for BlackBerry PlayBook on AppCircus 2011
Herramientas de diseño web
Azure Functions Spanish
 

La actualidad más candente (18)

PDF
Desarrollo y testeo modular de interfaces HTML5 / MVC - Congo framework
PPTX
Herramientas colaborativas y web 2 evaluacion
PPS
Kendo UI
DOCX
Nuestra propia red social roxana y damari
KEY
Presentacion cw2012
PPTX
Las apps
PDF
Construye un bot para Microsoft Teams sin saber programar
PDF
Ponencia Final Dispositivos Móviles
PPTX
Plugins vs widgets
PPTX
Kendo UI - Potencia tu Web
PPSX
Herramientas 2.0 PIPOS PERROS
PDF
Html5. El futuro de la web... ahora.
PPT
SEO Móvil
PPTX
Diferencia entre widgets y plugins
PPTX
Responsive web design
PPTX
Las apps
PPTX
Natalyfinal (1)
PDF
Windows phonesessions
Desarrollo y testeo modular de interfaces HTML5 / MVC - Congo framework
Herramientas colaborativas y web 2 evaluacion
Kendo UI
Nuestra propia red social roxana y damari
Presentacion cw2012
Las apps
Construye un bot para Microsoft Teams sin saber programar
Ponencia Final Dispositivos Móviles
Plugins vs widgets
Kendo UI - Potencia tu Web
Herramientas 2.0 PIPOS PERROS
Html5. El futuro de la web... ahora.
SEO Móvil
Diferencia entre widgets y plugins
Responsive web design
Las apps
Natalyfinal (1)
Windows phonesessions
Publicidad

Similar a Desarrollo Web Avanzado II (20)

PDF
Clase 1 Introducción al Desarrollo Web
PDF
Profesión: Las webs y demás plataformas en red
PDF
Explorando el Mundo de la Programación Frontend vs. Backend
PDF
Desarrollo web front-end con TypeScript, Angular 2 e Ionic
PPTX
SESION DE APRENDIZAJE INTRODUCCION AL DISEÑO WEB1.pptx
PPTX
wepik-introduccion-al-desarrollo-front-end-202403142009120s3a.pptx
PPTX
Desarrollo web
PPTX
PPTX
Conviértete en un desarrollador web front end
PPTX
Conviértete en un desarrollador web front-end
PPTX
Diseño Web: Qué necesitamos para empezar?
PPTX
Diseño de paginas web
ODP
Front End & Responsive Web Design | DevFest Merida
PPTX
Introduccion a las tecnologias Tecnologías Web en sus diferentes fases
PDF
Presentación Proyecto Trabajo Creativo Infantil Doodle Azul_20250613_083317_0...
PDF
Semana 2 HTML y CSS
PPTX
Desarrollo de programacion Web en lenguajes
PPTX
PPT
Social network application developer v2
PPT
Diseño de Páginas Web
Clase 1 Introducción al Desarrollo Web
Profesión: Las webs y demás plataformas en red
Explorando el Mundo de la Programación Frontend vs. Backend
Desarrollo web front-end con TypeScript, Angular 2 e Ionic
SESION DE APRENDIZAJE INTRODUCCION AL DISEÑO WEB1.pptx
wepik-introduccion-al-desarrollo-front-end-202403142009120s3a.pptx
Desarrollo web
Conviértete en un desarrollador web front end
Conviértete en un desarrollador web front-end
Diseño Web: Qué necesitamos para empezar?
Diseño de paginas web
Front End & Responsive Web Design | DevFest Merida
Introduccion a las tecnologias Tecnologías Web en sus diferentes fases
Presentación Proyecto Trabajo Creativo Infantil Doodle Azul_20250613_083317_0...
Semana 2 HTML y CSS
Desarrollo de programacion Web en lenguajes
Social network application developer v2
Diseño de Páginas Web
Publicidad

Último (20)

PDF
Educación Artística y Desarrollo Humano - Howard Gardner Ccesa007.pdf
PDF
La Evaluacion Formativa en Nuevos Escenarios de Aprendizaje UGEL03 Ccesa007.pdf
PDF
CONFERENCIA-Deep Research en el aula universitaria-UPeU-EduTech360.pdf
DOCX
III Ciclo _ Plan Anual 2025.docx PARA ESTUDIANTES DE PRIMARIA
PDF
OK OK UNIDAD DE APRENDIZAJE 5TO Y 6TO CORRESPONDIENTE AL MES DE AGOSTO 2025.pdf
PDF
Crear o Morir - Andres Oppenheimer Ccesa007.pdf
PDF
Punto Critico - Brian Tracy Ccesa007.pdf
PPTX
AGENTES PATÓGENOS Y LAS PRINCIPAL ENFERMEAD.pptx
PDF
Habitos de Ricos - Juan Diego Gomez Ccesa007.pdf
PDF
Escuela de Negocios - Robert kiyosaki Ccesa007.pdf
DOCX
V UNIDAD - PRIMER GRADO. del mes de agosto
DOCX
UNIDAD DE APRENDIZAJE 5 AGOSTO tradiciones
PDF
GUIA DE: CANVA + INTELIGENCIA ARTIFICIAL
PDF
Tomo 1 de biologia gratis ultra plusenmas
PDF
Escuelas Desarmando una mirada subjetiva a la educación
PDF
Fundamentos_Educacion_a_Distancia_ABC.pdf
PDF
Escuela Sabática 6. A través del Mar Rojo.pdf
PDF
ciencias-1.pdf libro cuarto basico niños
PDF
Salcedo, J. et al. - Recomendaciones para la utilización del lenguaje inclusi...
PDF
el - LIBRO-PACTO-EDUCATIVO-GLOBAL-OIEC.pdf
Educación Artística y Desarrollo Humano - Howard Gardner Ccesa007.pdf
La Evaluacion Formativa en Nuevos Escenarios de Aprendizaje UGEL03 Ccesa007.pdf
CONFERENCIA-Deep Research en el aula universitaria-UPeU-EduTech360.pdf
III Ciclo _ Plan Anual 2025.docx PARA ESTUDIANTES DE PRIMARIA
OK OK UNIDAD DE APRENDIZAJE 5TO Y 6TO CORRESPONDIENTE AL MES DE AGOSTO 2025.pdf
Crear o Morir - Andres Oppenheimer Ccesa007.pdf
Punto Critico - Brian Tracy Ccesa007.pdf
AGENTES PATÓGENOS Y LAS PRINCIPAL ENFERMEAD.pptx
Habitos de Ricos - Juan Diego Gomez Ccesa007.pdf
Escuela de Negocios - Robert kiyosaki Ccesa007.pdf
V UNIDAD - PRIMER GRADO. del mes de agosto
UNIDAD DE APRENDIZAJE 5 AGOSTO tradiciones
GUIA DE: CANVA + INTELIGENCIA ARTIFICIAL
Tomo 1 de biologia gratis ultra plusenmas
Escuelas Desarmando una mirada subjetiva a la educación
Fundamentos_Educacion_a_Distancia_ABC.pdf
Escuela Sabática 6. A través del Mar Rojo.pdf
ciencias-1.pdf libro cuarto basico niños
Salcedo, J. et al. - Recomendaciones para la utilización del lenguaje inclusi...
el - LIBRO-PACTO-EDUCATIVO-GLOBAL-OIEC.pdf

Desarrollo Web Avanzado II

  • 1. Desarrollo Web Avanzado II Introducción Ing. Pablo Bejarano pabhoz@usbcali.edu.co
  • 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”