O luna de blog

Blog de Webdesign implineste o luna de existenta, ocazie cu care este scris si articolul cu numarul 30.
In decursul timpului numarul de vizitatori a crescut constant, la fel ca si numarul de subiecte abordate ca si notorietatea acestui blog.

Cu aceasta ocazie iata o statistica interesanta despre ce au citit vizitatorii aici:

Multumiri:
Cu ocazia acestei aniversari Blog de Webdesign multumeste urmatoarelor site-uri cu care a colaborat in repetate rinduri:

• Dioanad Webdesign


• articole by Nicu


• Nicu's sucky life


• Nicu's Howto


• nicu's clipart collection

GPL 3

Blog de Webdesign saluta lansarea GPL 3 - versiunea 3 a Licentei Publice Generale GNU, majoritatea uneltelor pentru dezvoltare prezentate in acest blog sint publicate sub aceasta licenta.

Ghiduri de grafica - Hackergotchi cu Inkscape si GIMP

Nu stiu sa desenez dar vreau sa desenez chipuri de oameni cu Inkscape

Un ghid simplu, ca pentru incepatori despre cum poti desena in Inkscape fete de oameni chiar daca nu te pricepi sa desenezi.
Adica:

Pe scurt: se importa o fotografie, se deseneaza pe deasupra ei, apoi se adauga culori iar in final lumini si umbre. Suna interesant?


Articolul este o traducere a unui tutorial scris original in limba engleza.

Hackergotchi cu GIMP

Un hackergotchi se face in mod traditional cu GIMP, asa ca iata o colectie de tehnici utile in acest proces.



Articolul este o traducere si adaptare a unui tutorial mai vechi scris original in limba engleza.

Stil retro cu "ASCII Art"

Ne apuca uneori nostalia, ne amintim cu un zimbet de vremuri trecute, vorbim de Generatia X (unde X inseamna altceva pentru fiecare dintre noi). O metoda de a da un aspect retro unei pagini web (sau oricarui text), ca din preistoria calculatoarelor, este folosirea ASCII Art.
Si cum crearea de ASCII Art este un proces dificil, de multe ori se automatizeaza procesul folosind un program pentru conversie. Exista programe care convertesc o imagine, un text sau chiar imagini in miscare (filme, jocuri).
Iata niste rezultate (am selectat citeva care mi-au placut) obtinute cu un asemenea generator:

    __ __                             __    __         ___        
.--|  |__|.-----.---.-.-----.---.-.--|  |  |__|.-----.'  _|.-----.
|  _  |  ||  _  |  _  |     |  _  |  _  |__|  ||     |   _||  _  |
|_____|__||_____|___._|__|__|___._|_____|__|__||__|__|__|  |_____|
 ___  _ ____ ____ __ _ ____ ___    _ __ _ ____ ____
 |__> | [__] |--| | \| |--| |__> . | | \| |--- [__]
     _ _                             _   _        __      
    | (_)                           | | (_)      / _|     
  __| |_  ___   __ _ _ __   __ _  __| |  _ _ __ | |_ ___  
 / _` | |/ _ \ / _` | '_ \ / _` |/ _` | | | '_ \|  _/ _ \ 
