Interfete 4 Web - Carcoteala zilnica despre interfete web: 2008

Mircea Badea despre Hi5

Ca tot am scris despre Pericolul Hi5, sa vedem ce parere are Mircea Badea despre chestia asta:



Ce imi place la interfeta web Blogger in Draft

...este ca foloseste in ecranul de admin, AJAX.

Dai click pe numele unui post si iti arata un fragment din el (e drept, fara imagini...).

Este dragut, stau si ma joc cu chestia asta de placere. :)

Navigatia pe web folosind tastatura

De curand am dat peste un post pe Coding Horror (un site mai mult decat recomandat programatorilor) care discuta problema navigatiei cu tastatura in formularele online. Autorul analiza acolo o greseala facuta de programatorii de la ebay.

Problema de fapt este ca genul asta de greseli sunt peste tot. Pe mine personal, m-a deranjat chestia asta pe siteurile de torrente romanesti (rsr si iplay).

E bine ca ne invata cursul de IE si cum sa avem grija la tab-order.

Consistenta in interfete

Cautam acum cateva zile prin Control Panel din Vista o optiune si mi-a luat ani intregi :) sa o gasesc. De ce? Pentru ca la feicare vesiune a sistemului de operare Windows, Microsoft se gaseste sa schimbe lucruri care functionau, stricand consistenta.

Consistenta interfetelor are doua aspecte: Consistenta temporala (adica sa nu schimbi interfata ca logica intre doua versiuni ale aplicatiei) si consistenta pe latime ( adica sa fie ordonate toate partile interfetei in acelasi fel, urmand aceleasi "guidelines").

La consistenta pe latime Windows sta de departe cel mai bine, mai bine decat Gnome si KDE, desi exista si acolo guidelines stabilite de ceva vreme. Temporal insa, nici un sistem de operare nu sta prea bine.

Si totusi sistemele de operare sunt softuri care sunt pe piata de ceva ani, ar fi trebuit sa ajunga la un tip de interfata optim pana acum.

Expresivitate in interfete web: Bataie electronica!

Cine zicea ca in crestinism regula sa intorci celalalt obraz este lege? Ia uitati aici rugaciune de forumist:

Expresivitate in interfete web 2.0

Am vazut al doilea nivel de expresivitate in interfete web.

Daca pana acum imaginile si videoclipurile folosite ca reactie la diverse threaduri pe forumuri era standard, refolosibile, au inceput sa apara acelasi gen de reactii, dar modificate special pentru ce se intampla in threadul respectiv.

Un exemplu ar fi acest videoclip:

In care, imediat inainte de momentul in care copilul se sperie, forumistul a introdus o poza postata de initiatorul threadului, poza care pe el l-a speriat. A fost de mare efect replica!

Expresivitate in interfete web: Uimire II



Cred ca imaginea vorbeste de la sine, se potriveste perfect in seria despre expresivitate in interfete web inceputa de Dragos.

Feeds si gadget-uri de sezon

Pentru ca e iarna, e frig afara, mai si ninge (si avem probleme cu deplasarea), concursurile de ski sunt in plina desfasurare si avem vacanta e bine sa avem mici gadget-uri sau news feeds care sa ne ajute in sezon.

In topul preferintelor mele sunt stirile despre concursurile de ski. Pentru asta pot sa ma abonez la Yahoo! Eurosport - Winter sports feed. Pe urma ma interseaza destul de mult cum va fi vremea (si mai ales cand mai ninge la munte:P) si ca sa aflu mai usor pot sa-mi adaug un google dektop gadget. De asemenea foarte util mi s-ar parea si un feed despre starea partiilor noastre, ceva asemanator cu varianta austriaca.

Last but not least, cel mai mult mi-as dori un gadget care sa ma anunte cand vine Mos Craciun... poate pana la anul va aparea unul:P

Inca un bug Blogger

Deja sunt prea nervoasa ca sa mai scriu un articol ca lumea:

Nu merge schimbarea dimensiunii fontului din editorul de Blogger In Draft.

Baietii de la Google, ati vazut asta? Blogger in Draft nu e beta macar, nu ar fi trebuit publicat! Nu e normal sa faceti release la editor de texte care nu functioneaza corespunzator, e un feature de baza al oricarui blog!

LE: Intermitent, dimensiunea fontului afisata in editor nu corespunde cu cea reala, vazuta in blog.

Alt bug al Blogger

Cand incercam sa compun postul postul meu de revenire, mi-am dat seama de un alt bug al Blogger In Draft.

De aceasta data bugul este in interfata de administrare, in editorul de posturi. Imaginile raman uneori acolo unde le-ai inserat, si oricate eforturi ai depunde sa le muti prin drag and drop, nu vei reusi. Dupa 5 minute foarte enervante, am comutat in modeul de editare html si am mutat codul html responsabil cu imaginea.

E bine domle sa inveti html!

Bug in Blogger in Draft

De asta se cheama versiunile blogger in draft beta, ca nu sunt finale, nu?

De exemplu, traducerea in romana nu e finala. Cand sa scrie omul un comentariu inteligent, hop top, tre sa dea click pe un buton. Si nu orice buton, ci butonul pe care scrie, in mod extraordinar de intuitiv, "Finlandeza".

Or fi vrut ei sa scrie acolo "Finalizeaza" sau ceva, cert e ca au busit traducerea. Si nici un roman nu s-a sinchisit sa le atraga atentia. Daca era o greseala la traducerea in franceza, ce scandal era :). Asa suntem noi, romanii, mai nepasatori cu identitatea noastra.....

Nu trebuie sa ma credeti pe cuvant, lasati un comentariu aici , de test, ca sa vedeti voi insiva cum sta treaba.

Interfete web de sarbatori

In zilele noastre firmele au inceput sa-si vanda din ce in ce mai mult produsele online, sau cel putin sa-si vanda imaginea. De aceea in afara de reclame la TV, radio etc trebuie sa aiba si un site care sa atraga "audienta" aflata in target. Cum iarna ne bucuram de reclame cu zapada, mosi craciun, oameni de zapda si cam tot ce e specific acestei perioade eu cred ca si site-urile ar trebui sa fie un pic personalizate in aceasta perioada.

Motivele pentru care site-urile ar trebui un pic "impodobite" de sarbatori ar fi ca asa s-ar adapta spiritului de consum al sezonului (in ce alt sezon esti atat de darnic...), ceva nou nu strica niciodata, reducerile de Craciun sunt binevenite:) si e bine sa arati utilizatorului ca te preocupa starea lui de spirit (deci site-urile pentru musulmani shoudn't have any santas:P)

Mascota Java

Stiati ca limbajul de programare java are o mascota?
Eu nu, pana azi. O cheama Duke si mie imi pare ca este amoeba. :)

Banc cu programatori

Se intalnesc odata un medic, un inginer si un programator si incep sa se certe despre care a fost cea mai veche profesie din lume:
- Dumnezeu a creat femeia din coasta lui Adam, asa ca cea mai veche profesie e medicina, spune medicul.
- Dumnezeu a separat ordinea de haos, asta fiind o treaba pur inginereasca, spune inginerul.
La final, spune programatorul:
- Da' cine credeti ca a creat haosul?

