Máster Online en Diseño UI y Desarrollo Web

Una de las áreas con mayor demanda de profesionales en la actualidad es la del diseño de interfaces web UI y el desarrollo web. Este diseño se encarga, principalmente, de la creación de las partes que podemos ver en un sitio web: o sea que si entras en cualquier página web (ya sea en un ordenador, en una tablet o en un móvil) y te gusta el diseño de ese site, eso es gracias al diseñador web (o equipo de diseñadores) que hay tras ese trabajo.

Es un área bastante técnica y para que los proyectos se realicen con éxito requieren de un extra de orden, meticulosidad y paciencia. Si dominas esta disciplina, tienes el premio más cerca: un buen profesional en diseño web suele tener acceso a ofertas con mejores condiciones laborales que la media.

Nuestro máster gira en torno al aprendizaje cualificado de la profesión de diseño web y desarrollo front-end a través de los lenguajes CSS + HTML y el CMS WordPress, buscando el equilibrio perfecto entre el manejo de estos lenguajes, los conceptos inherentes al diseño de interfaces actual, la educación visual y la práctica real.

HTML y CSS

Es imprescindible alcanzar una base sólida en los lenguajes HTML y CSS. Lo haremos a través de una serie de prácticas originales que recorrerán todas las posibilidades del código desde el principio centrándonos en el diseño.

  • Partes de un documento HTML y etiquetado semántico para los contenidos según SEO con HTML5.
  • Configurar y estructurar un sitio local para su correcto funcionamiento.
  • Crear hojas de estilo CSS y sus formas de vinculación con el documento HTML.
  • Selectores CSS básicos para seleccionar la estructura HTML y selectores avanzados para dominar todo el árbol del DOM.
  • Aprender a sacarle partido al inspector de código de Chrome, herramienta indispensable de la maquetación web.
  • Formas de posicionamiento: relativo, absoluto, fijo y flotante.
  • Recorrer todas las propiedades CSS que nos van a permitir dibujar formas y dominar los estilos gráficos.
  • Trabajar con todo tipo de fuentes tipográficas, de Google Fonts, personalizadas y fuentes de iconos.
  • Trabajar todas las opciones de navegación: vínculos, desplegables, anclas.
  • Estructurar etiquetas de formulario según UX y darles las funcionalidades apropiadas.
  • Centrarnos en metodologías de sintaxis para hacer un código limpio con BEM y SMACSS.

Nuevos espacios: Flexbox y Grid Layout

El diseño web ha experimentado cambios profundos en muchos aspectos pero quizá dominio del espacio ha sido el más rápido. Tenemos que controlar el espacio del navegador en todos los dispositivos.

  • Entender el nuevo espacio web fluido y cambiante entre dispositivos.
  • Arquitectura de contenido según la sintaxis de cajas Flexbox.
  • Nueva sintaxis Grid Layout, un paso más frente a las posibilidades de estructurar el contenido.
  • Sentencias de corte CSS con mediaquerie y todos los elementos que participan en un diseño responsive de calidad.

Animación CSS y SVG

El movimiento en nuestra web aporta dinamismo y señaliza funciones para la interacción más amigables y atractivas. Aprenderemos las opciones que nos da CSS3 y el formato de imágenes SVG.

  • Propiedades CSS3 de animación con transition, transform y keyframes.
  • Dibujo con etiquetas SVG y posibilidades de animación con SMIL.
  • Integración de vídeo mp4 y su correcta aplicación en el código.

Frameworks: Bootstrap 4

Los frameworks son marcos de trabajo que ayudan al desarrollo de webs en equipo. Bootstrap 4 fue desarrollado por los desarrolladores de Twitter y hoy en día es uno de los más utilizados profesionalmente.

  • Configuración y vínculos de Bootstrap 4 para comunicarlo con nuestra web.
  • Sistema de columnas del grid layout responsive de Bootstrap y su aplicación.
  • Clases de visibilidad y ayuda del framework.
  • Componentes JavaScript de Bootstrap para hacer slides, desplegables y pop-ups.

Prototipado UI con Adobe XD

Uno de las fases más importantes a la hora de crear una web es preparar un prototipo que sirva tanto al equipo de trabajo como al destinatario final para conocer como será su página. Para esta función se utiliza el programa de prototipado de Adobe, llamado XD.

  • Que diferencia hay entre wireframes y prototipos de alta fidelidad y cuando usarlos.
  • Conocer las diferencias de tipos de layout e identificar las partes de una interfaz.
  • Entender los principios de la usabilidad y el diseño UX.
  • Ver las herramientas de dibujo, símbolos e imágenes en XD.
  • Crear un prototipo interactivo y animado con XD.
  • Formatos de imagen y su optimización para Internet: GIF, JPG, PNG y SVG.
  • Opciones de presentación de nuestro prototipo al cliente.

WordPress

La mayor parte de las páginas que vemos en Internet necesitan cambiar sus contenidos de forma dinámica, para eso utilizan gestores de contenidos. El más popular por su versatilidad y facilidad de uso es WordPress.

  • Instalación y configuración del CMS WordPress.
  • Creación y administración de contenidos de tipo páginas, entradas y categorías.
  • La diferencia entre instalar un tema externo y crear un tema hijo.
  • Empezar desde cero a crear nuestro propio tema con la jerarquía de archivos PHP de WordPress.
  • Usar las funciones básicas PHP del núcleo de WordPress para consultar la base de datos.
  • Entender los diferentes archivos PHP que componen un tema y saber cuando usar cada uno.
  • Configurar y personalizar el loop de WordPress para personalizar nuestras consultas a la base de datos.
  • Instalar y configurar los plugins más importantes para nuestro tema de WordPress.
  • Funciones avanzadas para añadir campos personalizados a la gestión de contenidos de nuestro tema.
  • Optimización y ajustes previos para la correcta publicación de nuestro tema.

Proyecto final

Nuestro objetivo es crear un perfil profesional capaz de trabajar por cuenta propia o dentro de una empresa. Así que como proyecto principal simularemos una situación real eligiendo entre dos briefings de proyectos empresariales de sitio web. Tendremos que hacer el prototipo de la interfaz usando Adobe XD y luego desarrollarlo para convertirlo en una web real aplicando todos los conocimientos adquiridos a lo largo del Máster de Diseño UI y Desarrollo Web.

Requisitos para la obtención del título

Para finalizar el máster y obtener el título correspondiente, el alumno deberá efectuar con éxito la entrega de los proyectos y prácticas indicadas por el profesor en los plazos que se especifiquen. Se trata de una titulación propia de La Hauss.