specIal

Creai uor i rapid propriul

~ Ci diferite ctre acelai rezultat

~ Optimizarea codului

s ~ Soluii gratuite pentru pagina web

3
4
5

Editorial
Cuprins
CuprinsCD

6
Elementede baza
Realizarea unui site a presupus ntotdeauna
acumularea unor cunotine. Procesul de
nvare nu se oprete ns dup finalizarea
primei pagini web, standardele noi, trendurile precum i necesitile determinnd
perfecionarea continu.
12 Evoluiabrowser-elorweb
Programele de navigare pe internet fac
parte din viaa noastr i cu greu ne-am
mai descurca astzi fr ele. S ne uitm n
urm pentru a vedea care au fost etapele de
parcurs n evoluia browser-elor.

Coninutulfnaintea designului
Dac v propunei s creai un site, este
bine s avei rspuns la o ntrebare simpl,
de genul cui se adreseaz acesta? Dup ce
rspundei la aceast ntrebare v putei
gndi la planificare.
18 Structura siteului
Dup discuii la modul general despre
tendinele actuale i planificarea site-urilor,
a sosit momentul s tratm tema concret,
aplicnd cteva din cele prezenta te anterior.

REALIZARE
Fonnatarea HTML
Dup schiarea machetei, urmtorul pas
const n transpunerea acesteia n practic
folosind HTML i CSS.

HTML se poate trece la includerea imaginilor i asamblarea structurii site-ului.

Aflai din acest articol cum se face acest
lucru i care sunt formatele de imagine ce
pot fi folosite.
28 Paifinali
Un site este o construcie arborescent rea1izat cu fiiere HTM sau HTML. Acestea
trebuie stocate ntr-o structur de directoare ce pstreaz logica site-ului. Plasarea
fiecrui tip de fiier la locul potrivit simplific finalizarea site-ului.
30 Mai rapid pe aceeai cale
Odat cu vitezele de acces la internet i
dimensiunile documentelor HTML tind s
creasc, graie complexitii paginilor web.
Exist posibilitatea optimizrii codului, fr
a renuna la funcionalitatea crescut a
paginii.
32 Aceeaitem. alt realizare
O alternativ la pagina web structurat cu
ajutorul tabelelor este mprirea prin
intermediul diviziunilor. n acest articol v
prezentm modul de realizare a temei
noastre cu ajutorul diviziunilor.
36 Site dinamic
Dorii s mrii performana site-ului propriu? Utilizarea scripturilor PHP n construcia ultimei variante a site-ului nostru
este cel mai bun exemplu n acest sens.
40 Dinamicsuplimentara
Cum putem face ca la o nou ncrcare
coninutul paginii web s se schimbe
automat? Rspunsul este dat de paginile
web dinamice, care au n spate baze de date
ce permit fie afiarea n pagin a informaiilor la zi, fie execut cutri n arhiv.

PROGRAME
46 utilitare gratuite pentru designi programare
n acest articol v prezentm o serie de pro-

grame gratuite care v pot fi de un real

folos, indiferent dac v ocupai de web
design sau de programare web, i cu att
mai mult dac le facei pe amndou.
50 Apachea facut picioare
Instalarea unui server pe o staie de lucru
nu este neaprat anevoioas, dar n anumite situaii nu e o posibilitate viabil.
Aplicaia Server2Go v scutete de bti de
cap, putnd fi folosit pe orice mediu de
stocare.
54 Procesaregratuit a imaginilor
Dac nu dorii s cheltuii bani pe un editor
grafic precum Photoshop, dar avei totui
nevoie de o aplicaie capabil i flexibil,
soluia nu poate fi dect GIMP.

PRACTICA
56 Tips & tricks
Cele mai bune tips & tricks pe tema HTML,
CSS, utilitare pentru homepage i comer
electronic au fost adunate de CHIP Special
n paginile acestui articol.
61 Douversiuni pe acelai PC
Cei ce creeaz coninut web, trebuie s-I i
testeze. Pentru evaluarea n mai multe versiuni de browser, aflai cum putei instala
IE6 i IE7 pe acelai calculator.

SERVICE
62 Internet pentru toi
Conexiuni provideri, beneficii, iat n acest
articol cteva chestiuni despre care mai
doreai s aflai pentru a alege cea mai bun
cale de a fi prezeni n internet.
64 Tnr website. caut gazd
Meninerea unei pagini web pe etern ele
plaiuri ale www-ului presupune un culcu
sigur i rapid n inima unui server. Iat cele
mai bune oferte de gzduire web, att contra cost, ct i gratuite.

CUPRINS CD
Discul ataat acestei
CHIP Special reflect
acesteia, cuprinznd
dedicate lucrului cu
A

CD-ul inclus poate fi utilizat n conformitate cu parametrii definii n standardul

Philips - Yellow Book. Editura nu i asum
responsabilitatea asupra eventualelor pagube provocate de utilizarea CD-ului n ali
parametri dect cei stabilii n standardul
menionat anterior.

ediii a revistei
coninutul
aplicaii
paginile web.

NOT

Desigur, nu puteau lipsi nici aplicaiile

m
n sura posibilitilor,
v punem la dispoziie

destinate prelucrrii grafice i machetrii.

Noi am propus Gimp pentru editare i
XNView pentru administrarea
coleciei
de imagini web, datorit combinaiei de
vitez i funcionalitate
care se apropie
destul de mult de soluia Adobe, fiind

am ncercat s
ct mai multe

din instrumentele
necesare aplicrii
cunotinelor
nvate din articole. Alturi de clasicele aplicaii, v-am pregtit o
serie de exemple ctre care se fac trimiteri
din articole. Cu ajutorul acestora, vei
putea face teste i vei avea posibilitatea
de a deprinde mai uor tehnicile aferente
fiecruia dintre acestea.

Avei de ales ntre mai multe editoare

avansate, dedicate programatorilor.
Majoritatea ofer suport att pentru HTML,
XHTML, JavaScript, ASP ct i pentru
limbaje mai complexe
de formatare,

._-

w~

__

SG27~

s..wbCah:lst

'fCP*>

O~<~""~-I""'-_"'-'-_.--::l
o
..
C
.rwwd_l!I

..
".

aplicaiile

i paginile web nece-

Server2Go este deosebit de atrgtoare

prin numeroasele faciliti pe care le ofer

dar mai ales prin posibilitatea de a distribui o aplica ie web

pe un mediu read-only
precum un CD-R .
~L.".....Q~,,,,,,,,,----~::J

~~-~

~022

~r~3

~MPCL_l1TF4~~

Desigur,

.1ot,'SCl..a.t __

.:>rc:eotlll~~O
"

o soluie gratuit.

sit servere pe care s ruleze. V -am pregtit o colecie de pachete tip server, foarte utile att pentru testarea materialelor
aflate n lucru ct i pentru publicarea
acestora, chiar i de pe propriul Pc. Suita

Aplicaii utile

scripting i programare.

totodat

!CQIa!>on

.F<I'l"'l:I':J00i'3

~.
"

'~7

- J1- II-

Nu
n
ultim ul
rnd,
am inclus o
aplica ie gratuit
de
citire a fiierelor PDF,
alturi de nepreuitele
manuale de utilizare
pentru
MySQL.

PHP

Interfaa CD-ului CHIPSPECIALeste conceput s ruleze optim pe o plac grafic

ce suport minim o rezoluie de 800 x 600
i o adncime a culorii de 16 bii.
De aceea, nu este recomandat folosirea
acesteia ntr-un mediu ce nu ofer minimul necesar! Interfaa poate fi rulat att
sub Windows 95/98/Me, ct i sub Windows NT/2000/XP.
Din cauza multitudinii de configuraii, redacia CHIP SPECIALnu i poate asuma
nici o responsabilitate n eventualitatea n
care apar probleme n funcionarea interfeei i a aplicaiilor. Programele care au intrat n componena CD-ului CHIP SPECIAL
au fost testate i selectate cu grij n
redacia CHIP SPECIAL.Totui, redacia nu
i poate asuma nici o responsabilitate
pentru funcionarea anormal a softwareului i nici nu poate fi fcut responsabil
pentru eventualele daune produse. CD-ul
CHIP SPECIALa fost verificat mpotriva
viruilor cu urmtoarele programe antivirus (n ordine alfabetic): BitDefender Professionall0 (furnizat de Softwin), F-Secure
AntiVirus 5.51 (furnizat de Infodesign),
Kaspersky Lab Anti-Virus 6.0 (furnizat de
Kas- persky Lab - Rusia) i PC-ciiin (furnizat
de GeCAD).
Pentru orice ntrebri legate de aplicaiile
de pe CD,v rugm s contactai telefonic,
prin fax sau prin e-mail, autorii programelor respective.
ATENIEIPentru rularea corect a interfeei CD-ului v recomandm setarea unei
rezoluii minime de 800 x 600, o adncime
a culorii de 16 bii i folosirea opiunii
Small Fonts!

Impressum
Redacia poate fi contaetat la:
Telefon: 0268-415158,418728, 0723-570511, 0744-754983;
0368-415003,0368-415004
Fax: 0268-418728; E-mail: redactie@fvd.ro
Adresa redaciei: 500010 - Braov, str. N.D. Cocea nr.12
Adresa pentru coresponden:
500530 - Braov, Oficiul Potal 2, Csua Potal 4

Editura: Vogel Burda Communications SRL

Sediul editurii: 500010-Braov Str. N.D. Cocea nr.12

Director General: Dan Bdescu (dan_badescu@vogelburda.ro)

Director tehnic: Daniel Dnil-Bekesi (dan_danila@vogelburda.ro)

