Optimizare design

#1
ThunderSS

Posted 13 January 2009 - 19:11

Active Member

Grup: Members
Posts: 1,102
Înscris: 27.09.2007

As vrea sa stiu care este metoda corecta de a creea design-ul unui site pentru a putea fi vizualizat la fel in orice browser (problema asta am reusit sa o rezolv pana acum) si la orice rezolutie de ecran. Mai exact am atasat un screen la rezolutia de 1024x768, atunci cand totul este la locul lui si inca un screenshot la rezolutia de 1280x1024 unde toate sunt deplasate. Majoritatea dimensiunilor (inclusiv layout-ul) au fost facute in pixeli (inainte am incercat in procente insa nu era cross-browser si la diferite rezolutii aveam aceasi problema).

Daca va fi nevoie, uitati aici un link catre pagina cu pricina (este una singur, index.php care contine si login-ul).

PS: Daca am gresit vreun termen va rog sa ma scuzati si / sau sa ma corectati!

Edit: Am uitat de attachment!

[attachment=515452:bad_view.JPG]
Rezolutie: 1280x1024
[attachment=515453:normal_view.JPG]
Rezolutie: 1024x768

Edited by ThunderSS, 13 January 2009 - 19:15.

Back to top

#2
Andrey09

Posted 13 January 2009 - 20:59

New Member

Grup: Members
Posts: 15
Înscris: 01.04.2008

Nu te-ai folosit prea bine de float si margin ti-as recomanda sa te mai citesti niste tutoriale despre cum sa le folosesti, si poate gasesti si niste css trick's

P.S : daca vrei ajutor, anunta-ma

Edited by Andrey09, 13 January 2009 - 21:00.

Back to top

#3
Jumping Jack

Posted 14 January 2009 - 15:54

Member

Grup: Members
Posts: 622
Înscris: 12.09.2007

ThunderSS, on Jan 13 2009, 18:11, said:

As vrea sa stiu care este metoda corecta de a creea design-ul unui site pentru a putea fi vizualizat la fel in orice browser (problema asta am reusit sa o rezolv pana acum) ...

Salut.

Ai aici o structura html cu css simplificat, care este verificata, e safe si merge in toate cazurile (atentie, nu am inclus si sectiunea head). De la scheletul asta de 3 coloane poti pleca mai departe si construi ce vrei.
<body>

<div id="wrapper">
	 <div id="header">
		   <h1><a href="pagina de start">Titlu de pagina</a></h1>
		   <p>alte chestii pe care le vrei aici</p>
	 </div>
	 <div id="content">
				 <div id="sidebar_a">Aici bagi tot ce e in stinga</div>
				 <div id="main">Aici bagi tot ce e in centru</div>
				 <div id="sidebar_b">Aici bagi tot ce e in dreapta</div>

	 </div>
	 <div id="footer">
					   <p>informatii suplimentare</p>
	 </div>

</div>
</body>

iar CSS:

* 
{margin:0;padding:0}
body {font:normal 62.5%/1.4 arial, helvetica, sans-serif;color:#000}
#wrapper {margin:0 auto;width:960px;font-size:1.2em} /* 960 px se divide cel mai bine si incape aproape in orice fereastra */
#header,#content, #footer {float:left;width:960px;clear:both;}
#sidebar_a, #sidebar_b {float:left;width:192px}
#main {float:left;width:748px;padding:0 20px}

Observatii legate de ce ai tu acolo:

- eticheta menu este depasita, inlocuieste cu ul.
- Incearca sa optimizezi un pic continutul - de exemplu nu ai nici un heading pe pagina, dpdv SEO nu e bine.
- partea din footer cu For best experience ai putea s-o scoti, mai bine faci tot ce poti sa se vada bine in orice browser. Nu poti obliga un utilizator sa schimbe browserul ca nu ai vrut tu sa optimizezi pentru altele.

Back to top

#4
ThunderSS

Posted 14 January 2009 - 16:51

Active Member

Grup: Members
Posts: 1,102
Înscris: 27.09.2007

Jumping Jack, on Jan 14 2009, 15:54, said:

Salut.

Observatii legate de ce ai tu acolo:

- eticheta menu este depasita, inlocuieste cu ul.
- Incearca sa optimizezi un pic continutul - de exemplu nu ai nici un heading pe pagina, dpdv SEO nu e bine.
- partea din footer cu For best experience ai putea s-o scoti, mai bine faci tot ce poti sa se vada bine in orice browser. Nu poti obliga un utilizator sa schimbe browserul ca nu ai vrut tu sa optimizezi pentru altele.

Merci mult de sfaturi. Partea cu mozilla a ramas acolo inca de cand nu functiona deloc in Internet Explorer si nu am mai scos-o. O sa studiez codul care mi l-ai dat si am sa adaptez site-ul.

Este primul meu site si din aceasta cauza ma impotmolesc la unele chestii mai "obscure", care nu prea se gasesc in tutoriale. Mai ales ca m-am axat mai mult pe partea de php decat de design, dar inevitabil am ajuns si la rezolvarea problemelor CSS.

Una din acele chestii ar fi partea cu optimizarea...cand spui heading te referi la ce cred eu (<h1 | h2| ... | h6> </h> ? ). Adica tagurile care iti modifica dimensiunea fontului? Pentru ca mi se pare oarecum ciudat, pentru asta credeam ca exista css. Si unde ar fi legatura dintre asta si motoarele de cautare? Stiu ca se folosesc algoritimi destul de complexi care cauta in diferite atribute (alt la imagini), titlu, frecventa cuvintelor cheie in pagina si alte chestii asemanatoare; cu ce influenteaza headingurile chestia asta? (scuze daca ti se pare banal, dar unele chestii le gasesti mai greu in tutoriale, si sa le mai si explice).

Back to top

#5
OriginalCopy

Posted 14 January 2009 - 17:04

I'm harmful, fear me please! :))

Grup: Senior Members
Posts: 27,268
Înscris: 10.08.2006

ThunderSS, on Jan 14 2009, 17:51, said:

Merci mult de sfaturi. Partea cu mozilla a ramas acolo inca de cand nu functiona deloc in Internet Explorer si nu am mai scos-o. O sa studiez codul care mi l-ai dat si am sa adaptez site-ul.

Este primul meu site si din aceasta cauza ma impotmolesc la unele chestii mai "obscure", care nu prea se gasesc in tutoriale. Mai ales ca m-am axat mai mult pe partea de php decat de design, dar inevitabil am ajuns si la rezolvarea problemelor CSS.

Una din acele chestii ar fi partea cu optimizarea...cand spui heading te referi la ce cred eu (<h1 | h2| ... | h6> </h> ? ). Adica tagurile care iti modifica dimensiunea fontului? Pentru ca mi se pare oarecum ciudat, pentru asta credeam ca exista css. Si unde ar fi legatura dintre asta si motoarele de cautare? Stiu ca se folosesc algoritimi destul de complexi care cauta in diferite atribute (alt la imagini), titlu, frecventa cuvintelor cheie in pagina si alte chestii asemanatoare; cu ce influenteaza headingurile chestia asta? (scuze daca ti se pare banal, dar unele chestii le gasesti mai greu in tutoriale, si sa le mai si explice).

Cuvintele din h[1-6] au o importanta mai mare in relevanta intregii pagini. Totusi, nu abuza doar de dragul SEO.

Edited by OriginalCopy, 14 January 2009 - 17:05.

Back to top

#6
Jumping Jack

Posted 14 January 2009 - 20:35

Member

Grup: Members
Posts: 622
Înscris: 12.09.2007

ThunderSS, on Jan 14 2009, 15:51, said:

Una din acele chestii ar fi partea cu optimizarea...cand spui heading te referi la ce cred eu (<h1 | h2| ... | h6> </h> ? ). Adica tagurile care iti modifica dimensiunea fontului?

Tagurile h1-h6 nu au scopul de a modifica dimensiunea fontului. Tagurile alea sint titluri ( heading inseamna titlu). Ca by default h1-h6 sint mai mari decit dimensiunea standard de font e una, insa nu asta e aspectul important. Ele sint cele care dau consistenta unei pagini, sint extrem de importante pentru SEO ( asta nu inseamna ca vei umple pagina cu titluri, ca te arde google de nu te vezi).

Foarte important e sa vezi pagina facind abstractie de formatarea grafica. Inchipuieste-ti ca e vorba de o pagina de ziar sau carte. Pe o pagina de ziar ai titluri, ai paragrafe, ai liste de diferite feluri, ai o gramada de formatari diferite. Ei, si intr-o pagina web trebuie sa existe aceleasi criterii ca la tipar (sau aproape, la ziar nu ai linkuri). Ca sa vezi structura logica a unei pagini este suficient sa o vezi fara css. Adica sa nu incarci fiserele css. Probabil ai auzit de web developer toolbar, acolo ai o optiune- disable all css. Daca nu ai web developer toolbar, te duci la extensiile de Firefox si il descarci de acolo.
In sfirsit, ca sa nu lungesc vorba, mai ales ca despre asta am tot vorbit si eu si multi altii, te sfatuiesc sa citesti subforumul SEO, sa te uiti pe tutorialul pe care l-am inceput cu citiva altii si nu l-am mai terminat, insa e destul de folositor chiar si asa. Si mai sint pe web foarte multe surse de invatat ca lumea css si (x)html.

Oricum, ca sa nu descurajez, pot sa spun ca ce ai facut tu acolo este destul de ok, ce lipseste sint chestii de detaliu. Dar daca vrei sa continui pe drumul asta, ar fi timpul sa studiezi treaba mai serios. Bafta!

Back to top

#7
OriginalCopy

Posted 14 January 2009 - 20:45

I'm harmful, fear me please! :))

Grup: Senior Members
Posts: 27,268
Înscris: 10.08.2006

Jumping Jack, on Jan 14 2009, 21:35, said:

Tagurile h1-h6 nu au scopul de a modifica dimensiunea fontului. Tagurile alea sint titluri ( heading inseamna titlu). Ca by default h1-h6 sint mai mari decit dimensiunea standard de font e una, insa nu asta e aspectul important. Ele sint cele care dau consistenta unei pagini, sint extrem de importante pentru SEO ( asta nu inseamna ca vei umple pagina cu titluri, ca te arde google de nu te vezi).

Foarte important e sa vezi pagina facind abstractie de formatarea grafica. Inchipuieste-ti ca e vorba de o pagina de ziar sau carte. Pe o pagina de ziar ai titluri, ai paragrafe, ai liste de diferite feluri, ai o gramada de formatari diferite. Ei, si intr-o pagina web trebuie sa existe aceleasi criterii ca la tipar (sau aproape, la ziar nu ai linkuri). Ca sa vezi structura logica a unei pagini este suficient sa o vezi fara css. Adica sa nu incarci fiserele css. Probabil ai auzit de web developer toolbar, acolo ai o optiune- disable all css. Daca nu ai web developer toolbar, te duci la extensiile de Firefox si il descarci de acolo.
In sfirsit, ca sa nu lungesc vorba, mai ales ca despre asta am tot vorbit si eu si multi altii, te sfatuiesc sa citesti subforumul SEO, sa te uiti pe tutorialul pe care l-am inceput cu citiva altii si nu l-am mai terminat, insa e destul de folositor chiar si asa. Si mai sint pe web foarte multe surse de invatat ca lumea css si (x)html.

Oricum, ca sa nu descurajez, pot sa spun ca ce ai facut tu acolo este destul de ok, ce lipseste sint chestii de detaliu. Dar daca vrei sa continui pe drumul asta, ar fi timpul sa studiezi treaba mai serios. Bafta!

Altfel spus, cu etichetele html descrii un document din punct de vedere semantic, iar pura vizualizare a acestuia o lasi pe seama css. Este principiul folosit si in LaTeX, cel mai avansat sistem de tehnoredactare, dupa parerea mea:

Quote

LaTeX is based on the idea that authors should be able to focus on the content of what they are writing without being distracted by its visual presentation. In preparing a LaTeX document, the author specifies the logical structure using familiar concepts such as chapter, section, table, figure, etc., and lets the LaTeX system worry about the presentation of these structures. It therefore encourages the separation of layout from content while still allowing manual typesetting adjustments where needed. This is similar to the mechanism by which many word processors allow styles to be defined globally for an entire document or the CSS mechanism used by HTML.

(de pe http://en.wikipedia.org/wiki/LaTeX)

Back to top

#8
ThunderSS

Posted 15 January 2009 - 15:45

Active Member

Grup: Members
Posts: 1,102
Înscris: 27.09.2007

Oh, ok merci mult de raspunsuri, cred ca am inteles ce am gresit!

Nu o sa le mai modific acum pe site-ul asta deoarece nu are rost (ma indoiesc ca va fi vreodata utilizat de vreo scoala

)dar o sa tin cont de sfat si am sa fiu mai atent atunci cand creez paginile.

Si da, vreau sa continuui pe drumul asta (bine, mai mult pe partea de programare web decat de design) si deasta ma intereseaza atat de mult detalile.

Back to top

Anunturi

Bun venit pe Forumul Softpedia!

Optimizare design

#1 ThunderSS Posted 13 January 2009 - 19:11

#2 Andrey09 Posted 13 January 2009 - 20:59

#3 Jumping Jack Posted 14 January 2009 - 15:54

#4 ThunderSS Posted 14 January 2009 - 16:51

#5 OriginalCopy Posted 14 January 2009 - 17:04

#6 Jumping Jack Posted 14 January 2009 - 20:35

#7 OriginalCopy Posted 14 January 2009 - 20:45

#8 ThunderSS Posted 15 January 2009 - 15:45

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
ThunderSS

Posted 13 January 2009 - 19:11

#2
Andrey09

Posted 13 January 2009 - 20:59

#3
Jumping Jack

Posted 14 January 2009 - 15:54

#4
ThunderSS

Posted 14 January 2009 - 16:51

#5
OriginalCopy

Posted 14 January 2009 - 17:04

#6
Jumping Jack

Posted 14 January 2009 - 20:35

#7
OriginalCopy

Posted 14 January 2009 - 20:45

#8
ThunderSS

Posted 15 January 2009 - 15:45