AddThis Social Bookmark Button

vineri, august 31, 2007

Amuzament cu sticla si umbre in Inkscape

[GDM]Ma jucam cu citeva zile in urma cu o varianta proprie a schitei pentru tema GDM facuta de Martin folosind suprafete sticloase (cu transparente si umbre), care sint tare la moze zilele astea.

Deci jucindu-ma cu chestiile astea am avut de folosit un truc simplu dar nu foarte cunoscut privind folosirea mastilor, ceea ce mi-a dat ideea de a-l dezvolta intr-un tutorial Inkscape despre sticla si umbre.

glass and shadow

joi, august 30, 2007

Blogroll

Blogroll reprezinta o lista de legaturi catre alte bloguri, afisata vizibil pe un blog, de cele mai multe ori intr-o caseta dintr-un sidebar al paginii principale.
Nu este o practica noua, se poate spune mai degraba ca e un nume nou, "modern", "trendy", "buzzword", "web 2.0", asa ceva se facea inca din zorii internetului, inca dinainte de aparitia motoarelor de cautare, cind de multe ori webmasterii includeau in site cite o pagina numita "Links" unde puneau legaturi catre paginile care li se parau utile sau care pur si simplu le placeau lor. Mai tirziu, odata cu comercializarea internetului a inceput sa se vorbeasca de "link exchange" si acestor legaturi sa li se atribuie o valoare (monetara sau nu).
a
Un aspect important al, folosind din nou un termen "la moda", blogosferei este puternica interconectare a blogurilor, care transmit legaturi si trafic de la o pagina la alta si aici intervine blogroll-ul: un blogger de buna credinta isi va crea un blogroll in care listeaza bloguri cu profil asemanator si cu un nivel de calitate verificat cit de cit, adica link-uri de calitate, utile atit pentru cititor cit si pentru motoarele de cautare (valoarea unui link pentru PR este mai buna atunci cind vine de la un site cu continut apropiat).

Desigur, comercializarea de care vorbeam mai devreme isi arata coltii si exista blogroll-uri cu interes exclusiv materialist, fie pentru a directiona trafic platit fie numai pentru PR, deci aveti grija ce puneti in blogroll, va poate afecta reputatia site-ului.

miercuri, august 29, 2007

O privire rapida asupra uneltei SIOX in Inkscape 0.46 si GIMP 2.4

Cu apropape doi ani in urma cind a inceput sa se vorbeasca despre SIOX (Simple Interactive Object Extraction) s-a generat mult entuziasm si asteptatile create au fost inalte. Acum avind aplicatii publicate sau aproape publicate folosind unealta, putem arunca o privire obiectiva si trage concluzii practice, nu numai vorbi despre demonstratii care pot fi (cel putin partial) aranjate.

 Avind cicluri de publicare rapide (doua noi versiuni in fiecare an) Inkscape a fost prima aplicatie cu o unealta SIOX functionala intr-o versiune publicata, incepind cu in Inkscape 0.44.
Inkscape este o aplicatie pentru grafica vectoriala, asadar a implementat algoritmul in modul sau specific, si anume ca parte a uneltei pentru tracing, care realizeaza conversia din raster in vector, deci rezultatul nu este "pixel-perfect", dar nici nu isi propune asa ceva.
Un alt minus este ca Inkscape va folosi numai fotografia initiala si o singura forma ce defineste regiunea de interes (fara a marca si subiectul sigur), deci rezultatul este departe de a fi perfect iar unealta nu lucreaza cu adevarat interactiv.

Reteta e simpla: se importa fotografia, se deseneaza liber o forma care sa o acopere, se selecteaza ambele si se efectueaza o trasare (trace) dupa culoare:

screenshot


 In GIMP unealta a ajuns chiar mai devreme in ramura de development, dar abia GIMP 2.4 care urmeaza sa fie lansat in curind o va pune la dispozitia unei audiente largi.
Aici exista o multime de optiuni: dimensiuni pentru pensule, margini adaptabile, nivelare si posibilitatea de a marca atit fundalul sigur cit si subiectul sigur, dar dupa ce SIOX si-a facut treaba tot mai trebuie aduse mici ajustari cu uneltele traditionale pentru selectie.

Reteta e ceva mai complexa: se deschide fotografia si apoi se foloseste unealta pentru extragerea subiectului, aceasta va oferi mai intii o unealta te tip lasou pentru marcarea regiunii de interes din jurul subiectului si apoi o pensula pentru mostrele din subiect. Se poate modifica dimensiunea pensulei, se poate mari sau micsora (zoom in/out) imaginea sau chiar deselecta prin stergere. Cind marcarea e gata se apasa Enter pentru a obtine selectarea subiectului, dar tot va fi nevoie de mici ajustari cu uneltele de selectie traditionale:
screenshot


Avind experienta destul de solida cu ambele aplicatii, concluzia pe care o voi trage este evident partinitoare: folosirea SIOX poate arata ca un mare citig de timp pentru unele operatii, dar in final va trebui depusa destul de multa munca pentru a ii imbunatati rezultatele incit timpul cistigat nu e chiar atit de semnificativ, deci pentru mine poate fi considerata mai degraba un truc amuzant.
In ceea ce priveste aplicatiile particulare, la Inkscape chiar s-ar simti nevoia de a putea defini subiectul sigur, altfel rezultate satisfacatoare se vor obtine numai pentru unele imagini, pe cind in GIMP se poate mari/micsora, folosi pensule mai mici (ca la clasica metoda de a folosi Quick Mask) si practic se poate selecta orice se doreste.
Poate pentru vectorizarea imaginilor complexe e mai bine sa se extraga subiectul folosind GIMP si apoi in Inkscape sa se vectorizeze subiectul deja etras.

marți, august 28, 2007

Non-profit

Nu am facut precizarea asta pina acum pentru ca nu a parut necesara dar cred ca i-a venit timpul: Blog de Webdesign este un site non-profit, nu isi propune nici un fel de cistiguri financiare, chiar in mod deliberat a ales sa nu afiseze nici un fel de reclame, nici macar la Firefox prin AdSense, intrucit nu vrea ca aceste reclame sa aduca chiar si cea mai mica umbra de indoiala asupra misiunii sale si a mesajului, mesaj care unepro poate fi destul de patimas.
Asta nu inseamna ca se evita colaborari, aflieri, agregari sau blogroll-uri, chiar au loc asemenea legaturi dar numai cu alte site-uri care au un mesaj comun si coerent, nu din motive comerciale.

marți, august 21, 2007

Bookmark social si trafic

Bookmark social este o modalitate de a salva, clasifica dar mai ales distribui (de aici vine si termenul "social") adrese ale diverselor pagini web. In general este vorba de site-uri in care utilizatorii isi creaza conturi si salveaza adrese, care apoi pot fi folosite de catre alti utilizatori cu gusturi asemanatoare ca si recomandari, Uneori se ofera chiar si butoane pentru adaugarea in bara de unelte a browserelor, pentru a usura salvarea, alteori autorul include in codul paginii (asa cum face si acest blog) un fragment de cod care afisaza un element care usureaza salvarea.

Dar este utila folosirea unui asemenea serviciu pentru promovare? Aruncam o privire rapida la urmatorul screenshot de la Google Analytics apoi revenim cu comentarii:

analytics


Valoarea in sine, de aproape 37.000 vizitatori intr-o saptamina poate sa nu arate asa impresionanta, mult mai semnificativa este cresterea brusca, atribuita aproape in intregime unui tutorial GIMP care in mod nebanuit a ajuns popular pe un site de bookmark social la aproape un an de la publicare.

Prima concluzie care se desprinde, este cinecunoscuta continutul este rege (content is king), doar avind continut de calitate veti genera interesul cititorilor si obtine popularitate.

Un alt lucru care se poate observa cu usurinta este lipsa de calitate a traficului: cititorii se uita la pagina care a fost salvata si in general nu navhigeaza mai departe (bounce rate 39.44%) si rareori revin, pentru ca deja au consumat continutul.

Nu trebuie sa aveti nici asteptari mari pentru o crestere de Page Rank, intrucit de obicei site-urile de bookmark social nu dau link-uri cu PR si nici sa nu asteptati ca aceasta crestere de trafic sa dureze multe zile, se vor termina cititorii sau se vor plictisi de subiect.

Dar in final, cresterea de trafic este o crestere de trafic, aduce creatia autorului in fata cititorilor si asta e scopul unui site non-profit, cum este cel din cazul prezentat.

vineri, august 17, 2007

Userbar pentru semnaturi pe forumuri

Userbar sint imagini in format PNG sau GIF, avind de obicei dimensiunea de 350x19 pixeli, care se folosesc pe forumuri, fiind puse in semnatura pentru a arata afilierea, interesul pasiunile sau priceprea in grafica a utilizatorului.
Pe unele forumuri exista chiar si stiluri bine definite pe care aspectul acestor imagini trebuie sa le respecte (care diagonale, zona iluminata, font).

Iata citeva asemenea imagine pe care le-am facut pentru uz personal pentru citeva forumuri in care postez (le puteti folosi fara restrictie):

[fedora]
[centos]
[inkscape]
[gimp]
[creativecommons]

Daca in viitor voi mai crea si altele, vor fi adaugate in lista deci puteti salva bookmark sau chiar cere in comentarii noi imagini (atita timp cit de refera la o aplicatie FOSS, distributie Linux bazata pe Fedora sau miscare pentru libertatea culturii sau drepturi pe internet).

joi, august 16, 2007

Ordinea de navigare in forme - tab order cu tabindex

Pentru navigarea facila si introducerea cu usurinta a datelor intr-un formular web (<FORM>) este util ca elementele sa fie asezate ordinat si sa se poata sari de la unul la succesorul sau logic prin apasarea tastei Tab.
Tendinta naturala este de a insira elementele formularului de la stinga la dreapta si de sus in jos, sperind ca acestea se vor aseza de la sine si ordinea de navigare cu Tab va fi automat cea corecta. Dar elementele formularului pot fi pozitionate cu CSS sau tabele si atunci ordinea de afisare in pagina nu mai corespunde celei din cod, caz in care navigarea cu Tab este data peste cap.
Pentru specificarea ordinii de navigare se foloseste atributul HTML tabindex, ce se poate aplica urmatoarelor elemente: A, AREA, BUTTON, INPUT, OBJECT, SELECT si TEXTAREA, in urmatoarea structura:

<INPUT tabindex="1" type="text" name="edit1">

Pentru a vedea tabindex la lucru, pozitionati cursorul in caseta "1" din formularul de mai jos si priviti ordinea de navigare (ordinea definita cu tabindex corespunde valorilor din casete):











luni, august 13, 2007

Accesibilitate: accesskey

Pentru accesibilitate este necesar ca navigarea pe o pagina web sa se poata face cu usurinta si fara mouse, folosind numai tastatura. Pentru aceasta standardele W3C introduc atributul accesskey, ce poate fi atasat unui element de tipul A, AREA, BUTTON, INPUT, LABEL, LEGEND, si TEXTAREA. Acesta defineste o tasta pentru apelare rapida (shortcut, acces key) care permite saltul la elementul respectiv printr-o simpla combinatie de taste.

Folosirea de face de forma:

<a href="http://dioanad.info/" accesskey="D">http://dioanad.info</a>

Saltul la aceast punct se realizeaza in Internet Explorer folosind combinatia "Alt+D" iar in Firefox 2.0 "Alt+Shift+D". Nota: in Firefox 1.5 activarea se facea de asemenea cu "Alt+D", dar s-a introdus suplimentar modificatorul Shift pentru a elimina conflictul cu shortcut-urile dinmeniurile aplicatiei, care se activeaza cu combinatii Alt+.

Puteti experimenta suplimentat cu navigarea folosind acceskeys (tastele N,P si D):

Nume:
Prenume:
D: http://dioanad.info

vineri, august 10, 2007

Imagemap creat vizual cu GIMP

