PROGRAMACIÓN WEB

PROFESORA: CECILIA JIMÉNEZ MEZA

HORA: 13:00-14:00
CARRERA: INGENIERÍA EN SISTEMAS COMPUTACIONALES
SEMESTRE: OCTAVO
PERIODO: ENERO - JUNIO 2020
INTEGRANTES:
ALUMNA: EMILY PACHECO PINEDA
NO. CONTROL: 16320919
 1. INTRODUCCIÓN A LAS APLICACIONES WEB

1.1 EVOLUCIÓN DE LAS APLICACIONES WEB.

Antes de la Web, la manera de obtener los datos de Internet era caótica: había diferentes
maneras posibles de obtenerlos y con ello había que conocer múltiples programas y
sistemas operativos. La Web introduce un concepto fundamental que es la posibilidad de
lectura universal, que consiste en que una vez que la información esté disponible, se pueda
acceder a ella desde cualquier computadora, desde cualquier país, por cualquier persona,
usando un único y simple programa llamado navegador. Hoy en día, Internet es un sistema
de comunicación público, cooperativo y autosuficiente económicamente, existen muchos
modelos de negocio basados en él, y a nivel técnico, se distingue porque basa su
funcionamiento en TCP/IP

“Transfer Control Protocol / Internet Protocol”

(Protocolo de Control y Transferencia / Protocolo de Internet). La primera versión conocida

como Web 1.0 se considera un tipo de web estática, de sólo lectura con los contenidos
dirigidos a la navegación. En la actualidad es difícil considerar cuando estamos visualizando
contenido en Web 1.0.

Uno de los términos más actuales es el de Web 2.0, que se popularizó en el año 2004 y se
ha asociado a cuatro aspectos clave que seguramente encuentras cuando navegas en
Internet en la mayoría de los sitios y estas son sus principales características:

• Son usadas plataformas y ambientes Colaborativos como Facebook,

Youtube,Wikipedia y Twiter.
• La organización de la información se realiza a través de etiquetas de datos llamadas
metadatos; Google emplea este tipo de meta - información para organizar los
resultados.
• Estado Beta (o en pruebas).
• Multiplataforma. Puede ser utilizada en diversos dispositivos como teléfonos
inteligentes, televisiones, libros electrónicos, diversos sistemas operativos, etcétera.

Por otro lado, podemos decir que la web 2.0 es más actitud y modelo de negocio antes que
tecnología: está centrada en la comunicación y en el usuario y se encuentra en constante
cambio. Finalmente, podemos mencionar

“La Web 3.0” La tercera generación de servicios basados en Internet que se caracterizan
por ser una web Inteligente que incluye conceptos como el de la web semántica (Internet
con la información mucho mejor definida, que permitiría a cualquier usuario poder encontrar
respuestas de forma más rápida y sencilla).

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 (navegadores).
Definición: Son aplicaciones basadas en el modelo Cliente/Servidor que gestionan
servidores web, y que utilizan como interfaz páginas web.

• La colección de páginas es en una buena parte dinámicas (ASP, PHP, etc.), y están
agrupadas lógicamente para dar un servicio al usuario.
• El acceso a las páginas está agrupado también en el tiempo (sesión).
• Ejemplos: venta de libros, reserva de billetes, etc.

Componentes de una aplicación Web

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.
• Administración de los datos.
• Manipulación de BD y archivos.

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.

Cliente, Servidor y protocolo de comunicación

El software cliente puede ser un navegador web (Chrome, Firefox, IExplorer) que interpreta
código en HTML. El software servidor puede ser un servidor web como es Apache, y el
protocolo de comunicación generalmente es HTTP. Como vemos, ninguna de estas
aplicaciones tiene que ser creada por el programador.

Del lado del cliente pueden correr tecnologías como: HTML, CSS y Javascript. Del lado del
servidor pueden correr tecnologías CGI, ASP, JSP o PHP.

Proceso de ejecución de una página web

El proceso de ejecución de una página web es como sigue:

1. El usuario escribe una URL desde el navegador.

2. Se establece una conexión con el servidor.

3. El servidor busca el recurso solicitado en la cadena URL

4. El servidor envía el recurso solicitado (si fuera una tecnología como PHP, primero
realiza una compilación; si no existiera el recurso envía un mensaje de error).

5. El cliente interpreta el código HTML que le fue enviado. Si éste hace referencia a
otros objetos de nuevo establece comunicación con el servidor, solicitándoselos.

6. Se cierra la conexión entre el cliente y el servidor.

 7. Al final tenemos una página completa siendo mostrada al usuario.

Arquitectura de una aplicación web

1. El servidor ejecuta todo. En este enfoque el servidor contiene: el software servidor,

la aplicación y los datos. PHP utiliza este enfoque.

2. El servidor de datos por separado. El servidor de base de datos puede estar en un

equipo diferente.

3. Un servidor, con servicio de aplicaciones.

4. El servidor de datos por separado, con servicio de aplicaciones.

5. Todo separado.

Ventajas de los esquemas con servicios “separados”

• Mayor rendimiento

• Se puede configurar cada servidor de la mejor manera para cada tipo de servicio.

• Al separar los datos se aumenta un poco la seguridad.

¿Qué plataforma de desarrollo es mejor utilizar?

Tendremos que elegirlo en base a nuestras necesidades y criterios.

¿Quieres algo fácil de aprender? PHP (Hypertext Preprocessor) es relativamente fácil

de usar teniendo algunas nociones de programación (Granados, R., 2015). Además, es
código abierto, cuenta con una gran comunidad de desarrolladores dispuestos a
compartir su conocimiento y responder tus dudas, y hay mucha documentación en línea.

¿Estás acostumbrado a la tecnología .NET? La plataforma de Microsoft ASP.NET tiene

gran integración con las aplicaciones desarrolladas en .NET, por lo que no es extraño
que algunas empresas desean que se utilice este lenguaje. Otra ventaja de esta
plataforma es que compila previamente el código por lo que su ejecución puede llegar
a ser más rápida que PHP (Granados, 2008).

Y no podemos pasar por alto a JSP (Java Server Pages) que es una tecnología
desarrollada por Sun y de la cual es actualmente propietaria Oracle. Se integra con
tecnologías Java como lo son los servlets.

1.3 TECNOLOGÍAS PARA EL DESARROLLO DE APLICACIONES WEB.

Los modelos y tecnologías de desarrollo web han evolucionado mucho en la última

década, existen multitud de aplicaciones, frameworks, librerías, arquitecturas y sistemas de
publicación en diferentes versiones que a su vez reciben cambios o mejoran con el tiempo.
El progreso también ha tenido lugar en lo relacionado con la administración de sistemas,
servicios de alojamiento, técnicas de escalabilidad, monitorización y gestión de centros de
procesos de datos.
Esta evolución ha dado lugar a la convergencia de una gran cantidad de tecnologías,
herramientas y estilos arquitectónicos para desarrollar sitios web y aplicaciones, te
contamos los aspectos más importantes relacionados con ellos, y la manera en la que
interactúan entre sí.

Para que un sitio o aplicación web funcione mostrándose al público es necesaria una
arquitectura que disponga como mínimo los siguientes elementos:

El navegador: Representa el concepto de cliente realizando peticiones solicitando recursos

a diferentes servidores web a través de URL.

El Servidor: Almacena de forma organizada la estructura de la información del sitio web

para servir los contenidos en relación a las peticiones del navegador.

El protocolo http: Es el protocolo basado en TCP/IP a través del cual el navegador realiza
peticiones al servidor para que este responda.

HTML: Es el formato básico de los documentos que componen las páginas web, está
basado en etiquetas y sirve para estructurar la forma de mostrar los contenidos de las
páginas.

CSS: Las hojas de estilo en cascada sirven para favorecer estéticamente los elementos y
contenidos estructurados a través de las etiquetas HTML, dotándoles de personalidad en
cuanto a su diseño, forma y colores.

1.4 PLANIFICACIÓN DE APLICACIONES WEB.

La planeación, aborda elementos que deben definirse para establecer un flujo de trabajo y
un programa y rastrear el trabajo conforme avanza el proyecto. Con planificación previa no
estoy sugiriendo numerosas horas de escrupulosa planificación y organización de todo lo
que haremos, ha de ser práctico y en ningún momento debe ser peor el remedio que la
enfermedad, recordad que nos interesa planificar para ahorrar tiempo y ganar en calidad.

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 de datos).
• Implementación.
• Pruebas.

Definición del Proyecto

Descubrimiento

• Entrevistas a las partes interesadas (clientes, proveedores, etc.)

• Análisis de la competencia
• Estudio de los Perfiles de audiencia
• Investigación de la audiencia/mercado: Perfiles de las audiencias principales y
secundarias
• Capacidades y Restricciones de la audiencia: habilidades, expectación,
necesidades típicas, requerimientos de navegador/plataforma, etc.

Análisis

• Finalidad última del site

• Funcionalidades y contenidos necesarios en el producto final
• Capacidades internas de la empresa: recursos financieros y recursos de personal
(equipo)

Estrategia

• Objetivos de negocio: primarios y secundarios

• Estrategia de comunicación: tono y estilo (resumidos en un briefing creativo)
• Métricas de éxito
• Plan de Marketing
• Alcance: decidir qué hacer ahora y qué puede esperar para una segunda fase

Plan de Proyecto (Borrador)

• Resumen del Proyecto

• Estrategia
• Audiencia
• Requerimientos
• Alcance
• Métricas de éxito
• Marketing
• Mantenimiento y soporte posterior
• Desarrollo futuro
• Equipo y roles
• Relación con el cliente (gestión de la cuenta)
• Ciclo de aprobación
• Presupuesto
• Timming

Entregables en la fase de Definición del Proyecto

• Para un proyecto pequeño: Plan de Proyecto

• Para un proyecto grande: Plan de Proyecto, Briefing Creativo y Plan de Marketing
Diseño Estructural

Definición del Contexto

• Inventario del contenido existente: textos, imagines, vídeos, incluyendo fuentes que
no provengan de la web (libros, fotografías, etc…)
• Contenido que tenga que ser creado o editado (imágenes, textos, traducciones,
vídeos, etc…)
• Responsabilidades de autoría y edición (equipo: asignación de recursos)
• Plan de mantenimiento de contenidos

Definición Funcional

• Requisitos Funcionales
• Requerimientos de tecnología
• Requerimientos de planificación e integración
• Requisitos de Soporte
• Responsabilidades internas
• Responsabilidades de los Proveedores

Diagramas a nivel de Site y de Página

• Arquitectura de la Información
• Mapa del Site
• Wireframes: representación esquemática de las páginas
• Convenciones de Nombres y Etiquetas (Nomenclaturas)

Entregables de esta fase de Diseño Estructural

• Para proyectos pequeños: Diagrama de Arquitectura de Información, Wireframes

• Para proyectos grandes: Diagrama de Arquitectura de Información, Wireframes,
Especificaciones Funcionales, Especificaciones Técnicas, Plan de Pruebas, Plan de
Soporte.
• Cuando se requiera mantener relaciones con proveedores: Contrato con el
proveedor, Contrato de Aceptación del Servicio, Licenciamiento, Contrato de
Confidencialidad.

Pruebas del Diseño Estructural y Finalización de esta fase

• Revisión de los wireframes con las partes implicadas (cliente, etc.)

• Comprobación de los wireframes con 3-5 usuarios

Recopilación y Creación de Contenidos

• Autoría de Contenidos
• Creación y edición de contenidos de acuerdo con la arquitectura de información del
site y de los diagramas de las páginas; para reutilización de los contenidos es
recomendable que se preparen directamente para la web
 • Determinación del origen de las fotografías, vídeos e ilustraciones. Revisión de los
Contenidos y Finalización de esta fase en la aceptación de los contenidos mediante
un ciclo de aprobación de los mismos.

Diseño Visual

Diseño Gráfico del Site

• Aplicación de la marca e identidad visual

• Fotografía, Vídeo e Ilustración
• Obtención de los Componentes de diseño
• Prototipo de baja resolución Entregables de esta fase de Diseño Gráfico del Site
• Para un proyecto pequeño: Componentes de diseño
• Para un proyecto grande: Componentes de diseño, Guía de estilo, Prototipo
interactivo de las secciones clave del site.

Producción

Ingeniería

• Instalación y configuración del Servidor y del Hosting

• Desarrollo de los datos y/o de la base de datos
• Desarrollo de la aplicación
• Desarrollo y/o Integración del sistema de gestión de contenidos (CMS)
• Diseño y desarrollo de las páginas y plantillas: HTML, CSS, JavaScript (y/o otros
scripts cliente a nivel de página)
• Diseño de elementos reutilizables: gráficos, navegación, META tags, etc.
• Pruebas de Control de Calidad

Construcción del Site

• Asignación de contenidos de prueba

• Aplicación de estilos
• Integración de datos, aplicaciones u otras funcionalidades
• Almacenamiento en el servidor de desarrollo (para pruebas)

Pruebas de Calidad

• Prueba de los contenidos y revisión de los mismos: comprobación de enlaces,

revisión de textos e imágenes, etc.
• Pruebas funcionales: pruebas sobre la aplicación y sobre elementos interactivos
• Pruebas de integración
• Pruebas de navegación
• Planificación final del proceso de calidad
• Pruebas en los distintos navegadores

Revisión
 • Revisión por parte de las partes implicadas (clientes, etc.) y aprobaciones finales.

Lanzamiento

• Puesta en Marcha
• Lanzamiento previo con base de datos con pocos usuarios; lanzamiento progresivo
con la base de datos completa
• Marketing sobre el site
• Posicionamiento del site (SEP)

Soporte de usuarios

• Mantenimiento
• Puesta del site en manos del equipo de mantenimiento
• Métricas sobre el site: recuperación de datos (informes), reportes y monitorización
• Establecimiento como site inicial o realización de ajustes en la planificación.
BIBLIOGRAFÍA

Conceptos básicos sobre tecnologías de desarrollo web. (s.f.). Obtenido de Ingenio Virtual:
https://www.ingeniovirtual.com/conceptos-basicos-sobre-tecnologias-de-desarrollo-web/

Edu4java. (s.f.). Obtenido de http://www.edu4java.com/es/web/html5-estructura-global.html

Insitituto Tecnologico de Chilpancingo. (s.f.). Obtenido de

https://secciontareas.webcindario.com/unidad1/planificacion.html

Jeffelo. (s.f.). Planificacion de Aplicaciones Web. Obtenido de

https://es.scribd.com/doc/56969459/02-Planificacion-de-Aplicaciones-Web