Iconuri web pentu evenimente

Puteti descarca liber un set de iconuri creat pentru WorldLabel.com ce acoperta diverse evenimente, sarbatori si ocazii, cum ar fi craciun, aniversare, ziua mamei, anul nou chinezesc etc.

Imaginile sint distribuite ca Domeniu Public, deci pt fi folosaite care nicio restrictie.

Noi traduceri la tutoriale de grafica

Dupa o lunga perioada de inactivitate, sub pretextul unei aniversari pagina cu tutoriale de grafica vine cu citeva noi traduceri:

Fotografie steampunk;

Mecanisme cu roti dintate;

Benzi desenate.

Toate sint cam "de nisa" dar explica tehnici care pot fi folosite si in multe alte cazuri.

Cel mai tare site pe care l-am vazut vreodata

... sau ce se intimpla cind nu gazduiesti pe propriul site nici macar o singura imagine folosita si se mai intimpla sa ajungi si popular intr-o retea de bookmark social.

Cele 10 porunci

Am dat peste un articol intitulat atractiv The 10 Commandments of Web Design, adica pe romaneste Cele 10 porunci ale designului web. Bineinteles ca nu e o lista perfecta, dar in ansablu mi se pare rezonabila, asa ca voi enumera in contunuare o traducere a titlurilor, cititi articolul original (in limba engleza) pentru textul complet:

• Sa nu abuzezi de Flash
• Sa nu ascunzi continut
• Sa nu inghesui
• Sa nu suprafolosesti reflexiile
• Sa nu iti numesti firma ce activeaza in domeniul Web 2.0 cu exces sau lipsa nemotivata de vocale
• Sa te inchini la altarul tipografiei
• Sa creezi o experienta profunda
• Sa fii social
• Sa imbratisezi tehnologiile confirmate
• Sa faci continutul rege

Frumusetea de a folosi imagini clipart si libertatea oferita de Public Domain

O resursa dedicata Domeniului Public (Public Domain) este pusa la dispozitia oricui, pentru orice fel de utilizare, inclusiv comerciala. Asa ca nu e nici o mirare (si nici un pacat) cind cineva foloseste o asemenea resursa (poate sa fie doar putina lipsa de originalitate, atunci cind vizitatorii dau deste ceva ce au mai vazut si in alte parti - dar nici atunci nu e un capat de tare, ar putea avea chiar efect invers, ca vizitatorul sa perceapa ca pe un element familiar, standardizat) cum ar fi in cazul de fata:

Da... e usor de recunoscut imaginea cu uneltele, arata clasic dar orice parinte isi recunoaste odraslele fara nici o dificultate.

Nu incerc sa fac mare tam-tam legat de imaginea asta (se pare ca e chiar reusita, le-a placut multora, am mai vazut-o si pe alte psite-uri web corporatiste) dar aici e pe pagina web a unuia dintre cei mai mari retaileri de electronice/electrocasnice.

Deci nu va sfiiti, luati cu incredere clipart.

Webcomics

Comics sau comic strip reprezinta ceea ce noi denumim in romana benzi desenate, un format grafic nu atit de popular la noi, comparat cu societatile vestice (SUA, Europa) sau estice (Japonia) dar nici complet necunoscut.
Evident ca transpunse pe web au primit numele webcomics, ca orice altceva, un comics pe web. Uneori sint simple desene, alteori folosesc si capacitatile puse la dispozitie de mediul online.

Exista un numar mare de webcomics-uri, probabil ca toata lumea a auzit de User Friendly, xkcd, Penny Arcade si altele, deci nu o sa vorbesc despre unul vechi si cunoscut, ci despre Fedora Webcomic

Acesta are citeva particularitati care contribuie la originalitatea sa: pe linga versiunea originala in engleza beneficiaza si de o traducere in romana, dar si acces la codul sursa al imaginilor (in format SVG) si elemente primare (personaje, obiecte, cadre) cu care oricine isi poate face propria banda desenata.

Parser pentru feed-uri (fluxuri): SimplePie

