Desarrollo web

Examen final: Lo que debes saber

Temas

  1. Enfoques y aspectos generales del diseño y desarrollo web. Separación de responsabilidades. Desarrollo de front-end y back-end. Diseño responsivo y enfoque Mobile First. Ejemplos de frameworks para el diseño de aplicaciones responsivas. Diseño de Single-Page Applications (SPA). Asynchronous JavaScript and XML (AJAX) para invocar servicios web. 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>, <link>, <script> (y su atributo defer), <style>, <h1>...<h6>, <div>, <span>, <em>, <strong>, <a>, <img>, <p>, <ol>, <ul>, <li>, <table>, <tr>, <th>, <td>, <input>, <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 y for). Manejo de excepciones con try/catch 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 (?.). Funciones predefinidas console.log, setTimeout, JSON.parse y JSON.stringify. Conceptos generales de programación asíncrona: funciones anónimas, callbacks, promesas, async y await.

    • Particularidades de JavaScript del lado del cliente. Función predefinida alert. Uso de variables globales para acceder elementos de HTML a partir de su id. Uso de las propiedades innerText, innerHTML y value. Visibilización y ocultamiento de elementos de una página HTML. Uso de objetos de tipo XMLHttpRequest para invocar servicios web del lado del servidor.

    • Particularidades de 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 y json. 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 SQL.

  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.

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: Una vez iniciado el examen, no se permite compartir ningún artículo con alguien más.

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

Ejemplos de pregunta

  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. Escribe el código requerido de HTML y JavaScript 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.

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