ABCDEFGHIJKLM
1
Semana
Día
Día semanaColumn 13EntregableColumna 2PrácticaTeoría (Guía Docente)Tópico 1Tópico 2Tópico 3Tópico 4Tópico 5
2
110-9-25miércolesDiseño Conceptual1) Editores de código
2) Navegadores (developer tools)
3) Herramientas de prototipado
4) Definición de tema
5) Investigación páginas web		Introducción al diseño web.
Tecnologías y herramientas para el diseño web.
Diseñadores influyentes.
Conceptos fundamentales.
Investigación de estructura de páginas web habituales. 		Tecnologías y Herramientas:
1) Navegadores (Chrome, Firefox, Safari, Brave, ...)
2) Editores de código (VSCODE)		Tecnologías y herramientas:
3) Herramientas de diseño/prototipado:
Figma, Adobe XD, Sketch, Canva, Webflow,
4) CMS: Wordpress (60%)		Diseñadores influyentes:
1) Sara Soueidan
2) Jen Simmons
3) Rachel Andrew
4) Jeffrey Zeldman
5) Ethan Marcotte		Conceptos fundamentales:
1) Contenido, estilo y funcionalidad: HTML, CSS y JavaScript
2) Usabilidad y Accesibilidad
3) Diseño UI/UX,Diseño Responsivo
4) Colores, Tipografía, utilización de espacios
5) Calidad del contenido, Optimización SEO		INVESTIGACIÓN PÁGINAS WEB:
1) Composición y estructura visual
2) Colores
3) tipografías
4) Accesibilidad, Usabilidad, UX, Responsividad
5) Velocidad de carga
3
112-9-25viernes
4
217-9-25miércolesDiseño Conceptual1) Creación de paletas de colores en base a teoría de color en HSL
2) Creación de paletas de colores en base a teoría de color en OKLCH
3) Tipografía: legibilidad, web safe y web fonts
4) Estructura de páginas y navegación		Guía de identidad visual
Arquitectura de la información y layout.
Conceptos de Layout: Flow-layout, flexbox layout y Grid layout
Bocetado y propiedades de una página web
Ejercicios prácticos de estructura de layouts y estilos.		Guía de identidad visual:
1) Logotipo
2) Paleta de colores
3) Tipografía
4) usos correctos e incorrectos
Colores:
1) color en la web
2) Espacios y modelos de color: sRGB, HSL y OKLCH
3) sintaxis y representación de colores:
4) Accesibilidad: contraste y legibilidad
5) Paletas y utilización de colores		Arquitectura de la información:
1) estructura de navegación jerárquica
2) estructura de navegación de hipertexto
3) estructura de navegación plana
5
219-9-25viernesDiseño Conceptual0) DEMOSTRACIÓN CON CARTULINAS
1) Estructura básica de todo documento HTML
2) Estructurar y comentar el HTML
3) Estructurar el HTML con elementos semánticos
4) recordar propiedades asignadas a layout y asignarlas en css		Estructura básica:
1) DOCTYPE
2) HTML
3) HEAD
4) BODY		Buenas prácticas:
1) Código limpio y mantenible (bien comentado y estructurado)
2) Estructurar el HTML de forma organizada
2) Organizar bien las propiedades en clases en el CSS		HTML Semántico:
1) Header
2) main
3) footer
4) nav
5) aside
6) section
7) article
6
324-9-25miércolesEstructura y organización1) recordar propieaddes para skin y asignárselas en css a los elementos HTML
2) Determinar las unidades que se van a utilizar y asignarselas

