Aprende sobre desarrollo web

¡Hola! Bienvenido a la zona de aprendizaje de MDN. Si quieres aprender sobre cómo crear tus propias páginas web, sitios o aplicaciones, has venido al lugar indicado.

El objetivo de este área de MDN no es llevarte de «principiante» a «experto», sino de «principiante» a «cómodo» con el desarrollo y diseño web. A partir de ese punto deberías poder abrirte camino, aprendiendo del resto de MDN y de otras fuentes de niveles intermedio hacia avanzado, las cuales asumirán que tienes un vasto conocimiento previamente adquirido.

Si eres del todo un principiante, el desarrollo web puede ser un reto —pero no te preocupes te llevaremos de la mano y te proveeremos suficientes detalles para hacerte sentir cómodo y que aprendas los temas apropiadamente—. Para que te sientas como en casa, ya seas un estudiante (por tu cuenta o como parte de un grupo), un maestro buscando material para sus clases, un aficionado o alguien que simplemente desea entender mejor cómo funcionan las tecnologías web.

Novedades

El contenido del área de aprendizaje se está ampliando con regularidad. Se ha comenzado a guardar notas de publicación del área de aprendizaje para mostrar lo que cambia. ¡Sigue revisando con frecuencia!

Si tienes preguntas sobre temas que te gustaría que se cubrieran o te parece que faltan, envía un mensaje en Discurse, el foro de la comunidad Mozilla (sitio en inglés).

Dónde empezar

Para avanzar, piensa en cuál de las siguientes afirmaciones te describe mejor y ve a la página de inicio enlazada:

Nota: el glosario proporciona definición de términos. Además, si tiene una pregunta específica sobre el desarrollo web, la sección de preguntas frecuentes puede brindar información de gran ayuda.

Entrada aleatoria del glosario

Type
El tipo (typedata type) es una característica of una valor que afecta al tipo de datos que puede almacenar; por ejemplo, en JavaScript un Boolean solo tiene valores true/false, mientras que un String contiene cadenas de texto, un Number contiene números de cualquier tipo, y así sucesivamente.

Temas tratados

La siguiente es una lista de todos los temas tratados en el área de aprendizaje de MDN.

Primeros pasos en la web
Proporciona una introducción práctica al desarrollo de la web para principiantes completos.
HTML
HTML es el lenguaje utilizado para estructurar las diferentes partes del contenido y definir su significado o propósito. Este tema enseña el HTML en detalle.
CSS
CSS es el lenguaje que se utiliza para estilizar y diagramar el contenido web, así como para añadir comportamientos como la animación. Este tema proporciona una amplia cobertura de CSS.
JavaScript
JavaScript es el lenguaje de scripts usado para añadir funcionalidad dinámica a las páginas web. Este tema enseña todo lo esencial necesario para sentirse cómodo con la escritura y la comprensión de JavaScript.
Formularios HTML
Los formularios HTML son un potente instrumento para interactuar con los usuarios; lo más frecuente es que se utilicen para reunir datos de los usuarios, o que les permitan controlar una interfaz de usuario. En los artículos que se enumeran a continuación, se cubrirán todos los aspectos esenciales de la estructuración, el estilo y la interacción con los formularios web.
Accesibilidad
La accesibilidad es la práctica de poner el contenido de la web a disposición del mayor número posible de personas, independientemente de la discapacidad, el dispositivo, la ubicación u otros factores de diferenciación. Este tema te da todo lo que necesitas saber.
Rendimiento web
El rendimiento web es el arte de asegurarse de que las aplicaciones web se descarguen rápidamente y respondan a la interacción del usuario, independientemente del ancho de banda, el tamaño de la pantalla, la red o las capacidades del dispositivo del usuario.
Herramientas y pruebas
Este tema abarca las herramientas que los desarrolladores utilizan para facilitar su trabajo, como las herramientas de prueba de navegadores cruzados, analizadores de errores de código fuente, formateadores, herramientas de transformación, sistemas de control de versiones, herramientas de despliegue y marcos JavaScript del lado del cliente.
Programación del lado servidor
Aunque te concentres en el desarrollo web del lado del cliente, sigue siendo útil saber cómo funcionan los servidores y las características del código del lado del servidor. Este tema proporciona una introducción general a cómo funciona el lado del servidor y tutoriales detallados que muestran cómo construir una aplicación del lado del servidor utilizando dos marcos de trabajo populares: Django (Python) y Express (Node.js).

Obtener los ejemplos de código

