www.guitarworld.projektas.in

paredagavau kaip dabar.

ir kokia TVS rekomeduotumet man.

dofka rašė:

va paziurejau wordpress pamoka bet nieko beveik nesupratau nelabai isami pamoka buvo.

Jau ne kartą minėjome, jog ten yra pamoka-„walkthrough“, kurioje parodoma dizaino integravimo į WordPress TVS eiga.

Pirmas įspūdis aplankius tinklalapį — chaosas. Kadangi bus sunku paaiškinti, apie ką kalbu, padariau paveikslėlį: http://www.ipix.lt/images/66254318.png.

1. Per didelis tarpas tarp šoninės srities ir turinio bloko. Visur kitur tarpai tarp blokų yra kur kas mažesni, todėl čia didelis tarpas atrodo negražiai. Tarpą gali sumažinti bent jau perpus.

2. Nepatinka toks nevykęs „Naujienų apžvalga“ ir „Naujausi video“ blokų atskyrimas. Dabar atrodo lyg padrikai sudėti tie 2 blokai, o tai ir kuria bendrą tinklalapio chaoso vaizdą. Štai padariau pavyzdį, kaip galėtų atrodyti blokų viršus.



Kaip matai, blokus atskyriau paprasta linija (įspaustos linijos efektas). Taip pat pridėjau ikonas, kurias radau ikonų kataloge iconfinder.net tinklalapyje. Norėdamas dar pagražinti vaizdą, pažaidžiau su pavadinimų teksto spalvomis. Nesakau, jog turi daryti būtent taip, kaip parodžiau, tačiau idėją daviau.

Beje, lietuvių kalboje pavadinimo kiekvienas žodis nėra rašomas didžiąja raide (pav.: „Naujienų Apžlvagos“, „Naujausi Video“). Jei tinklalapis būtų anglų kalba, tada taip, pavadinimo žodžiai rašomi didžiąja raide (išskyrus kai kuriuos žodžius, pav.: „of“ -> „Dawn of War“). Be to, ne „Naujiausi“, o „Naujausi“ (nereikia i raidės po j).

3. Nelabai gražūs tie mygtukai, užtektų ko nors kur kas paprastesnio. Papaišiau pavyzdį.



Šis variantas atrodo kur kas estetiškiau, nėra bereikšmio pilko fono ant slideshow mygtukų. Žinoma, jokiu būdu nesakau, jog tai geriausias variantas, tačiau jis vis tiek geresnis už tavo dabartinį.

4. Bloko antraštėje nurodei „Naujienos“, tai kam vėliau dar nurodai „Tinklalapio naujienos“? Na, nebent nori talpinti ne tik tinklalapio, bet ir muzikos naujienas. Tačiau didžiausia problema ne tame. Man nepatinka, jog naujienos numeruojamos, bet nenurodoma naujienų data. Kas iš tos naujienos, jei nežinau, kada ji buvo parašyta? Be to, čia ryškiai netinka šriftas. Ir jokiu būdu neryškink viso teksto (bold)!

5. Meniu pakankamai geroje vietoje, meniu punktų teksto dydis geras (nors galėtų būti šiek tiek mažesnis), tačiau vaizdą gadina tos rodyklėlės. Ką jos reiškia? Akivaizdu, jog jos turėtų pagražinti bendrą tinklalapio vaizdą, bet yra atvikrščiai. Iš karto matau, kad tai standartinės rodyklės iš Photoshop „Custom Shapes“. Ir kodėl jos blankiai oranžinės? Neturėtų būti nei blankumo, nei oranžinės spalvos. Rodyklės arti šoninio bloko krašto, kur jau pradeda matytis pagrindinis dizaino fonas (mėlynas), kuris iš karto „pjaunasi“ su oranžinės spalvos rodyklėmis. Išvada: išimk tas rodykles ir šiek tiek sumažink teksto dydį meniu punktams, vaizdas bus kur kas geresnis.

6. Kodėl tiek daug vietos skirta viršutinei daliai (headeriui), jei jos fonas pilkas ir visiškai neišvaizdus? Lankytojas, atėjęs į tinklalapį, pirmiausia pamato tinklalapio viršų (dažniausiai nuo kairės į dešinę), tad ar tu tikrai nori, jog lankytojai matytų tavo pilką bloką ir masyvią reklaminę antraštę? Logotipą iš meniu srities galėtum perkelti į viršutinį bloką, o pastarąjį suderinti pagal logotipą (pakeisti fono spalvą ir pan.). Reklaminę antraštę tada galėtum pastumti labiau į dešinę, kad tilptų logotipas.

7. Kodėl visur tekstas paryškintas? To neturėtų būti, nes kaip tu žadi beišryškinti kokį svarbų žodį ar sakinį, jei ir taip viskas paryškinta? Naudok bold labai atsakingai. Be to, tekstas pasislinkęs nuo viršaus (tai yra gerai), tačiau paveiksliukas dešinėje yra prie pat naujienų bloko apatinės dalies. Sulygink tekstą ir paveiksliuką, kad jie būtų vienodai atitolę nuo naujienų bloko.

Na, yra ir daugiau visokių dalykų, tačiau neturiu tiek laiko, kad galėčiau viską aptarti. Dar labai į akis krito nevykęs footeris. Kodėl jo fonas pilkas, jeigu pagrindinis tinklalapio fonas mėlynas? O tuo labiau, kam tas žalias apvalintas blokas? Jis nesiderina nei su pilka footerio spalva, nei su pagr. tinklalapio fonu.

Ir galiausiai, nepatariu pasikliauti vien HTML, nes dabar jei norėsi ką nors pakeisti dizaine, gausi redaguoti HTML kodą kiekviename sukurtame faile (index.html, kontaktai.html, akordai.html, pratimai.html ir t.t.). Žodžiu, kuo daugiau failų, tuo didesnę naštą užsikrauni, nes ateityje tikrai reikės ką nors keisti dizaino struktūroje, todėl gausi redaguoti n failų ir be reikalo gaišti laiką. Todėl tam ir yra skirtos turinio valdymo sistemos. Žinoma, mokymosi tikslais gali apsiriboti su HTML/CSS, tačiau nesitikėk sukurti rimtą tinklalapį su paprastais HTML failais.

Čia visą straipsnį parašei ;P aš žinau kad webas netikęs pats matau bet tiesiog nekyla idėjos.

menių punktai apskritai gal per dideli reiks ziurėt man neaišku koki šriftą naudot.?

Patarimai tikrai naudingi ju laikysiuos. Dėkui už logotipu nuoroda man jos labai reikėjo
pagyvint webą.

Paredaguosiu pagal tavo patarimus ir idėsiu vėl .

Nemoku visiškai php{galėtum idėt pamokų ;P} tad nelabai išeis ir i TVS idėt webą.

Net nežinau nuo ko čia pradėt.. Siūlyčiau pirmiausia nusipiešt gerai atrodantį dizainą ir tik tada koduot, nes kai dar prisideda html/css žinių stoka tai galutinis variantas atrodo baisiai.
Dabar dėl dizaino: viską kas blogai sunku būtų net išvardint, tai duosiu nuorodų į kelis itin gerus straipsnius:
How CRAP is your design
Visual hierarchy in web design
The importance color in web design
Common mistakes in web design
EDIT(dar pora radau):
10 Typography tips for web designers
20 dos and donts of effective web design

Dar kodavimui yra geras screencast(su 960gs frameworku):
http://net.tutsplus.com/videos/screencasts/the-ultimate-guide-to-creating-a-design-and-converting-it-to-html-and-css/

Vaizdas dabar kur kas geresnis, tačiau vis dar yra keletas dalykų:

Meniu šriftas netinkamas, užtektų ir Arial šrifto. Visokie egzotiniai šriftai čia netinka, nes tinklalapis ne apie kokį senovinį žaidimą ar pan. Visada šriftą rinkis pagal tinklalapio temą. Šiuo atveju šriftas turėtų būti „švarus“, be jokių išraizgaliojimų ir pavingiavimų. Štai apie kokius „švarius“ šriftus turiu omenyje: http://www.fontsquirrel.com/fonts/Cantarell. Apskritai, pasižvalgyk fontsquirrel.com tinklalapyje — rasi tikrai profesionaliai atrodančių ir nemokamų šriftų.

.naujiena { padding: 10px 10px 10px 10px; font:Verdana, Arial, Helvetica, sans-serif; color:black;font-style:normal; }
h1 {font:Verdana, Arial, Helvetica, sans-serif; font-size: 24px; text-align:left; color:#993300; }
h2 {font:Verdana, Arial, Helvetica, sans-serif; color:black;font-style:normal;}
h3 {font:Verdana, Arial, Helvetica, sans-serif; font-size: 24px;  color:#993300;}

Taip pat rekomenduoju naudoti kuo mažiau šriftų dizaine (apie tai rašiau straipsnyje „Tinklalapių kūrimas: primieji žingsniai“. To pasekoje gali išimti iš visų identifikatorių savybę font (ten, kur priskiri šriftą) ir įdėti į body identifikatorių.

body { font-family: Arial, Helvetica, Tahoma, sans-serif; background: url(../images/foniukas.png); }

Kaip matai, nurodžiau Arial kaip pirminį šriftą. Manau, kad jis kur kas labiau tiks negu Verdana ar kiti šriftai.

Dar noriu tavo dėmesį atkreipti į tuos mygtukus, apie kuriuos kalbėjau anksčiau. Turbūt paėmei ikonas iš iconfinder.net svetainės. Tos ikonos gražios, tačiau šiam dizainui netinka. Reikia ko nors ne 3D stiliumi, o paprastų, minimalistinių mygtukų (panašių, kokius aš anksčiau padariau). Štai tokio stiliaus mygtukai tiktų, tik gal reikėtų juos sumažinti:



Kai turėsiu laiko, galbūt dar kokių patarimų duosiu.

kai kasnors parodo pavyzdi pagalvoji juk zinoma taip turetu buti.

istikruju tai ka parodei yra nuostabu. aciu uz patarymus

P.S gal jei turetum laiko padarytum joomla TVS pamoka butu labai liuks.

Nelabai suprantu, kodel tu darydamas toki puslapi, ji darai HTML/CSS, o ne PHP, visgi puslapiu yra nemazai, o cia tokiam puslapyje manau zmones noretu ir koki nors komentara parasyti ar dar koki nors dalyka pasidaryti...
Paskaityk apie web 2.0 kur ziurima tik i vartotoja

zina. butent i vartotoja ir noriu atsizvelgt. as noriu i TVS idet savo weba tik nemoku.