Cursos de diseño y desarrollo web

Fórmate con nuestros cursos de diseño y desarrollo web en tecnologías fundamentales como CSS, HTML y JavaScript. Domina técnicas de usabilidad y accesibilidad para crear sitios web atractivos y funcionales para tus usuarios. Explora nuestros cursos y tutoriales gratuitos, que ofrecen ejemplos prácticos, resúmenes de contenido, tests autoevaluativos y otros recursos indispensables actualizados para tu aprendizaje y desarrollo profesional.

searchclose
Diseño y Usabilidad

Accesibilildad

8 lecciones
En el Curso de Accesibilidad Web, abordarás desde los conceptos fundamentales hasta las pautas de accesibilidad WCAG. Aprenderás a hacer imágenes, enlaces y tablas accesibles, así como a utilizar herramientas de análisis de accesibilidad web. Además, practicarás con ejercicios para mejorar la accesibilidad de tus proyectos online.
searchclose
1 LECCIÓN

Tutorial accesibilidad web

Tutorial accesibilidad web: aplica los principios de accesibilidad web en tus proyectos y contribuye a un internet más inclusivo y accesible.
2 LECCIÓN

Pautas de accesibilidad para el contenido en la web WCAG

Las Pautas de Accesibilidad para el Contenido Web (WCAG) cubren un amplio rango de recomendaciones para crear contenido Web más accesible
3 LECCIÓN

Cómo hacer imágenes accesibles

Cómo hacer imágenes accesibles: utiliza atributos 'alt' descriptivos y texto cercano para ofrecer una experiencia inclusiva.
4 LECCIÓN

Cómo hacer enlaces accesibles

Aprende cómo hacer enlaces accesibles con texto descriptivo y tamaño adecuado, atributos 'title' y asegurando un orden lógico.
5 LECCIÓN

Cómo hacer tablas accesibles

Tablas accesibles: Aprende a crear tablas con atributos 'headers', 'scope', y etiquetas 'caption' para mejorar la accesibilidad.
6 LECCIÓN

Cómo hacer formularios accesibles

Formularios accesibles: Para garantizar la accesibilidad de los formularios, es importante seguir ciertas pautas y buenas prácticas.
7 LECCIÓN

Herramientas de evaluación, análisis y testeo de accesibilidad web

Te presentamos varias herramientas de evaluación, análisis y testeo de accesibilidad web para ayudarte a determinar si tu web es accesible.
8 LECCIÓN

Ejercicios sobre accesibilidad web. Problemas comunes y soluciones

Serie de retos o ejercicios sobre accesibilidad web que nos ayudan conseguir un desarrollo web lo más accesible posible y dar solución a problemas comunes.
Bootstrap

Bootstrap 4

10 lecciones
En este curso de Bootstrap 4, comenzaremos desde lo básico, aprendiendo cómo instalarlo, para que puedas empezar a trabajar de inmediato. A medida que avancemos, te familiarizarás con el sistema de columnas y contenedores de Bootstrap 4, que te permitirá crear diseños flexibles y adaptables con facilidad. Además, profundizaremos en aspectos cruciales del diseño web y veremos distintos componentes y plantillas
searchclose
1 LECCIÓN

Frameworks de diseño web responsive CSS

Existe en el mercado una amplia variedad de frameworks de diseño web responsive que nos facilitan la tarea de crear nuestras interfaces gráficas.
2 LECCIÓN

Cómo descargar e instalar Bootstrap 4

Bootstrap se puede instalar de formas diferentes. En esta sección veremos los dos métodos más utilizados: utilizando su CDN y descargando el código en local.
3 LECCIÓN

Sistema de columnas y contenedores o rejillas de Bootstrap 4

Bootstrap permite diseñar páginas web mediante un sistema de columnas o rejillas que nos ayudan en la disposición del contenido y su adaptación a los diferentes dispositivos
4 LECCIÓN

Texto, tipografía y colores en Bootstrap 4

Bootstrap define estilos predeterminados para prácticamente todas las etiquetas HTML. Veamos los estilos de los textos, las tipografías y los colores.
5 LECCIÓN

Tablas en Bootstrap 4

Repasemos las clases que nos ofrece Bootstrap 4 para dar estilo fácilmente a las tablas de nuestras páginas web.
6 LECCIÓN

Imágenes en Bootstrap 4

Veamos las clases que nos ofrece Bootstrap 4 para dar estilo fácilmente a las imágenes de nuestras páginas web.
7 LECCIÓN

Botones en Bootstrap 4

Repasemos las clases que nos ofrece Bootstrap 4 para dar estilo fácilmente a los botones de nuestra página web. Disponemos de varias clases.
8 LECCIÓN

Componentes de Bootstrap 4

Bootstrap nos da la posibilidad de utilizar diferentes componentes que podemos insertar en nuestros proyectos. Por ejemplo: menús de navegación, carousels y tablas de precios, entre otros.
9 LECCIÓN

Plantillas y temas gratis para Bootstrap

Bootstrap ofrece diferentes plantillas con las que podemos comenzar nuestros diseños rápidamente y después podemos ir añadiendo todos los elementos que necesitemos.
10 LECCIÓN

Referencias y recursos Bootstrap

Accede a las referencias y recursos de Bootstrap para estar al día de las últimas novedades de uno de los frameworks más utilizados.
Bootstrap

Bootstrap 5

15 lecciones
Aprende sobre las diferencias clave entre Bootstrap 4 y Bootstrap 5, descubre cómo descargar e instalar la última versión, y domina el uso de contenedores, filas y columnas para crear diseños flexibles y adaptables. Exploraremos temas como colores, textos, tablas, imágenes, botones, bordes, padding y margin, así como la integración de componentes personalizables para agregar funcionalidad a tus proyectos.
searchclose
1 LECCIÓN

Tutorial Bootstrap 5

Aprende Bootstrap 5 desde cero: Tutorial completo sobre la creación de sitios web modernos y responsivos con este poderoso framework CSS.
2 LECCIÓN

Frameworks de diseño CSS más utilizados 2023

Descubre los frameworks de diseño CSS más populares en 2023 y cómo facilitan la creación de sitios web modernos y atractivos.
3 LECCIÓN

Versiones de Bootstrap

Explora las diferentes versiones de Bootstrap y sus mejoras a lo largo del tiempo para crear sitios web impresionantes y receptivos.
4 LECCIÓN

Diferencias entre Bootstrap 4 y Bootstrap 5

Descubre las diferencias clave entre Bootstrap 4 y Bootstrap 5, dos versiones del popular framework CSS, para elegir el más adecuado.
5 LECCIÓN

Descargar e instalar Bootstrap 5

Bootstrap se puede instalar de formas diferentes. En esta sección veremos los dos métodos más utilizados: utilizando su CDN y descargando el código en local.
6 LECCIÓN

Contenedores, filas y columnas en Bootstrap 5

Domina la estructura de diseño de Bootstrap 5 con contenedores, filas y columnas. Crea diseños responsivos y fluidos para tus proyectos web.
7 LECCIÓN

Colores en Bootstrap 5

Descubre la paleta de colores de Bootstrap 5 y cómo aplicarlos en tus diseños para lograr una apariencia atractiva y coherente.
8 LECCIÓN

Textos en Bootstrap 5: clases para darles estilo

Clases para dar estilo a los textos en Bootstrap 5. Personaliza el aspecto del texto con facilidad y crea diseños atractivos.
9 LECCIÓN

Tablas en Bootstrap 5: clases para darles estilo

Tablas en Bootstrap 5: Crea tablas responsivas y estilizadas con las clases predefinidas de Bootstrap 5 para organizar y presentar datos.
10 LECCIÓN

Imágenes en Bootstrap 5: clases para darles estilo

Clases para dar estilo a las imágenes en Bootstrap 5: Descubre las opciones de diseño para resaltar y mejorar la presentación de imágenes.
11 LECCIÓN

Botones en Bootstrap 5: clases para darles estilo

Clases para dar estilo a los botones en Bootstrap 5: Explora las opciones de diseño y personalización para crear botones atractivos.
12 LECCIÓN

Bordes, padding y margin en Bootstrap 5

Descubre cómo dar forma y espaciado a tus elementos con las clases de bordes, padding y margin en Bootstrap 5.
13 LECCIÓN

Componentes en Bootstrap 5

Descubre los componentes de Bootstrap 5 que facilitan la creación de interfaces web modernas y atractivas.
14 LECCIÓN

Plantillas y temas gratis para Bootstrap 5

Las plantillas y temas gratuitos para Bootstrap 5 te permitirán crear sitios web de manera rápida y sencilla.
15 LECCIÓN

Resumen de clases Bootstrap 5. Cheat sheet (chuleta)

Resumen de clases y componentes de Bootstrap 5. Una referencia estilo chuleta (cheat sheet) rápida para diseñar sitios web responsivos.
CSS y Sass

CSS Nivel avanzado

22 lecciones
Explora CSS avanzado con nuestro curso. Desde propiedades personalizadas hasta gradientes y transformaciones dinámicas, aprende técnicas sofisticadas para estilizar tus proyectos web. Domina CSS Grid, funciones matemáticas y más para crear diseños flexibles y visualmente impactantes.
searchclose
1 LECCIÓN

CSS Grid para maquetar contenido con rejillas o cuadrículas

CSS Grid nos ayuda a maquetar nuestra página web mediante cuadrículas o rejillas (grids) totalmente configurables mediante estilos CSS.
2 LECCIÓN

Centrar horizontal y verticalmente en CSS un elemento

Existen diferentes maneras de centrar horizontal y verticalmente un elemento mediante CSS. A continuación se describen las técnicas más destacadas.
3 LECCIÓN

El modo oscuro y claro con CSS: conoce prefers-color-scheme

Implementa el modo oscuro y claro en tu sitio web mediante CSS, HTML y JavaScript. Aprende a utilizar la propiedad prefers-color-schememe.
4 LECCIÓN

Animaciones CSS: Uso de keyframes con la propiedad animation

En este apartado veremos cómo hacer animaciones en CSS utilizando la propiedad animation, sus subpropiedades y la secuencia @keyframes.
5 LECCIÓN

Funciones matemáticas en CSS

CSS ofrece funciones matemáticas que se pueden utilizar para realizar cálculos y manipular valores numéricos en propiedades CSS.
6 LECCIÓN

Variables CSS, propiedades personalizadas o custom properties

Las variables CSS, también llamadas custom properties (propiedades personalizadas) nos permiten definir nombres para valores de propiedades.
7 LECCIÓN

Gradientes en CSS: gradiente lineal y radial

Los gradientes nos permiten añadir efectos de colores degradados en nuestros diseños. Disponemos de dos tipos de gradientes: lineal y radial.
8 LECCIÓN

Filtros en CSS para aplicar efectos en imágenes

Los filtros CSS permiten aplicar efectos visuales a las imágenes. Para aplicar un filtro CSS a una imagen se utiliza la propiedad filter.
9 LECCIÓN

Transiciones en CSS, estilos diferentes entre estados

Las transiciones nos permiten aplicar un cambio de estilo gradual a los estilos que hemos ido viendo hasta ahora o aplicar estilos diferentes entre estados.
10 LECCIÓN

Transformaciones en CSS: rotar, torcer, escalar o deplazar

Las transformaciones CSS nos permiten rotar, torcer, escalar o desplazar los elementos de nuestra página web. Las dos propiedades que nos sirven para definir las transformaciones son transform y transform-origin.
11 LECCIÓN

Tooltip en CSS: Pasos para crear tooltips

Un tooltip es una pequeña ventana emergente que se muestra al colocar el cursor sobre un elemento. Veamos los pasos para crear tooltips.
12 LECCIÓN

Preprocesadores CSS: Less y Sass

Mediante los preprocesadores CSS se desarrollan estilos más mantenibles y con una sintaxis más rica. Los ficheros son parecidos a los de CSS y deben compilarse.
13 LECCIÓN

Tutorial de Sass

Con este curso de Sass, aprenderás a optimizar el desarrollo de sitios web y aplicaciones, creando estilos flexibles y reutilizables.
14 LECCIÓN

Prácticas CSS de páginas web completas

Prácticas CSS de páginas completas y proyectos específicos realizadas en clase de forma guiada.
15 LECCIÓN

Chuleta CSS (cheat sheet) Nivel avanzado

Aquí tienes una chuleta CSS (cheat sheet) de las propiedades que hemos visto a lo largo del capítulo avanzado de CSS.
16 LECCIÓN

Tipografía fluida CSS Clamp: Textos según el tamaño de pantalla

Optimiza la legibilidad en tu diseño web con la tipografía fluida CSS Clamp, adaptando los textos al tamaño de pantalla de forma eficiente.
17 LECCIÓN

CSS line-clamp: Cómo acortar texto a un número de líneas

Descubre cómo usar CSS line-clamp para truncar texto a un número específico de líneas y mejorar la legibilidad en tu diseño web.
18 LECCIÓN

Scroll Snap en CSS: Controla el desplazamiento o scroll de tu web

Controla el desplazamiento o scroll de tu web con Scroll Snap en CSS, una función que permite un desplazamiento suave y centrado en secciones.
19 LECCIÓN

Blend Modes CSS: Mezcla los colores de elementos superpuestos

Aprende qué son los Blend Modes CSS y mezcla colores de elementos superpuestos para crear efectos visuales en tus diseños web.
20 LECCIÓN

Hyphens CSS: Separar palabras con guiones al final de línea

¿Sabes que la propiedad CSS hyphens mejora el aspecto de tus textos al permitir la separación de palabras con guiones al final de línea?
21 LECCIÓN

CSS scroll-behavior: desplazamiento suave entre marcadores

CSS scroll-behavior: Descubre cómo hacer que la navegación en tu sitio web sea más agradable con el desplazamiento suave entre marcadores.
22 LECCIÓN

Exámenes HTML y CSS avanzado

Haz exámenes de CSS y HTML avanzado para perfeccionar tus habilidades en diseño web. Incluye ejemplos resueltos y desafíos prácticos.
CSS y Sass

CSS Nivel inicial

26 lecciones
En el Curso CSS Inicial, aprenderás desde qué es CSS hasta cómo aplicar estilos usando selectores y unidades de medida. Conocerás propiedades para manipular colores, texto, fuentes, listas y tablas, así como el modelo de cajas y cómo controlar el tamaño y posición de los elementos. También abordarás conceptos como pseudo-clases, menús horizontales, y resolverás problemas comunes como el excedente de contenido y espacios entre elementos.
searchclose
1 LECCIÓN

¿Qué es CSS (Cascading Style Sheets)?

CSS (Cascading Style Sheets) es un lenguaje que nos permite controlar el aspecto de las páginas web escritas en HTML o en cualquier lenguaje basado en XML.
2 LECCIÓN

¿Cómo aplicar estilos CSS en un documento HTML?

Hay tres formas de aplicar estilos CSS en un documento HTML: en línea, incrustado en la cabecera y con hojas de estilo externas. Veamos cada una de ellas.
3 LECCIÓN

Tipos de selectores en CSS

Veamos cuáles son los selectores básicos que podemos utilizar en CSS: selector universal, selector etiqueta, slector identificador y selector clase.
4 LECCIÓN

Unidades de medida en CSS

Los valores de las propiedades se pueden expresar en diferentes unidades de medida: longitudes absolutas, longitudes relativas y mediante porcentajes.
5 LECCIÓN

Colores y fondo en CSS, atributos y propiedades

Veamos cuáles son los atributos o propiedades de los estilos CSS más utilizados relacionados con los colores y los fondos.
6 LECCIÓN

Propiedades de texto en CSS

Las propiedades de los textos son las que permiten controlar el texto como bloque, es decir, afectan al interlineado, la separación entre palabras, tabulado.
7 LECCIÓN

Propiedades de las fuentes en CSS

Las propiedades CSS de las fuentes son las que permiten controlar el tamaño, el tipo, el grosor o el estilo de las letras entre otras cosas.
8 LECCIÓN

Propiedades de las listas en CSS

Las propiedades CSS de las listas son las que nos permiten controlar los estilos de los marcadores, la posición de los elementos dentro de las listas...
9 LECCIÓN

Propiedades de las tablas en CSS

Las propiedades CSS de las tablas nos permiten controlar los estilos de los títulos de la tabla, el tamaño de las celdas, las filas y las columnas, etc.
10 LECCIÓN

Pseudo-clases y pseudo-elementos en CSS

Gracias a las pseudo-clases de CSS podemos realizar una selección específica de los elementos a los que queremos aplicar un cierto estilo.
11 LECCIÓN

Prefijos CSS de los navegadores

Actualmente los navegadores tienen implementadas muchas de las nuevas características de CSS3 utilizando sus propios prefijos.
12 LECCIÓN

Modelo de cajas: márgenes, relleno y bordes

Cualquier elemento incluido en un documento HTML dispone de una estructura tipo caja que se puede modificar usando las propiedades CSS.
13 LECCIÓN

Propiedades width, height, max-width, min-height...

Veamos cómo usar las propiedades CSS width, height, max-width y min-height para controlar el tamaño de los elementos en una página web.
14 LECCIÓN

Posición y comportamiento de contenedores en CSS

En este apartado vamos a repasar el comportamiento de los contenedores en CSS. Para ello veremos las propieades position, display o z-inde, entre otras.
15 LECCIÓN

Cómo crear un menú horizontal en HTML y CSS

En esta sección del tutorial de CSS veremos paso por paso cómo crear un menú horizontal desde cero mediante HTML y CSS.
16 LECCIÓN

Estilos en formularios CSS, propiedades necesarias

Gracias a los estilos podemos romper el diseño gris con líneas negras de los formularios y convertirlos en una parte más que se integra perfectamente en nuestro diseño web.
17 LECCIÓN

Buenas prácticas CSS

Seguir unas buenas prácticas a la hora de crear estilos CSS hace que el código sea más claro y legible tanto para ti y como para tus compañeros de proyecto.
18 LECCIÓN

Herramientas útiles, tests de verificación CSS y referencias

Utilizar los recursos más apropiados es imprescindible para desarrollar con el mayor éxito cualquier página web. Veamos varias herramientas útiles...
19 LECCIÓN