Am lucrat recent la un proiect personal (in curind va deveni public) care construia niste pagini web pornind de la continutul unui flux (feed) RSS (de fapt doua, o pagina generata dintr-un RSS si o alta dintr-un Atom) si aveam nevoie de un script (parser) care sa afiseze continutul articolelor.
Nu e deloc dificil sa fi creat un script propriu, dar 1. lenes fiind, 2. preferind sa nu inventez roata si 3. interesat mai mult de continutul paginii, am cautat ceva de-a gata. Exista o multime de scripturi pentru aceasta sarcina, atit de cele care ruleaza in client (JavaScript) cit si de cele care ruleaza pe server (php, perl, python etc.), eu am cautat ceva facut in php, pentru integrare usoara cu restul proiectului.

Destul de repede am dat peste SimplePie, care m-a satisfacut, atit prin usurinta in folosire cit si prin functionalitate. Este publicat sub licenta BSD deci permite folosirea libera inclusiv in proiecte comerciale (proiectul meu nu era unul comercial).

Ca exemplu despre usurinta in utilizare, iata bum se poate integra intr-o pagina, dupa includerea bibliotecii si initializare, bucla principala poate arata cam asa:

        <?php
 foreach ($feed->get_items() as $item):
 ?>
 
  <div class="item">
   <h2><a href="<?php echo $item->get_permalink(); ?>"><?php echo $item->get_title(); ?></a></h2>
   <p><?php echo $item->get_description(); ?></p>
   <p><small>Publicat la <?php echo $item->get_date('j F Y | g:i a'); ?></small></p>
  </div>

Bineinteles, dincolo de asta suporta mult mai multe functii, cum ar fi afisarea de fluxuri multiple, autodescoperirea fluxului dintr-o pagina, a faviconurilor sau afisarea de butoane petnru bookmark social.

Fundaluri uniforme cu GIMP si Resynthesizer

Fundalurile uniforme (seamless backgrounds) sau modele de tapet (tileable textures) sint folosite in designul web, in design, la jocuri in general sau pur si simplu pentru decorarea desktopului. Producerea lor nu este usoara, asa ca voi prezenta o scurtatura: un plugin pentru GIMP care transforma o imagine pentru asemnea folosire.

Plugin-ul Resynthesizer nu face parte din instalarea implicita a GIMP, dar poate fi instalat cu usurinta, avind binare precompilate pentru orice sistem de operare (in Fedora e disponibil pentru instalare cu yum - yum install gimp-resynthesizer).

Iata cum il folosim: luam o fotografie oarecare dinc are vrem sa extragem o mostra pentru a o transforma in fundal, aici am selectat o portiune verde, cu iarba si frunze:

Se pastreaza numai selectia (fie cu crop, fie cu copy/paste intr-o imagine noua) si se aplica filtrul Resynthesize (Filters > Map > Resynthesize):



Am lasat valorile implicite, dar se pot ajusta pemtru un rezultat mai bun:



Dupa aplicarea efectului de re-sintetizare se obtine imaginea:



Care se paote folosi ca fundal uniform:



Pluginul se poate folosi si in alte scopuri, cum ar fi stergerea unor obiecte din imagini (cred o sa scriu despre asta alta data) sau transferarea unor texturi dintr-o imagine in alta.

Inkscape 0.46

Nu am obiceiul, si sper nici sa nu il capat, de a scrie cite un post inutil pentru orice release minor ar diverselor aplicatii.
Dar pentru mine Inkscape 0.46 este o aplicatie importanta, pe care o folosesc zi de zi, pentru grafica, diagrame, machete, ba chiar exista si o categorie speciala de postari despre tutoriale, dintre care multe se refera la Inkscape.

A trecut mult timp de la lansarea versiunii precedente, 0.45, acum mai bine de un an, si in acest rastimp au fost adaugate noi functionalitati, atit de multe incit eu cu mult timp in urma am renuntat la a folosi versiunea stabila si am sarit la ramura development, dar incerc sa imi amintesc si sa enumar citeva: suport nativ PDF, atit pentru export cit si pentru import, ghidaje (guides) si grila (grid) inclinate (permit crearea usoara de imagini izometrice), interfata cu elemente docabile, unealta de umplere, unealta pentru crearea cutiilor 3D, filtre SVG si asa mai departe, puteti citi cele mai multe detalii in Release Notes.

