Cum să faci un site compatibil cu toate browserele populare

Ştim cu toţi avantajele de a avea o pagină web compatibilă cu toate browserele. Cu toate acestea, puţin web-designeri reuşesc să facă site-uri compatibile cu majoritatea browserelor populare.

Cauzele pentru lipse de compatibilităţi sunt multe:

  1. browsere proaste (multă „sănătate” creatorilor Internet Explorer)
  2. webdesigneri lipsiţi de experienţă (se lucrează pe bani puţini de obicei, cei buni preferă să se reprofileze şi astfel munca ajunge să fie făcută de persoane lipsite de experienţă)
  3. ignorarea standardelor şi  abuzarea de dirty trick-uri în design

Daca punctul 1 nu ţine de programator, şi nu se poate face mare lucru, restul cauzelor pot fi uşor înlăturare. De aceea, am să descriu paşi pe care eu îi urmez pe parcusul creării unui design html compatibil cu toate browserele.

1. Standardele W3C

Toţi cei care lucrează ca designeri web au pretenţia ca browserele să le citească gândurile şi să afişeza paginile create aşa cum vor ei, toate aste fără ca ei să ţină cont de regulile limbajului. Atunci când tu nu îţi validezi pagina, de ce ai pretenţia ca browserul să se comporte exemplar?

Din punctul meu de vedere, nu poţi da vina pe browser cât timp pagina ta nu e validă. Chiar dacă erorile nu ţin neapărat de eroarile tale. E o chestie de bun simţ şi după ce o să începi să o aplici o să conştientizezi multe din greşelile pe care le faceai fără să-ţi dai seama. Un motiv în plus, e faptul că e foarte uşor să crezi o pagină cu cod valid dacă eşti foarte puţin atent pe parcusul dezvoltării.

Mulţi preferă să îţi valideze paginile după ce au terminat de creat. Lucru pe care nu-l recomand nimănui, mai ales celor care sunt la început cu studiul standardelor. E foarte greu să validezi un cod gata creat, modificările pe care trebuie să le faci s-ar putea să necesită multă muncă.  Aşa că cel mai simplu e să-ţi validezi codul pas cu pas pe parcusul scrieri codului. Lucru deloc complicat, dacă ai instalat Html Validator. O să ai în permanenţă o iconiţă în bara de status a browserului care te avertizează când scrii prostii. Plus că îţi oferă nişte features extra în fereastră de vizualizare a codului sursă (înclusiv lista cu erorile descoperite şi explicaţi / sfaturi cu privire la fiecare eroare). So… creare de cod valid e joacă de copil cu extensia asta instalată.

2. XHTML sau HTML

Dilema asta are legătură punctul anterior, dar o consider destul de importantă aşa că merită să fie evidenţiată.
Momentan, în webdesing există trendul XHTML. Toată lumea e super mega încântată de acest standard dar uită nişte detalii. Nu are rost să dezbat problema care a fost dezbătută acum mult timp de către alţii. Detalii găsiţi aici. Ideea de bază e că de multe ori XHTML vine la pachet cu câteva issues pe care mulţi nu le ştiu, şi în practică nu ai nevoie de XHTML, putând folosi la fel de bine limbajul HTML corect formatat.

Personal recomand folosirea standardului HTML 4.01 Transitional:

<!DOCTYPE html PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN” „http://www.w3.org/TR/html4/loose.dtd”>

Sintaxa este la fel ca cea de la XHTML, exceptând faptul că în secţiunea head nu se mai închi tag-urile gen link. Adică în loc de <link … /> o să folosiţi doar <link …>.

Regulile CSS sunt aplicate cu aceiaşi stricteţe ca şi la doctype-ul xhtml, asta ca să nu las loc de întrebare pentru cei care folosesc doctype-ul de xhtml din cauza asta.

3. CSS Reset

Toţi ştim că valorile default la atributele CSS diferă de la browser la browser. Aşa ca un CSS Reset te ajută să le aduci la un numitor comun. În plus de asta, te obligă uneori să defineşti unele atribute în mod express. De exemplu atributul margin la paragrafe este 0, şi dacă vrei ca textul tău să arate frumos, o să trebuiască să-l defineşti tu. În caz că nu foloseai CSS Reset, erai tentat să laşi valoare default, care diferă foarte mult de la browser la browser.