La cate buguri aiuristice am vazut pana acuma, chiar si aici pe blogger, tind sa fiu de acord.

De ce nu ar trebui sa folositi tabele in designul web

Cele 5 motive pentru care nu ar trebui sa folositi layout bazat pe tabele HTML sunt:

  1. paginile se incarca mai greu
  2. redesignurile devin mai laborioase si scumpe
  3. rezultatele de la motoarele de cautare devin mai proaste
  4. accesibilitatea scade
  5. flexibilitatea scade
Alternativa este:
CSS

NU amesteca designul cu continutul
NU creste nejustificat dimensiunea paginilor
USUREAZA updateurile interfetei
PASTREAZA utilizabilitatea

Detalii aici.

Ce addonuri de Firefox folositi?

Lista de add-onuri care imi sunt indispensabile sunt instalate in Firefoxul meu acum, este:

Foxmarks - pentru sincronizarea bookmarkurilor intre mai multe computere si vizualizarea lor pe net
Adblock - ca sa omoare reclamele alea cu mult pr0n :)
Realplayer - ca sa pot downloada videoclipuri
Skype si Yahoo - pentru ca se instaleaza singure :D

Am auzit oameni care sunt dependenti de add-onuri precum MouseGestures....
Voi ce add-onuri folositi si de ce le considerati utile? Cum modifica/ imbunatatesc acestea experienta pe care o ofera siteurile web pe care le vizitati?

Cum cream cel mai simplu o interfata web?

Ma gandeam ca multi studenti, obligati fiind odata cu proiectul de IE sa vorbeasca despre interfete web, se avanta si descriu tehnologii cu care nu au lucrat suficient. Este neplacut, pentru ca din punct de vedere calitativ, descriereile respective nu sunt pe cat de valoroase ar putea fi.

De aceea, eu o sa scriu despre o tehnologie pe care ai vrea sa o transmiti bunicii tale cand ar dori ea sa isi faca site (atat de simpla este): HTML.

Desigur, bunicii tale i-ai recomanda un editor WYSIWYG, dar voi prezenta in acest post o scurta descriere a standardului HTML.

HyperText Markup Language, un subset al SGML, defineste niste noduri care folosesc pentru a modifica aspectul unui text ce este desenat intr-un brower web. Adica, scriem textul normal ce vrem sa para pe pagina si adaugam taguri care ii modifica formatarea. De exemplu un text aflat intre <i> si </i> devine italic.

Asemanator se procedeaza pentru text ingrosat ( < b > = bold ). Pentru inserarea de imagini se foloseste un tag cu atribute. Atributul necesar este locatia imaginii. De exemplu: < img src="exemplu.gif"/> . Tagurile care au inainte de > caracterul / nu necesita prezenta tagului de inchidere.

Mai multe informatii puteti obtine de aici.

I'm back

Dupa o scurta absenta in timpul sarbatorilor, m-am intors cu chef de vorbit despre interfete web.
Asteptati-va la multe posturi ( interesante, sper eu ) din partea mea in curand.

Browser users

Daca browserele care va permit sa vizualizati interfetele web preferate ar putea vorbi despre utilizatorii tipici, ce credeti ca ar spune? Raspunsul, aici:

Remarcati pe Mac dude, Obama, Paris Hilton, FPS Doug (tipul cu replica "Boom! Headshot" - epica), Bill Gates si probabil ca si ceilalti sunt cunoscuti, daor ca nu ii stiu eu.

Expresivitate in interfete web: Uimire

Daca doriti intr-un forum, blog, sau alta interfata web sa exprimati uimirea sau nelamurirea, puteti folosi urmatorul clip:
Mai sugestiv ca limbajul corpului din realitate, cred eu. Interfetele web au devenit mai expresive ca orice alt tip de interactiune.

Ce sunt interfețele în programarea orientată obiect?

Ma gândeam acum câteva zile care ar fi definiția interfetelor în Java de exemplu.

Să luăm urmatoarea posibilă definiție:

clase care au numai funcții abstracte (fără variabile membre)

Mai trebuie adăugat ceva? Cine stie ce îi mai trebuie definiției de mai sus pentru a fi corectă?

Javascript - cum sa citest dintr-un fisier

Download exemplu

In unele interfete web este nevoie sa se poata deschide si incarca fisiere locale. Un exemplu bun este Google Docs unde incarci un fisier local si il stochezi/editezi online.

Pentru Internet Explorer deschiderea unui fisier html si afisarea lui s-ar face cam asa:

- In primul rand cream un buton de browse:

< form name=form1>
< input type=file name="browse" onChange="afisare()" onClick="sterge()">
< /form>

- Spatiul din pagina in care se va face afisarea este un container: < div id ="test">

- Deschiderea si citirea din fisier se va face cu ajutorul ActiveXObject de tipul FileSystemObject si functiei OpenTextFile:

var myFileSysObj = new ActiveXObject("Scripting.FileSystemObject");
var myInputTextStream = myFileSysObj.OpenTextFile(document.form1.browse.value, 1, true);
if(myInputTextStream.AtEndOfStream)
{
alert("file is empty");
sterge();
return;
}
var str = new String(myInputTextStream.ReadAll());
var d = document.getElementById('test');
d.innerHTML=str;
myInputTextStream.Close();

- Numele fisierului l-am extras din campul browse document.form1.browse.value si inainte de a citi tot fisierul myInputTextStream.ReadAll() am verificat daca fisierul nu e gol sau s-a ajuns la capatul stream-ului if(myInputTextStream.AtEndOfStream), caz in care ReadAll ar fi generat eroare.

Fisierul fiind deschis intr-un string, acum fisierul poate fi modificat sau se pot face cautari utilizand proprietatile si functiile obiectelor de tip string ca de exemplu: str.length, str.slice(start_index, stop_index), str.lastIndexOf(string, start_index), str.indexOf(string,start_index), str.substr(start_index,nr_of_char)

Un alt obiect foarte util pentru prelucrarea stringurilor in javascript este RegExp pentru utilizarea expresiilor regulate. Crearea unui obiect RegExp se poate face asa:

var myregexp = /regex/;
sau
re = new RegExp("\\w+");
Un exemplu de utilizare combinata a obiectelor String si RegExp ar fi urmatoarul:
myString.replace(myregexp, "replacement")

Se vede ca a venit vacanta...

... nu mai scrie nimeni nimic despre interfete web. Liniste totala.

Craciun fericit! :)

Cand comunicarea devine imposibila

Am citit recent un banc pe net:

Copii, ati citit "Capra cu 3 iezi?"
-Daaaaaaa...!!!!!!(raspunde clasa).
-Tu, asta mic din prima banca, ia spune-ne cati iezi avea capra...?
-Pai povestea se cheama "Capra cu 3 iezi", nu?
-Da
-Si acum ma intrebati "cati iezi avea capra"?
-Da...
-TREI, ...in pula mea....!!!!!!!!!!!
-Adrian Despot, stai jos, azi ai nota 2.

