Maquetado Avanzado: HTML5 y CSS3

Transcripción

1 Maquetado Avanzado: HTML5 y CSS3 Programa de Estudio

2 Maquetado Avanzado: HTML5 y CSS3 Domina lo último de los lenguajes más importantes en la Web: HTML 5 y CSS 3. Aprende a realizar sitios Web de última generación con poderosos efectos multimediales, animaciones, utilización avanzada de video y sonido, manejo de Javascript, formularios avanzados y mucho más... Contenido del curso El curso integra conocimientos avanzados de HTML y CSS para poder convertir a quien asista en un futuro desarrollador FrontEnd o maquetador experto. Brindando herramientas integrales de compatibilidad de JS para poder complementar a fondo el conocimiento y las posibilidades que brindan HTML y CSS en su máxima expresión PRÁCTICAS EN CLASE :: A lo largo de este curso aprenderás a trabajar con elementos semánticos complejos, de multimedia e interactivos de HTML5. Conocerás propiedades avanzadas, así como selectores de CSS3 que nunca antes habías visto. Lograrás estupendas creaciones y desarrollos con la ayuda de estos dos lenguajes y el complemento de librerías de JS como el modernizr para lograr compatibilidad absoluta de todos los elementos trabajados. Público Este curso está orientado a maquetadores Junior, a aquellos que quieran complementar sus conocimientos iniciales de HTML y avanzar en el camino de la programación y el desarrollo, y también a desarrolladores BackEnd que busquen ser Full Stack Web Deveolpers. Salida Laboral Al finalizar este curso serás un Maquetador Experto y habrás comenzado el camino para

3 convertirte en un excepcional desarrollador FrontEnd. Requisitos Se requieren conocimientos sólidos en maquetación con HTML5 y CSS3 o haber realizado el curso Maquetación Web: HTML 5 y CSS. Es recomendable contar con conocimientos en programación con Javascript o haber realizado el curso Introducción a la Programación con Javascript. Modalidad de cursado Puedes tomar este curso en modalidad presencial o modalidad a distancia

4 En este curso aprenderás a Trabajar con elementos como progress, meter, y details Conseguir una completa solución de compatibilidad de todos tus elementos Utilizar selectores avanzados de CSS3 como sobras de caja, de texto, animaciones y transformaciones. Implementar tipografias especiales, Google Fonts e icomoon Conocerás como personalizar controles de video y de audio Trabajar con elementos de formulario avanzados

5 Plan de Estudios

6 1. El mundo de los elementos Elementos semánticos nuevos de HTML5 - header, section, article, aside, main, footer, nav, address Elemento de figure y figcaption - Meter - Progress - Details, summary - Ruby Personalización de todos los elementos con CSS Modernizr, introucción, implementación y soluciones con Javascript 2. Multimedia y algo mas Elementos semánticos extras - time, mark, wbr Elementos de Multimedia Elementos de multimedia básicos - embed, iframe, object Video - atributos, formatos, source Audio - atributos, formatos, source SVG Canvas Modernizr implementación de soluciones alternativas Personalización de Video y Audio con Javascript 3. Formularios, comenzando con CSS3 y Fuentes de Fantasía Elementos de Formulario HTML5 Selectores de Formulario - :valid, :invalid, :checked, etc Modelos Nuevos de Color - rgba, hsl, hsla) Esquinas Redondeadas - implementaciones y variantes Sombras de Caja - implementaciones, sombras múltiples

7 Sombras de Texto - implementaciones, sombras múltiples Fuentes de Fantasía formatos, variantes Google Fonts IcoMoon - introduccion a la aplicación, modo de implementación Soluciones con Modernizr 4. Introducción a propiedades de Fondo Fondos Multiples - background-origin - background-clip - background-size - background-blend-mode uso y compatibilidad gradientes - circulares, radiales, viriantes, filter para IE border-image - implementaciones y aplicación para facilitar su uso box-sizing - usos e implementación Selectores Avanzados - :first-child, :nth-child(n), etc Aplicación de selectores avanzados en menues de CSS3 y demás ejemplos 5. Animando, transformando y haciendo transiciones Transform rotate Transform rotatex, rotatey, rotatez Transform-origin Perspective, perspective origin Transform Scale, Transform Translate, Transform Skew Backface-visibility Transiciones - variantes, implementaciones, usos y ejemplos Animaciones - variantes, implementaciones, usos y ejemplos)

8 Uso de animation-play-state y Javascript Comentarios generales sobre las API de Geolocalización y drag and drop Comentarios generales sobre los SCHEMAS, que son? Para que sirven?

9 Lavalle 648 Piso 8, Microcentro, CABA EducaciónIT. Copyright