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
