AddThis Social Bookmark Button

vineri, iulie 27, 2007

Indexare pentru reducerea dimensiunii imaginilor PNG pe web

Reducerea dimensiunii imaginilor este extrem de importanta pentru toti cei care folosesc web-ul: utilizatori, autori, servere, provideri. O metoda drastica de reducere a acestei dimensiuni pentru imaginile in format PNG poate convertirea de la True Color la culori indexate. Nu se poate aplica intotdeauna, dar cind se poate rezultatele sint uimitoare:

4,6 KB -> 2,3 KB
original -> indexat
48,7 KB -> 17,2 KB
original -> indexat
16,1 KB -> 6,0 KB
original -> indexat

citeste mai mult

nota: cu multumiri pentru ioana gabriela

luni, iulie 23, 2007

Redirectionari, cu si fara www, cum NU se face - exemplu: www.meyerproducts.ro

Am atins si in alte ocazii probleme care apar din inconsistenta prezentarii unui site in nume de domeniu cu si fara www, acum la incompetenta designului se adauga si incomptenta gazduirii. Ca exemplu practic se foloseste www.meyerproducts.ro, din care am mai relevat erori si cu alte ocazii.

Paginile din site (aici pagina principala), in formatul pe care autorii l-au dorint (si clientul l-a platit) arata dupa cum urmeaza:

meyerproducts.ro home page

Dar stergind "www." din numele domeniului, rezultatul dezastruos este:
meyerproducts.ro home page


Pentru a gasi cauza este suficient sa ne uitam la locatia imaginilor folosite din abundenta in layout, pentru fundal (background), butoane, borduri, distantatoare si altele:
meyerproducts.ro menu

Conform asteptarilor, se pot vedea elementele grafice corespunzatoare:
meyerproducts.ro background

Sau:
meyerproducts.ro background

La siteul fara "www." in numele domeniului problema apare imediat:
meyerproducts.ro menu

In loc de elementul grafic necesar se face o redirectare (probabil la nivel de server, virtual host sau .htaccess) si in loc se afisaza pagina index a siteului:
meyerproducts.ro redirect


Rezultatul incomptentei de a realiza o redirectare normala (daca se dorea redirectare ar fi trebuit ca toate paginile fara www sa fie redirectate la echivalentele lor cu www) este ca vizitatorii care se grabesc si fac economie la citeva apasari de taste se vor alege cu o impresie complet neplacuta despre produs si serviciu (compania Meyer).

Actualizare: articol sindicalizat si la dioand webdesign si articole by Nicu

vineri, iulie 20, 2007

Optimizare imagini PNG cu OptiPNG

Cea mai mare parte din traficul unui website este constituit din imagini, deci in mod evident orice reducere a dimensiunii imaginilor gazduite va avea un efect benefic pentru toata lumea: pentru vizitatorul care va avea acces mai rapid la pagina, pentru server, care va avea o incarcare mai mica, pentru autorul siteului, care se poate incadra intr-o solutie de gazduire mai ieftina.
Daca reducerea dimensiunii fisierelor se poate realiza fara pierderi de calitate (loseless), cu atit mai bine! Si aici intervin programele pentru optimizare PNG (sper ca deja folositi exclusiv PNG pntru orice imagine care nu este fotografie, PNG este superior GIF din toate punctele de vedere iar pentru fotografii, compresia lossy din JPEG e imbatabila).

OptiPNG este un program asemanator cu ceva mai cunoscutul Pngcrush ce realizeaza reducerea dimensiunii fisierelor PNG prin comprimarea streamurilor de date IDAT. Este un program ce functioneaza din linie de comanda si e dispoibil pentru Windows, Linux, Unix.

Iata si un screenshot care arata OptiPNG la lucru, lista de optiuni, un exemplu de folosire si o imagine optimizata:

[screenshot]

joi, iulie 19, 2007

Reflectare imagini cu Inkscape si GIMP

