Alin Popescu a scris acum cateva ore: “Informatii despre Avocatnet.ro si despre lansarea de astazi (sper ca la ora 17.00 sa fie up and running noua versiune) gasiti intr-un studiu de caz publicat incepand de astazi pe www.internetics.ro.”
Studiul respectiv de caz este acesta. Bineinteles ca el contine informatii si screenshoturi cu noua versiune a site-ului, deci e clar de cine a fost scris.
Din cate stiu eu, Internetics este un concurs. Ce treaba au aceste studii de caz cu corectitudinea si neutralitatea unui concurs?
UPDATE: Pe WDB se poarta o discutie referitoare la asemanarea dintre noul site avocatnet.ro si site-ul cnn.com, discutie la care ia parte si Alin Popescu
2 comentarii
Internetul romanesc
Am dat peste un articol excelent despre designul formularelor pe web, probleme de accesibilitate si uzabilitate. O sa incerc sa fac un rezumat:
- Diferentierea vizuala (dimensiune, culoare) dintre butoanele ce reprezinta actiunile principale (save/submit/continue..) si cele secundare (go back/reset/cancel) ale unui formular reduce riscul unor greseli si conduce inconstient utilizatorul pe drumul bun
- Alinierea butoanelor finale (Submit/Cancel) in partea stanga a formularului, in rand cu inputurile de dinainte, ajuta utilizatorul sa inteleaga mai usor scopul butoanelor si sa il aleaga pe cel pe care vor sa apese, deoarece ochii sai vor avea o distanta mai mica de parcurs pe suprafata formularului
- Alinierea butoanelor in partea dreapta a fost cea mai nefericita varianta, candidatii necesitand cel mai mult timp pana cand sa proceseze scopul fiecaruia
- Ideala este crearea unei axe verticale puternice prin alinierea tuturor inputurilor in partea stanga, in rand cu butoanele.
In articol veti gasi explicatii amanuntite, precum si o analiza pe mai multe layouturi ale aceluiasi formular.
Cateva articole asemanatoare:
2 comentarii
Dezvoltare client-side
Programatori sau designeri, toti incep de la zero. Omul invata cateva chestii, face cateva prostii, trial & error, pana cand atinge o masa critica: momentul in care cineva chiar ar fi dispus sa dea bani pe ceva facut de el.
In acel moment are doua posibilitati: fie se angajeaza, fie merge pe cont propriu.
Daca in primul caz evolutia este oarecum mai simpla si mai “sigura”, cea de-a doua alegere vine cu multe complicatii, dar si cu satisfactii pe masura. Ca o mica paranteza, bine ar fi ca, daca mergi pe calea freelancing-ului, sa intri si in legalitate, preferabil ca PFA. Un articol excelent despre asta impreuna cu multe comentarii interesante gasiti la Filip.
Am punctat cateva dintre avantajele si dezavantajele celor doua alternative. Daca aveti completari, sunt binevenite, chiar ma intereseaza parerea cat mai multor oameni :).
Ca freelancer
- Te trezesti cand vrei, ai mediul tau de lucru pe care il controlezi
- Poti ajunge la un venit mai mare decat ca angajat, dar fluxul nu este constant.
- Ai pe umeri responsabilitatea intregii tale afaceri, de la negocierea cu clientul pana la tinerea contabilitatii.
- Iti poti lua vacanta oricand si oricat de lunga, bineinteles cu conditia sa iti programezi dinainte deadline-urile cum trebuie.
- Sunt sanse mai mici sa te plictisesti, fiecare proiect fiind diferit.
Ca angajat
- Flux constant de bani. Mai mic sau mai mare, dar stii sigur ca pe 1 ai cu ce plati chiria.
- Mediu de lucru care poate fi placut (ai de la cine invata smecherii noi, ai cu cine sta de vorba intr-o pauza), dar poti avea si ghinionul sa nimeresti intr-un colectiv – sa-i zicem “neproductiv”.
- Ai doar 20 de zile pe an libere
- Poti ajunge sa faci aceleasi taskuri repetitive, fara sa ai de ales
- Stii sigur ca intre 9 dimineata si 5 seara esti la lucru, iar restul timpului il ai doar pentru tine (si familie, prieteni, etc)
Intrebarea de baraj este: ce se intampla in Romania? Cum e mai avantajos sa activezi in momentul asta: singur sau angajat? Ai sansa sa te afirmi de unul singur? Ne ajuta cu ceva aderarea la UE (in afara de faptul ca e mai usor acum sa ne luam lumea in cap si sa muncim intr-o alta tara, mai civilizata)? Oare cati freelanceri web exista in acest moment in .ro?
22 comentarii
Freelancing, Internetul romanesc
Introducere
Aplicatiile web se bazeaza din ce in ce mai mult pe javascript pentru transferul de informatii intre serverul web si browserul vizitatorului. Aceste informatii pot fi trimise fie plain-text, fie serializate intr-un obiect JSON, fie intr-o structura XML. Pentru ca datele trimise de server sa poata fi utilizate in cadrul javascript-ului, ele trebuie extrase cumva din string-ul responseText. Aceasta operatie de extragere a informatiilor dintr-un text care respecta o anumita sintaxa (bine definita) se cheama parsare.
Cum ii spune si numele, JSON este o notatie, o sintaxa care descrie felul in care sunt incapsulate obiecte (array-uri, stringuri, numere, etc) intr-un anumit format, dupa reguli bine stabilite.
XML-ul nu este un format nativ javascript, sintaxa lui nu are sens intr-un cod sursa .js, de aceea este nevoie de un set de functii in plus pentru extragerea datelor venite in acest format, ceea ce mareste timpul de procesare.
Sintaxa JSON insa, este perfect compatibila cu javascript. Stringul primit de la server nu trebuie decat evaluat (cu functia eval()) si este automat transformat in variabila. Nu este necesara folosirea niciunei librarii externe. Functia eval() executa stringul dat ca parametru ca si cum ar fi cod javascript.
Un exemplu de string cu sintaxa JSON:
{
"numeMagazin" : "SC Gigel impex SRL",
"produse" : [
{ "nume" : "Tricou", "cantitate" : 2, "pret" : 120 },
{ "nume" : "Telefon", "cantitate" : 6, "pret" : 500 },
{ "nume" : "Creion", "cantitate" : 10, "pret" : 20 }
],
"adresa" : "Strada Primaverii nr. 3"
}
O structura echivalenta in XML ar fi:
<?xml version='1.0' encoding='UTF-8'?>
<numeMagazin>SC Gigel impex SRL</numeMagazin>
<produse>
<produs>
<nume>Tricou</nume>
<cantitate>2</cantitate>
<pret>120</pret>
</produs>
<produs>
<nume>Telefon</nume>
<cantitate>6</cantitate>
<pret>500</pret>
</produs>
<produs>
<nume>Creion</nume>
<cantitate>10</cantitate>
<pret>20</pret>
</produs>
</produse>
<adresa>Strada Primaverii nr. 3</adresa>
</xml>
Utilizare
Dinspre PHP, un string valid JSON se poate genera manual, dar cel mai usor este sa folosim o clasa care stie sa transforme orice variabila PHP (simpla, array, etc) direct in sintaxa JSON, gata sa fie trimisa browserului. Incepand cu versiunea 5.2.0, PHP vine cu o extensie care se ocupa atat de codarea cat si de decodarea obiectelor JSON. Pentru versiunile mai vechi de PHP se poate folosi o clasa din multele disponibile.
Exemplu de utilizare din PHP, folosind functia json_encode(), disponibila in PHP 5.2.0:
$array = array(
"persoana" => array (
"nume" => "Andrei",
"varsta" => 20,
"email" => "andrei@idevelop.ro"
)
);
echo json_encode($array);
{"persoana":{"nume":"Andrei","varsta":20,"email":"andrei@idevelop.ro"}}
In javascript, dupa cum am spus, ne ajuta foarte mult suportul nativ. Deoarece acel string este, in esenta, o instructiune javascript, el nu trebuie decat evaluat si devine automat o variabila.
var rezultat = eval('(' + ajax.responseText + ')');
// in acest moment, "rezultat" este un obiect javascript
alert(rezultat.persoana.nume); // va afisa "Andrei"
Obiectul astfel obtinut poate fi parcurs exact ca orice array, elementele sale putand fi la randul lor array-uri, etc. Pentru primul exemplu, cel cu magazinul, afisarea tuturor produselor se poate face in felul urmator:
var magazin = eval('(' + ajax.responseText + ')');
for (var k=0; k<magazin.produse.length; k++) {
alert(magazin.produse[k].nume);
}
Pentru a vedea pe viu ce si cum se intampla, am creat o pagina demonstrativa:
Exemplu de utilizare JSON: un exemplu de prelucrare a unui string JSON
JSON versus XML
Cum am vazut, atat JSON cat si XML nu sunt decat sintaxe in care sunt invelite, intr-un mod structurat, informatiile. De ce am folosi unul si nu celalalt? Ca de obicei, parerile sunt impartite si exista avantaje si dezavantaje in ambele cazuri.
Avantajele JSON
- Parsarea unui obiect JSON in javascript este mult mai rapida decat parsarea acelorasi informatii impachetate intr-o structura XML, datorita suportului nativ.
- Parcurgerea informatiilor obtinute este de asemenea mult mai usoara decat folosind functii XML gen
childNodes() sau nextChild().
- Datorita sintaxei simple, dimensiunea unui raspuns AJAX in forma JSON va fi mult mai mica in comparatie cu un XML stufos, cum puteti vedea si in exemplul de mai sus.
Avantajele XML
- Este mult mai raspandit, exista multe implementari de parsere si generatoare pentru majoritatea limbajelor de programare existente
- XPath, XSLT
Securitate
Atata timp cat sunteti siguri ca serverul care trimite datele in format JSON este de incredere, totul este ok (desi, teoretic, este posibil ca pachetele sa fie interceptate intr-un punct intermediar si inlocuite cu altele, deoarece informatiile sunt trimise plain-text, fara criptare).
Daca insa trebuie sa parsati cod venit de la un alt site (cum trimite, de exemplu, jobber pentru widgetul sau) asupra caruia nu aveti control, pot aparea probleme de securitate. Daca cineva compromite serverul jobber si introduce in codul javascript trimis spre widget instructiuni malitioase, acestea vor fi executate de catre functia eval() in browserul vizitatorului. In acest caz, pentru intarirea securitatii, este bine sa folosim un JSON Parser, o functie care parseaza doar codul JSON din textul primit, ignorand instructiunile javascript.
O alta problema de securitate este javascript hijacking, dar mai multe despre asta intr-un articol viitor :).
Linkuri utile
14 comentarii
Dezvoltare client-side, Programare web
Articol tradus si adaptat. Originalul se gaseste pe Freelance Switch.
Ca freelancer, deseori se intampla sa faci mai multe lucruri in acelasi timp. Fie ca lucrezi la proiecte diferite sau ca discuti cu mai multi clienti la telefon, a avea mai multe angajamente este un lucru normal pentru freelanceri. Eu de obicei am cel putin doua proiecte in paralel, fara sa iau in calcul micile chestii pe care le fac pro-bono pentru prieteni in timpul liber. Cand mai pun in balanta si emailurile care asteapta raspuns sau telefoanele care trebuiesc date, deja lucrurile se complica.
Nu ma plang, sunt alegerile mele. As putea la fel de bine sa lucrez la un singur proiect, dar unde ar mai fi provocarea? Important este sa stii cum sa-ti gestionezi angajamentele. Cam acum un an, cand am inceput sa lucrez ca freelancer, obisnuiam sa lucrez pentru un singur client, full time. Asta insemna sa ma ocup intre 8 si 10 ore pe zi de acelasi lucru, deci nu prea mai ramanea loc de nimic altceva.
In ultimele cateva luni insa, situatia s-a schimbat. Ma implic in mai multe proiecte si fac mai multe chestii mici pe margine decat inainte. Asa ca a trebuit sa-mi stabilesc o strategie prin care sa-mi gestionez problemele intr-un mod eficient si sa evit epuizarea psihica.
Cate unul, pe rand
Asta ar putea suna contradictoriu cu ce am zis mai sus, dar e vorba de ceva putin diferit. Lucreaza la un singur proiect pentru o anume perioada de timp.
Nu conteaza cat timp, important este sa ai o perioada bine stabilita in care sa te concentrezi doar pe acel proiect, fara distragere din exterior.
Schimbarea contextului e destul de dificila. Uitarea informatiilor si problemelor proiectului curent pentru a putea sa te apuci de altul de obicei dureaza ceva. Cel mai greu lucru este sa-ti convingi creierul sa se concentreze pe o noua gramada de informatii ca sa poti sa reiei proiectul de unde l-ai lasat ultima oara. Mi-am dat seama cu timpul ca e inutil sa il fortezi sa faca asta imediat. Ia o scurta pauza si fa ceva complet diferit, ceva care sa-ti relaxeze creierul.
Din pacate, de multe ori nu ne putem separa complet de distractiile externe ale unui mediu de lucru obisnuit, cum ar fi emailurile sau telefoanele. Cu emailurile e mai usor, pentru ca nu necesita un raspuns imediat, asa ca le poti lasa sa se stranga si sa le raspunzi la toate dintr-un foc, atunci cand ai timp. Cu telefoanele insa e mai complicat.
O strategie ar fi sa stabilesti pe loc o data fixa pentru angajamentul care rezulta din acel telefon. Se intampla ca, uneori, clientul sa vrea ceva rezolvat urgent, dar de cele mai multe ori angajamentul poate fi amanat o zi sau doua. Asta presupune sa fii indeajus de organizat incat sa stii pe loc cand vei avea timpul liber necesar sa te ocupi de acel angajament.
O data ce ai rezolvat problema distractiilor, e cazul sa te intorci la lucru. Pentru a intra din nou in fluxul proiectului, trebuie sa te pregatesti. Inchide tot ce tine de proiectul anterior si aduna la un loc toate informatiile de care ai nevoie pentru cel nou. Daca e nevoie, citeste din nou specificatiile proiectului sau uita-te pe lista de bug-uri. Fa o lista cu lucrurile care trebuie rezolvate in continuare. In felul asta te concentrezi pe ce trebuie facut si ai toate informatiile necesare pentru actiunile urmatoare.
Nu lasa lucrurile in coada de peste
Stabileste-ti milestones pentru timpul pe care te-ai gandit sa-l aloci. Milestones-urile pot fi chiar si simple “Implementeaza sistemul de mesagerie intre useri”, “Termina designul la pagina principala”. Asigura-te ca nu sunt nerealiste si ca pot fi facute in timpul disponibil.
Nu le vei termina mereu pe toate, dar te vor ajuta sa stii mereu in ce punct te afli cu proiectul atunci cand se termina timpul alocat. Poti atunci sa il lasi deoparte pana cand ii vine randul din nou, fara sa te intrebi ce lucruri au ramas neterminate. Daca nu poti termina toate milestones-urile din diverse motive, nu e un dezastru, dar asigura-te ca nu lasi lucrurile in coada de peste. De exemplu, o bucata de cod lasata partial neterminata ii poate impiedica pe altii sa lucreze la acel proiect intr-un mod eficient sau chiar poate face aplicatia neutilizabila.
De asemenea, daca esti ordonat, nici tu nu va trebui sa-ti faci griji de asemenea bucati de cod neterminate atunci cand revii la proiect, ci te poti apuca de urmatorul punct de pe lista imediat.
Termina-le
Un proiect trebuie sa se termine candva, si e foarte important sa stii cand poti spune “gata, treaba mea s-a terminat“.
Unele proiecte se pot intinde pe perioade mari de timp. Atata timp cat exista ceva de facut la ele, e relativ ok. Dar cand aceasta intarziere se datoreaza clientului care trage de timp din diverse motive (se tot razgandeste, raspunsurile intarzie), lucrurile nu mai stau asa bine. Proiectul incepe sa para o povara de care vrei sa scapi si nu prea ai cum. In asemenea situatii ar fi bine sa intervina un contract clar, semnat de ambele parti, care sa reglementeze problema.
Concluzii
Terminarea unui proiect aduce multa satisfactie, atat pentru tine cat si pentru client. Pe langa faptul ca vei fi platit, poti trece acum la alte proiecte, fie ele noi sau vechi.
Pasii schitati aici pot parea usor de aplicat, dar mie mi-a luat ceva vreme sa ma obisnuiesc sa lucrez asa. Sper ca aceste indicatii sa va ajute la organizarea timpului, pentru a putea termina proiectele cat mai repede si eficient.
2 comentarii
Freelancing
Urmaresc de ceva vreme acest editor, si am sperante mari pentru el. Seamana foarte mult cu TextMate (disponibil doar pe OSX), iar cei care folosesc acest editor stiu sa-l aprecieze :). Nu e un monstru de aplicatie ce se incarca in 10 secunde si ocupa 50mb in RAM, nu are 100 de feature-uri complexe, dar cele pe care le are iti usureaza munca fantastic.
Ce imi place la el:
- Se incarca foarte repede
- Multi-Selections, rectangular selections
- Snippets
- Multi-Insert
- Find and Replace cu suport RegEx
Multe din aceste feature-uri le puteti vedea in actiune fie pe site-ul lor, fie in screencasturile TextMate.
E-TextEditor este un alt editor foarte asemanator dar care se bazeaza pe Cygwin (deci se incarca greu) si care este pe bani.
Pana acum foloseam Notepad++, dar daca totul merge ok in cele cateva zile de testing, voi trece pe Intype.
17 comentarii
General, Programare web
Ieri mi-am facut cateva ore libere si am adaptat o idee mai veche de-a mea, rezultand Harta Jobber.
Dezvoltarea a fost destul de simpla: codul de baza pentru afisarea unei harti Google in pagina, orasele extrase direct in fisierul js (fara AJAX), putin CSS pentru afisarea bulinelor, iar in final integrarea lor cu search-ul deja existent in site. Mai mult a durat strangerea tuturor coordonatelor pentru orasele disponibile :).
Codul javascript e scris acum ceva vreme, sunt cateva chestii pe acolo de care nu sunt tocmai mandru, dar functioneaza. Inca e in perioada de teste, daca gasiti bug-uri let me know.
6 comentarii
Dezvoltare client-side, Programare web, Work
Salut!
Sunt Andrei Gheorghe, programator web freelancer, iar acesta este blogul meu. Ma ocup in principal cu PHP & MySQL, JavaScript si XHTML & CSS.
De obicei ma gasiti pe forumul WDB (acesta este profilul meu acolo), unde moderez sectiunile de client-side development (css, js). Daca aveti ceva urgent sa-mi spuneti, aveti datele mele de contact in dreapta.
Vreau sa multumesc celor care m-au ajutat la crearea identitatii blogului: logo-ul vine de la Graft (puteti vedea aici o mica parte din istoria lui), iar feedback pretios pentru layout am primit de la Ionut, Cristi, Filip Add, NTZ si Adi.
Thx guys :).
Asadar, bine ati venit!
15 comentarii
Freelancing, General
