logongas - clase:daw:diw

12. Angular: Atributos de componentes

Anonymous (anonymous@undisclosed.example.com) — 2026-10-24T21:42:15+00:00

12. Angular: Atributos de componentes Hemos visto como crear un componente que genera todo el HTML: Sin embargo este componente tiene dos problemas. * No podemos elegir si genera un o

11. Angular: Creación de componentes

Anonymous (anonymous@undisclosed.example.com) — 2026-10-24T21:42:15+00:00

11. Angular: Creación de componentes En este tema vamos a crear nuevos componentes de Angular Crear tu nuevo componente botón Vamos a crear nosotros un nuevo componente boton. Para ello vamos a crear los 3 ficheros que necesitas todo componente:

10. Angular: Personalizando Material (Tokens)

Anonymous (anonymous@undisclosed.example.com) — 2026-10-27T15:29:53+00:00

10. Angular: Personalizando Material (Tokens) Los componentes de Angular Material se personalizan con tokens, que no son más que variables CSS. Hay dos tipos: * Design Tokens: Las variables de cada componente, por ejemplo --mat-button-filled-container-color

9. Angular: Material

Anonymous (anonymous@undisclosed.example.com) — 2026-10-24T21:15:06+00:00

9. Angular: Material En este tema vamos a crear un proyecto de Angular y usar en sus páginas los componentes de Angular Material: botones, cards, tabs y tablas. Crear una aplicación de Angular * Instala Angular CLI v22 ngThe Angular CLI requires a minimum Node.js version

6. CSS: Animaciones

Anonymous (anonymous@undisclosed.example.com) — 2026-10-24T15:23:21+00:00

6. CSS: Animaciones En este tema vamos a hablar de 3 cosas distintas: * Transformaciones: Es simplemente aplicar alguna transformación espacial a un elemento HTML como moverlo ,rotarlo o agrandarlo. * Transiciones: Es un API de CSS para hacer que las cosas se $e=v \cdot t$$e=\frac{1}{2} \cdot a \cdot t^{2}$$e=v \cdot t$$e=\frac{1}{2} \cdot a \cdot t^{2}$

3. CSS: Básico

Anonymous (anonymous@undisclosed.example.com) — 2026-10-24T15:23:22+00:00

3. CSS: Básico En este tema vamos a ver algunas cosas básicas de CSS que se suelen confundir o que hay que poner siempre en cualquier proyecto. Modelo de caja El modelo de caja le dice al navegador si cuando indicamos el ancho, ese ancho incluye o no al padding y al borde. Por defecto no los incluye pero lo ideal es que el ancho si que incluya el padding y el borde, por eso hay que usar la propiedad "box-sizing: border-box" de

7. CSS: Drag & Drop

Anonymous (anonymous@undisclosed.example.com) — 2026-10-24T15:23:22+00:00

7. CSS: Drag & Drop El drag & drop es una forma de simplificar las interfaces de usuario. En el drag & drop siempre hay 2 elementos HTML que son: * El elemento que se arrastra * El elemento donde se suelta Respecto a los eventos, hay 3 eventos en un drag & drop:

4. CSS: Flex y Grid

Anonymous (anonymous@undisclosed.example.com) — 2026-10-24T15:23:22+00:00

4. CSS: Flex y Grid En este tema vamos a explicar el layout en CSS con flexbox y grid. Flexbox Flex se utiliza para colocar cosas de forma horizontal o vertical. * A Complete Guide to Flexbox * [Flexbox Layout Cheatsheet. Otra guía rápida de flexbox] * The Complete CSS Flex Box Tutorial * Flexbox — The Animated Tutorial * In CSS Flexbox, why are there no “justify-items” and “justify-self” properties? * Flexbox Froggy - A game for learning CSS flexbox. Vamos a explicar flex con …

5. CSS: Responsivo

Anonymous (anonymous@undisclosed.example.com) — 2026-10-24T15:23:23+00:00

5. CSS: Responsivo En anteriores temas hemos visto como con grid y flex ya podíamos hacer algunas cosas que se ajustaran al tamaño de la pantalla, lo que llamamos responsivo. En este tema vamos a ver mas formas de hacer responsivo una página. Mas información:$w_{lower}$$w_{upper}$$min_{value}$$max_{value}$$pendiente$$coeficiente_{posición}$$pendiente$$coeficiente_{posición}$$pendiente$$coeficiente_{posición}$$$ pendiente=\frac {max_{value} - min_{value}}{w_{upper} - w_{lower}} \cdot 100 \\ coe…

