http://goldioc.files.wordpress.com/2010/01/prezentare3final.ppt

Nu uitati sa vizitati http://goldtrivia.xhost.ro/

Echipa de asistenti numita : 

Îsi propune sa:
.                – ne tina la curent cu fazele proiectului
.                – ne dea feedbackuri
.                – ne dea sugestii
.                – ne dea un exemplu de cum ar trebui sa arate un blog
,,
,,

.                – fie un punct de legatura între echipe

Nu isi propune sa :
.        – intre in cele mai mici detalii ale fazelor
.         – comenteze fiecare linie pe care o scriem
.         – ne îngradeasca imaginatia dându-ne mura în gura
.         – fie ceva extravagant, ci doar un punct de ” faceti mai bine de atât “
.         – fie un chat

Luând în consideratie scopul blogului modest,
al echipei de asistenti,
putem încerca sa facem o analiza mai amanuntita :

Partile bune :

.   -are o interfata destul de airisita si modesta, ceea ce-i da încredere studentului ca poate face mai bine de atât
.    -are linkuri catre sfaturi pentru design si câteva bookmarkuri utile
.     -sunt folosite comentarile, mai ales in categoria “Echipe”
.    -exista un articol în care se spune ca … suntem lenesi

Parti slabe :
.           -nu prea e tinut la curent… ultimul post acum o luna jumate
.           -nu e foarte informativ, din acelasi motiv
.          -numai culoarea albastra îl face sa para foarte rece… ar trebui sa fie mai colorat


Anyway, acum e vacanta, afara ninge si e frig, asa ca tin laptopul in brate sa ma incalzesc. Si cum e prea tarziu pentru teme la compilatoare sau alte cursuri mult-iubite, am decis ca e timpul sa fac un mic rezumat al ultimelor activitati legate de dezvoltarea site-ului nostru.

Avem un chat perfect functional, care nu mai da rateuri si in care am lasat foarte putine buguri. Avem si conturi, bancuri, reguli si vreo 2 lingouri de aur.

Apropos de chat, am dat astazi peste o chestie relativ interesanta. Am adaugat o noua intrare in SLDCCMPIESNPF (Scurta Lista De Chestii Care Merg Pe Internet Explorer Si Nu Pe Firefox). Despre ce e vorba… Noi avem un DIV care se numeste “chat” si pe care il umplem cu tot felul de chestii pe care la zic oamenii. Initial acest DIV avea la un moment dat doar un numar fix de linii de chat, dar ne-am gandit mai bine si am zis ca ii punem un scroll si il mai marim putin. Poate unii oameni vor sa vada ce s-a discutat cu ceva vreme inainte.
Anyway, asta a fost destul de simplu: overflow-y:scroll a facut treaba aproape perfect.
Am observat insa ca DIV-ul nostru se comporta cum e normal si nu cum am vrea noi. Adica el afiseaza continutul incepand cu prima linie. Pentru a vedea restul trebuie dat scroll in jos. Noi vrem sa afiseze ceea ce e la coada, si sa dam scroll in sus ca sa vedem restul.
Si asta a fost destul de simplu: function myscroll (div){div.scrollTop = div.scrollHeight;}. Acum chat-ul se comporta frumos si vedem ultimele linii asa cum trebuie. Si tinand cont ca am facut smecheria de mai sus de fiecare data cand se updateaza chat-ul, se va face scroll automat la noile intrari.
Toate bune si frumoase, dar nu poate sa mearga asa, din prima… Problema care a aparut a fost urmatoarea: daca se apeleaza myscroll cand noi citim liniile de chat de pe la inceput, chat-ul scroll-eaza automat la final si ne strica socotelile.
Am incercat vreo doua variante de rezolvare (care au esuat teribil) si pana la urma am gasit solutia ideala: onfocus. Daca focus-ul se afla pe DIV-ul nostru, atunci nu mai facem scroll, pentru ca vrem sa citim. Asa ca am pus un boolean care sa zica daca se face autoscroll sau nu, iar div-ul nostru a ajuns ceva de genul:
<div id=”chat” onfocus=”autoscroll=’false’;” onblur=”autoscroll=’true’;”>
Evident ca am testat aceasta metoda si ca Firefox-ul ca incapatanat ce e a refuzat sa genereze evenimente onfocus si onblur. Dupa vreo 15 minute de cautat informatii despre aceasta problema am reusit sa gasesc explicatia: evenimentele onfocus si onblur sunt suportate doar de:
The following elements support the onfocus attribute: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA.
Poate a fost o chestie de subconstient, poate intuitie, poate interventie divina, dar, in orice caz, un miracol s-a intamplat: am testat si pe IE. Stupoare! Merge perfect. Probabil ca asta mi-a dat forta sa merg mai departe si sa caut o solutie pentru FF timp de inca 45 de minute. Doar nu era sa il las pe archnemesis sa iasa castigator.
O sa sar peste partile plictisitoare (YOU MEAN THIS WAS WHAT YOU CALL EXCITING?) si o sa trec direct la solutie: tabindex. Adaugi tabindex la un element si in mod magic el va genera evenimente onfocus.
<div id=”chat” tabindex=”0″ onfocus=”autoscroll=’false’;” onblur=”autoscroll=’true’;”>

And now for the funny part:
The following elements support the tabindex attribute: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA.
Deci am rezolvat faptul ca onfocus nu e suportat de DIV printr-un alt atribut care nu e suportat de DIV. So much for standards compliant browser.

WordPress zice ca am asuns la 650 de cuvinte, asa ca o sa pun punct aici: .

EDIT: i broke wordpress. Fixing now.

Momentan noi lucram la backbone-ul site-ului, urmand sa tot adaugam chestii in jurul lui. Backbone-ul inseamna un fel de camera de chat, cu ajutorul careia concurentii, userii, vor trimite raspunsurile corecte la intrebarea propusa.
Dupa cum am mai mentionat de cateva ori, principala tehnologie folosita de noi este AJAX. Astfel, avem un front-end (index.html momentan) care are o dubla functie. Ea preia textul introdus de user si ii afiseaza acestuia tot felul de informatii de la server. Tot ce se primeste de la server este real time si nu necesita nici o actiune a userului.

Serverul comunica cu baza de date, in care se gasesc ultimele X intrari de chat de la toti userii.( X e o necunoscuta care va fi determinata dintr-o formula complicata. Formula complicata va fi si ea determinata prin metode euristice. Dupa ce invatam cum.) Tot in baza de date se mai gasesc si intrebarile, impreuna cu raspunsurile corecte, fun facts, etc.

Practic din toate aceste lucruri, am facut pana acum 50% din partea de front-end (doar functionalitate) si cate ceva din baza de date. Avem si o pagina interesanta prin care se introducem intrebari in baza de date.

Echipa laboratorului IOC ne-a propus stabilirea unui target pe care sa incercam sa il atingem sau chiar sa il depasim legat de site-ul nostru. Practic, trebuie sa alegem cateva cuvinte cheie legate de domeniul nostru si cautarea acestora pe google sa ne scoata in primele cateva rezultate.

Cuvintele cheie decise de comun acord sunt “trivia joc interactiv”. O cautare a acestora in acest moment releva aproximativ 3.130 pentru trivia joc interactiv. (0,06 secunde). Inca nu am fost indexati de Google, asa ca site-ul nostru nu apare printre acestea.
Targetul nostru e sa ajungem in primele 2% rezultate. Deci undeva in primele 60 de rezultate.

Cam atat momentan, e timpul sa trecem la treaba!

Din pricina unui nefericit incident cu tema la Compilatoare, eu am intarziat la o buna parte din intalnire. Oricum, am trecut rapid prin transcript-ul celor discutate, asa ca nu s-a pierdut nimic.

Participantii la conversatie au fost Andrei Webbie, Sergiu Qwerty, Catalin PoW si Mircea WebSmith (aka Mircea UglyCreature). Si bineinteles, eu, Tibi Golden (aka Tibi cel de aur[(cred ca m-as putea lansa si in manele cu un astfel de nick]). Fiecare din noi a prezentat cate o tehnologie folosita in designul web, cu bune si cu rele si pe urma ne-am dat cu totii cu parerea despre ele.

Javascript

Primul la podium a fost Andrei cu Javascriptul sau.  Nu sunt foarte multe de zis despre Javascript pe care sa nu le stiti. E un limbaj client side al carui principal avantaj il reprezinta de regula stransa legatura cu arborele DOM al paginii. Prin intermediul Javascriptului se poate modifica usor continutul paginii fara a fi nevoie de indicatii de la server.

Per total am convenit ca singurul punct slab al Javascriptului este posibilitatea ca userii sa aiba dezactivat suportul in browserul lor favorit. Astfel degeaba avem noi pagini cu meniuri care mai de care mai dinamice, cu omuleti care fug de mouse pe ecran, etc, daca userul satul pana peste cap de lucrurile neplacute care se pot face cu javascript le-a interzis accesul.

Trebuie tot timpul ca pagina noastra care arata atat de bine cu Javascript sa degradeze in mod elegant in cazul in care acesta ii lipseste.

PHP

Urmatorul in bataia pustii a fost Catalin. El a vorbit despre PHP, cel mai raspandit limbaj server-side de data aceasta. Sunt sigur ca toti am auzit despre aceasta minunatie care a revolutionat web-ul, trecand de la pagini statice trimise asa cum sunt catre useri, la paginile care se modifica in functie de cine sau cum le acceseaza.

Jocurile browser based si magazinele online sunt doua exemple ce nu ar putea exista fara PHP.

Principalele atuuri ale PHP-ului sunt usurinta de utilizare, multitudinea de componente ajutatoare si cautarile google. Am ajuns impreuna la concluzia ca e aproape imposibil sa ai o problema cu PHP-ul pe care sa nu o poti rezolva cu ajutorul maretului engine de cautare.

Per total, PHP este o creatie divina (stiati ca PHP 5 este orientat pe obiect?) si daca am putea programa cu totii in PHP pentru restul zilelor noastre, lumea ar fi un loc mai bun.

AJAX

Yours truly a prezentat apoi cate ceva despre componenta de baza a site-ului www.goldtrivia.xhost.ro, si anume AJAX. Am pus accentul pe interactivitatea cu utilizatorul pe care o ofera AJAX-ul si toata lumea a fost de acord cu mine ca se impune folosirea lui pentru intentiile noastre de chat-o-joc.

Un dezavantaj al AJAX este dat de a doua litera a sa. El se bazeaza pe Javascript, asa ca mosteneste problema dezactivarii din browser.

JavaFX

Parca printr-un facut, Mircea a venit sa prezinte dupa mine JavaFX, chestie despre care trebuie sa recunosc cu rusine ca nu auzisem nimic. JavaFX pare sa fie o minunatie, un Java (deci usor de programat, cu multe componente care fac cine stie ce vrei) cu ajutorul carora se pot dezvolta RIA.

Rich Internet Applications sunt practic web-ul de maine. Sau poate chiar de azi. Desi nu au o amploare suficient de mare pe cat le e potentialul inca, RIA au adus programele desktop in interiorul browserelor lasand mult in urma limitarile HTML-ului.

Singurul dezavantaj care se poate zari la JavaFX este viteza sa. Fiind totusi un copil al Java-ului, asta e de inteles. Un test practic realizat chiar in cadrul discutiei de catre mine m-a adus la concluzia ca lucrurile nu sunt chiar asa negre. O fi JavaFX lent, dar chestiile pe care le poate face compenseaza din plin aceasta si il transforma intr-un excelent tool pentru dezvoltarea de aplicatii bogate.

CMS

Ultimul care sa ia cuvantul a fost Sergiu, care ne-a vorbit un pic despre Content Management Systems precum Drupal sau chiar WordPress. Speriat fiind inainte de discutie de acest cuvant complicat, eu eram convis ca de multe ori, cand ai de facut o aplicatie mai mica, mai simpla, care nu beneficiaza de toate posibilitatile framework-ului, e mai bine sa o faci tu de la 0. Macar stii ce ai facut acolo si daca vrei sa modifici ceva, ramane la latitudinea ta.

Sergiu a tinut sa ma contrazica; din experienta lui, framework-urile sunt usor de folosit, foarte customizabile si de multe ori ai acces chiar la codul sursa pentru a-l modifica cum doresti. Acesta este exemplul WordPress-ului, CMS pe care il vor folosi 3 dintre cele 5 echipe participante la discutie.

Si o concluzie…

Mai in gluma, mai in serios, discutia a fost una fructuoasa, dupa care fiecare a plecat la echipa proprie ca sa propuna mici modificari de genul “aia fac asa si pe dincolo, hai sa nu ne lasam mai prejos”, chestie care nu poate decat sa creasca competitia si in final calitatea produselor noastre.

Urmatoarea discutie, la o bere, baieti!

In primul rand o bila alba pentru feedback-ul din cadrul laboratorului, unde atat asistentul cat si colegii au incercat sa le dea idei noi echipelor dupa ce au vazut in ce directie se indreptau. In special s-a remarcat aici Tibi Turbureanu. Cum vor fi integrate aceste idei in site, ramane de vazut. Pe moment au fost atat atitudini foarte deschise (vreti sa punem si asta?, punem punem!) cat si atitudini foarte defensive, inchise.

Un mic sfat pentru dragii nostri competitori: nu va inhamati la ce nu puteti duce! In general proiectele au fost in limite rezonabile si nu am am vazut site-uri foarte ambitioase. Zic in general, pentru ca o anume echipa si-a propus un tel foarte inalt si sincer daca echipa noastra ar fi in locul lor, nu cred ca am termina site-ul in timpul alocat.

O sa iau fiecare proiect si o sa incerc sa explic in cateva cuvinte ce anume vor sa faca.

Catalistii

Ei doresc sa faca o combinatie inovatoare de site de stiri si wikipedia, strecurand cumva si un Yahoo Answers printre toate astea. Mi se pare o idee foarte buna, in special din punctul de vedere al lucrului colaborativ, utilizatorii fiind indemnati si ei sa contribuie la site.

Cred insa ca primele probleme pe care le vor intampina catalistii vor fi legate de atragerea unui numar suficient de utilizatori implicati care sa ii ajute cu continutul site-ului. Va fi deosebit de dificil si de solicitant ca 4 oameni sa posteze stiri, sa raspunda la tot felul de cereri care de care mai ciudate, etc intr-un mod profesionist si nu doar compiland informatiile adunate din primele 3 link-uri de la un google search.

Unul din proiectele cele mai ambitioase, dar in care eu am incredere ca va reusi cel putin partial. In orice caz, dupa ce se trece de un anumit prag in numarul de utilizatori, lucrurile vor merge de la sine, dupa modelul Wikipedia.

Awesome

Echipa Awesome are cea mai apropiata tema de a noastra si sper ca acest lucru va da nastere la o rivalitate fructuoasa intre noi. Mult succes!

Awesome Quest este un joc similar cu Trivia, in care utilizatorul va raspunde la o serie de intrebari si va primi puncte in functie de cat de bine a facut. Twist-ul e reprezentat de categoriile de intrebari prezente in concurs: ele se vor asa mai mult pe divertisment decat pe partea de cultura generala. Exemplul lor din prezentare era urmatorul:

Dupa ce distribuie subiectele, unde isi petrece domnul Cupcea timpul?

- intr-un club de fitze

- in sala de vis a vis

- in biroul sau

- la automatul de cafea

Proiectul este unul inedit, care va face cu siguranta furori printre studentii de la calculatoare. Dar oare nu va propuneti un target prea limitat? Stiu ca ati mentionat ceva de faptul ca utilizatorul va alege categoria din care va primi intrebari, precum si de faptul ca va doriti ca de fiecare data utilizatorul sa aiba o experienta noua, intrebari noi. Cred ca va fi destul de dificil sa introduceti intrebari peste intrebari din fiecare categorie pentru a multumi toti utilizatorii. Sper sa nu imi interpretati feedback-ul intr-un mod gresit, pur si simplu va zic ce mi-a trecut prin minte (organul ala cret) legat de ideea voastra.

Per total proiectul mi se pare destul de bine gandit, iar prezentarea a fost cea mai buna din punctul meu de vedere. Un pic mai putin fun, dar fara a renunta cu totul la glume, si totul ar fi fost perfect.

CursuriValutare

Ei ne propun un site legat de economie si in special de … cursul valutar. Site-ul ar trebui sa contina cotatiile leului de la diverse banci precum si articole legate de economie si de directia in care se indreapta aceasta.

Singura preocupare pe care as avea-o legata de site este cea pe care s-a pus accent si in laborator: ce i-ar face pe utilizatori sa aleaga site-ul vostru, in detrimentul unuia mai “oficial”, precum www.bnr.ro ,  sau alte site-uri ale bancilor. De asemenea, pe tot felul de portaluri am gasit mici sectiuni dedicate cursului valutar, ex: www.kappa.ro . Ganditi-va ce anume va face pe voi sa va diferentiati de restul, poate mai e nevoie sa adaugati ceva la site, nu stiu. Din neferice, sunt null in acest domeniu, asa ca nu pot sa va dau sugestii. I just feel it’s missing something.

Mali Dali

De departe cel mai ambitios proiect de ieri, youtube-ul pentru fotbal propus de “dacii cei rai” va atrage cel mai mult feedback critic din partea mea.

Complexitate. O combinatie de youtube, forum, crawler, site de stiri si altele nu e chiar asa usor de realizat, in special in timpul pus la dispozitie de programa cursului de IOC. Nu zic ca e imposibil, zic doar ca eu unul as mai si dormi in semestrul intai.

Prezentare. Prezentarea de azi a fost un pic mai dezorganizata fata de celelalte, iar stilul de exprimare ar mai trebui imbunatatit putin pentru o ocazie formala gen… sustinerea lucrari de diploma.

Utilizatorul tinta. Aici totul a fost ok. Tinta voastra este un grup suficient de mare si cunoasteti indeaproape cerintele utilizatorilor pentru a le putea satsiface cat mai bine nevoile. Un mare plus la aceasta categorie.

Detalii. Am vazut o schema pe blog-ul vostru in care apar elementele importante din site. O parte din aceste elemente inca nu sunt complete, “…” fiind suficient de sugestive pe desen. Cred ca ar fi bine sa petreceti ceva timp inainte sa va apucati efectiv de implementare in care sa puneti la punct aceste mici detalii care pot da totul peste cap. Spun asta, pentru ca si noi ne confruntam cu aceeasi problema si incercam sa o rezolvam.

Cam atat cu feedback-ul, sper ca fiecare din echipele prezentate sa citeasca macar sectiunea dedicata lor si sa-mi dovedeasca prin produsul final ca nu am avut dreptate cu criticile si ca ideea lor e una de succes.

Sper de asemenea ca macar o parte dintre voi sa ne oferiti si noua un feedback, printr-un post pe blogul vostru, sau prin comentarii la acest post. Fiti cat se poate de critici si ajutati-ne sa ne imbunatatim jocul.

PS: Nu am uitat ca trebuie sa prezint un pic site-ul pe blog. Voi reveni un urmatoarele zile pentru a face si acest lucru.

Voi pune aici slide-urile, urmand sa le comentez dupa ce se termina laboratorul.

Click!

Nu am inceput inca sa lucram la site-ul pe care veti juca GoldTrivia, insa ne-am gandit cam cum ar trebui sa arate; asa ca am facut un prototip ca sa va aratam si voua.

http://goldioc.wordpress.com/?attachment_id=40

Cam asa va arata pagina principala, aceea in care veti petrece cel mai mult timp. Vor mai exista pagini de LogIn si CreareCont, insa vor avea un aspect clasic.

Incepand cu celebrul “box model” si trecand prin chestii care mai de care mai obscure precum listele neordonate, producatorii de browsere nu au putut sa se puna de acord sa urmeze cu totii acelasi standard. Fiecare a strecurat propria personalitate in interpretarea specificatiilor si singura chestie care a rezultat din asta a fost frustrarea designerilor si uneori chiar a end-userilor.

HTML5 promite sa aduca imbunatari in acest sens prin realizarea de specificatii mai stricte, care sa nu permita abuzuri din partea Microsoft, Mozilla, etc. In acest sens, sunt specificate pana si modalitatile in care codul incorect scris de designeri ar trebui interpretat.

Daca HTML5 va fi raspunsul tuturor rugaciunilor noastre, asta ramane de vazut. Sperantele sunt mari tinand cont ca din August 2009, Microsoft a inceput sa se implice in schitarea HTML5, punand punct unei lungi perioade de tacere in legatura cu produsul lor, Internet Explorer.

Exista cateva taguri noi in HTML5 care ajuta la dezvoltarea RIA (Rich Internet Applications) fara a fi necesare produse 3rd party:

• video
• audio
• canvas
• progress

Pe langa acestea, HTML5 a mai integrat si o serie de API-uri care sa permita o mai mare flexibilitate dezvoltatorilor:

• API de desenare 2D (canvas)
• API pentru media video si audio
• API pentru aplicatii offline
• API de inregistrare pentru anumite protocoale sau tipuri media
• API pentru editare (atributul contenteditable)
• API drag&drop
• API pentru browsing history
• API pentru mesaje intre documente

Cu aceste unelte, HTML5 incearca sa se separe de cateva nume care au devenit oarecum sinonime cu fisierele media.

O alta extindere adusa de HTML5 este integrarea limbajelor MathML si SVG. Un exmplu este urmatorul:

<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<title>MathML test</title>
</head>
<body>
<math>
<mrow>
<mi>y</mi>
<mo>=</mo>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
</mrow>
</math>
</body>
</html>

Iar colegul InNomine zice ca Firefox 5 ar randa ok treaba asta, daca ii setam html5.enable ca true .

Cam atat momentan. Revin maine cu inca un articol legat de noutatile HTML 5, precum si o concluzie legata de acest subiect.