specIal

Creaţi uşor şi rapid propriul

~ Căi diferite către acelaşi rezultat

~ Optimizarea codului

s ~ Soluţii gratuite pentru pagina web

 HTML se poate trece la includerea ima- grame gratuite care vă pot fi de un real
3 Editorial ginilor şi asamblarea structurii site-ului. folos, indiferent dacă vă ocupaţi de web
4 Cuprins Aflaţi din acest articol cum se face acest design sau de programare web, şi cu atât
5 CuprinsCD lucru şi care sunt formatele de imagine ce mai mult dacă le faceţi pe amândouă.
pot fi folosite.
50 Apachea facut picioare
28 Paşifinali Instalarea unui server pe o staţie de lucru
6 Elementede baza Un site este o construcţie arborescentă rea- nu este neapărat anevoioasă, dar în anu-
Realizarea unui site a presupus întotdeauna 1izată cu fişiere HTM sau HTML. Acestea mite situaţii nu e o posibilitate viabilă.
acumularea unor cunoştinţe. Procesul de trebuie stocate într-o structură de direc- Aplicaţia Server2Go vă scuteşte de bătăi de
învăţare nu se opreşte însă după finalizarea toare ce păstrează logica site-ului. Plasarea cap, putând fi folosită pe orice mediu de
primei pagini web, standardele noi, tren- fiecărui tip de fişier la locul potrivit simpli- stocare.
durile precum şi necesităţile determinând fică finalizarea site-ului.
perfecţionarea continuă. 54 Procesaregratuită a imaginilor
30 Mai rapid pe aceeaşi cale Dacă nu doriţi să cheltuiţi bani pe un editor
12 Evoluţiabrowser-elorweb Odată cu vitezele de acces la internet şi grafic precum Photoshop, dar aveţi totuşi
Programele de navigare pe internet fac dimensiunile documentelor HTML tind să nevoie de o aplicaţie capabilă şi flexibilă,
parte din viaţa noastră şi cu greu ne-am crească, graţie complexităţii paginilor web. soluţia nu poate fi decât GIMP.
mai descurca astăzi fără ele. Să ne uităm în Există posibilitatea optimizării codului, fără
urmă pentru a vedea care au fost etapele de
parcurs în evoluţia browser-elor.
a renunţa la funcţionalitatea crescută a
paginii.
» PRACTICA
56 Tips & tricks
32 Aceeaşitemă. altă realizare Cele mai bune tips & tricks pe tema HTML,
O alternativă la pagina web structurată cu CSS, utilitare pentru homepage şi comerţ
Conţinutulfnaintea designului ajutorul tabelelor este împărţirea prin electronic au fost adunate de CHIP Special
Dacă vă propuneţi să creaţi un site, este intermediul diviziunilor. În acest articol vă în paginile acestui articol.
bine să aveţi răspuns la o întrebare simplă, prezentăm modul de realizare a temei
de genul cui se adresează acesta? După ce noastre cu ajutorul diviziunilor. 61 Douăversiuni pe acelaşi PC
răspundeţi la această întrebare vă puteţi Cei ce creează conţinut web, trebuie să-I şi
gândi la planificare. 36 Site dinamic testeze. Pentru evaluarea în mai multe ver-
Doriţi să măriţi performanţa site-ului pro- siuni de browser, aflaţi cum puteţi instala
18 Structura site·ului priu? Utilizarea scripturilor PHP în con- IE6 şi IE7 pe acelaşi calculator.
După discuţii la modul general despre strucţia ultimei variante a site-ului nostru
tendinţele actuale şi planificarea site-urilor,
a sosit momentul să tratăm tema concretă,
este cel mai bun exemplu în acest sens.
» SERVICE
aplicând câteva din cele prezenta te anteri- 40 Dinamicăsuplimentara 62 Internet pentru toţi
or. Cum putem face ca la o nouă încărcare Conexiuni provideri, beneficii, iată în acest
conţinutul paginii web să se schimbe articol câteva chestiuni despre care mai
» REALIZARE automat? Răspunsul este dat de paginile
web dinamice, care au în spate baze de date
doreaţi să aflaţi pentru a alege cea mai bună
cale de a fi prezenţi în internet.
Fonnatarea HTML ce permit fie afişarea în pagină a informaţi-
După schiţarea machetei, următorul pas ilor la zi, fie execută căutări în arhivă. 64 Tânăr website. caut gazdă
constă în transpunerea acesteia în practică Menţinerea unei pagini web pe etern ele
folosind HTML şi CSS.
» PROGRAME plaiuri ale www-ului presupune un culcuş
sigur şi rapid în inima unui server. Iată cele
46 utilitare gratuite pentru designşi programare mai bune oferte de găzduire web, atât con-
În acest articol vă prezentăm o serie de pro- tra cost, cât şi gratuite.
CUPRINS CD
Discul ataşat acestei ediţii a revistei
CD-ul inclus poate fi utilizat În conformi-
tate cu parametrii definiţi În standardul
Philips - Yellow Book. Editura nu Îşi asumă
responsabilitatea asupra eventualelor pa-
gube provocate de utilizarea CD-ului În alţi
parametri decât cei stabiliţi În standardul
CHIP Special reflectă conţinutul menţionat anterior.
acesteia, cuprinzând aplicaţii
NOTĂ
dedicate lucrului cu paginile web. Interfaţa CD-ului CHIPSPECIALeste con-
cepută să ruleze optim pe o placă grafică
Desigur, nu puteau lipsi nici aplicaţiile
A ce suportă minim o rezoluţie de 800 x 600
m
n ăsura posibilităţilor, am încercat să destinate prelucrării grafice şi machetării.

I
şi o adâncime a culorii de 16 biţi.
vă punem la dispoziţie cât mai multe Noi am propus Gimp pentru editare şi De aceea, nu este recomandată folosirea
din instrumentele necesare aplicării XNView pentru administrarea colecţiei acesteia Într-un mediu ce nu oferă mini-
cunoştinţelor învăţate din articole. Ală- de imagini web, datorită combinaţiei de mul necesar! Interfaţa poate fi rulată atât
sub Windows 95/98/Me, cât şi sub Win-
turi de clasicele aplicaţii, v-am pregătit o viteză şi funcţionalitate care se apropie
dows NT/2000/XP.
serie de exemple către care se fac trimiteri destul de mult de soluţia Adobe, fiind Din cauza multitudinii de configuraţii, re-
din articole. Cu ajutorul acestora, veţi totodată o soluţie gratuită. dacţia CHIP SPECIALnu Îşi poate asuma
putea face teste şi veţi avea posibilitatea nici o responsabilitate În eventualitatea În
de a deprinde mai uşor tehnicile aferente care apar probleme În funcţionarea inter-
feţei şi a aplicaţiilor. Programele care au in-
fiecăruia dintre acestea. Desigur, aplicaţiile şi paginile web nece-
trat În componenţa CD-ului CHIP SPECIAL
sită servere pe care să ruleze. V -am pre- au fost testate şi selectate cu grijă În
Aplicaţii utile gătit o colecţie de pachete tip server, foar- redacţia CHIP SPECIAL.Totuşi, redacţia nu
Aveţi de ales între mai multe editoare te utile atât pentru testarea materialelor Îşi poate asuma nici o responsabilitate
avansate, dedicate programatorilor. Ma- aflate în lucru cât şi pentru publicarea pentru funcţionarea anormală a software-
ului şi nici nu poate fi făcută responsabilă
joritatea oferă suport atât pentru HTML, acestora, chiar şi de pe propriul Pc. Suita
pentru eventualele daune produse. CD-ul
XHTML, JavaScript, ASP cât şi pentru Server2Go este deosebit de atrăgătoare CHIP SPECIALa fost verificat Împotriva
limbaje mai complexe de formatare, prin numeroasele facilităţi pe care le oferă viruşilor cu următoarele programe antivi-
scripting şi programare. dar mai ales prin posibilitatea de a dis- rus (În ordine alfabetică): BitDefender Pro-
tribui o aplica ţie web fessionall0 (furnizat de Softwin), F-Secure
AntiVirus 5.51 (furnizat de Infodesign),
w~

"
._- __
.:>rc:eotlll~~O
s..wbCah:lst

~MPCL_l1TF4~~

.••.
C•.••rwwd_l!I
SG27~

••• 'fCP*>

O~<~""~-I""'-_"'-'-_.--::l
o
.
~r~3
~~-~
.1ot,'SCl..a.t __

.F<I'l"'l:I':J00i'3
o
~. '~7
~022

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

Nu în ultim ul
Kaspersky Lab Anti-Virus 6.0 (furnizat de
Kas- persky Lab - Rusia) şi PC-ciiin (furnizat
de GeCAD).
Pentru orice Întrebări legate de aplicaţiile
.·.
I !CQIa!>on
" - J1- II- J

rând, am inclus o de pe CD,vă rugăm să contactaţi telefonic,

"•.
prin fax sau prin e-mail, autorii programe-

·
~
aplica ţie gratuită
citire a fişierelor PDF,
de
lor respective.
ATENŢIEIPentru rularea corectă a inter-
alături de nepreţuitele feţei CD-ului vă recomandăm setarea unei
manuale de utilizare rezoluţii minime de 800 x 600, o adâncime
a culorii de 16 biţi şi folosirea opţiunii
pentru PHP şi
Small Fonts!
MySQL.

Impressum
Redacţia 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 redacţiei: 500010 - Braşov, str. N.D. Cocea nr.12
Adresa pentru corespondenţă:
500530 - Braşov, Oficiul Poştal 2, Căsuţa Poştală 4 Editura: Vogel Burda Communications SRL
Sediul editurii: 500010-Braşov Str. N.D. Cocea nr.12
Director General: Dan Bădescu (dan_badescu@vogelburda.ro)
Director tehnic: Daniel Dănilă-Bekesi (dan_danila@vogelburda.ro)

In Romănia: Vogel Burda Communications SRL Braşov

Redactori: Mihaela Dogaru (mihaela_dogaru@fvd.rol,Daniel Dănilă-Bekesi
(dan_danila@fvd.ro), Andrei Licherdopol (andreUicherdopol@fvd.rol In Germania: Vogel Burda Holding GmbH, Munchen,
Director: Dr. Jan Schultze

CD: Andrei Licherdopol (andreUicherdopol@fvd.ro)

Grafică, DTP: Anca BăIaş (anca_balas@fvd.ro)

Manuscrisele, hlclusiv în format electronic, expediate redacţiei devin proprietatea editurii.
Contabilitate şi administraţie: Maria Parge, Eva Szaszka (contabilitate@vogelburda.rol Editura Îşi rezervă dreptul de modificare a materialelor primite. precum şi a datei de
Financial controller: Adrian Dumitru (adrian_dumitru@vogelburda.ro) apariţie. Reproducerea integrală sau parţială a articolelor, informaţiilor sau a imaginilor
Reclamă: Cristian Pop (cristian_pop@vogelburda.rol, Leonte Mărginean apărute în revistă este permisă numai cu acordul scris al editurii. Redacţia nu îşi asumă
(Ieonte_marginean@vogelburda.ro)
răspunderea pentru greşeli şi inadvertenţe apărute în materialele colaboratorilor şi ale
Marketing: Leonte Mărginean (Ieonte_marginean@vogelburda.ro)
Distribuţie: Ioana Bădescu (ioana_badescu@vogelburda.rol, imerenţilor.
INTRODUCERE - INVATAREA CONTINUA

Realizarea unui site sau a unei simple pagini au presupus Întotdeauna acumularea anumitor cunoştinţe. Procesul
de Învăţare nu se opreşte Însă după finalizarea primului site fiindcă standardele noi, trendurile precum şi
necesităţile clienţilor determină perfecţionarea continuă. În afară de cunoştinţele de bază, trebuie avute În vedere
şi anumite aspecte secundare (browser-e, motoare de căutare), fără de care paginile sunt afişate defectuos sau
nu prea sunt accesate. Victor Gheorghe
 /'iri' ('001-

HeJp Yahoo! Rent Net is ghing away $10,000

Help Kids Dn!y 3 d§vs}.:O Cbe" r.,.1?1 l'Z:CIl:l::I ••...
yftot;J

Q ••••• ~
I 8Auto~

li!fFlnanc:e
See Virgin's
Virim ~IJthe ~s
space jet
modt'l!;oflhe fit~1
B Mo" l' M••••••• ' I 4'l •• do- I
O: Game. comm'ltlal EartMo-~;l(.e p11tl'S
~Ciroull'
•• Photol of mod.l. bwea'herl 'tilUClII IQ,lllro.COPU
erJ HoUob.

t::!M{lIlS
tr Mobile Web
'14, ~:~ty·:'.~~~::·d ",1), Plan Yaur Gelll""'.y
ti. Mo";e. .".y.tobo.u •• nbma<y
Today".TopOU1$
~I'tusjc: .n ••• l."on.h,p V.lICiltOnPaekag"·
CJ Per'llonal,
HUgeCIU'''S",~·
Hotl'!OtalsWor!dwldl
b) Real Estate ·ll\kl •••• h •••• !>df •••

O Shopplno

ti)SPQrts
• Frellch ba"k hl1byoneoftheb1gge5.lfraudslllinVltl.lllhlstoIY
.!)Tech • Mosul polree c~"., Imbushed and slam al bomb b1i'S1S,le
o Trll"el • Drought mly rateI lIUelulluetOl's 10 Ihlcul, bICk OIshul d"""",
• Analys,s Flolld, can clalll'ylhe GOP lace '2008 ,."'pao<;n PulVahool10 wOlkfor)'ou
C)TV
~ 'I'ellowPQQu
· OAuthOllhes ta~lng sleps 10 extrld~. suspect 111Marlll,'s dUlh 'a ••• dom.'n n."... 11.~"/l"~'
• Moderaleelf.reisemaydlam.lltoi!lyprOlongrrlen's!rtts : ~::I"~n~~';Q'".nd bv,ld •••.• b ." •
• o Ltdger'sIldlanc •• letums 10N~ York fOlloWIIl!l hlt dUlh
• Suptl Bowl Auttrahan Open NBA NCAA Hoopţ NHl

Small Buslness

'GetaWebSlte
Most Popul.r Ent~rt"inm.nt N.W5 VidloS
• DamalnN{lme.
'SeU Online 1011Uk81pllce
.,......Echo;onl •••
IAtt<om>_•••••••• hk h_
.,.D .
'Sean:h Ads
Pllpubr;tClIonglmes • ..,•••• ~ r•••••••..ad.,_rn
Turtl9Odysuy2 \.Pgoft'ol!! ~ldfruuatsoflf\1bnt.acllOfl w~~ •• t_"vht'-t
Futured Servicfl
ga""", <ti YI~OI Gamts Oownlo.d now .f.~ •.•••in.s.-.., •• __
·Oawnlaad.
Go 10 Y''''oot Shoppll'l9 Ind UVi Otl lne hol new slyln H_ •••"""~.b(".t11
.HlIlalth
Or. PNI de!.'*nck.tt- to ••••
Mv Yahool • Yahoohg$JlSI forY-..ld~ 9eatnce's Web Chude • Yahoo'lntemtt urt
Wtekly Plcks. Today'~ Web Evmts. Ch:al. Weathtl Forecasls VECHIVS. NOU:Aşa arăta pagina portalului de internet Yahoo! În 1997 (stânga) şi
R$Jldom Yahool Lmk· Yahoo' Shop
iată care este aspectul său actual (dreapta) .

ine lucrează în domeniul WEB de- •• pagina WEB tipică ulterioară anului 2000 bine în editorul/PC-ul propriu, va arăta

C sign-ului şi în programarea WEB a

constatat probabil deja că studiul pen-
tru acumularea de noi cunoştinţe nu se
are ca rezoluţie de referinţă 1.024x 768 (în
unele cazuri 1.152x 864 sau 1.280 x 1024),
paletă extinsă de culori, imagini mai mari
bine şi pe internet.
Din păcate, numărul de pagini nefunc-
ţionale sau defectuoase de pe internet ne
opreşte niciodată. Standardele de design, (până la 150-200 KB), toate datorate per- dovedeşte că mulţi dintre cei care folosesc
performanţele programării, CSS, HTML şi formanţelor ridicate ale browser-elor, PC- editoarele vizuale cred că acestea suplinesc
XHTML evoluează, browser-ele sunt actu- urilor şi ale legăturilor internet (lE 6/7, în totalitate noţiunile de bază.
alizate frecvent, plug-in-urile se înmulţesc, FireFox 1.5/2, Opera 9.24, monitoarelor de Un aspect important care trebuie avut în
iar clienţii cer tot mai mult. Pe măsură ce vă 17 şi 19 ţoli sau widescreen, viteze simţitor vedere la realizarea unei pagini WEB este că
cizelaţi o abilitate, descoperiţi altele noi, mărite ale conexiunilor la internet - 128, din momentul plasării paginii în internet,
care ar trebui învăţate. Internetul este un 512 sau 1.024Kb/s). Deoarece s-a pornit de aceasta trebuie să arate la fel pentru orice
fenomen tânăr, în plină dezvoltare şi nu la premisa că vitezele actuale sunt arhisufi- vizitator.
trebuie decât să ţineţi pasul cu acesta. Puteţi ciente pentru încărcarea paginilor, de Vizitatorul trebuie să poată:
constata uşor evoluţia acestuia, uitându-vă multe ori, la accesarea acestora, suntem •• folosi oricare din browser-ele dispo-
pe o pagină web proprie de acum trei sau bombardaţi de banner-e, ferestre pop-up şi nibile;
patru ani; în majoritatea cazurilor, aţi alte variante de reclame care, alături de •• utiliza orice sistem de operare;
reface-o altfel. Odată cu mărirea intervalu- multitudinea de elemente din pagină, pot Cei care se folosesc exlusiv de un editor
lui de timp la care ne referim, putem găsi duce uşor la dezorienta rea vizitatorului. vizual vor descoperi cu neplăcere că o pa-
diferenţe enorme. Pentru a exemplifica Atât paginile realizate înainte de 2000 gină WEB care arată bine în respectivul
acest lucru, am luat ca exemplu două vari- cât şi cele din momentul de faţă au un lucru program de editare, poate chiar şi în brow-
ante ale site-ului www.yahoo.com. una comun: se bazează pe versiuni ale aceluiaşi ser-ul instalat pe calculator, nu va arăta
datând din 1997 (sursa www.archive.org) limbaj. De aceea, chiar şi în condiţiile exis- deloc bine pe alt browser, iar pe un al treilea
şi alta foarte recentă, din ianuarie 2008. tenţei a numeroase editoare WEB de tip totul ar putea descoperi un haos. Aceasta
Observaţiile de mai jos sunt în mod normal WYSIWYG (what-you-see-is-what-you- numai din cauză că nu dispun de noţiunile
valabile pentru oricare dintre pagini: get), cunoaşterea acestuia, ne referim cu ajutorul cărora să modifice pagina, astfel
•• pagina de WEB tipică din anii 1995-2000 bineînţeles la HTML, este obligatorie . încât să arate la fel pentru toţi vizitatorii.
avea rezoluţia de referinţă de 800x600 (în Aceasta mai ales în contextul evoluţiei per- Să ne imaginăm un depanator de calcu-
unele cazuri chiar şi mai puţin, 640x480), o manente a internetului. latoare care se agită şi se învârte în jurul
paletă redusă de culori, imagini cât mai mici carcasei unui calculator, în speranţa că
(30-50 KB), toate datora te performanţelor HTML - prima treaptă a cunoaşterii acesta va redeveni funcţional. Cel care însă
scăzute ale browserelor, calculatoarelor şi Cu toate că pentru majoritatea începăto- demontează, depanează şi testează calcula-
ale legăturilor la internet (lE 4/5, Netscape rilor învăţarea HTML este un demers evi- torul îl poate repune uşor în funcţiune.
5/6, diagonala monitorului de 15 ţoli, mai dent, există şi anumiţi aşa-zişi "web Precum depanatorul, şi web designerul
rar 17, viteze mici de conectare la internet designeri", care, utilizând editoare WYSI- nostru trebuie să înţeleagă codul scris care
16, 32 sau 64 Kb/s). O consecinţă supără- WYG, încearcă să treacă peste această generează în browser pagina web. Dacă nu
toare a acestor aspecte era reprezentată de etapă. Neavând anumite cunoştinţe HTML puteţi detecta greşeala din pagina de web,
cantitatea redusă de informaţie pe pagină. de bază, aceştia cred că dacă o pagină arată privind-o din afară, învăţaţi HTML ca să o
INTRODUCERE - iNVATAREA CONTINUA

• 76.04% - Microson kltemet Exp/orer ~ separarea con- mult utilizatele tabele poate induce ideea că
16.80% - Fretox ţinutului de design. se va renunţa la tabele. Oare folosirea CSS
.5.59% - SSteri
Cu alte cuvinte, înseamnă dispariţia tabelelor? Evident nu.
0.60% - Netscape
0.64% - Opera CSS oferă pe de o Tabelele şi CSS nu sunt mutual exclusive.
.0.08% - Moz~a parte un conţinut Tabelele îşi păstrează locul şi importanţa
.0.19% - Altele
care reflectă struc- lor, mai ales pentru controlul datelor
BROWSERE: În topul popularităţii conduce Încă detaşat browser-ul tura logică a infor- tabelare. Utilizând însă mai pUţine tabele în
Microsoft. maţiei şi pe de altă layout, paginile se încarcă mai repede din
parte libertatea de a internet. în plus, CSS-ul oferă avantaje su-
puteţi vedea dinăuntru. XHTML încorpo- specifica exact aspectul fiecărui tag HTML; plimentare faţă de tabele. Astfel, aşa cum
rează HTML şi reprezintă calea de urmat ~ controlul eficient a seturilor de documen- am menţionat anterior, prin CSS se pot
pentru următorii ani. Internetul este plin de te complexe. Utilizarea puternicelor faci- controla culorile, plasarea imaginilor (in-
site- uri care vă oferă tutoriale gratuite pen- lităţi CSS permite designerilor controlul clusiv a celor din fundal - background
tru HTML, cel mai autorizat fiind cel de la grafic (aspect şi poziţionare) al unui număr images), dimensiunea şi aspectul margini-
W3Schools (http://www.w3schools.com). nelimitat de pagini, prin modificarea unui lor, spaţierea (padding) şi chiar alinierea
care pe lângă tutoriale vă oferă şi posi- singur document master sau a unei foi de stânga / dreapta a elementelor de bloc pen-
bilitatea testării cunoştinţelor proprii. în- stil. Modificarea aspectului şi/sau poziţio- tru o poziţionare exactă în pagina web.
cercaţi să vă dezvoltaţi abilităţile învăţând nării elementelor dintr-o pagină web se
HTML sau XHTML - rezultatul se va vedea poate realiza cu ajutorul CSS, fară să fie Aspecte software
imediat în paginile de web proprii. nevoie să vă atingeţi de codul HTML. Un Aminteam în treacăt mai sus despre afi-
alt avantaj al CSS constă în flexibilitatea sa şarea paginii în browser şi mai exact despre
CSS - O treaptă mai sus deosebită. Mai multe informaţii despre CSS posibilitatea ca aceasta să nu fie afişată co-
Cascading Style Sheets (CSS) trebuie privite găsiţi în oglinda "Rolul CSS". rect. Această problemă apare datorită dife-
ca pereche inseparabilă de HTML. CSS ofe- renţelor de interpretare a codului CSS de
ră designerilor web două avantaje impor- Tabelele· un pas înapoi? către diferite browsere. Browser-ul de in-
tante în gestionarea unor pagini web, indi- Utilizarea CSS în structurarea unei pagini ternet este programul care înţelege codifi-
ferent de complexitatea lor: web cu ajutorul elementelor de bloc faţă de carea HTML şi CSS, afişând conform cu

ROLUL CSS
Cascading Style Sheets permit controlul as- Helvetica,Arial,sans-serif' size="6" puneţi să o faceţi cât mai repede.
pectului paginii, folosind o cantitate redusă color="Nnavy"> Titlu</h1> Implementările CSS diferă de la browser la
de cod unitar la nivelul Întregului site. The - cod CSS browser. Un exemplu de implementare dife-
World Wide Web Consortium recomandă uti- h1 {text-align: right; font-size: 16pt; rită a standardului HTML este legat de
lizarea CSSÎn tandem cu HTML. font-family:Verdana, Helvetica,Arial,sans-serif; TAG-ul <body>. Dacă se doreşte plasarea
Utilizând exclusiv codul HTML,ar fi necesar color: navy} paginii web În colţul din stânga sus a ferstrei
ca atributele unui tag să fie specificate la Referinţa HTMLla regula CSSva fi: browser-ului, evitând diferenţele dintre
fiecare utilizare a acestuia. Şi mai neplăcută <h1 >Titlu</h1> _ acestea, se foloseşte:
este situaţia În care se doreşte modificarea Când se definesc aceste atribute În CSS, se <body leftmargin="O"topmargin="O"
atributelor unui tag existent. În această situ- controlează toate referinţele la <h1> din marginwidth="O"marginheight="O">
aţie, ar trebui modificate toate apariţiile tag- Întregul site cu o singură definire sau regulă Fără standardul CSS, această problemă de
ului respectiv În toate script-urile aferente (indiferent cât de complexă este structura poziţionare nu dispare. Cu CSS, aceeaşi po-
paginilor unui site. acestuia). ziţionare se realizează astfel:
Cuvântul Cascading din numele CSS sem- Exemplul precedent poate fi extins pentru body { margin: O;padding: O;}
nifică faptul că elementele subordonate situaţia când este nevoie de mai multe vari- Dar de ce este nevoie de ambele declaraţii
moştenesc proprietăţile. Toate elementele ante ale tag-ului <h1> la scrierea unor pentru atribute (margin şi padding)? Motivul
HTMLaflate Într-un element ale cărui pro- titluri folosind culorile blue, red şi green. este că browser-ele utilizează metode diferite
prietăţi au fost stabilite Într-o foaie de stil Atunci, codul CSSeste: de indentare a elementului <body>. Dacă
moştenesc proprietăţile respective. Unele h1.blue {text-align: right; font-size: 16pt; se utilizează body { padding: O; } numai
reguli pot fi contradictorii (sau pot părea ast- font-family:Verdana, Helvetica,Arial, browserul Opera (atât sub Windows cât şi sub
fel)_În acest caz, ultima regulă din cod este sans-serif; color: blue } Mac) va poziţiona corect, În stânga sus, pagi-
ce care se aplică. Precedenţa regulilor, tăria h1.red {text-align: right; font-size: 16pt; na web. Dacă se utilizează body { margin: O;}
lor poate fi Înţeleasă uşor din multele exem- font-family:Verdana, Helvetica,Arial,sans-serif; toate celelalte browsere (exceptând Opera)
ple de pe internet. În orice situaţie, folosirea color: red } vor poziţiona corect pagina web.
intensă a CSS permite reducerea semnifica- hl.green {text-align: right; font-size: 16pt; Cea mai bună cale de urmat este de a po-
tivă a timpului de realizare şi modificare a font-family:Verdana, Helvetica,Arial,sans-serif; ziţiona paginile folosind ambele atribute
unei pagini web. Totodată, CSS face codul color: reen} CSSpentru declaraţia <body>.
HTMLmai lizibil, prin eliminarea codului de Referinţele HTMLla aceste reguli CSSvor fi: E Şi dacă tot v-aţi obişnuit să lucraţi cu
stil şi structură. Un exemplu simplu de <h1 c1ass="blue"> Titlu blue</hl > style-uri, de ce să nu o faceţi când editaţi
folosire poate fi tag-ul <h1> pentru con- <h1 c1ass="red"> Titlu red</h 1> propriile documente cu editorul favorit (fie
trolul atributelor unui titlu: <h1 class="green">Titlu green</h 1> el Microsoft Word, OpenOffice Writer etc.).
- cod HTML Dacă Încă nu gestionaţi aspectul grafic al site- Editoarele moderne au incorporate mecanis-
<hl align="center"><fontface="Verdana, ului web propriu cu CSS,este bine să vă pro- mele pentru gestionarea style-urilor.
aceasta pagină de web pe ecranul utiliza-
torului. Pe măsură ce rolul CSS în web
design creşte, este necesară testarea aspec-
tului paginilor web în cele mai utilizate
browsere. Aşa cum am spus, nici un brow-
ser nu afişează perfect codul CSS, unele
1

•,~.."

.•..
-,.
Orb •••.'.rO<>t ••"04
4H1.1t""•••,.P'Wl.

:::::'~::'I
•..••••
t

având imperfecţiuni de implementare a

standardelor W3C. Diferenţele de "înţe-
legere" a codului CSSvariază de la browser I '
la browser şi un programator web trebuie """:=':::"'''1·
(lfQ~6etfl,
'lIII;ptteo'lD'.nllw
•••

să ţină cont de acestea şi nu să dea vina pe .• O::tI"'1"""

.• ~.I",
."y,~'~l.
,1.0"'''91'
~.•.•.
,1, "II~"~'
1. '=""Il
[ "'1h'ff~t"",IY4l"'"
p.w«tSlP
r. .••
••

browser. Cu alte cuvinte browser-ele, cu • ~. ~l.-?,

H'••.••I.
\1'" "," (It••rt"l ••• OU'!'-

imperfecţiuni cu tot, trebuie luate aşa cum • 6Iu.-RSSO.';,

• l~l<'k!ny h"'OU'''''tl
sunt şi construcţia paginilor web trebuie să •
•
Tl"ftl«.~r
Voeorolf,lo',O,l
rroo "A r ChIl' Speclol
PC Proctlc
r ChIp 6puclol -
PC Pr.1etlc
r Chip 6llUr:!ol
PC f'roctic
• P'''I1,r.2'),1
lonLJlIriu 2007 Docor"br!e 2006 NolorTIbrlo 2000
plece de la acestea. Scopul este acela ca
pagina web să apară corect în toate brows-
er-ele importante (cel puţin rE, FireFox şi
Opera, deoarece acestea sunt utilizate în Afl,\
tll(llllPll
a 1(> 1.1
f4lJ
proporţie de 93,6% - vezi statistica de pe un t;"fI' 4ClJm

pagina anterioară).
Majoritatea celor care navighează pe
internet utilizează Internet Explorer sau
Mozilla Firefox, cu precizarea că numărul
de utilizatori Opera este în creştere. Cu Motoare de căutare sunt în fapt baze de date masive care acope-
toate că fiecare dintre aceste ultime două Simpla realizare a lllei pagini nu este însă ră aria internetului şi constau din trei părţi:
browser-e este actualizat constant, mulţi suficientă. Astfel, respectivul site sau infor- ~ cel puţin un program numit spider sau
designeri web nu-şi actualizează periodic maţia conţinută de acesta trebuie să fie uşor crawler care "scormoneşte" internetul, fur-
versiunile propriilor pagini web. În plus, şi de găsit. Cel mai simplu mod de a găsi nizând informaţii;
sistemele de operare (Windows, Linux sau informaţia pe internet este prin interme- ~ bază de date care stochează acele infor-
Mac OS) sunt actualizate frecvent şi chiar diul unui motor de căutare. maţii;
apar versiuni noi ale acestora, faptul afec- Motoarele de căutare sunt site-uri spe- ~ instrument de căutare prin baza de date
tând şi aspectul paginilor web în browsere. ciale din cu ajutorul cărora cei care na- care selectează informaţia pe baza unor
O bună practică este aceea de a fi în legă- vigheazăpe internet găsescinformaţii despre cuvinte cheie introduse de către utilizator.
tură permanentă cu alţi designeri web (de alte site-uri sau conţinute în acestea. Deşi De regulă, rezultatul căutărilor este
dorit utilizatori de sisteme de operare există diferenţe în modul în care este căutată afişat paginat (de exemplu 10 rezultate
diferite) pentru a avea o vedere rapidă informaţia, toate motoarele de căutare exe- afişate pe ecran) pentru a evita liste lungi,
asupra modului de afişare a propriilor pagi- cută în principial trei operaţiuni de bază: greu de parcurs şi de procesat. Motoarele
ni web în cele mai diverse contexte. ~ caută în internet sau părţi ale acestuia, pe de căutare au ajuns să fie specializate şi pe
baza unor cuvinte cheie; alte categorii de informaţie decât cele cla-
• tG~;f",""",.-;o.loţ"" ••-~
~ păstrează un index al cuvintelor pe care sice. Astfel, Google oferă şi posibilitatea de
'''''''''''!.''* "'"
.,.. t.-:
fk \.4Ow

le-au găsit şi locul unde le-au găsit; a căuta imagini (grupate pe diverse dimen-
~ permit navigatorilor să caute cuvinte sau siuni). Cele mai accesate motoare de
GO"'Jgle :.. aPl'.'.tt:r~~M"."IU ::;'I··~b."''' combinaţii ale acestora în acel index. căutare diferă de la ţară la ţară şi de la an la
Web F=.~1·1'00II~,""", ••• f9 Motoarele mai vechi de căutare aveau an. La nivel global, conform unui studiu
un index care conţinea câteva sute de mii disponibil la http://marketshare.hitslink
de pagini sau documente şi răspundeau la .com, pe primul loc se află Google, cu
câteva mii de cereri zilnic. Astăzi motoarele 77,04%, urmat de Yahoo! (12,46%) şi MSN
I ~da~~
de căutare indexează sute de milioane de (3,33%) - vezi imaginea de mai jos.
er.w ••••••• ct\Ip1IlOllp Y-""'IF\IIIU c••••..•••••
'.., •...tk~.Clilţnv. "'14_:'
IaChlp SI*?"",,,,,,U.'U!fMUta~_
d''$I1 'l'
pagini, şi răspund la zeci de milioane de ce- Pentru ca unele motoarele de căutare să
~~~c IP r
eo.-.lItU~lUo.000IiItk;fl1Ct1lP~
ţ~"~i"'f!l.~1;1~·r':Yl.
'1••
,,:",",-
.rm~ah"O'JI;olU
reri de căutare zilnic. Motoarele de căutare indexeze şi să furnizeze navigatorului inter-
ţt"'l"uf.ţ.IOOr_F,..,. ••, 5h"."Mto..no Jo;'.:
••,,_,
." net informaţii des-
Ct!lf.B2..E.21:lJTl PI!N •••.ftd 1« v8'..tt: fl
'.eJ'v.,~.I""ICloOtiJIlI~Ooulle"'dlipf:!J-·""'H.lmj:;rt .•••,rc.t:J ;ţ;t~,u,,~
• 77 .04% • Google • Global pre site-uri este ne-
,
4ttp.,uu,tCI1IP c•.•.•.IlIUGlluclllCIl,P ' .•
,
Bhl'''<! CHIP_CliIP}~~
12.46%· Yahoo • Global cesar ca în secţiunea
1Il'4:'"'' '.nII" ~.e""ltfw,,, •• mprtr.~tuJ:tlIP ".~'f~QjlIllIol.t •••••• '"'tit",
'iGUU'(fo!"'<t,-aJ'I'~U4CttIPS~y.,
j '''''' _, 'f
••.••
n"
• 3.33% • MSN • Global <header> a pagi-
~
1~Ut111l1OQ ,~,:uu' GG!lllHl<U1<1\l-IJ~
me~nl.l<d~tCl1' m.Jj duC •••• c~ 'oo4l'I.1'~ Cll11' nilor web să existe o
UI.I. r~ndulW:. YOf pul" ~fttWlLt lIltlml'lencuu~ (lin ". 2.12%· AOL· Global
t""Jch'I'
descriere a site-ului
CHIP Onl!OO. BllmW.tr_T~oll:!'J.Jncefl:me ~~Lw.r • 1 .38% • Ask • Global
,I.'Il*l!II9<tt";""'Iq,_tltfllnd'dtlg.nol\l~
,no:t1.mt·~d,o)l.,,'JtI.:t\lm~'lgl
q<ln.:elhK~'"m • ..J/'Jff lI/Vrl

.0.24% . Altele
respectiv, prin in-
~"'" termediul meta
TAG-urilor.
INTRODUCERE - iNVATAREA CONTINUA

De exemplu, în meta TAG-uri se pla- cuvintelor cheie să fie făcută concis şi clar, lui, poate oferi detalii care altfel ar rămâne
sează informaţii despre domeniul de activi- evitându-se plasarea unor texte lungi. necunoscute persoanei care îl accesează. De
tate, cuvinte cheie care descriu acest dome- aceea, pentru situaţia în care un site are
niu, autor etc. Harta site-ului multe ramificaţii (nivele şi subnivele) şi
Este indicat să nu fie niciodată omise Deoarece motoarele de căutare nu oferă chiar dacă structura sa ar trebui să reiasă din
meta TAG-urile dintr-o pagină web. Deşi decât informaţii punctuale asupra unui site, organizarea meniurilor şi legăturilor, este
unele motoare de căutare nu se mai bazează adică o referinţă face legătura către un recomandată totuşi plasarea unei hărţi a
exclusiv pe meta TAG-uri, specificarea punct din structura site-ului, este greu ca site-ului în structura acestuia. Harta
setului de caractere utilizat, domeniul, cineva să aibă o privire de ansamblu asupra site-ului mai oferă informaţii şi despre acele
cuvintele cheie etc. oferă detalii importante ariei pe care o acoperă site-ul. Plasarea la pagini care nu figurează în meniuri şi per-
despre respectiva pagină web. Este de dorit vedere a unei legături către o seCţiune dis- mite o navigare uşoară direct la acele pagini
ca descrierea conţinutului, domeniului şi tinctă a site-ului, care să conţină structura care îl interesează pe cel care le accesează.

REGULI XHTML
World Wide Web Consortium (W3C) reco- XHTML 1.0 Transitional se foloseşte În situ- mai vechi HTML În XHTML, atunci TAG-
mandă utilizarea limbajului XHTML În locul aţiile când se urmăreşte realizarea unui cod urile se vor recodifica astfel:
HTML. XHTML este un limbaj hibrid, arată şi cu facilităţi HTML care să arate bine şi În <TITLE>Revista CHIP Online</TITLE>
funcţionează ca HTML, dar are la bază XML. browsere care nu Înţeleg CSS. Declaraţia de
se va scrie
Pentru cei care s-au obişnuit să utilizeze lim- tip DTD este:
<title> Revista CHIP Online </title>
bajul HTML, trecerea la XHTML este foarte <!DOCTYPEhtml PUBLIC,,-//W3C/ /DTD XHTML
uşoară.
În mod asemănător, <P> devine <P>,
1.0 Transitional/ /EN"
Utilizarea standardului XHTML 1.0 Transi-
<BODY> devine <body> şi aşa mai
,,http://www.w3.org/TR/xhtmll /DTD/ xhtmll-
tional, o versiune a XHTML care funcţio- transitional.dtd"> departe.
nează bine pe browserele actuale dar şi pe XHTML 1.0 Frameset se foloseşte În situaţiile I!lPuneţl toate atributele în
cele mai vechi (Netscape Navigator 4 şi când se urmăreşte partiţionarea ferestrei lijapostrofuri
Internet Explorer 4), permite designerilor browserului in două sau mai multe cadre. În HTML, nu este obligatoriu ca atributele
web să modifice fără probleme pagini web Declaraţia de tip DTD este: TAG-urilor să fie puse Între apostrofuri. În
deja publicate În internet dar şi să elaboreze
<!DOCTYPEhtml PUBLIC,,-//W3C//DTD XHTML XHTML aceasta devine obligatorie de exem-
pagini noi folosind aceleaşi tehnici. 1.0 Frameset//EN" plu width="55" şi nu width=55. Aplicaţi
Comutarea de la HTML tradiţional la XHTML ,,http://www.w3.org/TR/xhtmll /DTD/xhtmll- această regulă tuturor atributelor.
1.0 este la Îndemâna oricui dacă respectă frameset.dtd">
următoarele reguli simple: 1'1Toate TAG-uriletrebuie
Declaraţia de NAMESPACE urmează imediat l1li să fie închise
aceleia de DTD şi are forma:

gliDeschldeJidocumenteie
NAMESPACEadecvat
CU DOCTYPE
<html xmlns=,,http://www.w3.org/1999/xhtml''
xml:lang= "en" lang="en">
În HTML, se pot deschide TAG-uri fără ca ele să
fie Închise neapărat cu TAG-ul pereche de ex.
se poate folosi <P> şi <li> fără a le şi
Documentele XHTML (ca orice document Înlocuind TAG-ul <html >.
Închide:
HTML pot avea extensia .htm sau .html) tre- ilIE Multe pagini XHTML Încep cu un prolog
buie să Înceapă cu declaraţia DOCTYPErestul XML opţional «?xml» care precede <p>Un TAG ramas deschis.
documentului fiind identic cu unul HTML; declaraţiile DOCTYPE şi NAMESPACE. Din <p>Un paragraf fara TAG-ul pereche

<!DOCTYPEhtml PUBLIC,,-//W3C//DTD XHTML nefericire acest prolog XML cauzează pro- În XHTML, fiecare TAG, odată deschis,
1.O Strict/ /EN" bleme În unele browsere şi este recomand- trebuie să fie Închis:
,,http://www.w3.org/TR/xhtmll /DTD/xhtmll- abil să nu fie folosit. Scopul prologului este <p>Un TAG ramas deschis.</p>
strict.dtd"> de a specifica codificarea alfabetului utilizat <p>Un paragraf initial fara TAG-ul
<html> În pagina web. ereche acuma trebuie inchis.</ >
<head> Dacă intenţionaţi să construiţi o pagină care
<title>lIustrare XHTML</title> să vizeze o arie de cuprindere internaţională ",fAG-urile nepereche trebuie
</head> şi care poate conţine caractere non ASCII lijînchlse şi ele
<body> puteţi utiliza meta TAG-ul Content-type În
locul prologului XML. Exemplul următor ilus- În XHTML, chiar şi TAG-urile nepereche pre-
<p>continut</p>
cum <br> şi < img> trebuie să fie ele Înse-
</body> trează acest meta TAG:
le Închise. Aceasta se face plasând un spaţiu
</html> <meta http·equiv="Content-Type"
content="text/html ;charset=UTF-8"/>
urmat de slash /> la sfârşitul TAG-ului:
XHTML 1.0 poate specifica trei tipuri de
<br />
documente XML care corespund la trei
declaratii de tip DOCTYPE(DTD): Strict, !tScrleţl toate fAG-urile cu <img src="ojmagine.gif' />
Transitional, şi Frameset. iiicaractere mici De remarcat spaţiul care precede slash-ul.
XHTML 1.0 Strict se foloseşte În situaţiile Spre deosebire de HTML, XML face distincţie Acesta este obligatoriu pentru ca browser-
când se urmăreşte realizarea unui cod curat Între caractere mici şi majuscule. Toate ele mai vechi să poata reprezenta corect În
şi ordonat. Se foloseşte Împreună cu CSSşi TAG-urile XHTML şi atributele trebuie ecran standardul XHTML.
declaraţia de tip DTD este: scrise cu caractere mici, În caz contrar Observaţie: pentru a fi valid şi accesibil
<!DOCTYPEhtml PUBLIC,,-//W3C//DTD XHTML documentul nu se validează. Validarea TAG-ul <img> trebuie să aibă incluse atri-
1.0 Strict/ /EN" trebuie să vă asigure că pagina web nu butele alt= ,," şi title=,," forma nouă fiind:
,,http://www.w3 .org/TR/xhtmll /DTD/xhtmll- are erori. <img src="ojmagine.gif' alt="o imagine"
strict.dtd"> Dacă doriţi să modificaţi un document title="coperta CHIP"/>
 STANDARDE WEB
Designerii şi programatorii de pagini web DERANJANT: De multe ori o pagină arată
sunt puşi deseori În situaţia de a modifica de diferit În browsere diferite.
mai multe ori unele secvenţe de cod pentru a
rezolva problemele ridicate de diverse versi-
uni ale aceloraşi browsere şi a face ca o pagină
să se afişeze corect. Aceaste cerinţe provoacă
un consum de timp substanţial mărit pentru
aceeaşi pagină web. Situaţia tinde să se Înrău-
tăţească datorită utilizării masive a telefoniei 18 <tr>
mobile sau a altor dispozitive portabile ca- 19 <td>Celula<br />2-1 </td>
pabile să navigheze pe internet. Pentru a na- 20 <td><img src="table_pcpractic.jpg"
viga internet, acestea au nevoie de software border="O"/></td>
nou adecvat modului lor de funcţionare, fapt 21 <td>Celula<br />2-3</td>
care ce complică semnificativ procesul de pro- 22 </tr> dardul HTML nu precizează o valoarea impli-
gramare a unor pagini web. 23 <tr> cită pentru acest atribut. Atunci când se con-
Pentru a face internetul un loc mai bun atât 24 <td><img src="table_pcpractic.jpg" struieşte o pagină web şi se omite precizarea
pentru web designeri cât şi pentru utilizatori, border="O"/></td> valorii pentru atributul CELLSPACING,două
este extrem de important ca producătorii de 25 <td>Celula<br />3-2</td> browsere diferite vor afişa spaţieri diferite În
browsere şi programatorii să respecte cu 26 <td><img src="table_pcpraetic.jpg" jurul celulelor tabelului.
stricteţe standardele atunci când dezvoltă noi border="O"/></td> Ca rezultat apare o regulă de scriere a TAG-ului
aplicaţii. Internetul are nevoie de standarde 27 </tr> TABLE,care cere ca atributul CELLSPACINGsă
deoarece acestea asigură accesul tuturor la 28 </table> fie declarat În mod ex licit. Aşadar, secventa
aceeaşi informaţie, afişată În acelaşi fel. 29 </body> <table cellpadding="3" border="l "> .
Un exemplu des Întâlnit de interpretare difer- 30 </html>_ </table>
ită a codului HTMLeste cel al formatării spaţi- În browserele Firefox şi Opera tabelul se duce la afişarea incorectă a spaţierii celulelor
i1or. De regulă, dacă Între elemente HTML afişează corect, pe când În Internet Explorer În browsere diferite, pe când, În cazul:
sunt plasate mai multe spaţii (a nu se confun- (fie el IE7 sau IE6) nu. Astfel, la afişarea prin <table celispacing="O"cellpadding="3"
da cu caracterul &nbsp; care forţează un intermediul browserului Microsoft se observă border="l "> </table>
spaţiu În linie) acestea sunt ignorate.lnternet o dungă neagră sub imaginea din colţul tabelul va fi afişat corect, indiferent de tipul
Explorerul Însă are un comportament diferit. dreapta sus al tabelului. browser-ului.
În acest cod sursă se reprezintă un tabel care Dacă privim cu atenţie codul sursă se observă Un alt exemplu mai vechi provine din imple-
are În celule text şi imagini: ca la linia 15 din cod, după TAG-ul de imagine mentarea diferită a standard ului HTML pentru
1 <!DOCTYPEhtml PUBLIC,,-//W3C//DTD există cel puţin un spaţiu. Acesta provoacă TAG-ul BODY În browser-ele Netscape şi In-
XHTML1.0 Transitional/ /EN" mărirea nedorită a Înălţimii celulei şi apariţia ternet Explorer. Poziţionarea secţiunii BODYse
2 ,,http://www.w3 ,org/TR/xhtmI1 /DTD/ unei dungi negre (culoarea de background) face cu TOPMARGINşi LEFTMARGINÎn internet
xhtmll-transitional.dtd"> sub imagine. O altă consecinţă este că Întrea- Explorer, iar pentru Netscape se face cu MAR-
3 <html> ga linie este afectată, deci şi imaginea din GINHEIGHTşi MAR'GINWIDTH.Dacă se doreşte
4 <style> stânga sus. Pentru cineva care nu are exerci- poziţionarea corectă a paginii web În colţul din
5 td { padding: Opx; background-color: #000000; ţiul citirii codului HTML această deplasare stânga sus a ecranului pentru ambele browsere
text-align: center; poate deveni o problemă supărătoare pentru atunci TAG-ul BODYse scrie:
6 font-size:14px; color: #FFFFFF;font-weight: că o asemenea eroare se depistează greu. <body topmargin="O" leftmargin="O" margin-
bold; Acest defect de reprezentare se elimină cel height="O"marginwidth="O"> </body>
7 font-family:Verdana, Arial, Helvetica, mai simplu scriind liilfflltjMi'-iIMtffltj'mmw-lolxl Mjffit!j§lit§ţifl.i- _Io'xl
sans-serif; 1 fără spaţii de exem- fie ~<it '{.... !ia r""",,,,, !:le\> .... !ia ~
Ao .•<it '( H'"
8 </style> plu linia de cod 12 sau Addo"",I~H'IHTML~""';;'~""'-1<ml ~i ~-B_' l. l.oca6on I""""-I<ml 3 II
9 <body>
10 <table border="l ">
20.
Un alt exemplu, tipic
11ARGINHEIGHT
. ~

11 <tr> pentru modul cum

12 <td><img src="table_pcpractic.jpg" acelaşi standard, cel
'"
E<
Q
:-
H
•.
~+
border="O"/></td> de HTML, poate avea
H
13 <td>Celula<br /> 1-2</td> implementări diferite t!l

14 <td> este cel al spaţierii '"

~
15 <img src="table_pcprac:ic.jpg" border="O"/> celulelor CELLSPAC- ..:J
~"r--- [llL)!i. ~'. <i'" ,2-1 #
16 </td> ING Într-un tabel În "JlMy~
17 </tr> TAG-ul TABLE. Stan- MARGINI: Este bine să le respectaţi pentru fiecare browser.

Calea de urmat la browser, efortul de a armoniza codul şi se recomandă de câte ori realizarea site-
Indiferent de structura site-ului, publi- scris cu cerinţele specifice browserelor me- ului o reclamă. O caracteristică Java Script
cul ţintă sau domeniul acestuia, utilizarea rită facut. de reţinut este că scripturile se execută pe
XHTML este cea mai bună cale de urmat în Nu trebuie uitat că standardul pentru calculatorul clientului, caracteristică im-
realizarea de pagini web, aşa cum de fapt JavaScript face parte din construcţia portantă atunci când se doreşte desconges-
recomandă şi W3C . Pe lângă XHTML, fiecărui browser. Dat fiind faptul că imple- tionarea dialogului cu serverul internet.
W3C recomandă insistent folosirea CSS. mentarea JavaScript OS) este, cu mici ex- Dacă programatorul web stăpâneşte aceste
Chiar dacă implementarea standardelor cepţii, identică în cele mai utilizate browse- trei limbaje, XHTML, CSS şi JS, poate ataca
pentru XHTML şi CSS diferă de la browser re, folosirea de cod JS nu va ridica probleme cu succes un proiect web nou.
Scurt periplu de-a lungul
evolutiei
, browser-elor web
Programele de navigare pe internet fac parte din viaţa noastră de zi cu zi şi cu greu ne-am mai putea Închipui astăzi acti-
vitatea profesională, dar şi divertismentul after hours În lipsa acestora. Să ne uităm puţin În urmă şi să vedem care au fost
etapele de parcurs pentru ca browser-ele web să ajungă la nivelul pe care ÎI cunoaştem În zilele noastre. Mihaela Dogaru

rima etapă, a browser-elor avant la let- faptul că acest browser a introdus pe piaţă Netscape, care s-a impus ca browser co-

P tre coincide cu momentul inventării

www-ului (world wide web) în 1991.
Cel dintâi, apărut simultan aşa cum proba-
suportul pentru sunet, imagine, bookmark-
uri şi history.
merciaL În martie 1996 a fost lansată şi cea
de-a doua versiune a lui Netscape, noutăţile
în acesta fiind frame-urile şi JavaScript. La
bil aţi bănuit, avea o interfaţă exclusiv în Dictatura Netscape numai câteva luni după aceea a apărut şi
format text. Acest prim prototip (construit După Mosaic, la rampă a apărut Netscape, Netscape 3, care oferea suport pentru
de Tim Berners Lee, inventatorul www- lansat în decembrie 1994.Acesta era în fapt o aşa-numitele mouseovers (unul dintre cele
ului, împreună cu Robert Cailliau) consta versiune mult îmbunătăţită a lui Mosaic, cu mai populare şi mai răspândite scripturi
într-un browser web pentru sistemul de suport pentru conexiuni multiple Tep/IP, care face ca imaginea să se modifice uşor cu
operare NeXTStep. Deşi dispunea de o cookie-uri şi tag-ul <CENTER > . un efect plăcut atunci când utilizatorul
interfaţă grafică cu utilizatorul, la data lan- Compania mamă, Netscape Commu- trece cu mouse-ul peste ea) şi alte câteva
sării browser-ul nu putea să afişeze însă nications Corporation a cerut bani pentru caracteristici. Aceste trei browsere faceau
pagini cu fotografii încastrate. De fapt, utilizarea browser-ului său, deşi îl oferea şi legea pe piaţă în acea vreme, Netscape 3 în
acest lucru a fost posibil abia la apariţia lui gratuit unui public ţintă ales pe sprânceană, special devenind un punct de referinţă din
NCSA Mosaic, lansat în noiembrie 1993.A Cum ar fi studenţii şi profesorii. Acest punct de vedere al excelenţei. Orice alt pro-
fost un pas uriaş înainte, având în vedere lucru a ajutat enorm la popularizarea lui gram de navigare trebuia să ofere suport cel
 Iluştrii necunoscuţi
puţin pentru tot ceea ce oferea Netscape 3 navigatoare încorporau DHTML
ca să poată fi luat în serios. (Dynamic HTML), de unde modificarea Pe lângă browser-elecare au însemnat ceva pe
piaţă, universul navigării pe internet a mai
Apoi, internetul a explodat. Microsoft se CSSprin intermediul JavaScript. Pe atunci, cunoscut şi prezenţa unor iluştri necunoscuţi.
interesa de internet încă de la începuturi, standardul JavaScript de facto era o imple- Cu titlul de curiozitate, enumerăm în conti-
iar debutul marii dezvoltări a www-ului a mentare a Netscape 3, DHTML, însă, nece- nuare câţiva dintre aceştia.
facut colosul din Redmont să pună osul la sita o extensie a DOM (Document abject ~ xBBrowser ~ SpaceTime ~ Bitty
Model, adică modelul care descrie relaţia ~ SeaMonkey ~ K-Meleon
treabă pentru a recupera teren în faţa con-
curenţei. Ce înseamnă acest lucru? Simplu: elementelor dintr-o pagină HTML, cum ar
Microsoft avea nevoie de un browser. şi fi câmp urile de introducere, imaginile uri ciudate şi necunoscut pentru noii utili-
această companie a început de la o versiune paragrafele etc., cu documentul în sine). zatori de internet, Netscape 4 a început să
de Mosaic şi curând a apărut Internet Deloc surprinzător, ambii dezvoltatori au fie clistribuit cu titlu gratuit, iar banii (în
Explorer. Dacă despre lE 1 şi 2 este mai decis să extindă JavaScript pe cont propriu lipsa unei alte surse de venit) au început să
bine să nu spunem nimic, odată cu Internet şi nu au acordat atenţie eforturilor celuilalt. se termine. Ultima redută: oferirea sursei
Explorer 3 însă, Microsoft a adus pe piaţă, programului.
în august 1996,primul său browser decent. lW·hW' În general, Microsoft a luat decizii
Nu se ridica tocmai la standardele lui mult mai bune decât Netscape. Înainte de ltuJ:l:ljlldj;H:,iil Deşi lupta cea mare s-a dat
Netscape 3, dar, pentru a se revanşa, cre- toate, şi-a rescris browser-ul de la zero, ast- între cele două browsere despre care am
atorii săi l-au facut primul program de nav- fel că nu mai era limitat de chestiuni de vorbit, pe piaţă existau şi alte programe.
igare cu suport CSS,pe atunci o tehnologie drepturi asupra codului. Netscape, dim- Dintre ele, Opera s-a dovedit a fi unul din-
aproape necunoscută. potrivă, a încercat să adauge caracteristici tre cele mai importante. În primul rând,
Să ai însă un browser propriu nu în- noi codului lui Netscape 3, o decizie care suportul său CSS a fost întotdeauna exce-
seamnă mai nimic fară un marketing bun, urma să aibă consecinţe serioase. lent, iar în al doilea rând programul este
iar prima mişcare a celor de la Microsoft a În al doilea rând, implementarea foarte uşor şi de descărcat şi de rulat,
fost să pune lE gratuit la dispoziţie tuturor DHTML a celor de la Microsoft era orien- implicit foarte potrivit şi pentru utilizarea
utilizatorilor, spre deosebire de Netscape tată către web designeri şi utilizatorii cu pe sisteme mai vechi.
care impune a plata unei sume modeste ceva cunoştinţe de programare, în timp ce
pentru utilizare. Cota noului actor pe piaţa varianta Netscape se adresa cu precădere CJ:mlJ! Apoi Microsoft a lansat Internet
navigatoarelor a crescut, dar nu se apropia programatorilor pasionaţi, cărora le plă- Explorer 5, în martie 1999,şi era clar cine a
nici pe departe de cea a lui Netscape. Unii ceau structurile complicate de dragul struc- câştigat competiţia, lE 5 fiind primul navi-
ar spune că principalul motiv pentru asta turilor complicate. În plus, Internet Explo- gator cu suport pentru părţi mari ale W3C
era nivelul destul de redus de dezvoltare a rer suporta şi un element impOltant care DOM, ceea ce a adus gradul de suport CSS
programului. Utilizatorul obişnuit ştia pe lipsea din programul concurent: lE putea să la un nivel superior faţă de ceea ce putea să
vremea aceea foarte pUţine despre browser- reorganizeze pagina. Atunci când utilizaţi ofere Netscape. La polul opus, motorul lui
e, dar de numele Netscape va fi auzit destul DHTML, de exemplu, pentru a înlătura un Netscape mergea din ce în ce mai prost din
de frecvent. Dacă pe deasupra mai luăm în element HTML din pagină, toate celelalte cauza bug-urilor şi nu mai putea supravie-
considerare şi superioritatea tehnică a celui elemente ar trebui să se reorganizeze pen- ţui unui update major. Astfel, vechiul cod
din urmă, putem vedea de ce, pentru tru a ocupa spaţiul eliberat de elementul Mozilla trebuia rescris. Acesta a fost mo-
moment, dominaţia lui Netscape pe piaţa îndepărtat. mentul naşterii proiectului Mozilla (The
de profil era asigurată. Jetscape 4 a fost lansat în iunie 1997,cu Mozilla Project). A durat aproape doi ani şi
câteva luni înaintea versiunii cu acelaşi jumătate până când acesta să treacă de toate
Războiul browser-elor număr a lui lE, iar documentaţia sa a fost stadiile beta. A mai durat un an şi ceva până
Zorii confruntării între Netscape şi Micro- întotdeauna considerabil mai bună decât la apariţia lui Mozilla l.0 (2002), iar din acel
soft stăteau să se ivească. Ambele companii ceea ce oferea Microsoft. În plus, Netscape moment Mozilla Firefox a început să devi-
aveau nevoie de noi tehnologii pentru a-şi a avut întotdeauna o comunitate foarte ac- nă o alternativă viabilă pentru navigarea pe
susţine eforturile de marketing şi pentru a tivă de apărători care lui Explorer îi lipsea. net. După o versiune 4 dezastruoasă, Opera
da propriului navigator avantajul decisiv Prin urmare, la începutul acestui război al părea să fi pierdut calea ce bună, dar a re-
asupra celuilalt. Pe la fmele lui 1996, W3C, browser-elor distribuţia forţelor era în venit cu varianta 5, după care nu următoa-
pe atunci încă un factor necunoscut, şi-a mare egală, deşi Netscape încă era cu un rea, ci versiunea 7 a mai reprezentat un pas
publicat propria specificaţie CSS 1,în care a pas înainte. Dar asta urma să se schimbe. major pentru program. Surpriza începutu-
pus bazele abordării de separare a conţinu- lui de mileniu a fost nou-venitul Konque-
tului de prezentare. Devenea interesant. l!DDl1 Microsoft a avut avantajul că, spre ror, un browser independent, dezvoltat ori-
De sine stătător, CSSnu era suficient de deosebire de Netscape, facea şi altceva decât ginal pentru Linux, cu suport excelent pen-
atrăgător. Niciunul dintre ofertanţii de browsere. De exemplu, facea sisteme de tru toate tehnologiile moderne.
browser-e nu credea că nişte culori de fim- operare, şi profitabil după cum ştiţi, astfel Cam acesta a fost drumul de la primul
dai şi pentru frame-uri vor fi suficient de că banii pentru dezvoltarea unui browser browser până la versiunile actuale ale pro-
convingătoare pentru a câştiga "războiul". gratuit nu au fost niciodată o problemă. În gramelor pe care le folosim şi care ne sunt
Ambii actori au ajuns la concluzia că ar tre- plus, popularitatea SO-urilor au asigurat indispensabile pentru prezenţa în internet.
bui să fie posibilă schimbarea CSS-ului unei distribuirea facilăşi eficientă a programului Navigare plăcută şi sigură cu browser-ul
pagini web din browser în sine. Ambele de navigare. Din ce în ce mai plin de bug- dumneavoastră preferat!
Conţinutul Înaintea designului
Dacă vă propuneţi să faceţi o pagină web este bine să aveţi răspunsul la o Întrebare simplă, de genul cui se adresează
site-ul sau, altfel spus, care este publicul său ţintă? Numai după ce aveţi răspunsul la această Întrebare puteţi să vă
gândiţi la planificarea paginii web. Victor Gheorghe

F
ără alte introduceri, abordăm direct şi precizarea obiectivelor, stabilirea de imagini şi grafică, creionarea structurii
problematica şi vă prezentăm câteva cuprinsului şi pregătirea lui, culegerea şi site-ului şi a elementelor de navigare, ex-
elemente care trebuie avute în vedere structurarea informaţiilor, formularea plicitarea domeniilor vizate şi a elemente-
la planificarea unei pagini web: definirea textelor pentru web, planificarea inserării lor de pagină şi, nu în ultimul rând, com-
patibilitatea cu diferite browsere şi
Sa-uri. Toate acestea trebuie să funcţio- 1---
- - - -
neze într-un context real. De aceea, tre-
buie să fie precizate atributele paginii web
prin prisma destinatarului:
• pe cine are pagina de web în prim-plan;
• cu ce intenţie se face pagina web (infor-
mare, divertisment, educaţie, profesie);
• cu ce mijloace (grafică, imagini, culori,
sunet, video, rame, tabele);
• cu ce tehnică (a proiectantului, a clien- I
tului, programe şi variante de programe,
• -
instaIări);
• natura paginii (privată, firmă, parte
dintr-o organizaţie mai mare, furnizor de
servicii); I -. I
I

• parametrii sociali ai viitorilor naviga-

I
~ • • - • -
tori (copii, tineri, oameni maturi, pen-
sionari, nivel de pregătire);
• durata existenţei unei variante de pa-
gină web înainte de reproiectare.
hyperlink
Structura site-ului -
Şi pentru că, în mare parte, munca de
planificare presupune găsirea de răspun-
suri la cele mai variate întrebări sau nece-
- -
sităţi, continuăm cu încă o serie de
chestiuni care necesită clarificare înainte
de elaborarea structurii unui site. În Pe această schemă se pot evidenţia legă- Dezavantaje
primul rând, veţi determina ce teme vor fi turile dintre elementele structurii şi legă- -+ nu încap decât rela~iv puţine elemente
tratate pe ce pagină şi care sunt legăturile turile externe. a asemenea schemă îşi în meniu.
între paginile individuale şi cele externe dovedeşte utilitatea mai ales în situaţiile Amplasarea menlulul
site-ului. De asemenea, vă interesează ce în care un site mai vechi urmează să fie în partea din stânl)a
fel de grafică se plasează pe pagini, cu ce modificat sau reproiectat. Pe schemă se a ecranului
fonturi vor fi afişate elementele de text şi pot identifica uşor elementele de modifi- Avantaje
ce dimensiune a fontului veţi alege pe ele- cat, înlocuit sau eliminat. -+ foarte răspândit;
mentele de structură. Fără doar şi poate Având structura site-ului, se poate pre- -+ aspect optic corespunzător;
nu pot fi uitate culorile care vor intra în ciza structura meniului de navigare, care -+ permite meniuri suplimentare la mar-
designul paginilor (vezi oglinda), modali- nu trebuie să fie neapărat identică. ginea de sus a ferestrei.
tatea de asigurare a lizibilităţii informaţi- Dezavantaje
ilor, cu focus pe spaţierea elementelor în Alegera meniului adecvat -+ distanţă mare între meniu şi scrollbar;
pagină. a altă preocupare importantă Un element important în arhitectura unei -+ se printează neaspectuos pe hârtie;
apare atunci când decideţi dacă site-ul va pagini web este meniul. Meniul este cel -+ consumă mult spaţiu în fereastră.
fi construit sau nu pentru mai multe limbi care ghidează utilizatorul prin paginile Amplasarea menlulul
(există cazuri în care seturile de caractere site-ului. Structura sa trebuie să o urmă- în partea dreaptă
pentru unele limbi ridică probleme). rească pe cea logică a site-ului. Amplasa- a ecranului
Cu aceste informaţii deţinute, puteţi rea se face în funcţie de designul paginii. Avantaje
purcede la elaborarea structurii site-ului. În principiu există patru modalităţi de a -+ eficient, pentru că dis-
Aceasta se compune din documente amplasa meniul în pagină, fiecare din ele tanţa de la meniu la scrollbar este mică;
HTML ca element de bază. a structură având avantaje şi dezavantaje. -+ aspect optic corespunzător;
poate fi simplă (liniară), dar poate fi şi Amplasarea meniu lui -+ permite meniuri suplimentare la mar-
complexă, în funcţie de cerinţele site-ului. în partea de sus a ecranului ginea de sus a ferestrei.
De aceea, o regulă generală este de a face Avantaje Dezavantaje
de fiecare dată schema structurii site-ului. -+ foarte răspândit; -+ pericol ca pe ecrane cu rezoluţie mică
-+ corespunde modului să nu fie vizibil;
natural de citire (stânga-dreapta); -+ rar folosit;
-+ rămâne mult loc pentru restul infor- -+ arată neaspectuos la tipărirea pe
MENIU: Structura acestuia nu trebuie să fie maţiilor; hârtie;
identică cu a site-ului. -+ paginile pot fi tipărite uşor. -+ consumă mult spaţiu în fereastră.
 Amplasarea menlulul Sunt posibile şi aranjamente mixte ale urile şi, teoretic, paginile web proprii ar
in partea de jos a ecranului meniurilor, în funcţie de structura logică trebui să fie vizibile pe toate platformele
Avantaje a paginilor care trebuie accesate. O condi- din internet, practic site-ul în construcţie
-+ aspect optic corespun- ţie este însă obligatorie, şi anume că me- va fi vizibil numai pe majoritatea acestora
zător; niul trebuie să se integreze bine cu infor- şi nu pe toate. În principal, aceasta se
-+ paginile se tipăresc aspectuos pe hârtie; maţiile din pagină aspectul fiind unul "ae- datorează implementării diferite a stan-
-+ corespunde modului natural de citire risit". Prea multă informaţie înghesuită în dardelor HTML, respectiv XHTML. Este
(stânga-dreapta). pagină nu face decât să reducă atractivi- bine să vă orientaţi către acele sisteme de
Dezavantaje tatea acesteia. operare care sunt mai frecvent utilizate.
-+ amplasare după informaţia din pagină; MS Windows (cu variantele sale) aco-
-+ pericol ca pe ecrane cu rezoluţie mică Alegerea unui ISP peră peste 90% din calculatoarele conec-
să nu fie vizibil; Un alt aspect important legat de tate la internet. Statistica W3C oferă date
-+ rar utilizat; funcţionarea unui site se referă la anumite despre gradul de utilizare a diverselor SO-
-+ nu încap decât relativ puţine elemente chestiuni tehnice. Astfel, la momentul ter- uri.
în meniu. minării programării unui site, acesta va
Anul1007 Win XP Win1000 Win98 Vista W1003 Linux Mac
trebui plasat pe un server vizibil în inter- Decembrie 73,4% 4,7% 1,3% 6,5% 1.9% 3.5% 4.0%
Culorile HTML net. Este bine să vă alegeţi ISP-ul înainte
de a face prima machetă testabilă pentru Prin urmare, paginile web vor trebui să
Deşi internetul este plin de programe site. În acest fel, cu prima machetă elabo- fie vizibile corect pe browser-ele instala-
specializate În furnizarea codului de rată puteţi verifica cât de accesibil va fi bile preponderent pe platformele din
culoare pentru HTML şi majoritatea edi- viitorul dumneavoastră site. Fără a detalia familia MS Windows. Sunt vizate cu
toarelor HTML dispun de un asemena
varietate a de servicii pe care un ISP le precădere browser-ele IE6, IE7, Firefox şi
mecanism Încorporat, totuşi alegerea
rapidă a unei anumite nuanţe de culoare oferă clienţilor săi, câteva aspecte trebuie Opera.
se face de regulă prin Încercări. Paleta de clarificate. Primul, foarte important, este Încă o informaţie necesară înainte de a
mai jos vă oferă un mijloc rapid de viteza de acces la serverul care găzduieşte trece la programarea unei pagini web este
alegere a unei culori cât mai apropiată de site-uL Este de dorit ca timpii de acces şi cea privind ecranul de referinţă, altfel
cea dorită. Codul de culoare pentru HTML
pentru utilizatori non-DSL să fie accep- spus pe ce rezoluţie a ecranului va afişa
se specifică prin sintaxa #RRGGBB unde
RR,GG şi BB reprezintă nivelul de culoare tabili. programul de navigare pagina. O statisti-
pentru canalul respectiv de culoare. În Tabelul următor vă oferă informaţii că recentă a W3C oferă informaţiile nece-
spaţiul RGB valorile RR,GG şi BB se codi- despre diverse viteze de transfer posibil de sare stabilirii acestui parametru de proiec-
fică hexazecimal cu câte 256 de nivele
realizat: tare.
pentru fiecare canal de culoare (256',
adică 16.777.216 culori distincte). Aceas- Tipul legaturii Viteza Timpul de Viteza DSL
bit/sec. descarcare a Anul 1007 ridicata 1.014x768 800x600 640x480 necunoscuta
tă codificare a culorilor poate fi folosită În
1 MB (min:sec) Ianuarie 16% 54% 14% 0% 6%
cod HTML, XHTML şi CSS.
Modem 56 k 2:26
ISDN (1 canal) 64 k 2:0B Aşadar, folosirea unei rezoluţii de
• o00ooo • 330000 • 660000 • 990000 • ccoooo • FFOOOO
DSL light 384 k 0:22 6 x ISDN 1.024x768 pixeli va permite afişarea lor
• 003300 • 333300 • 663300 • 993300 • C0300 • FF3lO0
DSL 768 768 k 0:11 12 x ISDN
• 006600 • 336600 • 666600 996600. CC6600 • FF6600
DSL 1500 1536 k 0:06 24 x ISDN corectă pe 80%, pe când o rezoluţie de
• 009900 • 339900 • 669900 999900 CC99OO. FF9900
• ooccoo 33CCOO 66CCOO 99CCOO O O
ceccoo FFCCOO DSL 2000 2048 k 0:04 36 x ISDN 800x600 se va afişa corect pe 94% din cal-
• OOfFllO • 33FFOO 66fRJO 99FFIlO O CCFFOO O FFFFIlO DSL 3000 3072 k D:02 48 x ISDN
culatoarele conectate internet. Perioada
• ‫סס‬oo33 • 330033 • 660033 • 990033 • cc0033 • FFIlO33
• 003333 • 333333 • 663333 • 993333 • C0333 • FF3333 Un alt aspect important este legat de de referinţă fiind ianuarie 2007, este de
• 006613 • 336633 • 666633 II99663l • CC66ll • FF66ll
accesul la propriul site, plasat la ISP, pen- presupus că în ianuarie 2008 cele două
• 009933 • l39933 • 669933 99993l CC9911 FF99ll
• OOCOl • 33CC3l 66C03 O 99COl O Ccec33 O FFCOl tru modificări, actualizări sau extinderi. procente s-au modificat. Tendinţa actuală
OOff3l 33FF33 66FF33 99FFll O CCfF33 FFFF33
• 000066 • l30066 • 660066 • 990066 • CCOO66 • FFOO66
Aceste operaţiuni se pot face remote, pe este către rezoluţii mari, 1.024 x 768, dar
• 003366 • 333366 • 663366 • 993366 • =366 • FF3366 legături securizate, şi utilizarea lor va mări rămân totuşi mulţi utilizatori care au
• 006666 • 336666 • 666666 • 996666 CC6666. FF6666
• 009966 • 339966 • 669966 999966 CC9966 FF9966 viteza de punere în lucru a site-ului. Între- ecrane cu rezoluţie de 800 x 600.
• 00CC66 33CC66 66CC66 D 99CC66 O CCCC66 O FFCC66 baţi întotdeauna ISP-ul ce mecanisme de Pentru ca o pagină web să arate bine în
II 00fF66 33FF66 66FF66 O 99FF66 O CCFF66 O FFFF66
• 000099 • 3lOO99 • 660099 • 990099 • CCOO99 • FF0099 comunicare cu domeniile găzduite sunt ecranul unui browser contează şi în ce
• 003399 • 333399 • 663399 • 993399 • CC3399 • FF3399
permise pentru administrare (FTP, paletă de culori va fi afişată. Datele statis-
• 006699 • 336699 • 6666'J9 996699. CC6699 • FF6699
• 009999 • 339999 669999 999999 O CC9999 FF9999 cPanel etc.). Fără asemenea servicii, va fi tice ale W3C sunt ilustrative pentru
• 1lOCC99 • 33CC99 66CC99 O 99CC99 O cecC99 O FFCC99
00fF99 33FF99 O 66FF99 O 99FF99 O CCfF99 O FFFF99
greu ca un site să fie ţinut la zi. paletele de culori mai frecvent folosite.
• oooocc • 3300CC • 66!lOCC II 9900CC • ccoocc • FFOOCC Tendinţa actuală este către calculatoare
• 0033CC • 3333CC • 6633CC II 9933CC • COlCC • FF33CC
• 00660C • 3366CC • 6666CC 9966CC III CC66CC • FF66CC
Sistemul de operare care folosesc hardware pe 24 sau 32 biţi
•• 0099CC 3399CC D
6699CC 9999CC O O
CC99CC FF99CC Deşi la prima vedere nu ar trebui să vă pentru a afişa 16.777.216 culori diferite.
OOCCCC 33CCCC O 66CCCC O 99CCCC O ceccec O FFCCCC
OOFFCC 33FFCC O &6fFCC O 99FFCC O CCfFCC O FFFFCC intereseze, sistemul de operare al Calculatoare mai vechi şi laptopurile
• OOOOfF • 3300FF • 6000FF • 9900FF • COOOFF• FFOOFF majorităţii celor care vor accesa pagina de folosesc hardware pe 16 biţi pentru a afişa
• 003lFF • 33llFF • 66l3FF III 9933FF III C03FF • FF3lFF
• 0066FF • 3366FF • 6666FF 9966FF CC&6fF. FF66FF web poate avea un rol important în 65.536 de culori diferite.
• 0099FF • 3399FF 6699FF O 9999FF O CC99FF O FF99FF
aprecierea site-ului, dintr-un motiv foarte
IlOCCFF O 3lCCFF O 66CCfF O 99CCfF O CCCCFF O FFCCFF
lIOfFFF [J 33FFFF n 66FFFF fJ 99FFFF O CCfFFF O FFFFFF simplu: cu toate că standardele HTML şi Anul 2007 16.777.216 65.536
Ianuarie 86% 11%
XHTML sunt recunoscute de toate So-
 ~~.~~~~~-~--
..""'~---';!
._~
-:==~~~~
l~'"'~

.....
~-- ,,--.:!

Structura site-ului
Dacă până acum am vorbit la modul general despre tendinţele actuale şi planificarea site-urilor, acum
a sosit momentul să discutăm despre tema concretă a acestui special, aplicând deja câteva elemente dintre cele
prezentate anterior. Victor Gheorghe

P
roiectul ales ca temă pentru acest carea structurii unui site trebuie să ţină mentele care le definesc, tiraje, public
CHIP Special constă în realizarea cont de anumite aspecte complexe. Site-ul ţintă etc.) inclusiv site-urile acestora;
unui site al editurii în vederea pro- care trebuie realizat trebuie să fie conform - pagina de început să conţină prezenta-
movării imaginii sale în internet. Aşa cum următoarelor cerinţe: rea editurii;
am văzut în articolele anterioare, planifi- - să prezinte publicaţiile editurii (cu ele- - să fie compatibil cu browserele IE6,
 site-ul, ierarhia elementelor grafice, struc-
tura elementelor, spaţierile şi culorile. S-a
pus accent pe următoarele elemente:
- textul pentru paragrafe să aibă mări-
mea şi culoarea stabilită (s-a ales culoa-
re gri pentru că oferă un aspect mai plă-
cut faţă de negru, care prezintă un con-
trast prea puternic);
- titlurile, subtitlurile, capul de tabel şi
culoarea de fond să se asorteze cu culo-
rile logo-ului;
- pentru a marca începutul unor noi pa-
ragrafe să fie folosit un bullet făcut în
aceleaşi culori;
- s-a creat un tabel pentru a exemplifica
atributele grafice folosite (culoare, spa-
ţiere, aranjare);
- s-a preferat folosirea de culori alterna-
tive pentru fundalul liniilor tabelului
faţă de obişnuitele caroiaje pentru că
IE7, Firefox şi Opera (se vor avea în rezultatul are un aspect mai plăcut şi
vedere cele mai recente versiuni down- Având la bază cerinţele amintite anterior, permite o urmărire vizuală mai uşoară;
loadabile) pe sistemele de operare se poate trece la pasul următor, care con- - s-au creat două liste de nivell, respec-
Windows, Mac şi Linux; stă în elaborarea machetei grafice pentru tiv 2 cu caracteristici diferite, tot în
- deoarece site-ul va fi unul de informare una din paginile site-ului (de obieci pagi- scop de exemplificare.
asupra ariei de activităţi publicistice na principală). Macheta grafică (altfel Macheta poate fi rezultatul unui proces
acoperite de editură, acesta trebuia să spus o imagine statică a ceea ce dorim să iterativ în care prin sugestii şi modificări
se adreseze tuturor categoriilor de fie afişat în fereastra browser-ului) poate succesive se ajunge la varianta finală
vârstă; fi făcută cu ajutorul unui program de acceptată de către solicitant. Forma finală
- pentru fiecare publicaţie trebuie afişată grafică de tipul Adobe Photoshop, GIMP a acesteia constituie punctul de plecare al
imaginea unei coperte reprezentative sau Corel Photopaint. Se pot utiliza pen- programării.
sau un colaj de mai multe coperte; tru elaborarea unor asemenea machete şi
- dat fiind caracterul de prezentare al programe care lucrează vectorial, precum Zone
site-ului, soluţia grafică cerută se referă Corel Draw sau Adobe Illustrator. Pe machetă am definit zonele care vor fi
la înălţime fixă centrată orizontal şi Informaţia a fost formatată în machetă tratate distinct la realizarea HTML a unei
vertical în pagină: ţinând cont de cerinţe. S-au avut în vedere pagini de test. Zonele cu imagini, headerul
- header-ul de pagină să conţină logo-ul dimensiunile paginii, fixe pentru întreg şi coloana din stânga vor fi populate cu
editurii;
- printre culorile paginii să se regăsească
obligatoriu cele din logo;
- meniul să fie orizontal astfel ca butonul
fiecărei publicaţii să fie distinct;
- aranjarea informaţiei în paginile de
prezentare ale publicaţiei să fie pe co-
loane, iar cea din stânga să conţină
imaginea publicaţiei;
- coloanele să fi larg spaţiate;
- să fie folosit un font neserifat în toate
secţiunile paginii;
- rezoluţia de referinţă a ecranului să fie
de 1.024 x 768.
La cele de mai sus s-a adăugat specifi-
carea publicaţiilor care formează obiectul
site-ului: CHIP, Level, FOTO-VIDEO di-
gital, PC Practic, şi CHIP Special, precum ""88
şi cele două site-uri CHIP Online şi Level
Online. În acest fel, prin adăugarea publi-
caţiilor s-a putut fixa conţinutul meniului STRUCTURARE: Macheta trebuie Împărţită În zone, pentru a putea trece cu succes la
site-ului. programare.
 imagini de test, intrucât în aceasta fază ~ookma<b lools l!eIp

contează aspectul general al paginii şi ror ht:!p:/ltipsurn.coml

amplasarea imaginilor, facând abstracţie

de conţinut. În plus, împărţirea machetei
în zone va constitui ulterior şi ghidul pen-
tru codificarea HTML. Imaginile de test
Lorem Ipsum
vor fi înlocuite ulterior cu imaginile speci-
fice din respectivele zone. W~fIt i,' Lorelll IjN/III! W~J1IV lI'e 'Me;I!
, centrată în fereas- Lorem lpsum is simply durnrny text of the printing €Ind typesetting ~ is a 1009 establisbe.;l fact that a reader wi:!! be d!sttocted by Il)e
irtdustry. Lorem lpsum has been the indus!(y'S s1andard dummy text readable content of a p~ge wi1en !ooking at its layout. The poiot of using
tra browserului, va conţine întreaga pagi- ever sirtC€: the 1500s, when an llnknown printef tool\ a gaUey of type lorern Ipsum is IMI it has a rMre·or·less normal dis1ribution of le1tets,
and scrambled It 10 make a type specimen book.1t has survived noI 001'1 as opposed to using 'Content here, content hete', making it look lii:e
nă şi va avea dimensiunile fixe care să se five centunes, but SiS-Othe !eap iOla electronic lypeset1ing, remaining readable Engtish. Many deSktop pubbshing packages and web page
esserdially unchanged. 11was popularised in the 1960s wlth Ihe release editors now use Lorem lpsum J;iStheir detautt model text. antJ a search
încadreze în rezoluţia de 1.024 x 768. Ea of letraset sheets conlaining Lorem Ipsum passages, and more for 'Iorern ipsvm' ...•
vill uncover many web sites stiU în their in1ancy.
recently with (.ies-Ictop pUbfishing software Jike A.ldlJs PageMaker Variau:> versions have evolved over fhe years, sometimes I;ly accident.
are rolul exclusiv de a fixa conţinutul şi de includlng versions of Lorero IpSlIln sometimes on P~I(pOSe (injec1ed hllmour and lhe Jike)

. a trasa chenarul exterior. Se remarcă un w~ere t:h?" ;1comeIrom! w~ere C/f/f I flelJOme/
spaţiu exterior lăsat pe contur astfel ca as- 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
There are many variations of passages of Larern !psum available, but
the majorily have S~lffeted alletation in some fann, by injected humotrt,
2000 ve-ars old. Richard McClintock, a latin
pectul grafic să lase impresia de "aerisit". Hampden.Sydney
professor
College in Virginia, looked up one of Ihe more obscure
al 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
iram a Lorem Ipsum passage, anei going
Întrucât conţinutul paginii se va plasa latin wordS, consectetur,
through Ihe cites 01 the word in classical lilera1ure, discovered the
isn't anything embşrr-;;;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
într-un chenar interior spaţiat pe contur ~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 dictionary of aver 200 latin words, combine-d wrth a handf~ll of mode-!
sentence structures, 10 generete lorem Ipsum which looks teasDrlsble,
faţă de zona 1 este nevoie de zona 2 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 The genefatecl Lorem Ipsum is therefote always free from repe1ition,

(negru). În cadrul zonei 2 se plaseză ele- Ipsum, "larem lpsum dolar sit amet.. .•, comes from a line in section
1,10.32.
injected !)umour, or noo-characteristic words ete.

mentele paginii. Zona 3 (roşu) va conţine TM standard chunk of lorem Ipsum used since the 1500s i-s
(.' patagraphs
rwotds
reproduceci below fOr thOse in1ereste(.t sectioos 1,10.32 and 1.10.33
headerul paginii, logo-ul Vogel Burda from "de Finibus Sonor-vm el Malorurn" by Cicero are also reptoduce-d in
îb"Y1es
rlists
their exact OI19lnaJ form, acc-ompanied by EngliSh versions hom 1he
Communications. va 1914 Iranslalion by H. Rackham

conţine meniul pentru navigare. Până aici

am definit zonele care sunt comune tutu-
ror paginilor din site.
Zona 5 (albastru) va conţine detaliile va conţine informaţia propiu-zisă. În fine, întotdeauna, din start, o formă finită, pu-
pentru fiecare publicaţie. Cu alte cuvinte, zonele 8 (gri) reprezintă două coloane în teţi face apel la texte neutre care vor fi pla-
zona 5 va conţine informaţiile corespun- care se vor plasa textele, listele şi tabelele sate în pagina numai pentru a putea vedea
zătoare fiecărei publicaţii în parte, adică care descriu publicaţiile. vedea cum se "aşează" textul. Puteţi apela
se va schimba de la pagină la pagină. În la Lipsum generator, care este un site
cadrul zonei 5, aliniată la stânga, se deli- Popularea zonelor foarte util în acest scop (http://www.lip
mitează zo a 6 (verde) care va conţine Deoarece elaborarea unui site presupune sum.com).
imaginile corespunzătoare fiecărei publi- o cooperare strânsă cu solicitantul, iar in- Acest site vă oferă texte cu numărul
caţii. Zona 7 (magenta) reprezintă o formaţiile pe care acesta trebuie să le fur- specificat de cuvînte, paragrafe şi liste cu
coloană care se va împărţit în două şi care nizeze pentru a fi aşezate în pagini nu au ajutorul cărora vă puteţi popula zona de
t4!Ij[W'Mi#3#61t.]IIS. ti"i! i1 'fi' % ' e"'CWWffl@'tM ,q
f
text din pagina web până cand ajungeţi în
• I htlp;.JI_.br&:.t!)!J1el&:lf_comJ
posesia textelor finale. Pentru a obţine
textele de dimensiunile dorite, alegeţi
parametrii de generare a textelor, listelor
sau cuvintelor şi apăsaţi 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, utilizaţi procedeul
r;-l.•
u..J
copy/paste.
=::.••••..;.• 1'-""" - ro.•• 1'';' '~r',~,! ~b.:.,,\ th.
., .• "SI ."' '''''''C'"'~;:''''': .• " ·~'r,,> 'ht Un alt generator, Blindtextgenerator,
• ~ tol",j t" 't •••..•4'"' ..• )' L"'•.•.' ••
.h" ~.f.· T".
I",,··'::J I'"~" ::J f" .,'-:1 ,,' ~,~....-,.,,", fi."
(pe care îl găsiţi la http://www.blindtext
I·,~., ::J ~ generator. corn!) vă oferă o paletă mai
'I'·~" ::J r=-3
largă de opţiuni. Se pot alege texte for-
~ ~
!"" matate după necesităţile proprii în ceea ce
~ 4>1t :.",~ ot ~
~•. un-l~O;';.
~:., ~ • .'., >,
"d'
~•.••
••• ~·
L,r-~ Ilo!!" '"
t,,'cl."<;;;til)(tfOt~'
LJ' ~ r .• "''''''/1 <;.~" ••.••..•. ., l'I..-. •.•••~ ,~~
r··" .J t..':11 " .•,~;, t. wt '" II ~t .•
:.t·.~

"C ~r~~ c;~~,~~t,~ priveşte fontul utilizat, mărimea şi aspec-

••.•.• ",;. .• ".t> ."T.' ••..•'''"',,,.
-,,..,,~.•~..:,:",,.,,,
* ..~,~
"""",
..'"'~
"'..•..
" ,; .1".' "," tul acestuia, alinierea paragrafelor, înălţi-
• r ".~ .::;..•.••.•
,_. l' ,..,i' ~',l ••.~ '- t1. ~ ei"-'"

mea linei. Adiţional textului propriu-zis

(există opţiune a de selecţie pentru engleză
l: !llll!)"I1!!')11'.!!! II!""J
•• ::: '?! ~ ~::: ~ :
sau latină), se generează şi codul CSS care
poate şi el fi inclus în codul propriu. Poate
fi un exerciţiu util să generaţi texte cu
diverse formatări, astfel puteţi vedea
 - în directorul rădăcină plasăm toate fi-
eFle Edit V_ FaVOlites TooI<Heip ___ J ,. şierele HTML;
~· .-,- Sea'ch-FoIde-'-.----X--It)--O-:·-·------- - în directorul img pune fişierele care
I
Ăddre •• l.....:J F:\pagina_web_.impla

x Name
i] -
T
Go l••n~ conţin imagini, deobicei acestea au exten-
sia .jpg, gif sau .png.;
Fald •••
- -ljlllllij!lll.• illll.f!ll;.W§!I!l.-"".i!l- ..:J img File Folde, - în directorul style punem fişierele de
...)img ...).lyle File Falde,
~Cdlegolii 8 K8 Filelox Document
formatare .
...) .lyle
.!1index 8 K8 Fuelox Document Respectând aceste reguli, în funcţie de
!l••• vici 8 K8 Fuelox Document complexitatea site-ului, se poate concepe
o structură de directoare care să fie în
concordanţă cu structura logică a acestu-
ia. În acest caz, un anumit fişier corespun-
zător unui obiect aflat pe o anumită
ramură a structurii logice poate fi identi-
modul cum se aşează textul în pagină Să luăm ca exemplu un site web, ficat uşor dacă este plasat corect în struc-
funcţie de diverse atribute CSS. Codul fişierul cu numele index.html are legături tura de directoare.
CSS funcţionează identic pentru orice cu două pagini, fişierele numite cate-
browser. Practic, totul se reduce la o ope- gorii.html şi servicii.html. Pagina mai Nume de directoare
raţie copy/paste fără a mai fi nevoie să se conţine o imagine (fişierul logo.jpg) şi După finalizarea site-ului, fişierele acestu-
facă nici o intervenţie. fişierul cu formata rea (format.css), deci ia sunt publica te (plasate) pe server, pe
site-ul este compus în realitate din 5 care însă nu se află instalat neapărat sis-
Fişierele site-ului fişiere. temul de operare Windows.
Împărţirea site-ului pe zone are şi un co- Pentru a evita eventuale probleme tre-
respondent, să-i zicem aşa, fizic, repre- Convenţii buie respectate anumite reguli de scriere:
zentat de structura de directoare şi fişie- Atunci când se accesează o pagină web cu - toate numele de directoare şi fişiere se
rele aferente site-ului. Spre deosebire de ajutorul unui browser, de exemplu scriu cu litere mici. Spre deosebire de
un fişier MS Word sau OpenOffice, în http://www.vogelburda.ro. serverul web Windows, alte sisteme de operare fac dis-
care imaginile se inserează în document şi caută automat un fişier cu numele tincţie între majuscule şi minuscule. Altfel
fac parte din acesta, în cazul unei pagini index.html sau index.htm şi în cazul în spus, pot exista în acelaşi timp şi acelaşi
web, acestea sunt fişiere separa te. care îl găseşte returnează pagina brow- loc un fişier având numele scris cu majus-
Documentul HTML este de fapt un fişier serului. Acest lucru este similar cu acce- cule şi altul scris fără majuscule. Sistemul
care conţine numai text şi poate fi editat sarea directă a adresei http://www.vogel- de operare Windows nu face această dis-
cu un editor simplu de texte. Extensia burda.ro/index.html. Prin convenţie, tincţie .
.html sau .htm face ca acesta să se deose- punctul de intrare într-o pagină web este - nu folosiţi diacritice sau spaţii în nu-
bească de alte fişiere text. un fişier cu numele predefinit index, ex- mele fişierului. Folosirea de spaţii sau dia-
Un document HTML este formatat cu tensia putând diferi de la caz la caz (htm, critice în scrierea adreselor de internet
TAG-uri HTML care definesc aspectul html, php, shtml). presupune o operaţie de convertire. De
său atunci când este afişat în fereastra Deoarece chiar şi pentru pagini web exemplu, un fişier cu numele "indexul
unui browser. În fereastra browser-ului se simple în mod normal sunt folosite mai meu.html" va trebui apelat cu "indexul
afişează şi imagini, cu toate că acestea nu multe fişiere, se impune ca acestea să fie %20meu.html". Operaţia este greoaie şi
sunt con ţinute fizic în fişierul HTML. organizate într-o structură de directoare, poate fi evitată simplu nefolosind spaţii în
Acestea sunt păstrate extern şi afişarea lor de obicei după un anumit tip. numele fişierului. În ceea ce priveşte fo-
este realizată cu ajutorul TAG-ului Astfel, pentru exemplul simplu menţio- losirea diacriticelor în numele fişierelor,
<img> din documentul HTML. nat mai sus vom proceda în felul următor: acestea trebuie evitate chiar şi atunci când
lucraţi în sistemul de operare Windows.
Operaţiile ulterioare de redenumire, co-
piere sau ştergere a fişierului pot genera
erori.
index.html - folosiţi întotdeauna ,,1" în loc de ,,\".
Sistemul de operare Windows este singu-

I rul care foloseşte ca separator ,,\" back-

slash pentru delimitarea elementelor de
I I I I cale (path) pentru un fişier, celelalte sis-
teme de operare folosind ,,1" slash pentru
acest delimitator. De aceea folosiţi întot-
deauna delimitatorul normal ,,1" slash în
categorii. html servicii. html logo.jpg formatcss
scrierea unor legături, TAG-ul <a> sau
< i m 9 >, altfel pagina web va funcţiona
corect numai pe un server Windows.
 .-'"":" ~-
;;~~ ,-
.-".---...,.

" .•..•.•.
'r..• Il.,•••••••••
l' ••oh.,
0 .••.••.••.•. 100 ••.•.•••.•.•••••••••. 12.0.1.\.

:~:~~:~ .•::;;~;::: •• 2000 6.1.IZn

W •••••••••• ~ ••••••••• l~ t ••• ", ••.•ck 1.0

••.•••••• D ••••••••• ( •• I •••••.••. ,.3:J
11 •••••••• 1. •••• )/

Formatarea HTML
După schiţarea machetei, următorul
pas constă În transpunerea acesteia
În practică folosind HTMl şi CSS.
Victor Gheorghe

D
Upă ce am stabilit modul în care se Secţiunea <html> (liniile 3-150) are rel="stylesheet" type="text/css" />
partiţionează macheta, putem elabo- două secţiuni <head> liniile 4-14 şi 13:
ra o primă variantă de cod HTML (pe <body> liniile 15-149. 14: </head>
CD această variantă este reprezentată de 3: <html xmlns=''http://www.w3.org/1999/ 15: <body>
fişierul macheta-meniu-cu-css1.htm din xhtml"> <1- continut sectiune body ->
directorul surse/step-l-macheta). Înainte 4: <head> 149: </body>
de a trece la programare, reamintim fap- 5: <title>Vogel-Burda Communications: 150: </html>
tul că standardul după care se pro- </title>
gramează este XHTML 1.0. 6: <meta http-equiv="Content-Type" con- În secţiunea <head> se declară titlul
Codul CSS pereche pentru cel HTML tent="text/html; charset=iso-8859-1" /> paginii <title> (apare în manşeta de
de pe CD este listat în oglinda "Script CSS 7: <meta name="Description" sus a ferestrei precedând numele brows-
pentru machetă" (alternativ, puteţi apela content="VogeIBurda Communications - er-ului) şi meta TAG-urile pentru descri-
la fişierul vbcomm1.css din directorul Revista Chip, Level, PC Practic" /> ere pagină, cuvinte cheie, autor, titlu.
surse/step-l-macheta/style/ de pe CD). 8: <meta name="Keywords" content="vogel- La linia 12 se face legătura cu CSS-ul
În cazul machetei realizată în cod burda, vogel burda, editura, Chip, Chip extern care se găseşte în directorul style şi
HTML (ATENŢIE: numerotarea este Special, are numele vbcomm1.css. Textul CSS
folosită exclusiv pentru a uşura localiza- 9: revista Chip, revista, revista Level, PC putea fi inclus direct în corpul machetei,
rea liniilor!), documentul începe cu de- Practic, revista PC Practic" /> dar asta ar fi însemnat că respectivul cod
claraţia de tip, liniile 1-2. 10: <meta name="Authors" content="Vogel ar fi trebuit inclus în sursa fiecărei pagini
1: <!DOCTYPEhtml PUBLIC,,-//W3C/ /DTD Burda Communications" /> html a site-ului.
XHTML1.0 Transitional/ /EN" 11: <meta name="Title" content="Exemplu Includerea CSS direct în corpul docu-
2: ,,http://www.w3 .org/TR/xhtmI1 / de cod pentru prezentare" /> mentului (cu TAG-ul <script» are un
DTD/xhtmll-transitional.dtd"> 12: <Iink href="style/vbcomml.css" dezavantaj major: la orice modificare în
PRIMII PAŞI: 26: width="928" align="center">
Aşa arată 27: <tr><td><a href="index.htm"><img
pagina după src="img/macheta-header.jpg" width="928"
ce a fost 28: height="78" title="Vogel Burda
inclus titlul. Communications"
bo rde r="O"/></ a></td></tr>
29: </table><!-sfarsit tabel header ->

ZONA 4 (liniile 30-49) conţine meniul

paginii. Acesta este plasat într-un tabel,
fiecare celulă conţinând câte un element
separat al meniului. Pentru navigare, la
codul CSS, aceasta trebuie repetată pentru trecerea cursorului peste un element de
toate documentele CSS care intră în struc- meniu, acesta îşi schimbă culoarea (efect
tura site-ului. A păstra codul CSS ca script rollover).
separat permite ca o modificare să se facă ZONA 3 (liniile 24-29) defineşte header- 30: <I-inceput tabel meniu ->
o singură dată, într-un singur loc pentru ul de pagină care va conţine logo-ul. 31: <table celispacing="O" cellpadding="O"
întregul site. Este recomandabil ca toate Pentru macheta, s-a folosit imaginea style="border: 1px solid #8e9da8;"
scripturile care sunt incluse în documen- macheta-header.jpg cu dimensiunea 928 32: width="930" align="center">
tul HTML să fie plasate într-un director x 78 pixeli. Este recomandabil ca toate 33: <tr height="20">
separat, în cazul de faţă style. imaginile să fie plasate într-un director 34: <td width="l 30"
Secţiunea <body> începe la linia 15, separat, în cazul de faţă img. Se remarcă bgcolor="#BFOB34">&nbsp;<a class="menu"
dar în spatele ei se află stilul declarat în lipsa oricăror spaţii în interiorul T AG- href="index.htm">VOGEL BURDA</a></td>
scriptul CSS (vezi oglinda) la linia 1-4. De ului <td> pentru a evita aspectul schimbat 35: <td width="123" bgcolor="#02243d"
reţinut că aici se declară atât dimensiunea în browserele IE6 şi IE7. Pentru a evita class="inmenu" style="border-right: solid
marginii de sus, cât şi imaginea care va fi plasarea unui chenar în jurul imaginilor 1px #8e9da8;">
folosită ca background. machetei, în scriptul CSS s-au eliminat 36: &nbsp;<a c1ass="menu"
Documentul HTML are marcate prin chenanll, marginile şi spaţierile, toate href='Javascript: void(O)">CHIP
comentarii începuturile şi sfârşiturile fiind setate explicit la O pixeli. S-a proce- Online</a></td>
zonelor explicitate în macheta. Un co- dat astfel întrucât unele browser-e 37: <td width="69" bgcolor="#02243d"
mentariu (cod ignorat de browser) are plasează implicit un chenar în jurul imag- c1ass="inmenu" style="border-right: solid
forma unui T AG unde începutul este inilor, dacă acesta nu a fost suprimat. 1px #8e9da8;">
marcat de <!-iar sfârşitul de -> 24: <!-inceput tabel header -> 38: &nbsp;<a c1ass="menu"
Zonele sunt programate folosind două 25: <table cellspacing="O" cellpadding="O" href="javascript: void(O)">CHIP</a></td>
TAG-uri <table> şi <div>. style="border: 1px solid #8e9da8;" 39: <td width="ll 5" bgcolor="#02243d"

ZONA 1 începe la linia 17 şi se termină la

linia 147. TAG-ul <table> are stilul, care
(Ş~·I~-.~
Fie Edi v_ F-nes
••.
Toca H~ .;~-

I I
..
trasează chenarul exterior, încorporat ca
atribut. Nu s-a mai plasat în CSS deoarece
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="cen-
ter">
<!- 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 spaţiază chenarul exterior de
cel interior încorporat, cu 20 pixeli.
22: <!- inceput tabel centru interior vizibil
in toate browserele-> '-------------------------------'.:J
23: <div style="margin-top: 20px;"> 1'------------------·-----..- Il-r--,r-:r"- .IMY~~ -.~l'!l.'.'"

<!- continut zona 2 ->

REALIZARE - VAlIANTA HTML: $1 CSS

SCRIPT CSS PENTRU MACHETA

1: body {margin-top:38px; margin-bottom:O; 16: hr { border:none; border-bottom: solid 1px padding: 5px Opx Opx 5px; list-style-
margin-left:O; mar in-right:O; #cccccc; height:O x; } ty e:none;}
2: font-family:Verdana, Arial, Helvetica, 17: b, strang { color:#6D97CO; } 36: ul.spacy li { background: url( ../img/dark-
sans-serif; font-size:9pt; font-weight: normal; 18: dot.gif) norepeat Opx 4px; padding: Opx Opx
3: backg rau nd-i mage: url( ../img/mai n_bgr.jpg); 19: a.menu:link, a.menu:visited, a.menu:active, 4px 16px; }
4: } a.menu:hover { 37:
5: 20: color: #FFFFFF; text-decoration:none; } 38: img { border: O; margin: O; padding: O; }
6: .coverl { BACKGROUND-COLOR: 21 : 39:
#BFOB34;cursor: pointer;font-family: Verdana, 22: h1, h2, P { margin: 5px Opx 5px Opx} 40: td.tableRow {
Arial, sans-serif; 23: 41 : backgraund-color: #D9E9F9;
7: color: #FFFFFF; font-size:9pt; font-weight: 24: h1 {color:#6D97CO; font-size:12pt; font- 42: line-height: 16px;
normal;} weight:bold; line-hei ht:1 05%; } 43: }
8: .cout1 { BACKGROUND-COLOR: #02243d; 25: 44:
cursor: pointer;font-family: Verdana, Arial, 26: p.p.10 {margin-top:1 Opx; } 45: td.table5ec {
sans-serif; 27: p.p_5 {margin-top:5px; } 46: line-height: 16px;
9: color: #FFFFFF; font-size:9pt; font-weight: 28: p.p_3 {margin-top:3px; } 47: }
normal;} 29: 48:
10: 30: .colsplit {color: #888888; font-family: Arial, 49: td.tableHeader {
11: td.inmenu { BACKGROUND-COLOR: Verdana, Helvetica, sans-serif; text-decoration: 50: backgraund-color: #336699;
#02243d; cursor: pointer;font-family: Verdana, none} 51 : color: #FFFFFF;
Arial, sans-serif; 31 : 52: line-height: 16px;
12: color: #FFFFFF; font-size:9pt; font-weight: 32: ul.standard { margin:5px Opx 5px 5px; 53: padding: 3px;
normal;} padding: 5px Opx Opx 5px; list-style- 54: }
13: td.inmenu:hover { BACKGROUND-COLOR: type:none;} 55:
#BFOB34; cursor:pointer; font-family: Verdana, 33: ul.standard li { backgraund: url( ../img/dark- 56: #js_c1ock { font-size: 1Opx; padding:2px Opx
Arial, sans-serif; dot.gif) norepeat Opx 4px; padding: Opx Opx Opx Opx; float:left; }
14: color: #FFFFFF; font-size:9pt; font-weight: Opx 12px; } 57:
normal;} 34: 58: .c1ock_ora {font-size:1 Opx; font-style:nor-
15: 35: ul.spacy { margin:5px Opx 5px 20px; mal; padding:2px 3px Opx 5px; float:left; }

class="inmenu" style="border-right: solid #02243d; cursor: pointer; De remarcat faptul că meniul cu a-

1 px #8e9da8;"> 12: font-family: Verdana, Arial, sans-serif; tribut :hover nu funcţionează în browse-
40: &nbsp;<a c1ass="menu" color: #FFFFFF; font-size:9pt; font-weight: rul IE6. Atributul :hover în implemen-
href='javascript: void(O)">LEVEL normal;} tarea CSS pentru IE6 este ataşat exclusiv

Online</a></td> 13: td.inmenu:hover { BACKGROUND- TAG-ului <a> (anchor). Pentru a eviden-

41: <td width="73" bgcolor="#02243d" COLOR: #BFOB34; cursor: pointer; ţia pagina curent selectată, celulei respec-
class="inmenu" style="border-right: solid 14: font-family: Verdana, Arial, sans-serif; tive nu i se mai declară atributul de class,
1 px #8e9da8;"> color: #FFFFFF; font-size:9pt; font-weight: ea având în acest fel culoarea schimbată.
42: &nbsp;<a c1ass="menu" normal;} Pentru referinţa din cadrul link-ului, în
h ref="javascri pt: void(O)"> LEVEL </a></td>

43:<td width="194" bgcolor="#02243d" - ...le F\~hel:4-mer-x\l-cu.hlIn

Fie Edi: v_ F4\i'OIUs TOQkH.
c1ass="inmenu" style="border-right: solid

1 px #8e9da8;">

44: &nbsp;<a c1ass="menu"

href='javascript: void(O)">CHIP Foto-Video

Digital</a></td>

45:<td width="1 04" bgcolor="#02243d"

c1ass="inmenu" 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 tabel meniu ->

Efectul de rollover se realizează cu lini-

le 11-14 din scriptul CSS, trecerea curso-

rului peste celulă specificându-se cu aju-

torul atributului atributul :hover.

11: td.inmenu { BACKGROUND-COLOR:

celulele meniului s-a folosit instrucţiunea
javascript:void(O), care în cazul când este
selectată nu execută nimic, browserul
rămânând pe aceeaşi pagină.
De exemplu, legătura către pagina
revistei CHIP va arăta 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
până acum. Este deja necesară verificarea
cu mai multe browsere, pentru a nu
"transporta" eventualele erori în etape ul-
terioare de lucru, situaţie în care depis-
tarea acestora devine o operaţie greoaie.

ZONA 5 (liniile 51-144) este cea care

conţine informaţiile caracteristice fiecărei
publicaţii din exemplul nostru, care se
schimbă de la la o pagină la alta. Este
realizată cu TAG-ul <table>, având lă-
L===============================:J ----- -----,-.--~'.- ,,"1, .:TM;c;;;;;;. - - • ,•••••
-.J

ţimea şi înălţimea fixe de 930 x 465 pixeli.

De remarcat că are stil propriu care con-
trolează distinct liniile chenarului. ZONA 7, cuprinsă între liniile 59-143, in a doua coloana.</p>
51: <!- inceput tabel continut -> este subordonată zonei 5, are aliniere la 101 :
52: <table cellspacing="O" cellpadding="O" dreapta şi conţine descrierea propriu-zisă <!-aici se mai plaseaza restul de text
width="930" height="465" align="center" a publicaţiilor. din a doua coloana ->
53: style="border-Ieft:l px solid #8e9da8; 59: <!- inceput coloana dreapta -> 140: </td><!- sfarsit a doua parte coloana
border-right:l px solid #8e9da8; 60: <td width="689" valign="top"> dreapta ->
54: border-top:Opx solid #8e9da8; border- 61 :<!- inceput impartire coloana 141 :</tr>
bottom: 6px solid #02243d;" > dreapta -> 142:</table><!- sfarsit impartire coloana
<1- continut zona 5 -> 62: <table celispacing="O" cellpadding="30" dreapta ->
144: </tr></table><I- sfarsit tabel width="lOO%"> 143: </td><!- sfarsit coloana dreapta ->
continut -> 63: <tr>
64: <!- inceput prima parte coloana Pentru ca descrierea publicaţiilor să
ZONA 6, (liniile 56-58) este subordonată dreapta -> poată fi aşezată pe coloane, zona 7 este di-
zonei 5, are alinierea la stânga şi conţine 65: <td valign="top" width="349" vizată în două ZONE 8 cu TAG-ul
imaginea de test back-col-stg-macheta c1ass="colsplit"><h 1>Titlu pagina</h 1> <table>, liniile 62-142:
.jpg. Ulterior, aici vor fi plasate imaginile 66: <hr noshade="noshade" size="l" • cea din stânga (liniile 64-79) va fi
corespunzătoare pentru fiecare pagină a align="center" /> afişată în mijlocul paginii
site-ului. 67: • cea din dreapta (liniile 81-140) va fi
56: <!- inceput coloana stanga -> 68: <p c1ass="p_l O"><img afişată în dreapta paginii.
57: <td width="251" valign="top"><img src="img/but2.gif' hspace="5"> Text plasat Macheta astfel realizată trebuie testată
src="img/back -co I-stg-mach eta.j pg" in prima coloana.</p> în browserele IE6, lE7, Firefox şi Opera.
width="2 51 " <!-aici se mai plaseaza restul de text din Această operaţie este importantă şi tre-
height="465" title="Vogel Burda prima coloana -> buie făcută cu multă grijă, deoarece
Communications" border="O"/></td> 79: </td><I- sfarsit prima parte coloana paginile individuale ale site-ului vor fi
58: <!- sfarsit inceput coloana stanga -> dreapta -> realizate populând zonele 6 (imagine) şi 8
La testarea în browser se observă deja 80: (coloane cu descriere). Şi la această etapă
apariţia coloanei din stânga. De remarcat 81 :<!- inceput a doua parte coloana orice modificare (în special în scriptul
efectul vizual atunci când atributul "alt=" dreapta -> CSS) trebuie verificată cu browser-ele
şi/sau "title=" este prezent în TAG-ul 82:<td valign="top" width="340" class= specificate, pentru fi siguri că nu apare
<img> şi anume chenarul cu text plasat "colsplit"> vreo problemă.
deasupra barei de meniu. <I-aici se mai plaseaza restul de text in a În cazul în care nu se realizează aceste
Acest chenar este afişat atunci când doua coloana -> verificări menţionate, la apariţia unei
cursorul trece peste o imagine având acest 100: <p c1ass="p_l O"><img eventuale erori aceasta este dificil de de-
atribut setat. src="img/but2.gif' hspace="5"> Text plasat pistat.
Imaginea potrivită
După finalizarea programării machetei HTML se poate trece la includerea imaginilor şi asamblarea structurii site-ului.
În continuare, aflaţi cum se face acest lucru şi care sunt formatele de imagine care pot fi folosite. Victor Gheorghe

acă până acum ne-am folosit de

D 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ă plasăm în site imag-
inile care într-adevăr vor fi folosite.
înainte de a trece la partea de programare,
trebuie să precizăm câteva aspecte. Astfel,
în primul rând trebuie să alegem care din
cele trei formate de imagine (GIF, JPEG
sau PNG) se potriveşte cel mai bine
conţinutului imaginii. Acestea trei sunt
formatele recunoscute de HTML pentru
imagini şi fiecare are avantajele şi deza-
vantajele sale. Pentru a alege cel mai
potrivit format de imagine pentru site-ul
propriu este bine să dispuneţi de câteva
cunoştinţe 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 putând fi transparentă.
Acest format este cel mai des folosit şi a
devenit standard. GIF este alegerea opti- Calitatea imaginilor JPG este direct funcţie de tipul imaginii. Astfel, dacă do-
mă în cazul unor imagini cu puţine culori, proporţională cu mărimea fişierelor. rim includerea într-o pagină web a paletei
a unor imagini cu pete mari din aceeaşi Puteţi face încercări succesive cu progra- de culori folosită de editoare HTML (216
culoare, a textului transformat în ima- mul de prelucrat imagini, până obţineţi culori), atunci fişierele GIF şi JPG diferă
gine, de exemplu: logo-uri, butoane pen- un raport calitate/mărime fişier accept- semnificativ în mărime şi puţin calitativ.
tru navigaţie, icon-uri, background-uri abil. O altă caracteristică a imaginilor JPG Imaginea are dimensiunile 745 x 289 pi-
simple. GIF este singurul format recunos- este aceea că mărimea fişierului imagine xeli. Varianta GIF are 21,4 KB, mult mai
cut de HTML care permite anima ţii. depinde de imaginiea pe care o conţine. puţin faţă de fişierul JPG care ocupă 58,3
KB. Este evident că în acest caz formatul
IB JPEG (sau JPG - Joint Photographic IEI PNG (sau Portable etwork Gra- GIF este cel mai avantajos pentru pagina
Experts Group) este un format care poate phics) este un format care în afară de cele web. Formatul este adecvat pentru toate
reprezenta 16 milioane de culori. Oferind o 16 milioane de culori poate reda şi trans- imaginile care au mai puţin de 256 de cu-
compresie foarte mare a imaginii, acest for- parenţa (pentru o singură culoare în pro- lori.
mat se foloseşte în cazul fotografiilor, al cent de 100% sau pâna la 256 nivele de
exporturilor din diferite programe 3D, transparenţă pe pixel). Acest format ar fi
când este necesară reprezentarea imagi- trebuit să înlocuiască GIF-ul, dar încă nu
nilor cu mai mult de 256 de culori sau când a reuşit din cauza unor probleme la
se doreşte o dimensiune cât mai mică a afişarea în diferite browsere, apărute mai
fişierului imagine. ales în cazul PNG-urilor cu transparenţă.
Utilizarea formatului JPG nu este indi- Se foloseste în toate cazurile în care se
cată la reprezentarea textelor, a imaginilor poate folosi GIF-ul, dar numai atunci ...:.=J
în a căror compunere intră margini ascuţite când nu este nevoie de animaţii. GIF VS. JPG: Pentru reprezentarea
sau obiecte cu muchii conturate, a desene- în continuare, vom exemplifica folosi- imaginilor cu puţine culori, formatul GIF
lor tehnice sau a imaginilor transparente. rea corectă a formatului de imagine în este excelent.
 Pe de altă parte, dacă dorim să inclu- tA2ftff!l':M15+ ,ii.l q.'IMMBm •• Wij"jjMWfflffl§ftt!'ffl, q _IDIiI
..••.•...••
91,..I'tlP/Iloc.tloSU~~d'IDor*le.~ ------- p -
dem într-o pagină web o fotografie vom
Fie Edt V_ Favortet Toah Heb ~ •
vedea că formatele GIF şi JPG diferă mult
calitativ şi mai puţin ca mărime. Imaginea ~ VOGELBURO/\
de test are dimensiunile 300x251 pixeli. 1 COMMUNIC/\TIONS
Dacă din punctul de vedere al dimensiu-
nilor nu există diferenţe foarte mari (vari-
anta GIF are 32,5 KB, iar cea JPG 47,8
KB), nu la fel se poate spune despre cali-
tatea imaginilor.
Astfel, se poate observa că deoarece
formatul GIF forţează afişarea a maxim ::z ::~:..~~
256 de culori, pe imagine apar pete care o :=-;
fac neatrăgătoare. Pe de altă parte,
deoarece JPEG nu "taie" din culori, ramm
fiecare din obiecte îşi păstrează aspectul LEVEL
natural. În acest caz, formatul JPG va fi
preferat celui GIF, chiar dacă dimensi-
unea fişierului este mai mare. u de alta,
dar o pagină web trebuie să fie în primul
rând foarte aspectuasă, chiar dacă încăr-
carea ei în fereastra browserului durează
câteva secunde în plus.

Pregătirea imaginilor Dimensiunile mari de imagini în pagi- siunile celor două variante era nesemni-
În cazul în care veţi folosi imagini JPG tre- nile web sunt consumatoare de spaţiu şi ficativă (GIF - 12,08 KB, iar JPG 9,18 KB),
buie să ştiţi că aceste trebuie să fie în mod măresc timpul de descărcare. Puteţi evita formatul preferat a fost JPG.
RGB şi nu CMYK. Nu contează dacă ele au aceste neajunsuri folosind imagini mici, Fiecare din paginile ste-ului va avea în
fost obţinute cu o cameră digitală, prin iar pentru când se doreşte neapărat coloana din stânga câte o imaginie
scanare sau din alt document. Este bine să prezentarea unei imagini mari folosiţi reprezentativă pentru publicaţia prezen-
păstraţi originalul pentru situaţia când este scripturi. Un asemenea script îl găsiţi pe tată în acea pagină. Imaginile care
necesară modificarea imaginii. Dacă imag- CD (fişierul thumbnailviewer.js din direc- urmează a fi incluse în coloana din stânga
inile originale sunt CMYK sau alb/negru, torul surse/php-div-css-js/stylel), care a şi a paginilor trebuie să aibă dimensiunile
transformaţi-le întotdeauna RGB la fost utilizat în construcţia site-ului cu php. de 251 x 465 pixeli. Pentru prima pagină
rezoluţia de 72 dpi. Am recomandat Scriptul crează o fereastră care se afişează se foloseşte o compoziţie care conţine mai
această rezoluţie pentru imaginile pentru peste pagina web curentă şi afişează ima- multe coperte selectate din publicaţiile
web, deoarece monitorul nu poate afişa ginea dorită la dimensiuni mari. editurii. Dată fiind multitudinea de culori
decât la acest număr de pixeli per inch. cu diverse nuanţe, formatul imaginii este
Îmbunătăţirea aspectului paginii web Tema concretă tot JPG.
se poate obţine şi prin utilizarea atributu- Revenind la tema CHIP Specialului de Pagina web mai conţine o imagine, de
lui "progresiv" aplicat imaginilor. În mod faţă, după ce am creat structura site-ului o natură mai specială, şi anume un
uzual, operaţia de afişare a unei imagini, şi am realizat codul HTML, putem trece la "shortcut icon" care de regulă conţine
fie ea JPG sau GIF, este echivalentă cu o introducerea imaginilor. Ca primă ima- logo-ul. Această imagine care are dimen-
scanare de sus în jos. Utilizând atributul gine ne referim la cea comună fiecărei siuni 16 x 16 pixeli se face de obicei în
progresiv este ca şi cum am împărţi ima- pagini, şi anume header-ul (fişierul câteva culori contrastante. Imaginea va
ginea în mai multe scanări succesive. vbcomm-header.jpg). Aşa cum rezultă apărea în fereastra browser-ului în linia
Prima scanare afişează imaginea la echi- din macheta paginii, imaginea trebuie să de adresă înaintea URL-ului, precum şi în
valentul unei calitatăţi reduse, scanările aibă dimensiunile de 928 x 78 pixeli. secţiunea bookmark-urilor, în cazul în
ulterioare îmbunătăţind gradual calitatea
primei scanări. Formatul JPG poate fi fo-
losit cu atributul progresiv, pentru imagi-
[,. care adresa web a fost memorată acolo.
Pentru ca un shortcut icon să fie afişat
corect nu se foloseşte TAG-ul <img>, ci
nile GIF efectul progresiv fiind realizat de Deşi aparent imaginea headerului TAG-ul <link>. Pentru cazul machetei
un mecanism asemănător numit întreţe- conţine puţine culori şi la prima vedere noastre instrucţiunea va fi:
sere (interlaced). GIF-ul ar fi fost formatul cel mai potrivit, <Iink rel="shortcut icon"
Prin utilizarea imaginilor cu efect pro- la o analiză mai atentă observăm însă că href="img/vbcomm.ico" />,_. _
gresiv se obţine o afişare rapidă a unei pa- imaginea conţine efectul de gradient pe Cu această din urmă instrucţiune pu-
gini web, fără a mai aştepta descărcarea toată înălţimea, ceea ce înseamnă că are o tem spune că site-ul nostru a fost garnisit
completă a imaginilor, mai ales când aces- mulţime de nuanţe intermediare pentru cu toate imaginile necesare şi putem trece
tea au dimensiuni mari. culori. Deoarece diferenţa între dimen- la finalizarea lui.
 •• • Un site este o constructie, arborescentă realizată cu fisiere
.htm sau .html. Acestea trebuie stocate Într-o structură
.

alina I
de directoare care păstrează logica site-ului. Un fişier din
această structură este asociat cu fişiere externe pentru
elemente care intră În construcţia sa (imagini, scripturi
etc.). Plasarea fiecărui tip de fişier la locul potrivit
simplifică finalizarea site-ului. Victor Gheorghe

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

.....::~:.
- '.

:.•.:;:'.".l! .•••••
.r";»~l::
 ornind de la macheta cu imagini

P (care se găseşte în directorul Istep-3-

imaginii de pe CD) se poate progra-
ma HTML fiecare pagină a site-ului.
Back •
View Favoriles

1;, Search
TooIs

r
Help

F= T
Întrucât vor rezulta multe fişiere, aşa cum Addtess 1
s-a precizat deja, va fi nevoie ca să le orga- r~oIdeIs _ download

nizăm într-o structură clară de directoare - W ftiMlI!ifflllillţif!ijii!!jI!Aiiiiiiiii;'. -------:-, img

style
funcţie de tip. ..) download
..) img
Astfel se creează trei subdirectoare:
....J st~le
imgl (care va conţine imaginile GIF, JPG
sau PNG); stylel - (care va conţine scrip- STRUCTURĂ: Pentru această variantă de realizare, structura de directoare este relativ simplă.
turile - CSS, JS sau HTC) şi Idownload (cu
fişierele care pot fi descărcate). Acest momentul în care se face clic pe o aseme- -+ chipfoto.htm pentru revista FOTO-
ultim director s-a creat deoarece, pentru o nea legătură, browser-ul constată că nu VIDEO digital.
serie de publicaţii ale editurii Vogel Burda este vorba de un fişier HTML, care ar -+ pcpractic.htm pentru revista PC
Communications, informaţii, supli- urma să fie afişat în fereastra proprie, şi PRACTIC.
mentare celor con ţinute în pagina web, deschide o fereastră în care se specifică în -+ chipspecial.htm pentru revista CHIP
pot fi obţinute din documente care pot fi ce fel se doreşte să se facă descărcarea Special.
descărcate de pe site. De regulă, asemenea fişierului respectiv (în ecran sau pe hard
fişiere adiţionale se pregătesc în formatele disk) . Dacă macheta a fost realizată bine, în
.pdf (portable document format introdus sensul că elementele CSS acoperă toate
de Adobe în programele Acrobat), .ppt Elemente de personalizare necesităţile de formatare, atunci pentru
(formatul utilizat de programul MS În structura de directoare astfel creată se fiecare efect se face apel la numele stilului.
Power Point ) sau .doc (formatul utilizat încarcă fişierele pregătite, imaginile, Dacă însă a scăpat ceva, atunci se com-
de programul MS Word). Operaţia de scriptul CSS şi documentele .pdf. Fiecare pletează scriptul CSS cu efectul dorit. Nu
descărcare se poate face pentru conside- fişier se încarcă în directorul corespunză- uitaţi să închideţi fiecare din tag-urile
rabil mai multe tipuri de fişiere decât tor. De menţionat ar mai fi faptul că deschise. Pentru a crea un aspect vizual
acestea, dar pentru site-ul în lucru nu s-au fişierul /style/vbcomm2.css este identic cu plăcut, este bine ca textele să fie plasate în
avut în vedere decât acestea trei. Pentru cel folosit la crearea machetei HTML. A paragrafe distincte şi acestea să fie spaţi-
descărcare, în paginile web respective se fost redenumit pentru a evita ca acelaşi ate. Nu folosiţi culori tari care să con-
includ legături către aceste fişiere. În nume de fişier să apară de mai multe ori trasteze prea puternic cu cele din designul
- ....) htmJ.table·css·js peCD. iniţial, altfel spus !imitaţi-vă la culorile
download În forma finală a machetei se com- acestuia. Dacă se doreşte utilizarea ani-
CHIP Compute' ~ Communications 2007 pletează elementele care personalizează maţiei, să o faceţi cu zgârcenie. Deşi acest
~ Foto_Video_Dig;a1~2007 -
LEVEL_Games_HW_~_L~estyle_2007 primul fişier, index.htm, asociat primului tip de efecte este modern şi de dorit, prea
~ PC_P,actic_2006 buton VOGEL BURDA. Înainte de a lucra multă animaţie pe pagină distrage atenţia
- ....) img
efectiv la index.htm este prudent ca o cititorului de la mesajul conţinut în text.
back·col·stanga
blenk copie a machetei să fie păstrată şi separat. De fiecare dată când aţi introdus elemente
but2 Aceste elemente sunt: noi verificaţi dacă aspectul paginii este
chip·,
chip·foto
-+ primul buton din meniu care trebuie acelaşi în toate browser-ele vizate. Dacă
chip·online·' setat pe culoarea de selecţie pentru a arăta nu, faceţi corecturile necesare în codul
chip·special care din cele opt pagini este afişată in HTML sau CSS. În cazul în care se doreşte
da<kdot
gel3dobe_,eade, ecran. Chiar dacă veţi folosi un titlu de introducerea de imagini suplimentare în
level·' pagină introdus ca text, în zona 8 stânga, zonele 8, nu uitaţi că aveţi spaţiu fix la dis-
level'on~ne-' este bine ca butonul să fie selectat. poziţie (s-a plecat de la cerinţa ca site-ul
main_bgr
pc-p,actic -+ legătura la fişierul extern care conţine să fie de înălţime fixă, pentru a evita
,eddot imaginea din coloana stângă, back-col- folosirea scrollbar-ului vertical). Nu a-
vbcomm
vbcomm·heade,
stanga.jpg. dăugaţi efecte în pagină dacă nu v-au fost
-' ....) style -+ plasarea textului care va popula zona 7 cerute.
vbcomm2 în cele două coloane (zonele 8) şi for- După ce toate cele opt fişiere au fost
.!l chip matarea lui HTML.
.:!1 chipfoto finalizate se ajunge la structura de fişiere
.!lchipon!ine Plecând de la aceeaşi machetă, în mod din figură.
:!l chipspecial similar se procedează cu fişierele: Varianta completă cu toate fişierele si
.!l index
.!1level -+ chiponline.htm pentru site-ul CHIP subdirectoarele se găseşte în directorul
<!1 levelonline Online (http://www.chip.rol). (lhtml- table-css-j si).
\~ PCptactic
-+ chip.htm pentru revista CHIP. În figura care arată structura des-
FIŞIERE: Nici numărul de fişiere nu este -+ levelonline.htm pentru site-ul făşurată a site-ului nu sunt afişate extensi-
foarte mare, site-ul fiind totuşi destul de (http://www.level.rol) . ile fişierelor, în locul acestora fiind fo-
simplu. -+ level.htm pentru revista LEVEL losite icon-uri.
Mai rapid pe aceeaşi cale
Odată cu vitezele de acces la internet, şi dimensiunile documentelor HTMLtind să crească, datorită creşterii complexităţii
paginilor web. Acest lucru se traduce În mod normal prin cod mai mult, respectiv fişier mai mare. Există Însă posibilitatea
optimizării codului, fără a renunţa Însă la funcţionalitatea crescută a paginii web. Victor Gheorghe
CSS sau J avaScript, secvenţe

U
n aspect pe care fiecare programator scripturi componenta afişată în fereastra browser-
HTML trebuie să-I aibă permanent în video sau audio etc.). Totalizând aceste ului). Codul CSS asociat butoanelor
vedere se referă la mărimea fişierului componente putem vedea că se poate meniului este:
HTML obţinut. Uneori, fişierele HTML ajunge la o cantitate substanţial mărită de td.inmenu { background-color: #02243d;
pot ajunge la sute de linii de cod, având date, astfel încât cele câteva secunde să nu cursor: pointer; font-family: Verdana, Arial,
astfel o mărime considerabilă. De multe fie suficiente pentru afişare în fereastra sans-serif; color: #FFFFFF; font-size:9pt;
ori se pune accentul numai pe complexi- browser-ului. font-weight: normal;} td.inmenu:hover {
tatea paginii şi este lăsat deoparte un În macheta realizată în articolul anteri- background-color: #BFOB34; cursor: point-
aspect şi mai important: cel care navi- 0r meniul are opt butoane. Să privim mai er; font-family: Verdana, Arial, sans-serif;
ghează pe internet este mereu grăbit, nu atent codul pentru unul din aceste bu- color: #FFFFFF; font-size:9pt; font-weight:
are răbdare să aştepte decât preţ de câteva toane: normal;}
secunde. Dacă în acest interval de timp <td width=,,69" bgcolor=,,#02243d" Se poate observa uşor că atributul style
pagina solicitată nu s-a încărcat în brows- c1ass="inmenu" style="border-right: solid din codul HTML poate fi transferat în
er, el trece mai departe. Deci, cu cât mă- 1px #8e9da8;"> &nbsp;<a c1ass="menu" codul CSS.
rimea fişierelor HTML este mai mică, cu href=,javascri pt: void(O)">CHIP<[a></td> După modificare codul HTML va fi:
atât pagina solicitată va fi mai repede Observăm că atributul style (care tra- <td width=,,69" bgcolor=,,#02243d"
afişată în fereastra browser-ului. sează o linie verticală la sfârşitul butonu- class="inmenu"> &nbsp;<a c1ass="menu"
Să nu uităm încă un aspect suplimen- lui) se repetă pentru fiecare buton. href=,javascript: void(O)">CHIP</a></td>
tar: pentru a fi afişat corect în fereastra Pe de altă parte, fiecare buton al iar cel CSS va fi:
browser-ului, un fişier HTML apelează şi meniului foloseşte acelaşi stil specificat cu td.inmenu { background-color: #02243d;
alte fişiere externe legate de el (imagini, atributul class="inmenu" (mai puţin cursor: pointer; font-family: Verdana, Arial,
sans-serif; color: #FFFFFF; font-size:9pt; EROARE: Fără
font-weight: normal; border-right: solid 1 px folosirea unui
#8e9da8;} td.inmenu:hover { backgroun9- artificiu, pagina
color: #BFOB34; cursor: pointer; font-fami- curentă nu ar fi
IV: Verdana, Arial, sans-serif; color: fost semnalizată
#FFFFFF; font-size:9pt; font-weight: normal; În lE 6.
border-right: solid 1 px #8e9da8;}
Deoarece meniul (ne referim de fapt
secţiunea respectivă din codul sursă)
există în fiecare fişier HTML al site-ului,
scurtarea codului va fi făcută în fiecare
dintre acestea. Este indicat ca de fiecare
dată când este posibil să transferaţi cât
mai mult cod în scripturile externe, chiar color: #FFFFFF; font-size:9pt; font-weight: solid 1 px #8e9da8;} .coutl { background-
dacă operaţiunea este consumatoare de normal; border-right: solid 1 px #8e9da8;} color: #02243d; cursor: pointer; font-fami-
timp, deoarece acest lucru creşte viteza de Prin intermediul liniilor de mai sus se IV: Verdana, Arial, sans-serif; color:
execuţie a paginilor web. realizează efectul de rollover în browser- #FFFFFF; font-size:9pt; font-weight: normal;
ele IE?, Firefox şi Opera, care însă nu este border-right: solid 1 px #8e9da8;}
Meniul fără probleme vizibil în IE6. Acestea descriu stilul pentru butoane
Dacă formatarea textului unui document Codul nu are efect de rollover în IE6 .c_overl pentru aspectul butonului la
HTML este relativ simplă, realizarea unui din cauza modului de implementare al selecţie şi .c_out1 pentru buton neselectat.
meniu care să funcţioneze corect pe toate standardului CSS. În codul HTML, pentru a specifica un
browser-ele poate ridica probleme. Să Browserele IE versiunea 6 şi cele ante- buton vom folosi:
luăm ca exemplu unul dintre butoanele rioare nu suportă :hover în CSS (cu <td width=" 1 04" bgcolor=,,#02243d"
meniului nostru (codul HTML şi CSS excepţia legăturilor, T AG-ul <a». Acest onMouseOver="this.c1assName='coverl ';"
pentru machetă se găseşte în directorul nejuns poate fi evitat prin folosirea Java onMouseOut="this.c1assName='coutl '" >
surse\step-l-macheta de pe CD-ul ataşat Script-urilor OS), pe cel puţin două căi: &nbsp;<a c1ass="menu" href=,javascript:
revistei): -+ făcând apel la evenimentele OnMouse- void(O)">PC Practic</a></td>
<td width=,,?3" bgcolor=,,#02243d" Over şi OnMouseOut concomitent cu cod Se observă că pentru evenimentul
c1ass="inmenu"> CSS - calea mai simplă; OnMouseOver aspectul butonului va fi
&nbsp;<a c1ass="menu" href=,javascript: -+ incluzînd în codul HTML un script dat de codul CSS .coverl, iar pentru
void(O)">LEVEL </ a></td> csshover.htc care poate fi descărcat de la evenimentul OnMouseOut acesta va fi dat
care se execută împreună cu codul CSS: adresa http://snipplr.com/view/1912/ de .coutl. Cu aceste câteva linii în
td.inmenu { background-color: #02243d; internet-explorer-ie6-css-hover/ - calea HTML şi CSS s-a realizat efectul de roll-
cursor: pointer; font-familv: Verdana, Arial, mai complicată. over independent de browser-ul pe care
sans-serif; color: #FFFFFF; font-size:9pt; Scriptul csshover.htc face ca IE6 să se afişează.
font-weight: normal; border-right: solid 1px funcţioneze cu :hover nu numai pentru
#8e9da8;} td.inmenu:hover { background- legături, lucru posibil deoarece imple- Cod îmbunătăţit
color: #BFOB34; cursor: pointer; font-fami- mentarea Java Script în diverse browser-e Prin compactarea codului şi crearea unui
IV: Verdana, Arial, sans-serif; este aceeaşi, cu mici excepţii. meniu funcţional pe toate browser-ele se
Pentru a face ca obţine o varianta îmbunătăţită a machetei
meniul să funcţioneze
p. (în directorul surse\step-2-macheta de pe
'-loD ".··.·'~·~1
••. • corect şi în browserul CD). Aceasta poate fi considerată drept o
IE6 şi versiunile IE variantă îmbunătăţită, ce poate fi folosită
anterioare, am conce- pentru realizarea întregului site.
put o alternativă la Întrucât în Java Script s-au scris multe
acesta având la bază o scripturi utile care pot fi găsite în internet
combinaţie CSS şi şi încorporate în codul HTML propriu, în
Java Script. macheta îmbunătăţită am inclus un
În scriptul CSS exemplu. Astfel, în coloana din dreapta
sunt inserate liniile: am inserat un ceas digital care arată ora de
.coverl { background- pe calculatorul celui care accesează pagi-
color: #BFOB34; cursor: na. Scriptul va însoţi pagina web indife-
pointer; font-familv: rent de modul în care a fost încorporat,
Verdana, Arial, prin includere în corpul codului HTML
sans-serif; sau printr-o legătură.
~ color: #FFFFFF;font- Reţineţi că scripturile Java Script se
rrrrr~ ••
_ 1'.'" . size:9pt; font-weight: execută întotdeauna pe calculatorul clien-
MACHETA FINALA: Aşa arată varianta Îmbunătăţită a machetei. normal; border-right: tului.
Aceeaşi temă, altă realizare
o alternativă la pagina web structurată cu ajutorul tabelelor este reprezentată de împărţirea prin intermediul
diviziunilor. În articolul de faţă vă prezentăm modul de realizare a temei noastre cu ajutorul diviziunilor.
Victor Gheorghe
n subiect larg dezbătut pe forumurile nile actuale (arie de acoperire şi cantitate (oricând posibilă) de genul conţinutului

U celor preocupaţi de HTML este cel

privind modul cum se declară struc-
tura unei pagini web. De la început păre-
de informaţie) ale site-ului, programarea
cu tabele sau diviziuni produce diferenţe
de timpi de acces nesemnificative. Se
paginilor, a numărului de imagini sau
chiar a structurii site-ului pot crea proble-
me, în cazul în care acestea nu au fost pre-
rile au fost împărţie între adepţii tabelelor poate spune că site-ul structurat cu tabele văzute. Motivul este simplu şi rezidă în
şi cei ai diviziunilor. Cu toate că se pare că răspunde cerinţelor formulate. În realitate structura rigidă a tabelelor. De aceea este
balanţa preferinţelor începe să se încline însă site-urile au mult mai multă infor- util să vedem cum se poate realiza un site
în favoarea diviziunilor, tot mai utilizate maţie pe fiecare pagină, iar structurarea utilizând în loc de tabele diviziuni. Pentru
la paginile noi, folosirea tabelelor are încă acestora prin intermediul tabelelor poate simplificare se va folosi aceeaşi temă.
mulţi adepţi, motiv pentru care am şi crea neajunsuri. Dacă în faza de realizare
prezentat-o anterior. neajunsurile nu sunt imediat vizibile, Diviziuni
Plecând de la aceeaşi machetă grafică după plasarea site-ului pe un server, aces- Pe machetă se vor defini diviziunile care
se poate realiza acelaşi site, urmând însă tea sunt resimţite imediat. Un site este urmează să fie tratate distinct la realizarea
altă cale în programare. Pentru dimensiu- ceva în continuă schimbare, o modificare cu HTML şi CSS a site-ului (acestea le
găsiţi în directorul surselhtml-div-css-js/
de pe CD-ul ataşat revistei). Întrucât
fiecare diviziune are un stil propriu
definit în scriptul CSS (fişierul vbcomm.
css din directorul surse/html-div-css-js/)
diviziunile se vor marca cu numele din
acest script. De fapt pentru această vari-
antă de realizare aspectul paginii afişate
în fereastra browser-ului se controlează
din scriptul CSS.
I~He"U$.rs
După marcarea diviziunilor pe mache- Th •• ItOl'fU oftha
nptln.dth'9·.,··nd.I·9·n~of T.io;e .d",,,n\bge of
tă aceasta arată ca în imaginea de mai jos. Jculptorf ••• o··y.·
c.leb •.•ted w.lk,.ng
•.dolph •• W.' ••M.n'.
Libe<ty ..•
.ddlt!Ql'lal servlCes
"l'Id prlvil.;.,.

Primul element formatat CSS este

Pr;ce: '$31.95 Ma,,,; '"fo.
reprezentat chiar de secţiunea <body> Produtl "fiU b. "ell.ble fQrlhlppi",
041/u/700a

din codul HTML. În spatele acestui TAG II:.\l Add Il) C .• rt P::l Add tl) W,sh

stă o formatare cu mai multe atribute care It', 2008, .Jld the l' very •• (Ilecl to 1"011
out .nother '1e.r of am.ling productJ! We hope thls n."" ,e.,
descriu aspectul general al unei pagini. 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'!
Punctul de plecare în programarea site-
Our Llltest Collectibles
ului este secţiunea <body>, şi pentru că
în CSS proprietăţile se moştenesc, TAG- I~~.O:'Q.I l~~:d I~~:~:d
ul superior în ierarhie, <htm 1> , va avea
aceeaşi formatare. TABELE: Varianta cu tabele necesită Încărcarea completă a site-ului Înainte de a putea modifica
html, body {color:#02243d; behavior: informaţiile conţinute.
url(csshover. htc); font-fam ily:Verdana,
Arial, Helvetica, sans-serif; background- Trebuie remarcat că linia CSS pentru explicit ca în HTML, dar, având marginile
image: url(../img/main_bgr.jpg); back- această diviziune începe cu # şi nu cu cu atributul margin:auto se rezolvă uşor
ground-color:#FFCC80; background-repeat: punct, aşa cum procedasem anterior. problema centrării, deoarece "auto" se
repeat;background-position: top left; mar- Diferenţa constă în modul cum se ape- traduce prin stabilirea unor margini egale
gin: Opx; padding: Opx;} lează în codul HTML, dar priveşte şi în stânga şi dreapta. DeCi pe orice moni-
Cu ajutorul acestei singure linii de cod modul de funcţionare. Dacă a fost ,,#" tor, cu orice rezoluţie, browser-ul va afişa
se stabilesc imaginea pentru fundal, ca- atunci în HTML se codifică <div o pagină centrată orizontal.
racteristicile fontului de bază, poziţia în id="wrap"> şi dacă a fost "." se codifică Prima diviziune subordonată "wrap"
pagină, marginile şi spaţierea la margini. <div class="wrap">, deosebirea dintre este "header".
Următoarea diviziune #wrap (în engle- aceste două moduri de formatare con- #header {margin: auto; width:928px;
ză wrap are înţelesul de înveliş) va conţine stând în modul cum se folosesc în codul height:78px; /* asa se poate introduce un
de fapt întreg site-ul. HTML. Elementele cu formatare prin "id" comentariu În cod CSS */ border: 1px solid
#Wrap {margin: auto; width:968px; bor- se folosesc o singură dată pe când cele cu #8e9da8; margin-top:20px; }
der: 1px solid #002f2f; background-color: "class" de fiecare dată când este nevoie. Această diviziune are lăţimea tot de
#FFFFFF; margin-top: 20px; margin-bottom: Această diviziune trasează chenarul 928 pixeli, cu marginea de sus de 20 pi-
10px;} exterior şi fixează marginile acestuia faţă xeli, cu chenar şi înălţimea de 78 pixeli
de laturile su- (exact înălţimea imaginii pentru logo,
- •.......~ I~r'-ad>el. __ '"

na [<ii ••••••• r~ TOCIIr HeO

P perioară şi inferi-
. fişierul vbcomm-header.jpg). Şi această
bV~C~ "" . u ••. ••••. ,...... oară ale ferestrei diviziune este centrată orizontal prin
lV
browser-ului. fixarea marginilor cu "auto" (implică
logo Marginea inferi- margini egale).
oară nu are efect Pentru plasarea imaginii în secţiunea
menucomamer
L.:~ :::::::-~
'~~C'::~~ vizibil în toate "header" se include în aceasta o nouă
comem Iside1 container ~ browser-ele. De diviziune "logo" care rezervă un spaţiu de
I s;'le mr. b textleft textright aceea, în unele 78 pixeli pe înălţime pentru imagine
browsere chena- forţând alinierea la stânga (imaginea
rul va apărea ca având lăţimea de 928 pixeli se va aşeza
fiind lipit de mar- bine în diviziune).
ginea de jos a fer- #Iogo {height:78px; float:left; }

lDj .:J
estrei. Totodată se
fixează lăţimea
paginii la 928 pi-
xeli. În CSS nu
#header a img {border:none; }
Deoarece, la includerea în pagină, ima-
ginile au un chenar pe care browserul îl
aplică implicit, ani mai adăugat o linie în
'.""". există atribut pen- script care să forţeze suprimarea chenaru-
tru centrare lui pentru acestea.
 Diviziuni vs. tabele
Pentru a Înţelege mai bine aspectele legate struită cu diviziuni este Level Online De multe ori se folosesc imagini plasate În
de modurile de a programa structura unei http://www.level.ro/(alternativ vă puteţi fundalul elementelor unui tabel, lucru care
pagini web este bine să detaliem câteva uita şi la adresa http://shopper.cnet.com/). În HTMLse realizează rin:
puncte care le diferenţiază. Astfel, tabelele Pentru a aprecia care este cantitatea de cod ba_~ground=~'fl:l~~~ir _
(TAG-ul <table» sunt obiecte fixe a căror scrisă pentru o pagină a site-ului Level Dar aici apare şi limita HTML: pentru a evita
poziţie aproape că nu poate fi influenţată. Pe Online uitaţi-vă la sursă (poate fi vizualizată efectul de repetare (tiling) trebuie ca dimen-
de altă parte, diviziunile (TAG-ul <div» de orice browser). Aceeaşi pagină realizată siunile imaginii să fie aceleaşi cu ale celulei.
permit realizarea unui design mult mai flexi- cu tabele ar fi necesitat mai mult timp pen- În cazul CSS, controlul aspectului este mult
bil. Înainte de a detalia aceste aspecte tre- tru afişare În fereastra browserului. mai riguros. Astfel, se poate plasa o imagine
buie să mai menţionăm un lucru important: Pentru a compara diviziunile cu tabelele de fundal Într-o diviziune şi se poate evita
deşi toate browserele reprezintă identic ta- vom lua ca prim aspect poziţionarea. re etarea ei:
belele, există diferenţe Între ele la modul de Poziţionarea cu ajutorul diviziunii se rea- style="background-image: url(fundal.gif); back-
Încărcare a unei pagini web. lizează repede fie folosind cod HTML şi CSS ground-repeat: no-re eat"
O pagină web construită Într-un tabel nu În acelaşi fişier: Dacă se doreşte acest lucru se poate specifi-
poate fi afişată În browserele Internet <div style="position: absolute; width: 100px; ca repetarea numai e orizontală:
Explorer anterioare lui IE7, decât după ce tot height: 55px; top: 150px; lefi: 80px; back- style="background-image: url(fundal.gif); back-
conţinutul tabelului a fost recepţionat. Altfel ground-color: #000099; border: none"></div> ground-re eat: repeat-x"
spus, În fereastra browserului nu se afişează fie separând codul În două fişiere (.htm şi sau numai e verticală
nimic până nu a fost descărcat din internet .css) style="background-image: url(fundal.gif); back-
Întreg conţinutul tabelului. Cu cât pagina •.• cod HTML: ground-repeat: repeat-y"
web este mai complexă, cu mai multe nivele <div c1ass="exem lu"></div_> _ Imaginea oate fi centrată:
de imbricare a elementelor, cu atât Întâr- •.• cod CSS: style="background-image: url(fundal.gif); back-
zierea de afişare În fereastra browser-ului, .exemplu {"position: absolute; width: 100px; ground-repeat: no-repeat; background-position:
provocată de reprezentarea În tabele a codu- height: 55px; top: 150px; lefi: 80px; back- cente r"
--- - - - ---
lui HTML, va fi mai mare. ground-color: #000099; border: none"} sau poziţia ei poate fi controlată pe verticală
Dacă navigând aveţi senzaţia că browser-ul Cu ajutorul codului CSS se formatează divi- (top-sus, middle-mijloc, bottom-jos) sau pe
s-a blocat, uitaţi-vă la bara de progres, iar ziunea. Atributul position: absolute Înseam- orizontală (Iefi-stânga, center-centru, right-
dacă aceasta este animată, nu vă rămâne nă că diviziunea nu se leagă de nici un alt dreapta). De exemplu poziţionarea stânga
decât să aveţi răbdare. De multe ori cauza element din pagină, spre deosebire de tabele sus se face cu:
unor asemenea manifestări poate fi o pag- unde Întotdeauna conţinutul este legat de b~~~!:9und-position: left center
ină web realizată cu tabele, mai ales atunci celula (TAG-ul <td» În care este plasat. În plus, chenarul, marginile şi spaţierea faţă
când este apelată prin intermediul unei Diviziunea are o Înălţime de SS pixeli, lăţime de margini sunt controlabile pentru fiecare
conexiuni mai lente. Desigur că şi de 100 pixeli, culoarea albastră şi se găseşte diviziune, pe când la tabele acestea sunt
proiectanţii paginilor web caută să reme- la lS0 pixeli distanţă de marginea de sus şi defintie o dată pentru Întreg tabelul.
dieze acest neajuns, prin afişarea rând după 80 de pixeli de marginea din stânga, fără Trebuie totuşi menţionat că abilitatea pro-
rând a tabelului (TAG-ul <tr». Cu toate chenar. gramării cu diviziuni se dobândeşte mai
acestea, Întârzierea este sesizabilă. Dacă se specifică position: relative atunci greu şi presupune exerciţiu. Aceasta este
Alternativ, o pagină web construită cu divi- aceleaşi atribute se raportează la elementul influenţată de experienţa În domeniu şi tre-
ziuni şi având acelaşi conţinut se Încarcă din pagină căruia diviziunea Îi este subordo- buie adaptată la comportamentul diferit al
semnificativ mai repede. Browser-ele afişea- nată. Dacă plasăm diviziunea În celula unui browserelor.
ză diviziuni le aproape instantaneu deoarece tabel, atunci toate distanţele se raportează Nu considerăm că utilizarea tabelelor tre-
pentru aceasta nu este nevoie ca Întreg la marginile celulei. buie evitată, ele Îşi menţin rolul pentru care
conţinutul lor să fi fost descărcat. Afişarea Diviziunea are o proprietate importantă numi- au fost create, acela de a reprezenta date
unei diviziuni necesită numai ca structura sa tă vizibilitate (vizibilă sau invizibilă), pe care nu tabelar. Însă utilizarea lor excesivă În ges-
să fi fost definită anterior. o Întâlnim la tabele. Aceasta poate fi de forma tionarea structurii paginilor web nu este
Un exemplu de pagină web complexă con- visibility: hidden sau visibility: visible. Întotdeauna cea mai indicată.

înainte de a deschide diviziunea "me- <ul style="width:123px;"><!- deschide #menu a { color: #FFFFFF; background:
nucontainer" se închid diviziunile "logo" şi butonul pentru CHIP online -> #02243d; text-decoration: none; border-
cea căreia îi este subordonată, "header". <Ii><a c1ass="firstpage" href= width: 1px Opx 1px Opx;
Diviziunea "menucontainer" conţine "chiponline.htm">CHIP Online</a></Ii> border-style: solid; border-color:#d7f5c9
meniul. </ul><I- Închide butonul pentru CHIP #d7f5c9 #d7f5c9 #d7f5c9; border-
#menucontainer {width:930px; back- online -> top:none; } #menu a.firstpage { color:
ground-color:#02243d; margin: auto;} TAG-urile <u 1 > şi < 1 i > folosite pen- #ffffff; background: #02243d; text-decora-
Acesta este declarat pe mai multe linii tru definirea unui buton fiind subordo- tion: none; border-width: Opx 1px 1 px
de cod toate începând cu ,,#menu". nate diviziunii "menu" vor moşteni Opx; border-style: solid; border-color:
Codul HTML pentru cele două divi- atributele acesteia. #455e70 #8e9da8 #476f85 #1 5344b; }
ziuni este: #menu ul {Iist-style: none; margin: O; #menu a.firstpage_current { background-
<div id="menucontainer"><I- deschide padding: O; width: 133px; float:left; } color: #BFOB34; border-width: Opx 1px 1px
containerul meniu lui -> #menu a { font-size: 0.8em; display: block; Opx; border-style: solid; border-color:
<div id="menu"> <1- deschide meniul -> border-width: Opx 1px 1px Opx; border- #e25e3e #8e9da8 #e25e3f #ffffOO; }
De fapt, meniul este o listă neordonată style: solid;border-color: #455e70 #8e9da8 #menu a:hover, #menu a.firstpage:hover {
motiv pentru care în HTML un buton al #476f85 #1 5344b; margin: Opx; padding: color: #FFFFFF; background:#BFOB34; bor-
meniului se descrie astfel: 2px 3px; } der-bottom: solid 1px #BFOB34; }
 !
Ip1i! gramării HTML
@-. Jhf-~l'''''''~
Rr<<lI:_r_I_~

~' "v.,...a..<loe-..- ..•... :il••••..•• este aceea că tre-

buie ştiut exact
câte TAG-uri
<div> mai sunt
deschise.
Pentru a plasa
informaţiile strict
legate de publi-
caţii în pagină se
foloseşte divizi-
unea "container".
Aceasta va avea
- ~~=-=~-~'-'-~ '::=-:::::'::,,,,';'! subordonate alte
ÎN PAŞI: CU diviziunile declarate pagina din exemplul nostru ÎN PAŞI: ... iar după alte câteva diviziuni avem deja şi imagini trei diviziuni
arată aşa ... şi coloane "text", "textleft"
şi "textrigh t" .
#menu li {position: relative;} 1 la 8, corespondenţa fiind următoarea: 1 #container {width658px; height:464px;
Singurul atribut nedeclarat în CSS este este atribuit butonului "Vogel Burda", 2 border-bottom:Opx solid #9facb5; f1oat:left; }
lăţimea butonului care diferă de la un pentru "Chip Online", 3 pentru "Chip" #text { height:465px; width:640px;
buton la altul. De aceea, acest atribut se etc. Elementul care se schimbă în această padding-left:20px; padding-right: 1Opx;
specifică în codul HTML. Toate celelalte diviziune este imaginea din fundal, care font-size:O. 7em;
atribute, marginile, spaţierile, culorile evident este alta pentru fiecare pagină. overflow:auto; font-weight:normal; line-
pentru text şi fundal, sunt codificate CSS Pentru pagina care descrie publicaţia height: 120%; c1ear:both; }
atât pentru :hover, cât şi pentru lipsa aces- "Chip Special" coloana din stânga se #textleft {width:300px; font-weight:nor-
tuia. declară astfel: mal; line-height:11 0%; float:left; text-
Se remarcă descrierea separată a aspec- #lside8 {width:251 px; height:465px; align:left; color: #888888; }
tului butonului paginii curente "first- backg rou nd-image: url(../i mg/ ch ip- #textright {width:300px;
page_current", care trebuie să fie selectat special.jpg); border-right: 1px solid font-weight:normal; line-height:11 0%;
(cu culoare schimbată) atunci când în fer- #8e9da8; float:right; text-align:left; color #888888; }
eastra browserului este afişată respectiva border-Ieft: 1px solid #8e9da8; float:left; A fost necesară introducerea diviziunii
pagină. font-size:O.7em; } "text" pentru a avea controlul spaţierii
Cu diviziunile declarate până în acest Se observă că URL-ul specifică ima- faţă de marginea din dreapta a coloanei
moment fereastra browserului va afişa ginea din fişierul chip-special.jpg. din stânga, cea care conţine imaginea. În
pagina cu meniul (vezi imaginea de mai Prin plasarea imaginii în fundalul fine, cele două diviziuni "textleft" şi "text-
sus). diviziunii este posibil ca desupra să mai right" de lăţime egală vor conţine infor-
Pentru suprimarea proprietăţii float: se poată fi inserată informaţie, de exemplu maţiile propriu-zise, cu tot ce presupune
foloseşte codul HTML (float: realizează text. Acest text va apărea în pagină peste aceasta, de exemplu un tabel declarat ast-
alinierea conţinutului fie la stânga, fie la imagine, o asemenea construcţie per- fel:
dreapta): miţând realizarea de efecte. td.tableRow { background-color: #EBFl F3;
<br style="c1ear:both;" /> În acest scop s-au prevăzut două divi- line-height: 18px; }
altfel diviziunile care urmează moştenesc ziuni "lside_innecbox" şi "saying" cu td.tableSec { line-height: 18px; }
acest atribut şi aspectul devine unul ajutorul cărora se pot realiza efectele, td.tableHeader { background-color:
descentrat. imaginea rămânând fixă în fundal. #336699; color: #FFFFFF; line-height: 18px;
Diviziunea "content" conţine infor- Coloana din stânga se închide cu padding 3px; }
maţia care se schimbă de la o pagină la TAG-uri de sfârşit de diviziune pentru După închiderea diviziunilor "textleft"
alta: fiecare din cele trei (lsidex, lside_innec şi "textright" trebuie suprimate atributele
#content { position:relative; width:928px; box şi saying). float: left respectiv right şi trebuie închise
height:465px; border-bottom:6px solid Cu diviziunile declarate până în acest diviziunile "content" şi "wrap" şi secţiu-
#02243d; moment, fereastra browser-ului va afişa nile <body> ~ <html>.
border-right: 1px solid #8e9da8; border- pentru fiecare dintre publicaţii o coloană Ca şi primă concluzie a acestei alterna-
left: 1px solid #8e9da8; border-top:none; în stânga, care conţine o imagine. tive observăm faptul că în varianta pro-
margin: auto; } Trebuie remarcat că diviziunile "wrap" gramării cu diviziuni codul este mai com-
Aceasta are linie de chenar numai pe la- şi "content" sunt încă deschise. Plasarea, pact ceea ce este un argument în plus în
terale, înălţimea şi lăţimea acestuia fiind din greşeală a unui TAG de închidere sprijinul acestei maniere de formatare a
fixe, de 465 şi respectiv 928 pixeli. Şi această </div> suplimentar ar avea ca efect unei pagini web.
diviziune este centrată (margin:auto). stricarea aşezării paginii în fereastra În fereastra browser-ului paginile arată
Coloana din stânga se defineşte cu browser-ului. O regulă de care trebuie să identic cu cele realizate cu tabele, iar struc-
diviziunea "lsidex", unde x ia valori de la se ţină cont în fiecare moment al pro- tura de fişiere este la rândul ei identică_
 ite
Doriţi să măriţi performanţa site-ului propriu? Doriţi ca acesta să vă reprezinte mai bine prin includerea celor mai noi
informaţii? Răspunsul la aceste Întrebări poate fi găsit uşor cunoscând şi alte limbaje de programare În afara c1a-
sicelor HTML, ess şi JS. Utilizarea scripturilor PHP În construcţia ultimei variante a site-ului nostru prezentată În acest
articol este cel mai bun exemplu În acest sens. Victor Gheorghe
A
narticolele anterioare am reuşit să de înălţime fixă, ci de înălţime variabilă. include o coloană care va conţine (funcţie

I creăm două variante de site care să co-

respundă cerinţelor iniţiale ale temei.
Ce e de facut însă în cazul în care la un
înălţimea paginii va fi corelată cu canti-
tatea de informaţie din pagina respectivă;
-+ pagina de început va conţine imagini
de cerinţe) titlul paginii, elemente de na-
vigare către alte pagini, logourile publica-
ţiilor, legături la articole reprezentative
moment dat se constată că varianta finală ale celor mai recente apariţii ale publicaţi- publicate şi online, legături la elemente
trebuie întregită cu noi funcţionalităţi, ilor editurii; care pot fi descărcate. Pe prima pagină în
care iniţial nu fuseseră luate în calcul? De -+ descrierea evoluţiei publicaţiilor, pre- coloana din dreapta se vor include clasa-
multe ori, mai ales dacă funcţionalităţile cum şi datele despre firmă se vor muta mentele Top 10 pentru cele mai noi pro-
noi afectează structura existentă, site-ul într-o nouă pagină "Despre noi" care se duse testate;
trebuie reprogramat. Din fericire porţiuni va adăuga meniului; -+ deoarece imaginea care conţine logoul

întregi din codul existent se pot prelua în -+ datele privind modalităţile de con- firmei este prea statică se doreşte ca fie-
noua variantă, redu când timpul de finali- tactare a firmei şi alte date utile parteneri- care pagină să conţină pe lângă logo şi o
zare. lor Vogel Burda se vor afişa intr-o pagină imagine asociată reprezentativă pentru
Păstrând stilul grafic al machetei exis- separată "Contact"care se adaugă ca ultim conţinutul paginii respective;
tente, să presupunem că s-au adăugat noi element în meniu; -+ se va schimba structura meniului prin

cerinţe la cele iniţiale ale temei CHIP -+ descrierea publicaţiilor nu se va mai organizarea sa pe nivele ierarhice. Publi-
Special-ului de faţă. Acestea sunt urmă- face pe două coloane, ci pe o singură caţiile aparţinînd aceleiaşi familii se vor
toarele: coloană care trebuie să fie mai Iată; grupa în acelaşi bloc din meniu;
-+ formatul paginii site-ului să nu mai fie -+ la marginea din dreapta a paginii se va -+ articolele reprezentative pentru o re-
vistă, care se publică online, se vor aşeza
î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 posi-

bilitatea afişării suplimentare şi a unei va-
riante mărite;
-+ sub imaginea plasată în coloana din
stânga, în funcţie de spaţiu, se vor plasa
ştiri de actualitate, anunţuri şi oferte le-
gate de tematica paginii respective;
-+ se va avea în vedere posibilitatea adău-
gării ulterioare a unor funcţii dinamice,
prin includerea de informaţii provenind
din baza de date a firmei
Analizând noile cerinţe, constatăm că
nu se poate realiza un asemenea site
numai cu HTML, CSS şi JS. CU aceste lim- ~"lT':i:l
baje nu se pot scrie scripturi care să se
execute pe un server, şi cu atât mai puţin
~
ca acestea să aibă acces la o bază de date LEVEL
pentru a face căutări. De aceea, trebuie
ales un limbaj de tip server scripting.
Am optat pentru PHP şi datorită
răspândirii sale deosebite. PHP este un "middlexcept.ine.php" pentru acele pa- este acelaşi pentru toate fişierele HTML.
limbaj de programare a scripturilor care gini care conţin articole. La aceste pagini, O cerinţă actuală este cea care impune ca
este potrivit pentru dezvoltare web şi care coloana din dreapta nu există, aşadar fiecare header de pagină să conţină o altă
poate fi încorporat în HTML. Scripturile layout-ul are o coloană în minus. imagine, deci şi această cerinţă se adaugă
PHP se execută pe server, detaliile privind • secţiunea "coloana din dreapta" aferen- la lista anterioară a excepţiior.
modul de comunicare între client şi server tă zonei 5; Prin folosirea de variabile PHP decla-
le puteţi găsi în oglinda "Serverul web • secţiune a "footer", fişierul "footer.ine. rate la începutul fiecărei pagini se poate
privit de aproape". Limbajul PHP mai are php". crea independenţa headerului de pagina
un avantaj important faţă de HTML: Secţiunea "header" conţine elemente din site în care este afişat. Să privim cum
poate să includă secvenţe de cod, repeti- care se schimbă de la pagină la pagină. În se realizează aceasta în scriptul
tive de la pagină la pagină, fără a fi principiu codul este acelaşi, numai că "index.php" (fiind cel care se accesează
neapărat necesar ca acestea să facă parte pentru fiecare pagină se vor încărca ele- implicit, acesta va avea numele index, ca
din corpul scriptului. Operaţia de inclu- mentele specifice acesteia: imaginea din şi în cazul HTML, cu deosebirea că exten-
dere având loc pe server, clientul nu va zona 1, butonul din zona 2 şi imaginea sia trebuie să fie .php pentru ca serverul să
putea şti, şi de fapt nici nu trebuie să ştie, din zona 3. Această încărcare selectivă se ştie cum să-I trateze). Scriptul
cum s-a asamblat codul pe care îl primeş- gestionează cu variabile PHP. "index.php" are stilul plasat în fişierul
te. Să aruncăm o privire asupra codului "vbcomm.css" din sub directorul style.
Această variantă se găseşte pe CD în HTML din scriptul folosit în realizarea Scriptul începe cu:
directorul surse/php-div-css-jsl. Varianta "header" -ului, fişierul "header.ine.php", <7php
conţine două structuri care se conlucrează din directorul surselphp-div-css-jslincl: $seet = ,,1";
una cu cealaltă: <!OOCTYPEhtml PUBLIC,,-1 /W3C/ /OTO $subseet = ,,1";
-+ cea cu diviziuni, care descrie layout-ul XHTML1.0 Transitional/ /EN" $title = ,,";
paginii, asemănătoare cu versiunea ante- ,,http://www.w3.org/TR/xhtmll /OTO/xhtml inciude("i ne/header. ine. ph p");
rioară de site, dar adaptată noilor cerinţe, l-transitional.dtd">
adică cu zone; <html xmlns=,,http://www.w3.org/1999/ Această secvenţă php se scrie chiar la
-+ cea de segmentare a codului (scripturi xhtml"> începutul codului HTML, distincţia de
care se includ şi care se întreţes cu codul <head> HTML făcându-se cu un TAG mai special
specific fiecărei pagini) care are urmă- <title>Vogel-Burda Communieations ;' ,,<?" la început şi ,,?>" la sfârşit.
toarea schemă: </title> Instrucţiunea "include" realizează in-
• secţiunea "header", fişierul "header. <!-meta TAC-uri -> serarea, în locul unde este plasată, a codu-
ine.php" <body> lui din fişierul specificat ca argument, a-
• secţiunea cu informaţie specifică pa- <!-header si meniu -> dică "inc/header.ine.php". Să vedem prin
ginii, fişierele care se găsesc în directorul Se observă că acest cod, cu excepţia urmare ce conţine acest fişier "header.ine.
surselphp-div-css-jsl de pe CD TAG-ului <tit le> şi a butonului din php" în partea lui de început:
• secţiunea "middlexcept", fişierul meniu care este asociat paginii curente,
REALIZARE - VARIANTA CU PHP

#menuh ul li{floatleft; width: 100%;l

#menuh a{height: 1%;font:bold
O.7em/l.4em arial, sans-serif;}
</style>
<![endif]->
$currencsection ; "secCtitle_".$subsect; are o structură pe nivele, mai complexă şi Acest comentariu este ignorat de toate
$secUitle_O ; ,,"; mai greu de programat cu HTML şi CSS. browserele în afară de Internet Explorer,
$secUitle_l ; "VOGEL BURDA"; Meniul desfaşurat are structură afişată în care îl va interpreta pentru a putea asocia
$secUitle_2 ; "CHIP"; imaginea de mai jos. comportamentul :hover şi altor TAG-uri,
$secUitle3 ; "LEVEL"; Asigurarea bunei funcţionări a meniu- nu numai pentru legături <a>. Meniul,
$secUitleA ; "PC Practic"; lui în browserele IE anterioare versiunii 7 testat pe toate browser-ele specificate IE6,
$secUitle_5 ; "Despre noi"; se realizează prin includerea scriptului JS IE7, Firefox şi Opera, funcţionează corect.
$secUitle_6 ; "Cont@ct"; din fişierul csshover.htc. Acesta se include În principiu ar trebui să funcţioneze pe
$currencsection_title ; ${,,$currencsec- via CSS în linia de declarare a proprietă- toate browserele, deoarece majoritatea pro-
tion"}; ţilor TAG-ului <body> : blemelor de implementare ale standardului
if (!isset($skipexcept)) { body { color:#02243d; behavior: CSSsunt legate de Internet Explorer.
$skipexcept ; "O"; u rl(csshover. htc}; font-fam ily:Ve rdana, Se observă întreţeserea codului PHP cu
} Arial, Helvetica, sans-serif; codul HTML. Liniile PHP conţin textul
7> background-color: #04538C; min-width: denumirilor folosite pentru fiecare pagină
<!DOCTYPE html PUBLIC ,,-//W3C/ /DTD 968px; } distinctă din meniu şi care se vor plasa pe
XHTML 1.0 Transitional/ /EN" şi adiţional în TAG-ul <head> din respectivele butoane.
,,http://www.w3 .org/TR/xhtmll /DTD/xhtml fişierul "header.inc.php" se adaugă Prin includerea fişierului "header.inc.
l-transitional.dtd"> comentariul: php" în "index.php" cele două secvenţe de
<html <I-[if It lE 7]> cod vor lucra împreună. Astfel, când se va
xmlns;"http/ /www.w3.org/1999/xhtml"> <style type;"text/css" media;"screen"> executa linia:
<head> #menuh{float:none;} <Ii><a c1ass;"firstpage<7if ($sect;; 1}{echo
În secţiunea header se plasează meniul. body{behavior: url(css hover. htc}; font- ,,_current";}?>" href;"index.php"
Meniul s-a refacut în totalitate, deoarece size: 100%;l ><7;$secUitle_l ;7></a></li>

Serverul WEB privit de aproape

Pentru a putea realiza pagini tor. Client şi server se referă tul. Serverul
Server web
web funcţionale, În primul rând la programe care comunică şi (MySQL, trimite mai
Postgres,
trebuie Înţeles modul În care nu la calculatorul clientului şi departe
Oracle,
browserul interacţionează cu calculatorul serverului. LI [)El2etc.) clientului
serverele aflate În internet. O (Apache, O clientul cere un fişier .1 rezultatul
115 etc.) Middleware
imagine corectă asupra modu- HTML stocat pe un calculator prelucrării
lui de comunicare Între client şi din internet prin intermediul (PHP,551, În format
JSP,A5P HTML.
server vă poate ajuta În con- programului server. Serverul etc.)
ceperea propriilor proiecte. Nu 10calizează fişierul şi ÎI trans-
În ultimul rând, alegerea limba- mite clientului În format Există mai
CerereCautăfi
jelor În care se va face progra- şi TI trimii~rul HTML. Clientul după recep-
fişier Cerere TrimitefişierUl.php multe tehnologii server side:
marea va depinde de tipul in- HTML la client ţionare, afişează pagina fişier.php laclientcaHTML • Active Server Pages (ASP)
caHTM
formaţiilor care trebuie obţinu- HTML pe monitor. În acest care au extensia .asp;
te de la server. 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 (lE, Firefox, schimbă decât atunci când Browser web php3 sau phtml;
de calculator care răspunde la programatorul le modifică. (lE, Firefox, • Server Side Includes (SSI) care au
Opera etc.) Operaetc.)
cererea de pagini HTML făcută O situaţie 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 găseşte serve- .jsp.
execută pe un calculator amplasat la un rul (server side technology).
Internet Service Provider (ISP). e
clientul apelează un script, de exemplu Există scripturi care se execută Întotdeauna
Internetul utilizează aşa-numitul "connec- .php. Serverul identifică prin extensie (php) la client (client side technology), Java
tion-Iess protocol" care Înseamnă că după despre ce fel de fişier este vorba. În funcţie Script-urile.
fiecare interacţiune 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 foloseşte Împreună cu
Înţeleg programe care se execută pe server şi limbajul HTML. Într-o pagină scrisă În HTML
Să privim mai atent interacţiunile c1ient- care conectează Între ele componente soft- se pot integra programe (numite scripturi)
server. O precizare este importantă: trebuie ware sau aplicaţii. După terminerea prelu- scrise În Java Script. Scripturile Java Script
să se facă distincţie Între program şi calcula- crării acesta retransmite serverului rezulta- se execută Întotdeauna la client.
 Efectul folosirii acestui script se vede în
imaginea alăturată.
Am ales în mod deliberat afişarea pagi-
nii pe un ecran cu rezoluţia mai mare
(1.280 x 1.024 pixeli), decât cea specificată
de cerinţe (1.024 x 768 pixeli), pentru a
arăta cum se aşează într-o asemenea fe-
reastră o pagină a site-ului. În imagine se
observă cum a fost structurată coloana din
dreapta conform specificaţiilor. În această
coloană sunt plasate meniul suplimentar
(id #rightside din /style/vbcomm.css cu
toate elementele subordonate), logourile
publicaţiilor şi thumbnail-ul şi legăturile
pentru vizualizarea imaginii mari şi descăr-
carea acesteia.
Realizarea layout-ului pentru publicarea
internet a unor articole considerate impor-
tante s-a asociat legăturii din pagina publi-
caţiei CHIP şi plasată vizibil în coloana din
dreapta la rubrica FOCUS.
'o- "-W ·~loo:t -
Varianta finalizată pe această cale pla-
~ o",,~n. +<>w::> •..• ll:·:l) ",_"-I~~ •.·.I"'_Ir;;v.;-o_I~!'!' •• lu-I 1I·~a"oo sează site-ul nostru în categoria celor reali-
MARIT: Afişarea mărită a imaginii se realizează printr-un JavaScript. zate cu tehnologie WAMP (Windows,
Apache, MySQL şi PerIlPython/PHP).
se verifică cu instrucţiunea "if' dacă e rul thumbnailviewer.js din subdirectorul Componenta MySQL, inexistentă aici, o
vorba de primul buton şi, dacă da, se style, care are asociate fişierul de stil thum- vom integra site-ului în articolul următor.
afişează cu atributul css "firstpage_cur- bnailviewer.css şi imaginea animată load- Pe CD, această variantă a site-ului se
rent" (cu :hover), adică selectat. În caz ing.gif, care arată progresul descărcării găseşte în directorul /surse/php-div-css-js.
contrar se afişează cu atributul "first- imaginii mari). Scriptul JSşi stilul asociat se Pentru testarea codului scris pentru
page" (fără :hover), adică neselectat. includ în fişierul "header.inc.php" cu linia: această variantă, deoarece browser-ele nu
Toate acestea se realizează cu variabila <seri pt src="style/th um bnai Iviewer.js" "înţeleg" scripturi.php, am instalat server
$sect. Pe buton se va scrie textul memorat type="text/j avascri pt"> web, XAMPP, şi am verificat codul ape-
de variabila $secCtitle_l, adică în cazul <1ink rel="styles heet" href="style/th um b- lând în fereastra browser-ului adresa
nostru Vogel Burda. Un alt exemplu este nailviewer.ess" type="text/ess" /> http://localhost/ .
cel al diviziunii "logo":
<div id="logo"><a href="index.php"><img • 1,.. """"'~lo=_l""
srC="i mg/vbc -heade r-<7=$ sect; 7>.j pg" F'k E61 v.., F~ 10061 Het>

style="width:928px; height: 1 05px;"

,.. VtJ9d BUlt» u-..rc...... o-UP

alt="VBC-Logo" /></a></div> <!- logo VOGl::LBURDA

start/end -> COMMUNICI\TIONS

în care, în funcţie de valoarea variabilei

$sect, se încarcă din sub directorul img
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
imaginea corespunzătoare adică "vbc- :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
header-1.jpg". 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 e·paymert .\eb
~'cne·"Trlln,fer, fcar1e pepuLer'n lumellintericpa SI ca~t cfera o rata de 1:1 ţertru delar, Ofer:antul
Din această scurtă detaliere, se observă 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;:l·un • urular cu '1lp:d$!"are • $ub ferma unci
ilrfo_t:;;';j,~;e
că structura fişierelor pentru această vari-
antă de site este schimbată faţă de versiu- 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
nile anterioare. Există mai multe pagini şi fluxul L;::lC.'I1unei udel de traJ'zaetll. Cenl\"\l a nu h d.rect legati de mal .••••re, nlllt1(etlf .,.;aje.ua
m:erme:hr. Ce obicei, acesta este .nga}at pTIf'ltr·u!'lmesaj e-ma,1 in care il este proml$1 o sluJca
W'<

parf.t.mt fca'te luUiluvl. Tel te ltebu:e sa faca atuta este sa gut10nezt un (ont SI " trarnfere
fiecare pagină are inclus pentru coloana 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
din dreapta (zona 5) un script separat (de fals intr·o ~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
exemplu pentru prima pagină acesta este ermeda'l
':'cest,a l-a rt"<f ler trarsfl!ra ba" ca:n ma, mul1e c:ontlln C.\rt
fişierul menu_l.inc.php). S-au creat sub- 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
,...
.•..
1!r"--
celor care pestuza ~ acute fOrurTlllrl, " SI la retlamf: s la
directoare distincte pentru imagini, . .. 11"',7
'~i~;~dL) "umarul ne-unlor af, -ate eu ic"'Umul respet:by. PenUV ct odlltll

întrucât au apărut multe imagini şi a fost -~ ---- _

-....-

!r.;:.... •.•.
i'_ .
•• , •• 1 -
._
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!!

nevoie de stocarea lor în funcţie de desti- ~ ,-_._--_.-

------~-
l.IF\crdealf:f-, dt trafIC. EXista dou.'l Yllnlll'lte: in p!'Jffta se VInde
trafic. Oaca un site abi. are cătrvo y,zltatcn SI metedele le-gale

naţie (covers, stiri, toplO şi wallpapers). ~

;-~~-:::~~: de COlll'I"'Zaret'u a" suects iti a itnbul"latall ra"lung·ul 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 blo9·unIc" SI fONmu~o· cu

Pentru a putea afişa şi imagini de di- -- ----- , ,.. r---=."-r -- Irtmiet

mensiuni mari s-a folosit un script JS(fişie-

REALIZARE - VARIANTĂ CU PHP $1 MyŞQL

Dinamică suplimentară
Cum putem face ca la o nouă incărcare a paginii web conţinutul ei să se schimbe automat? Cum se poate afla dacă de
exemplu un anumit subiect a fost tratat anterior În publicaţiile editurii? Răspunsul este dat de paginile web dinamice.
Acestea "au În spate" baze de date, care permit fie afişarea În pagină a informaţiilor la zi, fie execută căutări În arhive.
Utilizarea bazelor de date În realizarea paginilor web e pe cale să devină o regulă. Victor Gheorghe

Ain construcţia ultimei variante a site-

ului nostru alegerea, PHP ca limbaj de
programare nu a fost întâmplătoare.
Am constatat că PHP oferă posibilitatea
structurării avantajoase a codului, dar
adevărata sa forţă se pune în evidenţă
atunci când îl punem să lucreze cu baze de
date. Limbajul PHP are funcţii predefi-
nite, altfel spus are conectivitate, cu mai
multe sisteme de baze de date: MySQL,
PostgreSQL, Grade, Berkeley DB, In-
formix, şi lista poate continua. Nu toate
aceste sisteme sunt gratuite, în topul po-
pularităţii aflându-se MySQL.
Pentru a afla ce este MySQL, pornim de
la o definiţie a sa: MySQL este un sistem
de management, cu căi multiple de exe-
cuţie, multi utilizator, pentru o bază de
date SQL. SQL (Structured Query Lan-
guage) este un limbaj destinat căutărilor şi
management ului datelor în baze de date
relaţionale. Conform unor statistici
Wikipedia (http://en.wikipedia.org/wiki/
MySQL), MySQL are mai mult de la mili-
oane de instalări. în mare măsură popu-
laritatea MySQL se datorează faptului că
programul este uşor de instalat şi folosit şi,
nu în ultimul rând, pentru că este gratuit.
După instalare, acest program se execută
ca server, permiţând accesul multi-utiliza-
tor la mai multe baze de date. Accesul este
concurent şi interogările bazelor de date se
execută simultan. Acum, definiţia nu mai
pare atât de criptică.
Ne propunem să înt regim construcţia
actuală a site-ului nostru prin adăugarea
facilităţii de căutare într-o bază de date
(soluţia completă pentru varianta cu PHP
şi MySQL se găseşte î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ă găsim răspunsul la câteva între-
bări: unde căutăm? Cum ajungem la
căutări? De unde facem căutările? Cum se
fac căutările? Cum se prezintă rezultatul?
şi Cum îmbunătăţim aspectul?

Bineînţeles, într-o bază de date - acesta

este răspunsul logic. Problema este că a-
ceasta încă nu există, aşa că trebuie creată.
REALIZARE - VARIANTĂ CU PHP $1 M
_IeiEl
~------ p.

W Server. IOCllIlho51 ~ il Baza de date: chip ~ @l Tabel: (UptiMur;

1'I'i14''Iiglft ~S[fucwta ~SOl ,. Cauta j.Clnserare UJExpon !:;Impon g,Opereljj II~ li'AI\ul(a

Carnp Tip GeSltonare Proprietati tiul $etate de Extfa Actiune

ba",
r ;d ~1(6) fi" auto_lllcrem'?ltt !:il / )< Ilil lliI !'il T

r revista ~'lltchar{20) l3tllll_swedISh_cl 1," tii -' )< 00 lliI ~ :m

r .u{J) 1," 1:11 -' )< 00 III :!1 T

r IV ~"2j l,."'=;';~
fi" -'/ )< 00 III ~ T

r rubrica ~<lft.hat(64) liI1ln1_s'A:edlsh_cI fi" )< lliI Il!

r titlu ••••.ch.w(2SS) latlnl_'.Iwedish_CI
'" re
IJI -' )< 00 lliI I!l I'i!l
L Marcheaza toate 1 Dese-lectea.za toale VerJ,e ••r cu 11./)C ~ lti ~

Indexuri: ro Utilizare spatiu Statisticile r.ndului

Nume cheie Tip CardinaliUlte Actiune Camp Tip Utilizare Comenzi Valoare
ld IflDEX r jkl unol(a) / )C' 1Cl Date 13::',92: 8)'tes Formal ':1ll:U'-1C
Creaza un Index pe r;-- to&oana Executa I Index ~",~16 Bytes Gestionare la~~=l_~~~~_e:.
Total 26:, -'l4 8ytes

.
Linie
lungime

.
linie
s, ~"l
-,

Marimelinie

Urmatorul
AUloindex
::S '3ytU
ailmrm
Creatie :e:. 2~, 201:. 4•.

Ultimul
t:.6:2E;J1
!4.!:25, 20'~ 4ţ
06:55 AY. ~
LEVEL
update
-r r "''"'''---~ L1NK:În dreapta paginii a fost plasată o
legătură la scriptul de căutare.

Nici nu este prea dificil, deoarece dispu- date, problema nu părea aşa de simplă. js/inc/ de pe CD. Vom modifica unul din
nem de cuprinsurile revistelor CHIP, Trebuie totuşi să menţionăm un lucru: aceste scripturi într-un editor. Astfel, la
CHIP Foto-Video şi PC PRACTIC, iar am preferat o soluţie simplă şi de aceea începutul diviziunii "rightside" din scrip-
pentru fiecare număr de revistă dispunem am optat pentru varianta "totul într-un tul de modificat se plasează legătura la
de denumirea acesteia, anul apariţiei, luna singur tabel", fară a mai face tabele sepa- noul script din care se pot face căutări, pe
apariţiei, iar fiecare articol din revistă este rate pentru publicaţii, rubrici şi ani cu care îl vom denumi "search.php":
prezent cu rubrica şi titlul aferente. Aceste legături între ele. <div c1ass="cuprinsuri">
informaţii se găsesc pe CD în două fişiere, <a href="search.php"style="color:#FFFFFF;
cuprinsuri.xls şi cuprinsuri.sql, aflate în Calea către căutare font-size: 12px;"><img
directorul surse/php-mysq/-div-css-js/ Iniţial s-a dorit să existe posibilitatea de a 5 rc="img/view.gif'>&nbsp;Cautari
data_base_backupl. apela procesul de căutare de pe oricare cuprins</a>
Cu ajutorul programului din paginile site-ului. </div>
phpMyAdmin, componenta XAMPP Dar site-ul are şi pagini de unde chiar nu La fel se procedează cu restul scriptu-
respon'sabilă de administrarea bazei de e nevoie să poată fi apelate căutările, de rilor menu_x.inc.php. Coloana din dreapta
date locale (http://localhost/phpmyad- exemplu paginile de articole. Cu alte (zona 5) va începe cu legătura introdusă.
minI), se crează o nouă bază de date cuvinte, condiţia este ca procesul de
"chip". Folosind facilitatea Import din căutare să poată fi apelat de pe toate
fişierele de cuprins uri creăm în cadrul paginile site-ului, mai pUţin de pe cele cu Bineînţeles, şi aici avem un răspuns simplu
bazei de date "chip" tabelul "cuprinsuri". articole. Din punctul de vedere al struc- şi logic: din varianta existentă a site-ului.
Pentru import putem folosi oricare din turii siteului, aceasta înseamnă că se pot Este adevărat, aceasta încă nu are o pagină
fişiere, cel cu extensia .sql sau fişierul .xls apela căutări de pe toate paginile care au pentru căutări aşa că trebuie construită şi
salvat ca şi .csv (operaţie uşor de facut în inclusă coloana din dreapta (zona 5). stocată în fişierul al cărui nume îl
MS Excel), ambele fişiere fiind de fapt Codul pentru coloana din dreapta este cunoaştem deja, "search.php". Aici ne a-
simple fişiere text. Este bine să reţineţi conţinut în scripturile menu_x.inc.php jută modul în care a fost structurat site-ul.
acest detaliu, pentru că se poate întâmpla din directorul surse /php-mysq/-div-css- Includerea unui nou script "search.php" (îl
ca, înainte de crearea unui tabel în baza de
date, să fiţi nevoiţi să interveniţi direct cu CHIP LEVEL PC Pract,c
un editor de text în respectivul fişier.
În imaginea de mai sus observaţi struc-
tura câmpurilor din tabelul cuprinsuri.
in l'llunle d,n 1'-<0".",,,01* 3~ (O)
După crearea bazei de date "chip" şi în An Nr. itlu
Chp
cadrul acesteia a tabelului "cuprinsuri" Chp FOlO·\\deo
Chp SpeooI
avem deja răspuns la întrebarea pusă în PCI'r.odJc

titlu. Aceasta cu toate că la început, când

s-a pus problema creării unei baze de
găsiţi pe CD în directorul surse/php-mysq/-
div-css-jsf) în structura existentă nu repre- Cu un script, pagina devine dinamică
zintă o problemă. Codul sursă al scriptului
Incluzând un singur script În structura ulti- &nbsp;&nbsp;&icirc;n titlurile din&nbsp;&nbsp;
se găseşte şi în oglinda "Cu un script pagina
mei versiuni a site-ului putem consulta cu- <select name="cerev" style="width:102px;">
devine dinamică". În script este definit for- <option value="., selected>--toate
prinsurile revistelor apărute 'până În pre-
mularul, TAG-ul <form> cu numele "vbc". zent. Pentru a putea vedea cum s-au pro-
revistele</option>
<option value="Chip">Chip</option>
Formularul se compune dintr-un câmp gramat componentele scriptului este ne-
<option value="Chip Foto-Video">Chip
de introducere text <input> cu numele voie de sursa lui, prezentată mai jos.
Foto-Video</option>
"caut", o lista derulantă (combobox) <?php
<option value="Chip Special">Chip
Special</option>
<s ele c t > cu numele "cerev" şi un buton $sect = ,,11 "; $subsect = "O";
<option value="PC Practic">PC Practic</option>
"Caută". Câmpul "cerev" are selectată im- $skipexcept = ,,1"; $title = ,,";
<option value ="Insider">lnsider</option>
inci ude("i nc/header. inc. ph p");
plicit opţiunea toate revistele şi astfel </select>
/ / Conectarea la baza de date
&nbsp;&nbsp;<input type="submit" c1ass="sub-
căutarea se va face pentru toate revistele, mys q L co n nect(,,1ocal ho st"," user"," pas swo rd "); mit1"
existând însă şi opţiuni <option> şi pen- mysql_se leccdb("ch ip"); value="Cauta" >&nbsp;&nbsp;<? echo ,,(...$total-
tru fiecare revistă în parte. Căutările se vor $table="cuprinsuri"; / /denumire tabela in DB record.")";
$pagesize= 140; / /nr.max.de linii/pagina web ?></div>
face în titlurile articolelor publicate. $caut = $.GETL,caut"]; </form>
Formularul se plasează la începutul scrip- $cerev = $_GET["cerev"]; <!- formular de cautare sfarsit ->
tului, după comentariul <!- HTML // testeaza daca formular sau pagina noua <?php
if(isset($_GET[..formular"]) && /* navigatorul de pagini facut cu legaturi */
coloana cu continutul, inceput ->. Vom
$_GET[..formular"] == "yes"){ for ($i= 1; $i<=$lOtalpage; $i++){
edita numai partea de conţinut a scriptului, $zuzu = "form"; if ($i==$pageid){
restul părţilor fiind deja făcute (header.inc. } else { $zuzu = "no form"; } echo ,,<b>".$i."</b> I ,,;
if($cerev == ,,") {
php, midelleexcept.inc.php şi footer.php). } else{
$filt = .:'; echo '<a href=' .$PHP_SELF. '?caut=' .$caut.
TAG-ul <form> are un atribut "action" } else { '&formular=no&pageid=' .$i. '>' .$i.'</a> I ';
care indică acţiunea ce urmează selectării $filt = " and revista = '".$cerev.'" ,,; }
butonului "Caută". În cazul nostru acţiu- }
/ / citeste 1 coloana din DBdate cu filtrul ?>
nea se face cu variabila sistem $PHP_SELF,
/ / din variabilele $caut si $cerev <!- HTML tabela afisare cautare inceput ->
ceea ce înseamnă că scriptul se apelează pe $result=mysql_query("select id from $table <table celispacing="O" cellpadding="4" bor-
sine. Se completează formularul cu cererea where titlu like '%".$caut."%' ".$filt." ;"); der="O">
/ / numara liniile gasite
dorită şi se iniţiază procesul de căutare în <tr>
$total reco rd =mysq I_n um_rows($ res uit); <th width="11 O" align="center">Revista</th>
baza de date cu butonul "Caută". / /pune nr. pagini in variabila $totalpage. <th width="30" align="center">An</th>
$total pag e=(i nt)( $total re co rd/ $ page size); <th width="30" align="center">Nr.</th>
Cum se fac căutările? if«$ total reco rd%$ pag esize)! = O){ <th width="11 O" align="center">Rubrica</th>
$totalpage+= 1; <th align="center"> Titlu</th>
În urma completării formularului "vbc" }
</tr>
cu valorile dorite se poate începe căutarea, if(i sset($ _GETL,pageid"])){ <?php
operaţie care presupune o selecţie în baza $pageid = LGET["pageid"]; /*deschide bucla de parcurgere a liniilor
$start=$pagesize*($pageid'l );
de date. Pentru a vedea cum se face un liniile se pun in randurile <tr> succesive */
} else{ $i = O;
asemenea lucru este bine să testaţi cu $pageid= 1; wh iIe($ row= mys q Ue tch .as soc($ re sult)){
phpmyadmin câteva selecţii posibile. De $start=O;
$i++;
}
exemplu, să căutăm de câte ori a apărut if ($i % 2 != O) {
/*selecteaza inregistrarile din tabela fixand $bgcol = " bgcolor='#FFE6D9' ,,;
cuvântul "video" în titlul articolelor din L1MIT
} else {
toate revistele. În phpMyAdmin căutarea rezultatul selectarii se va memora in variabila
$bgcol = ,:';
$result. */
se face cu comenzi SQL (care are buton
$result=mysqLquery(..select * from $table
distinct), folosind comanda: where titlu like ?>
'%".5caut."%' ".$filt." order by revista asc. an <!- HTML linia cu info gasita ->
select * from cuprinsuri where titlu like
desc, nr desc <tr <? echo $bgcol; ?> height="16" >
'%video%'
limit $start, $pagesize;"); <td align="center"><? echo $row['revista'];
unde % este simbolul pentru orice, adică ?> ?>&nbsp;</td>
<!- HTML coloana din stanga inceput -> <td align="right"><? echo $row('an'];
se caută titlurile care conţin şirul de carac-
<img src="img/lupa_2.jpg" title="Cautari" /> ?>&nbsp;</td>
tere "video" plasat oriunde în titlu (avînd <td align="center"><? echo $row['nr'];
<br />&nbsp;<br />
orice caractere înainte şi după el). <!- coloana din stanga sfarsit ->
?>&nbsp;</td>
<td><? echo $row['rubrica']; ?></td>
Este bine să testaţi cu ajutorul php- <?php include("inc/middlexcept.inc.php"); 7>
<td><? echo hili($row['titlu'J.$caut); ?></td>
<!- HTML coloana cu continutul inceput ->
myadmin diverse interogări pentru baza </tr>
<h 1>Cautari &icirc;n cuprinsuri</h 1>
de date până vă obişnuiţi cu modul în care <hr />
<?php

MySQL răspunde diverselor selecţii. Este // inchide bucla de parcurgere a liniilor

<!- formular de cautare inceput ->
}
bine să includeţi în scriptul propriu <form name="vbc" action"<? echo
/ / deconectare de la baza de date
$PHP_SELF; 7>?formular=yes">
comanda select numai după ce v-aţi con- mysql_c1ose();
<in put type="hidden" value="yes" name="for-
vins că răspunsul conţine ceea ce doreaţi. mular"> ?>
<div class="cautare"> </table>
Revenind la tema noastră, dorim să
Sirul de cautare: <input type="text" <!- HTML tabela afisare cautare inceput ->
obţinem aceeaşi selecţie din baza de date, name="caut" style="width:120px;"> <!- coloana cu continutul sfarsit ->
folosind pagina noastră web.
REALIZARE- VARIANTA CU PHP $1M L

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·-----------------------------, ::~. :: :rattt::fo :'e"'!':;n--lINa ~b lut:'"
$lUCT :O':;::Ec,:c~l l,Il"'~ra::e,.l er"r;e
fAOMwpf'tl~W'l :Co; ~~ k:;v$ :lreeutul.:..nul\il
:00;
wttERE IRI ll([ ~ :00; 1: Tene.&. Teh"clGij<t e.tI'O.JI de p"e~a
Ulm. :CO-:O:C -este o Tehr~eg '::.~,n:e·ell ~·e:r ul\lll(ar:'lIl
:.:~. tu Ed.t>:",,, Sar"t.5tell ot\t"e C s>:

PAGINARE: Dacă au fost găsite mai multe

~~ hnllincapandcupo- rezultate, este util ca acestea să fie afi~ate pe
In mod IOnlontal :::J Sl rep€'la!~ aflteot dupa ~ c~'uI~
Soltare dupa lasta IrlJcl unuhal 3 mai multe pagini.
-T- ld revist1:l
r ./)< 36 C~p 1999 Vide-o pe PC
r ./)< 162 ~p 2000 EdltaIe.a fofmatuk.n Olgttal Video
tru condiţiile ceru te. Aceste condiţii
r ...I)C 4~ Chip 2001 1 Software Vide;)(ecorder software - gratIs poartă numele de filtru. Operaţia de
r .;/)< 559 Chip 2001 7 Practtca- Vide-o an~lamine

r ..J)( 992 Chip 200 &.

10 To:sti?' TO?hnologll Vid~ Integrat de ultltl'la generatIe
căutare putând fi formulată şi spunând că
r ./ )C 1009 Chtp 2007 11 Teste & TahnolCoQu Ac~'H,deo~fIlnJHO se aplică un filtru pe baza de date.
r .;.! )< 113..1 Ch.pSPecial 2007 12 !,','mamp6
Întrucât rezultatul unor căutări poate
CĂUTARE: Rezultatele afi~ate prezintă textul căutat indiferent de modul de scriere, cu majuscule returna foarte multe linii, din raţiuni
sau cu minuscule. lesne de înţeles acesta se va segmenta într-
un număr fIx (maxim) de linii care se
În scriptul search.php cererea se mate- "seleet * from euprinsuri where titlu like afişează pe pagină. Acest număr maxim
rializează într-o comandă select (vezi '%".$eaut.''%' order by revista ase, an dese, de linii este dat de variabila $pagesize.
comentariile din oglinda "Cu un script nr dese;" Deci tabelul afişat într-o pagină va
pagina devine dinamică"). În articolul de În cazul comenzii folosite de noi, conţine $pagesize linii. Pentru a putea
la pagina 36, în oglinda "Serverul WEB ordonarea s-a facut după revistă ascen- naviga de la o pagină la alta, deasupra
privit de aproape" este ilustrat traseul pe dent, an descrescător şi număr descrescă- capului tabelului se înserează un naviga-
care îl urmează cererea noastră. Pe această tor, rezultatul afişat în fereastra browser- tor de pagini. Acesta este constituit dintr-
cale cererea noastră se va executa pe ser- ului fiind exemplificat prin imaginea de o succesiune de numere afişate ca link-uri
jos. şi care dacă sunt selectate conduc la pagi-
Rezultatul căutării este recepţionat de Se observă că fiecare rând din tabel na respectivă.
variabila $result. conţine textul "video", indiferent dacă În imaginea cu rezultatele obţinute,
acesta este scris în titlu cu majuscule sau pentru filtrul setat cu şirul "an" în toate
Afişarea rezultatului cu minuscule. Se mai observă că în dreap- revistele, s-au găsit 519 titluri. Deoarece
Variabila $result conţine rezultatul in- ta butonului "Cauta", între paranteze, este numărul de rezultate este mai mare decât
terogării bazei de date. Pentru a-l afişa în trecut numărul de înregistrări găsite pen- numărul maximi de linii stabilite pe o
fereastra browser-ului sunt necesare două
operaţii: extragerea informaţiei şi pre-
zentarea ei. Pentru a putea extrage infor-
maţia trebuie să ştim că aceasta este mem-
orată în $result linie cu linie. Se observă în
sursa scriptului existenţa unei bucle de
parcurgere a liniilor (while), care par-
curge secvenţial liniile din $result şi pen-
tru fiecare din ele compun~ codul HTML
necesar afişării. Deci, pentru fiecare linie
din $result se va insera într-un tabel
HTML o linie cu datele corespunzătoare, Revista An Nr. ~lJbrica Titlu
Cbp 200- :2 Test~ 6. TehnolcQII Came'e vfdeo t-!ll' DV
TAG-ul folosit fiind <tr>. Capul de ta- Cl-'t; :00-:0 :: Tes:e 60 Terncl~1I .l.cce1e'are .••. ,de-o cerW ""'J
C'" : 2ea; :0 Teste & -~I'."oIoQ' '.jll::ieo INe:;r,,: de ulbmll generane
bel conţine coloane pentru revistă, an, cf'~ :OC'5 :0 Cc.erSt:'"' =-rC.::l .•a,e\o1deo
Cr~ 2006 :"aetlu CC;te pe V'OecC'
număr, rubrica şi titlu. Tabelul astfel Cr.t: :006 :"/lO(:lca F'reillcr"revldeo
Ch,t' ,0015 :(lIctiCli Video cete!efe'"
populat cu date este "pasat" serverului 0-,
0-,
:C'J5
ZC,,~ 3
Ccve'st:r'l
F"'lIaJ~
ercadca::tlrgat,dlc·.cee
Sraadellstm;l Y1deeIn retea

web care îl returnează browser-ului. C''':

Cl-;:-
::0:
:00:
:'lIl:t10!
$cA:".lIre
".declIrfe':'lImre
Vldeoreccl"der seft-•••~~e ' Ql"a~'s
Ct--o 2000 Hard.'/are Edft$re!l fc"matlJh.H 0'\1 taI V,dec
La afişarea rezultatelor trebuie stabilită CtI': :999 Herew"re Vldl!:oţI!: PC
CI" t: F:,:o·/ldec :00:- Terrele,; e PC turte ,"..'!rt"IJ fctcs'~ .,e::
ordinea acestei operaţii. Dacă aceasta nu (J- D Fc!c·<,,~ee 2007 Nout"tl FCTO·'lto-i;O ':!'Q,t41,orllre
Ct'ilp 'Sce;;a~il 2CC~ :2 \\mamp 6 C;tl"ll. tati red~re!l ",·oeo
este precizată rezultatele se recepţionează Ct-:pS!:'~CllIJ 2007 :2 Wlrdc.',s 2000 Orulere.!l I,:re, secvente ~'deo 1"bllt<9rcu"d
C"'lpSpeCI/l1 2006 " ?l"lIetfCi'! M;.EG faro! redo!me, tU Vldeoo.eOo
dezordonat, ceea ce face lista aproape ''''10 :::~o/ll 2006
2C06
.: HarG.IIlIre
Tur1"i;j
,=laC' e 'of'Cle.e ale fr'\a'l"le~t1Jh./
~te~ ţert'"V o ~ClI\o-,dee
Chc'E:e:.al
inutilizabilă. Ordinea se stabileşte în :005 ErlIC'l1J1
~r.r:t~ Tr,r 'n.~,Il!:',:."r..
:::lac- \1 ~e-c . Sll"U l"UmlJl
" ;,1 ••..~",.,."r1- :'1H1IIQ'nn-
Ir..•.
- ...- - lri~
comanda select, care în cazul nostru arată
astfel:
pagină, acestea au fost plasate în patru
pagini. Pagina curentă are numărul său
afişat bold.

Aspect îmbunătăţit
Modul în care este afişat tabelul cu rezul-
tatele căutării în baza de date este inco-
mod la citire, deoarece şirul de căutare
curent (criteriul folosit) nu este explicitat
în coloana care conţine titlul. În exemplul
anterior am folosit şirul "an" şi pentru a
evidenţia cât este de dificilă identificarea An Nr. Rubrica
2e03 i Sdt."a-e 8C~.a~C""'le
:003 a COI1"UI"~tol
acestuia în titluri. Se întâlnesc situaţii în :G03 8 Ha'e/.are
Ce a::&f'.ca a c<p..
S.r-euI Cle p'cea
:003 .:..Itele e&r:lpentN,aC"l'ta
care undeva în fereastra browser-ului se 2003 Comunicatii ~ v"etde t'UfaN:a
2003 Hlm::i.'.llre Car.te.."ccd. noullaSO
specifică ceva de genul "şirul de căutare a '2003 ~'aCtlca CIIr-;CU!/I ..• col"trc'at"e'«tJ'(';nIC
:C~3 t1a·c.~4"~ c. c..!'"t/l"'/Icar~e
fost <şir>", dar nici această soluţie nu face 2003 Co.eme"',' pc-ultr6l"sf.::...""tmtele",zc'
:Otl3 tta·~..•.•
a'e =-af'CU!dep'e:a
identificarea în titluri mai uşoară. :003 e Scr:..'are il" spatele ecr4l"t.;!U1

:C()] Ha"c, .•"re ~erfe'1'Tla"ta sau 5;~oJ"arta'

O soluţie elegantă este ca şirul de cău- 2003 H/I"d•.•are e3t'gul$OM:: ... deprc!=a
2003 Hard...•"re 5arrul de proba
tare, oriunde ar fi el plasat în titlu, să fie 2003 114'C"'''l'e SanC\JJ de proba
leG) ,olIl'CMre Ca<'.a,use:'hle
afişat pe un fond de altă culoare, efect cu- :C03 Con- •.•I'HCllbl C,J ~ oear'e"'t! Cfll'\ ,ema"
II' L":.<I-v1 fa~afire
a
2e03 :-'aa,C/I
noscut sub numele de highlight. Aceast ::03
:003
ha'eM"e
'ta'c,',are
aar-culde preba
e)",:~"'o ~eriG~n:" ;"lO
2003 rtarc...a·e lr'n"'--aoeo'anot
efect se poate obţine cu ajutorul unei ,nln HJ'lr~/.1Ir::- P,"l~!o1,at'~(+"l

funcţii PHP "hili" prezentată în oglinda

"Cu o funcţie PHP listele devin atractive".
Modul de apelare a funcţiei este specificat
în comentariul de la începutul oglinzii. În spre afişare pagina a doua. tabel "stiri". De exemplu acest tabel poate
scriptul search.php, funcţiei este apelată Este evident că soluţia aleasă îmbună- avea câmpurile: data_stire, categoria_
prin intermediul liniei: tăţeşte lizibilitatea paginii. Se observă că stire, titlu_stire, rezumaCstire şi stire_
<td><? echo hili($row['titlu'],$caut); funcţia "hili" găseşte toate apariţiile şiru- extenso;
?></td> lui de căutat în titlu. ~ în pagina în care se doreşte inserarea
Se observă şi modul cum se întreţes Urmărind câţiva paşi succesivi am ştirilor (se poate stabili funcţie de layout
codurile HTML şi PHP. Codul funcţiei putut adăuga site-ului nostru funcţii de numărul de ştiri care se inserează) se
din oglinda "Cu o funcţie PHP listele căutare în titlurile publicaţiilor. plasează un script care accesează baza de
devin atractive" se va include cu ajutorul O altă aplica ţie a aceleiaşi tehnici, de date (selectia se va face pe categoria_stire
editorului în corpul scriptului search.php, data aceasta automată, este includerea şi ordonarea descendentă pe data_stire -
de preferinţă la sfârşit, înainte de inclu- unor noutăţi pe diverse pagini. pentru ca ultima ştire să fie afişată prima
derea scriptului "footer.inc.php". Efectul În principiu şi în acest caz se pro- în fereastra browser-ului);
folosirii acestei funcţii este vizibil: am cedează în paşi: ~ se inserează rezumatul_stirii urmat de
folosit tot selecţia anterioară, dar am ales ~ se crează în baza de date "chip" un un link (de regulă cu textul "detalii ...")
către un nou script (unic pentru tot site-
Cu O functie
, PHP listele devin atractive ul) care afişează ştirea completă (stire_
extenso);
Listele care conţin rezultatele căutări lor cu == O)) ( ~ se pot folosi imagini (recomandabil)
greu pot fi făcute atractive. Totuşi, prin uti- $xtemp .= ,,<span style=\"background- care să însoţească stirile, care este de
lizarea funcţiei PHP de mai jos veţi putea color: preferat să fie păstrate în directoare sepa-
obţine liste mai aspectuoase, prin adău- Sbgcolor\">". substr(Sx, Si , strlen(Svar» . rate. În baza de date este bine să gestion-
garea efectului de highlight pe şirul de ,,</span>";
căutare. aţi numai căile şi numele imaginilor, fară
$i += strlen($var);
a încorpora imagini în înregistrările din
<?php tabelul "stiri".
else {
/* functie pentru efectul highlight Sx este Având deja un exemplu detaliat, reali-
sirul de caractere, Svar este textul care se Sxtemp .= $x{$i};
zarea includerii ştirilor în paginile site-
marcheaza cu highlight */ Si++;
ului nu mai reprezină un obstacol. Cu
function hili(Sx,Svar, $bgcolor='yellow'){
ajutorul bazei de date MySQL şi folosind
if (Svar !=,,")(
comenzile PHP din acest articol am im-
$xtemp = ,,";
plementat o caracteristică dinamică site-
$i=O;
while($i<strlen($x»){ ului, acesta fiind astfel mai atrăgător, iar
if({(Si+ strlen(Svar))<= strlen($x)) && informaţiile mai uşor de găsit. Teoretic, în
(strcasecmp(Svar,substr($x, Si, strlen($var))) urma acestor operaţii ne putem aştepta la
o creştere a numărului vizitatorilor.
PROGRAME - APLICAŢII GRATUITE

Utilitare gratuite pentru

design şi programare
În cele ce urmează, vă vom prezenta o serie de programe gratuite care vă pot fi de un real folos, indiferent dacă vă
ocupaţi de web design sau de programare web şi cu atât mai mult dacă le faceţi pe amândouă. Andrei Licherdopol

M
aterialul de faţă se vrea a fi mai mult problemelor apărute cu un program, pe Mantis sunt cuprinse numeroase proiecte
o serie de ponturi referitoare la măsură ce anvergura proiectului creşte, diferite, producătorul poate furniza con-
aplicaţii pe care le-am întâlnit, astfel de mijloace de comunicare sunt mai turi de utilizator pentru fiecare client în
folosit şi apreciat. Desigur, unul dintre mult o corvoadă. Aşadar, intră în scenă parte, cu drepturi de acces limitate la pro-
criteriile de selecţie a fost şi gratuitatea aplicaţiile speciale de raportare şi urmă- iectele care îl privesc pe acel client. În
acestor programe, fiind vorba de freeware rire a bug-urilor. plus, sistemul de sortare şi raportare a
şi cel mult donationware. În speranţa că Mantis Bug Tracker este o astfel de incidentelor se dovedeşte a fi unul atât de
vă veţi găsi câteva puncte de referinţă aplicaţie web, care capătă recomandarea simplu sau complex pe cât doreşte utiliza-
interesante citind acest material, vă lăsăm noastră. În primul rând, ne-a plăcut inter- torul. Absolut toate laturile acestei apli-
să exploraţi propunerile noastre. faţa simplă şi cuprinzătoare, modul de caţii web sunt complet personalizabile, de
administrare, raportare şi etichetare a la aspect până la funcţionalitate şi chiar
Mantis Sug Tracker incidentelor, dar şi posibilităţile de comu- nivelul de securitate.
Pentru programatori, poate cea mai ne- nicare oferite. Bunăoară, un freelancer Scrisă în PHP, aplicaţia Mantis func-
plăcută parte a muncii reprezintă rezol- sau o companie care lucrează constant la ţionează perfect cu MySQL, MS SQL,
varea bug-urilor sau aplicarea unor co- anumite proiecte pot folosi Mantis pentru PostgreSQL, rulând pe un server web ca
recţii, după dorinţele clientului. Dacă e- centralizarea comunicării, oferind acces Apache. De asemenea, poate fi accesată
mail-ul, fişierele Excel şi capturile de web clienţilor, pe baza unul nume de uti- prin aproape orice navigator web. Vor-
ecran sunt o soluţie pentru comunicarea lizator şi a unei parole. Dacă în sistemul bind de flexibilitate, modulul MantisCon-
 Baseportal
Iată o aplica ţie web cel puţin interesantă.
Funcţionează ca serviciu online, pe acelaşi
V1ewlnglssueSlmpleOetitlls[

10 e.legOl)/
principiu ca o căsuţă de e-mail (pagina de
00710 [~ReporlsJ s...~yal Runllme întâmpinare aduce puţin cu cea folosită
R'pol1er Jktluy
AsslgnedTo de Gmail), numai că oferă posibilitatea de
Priori!)' non'M!

StatllS UkflOlMedS~
a crea şi accesa de oriunde baze de date.
Summary 00710 SUM'yol pmi:lrms _":ilidalions (Ifl hiddel'l (1'lCsI'l
ilClp.'ejllranchll'lg quesllClfI$ Cu un sistem de asistenţă bine pus la
Oesaiplion !fa uUl'lOColTeclly lill~!lI il luI hld lhalll ~l'Ialid 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
sliMperiorms thto Y3lldahons on tlle In: qUl'$llon ewn 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., punct, Baseportal poate fi folosit cu succes
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 C·O!1fill1que$lions no 10"Vl!!
aeliv3led. Ihe data filI9din IIlI formllrly~ll'l'aled fitlds sJ'<oukl bf' remowd. Ofilllut.l flOlortger •••••Iidated
Addtllonal
şi de către incepători, pe când cei experi-
Infom'lll:t1on
Tap Nola~ ~Iached
mentaţi pot integra Baseportal cu propri-
Browur ile aplicaţii. Fie că doriţi să creaţi o bază
O.tabase!
DB.Vers/on de date la care să aveţi acces de oriunde,
Optrating
System fie că aveţi nevoie de o bază de date pen-
PHPV,f$joll

tru a susţine o pagină web, serviciul

online în discuţie vă poate ajuta mult.
Integrarea cu alte pagini web este facilă,
8 Retation5hipt.
motiv pentru care vă recomandăm căl-
dUllliUleof

lelaltdlO duros şi această aplicaţie.

Info: http://baseportal.com/
MANTISBUGTRACKER:Interfaţa
'o'_'__ '_":.,;.,'::"=f;"" ~_
ideală de administrare
a problemelor tehnice. băsjj;:'~(;-'··-"
:)
nect permite integrarea Mantis cu apli- UDB, Sybase, Informix, PostgreSQL şi
caţii .NET, Java, Cocoa, Eclipse şi Nant. MySQL, având multe opţiuni de formatare.
Accesibilitatea merge până la oferirea de Cele două variante disponibile sunt
suport WAP, astfel că MantisWAP poate una online (complet sigură, deoarece
fi rulat pe telefoane mobile şi PDA-uri. nicio linie de cod SQL nu este transferată
Sunt oferite chiar şi module de migrare de pe internet, ci formatarea se face local) şi
pe un alt sistem de raportare a bug-urilor una desktop. Scrisă pentru medii Java şi ADrive beta
(precum Bugzilla sau GNATs) pe platfor- .NET, SQLinForm poate rula din majori- Acest serviciu online ne-a atras atenţia,
ma Mantis. tatea browser-elor fară nicio problemă. deoarece oferă gratuit posibilitatea de a
Pe scurt, putem spune că Mantis este Aparent aplicaţia online a ajuns la perfor- stoca până la 50 GB de date online, pe
interfaţa ideală de comunicare între pro- manţa de a formata în jur de 1.500.000 de care le puteţi accesa de oriunde. Datele
gramatori, testeri şi clienţi, asigurând un linii de cod, fară nicio problemă, aşadar sunt protejate, oferindu-se chiar servicii
workf1ow complet pentru fiecare inci- merită să aruncaţi o privire asupra vari- de criptare şi posibilitatea de a accesa ver-
dent, iar mijloacele de comunicare, admi- antei online. Noua versiune desktop va fi siuni mai vechi ale fişierelor, mulţumită
nistrare şi integrare oferă atât strictul ne- disponibilă de la începutul lunii martie a tehnologiei Snapshot. Pentru a putea
cesar şi simplitate, dar şi un potenţial acestui an. folosi ADrive, aveţi nevoie de un browser
imens, în funcţie de preferinţele fiecărui precum Internet Explorer sau Mozilla
utilizator. Manualul disponibil SQ!.,inForm Firefox şi să permiteţi server-ului ADrive
pe website este excelent, Iămu- '";;::::':'~;';;::':;;~;:~:~:'~:~;;:;;:':;;::;.~.;;;::'.~
._•.~~." să stocheze cookie-uri în navigatorul vos-
rind toate neclarităţile pe care tru. De asemenea, trebuie să-i autorizaţi
le-aţi putea avea, mai devreme rularea Javascript-urilor şi să permiteţi in-
sau mai târziu. stalarea controlului ActiveX. Nu în ulti-
Info: www.mantisbt.org mul rând, rularea aplicaţiei necesită insta-
larea JRE (Java Runtime Environment).
SQLinForm Puteţi încărca mai multe directoare şi
Dacă nu vă place să pierdeţi mult fişiere simultan, care sunt scanate înainte
timp cu formatarea codului SQL de a fi acceptate pentru stocarea pe server.
("muncă de chinez bătrân") veţi Momentan, cel mai mare fişier acceptat
aprecia cu siguranţă aplicaţia ,..•.''" unour ••••• _,,,,~,,,,,,,,._'->.u
•••<nt'_I"',~"..",••__"-,.,,.,",
.••••• _-'
•••• '-'
.
poate fi de maxim 2 GB. Din păcate, în-
_ ••••-.l ••.
,••.••••... _,_ .••.c, •••• ,-..
SQLinForm. Aceasta formatează ""'..,,-, .•...........
-<-.....
•••"""_, ••.•"'T''"'••.co,_.".:n ., _1_
<> ••••• _> cărcarea fişierelor prin FTP nu este
corect liniile de cod SQL incom- permisă, deocamdată. În schimb, puteţi
plete sau cu erori de sintaxă. partaja orice fişier doriţi prin utilizarea
Oferă suport pentru toate for- funcţiei Share, care va asocia fişierul res-
matele majore de baze de date, ca ""••••.
_,

-'-<
••••.•••

.•'• •. ,
c ••• ,_" ••••• ".,"' •• ,_" •• ,, ••
pectiv cu My Shared Files. Acesta va putae
•.•,.__l_J'~'
ORACLE, SQL Server, DB2 / fi descărcat de la adresa asociată acestuia
PROGRAME· APLICATII GRATUITE

după care puteţi începe să lucraţi în voie.

Interfaţa este simplă, funcţionând bine cu
A Drive drag&drop, iar aspectul albumelor poate
fi personalizat folosind fie teme, la rândul
lor modificabile de către utilizator. Puteţi
de asemenea redimensiona, comenta şi
roti imaginile, iar partajarea albumelor
poate pleca de la folosirea server-elor Jal-
bum, fără a exclude şi plasarea albumelor
create pe propriul server sau folosind un
alt serviciu de găzduire, precum şi inte-
grarea în alt website. Serviciul include şi
un client FTP, cu un utilitar de sincroni-
zare, iar compatibilitatea se extinde în
principal asupra navigatoarelor mai răs-
pândite, ca Internet Explorer, Firefox şi
Opera. Suportul pentru limbi străine este
palit ~t"".9" •• @,."'..... Pol.,... tiM""" '>9kw_..,. "tor'", •.
(cmpy •..•.•• 1<,••'intr". Arsh'v'nq
extins, JAlbum oferind posibilitatea de a
HU94 Oilcovnts 01'1T.p. &~d.up ."d .ute ••• dat.. G.t th. 1.t.Jt " •• :li, .•h.t. Compl.te ILM fa. f,I •• K•• p
O.i~ •• t " •••••••••, 6mm. OLT. SCLT. onlin •. Set up .• b.ckup
AlT. LTO e. 1'010'.' Q' vie OU"
J ••.•• ". ~p.l"I, d'leUUlon
.nd much mo' •.
th ••• dJ, 'fQutfil •••• ~.tslim!
~ ",r.
introduce text în 31 de limbi. De aseme-
1':"'
'1 ~",."

nea, puteţi include o arborescenţă com-

plexă, ca şi fişiere non-imagine, care odată
incluse în album pot fi accesate printr-o
de către oricine. Pe viitor, probabil că se maximă de lucru în funcţie de oră sau dată. legătură directă. În materie de descrieri
va lucra şi la posibilitatea de accesare a Accesul rapid la conexiunile FTP se reali- ale fişierelor, JAlbum este compatibil cu
legăturilor către fişierele partajate pe baza zează prin Site Manager, pe de o parte, care EXIF şi IPTC, informaţiile din aceste
unui nume de utilizator şi a unei parole, permite memorarea tuturor adreselor FTP rubrici putând fi extrase direct şi folosite
aspect esenţial din punctul nostru de mai importante şi prin QuickConnect, în albume. Totodată, puteţi integra filtre
vedere. Oricum, dacă aveţi nevoie de mult pentru conectarea rapidă la o nouă adresă pe imagini, watermark-uri şi logo-uri.
spaţiu de stocare online, deocamdată FTP. Consumul de resurse este relativ scă- Unii utilizatori vor fi încântaţi de posi-
ADrive este cea mai bună soluţie gratuită. zut, Filezilla ocupând circa 50 MB în me- bilitatea de lucru în linie de comandă, ca-
Info: www.adrive.com moria RAM. Se găseşte pe website-ul indi- re facilitează automatizarea operaţiunilor.
cat mai jos, în variante Client şi Server, pri- De asemenea, pot fi integrate oricâte
ma disponibilă atât pentru Windows, cât şi extensii, prin intermediul scriptării în
Acest program serveşte la încărcarea şi pentru Linux sau MacOS, în timp ce vari- limbajul BeanShell (asemănător cu Java),
descărcarea fişierelor pe şi de pe web- anta Server rulează doar pe Windows. Pe scurt, JAlbum oferă foarte multe
site-uri FTP. Nu costă nimic, fiind open- Aceasta din urmă este un server FTP care facilităţi, fiind compatibilă cu orice plat-
source, cu toate acestea reprezintă una din- poate rula folosind SSLşi TLS, oferind co- formă care poate rula mediul Java 1.4.
tre cele mai solide soluţii de acest gen. nexiuni criptate, sigure. Totodată, oferă Aplicaţia este complet gratuită şi "curată".
Oferă posibilitatea de a lucra cu mai multe posibilitatea de a comprima datele pe loc, Nu există adware, reclame sau spyware,
transferuri simultan, totodată puteţi navi- pentru a câştiga viteze de transfer sporite, dar donaţiile vor fi cu siguranţă apreciate.
ga prin arborescenţa paginilor FTP chiar în însă această comprimare poate genera Info: http://jaIbum.net
timp ce transferaţi fişiere pe acestea, facili- uneori şi erori de transfer.
tate care nu este oferită de multe alte pro- Info: http://fIlezilla-project.org/
grame similare. Totodată, puteţi utiliza Deja foarte răspândit, acest program de
una dintre opţiunile de conectare securiza- editare grafică funcţionează, aşa cum in-
tă, pentru a vă asigura că transferul nu Iată o altă aplicaţie bazată pe Java, care dică şi numele, pe arhitectura .NET. Oferă
poate fi interceptat. Una dintre facilităţile permite crearea gratuită a unui album o interfaţă uşor de învăţat, o sumedenie
inedite este cea prin care puteţi regla viteza foto online. Necesită crearea unui cont, de reglaje, lucrul pe layer-e, efecte specia-
le, posibilităţi de desenare a unor elemen-
te grafice de la zero şi multe altele. Deo- Ne-au mai plăcut...
camdată, după parerea noastră, este infe-
rior Gimp, însă cu toate acestea oferă niş- Creaţiile lui David Pye
te facilităţi unice şi foarte utile, precum şi
un istoric limitat doar de spaţiul disponi-
o serie de programe freeware,
. . .. I '1'
nlclorestncţle autllzare
(d
fără
upăcum __
-== ~.•..•..•.
mm:llI
1t"'l\~( JI\l).i,rl'lţjl!il4l'.!>"'~ ..\ 'l>"JI
I!<,.'~'-\-t."''''''~~iI<:~'':'~::O:'
•••
~-:.(»::a
~~'(.cx
bil pe disk, lucru foarte la îndemână pen- spune autorul, pe jumătate În serios, '::: : , ':. 1:r!ii ..•••. "il ~ • ; 11 Il IrW r;,lJl!of."- ClIMllll:l~
2~~~~~·Q6W~I~.a.~~~~~.~w •••~
tru prelucrările complexe, de lungă dura- pe jumătate În glumă, În afară de:::::
obligaţia de a-i informa şi pe
11of.~W••.•....
Q " •••• ,"'2>1lI •• ' ••• S~;5~ •••
''2 'r"'ldlb!lI6~.;j"'olll.,:t9ţ;)JiJ-,:;)"."".1ăl1ll
tă. Un alt element inedit este bara de sar- cunoscuţii care au nevoie de aceste
-~"
:::::
••~••B~.a~"~J~."~.~~~~.N.~
"lJI •.•• r."*'r."IH~l!l""
lIIlJlJI"' •• jj.,)lII.(\ •.••
cini proprie. Aici, documentele deschise Programe). Dezvoltate În timpul .=Ji".••
~
""i!Io
~~~~~M~S~bS
\li'/! .,:.~ 'lIIe.Qlţ\."e.e!!l~"t>~""~.
.P9W96~_Q~~",~~
apar ca registre diferite, însă navigarea în- liber de David Pye, acestea au cele _::: .\JIlS=~~"' •• iJ.01ttdl\ ••l1J.II"tA'lr.!."":!lfllll.1
mai diverse Întrebuinţări, precum ,.:::: !l'.&
.•~(lt;.i".I!>.!'>IIll"'" wealUI o ,
tre acestea este cum nu se poate mai sim-
eliminarea completă a codului
plă, datorită funcţiei Live Thumbnails, ca-
HTML sau a codului Javascript dintr-o pagină (HTML Stripper), dar şi colecţii de Javascript-uri
re permite navigarea între imagini prin- (Javascript Vault), animaţii GIF (GIF Vault), animaţii şi grafică web (Web Graphic Animation
tr-un simplu clic pe o previzualizare mi- Vault şi Web Graphic Vault), foarte utile când timpul vă presează. Accesaţi legătura când aveţi
niaturală ce substituie obişnuita şi uneori timp, cu siguranţă veţi descoperi o sumedenie de lucruri utile acolo.
confuza denumire. Deşi există destul loc Info: www.david-pye.com/index. php?page=freeware
pentru îmbunătăţiri, nu putem refuza sta-
tutul de aplica ţie recomandabilă celor
care se ocupă cu web design-ul, categorie
de utilizatori pentru care funcţiile oferite Aplicaţiile gratuite Iconico
de Paint.NET se vor dovedi a fi de obicei Pe această pagină web, veţi găsi categorie Free
suficiente şi foarte la îndemână. Tools, unde săIăşluiesc o serie de utilitare gratuite,
precum:
Info: www.getpaint.net
ColorPic - un instrument de indentificare a culorilor
cu o lupă incorporată, folositor pe monitoarele de
Înaltă rezoluţie, care afişează culorile atât În valori
Pentru cei care caută o alternativă gratuită
la programe ca Dreamweaver, editorul
HTML Nvu poate reprezenta soluţia ideală. ,
,,~
•
_
.. .... .•.•.•_ .. I
~-_..:_-
-"'"_._~,- I ,
RGB, cod hex şi zecimal cât şi În procente CMYK şi
CSE HTML Validator Lite - un instrument excelent
pentru validarea codului HTML.

Proiectul se bazează pe codul aplicaţiei

QJ::c,::;c"'-"'("C.'C~l Info: www.iconico.com
Mozilla Composer. Ideea din spatele apli-
caţiei este eficienţa şi simplitatea, Nvu
renunţând la funcţiile cvasi-inutle regăsite
în programe similare comerciale. Începă- Aplicaţie de analizare a jurnalului de Dacă aveţi probleme în alegerea combi-
torii se pot obişnui uşor cu modul de lucru accesare a paginilor web. Oferă informaţii naţiilor potrivite de culori, tot ce trebuie
şi pot chiar găsi o soluţie completă în acest statistice despre activitate, fişierele acce- să faceţi este să accesaţi legătura oferită de
program - pe lângă funcţiile de editare şi sate, traseele parcurse pe pagina web, noi mai jos. Pe baza unei culori furnizată
diversele moduri de vizualizare (normal, legăturile care au condus vizitatorii pe de voi, aplicaţia gratuită Color Wizard vă
HTML Tags, Source şi Preview), sunt pagina analizată şi multe altele. Raportul va furniza toate seturile de nuanţe com-
incluse şi un editor CSS, alături de un este predat în format HTML, incluzând plementare, analogice, variaţii precum şi
modul de administrare a paginilor web. atât tabele cât şi grafice. Este compatibil seturi a câte trei, patru sau chiar şase cu-
Desigur, sunt oferite şi machete (templates) cu server-ele web Apache şi lIS. Din lori pe care le puteţi folosi împreună pe
şi chiar un generator de cuprins, alături de păcate, nu este complet gratuit, însă l-am un website. De un real folos pentru obţi-
clientul FTP înglobat. Disponibilitatea apli- inclus deoarece considerăm că merită nerea unei scheme de culori echilibrate şi
caţiei se extinde asupra sistemelor de ope- văzut şi folosit, chiar şi numai pe durata estetice.
rare Microsoft, a distribuţiilor Linux pre- celor 30 de zile de funcţionare a variantei Info: www.colorsontheweb.com/
cum şi a sistemelor de operare Apple. demonstrative. colorwizard.asp
Info: http://nvudev.com/index.php Info: http://weblogexpert.com

Nvu ...
I

_.--ii..-.-
'

r- ......
..•..• ..,
"JfnD

.•...
. ~
.,"'"
.•.•.
'...
'

ii ii
-=:-
---
---
__.....•
__ o,
_-1
_-1
_-1
-1

•••
.- ..... -
Apache a făcut picioare!
Instalarea unui server pe o staţie de lucru nu este neapărat anevoioasă,
dar În anumite situaţii nu se numără printre posibilităţi(le viabile).
Aplicaţia Server2Go vă scuteşte de batai de cap, putând fi folosită
de pe orice mediu de stocare. Andrei Licherdopol

D
ecele mai multe ori, o pagină web va fi
găzduită pe server-ul unui furnizor
specializat, singura preocupare a
designerilor şi a programatorilor fiind
aspectul, conţinutul şi funcţionalitatea
paginii / aplicaţiei respective. Există însă
anumite situaţii în care veţi dori rularea
unei aplicaţii client-server oriunde şi
oricând. Pentru ca aceasta să ruleze corect
însă, pe calculatorul folosit trebuie să aveţi
acces la Apache, PHP, SQL şi eventual
Per!. Soluţia? O aplicaţie care să poată rula
ca server, fară instalare şi care să poată
susţine o mare varietate de aplicaţii.
Server2Go este o astfel de soluţie, care
poate fi rulată în mod direct de pe un disc
optic (CD, DVD), un stick USB sau un facilităţi, printre care suportul pentru PHP
hard disk, fară instalare. Beneficiaţi astfel 5, baze de date SQLite, MySQL 5, extensii
de un server web (bazat pe Apache) plin de PHP şi Per! 5.8. Server2Go a fost creat pentru a înlocui
programe asemănătoare, precum
WampOnCD, deoarece acestea fie nu erau
actualizate suficient de des, fie aveau
lacune destul de mari în suportul pe care îl
SEARCH ENGINE' ofereau. Astfel, pachetul oferit de Timo
Zoom Îs the e.3siest way ta add a powerful custom search enoine te your Haberkern se bazează pe WAMPP. Licenţa
website, Intranet, or CD-ROM and DVO. Take the taur, download Dur
software, and see how easy it is for yourself. este donationware, însemnând că poate fi
folosit gratuit, dar că totodată nu ar strica
să faceţi o donaţie în cazul în care îl folosiţi
latest version: 5.1.1011
Wh~t's new I Fe~ture list I Corr,p"re edltlons I
intens sau în scopuri comerciale.
UpQfade ta Yţrslon 5.1

Watch the ",Ideo » Mic, dar deştept!

Flash mO •...I!;' (2.0MB, sound required) or HTtI\L tour (200KB) Practic vorbind, utilizatorii acestei aplicaţii
se vor bucura de tot ce oferă pachetul
Your very QWnfull-text search engine
WAMPP:
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 ~ suport pentru Apache l.3.x, 2.0.x şi 2.2.x;
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 ~ suport pentru PHP 5.2.x cu extensii, ală-
Windows computer.
turi de posibilitatea de a folosi versiunile
Simple, powerful, and flexible » Take the tour
See how Zoom ~n add search to your 4.4.x şi 5.0.x;
• Easy te use and install, up and running in minutes website in CI matter of minutes
• No advertisin9, no annual fees ~ suport MySQL 5;
• No scripting knowledge or editing reQuired ~ suport Per! 5.8 (multe module CPAN
• Ne complicated database setup procedure
• Ne extern al web service required integrate);
• Highly configura bie ~ suport pentru integrarea cu sistemele
• Search static and dynamic web pages (.HTML, .PHP, ASP•. eF. etc.)
open-source de management al conţinutu-
MOTORDECĂUTARE.Aplicaţia Zoom Search Engine poate fi integrată perfect cu Server2Go, lui Joomla! şi Contrexx.
pentru asigurarea unei interfeţe de căutare. Mai multe detalii la adresa Desigur, pe lângă aceste facilităţi, inter-
www.wrensoft.com/zoom/support/cgicd.htm I vin funcţiile Server2Go. Bunăoară, apli-
 caţia se adaptează la mediul în care este
. rulată, detectând automat porturi libere Instalarea Server2Go
pentru Apache şi MySQL, setările proxy şi
configurând automat Apache, PHP şi
MySQL în funcţie de împrejurări. Desigur,
II Server2Go 1
Fiind vorba de o aplicaţie cu un
grad mare de autonomie, de la
procurarea la punerea În funcţi-
poate fi configurat astfel încât să utilizeze une a acesteia sunt doar câţiva
setările prevăzute de către programator. paşi simpli:
Mai mult, Server2Go funcţionează per-
fect şi pe medii read-only, precum CD-R
~,,~!!1!~~_~,!!!!!!!!I'
,~-
D Accesaţi pagina web www.
~<~ •• server2go-web.de/ down load/
sau DVD-R. Server-ul pornit automat la download.html. Alegeţi şi descăr-
inserarea discului nu este vizibil de către caţi unul dintre pachetele
utilizator, autorun-ul lansând automat disponibile. Acestea sunt de
navigatorul web, conectat la hostname-ul mărimi şi configuraţii diferite, În
funcţie de necesităţile dumneav-
şi portul stabilite prin autodetecţie. La
oastră.
închiderea navigatorului web, serverul se
opreşte automat. f] Dezarhivaţi aplicaţia Într-un
De asemenea, baza de date poate fi director. Tot conţinutul adăugat
de voi (script-uri PHP, imagini,
folosită direct de pe CD-ROM sau prin
pagini HTML) trebuie plasat În
copierea temporară pe calculatorul gazdă.
directorul htdocs, cu excepţia
Aceste trăsături fac programul potrivit bazelor de date, care vor fi
pentru realizarea unor discuri de ~~\OOCIA'l'e'tln5e ...\sesvef2g0_a2...P1mP.zip 1 plasate În directorul dbdir.
prezentare, ce pot fi distribuite şi utilizate _"" 1%1
Fişierele de configurare sunt
~:!!'!!!!~:5!!!!!!!'!!!!!!!!'!!!!!!!!!!!!!!!!!!IJ pms_config.ini (pentr Server2Go)
fară nicio problemă pe majoritatea sis-
00:00:201 şi celelalte fişiere obişnuite afe-
temelor. 0002'.14
rente Apache, PHP şi MySQL.

Unde poate fi rulat?

~-8"""'-ound-~1
~IP.... I
EJ Configuraţi aplicaţia dum-
Ca şi compatibilitate, deocamdată suportul neavoastră web să ruleze corect
__ c....,_oI __ I~~
prin Server2Go şi asiguraţi-vă că
se extinde asupra sistemelor de operare
toate fişierele necesare se găsesc
Windows 98, Windows Millenium plasate corespunzător În direc-
~---~.:I
1Q."I'lOtLIllI:Mf«.
••• rMl..11lll -_=, 0°
.•
Edition, XP, 2000 şi Vista (pe acesta din torul pachetului descărcat de pe
urmă fiind necesare drepturi de adminis- -0;)- ..J'"
, ..•...
1.779a1ftoflll... 11.0UD.(.~"'settng ... internet. Verificaţi Încă o dată
.~~ ....J~ Il'llFtel'<ll..11.0920. .. C.~wSotMcl.··
weo-bol ...J-
trare). În curând, va fi integrat complet şi -...J<idt ...J"
1261:8 Aokt .• 11.092':1
l'I1IF1tfd. .. 17.0920.
... C~_Soa:h;I
•. C'~""'SltmQ
.
. dacă totul funcţionează cum
..J"'I'«lI ~~ IlIOlll Flefd 17.0\1,20..• C\D<Io:UI>erUrd5oC:tltlQ
•••
U~ ••••• ...J- 285.6640ftofd 170\120. .. C,~_5iItlnl .. v-aţi dori şi faceţi ultimele setări
suportul pentru MacOS, lucru îmbucură- u_Zoo :,j1t.tCnl>.rl
llgcJc:U.dI
l~~l JO.05.:?lI
1.6U1I11~,04,(l5.ZO'c~..,~
.. C··'O"N•••.( •• <'d~ ••
...
;.Jdh
4..,jhldoc. loQo.io> SOO1ltrl••••.. l·Il8.211C.~..,5etln;. .. necesare. Pregătiţi fişierele pen-
tor. • j;:;;oCL»s-1I.6 ~;:;:'' :' ' ~:~~:.~:::~:=::=::: tru scriere pe un disc optic, astfel
Navigatoarele web cunoscute
Server2Go sunt Internet Explorer 6 şi 7,
de
'u-
-~
~::~nt $6<0 "«11<•...
I~S ~'ltf ..
1709·lO ..
nll8.l0 ...
l1r:slrl_,.1'0ll.i'O ..
C'\DOatnOnlSrd5ettrq
c.\Docu'NrU.nl5eltn;J
C·~an:lsettn;l".
.••

Încât rădăcina Server2Go (unde

găsiţi fişierele autorun.inf şi
Mozilla Firefox, Safari şi Camino, alături
6e tdt ib'r a-der ~as ~ ~ t\etl Server2Go.exe) să coi ncidă cu
~L.1il'> ~ ,-'t:"J..) rădăcina discului. Aveţi nevoie de
de cele care pot fi integrate pe CD, alături ;)~
minim cinci elemente În
de aplicaţie (Simple Browser, Discstarter, ~,.."., lS01_0v0ffoditl) rso~
rădăcină: fişierele Server2Go.exe,
Portable Firefox). Cu alte cuvinte, autono- f1"" T_

"""
,-

"",",'' ' ' ' pms_config.ini, autorun.inf şi

mia aplicaţiei este remarcabilă, nefiind directoarele server şi htdocs
(Împreună cu Întreg conţinutul
nevoie cu adevărat decât de un sistem de ~iia P..eodl
acestora).
operare compatibil. '"'"
S~
1/1
~.41155'OKB/;l

~ Inscripţionaţi discul şi faceţi o

Pe viitor ..• verificare. De acum, odată ce
introduceţi discul Într-un sistem
Dezvoltarea versiunilor următoare includ
o serie de noi facilităţi cu adevărat intere-
sante, dintre care amintim suportul 100%
r
r~
=------.;-;;;;---"o;;;"';;;·"'::;~.---,·;;:;--=s ••••
?IO"[ERD'.'tI~rtV

r~"'_d!t6
•••Ibon~pc"""o-
lde
;;;:------
fl-"l compatibil, vă veţi putea bucura
de aplicaţia creată, acum com-
plet independentă de pachetul
pentru Vista (momentan necesită drep- software de pe PC-ul gazdă!
turile de administrator), pentru MacOS X
(aflat încă în fază beta), suport integral Cu această listă impresionantă de xibilă, poate fi facut să funcţioneze cu
pentru PortableFirefox, Lightttp, JSP facilităţi deja disponibile sau care vor fi majoritatea tehnologiilor care vă trec prin
(Tomcat), GIF-uri animate în ecranul de introduse în viitorul apropiat, Server2Go cap. Este o idee excelentă să-I folosiţi pen-
pornire, recopierea bazei de date plasate este, spunem noi, cea mai potrivită tru a vă crea un disc de portofoliu cu de-
local pe mediul de stocare Server2Go metodă de a rula aplicaţii web de pe un monstraţii ale tehnologiilor şi aplicaţiilor
(funcţie excelentă de exemplu pentru uti- mediu portabil de stocare, mai ales că proiectate de dumneavoastră. Varianta
lizarea unor aplicaţii web de administrare Timo Haberkern este deschis discuţiilor 1.5.1.0 se găseşte şi pe CD-ul CHIP
şi contabilitate de pe stick), suport pentru în legătură cu cele mai diverse implemen- Special, în secţiunea Servere. Spor la pro-
Python, Firebird, Ruby on Rails şi Opera. tări. Astfel, Server2Go, aplicaţie deja fle- gramat!
Mai multe despre WAMP
Server2Go nu este însă unicul pachet de tre aceste pa-
software ce oferă posibilitatea de rulare a chete de dis-
unui server web, ci face parte dintr-o fa- tribuţie au fost Service... II__S_C_M_.,_,_
milie software denumită WAMP. Acro- incluse pe CD:
nimul se referă la "Windows, Apache, EasyPHP, rModules--
MySQL, PHP" şi este înrudit cu LAMP phpdev, Uni- ~ Svc Apache Stop II
Admin..,
I Status
I I
(unde L semnifică un alt sistem de oper- form Server, Refresh
~Svc Stop II
Admin.., I
,1 I
are, anume Linux). Prin asocierea celor WampSrever, Explore ...
patru programe antemenţionate, WAMP Web-Deve- O Svc Start II
Admin
I I Help
oferă o platformă care în ultimii trei ani a loper Server
Suite, WOS-
O c Start II
Admir I Exit
devenit foarte populară. Există o varietate 1
largă de distribuţii W AMP. Portable şi ~b~PP Cont~ol Panel Ve~sion 2.5 (9. May, 2007)
Tabelul alăturat oferă o sinoptică a XAMPP, ală- Windo~s 5.1 Build 2600 Platfo~m 2 Se~vice Pack 2
celor mai populare 27 de pachete cu dis- turi de Ser- Cu~~ent Di~ecto~y: f:\xampp
Install Di~ecto~y: f:\xampp
tribuţii WAMP (sursa fiind Wikipedia ver2Go.
Status Check OR
http:// en.wikipedia.org/wiki/Comparison Dintre toa-
_oLWAMPs) te pachetele
O privire mai atentă asupra tabelului din tabel,
ne permite să facem câteva observaţii: XAMPP este
~ există o preocupare susţinută în dez- singurul care
voltarea unor asemenea pachete de dis- oferă distribu- COMPLET: XAMPPconţine printre altele şi serverul FTPFilezilla.
tribuţie pentru Windows; ţii pentru cele
~ 14 din cele 27 pachete de distribuţie au mai răspândite sisteme de operare: Linux, MySQL, Apache şi Peri (în variantă
licenţa GPL (GNU General Public License Windows, Mac OS X şi Solaris. Altfel redusă), alături de phpMyAdmin pentru
- este o licenţă de distribuire liberă a pro- spus, XAMPP este cross-platform. administrare. Permite mod3uth sub
gramelor de calculator); MySQL, o soluţie interesantă de securitate.
~ serverul de web httpd este Apache, cu Ce conţine XAMPP? Distribuţia completă oferă în plus bi-
două excepţii; XAMPP este un server web complet. blioteca SSL(Secure Socket Layer - proto-
~ toate pachetele de distribuţie au încor- Pachetul XAMPP are două distribuţii, col de securizare a schimbului de infor-
porate PHP şi MySQL; una completă şi alta care oferă doar maţii pe internet) şi aplicaţii ca Webalizer
~ administrarea MySQL se face cu funcţionalitatea de bază. - analizarea traficului pe website, Mercury
phpMyAdmin, cu trei excepţii; Distribuţia "uşoară" conţine PHP, - un server de transport a mail-ului,
JpGraph - bibliotecă pentru crearea de
grafice online, FileZilla - un excelent ser-
ver FTP şi multe altele.
În ceea ce priveşte punerea în funcţi-
une a XAMPP, acesta se poate procura
direct de pe internet. Una dintre adresele
unde veţi găsi ultima versiune este
CongnwlltlorlJ:
You WC(U,fuU~ if'IstJHed XAHPP lin mis S'('lUml
http://sourceforge.net/ projects/xam pp/,
NOwyO!o GIt' Start 1.o~..o",*,,"'llnlc.o
/fiM ~ t'le'"fUWQ"cru llr~
rIl"SU1'fD.. ~1dt,.., o~'"'to
·SI<1tl.lS,.onltl<ltlt mărimea fişierului fiind de circa 50 MB.
Distribuţia se găsesşte sub formă de pro-
gram executabil, alături de un script de
configurare a serverului. XAMPP are
instrumente de verificare a instalării şi de
control a securităţii componentelor.
După instalare, XAMPP oferă un panou
de control. De aici se pot activa şi dezacti-
va componente (servicii) XAMPP.
Server-ul instalat poate fi apelat din
orice navigator web, introducând adresa
http://localhost. Spaţiul accesibil naviga-
torului se regăseşte în subdirectorul
Ihtdocs, subordonat directorului de insta-
lare XAMPP. Prin copierea în /htdocs a
directoarelor Isurselphp-div-css-js şi
Isurse/php-mysql-div-css-js de pe CD veţi
putea vedea exemplele în lucru.
 Mărime Server Optimizare
Data phpM- SQLite
Pachet Versiune Ucenţă Apache PHP MySQl Open SSl moetssl mod....Perl
lansării (MB) HTTPD Admin Manager Zend

Apache 2006.
3.5 6.9 GPL 1.3.36 4.4.2 4.1.16 - - - - 1.29 2.6.2
Swissknife 05.06

Apache2 2006.
1.5.4 95.8 GPL 2.2 5.1.2 5.0.18 2.7-pI2 2.8.15 0.9.8a 2.2 2.0.1 2.6.2
Triad 02.20

2007. necunos-
AppServ 2.5.8
02.20
20 2.0.59 5.2.1 5.0.27 2.9.2 1.2.0 - - - 2.5.10
cută

2007. donation-
AutoSet 4.3.1 22.4 2.0.61 5.2.5 5.0.45 2.11.3 - 0.9.7m 2.0.61 - 3.3.0
12.16 ware

2006. necunos-
Denwer Base 3.1 1.3.33 4.4.3 4.1.16 2.6.1 - - - - -
10.04 cută

2006.
EasyPHP 2.0b1 13 GPL 2.2.3 5.2.0 5.0.27 2.9.1.1 - 1.2.0 - - -
12.23

e-novative 2005. donation-

2.1.1 21 2.0.x 5.x 4.1.x 2.x.x - - - - 3.x
WAMP 12.19 ware

2006.
fvpatwds 0.1.7 33.7 GPL 2.0.58 5.1.6 5.0.26 2.9.0.2 1.2.0 - - - -
11.14

Glossword 2.2.8/5.1.22/ 2008.

5.3.0 01.20
5.1 GPL 2.2.8 5.3.0-dev 5.1.22-rc 2.11.4 - - - - -
WAMP

2007. LightTPD/ (MiniPerl/

Ughty2Go 1.2 69.6 GPL
1.4.18
5.2.5 5.0.50 2.11.2.2 - 0.9.8g (integrat) -
12.11 CGI)

2006.
MyWAMP 1.2.3 22.9 CC Mexico 2.0.55 4.4.2 4.1 2.3 - - - - -
03.24

2005. necunos-
Net5erver 0.1 23.4 2.0.54 5.0.4 4.1.14 2.6.4-pI1 - 0.9.7g 1.99_16 - -
12.02 cută

2008.
PAMPA 0.6
01.02
11 GPL 2.2.6 5.2.5 5.0.45 2.11.3 - 0.98e - - -

2007. necunos·
phpdev 4.2.3 - 1.3.27 4.2.3 4 2.3.2 - - - -
05.05 cută

Repos 2007.
2.1.0 10 Apache 2.2.6 5.2.5 oricare - - 0.9.8e - 3.3.0 -
Server 12.21

2007. donation- 2.0.54,

Server2Go 1.5.0 90 ware (cu
1.3.35
5.2.3,4.4.7 5.0.41 2.10.3 - - - CGI Peri 5.8 -
09.14 restricţii)

2007.
SNAW 0.1.1 - CeCILL 2.2.4 5.2.3 5.0.41 2.11.1 - - - - -
09.23

Spike 2007. eAccelerator

sour~ 1.0 beta 22 OSL 2.2.6 5.2.5 5.0.45 - 0.9.8d - - -
SpikeW P 12.12 0.9.5.2

Uniform 2007.
Server
3.5 7.2 licenţă BSD 2.0.59 5.2.3 5.0.41 2.10.2 - - - - -
07.05

2007.
VertrigoServ 2.19 9.6 GPL 2.0.61 5.2.3 5.0.45 2.11.2.2 1.2.0 - - - 3.3.0
12.02

War;xserver 2007.
(a erior 2.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
WAMP5) 11.21

Web- 2007.
Developţ!r 2.00
11.10
30.8 GPL 2.2.6 5.2.5 5.0.45 2.11.2 - 0.9.8g - - -
Server Suite

2007.
WITSuite 1.0 1.0 comercială 2.2.6 5.2.5,4.4.7 5.0.45 2.11.2.2 - - - - -
12.19

2007. LightTPD/ (MiniPerl/C

WLMP 1.1.5 14.3 GPL 5.2.5 5.0.50 2.11.2.2 - 0.9.8g (integrat) -
11.21 1.4.18 GI)

WOS 2007.
Portable
2.1.0 44 GPL 2.2.4 5.2.3 4.4.7 5.0.41 2.10.2 - - - - -
07.17

2007.
XAMPP 1.6.5 32 GPL 2.2.6 5.2.5,4.4.7 5.0.51 2.11.3 - 0.9.8g - 2.0.3 3.3.0
12.24 ,
2007. GPL/
ZendCore 2.5
10.09
40.6
comercială
2.2.4 5.2.4 5.0.27 2.10.0.2 - 0.9.8e - - 3.3.0
PROGRAME· GIMP 2.4.2

'{.ew il'l'laQe I.ayer ~oIors lools ~ F*etS

t2S0 !

8
~---'31
.,.,----JllOo,o '::::J

RectMQle Select

Mod.
,-

Procesare gratuită de
imagini pentru web
Dacă nu doriţi să cheltuiţi bani pe un editor grafic precum Photoshop, dar aveţi totuşi nevoie de o aplicaţie capabilă
şi flexibilă, soluţia nu poate fi decât GIMP. Andrei Licherdopol
A
norice domeniu în care se impune păcate deloc sau pUţin accesibile pentru trant, dar peste care totuşi se poate trece cu

I editarea imaginilor de tip raster (nevec-

toriale, bazate pe pixeli), Adobe deţine
supremaţia, oferind Photoshop, de departe
varianta de Windows (lucru deloc sur-
prinzător de altfel). Chiar şi fară acestea, vă
puteţi face treaba fară probleme cu GIMP.
uşurinţă.
Odată ce deschideţi sau creaţi un docu-
ment, apare spaţiul de lucru cu respectivul
cea mai capabilă aplicaţie de acest fel. document, constând într-o fereastră sepa-
Posibilităţile de utilizare sunt aproape GIMP nu muşcă! rată, cu o bară de meniu consistentă (toto-
nelimitate. Nu toată lumea îşi doreşte sau La primul contact cu "lupuşorul", s-ar dată utilă şi cuprinzătoare, după cum veţi
permite însă cheltuiala - pentru aceste ca- putea să fiţi puţin speriaţi de interfaţă. descoperi). Mai mult, cu un clic dreapta de
tegorii, propunem probabil cel mai popu- Pornind programul, veţi constata că nu mouse pe suprafaţa de lucru, aveţi acces
lar editor grafic gratuit - GIMP. În de- există niciun spaţiu de lucru în sensul în rapid la toate funcţiile şi meniurile impor-
cursul mai multor ani, GIMP a suferit îm- care v-a obişnuit poate Photoshop - şi nici tante.
bunătăţiri enorme faţă de variantele incipi- meniuri. Orice funcţie apelaţi, aceasta se va
ente. Se poate spune că versiunile de actu- deschide ca o nouă sarcină Windows
alitate (2+) oferă aproape tot ce şi-ar putea (portarea nu a luat în calcul obişnuinţa uti- Revenind la mica fereastră cu instrumente
dori un utilizator. Cu atât mai mult în lizatorului tipic de Windows ca fiecare care vă întâmpină la pornire, veţi remarca
cazul activităţilor ca web design-ul, pentru aplicaţie să aibă un spaţiu de lucru şi un în partea inferioară un spaţiu gol, unde vă
care GIMP oferă un suport deosebit. meniu evidente chiar de la pornire şi să este indicat că puteţi integra orice fereastră
Totodată, se găsesc extensii care simplifică poată lucra ca sarcină unică, indiferent ce de lucru independentă doriţi. Cu un dublu
foarte mult lucrurile, însă acestea sunt din funcţii apelează), lucru care poate fi frus- clic pe oricare dintre instrumente, veţi
deschide o fereastră cu setări. Trăgând totul. Este de remarcat preClzla instru-
+ <.

.~..
• ţ' ••.

denumirea funcţiei (aflată imediat sub bara mentelor, lucru foarte important pentru .• ,. •.• ClA
LJI.i..,;<I.. I

de titlu a ferestrei) în acel spaţiu, veţi con- web, ca şi lucrul cu textul, în cazul de faţă
stata că aceasta "se lipeşte" acolo. Desigur, facil, fiind puse la dispoziţie o serie de
în funcţie de instrumentul selectat, meniul setări foarte utile în acest domeniu. Măsu-
proaspăt anexat în partea de jos se va mo- rarea se face cu un instrument dedicat şi cu
difica. Puteţi folosi mica săgeată aflată în ajutorul liniilor şi riglelor de ghidaj, toate
colţul din dreapta sus al ferestrei deschise / complet personalizabile.
spaţiului de andocare pentru a adăuga noi
registre cu funcţii, pentru a detaşa funcţia Layer-e şi imagini
selectată sau pentru a administra setările Un alt aspect important este lucrul pe FLEXIBIL: Ca multe alte programe, GIMP
facute instrumentelor (lucru deosebit de aşa-numitele layere, "straturile" imaginii. permite aranjarea tuturor modulelor după
util şi accesibil). Astfel, ceea ce părea la GIMP adoptă o funcţie similară cu cea din bunul plac şi În mod independent, oferind toate
început puţin şi confuz poate fi organizat Photoshop, atât ca utilizare, cât şi ca posi- instrumentele necesare lucrului pentru web.
cu mare uşurinţă în orice configuraţie vă bilităţi. Sigur că Adobe oferă mai multe
trece prin minte. Confortul devine maxim, moduri de a despica firul în patru, dar pen-
iar controlul oferit este total. tru ceea ce reprezintă procesarea ima-
ginilor pentru web, aceste moduri supli-
Totul la degetul mic mentare sunt irelevante. Astfel, în GIMP se
Dacă tot am vorbit mai devreme despre pot practica majoritatea tehnicilor de pre-
fereastra cu spaţiul de lucru şi cu bara de lucrare folosite în Photoshop. Pentru pre-
meniu, merită menţionat că acel clic lucrarea foto, sunt puse la dispoziţie şi o
dreapta pe suprafaţa de lucru care aduce serie de filtre, care în totalitatea lor întru-
toate meniurile în imediata apropiere a nesc mai mult decât un pachet esenţial ACCESIBILITATE: Orice instrument sau funcţie
pointer-ului, vă scuteşte atât de excursiile (pentru designeri şi fotografi). din GIMP pot fi accesate prin meniul contextual
enervante prin meniuri tipice Photoshop Optimizarea imaginilor pentru web este din fereastra de lucru cu imaginile. Adio
cât şi de alternativa la acestea - memorarea cum nu se poate mai simplă, oferindu-se călătoriilor către marginile spaţiului de lucru!
unei liste interminabile de comenzi rapide multe opţiuni şi algoritmi de compresie, •..
::.
_- ~ ~..
..... _ •.. - .... - ... --
t=o. re ••• _ _

din taste. Dacă în teorie nu vi se pare prea precum şi previzualizarea imaginii altături •• t' •• A
••••. A
+
elA L'.' . ,----.
relevant, câteva ore de practică vă vor de dimensiunea estimată a fişierului. -' "oS,.'" ,iJr

convinge de avantajele funcţiei. Aceasta cu Desigur, puteţi folosi toate formatele de

atât mai mult cu cât şirul de meniuri în imagini relevante pentru web şi chiar
cauză vă conduce atât către cele mai puteţi salva fişierul în format PSD, 100%
importante funcţii şi setări, cât şi către compatibil cu Photoshop.
orice instrument pe care aveţi nevoie să-I
folosiţi la un moment dat, fară a deplasa De luat În considerare
mouse-ul mai mult de trei-patru cen- În timp ce utilizatorii care au acces la FUNCTIONALITATE EXTINSĂ: Utilizatorii de Linux
timetri. Photoshop şi cunosc această aplicaţie nu se bucură de prezenţa anumitor extensii utile,
au niciun motiv să treacă la GIMP (acest precum Py-Slice. Aceasta ştie să genereze
Arsenalul de instrumente lucru implicând dezobişnuirea parţială de automat un fişier HTML pe baza unui decupaj
Am stabilit deja că GIMP este flexibil şi Photoshop şi învăţarea lui GIMP), cei care dinGIMP.
comod de utilizat, să vedem însă ce posibil- au nevoie de o soluţie gratuită, fie din prin-
ităţi de lucru avem cu acesta. Când vine cipiu, fie datorită unor constrângeri finan- multe alte documente publicate de utiliza-
vorba de web, este clar că printre cele mai ciare, pot apela cu încredere la acesta. torii acestui program, alături de forum urile
importante instrumente se numără cele de Trebuie menţionată că deşi există variantă dedicate.
selecţie, măsurare şi decupare, alături de de Windows, compatibilă inclusiv cu
posibilităţile de prelucrare a imaginilor şi Vista, am întâmpinat ocazional încetiniri şi Hi@@j Varianta de Windows poate fi
lucrul cu formatul acestora. Aici, progra- blocări care nu se petrec dacă îl folosiţi pe folosită fară prea mari probleme şi limitări,
mul gratuit oferă absolut tot ce ar putea Linux. În acelaşi timp, varianta de Linux cu atât mai mult cu cât calitatea şi viteza
avea nevoie un designer. Cele opt instru- poate fi îmbogăţită cu tot felul de extensii portării a crescut mult şi va creşte în con-
mente de selecţie (inclusiv instrumentul utile, multe dintre acestea neputând fi inte- tinuare. Noi îl considerăm un editor grafic
Path), alături de multitudinea de opţiuni grate cu uşurinţă sau deloc pe Windows. care oferă toate uneltele necesare lucrului
aferente acestora asigură izolarea oricărui Un exemplu de extensie foarte utilă este pentru web şi îl recomandăm călduros, cu
element cu un minim de efort, în funcţie Py-Slice, care generează automat un fişier menţiunea că cei dispuşi să ruleze şi Linux
de experienţa de lucru cu acestea. Nu toate HTML pe baza ghidajelor inserate în (există multe distribuţii gratuite, ideale
lucrează la fel de bine ca şi cele din fişierul de imagine cu GIMP. pentru începători, precum Ubuntu) vor a-
Photoshop (Scissors Select versus Magne- Din punct de vedere al documentaţiei, vea o serie de avantaje importante, pornind
tic lasso), dar odată stăpânite, micile pro- GIMP se bucură de un manual online bine de la stabilitate şi terminând cu extensiile ce
bleme şi imperfecţiuni iniţiale dispar cu pus la punct, în completarea căruia vin se integrează cu uşurinţă în aplicaţie.
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. Savuraţi-Ie. Mihaela Dogaru

pagină web nu este niciodată fma- existe pe un server, legătura fiind facută

O lizată, iar aceasta pentru că după

structurare a site-ului vine rândul
muncii de fineţe şi apoi primele aşteptări
D Imageshack.us
Posta rea de imagini
pe forumuri şi bloguri
prin intermediul unui link, astfel încât fo-
tografia să fie vizibilă. Cel mai uşor de pro-
cedat în acest sens este prin intermediul
în ceea ce priveşte magazinul online. Noi Doriţi să postaţi rapid o fotografie pe un serviciului online www.imageshacks.us.
vă arătăm toate punctele' în care mai forum sau un blog? Pentru majoritatea Acesta vă permite să încărcaţi pe serverul
puteţi face optimizări. mediilor de acest tip imaginea trebuie să său, gratuit, cu dimensiuni de până la 1
 dului W3C. Aceasta se face simplu,
apelând la serviciul W3C Markup Valida-
tion Service - http://w3.org.

ImageShack HTML
Site-uri mai suple
Numeroase editoare grafice HTML au o
New to ImageShack' Cre-dte o p,.oflle or 5lideshow upIoad:(.' lmaQe r uri Î video r multlploader Î recorder
I 8,,,,,,,"-. I
problemă: acestea scriu comenzi sau ca-
ractere inutile în codul HTML. Atunci
când converti ţi textele din Word în
HTML aveţi aceeaşi problemă: codul
r restZernal}e' 320x240 (for websltes and email) ..:J HTML este inutil de mare. în ajutor aici
r femove si!ejresolution bar from ~
allowed: jpg jpeg png gif bmp tit tift swf < 1.5 megabytes.
vine editarea manuală, cel mai bine rea-
lizată în Notepad. Acest utilitar de
Windows nu introduce în codul HTML

a POSTARE OE IMAGINI:
forumuri fotografii
CU ajutorul

proprii.
imageshack.us puteţi posta sau Încărca gratuit pe alte caractere decât cele introduse de
dumneavoastră. în cazul în care editorul
dumneavoastră "What You See Is What
MB. Şi mai bine este că înregistrarea pre- Un comentariu în CSS începe cu /* şi You Get" converteşte câteva spaţii pentru
alabilă nu este necesară. Accesaţi pur şi se termină cu */: a obţine o structură frumoasă a codului,
simplu site-ul şi căutaţi imaginea cu aju- /* stylesheet pentru paginile exemplifica- înlocuiţi spaţiile cu taburi. Au acelaşi
torul funcţiei Search. Un clic pe Host it toare din CHIP Special */ efect, dar ocupă spaţiu mai puţin.
trimite imaginea. După încărcarea aces- La conceperea comentariilor, gân-
teia, aveţi de ales între mai multe URL-uri diţi-vă că acestea nu sunt vizibile efectiv
pentru fotografia dumneavoastră: acestea în fereastra browser-ului, dar că există în EILogoIrfanView
Înaintea bookmark-ului
fac referire la un thumbnail accesibil textul sursă şi că ele pot fi citite de fiecare
printr-un clic de mouse, la imagini adap- vizitator. Pentru ca vizitatorii paginii dumneavoas-
tate pentru anumite forum uri şi la ima- tră web să o poată regăsi rapid şi pe viitor,
ginea în sine. Copiaţi aceste URL-uri şi în colecţia lor de bookmark-uri, vă puteţi
introduceţi-le în post sau pe pagina dum-
neavoastră web. Imageshack recunoaşte
11 HTML
Testarea paginii web
afişa logo-ul site-ului înaintea URL-ului.
Pentru aceasta, modificaţi-vă logo-ul la
următoarele formate de imagine: JPG, În mai multe browsere dimensiunea de 16 x 16 pixeli, cu 256 de
JPEG, GIF, TIF, TIFF, BMP, SWF şi PNG. Este foarte important să vizualizaţi culori. Folosiţi cel mai bine utilitarul gra-
Fotografiile în formatele "voluminoase" paginile web abia create în browsere tuit Irfan View, care poate salva imaginea
TIF, TIFF şi BMP sunt convertite automat diferite. şi când spunem acest lucru vă în formatul ICO. Salvaţi acum logo-ul
de către software în imagini PNG. Puteţi recomandăm să instalaţi programele de micşorat ca favicon.ico şi stocaţi imaginea
încărca astfel câte fotografii doriţi, cu con- navigare Firefox sau Opera, dar puteţi fi în directorul principal al serverului dum-
diţia ca prin aceasta să nu lezaţi nicio lege siguri că acest mic efort va merita. Dacă neavoastră de web - în bookmark-uri şi în
(referitoare la dreptul de autor sau altele). nu doriţi totuşi să faceţi noi instalări, bara de adrese apare imediat "noul" logo
alternativa este constituită de site-ul al paginii.
www.browserpool.de. serviciu care are şi
B HTML şi CSS
Comentarea codului
La scrierea codurilor trebuie să vă acor-
o versiune în limba engleză, dar care nu
este însă gratuit. în special atunci când
folosiţi programări ar trebui să efectuaţi
m HTML
Protejarea imaginilor la copiere
daţi întotdeauna timp pentru a prevedea obligatoriu această verificare în mai multe Odată prezenţi în internet, nu este exclus
textul sursă cu comentarii - astfel încât să browsere. Profesioniştii îşi testează să vă găsiţi la un moment dat pe alte pagi-
puteţi şti şi peste câteva luni ce scop aveau paginile web chiar şi pe alte sisteme de ni web fotografiile şi elementele grafice la
anumite paragrafe. Modalitatea este dife- operare, pentru a vedea dacă aspectul şi care aţi lucrat atât de mult şi la care ţineţi.
rită în cazul HTML şi CSS. funcţionalitatea acestora se păstrează. Foarte supărător. Există însă modalităţi,
Un comentariu în cadrul unui fişier Pentru a vă asigura că site-ul dumnea- dacă nu de a împiedica, măcar de a face
HTML începe cu <1- şi se termină cu ->: voastră "se vede bine" şi în alte browsere, cât mai greu posibil furtul fotografiilor
<1- textul mai trebuie prelucrat -> codarea ar trebui facută conform standar- postate online: încărcaţi imaginile dum-
.dm..'9
Ele ~<it ~iew ~y flooI:mao1<s ~ahool !001< tjeIp

.1 !!Itttp,II_.chip.ro/
I!I LOGO ÎNAINTE DE URL: Pentru ca vizitatorii paginii dumneavoastră web să o poată regăsi rapid ~i pe viitor, În colecţia lor de bookmark-uri, vă
iii puteţi afi~a logo-ul site-ului Înaintea URl-ului.
 ~ TemplateMonster.com
Integrarea imaginilor de fundal
Cu ajutorul CSS puteţi integra foarte uşor
imagini de fundal pe pagina dumneavoastră
web. Dat fiind faptul că browser-ul aşează
întotdeauna imaginea CSS peste culoarea de
1cmplate 'lollsler Web Templal'"
T~4! f'r'loNtet'webste t~e-s. flash t~es and «hei' procb:ts are teadyofl\ade: web fundal, va trebui de asemenea să o definiţi şi
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 pe aceasta - pentru cazul în care utilizatorul
dowriood
We ~ T~e."1onster .com do our best to PfO"tIde you V<"th web t~es desq'l t:J prerrun a blocat opţiune a de afişare a imaginilor.
quolly.
Pentru o imagine de fundal folosiţi pur şi
simplu următorul cod în fişierul CSS:
<style type="text/css">
Type: Css static full
packa/Je Type: (ss full site nash 8 div.bg {
Item: #18121 Item: '18126
Aut"", t!IQQ Authot: ~ background-image:
Oownlood" O OowrO>ads, 1
urI(..fi mag ini/fu ndal.g if);
$66 Puee
'$2650 l.hlQue-Pl'l(e
background-color: blue;
width: 640px; he ight: 80px;
border: 1px solid red;
padding:20 px;
}
</style>
A Cr.lStmas lott~ ~l fnalyl . Jdn 23rd; 2008
The Pr~ T~e h.!s been selected by the CtylStm~ loUtf")' Wsmer ~ 1$now on ts
şi în "corpul" fişierului dumneavoastră
Wltf ta Gteecel
Prerryn T~'ti ProdJchon Te-.-r.noloqY la>p:hzi 1 .JJ;t 9rh, ZOO8
-
HTML:
Tempk.teMonster ~ a re-orokJbor\aty, new produc.t.on tedrJO!oqy fhie
thev new eateq::wy rJ Premun Desql T~es.
offerng <body>
The HoIIday ISnot Qveţl . .J.dn••ţiţ 20CS Pn:e <div c/ass="bg">
Ned weekwt'l knowthe ~s oi Template1'o'(lnsl:~'s ChtIStmMlott~1. Lhque Pu::e
div-Container cu imagine de
P;I MAGAZIN CU TEMPLATE: Pe TemplateMonster.com găsiţi designuri profesionale pentru fundal
iii magazinul dumneavoastră online. </div>

neavoastră într-un câmp tabelar, ca fun- A:hove r {color:line ;text-decoration:

dal. Câmpul trebuie să aibă exact dimen- underline ;}
siunea elementului grafic. Amplasaţi A:active {color: red; background: #006699; Zoom pe imagini
acum un GIF transparent de un pixel în text-decoration: none; } Este foarte util şi plăcut pentru utilizatori
tabel, peste imaginea de fundal. În /1 - - > ca, în momentul în care pun mouse-ul pe o
momentul în care "hoţul" va dori să </style> imagine, aceasta să se mărească pentru a
stocheze imaginea pe hard disk-ul său, va Puteţi folosi şi alte culori decât cele din putea fi admirată mai bine.
fi foarte surprins să fi făcut rost de un exemplu, cum ar fi albastru marin, negru Pentru aceasta, în primul rând alocaţi
simplu GIF de un pixel. Dacă doreşte fucsia, verde, maro, bleumarin, oliv, mov, imaginii o clasă CSS, după care atribuiţi-i
într-adevăr, el poate ajunge la imaginea argintiu, alb, galben etc. Acestea sunt câ- un link. Înlocuiţi pur şi simplu tag-ul
de fundal, prin intermediul codului sursă, teva dintre culorile care sunt redate corect "Img" din fişierul dumneavoastră HTML
dar veţi avea satisfacţia că i-aţi îngreunat de browser. după cum urmează:
considerabil munca. <a href="#">
<img c1ass="zoom" src=poza.gif' alt="
TemplateMonster .com
"width="160" height="160"
II
Hyperlink-uri colorate
Obţinerea unui design
de magazin profesional
border="O">
<Ia>
Un truc bun pentru a face hiperlink-urile Sunteţi în căutarea unui design profesion- Apoi, faceţi următoarea înregistrare în
mai vizibile este schimbarea culorii aces- al pentru magazinul dumneavoastră fişierul CSS sau în "capul" paginii HTML:
tora în momentul în care cursorul mouse- online? Dacă da, atunci o vizită la adresa <style type="text/css">
ului se află deasupra lor. Scrieţi pentru www.templatemonster.com este ceea ce a:hover .zoom {
aceasta următorul cod în capul paginii vă trebuie. Acolo veţi găsi numeroase tem- filter=' O ' ; }
dumneavoastră HTML: plate-uri în diferite formate numai bune a:link .zoom {
<style type="text/css"> pentru download, la preţurile moderate. width : 160px;
<! -- Template-ul devine totuşi ceva mai scump height 160px; }
A:link { color> blue; text-decoration: atunci când doriţi să fiţi singurul său uti- a:hover .zoom {
underline; } lizator. Aveţi de asemenea grijă ca noul width : 500px;
A:visited { color: grav; text-decoration: dumneavoastră template să fie implemen- height :500px; }
underline; } tat fără probleme în magazinul online. </style>
m
Evaluarea intertitlurilor
este vital să răspun-
deţi prin mail între-
bărilor clienţilor
Intertitlurile, bazate pe această înregis- dumneavoastră
trare CSS, au un aspect foarte profesional maxim într-un in-
şi conferă paginii dumneavoastră o struc- terval de 24 până la
tură intuitivă. Textul este formatat cu 48 de ore. Oferi ţi de
bold şi peste întreaga pagină trece o linie asemenea clienţilor
subţire. Pentru ca un astfel de text să fie dumneavoastră po- SOURCEFORGE.NET 2007
COt.U.1UNITY CHOICE A\'/ARDS
aliniat la dreapta, folosiţi codul următor sibilitatea de a vă
SI'O"SOIlS

în fişierul HTML: contacta telefonic ~~?:'~:;~"~'

ş-_-~,a:
<h3 style="text-align: left; sau prin fax. Şi când • I ""'u.u....,.., s.., .•• , •••..

margin-bottom; Opx; padding-bot/ spunem acest lucru

tom: Opx"> nu vă încurajăm să
<span style="font-family:Arial, folosiţi numerele cu
Helvetica, sans-serif; font- tarife exagerate. Op-
size: .8em; border-bottom: 3px taţi mai bine pentru
solid black; "Exemplu cele cu tarif normal
intertitlu aliniat la stânga< /span></h3> sau chiar pentru cele
Varianta cu aliniere la dreapta arată în regim 0800, cu
astfel: apelare gratuită. şi
<h3 style="text-align: right; clienţii ştiu că un
margin-bottom; Opx; padding-bot/ mic magazin online iiph.,sll·[,,,~(O- '!tl~S.Maosce't_d

tom: Opx"> nu poate oferi un f!t SOFT PENTRU FORUM: Proiectul open source phpBB2 se bazează pe
<span style="font-family:Arial, hotline non-stop, ••• PHP şi se poate instala În doar câteva minute.
Helvetica, sans-serif; font- dar indicat ar fi să
size: .8em; border-bottom: 3px
solid black; "Exemplu
intertitlu
precizaţi intervalele orare în care pot fi
preluate apelurile telefonice. Un client
bine tratat se va întoarce
Câştig de bani În internet
cu siguranţă.
m
Analizarea ,i optimizarea
aliniat la dreapta< /span></h3> magazinului online
Magazinul dumneavoastră online are un
Câştig de bani În internet
ea phpBB
Utilizare gratuită a soft-urilor
Transmiterea sigură
a datelor clienţilor
număr satisfăcător de vizitatori, dar nu
ştiţi ce comportament au clienţii dum-
neavoastră pe site sau dacă marketing-ul
pentru forumuri în special la introducerea datelor "sensi- online pe care îl practicaţi este eficient. în
Sunteţi în căutarea unui software liber, bile" ale utilizatorilor (cum ar fi de exem- acest caz, folosiţi platforma www.etrack
performant şi, implicit, gratuit pentru plu numerele de cont şi de pe cardurile de er.com. Funcţiile sale informative de con-
crearea de forumuri? Aruncaţi o privire credit), siguranţa trebuie să joace un rol trol şi statistică vă oferă date exacte şi o
asupra soluţiei numite phpBB. Cu aju- major. O codare SSL pe 128 biţi nu analiză economică a magazinului dum-
torul său puteţi construi rapid şi avantajos reprezintă doar un standard, ci şi o obli- neavoastră online. Serviciile celor de la
platforme de comunicare care corespund gaţie absolută. Dacă este posibil, utilizaţi etracker costă între 100 şi 500 de euro pe
tuturor cerinţelor pentru un astfel de sis- un certificat de securitate SSL special pen- lună, existând şi posibilitatea testării gra-
tem. cu phpBB puteţi realiza nelimitat tru pagina dumneavoastră web. Gân- tuite pe o perioadă de 14 zile.
numeroase forum uri, cu oricâte categorii diţi-vă la simplul fapt că şi cea mai sigură
doriţi. Mai multe informaţii găsiţi pe metodă de codare este inutilă atunci când,
Webhosting
site-ul oficial, www.phpbb.com. ulterior, trimiteţi datele clienţilor prin
mail, fără nicio măsură de siguranţă. Spaţiul web ca platformă de testare

II] Câştig de bani În internet umerele de cont şi de pe cardurile de

credit 1 U au ce căuta în mesajele elec-
Atunci când doriţi să vă prezentaţi firma
sau asociaţia pe internet, URL-ul adecvat
Optimizarea serviciilor tronice. este foarte important. Pentru aceasta,
pentru clienţi drumul pe la un ofertant de spaţiu web
Un serviciu bun pentru clienţi este foarte IExamr.e Certf""'.· .. l contra cost este aproape inevitabil. Dacă,
r Accept ttis eet'tiich permanentty
important şi poate decide succesul sau dimpotrivă, vă aflaţi în căutarea unei plat-
r. Accept.: this certficate temporarfy fOt' tm 5eSsKln
eşecul unui magazin online. Clienţii care r Do not «cept tre cert:fical:e and do noi: connect to this Web si.:e
forme de testare, teste ale căror rezultate
cumpără online nu aşteaptă doar o livrare doriţi să fie publice, ofertele de webspace
promptă a mărfurilor comanda te, ci şi gratuit reprezintă o bună alternativă.
feedback din partea ofertantului, tradus III CERTIFICAT DE SECURITATE: Dacă este Ofertanţii gratuiţi potriviţi - şi pentru
cel mai adesea prin răspunsuri cu soluţii iii posibil, utilizaţi un certificat de securi- scripturile CGI, PHP şi bazele de date
la diverse întrebări şi probleme. De aceea, tate SSL special pentru pagina web. MySQL - sunt destul de uşor de identifi-
PRACTIcA - 18 TRUCURI PENTRU PAGINA WEB

cat. Introduceţi cuvintele de căutare

potrivite în browser sau vizitaţi pagina
www.free-webhosts.com. un portal care • web
tracker
c nlrolllng

că prezintă ofertele gratuite, le evaluează

şi vă oferă sfaturi pentru alegerea corectă.
Mai dificile sunt lucrurile atunci când
căutaţi spaţiu web gratuit cu suport
ASP.NET. Numărul de ofertanţi este aici
LOJur>oen Steil,l.'n Si. Ih •• " Onlln.·~tfoI9 d •.•,d,\ O."k •••tr.d •••• optiml ••• " Si. do6' Surf •• I.b •.•, ••

considerabil restrâns. La data redactării •.•"I;""t.d".,,,lc •• ftht~.,t·w.blt.thtik.n m.t !Ump"i"."- "•• ben.ol"< dl. K.undenb,ndun9 und Hu."

acestui articol, Ofertele de webspace gra-

"d •••",'IO 1.",lle
b.sie 1 •• v.e.1
•• An.l."."
R.nou.ee,,_
OUUQu,c,n9
und II".
leit
.m
e.,uch.,·Tr.cl"'1'I0.
und KOIt.n
pr.'lw.rt."
SpOI'."
du.eh ,0no".I:1".$
Mr.t.rnod.U 9.":
Si. Um •• t.c
Si.
Syn.m;
.n. mit lAlehtl9k
..l •••••nt ••.•
•• t.

O.t.n.chlltt·konfo.m.
,.,
K.nn;:.hl.n
ett.ck •••
In
,Iulte"

n."'V.l1 und
.m.m

ohn. SO""''''.U'lStJll.ltion. kOlte"vunJ.ti9·

86.12S.89.242
tuit cu suport ASP.l ET veneau din partea Rom.";"
&'.1'0'1 ( &,•• ov
Wil'lXP
1 ASP Host (www.lasphost.com/web fir.fox 2.0
Sroadblnd

hosting/webhostin~free.htmI) sau Web

Samba (www.websamba.com). OiI; lnWit/vl; r..dian •.mg
unei etr. fl.xibll;n
MP.I$ •..•nglmOgH(hI< .• i~an
I 0'01'1I;t, .•d •• , h.ben "'1'11

m
ube.:a"'Qt.
f·M.If·", •• 1<..tlnQ •••"et

Webhosting
m •.•dm.' tr.n,p.'.nt
<meief.mit m.xim.l
aff"i.nt.
horedaychec:k.de:

Schimbare de provider Mit .tr.dc.e,

.i, elnen
bekomman
,ofort
tr~n,p •• anttn Obe.bHdt
Oferte interesante de găzduire web apar Ob., efi. ,IW,wirkungen
••nl.f.' Akdon.n,
K.mp.'iJntn ••olt in> CMff
tot timpul şi poate întâmpla ca la un • Ha.kunft.SuehbeQriff. • K.mp.gn.n·ErfolqlkonboU. • KJlckb.ttugll;r1<.enn",n9
Pel'fekt
gutel
.1, e.,iI
"' •• ketlnQ!
fur

proJektwerk.et.
moment dat raportul pre-performanţă • KJid<.pf.d., Int.""$1"'''
• 1'1.", Cliekm.p·O •••••I."
•
•
An.IVI. j.d •• W •• b.fo.m
Wlrl;.d'laftil,hk.iţl.n.lys."
• L.",fih'9a
• V•• d.ehts •• porting
A[go.'thm.n

.b .•tk., bl.t.t<li. eu;'.

• Ab••eh. von eet..u\J."" um du .ktv.l1t
oferit de providerul dumneavoastră să nu •
•
WJed.rkahr,
Cooki •• , Plug·tnl
v.,v.ild.utu •
•
Ums .•U-Kolt.l'Irtd'lnu"g
Korw ••• ion.,.t.n • InelivldueU. An~.r,,\en
a.,thaft
10 ••• ; ••
tU .l'Ial".,.,.I'I,
nh.nd d.r
I)emo-Tour • ~ W.b 2.0 un.;! Rsa
vă mai mulţumească. Întrebaţi-l de aceea Top 100
• Fl •• h·T.ukinq
• U•••·t •••.•
ch."'.rfolc" •..•
ng
•
• ~
W ••• nko.b.n.ly,.1'1
H"'.tmap-Ov •• lav • Web-Se'v"e. API
KJidphd.
z •..•
kunftlt,l.n
dia
Pot.nti.'e
T~e .u.tu,d\6pf.l'I,
~futnzan mehr ... rnehr ... mehr.,.
dacă este posibil să vă schimbaţi abona- drkLein.ck:

mentul cu una din ofertele de actualitate,

totul fară costuri suplimentare. Dacă acest fP!!I ANALIzA: etracker vă oferă o mulţime de detalii referitoare la vizitatorii
lucru nu este posibil şi vă aflaţi aproape de lIiiI magazinului online şi la comportamentul lor pe site.
termenul de expirare a valabilităţii con-
tractului, nu vă mai rămâne decât să răb- niul imediat după rezilierea pachetului tră demail nu mai este valabilă, contac-
daţi un pic, după care să treceţi la un alt dumneavoastră de servicii de găzduire taţi-l pe cel la care v-aţi înregistrat pentru
ofertant. web. Majoritatea furnizorilor de astfel de a vă actualiza informaţiile de contact.
În acest context, foarte importante este servicii oferă în acest sens formulare stan- • În cazul în care sunteţi posesorul unui
depunerea la timp a solicitării dumnea- dardizate, pe care le puteţi descărca din domeniu .org, .ifo sau .biz, aveţi nevoie de
voastră de relocare a domeniului. În caz secţiunile de service ale paginilor acesto- un cod AUTH pentru schimbare. Pe aces-
contrar există riscul ca domeniul dum- ra. Rezilierea trimisă prin fax este de cele ta în primiţi de la providerul anterior şi
neavoastră să fie liber pentru scurt timp, mai multe ori suficientă. Numai Ser- trebuie să îl puneţi la dispoziţia celui nou
suficient însă pentru a fi înregistrat de alte ver4You solicită înregistrare, iar 1&1 are atunci când faceţi transferul.
persoane. Pentru ca acest lucru să nu se o procedură foarte elaborată pentru rezi-
întâmple, atenţie la următoarele: liere - cu Start în zona de contracte, un a-
Webhosting
• De regulă, providerul dumneavoastră pel gratuit la serviciul cu clienţii şi un fax.
de până acum va elibera la vânzare dome- • În cazul domeniilor .com sau .net, pro- Găsirea domeniului potrivit
cedura este iniţiată În cazul în care sunteţi încă în căutarea
de noul dumnea- domeniului potrivit şi aveţi o listă de nu-
voastră provider. me posibile pentru pagina dumneavoastră
Primiţi de la acesta web, următorul pas este verificarea dis-
un mail pentru ponibilităţii acestora în internet.
înregistrare, pe care . Există ofertanţi care vă permit căutarea
trebuie să îl confir- după domenii, dar nu puteţi rula din
maţi. Verificaţi îna- păcate mai multe căutări deodată. sau nu
inte de toate dacă puteaţi. O posibilitate confortabilă vă
adresa de e-mail oferă site-ul numit mai sus al celor de la
specificată este va- NetworkSolutions. Aici puteţi căuta
labilă. Adresaţi pen- dintr-un foc până la 10 nume şi în jur de
•••t~:.por':-~10cu:lcr;et conct'"~,
tru aceasta o so-
we!Nof
30 de aşa-numite Top Level Domains
le~erl'e
licitare
a&.MJ"\S tlrte!' YOU~tlll'ch
lt;lptaect'fOOlr(O:flffDnlR~,
10f' I~
la Net- (TLD).
l workSolutions
lOdlllMOfll •••
Pe www.uwhois.com puteţi identifica
(www.networksolu până la 150 de TLD-uri exotice, afişarea
tions.com). Dacă fiind posibilă însă numai pentru un
adresa dumneavoas- domeniu şi 10 TLD-uri concomitent.
 ftoaOloiM Windows'

t I I
Ix
Două versiuni, pe acelaşi PC
Cei care creează conţinut web explorabil prin intermediul browser-elor trebuie să-I şi testeze. Ce se Întâmplă Însă
când doriţi să vedeţi cum se comportă produsul atât În lEG,cât şi În IE7? Deşi, În mod normal, aceste versiuni nu pot
convieţui pe acelaşi sistem, vă prezentăm două metode de a elimina acest impediment. Andrei Licherdopol

S
unt cunoscute problemele ambelor
versiuni de Internet Explorer când Cu ajutorul
vine vorba de interpretarea codului unei maşini
CSS. Astfel, paginile Îmbunătăţite prin
CSS pot apărea diferit pe aceste două ver- puteţi testa
siuni, chiar pot prezenta defecţiuni di- pagina cu
ferite, de la o versiune la alta a navigatoru- mai multe
lui Microsoft. Drept urmare, faptul că o
pagină sau aplicaţie web rulează bine pe
lE7 nu garantează buna funcţionare pe
lE6. În mod normal, versiunea 7 este o
actualizare a variantei 6 şi nici nu se pune
problema convieţuirii acestora. Din feri-
cire, există câteva modalităţi de a ocoli
acest neajuns, soluţii pe care vi le prezen-
tăm În cele ce urmează. Prima variantă
funcţionează doar pentru sistemul de
operare Windows XP SP2, În timp ce a
doua este ideală pentru utilizatorii
Microsoft Vista. 1 iri Instalarea Microsoft Virtual PC 2007
., Insl.allnternetEl<filOIellO
El !nJtallllU1!'let E~ploref4 01
Elf~lnlell'ldE.ef501
Elll'lStalllnlelnelElICloffi5.S
Din nefericire pentru utilizatorii de Vista, El rn~all!WneI. hpb'et 6.0
fJ Instalarea unor variante stand-alone nu există o soluţie prea "curată" de insta-
de Internet Explorer lare a Internet Explorer 6 pe acest sistem
Presupunem că aveţi deja instalat pe sis- de operare. Jici suita MultiplelE nu
tem Internet Explorer 7. De regulă, acesta funcţionează prea bine cu Vista, motiv
se poate obţine automat, ca actualiza re pentru care cel mai cuminte ar fi să apelaţi lE MULTIPLU:Alternativ, puteţi instala mai
Windows XP SP2. Dacă l-aţi "ratat", la Microsoft Virtual PC 2007, aplicaţie multe variante stand-alone de lE.
poate fi procurat de la adresa www.mi gratuită care vă permite rularea mai mul-
crosoft.com/windows/ downloads/ iei get tor PC-uri virtuale, pe care puteţi instala multe versiuni de Internet Explorer, fără
itnow.mspx. Odată instalat lE7, nu veţi orice sistem de operare Microsoft. nicio problemă.
mai avea acces la versiunea anterioară. O Accesaţi pagina www.microsoft.com/
Din fericire, problema se rezolvă simplu: windows/ products/winfamily /virtualpc/ llI!Il:1 La configurarea VirtualPC, veţi avea
O Accesaţi adresa web http://tredosoft. default.mspx şi descărcaţi programul cu posibilitatea să specificaţi ca PC-ul virtual
corn/Multiple_lE. Aici, accesaţi legătura ajutorul legăturii Download now. În să folosească (printr-o punte) aparatura
Download Multiple lE installer. funcţie de sistemul vostru de operare, vi de pe calculatorul vostru În mod direct, ca
f} Rulaţi fişierul descărcat, multiple-ie- se va da posibilitatea să descărcaţi o vari- unitatea de disc, dar veţi putea şi să creaţi
setup.exe şi urmaţi paşii de instalare, ale- antă pe 32 sau 64 de biţi. o unitate virtuală care să citească ima-
gând ce versiuni mai vechi de lE doriţi să f} Instalaţi programul şi configuraţi un ginile virtuale de disc. Lucrurile stau la fel
instalaţi. PC virtual care să facă faţă cerinţelor sis- şi pentru conexiunea la internet. Adică
c) Bucuraţi-vă de posibilitatea de a testa o temului de operare pe care plănuiţi să-I veţi putea ieşi la plimbare pe internet cu 5
pagină sau aplicaţie web cu toate versiu- instalaţi pe acesta, apoi instalaţi acel sis- PC-uri virtuale simultan, folosind acelaşi
nile de lE dorite. tem de operare. Astfel, veţi putea rula mai IP. Folositor, nu-i aşa?
Internet pentru toţi
Conexiunea la internet, care până acum câţiva ani avea caracter de rara avis la români, reprezintă actualmente o
prezenţă constantă În vieţile majorităţii românilor. Nu se poate vorbi de niveluri de acoperire similare cu cele exis-
tente În Europa de Vest, dar lucrurile se mişcă şi probabil că foarte curând vom ajunge acolo. Mihaela Dogaru

~I cercaţi să vă închipuiţi o zi fără ,,~trop"

de internet. Fără să îţi verifici mail-urile
vezi un videoclip pe YouTube trimis de
vreun cunoscut, fără documentare pentru
bine este că, dacă nu ajungi la calculator în
timp util, nu mai ratezi mail-urile impor-
dimineaţa la cafea şi să citeşti ziarele diversele proiecte pe care le ai în lucru, tante de la partenerii de afaceri sau
online, fără să fii vizibil pe messenger pen- chiar şi să găseşti o reţetă nouă pentru colaboratori pentru că există posibilitatea
tru colaboratori şi / sau prieteni, fără să cină şi exemplele pot continua. Şi mai conectării de pe telefonul mobil. Ei bine,
tot ceea e \Tei, la orice oră şi din aproape
orice ur ă este disponibil la un clic de Internet to go
mouse, ingura condiţie fiind să aveţi un
abonament la unul dintre providerii de
servicii.

Conectare, dar cum?

înainte însă de a vorbi despre provideri şi
despre ce conţin ofertele din ce în ce mai
atrăgătoare ale acestora, ne vom concentra
puţin asupra modalităţilor de conectare.
în principiu, la ora actuală în România,
piaţa este împărţită între câteva mari
tipuri de conexiuni, din care felia ce mai
mare este deţinută de conectarea prin
fibră optică şi reţelele de cartier. Aceasta a
preluat conducerea în faţa variantei de o °1C!d.al

conectare clasice, prin dial-up. Puternic o o BloI~10l'\1

din spate vine varianta de conectare ADSL

şi, cu o pondere mai mică avem conexiu-
nile mobile.
Principala calitate a legăturii la internet
prin cablu TV!fibra optică este viteza, care
~-
ttick on hoIspot:s lor hst o -."

poate fi de până la 100 de ori mai mare

decât în cazul unei variante dial-up.
Computerul sau reţeaua sunt legate la
internet prin intermediul unui modem de
cablu conectat la cablul coaxial folosit
pentru recepţionarea programelor TV sau
printr-un cablu de reţea cuplat la un
switch conectat mai departe la cel mai
apropiat nod al reţelei de fibră optică. În cazul În care laptopul dumneavoastră mai peste tot, de la aeroporturi la cafenele
Utilizatorul are în acest fel acces la servicii este echipat cu o placă de reţea wireless, fast-food-uri şi altele asemenea. Ca să aflaţi
călătoriile În diferite colţuri ale ţării sau ale de ele apelaţi tot la internet, unde puteţi
multiple (aplicaţii on-site, on-server,
lumii nu vă mai obligă se folosiţi serviciile găsi site-uri În genul www.cfree.ro. unde vi
transfer de date, televiziune şi telefonie). scumpe de conectare la internet oferite de se oferă hărţi şi liste ale hotspot-urilor gra-
La începutul perioadei în care România hoteluri. Există puncte de acces gratuite tuite. Găsiţi-le şi navigaţi.
a fost cuprinsă de febra internetului, în
urmă cu circa 10 ani, varianta de conec- aplicaţii simultane (ISDN-PRA): convor- mai interesantă, dar şi cea mai scumpă.
tare dial-up era cea mai răspândită, şi cea biri telefonice, acces dial-up la internet, Pentru acest tip de conectare este nevoie
mai ieftină. Lucrurile s-au mai schimbat transmisii fax, transmis ii de date, video- de un telefon mobil cu tehnologia GPRS
de atunci, dar ponderea conexiunilor de telefonie şi videoconferinţă, folosind firele (General Packet Radio Service). Tehnolo-
acest tip a reuşit să se menţină ridicată. existente şi conectând diverse tipuri de gia se pretează pentru sesiuni de lucru
Pentru conectarea prin intermediul aces- echipamente terminale. Lărgimea de ban- lungi, în care utilizatorul este conectat
tei metode este nevoie de un modem ata- dă este superioară, iar viteza transmisiilor permanent la internet prin telefonul
şat computerului, de conectare la o reţea de date mai mare. mobil. în plus este bine ca respectivul tele-
de telefonie fixă şi de un cont la un pro- Avantajul ADSL faţă de dial-up poate fi fon sau modem să cunoască şi tehnologiile
vider de servicii de internet. Modemul nu rezumat la câteva cuvinte: internet în EDGE sau HDSP A, pentru a oferi viteze
este un periferic foarte scump la ora actu- bandă largă. Navigarea se face la o viteză ridicate.
ală, dar trebuie să menţionăm şi câteva de aproape 120 de ori mai mare decât în Această variantă de conectare este
dezavantaje ale acestuia: viteza de conec- cazul simplei conexiuni prin dial-up, nu avantajoasă în primul rând pentru că asig-
tare şi transfer mici, precum şi costul fac- există taxare la minut, se poate vorbi la ură mobilitate, permiţând lucrul în afara
turii telefonice, destul de ridicat (există telefon şi naviga pe internet în acelaşi timp biroului folosind internet prin conectarea
însă oferte speciale şi tot felul de reduceri, folosind o singură linie telefonică fiind în telefonului cu laptopul, PDA-ul sau
despre care puteţi afla de la compania de egală măsură posibilă conectarea mai mul- Pocket PC-ul, trimiterea sau primirea de
telefonie fixă). De asemenea, transferul de tor PC-uri la internet. Nu în ultimul rând, e-mail-uri, accesul rapid la informaţii si
date şi sunet nu se face simultan. există control asupra facturii, utilizatorul aplicaţii WAP, direct pe telefon şi primi-
Conexiunea ISDN reprezintă o dez- plătind numai abonamentul lunar, Îară rea de apeluri şi mesaje text în timpul
voltare a reţelei telefonice clasice, care taxarea traficului. folosirii serviciilor GPRS pentru internet
asigură de la două (ISDN-BRA) la 30 de Conexiunea mobilă este de departe cea browsing sau WAP.
Tânăr website, caut gazdă!
Menţinerea 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 găzduire web, atât contra cost, cât şi
gratuite. Andrei Licherdopol

P
entru găzduirea unei pagini web, este calculatorului propriu şi eventual de o co- lui, veţi beneficia mai mult sau mai puţin
suficient orice calculator conectat la in- nexiune la internet cu o viteză mediocră. de: o conexiune puternică pentru pagina
ternet, care să ruleze o aplicaţie de tip De aceea, este preferabilă integrarea acestu- web, spaţiu suficient de stocare a datelor
server corespunzătoare (precum Apache). ia pe server-ul unei companii specializate în paginii, posibilitatea unui flux mare de date
Evident, este neplăcut ca accesul la pagina găzduirea paginilor web, unde, în funcţie Între pagină şi vizitatori şi totodată securi-
dumneavoastră să fie condiţionat de starea de pachetul ales şi de specificul furnizoru- tatea datelor pe care le plasaţi pe acel server.
Când alegem un ofertant de webhosting,
trebuie să avem în vedere câţiva factori
cheie care determină o alegere viabilă,
după cum veţi vedea în continuare.
Unul dintre criterii este importanţa
paginii web pe care "vrem s-o trimitem în
gazdă". În caz că este doar un blog sau o ~t1 ~ ~f;iI'~ '~i:!;!l?:(b':

mică pagină web, strict personală, fară un BtJ'fNowI$5.9galnl"lt.com P\J,chase I

scop comercial sau temporară (dedicată
unui eveniment), varianta folosirii unui ..
'1 Yrtlol$.I01lEl ro'

serviciu gratuit este viabilă. Din fericire,

..
%Rlghtsreslrltledbyeopyri;hl

~ SoeeifiuUy, lhl$ dal3 tAAy ONlY bt used fOf Inlernel operaborlal !Jo t.-: 'foo ••••• ,..- 1'" tI"l'
• • ,. .~ •••• J__ ••__ 'tl
% purposes.UmaynotbausedforlargetedatmrtlSlflgorany
există o sumedenie de astfel de servicii ..
% olherpurpose '"lU'~~~oIo:1lll6ll,,,
o"",It••.,,,,,,,,,,,,,
""IIOll.l"OOlOlOC.O,ll

gratuite, iar unele chiar oferă posibilitatea % E~te INTERZlSAfole$Ueil datelor de pe <1tesl Sel\'ef In oricare
% alt scop deeat operarta retelei In spaml este INTERZISA

de a construi un website pe loc până şi ..

/f; (otoslrealOflnscOPulipubllcllare

celor mai puţin experimentaţi într-ale

domall"'name IneSltUt.ro
web-ului. Dacă, dimpotrivă, doriţi ca desenpbon INeSletKOesrgnSrI
deSCflpllon.lllalaeSllnr21
Uescnpllon Ap 2
pagina să stea pe internet mult şi bine şi destrlpbon BriSOY
desCI1ption' Postal Code' 2200
cu atât mai mult dacă urmează să vă deseriplron Country RO
descnptlon Phone 072( 483 200
aducă beneficii comerciale, ar trebui să vă âescriptlon E-milll ilWl1itue~.rr
descriptiOn RegistrabonllO Number J08l1 Q3SJ02OS 2006
gândiţi serios la un webhosting plătit. descnpbon flsulCode
admlll-CQntacl NC258·ROTlO
R18631971

Există, totuşi, câteva servicii gratuite care lechnical-contiltt NC258·ROTLD

zone-contilcl NC258-ROTLO
__ ~"' Ol_C"

r . .•.• r- r __
~- ...
bllllng..contacl NC258-ROTLO
oferă suficient spaţiu de stocare, elemente nilmeservtl C1nsQljneslEbcro 212.52 166 211
r
ro ~-
r·
r r
r~"""'"
namrUMlI dn,002·0 net23 hU 193 178 118 193 r· r-
de securitate şi posibilitatea unui trafic info Obiect millnlalnfd by ROnD (10) reglslty r-.
r'
r •.• r~_~
notl'" doNin-""ln!listserv.NlC.ro r· rr~~~
__- . r_,_'_'_
r~~
lunar destul de intens. Din păcate, în obJ'ct-malnlalt1ed-by ROTlD-MNT r... r •. r .
I,Ipdaltd dorl.in-adftinelistserv .rne.ro 20060512
cazul serviciilor gratuite, este improbabil up(fiilted dan!rotld.ro 2006052<1

ca ofertanţii să ofere standarde de securi-

tate corespunzătoare, şi aici merită discu- CINESUNTEŢIVOI?: Cu ajutorul paginii web www.who.is. puteţi afla toate detaliile relevante
tat mai pe larg. În legătură cu un website, posesorul domeniului şi server-ul de pe care acesta rulează
Au fost cazuri în care serviciul de web-
hosting a modificat conţinutul plasat de lităţile respective. în tot cazul, dacă pen- lungă durată cu un furnizor de hosting.
către utilizatori (cum ar fi câteva cuvinte- tru o pagină personală, mutarea conţinu- Cel mai bine este să faceţi un contract de
cheie strecurate în corpul tuturor pa- tului pe server-ul altui furnizor poate fi test, pe o perioadă scurtă, pentru a vedea
ginilor unui utilizator - fară ştirea sau acceptabilă, însă nu este cazul unei pagini exact cum se comportă serviciul. în
acordul acestuia, cu referiri la pagini web web comerciale, cu vechime şi cu o bază această perioadă, încercaţi să comunicaţi
pornografice sau din alte categorii. Acest fidelă de vizitatori. cât mai mult cu suportul tehnic, pentru a
lucru era observabil doar prin consultarea Ţineţi cont de toate detaliile ofertei. Cei vedea care sunt disponibilitatea şi com-
codului sursă al paginii web direct din care oferă spaţiu de stocare nelimitat şi portamentul personalului. Merită men-
browser, la accesare, sau de către motoa- trafic nelimitat nu prea pot fi luaţi în serios. ţionat că webhoster-ul la care apelaţi ar
rele de căutare care indexau conţinutul Gândindu-ne la implicaţiile unei asemenea trebui să poată fi contactat telefonic. O
respectivelor pagini. Practic, atunci când oferte pe termen lung, putem constata cu simplă adresă de e-mail pentru comuni-
navigatorul web cerea pagina respectivă, uşurinţă ca nu este una plauzibilă. Ase- care şi suport nu reprezintă soluţia ideală.
server-ul o procesa, inserând câteva mănător, evitaţi să încheiaţi un contract Este foarte probabil ca pagina web de
cuvinte cheie în corpul paginii înainte de care vă oferă un spaţiu de stocare mai mare prezentare a furnizorului să se găsească pe
"a o servi" pentru navigator. Ca urmare, decât traficul lunar permis, deoarece ar tre- un server propriu. Apelaţi la serviciul gra-
deţinătorul paginii nu avea cum să bui să fie invers. Evitaţi şi pachetele prea tuit www.who.is. Acolo, introduceţi adre-
sesizeze acest lucru atunci când modifica încărcate în opţiuni, atâta vreme cât ştiţi că sa paginii web a furnizorului şi aflaţi toate
pagina prin FTP, protocol care oferă acces nu le veţi folosi, cel puţin la început. detaliile relevante despre acel website şi
direct la fişierele de pe server. Asiguraţi-vă că serviciul garantează securi- server-ul pe' care este găzduit. Puteţi de
Nu spunem că genul de întâmplare tatea, integritatea datelor dumneavoas- asemenea să încercaţi comanda ping pe
descris mai sus ar fi cumva o regulă sau că tră.şi faptul că nu vă veţi trezi cu publicitate IP-ul server-ului pentru a-l compara cu
s-ar aplica majorităţii serviciilor de web- nedorită pe website, cu atât mai mult cu cât altele, pentru a vă asigura că acesta răs-
hosting gratuit, nicidecum. Trebuie să fiţi este vorba de un serviciu pe care-l plătiţi. punde rapid în zona din care urmează să
totuşi atenţi la termenii de folosire (Li- fie accesată pagina dumneavoastră web.
cense Agreement) ca dealtfel la orice do- Funcţionalitate şi suport tehnic
cument pe care un serviciu, gratuit sau Două aspecte esenţiale pe termen lung, Webhosting gratuit
plătit, vă propune să-I parcurgeţi şi să-I funcţionalitate a şi suportul tehnic trebuie În această zonă, tot ce vă putem sfatui este
acceptaţi înainte de a putea folosi faci- testate înainte de a face un contract de să citiţi cu atenţie toate informaţiile de pe
 o ofertă gratuită identică click123.net.
Având acelaşi furnizor, ne întrebăm cum
poate www.orohost.com să ofere gratuit
mai mult decât furnizorul său. În orice
caz, faptul că doi sau mai mulţi reseller-i
ai aceluiaşi serviciu au un design identic
nu este de bun augur. Putem specula că de
fapt, în spatele ofertelor sunt aceiaşi
oameni, care au avut probleme cu repu-
EI d,~~ D w •. t> ••• ,,,,
taţia unuia dintre servicii şi au migrat
.100 I<IIIt SJ'M" Bl V,~,.1'•••"1 D 250 "'.II d •• ' •••• a Si '"',•••• 1'••••••1
C 10 «II h~""~'I"''' EI Pfll"ll~'''''' D t> G' N •••••IoI.•. ".t••••
" D PI1I' H<Og. ""'"'''J''' D I'OP •••••••• IM." ••••
către altă denumire. Dincolo de orice
D 7 •••.•. ~,,<
:.QllJ •• db••. D A.u,,, ••••• ,~ ",. G ~ I<II~QI <1•••••. 1>••• ". D ••••• '0 ••••••• , ••••..• Il,,~ (29 «~,pu) D 1'•••.•.••'0'''''''' ••
El: •• Add·"" d •••••••.•••• D n' .• a•••• '" D nJ>.~<" .•'" D I'l>pM .•.Ad ••• on
D \\ ••bdM ••• m. D 1,1" •••• " •••. , II ril~ •••d""';,~,(b•.••.••.• r' ••ţii •••••) D c:1•••• ~'r<J ••'"." •• speculaţie, este cert că aceşti redis-
tribuitori îşi pierd credibilitatea în faţa
multor utilizatori conştienţi de situaţie.
Nu spunem că serviciile oferite de către
aceştia ar fi de o calitate proastă, ci vă
DOUASITE-URI, UN SINGURRESELLER:Iată un caz clasic În care, sub denumiri diferite dar acelaşi atragem atenţia asupra inconvenientelor
design, un reseller Încearcă marea cu degetul cu oferte uşor diferite. Vi se pare de Încredere? determinate de alegerea unui serviciu gra-
tuit de găzduire.
paginile web ale celor care oferă hosting pentru care ar fi indicat să apelaţi direct la Concluzia noastră? Strict pentru pagi-
gratuit şi totodată să studiaţi relaţiile dintre acesta. Un astfel de exemplu sunt paginile ni personale, de o însemnătate redusă şi
aceştia. De multe ori, aceşti "furnizori" de web www.orohost.com şi www.click123. cu un factor comercial zero.
servicii gratuite sunt de fapt reseller-i. Pe net. Design-ul paginilor este identic, Mai jos, am alcătuit un tabel cu servicii
lângă faptul că doi reseller-i ai aceluiaşi ser- furnizorul lor identic, oferta gratuită de găzduire contra cost. Pentru compara-
viciu pot avea oferte radical diferite sau diferă prin faptul că unul dintre servicii ţie, am ales câte trei pachete similare din
oricum cu diferenţe semnificative, este oferă 50 MB în plus spaţiu de stocare şi 4 oferta fiecărei companii. Lista completă
foarte posibil ca furnizorul direct al acesto- GB suplimentari de trafic, alături de şapte cu servicii şi detalii poate fi găsită la viz-
ra să ofere un serviciu gratuit de o calitate baze de date MySQL faţă de 3. Partea ciu- itarea paginilor web corespunzătoare fie-
mai bună, cu un suport superior, motiv dată este că însuşi furnizorul acestora are căruia dintre webhosteri.

Ofertant Alfa Web eDomenii Livehosting MXHost Webfactor Spatiul Ro Romarg.Ro

Adresa web www.alfaweb.ro www.edomenii.ro www.livehosting.ro www.mxhost.ro https://webfactor.ro www.spatiul.ro www.romarg.ro
Basic ( Start (un domeniu, LHStandard (2 domenii, MX-Medium WIN-START HOl (10 domenii, Small1 (10 domenii
un domeniu, S subdomenii, 10 subdomenii, (2 domenii, sub- (un domeniu, 10 subdomenii, parcate, 2 domenii supli-
S conturi e-mail, 5 conturi e-mail, o 10 conturi e-mail, liste domenii nelimitat, subdomenii nelimi- 10 conturi/liste menta re, 10 subdomenii,
Pachet I (starter) 100 MB spaţiu, listă e-mail, un cont e-mail nelimitat, un cont 500 conturi e-mail, tate, 100 conturi e-mail, FTP, spaţiu 10 conturi FTP,20 conturi
10 GB transfer, FTP, 100 MB spaţiu, FTP,4 GB spaţiu, FTP, 100 MB spaţiu, e-mail, FTP, 100 MB 2S0 MB, transfer e-mail,100 MB spaţiu,
o bază de date 20 GB transfer, 8 GB transfer, 15 GB transfer, spaţiu, 20 GB trans- 10 GB, 10 baze transfer necontorizat, 2 BD
MySQL) zero baze de date) 2 BD MySQL/MsSQL) 100 BD My5QL) fer, 5 baze de date) de date) MySQL/ PostgreSQL)
2,9 USD/lună 1 EUR/lună 98 Lei/an 2,5 EUR/lună 12 EUR/an 38 Lei/an (fără TVA) 1,99 EUR/lună
Standard Economic LH Professional MX-Advanced WIN-MEDIUM H02 (20 domenii, Basic1 (20 domenii
(3 domenii, (2 domenii, 10 sub- (3 domenii, 15 sub- (3 domenii, sub- (4 domenii, sub- 20 subdomenii, parcate, S domenii supli-
30 de conturi domenii,2 liste domenii, 15 conturi domenii nelimitat, domenii nelimitate, 20 conturi/liste menta re, 20 subdomenii,
e-mail, 500 MB e-mail, un cont FTP, e-mail, liste e-mail conturi şi liste e-mail 500 conturi e-mail, e-mail, FTP, 20 conturi FTP,50 conturi
Pachet II(mediu)
spaţiu, 30 GB 300 MB spaţiu, 30 nelimitat, un cont FTP, 6 nelimitat, FTP,400 MB FTP, 400 MB spaţiu, spaţiu 600 MB, e-mail, 300 MB spaţiu,
transfer, 6 BD GB transfer, 2 BD GB spaţiu, 12 GB transfer, spaţiu, 40 GB transfer, 50 GB transfer, transfer 24 GB, tra nsfer necontorizat, 20
MySQL) MySQL) 3 BD MySQL/Ms5QL) BD MySQL nelimitat) 100 baze de date) 20 baze de date) BDMy5QL,PostgreSQL)
3,9 USD/lună 2,5 EUR/lună 169 Lei/an 5,5 EUR/lună 40 EUR/an 110 Lei/an (fără TVA) 8,95 EUR/lună
Profesional Business LHEnterprise (4 domenii, MX-GOLD(4 domenii, WIN-PREMIER(6 do- H03 (domenii/ Basic3 (20 domenii
(10 domenii, . (5 domenii, 20 subdomenii, subdomenii nelimitat, menii, subdomenii subdomenii/ parcate, 5 domenii supli-
100 conturi subdomenii nelimi- 20 conturi e-mail, conturi şi liste e-mail nelimitate, conturi conturi si liste menta re, 20 subdomenii,
e~mail, tate, conturi şi liste liste e-mail nelimitat, nelimitat, FTP, e-maii nelimitate, e-mailjbaze 20 conturi FTP,100 con-
Pachet III(business)
10 G8 spaţiu, e-mail nelimitate, un cont FTP, 8 GB spaţiu, 1 GB spaţiu, 1 GB spaţiu, de date nelimitate, turi e-mail, 1,2 GB spaţiu,
60 GB transfer, un cont FTP, 16 GB transfer, 60 GB transfer, 80 GB transfer, baze 1 GB spaţiu, transfer necontorizat, 20
30 BD MySQL) 5 BD My5QL) 4 BD My5QL/MsSQL) BD My5QL nelimitat) de date nelimitate) 40 GB transfer) BD MySQL/PostrgreSQL)
39 USD/lună 10 EUR/lună) 210 Lei/an 8 EUR/lună 90 EUR/an 160 Lei/an (fără TVA) 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 DotNetPanel phpMyAdmin, Cpanel phpMyAdmin, Cpanel, Plesk 8.3, Cpanelll, phpMyAdmin 2.6.1,
nespecificat Plesk
administrare Enterprise PRO Plesk phpMyAdmin Image Manager

Suport tehnic nespecificat e-mail / Forum / Telefon 24/24 ore (telefon, zilnic (Între orele 24/24 ore (telefon,
24/24 ore da e-mail, chat) 9-24) e-mail, chat)
/ Messenger
PHP, Peri, DotnetPanel Virus Scan, WAP, My5QL,MsSQL,ASP, backup zilnic,lMAP, backup zilnic,
Apache, Desktop, SmarterStats Shopping Cart, CGI, ASP.NET,551,Ruby on webmail, Auto Res- Înscriere la
Python, Pro, backup, Ajax, ASP, Peri, directoare Rails,Tomcat 5, Peri, ponder, PHP5, My5QL motoarele
Extra nespecificat SSI, ASP.NET,PHP 5, Peri, protejate, server 5MTP, JS, CGI,webmail, 5, Tomcat 5, Peri 5.8.8, de căutare,
AntiSPAM, Python, Secured Folders, suport video, Flash, Auto-Responder, CGI,Rubu on Rails Site Builder Pro!,
antivirus, SilverLight, Auto backup, statistici site, POP3, IMAP,2end 1.8.5, Zend Opti mizer, Proteclie DDOS,
webmail, Responder, antivirus, webmail, Opti mizer, Webalizer, Webalizer, AW 5tats, antlspam,
backup zilnic antispam protectie SPAM AWStats 5endMaii Support antivirus
Proba nespecificat nespecificat nespecificat 30 de zile nespecificat 30 de zile