Efectele de reflexie dau un aspect de perspectiva imaginilor carora le sint aplicate, pot fi folosite la logo-uri, la titluri, la previzualizari, la butoane si in mute alte cazuri. Iata un scurt tutorial despre realizarea unor asemenea efecte.
inkscape gimp

citeste

Actualizare: un nou truc a fost adaugat, permitind crearea de reflexii mult mai bune cu Inkscape.

miercuri, iulie 18, 2007

Grafica web: un buton, doua butoane, trei butoane...

[butoane]Butoanele reprezinta un element grafic regasit pe aproape orice site, si cu cit arata mai spectaculor, cu atit autorii considera (nu neaparat corect) ca e mai bine. Asa ca am pus cap la cap ceea ce in mod autoironic numesc un ghid definitiv pentru crearea de butoane pentru web cu Inkscape, incluzing butoane simple cu aspect 3D, in stilul Aqua sau cristaline, cu sau fara umbre si de diverse culori.
citeste

luni, iulie 16, 2007

Cota de piata a Firefox e in continua crestere

XiTi Monitor, o firma franceza specializata in monitorizarea serviciilor web a publicat un raport care arata cresterea semnificativa a cotei de piata in Europa a Firefox in dauna Internet Explorer.

Conform studiului, cota de piata a Firefox in iulie 2007 este de 27,8%, in crestere fata de 24,1% in martie, confirmind tendinta generala crescatoare. In acelasi timp Internet Explorer este cotat cu 66,5%, in scadere de la 73,3% cu un an inainte (iulie 2006).
Firefox inregistreaza cresteri similare in toata lumea, dar cu valori ceva mai mici, de exemplu in America de Nord utilizarea a ajuns la 18,7% in iulie 2007 fata de 15,1% in martie.

Tot dupa valoril furnizate de XiTi, in Romania Firefox s-ar situa la o cota sanatoasa de 31,1%, crescind de la 25,7% in martie.

Valorile sint incurajatoare si imbucuratoare pentru competitie si pentru promovarea standardelor web, dar eu nu cunosc pe nimeni care sa foloseasca serviciile XiTi, asa ca voi publica citeva date proprii si le voi compara.

Blogul de fata este nou aparut, nu constituie o mostra buna deoarece are un numar inca mic de vizitatori pentru a fi relevant statistic, se adreseaza unui public specializat si are o puternica influenta din lumea Linux, deci are statisticile inclinate din start in favoarea Firefox, care obtine 55,7%:

[statistici blog]


Un alt site care se adreseaza unui tip complet diferit de public, mult mai generalist (cu subiecte de lifestyle, vedete) acumuleaza pentru Firefox un procent de 26,7%, mult mai in linie cu rezultatele XiTi.
[statistici site]


As putea publica statistici ale altor site-uri personale, dar acestea fiind destinate aproape exclusiv unui public utilizator de Linux inregistreaza valori de peste 73% pentru Firefox.

Trecind mai departe la siteurile altora, iata statisticile (afisate public) ale unui site penibil de gazduire web caruia i-am facut o recenzie, deci cu un profil nu foarte indepartat de acest blog (si cu un numar comparabil de vizitatori). Valorile insumate pentru diverse versiuni de Firefox ajung la 42,7%, lucru normal pentru un site de nisa:
[statistici xdrive]


Si un alt site generalist, de data asta din domeniul auto, www.adv.com.ro recenzat si el de curind. care insumeaza pentru Firefox 26,3%, o valaorea foarte apropiata de cea gasita de mine la un site generalist:
[statistici adv]


Concluzionez spunind ca Firefox este intr-o crestere evidenta a coteti de piata, ca tendintele de crestere sint vizibile, chiar daca numerele absolute nu trebuie luate mereu ca atare.

vineri, iulie 13, 2007