Utilizatorii de Fedora vor gasi noua versiune in Fedora 9, care va fi lansata la sfirsitul lui aprilie-inceputul lui mai (daca sint nerabdatori, chiar in Rawhide sau in versiunea Beta care va deveni publica putin mai tirziu in cursul zilei de azi), ba chiar mai mult: innumai citeva zile vor avea actualziarea si in Fedora 8. Binare pentru Windows si OS X sint disponibile la Sourceforge, iar pentru alte distributii Linux care apar in aceaste primavara, probabil se vor gasi si acolo.

Designul unui site este ca...

O foarte raspindita formulare, atribuita lui Michael Sinz spune: "Programming is like sex: one mistake and you have to support it for the rest of your life."

Eu as extinde asta si la conceperea unui site web si as parafraza: crearea unui site web este ca viata sexuala, daca faci o gresala va trebui sa o suporti toata viata (sensul de "suport" nu este acela de a trai cu vinovatia morala ci de a asigura suport, intretinere).

Hai sa incercam si o ilustrare practica: la lansarea colectiei de tutoriale de grafica, ideea a fost ca sint tutoriale scise in limba romana, pentru utilizatori care vorbesc limba romana si, evident, fac cautari pe web in limba romana folosind motoare de cautare destinate romanilor. Si concluzia logica a fost sa se intituleze sectiunea Ghiduri. Intitularea e importanta intrucit se regaseste in adresa (URL), care in timp a ajuns indexata in motoare de cautare, catalogata in directoare web, cuprinsa intr-o interconectare de linkuri si sindicalizare.

Dar realitatea, ilustrata prin statisticile furnizate de loguri, a aratat ca aceasta concluzie a fost o gresala: e adevarat ca unii oameni cauta ghiduri, dar marea majoritate cauta tutoriale, cuvint care nici macar nu exista in dictionarul limbii romane.

Odata savirsita gresala ce e de facut? Iata citeva solutii posibile:

• se suporta toata viata: se pastreaza denumirea si adresa dar prin mijloace directe (continutul paginilor) sau indirecte (linkuri si denumiri ale linkurilor) se intareste continuu relevanta pentru termenul lipsa din adresa (tutorial). Chiar si acest articol poate functiona ca un asemenea mijloc indirect.
• se recladeste din temelii: se creaza o noua sectiune, cu denumirea si adresa corecta si incet incet i se cladeste reputatia. Dezavanajul este ca se va porni de la zero cu reputatia (PR), linkurile existente for ramine descoperite iar continutul preluat prin sindicalizare va fi pierdut. Dezastru total.
• reconstructie si redirectare: nu numai ca se muta continutul in noua locatie, dar se aplica redirectari (diverse implementari tehnice, de exemplu cu rewrite in configuratia Apache sau redirect in .htaccess) petnru continutul de la vechile adrese. In felul asta continutul sindicalizat va fi afisat in continuare, linkurile vor functiona chiar daca nu mai dau aceeasi reputatie, motoarele de cautare isi vor actualiza informatia dupa o vreme.

Si totul de la o simpla gresala onesta care va avea efect pe toata durata vietii site-ului, adica citiva ani buni.

Nota: o problema oarecum asemanatoare apare atunci cind se actualizeaza un site si se pune problema schimbarii structurii sale - trebuie luata o decizie asupra pastrarii adreselor paginilor existente sau redirectionari, dar despre deja m-am intins prea mult cu povestile pentru azi.

GIMP: efect Polaroid pentru fotografii

Serverul unde este gazduit inca munceste din greu servind zeci de GB zilnic, asa ca poate nu e o idee foarte inteleapta sa mai incarc suplimentar traficul cu inca un tutorial, dar am promis, si trebuie sa ma tin de promisiune (eu asa fac). In plus, trebuie aduse si tutorialele inapoi in matca dupa deviatie.

Revenirea se face cu un tutorial GIMP despre manipularea fotografiilor, si anume obtinerea unui efect Polaroid dintr-o fotografie digitala si prezinta operatii de baza cu layere, canvas (suprafata imaginii), umbre, rotire si deplasare de selectii si filtre de deformare (distorsiune). Suna atractiv?

Sub asediu

