Centro Privado Autorizado de Artes Plásticas y Diseño INUTEC

Creación, Programación y Diseño de paginas web con HTML5 Y CSS

Centro Privado Autorizado de Artes Plásticas y Diseño INUTEC
En Bilbao
  • Centro Privado Autorizado de Artes Plásticas y Diseño INUTEC

Curso gratis
subvencionado por el Estado
CURSO PREMIUM
¿Quieres hablar con un asesor sobre este curso?
¿Quieres hablar con un asesor sobre este curso?

Información importante

Tipología Subvencionado
Lugar Bilbao
Inicio Septiembre
  • Subvencionado
  • Bilbao
  • Inicio:
    Septiembre
Descripción

Debes saber que Emagister te ofrece la posibilidad de realizar el Máster en Monitor de Entrenamiento Funcional de Alto Rendimiento impartido por el Centro Privado Autorizado de Artes Plásticas y Diseño INUTEC. Si deseas iniciar un proceso de formación académica en el área de programación, esta es tú oportunidad de avanzar.

Aprenderemos los fundamentos de UI Design y la usabilidad aplicada al diseño de productos digitales,las técnicas profesionales de maquetación más actuales aplicadas en producción para maquetar cualquier web responsive a medida con HTML5 y CSS y a programar con JQurery el comportamiento de los elementosw de la interfaz de tu web o webapp.

Estos y otros conocimientos que la experiencia y el conocimiento que Emagister por medio del Centro Privado Autorizado de Artes Plásticas y Diseño INUTEC te darán para alcanzar un estatus superior. ¿A qué esperas para seguir avanzando? Haz clic en el botón "Pide información" para contactarte con el centro de formación e iniciar tu proceso.

Instalaciones (1) y fechas
Dónde se imparte y en qué fechas
Inicio Ubicación
Septiembre
Bilbao
PUENTE DE DEUSTO,7, 48014, Vizcaya, España
Ver mapa
Inicio Septiembre
Ubicación
Bilbao
PUENTE DE DEUSTO,7, 48014, Vizcaya, España
Ver mapa

A tener en cuenta

· ¿Cuáles son los objetivos de este curso?

Con este Curso especializado en maquetación web con HTML5 y CSS3 aprenderemos 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 versátiles y actuales aplicables en producción y todos los secretos de la creación de animaciones, transiciones y transformaciones utilizando CSS

· ¿A quién va dirigido?

Para desempleados y trabajadores en activo. Solo tus ganas y nuestra experiencia hacen falta para que seas un excelente profesional.

· Requisitos

No es imprescindible tener ningún conocimiento previo de paginas web.

· Titulación

CREACION, PROGRAMACION Y DISEÑO DE PAGINAS WEB CON HTML5 Y CSS

· ¿Qué pasará tras pedir información?

Te enviaremos información más detallada acerca del curso y las indicaciones para poder apuntarse, así que estate atento a la información que nos suministres.

Preguntas & Respuestas

Plantea tus dudas y otros usuarios podrán responderte

¿Qué aprendes en este curso?

Arquitectura de la información
Sintaxis
Páginas web
CSS
Eventos
Color
Exportación
jQuery
SEO
Diseño UX
HTML
Programación web
Desarrollo web
Sitios web
Tecnologías de desarrollo Front-end
Sitios web estáticos
Sitios web dinámicos
Montaje no lineal
Back-end
Sintaxis de HTML5

Profesores

Equipo Docente
Equipo Docente
Profesorado

Temario

