otrossss

1. TEMA 6: Desarrollo de aplicaciones Web
“Identifiquemos técnicas de desarrollo de Aplicaciones Web.”
Bienvenida
Bienvenidos estimados estudiantes!, con mucho entusiasmo damos inicio
a la sexta semana de la asignatura. En esta semana identificaremos las
técnicas necesarias para emprendernos en el mundo del desarrollo de
aplicaciones web robustas y adaptables a los distintos entornos del mundo
virtual, así como también aprenderemos a dar uso a las principales
herramientas tecnologías que nos felicitaran el desarrollo aplicaciones lo
suficientemente necesarias para su usabilidad en las distintas
organizaciones.
Introducción al tema

2. La Web se ha convertido por méritos propios en el medio de comunicación por
excelencia. Esta destaca por la rapidez con la cual se intercambia la información
que unida a la eliminación de las barreras geográficas, han convertido a Internet en
un terreno fértil en el cual las empresas pueden extender sus negocios. Como
consecuencia ha proliferado el número de aplicaciones Web para la resolución de
las necesidades de las organizaciones.
A diferencia de las aplicaciones tradicionales desarrolladas para una plataforma tecnológica conc
llegar a cualquier tipo de dispositivo. Por lo tanto este nuevo paradigma de desarrollo se está utiliz
gubernamentales, de enseñanza a distancia o de gestión empresarial entre otras.
Así, el mundo de la Web viene creciendo de forma gigantesca y esta va dejando de lado a los siste
En ello, el siguiente tema a tratar es de vital importancia dentro de nuestro aprendizaje como futuro
de plantear y dar solución a problemas cotidianos haciendo uso de herramientas virtuales y en esp
gran importancia.
Aprendizajes esperados: Capacidad / Actitudes

3. Conozcamos ahora las capacidades y actitudes a desarrollar en esta segunda
semana:
Capacidades
 Identifica las diferentes opciones para el desarrollo de aplicaciones WEB;
- Analiza los diferentes entornos de desarrollo web
- Analiza las diferentes tecnologías utilizadas en el desarrollo web
- Analiza las herramientas tecnológicas mas utilizadas en el mundo de la web
- Analiza la importancia del uso y manejo de base de datos en aplicaciones web.
Actitudes
 Valora la importancia del desarrollo web en el mundo empresarial.
Mapa conceptual referido al tema
Observa detenidamente el siguiente esquema, en el encontrarás de un “vistazo”
de manera sintetizada los principales concepto de la temática que abordaremos.
¿Qué conceptos o categorías llaman tu atención?

4. 6.1. Desarrollo web.
El desarrollo web supone todo lo relativo desde el estudio previo hasta la
implementación de un sitio web de una organización, todo lo que tiene que ver con
la planificación de la creación de ese sitio teniendo en cuenta los objetivos y
expectativas que arrastra el mismo y por último una vez que se coordina las
diferentes técnicas que serán utilizadas por diferentes especialistas, promoverlo de
manera que el tráfico se obtenga sea positivo. La estrategia de desarrollo web, se
integra de fases en las que debe incursionarse para obtener los objetivos que se
plantea por parte de la organización que ha decido su presencia en Internet.
Desarrollo web es un título algo arbitrario para el conjunto de tecnologías de
software del lado del servidor y del cliente que involucran una combinación de
procesos de base de datos con el uso de un navegador en Internet a fin de realizar
determinadas tareas o mostrar información.
La aplicaciones web, llamadas WebApps, son una categoría de software centrado
en redes que agrupa una amplia gama de aplicaciones. En su forma más sencilla,
las webapps son poco más que un conjunto de archivos de hipertexto vinculados
que presentan información con uso de texto y gráficas limitadas (Pressman, 2010).
Sin embargo, desde que surgió Web 2.0, las webapps están evolucionando hacia
ambientes de cómputo sofisticados que no sólo proveen características aisladas,
funciones de cómputo y contenido para el usuario final, sino que también están
integradas con bases de datos corporativas y aplicaciones de negocios.
Pressman (2010) señala que es frecuente que los desarrolladores de web
manifiesten escepticismo cuando se plantea la idea del análisis de los

5. requerimientos para webapps. Acostumbran decir: “después de todo, el proceso de
desarrollo en web debe ser ágil y el análisis toma tiempo. Nos hará ser lentos justo
cuando necesitemos diseñar y construir la WebApp”. Sin embargo, la pregunta que
debe responder todo desarrollador en web es sencilla: ¿estás seguro de que
entiendes los requerimientos del problema? Si la respuesta es un “sí” inequívoco,
entonces tal vez sea posible omitir el modelado de los requerimientos, pero si la
respuesta es “no”, entonces ésta debe llevarse a cabo.
Las metodologías más recomendadas para el desarrollo de proyectos Web son los
modelos de procesos ágiles, ya que las WebApps suelen tener actualizaciones
constantemente, por lo que el proceso debe tener ciclos de desarrollo cortos. Y
antes de definir un marco de trabajo para el proceso de las WebApps, se tienen que
considerar los siguientes tres puntos:
1. Las WebApps con frecuencia se entregan de manera incremental: las
actividades del marco de trabajo ocurrirán de manera repetida conforme cada
incremento se someta a ingeniería y se entregue.
2. Los cambios ocurrirán frecuentemente: los cambios pueden ocurrir como
resultado de la evaluación de un incremento entregado o como consecuencia
de cambiar las condiciones de los negocios.
3. Los plazos cortos: al tener plazos cortos aminora la creación y revisión de
voluminosa documentación de ingeniería, pero no excluye la simple realidad
de que el análisis crítico, el diseño y la prueba deban registrarse en alguna
forma.
De otro lado, las aplicaciones deben construirse (arquitectura de una WebApp) con
el empleo de capas en las que se tomen en cuenta distintas preocupaciones; en
particular, deben separarse los datos de la aplicación de los contenidos de ésta
(nodos de navegación), y éstos, a su vez, deben separarse con toda claridad del
aspecto y la sensación de la interfaz (páginas).
La arquitectura de controlador de la vista del modelo (CVM) es uno de varios
modelos sugeridos para la infraestructura de WebApps que desacoplan la interfaz
de usuario de sus funciones y contenido informativo (Pressman, 2010).

6. La arquitectura CVM
Fuente: Pressman (2010).
Veamos el siguiente vídeo, que nos brinda un enfoque más claro de lo que es el
mundo del desarrollo web (Videoextraido del curso virtual "Introducción al desarrollo
web" de la Universidad de Alicante - España).
Título: Desarrollo Web
Actividad de análisis y comprensión. Luego de haber visualizado el video,
responde las siguientes interrogaciones:
1. ¿Que es el desarrollo web?
Una página web
Conjunto organizado de datos.
Conjunto de tecnologías de software del lado del servidor y del cliente
¡Muy bien!, Desarrollo web por lo general es un titulo algo albitrario pero se utiliza
con mayor fecuencia en la denominacion del conjunto de tecnologías de software
del lado del servidor y del cliente que involucran una combinación de procesos de

7. base de datos con el uso de un navegador en Internet a fin de realizar
determinadas tareas o mostrar información
2. Una diferencias entre diseño y desarrollo web es:
En el diseño web puede estar compuesto por imagenes, el desarrollo web suele
ser codificado en algún lenguaje de programación.
Los dos tienen el mismo significado
¡Acertaste!, el diseño web puede estar compuesto también por imágenes,
fotografías, flash, etc contenido que no necesariamente necesita ser codificado en
un lenguaje de programacion.
3. ¿Que es el backend?
Es la parte de la aplicación web que no ven los visitantes.
Es la parte de la aplicación web que ven con los visitantes.
¡A si es¡, es la labor de ingeniería que compone el acceso a bases de datos y
generación de plantillas del lado del servidor. En backend se encargan de
implementar cosas como MySQL, Postgres, SQL Server oMongoDB. Luego, un
lenguaje como PHP o JSP, o frameworks como RoR, Django, Node.JS o .NET se
conectan a la base de datos, esta no es visible para los visitante .
Preguntas de análisis
Luego de analizar las definiciones dadas,de respuesta a las siguientes interrogantes:
1. ¿Qué diferencias existe en backend y frontend?.
2. ¿Por qué es de gran importancia el desarrollo web?.
3. ¿Qué soluciones de sistemas de información propondrías con el desarrollo web en una entidad de
Gobierno Local (municipalidad)?.Justifique su respuesta y proporciones algunos ejemplos.
Revisa en datalle la sección 6.1 y el vídeo "Desarrollo Web"

8. 6.1.1. Fases del desarrollo web
Este es un tema que suele dar mucho que debatir y bastante recurrente en la
comunidad de desarrolladores web. También es un tema muy extenso y sobre el
que se puede pormenorizar, pero me voy a limitar a dar mi opinión personal a
grandes rasgos, destacando la clasificación y el orden de las fases que considero
cruciales para el desarrollo web.
Estas fases corresponden a la arquitectura basada en el modelo a tres capas:
usuarios, aplicación (cliente-servidor), datos. Donde se mantenga la independencia
que otorga cada capa, pero con un alto grado de interactividad entre ellas.
FUENTE: http://nt-usabilidad-ibero.wikispaces.com/3.+Dise%C3%B1o+web
No obstante lo indicado, el desarrollo web se sustenta en el modelo de desarrollo
de software denominado Modelo de Espiral que, conforme señala Pressman (2010),
como una estructura de proceso general para la ingeniería de software consta de
cinco actividades:
1. Comunicación.- Antes de que comience cualquier trabajo técnico, tiene
importancia crítica comunicarse y colaborar con el cliente (y con otros
participantes). Se busca entender los objetivos de los participantes respecto
del proyecto, y reunir los requerimientos que ayuden a definir las
características y funciones del software.
2. Planeación.- Cualquier viaje complicado se simplifica si existe un mapa. Un
proyecto de software es un viaje difícil, y la actividad de planeación crea un
“mapa” que guía al equipo mientras viaja. El mapa —llamado plan del
proyecto de software— define el trabajo de ingeniería de software al describir
las tareas técnicas por realizar, los riesgos probables, los recursos que se

9. requieren, los productos del trabajo que se obtendrán y una programación de
las actividades.
3. Modelado.- Ya sea usted diseñador de paisaje, constructor de puentes,
ingeniero aeronáutico, carpintero o arquitecto, a diario trabaja con modelos.
Crea un “bosquejo” del objeto por hacer a fin de entender el panorama
general —cómo se verá arquitectónicamente, cómo ajustan entre sí las
partes constituyentes y muchas características más—. Si se requiere, refina
el bosquejo con más y más detalles en un esfuerzo por comprender mejor el
problema y cómo resolverlo. Un ingeniero de software hace lo mismo al crear
modelos a fin de entender mejor los requerimientos del software y el diseño
que los satisfará.
4. Construcción.- Esta actividad combina la generación de código (ya sea
manual o automatizada) y las pruebas que se requieren para descubrir
errores en éste.
5. Despliegue.- El software (como entidad completa o como un incremento
parcialmente terminado) se entrega al consumidor que lo evalúa y que le da
retroalimentación, misma que se basa en dicha evaluación.
Modelo de Espiral Común
Fuente: Pressman (2010)

10. El proceso de Ingeniería Web
Fuente: Adaptación de Pressman (2006)
Este marco de trabajo para la ingeniería Web se aplican empleando un flujo de
proceso incremental, del Modelo de Espiral que se detalló inicialmente, y cuyas
cinco actividades se describen a continuacion:
1. Comunicación con el cliente.- se caracteriza por el análisis del negocio y
la formulación. En el análisis del negocio se define el contexto empresarial-
organizativo para la WebApp, se identifican los participantes, se define la
integración entre la WebApp y otras aplicaciones de negocio, base de datos
y funciones. Mientras que en la formulación es una actividad de recopilación
de requisitos, describe el problema que la WebApp habrá de resolver junto
con los requisitos básicos para la WebApp.
2. Planeación.- se crea un plan de proyecto para el incremento de la WebApp.
3. Modelado.- las labores convencionales de análisis y diseño de ingeniería de
software se adaptan al desarrollo de la WebApp, se mezclan y luego se
funden en la actividad de modelado IWeb.

11. 4. Construcción.- las herramientas y la tecnología IWeb se aplican para
construir la WebApp que se ha modelado. Una vez que se construye, se
dirige a una serie de pruebas rápidas para asegurar que se descubran los
errores en el diseño (es decir, contenido, arquitectura, interfaz, navegación).
5. Entrega y retroalimentación.- la WebApp se configura para su ambiente
operativo, se entrega a usuarios finales y luego comienza un periodo de
evaluación. La retroalimentación acerca de la evaluación se presenta al
equipo de IWeb y el incremento se modifica conforme se requiera.
6.1.2. Formas de desarrollo web
 Backend.- Se entiende por desarrollo web backend al desarrollo que se
realiza al lado del servidor (utilizando lenguajes como: PHP, Ruby on Rails,
Django, Node.js, .NET). Un programador tiende a ser backend. Es la labor
de ingeniería que compone el acceso a bases de datos y generación de
plantillas del lado del servidor. En backend se encargan de implementar
cosas como MySQL, Postgres, SQL Server o MongoDB. Luego, un lenguaje
como PHP o JSP, o frameworks como RoR, Django, Node.JS o .NET se
conectan a la base de datos. A través de estos lenguajes y frameworks se
recibe, procesa y envía información al navegador del usuario. En código
HTML (que crea el frontend) o enviando datos puros en XML, RSS o JSON,
para ser procesados por Javascript. En Facebook, por ejemplo, PHP manda
la estructura básica del sitio web, pero son múltiples programas y servidores
hechos en C++ o Erlang que procesan la información en tiempo real (como
chat, comentarios, notificaciones) y las envían y reciben a través de
Javascript en el navegador.
 Frontend.- se entiende por desarrollo web frontend al desarrllo que se
realiza al lado del cliente (utilizando HTML, CSS, HTML5, CSS3, Javascript,
jQuery). Los frontends tienden a ser programadores, pero hay diseñadores
genios que también hacen frontend. Son los encargados de maquetar la
estructura semántica del contenido (HTML), codificar el diseño en hojas de
estilo (CSS) y agregar la interacción con el usuario (Javascript). En la época
actual los frontends tienen HTML5 y CSS3. Con HTML5, desde el frontend,
es posible hacer geolocalización,dibujo vectorial, guardar datos en el disco
del usuario, insertar audio y video, entre otras cosas. Con CSS3, se pueden
crear diseños altamente complejos sin la necesidad de imágenes cortadas
(sólo usando código), bordes redondeados, sombras, degradados, fondos
múltiples, entre otros. Por último, Javascript y sus frameworks añaden el
componente de interactividad y conexión al servidor. Es posible comunicarse
con el backend y la base de datos sin recargar la página usando AJAX o
WebSockets, recibir esos datos y cambiar el diseño entero del sitio. jQuery
hace todo esto fácil pero no es el único framework de Javascript.

12. 6.1.3. Tecnologías y herramientas para el desarrollo web
Pressman (2006) señala que "A lo largo de la decada pasad ha evolucionado un amplio conjunto de
herramientas y tecnología conforme las WepApps se han vuelto mas complejas y extendidas. Dichas
tencologías abarcan un amplio conjunto de decripción de contenido ylenguajaes de programación (por ejemplo,
HTML, VRML, XML), lenguajes de programación (por ejemplo Java, PHP), recursos de desarrollo basados en
componentes (por ejemplo, CORBA, COM, ActiveX, .Net), navegadores, herramientas multim endia,.."
Algunas de las tecnologías web actuales se muestran en las siguientes figuras:

13. Tecnologías para el desarrollo de WebApps
Fuente: http://desarrolloweb.dlsi.ua.es/cursos/2012/nuevos-estandares-desarrollo-sitios-web/desarrollo-web-
actual

14. Tecnologías y herramientas para el desarrollo de WebApps
Fuente: http://www.zadiasoftware.com/servicios