marți, 13 ianuarie 2009

Javascript & RegExp

Hei, ultimul post inainte de sfarsitul proiectului. Ca tot am predat tema 3 la IOM acum 2 saptamani, voi vorbi putin despre ce am folosit eu pentru a cauta expresiile dorite in paginile html: RegExp. RegExp vine de la RegularExpression si are niste chestii in comun cu tema pe care am facut-o la LFA anul trecut (care va mai aduceti aminte). RegExp este practic un obiect folosit pentru a memora un tipar (pattern) care va fi folosit in parsarea unui string. Poate lua forme simple sau mai complicate. Crearea unui nou obiect RegExp se face astfel in Javascript:

var txt=new RegExp(pattern,attributes);
or
var txt=/pattern/attributes;
Exemplu: var patt1=new RegExp("e", "g"); patt1 o sa fie egal cu stringul "e", iar cautarea se va face global, adica
se vor returna toate pozitiile gasite, nu doar prima(default).
Alte valori posibile pentru argumentul "attributes" sunt: "i" - case insensitive search, "gi" - global case insensitive si "m" - multiline search. Cand v-am spus ca regexp seamana cu tema de la LFA, m-am referit la urmatorul aspect: se pot adauga stringului din tipar diversi modificatori pentru parsari mai avansate. De exemplu modificatorul "[xyz]" folosit pentru a cauta caracterele din interiorul setului(cum faceam si la LFA, cu acele pattern-uri folosite la parsare). O lista completa de modificatori se gaseste pe pagina celor de la w3schools. Ca orice obiect care se respecta, regexp are si metodele sale:

compile() - schimba expresia folosita: 

var patt1=new RegExp("e", "g"); // patt1="e"
patt1.compile("f");// patt1="f"

exec() - intoarce string-ul gasit(daca exista) si tine minte pozitia:

patt1.exec(str); // cauta patt1 in stringul str

test() - returneaza true daca gaseste o cel putin o potrivire sau false daca nu:

flag=patt1.test("abcde"); // flag=false pentru patt1="e" dar flag=true pt patt1="f"

Anumite metode ale obiectelor de tip String accepta folosirea regexp ca argument: search(), match(), split(), replace(). Eu am folosit metoda search() in tema, si am construit urmatorul tipar pentru a descoperi doar cuvinte intregi, nu si substringuri:

 var patt1 = new RegExp("\\b" + str + "(?![a-z,A-Z,0-9])","i")

care inseamna, practic, ca voi cauta doar la inceputul cuvantului ("\\b"), si nici nu se vor accepta rezultatele care au in coada caractere numerice sau litere(adica se accepta decat cuvinte intregi, nu substringuri ale altor cuvinte ca rezultate).
Seamana putin cu tema de la LFA nu? :) Eu am ales RegExp pentru ca imi era mult mai usor sa caut cuvinte intregi astfel, decat cu search-ul normal al obiectului String.
Sa parsati sanatosi!



miercuri, 7 ianuarie 2009

Again, about fonts...

Primul meu articol a fost o poveste despre rolul fonturilor in pagina noastra web si efectele pe care diferite caracteristici ale fontului le imprima aspectului general al acesteia. Ca o scurta revenire la aceasta idee, am gasit pe internet site-ul  http://www.typenow.net/themed.htm care ofera o gama larga de font-uri folosite in filme sau de firme mai mult sau mai putin cunoscute. De asemenea se gasesc cateva font-uri apartinand unor formatii de muzica sau unor jocuri. And it's all there for the taking... free. Mai jos cateva mostre(font-uri de filme):


marți, 6 ianuarie 2009

Favicon, imagini in miniatura

Favicon (FAVorites ICON) , bookmark icon sau url icon este, pentru cei ce nu stiu despre ce vorbesc, acea mica imagine ce apare in browser langa numele site-ului. Pentru blogger.com este un B, pentru Wikipedia este W, iar pentru Yahoo... ati ghicit: unY. Evident acestea sunt doar cateva exemple, fiecare poate sa isi puna ce favicon doreste, acesta putand fii chiar si animat.
Un favicon da personalitate site-ului tau, apare ca imagine la bookmarks si, de ce nu, iti face site-ul mai frumos si mai usor de recunoscut.
Mai intai trebuie sa il cream sau sa il luam de undeva. Faviconul este un fisier cu extensia .ico de dimensiuni fixe: 16x16 sau 32x32 pixeli pe 8 sau 24 biti. Mai nou sunt suportate si fisierele .png si .gif, dar daca vrei ca imaginea ta sa fie afisata si in browsere mai vechi (IE6) trebuie sa fie .ico.
Daca vrei sa iti faci singur acest fisier te anunt cu parere de rau ca Photoshopul nu stie sa salveze .ico. Dar exista un plugin al celor de la Telegraphics, care iti permite sa faci asta. Sunt insa destule site-uri pe care poti sa uploadezi un png, gif sau jpeg pe care sa le convertesti in ico. Un astfel de site este favicon.cc, care te lasa sa iti si desenezi propria pictograma (traducerea in limba romana :p).
Odata creeat faviconul trebuie pus pe site. Initial, pentru a putea fii interpretat de browser acesta trebuia sa se afle in radacina site-ului si era musai sa aiba extensia ico. Mai tarziu s-au mai luminat oamenii si au zis sa fie mai permisivi. Astfel se poate preciza din codul html locatia favicon-ului si tipul fisierului(gif, png, ico):

