Introducción al Diseño y Desarrollo web

Temario

HTML 5

Introducción al funcionamiento de las páginas web (protocolo http; servidor web; hosting; dominios; diferencia entre sitios estáticos y dinámicos).

Principios de HTML (Hyper Text Markup Language o lenguaje de marcado de hipertexto). ¿Qué es? Su evolución. Etiquetas y elementos HTML; estructura de programación. Uso e importancia de los comentarios. Estructura de un documento HTML (básica y completa). 

• Desafío 1 - Creación de un documento HTML completo y aplicación de algunas de las etiquetas aprendidas.

Instalación de Visual Estudio Code. Plugins. Interfaz de uso. 

Etiquetas estructurales (¡DOCTYPE, html, head y body). Funciones y reglas básicas. Etiquetas generales (imágenes, links, formateo de texto, encabezados, párrafos y otras). Etiquetas en desuso. 

• Desafío 2 - Uso de etiquetas y sus atributos en un proyecto concreto.

Capas y contenedores. Principios de estructuración web: elementos en línea y en bloque (fundamentos y comportamiento). La etiqueta <div> y la etiqueta <span> (contenedores genéricos sin valor semántico). Detalles de su uso. Utilización y correcta aplicación de las etiquetas semánticas estructurales de HTML5. Anidamiento de etiquetas. Mapa del sitio y principio básico de navegabilidad.

• Desafío 3 - Inicio del primero proyecto: estructurar una web de cinco páginas aplicando los conceptos aprendidos y las etiquetas semánticas de HTML5.

CSS:

¿Qué es CSS? (hojas de estilo en cascada). Estructura de programación. Sintaxis. Reglas de estilo, selector y declaración; propiedad/valor. Creación y vinculación con el documento HTML de una hoja de estilo. Selectores globales y no globales. class e id. Usos y diferencias. Formas de aplicar una regla de estilo. Ejemplos de aplicación concreta. Agrupamiento de estilos. Margin y padding, concepto y uso. Organización de la hoja de estilos.

• Desafío 4 - Inicio de la mejora estética del sitio según los lineamientos planteados en clase.

Herencia de estilos y concepto de cascada. Anidamiento de estilos. Conflictos en la aplicación de estilos: claves para solucionarlos. Propiedades width y max-width. Imágenes y estructuras responsivas. Orden correcto de las declaraciones de estilo. Nuevas propiedades y recursos de CSS: overflow, clase active, creación de componentes reutilizables, bordes, hover, agregar íconos a listas, etc. Creación del menú de navegación.

• Desafío 5 - Completar la mejora estética del sitio.

Posicionamiento de cajas/capas. Posicionamiento absoluto, relativo, fijo y estático. Detalles y modos de uso. Características y comportamiento. Ejemplos de aplicación. Uso de float y clear. Mover elementos con coordenadas según su posicionamiento. Manipulación del eje Z. Estructuración web usando capas contenedoras y posicionamiento flotante. Estructura siempre centrada y fluida. 

• Desafío 6 - Crear una estructura base responsiva aplicando los conceptos aprendidos. Aplicar todo lo visto al sitio ya desarrollado.

Uso de fuentes: seguras, externas y personalizadas. Uso de colores: nombres cross-browser, hexadecimal, rgb y rgba. Aplicación y modos de uso. Uso de la propiedad border-radius. Imágenes de fondo (css y html). Detalles y modo correcto de uso. Uso y aplicación de la propiedad background para crear un layouts modernos y sofisticados. Pseudo-clases y pseudo-elementos. Características y formas de aplicación. Ejemplos prácticos. Selectores avanzados. Comportamiento e interactividad con CSS3.Uso de la propiedad transition.

• Desafío 7 - Resolución de un trabajo práctico interactivo, donde deben aplicar los selectores.

Visibillity, display y opacity. Características y modos de uso. Ejemplos prácticos. Evento Click con pseudo-clases y selectores avanzados. Ocultar/mostrar contenido, galería de imágenes y ventana modal. Llevar a producción el proyecto (poner online).

• Desafío 8 - Incorporar los recursos de comportamiento e interactividad aprendidos al sitio desarrollado y subirlo al servidor de pruebas 

Etiquetas de ayer y de hoy. Estructura semántica y compatibilidad con navegadores. Solución a los problemas actuales del estándar. Nuevas etiquetas, atributos y recursos de HTML5. Usos y tips. Imágenes SVG y uso de Icon-fonts. Favicon.

• Desafío 9 - Creación de una landing page profesional.