In unele cazuri este mai rapid sa faci o singura cerere catre server si sa descarci o singura imagine decit sa faci mai multe cerereri pentru imagini individuale, generind astfel mai multe conexiuni si o incarcare mai lenta a paginii. Atunci se foloseste image map, definindu-se zone dintr-o imagine si atribuindu-se acestora actiuni specifice, cum ar fi activarea unui link, descarcarea unui document, lansarea unui script. Un alt avantaj al folosirii image map este acela ca designul zonei respective este facut exclusiv grafic, fara HTML/CSS (atentie numai sa nu abuzati si sa realizati o pagina prea mare ca dimensiuni din cauza includerii multor imagini mari).

Efectiv este vorba de o lista de coordonate care definesc niste suprafete dintr-o imagine si actiunile (de obicei linkuri) atasate acestora. Tipurile de poligon care se pot folosi sint: cerc (cyrcle), drepthunghi (rectangle) si poly (poligon).

Pentru ca este destul de dificil de masurat si creat lista de coordonate, cel mai des sint folosite dreptunghiurile, dar cu ajutorul instrumentelor vizuale, ca cel prezentat aici, este foarte usor de definit o zona poligonala, doar cu interactiune din mouse.

GIMP furnizeaza un filtru numit evident ImageMap (Filters > Web > ImageMap...) din care se pot defini facil aceste suprafete, modifica nodurile, atasa linkuri si scripturi si salva ca HTML:



Este posibil chiar sa aveti si image maps care se intersecteaza, caz in care este importanta ordinea acestora pe axa Z, ordine care bineinteles poate fi stabilita din program.

In final rezultatul va arata si va functiona cam asa:

Poate cu alta ocazie voi reveni asupra subiectului, adincindu-l cu efecte roll-over care se pot adauga la un image map cu CSS sau JavaScript (nu este posibil doar cu HTML).
loosereasaloosereasabwitchdioanad

joi, august 09, 2007

Sa ridem cu AdSense: Viata lui Isus? Munca la domiciliu? Genial!

Initial acest blog nu si-a propus sa acopere si o categorie funny, dar am dat peste ceva prea amuzant si nu am putut rezista tentatiei de moment si a imparti cu restul lumii.

Iata un screenshot al unui site web peste care am dat din intimplare si reclamele geniale care sint atasate contextual de AdSense: "Viata lui Iisus" (oare o fi vorba de convertirea pacatosilor?) si "Lucru la domiciliu" (nimic mai potrivit, sigur la domiciliu se presteaza):

adsense

marți, august 07, 2007

Reflectare imagini cu Inkscape: continuare

Recent a fost prezentat un tutorial despre creare de reflexii cu Inkscape.
Intre timp autorul a descoperit un truc foarte interesant care simplifica procesul si permite realizare unor imagini de foarte buna calitate, iata o diagrama simplificata a procesului:

diagrama


Artcolul original a fost actualizat pentru a include si acest truc.

GIMP si Py-Slice: impartirea in bucati (slicing) a unei imagini pentru web

O problema posibila este incadrarea unui paragraf intr-un chenar, de forma urmatoare:

border

Intr-un asemenea caz se creaza chenarul intr-o aplicatie de grafica (sa zicem The GIMP sau Inkscape, dar la fel de bine poate fi Photoshop sau Illustrator), dupa care imaginea se sparge in bucati (slices) si acestea se asambleaza foosind CSS/HTML.

Pentru slicing vom folosi unplug-in al GIMP, Py-Slice. Acesta este scris in Python si s-ar putea sa nu fie disponibil implicit in versiunea de Windows (articolul a fost scris sub Linux, unde este disponibil implicit).
Se importa imaginea in GIMP. Am adaugat un layer transparent pentru a avea ghidajele mai vizibile in pasul urmator:
border border

Se adauga ghidaje care vor delimita toate modificarile de forma ale imaginii, precum si toate portiunule repetitive (muchiile):
border

Dupa care se foloseste filtrul Py-Slice (Filters > Web > Py-Slice...):
slice

Se pot alege destinatiile in care se salveaza imaginile taiate, un HTML autogenerat precum si formatul de imagine dorit.

Iata cum arata HTML-ul generat:

