class: center, middle, inverse # Desenvolupament d'interfícies ### Motivació .footnote[Mateu Yábar] --- # Interfície d'usuari Definició? --- # Interfície d'usuari? - Finestres i botons de Gnome - Botons d'un rellotge - Dades mostrades per una aplicació per la consola - Lector RFID d'un gimnàs --- # Interfície d'usuari Una interfície d’usuari és un conjunt d’elements (que poden pertànyer al programari o al maquinari) que ofereixen una informació a l’usuari, i permeten, a més a més, la interacció (física o lògica) entre l’usuari i l’ordinador, per mitjà d’un dispositiu perifèric o un enllaç de comunicacions. --- # Interfície d'usuari - Finestres i botons de Gnome - Botons d'un rellotge - Dades mostrades per una aplicació per la consola - Lector RFID d'un gimnàs --- # Interfícies gràfiques d’usuari (GUI) Definició? --- # Interfícies gràfiques d’usuari (GUI) Aquelles interfícies d'usuari que fan servir elements gràfics, com poden ser menús, finestres o diàlegs, a més de l’ús d’altres recursos del sistema informàtic (perifèrics com el teclat, el ratolí o el so) per permetre a l’usuari interactuar amb l’ordinador de manera molt senzilla i intuïtiva. --- # Interfícies gràfiques d’usuari (GUI)? - Finestres i botons de Gnome - Botons d'un rellotge - Dades mostrades per una aplicació per la consola - Lector RFID d'un gimnàs --- # Etapes - Disseny - Implementació --- # UI Design vs UX - User interface design - User experience --- .fullscreen[![bad design](img/uidesign/street_ui_sample.jpg)] --- .fullscreen[![bad design](img/uidesign/street_ui_sample2.jpg)] --- .fullscreen[![bad design](img/uidesign/bad-good-design.png)] --- .fullscreen[![bad design](img/uidesign/buttons_bad_design.jpg)] --- .fullscreen[![bad user](img/uidesign/baduser.jpeg)] --- # Disseny d'interfícies https://userinyerface.com
--- # Llibreries GUI - c++ - Qt - wxWidgets - Java - __Android__ - Swing - JavaFx - Javascript - Electron - Python - WxPython - C# - Unity (...) --- # Que veurem .fullscreen70[![](img/repositories_architecture.png)] --- # Introducció a Android - Crear projecte Android - Observa - Classe Java - Layout.xml (grafic + xml) - Manifest - Gradle - executa aplicació en emulador - executa aplicació a un mòbil