https://logongas.es/ 2026-05-05T17:40:36+00:00 https://logongas.es/ https://logongas.es/lib/exe/fetch.php?media=wiki:dokuwiki.svg text/html 2025-11-03T10:37:20+00:00 Anonymous (anonymous@undisclosed.example.com) https://logongas.es/doku.php?id=clase:daw:diw:1eval:tema01&rev=1762166240&do=diff 1. El diseño web Frameworks Veamos la encuesta anual de framewoks más usados: State of CSS 2024: Libraries & Tools. Normas y estilos de diseño * Haz que las cosas que no están relacionadas estén muy separadas entre si. Es decir que haya mucho espacio en blanco. Y luego ya veremos si los juntas un poco. text/html 2025-11-10T10:29:15+00:00 Anonymous (anonymous@undisclosed.example.com) https://logongas.es/doku.php?id=clase:daw:diw:1eval:tema02&rev=1762770555&do=diff 2. Introducción a los componentes visuales Crear una aplicación de Angular * Instala Angular CLI v20 * Crea una aplicación de Angular Las preguntas que hacen se response de la siguiente forma: * Which stylesheet format would you like to use? text/html 2025-11-23T19:23:21+00:00 Anonymous (anonymous@undisclosed.example.com) https://logongas.es/doku.php?id=clase:daw:diw:1eval:tema03.b&rev=1763925801&do=diff 3. Creación de componentes: Atributos Hemos visto como crear un componente que genera todo el HTML: Sin embargo este componente tiene dos problemas. * No podemos elegir si genera un <a> o <button> * No es tan personlizable porque no podemos cambiar nada sino es modificando el propio componente botón. text/html 2025-11-10T10:52:11+00:00 Anonymous (anonymous@undisclosed.example.com) https://logongas.es/doku.php?id=clase:daw:diw:1eval:tema03.c&rev=1762771931&do=diff 3. Creación de componentes: 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 text/html 2025-11-05T15:48:53+00:00 Anonymous (anonymous@undisclosed.example.com) https://logongas.es/doku.php?id=clase:daw:diw:1eval:tema03&rev=1762357733&do=diff 3. Creación de componentes En este tema vamos a crear nuevo 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: * boton/boton.ts text/html 2025-11-25T17:50:31+00:00 Anonymous (anonymous@undisclosed.example.com) https://logongas.es/doku.php?id=clase:daw:diw:1eval:tema04&rev=1764093031&do=diff 4. CSS Añadir CSS en Angular Para añadir estilos CSS en Angular se usa el fichero de SASS que está en src/styles.scss donde se indican los estilos globales de la App. Aunque también cada componente tiene sus propios estilos. Por otro lado si queremos añadir otros ficheros text/html 2025-11-10T11:18:03+00:00 Anonymous (anonymous@undisclosed.example.com) https://logongas.es/doku.php?id=clase:daw:diw:1eval:tema05&rev=1762773483&do=diff 5. 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. text/html 2025-11-07T11:28:26+00:00 Anonymous (anonymous@undisclosed.example.com) https://logongas.es/doku.php?id=clase:daw:diw:1eval:tema06&rev=1762514906&do=diff 6. Flex y Grid En este tema vamos a explicar principalmente 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 gí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 … text/html 2025-11-13T08:52:30+00:00 Anonymous (anonymous@undisclosed.example.com) https://logongas.es/doku.php?id=clase:daw:diw:1eval:tema07&rev=1763023950&do=diff 7. Arquitectura Vamos finalmente a unificar todo y crear la arquitectura definitiva que vamos a usar en clase. Para crear una buena arquitectura vamos a hacer lo siguiente: * * * * * Indicar a Angular que el proyecto es en Español text/html 2025-11-03T10:37:21+00:00 Anonymous (anonymous@undisclosed.example.com) https://logongas.es/doku.php?id=clase:daw:diw:1eval:tema08&rev=1762166241&do=diff 8. Diseño 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. $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 \\ coeficiente_{posic…