Comprueba tu conocimiento sobre CSS en este test

Comprueba tu progreso de aprendizaje de estilos CSS con el test que tenemos preparado.
20 LECCIÓN

Propiedad CSS overflow, excedente de contenido

La propiedad overflow (desbordamiento o excedente) nos permite controlar el comportamiento del contenido que se encuentra en una caja o contenedor.
21 LECCIÓN

Tabla resumen de propiedades CSS y sus valores

Visualiza una tabla resumen de las propiedades CSS que hemos visto a lo largo del capítulo. Incluye su descripción y los valores que soporta.
22 LECCIÓN

Ejercicios resueltos CSS

Domina CSS con nuestra sección de ejercicios resueltos. Aprende y practica creando estilos efectivos para páginas web.
23 LECCIÓN

Espacio entre elementos inline-block en HTML y CSS

Solucionando el Espacio Entre Elementos en línea-bloque (display: inline-block;) en HTML y CSS con comentarios, flotantes, Flexbox y CSS Grid.
24 LECCIÓN

Problemas con flotantes en CSS y sus soluciones

Explora los problemas comunes al usar flotantes en CSS y aprende soluciones efectivas. Mejora tu comprensión y tus habilidades de CSS.
25 LECCIÓN

Nombres de clases en CSS: mejores prácticas y ejemplos

Descubre las mejores prácticas para nombrar clases en CSS, desde la elección de separadores hasta la importancia de la claridad en el código.
26 LECCIÓN

Unidades vh y vw en CSS

Unidades vh y vw en CSS: Aprende cómo utilizar las unidades vh y vw para crear diseños que sea adapatan según el tamaño del viewport.
CSS y Sass

CSS Nivel intermedio

14 lecciones
En el Curso CSS Intermedio, profundizarás en medios en CSS, como medios queries, y aprenderás a trabajar con cursores, botones, sombras, y el selector de atributos. Dominarás herramientas de inspección de elementos, formatos de fuentes y flexbox para diseñar de manera más eficiente y práctica.
searchclose
1 LECCIÓN

Tipos de diseño web CSS ¿cuál utilizo?

A la hora de crear una interfaz web existen diferentes tipos de diseño: diseño con tamaño fijo, diseño. Es importante mencionar que estos métodos se pueden utilizar de forma combinada. Veamos cada uno de estos métodos.
2 LECCIÓN

Medios en CSS

Las hojas de estilos CSS permiten definir diferentes estilos para diferentes medios o dispositivos: pantallas, impresoras, proyectores, televisores, etc.
3 LECCIÓN

Media queries CSS para cumplir las necesidades del diseño responsive

Las media queries se introdujeron en CSS3 para dar respuesta a las necesidades del diseño web responsive. Mediante ellas podemos definir estilos condicionales, aplicables únicamente en determinadas situaciones.
4 LECCIÓN

Flexbox, modelo de caja flexible en CSS

El módulo de caja flexible o flexbox nos ofrece un mecanismo con el que dividir el espacio disponible en la ventana, y crear las filas y columnas necesarias para la implementación del diseño de una página web.
5 LECCIÓN

Cursores en CSS

En CSS, los cursores se utilizan para cambiar la apariencia del cursor del ratón cuando se encuentra sobre un elemento interactivo.
6 LECCIÓN

Botones CSS: Dando estilo a los botones

Los botones CSS ofrecen flexibilidad para crear diseños únicos y atractivos en tus páginas web. Veamos algunos ejemplos.
7 LECCIÓN

Formatos de las fuentes en CSS y utilización de repositorios

Veamos ahora los diferentes formatos de las fuentes y qué métodos tenemos para incorporarlos en nuestros proyectos web. Además conoceremos las ventajas de utilizar el repositorio de fuentes de Google Fonts.
8 LECCIÓN

Selector de atributos en CSS

Los selectores de atributos permiten elegir elementos HTML en función de sus atributos y/o valores de esos atributos.
9 LECCIÓN

Sombras CSS en texto y contenedores o cajas

Mediante las propiedades de CSS3 "text-shadow" y "box-shadow" podemos aplicar sombras en los textos y los contenedores para enriquecer nuestras interfaces.
10 LECCIÓN

Tabla resumen de propiedades CSS y sus valores

Visualiza una tabla resumen de las propiedades CSS que hemos visto a lo largo del capítulo. Incluye su descripción y los valores que soporta.
11 LECCIÓN

Ejercicios prácticos CSS Intermedio

Practica tus habilidades CSS con estos ejercicios prácticos en el que se repasan los conceptos estudiados durante el curso.
12 LECCIÓN

Inspeccionar elementos en el navegador para encontrar errores

Inspecciona elementos con el navegador con las DevTools para diagnosticar y resolver problemas de CSS y HTML.
13 LECCIÓN

Cómo insertar una imagen SVG en HTML y CSS

Aprende a insertar gráficos vectoriales SVG con CSS y HTL. Además, aprende a cambiar sus propiedades: el color, tamaño, opacidad...
14 LECCIÓN

Cómo insertar iconos de Google Fonts en un sitio web

Descubre cómo insertar iconos de Google Fonts Icons en tu sitio web para mejorar su estética y usabilidad.
Entornos

CodePen

1 LECCIÓN
El Tutorial de CodePen te guiará desde la introducción hasta el uso avanzado de esta plataforma. Aprenderás a crear, compartir y incrustar pens, proyectos y colecciones. También explorarás funcionalidades como agregar archivos CSS y JS, y usar Bootstrap para potenciar tus proyectos en CodePen.
searchclose
XML y otros formatos

DTD

2 lecciones
En este tutorial, aprenderás cómo crear un DTD, cómo definir elementos y atributos, y cómo establecer reglas de validación para garantizar la integridad y la coherencia de tus documentos XML. Descubrirás cómo especificar la estructura jerárquica de los elementos, cómo definir los tipos de datos permitidos y cómo establecer restricciones y relaciones entre ellos. Además, exploraremos las diferentes opciones y características avanzadas de los DTD, como la definición de entidades, la inclusión de elementos externos y la reutilización de definiciones.
searchclose
Diseño y Usabilidad

Diseño de interfaces

