Imagina
Curso de Responsive Frameworks

Entiende y desarrolla completos sitios web basados en el Diseño Adaptativo.

El diseño web adaptativo (RWD) basa su filosofía en la adaptación de la apariencia de las páginas web al dispositivo (PC, móvil, tablet…) que se esté utilizando para visualizarla.

¿A quién va dirigido?

A todos los diseñadores web que quieran mejorar la calidad y la usabilidad de sus páginas web haciéndolas responsive para que se adapten a todos los dispositivos.

Objetivos

Con este curso, el alumno será capaz de entender y desarrollar completos sitios web basados en el Diseño Adaptativo. Se pondrá en conocimiento del alumno, de la misma forma, los frameworks más destacados para el diseño web adaptativo.

¿Cuáles son los requisitos?

Aunque los conceptos sobre Diseño Web Adaptativo y los diferentes frameworks serán desde un nivel básico, se recomienda tener ciertos conocimientos en desarrollo de sitios web con HTML y CSS.

Duración
Consultar
Requisitos
Aunque los conceptos sobre Diseño Web Adaptativo y los diferentes frameworks serán desde un nivel básico, se recomienda tener ciertos conocimientos en desarrollo de sitios web con HTML y CSS.
Bonificación FUNDAE
Quiero recibir información de este curso

*requerido

  • Responsable de los datos: IMAGINA WEB & MOBILE TECHNOLOGIES S.L.
  • Finalidad de los datos: Responder a la información solicitada, envío de boletines de noticias y ofertas.
  • Destinatarios: IMAGINA WEB & MOBILE TECHNOLOGIES S.L. No se cederán los datos a terceros.
  • Derechos: En cualquier momento puedes acceder, recuperar y borrar tu información.

Temario

1

Introducción

  • ¿Qué es y qué no es Responsive Web Design?
  • Pasado y Futuro del diseño web
  • Ejemplos de Responsive Web Design
  • Mobile First
  • Diseño Gráfico vs Diseño Web
  • Reglas de Estilos Multidispositivo
  • Ventajas del Responsive Web Design
  • Perfiles Profesionales involucrados en realizar RWD
  • Breakpoints más comunes en RWD
  • Uso de Menús en RWD
  • Resumen: Mejores Prácticas para RWD
2

Imágenes en Diseño Adaptativo

  • Introducción
  • Adaptive Images
  • Picturefill
  • Imágenes Adaptativas en los CMS
  • Vídeos Adaptativos
3

Texto en Diseño Adaptativo

  • Introducción
  • Unidades de Medida
  • FitText
  • TypeKit
  • FontSpace Generators
  • Google Fonts
  • Tablas en Diseño Adaptativo
4

Cómo construir un sitio web con RWD

  • Introducción
  • Aspectos a tener en cuenta
  • Viewport
  • Densidad de Pantalla
  • Diseños Líquidos
  • Ritmo Vertical
  • Media Queries
5

Frameworks

  • Introducción
  • Diferencias entre Grids y Frameworks
  • ¿Por qué usar frameworks para diseño RWD?
  • ¿Cómo escoger un Framework?
6

Bootstrap

  • Introducción
  • Características de Bootstrap
  • Paso a paso para empezar con Bootstrap
  • Los temas en Bootstrap
  • Ejemplos oficiales de Bootstrap
  • Compañías que usan Bootstrap
7

Boostrap CSS

  • Introducción
  • El container
  • Responsive Breakpoints
  • Z-Index
  • La cuadrícula de Bootstrap
  • La tipografía
  • Código
  • Listas
  • Tablas
  • Imágenes
  • Figuras
  • Utilidades de Bootstrap
8

Boostrap Components

  • Introducción
  • Alerts
  • Etiquetas
  • Navs
  • Navbars
  • Breadcrumbs
  • Botones y grupos de botones
  • Desplegables
  • Cards
  • Collapse
  • Input Groups
  • Formularios
  • List Groups
  • Ventanas Modales, Popovers y Tooltips
  • Scrollspy
  • Paginación
  • Barras de progreso
  • Jumbotron
9

Materialize

  • Introducción
  • Material Design
  • Materialize
  • Principios de Materialize
  • Los temas en Materialize
  • CSS Materialize
  • Javascript
  • Componentes
  • Mobile
  • Casos de éxito
  • Instalación/Descarga de Materialize
  • Bootstrap vs Materialize
10

Foundation

  • Introducción
  • Características
  • Foro oficial
  • Notable Code
  • Los temas en Foundation
  • Foundation Blocks
  • Foundation Icons
  • Tablas Responsive en Foundation
  • Componentes
  • Foundation Grid
  • Empresas que usan Foundation
  • Zurb Playground
  • Instalación/Descarga de Foundation
  • Bootstrap vs Foundation
  • Foundation vs Materialize
11

Otros Frameworks interesantes

  • Base
  • Bulma
  • Ulkit
  • Skeleton
  • Vuetify
Realiza el curso desde donde quieras gracias a nuestro campus online. Dispondrás de un profesor experimentado en programación y desarrollo que te ayudará y responderá a todas tus dudas.

Tutor personal

Proyecto final

Diploma de certificación

Plataforma online

Disponibilidad horaria

Bolsa de empleo

¿Quieres realizar esta formación sin coste para tu empresa?

¡Sin desplazamientos! Impartimos la formación en tu empresa.

Imagina Formación es una entidad organizadora de la Fundación Estatal de modo que puedes gestionar la formación bonificada de los cursos con nosotros. Nos encargamos de todos los trámites para conseguir la bonificación sin ningún coste adicional. Cumplimos con todos los requisitos para que nuestros cursos sean 100% bonificables.

Consulta disponibilidad y precios

Otros clientes que están aprendiendo con nosotros…

¿Tienes alguna duda? Puedes hablar con uno de nuestros profesores

¡Pregúntanos!

¿Quieres un curso personalizado?

*requerido

  • Responsable de los datos: IMAGINA WEB & MOBILE TECHNOLOGIES S.L.
  • Finalidad de los datos: Responder a la información solicitada, envío de boletines de noticias y ofertas.
  • Destinatarios: IMAGINA WEB & MOBILE TECHNOLOGIES S.L. No se cederán los datos a terceros.
  • Derechos: En cualquier momento puedes acceder, recuperar y borrar tu información.