De asemenea te scuteşte de multe probleme de design apărute din cauza valorilor default a unor browsere. Exemplu: cine se gândea că tag-ul <form> are margin în IE? Adică un element invizibil care îţi strică designul şi pierzi o grămadă de timp să vezi care e buba.

Până acum am folosit numai CSS Reset-ul oferit aici. Se găsesc pe net mai multe variante, dar majoritatea au la bază acest css reset.

4. Probleme specifice Internet Explorer 6

Din toată familia de browsere Internet Explorer, cea mai veche versiune demnă de luat în calcul e Internet Explorer 6. Versiunile mai vechi chiar nu cred că mai sunt folosite, din moment ce Internet Explorer 6 vine gata instalat pe Windowx XP, deducem că ar trebui să ai Windows ’98 sau Millenium care vin cu versiuni mai vechi de Internet Explorer, ceea ce e foarte puţin probabil. Utilizatorii de Internet Explorer pe Mac nu cunosc, au deja Safari, nu văd de ce ar mai folosi Internet Explorer.

Dintre toate versiuniele 6, 7 şi 8, versiune 6 e cea mai problematică pentru designeri. Nu cunoaşte multe reguli de CSS, si cel mai grav nu afişează PNG-urile corect. Probleme însă sunt destul de vechi, şi între timp s-au descoperit rezolvări la majoritatea din ele, de exemplu:

  • PNG Fix: aici există mai multe soluţii, eu folosesc varianta asta. am observat că mai există şi alte metode, unele chiar puţin mai elegante aparent, dar nu am testat nimic altceva până acum, aşa că nu pot să recomand. Dacă ştiţi alternativă mai bună la asta, vă rog să-mi spuneţi.
  • min-height: printre tagurile nerecunoscute de IE 6 se numără şi acesta. Cea mai simplă şi elegantă soluţie pentru a rezolva lipsa acestui atribut e codul de mai jos, care se bazează pe faptul că IE6 nu ştie de !important şi că el redimensionează automat containerul chiar dacă are height-ul setat:
    • min-height: 100px;
    • height: auto !important;
    • height: 100px;

Dacă o să-mi mai amintesc, o să mai notez aici şi alte soluţii găsite pentru problemele Internet Explorer 6.

Şi ca să nu termin în ton pesimist acest capitol, menţionez că sunt mulţumit de felul cum Internet Explorerul se descurcă cu poziţionările absolute şi relative. Nu ştiu de ce, dar aveam o impresie foarte proastă despre el la capitolul ăsta. Se pare că nu e chiar aşa.

5. Testarea

Un lucru foarte important şi des neglijat sau făcut în grabă este testarea. Este foarte important să verifici designul în toate browserele cât mai des. După fiecare bucată de cod scrisă trebuie să testezi. Ştiu că pare un proces mâncător de timp, dar te scuteşte de timp pierdut cu debugging-ul atunci când apar probleme. De ce zic asta? Pentru că atunci când apare o eroare, eşti sigur că este în bucata de cod scrisă de la ultima testare. Cu cât testezi mai des cu atât bucata aia de cod va fi mai mică, deci econimiseşti timp cu căutatul erorii.

Ordine de testare, adoptată de mine este următoarea:

  1. Firefox: browserul de bază, aici testez prima dată codul scris. Nu încep testele în alte browsere înainte să meargă bine. De asemenea tot aici trebuie testată şi validitatea codului înainte de a merge mai departe cu testele.
  2. Internet Explorer, cele 3 versiuni importante: 6,7 şi 8
  3. Chrome – până acum nu am avut deloc probleme cu aici.
  4. Opera
  5. Safari, deşi nu mai este neapărat nevoie, din moment ce împarte acelaşi engine ca şi Chrome.

6. Don’t

Lucruri pe care nu ar trebui să le faci, atunci când dezvolţi o pagină compatibilă cu toate browserele este să scrii cod separat pentru fiecare browser în parte. Cei care fac acest lucru abuzează de conditional comments recunoscute de Internet Explorer pentru a rescrie aproape tot CSS-ul. Cea mai urâtă versiune de don’t design întâlnită folosea php ca să genereze cod html diferit pentru browserele cu probleme.