16 lecciones
El Curso de Diseño de Interfaces explora desde la evolución del diseño web hasta los componentes y elementos visuales de una interfaz. Aprende sobre interacción persona-ordenador, guías de estilo, prototipos y herramientas como Figma.
searchclose
1 LECCIÓN

Módulo Diseño de Interfaces Web

El módulo Diseño de Interfaces Web se encuadra dentro del ciclo formativo de grado superior Desarrollo de Aplicaciones Web.
2 LECCIÓN

Evolución del diseño web

Vamos a conocer la evolución del diseño web a lo largo de los años. Desde la creación de páginas estáticas hasta las últimas tendencias.
3 LECCIÓN

Interacción persona-ordenador (IPO)

La interacción persona-ordenador es la disciplina que estudia cómo se produce la interacción entre las personas y los sistemas informáticos.
4 LECCIÓN

Elementos de identificación, navegación, contenidos e interacción

La interfaz web es el medio por el que se comunican los usuarios con un sitio web y está compuesta de numerosos elementos que dependen de su complejidad.
5 LECCIÓN

Componentes de una interfaz web

Conocer el nombre de cada uno de los componentes de una interfaz web es esencial ya que forma parte del vocabulario técnico utilizado.
6 LECCIÓN

Elementos conceptuales: punto, línea, plano y volumen

Un diseñador de interfaces web debe conocer los conceptos básicos del diseño y utilizar un lenguaje común que describa de manera genérica los elementos.
7 LECCIÓN

Elementos visuales: forma, medida, color, textura

En el artículo anterior vimos los elementos básicos conceptuales que nos permiten crear formas de todo tipo. Estos elementos básicos con los que podemos crear elementos más complejos tienen unas características visuales, que son la forma, la medida, el color y la textura.
8 LECCIÓN

Elementos de relación: dirección, posición, espacio, gravedad

En este artículo vamos a ver los elementos de relación que nos ayudan a definir la ubicación y la relación entre las distintas formas.
9 LECCIÓN

Elementos prácticos: representación, significado y función

Los elementos prácticos son aquellos que tienen una interpretación subjetiva y a los que podemos dotar de un significado. Los elementos prácticos son la representación, el significado y la función.
10 LECCIÓN

Guía de estilo, importancia en el diseño de interfaces web

Las guías de estilo recogen los criterios y normas que deben seguir los desarrolladores de un sitio web para que tenga una apariencia uniforme y atractiva.
11 LECCIÓN

Prototipos en el diseño de interfaces web

Los prototipos son esenciales en el diseño de interfaces web, permiten probar y mejorar la usabilidad y funcionalidad antes del lanzamiento.
12 LECCIÓN

Mapas conceptuales, mapas de navegación y sitemaps

Los mapas de navegación sirven para representar la arquitectura de las páginas de un sitio web. Tal y como los mapas conceptuales, los mapas de navegación se pueden representar de forma gráfica.
13 LECCIÓN

Interfaz web usable, visual, educativa y actualizada

A la hora de diseñar un sitio web debemos tener en cuenta las características de su interfaz: usable, visual, educativa y actualizada.
14 LECCIÓN

Tutorial Figma

Tutorial Figma: Aprende a utilizar Figma para diseñar interfaces digitales de manera colaborativa. Descubre sus funcionalidades principales.
15 LECCIÓN

Diferencia entre wireframe, mockup, prototype y sketch

Comprende las diferencias entre wireframe, mockup, prototype y sketch en el diseño web para optimizar tu proceso creativo.
16 LECCIÓN

Tipos de fuentes en diseño web

Explora los tipos de fuentes en diseño web, incluyendo serif, sans-serif, script, decorativas y monoespaciadas.
Entornos

Figma

1 LECCIÓN
En este tutorial de Figma, aprenderemos a utilizar la herramienta para crear un prototipo sencillo y una guía de estilo básica. Además veremos la importancia de utilizar Figma y los tipos de cuenta que ofrece.
searchclose
HTML

HTML

17 lecciones
El Curso HTML te sumerge en el lenguaje de marcado, desde su estructura básica hasta elementos semánticos, formularios y tablas de contenido. Aprenderás sobre marcadores, factores clave para SEO, metainformación, cierre de etiquetas y más. Los ejercicios resueltos y las herramientas de verificación te ayudarán a dominar HTML y a aplicar las normas de HTML5.
searchclose
1 LECCIÓN

Introducción a los lenguajes de marcado o de marcas

Un lenguaje de marcado es un sistema de codificación que utiliza etiquetas y marcadores para definir la estructura de un documento.
2 LECCIÓN

Lenguaje de marcas HTML

El lenguaje de marcas es un tipo de lenguaje de programación que no tiene funciones aritméticas o variables. HTML es un ejemplo de este lenguaje.
3 LECCIÓN

HTML5, estructura básica y elementos semánticos

La última versión del lenguaje de programación HTML es el HTML5. Las webs implementadas en HTML5 no se visualizan correctamente en navegadores antiguos.
4 LECCIÓN

Etiquetas html de contenido y texto

En este apartado vamos a ver dos tipos de etiquetas HTML: las etiquetas que agrupan el contenido y las etiquetas que contienen fragmentos de texto.
5 LECCIÓN

Etiquetas para la creación de formularios HTML

Los formularios son el soporte en el que se integran los botones y las áreas de texto que se utilizan para que los usuarios introduzcan sus datos.
6 LECCIÓN

Etiquetas html para crear tablas de contenido

Las tablas de contenido nos permiten almacenar los datos de forma ordenada. En este punto veremos cómo se crean tablas de contenido en HTML.
7 LECCIÓN

Etiquetas html para el contenido incrustado

El contenido HTML incrustado se utiliza para mostrar recursos externos como, por ejemplo, mapas, previsiones meteorológicas, fórmulas matemáticas, imágenes.
8 LECCIÓN

Elementos de ordenación

Para crear nuestros propios estilos necesitamos conocer cómo se ordenan los elementos en HTML5. Vamos a ver las características más importantes de los elementos de ordenación.
9 LECCIÓN

Marcadores en HTML. Enlaces locales para movernos fácilmente

