Traffic overview

• majoritatea utilizatorilor noştri au ajuns pe site scriind direct url-ul în browser; acest lucru înseamnă că ne-am ales un nume bun
• pe un loc 2 îndepărtat se află Google care ne-a adus 5.62% din trafic (principalele căutări fiind betyourmom, bet on anything, betyourmom.com şi mom bet com)

Detailed Traffic

• 36.52% bounce rate este acceptabil având în vedere timpul îndelungat cât site-ul a avut o singură pagină
• interesant e că s-a ajuns pe site şi de la un web directory dar şi de la un blog
• observăm spike-uri în trafic pe 21 decembrie (prezentarea erapei trecute) dar şi la începutul noului an

Romanian Traffic

• 92.13% din trafic provine din România, în special din Bucureşti şi din Suceava
• interesant e că site-ul a fost accesat şi din India, Suedia, Germania, Africa de Sud sau Lituania
• trebuie remarcat că bounce rate-ul în Bucureşti este mai mic decât media pe site

Visitors overview

• utilizatorii noştri au o bandă largă de internet şi în general folosesc Firefox
• nu ştim încă ce înseamnă aceste lucruri, dar ne chinuim să aflăm

Top content

• se observă că cele mai vizitate pagini au fost pagina de index şi categoriile Geeks şi Funny
• pe pagina de sign up s-a stat in medie 35 de secunde, indicând un timp bun pentru operaţia de îregistrare în sistem
• totuşi, 22% din cei care au ajuns pe această pagină nu si-au făcut cont, ceea ce ar insemna că ar trebui să facem pagina mai atrăgătoare
• unele pariuri au un număr foarte mic de accesări, indicănd că nu sunt foarte populare

Acum a venit timpul să răspund la întrebarea din titlul post-ului. Deşi site-ul are potenţial, nimeni nu este dispus în momentul de faţă să îl finalizeze şi ulterior să îl întreţină. Acesta este probabil  sfârşitul lui betyourmom.com. Să păstrăm un moment de reculegere.

Toate aceste lucruri duc evident la nevoie de a implementa o structură bazată pe conturi, în care un utilizator trebuie să se înregistreze pe site pentru a putea beneficia de toate aceste facilităţi. În primă fază noi am implementat cele două module esenţiale pentru acest mecanism, şi anume interfaţa de autentificare (pentru cei care au cont deja) şi interfaţa de înregistrare. Pentru acestea este nevoie de programare server-side, pentru care noi am ales limbajul PHP (PHP: HyperText  Prepocessor).

Datele sunt preluate de la utilizator printr-un formular şi sunt salvate într-o bază de date. Ca sistem de gestiune a bazelor de date am ales MySQL, PHP având deja funcţii care pot interacţiona cu un astfel de server.

În principiu , realizarea acestor două formulare nu ridică probleme. Totuşi , programarea server-side are nişte restricţii despre care merită să vorbim puţin. În mod normal, un formular de înregistrare ar fi structurat astfel : o pagină în care se introduc datele, o pagină care conţine scriptul PHP ce prelucrează datele şi o pagină la care ar trebui să fie redirectat utilizatorul după ce s-a înregistrat (nu are sens să rămână pe pagina cu formularul de înscriere) .De asemenea,reamintim că protocolul HTTP se bazează pe cereri : clientul (browserul) cere o anumită pagină , de la o locaţie specificată şi serverul trimite răspunsul în format HTML. Dacă pagina conţine cod PHP, acesta va fi interpretat (de server) şi eventualul output al acestui cod va fi adăugat la conţinutul paginii ce va trimis clientului ca răspuns.

HTTP este un protocol stateless, adică nu există un context al cererilor. Ele sunt independente, nu se salvează informaţii de la o cerere la alta. De asemenea, în cadrul unei cereri nu se poate solicita decât o singură pagină. Asupra acestei proprietăţi vom mai reveni, dar momentan este important să o menţionăm.