<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
[...]
</head>

Momenan site-urile folosesc ambele metode pentru a se asigura ca si cei cu browsere mai vechi vad imaginea, lucru pe care va sugerez sa il faceti si voi.

vineri, 2 ianuarie 2009

Protopage - spatiul tau privat

Acum ca au trecut sarbatorile a venit momentul intrarii in minicriza studenteasca a sesiunii. Pai ce, doar bancherii sa aiba crize? Pe mine ma prinde foarte nepregatit criza anul asta, pentru ca sunt la pamant cu temele si cu proiectele si uite ca azi imi programasem un pic de oracle dar se pare ca pe vista imi trebuie alta versiune decat cea pe care o luasem eu de pe internet (Oracle 9i). Asa ca, din lipsa de dispozitie pentru Lisp, mai scriu un articol.
Fiecare dintre noi navigheaza internetul din propriile motive, fie ca vrea sa citeasca un articol pe wikipedia, o stie din presa locala sau internationala, sa vada un filmulet pe youtube, sa caute o rezolvare la tema pe care o are de facut, sau sa frece menta pe retele sociale gen hi5, facebook, etc. Din acest motiv mi se pare util sa ai o pagina pe care sa gasesti majoritatea subiectelor si site-urilor care te intereseaza si pe care le frecventezi in mod regulat. O astfel de pagina, care mi-a atras atentia, este www.protopage.com. Pagina care se deschide in fereastra browser-ului cand accesam aceasta adresa este un tablou de topicuri si site-uri incluzand vremea, del.icio.us, digg.com, CNN.com, BBC, Yahoo News, si asa mai departe. In afara de tab-ul Home ce contine aceasta e-supa de site-uri, mai avem tab-urile de bookmarks(alternativa la google bookmarks sau add-on-ul firefox despre care a vorbit colegul meu intr-un articol anterior) si de notes, in care ne putem atasa e-post-it-uri, daca pot sa le numesc asa :) : de la date calendaristice, la to-do-uri si alte comentarii. Exista de asemenea o optiune de adaugare tab nou pentru cei care nu sunt satisfacuti de cele 3 standard sau pentru cei care doresc sa isi imparta materialul in categorii mai specifice. Dupa ce iti faci un cont pe pagina celor de la protopage nu iti ramane decat sa iti customizezi portalul, adaugand widgets, bookmarks, rss feed-urile care te intereseaza, notitele tale si tot felul de linkuri catre site-urile pe care vrei sa le ai la indemana. Inca un exemplu bun de h0mepage pentru browser-ul vostru. Apropo de browser, Protopage recomanda Firefox 3 sau Explorer 7, desi functioneaza si pe Safari si Opera.
Ca sa nu mai lungesc vorba, va urez un 2009 plin de suprize placute si de succese (nebanuite! , cum zicea o cunostinta de-a mea ca suna "cool" :)) ). Si incercati Propotage!

marți, 23 decembrie 2008

DIV vs Table




