“Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.” – Antoine de Saint-Exupery
Folosesc Firefox si middle-click pentru deschiderea in taburi noi a linkurilor care ma intereseaza. Insa in ultima vreme ma lovesc din ce in ce mai des de o problema: eu pe care buton apas?
Sa va explic.
O data cu raspandirea “fenomenului AJAX“, tot mai multe site-uri folosesc javascript pentru afisarea unor informatii intr-un mod mai “prietenos”. Astfel, un link pe care scrie “Help”, din dreptul unui camp dintr-un formular, poate deschide o fereastra popup, poate afisa un fel de lightbox, poate deschide intr-un tab nou o pagina cu informatiile necesare, etc. Posibilitatile sunt multe.
Problema este ca acel buton este imprevizibil.
Vad butonul, cum procedez? Left click, sperand sa fie ceva javascript, dar riscand sa imi schimbe pagina (lucru pe care eu nu-l doresc, poate e un formular deja aproape completat), middle click “ca sa fiu sigur” dar apoi ma trezesc cu 10 taburi deschise, fiecare tab fiind gol deoarece acel link fusese “gandit” (mult spus) pentru javascript? E foarte neplacut sa se intample asta, iar mai grav este ca aceasta nesiguranta devine din ce in ce mai prezenta pe web.
Exemplu concret: forumul macuser.ro. Toate pozele atasate la un post au link de forma javascript:showimage('http://..', '640', '480');void(0);. Vrei sa deschizi toate pozele in taburi ca sa te uiti la ele pe rand? Sau poate un link direct catre una din ele? Tough luck… Ai cumva javascriptul dezactivat? Hah.
Avem nevoie de programare web “cu cap”, facuta de oameni care stiu cum stau lucrurile, si nu de amatori care cred ca daca folosesc din plin ultimele efecte script.aculo.us totul va fi ok. Nu e ok, site-urile trebuie sa fie accesibile, informatia trebuie sa se gaseasca in stare cat mai pura. De-aia avem XML, JSON, XHTML: pentru “curatarea” informatiei de toate artificiile grafice. Javascriptul ar trebui sa fie bonus, nu esential! Vorbim bineinteles de site-uri normale, nu de aplicatii full-javascript. Cum poti sa te numesti programator web, dar sa scrii un formular de cautare in care submitul se face doar prin javascript? Chiar nu iti dai seama ca i-ai terminat pe toti cei care intra de pe terminale non-standard? Sau e nevoie sa intri chiar tu intr-o zi de pe un telefon mobil, intr-un moment de urgenta, sa cauti ceva pe un site, si sa nu poti sa faci asta pentru ca respectivul programator nu a pus buton de submit. “Pentru ce? Nu poate sa dea enter?”. Nu.
Asadar, un site trebuie sa functioneze 100% chiar si cu javascript dezactivat. Iar atunci cand este activat, sa nu fie nevoie sa am grija unde dau click pentru a nu naviga de pe pagina curenta unde am informatii importante. Vreau sa am incredere ca acel click pe care il fac pe linkul din meniu nu imi va strica experienta navigarii pe site. Acest lucru se cheama “non obtrusive javascript”, iar directia spre care ar trebui sa tindem toti se cheama “accesibilitate”.
12 comentarii
Dezvoltare client-side, Programare web
Un prieten m-a rugat sa pun pe blog un anunt de angajare la firma F5 Solutions din Bucuresti, pe postul de front end developer. Here it goes:
F5 Solutions cauta un Front-End Web Developer care sa raspunda afirmativ la cel putin 5 din urmatoarele 8 intrebari:
- Poti face o comparatie intre cel putin 2 framework-uri JavaScript?
- Codul XHTML scris de tine este corect din punct de vedere semantic?
- Preferi un editor de tip TEXT (cu sintax-highlighting) in detrimentul unui editor de tip WYSIWYG?
- Cunosti cel putin o solutie pentru realizarea unui transfer asincron de date cross-domain?
- Obisnuiesti sa validezi codul XHTML / CSS conform standardelor W3C?
- “Cross-Browser”, “fiabilitate” si “scalabilitate” se numara printre caracteristicile definitorii ale proiectelor tale?
- Esti familiar cu cel putin 4 dintre urmatorii termeni: “hasLayout”, “mostenire”, “DOM”, “elemente multi-class”, “polimorfism”?
- Ai folosit pana acum o tehnologie text-based de serializare / transmitere a datelor in afara de XML?
Cunostintele si conditiile obligatorii sunt urmatoarele:
* XHTML, CSS;
* XML, XSLT, JSON;
* JavaScript (OOP, minim 4 luni experienta in utilizarea unui framework);
* Un portofoliu care sa cuprinda cel putin 3 proiecte / experimente / aplicatii relevante;
* Seriozitate, responsabilitate, etica profesionala;
* Simtul umorului (nu glumim).
Esti avantajat daca:
* Ai experienta in utilizarea Smarty;
* Ai experienta in utilizarea Fireworks si/sau Photoshop (slicing / export);
* Esti familiar cu modul de functionare al tehnologiilor server-side (cel putin la nivel de concept);
* Te implici, esti activ si stii sa-ti exprimi / argumentezi propriile idei si convingeri;
* Esti intr-un proces continuu de autodepasire.
Beneficii:
* Proiecte complexe si incitante;
* Pachet salarial si bonusuri atractive;
* Programul (flexibil) incepe undeva in jurul orei 11:00 (somn++, trafic–);
* Atmosfera placuta si degajata (cu mici exceptii: luni dimineata si vineri seara);
* Echipa tanara (pe bune) si statica (la 8 ore pe zi in fata monitorului numai dinamica nu e);
* Sansa de a te “razbuna” zilnic pe colegii tai utilizand “armele din dotare” (X-BOX / PC gaming sessions)
* Restul le descoperim impreuna pe parcurs.
Locatie: Bucuresti (Cartierul Primaverii)
Program: Full-Time
Dupa cum probabil ti-ai dat seama, NU cautam script-kiddies si in nici un caz NU suntem adeptii conceptului “struto-camila” / “one man show”.
Acestea fiind spuse, asteptam CV-ul tau insotit de 3 link-uri catre cele mai reprezentative proiecte realizate de tine (in cazul in care un proiect nu a fost realizat integral de tine te rugam sa specifici care au fost contributiile tale) pe adresa jobs [at] f5solutions [dot] ro (vor fi contactati numai cei care vor fi selectati pentru interviu). Studentii sunt bine-veniti.
3 comentarii
Dezvoltare client-side, Internetul romanesc
DEX, varianta ‘98, ne spune:
PROFESIONIST: (Persoana) care lucreaza intr-un anumit domeniu de activitate pe baza unei pregatiri corespunzatoare.
Se aplica insa aceasta definitie si in domeniul IT? Eu zic ca nu, din cauza acelei “pregatiri corespunzatoare”.
Definitia pleaca de la presupunerea ca daca ai o diploma de absolvire a facultatii, automat faci treaba buna. E fals, si toti stim asta. Facultatile sunt depasite, cursurile particulare sunt penibile. Adevarata “treaba buna” o fac oamenii care au ceva ani in spate, ani in care au acumulat experienta in domeniu. Dar cunostintele nu sunt totul. Ele nu te pot aduce decat pana la un punct, restul il face omul din tine.
Lucrul care face diferenta dintre amatori si profesionisti este integritatea. Respectul pentru client si pentru munca ta, respect aratat prin capacitatea de a face exact ce ai spus ca o sa faci, la calitatea promisa.
Sunt curios ce intelegeti voi prin “profesionist”.
Bonus: Sclavul IT roman: mic ghid de supravietuire
6 comentarii
Freelancing, Internetul romanesc
In sfarsit s-au publicat rezultatele sondajului organizat de A List Apart in aprilie 2007, denumit “Web Design Survey”. Se pare ca la acest sondaj au raspuns 33.000 de oameni, majoritatea barbati americani, intre 25-32 de ani, developeri cu blog :)
Link direct catre PDF-ul cu toate rezultatele. (82 de pagini)
Lectura placuta
3 comentarii
Freelancing, General
Andrei si-a relansat site-ul, la timp ca sa prinda inscrierea la Internetics :). Designul este realizat de Stefan Lucut si, desi mai neconventional, arata destul de bine iar contrastul nu mi se pare suparator. Astept sa vad cum se vor potrivi lucrurile cand se vor mai strange posturi. Singurul lucru care nu-mi place momentan este navigarea, care mi se pare putin “contraintuitiva”. Imi pare rau totusi ca ai ales sa scrii in engleza…
Spor la scris si bafta la Internetics!
PS: Nu prea m-am prins ce treaba are papagalul din stanga sus…
UPDATE: pacat…
4 comentarii
Internetul romanesc
MB Dragan lanseaza azi Blogzoner, un serviciu de localizare pe harta a blogurilor si instrument de socializare. Este o initiativa indrazneata, avand in vedere ca site-ul este orientat spre .com si nu spre .ro.
Pentru a face fata volumului imens de bloguri va fi nevoie ca site-ul sa aiba o structura si o organizare foarte bine pusa la punct. De asemenea trebuie clarificat scopul site-ului: de ce m-am inscris, ce pot face cu reteaua de prieteni/bloguri, cum ajung cat mai repede la informatiile care ma intereseaza cu adevarat?
E inca la inceput, are ceva buguri si inconsistente, si cel mai probabil nu sunt implementate nici jumatate din feature-urile dorite, dar e in directia buna. Felicitari, si bafta!
Mai multe pe Kindablog.
Pune un comentariu
Internetul romanesc
Stim cu totii cata bataie de cap ne dau bugurile lui Internet Explorer. Versiunea 6 e un dezastru pentru cei ce scriu CSS. Versiunea 7 e putin mai buna, dar are in continuare probleme. Asa ca, pentru a asigura un site cross-browser, e nevoie de testare pe amandoua.
Din pacate, daca instalezi IE7 direct pe XP, iti suprascrie versiunea 6 si nu mai ai acces la ea.
M-am interesat si am gasit o solutie destul de buna zic eu. Mie mi-a mers :).
1. Se instaleaza IE7 pentru XP SP2 de aici: IE7-WindowsXP-x86-enu.exe.
2. Se downloadeaza installerul Multiple IE. Link direct.
Acesta copiaza versiuni stand-alone pentru IE 3, 4.01, 5, 5.5, 6.
That’s it :).
13 comentarii
Dezvoltare client-side
Filip scria acum 2 ani:
Unul din lucrurile invatate este ca dezvoltarea unei aplicatii serioase cere multa disciplina personala si de echipa.
Deadline-ul pe care l-ai stabilit de comun acord cu clientul la inceputul proiectului, cand s-au discutat specificatiile, e sfant. Capacitatea ta de a te tine de el arata ce fel de om esti. Daca termenul limita este incalcat fara preaviz si fara o explicatie logica, inseamna ca tu ca freelancer nu iti cunosti limitele, nu poti evalua corect o cantitate de munca si deci intr-o afacere esti imprevizibil. Lasi o impresie proasta si sunt sanse mari ca acel client sa nu se mai intoarca. Bineinteles, discutam de situatia in care specificatiile (si in consecinta deadline-ul) nu s-au modificat pe parcursul proiectului de comun acord.
Recunosc, si eu am uneori probleme in a evalua o cantitate de munca, atat prin lipsa cat si prin adaos. Dar stiu unde vreau sa ajung si fac tot posibilul sa ajung acolo, iar pe parcurs sa produc cat mai putine daune :). Normal este ca, imediat cum simti ca nu vei putea sa termini la timp, sa anunti clientul si sa revizuiti impreuna intreaga situatie. In felul asta nici tu nu treci prin rusinea de a prezenta un nimic in “ziua cea mare”, nici clientul nu pierde eventuale investitii intr-o lansare planificata (comunicate de presa, campanii de reclame, etc).
O cale oarecum gresita e sa faci eforturi supraomenesti pentru a termina proiectul: nopti albe, ore in sir la calculator, you know the drill. Spun “oarecum” pentru ca, desi de multe ori merge, pe termen lung nu este o solutie. N-ai rezolvat adevarata problema (incapacitatea ta de a-ti cunoaste limitele), doar ai ocolit-o putin, iar pe deasupra acum mai esti si obosit. Ceea ce ma duce la al doilea subiect: burnout-ul.
Mai pe romaneste, oboseala psihica apare ca efect al activitatii intelectuale prelungite si haotice, stresante, fara un echilibru de odihna. Nu poti sa te mai concentrezi ca inainte, ideile si solutiile nu prea se grabesc sa apara, iar per total simti o lipsa de interes fata de orice… E momentul sa iei o pauza si sa privesti lucrurile in ansamblu, sa vezi ce si unde ai gresit, sa compari ceea ce faci cu ceea ce iti doresti sa faci, si sa iti faci un plan clar, punctual, pentru perioada urmatoare, de care sa te tii. O scurta vacanta in care sa te rupi complet de munca si sa iti faci ordine in ganduri e de asemenea binevenita.
Voi cum va descurcati cu deadline-urile?
Further reading:
13 comentarii
Freelancing
Layouturile bazate in intregime pe CSS nu mai sunt de mult un lux in webul romanesc. Avantajele lor asupra layouturilor bazate pe tabele se cunosc, nu e cazul sa le mai enumar aici. Din pacate, in goana dupa “xhtml css valid”, unele lucruri au fost prost (sau deloc) intelese, printre care si semantica.
Sa luam ca exemplu tabelele. Desi singura lor vina este ca pana acum au fost folosite incorect de web designeri, ele nu mai sunt dorite in nici o parte a unui site, pentru ca toata lumea stie acum de “tableless layouts”.
| Nume | Prenume | Varsta |
|---|
| de Hunedoara | Iancu | 620 ani |
| Tepes | Vlad | 576 ani |
Acesta este un tabel simplu. Informatiile sunt dispuse clar, usor de inteles.
Acum, ce parere aveti de urmatoarele doua bucati de cod?:
<table>
<tr>
<th>Nume</th>
<th>Prenume</th>
<th>Varsta</th>
</tr>
<tr>
<td>de Hunedoara</td>
<td>Iancu</td>
<td>620 ani</td>
</tr>
<tr>
<td>Tepes</td>
<td>Vlad</td>
<td>576 ani</td>
</tr>
</table>
<div class="table">
<div class="table-row">
<span class="table-headcell">Nume</span>
<span class="table-headcell">Prenume</span>
<span class="table-headcell">Varsta</span>
</div>
<div class="table-row">
<span class="table-cell">de Hunedoara</span>
<span class="table-cell">Iancu</span>
<span class="table-cell">620 ani</span>
</div>
<div class="table-row">
<span class="table-cell">Tepes</span>
<span class="table-cell">Vlad</span>
<span class="table-cell">576 ani</span>
</div>
</div>
Interesant, nu? Mai e nevoie sa scriu si codul CSS necesar pentru ca a doua varianta sa arate ca prima? Pare absurd, dar multi sunt convinsi ca a doua varianta e cea mai buna (indiferent de circumstante), pentru ca “e din css”. Tabelele nu sunt rele! Ele trebuie folosite pentru informatii tabulare. E normal si semantic corect sa fie folosite astfel si este anormal sa se foloseasca o alta structura doar de dragul de a nu folosi tabele.
A scrie un site corect dpdv semantic inseamna a folosi fiecare tag html cu scopul pentru care a fost creat. Lista tagurilor suportate in XHTML 1.0 este aici. Daca o portiune de text vrei sa fie rosie, iti pui intrebarea “de ce?”. Iar daca raspunsul este “vreau sa scot acea portiune de text in evidenta”, atunci in loc sa folosesti <span class="red">, vei folosi <strong class="important">.
O regula de bun simt: daca, dupa dezactivarea stylesheet-ului CSS, nu poti identifica rapid elementele structurale ale site-ului (titluri, blocuri de text separate, formulare, meniu), atunci ceva e in neregula, iar structura HTML trebuie regandita putin. De asemenea, imaginile n-ar trebui sa existe in codul HTML decat daca sunt cu adevarat relevante pentru continut (ex: screenshoturi la o aplicatie). In rest, orice imagine (titluri mai speciale, colturi rotunjite, butoane colorate) trebuie adusa din CSS, de obicei folosind background-image. Asadar, o lista de comentarii la un articol va fi creata folosind o lista numerotata, titlurile vor folosi tagurile <hN> iar meniurile vor fi liste neordonate.
De ce este important sa scriem HTML semantic? Din multe motive. Unul ar fi SEO, deoarece se stie ca Google extrage informatiile dintr-un site in functie de structura HTML-ului, deci e bine sa-i indicam exact ce informatii sunt utile.
Un alt motiv este “backwards compatibility”: acest lucru inseamna ca daca site-ul va fi accesat de un dispozitiv mai putin inzestrat decat un calculator (ex: telefoane, screen readere, browsere mai vechi), structura lui va ramane in picioare iar informatiile vor putea fi accesate cu usurinta.
De asemenea, daca intr-o zi site-ul va fi preluat de un alt developer, ii va fi mult mai usor sa inteleaga cum functioneaza lucrurile in codul HTML.
Nu in ultimul rand pentru ca este primul pas catre semantic web.
Este bine de stiut ca nici un tag HTML nu e special in vreun fel (cu putine exceptii, cum ar fi tagul <a>). Felul cum arata un <h3> (de exemplu) depinde de setarile default ale fiecarui browser. Poti crea un intreg site doar din taguri <span>, fapt dovedit aici, insa in acest fel anulezi complet ideea de semantica asociata cu tagurile.
Resurse utile
Completare
Ionut a scris acum cateva zile un articol foarte bun despre stilizarea formularelor fara a folosi tabele, ci folosind definition lists. Enjoy :)
10 comentarii
Dezvoltare client-side
