Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
E-Mail in serie prin Excel si Out...

Modul alimentare rulou/jaluzea ex...

Recuperare fișiere dupa form...

Aplicatii stress test RAM
 Asigurare auto hibrid

Asus B550M - PC-ul nu porneste di...

Tzanca Uraganu - Inconjurat de Fe...

explicatie montaj breadboard
 3 Doors Down - Kryptonite

Semnalizati cand virati pe un dru...

Donez Siofor de 1000mg ( diabet t...

Izolatie intre parter si etaj
 Hranirea pasarilor din orase -pro...

[unde] goarna tramvai

UPGRADE interfon de bloc Electra?

Care-i diferenta intre Geberit De...
 

Optimizare design

- - - - -
  • Please log in to reply
7 replies to this topic

#1
ThunderSS

ThunderSS

    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.


#2
Andrey09

Andrey09

    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.


#3
Jumping Jack

Jumping Jack

    Member

  • Grup: Members
  • Posts: 622
  • Înscris: 12.09.2007

View PostThunderSS, 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.

#4
ThunderSS

ThunderSS

    Active Member

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

View PostJumping 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).

#5
OriginalCopy

OriginalCopy

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

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

View PostThunderSS, 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.


#6
Jumping Jack

Jumping Jack

    Member

  • Grup: Members
  • Posts: 622
  • Înscris: 12.09.2007

View PostThunderSS, 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!

#7
OriginalCopy

OriginalCopy

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

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

View PostJumping 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)

#8
ThunderSS

ThunderSS

    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.

Anunturi

Bun venit pe Forumul Softpedia!

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate