Versions Compared

Old Version 1

changes.mady.by.user Unknown User (heidileh)

Saved on

compared with

New Version 2

changes.mady.by.user Unknown User (heidileh)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents
indent15px

Pohjamateriaalit

Yleiset

Tavoitteet

  • yksinkertaisuus
  • selkeys
  • johdonmukaisuus
  • kontrasti ja värit
  • esteettömyys mahdollisuuksien mukaan (eri tasot opiskelija / hallinnoija / muokkaaja)
  • toteutuksessa
    • html, css: syntaksin siivous, selkeytys, yksinkertaistus
    • dropdownit (ja kaikki muukin mahdollinen) css:llä
    • ei inline css/js
    • hakutulokseen ja muutenkin edelliseen palaaminen

Suunnittelun periaatteet

  • jatkuva iterointi
  • jokainen osa-alue valmistuessaan selaintestiin
  • merkitään milloin tarvitaan javascriptiä [JS]

Ohjeet toteuttajille ja toteuttaminen

  • kehyksen ulkopuoliset javascriptit/css ja niiden dokumentointi. 
    • sovitaan yhtenäinen rakenne ja sijainti portletin sisällä esim "portlet_x/jotain/css/portlet.js"
  • yleisperiaate: jos et ole varma miten näkymä tehdään, kysy UI-tiimiltä! 
  • näkymät, joita UI-tiimi ei ole protonnut/määritellyt on syytä hyväksyttää/näyttää UI-tiimille 

Typografia

  • otsikot
  • pieni teksti (himmennetty)
  • lihavoinnit, kursivointi
  • listat (ul, ol). Muotoilematon, ilman etumerkkejä
  • linkit, linkkien eri tilat

omaan less- tiedostoon

Kehys

  • Yläpalkki (header)
    • sovellus brändäys, tausta
    • käyttäjän tiedot ja toiminnot
    • Päänavigaatio
  • Alapalkki (footer)

Päänavigaatio (topbar)

  • Päänavigaatioon uusi yksinkertaistettu toteutus
  • Mitä tulossa valikkoon, käykö tekstuaalinen rakenne vai ikoni (FontAwesome) 
  • Maksimaalinen tilan käyttö
  • Mukautuvuus (voi olla myös sidemenu!)

Väritys ja breakpointit esim. variables.lessiin

Alapalkki

  • [Takaisin ylös] mobiilissa

Näkymät

Näkymäesimerkit ovat tässä määrittelyssä ensisijaisen tärkeitä. Pelkät elementtien määrittelyt eivät riitä takaamaan yhdenmukaisia toteutuksia. 

Näkymän yleiset elementit

Näkymätyypit / esimerkit

  1. palvelun työpöytä (dashboard)
  2. alaosion työpöytä
  3. listausnäkymä
  4. yksittäisen katselu (avain arvo-tietolistan näyttäminen esimerkiksi. Esim peppi > henkilö > profiili)
  5. lomake / muokkaus 
    1. modal, kuten Jira
    2. muokkauksen sisäinen navigointi eri osioihin
    3. jos sivu tyhjä eikä dataa: tarjoa ensimmäinen toimenpide
  6. Näkymän sisäinen navigaatiorakenne
    1. dynaamiset valinnat vasemmalla, esim. Pepin tallennetut haut
    2. valintojen väliotsikot
  7. kompleksi tietojen muokkaus, ops-editori muokkaa opsia, miten huomioidaan tallennus eri välilehdillä
  8. haku + hakutulos. Erilaisia malleja erilaisiin/erimääräisiin hakukriteereihin ja tuloksiin. Hakutuloksesta paluu hakuun/listaukseen.
  9. Excel-tyyppinen inline editointi
  10. Perus "sisältö"sivu. Eli otsikko/teksti/kuva-tyyppinen sisältö,

Poikkeavat / uniikit näkymät aina UI-tiimin kautta!

 

Periaatekysymykset

  • sovittu että katselu pyritään toteuttamaan aina
    • jos katselua ei toteuteta, tähän vaaditaan hyväksyntä ja perustelu (yhteneväisyys!)
  • muokkaus Jira-mainen modal-ikkuna. 
    • hyödyt: samaa muokkausta voidaan hyödyntää eri kautta, eri paikoissa
    • tutkitaan toteutetaanko oma modal-ikkuna jQuery UI Dialogin sijaan
  • jos näkymässä on kokonaisuuksia (esim 3 listaa) ne pitää visuaalisesti erottaa (peppi > yksikko > kustannuspaikat), erotin, panel tms

Yleinen sommittelu

  • lomake,  sommittelu tai yleiset sommitteluperiaatteet, missä minkäkin tyyppiset elementit _yleensä_ sijaitsevat
Inline-editointi (ajax)

Näkymien navigointi 

Pitää tehdä kunnon esimerkit monitasoisesta navigaatiosta, liittyy kohtaan näkymäesimerkit

Alatasojen navigointi:

Tehdään vaihtoehtoisina vaaka + pysty vasemmalla

Ensisijaisesti käytetään pystynavigaatiota, perustelut tabinavigaatioon oltava:
sivuvalinnat (http://ui.dev.eduix.fi/demo/examples/edugui-header-entity.php)

käytetään esim: https://stagingpeppi.metropolia.fi/group/suunnittelijan-tyopoyta/yksikot

  • värityksien parannus
  • käyttötapa yhtenäinen > esimerkit

Esim. Pepissä ongelmana tilankäyttö kun monta välilehteä

Murupolku

  • Tiivis, ei saa viedä tilaa
  • sovittu että yleisperiaatteena tulee kaikkialle, myös Liferayn sisällä

Näkymän sisäinen layout / rakenne 

Palstat ja grid näkymät uusiksi

Grid

Tutustutaan ja arvioidaan olemassa olevia ja käytetään hyödyksi suunnittelussa

Lisänä yksinkertaisempi malli? 

Tarve equal heights(?): http://foundation.zurb.com/docs/components/equalizer.html

Ikonit

  • ikonien käyttö (kirjastona: Font Awesome). Laajin skaala, väritys mahdollinen, lisenssi vapaa

Painikkeet

Eduguin nykyisten painikkeiden freesaus ja asemointi, myös aktiiviset tilat huomioiden

Periaatteet

  • yleinen linja käytettävästä tagista (a, button jne vai aina sama?)
  • dialogien napit sisällössä/dialogin buttoneina
  • eri tyyppisten toimintonappien sijainti suhteessa toisiinsa, (tallenna, peruuta, sulje)
  • tallenna/järjestys leijukkeissa kuten tip top

Lomakkeet

  • eri tyyppiset: basic, horizontal, jne. http://getbootstrap.com/css/#forms
  • validointi
    • käytetäänkö esim. Dirty Forms
    • pakollisen kentän merkitseminen yleisesti 
    • select2 validointi
  • elementtien disablointi, tyylit
  • TAB ordering, testauslistaan testaa ilman hiirtä
  • koot

  • eri tyyppisten inputtien käyttö tekstuaalisesti selitetty kuten tiptopissa, missä tilanteessa käytetään mitäkin

  • auto-focus on input (malli, perustelut missä käytetään)

  • textarea ei monospace, määriteltävä fontti (wysiwygin käyttö?)

Input-tyypit

  • eri input-tyypit, katsotaan edugui läpi

Fieldset

  • miten edugui, voidaanko päivittää vain css tai rinnalle uusi

Tagit

Sliderit?

Autocomplete (select2)

  • erilaiset käyttötavat, milloin ja missä

Toteutusjärjestys

Esteettömyys

  • tabi/näppäimistönavigointi. Inputtien korostukset (vrt. peppi nyt)

Taulukot / listaukset

  • eri ulkoasut eri käyttötapauksiin 
    • perus, raidoitettu, ym
    • oletuksena listassa nimen klikkaus vie katseluun, muut toiminnot painikkeen taakse
    • määriteltävä oletus linkitetty sarake (nimi, otsikko) ?
  • listauksessa toiminnot: 1 toiminto / monta toimintoa. Yksi painike / painike-alasvetovalikko. Määriteltävä millä logiikalla.
  • tr-hover vain luokalla tableen? 
  • yleinen toimintopalkki koko listaukselle (button group?)  (esimerkki!)
  • rivikohtaiset työkalut, listauksessa toiminnot: 1 toiminto / monta toimintoa. Yksi painike / painike-alasvetovalikko. Millä logiikalla? 
  • statukset listoissa (esimerkki!)
  • hierarkiset listat, onko nykyinen malli hyvä, tarvitaan useamman tason
  • taulukko filtteröinti http://foundation.zurb.com/docs/components/subnav.html
  • inline-edit: tiptop:  -  Taulukkodatan muokkaus??? Puhekupla http://vitalets.github.io/x-editable/demo-jqueryui.html?c=popup
  • sarakkeiden leveyksien säätö, jos ei varma toiminto, tehdään valinnaiseksi > jatkokehitykseen
  • Sivutus ja näytä "x riviä"
  • demot pitkillä listoilla ja liferayn sisälle testiin

Periaatteet 

  • DataTables kuopataan, käytetään serveripään toimintoja sorttaukseen ja sivutukseen

http://designshack.net/articles/css/15-tips-for-designing-terrific-tables

 

Fluid-list

  • plussana fluid list (toteutettu tuubissa)

Perus ei-taulukkomainen lista

Palautteet

Tyypit

  • Varmennukset (oletko varma...)
  • Toiminto aloitettu (disablointi)
  • Toimintoa tehdään (etenemispalautteet)
  • Tallennus/toiminto on tehty (samoja voidaan käyttää myös saavuttaessa näkymään)
    • Onnistui
    • Info
    • Varoitus
    • Virhe

Esimerkit! Virheeseen fixed-palkki ylös, joku yleinen virhe sovelluksessa. Siihen myös sulje rasti. Dialogilla virhe joka syntyy kun aktivoidaan joku toiminto.

Periaatteet

  • Yleinen sijainti(sijainnit) latausindikaatiolle, samoin tapa käyttää (inline/vakiopaikka/dialogi/muu?)

Tiptopista: Varoitusikkuna, Tiedote, Virheilmoitus, Varmennus, Sisäänkirjautuminen 

Etenemispalautteet

  • Etenemispalkki (progress bar)
    • Aikamääräinen+edistymispalkki+(Determinate+progress+bar), 
    • Määrämitaton+edistymispalkki+(Indeterminate+progress+bar)+
  • Latausindikaattori (ajax spinner) 

http://getbootstrap.com/components/#alerts

Ohjeet

Tilatiedot

labels, status, ikonit
http://getbootstrap.com/components/#labels 

http://foundation.zurb.com/docs/components/labels.html

Paneelit (Boksit)

- laatikko, title, content

http://foundation.zurb.com/docs/components/panels.html

http://getbootstrap.com/components/#panels

Nimetään myös panel, nykyinen box jää legacyyn

Dialogit

  • modaalidialogit yleisesti tai milloin modal ja milloin ei
  • dialogien toimintonapit
  • mobiilivalmius?

jQuery UI, mutta myös normaali modaalimalli?

http://gumbyframework.com/docs/components/#!/modals

http://getbootstrap.com/javascript/#modals

Malli peräkkäisistä, http://foundation.zurb.com/docs/components/reveal.html

Kalenteri

Iso kalenteri

  • edelleen fullcalendar

Pvm valinta

  • jQuery UI datepicker

Apuvälinetyylit ja elementit

- quickfloats, clearfix, show hide jne 

http://getbootstrap.com/css/#helper-classes

http://imperavi.com/kube/helpers/

http://foundation.zurb.com/docs/utility-classes.html

> valitaan olennaisimmat

Käyttöympäristö ja päätelaitteet / mukautuvuus

Mukautuvuus

Selainyhteensopivuus

Mozilla Firefox 14, Internet Explorer 9, Google Chrome (uusin versio), 
Safari 4 ja 5, Opera 10 ja 11 (Heidi täsmennä mitä on määritelty perusrekisteriin nyt?)

Tulostus

- Tulostus (css tyylit), print.less 

Kieleistys

Käytettävät / tarvittavat kirjastot

Arvioitava mitä tarvitaan perusrekisterissä, näistä esimerkit

  • (tick) jQuery ja jQuery UI 
  • (tick) select2
  • (tick) fontAwesome
  • (question) fullcalendar
  • (question) jstree?
  • (question) DataTables?
  • (question) Timepicker? (erillinen plugin)
  • (question) qtip / tiptip 
  • (question) tinymce tmv
  • ...

 Testaus

  • näkymä-checklistit kehittäjille, tiptopista vinkkejä
  • liikkuminen tabilla, testauslistaan testaa ilman hiirtä
  • selainyhteensopivuus (browserstack, muu työkalu)

Tekninen toteutus

 

  • Työnimi Eduplan GUI 2.0
    • pidetään hakemistossa edugui/core jne, koska polut viittaavat monessa paikkaa
    • uusi svn projekti
  • Dokumentaatio Wikiin, esimerkit php:lla ui.dev.eduix.fi/demo2. Upotetaan Wiki-sivuihin, kuten nyt Edugui. 
    • Tehdään Liferay-instassi jossa Edugui2 teema, johon voidaan hakea esimerkit => testaus oikeassa ympäristössä
  • CSS Lessillä
    • elementit/kokonaisuudet palikoidaan
    • edugui legacy
    • Variables.less
      • värit, buttons, navi jne
      • esim pyöristysten koot tms 
      • mallia (Bootstrap theme)
  • Typografia, fonttikoot myös omaan
  • käytettävät js-kirjastot (esim Chosen vs. Select2, eli ei esim. kahta samaan tarkoitukseen).
  • perus.js (nyt edugui.js) vain peruskomponentteihin vaadittavat. Tiukka linja mitä tänne
  • Määrittely: kuinka tehdään poikkeustyylimäärittelyt ja javascriptit portleteissa
  • optimointi
    • myös js?
  • miten tyylejä ja kirjastoja kutsutaan
  • jirataskit erikseen osa-alueittain jotta tiedetään kuka tekee mitäkin ja mitä on tehty
  • EduGUI 2 (nimi??)
    • legacyna vanha mukaan
    • Pois/legacyyn: 
      • Color schemes
  • Liferay
    • aui pois päältä oletuksena, päälle jos admin tai parempi: käyttäjän valinnalla (user bar) jos admin
    • esimerkit testattava suurella datamäärällä ja liferay-teemalla

Priorisointi

Tärkeimmät osiot, listataan muut jatkossa määriteltävät

  • Osio tuleville, mutta ei juuri nyt tarpeen
    - Velho (jos jää aikaa)
    - thumbnails

Tulevaisuudessa kehitettävää

Listataan ominaisuuksia, joita voidaan myöhemmin kehittää. Ei todennäköisesti tarvita perusrekisterissä

Pysyvä otsikkopalkki, Sticky nav

Wizard-näkymä

undo-toiminto mahdollista?

Tekniseen toteutukseen arvioidaan mahdollista siirtymistä angularjs

fb tyylinen unlimited loading, ehkä käypä esim. tiedotteiden kanssa (dashboardin pikkutietoboksit)

 Muuta esille tullutta

 

  • Dokumentoi jos ominaisuus vaatii selaimelta jotain erikoista tai sen käyttöä on harkittava!
  • Miten tämä uusi dokumentaatio suhtautuu eduguihin omaan dokumentaatioon? omistusoikeus?

 

Linkkejä