De asemenea, trebuie evitate dirty trick-urile. Încercaţi să scrieţi numai cod valid. Evitaţi probleme folosind tehnici elegante, cum este cea prezentată mai sus cu min-height. Nu folosiţi w_idth ştiind ca IE îl recunoaşte pentru a da dimensiuni diferite pentru IE.

De când am început să folosesc CSS Reset nu am mai folosit conditional elements şi nici un alt trick pentru a trata diferit browserele. Singura utilitate a conditional comments e folosirea PNG FIX-ului în Internet Explorer 6.

Cum să-ţi pregăteşti PC-ul pentru webdesign

Pentru toţi cei care vor să se apuce serios de webdesign sau pentru cei care au început deja şi au nevoie de ajutor, am pregătit un mic ghid pentru configurarea calculatorului pentru webdesign.

Înainte de toate se presupune că sistemul de operare e deja instalat, şi că face parte din familia Micro$oft. Pentru Linux o să scriu pe viitor.

Acum, să începem lista cu programe necesare:

1. Browsere

Sunt de nelipsit din viaţa unui webdesigner. Îţi trebuie instalate toate, chiar dacă tu foloseşti mai mult Firefox-ul. Şi pe lângă asta, o să mai ai nevoie şi de multe plugin-uri care o să-ţi facă viaţa mai uşoară în lupta cu bug-urile.

Lista de browsere trebuie să conţină neapărat:

  • Firefox, aka „The God Father of browsers”, cu  următoarele extensii:
    • Firebug – o mulţime de tool-uri foarte utile (debug css,html / dom inspector, javascript, http request headers, etc)
    • Html Validator – validează codul html (mai multe alte opţiuni disponibile)
    • Colorzilla – pentru că, din când în când mai ai nevoie să copiezi coduri de culoare hexa (color picker)
    • MeasureIt – folositor atunci cand îţi baţi capul cu dimensiuni
    • Web Developer – o mulţime de butoane folositoare (re-dimensionare fereastră pentru diferite rezoluţii, disable js, etc)
  • IE Tester, pentru că trebuie şi pentru că merită. O singură fereastră şi testezi pagina in Internet Explorer 5.5, 6, 7 şi 8 fără bătai de cap. Câte un tab pentru fiecare motor de randare.
    • DebugBar – este un tool compatibil cu IE Tester, este asemănător cu Firebug-ul din Firefox
  • Chrome, pentru că e un browser care promite multe pe viitor, şi care e destul de popular
  • Safari, deşi rulează ca şi Chrome-ul, folosind WebKit, nu e rău să-l ai instalat. Teoretic, o pagină care merge bine în Chrome merge bine şi în Safari în 99.9% din cazuri.
  • Opera, pentru că e unul dintre cele mai vechi browsere şi pentru că nu ridică probleme prea mari de obicei. Are bug-uri specifice la anumite interpretări de CSS, dar sunt rare şi se rezolvă rapid.

Nu am menţionat pe listă Multiple IE, care face acelaşi lucru pe care îl face şi IETester, pentru că e mai greu de folosit (fiecare browser are fereastra proprie şi se încarcă destul de greu), nu poţi avea IE7 si IE8 simultan decât dacă te complici, etc.

2. Editoare pentru cod

Aici lucrurile sunt discutabile. Fiecare are un editor preferat. Eu personal folosesc Programmers Notepad 2. E simplu şi ştie cam tot ce am eu nevoie. Recomand de asemenea Komodo Edit, care e ceva mai avansat decat Programmers Notepad, dar care porneşte ceva mai greu (doar e bazat pe core-ul de la Firefox).

Mai puteţi încerca Notepad++, Dreamweaver, PSPad şi multe altele. Cu excepţia Dreamweaverului toate editoarele menţionate sunt free.

3. Editare imagini