Con esto ya tenemos una página básica que llamaremos "plantilla.html"		Estructura básica de una página web - HTML, HEAD, META y BODY
Buenas prácticas de la codificación (comentarios)
HTML5 semántico.
CSS3. Selectores básicos. Selectores avanzados
Creación de listas y aplicación a barras de navegación
Modelos de cajas. Colores y fondos. Valores y unidades (absolutas y relativas).
Propiedades del layout y propiedades del skin.		Box-model:
1) Margin
2) Border
3) Padding
4) Content
5) width, height, box-sizing		Unidades:
1) Absolutas (cm, mm, in, px, pt, pc)
2) Relativas
2a) em, rem, ex, ch, %,
2b) relativas de viewport (vw y vh, vmin y vmax, small y large viewport y dinámicas)
lvw, lvh, lvi, lvb, lvmin y lvmax.
svw, svh, svi, svb, svmin y svmax.		Propiedades para layout:
1) Display
2) Position
3) width y height
4) margin y padding		Fondos:
1) Background-color
2) Background-image
3) Background-repeat
4) background-attachment		Propiedades para skin:
1) color
2) background-color
3) border, border-radius
4) box-shadow
5) opacity
7
326-9-25viernesEstructura y organización1) Asignar ID y clases a los elementos HTML
2) Asignar propiedades a ID y clases y no sólo a elementos
3) Asignar propiedades utilizando los selectores css		Selectores básicos CSS:
1) selector universal
2) selector de elemento
3) selector de identificador
4) selector de clase
5) selector de atributo
6) Pseudoelementos
7) Pseudoclases		Selectores CSS avanzados:
1) :not()
2) :nth-child()
3) :has()
4) Descendientes:
5) hijos
6) hermanos		Listas y navegación:
1) Estructura jerárquica (ordenadas y viñetas)
2) Etiquetas en cada item
3) anidamiento
4) Quitar estilos
5) Disposición horizontal o vertical
8
41-10-25miércolesEstructura y organizaciónEntregable 1Primer entregable: Se debe entregar un PDF con la siguiente información:
1) Guía de identidad visual (colores, tipografía y logo)
2) Arquitectura de la información (Páginas que se van a desarrollar, estructura jerárquica y navegación entre ellas)
3) Tres bocetos a lápiz (página home, páginas de segundo nivel y páginas terciarias) escaneados, diferenciando los elementos que están dentro de otros más generales.
4) Asignar propiedades a cada uno de los elementos de la página (ancho, alto, color de fondo, color de texto,....)
5) Hacer una lista con todas las propiedades y separarlas en dos listas:
a) Una referida a todas las propiedades de layout (ancho, alto, etc…)
b) y otra a las propiedades de skin (tipo de fuente, tamaño de fuente, color de fondo, color de texto, etc…)		1) Creación de plantilla 1 sólo con flow-layout
2) Modificación de plantilla 1 para incluir menús y galerías flexbox
3) modificación de plantilla 1 para incluir layout grid con grid áreas, filas y columnas y galería grid		Flow layout:
1) Elementos bloque: apilamiento vertical
2) elementos inline: apilamiento horizontal
3) anidamiento		Flexbox layout:
1) contenedor flexbox
2) elemento flexible
3) propiedades: direction, justify, align, wrap, grow, shrink		Grid layout:
1) Contenedor grid
2) Filas y columnas
3) Líneas
4) gap, area, justify, align
9
43-10-25viernesEstructura y organización0) DISEÑO ATÓMICO
1) Determinar la convención de nombres que vamos a utilizar
2) Organizar el css con dicha convención
3) Creación de múltiples archivos CSS (al menos layout y skin)
4) Aplicaciones para detectar accesibilidad		El concepto de clase: Utility classes y clases con muchas propiedades
Metodologías para organizar el CSS: OOCSS, BEM, SMACSS, ATOMIC CSS
Flow layout: CSS inline, head, hoja externa, Dirección de escritura, css links
Usabilidad y accesibilidad		Clases en CSS:
1) Diferencia entre clases e identificadores
2) Sintaxis
3) Aplicación a elementos HTML, clases únicas y múltiples por elemento
4) Selectores de clase
5) Convenciones de nombre: (BEM, kebab case, kamel case)
6) Clases reutilizables
7) Utility classes vs semantic classes		Metodologías estructurar CSS:
1) BEM (Block, Element, Modifier):
2) OOCSS (Object-Oriented CSS):
3) SMACSS (Scalable and Modular Architecture for CSS):
4) ITCSS (Inverted Triangle CSS):
5) Atomic CSS / Utility-first (ejemplo: Tailwind CSS):
Usabilidad y accesibilidad:
1) Introducción: Diferencias entre usabilidad y accesibilidad, importancia y beneficios.
2) Principios de Accesibilidad (WCAG): Principios clave (perceptible, operable, comprensible, robusto) y niveles de conformidad.
3) Principios de Usabilidad: Facilidad de uso: visibilidad, control, consistencia, prevención de errores y eficiencia.
4) Diseño Accesible y Navegación: Etiquetas semánticas, navegación por teclado, contraste y roles ARIA.
5) Contenido Multimedia: Subtítulos, transcripciones y control de reproducción.
6) Formularios: Etiquetado adecuado y mensajes claros.
7) Compatibilidad y Pruebas: Soporte en dispositivos y pruebas automáticas/manuales.
8) Herramientas de Evaluación: Herramientas automáticas y pruebas con usuarios.
9) Aspectos Legales: Normativa y cumplimiento.
10) Buenas Prácticas: Diseño inclusivo, formación y mantenimiento.
10
58-10-25miércolesComponentes1) Creación de plantillas para niveles 2 y 3
2) Creación de carpeta para CSS y para IMG
3) Creación de carpeta para versiones
4) prototipo de página home		Formularios, Botones, imágenes, Vídeos, Gráficos SVG, Dropdown-menu
11
510-10-25viernesComponentesEntregable 2Segundo entregable:El segundo entregable implica subir a una carpeta de Drive el contenido del servidor:
1) En public_html debe existir un index.html que enlace al index.html de cada una de las versiones.
2) En public_html debe crearse una carpeta CSS para los ficheros de estilo
3) En public_html debe crearse una carpeta IMG (le puedes dar otro nombre) que contenga las imágenes
4) En cada una de las carpetas de versión hay que crear tantas páginas como las que hemos puesto en arquitectura de la información (aunque no todas tengan demasiado contenido).
5) La página home de la primera versión debe estar totalmente prototipada (puede que los colores sean falsos pero se cumple que todos los elementos están en su sitio aunque no tengan contenido aún).
6) Se debe haber creado una plantilla para las páginas de segundo nivel y una para las páginas de tercer nivel completamente prototipadas		1) Creación de plantillas para niveles 2 y 3
2) Creación de carpeta para CSS y para IMG
3) Creación de carpeta para versiones
4) prototipo de página home
12
615-10-25miércolesLayout avanzados1) Creación de componentes: Menús, formularios, etc...Técnicas de Diseño de layout avanzadas (1/2) con Flexbox
Flex Container: Propiedades (Direction, wrap, flow, justify, align)
Flex Item: Propiedades (Order, basis, shrink, grow, align)
Flex responsivo
Propiedades flex: (Basis,Direction, Flow, grow, shrink, wrap)		Práctica intensiva en flexbox
13
617-10-25viernesLayout avanzados1) Creación de componentesPráctica intensiva en flexbox
14
722-10-25miércolesLayout avanzados2) Implementación de componentes en todas las páginasDisplay, Rows, Columns, Gaps, Lines (propiedades)
Grid Container: Grid-template, justify-content, align-content
Grid item: Childs, Grid-column, Grid-row, Grid-area, nombrado de áreas.
Grids de tamaño fijo, fluidos, responsivo.
Ubicación explícita de imágenes y superposición de imágenes		Práctica intensiva en grid
15
724-10-25viernesLayout avanzados2) Implementación de componentes en todas las páginasCSS Shapes: Shape inside, Shape-outside, Shape-margin, clip-path, Práctica intensiva en grid
16
829-10-25miércolesEfectos visuales1) CSS shapes
2) Transformaciones
3) transiciones
4) Animaciones
Animaciones: Delay, duration, direction, iteration-count,name, play state, timing-function, fill-mode
Transiciones: transition, transition-delay, transition-duration, transition-property, transition-timing-function		1) CSS shapes
2) Transformaciones
3) transiciones
4) Animaciones
17
831-10-25viernesEfectos visuales1) CSS shapes
2) Transformaciones
3) transiciones
4) Animaciones
18
95-11-25miércolesIntroducción a los frameworks de desarrollo (comienzo de la segunda parte)
19
97-11-25viernesEntregable 3El estudiante debe implementar todo lo que se ha visto en clase:
1) Al menos una de las páginas debe estar implementada con flow layout utilizando las propiedades float, position, display y visibility (al menos)
2) Todos los menús tienen que estar implementados con flexbox
3) Tiene que haber al menos una galería flexbox
4) Tiene que haber al menos una página con GRID-layout con áreas nombradas
5) Tiene que haber la menos una página con GRID-layout especificando filas y columnas
6) Tiene que haber una galería grid con todas las imágenes del mismo tamaño
7) Tiene que haber una galería grid con imágenes que ocupen distintos tamaño
8) Tiene que haberse utilizado CSS shapes (forma de imágenes, y texto fluyendo alrededor de figuras)
9) Tiene que haberse implementado al menos una transición y una animación
10) Se podrán implementar hasta dos scripts de javascript de los que se hayan explicado en clase.