Asta e apropo de un interviu luat artistului mai sus numit, in care acesta isi arata vadit nemultumirea legata de neprofesionalismul unei jurnaliste, bauta in timpul slujbei.

Firefox 3.1 beta 2 si utilizabilitatea

Un principiu important de respectat pentru a crea interfete (nu neaparat web) mai utilizabile este ca acestea ar trebui sa isi faca treaba cu cat mai putine operatii din partea utilizatorului. Cel mai la indemana contor pentru operatiile din aprtea utilziatorului este numarul de clickuri.

Voi da un exemplu scurt si revelator, zic eu: instalarea Mozilla Firefox. De ceva vreme, developerii se chinuie sa o faca din ce in ce mai usoara, deoarece pentru un broswer web, al carui target este format nu numai din specialisti, instalarea poate fi o problema pentru multi potentiali utilizatori.

Astfel, de la versiunea 3.1 beta 2, publicata acum cateva ore, instalarea va cere doar 3 clickuri (pentru setarile tipice). S-a reusit aceasta performanta prin eliminarea ferestrei de acceptare EULA, care a a fost mutata undeva in about:rights. Nu imi este foarte clar cat de legala e treaba aceasta (cum sa stie userul daca sa instaleze sau nu aplicatia, daca poate citi conditiile instalarii doar dupa ce o instaleaza?) , dar mi se pare o schimbare binevenita din punctul de vedere al utilizabilitatii.

Contrastand asta cu programul de instalare pentru alte aplicatii cu target aproape tot atat de mare, gen Yahoo Messenger, si tinand cont si de ultimile facilitati introduse in Firefox 3 (gen awesomebar) devine evidenta preocuparea celor de la Mozilla pentru utilizabilitatea browserului lor.

Way to go, Mozilla!

Masini si Interfete Web

Mi-am rezervat azi o ora ca sa vad in ce masura sunt pregatite site-urile celor mai importanti producatori de masini din lume sa isi primeasca clientii. Am inspectat site-urile Mercedes, BMW, Audi si Toyota.
  1. Mercedes are cate un site diferit, in functie de limba si locatia cu care pornesti cautarea in Google. Cum site-ul american nu prea a vrut sa se incarce in browsere (IE, Firefox), am intrat pe site-ul britanic. Pagina are o interfata usor accesibila, lizibila. Cu toate astea, parca intrarile in meniuri sunt toate la fel. Eu as fi ales un font mai mare de exemplu pentru Model overview, ca sa stie lumea ca numai asa poti ajunge in pagina cu toate modelele actuale. Site-ul e un pic prea organizat, in orice caz nu e un site pe care ajungi din prima unde vrei.
  2. BMW sta mai bine la partea de cautare in Google; are un site world-wide, din care poti alege usor site-ul regional al tarii tale. Ce nu imi place nici aici (am remarcat si la celelalte site-uri de masini germane) este ca se folosesc mereu pop-up-uri pentru paginile noi, si trebuie sa setezi browserul sa le permita. Frumos la BMW e ca toate site-urile regionale au acelasi design, simplist si rapid de navigat. Meniu orizontal, functional, sus de tot in pagina, pentru fiecare model de masina. Site-ul functioneaza repede si imi place mult.
  3. Audi are si el site world-wide, trecut totusi in Google ca site-ul USA. Sufera de boala pop-up din pacate, iar prima chestie care socheaza e ca meniul frumos, orizontal, din susul paginii, cu modelele de masini, e cam nefunctional. Abia pe site-urile regionale, el functioneaza totusi cum trebuie. Altfel, site-ul romanesc e foarte accesibil, relativ usor de navigat (meniurile ar fi putut sta in stanga decat departe in dreapta). Este oarecum mai bine ca aici nu sunt optiuni interactive de selectie a culorii masinii de exemplu, sunt pur si simplu puse masinile in toate culorile disponibile pe o pagina.
  4. Ca sa fac o schimbare de peisaj, am cautat si alti producatori decat germani si m-am oprit la Toyota, firma cu cele mai mari vanzari de masini la nivel mondial din prezent. Site-ul asta este clar orientat catre vanzare rapida a masinilor. Meniuri mari, cu poza masinii langa model si chiar cu pretul minim necesar pentru o masina standard. Cautand un pic, am constatat ca site-ul world-wide ne ofera optiunea de a merge pe site-ul tarii in momentul in care dorim sa inspectam o masina. Din pacate, ei nu au site romanesc. Am fost curios sa intru pe site-ul britanic si aici e o alta abordare, "europeana". Masinile sunt intai prezentate ca piese de muzeu, abia dupa ceva cautari gasim si niste preturi. Prefer clar varianta americana.
Ca o concluzie, site-urile de masini nu sunt facute pentru oamenii grabiti. Intri pe ele, te acomodezi cu mediul, cercetezi toate ofertele, si abia apoi cumperi. Contrast mare fata de magazinele online de calculatoare de exemplu, cu cautari dupa componente bine detaliate. Totusi, contrastul e normal pana la urma, calculatoarele se adreseaza de cele mai multe ori oamenilor tehnici, o masina ti-o alegi de multe ori doar dupa marca si aspect.

Interfete web cu wiki, forum, blog si chat

Astazi am purtat prima discutie din cadrul temei de IE pentru curs. Ne-am strans 9 oameni si am discutat in contradictoriu o ora despre wiki, forum, blog si chat. La sfarsitul sesiunii am cazut destul de repede de acord asupra unei modalitati de a integra cele patru instrumente intr-o singura interfata web.

Despre wiki-uri s-a spus ca sunt utile pentru a urmari evolutia unui proiect, ca sunt utilizate pentru a documenta si oferi informatie open source ce poate fi editata de mai multi editori, sub supravegherea unui moderator.

Despre bloguri s-a zis ca sunt mai bune pentru ca ofera interactivitate forumurilor, viteza chaturilor, expresivitatea unei conferinte video si utilitatea unui wiki

Chat-urile sunt foarte utilizate pentru ca sunt interactive, se pot schimba informatii audio si video, se poate interactiona la un nivel mai personal si confidential si pot facilita obtinerea unui raspuns pe moment

Forum-urile pot fi utilizate pentru a tine o eivdenta a discutiilor pentru utilizatorii care cauta raspunsul la aceleasi intrebari, au avantajul de a aduna multa informatie despre topicuri diverse si de a avea un timp de raspuns destul de bun pentru cei care au nevoie urgenta de un raspuns.

Dupa multe argumente pro si contra acestor patru instrumente am ajuns la urmatoarea modalitate de a le integra intr-o interfata:

- Wiki va fi folosit pentru a tine informatiile esentiale bine organizate.
- Forumul va fi utilizat pentru a pune intrebari referitoare la informatiile gestionate de wiki.
- Un chatbox va fi integrat in forum pentru ca utilizatorii online sa ofere raspunsuri rapide la intrebari.
- Blogul va fi utilizat pentru a relata experiente personale despre subiectele abordate pe wiki si forum.

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

TinyXML tutorial

Download exemplu TinyXML

Parsele XML pot fi folosite pentru a extrage informatii din interfete web. De exemplu blogger are un API care poate accesa informatiile blogurilor cu ajutorul atom.xml forma xml asociata fiecarui blog.

TinyXML este un parser XML scris in C++ care este foarte usor de integrat si de utilizat. Sursele pot fi descarcate de pe SourceForge si compilate.

Eu am compilat sursele si am integrat libraria care a rezultat tinyxmld.lib si headerele tinyxml.h si tinystr.h in proiectul meu. In continuare am incercat cateva din functionalitatile de baza oferite de librarie:

-Am incarcat fisiereul xml:
TiXmlDocument doc( "test.xml" )
doc.LoadFile();

-Am incarcat primul nod:
pStart=&doc;  
pNext=pStart->FirstChild();

Cateva din obiectele pe care le-am folosit au fost:
TiXmlNode *pStart,*pNext;
TiXmlAttribute *pAttribute;
TiXmlDeclaration *pDeclaration;
TiXmlComment *pComment;
TiXmlElement *pElement;

Obiectul cel mai important este de tipul Node. Un nod poate fi de mai multe tipuri: DECLARATION, COMMENT, ELEMENT, TEXT, UNKNOWN. Tipul nodului se poate afla cu urmatoarea functie:
pChild->Type()

Cel mai important este tipul ELEMENT care poate avea subnoduri din oricare tip. Un nod poate avea atribute care vor fi accesate cu ajutorul obiectelor de tipul TiXmlAttribute. Fiecare tip de nod va fi prelucrat utilizand un obiect specific, de exemplu un nod de tip ELEMENT va fi prelucrat cu ajutorul obiectului de tip TiXmlElement.

Pentru a parcurge fisierul se porneste cu primul nod copil al nodului parinte de tip DOCUMENT. In continuare pentru a trece la nodurile de pe acelasi nivel se foloseste functia NextSibiling.
pStart=&doc;
pNext=pStart->FirstChild();
pNext=pNext->NextSibling();

Pentru a obtine obiectele specifice tipului de nod se folosesc functiile puse la dipozitie:
pDeclaration=pNext->ToDeclaration();
pComment=pNext->ToComment();
pElement=pNext->ToElement();
pText=pChild->ToText();

Numele nodului (tag-ului) se poate obtine utilizand functia Value
pElement->Value()

Numele unui atribut si valoarea acestuia se obtine cu ajutorul functiilor:
pAttribute->Name()
pAttribute->Value()

Primul atribut al unui nod se poate accesa cu functia FirstAttribute() iar urmatorul atribut cu functia Next()
pAttribute=pElement->FirstAttribute();
pAttribute=pAttribute->Next();


Modificarea unui fisier XML este de asemenea foarte simpla. Se poate modifica un atributul unui nod sau valoarea lui apoi se salveaza documentul.
pAttribute=SetAttribute("url", "interfete4web.blogspot.com");
pComment->SetValue(" Am modificat comment-ul" );
doc.SaveFile( "newTest.xml" );

Interfete Web pentru site-uri de companii

Dupa cum se stie, designul unei interfete web reprezinta modul de interactiune al utilizatorului cu un site. O interfata semnifica in general punctul de contact dintre 2 obiecte.
Interfata web este asadar locul in care o persoana intra in contact cu site-ul si este reprezentata de meniuri, formulare si in general orice "se vede" si "functioneaza" pe acel site.
Orice companie respectabila din lume trebuie sa aiba in momentul actual un site cu o interfata web cat mai buna. Ce inseamna asta? Pai, asa cum specifica si acest site, o interfata web trebuie sa fie alcatuita astfel incat experienta utilizarii site-ului sa fie:
  1. usoara
  2. eficace
  3. intuitiva
Este de exemplu o idee foarte buna sa fie create iconite sugestive pentru fiecare lucru de pe site.
O interfata buna, nu neaparat atragatoare, insa foarte functionala si bine organizata este cea a producatorului de avioane comerciale cu cea mai mare cifra de afaceri din lume, Boeing.

Prezentarea noastra despre Interfete web

Am terminat o prezentare a echipei noastre de maine. Este doar varianta beta, dar descrie o parte destul de consistenta din rezultatele noastre de pana acum, cu blogul asta cel putin. Puteti sa o "rasfoiti" poate va va atrage mai mult blogul scris despre interfete web, dupa ce faceti asta. Aruncati si o privire pe site, linkul este chiar in dreapta, in sidebar, este la indemana.
Interfete Web
View SlideShare presentation or Upload your own. (tags: interfete web)
Daca maine in jurul orei 11 sunteti aproape de sala EG405 din Facultatea de Automatica si Calculatoare, ne-ar face mare placere sa ne urmariti prezentarea live; am pastrat o aprte din continut numai pentru cei care vin la prezentarea adevarata.

Cum sa ascunzi adresa de mail pe internet?

SIERRA MADRE, CA - MAY 29:  Seventieth anniver...Image by Getty Images via DaylifeDaca iti postezi adresa de email pe internet, curand vei incepe sa primesti foarte mult spam, deoarece programe specializate, ale spammerilor, iti vor cauta si gasi adresa.

De aceea, e bine sa o protejezi cu un mecanism de ascundere. De obicei, in protectia adreselor de mail din interfete web, se foloseste captcha , care se bazeaza pe faptul ca numai oamenii pot recunoaste niste litere foarte distorsionate. Captcha te obliga sa recunoasti cuvinte scrise distorsionat si sa le introduci intr-un camp de editare text pus la dispozitie de  interfata web.

Exista siteuri, care ofera interfete web pentru ascunderea adresei, fara ca tu sa trebuiasca sa platesti nimic.

Asemenea siteuri sunt: TinyMail si reCaptcha. Folositi-le consecvent si va vor scuti de multe dureri de cap!




Reblog this post [with Zemanta]

Enciclopedii online

Toata lumea a auzit de Wikipedia ca fiind enciclopedia de referinta a internetului. Cu toate acestea, am fost curios sa aflu ce apare la o cautare pe google dupa "online encyclopedia". Nu mica mi-a fost mirarea sa gasesc Wikipedia pe locul 4, asa ca am intrat putin sa vad ce au de oferit enciclopediile din top 3.
- pe locul 1 gasim encyclopedia , un motor de cautare prin enciclopedii online. Cum bara de cautare este la indemana, am cautat dupa "intel". Rezultatele pentru enciclopedii online sunt situate abia dupa "Related topics" in pagina, cam slabuta organizarea deci. Am dat si eu click pe primul rezultat, care citeaza enciclopedia Britannica. Descrierea este extrem de concisa pentru o pagina de enciclopedie, cu multe multe ad-uri google dupa, asa ca reactia imediata a fost sa inchid de tot pagina.
- pe locul 2 gasim chiar enciclopedia Britannica. Site-ul probabil ca odata nici nu se misca, fiindca modalitatea in care incarca incet-incet poze din diferite locuri ale paginii sugereaza totusi o usoara optimizare in prezent. Bara de search e tot vizibila, totusi cam redusa in dimensiune. Am cautat acelasi lucru ca mai sus. Intai mi se ofera niste rezultate partiale, poate nu caut chiar compania (cam slabuta partea asta, o interactiune cu utilizatorii si cu ce cauta cel mai frecvent ar fi bine venita). Descrierea e din nou muult prea sumara ca sa se preteze la o companie de anvergura Intel, basca ploua cu ad-uri google.
- pe locul 3 suntem intampinati de Encarta. In sfarsit gasesc un design de site care imi place. Rezultatele sunt de data asta relevante - am doar 2 link-uri, unul cu informatii despre companie, altul cu informatii despre microprocesoarele lor. Detaliile oferite despre companie sunt putine, cu toate astea mai bogate decat pana acum si mult mai bine organizate.

