Cursos de diseño y desarrollo web

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

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.

Frameworks de diseño web responsive CSS

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.

Cómo descargar e instalar 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

Sistema de columnas y contenedores o rejillas de 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.

Texto, tipografía y colores en Bootstrap 4

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

Tablas 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.

Imágenes 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.

Botones en 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.

Componentes de Bootstrap 4

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.

Plantillas y temas gratis para 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.

Referencias y recursos Bootstrap

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

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

Tutorial Bootstrap 5

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.

Frameworks de diseño CSS más utilizados 2023

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

Versiones de Bootstrap

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

Diferencias entre Bootstrap 4 y 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.

Descargar e instalar 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.

Contenedores, filas y columnas 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.

Colores en Bootstrap 5

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

Textos 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.

Tablas 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.

Imágenes 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.

Botones en Bootstrap 5: clases para darles estilo

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

Bordes, padding y margin en Bootstrap 5

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

Componentes en Bootstrap 5

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

Plantillas y temas gratis para Bootstrap 5

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

Resumen de clases Bootstrap 5. Cheat sheet (chuleta)

CSS y Sass

CSS Nivel avanzado

24 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

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

Variables CSS, propiedades personalizadas o custom properties

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

Gradientes en CSS: gradiente lineal y radial

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.

Transiciones en CSS, estilos diferentes entre estados

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.

Transformaciones en CSS: rotar, torcer, escalar o deplazar

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

Animaciones CSS: Uso de keyframes con la propiedad animation

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

Funciones matemáticas en CSS

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

CSS Grid para maquetar contenido con rejillas o cuadrículas

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

Centrar horizontal y verticalmente en CSS un elemento

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.

Tabla resumen de propiedades CSS y sus valores

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

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

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

Tooltip en CSS: Pasos para crear tooltips

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.

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

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.

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

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.

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

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.

CSS scroll-behavior: desplazamiento suave entre marcadores

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

Blend Modes CSS: Mezcla los colores de elementos superpuestos

¿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?

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

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

Filtros en CSS para aplicar efectos en imágenes

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

19 LECCIÓN

Prefijos CSS de los navegadores

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.

20 LECCIÓN

Preprocesadores CSS: Less y Sass

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

21 LECCIÓN

Prácticas CSS de páginas web completas

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

22 LECCIÓN

Chuleta CSS (cheat sheet) Nivel avanzado

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

23 LECCIÓN

Tutorial de Sass

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

24 LECCIÓN

Exámenes HTML y CSS avanzado

CSS y Sass

CSS Nivel inicial

28 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

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.

¿Qué es CSS (Cascading Style Sheets)?

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.

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

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

Tipos de selectores en CSS

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

Unidades de medida 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.

Unidades vh y vw en CSS

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

Colores y fondo en CSS, atributos y propiedades

Aprende a implementar el efecto parallax en tu sitio web con HTML y CSS. Descubre cómo mejorar la experiencia del usuario con esta técnica.

Cómo crear un efecto parallax con HTML y 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.

Propiedades de texto 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.

Propiedades de las fuentes 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...

Propiedades de las listas en CSS

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

Modelo de cajas: márgenes, relleno y bordes

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.

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

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.

Propiedades de las tablas 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.

Posición y comportamiento de contenedores 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.

Pseudo-clases y pseudo-elementos en 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.

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

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

Propiedad CSS overflow, excedente de contenido

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

Espacio entre elementos inline-block en HTML y CSS

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

19 LECCIÓN

Problemas con flotantes en CSS y sus soluciones

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.

20 LECCIÓN

Estilos en formularios CSS, propiedades necesarias

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

21 LECCIÓN

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

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

22 LECCIÓN

Inspeccionar elementos en el navegador para encontrar errores

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.

23 LECCIÓN

Buenas prácticas CSS

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.

24 LECCIÓN

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

Aprende a usar correctamente las rutas de archivos en HTML y CSS y evita errores como usar rutas C:\ que solo funcionan en tu ordenador.

25 LECCIÓN

Rutas de archivos en HTML/CSS y el error que no debes cometer

Comprueba tu progreso de aprendizaje de estilos CSS con el test que tenemos preparado.

26 LECCIÓN

Comprueba tu conocimiento sobre CSS en este test

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.

27 LECCIÓN

Tabla resumen de propiedades CSS y sus valores

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

28 LECCIÓN

Ejercicios resueltos CSS

CSS y Sass

CSS Nivel intermedio

13 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

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.

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

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

Medios en CSS

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.

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

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

Cursores en CSS

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

Botones CSS: Dando estilo a los botones

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

Sombras CSS en texto y contenedores o cajas

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

Selector de atributos en CSS

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.

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

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

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

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

Cómo insertar una imagen SVG en HTML y 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.

Flexbox, modelo de caja flexible en CSS

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

Ejercicios prácticos CSS Intermedio

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.

Tabla resumen de propiedades CSS y sus valores

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

Aprende a crear y compartir código en tiempo real con CodePen. Tutorial inicial para diseñadores y desarrolladores.

Tutorial CodePen

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

Descubre cómo dominar el lenguaje DTD en nuestro tutorial completo. Aprende a definir estructuras y validaciones para tus documentos XML.

Tutorial DTD (Document Type Definition)

Consolida tus conocimientos con ejercicios DTD resueltos y pon prueba tus habilidades con las prácticas tipo examen que encontrarás.

Ejercicios DTD: prácticas resueltas y desafíos tipo examen

Digitalización

Digitalización aplicada al sector productivo

5 lecciones

La digitalización ya no es una opción, es una necesidad. En el sector productivo, aplicar tecnologías digitales permite optimizar procesos, reducir errores, mejorar la trazabilidad y tomar decisiones con base en datos reales. Desde la captura automática de información en planta hasta la integración con sistemas ERP o plataformas IoT, hay muchas formas de empezar. No se trata de transformarlo todo de golpe, sino de identificar los cuellos de botella, digitalizar lo esencial y avanzar paso a paso. En Eniun te ayudamos a entender qué herramientas tienen sentido según tu actividad: trazabilidad de productos, gestión de mantenimiento, control de calidad en tiempo real o sistemas de ayuda para la toma de decisiones. El objetivo es claro: hacer más con menos esfuerzo, con más control y menos imprevistos.

⟶

searchclose

Descubre cómo la digitalización está transformando los modelos económicos, impulsando la economía circular y nuevos modelos colaborativos.

Cómo la digitalización está transformando los modelos económicos

Qué es la Industria 4.0, cómo funciona y por qué está transformando la forma en que se diseñan, fabrican y distribuyen productos.

Qué es la Industria 4.0 y por qué está transformando la producción

Migración a entornos de Industria 4.0: descubre cómo la interconexión entre el mundo físico y digital transforma la producción.

Migración a Industria 4.0: ventajas e inconvenientes

Entiende qué es la computación en la nube, sus niveles (IaaS, PaaS, SaaS), ventajas, desafíos y cómo se aplica en la vida real.

Computación en la nube

Descubre cómo elaborar un plan de transformación digital que integre tecnología en todas las áreas de la empresa, optimizando procesos.

Plan de transformación digital de la empresa

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

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

Módulo Diseño de Interfaces 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.

Evolución del diseño web

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.

Interacción persona-ordenador (IPO)

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.

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

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

Componentes de una interfaz web

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.

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

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.

Elementos visuales: forma, medida, color, textura

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.

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

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.

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

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.

Guía de estilo, importancia 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.

Prototipos en el diseño de interfaces web

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.

Mapas conceptuales, mapas de navegación y sitemaps

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

Interfaz web usable, visual, educativa y actualizada

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

Tutorial Figma

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

Diferencia entre wireframe, mockup, prototype y sketch

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

Tipos de fuentes en diseño web

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

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

Tutorial Figma

HTML

18 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

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

Introducción a los lenguajes de marcado o de marcas

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.

Lenguaje de marcas HTML

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

Reglas y normas HTML5

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.

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

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.

HTML5, estructura básica y elementos semánticos

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.

Etiquetas html de contenido y texto

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.

Etiquetas para la creación de formularios HTML

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.

Etiquetas html para crear tablas de contenido

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

Etiquetas html para el contenido incrustado

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.

Elementos de ordenación

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

Marcadores en HTML. Enlaces locales para movernos fácilmente

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

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.

Test de verificación HTML y herramientas útiles

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

Metainformación en HTML

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