Al crear una página web muy larga es útil crear marcadores o enlaces locales que nos permitan saltar directamente a una parte de la página
10 LECCIÓN

Factores HTML clave para el SEO

El W3C es el encargado de estandarizar el lenguaje HTML y en su plataforma nos ofrece varias herramientas e información muy valiosa.
11 LECCIÓN

Test de verificación HTML y herramientas útiles

El W3C es el encargado de estandarizar el lenguaje HTML y en su plataforma nos ofrece varias herramientas e información muy valiosa.
12 LECCIÓN

Metainformación en HTML

La metainformación en HTML se utiliza para proporcionar información adicional sobre un documento HTML. Veamos las etiquetas más comunes.
13 LECCIÓN

Configuración metaetiqueta viewport, web responsive

La declaración viewport nos permite definir los parámetros de visualización de un página web en los diferentes dispositivos.
14 LECCIÓN

Resumen de etiquetas HTML

Resumen de elementos y etiquetas que se han ido viendo a lo largo de la segunda unidad del módulo de Desarrollo de Interfaces Web.
15 LECCIÓN

Ejercicios resueltos HTML

Ejercicios resueltos HTML: Pon a prueba tus conocimientos y habilidades con las prácticas que te proponemos en este artículo.
16 LECCIÓN

Reglas y normas HTML5

Aplicando las siguientes reglas y normas de HTML, puedes crear código más limpio, más legible y más confiable.
17 LECCIÓN

Cierre de etiquetas en HTML5: Uso del slash o barra inclinada

Cierre de etiquetas en HTML5: Explora el uso del slash o barra inclinada en etiquetas normales y de autocierre para un código claro y válido.
HTML

HTML Inglés

11 lecciones
Aprende HTML con este curso en inglés. En este curso aprenderás qué es el lenguaje de marcado y aprenderás sobre marcadores, factores clave para SEO, metainformación, cierre de etiquetas y muho más. Los ejercicios resueltos y las herramientas de verificación te ayudarán a dominar HTML y a aplicar las normas de HTML5.
searchclose
1 LECCIÓN

HTML: HyperText Markup Language

HTML, which stands for HyperText Markup Language, is the standard markup language used for creating web pages.
2 LECCIÓN

HTML Semantic tags

Semantic tags in HTML provide meaning to the structure of a web page. They enhance accessibility and search engine optimization.
3 LECCIÓN

HTML Content and text tags

HTML Content and Text tags: Learn the essentials of HTML and explore the power of text formatting with HTML tags.
4 LECCIÓN

HTML Form tags

HTML Form tags: Capture user input with the tags form, input, select, and more. Build interactive and user-friendly web forms easily.
5 LECCIÓN

HTML Table tags

HTML Table tags: Learn how to create structured data with the tags table, tr, td, and more. Organize and display content efficiently.
6 LECCIÓN

HTML tags for embedding content

Embed multimedia effortlessly with HTML tags. Include images, videos, audio, iframes, and more to enhance your web content
7 LECCIÓN

Page jumping, anchor links or jump links

HTML Page Jumping: Use anchor links to create jump links within a page for easy navigation. Enhance user experience.
8 LECCIÓN

Metadata or meta tags in HTML

Metadata in HTML is used to provide additional information about an HTML document. This information is not displayed directly on the web page
9 LECCIÓN

HTML validation

Metadata in HTML is used to provide additional information about an HTML document. This information is not displayed directly on the web page
10 LECCIÓN

Ordered elements in HTML5

HTML elements can be categorized as either block-level elements or inline elements based on their default display behavior.
11 LECCIÓN

HTML. Technical vocabulary skills

Are you ready to test your technical vocabulary skills in HTML? Let's dive into some exercises to reinforce your knowledge!
Hardware

Hardware

6 lecciones
En este curso de hardware veremos los fundamentos esenciales que hacen funcionar a las computadoras modernas. Abordaremos temas clave como la representación y comunicación de la información, los diferentes tipos de microprocesadores, la función y tipos de memoria interna, el papel crucial de la placa base y el uso de dispositivos periféricos de entrada/salida.
searchclose
JavaScript y librerías

JQuery

1 LECCIÓN
jQuery es una librería JavaScript que facilita tareas habituales como son acceso al DOM, manipulación de CSS, manejo de eventos, desarrollo de efectos y animaciones, interacciones con AJAX, etc. Es de software libre y de código abierto y su objetivo es ahorrar tiempo y espacio en desarrollo en comparación con el uso de JavaScript directamente.
searchclose
XML y otros formatos

JSON

1 LECCIÓN
En este tutorial, exploraremos el mundo de JSON (JavaScript Object Notation), un formato de intercambio de datos ampliamente utilizado en aplicaciones web y móviles. Comenzaremos por comprender los conceptos básicos de JSON, incluyendo su sintaxis y estructura. Aprenderemos cómo representar datos simples y complejos en JSON. Luego, veremos las técnicas de conversión de datos de XML a JSON y viceversa.
searchclose
XML y otros formatos

Markdown

1 LECCIÓN
El tutorial de Markdown ofrece una introducción a esta sintaxis de formato de texto ligero. Aprenderás cómo utilizar Markdown para dar formato a tu texto de manera sencilla y eficiente. El tutorial abordará los conceptos básicos de Markdown, incluyendo encabezados, párrafos, listas, enlaces e imágenes. Además, te mostrará cómo integrar fragmentos de código y resaltar texto. Con este tutorial, estarás en camino de crear documentos limpios y bien estructurados utilizando Markdown.
searchclose
XML y otros formatos

RSS

1 LECCIÓN
RSS es un formato de sindicación de contenido web que permite a los usuarios recibir actualizaciones de sitios web y blogs en un único lugar. RSS es un fichero XML que contiene ciertos elementos que lo definen y que serán reconocidos por los navegadores, así como por lectores de feeds. A través de este tutorial de RSS, podremos comprender cómo funcionan los feeds RSS, su estructura y cómo se utilizan para compartir información en la web.
searchclose
Diseño y Usabilidad

SEO

1 LECCIÓN
En este tutorial de posicionamiento online SEO, te adentrarás en el mundo del Search Engine Optimization (SEO). A lo largo de este curso, veremos las técnicas, estrategias y herramientas esenciales que te ayudarán a mejorar la visibilidad y el ranking de tu sitio web en los motores de búsqueda.
searchclose
CSS y Sass

