INSTITUTO TECNOLÓGICO DE NUEVO LEÓN

PROGRAMACIÓN WEB
CLAVE: AEB-1055
CRÉDITOS: 1-4-5
COMPETENCIA(S) ESPECÍFICA(S) DE LA ASIGNATURA

• Desarrolla aplicaciones web dinámicas del lado cliente y

del servidor, considerando la conectividad a orígenes de
datos, la interconectividad entre aplicaciones y cómputo
en la nube.
COMPETENCIA(S) PREVIAS
✓ Aplica métodos y herramientas de la ingeniería del
software en el desarrollo de software aplicando estándares
de calidad y productividad.
✓ Aplica un lenguaje orientado a objetos para la solución de
problemas.
✓ Crea y aplica esquemas de bases de datos para garantizar
la confiabilidad de los datos en aplicaciones para el
tratamiento de información.
PROGRAMA DE LA MATERIA:

TEMAS

• 1. Introducción a las aplicaciones web

• 2. HTML, XML y CSS
• 3. Programación del lado del cliente
• 4. Programación del lado del servidor
• 5. Cómputo en la nube y servicios
1.1 EVOLUCIÓN DE LAS APLICACIONES WEB.
• World Wide Web: www
• Sistema mundial de redes
de computadoras
interconectadas.

• Fue concebida a fines de la

década de 1960 por el
Departamento de Defensa de
los Estados Unidos, por la
ARPA.
1.1 EVOLUCIÓN DE LAS APLICACIONES WEB.

• Se la llamó primero ARP

Anet y fue pensada para
cumplir funciones de
investigación.
• Su uso se popularizó a partir
de la creación de la World
Wide Web.
1.1 EVOLUCIÓN DE LAS APLICACIONES WEB.
• Actualmente es un espacio público utilizado por millones
de personas en todo el mundo como herramienta de
comunicación e información.
1.1 EVOLUCIÓN DE LAS APLICACIONES WEB.

• La Web de hoy es un universo de

aplicaciones y páginas web
interconectadas lleno de vídeos, fotos y
contenido interactivo.
• A lo largo del tiempo, las tecnologías
web han evolucionado hasta permitir
que los desarrolladores puedan crear
nuevas e increíbles experiencias web. La
Web actual es el resultado de los
continuos esfuerzos de una comunidad
web abierta que ayuda a definir estas
tecnologías web, tales como HTML5,
CSS3 y WebGL, y garantiza que todos los
navegadores web las admitan.
1.1 EVOLUCIÓN DE LAS APLICACIONES WEB.

• Las líneas de color de esta visualización representan la

interacción entre los navegadores y las tecnologías
web, lo que ha permitido el desarrollo del gran número
de aplicaciones web increíbles que utilizamos a diario.
• http://www.evolutionoftheweb.com/?hl=es
1.1 EVOLUCIÓN DE LOS NAVEGADORES Y SUS
LENGUAJES DE PROGRAMACIÓN
1.1 EVOLUCIÓN DE LOS NAVEGADORES Y SUS
LENGUAJES DE PROGRAMACIÓN
• Evolución de la web hacia la versión 3.0

• http://www.youtube.com/watch?v=O5t7gfCTJqk
1.1 EVOLUCIÓN DE LOS NAVEGADORES Y SUS
LENGUAJES DE PROGRAMACIÓN

 Evolución de dispositivos móviles

• http://www.upsocl.com/ciencia-y-tecnologia/esta-invencion-traida-de-
india-cambiara-la-forma-en-que-vivimos-para-siempre/#
1.2 Arquitectura de las aplicaciones
web
ARQUITECTURA CLIENTE SERVIDOR
• El diseño del World-
Wide Web sigue el
modelo cliente-servidor:
un paradigma de
división del trabajo
informático en el que las
tareas se reparten entre
un número de clientes
que efectúan peticiones
de servicios de acuerdo
con un protocolo, y un
número de servidores
• http://www.youtube.com/w
atch?v=oeZkdORaCmY
Dos clases de clientes web:
navegadores y robots.
• Los navegadores (Netscape, IE,
etc.).
• Las peticiones están dirigidas por el
usuario.
• Repiten peticiones al mismo objeto
cuando navegan por un site.
• Utilizan caches de memoria y disco.
• Robots (spiders, y agentes
inteligentes).
• Las peticiones son automatizadas.
• La velocidad y carga está limitada por
la velocidad de proceso, y por la
velocidad de la red.
Arquitectura cliente servidor

• Navegadores
Arquitectura cliente servidor
• Robots Spiders
• Robots dedicados a la búsqueda automática de información.
• La información se utiliza posteriormente en aplicaciones de
búsqueda (google, yahoo).
• Los recursos dinámicos (CGI, PHP, etc.) no son indexados.
• Algunos sitios web no desean ser indexados:
• Controlan el acceso de robots.
• Los recursos HTML incluyen una directiva META:
• <META NAME=“ROBOTS” CONTENT=“NOINDEX,
NOFOLLOW”>
 Arquitectura cliente servidor
• Servidores sencillos
Arquitectura cliente servidor
• Servidores complejos
Arquitectura cliente servidor
• Proxys
• Intermediario web situado entre el cliente y el
servidor para reducir comunicación no deseada.
• A veces forma parte de los mecanismo de seguridad.
• La mayoría de veces actúan como caches.
• Realizan simultáneamente el papel de servidor y
cliente
Arquitectura cliente servidor
• Caché
• El navegador envía la petición a la caché.
• La Caché devuelve el recurso si está almacenado
localmente y está actualizado.
• Basado en los campos URL, ETag, fecha.
• En caso contrario, la caché pasa la solicitud al
servidor
• Si está pasado de fecha, la caché valida el recurso
• Diferencia con el resto de proxies:
• Algunas peticiones no llegan al servidor origen.
Arquitectura cliente servidor
• Modelo de dos capas

• Ejemplos:
• wikipedia
• Juegos on line
Arquitectura cliente servidor

 Modelo de tres capas

Al conectarnos a internet estamos navegando en 3 capas.

• Al abrir un formulario web de inscripción (capa de
presentación)
• Después de enviar la información esta es verificada (capa
de negocios).
• Finalmente la información es grabada en una base de
datos (capa de datos).
 Arquitectura cliente servidor

• Modelo de tres capas

Arquitectura cliente servidor

 Modelo de tres capas

• Capa de datos:
• Base de datos
• Tablas
• Procedimientos almacenados
• Componentes de datos
• Ejemplos:
• SQL, MySQL
• Tabla alumnos
• Stored procedure
Arquitectura cliente servidor
• Capa de negocios
• Reglas del negocios
• Validaciones
• Cálculos
• Flujos y procesos
• Ejemplos:
• Lenguajes de Componentes (c#, vb, c++, j#)
• Componentes Locales
• Componentes Web (Servicios web)
• Comunicación entre componentes utilizando el SOAP y
XML
Arquitectura cliente servidor
• Capa de presentación:
• Formularios
• Informes
• Respuestas al usuario
• Ejemplos:
• Formularios en ASP .NET .aspx
• Formularios ASP .asp
• XML, archivos .xml
• HTML archivos .html
• JAVASCRIPT , VBSCRIPT archivos .js ó .vb
• Plantillas en Word, Excel, etc.
 Arquitectura cliente servidor

• Modelo de tres capas

1.3 TECNOLOGÍAS PARA EL
DESARROLLO DE APLICACIONES WEB.
• Tanto el web server como el web
browser son dependientes de la
plataforma. Sin embargo, existen
distribuciones gratuitas de ambos
prácticamente para cualquier
plataforma.
• A nivel de cliente no hay tecnologías
especiales a utilizar. Las virtudes de
los web browser actuales son
suficientes para este modelo, ya
que su única función es interpretar
HTML.
1.3 TECNOLOGÍAS PARA EL
DESARROLLO DE APLICACIONES WEB.
• En cambio el servidor web debe ser más
potente que el del modelo de
componentes gráficos. Debe soportar
tecnologías cuya función es generar
contenido dinámico a ser enviado al
cliente.
• Las tecnologías varían en su
funcionamiento. El primer enfoque
utilizado fue CGI. La evolución del web
llevó a servidores más potentes, capaces
de ser extendidos para lograr
funcionalidades específicas. Surgieron
entonces nuevos enfoques como Servlets,
JSP (JavaServer Pages) y ASP (Active
Server Pages).
1.3 TECNOLOGÍAS PARA EL
DESARROLLO DE APLICACIONES WEB.
• Un entorno de desarrollo integrado (IDE- Integrated Development Environment -
) es una aplicación de software que ofrece servicios integrales a los
programadores de computadoras para el desarrollo de software
1.3 TECNOLOGÍAS PARA EL
DESARROLLO DE APLICACIONES WEB.
Un IDE normalmente se compone de:

• Un editor de texto
• Un compilador.
• Un intérprete.
• Herramientas de automatización.
• Un depurador.
• Posibilidad de ofrecer un sistema de control de versiones.
• Factibilidad para ayudar en la construcción de interfaces
gráficas de usuario.
1.3 TECNOLOGÍAS PARA EL
DESARROLLO DE APLICACIONES WEB.
• Visual Studio .net • WorkFlow

• Permite trabajar con los • Lenguajes de

siguientes tecnologías programación
• Web • HTML, CSS

• Aplicaciones para office • Visual basic

• Aplicaciones tipo cloud • Visual c++

• Reportes • Sql server

• Sharepoint • Visual F++

• Silverlight • Java Script

• Test • Proyectos setup

• WFC • Web Services
• Windows Phone • Soluciones visual studio
1.3 TECNOLOGÍAS PARA EL
DESARROLLO DE APLICACIONES WEB.

Para PHP se tienen las siguientes herramientas

• Zend Studio
• Open Komodo Project
• Eclipse + phpEclipse
• etc
1.3 TECNOLOGÍAS PARA EL
DESARROLLO DE APLICACIONES WEB.

Dreamweaver es una herramienta

que permite trabajar con

• ASP JavaScript
• ASP VBScript
• ASP.NET C#
• ASP.NET VB
• COLDFUSION
• JSP
• PHP MySQL
1.3 TECNOLOGÍAS PARA EL
DESARROLLO DE APLICACIONES WEB.
Joomla es un Sistema de Gestión de Contenidos
(CMS) que le ayuda a construir sitios web y otras
aplicaciones online potentes.
1.3 TECNOLOGÍAS PARA EL
DESARROLLO DE APLICACIONES WEB.
Entre los diferentes usos que la gente da a Joomla! están:

• Webs corporativas o portales

• Comercio electrónico
• Pequeños sitios de negocios
• Webs de organizaciones o ONGs
• Aplicaciones gubernamentales
• Intranets y extranets corporativas
• Webs de escuelas o agrupaciones
• Páginas personales o familiares
• Portales de comunidades
• Revistas y periódicos
1.3 TECNOLOGÍAS PARA EL
DESARROLLO DE APLICACIONES WEB.

• WordPress es un sistema de gestión de contenido

enfocado a la creación de blogs (sitios web
periódicamente actualizados). Desarrollado en
PHP y MySQL.
1.4 PLANIFICACIÓN DE APLICACIONES WEB.
• Roles para el desarrollo de un software
• Administrador del proyecto
• Analista, documenta
• Diseñador
• Programador o desarrollador
• Téster
• Aseguramiento de calidad
• Administración de la configuración
• Mantenimiento y Soporte
• http://www.ganimides.ucm.cl/ygomez/descargas/Sist_inf2/a
puntes/2009/Roles_desarrollo_software.pdf
• http://prezi.com/lnx56rvcep8q/roles-de-los-actores-en-
1.4 Planificación de APLICACIONES WEB

La importancia de planificar antes de actuar

• Muchos desarrolladores en algún u otro momento hemos

caído en la tentación de comenzar a diseñar un nuevo
proyecto sin ningún tipo de planificación previa. Ya sea por
pecar de novatos, perezosos o simplemente no creer en que
la planificación debe formar parte del proyecto
1.4 Planificación de APLICACIONES WEB

Tips

• La planificación es para ahorrar tiempo y

ganar calidad.
• Antes de planificar es necesario responder a las
siguientes preguntas:
• 1. ¿Qué tipo de web voy a crear?
• 2. ¿Qué clase de público visitará la web?
• 3. ¿Cuál es la finalidad / objetivo final de la página web?
• 4. ¿Cumplirá el diseño en mente los objetivos?
• 5.¿Es usable e intuitivo?
1.4 Planificación de APLICACIONES WEB
Tips
• Documentar: se trata de documentar todo lo que se
pueda, en especial, aquellas partes de que hayan
requerido un mayor tiempo de desarrollo, en un futuro
cercano esta acción puede ahorrar tiempo y problemas.
• No empezar por los detalles, como por ejemplo una
galería de imágenes, sino por la base de la aplicación.
1.4 PLANIFICACIÓN DE APLICACIONES WEB
Tips
• Diseño de la interfaz: es importante conseguir un buen
diseño para la interfaz, la cual debe ser atractiva, útil e
informativa.
• Evitar construir librerías o frameworks innecesarios:
Varios desarrolladores sostienen que es mejor utilizar
librerías propias, pero la realidad es que en muchas
ocasiones esto supone una gran pérdida de tiempo, es
mejor buscar una librería o framework que se parezca lo
más posible a lo deseado que desarrollarlo por si mismo.
1.4 PLANIFICACIÓN DE APLICACIONES WEB
Tips

• Realizar un plan de proyecto: Asegurarse de que cada

desarrollador que trabaje en el proyecto sepa qué es lo
que debe de hacer y cuándo tiene que hacerlo, teniendo
todo esto redactado en un documento.
• Elegir el lenguaje adecuado: la respuesta a menudo
depende de para qué se quiere utilizarlo.
1.4 PLANIFICACIÓN DE APLICACIONES WEB

• Ciclo de vida clásico. Pressman, “adaptada” para el

desarrollo de Web:
• Formulación.
• Planificación.
• Análisis (contenido, interacción, funcional, configuración).
• Diseño (arquitectónico, navegación, interfaz, de base e
datos).
• Implementación.
• Pruebas.
1.4 Planificación de APLICACIONES WEB
Metodologías

• UWE UML
• (UML-Based Web Engineering)
• Es una metodología de desarrollo de aplicaciones web, utilizada
en la ingeniería web, prestando especial atención en
sistematización y personalización(sistemas adaptativos)
 1.4 PLANIFICACIÓN DE APLICACIONES WEB
Otras Metodologías

• WSDM • UWE
• SOHDM • W2000
• RNA • UWA
• HFPM • NDT
• OOHDM • DDDP
1.4 Planificación de APLICACIONES WEB
Software para modelar
• Microsoft Visio
1.4 Planificación de APLICACIONES WEB
Software para modelar

• Balsamiq Mockups
• Es una herramienta multiplataforma (Linux, Windows, Mac) que
nos permite arrastrar y soltar todo tipo de elementos web,
móviles y otros controles comunes para agilizar la creación de
bocetos iniciales de cualquier tipo de proyectos.
BIBLIOGRAFÍA

• http://pis.unicauca.edu.co/moodle/pluginfile.php/24363/mod_resource/content/0/Lectura/C
apitulo2/Arquitectura_Web.pdf
• http://informatica.uv.es/iiguia/IST/Tema1.pdf
• http://www.google.com.mx/imgres?start=174&um=1&newwindow=1&sa=N&hl=es-
419&biw=1241&bih=567&tbm=isch&tbnid=3VJ3XZrk48vSIM:&imgrefurl=http://www.intel.es/
content/www/es/es/embedded/intelligent-systems.html&docid=jZxyHDH-
yr0FwM&imgurl=http://www.intel.es/content/dam/www/public/us/en/images/illustrations/I
S-detail-hero-450x450-
v2.jpg.rendition.cq5dam.webintel.450.450.jpg&w=450&h=450&ei=3ycIUquKIKfA2QWVsIDQA
Q&zoom=1&ved=1t:3588,r:76,s:100,i:232&iact=rc&page=13&tbnh=200&tbnw=200&ndsp=15
&tx=78&ty=86#imgdii=3VJ3XZrk48vSIM%3A%3BLfZI7FHmXpNrbM%3B3VJ3XZrk48vSIM%3ª
• http://www.ventics.com/ranking-navegadores-marzo-2013/
• http://www.ganimides.ucm.cl/ygomez/descargas/Sist_inf2/apuntes/2009/Roles_desarrollo_s
oftware.pdf