Todos los ejemplos de código propuestos en el área de aprendizaje se encuentran disponibles en GitHub. Si quieres puedes copiarlos para tenerlos en tu computador, la manera más fácil es descargar un ZIP de la última rama del código maestro.

Si prefieres copiar el código de una forma más flexible que permita actualizaciones automáticas, puedes seguir estas instrucciones más complejas:

  1. Instala Git en tu máquina. Este es el sistema de control de versiones de software con el que trabaja GitHub principalmente.
  2. Regístrate en GitHub. Es simple y fácil.
  3. Una vez registrado, inicia tu sesión en github.com.
  4. Abre tu consola de comandos (Windows) o terminal (Linux, MacOS X)
  5. Para copiar el repositorio del área de aprendizaje a una carpeta llamada Learning-Area en la ubicacion actual, en la ventana de Terminal o en la línea de comandos, debes usar el siguiente comando.
    git clone https://github.com/mdn/learning-area
  6. Ahora puedes entrar en el directorio y encontrar todos los archivos que estabas buscando (puede ser con el buscador de archivos o el comando cd).

Puedes actualizar el repositorio learning-area con los últimos cambios que se hayan hecho a la versión principal en GitHub con los siguientes pasos:

  1. En tu intérprete de comandos/terminal, ve dentro del directorio learning-area usando cd. Por ejemplo, si estuvieras en el directorio padre:
    cd learning-area
  2. Puedes realizar actualizaciones al repositorio usando el siguiente comando:
    git pull

Contáctanos

Si tienes alguna pregunta o deseas saber hacia dónde ir, Mozilla es una comunidad mundial de entusiastas de la web, incluyendo mentores y profesores, encantados de ayudarte. Ponte en contacto con ellos mediante WebMaker:

Nos gustaría saber más acerca de cualquier cosa que consideres incorrecta o que falte en el sitio, solicitudes de nuevos temas de aprendizaje, solicitudes de ayuda con elementos que no comprendas o cualquier otra pregunta o inquietud. Si estás interesado en ayudar a desarrollar / mejorar el contenido, ¡mira cómo puedes ayudar y ponte en contacto! Estaremos encantados de hablar contigo, ya seas un aprendiz, maestro, desarrollador web experimentado o alguien interesado en ayudar a mejorar la experiencia de aprendizaje.

Necesito ayuda

Si has leído la sección anterior y aún no sabes a dónde ir o tienes alguna pregunta, no dudes en contactar con nosotros de las siguientes maneras:

  1. Envíanos un correo a dev-mdc (sitio en inglés).
  2. Pide ayuda en el canal #mdn del IRC (¿Cómo usar nuestro IRC?) (sitio en inglés).

Si te sientes bloqueado o confundido, puedes encontrar más orientación sobre cómo pedir ayuda en nuestra sección Conseguir ayuda.

Compartir conocimiento

La totalidad del Área de Aprendizaje es construida por nuestros colaboradores. Te necesitamos en nuestro equipo seas un principiante, un profesor, o un experto desarrollador web. Si estás interesado, dale un vistazo a cómo puedes ayudar y te animamos a charlar con nosotros en las listas o el canal IRC. :)

Ver también

Boletín informativo para desarrolladores de Mozilla (sitio en inglés)
Nuestro boletín para desarrolladores web, es un gran recurso para todos los niveles de experiencia.
EXLskills
Cursos gratuitos y abiertos para el aprendizaje de habilidades técnicas, con tutoría y aprendizaje basado en proyectos.
Codecademy (sitio en inglés)
Un sitio interactivo para aprender lenguajes de programación desde cero, muy accesible.
Code.org
Teoría y práctica sobre programación básica, principalmente dirigida a niños y principiantes completos.
freeCodeCamp.org
Este es un sitio interactivo con tutoriales y proyectos para aprender sobre desarrollo web.
Mapa de alfabetización web (sitio en inglés).
Un marco para la alfabetización web básica y las habilidades del siglo XXI, que también proporciona acceso hacia actividades de enseñanza clasificadas por diferentes categoría.
Actividades para docentes (sitio en inglés)
Una serie de actividades de enseñanza para educadores creadas por la Fundación Mozilla, que cubren todo, desde alfabetización web básica y privacidad hasta JavaScript y pirateo de Minecraft.
Edabit
Miles de desafíos interactivos de JavaScript.

Únete a la comunidad de aprendizaje

Selecciona tu método preferido para unirte a la comunidad: