Interfete 4 Web - Carcoteala zilnica despre interfete web: 2008-11-23

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.