Maretul Cezar a spus ceea ce a ramas in istoria ca o strategie de succes in rezolvarea multor probleme(de razboi, de calcul, de viata...): "Divide et impera!". Intr-o traducere adaptata, foloseste div-urile si vei avea de castigat. 
Cei care se indeletnicesc cu editarea HTML stiu cam care este treaba cu tag-urile div si table. Am vazut in articolele anterioare ca se cauta ca codul HTML sa fie cat mai simplu si curat, acest lucru oferind o serie de avantaje, printre care o indexare superioara in motoarele de cautare, o mai buna administrare a continutului site-ului, posibilitatea refolosirii anumitor bucati de cod, etc. In jurul aceleiasi idei se invarte si articolul de fata: optimizarea codului. Multa lume, mai ales cei mai newbies, folosesc inca tag-urile pentru a formata informatia in cadrul site-ului. De fapt, pana de curand, site-uri "respectabile" precum www.microsoft.com foloseau tables pentru layout. Desi in ziua de azi situatia este mult mai roz decat acum 3-4 ani, poate mai este cineva acolo care are ce invata de pe urma acestui articol. Si daca nu, tot e material bun pentru o discutie/analiza in domeniul interfetelor si site-urilor. Asa ca, here we go...
Cronologic vorbind, tag-ul table are intaietate, fiind mai batran, dar nu neaparat mai intelept. Aparut in HTML 3.2 si suportat inca de pe vremea lui Netscape 2.0, descrierea lui table scrie ca acesta poate fi folosit pentru a marca (nu stiu exact traducerea lui "mark up" din domeniul tipografic) date tabelare sau pentru layout. Desi utilizarea tabelelor pentru layout-ul unui site este permisa de definitia tag-ului, ea nu este indicata(discutii pe tema aceasta se pot gasi pe forum-uri, cu opinii pro si contra; ca exemple va ofer un forum de pe bytes.com si unul de pe killersites.com). Problema majora cu table apare cand este necesara folosirea tabelelor imbricate, nivelul de imbricare putand depasi usor limita anumitor browsere, pe langa faptul ca rezulta un cod foarte incalcit si greu de descifrat. De asemenea, datorita folosirii elementelor de layout, cum ar fi border, position, etc, continutul site-ului, textul propriu-zis, se departeaza tot mai mult de capul fisierului html. Aici intervine div-ul. Acest tag defineste o diviziune a site-ului, o portiune separata de restul codului, ce poate fi identificata dupa un id si apoi editata utilizand CSS (remember Zen Garden?). Daca folosim un fisier CSS extern, obtinem 2 avantaje: reutilizarea layout-ului CSS pentru diferite pagini, fara nevoia de e rescrie codul, si aducerea continutului site-ului mai aproape de header. Avand in vedere ca crawler-ele motoarelor de cautare au o limita de text pe care o pot parcurge, acest fapt permite micilor "gandacei" sa citeasca si sa indexeze o portiune mai mare de continut din site-ul vostru. Pentru ca tot codul de layout se gaseste intr-un fisier extern, pe pagina .html se va gasi decat continutul si tag-urile de definire a continutului (practic ajungem iar la problema separarii functiilor de definitie a continutului si definitie a formei unei pagini web). Alt avantaj care deriva din folosirea magicului div este o reducere consistenta a bandwith-ului folosit de server(aplicabil site-urilor intes accesate, gen www.microsoft.com). Poate va intrebati de ce am dat de doua ori ca exemplu site-ul baietilor lui Bill Gates... Pentru ca vreau sa va prezint un articol interesant, desi mai vechi(2004), despre starea in care se gasea site-ul Microsoft acum 4 ani, se gaseste pe www.stopdesign.com. In caz ca va este lene sa cititi sau sunteti ocupati cu tocatul legumelor pentru salata de bouef, va fac un rezumat. Site-ul inventatorilor Windows-ului se gasea intr-o stare jalnica, printre carentele sale enumerandu-se marimea fisierelor, diferenta de afisare intre browsere(preferat fiind, desigur, IE), codul greu de descifrat. Articolul demonstreaza clar cum se poate face o economie masiva de latime de banda daca se reformeaza site-ul si se renunta la costisitoarele "spacer gifs" si a tabelelor(vezi imaginea de dedesubt). 



Un calcul sumar, 38,7 milioane accesari pe zi, 25 kb salvati per accesare, rezulta 924 Gb pe zi, respectiv 329 Tb(da, Terabytes) pe an (aviz amatorilor, nu am verificat corectitudinea calculelor). Doamne, cand ma gandesc cate as putea face cu atata banda. Recomand calduros tuturor firmelor cu o puternica latura web-oriented sa isi faca un control la site-uri, ca nu e de glumit cu criza asta financiara. In loc sa se reduca salariile (ahem, sefu, ma citesti?), mai bine s-ar reduce consumul de latime de banda la internet si alte astfel de cheltuieli, prin metode inteligente. Ca o remarca, am incerca sa vad in ce stare se afla astazi site-ul celor de la Microsoft, poate or fi citit si ei articolul, dar am renuntat rapid, deoarece codul era scris pe 3 linii. Am observat ca multe site-uri ale unor mari corporatii au site-ul scris pe cateva linii lungi cat o zi de post. Recunosc ca motivul pentru o astfel de asezare in pagina ma depaseste. Oricum, cu un mic search am descoperit ca intr-adevar, lipsesc tabelele. Deci oamenii s-au conformat intr-o oarecare masura. 
Acum, am tot laudat div-ul, dar nu e bine nici daca trecem in extrema cealalta. Am aflat, pe cand ma documentam pentru articol, de existenta unei noi boli, o boala a designer-ilor de site-uri, DIVITITA(divitis in limba engleza). Pe csscreator.com aflam ce este aceasta boala si cum se trateaza. 



Pe site-ul css-discuss.incutio.com gasim un articol ce promoveaza un compromis intre div si table pentru o armonie a codului html. Ceea ce este si normal, deoarece table are si el scopul lui, nu trebuie renuntat in totalitate la el in favoarea noului venit. 
Ca incheiere, va las cu un filmulet ce arata bazele tag-ului div, asa ca aperitiv pentru cei interesati, si cu inca un link catre un articol pe tema div vs table:



In concluzie, folositi div si CSS pentru layout, si table doar pentru marcare date tabulare. Craciun fericit, si sa va aduca Mosul multe accesari si un loc cat mai fruntas pe motorul Google.