De citeva zile am un site "sub asediu", ceea ce se numeste efect Slashdot, dar cu citeva diferente: sursa de trafic nu este /. ci citeva televiziuni si ziare romanesti (mai ales televiziunile), iar invadatorii nu sint o mare de geeks ci casnice disperate, fete batrine disperate si retardate disperate [*].
Partea rea este ca "atacul" se prefigureaza a mai dura inca una sau doua saptamini. Cind se mai linistesc apele voi reveni cu detalii si o serie de invataminte pe care le-am tras din aventura asta.

[*] - stiu ca nu trebuie sa generalizez si de asemenea stiu foarte bine ca exista si exceptii, dar acestea sint putine si se pierd intr-o mare care te face sa te poti stapini cu uriasa dificultate de la generalizari.

Carcalaci Pac-Man cu Inkscape

Saptamina trecuta am pacatuit cu un tutorial Inkscape offtopic, despre desenarea unui set de grafica pentru jocuri RPG, mai pacatuiesc o data acum vorbind despre jocuri, in speta Pac-Man, dar promit ca voi ispasi, saptamina viitoare sau cel mult in doua saptamini voi reveni cu un tutorial GIMP care sa se incadreze coerent cu celelalte tutoriale si cit de curind vor apare si niste postari in topicul blogului.

Tutorialul e simplu: prezinta modul cum se poate desena (folosind putina editare de noduri, elipse, gradienti si blur) un carcalac pentru jocul Pac-Man (unul dintre jocurile care au facut istoria).

De data asta vine insotit si de un screencast (din pacate Flash si cu calitate slaba, fiind gazduit la YouTube):

Urmind pasii din tutorial a fost create un numar de imagini, disponibile ca Public Domain in colectia de clipart, iata o mostra:


Si la final o provocare: uitati-va la colectie, vedeti cu ce ticalos sau ticaloasa va identificati, daca nu gasiti nici unul cititi tutorialul si creati-va propria imagine de ticalos (sau ticaloasa, dupa caz).

Cum se fabrica: Crearea unor elemente pentru harti RPG cu Inkscape

Nu numai ca sint offtopic vorbind din nou despre setul de grafica pentru harti RPG dar de data asta bat si cimpii despre cit de dificila a fost decizia de a scrie tutorialul Inkscape pentru realizarea unor asemnea elemente.
Chiar a fost o decizie dificila, articolul vine in contradictie cu mai tot restul paginii de tutoriale, o directie spre care nu ma voi indrepta, doar o abatere minora mai apare din cind in cind. Voi reveni pe calea cea dreapta cit de curind :p

Pe scurt, pentru cei care nu vor sa citeasca intregul articol iata o schema descriptiva:

Dar recomand totusi sa cititi si chiar sa descarcati imaginile clipart.

Testati cu versiuni beta ale browserelor?

Cred ca urmatoarea conversatie de pe o lista de mail este graitoare si nu are nevoie de nici un comentariu suplimentar:

>> - an entire row of buttons at the top is aligned incorrectly (I use a
>> >> beta of Firefox 3), see: http://screenshot_of_the_issue
> >
> > Wow, you're the second, i didn't test with firefox 3 and IMHO, it
> > doesn't matter.
> > This is a beta and it doesn't make sense to me working with a beta
> > software to develop something.

Nope, this is a wrong approach. What matters is if the problem is caused
by a bug in the browser in in the site layout. In a few months FF3 will
be distributed to millions of users, so the bug should be solved, either
in your website or in Firefox.

Set de grafica pentru jocuri RPG sau Unde sint orcii de alta data?

Trebuie sa incep prin a-mi cere scuze de doua ori: stiu ca am facut o gresala in titlu repetind "jocuri" si "RPG" (Role Playing Games), dar asa se intimpla cind traduci din engleza si in romana nu exista termeni potriviti (eu nu cred ca RPG, ca titlu al unui gen, ar trebui tradus). Si de asemenea stiu ca o oarecum offtopic subiectul aici, dar sint convins ca multi citori sint interesati de "free stuff" si grafica, asa ca poate nu e chair atit de offtopic.

Cred ca e destul de evidenta disperarea unuia care de multa vreme "nu s-a mai batut cu orcii" (da, asta e pluralul corect, nu "orcile" cum sustine altcineva) in crearea unui set de grafica pentru jocuri de tip RPG (iar ma repet) sau strategie cu tema fantastica (fantasy).

Imaginile de tip clipart sint disponibile cu codul sursa in format SVG sub licenta Public Domain in galeria cu elemente pentru harti RPG a colectiei de clipart (aici sint prezentate numai citeva mostre).

Download placut!

Spameri si ofertele lor de webdesign

Cu vreo luna in urma scriam despre spameri si ofertele lor penibile de webdesign. La vremea respectiva din comoditate nu am facut ceea ce trebuie, si anume sa ii raportez intr-un RBL (Realtime Blackhole List), am facut-o abia acum, cind am sesizat un alt spam provenind de la acelasi server, si de la aceiasi "designeri".

Daca i-as fi raportat la vremea respectiva as fi ratat ocazia de a scrie acest articol in care prezint oferta lor detaliata dupa tipul de site (copy/paste). Nu sint de remarcat tarifele, care nu sint iesite din comun pentru tipul acesta de lucrare - citeva modificari minore pe un template luat gratis din alta parte - ci duratele de realizare (site intr-o ora? intr-o ora nici nu apuci bine sa intelegi despre ce e vorba in afacerea clientului pentru a o prezenta corect sau 3 ore pentru un site dinamic - dar testarea?) si diferentierea arbitrara intre categorii de exemplu site prezentare 1 ora/ 200 RON si salon masaj 1 ora/ 300 RON. Daca e site de prezentare al unui salon de masaj?

Tip Site	Timp de Lucru	Pret
Site de Prezentare:	1 ora	200 RON
Site Escort:	1 ora	300 RON
Salon Masaj:	1 ora	300 RON
Forum/Blog:	1 ora	400 RON
Ziar Online:	3 ore	900 RON
Motor de Cautare:	3 ore	900 RON
Site Promovare:	3 ore	900 RON
Mall Online:	3 ore	900 RON
Magazin Virtual	3 ore	1.300 RON
Agentie Imobiliara	3 ore	1.300 RON
Site Anunturi	3 ore	1.300 RON
Director Web	3 ore	1.300 RON
Dealer Auto	3 ore	1.300 RON
Site E-jobs	3 ore	1.300 RON
Site Matrimoniale	5 ore	1.700 RON
Site Licitatii	5 ore	1.700 RON
Portal Licitatii	24 ore	2.700 RON

Magazine online

Am cumparat de curind un echipament wireless mai "exotic", adica unul mai scump in clasa lui de produse deci in consecinta mai greu de gasit. Am cumparat o bucata de la unul dintre marile magazine online, s-a dovedit ca pentru zona ce trebuie acoperita e nevoie de mai mult si am mai cumparat inca unul dupa care in final a aparut si nevoia celui de-al trieilea, dar epuizasem stocul de la magazinul respectiv :p
Asa ca a trebuit sa fac o cautare mai "riguroasa" pornind de la price.ro, ocazie cu care am sesizat fenomenul despre care vreau sa vorbesc azi.

Am mers la price.ro, am cautat dupa model si am obtinut o lista cu 15-20 magazine care au produsul in oferta. Deschizind paginile fiecarui magazin pentru a verifica disponibilitatea dar si seriozitatea vinzatorilor (atit cit se poate dintr-o simpla privirepe site) am observat ca nu mai putin de 5 (cinci) dintre acestea aveeau acelasi numar de telefon, bineinteles aceleasi preturi si aceleasi nume in fata adreselor de mail pentru contact (totusi numarul de telefon mi-a sarit primul in ochi), fiind in mod evident front-end-uri diferite pentru aceeasi baza de date si apartinind aceleiasi firme.

Am incercat sa imi explic scopul: pare sa fie o manevrare a price.ro, pentu cei care aleg pur si simplu un furnizor la intimplare si fiind astfel listati de mai multe ori exista o probabilitate mai mare de a fi alesi. O alta posibila explicatie ar fi o tentativa de manevrare a motoarelor de cautare, optimizind diveresle site-uri pentru diverse keyword-uri, in pofida unui PR mai mare care s-ar fi putut obtine prin consolidare. Si nu in ultimul rind, s-ar putea explica prin personalizarea fiecarui site pentru o categorie specifica de potentiali cumparatori prin alegerea culorilor, a punerii in pagina, a logo-ului si a numelui. Totusi tind sa merg pe explicatia cea mai simplista, adica o manevrare a price.ro.

