Blocare referer pentru impiedicarea furtului de bandwidth - rescriere din .htaccess

Am vorbit recent despre licentele Creative Commons, care permit libera distributie pe net, dar care, in functie de licenta specifica, impun si citeva restrictii, cum ar fi mentionarea autorului original sau pastrarea unei licente libere. Acum voi trece la pasul urmator: ce se poate face daca cineva incalca chiar si generozitatea licentelor Creative Commons, ba chiar mai mult, fura bandwidth folosind hotlinking.

Definitii

• Hotlink este plasarea unui obiect, de cele mai multe ori o imagine, apartinind unui site intr-o pagina web a altui site. Se spune ca al doilea site are un hotlink catre primul site
• Furt the bandwidth (Bandwidth theft) este folosirea unui hotlink cu care autorul site-ului original nu este de acord si se numeste furt deoarece consuma o resursa platita (bandwidth al serverului original) fara a da inapoi ceea ce se cere.

Ce este de facut in asemenea situatii? Se contacteaza "hotul", i se explica incalcarea licentei si se cere intrarea in normalitate. Daca acesta nu raspunde, se pot lua fie masuri legale, fie masuri tehnice. Masurile tehnice sint cele pe care le vom discuta in continuare.

In antetul (headerul) cererii HTTP pentru un obiect (in cazul nostru cel catre care se face hotlink) printre alte informatii se gaseste HTTP Referer, adresa pagini de referinta care cere incarcarea obiectului. In functie de aceasta informatie putem verifica daca este o pagina legitima si permite accesul sau daca nu si tunci imaginea este blocata. Vom merge chiar mai departe, si vor rescrie adresa, pentru a servi "hotului" o imagine jignitoare, care sa il dea de gol. O asemenea imagine trebuie sa aiba o dimensiune de fisier cit mai mica, cum ar fi urmatoarea:

Nota: informatia oferita de HTTP Referer nu este infailibila, ea poate fi blocata sau falsificata de catre utilizatori, dar este cea mai buna informatie pe care ne putem baza.

Si pentru a face situatia si mai complicata, vom bloca numai unii refereri, pe altii ii vom permite, vom bloca doar accesul la fisiere de tip imagine iar blocarea se va face la nivel de director, deci incluzind directive intr-un fisier .htaccess.

Blacklisting

Aceasta este metoda mea preferata: public material licentiat Creative Commons Attribution Share Alike si vreau sa presupun ca utilizatorii sint de buna credinta, asa ca permit accesul tuturor, iar apoi interzic raufacatorii.

Fisierul .htaccess primeste urmatorul continut:

RewriteEngine On
RewriteCond %{HTTP_REFERER} ^http://(www\.)?siteblocat1\.com [NC]
RewriteRule \.(jpe?g|gif|bmp|png)$ hotbandwidth.png [L]
RewriteCond %{HTTP_REFERER} ^http://(www\.)?siteblocat2\.com [NC]
RewriteRule \.(jpe?g|gif|bmp|png)$ hotbandwidth.png [L]

Explicatie:

• prima linie verifica daca valoarea HTTP Referer incepe cu adresa unui domeniu (cu si fara www) blocat
• daca da, si daca tipul de fisier este imagine, se rescrie adresa si se inlocuieste cu imaginea de refuz
• se repeta perechile de linii pentru fiecare domeniu care abuzeaza

Whitelisting

Este o metoda mai stricta: interzice accesul tuturor si permite doar accesul daca HTTP Referer vine dintr-o lista admisa.

Iata continutul din .htaccess:

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(www\.)?sitepermis1\.com [NC]
RewriteCond %{HTTP_REFERER} !^http://(www\.)?sitepermis2\.com [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule \.(jpe?g|gif|bmp|png)$ hotbandwidth.png [L]

Explicatie:

• prima, a doua si eventual mai multe linii in continuare listeaza domeniile care sint acceptate ca referer (cu si fara www)
• linia a treia permite accesul direct la imagine, atunci cind nu s-a trimis nici un referer, poate fi cazul in care autorul a scris direct in browser adresa imaginii
• daca toate conditiile de mai sus sint indeplinite, avem un referer care trebuie blocat, deci daca s-a accesat un fisier imagine se rescrie adresa si se inlocuieste cu imaginea de refuz

