M-am uitat peste siteurile lui:  dojo, dark4ever si am observat ca nu folosesc nici un fel de grid in layoutul siteurilor.GrimCris foloseste un grid pe 16 coloane,  e de apreciat ca foloseste totusi un grid(intr-un site , ce il are aici pe forum...nu mai stiu cum se numea)
Recomand calduros sa folositi un anumit grid in conceperea siteurilor voastre. Sa discutam putin despre ce inseamna grid si poate cu informatiile de aici sa cautati mai departe pe net sa intelegeti exact ,cum si la ce folosesc gridurile astea.
Pai ele folosesc la pozitionarea elementelor in pagina.Folosirea unui anumit tip de grid are rolul de a reda o nota placuta grafic, usor de parcurs de catre ochi si o proportionare cu iz estetic sa zicem asa.
Sunt extrem de importante aceste griduri.Metoda cu "le asez si eu pana imi convine locul lor" nu e una ce trebuie abordata in nici un fel.
Gridurile sunt de mai multe feluri si ele se "adopta" in functie de cantitatea de informatii ce o aveti pe site(ma rog....e la aprecierea fiecaruia ce fel de grid considera ca e mai bun pentru siteul sau).

Gridul pe 12 coloane.

              Gridul pe 12 coloane este cel mai ideal si usor de folosit.
Asta datorita ponderei mari de rezolutii 1024 pe 768.
La aceasta rezolutie a monitorului ,rezolutia browserului este de aproximativ 1000 pe 600 pixeli..prin urmare o latime a paginii de 960 de pixeli ar fi ideala... De ce 960 va puteti intreba.... Pentru ca 960 este o cifra extrem de maleabila.Ea se poate divide cu :2,3,4,6,8,10 ,20 etc. Gridul pe 12 coloane inseamna:
       latimea paginii de 960px
       12 coloane cu latimea de 60 de pixeli
       la stanga si la dreapta fiecarei coloane o distanta de 10 pixeli
       arata cam asa:

      http://960.gs/demo.html

(maaa cat mi-a luat sa gasesc siteul asta  )
Tot la linkul de mai sus aveti si un exemplu de grid pe 16 coloane.(la acest grid coloanele au 40 de pixeli)
Spatiul dintre coloane ....upssss...am uitat cum se numeste...dar linia(imaginara) ce desparte spatiul dintre coloane in doua parti egale se numeste linie de grid. Cu ajutorul ei va puteti imparti gridul pe 12 coloane sau cel pe 16 in cate parti doriti. De exemplu putem imparti gridul pe 12 coloane in trei parti: 3 parti a cate patru coloane fiecare....
      
         The big ad.

   The big ad nu are neaparata legatura cu gridurile dar vorbim despre el pentru a intelege ca , a avea un grid nu inseamna sa asezam fiecare element (headerul, o poza, paragraful de text etc) dupa un sistem perfect simetric...asta face ca ochiul sa fie "tensionat" si oboseste repede in urmarirea informatiilor.
The big ad este o proportie de 336 pixeli pe 280 pixeli si este aleasa ca proportie extrem de utila  in ceea ce priveste accesibilitatea precum si placuta grafic de nu stiu ce "trupa" de "cercetatori" internauti...nu mai retin cine erau astia cu the big ad(cautati si voi pe net....???? nu stiu daca veti gasi totusi). Puteti folosi deasemeni pentru elementele mai mari din site, un raport la proportia "the big ad".
Ex:336 pe 280 este the big ad.....336 imartit la 280 = 1.2
       300 impartit la 250 = 1.2   etc...
(eu personal nu folosesc aceste raporturi intre latime si lungime ca la dimensiuni mai mari aceste raporturi arata cam naspa , prin urmare nici la dimensiuni mici nu am incredere in ele).

      Regula divina
  
  Regula divina stim toti cum se foloseste.O readuc in discutie pentru a va reaminti de ea....Folositi-o in siteurile voastre.(eu pe asta o folosesc in mare majoritate) Regula divina se refera la numarul phi 1.618 si cum a fost folosita de leonardo da vinci in toate tablourile sale, mai e folosita in muzica, fotografie, natura(dupa regula asta sunt aranjate semintele de floarea soarelui de exemplu) sculptura, arhitectura, si chiar la bursa (vorbesc serios)  putem sa o folosim si noi intr-un amarat de deisgn.
Cautati pe net  despre regula divina in web design...si gasiti acolo tot ce va trebuie.

   Print grid.

   Doar pentru a edifica ca aceste metode nu sunt inventate de grafic designerii web....Ele exista de cand lumea (serios....cartile religioase, "scrise" de calugari din diferite ordine aveau dimensiunile textului dupa un sistem de grid  ce-l tineau secret...ma rog , la acea vreme..de fapt era dupa un sistem ce-l voi prezenta mai jos bazat tot pe regula divina).
Daca vreti sa faceti un pliant sau o carte de vizita sau orice altceva haideti sa vedem un grid pentru a ne folosi intr-un mod foarte avantajos.(poate fi folosit si in web desigur....sa pozitionati textul siteului dupa gridul urmator este o chestie extrem de  misto...si foarte estetica)



   http://img291.imageshack.us/img291/1748/64822834wq9.jpg







Cam asa e impartita o pagina pentru inceput.De exemplu..o pagina de format A4 are dimensiunile 297 pe 210 .Aceste dimensiuni nu sunt luate la intamplare. Raportul dintre ele este de 1.414. Daca impartim foaia in 4 parti egale raportul dintre laturile dreptunghiurilor rezultate este tot de 1.414. Si daca vom continua sa injumatatim  ceea ce rezulta ghiciti care e raportul dintre lungimile si latimile rezultate ...tot de 1.414.Si daca vom mai injumatati ....tot 1 .414. Pare extraordinar...dar chiar asa e.

http://img237.imageshack.us/img237/5030/finalme7.jpg


Dreprunghiurile mari sunt lesne de inteles(observati ca diagonalele paginii sunt si diagonalele dreptunghiurilor. Impartirea in cele doua coloane s-a facut prin imartirea laturii dreptunghiului la 1,618 ...regula divina.
Daca veti considera pagina voastra web...si veti prelungi liniile desenului de mai sus iese un grid pentru un layout extrem de functional.

http://img166.imageshack.us/img166/2410/...vinnm7.jpg

(liniile nu sunt drepte ca imi era lene sa le fac......eram sigur pe o salvare a mea a acestui tip de grid dar nu o mai gasesc.....si l-am facut pe asta asa la repezeala...scuze....)

Mai gasiti pe net o gramada despre griduri.


       In final...

In final ceea ce am vrut sa spun e urmatorul lucru. Nu ai nevoie de talent ca sa faci un grafic placut.  Asta se poate invata...exact ca si pictura...nu ai nevoie de talent ca sa pictezi (doar daca vrei sa fi michelangelo sau salvador dhali)..este o deprindere ca si matematica...sau chimia. Photoshopul e o unealta ce te ajuta sa-ti indeplinesti un scop. Scopul tau e sa faci un site...Bineinteles  asta implica sa stii  si photoshop, dar nu judecati "stiu photoshop css etc..deci stiu sa fac siteuri...ci judecati astfel..."stiu sa fac siteuri, prin urmare stiu photoshop bla bla bla.
Regulile pentru un grafic placut se numesc reguli de compozitie.Ele sunt dificil de stapanit pentru ..nu stiu....pictura, sau sculptura...dar pentru un amarat de site nu iti trebuie cine stie ce studiu.Cautati pe net..gasiti mai multe.

This post was last modified: 05-13-2008 11:46 PM by comosicus22.

Aham... "M-am uitat peste siteurile lui:  dojo, dark4ever "

zi si mie peste care site-uri d-ale mele te-ai uitat ca sa nu mor prost

iar incepi stimabile?!!! nici nu terminasem de revazut ...sa nu fie ceva in neregula....era ala cu apa..osmoza si nu mai stiu cum....
V-am ales pe voi 3....si in tutorialele viitoare tot asa am sa fac( in caz ca o sa mai fac) pentru ca sunteti drept exemplu pentru cei de aici.... si consider ca e bine ca noi astia mai mici sa evitam unele chestii pe care voi trei  le desconsiderati..sau pur si simplu nu e domeniul vostru.
Dar cand pui un site....degeaba esti tu expert in seo...ca seo nu se vede pe monitor.....si cum sintagma "nu ma pricep la grafica" nu ajuta prea mult....mai incerc si eu pe ici pe colo sa ofer o cale ceva...mai schimb informatii...asa mai ivat si eu cate ceva.


Vezi.....evoluez pe treapta amabilitatii......nu forta nota te rog frumos...ca abia rezist sa nu zic cateva...

This post was last modified: 05-13-2008 11:57 PM by comosicus22.

ca offtopic:

1. NU inteleg de ce ma iei pe mine drept exemplu.
2. NU cred ca am zis pe undeva ca as fi vreun guru in SEO, exista altii in comunitatea asta mult mai buni si mai priceputi decat mine in orice domeniu.
3. Site-urile alea au fost afisate la Review! Adica sunt constient ca nu sunt nici pe departe perfecte! Vroiam sugestii, comentarii, etc. Deci nu au fost acolo pe post de exemplu "ASA DA!" .
4. NU prea vad ca evoluezi pe treapta amabilitatii si nu vad cu ce am fortat nota! Ti-am vorbit frumos si te-am intrebat frumos, dar vad ca tu ai ceva impotriva mea.

On topic:

Mersi de precizare si de tutorial..

Eu iti spun sincer ca in viata mea nu am auzit de gridurile astea. Din pacate nu am stat sa le studiez .. eu imi fac layouturile bazat pe coloanele pe care le doresc, posibile dimensiuni de elemente (care imi vor da pana la urma "setarile" de coloane), imagine din header (posibile reclame acolo) etc.

Este interesant articolul, dar sincer eu nu vad rostul gridurilor astora. Stiu ca voi parea proasta la faza asta, dar chiar nu m-a interesat aspectul. Este interesant insa articolul, asta e clar.

eeee am pe naiba impotriva ta.....
imi faci impresia ca mai mult de 20 de ani n-ai (si daca e asa...te invidiez )
oricum.....daca mai am nevoie de ceva informatii o te rog sa mi le impartasesti (la seo sau cms-uri sunt mai prost decat prevede legea) daca vrei bine daca nu ..iarasi bine...
dar de acum incolo refuz orice alta discutie cu tine ca vad ca esti cam sensibil....si vorbim mult...asa ca sa pierdem vremea.....alta treaba n-am
(eu am fost de vina ca ti-am raspuns...upssss si acum o fac iar )

bafta si toate cele bune....

aaaaa inca ceva....
pot sa fac un tutorial despre toti pasii ce trebuiesc urmati la conceperea unui site (doar grafica html si css) si sa folosesc siteul tau drept exemplu?!!!
ala cu osmoza......adica discut despre el..ce cred eu ca e bine, prezint argumentele necesare pentru asta, apoi ce cred ca nu e bine, deasemeni, prezint si aici argumentele necesare...il modific , prezint argumentele necesare pentru modificarile ce le voi face..si om vedea ce iese....
pot?!!!
si daca iti e pe plac....e al tau...in formatele necesare(html ,css, psd ,gif jpg..cum vrei tu...) cu drepturi , stanguri tot ce vrei....il modifici in functie de necesitatile tale cu cms-uri (nu ma pricep aci) ...si..ce sa zic....daca accepti..si iti place...cu placere ti-l ofer...serios
macar sa invatam amandoi cate ceva in plus..........daca nu....ramane ca mai sus
bafta...si vremuri frumoase

This post was last modified: 05-14-2008 01:19 AM by comosicus22.

daca incerci sa studiezi mai indeaproape siteurile "celebre" ca sa zic asa (eu cu css-ul meu umblu des pe la cssbeauty, cssvolt, best css deign etc) vei avea surpriza sa observi ca fara nici o exceptie, repet, fara nici o exceptie, siteurile de acolo se incadreaza intr-un tip de grid.
tehnica folosita este destul de simpla.....eu am salvate gridurile de diferite feluri sub format jpg...si cand ajung la codare pun jpg-ul ca ca background in body...astfel am o viziune clara de cum va arata siteul in cadrul gridului direct in browser.... asta e o tehnica facuta cunoscuta de.....offfff.....(intotdeauna uit sa ofer creditele necesare persoanelor in drept...adica le uit numele)....HUIN..  parca..nu mai stiu cum il chema.
am incercat sa-ti intampin nelamurirea: "dar sincer, eu nu vad rostul gridurilor astora"
de fapt rostul lor e ceva mai complex..tine de estetica, de compozitie. tipul lor iar ..tine de layout lichid sau fix...dar aici sunt multe de zis..poate cu alta ocazie.


scuze..iar revin dar imi statea pe creer ca nu stiam numele celui ce a facut celebra tehnica cu gridul.jpg pus ca background in body.....Khoi Vinh e numele lui...e director la nytimes.com (new york times ) si asta e siteul lui...
o gramada de articole extrem de interesante si folositoare
http://www.subtraction.com/about/

This post was last modified: 05-14-2008 02:29 AM by comosicus22.

eeee am pe naiba impotriva ta.....
imi faci impresia ca mai mult de 20 de ani n-ai (si daca e asa...te invidiez )
oricum.....daca mai am nevoie de ceva informatii o te rog sa mi le impartasesti (la seo sau cms-uri sunt mai prost decat prevede legea) daca vrei bine daca nu ..iarasi bine...
dar de acum incolo refuz orice alta discutie cu tine ca vad ca esti cam sensibil....si vorbim mult...asa ca sa pierdem vremea.....alta treaba n-am
(eu am fost de vina ca ti-am raspuns...upssss si acum o fac iar )

bafta si toate cele bune....

aaaaa inca ceva....
pot sa fac un tutorial despre toti pasii ce trebuiesc urmati la conceperea unui site (doar grafica html si css) si sa folosesc siteul tau drept exemplu?!!!
ala cu osmoza......adica discut despre el..ce cred eu ca e bine, prezint argumentele necesare pentru asta, apoi ce cred ca nu e bine, deasemeni, prezint si aici argumentele necesare...il modific , prezint argumentele necesare pentru modificarile ce le voi face..si om vedea ce iese....
pot?!!!
si daca iti e pe plac....e al tau...in formatele necesare(html ,css, psd ,gif jpg..cum vrei tu...) cu drepturi , stanguri tot ce vrei....il modifici in functie de necesitatile tale cu cms-uri (nu ma pricep aci) ...si..ce sa zic....daca accepti..si iti place...cu placere ti-l ofer...serios
macar sa invatam amandoi cate ceva in plus..........daca nu....ramane ca mai sus
bafta...si vremuri frumoase

Am 21, curand 22.
In legatura cu tutorial pe baza site-ului osmoza-inversa.ro, ma indoiesc ca e posibil. NU de alta dar seful meu e cam sensibil cand vine vorba de chestii de genul asta.

Daca tot vrei sa faci tutoriale, poti lua un template free si sa discuti pe ala.

O alta chestie, site-urile pe care le-am prezentat eu pe forum, sunt site-urile companiei pt care lucrez, nu sunt site-urile mele. In concluzie: au fost facute dupa placul sefului meu.

In legatura cu gridurile alea de care zici, dreamweaver are o optiune simpla View - Grid
si ti-l setezi cum vrei tu, de cati pixeli vrei tu. Are inclusiv "snap to grid". Nu ca le-as folosi vreodata, ca eu folosesc mai mult notepad-ul ca si editor html/php.

Ca si Dojo de altfel, eu nu vad pentru ce ai avea nevoie de ele, imi asez pagina cum vreau calculand dimensiunile in pixeli. Dimensiuni pe care le setez din css. Dar in fine, nu sunt eu mare designer si nu cunosc toate tehnicile astea.

Revenind, putem discuta cat vrei si in ce domeniu vrei atata timp cat pastrezi o anumita tonalitate si o anumita decenta a conversatiei. Daca vrei deschidem un topic la offtopic si vorbim acolo despre ce vrei tu, in contradictoriu sau nu, atata timp cat venim amandoi cu argumente serioase si valabile discutia nu poate fi decat una constructiva.

E ultimul meu reply aici. . Deschide thread la offtopic si da-mi un pm si discutam acolo despre ce vrei tu.