Configuración metaetiqueta viewport, web responsive

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.

Resumen de etiquetas HTML

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

Ejercicios resueltos HTML

Aprende qué son las abreviaciones Emmet y cómo pueden ayudarte a escribir código HTML y CSS de forma rápida con ejemplos prácticos.

Qué son las abreviaciones Emmet con ejemplos prácticos

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

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

HTML: HyperText Markup Language

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

HTML Semantic tags

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

HTML Content and text tags

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

HTML Form tags

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

HTML Table tags

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

HTML tags for embedding content

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

Page jumping, anchor links or jump links

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

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

HTML validation

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

Ordered elements in HTML5

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

HTML. Technical vocabulary skills

Hardware

29 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

La representación de la información es un elemento esencial para el funcionamiento de un sistema informático.

Representación y comunicación de la información

Comprende el funcionamiento de un ordenador: hardware, software y su interacción. Conoce los componentes internos y su importancia.

Funcionamiento de un ordenador

Explora los fundamentos de la electricidad y la Ley de Ohm. Aprende cómo calcular voltaje, corriente y resistencia en circuitos electrónicos.

Electricidad y Ley de Ohm

Aprende las unidades de medida en informática y cómo se utilizan para medir almacenamiento, velocidad de procesamiento y transmisión de datos.

Unidades de medida en informática

La placa base o motherboard es el componente central de un ordenador. Consiste en un conjunto de circuitos impresos y conectores.

Placa base del ordenador

Aprende a medir voltaje, corriente y resistencia usando un multímetro. Guía de medición de parámetros eléctricos con Tinkercad.

Medición de parámetros eléctricos con el multímetro

Aprende qué es una fuente de alimentación, sus elementos, tensiones comunes y cómo medir su voltaje para asegurar un buen funcionamiento.

Fuente de alimentación: elementos, tensiones y mediciones

Los microprocesadores son el centro lógico de operaciones aritméticas y lógicas de una computadora y se encargan de dirigir toda su actividad.

Microprocesadores. Tipos

Descubre los sistemas de refrigeración para ordenadores: y aprende cómo mantener tu PC a temperatura óptima.

Sistemas de refrigeración del ordenador

La memoria interna es un elemento necesario para el funcionamiento de dispositivos que dispongan de procesador. De hecho, sin la memoria interna no se podría encender un dispositivo, ni podríamos mantener varios procesos abiertos al mismo tiempo.

Memoria interna de la computadora

Descubre las puertas lógicas: características, tipos y aplicaciones prácticas. Aprende cómo se usan en circuitos integrados y su importancia.

Puertas lógicas: características, tipos y aplicaciones prácticas

Descubre los distintos tipos de sistemas de almacenamiento externo y sus características: desde HDD y SSD hasta la nube.

Sistemas de almacenamiento externo. Tipos y características

Aprende las diferencias entre conectores SATA, mSATA, M.2, U.2 y PCIe, sus velocidades y protocolos para optimizar el rendimiento del hardware.

Diferencias conectores SATA, mSATA, M.2, U.2, PCIe y protocolos

Explora las tarjetas de expansión para ordenador, incluyendo tarjetas gráficas, de red, sonido, etc. para mejorar rendimiento y capacidades.

Tarjetas de expansión de un ordenador

Explora las características y funcionamiento de dispositivos periféricos de entrada/salida. Esenciales para la eficiencia tecnológica.

Dispositivos periféricos de entrada/salida: Características

Acciones para reducir el impacto ambiental de los ordenadores y los desechos electrónicos: reciclar, reutilizar y consumo responsable.

Ordenadores y residuos electrónicos: impacto ambiental

Los conectores USB, sus versiones y estándares, para mejorar la conectividad y el rendimiento de los periféricos.

USB: Conectores, versiones y estándares

Descubre los conectores de audio y video más comunes, sus usos y especificaciones, así como algunos obsoletos presentes en equipos antiguos.

Conectores de audio y video

Aprende los conectores para redes cableadas e inalámbricas, como RJ-45, fibra óptica, WiFi y Bluetooth, y aprende sus funciones.

19 LECCIÓN

Conectores para redes cableadas y conexiones inalámbricas