De bază la acest capitol ar fi Photoshop-ul, însă având în vedere că nu e free, ne orientăm atenţia către alternative free:

  • Paint.NET – un mini Photoshop gratuit. Are cam toate toolurile şi efectele de bază din Photoshop, ştie layere şi dacă te obişnuieşti cu el, nu o să mai simţi lipsa Photoshopului.
  • Irfan Viewer – exact cum spune şi numele e photo viewer la bază, dar mai ştie de asemenea şi convertiri între mai toate formatele de imagine, batch convert tool foarte util.
  • GIMP – rivalul Photoshop din tabăra Linux / OpenSource. Din păcate lupta de orgolii a făcut ca acesta să fie structurat foarte diferit faţă de Photoshop. Oferă aproape tot ce oferă şi Photoshopul, numai să şti să-l foloseşti.

4. FTP Clients

Programe indispensabile atunci când vrei să uploadezi site-ul pe server. Aici alegerea e mai simplă. Avem Filezilla Client care este cel mai popular, şi cred că cel mai bun client ftp free (concurează cu cele mai bune aplicaţii plătite din punctul meu de vedere).  Apoi, pentru cei mai puţin pretenţioşi, Total Commanderul are un client ftp integrat.

5. Server local pentru dezvoltare şi testare

Necesar doar în cazul în care aveţi de gând să lucraţi cu limbaje de programare gen PHP, PERL, etc. Pentru a creea pagini simple HTML nu aveţi nevoie de aşa ceva.

Variante disponibile:

  • WAMP – recomandare personală datorită utilitarelor cu care vine. Setările de bază se fac cu un singur click, şi la fel de uşor poţi schimba diferite variante de PHP, Apache şi MySQL.
  • XAMPP – la fel de uşor de instalat şi de folosit. Vine cu modul https instalat default (spre deosebire de WAMP), dar pentru a modifica configurările  trebuie să editaţi manual fişierele config.
  • Instalare separată Apache,PHP, MySQL. Nu recomand nimănui pentru că se pierde o grămadă de timp cu configurarea fiecărei componente în parte, şi dacă ceva nu merge s-ar putea să pierzi ore făcând debugging.

6. SVN Clients

Dacă lucrezi în echipă folosirea SVN-ului sau a orcărui revision control system e obligatorie. Eu folosesc şi la proiectele personale din mai multe motive:

  • poţi urmări uşor toate modificările asupra unui fişier
  • poţi lucra de pe mai multe calculatoare fără să îţi baţi capul cu sincronizarea fişierelor
  • e integrat în issue tracking systems cum ar fi Trac, Redmine şi chiar în The Bug Genie.

Pentru platforma Windows nu cred că există alternativă mai bună la Tortoise SVN, de aceea e singurul care îl recomand. Dacă aveţi nevoie de apelarea svn din linie de comandă puteţi folosi SlikSVN (eu îl folosesc pentru a face update-uri automate din linia de comandă folosind scripturi PHP).

Pentru hosting gratuit de SVN puteţi încerca Assembla.  Este gratuit, cu ceva limitări care nu deranjează. Oferă pe lângă SVN şi Trac hosting gratuit. Testat personal şi recomand cu încredere.

Pentru sugestii / completări / întrebări puteţi lăsa un comentariu.

Week-end

Aproape a trecut şi week-end-ul ăsta. Bilanţul este bunicel, dar nu satisfăcător din punct de vedere a obiectivelor şterse de pe listă.

Atenţie, post [relativ] plictisitor !

Personal life

Ca de obicei, am dormit mai mult decât în timpul săptămânii. Am făcut curat. M-am jucat NFS Shift, asta ca o premieră după câteva luni (dacă nu aproape juma’ an) de când nu m-am mai jucat nimic pe comp în afară de indebara.ro.

Tot week-end-ul ăsta mi-a expirat şi inderdicţia de a conduce (yupee). Din păcate permisul nu mi l-am recuperat, şi sper ca luni sau cel târziu marţi să fie din nou în posesia mea (despre cum am reuşit să mă aleg cu suspendare 30 de zile mergând cu 60 la oră în alt episod).

M-am întâlnit cu nişte persoane pe care nu le mai văzusem de mult şi deseară urmează să sărbătorim un prieten. La multi ani, Alex!

Mi-am reparat GPS-ul la telefon care refuza să mai funcţioneze după intervenţia la mufa de încărcare.

Professional

