modalidad: Online
Bootstrap 3: Desarrollo Web Responsive
precio: 0 € *
* hasta 100 % bonificable para trabajadores.
340 horas
horas teleformación:
170 horas
duración total:
descripción
Si trabaja en el entorno web quiere conocer los aspectos esenciales para ser un profesional en el desarrollo web responsive este es su momento, con el Curso de Bootstrap 3: Desarrollo Web
Responsive podrá adquirir los conocimientos oportunos para diseña y maqueta una web responsive de principio a fin.
a quién va dirigido
Todos aquellos trabajadores y profesionales en activo que deseen adquirir o perfeccionar sus conocimientos técnicos en este área.
objetivos
- Maquetar la estructura con HTML5. - Gestionar el comportamiento responsive.
- Crear sitios web que se adaptan automáticamente a cualquier resolución para obtener así una visualización óptima, independientemente del tipo de pantalla, ya sea de ordenador, tableta o smartphone.
para qué te prepara
El Curso de Bootstrap 3: Desarrollo Web Responsive le prepara para tener una visión amplia y precisa del entorno web, llegando a especializarse en el desarrollo de proyectos responsive gracias al
conocimiento de Bootstrap o HTML5.
salidas laborales
titulación
forma de bonificación
- Mediante descuento directo en el TC1, a cargo de los seguros sociales que la empresa paga cada mes a la Seguridad Social.
Una vez finalizado el curso, el alumno recibirá por parte de INESEM vía correo postal, la Titulación Oficial que acredita el haber superado con éxito todas las pruebas de conocimientos propuestas en el mismo.
Esta titulación incluirá el nombre del curso/máster, la duración del mismo, el nombre y DNI del alumno, el nivel de aprovechamiento que acredita que el alumno superó las pruebas propuestas, las firmas del profesor y Director del centro, y los sellos de la instituciones que avalan la formación recibida (Instituto Europeo de Estudios Empresariales).
metodología
El alumno comienza su andadura en INESEM a través del Campus Virtual. Con nuestra metodología de aprendizaje online, el alumno debe avanzar a lo largo de las unidades didácticas del itinerario
formativo, así como realizar las actividades y autoevaluaciones correspondientes. Al final del itinerario, el alumno se encontrará con el examen final, debiendo contestar correctamente un mínimo del 75% de las cuestiones planteadas para poder obtener el título.
Nuestro equipo docente y un tutor especializado harán un seguimiento exhaustivo, evaluando todos los progresos del alumno así como estableciendo una línea abierta para la resolución de consultas.
El alumno dispone de un espacio donde gestionar todos sus trámites administrativos, la Secretaría Virtual, y de un lugar de encuentro, Comunidad INESEM, donde fomentar su proceso de aprendizaje que enriquecerá su desarrollo profesional.
materiales didácticos
profesorado y servicio de tutorías
Nuestro equipo docente estará a su disposición para resolver cualquier consulta o ampliación de contenido que pueda necesitar relacionado con el curso. Podrá ponerse en contacto con nosotros a través de la propia plataforma o Chat, Email o Teléfono, en el horario que aparece en un documento denominado “Guía del Alumno” entregado junto al resto de materiales de estudio.
Contamos con una extensa plantilla de profesores especializados en las distintas áreas formativas, con una amplia experiencia en el ámbito docente.
El alumno podrá contactar con los profesores y formular todo tipo de dudas y consultas, así como solicitar información complementaria, fuentes bibliográficas y asesoramiento profesional.
Podrá hacerlo de las siguientes formas:
- Por e-mail: El alumno podrá enviar sus dudas y consultas a cualquier hora y obtendrá respuesta en un plazo máximo de 48 horas.
- Por teléfono: Existe un horario para las tutorías telefónicas, dentro del cual el alumno podrá hablar directamente con su tutor.
- A través del Campus Virtual: El alumno/a puede contactar y enviar sus consultas a través del mismo, pudiendo tener acceso a Secretaría, agilizando cualquier proceso administrativo así como
plazo de finalización
El alumno cuenta con un período máximo de tiempo para la finalización del curso, que dependerá de la misma duración del curso. Existe por tanto un calendario formativo con una fecha de inicio y una fecha de fin.
especialmente dirigido a los alumnos matriculados en cursos de modalidad online, el campus virtual de inesem ofrece contenidos multimedia de alta calidad y ejercicios interactivos.
campus virtual online
servicio gratuito que permitirá al alumno formar parte de una extensa comunidad virtual que ya disfruta de múltiples ventajas: becas, descuentos y promociones en formación, viajes al extranjero para
aprender idiomas...
comunidad
el alumno podrá descargar artículos sobre e-learning, publicaciones sobre formación a distancia, artículos de opinión, noticias sobre convocatorias de oposiciones, concursos públicos de la administración, ferias sobre formación, etc.
revista digital
Este sistema comunica al alumno directamente con nuestros asistentes, agilizando todo el proceso de matriculación, envío de documentación y solución de cualquier incidencia.
Además, a través de nuestro gestor documental, el alumno puede disponer de todos
sus documentos, controlar las fechas de envío, finalización de sus acciones formativas y todo lo relacionado con la parte administrativa de sus cursos, teniendo la posibilidad de realizar un seguimiento personal de todos sus trámites con INESEM
programa formativo
PARTE 1. DESARROLLO WEB CON BOOTSTRAP
UNIDAD DIDÁCTICA 1. QUÉ ES BOOTSTRAP Y CUÁL ES SU IMPORTANCIA PARA QUE SIRVE
1.Introducción del curso Desarrollo web con Bootstrap 3 2.Objetivo de Desarrollo web con Bootstrap 3
3.Por qué usar Bootstrap
4.Entorno y recursos de apoyo para Bootstrap y editor Sublime Text 2
UNIDAD DIDÁCTICA 2. HTML5 Y MAQUETACIÓN
1.Análisis de estructuras generales del diseño 2.Metodología para el uso de Bootstrap 3
3.Estructura de la cabecera de la web, pie de la web, home, header y registro 4.Estructura índice de contenidos, alojamiento, preguntas frecuentes
UNIDAD DIDÁCTICA 3. MAQUETACIÓN VISUAL
1.Estilos generales en todo el sitio web, cabezara y menú 2.Estilos del pie de la web
UNIDAD DIDÁCTICA 4. MAQUETACIÓN HOME Y DETALLES
1.Estilos workshop en la zona de contenido
2.Estilos titular, secciones, descripción, agenda y formadores
UNIDAD DIDÁCTICA 5. GESTIONAR DEL COMPORTAMIENTO RESPONSIVE
1.Adaptación de la cabecera y pie de página 2.Adaptación zona workshops
3.Estilos propios en contextos de Bootstrap 3 4.Adaptar índice de contenidos y alojamiento 5.Finalizado de Desarrollo web con Bootstrap 3
PARTE 2. DISEÑO WEB RESPONSIVE CON HTML5 Y
CSS3
UNIDAD DIDÁCTICA 1. INTRODUCCIÓN
1.El diseño web actual 2.Diseño web responsive 3.Planteamientos de diseño 4.Pasar a otra cosa
5.Objetivos del libro
6.Herramientas del maquetador 1.- Objetivos
2.- Mozilla Firefox 3.- Google Chrome 4.- Apple Safari
5.- Microsoft Internet Explorer 7.Descargar ejemplos
UNIDAD DIDÁCTICA 2. SOLUCIONES PARA LA COMPATIBILIDAD
4.- El reset de HTML5 Doctor 4.Normalize.css 1.- El proyecto 2.- Descargar Normalize.css 3.- Instalar Normalize.css 5.El HTML5 y html5shiv.js 1.- Objetivo 2.- Archivo de ejemplo 3.- Librería html5shiv.js 6.Media queries y respond.js 1.- Objetivo
2.- Archivo de ejemplo 3.- La librería respond.js 7.Las alternativas y Modernizr.js 1.- Objetivo
2.- Descargar Modernizr
3.- Crear una página de ejemplo 4.- Instale y enlace el script Modernizr 5.- La activación de Modernizr
6.- Utilizar las clases de Modernizr 7.- Utilizar Modernizr con JavaScript 8.Las reglas @supports
1.- Objetivo
2.- Utilizar las reglas @supports 3.- Operadores
UNIDAD DIDÁCTICA 3. EL DISEÑO CLÁSICO
1.Diseñadores y maquetadores 2.Modelos de cajas
3.Los márgenes de los elementos 4.Visualización de los elementos 5.Visualización en flujo normal 6.Posicionamiento absoluto 7.Posicionamiento fijo 8.Posicionamiento relativo
9.Utilizar el diseño en posición relativa y absoluta 10.Visualización de cajas flotantes
1.- Posicionamiento flotante 2.- Colocar las cajas al lado 3.- Prohibir la flotación 4.- Ejemplo con cuatro cajas 5.- Diseño simplista
6.- Conclusión sobre diseñar con elementos flotantes
UNIDAD DIDÁCTICA 4. DISEÑAR CON TABLAS
1.Objetivo
1.- Párrafos en las celdas 2.- Listas en tablas 7.Diseño de las filas
8.Establecer el ancho de las celdas 1.- Anchos fijos
2.- Anchos en porcentaje
9.Diseño con una tabla más estructurada 10.Otras propiedades de diseño
1.- Propiedad table-layout 2.- Propiedad border-collapse 3.- Propiedad border-spacing 4.- Propiedad empty-cells 5.- Propiedad caption-side 11.Alineación vertical 12.Conclusión
UNIDAD DIDÁCTICA 5. CUADRÍCULAS DE DISEÑO
1.Objetivo
2.Estructura de las cuadrículas para la web 3.Cuadrículas fijas
4.La cuadrícula fija 960gs 1.- Cuadrícula
2.- Archivos CSS 3.- Página de ejemplo
4.- Enlaces a las hojas de estilo 5.- Estilos personales
6.- Contenedor del diseño 7.- Bloques en 12 columnas
8.- Bloques en las columnas de la cuadrícula 9.- Prohibir los bloques flotantes adyacentes 10.- Bloques con desplazamiento
11.- Bloques centrados
12.- Código completo de la página 5.Cuadrícula fija notjustagrid
1.- El framework 2.- Cuadrícula
3.- Página de ejemplo 4.- Archivos CSS
5.- Enlaces a las hojas de estilo 6.- Estilos personales
7.- Contenedor del diseño 8.- Sistema de clases
9.- Bloque para todo el ancho
10.- Tres bloques en un tercio de la cuadrícula 11.- Dos bloques en 3/5 y 2/5 de la cuadrícula 12.- Un solo bloque en 2/3 de la cuadrícula
5.- Instalar la cuadrícula 6.- Estilos personales 7.- Contenedor 8.- Filas
9.- Tres bloques con la misma anchura 10.- Dos bloques con anchos distintos 11.- Bloque desplazado
12.- Visualización de la cuadrícula fluida
UNIDAD DIDÁCTICA 6. MEDIA QUERIES
1.Objetivo 2.Orígenes
3.Uso de media queries
4.Sintaxis de las media queries 5.Características a prueba
6.Dónde ubicar las media queries
7.Tamaño de las pantallas de los móviles 8.El concepto viewport
9.Un ejemplo muy sencillo 1.- Esquema
2.- Código HTML y CSS 10.Cuadrícula responsive 1.- Cuadrícula
2.- Descargar e instalar la cuadrícula
3.- Crear una página sencilla de 12 columnas 4.- Vínculo a los estilos y a los scripts
5.- Estructura del diseño 6.- Reglas CSS
11.Ejemplos de sitios con media queries
UNIDAD DIDÁCTICA 7. EL DISEÑO RESPONSIVE
1.El diseño responsive 2.Cuadrículas responsive
3.Cuadrícula responsive Simple Grid 4.-Utilizar Simple Grid
1.- Descargar e instalar Simple Grid 2.- Filas
3.- Esquema 4.- Primera fila 5.- Segunda fila 6.- Tercera fila
7.- Utilizar la cuadrícula fluida y responsive 8.- Código completo
5.Cuadrícula responsive Columnal 1.- Utilizar Columnal
2.- Descargar e instalar Columnal 3.- Esquema
8.- La cuarta fila y bloques anidados 9.- Utilizar la cuadrícula fluida y responsive 10.- Código completo del diseño
11.- Imágenes responsives
12.- Código completo para el diseño con una imagen responsive 6.Uso de imágenes
7.Imágenes fluidas 1.- Objetivo 2.- Diseño fijo 3.- Diseño fluido
4.- Ancho fluido de otros elementos 5.- Anchos de imágenes fluidas
6.- Abrir y cambiar el tamaño de la página 7.- Código completo de la página
8.Script Response.js 1.- Utilizar JavaScript 2.- Descargar el JavaScript 3.- Enlaces a los JavaScript 4.- Preparar imágenes 5.- Código de la página 6.- Funcionamiento del script 7.- Optimizar las leyendas 8.- Código completo de la página 9.Script picturefill.js
1.- Utilizar JavaScript 2.- Descargar el JavaScript 3.- Enlaces a los JavaScript 4.- Preparar imágenes 5.- Código de la página
6.- Visualización de la imagen responsive
7.- Código para las pantallas de alta definición (Retina) 8.- Código completo de la página
10.Script responsive-images.js 1.- Utilizar JavaScript 2.- Descarga la demo 3.- Código de la página 4.- Utilizar la página 11.Propuestas para el futuro
1.- Grupos de trabajo: RICG y W3C 2.- Grupos de trabajo: Apple y W3C 12.Tipografía responsive
1.- Objetivo
2.- Unidades utilizadas 3.- Unidad em y cascada 4.- Unidad rem y la cascada
3.- La solución de Geoff Yuen 4.- La solución de Chris Coyier 5.- Otras soluciones
UNIDAD DIDÁCTICA 8. FRAMEWORKS DE CSS
1.Utilizar los frameworks de CSS 2.Frameworks de CSS 3.UIkit 1.- Utilizar UIkit 2.- Descargar el framework 3.- Descargar jQuery 4.- Instalar el framework 5.- Crear una cuadrícula fluida 6.- Utilizar la cuadrícula fluida
7.- Utilizar la cuadrícula responsive de UIkit 8.- Crear una barra de navegación
9.- Crear una tabla con formato 4.Kube
1.- Utilizar Kube
2.- Descargar el framework 3.- Instalar el framework
4.- Crear una cuadrícula fluida y responsive 5.- Utilizar la cuadrícula fluida y responsive 6.- Insertar un formulario 7.- Insertar botones 5.Pure 1.- Utilizar Pure 2.- Descargar el framework 3.- Enlazar el framework
4.- Utilizar la cuadrícula fluida responsive 5.- Insertar una tabla
6.- Insertar una barra de menú con un menú desplegable
UNIDAD DIDÁCTICA 9. EL FUTURO DEL DISEÑO
1.Objetivos 2.Multicolumna
1.- Preceptos de uso
2.- Configuración de columnas 3.- Configuración de las calles
4.- Configuración de saltos de columna 5.- Distribución en varias columnas 6.- Un generador de multicolumnas 7.- Columnas y diseño responsive 3.Cajas flexibles
1.- Ubicación de los elementos de diseño 2.- Módulo de las cajas flexibles
8.- Alineación vertical de las cajas 9.- Excepciones en la alineación vertical 10.- Excepciones en la alineación horizontal 11.- Propiedades de la flexibilidad
12.- Propiedad flex-grow
13.- Propiedades flex-shrink y flex-basis 14.- Constructores en línea
15.- Ejemplo de diseño flexible 4.Otros módulos del W3C
1.- Recorrido 2.- Cuadrículas 3.- Plantilla de página 4.- Distribución 5.- Regiones