Aprende a montar un ordenador de sobremesa paso a paso: herramientas necesarias, precauciones a tener en cuenta y pasos de instalación.

20 LECCIÓN

Montaje de un ordenador de sobremesa: Pasos a seguir

Normas para el montaje y mantenimiento seguro de equipos informáticos. Guía práctica para el uso de herramientas y trabajo en taller.

21 LECCIÓN

Normas para el montaje y mantenimiento de equipos informáticos

Veamos la ergonomía en el trabajo informático, cómo debe ser la estación, el ambiente y la prevención de riesgos laborales.

22 LECCIÓN

Ergonomía en informática y prevención de riesgos

Sistemas operativos, tipos, funciones, instalación, recuperación y virtualización con máquinas virtuales y contenedores, además de tutoriales prácticos.

23 LECCIÓN

Sistemas Operativos: Instalación, recuperación y virtualización

Curso de reparación y mantenimiento de ordenadores: aprende a diagnosticar, solucionar averías y optimizar el rendimiento. 🚀

24 LECCIÓN

Curso de reparación y mantenimiento de ordenadores

Prácticas de montaje y mantenimiento de ordenadores, pensadas para realizar después de completar el tutorial de hardware de Eniun.

25 LECCIÓN

Prácticas de montaje y mantenimiento de ordenadores

Explora el mundo del modding, las últimas tendencias y tecnologías innovadoras en la personalización y rendimiento de equipos informáticos.

26 LECCIÓN

Modding, tendencias y nuevas tecnologías en equipos informáticos

Guía sobre software de propósito general en Windows y Linux. Aprende a seleccionar, instalar, mantener y administrar aplicaciones.

27 LECCIÓN

Software de propósito general: instalación y gestión

Aprende qué son las utilidades de mantenimiento y seguridad del sistema operativo y descubre las principales herramientas de Windows y Linux.

28 LECCIÓN

Utilidades de mantenimiento y seguridad del sistema operativo

Hardware en centros de proceso de datos (CPD): servidores, almacenamiento, RAID, SAI, hot swap, seguridad, refrigeración, inventariado...

29 LECCIÓN

Hardware en centros de proceso de datos (CPD)

Digitalización

Industria 4.0

8 lecciones

Descubre cómo la tecnología está revolucionando el sector industrial. En este curso te adentrarás en los pilares de la digitalización aplicada a la industria, desde la arquitectura de sistemas IoT hasta los principios de la Industria 4.0 y las metodologías lean para mejorar la eficiencia.

⟶

searchclose

Aprende qué son la digitalización y la transformación digital, en qué se diferencian y por qué es fundamental entender ambos conceptos.

Digitalización y transformación digital

Cómo la implantación de tecnología impacta en los procesos, la cultura organizativa y la relación con los clientes de una empresa.

Cómo impacta la implantación de tecnología en la empresa

Descubre cómo se integran los entornos IT y OT en la transformación digital para mejorar la eficiencia, la seguridad y la toma de decisiones.

Entornos IT y OT: cómo se integran en la transformación digital

Tecnologías clave que impulsan la Industria 4.0, cómo se integran en los entornos industriales y por qué están revolucionando la producción.

Tecnologías habilitadoras de la Industria 4.0

Lean manufacturing (o producción sin desperdicios), sistemas de fabricación que mejoran la eficiencia en la industria actual.

Lean Manufacturing: cómo mejorar la eficiencia en la industria

Qué es la estandarización de datos en la Industria 4.0, por qué es clave para la digitalización y cómo implementarla.

Estandarización de datos en la Industria 4.0: qué es y cómo usarla

Cómo se estructura una arquitectura IoT moderna: el procesamiento, el Edge Gateway, capas, componentes y casos de uso industriales.

Arquitectura IoT: qué es, cómo funciona y organización de capas

Qué son los modelos de negocio sostenibles en la Industria 4.0 y cómo las tecnologías digitales permiten reducir costes y minimizar residuos.

Modelos de negocio sostenibles en la Industria 4.0

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

JQuery es una librería JavaScript que facilita tareas habituales como son acceso al DOM, manejo de eventos, desarrollo de animaciones, interacciones AJAX...

jQuery, integración de contenido interactivo

XML y otros formatos

JSON

2 lecciones

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