Evident ca totusi ar fi de preferat sa nu fie nevoie sa folosim aceste masuri, dar in caz ca nevoia apare, exista mijloace de actiune.

Licente Creative Commons pentru materialele publicate pe web

Orice material publicat pe web, fie el text, imagine, secventa video sau audio apartine implicit autorului sau si este protejat de drepturile de autor/copyright (bineinteles, utilizarea in conditii rezonabile/fair use este permisa).
De multe ori se doreste permiterea unor drepturi suplimentare pentru utilizatori fata de cele prevazute de drepturile de autor,pentru a incuraja distribuirea sau refolosirea ori pentru ca autorul este adept al libertatii culturii si atunci se folosesc licente care garanteaza libertati suplimentare. Cele mai cunoscute licente de acest fel sint licentele creative Commons.

Am constatat ca aceste licente nu sint cunoscute si intelese prea bine in Romania, poate deoarece organiatia non-profit Creative Commons, care a creat aceste licente, nu si-a orientat pina acum campaniile de informare si catre aceasta zona, banuiesc ca asta este explicatia pentru care in repetate rinduri am vazut materiale din acest blog preluate brutal (cuvint cu cuvint, fara creditarea autorului sau link inapoi, ba chiar si cu hotlink pentru imagini). Dupa contactarea celor care au facut preluarea de obicei am intilnit intelegere si deschidere, deci nu ma pot gindi decit la necunoastere.

In mod natural, cred ca o mai buna campanie de informare poate preveni repetarea in viitor a unor asemenea probleme, asa ca voi prezenta in continuare pe scurt principalele licente Creative Commons, licente ce variaza de la libertate aproape totala pina la permisiuni foarte limitate:

• Attribution (CC-BY) permite libera folosire si distributie de opere derivate, inclusiv in scopuri comerciale, singura cerinta este atribuirea autorului initial;
• Attribution Share Alike (CC-BY-SA) permite folosirea si distribuirea de opere derivate, inclusiv in scopuri comerciale, atita timp cit este mentionat autorul original si opera derivata este publicata sub o licenta identica, ce permite si altora folosirea si distribuirea in aceleasi conditii;
• Attribution No Derivative (CC-BY-ND) permite utilizarea si distribuirea, inclusiv in scopuri comerciale, atita timp cit este atribuit autorul original si opera ramine nemodificata
• Attribution Noncommercial (CC-BY-NC) permite folosirea si distribuirea de opere derivate numai in scopuri ne-comerciale si cu mentionarea autorului original
• Attribution Share Alike Noncommercial (CC-BY-NC-SA) permite folosirea si distribuirea de opere derivate, exclusiv in scopuri ne-comerciale, doar cu mentionarea autorului original si numai sub o licenta identica, ce permite si altora folosirea si distribuirea in aceleasi conditii;


• Attribution No Derivative Noncommercial (CC-BY-NC-ND) permite folosirea si distribuirea numai cu mentionarea autorului original si numai a operei nemodificate si numai in scopuri ne-comerciale;
• Public Domain (PD) dedicatia catre Domeniul Public nu este de fapt o licenta, este renuntarea totala asupra oricaror drepturi (in masura in care legislatia locala permite) si neimpunea nici unei restrictii de utilizare sau distribuire, nici macar a mentionarii autorului original. Tot Domeniu Public sint operele foarte vechi, asupra carora nu mai are nimeni dreptur de autor, cum ar fi povestile lui Ion Creanga.

Spre exemplificare, acest blog este publicat sub versiunea 3.0 a licentei Creative Commons Attribution-Share Alike, ce permite distribuirea si crearea de opere derivate atita timp cit este mentionata sursa intiala (se prefea un link, dar acesta nu e obligatoriu) si cu pastrarea conditiilor de licentiere (daca un articol este preluat pe un alt site, e suficient ca pagina preluata sa fie sub licenta CC-BY-SA, nu intregul site).