Este bine, este rau? Daca asta le aduce mai multe vinzari, din punctul lor de vedere este bine, dar trebuie tinut cont si de efectul de recul pe care il poate produce unor potentiali cumparatori ca mine, care simt o tentativa de manevrare si aleg sa cumpere din alta parte. Important pentru vinzator este insa ca numarul de clienti cistigati sa il depaseasca pe cel al clientilor pierduti si nu am datele sau pregatirea necesare pentru a trage o concluzie si a recomanda pentru sai impotriva unei asemenea abordari, ramine doar citeriul moral unde am o obiectie.

Spam cu creare site-uri de escorta

Filtrele antispam nu sint infailibile, ii mai scapa oricui cite un asemenea obiect in inbox, asa ca in dimineata asta m-am pomenit cu un spam (scris in limba romana, cred ca asta l-a mai ajutat un pic sa treaca de filtre) de la o firma care realizeaza site-uri web pentru servicii de "escorta".
Curiozitatea m-a indemnat sa fac un lucru care trebuie evitat: m-am uitat pe link-ul din mesaj (trebuie evitat pentru ca in felul asta le demonstrezi eficienta campaniei de spam si o vor face si alta data), bineinteles avind grija ce refere-uri trimit.

Din moment ce scriu despre asta e evident ca ce am gasit acolo mi s-a parut demn de poemnit pe blog: in primul rind un site destul de jenant pentru cineva care pretinde a fi in bransa inca din 2001 (deci se presupune ceva acumulare experienta si capital, daca nu cumva e pusa din burta valoarea, dupa cum sugereaza un whois), erori la validare si lauda greu de crezut cu "peste 500 de escorte si-au realizat site-ul la noi!".

Dar nu despre asta vroiam sa vorbesc, ci despre oferta si tarife, pe care le gasim listate:

• realizare de site-uri "profesionale" de 6 pagini in 24 ore, pret 500 RON (profesionale = exista niste template-uri, pe care le si listeaza intr-o pagina speciala, la care modifica putin textul si gata pagina);
• gazduire la 65 RON/luna (site-uri de tipul asta se pot tine probabil cite 100 pe un cont de 7$/luna);
• promovare la 1500 RON - aici e o mare teapa pe care o iau necunoscatorii, crezind ca trebuie sa plateasca ceva pentru a fi listati in Google: nu-i rau 1500 RON pentru citeva minute de lucru;
• sedinte foto "profesionale" la 900 RON, care includ (foarte important!!!) si prelucrare in Photoshop;
• ca bonus, &consultanta": instalari de Windows sau orice program, de poate pica un ban...

Am senzatia ca preturile astea sint orientative si doar un punct de plecare pentru negociere, asa cum sugereaza "oferta speciala" care ofera toate de mai sus la 1700 RON (cred ca si asta mai paote sa scada la jumatate).

Deci escortelor: superoferta! :D

Mockup (macheta)

Zilele trecute am publicat citeva borduri pentru web si/sau jocuri, azi voi face un pas mai departe: arat tuturor macheta preliminara a interfetei a ceea ce poate fi in viitor un joc (MMORPG) pe web (daca va intrebati, nu programat de mine).
Este o prima macheta, facuta cu scop orientativ, rezultatul final ar trebui sa fie mult diferit:

Multi designeri prefera sa faca asemenea machete (dupa care se implementeaza mai tirziu codul HTML) in Photoshop sau GIMP, eu lucrez cu Inkscape nu numai pentru ca este editorul meu grafic preferat, dar consider ca grafica vectoriala se preteaza mult mai bine pentru aceasta sarcina, diversele elemente sint disponibile ca obiecte pe care le poti edita/reutiliza cu multa usurinta.
Simpatic nu? De cind nu ati mai omorit niste orci? La mine a trecut multa vreme...