Am lucrat pentru jobul secundar, dar din păcate tot sunt în urmă cu munca. Am mai lucrat şi la alt proiect tip freelance, şi din păcate nu mai am timp să termin un update la un alt site (update care e întârziat de mai mult timp). O să trebuiască să amân o întâlnire pentru mâine, dar nu e nimic grav, nu era bătută în cuie data.

Din păcate la capitolul ăsta tot în urmă sunt.

Întrebarea zilei

Ce se întâmplă dacă mă prinde poliţia astăzi şi nu am permisul la mine? Eu cred că o să-mi iau amendă pentru neprezentare de acte. Dacă e să analizam, nu are cum să-mi dea amendă dacă aia de la biroul de eliberări documente nu lucrează în week-end. Cu alte cuvinte eu sunt obligat să nu conduc 32 de zile (30 suspendare şi 2 pentru că nu lucrează aia de la birou), deci mai mult decât scrie în lege. Life is unfair…

Logan – părere personală

După ce am dat de mai multe discuţii pe forumuri şi pe bloguri, nu mă pot abţine să nu îmi dau şi eu cu părerea despre maşina-emblemă-naţională, aşa-zisu’ GOLAN, pardon, LOGAN.

Alternative la LOGAN

În primul rând, nu există maşină care să aibă dotările LOGAN-ului şi să fie mai ieftină ca preţ de fabrică. Punct.  Alternative, în ochii unora, ar fi Fabia, Astra, Polo. Dar cei care găsesc maşinile astea ca alternative la LOGAN, scapă din vedere mai multe lucruri, cum ar fi: puterea motorului şi dotările. În primul rând nu mi se pare cinstit ca toată lumea să compare preţul de LOGAN full-option cu preţul de bază de la variantele alternative. Mulţi sunt orbiţi de mărcile maşinilor pe care le au, şi trec cu vederea dotările foarte practice care le lipsesc, mulţumindu-se că au o maşina străină nouă. De multe ori se înşeală, şi în loc să recunoscă că au făcut o alegere greşită, trag concluzii de genu’: Dacă nici asta n-a fost ok, d-apoi LOGAN-ul…

Preţul

Pe lângă aştia cu alternativele, mai există aia care au probleme cu preţul (dacă tot ne place să catalogăm pe alţii). Cică e un preţ prea mare pentru ceea ce primeşti. Ăştia nu văd că, pe când alte mărci şi modele de maşini ieftinesc mai toate modele low-entry, Dacia nu a făcut modificări de preţ semnificative? Nu se gândesc oare ca alte mărci au o marjă de profit muuult mai mare decât Dacia. La Dacia nu s-au făcut ieftiniri pentru că nu prea aveau de unde.  Ăsta e preţul, nu mai aveau de unde să scadă că dădea cu minus.

Consumul

Alţii au o problemă cu consumul. Ţin minte şi acum, când apăruseră primele pliante cu LOGAN, toată lumea era şocată de consumul în oraş enunţat de producător. Şi anume 11/100km. Mulţi dintre noi aveam Dacii care dacă nu erau bine reglate luau 10 în afară fără să ne deranjeze, în schimb 11l/100km la LOGAN era imens, ceva inadmisibil. Pînă la urmă lumea şi-a dat seama că 11l/100km nu e chiar aşa mult, ba din contră e chiar ok pentru un benzinar.

Din 2006 (cred), Dacia a scos şi varianta pe motorină, care are un consum mai mult de cât ok. Totodată a scos din computerele de bord consumul instant. Prea mulţi idioţi se plângeau că au consumul instant prea mare, neştiind că e normal să ai consum mult mai mare când accelerezi. Probabil francezii s-au gândit că noi românii suntem prea proşti să înţelegem aşa ceva şi nici nu are rost să mai irosească timpul celor de la asistenţă telefonică cu explicaţii pentru proşti. Ironia face ca toţi caută acum să îşi activeze funcţia de consum instant.

Confort

