on the verge of extinction... again

Lucrez la tema pentru blog (un mic "sneak preview" in poza din dreapta). Am cam terminat versiunea pentru 320px. Cam ala este acolo pentru ca am spus de atatea ori ca este gata, doar pentru ca apoi sa-mi vina o alta idee mai buna.

Ieri si astazi m-au pocnit idei despre ce modificari sa mai aduc la link-uri si la efectele la hover/ focus. Daca la capitolul link-uri deja m-am hotarat (ma limitez strict la moficat culoare scris si background la focus, nimic miscator in versiunea pentru mobil), in materie de efecte pe imagine nu stiu inca ce voi folosi. Cateva optiuni pot fi vazute putin mai jos (aaa, efectele nu sunt vizibile pe Firefox 3.6 sau mai vechi, Internet Explorer 9 sau mai vechi si Opera 10.1 sau mai vechi sau cu JavaScriptu' dezactivat... desi efectele in sine ar merge fara JavaScript, mi-a fost lene sa stau sa scriu manual prefixu' pentru fiecare browser):

Si inca un set:

Pareri? Care ar merge mai bine? Alte idei de efecte? Cum sa arate, nu cer codul CSS de-a gata. Dar daca cineva are chef de joaca: setul 1 si setul 2.

JavaScript

Tema foloseste putin JavaScript. Si da, este JavaScript chior, n-am folosit jQuery. Si ca sa raspund putin mai clar unei intrebari primite atat in comentariile postarii precedente cat si pe messenger (de genu' "da' ce-ai cu jQuery?")... nu am nimic cu jQuery, este foarte comod de folosit si evident, consider ca este cea mai buna solutie atunci cand exista presiunea unui termen limita.

Insa... tocmai faptul ca este o solutie atat de comoda nu-mi convine. E ca si cum as desena interfata in IDE si mi-ar genera el codul Java, C++, Visual Basic,... whatever. Ceea ce este grozav atunci cand esti la inceput si doar vrei sa faci ceva sa functioneze si te gandesti ca dupa aia incerci sa intelegi cum functioneaza totul de fapt. Insa o solutie care functioneaza nu este neaparat cea mai buna solutie. Si doar cu solutii care pur si simplu functioneaza nu vei fi niciodata mai mult decat un "programeci" mediocru... ceea ce eu nu-mi doresc sa raman. Sincer, nivelul meu la capitolul JavaScript este pe undeva intre semi-decent si decent. Si mi-as dori sa fac tot posibilul sa-l trag in sus.

Formularul de comentarii nu merge fara JavaScript - imi pare rau, dar asa e pe blogspot, n-am ce sa fac, nu e nici macar script bagat de mine, este introdus de blogger. Daca JavaScriptu' este dezactivat, in locul formularului de comentarii va aparea un mesaj care explica asta.

Formularul de abonare prin e-mail nu functioneaza nici el fara JavaScript. Daca JavaScriptu' este dezactivat, nu va fi vizibil - va fi ca si cum nici n-ar exista.

In afara de astea doua, nu cred ca mai exista vreun minus la capitolul functionalitate de baza daca e dezactivat JavaScriptu'.

Exista o mica buba cu data postarii din post-info (zona neagra de deasupra fiecarei postari, aia unde scrie "cand/ despre/ pareri") pe paginile care contin mai mult de o postare (cele de index si cu arhive): daca sunt mai multe postari din aceeasi zi, data va fi afisata doar pentru ultima dintre ele, pentru celelalte va fi afisata doar ora. Am corectat chestia asta din JavaScript, asa ca acum arata perfect, insa, daca JavaScriptu' e dezactivat... in astfel de situatii va aparea ceva de genu' "cand: 00:49:00" in loc de "cand: vineri, 6 august 2010, 00:49:00". Pentru curiosi, se poate vedea aici cum am procedat. In sectiunea HTML se poate vedea ceva in genu' a ce se genereaza in paginile de index si arhive, iar in sectiunea JavaScript... evident, scriptu' care pune data acolo unde este cazul. Daca are cineva sugestii despre cum l-as putea imbunatati... eu ascult! Sau, mai corect spus, citesc...

M-am mai folosit de JavaScript pentru o modificare a formatului orei din headerul comentariilor - n-am gasit in optiunile Blogger un format care sa-mi convina, cel mai apropiat de ce imi doream eu era cu GMT+2 in coada, l-am luat pe ala si i-am taiat coada cu ajutorul a doua linii de JavaScript.

Mai folosesc JavaScript pentru butonul +1. Si cam asta e - formularul de abonare prin e-mail, data postarii, ora comentariului si butonul +1 sunt singurele chestii pentru care am folosit eu JavaScript in tema (ca Blogger mai baga si altele... e o alta poveste). Probabil voi mai folosi putin JavaScript si pentru lightboxu' pe care il am in plan (insa scriptu' ala nu va fi inclus pentru mobil, asa ca...).

