rampart Posted January 17, 2011 Report Posted January 17, 2011 (edited) UN TUTORIAL.....MAI PERSONAL, RAZI INVATAND, INVETI RAZAND, GAINA SI OUL. MERGE GARANTAT DE FICARE DATAMai devreme, utilizatorul Oust mi-a trimis un privat in care ma ruga sa ii dau niste sfaturi legate de Romania Webmasters, Romania Webmasters si am zis sa fac un tutorial pe tema asta, cine stii, poate unii chiar se vor gandi la unele din aspectele ce le voi prezenta mai jos inainte de a face un site.Ma gandeam sa fac un tutorial de asta, dar am zis ca nu are rost sa teoretizez la gaina sferica in vid, si uite ca a venit si exemplul pe care sa fac asta. E sferic, rau!Nici nu stiu exact cu ce sa incep, eu o iau tot timpul de la IDEE, CE VREAU SA FAC PENTRU BURLANE.SRL? In functie de obiectul de activitate al omului/firmei, si de ce imagine vrea incropesc un design, daca incep sa descriu toate astea o sa fie ceva mult prea lung, dar sa o luam asa, pe capitole:DesignUsability&TypographyCodingTestingreCodingreUsabilityToate capitolele de mai sus le vom extrapola in pagina existenta rowebs.net.1. DesignTema de culori e OK, eu as mai fi pus o culoare in tot mixul asta, poate un verde, prima resursa de culori pentru mine este kuler, odata ce am culorile de baza in cap, intru cu ele in kuler si jonglez pe diferite tematici, complemantare, suplementare, opuse, mai multe nuante ale aceleiasi culori.Dupa ce am tema de culori stabilita ma gandesc la un layout general, asta se leaga cu uzabilitatea, pe site ul asta, as fi renuntat la cel de al doilea sidebar., mi se pare inutil.Cam atat despre design, vor fi multe la uzabilitate, aici mare parte consta in creativitatea designerului si a cunostintelor in domeniul web, in mod constant vizitati ezine uri de design, coding etc, eu urmaream foarte mult cssremix.com.2. UzabilitateUzabilitatea asta din punctul meu de vedere ar trebui sa faca parte din cultura fiecarui grafician/programator, ceva ce am intalnit foarte rar, mai des la graficieni, tocmai de aceea cand se pune un programator sa isi faca el un site, iese o chestie..... Sa o numim PATRATA si o lasam la atat.In cazul de fata, headerul mananca mult prea mult spatiu, standardele de rezolutie pe romania inca sunt foarte mici, desi conteaza enorm carui target de oameni ne adresam, daca faci un site pentru o firma de avocatura/consultanta/contabilitate, sa te astepti ca persoanele care vor intra pe site-ul respectiv vor fi o mare pondere dintre cei 36% de utilizatori din romania care INCA folosesc IE6, cosmarul meu. Pe rowebs.net logo-ul in primul rand mi se pare cam nelalocul lui pe pagina asta, putea fi facut altfel, alte culori, sunt prea vii culorile, sincer, eu sunt un adept al minimalismului, imi plac culorile putin mai inchise, puternice, pentru elemente gen logo si butoane, heaginguri de pe site, puteai sa faci sfera pacii cu culorile si efectele astea http://www.hgp.ro/upload/Steagul_Romaniei.jpgE si putin mai grungy dar ar fi picat bine, am inteles ce vrea sa transmita, webmasters, glob, dar na, nu trebuie sa fii flagrant, ca si webmaster nu te adresezi lui badea ion la care trebuie sa ii scuipi in fata butonul MARE, ROSU cu AICI CUMPERI TRACTOR, tot timpul apeleaza la instinctele oamenilor si la puterea lor de deductie.In alta ordine de idei, headerul care e acolo, vad ca e intrerupt,arata trist, adica e un albastru mai inchis cu niste floricele, sa fie intins peste tot daca asta ai vrut, fiindca asta imi imaginez ca ai vrut, chiar sub logo, vad un buton al dracu de mic si 90% cu aceasi culoare a backgroundului cu ACASA, cum vrei sa il gaseasca lumea?Butonul acasa sa faca parte din meniu (o vai, ajung si la ala imediat) sau sa fie separat si FOARTE vizibil, preferabil stanga sus cum l-ai pus tu.The rule of thumb aici e, lumea citeste de la stanga spre dreapta, de sus in jos, chiar inainte de jumatatea paginii da scroll pana la final, acolo sunt zonele unde ar trebuie sa te concentrezi sa pui informatia relevanta.Coboram mai jos, incep cu meniul, ca nu mai rezist, iti zic FOARTE sincer, mi-a luat 3 minute sa imi dau seama ca e in dreapta, sincer, si asta chiar cand ma gandeam, ia sa vad cum e alta pagina.. Stai ca nu e meniu, abia atunci am scanat mai atent pagina si am vazut ca e in dreapta, 0 BARAT, nu asa, foarte putine lume il vede.Dat fiind ca nu e foarte mare/(multe), l-as fi pus orizontal, sub logo, l-as mai fi secerat putin iar la unele butoane pus dropwdown, culoarea diferentiata, iar la dropdown chiar inversata sau acel verde despre care vorbeam mai sus.Ne intoarcem putin la logo, in dreapta lui.. Ai cca 80% din latimea site-ului NEFOLOSITA, acolo poti sa pui un feed foarte subtil de ceva stiri chestii etc. Problema e cu doua taisuri aici, fiindca ai si chestia de sub Bine ati venit pe RoWebs.La Bine ati venit pe RoWebs, in acel loc trebuia sa pui un slideshow cu ultimele articole, simplu de facut, elegant, ii da putina viata site-ului, si arata informatie relevanta utilizatorului.Despre sidebaruri, cum ziceam, unul e suficient, sus de tot chiar sub meniul despre care vorbeam mai sus, iar sub cautare sectiunea de login, ca sa castigi putin spatiu, fiindca e necesar, sectiunea login o faci un simplu buton, iar cand omul da click pe ea ies afara cu slide out cele doua campuri.Sunt extrem de mult chestii de zis, inapoi la logo, distanta in stanga si sus ar trebui sa fie egala, pentru uniformitate.Vad ca ai sub tot ce am zis pana acuma, ultimele postari pe forum si ultimele downloaduri, e un lucru bun, dar diferentiaza-le, mie mi se pare ca sunt una si aceeasi chestie la prima aruncare de ochi, ceea ce nu e bine, trebuie sa atragi atentia la ultimele chestii care s-au intamplat, pagina este content-centric, nu de prezentare, asa ca separa-ti foarte bine continutul.Articolele in sinea lor, sunt plasate ok, dar cum ziceam cu un singur sidebar ai avea mai mult loc de desfasurare, fontul trebuie sa fie putin mai mare, poza de la fiecare articol sa fie aliniata la stanga, total, nu deasupra sau nu in stanga primei linii, that is not right, 1. Castigi spatiu, ca sa pui mai multe articole (un singur sidebar) 2. Arata mai bine.Vad ca ai titlul articolului, categoria, IAR NUMELE ARTICOLULUI si poza, nu zic nimic pe tema asta dar titlul de deasupra pozei trebuie sa dispara.Bucata cu taguri din sidebarul stang, iarasi e inutila acolo unde e, lumea nu face click pe taguri, never ever, it’s too confusing, alea sunt pentru seo, si atentie, daca sunt prea multe esti penalizat, asta acoperim la partea de SEO, nu stiu foarte multe despre SEO dar sunt niste guidelines foarte clare care trebuie urmate pentru a avea minimul OK. Bucata respectiva poate sa stea foarte bine si jos, ultima chestie din sidebar.Vrei sa iti construiesti o comunitate? Pe sidebar sa pui neaparat si un widget/nebunie de NEWSLETTER, e surprinzator dar chiar foarte multi romani se inscriu la newslettere, eu acu ma refer la mediul juridic, culmea, in domeniul asta nu e nici o indoiala. Bineinteles, continut interesant, unic, nou. Eu sincer nu urmaresc nici un site romanesc de asa ceva ... Ai toate headingurile de pe pagina, sunt un gif, cred eu, care a fost taiat/salvat prost, are marginile negre, nu mai are rost sa zic, astea le poti face foarte frumos din CSS, fara poze si chestii decat daca o sa folosesti un gradient, asta acoperim in partea de coding.Imaginile care apar pe site, poti sa te legi de ele cu css in mod global si sa le dai un border subtil cu un shadow si toate cele, binteles astea nu se vor vedea in IE6&7, bostanii nu stiu ce pierd Acu vad ca folosesti jquery.corners pentru headongurile acelea, nu ai nevoie, css ajunge, in IE nu conteaza daca le faci sa arate bine si drepte.Ai o groaza de tool-uri la indemana, observa timpii de incarcare, ruleaza audit uri prezente in chrome si peste tot si asculta ce zic ele . Combina-ti js urile custom, orice librarile folosesti de pe net, odata ce ai customizat-o, impacheteaz-o, folosing /packer/ si aranjeaza-ti tot timpul bine codul cu Online javascript beautifierSi dupa ce ai facut toate treburile astea, iti pui un tracker de analytics, de ce naiba pui chestiile astea romanesti, mi se par triste, astea sunt ca sa le vada altii ... Tie iti trebuie un tool sa vezi EXACT de unde a venit omul, si cand a intrat pe index, cat timp a stat pe el, pe urma pe ce a facut click, si dupa o luna doua de adunare de statistici de astea, o sa ai o imagine foarte clara a chestiilor care put in site, vezi ce trebuie sa imbunatatesti, si daca te gandesti sa pui o reclama sau ceva, o pui in locul/zona unde se face click cel mai des, aici e o problema de nuanta, depinde ce vrei, pierzi cativa oameni care iti vad articolele si fac click pe banner, dar oricum, daca sunt interesati si dupa ce fac click pe reclama se vor intoarce.TypographyLiterar, filosofic, cum vrei sa o iei, fonturile vorbesc cu oamenii, spre exemplu fontul folosit la logo ma duce cu gandul la star trek si la R2D2 din starwars, WTF is that? Pe langa ca e chunky ca naiba, seama cu un courier din ’80, mutilat, e disproportional, nu e frumos.Mie imi place enorm de mult sa folosesc Helvetica, e extraordinar din punctul meu de vedere. Cat despre fontul din pagina, nu stiu ce sa zic, nu mi-l imaginez calumea, as fi pus Georgia pentru h1 h2 h3 iar pentru restul Arial, MyriadPro etc. In locuri unde vrei sa pui un font custom, se poate folosi cufon cufón - fonts for the people o librarie superba.Asta e o coperta de carte facuta de mine cu Helvetica, it's freaking awesome, sau na, cel putin mie si clientului, ne place la nebunie.http://img819.imageshack.us/img819/4118/copera.jpg3. CodingAici sunt niste standarde foarte clare, asupra carora trebuie sa te documentezi, din cate vad in sursa site-ului. Revin imediat asupra problemei.Eu cand am un layout taiat pe bucatele cum vreau eu, ma pun sa fac structura de baza a site-ului, daca nu lucrez pe un wordpress, prestashop sau alte platforme de continut la indemana oricui. Calculez totul la pixel si mai las 10px intre elementele orizontalte, ca sa ofer un padding pentru crossbrowser compatibility, ma minunam de fiecare data, in primii 3 ani cand comparam in 5 6 browsere/versiuni chestia la care lucram. Poti sa ai mai multe browsere pe comp, dar diferite versiuni e destul de greu, am cautat pe net tot felul de rendere calumea si am dat pana la urma peste Adobe BrowserLab, e genial, il folosesc tot timpul, https://browserlab.adobe.com iti scoate un preview de la toate versiunile de browser. Si o concluzie trista la care am ajuns eu, e ca, FF3.6 pe OSX randeaza diferit fata de FF3.6 pe Windows, ceea ce e trist, greu le impaci pe toate, dar na, multa munca, In cod nu au ce cauta <tag style=”......”>, e rahat, de aceea ai clase si id-uri, foloseste-le, clasele sunt pentru elementele care se repeta si JavaScript in general iar ID-urile pentru elementele statice, majore care nu se repeta, tot in general si asta, se poate varia bineinteles.Vad ca e table based aproape tot site-ul, aici nu zic doar un lucru, foloseste DIV-uri, sunt MULT mai flexibile, zboara ca de nebune cand nu acoperi toate fronturile, ideea e ca daca nu ii zici tu mura in gura in css exact cum sa fie, pe IE va arata intr-un fel si pe FF in alt fel (aici e mai trist la tabele, de aceea DIV uri), fiindca motoarele de randare ale browselor au standarde diferite, e trist, dar daca acoperi toate fronturile totul e ok, adica e mai sanatos sa pui un padding: 0 si margin:0 decat sa lasi la voia sortii, poate IE-ul iti ia ierarhia si atribuie divului tau X o proprietate ierarhica de la un div de deasupra, iar cand apar chestii de astea, poti sa le faci cu intentie ca sa modifici ierarhic tot ce e sub un div, iar daca intr un subdiv vrei ceva diferit foloseste in finalul declaratiei !imporant (padding: 10px !important;) Platformele astea online vin cu template uri gata facute, dar cam toate se pot modifica usor, si care nu se pot, perseverezi, asta este , fie ca sunt smarty templates sau cod simplu. Trebuie doar sa ai niste cunostinte de baza despre fiecare.4. TestingAici e clar, testezi in toate browserele, load times, poate omul nu are JavaScript enabled, sa ai un nice fallback pentru toate elemente dinamice controlate de JS, pe diferite rezolutii etc.5. reCodingIn mod constant incearca chestii noi, vezi ce merge mai bine, vezi ce le place vizitatorilor mai mult etc.reUsabilityBis.M-am saturat, nu ma mai leg de SEO, oricum acolo sunt incepator.Tot ce am scris mai sus, aproape zgarie oala cu toate chestiile care ar trebuie stiute, aici intervine experienta, timpul, dorinta de a invata ceva, eu sincer sunt foarte pasionat de asta, de aceea am invatat foarte usor. Cat despre urmat toate exemplele astea .... 80% din dati se duce tot dracului, fiindca clientul roman e un ciufut si jumatate, bun la toate, care stie pana si cum trebuie facut un site. Guideline urile astea le poti urma 1100% cand iti faci tie un site sau unui clinet... open minded sau strain In restul cazurilor .... iti bagi cracii ... si ii pui omului poza cu pisica lui pe site daca vrea ... e trist.Sper sa fie de folos si altora ce am zis eu aici, completati daca aveti cu ce, nu sunt eu guru din teba sa le stiu pe toate etc.O sa incerc sa vin si cu un design pt rowebs, nu astazi, sa vad cum am timp, eu de obicei cand lucrez, ma pierd vreo 8-9 ore, si ard un pachet de tigari intre timp. Saptamana asta probabil.AM PICAT!! SOMN!!! Edited January 17, 2011 by rampart 2 1 Quote
Oust Posted January 17, 2011 Report Posted January 17, 2011 Imediat ce ajung acasa il citesc, si il pun in aplicare, multumesc mult.+1 rep. Quote
Flubber Posted January 17, 2011 Report Posted January 17, 2011 Daca era scrisul negru ce avea? Eu cum il citesc daca am tema default? Prin "select all"? Quote
rampart Posted January 17, 2011 Author Report Posted January 17, 2011 Daca era scrisul negru ce avea? Eu cum il citesc daca am tema default? Prin "select all"?Fixed! Sorry 1 Quote
cmiN Posted January 17, 2011 Report Posted January 17, 2011 Putini scriu tutoriale/observatii (chiar daca ar reinventa roata) si alte chestii de genul mai mari de 50 cuvinte. Nu numai din cauza asta ci si pentru ca e un post destul de interesant si folositor (chiar daca majoritatea raman undeva ingropate si mult depasite de un cacat de la off topic cu audienta) dau +1 rep. Un singur sfat ... (desi sunt sigur ca-l aplici) cauta tot timpul sa inovezi/progresezi, sa-ti depasesti conditia actuala. Quote
rampart Posted January 17, 2011 Author Report Posted January 17, 2011 Mersi!Razand glumind, din fiecare proiect pe care il am, imi fac un challenge pentru mine, tot timpul compar cu chestii trecute, sa iasa mai bine ca si ultimul, bine, aici e nuanta, depinde de client, cu unii (a se citi majoritatea clientilor romani) nu se poate, el a vazut un site, si il vrea ca si ala, sau atat ma percuteaza pe un mockup care l-am facut, sa il modific, incat iese o mare frectie la un si mai mare picior de fag, carpen sau alti pomi.Anyhow, thanks, mai sunt mult mai multe chestii pe tema, clar, dar sa fiu sincer cu tine, nu am certitudinea ca cineva le citeste cap coada (adica 90% vor citi inceputul si sfarsitul ), altfel m-as obosi sa scriu mai multe chestii, dar lumea e .... cum sa zic sa nu sune prost, majoritatea vor chestii gata facute, dorinta de a invata nu prea mai e (dau vina pe scoli aici), mai ales pe forumuri cum e asta unde 90% din utilizatori sunt lipitori.Oricum asta am zis .. daca Oust tot m-a intrebat sa fac putin mai oficiala treaba.Si eu, la randul meu, pun intrebari pe aici pe diferite teme, dar....cum se prezenta ieri unul care zicea ca el stie foarte bine windows, diferenta e ca ma documentez greu pana sa pun o intrebare fiindca trebuie: 1. sa inteleg un posibil raspuns 2. sa inteleg ce fac ca sa pot merge mai departe pe firul epic. Sper sa vin si cu alte cele. Quote