La capitolul ăsta LOGAN-ul nu excelează, dar nici foarte prost nu stă, comparativ cu celălalte maşini din clasa low-cost. Dacă nu credeţi, citiţi comentariile de pe traficul.org. Singurele lucruri care i se pot reproşa din punct de vedere al calităţii sunt scaunele din faţă (au şezutul – partea de jos – prea mică şi îţi obosesc picioarele la drumuri lungi dacă nu îţi schimbi poziţiile des) şi izolaţia fonică din care rezultă zgomotul de rulaj la viteze mari sau pe drumuri proate Izolaţie care, de altfel, lipseşte şi la alte mărci şi maşini ieftine şi poate fi uşor acoperită cu muzică, chiar cu muzica dată încet. În schimb, aceste minusuri sunt compensate de spaţiul generos pentru o asemenea maşină.

Apropo, ştiţi înjurătura aia cu „Îţi doresc să te mănânce în cur şi să ai mîini scurte să nu poţi să te scarpini”. E, cam aşa e şi cu portbagajul de la LOGAN. Ai ditamai portbagajul cu deschizătura mică comparativ cu spaţiul oferit. La chestii mai voluminoase rişti să ai surprize.

De ce este considerat LOGAN-ul troacă

Pentru că mulţi dintre cei care şi-au luat LOGAN, nu au pus accentul pe dotări. Dacă te uiţi prin anunţurile auto, o să ramâi uimit de numărul celor care consideră AC-ul opţional. Închiderea centralizată, geamuri electrice pe faţă, servodirecţia şi ABS-ul erau doar mofturi în minte celor care s-au grăbit să-şi ia LOGAN-ul cu dotări standard, adică troaca. Da, troacă, pentru că asta reprezintă o maşină ce nu are decât motor, volan şi pedale. Partea naşpa pentru cei care au făcut astfel de alegeri, este faptul că orice dotare suplimentară se face ulterior la preţuri mult mai mari decât preţul din catalog. Pentru exemplificare, cei care nu au AC, trebuie să dea vreo 2-3000 lei noi că să şi-l monteze, iar daca au diesel, nu se prea bagă nimeni la aşa ceva. ABS-ul nu ţi-l mai montează nimeni dacă nu l-ai luat din fabrică, şi chiar dacă ţi-l montează o să îţi asumi nişte riscuri foarte mari ca instalaţia să cedeze oricând.

Piese şi revizii

Aici discuţiile nu se opresc niciodată. După mine toate piesele auto sunt scumpe, indifierent de marcă, dacă le cumperi din reprezentanţă. La piesele de import, lucrurile sunt iar la fel indiferent de marcă, aşa că se pot face cu greu comparaţie. Ce nu pot să trec cu vederea e că unii fac comparaţii între preţul pieselor de origine Dacia şi cele de import de la celălalte mărci. E la fel de nedrept ca şi comparaţia de la preţ între LOGAN full-option şi variantele de bază de la alte mărci.

Cu service-urile autorizate, toată lumea are probleme. Şi asta, tot la fel, indiferent de marca maşinii. Unii sunt mai norocoşi, şi nu se izbesc de astfel de probleme, dar asta nu înseamnă că marca respectivă are service-uri ok.

Probleme şi fabule

Aici ar intra probleme de fabricaţie apărute la anumite generaţii, care între timp au fost remediate. Cea mai importantă e problema vopselei. LOGAN-urile fabricate în primii doi ani (2004,2005) au avut o vopsea mai sensibilă. Între timp problema s-a rezolvat, nu mai are rost să zici că LOGAN-ul rugineşte după 2-3 ani.

Aşa-zisă problema a frânelor e o fabulaţie. LOGAN-ul are frâne, poate chiar prea bune pentru handicapaţii care le folosesc. Variantele fără ABS au probleme cu frâna care prinde foarte uşor. Şi mulţi nu ştiu să oprească în condiţii de urgenţă decât cu pedala la podea, şi atunci e normal ca să se ducă maşina ca sania (tot aştia care nu au ABS investesc foarte rar în cauciucuri bune şi de aceea efectul de sanie e amplificat). De aici toţi au tras concluzia că LOGAN-ul nu are frâne, ceea ce este fals, prostu’ nu are minte. Problema asta e prezentă la toate maşinile fără ABS, doar că pe LOGAN e mai uşor să dai vina. LOGAN-ul cu ABS pot să spun din proprie experienţă că scoate din rahat orice şofer neatent (inclusiv pe subsemnatul de vreo 3-4 ori).