DISEÑO DE INTERFAZ
• El proceso de Diseño de UX de un proyecto interactivo
• Aspectos esenciales de la Arquitectura de la información
• Diseñando un sistema de procesos compuestos por pantallas
• Ley de Hick/Hyman
• Ley de Fitts
• Principio de Pareto (Ley del 80/20)
• La UX y la usabilidad como agente primordial de las decisiones
• Fundamentos del diseño aplicados al diseño de interfaz
• Fundamentos del diseño Responsive. “Cambiando el chip”
• Guías de estilo
• Design Systems
• Fundamentos de la tipografía en proyectos digitales
• Diseño de textos en interfaces
• Representación de semántica y jerarquía visual
• Formas de generar contraste visual
• El espacio negativo
• Fundamentos del Color Luz
o Teoría del color
o Fundamentos técnicos del RGB
o Fundamentos de los perfiles de color
o Combinando colores
o Definiendo una paleta para nuestro proyecto
• Formatos de imagen en el diseño de interfaz
o Formatos Bitmap
o JPG, GIF y PNG
o Diferencias fundamentales de compresión
o El formato vectorial SVG
o Aplicaciones
o Ventajas
o Eligiendo correctamente el formato según el caso
• Trabajando para pantallas HDPi (Retina y similares)
• Diseño de elementos interactivos de una interfaz
• Diseño óptimo de un CTA (Call to Action)
• Diseñando “Componentes”
• Contenidos esenciales y habituales de una Homepage
• Diseño de iconos
o Fundamentos de Semiótica
o Conceptos esenciales en el diseño de un icono
o Creando sets de iconos
• Diseño de formularios
o Estructura y organización de un formulario
o Elementos de formulario
o Diseñando cada elemento maximizando su usabilidad
o Elementos de formulario en dispositivos táctiles
• Fundamentos esenciales de Adobe Photoshop
o Capas
o Formas
o Máscaras
o Ajustes de capa
o Técnicas no destructivas de trabajo con Photoshop
o Exportación
• Fundamentos esenciales de Adobe Illustrator
o Fundamentos del diseño vectorial en Illustrator
o Herramientas de creación
o Capas y mesas de trabajo
o El Buscatrazos
o Exportación de Assets

MAQUETACIÓN WEB Y ANIMACIÓN CON HTML5 Y CSS3
• Cómo funciona un navegador
• 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
• 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
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

DISEÑO RESPONSIVE
• Estructuras flexibles
• Media Queries
• Contenidos que se adaptan
• Imágenes en HTML
• Enlaces. La etiqueta «a»
• Estructuras de lista
• Construyendo menús
• Unidades de medida
• Bordes
• Maquetando estructuras
• Sombras de caja y de texto con CSS
• Filtros CSS
• Fondos con CSS
• Color de fondo
• Imágenes de fondo
• Degradados de fondo con CSS3
• 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

FLEXBOX (CSS FLEXIBLE BOX LAYOUT)
• Sistema de ejes principal y cruzado
• Propiedades CSS Flexbox para el elemento contenedor
• Propiedades CSS Flexbox para los elementos contenidos

GRID (CSS GRID LAYOUT)
o Fundamentos de CSS Grid
o Jugando con fracciones. La unidad fr
o Grids implícitos y explícitos
o El algoritmo de colocación automática de CSS Grid: grid-auto-flow
o Definiendo el tamaño de las pistas en CSS Grid
o La función «repeat»
o Colocando elementos grid
o «auto-fit» y «auto-fill»
o Grids responsive con minmax()
o Grid Areas
o Grid Lines
o Alineación
o Reordenación
o Anidación
o Flexbox y/o CSS Grid
o Diferencias
o Diseños de una dimensión VS dos dimensiones
o Complementando Flexbox y Grid
• Vídeo con HTML5
• Audio con HTML5
• Incrustando otras webs dentro de nuestra página. «iframe»
• Formularios HTML5
• Fundamentos de librerías de componentes web
• Atributos data- de HTML5
• SVG inline
• Fundamentos de preprocesado de CSS con SASS
• 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»

PROGRAMACIÓN DE INTERFACES CON JQUERY
• Lógica y abstracción aplicada a la programación
• Fundamentos básicos de la programación con JavaScript
• La importancia de dónde/cuándo cargo mi script
• Fundamentos y sintaxis de jQuery
• Creando objetos jQuery usando selectores CSS
• Efectos de animación con jQuery
o «Precocinados»
o Animando a medida
o Encadenado. La cola de animación
o Callbacks
o Usando jQuery para gestionar animaciones CSS
• Creando un sistema de pestañas
• Creando paneles desplegables
• Creando navegaciones “sticky”
• Estructura “interruptor”
• Manipulando el DOM
o Insertando etiquetas en el DOM
o Eliminando etiquetas
o Modificando los contenidos de una etiqueta
o Cambiando atributos de HTML
o Gestionando clases desde jQuery
o Modificando el CSS desde jQuery
• Creando dialogs (notificaciones) modales a medida
• Creando el front de una App de recordatorios (To-Do)
• Gestión de eventos
o Gestión de eventos con «on()» y «off()»
o Eventos de ratón
o Eventos de teclado
o Eventos de formulario
o Eventos de navegador
o Delegación de eventos
o El objeto «event»
• Usando las coordenadas del ratón
• Creando un tablón de post-it con jQuery
• El efecto bubbling (propagación)
• Animación del scroll de la ventana desde jQuery
• Scroll Parallax complejo con jQuery
• Traversing. Moviéndonos por el árbol del DOM
• Métodos de filtrado
• Expresiones regulares para validar formularios
• Carga asíncrona de información (AJAX) con jQuery
• Terminología y sintaxis
• Elementos estructurales de HTML5 y su valor semántico
• El modelo de caja y cómo ubicar elementos

