Referencia de Frontend

web dev

IA

Tiempo de lectura:

Publicado:

Aquí hay una lista de conceptos que puedes buscar si quieres aprender distintos niveles de las tecnologías que usamos en Desarrollo Web.

Esta lista fue generada por IA.

Si quieres ver la ruta de estudios creada por nosotros, puedes encontrarla en Rutas.

Tecnologías base

HTML

Nivel Básico

  1. Estructura de un Documento HTML: Entenderemos el esqueleto básico incluyendo <!DOCTYPE html>, <html>, <head> y <body>.
  2. Etiquetas y Elementos HTML: Aprenderemos el uso de etiquetas básicas como <h1> a <h6>, <p>, <a>, <img>, <ul>, <ol>, <li>, <div> y <span>.
  3. Atributos: Conoceremos atributos como id, class, src, href y alt.
  4. Creación de Enlaces: Aprenderemos a crear hipervínculos usando la etiqueta <a> para navegar entre páginas.
  5. Incorporación de Imágenes: Usaremos la etiqueta <img> para insertar imágenes en una página web.
  6. Listas: Crearemos listas ordenadas (numeradas) y no ordenadas (con viñetas).
  7. Tablas Básicas: Construiremos tablas simples con <table>, <tr>, <th> y <td>.

Nivel Intermedio

  1. Formularios: Construiremos formularios interactivos con <input>, <label>, <textarea>, <button> y varios tipos de controles de formulario.
  2. HTML Semántico: Emplearemos elementos semánticos como <section>, <article>, <aside>, <header> y <footer> para una mejor estructura y accesibilidad.
  3. Entidades HTML: Usaremos entidades de caracteres para incluir caracteres especiales en nuestro contenido HTML.
  4. IFrames: Incorporaremos contenido externo dentro de un elemento iframe.
  5. Accesibilidad: Implementaremos prácticas web accesibles con texto alternativo para imágenes y etiquetado adecuado de formularios.
  6. Metaetiquetas: Utilizaremos metaetiquetas para definir la descripción de la página, palabras clave, autor del documento y otros metadatos.

Nivel Avanzado

  1. Atributos Avanzados: Entenderemos atributos globales como contenteditable, data-*, style, tabindex y title.
  2. Audio y Video: Incorporaremos archivos de audio y video en nuestras páginas web con las etiquetas <audio> y <video>.
  3. Imágenes Responsivas: Usaremos atributos como srcset y el elemento <picture> para una entrega responsiva de imágenes.
  4. Microdatos: Aprenderemos a usar microdatos para ayudar a los motores de búsqueda a analizar la página web y entender mejor su contenido.
  5. APIs HTML: Nos familiarizaremos con las APIs Web disponibles en HTML5 como Geolocalización, Arrastrar y Soltar, Almacenamiento Local, etc.
  6. SVG y Canvas: Aprenderemos a usar SVG para gráficos vectoriales y el elemento <canvas> para dibujar gráficos mediante scripting.
  7. Plantillas: Utilizaremos las etiquetas <template> y <slot> para plantillas de marcado que pueden renderizarse con JavaScript.
  8. Estructura Global e Internacionalización: Comprenderemos la importancia de especificar el idioma del documento y la codificación de caracteres, usando los atributos lang y charset.

CSS

Nivel Básico

  1. Sintaxis CSS: Entenderemos la estructura del CSS (selectores, propiedades y valores).
  2. Selectores: Aprenderemos a seleccionar elementos basados en su nombre, clase, id, atributos y más.
  3. Colores: Conoceremos cómo aplicar colores usando nombres, códigos hex, RGB, RGBA y HSL.
  4. Fuentes y Texto: Estableceremos tipos de fuentes, tamaños, alturas de línea y alineación de texto.
  5. El Modelo de Caja: Comprenderemos el padding, los bordes, los márgenes y cómo afectan al diseño.
  6. Fondos: Aplicaremos colores de fondo, imágenes y gradientes.
  7. Técnicas Básicas de Diseño: Utilizaremos propiedades de flotación y posición para diseñar elementos.

Nivel Intermedio

  1. Flexbox: Aprenderemos a crear diseños flexibles y responsivos con el módulo de Flexbox de CSS3.
  2. Grid: Comprenderemos el diseño de rejilla CSS para crear diseños complejos bidimensionales.
  3. Media Queries: Utilizaremos media queries para diseño responsivo, adaptando la presentación a diferentes tamaños de pantalla.
  4. Pseudo-Clases y Pseudo-Elementos: Estilizaremos estados específicos de elementos y partes de elementos como :hover, :before y :after.
  5. Transiciones y Animaciones: Crearemos transiciones suaves entre estados de CSS y animaciones basadas en keyframes.
  6. Diseño Responsivo: Aprenderemos las mejores prácticas para hacer que los diseños web funcionen en cualquier dispositivo.
  7. Funciones CSS: Usaremos funciones como calc(), var() y attr() para un CSS dinámico.

