Web Design

Se stie ca in general cel mai bine un site este creat de un programator si de un designer. Mereu m-a atras partea de programare web(php mysql) dar cand a venit vorba de a face ceva frumos din ceva functional nu mi-a iesit niciodata asa cum ma asteptam..
Astazi m-am uitat la site-ul unei firme de web design ( http://www.webstyleexpert.ro/ ). Am observat ca peste tot sunt folosite tabele si nu DIV-uri. Acum depinde de gusturile fiecaruia dar din cate stiu un adevarat profesionist foloseste div-uri.

Ati putea va rog sa-mi vindeti cateva ponturi spre a crea un design, un template?
Cel mai bine cum ar fi. Sa creez un design in Photoshop sa-l impart in bucati si sa-l modific dupa ce il salvez?

Voi cum ati incepe cand faceti un site?

Edited by crs12decoder, 04 January 2010 - 16:10.

Eu creez layoutul, il tai eu in bucatile pe care ma intereseaza, nu folosesc slice-uri, apoi il implementez in pagini web ( de obicei xhtml 1 transitional cu css 2.1 ) si am grija sa fie codul valid conform standardelor W3 ( http://validator.w3.org/ ).

Calea pe care o vei urma ca sa obtii site-ul final ramane absolut la latitudinea ta. Exagerat vorbind, poti face grafica si in mspaint, daca tie personal iti vine mai bine asa si poti obtine acelasi rezultat. Daca nu stii de unde sa incepi, poti citi diverse tutoriale, le urmezi, si apoi tragi concluzia daca ti se potriveste stilul sau nu.
Legat de table sau div, poti da un search de genul "table vs div" sau "table vs css", ca sa vezi avantaje si dezavantaje pentru ambele metode. In principiu e diferenta dintre put si lac, table desi e lasat in urma de ceva vreme, nu inseamna ca e gunoi si nu poti realiza site-uri la fel de bune cu el. Diferenta se reflecta in mare la marimea codului, usurinta de a modifica ulterior diverse aspecte ale site-ului, etc. De asemenea, daca ai de gand sa vinzi design mai tarziu, mai mult ca sigur vei intalni clienti care stramba din nas daca incerci sa le vinzi table in loc de div, conceptul general fiind ca div e la moda acum. Dar daca tot de abia incepi, ar trebui sa incerci cu div direct.
Cat despre design, daca tot folosesti PS, incearca sa il imparti in slice-uri dupa ce ai terminat design-ul. Vei putea organiza cu usurinta proprietatile pentru fiecare slice, de la nume pana la format si calitate. La fel ca si mai sus, un eventual client pentru acel design va aprecia impartirea in caz ca are nevoie sa modifice aspecte minore si ii oferi PSD-ul. Iti va veni si tie mai usor sa faci modificari ulterioare, de exemplu sa schimbi doar cateva culori si sa salvezi toate slice-urile o data, etc.
Nu ramane decat sa incerci diverse tutoriale si sa le probezi practic ca sa vezi cum te descurci cel mai bine.

Fac layoutul de la 0 in html si css si de asemenea tin foarte mult sa fie valid conform w3. Folosesc PS-ul doar pentru a face diferite butoane, logouri, bannere etc si pentru a le optimiza.
Legat de table vs div... div-ul are mai multe avantaje, dpdv al marimi codului dar si dpdv SEO.

Eu pana acum cand faceam un site, luam un template si scoteam tot design-u din el. Pastram doar "scheletul" css. Dupa care inlocuiam eu cu bannerul care imi convenea si cream eu in PS fiecare bucatica in parte. Design pornit de la 0 n-am facut niciodata. de aceea am vrut sa vad cum se face.

prin afara se lucreaza intr-o proportie foarte mare cu div . nu prea se mai folosesc tabele . romanii in general raman in urma .

asta evident , asa cum s-a spus si mai sus , nu inseamna ca tabelele sunt neaparat ingrozitoare ... dar sunt de preferat din varii motive si sunt si la moda .

cat despre aspect ... o data ce inveti sa lucrezi cu div practic partea de html o sa fie ingrozitor de simpla ... iar ca sa inveti css ... experimenteaza . deschide w3c.org intr-o parte (sectiunea de explicatii - nu mai stiu cum ii zice) si apoi modifica templateuri de pe net .

lucrez designul in Photoshop pe un grid - de regula 960px (o sa vezi ca te ajuta la codare sa stii clar marimile coloanelor , etc) . cauta pe net css grids si o sa gasesti o multime de varianta - sau cel mai bine mergi pe smashingmagazine.com si cauta acolo grids/frameworks si o sa gasesti resurse de calitate .

apoi dupa ce am lucrat designul ... ma uit la el si il sectionez , nu in photoshop ci pe foaie . si pe foaie am grija sa stabilesc numele id'urilor/claselor pe care urmeaza sa le folosesc (de regula e ceva in genul outer-wrapper , header , menu , content , sidebar , footer) . dupa ce mi-am facut un plan de atac ... fac un html de la zero in care inserez divurile necesare , etc si continut .

si apoi fac un css , bag un css reset - cauta pe net o sa gasesti explicatii , si apoi incep si fac modificarile necesare incepand de sus in jos .

 omudelacolt, on 4th January 2010, 20:07, said:

http://960.gs/

Si eu am auzit ca se lucreaza mai repede cu 960. Personal nu l-am folosit.. unii clienti ar putea sa iti ceara ca site-ul sa se intinda pe toata pagina.. dar aici deja intram in alta arie si deviem subiectul.

Cred ca informatiile de pana acum iti sunt necesare

Edited by DarkAngelBv, 05 January 2010 - 20:07.
Fara Quote integral la postul anterior

da , ala e .

ideea nu tine neaparat de 960px . poate sa fie orice marime .  nu mai pierzi timp stand si calculand cat trebuie sa fie wrapperul , sau cat de lat trebuie sa fie continutul , etc , etc ... te scuteste de toate astea .

in plus ... arata bine , se bazeaza pe anumite reguli de design (atunci cand lucrezi cu 3 sau 5 coloane) si din punct de vedere vizual e mai placut , mai ordonat , etc .

RO?)

Deocamdata ca incepator ma limitez la a face site-uri rigide. Neexpandabile.

Ok am facut un design in Photoshop.. evident ca un newbie m-am lovit de urmatoarea problema:
photoshop-u salveaza slice-urile(toate) ca poze in html (src). direct. Aveti idee daca exista vreo modalitate in photoshop de a declara slice-urile ca "zone editabile" in asa fel incat sa pot sa inserez text in ele?.

Stiu ca eu daca vreau sa fac un div in care inserez text, in css setez poza de background ca... background-image = url();. Aici iti pune poza in html ca SRC.. tre sa fac eu toata treaba asta sau o poate face si automat?

eu stiu css... cred ca stiu binisor chiar.. numai ca nu e suficient sa stii doar css si html ca sa faci design-uri tari

prost am fost cand am subestimat web design-u...

Edited by crs12decoder, 04 January 2010 - 22:29.

 crs12decoder, on 4th January 2010, 22:22, said:

Ca sa faci designuri tari trebuie sa stii calumea niste programe de grafica ... css + xhtml deja intra pe aria development

Edited by DarkAngelBv, 05 January 2010 - 20:03.
Fara Quote integral la postul anterior

 crs12decoder, on 4th January 2010, 21:22, said:

Pai tu daca faci un design, ar trebui sa faci in modul urmator:

1. Desenezi in Photoshop ce-ti trece prin cap. Incearca sa ai insa in vedere ca acel design trebuie sa acomodeze un continut care este de regula expandabil, deci cantitatea de text variaza in el. De aceea, fa designul in asa fel incit sa poata sa se extinda in jos. Ca latimea e de 960px, ca e 700px sau e dinamic, nu are nici o importanta, asta tine de concept si de viziunea ta.
Inca ceva: poti sa faci designuri foarte tari, fara a folosi nici macar o singura poza, designul nu inseamna neaparat poze tari, gradienti de culoare sau (doamne fereste) flash!

2. Dupa ce esti fericit cu designul, te apuci sa construiesti in html + css scheletul de baza, layoutul. In faza asta nu iti trebuie inca nici un fel de poze. Nu faci altceva decit sa definesti zonele principale ale paginii. Din design iei numai marimile - latimile sectiunilor si eventual si inaltimile lor - astea de obicei le vei lasa flexibile, din cauza de motivul de mai sus.
Si da, folosesti div, nu table. Nu pentru ca div este la moda, ci pentru ca este semantic corect, este mai usor de intretinut si modificat ulterior pagina, si marimea fisierului este mai mica. Dilema div vs table NU EXISTA!!! Tables se folosesc pentru tabele, nu pentru layout. Testezi in toate browserele mari, adica ie de la 6 in sus, FF, opera, safari.
Pentru treaba asta, nu ai de-a face cu editoare wysiwyg (gen Dreamweaver). Codul il scrii de mina, cu notepad++ sau alt editor care iti place, important este sa aibe highlight la cod. Foloseste cu incredere calculatorul de buzunar, sau creionul si hirtia, ca sa calculezi latimile - atentie la box model. Nu dureaza mai mult decit cu Dreamweaver, codul este mai curat si mai usor de intretinut. Dreamweaver sucks!

3. Bagi niste continut acum in sectiunile pe care le-ai delimitat la punctul anterior  - de forma lorem ipsum, dummy text. Pui si meniurile, si cam tot ce va fi afectat de design. Le stabilesti niste clase si id-uri, ca sa te poti lega de ele in css ulterior.

4. Acum te intorci la photoshopul tau iubit, si te apuci sa decupezi imaginile cu el. Ceea ce decupezi salvezi (cu save for web) in format jpg, gif sau png. Ce alegi din toate formatele astea este treaba ta, important este ca imaginea sa fie clara, insa in acelasi timp sa nu fie gigantica- un gradient de 1px latime care se repeta arata grozav in png, insa un jpg este mult mai mic, si arata la fel de bine. Si gif poate fi folosit cu incredere in continuare, nu este nimic rusinos in a folosi gif!

5. Pozele pe care le-ai taiat le legi de elementele html, prin intermediul css (background:bla bla bla).

6. Ce ai produs predai pe o tipsie aurita unui developer, care stie (ar trebui sa stie, insa de foarte multe ori habar nu are) cum sa faca din ceea ce ai produs tu un site dinamic. Daca developerul esti tot tu, mai bine.

7. Dupa ce developerul a terminat de macelarit pagina, se intoarce la tine - de data asta in forma de templates (php sau jsp sau orice altceva), si repari ce s-a stricat. Faci (din nou) teste de browser, il dai inapoi si e gata de pus online.

Si cam atat ar fi totul. Bafta!

Nu prea mai gasesti ie6 daca nu ai windows xp. Eu cred ca cea mai sigura metoda de a testa in ie6 e sa downloadezi Virtual PC - http://www.microsoft...ows/virtual-pc/ si apoi iti iei o imagine cu windows xp preinstalat, gata de montat - http://www.microsoft...;displaylang=en

 Cippo, on 6th January 2010, 00:13, said:

Daca esti web developer se presupune ca ai si win XP, virtual sau nu. Sau macar ai un ie6 standalone (da, stiu ca nu e acelasi lucru cu unul original).