Desarrollo web

Examen: Lo que debes saber

Temas

  1. Enfoques y aspectos generales del diseño y desarrollo web
    Separación de responsabilidades. Desarrollo de front-end, back-end y full-stack. Diseño responsivo y enfoque mobile-first. Ejemplos de frameworks para el diseño de aplicaciones responsivas. Diseño de Single-Page Applications (SPA). JavaScript Object Notation (JSON) como formato de transferencia de datos.

  2. Hypertext Markup Language (HTML)
    Concepto de hipervínculo. Estructura de una página web. Elementos y atributos de HTML. Comentarios en HTML. Árbol de DOM (Document Object Model). Esquema de codificación UTF-8. Propósito y forma de uso de los siguientes elementos (etiquetas) de HTML: <!DOCTYPE>, <html>, <head>, <body>, <title>, <meta>, <h1>...<h6>, <div>, <span>, <em>, <strong>, <a>, <img>, <p>, <br>, <ol>, <ul>, <li>, <table>, <tr>, <th>, <td>, <form>, <input>, <textarea>, <label>, <button>, <pre>.

  3. Cascading Style Sheets (CSS)
    Declaración de propiedades. Formas de incorporar CSS en una página web (archivo de CSS externo usando <link>, CSS interno usando <style>, CSS en línea usando el atributo style en un elemento HTML). Selectores de CSS (elemento, clase e ID). Modelo de caja: margen, borde, relleno y contenido. Comentarios en CSS.

  4. JavaScript
    Tipos de datos (booleanos, números flotantes, cadenas de caracteres, arreglos). Operadores aritméticos, lógicos y de comparación, incluyendo los operadores === y !==. Comentarios en JavaScript. Declaración y uso de variables, constantes y funciones (let, const y function) con alcance (scope) local y global. Concepto de hoisting. Enunciados condicionales (if, switch) y de repetición (while, do/while, for y break). Manejo de excepciones con try/catch/finally y throw. Declaración y uso de objetos, acceso a sus propiedades usando la notación de punto (.) y la notación de corchetes ([]). Operador de encadenamiento opcional (?.). Operador de coalescencia nula (??). Funciones predefinidas console.log, setTimeout, parseInt, parseFloat, JSON.parse y JSON.stringify. Conceptos generales de programación asíncrona: funciones anónimas, callbacks, callback hell, promesas, métodos then y catch, palabras clave async y await. Sistema de módulos de ECMAScript (ES modules), mecanismos de exportación e importación de nombres.

    • JavaScript del lado del servidor
      Uso de herramientas de desarrollo para el back-end : node, npm y nodemon. Definición de rutas (endpoints) usando el framework Express para diferentes métodos de HTTP. Uso de los parámetros req y res de las funciones manejadoras de las rutas y sus métodos y propiedades correspondientes: params, status, type, send, render y json. Motor de plantillas Embedded JavaScript (EJS) y sus respectivas etiquetas especiales: <% ... %>, <%= ... %>. Sirviendo archivos estáticos en Express. Uso de process.env para acceder a variables de entorno. Conexión y consultas a una base de datos relacional desde Express. Prevención de ataques de inyección SQL.

    • JavaScript del lado del cliente
      Uso del elemento <script> para agregar código de JavaScript interno y externo (incluyendo el uso del atributo defer) a una página web. Función predefinida alert. Uso del método getElementById para acceder a elementos de HTML a partir de su id. Uso del método addEventListener para asociar eventos a elementos de HTML. Uso de las propiedades innerText, innerHTML y value. Visibilización y ocultamiento de elementos de una página HTML. Uso de la función fetch para invocar un API de servicios web del lado del servidor y la aplicación del mecanismo de seguridad CORS para controlar las peticiones entre diferentes orígenes.

  5. Hypertext Transfer Protocol (HTTP)
    Métodos de HTTP (GET, POST, PUT y DELETE). Request y response. Estructura e información presente en el request line y status line. Códigos de estado del response, rangos de valores (1XX información, 2XX éxito, 3XX redirección, 4XX errores del cliente, y 5XX errores de servidor) y ejemplos comunes. Headers de HTTP y ejemplos comunes. Tipos MIME, propósito y ejemplos comunes. HTTP y HTTPS: diferencias, casos de uso y puertos utilizados por omisión. Servicios web de tipo RESTful. Correspondencia entre operaciones CRUD, métodos HTTP y enunciados de SQL. Conceptos de idempotencia y seguridad en servicios web. Guías generales para diseñar un API de servicios web de tipo RESTful. Ejemplos de herramientas para realizar pruebas de servicios web (curl y Postman).

  6. Amazon Web Services (AWS)
    Generalidades, casos de uso, ventajas y desventajas de los siguientes servicios de AWS: Cloud9 (IDE en la nube), EC2 (Elastic Compute Cloud), RDS (Relational Database Service), Lambda (funciones serverless) y S3 (Simple Storage Service).