Sass

1 LECCIÓN
Descubre el Curso de Sass, donde aprenderás desde los elementos básicos como variables, anidamiento y funciones, hasta la compilación de Sass tanto por línea de comandos como en editores en línea. Además, conocerás recomendaciones y realizarás ejercicios prácticos para dominar Sass y mejorar tus habilidades de desarrollo web.
searchclose
JavaScript y librerías

Sonido, vídeo y animaciones

7 lecciones
En este curso aprenderemos a trabajar con los elementos de audio y video de HTML. Para poder controlar estos elementos de nuestro reproductor usaremos JavaScript y aprovecharemos los nuevos métodos, propiedades y eventos incorporados.
searchclose
Diseño y Usabilidad

Usabilidad

9 lecciones
En el Curso de Usabilidad, explorarás desde el concepto hasta las pautas y principios fundamentales. Aprenderás sobre la atomización de la usabilidad, diferentes tipos de pruebas y estudios de casos para comprender cómo mejorar la experiencia del usuario en tus proyectos.
searchclose
1 LECCIÓN

12 Leyes de la experiencia de usuario UX

Las 12 leyes más importantes de la experiencia de usuario UX. Las reglas que nos sirven de guía para generar percepciones positivas.
2 LECCIÓN

Inspiración para el diseño web: recursos online imprescindibles

Estar al tanto de las últimas tendencias sobre diseño web es una de las prácticas de inspiración de los mejores profesionales.
3 LECCIÓN

La usabilidad en el diseño de aplicaciones

La usabilidad en el diseño consiste en facilitar al usuario la utilización de una interfaz de la forma más fácil e intuitiva. A continuación exponemos algunas de las reglas básicas de la usabilidad.
4 LECCIÓN

Relación entre colores y marcas: psicología del color

Gracias a la psicología del color sabemos que los colores son capaces de transmitir emociones. El color es muy utilizado en la creación de una marca...
5 LECCIÓN

Pruebas en el navegador con Selenium IDE. Testing

Selenium IDE es una extensión que nos permite crear toda clase de tests para comprobar el correcto funcionamiento de aplicaciones web.
6 LECCIÓN

Wireflows, qué son y cómo crearlos - herramientas útiles

Los wireflows permiten a los diseñadores visualizar el flujo de trabajo de la aplicación y detectar posibles problemas o áreas de mejora. 
7 LECCIÓN

La importancia del diseño UX/UI en el mundo digital

Una interfaz de usuario bien diseñada no solo hace que un producto sea atractivo, sino que también mejora la usabilidad y la funcionalidad.
8 LECCIÓN

Mejores libros en español para aprender usabilidad

Aprender sobre usabilidad con libros es una estupenda forma de adquirir conocimientos y destrezas en el diseño de productos digitales.
9 LECCIÓN

Tutorial de usabilidad web

Con este tutorial de usabilidad web tendrás el conocimiento necesario para crear interfaces intuitivas, fáciles de usar y atractivas.
Entornos

Visual Studio Code

2 lecciones
En este curso de Visual Studio Code, veremos todo lo necesario para utilizar VS Code. Verás cómo, instalarlo, personalizar la interfaz de usuario, editar código, depurar problemas y utilizar atajos de teclado y extensiones.
searchclose
Vocabulario técnico para web

Vocabulario técnico

10 lecciones
En este curso de vocabulario en inglés y español, nos centraremos en mejorar tus habilidades lingüísticas relacionadas con el diseño y desarrollo web. A lo largo del curso, estudiaremos diferentes áreas de vocabulario específicas para esta disciplina.
searchclose
1 LECCIÓN

Curso: Vocabulario técnico en inglés para desarrolladores

Mejora tu comunicación y comprensión técnica con nuestro curso de vocabulario en inglés para diseñadores y desarrolladores web.
2 LECCIÓN

Vocabulario inglés: Signos, símbolos o caracteres especiales

Mejora tu comunicación técnica con nuestra sección de vocabulario en inglés sobre signos, símbolos o caracteres especiales.
3 LECCIÓN

Vocabulario inglés: Texto y formato

Explora vocabulario y términos clave en inglés y español sobre texto y formato como 'emphasized text' o 'line break'.
4 LECCIÓN

Vocabulario inglés: terminología del teclado

Explora el vocabulario de teclado en inglés. Aprende sobre los términos relacionados con las teclas y su función en esta sección.
5 LECCIÓN

Vocabulario inglés: Diseño de aplicaciones y elementos de interfaz

Descubre el vocabulario en inglés sobre diseño y elementos de interfaz. Explora términos clave para comprender el mundo del diseño digital.
6 LECCIÓN

Vocabulario inglés: términos de programación y desarrollo web

Explora términos esenciales de programación y desarrollo web en ejercicios interactivos. Mejora tu comprensión y habilidades en este campo.
7 LECCIÓN

Vocabulario inglés: Acrónimos sobre tecnología y desarrollo

Descubre acrónimos clave en inglés utilizados en tecnología y desarrollo. Amplía tu conocimiento en este campo especializado.
8 LECCIÓN

Vocabulario de informática general en inglés y español

Lista de vocabulario de informática general en inglés y español con definiciones para comprender conceptos clave relacionados.
9 LECCIÓN

Verbos en inglés/español usados en informática

Explora los verbos de acciones para interactuar con software, tanto en inglés como en español y mejora tu vocabulario de términos técnicos.
10 LECCIÓN

110 términos en inglés/español para diseñadores y desarrolladores

Aprende términos esenciales en inglés para diseñadores y desarrolladores. Amplía tu vocabulario y mejora tu comprensión del campo tecnológico.
WordPress

Wordpress

9 lecciones
Veamos todo lo relacionado con Wordpress: cómo se instala, cómo utilizar su panel de administración o cómo incorporar una tienda online mediante WooCommerce, entre oros.
searchclose
1 LECCIÓN

Gestores de contenido: los CMS más utilizados

Los gestores de contenido CMS nos dan la facilidad de crear, editar y publicar contenido sin saber programación. Veamos los más utilizados actualmente
2 LECCIÓN