Pagina în care se află scriptul este cerută de browser când au fost introduse datele , de obicei prin apasărea unui buton , şi tot scriptul va efectua şi redirectarea. Pentru a efectua o redirectare, serverul nu trebuie să fi trimis output HTML ca răspuns la cererea curentă. De aceea, scriptul de PHP se va afla într-o pagină separată. În cazul nostru, tot procesul de autentificare se face într-o singură pagină,ceea ce complică puţin lucrurile. Inevitabil, serverul a trimis deja o parte din output şi nu mai poate trimite altă pagină ca răspuns. Soluţia noastră a fost redirectarea folosind o tehnologie client-side, şi anume JavaScript.

O altă problemă, despre care probabil că vom mai discuta când vom vorbi despre securitatea site-ului, este cea a modului în care sunt preluate datele de către scripturile PHP. Este preluat şirul de caractere introdus de utilizator şi concatenat cu alte şiruri pentru a forma o comandă SQL (ex: introduce userul “sebaNU” in baza de date – “sebaNU” este textul introdus de utilizator). Dacă utilizatorul ştie să profite de acest lucru, prin datele introduse poate crea o comandă SQL cu efecte nedorite pentru noi . Acest lucu poarta numele de SQL Injection şi poate fi evitat prin trecerea şirului de caractere introdus printr-un filtru care să alăture un escape character fiecărui caracter special din SQL. Noi am implementat această funcţionalitate, folosind o funcţie din PHP.

Închid aici menţionând că orice întrebare,completare sau informaţie legată de cele de mai sus este binevenită.

P.S. Am strecurat nişte surprize pentru Seba. Cine le găseşte primeşte 5000 coins la crearea contului )

Click pe link-ul de mai sus pentru a descărca prezentarea.

Toată lumea știe că Gugăl ascultă dacă destulă lume îi spune acelasi lucru. Să presupunem deci că un număr semnificativ de oameni accesează aceeși bărfă; Gugăl se va sesiza foarte repede și va prezenta și el bărfa pe primele pagini. Dacă însă tu vrei să lansezi un zvon nou și vrei ca lumea să afle de el de la Gugăl, e mai greu, dar nu imposibil. O primă chestie pe care o poți face este să îți înscrii zvonul în niste baze de date de zvonuri numite Web Directories. Aceste baze de date există tocmai ca Gugăl și Iahú să afle mai repede de zvonul tău. În general te poți înscrie în 3 feluri:

1. Plătești. Astfel capeți statutul de Premium Member și Bârfitor Notoriu.
2. Gratuit, dar furnizezi ceea ce se cheamă un “reciprocal link“.
3. Gratuit, nu pui nici un link pe siteul zvonul tău, dar s-ar putea să-i crească lui Gugăl barbă până să te ajute asta cu ceva.

Nu trebuie să stai să te gândești prea mult ca să-ți dai seama că varianta câștigătoare (pentru majoritatea dintre noi) stă în spatele ușii cu numărul 2. Tot ceea ce trebuie să faci este să îți creezi o pagină specială pe site unde să pui link-uri către toate Web Directories unde te-ai înscris. Partea puţin mai urâtă este că trebuie să poți ajunge pe acea pagină de pe pagina principală. Orice om normal s-ar putea gândi că un asemenea link pe pagina principală ar putea strica imaginea zvonului său, dar nu vă lăsați pradă disperării, există și aici o soluție. În codul html unde introduceți noul link, formatați mesajul afișat cu un font care să aibă propietatea style=”display:none” și totul este rezolvat: utilizatorul obișnuit nu va ști niciodată că pe pagină există un astfel de link.

Bineînțeles nu trebuie să mă credeți pe cuvânt, așa că vă invit să vedeți ce zvon încercăm noi să răspândim aici. Mai mult, aș dori să vă propun un mic concurs. Dacă vă dați seama care este pagina noastră cu link-uri către Web Directories, trimiteți un mail cu subiectul [Concurs Web Directories] care să conțină respectivul link la cosmyn008 [coadă de maimuță] yahoo [punct] com și intrați în competiția pentru a câștiga o cutie de bere Guinness sau, la alegere, o ciocolată Milka (ambele nedesfăcute ). Căștigătorul, ales prin tragere la sorți, va fi anunțat prin intermediul unui nou post pe acest blog în cursul zilei de 30 noiembrie 2009.