Ca o concluzie, voi vorbi despre Wikipedia, recompensata de google cu o mentiune de onoare... Site-ul este excelent, se vede ca este facut in intregime din articole adaugate de utilizatori. Se vede clar dorinta de a sti cat mai mult a omului modern. Articolele sunt lungi, detaliate, cu informatii cum ar fi bugetul si cifra de afaceri a companiei (am cautat tot Intel si am fost directionat direct catre pagina cu informatii despre companie). In mod normal, as fi criticat bara de search, situata in stanga si cam micuta, dar se pare ca milioane de utilizatori ai site-ului au avut o parere diferita de a mea, asa ca nu contez in cazul asta. Faptul ca scrisul este negru pe alb si pagina se incarca ultra rapid este iar un atu. Pe langa asta, pentru cine nu stie cum sa gaseasca repede un articol, poate cauta pe google "nume_articol_cautat wiki" si in principiu primul rezultat indica spre wikipedia.

Top 5 afise electorale amuzante

Dupa topul interfetelor web ale politicienilor, astazi am selectat cele mai amuzante afise electorale de la alegerile din ultimii ani din Romania. Daca am scapat vreunul, nu ezita sa imi pui in vedere acest lucru.


Pe locul 5 : PSD Arad

Politicienii de mae talent de la PSD Arad au facut Cina cea de taina.


Pe locul 4: Matei (Cine e Matei asta?!)

Sa-mi votati...ouale!




Pe locul 3: Viorel Stefan

Pentru ca cel mai important aspect al politiic romanesti este sa nu dormi ( si sa faci rime in timpl ala), PSD+PC, chiar la alegerile de ieri, au avut urmatorul afis:



Pe locul 2: Cristian Amariei

Pentru ca "Conan Barbarul" traieste!



Pe locul 1: Codruta Arvinte

Au incercat un slogan care sa atraga cat mai multi barbati. Nu le-ai iesit.

Viitorul nostru?

Cred ca multi si-au pus intrebarea, daca ar fi sa folosesc experienta cursului de interfete evoluate, ce as putea face in viitor?
Un raspuns paote fi regasit daca vizitati siteul acesta.
Este vorba de o companie romaneasca ce realizeaza la comanda siteuri web. Dupa spusele lor ofera pe langa interfata web, search engine optimization, servicii de mentenanta si chiar design pentru logouri.
Cu toate ca personal nu imi place interfata siteului, cred ca este unul pe care merita aruncata o privire, fie ca vreti o inspiratie pentru propriul site sau (sper ca nu) sa apelati la ei pentru ajutor.

Care sunt impresiile voastre?

Imnul rock

Acum cateva saptamani am fost la Sala Radio, la un concert interesant: era vorba de o interpretare cu instrumente moderne si in stil rock a unor piese calsice, dintre care mai multe apartineau lui Mozart. Unele mi-au placut mult, altele mai putin, dar ideea mi s-a parut foarte buna. Mai multe despre concert gasiti in acest articol.


Avand in vedere ca in aceasta perioada e ziua tarisoarei noastre, am cautat o interpretare asemanatoare a imnului nostru national. Si am descoperit ca nu suna rau deloc, desi nu toate vocile se potrivesc in atmosfera.

Suntem un popor de roackeri, nu alta! Cu ocazia asta mi-am dat seama cat de misto suna chitara electrica si ce rol important are in mai toate melodiile rock.

Bucurati-va de imnul national, in varianta rock, cu interfata web stil youtube:



Cum sa folosesti facilitatile beta ale Blogger.com

Intre toate platformele de blogging, blogger ofera cea mai limitata dintre interfetele web. De aceea, accesul la facilitatile beta (sau "draft" cum le spun cei de la Blogger) este esential pentru a aduce cat mai multi vizitatori pe blogul tau.

Pentru a activa facilitatile beta, vizitam siteul draft.blogger.com unde intalnim panoul de control alternativ al blogger beta. Va trebui sa faceti toate activitatile dina cest panou de control de acum ininte , si nu din cel standard. O prima schimbare de remarcat este nou editor pentru posturi care ofera o flexibilitate mai mare si facilitati noi.

La noi pe blog am folosit ratingurile cu stelute oferite ina ceasta versiune a blogger. Optiunea se gaseste dand clikc pe panoul "Aspect" , apoi alegand "Editati" pentru widgetul "Postari de blog". Bifati optiunea "Afisati evaluarile" si gata, stelutele ar trebui sa apara pe blog. Daca acest lucru nu se intampla , selectati "Editati HTML" si dati click pe "Întoarce şabloanele componentelor grafice la forma prestabilită".

Majoritatea acestor facilitati functioneaza perfect, dar, nefiind testate cum se cuvine, e posibil sa fie si momente de nefunctionare sau sa aiba o instalare mai grea. Noi pana acum suntem multumiti de aceste noi facilitati. Ratingurile cel putin sunt alternativa cea mai rapida dintre cele existente acum pentru blogger(asa cum va spuneam la postul despre optimizarea interfetei blogului nostru).

Daca aveti un blog colectiv (posteaza mai multi bloggeri) este dificil sa obligati fiecare blogger sa intre la noual panou de control in loc de cel vechi, de aceea este bine sa bifati casuta "Doresc ca Blogger în schiţă să fie tabloul meu de bord prestabilit." de pe prima pagina a noului vostru tablou de bord .

Mult succes!

Vizitatorul nostru, stapanul nostru

Astazi s-a incheiat perioada de vot la cel de-al terilea sondaj realizat pe blogul nostru. Pentru eternitate, el se referea la ce putem imbunatati in propria interfata web. Rezultatele au fost urmatoarele:Deoarece aproape 70% din vizitatori au considerat butonul de trimitere pe siteul Digg a articolului ca fiind aiurea, de azi ianinte acesta nu se va mai regasi in paginile blogului. Aceeasi soarta e posibil sa o aiba si butoanele de "interesant", "distractiv", etc - ele au fost vortate de un numar consistent de vizitatori. Totusi, deoarece numarul de vizitatori care le-au dort afara nu a fost mai mare decat numarul celor care considera itnerfata ok, vom mai reflecta asupra problemei.



Butonul de Digg era jucaria mea preferata...