Site bilingv si steaguri

 PDNota: imaginile cu steaguri incluse in acest articol sint distribuite ca Domeniu Public (Public Domain) deci pot fi folosite fara nici o restrictie.

In functie de destinatia unui site poate fi nevoie ca acesta sa ofere continut unei categorii mai largi de cititori, vorbitori de limbi diferite, deci se impune ca paginile sa fie scrise in limbi diferite.
Pentru siteurile din Romania cazul cel mai des intilnit este cel bilingv, scris in limba romana si limba engleza, caz simplificat la care ma voi rezuma in continuare. Pentru un site scris in mai multe limbi, sau in alte doua decit romana si engleza, consideratiile ramin valabile si se poate proceda identic.

Specificarea limbii prin text


Cea mai simpla metoda este ca in paginile in limba romana sa se adauge (de preferinta in partea superioara, pentru a fi usor vizibil) un link textual catre varianta in limba englea a paginii, iar in paginile in limba engleza un link catre corespondentele lor in romana.

Este neprofesional si ar fi bine sa evitati sa puneti link numai catre radacina siteului in cealalta limba in loc de pagina corespondenta. In cazul unui site dinamic puteti refolosi variabilele de sesiune sau cookies pentru a identifica pagina corespondenta.

Un amanunt mic dar important este limba in care scrieti aceste linkuri: in pagina in romana trebuie sa puneti "English" iar in vea engleza "Romana;", deci de fiecare data sa folositi limba cealata, pentru a usura accestul celor care nu inteleg limba curenta a paginii.

La un site multilingv, cu mai mult de 3 limbi pentru fiecare pagina, pentru a cistiga spatiu putei folosi un element Select:

Versiune in limba:

Specificarea limbii prin imagini, folosind steaguri


Din dorinta de a crea un aspect mai placut dar si pentru ca o imagine poate fi mai usor identificata decit un text, de multe ori se foosesc si iconuri cu steaguri reprezentind limba, ca de exemplu:

sau:

Este foarte important sa nu folositi numai steagurile, fara text, este posibil ca acestea sa nu fie indeajuns din diverse motive: vizitatorii sufera de o boala a vederii si nu pot distinge culorile, vizitatorii sint nevazatori si folosesc un cititor de text, vizitatorii folosesc un browser text si nu unul grafic, vizitatorii nu cunosc steagurile diverselor tari. Daca din cauza layoutului sinteti nevoiti sa nu puneti si text, aveti mare grija la etichetele ALT si TITLE, care nu trebuie sa lipseasca.

O alta problema a folosirii steagurilor este de natura politica: steagurile nu reprezinta limbi sau natiuni, ci state, care sint entitati politice. Un exemplu elocvent este limba engleza, ce veti folosi: steagul SUA, tara vorbitoare de limba engleza din care veti avea probabil cei mai multi vizitatori? Steagul Marii Britanii, tara din care provine limba engleza (dar in care se vorbesc si alte limbi - galeza, scotiana, irlandeza)? Steagul Angliei, locul de origine al limbii, dar care nu este o tara ci o parte din Marea Britanie? O combinatie intre acestea (voi vorbi putin mai tirziu despre combinatii)?
Pentru a adinci si mai tare problema, exista cazul in care limba (engleza, de exemplu) este limba unui fost stat colonialist si identificarea limbii cu steagul poate provoca resentimente politice in fostele colonii ce o folosesc ca limba oficiala.
Un alt exemplu, de care este mult mai putin probabil sa va loviti in practica, este dat de China si Taiwan. China nu recunoaste existenta statului Taiwan si va va interzice folosirea steagului acestuia intr-un produs destinat publicului chinez (va trebui sa bazati distinctia in functie scrierea in limba chineza in mod simplificat si respectiv traditional).

Sa trecem la partea colorata, la imagini, iata steagul Romaniei, care este unic si nu ar trebui sa ridice probleme:
romania

Pentru limba engleza iata trei steaguri - britanic, american si englez:
united kingdom united states england

In incercarea de a evita problema politica, uneori se prefera folosirea unei cobinatii de steaguri, fie jumatate britanic si jumatate american, fie jumatate englez si jumatate american:
english english

Puteti descarca sursele imaginilor in format vectorial (SVG), pentru a putea face modificari, a schimba dimensiunea sau chiar a crea steaguri noi: Romania, Anglia, Marea Britanie, SUA si combinatiile UK/USA si Anglia/USA. (pentru editarea SVG recomand Inkscape)

Se observa ca steagurile au fost simplificate (la cel al SUA am redus numarul de stele si de dungi) pentru lizibilitate mai buna si am facut culorile mai stralucitoare pentru a iesi mai bine in evidenta. Puteti edita si inlocui cu culori mai apropiate de cele oficiale daca doriti.

Puteti folosi sursele in format vectorial pentru a obtine imagini de alte dimensiuni, dar la miscorare rezultatul va arata foarte incetosat si va trebui optimizat la nivel de pixel (intr-un program de grafica raster cum ar fi Gimp). Iata aici un set de imagini optimizate pentru dimensiunea de 16x11 pixeli (steagurile combinate sint mai greu de identificat in aceasta forma):
romana english english english english english

Optimizarea la nivel de pixel este o operatie migaloasa, voi face disponibile imagini optimizate si pentru alte dimensiuni daca cititorii vor fi interesati de acestea in functie de comentariile la articol.

Dincolo de steaguri


Poata sa apara si ideea combinarii textului cu steagurile, pentru a crea niste iconuri mai putin incarcate politic, dar din pacate rezultatul nu este foarte usor de identificat:
romana english


In incheiere voi aminti inca o data necesitatea adaugarii textului pe linga imagini si a etichetelor ALT si TITLE.

PDNota: imaginile cu steaguri incluse in acest articol sint distribuite ca Domeniu Public (Public Domain) deci pot fi folosite fara nici o restrictie.

Nota: articol sindicalizat si la Dioanad Webdesign.

Progres: Crearea websiteurilor SVG cu Inkscape

Cu aproape o luna in urma am scris despre acest experiment: se creaza un website in SVG folosind exclusiv Inkscape, se pune pe web, se agauga un numar mare de linkuri catre el, apoi se asteapta pentru a vedea daca si cum este indexat de motoarele de cautare (in special de Google, dela care asteptarile sint cele mai mari).
Rezultatele ar fi putut fi prezentate mai de mult, dar o gresala prosteasca a general intirziere.

Gresala prosteasca

Pentru a servi un site in intregime ca SVG trebuie pus un fisier SVG (index.svg in cazul de fata) ca DirectoryIndex in configuratia Apache. Din cauza lipsei de acces la httpd.conf, a fost folosit .htaccess, ceea ce este in regula.
Nu la fel de in regula a fost prostia autorului: la citeva zile dupa ce siteul a fost pus online, avind nevoie de un fisier .htaccess in alt subdomeniu, l-a folosit pe cel din subdomeniul SVG ca template. Facind managementul fisierelor cu drag and drop folosind Nautilus peste SSH, acesta a fost mutat in loc de a fi copiat, si directorul a fost expus timp de citeva zile fara a avea un fisier index. Suficient pentru Googlebot, care deja de citeva zile tot incerca sa il indexeza, datorita multimii de linkuri postate.

Concluzie

S-a ajuns la concluzia asta dupa numai o saptamina, dar s-a asteptat o intreaga luna in inceracrea de a repara gresala descrisa mai sus. Concluzia este: nici un motor de cautare important nu indexeaza un site facut complet in SVG, nu va urma linkurile din acesta si nu va include textul.