Formularios en HTML5. Nuevos input. Función y estructura. Estilos y usos. Etiqueta video y audio. Técnica correcta de aplicación cross-browser. Formatos de video. Compatibilidad con navegadores. Tips fundamentales.

• Desafío 10 - Creación de un formulario para página de contacto para el sitio trabajado. 

Diseño web

Pasos previos: instalación de navegadores e instalación de extensiones fundamentales para desarrolladores. Detalles de su uso. Responsive web design. Conceptos iniciales. Características y detalles de funcionamiento. Fluid layout. Abordaje de un caso real. La importancia del boceto o prototipo (wireframes en baja). Detalles y características. 

• Desafío 11 - Realización del boceto/prototipo en papel de proyecto de cliente real.

Planificación del proyecto. Estructura y jerarquía de elementos: uso del sistema de grillas. ¿Qué width usar? Detalles clave sobre el proceso de trabajo. Uso de plataforma colaborativa para diseño web Figma / Adobe XD. Realización del prototipo del sitio en Figma / Adobe XD  Planteamiento de tres versiones: pc, tablets, mobile.

• Desafío 12 - Realización del boceto/prototipo (wireframe en media) digital con uso del sistema de grillas.

Maquetación web con HTML5 y CSS3. Técnicas para programar la estructura web a partir del prototipo. Detalles del proceso con el foco puesto en responsive web design.

• Desafío 13 - Proceso de maquetación web.

¿Qué es RWD? ¿Cuál es su principio de funcionamiento? Ajustes preliminares necesarios: cinco pasos fundamentales que todo desarrollador web profesional debería aplicar para garantizar el buen funcionamiento de su código. ¿Y las fuentes? Técnica para definir de manera correcta el tamaño de nuestras fuentes. Teoría y práctica de los tres principios básicos del RWD. Uso correcto de los media queries. Mobile first y non-mobile first. Tips clave. Aplicación práctica de mobile first usando servidor local (testing on local server). Retina display. Patrones de diseño responsive. 

• Desafío 14 -  Aplicar RWD al sitio desarrollado. 

Optimización responsive del proyecto: aplicación de todos los conceptos de RWD al sitio desarrollado. Desarrollo de un menú off-canvas.

• Desafío 15 - Completar el sitio y subirlo al servidor de pruebas.

Experiencia de persona Usuaria

Diseño centrado en la persona usuaria. Áreas del UX. UX Reserch. User persona. POV. MVP. User flow. Accesibilidad.

• Desafío 16 - Creación de un User Persona. 

Atomic design. Estándares y Guidelines. Sistemas de diseño. Evaluación Heurística. Metodologías del sector.

• Desafío 17 - Realizar la evaluación Heurística del sitio diseñado. Implementar mejoras.

Frameworks front-end

¿Qué son? ¿Para qué sirven? Ventajas y desventajas. ¿Cómo elegir el framework correcto? Bootstrap, primeros pasos: detalles de funcionamiento e instalación. El sistema de grillas y su uso correcto. Aplicación concreta del sistema de grillas usando correctamente las clases del framework. Sistema mobile-first. Claves de su aplicación. Utilidades responsive. Técnica de maquetación con Bootstrap.

• Desafío 18 - Maquetar en HTML un portfolio one-page según Figma entregado.

Entrega del sitio

Registrar un dominio nacional – contratar un servicio de hosting. Validar el código HTML y CSS. Optimización del sitio para mejorar su posicionamiento. SEO: ¿Qué es? Detalles clave. SEO on-page. Optimización clave y fundamental. UX Writing. Herramientas para webmasters de Google. Dar de alta el sitio en Google (confirmar propiedad y brindarle un mapa del sitio para mejorar la indexación). Vincular con Google Analytics. Detalles sobre el uso de esta herramienta fundamental.

• Desafío 19 - Aplicar todos lo visto sobre SEO + UX Writing al sitio web del cliente real que deben presentar como trabajo final.

Presentación de proyecto

Portfolio. Pitch (Elevator Spitch) y técnicas de venta para la presentación de proyectos.

Desafío 20 - Elaborar la Presentación del proceso de diseño y desarrollo del sitio web. Plus: armar portfolio personal.

Cursado

Destinatarios

Inscripción

Medios de pago: Transferencia

Plazo máximo de realizar el pago:  17/8

Para inscribirse, debe completar el siguiente formulario: https://forms.gle/AE7bJAAJDsYxVYT88

 Al final del mismo tendrá los datos de la cuenta a realizar el depósito.

Costos / Aranceles

Informes y contacto

Para informes escribir a: 
ITU Extensión y Vinculación
ituextensionyvinculacion@itu.uncu.edu.ar