Para qué te prepara:
Este Curso de Técnico TIC en Diseño Web Responsive con HTML5 y CSS3 le prepara para 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.
A quién va dirigido:
El Curso de Técnico TIC en Diseño Web Responsive con HTML5 y CSS3 está dirigido a todos aquellos desarrolladores y diseñadores web que deseen conocer y dominar el estándar HTML5 y CSS3. El curso se dirige igualmente a personas que, sin experiencia previa en el diseño y programación de páginas web, deseen por motivos personales o profesionales adquirir los conocimientos necesarios sobre diseño y programación para crear componentes web y poder utilizarlos en la compilación y generación de páginas web para su posterior publicación.
Titulación:
Doble Titulación Expedida por EUROINNOVA BUSINESS SCHOOL y Avalada por la Escuela Superior de Cualificaciones Profesionales
Objetivos:
- 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.
Salidas Laborales:
Diseño Web
Resumen:
Este Curso de Técnico TIC en Diseño Web Responsive con HTML5 y CSS3 ofrece una formación especializada en la materia, concretamente le ofrece una formación en diseño web responsive y cuyo objetivo es 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. El diseño web responsive se basa, fundamentalmente, en las media queries CSS3: aprenderemos a dominar esta técnica gracias a numerosos ejemplos. Pasaremos después a los diferentes aspectos del diseño responsive: las cuadrículas, las imágenes y la tipografía.
Metodología:
Entre el material entregado en este curso se adjunta un documento llamado Guía del Alumno dónde aparece un horario de tutorías telefónicas y una dirección de e-mail dónde podrá enviar sus consultas, dudas y ejercicios. La metodología a seguir es ir avanzando a lo largo del itinerario de aprendizaje online, que cuenta con una serie de temas y ejercicios. Para su evaluación, el alumno/a deberá completar todos los ejercicios propuestos en el curso. La titulación será remitida al alumno/a por correo una vez se haya comprobado que ha completado el itinerario de aprendizaje satisfactoriamente.
Temario:
- Objetivos - Mozilla Firefox - Google Chrome - Apple Safari - Microsoft Internet Explorer - El problema - El reset universal - El reset de Eric Meyer - El reset de HTML5 Doctor - El proyecto - Descargar Normalize.css - Instalar Normalize.css - Objetivo - Archivo de ejemplo - Librería html5shiv.js - Objetivo - Archivo de ejemplo - La librería respond.js - Objetivo - Descargar Modernizr - Crear una página de ejemplo - Instale y enlace el script Modernizr - La activación de Modernizr - Utilizar las clases de Modernizr - Utilizar Modernizr con JavaScript - Objetivo - Utilizar las reglas @supports - Operadores - Posicionamiento flotante - Colocar las cajas al lado - Prohibir la flotación - Ejemplo con cuatro cajas - Diseño simplista - Conclusión sobre diseñar con elementos flotantes - Párrafos en las celdas - Listas en tablas - Anchos fijos - Anchos en porcentaje - Propiedad table-layout - Propiedad border-collapse - Propiedad border-spacing - Propiedad empty-cells - Propiedad caption-side - Cuadrícula - Archivos CSS - Página de ejemplo - Enlaces a las hojas de estilo - Estilos personales - Contenedor del diseño - Bloques en 12 columnas - Bloques en las columnas de la cuadrícula - Prohibir los bloques flotantes adyacentes - Bloques con desplazamiento - Bloques centrados - Código completo de la página - El framework - Cuadrícula - Página de ejemplo - Archivos CSS - Enlaces a las hojas de estilo - Estilos personales - Contenedor del diseño - Sistema de clases - Bloque para todo el ancho - Tres bloques en un tercio de la cuadrícula - Dos bloques en 3/5 y 2/5 de la cuadrícula - Un solo bloque en 2/3 de la cuadrícula - Código completo de la página - Cuadrículas fluidas - Cuadrícula Gridiculous - Página de ejemplo - Descargar la cuadrícula - Instalar la cuadrícula - Estilos personales - Contenedor - Filas - Tres bloques con la misma anchura - Dos bloques con anchos distintos - Bloque desplazado - Visualización de la cuadrícula fluida - Esquema - Código HTML y CSS - Cuadrícula - Descargar e instalar la cuadrícula - Crear una página sencilla de 12 columnas - Vínculo a los estilos y a los scripts - Estructura del diseño - Reglas CSS - Descargar e instalar Simple Grid - Filas - Esquema - Primera fila - Segunda fila - Tercera fila - Utilizar la cuadrícula fluida y responsive - Código completo - Utilizar Columnal - Descargar e instalar Columnal - Esquema - Contenedor y filas - Primera fila - Segunda fila - La tercera fila y el desplazamiento - La cuarta fila y bloques anidados - Utilizar la cuadrícula fluida y responsive - Código completo del diseño - Imágenes responsives - Código completo para el diseño con una imagen responsive - Objetivo - Diseño fijo - Diseño fluido - Ancho fluido de otros elementos - Anchos de imágenes fluidas - Abrir y cambiar el tamaño de la página - Código completo de la página - Utilizar JavaScript - Descargar el JavaScript - Enlaces a los JavaScript - Preparar imágenes - Código de la página - Funcionamiento del script - Optimizar las leyendas - Código completo de la página - Utilizar JavaScript - Descargar el JavaScript - Enlaces a los JavaScript - Preparar imágenes - Código de la página - Visualización de la imagen responsive - Código para las pantallas de alta definición (Retina) - Código completo de la página - Utilizar JavaScript - Descarga la demo - Código de la página - Utilizar la página - Grupos de trabajo: RICG y W3C - Grupos de trabajo: Apple y W3C - Objetivo - Unidades utilizadas - Unidad em y cascada - Unidad rem y la cascada - Tipografía responsive y unidad rem - Tipografía responsive y fuentes - Unidades relacionadas con el viewport - Objetivo - Zurb - La solución de Geoff Yuen - La solución de Chris Coyier - Otras soluciones - Utilizar UIkit - Descargar el framework - Descargar jQuery - Instalar el framework - Crear una cuadrícula fluida - Utilizar la cuadrícula fluida - Utilizar la cuadrícula responsive de UIkit - Crear una barra de navegación - Crear una tabla con formato - Utilizar Kube - Descargar el framework - Instalar el framework - Crear una cuadrícula fluida y responsive - Utilizar la cuadrícula fluida y responsive - Insertar un formulario - Insertar botones - Utilizar Pure - Descargar el framework - Enlazar el framework - Utilizar la cuadrícula fluida responsive - Insertar una tabla - Insertar una barra de menú con un menú desplegable - Preceptos de uso - Configuración de columnas - Configuración de las calles - Configuración de saltos de columna - Distribución en varias columnas - Un generador de multicolumnas - Columnas y diseño responsive - Ubicación de los elementos de diseño - Módulo de las cajas flexibles - Cajas flexibles - Orientación y dirección de las cajas - Desbordamiento de las cajas - Orientación de las cajas - Alineación horizontal de las cajas - Alineación vertical de las cajas - Excepciones en la alineación vertical - Excepciones en la alineación horizontal - Propiedades de la flexibilidad - Propiedad flex-grow - Propiedades flex-shrink y flex-basis - Constructores en línea - Ejemplo de diseño flexible - Recorrido - Cuadrículas - Plantilla de página - Distribución - Regiones UNIDAD DIDÁCTICA 1. INTRODUCCIÓN
UNIDAD DIDÁCTICA 2. SOLUCIONES PARA LA COMPATIBILIDAD
UNIDAD DIDÁCTICA 3. EL DISEÑO CLÁSICO
UNIDAD DIDÁCTICA 4. DISEÑAR CON TABLAS
UNIDAD DIDÁCTICA 5. CUADRÍCULAS DE DISEÑO
UNIDAD DIDÁCTICA 6. MEDIA QUERIES
UNIDAD DIDÁCTICA 7. EL DISEÑO RESPONSIVE
UNIDAD DIDÁCTICA 8. FRAMEWORKS DE CSS
UNIDAD DIDÁCTICA 9. EL FUTURO DEL DISEÑO