Curso online de maquetación y animación web con HTML5 y CSS3
Información
FICTIZIA
Online
Curso
Con este Curso especializado en maquetación web con HTML5 y CSS3 aprenderás desde cero a desarrollar con éxito cualquier proyecto web basado en tecnologías HTML5, incluyendo aquellos que requieren ser "responsive" para adaptarse eficazmente a cada dispositivo. En el curso los alumnos aprenderán todo sobre la semántica implícita en HTML5, técnicas de SEO on site, las distintas técnicas de maquetación web más sátiles y actuales aplicables en producción y todos los secretos de la creación de animaciones, transiciones y transformaciones utilizando CSS, algo vital para la creación de piezas de publicidad aplicables al mundo mobile y de microinteracciones en elementos de la interfaz que ayudan a mejorar la experiencia del usuario. Requisitos No se necesitan conocimientos previos. Temario completo de este curso · «Bienvenidos al mundo del desarrollo web» Tecnologías de desarrollo Front-end Sitios web estáticos VS sitios web dinámicos El Front-end como parte de una cadena de montaje no lineal Front-end + Back-end. Pipeline en un sitio dinámico Fundamentos y tecnologías de Back-end · Cómo funciona un navegador · Organización de archivos del Front end de un proyecto web · Terminología, estructura y sintaxis de HTML5 · Etiquetas y atributos de HTML5 · La semántica como factor decisivo · Principios de desarrollo basado en mejora progresiva · Fundamentos de CSS Separando formato de contenido Cargando CSS en un archivo HTML Sintaxis de las reglas CSS Especificidad La cascada de CSS · Selectores CSS más comunes · Selectores CSS avanzados (de niveles 2, 3 y 4) · Pseudoelementos CSS «::before» y «::after» · Jerarquía de selectores CSS · Propiedades CSS para formato de textos · Carga de tipografías desde servidor de terceros (como Google Fonts) · Carga de tipografías en CSS con «@font-face» · Los modelos de caja Componentes (ancho, alto, padding, borde y margen) Modelo de caja Clásico o «content-box» Modelo de caja «border-box» · La propiedad CSS «display» · Visibilidad de las etiquetas · Controlando el desbordamiento con «oflow» · La propiedad «position». Ubicando elementos con CSS · Responsive. La presentación de contenidos se adapta Estructuras flexibles Media Queries Contenidos que se adaptan · Imágenes en HTML El atributo «alt». Optimizando accesibilidad, SEO y usabilidad Haciendo responsive las imágenes El atributo «srcset» · Elementos flotantes. El uso del «float» hoy · Enlaces. La etiqueta «a» Creando hipervínculos. La esencia de la web Anclas Vínculos de correo (mailto) · Estructuras de lista Listas ordenadas Listas desordenadas Listas de descripción · Construyendo menús Menús en columna Barras de navegación Dropdowns (desplegables) con CSS Menús responsive Menús responsive con patrón «botón hamburguesa» Menús offCanvas · Unidades de medida Unidades px Unidades % Unidades em Unidades rem Unidades vw Unidades vh Unidades ch · Bordes · Maquetando estructuras Estructura con contenidos de ancho fijo y centrado Estructuras con columnas de ancho fijo Estructuras con columnas de ancho flexible (adaptativo) Estructura de ancho flexible con contenido de ancho fijo y centrado Estructura en cuadrícula Cards Estructuras responsive · Sombras de caja y de texto con CSS · Filtros CSS · Fondos con CSS Color de fondo Imágenes de fondo Cambiando el tamaño de la imagen de fondo Ajustando el tamaño de la imagen de fondo con «co» y «contain» Patrones de fondo Degradados de fondo con CSS3 Degradados lineales Degradados radiales Degradados en repetición Definiendo el área del fondo con «background-clip» Particularidades del fondo de la etiqueta «body» · Modos de fusión de imagen y color mediante «background-blend-mode» · Tablas. Tabulando datos · Columnas con CSS · Transformaciones CSS. Escalando, rotando, sesgando y trasladando etiquetas · Transiciones CSS. Animando los cambios en las propiedades · Animaciones CSS Propiedades de animación Keyframes Aceleraciones Animaciones anidadas Animaciones en bucle Animaciones de entrada Animaciones por pasos Best Practices de rendimiento en animación de propiedades CSS Aplicando principios de animación a la UI con CSS La animación como elemento que mejora la UX · Flexbox (CSS Flexible Box Layout) Sistema de ejes principal y cruzado Propiedades CSS Flexbox para el elemento contenedor Convirtiendo en elemento Flexbox con «display: flex» e «inline-flex» Intercambiando los ejes con «flex-direction» Envolviendo a los hijos con «flex-wrap» La forma corta «flex-flow» Colocando a los hijos sobre el eje principal con «justify-content» Colocando a los hijos sobre el eje cruzado con «align-items» y «align-content» Propiedades CSS Flexbox para los elementos contenidos Alineación en el eje cruzado de un elemento concreto con «self-align» Cambiando el orden de los elementos con «order» Tamaño base con «flex-basis» Límites de adaptación con «flex-grow» y «flex-shrink» La forma corta «flex» · Grid (CSS Grid Layout) Fundamentos de CSS Grid Jugando con fracciones. La unidad fr Grids implícitos y explícitos El algoritmo de colocación automática de CSS Grid: grid-auto-flow Definiendo el tamaño de las pistas en CSS Grid La función «repeat» Definiendo tamaños de elementos grid Colocando elementos grid «auto-fit» y «auto-fill» Grids responsive con minmax() Grid Areas Grid Lines Alineación Reordenación Anidación Flexbox y/o CSS Grid Diferencias Diseños de una dimensión VS dos dimensiones Complementando Flexbox y Grid · Vídeo con HTML5 Atributos Formatos de vídeo Guerra de codecs Añadiendo subtítulos Haciendo responsive un vídeo HTML5 · Audio con HTML5 · Incrustando otras webs dentro de nuestra página. «iframe» Incrustando videoplayers de Youtube, Vimeo… Incrustando Google Maps Haciendo responsive los iframes · Formularios HTML5 Elementos de formulario Soporte a etiquetas HTML5 Estilando elementos de formulario con CSS · Web semántica y accesibilidad Accesibilidad Semántica Principios de accesibilidad Guidelines de accesibilidad · Fundamentos de librerías de componentes web Bootstrap Foundation Otras (UIKit, Skeleton, SemanticUI…) · Atributos data- de HTML5 · SVG inline Introducción a los elementos y atributos de SVG Modificando los atributos SVG con CSS Usando símbolos e instancias SVG en HTML para usar set de iconos eficientemente Optimización de SVG Fallbacks a PNG · Fundamentos de preprocesado de CSS con SASS · Etiquetas Meta · Técnicas de SEO on site · Etiquetas meta para integración con redes sociales Twitter cards Facebook Open Graph más
Otros cursos de esta academia
Máster en desarrollo Frontend con HTML5, CSS, JavaScript y React
(FICTIZIA)
Los asistentes a este máster aprenden todo sobre la semántica implícita en html5, técnicas de seo on site y las técnicas profesionales más actuales aplicadas en...
Máster en 3D y VFX con Autodesk Maya
(FICTIZIA)
El enfoque teórico–práctico del máster tiene por objetivo que los alumnos adquieran no solo toda la cualificación meramente técnica necesaria para llevar a buen...
Curso de JavaScript
(FICTIZIA)
Además, conocerán en profundidad además todo lo necesario para desenvolverse con soltura en un entorno de desarrollo web moderno y con un flujo de trabajo eficiente:...
Curso de maquetación y animación web con HTML5 y CSS3
(FICTIZIA)
Con este curso especializado en maquetación web con html5 y css3 aprenderás desde cero a desarrollar con éxito cualquier proyecto web basado en tecnologías html5...
Curso de Angular
(FICTIZIA)
No tendrán porqué desarrollar en typescript o es2015: pueden seguir usando si lo desean javascript «vainilla» y se ejecutará sin traspilación ni problema alguno...
Curso de Node.js
(FICTIZIA)
Js, los alumnos aprenderán a crear varias aplicaciones con node... js orientado a desarrolladores con experiencia previa con javascript se entra en detalle en el...
Curso de Python
(FICTIZIA)
Y obteniendo una base sólida de los fundamentos del lenguaje y las partes fundamentales de la librería estándar... por ese motivo de ofrecer a sus alumnos lo que...
Máster en Postproducción y VFX con Foundry Nuke
(FICTIZIA)
Con este máster en postproducción y vfx con foundry nuke los alumnos aprenden todos los fundamentos técnicos y artísticos necesarios para realizar los efectos especiales...
Máster en Motion Graphics con After Effects y Cinema 4D
(FICTIZIA)
Corrección de color o introducción al tracking, con adobe after effects; a las herramientas de modelado de geometría poligonal, las poderosas herramientas de...
Curso de Etalonaje con DaVinci Resolve
(FICTIZIA)
Esto significa, que al finalizar el curso no sólo podrá corregir color con davinci resolve, sino que podrá resolver planos con otros softwares como final cut pro...