Vanzari si cumparari
Postat la 21 Apr 2009. Nu sunt comentarii. Hai, spune si tu ceva! 
Primesc newslettere de la site-uri de stiri, ca sa mai fiu si eu la curent cu ce se intampla prin lume... ei bine, citesc si rad si, in timp ce rad imi dau seama ca nu e rasul meu. Credeam ca numai romanii isi vand rinichii sa-si plateasca ratele... dar se pare ca nu. O sa ajungem sa rezumam totul la bani, sa vindem si sa cumparam in afara de case si plamani si mame, surori si multe alte "chestii" inutile.
La prima stire nu am fost prea impresionat, ca doar traim in Romania si suntem in stare sa facem orice pentru 70 de centi: O femeie si-a vandut copilul de patru ani si cel din pantec pentru o garsoniera... Normal, ce nevoie are ea de copii? Logic: in Romania eu usor sa faci un copil... sa-ti iei o garsoniera e foarte greu deci, consider ca nu a gresit cu nimic. Bine, daca se vindea si pe ea, poate trecea la apartament.
A doua stire mi se pare de-a dreptul stupida: Fetita de Oscar, scoasa la vanzare. E adevarat ca presa mai si haleste substante maro dar totusi, sunt si cateva fapte reale uneori.
Si ma intreb: unde mama dracu' e protectia copilului si unde sunt "morala" si "ratiunea". Of... ce termeni incâlciţi! Se vand institutii de stat, se fac vanzari de organe, se vad chiar si suflete si totusi, exista lege. Intrebare: Unde e?
Cum scriem si optimizam un layout xHTML / CSS valid
Postat la 13 Apr 2009. Nu sunt comentarii. Hai, spune si tu ceva!
Avem o pagina web unde am scris cod xHTML valid strict. Puteti da View Source, ca sa vedeti HTML-ul pentru ca e destul de lung si apare urat daca-l inşir aici.
Aceasta pagina are, dupa cum se vede [in tag-ul LINK], un fisier CSS [tot valid] atasat care arata cam asa:
body { margin:0; padding:0; font:12px Verdana, Arial, Helvetica, sans-serif; color:#999; background:#999 }
* { margin:0 }
acronym { cursor: help }
a { color:#039; }
a:hover { color:#06c; }
.main { width:900px; margin:0 auto }
.main #header { height:90px; margin:5px 0 0 0; background:#fff; }
.main #header p { color:#c30; font-size:32px; line-height:90px; padding:0 30px }
.main #menu { margin:5px 0; background:#ccc; width:100%; overflow:hidden }
.main #menu p { padding:5px 20px }
.main #menu p a { width:auto; float:left; padding:5px 10px; margin:0 3px 5px 3px; display:inline; }
.main #menu p a:hover { background:#333; color:#ccc }
.main #content { background:#f3f3f3; padding:10px 30px }
.main #content h1 { font-size:22px; font-weight:normal; color:#c00; padding:5px 0 }
.main #content h2 { font-size:17px; font-weight:normal; color:#c93; padding:20px 0 5px 0 }
.main #content p { padding:3px 0 }
.main #footer { padding:15px 20px; background:#fff; margin:5px 0 }
.main #footer p { font-size:10px; text-align:center; color:#ccc; line-height:20px }
Ei bine, o sa va impartasesc in continuare cateva chestii [nivel: incepator] referitoare la codurile CSS si xHTML scrise mai sus pe care eu mi-as fi dorit sa le aflu cand eram la inceput.
Referitor la xHTML
- Am respectat standardele impuse de DTD-ul strict [DTD-ul stabileste tipul documentului] si am pus elementele structurate arborescent, fara sa omit tag-uri, fara sa pun target="_blank" la link-uri si multe altele. Dar, asta nu-i mare lucru...
- Avem un DIV cu class="main", pentru ca elementul BODY este limitat la schimbarile facute de CSS.
- Am impartit sectiunile in DIV-uri cu id-uri pentru fiecare sectiune in parte, pentru a le adauga stiluri din CSS [header, menu, content, footer]. Sectiunile nu sunt un standard... eu am realizat o pagina simpla, pentru incepatori, dar paginile mari pot deveni foarte complexe.
- E bine sa se evite adaugarea de clase inutile sau DIV-uri inutile... cu cat scriem mai putin cod cu atat mai bine. Restul e CSS.
- Un DIV poate contine elemente de toate tipurile dar nu poate fi inclus in orice element... adica, un P nu poate contine un DIV dar un DIV poate contine H2, P si multe altele si, e indicat sa ne folosim de ele din plin, pentru a putea adauga stiluri diferite si la cod simplu.
- E indicat ca daca aveti cod JavaScript sa-l puneti in partea de jos a paginii iar codul CSS sa ramana in partea de sus. Codul JavaScript e indicat sa se afle intrun singur fisier, deoarece download-ul sau e ceva mai special. Exista trucuri pentru optimizare dar nu vreau sa deraiez...
Cam atat despre xHTML. E indicat ca pastram cod-ul curat si ordonat si, dupa cum ziceam, sa evitam elementele inutile.
Referitor la CSS
- In primul rand, elementul BODY va contine chestiuni generale referitoare la text [font, culoare etc] si, eu pun margin si padding pe 0 [zero]
- E indicat sa se foloseasca shorthand-urile ["font:12px Verdana", in loc de "font-size:12px; font-family:Verdana"] desi trebuie sa recunosc ca mai omit.
- Elementul [DIV-ul] cu class .main are width stabilit si margin: 0 auto, adica... marginea de sus si jos de 0 si in parti se va afla pe centrul vizibil... avand margin auto.
- Avem apoi elementele [header, menu, content si footer], fiecare cu stilurile proprii. Ceea ce vreau sa subliniez este dependenta si structura ierarhica, care face xHTML-ul mai simplu. In loc sa aplicam clasa pe H2 punem ".main #content h2" si browser-ul va sti ca e vorba de H2-ul din div-ul #content, din div-ul .main
- Tot codul CSS trebuie "potrivit" si vizualizat pe mai multe browsere, astfel incat sa fie identic pe oricare din ele. Problemele de compatibilitate se pot rezolva cu conditionale dar e indicat sa evitam acest lucru cat mai mult.
- E foarte bine sa ne folosim cat mai mult de culori si sa evitam incarcarea imaginilor de background. In cazul in care punem imagini de background e bine sa le punem cat mai mici si cat mai optimizate. Aceasta optimizare se refera la modul lor de repetare si la inlocuirea imaginilor mari cu texturi repetate pe X sau pe Y, dupa necesitati.
Ar mai fi multe de zis dar va las pe voi sa meditati si sa comentati exemplul dat de mine. Sa codati cu spor!