Redactori: Mihaela Dogaru (mihaela_dogaru@fvd.rol,Daniel

Dnil-Bekesi
(dan_danila@fvd.ro), Andrei Licherdopol (andreUicherdopol@fvd.rol

In Romnia: Vogel Burda Communications SRL Braov

In Germania: Vogel Burda Holding GmbH, Munchen,
Director: Dr. Jan Schultze

CD: Andrei Licherdopol (andreUicherdopol@fvd.ro)

Grafic, DTP: Anca BIa (anca_balas@fvd.ro)
Contabilitate i administraie: Maria Parge, Eva Szaszka (contabilitate@vogelburda.rol
Financial controller: Adrian Dumitru (adrian_dumitru@vogelburda.ro)
Reclam: Cristian Pop (cristian_pop@vogelburda.rol,
Leonte Mrginean
(Ieonte_marginean@vogelburda.ro)
Marketing: Leonte Mrginean (Ieonte_marginean@vogelburda.ro)
Distribuie: Ioana Bdescu (ioana_badescu@vogelburda.rol,

Manuscrisele, hlclusiv n format electronic, expediate redaciei devin proprietatea editurii.

Editura i rezerv dreptul de modificare a materialelor primite. precum i a datei de
apariie. Reproducerea integral sau parial a articolelor, informaiilor sau a imaginilor
aprute n revist este permis numai cu acordul scris al editurii. Redacia nu i asum
rspunderea pentru greeli i inadvertene aprute n materialele colaboratorilor i ale
imerenilor.

INTRODUCERE - INVATAREA CONTINUA

Realizarea unui site sau a unei simple pagini au presupus ntotdeauna acumularea anumitor cunotine. Procesul
de nvare nu se oprete ns dup finalizarea primului site fiindc standardele noi, trendurile precum i
necesitile clienilor determin perfecionarea continu. n afar de cunotinele de baz, trebuie avute n vedere
i anumite aspecte secundare (browser-e, motoare de cutare), fr de care paginile sunt afiate defectuos sau
nu prea sunt accesate.
Victor Gheorghe

/'iri'

('001-

HeJp Yahoo!
Help Kids

Rent Net is ghing away $10,000

Dn!y 3 dvs}.:O Cbe" r.,.1?1

l'Z:CIl:l::I ...
yftot;J
Q ~

8Auto~

See Virgin's

li!fFlnanc:e

Virim ~IJthe ~s
modt'l!;oflhe fit~1
comm'ltlal EartMo-~;l(.e p11tl'S

O:

Game.

Photol of mod.l.

~Ciroull'

erJ

space jet

l'

Mo"

bwea'herl

'tilUClII

'

I 4'l

do-

IQ,lllro.COPU

HoUob.

t::!M{lIlS

tr

Mobile

'14, ~:~ty:'.~~~::d

Web

",1),

ti. Mo";e.

.".y.tobo.u
nbma<y
.n l."on.h,p

~I'tusjc:

CJ

b)
O

Per'llonal,
Real

Estate

.!)Tech
Trll"el

C)TV
~

ll\kl

'I'ellowPQQu

Small

'SeU

Online

'Sean:h

Oawnlaad.
.HlIlalth

Wtekly

Plcks. Today'~ Web Evmts.

R$Jldom Yahool

Ch:al. Weathtl

Lmk Yahoo'

dom.'n

wOlkfor)'ou

n."...

11.~"/l"~'

: ~::I"~n~~';Q'".nd bv,ld . b ."

Ent~rt"inm.nt

..,

Turtl9Odysuy2
\.Pgoft'ol!!
~ldfruuatsoflf\1bnt.acllOfl
ga""", <ti YI~OI Gamts Oownlo.d now
Go 10 Y''''oot Shoppll'l9 Ind UVi Otl lne hol new slyln

N.W5 VidloS

.,.D .

w~~

.f.~

r..ad.,_rn
t_"vht'-t

.in.s.-.., __

H_ """~.b(".t11
Or. PNI de!.'*nck.tt-

urt

to

VECHIVS. NOU:Aa arta pagina portalului de internet Yahoo! n 1997 (stnga) i

Forecasls

Shop

ine lucreaz n domeniul WEB design-ului i n programarea WEB a

constatat probabil deja c studiul pentru acumularea de noi cunotine nu se
oprete niciodat. Standardele de design,
performanele programrii, CSS, HTML i
XHTML evolueaz, browser-ele sunt actualizate frecvent, plug-in-urile se nmulesc,
iar clienii cer tot mai mult. Pe msur ce v
cizelai o abilitate, descoperii altele noi,
care ar trebui nvate. Internetul este un
fenomen tnr, n plin dezvoltare i nu
trebuie dect s inei pasul cu acesta. Putei
constata uor evoluia acestuia, uitndu-v
pe o pagin web proprie de acum trei sau
patru ani; n majoritatea cazurilor, ai
reface-o altfel. Odat cu mrirea intervalului de timp la care ne referim, putem gsi
diferene enorme. Pentru a exemplifica
acest lucru, am luat ca exemplu dou variante ale site-ului www.yahoo.com. una
datnd din 1997 (sursa www.archive.org)
i alta foarte recent, din ianuarie 2008.
Observaiile de mai jos sunt n mod normal
valabile pentru oricare dintre pagini:
pagina de WEB tipic din anii 1995-2000
avea rezoluia de referin de 800x600 (n
unele cazuri chiar i mai puin, 640x480), o
palet redus de culori, imagini ct mai mici
(30-50 KB), toate datora te performanelor
sczute ale browserelor, calculatoarelor i
ale legturilor la internet (lE 4/5, Netscape
5/6, diagonala monitorului de 15 oli, mai
rar 17, viteze mici de conectare la internet
16, 32 sau 64 Kb/s). O consecin suprtoare a acestor aspecte era reprezentat de
cantitatea redus de informaie pe pagin.

'a

.,......Echo;onl
IAtt<om>_ hk h_

Pllpubr;tClIonglmes

Web Chude Yahoo'lntemtt

PulVahool10

Most Popul.r
1011Uk81pllce

Ads

Futured Servicfl

forY-..ld~ 9eatnce's

!>df

Buslness

DamalnN{lme.

Yahoohg$JlSI

Frellch ba"k hl1byoneoftheb1gge5.lfraudslllinVltl.lllhlstoIY

Mosul polree c~"., Imbushed and slam al bomb b1i'S1S,le
Drought mly rateI lIUelulluetOl's 10 Ihlcul, bICk OIshul d"""",
Analys,s Flolld, can clalll'ylhe GOP lace '2008 ,."'pao<;n
OAuthOllhes ta~lng sleps 10 extrld~. suspect 111Marlll,'s dUlh
Moderaleelf.reisemaydlam.lltoi!lyprOlongrrlen's!rtts
o Ltdger'sIldlanc letums 10N~ York fOlloWIIl!l hlt dUlh
Suptl Bowl Auttrahan Open NBA NCAA Hoop NHl

'GetaWebSlte

Mv Yahool

Shopplno

ti)SPQrts

Plan Yaur Gelll""'.y

Today".TopOU1$
V.lICiltOnPaekag"
HUgeCIU'''S",~
Hotl'!OtalsWor!dwldl

iat care este aspectul su actual (dreapta) .

pagina WEB tipic ulterioar anului 2000

are ca rezoluie de referin 1.024x 768 (n
unele cazuri 1.152x 864 sau 1.280 x 1024),
palet extins de culori, imagini mai mari
(pn la 150-200 KB), toate datorate performanelor ridicate ale browser-elor, PCurilor i ale legturilor internet (lE 6/7,
FireFox 1.5/2, Opera 9.24, monitoarelor de
17 i 19 oli sau widescreen, viteze simitor
mrite ale conexiunilor la internet - 128,
512 sau 1.024Kb/s). Deoarece s-a pornit de
la premisa c vitezele actuale sunt arhisuficiente pentru ncrcarea paginilor, de
multe ori, la accesarea acestora, suntem
bombardai de banner-e, ferestre pop-up i
alte variante de reclame care, alturi de
multitudinea de elemente din pagin, pot
duce uor la dezorienta rea vizitatorului.
Att paginile realizate nainte de 2000
ct i cele din momentul de fa au un lucru
comun: se bazeaz pe versiuni ale aceluiai
limbaj. De aceea, chiar i n condiiile existenei a numeroase editoare WEB de tip
WYSIWYG (what-you-see-is-what-youget), cunoaterea acestuia, ne referim
bineneles la HTML, este obligatorie .
Aceasta mai ales n contextul evoluiei permanente a internetului.

HTML -

prima treapt a cunoaterii

Cu toate c pentru majoritatea nceptorilor nvarea HTML este un demers evident, exist i anumii aa-zii "web
designeri", care, utiliznd editoare WYSIWYG, ncearc s treac peste aceast
etap. Neavnd anumite cunotine HTML
de baz, acetia cred c dac o pagin arat

bine n editorul/PC-ul propriu, va arta

bine i pe internet.
Din pcate, numrul de pagini nefuncionale sau defectuoase de pe internet ne
dovedete c muli dintre cei care folosesc
editoarele vizuale cred c acestea suplinesc
n totalitate noiunile de baz.
Un aspect important care trebuie avut n
vedere la realizarea unei pagini WEB este c
din momentul plasrii paginii n internet,
aceasta trebuie s arate la fel pentru orice
vizitator.
Vizitatorul trebuie s poat:
folosi oricare din browser-ele disponibile;
utiliza orice sistem de operare;
Cei care se folosesc exlusiv de un editor
vizual vor descoperi cu neplcere c o pagin WEB care arat bine n respectivul
program de editare, poate chiar i n browser-ul instalat pe calculator, nu va arta
deloc bine pe alt browser, iar pe un al treilea
totul ar putea descoperi un haos. Aceasta
numai din cauz c nu dispun de noiunile
cu ajutorul crora s modifice pagina, astfel
nct s arate la fel pentru toi vizitatorii.
S ne imaginm un depanator de calculatoare care se agit i se nvrte n jurul
carcasei unui calculator, n sperana c
acesta va redeveni funcional. Cel care ns
demonteaz, depaneaz i testeaz calculatorul l poate repune uor n funciune.
Precum depanatorul, i web designerul
nostru trebuie s neleag codul scris care
genereaz n browser pagina web. Dac nu
putei detecta greeala din pagina de web,
privind-o din afar, nvai HTML ca s o

INTRODUCERE - iNVATAREA CONTINUA

76.04% - Microson kltemet Exp/orer

16.80% - Fretox

.5.59% - SSteri
0.60% - Netscape
0.64% - Opera

.0.08% - Moz~a
.0.19%

- Altele

BROWSERE: n topul popularitii conduce nc detaat browser-ul

Microsoft.
putei vedea dinuntru.

XHTML ncorpo-

reaz HTML i reprezint calea de urmat

pentru urmtorii ani. Internetul este plin de
site- uri care v ofer tutoriale gratuite pentru HTML, cel mai autorizat fiind cel de la
W3Schools (http://www.w3schools.com).
care pe lng tutoriale v ofer i posibilitatea testrii cunotinelor proprii. ncercai s v dezvoltai abilitile nvnd
HTML sau XHTML - rezultatul se va vedea
imediat n paginile de web proprii.

CSS -

treapt mai sus

Cascading Style Sheets (CSS) trebuie privite

ca pereche inseparabil de HTML. CSS ofer designerilor web dou avantaje importante n gestionarea unor pagini web, indiferent de complexitatea lor:

~ separarea
coninutului de design.
Cu alte cuvinte,
CSS ofer pe de o
parte un coninut
care reflect structura logic a infor-

maiei i pe de alt
parte libertatea de a
specifica exact aspectul fiecrui tag HTML;
~ controlul eficient a seturilor de documente complexe. Utilizarea puternicelor faciliti CSS permite designerilor controlul

grafic (aspect i poziionare) al unui numr

nelimitat de pagini, prin modificarea unui
singur document master sau a unei foi de
stil. Modificarea aspectului i/sau poziionrii elementelor dintr-o pagin web se
poate realiza cu ajutorul CSS, far s fie
nevoie s v atingei de codul HTML. Un
alt avantaj al CSS const n flexibilitatea sa
deosebit. Mai multe informaii despre CSS
gsii n oglinda "Rolul CSS".

Tabelele un pas napoi?

Utilizarea CSS n structurarea unei pagini
web cu ajutorul elementelor de bloc fa de

mult utilizatele tabele poate induce ideea c

se va renuna la tabele. Oare folosirea CSS
nseamn dispariia tabelelor? Evident nu.
Tabelele i CSS nu sunt mutual exclusive.
Tabelele i pstreaz locul i importana
lor, mai ales pentru controlul
datelor
tabelare. Utiliznd ns mai pUine tabele n
layout, paginile se ncarc mai repede din
internet. n plus, CSS-ul ofer avantaje suplimentare fa de tabele. Astfel, aa cum
am menionat anterior, prin CSS se pot
controla culorile, plasarea imaginilor (inclusiv a celor din fundal - background
images), dimensiunea i aspectul
lor, spaierea (padding) i chiar
stnga / dreapta a elementelor de
tru o poziionare exact n pagina

marginialinierea
bloc penweb.

Aspecte software
Aminteam

n treact mai sus despre afi-

area paginii n browser i mai exact despre

posibilitatea ca aceasta s nu fie afiat corect. Aceast problem apare datorit diferenelor de interpretare a codului CSS de
ctre diferite browsere. Browser-ul de internet este programul care nelege codificarea HTML i CSS, afind conform

cu

ROLUL CSS
Cascading Style Sheets permit controlul aspectului paginii, folosind o cantitate redus
de cod unitar la nivelul ntregului site. The
World Wide Web Consortium recomand utilizarea CSSn tandem cu HTML.
Utiliznd exclusiv codul HTML,ar fi necesar
ca atributele unui tag s fie specificate la
fiecare utilizare a acestuia. i mai neplcut
este situaia n care se dorete modificarea
atributelor unui tag existent. n aceast situaie, ar trebui modificate toate apariiile tagului respectiv n toate script-urile aferente
paginilor unui site.
Cuvntul Cascading din numele CSS semnific faptul c elementele subordonate
motenesc proprietile. Toate elementele
HTMLaflate ntr-un element ale crui proprieti au fost stabilite ntr-o foaie de stil
motenesc proprietile respective. Unele
reguli pot fi contradictorii (sau pot prea astfel)_n acest caz, ultima regul din cod este
ce care se aplic. Precedena regulilor, tria
lor poate fi neleas uor din multele exemple de pe internet. n orice situaie, folosirea
intens a CSS permite reducerea semnificativ a timpului de realizare i modificare a
unei pagini web. Totodat, CSS face codul
HTMLmai lizibil, prin eliminarea codului de
stil i structur. Un exemplu simplu de
folosire poate fi tag-ul <h1> pentru controlul atributelor unui titlu:
- cod HTML
<hl align="center"><fontface="Verdana,

Helvetica,Arial,sans-serif' size="6"
color="Nnavy">
Titlu</h1>
- cod CSS
h1 {text-align: right; font-size: 16pt;
font-family:Verdana, Helvetica,Arial,sans-serif;
color: navy}
Referina HTMLla regula CSSva fi:
<h1 >Titlu</h1>
_
Cnd se definesc aceste atribute n CSS, se
controleaz toate referinele la <h1> din
ntregul site cu o singur definire sau regul
(indiferent ct de complex este structura
acestuia).
Exemplul precedent poate fi extins pentru
situaia cnd este nevoie de mai multe variante ale tag-ului <h1> la scrierea unor
titluri folosind culorile blue, red i green.
Atunci, codul CSSeste:
h1.blue {text-align: right; font-size: 16pt;
font-family:Verdana, Helvetica,Arial,
sans-serif; color: blue }
h1.red {text-align: right; font-size: 16pt;
font-family:Verdana, Helvetica,Arial,sans-serif;
color: red }
hl.green {text-align: right; font-size: 16pt;
font-family:Verdana, Helvetica,Arial,sans-serif;
color: reen}
Referinele HTMLla aceste reguli CSSvor fi:
<h1 c1ass="blue">
Titlu blue</hl >
<h1 c1ass="red">
Titlu red</h 1>
<h1 class="green">Titlu green</h 1>
Dac nc nu gestionai aspectul grafic al siteului web propriu cu CSS,este bine s v pro-

punei s o facei ct mai repede.

Implementrile CSS difer de la browser la
browser. Un exemplu de implementare diferit a standardului HTML este legat de
TAG-ul <body>. Dac se dorete plasarea
paginii web n colul din stnga sus a ferstrei
browser-ului, evitnd diferenele dintre
acestea, se folosete:
<body leftmargin="O"topmargin="O"
marginwidth="O"marginheight="O">
Fr standardul CSS, aceast problem de
poziionare nu dispare. Cu CSS, aceeai poziionare se realizeaz astfel:
body { margin: O;padding: O;}
Dar de ce este nevoie de ambele declaraii
pentru atribute (margin i padding)? Motivul
este c browser-ele utilizeaz metode diferite
de indentare a elementului <body>. Dac
se utilizeaz body { padding: O; } numai
browserul Opera (att sub Windows ct i sub
Mac) va poziiona corect, n stnga sus, pagina web. Dac se utilizeaz body { margin: O;}
toate celelalte browsere (exceptnd Opera)
vor poziiona corect pagina web.
Cea mai bun cale de urmat este de a poziiona paginile folosind ambele atribute
CSSpentru declaraia <body>.
i dac tot v-ai obinuit s lucrai cu
style-uri, de ce s nu o facei cnd editai
propriile documente cu editorul favorit (fie
el Microsoft Word, OpenOffice Writer etc.).
Editoarele moderne au incorporate mecanismele pentru gestionarea style-urilor.

aceasta pagin de web pe ecranul utilizatorului. Pe msur ce rolul CSS n web

design crete, este necesar testarea aspectului paginilor web n cele mai utilizate
browsere. Aa cum am spus, nici un browser nu afieaz perfect codul CSS, unele
avnd imperfeciuni de implementare a
standardelor W3C. Diferenele de "nelegere" a codului CSSvariaz de la browser
la browser i un programator web trebuie
s in cont de acestea i nu s dea vina pe
browser. Cu alte cuvinte browser-ele, cu
imperfeciuni cu tot, trebuie luate aa cum
sunt i construcia paginilor web trebuie s
plece de la acestea. Scopul este acela ca
pagina web s apar corect n toate browser-ele importante (cel puin rE, FireFox i
Opera, deoarece acestea sunt utilizate n
proporie de 93,6% - vezi statistica de pe
pagina anterioar).
Majoritatea celor care navigheaz pe
internet utilizeaz Internet Explorer sau
Mozilla Firefox, cu precizarea c numrul
de utilizatori Opera este n cretere. Cu
toate c fiecare dintre aceste ultime dou
browser-e este actualizat constant, muli
designeri web nu-i actualizeaz periodic
versiunile propriilor pagini web. n plus, i
sistemele de operare (Windows, Linux sau
Mac OS) sunt actualizate frecvent i chiar
apar versiuni noi ale acestora, faptul afectnd i aspectul paginilor web n browsere.
O bun practic este aceea de a fi n legtur permanent cu ali designeri web (de
dorit utilizatori de sisteme de operare
diferite) pentru a avea o vedere rapid
asupra modului de afiare a propriilor pagini web n cele mai diverse contexte.
tG~;f",""",.-;o.lo"" -~

.,.. t.-:
fk

\.4Ow

'''''''''''!.''*

GO"'Jgle :..

"'"

::;'I~b."'''

aPl'.'.tt:r~~M"."IU

Web

F=.~11'00II~,""",

f9

I
~da~~
er.w
ct\Ip1IlOllp
Y-""'IF\IIIU
IaChlp
SI*?"",,,,,,U.'U!fMUta~_

c..
'.., ...tk~.Clilnv. "'14_:'

d''$I1

'l'

~~~c

IP
r
~"~i"'f!l.~1;1~r':Yl.
,,:",",eo.-.lItU~lUo.000IiItk;fl1Ct1lP~
'1
.rm~ah"O'JI;olU

t"'l"uf..IOOr_F,..,.
."

, 5h"."Mto..no

Jo;'.:
,,_,

Ct!lf.B2..E.21:lJTl

PI!N .ftd 1 v8'..tt: fl

'.eJ'v.,~.I""ICloOtiJIlI~Ooulle"'dlipf:!J-""'H.lmj:;rt
4ttp.,uu,tCI1IP c...IlIUGlluclllCIl,P ' .

.,rc.t:J ;;t~,u,,~

Bhl'''<! CHIP_CliIP}~~
1Il'4:'"'' '.nII" ~.e""ltfw,,, mprtr.~tuJ:tlIP
'iGUU'(fo!"'<t,-aJ'I'~U4CttIPS~y.,
j
''''''
_,
'f

".~'f~QjlIllIol.t

n"

1~

Ut111l1OQ ,~,:uu' GG!lllHl<U1<1\l-IJ~

me~nl.l<d~tCl1' m.Jj duC c~ 'oo4l'I.1'~ Cll11'
UI.I. r~ndulW:. YOf
pul" ~fttWlLt lIltlml'lencuu~ (lin ".
t""Jch'I'
CHIP Onl!OO. BllmW.tr_T~oll:!'J.Jncefl:me ~~Lw.r
,I.'Il*l!II9<tt";""'Iq,_tltfllnd'dtlg.nol\l~
q<ln.:elhK~'"m
,no:t1.mt~d,o)l.,,'JtI.:t\lm~'lgl

~"'"

..J/'Jff

lI/Vrl

'"'tit",

-,.

Orb .'.rO<>t "04

4H1.1t"",.P'Wl.
,~.."

..
t

:::::'~::'I
...

'
""":=':::"'''1

(lfQ~6etfl,

. O::tI"'1"""

. ~.I",

\1'"

1. '=""Il

","

(Itrt"l OU'!'-

6Iu.-RSSO.';,

l~l<'k!ny

."y,~'~l.
~...
,1, "II~"~'

,1.0"'''91'

~. ~l.-?,
H'.I.

'lIII;ptteo'lD'.nllw
"'1h'ff~t"",IY4l"'"
p.wtSlP

r. .

h"'OU'''''tl

Tl"ftl.~r
rroo "A
Voeorolf,lo',O,l
P'''I1,r.2'),1

r ChIl' Speclol
PC Proctlc
lonLJlIriu 2007

r ChIp 6puclol PC Pr.1etlc

Docor"br!e 2006

r Chip 6llUr:!ol
PC f'roctic
NolorTIbrlo 2000

Afl,\

tll(llllPll

un

Motoare de cutare

t;"fI'

1(>

1.1

f4lJ
4ClJm

sunt n fapt baze de date masive care acoper aria internetului i constau din trei pri:
~ cel puin un program numit spider sau
crawler care "scormonete" internetul, furniznd informaii;
~ baz de date care stocheaz acele informaii;
~ instrument de cutare prin baza de date
care selecteaz informaia pe baza unor
cuvinte cheie introduse de ctre utilizator.
De regul, rezultatul cutrilor este
afiat paginat (de exemplu 10 rezultate
afiate pe ecran) pentru a evita liste lungi,
greu de parcurs i de procesat. Motoarele
de cutare au ajuns s fie specializate i pe
alte categorii de informaie dect cele clasice. Astfel, Google ofer i posibilitatea de
a cuta imagini (grupate pe diverse dimensiuni). Cele mai accesate motoare de
cutare difer de la ar la ar i de la an la
an. La nivel global, conform unui studiu
disponibil la http://marketshare.hitslink
.com, pe primul loc se afl Google, cu
77,04%, urmat de Yahoo! (12,46%) i MSN
(3,33%) - vezi imaginea de mai jos.
Pentru ca unele motoarele de cutare s
indexeze i s furnizeze navigatorului internet informaii despre site-uri este ne 77 .04% Google Global
12.46% Yahoo Global
cesar ca n seciunea
3.33% MSN Global
<header>
a paginilor web s existe o
2.12% AOL Global
descriere a site-ului
1 .38% Ask Global
respectiv, prin in.0.24%
. Altele
termediul
meta
TAG-urilor.

Simpla realizare a lllei pagini nu este ns

suficient. Astfel, respectivul site sau informaia coninut de acesta trebuie s fie uor
de gsit. Cel mai simplu mod de a gsi
informaia pe internet este prin intermediul unui motor de cutare.
Motoarele de cutare sunt site-uri speciale din cu ajutorul crora cei care navigheazpe internet gsescinformaii despre
alte site-uri sau coninute n acestea. Dei
exist diferene n modul n care este cutat
informaia, toate motoarele de cutare execut n principial trei operaiuni de baz:
~ caut n internet sau pri ale acestuia, pe
baza unor cuvinte cheie;
~ pstreaz un index al cuvintelor pe care
le-au gsit i locul unde le-au gsit;
~ permit navigatorilor s caute cuvinte sau
combinaii ale acestora n acel index.
Motoarele mai vechi de cutare aveau
un index care coninea cteva sute de mii
de pagini sau documente i rspundeau la
cteva mii de cereri zilnic. Astzi motoarele
de cutare indexeaz sute de milioane de
pagini, i rspund la zeci de milioane de cereri de cutare zilnic. Motoarele de cutare

INTRODUCERE - iNVATAREA CONTINUA

De exemplu, n meta TAG-uri se plaseaz informaii despre domeniul de activitate, cuvinte cheie care descriu acest domeniu, autor etc.
Este indicat s nu fie niciodat omise
meta TAG-urile dintr-o pagin web. Dei
unele motoare de cutare nu se mai bazeaz
exclusiv pe meta TAG-uri, specificarea
setului de caractere utilizat, domeniul,
cuvintele cheie etc. ofer detalii importante
despre respectiva pagin web. Este de dorit
ca descrierea coninutului, domeniului i

cuvintelor cheie s fie fcut concis i clar,

evitndu-se plasarea unor texte lungi.

Harta site-ului
Deoarece motoarele de cutare nu ofer
dect informaii punctuale asupra unui site,
adic o referin face legtura ctre un
punct din structura site-ului, este greu ca
cineva s aib o privire de ansamblu asupra
ariei pe care o acoper site-ul. Plasarea la
vedere a unei legturi ctre o seCiune distinct a site-ului, care s conin structura

lui, poate oferi detalii care altfel ar rmne

necunoscute persoanei care l acceseaz. De
aceea, pentru situaia n care un site are
multe ramificaii (nivele i subnivele) i
chiar dac structura sa ar trebui s reias din
organizarea meniurilor i legturilor, este
recomandat totui plasarea unei hri a
site-ului n structura acestuia. Harta
site-ului mai ofer informaii i despre acele
pagini care nu figureaz n meniuri i permite o navigare uoar direct la acele pagini
care l intereseaz pe cel care le acceseaz.

REGULI XHTML
World Wide Web Consortium

(W3C) reco-

mand utilizarea limbajului XHTML n locul

HTML. XHTML este un limbaj hibrid, arat i
funcioneaz ca HTML, dar are la baz XML.
Pentru cei care s-au obinuit s utilizeze limbajul HTML, trecerea la XHTML este foarte
uoar.
Utilizarea standardului XHTML 1.0 Transitional, o versiune a XHTML care funcioneaz bine pe browserele actuale dar i pe
cele mai vechi (Netscape Navigator 4 i
Internet Explorer 4), permite designerilor
web s modifice fr probleme pagini web
deja publicate n internet dar i s elaboreze
pagini noi folosind aceleai tehnici.
Comutarea de la HTML tradiional la XHTML
1.0 este la ndemna oricui dac respect
urmtoarele reguli simple:

gliDeschldeJidocumenteie
NAMESPACEadecvat

CU DOCTYPE

Documentele XHTML (ca orice document

HTML pot avea extensia .htm sau .html) trebuie s nceap cu declaraia DOCTYPErestul
documentului fiind identic cu unul HTML;
<!DOCTYPEhtml PUBLIC,,-//W3C//DTD XHTML
1.O Strict/ /EN"
,,http://www.w3.org/TR/xhtmll /DTD/xhtmllstrict.dtd">
<html>
<head>
<title>lIustrare XHTML</title>
</head>
<body>
<p>continut</p>
</body>
</html>
XHTML 1.0 poate specifica trei tipuri de
documente XML care corespund la trei
declaratii de tip DOCTYPE(DTD): Strict,
Transitional, i Frameset.
XHTML 1.0 Strict se folosete n situaiile
cnd se urmrete realizarea unui cod curat
i ordonat. Se folosete mpreun cu CSSi
declaraia de tip DTD este:
<!DOCTYPEhtml PUBLIC,,-//W3C//DTD XHTML
1.0 Strict/ /EN"
,,http://www.w3 .org/TR/xhtmll /DTD/xhtmllstrict.dtd">

XHTML 1.0 Transitional se folosete n situaiile cnd se urmrete realizarea unui cod
cu faciliti HTML care s arate bine i n
browsere care nu neleg CSS. Declaraia de
tip DTD este:

mai vechi

<!DOCTYPEhtml PUBLIC,,-//W3C/ /DTD XHTML

1.0 Transitional/ /EN"
,,http://www.w3.org/TR/xhtmll /DTD/ xhtmlltransitional.dtd">

n mod asemntor,
<P> devine
<BODY> devine <body>
i aa

XHTML 1.0 Frameset se folosete n situaiile

cnd se urmrete partiionarea
ferestrei
browserului in dou sau mai multe cadre.
Declaraia de tip DTD este:

I!lPunel toate atributele n

lijapostrofuri

<!DOCTYPEhtml PUBLIC,,-//W3C//DTD XHTML

1.0 Frameset//EN"
,,http://www.w3.org/TR/xhtmll /DTD/xhtmllframeset.dtd">
Declaraia de NAMESPACE urmeaz imediat
aceleia de DTD i are forma:
<html xmlns=,,http://www.w3.org/1999/xhtml''
xml:lang= "en" lang="en">
nlocuind TAG-ul <html

>.

ilIE Multe

pagini XHTML ncep cu un prolog

XML opional
?xml
care precede
declaraiile DOCTYPE i NAMESPACE. Din
nefericire acest prolog XML cauzeaz probleme n unele browsere i este recomandabil s nu fie folosit. Scopul prologului este
de a specifica codificarea alfabetului utilizat
n pagina web.
Dac intenionai s construii o pagin care
s vizeze o arie de cuprindere internaional
i care poate conine caractere non ASCII
putei utiliza meta TAG-ul Content-type n
locul prologului XML. Exemplul urmtor ilustreaz acest meta TAG:
<meta httpequiv="Content-Type"
content="text/html ;charset=UTF-8"/>

!tScrlel toate fAG-urile cu

iiicaractere mici
Spre deosebire de HTML, XML face distincie
ntre caractere mici i majuscule.
Toate
TAG-urile
XHTML i atributele
trebuie
scrise cu caractere mici, n caz contrar
documentul
nu se valideaz. Validarea
trebuie s v asigure c pagina web nu
are erori.
Dac dorii s modificai
un document

HTML n XHTML, atunci

urile se vor recodifica

TAG-

astfel:

<TITLE>Revista CHIP Online</TITLE>

se va scrie
<title>

Revista CHIP Online </title>

<P>,
mai

departe.

n HTML, nu este obligatoriu ca atributele

TAG-urilor s fie puse ntre apostrofuri. n
XHTML aceasta devine obligatorie

de exem-

plu width="55"
i nu width=55.
aceast regul tuturor atributelor.

Aplicai

1'1Toate TAG-uriletrebuie
l1li s fie nchise
n HTML, se pot deschide TAG-uri fr ca ele s
fie nchise neaprat cu TAG-ul pereche de ex.
se poate folosi <P> i <li> fr a le i
nchide:
<p>Un TAG ramas deschis.
<p>Un paragraf fara TAG-ul pereche
n XHTML,
trebuie

fiecare

TAG, odat

deschis,

s fie nchis:

<p>Un TAG ramas deschis.</p>

<p>Un paragraf initial fara TAG-ul
ereche acuma trebuie inchis.</ >

",fAG-urile nepereche trebuie

lijnchlse i ele
n XHTML, chiar i TAG-urile nepereche precum <br> i < img> trebuie s fie ele nsele nchise. Aceasta se face plasnd un spaiu
urmat de slash

/>

la sfritul TAG-ului:

<br />
<img src="ojmagine.gif' />
De remarcat spaiul

care precede slash-ul.

Acesta este obligatoriu

pentru ca browser-

ele mai vechi s poata reprezenta corect n

ecran standardul XHTML.
Observaie: pentru a fi valid i accesibil
TAG-ul <img> trebuie s aib incluse atributele alt= ,," i title=,," forma nou fiind:
<img src="ojmagine.gif'
title="coperta CHIP"/>

alt="o imagine"

STANDARDE WEB
Designerii i programatorii de pagini web
sunt pui deseori n situaia de a modifica de
mai multe ori unele secvene de cod pentru a
rezolva problemele ridicate de diverse versiuni ale acelorai browsere i a face ca o pagin
s se afieze corect. Aceaste cerine provoac
un consum de timp substanial mrit pentru
aceeai pagin web. Situaia tinde s se nruteasc datorit utilizrii masive a telefoniei
mobile sau a altor dispozitive portabile capabile s navigheze pe internet. Pentru a naviga internet, acestea au nevoie de software
nou adecvat modului lor de funcionare, fapt
care ce complic semnificativ procesul de programare a unor pagini web.
Pentru a face internetul un loc mai bun att
pentru web designeri ct i pentru utilizatori,
este extrem de important ca productorii de
browsere i programatorii
s respecte cu
strictee standardele atunci cnd dezvolt noi
aplicaii. Internetul are nevoie de standarde
deoarece acestea asigur accesul tuturor la
aceeai informaie, afiat n acelai fel.
Un exemplu des ntlnit de interpretare diferit a codului HTMLeste cel al formatrii spaii1or. De regul, dac ntre elemente HTML
sunt plasate mai multe spaii (a nu se confunda cu caracterul &nbsp; care foreaz un
spaiu n linie) acestea sunt ignorate.lnternet
Explorerul ns are un comportament diferit.
n acest cod surs se reprezint un tabel care
are n celule text i imagini:
1 <!DOCTYPEhtml PUBLIC,,-//W3C//DTD
XHTML1.0 Transitional/ /EN"
2 ,,http://www.w3 ,org/TR/xhtmI1 /DTD/
xhtmll-transitional.dtd">
3 <html>
4 <style>
5 td { padding: Opx; background-color: #000000;
text-align: center;
6 font-size:14px; color: #FFFFFF;font-weight:
bold;
7 font-family:Verdana, Arial, Helvetica,
sans-serif; 1
8 </style>
9 <body>
10 <table border="l ">
11 <tr>
12 <td><img src="table_pcpractic.jpg"
border="O"/></td>
13 <td>Celula<br /> 1-2</td>
14 <td>
15 <img src="table_pcprac:ic.jpg" border="O"/>
16 </td>
17 </tr>

Calea de urmat
Indiferent de structura site-ului, publicul int sau domeniul acestuia, utilizarea
XHTML este cea mai bun cale de urmat n
realizarea de pagini web, aa cum de fapt
recomand
i W3C . Pe lng XHTML,
W3C recomand
insistent folosirea CSS.
Chiar dac implementarea
standardelor
pentru XHTML i CSS difer de la browser

DERANJANT: De multe ori o pagin arat

diferit n browsere diferite.

18 <tr>
19 <td>Celula<br />2-1 </td>
20 <td><img src="table_pcpractic.jpg"
border="O"/></td>
21 <td>Celula<br />2-3</td>
22 </tr>
23 <tr>
24 <td><img src="table_pcpractic.jpg"
border="O"/></td>
25 <td>Celula<br />3-2</td>
26 <td><img src="table_pcpraetic.jpg"
border="O"/></td>
27 </tr>
28 </table>
29 </body>
30 </html>_
n browserele Firefox i Opera tabelul se
afieaz corect, pe cnd n Internet Explorer
(fie el IE7 sau IE6) nu. Astfel, la afiarea prin
intermediul browserului Microsoft se observ
o dung neagr sub imaginea din colul
dreapta sus al tabelului.
Dac privim cu atenie codul surs se observ
ca la linia 15 din cod, dup TAG-ul de imagine
exist cel puin un spaiu. Acesta provoac
mrirea nedorit a nlimii celulei i apariia
unei dungi negre (culoarea de background)
sub imagine. O alt consecin este c ntreaga linie este afectat, deci i imaginea din
stnga sus. Pentru cineva care nu are exerciiul citirii codului HTML aceast deplasare
poate deveni o problem suprtoare pentru
c o asemenea eroare se depisteaz greu.
Acest defect de reprezentare se elimin cel
mai simplu scriind
fr spaii de exemplu linia de cod 12 sau

dardul HTML nu precizeaz o valoarea implicit pentru acest atribut. Atunci cnd se construiete o pagin web i se omite precizarea
valorii pentru atributul CELLSPACING,dou
browsere diferite vor afia spaieri diferite n
jurul celulelor tabelului.
Ca rezultat apare o regul de scriere a TAG-ului
TABLE,care cere ca atributul CELLSPACINGs
fie declarat n mod ex licit. Aadar, secventa
<table cellpadding="3" border="l ">
.
</table>
duce la afiarea incorect a spaierii celulelor
n browsere diferite, pe cnd, n cazul:
<table celispacing="O"cellpadding="3"
border="l ">
</table>
tabelul va fi afiat corect, indiferent de tipul
browser-ului.
Un alt exemplu mai vechi provine din implementarea diferit a standard ului HTML pentru
TAG-ul BODY n browser-ele Netscape i Internet Explorer. Poziionarea seciunii BODYse
face cu TOPMARGINi LEFTMARGINn internet
Explorer, iar pentru Netscape se face cu MARGINHEIGHTi MAR'GINWIDTH.Dac se dorete
poziionarea corect a paginii web n colul din
stnga sus a ecranului pentru ambele browsere
atunci TAG-ul BODYse scrie:
<body topmargin="O" leftmargin="O" marginheight="O"marginwidth="O">
</body>

liilfflltjMi'-iIMtffltj'mmw-lolxl
fie

~<it

'{....

!ia

r""",,,,,

!:le\>

Addo"",I~H'IHTML~""';;'~""'-1<ml

Mjffit!jlitifl.i-

_Io'xl

.... !ia ~

Ao .<it '(

~i ~-B_'

20.

H'"

l. l.oca6on I""""-I<ml

11ARGINHEIGHT

Un alt exemplu, tipic

pentru modul cum
acelai standard, cel
de HTML, poate avea
implementri diferite
este cel al spaierii
celulelor CELLSPACING ntr-un tabel n
TAG-ul TABLE. Stan-

'"

:-

E<
Q
H

.
~+
H
t!l

'"
~
~"r---

"JlMy~

MARGINI: Este bine s le respectai

la browser, efortul de a armoniza

codul
scris cu cerinele specifice browserelor merit facut.
Nu trebuie

3 II
~

uitat c standardul

pentru

..:J
[llL)!i.

~'.

<i'"

,2-1 #

pentru fiecare browser.

i se recomand
de cte ori realizarea siteului o reclam. O caracteristic
Java Script
de reinut este c scripturile se execut pe
calculatorul
clientului,
caracteristic
im-

JavaScript
face parte
din construcia
fiecrui browser. Dat fiind faptul c imple-

portant
tionarea

atunci cnd se dorete descongesdialogului

cu serverul internet.

mentarea JavaScript OS) este, cu mici excepii, identic n cele mai utilizate browsere, folosirea de cod JS nu va ridica probleme

trei limbaje, XHTML, CSS i JS, poate ataca

cu succes un proiect web nou.

Dac programatorul

web stpnete

aceste

Scurt periplu de-a lungul

evolutiei
, browser-elor web
Programele de navigare pe internet fac parte din viaa noastr de zi cu zi i cu greu ne-am mai putea nchipui astzi activitatea profesional, dar i divertismentul

after hours n lipsa acestora. S ne uitm puin n urm i s vedem care au fost

etapele de parcurs pentru ca browser-ele web s ajung la nivelul pe care I cunoatem n zilele noastre.

rima etap, a browser-elor avant la lettre coincide cu momentul inventrii

www-ului (world wide web) n 1991.
Cel dinti, aprut simultan aa cum probabil ai bnuit, avea o interfa exclusiv n
format text. Acest prim prototip (construit
de Tim Berners Lee, inventatorul wwwului, mpreun cu Robert Cailliau) consta
ntr-un browser web pentru sistemul de
operare NeXTStep. Dei dispunea de o
interfa grafic cu utilizatorul, la data lansrii browser-ul nu putea s afieze ns
pagini cu fotografii ncastrate. De fapt,
acest lucru a fost posibil abia la apariia lui
NCSA Mosaic, lansat n noiembrie 1993.A
fost un pas uria nainte, avnd n vedere

faptul c acest browser a introdus pe pia

suportul pentru sunet, imagine, bookmarkuri i history.

Dictatura Netscape
Dup Mosaic, la ramp a aprut Netscape,
lansat n decembrie 1994.Acesta era n fapt o
versiune mult mbuntit a lui Mosaic, cu
suport pentru conexiuni multiple Tep/IP,
cookie-uri i tag-ul <CENTER > .
Compania mam, Netscape Communications Corporation a cerut bani pentru
utilizarea browser-ului su, dei l oferea i
gratuit unui public int ales pe sprncean,
Cum ar fi studenii i profesorii. Acest
lucru a ajutat enorm la popularizarea lui

Mihaela Dogaru

Netscape, care s-a impus ca browser comerciaL n martie 1996 a fost lansat i cea
de-a doua versiune a lui Netscape, noutile
n acesta fiind frame-urile i JavaScript. La
numai cteva luni dup aceea a aprut i
Netscape 3, care oferea suport pentru
aa-numitele mouseovers (unul dintre cele
mai populare i mai rspndite scripturi
care face ca imaginea s se modifice uor cu
un efect plcut atunci cnd utilizatorul
trece cu mouse-ul peste ea) i alte cteva
caracteristici. Aceste trei browsere faceau
legea pe pia n acea vreme, Netscape 3 n
special devenind un punct de referin din
punct de vedere al excelenei. Orice alt program de navigare trebuia s ofere suport cel

Ilutrii necunoscui
puin pentru tot ceea ce oferea Netscape 3
ca s poat fi luat n serios.
Apoi, internetul a explodat. Microsoft se
interesa de internet nc de la nceputuri,
iar debutul marii dezvoltri a www-ului a
facut colosul din Redmont s pun osul la
treab pentru a recupera teren n faa concurenei. Ce nseamn acest lucru? Simplu:
Microsoft avea nevoie de un browser. i
aceast companie a nceput de la o versiune
de Mosaic i curnd a aprut Internet
Explorer. Dac despre lE 1 i 2 este mai
bine s nu spunem nimic, odat cu Internet
Explorer 3 ns, Microsoft a adus pe pia,
n august 1996,primul su browser decent.
Nu se ridica tocmai la standardele lui
Netscape 3, dar, pentru a se revana, creatorii si l-au facut primul program de navigare cu suport CSS,pe atunci o tehnologie
aproape necunoscut.
S ai ns un browser propriu nu nseamn mai nimic far un marketing bun,
iar prima micare a celor de la Microsoft a
fost s pune lE gratuit la dispoziie tuturor
utilizatorilor, spre deosebire de Netscape
care impune a plata unei sume modeste
pentru utilizare. Cota noului actor pe piaa
navigatoarelor a crescut, dar nu se apropia
nici pe departe de cea a lui Netscape. Unii
ar spune c principalul motiv pentru asta
era nivelul destul de redus de dezvoltare a
programului. Utilizatorul obinuit tia pe
vremea aceea foarte pUine despre browsere, dar de numele Netscape va fi auzit destul
de frecvent. Dac pe deasupra mai lum n
considerare i superioritatea tehnic a celui
din urm, putem vedea de ce, pentru
moment, dominaia lui Netscape pe piaa
de profil era asigurat.

Rzboiul browser-elor
Zorii confruntrii ntre Netscape i Microsoft stteau s se iveasc. Ambele companii
aveau nevoie de noi tehnologii pentru a-i
susine eforturile de marketing i pentru a
da propriului navigator avantajul decisiv
asupra celuilalt. Pe la fmele lui 1996, W3C,
pe atunci nc un factor necunoscut, i-a
publicat propria specificaie CSS 1,n care a
pus bazele abordrii de separare a coninutului de prezentare. Devenea interesant.
De sine stttor, CSSnu era suficient de
atrgtor. Niciunul dintre ofertanii de
browser-e nu credea c nite culori de fimdai i pentru frame-uri vor fi suficient de
convingtoare pentru a ctiga "rzboiul".
Ambii actori au ajuns la concluzia c ar trebui s fie posibil schimbarea CSS-ului unei
pagini web din browser n sine. Ambele

navigatoare
ncorporau
DHTML
(Dynamic HTML), de unde modificarea
CSSprin intermediul JavaScript. Pe atunci,
standardul JavaScript de facto era o implementare a Netscape 3, DHTML, ns, necesita o extensie a DOM (Document abject
Model, adic modelul care descrie relaia
elementelor dintr-o pagin HTML, cum ar
fi cmp urile de introducere, imaginile
paragrafele etc., cu documentul n sine).
Deloc surprinztor, ambii dezvoltatori au
decis s extind JavaScript pe cont propriu
i nu au acordat atenie eforturilor celuilalt.

Pe lng browser-elecare au nsemnat ceva pe

pia, universul navigrii pe internet a mai
cunoscut i prezena unor ilutri necunoscui.
Cu titlul de curiozitate, enumerm n continuare civa dintre acetia.
~ xBBrowser
~ SpaceTime
~ Bitty
~ SeaMonkey ~ K-Meleon
uri ciudate i necunoscut pentru noii utilizatori de internet, Netscape 4 a nceput s
fie clistribuit cu titlu gratuit, iar banii (n
lipsa unei alte surse de venit) au nceput s
se termine. Ultima redut: oferirea sursei
programului.

lWhW'

n general, Microsoft a luat decizii

mult mai bune dect Netscape. nainte de
toate, i-a rescris browser-ul de la zero, astfel c nu mai era limitat de chestiuni de
drepturi asupra codului. Netscape, dimpotriv, a ncercat s adauge caracteristici
noi codului lui Netscape 3, o decizie care
urma s aib consecine serioase.
n al doilea rnd, implementarea
DHTML a celor de la Microsoft era orientat ctre web designeri i utilizatorii cu
ceva cunotine de programare, n timp ce
varianta Netscape se adresa cu precdere
programatorilor pasionai, crora le plceau structurile complicate de dragul structurilor complicate. n plus, Internet Explorer suporta i un element impOltant care
lipsea din programul concurent: lE putea s
reorganizeze pagina. Atunci cnd utilizai
DHTML, de exemplu, pentru a nltura un
element HTML din pagin, toate celelalte
elemente ar trebui s se reorganizeze pentru a ocupa spaiul eliberat de elementul
ndeprtat.
Jetscape 4 a fost lansat n iunie 1997,cu
cteva luni naintea versiunii cu acelai
numr a lui lE, iar documentaia sa a fost
ntotdeauna considerabil mai bun dect
ceea ce oferea Microsoft. n plus, Netscape
a avut ntotdeauna o comunitate foarte activ de aprtori care lui Explorer i lipsea.
Prin urmare, la nceputul acestui rzboi al
browser-elor distribuia forelor era n
mare egal, dei Netscape nc era cu un
pas nainte. Dar asta urma s se schimbe.

l!DDl1 Microsoft a avut avantajul c, spre

deosebire de Netscape, facea i altceva dect
browsere. De exemplu, facea sisteme de
operare, i profitabil dup cum tii, astfel
c banii pentru dezvoltarea unui browser
gratuit nu au fost niciodat o problem. n
plus, popularitatea SO-urilor au asigurat
distribuirea facili eficient a programului
de navigare. Din ce n ce mai plin de bug-

ltuJ:l:ljlldj;H:,iil Dei lupta cea mare s-a dat

ntre cele dou browsere despre care am
vorbit, pe pia existau i alte programe.
Dintre ele, Opera s-a dovedit a fi unul dintre cele mai importante. n primul rnd,
suportul su CSS a fost ntotdeauna excelent, iar n al doilea rnd programul este
foarte uor i de descrcat i de rulat,
implicit foarte potrivit i pentru utilizarea
pe sisteme mai vechi.

CJ:mlJ!

Apoi Microsoft a lansat Internet

Explorer 5, n martie 1999,i era clar cine a
ctigat competiia, lE 5 fiind primul navigator cu suport pentru pri mari ale W3C
DOM, ceea ce a adus gradul de suport CSS
la un nivel superior fa de ceea ce putea s
ofere Netscape. La polul opus, motorul lui
Netscape mergea din ce n ce mai prost din
cauza bug-urilor i nu mai putea supravieui unui update major. Astfel, vechiul cod
Mozilla trebuia rescris. Acesta a fost momentul naterii proiectului Mozilla (The
Mozilla Project). A durat aproape doi ani i
jumtate pn cnd acesta s treac de toate
stadiile beta. A mai durat un an i ceva pn
la apariia lui Mozilla l.0 (2002), iar din acel
moment Mozilla Firefox a nceput s devin o alternativ viabil pentru navigarea pe
net. Dup o versiune 4 dezastruoas, Opera
prea s fi pierdut calea ce bun, dar a revenit cu varianta 5, dup care nu urmtoarea, ci versiunea 7 a mai reprezentat un pas
major pentru program. Surpriza nceputului de mileniu a fost nou-venitul Konqueror, un browser independent, dezvoltat original pentru Linux, cu suport excelent pentru toate tehnologiile moderne.
Cam acesta a fost drumul de la primul
browser pn la versiunile actuale ale programelor pe care le folosim i care ne sunt
indispensabile pentru prezena n internet.
Navigare plcut i sigur cu browser-ul
dumneavoastr preferat!

Coninutul naintea designului

Dac v propunei

s facei o pagin web este bine s avei rspunsul la o ntrebare

simpl, de genul cui se adreseaz

site-ul sau, altfel spus, care este publicul su int? Numai dup ce avei rspunsul la aceast ntrebare
gndii la planificarea

r alte introduceri, abordm direct

problematica i v prezentm cteva
elemente care trebuie avute n vedere
la planificarea unei pagini web: definirea

putei s v

Victor Gheorghe

paginii web.

i precizarea obiectivelor, stabilirea

cuprinsului i pregtirea lui, culegerea i
structurarea informaiilor, formularea
textelor pentru web, planificarea inserrii

de imagini i grafic, creionarea structurii

site-ului i a elementelor de navigare, explicitarea domeniilor vizate i a elementelor de pagin i, nu n ultimul rnd, com-

patibilitatea cu diferite browsere i

Sa-uri. Toate acestea trebuie s funcioneze ntr-un context real. De aceea, trebuie s fie precizate atributele paginii web
prin prisma destinatarului:
pe cine are pagina de web n prim-plan;
cu ce intenie se face pagina web (informare, divertisment, educaie, profesie);
cu ce mijloace (grafic, imagini, culori,
sunet, video, rame, tabele);
cu ce tehnic (a proiectantului, a clientului, programe i variante de programe,
instaIri);
natura paginii (privat, firm, parte
dintr-o organizaie mai mare, furnizor de
servicii);
parametrii sociali ai viitorilor navigatori (copii, tineri, oameni maturi, pensionari, nivel de pregtire);
durata existenei unei variante de pagin web nainte de reproiectare.

1---

I
~

-.

MENIU: Structura acestuia nu trebuie s fie

identic cu a site-ului.

hyperlink
-

Structura site-ului
i pentru c, n mare parte, munca de
planificare presupune gsirea de rspunsuri la cele mai variate ntrebri sau necesiti, continum cu nc o serie de
chestiuni care necesit clarificare nainte
de elaborarea structurii unui site. n
primul rnd, vei determina ce teme vor fi
tratate pe ce pagin i care sunt legturile
ntre paginile individuale i cele externe
site-ului. De asemenea, v intereseaz ce
fel de grafic se plaseaz pe pagini, cu ce
fonturi vor fi afiate elementele de text i
ce dimensiune a fontului vei alege pe elementele de structur. Fr doar i poate
nu pot fi uitate culorile care vor intra n
designul paginilor (vezi oglinda), modalitatea de asigurare a lizibilitii informaiilor, cu focus pe spaierea elementelor n
pagin. a alt preocupare important
apare atunci cnd decidei dac site-ul va
fi construit sau nu pentru mai multe limbi
(exist cazuri n care seturile de caractere
pentru unele limbi ridic probleme).
Cu aceste informaii deinute, putei
purcede la elaborarea structurii site-ului.
Aceasta se compune din documente
HTML ca element de baz. a structur
poate fi simpl (liniar), dar poate fi i
complex, n funcie de cerinele site-ului.
De aceea, o regul general este de a face
de fiecare dat schema structurii site-ului.

Pe aceast schem se pot evidenia legturile dintre elementele structurii i legturile externe. a asemenea schem i
dovedete utilitatea mai ales n situaiile
n care un site mai vechi urmeaz s fie
modificat sau reproiectat. Pe schem se
pot identifica uor elementele de modificat, nlocuit sau eliminat.
Avnd structura site-ului, se poate preciza structura meniului de navigare, care
nu trebuie s fie neaprat identic.

Alegera meniului adecvat

Un element important n arhitectura unei
pagini web este meniul. Meniul este cel
care ghideaz utilizatorul prin paginile
site-ului. Structura sa trebuie s o urmreasc pe cea logic a site-ului. Amplasarea se face n funcie de designul paginii.
n principiu exist patru modaliti de a
amplasa meniul n pagin, fiecare din ele
avnd avantaje i dezavantaje.

Dezavantaje
-+ nu ncap dect rela~iv puine elemente

n meniu.

Amplasarea menlulul
n partea din stnl)a
a ecranului
Avantaje
-+ foarte rspndit;
-+ aspect optic corespunztor;
-+ permite meniuri suplimentare la mar-

ginea de sus a ferestrei.

Dezavantaje
-+ distan mare ntre meniu i scrollbar;
-+ se printeaz neaspectuos pe hrtie;
-+ consum mult spaiu n fereastr.

Amplasarea menlulul
n partea dreapt
a ecranului
Avantaje
-+ eficient, pentru c dis-

Amplasarea meniu lui

n partea de sus a ecranului

tana de la meniu la scrollbar este mic;

-+ aspect optic corespunztor;
-+ permite meniuri suplimentare la marginea de sus a ferestrei.

Avantaje
-+ foarte rspndit;

Dezavantaje
-+ pericol ca pe ecrane cu rezoluie mic

-+ corespunde modului
natural de citire (stnga-dreapta);
-+ rmne mult loc pentru restul informaiilor;
-+ paginile pot fi tiprite uor.

s nu fie vizibil;
-+ rar folosit;
-+ arat neaspectuos la tiprirea pe
hrtie;
-+ consum mult spaiu n fereastr.

Amplasarea menlulul

in partea de jos a ecranului

Avantaje
-+ aspect optic corespun-

ztor;
-+ paginile se tipresc aspectuos pe hrtie;
-+ corespunde modului natural de citire
(stnga-dreapta).
Dezavantaje
-+ amplasare dup informaia din pagin;
-+ pericol ca pe ecrane cu rezoluie mic

s nu fie vizibil;
-+ rar utilizat;
-+ nu ncap dect relativ puine elemente
n meniu.

Culorile HTML
Dei internetul este plin de programe
specializate
n furnizarea
codului de
culoare pentru HTML i majoritatea editoarelor HTML dispun de un asemena
mecanism ncorporat,
totui alegerea
rapid a unei anumite nuane de culoare
se face de regul prin ncercri. Paleta de
mai jos v ofer un mijloc rapid de
alegere a unei culori ct mai apropiat de
cea dorit. Codul de culoare pentru HTML
se specific prin sintaxa #RRGGBB unde
RR,GG i BB reprezint nivelul de culoare
pentru canalul respectiv de culoare. n
spaiul RGB valorile RR,GG i BB se codific hexazecimal cu cte 256 de nivele
pentru fiecare canal de culoare (256',
adic 16.777.216 culori distincte). Aceast codificare a culorilor poate fi folosit n
cod HTML, XHTML i CSS.

o00ooo

330000

660000

990000

ccoooo

FFOOOO

003300

333300

663300

993300

C0300

FF3lO0

006600

336600

666600

996600.

CC6600

FF6600

009900
ooccoo

339900
33CCOO

669900
66CCOO

999900
99CCOO

CC99OO.
ceccoo

FF9900
FFCCOO

OOfFllO

33FFOO

66fRJO

99FFIlO

oo33

330033

660033

003333

333333

663333

006613

336633

666633

009933

l39933

669933

OOCOl
OOff3l

33CC3l
33FF33

000066

l30066

660066

003366
006666

333366
336666

663366
666666

009966

339966

669966

II

00CC66
00fF66

000099

003399

006699

66C03
66FF33

O
O
O CCFFOO O

FFFFIlO

990033

cc0033

FFIlO33

993333

C0333

FF3333

II99663l

CC66ll

FF66ll

99993l

CC9911

FF99ll

99COl
99FFll

O Ccec33 O
O CCfF33

FFCOl
FFFF33

990066

CCOO66

FFOO66

993366
996666

=366

CC6666.

FF3366
FF6666

999966

CC9966

FF9966

66CC66
66FF66

D
O

99CC66
99FF66

O CCCC66 O
O CCFF66 O

FFCC66
FFFF66

3lOO99

660099

990099

CCOO99

FF0099

333399

663399

993399

CC3399

FF3399

336699

6666'J9

996699.

CC6699

FF6699

009999

339999

669999

999999

CC9999

FF9999

1lOCC99
00fF99

33CC99
33FF99

oooocc

33CC66
33FF66

66CC99 O 99CC99
O 66FF99 O 99FF99
66!lOCC II 9900CC
6633CC II 9933CC

3300CC

0033CC

3333CC

00660C
0099CC

3366CC
3399CC

6666CC
6699CC

9966CC
9999CC

O
O
O

cecC99
CCfF99

O
O

FFCC99
FFFF99

ccoocc

FFOOCC

COlCC

FF33CC

III

CC66CC
CC99CC

FF66CC
FF99CC

OOFFCC

D
33CCCC O 66CCCC O
33FFCC O &6fFCC O

OOOOfF

3300FF

6000FF

COOOFF

FFOOFF

003lFF
0066FF

33llFF
3366FF

66l3FF
6666FF

III

9933FF
9966FF

III

C03FF
CC&6fF.

FF3lFF
FF66FF

0099FF
IlOCCFF

3399FF
3lCCFF

6699FF

CC99FF
CCCCFF

n 66FFFF

9999FF
99CCfF

FF99FF
FFCCFF

fJ

99FFFF

CCfFFF

FFFFFF

OOCCCC

lIOfFFF

[J 33FFFF

O 66CCfF O

O
O
99CCCC O ceccec O
99FFCC O CCfFCC O
9900FF

FFCCCC
FFFFCC

Sunt posibile i aranjamente mixte ale

meniurilor, n funcie de structura logic
a paginilor care trebuie accesate. O condiie este ns obligatorie, i anume c meniul trebuie s se integreze bine cu informaiile din pagin aspectul fiind unul "aerisit". Prea mult informaie nghesuit n
pagin nu face dect s reduc atractivitatea acesteia.

Alegerea unui ISP

Un alt aspect important
legat de
funcionarea unui site se refer la anumite
chestiuni tehnice. Astfel, la momentul terminrii programrii unui site, acesta va
trebui plasat pe un server vizibil n internet. Este bine s v alegei ISP-ul nainte
de a face prima machet testabil pentru
site. n acest fel, cu prima machet elaborat putei verifica ct de accesibil va fi
viitorul dumneavoastr site. Fr a detalia
varietate a de servicii pe care un ISP le
ofer clienilor si, cteva aspecte trebuie
clarificate. Primul, foarte important, este
viteza de acces la serverul care gzduiete
site-uL Este de dorit ca timpii de acces
pentru utilizatori non-DSL s fie acceptabili.
Tabelul urmtor v ofer informaii
despre diverse viteze de transfer posibil de
realizat:
Tipul legaturii

Viteza

Timpul

bit/sec.

descarcare

de

Viteza

56

ISDN (1 canal)

64

DSL light

384

DSL 768

768

DSL 1500

1536

DSL 2000

2048

DSL 3000

3072

k
k
k
k
k
k
k

2:0B
0:11
0:06

Vista W1003 Linux Mac

6,5% 1.9% 3.5% 4.0%

Prin urmare, paginile web vor trebui s

fie vizibile corect pe browser-ele instalabile preponderent pe platformele din
familia MS Windows. Sunt vizate cu
precdere browser-ele IE6, IE7, Firefox i
Opera.
nc o informaie necesar nainte de a
trece la programarea unei pagini web este
i cea privind ecranul de referin, altfel
spus pe ce rezoluie a ecranului va afia
programul de navigare pagina. O statistic recent a W3C ofer informaiile necesare stabilirii acestui parametru de proiectare.
Anul 1007
Ianuarie

2:26
0:22

Anul1007 Win XP Win1000 Win98

Decembrie 73,4% 4,7%
1,3%

DSL

1 MB (min:sec)
Modem

urile i, teoretic, paginile web proprii ar

trebui s fie vizibile pe toate platformele
din internet, practic site-ul n construcie
va fi vizibil numai pe majoritatea acestora
i nu pe toate. n principal, aceasta se
datoreaz implementrii diferite a standardelor HTML, respectiv XHTML. Este
bine s v orientai ctre acele sisteme de
operare care sunt mai frecvent utilizate.
MS Windows (cu variantele sale) acoper peste 90% din calculatoarele conectate la internet. Statistica W3C ofer date
despre gradul de utilizare a diverselor SOuri.

6 x ISDN
12 x ISDN
24 x ISDN

0:04

36 x ISDN

D:02

48 x ISDN

Un alt aspect important este legat de

accesul la propriul site, plasat la ISP, pentru modificri, actualizri sau extinderi.
Aceste operaiuni se pot face remote, pe
legturi securizate, i utilizarea lor va mri
viteza de punere n lucru a site-ului. ntrebai ntotdeauna ISP-ul ce mecanisme de
comunicare cu domeniile gzduite sunt
permise pentru administrare
(FTP,
cPanel etc.). Fr asemenea servicii, va fi
greu ca un site s fie inut la zi.

Sistemul de operare
Dei la prima vedere nu ar trebui s v
intereseze, sistemul de operare al
majoritii celor care vor accesa pagina de
web poate avea un rol important n
aprecierea site-ului, dintr-un motiv foarte
simplu: cu toate c standardele HTML i
XHTML sunt recunoscute de toate So-

ridicata 1.014x768 800x600 640x480 necunoscuta

16%
54%
14%
0%
6%

Aadar, folosirea unei rezoluii de

1.024x768 pixeli va permite afiarea lor
corect pe 80%, pe cnd o rezoluie de
800x600 se va afia corect pe 94% din calculatoarele conectate internet. Perioada
de referin fiind ianuarie 2007, este de
presupus c n ianuarie 2008 cele dou
procente s-au modificat. Tendina actual
este ctre rezoluii mari, 1.024 x 768, dar
rmn totui muli utilizatori care au
ecrane cu rezoluie de 800 x 600.
Pentru ca o pagin web s arate bine n
ecranul unui browser conteaz i n ce
palet de culori va fi afiat. Datele statistice ale W3C sunt ilustrative pentru
paletele de culori mai frecvent folosite.
Tendina actual este ctre calculatoare
care folosesc hardware pe 24 sau 32 bii
pentru a afia 16.777.216 culori diferite.
Calculatoare mai vechi i laptopurile
folosesc hardware pe 16 bii pentru a afia
65.536 de culori diferite.
Anul 2007
Ianuarie

16.777.216

86%

65.536

11%

..""'~---';!
~~.~~~~~-~--:==~~~~

._~

l~'"'~

.....
~--

,,--.:!

Structura site-ului
Dac pn acum am vorbit la modul general despre tendinele
a sosit momentul
prezentate

s discutm

despre tema concret

actuale i planificarea

site-urilor,

acum

a acestui special, aplicnd deja cteva elemente

anterior.

roiectul ales ca tem pentru acest

CHIP Special const n realizarea

unui site al editurii n vederea promovrii imaginii sale n internet. Aa cum

am vzut n articolele anterioare, planifi-

dintre cele
Victor Gheorghe

carea structurii

unui site trebuie

s in

mentele care le definesc, tiraje, public

int etc.) inclusiv site-urile acestora;

cont de anumite aspecte complexe. Site-ul

care trebuie realizat trebuie s fie conform
urmtoarelor cerine:

- pagina de nceput s conin prezentarea editurii;

- s prezinte

publicaiile

editurii (cu ele-

s fie compatibil

cu browserele

IE6,

site-ul, ierarhia elementelor grafice, structura elementelor, spaierile i culorile. S-a

pus accent pe urmtoarele elemente:
- textul pentru paragrafe s aib mrimea i culoarea stabilit (s-a ales culoare gri pentru c ofer un aspect mai plcut fa de negru, care prezint
trast prea puternic);
-

un con-

titlurile, subtitlurile, capul de tabel i

culoarea de fond s se asorteze cu culorile logo-ului;

- pentru a marca nceputul unor noi paragrafe s fie folosit un bullet fcut n
aceleai culori;
- s-a creat un tabel pentru a exemplifica
atributele grafice folosite (culoare, spaiere, aranjare);
- s-a preferat folosirea de culori alternative pentru fundalul liniilor tabelului
IE7, Firefox i
vedere cele mai
loadabile)
pe
Windows, Mac

Opera (se vor avea n

recente versiuni downsistemele
de operare
i Linux;

- deoarece site-ul va fi unul de informare

asupra ariei de activiti publicistice
acoperite de editur, acesta trebuia s
se adreseze
vrst;

tuturor

categoriilor

de

- pentru fiecare publicaie trebuie afiat

imaginea unei coperte reprezentative
sau un colaj de mai multe coperte;
-

dat fiind caracterul de prezentare al

site-ului, soluia grafic cerut se refer
la nlime fix centrat orizontal i
vertical n pagin:

- header-ul
editurii;

de pagin s conin logo-ul

Avnd la baz cerinele amintite anterior,

se poate trece la pasul urmtor, care const n elaborarea machetei grafice pentru
una din paginile site-ului (de obieci pagina principal).
Macheta grafic (altfel
spus o imagine static a ceea ce dorim s
fie afiat n fereastra browser-ului) poate
fi fcut cu ajutorul unui program de
grafic de tipul Adobe Photoshop, GIMP
sau Corel Photopaint. Se pot utiliza pentru elaborarea unor asemenea machete i
programe care lucreaz vectorial, precum
Corel Draw sau Adobe Illustrator.
Informaia a fost formatat n machet
innd cont de cerine. S-au avut n vedere
dimensiunile
paginii, fixe pentru ntreg

fa de obinuitele caroiaje pentru c

rezultatul are un aspect mai plcut i
permite o urmrire vizual mai uoar;
- s-au creat dou liste de nivell, respectiv 2 cu caracteristici
diferite, tot n
scop de exemplificare.
Macheta poate fi rezultatul unui proces
iterativ n care prin sugestii i modificri
succesive se ajunge la varianta
final
acceptat de ctre solicitant. Forma final
a acesteia constituie
programrii.

punctul

de plecare al

Zone
Pe machet am definit zonele care vor fi
tratate distinct la realizarea HTML a unei
pagini de test. Zonele cu imagini, headerul
i coloana din stnga vor fi populate cu

- printre culorile paginii s se regseasc

obligatoriu cele din logo;
- meniul s fie orizontal astfel ca butonul
fiecrei publicaii s fie distinct;
-

aranjarea informaiei n paginile de

prezentare ale publicaiei s fie pe coloane, iar cea din stnga s conin
imaginea publicaiei;

- coloanele s fi larg spaiate;

- s fie folosit un font neserifat
seciunile paginii;
- rezoluia de referin
de 1.024 x 768.

n toate

a ecranului

s fie

La cele de mai sus s-a adugat specificarea publicaiilor care formeaz obiectul
site-ului: CHIP, Level, FOTO-VIDEO digital, PC Practic, i CHIP Special, precum

""88

i cele dou site-uri CHIP Online i Level

Online. n acest fel, prin adugarea publicaiilor s-a putut fixa coninutul
site-ului.

meniului

STRUCTURARE: Macheta trebuie mprit n zone, pentru a putea trece cu succes la

programare.

imagini

de test, intruct

n aceasta faz

~ookma<b lools

ror

conteaz aspectul general al paginii i

amplasarea imaginilor, facnd abstracie
de coninut. n plus, mprirea machetei

Lorem Ipsum

n zone va constitui ulterior i ghidul pentru codificarea HTML. Imaginile de test

vor fi nlocuite ulterior cu imaginile specifice din respectivele zone.
, centrat n fereas-

W~J1IV lI'e 'Me;I!

W~fIt i,' Lorelll IjN/III!

Lorem
lpsum
is simply durnrny text of the printing Ind typesetting
irtdustry. Lorem lpsum has been the indus!(y'S s1andard dummy text
ever sirtC: the 1500s, when an llnknown
printef tool\ a gaUey of type
and scrambled It 10 make a type specimen book.1t has survived noI 001'1
five centunes, but SiS-Othe !eap iOla electronic lypeset1ing, remaining
esserdially unchanged. 11was popularised in the 1960s wlth Ihe release
of letraset
sheets conlaining
Lorem Ipsum passages, and more
recently
with (.ies-Ictop pUbfishing software
Jike A.ldlJs
PageMaker
includlng versions of Lorero IpSlIln

tra browserului, va conine ntreaga pagin i va avea dimensiunile fixe care s se

ncadreze n rezoluia de 1.024 x 768. Ea
are rolul exclusiv de a fixa coninutul i de
. a trasa chenarul exterior. Se remarc un
spaiu exterior lsat pe contur astfel ca aspectul grafic s lase impresia de "aerisit".
ntruct coninutul
paginii se va plasa
ntr-un chenar interior spaiat pe contur
fa de zona 1 este nevoie de zona 2
(negru). n cadrul zonei 2 se plasez elementele paginii. Zona 3 (rou) va conine
headerul paginii, logo-ul Vogel Burda
Communications.
va
conine meniul pentru navigare. Pn aici
am definit zonele care sunt comune tutu-

~ is a 1009 establisbe.;l

fact that a reader

wi:!! be d!sttocted

by Il)e

readable content of a p~ge wi1en !ooking at its layout. The poiot of using
lorern Ipsum is IMI it has a rMreorless normal dis1ribution of le1tets,
as opposed to using 'Content here, content hete', making it look lii:e
readable Engtish. Many deSktop pubbshing packages and web page
editors now use Lorem lpsum J;iStheir detautt model text. antJ a search
for 'Iorern ipsvm' ...
vill uncover many web sites stiU n their in1ancy.
Variau:> versions have evolved over fhe years, sometimes
sometimes on P~I(pOSe (injec1ed hllmour and lhe Jike)

I;ly accident.

w~ere t:h?" ;1comeIrom!

w~ere C/f/f I flelJOme/

Conlrary ta popular beliel. Lorelfllpsum

is not sirnply random text, It has
roots In a piece ot classical Latin llterature lrom 45 se, mal(ing it over
2000 ve-ars old. Richard McClintock, a latin
professor
al
Hampden.Sydney
College in Virginia, looked up one of Ihe more obscure
latin wordS, consectetur,
iram a Lorem Ipsum passage, anei going
through Ihe cites 01 the word in classical lilera1ure, discovered
the
~mdoubtable saurce. lOfem IpSl.ltn comes Irom sections 1.10.32 Md
1.10.33 ot "de Finibus BonOflJtn el Ma!orum" (The E>..1remes ot Good anei
Ev~) by Cicero, written in 45 ec. This book is a trealise on the theory of
ethies, very popular during the Ren.sllssance. The Iirst ijne of Larem
Ipsum, "larem lpsum dolar sit amet.. ., comes from a line in section
1,10.32.

There are many variations of passages of Larern !psum available, but

the majorily have S~lffeted alletation in some fann, by injected humotrt,
or randomised words which dant loof~ even Slightly believabre. It you
are goin9 to use a passage- 01 Lorem lpsum, you need to be Sute there
isn't anything embrr-;;;ssing hidden in the middle of text .. A.II the Lorem
lpsum generatots ro thf: lntemet tend to repeal pfedefined chunks as
necessary,
mal.ing this the 1irst true gerlerator on the Internet, It uses a
dictionary of aver 200 latin words, combine-d wrth a handf~ll of mode-!
sentence structures, 10 generete lorem Ipsum which looks teasDrlsble,
The genefatecl Lorem Ipsum is therefote
always free from repe1ition,
injected !)umour, or noo-characteristic
words ete.
(.' patagraphs

TM standard chunk of lorem Ipsum used since the 1500s i-s

reproduceci below fOr thOse in1ereste(.t sectioos 1,10.32 and 1.10.33
from "de Finibus Sonor-vm el Malorurn" by Cicero are also reptoduce-d in
their exact OI19lnaJ form, acc-ompanied by EngliSh versions hom 1he
1914 Iranslalion

ror paginilor din site.

Zona 5 (albastru) va conine detaliile
pentru fiecare publicaie. Cu alte cuvinte,
zona 5 va conine informaiile corespunztoare fiecrei publicaii n parte, adic

Popularea zonelor
Deoarece elaborarea unui site presupune
o cooperare strns cu solicitantul, iar in-

imaginile corespunztoare
fiecrei publicaii. Zona 7 (magenta) reprezint
o

formaiile pe care acesta trebuie s le furnizeze pentru a fi aezate n pagini nu au

n dou i care

rwotds
b"Y1es
rlists

by H. Rackham

va conine informaia propiu-zis. n fine,

zonele 8 (gri) reprezint dou coloane n
care se vor plasa textele, listele i tabelele
care descriu publicaiile.

se va schimba de la pagin la pagin. n

cadrul zonei 5, aliniat la stnga, se delimiteaz zo a 6 (verde) care va conine

coloan care se va mprit

l!eIp

ht:!p:/ltipsurn.coml

t4!Ij[W'Mi#3#61t.]IIS. ti"i! i1 'fi' % ' e"'CWWffl@'tM ,q

I
f

htlp;.JI_.br&:.t!)!J1el&:lf_comJ

ntotdeauna,

din start, o form finit, pu-

tei face apel la texte neutre care vor fi plasate n pagina numai pentru a putea vedea
vedea cum se "aeaz" textul. Putei apela
la Lipsum generator, care este un site
foarte util n acest scop (http://www.lip
sum.com).
Acest site v ofer texte cu numrul
specificat de cuvnte, paragrafe i liste cu
ajutorul crora v putei popula zona de
text din pagina web pn cand ajungei n
posesia textelor finale. Pentru a obine
textele de dimensiunile
dorite, alegei
parametrii de generare a textelor, listelor
sau cuvintelor
i apsai pe butonul
Generate Lorem Ipsum. Textele furnizate
de Lorem Ipsum sunt n latin i pot fi
utilizate gratuit. Pentru a transfera textele

o:

ro

n pagina de web,
copy/paste.
Un alt generator,

r;-l.
u..J

=::...;.
.,

I",,'::J

I,~., ::J
'I'~"

~
~

::J

I'"~"

.h"

::J

1'-""" -

ro. 1'';'

~b.:.,,\ th.

'~r',~,!

~'r,,> 'ht
)'
L"'..'

.
"SI ."' '''''''C'"'~;:''''':
. "
~ tol",j t" 't
..4'"' ..
f"

~.f.

.,'-:1 ,,'

T".

~,~....-,.,,",

fi."

r=-3

!""

~. un-l~O;';.
4>1t
LJ' ~

r"

.J t..':11

.. ",;. .

:.",~

"''''''/1
".t>

ot ~

~:.,

<;.~"

" .,~;,
."T.'

....
t.

.'.,

"d'
>,

~.

., l'I..-. .~ ,~~
wt

'"

~t .

II

L,r-~
:.t.~

"C

..'''"',,,.

-,,..,,~.~..:,:",,.,,,
* ..~,~
"""",
..'"'~
"'....
" ,; .1".' ","
r ".~ .::;....
,_.

l'

,..,i'

~',l

.~ '- t1. ~

ei"-'"

l: !llll!)"I1!!')11'.!!! II!""J

:::

'?!

~ ~:::

Ilo!!"
'"
t,,'cl."<;;;til)(tfOt~'
~r~~

c;~~,~~t,~

utilizai

procedeul

Blindtextgenerator,

(pe care l gsii la http://www.blindtext

generator. corn!) v ofer o palet mai
larg de opiuni. Se pot alege texte formatate dup necesitile proprii n ceea ce
privete fontul utilizat, mrimea i aspectul acestuia, alinierea paragrafelor, nlimea linei. Adiional textului propriu-zis
(exist opiune a de selecie pentru englez
sau latin), se genereaz i codul CSS care
poate i el fi inclus n codul propriu. Poate
fi un exerciiu util s generai texte cu
diverse

formatri,

astfel

putei

vedea

eFle

Edit V_

.-,-

___

TooI<Heip

FaVOlites

J ,.

Sea'ch-FoIde-'-.----X--It)--O-:--------

i] -

ddre l.....:J F:\pagina_web_.impla

x

Fald

..:J

- -ljlllllij!lll. illll.f!ll;.W!I!l.-"".i!l-

img

File Folde,
File Falde,

...).lyle

...)img

8 K8
8 K8
8 K8

~Cdlegolii

...) .lyle

.!1index
!l
vici

modul cum se aeaz textul n pagin

funcie de diverse atribute CSS. Codul
CSS funcioneaz identic pentru orice
browser. Practic, totul se reduce la o operaie copy/paste fr a mai fi nevoie s se
fac nici o intervenie.

ln~

Go

Name

Filelox Document
Fuelox Document
Fuelox Document

Fiierele site-ului

S lum ca exemplu un site web,

fiierul cu numele index.html are legturi
cu dou pagini, fiierele numite categorii.html i servicii.html. Pagina mai
conine o imagine (fiierul logo.jpg) i
fiierul cu formata rea (format.css), deci
site-ul este compus n realitate din 5
fiiere.

mprirea site-ului pe zone are i un corespondent, s-i zicem aa, fizic, reprezentat de structura de directoare i fiierele aferente site-ului. Spre deosebire de
un fiier MS Word sau OpenOffice, n
care imaginile se insereaz n document i
fac parte din acesta, n cazul unei pagini
web, acestea sunt fiiere separa te.
Documentul HTML este de fapt un fiier
care conine numai text i poate fi editat
cu un editor simplu de texte. Extensia
.html sau .htm face ca acesta s se deosebeasc de alte fiiere text.
Un document HTML este formatat cu
TAG-uri HTML care definesc aspectul
su atunci cnd este afiat n fereastra
unui browser. n fereastra browser-ului se
afieaz i imagini, cu toate c acestea nu
sunt con inute fizic n fiierul HTML.
Acestea sunt pstrate extern i afiarea lor
este realizat cu ajutorul TAG-ului
<img> din documentul HTML.

Atunci cnd se acceseaz o pagin web cu

ajutorul unui browser, de exemplu
http://www.vogelburda.ro. serverul web
caut automat un fiier cu numele
index.html sau index.htm i n cazul n
care l gsete returneaz pagina browserului. Acest lucru este similar cu accesarea direct a adresei http://www.vogelburda.ro/index.html.
Prin convenie,
punctul de intrare ntr-o pagin web este
un fiier cu numele predefinit index, extensia putnd diferi de la caz la caz (htm,
html, php, shtml).
Deoarece chiar i pentru pagini web
simple n mod normal sunt folosite mai
multe fiiere, se impune ca acestea s fie
organizate ntr-o structur de directoare,
de obicei dup un anumit tip.
Astfel, pentru exemplul simplu menionat mai sus vom proceda n felul urmtor:

Convenii

index.html

I
categorii. html

I
servicii. html

I
logo.jpg

I
formatcss

- n directorul rdcin plasm toate fiierele HTML;

- n directorul img pune fiierele care
conin imagini, deobicei acestea au extensia .jpg, gif sau .png.;
- n directorul style punem fiierele de
formatare .
Respectnd aceste reguli, n funcie de
complexitatea site-ului, se poate concepe
o structur de directoare care s fie n
concordan cu structura logic a acestuia. n acest caz, un anumit fiier corespunztor unui obiect aflat pe o anumit
ramur a structurii logice poate fi identificat uor dac este plasat corect n structura de directoare.

Nume de directoare
Dup finalizarea site-ului, fiierele acestuia sunt publica te (plasate) pe server, pe
care ns nu se afl instalat neaprat sistemul de operare Windows.
Pentru a evita eventuale probleme trebuie respectate anumite reguli de scriere:
- toate numele de directoare i fiiere se
scriu cu litere mici. Spre deosebire de
Windows, alte sisteme de operare fac distincie ntre majuscule i minuscule. Altfel
spus, pot exista n acelai timp i acelai
loc un fiier avnd numele scris cu majuscule i altul scris fr majuscule. Sistemul
de operare Windows nu face aceast distincie .
- nu folosii diacritice sau spaii n numele fiierului. Folosirea de spaii sau diacritice n scrierea adreselor de internet
presupune o operaie de convertire. De
exemplu, un fiier cu numele "indexul
meu.html" va trebui apelat cu "indexul
%20meu.html". Operaia este greoaie i
poate fi evitat simplu nefolosind spaii n
numele fiierului. n ceea ce privete folosirea diacriticelor n numele fiierelor,
acestea trebuie evitate chiar i atunci cnd
lucrai n sistemul de operare Windows.
Operaiile ulterioare de redenumire, copiere sau tergere a fiierului pot genera
erori.
- folosii ntotdeauna ,,1" n loc de ,,\".
Sistemul de operare Windows este singurul care folosete ca separator ,,\" backslash pentru delimitarea elementelor de
cale (path) pentru un fiier, celelalte sisteme de operare folosind ,,1" slash pentru
acest delimitator. De aceea folosii ntotdeauna delimitatorul normal ,,1" slash n
scrierea unor legturi, TAG-ul <a> sau
< i m 9 >, altfel pagina web va funciona
corect numai pe un server Windows.

;;~~
.-'"":" ~,.-".---...,.

" .....
'r.. Il.,
l' oh.,
0 .....
:~:~~:~

100 .....
.::;;~;:::

W
.
11

Formatarea HTML
D

Seciunea <html>
(liniile 3-150) are
dou seciuni
<head>
liniile 4-14 i
<body> liniile 15-149.

directorul surse/step-l-macheta).
nainte
de a trece la programare, reamintim faptul c standardul
dup care se programeaz este XHTML 1.0.

4: <head>
5: <title>Vogel-Burda Communications:
</title>
6: <meta http-equiv="Content-Type" con-

Codul CSS pereche pentru cel HTML

de pe CD este listat n oglinda "Script CSS
pentru machet" (alternativ, putei apela
la fiierul vbcomm1.css
din directorul
surse/step-l-macheta/style/
de pe CD).
n cazul machetei
realizat n cod
HTML (ATENIE:
numerotarea
este
folosit exclusiv pentru a uura localizarea liniilor!), documentul
ncepe cu declaraia de tip, liniile 1-2.

tent="text/html; charset=iso-8859-1" />

7: <meta name="Description"
content="VogeIBurda Communications -

1: <!DOCTYPEhtml PUBLIC,,-//W3C/ /DTD

XHTML1.0 Transitional/ /EN"
2: ,,http://www.w3 .org/TR/xhtmI1 /
DTD/xhtmll-transitional.dtd">

Burda Communications" />

11: <meta name="Title" content="Exemplu

Up ce am stabilit modul n care se

partiioneaz macheta, putem elabo-

ra o prim variant de cod HTML (pe

CD aceast variant este reprezentat de
fiierul macheta-meniu-cu-css1.htm
din

3: <html xmlns=''http://www.w3.org/1999/
xhtml">

Revista Chip, Level, PC Practic" />

8: <meta name="Keywords" content="vogelburda, vogel burda, editura, Chip, Chip
Special,
9: revista Chip, revista, revista Level, PC
Practic, revista PC Practic" />
10: <meta name="Authors" content="Vogel

de cod pentru prezentare" />

12: <Iink href="style/vbcomml.css"

D
1.

2000

l~

t ",

( I ..

12.0.1.\.

6.1.IZn
.ck

1.0

,.3:J

)/

Dup schiarea machetei, urmtorul

pas const n transpunerea acesteia
n practic folosind HTMl i CSS.

Victor Gheorghe
rel="stylesheet" type="text/css"

/>

13:

14: </head>
15: <body>
<1- continut sectiune body ->
149: </body>
150: </html>
n seciunea
paginii <title>

<head>
se declar titlul
(apare n maneta de

sus a ferestrei precednd numele browser-ului) i meta TAG-urile pentru descriere pagin, cuvinte cheie, autor, titlu.
La linia 12 se face legtura cu CSS-ul
extern care se gsete n directorul style i
are numele vbcomm1.css.
Textul CSS
putea fi inclus direct n corpul machetei,
dar asta ar fi nsemnat c respectivul cod
ar fi trebuit inclus n sursa fiecrei pagini
html a site-ului.
Includerea CSS direct n corpul documentului (cu TAG-ul <script
are un
dezavantaj

major: la orice modificare

26: width="928" align="center">

27: <tr><td><a href="index.htm"><img
src="img/macheta-header.jpg"
width="928"
28: height="78" title="Vogel Burda
Communications"

PRIMII PAI:
Aa arat
pagina dup
ce a fost
inclus titlul.

bo rde r="O"/></ a></td></tr>

29: </table><!-sfarsit tabel header ->
ZONA 4 (liniile 30-49) conine meniul
paginii. Acesta este plasat ntr-un tabel,
fiecare celul coninnd cte un element
separat al meniului. Pentru navigare, la
codul CSS, aceasta trebuie repetat pentru
toate documentele CSS care intr n structura site-ului. A pstra codul CSS ca script
separat permite ca o modificare s se fac
o singur dat, ntr-un singur loc pentru
ntregul site. Este recomandabil
ca toate
scripturile care sunt incluse n documentul HTML s fie plasate ntr-un director
separat, n cazul de fa style.
Seciunea <body> ncepe la linia 15,
dar n spatele ei se afl stilul declarat

scriptul CSS (vezi oglinda) la linia 1-4. De

reinut c aici se declar att dimensiunea
marginii de sus, ct i imaginea care va fi
folosit ca background.
Documentul
HTML are marcate prin
comentarii
nceputurile
i sfriturile
zonelor explicitate n macheta. Un comentariu (cod ignorat de browser) are
forma unui T AG unde nceputul
este
marcat de <!-iar sfritul de ->
Zonele sunt programate folosind dou
TAG-uri <table>
i <div>.
ZONA 1 ncepe la linia 17 i se termin la
linia 147. TAG-ul <table> are stilul, care
traseaz chenarul exterior, ncorporat ca
atribut. Nu s-a mai plasat n CSS deoarece

ZONA 3 (liniile 24-29) definete headerul de pagin care va conine logo-ul.

Pentru macheta,
s-a folosit imaginea
macheta-header.jpg
cu dimensiunea
928
x 78 pixeli. Este recomandabil
ca toate
imaginile

s fie plasate

ntr-un

director

separat, n cazul de fa img. Se remarc

lipsa oricror spaii n interiorul T AGului <td> pentru a evita aspectul schimbat
n browserele

IE6 i IE7. Pentru

a evita

plasarea unui chenar n jurul imaginilor

machetei, n scriptul CSS s-au eliminat
chenanll,
marginile
i spaierile, toate
fiind setate explicit la O pixeli. S-a procedat astfel ntruct
unele browser-e
plaseaz implicit un chenar n jurul imaginilor, dac acesta nu a fost suprimat.
24: <!-inceput tabel header ->
25: <table cellspacing="O" cellpadding="O"
style="border: 1px solid #8e9da8;"

(~I~-.~
Fie

Edi

v_

F-nes

.
Toca H~

.;~-

I I

trecerea cursorului peste un element de

meniu, acesta i schimb culoarea (efect
rollover).
30: <I-inceput tabel meniu ->
31: <table celispacing="O" cellpadding="O"
style="border: 1px solid #8e9da8;"
32: width="930" align="center">
33: <tr height="20">
34: <td width="l 30"
bgcolor="#BFOB34">&nbsp;<a class="menu"
href="index.htm">VOGEL BURDA</a></td>
35: <td width="123" bgcolor="#02243d"
class="inmenu" style="border-right: solid
1px #8e9da8;">
36: &nbsp;<a c1ass="menu"
href='Javascript: void(O)">CHIP
Online</a></td>
37: <td width="69" bgcolor="#02243d"
c1ass="inmenu" style="border-right: solid
1px #8e9da8;">
38: &nbsp;<a c1ass="menu"
href="javascript: void(O)">CHIP</a></td>
39: <td width="ll 5" bgcolor="#02243d"

..

nu va fi refolosit. Totodat, cu acest T AG

17: <!-inceput tabel principal ->
18: <table celispacing="O" cellpadding="O"
style="border:1 px solid #002f2f;"
19: width="968" height="61 O"align="center">
<!- continut zona 1 ->
147: </table><I-sfarsit
tabel principal ->
se stabilesc dimensiunile chenarului 968 x
610 pixeli centrat.
ZONA 2 ncepe la linia 22 i se termin la
linia 145. TAG-ul <div> are ca atribut
stilul care spaiaz chenarul exterior de
cel interior ncorporat, cu 20 pixeli.
22: <!- inceput tabel centru interior vizibil
in toate browserele->
23: <div style="margin-top: 20px;">
<!- continut zona 2 ->

'-------------------------------'.:J
1'-----------------------..Il-r--,r-:r".IMY~~

-.~l'!l.'.'"

REALIZARE - VAlIANTA HTML: $1 CSS

SCRIPT CSS PENTRU MACHETA
1: body {margin-top:38px;

16: hr { border:none;

margin-bottom:O;

margin-left:O; mar in-right:O;

2: font-family:Verdana,
Arial, Helvetica,

#cccccc; height:O

sans-serif; font-size:9pt;
font-weight:
normal;
3: backg rau nd-i mage: url( ../img/mai n_bgr.jpg);

18:
19: a.menu:link,
a.menu:hover {

17: b, strang { color:#6D97CO;

4: }

20:

5:
6: .coverl

Verdana,

pointer;font-family:

5px Opx 5px Opx}

sans-serif;
9: color: #FFFFFF; font-size:9pt;
normal;}

27: p.p_5 {margin-top:5px;

28: p.p_3 {margin-top:3px;

26: p.p.10

font-weight:

10:
{ BACKGROUND-COLOR:

#02243d; cursor:
Arial, sans-serif;

Verdana,

pointer;font-family:

13: td.inmenu:hover

font-weight:

{ BACKGROUND-COLOR:

#BFOB34; cursor:pointer;

Verdana,

font-family:

Arial, sans-serif;
14: color: #FFFFFF; font-size:9pt;
normal;}

font-weight:

style="border-right:

solid

void(O)">LEVEL

<td width="73"

bgcolor="#02243d"
style="border-right:

1 px #8e9da8;">
42: &nbsp;<a

c1ass="menu"

h ref="javascri

pt: void(O)">

43:<td

width="194"

c1ass="inmenu"

c1ass="menu"

href='javascript:

void(O)">CHIP

Foto-Video

Digital</a></td>
45:<td

width="1

c1ass="inmenu"

04"

bgcolor="#02243d"

style="border-right:

solid

1 px #8e9da8;">
46: &nbsp;<a

c1ass="menu"

href="javascript:

void(O)">PC

Practic</a></td>
47: <td width="120"

bgcolor="#02243d"

c1ass="inmenu">
48: &nbsp;<a

c1ass="menu"

href='javascript:

void(O)">CHIP

Special</a></td>
49: </tr></table><!-sfarsit
Efectul

11-14

de rollover
din

scriptul

rului

peste

torul

atributului

11: td.inmenu

46:
47: }

celul

tabel

meniu

se realizeaz

CSS,

trecerea

specificndu-se
atributul

:hover.

{ BACKGROUND-COLOR:

->

cu linicursocu aju-

O; }

#D9E9F9;

line-height:

16px;

53:

padding:

32: ul.standard

{ margin:5px

Opx 5px 5px;

33: ul.standard li { backgraund: url( ../img/darkdot.gif)

norepeat Opx 4px; padding: Opx Opx
Opx 12px; }

cursor:

Opx 5px 20px;

55:
56: #js_c1ock { font-size: 1Opx; padding:2px
Opx Opx; float:left;

De

color:

font-size:9pt;

#FFFFFF;

Arial,

sans-serif;
font-weight:

rul

:hover
IE6.

{ BACKGROUND-

#BFOB34;

cursor:

14: font-family:

Verdana,

color:

font-size:9pt;

pointer;
Arial,

sans-serif;
font-weight:

TAG-ului

nu

ea avnd
Pentru

TOQkH.

:hover
IE6

acest

referina

fel
din

a-

implemen-

ataat

culoarea

exclusiv
a eviden-

celulei

atributul

cadrul

cu

n browse-

Pentru

selectat,
declar

meniul

este

(anchor).

curent

i se mai

funcioneaz

pentru
<a>

ia pagina
tive

faptul
nu

Atributul

CSS

tarea

Opx; font-style:nor-

3px Opx 5px; float:left;

remarcat

tribut

Opx

mal; padding:2px

pointer;
Verdana,

F4\i'OIUs

3px;

57:
58: .c1ock_ora {font-size:1

12: font-family:

#FFFFFF;

#336699;

54: }

padding: 5px Opx Opx 5px; list-styletype:none;}

- ...le F\~hel:4-mer-x\l-cu.hlIn

1 px #8e9da8;">
44: &nbsp;<a

O; padding:

16px;

color: #FFFFFF;
line-height: 16px;

Fie Edi: v_

solid

line-height:

51 :
52:

LEVEL </a></td>

bgcolor="#02243d"

42:
43: }

none}

normal;}

style="border-right:

backgraund-color:

49: td.tableHeader
{
50:
backgraund-color:

COLOR:
solid

Opx Opx

41 :

48:

13: td.inmenu:hover

class="inmenu"

}
}

normal;}

Online</a></td>

40: td.tableRow

30: .colsplit {color: #888888; font-family: Arial,

Verdana, Helvetica, sans-serif; text-decoration:

#02243d;

c1ass="menu"

href='javascript:

O; margin:

29:

35: ul.spacy { margin:5px

1 px #8e9da8;">

37:
38: img { border:

44:
45: td.table5ec

Opx; }

34:

15:

41:

{margin-top:1

font-

31 :

12: color: #FFFFFF; font-size:9pt;

normal;}

le

22: h1, h2, P { margin:

25:

40: &nbsp;<a

url( ../img/dark-

Opx 4px; padding:

39:

24: h1 {color:#6D97CO;
font-size:12pt;
weight:bold;
line-hei ht:1 05%; }

font-weight:

5px Opx Opx 5px; list-style-

dot.gif)
norepeat
4px 16px; }

a.menu:active,

color: #FFFFFF; text-decoration:none;

8: .cout1 { BACKGROUND-COLOR: #02243d;

cursor: pointer;font-family:
Verdana, Arial,

class="inmenu"

a.menu:visited,

padding:

ty e:none;}
36: ul.spacy li { background:

23:

7: color: #FFFFFF; font-size:9pt;

normal;}

11: td.inmenu

solid 1px

21 :

{ BACKGROUND-COLOR:

#BFOB34;cursor:
Arial, sans-serif;

border-bottom:

x; }

respecde class,

schimbat.
link-ului,

celulele meniului s-a folosit instruciunea

javascript:void(O), care n cazul cnd este
selectat nu execut nimic, browserul
rmnnd pe aceeai pagin.
De exemplu, legtura ctre pagina
revistei CHIP va arta astfel:
37: <td width="69" bgcolor="#02243d"
c1ass="inmenu" style="border-right:
solid 1px #8e9da8;">
38: &nbsp;<a c1ass="menu"
href="javascri pt: void(O)">CHIP</a></td>
Putem deja testa n browser codul scris
pn acum. Este deja necesar verificarea
cu mai multe browsere,
pentru a nu
"transporta" eventualele erori n etape ulterioare de lucru, situaie n care depistarea acestora devine o operaie greoaie.
ZONA 5 (liniile

51-144)

este cea care

conine informaiile caracteristice fiecrei

publicaii din exemplul nostru, care se
schimb de la la o pagin la alta. Este
realizat cu TAG-ul <table>,
avnd limea i nlimea

L===============================:J
-----

-----,-.--~'.-

,,"1, .:TM;c;;;;;;. - -

-.J

fixe de 930 x 465 pixeli.

De remarcat c are stil propriu care controleaz distinct liniile chenarului.

51: <!- inceput tabel continut ->
52: <table cellspacing="O" cellpadding="O"
width="930" height="465" align="center"
53: style="border-Ieft:l px solid #8e9da8;
border-right:l px solid #8e9da8;
54: border-top:Opx solid #8e9da8; borderbottom: 6px solid #02243d;" >
<1- continut zona 5 ->
144: </tr></table><Icontinut ->

sfarsit tabel

ZONA 6, (liniile 56-58) este subordonat

zonei 5, are alinierea la stnga i conine
imaginea de test back-col-stg-macheta
.jpg. Ulterior, aici vor fi plasate imaginile
corespunztoare
pentru fiecare pagin a
site-ului.
56: <!- inceput coloana stanga ->
57: <td width="251" valign="top"><img
src="img/back -co I-stg-mach eta.j pg"
width="2 51 "
height="465" title="Vogel Burda
Communications" border="O"/></td>
58: <!- sfarsit inceput coloana stanga ->
La testarea n browser se observ deja
apariia coloanei din stnga. De remarcat
efectul vizual atunci cnd atributul "alt="
i/sau "title=" este prezent n TAG-ul
<img> i anume chenarul cu text plasat
deasupra barei de meniu.
Acest chenar este afiat atunci cnd
cursorul trece peste o imagine avnd acest
atribut setat.

ZONA 7, cuprins

ntre

liniile 59-143,

este subordonat
zonei 5, are aliniere la
dreapta i conine descrierea propriu-zis
a publicaiilor.
59: <!- inceput coloana dreapta ->
60: <td width="689" valign="top">
61 :<!- inceput impartire coloana
dreapta ->

in a doua coloana.</p>
101 :
<!-aici se mai plaseaza restul de text
din a doua coloana ->
140: </td><!- sfarsit a doua parte coloana
dreapta ->

62: <table celispacing="O" cellpadding="30"

width="lOO%">

141 :</tr>
142:</table><!sfarsit impartire coloana
dreapta ->
143: </td><!- sfarsit coloana dreapta ->

63: <tr>
64: <!- inceput prima parte coloana
dreapta ->

Pentru ca descrierea publicaiilor

s
poat fi aezat pe coloane, zona 7 este di-

65: <td valign="top" width="349"

c1ass="colsplit"><h 1>Titlu pagina</h 1>
66: <hr noshade="noshade" size="l"
align="center" />
67:
68: <p c1ass="p_l O"><img
src="img/but2.gif' hspace="5"> Text plasat
in prima coloana.</p>
<!-aici se mai plaseaza restul de text din
prima coloana ->
79: </td><I- sfarsit prima parte coloana
dreapta ->
80:

81 :<!- inceput a doua parte coloana

dreapta ->
82:<td valign="top" width="340" class=
"colsplit">
<I-aici se mai plaseaza restul de text in a
doua coloana ->
100: <p c1ass="p_l O"><img
src="img/but2.gif'

hspace="5"> Text plasat

vizat
n dou ZONE 8
<table>,
liniile 62-142:

cea din
afiat n
cea din
afiat n

stnga
mijlocul
dreapta
dreapta

cu

TAG-ul

(liniile 64-79) va fi
paginii
(liniile 81-140) va fi
paginii.

Macheta astfel realizat trebuie testat

n browserele IE6, lE7, Firefox i Opera.
Aceast operaie este important
i trebuie fcut cu mult grij, deoarece
paginile individuale ale site-ului vor fi
realizate populnd zonele 6 (imagine) i 8
(coloane cu descriere). i la aceast etap
orice modificare (n special n scriptul
CSS) trebuie verificat cu browser-ele
specificate, pentru fi siguri c nu apare
vreo problem.
n cazul n care nu se realizeaz aceste
verificri menionate,
la apariia unei
eventuale erori aceasta este dificil de depistat.

Imaginea potrivit
Dup finalizarea programrii machetei HTML se poate trece la includerea imaginilor i asamblarea structurii site-ului.
n continuare, aflai cum se face acest lucru i care sunt formatele de imagine care pot fi folosite.

Victor Gheorghe

ac pn acum ne-am folosit de

imagini de test pentru a putea crea
structura site- ului i a scrie codul
HTML aferent, acum a sosit timpul s
vedem cum putem s plasm n site imaginile care ntr-adevr vor fi folosite.
nainte de a trece la partea de programare,
trebuie s precizm cteva aspecte. Astfel,
n primul rnd trebuie s alegem care din
cele trei formate de imagine (GIF, JPEG
sau PNG) se potrivete cel mai bine
coninutului imaginii. Acestea trei sunt
formatele recunoscute de HTML pentru
imagini i fiecare are avantajele i dezavantajele sale. Pentru a alege cel mai
potrivit format de imagine pentru site-ul
propriu este bine s dispunei de cteva
cunotine generale despre prelucrarea
pentru web a imaginilor:

ID

GIF (Graphics Interchange Format,

dezvoltat de Compuserve) este un format
care poate reprezenta doar 256 de culori,
una dintre ele putnd fi transparent.
Acest format este cel mai des folosit i a
devenit standard. GIF este alegerea optim n cazul unor imagini cu puine culori,
a unor imagini cu pete mari din aceeai
culoare, a textului transformat n imagine, de exemplu: logo-uri, butoane pentru navigaie, icon-uri, background-uri
simple. GIF este singurul format recunoscut de HTML care permite anima ii.

IB

JPEG (sau JPG - Joint Photographic

Experts Group) este un format care poate
reprezenta 16 milioane de culori. Oferind o
compresie foarte mare a imaginii, acest format se folosete n cazul fotografiilor, al
exporturilor din diferite programe 3D,
cnd este necesar reprezentarea imaginilor cu mai mult de 256 de culori sau cnd
se dorete o dimensiune ct mai mic a
fiierului imagine.
Utilizarea formatului JPG nu este indicat la reprezentarea textelor, a imaginilor
n a cror compunere intr margini ascuite
sau obiecte cu muchii conturate, a desenelor tehnice sau a imaginilor transparente.

Calitatea imaginilor JPG este direct

proporional
cu mrimea fiierelor.
Putei face ncercri succesive cu programul de prelucrat imagini, pn obinei
un raport calitate/mrime fiier acceptabil. O alt caracteristic a imaginilor JPG
este aceea c mrimea fiierului imagine
depinde de imaginiea pe care o conine.

IEI

PNG (sau Portable

etwork Graphics) este un format care n afar de cele
16 milioane de culori poate reda i transparena (pentru o singur culoare n procent de 100% sau pna la 256 nivele de
transparen pe pixel). Acest format ar fi
trebuit s nlocuiasc GIF-ul, dar nc nu
a reuit din cauza unor probleme la
afiarea n diferite browsere, aprute mai
ales n cazul PNG-urilor cu transparen.
Se foloseste n toate cazurile n care se
poate folosi GIF-ul, dar numai atunci
cnd nu este nevoie de animaii.
n continuare, vom exemplifica folosirea corect a formatului de imagine n

funcie de tipul imaginii. Astfel, dac dorim includerea ntr-o pagin web a paletei
de culori folosit de editoare HTML (216
culori), atunci fiierele GIF i JPG difer
semnificativ n mrime i puin calitativ.
Imaginea are dimensiunile 745 x 289 pixeli. Varianta GIF are 21,4 KB, mult mai
puin fa de fiierul JPG care ocup 58,3
KB. Este evident c n acest caz formatul
GIF este cel mai avantajos pentru pagina
web. Formatul este adecvat pentru toate
imaginile care au mai puin de 256 de culori.

...:.=J
GIF VS. JPG: Pentru
imaginilor

cu puine

este excelent.

reprezentarea
culori, formatul

GIF

Pe de alt parte, dac dorim s includem ntr-o pagin web o fotografie vom
vedea c formatele GIF i JPG difer mult
calitativ i mai puin ca mrime. Imaginea
de test are dimensiunile 300x251 pixeli.
Dac din punctul de vedere al dimensiunilor nu exist diferene foarte mari (varianta GIF are 32,5 KB, iar cea JPG 47,8
KB), nu la fel se poate spune despre calitatea imaginilor.
Astfel, se poate observa c deoarece
formatul GIF foreaz afiarea a maxim
256 de culori, pe imagine apar pete care o
fac neatrgtoare. Pe de alt parte,
deoarece JPEG nu "taie" din culori,
fiecare din obiecte i pstreaz aspectul
natural. n acest caz, formatul JPG va fi
preferat celui GIF, chiar dac dimensiunea fiierului este mai mare. u de alta,
dar o pagin web trebuie s fie n primul
rnd foarte aspectuas, chiar dac ncrcarea ei n fereastra browserului dureaz
cteva secunde n plus.

tA2ftff!l':M15+

Pregtirea imaginilor

Dimensiunile mari de imagini n paginile web sunt consumatoare de spaiu i

mresc timpul de descrcare. Putei evita
aceste neajunsuri folosind imagini mici,
iar pentru cnd se dorete neaprat
prezentarea unei imagini mari folosii
scripturi. Un asemenea script l gsii pe
CD (fiierul thumbnailviewer.js din directorul surse/php-div-css-js/stylel),
care a i
fost utilizat n construcia site-ului cu php.
Scriptul creaz o fereastr care se afieaz
peste pagina web curent i afieaz imaginea dorit la dimensiuni mari.

n cazul n care vei folosi imagini JPG trebuie s tii c aceste trebuie s fie n mod
RGB i nu CMYK. Nu conteaz dac ele au
fost obinute cu o camer digital, prin
scanare sau din alt document. Este bine s
pstrai originalul pentru situaia cnd este
necesar modificarea imaginii. Dac imaginile originale sunt CMYK sau alb/negru,
transformai-le
ntotdeauna
RGB la
rezoluia de 72 dpi. Am recomandat
aceast rezoluie pentru imaginile pentru
web, deoarece monitorul nu poate afia
dect la acest numr de pixeli per inch.
mbuntirea aspectului paginii web
se poate obine i prin utilizarea atributului "progresiv" aplicat imaginilor. n mod
uzual, operaia de afiare a unei imagini,
fie ea JPG sau GIF, este echivalent cu o
scanare de sus n jos. Utiliznd atributul
progresiv este ca i cum am mpri imaginea n mai multe scanri succesive.
Prima scanare afieaz imaginea la echivalentul unei calitati reduse, scanrile
ulterioare mbuntind gradual calitatea
primei scanri. Formatul JPG poate fi folosit cu atributul progresiv, pentru imaginile GIF efectul progresiv fiind realizat de
un mecanism asemntor numit ntreesere (interlaced).
Prin utilizarea imaginilor cu efect progresiv se obine o afiare rapid a unei pagini web, fr a mai atepta descrcarea
complet a imaginilor, mai ales cnd acestea au dimensiuni mari.

,ii.l q.'IMMBm

Wij"jjMWfflfflftt!'ffl, q

......
91,..I'tlP/Iloc.tloSU~~d'IDor*le.~
Fie

Edt

V_

Favortet

Toah

Heb

-------

_IDIiI
p -

VOGELBURO/\
COMMUNIC/\TIONS

::z ::~:..~~
:=-;
ramm
LEVEL

Tema concret
Revenind la tema CHIP Specialului de
fa, dup ce am creat structura site-ului
i am realizat codul HTML, putem trece la
introducerea imaginilor. Ca prim imagine ne referim la cea comun fiecrei
pagini, i anume header-ul (fiierul
vbcomm-header.jpg). Aa cum rezult
din macheta paginii, imaginea trebuie s
aib dimensiunile de 928 x 78 pixeli.

[,.
Dei aparent imaginea headerului
conine puine culori i la prima vedere
GIF-ul ar fi fost formatul cel mai potrivit,
la o analiz mai atent observm ns c
imaginea conine efectul de gradient pe
toat nlimea, ceea ce nseamn c are o
mulime de nuane intermediare pentru
culori. Deoarece diferena ntre dimen-

siunile celor dou variante era nesemnificativ (GIF - 12,08 KB, iar JPG 9,18 KB),
formatul preferat a fost JPG.
Fiecare din paginile ste-ului va avea n
coloana din stnga cte o imaginie
reprezentativ pentru publicaia prezentat n acea pagin. Imaginile care
urmeaz a fi incluse n coloana din stnga
a paginilor trebuie s aib dimensiunile
de 251 x 465 pixeli. Pentru prima pagin
se folosete o compoziie care conine mai
multe coperte selectate din publicaiile
editurii. Dat fiind multitudinea de culori
cu diverse nuane, formatul imaginii este
tot JPG.
Pagina web mai conine o imagine, de
o natur mai special, i anume un
"shortcut icon" care de regul conine
logo-ul. Aceast imagine care are dimensiuni 16 x 16 pixeli se face de obicei n
cteva culori contrastante. Imaginea va
aprea n fereastra browser-ului n linia
de adres naintea URL-ului, precum i n
seciunea bookmark-urilor, n cazul n
care adresa web a fost memorat acolo.
Pentru ca un shortcut icon s fie afiat
corect nu se folosete TAG-ul <img>, ci
TAG-ul <link>.
Pentru cazul machetei
noastre instruciunea va fi:
<Iink rel="shortcut icon"
href="img/vbcomm.ico" />,_.
_
Cu aceast din urm instruciune putem spune c site-ul nostru a fost garnisit
cu toate imaginile necesare i putem trece
la finalizarea lui.

alina

Un site este o constructie, arborescent realizat cu fisiere

.htm sau .html. Acestea trebuie stocate ntr-o structur
de directoare care pstreaz logica site-ului. Un fiier din
aceast structur este asociat cu fiiere externe pentru
elemente care intr n construcia sa (imagini, scripturi
etc.). Plasarea fiecrui tip de fiier la locul potrivit
simplific finalizarea site-ului.
Victor Gheorghe

~.;.~;;.:f"'t

.....::~:.

'.

:..:;:'.".l! .

.r";~l::

ornind de la macheta cu imagini

(care se gsete n directorul Istep-3imaginii de pe CD) se poate programa HTML fiecare pagin a site-ului.
ntruct vor rezulta multe fiiere, aa cum
s-a precizat deja, va fi nevoie ca s le organizm ntr-o structur clar de directoare
funcie de tip.
Astfel se creeaz trei subdirectoare:
imgl (care va conine imaginile GIF, JPG
sau PNG); stylel - (care va conine scripturile - CSS, JS sau HTC) i Idownload (cu
fiierele care pot fi descrcate). Acest
ultim director s-a creat deoarece, pentru o
serie de publicaii ale editurii Vogel Burda
Communications,
informaii,
suplimentare celor con inute n pagina web,
pot fi obinute din documente care pot fi
descrcate de pe site. De regul, asemenea
fiiere adiionale se pregtesc n formatele
.pdf (portable document format introdus
de Adobe n programele Acrobat), .ppt
(formatul utilizat de programul MS
Power Point ) sau .doc (formatul utilizat
de programul MS Word). Operaia de
descrcare se poate face pentru considerabil mai multe tipuri de fiiere dect
acestea, dar pentru site-ul n lucru nu s-au
avut n vedere dect acestea trei. Pentru
descrcare, n paginile web respective se
includ legturi ctre aceste fiiere. n

- ....) htmJ.tablecssjs
download
CHIP Compute' ~ Communications 2007
~ Foto_Video_Dig;a1~2007
LEVEL_Games_HW_~_L~estyle_2007
~ PC_P,actic_2006
- ....) img

backcolstanga
blenk
but2
chip,
chipfoto
chiponline'
chipspecial
da<kdot
gel3dobe_,eade,
level'
level'on~ne-'
main_bgr
pc-p,actic
,eddot
vbcomm
vbcommheade,
-' ....) style
vbcomm2
.!l chip
.:!1 chipfoto
.!lchipon!ine
:!l chipspecial
.!l index
.!1level
<!1 levelonline
\~ PCptactic

FIIERE: Nici numrul

foarte
simplu.

de fiiere nu este

mare, site-ul fiind totui destul de

View

Favoriles

1;,

Back
Addtess

TooIs

Search

Help
F=

1
download

r~oIdeIs _

img
style

- W ftiMlI!ifflllillif!ijii!!jI!Aiiiiiiiii;'. -------:-,
..)

download

..)

img

....J

st~le

STRUCTUR: Pentru aceast variant

de realizare,

momentul n care se face clic pe o asemenea legtur, browser-ul constat c nu

este vorba de un fiier HTML, care ar
urma s fie afiat n fereastra proprie, i
deschide o fereastr n care se specific n
ce fel se dorete s se fac descrcarea
fiierului respectiv (n ecran sau pe hard
disk) .

Elemente de personalizare
n structura de directoare astfel creat se
ncarc fiierele pregtite, imaginile,
scriptul CSS i documentele .pdf. Fiecare
fiier se ncarc n directorul corespunztor. De menionat ar mai fi faptul c
fiierul /style/vbcomm2.css este identic cu
cel folosit la crearea machetei HTML. A
fost redenumit pentru a evita ca acelai
nume de fiier s apar de mai multe ori
peCD.
n forma final a machetei se completeaz elementele care personalizeaz
primul fiier, index.htm, asociat primului
buton VOGEL BURDA. nainte de a lucra
efectiv la index.htm este prudent ca o
copie a machetei s fie pstrat i separat.
Aceste elemente sunt:
-+ primul buton din meniu care trebuie
setat pe culoarea de selecie pentru a arta
care din cele opt pagini este afiat in
ecran. Chiar dac vei folosi un titlu de
pagin introdus ca text, n zona 8 stnga,
este bine ca butonul s fie selectat.
-+ legtura la fiierul extern care conine
imaginea din coloana stng, back-colstanga.jpg.
-+ plasarea textului care va popula zona 7
n cele dou coloane (zonele 8) i formatarea lui HTML.
Plecnd de la aceeai machet, n mod
similar se procedeaz cu fiierele:
-+ chiponline.htm pentru site-ul CHIP
Online (http://www.chip.rol).
-+ chip.htm pentru revista CHIP.
-+ levelonline.htm pentru site-ul
(http://www.level.rol) .
-+ level.htm pentru revista LEVEL

structura

de directoare

este relativ simpl.

-+ chipfoto.htm pentru revista FOTOVIDEO digital.

-+ pcpractic.htm pentru revista PC
PRACTIC.
-+ chipspecial.htm pentru revista CHIP
Special.

Dac macheta a fost realizat bine, n

sensul c elementele CSS acoper toate
necesitile de formatare, atunci pentru
fiecare efect se face apel la numele stilului.
Dac ns a scpat ceva, atunci se completeaz scriptul CSS cu efectul dorit. Nu
uitai s nchidei fiecare din tag-urile
deschise. Pentru a crea un aspect vizual
plcut, este bine ca textele s fie plasate n
paragrafe distincte i acestea s fie spaiate. Nu folosii culori tari care s contrasteze prea puternic cu cele din designul
iniial, altfel spus !imitai-v la culorile
acestuia. Dac se dorete utilizarea animaiei, s o facei cu zgrcenie. Dei acest
tip de efecte este modern i de dorit, prea
mult animaie pe pagin distrage atenia
cititorului de la mesajul coninut n text.
De fiecare dat cnd ai introdus elemente
noi verificai dac aspectul paginii este
acelai n toate browser-ele vizate. Dac
nu, facei corecturile necesare n codul
HTML sau CSS. n cazul n care se dorete
introducerea de imagini suplimentare n
zonele 8, nu uitai c avei spaiu fix la dispoziie (s-a plecat de la cerina ca site-ul
s fie de nlime fix, pentru a evita
folosirea scrollbar-ului vertical). Nu adugai efecte n pagin dac nu v-au fost
cerute.
Dup ce toate cele opt fiiere au fost
finalizate se ajunge la structura de fiiere
din figur.
Varianta complet cu toate fiierele si
subdirectoarele se gsete n directorul
(lhtml- table-css-j si).

n figura care arat structura desfurat a site-ului nu sunt afiate extensiile fiierelor, n locul acestora fiind folosite icon-uri.

Mai rapid pe aceeai cale

Odat cu vitezele de acces la internet, i dimensiunile documentelor HTMLtind s creasc, datorit creterii complexitii
paginilor web. Acest lucru se traduce n mod normal prin cod mai mult, respectiv fiier mai mare. Exist ns posibilitatea
optimizrii codului, fr a renuna ns la funcionalitatea crescut a paginii web.
Victor Gheorghe

n aspect pe care fiecare programator

HTML trebuie s-I aib permanent n
vedere se refer la mrimea fiierului
HTML obinut. Uneori, fiierele HTML
pot ajunge la sute de linii de cod, avnd
astfel o mrime considerabil. De multe
ori se pune accentul numai pe complexitatea paginii i este lsat deoparte un
aspect i mai important:
cel care navigheaz pe internet este mereu grbit, nu
are rbdare s atepte dect pre de cteva
secunde. Dac n acest interval de timp
pagina solicitat nu s-a ncrcat n browser, el trece mai departe. Deci, cu ct mrimea fiierelor HTML este mai mic, cu
att pagina solicitat va fi mai repede
afiat n fereastra browser-ului.
S nu uitm nc un aspect suplimentar: pentru a fi afiat corect n fereastra
browser-ului, un fiier HTML apeleaz i
alte fiiere externe legate de el (imagini,

scripturi
CSS sau J avaScript, secvene
video sau audio etc.). Totaliznd aceste
componente
putem vedea c se poate
ajunge la o cantitate substanial mrit de
date, astfel nct cele cteva secunde s nu
fie suficiente pentru afiare n fereastra
browser-ului.
n macheta realizat n articolul anterimeniul are opt butoane. S privim mai
atent codul pentru unul din aceste butoane:
<td width=,,69" bgcolor=,,#02243d"
0r

c1ass="inmenu" style="border-right: solid

1px #8e9da8;"> &nbsp;<a c1ass="menu"
href=,javascri pt: void(O)">CHIP<[a></td>
Observm c atributul style (care traseaz o linie vertical la sfritul butonului) se repet pentru fiecare buton.
Pe de alt parte, fiecare buton al
meniului folosete acelai stil specificat cu
atributul
class="inmenu"
(mai puin

componenta afiat n fereastra browserului). Codul CSS asociat butoanelor

meniului este:
td.inmenu { background-color: #02243d;
cursor: pointer; font-family: Verdana, Arial,
sans-serif; color: #FFFFFF; font-size:9pt;
font-weight: normal;} td.inmenu:hover
{
background-color: #BFOB34; cursor: pointer; font-family: Verdana, Arial, sans-serif;
color: #FFFFFF; font-size:9pt; font-weight:
normal;}
Se poate observa uor c atributul style
din codul HTML poate fi transferat n
codul CSS.
Dup modificare codul HTML va fi:
<td width=,,69" bgcolor=,,#02243d"
class="inmenu"> &nbsp;<a c1ass="menu"
href=,javascript: void(O)">CHIP</a></td>
iar cel CSS va fi:
td.inmenu { background-color: #02243d;
cursor: pointer; font-family: Verdana, Arial,

sans-serif; color: #FFFFFF; font-size:9pt;

font-weight: normal; border-right: solid 1 px
#8e9da8;} td.inmenu:hover { backgroun9color: #BFOB34; cursor: pointer; font-fami-

EROARE: Fr
folosirea unui
artificiu, pagina
curent nu ar fi

IV: Verdana, Arial, sans-serif; color:

#FFFFFF; font-size:9pt; font-weight: normal;
border-right: solid 1 px #8e9da8;}
Deoarece meniul (ne referim de fapt

fost semnalizat
n lE 6.

seciunea
respectiv
din codul surs)
exist n fiecare fiier HTML al site-ului,
scurtarea codului va fi fcut n fiecare
dintre acestea. Este indicat ca de fiecare
dat cnd este posibil s transferai ct
mai mult cod n scripturile externe, chiar
dac operaiunea
este consumatoare
de
timp, deoarece acest lucru crete viteza de
execuie a paginilor web.

Meniul fr probleme
Dac formatarea textului unui document
HTML este relativ simpl, realizarea unui
meniu care s funcioneze corect pe toate
browser-ele
poate ridica probleme.
S
lum ca exemplu unul dintre butoanele
meniului nostru (codul HTML i CSS
pentru machet se gsete n directorul
surse\step-l-macheta de pe CD-ul ataat
revistei):
<td width=,,?3" bgcolor=,,#02243d"
c1ass="inmenu">
&nbsp;<a c1ass="menu" href=,javascript:
void(O)">LEVEL
</ a></td>
care se execut mpreun cu codul CSS:
td.inmenu { background-color: #02243d;
cursor: pointer; font-familv: Verdana, Arial,
sans-serif; color: #FFFFFF; font-size:9pt;
font-weight: normal; border-right: solid 1px
#8e9da8;} td.inmenu:hover { backgroundcolor: #BFOB34; cursor: pointer; font-famiIV: Verdana, Arial, sans-serif;

color: #FFFFFF; font-size:9pt; font-weight:

normal; border-right: solid 1 px #8e9da8;}
Prin intermediul liniilor de mai sus se
realizeaz efectul de rollover n browserele IE?, Firefox i Opera, care ns nu este
vizibil n IE6.
Codul nu are efect de rollover n IE6
din cauza modului de implementare
al
standardului CSS.
Browserele IE versiunea 6 i cele anterioare nu suport
:hover n CSS (cu
excepia legturilor, T AG-ul <a. Acest
nejuns poate fi evitat prin folosirea Java
Script-urilor OS), pe cel puin dou ci:
-+ fcnd apel la evenimentele OnMouseOver i OnMouseOut concomitent cu cod
CSS - calea mai simpl;
-+ incluznd n codul HTML un script
csshover.htc care poate fi descrcat de la
adresa
http://snipplr.com/view/1912/
internet-explorer-ie6-css-hover/
mai complicat.
Scriptul csshover.htc
face ca
funcioneze cu :hover nu numai
legturi, lucru posibil deoarece

- calea
IE6 s
pentru
imple-

mentarea Java Script n diverse browser-e

este aceeai, cu mici excepii.
Pentru
a face ca
meniul s funcioneze
p.

'-loD

"..'~~1
.

corect i n browserul
IE6 i versiunile
IE
anterioare, am conceput o alternativ
la
acesta avnd la baz o
combinaie
Java Script.

CSS

n scriptul
CSS
sunt inserate liniile:
.coverl { backgroundcolor: #BFOB34; cursor:
pointer; font-familv:
Verdana, Arial,
sans-serif;
~

rrrrr~
_
MACHETA FINALA: Aa arat varianta mbuntit

a machetei.

1'.'" .

color: #FFFFFF;fontsize:9pt; font-weight:

normal; border-right:

solid 1 px #8e9da8;} .coutl { backgroundcolor: #02243d; cursor: pointer; font-famiIV: Verdana, Arial, sans-serif; color:
#FFFFFF; font-size:9pt; font-weight: normal;
border-right: solid 1 px #8e9da8;}
Acestea descriu stilul pentru butoane
.c_overl
pentru aspectul butonului
la
selecie i .c_out1 pentru buton neselectat.
n codul HTML, pentru a specifica un
buton vom folosi:
<td width=" 1 04" bgcolor=,,#02243d"
onMouseOver="this.c1assName='coverl

';"

onMouseOut="this.c1assName='coutl
'" >
&nbsp;<a c1ass="menu" href=,javascript:
void(O)">PC Practic</a></td>
Se observ c pentru
evenimentul
OnMouseOver
aspectul butonului va fi
dat de codul CSS .coverl,
iar pentru
evenimentul OnMouseOut acesta va fi dat
de .coutl.
Cu aceste cteva linii n
HTML i CSS s-a realizat efectul de rollover independent
de browser-ul pe care
se afieaz.

Cod mbuntit
Prin compactarea codului i crearea unui
meniu funcional pe toate browser-ele se
obine o varianta mbuntit a machetei
(n directorul surse\step-2-macheta de pe
CD). Aceasta poate fi considerat drept o
variant mbuntit,
ce poate fi folosit
pentru realizarea ntregului site.
ntruct n Java Script s-au scris multe
scripturi utile care pot fi gsite n internet
i ncorporate n codul HTML propriu, n
macheta
mbuntit
am inclus un
exemplu. Astfel, n coloana din dreapta
am inserat un ceas digital care arat ora de
pe calculatorul celui care acceseaz pagina. Scriptul va nsoi pagina web indiferent de modul n care a fost ncorporat,
prin includere n corpul codului HTML
sau printr-o legtur.
Reinei c scripturile Java Script se
execut ntotdeauna pe calculatorul clientului.

Aceeai tem, alt realizare

o alternativ

la pagina web structurat cu ajutorul tabelelor este reprezentat de mprirea prin intermediul
diviziunilor. n articolul de fa v prezentm modul de realizare a temei noastre cu ajutorul diviziunilor.
Victor Gheorghe
n subiect larg dezbtut pe forumurile
celor preocupai de HTML este cel
privind modul cum se declar structura unei pagini web. De la nceput prerile au fost mprie ntre adepii tabelelor
i cei ai diviziunilor. Cu toate c se pare c
balana preferinelor ncepe s se ncline
n favoarea diviziunilor, tot mai utilizate
la paginile noi, folosirea tabelelor are nc
muli adepi, motiv pentru care am i
prezentat-o anterior.
Plecnd de la aceeai machet grafic
se poate realiza acelai site, urmnd ns
alt cale n programare. Pentru dimensiu-

nile actuale (arie de acoperire i cantitate

de informaie) ale site-ului, programarea
cu tabele sau diviziuni produce diferene
de timpi de acces nesemnificative. Se
poate spune c site-ul structurat cu tabele
rspunde cerinelor formulate. n realitate
ns site-urile au mult mai mult informaie pe fiecare pagin, iar structurarea
acestora prin intermediul tabelelor poate
crea neajunsuri. Dac n faza de realizare
neajunsurile nu sunt imediat vizibile,
dup plasarea site-ului pe un server, acestea sunt resimite imediat. Un site este
ceva n continu schimbare, o modificare

(oricnd posibil) de genul coninutului

paginilor, a numrului de imagini sau
chiar a structurii site-ului pot crea probleme, n cazul n care acestea nu au fost prevzute. Motivul este simplu i rezid n
structura rigid a tabelelor. De aceea este
util s vedem cum se poate realiza un site
utiliznd n loc de tabele diviziuni. Pentru
simplificare se va folosi aceeai tem.

Diviziuni
Pe machet se vor defini diviziunile care
urmeaz s fie tratate distinct la realizarea
cu HTML i CSS a site-ului (acestea le

gsii n directorul surselhtml-div-css-js/

de pe CD-ul ataat revistei). ntruct
fiecare diviziune
are un stil propriu
definit n scriptul CSS (fiierul vbcomm.
css din directorul surse/html-div-css-js/)
diviziunile se vor marca cu numele din
acest script. De fapt pentru aceast variant de realizare aspectul paginii afiate
n fereastra browser-ului
se controleaz
din scriptul CSS.
Dup marcarea diviziunilor pe machet aceasta arat ca n imaginea de mai jos.
Primul element formatat
CSS este
reprezentat chiar de seciunea <body>

I~He"U$.rs
Th

Pr;ce: '$31.95
Produtl "fiU b.
041/u/700a

II:.\l Add

st o formatare cu mai multe atribute care

descriu aspectul general al unei pagini.
Punctul de plecare n programarea
siteului este seciunea <body>, i pentru c

.......~ I~r'-ad>el. __
[<ii

r~

TOCIIr

'"
HeO

bV~C~

Trebuie

remarcat

aceast diviziune
punct, aa cum

c linia CSS pentru

ncepe cu # i nu cu
procedasem
anterior.

Diferena const n modul cum se apeleaz n codul HTML, dar privete i

modul de funcionare.
Dac a fost ,,#"
atunci

HTML

se

s;'le mr.

Iside1
b

container
textleft

codific

<div

id="wrap"> i dac a fost "." se codific

<div class="wrap">,
deosebirea
dintre
aceste dou moduri de formatare constnd n modul cum se folosesc n codul
HTML. Elementele cu formatare prin "id"
se folosesc o singur dat pe cnd cele cu
"class" de fiecare dat cnd este nevoie.
Aceast diviziune traseaz chenarul
exterior i fixeaz marginile acestuia fa
de laturile
superioar i inferi"" . u .
. ,......
oar ale ferestrei
.

logo

'~~C'::~~
L.:~ :::::::-~

menucomamer

tl)

W,sh

Our Llltest Collectibles

lV

comem

Add

I~~.O:'Q.I l~~:d I~~:~:d

na

P::l

informaiile coninute.

url(csshover. htc); font-fam ily:Verdana,

Arial, Helvetica, sans-serif; backgroundimage: url(../img/main_bgr.jpg); background-color:#FFCC80; background-repeat:
repeat;background-position:
top left; margin: Opx; padding: Opx;}
Cu ajutorul acestei singure linii de cod
se stabilesc imaginea pentru fundal, caracteristicile fontului de baz, poziia n

Il) C . rt

Ma,,,; '"fo.
"ell.ble fQrlhlppi",

TABELE: Varianta cu tabele necesit ncrcarea complet a site-ului nainte de a putea modifica

aceeai formatare.
html, body {color:#02243d; behavior:

#FFFFFF; margin-top: 20px; margin-bottom:

10px;}

T.io;e .d",,,n\bge of
.ddlt!Ql'lal servlCes
"l'Id prlvil.;.,.

It', 2008, .Jld the

l' very (Ilecl to 1"011
out .nother '1e.r of am.ling productJ! We hope thls n."" ,e.,
w.1l br1nQ YOU jll1, .lrod th.t OU" (ombin.tton of w.U-loved
cl.UIU .nel ne f.yor1tes will m.ke 2008 'le.,. to
remrmber'!

n CSS proprietile se motenesc, TAGul superior n ierarhie, <htm 1> , va avea

#Wrap {margin: auto; width:968px; border: 1px solid #002f2f; background-color:

oftha

Jculptorf oy.
.dolph W.' M.n'.
c.leb .ted w.lk,.ng
Libe<ty ..

din codul HTML. n spatele acestui TAG

pagin, marginile i spaierea la margini.

Urmtoarea diviziune #wrap (n englez wrap are nelesul de nveli) va conine
de fapt ntreg site-ul.

ItOl'fU

nptln.dth'9.,nd.I9n~of

~
textright

lDj
.:J

'.""".

browser-ului.
Marginea
inferioar nu are efect
vizibil
n toate
browser-ele.
De
aceea, n unele
browsere
chenarul va aprea ca
fiind lipit de marginea de jos a ferestrei. Totodat se
fixeaz
limea
paginii la 928 pixeli. n CSS nu
exist atribut pentru
centrare

explicit ca n HTML, dar, avnd marginile

cu atributul margin:auto se rezolv uor
problema centrrii, deoarece "auto" se
traduce prin stabilirea unor margini egale
n stnga i dreapta. DeCi pe orice monitor, cu orice rezoluie, browser-ul va afia
o pagin centrat orizontal.
Prima

diviziune

subordonat

"wrap"

este "header".
#header {margin: auto; width:928px;
height:78px; /* asa se poate introduce un
comentariu n cod CSS */ border: 1px solid
#8e9da8; margin-top:20px; }
Aceast diviziune are limea tot de
928 pixeli, cu marginea de sus de 20 pixeli, cu chenar i nlimea de 78 pixeli
(exact nlimea
imaginii pentru logo,
fiierul vbcomm-header.jpg).
i aceast
diviziune
este centrat
orizontal
prin
fixarea marginilor
cu "auto" (implic
margini egale).
Pentru plasarea imaginii n seciunea
"header" se include n aceasta o nou
diviziune "logo" care rezerv un spaiu de
78 pixeli pe nlime pentru imagine
fornd
alinierea
la stnga (imaginea
avnd limea de 928 pixeli se va aeza
bine n diviziune).
#Iogo {height:78px; float:left; }
#header a img {border:none; }
Deoarece, la includerea n pagin, imaginile au un chenar pe care browserul l
aplic implicit, ani mai adugat o linie n
script care s foreze suprimarea
lui pentru acestea.

chenaru-

Diviziuni vs. tabele

Pentru a nelege mai bine aspectele legate
de modurile de a programa structura unei
pagini web este bine s detaliem cteva
puncte care le difereniaz. Astfel, tabelele
(TAG-ul <table
sunt obiecte fixe a cror
poziie aproape c nu poate fi influenat. Pe
de alt parte, diviziunile (TAG-ul <div
permit realizarea unui design mult mai flexibil. nainte de a detalia aceste aspecte trebuie s mai menionm un lucru important:
dei toate browserele reprezint identic tabelele, exist diferene ntre ele la modul de
ncrcare a unei pagini web.
O pagin web construit ntr-un tabel nu
poate fi afiat n browserele
Internet
Explorer anterioare lui IE7, dect dup ce tot
coninutul tabelului a fost recepionat. Altfel
spus, n fereastra browserului nu se afieaz
nimic pn nu a fost descrcat din internet
ntreg coninutul tabelului. Cu ct pagina
web este mai complex, cu mai multe nivele
de imbricare a elementelor, cu att ntrzierea de afiare n fereastra browser-ului,
provocat de reprezentarea n tabele a codului HTML, va fi mai mare.
Dac navignd avei senzaia c browser-ul
s-a blocat, uitai-v la bara de progres, iar
dac aceasta este animat, nu v rmne
dect s avei rbdare. De multe ori cauza
unor asemenea manifestri poate fi o pagin web realizat cu tabele, mai ales atunci
cnd este apelat prin intermediul
unei
conexiuni
mai lente.
Desigur
c i
proiectanii paginilor web caut s remedieze acest neajuns, prin afiarea rnd dup
rnd a tabelului (TAG-ul <tr.
Cu toate
acestea, ntrzierea este sesizabil.
Alternativ, o pagin web construit cu diviziuni i avnd acelai coninut se ncarc
semnificativ mai repede. Browser-ele afieaz diviziuni le aproape instantaneu deoarece
pentru aceasta nu este nevoie ca ntreg
coninutul lor s fi fost descrcat. Afiarea
unei diviziuni necesit numai ca structura sa
s fi fost definit anterior.
Un exemplu de pagin web complex con-

struit
cu diviziuni este Level Online
http://www.level.ro/(alternativ
v putei
uita i la adresa http://shopper.cnet.com/).
Pentru a aprecia care este cantitatea de cod
scris pentru o pagin a site-ului Level
Online uitai-v la surs (poate fi vizualizat
de orice browser). Aceeai pagin realizat
cu tabele ar fi necesitat mai mult timp pentru afiare n fereastra browserului.
Pentru a compara diviziunile cu tabelele
vom lua ca prim aspect poziionarea.
Poziionarea cu ajutorul diviziunii se realizeaz repede fie folosind cod HTML i CSS
n acelai fiier:
<div style="position: absolute; width: 100px;
height: 55px; top: 150px; lefi: 80px; background-color: #000099; border: none"></div>
fie separnd codul n dou fiiere (.htm i
.css)
. cod HTML:
<div c1ass="exem lu"></div_>
_
. cod CSS:
.exemplu {"position: absolute; width: 100px;
height: 55px; top: 150px; lefi: 80px; background-color: #000099; border: none"}
Cu ajutorul codului CSS se formateaz diviziunea. Atributul position: absolute nseamn c diviziunea nu se leag de nici un alt
element din pagin, spre deosebire de tabele
unde ntotdeauna coninutul este legat de
celula (TAG-ul <td
n care este plasat.
Diviziunea are o nlime de SS pixeli, lime
de 100 pixeli, culoarea albastr i se gsete
la lS0 pixeli distan de marginea de sus i
80 de pixeli de marginea din stnga, fr
chenar.
Dac se specific position: relative atunci
aceleai atribute se raporteaz la elementul
din pagin cruia diviziunea i este subordonat. Dac plasm diviziunea n celula unui
tabel, atunci toate distanele se raporteaz
la marginile celulei.
Diviziunea are o proprietate important numit vizibilitate (vizibil sau invizibil), pe care nu
o ntlnim la tabele. Aceasta poate fi de forma
visibility: hidden sau visibility: visible.

De multe ori se folosesc imagini plasate n

fundalul elementelor unui tabel, lucru care
n HTMLse realizeaz rin:
ba_~ground=~'fl:l~~~ir
_
Dar aici apare i limita HTML: pentru a evita
efectul de repetare (tiling) trebuie ca dimensiunile imaginii s fie aceleai cu ale celulei.
n cazul CSS, controlul aspectului este mult
mai riguros. Astfel, se poate plasa o imagine
de fundal ntr-o diviziune i se poate evita
re etarea ei:
style="background-image: url(fundal.gif); background-repeat: no-re eat"
Dac se dorete acest lucru se poate specifica repetarea numai e orizontal:
style="background-image: url(fundal.gif); background-re eat: repeat-x"
sau numai e vertical
style="background-image: url(fundal.gif); background-repeat: repeat-y"
Imaginea oate fi centrat:
style="background-image: url(fundal.gif); background-repeat: no-repeat; background-position:
cente r"
--- --sau poziia ei poate fi controlat pe vertical
(top-sus, middle-mijloc, bottom-jos) sau pe
orizontal (Iefi-stnga, center-centru, rightdreapta). De exemplu poziionarea stnga
sus se face cu:
b~~~!:9und-position: left center
n plus, chenarul, marginile i spaierea fa
de margini sunt controlabile pentru fiecare
diviziune, pe cnd la tabele acestea sunt
defintie o dat pentru ntreg tabelul.
Trebuie totui menionat c abilitatea programrii cu diviziuni se dobndete
mai
greu i presupune exerciiu. Aceasta este
influenat de experiena n domeniu i trebuie adaptat la comportamentul
diferit al
browserelor.
Nu considerm c utilizarea tabelelor trebuie evitat, ele i menin rolul pentru care
au fost create, acela de a reprezenta date
tabelar. ns utilizarea lor excesiv n gestionarea structurii paginilor web nu este
ntotdeauna cea mai indicat.

nainte de a deschide diviziunea "menucontainer"

se nchid diviziunile "logo" i

<ul style="width:123px;"><!deschide
butonul pentru CHIP online ->
<Ii><a c1ass="firstpage" href=
"chiponline.htm">CHIP
Online</a></Ii>
</ul><I- nchide butonul pentru CHIP
online ->
TAG-urile
<u 1 > i < 1 i > folosite pen-

#menu a { color: #FFFFFF; background:

#02243d; text-decoration:
none; borderwidth: 1px Opx 1px Opx;
border-style: solid; border-color:#d7f5c9
#d7f5c9 #d7f5c9 #d7f5c9; bordertop:none; } #menu a.firstpage { color:
#ffffff; background: #02243d; text-decoration: none; border-width: Opx 1px 1 px
Opx; border-style: solid; border-color:
#455e70 #8e9da8 #476f85 #1 5344b; }
#menu a.firstpage_current
{ background-

cea creia i este subordonat,

"header".
Diviziunea
"menucontainer"
conine
meniul.
#menucontainer
{width:930px; background-color:#02243d;
margin: auto;}
Acesta este declarat pe mai multe linii
de cod toate ncepnd cu ,,#menu".
Codul HTML pentru cele dou diviziuni este:
<div id="menucontainer"><Ideschide

nate diviziunii
"menu"
vor moteni
atributele acesteia.
#menu ul {Iist-style: none; margin: O;
padding: O; width: 133px; float:left; }

containerul meniu lui ->

<div id="menu"> <1- deschide meniul ->
De fapt, meniul este o list neordonat
motiv pentru care n HTML un buton al
meniului se descrie astfel:

#menu a { font-size: 0.8em; display: block;

border-width: Opx 1px 1px Opx; borderstyle: solid;border-color:
#455e70 #8e9da8
#476f85 #1 5344b; margin: Opx; padding:
2px 3px; }

tru definirea

unui

buton

fiind subordo-

color: #BFOB34; border-width: Opx 1px 1px

Opx; border-style: solid; border-color:
#e25e3e #8e9da8 #e25e3f #ffffOO; }
#menu a:hover, #menu a.firstpage:hover
{
color: #FFFFFF; background:#BFOB34;
border-bottom: solid 1px #BFOB34; }

Ip1i!

@-. Jhf-~l'''''''~
Rr<<lI:_r_I_~

~'

"v.,...a..<loe-..- .....

:il..

gramrii

HTML

este aceea c trebuie tiut exact

cte
TAG-uri
<div> mai sunt
deschise.
Pentru a plasa
informaiile strict
legate de publicaii n pagin se
folosete
divizi-

- ~~=-=~-~'-'-~

'::=-:::::'::,,,,';'!

N PAI: CU diviziunile declarate pagina din exemplul nostru

N PAI: ... iar dup alte cteva diviziuni avem deja i imagini

arat aa ...

i coloane

#menu li {position: relative;}

1 la 8, corespondena

Singurul atribut
limea butonului
buton la altul. De
specific n codul

este atribuit butonului "Vogel Burda", 2

pentru "Chip Online", 3 pentru "Chip"
etc. Elementul care se schimb n aceast
diviziune este imaginea din fundal, care

nedeclarat n CSS este

care difer de la un
aceea, acest atribut se
HTML. Toate celelalte

atribute,
marginile,
spaierile,
culorile
pentru text i fundal, sunt codificate CSS
att pentru :hover, ct i pentru lipsa acestuia.
Se remarc descrierea separat a aspectului butonului
paginii curente "firstpage_current",
care trebuie s fie selectat
(cu culoare schimbat) atunci cnd n fereastra browserului este afiat respectiva
pagin.
Cu diviziunile declarate pn n acest
moment fereastra browserului
va afia
pagina cu meniul (vezi imaginea de mai
sus).
Pentru suprimarea proprietii float: se
folosete codul HTML (float: realizeaz
alinierea coninutului
fie la stnga, fie la
dreapta):
<br style="c1ear:both;" />
altfel diviziunile care urmeaz motenesc
acest atribut
i aspectul devine unul
descentrat.
Diviziunea
"content"
conine informaia care se schimb de la o pagin la
alta:
#content { position:relative; width:928px;
height:465px; border-bottom:6px solid
#02243d;
border-right: 1px solid #8e9da8; borderleft: 1px solid #8e9da8; border-top:none;
margin: auto; }
Aceasta are linie de chenar numai pe laterale, nlimea i limea acestuia fiind
fixe, de 465 i respectiv 928 pixeli. i aceast
diviziune este centrat (margin:auto).
Coloana din stnga se definete cu
diviziunea "lsidex", unde x ia valori de la

evident
Pentru

fiind urmtoarea:

este alta pentru fiecare pagin.

pagina care descrie publicaia

"Chip Special" coloana din stnga

declar astfel:
#lside8 {width:251 px; height:465px;
backg rou nd-image: url(../i mg/ ch ipspecial.jpg); border-right: 1px solid

se

#8e9da8;
border-Ieft: 1px solid #8e9da8; float:left;
font-size:O.7em; }
Se observ c URL-ul specific
ginea din fiierul chip-special.jpg.

ima-

Prin plasarea
imaginii n fundalul
diviziunii este posibil ca desupra s mai
poat fi inserat informaie, de exemplu
text. Acest text va aprea n pagin peste
imagine, o asemenea
construcie
permind realizarea de efecte.
n acest scop s-au prevzut dou diviziuni "lside_innecbox"
i "saying" cu
ajutorul crora se pot realiza efectele,
imaginea rmnnd fix n fundal.
Coloana
din stnga se nchide cu
TAG-uri de sfrit de diviziune pentru
fiecare din cele trei (lsidex, lside_innec
box i saying).
Cu diviziunile

declarate

pn n acest

moment, fereastra browser-ului

va afia
pentru fiecare dintre publicaii o coloan
n stnga, care conine o imagine.
Trebuie remarcat c diviziunile "wrap"
i "content" sunt nc deschise. Plasarea,
din greeal a unui TAG de nchidere
</div>
suplimentar
ar avea ca efect
stricarea
aezrii paginii n fereastra
browser-ului. O regul de care trebuie s
se in cont n fiecare moment al pro-

unea "container".
Aceasta va avea
subordonate
alte
trei
"text",

#container {width658px;

diviziuni
"textleft"

i "textrigh t" .
height:464px;

border-bottom:Opx solid #9facb5; f1oat:left; }

#text { height:465px; width:640px;
padding-left:20px;
padding-right: 1Opx;
font-size:O. 7em;
overflow:auto; font-weight:normal; lineheight: 120%; c1ear:both; }
#textleft {width:300px; font-weight:normal; line-height:11 0%; float:left; textalign:left; color: #888888; }
#textright {width:300px;
font-weight:normal; line-height:11 0%;
float:right; text-align:left; color #888888; }
A fost necesar introducerea

diviziunii

"text" pentru a avea controlul spaierii

fa de marginea din dreapta a coloanei
din stnga, cea care conine imaginea. n
fine, cele dou diviziuni "textleft" i "textright" de lime egal vor conine informaiile propriu-zise, cu tot ce presupune
aceasta, de exemplu un tabel declarat astfel:
td.tableRow { background-color: #EBFl F3;
line-height: 18px; }
td.tableSec { line-height: 18px; }
td.tableHeader { background-color:
#336699; color: #FFFFFF; line-height: 18px;
padding 3px; }
Dup nchiderea

diviziunilor

"textleft"

i "textright" trebuie suprimate atributele

float: left respectiv right i trebuie nchise
diviziunile "content" i "wrap" i seciunile <body> ~ <html>.
Ca i prim concluzie a acestei alternative observm faptul c n varianta programrii cu diviziuni codul este mai compact ceea ce este un argument n plus n
sprijinul acestei maniere de formatare a
unei pagini web.
n fereastra browser-ului paginile arat
identic cu cele realizate cu tabele, iar structura de fiiere este la rndul ei identic_

ite
Dorii s mrii performana site-ului propriu? Dorii ca acesta s v reprezinte mai bine prin includerea celor mai noi
informaii? Rspunsul la aceste ntrebri poate fi gsit uor cunoscnd i alte limbaje de programare n afara c1asicelor HTML, ess i JS. Utilizarea scripturilor PHP n construcia ultimei variante a site-ului nostru prezentat n acest
articol este cel mai bun exemplu n acest sens.
Victor Gheorghe
A

narticolele anterioare am reuit s

crem dou variante de site care s corespund cerinelor iniiale ale temei.
Ce e de facut ns n cazul n care la un
moment dat se constat c varianta final
trebuie ntregit cu noi funcionaliti,
care iniial nu fuseser luate n calcul? De
multe ori, mai ales dac funcionalitile
noi afecteaz structura existent, site-ul
trebuie reprogramat. Din fericire poriuni
ntregi din codul existent se pot prelua n
noua variant, redu cnd timpul de finalizare.
Pstrnd stilul grafic al machetei existente, s presupunem c s-au adugat noi
cerine la cele iniiale ale temei CHIP
Special-ului de fa. Acestea sunt urmtoarele:
-+ formatul paginii site-ului s nu mai fie

de nlime fix, ci de nlime variabil.

nlimea paginii va fi corelat cu cantitatea de informaie din pagina respectiv;
-+ pagina de nceput va conine imagini
ale celor mai recente apariii ale publicaiilor editurii;
-+ descrierea evoluiei publicaiilor, precum i datele despre firm se vor muta
ntr-o nou pagin "Despre noi" care se
va aduga meniului;
-+
datele privind modalitile de contactare a firmei i alte date utile partenerilor Vogel Burda se vor afia intr-o pagin
separat "Contact"care se adaug ca ultim
element n meniu;
-+ descrierea publicaiilor nu se va mai
face pe dou coloane, ci pe o singur
coloan care trebuie s fie mai Iat;
-+ la marginea din dreapta a paginii se va

include o coloan care va conine (funcie

de cerine) titlul paginii, elemente de navigare ctre alte pagini, logourile publicaiilor, legturi la articole reprezentative
publicate i online, legturi la elemente
care pot fi descrcate. Pe prima pagin n
coloana din dreapta se vor include clasamentele Top 10 pentru cele mai noi produse testate;
-+ deoarece imaginea care conine logoul
firmei este prea static se dorete ca fiecare pagin s conin pe lng logo i o
imagine asociat reprezentativ pentru
coninutul paginii respective;
-+ se va schimba structura meniului prin
organizarea sa pe nivele ierarhice. Publicaiile aparinnd aceleiai familii se vor
grupa n acelai bloc din meniu;
-+ articolele reprezentative pentru o re-

vist, care se public online, se vor aeza

ntr-un format de pagin care nu va avea
coloana din dreapta;
-+ pentru a pune n valoare unele imagini,
care vor fi specificate, se va prevedea posibilitatea afirii suplimentare i a unei variante mrite;
-+ sub imaginea
plasat n coloana din
stnga, n funcie de spaiu, se vor plasa
tiri de actualitate, anunuri i oferte legate de tematica paginii respective;
-+ se va avea n vedere posibilitatea
adugrii ulterioare
prin includerea

a unor funcii dinamice,

de informaii provenind

din baza de date a firmei

Analiznd noile cerine, constatm

nu se poate realiza un asemenea

site
numai cu HTML, CSS i JS. CU aceste limbaje nu se pot scrie scripturi care s se
execute pe un server, i cu att mai puin

~"lT':i:l

~
LEVEL

ca acestea s aib acces la o baz de date

pentru a face cutri. De aceea, trebuie
ales un limbaj de tip server scripting.
Am optat pentru
PHP i datorit
rspndirii sale deosebite. PHP este un
limbaj de programare a scripturilor care

gini care conin articole. La aceste pagini,

este potrivit pentru dezvoltare web i care

poate fi ncorporat n HTML. Scripturile
PHP se execut pe server, detaliile privind
modul de comunicare ntre client i server

coloana din dreapta nu exist, aadar

layout-ul are o coloan n minus.
seciunea "coloana din dreapta" aferent zonei 5;

le putei gsi n oglinda "Serverul web

privit de aproape". Limbajul PHP mai are
un avantaj important
fa de HTML:

seciune a "footer",
php".

poate s includ secvene de cod, repetitive de la pagin la pagin, fr a fi

neaprat necesar ca acestea s fac parte
din corpul scriptului. Operaia de includere avnd loc pe server, clientul nu va

care se schimb de la pagin la pagin. n

principiu
codul este acelai, numai c
pentru fiecare pagin se vor ncrca elementele specifice acesteia: imaginea din
zona 1, butonul din zona 2 i imaginea
din zona 3. Aceast ncrcare selectiv se

putea ti, i de fapt nici nu trebuie s tie,

cum s-a asamblat codul pe care l primete.
Aceast variant se gsete pe CD n
directorul surse/php-div-css-jsl.
Varianta
conine dou structuri care se conlucreaz
una cu cealalt:
-+ cea cu diviziuni, care descrie layout-ul
paginii, asemntoare
cu versiunea anterioar de site, dar adaptat noilor cerine,
adic cu zone;
-+ cea de segmentare
a codului (scripturi
care se includ i care se ntrees cu codul
specific fiecrei pagini) care are urmtoarea schem:
seciunea
ine.php"

"header",

fiierul "header.

seciunea cu informaie specific paginii, fiierele care se gsesc n directorul

surselphp-div-css-jsl
de pe CD

seciunea

"middlexcept",

fiierul

"middlexcept.ine.php"

Seciunea

"header"

pentru

acele pa-

fiierul "footer.ine.
conine

elemente

gestioneaz cu variabile PHP.

S aruncm o privire asupra

codului

HTML din scriptul folosit n realizarea

"header" -ului, fiierul "header.ine.php",
din directorul surselphp-div-css-jslincl:

este acelai pentru

toate fiierele HTML.

O cerin actual este cea care impune ca

fiecare header de pagin s conin o alt
imagine, deci i aceast cerin se adaug
la lista anterioar a excepiior.
Prin folosirea de variabile PHP declarate la nceputul fiecrei pagini se poate
crea independena
headerului de pagina
din site n care este afiat. S privim cum
se
realizeaz
aceasta
n
scriptul
"index.php"
(fiind cel care se acceseaz
implicit, acesta va avea numele index, ca
i n cazul HTML, cu deosebirea c extensia trebuie s fie .php pentru ca serverul s
tie
cum
s-I
trateze).
Scriptul
"index.php"
are stilul plasat n fiierul
"vbcomm.css"
din sub directorul
style.
Scriptul ncepe cu:
<7php
$seet = ,,1";

<!OOCTYPEhtml PUBLIC,,-1 /W3C/ /OTO

XHTML1.0 Transitional/ /EN"

$subseet = ,,1";
$title = ,,";

,,http://www.w3.org/TR/xhtmll
l-transitional.dtd">

inciude("i ne/header. ine. ph p");

/OTO/xhtml

<html xmlns=,,http://www.w3.org/1999/
xhtml">
<head>
<title>Vogel-Burda Communieations

;'

</title>
<!-meta TAC-uri ->
<body>
<!-header si meniu ->
Se observ c acest cod, cu excepia
TAG-ului <tit le> i a butonului din
meniu

care este asociat paginii

curente,

Aceast secven php se scrie chiar la

nceputul codului HTML, distincia de
HTML fcndu-se cu un TAG mai special
,,<?" la nceput i ,,?>" la sfrit.
Instruciunea
"include" realizeaz inserarea, n locul unde este plasat, a codului din fiierul specificat ca argument, adic "inc/header.ine.php".
S vedem prin
urmare ce conine acest fiier "header.ine.
php" n partea lui de nceput:

REALIZARE - VARIANTA CU PHP

#menuh

ul li{floatleft;

#menuh

a{height: 1%;font:bold

O.7em/l.4em

width:

100%;l

arial, sans-serif;}

</style>
<![endif]->
$currencsection

; "secCtitle_".$subsect;

$secUitle_O

; ,,";

$secUitle_l

; "VOGEL BURDA";

$secUitle_2

; "CHIP";

$secUitle3

; "LEVEL";

$secUitleA

; "PC Practic";

$secUitle_5

; "Despre noi";

$secUitle_6

; "Cont@ct";

$currencsection_title

; ${,,$currencsec-

tion"};
if (!isset($skipexcept))
$skipexcept

are o structur pe nivele, mai complex i

mai greu de programat cu HTML i CSS.
Meniul desfaurat are structur afiat n
imaginea de mai jos.
Asigurarea bunei funcionri a meniului n browserele IE anterioare versiunii 7
se realizeaz prin includerea scriptului JS
din fiierul csshover.htc. Acesta se include
via CSS n linia de declarare a proprietilor TAG-ului <body> :
body { color:#02243d;

behavior:

u rl(csshover. htc}; font-fam ily:Ve rdana,

; "O";

Arial, Helvetica, sans-serif;

7>

background-color:

<!DOCTYPE html PUBLIC ,,-//W3C/ /DTD

968px;

XHTML 1.0 Transitional/

l-transitional.dtd">

i adiional n TAG-ul <head> din

fiierul "header.inc.php"
se adaug
comentariul:

<html

<I-[if

,,http://www.w3

xmlns;"http/

/EN"

.org/TR/xhtmll

/DTD/xhtml

/www.w3.org/1999/xhtml">

n seciunea header se plaseaz meniul.

Meniul s-a refacut n totalitate, deoarece

min-width:

It lE 7]>

<style type;"text/css"

<head>

#04538C;

media;"screen">

Acest comentariu este ignorat de toate

browserele n afar de Internet Explorer,
care l va interpreta pentru a putea asocia
comportamentul :hover i altor TAG-uri,
nu numai pentru legturi <a>. Meniul,
testat pe toate browser-ele specificate IE6,
IE7, Firefox i Opera, funcioneaz corect.
n principiu ar trebui s funcioneze pe
toate browserele, deoarece majoritatea problemelor de implementare ale standardului
CSSsunt legate de Internet Explorer.
Se observ ntreeserea codului PHP cu
codul HTML. Liniile PHP conin textul
denumirilor folosite pentru fiecare pagin
distinct din meniu i care se vor plasa pe
respectivele butoane.
Prin includerea fiierului "header.inc.
php" n "index.php" cele dou secvene de
cod vor lucra mpreun. Astfel, cnd se va
executa linia:

#menuh{float:none;}

<Ii><a c1ass;"firstpage<7if

body{behavior:

,,_current";}?>" href;"index.php"

url(css hover. htc}; font-

size: 100%;l

><7;$secUitle_l

($sect;;

1}{echo

;7></a></li>

Serverul WEB privit de aproape

Pentru a putea realiza pagini
web funcionale, n primul rnd
trebuie neles modul n care
browserul interacioneaz
cu
serverele aflate n internet. O
imagine corect asupra modului de comunicare ntre client i
server v poate ajuta n conceperea propriilor proiecte. Nu
n ultimul rnd, alegerea limbajelor n care se va face programarea va depinde de tipul informaiilor care trebuie obinute de la server.

tor. Client i server se refer

la programe care comunic i
nu la calculatorul clientului i
calculatorul serverului.
O clientul
cere un fiier
HTML stocat pe un calculator
din internet prin intermediul
programului server. Serverul
10calizeaz fiierul i I transmite clientului
n format

Server web

(Apache,
115 etc.)

(MySQL,

LI

Postgres,
Oracle,
[)El2etc.)

.1
Middleware
(PHP,551,
JSP,A5P

etc.)

tul. Serverul
trimite mai
departe
clientului
rezultatul
prelucrrii
n format
HTML.

Exist mai
Cautfi
Cerere
TrimitefiierUl
.php
multe tehnologii server side:
i TI trimii~rul HTML. Clientul dup recepla client
ionare,
afieaz
pagina fiier.php
laclientcaHTML
Active Server Pages (ASP)
caHTM
HTML pe monitor. n acest
care au extensia .asp;
caz spunem c avem de a
Hypertext Preprocessor - uneori i
Client web
face cu o pagin static
se mai spune i Personal Home
Ce este un server WEB?
HTML.Paginile stati ce nu se
Pages (PHP) - care au extensia .php,
Browserweb
Un server WEB este un program
Browser web
schimb dect atunci cnd
php3 sau phtml;
(lE, Firefox,
(lE, Firefox,
de calculator care rspunde la
programatorul le modific.
Server Side Includes (SSI) care au
Opera etc.)
Operaetc.)
cererea de pagini HTML fcut
O situaie diferit este cea n
extensia .shtml;
de un browser WEB de pe un
care scriptul se execut pe
Java Server Pages care au extensia
calculator client. De obicei serverul WEB se
calculatorul unde se gsete serve.jsp.
execut pe un calculator amplasat la un
rul (server side technology).
Internet Service Provider (ISP).
clientul apeleaz un script, de exemplu
Exist scripturi care se execut ntotdeauna
Internetul utilizeaz aa-numitul "connecla client (client side technology),
Java
.php. Serverul identific prin extensie (php)
tion-Iess protocol" care nseamn c dup
despre ce fel de fiier este vorba. n funcie
Script-urile.
fiecare interaciune
client-server
(cererea
de extensie serverul transmite scriptul spre
Spre deosebire de HTML care este un limbaj
unei pagini i livrarea ei) conexiunea ntre
prelucrare unui alt program (middleware),
de formata re, Java Script este un limbaj de
cei doi se pierde.
plasat tot pe server. Prin "middleware"
se
programare i se folosete mpreun cu
neleg programe care se execut pe server i
limbajul HTML. ntr-o pagin scris n HTML
S privim mai atent interaciunile
c1ientcare conecteaz ntre ele componente softse pot integra programe (numite scripturi)
server. O precizare este important: trebuie
ware sau aplicaii. Dup terminerea preluscrise n Java Script. Scripturile Java Script
s se fac distincie ntre program i calculacrrii acesta retransmite serverului rezultase execut ntotdeauna la client.
Cerere

fiier
HTML

'o-

o",,~n.

+<>w::> ..

ll::l)

",_"-I~~

..I"'_Ir;;v.;-o_I~!'!'

"-W
lu-I

~loo:t -

1I~a"oo

MARIT: Afiarea mrit a imaginii se realizeaz printr-un JavaScript.

se verific cu instruciunea "if' dac e
vorba de primul buton i, dac da, se
afieaz cu atributul css "firstpage_current" (cu :hover), adic selectat. n caz
contrar se afieaz cu atributul "firstpage" (fr :hover), adic neselectat.
Toate acestea se realizeaz cu variabila
$sect. Pe buton se va scrie textul memorat
de variabila $secCtitle_l, adic n cazul
nostru Vogel Burda. Un alt exemplu este
cel al diviziunii "logo":
<div id="logo"><a

<!-

nailviewer.ess"

type="text/ess"

um b-

/>

1,.. """"'~lo=_l""
F'k

v..,

E61

F~

,.. VtJ9d BUlt

logo

10061

Het>

u-..rc......
VOGl::LBURDA
o-UP

COMMUNICI\TIONS

->

n care, n funcie de valoarea variabilei

$sect, se ncarc din sub directorul img
imaginea corespunztoare adic "vbcheader-1.jpg".
Din aceast scurt detaliere, se observ
c structura fiierelor pentru aceast variant de site este schimbat fa de versiunile anterioare. Exist mai multe pagini i
fiecare pagin are inclus pentru coloana
din dreapta (zona 5) un script separat (de
exemplu pentru prima pagin acesta este
fiierul menu_l.inc.php). S-au creat subdirectoare distincte pentru imagini,
ntruct au aprut multe imagini i a fost
nevoie de stocarea lor n funcie de destinaie (covers, stiri, toplO i wallpapers).
Pentru a putea afia i imagini de dimensiuni mari s-a folosit un script JS(fiie-

um bnai Iviewer.js"

avascri pt">

<1ink rel="styles heet" href="style/th

height: 1 05px;"

alt="VBC-Logo" /></a></div>
start/end

<seri pt src="style/th
type="text/j

href="index.php"><img

srC="i mg/vbc -heade r-<7=$ sect; 7>.j pg"

style="width:928px;

rul thumbnailviewer.js din subdirectorul

style, care are asociate fiierul de stil thumbnailviewer.css i imaginea animat loading.gif, care arat progresul descrcrii
imaginii mari). Scriptul JSi stilul asociat se
includ n fiierul "header.inc.php" cu linia:

Efectul folosirii acestui script se vede n

imaginea alturat.
Am ales n mod deliberat afiarea paginii pe un ecran cu rezoluia mai mare
(1.280 x 1.024 pixeli), dect cea specificat
de cerine (1.024 x 768 pixeli), pentru a
arta cum se aeaz ntr-o asemenea fereastr o pagin a site-ului. n imagine se
observ cum a fost structurat coloana din
dreapta conform specificaiilor. n aceast
coloan sunt plasate meniul suplimentar
(id #rightside din /style/vbcomm.css cu
toate elementele subordonate), logourile
publicaiilor i thumbnail-ul i legturile
pentru vizualizarea imaginii mari i descrcarea acesteia.
Realizarea layout-ului pentru publicarea
internet a unor articole considerate importante s-a asociat legturii din pagina publicaiei CHIP i plasat vizibil n coloana din
dreapta la rubrica FOCUS.
Varianta finalizat pe aceast cale plaseaz site-ul nostru n categoria celor realizate cu tehnologie WAMP (Windows,
Apache, MySQL i PerIlPython/PHP).
Componenta MySQL, inexistent aici, o
vom integra site-ului n articolul urmtor.
Pe CD, aceast variant a site-ului se
gsete n directorul /surse/php-div-css-js.
Pentru testarea codului scris pentru
aceast variant, deoarece browser-ele nu
"neleg" scripturi.php, am instalat server
web, XAMPP, i am verificat codul apelnd n fereastra browser-ului adresa
http://localhost/ .

Ou;::a refe'lNa la un fc;rum, este pnm.: 1,11">

al dC:lea f'\lmIH de !CQ_ in aceasta a dCl.>a(cn~orb;re se
:rece- ~ sl,/b,ea_ Tr(ltlfl.ul;1'I (J.JO,ltllt este destul de vcd'.: s, !'acICltrul SI cumplr.:.orul shu acest klcru_
Sll"Qllra noutat!!' Dt' urc o poate aduce o noua yerslune a actstui trO!an este o semratufa sch'nbata
1'01":'111'encryj)ter. :lupa cefleeare parte tragei1'Spre ea de pret, se alunQe 1.'1a suma de 300 de
ViSZ:(c,teste dolan). Sub totul.tura de \'Iez se UC\lnde ",alua seNlClvlul de epaymert
.\eb
~'cne"Trlln,fer, fcar1e pepuLer'n lumellintericpa
SI ca~t cfera o rata de 1:1 ertru delar, Ofer:antul
tn.,."te numarul CONlllul UiUe .pctertla'u! cvmpafo!tor SI daca aCf:sta efectueaza plata, VOlanul estI!
p.m 1 ;::",n lntermed .! uru penal ruse$C de de"'1'ka;:lun urular cu '1lp:d$!"are $ub ferma unci
ilrfo_t:;;';j,~;e

E$te po~c. sa o;ilsest' un hll::<e~ #l:lOI.nd oum.'l ccrt

iUl sav' ?rcOMl1I e" nu. \,in ':01': pe ,\eo
MO"'ty part a p'll'(la vedere destul de vetlb,l. eY.~. in seCuI"It6te fl,lQt1't v.as~e'h:y ne sttl,teaza
fluxul L;::lC.'I1unei udel de traJ'zaetll. Cenl\"\l a nu h d.rect legati de mal .re, nlllt1(etlf .,.;aje.ua
W'<
m:erme:hr.
Ce obicei, acesta este .nga}at pTIf'ltru!'lmesaj e-ma,1 in care il este proml$1 o sluJca
parf.t.mt fca'te luUiluvl. Tel te ltebu:e sa faca atuta este sa gut10nezt un (ont SI " trarnfere
bann care vltl in .'Ilt CCint.i='ertru IIcest lucru, Intermed.arul p"'neste vn com,SIon. de OblCtl un precent
Cl! O Sln;ura c,fra, Corlul in care sllr: tr.r-$feratl banII este de CbIU" Creal dl! haco:tr sub un nume
fals intro ~ltll rara. I=r~,tul ute retras sub forma de (",)$1'lde la un ban.:o;m<'lt. Aproape atelUI tipar
f:ste fCleStt , .'" cazul Itaturtler df: t!p pI'HUIl'Ig, O<'lG.'l
Iln ataator ~eu~eS-le sa p1'ltTlusca Informat!!
;::a<:m ;lf~ $.lIUrUMa' de ant, barll SIl!"ttr<'lrs-fe'.'Ill ",a onht't b<'lnmq catre unul S-<!Iu
mal muti
ermeda'l

,...
...
1!r"--

.. 11"',7
'~i~;~dL)
-

-~ ---- _
-....-

, 1

!r.;:.... ..
i'_
.

~
--

._

,-_._--_.------~-

;-~~-:::~~:

-----

':'cest,a l-a rt"<f ler trarsfl!ra ba" ca:n ma, mul1e c:ontlln C.\rt
apa
~h1s-her-lIo' Ade"ar.!a 6Mo'e'gurll a <'lC$Cf .'IetJl,ltllJ lIl!U
III 1um.I">aitl mome1'l. , l'!cal"f: sur.:.em atenti nu do.r la rouma:u.l
celor care pestuza
~ acute fOrurTlllrl, " SI la retlamf: s la
"umarul ne-unlor af, -ate eu ic"'Umul respet:by. PenUV ct odlltll
ee el rtlU de beti este ereala, ea pcate fI folOSIta pentrv miI
mult decjl OO'af atacun catre <'l 'utfIoZ/lton" mte"netulul s furtul
dlltelorlo", Pe Uf' a~tfel de fe"l.Il'\'Ipc-t fi ir.t';lrlIte stled.me
alo!!
l.IF\crdealf:f-, dt trafIC. EXista dou.'l Yllnlll'lte: in p!'Jffta se VInde
trafic. Oaca un site abi. are ctrvo y,zltatcn SI metedele le-gale
de COlll'I"'Zaret'u a" suects iti a itnbul"latall ra"lungul Gccgle, de
.'I'CIpOl f, cumpar.'lt! .V1Z'If:~SI c:hCUt'T.
I\Dmll'llst"lIton, de .etele de
~11 oG'TIesc fJ,to a:l-e".rat atac aSlJpnI blo9unIc" SI fONmu~o cu

,..

r---=."-r

--

Irtmiet

REALIZARE - VARIANT CU PHP $1 MyQL

Dinamic suplimentar

Cum putem face ca la o nou incrcare a paginii web coninutul ei s se schimbe automat? Cum se poate afla dac de
exemplu un anumit subiect a fost tratat anterior n publicaiile editurii? Rspunsul este dat de paginile web dinamice.
Acestea "au n spate" baze de date, care permit fie afiarea n pagin a informaiilor la zi, fie execut cutri n arhive.
Utilizarea bazelor de date n realizarea paginilor web e pe cale s devin o regul.
Victor Gheorghe

Ain

construcia ultimei variante a siteului nostru alegerea, PHP ca limbaj de

programare nu a fost ntmpltoare.
Am constatat c PHP ofer posibilitatea
structurrii avantajoase a codului, dar
adevrata sa for se pune n eviden
atunci cnd l punem s lucreze cu baze de
date. Limbajul PHP are funcii predefinite, altfel spus are conectivitate, cu mai
multe sisteme de baze de date: MySQL,
PostgreSQL, Grade, Berkeley DB, Informix, i lista poate continua. Nu toate
aceste sisteme sunt gratuite, n topul popularitii aflndu-se MySQL.
Pentru a afla ce este MySQL, pornim de
la o definiie a sa: MySQL este un sistem
de management, cu ci multiple de execuie, multi utilizator, pentru o baz de
date SQL. SQL (Structured Query Language) este un limbaj destinat cutrilor i
management ului datelor n baze de date
relaionale. Conform unor statistici
Wikipedia (http://en.wikipedia.org/wiki/
MySQL), MySQL are mai mult de la milioane de instalri. n mare msur popularitatea MySQL se datoreaz faptului c
programul este uor de instalat i folosit i,
nu n ultimul rnd, pentru c este gratuit.
Dup instalare, acest program se execut
ca server, permind accesul multi-utilizator la mai multe baze de date. Accesul este
concurent i interogrile bazelor de date se
execut simultan. Acum, definiia nu mai
pare att de criptic.
Ne propunem s nt regim construcia
actual a site-ului nostru prin adugarea
facilitii de cutare ntr-o baz de date
(soluia complet pentru varianta cu PHP
i MySQL se gsete n directorul
/surse/php-mysq/-div-css-js
de pe CD).
Pornim de la premisa c pe calculatorul
local a fost deja instalat XAMPP (vezi
articolul de la pagina 50). n continuare,
trebuie s gsim rspunsul la cteva ntrebri: unde cutm? Cum ajungem la
cutri? De unde facem cutrile? Cum se
fac cutrile? Cum se prezint rezultatul?
i Cum mbuntim aspectul?

Bineneles, ntr-o baz de date - acesta

este rspunsul logic. Problema este c aceasta nc nu exist, aa c trebuie creat.

REALIZARE - VARIANT CU PHP $1 M

_IeiEl

~------

Server.

IOCllIlho51 ~ il

1'I'i14''Iiglft

Baza de date: chip ~

~S[fucwta

Carnp

~SOl

,. Cauta

GeSltonare

Tip

@l Tabel:

(UptiMur;

UJExpon !:;Impon

j.Clnserare

Proprietati

p.

$etate

tiul

de

II~

g,Opereljj

li'AI\ul(a

Actiune

Extfa

ba",
~1(6)
fi"
r ;d
1,"
r revista ~'lltchar{20) l3tllll_swedISh_cl
.u{J)
1,"
r
l,."'=;';~
~"2j
fi"
r IV
fi"
r rubrica ~<lft.hat(64) liI1ln1_s'A:edlsh_cI
.ch.w(2SS) latlnl_'.Iwedish_CI
r titlu
L Marcheaza toate 1 Dese-lectea.za toale VerJ,e r cu 11./)C ~ lti ~

'"

Indexuri:
Nume cheie
ld

Tip
IflDEX

Creaza un Index pe

ro

CardinaliUlte
r jkl unol(a)

r;-- to&oana

Actiune

Camp

1Cl

Executa

)C'

1:11

IJI

re

Utilizare spatiu
Tip
Utilizare
Date 13::',92: 8)'tes
Index ~",~16 Bytes
Total

!:il /
tii

auto_lllcrem'?ltt

26:, -'l4

8ytes

-'
-'
-'/
-'

)<
)<
)<
)<

)<

T
T

00 lliI

I'i!l

I!l

r.ndului
Valoare
':1ll:U'-1C

Gestionare

.
.

:m

lliI Il!

)<

Statisticile
Comenzi
Formal

Ilil lliI !'il

00 lliI ~
00 III :!1
00 III ~

Linie

la~~=l_~~~~_e:.
s, ~"l

lungime

linie

-,

Marimelinie

::S '3ytU

ailmrm

Urmatorul
AUloindex

-r

Creatie

:e:. 2~, 201:. 4.

t:.6:2E;J1

Ultimul
update

!4.!:25, 20'~ 4
06:55 AY.

r "''"'''---~

LEVEL
~

L1NK:n dreapta
legtur

Nici nu este prea dificil, deoarece dispunem de cuprinsurile revistelor CHIP,

CHIP Foto-Video i PC PRACTIC, iar
pentru fiecare numr de revist dispunem
de denumirea acesteia, anul apariiei, luna
apariiei, iar fiecare articol din revist este
prezent cu rubrica i titlul aferente. Aceste
informaii se gsesc pe CD n dou fiiere,
cuprinsuri.xls i cuprinsuri.sql, aflate n
directorul
surse/php-mysq/-div-css-js/
data_base_backupl.
Cu
ajutorul
programului
phpMyAdmin,
componenta
XAMPP
respon'sabil de administrarea bazei de
date locale (http://localhost/phpmyadminI), se creaz o nou baz de date
"chip". Folosind facilitatea Import din
fiierele de cuprins uri crem n cadrul
bazei de date "chip" tabelul "cuprinsuri".
Pentru import putem folosi oricare din
fiiere, cel cu extensia .sql sau fiierul .xls
salvat ca i .csv (operaie uor de facut n
MS Excel), ambele fiiere fiind de fapt
simple fiiere text. Este bine s reinei
acest detaliu, pentru c se poate ntmpla
ca, nainte de crearea unui tabel n baza de
date, s fii nevoii s intervenii direct cu
un editor de text n respectivul fiier.
n imaginea de mai sus observai structura cmpurilor din tabelul cuprinsuri.
Dup crearea bazei de date "chip" i n
cadrul acesteia a tabelului "cuprinsuri"
avem deja rspuns la ntrebarea pus n
titlu. Aceasta cu toate c la nceput, cnd
s-a pus problema crerii unei baze de

date, problema nu prea aa de simpl.

Trebuie totui s menionm un lucru:
am preferat o soluie simpl i de aceea
am optat pentru varianta "totul ntr-un
singur tabel", far a mai face tabele separate pentru publicaii, rubrici i ani cu
legturi ntre ele.

Calea ctre cutare

Iniial s-a dorit s existe posibilitatea de a
apela procesul de cutare de pe oricare
din paginile site-ului.
Dar site-ul are i pagini de unde chiar nu
e nevoie s poat fi apelate cutrile, de
exemplu paginile de articole. Cu alte
cuvinte, condiia este ca procesul de
cutare s poat fi apelat de pe toate
paginile site-ului, mai pUin de pe cele cu
articole. Din punctul de vedere al structurii siteului, aceasta nseamn c se pot
apela cutri de pe toate paginile care au
inclus coloana din dreapta (zona 5).
Codul pentru coloana din dreapta este
coninut n scripturile menu_x.inc.php
din directorul surse /php-mysq/-div-cssCHIP

LEVEL

paginii a fost plasat

la scriptul de cutare.

js/inc/ de pe CD. Vom modifica unul din

aceste scripturi ntr-un editor. Astfel, la
nceputul diviziunii "rightside" din scriptul de modificat se plaseaz legtura la
noul script din care se pot face cutri, pe
care l vom denumi "search.php":
<div c1ass="cuprinsuri">
<a href="search.php"style="color:#FFFFFF;
font-size: 12px;"><img
5 rc="img/view.gif'>&nbsp;Cautari
cuprins</a>
</div>
La fel se procedeaz cu restul scripturilor menu_x.inc.php. Coloana din dreapta
(zona 5) va ncepe cu legtura introdus.

Bineneles, i aici avem un rspuns simplu

i logic: din varianta existent a site-ului.
Este adevrat, aceasta nc nu are o pagin
pentru cutri aa c trebuie construit i
stocat n fiierul al crui nume l
cunoatem deja, "search.php". Aici ne ajut modul n care a fost structurat site-ul.
Includerea unui nou script "search.php" (l

PC Pract,c

in l'llunle
An

d,n
Nr.

1'-<0".",,,01*
Chp
Chp FOlO\\deo
Chp SpeooI

PCI'r.odJc

3~
itlu

(O)

gsii pe CD n directorul surse/php-mysq/div-css-jsf) n structura existent nu reprezint o problem. Codul surs al scriptului
se gsete i n oglinda "Cu un script pagina
devine dinamic". n script este definit formularul, TAG-ul <form> cu numele "vbc".
Formularul se compune dintr-un cmp
de introducere text <input> cu numele
"caut", o lista derulant (combobox)
<s ele c t > cu numele "cerev" i un buton
"Caut". Cmpul "cerev" are selectat implicit opiunea toate revistele i astfel
cutarea se va face pentru toate revistele,
existnd ns i opiuni <option> i pentru fiecare revist n parte. Cutrile se vor
face n titlurile articolelor publicate.
Formularul se plaseaz la nceputul scriptului, dup comentariul <!- HTML
coloana cu continutul, inceput ->. Vom
edita numai partea de coninut a scriptului,
restul prilor fiind deja fcute (header.inc.
php, midelleexcept.inc.php i footer.php).
TAG-ul <form> are un atribut "action"
care indic aciunea ce urmeaz selectrii
butonului "Caut". n cazul nostru aciunea se face cu variabila sistem $PHP_SELF,
ceea ce nseamn c scriptul se apeleaz pe
sine. Se completeaz formularul cu cererea
dorit i se iniiaz procesul de cutare n
baza de date cu butonul "Caut".

Cum se fac cutrile?

n urma completrii formularului "vbc"
cu valorile dorite se poate ncepe cutarea,
operaie care presupune o selecie n baza
de date. Pentru a vedea cum se face un
asemenea lucru este bine s testai cu
phpmyadmin cteva selecii posibile. De
exemplu, s cutm de cte ori a aprut
cuvntul "video" n titlul articolelor din
toate revistele. n phpMyAdmin cutarea
se face cu comenzi SQL (care are buton
distinct), folosind comanda:
select

* from

cuprinsuri

where

titlu

like

'%video%'

unde % este simbolul pentru orice, adic

se caut titlurile care conin irul de caractere "video" plasat oriunde n titlu (avnd
orice caractere nainte i dup el).
Este bine s testai cu ajutorul phpmyadmin diverse interogri pentru baza
de date pn v obinuii cu modul n care
MySQL rspunde diverselor selecii. Este
bine s includei n scriptul propriu
comanda select numai dup ce v-ai convins c rspunsul conine ceea ce doreai.
Revenind la tema noastr, dorim s
obinem aceeai selecie din baza de date,
folosind pagina noastr web.

Cu un script, pagina devine dinamic

Incluznd

un singur

mei versiuni
prinsurile
zent.

script

a site-ului
revistelor

Pentru

gramat

n structura

putem
aprute

a putea

'pn

vedea

componentele

cum

cu-

pre-

s-au

pro-

scriptului

voie de sursa lui, prezentat

ulti-

consulta

este

ne-

mai jos.

&nbsp;&nbsp;&icirc;n

titlurile

<select name="cerev"

<option value="., selected>--toate

revistele</option>
<option

value="Chip">Chip</option>

<option

value="Chip

Foto-Video">Chip

Foto-Video</option>
<option value="Chip
Special</option>

<?php
$sect = ,,11 "; $subsect
$skipexcept

= "O";

= ,,1"; $title = ,,";

inci ude("i nc/header. inc. ph p");

/ / Conectarea

mys q L co n nect(,,1ocal ho st"," user"," pas swo rd ");

mysql_se leccdb("ch

ip");

$table="cuprinsuri";

/ /denumire

tabela in DB

linii/pagina

web

$caut = $.GETL,caut"];

$_GET[..formular"]

<option

value="PC Practic">PC Practic</option>

<option

value ="Insider">lnsider</option>

&nbsp;&nbsp;<input
mit1"
value="Cauta"
record.")";

sau pagina noua

&&

>&nbsp;&nbsp;<?

c1ass="sub-

echo ,,(...$total-

de cautare sfarsit ->

<?php
/* navigatorul

== "yes"){

de pagini facut cu legaturi

for ($i= 1; $i<=$lOtalpage;

$zuzu = "form";

*/

$i++){

if ($i==$pageid){

} else { $zuzu = "no form";

if($cerev

type="submit"

?></div>
</form>
<!- formular

$cerev = $_GET["cerev"];
// testeaza daca formular
if(isset($_GET[..formular"])

Special">Chip

</select>

la baza de date

$pagesize= 140; / /nr.max.de

din&nbsp;&nbsp;

style="width:102px;">

I ,,;

echo ,,<b>".$i."</b>

== ,,") {

} else{

$filt = .:';
} else {

echo '<a href=' .$PHP_SELF. '?caut=' .$caut.

'&formular=no&pageid='

$filt = " and revista = '".$cerev.'"

,,;

.$i. '>' .$i.'</a>

I ';

}
/ / citeste

1 coloana din DBdate cu filtrul

/ / din variabilele

$result=mysql_query("select

<!-

id from $table

where titlu like '%".$caut."%' ".$filt."

/ / numara

?>

$caut si $cerev

HTML tabela afisare cautare inceput ->

<table celispacing="O"
der="O">

;");

liniile gasite

<th width="11

/ /pune

<th width="30"

nr. pagini in variabila

$totalpage.

O" align="center">Revista</th>
align="center">An</th>

$total pag e=(i nt)( $total re co rd/ $ page size);

<th width="30"

if$ total reco rd%$ pag esize)! = O){

<th width="11

$totalpage+=
}

<th align="center">

1;

$pageid

/*deschide
);

bucla de parcurgere

liniile se pun in randurile

} else{

a liniilor

<tr> succesive */

$i = O;

$pageid= 1;

wh iIe($ row= mys q Ue tch .as soc($ re sult)){

$start=O;

$i++;

if ($i % 2 != O) {

/*selecteaza
L1MIT

inregistrarile

din tabela fixand

$bgcol = " bgcolor='#FFE6D9'

rezultatul selectarii se va memora in variabila

$result. */
$result=mysqLquery(..select
* from $table
where titlu like
'%".5caut."%' ".$filt."
desc, nr desc
limit $start,

order by revista asc. an

HTML coloana din stanga inceput ->

<img src="img/lupa_2.jpg"
<br />&nbsp;<br

title="Cautari"

/>

<?php include("inc/middlexcept.inc.php");
HTML coloana cu continutul
&icirc;n

inceput

cuprinsuri</h

7>
->

1>

<!-

HTML linia cu info gasita ->

<td align="right"><?
?>&nbsp;</td>

>

echo $row['revista'];
echo $row('an'];
echo $row['nr'];

<td><? echo $row['rubrica'];

?></td>

<td><? echo hili($row['titlu'J.$caut);

?></td>

</tr>
<?php

<hr />
formular

<form

?>

<td align="center"><?
?>&nbsp;</td>

/>

coloana din stanga sfarsit ->

<h 1>Cautari

$bgcol = ,:';

<td align="center"><?
?>&nbsp;</td>

$pagesize;");

,,;

} else {

<tr <? echo $bgcol; ?> height="16"

?>

<!-

Titlu</th>

<?php

= LGET["pageid"];

$start=$pagesize*($pageid'l

<!-

align="center">Nr.</th>
O" align="center">Rubrica</th>

</tr>

if(i sset($ _GETL,pageid"])){

<!-

bor-

<tr>

$total reco rd =mysq I_n um_rows($ res uit);

<!-

cellpadding="4"

de cautare inceput

name="vbc"

->

action"<? echo
value="yes"

a liniilor

}
/ / deconectare

$PHP_SELF; 7>?formular=yes">
<in put type="hidden"
mular">

// inchide bucla de parcurgere

name="for-

de la baza de date

mysql_c1ose();
?>

<div class="cautare">

</table>

Sirul de cautare: <input type="text"

name="caut" style="width:120px;">

<!-

HTML tabela afisare cautare inceput ->

<!-

coloana cu continutul

sfarsit ->

REALIZARE- VARIANTA CU PHP $1M

A"

Nr.

RubriCii

Titlu

':'007' 12 Te~~ &. Tehnclo9" ~e>;ele iIl'n~f\

2::~~ ~~ Tes:e li..Tero-e.!;t; e"..
ce c'"l:b
:;:t~~:2 Ed.te"'<l1
La $Tars: de

Comanda
SOl-----------------------------,

::~.

wttERE

::

:rattt::fo

:'e"'!':;n--lINa ~b

:O':;::Ec,:c~l
:Co; ~~ k:;v$

$lUCT
fAOMwpf'tl~W'l
IRI ll([

:00;

Ulm.

1:

lut:'"

l,Il"'~ra::e,.l
er"r;e
:lreeutul.:..nul\il
:00;

Tene.&.

Teh"clGij<t

e.tI'O.JI de p"e~a

:CO-:O:C

-este o

Tehr~eg

:.:~.

Ed.t>:",,,

'::.~,n:eell ~e:r ul\lll(ar:'lIl

Sar"t.5tell
ot\t"e C s>:

tu

PAGINARE: Dac au fost gsite mai multe

~~
In

mod IOnlontal

Soltare dupa lasta IrlJcl unuhal

-T-

ld

:::J Sl rep'la!~
3

aflteot dupa

c~'uI~

este util ca acestea

s fie afi~ate pe

mai multe pagini.

revist1:l

r
r
r
r
r

./)<

36

./)<

./

)C

1009

.;.!

)<

113..1 Ch.pSPecial

CUTARE: Rezultatele

rezultate,

hnllincapandcupo-

C~p

1999

162

~p

2000

...I)C

4~

Chip

2001

.;/)<

559 Chip

2001

..J)(

992 Chip

200

10 To:sti?'
&.

2007

11

2007

12 !,','mamp6

textul

cutat

Chtp

afi~ate prezint

Vide-o pe PC

EdltaIe.a fofmatuk.n Olgttal

Vide;)(ecorder software - gratIs

Vide-o an~lamine

PracttcaTO?hnologll

Teste & TahnolCoQu

Vid~

Integrat

de

tru condiiile ceru te. Aceste condiii

poart numele de filtru. Operaia de
cutare putnd fi formulat i spunnd c
se aplic un filtru pe baza de date.
ntruct rezultatul unor cutri poate
returna foarte multe linii, din raiuni
lesne de neles acesta se va segmenta ntrun numr fIx (maxim) de linii care se
afieaz pe pagin. Acest numr maxim
de linii este dat de variabila $pagesize.
Deci tabelul afiat ntr-o pagin va
conine $pagesize linii. Pentru a putea
naviga de la o pagin la alta, deasupra
capului tabelului se nsereaz un navigator de pagini. Acesta este constituit dintro succesiune de numere afiate ca link-uri
i care dac sunt selectate conduc la pagina respectiv.
n imaginea cu rezultatele obinute,
pentru filtrul setat cu irul "an" n toate
revistele, s-au gsit 519 titluri. Deoarece
numrul de rezultate este mai mare dect
numrul maximi de linii stabilite pe o

Video

1 Software

ultltl'la generatIe

Ac~'H,deo~fIlnJHO

indiferent

de modul de scriere, cu majuscule

sau cu minuscule.

n scriptul search.php cererea se materializeaz ntr-o comand select (vezi

comentariile din oglinda "Cu un script
pagina devine dinamic"). n articolul de
la pagina 36, n oglinda "Serverul WEB
privit de aproape" este ilustrat traseul pe
care l urmeaz cererea noastr. Pe aceast
cale cererea noastr se va executa pe serRezultatul cutrii este recepionat de
variabila $result.

Afiarea rezultatului
Variabila $result conine rezultatul interogrii bazei de date. Pentru a-l afia n
fereastra browser-ului sunt necesare dou
operaii: extragerea informaiei i prezentarea ei. Pentru a putea extrage informaia trebuie s tim c aceasta este memorat n $result linie cu linie. Se observ n
sursa scriptului existena unei bucle de
parcurgere a liniilor (while), care parcurge secvenial liniile din $result i pentru fiecare din ele compun~ codul HTML
necesar afirii. Deci, pentru fiecare linie
din $result se va insera ntr-un tabel
HTML o linie cu datele corespunztoare,
TAG-ul folosit fiind <tr>. Capul de tabel conine coloane pentru revist, an,
numr, rubrica i titlu. Tabelul astfel
populat cu date este "pasat" serverului
web care l returneaz browser-ului.
La afiarea rezultatelor trebuie stabilit
ordinea acestei operaii. Dac aceasta nu
este precizat rezultatele se recepioneaz
dezordonat, ceea ce face lista aproape
inutilizabil. Ordinea se stabilete n
comanda select, care n cazul nostru arat
astfel:

"seleet * from euprinsuri

'%".$eaut.''%'

where titlu like

order by revista ase, an dese,

nr dese;"

n cazul comenzii folosite de noi,

ordonarea s-a facut dup revist ascendent, an descresctor i numr descresctor, rezultatul afiat n fereastra browserului fiind exemplificat prin imaginea de
jos.
Se observ c fiecare rnd din tabel
conine textul "video", indiferent dac
acesta este scris n titlu cu majuscule sau
cu minuscule. Se mai observ c n dreapta butonului "Cauta", ntre paranteze, este
trecut numrul de nregistrri gsite pen-

Revista

Cbp
Cl-'t;
C'" :

cf'~
Cr~
Cr.t:
Ch,t'
0-,
0-,
C''':
Cl-;:Ct--o

CtI':
CI" t: F:,:o/ldec
(J- D Fc!c<,,~ee
Ct'ilp 'Sce;;a~il
Ct-:pS!:'~CllIJ
C"'lpSpeCI/l1

''''10 :::~o/ll
Chc'E:e:.al

An

200:00-:0
2ea;
:OC'5
2006
:006
,0015
:C'J5
ZC,,~
::0:
:00:
2000
:999
:00:2007
2CC~
2007
2006
2006
2C06
:005

Nr.

~lJbrica

:2 Test~ 6. TehnolcQII
:: Tes:e 60 Terncl~1I
:0 Teste & -~I'."oIoQ'
:0 Cc.erSt:'"'
:"aetlu
:"/lO(:lca

:(lIctiCli
Ccve'st:r'l
F"'lIaJ~
:'lIl:t10!

$cA:".lIre
Hard.'/are
Herew"re
Terrele,; e
Nout"tl
:2 \\mamp 6
:2 Wlrdc.',s 2000
" ?l"lIetfCi'!
.: HarG.IIlIre
Tur1"i;j
ErlIC'l1J1
~r.r:t~ Tr,r 'n.~,Il!:',:."r..

Titlu

Came'e vfdeo t-!ll' DV

.l.cce1e'are ..
,de-o cerW ""'J
'.jll::ieo INe:;r,,: de ulbmll generane
=-rC.::l .a,e\o1deo
CC;te pe V'OecC'
F'reillcr"revldeo
Video cete!efe'"
ercadca::tlrgat,dlc.cee
Sraadellstm;l Y1deeIn retea
".declIrfe':'lImre
Vldeoreccl"der seft-~~e ' Ql"a~'s
Edft$re!l fc"matlJh.H 0'\1 taI V,dec
Vldl!:oI!: PC
PC turte ,"..'!rt"IJ fctcs'~ .,e::
FCTO'lto-i;O ':!'Q,t41,orllre
C;tl"ll. tati red~re!l ",oeo
Orulere.!l I,:re, secvente ~'deo 1"bllt<9rcu"d
M;.EG faro! redo!me, tU Vldeoo.eOo
,=laC' e 'of'Cle.e ale fr'\a'l"le~t1Jh./
~te~ ert'"V o ~ClI\o-,dee
:::lac- \1 ~e-c . Sll"U l"UmlJl
Ir...
" ;,1 ..~",.,."r1- :'1H1IIQ'nn-

...-

lri~

pagin, acestea au fost plasate n patru

pagini. Pagina curent are numrul su
afiat bold.

Aspect mbuntit
Modul n care este afiat tabelul cu rezultatele cutrii n baza de date este incomod la citire, deoarece irul de cutare
curent (criteriul folosit) nu este explicitat
n coloana care conine titlul. n exemplul
anterior am folosit irul "an" i pentru a
evidenia ct este de dificil identificarea
acestuia n titluri. Se ntlnesc situaii n

An Nr.
Rubrica
2e03 i Sdt."a-e
:003 a COI1"UI"~tol
:G03 8 Ha'e/.are
:003
.:..Itele

care undeva n fereastra browser-ului

se
specific ceva de genul "irul de cutare a
fost <ir>", dar nici aceast soluie nu face
identificarea n titluri mai uoar.

2003
2003
'2003
:C~3
2003
:Otl3
:003 e
:C()]

O soluie elegant este ca irul de cutare, oriunde ar fi el plasat n titlu, s fie

2003
2003
2003
leG)
:C03
2e03
::03
:003
2003
,nln

afiat pe un fond de alt culoare, efect cunoscut sub numele de highlight. Aceast
efect se poate obine cu ajutorul unei
funcii PHP "hili" prezentat n oglinda
"Cu o funcie PHP listele devin atractive".
Modul de apelare a funciei este specificat
n comentariul de la nceputul oglinzii. n
scriptul search.php, funciei este apelat
prin intermediul liniei:
<td><? echo hili($row['titlu'],$caut);
?></td>
Se observ i modul cum se ntrees
codurile HTML i PHP. Codul funciei
din oglinda "Cu o funcie PHP listele
devin atractive" se va include cu ajutorul

spre afiare pagina a doua.

Este evident c soluia aleas mbuntete lizibilitatea paginii. Se observ c
funcia "hili" gsete toate apariiile
lui de cutat n titlu.

iru-

Urmrind
civa pai succesivi am
putut aduga site-ului nostru funcii de
cutare n titlurile publicaiilor.

editorului n corpul scriptului search.php,

de preferin la sfrit, nainte de includerea scriptului "footer.inc.php".
Efectul
folosirii acestei funcii este vizibil: am

O alt aplica ie a aceleiai tehnici, de

data aceasta automat,
este includerea
unor nouti pe diverse pagini.
n principiu i n acest caz se procedeaz n pai:

folosit tot selecia anterioar,

dar am ales

se creaz n baza de date "chip"

Cu O functie
, PHP listele devin atractive
Listele care conin rezultatele cutri lor cu
greu pot fi fcute atractive. Totui, prin utilizarea funciei PHP de mai jos vei putea
obine liste mai aspectuoase, prin adugarea efectului de highlight pe irul de
cutare.
<?php
/* functie pentru efectul highlight Sx este
sirul de caractere, Svar este textul care se
marcheaza cu highlight */
function hili(Sx,Svar, $bgcolor='yellow'){
if (Svar !=,,")(
$xtemp = ,,";
$i=O;
while($i<strlen($x){
if({(Si+ strlen(Svar))<= strlen($x)) &&
(strcasecmp(Svar,substr($x, Si, strlen($var)))

==

O)) (

$xtemp .= ,,<span style=\"backgroundcolor:

Sbgcolor\">". substr(Sx, Si , strlen(Svar .
,,</span>";
$i += strlen($var);
else {
Sxtemp .= $x{$i};
Si++;

un

Comunicatii
Hlm::i.'.llre
~'aCtlca
t1ac.~4"~
Co.eme"','
tta~...
a'e
Scr:..'are
Ha"c, ."re
H/I"d.are
Hard..."re
114'C"'''l'e
,olIl'CMre

Con- .I'HCllbl
:-'aa,C/I
ha'eM"e
'ta'c,',are
rtarc...ae
HJ'lr~/.1Ir::-

8C~.a~C""'le
Ce a::&f'.ca a c<p..
S.r-euI Cle p'cea
e&r:lpentN,aC"l'ta
~ v"etde t'UfaN:a
Car.te.."ccd. noullaSO
CIIr-;CU!/I .. col"trc'at"e'tJ'(';nIC
c. c..!'"t/l"'/Icar~e
pc-ultr6l"sf.::...""tmtele",zc'
=-af'CU!dep'e:a
il" spatele ecr4l"t.;!U1
~erfe'1'Tla"ta sau 5;~oJ"arta'
e3t'gul$OM::
... deprc!=a
5arrul de proba
SanC\JJ de proba
Ca<'.a,use:'hle
C,J ~ oear'e"'t! Cfll'\ ,ema"
a
II' L":.<I-v1 fa~afire
aar-culde preba
e)",:~"'o ~eriG~n:"
;"lO
lr'n"'--aoeo'anot
P,"l~!o1,at'~(+"l

tabel "stiri". De exemplu acest tabel poate

avea cmpurile:
data_stire,
categoria_
stire, titlu_stire, rezumaCstire
i stire_
extenso;
~ n pagina n care se dorete inserarea
tirilor (se poate stabili funcie de layout
numrul de tiri care se insereaz) se
plaseaz un script care acceseaz baza de
date (selectia se va face pe categoria_stire
i ordonarea descendent pe data_stire pentru ca ultima tire s fie afiat prima
n fereastra browser-ului);
~ se insereaz rezumatul_stirii
urmat de
un link (de regul cu textul "detalii ...")
ctre un nou script (unic pentru tot siteul) care afieaz tirea complet (stire_
extenso);
~ se pot folosi imagini (recomandabil)
care s nsoeasc stirile, care este de
preferat s fie pstrate n directoare separate. n baza de date este bine s gestionai numai cile i numele imaginilor, far
a ncorpora imagini n nregistrrile din
tabelul "stiri".
Avnd deja un exemplu detaliat, realizarea includerii tirilor n paginile siteului nu mai reprezin un obstacol. Cu
ajutorul bazei de date MySQL i folosind
comenzile PHP din acest articol am implementat o caracteristic dinamic siteului, acesta fiind astfel mai atrgtor, iar
informaiile mai uor de gsit. Teoretic, n
urma acestor operaii ne putem atepta la
o cretere a numrului vizitatorilor.

PROGRAME - APLICAII GRATUITE

Utilitare gratuite pentru

design i programare
n cele ce urmeaz, v vom prezenta o serie de programe gratuite
ocupai de web design sau de programare

aterialul de fa se vrea a fi mai mult

o serie de ponturi referitoare la
aplicaii pe care le-am ntlnit,
folosit i apreciat. Desigur, unul dintre
criteriile de selecie a fost i gratuitatea
acestor programe, fiind vorba de freeware
i cel mult donationware. n sperana c
v vei gsi cteva puncte de referin
interesante citind acest material, v lsm
s explorai propunerile noastre.

Mantis Sug Tracker

Pentru programatori, poate cea mai neplcut parte a muncii reprezint rezolvarea bug-urilor sau aplicarea unor corecii, dup dorinele clientului. Dac email-ul, fiierele Excel i capturile de
ecran sunt o soluie pentru comunicarea

care v pot fi de un real folos, indiferent

web i cu att mai mult dac le facei pe amndou.

problemelor aprute cu un program, pe

msur ce anvergura proiectului crete,
astfel de mijloace de comunicare sunt mai
mult o corvoad. Aadar, intr n scen
aplicaiile speciale de raportare i urmrire a bug-urilor.
Mantis Bug Tracker este o astfel de
aplicaie web, care capt recomandarea
noastr. n primul rnd, ne-a plcut interfaa simpl i cuprinztoare, modul de
administrare, raportare i etichetare a
incidentelor, dar i posibilitile de comunicare oferite. Bunoar, un freelancer
sau o companie care lucreaz constant la
anumite proiecte pot folosi Mantis pentru
centralizarea comunicrii, oferind acces
web clienilor, pe baza unul nume de utilizator i a unei parole. Dac n sistemul

Andrei

dac v
Licherdopol

Mantis sunt cuprinse numeroase proiecte

diferite, productorul poate furniza conturi de utilizator pentru fiecare client n
parte, cu drepturi de acces limitate la proiectele care l privesc pe acel client. n
plus, sistemul de sortare i raportare a
incidentelor se dovedete a fi unul att de
simplu sau complex pe ct dorete utilizatorul. Absolut toate laturile acestei aplicaii web sunt complet personalizabile, de
la aspect pn la funcionalitate i chiar
nivelul de securitate.
Scris n PHP, aplicaia Mantis funcioneaz perfect cu MySQL, MS SQL,
PostgreSQL, rulnd pe un server web ca
Apache. De asemenea, poate fi accesat
prin aproape orice navigator web. Vorbind de flexibilitate, modulul MantisCon-

Baseportal
Iat o aplica ie web cel puin interesant.
Funcioneaz ca serviciu online, pe acelai
principiu ca o csu de e-mail (pagina de

V1ewlnglssueSlmpleOetitlls[

10

e.legOl)/

00710

[~ReporlsJ

R'pol1er

Jktluy

s...~yal Runllme

ntmpinare
aduce puin cu cea folosit
de Gmail), numai c ofer posibilitatea de

AsslgnedTo
Priori!)'

non'M!

StatllS

UkflOlMedS~

Summary

00710 SUM'yol

Oesaiplion

!fa uUl'lOColTeclly
lill~!lI il luI hld lhalll
~l'Ialid
sliMperiorms thto Y3lldahons on tlle In: qUl'$llon ewn

pmi:lrms

_":ilidalions (Ifl hiddel'l (1'lCsI'l

ilClp.'ejllranchll'lg

quesllClfI$

by ilnolhil (bran.c:hNlg) qllestJon, bul1h~ chingi' It/Il tespoMi lolhi m!lill (blanclllf\!l)qUiS:IGfl, \lII\Ictllhen ~s
Ille luI qvesltP!l.lhe
lvnoey
t~tI
it is ilO lQngel actiwale-d This cluru confuslng ruuHs for Itle 115el b't-lllse- ille1ls :tle-m lhat lhelt i$ il f.eld f111edin ir\correcl!y. bul Ihe.,
tin no lon{jelne I~ field beca~e they Chi~
ItI~r wlect;on on tlle queSlion tMI atlNalet! !Illltext quesliOOm~ially. Irlhly ch~nge Ih&ir bril'lChing se!Klion, making CO!1fill1que$lions no 10"Vl!!
aeliv3led. Ihe data filI9din IIlI formllrly~ll'l'aled fitlds sJ'<oukl bf' remowd. Ofilllut.l flOlortger
Iidated

Addtllonal

Infom'lll:t1on
Tap

Nola~ ~Iached

Browur
O.tabase!

a crea i accesa de oriunde baze de date.

Cu un sistem de asisten bine pus la
punct, Baseportal poate fi folosit cu succes
i de ctre inceptori, pe cnd cei experimentai pot integra Baseportal cu propriile aplicaii. Fie c dorii s creai o baz
de date la care s avei acces de oriunde,
fie c avei nevoie de o baz de date pentru a susine o pagin web, serviciul
online n discuie v poate ajuta mult.
Integrarea cu alte pagini web este facil,
motiv pentru care v recomandm
cl-

DB.Vers/on

Optrating
System
PHPV,f$joll

8 Retation5hipt.
dUllliUleof

duros i aceast aplicaie.

lelaltdlO

Info: http://baseportal.com/
MANTISBUGTRACKER:Interfaa
'o'_'__

nect permite integrarea Mantis cu aplicaii .NET, Java, Cocoa, Eclipse i Nant.
Accesibilitatea merge pn la oferirea de
suport WAP, astfel c MantisWAP poate
fi rulat pe telefoane mobile i PDA-uri.
Sunt oferite chiar i module de migrare de
pe un alt sistem de raportare a bug-urilor
(precum Bugzilla sau GNATs) pe platforma Mantis.
Pe scurt, putem spune c Mantis este
interfaa ideal de comunicare ntre programatori, testeri i clieni, asigurnd un
workf1ow complet pentru fiecare incident, iar mijloacele de comunicare, administrare i integrare ofer att strictul necesar i simplitate, dar i un potenial
imens, n funcie de preferinele fiecrui
utilizator.

Manualul

UDB, Sybase, Informix, PostgreSQL i

MySQL, avnd multe opiuni de formatare.
Cele dou variante disponibile sunt
una online (complet
sigur, deoarece
nicio linie de cod SQL nu este transferat
pe internet, ci formatarea se face local) i
una desktop. Scris pentru medii Java i
.NET, SQLinForm poate rula din majoritatea browser-elor
far nicio problem.
Aparent aplicaia online a ajuns la performana de a formata n jur de 1.500.000 de
linii de cod, far nicio problem, aadar
merit s aruncai o privire asupra variantei online. Noua versiune desktop va fi
disponibil de la nceputul
acestui an.

SQ!.,inForm

disponibil

pe website este excelent, Imurind toate neclaritile

pe care
le-ai putea avea, mai devreme
sau mai trziu.

Info:

'_":.,;.,'::"=f;""

~_

bsjj;:'~(;-'-"

ideal de administrare
a problemelor tehnice.

'";;::::':'~;';;::':;;~;:~:~:'~:~;;:;;:':;;::;.~.;;;::'.~
._.~~."

www.mantisbt.org

plete sau cu erori de sintax.

Ofer suport pentru toate formatele majore de baze de date, ca
ORACLE, SQL Server, DB2 /

,...''" unour _,,,,~,,,,,,,,._'->.u

. _-'

<nt'_I"',~"..",__"-,.,,.,",

'-'

_
-.l .
,....
_,_ ..
c, ,-..
"""_, ."'T''"'.co,_.".:n ., _1_

""'..,,-, ............
-<-.....
<>

_,

_>

,_"

"".
-'-<
.' . ,
.,.__
l_J'~'

".,"'

ADrive beta
Acest serviciu

online

ne-a atras atenia,

deoarece ofer
stoca pn la
care le putei
sunt protejate,

gratuit posibilitatea de a
50 GB de date online, pe
accesa de oriunde. Datele
oferindu-se chiar servicii

de criptare i posibilitatea de a accesa versiuni mai vechi ale fiierelor, mulumit

tehnologiei
Snapshot.
Pentru a putea
folosi ADrive, avei nevoie de un browser
precum Internet
Explorer sau Mozilla
Firefox i s permitei server-ului ADrive
s stocheze cookie-uri n navigatorul vostru. De asemenea, trebuie s-i autorizai
rularea Javascript-urilor i s permitei instalarea controlului ActiveX. Nu n ultimul rnd, rularea aplicaiei necesit instalarea JRE (Java Runtime Environment).
Putei ncrca mai multe directoare i
fiiere simultan, care sunt scanate nainte
de a fi acceptate pentru stocarea pe server.
Momentan, cel mai mare fiier acceptat
poate fi de maxim 2 GB. Din pcate, ncrcarea
fiierelor
prin FTP nu este
permis, deocamdat.
n schimb, putei
partaja orice fiier dorii prin utilizarea
funciei Share, care va asocia fiierul res-

SQLinForm
Dac nu v place s pierdei mult
timp cu formatarea codului SQL
("munc de chinez btrn") vei
aprecia cu siguran
aplicaia
SQLinForm. Aceasta formateaz
corect liniile de cod SQL incom-

lunii martie a

:)

,_"

,,

pectiv cu My Shared Files. Acesta va putae

fi descrcat de la adresa asociat acestuia

PROGRAME APLICATII GRATUITE

A Drive

'>9kw_..,.

@,."'.....

palit ~t"".9"
Pol.,... tiM"""
HU94 Oilcovnts
01'1T.p.
&~d.up ."d .ute dat..
O.i~ t " , 6mm. OLT. SCLT. onlin . Set up . b.ckup
AlT. LTO e. 1'010'.'
Q' vie OU"
'1

"tor'", .

J . ".

~",."

de ctre oricine. Pe viitor, probabil c se

va lucra i la posibilitatea de accesare a
legturilor ctre fiierele partajate pe baza
unui nume de utilizator i a unei parole,
aspect esenial din punctul nostru de
vedere. Oricum, dac avei nevoie de mult
spaiu de stocare online, deocamdat
ADrive este cea mai bun soluie gratuit.
Info:
www.adrive.com

Acest program servete la ncrcarea i

descrcarea fiierelor pe i de pe website-uri FTP. Nu cost nimic, fiind opensource, cu toate acestea reprezint una dintre cele mai solide soluii de acest gen.
Ofer posibilitatea de a lucra cu mai multe
transferuri simultan, totodat putei naviga prin arborescena paginilor FTP chiar n
timp ce transferai fiiere pe acestea, facilitate care nu este oferit de multe alte programe similare. Totodat, putei utiliza
una dintre opiunile de conectare securizat, pentru a v asigura c transferul nu
poate fi interceptat. Una dintre facilitile
inedite este cea prin care putei regla viteza

(cmpy ...
G.t th. 1.t.Jt " :li, .h.t.
~p.l"I, d'leUUlon
th dJ,
.nd much mo' .
1':"'

'intr".

1<,
Arsh'v'nq
Compl.te
ILM fa. f,I
'fQutfil ~.tslim!

K p

",r.

maxim de lucru n funcie de or sau dat.

Accesul rapid la conexiunile FTP se realizeaz prin Site Manager, pe de o parte, care
permite memorarea tuturor adreselor FTP
mai importante i prin QuickConnect,
pentru conectarea rapid la o nou adres
FTP. Consumul de resurse este relativ sczut, Filezilla ocupnd circa 50 MB n memoria RAM. Se gsete pe website-ul indicat mai jos, n variante Client i Server, prima disponibil att pentru Windows, ct i
pentru Linux sau MacOS, n timp ce varianta Server ruleaz doar pe Windows.
Aceasta din urm este un server FTP care
poate rula folosind SSLi TLS, oferind conexiuni criptate, sigure. Totodat, ofer
posibilitatea de a comprima datele pe loc,
pentru a ctiga viteze de transfer sporite,
ns aceast comprimare poate genera
uneori i erori de transfer.
Info:
http://fIlezilla-project.org/

Iat o alt aplicaie bazat pe Java, care

permite crearea gratuit a unui album
foto online. Necesit crearea unui cont,

dup care putei ncepe s lucrai n voie.

Interfaa este simpl, funcionnd bine cu
drag&drop, iar aspectul albumelor poate
fi personalizat folosind fie teme, la rndul
lor modificabile de ctre utilizator. Putei
de asemenea redimensiona, comenta i
roti imaginile, iar partajarea albumelor
poate pleca de la folosirea server-elor Jalbum, fr a exclude i plasarea albumelor
create pe propriul server sau folosind un
alt serviciu de gzduire, precum i integrarea n alt website. Serviciul include i
un client FTP, cu un utilitar de sincronizare, iar compatibilitatea se extinde n
principal asupra navigatoarelor mai rspndite, ca Internet Explorer, Firefox i
Opera. Suportul pentru limbi strine este
extins, JAlbum oferind posibilitatea de a
introduce text n 31 de limbi. De asemenea, putei include o arborescen complex, ca i fiiere non-imagine, care odat
incluse n album pot fi accesate printr-o
legtur direct. n materie de descrieri
ale fiierelor, JAlbum este compatibil cu
EXIF i IPTC, informaiile din aceste
rubrici putnd fi extrase direct i folosite
n albume. Totodat, putei integra filtre
pe imagini, watermark-uri i logo-uri.
Unii utilizatori vor fi ncntai de posibilitatea de lucru n linie de comand, care faciliteaz automatizarea operaiunilor.
De asemenea, pot fi integrate oricte
extensii, prin intermediul scriptrii n
limbajul BeanShell (asemntor cu Java),
Pe scurt, JAlbum ofer foarte multe
faciliti, fiind compatibil cu orice platform care poate rula mediul Java 1.4.
Aplicaia este complet gratuit i "curat".
Nu exist adware, reclame sau spyware,
dar donaiile vor fi cu siguran apreciate.
Info:
http://jaIbum.net

Deja foarte rspndit, acest program de

editare grafic funcioneaz, aa cum indic i numele, pe arhitectura .NET. Ofer
o interfa uor de nvat, o sumedenie
de reglaje, lucrul pe layer-e, efecte specia-

le, posibiliti de desenare a unor elemente grafice de la zero i multe altele. Deocamdat, dup parerea noastr, este inferior Gimp, ns cu toate acestea ofer nite faciliti unice i foarte utile, precum i
un istoric limitat doar de spaiul disponibil pe disk, lucru foarte la ndemn pentru prelucrrile complexe, de lung durat. Un alt element inedit este bara de sarcini proprie. Aici, documentele deschise
apar ca registre diferite, ns navigarea ntre acestea este cum nu se poate mai simpl, datorit funciei Live Thumbnails, care permite navigarea ntre imagini printr-un simplu clic pe o previzualizare miniatural ce substituie obinuita i uneori
confuza denumire. Dei exist destul loc
pentru mbuntiri, nu putem refuza statutul de aplica ie recomandabil celor
care se ocup cu web design-ul, categorie
de utilizatori pentru care funciile oferite
de Paint.NET se vor dovedi a fi de obicei
suficiente i foarte la ndemn.
Info:
www.getpaint.net

Pentru cei care caut o alternativ gratuit

la programe ca Dreamweaver, editorul
HTML Nvu poate reprezenta soluia ideal.
Proiectul se bazeaz pe codul aplicaiei
Mozilla Composer. Ideea din spatele aplicaiei este eficiena i simplitatea, Nvu
renunnd la funciile cvasi-inutle regsite
n programe similare comerciale. nceptorii se pot obinui uor cu modul de lucru
i pot chiar gsi o soluie complet n acest
program - pe lng funciile de editare i
diversele moduri de vizualizare (normal,
HTML Tags, Source i Preview), sunt
incluse i un editor CSS, alturi de un
modul de administrare a paginilor web.
Desigur, sunt oferite i machete (templates)
i chiar un generator de cuprins, alturi de
clientul FTP nglobat. Disponibilitatea aplicaiei se extinde asupra sistemelor de operare Microsoft, a distribuiilor Linux precum i a sistemelor de operare Apple.
Info:
http://nvudev.com/index.php

Ne-au mai plcut...

Creaiile lui David Pye
o serie de programe freeware,

-== ~......

fr
. .
..
I
'1'
(d
nlclorestncle autllzare
upcum
spune autorul, pe jumtate n serios,

mm:llI

1t"'l\~(

JI\l).i,rl'ljl!il4l'.!>"'~ ..\ 'l>"JI

~~'(.cx

__
I!<,.'~'-\-t."''''''~~iI<:~'':'~::O:'
~-:.(::a
'::: : , ':. 1:r!ii ... "il ~ ; 11 Il IrW r;,lJl!of."- ClIMllll:l~

2~~~~~Q6W~I~.a.~~~~~.~w ~

11of.~W.....
-~"
~B~.a~"~J~."~.~~~~.N.~
:::::
r."*'r."IH~l!l""

pe jumtate n glum, n afar de:::::

Q "
,"'2>1lI ' S~;5~
obligaia
de a-i informa
i pe
''2 'r"'ldlb!lI6~.;j"'olll.,:t9;)JiJ-,:;)"."".1l1ll
cunoscuii care au nevoie de aceste
Programe). Dezvoltate n timpul

"lJI .

lIIlJlJI"' jj.,)lII.(\

.=Ji".
~
~~~~~M~S~bS
""i!Io

liber de David Pye, acestea au cele

mai diverse ntrebuinri,
precum

\li'/!

.,:.~

'lIIe.Ql\."e.e!!l~"t>~""~.
.P9W96~_Q~~",~~

_::: .\JIlS=~~"' iJ.01ttdl\ l1J.II"tA'lr.!."":!lfllll.1

,.::::
!l'.&
.~(lt;.i".I!>.!'>IIll"'"
wealUI o
,

eliminarea
complet
a codului
HTML sau a codului Javascript dintr-o pagin (HTML Stripper), dar i colecii de Javascript-uri
(Javascript Vault), animaii GIF (GIF Vault), animaii i grafic web (Web Graphic Animation
Vault i Web Graphic Vault), foarte utile cnd timpul v preseaz. Accesai legtura cnd avei
timp, cu siguran vei descoperi o sumedenie de lucruri utile acolo.

Info:

www.david-pye.com/index. php?page=freeware

Aplicaiile gratuite Iconico

~-_..:_.. .... ..._ .. I

-"'"_._~,,,~

QJ::c,::;c"'-"'("C.'C~l

Pe aceast pagin web, vei gsi categorie Free

Tools, unde sIluiesc o serie de utilitare gratuite,
precum:
ColorPic - un instrument de indentificare a culorilor
cu o lup incorporat, folositor pe monitoarele de
nalt rezoluie, care afieaz culorile att n valori
RGB, cod hex i zecimal ct i n procente CMYK i
CSE HTML Validator Lite - un instrument excelent
pentru validarea codului HTML.

Info:

Aplicaie de analizare a jurnalului de

accesare a paginilor web. Ofer informaii
statistice despre activitate, fiierele accesate, traseele parcurse pe pagina web,
legturile care au condus vizitatorii pe
pagina analizat i multe altele. Raportul
este predat n format HTML, incluznd
att tabele ct i grafice. Este compatibil
cu server-ele web Apache i lIS. Din
pcate, nu este complet gratuit, ns l-am
inclus deoarece considerm c merit
vzut i folosit, chiar i numai pe durata
celor 30 de zile de funcionare a variantei
demonstrative.
Info:
http://weblogexpert.com

Nvu ...

www.iconico.com

Dac avei probleme n alegerea combinaiilor potrivite de culori, tot ce trebuie

s facei este s accesai legtura oferit de
noi mai jos. Pe baza unei culori furnizat
de voi, aplicaia gratuit Color Wizard v
va furniza toate seturile de nuane complementare, analogice, variaii precum i
seturi a cte trei, patru sau chiar ase culori pe care le putei folosi mpreun pe
un website. De un real folos pentru obinerea unei scheme de culori echilibrate i
estetice.
Info:
www.colorsontheweb.com/
colorwizard.asp

I
'

r'...

_.--ii..-.ii ii
......
....
....

'

-=:--.....

--__ o,
_-1
__

-1

_-1
_-1

..,
...

"JfnD

.,"'"

.- .....

Apache a fcut picioare!

Instalarea unui server pe o staie de lucru nu este neaprat anevoioas,
dar n anumite situaii nu se numr printre posibiliti(le viabile).
Aplicaia Server2Go v scutete de batai de cap, putnd fi folosit
de pe orice mediu de stocare.
Andrei Licherdopol

ecele mai multe ori, o pagin web va fi

gzduit pe server-ul unui furnizor
specializat, singura preocupare a
designerilor i a programatorilor fiind
aspectul, coninutul i funcionalitatea
paginii / aplicaiei respective. Exist ns
anumite situaii n care vei dori rularea
unei aplicaii client-server oriunde i
oricnd. Pentru ca aceasta s ruleze corect
ns, pe calculatorul folosit trebuie s avei
acces la Apache, PHP, SQL i eventual
Per!. Soluia? O aplicaie care s poat rula
ca server, far instalare i care s poat
susine o mare varietate de aplicaii.
Server2Go este o astfel de soluie, care
poate fi rulat n mod direct de pe un disc
optic (CD, DVD), un stick USB sau un
hard disk, far instalare. Beneficiai astfel
de un server web (bazat pe Apache) plin de

faciliti, printre care suportul pentru PHP

5, baze de date SQLite, MySQL 5, extensii
PHP i Per! 5.8.

SEARCH ENGINE'
Zoom s the e.3siest way ta add a powerful custom search enoine te your
website, Intranet, or CD-ROM and DVO. Take the taur, download Dur
software, and see how easy it is for yourself.

latest version: 5.1.1011

Wh~t's new I Fe~ture list
UpQfade ta Yrslon 5.1

I Corr,p"re

edltlons

Mic, dar detept!

Watch the ",Ideo

Flash

mO ...I!;' (2.0MB,

sound

required)

Your very QWnfull-text

or HTtI\L tour

(200KB)

search engine

Zoom is a software packaQe that creates CI search enQine for your website,
Intranet, CO, or DVD. It provides fast and powerful full-text searching by
indexing yaur website in advance with an user friendly desktop application
that allows yau ta confiQure and index your site, from the convenience of yaur
Windows computer.
Simple,

powerful,

Server2Go a fost creat pentru a nlocui

programe
asemntoare,
precum
WampOnCD, deoarece acestea fie nu erau
actualizate suficient de des, fie aveau
lacune destul de mari n suportul pe care l
ofereau. Astfel, pachetul oferit de Timo
Haberkern se bazeaz pe WAMPP. Licena
este donationware, nsemnnd c poate fi
folosit gratuit, dar c totodat nu ar strica
s facei o donaie n cazul n care l folosii
intens sau n scopuri comerciale.

and flexible

Easy te use and install, up and running in minutes

Take the tour

See how Zoom ~n add search to your
website in CI matter of minutes

No advertisin9, no annual fees

No scripting knowledge or editing reQuired
Ne complicated database setup procedure
Ne extern al web service required
Highly configura bie
Search static and dynamic web pages (.HTML, .PHP, ASP. eF. etc.)

MOTORDECUTARE.Aplicaia Zoom Search Engine poate fi integrat perfect cu Server2Go,

pentru asigurarea unei interfee de cutare. Mai multe detalii la adresa
www.wrensoft.com/zoom/support/cgicd.htm
I

Practic vorbind, utilizatorii acestei aplicaii

se vor bucura de tot ce ofer pachetul
WAMPP:
~ suport pentru Apache l.3.x, 2.0.x i 2.2.x;
~ suport pentru PHP 5.2.x cu extensii, alturi de posibilitatea de a folosi versiunile
4.4.x i 5.0.x;
~ suport MySQL 5;
~ suport Per! 5.8 (multe module CPAN
integrate);
~ suport pentru integrarea cu sistemele
open-source de management al coninutului Joomla! i Contrexx.
Desigur, pe lng aceste faciliti, intervin funciile Server2Go. Bunoar, apli-

caia se adapteaz la mediul n care este

. rulat, detectnd automat porturi libere
pentru Apache i MySQL, setrile proxy i
configurnd
automat
Apache, PHP i
MySQL n funcie de mprejurri. Desigur,

Instalarea Server2Go

II

Server2Go

poate fi configurat astfel nct s utilizeze

setrile prevzute de ctre programator.
Mai mult, Server2Go funcioneaz perfect i pe medii read-only, precum CD-R
sau DVD-R. Server-ul pornit automat la
inserarea discului nu este vizibil de ctre

D Accesai

~,,~!!1!~~_~,!!!!!!!!I'

pagina web www.

server2go-web.de/
down load/
download.html. Alegei i descrcai unul dintre
pachetele
disponibile. Acestea sunt de
mrimi i configuraii diferite, n
funcie de necesitile dumneavoastr.

,~-

~<~

utilizator,
autorun-ul
lansnd automat
navigatorul web, conectat la hostname-ul
i portul stabilite prin autodetecie.
La
nchiderea navigatorului web, serverul se
oprete automat.
De asemenea,

baza de date poate

f]

Dezarhivai aplicaia ntr-un

director. Tot coninutul adugat
de voi (script-uri PHP, imagini,
pagini HTML) trebuie plasat n
directorul htdocs, cu excepia
bazelor de date, care vor fi
plasate n directorul
dbdir.
Fiierele de configurare sunt
pms_config.ini (pentr Server2Go)
i celelalte fiiere obinuite aferente Apache, PHP i MySQL.

fi

folosit direct de pe CD-ROM sau prin

copierea temporar pe calculatorul gazd.
Aceste trsturi fac programul
potrivit
pentru
realizarea
unor
discuri
de
prezentare, ce pot fi distribuite i utilizate
far nicio problem pe majoritatea sistemelor.

~~\OOCIA'l'e'tln5e

suportul
tor.

pentru

MacOS, lucru mbucur-

Navigatoarele
web
cunoscute
de
Server2Go sunt Internet Explorer 6 i 7,
Mozilla Firefox, Safari i Camino, alturi
de cele care pot fi integrate pe CD, alturi
de aplicaie (Simple Browser, Discstarter,
Portable Firefox). Cu alte cuvinte, autonomia aplicaiei este remarcabil,
nefiind
nevoie cu adevrat dect de un sistem de
operare compatibil.

1%1

~:!!'!!!!~:5!!!!!!!'!!!!!!!!'!!!!!!!!!!!!!!!!!!IJ
00:00:201

0002'.14

~IP....

~-8"""'-ound-~1
__

.
-_=, 0

~---~.:I
rMl..11lll

1Q."I'lOtLIllI:Mf.

..J'"

-0;)-

.~~

~~

...J:,j1t.tCnl>.rl
llgcJc:U.dI
loQo.io>

;.Jdh

4..,jhldoc.

~:~~:.~:::~:=::=:::

j;:;;oCLs-1I.6 ~;:;:'' :' '

-~

~::~nt

'u-

6e

tdt

ib'r

a-der

~as

~L.1il'>

$6<0
"11<...
1709lO ..
I~S ~'ltf ..
nll8.l0 ...
l1r:slrl_,.1'0ll.i'O
..

.....

1.779a1ftoflll... 11.0UD.(.~"'settng
...
Il'llFtel'<ll..11.0920. .. C.~wSotMcl.
1261:8 Aokt . 11.092':1
... C~_Soa:h;I
.
l'I1IF1tfd. .. 17.0920.
. C'~""'SltmQ
.
IlIOlll Flefd
17.0\1,20.. C\D<Io:UI>erUrd5oC:tltlQ

285.6640ftofd
170\120.
.. C,~_5iItlnl
..
l~~l
JO.05.:?lI
.. C'O"N.( <'d~

1.6U1I11~,04,(l5.ZO'c~..,~
...
SOO1ltrl..
lIl8.211C.~..,5etln;.
..

....J~

...J...J"

weo-bol
-...J<idt
..J"'I'lI
U~

u_Zoo

C'\DOatnOnlSrd5ettrq
c.\Docu'NrU.nl5eltn;J
C~an:lsettn;l".

t\etl

,-'t:"J..)

;)~
~,..".,

f1""

lS01_0v0ffoditl)

T_

,-

"""

"",",'' ' ' '

~iia

P..eodl

'"'"

1/1
~.41155'OKB/;l

S~

rso~

=------.;-;;;;---"o;;;"';;;"'::;~.---,;;:;--=s
;;;:------

?IO"[ERD'.'tI~rtV

r~

lde

EJ

I~~

c....,_oI __

Pe viitor ..
Dezvoltarea versiunilor urmtoare includ
o serie de noi faciliti cu adevrat interesante, dintre care amintim suportul 100%

...\sesvef2g0_a2...P1mP.zip

_""

Unde poate fi rulat?

Ca i compatibilitate, deocamdat suportul
se extinde asupra sistemelor de operare
Windows
98, Windows
Millenium
Edition, XP, 2000 i Vista (pe acesta din
urm fiind necesare drepturi de administrare). n curnd, va fi integrat complet i

Fiind vorba de o aplicaie cu un

grad mare de autonomie, de la
procurarea la punerea n funciune a acesteia sunt doar civa
pai simpli:

fl-"l

Ibon~pc"""o-

r~"'_d!t6

Configurai aplicaia dumneavoastr web s ruleze corect

prin Server2Go i asigurai-v c
toate fiierele necesare se gsesc
plasate corespunztor n directorul pachetului descrcat de pe
internet. Verificai nc o dat
dac totul funcioneaz
cum
v-ai dori i facei ultimele setri
necesare. Pregtii fiierele pentru scriere pe un disc optic, astfel
nct rdcina Server2Go (unde
gsii fiierele autorun.inf
i
Server2Go.exe) s coi ncid cu
rdcina discului. Avei nevoie de
minim
cinci
elemente
n
rdcin: fiierele Server2Go.exe,
pms_config.ini, autorun.inf i
directoarele
server i htdocs
(mpreun cu ntreg coninutul
acestora).
~ Inscripionai discul i facei o
verificare. De acum, odat ce
introducei discul ntr-un sistem
compatibil, v vei putea bucura
de aplicaia creat, acum complet independent de pachetul
software de pe PC-ul gazd!

pentru Vista (momentan

necesit drepturile de administrator), pentru MacOS X
(aflat nc n faz beta), suport integral
pentru
PortableFirefox,
Lightttp,
JSP
(Tomcat), GIF-uri animate n ecranul de
pornire, recopierea bazei de date plasate
local pe mediul de stocare Server2Go

Cu aceast list impresionant

de
faciliti deja disponibile sau care vor fi
introduse n viitorul apropiat, Server2Go
este, spunem
noi, cea mai potrivit
metod de a rula aplicaii web de pe un

xibil, poate fi facut s funcioneze

cu
majoritatea tehnologiilor care v trec prin
cap. Este o idee excelent s-I folosii pentru a v crea un disc de portofoliu cu demonstraii ale tehnologiilor i aplicaiilor

(funcie excelent de exemplu pentru utilizarea unor aplicaii web de administrare

i contabilitate de pe stick), suport pentru
Python, Firebird, Ruby on Rails i Opera.

mediu portabil de stocare, mai ales c

Timo Haberkern este deschis discuiilor
n legtur cu cele mai diverse implementri. Astfel, Server2Go, aplicaie deja fle-

proiectate
de dumneavoastr.
Varianta
1.5.1.0 se gsete i pe CD-ul CHIP
Special, n seciunea
gramat!

Servere. Spor la pro-

Mai multe despre WAMP

Server2Go nu este ns unicul pachet de
software ce ofer posibilitatea de rulare a
unui server web, ci face parte dintr-o familie software denumit WAMP. Acronimul se refer la "Windows, Apache,
MySQL, PHP" i este nrudit cu LAMP
(unde L semnific un alt sistem de operare, anume Linux). Prin asocierea celor
patru programe antemenionate, WAMP
ofer o platform care n ultimii trei ani a
devenit foarte popular. Exist o varietate
larg de distribuii W AMP.
Tabelul alturat ofer o sinoptic a
celor mai populare 27 de pachete cu distribuii WAMP (sursa fiind Wikipedia
http:// en.wikipedia.org/wiki/Comparison
_oLWAMPs)
O privire mai atent asupra tabelului
ne permite s facem cteva observaii:
~ exist o preocupare susinut n dezvoltarea unor asemenea pachete de distribuie pentru Windows;
~ 14 din cele 27 pachete de distribuie au
licena GPL (GNU General Public License
- este o licen de distribuire liber a programelor de calculator);
~ serverul de web httpd este Apache, cu
dou excepii;
~ toate pachetele de distribuie au ncorporate PHP i MySQL;
~
administrarea MySQL se face cu
phpMyAdmin, cu trei excepii;

CongnwlltlorlJ:
You WC(U,fuU~

if'IstJHed XAHPP

lin mis S'('lUml

NOwyO!o GIt' Start 1.o~..o",*,,"'llnlc.o

/fiM ~
t'le'"fUWQ"cru llr~

rIl"SU1'fD..

~1dt,..,

tre aceste pachete de disService...

S_C_M_.,_,_
tribuie au fost
incluse pe CD:
rModules-EasyPHP,
I Status
phpdev, Uni~ Svc
Apache
Stop
Admin..,
Refresh
form Server,
Stop
Svc
Admin..,
WampSrever,
Explore ...
Start
O Svc
Admin
Web-DeveI Help
loper Server
Start
O c
Admir
Exit
Suite, WOS1
Portable
i ~b~PP Cont~ol Panel Ve~sion 2.5 (9. May, 2007)
XAMPP, al- Windo~s 5.1 Build 2600 Platfo~m 2 Se~vice Pack 2
turi de Ser- Cu~~ent Di~ecto~y: f:\xampp
Install Di~ecto~y: f:\xampp
ver2Go.
Status Check OR
Dintre toate pachetele
din
tabel,
XAMPP este
singurul care
ofer distribu- COMPLET: XAMPPconine printre altele i serverul FTPFilezilla.
ii pentru cele
MySQL, Apache i Peri (n variant
mai rspndite sisteme de operare: Linux,
Windows, Mac OS X i Solaris. Altfel
redus), alturi de phpMyAdmin pentru
administrare. Permite mod3uth
sub
spus, XAMPP este cross-platform.
MySQL, o soluie interesant de securitate.
Ce conine XAMPP?
Distribuia complet ofer n plus biXAMPP este un server web complet.
blioteca SSL(Secure Socket Layer - protoPachetul XAMPP are dou distribuii,
col de securizare a schimbului de informaii pe internet) i aplicaii ca Webalizer
una complet i alta care ofer doar
funcionalitatea de baz.
- analizarea traficului pe website, Mercury
Distribuia "uoar" conine PHP,
- un server de transport a mail-ului,
JpGraph - bibliotec pentru crearea de
grafice online, FileZilla - un excelent server FTP i multe altele.
n ceea ce privete punerea n funciune a XAMPP, acesta se poate procura
direct de pe internet. Una dintre adresele
unde vei gsi ultima versiune este
http://sourceforge.net/ projects/xam pp/,
o~'"'to
mrimea fiierului fiind de circa 50 MB.
Distribuia se gseste sub form de program executabil, alturi de un script de
configurare a serverului. XAMPP are
instrumente de verificare a instalrii i de
control a securitii componentelor.
Dup instalare, XAMPP ofer un panou
de control. De aici se pot activa i dezactiva componente (servicii) XAMPP.
Server-ul instalat poate fi apelat din
orice navigator web, introducnd adresa
http://localhost. Spaiul accesibil navigatorului se regsete n subdirectorul
Ihtdocs, subordonat directorului de instalare XAMPP. Prin copierea n /htdocs a
directoarelor
Isurselphp-div-css-js
i
Isurse/php-mysql-div-css-js de pe CD vei
putea vedea exemplele n lucru.

II__

SI<1tl.lS,.onltl<ltlt

II
II
II
II

I I
I
,1 I
I

Pachet

Versiune

Apache

3.5

Swissknife

Data
lansrii
2006.
05.06

Apache2

1.5.4

Triad
AppServ

2.5.8

AutoSet

4.3.1

2006.
02.20
2007.
02.20
2007.

Base

EasyPHP

2.0b1

e-novative

2.1.1

WAMP

2006.
10.04
2006.
12.23
2005.
12.19

0.1.7

fvpatwds

2006.
11.14

Glossword

2.2.8/5.1.22/

2008.

WAMP

5.3.0

01.20

Ughty2Go

1.2

MyWAMP

1.2.3

Net5erver

0.1

phpdev

4.2.3

2005.

Repos

2.1.0

Server2Go

1.5.0

SNAW

0.1.1

2008.
01.02
2007.

2007.
12.21
2007.
09.14

1.0 beta
P

Uniform

3.5

Server

2007.

MySQl

6.9

GPL

1.3.36

4.4.2

4.1.16

95.8

GPL

2.2

5.1.2

5.0.18

2.0.59

5.2.1

2.0.61

20

22.4

2007.
12.12
2007.

2.19

War;xserver
(a erior
WAMP5)

2.0

WebDevelop!r
Server Suite

2.00

WITSuite

1.0

WLMP

1.1.5

2007.
12.02
2007.
11.21
2007.
11.10
2007.

3.1

13

21

1.6.5

2007.
07.17
2007.
12.24

2.5

2007.
10.09

donation-

necunos-

donationware

Open

SSl

moetssl

mod....Perl

Optimizare
Zend

1.29

2.6.2

2.7-pI2

2.8.15

0.9.8a

2.2

2.0.1

2.6.2

5.0.27

2.9.2

1.2.0

2.5.10

5.2.5

5.0.45

2.11.3

0.9.7m

2.0.61

3.3.0

1.3.33

4.4.3

4.1.16

2.6.1

2.2.3

5.2.0

5.0.27

2.9.1.1

1.2.0

2.0.x

5.x

4.1.x

2.x.x

3.x

cut
GPL

SQLite
Manager

GPL

2.0.58

5.1.6

5.0.26

2.9.0.2

1.2.0

5.1

GPL

2.2.8

5.3.0-dev

5.1.22-rc

2.11.4

69.6

GPL

5.2.5

5.0.50

2.11.2.2

0.9.8g

(MiniPerl/

22.9

CC Mexico

2.0.55

4.4.2

4.1

2.3

2.0.54

5.0.4

4.1.14

2.6.4-pI1

0.9.7g

2.2.6

5.2.5

5.0.45

2.11.3

1.3.27

4.2.3

2.3.2

5.2.5

oricare

5.2.3,4.4.7

23.4

necunoscut

11

GPL

necunos
cut

LightTPD/
1.4.18

(integrat)

CGI)
-

1.99_16

0.98e

0.9.8e

3.3.0

5.0.41

2.10.3

CGI Peri 5.8

10

Apache

2.2.6

90

donationware (cu
restricii)

2.0.54,

CeCILL

2.2.4

5.2.3

5.0.41

2.11.1

22

OSL

2.2.6

5.2.5

5.0.45

0.9.8d

7.2

licen BSD

2.0.59

5.2.3

5.0.41

2.10.2

9.6

GPL

2.0.61

5.2.3

5.0.45

2.11.2.2

1.2.0

3.3.0

20

GPL

2.2.6

5.2.5,4.4.7

5.0.45

2.11.2.1

1.2.0

3.0.1

30.8

GPL

2.2.6

5.2.5

5.0.45

2.11.2

0.9.8g

2.2.6

5.2.5,4.4.7

5.0.45

2.11.2.2

5.2.5

5.0.50

2.11.2.2

0.9.8g

1.0

14.3

11.21
2.1.0

cut

phpMAdmin

33.7

12.19
2007.

necunos-

ware

09.23

07.05

VertrigoServ

ZendCore

PHP

12.02

05.05

Server

XAMPP

2006.
03.24

0.6

WOS

2007.
12.11

PAMPA

Portable

Server
Apache
HTTPD

(MB)

12.16

Denwer

Spike
sour~
SpikeW

Ucen

Mrime

comercial

GPL

1.3.35

LightTPD/
1.4.18

44

GPL

2.2.4

5.2.3 4.4.7

5.0.41

2.10.2

32

GPL

2.2.6

5.2.5,4.4.7

5.0.51

2.11.3

0.9.8g

2.2.4

5.2.4

5.0.27

2.10.0.2

0.9.8e

40.6

GPL/
comercial

(integrat)

(MiniPerl/C
GI)

eAccelerator
0.9.5.2

2.0.3

3.3.0

3.3.0

PROGRAME GIMP 2.4.2

'{.ew

t2S0

il'l'laQe

I.ayer ~oIors lools ~

F*etS

~---'31

.,.,----JllOo,o '::::J

RectMQle Select
Mod.

,-

Procesare gratuit de
imagini pentru web
Dac nu dorii s cheltuii bani pe un editor grafic precum Photoshop,
i flexibil, soluia nu poate fi dect GIMP.
A

norice domeniu n care se impune

editarea imaginilor de tip raster (nevectoriale, bazate pe pixeli), Adobe deine
supremaia, oferind Photoshop, de departe
cea mai capabil aplicaie de acest fel.
Posibilitile de utilizare sunt aproape
nelimitate. Nu toat lumea i dorete sau
permite ns cheltuiala - pentru aceste categorii, propunem probabil cel mai popular editor grafic gratuit - GIMP. n decursul mai multor ani, GIMP a suferit mbuntiri enorme fa de variantele incipiente. Se poate spune c versiunile de actualitate (2+) ofer aproape tot ce i-ar putea
dori un utilizator. Cu att mai mult n
cazul activitilor ca web design-ul, pentru
care GIMP ofer un suport deosebit.
Totodat, se gsesc extensii care simplific
foarte mult lucrurile, ns acestea sunt din

dar avei totui nevoie de o aplicaie capabil

Andrei Licherdopol

pcate deloc sau pUin accesibile pentru

varianta de Windows (lucru deloc surprinztor de altfel). Chiar i far acestea, v
putei face treaba far probleme cu GIMP.

GIMP nu muc!
La primul contact cu "lupuorul", s-ar
putea s fii puin speriai de interfa.
Pornind programul, vei constata c nu
exist niciun spaiu de lucru n sensul n
care v-a obinuit poate Photoshop - i nici
meniuri. Orice funcie apelai, aceasta se va
deschide ca o nou sarcin Windows
(portarea nu a luat n calcul obinuina utilizatorului tipic de Windows ca fiecare
aplicaie s aib un spaiu de lucru i un
meniu evidente chiar de la pornire i s
poat lucra ca sarcin unic, indiferent ce
funcii apeleaz), lucru care poate fi frus-

trant, dar peste care totui se poate trece cu

uurin.
Odat ce deschidei sau creai un document, apare spaiul de lucru cu respectivul
document, constnd ntr-o fereastr separat, cu o bar de meniu consistent (totodat util i cuprinztoare, dup cum vei
descoperi). Mai mult, cu un clic dreapta de
mouse pe suprafaa de lucru, avei acces
rapid la toate funciile i meniurile importante.

Revenind la mica fereastr cu instrumente

care v ntmpin la pornire, vei remarca
n partea inferioar un spaiu gol, unde v
este indicat c putei integra orice fereastr
de lucru independent dorii. Cu un dublu
clic pe oricare dintre instrumente, vei

deschide o fereastr cu setri. Trgnd

denumirea funciei (aflat imediat sub bara
de titlu a ferestrei) n acel spaiu, vei constata c aceasta "se lipete" acolo. Desigur,
n funcie de instrumentul selectat, meniul
proaspt anexat n partea de jos se va modifica. Putei folosi mica sgeat aflat n
colul din dreapta sus al ferestrei deschise /
spaiului de andocare pentru a aduga noi
registre cu funcii, pentru a detaa funcia
selectat sau pentru a administra setrile
facute instrumentelor (lucru deosebit de
util i accesibil). Astfel, ceea ce prea la
nceput puin i confuz poate fi organizat
cu mare uurin n orice configuraie v
trece prin minte. Confortul devine maxim,
iar controlul oferit este total.

Totul la degetul mic

Dac tot am vorbit mai devreme despre
fereastra cu spaiul de lucru i cu bara de
meniu, merit menionat c acel clic
dreapta pe suprafaa de lucru care aduce
toate meniurile n imediata apropiere a
pointer-ului, v scutete att de excursiile
enervante prin meniuri tipice Photoshop
ct i de alternativa la acestea - memorarea
unei liste interminabile de comenzi rapide
din taste. Dac n teorie nu vi se pare prea
relevant, cteva ore de practic v vor
convinge de avantajele funciei. Aceasta cu
att mai mult cu ct irul de meniuri n
cauz v conduce att ctre cele mai
importante funcii i setri, ct i ctre
orice instrument pe care avei nevoie s-I
folosii la un moment dat, far a deplasa
mouse-ul mai mult de trei-patru centimetri.

Arsenalul de instrumente
Am stabilit deja c GIMP este flexibil i
comod de utilizat, s vedem ns ce posibiliti de lucru avem cu acesta. Cnd vine
vorba de web, este clar c printre cele mai
importante instrumente se numr cele de
selecie, msurare i decupare, alturi de
posibilitile de prelucrare a imaginilor i
lucrul cu formatul acestora. Aici, programul gratuit ofer absolut tot ce ar putea
avea nevoie un designer. Cele opt instrumente de selecie (inclusiv instrumentul
Path), alturi de multitudinea de opiuni
aferente acestora asigur izolarea oricrui
element cu un minim de efort, n funcie
de experiena de lucru cu acestea. Nu toate
lucreaz la fel de bine ca i cele din
Photoshop (Scissors Select versus Magnetic lasso), dar odat stpnite, micile probleme i imperfeciuni iniiale dispar cu

totul. Este de remarcat preClzla instrumentelor, lucru foarte important pentru

web, ca i lucrul cu textul, n cazul de fa
facil, fiind puse la dispoziie o serie de
setri foarte utile n acest domeniu. Msurarea se face cu un instrument dedicat i cu
ajutorul liniilor i riglelor de ghidaj, toate
complet personalizabile.

+ <.

.~..
'

. ,. .
ClA
LJI.i..,;<I..

Layer-e i imagini
Un alt aspect important este lucrul pe
aa-numitele layere, "straturile" imaginii.
GIMP adopt o funcie similar cu cea din
Photoshop, att ca utilizare, ct i ca posibiliti. Sigur c Adobe ofer mai multe
moduri de a despica firul n patru, dar pentru ceea ce reprezint procesarea imaginilor pentru web, aceste moduri suplimentare sunt irelevante. Astfel, n GIMP se
pot practica majoritatea tehnicilor de prelucrare folosite n Photoshop. Pentru prelucrarea foto, sunt puse la dispoziie i o
serie de filtre, care n totalitatea lor ntrunesc mai mult dect un pachet esenial
(pentru designeri i fotografi).
Optimizarea imaginilor pentru web este
cum nu se poate mai simpl, oferindu-se
multe opiuni i algoritmi de compresie,
precum i previzualizarea imaginii altturi
de dimensiunea estimat a fiierului.
Desigur, putei folosi toate formatele de
imagini relevante pentru web i chiar
putei salva fiierul n format PSD, 100%
compatibil cu Photoshop.

FLEXIBIL: Ca multe alte programe, GIMP

permite aranjarea tuturor modulelor dup
bunul plac i n mod independent, oferind toate
instrumentele

necesare lucrului pentru web.

ACCESIBILITATE: Orice instrument sau funcie

din GIMP pot fi accesate prin meniul contextual
din fereastra de lucru cu imaginile. Adio
cltoriilor ctre marginile spaiului de lucru!
..
::.

_-

~..

..... _ .. - .... - ... -t=o.

re

elA
-'

t' A
.
A

L'.'

"oS,.'"

,----.

,iJr

De luat n considerare
n timp ce utilizatorii care au acces la
Photoshop i cunosc aceast aplicaie nu
au niciun motiv s treac la GIMP (acest
lucru implicnd dezobinuirea parial de
Photoshop i nvarea lui GIMP), cei care
au nevoie de o soluie gratuit, fie din principiu, fie datorit unor constrngeri financiare, pot apela cu ncredere la acesta.
Trebuie menionat c dei exist variant
de Windows, compatibil inclusiv cu
Vista, am ntmpinat ocazional ncetiniri i
blocri care nu se petrec dac l folosii pe
Linux. n acelai timp, varianta de Linux
poate fi mbogit cu tot felul de extensii
utile, multe dintre acestea neputnd fi integrate cu uurin sau deloc pe Windows.
Un exemplu de extensie foarte util este
Py-Slice, care genereaz automat un fiier
HTML pe baza ghidajelor inserate n
fiierul de imagine cu GIMP.
Din punct de vedere al documentaiei,
GIMP se bucur de un manual online bine
pus la punct, n completarea cruia vin

FUNCTIONALITATE EXTINS: Utilizatorii de Linux

se bucur de prezena anumitor extensii utile,
precum Py-Slice. Aceasta tie s genereze
automat un fiier HTML pe baza unui decupaj
dinGIMP.

multe alte documente publicate de utilizatorii acestui program, alturi de forum urile
dedicate.
Hi@@j Varianta de Windows poate fi
folosit far prea mari probleme i limitri,
cu att mai mult cu ct calitatea i viteza
portrii a crescut mult i va crete n continuare. Noi l considerm un editor grafic
care ofer toate uneltele necesare lucrului
pentru web i l recomandm clduros, cu
meniunea c cei dispui s ruleze i Linux
(exist multe distribuii gratuite, ideale
pentru nceptori, precum Ubuntu) vor avea o serie de avantaje importante, pornind
de la stabilitate i terminnd cu extensiile ce
se integreaz cu uurin n aplicaie.

Tips & tricks

pagin web nu este niciodat fmalizat, iar aceasta pentru c dup
structurare a site-ului vine rndul
muncii de finee i apoi primele ateptri
n ceea ce privete magazinul online. Noi
v artm toate punctele' n care mai
putei face optimizri.

Cele mai bune tips&tricks

utilitare

pentru homepage

pe tema HTML, CSS,

i comer electronic

au fost adunate de CHIP Special n paginile

acestui articol. Savurai-Ie.

Imageshack.us
D
Posta rea de imagini
pe forumuri i bloguri
Dorii s postai rapid o fotografie pe un
forum sau un blog? Pentru majoritatea
mediilor de acest tip imaginea trebuie s

Mihaela Dogaru

existe pe un server, legtura fiind facut

prin intermediul unui link, astfel nct fotografia s fie vizibil. Cel mai uor de procedat n acest sens este prin intermediul
serviciului online www.imageshacks.us.
Acesta v permite s ncrcai pe serverul
su, gratuit, cu dimensiuni de pn la 1

dului W3C. Aceasta se face simplu,

apelnd la serviciul W3C Markup Validation Service - http://w3.org.

ImageShack

HTML
Site-uri mai suple

New to ImageShack'

Cre-dte o p,.oflle or 5lideshow

upIoad:(.'

lmaQe

POSTARE OE IMAGINI:
forumuri

fotografii

CU ajutorul

si!ejresolution

allowed:

jpg jpeg

imageshack.us

La scrierea codurilor trebuie s v acordai ntotdeauna timp pentru a prevedea

textul surs cu comentarii - astfel nct s
putei ti i peste cteva luni ce scop aveau
anumite paragrafe. Modalitatea este diferit n cazul HTML i CSS.
Un comentariu n cadrul unui fiier
HTML ncepe cu <1- i se termin cu ->:
<1- textul mai trebuie prelucrat ->
~iew

~y

multlploader

recorder

putei

..:J

bar from ~
png

gif bmp

tit

tift

swf < 1.5 megabytes.

posta sau ncrca gratuit

pe

proprii.

HTML i CSS
B
Comentarea codului

~<it

320x240 (for websltes and email)

r femove

MB. i mai bine este c nregistrarea prealabil nu este necesar. Accesai pur i
simplu site-ul i cutai imaginea cu ajutorul funciei Search. Un clic pe Host it
trimite imaginea. Dup ncrcarea acesteia, avei de ales ntre mai multe URL-uri
pentru fotografia dumneavoastr: acestea
fac referire la un thumbnail accesibil
printr-un clic de mouse, la imagini adaptate pentru anumite forum uri i la imaginea n sine. Copiai aceste URL-uri i
introducei-le n post sau pe pagina dumneavoastr web. Imageshack recunoate
urmtoarele formate de imagine: JPG,
JPEG, GIF, TIF, TIFF, BMP, SWF i PNG.
Fotografiile n formatele "voluminoase"
TIF, TIFF i BMP sunt convertite automat
de ctre software n imagini PNG. Putei
ncrca astfel cte fotografii dorii, cu condiia ca prin aceasta s nu lezai nicio lege
(referitoare la dreptul de autor sau altele).

Ele

uri video

8,,,,,,,"-. I

r restZernal}e'

flooI:mao1<s ~ahool

!001<

Un comentariu n CSS ncepe cu /* i

se termin cu */:
/* stylesheet pentru paginile exemplificatoare din CHIP Special */
La conceperea comentariilor, gndii-v c acestea nu sunt vizibile efectiv
n fereastra browser-ului, dar c exist n
textul surs i c ele pot fi citite de fiecare
vizitator.

11 HTML

Testarea paginii web

n mai multe browsere
Este foarte important s vizualizai
paginile web abia create n browsere
diferite. i cnd spunem acest lucru v
recomandm s instalai programele de
navigare Firefox sau Opera, dar putei fi
siguri c acest mic efort va merita. Dac
nu dorii totui s facei noi instalri,
alternativa este constituit de site-ul
www.browserpool.de. serviciu care are i
o versiune n limba englez, dar care nu
este ns gratuit. n special atunci cnd
folosii programri ar trebui s efectuai
obligatoriu aceast verificare n mai multe
browsere. Profesionitii
i testeaz
paginile web chiar i pe alte sisteme de
operare, pentru a vedea dac aspectul i
funcionalitatea acestora se pstreaz.
Pentru a v asigura c site-ul dumneavoastr "se vede bine" i n alte browsere,
codarea ar trebui facut conform standar-

Numeroase editoare grafice HTML au o

problem: acestea scriu comenzi sau caractere inutile n codul HTML. Atunci
cnd converti i textele din Word n
HTML avei aceeai problem: codul
HTML este inutil de mare. n ajutor aici
vine editarea manual, cel mai bine realizat n Notepad. Acest utilitar de
Windows nu introduce n codul HTML
alte caractere dect cele introduse de
dumneavoastr. n cazul n care editorul
dumneavoastr "What You See Is What
You Get" convertete cteva spaii pentru
a obine o structur frumoas a codului,
nlocuii spaiile cu taburi. Au acelai
efect, dar ocup spaiu mai puin.

EILogoIrfanView
naintea bookmark-ului
Pentru ca vizitatorii paginii dumneavoastr web s o poat regsi rapid i pe viitor,
n colecia lor de bookmark-uri, v putei
afia logo-ul site-ului naintea URL-ului.
Pentru aceasta, modificai-v logo-ul la
dimensiunea de 16 x 16 pixeli, cu 256 de
culori. Folosii cel mai bine utilitarul gratuit Irfan View, care poate salva imaginea
n formatul ICO. Salvai acum logo-ul
micorat ca favicon.ico i stocai imaginea
n directorul principal al serverului dumneavoastr de web - n bookmark-uri i n
bara de adrese apare imediat "noul" logo
al paginii.

m HTML

Protejarea imaginilor la copiere

Odat prezeni n internet, nu este exclus

s v gsii la un moment dat pe alte pagini web fotografiile i elementele grafice la
care ai lucrat att de mult i la care inei.
Foarte suprtor. Exist ns modaliti,
dac nu de a mpiedica, mcar de a face
ct mai greu posibil furtul fotografiilor
postate online: ncrcai imaginile dum.dm..'9

tjeIp

.1 !!Itttp,II_.chip.ro/
I!I LOGO NAINTE
iii putei

DE URL: Pentru ca vizitatorii

afi~a logo-ul site-ului

naintea

paginii dumneavoastr

URl-ului.

web s o poat

regsi rapid ~i pe viitor, n colecia

lor de bookmark-uri,

TemplateMonster.com

Integrarea imaginilor de fundal

Cu ajutorul CSS putei integra foarte uor
imagini de fundal pe pagina dumneavoastr

1cmplate 'lollsler

web. Dat fiind faptul c browser-ul aeaz

ntotdeauna imaginea CSS peste culoarea de
fundal, va trebui de asemenea s o definii i
pe aceasta - pentru cazul n care utilizatorul
a blocat opiune a de afiare a imaginilor.
Pentru o imagine de fundal folosii pur i
simplu urmtorul cod n fiierul CSS:

Web Templal'"

T~4!
f'r'loNtet'webste t~e-s.
flash t~es
and hei' procb:ts are teadyofl\ade: web
deslgl"l5,thatc.anbeused~abaSlSfOf
faSl:andt.1'l~ywebste,
Ou websltet~es.
fl.Wl tl!!~es
and ~ ot:her PfOOJcts are wnpIe{ely cvstomrzollble ard feady for ITII'neQate
dowriood
We ~ T~e."1onster
.com do our best to PfO"tIde you V<"th web t~es
desq'l t:J prerrun
quolly.

Type: Css static

packa/Je
Item: #18121

full
Type: (ss full site nash 8
Item: '18126

Authot: ~
OowrO>ads, 1

Aut"", t!IQQ
Oownlood" O
$66
'$2650

Puee
l.hlQue-Pl'l(e

<style type="text/css">
div.bg {
background-image:
urI(..fi mag ini/fu ndal.g if);
background-color: blue;
width: 640px; he ight: 80px;
border: 1px solid red;
padding:20 px;
}

A Cr.lStmas

lott~

The Pr~ T~e

Wltf

~l

fnalyl . Jdn 23rd;

h.!s been selected by the

CtylStm~

loUtf")' Wsmer ~

1$now on ts

ta Gteecel

Prerryn T~'ti
ProdJchon Te-.-r.noloqY la>p:hzi
.JJ;t 9rh, ZOO8
Tempk.teMonster ~
a re-orokJbor\aty, new produc.t.on tedrJO!oqy fhie
thev new eateq::wy rJ Premun Desql T~es.
The HoIIday ISnot Qvel . .J.dni 20CS
Ned weekwt'l knowthe ~s
oi Template1'o'(lnsl:~'s ChtIStmMlott~1.
1

P;I

</style>
i n "corpul"
HTML:

2008

MAGAZIN CU TEMPLATE:

iii magazinul

"houl"

va dori

stocheze imaginea pe hard disk-ul su, va

fi foarte surprins s fi fcut rost de un
simplu GIF de un pixel. Dac dorete
ntr-adevr, el poate ajunge la imaginea
de fundal, prin intermediul codului surs,
dar vei avea satisfacia
considerabil munca.

Pn:e
Lhque

Pu::e

gsii designuri

profesionale

pentru

c i-ai ngreunat

A:hove r {color:line ;text-decoration:

underline ;}
A:active {color: red; background: #006699;
text-decoration: none; }

/1 - - >
</style>
Putei folosi i alte culori dect cele din
exemplu, cum ar fi albastru marin, negru
fucsia, verde, maro, bleumarin, oliv, mov,
argintiu, alb, galben etc. Acestea sunt cteva dintre culorile care sunt redate corect
de browser.

TemplateMonster .com

II
Hyperlink-uri colorate

Obinerea unui design

de magazin profesional

Un truc bun pentru

Suntei n cutarea unui design profesion-

a face hiperlink-urile

mai vizibile este schimbarea culorii acestora n momentul n care cursorul mouseului se afl deasupra lor. Scriei pentru
aceasta urmtorul
cod n capul
dumneavoastr
HTML:
<style type="text/css">

fundal
</div>

acum un GIF transparent de un pixel n

tabel, peste imaginea
de fundal.
n
n care

<body>
<div c/ass="bg">
div-Container cu imagine de

offerng

online.

neavoastr ntr-un cmp tabelar, ca fundal. Cmpul trebuie s aib exact dimensiunea elementului
grafic. Amplasai

momentul

dumneavoastr

Pe TemplateMonster.com

dumneavoastr

fiierului

paginii

<! --

A:link { color> blue; text-decoration:

underline; }
A:visited { color: grav; text-decoration:
underline; }

al pentru
magazinul
dumneavoastr
online? Dac da, atunci o vizit la adresa
www.templatemonster.com
este ceea ce
v trebuie. Acolo vei gsi numeroase template-uri n diferite formate numai bune
pentru download, la preurile moderate.
Template-ul devine totui ceva mai scump
atunci cnd dorii s fii singurul su utilizator. Avei de asemenea grij ca noul
dumneavoastr template s fie implementat fr probleme n magazinul online.

Zoom pe imagini
Este foarte util i plcut pentru utilizatori
ca, n momentul n care pun mouse-ul pe o
imagine, aceasta s se mreasc pentru a
putea fi admirat mai bine.
Pentru aceasta, n primul rnd alocai
imaginii o clas CSS, dup care atribuii-i
un link. nlocuii pur i simplu tag-ul
"Img" din fiierul dumneavoastr
HTML
dup cum urmeaz:
<a href="#">
<img c1ass="zoom" src=poza.gif' alt="
"width="160" height="160"
border="O">
<Ia>
Apoi, facei urmtoarea nregistrare n
fiierul CSS sau n "capul" paginii HTML:
<style type="text/css">
a:hover .zoom {
filter=' O ' ; }
a:link .zoom {
width : 160px;
height 160px; }
a:hover .zoom {
width : 500px;
height :500px; }
</style>

Evaluarea intertitlurilor

este vital s rspundei prin mail ntrebrilor

clienilor

Intertitlurile,
bazate pe aceast nregistrare CSS, au un aspect foarte profesional

dumneavoastr
maxim ntr-un

i confer paginii dumneavoastr

o structur intuitiv. Textul este formatat cu
bold i peste ntreaga pagin trece o linie
subire. Pentru ca un astfel de text s fie
aliniat la dreapta, folosii codul urmtor

terval de 24 pn la
48 de ore. Oferi i de
asemenea clienilor

in-

dumneavoastr
posibilitatea
de a v

SOURCEFORGE.NET 2007
COt.U.1UNITY

CHOICE

A\'/ARDS

SI'O"SOIlS

n fiierul HTML:
<h3 style="text-align: left;

contacta
telefonic
sau prin fax. i cnd

margin-bottom; Opx; padding-bot/

tom: Opx">
<span style="font-family:Arial,
Helvetica, sans-serif; fontsize: .8em; border-bottom: 3px

spunem acest lucru

nu v ncurajm s
folosii numerele cu
tarife exagerate. Optai mai bine pentru
cele cu tarif normal
sau chiar pentru cele
n regim 0800, cu

solid black; "Exemplu

intertitlu aliniat la stnga< /span></h3>
Varianta cu aliniere la dreapta arat
astfel:
<h3 style="text-align: right;
margin-bottom; Opx; padding-bot/
tom: Opx">
<span style="font-family:Arial,
Helvetica, sans-serif; fontsize: .8em; border-bottom: 3px
solid black; "Exemplu
intertitlu

~~?:'~:;~"~'
-_-~,a:

apelare gratuit. i
clienii tiu c un
mic magazin online

Utilizare gratuit a soft-urilor

pentru forumuri

Suntei n cutarea unui software liber,

performant
i, implicit, gratuit pentru
crearea de forumuri? Aruncai o privire
asupra soluiei numite phpBB. Cu ajutorul su putei construi rapid i avantajos
platforme de comunicare care corespund
tuturor cerinelor pentru un astfel de sistem. cu phpBB putei realiza nelimitat
numeroase forum uri, cu oricte categorii
dorii. Mai multe informaii
gsii pe
site-ul oficial, www.phpbb.com.

II] Ctig de bani n internet

Optimizarea serviciilor
pentru clieni
Un serviciu bun pentru clieni este foarte
important
i poate decide succesul sau
eecul unui magazin online. Clienii care
cumpr online nu ateapt doar o livrare
prompt a mrfurilor
comanda te, ci i
feedback din partea ofertantului,
tradus
cel mai adesea prin rspunsuri cu soluii
la diverse ntrebri i probleme. De aceea,

s.., . , ..

'!tl~S.Maosce't_d

iiph.,sll[,,,~(O-

pe

bine tratat se va ntoarce

cu siguran.

Ctig de bani n internet

phpBB

""'u.u....,..,

nu poate oferi un f!t SOFT PENTRU FORUM: Proiectul open source phpBB2 se bazeaz
hotline
non-stop,

PHP i se poate instala n doar cteva minute.

dar indicat ar fi s
precizai intervalele orare n care pot fi
Ctig de bani n internet
preluate apelurile telefonice. Un client

aliniat la dreapta< /span></h3>

ea

Transmiterea sigur
a datelor clienilor
n special la introducerea
datelor "sensibile" ale utilizatorilor (cum ar fi de exemplu numerele de cont i de pe cardurile de
credit), sigurana trebuie s joace un rol
major. O codare SSL pe 128 bii nu
reprezint doar un standard, ci i o obligaie absolut. Dac este posibil, utilizai
un certificat de securitate SSL special pentru pagina dumneavoastr
web. Gndii-v la simplul fapt c i cea mai sigur
metod de codare este inutil atunci cnd,
ulterior, trimitei datele clienilor prin
mail, fr nicio msur de siguran.
umerele de cont i de pe cardurile de
credit 1 U au ce cuta n mesajele electronice.

IExamr.e Certf""'. .. l
r
r.
r

Accept ttis eet'tiich permanentty

Accept.: this certficate
Do

not cept

temporarfy

fOt'

tm 5eSsKln

tre cert:fical:e and do noi: connect

III CERTIFICAT DE SECURITATE:

iii posibil, utilizai un certificat
tate SSL special pentru

to this Web si.:e

Dac este
de securi-

pagina web.

Analizarea ,i optimizarea
magazinului online
Magazinul dumneavoastr
online are un
numr satisfctor de vizitatori, dar nu
tii ce comportament
au clienii dumneavoastr pe site sau dac marketing-ul
online pe care l practicai este eficient. n
acest caz, folosii platforma www.etrack
er.com. Funciile sale informative de control i statistic v ofer date exacte i o
analiz economic a magazinului
dumneavoastr online. Serviciile celor de la
etracker cost ntre 100 i 500 de euro pe
lun, existnd i posibilitatea testrii gratuite pe o perioad de 14 zile.

Webhosting
Spaiul web ca platform de testare
Atunci cnd dorii s v prezentai firma
sau asociaia pe internet, URL-ul adecvat
este foarte important.
Pentru aceasta,
drumul pe la un ofertant de spaiu web
contra cost este aproape inevitabil. Dac,
dimpotriv, v aflai n cutarea unei platforme de testare, teste ale cror rezultate
dorii s fie publice, ofertele de webspace
gratuit reprezint o bun alternativ.
Ofertanii gratuii potrivii - i pentru
scripturile CGI, PHP i bazele de date
MySQL - sunt destul de uor de identifi-

PRACTIcA - 18 TRUCURI PENTRU PAGINA WEB

cat. Introducei cuvintele de cutare
potrivite n browser sau vizitai pagina
www.free-webhosts.com. un portal care
c prezint ofertele gratuite, le evalueaz
i v ofer sfaturi pentru alegerea corect.
Mai dificile sunt lucrurile atunci cnd
cutai spaiu web gratuit cu suport
ASP.NET. Numrul de ofertani este aici
considerabil restrns. La data redactrii
acestui articol, Ofertele de webspace gratuit cu suport ASP.l ET veneau din partea
1 ASP Host (www.lasphost.com/web
hosting/webhostin~free.htmI)
sau Web
Samba (www.websamba.com).

web
tracker
c nlrolllng

Steil,l.'n

LOJur>oen

Si.

Ih "

."I;""t.d".,,,lc

ftht~.,tw.blt.thtik.n

"d ",'IO 1.",lle

b.sie 1 v.e.1

An.l."."

und

II".

Onlln.~tfoI9

m.t

R.nou.ee,,_

leit

und

OUUQu,c,n9

.m

pr.'lw.rt."

ohn.

KOIt.n

O."k

d .,d,\

!Ump"i"."-

e.,uch.,Tr.cl"'1'I0.

SpOI'."

Si.

du.eh ,0no".I:1".$
Mr.t.rnod.U
9.":

tr.d

optiml

dl.

lAlehtl9k

.n.

Si.

mit

Syn.m;

SO""''''.U'lStJll.ltion.

" ben.ol"<
Um t.c

"

Si.

do6'

Surf I.b .,

K.undenb,ndun9
t.

..l nt .

,.,

und

ett.ck

K.nn;:.hl.n

O.t.n.chllttkonfo.m.

In

Hu."
,Iulte"
.m.m

n."'V.l1 und

kOlte"vunJ.ti9

86.12S.89.242

Rom.";"
&'.1'0'1 ( &, ov
Wil'lXP
fir.fox
2.0
Sroadblnd

OiI; lnWit/vl; r..dian .mg

unei etr. fl.xibll;n
MP.I$ ..
nglmOgH(hI<
I

Webhosting

m .dm.'

tr.n,p.'.nt

<meief.mit m.xim.l
aff"i.nt.

horedaychec:k.de:

Schimbare de provider

Oferte interesante de gzduire web apar

tot timpul i poate ntmpla ca la un
moment dat raportul pre-performan
oferit de providerul dumneavoastr s nu
v mai mulumeasc. ntrebai-l de aceea
dac este posibil s v schimbai abonamentul cu una din ofertele de actualitate,
totul far costuri suplimentare. Dac acest
lucru nu este posibil i v aflai aproape de
termenul de expirare a valabilitii contractului, nu v mai rmne dect s rbdai un pic, dup care s trecei la un alt
ofertant.
n acest context, foarte importante este
depunerea la timp a solicitrii dumneavoastr de relocare a domeniului. n caz
contrar exist riscul ca domeniul dumneavoastr s fie liber pentru scurt timp,
suficient ns pentru a fi nregistrat de alte
persoane. Pentru ca acest lucru s nu se
ntmple, atenie la urmtoarele:
De regul, providerul dumneavoastr
de pn acum va elibera la vnzare dome-

. i~an

0'01'1I;t, .d , h.ben
"'1'11
ube.:a"'Qt.
fM.If",
1<..tlnQ "et

Mit .tr.dc.e,

bekomman
,ofort
tr~n,p anttn
Obe.bHdt
Ob., efi. ,IW,wirkungen

.i, elnen

KJlckb.ttugll;r1<.enn",n9

KJid<.pf.d., Int.""$1"'''

An.IVI.

L.",fih'9a

I."

v.,v.ild.utu

1'1.", Cliekm.pO

j.d W b.fo.m

Ums .U-Kolt.l'Irtd'lnu"g

Cooki , Plugtnl

Korw ion.,.t.n

I)emo-Tour

Fl hT.ukinq

W nko.b.n.ly,.1'1

Top

Ut .
ch."'.rfolc" ..
ng
mehr ...

100

~
rnehr

H"'.tmap-Ov

fP!!I ANALIzA: etracker v ofer o mulime de

lIiiI magazinului online i la comportamentul
niul imediat dup rezilierea pachetului
dumneavoastr de servicii de gzduire
web. Majoritatea furnizorilor de astfel de
servicii ofer n acest sens formulare standardizate, pe care le putei descrca din
seciunile de service ale paginilor acestora. Rezilierea trimis prin fax este de cele
mai multe ori suficient. Numai Server4You solicit nregistrare, iar 1&1 are
o procedur foarte elaborat pentru reziliere - cu Start n zona de contracte, un apel gratuit la serviciul cu clienii i un fax.
n cazul domeniilor .com sau .net, procedura este iniiat
de noul dumneavoastr
provider.
Primii de la acesta
un mail pentru
nregistrare, pe care
trebuie s l confirmai. Verificai nainte de toate dac
adresa de e-mail
specificat este valabil. Adresai pentru aceasta o sot~:.por':-~10cu:lcr;et conct'"~,
licitare
la Netl
workSolutions
(www.networksolu
tions.com).
Dac
adresa dumneavoaswe!Nof

le~erl'e

a&.MJ"\S tlrte!' YOU~tlll'ch

10f' I~

lt;lptaect'fOOlr(O:flffDnlR~,

lOdlllMOfll

lav

Web-Se'v"e.

W.b

2.0

un.;!

Rsa

API

detalii referitoare

Akdon.n,
.1,

e.,iI

fur

"' ketlnQ!

proJektwerk.et.

eu;'.

.b .tk., bl.t.t<li.
um du
.ktv.l1t
a.,thaft
tU .l'Ial".,.,.I'I,
10
;
nh.nd d.r
KJidphd.
dia
z ..
kunftlt,l.n
Pot.nti.'e
.u.tu,d\6pf.l'I,

mehr.,.

...

gutel

A[go.'thm.n

V d.ehts porting
Abeh. von eet..u\J.""
InelivldueU.
An~.r,,\en

Wlrl;.d'laftil,hk.il.n.lys."

WJed.rkahr,

~futnzan

Pel'fekt

K.mp.gn.nErfolqlkonboU.

Ha.kunft.SuehbeQriff.

T~e

nl.f.'

olt in> CMff

K.mp.'iJntn

drkLein.ck:

la vizitatorii

lor pe site.

tr demail nu mai este valabil, contactai-l pe cel la care v-ai nregistrat pentru
a v actualiza informaiile de contact.
n cazul n care suntei posesorul unui
domeniu .org, .ifo sau .biz, avei nevoie de
un cod AUTH pentru schimbare. Pe acesta n primii de la providerul anterior i
trebuie s l punei la dispoziia celui nou
atunci cnd facei transferul.

Webhosting
Gsirea domeniului potrivit
n cazul n care suntei nc n cutarea
domeniului potrivit i avei o list de nume posibile pentru pagina dumneavoastr
web, urmtorul pas este verificarea disponibilitii acestora n internet.
. Exist ofertani care v permit cutarea
dup domenii, dar nu putei rula din
pcate mai multe cutri deodat. sau nu
puteai. O posibilitate confortabil v
ofer site-ul numit mai sus al celor de la
NetworkSolutions.
Aici putei cuta
dintr-un foc pn la 10 nume i n jur de
30 de aa-numite Top Level Domains
(TLD).
Pe www.uwhois.com putei identifica
pn la 150 de TLD-uri exotice, afiarea
fiind posibil ns numai pentru un
domeniu i 10 TLD-uri concomitent.

ftoaOloiM

Windows'

t I

Ix

Dou versiuni, pe acelai PC

Cei care creeaz coninut web explorabil prin intermediul browser-elor trebuie s-I i testeze. Ce se ntmpl ns
cnd dorii s vedei cum se comport produsul att n lEG,ct i n IE7? Dei, n mod normal, aceste versiuni nu pot
convieui pe acelai sistem, v prezentm dou metode de a elimina acest impediment.
Andrei Licherdopol

unt cunoscute problemele ambelor

versiuni de Internet Explorer cnd
vine vorba de interpretarea codului
CSS. Astfel, paginile mbuntite prin
CSS pot aprea diferit pe aceste dou versiuni, chiar pot prezenta defeciuni diferite, de la o versiune la alta a navigatorului Microsoft. Drept urmare, faptul c o
pagin sau aplicaie web ruleaz bine pe
lE7 nu garanteaz buna funcionare pe
lE6. n mod normal, versiunea 7 este o
actualizare a variantei 6 i nici nu se pune
problema convieuirii acestora. Din fericire, exist cteva modaliti de a ocoli
acest neajuns, soluii pe care vi le prezentm n cele ce urmeaz. Prima variant
funcioneaz doar pentru sistemul de
operare Windows XP SP2, n timp ce a
doua este ideal pentru utilizatorii
Microsoft Vista.

fJ Instalarea

unor variante stand-alone

de Internet Explorer

Presupunem c avei deja instalat pe sistem Internet Explorer 7. De regul, acesta

se poate obine automat, ca actualiza re
Windows XP SP2. Dac l-ai "ratat",
poate fi procurat de la adresa www.mi
crosoft.com/windows/ downloads/ iei get
itnow.mspx. Odat instalat lE7, nu vei
mai avea acces la versiunea anterioar.
Din fericire, problema se rezolv simplu:
O Accesai adresa web http://tredosoft.
corn/Multiple_lE. Aici, accesai legtura
Download Multiple lE installer.
f} Rulai fiierul descrcat, multiple-iesetup.exe i urmai paii de instalare, alegnd ce versiuni mai vechi de lE dorii s
instalai.
c) Bucurai-v de posibilitatea de a testa o
pagin sau aplicaie web cu toate versiunile de lE dorite.

Cu ajutorul
unei maini
putei testa
pagina cu
mai multe

iri Instalarea

Microsoft Virtual PC 2007

Din nefericire pentru utilizatorii de Vista,

nu exist o soluie prea "curat" de instalare a Internet Explorer 6 pe acest sistem
de operare. Jici suita MultiplelE nu
funcioneaz prea bine cu Vista, motiv
pentru care cel mai cuminte ar fi s apelai
la Microsoft Virtual PC 2007, aplicaie
gratuit care v permite rularea mai multor PC-uri virtuale, pe care putei instala
orice sistem de operare Microsoft.
O Accesai pagina www.microsoft.com/
windows/ products/winfamily /virtualpc/
default.mspx i descrcai programul cu
ajutorul legturii Download
now. n
funcie de sistemul vostru de operare, vi
se va da posibilitatea s descrcai o variant pe 32 sau 64 de bii.
f} Instalai programul i configurai un
PC virtual care s fac fa cerinelor sistemului de operare pe care plnuii s-I
instalai pe acesta, apoi instalai acel sistem de operare. Astfel, vei putea rula mai

., Insl.allnternetEl<filOIellO

El !nJtallllU1!'let E~ploref4 01
Elf~lnlell'ldE.ef501
Elll'lStalllnlelnelElICloffi5.S

El rn~all!WneI. hpb'et

6.0

lE MULTIPLU:Alternativ, putei instala mai

multe variante stand-alone de lE.

multe versiuni de Internet Explorer, fr

nicio problem.

llI!Il:1 La configurarea VirtualPC, vei avea

posibilitatea s specificai ca PC-ul virtual
s foloseasc (printr-o punte) aparatura
de pe calculatorul vostru n mod direct, ca
unitatea de disc, dar vei putea i s creai
o unitate virtual care s citeasc imaginile virtuale de disc. Lucrurile stau la fel
i pentru conexiunea la internet. Adic
vei putea iei la plimbare pe internet cu 5
PC-uri virtuale simultan, folosind acelai
IP. Folositor, nu-i aa?

Internet pentru toi

Conexiunea

la internet,

care pn acum civa ani avea caracter de rara avis la romni, reprezint

prezen constant n vieile majoritii

romnilor.

tente n Europa de Vest, dar lucrurile se mic i probabil c foarte curnd vom ajunge acolo.

~I

cercai s v nchipuii o zi fr ,,~trop"

de internet. Fr s i verifici mail-urile
dimineaa la cafea i s citeti ziarele
online, fr s fii vizibil pe messenger pentru colaboratori i / sau prieteni, fr s

actualmente

Nu se poate vorbi de niveluri de acoperire similare cu cele exis-

vezi un videoclip pe YouTube trimis de

vreun cunoscut, fr documentare pentru
diversele proiecte pe care le ai n lucru,
chiar i s gseti o reet nou pentru
cin i exemplele pot continua. i mai

Mihaela

Dogaru

bine este c, dac nu ajungi la calculator n

timp util, nu mai ratezi mail-urile importante de la partenerii de afaceri sau
colaboratori pentru c exist posibilitatea
conectrii de pe telefonul mobil. Ei bine,

tot ceea e \Tei, la orice or i din aproape

orice ur este disponibil la un clic de
mouse, ingura condiie fiind s avei un
abonament la unul dintre providerii de
servicii.

Internet to go

Conectare, dar cum?

nainte ns de a vorbi despre provideri

despre ce conin ofertele din ce n ce mai

atrgtoare ale acestora, ne vom concentra
puin asupra modalitilor
de conectare.
n principiu, la ora actual n Romnia,
piaa este mprit
ntre cteva mari
tipuri de conexiuni, din care felia ce mai
mare este deinut de conectarea prin
fibr optic i reelele de cartier. Aceasta a
preluat conducerea n faa variantei de
conectare clasice, prin dial-up. Puternic
din spate vine varianta de conectare ADSL

i, cu o pondere mai mic avem conexiunile mobile.

Principala calitate a legturii la internet
prin cablu TV!fibra optic este viteza, care
poate fi de pn la 100 de ori mai mare
dect n cazul unei variante
dial-up.

~-

ttick on hoIspot:s lor hst

o
o

1C!d.al
BloI~10l'\1

-."

Computerul
sau reeaua sunt legate la
internet prin intermediul unui modem de
cablu conectat la cablul coaxial folosit
pentru recepionarea programelor TV sau
printr-un
cablu de reea cuplat la un
switch conectat mai departe la cel mai
apropiat nod al reelei de fibr optic.
Utilizatorul are n acest fel acces la servicii
multiple
(aplicaii
on-site,
on-server,
transfer de date, televiziune i telefonie).
La nceputul perioadei n care Romnia
a fost cuprins de febra internetului, n
urm cu circa 10 ani, varianta de conectare dial-up era cea mai rspndit, i cea
mai ieftin. Lucrurile s-au mai schimbat
de atunci, dar ponderea conexiunilor de
acest tip a reuit s se menin ridicat.
Pentru conectarea prin intermediul acestei metode este nevoie de un modem ataat computerului,
de conectare la o reea
de telefonie fix i de un cont la un provider de servicii de internet. Modemul nu
este un periferic foarte scump la ora actual, dar trebuie s menionm
i cteva
dezavantaje ale acestuia: viteza de conectare i transfer mici, precum i costul facturii telefonice, destul de ridicat (exist
ns oferte speciale i tot felul de reduceri,
despre care putei afla de la compania de
telefonie fix). De asemenea, transferul de
date i sunet nu se face simultan.
Conexiunea
ISDN reprezint o dezvoltare a reelei telefonice clasice, care
asigur de la dou (ISDN-BRA) la 30 de

n cazul n care laptopul dumneavoastr

este echipat cu o plac de reea wireless,
cltoriile n diferite coluri ale rii sau ale
lumii nu v mai oblig se folosii serviciile
scumpe de conectare la internet oferite de
hoteluri. Exist puncte de acces gratuite
aplicaii simultane

(ISDN-PRA):

convor-

biri telefonice, acces dial-up la internet,

transmisii fax, transmis ii de date, videotelefonie i videoconferin, folosind firele
existente i conectnd diverse tipuri de
echipamente terminale. Lrgimea de band este superioar, iar viteza transmisiilor
de date mai mare.
Avantajul ADSL fa de dial-up poate fi
rezumat la cteva cuvinte: internet n
band larg. Navigarea se face la o vitez
de aproape 120 de ori mai mare dect n
cazul simplei conexiuni prin dial-up, nu

mai peste tot, de la aeroporturi la cafenele

fast-food-uri i altele asemenea. Ca s aflai
de ele apelai tot la internet, unde putei
gsi site-uri n genul www.cfree.ro. unde vi
se ofer hri i liste ale hotspot-urilor gratuite. Gsii-le i navigai.
mai interesant, dar i cea mai scump.
Pentru acest tip de conectare este nevoie
de un telefon mobil cu tehnologia GPRS
(General Packet Radio Service). Tehnologia se preteaz pentru sesiuni de lucru
lungi, n care utilizatorul este conectat
permanent
la internet
prin telefonul
mobil. n plus este bine ca respectivul telefon sau modem s cunoasc i tehnologiile
EDGE sau HDSP A, pentru a oferi viteze
ridicate.
Aceast variant
de conectare
este
avantajoas n primul rnd pentru c asigur mobilitate, permind lucrul n afara

exist taxare la minut, se poate vorbi la

telefon i naviga pe internet n acelai timp
folosind o singur linie telefonic fiind n

biroului folosind internet prin conectarea

telefonului
cu laptopul,
PDA-ul
sau

egal msur posibil conectarea mai multor PC-uri la internet. Nu n ultimul rnd,
exist control asupra facturii, utilizatorul
pltind numai abonamentul
lunar, ar
taxarea traficului.

Pocket PC-ul, trimiterea sau primirea de

e-mail-uri, accesul rapid la informaii si
aplicaii WAP, direct pe telefon i primirea de apeluri i mesaje text n timpul
folosirii serviciilor GPRS pentru internet

Conexiunea

mobil este de departe cea

browsing sau WAP.

Tnr website, caut gazd!

Meninerea

unei pagini web pe eternele

plaiuri ale www-ului

presupune un culcu sigur i rapid, n inima (sau mai

bine zis n stomacul) unui server. S vedem care sunt cele mai bune oferte de gzduire web, att contra cost, ct i
gratuite.

entru gzduirea unei pagini web, este

suficient orice calculator conectat la internet, care s ruleze o aplicaie de tip
server corespunztoare (precum Apache).
Evident, este neplcut ca accesul la pagina
dumneavoastr s fie condiionat de starea

Andrei Licherdopol

calculatorului propriu i eventual de o conexiune la internet cu o vitez mediocr.

De aceea, este preferabil integrarea acestuia pe server-ul unei companii specializate n
gzduirea paginilor web, unde, n funcie
de pachetul ales i de specificul furnizoru-

lui, vei beneficia mai mult sau mai puin

de: o conexiune puternic pentru pagina
web, spaiu suficient de stocare a datelor
paginii, posibilitatea unui flux mare de date
ntre pagin i vizitatori i totodat securitatea datelor pe care le plasai pe acel server.

Cnd alegem un ofertant de webhosting,

trebuie s avem n vedere civa factori
cheie care determin o alegere viabil,
dup cum vei vedea n continuare.
Unul dintre criterii este importana
paginii web pe care "vrem s-o trimitem n
gazd". n caz c este doar un blog sau o
mic pagin web, strict personal, far un
scop comercial sau temporar (dedicat
unui eveniment), varianta folosirii unui
serviciu gratuit este viabil. Din fericire,
exist o sumedenie de astfel de servicii
gratuite, iar unele chiar ofer posibilitatea
de a construi un website pe loc pn i
celor mai puin experimentai ntr-ale
web-ului. Dac, dimpotriv, dorii ca
pagina s stea pe internet mult i bine i
cu att mai mult dac urmeaz s v
aduc beneficii comerciale, ar trebui s v
gndii serios la un webhosting pltit.
Exist, totui, cteva servicii gratuite care
ofer suficient spaiu de stocare, elemente
de securitate i posibilitatea unui trafic
lunar destul de intens. Din pcate, n
cazul serviciilor gratuite, este improbabil
ca ofertanii s ofere standarde de securitate corespunztoare, i aici merit discutat mai pe larg.
Au fost cazuri n care serviciul de webhosting a modificat coninutul plasat de
ctre utilizatori (cum ar fi cteva cuvintecheie strecurate n corpul tuturor paginilor unui utilizator - far tirea sau
acordul acestuia, cu referiri la pagini web
pornografice sau din alte categorii. Acest
lucru era observabil doar prin consultarea
codului surs al paginii web direct din
browser, la accesare, sau de ctre motoarele de cutare care indexau coninutul
respectivelor pagini. Practic, atunci cnd
navigatorul web cerea pagina respectiv,
server-ul o procesa, insernd cteva
cuvinte cheie n corpul paginii nainte de
"a o servi" pentru navigator. Ca urmare,
deintorul paginii nu avea cum s
sesizeze acest lucru atunci cnd modifica
pagina prin FTP, protocol care ofer acces
direct la fiierele de pe server.
Nu spunem c genul de ntmplare
descris mai sus ar fi cumva o regul sau c
s-ar aplica majoritii serviciilor de webhosting gratuit, nicidecum. Trebuie s fii
totui ateni la termenii de folosire (License Agreement) ca dealtfel la orice document pe care un serviciu, gratuit sau
pltit, v propune s-I parcurgei i s-I
acceptai nainte de a putea folosi faci-

~t1

~f;iI'~

'~i:!;!l?:(b':

BtJ'fNowI$5.9galnl"lt.com

..
..
..
..

P\J,chase

'1 Yrtlol$.I01lEl ro'

%Rlghtsreslrltledbyeopyri;hl
~ SoeeifiuUy, lhl$ dal3 tAAy ONlY bt used fOf Inlernel operaborlal
% purposes.UmaynotbausedforlargetedatmrtlSlflgorany
% olherpurpose

!Jo

t.-:

'foo

1'" tI"l'
J__

,..-

,.

.~

__

'tl

'"lU'~~~oIo:1lll6ll,,,

o"",It.,,,,,,,,,,,,,

""IIOll.l"OOlOlOC.O,ll

% E~te INTERZlSAfole$Ueil
datelor de pe <1tesl Sel\'ef In oricare
% alt scop deeat operarta retelei In spaml este INTERZISA
/f;
(otoslrealOflnscOPulipubllcllare

domall"'name IneSltUt.ro
desenpbon INeSletKOesrgnSrI
deSCflpllon.lllalaeSllnr21
Uescnpllon Ap 2
destrlpbon BriSOY
desCI1ption' Postal Code' 2200
deseriplron Country RO

descnptlon Phone 072( 483 200

escriptlon E-milll ilWl1itue~.rr
descriptiOn RegistrabonllO Number J08l1 Q3SJ02OS 2006
descnpbon

flsulCode

R18631971

admlll-CQntacl NC258ROTlO
lechnical-contiltt NC258ROTLD
zone-contilcl NC258-ROTLO
bllllng..contacl

__

NC258-ROTLO

nilmeservtl C1nsQljneslEbcro 212.52

166 211
namrUMlI
dn,0020 net23 hU 193 178 118 193
info
Obiect millnlalnfd by ROnD (10) reglslty

notl'"

doNin-""ln!listserv.NlC.ro
obJ'ct-malnlalt1ed-by ROTlD-MNT
I,Ipdaltd
dorl.in-adftinelistserv
up(fiilted

dan!rotld.ro

~"'

r
r

Ol_C"

. ..

ro ~-

r-.
r'
r
r...

.rne.ro

rr
r

r
r .
rr~~~
__- .
r .

r __
~- ...
r
r~"""'"
r-

r~_~
r_,_'_'_

r~~
r

20060512

2006052<1

CINESUNTEIVOI?: Cu ajutorul paginii web www.who.is. putei afla toate detaliile relevante
n legtur cu un website, posesorul domeniului i server-ul de pe care acesta ruleaz

litile respective. n tot cazul, dac pentru o pagin personal, mutarea coninutului pe server-ul altui furnizor poate fi
acceptabil, ns nu este cazul unei pagini
web comerciale, cu vechime i cu o baz
fidel de vizitatori.
inei cont de toate detaliile ofertei. Cei
care ofer spaiu de stocare nelimitat i
trafic nelimitat nu prea pot fi luai n serios.
Gndindu-ne la implicaiile unei asemenea
oferte pe termen lung, putem constata cu
uurin ca nu este una plauzibil. Asemntor, evitai s ncheiai un contract
care v ofer un spaiu de stocare mai mare
dect traficul lunar permis, deoarece ar trebui s fie invers. Evitai i pachetele prea
ncrcate n opiuni, atta vreme ct tii c
nu le vei folosi, cel puin la nceput.
Asigurai-v c serviciul garanteaz securitatea, integritatea datelor dumneavoastr.i faptul c nu v vei trezi cu publicitate
nedorit pe website, cu att mai mult cu ct
este vorba de un serviciu pe care-l pltii.

lung durat cu un furnizor de hosting.

Cel mai bine este s facei un contract de
test, pe o perioad scurt, pentru a vedea
exact cum se comport serviciul. n
aceast perioad, ncercai s comunicai
ct mai mult cu suportul tehnic, pentru a
vedea care sunt disponibilitatea i comportamentul personalului. Merit menionat c webhoster-ul la care apelai ar
trebui s poat fi contactat telefonic. O
simpl adres de e-mail pentru comunicare i suport nu reprezint soluia ideal.
Este foarte probabil ca pagina web de
prezentare a furnizorului s se gseasc pe
un server propriu. Apelai la serviciul gratuit www.who.is. Acolo, introducei adresa paginii web a furnizorului i aflai toate
detaliile relevante despre acel website i
server-ul pe' care este gzduit. Putei de
asemenea s ncercai comanda ping pe
IP-ul server-ului pentru a-l compara cu
altele, pentru a v asigura c acesta rspunde rapid n zona din care urmeaz s
fie accesat pagina dumneavoastr web.

Funcionalitate i suport tehnic

Dou aspecte eseniale pe termen lung,
funcionalitate a i suportul tehnic trebuie
testate nainte de a face un contract de

Webhosting gratuit
n aceast zon, tot ce v putem sfatui este
s citii cu atenie toate informaiile de pe

o ofert

gratuit

identic

click123.net.

Avnd acelai furnizor, ne ntrebm cum

poate www.orohost.com
s ofere gratuit
mai mult dect furnizorul su. n orice
caz, faptul c doi sau mai muli reseller-i
ai aceluiai serviciu au un design identic
nu este de bun augur. Putem specula c de
fapt, n spatele ofertelor
sunt aceiai

EI

.100

I<IIIt

d,~~

SJ'M"

C 10 II h~""~'I"'''
D 7 ..
:.QllJ db.
~,,<
El: Add"" d .
D \\ bdM

m.

Bl V,~,.1'"1
EI Pfll"ll~''''''
D A.u,,, ,~ ",.
D n' .
a
'"
D 1,1" " . ,

250 "'.II d '

t>

G'

N IoI..

G ~ I<II~QI

".t
"

<1. 1> ".

Si '"', 1'1
D PI1I' H<Og. ""'"'''J'''
D
'0
, .. Il,,~ (29
~,pu)
D nJ>.~<" .'"
II ril~ d""';,~,(b...
r' ii )

oameni, care au avut probleme cu reputaia unuia dintre servicii i au migrat

ctre alt denumire.
Dincolo de orice
speculaie,
este cert c aceti redis-

D w . t> ,,,,
D I'OP IM."
D 1'..'0''''''''
D I'l>pM ..Ad on
D c:1 ~'r<J '"."

tribuitori i pierd credibilitatea

n faa
multor utilizatori contieni de situaie.
Nu spunem c serviciile oferite de ctre
acetia ar fi de o calitate proast, ci v
DOUASITE-URI, UN SINGURRESELLER:Iat un caz clasic n care, sub denumiri
design, un reseller ncearc marea cu degetul

diferite dar acelai

atragem atenia asupra inconvenientelor

determinate de alegerea unui serviciu gra-

cu oferte uor diferite. Vi se pare de ncredere?

paginile web ale celor care ofer hosting

pentru care ar fi indicat s apelai direct la

gratuit i totodat s studiai relaiile dintre

acetia. De multe ori, aceti "furnizori" de
servicii gratuite sunt de fapt reseller-i. Pe
lng faptul c doi reseller-i ai aceluiai ser-

acesta. Un astfel de exemplu sunt paginile

web www.orohost.com
i www.click123.

viciu pot avea oferte radical diferite sau

oricum cu diferene semnificative,
este
foarte posibil ca furnizorul direct al acestora s ofere un serviciu gratuit de o calitate
mai bun, cu un suport superior, motiv
Ofertant

Alfa Web

eDomenii

ni personale,

ofer 50 MB n plus spaiu de stocare i 4

GB suplimentari de trafic, alturi de apte
baze de date MySQL fa de 3. Partea ciudat este c nsui furnizorul
Livehosting

www.alfaweb.ro

www.edomenii.ro

Pachet I (starter)

Basic (
un domeniu,
S conturi e-mail,
100 MB spaiu,
10 GB transfer,
o baz de date
MySQL)
2,9 USD/lun

Start (un domeniu, LHStandard (2 domenii,

S subdomenii,
10 subdomenii,
5 conturi e-mail, o 10 conturi e-mail, liste
list e-mail, un cont e-mail nelimitat, un cont
FTP, 100 MB spaiu,
FTP,4 GB spaiu,
20 GB transfer,
8 GB transfer,
zero baze de date)
2 BD MySQL/MsSQL)
1 EUR/lun
98 Lei/an

Pachet II(mediu)

www.livehosting.ro

www.mxhost.ro
MX-Medium
(2 domenii, subdomenii nelimitat,
500 conturi e-mail,
FTP, 100 MB spaiu,
15 GB transfer,
100 BD My5QL)
2,5 EUR/lun

pagi-

redus i

oferta fiecrei companii. Lista complet

cu servicii i detalii poate fi gsit la vizitarea paginilor web corespunztoare
cruia dintre webhosteri.

acestora are

MXHost

Strict pentru

de o nsemntate

cu un factor comercial zero.

Mai jos, am alctuit un tabel cu servicii
de gzduire contra cost. Pentru comparaie, am ales cte trei pachete similare din

net. Design-ul
paginilor
este identic,
furnizorul
lor identic, oferta gratuit
difer prin faptul c unul dintre servicii

Adresa web

Pachet III(business)

tuit de gzduire.
Concluzia noastr?

Webfactor
https://webfactor.ro

Spatiul Ro
www.spatiul.ro

fie-

Romarg.Ro
www.romarg.ro

WIN-START
(un domeniu,
subdomenii nelimitate, 100 conturi
e-mail, FTP, 100 MB
spaiu, 20 GB transfer, 5 baze de date)
12 EUR/an

Small1 (10 domenii

HOl (10 domenii,
10 subdomenii,
parcate, 2 domenii suplimenta
re, 10 subdomenii,
10 conturi/liste
e-mail, FTP, spaiu
10 conturi FTP,20 conturi
2S0 MB, transfer
e-mail,100 MB spaiu,
10 GB, 10 baze
transfer necontorizat, 2 BD
de date)
MySQL/ PostgreSQL)
38 Lei/an (fr TVA)
1,99 EUR/lun

Standard
Economic
MX-Advanced
LH Professional
(3 domenii,
(2 domenii, 10 sub(3 domenii, 15 sub(3 domenii, sub30 de conturi
domenii,2 liste
domenii, 15 conturi
domenii nelimitat,
e-mail, 500 MB e-mail, un cont FTP,
e-mail, liste e-mail
conturi i liste e-mail
spaiu, 30 GB
300 MB spaiu, 30 nelimitat, un cont FTP, 6 nelimitat, FTP,400 MB
transfer, 6 BD
GB transfer, 2 BD GB spaiu, 12 GB transfer, spaiu, 40 GB transfer,
MySQL)
MySQL)
BD MySQL nelimitat)
3 BD MySQL/Ms5QL)
3,9 USD/lun
2,5 EUR/lun
169 Lei/an
5,5 EUR/lun

WIN-MEDIUM
(4 domenii, subdomenii nelimitate,
500 conturi e-mail,
FTP, 400 MB spaiu,
50 GB transfer,
100 baze de date)
40 EUR/an

H02 (20 domenii,

20 subdomenii,
20 conturi/liste
e-mail, FTP,
spaiu 600 MB,
transfer 24 GB,
20 baze de date)
110 Lei/an (fr TVA)

Basic1 (20 domenii

parcate, S domenii suplimenta re, 20 subdomenii,
20 conturi FTP,50 conturi
e-mail, 300 MB spaiu,
tra nsfer necontorizat, 20
BDMy5QL,PostgreSQL)
8,95 EUR/lun

Profesional
Business
LHEnterprise (4 domenii,
(10 domenii, .
(5 domenii,
20 subdomenii,
100 conturi
subdomenii nelimi20 conturi e-mail,
e~mail,
liste
e-mail nelimitat,
tate, conturi i liste
10 G8 spaiu,
e-mail nelimitate,
un cont FTP, 8 GB spaiu,
60 GB transfer,
un cont FTP,
16 GB transfer,
30 BD MySQL)
5 BD My5QL)
4 BD My5QL/MsSQL)
39 USD/lun
10 EUR/lun)
210 Lei/an

MX-GOLD(4 domenii,
subdomenii nelimitat,
conturi i liste e-mail
nelimitat, FTP,
1 GB spaiu,
60 GB transfer,
BD My5QL nelimitat)
8 EUR/lun

WIN-PREMIER(6 domenii, subdomenii

nelimitate, conturi
e-maii nelimitate,
1 GB spaiu,
80 GB transfer, baze
de date nelimitate)
90 EUR/an

H03 (domenii/
subdomenii/
conturi si liste
e-mailjbaze
de date nelimitate,
1 GB spaiu,
40 GB transfer)
160 Lei/an (fr TVA)

Basic3 (20 domenii

parcate, 5 domenii suplimenta re, 20 subdomenii,
20 conturi FTP,100 conturi e-mail, 1,2 GB spaiu,
transfer necontorizat, 20
BD MySQL/PostrgreSQL)
10,95 EUR/lun

Uptime garantat

nespecificat

99.8%

nespecificat

99,5%

99.8%

nespecificat

99,9%

Script-uri

nespecificat

da

da

da

da

da

nespecificat

Module
administrare

nespecificat

Plesk

DotNetPanel
Enterprise

phpMyAdmin, Cpanel
PRO

phpMyAdmin, Cpanel,
Plesk

Suport tehnic

nespecificat

24/24 ore

e-mail / Forum / Telefon

/ Messenger

da

24/24 ore (telefon,

e-mail, chat)

Extra

nespecificat

PHP, Peri,
Apache,
Python,
SSI,
AntiSPAM,
antivirus,
webmail,
backup zilnic

DotnetPanel
Desktop, SmarterStats
Pro, backup, Ajax, ASP,
ASP.NET,PHP 5, Peri,
Python, Secured Folders,
SilverLight, Auto
Responder, antivirus,
antispam

Proba

nespecificat

nespecificat

nespecificat

Virus Scan, WAP,

My5QL,MsSQL,ASP,
Shopping Cart, CGI,
ASP.NET,551,Ruby on
Peri, directoare
Rails,Tomcat 5, Peri,
protejate, server 5MTP,
JS, CGI,webmail,
suport video, Flash,
Auto-Responder,
backup, statistici site,
POP3, IMAP,2end
webmail,
Opti mizer, Webalizer,
protectie SPAM
AWStats
30 de zile

Plesk 8.3, Cpanelll,

phpMyAdmin

phpMyAdmin 2.6.1,
Image Manager

zilnic (ntre orele

9-24)

24/24 ore (telefon,

e-mail, chat)

backup zilnic,lMAP,
webmail, Auto Responder, PHP5, My5QL
5, Tomcat 5, Peri 5.8.8,
CGI,Rubu on Rails
1.8.5, Zend Opti mizer,
Webalizer, AW 5tats,
5endMaii Support

backup zilnic,
nscriere la
motoarele
de cutare,
Site Builder Pro!,
Proteclie DDOS,
antlspam,
antivirus

nespecificat

30 de zile