Baftă și aștept mail-urile voastre!

Drept urmare a concluziilor noastre mai mult decât satisfăcătoare, la numai câteva zile de la cumpararea domeniului, site-ul nostru se situa undeva pe locul 70, şi asta datorită lui Cosmin, care s-a dovedit a avea o pasiune deosebita pentru SEO (search engine optimizations). Astăzi, în contextul unui draft existent şi a unui blog în continuă extindere, rezultatele sunt mai mult decât neaşteptate:

• la căutarea cuvintelor bet your mom, site-ul este pe locul 39 iar blogul nostru de promovare este pe locul 1, din 12 miloane de rezultate
• la căutarea sintagmei betyourmom,  site-ul este pe locul 3 iar blogul pe primele 2, din 249 de rezultate

Avem toate motivele să credem că, la finalizarea proiectului, site-ul ar putea ajunge fără probleme în primele 10 locuri vizavi de orice căutare conţinând cele trei cuvinte cheie, cu atât mai mult cu cât lumea ne tot întreabă când încep efectiv pariurile.Chiar şi dacă nu se va întâmpla aşa, targetul ni l-am atins de mult, având în vedere că la început speram să ajungem în primii 100.

Legat de trafic, am reuşit să instalăm acum o săptămână Google Analytics urmând paşii de aici. Până în momentul de faţă am reuşit să atragem 120 de vizitatori, ceea ce este destul de bine având în vedere statutul de work in progress al proiectului.

Suntem chiar încântaţi de deciziile pe care le-am luat până în momentul de faţă şi sperăm să ne meargă la fel de bine şi de acum încolo. Bet your mom can’t do what we did!

Am creat pagina principală care în mare va rămâne aceeaşi în varianta finală. Ne-a fost mai greu să alegem paleta de culori şi elemente reprezentative, însă după o analiză amănunţită a cătorva site-uri similare, am observat că nici unul nu conţine simbolul tradiţional al norocului – trifoul verde cu patru foi. Aşadar, l-am adoptat imediat şi am reuşit să îl integrăm cu uşurinţă într-o temă neagră cu inserţii de verde.

Poate vi se va părea ciudat, însă noi am creat interfaţa „de mână” în html, deoarece nu deţinem cunoştinţe legate de tool-uri sau tehnologii mai avansate. Am încercat la un moment dat să folosim funcţionalitătile oferite de DreamWeaver, însă cum timpul era scurt, am concluzionat că am pierde prea mult timp parcurgând tutoriale specifice.

Toate celelalte pagini ce urmează a fi adăugate site-ului vor urma ca aspect pagina principală, ba chiar mai mult, utilizatorul va putea accesa de oriunde lista de categorii iar bannerul şi logoul vor fi vizibile în permanenţă. Vom avea aşadar un master template.

În ceea ce priveşte partea programatică, Andrei s-a ocupat de autentificarea utilizatorilor. Mai exact, a creat baza de date din spate, form-urile de autentificare şi a implementat  securizarea contra SQL injection. În momentul de faţă, orice îşi poate crea un cont şi va fi răsplătit cu 5000 de monede virtuale dacă face acest lucru.

Despre tehnologiile folosite vă va povesti Andrei într-un post viitor, când se va întoarce din vacanţă.

Cam atât pentru moment, stay tuned!

Din pacate, mare majoritate a vechilor site-uri de pariuri despre orice au fost inchise datorita crizei financiare care a afectat atatea companii. Una dintre cele mai relevante companii de pariuri DotBlu a dat faliment  acum o saptamana:|

O alta platforma cu capabilitati pentru pariuri este QuorumBet. Nu este un site specializat pe pariuri online si nu are ca target predictibilitatea pietei, ci implementeaza o retea sociala unde oamenii pot paria pe diverse teme relevante  intre cei care fac parte aceluasi grup. Adica se pariaza pe celebritati adorate, pe evolutia technologiilor, pe diverse meciuri sau pe evolutia kg a unei anume colege de servici; fiecare dupa cunostiinte si pasiuni.

