Interfete 4 Web - Carcoteala zilnica despre interfete web: 2008-12-07

Javascript - tabIndex pentru butoane

Download exemplu

Miercuri la laborator s-a vorbit putin despre ultima tema la IE. Studentii vor avea de facut interfete web care sa indeplineasca anumit cerinte. Printre cerinte se numara si problema navigarii cu ajutorul tastei tab. De multe ori se intampla ca ordinea de navigare prin tab-uri sa nu corespunda cu ordinea logica in care au fost puse butoanele / campurile in pagina. De aceea ar trebui sa setam proprietatea de tabIndex pentru fiecare buton.

Mai jos am creat un mic exemplu in care m-am jucat cu ordinea de navigare:










Box 1:
Box 2:
Box 3:



Declararea unui buton cu proprietatea de tabIndex setata ar arata cam asa:

< button id="b1" tabIndex="1"> Button 1</button>

Pentru a obtine valoarea tabIndex putem scrie:

var b1=document.getElementById('b1').tabIndex;
document.write("Tab index of Button 1: " + b1);

In cazul in care vrem sa navigam intre campurile unei forme vom seta tot proprietatea tabIndex:

< form name=yourform>
Box 1:
< input type=text name=box1 tabIndex="5" onFocus="nextfield ='box3';">
</form>

Un exemplu complet puteti vedea aici iar codul poate fi descrcat din sectiunea download al site-ului nostru

Opriti nebunia cu Interfete Web!

Cautam ceva pe Wikipedia despre Javascript si, la articolul respectiv, jos, la legaturi externe, am descoperit ceva interesant. Primul link ducea spre un site romanesc, care avea totusi un nume dubios de familiar. Am dat click si imediat mi-am dat seama: e siteul realizat pe o echipa pentru cursul de interfete evoluate.

Am ajuns sa ne autoeditam chiar si pe wikipedia acuma! Asta e cea mai tare! Goana dupa linkuri e in toi! Si, normal, e greu sa facem rost de linkuri muncite, hai sa ne editam siguri in Wikipedia! Fratilor, nu e asa greu sa ajungem la o situatie win - win, sa ajutam un site sa aiba continut mai bun de exemplu si sa primim un link in schimb... de ce trebuie sa ne auto adaugam in enciclopedii?! Chiar credeti ca siteurile noastre amarate sunt bune de enciclopedie?!

Am incercat sa verific presupunerea mea, daca oamenii respectivi chiar s-au editat singur - ma indoiesc ca i-a pus cineva neutru acolo. Schimbarea respectiva nu a fost facuta de un user inregistrat (destul de dubios - rar se intampla asa - , dar normal daca ne gandim ca persoana respectiva nu mai avea de gand sa faca nici o alta editare... ). Linkul a fost pus initial spre homepageul siteuilor, apoi mutat spre un articol despre Javascript, ca na, riscau sa ii dea astia afara ca nu era nimic despre Javascript in linkul ala. De descris modficarile facute iarasi, omul respectiv nu a auzit. Intr-un cuvant, da de banuit toata treaba.

Totusi, pana la urma, dovezi concrete nu am (motiv pentru care nu am dat nume sau legaturi spre site), dar tind sa cred ca am dreptate. Nu o sa fac altceva decat sa dau un citat din regulile wikipedia (netiquette e deja prea mult) si sa sper ca o sa inteleaga persoanele respective mai mult.

La Wikipedia recomandăm ca personalităţile, proprietarii de firme etc. sau apropiaţii acestora să nu încerce să scrie despre subiecte în care obiectivitatea le-ar putea fi umbrită de interesul personal. Foarte adesea astfel de articole create în trecut au suferit grav din lipsa de punctului de vedere neutru şi din abundenţa cercetării originale, şi au trebuit şterse sau rescrise.

Din cauza oamenior de genul asta Wikipedia nu va ajunge niciodata o sursa de informatie la fel de sigura precum enciclopediile editate de companii.

Si cand te gandesti ca linkurile Wikipedia au si atributul nofollow pus (adica nu ii ajuta la pozitia in Google, ci eventual numai cu niste trafic) ...

Exprimarea in interfete web - folosirea imaginilor pe forum

Odata cu interfetele web, comunicarea intre persoane aflate la distanta s-a schimbat. Daca la inceput aceasta comunicare era mult mai putin expresiva din cauza limitarii doar la folosirea textului ca forma de exprimare, in ultima vreme acest lucru s-a schimbat.