Creative Commons pune la dispozitie un formular cu care se poate alege cu usurinta licenta optima, acesta din pacate nu este disponibil si in limba romana.

Jocuri pe web - KnigtFight online RPG

E vineri, aproape week-end, asa ca jocurile pe web, un subiect ceva mai relaxat nu este cu totul nepotrivit.

Exista o multime de jocuri care se pot pune intr-o pagina web, cum ar fi joculetele facute in Flash, Java sau JavaScript+HTML, dar acestea nu sint cu adevarat jocuri web, in general pot fi descarcate si folosite offline, intr-un player. Dar exista si jocuri despre care se poate spune ca ruleaza cu adevarat pe web, intr-o arhitectura client-server si sint destul de multe si variate si unele exista de citiva ani buni: managere sportive, simulatoare economice, strategii si altele.

De vreo doua zile am descoperit un asemenea joc: KnigtFight, un RPG online, si inca mi se pare interesant.

KnightFight are cam tot ce poti astepta de la un RPG: crearea unui caracter, abilitati care cresc odata cu experienta, arme si armuri, lupte, prada, misiuni, clanuri.

Un punct forte al jocului este ca iti ocupa atita timp din zi cit vrei tu: il poti lasa uitarii zile de-a rindul, poti juca numai citeva minute pe zi sau iti poti umple toata ziua cu el, iar un alt punct forte este posibiltatea de a-l juca in mod "asincron", in timp ce faci altceva: sortezi mailul, citesti noutatile pe web sau postezi ceva pe blog.

Nu stiu daca o sa ma tina mult frenezia, dar deocamdata pe mine m-a captivat.

Daca am trezit interesul cuiva interesul se poate inscrie folosind referinta mea (sau pur si simplu trecind nicubunu ca prieten care a recomandat), nu e nimic de pierdut in faptul ca imi creste mie putin rangul.

Actualizare Google Webmasters Tools

Foarte multi webmasteri folosesc Google Webmasters Tools pentru a afla tot felul de informatii despre cum site-urile lor sint indexate de Google, pentru a corecta erori sau a imbunatati interactiunea cu motorul de cautare.
Am intrat in contul meu dupa citeva zile si am constatat ca la sfirsitul saptaminii trecute interfata a fost actualizata si imbunatatita, chiar au fost adaugate si citeva functii noi (si interfata in limba romana, pentru cei care apreciaza asa ceva):

Mai multe informatii sint disponnibile pe blogul oficial.

Butoane si bannere web, dimensiuni - exemplu: Fedora

Un lucru foarte important este ca atunci cind afisati pe o pagina web bannere sau butoane sa respectati dimensiunile standard, astfel incit daca un utilizator nu doreste sa vada asemenea tipuri de imagini sa le poata bloca foarte usor pe baza dimensiunii.

Iata si citeva dimensiuni uzuale:

• Bannere orizontale: 468x60, 600x120
• Bannere verticale: 120x240, 120x600
• Bannere centrale: 125x125, 300x250
• Butoane: 36x13, 80x15, 88x31, 110x32, 120x60, 125x50, 180x60

Pentru a inviora putin atmosfera, iata si citeva bannere si butoane in cele mai uzuale dimensiuni destinate promovarii Fedora:

• bannere 468x60:
  
  



• butoane 88x31, 110x32, 120x60:
  

Scurte tutoriale video despre GIMP

Am vorbit mai de mult despre cum se face un screencast folosind unelte libere si formate libere dar pina acum nu am pus la vedere nici un screencast util. A venit azi momentul pentru doua scurte tutoriale video despre imbunatatirea fotografiilor, sint scurte dar ar putea fi inglobate ca pasi succesivi dintr-un tutorial complex.

Corectarea defectelor pielii cu GIMP 2.4
Se foloseste Healing Tool, se seteaza zona sursa cu tasta Ctrl apasata si apoi se deseneaza peste zona destinatie.

Albirea dintilor cu GIMP
Se selecteaza dintii cu lasoul (bifind feather edges) si apoi se scade saturatia.