Am ales site-ul acesta pentru a arata ce inseamna un  ”bad user interface design “. De ce?  In primul rand pentru ca paleta de culori nu este atractiva , iar designul este mult prea simplist. Pentru vizitatorii noi site-ul poate parea putin confuz pentru ca interfata nu e intuitiva. Textele din anumite sectiuni sunt greu de citit, iar informatia este prea condensata in sectiunea de “how-it-works”. Pe pagina principala exista prea multe spatii moarte, probabil si din lipsa de activitate:D. Falsh-ul din prim-plan este frustrant si creeaza confuzie asupra site-ului.

Site-ul este dezvoltat in PHP, nu-mi dau seama insa sub ce framework. Probabil Symphony ca majoritatea celorlalte.

Revenind la treburi serioase, un exemplu de “good user interface design ” este site-ul celor de la  intrade.  De ce? Cum zice si descrierea : “Este regele predictiilor pietelor”. Am ales acest site pentru exemplu, desi este un pic cam departe de target-ul nostru , pentru a arata ce inseamna simplitatea, echilibrul,usoara folosinta si organizarea unui web-design.Probabil realizat de o companie specializata:D.

Ce-mi place cel mai mult la site este ca paleta de culori este pastrata consistenta de-a lungul intregii navigari. Contrastul intre culori ajuta la o mai buna intelegere si descifrare a informatiei de pe site. Culoarile ajuta ca punctul de focalizare sa fie pus pe informatia relevanta pentru site , astfel ca la o privire fugara iti poti da seama de diferitele grupuri de informatie. Punctele cheie din texte sunt separate de linii bine definite, oferind astfel un feeling de individualitate . Alinierea informatiei este de asemenea destul de bine pusa la punct caci in pagina principala sunt 3 tag-uri cu cele mai importante pariuri din finante , politica si a evolutiei pietelor(acele “prediction markets”) . Pentru fiecare pariu exista acolo un buton cu “explicatii” care face “pop-up”, fara sa paraseasca pagina principala.  Design intuitiv, nu?

Un alt exemplu de “good interface design” este Hollywood stock exchange. Paleta de culori este destul de bine aleasa, si nu deranjeaza. Navigarea pe site este destul de usoara, si informatia este categorisita cum trebuie. Au si tabele cu pariurile realizate pana acum si cu suma de bani  alocata.  Partea de login/register este chiar in dreapta paginii ceea ce o face usor de vazut si accesat.

Acestea cred ca sunt foarte bune exemple pentru ceea ce va trebui sa realizam. Ideea este ca navigarea pe site sa fie o experienta care sa ofere momente puternice in timp atat din punct de vedere a informatiei cat si a contextului. Cum spunea Peter Morville in “Facts of User Experience”, orice design trebuie sa se supuna “honeycomb”-ului:

Site-ul se adresează unui segment de populație cu vărsta cuprinsă între 18-50 ani, format predominant din bărbați. Publicul țintă va fi interesat de pariuri “serioase” (fotbal, baschet, handbal, etc.) și/sau de pariuri amuzante sau nonconformiste menite să binedispună și să relaxeze utilizatorul. Deoarece sistemul de pariuri va fi bazat pe puncte virtuale, utilizatorii vor proveni din toate păturile sociale.

Un caz tipic de utilizare (workflow) al site-ului ar cuprinde următoarele elemente:

1. Accesarea site-ului. Utilizatorul va fi întâmpinat de o interfață prietenoasă și simplu de folosit fără ferestre de tip pop-up și alte artificii enervante de publicitate.
2. Sign In / Sign Up. Utilizatorul va putea să se înregistreze în sistem dacă are un cont sau poate să-și creeze un nou cont. În cazul în care creearea unui nou cont este necesară, viitorul membru va trebui să completeze un formular cu datele personale.
3. Accesarea interfeței după înregistrare. După ce s-a înregistrat în sistem, utilizatorul va avea acces ușor la pariurile sale, la pariurile propuse de site (cel mai des accesate, cele mai mari șanse de câștig, cele mai amuzante, etc.) precum și la pagina în care își poate creea propriile sale pariuri.
4. Crearea unui pariu. Pentru a propune un eveniment pe care se poate paria, un utilizator va trebui să completeze  un formular standard și să-l introducă în sistem.
5. Parierea. Pentru a efectua un pariu, utilizatorul trebuie să selecteze pariul dorit și să completeze o serie de opțiuni specifice fiecărui pariu, precum și suma pe care dorește să o introducă în joc.
6. Ieșirea din sistem. Pe toate paginile afișate după pasul 2 de mai sus, utilizatorul va avea acces la o opțiune prin care își poate închide sesiunea curentă.