Am mai lucrat la imbunatatirea timpului de incarcare a pagilor, in special a mainpageului; asta s-a concretizat in renuntarea la vechiul nostru furnizor de ratinguri pentru articole si trackbackuri - HaloScan - a carui viteza lasa de dorit. Noul furnizor este chiar Blogger.com - va vom povesti intr-una rticol viitor despre cum am facut sa activam widgeturile de rating cu "stelute".

Va multumim pentru ca ati votat in numar mare in sondaj si va promitem ca vom incerca sa imbunatatim interfata si in continuare, ca sa facem citirea articolelor un lucru si mai placut ca pana acum.
Reblog this post [with Zemanta]

Europeana - Popularity brings the site down

Pe 20 noiembrie a fost lansat siteul bibliotecii digitale europene. Europeana.eu nu va fi doar biblioteca digitala ci si muzeu si arhiva. Acest proiect isi propune sa fie o interfata web interculturala ce va aduna pana in 2010 nici mai mult nici mai putin de 10 milioane de lucrari disponibile in toate limbile Uniunii Europene:)



La momentul de fata siteul ar trebui sa puna la dipozitie mai mult de 2 milioane de carti, picturi, filme, fotografii, inregistrari, harti, documente de arhiva. Am spus "ar trebui" pentru ca siteul este momentan indisponibil. Motivul pentru care siteul a cazut este pentru ca nu a fost proiectat pentru numarul record de vizitatori care a au accesat siteul in prima zi: 10 milioane pe ora

Pana la mijlocul lui decembrie cand siteul va fi pus pe picioare, ne sta la dispozitie siteul de dezvoltare : http://dev.europeana.eu/ , care din pacate este doar in engleza. Daca sunteti curiosi sa aflati mai multe despre istoria proiectului Europeana.eu si despre propunerile de creare a Bibliotecii Digitale a Romaniei puteti citi un articol pe care l-am gasit aici

Scarbele din politica romaneasca

Nu imi vine sa cred ce mizerabili sunt astia. Si tot el zice de mojicie...




Niste tarani, bre!

Ca sa stiti pe cine votati. Nu degeaba e Vlad nehotarat. Eu clar nu merg la vot anul asta, mi-e scarba.

Despre XSL

XSL este o prescurtare a eXtensible Stylesheet Language, si defineste un standard de descriere a fisierelor XML. Un fisier XSL ofera unui browser informatii despre modul de afisare al lui fisier XML, similar cum pentru HTML se foloseste CSS.
Cel mai simplu mod de utilizare pentru a vedea functionalitatea si utilitatea limbajului este crearea unui fisier XSL ce va contine informatii despre formatarea nuui fisier XML. Pentr a realiza legatura intre cele doua fisier, in fisierul xml ce se doreste formatat se va introduce linia:
, atributul href indicand fisierul de formatare folosit. Browserul se va ocupa in continuare, la deschiderea fisierului XML, de a aplica formatarea descrisa in foaia_de_formatare.xsl.

Cel mai important element din XSLT este templateul, avand sintaxa:

<xsl:template match="element_XPath">
<!--prelucrari-->
<xsl:template>

Elementul match specifica o expresie XPath dupa care se indentifica nodurile ce vor fi prelucrate. In interiorul XSL:template se vor prelua apoi datele dorite din nodul gasit si se va face formatarea lor. Un fisier xsl va avea urmatoarea structura:


<xsl:stylesheet version="1.0" xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
.......
</xsl:template>
</xsl:stylesheet>


In locul tagului “xsl:stylesheet” se poate folosi si:
<xsl:transform version="1.0" xsl="http://www.w3.org/1999/XSL/Transform">
</xsl:transform>

Ca urmare a folosirii xsl:template, elementul indicat de match (in exemplul de mai sus fiind vorba de nodul radacina) va fi inlocuit cu continutul

Alte cateva elemente importante sunt:

-> <xsl:value-of> ce va extrage valoare unui nod extras folosind o expresie XPath
-> <xsl:for-each> ce permite extragerea unui set de noduri ce indeplinesc o conditie XPath, fiecare fiind apoi formatat.
-> <xsl:sort> ce va realiza sortarea elementelor, atributul select indicand campul dupa care se va face sortarea, iar atributul order, ordinea finala a elementelor.


Un mic exemplu ce permite afisarea xml-ului generat la exportarea cartilor din libraryul gmail intr-un tabel, sortate dupa titlu este urmatorul:

<xsl:stylesheet version="1.0" xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">

<html>
<body>

<table>
<tr>
<th>ID</th>
<th>URL</th>
<th>Title</th>
<th>Authors</th>
<th>ISBN</th>
<th>Labels</th>
</tr>

<xsl:for-each select="//book">
<xsl:sort order="ascending" select="title"/>
<tr>
<td><xsl:value-of select="id"></xsl:value-of>
</td>
<td><xsl:value-of select="url"></xsl:value-of>
</td>
<td><xsl:value-of select="title"></xsl:value-of>
</td>
<td><xsl:value-of select="contributor"></xsl:value-of>
</td>
<td><xsl:value-of select="//identifier[.//type='ISBN']/value"></xsl:value-of>
</td>
<td>
<xsl:for-each select="labels/label">
<xsl:value-of select="."> ,
</xsl:value-of>
</xsl:for-each></td>
</tr>
</xsl:for-each>
</table>

</body>
</html>
</xsl:template>
</xsl:stylesheet>

10 sfaturi pentru o interfata web mai buna

Am remarcat intre siteurile participante la proiectul la care activam si noi, o serie de greseli care pot avea consecinte nefaste asupra dezvoltarii de lunga durata a siteului. Sfaturile de mai jos sunt de baza pentru orice site sau blog. Daca iti doresti trafic mai mare, sa apri mai sus in Google si sa iti fie remarcate eforturile online, ar fi bine sa le respecti:

1. Nu folosi o interfata web standard
Daca siteul/blogul tau nu se individualizeaza prin nimic fata de ceilalti concurenti, vizitatorii nu isi vor aminti de tine prea usor. Daca folosesti o tema standard pentru blog, gandeste-te ca sunt sute de mii de oameni care au blog care arata la fel cu al tau.

2. Nu folosi o descriere si titlu standard
Pentru utilizatorii care sunt adusi de un motor de cautare, e destul de greu sa te gaseasca daca esti unul din cele 10 siteuri de ep prima pagina cu titlul "Interfete Web".

3. Interfata Web neechilibrata sau stridenta
Daca blogul sau siteul tau are un sidebar care se intinde vreo 5 pagini (scroll) in jos si continutul propriu-zis doar una, atunci ai o problema. Zoso a scris despre aceasta problema de mult, dar nu am reusit sa gasesc articolul anume.
De asemenea, ar fi bine sa nu le lacrimeze ochii vizitatorilor dupa 5 secunde de uitat prin continut din cauza culorilor stridente sau incompatibile una cu cealalta.

