Web Developer pentru Firefox

Parte din ceea ce face Firefox un browser extrem de util şi prietenos cu utilizatorul este reprezentată de suita de add-on-uri pe care le poţi grefa în bara de unelte, la îndemână oricând ai nevoie de ele. Eric Meyer, în tutorialul de CSS Web Design de pe Lynda.com, face o scurtă însă relevantă demonstraţie despre utilitatea Web Developer pentru cineva care încearcă să atingă acest domeniu. Astfel poţi face modificări importante doar printr-un singur click, precum dezactivarea stilurilor sau a JavaScript, editarea CSS sau HTML, redimensionarea paginii, validarea CSS sau HTML şi multe, multe altele.

Cum am ajuns aici: Despre cărţi bune la toate dar mai ales la front-end development

Ca student la Calculatoare, să simţi fiecare curs ori laborator ca o dezamăgire a propriului eu poate fi considerat semn că poate, e posibil zic, ca locul tău să nu fie acolo. De ce am continuat până acum, în anul V? Dincolo de bunastarea interioară pe care mi-o insuflă proximitatea oamenilor inteligenţi ori de implicarea într-o organizaţie studenţească extrem de activă, a fost întotdeauna dorinţa -- camuflată sub forma unei intuiţii -- că trebuie să fie mai mult decât atât, că e nevoie doar de o fărâmă de răbdare pentru a descoperi felia de tehnologie care mi se potriveşte şi care mă poate entuziasma. Aşa am ajuns la Web Development.

E o ocupaţie nesolicitantă, de fetiţe şi băieţei, veţi spune. Oricine poate să facă site-uri, oricine cu acces la un Microsoft FrontPage sau care a descoperit opţiunea de Export din Photoshop. Ei bine, aici stă partea interesantă a demersului meu. Pentru că nu am vrut să gândesc că totul e uşor încât poate fi mânuit cu multă îngăduinţă. Nu am vrut să cred că oricine poate face un site bun şi am refuzat să accept faptul că nu există secrete, lucruri ascunse, de fineţe, menite doar cunoscătorilor. Am vrut să iau lucrurile temenic, să citesc mult şi de la oameni real-cunoscători în domeniu. În mod asumat, am vrut să cred că e rocket-science.

Cu mult ajutor deopotrivă bibliografic şi de încurajare din partea prietenilor, mi-am început periplul livresc cu o carte pe care o citeşti ca pe o lectură de plăcere. Don't make me think a lui Steve Krug e o delicioasă manieră de a înţelege cum trebuie să fie un site ca să ridice cât mai puţine probleme utilizatorului, acesta trebuind în mod ideal să-şi exerseze gândirea doar asupra conţinutului unui site, nu şi în ceea ce priveşte interfaţa (se spune că un UI ideal e cel pe care nici nu-l observi).

Cu încrederea plutind la nivelul tavanului, simţind că sunt pregătită pentru următoarea categorie de greutate, am pornit vitejeşte printre filele Designing Web Navigation, semnată James Kalbach, o carte muult mai consistentă la nivel de informaţie decât precedenta, cât parcă a mă face să înţeleg că a fost joacă până atunci, însă lucrurile pot deveni extrem de complicate. Kalbach face o simfonie a posibilităţilor de navigare într-un site, de la poziţionarea barei de meniu până la site-map-uri şi modalităţi de manevrare şi relevare a rezultatelor unei căutări, sugerând de fiecare dată un alai de soluţii alternative la aceeaşi problemă. La final, simţi că nu mai aparţii categoriei de grădiniţă, deja ai fost iniţiat în lumea serioasă a gravităţii web design-ului.

Zeldman, iar cine activează în domeniu şi nu ştie cine e Jeffrey Zeldman e invitat să facă un dublu tulup cu tsukahara întins, e un extraterestru care s-a gândit să ne înveţe standardele într-ale design-ului, fapt pentru care s-a apucat de făcut W3C-ul şi de persuadat companiile proprietare a marilor browsere să adere la un set de directive comune, care să uşureze considerabil munca dezvoltatorilor web. Şi a reuşit, în mare parte. Designing with Web Standards e o biblie a dezvoltatorului de site-uri, o iluminare într-ale folosirii corecte a codului CSS şi XHTML, o convertire la Kabbalah bunului simţ şi a bunelor practici web.

În curând, după un detur facultativ, însă, ştiţi voi, obligatoriu, voi sfârşi cartea de High Performance Web Sites a lui Steve Sounders, o carte esenţială pentru a crea un site funcţional şi uşor utilizabil. Cele 14 reguli, de la poziţionarea CSS-ului şi a JavaScript-ului în cod până la a folosi un Content Delivery System, se reunesc într-un decalog modificat, al cărui nume rămâne astfel întrucât nu am curajul să creez cuvinte precum patrusprezecalog, pentru care orice front-end credincios ar arde pe rugul performanţei, fapt care, oricum, îi uşurează digestia destul de mult.

Ce urmează? Asta, asta şi în mod sigur asta. Să ne fie de bine!

Ce să NU faci în Web Design