Diferencias entre Wordpress.org y Wordpress.com

Wordpress.org y Wordpress.com son dos plataformas populares para la creación y gestión de sitios web. Veamos sus diferencias.
3 LECCIÓN

Descargar e instalar Wordpress en local: pasos a seguir

En este post vamos a aprender de forma detallada cómo instalar Wordpress en local.
4 LECCIÓN

Instalar Wordpress con Docker Compose

Instala WordPress rápidamente con Docker y Docker Compose: una solución eficiente y escalable para instalar y desplegar tu sitio web.
5 LECCIÓN

Instalar WordPress en la nube de AWS con Docker

Despliega WordPress en AWS usando Docker para una solución flexible y escalable de gestión de contenido web.
6 LECCIÓN

Administrar Wordpress desde el panel de control

Descubre cómo administrar WordPress eficientemente desde el panel de control: acceso, configuraciones, publicaciones, páginas...
7 LECCIÓN

Mejores plugins de Wordpress

Descubre los mejores plugins para WordPress: funcionalidades avanzadas, diseño personalizado y optimización SEO.
8 LECCIÓN

Tutorial WooCommerce

Aprende a crear tu tienda en línea con Woocommerce, el plugin de WordPress líder para el comercio electrónico.
9 LECCIÓN

Cómo monetizar tu página web o blog

Si quieres monetizar tu página web o blog, es muy importante que busques los sistemas que te ofrezcan una mayor rentabilidad.
XML y otros formatos

XML

11 lecciones
Este curso de XML es el inicio de una serie de tutoriales en los que exploraremos diversos aspectos del lenguaje XML y sus tecnologías asociadas. A lo largo de esta serie, también cubriremos temas como XSD, DTD y XPath, que te permitirán profundizar en la validación y manipulación de documentos XML.
searchclose
1 LECCIÓN

Curso XML (eXtensible Markup Language)

Descubre en este artículo la fascinante "Introducción a XML": su estructura, etiquetas, y cómo se utiliza para organizar y compartir información de manera eficiente.
2 LECCIÓN

Cómo se escribe un documento XML: Sintaxis

Aprende a crear documentos XML, el lenguaje de marcado que permite organizar y estructurar datos de manera eficiente. Descubre los elementos, atributos y reglas para escribir un XML bien formado. ¡Domina esta poderosa herramienta de intercambio de información!
3 LECCIÓN

Cómo se crea un documento XML

Aprende paso a paso cómo crear un documento XML, un lenguaje de marcado utilizado para estructurar datos de forma jerárquica. Aprende
4 LECCIÓN

Caracteres especiales en XML

Los caracteres especiales en XML, como <, > y &, deben ser reemplazados por entidades, para asegurar la correcta interpretación del documento.
5 LECCIÓN

Cómo asociar un archivo CSS a un documento XML

Averigua cómo vincular un archivo CSS a tu documento XML y logra un diseño atractivo y consistente. Mejora la presentación visual de XML.
6 LECCIÓN

Secciones CDATA en XML

Descubre cómo utilizar las secciones CDATA en XML para incluir contenido especial sin problemas de interpretación por el parser.
7 LECCIÓN

Documentos XML bien formados y válidos

Los documentos XML bien formados y válidos son fundamentales para garantizar la integridad y consistencia de la información.
8 LECCIÓN

Espacios de nombres en XML

Los espacios de nombres en XML permiten organizar y distinguir elementos con el mismo nombre en diferentes contextos.
9 LECCIÓN

Ejercicios resueltos XML

Ejercicios prácticos resueltos sobre XML. Aprende a crear documentos, utilizar espacios de nombres y aplicar validación en XML.
10 LECCIÓN

Vocabulario relacionado con XML en inglés y español

Ejercicios prácticos resueltos sobre XML. Aprende a crear documentos, utilizar espacios de nombres y aplicar validación en XML.
11 LECCIÓN

Lenguajes de Marcas y Sistemas de Gestión de Información

El módulo Lenguajes de Marcas y Sistemas de Gestión de la Información se encuadra dentro de los Ciclos Formativos en DAW, DAM y ASIR.
XML y otros formatos

XPath

2 lecciones
En este tutorial de XPath exploraremos los conceptos fundamentales de este lenguaje de consulta y navegación para documentos XML. Aprenderemos cómo utilizar XPath para localizar y seleccionar elementos y atributos específicos dentro de un documento XML. También abordaremos los diferentes tipos de nodos, como nodos de elemento, atributos o texto. Veremos cómo utilizar operadores y predicados para refinar nuestras consultas y seleccionar datos de manera más precisa.
searchclose
XML y otros formatos

XSD

1 LECCIÓN
El Tutorial de XSD (XML Schema Definition, Definición de Esquema XML) es una excelente continuación después de aprender sobre XML, DTD y XPath. XSD es un lenguaje de esquema que se utiliza para definir la estructura y las restricciones de un documento XML. En este tutorial, exploraremos los conceptos fundamentales de XSD y cómo se utiliza para validar y describir la estructura de un documento XML. Aprenderás a definir elementos, atributos, tipos de datos, restricciones, etc.
searchclose
XML y otros formatos

XSLT

1 LECCIÓN
En este tutorial de XSLT (Extensible Stylesheet Language Transformations) veremos como transformar y presentar documentos XML utilizando XSLT. XSLT es un lenguaje de programación declarativo que nos permite realizar manipulaciones complejas en la estructura y contenido de un documento XML. El Tutorial de XSLT es una excelente continuación después de aprender sobre XML, DTD, XSD y XPath.
searchclose

// Cursos de diseño y desarrollo web

Si estás buscando adquirir habilidades en diseño y desarrollo web, estás en el lugar correcto. Nuestros cursos te proporcionarán una base sólida en CSS, HTML y JavaScript, además de enseñarte técnicas avanzadas para crear sitios web atractivos y funcionales.

// Tecnologías de diseño y desarrollo web
  • Bootstrap
  • codepen
  • css3
  • figma
  • HTML5
  • javascript
  • jquery
  • json
  • Markdown
  • rss
  • Sass
  • Wordpress
  • xml