Programación Web

MRYSI. Angel Salas Martinez

asalas@[Link]

Martínez de la Torre, Veracruz., Agosto 2015

Criterios de Evaluación

Rubro Porcentaje Cumplimiento

Actitud 10% Participación, disciplina y puntualidad.
Desempeño 10% Ejercicios y Actividades en salón de
clase.
Producto 30% Evidencias, Investigaciones y
actividades extra clases
Conocimiento 50% Examen escrito

Nota:
Las Evidencias de estas actividades solicitadas deberán contar con la
rubrica para ser validas en la ponderación final.
El examen en segunda oportunidad tendrá un valor máximo de 90.
Reglas de Etiqueta:

1. No se permite el uso de cualquier distractor

(reproductores, celulares, cámaras fotográficas, laptops,
etc.) si no están autorizadas para la sesión, no ingerir
alimentos o bebidas dentro del salón de clase, fomento de
buenos hábitos y valores en el aula, como son: respeto,
tolerancia, limpieza, ética profesional y académica, portar
adecuadamente el uniforme.
2. Los criterios de evaluación podrán ser modificados en
cada unidad / competencia específica, con previo
acuerdo en la clase.
3. Por cada investigación similar el porcentaje de los
alumnos involucrados se obtendrá de la forma 20%/n,
Donde n es el número de investigaciones similares (Si la
unidad lo aplica).
4. En caso de no tomar en cuenta las reglas de etiqueta 1 y
3 se sancionará al o a los alumnos involucrados con n%
menos en la calificación final de la unidad en curso,
Donde n varia en el intervalo [10,100] en múltiplos de 10.
Objetivo del Curso

Desarrollar aplicaciones web que involucre

lenguajes de marcas, de presentación, del lado
del cliente, del lado del servidor, con la integración
de servicios web.
Contenido de la materia

Unidad 1 Arquitectura.
Unidad 2 Lenguaje de Marcado
Unidad 3 Lenguaje de Presentación
Unidad 4 Programación del lado del cliente.
Unidad 5 Programación del lado del servidor.
Unidad 6 Servicios web.
Sitios web
Evaluación diagnostica
 Expresa con tus propias palabras la diferencia entre
programación estructurada y Programación Orientada a
Objetos.
 Menciona 3 propiedades que debe presentar una transacción
de base de datos (ACID)
 Diseñar el diagrama relacional de BD correspondiente:
Una BD para una empresa debe contener información acerca
de clientes, artículos y pedidos.
Hasta el momento se registran los siguientes datos en doctos.
varios
*Para cada cliente: Número de cliente (único), Direcciones de
envío (varias por cliente), Saldo, Límite de crédito (depende del cliente,
pero en ningún caso debe superar los 3.000.000 pts), Descuento.
*Para cada artículo: Número de artículo (único), Descripción del
artículo.
*Para cada pedido: fecha, numero de articulo pedido y la
cantidad
Nota: Una dirección se entenderá como Nº, Calle, Comuna y
Ciudad
 Programación Web

Unidad I
Arquitectura

MRYSI. Angel Salas Martinez

asalas@[Link]
Objetivo

Analizar, diseñar y planificar aplicaciones web.

Contenido

1.1 Evolución de las aplicaciones web.

1.2 Arquitectura de las aplicaciones web.
1.3 Tecnologías para el desarrollo de
aplicaciones web.
1.4 Planificación de aplicaciones web.
Introducción

En esta materia enlazaremos conocimientos adquiridos en

la materia predecesora (Fundamentos de Programación,
Tópicos Avanzados de Programación, Bases de datos), así
como la utilización de los conceptos principales.

 Sitio Web.
 Protocolos.
 SGBD
 CMS.

En la actualidad cualquier negocio que pretenda su

rápida difusión, como primera instancia recurre a su
publicidad web
1.1 Evolución de las aplicaciones web

 Tim Berners-Lee (Primera comunicación Cliente

/servidor usando HTTP en 1989

Tim Berners-Lee
1.1 Evolución de las aplicaciones web

•HTTP •Web social

•Explorador web
•HTML
•Wikis
•Web estáticos •Blog
•RSS
Web Web 2.0
1.0 Social
Web Web

Web 4.0 Web 3.0

Inteligent Semantic
Web Web
•Web Inteligente •Web semántica.
•Semántica de •Agentes
Agentes. Inteligentes.
•Semántica de •Ontología
Wikis
Web 1.0
 Comenzó en los años 60’s junto al internet
 Con navegadores de solo texto (Eliza)
 Muy rápido pero simple
 A mediados de los 90’s surgen navegadores como (1995)
Nestcape, (1997) explorer
 En los 90’S se incorpora el uso de imagines, formatos, y
colores
 Se caracterizaba por ser solo de lectura
 No se Actualizaba con mucha frecuencia el Master
 Surge HTML y JavaScript 1.0
Web 2.0 Web Social
 Alrededor del año 2006 surge
 Basada en comunidades de usuarios y una gama
especial de servicios (redes sociales, blogs, wikis)
 Fomentan la colaboración e intercambio de
información ágil entre los usuarios.
 Las paginas estáticas se transforman en una matriz de
interacción
Web 3.0 Web Semantica

 La diferencia fundamental entre 2.0 y 3.0 es el tipo de

participante y las herramientas que se utilizan.
 Transformación, utilización de Inteligencia Artificial,
prevalencia del usuario en la creación, organización y
rendimiento del contenido, a través de un modelo de
cooperación globalizada.
 Entre 2010 y 2020
Web 4.0 Web Inteligente

 Aun no se encuentra definido, sin embargo algunos

artículos mencionan que consistirá en la integración de la
3D, web 2.0, web semántica, Inteligencia Artificial, Voz
como vehículo de comunicación
 «Que sea como un espejo mágico que de solución a las
necesidades del usuario»
 se pretende que para el 2020 ya se pueda contar con
estos avances.

 Ejemplo: Indicar al dispositivo: quiero un taxi , y que el

mismo dispositivo se comunique a la central de taxi mas
cercana.
Actividad

 Identificar
las características correspondientes a
cada una de las evoluciones de la web.

Evolución Características

Web 1.0

Web 2.0

Web 3.0

Web 4.0
Actividad

 Elaborar una línea del tiempo o un Mapa Mental,

con los puntos que considere de mayor relevancia
dentro de la web.
 Apoyarse con la información del sitio web:
 [Link]
 Evolución Web

Nota: La lineal del tiempo deberá ser realizada en

la libreta. (podrá incluir dibujos, recortes, etc.)
1.2 Arquitectura de las aplicaciones web.
De la misma forma en que los arquitectos tradicionales
diseñan y coordinan la construcción de edificios, los
arquitectos web diseñan y coordinan el desarrollo de
sitios web.

El resultado final será un sitio que pueda resolver las

necesidades de negocios: Vender productos y servicios
online y servir mejor a las necesidades de los clientes.

En el diseño de sitios web, igual que en el diseño de

edificios, se requiere un firme conocimiento de las
tecnologías aplicadas.
1.2 Arquitectura de las aplicaciones web.
Una aplicación Web es proporcionada por un
servidor Web y utilizada por usuarios que se
Conectan desde cualquier punto vía clientes Web
(browsers o navegadores).
La arquitectura de un Sitio Web tiene tres
componentes principales:

 Un servidor Web.
 Una conexión de red.
 Uno o más clientes.
Arquitectura de las aplicaciones web.
Arquitectura de las aplicaciones web.

 Servidor.
Es un programa informático que procesa una
aplicación del lado del servidor, realizando
conexiones bidireccionales y/o unidireccionales y
síncronas o asíncronas con el cliente y generando
o cediendo una respuesta en cualquier lenguaje o
Aplicación del lado del cliente.
Arquitectura de las aplicaciones web.

 Cliente
Es una aplicación informática o un ordenador que consume
un servicio remoto en otro ordenador conocido como
servidor, normalmente a través de una red de
telecomunicaciones.

El término se usó inicialmente para los llamados terminales

tontos, dispositivos que no eran capaces de ejecutar
programas por sí mismos, pero podían conectarse e
interactuar con computadores remotos por medio de una
red y dejar que éste realizase todas las operaciones
requeridas, mostrando luego los resultados al usuario.
Arquitectura de las aplicaciones web.

Uno de los clientes más utilizados, sobre todo por su

versatilidad, es el navegador web. Muchos servidores son
capaces de ofrecer sus servicios a través de un navegador
web en lugar de requerir la instalación de un programa
específico.

Tipos de Clientes
Existen varios tipos de clientes, dependiendo de la
cantidad de tareas que realice el cliente en
comparación con el servidor.
Cliente pesado: puede almacenar datos locales, y
tiene la capacidad de procesar datos.
Cliente liviano: no puede almacenar datos locales, ni
tiene la capacidad de procesar datos.
Arquitectura de un sitio web

Algunos dicen que diseñar para web es más

parecido a la arquitectura que al diseño gráfico.
Como en una casa, antes de escoger los muebles,
el color de las cortinas o la iluminación, es
importante saber cómo estará estructurada la
planta, cómo será el salón, donde estarán las
habitaciones, como se accederá a ellas, donde
estarán las ventanas... Asimismo en la web, si la
estructura no es sólida e intuitiva, el arte de la
página no sirve para nada.
Considerar ….
Antes de empezar a trabajar en el aspecto puramente estético de las
páginas web, imaginando animaciones impresionantes y gráficos
atractivos, es indispensables pensar en la estructura del sitio web. Para
eso, fundamentalmente, tendremos que:

 Definir las secciones y páginas web que debe tener el sitio.

 Escoger las secciones o páginas a las que podremos acceder desde
la página principal (o de inicio).
 Decidir si alguna sección o página tiene que destacar más respecto
las demás.
 Distribuir el contenido a presentar entre las distintas secciones y
páginas.
 Concretar las distintas vías de acceso a cada una de páginas web
del sitio (es importante ofrecer múltiples maneras de acceder a la
misma información).
 Especificar el número de idiomas que dispondrá el sitio web.
Componentes de una aplicación web.

1. Lógica de negocio.

 Parte más importante de la aplicación.

 Define los procesos que involucran a la aplicación.
 Conjunto de operaciones requeridas para proveer el servicio.

2. Administración de los datos.

 Manipulación de BD y archivos.

3. Interfaz
 Los usuarios acceden a través de navegadores, móviles, PDAs, etc.
 Funcionalidad accesible a través del navegador.
 Limitada y dirigida por la aplicación.
Modelos de Aplicación en Capas

Las aplicaciones web se modelan mediante lo que se

conoce como modelo de capas, Una capa representa
un elemento que procesa o trata información. Los tipos
son:

 Modelo de dos capas: La información atraviesa

dos capas entre la interfaz y la administración de
los datos.
 Modelo de n-capas: La información atraviesa varias
capas, el más habitual es el modelo de tres capas.
Modelo 2 Capas

 Cliente (fat client): La lógica de negocio está inmersa dentro

de la aplicación que realiza el interfaz de usuario, en el lado
del cliente.
 Servidor: Administra los datos.

Las limitaciones de este modelo son:

 Es difícilmente escalable
 Número de conexiones reducida
 Alta carga de la red.
 La flexibilidad es restringida
 La funcionalidad es limitada.
Modelo 3 Capas
Diseñado para superar las limitaciones de las arquitecturas
ajustadas al modelo de dos capas, introduce una capa
intermedia, entre presentación y los datos, los procesos
pueden ser manejados de forma separada a la interfaz de
usuario y a los datos, esta capa intermedia centraliza la
lógica de negocio, haciendo la administración más sencilla.

Las aplicaciones
web actuales se
ajustan a este
modelo.
Paginas de Servidor
(Server Page)
Son simplemente documentos HTML con un lenguaje de programación
embebido en ellos:

 ASP (Active Server Pages)

Con Visual Basic embebido.

 PSP (PL/SQL Server Pages)

Con PL/SQL embebido.

 JSP (Java Server Pages)

Con Java embebido

 PHP (Personal Home Pages)

Con lenguaje similar al Perl embebido.

Se puede acceder a estas paginas desde

un navegado a través dela protocolo
HTTP
El cual devolverá la respuesta a el cliente.
Ojo…..

 Noconfundir JavaScript, Jscript ni VBScript, con

paginas de servidor.

 Laspaginas servidor, se ejecutan en el servidor y

devuelven un resultado al cliente.

 Mientrasque JavaScript, Jscript ni VBScript, se

ejecutan en el cliente.
Actividad /Tarea

 Investigar las tecnologías para el desarrollo web.

1.3 Tecnologías para el desarrollo de
aplicaciones web

El desarrollo de aplicaciones web ha evolucionado

enormemente en la última década, tanto desde el punto
de vista del desarrollo de software como a nivel de
administración de sistemas

 Desarrollo de software
Se han creado multitud de tecnologías, frameworks de
desarrollo de aplicaciones, bibliotecas, aplicaciones
configurables, arquitecturas, modelos de publicación de
versiones (release)…

 Administración de sistemas
Se ha evolucionado enormemente en la administración de
sistemas, servicios de alojamiento, técnicas de
escalabilidad, monitorización, gestión de centros de
procesos de datos…
1.3 Tecnologías para el desarrollo de
aplicaciones web.
Tecnologías de la Capa de Presentación. 1/3
(es la que ve el usuario, presenta el sistema al usuario.)

Java Server Faces (JSF)

La tecnología Java Server Faces es un marco de desarrollo
de los componentes de la interfaz de usuario, válido para
todas aquellas aplicaciones web basadas en la tecnología
Java.

Richfaces.
Es un marco de código abierto que añade a las
aplicaciones capacidad de Ajax en JSF, sin recurrir a Java
Script. RichFaces aprovecha el framework Java Server
Faces, incluyendo su ciclo de vida, la validación, los medios
de conversión y la gestión de los recursos estáticos y
dinámicos.
1.3 Tecnologías para el desarrollo de
aplicaciones web.
Tecnologías de la Capa de Presentación. 2/3

Ajax.
Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una
técnica de desarrollo web para crear aplicaciones interactivas o RIA
(Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente,
es decir, en el navegador de los usuarios mientras se mantiene la
comunicación asíncrona con el servidor en segundo plano. De esta
forma es posible realizar cambios sobre las páginas sin necesidad de
recargarlas, mejorando la interactividad, velocidad y usabilidad en las
aplicaciones.

Lenguaje de Marcado de Hipertexto Extensible (XHTML)

Es una versión más estricta y limpia de HTML, que nace con el objetivo
de remplazar a HTML ante su limitación de uso con las cada vez más
abundantes herramientas basadas en XML. XHTML extiende HTML 4.0
combinando la sintaxis de HTML, diseñado para mostrar datos, con la de
XML, diseñado para describir los datos.
Tecnologías de la Capa de Presentación. 3/3

Extensible Markup Language (XML)

Es un lenguaje de etiquetas no predefinidas

previamente, es decir, el programador es el que las
crea en cada caso. El XML ahorra tiempos de
desarrollo y proporciona ventajas, dotando a webs
y a aplicaciones de una forma realmente potente
de guardar la información.

Java Persistence API (JPA)

El Java Persistence API fue desarrollado por el grupo de
expertos de EJB 3.0, aunque su uso no se limita a los
componentes software EJB. También puede utilizarse
directamente en aplicaciones web y aplicaciones
clientes; incluso fuera de la plataforma Java EE.

En su definición, se han combinado ideas y conceptos de

los principales frameworks de persistencia como
Hibernate, Toplink y JDO y de las versiones anteriores de
EJB. Todos estos cuentan actualmente con una
implementación JPA.
1.3 Tecnologías para el desarrollo de
aplicaciones web.

Tecnologías de la Capa de negocios. 1/3

Se clasifican en:
 Servidor de aplicaciones:

Se trata de un dispositivo de software que

proporciona servicios de aplicación a las
computadoras cliente.

 Herramientas:
Conjunto de programas informaticos o utilidades
que brindan la resolución de una determinada
tarea.
1.3 Tecnologías para el desarrollo de
aplicaciones web.
Tecnologías de la Capa de negocios. 1/3

 Servidor de aplicaciones:

Jboss

Es un servidor de aplicaciones para Java. Es muy reconocido por ser de los

primeros servidores de aplicación empresarial gratuito y open source. Al estar
basado en Java, puede ser utilizado en cualquier sistema operativo que lo
soporte, ofreciendo una plataforma de alto rendimiento para aplicaciones java,
aplicaciones Web y Portales.

Enterprise Java Beans (EJB)

Es una plataforma para construir aplicaciones de negocio portables, escalables,

y reutilizables utilizando el lenguaje de programación java. Permite a los
desarrolladores enfocarse en la lógica del negocio sin tener que emplear tiempo
en la conformación del código de la infraestructura.
1.3 Tecnologías para el desarrollo de
aplicaciones web.
Tecnologías de la Capa de negocios. 1/3

Servidor de aplicaciones:
Adobre Dreamweaver
Es una aplicación en forma de estudio que está destinada a la
construcción, diseño y edición de sitios, vídeos y aplicaciones Web
basados en estándares. Creado inicialmente por Macromedia
(actualmente producido por Adobe Systems) es uno de los programas
más utilizados en el sector del diseño y la programación web, por sus
funcionalidades, su integración con otras herramientas como Adobe
Flash y, recientemente, por su soporte de los estándares del World Wide
Web Consortium.
1.3 Tecnologías para el desarrollo de
aplicaciones web.
Lenguajes de programación utilizados para
aplicaciones web.

 JAVA
 PHP
 C#
 [Link]
Existes 2 enfoques de Desarrollo de
Aplicaciones Web

 Creación de webs con tecnologías de desarrollo.

 Creación de webs con sistemas gestores de

contenido.
Creación de webs con tecnologías de
desarrollo.
 Arquitecturas de aplicaciones web: Una aplicación web
puede tener diferentes arquitecturas. Esto determina cómo se
usan las diferentes tecnologías existentes.

 Tecnologías de cliente: Tecnologías que permiten crear

interfaces de usuario atractivos y permiten la comunicación
con el servidor. Basadas en HTML, CSS y JavaScript.

 Tecnologías de servidor: Tecnologías que permiten

implementar el comportamiento de la aplicación web en el
servidor: lógica de negocio, generación de informes,
compartir información entre usuarios, envío de correos, etc…

 Bases de datos: La gran mayoría de las webs necesitan

guardar información. Las bases de datos son una parte
esencial del desarrollo web.
Creación de webs con sistemas gestores
de contenido.

 Existen aplicaciones web cuya principal funcionalidad es la

publicación de contenido: blogs, páginas de empresas,
organismos públicos, etc.

 Todas estas webs tienen mucho en común, prácticamente

sólo se diferencian en el contenido y en el aspecto gráfico

 Para desarrollar este tipo de webs, en vez de desarrollar la

web con técnicas de desarrollo, se utiliza un software ya
desarrollado y se personaliza y adapta a las necesidades

 A las aplicaciones de este tipo se las denomina Sistemas

Gestores de Contenido (CMSs).
Algunas tecnologías no
estándar de la web

Adobe Flash
 Es una tecnología usada principalmente
para incrustar contenido multimedia
interactivo en páginas web

 Durante muchos años fue la única

forma de tener interactividad,
animaciones, vídeos, juegos… en la
web

 Es posible que haya cosas que a día de

hoy sólo se puedan hacer con flash y no
se puedan implementar con la
tecnología HTML5
Algunas tecnologías no
estándar de la web

Java Applets
 Los applets de Java fueron los precursores
de Flash
 Debido a prácticas anticompetitivas de
Microsoft y que Sun Microsystems estaba
más centrada en los servidores de
aplicaciones hace mucho tiempo que está
en desuso
Microsoft Silverlight
 La apuesta de Microsoft para competir con
Adobe Flash
 Soporte muy limitado en plataformas
diferentes a Windows
 El navegador web de Metro en Windows 8
no soportará plugins, por tanto, no tendrá
soporte para Flash ni para Silverlight
Tecnologías del servidor.

Existen muchos tipos de servidores, dependiendo de sus

funcionalidades/rendimiento y de su licencia/coste.

 Apache (PHP)
 Glassfish (Oracle)
 Tomcat (Apache)
 Jetty (Eclipse)
 JBoss (RedHat)
 WebSphere (IBM)
 WebLogic (Oracle)
Fuentes de Información

 1. Forta, Ben. ColdFusion(R) MX Web Application

Construction Kit. 5th Edition. Ed. Adobe.

 2. Snook, Jonathan, Gustafson, Aaron, Langridge y Webb,

Dan.
 Accelerated DOM Scripting with Ajax, APIs and Libraries. Ed.
Apress.

 3 Nixon, Robin. Learning PHP, MySQL, and JavaScript: A

Step-By-Step Guide to Creating Dynamic Websites. Ed. O’Reilly.

 4 M. Schafer, Steven. HTML, XHTML, and CSS Bible. Wiley

Publishing Inc.