| (_| | | (_) | (_| | | | | (_| | (_| |_| | | | | || (_) |
 \__,_|_|\___/ \__,_|_| |_|\__,_|\__,_(_)_|_| |_|_| \___/ 
   _  _                        _     _       ___     
 _| |<_> ___  ___ ._ _  ___  _| |   <_>._ _ | | '___ 
/ . || |/ . \<_> || ' |<_> |/ . | _ | || ' || |-/ . \
\___||_|\___/<___||_|_|<___|\___|<_>|_||_|_||_| \___/
    .___.__                                .___  .__        _____       
  __| _/|__| _________    ____ _____     __| _/  |__| _____/ ____\____  
 / __ | |  |/  _ \__  \  /    \\__  \   / __ |   |  |/    \   __\/  _ \ 
/ /_/ | |  (  <_> ) __ \|   |  \/ __ \_/ /_/ |   |  |   |  \  | (  <_> )
\____ | |__|\____(____  /___|  (____  /\____ |  /\__|___|  /__|  \____/ 
     \/               \/     \/     \/      \/  \/       \/             

  :| ++                       :|     ++      ,::|      
:':| :| ,::\ .::\ :::\ .::\ :':|     :| :::\ ::|  ,::\ 
:::| :| `::/ `::| :|:| `::| :::| ::| :| :|:| :|   `::/ 
  |                     |         /=     
/=| = /=\ /=| /=\ /=| /=|   = /=\ |= /=\ 
\=| | \=/ \=| | | \=| \=| = | | | |  \=/ 
 _|o _  _.._  _. _| o._ _|_ _ 
(_||(_)(_|| |(_|(_|o|| | | (_)
   _ _                   _   _     ___     
 _| |_|___ ___ ___ ___ _| | |_|___|  _|___ 
| . | | . | .'|   | .'| . |_| |   |  _| . |
|___|_|___|__,|_|_|__,|___|_|_|_|_|_| |___|
   |  o                              |   o          | |      
 __|      __   __,   _  _    __,   __|       _  _   | |  __  
/  |  |  /  \_/  |  / |/ |  /  |  /  |   |  / |/ |  |/  /  \_
\_/|_/|_/\__/ \_/|_/  |  |_/\_/|_/\_/|_/o|_/  |  |_/|__/\__/ 
                                                    |\       
                                                    |/   
     |_)                             |  _)        _|      
  _` | |  _ \   _` | __ \   _` |  _` |   | __ \  |    _ \ 
 (   | | (   | (   | |   | (   | (   |   | |   | __| (   |
\__,_|_|\___/ \__,_|_|  _|\__,_|\__,_|_)_|_|  _|_|  \___/ 
    _ _                        _   _       __     
 __| (_)___  __ _ _ _  __ _ __| | (_)_ _  / _|___ 
/ _` | / _ \/ _` | ' \/ _` / _` |_| | ' \|  _/ _ \
\__,_|_\___/\__,_|_||_\__,_\__,_(_)_|_||_|_| \___/
     ___                        __  _      ___   
 ___/ (_)__  ___ ____  ___ ____/ / (_)__  / _/__ 
/ _  / / _ \/ _ `/ _ \/ _ `/ _  / / / _ \/ _/ _ \
\_,_/_/\___/\_,_/_//_/\_,_/\_,_(_)_/_//_/_/ \___/
  .                     .                 
,-| . ,-. ,-. ,-. ,-. ,-|    . ,-. ," ,-. 
| | | | | ,-| | | ,-| | |    | | | |- | | 
`-^ ' `-' `-^ ' ' `-^ `-^ :; ' ' ' |  `-' 
                                   '   
                           _    
 _|. _  _  _  _  _|   . _ (_ _  
(_||(_)(_|| )(_|(_|.  || )| (_)
    .                             .            .-.   
    |   o                         |    o       |     
 .-.|   .  .-.  .-.  .--. .-.  .-.|    .  .--.-|-.-. 
(   |   | (   )(   ) |  |(   )(   |    |  |  | |(   )
 `-'`--' `-`-'  `-'`-'  `-`-'`-`-'`-o-' `-'  `-' `-' 
    |o                        | o     ,---.     
,---|.,---.,---.,---.,---.,---| .,---.|__. ,---.
|   |||   |,---||   |,---||   | ||   ||    |   |
`---'``---'`---^`   '`---^`---'o``   '`    `---'
 _|. _  _  _  _  _| . _  |` _ 
(_||(_)(_|| |(_|(_|.|| |~|~(_)
                                                 

Atentie: pentru a pastra formatarea in HTML e indicat sa folositi fonturi monospaced sau chiar etichete <PRE>

Link ostil fara pagerank - redirectare din php

Daca intr-un articol anterior am vorbit despre link-uri care nu dau PageRank folosind rel="nofollow" (utile de exemplu atunci cind vrei sa dai acces usor vizitatorilor la un site pe care nu il agreezi sau pentru a preveni spam-ul).
Astazi voi prezenta o alta metoda care foloseste status-ul furnizat de serverul web (Apache), si anume 302 Redirect.

Orice pagina primeste o valoare PageRank care ii reflecta notorietatea si toate link-urile externe din aceasta pagina impart intre ele, dupa o formula anume, aceasta valoare si o trimit mai departe paginilor tinta.
O solutie pentru a nu risipi PageRank pe aceste link-uri externe (cu atit mai mult in cazul in care este vorba de niste site-uri ostile) este de a transforma link-urile externe in unele interne si apoi prin intermediul unui script se poate face redirectare catre site-ul tinta.
Se poate vedea aceasta metoda pusa in practica la directoare web gen trafic.ro sau la diverse publicatii comerciale on-line.

In php se poate folosi pentru redirectare functia header cu parametrul Location:.
Folosesc un script, sa ii zicem jump.php, cu urmatorul continut:

<?php
header("Location:". $_REQUEST["go"]); /* Redirectare dupa parametrul primit in URL */

/* Ne asiguram ca se iese curat din script dupa redirectare */
exit;
?>

Pentru a accesa un site, cum ar fi www.dioanad.info" voi folosi urmatorul cod HTML:

<a href="jump.php?go=http://www.dioanad.info/">www.dioanad.info</a>

Blogger.com nu imi permite gazduirea de fisiere php pentru un exemplu practic, asa ca voi folosi un script gazduit extern: clicky-clicky.

Un alt caz de folosire al redirectarii este atunci cind pagina nu mai exista la locatia initiala ci a fost mutata si se doreste ca vechile link-uri raspindite prin intreb internetul sa ramina functionale, caz in care se poate folosi status 301 Moved Permanently, dar asemenea redirectare se poate face si din .htaccess, nu este nevoie de un script special.

Iconuri Copyleft

M-am jucat putin de dimineata cu simbolul Copyleft, facind citeva variante mai stralucitoare. Daca tot le am, le voi pune la dispozitia publicului impreuna cu sursele in format SVG, nu se stie niciodata cind are cineva nevoie:

Si steagul asta autoironic de Comunist Copyleft (Copyleft Commie):

Link ostil fara pagerank - rel="nofollow"

In multe cazuri se intimpla sa fie nevoie de a pune intr-un material publicat pe web link-uri catre un site extern (pentru comoditatea cititorilor, care il pot urmari printr-o singura apasare de mouse) dar nu vreti sa ii faceti nici un favor proprietarului acelui site, fie ca este o entitate malefica sau numai ca vinde un serviciu de proasta calitate pe care nu vreti sa il sustineti furnizindu-i PageRank.

O solutie in acest caz este nofollow, un atribut HTML ascociat unui hyperlink care spune motoarelor de cautare ca acesta nu trebuie sa influenteze greutatea tintei in rezultatele furnizate de acestea.

Folosirea este simpla, de forma:

<a href="http://www.inovatika.com" rel="nofollow"><www.inovatika.com</a>

<a href="http://www.xdrive.ro" rel="nofollow"><www.xdrive.ro</a>

De asemenea nofollow este folosit pentru a descuraja spam-ul in site-urile unde utiliatorii (sau boti in locul lor) pot adauga liber continut, cum ar fi bloguri sau wiki-uri.
Mai toate blogurile adauga automat nofollow pentru toate link-urile publicate in comentarii, iar Wikipedia face acelasi lucru pentru toate link-urile externe.

Bineinteles, exista critici ai acestei folosiri in scopuri anti-spam, care argumenteaza ca Wikipedia s-a transformat intr-o gaura neagra a internetului, care absoarbe link-uri (si deci PageRank) fara a da acelasi lucru in schimb (motiv pentru care in articolele mele toate link-urile catre Wikipedia sint insotide de nofollow).

Ghiduri (tutoriale) de grafica - GIMP si Inkscape

O pagina web spartana, doar cu text si fara nici un pic de grafica va fi considerata de utilizatori searbada si plictisitoare, de aceea e bine sa ne ocupam si de aspectul acesteia, dar fara a o face in mod excesiv.
Recomand citeva ghiduri (tutoriale) pentru GIMP si Inksscape, aplicatii de grafica liberere. Acestea sint traduceri alea unor originale in limba engleza.

Pont GIMP: cum faci subiectul sa sara afara din poza

Ghid GIMP despre un efect interesant asupra unei fotografii: crearea impresiei ca subiectul "sare" sau "iese" afara din cadru.


Sau originalul in limba engleza.

Transformarea unei fotografii intr-o tabla pentru Jigsaw Puzzle

Ghid GIMP in care se sparge in bucati o fotografie, exact ca piesele unei table pentru un joc de Jigsaw Puzzle.


Sau originalul in limba engleza.

Ponturi pentru folosirea pensulelor (brushes) in Inkscape

Ponturi despre stampilare, model de-a lungul unei cai, interpolare, caramizi clonate.


Sau originalul in limba engleza.

Ploaie animata cu GIMP

Ghid GIMP despre realizarea un efect animat de ploaie folosind GIMP.


Sau originalul in limba engleza.

cssed - editor pentru style sheet

Am descoperit recent cssed, o unealta interesanta pentru dezvoltatorii web. Asa cum spune numele, este un editor pentru CSS ce furnizeaza o multime de functii utile, printre care evidentiere de sintaxa (highlight), interfata cu tab-uri, inserare rapida de proprietati si valori CSS, autocompletare, wizad-uri, ba chiar si validare CSS.

Poate fi folosit de asemenea si ca editor pentru HTML, XML, Javascript, Java, PHP, JSP, C, C++, Apache configuration files, .htaccess, Python, Perl, SQL si alte limbaje (in imaginea de mai jos e un exemplu de folosire cu PHP). Functionalitatea poate fi extinsa cu un sistem de plugins.
Exista chiar si un binar pentru Windows.

Corespondenta

Am primit de la un cititor o corespondenta purtata de acesta cu unul dintre subiectii articolelor, discutie bazata pe un articol preluat de noi:

in 29 martie 2007 Binevoitor.Anonim@gmail.com scrie:

Buna ziua,

Din intimplare am dat pe internet peste pagina unui individ care va insulta:
http://nicubunu.blogspot.com/2007/03/professional-webdesign.html

Ma gindesc ca poate nu stiti de asta si vreti sa ii ziceti vreo doua.

-m

in 14 iunie 2007 Marius.Ivanuta@inovatika.com scrie:

Salut
stim de existenta acelui individ. Motivul real este reprezentat de o anumita
relatie nereusita cu o colega dupa cum se vede din paginile dezvoltate.
Consideram ca nu are rost sa ne antrenam intr-o polemica nesfarsita cu acest
om. Va multumim pentru atentionare si speram ca cine are ochi sa vada vede:)
Cu consideratie,
Marius Ivanuta - Project Manager www.inovatika.com

in 29 martie 2007 Binevoitor.Anonim@gmail.com scrie:

Wow!
Primesc acum un raspuns la un email trimis in martie, nu foarte prompt.
Daca la fel va miscati si pe partea de business, poate a tipul ala o avea un pic de dreptate.....

-m

Nota: dioanad.info preia acest articol si in plus adauga un interesant sondaj pe aceasta tema.

Aniversare dioanad.info

Blog de webdesign felicita dioanad.info (site infratit, cu care imparte un numar de articole prin sindicalizare) cu ocazia implinirii unei luni de existenta si ii doreste un viitor plin de succese.

Actualizare: acum exista o pagina speciala unde sint arhivate toate aceste anunturi si statistici.

Fonturi invizibile - exemplu: www.xdrive.ro

O boala des intilnita la designerii web este grandomania, manifestata prin incapatinarea de a produce pagini care lor li se par atragatoare dar pentru utilizatori sint greu, daca nu imposibil, de folosit. Un caz des intilnit este folosirea unor dimensiuni foarte mici pentru fonturi.
O prima solutie pentru utilizatori ar fi sa foloseasca intotdeauna rezolutii mici pentru monitoare, astfel incit sa poata intelege textul, dar rezultatul este o experienta neplacuta in lucrul de zi cu zi si bani irositi pe monitoare de calitate.
O alta solutie ar fi modificarea dimensiunii fonturilor (valoare exprimata in DPI) in intreg mediul desktop, dar si aceasta este neplacuta, intrucit mareste excesiv fonturile din aplicatiile compliante.
Asa ca cea mai la indemina solutie este pusa la indemina de Firefox: View > Text Size > Increase (sau Ctrl++) mareste dimensiunea textului si View > Text Size > Decrease (sau Ctrl+-) o micsoreaza, facind astfel textul lizibil.

Dupa cum se vede in exemplul de mai sus, de la www.xdrive.ro - un furnizor dubios de gazduire web, designeri complet neprofesionisti gasesc metode inventive de a distruge totul: pun text ilizibil intr-o imagine reprezentind cod de siguranta (captcha).


Ilustrare printr-un screencast:

[click pentru animatie 1.3 MB]

Nota: Articol sindicalizat la dioanad webdesign si articole by Nicu.

Layout HTML si fonturi

Multi designeri web doresc un lucru imposibil: ca paginile lor sa arate identic, pina la ultimul pixel, pentruorice utilizator, indiferent de platforma sau browserul pe care acesta il foloseste. In multe cazuri incearca sa ocoleasca problema folosind hack-uri oribile si Flash.
Fonturile sint cea mai importanta cauza si mai ales lipsa de disponibilitate a acesora. Eu am inceput sa aresez problema in toate site-urile folosind pachetul de fonturi Liberation.

Este foarte simplu si evident: nu exista nici o garantie ca un anume font este instalat pe sistemul tinta, dar este posibil sa existe o garantie despre existenta unui font metric echivalent, si Liberation exact asta reprezinta: echivalente metrice ale fonturilor Microsoft, deci poti pune unul dintre fonturi promar si echivalentul sau metric drept optiune de rezerva.

Cum Linux este tinta mea primara, pun in CSS:

font-family: "Liberation Sans", Arial, sans-serif;

Bineinteles, se poate face si invers:

font-family: Arial, "Liberation Sans", sans-serif;

http-equiv="Content-Language" - exemplu: www.linkconsulting.ro

In sectiunea HEAD a unui document HTML sepot atauga un numar de etichete (taguri) optionale META care au scopul de a furniza informatii suplimentare despre pagina (metainformatii), care nu afecteaza direct modul de afisare a paginii ci mai degraba felul in care aceasta este clasificata si indexata. Exista etichete pentru copyright, descriere, cuvinte cheie si multe altele.

O asemenea eticheta este http-equiv="Content-Language" care in mod evident defineste limba in care este scris documentul.
Citeva exemple:

• limba romana: <meta http-equiv="Content-Language" content="ro"/>
• limba engleza generic: <meta http-equiv="Content-Language" content="en"/>
• limba engleza, dialect american: <meta http-equiv="Content-Language" content="en-US"/>

Totul este bine si frumos atita timp cit folosirea este consistenta, atfel incit cumulata cu celelalte aspecte sa produca un efect benefic, ceea ce nu este cazul in exemplul de mai jos, www.linkconsulting.ro, site al unei firme de consultanta in marketing (care se remarca in primul rind prin limbajulde lemn folosit in prezentare, abuszind de cuvinte gen leverage, care de obicei sint o marca a formei lipsite de continut):


O privire in surse ne arata inconsistenta:


Sau mai prietenos din punct de vedere al utilizatorilor, aceeasi informatie aratate de Firefox folosind fereastra de informatii despre pagina:


Deci care e problema?
Nu e ceva rau (desi multe persoane sustin contrariul) ca o pagina scrisa exclusiv in limba engleza foloseste un domeniu romanesc (.ro), exista argumente solide (de exemplu legate de pret) in favoarea unei asemenea optiuni, rau este modul inconsistent in care sint folosite: domeniul, limba de exprimare si etichetele de metainformatie: domeniu romanesc, pagina in engleza, limba declarata romana
Efectul direct asupra cititorilor al unei asemenea greseli este minim sau chiar nul, ea afecteaza mai degraba beneficiarul siteului prin pozitia rezultatului in motoare de cautare si alte clasamente automate si este o dovada a neprofesionalismului autorilor.

Nota: Articol sindicalizat la dioanad webdesign si articole by Nicu.

Byzanz si Istanbul: screencast in formate libere cu unelte libere

Intr-un articol recent am folosit un screencast pentru a ilustra un efect dezagreabil creat prin folosirea excesiva a Flash. Voi elabora acum mai mult despre ce este, cum se realizeaza si cum se foloseste un screencast.

Definitie

Screencast este inregistrarea digitala a ceea ce afisaza ecranul unui calculator, cunoscuta si dept captura video a ecranului, in essenta un film a ceea ce utilizatorul vede pe ecran. Uneori imaginea poate fi insotita si de naratiune.

Problema

Exista o multime de unelte cu care se pot realiza asemenea inregistrari, majoritatea fiind proprietare si in general realizind inregistrarea video intr-un format proprietar (mpeg4/divx si flash sint cele mai raspindite formate).
Voi prezenta doua unelte libere (GPL) cu care se pot realiza screencast-uri in formate libere.

Byzanz

Byzanz este o unealta care realizeaza screencast in format GIF animat (dupa expirarea patentelor acum citiva ani GIF a devenit format liber).
Un screencast realizat cu Byzanz arata cam asa:

Avantajul cel mai important al Byzanz este acoperirea, orice browser grafic stie sa afiseze imagini in format GIF animat, deci oricine va putea vedea un asemenea screencast.
Bineinteles, exista si dezavantaje, dintre care cele mai importante sint lipsa posibilitatii de a adauga sunet si dimensiunea cam mare a fisierului rezultat.

Istanbul

Istanbul realizeaza inregistrarea video in formatul deschis Ogg Theora.

Exemplu: link direct (32.5KB).

Ca avantaje, pe linga libertatea formatului si a playerelor, se pot mentiona compresia buna, posibilitatea de a adauga sunet, de procesare intr-un editor video si multe altele.
Dezavantajul principal este lipsa suportului pentru formatul Ogg Theora in playerele instalate implicit pe principalele sisteme de operare comerciale.

Recomandarile mele de player sint dupa cum urmeaza:

• pentru Linux: Totem, cu alternativele MPlayer si VLC;
• pentru Windows: VLC;
• pentru Mac: VLC;

O alta posibilitate de a include un screencast realizat cu Istanbul este aceea de a-l gazdui la YouTube (sau alte servicii similare, dar nu toate suporta acest format), ca in exemplul de mai jos, dar in acest caz acesta va fi convertit intr-un format proprietar.


Actualizare: citeva luni mai tirziu am gasit un nou favorit, gtk-RecordMyDesktop, am scris un post special despre el si chiar am facut citeva filmulete cu el.

Intretinere si actualizare website comercial - exemplu: www.meyerproducts.ro

Cind o firma mica isi comanda un site de prezentare, simplu si static, are tentinta, in oarecare masura justificata, de a minimiza costurile si a nu plati pentruintretinerea acestuia. Sau de a plati o suma nu prea mare pentru actualizarile cerute.
Este o linie greu de tras, intrucit firma de webdesign care realizeaza lucrarea , bazindu-se pe lipsa de experienta in domeniu a clientului poate percepe initial un pret mic pe care sa il recupereze pe urma cerind preturi exagerate pentru actualizari (si avind clientul ostatic si nevoit sa le accepte).
Deci aveti mare atentie cind incheiati un asemenea contract la costurile vizibile dar si la cele pe termen lung, care pot fi ascunse.

Dar tema acestui articol este putin diferita: sometimes shit happens. Este posibil ca la un site sa fie nevoie de modificari si in alte cazuri decit la cerinta clientului, se poate intimpla din vina firmei de webdesign, mai ales daca aceasta da dovada de competenta indoielnica. Un bun exemplu este www.meyerproducts.ro site al unui furnizor de pluguri de zapda.

Pagina principala:

Apasind link-ul "continuare" apare o pagina defecta, defectiune care se manifesta cel putin in orice versiune de Firefox sau SeaMonkey, dar nu si in Internet Explorer si numai in aceasta pagina din intregul site:


Istoricul de la archive.org arata ca in februarue 2006 acest site a fost reprogramat foloind un layout cu CSS in loc de tabele, dar din pacate nu ofera deocamdata (peste citeva luni ar putea fi actualizat) suficiente informatii pentru a putea determina daca problema de afisare a existat de la inceput sau a fost introdusa de o modificare ulterioara, deci nu putem sti daca clientul a plrimit un site defect sau acesta a fost defectat ulterior fara stirea sa. Oricum, corectarea unei asemenea greseli ar trebui sa fie prompta si gratuita.

Vorbind de modificari ulterioare, archive.org arata una:


Oare adaugarea ulterioara a reclamei fara perdea pentru un serviciu de gazduire dubios sa fi fost ocazia cu care a fost stricat layoutul?

Sau o alta intrebare la care de asemenea fiecare poate sa isi dea propria presupunere personala: oare clientul, care a platit pentru site, stie ca acest site facut pe banii lui este folosit pentru a face reclama unei firme de web design? O fi primit o compensatie materiala?
Linga reclama este scris © Meyer 2005, deci in mod normal ar fi trebuit ca orice modificare sa fi fost facuta numai cu permisiunea acestuia.

Inainte de incheiere, se mai poate face o observatie: in pagina se mentioneaza © Meyer 2005 dar in interiorul codului © Meyer 2004. Oare unde o fi adevarul?



Concluzia e simpla: aveti grija pe cine platiti sa va faca un website, aveti grija la costurile ascunse si nu aveti incredere in el, multe se pot intimpla ulterior receptionarii lucrarii.

Nota: Articol sindicalizat la dioanad webdesign si articole by Nicu.

Blogger.com: feed personalizat pentru etichete (labels) personalizate

Un lucru mai putin cunoscut de catre utilizatorii Blogger.com este ca pot avea acces la feed-uri Atom pentru diverse categorii de postari, in functie de etichete (labels). Aceasta functie nu este usor de desoperit, asa ca iata aici reteta:

http://numeblog.blogspot.com/feeds/posts/default/-/numeeticheta

De exemplu un feed pentru acest blog aratind o selectie a articolelor cu eticheta inovatika are adresa http://blog-de-webdesign.blogspot.com/feeds/posts/default/-/inovatika

WebKit (Safari, Konqueror) - un browser pentru teste

In traditia dezvoltarii web romanesti exista practica de a testa orice site inainte de publicare cu cele trei browsere: Internet Exporer, Firefox si Opera, lucru de altfel corect, asta este ordinea impartirii pietei locale.
Pentru un site global, adresat utilizatorilor din lumea intreaga, tripleta fie se schimba fie este inlocuita de un careu: Safari si alte browsere bazate pe motorul WebKit au o raspindire mult mai mare decit Opera, deci ar trebui folosit si acesta pentru teste.

In mod evident, cea mai buna metoda de a testa un website cu Safari este de a folosi Mac OS X, dar calculatoarele produse de Apple sint scumpe, greu de gasit in Romania si sincer vorbind, nu merita banii (nu voi face pentru moment glume nesarate despre orientarea sexuala a utilizatorilor acestora.
Un dezvoltator web are in momentul de fata optiunea de a rula Konqueror pe Linux, fie pe un calculator dedicat, fie ca dual-boot, fie in masina virtuala sau de pe un LiveCD.

O veste importanta pentru acestia in cazul in care nu doresc sa experimenteze cu Linux este ca Safari a fost portat pe Windows (aflat in beta deocamdata).
Deci daca vreti sa testati, aveti cu ce...

Dupa cum spune proverbul "Sa faci se spune popa, nu ce face popa", ascultati ce spun eu, nu faceti ca mine, care refuz sa stric puritatea desktopului meu GNOME instalind Konqueror si toate librariile KDE pe care le cere acesta :D

sIFR, fonturi, Flash si alte orori - exemplu: www.asociatiamiruna.ro

Am avut recent o experienta oribila navigind pe siteul www.asociatiamiruna.ro unei gradinite private, Asociatia Miruna, poti vedea efectiv cit de incet si neplacut se incarca titlurile paragrafelor, incit prima reactie a fost ca e ceva in neregula cu calculatorul sau cu browserul meu. Am facut un mic screencast pentru a ilustra fenomenul:

[click pentru animatie]

Investigind mai atent am observat ca responsabil este sIFR un modul Flash care este folosit de designeri aroganti pentru a impune in paginile lor folosirea unor fonturi proprietare, care altfel nu ar putea fi afisate intrucit nu sint instalate in calculatoarele utilizatoilor (cum spune o cunostinta veche de-a mea, "hack-uri").
Nu voi intra in detalii tehnice, doar dau o legatura catre opinia lui Arve Bersvendsen, dezvoltator la Opera, care cu siguranta e mai priceput decit mine.
Deocamdata eu sint multumit ca am instalat Flashblock, care ma fereste cit de cit de asemenea abuzuri

Nota: Articol sindicalizat la dioanad webdesign si articole by Nicu.

Crearea websiteurilor SVG cu Inkscape

O idee cu adevarat interesanta: producerea siteurilor folosind exclusiv Inkscape si publicarea acestora pe web in format SVG. Teoretic ar trebui sa fie in regula, SVG este standard W3C deci ar trebui sa fie suportat de browsere (si mie personal nu-mi pasa de browserele care nu suporta standardele W3C - cough, IE, cough), Gecko 1.9 si Firefox 3.0 vin cu suport SVG imbunatatit, Inkscape e bun (dar nu perfect) pentru producerea siteurilor.
Deocamdata blocajul principal pe care il vad este modul in care Google si alte motoare de cautare indexeaza fisierele SVG, parerile sint impartite, unii spun ca indexeaza full-text, altii ca indexeaza numai ca imagini si altii ca nu ar indexa deloc.
Experienta mea proprie arata ca fisierele SVG din colectia mea personala de clipart in format SVG nu au asignata nici o valoare de PageRank cu toate ca sint online deja de citiva ani si abia apar in rezultatele cautarilor.

In consecinta am facut un site mic (3 pagini) si simplu 100% SVG si pun legaturi catre el pe citeva bloguri asteptind robotii sa il indexeze. Dupa citeva saptamini voi incerca diverse cautari pentru a vedea ce apare.

Daca aveti idei suplimentare sau mai multe cunostinte, va rog sa le impartasiti in comentarii.

(originalul in engleza)

Actualizare: concluzii dupa o luna de experiment.

HTML deasupra fundalului Flash - exemplu: www.adv.com.ro

O navigare sanatoasa pe web se face cu Firefox avind instalata extensia Flashblock pentru a lasa enervantele reclame Flash sa fie afisate numai la dorinta utilizatorului si de preferat sub un sistem de operare altul decit Windows pentru a evita binecunoscutele probleme cu vulnerabilitati si virusi.
Totusi nepriceperea unor realizatori de siteuri web face ca navigarea in aceste conditii sa nu fie optima, ca in exemplul urmator de la www.adv.com.ro. Pagina principala afisata de Firefox cu Flashblock in Linux arata in felul urmator:

Aceasta este o afisare aparent corecta, apropiata de ce doreste utilizatorul si nu foarte departe de intentia designerului. Problema apare la afisarea animatiei Flash, care face meniul sa dispara:


Problema este obiectiva si tine de functionarea plugin-ului Flash de la Adobe in Linux, unde acesta nu tine cont de z-order (ordinea pe axa z) si face codul HTML sa fie ascuns sub Flash.
Din pacate pentru programatorul HTML (da, am folosit termenul incorect "programator HTML") nu exista nici o solutie, vina este fie a designerului care din incompetenta a formulat o cerinta gresita, necunoscind comportamentul Flash pe alte platforme decit Windows fie a firmei de webdesign care (din aroganta sau pentru a reduce costurile cit mai mult) nu a testat solutia propusa pe platforme alternative.
Consecinta este ca datorita unei probleme de design sau de reducere a costurilor la realizator clientul final, beneficiar al siteului, ramine cu un numar de vizitatori avind o experienta de navigare neplacuta, ceea ce poate duce chiar la pierderea unor afaceri.

Nota: Articol sindicalizat la dioanad webdesign si articole by Nicu.

www.nori.de: Frames si PageRank

Daca un site nu apare corect ca rezultat al cautarilor cu Google atunci se poate considera ca acel site aproape nu exista. Articolul de fata exemplifica o utilizare total gresita a entitatii frames din HTML, care are efecte grave asupra vizibilitatii in google, folosind ca studiu de caz www.nori.de (site al unui liceu german din Bucuresti):

A folosi frames poate a parut o idee buna pentru vreo cinci minute pe vremea Razboiului Browserelor, chiar si eu am cazut in pacat cindva, dar inca de atunci vizionari ca Jakob Nielsen avertizau impotriva abuzului (sa nu uitam totusi ca erau vremuri in care practic CSS nu exista, viteza de acces la internet era foarte mica iar incompatibilitatile dintre browsere uriase).
Problemele introduse de frames sint multiple si nu se limiteaza numai la imposibilitatea de a folosi bookmarks (favorites), circumventia butoanelor "inainte" si "inapoi" din browser, probleme de printare sau de navigare (partial ilustrate in imaginea de mai jos, care evidentiaza diferenta intre adresa asa cum e aratata in bara de adres/URL bar si bara de statut/status bar), influenteaza direct si rezultatele furnizate de motoare de cautare cum ar fi Google.


Problema este mult mai mare si o obseram imediat ce aruncam o privire in sursa paginii:


Aici vedem ca pagina cu frameset-ul este gazduita pe un server (www.nori.de) iar cea cu continutul efectiv al site-ului pe un altul, cu o adresa complet diferita (www.inovatika.com/noride/). Rezultatul devastator este ca paginile indexate de Google for fi exclusiv cele aflate sub domeniul inovatika.com, domeniul nori.de fiind practic cumparat degeaba si imposibil de gasit cu un motor de cautare deoarece pagina de acolo nu are nici un fel de continut.

Desigur, fiind vorba de un site al unui liceu te poti astepta la o asemenea abordare amatoriceasca in cazul in care este vorba de un site facut de un pusti de liceu aflat la prima lui experienta in domeniu. Dar ridicolul nu are limita, exemplul de fata este o teapa trasa de o firma de web design cu pretentii de profesionism si acest site e chiar trecut in portofoliu.


Nota: Articol sindicalizat la dioanad webdesign si articole by Nicu.

Link absolut si relativ in paginile HTML - exemplu: www.adv.com.ro

Direct si la subiect: navigam la adv.com.ro (site al unui obscur distribuitor de piese auto):

Apoi mergem la o pagina oarecare din site, sa zicem pagina Despre noi:

Inapoi la Home:

Si optional inca o data la Despre noi:


Ce e de observat? Difera adresa, prima data aveam adv.com.ro si apoi www.adv.com.ro, cu un www adaugat.

Cauza? Cineva care isi aroga pomposul (si ridicolul) titlu de Programator CSS/HTML nu cunoaste ABC-ul folosirii legaturilor relative si absolute iar altcineva care se pretinde expert in gazduire web nu stie sa rezolve problema din server.


De ce ar fi asta grav, rau sau macar important?

• Pentru client (proprietarul site-ului): existenta celor doua adrese diferite influenteaza direct valoara PageRank deci automat pozitia in rezultatele cautarii cu Google. De asemenea influenteaza in mod negativ experienta utilizatorului, lucru nedorit de nici un furnizor de servicii;
• Pentru utilizator (vizitatorul care citeste paginile): navigatorul (browserul) vede paginile la adrese diferite, pe care le identifica drept site-uri diferite, deci la a doua deschidere a paginii (cea cu www) nu va folosi obiectele deja descarcate anterior direct din cache ci le va downloada inca o data, avind ca rezultat o afisare mai lenta a paginii;
• Pentru hoster (cel care gazduieste pagina): inseamna ca un numar de vizitatori vor descarca de doua ori continutul paginilor (nefolosind cache local), ceea ce duce la utilizare sporita a bandwidth-ului, incarcare mai mare pe server si costuri de functionare (care se vor regasi la client) suplimentare.

Poate nu in ultimul rind ar fi de mentionat ca o asemenea gresala elementara arunca o umbra de indoiala atit asupra entitatii care a realizat designul cit si asupra celeia care gazduieste.
Mare atentie!

Nota: Articol sindicalizat la dioanad webdesign si articole by Nicu.

Resurse utile: imagini clipart

O pagina web lipsita de grafica poate sa para vizitatorilor searbada, neinteresanta si plictisitoare. In plus usabilitatea ne invata ca utilizatorii retin usor metafora reprezentata de un icon si il identifica intr-un timp mai scurt decit citirea textului.
Asadar infrumusetarea unei pagini web cu elemente grafice duce nu numai la un rezultat mai atractiv dar si mai usor de folosit.
Daca nu aveti posibilitatea de a folosi un set de elemente grafice propriu, exista pe internet o multime de resurse, cu diverse preturi si conditii de licentiere, de la unele scumpe si restirictive
pina la altele complet libere.

Recomandarea de azi se refera la colectia de clipart a lui Nicu, distribuita ca Domeniu Public (fara nici un fel de restrictie).

Nota: imaginile sint in format SVG, recomandarea mea pentru editare fiind Inkscape.