PHP şi alte asemenea

Deoarece vorbim despre un site de pariuri, este normal ca interfaţa să asigure facilităţi orientate utilizator precum  : posibilitatea utilizatorului de a vedea istoria pariurilor jucate până acum, de a vedea ce pariuri a propus (să nu uităm de pariurile speciale ce se pot face pe acest site!) şi ce mize au fost jucate pe respectivele pariuri. De asemenea, pentru simplitate, userul trebuie să aibă opţiunea de a pune în cont o sumă dorită şi de a paria folosind acei bani, decât să trimită bani pentru fiecare pariu.

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 )

Probleme

Doar ce ne-am apucat noi mai serios de codat la site si am si intalnit
cateva probleme. Sunt explicate destul de bine in prajitura de mai jos.
Eu am ales roz + albastru . Sunt curioasa ce culori aleg colegii mei ) .

Prezentare etapa 3

Etapa 3.

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

Gugăl e prietenul tău

Revin în forță în blogosfera interacţiunii om calculator cu un nou post în legătură cu vechiul nostru prieten Gugăl. Gugăl, după cum știți, e un tip foarte mişto. Simplu din fire, fără prea multe accesorii (spre deosebire de amicul lui, Iahú), inteligent și rapid, Gugăl e întotdeauna acolo când ai nevoie de el. Are o multitudine de relații și stie cam tot ce se mișcă pe internet. E întotdeauna disponibil să ajute un prieten și să-i dea ultimele ponturi. Problema este că Gugăl, fiind atât de ocupat să răspundă la toate întrebările oamenilor, nu prea are timp să și asculte sfaturi. El ia mai în serios o bârfă nouă sau un zvon doar dacă îl aude din destule locuri. Cum îl faceți pe Gugăl să asculte bârfele voastre? Citiți în continuare și veți afla un mic pont…

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!

Despre trafic, cuvinte cheie şi Goooooo..oogle

Poate cea mai buna parte din tot proiectul ăsta e ideea în sine, din care provine şi numele Bet Your Mom. Încă de la început ne-am gândit că, indiferent ce temă vom aborda pentru site, trebuie să aibă un identificator care prinde repede la public şi care aduce rezultate foarte bune la căutarea pe Google. De aici şi până la a face conexiunea cu mania pariurilor nu a fost cale lungă, însă rămânea nesoluţionată problema cuvintelor cheie. Aşa că ne-am apucat să căutăm tot felul de construcţii ciudate care întorceau rezultate foarte vagi în motorul de căutare, iar câştigătorul detaşat a fost bet your mom. În afară de un canal de Youtube cu clipuri de genul „bet your mom can’t do snowboarding”, Google-ul nu întoarce nimic concludent.

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!

Primul draft

Începând de săptămâna trecută am început să lucrăm efectiv la site şi drept urmare, un prim draft a prins formă. Chiar dacă în momentul de faţă multe din funcţionalităţile site-ului nu sunt implementate, nu vă sfiiţi să aruncaţi o privire.

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!

Peste gard : analiza unor proiecte similare

Atunci cand ai o viziune asupra unui proiect, e bine sa vezi ce s-a mai facut deja si eventual sa inveti din greselile altora. Ok, bun asta, dar momentan un site de pariuri despre orice inca nu e implementat pentru Romania. O bila alba pentru noi.

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:

Utilizatorii noștri, stăpânii pariurilor noaste

Acum vom vorbi puțin despre utilizatorii site-ului betyourmom.com. Dat fiind profilul și domeniul de activitate al site-ului (i.e. pariuri) și evenimenele pe care pot paria membrii comunității (i.e. orice), o prima însușire a acestora este ca toți au avut ocazia să-și serbeze minunata vârstă de 18 ani. Membrii comunității vor avea un simț al umorului ridicat, ceea ce îi va ajuta în propunerea de noi pariuri. Civilizați și cu mult spirit de fairplay, ei vor fi demni când vor câștiga, dar și când vor pierde. Acum că am terminat cu partea de marketing, să trecem la lucruri mai serioase.

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ă.

HTML 5 gol-goluţ

HTML-ul s-a cam oprit prin ‘99. Producătorii de browser-e s-au concentrat pe cititoare RSS sau facilităţile aduse de tab-uri. Lumea a început să înveţe  CSS, JavaScript şi AJAX ca să le integreze cu framework-urile deja existente. Doar HTML-ul a ramas pe loc în ultimii 8 ani de zile.

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.

De ce betyourmom.com ?

După un scurt brainstorming în echipă, am ajuns la concluzia că ceea ce îi trebuie internautului din ziua de astăzi este o metodă inedită de a-și petrece timpul. Cum ideea de site de jocuri a căzut destul de repede, ne-am gândit la ceva captivant și care să creeze puțină dependență astfel încât utilizatorii să revină din ce în ce mai des.  Nu a durat mult și ne-am trezit cu un norișor deasupra capului în care scria “site de pariuri”.

Cum ideea în sine nu e deloc nouă, ne trebuia ceva care să atragă interesul publicului (pe lângă publicitatea pe care o să o facem). Elementul de inedit este că pe site-ul nostru utilizatorii vor putea propune propriile lor pariuri și, în consecintă, vor putea paria pe orice. Asta înseamnă că pe lângă pariuri normale cum ar fi “Va câștiga Băsescu prezidențialele?” sau “Care va fi scorul derby-ului Steaua-Dinamo?” vor putea apărea și “Va mai avea Băsescu păr la sfărșitul mandatului 2 ?”, “Când va cădea bila de la ASE ?”,  “Va reuși Dan Negru să facă in 2010 o emisiune inteligentă la TV ?” (ok, recunosc, ultima nu e tocmai pariu – toată lumea știe răspunsul la întrebarea asta).

De aici și până la betyourmom.com au fost necesare doar niște sinapse bine plasate și o referință forțată la sindromul lui Oedip și numele domeniului a fost gata.

Vă așteptăm cu drag și vă urăm mult noroc la pariuri!