4. Nu scrie despre ce nu cunosti
Daca scrii despre un subiect care nu iti e cunoscut, fa-o doar ca sa ceri opinia altora, nu te da mare specializt deoarece os a fii recunoascut instand drept Noob de cater experti si acesti a nu se vor mai intaorce pe siteul tau; ba mai mutl , te vei alege si cu comentarii "arzatoare".

5. 3 videoclipuri de pe youtube nu fac un articol

Nu e de ajuns sa dai copy - paste ca sa ai un articol bun. Poate numai daca esti deja recunoscut si iti permiti, ca in cazul lui Zoso. Altfel, trebuie sa si comentezi ceea ce ai vazut, sau sa fii sigur ca vedeoul respectiv este "self-explanatory", cum zice englezul.

6. Citeaza sursa, daca acest lucru ajuta utilizatorii
Nu e obligatoriu, dar e bine si pentru tine (utilizatorii au acces la mai multa intormatie, prin tine) si pentru sursa care va primi mai multi vizitatori de la tine si iti va remarca siteul. Nu e obigatoriu, dar e recomandat si e o situatie win-win.

7. Nu umple pagina principala cu gadgeturi ce se incarca greu
Daca dureaza incarcatul apginii mai mutl de 5 secunde, ai o problema. Proabbil Google va crede acelasi lucru si te va penaliza in cautari.

8. Cere parerea utilizatorilor
Un sondaj simplu cu privire la ce ar fi bine sa scoti din interfata, duce la simplificarea interfetei si asigura utilizatorii ca dorinta lor conteaza pentru tine.

9. Invata din greselile altora
Citeste alte bloguri, analizeaza-le: ce au bun, ce au mai putin bun. Cauta analize facute de altii.

10. Foloseste statisticile
Nu e de ajuns doar sa te inregistrezi epntru Google Analitics sau trafic.ro. Trebuie sa si folosesti statisticile pentru a observa care articole au avut succes, care nu; care linkuri nu sunt suficient de vizibiel si care sunt amplasate prost; cand vin utilizatorii mai des si cand nu; ce caracteristici compune are majoritatea vizitatorilor, pentru a putea sa ajustezi continutul siteului/blogului tau la nevoile lor.

Meniuri ideale

Mai jos sunt cateva din meniurile de pagini web care mie imi plac cel mai mult. Probabil ca in viitorul apropiat, multe alte site-uri vor merge pe una din variantele astea. La nivel de utilizator neavizat sunt extrem de simplu de utilizat, iar la nivel de om care sta toata ziua pe net sunt linistitoare si cu butoanele acolo unde le este locul.

Asadar, aici
este interfata site-ului de torente care este preferatul meu in ceea ce priveste interfata.

Urmeaza magazinul meu online preferat (emag)

si site-ul de informatii sportive pe care il accesez zilnic (eurosport).



Gadget-uri pentru interfete web

Intr-un articol anterior vorbeam despre cat de usor se poate face o pagina web cu ajutorul CMS. Exista de asemena si template-uri de pagini web care pot fi descarcate gratuit si adaptate pentru a obtine rapid un site care arata bine.

Dar cum putem face un site/blog sa fie mai cool fara sa pierdem prea mult timp?
Foarte simplu...adaugam niste gadeget-uri, adica dam copy/paste la bucati de cod deja scrise pe care le includem in paginile noastre. Ca sa fiu mai explicita voi da cateva exemple de gadget-uri foarte utilizate si o sa povestesc pe scurt si cum facem rost de ele:

1. Pe Google Gadgets gasiti tot felul de gadget-uri: ceasuri, mp3playere, calendare, tool-uri financiare, harti, countere etc. Mie mi-a placut un paianjen care se plimba asa ca am selectat gadget-ul am dat click pe Get the Code si apoi am dat copy/paste in articol.



Si acum avem si un mic pet al blog-ului nostru care urmareste mouse-ul:)


2. Pentru a avea o pagina web foarte animata putem adauga si animatii in flash. Se descarca un fisier swf si se scrie in sursa paginii web ceva de genu: "<"embed width="" height="" src="numefisier.swf"> "<"/embed>. Cele mai des utilizate sunt bannerele si paginile de start animate in flash. Eu am adaugat un joculet recomandat de frate-miu...Atentie e violent deci nerecomandat copiilor:)



3. Alt gadget foarte popular este mini-playerul youtube. Foarte multa lume vrea sa-si puna pe blog o melodie, un filmulet funny sau o secventa din emisiunea lui mircea badea. Cel mai simplu e sa intri pe youtube, sa cauti filmuletul si sa dai copy/paste la codul scris in casuta "Embed". Eu am gasit o melodie foarte draguta tot pe un blog in timp ce imi faceam prima tema la IE:)



4. In general pentru a face o pagina mai dinamica si mai interactiva se utilizeaza javascript si ajax. Cel mai funny exemplu de cat de departe se poate merge cu javascript este DHTML lemmings

La ce cautari suntem pe prima pagina in Google

Pentru ce cautari iese blogul nostru pe prima pagina de rezultate Google pana acum?

interfete web (of course :P , locul 1 sau 4, oscilam)
badea programator (locul 1)
programatori timizi (locul 1)
nume firefox (locul 2)
dependenta de net (locul 8)
CTTE (locul 9)

Eu zic ca este foarte bine, avand in vedere ca suntem de 20 de zile online :)

Alte cautari dupa care ne gasesc oamenii ar mai fi:

badea
SEO
si....
p3nis

Da, ai citit bine. Chiar cuvantul ala e. Cum de am ajuns sa fim cautati dupa asa ceva? Pai a venit cineva care sa ne critice intr-un mod elegant, intr-un comentariu la un articol mai vechi. Ne-a adus vizitatori si pentru asta ii multumim.

PS: Va rugam sa vorati in sondajul din partea dreapta, ne va ajuta sa va oferim o interfata web pe gustul vostru.

Bloguri pentru candidate...continuarea

Acum 2 saptamani cand presa vuia despre alegerea noului presedinte al SUA (desi nu cred ca a fost o surpiza ca e iesit Obama) am scris si eu despre blogurile catorva doamne candidate la alegerile de pe 30 noiembrie. Astazi voi comenta blogurile/siteurile a doua candidate destul de mediatizate din motive politice sau mai putin politice.

Voi incepe cu cea mai mediatizata doamna din politica romaneasca: Elena Udrea.
La cautarea pe google primele 2 intrari sunt blogul si siteul. Mi se pare excelent faptul ca, desi apare mereu in presa despre monden, in pictoriale sexy sau in "reclame" la genti LV, cele mai bine cotate pagini sunt cele legate de activitatea politica si profesionala.

Am intrat mai intai pe blog (care face parte din site) si am fost din nou placut impresionata. Aspectul este placut si practic: iese in evidenta si culoarea portocalie si poza doamnei Udrea, dar in dreapta apare si Agenda, care mi se pare foarte utilia in cazul in care esti interesat de activitatea candidatei. De asemenea articolele sunt taioase si in stilul tandemului Basescu-Udrea vezi Premier sau nimic?. Ce mi se pare batator la ochi este ca la o saptamana pana la alegeri post-urile sunt despre ce nu fac bine Tariceanu, Geoana, PSD si nu despre ce face bine doamna Udrea. Ce arata cel mai mult faptul ca blogul este foarte vizitat este numarul considerabil de commenturi. De exemplu cele 2 articole postate ieri au deja 300 de commenturi (si nu toti vizitatorii scriu si commenturi). De aceea am si cautat page rank-ul blogului si am aflat ca blogul are Page Rank 3, ceea ce este destul de bine: noi de exemplu avem 0 :D si cancan.ro are 5:P

