Ingeniería de Software - Desarrollo web

INGENIERÍA DE SOFTWARE
DESARROLLO WEB

Introducción al funcionamiento de la
web, ¿Cómo funciona una página
web?
El objetivo es comprender cómo funciona una web y qué ocurre cuando intentamos
acceder a un determinado contenido o realizar alguna operación en algún sitio web.

¿Cómo funciona?

Las computadoras con las que nosotros accedemos a las diversas páginas web son
lo que llamamos clientes, y se comunican con otras computadoras llamadas
servidores. La comunicación entre un cliente y un servidor nos permite acceder a
cualquier página web a través de un protocolo de transferencia de información. Toda
esta comunicación es posible a través de nuestro navegador web como Chrome,
Edge o Firefox.

¿Qué es un servidor?

Un servidor es una computadora o un conjunto de computadoras con una gran

capacidad de cómputo en la cual se almacenan diversos recursos necesarios como
páginas html, videos o cualquier otro recurso necesario.

¿Que es un cliente?

Un cliente es una computadora o dispositivo a través del cual se solicita a un

servidor acceso a algún recurso en particular, como podría ser cualquier página
web.

¿Cómo se comunican?

1
Ingeniería de Software - Desarrollo web

Cuando tratamos de acceder a una página web el cliente, que podría ser nuestra
computadora, envía una petición al servidor donde se encuentran los recursos. Esta
comunicación se logra a través del protocolo HTTP.

En resumen, el cliente realiza una petición. El servidor, que es capaz de escuchar

muchas peticiones, recibe dicha petición y la procesa, devolviendo una respuesta al
cliente, el cual podría ser el contenido de una página web, un video o algún tipo de
recurso.

Links de referencia
● https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/How_the_
Web_works
● https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web

Front-End y Back-End

El desarrollo FrontEnd está orientado a la visual del usuario. Este tipo de desarrollo
involucra la parte del cliente ya que se desarrollan aplicaciones o sitios web donde
la programación se orienta que la funcionalidad y la visual funcionen
armónicamente.
Actualmente existen numerosas herramientas para el desarrollo de aplicaciones
FrontEnd como HTML, CSS y JavaScript. Este tipo de aplicaciones se encargan de
mostrar la información y los recursos de manera dinámica.

El desarrollo BackEnd está orientado al desarrollo de aplicaciones que contengan la

lógica de negocio, permitiendo administrar datos accediendo a la base de datos.
Este tipo de aplicaciones están orientadas a la solución de problemas lógicos y a
garantizar seguridad. Para el desarrollo de aplicaciones BackEnd también existen
numerosas herramientas y lenguajes, como por ejemplo Java o Javascript.

La información que pueden mostrar las aplicaciones FrontEnd es comúnmente

recuperada a través de lo que se conoce como una API. Esta permite que a través
de una serie de Endpoints o URLS, nuestra aplicaciones Front pueda comunicarse
con una o más de una aplicación BackEnd.

Originalmente cargar un dato en una página, o actualizar algún campo determinado

requiere de actualizar toda la página para traer la información nueva, pero
actualmente gracias a la arquitectura cliente servidor podemos recuperar
información de manera dinámica.

2
Ingeniería de Software - Desarrollo web

Lo primero que tenemos que aprender en el mundo del desarrollo web es el manejo
de HTML, CSS y JavaScript, los cuales nos van a permitir dar nuestros primeros
pasos.

HTML(HyperText Markup Language)

¿Qué es HTML?

Las siglas HTML vienen de HyperText Markup Language o Lenguaje de Marcado de

HiperTexto. Este lenguaje es un estándar para la creación de páginas web y
consiste en una serie de etiquetas que definen el significado y la estructura de la
web.

HTML posee una estructura de árbol, es decir que vamos a partir de una raíz de la
cual vamos agregando más y más nodos.

¿Qué es una etiqueta de HTML?

Una etiqueta en HTML es un elemento que nos permite especificar de qué manera
debe interpretarse el contenido en el navegador. Estas etiquetas constan de una
estructura:

Las partes principales del elemento son:

1. La etiqueta de apertura: consiste en el nombre del elemento (en este caso,

p), encerrado por paréntesis angulares (< >) de apertura y cierre. Establece
dónde comienza o empieza a tener efecto el elemento —en este caso, dónde
es el comienzo del párrafo—.
2. La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que
incluye una barra de cierre (/) antes del nombre de la etiqueta. Establece
dónde termina el elemento —en este caso dónde termina el párrafo—.

3
Ingeniería de Software - Desarrollo web

3. El contenido: este es el contenido del elemento, que en este caso es sólo

texto.
4. El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el
contenido equivale al elemento.

Los elementos pueden también tener atributos, que se ven así:

Un atributo debe tener siempre:

1. Un espacio entre este y el nombre del elemento (o del atributo previo, si el

elemento ya posee uno o más atributos).
2. El nombre del atributo, seguido por un signo de igual (=).
3. Comillas de apertura y de cierre, encerrando el valor del atributo.

Los atributos siempre se incluyen en la etiqueta de apertura de un elemento, nunca

en la etiqueta de cierre.

Links de referencia:
https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/HTML_ba
sics

Herramientas requeridas:
● Visual Studio Code https://code.visualstudio.com/

Actividades Recomendadas:
● hola mundo en HTML
● recorrido de los tags más comunes.
● maquetación Landing Page
● Formularios

CSS (Cascade Style Sheets)

4
Ingeniería de Software - Desarrollo web

CSS es el acrónimo de Cascade Style Sheets u hojas de estilo en cascada. Se trata

de un lenguaje para especificar el aspecto de nuestras páginas web.
CSS funciona a base de reglas que se pueden aplicar desde a un solo elemento de
HTML(un tag/etiqueta) hasta todo el nuestro documento HTML.
El objetivo de CSS es ofrecer un complemento a nuestras páginas web. Con HTML
podemos maquetar nuestra web y con CSS podemos dar un estilo personalizado.

Como ya mencionamos CSS se basa en reglas, estas se aplican a los elementos

deseados a través de un selector. A continuación podemos ver un ejemplo de su
sintaxis:

Selectores

Para aplicar una regla a un elemento y/o conjunto de elementos debemos debemos
utilizar el selector correspondiente:

● Selector de clase:
Para aplicar una regla a una clase debemos utilizar el símbolo “.” para indicar
que se trata de una clase bajo el nombre especificador.
por ejemplo:

5
Ingeniería de Software - Desarrollo web

● Selector de elemento:
En ocasiones queremos aplicar una regla a todos los elementos HTML de un
tipo determinado. Para esto utilizamos el selector por elemento:

● Selector por ID:

Al asignar un identificador único a un elemento de HTML es posible definir
reglas para ese elemento en particular a través de su ID:

Links de referencia

https://developer.mozilla.org/es/docs/Learn/CSS/CSS_layout/Introduction

Actividades Recomendadas:
● Aplicar estilos a un html simple.

Introducción a JavaScript
JavaScript es un lenguaje de programación interpretado por el navegador web. Se
trata de un lenguaje dinámico y basado en prototipos que es ejecutado en el cliente.
JavaScript nos permite agregar comportamientos dinámicos en nuestras páginas,
permitiendo la carga asíncrona de datos o comportamientos variados.

Tipos de variables

Var:

Las variables var son variables globales, por lo tanto pueden ser accedidas desde
“cualquier otro lado”. Si declaramos una variable var dentro de una función, esta

6
Ingeniería de Software - Desarrollo web

tendrá un alcance global dentro de la función, mientras que si se declara fuera de

cualquier función entonces esta variable podrá ser accedida desde cualquier parte
del file, o incluso ser manipulada por otros scripts.

Let:

Las variables let son más preferibles ya que su alcance es por bloque. Let nace
como una mejora a ver, ya que estas no pueden ser redefinidas y mantienen un
alcance más acotado. Si declaramos una variable let esta tendra su alcance dado
por las {}:

Const:

Las variables const son constantes y sus valores no se pueden actualizar o volver a
declarar. Su alcance es similar al let.

JQuery

jQuery es una biblioteca multiplataforma de JavaScript que permite simplificar la

manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar
eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a
páginas web.​

7
Ingeniería de Software - Desarrollo web

Ejemplos básicos de Jquery:

● Manipulación del DOM:

Tomamos un elemento del DOM con la clase button.continue y editamos su

contenido poniendo el valor “next Step…”.

● Manejo de eventos:

Tomamos el elemento de HTML que tenga el id banner-message y lo guardamos en

una variable. Luego recuperamos el elemento con el Id button-container y le
solicitamos que muestre nuestro elemento cuando se produzca el evento “click”.

JSON

JavaScript Object Notation (JSON) es un formato basado en texto estándar para

representar datos estructurados en la sintaxis de objetos de JavaScript. Se utiliza
para transmitir datos en aplicaciones web. Este tipo de formato fue adoptado por
muchos entornos de programación por lo que puede utilizarse JSON sin Javascript.

La forma de escribir con JSON cosiste en declarar a nuestros objetos como un

conjunto de claves y valores. Por ejemplo:

8
Ingeniería de Software - Desarrollo web

De esta manera podemos definir nuestros propios json asignando valores de

diversos tipos como strings, arrays o incluso funciones.
Para recuperar algún valor de nuestro json podemos utilizar el “.”. Por ejemplo:

Links referidos:

● https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/JavaScript
_basics
● https://uniwebsidad.com/libros/javascript/capitulo-3/tipos-de-variables
● https://jquery.com/
● https://developer.mozilla.org/es/docs/Learn/JavaScript/Objects/JSON