Nivel Avanzado

  1. Selectores Avanzados: Utilizaremos selectores complejos como los pseudo-clases de hijo, hermano y estructurales.
  2. Propiedades Personalizadas (Variables CSS): Crearemos valores reutilizables con variables de CSS.
  3. Técnicas Avanzadas de Diseño: Implementaremos diseños avanzados y modernos usando múltiples columnas, flexbox y grid.
  4. Diseño Responsivo Avanzado: Crearemos tipografía fluida, imágenes flexibles y técnicas de control de diseño.
  5. Optimización del Rendimiento: Entenderemos cómo escribir CSS eficiente que asegure un rendimiento fluido.
  6. Preprocesadores: Usaremos preprocesadores como Sass o LESS para escribir CSS más mantenible y escalable.
  7. Arquitectura CSS: Implementaremos metodologías como BEM, OOCSS o SMACSS para estructurar nuestro CSS en proyectos más grandes.
  8. Frameworks y Bibliotecas CSS: Nos familiarizaremos con frameworks como Bootstrap, Foundation o Tailwind CSS para un desarrollo rápido.
  9. Componentes Web: Estilizaremos el shadow DOM de los componentes web, usando ::shadow y :host.
  10. Accesibilidad: Nos aseguraremos de que nuestros estilos mejoren la accesibilidad, como alto contraste y navegación por teclado.

JavaScript

Nivel Básico

  1. Sintaxis y Declaraciones: Entenderemos la sintaxis básica, incluyendo variables, operadores, tipos de datos y expresiones.
  2. Funciones: Aprenderemos a declarar y usar funciones, entender el alcance y el hoisting.
  3. Manipulación del DOM: Nos familiarizaremos con el Modelo de Objeto del Documento (DOM) y cómo usar JavaScript para manipular la página web.
  4. Eventos: Manejaremos interacciones de usuario con oyentes de eventos (por ejemplo, clics, movimientos del ratón, pulsaciones de teclas).
  5. Control de Flujo: Utilizaremos declaraciones condicionales (if, else, switch) y bucles (for, while).
  6. Arrays y Objetos: Comprenderemos cómo crear y usar arrays y objetos para almacenar datos.
  7. AJAX Básico: Usaremos XMLHttpRequest o fetch para hacer solicitudes asíncronas y cargar y publicar datos desde/hacia un servidor.

Nivel Intermedio

  1. Características de ES6+: Nos familiarizaremos con la sintaxis y características más nuevas de JavaScript como let, const, funciones flecha, literales de plantilla y desestructuración.
  2. Funciones Avanzadas: Profundizaremos en funciones de orden superior, cierres y IIFE (Expresiones de Función Invocadas Inmediatamente).
  3. JavaScript Asíncrono: Entenderemos el bucle de eventos, promesas, async/await y el manejo de operaciones asíncronas.
  4. Manejo de Errores: Aprenderemos a usar try-catch para el manejo de errores y a lanzar errores personalizados.
  5. APIs Web: Exploraremos APIs como la API de Archivos, API de Canvas o API de Geolocalización.
  6. Modularidad: Entenderemos los sistemas de módulos (CommonJS, AMD, módulos ES6) y cómo estructurar el código para su mantenibilidad.
  7. Transpilación y Agrupación: Utilizaremos herramientas como Babel y Webpack para transpilar JavaScript moderno

Nivel Avanzado

  1. Patrones Avanzados: Dominaremos patrones de diseño (por ejemplo, patrón Módulo, Observador, Singleton) y patrones arquitectónicos (por ejemplo, MVC, MVP, MVVM).
  2. Programación Funcional: Comprenderemos los conceptos de programación funcional en JavaScript como funciones puras, inmutabilidad y composición funcional.
  3. Gestión del Estado: Aprenderemos patrones y bibliotecas de gestión de estado (por ejemplo, Redux, MobX).
  4. Pruebas: Escribiremos pruebas para nuestro código JavaScript utilizando frameworks de pruebas como Jest o Mocha.
  5. Comprobación de Tipos: Utilizaremos TypeScript o Flow para la comprobación de tipos estática en JavaScript.
  6. Optimización del Rendimiento: Entenderemos las consideraciones de rendimiento de JavaScript, la gestión de memoria y las técnicas de optimización.
  7. Seguridad: Aprenderemos sobre vulnerabilidades web comunes (por ejemplo, XSS, CSRF) y cómo prevenirlas en JavaScript.
  8. Frameworks y Bibliotecas Avanzados: Profundizaremos nuestro conocimiento en frameworks y bibliotecas de JavaScript como React, Angular, Vue.js o Svelte, y sus ecosistemas.
  9. Aplicaciones Web Progresivas (PWAs): Entenderemos los service workers, las estrategias de caché y cómo crear aplicaciones web capaces de funcionar sin conexión.
  10. JavaScript en el Servidor: Exploraremos Node.js para el desarrollo del lado del servidor, comprendiendo la arquitectura orientada a eventos, streams y la construcción de APIs RESTful.

Comentarios