Aprende JSON con este tutorial, el formato de intercambio de datos ampliamente utilizado en aplicaciones web y móviles.

Tutorial JSON: conversión a XML y viceversa

Practica tus habilidades con ejercicios JSON. En esta sección encontrarás una recopilación de prácticas resueltas y exámenes de ejemplo.

Ejercicios JSON: prácticas resueltas y exámenes de ejemplo

JavaScript y librerías

JavaScript

5 lecciones

Este tutorial de JavaScript básico está indicado para aquellas personas que tienen nociones básicas de programación y desean aprender JavaScript de forma rápida. En este tutorial todos los ejemplos se realizan mediante JavaScript desde un archivo externo.

⟶

searchclose

Domina JavaScript con este tutorial paso a paso. Desde principiantes hasta avanzados, descubre el lenguaje esencial para el desarrollo web.

Tutorial JavaScript básico

JavaScript, el DOM y los eventos son componentes esenciales para hacer que una página web sea dinámica e interactiva.

JavaScript DOM y eventos

Descubre las diferencias en las estructuras de control entre JavaScript y Python con un análisis detallado entre ambos lenguajes.

JavaScript y Python: Diferencias en las estructuras de control

JavaScript y Java difieren en sus estructuras de control, como bucles y condicionales, pero ambos pueden lograr tareas similares.

JavaScript y Java: Diferencias en las estructuras de control

Ejercicios resueltos de JavaScript: prácticas y exámenes para fortalecer tus habilidades y prepararte para desafíos en desarrollo web.

Ejercicios resueltos JavaScript: prácticas y exámenes

XML y otros formatos

Markdown

2 lecciones

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

Tutorial Markdown: Formato de texto sencillo para escribir contenido web con facilidad y rapidez. Aprende su sintaxis y crea contenido.

Tutorial Markdown

Practica tus conocimientos y habilidades sobre Markdown con estas prácticas resueltas y ejercicios sin resolver.

Ejercicios Markdown: prácticas resueltas y sin resolver

Digitalización

Metodologías ágiles

6 lecciones

Este módulo te introduce en los principios, valores y marcos de trabajo más utilizados en el desarrollo ágil de software. A través de ejemplos prácticos y dinámicas, aprenderás cómo aplicar metodologías como Scrum o Kanban para mejorar la colaboración, la organización del trabajo y la entrega continua de valor. Verás cómo funcionan los equipos autoorganizados, qué roles existen, cómo se priorizan las tareas y qué herramientas pueden ayudarte a implementar la agilidad en proyectos reales. El módulo incluye ejercicios interactivos y propuestas de investigación para profundizar en conceptos fundamentales.

⟶

searchclose

Aprende Scrum, Kanban, Lean Startup y Design Thinking en nuestro curso de metodologías ágiles gratuito y ameno.

Curso de metodologías ágiles: aprende a gestionar proyectos

Qué son las metodologías ágiles y por qué son esenciales para gestionar proyectos con flexibilidad, colaboración y entrega continua de valor.

Metodologías ágiles para la gestión de proyectos: qué son

Scrum es una metodología de desarrollo ágil de software que ayuda a los equipos a desarrollar soluciones que van evolucionando según las necesidades del proyecto.

Metodología Scrum para el desarrollo de software ágil

Cómo implementar Kanban en la gestión ágil de proyectos para mejorar la eficiencia. Aprende a visualizar el flujo de trabajo.

Kanban: Gestión ágil de proyectos para mejorar la eficiencia

Cómo validar ideas antes de desarrollar un producto con la metodología Lean Startup. Aprende a minimizar riesgos.

Lean Startup: cómo validar ideas antes de desarrollar un producto

Cómo aplicar Design Thinking para impulsar proyectos ágiles, innovar y diseñar soluciones centradas en las necesidades reales del usuario.

Design Thinking: proyectos ágiles y centrados en el usuario

Python

Python3

15 lecciones

⟶

searchclose

Aprende qué es Python, quién lo creó, sus características principales y por qué se ha convertido en uno de los lenguajes de programación más populares.

Introducción a Python

Tutorial para instalar Python 3 en Windows, Linux y macOS. Aprende a comprobar la versión instalada y configurar tu entorno de desarrollo.

Instalar Python

Descubre cómo elegir un entorno de desarrollo para Python, conoce las diferencias entre un editor de código y un IDE.

Elegir un entorno de desarrollo para Python

Aprende a instalar Visual Studio Code y la extensión de Python, conoce su interfaz y configura el intérprete para empezar a programar.

Instalar Visual Studio Code y la extensión de Python

Aprende a crear un proyecto en Python, escribir tu primer programa con print() y ejecutarlo paso a paso desde Visual Studio Code.

Crear mi primer programa en Python

Aprende a crear variables y descubre cómo almacenar información, conocer el tipo de una variable y aplicar buenas prácticas.

Variables y tipos de datos en Python

Descubre cómo utilizar expresiones y operadores en Python para realizar cálculos, comparar valores y construir programas más completos.

Utilizar expresiones y operadores en Python

Aprende a utilizar la función input() en Python para solicitar datos al usuario y crear programas interactivos.

Solicitar datos al usuario con input() en Python

Aprende a trabajar con cadenas de texto en Python: crear, concatenar, usar len(), acceder a caracteres, in, not in y los métodos más usados.

Cadenas de texto en Python

Aprende a usar las estructuras condicionales en Python con if, elif y else. Crea programas que tomen decisiones mediante ejemplos.

Estructuras condicionales en Python: if, elif y else

Aprende a utilizar los bucles while y for en Python para repetir instrucciones y recorrer secuencias con prácticas resueltas.

Bucles en Python: while y for

Aprende a utilizar las instrucciones break, continue y pass en Python para controlar el funcionamiento de los bucles.

Las instrucciones break, continue y pass en Python

Guía de detección y corrección de errores en Python. Aprende a interpretar mensajes de error y comprobar el funcionamiento de tus programas.

Detección y corrección de errores en Python

Aprende a crear funciones en Python con def, utilizar parámetros y return y reutilizar código mediante ejemplos prácticos.

Funciones en Python

Aprende Python resolviendo ejercicios resueltos. Practica variables, operadores, estructuras condicionales, bucles y funciones.

Ejercicios resueltos de programación en Python

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

A través del tutorial RSS, podremos comprender cómo funcionan los feeds RSS, su estructura y cómo se utilizan para compartir información online.

Tutorial RSS, Sindicación de contenidos

Diseño y Usabilidad

SEO y GEO

6 lecciones

En este tutorial de posicionamiento online, te adentrarás en el mundo del Search Engine Optimization (SEO) y del Generative Engine Optimization (GEO). A lo largo del curso, veremos las técnicas, estrategias y herramientas esenciales que te ayudarán a mejorar la visibilidad y el posicionamiento de tu sitio en buscadores y en sistemas de IA generativa que responden directamente a las consultas de las personas.

⟶

searchclose

Aprende las claves del posicionamiento online SEO con nuestro tutorial. Descubre estrategias digitales y herramientas para mejorar tu web.

Tutorial posicionamiento online SEO

Descubre los mejores libros de posicionamiento online en español. Aprende SEO desde cero o mejora tu estrategia con guías prácticas.

Mejores libros de posicionamiento online (SEO) en español

📊 Los mejores libros de analítica web y Google Analytics en español. Aprende a medir, analizar y optimizar datos digitales como un experto.

Mejores libros de analítica web y Google Analytics en español

Descubre qué es GEO y cómo está cambiando el SEO en la era de la inteligencia artificial. Entiende cómo aparecer en las respuestas de la IA.

Qué es GEO y cómo cambia el SEO en la era de la IA

Aprende cómo funciona una IA al responder preguntas y cómo selecciona información de la web, clave para entender el nuevo posicionamiento GEO.

Cómo funciona una IA cuando responde una pregunta

Analiza las 5 claves para aparecer en las respuestas de la IA y conseguir que tu contenido sea seleccionado como fuente.

Cómo aparecer en las respuestas de la IA: 5 claves que funcionan

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

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

Tutorial de Sass

JavaScript y librerías

Sonido, vídeo y animaciones

8 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

Antes de conocer cómo podemos insertar un vídeo en HTML5 vamos a ver los distintos tipos de formatos de vídeo y sus conversiones.

Formatos de archivos de vídeo y conversiones

El elemento video de HTML5 dispone de varios atributos que nos permiten establecer sus diferentes valores de comportamiento.