Artículos permitidos durante el examen

  1. Pluma, lápiz, borrador, sacapuntas.

  2. Acordeón personal de estudio con las siguientes características:


    1. Debe ser uno de los siguientes:

      • Tarjeta o ficha de trabajo de \(5 \times 8\) pulgadas (\(12.7 \times 20.32\) cm).

      • Media hoja tamaño carta (\(13.97 \times 21.59\) cm).

    2. Debe estar escritas a mano. No se permiten tarjetas/hojas impresas elaboradas en computadora.

    3. Está permitido escribir en ambos lados de la tarjeta/hoja.

    4. Debe incluir matrícula y nombre completo en la esquina superior izquierda de ambos lados de la tarjeta/hoja.

    5. No hay restricciones sobre el contenido específico escrito en la tarjeta/hoja.


NOTA 1: No se permite compartir artículo alguno con alguien más una vez iniciado el examen.

NOTA 2: No está permitido usar teléfono celular, calculadora, tableta, computadora o cualquier otro dispositivo electrónico.

Preguntas ejemplo

  1. ¿Qué significa usar el enfoque de mobile-first al momento de desarrollar una aplicación web?

  2. ¿Cuál es el número de puerto utilizado por omisión para el protocolo HTTP?

  3. Tienes un archivo llamado mis_estilos.css dentro del directorio css que se encuentra en la raíz del directorio público de tu aplicación web. Indica el elemento (etiqueta) de HTML, incluyendo sus atributos con valores, que usarías para importar dicha hoja de estilos en tu página index.html.

  4. Usando los elementos requeridos de HTML, escribe el código de la siguiente lista no ordenada con viñetas:

    1. Leche
    2. Azúcar
    3. Aceite
    4. Galletas

  5. Indica la salida del siguiente programa de JavaScript: 

    console.log('alfa');
setTimeout(() => {
  console.log('beta');
  setTimeout(() => {
    console.log('gamma');
  }, 500);
  console.log('delta');
}, 2000);
setTimeout(() => {
  console.log('épsilon');
}, 3000);
setTimeout(() => {
  console.log('lambda');
}, 1000);
console.log('omega');

  6. La función main del siguiente código de JavaScript utiliza promesas y sus respectivos métodos then y catch. Sin modificar su comportamiento, reescribe la función main para que utilice async y await en lugar de los métodos anteriormente mencionados. 

    function promiseReturningFunction(n) {
  return new Promise((resolve, reject) => {
    if (n > 0) {
      resolve('yes');
    } else {
      reject('no');
    }
  });
}

function main() {
  promiseReturningFunction(2)
  .then(x => {
    console.log(x);
    return promiseReturningFunction(1);
  })
  .then(y => {
    console.log(y);
    return promiseReturningFunction(0);
  })
  .then(z => {
    console.log(z);
  })
  .catch(err => {
    console.log(err);
  });
}

main();

  7. Se tiene una aplicación de Node que cuenta con sus dependencias (express y ejs) ya correctamente instaladas. El código de la aplicación es el siguiente: 

    import express from 'express';

const app = express();
const port = process.env.PORT ?? 8080;
const ip_address = process.env.C9_HOSTNAME ?? 'localhost';

app.set('view engine', 'ejs');

function cosaRara(n) {
  let w = 2;
  const x = [];

  while (x.length < n) {
    let y = true;
    for (const z of x) {
      if (w % z == 0) {
        y = false;
        break;
      }
    }
    if (y) {
      x.push(w);
    }
    w++;
  }
  return x;
}

app.get('/misterio/:n', (req, res) => {
  const n = parseInt(req.params.n) || 0;
  const misterio = cosaRara(n);
  res.render('misterio', { n, misterio });
});

app.listen(port, () => {
  console.log('Servidor escuchando en: '
    + 'http://' + ip_address + ':' + port);
});

    Así mismo, se tiene el siguiente contenido en el archivo views/misterio.ejs: 

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Misterio</title>
</head>
  <body>
    <h1>¿Qué será lo que se imprime a continuación?</h1>
    <p>
      n = <%= n %>
    </p>
    <ol>
      <% for (const m of misterio) { %>
        <li><%= m %></li>
      <% } %>
    </ol>
  </body>
</html>

    Supongamos que la aplicación ya se encuentra corriendo correctamente en la dirección IP 45.60.86.212 utilizando el puerto 8080. Si se coloca en la barra de direcciones de un navegador lo siguiente: 

    http://45.60.86.212:8080/misterio/10

    ¿Cómo se visualizaría la salida correspondiente en dicho navegador?

  8. Escribe el código requerido de HTML y JavaScript (corriendo en el navegador) que permita tener una página web que despliegue dos cosas: 1) un botón, y 2) un mensaje que indique cuántas veces se ha presionado dicho botón.

  9. Explica qué es idempotencia y menciona qué métodos de HTTP son idempotentes.

  10. Necesitas una base de datos MySQL en la nube de AWS. ¿Qué servicio te permitiría simplificar las tareas de administración, como copias de seguridad, parches y escalado?