Tutoriales

Los enlaces en esta página conducen a una variedad de tutoriales y materiales de capacitación. Ya sea que esté comenzando, aprendiendo los conceptos básicos o sea un experto en desarrollo web, aquí puede encontrar recursos útiles para las mejores prácticas.

Estos recursos son creados por empresas y desarrolladores web con visión de futuro que han adoptado estándares abiertos y mejores prácticas para el desarrollo web y que proporcionan o permiten traducciones, a través de una licencia de contenido abierto como Creative Commons.

Para principiantes en la Web

Primeros pasos en la Web

Primeros pasos en la Web es una serie concisa que te presenta los aspectos prácticos del desarrollo web. Configurarás las herramientas que necesitas para construir una sencilla página web y publicar tu propio código.

Tutoriales HTML

Nivel introductorio

Introducción a HTML

Este módulo prepara el escenario, acostumbrándolo a conceptos y sintaxis importantes, analizando la aplicación de HTML al texto, cómo crear hipervínculos y cómo usar HTML para estructurar una página web.

Referencia de Elementos HTML

Una referencia completa sobre elementos HTML y cómo los implementan los diferentes navegadores.

Crear una página web sencilla con HTML

Una guía HTML para principiantes que incluye explicaciones de etiquetas comunes, incluidas las etiquetas HTML. También incluye una guía paso a paso para crear una página web básica con ejemplos de código.

Desafíos HTML

Utilice estos desafíos para perfeccionar sus habilidades HTML (por ejemplo, "¿Debería usar un elemento <h2> o un elemento <strong>?"), enfocándose en un marcado significativo.

Nivel intermedio

Multimedia e inserción

Este módulo explora cómo usar HTML para incluir multimedia en sus páginas web, incluidas las diferentes formas en que se pueden incluir imágenes y cómo incrustar video, audio e incluso otras páginas web completas.

Tablas HTML

Representar datos tabulares en una página web de una manera accesible y comprensible puede ser un desafío. Este módulo cubre el marcado básico de tablas, junto con funciones más complejas, como la implementación de subtítulos y resúmenes.

Nivel avanzado

Formularios en HTML

Los formularios son una parte muy importante de la Web: brindan gran parte de la funcionalidad que necesita para interactuar con sitios web, por ejemplo, registrarse e iniciar sesión, enviar comentarios, comprar productos y más. Este módulo lo ayuda a comenzar a crear las partes del lado del cliente de los formularios.

Consejos para la creación de páginas HTML de carga rápida

Optimice las páginas web para proporcionar un sitio más receptivo para los visitantes y reducir la carga en su servidor web y conexión a Internet.

Tutoriales CSS

Nivel introductorio

CSS básico

CSS (Hojas de Estilo en Cascada) es el código que usas para dar estilo a tu página web. CSS Básico te lleva a través de lo que tú necesitas para empezar. Contestará a preguntas del tipo: ¿Cómo hago mi texto rojo o negro? ¿Cómo hago que mi contenido se muestre en tal y tal lugar de la pantalla? ¿Cómo decoro mi página web con imágenes de fondo y colores?

Primeros pasos en CSS

CSS (Cascading Style Sheets - en español Hojas de Estilo en Cascadas) es usado para darle estilo y diseño a las páginas Web — por ejemplo, para cambiar la fuente de letra, color, tamaño y el espaciado de tu contenido; dividir en múltiples columnas, o agregar animaciones y otras propiedades decorativas. Este modulo provee un inicio suave para tu ruta de aprendizaje hacia el dominio de CSS con su funcionamiento básico, como luce su sintaxis, y cómo puedes comenzar a utilizarlo y añadir estilo a HTML.

Bloques de construcción CSS

Este módulo retoma donde Primeros pasos en CSS finalizó — ahora que estás familiarizado con el lenguaje y su sintaxis, y que tienes algo de experiencia en su uso, es hora de bucear un poco más profundo. Este módulo se centra en el estilo en cascada de css y en el concepto de herencia, también veremos todos los tipos de selectores, unidades, tamaños, estilos de fondo, bordes, debugging y mucho más.

El objetivo aqui es proveerte de herramientas para que puedas escribir código CSS competentemente y ayudarte a entender lo escencial de la teoría antes de centrarnos en disciplinas más específicas como text styling y CSS layout.

Selectores CSS

Apunte a elementos HTML, incluso según el estado del elemento, con CSS.

Especificidad

Comprender el algoritmo del navegador para determinar qué declaraciones CSS se aplican a un elemento cuando hay declaraciones compitiendo, con un cuestionario de especificidad

Cascada y herencia

El objetivo de este artículo es desarrollar la comprensión de algunos de los conceptos fundamentales de CSS (cascada, especificidad y herencia) que controlan cómo se aplica el CSS al HTML y cómo se resuelven los conflictos.

Estilo de texto

Aquí analizamos los fundamentos del estilo del texto, incluida la configuración de fuente, negrita y cursiva, espaciado entre líneas y letras, sombras paralelas y otras características del texto. Completamos el módulo analizando la aplicación de fuentes personalizadas a su página y el estilo de listas y enlaces.

Preguntas frecuentes sobre CSS

Preguntas y respuestas comunes para principiantes.

Nivel intermedio

Diseño CSS

