Vartotojo interfeisas

interneto projektų apžvalga, sprendimai, technologijos

Vartotojo interfeisas

Krovimo paveikslėliai

Autorius: Petras 2009 09 1, AntradienisKategorijos: Patarimai, Vartotojo interfeisas, Įrankiai

preloaderŠiuo metu, nemažai tinklapių yra įgyvendintas dinaminis tinklapio užkrovimas, pvz.: Neperkraunant puslapio, galima naršyti po prekių katalogus. Paprastai toks funkcionalumas vartotojui yra daug patogesnis, nei viso puslapio perkrovinėjimas, tačiau jeigu tokiu būdu reikia užkrauti didelį kiekį informacijos ir serveris veikia lėtai, vartotojas gali būti suklaidintas ir nueiti į kitą puslapį. Kad to išvengti, patariame naudoti krovimosi paveikslėlius “Preloader’ius”, kurie yra rodomi vartotojui, kol yra kraunamas turinys. Pvz.:

44409

Tokius dailius paveikslėlius galite pasidaryti patys, su preloaders.net sistemėle. Joje lengvai susikursite norimą paveikslėlį, nurodydami jo išvaizdą, spalvą, dydį, bei animacijos greitį. Taip pat visi šioje sistemoje sukuriami paveikslėliai gali būti su permatomu fonu, todėl tiks bet kokiame tinklapio dizaine.

Žymos: ,

Failų dalinimosi sistema: DropBox

Autorius: Petras 2009 08 12, TrečiadienisKategorijos: Frontend.lt, Projektų kūrimas, Vartotojo interfeisas

dropboxTurbūt sutiksite, kad kartas nuo karto mums visiems tenka dalintis dideliais failais su draugais, todėl naudojame įvairias jų dalinimo paslaugas (failai.in, Rapid share, etc.) Deja visos šios paslaugos nėra pakankamai patogios, o už pilną funkcionalumą dažniausiai dar reikia primokėti, todėl nusprendžiau papasakoti apie DropBox projektą.

DropBox - tai internetinė failų talpykla, kuri savo patogumu pranoksta visas kitas panašaus pobūdžio paslaugas. Didžiausias privalumas yra tai, kad nereikia sukėlinėti failų per naršyklę – tiesiog užtenka atsisiųsti DropBox programėlę, kuri jūsų kompiuteryje sukuria katalogą, į kurį įdedant failus, jie iškarto patalpinami internete.

Dar keli šios sistemos privalumai:

  • Galimybė prieiti prie savo failų iš bet kurio kompiuterio.
  • Galima turėti įvairaus privatumo lygmens katalogus: Viešą, Beveik viešą (pvz.: pasidalinimui nuotraukomis su draugais) ir visiškai privatų.
  • Darbas su direktorijomis.
  • Mini versijų valdymo sistemėlė, kurios pagalba galima valdyti failų revizijas.
  • Patogus darbas su nuotraukomis
  • Saugumas – Prisijungimui naudojamas HTTPS protokolas.
  • 2 GB nemokamos vietos serveryje
  • … ir galų galiausiai labai patogi vartotojo sąsaja – puikus pavyzdys, kaip reikia kurti tokio pobūdžio projektus.

Taigi visko tikrai nepapasakosiu, o tiesiog parekomenduosiu šią sistemėlę išbandyti patiems :)

Taip pat būtų įdomu sužinoti jūsų nuomone, taigi nepatingėkit pakomentuoti.

Žymos: , ,

Adobe AIR pradžiamokslis

Autorius: Petras 2009 07 30, KetvirtadienisKategorijos: Technologijos, Vartotojo interfeisas

adobe_airŠiek tiek nukrypsiu nuo Web temos ir parodysiu, kaip dalį interneto atnešti į jūsų darbalaukį. :) Viskas prasidėjo nuo to, kad jau kurį laiką naudojuosi labai šaunia paslauga playlist.com, kurios pagalba galiu turėti internete savo Playlist’ą (liet. grojaraštį) ir klausytis savo mėgiamos muzikos, prie bet kurio kompiuterio. Tačiau ilgainiui iškilo problema, kad klausytis muziką per naršyklę kai yra atidaryta 50 įvairių puslapių yra tikra kankynė, taigi nusprendžiau pasidaryti sau Darbastalio programą su Adobe AIR. :)