Ce nu-mi place la site este in primul rand poza mult prea mare a doamnei Udrea de pe pagina principala (cu un decolteu mult prea mare), care oricum este cam incarcata. La partea de proiecte au aparut 4 intrari pe 18 noiembrie, ceea ce denota apropierea votului. Alt lucru care mi-a displacut la prima vedere este sectiunea Concurs, dar dupa ce am vazut despre ce e vorba (concurs pentru alegerea sloganului electoral etc.) mi s-a parut o strategie buna:)

In concluzie site-ul doamnei Udrea este un site electoralreusit (desi un pic cam incarcat) si nu lasa loc de discutii in ce priveste motivul pentru care a fost creat: alegerile de pe 30 noiembrie. Vom vedea cat de bine se vinde produsul Elena Udrea tinand cont ca in ambalaj s-a investit mult, dar cel mai important ramane tot continutul!

Utrmatorul blog pe care am intrat a fost cel al candidatei PSD Oana Niculescu-Mizil (contracandidata lui GIGI). Am constat ca e mai placut sa te uiti pe un blog aerisit cu mai putine constraste de culori (obosisem de la siteul Elenei Udrea). Am gasit blogul cam greu, deoarece mai intai am dat search dupa "Oana Mizil" si toate link-urile erau despre moda, mirese etc. Trecand de prima impresie (ca nu ma mai dor ochii) am inceput sa dau scroll, dar nu m-am oprit sa citesc niciun articol deoarece mi se pareau prea lungi si cu prea putine paragrafe. Nu mi-au placut nici link-urile catre bloguri de la sfarsitul catorva posturi. Mi se pare cam ciudat ca la Top Articol apare sectiunea cu poze. Mi se pare ok ca exista link si catre siteul ei de campanie, altfel nu l-as fi gasit niciodata, dar ar fi trebuit pus in prima parte a paginii ca sa fie vizibil cand se incarca blogul.

Pe blog exista si un Trafic Counter care nu stiu cat de bun e: arata 20000 de vizitatori dar cum blgoul/siteul nu e in scris pe Trafic.ro nu am aflat cati sunt vizitatori unici. Ca page rank sta la fel de "bine" ca noi: 0. La capitolul page rank cred ca Elena Udrea a facut knock out celalalte candidate.

Pe blog apar cam putine posturi si siteul nu contine nimic la sectiune Agenda. Informatiile de pe blog si de la sectiunea Media nu mi se par suficiente pentru a contura o imagine de candidata, dar trebuie sa tin cont si unde candideaza: in Ferentari contra Gigi Becali. Pot presupune ca acolo oamenii nu stau sa citeasca pe net despre Oana Mizil cand le vine curentul, iar pozele de pe blog sugereaza ca activitatea ei se desfasoara mai mult pe teren ceea ce cred ca e un avantaj.

In concluzie, nu cred ca s-a depus prea mult efort in mediatizarea pe net a doamnei Oana Mizil dar blogul ofera cat de cat informatii despre activitatea din campanie si personalitatea candidatei (P.S. e stelista :P )

Cea mai proasta interfata web vazuta de mine vreodata

Inca incerc si nu reusesc sa ma trezesc din socul avut acum cateva minute cand am vazut cea mai proasta interfata web de pana acum (si am vazut ceva siteuri ). O sa va las pe voi sa judecati, daca mai puteti dupa ce o vedeti:

Aici.

Asta e tortura, nu interfata web. Si siteul ala mai are si nume havenworks.

Oare ce au gandit designerii aia cand au facut opera asta de arta? Sau a fost dorinta clientului sa arate asa?

Ca meniul sa fie complet, sa privim pagina dedicata portofoliului si in acelasi timp pentru SEO . A se remarca prezenta cuvintelor cheie, pe acelasi rand, toate, nepuse intr-o propozitie. Probabil mergea cand era Google in Beta, mai stii?

GNU logo

Continuand seria de articole despre logouri celebre, azi discutam despre sigla GNU. GNU este un sistem de operare creat (prin faptul ca este free), cu intentia de a fi opusul Unix, de unde si acronimul: GNU Not Unix.

Pornind de la denumirea sa, logoul reprezinta (surpriza!) un gnu.

Antilopa gnu este un pasnic ierbivor din familia bovine, ce traieste pe pajisti si in zonele de savana din sud-estul Africii, avand durata de viata de peste 20 de ani. Exista doua specii, antilopa gnu neagra sau albastra, cea din urma datorandu-si numele reflexelor albastre-arginii ce le are pielea, acoperita cu par foarte scurt. Logo-ul GNU insa, se apropie mai mult de imaginea antilopei negre.

O mare parte din popularitatea initiala a siglei GNU se datoreaza cantecului, bazat pe jocuri de cuvinte, realizat de Flanders si Swann, care a facut deliciul multor ascultatori:

A year ago, last Thursday I was strolling in the zoo
when I met a man who though he knew the lot.
He was laying down the law about the habits of Baboons
And how many quills a porcupine has got.
So I asked him: 'What's that creature there?'
He answered: 'Oh, H'it's a H'elk'
I might of gone on thinking that was true,
If the animal in question hadn't put that chap to shame
And remarked: 'I h'aint a H'elk. I'm a Gnu!'

'I'm a Gnu, I'm a Gnu
The g-nicest work of g-nature in the zoo
I'm a Gnu, How do you do
You really ought to k-now w-ho's w-ho's
I'm a Gnu, Spelt G-N-U
I'm g-not a Camel or a Kangaroo
So let me introduce,
I'm g-neither man nor moose
Oh g-no g-no g-no I'm a Gnu'

I had taken furnished lodgings down at Rustington-on-Sea
Whence I travelled on to Ashton-under-Lyne it was actually
And the second night I stayed there I was woken from a dream
That I'll tell you all about some other time
Among the hunting trophies on the wall above my bed
Stuffed and mounted, was a face I thought I knew;
A Bison? No, it's not a Bison. An Okapi? Unlikely, Really. A Hartebeest?
When I though I heard a voice: 'I'm a Gnu!'

I'm a Gnu, ,A g-nother gnu
I wish I could g-nash my teeth at you!
I'm a Gnu, How do you do
You really ought to k-now w-ho's w-ho.
I'm a Gnu Spelt G-N-U,
Call me Bison or Okapi and I'll sue
G-nor am I the least
Like that dreadful Hartebeest,
Oh, g-no, g-no, g-no,
G-no g-no g-no I'm a Gnu
G-no g-no g-no I'm a Gnu

It's very G-nice of you.




Reblog this post [with Zemanta]