Când porneşti la drum, te ajută să ai un bagaj de lucruri pe care ştii că e bine să le faci. De fapt, întregul rucsac pe care-l porţi în spate e încărcat de reguli albe, de fapte pozitive la care vei apela în mare partea a călătoriei. Însă, dincolo de suma de unelte constructive, mereu e nevoie să ştii de ce anume trebuie să te fereşti, ce ravenă este periculoasă sau ce râu e mai adânc decât pare. O grămăjoară de lucruri negre, cât să le aduni într-o batistă, însă pe care trebuie să le ai permanent în vedere.

În web design, dacă vrei să joci după regulile băieţilor buni (şi nu după directivele învechite, îngălate, păguboase ale aproximativ-ştiutorilor), atunci trebuie să îţi însuşeşti mantra inversă de mai jos:

• ocoleşte elementele font (orice ţine de felul în care arată informaţia va fi reglat prin CSS, iar nu prin taguri de HTML. Take that, 9th grader know-it-all!!1)

• nu apela la tag-uri <br> pentru inserarea de linii albe (spaţierea, care ţine de aspect, nu de structura conţinutului, va fi reglată de CSS şi nu de HTML, prin elemente de padding sau margin)

• nu insera atribute pe tag-ul <body>, precum culoarea textului, a link, etc (orice fapt prezentaţional este în jurisdicţia CSS)

• nu apela la entităţi &nbsp; (non-breaking space, spaţiu folosit uneori pentru indentare; din nou, grădinarul Geoffrey n-are ce căuta amestecând cu foarfeca în supa lui Chauncey)

• evită tabelele pe cât posibil (am întâlnit un individ care credea cu pasiune că orice site este dependent de structura tabelară de HTML; aceasta e mistificarea în care sunt în pericol să cadă cei care nu au fost atinşi de ideea magică a web-ului semantic. Acestora trebuie să le reamintim că în casa unui web developer inteligent sunt majoritar scaune, eventual o masă, două)

Pe scurt: foloseşte HTML pentru structurarea conţinutului şi CSS pentru a modela aspectul informaţiei. Good job, eşti aproape web developer. ^_^

CSS: Box Model Hack

[The coding examples in this article may be considered obsolete. I've yet to update my 2003-ish knowledge.]

Consorţiul W3C încearcă să uniformizeze practicile în web design sub umbrela gândirii de tip "creează o dată, publică oriunde". Cu alte cuvinte, produsul muncii unui web developer, creat sub auspiciile standardelor web propuse de organismul sus-menţionat, poate fi utilizat cu (aproape) orice agent utilizator, trecut ori preconizat. Dacă în trecut opţiunea de a face mai multe variante ale aceluiaşi site era considerată practică firească, astăzi această manieră de gândire e considerată o blasfemie a bunelor practici web, păguboasă pentru timpul şi resursele implicate într-un proiect.

Şi, cum caracteristicile browserelor existente sunt de multe ori contradictorii şi reciproc eliminatorii, developerii au scornit o serie de ocolişuri menite să le uşureze munca. Unul dintre aceste hack-uri este cel propus de către Tantek Celik, nume important pentru industria de software, prin implicarea sa în dezvoltarea Internet Explorer pentru Mac şi prin multe alte contribuţii referitoare la XHTML şi CSS. Al său Box Model Hack vine în întâmpinarea bug-ului box model întâlnit în Internet Explorer pentru Windows, până la versiunea 5 inclusiv.

În ce constă acesta, pe scurt? Întâi trebuie să înţelegem ce este de fapt box model -- anume, o manieră de reprezentare grafică, ce permite elementelor block-level, precum p sau blockquote, să conţină padding, margini sau borduri. Problema apare în momentul în care browserele interpreteaza în mod diferit dimensiunile menţionate în codul CSS. De o parte sunt cele care implementează modelul propus de W3C, care consideră că atributul width se referă la lăţimea conținutului celulei, iar padding la spaţiul dintre conţinut şi bordură, de cealaltă parte sunt browserele (mă rog, browser-ul..) care au rămas fidele modelului tradiţional, care consideră că dimensiunile de lăţime şi înălţime se aplică dintr-o bordură în cealaltă. Astfel că, acolo unde marea parte a browserelor stabilesc dimensiunile conţinutului - care ulterior sunt fixe, aplicând apoi padding şi borduri, IE aplică padding şi borduri în spaţiul definit de width, ceea ce conduce la diminuarea spaţiului menit conţinutului.

Tantek Celik a venit cu o soluţie elegantă care șuntează această problemă: în definirea unui element box-level, se menţionează dimensiunea celulei dorit a fi preluată şi folosită de către IE, urmând să se aplice 2 reguli pe care IE nu le recunoaşte, însă care sunt familiare celorlaltor browsere, şi să se rescrie regula referitoare la width, de data aceasta cu dimensiunea pe care o dorim a fi aplicată în browserele ce funcţionează după modelul W3C.

div.content {

width: 400px; // dimensiune pentru versiunile problematice IE

voice-family: "\"}""; // IE5 se opreşte aici

voice-family: inherit;

width: 300px; // regula pentru browserele supuse standardelor

}

Totodată, se menţionează şi o regulă pentru browserul Opera, "Be kind to Opera rule", întrucât acest browser, deşi aplică modelul box model W3C, nu înţelege cele două reguli voice-family:

html>body .content {

width: 300px;

}

There you have it. Box Model Hack. Pentru un Internet curat şi developeri fericiţi.