Logurile arata un numar mare de vizite de la spideri: Googlebot, Yahoo Slurp, MSN Bot, chiar si de la botul Baidu, dar tot ce fac acestea e sa ceara radacina siteului ("/") si eventual robots.txt, deci linkurile nu sint urmate. (robots.txt a fost lasat gol intentionat, scopul experimentului a fost sa se vada ce fac motoarele de cautare prin propriile mijloace).

In interiorul paginilor SVG au fost puse citeva stringuri unice, pentru a efectua mai tirziu cautari pe baza lor. Bineinteles ca aceste cautari nu returneaza nici un rezultat, paginile nu au fost indexate si nu e poate face cautare full-text.

Google Webmaster Tools spune "Googlebot last successfully accessed your home page on Jun 19, 2007", ziua in care nu a existat .htaccess si index.svg nu a fost servit ca DirectoryIndex.

Multumiri

Proiectul a generat mult interes, au fot postate multe linkuri catre acest experiment si in consecinta au fost facute multe vizite de catre diversi boti. Multumiri tuturor!
Dar nici o multumire pentru motoarele de cautare, care nu sint capabile sa indexeze pagini facute cu SVG, a un standard W3C. Sa va fie rusine!

miercuri, iulie 11, 2007

Flashturbare - definitie

Deseori pe acest blog folosesc termenul flashturbare, exista chiar si o sectiune de articole, asa ca o definitie probabil se impune.
Flashturbare este traducerea din limba engleza a termenului flashturbation, o concatenare intre Flash si masturbare, care ilustreaza tendinta narcisista a unor designeri web de slaba calitate care, extaziati de excesul de efecte gratuite realizate in Flash ignora principii elementare ale designului web si produc ca reultat niste pagini care arata "frumos" dar produc o experienta oribila utilizatorilor si deservicii clientilor, indirect prin efectul asupra utlizatorilor sau direct prin efectul asupra motoarelor de cautare sau directoarelor web.

luni, iulie 09, 2007

Articole despre religie: de evitat sau de folosit?

In general acest blog s-a referit in cele mai multe cazuri la forma si mai putin la fond, adica la continut, care este mai important pentru un site decit prezentarea, asa ca azi ma voi referi la continut: sint subiecte, cum ar fi religia sau politica de evitat sau de folosit? Ele vor aduce cititori, dar vrei cu adevarat acesti cititori?

De curind a fost publicat pe blog-ul lui Nicu un articol care pune problema religiei si a efectelor daunatoare ale acesteia asupra societatii.

Asa cum ara de asteptat, dupa articol o multime de zeloti fundamantalisti au inundat comentariile articolului, incercind sa isi impuna vederile crestine, sa reduca autorul la tacere sau chair sa inchida blogul.

O concluzie care se poate trage de aici este ca un articol care exprima o opinie puternica pe teme religioase va genera efecte puternice si discutii. La fel se intimpla si cu articolele politice, dar la cele religioase efectul este mai amplu, zelotii din toata lumea vor sari sa combata pe cind disputele politice se pot adresa numai unui pblicic local

Ca urmare a acestui gen de reactii unii oameni pur si simplu se feresc sa scrie pe blog orice despre religie sau despre politica. Altii aleg intentionat sa o faca. Este alegerea fiecaruia. Sfatul meu este ca nu trebuie sa pornesti la asa deva decit daca te simti in stare sa rezisti asaltului.

Nota: exista informatii ca acutorul articolului ar fi incercat cumva sa transmita si un mesaj incapsulat in articol pentru un cititor anume care exceleaza in ipocrizie crestina.

Cititi articolul in intregime (tradus in limba romana) laolata cu comentariile vizitatorilor si raspunsurile autorului articolului la acestea (de asemenea traduse in limba romana).

vineri, iulie 06, 2007

Ghiduri de grafica: creare stampile cu Inkscape

stampila stampila stampila


Folosind Inkscape se creaza o imagine care simuleaza o stampila clasica din cauciuc. Se poate folosi de exemplu pentru a crea impresia unei stampile postale ca metafora pentru email.

citeste mai mult