Čia pateiksiu trumpą pamokėlę, kaip greitai susikurti savo mini programėlę su AIR’u:

  1. Pradžiai jums prireiks parsisiųsti paties AIR varikliuką ir AIR SDK, kuriuos galite parsisiųsti paspaudę ant šių nuorodų:
    Adobe AIR
    AIR SDK
  2. Pasidarome index.html failiuką, kuris atvaizduoja tai, ką atvaizduos mūsų programa. Maniškis atrodo taip:
    1.        
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3.         <head>
    4.                 <title>Petras player</title>
    5.         </head>
    6.         <body>
    7.                 <div>
    8.                         Mano playlis.com grotuvo embed kodas
    9.                 </div>
    10.         </body>
    11. </html>
    12.  
  3. Pasiruošiame programos deskriptorių: app.xml failiuką, kuriame nusistato visi programos kompiliavimo parametrai. Šio failiuko turinys turi atrodyti taip:
    1.  
    2. <application xmlns="http://ns.adobe.com/air/application/1.0">
    3.   <id>com.example.appname</id>
    4.   <version>1.0</version>
    5.   <filename>Petras Player</filename>
    6.   <initialwindow>
    7.     <content>index.html</content>
    8.     <visible>true</visible>
    9.     <width>435</width>
    10.     <height>400</height>
    11.         <maximizable>false</maximizable>
    12.         <resizable>false</resizable>
    13.         <systemchrome>none</systemchrome>
    14.   </initialwindow>
    15. </application>
    16.  
  4. Kad būtų patogiau testuoti programą, pasidarome šią failų/direktorijų struktūrą:
    */programa/source/index.html
    */programa/app.xml
    */programa/build
    */AdobeAIRSDK/ (Čia nukopijuojame visą AIR SDK archyvo turinį) Rekomenduoju įsirašyti direktoriją */AdobeAIRSDK/bin/ į savo Windows aplinkos sisteminius kelius (Environmenth paths), tada rašant komandas, nebereikės vargti su pilnais šio SDK failų keliais.
  5. Testuojame :) Pasileidžiame windows shell’ą (komandinę eilutę)
    Einame į */programa/source direktoriją ir įvedame komandą: “adl source/app.xml”
    Maniškė programa puikiai pasileido, o kaip gi jūsų? :)
  6. Kai pilnai sukuriame programą belieka ją “subuildinti”, tačiau visos AIR programos reikalauja skaitmeninio sertifikato. Jam sukurti galima panaudoti AIR SDK, toje pačioje eilutėje įrašant:
    “adt -certificate -cn SelfSign -ou Dev -o “Pavyzdinis sertifikatas” -c US 2048-RSA ../sertifikatas.pfx slaptazodis”
    Kai įvykdome šią komandą, direktorijoje */programa/ turėjo susikurti sertifikatas.pfx failas, kurį panaudosime programos sukūrimui (Nepamirškite slaptažodžio ;) )
  7. Paskutinis žingsnis: programos build’inimas. Komandinėje eilutėje įrašome šią komandą: “adt -package -storetype pkcs12 -keystore ../sertifikatas.pfx ../build/Mano_programa.air app.xml index.html”
    Įvykdžius šią komandą gauname gražų Mano_programa.air instaliacinį failą, kurį jau galime duoti išbandyti draugams :)

Štai ką gauname, kai pasileidžia ši programa:

mano_playeris

Žymos: , ,

AutoFill ir laukų vardai

Autorius: Petras 2009 03 31, AntradienisKategorijos: Technologijos, Vartotojo interfeisas

filling_formsJeigu tenka atlikti interneto projektų analizę, ar kitokį darbą, kuriam atlikti reikia prisiregistruoti prie daugelio tinklapių ar internetinių sistemų, paprastai tenka užpildyti galybę registracijos formų, o tai iš tiesų varginantis procesas.
Kai registruojuosi naujame tinklapyje, kai kuriuose iš jų registracijos formą galiu užpildyti daug greičiau,  jei visiems formos laukams yra priskirti logiški vardai – tada pati naršyklė man pasiūlo užpildyti lauką tokia pačia reikšme, kurią buvau kažkada įvedęs kitoje formoje.autofill1

