¡Este Curso ya no está disponible!

Aquí tienes otras opciones similares

Curso de Maquetación web con HTML5 y CSS3

FICTIZIA EXPERINCE S.L

Cursos

  

Madrid

  

Convocatoria Abierta

  

60 horas

  

Bonificado. Promoción

Descripción

Obtendrás una base profesional para desarrollar cualquier proyecto web mediante la programación con tecnologías HTML5.

También aprenderás todas las técnicas de maquetación para mejorar y facilitar la experiencia del usuario con undiseño organizado y accesible mediante CSS y siguiendo los estándares W3C. 

Objetivos

Ser capaz de realizar Front-end y aprender distintas técnicas de maquetación con W3C de forma profesional y experta.

Requisitos

No se necesita ningún requisito previo.

Temario

  • “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
  • Organización de archivos del Front-end de un proyecto web
  • 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
    • Separando formato de contenido
    • Cargando CSS en un archivo HTML
    • 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
    • Componentes (ancho, alto, padding, borde y margen)
    • Modelo de caja Clásico o «content-box»
    • 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
    • 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»
  • 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 definició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
  • 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
    • Cambiando el tamaño de la imagen de fondo
    • Ajustando el tamaño de la imagen de fondo con «cover» y «contain»
    • Patrones de fondo
  • Degradados de fondo con CSS3
    • Degradados lineales
    • Degradados radiales
    • 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
    • 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
  • Maquetando patrones de estructura
    • 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
  • Flexbox
    • 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»
  • Video HTML5
    • Atributos
    • Formatos de vídeo
    • Guerra de codecs
    • Haciendo responsive los vídeos
  • Audio HTML5
  • Incrustando otras webs dentro de nuestra página. «iframe»
    • Incrustando videoplayer de youTube, Vimeo…
    • Incrustando Google Map
    • Haciendo responsive los iframes
  • Formularios HTML5
    • Elementos de formulario
    • Soporte a etiquetas HTML5
    • Estilando elementos de formulario con CSS
  • 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
  • Etiquetas Meta
  • Técnicas de SEO on site
  • Integración de capa social
    • Twitter cards
    • Facebook Open Graph
    • Integración de botones «Me gusta» y «Retweet»
  • Desarrollo de interactividad con jQuery
    • Introducción a la integración de jQuery
    • Modificación y animación de propiedades CSS
    • Control de la visibilidad de los elementos
    • Eventos
    • Integración de plugins jQuery

Convocatorias

Convocatoria Abierta

Financiacion

¡Consulta promociones y descuentos! Formación bonificable por la Fundación Tripartita, organismo gestor de los fondos dedicados a formación continua para los trabajadores. A través de esta fundación estatal, todas las empresas pueden beneficiarse de ayudas económicas a los distintos planes de formación a sus empleados que quieran llevar a cabo y que se hacen efectivas mediante bonificaciones en las cotizaciones a la Seguridad Social. Fictizia Empresas incluye, entre los servicios que ofrece, la gestión de los trámites con la Fundación Estatal para la bonificación de sus programas de formación a medida.

Profesores

 
Ángel Corral AriasÁngel Corral. Digital Product Designer y Desarrollador Front-end con más de 10 años de experiencia. Desde hace 9 años compagina con la docencia su trabajo para clientes como LG, Qbicom, MBO, Cohética digital, el Sindicato de Petróleo y Gas argentino, el Dpto. de infografía de El Mundo o jDownloader. Es además coautor de dos guías prácticas editadas por Anaya Multimedia y está certificado como Adobe Certified Expert.

Lugares

Madrid

Metodologia

Teórico-práctica. Cada día de clase, las horas lectivas se componen de exposiciones de los contenidos teóricos del curso por parte del profesor intercaladas con ejercicios prácticos desarrollados entre este y los alumnos. 

Cursos

     

Convocatoria Abierta

  

60 horas

  

Bonificado. Promoción


EN AVANZA EN TU CARRERA TE AYUDAMOS  

En Avanza en tu Carrera tenemos más de 50.000 cursos para ti. Te orientamos y asesoramos para que elijas tu formación. Elige la opción que más te interese: Formación Profesional, Oposiciones, Grados, Postgrados y mucho más.

ÁREAS MÁS SOLICITADAS  

BUSCA TUS CURSOS EN TU PROVINCIA