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

Cuando hablamos de la historia del diseño web, está claro que el momento inicial lo encontramos en 1990, cuando nace la primera versión de HTML.

La interacción persona-ordenador (IPO) es la disciplina dedicada a estudiar cómo se produce la interacción entre las personas y los sistemas informáticos.

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.

Conocer el nombre de cada uno de los componentes de un sitio web es esencial ya que forma parte del vocabulario utilizado por los desarrolladores.

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.

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.

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.

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.

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.

Los prototipos web son dibujos o diseños de las diferentes páginas y secciones que van a componer un sitio web. El prototipado es una parte esencial a la hora de definir los menús y los diferentes elementos que componen una 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.

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

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

Estudia los diferentes pasos que debes tener en cuenta a la hora de crear una web con las mayores garantías de éxito.

Referencias, herramientas y recursos interesantes para seguir con tu aprendizaje en el ámbito de la planificación de interfaces gráficas.

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.

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.

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.

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.

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.

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

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.

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

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

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

Aunque HTML5 considera obsoleto el uso de marcos, es imprescindible conocer su funcionamiento ya que todavía hay sitios web implementados con este método.

Para incluir el acceso directo o icono identificativo en la pantalla de un smartphone, tablet o navegador podemos insertar etiquetas especiales en nuestro código HTML.

A la hora de compartir en una red social una página web hay que tener en cuenta diferentes aspectos para que se presente el contenido de una forma atractiva. Para ello utilizaremos las metaetiquetas o metatags.

Este artículo es una guía básica para publicar contenido usando GitHub y SourceTree.

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

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.

Referencias y recursos interesantes para seguir con tu aprendizaje en el desarrollo web mediante el lenguaje de marcado HTML5.

Tabla de colores html. En la siguiente tabla puedes ver los valores de los colores según su nombre, código hexadecimal y en RGB.

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.

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.

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

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

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

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.

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.

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

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.

Gracias a las pseudo-clases de CSS podemos realizar una selección más específica de los elementos a los que queremos aplicar un cierto estilo sin necesidad de crear una clase concreta.

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

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.

Cualquier elemento incluido en un documento HTML dispone de una estructura tipo caja que se puede modificar usando las propiedades 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.

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.

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.

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

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.

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

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

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.

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

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.

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

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

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

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

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.

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.

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

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.

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.

Estilos y elementos CSS interesantes para tu web. Inspiración para realizar tus composiciones HTML y CSS.

Utilizar las herramientas más apropiadas es imprescindible para desarrollar con el mayor éxito cualquier página web. Veamos algunos recursos interesantes.

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.

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

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

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

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.

En este apartado vamos a ver cómo encadenar diferentes animaciones utilizando la propiedad animation, sus subpropiedades y la secuencia de animación @keyframes

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

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

Utilizar los recursos más apropiados es imprescindible para desarrollar con éxito una página web. A continuación se describen varias herramientas útiles, tutoriales y manuales que puedes tener como referencia para la inclusión de sonido, vídeos y animaciones.

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.

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.

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

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

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

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

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.

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.

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.

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.

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

Diseño y desarrollo de webs accesibles: principios, pautas criterios y sugerencias que deben tenerse en cuenta para el diseño de sitios web accesibles.

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.

El diseño centrado en el usuario o UCD (del inglés User Centered Design) es la metodología más utilizada para el diseño y desarrollo de productos.

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

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.

GitHub cuenta con organizaciones que son cuentas compartidas donde equipos de personas pueden colaborar en proyectos diferentes.

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