Modulo 1. Estructura de proyecto web y ses de programaci6n VA Introduccion En esta primera instancia de la materia, vamos a conocer cémo debe ser una estructura de paginas webs (algo que desde nuestro servidor presentaremos al cliente y usuarios o internautas). Nos valdremos, primeramente, del lenguaje marcado de hipertexto (HTML, por sus siglas en inglés, Hyper Text Markup Language), que sera el encargado de mostrar en nuestro navegador web el desarrollo que realizamos. En segundo lugar, utilizaremos el lenguaje de hojas de estilo (CSS, por sus siglas en inglés, cascading style sheets), que nos brindara una visién clara y entendible acerca de cémo va nuestro proyecto. Este ultimo lenguaje sera el que nos dard una visualizacién completa, con los estilos de la pagina: los colores, las imagenes, el tamafio y los tipos de tipografia, lo cual hace que el destinatario se sienta mas cémodo y tenga mayor afinidad respecto a todo lo que se quiere informar. Video de Inmersion Unidad 1. Estructura de un proyecto web La estructura de un proyecto web se puede disefiar de diferentes maneras, pero todas las paginas webs utilizan el mismo protocolo de transferencia de hipertexto (HTTP) y el mismo lenguaje de interfaz de usuario (HTML, CSS y JavaScript). Es posible acceder a ellas con todos los navegadores web, por ejemplo, Chrome, Safari, Firefox u Opera, solo por nombrar los mas conocidos. A continuacién, veremos en detalle cada uno de estos componentes. Tema 1, Protocolo de transferencia de hipertexto (HTTP) Un proyecto web puede definirse como una aplicacién cliente-servidor a la que se puede acceder mediante un navegador web si se emplea el protocolo HTTP. Aplicaciones cliente-servidor Una aplicacion cliente-servidor es un tipo de arquitectura en la que existen proveedores de un servicio particular (los servidores o servers) y solicitantes de un servicio particular (los clientes 0 clients). En este tipo de arquitectura (figura 1), pueden existir mtiltiples servidores que brinden un mismo servicio, como asi también multiples clientes que soliciten dichos servicios. En general,dado que un servidor puede responder a diferentes clientes, se tiene una cantidad superior de clientes que de servidores. Los clientes son los navegadores webs que consumen los datos 0 estén en conexién con los servidores. Mas adelante, en nuestro desarrollo, aprenderemos a crear y configurar un servidor en nuestras propias computadoras personales (PC) En los servidores, se ejecutan aplicaciones que pueden estar compuestas por uno o mas lenguajes de programacién, Como veremos en este curso, se utilizara el Hypertext Preprocessor © preprocesador de hipertexto (PHP), uno de los lenguajes webs que més se utilizan en la actualidad. En los clientes, se ejecutan scripts (guiones programados en lenguaje JavaScript o alguna biblioteca que se desarrolle en este lenguaje como, por ejemplo, jQuery). Estos scripts toman acciones de los clientes (usuarios que navegan la web) y responden conforme se hayan desarrollado. ura 1: Componentes de una arq Centos Fuente: elaboracién propia, En la comunicacién cliente-servidor (figura 2), los clientes son siempre los que empiezan la comunicacién, al solicitar un recurso u operacién especifica. Este pedido puede ser tanto la solicitud de una pagina estatica (el cliente no puede interactuar) como la de una pagina dinamica (el cliente interactéa con el servidor al intercambiar datos). Luego, el servidor responde acorde a lo que solicité el cliente. igura 2: Flujo de una comunicacién cliente-servidorFuente: elaboracisn propa Navegadores webs Los navegadores webs, también conocidos como browsers, son aplicaciones que permiten realizar solicitudes a servidores (cumplen la funcién de cliente) y son capaces de comprender lo que el servidor responde y mostrarlo en pantalla. Como mencionamos anteriormente, existen muchos navegadores webs, algunos de ellos son exclusivos del sistema operativo de nuestra PC. Fuente; elaboracin propa, Cuando se desarrollan aplicaciones webs, es muy importante saber cudl es el navegador que més se utiliza en el mercado, con el fin de asegurar que nuestra aplicacién funcione para la mayoria de los usuarios. Este valor cambia continuamente de acuerdo con las preferencias del usuario o las mejoras que los navegadores van presentando en sus actualizaciones. igura 3: Uso de navegadores a lo largo de los afios ‘Worldwide Browser Market Share (AllPlatforms) Fuente: Afde, 2021, htps:fbit yi3L3P 141 La gran mayoria de los navegadores webs cuentan con una potente herramienta llamada consola (figura 4), en la que se pueden ver las propiedades del documento que se esté navegando,inspeccionar sus elementos y encontrar errores en la programacién de los scripts (guiones). Figura 4: Consola Fuente: captura de pantalla de Mozilla Firefox (hlipsiwww.mozila.rg). Protocolo HTTP Un protocolo es un conjunto de reglas que establecen cémo se debe llevar a cabo una comunicacién. En particular, el protocolo HTTP, que significa protocolo de transferencia de hipertexto (Hypertext Transfer Protocol), establece reglas que se pueden utilizar para la comunicacién entre clientes y servidores. El cliente realiza una peticién al servidor, mientras que el servidor puede prover recursos en HTML u otro protocol. Asimismo, es capaz de realizar una accién determinada en nombre del cliente, siempre que devuelva una respuesta que se relacione con su peticién A cada recurso que el servidor ofrece mediante HTTP, se puede acceder utilizando una URL (uniform resource locator localizador de recurso uniforme). Algunos ejemplos de recursos son paginas webs (codificadas en HTML), imagenes, videos, archivos, entre otros. Por ejemplo, una URL tipica seria la siguiente: http:/Avww.example.com/index.html, la cual indica un protocolo (HTTP), un nombre para identificar el servidor (www.example.com) y el nombre de un archivo (index.html). Este protocolo define diferentes métodos que le indican al servidor la accién que se quiere efectuar sobre cada recurso, se desarrollan a continuacién. * GET: solicita una copia de un determinado recurso. Este método solo obtiene datos, sin ningiin otro efecto. Cada vez que accedemos a una pagina web, utilizamos GET. + POST: solicita que se almacene o procese la informacién que se envia en la solicitud al servidor. Mientras GET obtiene informacién del servidor, POST envia la informacién para que la procese o almacene. En muchos casos, usamos POST cuando se realiza un login o inicio de sesién, en el que enviamos nuestro usuario y contrasefia al servidor para ser autenticados. * PUT: solicita modificar un recurso ya existente 0, si no existe, solicita su creacién. Es similar a POST, ya que en este método también se envia informacién al servidor.* DELETE: elimina un recurso especificado en la URL. Este protocolo también define estados (status codes) de la peticién que realizamos al servidor. Los més importantes son los siguientes. © Oxx- xito: los que empiezan con el ntimero dos, por ejemplo, 200, 201 0 202, indican que la acci6n solicitada ha sido recibida, entendida y aceptada. + 4x — errores de cliente: los que empiezan con el numero cuatro advierten que el error parece ser originado por el cliente. Por ejemplo, un cédigo 404 indica que el recurso no se ha encontrado, + 5x — errores de servidor: los que empiezan con el nimero cinco se utilizan para indicar que el error parece ser originado por el servidor. Por ejemplo, 503 significa «servidor no disponible» En la figura 5, podemos observar una captura de pantalla de la consola de Firefox, en la que vemos que la llamada al servidor fue correcta y que el servidor envid, sin errores, el recurso solicitado (status code 200). Figura 5: Captura de consola Fuente: captura de pantalla de Mozilla Firefox (hips www.mozila og Poder interpretar correctamente estos status codes nos dara una certeza sobre lo que ocurre, y servira para detectar errores en la transferencia de informacién. Por ejemplo, ayudara a detectar si el servidor no esta listo para manejar la peticion (status code 503). Evolucién del protocolo HTTP. Con el constante avance de la digitalizacién y un mayor uso de sistemas webs, este protocolo fue evolucionando hasta el actual HTTPS (la S final indica secure [seguro]). Por ejemplo, en una transferencia entre el cliente y el servidor, bajo HTTP, los datos viajan en forma de texto plano (entendible). Imaginemos que completamos un formulario en la web, en el que cargamos nuestra informacién sensible (usuario y password de acceso a nuestro home banking, por citar un ejemplo). Estosdatos viajan en la red legible para cualquier persona o sistema que, con fines maliciosos, quiera interceptar nuestra informacién. Esto no ocurre bajo HTTPS, ya que utiliza una combinacién de dos protocolos de comunicacién (HTTP + SSLITLS [transport layer security 0 seguridad de la capa de transporte) que hace que cualquier tipo de informacién que se transmita en la red se cifre y nadie pueda acceder a ella, Gnicamente el navegador y servidor web. Para ello, es necesario que tu web tenga instalado un certificado secure sockets layers (SSL). Tema 2. Introduccién a HTML El lenguaje Hypertext Markup Language (HTML) es el estandar para crear paginas y aplicaciones webs. Este lenguaje utiliza elementos (llamados elementos HTML) que un navegador puede comprender y transformar en elementos multimedia, como imagenes y textos de diferentes formatos o colores. Cada elemento HTML tiene una funcién especifica y se representa mediante una etiqueta o tag. Figura 6: Elementos HTML Fuente: WaSehoos ., tps:iLyi3gpGwmé Como se puede ver en la figura anterior, nos encontramos con un conjunto de elementos HTML, por ejemplo, , y

. Estos elementos son los tags (etiquetas). Notemos algo importante en ellos. Todos comienzan con el caracter de apertura < y culminan con >. También podemos notar que tenemos un tag

y, luego del texto, el tag

La mayoria de los tags necesitan su apertura (

) y su cierre (

) para que el documento quede correctamente estructurado. Dicho en otras palabras, solo el texto «My first paragraph» se visualiza segiin el efecto que producird la etiqueta

.HTML, entonces, cuenta con un conjunto amplio de etiquetas, las cuales podemos ir agrupando segtin sus funcionalidades. Elementos de encabezado del documento Los elementos de encabezado de! documento son etiquetas que definen informacién interna del documento y no se muestran en el navegador. Algunas de las etiquetas que existen, se presentan ena tabla 2. Tabla 2: Tags de encabezado Etiqueta Descripcién Requiere clerre <> stitle> Indica e! titulo del documento HTML. Si Define los metadatos de! documento, Podemos definir diferentes metadatos, No. (juego de caracteres a utlizar en el documento). (descripcién del documento), (palabras claves que el documento va a desarrollar). (autor del documento). Carga de estios (CSS) que se ullizaran en el documento, por ejemplo: No. , todas se incluyen dentro de la etiqueta (etiqueta que define el encabezado del documento). Elementos contenedores Los elementos contenedores son aquellos que formaran la estructura basica del documento, es decir, harén de contenedor a otros elementos, lo cual permitira posicionarlos segin sea necesario.Tabla 3: Tags contenedores Etiqueta

Descripcién Requiere cierre < Representa un contenedor introductorio, Mayormente, lo ulillzaremos para mostrar contenidos Si. Cen la parte superior de nuestra pagina. Determina secciones individuales dentro del documento y, muchas veces, es la etiqueta que Si. mas se utliza, Permite crear secciones internas, es muy similar a la etiqueta

(division) si. Contenedor que indicaremos al final de nuestra pagina, Si Fuente: elaboracién propia Elementos de representacién de texto Los elementos de representacién de texto causan diferentes efectos en los textos que vemos, cambian su tamafio, producen saltos de Iineas, etc. Tabla 4: Tags de representacién de texto Etiqueta KhtP >

Descripcién Requiere cierre <> Denota un énfasis en el texto (va cambiando su tamario). Ejemplo: Si. Hola Mundosiht>

Hola Mundo

Hola Mundo

Cuanto menor sea el valor numérico, mayor tarnafio tomara el texto. Roprosenta las letras on negrta, si Letras en curva si Subrayade. si. Sato de linea. No. Indica un pérrafo de texto. Al clere de esta etiqueta, se realiza un salto de tinea si El texto sora una cita 0 comentario si Simula el texto como un cédigo de programacién. Si Se comporta como una etiqueta informativa; generalmente, la utllzaremos en nuestros Si formulatis. Fuente: elaboracién propia, Elementos de accién Tabla 5: Tags elementos de accién EtiquetaDeserip Requiere clerre <> Esta etiqueta se conoce como link (enlace), ya que su funcionalidad es cambiar el documento Si. actual y abrir otro Ejemplo: Ir a Google El fink puede ser extemo al servidor que estamos consultando. Asimismo, también puede ser interno y podemos abrir otra pagina dentro de 6! Grafica un botén para multiples acciones. Si Fuente: elaboracién propia, Elementos multimedia Sirven para mostrar contenido multimedia: imagenes, audios, videos, entre otros. Tabla 6: Tags elementos multimedia Etiqueta Descripcién 2 clerre <> Muestra una imagen en el navegador. Ejemplo: No. Define un lienzo en el que posremos grafcar figuras geoméiticas, st Fuente: elaboracisn propia Elementos de formularios Los elementos de formularios son un conjunto de elementos que permiten al usuario ingresar 0 seleccionar datos. Tabla 7: Tags formularios Etiqueta Descripcién Requiere cierre <> _—Cudles son tus colores favoritos Rojo olores”> Azul ‘ Verde Cudles es tu color favorito Azul /erde” nam ‘colores"> Verde textarea> Ingreso de texto en mitiples lineas, Si . Si Ejemplo:  Rojo Verde Azul Envia los datos del formulario al servidor. Es importante aciarar que debe poser Si las pro sdades type y submit < Enviar Fuente: elaboracién propia, Tabla 8: Tags tablas EtiquetaDescripcién _Indicamos que queremos construir una tabla. Indicamos que queremos construir una tabla con un encabezado. —_ Generamos columnas dentro de la cabeza (head) de la tabla. Indicamos que queremos construir el cuerpo de la tabla,

__Generamos columnas dentro del cuerpo de Ia tabla. Se eu Buried urd Suc lle Requiere cierre Si Si Si Si Si Si SiCES at] Screws te BCE Sc Crea cd tes Sag ifelel td tes Sea Cea Pas ed ra Sell Veremos entonces la siguiente tabla en el documento. Tabla 9: Tabla de ejemplo [Fituto 1] frituto 2 [Valor 1 |\Valor 2 [Valor 3 |\Valor 4 [Final 1 |/Final 2 Fuente: elaboracién propia Actividades de repaso Qué es un proyecto web? Una aplicacién cliente-servidor. Una aplicacién mévil Una aplicacién de escritorio. Una aplicacién mainframe.4Cémo se denomina el protocolo que establece reglas que se pueden utilizar para la comunicacién entre clientes y servidores? HTML. JAVA, HTTP. Eons Cuil de los siguientes es un método HTTP valido? GET Lock REMOVE RESTORE Tema 3. Hojas de estilo en cascada Las hojas de estilo en cascada (CSS, cascading style sheets, en inglés) permiten dar formato al contenido HTML de una pagina web. CSS, a diferencia de HTML, no utiliza tags, sino que engloba con llaves los estilos para cada elemento. CSS permite agregar multiples formatos a cada elemento. Supongamos que tenemos en nuestro documento el siguiente cédigo, Mi aplicacién web Podemos cambiar el color del texto, la tipogr una sola declaracién: el color del fondo y el tamario de la fuente enre Cornice font-family: calibri; ees ce) Preece ee } Existen diversas formas de agregar estilos a nuestro documento. Una de ellas es agregando las etiquetas