Transformati layout-ul intr-unul bazat pe CSS, eliminati elementele care nu sint necesare, puneti imaginile ca background, pe cele repetitive le repetati, pe celelalte nu, scopul acestui articol este limitat la slicing, nu isi propune sa intre in HTML/CSS.

vineri, august 03, 2007

Truc grafica: Timbre postale in Inkscape

[timbru]Un nou truc Inkscape in colectia de ghiduri de grafica, de data asta despre crearea de timbre postale cu Inkscape.
Nu este direct legat de designul web, dar un truc grafic oricind poate face diferenta intre o pagina plictisitoare siuna atractiva iar tehnicile descrise in tutorial pot fi utile si in alte ocazii.

Se pot obtine timbre te toate tipurile, culorile si dimensiunile vrute:

[timbre]


Citeste mai mult

miercuri, august 01, 2007

Flashturbare si motoare de cautare: site duplicat

Am vorbit in numeroase ocazii despre flashturbare (flashturbation) si voi mai vorbi in continuare pentru ca efectele acesteia sint foarte daunatoare pentru un site.
Unul dintre efecte, de care voi vorbi in acest articol, este generat de faptul ca nu tori utilizatorii pot citi continutul Flash. Bineinteles, dintre utilizatorii care acceseaza paginile web folosind un desktop si un browser, doar un procent foarte mic nu poate accesa continutul Flash, un procent atit de mic incit de multe ori este considerat (in mod gresit zic eu) insignifiant si nu este luat in consideratie. Dar mai exista o categorie de utilizatori care nu pot citi continutul Flash, acestia sint putini dar foarte importanti: motoarele de cautare. Acestea nu citesc si nu indexeaza continutul Flash, iar un site care nu este indexat in motoarele de cautare se poate considera ca nu exista.

In urma cu citiva ani "moda" era sa se faca o pagina de intrare in site cu doua linkuri: unul catre versiunea Flash si altul catre cea HTML. Din fericire (fericire pentru utilizatori, nefericire pentru autorii acestor siteuri) motoarele de cautare penalizeaza paginile care nu pot fi indexate, deci nu e fiabil sa ai doua versiuni ale site-ului, unul Flash si altul HTML, pentru ca cel HTML va fi preferat in rezultatele cautarilor, in pofida dorintei autorului de a promova cealalta versiune.

De asemenea, nu este o idee prea fericita sa servesti doua versiuni ale aceleiasi pagini, server-side dupa User-Agent, una petnru motoare de cautare si alta pentru public, o asemenea practica poate duce la delistarea din Google.

Ce pot face in acest caz flashturbatorii? Unii aleg calea corecta si renunta, dar nulti altii incearca sa gaseasca ocolisuri, cum ar fi sa includa in pagina atit continutul Flash dar si pe cel HTML care sa serveasca keyword-uri si linkuri dar sa fie invizibil la o accesare normala.
Iata un exemplu, la inovatika.com, versiuni fara si cu Flash:

[fara flash] [cu flash]

[fara flash] [cu flash]

Aruncind o privire codului vom vedea si ce se intimpla in interior:
[flash]

Solutia este posibila pentru ca ne aflam in fata un site foarte sarac in continut asa ca tot textul din Flash a fost duplicat in HTML si toate legaturile de navigatie au fost de asemenea duplicate cu linkuri in HTML. Bineinteles, a fost nevoie de crearea de pagini suplimentare corespondente fiecarei sectiuni din partea de Flash, dar pentru un site atit de gol de continut efortul este minim.
Ca implementare tehnica, in exemplul de fata codul HTML este ascuns si inlocuit cu animatia Flash folosind un script imens care se distribuie gratuit pe internet: SWFObject.

Inchei cu o cireasa pe tort: implementarea complet neprofesionista folosita in exemplul de mai sus face ca in orice pagina ai intra, fie ea portofoliu, echipa sau orice altceva, sa iti fie servita animatia Flash completa, incepind cu home, deci deschizi pagina portofoliu, unde vezi continutul home si trebuie sa apesi din nou portofoliu, de data asta in Flash.

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