(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_750,h_350/https://antrax-labs.org/wp-content/uploads/2023/04/heading-of-qa-automation-what-is-it-and-why-do-you-need-it-750x350.jpg)
Hola a todos! A pedido de varios miembros que están empezando en el mundo de la informática, he decidido hacer este glosario en donde iré dejando un listado de componentes web y mobile, con sus respectivos nombres, y para que se utiliza cada uno. Esto es con el fin de que puedan tener un mejor vocabulario de la jerga informática.
Glosario de Componentes WEB(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_661/https://antrax-labs.org/wp-content/uploads/2023/04/input.png)
Input – Field: Campo para insertar caracteres
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1536/https://antrax-labs.org/wp-content/uploads/2023/04/Tabla-1536x705.png)
Tablas: Las tablas pueden tener distintos diseños, pero básicamente son para acomodar datos
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_391/https://antrax-labs.org/wp-content/uploads/2023/04/notificaciones-1.png)
Notificaciones: Aparecen cuando recibimos alguna actualización dentro del sistema
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_600,h_338/https://antrax-labs.org/wp-content/uploads/2023/04/bootstrap-accordion-menu-with-plus-minus-icon.gif)
Acordión: Es un componente que permite expandirse/contraerse para mostrar información ahorrando espacio en la web
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1140/https://antrax-labs.org/wp-content/uploads/2023/04/cards-1140x610.png)
Cards – Tarjetas: Son cuadros o rectángulos con información. Muy vistos en blogs
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_750/https://antrax-labs.org/wp-content/uploads/2023/04/checkbox-750x273.png)
Checkbox: Es un componente clickeable, que sirve para marcar un elemento
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1012,h_605/https://antrax-labs.org/wp-content/uploads/2023/04/modal.gif)
Modal: Es una especie de cartel que aparece luego de tocar un botón o link y que muestra alguna información.
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_459,h_274/https://antrax-labs.org/wp-content/uploads/2023/04/tabs.gif)
Tabs: Son solapas o pestañas. Se pueden cambiar entre ellas, y cada una de ellas mostrará una información distinta
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_393/https://antrax-labs.org/wp-content/uploads/2023/04/paginacion.png)
Paginación: Sirve para pasar a la siguiente página de un listado. Muy visto en tablas así como también en blogs
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_768/https://antrax-labs.org/wp-content/uploads/2023/04/progress-bar-768x248.png)
Progress Bar o Barra de progreso: Es una barra que muestra el avance de carga de algo del sitio web
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_391,h_146/https://antrax-labs.org/wp-content/uploads/2023/04/spinner2.gif)
Spinner: Es un elemento que nos indica que el sitio web esta cargando
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_500,h_387/https://antrax-labs.org/wp-content/uploads/2023/04/tooltip.gif)
Tooltip: Aparece cuando ponemos el mouse sobre algún elemento. Sirve para mostrar algún tipo de información de uso de ese elemento
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_494,h_316/https://antrax-labs.org/wp-content/uploads/2023/04/popover.gif)
Popover: Es similar a un tooltip, solo que tiene una especie de título en la parte superior, y luego una explicación del componente
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_768/https://antrax-labs.org/wp-content/uploads/2023/04/Formulario-768x478.png)
Form – Formulario: Es utilizado para colocar información y almacenarla en la base de datos, o también muy utilizado en los sitios webs como formularios de contacto
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_800,h_600/https://antrax-labs.org/wp-content/uploads/2023/04/radio.gif)
Radio Button: Sirve para seleccionar una opción de un listado. A diferencia del checkbox, este solo permite seleccionar 1 sola opción, mientras que en el checkbox se pueden seleccionar varias
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_456,h_410/https://antrax-labs.org/wp-content/uploads/2023/04/dropdowns.gif)
Dropdown – Select – ComboBox: Es un elemento desplegable que muestra varias opciones adentro
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_490,h_381/https://antrax-labs.org/wp-content/uploads/2023/04/multiselect2.gif)
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_600,h_338/https://antrax-labs.org/wp-content/uploads/2023/04/multiselect1.gif)
Multiselect: A diferencia del select común o dropdown, este permite seleccionar varios items de un desplegable
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_526/https://antrax-labs.org/wp-content/uploads/2023/04/grafico-de-arana.png)
Gráfico de araña – Radar chart: Permite graficar una tendencia
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_768/https://antrax-labs.org/wp-content/uploads/2023/04/grafico-burbuja-768x452.png)
Grafico de burbuja
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_768/https://antrax-labs.org/wp-content/uploads/2023/04/grafico-de-barras-768x458.png)
Gráfico de barras
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_768/https://antrax-labs.org/wp-content/uploads/2023/04/Grafico-de-torta-768x498.png)
Gráfico de torta
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_753/https://antrax-labs.org/wp-content/uploads/2023/04/Grafico-lineal.png)
Gráfico Lineal
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_591/https://antrax-labs.org/wp-content/uploads/2023/04/boton.png)
Botón
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_433,h_145/https://antrax-labs.org/wp-content/uploads/2023/04/switch.gif)
Switch – Pildora – Toggle: Es un elemento que permite encender o apagar algo
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_800,h_600/https://antrax-labs.org/wp-content/uploads/2023/04/toast.gif)
Toast (tostada): Es un tipo de notificación web
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_679/https://antrax-labs.org/wp-content/uploads/2023/04/placeholder.png)
Placeholder: Son las palabras grises que aparecen dentro de los input de un formulario, y que sirven como guía para saber que completar dentro de dicho input
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_2048,h_1160/https://antrax-labs.org/wp-content/uploads/2023/04/popup.gif)
Popup: Es cuando clickeamos un link o imagen, y se nos abre una nueva página con publicidad. (muy visto en páginas de descargas o videos)
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_375,h_500/https://antrax-labs.org/wp-content/uploads/2023/04/hamburguesa.gif)
Menú Hamburguesa: Es un menú que puede colapsarse. Muy visto en sitios responsives (que se adaptan a teléfonos móviles)
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1140/https://antrax-labs.org/wp-content/uploads/2023/04/label-1140x738.png)
Label: El texto que aparece en cualquier sitio web
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_486/https://antrax-labs.org/wp-content/uploads/2023/04/leyenda.png)
Leyenda: Es el texto que aparece al posicionar el mouse sobre algún elemento
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_886,h_800/https://antrax-labs.org/wp-content/uploads/2023/04/Breadcrums.jpg)
Breadcrumb – Migajas de pan: Hacen referencia desde donde llegamos a la página que estamos viendo actualmente
Glosario de Componentes Mobile(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_800,h_600/https://antrax-labs.org/wp-content/uploads/2023/04/burguer.gif)
Menú Hamburguesa: Al igual que en los sitios webs responsives, el menú hamburguesa también aparece en las aplicaciones mobile.
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_800,h_600/https://antrax-labs.org/wp-content/uploads/2023/04/splash.gif)
Splash: Es la pantalla de inicio cuando abrimos una aplicación. Suele mostrar una breve presentación o el logo de la app por unos segundos
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1120,h_660/https://antrax-labs.org/wp-content/uploads/2023/04/iOS12_1120x660_190325_133100.gif)
Push Notifications: Notificaciones emergentes (Cuando una aplicación nos envía una notificación)
(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_425/https://antrax-labs.org/wp-content/uploads/2023/04/swipe.png)
Swipe: Es cuando deslizamos en la pantalla (Puede ser cuando desbloqueamos el teléfono, cuando pasamos fotos, o cuando scrolleamos)
Gestos táctiles en pantallas móviles(https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1459/https://antrax-labs.org/wp-content/uploads/2023/04/gestos.png)
Esto es todo por ahora. Si se me ocurren más, los iré agregando a este mismo glosario, o si quieren sugerir algunos más, pueden hacerlo en los comentarios y los agrego!
Espero que les sirva!
ANTRAX
Increíble aporte. Muchísimas gracias!!!!
Nuevo update! Agregué las push notifications y el swipe en la parte mobile
Dejo un sitio con varios componentes web funcionales para interactuar con los mismos! (Tengo entendido que sirve para jugar con postman al ser funcionales)
https://the-internet.herokuapp.com/ (https://the-internet.herokuapp.com/)
Salutes!
Muy bueno! ;D Una pequeña corrección: se escribe Acordeón, no Acordion :P
Gracias por la info...la descárgare para tenerla siempre en el celu :D
Muy bueno el glosario! Es muy útil.
Gracias por el post !!
Gracias, siempre es util tener ésto a mano. ;D