Apoi mai vin defectele celor care nu au grijă de maşini. Mulţi când afirmă că LOGAN-ul e defectuos şi dau exemplu pe taximetrişti sau aia de circulă cu maşinile de firmă ca la raliuri. Ăştia sunt aia care sar peste revizii, nu schimbă piesele până când maşina nu mai pleacă de pe loc. Amortizoarele şi arcurile se schimbă la intervale de 3 ori mai mari decât scrie in carte (ce ştiu ăştia de la Dacia). Toate piesele sunt de import, preferabil turceşti, că doar n-o fi ei proşti să dea banii pe piese de origine. Turbinele şi injectoarele de la diesel se strică la orice maşină când îţi bagi joc de maşină şi mai bagi şi motorină de provenienţă dubioasă.

Concluzia

LOGAN-ul e o maşină pe care mulţi o disconsideră din snobism, pur şi simplu nu pot accepta că în România se pot face şi lucruri cât de cât ok. După decenii de dominaţie al daciei 1300 nu se pot acomoda cu evoluţia, şi privesc LOGAN-ul ca pe o dacia 1300 restilizată. Din păcate pentru voi, singurii care au rămas în urmă cu evoluţia sunteţi voi şi conceptele voastre.

Aruncatul cu nămol la adresa LOGAN-ul a devenit un fel de religie. Mulţi fac asta fără să ştie de ce. Dacă îi întrebi ce nu le convine la maşina asta de loveşti de o lipsă acută de argumente. Nimeni nu ştie cu adevarat de ce LOGAN-ul nu e ok, doar că e maşină românească, ce pretenţii poţi avea?!.

Status-uri interesante

Dacă aveţi mai multe informaţii despre aşa ceva, vă rog ajutaţi la cultivare unui neştiutor ca mine 🙂

  • ٩(-̮̮̃•̃)۶
  • ٩͡[๏̯͡๏]۶
  • ٩(-̮̮̃-̃)۶
  • ๑۩۞۩๑
  • ε[-ิิ_•ิ]з
  • ۞۞
  • ۰۪۪۫۫●۪۫۰
  • ღ♥ღღ♥ღ

Pentru a le folosi utilizaţi copy / paste. O lista mai mare găsiţi aici.

Update: pentru statusuri amuzante puteţi încerca şi aici.

Web – usability

Post scris pentru concursul organizat de www.cipy.ro.

La începuturile „carieri” mele ca webdeveloper îmi făceam veacul pe phorum.ro. Acolo am auzit prima oara de usability şi de seo. Între timp m-am documentat mai intens cu tot felul de articole ce veneau ca recomandări din partea Google-ului când îl întrebam despre aşa ceva.