Inserción de vídeo en HTML5

Los audios digitales están disponibles en distintos formatos y en diferentes extensiones. Veamos los distintos formatos y su optimización para la web.

Formatos de archivos de audio y optimizaciones

El elemento "audio" de HTML5 dispone de varios atributos que nos permiten establecer sus diferentes valores de comportamiento.

Inserción de audio en HTML5

Para poder controlar todos los elementos de nuestro reproductor podemos utilizar JavaScript y aprovechar los nuevos métodos, propiedades y eventos incorporados en HTML5. Veamos las características más importantes.

Control de reproducción de vídeo y audio con JavaScript

El elemento canvas nos permite pintar gráficos, crear animaciones y desarrollar videojuegos mediante un API de Javascript.

Elemento Canvas en HTML5

Veamos cómo realizar una pequeña animación en Canvas y cómo interactuar con los elementos del lienzo mediante el teclado.

Animaciones en Canvas

Descubre qué son las licencias Creative Commons y cómo aplicarlas en tu sitio web para compartir contenido de manera abierta y proteger tus derechos de autor.

Qué son las licencias Creative Commons y cómo aplicarlas

Diseño y Usabilidad

Usabilidad

10 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

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

Tutorial de usabilidad web

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

12 Leyes de la experiencia de usuario UX

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

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

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.

La usabilidad en el diseño de aplicaciones

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...

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

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

Pruebas en el navegador con Selenium IDE. Testing

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

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

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.

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

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

Mejores libros en español para aprender usabilidad

Mejores libros de diseño UX/UI en español para aprender experiencia de usuario, interfaz y usabilidad con recursos prácticos.

Mejores libros de diseño UX/UI en español

Entornos

Visual Studio Code

3 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

Este post es una guía básica para publicar contenido usando GitHub y Visual Studio Code.

Repositorio Git en Visual Studio Code con cuenta Github

¿Cuáles son los comandos básicos de Git y Git? En este artículo encontrarás un resumen de los comandos mas utilizados para Git y GitHub.

Resumen comandos Git

Aprende en este curso de Visual Studio Code su instalación, personalización, edición de código, depuración y uso de atajos y extensiones.

Curso de Visual Studio Code

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

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

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

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

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

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

Vocabulario inglés: Texto y formato

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.

Vocabulario inglés: terminología del teclado

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.

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

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

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

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

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

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

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

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.

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

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.

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

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

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

Gestores de contenido: los CMS más utilizados

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

Diferencias entre Wordpress.org y Wordpress.com

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

Descargar e instalar Wordpress en local: pasos a seguir

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

Instalar Wordpress con Docker Compose

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

Instalar WordPress en la nube de AWS con Docker

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

Administrar Wordpress desde el panel de control

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

Mejores plugins de Wordpress

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

Tutorial WooCommerce

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

Cómo monetizar tu página web o blog

XML y otros formatos

XML

10 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

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.

Curso XML (eXtensible Markup Language)

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!

Cómo se escribe un documento XML: Sintaxis

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

Cómo se crea un documento XML

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

Caracteres especiales en 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.

Cómo asociar un archivo CSS a un documento XML

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

Secciones CDATA en XML

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

Documentos XML bien formados y válidos

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

Espacios de nombres en XML

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

Ejercicios resueltos XML

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

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

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

Domina XPath y encuentra fácilmente la información que necesitas en documentos XML con nuestro tutorial con explicaciones detalladas y ejercicios resueltos.

Tutorial XPath (XML Path Language)

Practica XPath con ejercicios: prácticas resueltas y ejemplos tipo examen para mejorar habilidades en consultas de XPath en documentos XML.

Ejercicios XPath: prácticas resueltas y ejemplos tipo examen

XML y otros formatos

XSD

2 lecciones

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

Crea y valida esquemas XML con XSD en nuestro tutorial completo. Aprenderás a definir elementos, atributos, tipos de datos, restricciones....

Tutorial XSD (XML Schema Definition)

Ejercicios XSD: prácticas resueltas y ejemplos tipo examen para mejorar habilidades en validación de XML con esquemas XSD.

Ejercicios XSD: prácticas resueltas y ejemplos tipo examen

XML y otros formatos

XSLT

2 lecciones

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