Llegados a este punto, hemos examinado los fundamentos básicos de CSS: cómo dar estilo al texto y cómo manipular las cajas que incluyen tu contenido. Llegó el momento de explorar cómo colocar tus cajas en el lugar que elijas con respecto a la ventana principal y el resto de cajas. Hemos cubierto ya los prerrequisitos necesarios, así que vamos a sumergirnos en la maquetación CSS, fijándonos en diferentes configuraciones de visualización, métodos de maquetación tradicionales que implican floats y posicionamiento, así como a nuevas herramientas de maquetación en voga, como flexbox.

Referencia CSS

Referencia completa a CSS, con detalles sobre el soporte de Firefox y otros navegadores.

Rejillas fluidas

Diseñe diseños que cambien de tamaño con fluidez con la ventana del navegador, sin dejar de utilizar una cuadrícula tipográfica.

Desafíos CSS

Pon a prueba tus habilidades de CSS y descubre dónde necesitas más práctica.

Nivel avanzado

Uso de CSS transforms

Aplique rotación, inclinación, escala y traducción usando CSS.

Transiciones de CSS

Las transiciones CSS proporcionan una forma de animar los cambios en las propiedades CSS, en lugar de que los cambios surtan efecto instantáneamente.

Tutorial Canvas

Aprenda a dibujar gráficos mediante secuencias de comandos utilizando el elemento lienzo (canvas).

Tutoriales de JavaScript

Nivel introductorio

Primeros pasos con JavaScript

En nuestro primer módulo de JavaScript, primero respondemos algunas preguntas fundamentales como "¿qué es JavaScript?", "¿cómo se ve?" y "¿qué puede hacer?", antes de pasar avanzar en la guía por tu primera experiencia práctica de escribir JavaScript. Después de eso, explicaremos en detalle algunos bloques de construcción clave, tal como variables, cadenas, números y arreglos.

Elementos básicos de JavaScript

En este módulo, continuamos nuestra cobertura de todas las características clave de JavaScript, tornando nuestra atención a tipos de código comúnmente encontrados tales como enunciados condicionales, bucles (loops), funciones, y eventos. Ya has visto estas cosas en este curso, pero solo de pasada aquí lo hablaremos mas explícitamente.

Fundamentos de JavaScript

¿Qué es JavaScript y cómo puede ayudarte?

Codecademy

Codecademy es una manera fácil de aprender a codificar JavaScript. Es interactivo y puedes hacerlo con tus amigos.

freeCodeCamp

freeCodeCamp enseña una variedad de lenguajes y frameworks para el desarrollo web. También cuenta con un foro, una estación de radio por Internet y un blog.

Nivel intermedio

Introducción a los objetos JavaScript

En JavaScript, la mayoría de las cosas son objetos, desde características del núcleo de JavaScript como arrays hasta el explorador APIs construído sobre JavaScript. Incluso puedes crear tus propios objetos para encapsular funciones y variables relacionadas dentro de paquetes eficientes que actúan como prácticos contenedores de datos. La naturaleza de JavaScript basada-en-objetos es importante de entender, si quieres avanzar con tu conocimiento del lenguaje, y por ello hemos hecho este módulo para ayudarte. Aquí enseñamos teoría de objetos y sintaxis en detalle, y luego veremos como crear tus propios objetos.

API web del lado del cliente

Cuando se escribe JavaScript para sitios web o aplicaciones del lado del cliente, no pasará mucho tiempo antes de que comience a usar APIs ("Application Programming Interfaces"). Estas son interfaces para manipular diferentes aspectos del navegador y el sistema operativo sobre el cuál se esta ejecutando, o incluso datos de otros sitios web o servicios. En este módulo, vamos a aprender que son las APIs y cómo utilizar algunas de las API más comunes que encuentran al momento de desarrollar.

JavaScript elocuente

Una guía completa de metodologías JavaScript intermedias y avanzadas.

Hablando JavaScript

Para programadores que quieran aprender JavaScript de forma rápida y adecuada, y para programadores de JavaScript que quieran profundizar sus habilidades y/o buscar temas específicos.

Patrones de diseño esenciales de JavaScript

Una introducción a los patrones de diseño esenciales de JavaScript.

JavaScript.info: el tutorial de JavaScript moderno

Parte 1: El lenguaje Parte 2: Trabajar con navegadores.

Nivel avanzado

Guía de JavaScript

Una guía completa y actualizada periódicamente de JavaScript para todos los niveles de aprendizaje, desde principiante hasta avanzado.

No conoces JS

Una serie de libros que profundizan en los mecanismos centrales del lenguaje JavaScript.

Jardín de JavaScript

Documentación de las partes más extravagantes de JavaScript.

Explorando ES6

Información confiable y detallada sobre ECMAScript 2015.

Patrones de JavaScript

Una colección de patrones y antipatrones de JavaScript que cubre patrones de funciones, patrones de jQuery, patrones de complementos de jQuery, patrones de diseño, patrones generales, patrones literales y constructores, patrones de creación de objetos, patrones de reutilización de código, DOM.

Cómo funcionan los navegadores

Un artículo de investigación detallado que describe diferentes navegadores modernos, sus motores, representación de páginas, etc.

Vídeos de JavaScript

Una colección de vídeos de JavaScript para ver.

Desarrollo de extensiones

Extensiones del navegador

WebExtensions es un sistema multi-navegador para desarrollar complementos de navegador. En gran medida, el sistema es compatible con la API de extensiones compatible con Google Chrome y Opera. Las extensiones escritas para estos navegadores se ejecutarán en la mayoría de los casos en Firefox o Microsoft Edge con solo algunos cambios. La API también es totalmente compatible con multiproceso Firefox.