Ce am înţeles eu în legătură cu usability în anii care au trecut de atunci, şi în care am lucrat ca webdesigner:

  1. Încearcă să faci site-urile cât mai simple. Nu încărca site-ul cu lucruri inutile pentru vizitator. Mulţi au tendinţa de a pune tot felul de countere si alte lucruri inutile pe site. Timpul de încărcare a paginii creşte, la fel şi timpul de randare a browserului, imi faci trafic degeaba dacă intru de pe mobil (şi plătesc la kb tranferaţi), plus că imi poţi bloca compul cu banere flash. Timpul pe care e dispus să-l aştepte un internaut să se încarce un site e undeva în jurul a 7-8 secunde, dacă site-ul tău depăşeşte acest timp, utilizatorul îi va acorda din start o bilă neagră înainte să mai vadă conţinutul.
  2. Testează-ţi site-ul în toate browserele. Ţine mai mult de accesibilitate, dar dacă browserul meu nu afişează cum trebuie pagina, cred că se alege praful şi de usability. Ştiu că a face un site compatibil cu majoritatea browserelor e dificil la început, dar când ai ceva experienţă nu o să ţi se pară un impediment. Pentru a face un site compatibil cu toate browserele trebuie doar să testezi site-ul pas cu pas în timpul creaţiei lui (în caz că îl faci de la zero). Eu personal lucrez în Firefox, şi dupa fiecare bucată de cod scris verific şi în celelate browsere: IE7 şi IE6. Chrome, Opera, Safari de obicei nu au probleme de randare, şi, dacă îţi merge în Firefox şi Internet Explorer sunt 99% şanse să nu ai probleme cu restul browserelor. Sfaturi găseşti aici.
  3. Oferă alternative de navigaţie. Asta se aplica în cazul meniurilor flash sau javascript. Deşi e puţin probabil ca cineva să nu aibă javascriptul activat, e bine să fi pregătit. La meniurile în flash probabilitatea ca cineva să nu aibă flash sau să aibă flash-ul dezactivat e mare (chiar eu foloseam în trecut FlashBlock – extensie de Firefox). De asemenea linkurile din footer-ul paginii pot fi foarte folositoare atunci când ai mult conţinut şi accesând linkurile din footer poţi scăpa de plăcerea de a da scroll la toata pagina.
  4. Structurează-ţi bine informaţia. Nu deruta utilizatorul cu titluri care nu au legătură cu conţinutul. Situaţii în care mai multe pagini au titluri asemănătoare trebuie de asemnea evitate. Utilizatorul va fi derutat şi nu va ştii ce să aleagă, mai bine ai grupa toate informaţiile pe o singură pagină. Informaţia ar trebui să fie concisă, evită pe cat posibil clişeele lungi şi plictisitoare.
  5. Ţine cont de regula literei F. După studii de usability, s-a ajuns la concluzia ca utilizatorul scanează pagina ca şi cum ar desena litera F: se uita la partea de sus (header), apoi în stânga (unde de obicei e meniul), scanează apoi conţinutul de la mijlocul paginii, iar la final îşi aruncă ochii în partea de sub meniu. Studiu ăsta a fost facut prin 2000 – 2003, în prezent nu cred că mai este foarte relevant în forma originală. Blogurile,de exemplu, au meniul pe partea dreaptă de obicei, eu prefer să cred ca această regulă se aplică acum şi pentru litera F în oglindă.
  6. Acces rapid la informaţii. Toate informaţiile importante de pe site-ul tău trebuie să fie tot timpul la un click distanţă, oriunde ai fi în site.
  7. Sitemap. Dacă structura site-ul este foarte complexă (site-ul conţine multă informaţie) şi punctul 4 nu e respectat, atunci o să scuteşti ceva timp vizitatorilor care pierd timp navigând printre secţiunile site-ului în speranţa că vor găsii ce vor.
  8. Search. Nu concep să existe site fără aşa ceva (exceptând site-urile cu 2-3 pagini). Google oferă aşa ceva gratuit, scuza cu „nu ştiu / nu am timp să implementez” nu mai ţine.
  9. Testează-ţi site-ul cu un prieten. Cea mai simplă metodă de vedea cum stai la capitolul usability, este să rogi pe cineva să navigheze pe site, sau să folosească aplicaţia web pe care ai facut-o. Ai fi suprins să vezi cum oamenii care văd site-ul / aplicaţia pentru prima oară să nu înţeleagă mare lucru din ea. Un astfel de test te ajută să îţi restructurezi meniurile şi linkurile mult mai intuitiv, şi chiar să redenumeşti anumite secţiuni al căror nume nu e foarte sugestiv.
  10. Foloseşte intens site-ul / aplicaţia creată. Pe lângă testul explicat la punctul 9, aceasta este iar o metodă bună de a face o aplicaţie sau un site mai uşor de folosit. Plecând de la Amdahl’s Law (trăiască dl. Vlăduţiu), în felul ăsta vei găsii lucrurile care lipsesc pentru a face utilizarea cât mai uşoară. De exemplu o să constaţi ca după fiecare pagină ai vrea să mergi înapoi, şi butonul de back e tocmai sus în meniu, lucru care nu ridică semne de întrebare la început, dar după ce ai lucrat cu site-ul/aplicaţia o să îi simţi lipsa şi o să-l adaugi şi în partea de jos.

Şi cred că să ma opresc din plictisit lumea aici. Aş mai putea găsi încă pe atâtea lucruri de care m-am lovit lucrând ca webdesigner, dar o să continui cu altă ocazie.