Clase 1 Introducción al Desarrollo Web

1. Electiva II
Clase 1
Introducción al Desarrollo Web
Ing. José Ricardo Tillero UPTAEB

2. Introducción al Desarrollo Web
Desarrollo Web
 Desarrollo Web es un término que define la creación de sitios Web para Internet o una intranet. Para
conseguirlo se hace uso de tecnologías de software del lado del servidor (Backend) y del cliente
(Frontend) que involucran una combinación de procesos de base de datos con el uso de un navegador
Web a fin de realizar determinadas tareas o mostrar información.
 Tradicionalmente un software departamental o corporativo de gran envergadura es desarrollado en
forma monousuario, multiusuario o cliente-servidor, usando lenguajes compilados (Delphi, C, C++),
semicompilados (.NET, Mono, Java), o interpretados (Python, PHP) y bases de datos como (MySQL,
postgreSQL, Oracle), para crear tanto la funcionalidad, como toda la interfaz de los usuarios, pero estos
software pueden perfectamente ser desarrollados orientados a la Web, siendo más homogéneo y
multiplataforma, y dependiendo de las tecnologías utilizadas, más rápido y robusto tanto para diseñar,
implementar y probar, como para su uso una vez terminado.
 Los lenguajes de programación más usados en desarrollo Web son, ASP.NET, PHP, JSP (JavaServer
Pages), JavaScript, Phyton, Ruby, entre otros.
 El sistema de gestión de base de datos más popular en desarrollo Web son: MySQL, Oracle, SQL Server
y PostgreSQL, también puede usarse perfectamente Firebird o HSQL.

3. Introducción al Desarrollo Web
Desarrollo Web
 Áreas de conocimiento implicadas en el desarrollo Web:

4. Introducción al Desarrollo Web
Diseño Web
 El diseño Web es una actividad que consiste en la planificación, diseño, implementación y
mantenimiento de sitios Web. No es simplemente la implementación del diseño
convencional ya que se abarcan diferentes aspectos como el diseño gráfico Web, diseño
de interfaz y experiencia de usuario, como la navegabilidad, interactividad, usabilidad,
arquitectura de la información; interacción de medios, entre los que podemos mencionar
audio, texto, imagen, enlaces, video y la optimización de motores de búsqueda.
 Para el diseño de páginas Web debemos tener en cuenta tres etapas:
1. El diseño visual de la información que se desea editar. En esta etapa se trabaja
distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos
multimedia que se consideren pertinentes.
2. Estructura y relación jerárquica de las páginas del sitio Web.
3. Posicionamiento en buscadores o SEO: consiste en optimizar la estructura del
contenido para mejorar la posición en que aparece la página en los motores de
búsqueda Web por una o varias palabras clave.

5. Introducción al Desarrollo Web
Desarrollador Web
 Un desarrollador Web es un programador especializado, o dedicado de forma específica, en desarrollar
aplicaciones de la World Wide Web o aplicaciones distribuidas en red que se ejecutan mediante HTTP
desde un servidor Web a un navegador Web.
 Los desarrolladores Web pueden trabajar en todo tipo de organismos, como grandes empresas,
gobiernos, y pequeñas y medianas empresas, o por cuenta propia como freelance.
 Las aplicaciones Web a menudo constan de tres o más capas, según el tamaño del equipo de trabajo, el
desarrollador puede especializarse en una o varias de estas capas, o puede adoptar un papel más
interdisciplinar. Por ejemplo, en un equipo formado por dos desarrolladores, puede que uno de ellos se
dedique a las tecnologías para programar el cliente o Frontend (HTML, JavaScript, CSS, JSP, ) o a la
programación del Servidor Web o Backend (Perl, Python, Ruby, PHP, Java, ASP, .NET, .NET MVC, entre
otras.); mientras que el otro desarrollador puede ocuparse de la interacción entre las infraestructuras
del lado del servidor, el servidor Web y el sistema de base de datos.
 Además, según el tamaño del organismo, dichos desarrolladores también podrían trabajar en
colaboración con un redactor creativo, un asesor de marketing, un diseñador Web, un productor Web,
un gestor de proyectos, un arquitecto de programas informáticos o con un administrador de base de
datos; o puede que ellos mismos sean responsables de tareas como la del diseño Web o la gestión de
proyectos.

6. Introducción al Desarrollo Web
Programador Web
 Un programador Web podemos definirlo como aquella persona con conocimientos de programación de
software, que aplica la lógica de la programación para crear aplicaciones de software utilizando las
tecnologías Web.
 Las tecnologías que debe al menos conocer parcialmente un programador Web son:
 HTML y CSS son tecnologías (o metalenguajes, ya que no puede considerárselos lenguajes de
programación) que intervienen en prácticamente todo desarrollo, grande o pequeño. Se encargan
de dotar de una estructura y presentación agradables a aquello que ve el usuario de páginas Web.
 Los lenguajes de programación del lado del servidor realizan procesos en el servidor (computador
remoto que se encarga de enviar las páginas Web a través de internet): podemos citar entre estos
lenguajes Java (JSP), ASP.NET, PHP, o Perl, entre los principales.
 Los lenguajes de programación del lado del cliente realizan procesos en el ordenador personal del
usuario (efectos visuales, cálculos, etc.): podemos citar entre estos lenguajes Javascript, Java
(applets), o VBScript, entre los principales.
 En cuanto a bases de datos podemos nombrar MySQL, PostgreSQL, SQLServer y Oracle, entre las
principales.

7. Introducción al Desarrollo Web
Programador Web
 Un programador Web debe conocer y manejar las siguientes tecnologías Web:

8. Introducción al Desarrollo Web
Arquitectura Cliente/Servidor
 Las aplicaciones Web se basan en una arquitectura cliente/servidor por un lado está el cliente (el
navegador, explorador o visualizador) y por otro lado el servidor (el servidor Web). Existen diversas
variantes de la arquitectura básica según cómo se implementen las diferentes funcionalidades de la
parte servidor.
 Arquitectura Cliente/Servidor a dos capas:
Es el modelo de arquitectura Web más básico. Lo que se espera en general es que en el HTML solo haya
componentes visuales de interacción con el usuario. Se puede usar JavaScript para validar cosas muy
sencillas, como el largo de las entradas. Sin embargo, se espera que toda la lógica de la aplicación
resida en el servidor Web. El cliente accede al servidor por medio de un navegador. Hace peticiones y
espera las respuestas del servidor. La red gestiona la transferencia de datos, por medio de HTTP. El
cliente en realidad no hace mucho.

9. Introducción al Desarrollo Web
Arquitectura Cliente/Servidor
 Arquitectura Cliente/Servidor a tres capas:
Es una estructura de tipo cliente/servidor, pero en la que hay al menos una capa intermedia entre las
dos. Esa capa se suele encargar de procesar las peticiones y enviarlas al Servidor de Base de Datos con
el que se comunica. Un ejemplo habitual es que la capa intermedia sea un Servidor Web que evita que el
cliente se conecte directamente al Servidor de Base de Datos, el Servidor Web se encarga de traducir lo
que el cliente realiza a una forma entendible por la base de datos. El cliente para acceder a la base de
datos, lo hace a través de un aplicación Web, desde un navegador Web vía intranet o Internet.

10. Introducción al Desarrollo Web
Arquitectura Cliente/Servidor
 Arquitectura Cliente/Servidor a tres capas:
Estas capas también se les suele abreviar como UI (interfaz de usuario), BLL (capa de lógica de
negocios) y DAL (capa de acceso a datos). Con esta arquitectura, los usuarios realizan solicitudes a
través de la capa de interfaz de usuario, que interactúa con la capa BLL. BLL, a su vez, puede llamar a
DAL para las solicitudes de acceso de datos. La capa de interfaz de usuario no debe realizar solicitudes
directamente a DAL, ni debe interactuar con la persistencia de forma directa a través de otros medios.
Del mismo modo, BLL solo debe interactuar con la persistencia a través de DAL. De este modo, cada
capa tiene su propia responsabilidad conocida.

11. Introducción al Desarrollo Web
Arquitectura Cliente/Servidor
 Arquitectura Cliente/Servidor a tres capas:
El patrón de arquitectura del software MVC (Modelo - Vista - Controlador), se adapta a esta arquitectura
de aplicaciones Web.
El Modelo, será la capa donde se trabaja con los datos, por tanto contendrá mecanismos para acceder a
la información y también para actualizar su estado. Los datos los tendremos habitualmente en una base
de datos, por lo que en los modelos tendremos todas las funciones que accederán a las tablas y
ejecutara las consultas SQL.
La vista, será la capa que contiene el código de nuestra aplicación que va a producir la visualización de
las interfaces de usuario, o sea, el código que nos permitirá renderizar los estados de nuestra aplicación
en HTML.
El Controlador, será la capa que contiene el código necesario para responder a las acciones que se
solicitan en la aplicación, En realidad es una capa que sirve de enlace entre las vistas y los modelos,
respondiendo a los mecanismos que puedan requerirse para implementar las necesidades de nuestra
aplicación.