Ei bine, dupa tot acest timp de pribegie, bestia s-a întors! Dar deşi aduce o mulţime de lucruri noi în săculeţul de pe băţ, tot HTML rămâne. Nu există namespace-uri. Tag-urile nu trebuie închise. Browser-ele sunt extrem de „forgiving”.

Haideţi totuşi să nu fim pesimişti. Vechi prieteni precum div încă mai sunt de găsit, în schimb acum avem section, header, footer şi nav. img şi embed continuă să fie folosite, dar acum există video şi audio. De fapt, noile elemente nu sunt atât de diferite. Sunt doar multe lucruri de care poate ar fi avut nevoie un designer în ’99. Sunt oricum foarte uşor de însuşit (mai uşor decât AJAX sau CSS).

Veţi fi surprinşi poate să aflaţi că noile pagini sunt afişate în Netscape sau IE5. Bineînţeles, tag-urile noi nu sunt recunoscute, însă paginile apar pe ecran iar conţinutul este acolo în totalitate. HTML 5 a fost conceput pentru a se „degrada cu graţie” în browsere care nu îl suportă. Într-adevăr, render-ele de HTML au rămas blocate în ’99. Firefox spre exemplu ştie despre CSS, dar nu putem înainta fără să ţinem cont de baza instalată. Cu aceste lucruri în minte, să vedem ce aduce noul HTML.

La capitolul structură:

• section : un captol dintr-o carte, o secţiune dintr-un ziar, în principiu orice deţine un heading propriu
• header : nu e la fel cu head, semnifică foarte clar headerul unei pagini
• footer : evident, semnifică footerul unei pagini
• nav : o colecţie de link-uri către alte pagini
• article : o intrare independentă într-un ziar, o revistă, un blog (cum ar fi acest articol dacă s-ar folosi HTML 5) etc.

La capitolul semantică:

• aside : reprezintă o notă, un sidebar, o explicaţie între paranteze şi în general orice se află în afara firului narativ ca să spunem aşa
• figure : reprezintă o poză, un clip video, un clip audio la nivel de bloc, împreună cu captura asociată
• dialog : reprezintă o conversaţie între mai multe persoane; dt este supraîncărcat pentru a indica vorbitorul iar dd pentru a indica vorbele; sintaxa exactă încă este la nivel de dezbatere
• time : indică un moment specific din istorie
• meter : o valoare numerică într-un interval specificat

După cum bine ştiţi, toată lumea se uită la clipuri e net. Adobe foloseşte FlashPlayer, Microsoft foloseşte Windows Media, Apple foloseşte QuickTime. WhatWG a propus video într-o încercare de standardizare care permite încorporarea a mai multor formate video care să satisfacă toate cerinţele. În mod complementar, s-a propus şi audio, pentru a adăuga de exemplu muzică de fundal unei pagini.

În zona de interactivitate, s-au reîntors din HTML 2 menu şi command. In HTML 5, un element menu conţine mai multe elemente command, fiecare provocând o acţiune imediată.

În concluzie, putem afirma că HTML 5 face parte din viitorul web-ului. Noile elemente fac marcări simple şi clare care fac paginile mai evidente. Nu avem elemente redundante. Deşi nu toate browser-ele vor suporta noile facilităţi la început, la fel a fost şi în cazul majorităţii elementelor introduse după ce HTML a fost inventat: img, table, object. Suportul va veni în timp.

Opt ani de zile este o perioadă destul de mare de aşteptare pentru noile facilităţi, mai ales într-o lume cu o dinamică atât de avansată cum este World Wide Web. HTML 5 se simte ca în vremurile entuziaste de început, când Netscape şi Microsoft introduceau elemente noi în fiecare săptămână. Viitorul sună bine.