Imagini

Nu foloseste aproape deloc. Din mai multe motive. Pentru ca n-am simt estetic. Pentru ca nu imi place sa folosesc imagini cu chestii pe care le pot face lejer din CSS. Pentru ca n-am. Imagini geniale care sa faca tema diferita, unica. Si nu vreau sa le iau de pe net. Pentru ca luandu-le de pe net se duce dracului unicitatea.

Pentru mobil nu vor exista imagini de background si toate imaginile intra in trei categorii:

1. logo (RSS, twitter, YouTube,... cred ca s-a prins ideea)
2. poza din corpul postarii (cred ca-i clar ce-i cu categoria asta)
3. avatar (ihi! si o sa explic cum am procedat - este doar CSS si XSLT, zero JavaScript)

Inca ceva...

Pentru cine a avut rabdare sa citeasca pana aici, inca un "sneak preview": bara cu butoanele de abonare la blog. In dreapta, o poza comparativa: cum arata diferite stari in diferite browsere. In continuare, ceva explicatii pentru poza.

Butoanele cu optiuni de abonare sunt in mod normal doua (RSS & e-mail), insa, dupa cum am spus mai sus, mai ramane doar una in cazul in care este dezactivat JavaScriptu'. Sunt delimitate cu

border: solid 1px #fff;

box-shadow: inset 0 0 3px 2px #a9a9a9;

Tot ce mai apare pe butoanele respective in afara de textul chior e pus acolo cu :before si :after, asa ca nu se vede in IE7. Imaginea de pe butonul RSS chiar este imagine (de fapt doua, una pentru "normal state" si una pentru hover), insa plicul de pe butonul e-mail este un caracter Wingdings. Si evident, si sagetuta care apare la hover pe acelasi buton este tot un caracter Unicode. Ceea ce, din pacate, inseamna ca plicul ala nu arata la fel in toate browserele. Pe Safari si IE9/8 (nu am testat deloc pe IE10) arata cam imbacsit si deplasat putin in sus si spre dreapta. Pe Firefox arata foarte curat, insa putin cam mare, parca e gata sa inghita textul de dupa el (n-am testat pentru versiuni mai vechi de 3.6). Si mai inseamna ca este foarte posibil sa fie probleme in Windows XP. Dar daca nu cere nimeni sa fac eu ceva ca sa poata vedea plicul in Windows XP... ramane cu status de "won't fix".

Evident, colturile rotunjite nu se vad decat pe Chrome, Safari, Firefox, IE9+, Opera 10.5+, Opera Mobile 11.0+ - upgrade your fuckin' browser if you want the eye candy!

Panoul cu formularul pentru abonare prin e-mail se deschide la click pe butonul... e-mail, bineinteles. Chestia asta este facuta doar din CSS (#subscribe-email a:active + div pentru IE, #subscribe-email a:focus + div pentru restu'). Functioneaza in toate browserele in care am testat, inclusiv in IE7, in cazul caruia trebuie totusi miscat cursoru' sobolanului in afara butonului dupa click ca sa apara panoul cu formularul. Care apare frumos, lin (ahem, transition) pe Chrome, Safari, Firefox 4+, IE10 (da, zic si eu, teoretic, ca asa se lauda, ca poate), Opera 10.5+ si orice altceva in afara de Opera Mini (in care iar nu am testat).

Inputu' din formular foloseste atributu' placeholder, care este vizibil doar pe Chrome, Safari, Opera, Firefox 4+, IE10, Safari Mobile (nu sunt sigura de la ce versiune incoace, stiu doar ca pe 5.0, adica cea curenta, merge), Opera Mobile. Inca o chestie care nu-i bifata pentru Opera Mini. Pentru IE8/7 am folosit comentarii conditionale si un strop de JavaScript ca sa adaug acelasi text in input

<input class='follow-by-email-address' name='email' type='text'
value='... adresa ta de e-mail aici'
onfocus="if(this.value == '... adresa ta de e-mail aici') this.value = '';"
onblur="if(this.value == '') this.value='... adresa ta de e-mail aici';"/>'

Am mai zis mai sus ceva de colturi rotunjite, dar sunt unele elemente pentru care exista in continuare probleme, iar input este unul dintre ele. Asa ca inputu' pentru adresa de e-mail are capetele rotunde doar pe Chrome, Safari, IE9+, Firefox 4+.