1# - Semantic UI: Introducción

__Índice__

¿Qué es Semantic UI?

¿Qué se puede hacer?

¿Ventajas?

¿Cómo usarlo?

__¿Qué es Semantic UI?__

 Semantic es un framework de desarrollo que permite crear diseños hermosos y flexibles utilizando HTML amigable.

Esto forma rápida y eficiente.

Comenzó en el año 2013 y actualmente (2019) va por su versión 2.4

Link de la página: https://semantic-ui.com/

 __¿Qué se puede hacer?__

Nos permite crear sitios web responsivos y adaptables a cualquier plataforma.

__Ventajas__

Lenguaje natural:

Una de las grandes diferencias con el resto de frameworks es la utilización de la sintaxis para crear los componentes de manera legible. Las clases usan la sintaxis de los lenguajes naturales como las relaciones sustantivo/modificador, orden de las palabras, y la pluralidad para vincular conceptos intuitivamente

En este caso vamos a crear un botón de color rojo y de tamaño grande tanto en Bootstrap como en Semantic UI.

Si vemos la diferencia, las clases que hemos utilizado para crear el botón en Semantic UI es mucho más intuitiva y adecuada a nuestro lenguaje, a nuestra manera de hablar. Hemos dicho que queríamos un botón grande y rojo, y las clases que hemos usado para crear es large, red y button. Además tenemos que añadir la clase ui, ya que en Semantic Ui, todos los componentes empiezan por esa clase.

En Bootstrap sin embargo, a todos los componentes de las clases le hemos tenido que añadir la abreviación btn- para crear el botón, hemos usado las clases btn, btn-large y btn-dange. Traducido a nuestro lenguaje sería, un botón, un botón largo y un botón rojo, algo que para nosotros no es algo común en nuestro lenguaje.

Otra de las ventajas de Semantic UI la reutilización de las clases en diferentes componentes.

Hemos utilizado la misma clase para crear un botón grande como para crear un input grande. En Bootstrap sin embargo dependiendo del componente tiene su propia clase.

Y, por último, la utilización de los plurales a la hora de crear grupos de componentes. Para crear grupos utiliza la misma sintaxis que utilizamos en inglés para crear los plurales (añadir una “-s” al final).

Javascript intuitivo:

Utiliza frases simples, llamados behaviours, para lanzar los eventos de los componentes en javascript.

Componentes prediseñados:

Dispone de más de 50 componentes prediseñados que en otros frameworks no disponemos, como son feed, comentarios o cards (tarjetas), y que nos hacen la vida más fácil a la hora de diseñar dichos componentes.

Como hemos visto, uno de los puntos fuertes de Semantic UI es la sintaxis descriptiva que nos ofrece. Dispone de más de 3000 variables CSS y más de 50 componentes predefinidos muy útiles para la creación de interfaces de usuario. Trabaja con el preprocesador de Less y es soportado por las últimas versiones de los navegadores más utilizados.

__¿Cómo usarlo?__

Nos vamos a la página oficial de Semantic UI (El link esta arriba) y nos damos clic al botón Get Started

Ahí nos encontraremos varias formas de descargarlo, por gulp, npm, etc etc. Pero para no complicarnos la vida. Vamos a descargarlo por Zip

Ya una vez descargado, lo descomprimimos

Y listo, los archivos a los cuales les vamos a hacer referencia son semantic.js y semantic.css también pueden utilizar los archivos min pero para practicar da igual.