Tai yra labai patogu, jei tenka rankomis pildyti daug panašių formų. Deja ne visuose tinklapiuose tai yra įmanoma, nes ne visur tiems laukams yra priskirti korektiški name atributai ir todėl AutoFill funkcija neveikia.

Viskas ką tokiu atveju reikia padaryti, tai kiekvienam laukui priskirti vardą, kuris atitinką lauko pavadinimą, anglų kalboje.
Pvz.: laukams “Vardas”, “Pavardė” ir “El. paštas” turėtų būti suteikiami tokie vardai:

  1. <input type="text" name="name" />
  2. <input type="text" name="lastname" />
  3. <input type="text" name="email" />
Žymos: ,

Checkbox ir label. Patogi smulkmena tik su html

Autorius: Paulius 2009 03 25, TrečiadienisKategorijos: Technologijos, Vartotojo interfeisas

Karts nuo karto puslapyje tenka panaudoti sąrašą su keliomis pasirinkimo galimybėmis. Tam geriausiai tinka <input type=”checkbox” /><label>Pasirinkimas</label> html elementų derinys. Naudojant juos dažniausiai užmirštama, kad nerašant jokio JS galima juos apjungti taip, kad checkbox elementas pasižymėtų ne tik paspaudus ant jo, bet ir ant jam priskirto label elemento. Tai padaroma labai paprastai, o toks pakeitimas itin supaprastina vartotojo darbą išrenkant norimą elementą.

Taip veikia checkbox nepriskirtas label elementui:

O taip checkbox elementas priskirtas label:

Toks priskyrimas padaromas labai paprastai, tereikia kiekvienam iš šių elementų priskirti po vieną atributą. Input (type=”checkbox”) elementui atributas id=”elmento_id”, o label elementui atributas for=”elemento_id”.

  1. <input id="check_1" type="checkbox" /><label for="check_1">Pasirinkimas 1</label>
Žymos:

Pažink ir suprask lankytoją

Autorius: Paulius 2009 03 16, PirmadienisKategorijos: Vartotojo interfeisas

different_wievsKiekvieną kartą žvelgdamas į svetainės išvaizdą susimąstau, juk kiekvienas ją matome skirtingai. Tai vyksta ne vien dėl to, kad naudojame skirtingas naršykles, kitokius kompiuterius ar mūsų interneto greičiai skirtingi. Visa tai daugiausia įtakoja pats žmogus, kuris stebi ir “bendrauja” su Jūsų svetaine.

Dabartiniai interneto projektų autoriai išsprendė daugumą techninių problemų.  Jie sugalvojo kaip keisti svetainės proporcijas, besikeičiant ekrano dydžiams,  kaip prisitaikyti prie mobiliųjų įrenginių. Jie netgi pradėjo optimizuoti programinį kodą bei multimediją, tam, kad sumažinti svetainės užsikrovimo laiką. Bet retai kas bando prisitaikyti prie plačios lankytojų asmenybių įvairovės.

Kur atkreipiame dėmesį tik užsikrovus svetainei? Į puslapio turinį? Išdėstymą? Paveikslėlius? Kas labiausiai patraukia dėmesį?  Manau, bendros nuomonės nebus – tinklapyje besilankantys žmonės labai įvairūs. Jiems įdomi ne tik  informacija, kurios jie ieškojo, bet ir tai, kur ir kaip ji pateikta. Lankytojas mieliau skaitys gražiai suformatuotą, reikalingose vietose išryškintą ir tinkamo pločio tekstą, nei padriką, per visą ekraną besiplečiantį žodžių kratinį.

Sukurti universalią svetainę labai sunku, turbūt, net neįmanoma. Tačiau visada reikia to siekti. Nepraleisti smulkmenų, pamažu tobulinti išvaizdą, klausti lankytojų nuomonės, bendrauti su jais. Dalis dabartinės interneto visuomenės jau supranta kaip veikia internetas ir gali duoti tikrai naudingų patarimų. Tereikia mokėti juos priimti ir pritaikyti savo svetainėje.

Žymos: ,