Voi prezenta in seria de articole cateva imagini care, folosite pe forumuri, adauga multa expresivitate (si amuzament) comunicarii.

Incepem cu "Get me out of this thread", replica perfecta pentru situatiile in care ceea ce ati vazut in threadul respectiv v-a provocat greturi si alte neplaceri.

Sper ca nu sunt prea multi din cititorii blogului asta care sa fuga asa.

Rezultate sondaj pozitie blog in Google

S-a terminat perioada de votare pentru ultimul sondaj de pe blogul nostru. A fost sondajul cu cea mai mica participare de pana acum- parca s-ar fi saturat romanii de votat :P . La modul serios, se pare ca sondajele care nu includ o doza serioasa de amuzament nu prea au succes in randul cititorilor.

Partea buna este ca din cele 13 voturi majoritatea sustin ca pozitia binemeritata pentru blog este printre primele rezultate, ceea ce ne bucura.

Promitem ca urmatoarele sondaje vom incerca sa le facem mai atractive.

Nu ne-a distrus. Ramane pe maine.

Ender, de la Interfete Web Simple si-a facut in sfarsit timp sa ne raspunda la provocarea lansata cu ceva timp in urma. Ritmul inimilor noastre s-a intors in sfarsit la normal, deoarece nu am fost distrusi, repet, nu am fost distrusi :p. Cred ca suntem singurii; Ender spune asa:

Cu alte cuvinte sunt chiar furios/frustrat.
Pentru ca nu am cum sa distrug site-ul asta.

Totusi, ce spune rau de noi e un pic adevarat. Suntem intr-adevar pagina cea mai mare (a se citi greu de incarcat, la 90+ de kilo) de pe prima pagina Google si siteul nu are un aspect prea "de firma".

Daca la miscorarea dimensiunii paginii mai lucram, de site nu zic nimic. Aici, noi nu stim ce sa facem... mi se pare aberant sa mintim afirmand ca suntem o firma de IT care bla bla si bla bla... cred ca aici cerintele proiectului s-ar putea modifica, nu fac decat sa invete studentii ca anonimatul dat de internet poate fi folosit ca sa spunem minciuni si sa scapam nepedepsiti. Mi se pare incorect si gasesc aceasta atitudine nenecesara. Avand in vedere ca proiectul asta imi face mare placere nu o sa ma plang prea tare ca echipele care "se dau firma" fura ceva trafic in plus pe chestia asta...

Gasiti aici articolul scris despre noi de Ender.

Mess-ul ca interfata interumana

Trupa mea preferata de comedianti are un clip reprezentativ despre cum se desfasoara majoritatea discutiilor pe mult mediatizatul si intr-adevar utilul "mess".

Interfete pentru manelisti


Am gasit de curand urmatoarea interfata creata dupa cum se observa pentru a ironiza modul in care se realizeaza "muzica" (manelele) in ziua de azi, mai precis pe banda rulanta si pe tematici no comment.


Ignorand(cu greu) cuvintele xxx folosite trebuie observat ca cel care a facut interfata nu se incadreaza in categoria celor care ar folosi-o(daca ar fi reala).




Lasand la o parte simplitatea cu care este facuta, sau verdele strident la butoanele de la pasul 2, interfata este totusi organizata binisor.
In primul rand seteaza parametri pentru conturarea unei melodii. Al doilea pas identifica detaliile piesei, chiar "ajuta" utilizatorul colorand diferit elementele din sectiunile Autorul si Sufixul pentru a scoate in evidenta potrivirile intre cele doua. Iar la ultimul pas, butonul de "Creeaza" este pus ca in orice aplicatie/installer windows pe pozitia Next.

Ok, poate ca am luat-o razna ca analizez asa ceva dar...de ce nu?
E evident din optiunile existente ca toata "aplicatia" este facuta in deradere, dar daca ar fi reala
sunt sigura ca ar face furori in lumea manelelor Va dati seama cate albume ar fi scoase pe zi?

Anonimatul oferit de interfetele web. Ce facem cu el?

Am descoperit urmatorul articol la o cunostinta; avea link in status pe Yahoo Mesenger, si statusul uimitor de potrivit: "Sa nu-i dai palme daca intalnesti una din astea?". Mesaj pe un forum:
Eu: o tipa trendy, frumoasa, cu clasa, care nu a avut decat iubiti cu bani. Nu am iesit nicodata cu bmw. Toti iubitii imi faceau cadouri scumpe si imi plateau consumatia in toate locurile trendy in care ieseam. Plus ca niciodata, dar niciodata nu am iesit cu un nimeni. Intotdeauna am iesit doar cu personaje mondene.
El: un tip dragut, dar sarac. Locuieste intr-un cartier marginas si e student la stat. Conduce un amarat de Logan.
Noi: ne-am intalnit intamplator la ziua unui coleg de-al lui(un tip uratel dar foarte bogat). Eu vroiam sa ma combin cu colegul lui dar el m-a atras atat de tare incat am zis: "Ce naiba! Putem sa ne-o tragem macar azi!". Problema e ca azi s-a prelungit la nesfarsit. E foarte bun la pat si arata bine. Ce n-as da sa fie si bogat! Vreau sa termin cu el si nu prea pot. De cate ori ne vedem si vreau sa pun punct, sfarsim in pat. Nu stiu cum sa scap de el. Imi e rusine fiindca nimeni din grupul meu nu a iesit niciodata cu un sarantoc.

Stim cu totii ca nimeni nu e ceea ce pare pe internet. Internetul iti da posibilitatea sa iti pui 1000 de masti, dar si sa fii sincer cum nu ai fost niciodata. Domnita de mai sus si-a postat pasul pe forumul (normal :) ) Eva. Toate bune si frumoase, pana cand a inceput sa primeasca replici acide - meritate pe deplin. Nu numai atat, dar asa a aflat si tipul ei ce fel de om este ea de fapt. Este primul caz cunoscut de mine in care cineva a primit fix ceea ce merita pe internet. De obicei pe toate forumurile oamenii isi iau suturi pentru greseli de ortografie, de vocabular, de incarcare a unor reguli minore. Iata ca se poate pedepsi si lipsa de bun simt. Pedepsire corecta prin interfete web, fara sa iti vezi la fata "victima" - ei, asta e o imbunatatire a sistemului judiciar :) .

Spuneam mai sus ca e o situatie extraordinara ( cineva sa primeasca practic ce merita, pe internet ) asta si imi pare rau sa consider asta asa. Ma refer la faptul ca sunt N situatii de genul mesajului urmator, care venea cu doua imagini ca atasament:
I finally did it, married my girlfriend of 5 years. She means the world to me, I cant believe what a lucky guy I am. I never thought I would find true love, but now that I have my life is complete. Here are the pictures from out ceremony.
Imaginile erau de la nunta respectivului si aratau faptul ca ea avea o problema cu greutatea - mult prea mare si el o problema, (ghiciti?) tot cu greutatea - prea mica. Ceea ce a urmat in acest thread, m-a scarbit parca la fel de mult ca ideile domnisoarei despre care am discutat mai sus: threadul a fost bantuit de troli groaznic.( Bine, s-a dovedit mai ca autorul nu era chiar tipul care se casatorise, dar cuplul este real, pana la urma, si asta conteaza).

Ce vreau sa spun e ca uneori cu totii judem prea repede/ intr-un mod neadecvat noilor mijloace de comunicare (online) pe care le avem la dispozitie. Apoi, clar trebuie sa existe un test de bun simt si de inteligenta ininte sa se dea abonament de internet. Am zis.

Interfete Web simple

Siteurile ar trebui sa fie simple. De fapt, majoritatea siteurilor cu interfete complicate au o problema cu structuraarea informatiilor. Principiul KISS (Keep It Simple, Stupid!)  functioneaza bine pentru interfete web si usureaza viata utilizatorului, de aceea e recomandat sa il folositi in toate interfetele web pe care le creati.

Voi da doar un exemplu, pentru un site care urmeaza cu succes aest principiu. Situl ofera un raspuns rapid pentru intrebarea pe care milioane de oameni si-o pun in fiecarezi: Este vineri? E drept ca nu taote siteuirle au asa de putina informatie de oferit, dar modul de prezentare conteaza. Si aici isitfriday.biz rupe. Cand cautam in Google "is it friday", primulrezultat este chair siteul acesta. Ghiciti  ce are la descrere? Pur si simplu raspunsul! (Da/Nu). Astfel, siteul iti ofera ceea ce cauti inainte sa intrii in el.

