Versions Compared

Old Version 11

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

Saved on

compared with

New Version 12

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

Saved on

Key

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

...

...

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

Murupolku

  • 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

 

Kalenteri

 

Iso kalenteri

 
  • edelleen fullcalendar
 

Pvm valinta

 
  • jQuery UI datepicker

Muuta / huomioita

Grid

Perustuu Bootstrapin grid-järjestelmään

Autocomplete (select2)

  • selectit yleensä aina tällä

Periaatteet 

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

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

Kieleistys

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
  • ainakin
    • tekstikenttä
    • tekstialue
    • pudotusvalikko (select2 käyttö)
    • radio button / checkbox
      • ryhmät
    • datepicker
    • timepicker
    • transfer select
    • kenttäkohtaiset ohjeet?

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

...

  • perus, raidoitettu,  ym
  • oletuksena listassa nimen klikkaus vie katseluun, muut toiminnot painikkeen taakse
  • määriteltävä oletus linkitetty sarake (nimi, otsikko)?

...

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

  • Palautteiden sijainti näkymissä
  • 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
  • etenemispalautteet
    • etenemispalkki (progress bar)
    • latausindikaattori

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

 

...

  • pidetään hakemistossa edugui/core jne, koska polut viittaavat monessa paikkaa
  • uusi svn projekti

...

  • Tehdään Liferay-instassi jossa Edugui2 teema, johon voidaan hakea esimerkit => testaus oikeassa ympäristössä

...

  • elementit/kokonaisuudet palikoidaan
  • Variables.less
    • värit, buttons, navi jne
    • esim pyöristysten koot tms 
    • mallia (Bootstrap theme)

...

  • myös js?

...

  • 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

 Testaus

  • Laadunvarmistus-checklist 
  • selainyhteensopivuus 
  • demot pitkillä listoilla ja liferayn sisälle testiin

TODO

  • hierarkinen lista togglella
  • plussana fluid list (toteutettu tuubissa)
  • Etenemispalautteet
  • Etenemispalkki (progress bar)
    • Aikamääräinen+edistymispalkki+(Determinate+progress+bar), 
    • Määrämitaton+edistymispalkki+(Indeterminate+progress+bar)+
    • Latausindikaattori (ajax spinner)
  • Tulostus

    • Tulostus (css tyylit), print.less 

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ä

...

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?

...

Lähteitä / linkkejä

Linkkejä

...