• Funcionalidad y aplicación de propiedades CSS3
• Fondos y degradados usando CSS3
• Creación y modificación de estilos CSS3 de listas ordenadas, desordenadas y de definición
• Diseño y creación de formularios
• Datos tabulados con tablas
• Transiciones, transformaciones y animaciones CSS3
• Tipografías con @font-face
• Media-queries de CSS3. Creación de páginas web basadas en principios de responsive design
• Sprites y trabajo con imágenes en formato data-URI
• Principios de desarrollo basado en mejora progresiva
• Particularidades de las interfaces táctiles en el diseño de interacción
• Geolocalización con HTML5
• Audio y vídeo con HTML5
• Canvas
• Detección de capacidades del navegador
• Compatibilidad entre navegadores
• Optimización del rendimiento del sitio web
TÉCNICAS SEO
• Desarrollo de interactividad con jQuery
• Integración de capa social

INTRODUCCIÓN A CONCEPTOS
LA ATMÓSFERA DE UN WEBSITE
MINIMALISMO VS DETALLE

DISEÑO RESPONSIVE
EXPERIENCIA DE USUARIO (UX)
• Diseño de interfaces (UI)
• Wireframing
• Prototipos
• Repaso de Photoshop
• Photoshop vs. CMS
• Diseño completo de una página de moda
• Diseño completo de un home page creativo
CONCEPTOS BÁSICOS.
• Fundamentos en tecnologías web, interfaces de usuario y Apps.
• Diccionario de conceptos: UX, UI, IxD, UXC, Customer Journey Map, EH, AI.
• ¿Qué es la Usabilidad UX?. Referencias, recursos, libros, manuales.
• ¿Qué es la diseño de Interfaces UI?. Referencias, recursos.
• Cómo agilizar procesos (Lean start-up).
• Método de trabajo: Como Freelance o en Agencia.
• Herramientas colaborativas y administración de proyectos.
COSTUMER JOURNEY MAP.
• Workshop Inicial.
• Análisis de datos.
• Perfiles de usuario.
• Trabajo de campo.
• Customer Journey Map. UxCONSULTING.
• El UX y el consumidor (Consumer UX).
• El UX en la empresa (Enterprise UX).
• La observación.
• Realización de informes de UX.
CONTENIDO.
• Arquitectura de la Información (AI).
• Arquitectura de la Información como proceso.
• Documentación.
• Diseñar pensando en el Usuario. La usabilidad, Accesibilidad.
• Diseñar pensando en Google y en posicionamiento natural SEO.

DISEÑO.
• Diseño de interfaces.
• El diseño de la interacción.
• Sesiones creativas. Inspiración y referencias previas a un proyecto.
• Prototipado rápido: Wireframes. Balsamiq. Libreta.
• Crear y compartir prototipos: Invision, Adobe XD , Marvel.
ANALÍTICA WEB Y TEST DE USUARIOS.
• Evaluación heurística (EH).
• Test de usuarios.
• Google Analytics.
• Hotjar. Mapas de calor, grabaciones a usuarios, embudos de conversión.
• A/B testing. 5. Cambios de aplicaciones acordes a las mediciones.
PROYECTOS Creación de una app.
• 2. Creación de wireframes de un website.
• 3. Creación de inferfaces de usuario.
• 4. Trabajar con el cliente.
• 5. Trabajar con desarrolladores. Exportación de archivos.
• 6. Aplicar cambios que mejoren la usabilidad de los productos