Spaces:
Running
Running
Ctrl+K
- 1.56 kB Upload 3 files
- 161 kB xetUpload 3 files
- 16.8 kB Upload 3 files
- 212 Bytes Crea una presentación hermosa, con efectos, transiciones, imágenes, y animaciones, con este texto: 2. Introducción ¿Qué es Semantic UI? Semantic UI es un framework de CSS + JavaScript diseñado para crear interfaces web modernas y atractivas. Su enfoque principal es utilizar clases con nombres semánticos, es decir, clases fáciles de leer y entender porque se parecen al inglés común. Esto lo hace más accesible incluso para personas que no son desarrolladoras. 3. Historia y contexto Fue creado en 2013 por Jack Lukic. Nació como alternativa a Bootstrap, con la idea de ser más intuitivo, humano y descriptivo. Aunque tuvo una comunidad muy activa, en los últimos años Bootstrap y Tailwind lo han desplazado un poco. Aun así, se sigue usando porque mantiene una propuesta diferente: código más cercano al lenguaje natural. 4. Características únicas de Semantic UI Lenguaje semántico y natural: las clases se leen casi como frases en inglés. Ejemplo: ui button primary. Muy descriptivo: hace que el código sea más fácil de leer, mantener y compartir. Gran cantidad de componentes UI prediseñados, listos para usarse. Incluye interacciones con jQuery, como menús desplegables, modales y transiciones, sin necesidad de mucho JavaScript. Diseño predeterminado limpio y consistente, inspirado en guías modernas de estilo. Esto permite crear aplicaciones con apariencia profesional sin invertir demasiado en personalización. 5. En pocas palabras Lo que hace único a Semantic UI es que su sintaxis se parece al inglés, lo cual facilita que la interfaz sea fácil de leer, entender, usar y mantener. 4. Filosofía Semantic UI busca que el código sea legible como lenguaje humano. En lugar de escribir estilos en CSS, describes la interfaz con palabras. Ejemplo: <button class="ui red button">Guardar</button> ➡️ Aquí no solo es un botón, también se entiende que es UI, de color rojo y que es un botón. 5. Principales características ✅ Diseño responsivo incorporado (se adapta a pantallas). ✅ Biblioteca amplia de componentes (botones, menús, tarjetas, formularios). ✅ Sistema de temas para personalizar estilos. ✅ Compatibilidad con jQuery y React. 6. Sistema de Clases Las clases funcionan como "palabras" que describen el componente: ui → activa Semantic UI. [color] → define el color (red, blue, green...). [number] → define grids o columnas (three, four...). [type] → tipo de componente (button, card, menu...). Ejemplo: <div class="ui three column grid"> <div class="column">A</div> <div class="column">B</div> <div class="column">C</div> </div> ¿Qué es jQuery y por qué lo usa Semantic UI? jQuery es una biblioteca de JavaScript que simplifica: Selección y manipulación de HTML. Manejo de eventos y animaciones. Compatibilidad entre navegadores. Semantic UI necesita jQuery para que funcionen sus componentes interactivos (menús, modales, acordeones, etc.). Cómo instalar Semantic en HTML: Solo se agregan estos enlaces en el <head>: <head> <!-- jQuery primero --> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <!-- Semantic UI --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script> </head> 🔹 Dato clave: Sin jQuery, los componentes de Semantic no funcionarían correctamente. 7. Ejemplo 1 – Botones <div class="ui three buttons"> <button class="ui red button">Cancelar</button> <button class="ui green button">Aceptar</button> <button class="ui blue button">Ayuda</button> </div> 👉 Permite cambiar fácilmente el color y agrupar varios botones con solo añadir clases (red, green, blue, three buttons). 8. Ejemplo 2 – Tarjeta (Card) <div class="ui card"> <div class="image"> <img src="imagen.png"> </div> <div class="content"> <div class="header">Simón</div> <div class="meta">Estudiante</div> <div class="description"> Aprende Semantic UI con su grupo. </div> </div> </div> 👉 Proporciona una estructura visual lista para mostrar perfiles, productos o información organizada. 9. Ventajas y desventajas ✅ Ventajas: Sintaxis clara y fácil de leer. Componentes preconstruidos y personalizables. Diseño moderno y elegante. ❌ Desventajas: Menos popular que Bootstrap o Tailwind. Requiere jQuery (limitación en proyectos modernos). Semantic UI necesita jQuery, lo cual en proyectos modernos significa más peso, menos compatibilidad con frameworks y uso de una tecnología que ya casi no se usa. Semantic UI requiere jQuery en su versión original, lo que puede ser un problema en proyectos modernos. Sin embargo, existe Semantic UI React, una implementación independiente que evita esta limitación. Hoy en día, JavaScript moderno (ES6+) y APIs nativas del navegador hacen esas tareas igual o mejor, sin necesidad de una librería extra. Peso adicional Incluir jQuery significa cargar un archivo extra (de unos 90 KB minificado). Eso aumenta el tamaño de la página y puede ralentizar la carga en dispositivos más lentos. Incompatibilidad con frameworks modernos Frameworks como React, Vue o Angular tienen su propia forma de manejar el DOM. Mezclar jQuery con ellos suele ser una mala práctica, porque ambos intentan controlar la misma interfaz, lo que puede generar errores y duplicación de lógica. Tendencia actual La mayoría de proyectos nuevos ya no usan jQuery. Esto hace que una librería que dependa de él (como Semantic UI) quede un poco desactualizada frente a alternativas como Semantic UI React, Bootstrap 5 o Tailwind, que no requieren jQuery. - Initial Deployment
- 47.6 kB Update index.html
- 388 Bytes initial commit
- 5.36 kB Upload 3 files
