Requisitos: no se necesitan conocimientos previos.
Comentarios:
Maquetación con estándares W3C, desarrollo responsive, animación HTML5.
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. Leer más
En el curso los alumnos aprenderán, además de las distintas técnicas de maquetación web siguiendo estándares W3C, todos los secretos de la creación de animaciones, transiciones y transformaciones utilizando CSS, algo vital para la creación de banners aplicables al mundo mobile y de esos elementos de interfaz que ayudan a mejorar la experiencia del usuario.
Nº alumnos clase: 8 máximo.
Precio: 900 €/persona (Formación exenta de IVA según Artículo 20 apartado 1 nº9 de la ley 37/92 del 28 de diciembre de 1992).
• Bonificable por la Fundación Estatal. • Descuento del 6 % para las matrículas realizadas un mes antes del inicio.
Lugar de impartición:
en Madrid
Titulación que se obtiene:
Título propio: diploma de realización.
Inicio: 23 de mayo de 2018. Fin: 6 de julio de 2018. Horario: lunes, miércoles y viernes, de 19:00 a 22:00 horas.
• “Bienvenidos al mundo del desarrollo web” o Tecnologías de desarrollo Front-end o Sitios web estáticos VS sitios web dinámicos o 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
• Organización de archivos del Front-end de un proyecto web Leer más
• Maquetación web según estándares W3C
• 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 o Separando formato de contenido o Cargando CSS en un archivo HTML o Sintaxis de las reglas CSS
• Selectores CSS comunes
• Selectores CSS avanzados (de niveles 2, 3 y 4)
• Pseudoelementos CSS «::before» y «::after»
• Jerarquía de selectores CSS
• Usando la cascada de CSS
• Propiedades CSS para formato de textos
• Carga de tipografías en CSS con «@font-face» y desde servidor de terceros (Google Fonts…)
• Los modelos de caja o Componentes (ancho, alto, padding, borde y margen) o Modelo de caja Clásico o «content-box» o Modelo de caja «border-box»
• La propiedad CSS «display»
• Elementos flotantes. El uso del «float» hoy
• Visibilidad de las etiquetas
• Controlando el desbordamiento con «overflow»
• La propiedad «position». Ubicando elementos con CSS
• Responsive. La presentación de contenidos se adapta o Estructuras flexibles o Media Queries o Contenidos que se adaptan
• Imágenes en HTML o El atributo «alt». Optimizando accesibilidad, SEO y usabilidad o Haciendo responsive las imágenes o El atributo «srcset»
• Enlaces. La etiqueta «a» o Creando hipervínculos. La esencia de la web o Anclas o Vínculos de correo (mailto)
• Estructuras de lista o Listas ordenadas o Listas desordenadas o Listas de definición
• Construyendo menús o Menús en columna o Barras de navegación o Dropdowns (desplegables) con CSS o Menús responsive o Menús responsive con patrón «botón hamburguesa» o Menús offCanvas
• Unidades de medida o Unidades px o Unidades % o Unidades em o Unidades rem o Unidades vw o Unidades vh o Unidades ch
• Bordes
• Sombras de caja y de texto con CSS
• Filtros CSS
• Fondos con CSS
• Colores de fondo
• Definiendo el área del fondo con «background-clip»
• Imágenes de fondo o Cambiando el tamaño de la imagen de fondo o Ajustando el tamaño de la imagen de fondo con «cover» y «contain» o Patrones de fondo
• Degradados de fondo con CSS3 o Degradados lineales o Degradados radiales o Degradados en repetición
• 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 o Propiedades de animación o Keyframes o Aceleraciones o Animaciones anidadas o Animaciones en bucle o Animaciones de entrada o Animaciones por pasos o Best practices de rendimiento en animación de propiedades CSS o Aplicando principios de animación a la UI con CSS o La animación como elemento que mejora la UX
• Maquetando patrones de estructura o Estructura con contenidos de ancho fijo y centrado o Estructuras con columnas de ancho fijo o Estructuras con columnas de ancho flexible (adaptativo) o Estructura de ancho flexible con contenido de ancho fijo y centrado o Estructura en cuadrícula o Cards o Estructuras responsive
• Flexbox o Sistema de ejes principal y cruzado o 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» o 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»
• Video HTML5 o Atributos o Formatos de vídeo o Guerra de codecs o Haciendo responsive los vídeos
• Audio HTML5
• Incrustando otras webs dentro de nuestra página. «iframe» o Incrustando videoplayer de youTube, Vimeo… o Incrustando Google Map o Haciendo responsive los iframes
• Formularios HTML5 o Elementos de formulario o Soporte a etiquetas HTML5 o Estilando elementos de formulario con CSS
• Atributos data- de HTML5
• SVG inline o Introducción a los elementos y atributos de SVG o Modificando los atributos SVG con CSS o Usando símbolos e instancias SVG en HTML para usar set de iconos eficientemente o Optimización de SVG o Fallbacks a PNG
• Etiquetas Meta
• Técnicas de SEO on site
• Integración de capa social o Twitter cards o Facebook Open Graph o Integración de botones «Me gusta» y «Retweet»
• Desarrollo de interactividad con jQuery o Introducción a la integración de jQuery o Modificación y animación de propiedades CSS o Control de la visibilidad de los elementos o Eventos o Integración de plugins jQueryLeer menos