nota: scuze pentru Flash

Actualizare: mai multe tutoriale video intr-un articol ulterior.

Actualizare: Acum exista si un ghid extensiv in format HTML.

Text 3D in Inkscape

Asa cum am promis intr-un post anterior, iata traducerea, adaptarea si completarea tutorialului despre text 3D in Inkscape folosind Blur, in care se creaza un logo in stilul celui folosit de Google.

Tor

De principiu asta este o poveste atit de banala incit nici nu ar merita spusa: un mail malitos soseste, continutul e scris cu grija incit trece atit de filtrul anti-spam din Thunderbird cit si de SpamAssassin, dar totusi Thunderbird il clasifica in mod corect ca scam pentru ca este compus folosind HTML si include un link cu text diferit fata de adresa:

Totusi dincolo de partea de inselaciune, exista si ceva remarcabil in acest scam: Tor (The Onion Ring) este foarta util pentru protejarea anonimitatii pe internet, chiar si eu il folosesc atunci cind este cazul, este sponsorizat de Electronic Frontier Foundation, publicat ca FOSS si este o unealta de incredere, sint revoltat de autorii de malware care il pot discredita in asemenea fel, dar la ce altceva te poti astepta de la niste escroci?

Google Reader si widget-uri

Google Reader este o unealta utila pentru citit bloguri sau orice alte pagini care folosesc RSS, dar pe linga asta poate face mult mai multe, o functie utila a sa este furnizarea unui widget (o bucata de cod JavaScript) care poate fi incapsulata in orice pagina web pentru a publica titlurile furnizate printr-un feed RSS (de exemplu de catre un blog, dar se pot face selectii dupa etichete, se pot grupa mai multe surse de stiri etc).

Am folosit cu incredere widget-urile furnizate de Google Reader pentru a sindicaliza diverse bloguri, inclusiv cel de fata, in multe locuri si am fost multumit de felul in care functioneaza. Pina acum citeva ore, cind am observat ca nu mai merge... Am investigat putin si am identificat problema:

A fost modificat pur si simplu numele scriptului din "publisher.js" in "publisher-en.js", probabil cu buna intentie, pentru a permite internationalizarea. Dar eu cred ca cei de la Google au judecat gresit pentru ca au afectat utilizatorii care deja foloseau codul de ceva vreme, ar fi trebuit dupa introdcerea versiunilor localizate sa lase si vechea versiune, legata, sa zicem, de cea in engleza.

In concluzie: atentie, daca folositi in paginile voastre widget-ul exportat de Google Reader s-ar putea sa fie nevoie sa faceti o mica actualizare.

AMD/ATI si Linux

Desi este oarecum offtopic in coontextul general al acestui blog, noutatile de la AMD despre drivere pentru Linux mi se par atit de importante incit trebuie sa vorbesc despre ele.
De multa vreme, peste un an, am tot aminat un upgrade major al calculatorului de acasa, cind vremea acestui upgrade va veni, aproape sigur voi rupe lunga traditie de a folosi placi video Nvidia si voi opta pentru o placa AMD/ATI, care va acompania procesorul AMD (AMD este de multa vreme optiunea mea pentru procesoare).
Ba chiar mai mult, s-ar putea sa imi schimb putin si optica in ceea ce priveste laptopurile.

Globuri de cristal cu Inkscape

Nu e vorba de un totorial nou, ci de unul mai vechi publicat cu luni in urma in limba engleza in Red Hat Magazine care intre timp a devenit liber si a putut fi tradus si republicat, deci Globuri de cristal in Inkscape folosind blur.

Nota: traducerea cuprinde numai partea despre globuri, cea cu text 3D va fi probabil adaptata si completata in viitorul apropiat.

Actualizare: continuarea articolului este acum disponibila.

Amuzament cu sticla si umbre in Inkscape

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.

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.

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:

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:


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.

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.

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:

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.

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):







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).

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):

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

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).

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):

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:

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:

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:

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

Dupa care se foloseste filtrul Py-Slice (Filters > Web > Py-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.