Acum idee pare mai inteligenta decat la inceput, nu?:)

Pentru a tine vizitatorii interesati, blogul nostru ofera in descrierea care apare pe Google un fragment din continutul ultimului post (in particular fragment care contine termenii cautati). Asta numai in cazul in care rezultatul este homepageul blogului, desigur. Daca rezultatul cautarii este un articol, se va afisa parte din articolul respectiv.

Interfete Web pentru ceasuri scumpe

Ceasurile scumpe, mecanice, elvetiene reprezinta un domeniu care ma intereseaza mult (in perspectiva unui viitor stralucit :D). Am intrat pe site-urile companiilor ale caror ceasuri au cea mai mare valoare de revanzare din lume si le-am incercat interfata.

1. Patek Philippe e no. 1 si la site, nu doar la ceasuri. Organizare elvetiana pana la ultimul detaliu (gasim ceasuri pentru barbati, femei si ceasuri de buzunar in tabul Current Collection). Ceasurile au poze si din profil, unele si din spate. Dimensiunile sunt figurate pe imaginea ceasului. Site-ul are background alb si scris de culoarea metalelor pretioase. O placere!

2. Rolex e o marca mult mai cunoscuta de oricine. Nu e oricum cea mai apreciata, dar bate pe oricine prin volumul productiei. Site-ul e ok. Nu are totusi toate detaliile prezente pe site-ul de mai inainte. Imi place mult ca are pe prima pagina un ceas cu ora exacta a mea de acasa (adica stie sa urmareasca o adresa IP :P). Inainte de pagina asta insa, e de fapt o pagina in care trebuie sa iti alegi limba preferata (asta nu prea ma incanta, incetineste din navigare). Ce ma enerveaza sunt site-urile care atunci cand intri pe ele iti redimensioneaza fereastra browserului. Acest site nu face exceptie. Ce e foarte frumos la site e ca ceasurile au poza mare, cu contrast puternic, in centrul paginii.

3. Vacheron Constantin, o marca cu traditie, are un site site situat intre cele 2 de mai sus d.p.d.v al interfetei. Are pagina cu limbi prima, iti micsoreaza fereastra cand intri pe site si deschide site-ul corespunzator limbii alese in fereastra separata, minimizat. Asta ca dezavantaje. Cu toate astea, ceasurile au poze mari, mai mari decat la Rolex chiar, pe fond alb (mai bine). Dispun si de descrieri foarte detaliate, poate chiar mai bine ca la Patek Philippe.

4. Breguet detine un site pentru oameni care nu prea au acces la tehnologie moderna de PC-uri, unde rezolutiile au inceput sa fie mai generoase. Pe pagina principala se intra greu, din al 2-lea click, iar site-ul e asa, mic, intr-o fereastra in centru. Organizarea e buna, meniurile sunt orizontale (stil care imi place), dar parca prea mic scrisul.

Ca o concluzie, companiile au site-uri frumoase, cu interfete destul de usor de accesat. Cel mai greu am umblat pe site-ul Rolex, cel mai usor pe al Patek Philippe.

Interfete4web feed gadget

Acum fanii blogului nostru pot sa-si adauge la ei pe blog un gadget in care se incarca cele mai noi posturi ale noastre. Link-ul la care se gaseste gadgetul este
acesta: interfete4web gadget. Folositi acest link pentru a adauga gadgetul la voi pe blog.



Pentru a face acest gadget am cautat mai intai sa vad ce este efectiv un Google Gadget. Am aflat ca este vorba de un fisier xml care contine datele si codul pentru gadget sau referinte (URL-uri) unde se gaseste restul codului. Acest fisier xml contine blucri HTML si JavaScript,iar Gadgets API (gadgets.*) este un JavaScript API.

Pentru a obtine gadgetul am deschis in Google Gadgets Editor, fisierul xml asociat gadgetului Feeds in Tabs si am modificat un pic codul pentru acesa fisierele atom.xml ale blog-ului nostru si al echipei intev0. Am salvat noul cod intr-un fisier pe care l-am upload-at in editor si am dat Publish, ceea ce a rezultat intr-un link la care se gaseste gadget-ul meu. Astfel am putut sa adaug la noi pe blog un gadget-ul meu de la URL-ul respectiv


Link-uri utile:
Getting started: gadgets*. API
Gadgets API