1. Diseño Web: Introducción

Anonymous (anonymous@undisclosed.example.com) — 2026-10-30T08:28:59+00:00

1. Diseño Web: Introducción Frameworks Veamos la encuesta anual de frameworks más usados: State of CSS 2024: Libraries & Tools. Normas de diseño Cada norma va con un ejemplo de cómo se hace mal y cómo se hace bien. Las normas y los ejemplos están sacados del libro que usamos en el curso.

2. Diseño Web: Sistema de diseño

Anonymous (anonymous@undisclosed.example.com) — 2026-10-24T15:30:49+00:00

2. Diseño Web: Sistema de diseño Un sistema de diseño es el conjunto de valores y componentes que se deciden antes de diseñar las pantallas: qué colores, qué sombras, qué tamaños y qué botones hay. Al hacer una pantalla no se elige el valor que uno quiera: se elige uno de los que ya están en el sistema. Sus partes y sus ventajas están en el

8. SASS

Anonymous (anonymous@undisclosed.example.com) — 2026-10-24T20:52:56+00:00

8. SASS SASS es un preprocesador de CSS. Es como añadir funcionalidad a CSS que no tiene pero no de cosas del navegador sino para ayudar a escribir menos CSS. El código se escribe en SASS y se transforma en CSS. Permite bucles, funciones, variables ,etc.

13. Sistema de diseño: BEM

Anonymous (anonymous@undisclosed.example.com) — 2026-11-02T10:45:03+00:00

13. Sistema de diseño: BEM Vamos ahora a ver lo mas importante de todo el módulo. ¡Como organizar nuestras clases CSS!. Antes de empezar puede leer este artículo que habla sobre la importancia de una arquitectura CSS: ¿Por qué nos olvidamos de la Arquitectura CSS? Arquitectura CSS Cuando nos enfrentamos a proyectos grandes, puede que nuestros compañeros no entiendan nuestras líneas de código, para eso se crearon las arquitecturas de

17. Sistema de diseño: Estructura de carpetas

Anonymous (anonymous@undisclosed.example.com) — 2026-10-30T12:26:34+00:00

17. Sistema de diseño: Estructura de carpetas Vamos finalmente a unificar todo y crear la arquitectura definitiva que vamos a usar en clase. Primero veremos un proyecto sin Angular y luego uno con Angular: la carpeta styles con el SASS es exactamente la misma en los dos, y con Angular Material y sin él. Todo va siempre en

15. Sistema de diseño: Globales

Anonymous (anonymous@undisclosed.example.com) — 2026-10-25T00:19:43+00:00

15. Sistema de diseño: Globales Los modificadores globales (prefijo g--) son clases que se pueden usar con cualquier componente y que solo cambian una cosa usando los tokens de sistema. Utility Clases Hemos visto como crear las variables para dejar de usar números en nuestras clases

16. Sistema de diseño: Layout

Anonymous (anonymous@undisclosed.example.com) — 2026-10-24T21:22:58+00:00

16. Sistema de diseño: Layout En los temas de CSS vimos flex y grid. En este tema vamos a ver cómo se usan en nuestro sistema de diseño con bloques de layout de BEM (prefijo l-). Bloque de layout con flex Un bloque de layout con flex sería así:

14. Sistema de diseño: Tokens

Anonymous (anonymous@undisclosed.example.com) — 2026-10-27T15:26:31+00:00

14. Sistema de diseño: Tokens En el tema de BEM los componentes tenían los valores puestos directamente. En este tema vamos a hacer bien un componente usando tokens, que es lo mismo que hace Angular Material pero hecho por nosotros: * Tokens de sistema

Diseño de interfaces Web

Anonymous (anonymous@undisclosed.example.com) — 2026-10-30T08:31:45+00:00

Diseño de interfaces Web Apuntes del módulo de Diseño de interfaces Web Objetivo del módulo El objetivo del módulo es crear un sistema de diseño. Cómo se hace uno de verdad lo cuenta Claudia Anaut con Genuine, el sistema de diseño de Veridas: