specIalCreaţi uşor şi rapid propriul

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

s ~ Soluţii gratuite pentru pagina web

3 Editorial4 Cuprins5 CuprinsCD

6 Elementede bazaRealizarea unui site a presupus întotdeaunaacumularea unor cunoştinţe. Procesul deînvăţare nu se opreşte însă după finalizareaprimei pagini web, standardele noi, tren-durile precum şi necesităţile determinândperfecţionarea continuă.

12 Evoluţiabrowser-elorwebProgramele de navigare pe internet facparte din viaţa noastră şi cu greu ne-ammai descurca astăzi fără ele. Să ne uităm înurmă pentru a vedea care au fost etapele deparcurs în evoluţia browser-elor.

Conţinutulfnaintea designuluiDacă vă propuneţi să creaţi un site, estebine să aveţi răspuns la o întrebare simplă,de genul cui se adresează acesta? După cerăspundeţi la această întrebare vă puteţigândi la planificare.

18 Structura site·uluiDupă discuţii la modul general despretendinţele actuale şi planificarea site-urilor,a sosit momentul să tratăm tema concretă,aplicând câteva din cele prezenta te anteri-or.

» REALIZAREFonnatarea HTML

După schiţarea machetei, următorul pasconstă în transpunerea acesteia în practicăfolosind HTML şi CSS.

HTML se poate trece la includerea ima-ginilor şi asamblarea structurii site-ului.Aflaţi din acest articol cum se face acestlucru şi care sunt formatele de imagine cepot fi folosite.

28 Paşi finaliUn site este o construcţie arborescentă rea-1izatăcu fişiere HTM sau HTML. Acesteatrebuie stocate într-o structură de direc-toare ce păstrează logica site-ului. Plasareafiecărui tip de fişier la locul potrivit simpli-fică finalizarea site-ului.

30 Mai rapid pe aceeaşi caleOdată cu vitezele de acces la internet şidimensiunile documentelor HTML tind săcrească, graţie complexităţii paginilor web.Există posibilitatea optimizării codului, fărăa renunţa la funcţionalitatea crescută apaginii.

32 Aceeaşitemă. altă realizareO alternativă la pagina web structurată cuajutorul tabelelor este împărţirea prinintermediul diviziunilor. În acest articol văprezentăm modul de realizare a temeinoastre cu ajutorul diviziunilor.

36 Site dinamicDoriţi să măriţi performanţa site-ului pro-priu? Utilizarea scripturilor PHP în con-strucţia ultimei variante a site-ului nostrueste cel mai bun exemplu în acest sens.

40 DinamicăsuplimentaraCum putem face ca la o nouă încărcareconţinutul paginii web să se schimbeautomat? Răspunsul este dat de paginileweb dinamice, care au în spate baze de datece permit fie afişarea în pagină a informaţi-ilor la zi, fie execută căutări în arhivă.

» PROGRAME46 utilitare gratuite pentru designşi programareÎn acest articol vă prezentăm o serie de pro-

grame gratuite care vă pot fi de un realfolos, indiferent dacă vă ocupaţi de webdesign sau de programare web, şi cu atâtmai mult dacă le faceţi pe amândouă.

50 Apachea facut picioareInstalarea unui server pe o staţie de lucrunu este neapărat anevoioasă, dar în anu-mite situaţii nu e o posibilitate viabilă.Aplicaţia Server2Go vă scuteşte de bătăi decap, putând fi folosită pe orice mediu destocare.

54 Procesaregratuită a imaginilorDacă nu doriţi să cheltuiţi bani pe un editorgrafic precum Photoshop, dar aveţi totuşinevoie de o aplicaţie capabilă şi flexibilă,soluţia nu poate fi decât GIMP.

» PRACTICA56 Tips & tricksCele mai bune tips & tricks pe tema HTML,CSS, utilitare pentru homepage şi comerţelectronic au fost adunate de CHIP Specialîn paginile acestui articol.

61 Douăversiuni pe acelaşi PCCei ce creează conţinut web, trebuie să-I şitesteze. Pentru evaluarea în mai multe ver-siuni de browser, aflaţi cum puteţi instalaIE6 şi IE7 pe acelaşi calculator.

» SERVICE62 Internet pentru toţiConexiuni provideri, beneficii, iată în acestarticol câteva chestiuni despre care maidoreaţi să aflaţi pentru a alege cea mai bunăcale de a fi prezenţi în internet.

64 Tânăr website. caut gazdăMenţinerea unei pagini web pe etern eleplaiuri ale www-ului presupune un culcuşsigur şi rapid în inima unui server. Iată celemai bune oferte de găzduire web, atât con-tra cost, cât şi gratuite.

CUPRINS CDDiscul ataşat acestei ediţii a revisteiCHIP Special reflectă conţinutulacesteia, cuprinzând aplicaţiidedicate lucrului cu paginile web.

A

Inmăsura posibilităţilor, am încercat săvă punem la dispoziţie cât mai multedin instrumentele necesare aplicării

cunoştinţelor învăţate din articole. Ală-turi de clasicele aplicaţii, v-am pregătit oserie de exemple către care se fac trimiteridin articole. Cu ajutorul acestora, veţiputea face teste şi veţi avea posibilitateade a deprinde mai uşor tehnicile aferentefiecăruia dintre acestea.

Aplicaţii utileAveţi de ales între mai multe editoareavansate, dedicate programatorilor. Ma-joritatea oferă suport atât pentru HTML,XHTML, JavaScript, ASP cât şi pentrulimbaje mai complexe de formatare,scripting şi programare.

w~ __ SG27~

.:>rc:eotlll~~O" s..wbCah:lst ••• 'fCP*>._-~MPCL_l1TF4~~

O~<~""~-I""'-_"'-'-_.--::lo.••.C•.••rwwd_l!II !CQIa!>on··.."•.·~

Desigur, nu puteau lipsi nici aplicaţiiledestinate prelucrării grafice şi machetării.Noi am propus Gimp pentru editare şiXNView pentru administrarea colecţieide imagini web, datorită combinaţiei deviteză şi funcţionalitate care se apropiedestul de mult de soluţia Adobe, fiindtotodată o soluţie gratuită.

Desigur, aplicaţiile şi paginile web nece-sită servere pe care să ruleze. V -am pre-gătit o colecţie de pachete tip server, foar-te utile atât pentru testarea materialeloraflate în lucru cât şi pentru publicareaacestora, chiar şi de pe propriul Pc. SuitaServer2Go este deosebit de atrăgătoareprin numeroasele facilităţi pe care le oferădar mai ales prin posibilitatea de a dis-

tribui o aplica ţie webpe un mediu read-on-ly precum un CD-R .

.1ot,'SCl..a.t __ ~022.~~-~~L.".....Q~,,,,,,,,,----~::J~r~3

.F<I'l"'l:I':J00i'3o '~7~." - J1- II- J

Nu în ultim ulrând, am inclus oaplica ţie gratuită decitire a fişierelor PDF,alături de nepreţuitelemanuale de utilizarepentru PHP şiMySQL.

CD-ul inclus poate fi utilizat În conformi-tate cu parametrii definiţi În standardulPhilips - Yellow Book. Editura nu Îşi asumăresponsabilitatea asupra eventualelor pa-gube provocate de utilizarea CD-ului În alţiparametri decât cei stabiliţi În standardulmenţionat anterior.

NOTĂInterfaţa CD-ului CHIPSPECIALeste con-

cepută să ruleze optim pe o placă graficăce suportă minim o rezoluţie de 800 x 600şi o adâncime a culorii de 16 biţi.

De aceea, nu este recomandată folosireaacesteia Într-un mediu ce nu oferă mini-mul necesar! Interfaţa poate fi rulată atâtsub Windows 95/98/Me, cât şi sub Win-dows NT/2000/XP.

Din cauza multitudinii de configuraţii, re-dacţia CHIP SPECIALnu Îşi poate asumanici o responsabilitate În eventualitatea Încare apar probleme În funcţionarea inter-feţei şi a aplicaţiilor. Programele care au in-trat În componenţa CD-ului CHIPSPECIALau fost testate şi selectate cu grijă Înredacţia CHIPSPECIAL.Totuşi, redacţia nuÎşi poate asuma nici o responsabilitatepentru funcţionarea anormală a software-ului şi nici nu poate fi făcută responsabilăpentru eventualele daune produse. CD-ulCHIP SPECIALa fost verificat Împotrivaviruşilor cu următoarele programe antivi-rus (În ordine alfabetică): BitDefender Pro-fessionall0 (furnizat de Softwin), F-SecureAntiVirus 5.51 (furnizat de Infodesign),Kaspersky Lab Anti-Virus 6.0 (furnizat deKas- persky Lab - Rusia) şi PC-ciiin (furnizatde GeCAD).

Pentru orice Întrebări legate de aplicaţiilede pe CD,vă rugăm să contactaţi telefonic,prin fax sau prin e-mail, autorii programe-lor respective.

ATENŢIEIPentru rularea corectă a inter-feţei CD-ului vă recomandăm setarea uneirezoluţii minime de 800 x 600, o adâncimea culorii de 16 biţi şi folosirea opţiuniiSmall Fonts!

ImpressumRedacţia poate fi contaetată la:Telefon: 0268-415158,418728, 0723-570511, 0744-754983;0368-415003,0368-415004Fax: 0268-418728; E-mail: redactie@fvd.roAdresa redacţiei: 500010 - Braşov, str. N.D. Cocea nr.12Adresa pentru corespondenţă:500530 - Braşov, Oficiul Poştal 2, Căsuţa Poştală 4

Director General: Dan Bădescu (dan_badescu@vogelburda.ro)Director tehnic: Daniel Dănilă-Bekesi (dan_danila@vogelburda.ro)

Editura: Vogel Burda Communications SRLSediul editurii: 500010-Braşov Str. N.D. Cocea nr.12

Redactori: Mihaela Dogaru (mihaela_dogaru@fvd.rol,Daniel Dănilă-Bekesi(dan_danila@fvd.ro), Andrei Licherdopol (andreUicherdopol@fvd.rol

In Romănia: Vogel Burda Communications SRL BraşovIn 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)

Contabilitate şi administraţie: Maria Parge, Eva Szaszka (contabilitate@vogelburda.rolFinancial controller: Adrian Dumitru (adrian_dumitru@vogelburda.ro)Reclamă: Cristian Pop (cristian_pop@vogelburda.rol, Leonte Mărginean(Ieonte_marginean@vogelburda.ro)Marketing: Leonte Mărginean (Ieonte_marginean@vogelburda.ro)Distribuţie: Ioana Bădescu (ioana_badescu@vogelburda.rol,

Manuscrisele, hlclusiv în format electronic, expediate redacţiei devin proprietatea editurii.Editura Îşi rezervă dreptul de modificare a materialelor primite. precum şi a datei deapariţie. Reproducerea integrală sau parţială a articolelor, informaţiilor sau a imaginilorapărute în revistă este permisă numai cu acordul scris al editurii. Redacţia nu îşi asumărăspunderea pentru greşeli şi inadvertenţe apărute în materialele colaboratorilor şi aleimerenţilor.

INTRODUCERE - INVATAREA CONTINUA

Realizarea unui site sau a unei simple pagini au presupus Întotdeauna acumularea anumitor cunoştinţe. Procesulde Învăţare nu se opreşte Însă după finalizarea primului site fiindcă standardele noi, trendurile precum şinecesităţ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 saunu prea sunt accesate. Victor Gheorghe

/'iri' ('001-

HeJp Yahoo! Rent Net is ghing away $10,000Help Kids Dn!y 3 d§vs}.:O Cbe" r.,.1?1

Il'Z:CIl:l::I ••...yftot;J

Q ••••• ~8Auto~

li!fFlnanc:e

O: Game.

~Ciroull'

erJ HoUob.

t::!M{lIlStr Mobile Web

ti. Mo";e.

~I'tusjc:

CJ Per'llonal,

b) Real Estate

O Shopplno

ti)SPQrts

.!)Techo Trll"el

C)TV~ 'I'ellowPQQu

See Virgin's space jet

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

B Mo" l' M••••••• ' I 4'l ••do- Ibwea'herl 'tilUClII IQ,lllro.COPU

'14, ~:~ty·:'.~~~::·d",1),

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

Plan Yaur Gelll""'.yToday".TopOU1$V.lICiltOnPaekag"·HUgeCIU'''S",~·Hotl'!OtalsWor!dwldl·ll\kl •••• h •••• !>df •••

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

PulVahool10 wOlkfor)'ou'a ••• dom.'n n."... 11.~"/l"~': ~::I"~n~~';Q'".nd bv,ld •••.•b ." •

Small Buslness

'GetaWebSlte• DamalnN{lme.'SeU Online'Sean:h Ads

Most Popul.r Ent~rt"inm.nt N.W5 VidloS.,......Echo;onl ••• .,.D .IAtt<om>_•••••••• hk h_

• ..,•••• ~ r•••••••..ad.,_rnw~~ •• t_"vht'-t.f.~ •.•••in.s.-.., •• __H_ •••"""~.b(".t11Or. PNI de!.'*nck.tt- to ••••

1011Uk81pllce

Pllpubr;tClIonglmesTurtl9Odysuy2 \.Pgoft'ol!! ~ldfruuatsoflf\1bnt.acllOflga""", <ti YI~OI Gamts Oownlo.d now

Go 10 Y''''oot Shoppll'l9 Ind UVi Otl lne hol new slyln

Futured Servicfl·Oawnlaad..HlIlalth

Mv Yahool • Yahoohg$JlSI forY-..ld~ 9eatnce's Web Chude • Yahoo'lntemtt urtWtekly Plcks. Today'~ Web Evmts. Ch:al. Weathtl Forecasls

R$Jldom Yahool Lmk· Yahoo' Shop

Cine lucrează în domeniul WEB de-sign-ului şi în programarea WEB aconstatat probabil deja că studiul pen-

tru acumularea de noi cunoştinţe nu seopreşte niciodată. Standardele de design,performanţele programării, CSS,HTML şiXHTML evoluează, browser-ele sunt actu-alizate frecvent, plug-in-urile se înmulţesc,iar clienţii cer tot mai mult. Pe măsură cevăcizelaţi o abilitate, descoperiţi altele noi,care ar trebui învăţate. Internetul este unfenomen tânăr, în plină dezvoltare şi nutrebuie decât să ţineţi pasul cu acesta. Puteţiconstata uşor evoluţia acestuia, uitându-văpe o pagină web proprie de acum trei saupatru ani; în majoritatea cazurilor, aţireface-o altfel. Odată cu mărirea intervalu-lui de timp la care ne referim, putem găsidiferenţe enorme. Pentru a exemplificaacest lucru, am luat ca exemplu două vari-ante ale site-ului www.yahoo.com. unadatând din 1997 (sursa www.archive.org)şi alta foarte recentă, din ianuarie 2008.Observaţiile de mai jos sunt în mod normalvalabile pentru oricare dintre pagini:•• pagina de WEB tipică din anii 1995-2000avea rezoluţia de referinţă de 800x600 (înunele cazuri chiar şi mai puţin, 640x480),opaletă redusă de culori, imagini cât mai mici(30-50 KB), toate datora te performanţelorscăzute ale browserelor, calculatoarelor şiale legăturilor la internet (lE 4/5, Netscape5/6, diagonala monitorului de 15 ţoli, mairar 17, viteze mici de conectare la internet16, 32 sau 64 Kb/s). O consecinţă supără-toare a acestor aspecte era reprezentată decantitatea redusă de informaţie pe pagină.

VECHIVS. NOU:Aşa arăta pagina portalului de internet Yahoo! În 1997 (stânga) şiiată care este aspectul său actual (dreapta) .

•• pagina WEB tipică ulterioară anului 2000are ca rezoluţie de referinţă 1.024x 768 (înunele cazuri 1.152x 864 sau 1.280x 1024),paletă extinsă de culori, imagini mai mari(până la 150-200 KB), toate datorate per-formanţelor ridicate ale browser-elor, PC-urilor şi ale legăturilor internet (lE 6/7,FireFox 1.5/2, Opera 9.24, monitoarelor de17 şi 19 ţoli sau widescreen, viteze simţitormărite ale conexiunilor la internet - 128,512 sau 1.024Kb/s). Deoarece s-a pornit dela premisa că vitezele actuale sunt arhisufi-ciente pentru încărcarea paginilor, demulte ori, la accesarea acestora, suntembombardaţi de banner-e, ferestre pop-up şialte variante de reclame care, alături demultitudinea de elemente din pagină, potduce uşor la dezorienta rea vizitatorului.

Atât paginile realizate înainte de 2000cât şi cele din momentul de faţă au un lucrucomun: se bazează pe versiuni ale aceluiaşilimbaj. De aceea, chiar şi în condiţiile exis-tenţei a numeroase editoare WEB de tipWYSIWYG (what-you-see-is-what-you-get), cunoaşterea acestuia, ne referimbineînţeles la HTML, este obligatorie .Aceasta mai ales în contextul evoluţiei per-manente a internetului.

HTML - prima treaptă a cunoaşteriiCu toate că pentru majoritatea începăto-rilor învăţarea HTML este un demers evi-dent, există şi anumiţi aşa-zişi "webdesigneri", care, utilizând editoare WYSI-WYG, încearcă să treacă peste aceastăetapă. Neavând anumite cunoştinţe HTMLde bază, aceştia cred că dacă o pagină arată

bine în editorul/PC-ul propriu, va arătabine şi pe internet.

Din păcate, numărul de pagini nefunc-ţionale sau defectuoase de pe internet nedovedeşte că mulţi dintre cei care folosesceditoarele vizuale cred că acestea suplinescîn totalitate noţiunile de bază.

Un aspect important care trebuie avut învedere la realizarea unei pagini WEB este cădin momentul plasării paginii în internet,aceasta trebuie să arate la fel pentru oricevizitator.

Vizitatorul trebuie să poată:•• folosi oricare din browser-ele dispo-nibile;•• utiliza orice sistem de operare;

Cei care se folosesc exlusiv de un editorvizual vor descoperi cu neplăcere că o pa-gină WEB care arată bine în respectivulprogram de editare, poate chiar şi în brow-ser-ul instalat pe calculator, nu va arătadeloc bine pe alt browser, iar pe un al treileatotul ar putea descoperi un haos. Aceastanumai din cauză că nu dispun de noţiunilecu ajutorul cărora să modifice pagina, astfelîncât să arate la fel pentru toţi vizitatorii.

Să ne imaginăm un depanator de calcu-latoare care se agită şi se învârte în jurulcarcasei unui calculator, în speranţa căacesta va redeveni funcţional. Cel care însădemontează, depanează şi testează calcula-torul îl poate repune uşor în funcţiune.Precum depanatorul, şi web designerulnostru trebuie să înţeleagă codul scris caregenerează în browser pagina web. Dacă nuputeţi detecta greşeala din pagina de web,privind-o din afară, învăţaţi HTML ca să o

INTRODUCERE - iNVATAREA CONTINUA

~ separarea con-ţinutului de design.Cu alte cuvinte,CSS oferă pe de oparte un conţinutcare reflectă struc-tura logică a infor-maţiei şi pe de altăparte libertatea de a

specifica exact aspectul fiecărui tag HTML;~ controlul eficient a seturilor de documen-te complexe. Utilizarea puternicelor faci-lităţi CSS permite designerilor controlulgrafic (aspect şi poziţionare) al unui numărnelimitat de pagini, prin modificarea unuisingur document master sau a unei foi destil. Modificarea aspectului şi/sau poziţio-nării elementelor dintr-o pagină web sepoate realiza cu ajutorul CSS, fară să fienevoie să vă atingeţi de codul HTML. Unalt avantaj al CSS constă în flexibilitatea sadeosebită. Mai multe informaţii despre CSSgăsiţi în oglinda "Rolul CSS".

• 76.04% - Microson kltemet Exp/orer

16.80% - Fretox

.5.59% - SSteri0.60% - Netscape

0.64% - Opera

.0.08% - Moz~a

.0.19% - Altele

BROWSERE: În topul popularităţii conduce Încă detaşat browser-ulMicrosoft.

puteţi vedea dinăuntru. XHTML încorpo-rează HTML şi reprezintă calea de urmatpentru următorii ani. Internetul este plin desite- uri care vă oferă tutoriale gratuite pen-tru HTML, cel mai autorizat fiind cel de laW3Schools (http://www.w3schools.com).care pe lângă tutoriale vă oferă şi posi-bilitatea testării cunoştinţelor proprii. în-cercaţi să vă dezvoltaţi abilităţile învăţândHTML sau XHTML - rezultatul se va vedeaimediat în paginile de web proprii.

CSS - O treaptă mai susCascading Style Sheets (CSS) trebuie priviteca pereche inseparabilă de HTML. CSS ofe-ră designerilor web două avantaje impor-tante în gestionarea unor pagini web, indi-ferent de complexitatea lor:

Tabelele· un pas înapoi?Utilizarea CSS în structurarea unei paginiweb cu ajutorul elementelor de bloc faţă de

mult utilizatele tabele poate induce ideea căse va renunţa la tabele. Oare folosirea CSSînseamnă dispariţia tabelelor? Evident nu.Tabelele şi CSS nu sunt mutual exclusive.Tabelele îşi păstrează locul şi importanţalor, mai ales pentru controlul datelortabelare. Utilizând însă mai pUţine tabele înlayout, paginile se încarcă mai repede dininternet. în plus, CSS-ul oferă avantaje su-plimentare faţă de tabele. Astfel, aşa cumam menţionat anterior, prin CSS se potcontrola culorile, plasarea imaginilor (in-clusiv a celor din fundal - backgroundimages), dimensiunea şi aspectul margini-lor, spaţierea (padding) şi chiar aliniereastânga / dreapta a elementelor de bloc pen-tru o poziţionare exactă în pagina web.

Aspecte softwareAminteam în treacăt mai sus despre afi-şarea paginii în browser şi mai exact despreposibilitatea ca aceasta să nu fie afişată co-rect. Această problemă apare datorită dife-renţelor de interpretare a codului CSS decătre diferite browsere. Browser-ul de in-ternet este programul care înţelege codifi-carea HTML şi CSS, afişând conform cu

ROLUL CSSCascading Style Sheets permit controlul as-pectului paginii, folosind o cantitate redusăde cod unitar la nivelul Întregului site. TheWorld Wide Web Consortium recomandă uti-lizarea CSSÎn tandem cu HTML.Utilizând exclusiv codul HTML,ar fi necesarca atributele unui tag să fie specificate lafiecare utilizare a acestuia. Şi mai neplăcutăeste situaţia În care se doreşte modificareaatributelor unui tag existent. În această situ-aţie, ar trebui modificate toate apariţiile tag-ului respectiv În toate script-urile aferentepaginilor unui site.Cuvântul Cascading din numele CSS sem-nifică faptul că elementele subordonatemoştenesc proprietăţile. Toate elementeleHTMLaflate Într-un element ale cărui pro-prietăţi au fost stabilite Într-o foaie de stilmoştenesc proprietăţile respective. Unelereguli pot fi contradictorii (sau pot părea ast-fel)_În acest caz, ultima regulă din cod estece care se aplică. Precedenţa regulilor, tărialor poate fi Înţeleasă uşor din multele exem-ple de pe internet. În orice situaţie, folosireaintensă a CSS permite reducerea semnifica-tivă a timpului de realizare şi modificare aunei pagini web. Totodată, CSS face codulHTMLmai lizibil, prin eliminarea codului destil şi structură. Un exemplu simplu defolosire poate fi tag-ul <h1> pentru con-trolul atributelor unui titlu:- cod HTML<hl align="center"><fontface="Verdana,

Helvetica,Arial,sans-serif' size="6"color="Nnavy">Titlu</h1>- cod CSSh1 {text-align: right; font-size: 16pt;font-family:Verdana, Helvetica,Arial,sans-serif;color: navy}Referinţa HTMLla regula CSSva fi:<h1>Titlu</h1> _Când se definesc aceste atribute În CSS, secontrolează toate referinţele la <h1> dinÎntregul site cu o singură definire sau regulă(indiferent cât de complexă este structuraacestuia).Exemplul precedent poate fi extins pentrusituaţia când este nevoie de mai multe vari-ante ale tag-ului <h1> la scrierea unortitluri folosind culorile blue, red şi green.Atunci, codul CSSeste:h1.blue {text-align: right; font-size: 16pt;font-family:Verdana, Helvetica,Arial,sans-serif; color: blue }h1.red {text-align: right; font-size: 16pt;font-family:Verdana, Helvetica,Arial,sans-serif;color: red }hl.green {text-align: right; font-size: 16pt;font-family:Verdana, Helvetica,Arial,sans-serif;color: reen}Referinţele HTMLla aceste reguli CSSvor fi:<h1 c1ass="blue">Titlu blue</hl><h1 c1ass="red">Titlu red</h 1><h1 class="green">Titlugreen</h 1>Dacă Încă nu gestionaţi aspectul grafic al site-ului web propriu cu CSS,este bine să vă pro-

puneţi să o faceţi cât mai repede.Implementările CSS diferă de la browser labrowser. Un exemplu de implementare dife-rită a standardului HTML este legat deTAG-ul <body>. Dacă se doreşte plasareapaginii web În colţul din stânga sus a ferstreibrowser-ului, evitând diferenţele dintreacestea, se foloseşte:<body leftmargin="O"topmargin="O"marginwidth="O"marginheight="O">Fără standardul CSS, această problemă depoziţionare nu dispare. Cu CSS, aceeaşi po-ziţionare se realizează astfel:body {margin: O;padding: O;}Dar de ce este nevoie de ambele declaraţiipentru atribute (margin şi padding)? Motivuleste că browser-ele utilizează metode diferitede indentare a elementului <body>. Dacăse utilizează body { padding: O; } numaibrowserul Opera (atât sub Windows cât şi subMac) va poziţiona corect, În stânga sus, pagi-na web. Dacă se utilizează body {margin: O;}toate celelalte browsere (exceptând Opera)vor poziţiona corect pagina web.Cea mai bună cale de urmat este de a po-ziţiona paginile folosind ambele atributeCSSpentru declaraţia <body>.E Şi dacă tot v-aţi obişnuit să lucraţi custyle-uri, de ce să nu o faceţi când editaţipropriile documente cu editorul favorit (fieel Microsoft Word, OpenOffice Writer etc.).Editoarele moderne au incorporate mecanis-mele pentru gestionarea style-urilor.

aceasta pagină de web pe ecranul utiliza-torului. Pe măsură ce rolul CSS în webdesign creşte, este necesară testarea aspec-tului paginilor web în cele mai utilizatebrowsere. Aşa cum am spus, nici un brow-ser nu afişează perfect codul CSS, uneleavând imperfecţiuni de implementare astandardelor W3C. Diferenţele de "înţe-legere" a codului CSSvariază de la browserla browser şi un programator web trebuiesă ţină cont de acestea şi nu să dea vina pebrowser. Cu alte cuvinte browser-ele, cuimperfecţiuni cu tot, trebuie luate aşa cumsunt şi construcţia paginilor web trebuie săplece de la acestea. Scopul este acela capagina web să apară corect în toate brows-er-ele importante (cel puţin rE, FireFox şiOpera, deoarece acestea sunt utilizate înproporţie de 93,6% - vezi statistica de pepagina anterioară).

Majoritatea celor care navighează peinternet utilizează Internet Explorer sauMozilla Firefox, cu precizarea că numărulde utilizatori Opera este în creştere. Cutoate că fiecare dintre aceste ultime douăbrowser-e este actualizat constant, mulţidesigneri web nu-şi actualizează periodicversiunile propriilor pagini web. În plus, şisistemele de operare (Windows, Linux sauMac OS) sunt actualizate frecvent şi chiarapar versiuni noi ale acestora, faptul afec-tând şi aspectul paginilor web în browsere.O bună practică este aceea de a fi în legă-tură permanentă cu alţi designeri web (dedorit utilizatori de sisteme de operarediferite) pentru a avea o vedere rapidăasupra modului de afişare a propriilor pagi-ni web în cele mai diverse contexte.

• tG~;f",""",.-;o.loţ"" ••-~

fk t.-: \.4Ow '''''''''''!.''* "'".,..

GO"'Jgle :.. aPl'.'.tt:r~~M"."IU ::;'I··~b."'''Web F=.~1·1'00II~,""", ••• f9

I ~da~~er.w ••••••• ct\Ip1IlOllp Y-""'IF\IIIU c••••..•••••'.., •...tk~.Clilţnv. "'14_:'IaChlp SI*?"",,,,,,U.'U!fMUta~_

d''$I1 'l'

~~~c IP r ţ~"~i"'f!l.~1;1~·r':Yl. ,,:",",-eo.-.lItU~lUo.000IiItk;fl1Ct1lP~ '1•• .rm~ah"O'JI;olUţt"'l"uf.ţ.IOOr_F,..,. ••, 5h"."Mto..no Jo;'.:••,,_,

."

Ct!lf.B2..E.21:lJTl PI!N •••.ftd 1« v8'..tt: fl'.eJ'v.,~.I""ICloOtiJIlI~Ooulle"'dlipf:!J-·""'H.lmj:;rt .•••,rc.t:J ;ţ;t~,u,,~4ttp.,uu,tCI1IP c•.•.•.IlIUGlluclllCIl,P ' .•, ,

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

~1~Ut111l1OQ ,~,:uu' GG!lllHl<U1<1\l-IJ~me~nl.l<d~tCl1' m.Jj duC •••• c~ 'oo4l'I.1'~ Cll11'UI.I. r~ndulW:. YOfpul" ~fttWlLt lIltlml'lencuu~ (lin ".t""Jch'I'

CHIP Onl!OO. BllmW.tr_T~oll:!'J.Jncefl:me ~~Lw.r,I.'Il*l!II9<tt";""'Iq,_tltfllnd'dtlg.nol\l~ q<ln.:elhK~'"m • ..J/'Jff lI/Vrl,no:t1.mt·~d,o)l.,,'JtI.:t\lm~'lgl

~"'"

.• O::tI"'1""" ."y,~'~l.~.•.•.,1, "II~"~'

.• ~.I", ,1.0"'''91' 1. '=""Il• ~. ~l.-?, \1'" "," (It••rt"l ••• OU'!'-

H'••.••I.

1 Orb •••.'.rO<>t ••"044H1.1t""•••,.P'Wl.-,.•,~.." •..••••t

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

[""":=':::"'''1·(lfQ~6etfl, •••

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

p.w«tSlP ••r. .••

• 6Iu.-RSSO.';,• l~l<'k!ny h"'OU'''''tl• Tl"ftl«.~r rroo "A• Voeorolf,lo',O,l• P'''I1,r.2'),1

r ChIl' SpeclolPC ProctlclonLJlIriu 2007

r ChIp 6puclol -PC Pr.1etlcDocor"br!e 2006

r Chip 6llUr:!olPC f'rocticNolorTIbrlo 2000

Afl,\ a 1(> 1.1tll(llllPll f4lJun t;"fI' 4ClJm

Motoare de căutareSimpla realizare a lllei pagini nu este însăsuficientă. Astfel, respectivul site sau infor-maţia conţinută de acesta trebuie să fieuşorde găsit. Cel mai simplu mod de a găsiinformaţia pe internet este prin interme-diul unui motor de căutare.

Motoarele de căutare sunt site-uri spe-ciale din cu ajutorul cărora cei care na-vigheazăpe internet găsescinformaţii desprealte site-uri sau conţinute în acestea. Deşiexistă diferenţe în modul în care este căutatăinformaţia, toate motoarele de căutare exe-cută în principial trei operaţiuni de bază:~ caută în internet sau părţi ale acestuia, pebaza unor cuvinte cheie;~ păstrează un index al cuvintelor pe carele-au găsit şi locul unde le-au găsit;~ permit navigatorilor să caute cuvinte saucombinaţii ale acestora în acel index.

Motoarele mai vechi de căutare aveauun index care conţinea câteva sute de miide pagini sau documente şi răspundeau lacâteva mii de cereri zilnic. Astăzi motoarelede căutare indexează sute de milioane depagini, şi răspund la zeci de milioane de ce-reri de căutare zilnic. Motoarele de căutare

sunt în fapt baze de date masive care acope-ră aria internetului şi constau din trei părţi:~ cel puţin un program numit spider saucrawler care "scormoneşte" internetul, fur-nizând informaţii;~ bază de date care stochează acele infor-maţii;~ instrument de căutare prin baza de datecare selectează informaţia pe baza unorcuvinte cheie introduse de către utilizator.

De regulă, rezultatul căutărilor esteafişat paginat (de exemplu 10 rezultateafişate pe ecran) pentru a evita liste lungi,greu de parcurs şi de procesat. Motoarelede căutare au ajuns să fie specializate şi pealte categorii de informaţie decât cele cla-sice. Astfel, Google oferă şi posibilitatea dea căuta imagini (grupate pe diverse dimen-siuni). Cele mai accesate motoare decăutare diferă de la ţară la ţară şi de la an laan. La nivel global, conform unui studiudisponibil la http://marketshare.hitslink.com, pe primul loc se află Google, cu77,04%,urmat de Yahoo! (12,46%) şi MSN(3,33%) - vezi imaginea de mai jos.

Pentru ca unele motoarele de căutare săindexeze şi să furnizeze navigatorului inter-

net informaţii des-pre site-uri este ne-cesar ca în secţiunea<header> a pagi-nilor web să existe odescriere a site-uluirespectiv, prin in-termediul metaTAG-urilor.

• 77 .04% • Google • Global

12.46%· Yahoo • Global

• 3.33% • MSN • Global

2.12%· AOL· Global

• 1 .38% • Ask • Global

.0.24% . Altele

INTRODUCERE - iNVATAREA CONTINUA

De exemplu, în meta TAG-uri se pla-sează informaţii despre domeniul de activi-tate, cuvinte cheie care descriu acest dome-niu, autor etc.

Este indicat să nu fie niciodată omisemeta TAG-urile dintr-o pagină web. Deşiunele motoare de căutare nu se mai bazeazăexclusiv pe meta TAG-uri, specificareasetului de caractere utilizat, domeniul,cuvintele cheie etc. oferă detalii importantedespre respectiva pagină web. Este de doritca descrierea conţinutului, domeniului şi

cuvintelor cheie să fie făcută concis şi clar,evitându-se plasarea unor texte lungi.

Harta site-uluiDeoarece motoarele de căutare nu oferădecât informaţii punctuale asupra unui site,adică o referinţă face legătura către unpunct din structura site-ului, este greu cacineva să aibă o privire de ansamblu asupraariei pe care o acoperă site-ul. Plasarea lavedere a unei legături către o seCţiunedis-tinctă a site-ului, care să conţină structura

lui, poate oferi detalii care altfel ar rămânenecunoscute persoanei care îl accesează.Deaceea, pentru situaţia în care un site aremulte ramificaţii (nivele şi subnivele) şichiar dacă structura sa ar trebui să reiasă dinorganizarea meniurilor şi legăturilor, esterecomandată totuşi plasarea unei hărţi asite-ului în structura acestuia. Hartasite-ului mai oferă informaţii şi despre acelepagini care nu figurează în meniuri şi per-mite o navigare uşoară direct la acele paginicare îl interesează pe cel care le accesează.

REGULI XHTMLWorld Wide Web Consortium (W3C) reco-mandă utilizarea limbajului XHTML În loculHTML. XHTML este un limbaj hibrid, arată şifuncţionează ca HTML, dar are la bază XML.Pentru cei care s-au obişnuit să utilizeze lim-bajul HTML, trecerea la XHTML este foarteuşoară.Utilizarea standardului XHTML 1.0 Transi-tional, o versiune a XHTML care funcţio-nează bine pe browserele actuale dar şi pecele mai vechi (Netscape Navigator 4 şiInternet Explorer 4), permite designerilorweb să modifice fără probleme pagini webdeja publicate În internet dar şi să elaborezepagini noi folosind aceleaşi tehnici.Comutarea de la HTML tradiţional la XHTML1.0 este la Îndemâna oricui dacă respectăurmătoarele reguli simple:

gDeschldeJidocumenteie CU DOCTYPEliNAMESPACEadecvat

Documentele XHTML (ca orice documentHTML pot avea extensia .htm sau .html) tre-buie să Înceapă cu declaraţia DOCTYPErestuldocumentului fiind identic cu unul HTML;

<!DOCTYPEhtml PUBLIC,,-//W3C//DTD XHTML1.O Strict/ /EN",,http://www.w3.org/TR/xhtmll /DTD/xhtmll-strict.dtd"><html><head><title>lIustrare XHTML</title></head><body><p>continut</p></body></html>XHTML 1.0 poate specifica trei tipuri dedocumente XML care corespund la treideclaratii de tip DOCTYPE(DTD): Strict,Transitional, şi Frameset.XHTML 1.0 Strict se foloseşte În situaţiilecând se urmăreşte realizarea unui cod curatşi ordonat. Se foloseşte Împreună cu CSSşideclaraţia de tip DTD este:

<!DOCTYPEhtml PUBLIC,,-//W3C//DTD XHTML1.0 Strict/ /EN",,http://www.w3 .org/TR/xhtmll /DTD/xhtmll-strict.dtd">

XHTML 1.0 Transitional se foloseşte În situ-aţiile când se urmăreşte realizarea unui codcu facilităţi HTML care să arate bine şi Înbrowsere care nu Înţeleg CSS.Declaraţia detip DTD este:

<!DOCTYPEhtml PUBLIC,,-//W3C/ /DTD XHTML1.0 Transitional/ /EN",,http://www.w3.org/TR/xhtmll /DTD/ xhtmll-transitional.dtd">XHTML 1.0 Frameset se foloseşte În situaţiilecând se urmăreşte partiţionarea ferestreibrowserului in două sau mai multe cadre.Declaraţia de tip DTD este:

<!DOCTYPEhtml PUBLIC,,-//W3C//DTD XHTML1.0 Frameset//EN",,http://www.w3.org/TR/xhtmll /DTD/xhtmll-frameset.dtd">

Declaraţia de NAMESPACE urmează imediataceleia de DTD şi are forma:

<html xmlns=,,http://www.w3.org/1999/xhtml''xml:lang= "en" lang="en">Înlocuind TAG-ul <html >.ilIE Multe pagini XHTML Încep cu un prologXML opţional «?xml» care precededeclaraţiile DOCTYPE şi NAMESPACE. Dinnefericire acest prolog XML cauzează pro-bleme În unele browsere şi este recomand-abil să nu fie folosit. Scopul prologului estede a specifica codificarea alfabetului utilizatÎn pagina web.Dacă intenţionaţi să construiţi o pagină caresă vizeze o arie de cuprindere internaţionalăşi care poate conţine caractere non ASCIIputeţi utiliza meta TAG-ul Content-type Înlocul prologului XML. Exemplul următor ilus-trează acest meta TAG:<meta http·equiv="Content-Type"content="text/html ;charset=UTF-8"/>

!tScrleţl toate fAG-urile cuiiicaractere miciSpre deosebire de HTML, XML face distincţieÎntre caractere mici şi majuscule. ToateTAG-urile XHTML şi atributele trebuiescrise cu caractere mici, În caz contrardocumentul nu se validează. Validareatrebuie să vă asigure că pagina web nuare erori.Dacă doriţi să modificaţi un document

mai vechi HTML În XHTML, atunci TAG-urile se vor recodifica astfel:

<TITLE>Revista CHIP Online</TITLE>

se va scrie

<title> Revista CHIP Online </title>În mod asemănător, <P> devine <P>,<BODY> devine <body> şi aşa maideparte.

I!lPuneţl toate atributele înlijapostrofuriÎn HTML, nu este obligatoriu ca atributeleTAG-urilor să fie puse Între apostrofuri. ÎnXHTML aceasta devine obligatorie de exem-plu width="55" şi nu width=55. Aplicaţiaceastă regulă tuturor atributelor.

1'1Toate TAG-uriletrebuiel1li să fie închiseÎ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Închide:

<p>Un TAG ramas deschis.<p>Un paragraf fara TAG-ul pereche

În XHTML, fiecare TAG, odată deschis,trebuie să fie Închis:

<p>Un TAG ramas deschis.</p><p>Un paragraf initial fara TAG-ul

ereche acuma trebuie inchis.</ >

",fAG-urile nepereche trebuielijînchlse şi eleÎn XHTML, chiar şi TAG-urile nepereche pre-cum <br> şi < img> trebuie să fie ele Înse-le Închise. Aceasta se face plasând un spaţiuurmat de slash /> la sfârşitul TAG-ului:

<br /><img src="ojmagine.gif' />De remarcat spaţiul care precede slash-ul.Acesta este obligatoriu pentru ca browser-ele mai vechi să poata reprezenta corect Înecran standardul XHTML.Observaţie: pentru a fi valid şi accesibilTAG-ul <img> trebuie să aibă incluse atri-butele alt= ,," şi title=,," forma nouă fiind:

<img src="ojmagine.gif' alt="o imagine"title="coperta CHIP"/>

STANDARDE WEBDesignerii şi programatorii de pagini websunt puşi deseori În situaţia de a modifica demai multe ori unele secvenţe de cod pentru arezolva 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 pentruaceeaşi pagină web. Situaţia tinde să se Înrău-tăţească datorită utilizării masive a telefonieimobile sau a altor dispozitive portabile ca-pabile să navigheze pe internet. Pentru a na-viga internet, acestea au nevoie de softwarenou adecvat modului lor de funcţionare, faptcare ce complică semnificativ procesul de pro-gramare a unor pagini web.Pentru a face internetul un loc mai bun atâtpentru web designeri cât şi pentru utilizatori,este extrem de important ca producătorii debrowsere şi programatorii să respecte custricteţe standardele atunci când dezvoltă noiaplicaţii. Internetul are nevoie de standardedeoarece acestea asigură accesul tuturor laaceeaşi informaţie, afişată În acelaşi fel.Un exemplu des Întâlnit de interpretare difer-ită a codului HTMLeste cel al formatării spaţi-i1or. De regulă, dacă Între elemente HTMLsunt plasate mai multe spaţii (a nu se confun-da cu caracterul &nbsp; care forţează unspaţiu În linie) acestea sunt ignorate.lnternetExplorerul Însă are un comportament diferit.În acest cod sursă se reprezintă un tabel careare În celule text şi imagini:1 <!DOCTYPEhtml PUBLIC,,-//W3C//DTDXHTML1.0 Transitional/ /EN"2 ,,http://www.w3 ,org/TR/xhtmI1 /DTD/xhtmll-transitional.dtd">3 <html>4 <style>5 td { padding: Opx; background-color: #000000;text-align: center;6 font-size:14px; color: #FFFFFF;font-weight:bold;7 font-family:Verdana, Arial, Helvetica,sans-serif; 18 </style>9 <body>10 <table border="l ">11 <tr>12 <td><img src="table_pcpractic.jpg"border="O"/></td>13 <td>Celula<br /> 1-2</td>14 <td>15 <img src="table_pcprac:ic.jpg" border="O"/>16 </td>17 </tr>

Calea de urmatIndiferent de structura site-ului, publi-

cul ţintă sau domeniul acestuia, utilizareaXHTML este cea mai bună cale de urmat înrealizarea de pagini web, aşa cum de faptrecomandă şi W3C . Pe lângă XHTML,W3C recomandă insistent folosirea CSS.Chiar dacă implementarea standardelorpentru XHTML şi CSS diferă de la browser

DERANJANT: De multe ori o pagină aratădiferit În browsere diferite.

18 <tr>19 <td>Celula<br />2-1 </td>20 <td><img src="table_pcpractic.jpg"border="O"/></td>21 <td>Celula<br />2-3</td>22 </tr>23 <tr>24 <td><img src="table_pcpractic.jpg"border="O"/></td>25 <td>Celula<br />3-2</td>26 <td><img src="table_pcpraetic.jpg"border="O"/></td>27 </tr>28 </table>29 </body>30 </html>_În browserele Firefox şi Opera tabelul seafişează corect, pe când În Internet Explorer(fie el IE7 sau IE6) nu. Astfel, la afişarea prinintermediul browserului Microsoft se observăo dungă neagră sub imaginea din colţuldreapta sus al tabelului.Dacă privim cu atenţie codul sursă se observăca la linia 15 din cod, după TAG-ul de imagineexistă cel puţin un spaţiu. Acesta provoacămărirea nedorită a Înălţimii celulei şi apariţiaunei dungi negre (culoarea de background)sub imagine. O altă consecinţă este că Întrea-ga linie este afectată, deci şi imaginea dinstânga sus. Pentru cineva care nu are exerci-ţiul citirii codului HTML această deplasarepoate deveni o problemă supărătoare pentrucă o asemenea eroare se depistează greu.Acest defect de reprezentare se elimină celmai simplu scriind liilfflltjMi'-iIMtffltj'mmw-lolxlfără spaţii de exem- fie ~<it '{.... !ia r""",,,,, !:le\>plu linia de cod 12 sau Addo"",I~H'IHTML~""';;'~""'-1<ml20.Un alt exemplu, tipicpentru modul cumacelaşi standard, celde HTML, poate aveaimplementări diferiteeste cel al spaţieriicelulelor CELLSPAC-ING Într-un tabel În "JlMy~

TAG-ul TABLE. Stan- MARGINI: Este bine să le respectaţi pentru fiecare browser.

dardul HTML nu precizează o valoarea impli-cită pentru acest atribut. Atunci când se con-struieşte o pagină web şi se omite precizareavalorii pentru atributul CELLSPACING,douăbrowsere diferite vor afişa spaţieri diferite Înjurul celulelor tabelului.Ca rezultat apare o regulă de scriere a TAG-uluiTABLE,care cere ca atributul CELLSPACINGsăfie declarat În mod ex licit. Aşadar, secventa<table cellpadding="3" border="l "> .</table>duce la afişarea incorectă a spaţierii celulelorÎn browsere diferite, pe când, În cazul:<table celispacing="O"cellpadding="3"border="l "> </table>tabelul va fi afişat corect, indiferent de tipulbrowser-ului.Un alt exemplu mai vechi provine din imple-mentarea diferită a standard ului HTMLpentruTAG-ul BODY În browser-ele Netscape şi In-ternet Explorer. Poziţionarea secţiunii BODYseface cu TOPMARGINşi LEFTMARGINÎn internetExplorer, iar pentru Netscape se face cu MAR-GINHEIGHTşi MAR'GINWIDTH.Dacă se doreştepoziţionarea corectă a paginii web În colţul dinstânga sus a ecranului pentru ambele browsereatunci TAG-ul BODYse scrie:<body topmargin="O" leftmargin="O" margin-height="O"marginwidth="O"> </body>

Mjffit!j§lit§ţifl.i- _Io'xlAo .•<it '(.... !ia ~ H'"~i~-B_' l. l.oca6on I""""-I<ml 3 II

11ARGINHEIGHT ~.'" :-E<QH

•.~+Ht!l

'"~..:J

~"r--- [llL)!i. ~'. <i'" ,2-1 #

la browser, efortul de a armoniza codulscris cu cerinţele specifice browserelor me-rită facut.

Nu trebuie uitat că standardul pentruJavaScript face parte din construcţiafiecărui browser. Dat fiind faptul că imple-mentarea JavaScript OS) este, cu mici ex-cepţii, identică în cele mai utilizate browse-re, folosirea de cod JS nu va ridica probleme

şi se recomandă de câte ori realizarea site-ului o reclamă. O caracteristică Java Scriptde reţinut este că scripturile se execută pecalculatorul clientului, caracteristică im-portantă atunci când se doreşte desconges-tionarea dialogului cu serverul internet.Dacă programatorul web stăpâneşte acestetrei limbaje, XHTML, CSS şi JS, poate atacacu succes un proiect web nou.

Scurt periplu de-a lungulevolutiei 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

Prima etapă, a browser-elor avant la let-tre coincide cu momentul inventăriiwww-ului (world wide web) în 1991.

Cel dintâi, apărut simultan aşa cum proba-bil aţi bănuit, avea o interfaţă exclusiv înformat text. Acest prim prototip (construitde Tim Berners Lee, inventatorul www-ului, împreună cu Robert Cailliau) constaîntr-un browser web pentru sistemul deoperare NeXTStep. Deşi dispunea de ointerfaţă grafică cu utilizatorul, la data lan-sării browser-ul nu putea să afişeze însăpagini cu fotografii încastrate. De fapt,acest lucru a fost posibil abia la apariţia luiNCSA Mosaic, lansat în noiembrie 1993.Afost un pas uriaş înainte, având în vedere

faptul că acest browser a introdus pe piaţăsuportul pentru sunet, imagine, bookmark-uri şi history.

Dictatura NetscapeDupă Mosaic, la rampă a apărut Netscape,lansat în decembrie 1994.Acestaera în fapt oversiune mult îmbunătăţită a lui Mosaic, cusuport pentru conexiuni multiple Tep/IP,cookie-uri şi tag-ul <CENTER > .

Compania mamă, Netscape Commu-nications Corporation a cerut bani pentruutilizarea browser-ului său, deşi îl oferea şigratuit unui public ţintă alespe sprânceană,Cum ar fi studenţii şi profesorii. Acestlucru a ajutat enorm la popularizarea lui

Netscape, care s-a impus ca browser co-merciaL În martie 1996a fost lansată şi ceade-a doua versiune a lui Netscape, noutăţileîn acesta fiind frame-urile şi JavaScript. Lanumai câteva luni după aceea a apărut şiNetscape 3, care oferea suport pentruaşa-numitele mouseovers (unul dintre celemai populare şi mai răspândite scripturicare faceca imaginea să se modifice uşor cuun efect plăcut atunci când utilizatorultrece cu mouse-ul peste ea) şi alte câtevacaracteristici. Aceste trei browsere faceaulegea pe piaţă în acea vreme, Netscape 3 înspecial devenind un punct de referinţă dinpunct de vedere al excelenţei. Orice alt pro-gram de navigare trebuia să ofere suport cel

puţin pentru tot ceea ce oferea Netscape 3ca să poată fi luat în serios.

Apoi, internetul a explodat. Microsoft seinteresa de internet încă de la începuturi,iar debutul marii dezvoltări a www-ului afacut colosul din Redmont să pună osul latreabă pentru a recupera teren în faţa con-curenţei. Ce înseamnă acest lucru? Simplu:Microsoft avea nevoie de un browser. şiaceastă companie a început de la o versiunede Mosaic şi curând a apărut InternetExplorer. Dacă despre lE 1 şi 2 este maibine să nu spunem nimic, odată cu InternetExplorer 3 însă, Microsoft a adus pe piaţă,în august 1996,primul său browser decent.Nu se ridica tocmai la standardele luiNetscape 3, dar, pentru a se revanşa, cre-atorii săi l-au facut primul program de nav-igare cu suport CSS,pe atunci o tehnologieaproape necunoscută.

Să ai însă un browser propriu nu în-seamnă mai nimic fară un marketing bun,iar prima mişcare a celor de la Microsoft afost să pune lE gratuit la dispoziţie tuturorutilizatorilor, spre deosebire de Netscapecare impune a plata unei sume modestepentru utilizare. Cota noului actor pe piaţanavigatoarelor a crescut, dar nu se apropianici pe departe de cea a lui Netscape. Uniiar spune că principalul motiv pentru astaera nivelul destul de redus de dezvoltare aprogramului. Utilizatorul obişnuit ştia pevremea aceea foarte pUţine despre browser-e, dar de numele Netscape va fi auzit destulde frecvent. Dacă pe deasupra mai luăm înconsiderare şi superioritatea tehnică a celuidin urmă, putem vedea de ce, pentrumoment, dominaţia lui Netscape pe piaţade profil era asigurată.

Războiul browser-elorZorii confruntării între Netscape şi Micro-soft stăteau să se ivească. Ambele companiiaveau nevoie de noi tehnologii pentru a-şisusţine eforturile de marketing şi pentru ada propriului navigator avantajul decisivasupra celuilalt. Pe la fmele lui 1996,W3C,pe atunci încă un factor necunoscut, şi-apublicat propria specificaţieCSS 1,în care apus bazele abordării de separare a conţinu-tului de prezentare. Devenea interesant.

De sine stătător, CSSnu era suficient deatrăgător. Niciunul dintre ofertanţii debrowser-e nu credea că nişte culori de fim-dai şi pentru frame-uri vor fi suficient deconvingătoare pentru a câştiga "războiul".Ambii actori au ajuns la concluzia că ar tre-bui să fieposibilă schimbarea CSS-ului uneipagini web din browser în sine. Ambele

navigatoare încorporau DHTML(Dynamic HTML), de unde modificareaCSSprin intermediul JavaScript. Pe atunci,standardul JavaScript de facto era o imple-mentare a Netscape 3, DHTML, însă, nece-sita o extensie a DOM (Document abjectModel, adică modelul care descrie relaţiaelementelor dintr-o pagină HTML, cum arfi câmp urile de introducere, imaginileparagrafele etc., cu documentul în sine).Deloc surprinzător, ambii dezvoltatori audecis să extindă JavaScript pe cont propriuşi nu au acordat atenţie eforturilor celuilalt.

lW·hW' În general, Microsoft a luat deciziimult mai bune decât Netscape. Înainte detoate, şi-a rescris browser-ul de la zero, ast-fel că nu mai era limitat de chestiuni dedrepturi asupra codului. Netscape, dim-potrivă, a încercat să adauge caracteristicinoi codului lui Netscape 3, o decizie careurma să aibă consecinţe serioase.

În al doilea rând, implementareaDHTML a celor de la Microsoft era orien-tată către web designeri şi utilizatorii cuceva cunoştinţe de programare, în timp cevarianta Netscape se adresa cu precădereprogramatorilor pasionaţi, cărora le plă-ceau structurile complicate de dragul struc-turilor complicate. În plus, Internet Explo-rer suporta şi un element impOltant carelipsea din programul concurent: lE putea săreorganizeze pagina. Atunci când utilizaţiDHTML, de exemplu, pentru a înlătura unelement HTML din pagină, toate celelalteelemente ar trebui să se reorganizeze pen-tru a ocupa spaţiul eliberat de elementulîndepărtat.

Jetscape4 a fost lansat în iunie 1997,cucâteva luni înaintea versiunii cu acelaşinumăr a lui lE, iar documentaţia sa a fostîntotdeauna considerabil mai bună decâtceea ce oferea Microsoft. În plus, Netscapea avut întotdeauna o comunitate foarte ac-tivă de apărători care lui Explorer îi lipsea.Prin urmare, la începutul acestui război albrowser-elor distribuţia forţelor era înmare egală, deşi Netscape încă era cu unpas înainte. Dar asta urma să se schimbe.

l!DDl1 Microsoft a avut avantajul că, spredeosebire de Netscape, facea şi altceva decâtbrowsere. De exemplu, facea sisteme deoperare, şi profitabil după cum ştiţi, astfelcă banii pentru dezvoltarea unui browsergratuit nu au fost niciodată o problemă. Înplus, popularitatea SO-urilor au asiguratdistribuirea facilăşi eficientă a programuluide navigare. Din ce în ce mai plin de bug-

Iluştrii necunoscuţiPe lângă browser-elecare au însemnat ceva pepiaţă, universul navigării pe internet a maicunoscut şi prezenţa unor iluştri necunoscuţi.Cu titlul de curiozitate, enumerăm în conti-nuare câţivadintre aceştia.~ xBBrowser ~ SpaceTime ~ Bitty~ SeaMonkey ~ K-Meleon

uri ciudate şi necunoscut pentru noii utili-zatori de internet, Netscape 4 a început săfie clistribuit cu titlu gratuit, iar banii (înlipsa unei alte surse de venit) au început săse termine. Ultima redută: oferirea surseiprogramului.

ltuJ:l:ljlldj;H:,iil Deşi lupta cea mare s-a datîntre cele două browsere despre care amvorbit, pe piaţă existau şi alte programe.Dintre ele, Opera s-a dovedit a fi unul din-tre cele mai importante. În primul rând,suportul său CSS a fost întotdeauna exce-lent, iar în al doilea rând programul estefoarte uşor şi de descărcat şi de rulat,implicit foarte potrivit şi pentru utilizareape sisteme mai vechi.

CJ:mlJ! Apoi Microsoft a lansat InternetExplorer 5, în martie 1999,şi era clar cine acâştigat competiţia, lE 5 fiind primul navi-gator cu suport pentru părţi mari ale W3CDOM, ceea ce a adus gradul de suport CSSla un nivel superior faţă de ceea ce putea săofere Netscape. La polul opus, motorul luiNetscape mergea din ce în ce mai prost dincauza bug-urilor şi nu mai putea supravie-ţui unui update major. Astfel, vechiul codMozilla trebuia rescris. Acesta a fost mo-mentul naşterii proiectului Mozilla (TheMozilla Project). A durat aproape doi ani şijumătate până când acesta să treacă de toatestadiile beta. A mai durat un an şi ceva pânăla apariţia lui Mozilla l.0 (2002), iar din acelmoment Mozilla Firefox a început să devi-nă o alternativă viabilă pentru navigarea penet. După o versiune 4 dezastruoasă, Operapărea să fi pierdut calea ce bună, dar a re-venit cu varianta 5, după care nu următoa-rea, ci versiunea 7 a mai reprezentat un pasmajor pentru program. Surpriza începutu-lui de mileniu a fost nou-venitul Konque-ror, un browser independent, dezvoltat ori-ginal pentru Linux, cu suport excelent pen-tru toate tehnologiile moderne.

Cam acesta a fost drumul de la primulbrowser până la versiunile actuale ale pro-gramelor pe care le folosim şi care ne suntindispensabile pentru prezenţa în internet.Navigare plăcută şi sigură cu browser-uldumneavoastră preferat!

Conţinutul Înaintea designuluiDacă 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 directproblematica şi vă prezentăm câtevaelemente care trebuie avute în vedere

la planificarea unei pagini web: definirea

şi precizarea obiectivelor, stabilireacuprinsului şi pregătirea lui, culegerea şistructurarea informaţiilor, formulareatextelor pentru web, planificarea inserării

de imagini şi grafică, creionarea structuriisite-ului şi a elementelor de navigare, ex-plicitarea domeniilor vizate şi a elemente-lor de pagină şi, nu în ultimul rând, com-

patibilitatea cu diferite browsere şiSa-uri. Toate acestea trebuie să funcţio-neze într-un context real. De aceea, tre-buie să fie precizate atributele paginii webprin 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-tului, programe şi variante de programe,instaIări);• natura paginii (privată, firmă, partedintr-o organizaţie mai mare, furnizor deservicii);• parametrii sociali ai viitorilor naviga-tori (copii, tineri, oameni maturi, pen-sionari, nivel de pregătire);• durata existenţei unei variante de pa-gină web înainte de reproiectare.

Structura site-uluiŞi pentru că, în mare parte, munca deplanificare presupune găsirea de răspun-suri la cele mai variate întrebări sau nece-sităţi, continuăm cu încă o serie dechestiuni care necesită clarificare înaintede elaborarea structurii unui site. Înprimul rând, veţi determina ce teme vor fitratate pe ce pagină şi care sunt legăturileîntre paginile individuale şi cele externesite-ului. De asemenea, vă interesează cefel de grafică se plasează pe pagini, cu cefonturi vor fi afişate elementele de text şice dimensiune a fontului veţi alege pe ele-mentele de structură. Fără doar şi poatenu pot fi uitate culorile care vor intra îndesignul paginilor (vezi oglinda), modali-tatea de asigurare a lizibilităţii informaţi-ilor, cu focus pe spaţierea elementelor înpagină. a altă preocupare importantăapare atunci când decideţi dacă site-ul vafi construit sau nu pentru mai multe limbi(există cazuri în care seturile de caracterepentru unele limbi ridică probleme).

Cu aceste informaţii deţinute, puteţipurcede la elaborarea structurii site-ului.Aceasta se compune din documenteHTML ca element de bază. a structurăpoate fi simplă (liniară), dar poate fi şicomplexă, în funcţie de cerinţele site-ului.De aceea, o regulă generală este de a facede fiecare dată schema structurii site-ului.

MENIU: Structura acestuia nu trebuie să fieidentică cu a site-ului.

1--- - - - -

• I-

I -. II • • I •~ - -

hyperlink-

- -

Pe această schemă se pot evidenţia legă-turile dintre elementele structurii şi legă-turile externe. a asemenea schemă îşidovedeşte utilitatea mai ales în situaţiileîn care un site mai vechi urmează să fiemodificat sau reproiectat. Pe schemă sepot identifica uşor elementele de modifi-cat, înlocuit sau eliminat.

Având structura site-ului, se poate pre-ciza structura meniului de navigare, carenu trebuie să fie neapărat identică.

Alegera meniului adecvatUn element important în arhitectura uneipagini web este meniul. Meniul este celcare ghidează utilizatorul prin paginilesite-ului. Structura sa trebuie să o urmă-rească pe cea logică a site-ului. Amplasa-rea se face în funcţie de designul paginii.În principiu există patru modalităţi de aamplasa meniul în pagină, fiecare din eleavând avantaje şi dezavantaje.

Amplasarea meniu luiîn partea de sus a ecranuluiAvantaje-+ foarte răspândit;-+ corespunde moduluinatural de citire (stânga-dreapta);-+ rămâne mult loc pentru restul infor-maţiilor;-+ paginile pot fi tipărite uşor.

Dezavantaje-+ nu încap decât rela~ivpuţine elementeîn meniu.

Amplasarea menlululîn partea din stânl)aa ecranuluiAvantaje-+ foarte răspândit;-+ aspect optic corespunzător;-+ permite meniuri suplimentare la mar-ginea de sus a ferestrei.Dezavantaje-+ distanţă mare între meniu şi scrollbar;-+ se printează neaspectuos pe hârtie;-+ consumă mult spaţiu în fereastră.

Amplasarea menlululîn partea dreaptăa ecranuluiAvantaje-+ eficient, pentru că dis-tanţa de la meniu la scrollbar este mică;-+ aspect optic corespunzător;-+ permite meniuri suplimentare la mar-ginea de sus a ferestrei.Dezavantaje-+ pericol ca pe ecrane cu rezoluţie micăsă nu fie vizibil;-+ rar folosit;-+ arată neaspectuos la tipărirea pehârtie;-+ consumă mult spaţiu în fereastră.

Amplasarea menlululin partea de jos a ecranuluiAvantaje-+ aspect optic corespun-zător;-+ paginile se tipăresc aspectuos pe hârtie;-+ corespunde modului natural de citire(stânga-dreapta).Dezavantaje-+ amplasare după informaţia din pagină;-+ pericol ca pe ecrane cu rezoluţie micăsă nu fie vizibil;-+ rar utilizat;-+ nu încap decât relativ puţine elementeîn meniu.

Culorile HTML

Deşi internetul este plin de programespecializate În furnizarea codului deculoare pentru HTML şi majoritatea edi-toarelor HTML dispun de un asemenamecanism Încorporat, totuşi alegerearapidă a unei anumite nuanţe de culoarese face de regulă prin Încercări. Paleta demai jos vă oferă un mijloc rapid dealegere a unei culori cât mai apropiată decea dorită. Codul de culoare pentru HTMLse specifică prin sintaxa #RRGGBB undeRR,GG şi BB reprezintă nivelul de culoarepentru canalul respectiv de culoare. Înspaţiul RGB valorile RR,GG şi BB se codi-fică hexazecimal cu câte 256 de nivelepentru fiecare canal de culoare (256',adică 16.777.216 culori distincte). Aceas-tă codificare a culorilor poate fi folosită Încod HTML, XHTML şi CSS.

• o00ooo • 330000 • 660000 • 990000 • ccoooo • FFOOOO• 003300 • 333300 • 663300 • 993300 • C0300 • FF3lO0• 006600 • 336600 • 666600 996600. CC6600 • FF6600• 009900 • 339900 • 669900 999900 CC99OO. FF9900• ooccoo 33CCOO 66CCOO 99CCOO O ceccoo O FFCCOO• OOfFllO • 33FFOO 66fRJO 99FFIlO O CCFFOOO FFFFIlO• oo33סס • 330033 • 660033 • 990033 • cc0033 • FFIlO33• 003333 • 333333 • 663333 • 993333 • C0333 • FF3333• 006613 • 336633 • 666633 II99663l • CC66ll • FF66ll• 009933 • l39933 • 669933 99993l CC9911 FF99ll• OOCOl • 33CC3l 66C03 O 99COl O Ccec33 O FFCOl

OOff3l 33FF33 66FF33 99FFll O CCfF33 FFFF33

• 000066 • l30066 • 660066 • 990066 • CCOO66 • FFOO66• 003366 • 333366 • 663366 • 993366 • =366 • FF3366• 006666 • 336666 • 666666 • 996666 CC6666. FF6666• 009966 • 339966 • 669966 999966 CC9966 FF9966• 00CC66 33CC66 66CC66 D 99CC66 O CCCC66 O FFCC66II 00fF66 33FF66 66FF66 O 99FF66 O CCFF66 O FFFF66

• 000099 • 3lOO99 • 660099 • 990099 • CCOO99 • FF0099• 003399 • 333399 • 663399 • 993399 • CC3399 • FF3399• 006699 • 336699 • 6666'J9 996699. CC6699 • FF6699• 009999 • 339999 669999 999999 O CC9999 FF9999• 1lOCC99 • 33CC99 66CC99 O 99CC99 O cecC99 O FFCC99

00fF99 33FF99 O 66FF99 O 99FF99 O CCfF99 O FFFF99

• oooocc • 3300CC • 66!lOCC II9900CC • ccoocc • FFOOCC• 0033CC • 3333CC • 6633CC II9933CC • COlCC • FF33CC• 00660C • 3366CC • 6666CC 9966CC III CC66CC • FF66CC•• 0099CC 3399CC 6699CC D 9999CC O CC99CC O FF99CC

OOCCCC 33CCCC O 66CCCC O 99CCCC O ceccec O FFCCCCOOFFCC 33FFCC O &6fFCC O 99FFCC O CCfFCC O FFFFCC

• OOOOfF • 3300FF • 6000FF • 9900FF • COOOFF• FFOOFF• 003lFF • 33llFF • 66l3FF III 9933FF III C03FF • FF3lFF• 0066FF • 3366FF • 6666FF 9966FF CC&6fF. FF66FF• 0099FF • 3399FF 6699FF O 9999FF O CC99FF O FF99FF

IlOCCFF O 3lCCFF O 66CCfF O 99CCfF O CCCCFF O FFCCFFlIOfFFF [J 33FFFF n 66FFFF fJ 99FFFF O CCfFFF O FFFFFF

Sunt posibile şi aranjamente mixte alemeniurilor, în funcţie de structura logicăa paginilor care trebuie accesate. O condi-ţie este însă obligatorie, şi anume că me-niul trebuie să se integreze bine cu infor-maţiile din pagină aspectul fiind unul "ae-risit". Prea multă informaţie înghesuită înpagină nu face decât să reducă atractivi-tatea acesteia.

Alegerea unui ISPUn alt aspect important legat defuncţionarea unui site se referă la anumitechestiuni tehnice. Astfel, la momentul ter-minării programării unui site, acesta vatrebui plasat pe un server vizibil în inter-net. Este bine să vă alegeţi ISP-ul înaintede a face prima machetă testabilă pentrusite. În acest fel, cu prima machetă elabo-rată puteţi verifica cât de accesibil va fiviitorul dumneavoastră site. Fără a detaliavarietate a de servicii pe care un ISP leoferă clienţilor săi, câteva aspecte trebuieclarificate. Primul, foarte important, esteviteza de acces la serverul care găzduieştesite-uL Este de dorit ca timpii de accespentru utilizatori non-DSL să fie accep-tabili.

Tabelul următor vă oferă informaţiidespre diverse viteze de transfer posibil derealizat:

Tipul legaturii Viteza Timpul de Viteza DSL

bit/sec. descarcare a1 MB (min:sec)

Modem 56 k 2:26ISDN (1 canal) 64 k 2:0BDSL light 384 k 0:22 6 x ISDNDSL 768 768 k 0:11 12 x ISDNDSL 1500 1536 k 0:06 24 x ISDNDSL 2000 2048 k 0:04 36 x ISDNDSL 3000 3072 k D:02 48 x ISDN

Un alt aspect important este legat deaccesul la propriul site, plasat la ISP, pen-tru modificări, actualizări sau extinderi.Aceste operaţiuni se pot face remote, pelegături securizate, şi utilizarea lor va măriviteza de punere în lucru a site-ului. Între-baţi întotdeauna ISP-ul ce mecanisme decomunicare cu domeniile găzduite suntpermise pentru administrare (FTP,cPanel etc.). Fără asemenea servicii, va figreu ca un site să fie ţinut la zi.

Sistemul de operareDeşi la prima vedere nu ar trebui să văintereseze, sistemul de operare almajorităţii celor care vor accesa pagina deweb poate avea un rol important înaprecierea site-ului, dintr-un motiv foartesimplu: cu toate că standardele HTML şiXHTML sunt recunoscute de toate So-

urile şi, teoretic, paginile web proprii artrebui să fie vizibile pe toate platformeledin internet, practic site-ul în construcţieva fi vizibil numai pe majoritatea acestoraşi nu pe toate. În principal, aceasta sedatorează implementării diferite a stan-dardelor HTML, respectiv XHTML. Estebine să vă orientaţi către acele sisteme deoperare care sunt mai frecvent utilizate.

MS Windows (cu variantele sale) aco-peră peste 90% din calculatoarele conec-tate la internet. Statistica W3C oferă datedespre gradul de utilizare a diverselor SO-uri.

Anul1007 Win XP Win1000 Win98 Vista W1003 Linux MacDecembrie 73,4% 4,7% 1,3% 6,5% 1.9% 3.5% 4.0%

Prin urmare, paginile web vor trebui săfie vizibile corect pe browser-ele instala-bile preponderent pe platformele dinfamilia MS Windows. Sunt vizate cuprecădere browser-ele IE6, IE7, Firefox şiOpera.

Încă o informaţie necesară înainte de atrece la programarea unei pagini web esteşi cea privind ecranul de referinţă, altfelspus pe ce rezoluţie a ecranului va afişaprogramul de navigare pagina. O statisti-că recentă a W3C oferă informaţiile nece-sare stabilirii acestui parametru de proiec-tare.

Anul 1007 ridicata 1.014x768 800x600 640x480 necunoscutaIanuarie 16% 54% 14% 0% 6%

Aşadar, folosirea unei rezoluţii de1.024x768 pixeli va permite afişarea lorcorectă pe 80%, pe când o rezoluţie de800x600 se va afişa corect pe 94% din cal-culatoarele conectate internet. Perioadade referinţă fiind ianuarie 2007, este depresupus că în ianuarie 2008 cele douăprocente s-au modificat. Tendinţa actualăeste către rezoluţii mari, 1.024 x 768, darrămân totuşi mulţi utilizatori care auecrane cu rezoluţie de 800 x 600.

Pentru ca o pagină web să arate bine înecranul unui browser contează şi în cepaletă de culori va fi afişată. Datele statis-tice ale W3C sunt ilustrative pentrupaletele de culori mai frecvent folosite.Tendinţa actuală este către calculatoarecare folosesc hardware pe 24 sau 32 biţipentru a afişa 16.777.216 culori diferite.Calculatoare mai vechi şi laptopurilefolosesc hardware pe 16 biţi pentru a afişa65.536 de culori diferite.

Anul 2007

Ianuarie

16.777.216

86%65.536

11%

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

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

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

Proiectul ales ca temă pentru acestCHIP Special constă în realizareaunui site al editurii în vederea pro-

movării imaginii sale în internet. Aşa cumam văzut în articolele anterioare, planifi-

carea structurii unui site trebuie să ţinăcont de anumite aspecte complexe. Site-ulcare trebuie realizat trebuie să fie conformurmătoarelor cerinţe:- să prezinte publicaţiile editurii (cu ele-

mentele care le definesc, tiraje, publicţintă etc.) inclusiv site-urile acestora;

- pagina de început să conţină prezenta-rea editurii;

- să fie compatibil cu browserele IE6,

IE7, Firefox şi Opera (se vor avea învedere cele mai recente versiuni down-loadabile) pe sistemele de operareWindows, Mac şi Linux;

- deoarece site-ul va fi unul de informareasupra ariei de activităţi publicisticeacoperite de editură, acesta trebuia săse adreseze tuturor categoriilor devârstă;

- pentru fiecare publicaţie trebuie afişatăimaginea unei coperte reprezentativesau un colaj de mai multe coperte;

- dat fiind caracterul de prezentare alsite-ului, soluţia grafică cerută se referăla înălţime fixă centrată orizontal şivertical în pagină:

- header-ul de pagină să conţină logo-ulediturii;

- printre culorile paginii să se regăseascăobligatoriu cele din logo;

- meniul să fie orizontal astfel ca butonulfiecărei publicaţii să fie distinct;

- aranjarea informaţiei în paginile deprezentare 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ă obiectulsite-ului: CHIP, Level, FOTO-VIDEO di-gital, PC Practic, şi CHIP Special, precumşi cele două site-uri CHIP Online şi LevelOnline. În acest fel, prin adăugarea publi-caţiilor s-a putut fixa conţinutul meniuluisite-ului.

Având la bază cerinţele amintite anterior,se poate trece la pasul următor, care con-stă în elaborarea machetei grafice pentruuna din paginile site-ului (de obieci pagi-na principală). Macheta grafică (altfelspus o imagine statică a ceea ce dorim săfie afişat în fereastra browser-ului) poatefi făcută cu ajutorul unui program degrafică de tipul Adobe Photoshop, GIMPsau Corel Photopaint. Se pot utiliza pen-tru elaborarea unor asemenea machete şiprograme care lucrează vectorial, precumCorel Draw sau Adobe Illustrator.

Informaţia a fost formatată în machetăţinând cont de cerinţe. S-au avut în vederedimensiunile paginii, fixe pentru întreg

site-ul, ierarhia elementelor grafice, struc-tura elementelor, spaţierile şi culorile. S-apus 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 şiculoarea 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 înaceleaşi culori;

- s-a creat un tabel pentru a exemplificaatributele grafice folosite (culoare, spa-ţiere, aranjare);

- s-a preferat folosirea de culori alterna-tive pentru fundalul liniilor tabeluluifaţă de obişnuitele caroiaje pentru cărezultatul are un aspect mai plăcut şipermite o urmărire vizuală mai uşoară;

- s-au creat două liste de nivell, respec-tiv 2 cu caracteristici diferite, tot înscop de exemplificare.Macheta poate fi rezultatul unui proces

iterativ în care prin sugestii şi modificărisuccesive se ajunge la varianta finalăacceptată de către solicitant. Forma finalăa acesteia constituie punctul de plecare alprogramării.

ZonePe machetă am definit zonele care vor fitratate distinct la realizarea HTML a uneipagini de test. Zonele cu imagini, headerulşi coloana din stânga vor fi populate cu

""88

STRUCTURARE: Macheta trebuie Împărţită În zone, pentru a putea trece cu succes laprogramare.

imagini de test, intrucât în aceasta fazăcontează aspectul general al paginii şiamplasarea imaginilor, facând abstracţiede conţinut. În plus, împărţirea macheteiîn zone va constitui ulterior şi ghidul pen-tru codificarea HTML. Imaginile de testvor fi înlocuite ulterior cu imaginile speci-fice din respectivele zone.

, centrată în fereas-tra browserului, va conţine întreaga pagi-nă şi va avea dimensiunile fixe care să seîncadreze în rezoluţia de 1.024 x 768. Eaare rolul exclusiv de a fixa conţinutul şi de

. a trasa chenarul exterior. Se remarcă unspaţiu exterior lăsat pe contur astfel ca as-pectul grafic să lase impresia de "aerisit".Întrucât conţinutul paginii se va plasaîntr-un chenar interior spaţiat pe conturfaţă de zona 1 este nevoie de zona 2(negru). În cadrul zonei 2 se plaseză ele-mentele paginii. Zona 3 (roşu) va conţineheaderul paginii, logo-ul Vogel BurdaCommunications. vaconţine meniul pentru navigare. Până aiciam definit zonele care sunt comune tutu-ror paginilor din site.

Zona 5 (albastru) va conţine detaliilepentru fiecare publicaţie. Cu alte cuvinte,zona 5 va conţine informaţiile corespun-zătoare fiecărei publicaţii în parte, adicăse va schimba de la pagină la pagină. Încadrul zonei 5, aliniată la stânga, se deli-mitează zo a 6 (verde) care va conţineimaginile corespunzătoare fiecărei publi-caţii. Zona 7 (magenta) reprezintă ocoloană care se va împărţit în două şi care

t4!Ij[W'Mi#3#61t.]IIS. ti"i! i1 'fi' % ' f e"'CWWffl@'tM ,q• I htlp;.JI_.br&:.t!)!J1el&:lf_comJ

o: ror;-l.u..J •

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

'I'·~" ::J~~

I'"~" ::J~r=-3~

~ookma<b lools l!eIp

ror ht:!p:/ltipsurn.coml

Lorem Ipsum

W~fIt i,' Lorelll IjN/III!Lorem lpsum is simply durnrny text of the printing €Ind typesettingirtdustry. Lorem lpsum has been the indus!(y'S s1andard dummy textever sirtC€: the 1500s, when an llnknown printef tool\ a gaUey of typeand scrambled It 10 make a type specimen book.1t has survived noI 001'1five centunes, but SiS-Othe !eap iOla electronic lypeset1ing, remainingesserdially unchanged. 11was popularised in the 1960s wlth Ihe releaseof letraset sheets conlaining Lorem Ipsum passages, and morerecently with (.ies-Ictop pUbfishing software Jike A.ldlJs PageMakerincludlng versions of Lorero IpSlIln

w~ere t:h?" ;1comeIrom!Conlrary ta popular beliel. Lorelfllpsum is not sirnply random text, It hasroots In a piece ot classical Latin llterature lrom 45 se, mal(ing it over2000 ve-ars old. Richard McClintock, a latin professor alHampden.Sydney College in Virginia, looked up one of Ihe more obscurelatin wordS, consectetur, iram a Lorem Ipsum passage, anei goingthrough Ihe cites 01 the word in classical lilera1ure, discovered the~mdoubtable saurce. lOfem IpSl.ltn comes Irom sections 1.10.32 Md1.10.33 ot "de Finibus BonOflJtn el Ma!orum" (The E>..1remes ot Good aneiEv~) by Cicero, written in 45 ec. This book is a trealise on the theory ofethies, very popular during the Ren.sllssance. The Iirst ijne of LaremIpsum, "larem lpsum dolar sit amet.. .•, comes from a line in section1,10.32.

TM standard chunk of lorem Ipsum used since the 1500s i-sreproduceci below fOr thOse in1ereste(.t sectioos 1,10.32 and 1.10.33from "de Finibus Sonor-vm el Malorurn" by Cicero are also reptoduce-d intheir exact OI19lnaJ form, acc-ompanied by EngliSh versions hom 1he1914 Iranslalion by H. Rackham

W~J1IV lI'e 'Me;I!~ is a 1009 establisbe.;l fact that a reader wi:!! be d!sttocted by Il)ereadable content of a p~ge wi1en !ooking at its layout. The poiot of usinglorern Ipsum is IMI it has a rMre·or·less normal dis1ribution of le1tets,as opposed to using 'Content here, content hete', making it look lii:ereadable Engtish. Many deSktop pubbshing packages and web pageeditors now use Lorem lpsum J;iStheir detautt model text. antJ a searchfor 'Iorern ipsvm' ...•vill uncover many web sites stiU în their in1ancy.Variau:> versions have evolved over fhe years, sometimes I;ly accident.sometimes on P~I(pOSe (injec1ed hllmour and lhe Jike)

w~ere C/f/f I flelJOme/There are many variations of passages of Larern !psum available, butthe majorily have S~lffeted alletation in some fann, by injected humotrt,or randomised words which dant loof~ even Slightly believabre. It youare goin9 to use a passage- 01 Lorem lpsum, you need to be Sute thereisn't anything embşrr-;;;ssing hidden in the middle of text .. A.II the Loremlpsum generatots ro thf: lntemet tend to repeal pfedefined chunks asnecessary, mal.ing this the 1irst true gerlerator on the Internet, It uses adictionary of aver 200 latin words, combine-d wrth a handf~ll of mode-!sentence structures, 10 generete lorem Ipsum which looks teasDrlsble,The genefatecl Lorem Ipsum is therefote always free from repe1ition,injected !)umour, or noo-characteristic words ete.

(.' patagraphsrwotdsîb"Y1esrlists

va conţine informaţia propiu-zisă. În fine,zonele 8 (gri) reprezintă două coloane încare se vor plasa textele, listele şi tabelelecare descriu publicaţiile.

Popularea zonelorDeoarece elaborarea unui site presupuneo cooperare strânsă cu solicitantul, iar in-formaţiile pe care acesta trebuie să le fur-nizeze pentru a fi aşezate în pagini nu au

=::.••••..;.• 1'-""" - ro.•• 1'';' '~r',~,! ~b.:.,,\ th.., .• "SI ."' '''''''C'"'~;:''''': .• " ·~'r,,> 'ht

• ~ tol",j t" 't •••..•4'"' ..• )' L"'•.•.' ••.h" f" ~.f.· .,'-:1 ,,' ~,~....-,.,,", T".fi."

~•. un-l~O;';. !"" "d' ••• ~·4>1t :.",~ ot ~ ~:., ~ • .'., >, ~•.•• L,r-~

LJ' ~ r .• "''''''/1 <;.~" ••.••..•. ., l'I..-. •.•••~ ,~~ :.t·.~

r··" .J t..':11 " .•,~;, t. wt '" II ~t .• "C••.•.• ",;. .• ".t> ."T.' ••..•'''"',,,.-,,..,,~.•~..:,:",,.,,,* ..~,~"""",..'"'~"'..•.." ,; .1".' ","

• r ".~ .::;..•.••.•,_. l' ,..,i' ~',l ••.~ '- t1. ~ ei"-'"

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

~r~~ c;~~,~~t,~

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

întotdeauna, din start, o formă finită, pu-teţi face apel la texte neutre care vor fi pla-sate în pagina numai pentru a putea vedeavedea cum se "aşează" textul. Puteţi apelala Lipsum generator, care este un sitefoarte util în acest scop (http://www.lipsum.com).

Acest site vă oferă texte cu numărulspecificat de cuvînte, paragrafe şi liste cuajutorul cărora vă puteţi popula zona detext din pagina web până cand ajungeţi înposesia textelor finale. Pentru a obţinetextele de dimensiunile dorite, alegeţiparametrii de generare a textelor, listelorsau cuvintelor şi apăsaţi pe butonulGenerate Lorem Ipsum. Textele furnizatede Lorem Ipsum sunt în latină şi pot fiutilizate gratuit. Pentru a transfera texteleîn pagina de web, utilizaţi procedeulcopy/paste.

Un alt generator, Blindtextgenerator,(pe care îl găsiţi la http://www.blindtextgenerator. corn!) vă oferă o paletă mailargă de opţiuni. Se pot alege texte for-matate după necesităţile proprii în ceea cepriveşte fontul utilizat, mărimea şi aspec-tul acestuia, alinierea paragrafelor, înălţi-mea linei. Adiţional textului propriu-zis(există opţiune a de selecţie pentru englezăsau latină), se generează şi codul CSS carepoate şi el fi inclus în codul propriu. Poatefi un exerciţiu util să generaţi texte cudiverse formatări, astfel puteţi vedea

eFle Edit V_ FaVOlites TooI<Heip

I~· .-,- Sea'ch-FoIde-'-.----X--It)--O-:·-·-------

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

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

...)img

...) .lyle

x Name..:J img

...).lyle

~Cdlegolii.!1index!l•••vici

___ J ,.

i]- Go l••n~TFile Folde,File Falde,

8 K8 Filelox Document8 K8 Fuelox Document8 K8 Fuelox Document

modul cum se aşează textul în paginăfuncţie de diverse atribute CSS. CodulCSS funcţionează identic pentru oricebrowser. Practic, totul se reduce la o ope-raţie copy/paste fără a mai fi nevoie să sefacă nici o intervenţie.

Fişierele site-uluiÎmpărţirea site-ului pe zone are şi un co-respondent, să-i zicem aşa, fizic, repre-zentat de structura de directoare şi fişie-rele aferente site-ului. Spre deosebire deun fişier MS Word sau OpenOffice, încare imaginile se inserează în document şifac parte din acesta, în cazul unei paginiweb, acestea sunt fişiere separa te.Documentul HTML este de fapt un fişiercare conţine numai text şi poate fi editatcu un editor simplu de texte. Extensia.html sau .htm face ca acesta să se deose-bească de alte fişiere text.

Un document HTML este formatat cuTAG-uri HTML care definesc aspectulsău atunci când este afişat în fereastraunui browser. În fereastra browser-ului seafişează şi imagini, cu toate că acestea nusunt conţinute fizic în fişierul HTML.Acestea sunt păstrate extern şi afişarea loreste realizată cu ajutorul TAG-ului<img> din documentul HTML.

Să luăm ca exemplu un site web,fişierul cu numele index.html are legăturicu două pagini, fişierele numite cate-gorii.html şi servicii.html. Pagina maiconţine o imagine (fişierul logo.jpg) şifişierul cu formata rea (format.css), decisite-ul este compus în realitate din 5fişiere.

ConvenţiiAtunci când se accesează o pagină web cuajutorul unui browser, de exempluhttp://www.vogelburda.ro. serverul webcaută automat un fişier cu numeleindex.html sau index.htm şi în cazul încare îl găseşte returnează pagina brow-serului. Acest lucru este similar cu acce-sarea directă a adresei http://www.vogel-burda.ro/index.html. Prin convenţie,punctul de intrare într-o pagină web esteun fişier cu numele predefinit index, ex-tensia putând diferi de la caz la caz (htm,html, php, shtml).

Deoarece chiar şi pentru pagini websimple în mod normal sunt folosite maimulte fişiere, se impune ca acestea să fieorganizate într-o structură de directoare,de obicei după un anumit tip.

Astfel, pentru exemplul simplu menţio-nat mai sus vom proceda în felul următor:

index.html

II I I I

categorii. html servicii. html logo.jpg formatcss

- în directorul rădăcină plasăm toate fi-şierele HTML;- în directorul img pune fişierele careconţin imagini, deobicei acestea au exten-sia .jpg, gif sau .png.;- în directorul style punem fişierele deformatare .

Respectând aceste reguli, în funcţie decomplexitatea site-ului, se poate concepeo structură de directoare care să fie înconcordanţă 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-ficat uşor dacă este plasat corect în struc-tura de directoare.

Nume de directoareDupă finalizarea site-ului, fişierele acestu-ia sunt publica te (plasate) pe server, pecare însă nu se află instalat neapărat sis-temul de operare Windows.

Pentru a evita eventuale probleme tre-buie respectate anumite reguli de scriere:- toate numele de directoare şi fişiere sescriu cu litere mici. Spre deosebire deWindows, alte sisteme de operare fac dis-tincţie între majuscule şi minuscule. Altfelspus, pot exista în acelaşi timp şi acelaşiloc un fişier având numele scris cu majus-cule şi altul scris fără majuscule. Sistemulde operare Windows nu face această dis-tincţie .- nu folosiţi diacritice sau spaţii în nu-mele fişierului. Folosirea de spaţii sau dia-critice în scrierea adreselor de internetpresupune o operaţie de convertire. Deexemplu, un fişier cu numele "indexulmeu.html" va trebui apelat cu "indexul%20meu.html". Operaţia este greoaie şipoate fi evitată simplu nefolosind spaţii înnumele fişierului. În ceea ce priveşte fo-losirea diacriticelor în numele fişierelor,acestea trebuie evitate chiar şi atunci cândlucraţi în sistemul de operare Windows.Operaţiile ulterioare de redenumire, co-piere sau ştergere a fişierului pot generaerori.- folosiţi întotdeauna ,,1" în loc de ,,\".Sistemul de operare Windows este singu-rul care foloseşte ca separator ,,\" back-slash pentru delimitarea elementelor decale (path) pentru un fişier, celelalte sis-teme de operare folosind ,,1" slash pentruacest delimitator. De aceea folosiţi întot-deauna delimitatorul normal ,,1" slash înscrierea unor legături, TAG-ul <a> sau< i m 9>, altfel pagina web va funcţionacorect numai pe un server Windows.

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

Formatarea HTMLDUpă ce am stabilit modul în care se

partiţionează macheta, putem elabo-ra o primă variantă de cod HTML (pe

CD această variantă este reprezentată defişierul macheta-meniu-cu-css1.htm dindirectorul surse/step-l-macheta). Înaintede a trece la programare, reamintim fap-tul că standardul după care se pro-gramează este XHTML 1.0.

Codul CSS pereche pentru cel HTMLde pe CD este listat în oglinda "Script CSSpentru machetă" (alternativ, puteţi apelala fişierul vbcomm1.css din directorulsurse/step-l-macheta/style/ de pe CD).

În cazul machetei realizată în codHTML (ATENŢIE: numerotarea estefolosită exclusiv pentru a uşura localiza-rea liniilor!), documentul începe cu de-claraţia de tip, liniile 1-2.1: <!DOCTYPEhtml PUBLIC,,-//W3C/ /DTDXHTML1.0 Transitional/ /EN"2: ,,http://www.w3 .org/TR/xhtmI1 /DTD/xhtmll-transitional.dtd">

Secţiunea <html> (liniile 3-150) aredouă secţiuni <head> liniile 4-14 şi<body> liniile 15-149.3: <html xmlns=''http://www.w3.org/1999/xhtml">4: <head>5: <title>Vogel-Burda Communications:</title>6: <meta http-equiv="Content-Type" con-tent="text/html; charset=iso-8859-1" />7: <meta name="Description"content="VogeIBurda Communications -Revista Chip, Level, PC Practic" />8: <meta name="Keywords" content="vogel-burda, vogel burda, editura, Chip, ChipSpecial,9: revista Chip, revista, revista Level, PCPractic, revista PC Practic" />10: <meta name="Authors" content="VogelBurda Communications" />11: <meta name="Title" content="Exemplude cod pentru prezentare" />12: <Iink href="style/vbcomml.css"

" .•..•.•.'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. •••• )/

După schiţarea machetei, următorulpas constă În transpunerea acesteiaÎn practică folosind HTMl şi CSS.

Victor Gheorghe

rel="stylesheet" type="text/css" />13:

14: </head>15: <body><1- continut sectiune body ->149: </body>150: </html>

În secţiunea <head> se declară titlulpaginii <title> (apare în manşeta desus a ferestrei precedând numele brows-er-ului) şi meta TAG-urile pentru descri-ere pagină, cuvinte cheie, autor, titlu.

La linia 12 se face legătura cu CSS-ulextern care se găseşte în directorul style şiare numele vbcomm1.css. Textul CSSputea fi inclus direct în corpul machetei,dar asta ar fi însemnat că respectivul codar fi trebuit inclus în sursa fiecărei paginihtml a site-ului.

Includerea CSS direct în corpul docu-mentului (cu TAG-ul <script» are undezavantaj major: la orice modificare în

PRIMII PAŞI:Aşa aratăpagina dupăce a fostinclus titlul.

codul CSS, aceasta trebuie repetată pentrutoate documentele CSS care intră în struc-tura site-ului. A păstra codul CSS ca scriptseparat permite ca o modificare să se facăo singură dată, într-un singur loc pentruîntregul site. Este recomandabil ca toatescripturile care sunt incluse în documen-tul HTML să fie plasate într-un directorseparat, în cazul de faţă style.

Secţiunea <body> începe la linia 15,dar în spatele ei se află stilul declarat înscriptul CSS (vezi oglinda) la linia 1-4. Dereţinut că aici se declară atât dimensiuneamarginii de sus, cât şi imaginea care va fifolosită ca background.

Documentul HTML are marcate princomentarii începuturile şi sfârşiturilezonelor explicitate în macheta. Un co-mentariu (cod ignorat de browser) areforma unui T AG unde începutul estemarcat de <!-iar sfârşitul de ->

Zonele sunt programate folosind douăTAG-uri <table> şi <div>.

ZONA 1 începe la linia 17 şi se termină lalinia 147. TAG-ul <table> are stilul, caretrasează chenarul exterior, încorporat caatribut. Nu s-a mai plasat în CSS deoarecenu va fi refolosit. Totodată, cu acest T AG17: <!-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 x610 pixeli centrat.

ZONA 2 începe la linia 22 şi se termină lalinia 145. TAG-ul <div> are ca atributstilul care spaţiază chenarul exterior decel interior încorporat, cu 20 pixeli.22: <!- inceput tabel centru interior vizibilin toate browserele->23: <div style="margin-top: 20px;"><!- continut zona 2 ->

ZONA 3 (liniile 24-29) defineşte header-ul de pagină care va conţine logo-ul.Pentru macheta, s-a folosit imagineamacheta-header.jpg cu dimensiunea 928x 78 pixeli. Este recomandabil ca toateimaginile să fie plasate într-un directorseparat, în cazul de faţă img. Se remarcălipsa oricăror spaţii în interiorul T AG-ului <td> pentru a evita aspectul schimbatîn browserele IE6 şi IE7. Pentru a evitaplasarea unui chenar în jurul imaginilormachetei, în scriptul CSS s-au eliminatchenanll, marginile şi spaţierile, toatefiind setate explicit la O pixeli. S-a proce-dat astfel întrucât unele browser-eplasează implicit un chenar în jurul imag-inilor, dacă acesta nu a fost suprimat.24: <!-inceput tabel header ->25: <table cellspacing="O" cellpadding="O"style="border: 1px solid #8e9da8;"

26: width="928" align="center">27: <tr><td><a href="index.htm"><imgsrc="img/macheta-header.jpg" width="928"28: height="78" title="Vogel BurdaCommunications"bo rde r="O"/></ a></td></tr>29: </table><!-sfarsit tabel header ->

ZONA 4 (liniile 30-49) conţine meniulpaginii. Acesta este plasat într-un tabel,fiecare celulă conţinând câte un elementseparat al meniului. Pentru navigare, latrecerea cursorului peste un element demeniu, acesta îşi schimbă culoarea (efectrollover).30: <I-inceput tabel meniu ->31: <table celispacing="O" cellpadding="O"style="border: 1px solid #8e9da8;"32: width="930" align="center">33: <tr height="20">34: <td width="l 30"bgcolor="#BFOB34">&nbsp;<a class="menu"href="index.htm">VOGEL BURDA</a></td>35: <td width="123" bgcolor="#02243d"class="inmenu" style="border-right: solid1px #8e9da8;">36: &nbsp;<a c1ass="menu"href='Javascript: void(O)">CHIPOnline</a></td>37: <td width="69" bgcolor="#02243d"c1ass="inmenu" style="border-right: solid1px #8e9da8;">38: &nbsp;<a c1ass="menu"href="javascript: void(O)">CHIP</a></td>39: <td width="ll 5" bgcolor="#02243d"

(Ş~·I~-.~ ••.Fie Edi v_ F-nes Toca H~ .;~- ..

I I

'-------------------------------'.:J1'------------------·-----..- Il-r--,r-:r"- .IMY~~ -.~l'!l.'.'"

REALIZARE - VAlIANTA HTML: $1 CSS

SCRIPT CSS PENTRU MACHETA

1: body {margin-top:38px; margin-bottom:O;margin-left:O; mar in-right:O;2: font-family:Verdana, Arial, Helvetica,sans-serif; font-size:9pt; font-weight: normal;3: backg rau nd-i mage: url( ../img/mai n_bgr.jpg);4: }5:6: .coverl { BACKGROUND-COLOR:#BFOB34;cursor: pointer;font-family: Verdana,Arial, sans-serif;7: color: #FFFFFF; font-size:9pt; font-weight:normal;}8: .cout1 { BACKGROUND-COLOR: #02243d;cursor: pointer;font-family: Verdana, Arial,sans-serif;9: color: #FFFFFF; font-size:9pt; font-weight:normal;}10:11: td.inmenu { BACKGROUND-COLOR:#02243d; cursor: pointer;font-family: Verdana,Arial, sans-serif;12: color: #FFFFFF; font-size:9pt; font-weight:normal;}13: td.inmenu:hover { BACKGROUND-COLOR:#BFOB34; cursor:pointer; font-family: Verdana,Arial, sans-serif;14: color: #FFFFFF; font-size:9pt; font-weight:normal;}15:

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

1 px #8e9da8;">

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

href='javascript: void(O)">LEVEL

Online</a></td>

41: <td width="73" bgcolor="#02243d"

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

1 px #8e9da8;">

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

h ref="javascri pt: void(O)"> LEVEL </a></td>

43:<td width="194" bgcolor="#02243d"

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

1px #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:

16: hr { border:none; border-bottom: solid 1px#cccccc; height:O x; }17: b, strang { color:#6D97CO; }18:19: a.menu:link, a.menu:visited, a.menu:active,a.menu:hover {20: color: #FFFFFF; text-decoration:none; }21 :22: h1, h2, P { margin: 5px Opx 5px Opx}23:24: h1 {color:#6D97CO; font-size:12pt; font-weight:bold; line-hei ht:1 05%; }25:26: p.p.10 {margin-top:1 Opx; }27: p.p_5 {margin-top:5px; }28: p.p_3 {margin-top:3px; }29:30: .colsplit {color: #888888; font-family: Arial,Verdana, Helvetica, sans-serif; text-decoration:none}31 :32: ul.standard { margin:5px Opx 5px 5px;padding: 5px Opx Opx 5px; list-style-type:none;}33: ul.standard li { backgraund: url( ../img/dark-dot.gif) norepeat Opx 4px; padding: Opx OpxOpx 12px; }34:35: ul.spacy { margin:5px Opx 5px 20px;

#02243d; cursor: pointer;

12: font-family: Verdana, Arial, sans-serif;

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

normal;}

13: td.inmenu:hover { BACKGROUND-

COLOR: #BFOB34; cursor: pointer;

14: font-family: Verdana, Arial, sans-serif;

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

normal;}

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

Fie Edi: v_ F4\i'OIUs TOQkH.

padding: 5px Opx Opx 5px; list-style-ty e:none;}36: ul.spacy li { background: url( ../img/dark-dot.gif) norepeat Opx 4px; padding: Opx Opx4px 16px; }37:38: img { border: O; margin: O; padding: O; }39:40: td.tableRow {41 : backgraund-color: #D9E9F9;42: line-height: 16px;43: }44:45: td.table5ec {46: line-height: 16px;47: }48:49: td.tableHeader {50: backgraund-color: #336699;51 : color: #FFFFFF;52: line-height: 16px;53: padding: 3px;54: }55:56: #js_c1ock { font-size: 1Opx; padding:2px OpxOpx Opx; float:left; }57:58: .c1ock_ora {font-size:1 Opx; font-style:nor-mal; padding:2px 3px Opx 5px; float:left; }

De remarcat faptul că meniul cu a-

tribut :hover nu funcţionează în browse-

rul IE6. Atributul :hover în implemen-

tarea CSS pentru IE6 este ataşat exclusiv

TAG-ului <a> (anchor). Pentru a eviden-

ţia pagina curent selectată, celulei respec-

tive nu i se mai declară atributul de class,

ea având în acest fel culoarea schimbată.

Pentru referinţa din cadrul link-ului, în

celulele meniului s-a folosit instrucţiuneajavascript:void(O), care în cazul când esteselectată nu execută nimic, browserulrămânând pe aceeaşi pagină.

De exemplu, legătura către paginarevistei 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 scrispână acum. Este deja necesară verificareacu 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 careconţine informaţiile caracteristice fiecăreipublicaţii din exemplul nostru, care seschimbă de la la o pagină la alta. Esterealizată cu TAG-ul <table>, având lă-ţimea şi înălţimea fixe de 930 x 465 pixeli.De remarcat că are stil propriu care con-trolează distinct liniile chenarului.51: <!- inceput tabel continut ->52: <table cellspacing="O" cellpadding="O"width="930" height="465" align="center"53: style="border-Ieft:l px solid #8e9da8;border-right:l px solid #8e9da8;54: border-top:Opx solid #8e9da8; border-bottom: 6px solid #02243d;" ><1- continut zona 5 ->144: </tr></table><I- sfarsit tabelcontinut ->

ZONA 6, (liniile 56-58) este subordonatăzonei 5, are alinierea la stânga şi conţineimaginea de test back-col-stg-macheta.jpg. Ulterior, aici vor fi plasate imaginilecorespunzătoare pentru fiecare pagină asite-ului.56: <!- inceput coloana stanga ->57: <td width="251" valign="top"><imgsrc="img/back -coI-stg-mach eta.j pg"width="2 51"height="465" title="Vogel BurdaCommunications" border="O"/></td>58: <!- sfarsit inceput coloana stanga ->

La testarea în browser se observă dejaapariţia coloanei din stânga. De remarcatefectul vizual atunci când atributul "alt="şi/sau "title=" este prezent în TAG-ul<img> şi anume chenarul cu text plasatdeasupra barei de meniu.

Acest chenar este afişat atunci cândcursorul trece peste o imagine având acestatribut setat.

L===============================:J -.J----- -----,-.--~'.- ,,"1, .:TM;c;;;;;;. - - • ,•••••

ZONA 7, cuprinsă între liniile 59-143,este subordonată zonei 5, are aliniere ladreapta şi conţine descrierea propriu-zisăa publicaţiilor.59: <!- inceput coloana dreapta ->60: <td width="689" valign="top">61 :<!- inceput impartire coloanadreapta ->62: <table celispacing="O" cellpadding="30"width="lOO%">63: <tr>64: <!- inceput prima parte coloanadreapta ->65: <td valign="top" width="349"c1ass="colsplit"><h 1>Titlu pagina</h 1>66: <hr noshade="noshade" size="l"align="center" />67:68: <p c1ass="p_l O"><imgsrc="img/but2.gif' hspace="5"> Text plasatin prima coloana.</p><!-aici se mai plaseaza restul de text dinprima coloana ->79: </td><I- sfarsit prima parte coloanadreapta ->80:

81 :<!- inceput a doua parte coloanadreapta ->82:<td valign="top" width="340" class="colsplit"><I-aici se mai plaseaza restul de text in adoua coloana ->100: <p c1ass="p_l O"><imgsrc="img/but2.gif' hspace="5"> Text plasat

in a doua coloana.</p>101 :<!-aici se mai plaseaza restul de textdin a doua coloana ->140: </td><!- sfarsit a doua parte coloanadreapta ->141 :</tr>142:</table><!- sfarsit impartire coloanadreapta ->143: </td><!- sfarsit coloana dreapta ->

Pentru ca descrierea publicaţiilor săpoată fi aşezată pe coloane, zona 7 este di-vizată în două ZONE 8 cu TAG-ul<table>, liniile 62-142:• cea din stânga (liniile 64-79) va fi

afişată în mijlocul paginii• cea din dreapta (liniile 81-140) va fi

afişată în dreapta paginii.Macheta astfel realizată trebuie testată

în browserele IE6, lE7, Firefox şi Opera.Această operaţie este importantă şi tre-buie făcută cu multă grijă, deoarecepaginile individuale ale site-ului vor firealizate populând zonele 6 (imagine) şi 8(coloane cu descriere). Şi la această etapăorice modificare (în special în scriptulCSS) trebuie verificată cu browser-elespecificate, pentru fi siguri că nu aparevreo problemă.

În cazul în care nu se realizează acesteverificări menţionate, la apariţia uneieventuale erori aceasta este dificil de de-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

Dacă până acum ne-am folosit deimagini de test pentru a putea creastructura 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 dincele trei formate de imagine (GIF, JPEGsau PNG) se potriveşte cel mai bineconţinutului imaginii. Acestea trei suntformatele recunoscute de HTML pentruimagini şi fiecare are avantajele şi deza-vantajele sale. Pentru a alege cel maipotrivit format de imagine pentru site-ulpropriu este bine să dispuneţi de câtevacunoştinţe generale despre prelucrareapentru web a imaginilor:

ID GIF (Graphics Interchange Format,dezvoltat de Compuserve) este un formatcare poate reprezenta doar 256 de culori,una dintre ele putând fi transparentă.Acest format este cel mai des folosit şi adevenit standard. GIF este alegerea opti-mă în cazul unor imagini cu puţine culori,a unor imagini cu pete mari din aceeaşiculoare, a textului transformat în ima-gine, de exemplu: logo-uri, butoane pen-tru navigaţie, icon-uri, background-urisimple. GIF este singurul format recunos-cut de HTML care permite anima ţii.

Calitatea imaginilor JPG este directproporţională cu mărimea fişierelor.Puteţi face încercări succesive cu progra-mul de prelucrat imagini, până obţineţiun raport calitate/mărime fişier accept-abil. O altă caracteristică a imaginilor JPGeste aceea că mărimea fişierului imaginedepinde de imaginiea pe care o conţine.

funcţie de tipul imaginii. Astfel, dacă do-rim includerea într-o pagină web a paleteide culori folosită de editoare HTML (216culori), atunci fişierele GIF şi JPG diferăsemnificativ în mărime şi puţin calitativ.Imaginea are dimensiunile 745 x 289 pi-xeli. Varianta GIF are 21,4 KB, mult maipuţin faţă de fişierul JPG care ocupă 58,3KB. Este evident că în acest caz formatulGIF este cel mai avantajos pentru paginaweb. Formatul este adecvat pentru toateimaginile care au mai puţin de 256 de cu-lori.

IB JPEG (sau JPG - Joint PhotographicExperts Group) este un format care poatereprezenta 16milioane de culori. Oferind ocompresie foarte mare a imaginii, acest for-mat se foloseşte în cazul fotografiilor, alexporturilor din diferite programe 3D,când este necesară reprezentarea imagi-nilor cu mai mult de 256 de culori sau cândse doreşte o dimensiune cât mai mică afişierului imagine.

Utilizarea formatului JPG nu este indi-cată la reprezentarea textelor, a imaginilorîn a căror compunere intră margini ascuţitesau obiecte cu muchii conturate, a desene-lor tehnice sau a imaginilor transparente.

IEI PNG (sau Portable etwork Gra-phics) este un format care în afară de cele16 milioane de culori poate reda şi trans-parenţa (pentru o singură culoare în pro-cent de 100% sau pâna la 256 nivele detransparenţă pe pixel). Acest format ar fitrebuit să înlocuiască GIF-ul, dar încă nua reuşit din cauza unor probleme laafişarea în diferite browsere, apărute maiales în cazul PNG-urilor cu transparenţă.Se foloseste în toate cazurile în care sepoate folosi GIF-ul, dar numai atuncicând nu este nevoie de animaţii.

în continuare, vom exemplifica folosi-rea corectă a formatului de imagine în

...:.=JGIF VS. JPG: Pentru reprezentarea

imaginilor cu puţine culori, formatul GIF

este excelent.

Pe de altă parte, dacă dorim să inclu-dem într-o pagină web o fotografie vomvedea că formatele GIF şi JPG diferă multcalitativ şi mai puţin ca mărime. Imagineade test are dimensiunile 300x251 pixeli.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,8KB), nu la fel se poate spune despre cali-tatea imaginilor.

Astfel, se poate observa că deoareceformatul GIF forţează afişarea a maxim256 de culori, pe imagine apar pete care ofac neatrăgătoare. Pe de altă parte,deoarece JPEG nu "taie" din culori,fiecare din obiecte îşi păstrează aspectulnatural. În acest caz, formatul JPG va fipreferat celui GIF, chiar dacă dimensi-unea fişierului este mai mare. u de alta,dar o pagină web trebuie să fie în primulrând foarte aspectuasă, chiar dacă încăr-carea ei în fereastra browserului dureazăcâteva secunde în plus.

Pregătirea imaginilorÎn cazul în care veţi folosi imagini JPG tre-buie să ştiţi că aceste trebuie să fie în modRGB şi nu CMYK.Nu contează dacă ele aufost obţinute cu o cameră digitală, prinscanare sau din alt document. Este bine săpăstraţi originalul pentru situaţia când estenecesară modificarea imaginii. Dacă imag-inile originale sunt CMYK sau alb/negru,transformaţi-le întotdeauna RGB larezoluţia de 72 dpi. Am recomandataceastă rezoluţie pentru imaginile pentruweb, deoarece monitorul nu poate afişadecât la acest număr de pixeli per inch.

Îmbunătăţirea aspectului paginii webse poate obţine şi prin utilizarea atributu-lui "progresiv" aplicat imaginilor. În moduzual, operaţia de afişare a unei imagini,fie ea JPG sau GIF, este echivalentă cu oscanare de sus în jos. Utilizând atributulprogresiv este ca şi cum am împărţi ima-ginea în mai multe scanări succesive.Prima scanare afişează imaginea la echi-valentul unei calitatăţi reduse, scanărileulterioare îmbunătăţind gradual calitateaprimei scanări. Formatul JPG poate fi fo-losit cu atributul progresiv, pentru imagi-nile GIF efectul progresiv fiind realizat deun mecanism asemănător numit întreţe-sere (interlaced).

Prin utilizarea imaginilor cu efect pro-gresiv se obţine o afişare rapidă a unei pa-gini web, fără a mai aştepta descărcareacompletă a imaginilor, mai ales când aces-tea au dimensiuni mari.

tA2ftff!l':M15+ ,ii.l q.'IMMBm •• Wij"jjMWfflffl§ftt!'ffl, q..••.•...••91,..I'tlP/Iloc.tloSU~~d'IDor*le.~

Fie Edt V_ Favortet Toah Heb ~ •

_IDIiI------- p -

~ VOGELBURO/\1 COMMUNIC/\TIONS

::z ::~:..~~:=-;rammLEVEL

Dimensiunile mari de imagini în pagi-nile web sunt consumatoare de spaţiu şimăresc timpul de descărcare. Puteţi evitaaceste neajunsuri folosind imagini mici,iar pentru când se doreşte neapăratprezentarea unei imagini mari folosiţiscripturi. Un asemenea script îl găsiţi peCD (fişierul thumbnailviewer.js din direc-torul surse/php-div-css-js/stylel), care a şifost utilizat în construcţia site-ului cu php.Scriptul crează o fereastră care se afişeazăpeste pagina web curentă şi afişează ima-ginea dorită la dimensiuni mari.

Tema concretăRevenind la tema CHIP Specialului defaţă, după ce am creat structura site-uluişi am realizat codul HTML, putem trece laintroducerea imaginilor. Ca primă ima-gine ne referim la cea comună fiecăreipagini, şi anume header-ul (fişierulvbcomm-header.jpg). Aşa cum rezultădin macheta paginii, imaginea trebuie săaibă dimensiunile de 928 x 78 pixeli.

[,.Deşi aparent imaginea headerului

conţine puţine culori şi la prima vedereGIF-ul ar fi fost formatul cel mai potrivit,la o analiză mai atentă observăm însă căimaginea conţine efectul de gradient petoată înălţimea, ceea ce înseamnă că are omulţime de nuanţe intermediare pentruculori. Deoarece diferenţa între dimen-

siunile celor două variante era nesemni-ficativă (GIF - 12,08 KB, iar JPG 9,18 KB),formatul preferat a fost JPG.

Fiecare din paginile ste-ului va avea încoloana din stânga câte o imaginiereprezentativă pentru publicaţia prezen-tată în acea pagină. Imaginile careurmează a fi incluse în coloana din stângaa paginilor trebuie să aibă dimensiunilede 251 x 465 pixeli. Pentru prima paginăse foloseşte o compoziţie care conţine maimulte coperte selectate din publicaţiileediturii. Dată fiind multitudinea de culoricu diverse nuanţe, formatul imaginii estetot JPG.

Pagina web mai conţine o imagine, deo natură mai specială, şi anume un"shortcut icon" care de regulă conţinelogo-ul. Această imagine care are dimen-siuni 16 x 16 pixeli se face de obicei încâteva culori contrastante. Imaginea vaapărea în fereastra browser-ului în liniade adresă înaintea URL-ului, precum şi însecţiunea bookmark-urilor, în cazul încare adresa web a fost memorată acolo.Pentru ca un shortcut icon să fie afişatcorect nu se foloseşte TAG-ul <img>, ciTAG-ul <link>. Pentru cazul macheteinoastre instrucţiunea va fi:<Iink rel="shortcut icon"href="img/vbcomm.ico" />,_. _

Cu această din urmă instrucţiune pu-tem spune că site-ul nostru a fost garnisitcu toate imaginile necesare şi putem trecela finalizarea lui.

•• •alina I

Un site este o constructie arborescentă realizată cu fisiere, ..htm sau .html. Acestea trebuie stocate Într-o structurăde directoare care păstrează logica site-ului. Un fişier dinaceastă structură este asociat cu fişiere externe pentruelemente care intră În construcţia sa (imagini, scripturietc.). Plasarea fiecărui tip de fişier la locul potrivitsimplifică finalizarea site-ului. Victor Gheorghe

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

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

:.•.:;:'.".l! .•••••.r";»~l::

Pornind de la macheta cu imagini(care se găseşte în directorul Istep-3-imaginii de pe CD) se poate progra-

ma HTML fiecare pagină a site-ului.Întrucât vor rezulta multe fişiere, aşa cums-a precizat deja, va fi nevoie ca să le orga-nizăm într-o structură clară de directoarefuncţie de tip.

Astfel se creează trei subdirectoare:imgl (care va conţine imaginile GIF, JPGsau PNG); stylel - (care va conţine scrip-turile - CSS, JSsau HTC) şi Idownload (cufişierele care pot fi descărcate). Acestultim director s-a creat deoarece, pentru oserie de publicaţii ale editurii Vogel BurdaCommunications, informaţii, supli-mentare celor conţinute în pagina web,pot fi obţinute din documente care pot fidescărcate de pe site. De regulă, asemeneafişiere adiţionale se pregătesc în formatele.pdf (portable document format introdusde Adobe în programele Acrobat), .ppt(formatul utilizat de programul MSPower Point ) sau .doc (formatul utilizatde programul MS Word). Operaţia dedescărcare se poate face pentru conside-rabil mai multe tipuri de fişiere decâtacestea, dar pentru site-ul în lucru nu s-auavut în vedere decât acestea trei. Pentrudescărcare, în paginile web respective seinclud legături către aceste fişiere. În

View Favoriles TooIs Help

1;, Search r F= TBack •

Addtess 1r~oIdeIs _ download

imgstyle

- W ftiMlI!ifflllillţif!ijii!!jI!Aiiiiiiiii;'. -------:-,..) download..) img

....J st~le

STRUCTURĂ: Pentru această variantă de realizare, structura de directoare este relativ simplă.

-+ chipfoto.htm pentru revista FOTO-VIDEO digital.-+ pcpractic.htm pentru revista PCPRACTIC.-+ chipspecial.htm pentru revista CHIPSpecial.

momentul în care se face clic pe o aseme-nea legătură, browser-ul constată că nueste vorba de un fişier HTML, care arurma să fie afişat în fereastra proprie, şideschide o fereastră în care se specifică înce fel se doreşte să se facă descărcareafişierului respectiv (în ecran sau pe harddisk) . Dacă macheta a fost realizată bine, în

sensul că elementele CSS acoperă toatenecesităţile de formatare, atunci pentrufiecare efect se face apel la numele stilului.Dacă însă a scăpat ceva, atunci se com-pletează scriptul CSS cu efectul dorit. Nuuitaţi să închideţi fiecare din tag-uriledeschise. Pentru a crea un aspect vizualplăcut, este bine ca textele să fie plasate înparagrafe distincte şi acestea să fie spaţi-ate. Nu folosiţi culori tari care să con-trasteze prea puternic cu cele din designuliniţial, altfel spus !imitaţi-vă la culorileacestuia. Dacă se doreşte utilizarea ani-maţiei, să o faceţi cu zgârcenie. Deşi acesttip de efecte este modern şi de dorit, preamultă animaţie pe pagină distrage atenţiacititorului de la mesajul conţinut în text.De fiecare dată când aţi introdus elementenoi verificaţi dacă aspectul paginii esteacelaşi în toate browser-ele vizate. Dacănu, faceţi corecturile necesare în codulHTML sau CSS.În cazul în care se doreşteintroducerea de imagini suplimentare înzonele 8, nu uitaţi că aveţi spaţiu fix la dis-poziţie (s-a plecat de la cerinţa ca site-ulsă fie de înălţime fixă, pentru a evitafolosirea scrollbar-ului vertical). Nu a-dăugaţi efecte în pagină dacă nu v-au fostcerute.

După ce toate cele opt fişiere au fostfinalizate se ajunge la structura de fişieredin figură.

Varianta completă cu toate fişierele sisubdirectoarele se găseşte în directorul(lhtml- table-css-j si).

În figura care arată structura des-făşurată a site-ului nu sunt afişate extensi-ile fişierelor, în locul acestora fiind fo-losite icon-uri.

Elemente de personalizareÎn structura de directoare astfel creată seîncarcă fişierele pregătite, imaginile,scriptul CSS şi documentele .pdf. Fiecarefişier se încarcă în directorul corespunză-tor. De menţionat ar mai fi faptul căfişierul /style/vbcomm2.css este identic cucel folosit la crearea machetei HTML. Afost redenumit pentru a evita ca acelaşinume de fişier să apară de mai multe oripeCD.

În forma finală a machetei se com-pletează elementele care personalizeazăprimul fişier, index.htm, asociat primuluibuton VOGEL BURDA. Înainte de a lucraefectiv la index.htm este prudent ca ocopie a machetei să fie păstrată şi separat.

Aceste elemente sunt:-+ primul buton din meniu care trebuiesetat pe culoarea de selecţie pentru a arătacare din cele opt pagini este afişată inecran. Chiar dacă veţi folosi un titlu depagină introdus ca text, în zona 8 stânga,este bine ca butonul să fie selectat.-+ legătura la fişierul extern care conţineimaginea din coloana stângă, back-col-stanga.jpg.-+ plasarea textului care va popula zona 7în cele două coloane (zonele 8) şi for-matarea lui HTML.

Plecând de la aceeaşi machetă, în modsimilar se procedează cu fişierele:-+ chiponline.htm pentru site-ul CHIPOnline (http://www.chip.rol).-+ chip.htm pentru revista CHIP.-+ levelonline.htm pentru site-ul(http://www.level.rol) .-+ level.htm pentru revista LEVEL

- ....) htmJ.table·css·jsdownload

CHIP Compute' ~ Communications 2007~ Foto_Video_Dig;a1~2007 -

LEVEL_Games_HW_~_L~estyle_2007~ PC_P,actic_2006

- ....) img

back·col·stangablenkbut2chip·,chip·fotochip·online·'chip·specialda<kdotgel3dobe_,eade,level·'level'on~ne-'main_bgrpc-p,actic,eddotvbcommvbcomm·heade,

-' ....) stylevbcomm2

.!l chip.:!1 chipfoto.!lchipon!ine:!l chipspecial.!l index.!1level<!1 levelonline\~ PCptactic

FIŞIERE: Nici numărul de fişiere nu este

foarte mare, site-ul fiind totuşi destul de

simplu.

Mai rapid pe aceeaşi caleOdată cu vitezele de acces la internet, şi dimensiunile documentelor HTMLtind să crească, datorită creşterii complexităţiipaginilor web. Acest lucru se traduce În mod normal prin cod mai mult, respectiv fişier mai mare. Există Însă posibilitateaoptimizării codului, fără a renunţa Însă la funcţionalitatea crescută a paginii web. Victor Gheorghe

Un aspect pe care fiecare programatorHTML trebuie să-I aibă permanent învedere se referă la mărimea fişierului

HTML obţinut. Uneori, fişierele HTMLpot ajunge la sute de linii de cod, avândastfel o mărime considerabilă. De multeori se pune accentul numai pe complexi-tatea paginii şi este lăsat deoparte unaspect şi mai important: cel care navi-ghează pe internet este mereu grăbit, nuare răbdare să aştepte decât preţ de câtevasecunde. Dacă în acest interval de timppagina solicitată nu s-a încărcat în brows-er, el trece mai departe. Deci, cu cât mă-rimea fişierelor HTML este mai mică, cuatât pagina solicitată va fi mai repedeafişată în fereastra browser-ului.

Să nu uităm încă un aspect suplimen-tar: pentru a fi afişat corect în fereastrabrowser-ului, un fişier HTML apelează şialte fişiere externe legate de el (imagini,

scripturi CSS sau JavaScript, secvenţevideo sau audio etc.). Totalizând acestecomponente putem vedea că se poateajunge la o cantitate substanţial mărită dedate, astfel încât cele câteva secunde să nufie suficiente pentru afişare în fereastrabrowser-ului.

În macheta realizată în articolul anteri-0r meniul are opt butoane. Să privim maiatent codul pentru unul din aceste bu-toane:<td width=,,69" bgcolor=,,#02243d"c1ass="inmenu" style="border-right: solid1px #8e9da8;"> &nbsp;<a c1ass="menu"href=,javascri pt: void(O)">CHIP<[a></td>

Observăm că atributul style (care tra-sează o linie verticală la sfârşitul butonu-lui) se repetă pentru fiecare buton.

Pe de altă parte, fiecare buton almeniului foloseşte acelaşi stil specificat cuatributul class="inmenu" (mai puţin

componenta afişată în fereastra browser-ului). Codul CSS asociat butoanelormeniului este:td.inmenu { background-color: #02243d;cursor: pointer; font-family: Verdana, Arial,sans-serif; color: #FFFFFF; font-size:9pt;font-weight: normal;} td.inmenu:hover {background-color: #BFOB34; cursor: point-er; font-family: Verdana, Arial, sans-serif;color: #FFFFFF; font-size:9pt; font-weight:normal;}

Se poate observa uşor că atributul styledin codul HTML poate fi transferat încodul CSS.

După modificare codul HTML va fi:<td width=,,69" bgcolor=,,#02243d"class="inmenu"> &nbsp;<a c1ass="menu"href=,javascript: void(O)">CHIP</a></td>iar cel CSS va fi:td.inmenu { background-color: #02243d;cursor: pointer; font-family: Verdana, Arial,

sans-serif; color: #FFFFFF; font-size:9pt;font-weight: normal; border-right: solid 1 px#8e9da8;} td.inmenu:hover { backgroun9-color: #BFOB34; cursor: pointer; font-fami-IV: Verdana, Arial, sans-serif; color:#FFFFFF; font-size:9pt; font-weight: normal;border-right: solid 1 px #8e9da8;}

Deoarece meniul (ne referim de faptsecţiunea respectivă din codul sursă)există în fiecare fişier HTML al site-ului,scurtarea codului va fi făcută în fiecaredintre acestea. Este indicat ca de fiecaredată când este posibil să transferaţi câtmai mult cod în scripturile externe, chiardacă operaţiunea este consumatoare detimp, deoarece acest lucru creşte viteza deexecuţie a paginilor web.

Meniul fără problemeDacă formatarea textului unui documentHTML este relativ simplă, realizarea unuimeniu care să funcţioneze corect pe toatebrowser-ele poate ridica probleme. Săluăm ca exemplu unul dintre butoanelemeniului nostru (codul HTML şi CSSpentru machetă se găseşte în directorulsurse\step-l-macheta de pe CD-ul ataşatrevistei):<td width=,,?3" bgcolor=,,#02243d"c1ass="inmenu">&nbsp;<a c1ass="menu" href=,javascript:void(O)">LEVEL</ a></td>care se execută împreună cu codul CSS:td.inmenu { background-color: #02243d;cursor: pointer; font-familv: Verdana, Arial,sans-serif; color: #FFFFFF; font-size:9pt;font-weight: normal; border-right: solid 1px#8e9da8;} td.inmenu:hover { background-color: #BFOB34; cursor: pointer; font-fami-IV: Verdana, Arial, sans-serif;

EROARE: Fărăfolosirea unuiartificiu, paginacurentă nu ar fifost semnalizatăÎn lE 6.

color: #FFFFFF; font-size:9pt; font-weight:normal; border-right: solid 1 px #8e9da8;}

Prin intermediul liniilor de mai sus serealizează efectul de rollover în browser-ele IE?, Firefox şi Opera, care însă nu estevizibil în IE6.

Codul nu are efect de rollover în IE6din cauza modului de implementare alstandardului CSS.

Browserele IE versiunea 6 şi cele ante-rioare nu suportă :hover în CSS (cuexcepţia legăturilor, T AG-ul <a». Acestnejuns poate fi evitat prin folosirea JavaScript-urilor OS), pe cel puţin două căi:-+ făcând apel la evenimentele OnMouse-Over şi OnMouseOut concomitent cu codCSS - calea mai simplă;-+ incluzînd în codul HTML un scriptcsshover.htc care poate fi descărcat de laadresa http://snipplr.com/view/1912/internet-explorer-ie6-css-hover/ - caleamai complicată.

Scriptul csshover.htc face ca IE6 săfuncţioneze cu :hover nu numai pentrulegături, lucru posibil deoarece imple-mentarea Java Script în diverse browser-eeste aceeaşi, cu mici excepţii.

Pentru a face cap. meniul să funcţioneze

'-loD ".··.·'~·~1••.• corect şi în browserulIE6 şi versiunile IEanterioare, am conce-put o alternativă laacesta având la bază ocombinaţie CSS şiJava Script.

În scriptul CSSsunt inserate liniile:.coverl { background-color: #BFOB34; cursor:pointer; font-familv:Verdana, Arial,sans-serif;

~ color: #FFFFFF;font-rrrrr~ ••_ 1'.'" . size:9pt; font-weight:

MACHETA FINALA: Aşa arată varianta Îmbunătăţită a machetei. normal; border-right:

solid 1 px #8e9da8;} .coutl { background-color: #02243d; cursor: pointer; font-fami-IV: Verdana, Arial, sans-serif; color:#FFFFFF; font-size:9pt; font-weight: normal;border-right: solid 1 px #8e9da8;}

Acestea descriu stilul pentru butoane.c_overl pentru aspectul butonului laselecţie şi .c_out1 pentru buton neselectat.

În codul HTML, pentru a specifica unbuton vom folosi:<td width=" 1 04" bgcolor=,,#02243d"onMouseOver="this.c1assName='coverl ';"onMouseOut="this.c1assName='coutl '" >&nbsp;<a c1ass="menu" href=,javascript:void(O)">PCPractic</a></td>

Se observă că pentru evenimentulOnMouseOver aspectul butonului va fidat de codul CSS .coverl, iar pentruevenimentul OnMouseOut acesta va fi datde .coutl. Cu aceste câteva linii înHTML şi CSS s-a realizat efectul de roll-over independent de browser-ul pe carese afişează.

Cod îmbunătăţitPrin compactarea codului şi crearea unuimeniu funcţional pe toate browser-ele seobţine o varianta îmbunătăţită a machetei(în directorul surse\step-2-macheta de peCD). Aceasta poate fi considerată drept ovariantă îmbunătăţită, ce poate fi folosităpentru realizarea întregului site.

Întrucât în Java Script s-au scris multescripturi utile care pot fi găsite în internetşi încorporate în codul HTML propriu, înmacheta îmbunătăţită am inclus unexemplu. Astfel, în coloana din dreaptaam inserat un ceas digital care arată ora depe calculatorul celui care accesează pagi-na. Scriptul va însoţi pagina web indife-rent de modul în care a fost încorporat,prin includere în corpul codului HTMLsau printr-o legătură.

Reţineţi că scripturile Java Script seexecută întotdeauna pe calculatorul clien-tului.

Aceeaşi temă, altă realizareo alternativă la pagina web structurată cu ajutorul tabelelor este reprezentată de împărţirea prin intermediuldiviziunilor. În articolul de faţă vă prezentăm modul de realizare a temei noastre cu ajutorul diviziunilor.

Victor Gheorghe

Un subiect larg dezbătut pe forumurilecelor preocupaţi de HTML este celprivind modul cum se declară struc-

tura unei pagini web. De la început păre-rile au fost împărţie între adepţii tabelelorşi cei ai diviziunilor. Cu toate că se pare căbalanţa preferinţelor începe să se înclineîn favoarea diviziunilor, tot mai utilizatela paginile noi, folosirea tabelelor are încămulţi adepţi, motiv pentru care am şiprezentat-o anterior.

Plecând de la aceeaşi machetă graficăse poate realiza acelaşi site, urmând însăaltă cale în programare. Pentru dimensiu-

nile actuale (arie de acoperire şi cantitatede informaţie) ale site-ului, programareacu tabele sau diviziuni produce diferenţede timpi de acces nesemnificative. Sepoate spune că site-ul structurat cu tabelerăspunde cerinţelor formulate. În realitateînsă site-urile au mult mai multă infor-maţie pe fiecare pagină, iar structurareaacestora prin intermediul tabelelor poatecrea neajunsuri. Dacă în faza de realizareneajunsurile nu sunt imediat vizibile,după plasarea site-ului pe un server, aces-tea sunt resimţite imediat. Un site esteceva în continuă schimbare, o modificare

(oricând posibilă) de genul conţinutuluipaginilor, a numărului de imagini sauchiar a structurii site-ului pot crea proble-me, în cazul în care acestea nu au fost pre-văzute. Motivul este simplu şi rezidă înstructura rigidă a tabelelor. De aceea esteutil să vedem cum se poate realiza un siteutilizând în loc de tabele diviziuni. Pentrusimplificare se va folosi aceeaşi temă.

DiviziuniPe machetă se vor defini diviziunile careurmează să fie tratate distinct la realizareacu 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âtfiecare diviziune are un stil propriudefinit în scriptul CSS (fişierul vbcomm.css din directorul surse/html-div-css-js/)diviziunile se vor marca cu numele dinacest script. De fapt pentru această vari-antă de realizare aspectul paginii afişateîn fereastra browser-ului se controleazădin scriptul CSS.

După marcarea diviziunilor pe mache-tă aceasta arată ca în imaginea de mai jos.

Primul element formatat CSS estereprezentat chiar de secţiunea <body>din codul HTML. În spatele acestui TAGstă o formatare cu mai multe atribute caredescriu aspectul general al unei pagini.Punctul de plecare în programarea site-ului este secţiunea <body>, şi pentru căîn CSS proprietăţile se moştenesc, TAG-ul superior în ierarhie, <htm 1> , va aveaaceeaşi formatare.html, body {color:#02243d; behavior:url(csshover. htc); font-fam ily:Verdana,Arial, Helvetica, sans-serif; background-image: url(../img/main_bgr.jpg); back-ground-color:#FFCC80; background-repeat:repeat;background-position: top left; mar-gin: Opx; padding: Opx;}

Cu ajutorul acestei singure linii de codse stabilesc imaginea pentru fundal, ca-racteristicile fontului de bază, poziţia înpagină, marginile şi spaţierea la margini.

Următoarea diviziune #wrap (în engle-ză wrap are înţelesul de înveliş) va conţinede fapt întreg site-ul.#Wrap {margin: auto; width:968px; bor-der: 1px solid #002f2f; background-color:#FFFFFF; margin-top: 20px; margin-bottom:10px;}

Th •• ItOl'fU ofthanptln.dth'9·.,··nd.I·9·n~ofJculptorf ••• o··y.· •.dolph •• W.' ••M.n'.c.leb •.•ted w.lk,.ng Libe<ty ..•

Pr;ce: '$31.95 Ma,,,; '"fo.Produtl "fiU b. "ell.ble fQrlhlppi",041/u/700aII:.\l Add Il) C .• rt P::l Add tl) W,sh

I~He"U$.rs

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

"l'Idprlvil.;.,.

It', 2008, .Jld the l' very •• (Ilecl to 1"011out .nother '1e.r of am.ling productJ! We hope thls n."" ,e.,w.1l br1nQ YOU jll1, .lrod th.t OU" (ombin.tton of w.U-lovedcl.UIU .nel ne•• f.yor1tes willm.ke 2008 • 'le.,. toremrmber'!

Our Llltest Collectibles

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

TABELE: Varianta cu tabele necesită Încărcarea completă a site-ului Înainte de a putea modificainformaţiile conţinute.

Trebuie remarcat că linia CSS pentruaceastă diviziune începe cu # şi nu cupunct, aşa cum procedasem anterior.Diferenţa constă în modul cum se ape-lează în codul HTML, dar priveşte şimodul de funcţionare. Dacă a fost ,,#"atunci în HTML se codifică <divid="wrap"> şi dacă a fost "." se codifică<div class="wrap">, deosebirea dintreaceste două moduri de formatare con-stând în modul cum se folosesc în codulHTML. Elementele cu formatare prin "id"se folosesc o singură dată pe când cele cu"class" de fiecare dată când este nevoie.

Această diviziune trasează chenarulexterior şi fixează marginile acestuia faţă

de laturile su-P . perioară şi inferi-

"".u ••. ••••. ,...... oară ale ferestrei

browser-ului.Marginea inferi-oară nu are efectvizibil în toatebrowser-ele. Deaceea, în unelebrowsere chena-rul va apărea cafiind lipit de mar-ginea de jos a fer-estrei. Totodată sefixează lăţimeapaginii la 928 pi-xeli. În CSS nu

.:J'.""". există atribut pen-

tru centrare

- •.......~ I~r'-ad>el. __ '"

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

bV~C~

lV

logo

menucomamer '~~C'::~~L.:~ :::::::-~comem Iside1 container ~

I s;'le mr. b textleft textright

lDj

explicit ca în HTML, dar, având marginilecu atributul margin:auto se rezolvă uşorproblema centrării, deoarece "auto" setraduce prin stabilirea unor margini egaleîn stânga şi dreapta. DeCi pe orice moni-tor, cu orice rezoluţie, browser-ul va afişao pagină centrată orizontal.

Prima diviziune subordonată "wrap"este "header".#header {margin: auto; width:928px;height:78px; /* asa se poate introduce uncomentariu În cod CSS */ border: 1px solid#8e9da8; margin-top:20px; }

Această diviziune are lăţimea tot de928 pixeli, cu marginea de sus de 20 pi-xeli, cu chenar şi înălţimea de 78 pixeli(exact înălţimea imaginii pentru logo,fişierul vbcomm-header.jpg). Şi aceastădiviziune este centrată orizontal prinfixarea marginilor cu "auto" (implicămargini egale).

Pentru plasarea imaginii în secţiunea"header" se include în aceasta o nouădiviziune "logo" care rezervă un spaţiu de78 pixeli pe înălţime pentru imagineforţând alinierea la stânga (imagineaavând lăţimea de 928 pixeli se va aşezabine în diviziune).#Iogo {height:78px; float:left; }#header a img {border:none; }

Deoarece, la includerea în pagină, ima-ginile au un chenar pe care browserul îlaplică implicit, ani mai adăugat o linie înscript care să forţeze suprimarea chenaru-lui pentru acestea.

Diviziuni vs. tabelePentru a Înţelege mai bine aspectele legatede modurile de a programa structura uneipagini web este bine să detaliem câtevapuncte care le diferenţiază. Astfel, tabelele(TAG-ul <table» sunt obiecte fixe a cărorpoziţie aproape că nu poate fi influenţată. Pede altă parte, diviziunile (TAG-ul <div»permit realizarea unui design mult mai flexi-bil. Înainte de a detalia aceste aspecte tre-buie să mai menţionăm un lucru important:deşi toate browserele reprezintă identic ta-belele, există diferenţe Între ele la modul deÎncărcare a unei pagini web.O pagină web construită Într-un tabel nupoate fi afişată În browserele InternetExplorer anterioare lui IE7, decât după ce totconţinutul tabelului a fost recepţionat. Altfelspus, În fereastra browserului nu se afişeazănimic până nu a fost descărcat din internetÎntreg conţinutul tabelului. Cu cât paginaweb este mai complexă, cu mai multe nivelede imbricare a elementelor, cu atât Întâr-zierea de afişare În fereastra browser-ului,provocată de reprezentarea În tabele a codu-lui HTML,va fi mai mare.Dacă navigând aveţi senzaţia că browser-uls-a blocat, uitaţi-vă la bara de progres, iardacă aceasta este animată, nu vă rămânedecât să aveţi răbdare. De multe ori cauzaunor asemenea manifestări poate fi o pag-ină web realizată cu tabele, mai ales atuncicând este apelată prin intermediul uneiconexiuni mai lente. Desigur că şiproiectanţii paginilor web caută să reme-dieze acest neajuns, prin afişarea rând dupărând a tabelului (TAG-ul <tr». Cu toateacestea, Întârzierea este sesizabilă.Alternativ, o pagină web construită cu divi-ziuni şi având acelaşi conţinut se Încarcăsemnificativ mai repede. Browser-ele afişea-ză diviziuni le aproape instantaneu deoarecepentru aceasta nu este nevoie ca Întregconţinutul lor să fi fost descărcat. Afişareaunei diviziuni necesită numai ca structura sasă fi fost definită anterior.Un exemplu de pagină web complexă con-

înainte de a deschide diviziunea "me-nucontainer" se închid diviziunile "logo" şicea căreia îi este subordonată, "header".

Diviziunea "menucontainer" conţinemeniul.#menucontainer {width:930px; back-ground-color:#02243d; margin: auto;}

Acesta este declarat pe mai multe liniide cod toate începând cu ,,#menu".

Codul HTML pentru cele două divi-ziuni este:<div id="menucontainer"><I- deschidecontainerul meniu lui -><div id="menu"> <1- deschide meniul ->

De fapt, meniul este o listă neordonatămotiv pentru care în HTML un buton almeniului se descrie astfel:

struită cu diviziuni este Level Onlinehttp://www.level.ro/(alternativ vă puteţiuita şi la adresa http://shopper.cnet.com/).Pentru a aprecia care este cantitatea de codscrisă pentru o pagină a site-ului LevelOnline uitaţi-vă la sursă (poate fi vizualizatăde orice browser). Aceeaşi pagină realizatăcu tabele ar fi necesitat mai mult timp pen-tru afişare În fereastra browserului.Pentru a compara diviziunile cu tabelelevom lua ca prim aspect poziţionarea.Poziţionarea cu ajutorul diviziunii se rea-lizează repede fie folosind cod HTML şi CSSÎn acelaşi fişier:<div style="position: absolute; width: 100px;height: 55px; top: 150px; lefi: 80px; back-ground-color: #000099; border: none"></div>fie separând codul În două fişiere (.htm şi.css)•.• cod HTML:<div c1ass="exem lu"></div_> _•.• cod CSS:.exemplu {"position: absolute; width: 100px;height: 55px; top: 150px; lefi: 80px; back-ground-color: #000099; border: none"}Cu ajutorul codului CSS se formatează divi-ziunea. Atributul position: absolute Înseam-nă că diviziunea nu se leagă de nici un altelement din pagină, spre deosebire de tabeleunde Întotdeauna conţinutul este legat decelula (TAG-ul <td» În care este plasat.Diviziunea are o Înălţime de SS pixeli, lăţimede 100 pixeli, culoarea albastră şi se găseştela lS0 pixeli distanţă de marginea de sus şi80 de pixeli de marginea din stânga, fărăchenar.Dacă se specifică position: relative atunciaceleaşi atribute se raportează la elementuldin pagină căruia diviziunea Îi este subordo-nată. Dacă plasăm diviziunea În celula unuitabel, atunci toate distanţele se raporteazăla marginile celulei.Diviziunea are o proprietate importantă numi-tă vizibilitate (vizibilă sau invizibilă), pe care nuo Întâlnim la tabele. Aceasta poate fi de formavisibility: hidden sau visibility: visible.

<ul style="width:123px;"><!- deschidebutonul pentru CHIP online -><Ii><a c1ass="firstpage" href="chiponline.htm">CHIP Online</a></Ii></ul><I- Închide butonul pentru CHIPonline ->

TAG-urile <u 1 > şi < 1 i > folosite pen-tru definirea unui buton fiind subordo-nate diviziunii "menu" vor moşteniatributele acesteia.#menu ul {Iist-style: none; margin: O;padding: O; width: 133px; float:left; }#menu a { font-size: 0.8em; display: block;border-width: Opx 1px 1px Opx; border-style: solid;border-color: #455e70 #8e9da8#476f85 #1 5344b; margin: Opx; padding:2px 3px; }

De multe ori se folosesc imagini plasate Înfundalul elementelor unui tabel, lucru careÎn HTMLse realizează rin:ba_~ground=~'fl:l~~~ir _Dar aici apare şi limita HTML: pentru a evitaefectul de repetare (tiling) trebuie ca dimen-siunile imaginii să fie aceleaşi cu ale celulei.În cazul CSS, controlul aspectului este multmai riguros. Astfel, se poate plasa o imaginede fundal Într-o diviziune şi se poate evitare etarea ei:style="background-image: url(fundal.gif); back-ground-repeat: no-re eat"Dacă se doreşte acest lucru se poate specifi-ca repetarea numai e orizontală:style="background-image: url(fundal.gif); back-ground-re eat: repeat-x"sau numai e verticalăstyle="background-image: url(fundal.gif); back-ground-repeat: repeat-y"Imaginea oate fi centrată:style="background-image: url(fundal.gif); back-ground-repeat: no-repeat; background-position:cente r"--- - - - ---sau poziţia ei poate fi controlată pe verticală(top-sus, middle-mijloc, bottom-jos) sau peorizontală (Iefi-stânga, center-centru, right-dreapta). De exemplu poziţionarea stângasus se face cu:b~~~!:9und-position: left centerÎn plus, chenarul, marginile şi spaţierea faţăde margini sunt controlabile pentru fiecarediviziune, pe când la tabele acestea suntdefintie o dată pentru Întreg tabelul.Trebuie totuşi menţionat că abilitatea pro-gramării cu diviziuni se dobândeşte maigreu şi presupune exerciţiu. Aceasta esteinfluenţată de experienţa În domeniu şi tre-buie adaptată la comportamentul diferit albrowserelor.Nu considerăm că utilizarea tabelelor tre-buie evitată, ele Îşi menţin rolul pentru careau fost create, acela de a reprezenta datetabelar. Însă utilizarea lor excesivă În ges-tionarea structurii paginilor web nu esteÎntotdeauna cea mai indicată.

#menu a { color: #FFFFFF; background:#02243d; text-decoration: none; border-width: 1px Opx 1px Opx;border-style: solid; border-color:#d7f5c9#d7f5c9 #d7f5c9 #d7f5c9; border-top:none; } #menu a.firstpage { color:#ffffff; background: #02243d; text-decora-tion: none; border-width: Opx 1px 1pxOpx; border-style: solid; border-color:#455e70 #8e9da8 #476f85 #1 5344b; }#menu a.firstpage_current { background-color: #BFOB34; border-width: Opx 1px 1pxOpx; border-style: solid; border-color:#e25e3e #8e9da8 #e25e3f #ffffOO; }#menu a:hover, #menu a.firstpage:hover {color: #FFFFFF; background:#BFOB34; bor-der-bottom: solid 1px #BFOB34; }

Ip1i! gramării HTMLeste aceea că tre-:il••••..••

buie ştiut exactcâte TAG-uri<div> mai suntdeschise.

Pentru a plasainformaţiile strictlegate de publi-caţii în pagină sefoloseşte divizi-unea "container".Aceasta va avea

- ~~=-=~-~'-'-~ '::=-:::::'::,,,,';'! subordonate alte

trei diviziuni"text", "textleft"şi "textrigh t" .

#container {width658px; height:464px;border-bottom:Opx solid #9facb5; f1oat:left; }#text { height:465px; width:640px;padding-left:20px; padding-right: 1Opx;font-size:O. 7em;overflow:auto; font-weight:normal; line-height: 120%; c1ear:both; }#textleft {width:300px; font-weight:nor-mal; line-height:11 0%; float:left; text-align:left; color: #888888; }#textright {width:300px;font-weight:normal; line-height:11 0%;float:right; text-align:left; color #888888; }

A fost necesară introducerea diviziunii"text" pentru a avea controlul spaţieriifaţă de marginea din dreapta a coloaneidin stânga, cea care conţine imaginea. Înfine, cele două diviziuni "textleft" şi "text-right" de lăţime egală vor conţine infor-maţiile propriu-zise, cu tot ce presupuneaceasta, de exemplu un tabel declarat ast-fel:td.tableRow { background-color: #EBFl F3;line-height: 18px; }td.tableSec { line-height: 18px; }td.tableHeader { background-color:#336699; color: #FFFFFF; line-height: 18px;padding 3px; }

După închiderea diviziunilor "textleft"şi "textright" trebuie suprimate atributelefloat: left respectiv right şi trebuie închisediviziunile "content" şi "wrap" şi secţiu-nile <body> ~ <html>.

Ca şi primă concluzie a acestei alterna-tive observăm faptul că în varianta pro-gramării cu diviziuni codul este mai com-pact ceea ce este un argument în plus însprijinul acestei maniere de formatare aunei pagini web.

În fereastra browser-ului paginile aratăidentic cu cele realizate cu tabele, iar struc-tura de fişiere este la rândul ei identică_

!

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

~' "v.,...a..<loe-..- ..•...

ÎN PAŞI: CU diviziunile declarate pagina din exemplul nostruarată aşa ...

ÎN PAŞI: ... iar după alte câteva diviziuni avem deja şi imaginişi coloane

#menu li {position: relative;}Singurul atribut nedeclarat în CSS este

lăţimea butonului care diferă de la unbuton la altul. De aceea, acest atribut sespecifică în codul HTML. Toate celelalteatribute, marginile, spaţierile, culorilepentru text şi fundal, sunt codificate CSSatât pentru :hover, cât şi pentru lipsa aces-tuia.

Se remarcă descrierea separată a aspec-tului butonului paginii curente "first-page_current", care trebuie să fie selectat(cu culoare schimbată) atunci când în fer-eastra browserului este afişată respectivapagină.

Cu diviziunile declarate până în acestmoment fereastra browserului va afişapagina cu meniul (vezi imaginea de maisus).

Pentru suprimarea proprietăţii float: sefoloseşte codul HTML (float: realizeazăalinierea conţinutului fie la stânga, fie ladreapta):<br style="c1ear:both;" />altfel diviziunile care urmează moştenescacest atribut şi aspectul devine unuldescentrat.

Diviziunea "content" conţine infor-maţia care se schimbă de la o pagină laalta:#content { position:relative; width:928px;height:465px; border-bottom:6px solid#02243d;border-right: 1px solid #8e9da8; border-left: 1px solid #8e9da8; border-top:none;margin: auto; }

Aceasta are linie de chenar numai pe la-terale, înălţimea şi lăţimea acestuia fiindfixe, de 465 şi respectiv 928 pixeli. Şi aceastădiviziune este centrată (margin:auto).

Coloana din stânga se defineşte cudiviziunea "lsidex", unde x ia valori de la

1 la 8, corespondenţa fiind următoarea: 1este atribuit butonului "Vogel Burda", 2pentru "Chip Online", 3 pentru "Chip"etc. Elementul care se schimbă în aceastădiviziune este imaginea din fundal, careevident este alta pentru fiecare pagină.Pentru pagina care descrie publicaţia"Chip Special" coloana din stânga sedeclară astfel:#lside8 {width:251 px; height:465px;backg rou nd-image: url(../i mg/ ch ip-special.jpg); border-right: 1px solid#8e9da8;border-Ieft: 1px solid #8e9da8; float:left;font-size:O.7em; }

Se observă că URL-ul specifică ima-ginea din fişierul chip-special.jpg.

Prin plasarea imaginii în fundaluldiviziunii este posibil ca desupra să maipoată fi inserată informaţie, de exemplutext. Acest text va apărea în pagină pesteimagine, o asemenea construcţie per-miţând realizarea de efecte.

În acest scop s-au prevăzut două divi-ziuni "lside_innecbox" şi "saying" cuajutorul cărora se pot realiza efectele,imaginea rămânând fixă în fundal.

Coloana din stânga se închide cuTAG-uri de sfârşit de diviziune pentrufiecare din cele trei (lsidex, lside_innecbox şi saying).

Cu diviziunile declarate până în acestmoment, fereastra browser-ului va afişapentru fiecare dintre publicaţii o coloanăîn stânga, care conţine o imagine.

Trebuie remarcat că diviziunile "wrap"şi "content" sunt încă deschise. Plasarea,din greşeală a unui TAG de închidere</div> suplimentar ar avea ca efect

stricarea aşezării paginii în fereastrabrowser-ului. O regulă de care trebuie săse ţină cont în fiecare moment al pro-

iteDoriţi să măriţi performanţa site-ului propriu? Doriţi ca acesta să vă reprezinte mai bine prin includerea celor mai noiinformaţ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 acestarticol este cel mai bun exemplu În acest sens. Victor Gheorghe

A

Inarticolele anterioare am reuşit să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 unmoment dat se constată că varianta finalătrebuie întregită cu noi funcţionalităţi,care iniţial nu fuseseră luate în calcul? Demulte ori, mai ales dacă funcţionalităţilenoi afectează structura existentă, site-ultrebuie reprogramat. Din fericire porţiuniîntregi din codul existent se pot prelua înnoua variantă, redu când timpul de finali-zare.

Păstrând stilul grafic al machetei exis-tente, să presupunem că s-au adăugat noicerinţe la cele iniţiale ale temei CHIPSpecial-ului de faţă. Acestea sunt urmă-toarele:-+ formatul paginii site-ului să nu mai fie

de înălţime fixă, ci de înălţime variabilă.înălţimea paginii va fi corelată cu canti-tatea de informaţie din pagina respectivă;-+ pagina de început va conţine imaginiale celor mai recente apariţii ale publicaţi-ilor editurii;-+ descrierea evoluţiei publicaţiilor, pre-cum şi datele despre firmă se vor mutaîntr-o nouă pagină "Despre noi" care seva adăuga meniului;-+ datele privind modalităţile de con-tactare a firmei şi alte date utile parteneri-lor Vogel Burda se vor afişa intr-o paginăseparată "Contact"care se adaugă ca ultimelement în meniu;-+ descrierea publicaţiilor nu se va maiface pe două coloane, ci pe o singurăcoloană care trebuie să fie mai Iată;-+ la marginea din dreapta a paginii se va

include o coloană care va conţine (funcţiede cerinţe) titlul paginii, elemente de na-vigare către alte pagini, logourile publica-ţiilor, legături la articole reprezentativepublicate şi online, legături la elementecare pot fi descărcate. Pe prima pagină încoloana din dreapta se vor include clasa-mentele Top 10 pentru cele mai noi pro-duse testate;-+ deoarece imaginea care conţine logoulfirmei este prea statică se doreşte ca fie-care pagină să conţină pe lângă logo şi oimagine asociată reprezentativă pentruconţinutul paginii respective;-+ se va schimba structura meniului prinorganizarea sa pe nivele ierarhice. Publi-caţiile aparţinînd aceleiaşi familii se vorgrupa în acelaşi bloc din meniu;-+ articolele reprezentative pentru o re-

vistă, care se publică online, se vor aşezaîntr-un format de pagină care nu va aveacoloana 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 dinstâ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 proveninddin baza de date a firmei

Analizând noile cerinţe, constatăm cănu se poate realiza un asemenea sitenumai cu HTML, CSS şi JS. CU aceste lim-baje nu se pot scrie scripturi care să seexecute pe un server, şi cu atât mai puţinca acestea să aibă acces la o bază de datepentru a face căutări. De aceea, trebuieales un limbaj de tip server scripting.

Am optat pentru PHP şi datoritărăspândirii sale deosebite. PHP este unlimbaj de programare a scripturilor careeste potrivit pentru dezvoltare web şi carepoate fi încorporat în HTML. ScripturilePHP se execută pe server, detaliile privindmodul de comunicare între client şi serverle puteţi găsi în oglinda "Serverul webprivit de aproape". Limbajul PHP mai areun avantaj important faţă de HTML:poate să includă secvenţe de cod, repeti-tive de la pagină la pagină, fără a fineapărat necesar ca acestea să facă partedin corpul scriptului. Operaţia de inclu-dere având loc pe server, clientul nu vaputea şti, şi de fapt nici nu trebuie să ştie,cum s-a asamblat codul pe care îl primeş-te.

Această variantă se găseşte pe CD îndirectorul surse/php-div-css-jsl. Variantaconţine două structuri care se conlucreazăuna cu cealaltă:-+ cea cu diviziuni, care descrie layout-ulpaginii, asemănătoare cu versiunea ante-rioară de site, dar adaptată noilor cerinţe,adică cu zone;-+ cea de segmentare a codului (scripturicare se includ şi care se întreţes cu codulspecific fiecărei pagini) care are urmă-toarea schemă:

• secţiunea "header", fişierul "header.ine.php"

• secţiunea cu informaţie specifică pa-ginii, fişierele care se găsesc în directorulsurselphp-div-css-jsl de pe CD

• secţiunea "middlexcept", fişierul

~"lT':i:l

~LEVEL

"middlexcept.ine.php" pentru acele pa-gini care conţin articole. La aceste pagini,coloana din dreapta nu există, aşadarlayout-ul are o coloană în minus.• secţiunea "coloana din dreapta" aferen-tă zonei 5;• secţiune a "footer", fişierul "footer.ine.php".

Secţiunea "header" conţine elementecare se schimbă de la pagină la pagină. Înprincipiu codul este acelaşi, numai căpentru fiecare pagină se vor încărca ele-mentele specifice acesteia: imaginea dinzona 1, butonul din zona 2 şi imagineadin zona 3. Această încărcare selectivă segestionează cu variabile PHP.

Să aruncăm o privire asupra coduluiHTML din scriptul folosit în realizarea"header" -ului, fişierul "header.ine.php",din directorul surselphp-div-css-jslincl:<!OOCTYPEhtml PUBLIC,,-1/W3C/ /OTOXHTML1.0 Transitional/ /EN",,http://www.w3.org/TR/xhtmll /OTO/xhtmll-transitional.dtd"><html xmlns=,,http://www.w3.org/1999/xhtml"><head><title>Vogel-Burda Communieations ;'</title><!-meta TAC-uri -><body><!-header si meniu ->

Se observă că acest cod, cu excepţiaTAG-ului <tit le> şi a butonului dinmeniu care este asociat paginii curente,

este acelaşi pentru toate fişierele HTML.O cerinţă actuală este cea care impune cafiecare header de pagină să conţină o altăimagine, deci şi această cerinţă se adaugăla lista anterioară a excepţiior.

Prin folosirea de variabile PHP decla-rate la începutul fiecărei pagini se poatecrea independenţa headerului de paginadin site în care este afişat. Să privim cumse realizează aceasta în scriptul"index.php" (fiind cel care se acceseazăimplicit, acesta va avea numele index, caşi în cazul HTML, cu deosebirea că exten-sia trebuie să fie .php pentru ca serverul săştie cum să-I trateze). Scriptul"index.php" are stilul plasat în fişierul"vbcomm.css" din sub directorul style.Scriptul începe cu:<7php

$seet = ,,1";$subseet = ,,1";$title = ,,";inciude("ine/header. ine. ph p");

Această secvenţă php se scrie chiar laînceputul codului HTML, distincţia deHTML făcându-se cu un TAG mai special,,<?" la început şi ,,?>" la sfârşit.

Instrucţiunea "include" realizează in-serarea, în locul unde este plasată, a codu-lui din fişierul specificat ca argument, a-dică "inc/header.ine.php". Să vedem prinurmare ce conţine acest fişier "header.ine.php" în partea lui de început:

REALIZARE - VARIANTA CU PHP

$currencsection ; "secCtitle_".$subsect;

$secUitle_O ; ,,";

$secUitle_l ; "VOGEL BURDA";

$secUitle_2 ; "CHIP";

$secUitle3 ; "LEVEL";

$secUitleA ; "PC Practic";

$secUitle_5 ; "Despre noi";

$secUitle_6 ; "Cont@ct";$currencsection_title ; ${,,$currencsec-

tion"};

if (!isset($skipexcept)) {

$skipexcept ; "O";}

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

XHTML 1.0 Transitional/ /EN"

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

<html

xmlns;"http/ /www.w3.org/1999/xhtml">

<head>

În secţiunea header se plasează meniul.Meniul s-a refacut în totalitate, deoarece

are o structură pe nivele, mai complexă şimai greu de programat cu HTML şi CSS.Meniul desfaşurat are structură afişată înimaginea de mai jos.

Asigurarea bunei funcţionări a meniu-lui în browserele IE anterioare versiunii 7se realizează prin includerea scriptului JSdin fişierul csshover.htc. Acesta se includevia CSS în linia de declarare a proprietă-ţilor TAG-ului <body> :

body { color:#02243d; behavior:

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

Arial, Helvetica, sans-serif;

background-color: #04538C; min-width:

968px; }

şi adiţional în TAG-ul <head> dinfişierul "header.inc.php" se adaugăcomentariul:<I-[if It lE 7]>

<style type;"text/css" media;"screen">

#menuh{float:none;}

body{behavior: url(css hover. htc}; font-

size: 100%;l

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

#menuh a{height: 1%;font:bold

O.7em/l.4em arial, sans-serif;}

</style>

<![endif]->

Acest comentariu este ignorat de toatebrowserele în afară de Internet Explorer,care îl va interpreta pentru a putea asociacomportamentul :hover şi altor TAG-uri,nu numai pentru legături <a>. Meniul,testat pe toate browser-ele specificate IE6,IE7, Firefox şi Opera, funcţionează corect.În principiu ar trebui să funcţioneze petoate browserele, deoarece majoritatea pro-blemelor de implementare ale standarduluiCSSsunt legate de Internet Explorer.

Se observă întreţeserea codului PHP cucodul HTML. Liniile PHP conţin textuldenumirilor folosite pentru fiecare paginădistinctă din meniu şi care se vor plasa perespectivele butoane.

Prin includerea fişierului "header.inc.php" în "index.php" cele două secvenţe decod vor lucra împreună. Astfel, când se vaexecuta linia:<Ii><a c1ass;"firstpage<7if ($sect;; 1}{echo

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

><7;$secUitle_l ;7></a></li>

Serverul WEB privit de aproape

Pentru a putea realiza paginiweb funcţionale, În primul rândtrebuie Înţeles modul În carebrowserul interacţionează cuserverele aflate În internet. Oimagine corectă asupra modu-lui de comunicare Între client şiserver vă poate ajuta În con-ceperea propriilor proiecte. NuÎn ultimul rând, alegerea limba-jelor În care se va face progra-marea va depinde de tipul in-formaţiilor care trebuie obţinu-te de la server.

Server web

(Apache,115 etc.)

Cerere Cautăfifişier şi TI trimi

HTML laclientcaHTM

Client web

Browserweb(lE, Firefox,Operaetc.)

Ce este un server WEB?Un server WEB este un programde calculator care răspunde lacererea de pagini HTML făcutăde un browser WEB de pe uncalculator client. De obicei serverul WEB seexecută pe un calculator amplasat la unInternet Service Provider (ISP).Internetul utilizează aşa-numitul "connec-tion-Iess protocol" care Înseamnă că dupăfiecare interacţiune client-server (cerereaunei pagini şi livrarea ei) conexiunea Întrecei doi se pierde.

Să privim mai atent interacţiunile c1ient-server. O precizare este importantă: trebuiesă se facă distincţie Între program şi calcula-

tor. Client şi server se referăla programe care comunică şinu la calculatorul clientului şicalculatorul serverului.O clientul cere un fişierHTML stocat pe un calculatordin internet prin intermediulprogramului server. Serverul10calizează fişierul şi ÎI trans-mite clientului În format

i~rul HTML. Clientul după recep- Cerereţionare, afişează pagina fişier.php

HTML pe monitor. În acestcaz spunem că avem de aface cu o pagină staticăHTML.Paginile stati ce nu seschimbă decât atunci cândprogramatorul le modifică.O situaţie diferită este cea Încare scriptul se execută pe

calculatorul unde se găseşte serve-rul (server side technology).e clientul apelează un script, de exemplu.php. Serverul identifică prin extensie (php)despre ce fel de fişier este vorba. În funcţiede extensie serverul transmite scriptul spreprelucrare unui alt program (middleware),plasat tot pe server. Prin "middleware" seÎnţeleg programe care se execută pe server şicare conectează Între ele componente soft-ware sau aplicaţii. După terminerea prelu-crării acesta retransmite serverului rezulta-

tul. Serverultrimite maideparteclientuluirezultatulprelucrăriiÎn formatHTML.

(MySQL,Postgres,Oracle,

[)El2etc.)LI.1

Middleware(PHP,551,JSP,A5P

etc.)

Există maiTrimitefişierUl.php multe tehnologii server side:laclientcaHTML • Active Server Pages (ASP)

care au extensia .asp;• Hypertext Preprocessor - uneori ise mai spune şi Personal HomePages (PHP) - care au extensia .php,php3 sau phtml;• Server Side Includes (SSI) care auextensia .shtml;• Java Server Pages care au extensia.jsp.

Browser web(lE, Firefox,Operaetc.)

Există scripturi care se execută Întotdeaunala client (client side technology), JavaScript-urile.Spre deosebire de HTML care este un limbajde formata re, Java Script este un limbaj deprogramare şi se foloseşte Împreună culimbajul HTML. Într-o pagină scrisă În HTMLse pot integra programe (numite scripturi)scrise În Java Script. Scripturile Java Scriptse execută Întotdeauna la client.

'o- "-W ·~loo:t -

~ o",,~n. +<>w::> •..• ll:·:l) ",_"-I~~ •.·.I"'_Ir;;v.;-o_I~!'!' •• lu-I 1I·~a"oo

MARIT: Afişarea mărită a imaginii se realizează printr-un JavaScript.

se verifică cu instrucţiunea "if' dacă evorba de primul buton şi, dacă da, seafişează cu atributul css "firstpage_cur-rent" (cu :hover), adică selectat. În cazcontrar se afişează cu atributul "first-page" (fără :hover), adică neselectat.Toate acestea se realizează cu variabila$sect. Pe buton se va scrie textul memoratde variabila $secCtitle_l, adică în cazulnostru Vogel Burda. Un alt exemplu estecel al diviziunii "logo":<div id="logo"><a href="index.php"><img

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

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

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

start/end ->

în care, în funcţie de valoarea variabilei$sect, se încarcă din subdirectorul imgimaginea corespunzătoare adică "vbc-header-1.jpg".

Din această scurtă detaliere, se observăcă structura fişierelor pentru această vari-antă de site este schimbată faţă de versiu-nile anterioare. Există mai multe pagini şifiecare pagină are inclus pentru coloanadin dreapta (zona 5) un script separat (deexemplu pentru prima pagină acesta estefişierul menu_l.inc.php). S-au creat sub-directoare distincte pentru imagini,întrucât au apărut multe imagini şi a fostnevoie de stocarea lor în funcţie de desti-naţie (covers, stiri, toplO şi wallpapers).

Pentru a putea afişa şi imagini de di-mensiuni mari s-a folosit un script JS(fişie-

rul thumbnailviewer.js din subdirectorulstyle, care are asociate fişierul de stil thum-bnailviewer.css şi imaginea animată load-ing.gif, care arată progresul descărcăriiimaginii mari). Scriptul JSşi stilul asociat seinclud în fişierul "header.inc.php" cu linia:<seri pt src="style/th um bnai Iviewer.js"

type="text/j avascri pt">

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

nailviewer.ess" type="text/ess" />

• 1,.. """"'~lo=_l""F'k E61 v.., F~ 10061 Het>

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

VOGl::LBURDACOMMUNICI\TIONS

Efectul folosirii acestui script se vede înimaginea 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 aarăta cum se aşează într-o asemenea fe-reastră o pagină a site-ului. În imagine seobservă cum a fost structurată coloana dindreapta conform specificaţiilor. În aceastăcoloană sunt plasate meniul suplimentar(id #rightside din /style/vbcomm.css cutoate elementele subordonate), logourilepublicaţiilor şi thumbnail-ul şi legăturilepentru vizualizarea imaginii mari şi descăr-carea acesteia.

Realizarea layout-ului pentru publicareainternet a unor articole considerate impor-tante s-a asociat legăturii din pagina publi-caţiei CHIP şi plasată vizibil în coloana dindreapta la rubrica FOCUS.

Varianta finalizată pe această cale pla-sează site-ul nostru în categoria celor reali-zate cu tehnologie WAMP (Windows,Apache, MySQL şi PerIlPython/PHP).Componenta MySQL, inexistentă aici, ovom integra site-ului în articolul următor.Pe CD, această variantă a site-ului segăseşte în directorul /surse/php-div-css-js.

Pentru testarea codului scris pentruaceastă variantă, deoarece browser-ele nu"înţeleg" scripturi.php, am instalat serverweb, XAMPP, şi am verificat codul ape-lând în fereastra browser-ului adresahttp://localhost/ .

Ou;::a refe'lNa la un fc;rum, este pnm.: 1,11">al dC:lea f'\lmIH de !CQ_ in aceasta a dCl.>a(cn~orb;re se:rece- ~ sl,/b,ea_ Tr(ltlfl.ul;1'I (J.JO,ltllt este destul de vcd'.: s, !'acICltrul SI cumplr.:.orul shu acest klcru_Sll"Qllra noutat!!' Dt' urc o poate aduce o noua yerslune a actstui trO!an este o semratufa sch'nbata1'01":'·111'encryj)ter. :lupa cefleeare parte tragei1'Spre ea de pret, se alunQe 1.'1a suma de 300 deViSZ:(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:antultn.,."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 unciilrfo_t:;;';j,~;e

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

~

. .. '~i~;~dL)-....- •• , •• 1 11"',7 --~ ----!r.;:.... •.•. ._i'_ . _~ ,-_._--_.-------~-;-~~-:::~~:-- -----

E$te po~c. sa o;ilsest' un hll::<e~ #l:lOI.nd oum.'l ••••ccrt •••iUl sav' ?rcOMl1I e" nu. \,in ':01': pe ,\eoMO"'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,teazafluxul L;::lC.'I1unei udel de traJ'zaetll. Cenl\"\l a nu h d.rect legati de mal .••••re, nlllt1(etlf .,.;aje.ua W'<m:erme:hr. Ce obicei, acesta este .nga}at pTIf'ltr·u!'lmesaj e-ma,1 in care il este proml$1 o sluJcaparf.t.mt fca'te luUiluvl. Tel te ltebu:e sa faca atuta este sa gut10nezt un (ont SI " trarnferebann care vltl in .'IltCCint.i='ertru IIcest lucru, Intermed.arul p"'neste vn com,SIon. de OblCtl un precentCl! O Sln;ura c,fra, Corlul in care sllr: tr.r-$feratl banII este de CbIU" Creal dl! haco:tr sub un numefals intr·o ~ltll rara. I=r~,tul ute retras sub forma de (",)$1'lde la un ban.:o;m<'lt. Aproape atelUI tiparf:ste fCleStt , .'" cazul Itaturtler df: t!p pI'HUIl'Ig, O<'lG.'lIln ataator ~eu~eS-le sa p1'ltTlusca Informat!!;::a<:••m ;lf~ $.lIUrUMa' de ant, barll SIl!"t tr<'lrs-fe'.'Ill ",a onht't b<'lnmq catre unul S-<!Iumal muti

ermeda'l

':'cest,a l-a rt"<f ler trarsfl!ra ba" ca:n ma, mul1e c:ontlln C.\rtapa ~h1s-her-lIo' Ade"ar.!a 6Mo'e'gurll a <'lC$Cf .'IetJl,ltllJ lIl!UIII 1um.I">aitl mome1'l. ••, Îl'!cal"f: sur.:.em atenti nu do.r la rouma:u.lcelor care pestuza ~ acute fOrurTlllrl, " SI la retlamf: s la"umarul ne-unlor af, -ate eu ic"'Umul respet:by. PenUV ct odlltllee el rtlU de beti este ereala, ea pcate fI folOSIta pentrv miImult decjl OO'afatacun catre <'l 'utfIoZ/lton" mte"netulul s furtuldlltelorlo", Pe Uf' a~tfel de fe"l.Il'\'Ipc-t fi ir.t';lrlIte stled.me alo!!l.IF\crdealf:f-, dt trafIC. EXista dou.'l Yllnlll'lte: in p!'Jffta se VIndetrafic. Oaca un site abi. are cătrvo y,zltatcn SI metedele le-galede 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

, ,.. r---=."-r -- Irtmiet

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ă deexemplu 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 deprogramare nu a fost întâmplătoare.

Am constatat că PHP oferă posibilitateastructurării avantajoase a codului, daradevărata sa forţă se pune în evidenţăatunci când îl punem să lucreze cu baze dedate. Limbajul PHP are funcţii predefi-nite, altfel spus are conectivitate, cu maimulte sisteme de baze de date: MySQL,PostgreSQL, Grade, Berkeley DB, In-formix, şi lista poate continua. Nu toateaceste sisteme sunt gratuite, în topul po-pularităţii aflându-se MySQL.

Pentru a afla ce este MySQL, pornim dela o definiţie a sa: MySQL este un sistemde management, cu căi multiple de exe-cuţie, multi utilizator, pentru o bază dedate SQL. SQL (Structured Query Lan-guage) este un limbaj destinat căutărilor şimanagement ului datelor în baze de daterelaţionale. Conform unor statisticiWikipedia (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 esteconcurent şi interogările bazelor de date seexecută simultan. Acum, definiţia nu maipare atât de criptică.

Ne propunem să înt regim construcţiaactuală a site-ului nostru prin adăugareafacilităţ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 calculatorullocal a fost deja instalat XAMPP (veziarticolul de la pagina 50). în continuare,trebuie să găsim răspunsul la câteva între-bări: unde căutăm? Cum ajungem lacăutări? De unde facem căutările? Cum sefac căutările? Cum se prezintă rezultatul?şi Cum îmbunătăţim aspectul?

Bineînţeles, într-o bază de date - acestaeste răspunsul logic. Problema este că a-ceasta încă nu există, aşa că trebuie creată.

REALIZARE - VARIANTĂ CU PHP $1M

_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 Actiuneba",

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

r revista ~'lltchar{20) l3tllll_swedISh_cl 1," tii -' )< 00 lliI ~ :mr .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 ''" IJI -' )< 00 lliI I!l I'i!lL Marcheaza toate 1 Dese-lectea.za toale VerJ,e ••r cu 11./)C ~ lti ~ re

Indexuri: roNume cheie Tip CardinaliUlte Actiune Campld IflDEX r jkl unol(a) / )C' 1Cl

Creaza un Index pe r;-- to&oana Executa I

Utilizare spatiuTip Utilizare

Date 13::',92: 8)'tesIndex ~",~16 BytesTotal 26:, -'l4 8ytes

Statisticile r.ndului

Comenzi ValoareFormal ':1ll:U'-1C

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

lungime linie -,.Marimelinie ::S '3ytU.UrmatorulAUloindex

Creatie :e:. 2~, 201:. 4•.t:.6:2E;J1

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

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

Nici nu este prea dificil, deoarece dispu-nem de cuprinsurile revistelor CHIP,CHIP Foto-Video şi PC PRACTIC, iarpentru fiecare număr de revistă dispunemde denumirea acesteia, anul apariţiei, lunaapariţiei, iar fiecare articol din revistă esteprezent cu rubrica şi titlul aferente. Acesteinformaţii se găsesc pe CD în două fişiere,cuprinsuri.xls şi cuprinsuri.sql, aflate îndirectorul surse/php-mysq/-div-css-js/data_base_backupl.

Cu ajutorul programuluiphpMyAdmin, componenta XAMPPrespon'sabilă de administrarea bazei dedate locale (http://localhost/phpmyad-minI), se crează o nouă bază de date"chip". Folosind facilitatea Import dinfişierele de cuprins uri creăm în cadrulbazei de date "chip" tabelul "cuprinsuri".Pentru import putem folosi oricare dinfişiere, cel cu extensia .sql sau fişierul .xlssalvat ca şi .csv (operaţie uşor de facut înMS Excel), ambele fişiere fiind de faptsimple fişiere text. Este bine să reţineţiacest detaliu, pentru că se poate întâmplaca, înainte de crearea unui tabel în baza dedate, să fiţi nevoiţi să interveniţi direct cuun editor de text în respectivul fişier.

În imaginea de mai sus observaţi struc-tura câmpurilor din tabelul cuprinsuri.

După crearea bazei de date "chip" şi încadrul acesteia a tabelului "cuprinsuri"avem deja răspuns la întrebarea pusă întitlu. Aceasta cu toate că la început, cânds-a pus problema creării unei baze de

date, problema nu părea aşa de simplă.Trebuie totuşi să menţionăm un lucru:am preferat o soluţie simplă şi de aceeaam optat pentru varianta "totul într-unsingur tabel", fară a mai face tabele sepa-rate pentru publicaţii, rubrici şi ani culegături între ele.

Calea către căutareIniţial s-a dorit să existe posibilitatea de aapela procesul de căutare de pe oricaredin paginile site-ului.Dar site-ul are şi pagini de unde chiar nue nevoie să poată fi apelate căutările, deexemplu paginile de articole. Cu altecuvinte, condiţia este ca procesul decăutare să poată fi apelat de pe toatepaginile site-ului, mai pUţin de pe cele cuarticole. Din punctul de vedere al struc-turii siteului, aceasta înseamnă că se potapela căutări de pe toate paginile care auinclusă coloana din dreapta (zona 5).Codul pentru coloana din dreapta esteconţinut în scripturile menu_x.inc.phpdin directorul surse /php-mysq/-div-css-

ailmrmLEVEL

L1NK:În dreapta paginii a fost plasată o

legătură la scriptul de căutare.

js/inc/ de pe CD. Vom modifica unul dinaceste scripturi într-un editor. Astfel, laînceputul diviziunii "rightside" din scrip-tul de modificat se plasează legătura lanoul script din care se pot face căutări, pecare îl vom denumi "search.php":<divc1ass="cuprinsuri"><a href="search.php"style="color:#FFFFFF;

font-size: 12px;"><img5rc="img/view.gif'>&nbsp;Cautaricuprins</a></div>

La fel se procedează cu restul scriptu-rilor menu_x.inc.php. Coloana din dreapta(zona 5) va începe cu legătura introdusă.

Bineînţeles, şi aici avem un răspuns simpluşi logic: din varianta existentă a site-ului.Este adevărat, aceasta încă nu are o paginăpentru căutări aşa că trebuie construită şistocată în fişierul al cărui nume îlcunoaştem deja, "search.php". Aici ne a-jută modul în care a fost structurat site-ul.Includerea unui nou script "search.php" (îl

CHIP LEVEL PC Pract,c

in l'llunle d,n 1'-<0".",,,01* 3 ~ (O)

An Nr. itluChpChp FOlO·\\deoChp SpeooIPCI'r.odJc

Cu un script, pagina devine dinamicăgăsiţi pe CD în directorul surse/php-mysq/-div-css-jsf) în structura existentă nu repre-zintă o problemă. Codul sursă al scriptuluise găseşte şi în oglinda "Cu un script paginadevine dinamică". În script este definit for-mularul, TAG-ul <form> cu numele "vbc".

Formularul se compune dintr-un câmpde introducere text <input> cu numele"caut", o lista derulantă (combobox)<s ele c t > cu numele "cerev" şi un buton"Caută". Câmpul "cerev" are selectată im-plicit opţiunea toate revistele şi astfelcăutarea se va face pentru toate revistele,existând însă şi opţiuni <option> şi pen-tru fiecare revistă în parte. Căutările se vorface în titlurile articolelor publicate.Formularul se plasează la începutul scrip-tului, după comentariul <!- HTMLcoloana cu continutul, inceput ->. Vomedita numai partea de conţinut a scriptului,restul părţilor fiind deja făcute (header.inc.php, midelleexcept.inc.php şi footer.php).TAG-ul <form> are un atribut "action"care indică acţiunea ce urmează selectăriibutonului "Caută". În cazul nostru acţiu-nea se face cu variabila sistem $PHP_SELF,ceea ce înseamnă că scriptul se apelează pesine. Se completează formularul cu cerereadorită şi se iniţiază procesul de căutare înbaza de date cu butonul "Caută".

&nbsp;&nbsp;&icirc;n titlurile din&nbsp;&nbsp;<select name="cerev" style="width:102px;"><option value="., selected>--toaterevistele</option><option value="Chip">Chip</option><option value="Chip Foto-Video">ChipFoto-Video</option><option value="Chip Special">ChipSpecial</option><option value="PC Practic">PC Practic</option><option value ="Insider">lnsider</option></select>&nbsp;&nbsp;<input type="submit" c1ass="sub-mit1"value="Cauta" >&nbsp;&nbsp;<? echo ,,(...$total-record.")";?></div></form><!- formular de cautare sfarsit -><?php/* navigatorul de pagini facut cu legaturi */for ($i= 1; $i<=$lOtalpage; $i++){

if ($i==$pageid){echo ,,<b>".$i."</b> I ,,;

} else{echo '<a href=' .$PHP_SELF. '?caut=' .$caut.'&formular=no&pageid=' .$i. '>' .$i.'</a> I ';

}

Incluzând un singur script În structura ulti-

mei versiuni a site-ului putem consulta cu-

prinsurile revistelor apărute 'până În pre-

zent. Pentru a putea vedea cum s-au pro-

gramat componentele scriptului este ne-

voie de sursa lui, prezentată mai jos.

<?php$sect = ,,11 "; $subsect = "O";$skipexcept = ,,1"; $title = ,,";inci ude("i nc/header. inc. ph p");/ / Conectarea la baza de datemys q L co nnect(,,1ocal ho st"," user"," pas swo rd ");mysql_se leccdb("ch ip");$table="cuprinsuri"; / /denumire tabela in DB$pagesize= 140; / /nr.max.de linii/pagina web$caut = $.GETL,caut"];$cerev = $_GET["cerev"];// testeaza daca formular sau pagina nouaif(isset($_GET[..formular"]) &&

$_GET[..formular"] == "yes"){$zuzu = "form";

} else { $zuzu = "no form"; }if($cerev == ,,") {

$filt = .:';} else {

$filt = " and revista = '".$cerev.'" ,,;}/ / citeste 1 coloana din DBdate cu filtrul/ / din variabilele $caut si $cerev$result=mysql_query("select id from $tablewhere titlu like '%".$caut."%' ".$filt." ;");/ / numara liniile gasite$total reco rd =mysq I_num_rows($ res uit);/ /pune nr. pagini in variabila $totalpage.$total pag e=(i nt)( $total re co rd/ $page size);if«$ total reco rd%$ pag esize)! =O){$totalpage+= 1;}if(i sset($ _GETL,pageid"])){

$pageid = LGET["pageid"];$start=$pagesize*($pageid'l );

} else{$pageid= 1;$start=O;

?><!- HTML tabela afisare cautare inceput -><table celispacing="O" cellpadding="4" bor-der="O"><tr><th width="11 O" align="center">Revista</th><th width="30" align="center">An</th><th width="30" align="center">Nr.</th><th width="11 O" align="center">Rubrica</th><th align="center"> Titlu</th></tr><?php/*deschide bucla de parcurgere a liniilorliniile se pun in randurile <tr> succesive */$i = O;wh iIe($ row= mys q Ue tch .as soc($ re sult)){$i++;if ($i % 2 != O) {

$bgcol = " bgcolor='#FFE6D9' ,,;} else {

$bgcol = ,:';

Cum se fac căutările?În urma completării formularului "vbc"cu valorile dorite se poate începe căutarea,operaţie care presupune o selecţie în bazade date. Pentru a vedea cum se face unasemenea lucru este bine să testaţi cuphpmyadmin câteva selecţii posibile. Deexemplu, să căutăm de câte ori a apărutcuvântul "video" în titlul articolelor dintoate revistele. În phpMyAdmin căutarease face cu comenzi SQL (care are butondistinct), folosind comanda:select * from cuprinsuri where titlu like

'%video%'

unde % este simbolul pentru orice, adicăse caută titlurile care conţin şirul de carac-tere "video" plasat oriunde în titlu (avîndorice caractere înainte şi după el).

Este bine să testaţi cu ajutorul php-myadmin diverse interogări pentru bazade date până vă obişnuiţi cu modul în careMySQL răspunde diverselor selecţii. Estebine să includeţi în scriptul propriucomanda select numai după ce v-aţi con-vins că răspunsul conţine ceea ce doreaţi.

Revenind la tema noastră, dorim săobţinem aceeaşi selecţie din baza de date,folosind pagina noastră web.

}/*selecteaza inregistrarile din tabela fixandL1MITrezultatul selectarii se va memora in variabila$result. */$result=mysqLquery(..select * from $tablewhere titlu like'%".5caut."%' ".$filt." order by revista asc. andesc, nr desclimit $start, $pagesize;");?><!- HTML coloana din stanga inceput -><img src="img/lupa_2.jpg" title="Cautari" /><br />&nbsp;<br /><!- coloana din stanga sfarsit -><?php include("inc/middlexcept.inc.php"); 7><!- HTML coloana cu continutul inceput -><h 1>Cautari &icirc;n cuprinsuri</h 1><hr /><!- formular de cautare inceput -><form name="vbc" action"<? echo$PHP_SELF; 7>?formular=yes"><in put type="hidden" value="yes" name="for-mular"><div class="cautare">Sirul de cautare: <input type="text"name="caut" style="width:120px;">

?><!- HTML linia cu info gasita -><tr <? echo $bgcol; ?> height="16" ><td align="center"><? echo $row['revista'];?>&nbsp;</td><td align="right"><? echo $row('an'];?>&nbsp;</td><td align="center"><? echo $row['nr'];?>&nbsp;</td><td><? echo $row['rubrica']; ?></td><td><? echo hili($row['titlu'J.$caut); ?></td></tr><?php// inchide bucla de parcurgere a liniilor}/ / deconectare de la baza de datemysql_c1ose();?></table><!- HTML tabela afisare cautare inceput -><!- coloana cu continutul sfarsit ->

REALIZARE- VARIANTA CU PHP $1M L

ComandaSOl·-----------------------------,$lUCTfAOMwpf'tl~W'lwttERE IRI ll([ ~

Ulm.

~~ hnllincapandcupo-

In mod IOnlontal :::J Sl rep€'la!~ aflteot dupa ~ c~'uI~

Soltare dupa lasta IrlJcl unuhal 3-T- ld revist1:l

r ./)< 36 C~p 1999

r ./)< 162 ~p 2000r ...I)C 4~ Chip 2001 1 Software

r .;/)< 559 Chip 2001 7 Practtca-

r ..J)( 992 Chip 200 10 To:sti?'&. TO?hnologll Vid~ Integrat de ultltl'la generatIe

r ./ )C 1009 Chtp 2007 11 Teste & TahnolCoQu Ac~'H,deo~fIlnJHOr .;.! )< 113..1 Ch.pSPecial 2007 12 !,','mamp6

Vide-o pe PC

EdltaIe.a fofmatuk.n Olgttal Video

Vide;)(ecorder software - gratIs

Vide-o an~lamine

CĂUTARE: Rezultatele afi~ate prezintă textul căutat indiferent de modul de scriere, cu majuscule

sau cu minuscule.

În scriptul search.php cererea se mate-rializează într-o comandă select (vezicomentariile din oglinda "Cu un scriptpagina devine dinamică"). În articolul dela pagina 36, în oglinda "Serverul WEBprivit de aproape" este ilustrat traseul pecare îl urmează cererea noastră. Pe aceastăcale cererea noastră se va executa pe ser-

Rezultatul căutării este recepţionat devariabila $result.

Afişarea rezultatuluiVariabila $result conţine rezultatul in-terogării bazei de date. Pentru a-l afişa înfereastra 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ă însursa scriptului existenţa unei bucle deparcurgere a liniilor (while), care par-curge secvenţial liniile din $result şi pen-tru fiecare din ele compun~ codul HTMLnecesar afişării. Deci, pentru fiecare liniedin $result se va insera într-un tabelHTML o linie cu datele corespunzătoare,TAG-ul folosit fiind <tr>. Capul de ta-bel conţine coloane pentru revistă, an,număr, rubrica şi titlu. Tabelul astfelpopulat cu date este "pasat" serveruluiweb care îl returnează browser-ului.

La afişarea rezultatelor trebuie stabilităordinea acestei operaţii. Dacă aceasta nueste precizată rezultatele se recepţioneazădezordonat, ceea ce face lista aproapeinutilizabilă. Ordinea se stabileşte încomanda select, care în cazul nostru aratăastfel:

"seleet * from euprinsuri where titlu like

'%".$eaut.''%' order by revista ase, an dese,

nr dese;"

În cazul comenzii folosite de noi,ordonarea s-a facut după revistă ascen-dent, an descrescător şi număr descrescă-tor, rezultatul afişat în fereastra browser-ului fiind exemplificat prin imaginea dejos.

Se observă că fiecare rând din tabelconţine textul "video", indiferent dacăacesta este scris în titlu cu majuscule saucu minuscule. Se mai observă că în dreap-ta butonului "Cauta", între paranteze, estetrecut numărul de înregistrări găsite pen-

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 •••

::~. :: :rattt::fo :'e"'!':;n--lINa~b lut:'"

:O':;::Ec,:c~l l,Il"'~ra::e,.l er"r;e:Co; ~~ k:;v$ :lreeutul.:..nul\il:00;:00; 1: Tene.&. Teh"clGij<t e.tI'O.JI de p"e~a

: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

rezultate, este util ca acestea să fie afi~ate pe

mai multe pagini.

tru condiţiile ceru te. Aceste condiţiipoartă numele de filtru. Operaţia decăutare putând fi formulată şi spunând căse aplică un filtru pe baza de date.

Întrucât rezultatul unor căutări poatereturna foarte multe linii, din raţiunilesne de înţeles acesta se va segmenta într-un număr fIx (maxim) de linii care seafişează pe pagină. Acest număr maximde linii este dat de variabila $pagesize.Deci tabelul afişat într-o pagină vaconţine $pagesize linii. Pentru a puteanaviga de la o pagină la alta, deasupracapului tabelului se înserează un naviga-tor de pagini. Acesta este constituit dintr-o succesiune de numere afişate ca link-urişi care dacă sunt selectate conduc la pagi-na respectivă.

În imaginea cu rezultatele obţinute,pentru filtrul setat cu şirul "an" în toaterevistele, s-au găsit 519 titluri. Deoarecenumărul de rezultate este mai mare decâtnumărul maximi de linii stabilite pe o

RevistaCbpCl-'t;

C'" :

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

CtI':CI" t: F:,:o·/ldec(J- DFc!c·<,,~ee

Ct'ilp 'Sce;;a~ilCt-:pS!:'~CllIJ

C"'lpSpeCI/l1

''''10 :::~o/llChc'E:e:.al

An Nr. ~lJbrica Titlu200- :2 Test~ 6. TehnolcQII Came'e vfdeo t-!ll'DV:00-:0 :: Tes:e 60 Terncl~1I .l.cce1e'are .••.,de-o cerW ""'J2ea; :0 Teste & -~I'."oIoQ' '.jll::ieo INe:;r,,: de ulbmll generane:OC'5 :0 Cc.erSt:'"' =-rC.::l .•a,e\o1deo2006 :"aetlu CC;te pe V'OecC':006 :"/lO(:lca F'reillcr"revldeo,0015 :(lIctiCli Video cete!efe'":C'J5 Ccve'st:r'l ercadca::tlrgat,dlc·.ceeZC,,~ 3 F"'lIaJ~ Sraadellstm;l Y1deeIn retea::0: :'lIl:t10! ".declIrfe':'lImre:00: $cA:".lIre Vldeoreccl"der seft-•••~~e ' Ql"a~'s2000 Hard.'/are Edft$re!l fc"matlJh.H 0'\1 taI V,dec:999 Herew"re Vldl!:oţI!:PC:00:- Terrele,; e PC turte ,"..'!rt"IJ fctcs'~ .,e::2007 Nout"tl FCTO·'lto-i;O ':!'Q,t41,orllre2CC~ :2 \\mamp 6 C;tl"ll. tati red~re!l ",·oeo2007 :2 Wlrdc.',s 2000 Orulere.!l I,:re, secvente ~'deo 1"bllt<9rcu"d2006 " ?l"lIetfCi'! M;.EG faro! redo!me, tU Vldeoo.eOo2006 .: HarG.IIlIre ,=laC' e 'of'Cle.e ale fr'\a'l"le~t1Jh./

2C06 Tur1"i;j ~te~ ţert'"V o ~ClI\o-,dee:005 ErlIC'l1J1 :::lac- \1 ~e-c . Sll"U l"UmlJl~r.r:t~ Tr,r 'n.~,Il!:',:."r.. Ir..•." ;,1••..~",.,."r1- :'1H1IIQ'nn-- ...- - lri~

pagină, acestea au fost plasate în patrupagini. Pagina curentă are numărul săuafişat bold.

Aspect îmbunătăţitModul î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ăutarecurent (criteriul folosit) nu este explicitatîn coloana care conţine titlul. În exemplulanterior am folosit şirul "an" şi pentru aevidenţia cât este de dificilă identificareaacestuia în titluri. Se întâlnesc situaţii încare undeva în fereastra browser-ului sespecifică ceva de genul "şirul de căutare afost <şir>", dar nici această soluţie nu faceidentificarea în titluri mai uşoară.

O soluţie elegantă este ca şirul de cău-tare, oriunde ar fi el plasat în titlu, să fieafişat pe un fond de altă culoare, efect cu-noscut sub numele de highlight. Aceastefect se poate obţine cu ajutorul uneifuncţ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. Înscriptul search.php, funcţiei este apelatăprin intermediul liniei:<td><? echo hili($row['titlu'],$caut);?></td>

Se observă şi modul cum se întreţescodurile HTML şi PHP. Codul funcţieidin oglinda "Cu o funcţie PHP listeledevin atractive" se va include cu ajutoruleditorului în corpul scriptului search.php,de preferinţă la sfârşit, înainte de inclu-derea scriptului "footer.inc.php". Efectulfolosirii acestei funcţii este vizibil: amfolosit tot selecţia anterioară, dar am ales

An Nr. Rubrica2e03 i Sdt."a-e:003 a COI1"UI"~tol

:G03 8 Ha'e/.are:003 .:..Itele2003 Comunicatii2003 Hlm::i.'.llre'2003 ~'aCtlca:C~3 t1a·c.~4"~2003 Co.eme"',':Otl3 tta·~..•.•a'e:003 e Scr:..'are:C()] Ha"c, .•"re2003 H/I"d•.•are2003 Hard...•"re2003 114'C"'''l'eleG) ,olIl'CMre

:C03 Con- •.•I'HCllbl2e03 :-'aa,C/I::03 ha'eM"e:003 'ta'c,',are2003 rtarc...a·e,nln HJ'lr~/.1Ir::-

8C~.a~C""'leCe a::&f'.ca a c<p..S.r-euI Cle p'ceae&r:lpentN,aC"l'ta~ v"etde t'UfaN:aCar.te.."ccd. noullaSOCIIr-;CU!/I ..• col"trc'at"e'«tJ'(';nICc. c..!'"t/l"'/Icar~epc-ultr6l"sf.::...""tmtele",zc'=-af'CU!dep'e:ail" spatele ecr4l"t.;!U1

~erfe'1'Tla"ta sau 5;~oJ"arta'e3t'gul$OM:: ... deprc!=a5arrul de probaSanC\JJ de probaCa<'.a,use:'hleC,J ~ oear'e"'t! Cfll'\ ,ema" aII' L":.<I-v1 fa~afireaar-culde prebae)",:~"'o ~eriG~n:" ;"lO

lr'n"'--aoeo'anotP,"l~!o1,at'~(+"l

spre afişare pagina a doua.Este evident că soluţia aleasă îmbună-

tăţeşte lizibilitatea paginii. Se observă căfuncţia "hili" găseşte toate apariţiile şiru-lui de căutat în titlu.

Urmărind câţiva paşi succesivi amputut adăuga site-ului nostru funcţii decăutare în titlurile publicaţiilor.

O altă aplica ţie a aceleiaşi tehnici, dedata aceasta automată, este includereaunor noutăţi pe diverse pagini.

În principiu şi în acest caz se pro-cedează în paşi:~ se crează în baza de date "chip" un

Cu O functie PHP listele devin atractive,Listele care conţin rezultatele căutări lor cugreu pot fi făcute atractive. Totuşi, prin uti-lizarea funcţiei PHP de mai jos veţi puteaobţine liste mai aspectuoase, prin adău-garea efectului de highlight pe şirul decăutare.

<?php/* functie pentru efectul highlight Sx estesirul de caractere, Svareste textul care semarcheaza cu highlight */function hili(Sx,Svar, $bgcolor='yellow'){

if (Svar !=,,")($xtemp = ,,";$i=O;while($i<strlen($x»){

if({(Si+ strlen(Svar))<= strlen($x))&&

(strcasecmp(Svar,substr($x, Si, strlen($var)))

== O)) (

$xtemp .= ,,<spanstyle=\"background-color:Sbgcolor\">". substr(Sx, Si , strlen(Svar» .,,</span>";

$i += strlen($var);

else {Sxtemp .= $x{$i};Si++;

tabel "stiri". De exemplu acest tabel poateavea câmpurile: data_stire, categoria_stire, titlu_stire, rezumaCstire şi stire_extenso;~ în pagina în care se doreşte inserareaştirilor (se poate stabili funcţie de layoutnumărul de ştiri care se inserează) seplasează un script care accesează baza dedate (selectia se va face pe categoria_stireşi ordonarea descendentă pe data_stire -pentru ca ultima ştire să fie afişată primaîn fereastra browser-ului);~ se inserează rezumatul_stirii urmat deun link (de regulă cu textul "detalii ...")către un nou script (unic pentru tot site-ul) care afişează ştirea completă (stire_extenso);~ se pot folosi imagini (recomandabil)care să însoţească stirile, care este depreferat să fie păstrate în directoare sepa-rate. În baza de date este bine să gestion-aţi numai căile şi numele imaginilor, farăa încorpora imagini în înregistrările dintabelul "stiri".

Având deja un exemplu detaliat, reali-zarea includerii ştirilor în paginile site-ului nu mai reprezină un obstacol. Cuajutorul bazei de date MySQL şi folosindcomenzile PHP din acest articol am im-plementat o caracteristică dinamică site-ului, acesta fiind astfel mai atrăgător, iarinformaţiile mai uşor de găsit. Teoretic, înurma acestor operaţii ne putem aştepta lao creştere a numărului vizitatorilor.

PROGRAME - APLICAŢII GRATUITE

Utilitare gratuite pentrudesign ş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

Materialul de faţă se vrea a fi mai multo serie de ponturi referitoare laaplicaţii pe care le-am întâlnit,

folosit şi apreciat. Desigur, unul dintrecriteriile de selecţie a fost şi gratuitateaacestor programe, fiind vorba de freewareşi cel mult donationware. În speranţa căvă veţi găsi câteva puncte de referinţăinteresante citind acest material, vă lăsămsă exploraţi propunerile noastre.

Mantis Sug TrackerPentru programatori, poate cea mai ne-plăcută parte a muncii reprezintă rezol-varea bug-urilor sau aplicarea unor co-recţii, după dorinţele clientului. Dacă e-mail-ul, fişierele Excel şi capturile deecran sunt o soluţie pentru comunicarea

problemelor apărute cu un program, pemăsură ce anvergura proiectului creşte,astfel de mijloace de comunicare sunt maimult o corvoadă. Aşadar, intră în scenăaplicaţiile speciale de raportare şi urmă-rire a bug-urilor.

Mantis Bug Tracker este o astfel deaplicaţie web, care capătă recomandareanoastră. În primul rând, ne-a plăcut inter-faţa simplă şi cuprinzătoare, modul deadministrare, raportare şi etichetare aincidentelor, dar şi posibilităţile de comu-nicare oferite. Bunăoară, un freelancersau o companie care lucrează constant laanumite proiecte pot folosi Mantis pentrucentralizarea comunicării, oferind accesweb clienţilor, pe baza unul nume de uti-lizator şi a unei parole. Dacă în sistemul

Mantis sunt cuprinse numeroase proiectediferite, producătorul poate furniza con-turi de utilizator pentru fiecare client înparte, cu drepturi de acces limitate la pro-iectele care îl privesc pe acel client. Înplus, sistemul de sortare şi raportare aincidentelor se dovedeşte a fi unul atât desimplu sau complex pe cât doreşte utiliza-torul. Absolut toate laturile acestei apli-caţii web sunt complet personalizabile, dela aspect până la funcţionalitate şi chiarnivelul de securitate.

Scrisă în PHP, aplicaţia Mantis func-ţionează perfect cu MySQL, MS SQL,PostgreSQL, rulând pe un server web caApache. De asemenea, poate fi accesatăprin aproape orice navigator web. Vor-bind de flexibilitate, modulul MantisCon-

V1ewlnglssueSlmpleOetitlls[

10 e.legOl)/

00710 [~ReporlsJ s...~yal Runllme

R'pol1er Jktluy

AsslgnedTo

Priori!)' non'M!

StatllS UkflOlMedS~

Summary 00710 SUM'yol pmi:lrms _":ilidalions (Ifl hiddel'l (1'lCsI'lilClp.'ejllranchll'lg quesllClfI$

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 lvnoeysliMperiorms 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.,tin no lon{jelne I~ field beca~e they Chi~ ItI~r wlect;on on tlle queSlion tMI atlNalet! !Illl text 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

AddtllonalInfom'lll:t1on

Tap Nola~ ~Iached

Browur

O.tabase!DB.Vers/on

OptratingSystem

PHPV,f$joll

8 Retation5hipt.

dUllliUleof

lelaltdlO

MANTISBUGTRACKER:Interfaţaideală de administrarea problemelor tehnice.

UDB, Sybase, Informix, PostgreSQL şiMySQL, având multe opţiuni de formatare.

Cele două variante disponibile suntuna online (complet sigură, deoarecenicio linie de cod SQL nu este transferatăpe internet, ci formatarea se face local) şiuna desktop. Scrisă pentru medii Java şi.NET, SQLinForm poate rula din majori-tatea browser-elor fară nicio problemă.Aparent aplicaţia online a ajuns la perfor-manţa de a formata în jur de 1.500.000 delinii de cod, fară nicio problemă, aşadarmerită să aruncaţi o privire asupra vari-antei online. Noua versiune desktop va fidisponibilă de la începutul lunii martie aacestui an.

nect permite integrarea Mantis cu apli-caţii .NET, Java, Cocoa, Eclipse şi Nant.Accesibilitatea merge până la oferirea desuport WAP, astfel că MantisWAP poatefi rulat pe telefoane mobile şi PDA-uri.Sunt oferite chiar şi module de migrare depe un alt sistem de raportare a bug-urilor(precum Bugzilla sau GNATs) pe platfor-ma Mantis.

Pe scurt, putem spune că Mantis esteinterfaţa ideală de comunicare între pro-gramatori, testeri şi clienţi, asigurând unworkf1ow complet pentru fiecare inci-dent, iar mijloacele de comunicare, admi-nistrare şi integrare oferă atât strictul ne-cesar şi simplitate, dar şi un potenţialimens, în funcţie de preferinţele fiecăruiutilizator. Manualul disponibil SQ!.,inFormpe website este excelent, Iămu- '";;::::':'~;';;::':;;~;:~:~:'~:~;;:;;:':;;::;.~.;;;::'.~._•.~~."rind toate neclarităţile pe carele-aţi putea avea, mai devremesau mai târziu.Info: www.mantisbt.org

SQLinFormDacă nu vă place să pierdeţi multtimp cu formatarea codului SQL("muncă de chinez bătrân") veţiaprecia cu siguranţă aplicaţiaSQLinForm. Aceasta formateazăcorect liniile de cod SQL incom-plete sau cu erori de sintaxă.Oferă suport pentru toate for-matele majore de baze de date, caORACLE, SQL Server, DB2 /

,..•.''" unour••••• _,,,,~,,,,,,,,._'->.u .••••• _-' .•••<nt'_I"',~"..",••__"-,.,,.,", •••• '-'

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

_, ••••.••• c ••• ,_" ••••• ".,"' •• ,_" •• ,, ••

""••••. -'-< .•'••.•,.__l_J'~' •. ,

BaseportalIată o aplica ţie web cel puţin interesantă.Funcţionează ca serviciu online, pe acelaşiprincipiu ca o căsuţă de e-mail (pagina deîntâmpinare aduce puţin cu cea folosităde Gmail), numai că oferă posibilitatea dea crea şi accesa de oriunde baze de date.Cu un sistem de asistenţă bine pus lapunct, Baseportal poate fi folosit cu succesşi de către incepători, pe când cei experi-mentaţi pot integra Baseportal cu propri-ile aplicaţii. Fie că doriţi să creaţi o bazăde date la care să aveţi acces de oriunde,fie că aveţi nevoie de o bază de date pen-tru a susţine o pagină web, serviciulonline în discuţie vă poate ajuta mult.Integrarea cu alte pagini web este facilă,motiv pentru care vă recomandăm căl-duros şi această aplicaţie.Info: http://baseportal.com/

'o'_'__ '_":.,;.,'::"=f;"" ~_

băsjj;:'~(;-'··-":)

ADrive betaAcest serviciu online ne-a atras atenţia,deoarece oferă gratuit posibilitatea de astoca până la 50 GB de date online, pecare le puteţi accesa de oriunde. Datelesunt protejate, oferindu-se chiar serviciide criptare şi posibilitatea de a accesa ver-siuni mai vechi ale fişierelor, mulţumitătehnologiei Snapshot. Pentru a puteafolosi ADrive, aveţi nevoie de un browserprecum Internet Explorer sau MozillaFirefox şi să permiteţi server-ului ADrivesă stocheze cookie-uri în navigatorul vos-tru. De asemenea, trebuie să-i autorizaţirularea Javascript-urilor şi să permiteţi in-stalarea controlului ActiveX. Nu în ulti-mul rând, rularea aplicaţiei necesită insta-larea JRE (Java Runtime Environment).Puteţi încărca mai multe directoare şifişiere simultan, care sunt scanate înaintede a fi acceptate pentru stocarea pe server.Momentan, cel mai mare fişier acceptatpoate fi de maxim 2 GB. Din păcate, în-cărcarea fişierelor prin FTP nu estepermisă, deocamdată. În schimb, puteţipartaja orice fişier doriţi prin utilizareafuncţiei Share, care va asocia fişierul res-pectiv cu My Shared Files. Acesta va putaefi descărcat de la adresa asociată acestuia

PROGRAME· APLICATII GRATUITE

A Drive

palit ~t"".9" ••@,."'..... Pol.,... tiM""" '>9kw_..,. (cmpy •..•.••"tor'", •.HU94 Oilcovnts 01'1T.p. &~d.up ."d .ute ••• dat.. G.t th. 1.t.Jt " •• :li, .•h.t.O.i~ •• t " •••••••••, 6mm. OLT. SCLT. onlin •. Set up .• b.ckup J ••.•• ". ~p.l"I, d'leUUlon th ••• dJ,AlT. LTO e. 1'010'.' Q' vie OU" .nd much mo' •.

'1 ~",." 1':"'

1<,•• 'intr". Arsh'v'nqCompl.te ILM fa. f,I •• K•• p'fQutfil •••• ~.tslim!

~ ",r.

de către oricine. Pe viitor, probabil că seva lucra şi la posibilitatea de accesare alegăturilor către fişierele partajate pe bazaunui nume de utilizator şi a unei parole,aspect esenţial din punctul nostru devedere. Oricum, dacă aveţi nevoie de multspaţiu de stocare online, deocamdatăADrive este cea mai bună soluţie gratuită.Info: www.adrive.com

Acest program serveşte la încărcarea şidescărcarea fişierelor pe şi de pe web-site-uri FTP. Nu costă nimic, fiind open-source, cu toate acestea reprezintă una din-tre cele mai solide soluţii de acest gen.Oferă posibilitatea de a lucra cu mai multetransferuri simultan, totodată puteţi navi-ga prin arborescenţa paginilor FTP chiar întimp ce transferaţi fişiere pe acestea, facili-tate care nu este oferită de multe alte pro-grame similare. Totodată, puteţi utilizauna dintre opţiunile de conectare securiza-tă, pentru a vă asigura că transferul nupoate fi interceptat. Una dintre facilităţileinedite este cea prin care puteţi regla viteza

maximă de lucru în funcţie de oră sau dată.Accesul rapid la conexiunile FTP se reali-zează prin Site Manager, pe de o parte, carepermite memorarea tuturor adreselor FTPmai importante şi prin QuickConnect,pentru conectarea rapidă la o nouă adresăFTP. Consumul de resurse este relativ scă-zut, Filezilla ocupând circa 50 MB în me-moria RAM. Se găseşte pe website-ul indi-cat mai jos, în variante Client şi Server, pri-ma disponibilă atât pentru Windows, cât şipentru Linux sau MacOS, în timp ce vari-anta Server rulează doar pe Windows.Aceasta din urmă este un server FTP carepoate rula folosind SSLşi TLS, oferind co-nexiuni criptate, sigure. Totodată, oferăposibilitatea de a comprima datele pe loc,pentru a câştiga viteze de transfer sporite,însă această comprimare poate generauneori şi erori de transfer.Info: http://fIlezilla-project.org/

Iată o altă aplicaţie bazată pe Java, carepermite crearea gratuită a unui albumfoto online. Necesită crearea unui cont,

după care puteţi începe să lucraţi în voie.Interfaţa este simplă, funcţionând bine cudrag&drop, iar aspectul albumelor poatefi personalizat folosind fie teme, la rândullor modificabile de către utilizator. Puteţide asemenea redimensiona, comenta şiroti imaginile, iar partajarea albumelorpoate pleca de la folosirea server-elor Jal-bum, fără a exclude şi plasarea albumelorcreate pe propriul server sau folosind unalt serviciu de găzduire, precum şi inte-grarea în alt website. Serviciul include şiun client FTP, cu un utilitar de sincroni-zare, iar compatibilitatea se extinde înprincipal asupra navigatoarelor mai răs-pândite, ca Internet Explorer, Firefox şiOpera. Suportul pentru limbi străine esteextins, JAlbum oferind posibilitatea de aintroduce text în 31 de limbi. De aseme-nea, puteţi include o arborescenţă com-plexă, ca şi fişiere non-imagine, care odatăincluse în album pot fi accesate printr-olegătură directă. În materie de descrieriale fişierelor, JAlbum este compatibil cuEXIF şi IPTC, informaţiile din acesterubrici putând fi extrase direct şi folositeîn albume. Totodată, puteţi integra filtrepe imagini, watermark-uri şi logo-uri.

Unii utilizatori vor fi încântaţi de posi-bilitatea de lucru în linie de comandă, ca-re facilitează automatizarea operaţiunilor.De asemenea, pot fi integrate oricâteextensii, prin intermediul scriptării înlimbajul BeanShell (asemănător cu Java),

Pe scurt, JAlbum oferă foarte multefacilităţi, fiind compatibilă cu orice plat-formă care poate rula mediul Java 1.4.Aplicaţia este complet gratuită şi "curată".Nu există adware, reclame sau spyware,dar donaţiile vor fi cu siguranţă apreciate.Info: http://jaIbum.net

Deja foarte răspândit, acest program deeditare grafică funcţionează, aşa cum in-dică şi numele, pe arhitectura .NET. Oferăo interfaţă uşor de învăţat, o sumedeniede reglaje, lucrul pe layer-e, efecte specia-

le, posibilităţi de desenare a unor elemen-te grafice de la zero şi multe altele. Deo-camdată, după parerea noastră, este infe-rior Gimp, însă cu toate acestea oferă niş-te facilităţi unice şi foarte utile, precum şiun istoric limitat doar de spaţiul disponi-bil pe disk, lucru foarte la îndemână pen-tru prelucrările complexe, de lungă dura-tă. Un alt element inedit este bara de sar-cini proprie. Aici, documentele deschiseapar ca registre diferite, însă navigarea în-tre acestea este cum nu se poate mai sim-plă, datorită funcţiei Live Thumbnails, ca-re permite navigarea între imagini prin-tr-un simplu clic pe o previzualizare mi-niaturală ce substituie obişnuita şi uneoriconfuza denumire. Deşi există destul locpentru îmbunătăţiri, nu putem refuza sta-tutul de aplica ţie recomandabilă celorcare se ocupă cu web design-ul, categoriede utilizatori pentru care funcţiile oferitede Paint.NET se vor dovedi a fi de obiceisuficiente şi foarte la îndemână.Info: www.getpaint.net

Pentru cei care caută o alternativă gratuităla programe ca Dreamweaver, editorulHTML Nvu poate reprezenta soluţia ideală.Proiectul se bazează pe codul aplicaţieiMozilla Composer. Ideea din spatele apli-caţiei este eficienţa şi simplitatea, Nvurenunţând la funcţiile cvasi-inutle regăsiteîn programe similare comerciale. Începă-torii se pot obişnui uşor cu modul de lucruşi pot chiar găsi o soluţie completă în acestprogram - pe lângă funcţiile de editare şidiversele moduri de vizualizare (normal,HTML Tags, Source şi Preview), suntincluse şi un editor CSS, alături de unmodul de administrare a paginilor web.Desigur, sunt oferite şi machete (templates)şi chiar un generator de cuprins, alături declientul FTP înglobat. Disponibilitatea apli-caţiei se extinde asupra sistemelor de ope-rare Microsoft, a distribuţiilor Linux pre-cum şi a sistemelor de operare Apple.Info: http://nvudev.com/index.php

Nvu

Ne-au mai plăcut...

Creaţiile lui David Pyeo serie de programe freeware, fără mm:llI

. . .. I '1' (d -= 1t"'l\~( JI\l).i,rl'lţjl!il4l'.!>"'~ ..\ 'l>"JI ••• ~~'(.cxnlclorestncţle autllzare upăcum __= ~.•..•..•.I!<,.'~'-\-t."''''''~~iI<:~'':'~::O:'~-:.(»::aspune autorul, pe jumătate În serios, '::: : , ':. 1:r!ii ..•••. "il ~ • ; 11 Il IrW r;,lJl!of."- ClIMllll:l~2~~~~~·Q6W~I~.a.~~~~~.~w •••~pe jumătate În glumă, În afară de::::: 11of.~W••.•.... Q " •••• ,"'2>1lI •• ' ••• S~;5~ •••obligaţia de a-i informa şi pe ''2 'r"'ldlb!lI6~.;j"'olll.,:t9ţ;)JiJ-,:;)"."".1ăl1ll-~"••~••B~.a~"~J~."~.~~~~.N.~cunoscuţii care au nevoie de aceste ::::: "lJI •.•• lIIlJlJI"'•• jj.,)lII.(\ •.•• r."*'r."IH~l!l""Programe). Dezvoltate În timpul .=Ji". •• ""i!Io \li'/! .,:.~ 'lIIe.Qlţ\."e.e!!l~"t>~""~.~ ~~~~~M~S~bS .P9W96~_Q~~",~~liber de David Pye, acestea au cele _::: .\JIlS=~~"' •• iJ.01ttdl\ ••l1J.II"tA'lr.!."":!lfllll.1mai diverse Întrebuinţări, precum ,.:::: !l'.&.•~(lt;.i".I!>.!'>IIll"'" wealUI o ,

eliminarea completă a coduluiHTML sau a codului Javascript dintr-o pagină (HTML Stripper), dar şi colecţii de Javascript-uri(Javascript Vault), animaţii GIF (GIF Vault), animaţii şi grafică web (Web Graphic AnimationVault şi Web Graphic Vault), foarte utile când timpul vă presează. Accesaţi legătura când aveţitimp, cu siguranţă veţi descoperi o sumedenie de lucruri utile acolo.

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

~-_..:_- I..,,~...._ .•.•.•_ ..-"'"_._~,-, • I ,

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

Aplicaţie de analizare a jurnalului deaccesare a paginilor web. Oferă informaţiistatistice despre activitate, fişierele acce-sate, traseele parcurse pe pagina web,legăturile care au condus vizitatorii pepagina analizată şi multe altele. Raportuleste predat în format HTML, incluzândatât tabele cât şi grafice. Este compatibilcu server-ele web Apache şi lIS. Dinpăcate, nu este complet gratuit, însă l-aminclus deoarece considerăm că merităvăzut şi folosit, chiar şi numai pe duratacelor 30 de zile de funcţionare a varianteidemonstrative.Info: http://weblogexpert.comI'...

r-'.'...-=:------- .....•__ -1_-1__ o,_-1_-1

Aplicaţiile gratuite IconicoPe această pagină web, veţi găsi categorie FreeTools, unde săIăşluiesc o serie de utilitare gratuite,precum:ColorPic - un instrument de indentificare a culorilorcu o lupă incorporată, folositor pe monitoarele deÎnaltă rezoluţie, care afişează culorile atât În valoriRGB, cod hex şi zecimal cât şi În procente CMYK şiCSE HTML Validator Lite - un instrument excelentpentru validarea codului HTML.

Info: www.iconico.com

Dacă aveţi probleme în alegerea combi-naţiilor potrivite de culori, tot ce trebuiesă faceţi este să accesaţi legătura oferită denoi mai jos. Pe baza unei culori furnizatăde voi, aplicaţia gratuită Color Wizard văva furniza toate seturile de nuanţe com-plementare, analogice, variaţii precum şiseturi a câte trei, patru sau chiar şase cu-lori pe care le puteţi folosi împreună peun website. De un real folos pentru obţi-nerea unei scheme de culori echilibrate şiestetice.Info: www.colorsontheweb.com/

colorwizard.asp

........•..•.•....-_.- "JfnD

.,"'"..,~ .•.•...-.-ii ii ii•••.- ..... -

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

Decele mai multe ori, o pagină web va figăzduită pe server-ul unui furnizorspecializat, singura preocupare a

designerilor şi a programatorilor fiindaspectul, conţinutul şi funcţionalitateapaginii / aplicaţiei respective. Există însăanumite situaţii în care veţi dori rulareaunei aplicaţii client-server oriunde şioricând. Pentru ca aceasta să ruleze corectînsă, pe calculatorul folosit trebuie să aveţiacces la Apache, PHP, SQL şi eventualPer!. Soluţia? O aplicaţie care să poată rulaca server, fară instalare şi care să poatăsusţine o mare varietate de aplicaţii.

Server2Go este o astfel de soluţie, carepoate fi rulată în mod direct de pe un discoptic (CD, DVD), un stick USB sau unhard disk, fară instalare. Beneficiaţi astfelde un server web (bazat pe Apache) plin de

facilităţi, printre care suportul pentru PHP5, baze de date SQLite, MySQL 5, extensiiPHP şi Per! 5.8.

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

latest version: 5.1.1011Wh~t's new I Fe~ture list I Corr,p"re edltlons IUpQfade ta Yţrslon 5.1

Watch the ",Ideo »

Flash mO •...I!;' (2.0MB, sound required) or HTtI\L tour (200KB)

Your very QWnfull-text search engine

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

Simple, powerful, and flexible

• Easy te use and install, up and running in minutes• No advertisin9, no annual fees• No scripting knowledge or editing reQuired• Ne complicated database setup procedure• Ne extern al web service required• Highly configura bie• Search static and dynamic web pages (.HTML, .PHP, ASP•. eF. etc.)

» Take the tourSee how Zoom ~n add search to yourwebsite in CI matter of minutes

MOTORDECĂUTARE.Aplicaţia Zoom Search Engine poate fi integrată perfect cu Server2Go,pentru asigurarea unei interfeţe de căutare. Mai multe detalii la adresawww.wrensoft.com/zoom/support/cgicd.htm I

Server2Go a fost creat pentru a înlocuiprograme asemănătoare, precumWampOnCD, deoarece acestea fie nu erauactualizate suficient de des, fie aveaulacune destul de mari în suportul pe care îlofereau. Astfel, pachetul oferit de TimoHaberkern se bazează pe WAMPP. Licenţaeste donationware, însemnând că poate fifolosit gratuit, dar că totodată nu ar stricasă faceţi o donaţie în cazul în care îl folosiţiintens sau în scopuri comerciale.

Mic, dar deştept!Practic vorbind, utilizatorii acestei aplicaţiise vor bucura de tot ce oferă pachetulWAMPP:~ suport pentru Apache l.3.x, 2.0.x şi 2.2.x;~ suport pentru PHP 5.2.x cu extensii, ală-turi de posibilitatea de a folosi versiunile4.4.x şi 5.0.x;~ suport MySQL 5;~ suport Per! 5.8 (multe module CPANintegrate);~ suport pentru integrarea cu sistemeleopen-source de management al conţinutu-lui Joomla! şi Contrexx.

Desigur, pe lângă aceste facilităţi, inter-vin funcţiile Server2Go. Bunăoară, apli-

caţia se adaptează la mediul în care este. rulată, detectând automat porturi libere

pentru Apache şi MySQL, setările proxy şiconfigurând automat Apache, PHP şiMySQL în funcţie de împrejurări. Desigur,poate fi configurat astfel încât să utilizezesetările prevăzute de către programator.

Mai mult, Server2Go funcţionează per-fect şi pe medii read-only, precum CD-Rsau DVD-R. Server-ul pornit automat lainserarea discului nu este vizibil de cătreutilizator, autorun-ul lansând automatnavigatorul web, conectat la hostname-ulşi portul stabilite prin autodetecţie. Laînchiderea navigatorului web, serverul seopreşte automat.

De asemenea, baza de date poate fifolosită direct de pe CD-ROM sau princopierea temporară pe calculatorul gazdă.Aceste trăsături fac programul potrivitpentru realizarea unor discuri deprezentare, ce pot fi distribuite şi utilizatefară nicio problemă pe majoritatea sis-temelor.

Unde poate fi rulat?Ca şi compatibilitate, deocamdată suportulse extinde asupra sistemelor de operareWindows 98, Windows MilleniumEdition, XP, 2000 şi Vista (pe acesta dinurmă fiind necesare drepturi de adminis-trare). În curând, va fi integrat complet şisuportul pentru MacOS, lucru îmbucură-tor.

Navigatoarele web cunoscute deServer2Go sunt Internet Explorer 6 şi 7,Mozilla Firefox, Safari şi Camino, alăturide cele care pot fi integrate pe CD, alăturide aplicaţie (Simple Browser, Discstarter,Portable Firefox). Cu alte cuvinte, autono-mia aplicaţiei este remarcabilă, nefiindnevoie cu adevărat decât de un sistem deoperare compatibil.

Pe viitor ..•Dezvoltarea versiunilor următoare includo serie de noi facilităţi cu adevărat intere-sante, dintre care amintim suportul 100%pentru Vista (momentan necesită drep-turile de administrator), pentru MacOS X(aflat încă în fază beta), suport integralpentru PortableFirefox, Lightttp, JSP(Tomcat), GIF-uri animate în ecranul depornire, recopierea bazei de date plasatelocal pe mediul de stocare Server2Go(funcţie excelentă de exemplu pentru uti-lizarea unor aplicaţii web de administrareşi contabilitate de pe stick), suport pentruPython, Firebird, Ruby on Rails şi Opera.

Instalarea Server2Go

IIServer2Go 1

~,,~!!1!~~_~,!!!!!!!!I',~-~<~ ••

~~\OOCIA'l'e'tln5e ...\sesvef2g0_a2...P1mP.zip 1

_"" 1%1~:!!'!!!!~:5!!!!!!!'!!!!!!!!'!!!!!!!!!!!!!!!!!!IJ

00:00:2010002'.14

~I~-8"""'-ound-~1 P.... I__ c....,_oI __ I~~

~---~.:I .•-=, 0°1Q."I'lOtLIllI:Mf«. ••• rMl..11lll _

-0;)- ..J'".~~ ....J~

weo-bol ...J--...J<idt ...J"

..J"'I'«lI ~~U~ ••••• ...J-u_Zoo :,j1t.tCnl>.rl

;.Jdh llgcJc:U.dI4..,jhldoc. loQo.io>

• j;:;;oCL»s-1I.6 ~;:;:''':''''u- ~::~nt-~

, ..•...1.779a1ftoflll... 11.0UD.(.~"'settng ...

Il'llFtel'<ll..11.0920. .. C.~wSotMcl.··1261:8 Aokt .• 11.092':1... C~_Soa:h;I .l'I1IF1tfd. .. 17.0920.•. C'~""'SltmQ .

IlIOlll Flefd 17.0\1,20..• C\D<Io:UI>erUrd5oC:tltlQ•••285.6640ftofd 170\120... C,~_5iItlnl ..

l~~l JO.05.:?lI.. C··'O"N•••.(•• <'d~ ••

1.6U1I11~,04,(l5.ZO'c~..,~ ...SOO1ltrl••••.. l·Il8.211C.~..,5etln;. ..

~:~~:.~:::~:=::=:::$6<0 "«11<•... 1709·lO .. C'\DOatnOnlSrd5ettrq .••

I~S ~'ltf .. nll8.l0... c.\Docu'NrU.nl5eltn;Jl1r:slrl_,.1'0ll.i'O .. C·~an:lsettn;l".

6e tdt ib'r a-der ~as ~ ~ t\etl

~L.1il'> ~ ,-'t:"J..);)~

~,.."., lS01_0v0ffoditl) rso~

f T_ ,-

1"" """ "",",'''''''''

~iia P..eodl

'"'" 1/1S~ ~.41155'OKB/;l

r=------.;-;;;;---"o;;;"';;;·"'::;~.---,·;;:;--=s ••••;;;:------?IO"[ERD'.'tI~rtV lde fl-"l

r~ •••Ibon~pc"""o-r~"'_d!t6

Cu această listă impresionantă defacilităţi deja disponibile sau care vor fiintroduse în viitorul apropiat, Server2Goeste, spunem noi, cea mai potrivitămetodă de a rula aplicaţii web de pe unmediu portabil de stocare, mai ales căTimo Haberkern este deschis discuţiilorîn legătură cu cele mai diverse implemen-tări. Astfel, Server2Go, aplicaţie deja fle-

Fiind vorba de o aplicaţie cu ungrad mare de autonomie, de laprocurarea la punerea În funcţi-une a acesteia sunt doar câţivapaşi simpli:

DAccesaţi pagina web www.server2go-web.de/ down load/download.html. Alegeţi şi descăr-caţi unul dintre pacheteledisponibile. Acestea sunt demărimi şi configuraţii diferite, Înfuncţie de necesităţile dumneav-oastră.

f] Dezarhivaţi aplicaţia Într-undirector. Tot conţinutul adăugatde voi (script-uri PHP, imagini,pagini HTML) trebuie plasat Îndirectorul htdocs, cu excepţiabazelor de date, care vor fiplasate În directorul dbdir.Fişierele de configurare suntpms_config.ini (pentr Server2Go)şi celelalte fişiere obişnuite afe-rente Apache, PHPşi MySQL.

EJ Configuraţi aplicaţia dum-neavoastră web să ruleze corectprin Server2Go şi asiguraţi-vă cătoate fişierele necesare se găsescplasate corespunzător În direc-torul pachetului descărcat de peinternet. Verificaţi Încă o datădacă totul funcţionează cumv-aţi dori şi faceţi ultimele setărinecesare. Pregătiţi fişierele pen-tru scriere pe un disc optic, astfelÎncât rădăcina Server2Go (undegăsiţi fişierele autorun.inf şiServer2Go.exe) să coincidă curădăcina discului. Aveţi nevoie deminim cinci elemente Înrădăcină: fişierele Server2Go.exe,pms_config.ini, autorun.inf şidirectoarele server şi htdocs(Împreună cu Întreg conţinutulacestora).

~ Inscripţionaţi discul şi faceţi overificare. De acum, odată ceintroduceţi discul Într-un sistemcompatibil, vă veţi putea bucurade aplicaţia creată, acum com-plet independentă de pachetulsoftware de pe PC-ulgazdă!

xibilă, poate fi facut să funcţioneze cumajoritatea tehnologiilor care vă trec princap. Este o idee excelentă să-I folosiţi pen-tru a vă crea un disc de portofoliu cu de-monstraţii ale tehnologiilor şi aplicaţiilorproiectate de dumneavoastră. Varianta1.5.1.0 se găseşte şi pe CD-ul CHIPSpecial, în secţiunea Servere. Spor la pro-gramat!

Mai multe despre WAMPServer2Go nu este însă unicul pachet desoftware ce oferă posibilitatea de rulare aunui server web, ci face parte dintr-o fa-milie software denumită WAMP. Acro-nimul se referă la "Windows, Apache,MySQL, PHP" şi este înrudit cu LAMP(unde L semnifică un alt sistem de oper-are, anume Linux). Prin asocierea celorpatru programe antemenţionate, WAMPoferă o platformă care în ultimii trei ani adevenit foarte populară. Există o varietatelargă de distribuţii WAMP.

Tabelul alăturat oferă o sinoptică acelor mai populare 27 de pachete cu dis-tribuţii WAMP (sursa fiind Wikipediahttp:// en.wikipedia.org/wiki/Comparison_oLWAMPs)

O privire mai atentă asupra tabeluluine permite să facem câteva observaţii:~ există o preocupare susţinută în dez-voltarea unor asemenea pachete de dis-tribuţie pentru Windows;~ 14 din cele 27 pachete de distribuţie aulicenţa GPL (GNU General Public License- este o licenţă de distribuire liberă a pro-gramelor de calculator);~ serverul de web httpd este Apache, cudouă excepţii;~ toate pachetele de distribuţie au încor-porate PHP şi MySQL;~ administrarea MySQL se face cuphpMyAdmin, cu trei excepţii;

tre aceste pa-chete de dis-tribuţie au fostincluse pe CD:EasyPHP,phpdev, Uni-form Server,WampSrever,Web-Deve-loper ServerSuite, WOS-Portable şiXAMPP, ală-turi de Ser-ver2Go.

Dintre toa-te pacheteledin tabel,XAMPP estesingurul careoferă distribu- COMPLET: XAMPPconţine printre altele şi serverulFTPFilezilla.ţii pentru celemai răspândite sisteme de operare: Linux,Windows, Mac OS X şi Solaris. Altfelspus, XAMPP este cross-platform.

Service... II__S_C_M_.,_,_

rModules--

~ Svc Apache

I~ Svc

O Svc

O c

I StatusStop II Admin.. , I I RefreshStop II Admin.. , I I Explore ...Start II Admin ,1 I HelpStart II Admir I

1 Exit

~b~PP Cont~ol Panel Ve~sion 2.5 (9. May, 2007)Windo~s 5.1 Build 2600 Platfo~m 2 Se~vice Pack 2Cu~~ent Di~ecto~y: f:\xamppInstall Di~ecto~y: f:\xamppStatus Check OR

Ce conţine XAMPP?XAMPP este un server web complet.Pachetul XAMPP are două distribuţii,una completă şi alta care oferă doarfuncţionalitatea de bază.

Distribuţia "uşoară" conţine PHP,

CongnwlltlorlJ:You WC(U,fuU~ if'IstJHed XAHPP lin mis S'('lUml

NOwyO!o GIt' Start 1.o~..o",*,,"'llnlc.o rIl"SU1'fD.. ~1dt,.., ·SI<1tl.lS,.onltl<ltlt o~'"'to/fiM ~ t'le'"fUWQ"cru llr~

MySQL, Apache şi Peri (în variantăredusă), alături de phpMyAdmin pentruadministrare. Permite mod3uth subMySQL, o soluţie interesantă de securitate.

Distribuţia completă oferă în plus bi-blioteca SSL(Secure Socket Layer - proto-col de securizare a schimbului de infor-maţii pe internet) şi aplicaţii ca Webalizer- analizarea traficului pe website, Mercury- un server de transport a mail-ului,JpGraph - bibliotecă pentru crearea degrafice 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 procuradirect de pe internet. Una dintre adreseleunde veţi găsi ultima versiune estehttp://sourceforge.net/ projects/xam pp/,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 deconfigurare a serverului. XAMPP areinstrumente de verificare a instalării şi decontrol a securităţii componentelor.După instalare, XAMPP oferă un panoude control. De aici se pot activa şi dezacti-va componente (servicii) XAMPP.

Server-ul instalat poate fi apelat dinorice navigator web, introducând adresahttp://localhost. Spaţiul accesibil naviga-torului se regăseşte în subdirectorulIhtdocs, subordonat directorului de insta-lare XAMPP. Prin copierea în /htdocs adirectoarelor Isurselphp-div-css-js şiIsurse/php-mysql-div-css-js de pe CD veţiputea vedea exemplele în lucru.

Data Mărime Server phpM- SQLite OptimizarePachet 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.2Swissknife 05.06

Apache2 2006.2.7-pI21.5.4 95.8 GPL 2.2 5.1.2 5.0.18 2.8.15 0.9.8a 2.2 2.0.1 2.6.2

Triad 02.20

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

02.20 cută

AutoSet2007. donation-

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.012.16 ware

2006. necunos-Denwer Base 3.1 1.3.33 4.4.3 4.1.16 2.6.1 - - - - -

10.04 cută

2.0b12006.

EasyPHP 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

fvpatwds2006.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-dev5.1 GPL 2.2.8 5.1.22-rc 2.11.4 - - - - -

WAMP 5.3.0 01.20

Ughty2Go2007. LightTPD/

(integrat)(MiniPerl/1.2 69.6 GPL 5.2.5 5.0.50 2.11.2.2 - 0.9.8g -

12.11 1.4.18 CGI)

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

03.24

Net5erver2005. necunos-

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ă

PAMPA2008.

0.6 11 GPL 2.2.6 5.2.5 5.0.45 2.11.3 - 0.98e - - -01.02

phpdev2007. necunos·

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 5.2.3,4.4.7 5.0.41 2.10.3 - - - CGI Peri 5.8 -

09.14 restricţii) 1.3.35

SNAW2007.

0.1.1 - CeCILL 2.2.4 5.2.3 5.0.41 2.11.1 - - - - -09.23

Spike1.0 beta

2007. eAcceleratorsour~ 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

VertrigoServ2007.

2.19 9.6 GPL 2.0.61 5.2.3 5.0.45 2.11.2.2 1.2.0 - - - 3.3.012.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.1WAMP5) 11.21

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

Server Suite 11.10

WITSuite2007.

comercială1.0 1.0 2.2.6 5.2.5,4.4.7 5.0.45 2.11.2.2 - - - - -12.19

WLMP2007. LightTPD/

(integrat)(MiniPerl/C1.1.5 14.3 GPL 5.2.5 5.0.50 2.11.2.2 - 0.9.8g -

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

XAMPP2007.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.012.24 ,

ZendCore2007. GPL/

2.5 40.6 2.2.4 5.2.4 5.0.27 2.10.0.2 - 0.9.8e - - 3.3.010.09 comercială

PROGRAME· GIMP 2.4.2

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

t2S0 !

RectMQle Select

Mod.,-

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

Procesare gratuită deimagini pentru webDacă 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 LicherdopolA

Inorice domeniu în care se impuneeditarea imaginilor de tip raster (nevec-toriale, bazate pe pixeli), Adobe deţine

supremaţia, oferind Photoshop, de departecea mai capabilă aplicaţie de acest fel.Posibilităţile de utilizare sunt aproapenelimitate. Nu toată lumea îşi doreşte saupermite însă cheltuiala - pentru aceste ca-tegorii, propunem probabil cel mai popu-lar editor grafic gratuit - GIMP. În de-cursul mai multor ani, GIMP a suferit îm-bunătăţiri enorme faţă de variantele incipi-ente. Se poate spune că versiunile de actu-alitate (2+) oferă aproape tot ce şi-ar puteadori un utilizator. Cu atât mai mult încazul activităţilor ca web design-ul, pentrucare GIMP oferă un suport deosebit.Totodată, se găsesc extensii care simplificăfoarte mult lucrurile, însă acestea sunt din

păcate deloc sau pUţin accesibile pentruvarianta de Windows (lucru deloc sur-prinzător de altfel). Chiar şi fară acestea, văputeţi face treaba fară probleme cu GIMP.

GIMP nu muşcă!La primul contact cu "lupuşorul", s-arputea să fiţi puţin speriaţi de interfaţă.Pornind programul, veţi constata că nuexistă niciun spaţiu de lucru în sensul încare v-a obişnuit poate Photoshop - şi nicimeniuri. Orice funcţie apelaţi, aceasta se vadeschide ca o nouă sarcină Windows(portarea nu a luat în calcul obişnuinţa uti-lizatorului tipic de Windows ca fiecareaplicaţie să aibă un spaţiu de lucru şi unmeniu evidente chiar de la pornire şi săpoată lucra ca sarcină unică, indiferent cefuncţii apelează), lucru care poate fi frus-

trant, dar peste care totuşi se poate trece cuuşurinţă.

Odată ce deschideţi sau creaţi un docu-ment, apare spaţiul de lucru cu respectivuldocument, constând într-o fereastră sepa-rată, cu o bară de meniu consistentă (toto-dată utilă şi cuprinzătoare, după cum veţidescoperi). Mai mult, cu un clic dreapta demouse pe suprafaţa de lucru, aveţi accesrapid la toate funcţiile şi meniurile impor-tante.

Revenind la mica fereastră cu instrumentecare vă întâmpină la pornire, veţi remarcaîn partea inferioară un spaţiu gol, unde văeste indicat că puteţi integra orice fereastrăde lucru independentă doriţi. Cu un dubluclic pe oricare dintre instrumente, veţi

deschide o fereastră cu setări. Trăgânddenumirea funcţiei (aflată imediat sub barade titlu a ferestrei) în acel spaţiu, veţi con-stata că aceasta "se lipeşte" acolo. Desigur,în funcţie de instrumentul selectat, meniulproaspăt anexat în partea de jos se va mo-difica. Puteţi folosi mica săgeată aflată încolţul din dreapta sus al ferestrei deschise /spaţiului de andocare pentru a adăuga noiregistre cu funcţii, pentru a detaşa funcţiaselectată sau pentru a administra setărilefacute instrumentelor (lucru deosebit deutil şi accesibil). Astfel, ceea ce părea laînceput puţin şi confuz poate fi organizatcu mare uşurinţă în orice configuraţie vătrece prin minte. Confortul devine maxim,iar controlul oferit este total.

Totul la degetul micDacă tot am vorbit mai devreme desprefereastra cu spaţiul de lucru şi cu bara demeniu, merită menţionat că acel clicdreapta pe suprafaţa de lucru care aducetoate meniurile în imediata apropiere apointer-ului, vă scuteşte atât de excursiileenervante prin meniuri tipice Photoshopcât şi de alternativa la acestea - memorareaunei liste interminabile de comenzi rapidedin taste. Dacă în teorie nu vi se pare prearelevant, câteva ore de practică vă vorconvinge de avantajele funcţiei. Aceasta cuatât mai mult cu cât şirul de meniuri încauză vă conduce atât către cele maiimportante funcţii şi setări, cât şi cătreorice instrument pe care aveţi nevoie să-Ifolosiţi la un moment dat, fară a deplasamouse-ul mai mult de trei-patru cen-timetri.

Arsenalul de instrumenteAm stabilit deja că GIMP este flexibil şicomod de utilizat, să vedem însă ce posibil-ităţi de lucru avem cu acesta. Când vinevorba de web, este clar că printre cele maiimportante instrumente se numără cele deselecţie, măsurare şi decupare, alături deposibilităţile de prelucrare a imaginilor şilucrul cu formatul acestora. Aici, progra-mul gratuit oferă absolut tot ce ar puteaavea nevoie un designer. Cele opt instru-mente de selecţie (inclusiv instrumentulPath), alături de multitudinea de opţiuniaferente acestora asigură izolarea oricăruielement cu un minim de efort, în funcţiede experienţa de lucru cu acestea. Nu toatelucrează la fel de bine ca şi cele dinPhotoshop (Scissors Select versus Magne-tic lasso), dar odată stăpânite, micile pro-bleme şi imperfecţiuni iniţiale dispar cu

totul. Este de remarcat preClzla instru-mentelor, lucru foarte important pentruweb, ca şi lucrul cu textul, în cazul de faţăfacil, fiind puse la dispoziţie o serie desetări foarte utile în acest domeniu. Măsu-rarea se face cu un instrument dedicat şi cuajutorul liniilor şi riglelor de ghidaj, toatecomplet personalizabile.

Layer-e şi imaginiUn alt aspect important este lucrul peaşa-numitele layere, "straturile" imaginii.GIMP adoptă o funcţie similară cu cea dinPhotoshop, atât ca utilizare, cât şi ca posi-bilităţi. Sigur că Adobe oferă mai multemoduri de a despica firul în patru, dar pen-tru ceea ce reprezintă procesarea ima-ginilor pentru web, aceste moduri supli-mentare sunt irelevante. Astfel, în GIMP sepot practica majoritatea tehnicilor de pre-lucrare folosite în Photoshop. Pentru pre-lucrarea foto, sunt puse la dispoziţie şi oserie de filtre, care în totalitatea lor întru-nesc mai mult decât un pachet esenţial(pentru designeri şi fotografi).

Optimizarea imaginilor pentru web estecum nu se poate mai simplă, oferindu-semulte opţiuni şi algoritmi de compresie,precum şi previzualizarea imaginii altăturide dimensiunea estimată a fişierului.Desigur, puteţi folosi toate formatele deimagini relevante pentru web şi chiarputeţi salva fişierul în format PSD, 100%compatibil cu Photoshop.

De luat În considerareÎn timp ce utilizatorii care au acces laPhotoshop şi cunosc această aplicaţie nuau niciun motiv să treacă la GIMP (acestlucru implicând dezobişnuirea parţială dePhotoshop şi învăţarea lui GIMP), cei careau nevoie de o soluţie gratuită, fie din prin-cipiu, fie datorită unor constrângeri finan-ciare, pot apela cu încredere la acesta.Trebuie menţionată că deşi există variantăde Windows, compatibilă inclusiv cuVista, am întâmpinat ocazional încetiniri şiblocări care nu se petrec dacă îl folosiţi peLinux. În acelaşi timp, varianta de Linuxpoate fi îmbogăţită cu tot felul de extensiiutile, multe dintre acestea neputând fi inte-grate cu uşurinţă sau deloc pe Windows.Un exemplu de extensie foarte utilă estePy-Slice, care generează automat un fişierHTML pe baza ghidajelor inserate înfişierul de imagine cu GIMP.

Din punct de vedere al documentaţiei,GIMP se bucură de un manual online binepus la punct, în completarea căruia vin

• ţ' ••. + <..• ,. •.• ClALJI.i..,;<I.. I. ..

~

FLEXIBIL: Ca multe alte programe, GIMPpermite aranjarea tuturor modulelor dupăbunul plac şi În mod independent, oferind toateinstrumentele necesare lucrului pentru web.

ACCESIBILITATE: Orice instrument sau funcţiedin GIMP pot fi accesate prin meniul contextual

din fereastra de lucru cu imaginile. Adiocălătoriilor către marginile spaţiului de lucru!

•.. _- ..... _ •.. - .... - ... --::. ~ ~.. t=o. re ••• _ _

•• t' •• A +••••. A

elA L'.' . ,----.-' "oS,.'" ,iJr

FUNCTIONALITATE EXTINSĂ: Utilizatorii de Linuxse bucură de prezenţa anumitor extensii utile,

precum Py-Slice. Aceasta ştie să generezeautomat un fişier HTML pe baza unui decupaj

dinGIMP.

multe alte documente publicate de utiliza-torii acestui program, alături de forum urilededicate.

Hi@@j Varianta de Windows poate fifolosită fară prea mari probleme şi limitări,cu atât mai mult cu cât calitatea şi vitezaportării a crescut mult şi va creşte în con-tinuare. Noi îl considerăm un editor graficcare oferă toate uneltele necesare lucruluipentru web şi îl recomandăm călduros, cumenţiunea că cei dispuşi să ruleze şi Linux(există multe distribuţii gratuite, idealepentru începători, precum Ubuntu) vor a-vea o serie de avantaje importante, pornindde la stabilitate şi terminând cu extensiile cese 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 paginileacestui articol. Savuraţi-Ie. Mihaela Dogaru

Imageshack.usexiste pe un server, legătura fiind facutăprin intermediul unui link, astfel încât fo-tografia să fie vizibilă. Cel mai uşor de pro-cedat în acest sens este prin intermediulserviciului online www.imageshacks.us.Acesta vă permite să încărcaţi pe serverulsău, gratuit, cu dimensiuni de până la 1

O pagină web nu este niciodată fma-lizată, iar aceasta pentru că dupăstructurare a site-ului vine rândul

muncii de fineţe şi apoi primele aşteptăriîn ceea ce priveşte magazinul online. Noivă arătăm toate punctele' în care maiputeţi face optimizări.

DPosta rea de imaginipe forumuri şi bloguriDoriţi să postaţi rapid o fotografie pe unforum sau un blog? Pentru majoritateamediilor de acest tip imaginea trebuie să

ImageShack

New to ImageShack' Cre-dte o p,.oflle or 5lideshow upIoad:(.' lmaQe r uri Î video r multlploader Î recorder

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

r restZernal}e' 320x240 (for websltes and email) ..:Jr femove si!ejresolution bar from ~

allowed: jpg jpeg png gif bmp tit tift swf < 1.5 megabytes.

a POSTARE OE IMAGINI: CU ajutorul imageshack.us puteţi posta sau Încărca gratuit pe

forumuri fotografii proprii.

MB. Şi mai bine este că înregistrarea pre-alabilă nu este necesară. Accesaţi pur şisimplu site-ul şi căutaţi imaginea cu aju-torul funcţiei Search. Un clic pe Host ittrimite imaginea. După încărcarea aces-teia, aveţi de ales între mai multe URL-uripentru fotografia dumneavoastră: acesteafac referire la un thumbnail accesibilprintr-un clic de mouse, la imagini adap-tate pentru anumite forum uri şi la ima-ginea în sine. Copiaţi aceste URL-uri şiintroduceţi-le în post sau pe pagina dum-neavoastră web. Imageshack recunoaşteurmătoarele formate de imagine: JPG,JPEG, GIF, TIF, TIFF, BMP, SWF şi PNG.Fotografiile în formatele "voluminoase"TIF, TIFF şi BMP sunt convertite automatde către software în imagini PNG. Puteţiîncărca astfel câte fotografii doriţi, cu con-diţia ca prin aceasta să nu lezaţi nicio lege(referitoare la dreptul de autor sau altele).

BComentarea coduluiLa scrierea codurilor trebuie să vă acor-daţi întotdeauna timp pentru a prevedeatextul sursă cu comentarii - astfel încât săputeţi şti şi peste câteva luni ce scop aveauanumite paragrafe. Modalitatea este dife-rită în cazul HTML şi CSS.

Un comentariu în cadrul unui fişierHTML începe cu <1- şi se termină cu ->:<1- textul mai trebuie prelucrat ->

HTML şi CSS

Ele ~<it ~iew ~y flooI:mao1<s ~ahool !001< tjeIp

.1 !!Itttp,II_.chip.ro/

Un comentariu în CSS începe cu /* şise termină cu */:/* stylesheet pentru paginile exemplifica-toare din CHIP Special */

La conceperea comentariilor, gân-diţi-vă că acestea nu sunt vizibile efectivîn fereastra browser-ului, dar că există întextul sursă şi că ele pot fi citite de fiecarevizitator.

11Testarea paginii webÎn mai multe browsere

HTML

Este foarte important să vizualizaţipaginile web abia create în browserediferite. şi când spunem acest lucru vărecomandăm să instalaţi programele denavigare Firefox sau Opera, dar puteţi fisiguri că acest mic efort va merita. Dacănu doriţi totuşi să faceţi noi instalări,alternativa este constituită de site-ulwww.browserpool.de. serviciu care are şio versiune în limba engleză, dar care nueste însă gratuit. în special atunci cândfolosiţi programări ar trebui să efectuaţiobligatoriu această verificare în mai multebrowsere. Profesioniştii îşi testeazăpaginile web chiar şi pe alte sisteme deoperare, pentru a vedea dacă aspectul şifuncţionalitatea acestora se păstrează.Pentru a vă asigura că site-ul dumnea-voastră "se vede bine" şi în alte browsere,codarea ar trebui facută conform standar-

dului W3C. Aceasta se face simplu,apelând la serviciul W3C Markup Valida-tion Service - http://w3.org.

HTMLSite-uri mai supleNumeroase editoare grafice HTML au oproblemă: acestea scriu comenzi sau ca-ractere inutile în codul HTML. Atuncicând converti ţi textele din Word înHTML aveţi aceeaşi problemă: codulHTML este inutil de mare. în ajutor aicivine editarea manuală, cel mai bine rea-lizată în Notepad. Acest utilitar deWindows nu introduce în codul HTMLalte caractere decât cele introduse dedumneavoastră. în cazul în care editoruldumneavoastră "What You See Is WhatYou Get" converteşte câteva spaţii pentrua obţine o structură frumoasă a codului,înlocuiţi spaţiile cu taburi. Au acelaşiefect, dar ocupă spaţiu mai puţin.

EILogoÎnaintea bookmark-uluiPentru ca vizitatorii paginii dumneavoas-tră web să o poată regăsi rapid şi pe viitor,în colecţia lor de bookmark-uri, vă puteţiafişa logo-ul site-ului înaintea URL-ului.Pentru aceasta, modificaţi-vă logo-ul ladimensiunea de 16 x 16 pixeli, cu 256 deculori. Folosiţi cel mai bine utilitarul gra-tuit IrfanView, care poate salva imagineaîn formatul ICO. Salvaţi acum logo-ulmicşorat ca favicon.ico şi stocaţi imagineaîn directorul principal al serverului dum-neavoastră de web - în bookmark-uri şi înbara de adrese apare imediat "noul" logoal paginii.

IrfanView

HTMLmProtejarea imaginilor la copiereOdată prezenţi în internet, nu este exclussă vă găsiţi la un moment dat pe alte pagi-ni web fotografiile şi elementele grafice lacare aţi lucrat atât de mult şi la care ţineţi.Foarte supărător. Există însă modalităţi,dacă nu de a împiedica, măcar de a facecât mai greu posibil furtul fotografiilorpostate online: încărcaţi imaginile dum-

.dm..'9

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

1cmplate 'lollsler Web Templal'"T~4! f'r'loNtet'webste t~e-s. flash t~es and «hei' procb:ts are teadyofl\ade: webdeslgl"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'neQatedowrioodWe ~ T~e."1onster .com do our best to PfO"tIde you V<"th web t~es desq'l t:J prerrunquolly.

Type: Css static fullpacka/JeItem: #18121Aut"", t!IQQOownlood" O

Type: (ss full site nash 8Item: '18126Authot: ~OowrO>ads, 1

$66 Puee'$2650 l.hlQue-Pl'l(e

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 tsWltf ta Gteecel

PrerrynT~'ti ProdJchon Te-.-r.noloqY la>p:hzi1 - .JJ;t 9rh, ZOO8

Tempk.teMonster ~ a re-orokJbor\aty, new produc.t.on tedrJO!oqy fhie offerngthev new eateq::wy rJ Premun Desql T~es.The HoIIday ISnot Qveţl . .J.dn••ţiţ 20CS Pn:eNed weekwt'l knowthe ~s oi Template1'o'(lnsl:~'s ChtIStmMlott~1. Lhque Pu::e

P;I MAGAZIN CU TEMPLATE: Pe TemplateMonster.com găsiţi designuri profesionale pentru

iii magazinul dumneavoastră online.

neavoastră într-un câmp tabelar, ca fun-dal. Câmpul trebuie să aibă exact dimen-siunea elementului grafic. Amplasaţiacum un GIF transparent de un pixel întabel, peste imaginea de fundal. Înmomentul în care "hoţul" va dori săstocheze imaginea pe hard disk-ul său, vafi foarte surprins să fi făcut rost de unsimplu GIF de un pixel. Dacă doreşteîntr-adevăr, el poate ajunge la imagineade fundal, prin intermediul codului sursă,dar veţi avea satisfacţia că i-aţi îngreunatconsiderabil munca.

IIHyperlink-uri colorateUn truc bun pentru a face hiperlink-urilemai vizibile este schimbarea culorii aces-tora în momentul în care cursorul mouse-ului se află deasupra lor. Scrieţi pentruaceasta următorul cod în capul paginiidumneavoastră HTML:<style type="text/css"><! --

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

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

A:hove r {color:line ;text-decoration:underline ;}A:active {color: red; background: #006699;text-decoration: none; }/1 - - >

</style>Puteţi folosi şi alte culori decât cele din

exemplu, cum ar fi albastru marin, negrufucsia, verde, maro, bleumarin, oliv, mov,argintiu, alb, galben etc. Acestea sunt câ-teva dintre culorile care sunt redate corectde browser.

TemplateMonster .comObţinerea unui designde magazin profesionalSunteţi în căutarea unui design profesion-al pentru magazinul dumneavoastrăonline? Dacă da, atunci o vizită la adresawww.templatemonster.com este ceea cevă trebuie. Acolo veţi găsi numeroase tem-plate-uri în diferite formate numai bunepentru download, la preţurile moderate.Template-ul devine totuşi ceva mai scumpatunci când doriţi să fiţi singurul său uti-lizator. Aveţi de asemenea grijă ca nouldumneavoastră template să fie implemen-tat fără probleme în magazinul online.

Integrarea imaginilor de fundalCu ajutorul CSS puteţi integra foarte uşorimagini de fundal pe pagina dumneavoastrăweb. Dat fiind faptul că browser-ul aşeazăîntotdeauna imaginea CSS peste culoarea defundal, va trebui de asemenea să o definiţi şipe aceasta - pentru cazul în care utilizatorula blocat opţiune a de afişare a imaginilor.Pentru o imagine de fundal folosiţi pur şisimplu următorul cod în fişierul CSS:<style type="text/css">div.bg {background-image:urI(..fi mag ini/fu ndal.g if);background-color: blue;width: 640px; he ight: 80px;border: 1px solid red;padding:20 px;}

</style>şi în "corpul" fişierului dumneavoastrăHTML:<body><div c/ass="bg">div-Container cu imagine defundal</div>

Zoom pe imaginiEste foarte util şi plăcut pentru utilizatorica, în momentul în care pun mouse-ul pe oimagine, aceasta să se mărească pentru aputea fi admirată mai bine.Pentru aceasta, în primul rând alocaţiimaginii o clasă CSS, după care atribuiţi-iun link. Înlocuiţi pur şi simplu tag-ul"Img" din fişierul dumneavoastră HTMLdupă cum urmează:<a href="#"><img c1ass="zoom" src=poza.gif' alt=""width="160" height="160"border="O"><Ia>

Apoi, faceţi următoarea înregistrare înfişierul CSS sau în "capul" paginii HTML:

<style type="text/css">a:hover .zoom {filter=' O ' ; }a:link .zoom {width : 160px;height 160px; }a:hover .zoom {width : 500px;height :500px; }</style>

mEvaluarea intertitlurilorIntertitlurile, bazate pe această înregis-trare CSS, au un aspect foarte profesionalşi conferă paginii dumneavoastră o struc-tură intuitivă. Textul este formatat cubold şi peste întreaga pagină trece o liniesubţire. Pentru ca un astfel de text să fiealiniat la dreapta, folosiţi codul următorîn fişierul HTML:<h3 style="text-align: left;margin-bottom; Opx; padding-bot/tom: Opx"><span style="font-family:Arial,Helvetica, sans-serif; font-size: .8em; border-bottom: 3pxsolid black; "Exempluintertitlu aliniat la stânga< /span></h3>

Varianta cu aliniere la dreapta aratăastfel:<h3 style="text-align: right;margin-bottom; Opx; padding-bot/tom: Opx"><span style="font-family:Arial,

Helvetica, sans-serif; font-size: .8em; border-bottom: 3pxsolid black; "Exempluintertitlualiniat la dreapta< /span></h3>

ea phpBBUtilizare gratuită a soft-urilorpentru forumuriSunteţi în căutarea unui software liber,performant şi, implicit, gratuit pentrucrearea de forumuri? Aruncaţi o privireasupra soluţiei numite phpBB. Cu aju-torul său puteţi construi rapid şi avantajosplatforme de comunicare care corespundtuturor cerinţelor pentru un astfel de sis-tem. cu phpBB puteţi realiza nelimitatnumeroase forum uri, cu oricâte categoriidoriţi. Mai multe informaţii găsiţi pesite-ul oficial, www.phpbb.com.

Câştig de bani În internetII]Optimizarea serviciilorpentru clienţiUn serviciu bun pentru clienţi este foarteimportant şi poate decide succesul saueşecul unui magazin online. Clienţii carecumpără online nu aşteaptă doar o livrarepromptă a mărfurilor comanda te, ci şifeedback din partea ofertantului, traduscel mai adesea prin răspunsuri cu soluţiila diverse întrebări şi probleme. De aceea,

este vital să răspun-deţi prin mail între-bărilor clienţilordumneavoastrămaxim într-un in-terval de 24 până la48 de ore. Oferi ţi deasemenea clienţilordumneavoastră po-sibilitatea de a văcontacta telefonicsau prin fax. Şi cândspunem acest lucrunu vă încurajăm săfolosiţi numerele cutarife exagerate. Op-taţi mai bine pentrucele cu tarif normalsau chiar pentru celeîn regim 0800, cuapelare gratuită. şiclienţii ştiu că unmic magazin online iiph.,sll·[,,,~(O- '!tl~S.Maosce't_d

nu poate oferi unhotline non-stop,dar indicat ar fi săprecizaţi intervalele orare în care pot fipreluate apelurile telefonice. Un clientbine tratat se va întoarce cu siguranţă.

SOURCEFORGE.NET 2007COt.U.1UNITY CHOICE A\'/ARDS

SI'O"SOIlS

~~?:'~:;~"~'ş-_-~,a:• I ""'u.u....,.., s.., .•• , •••..

f!t SOFT PENTRU FORUM: Proiectul open source phpBB2 se bazează pe

••• PHP şi se poate instala În doar câteva minute.

m Câştig de bani În internet

Câştig de bani În internetTransmiterea sigurăa datelor clienţilorîn special la introducerea datelor "sensi-bile" ale utilizatorilor (cum ar fi de exem-plu numerele de cont şi de pe cardurile decredit), siguranţa trebuie să joace un rolmajor. O codare SSL pe 128 biţi nureprezintă doar un standard, ci şi o obli-gaţie absolută. Dacă este posibil, utilizaţiun certificat de securitate SSL special pen-tru pagina dumneavoastră web. Gân-diţi-vă la simplul fapt că şi cea mai sigurămetodă de codare este inutilă atunci când,ulterior, trimiteţi datele clienţilor prinmail, fără nicio măsură de siguranţă.

umerele de cont şi de pe cardurile decredit 1 U au ce căuta în mesajele elec-tronice.

IExamr.e Certf""'.· .. lr Accept ttis eet'tiich permanentty

r. Accept.: this certficate temporarfy fOt' tm 5eSsKln

r Do not «cept tre cert:fical:e and do noi: connect to this Web si.:e

IIICERTIFICAT DE SECURITATE: Dacă este

iii posibil, utilizaţi un certificat de securi-

tate SSL special pentru pagina web.

Analizarea ,i optimizareamagazinului onlineMagazinul dumneavoastră online are unnumăr satisfăcător de vizitatori, dar nuştiţi ce comportament au clienţii dum-neavoastră pe site sau dacă marketing-ulonline pe care îl practicaţi este eficient. înacest caz, folosiţi platforma www.etracker.com. Funcţiile sale informative de con-trol şi statistică vă oferă date exacte şi oanaliză economică a magazinului dum-neavoastră online. Serviciile celor de laetracker costă între 100 şi 500 de euro pelună, existând şi posibilitatea testării gra-tuite pe o perioadă de 14 zile.

WebhostingSpaţiul web ca platformă de testareAtunci când doriţi să vă prezentaţi firmasau asociaţia pe internet, URL-ul adecvateste foarte important. Pentru aceasta,drumul pe la un ofertant de spaţiu webcontra cost este aproape inevitabil. Dacă,dimpotrivă, vă aflaţi în căutarea unei plat-forme de testare, teste ale căror rezultatedoriţi să fie publice, ofertele de webspacegratuit reprezintă o bună alternativă.

Ofertanţii gratuiţi potriviţi - şi pentruscripturile CGI, PHP şi bazele de dateMySQL - sunt destul de uşor de identifi-

PRACTIcA - 18 TRUCURI PENTRU PAGINA WEB

cat. Introduceţi cuvintele de căutarepotrivite în browser sau vizitaţi paginawww.free-webhosts.com. un portal carecă prezintă ofertele gratuite, le evalueazăşi vă oferă sfaturi pentru alegerea corectă.

Mai dificile sunt lucrurile atunci cândcăutaţi spaţiu web gratuit cu suportASP.NET. Numărul de ofertanţi este aiciconsiderabil restrâns. La data redactăriiacestui articol, Ofertele de webspace gra-tuit cu suport ASP.l ET veneau din partea1 ASP Host (www.lasphost.com/webhosting/webhostin~free.htmI) sau WebSamba (www.websamba.com).

• trackerweb c nlrolllng

LOJur>oen•.•"I;""t.d".,,,lc ••"d •••",'IO 1.",lle ••b.sie 1•• v.e.1

Steil,l.'n Si. Ih •• " Onlln.·~tfoI9 d •.•,d,\ftht~.,t·w.blt.thtik.n m.t !Ump"i"."-An.l."." und II". e.,uch.,·Tr.cl"'1'I0. SpOI'." Si.R.nou.ee,,_ leit und KOIt.n du.eh ,0no".I:1".$OUUQu,c,n9 .m pr.'lw.rt." Mr.t.rnod.U 9.":ohn. SO""''''.U'lStJll.ltion.

O."k •••tr.d •••• optiml ••• " Si. do6' Surf •• I.b •.•, ••"••ben.ol"< dl. K.undenb,ndun9 und Hu."Um •• t.c mit lAlehtl9k •• t. ,., ett.ck ••• ,Iulte"Si. .n. ..l •••••nt ••.• K.nn;:.hl.n In .m.mSyn.m; O.t.n.chlltt·konfo.m. n."'V.l1 undkOlte"vunJ.ti9·

86.12S.89.242Rom.";"&'.1'0'1 ( &,•• ovWil'lXPfir.fox 2.0Sroadblnd

m WebhostingSchimbare de providerOferte interesante de găzduire web apartot timpul şi poate întâmpla ca la unmoment dat raportul pre-performanţăoferit de providerul dumneavoastră să nuvă mai mulţumească. Întrebaţi-l de aceeadacă este posibil să vă schimbaţi abona-mentul cu una din ofertele de actualitate,totul fară costuri suplimentare. Dacă acestlucru nu este posibil şi vă aflaţi aproape determenul de expirare a valabilităţii con-tractului, nu vă mai rămâne decât să răb-daţi un pic, după care să treceţi la un altofertant.

În acest context, foarte importante estedepunerea la timp a solicitării dumnea-voastră de relocare a domeniului. În cazcontrar există riscul ca domeniul dum-neavoastră să fie liber pentru scurt timp,suficient însă pentru a fi înregistrat de altepersoane. Pentru ca acest lucru să nu seîntâmple, atenţie la următoarele:• De regulă, providerul dumneavoastrăde până acum va elibera la vânzare dome-

I)emo-TourTop 100T~e~futnzan

OiI; lnWit/vl; r..dian •.mgunei etr. fl.xibll;nMP.I$ •..•nglmOgH(hI< .• i~an

I 0'01'1I;t, .•d •• , h.ben "'1'11ube.:a"'Qt.f·M.If·", •• 1<..tlnQ •••"etm •.•dm.' tr.n,p.'.nt<meief.mit m.xim.laff"i.nt.

horedaychec:k.de:

Mit .tr.dc.e, bekomman.i, elnen ,oforttr~n,p •• anttn Obe.bHdtOb., efi. ,IW,wirkungen••nl.f.' Akdon.n,Pel'fekt .1, e.,iI fur

gutel "' •• ketlnQ!proJektwerk.et.• Ha.kunft.SuehbeQriff.

• KJid<.pf.d., Int.""$1"'''• 1'1.", Cliekm.p·O •••••I."

• WJed.rkahr, v.,v.ild.utu

• Cooki •• , Plug·tnl

• Fl •• h·T.ukinq

• U•••·t•••.•ch."'.rfolc" •..•ngmehr ...

K.mp.'iJntn ••olt in> CMff

• K.mp.gn.n·ErfolqlkonboU.

• An.IVI. j.d •• W •• b.fo.m

• Wlrl;.d'laftil,hk.iţl.n.lys."

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

• Korw ••• ion.,.t.n

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

• ~ H"'.tmap-Ov •• lavrnehr ...

.b .•tk., bl.t.t<li. eu;'.um du .ktv.l1ta.,thaft tU .l'Ial".,.,.I'I,10 •••;•• nh.nd d.rKJidphd. diaz •..•kunftlt,l.n Pot.nti.'e.u.tu,d\6pf.l'I,

drkLein.ck:

• KJlckb.ttugll;r1<.enn",n9

• L.",fih'9a A[go.'thm.n

• V•• d.ehts •• porting• Ab••eh. von eet..u\J.""• InelivldueU. An~.r,,\en• ~ W.b 2.0 un.;! Rsa

• Web-Se'v"e. APImehr.,.

fP!!I ANALIzA: etracker vă oferă o mulţime de detalii referitoare la vizitatorii

lIiiI magazinului online şi la comportamentul lor pe site.

niul imediat după rezilierea pachetuluidumneavoastră de servicii de găzduireweb. Majoritatea furnizorilor de astfel deservicii oferă în acest sens formulare stan-dardizate, pe care le puteţi descărca dinsecţiunile de service ale paginilor acesto-ra. Rezilierea trimisă prin fax este de celemai multe ori suficientă. Numai Ser-ver4You solicită înregistrare, iar 1&1 areo procedură foarte elaborată pentru rezi-liere - cu Start în zona de contracte, un a-pel gratuit la serviciul cu clienţii şi un fax.• În cazul domeniilor .com sau .net, pro-

cedura este iniţiatăde noul dumnea-voastră provider.Primiţi de la acestaun mail pentruînregistrare, pe caretrebuie să îl confir-maţi. Verificaţi îna-inte de toate dacăadresa de e-mailspecificată este va-labilă. Adresaţi pen-tru aceasta o so-licitare la Net-workSolutions(www.networksolutions.com). Dacăadresa dumneavoas-

•••t~:.por':-~10cu:lcr;et conct'"~, we!Nofle~erl'e a&.MJ"\S tlrte!' YOU~tlll'ch 10f' I~lt;lptaect'fOOlr(O:flffDnlR~,

lOdlllMOfll ••• l

tră demail nu mai este valabilă, contac-taţi-l pe cel la care v-aţi înregistrat pentrua vă actualiza informaţiile de contact.• În cazul în care sunteţi posesorul unuidomeniu .org, .ifo sau .biz, aveţi nevoie deun cod AUTH pentru schimbare. Pe aces-ta în primiţi de la providerul anterior şitrebuie să îl puneţi la dispoziţia celui nouatunci când faceţi transferul.

WebhostingGăsirea domeniului potrivitÎn cazul în care sunteţi încă în căutareadomeniului potrivit şi aveţi o listă de nu-me posibile pentru pagina dumneavoastrăweb, următorul pas este verificarea dis-ponibilităţii acestora în internet.

. Există ofertanţi care vă permit căutareadupă domenii, dar nu puteţi rula dinpăcate mai multe căutări deodată. sau nuputeaţi. O posibilitate confortabilă văoferă site-ul numit mai sus al celor de laNetworkSolutions. Aici puteţi căutadintr-un foc până la 10 nume şi în jur de30 de aşa-numite Top Level Domains(TLD).

Pe www.uwhois.com puteţi identificapână la 150 de TLD-uri exotice, afişareafiind posibilă însă numai pentru undomeniu şi 10 TLD-uri concomitent.

ftoaOloiMt IIx

Windows'

I

Două versiuni, pe acelaşi PCCei 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 potconvieţui pe acelaşi sistem, vă prezentăm două metode de a elimina acest impediment. Andrei Licherdopol

Sunt cunoscute problemele ambelorversiuni de Internet Explorer cândvine vorba de interpretarea codului

CSS. Astfel, paginile Îmbunătăţite prinCSS pot apărea diferit pe aceste două ver-siuni, chiar pot prezenta defecţiuni di-ferite, de la o versiune la alta a navigatoru-lui Microsoft. Drept urmare, faptul că opagină sau aplicaţie web rulează bine pelE7 nu garantează buna funcţionare pelE6. În mod normal, versiunea 7 este oactualizare a variantei 6 şi nici nu se puneproblema convieţuirii acestora. Din feri-cire, există câteva modalităţi de a ocoliacest neajuns, soluţii pe care vi le prezen-tăm În cele ce urmează. Prima variantăfuncţionează doar pentru sistemul deoperare Windows XP SP2, În timp ce adoua este ideală pentru utilizatoriiMicrosoft Vista.

fJ Instalarea unor variante stand-alonede Internet Explorer

Presupunem că aveţi deja instalat pe sis-tem Internet Explorer 7. De regulă, acestase poate obţine automat, ca actualiza reWindows XP SP2. Dacă l-aţi "ratat",poate fi procurat de la adresa www.microsoft.com/windows/ downloads/ ieigetitnow.mspx. Odată instalat lE7, nu veţimai avea acces la versiunea anterioară.Din fericire, problema se rezolvă simplu:O Accesaţi adresa web http://tredosoft.corn/Multiple_lE. Aici, accesaţi legăturaDownload Multiple lE installer.f} Rulaţi fişierul descărcat, multiple-ie-setup.exe şi urmaţi paşii de instalare, ale-gând ce versiuni mai vechi de lE doriţi săinstalaţi.c) Bucuraţi-vă de posibilitatea de a testa opagină sau aplicaţie web cu toate versiu-nile de lE dorite.

1iri Instalarea Microsoft Virtual PC2007Din nefericire pentru utilizatorii de Vista,nu există o soluţie prea "curată" de insta-lare a Internet Explorer 6 pe acest sistemde operare. Jici suita MultiplelE nufuncţionează prea bine cu Vista, motivpentru care cel mai cuminte ar fi să apelaţila Microsoft Virtual PC 2007, aplicaţiegratuită care vă permite rularea mai mul-tor PC-uri virtuale, pe care puteţi instalaorice sistem de operare Microsoft.O Accesaţi pagina www.microsoft.com/windows/ products/winfamily /virtualpc/default.mspx şi descărcaţi programul cuajutorul legăturii Download now. Înfuncţie de sistemul vostru de operare, vise va da posibilitatea să descărcaţi o vari-antă pe 32 sau 64 de biţi.f} Instalaţi programul şi configuraţi unPC virtual care să facă faţă cerinţelor sis-temului de operare pe care plănuiţi să-Iinstalaţi pe acesta, apoi instalaţi acel sis-tem de operare. Astfel, veţi putea rula mai

Cu ajutorulunei maşini

puteţi testapagina cumai multe

., Insl.allnternetEl<filOIellOEl !nJtallllU1!'let E~ploref4 01Elf~lnlell'ldE.ef501Elll'lStalllnlelnelElICloffi5.S

El rn~all!WneI. hpb'et 6.0

lE MULTIPLU:Alternativ, puteţi instala maimulte variante stand-alone de lE.

multe versiuni de Internet Explorer, fărănicio problemă.

llI!Il:1 La configurarea VirtualPC, veţi aveaposibilitatea să specificaţi ca PC-ul virtualsă folosească (printr-o punte) aparaturade pe calculatorul vostru În mod direct, caunitatea de disc, dar veţi putea şi să creaţio unitate virtuală care să citească ima-ginile virtuale de disc. Lucrurile stau la felşi pentru conexiunea la internet. Adicăveţi putea ieşi la plimbare pe internet cu 5PC-uri virtuale simultan, folosind acelaşiIP. Folositor, nu-i aşa?

Internet pentru toţiConexiunea 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

~Icercaţi să vă închipuiţi o zi fără ,,~trop"de internet. Fără să îţi verifici mail-uriledimineaţa la cafea şi să citeşti ziarele

online, fără să fii vizibil pe messenger pen-tru colaboratori şi / sau prieteni, fără să

vezi un videoclip pe YouTube trimis devreun cunoscut, fără documentare pentrudiversele proiecte pe care le ai în lucru,chiar şi să găseşti o reţetă nouă pentrucină şi exemplele pot continua. Şi mai

bine este că, dacă nu ajungi la calculator întimp util, nu mai ratezi mail-urile impor-tante de la partenerii de afaceri saucolaboratori pentru că există posibilitateaconectării de pe telefonul mobil. Ei bine,

tot ceea e \Tei, la orice oră şi din aproapeorice ur ă este disponibil la un clic demouse, ingura condiţie fiind să aveţi unabonament la unul dintre providerii deservicii.

Conectare, dar cum?înainte însă de a vorbi despre provideri şidespre ce conţin ofertele din ce în ce maiatrăgătoare ale acestora, ne vom concentrapuţin asupra modalităţilor de conectare.în principiu, la ora actuală în România,piaţa este împărţită între câteva maritipuri de conexiuni, din care felia ce maimare este deţinută de conectarea prinfibră optică şi reţelele de cartier. Aceasta apreluat conducerea în faţa variantei deconectare clasice, prin dial-up. Puternicdin spate vine varianta de conectare ADSLşi, cu o pondere mai mică avem conexiu-nile mobile.

Principala calitate a legăturii la internetprin cablu TV!fibra optică este viteza, carepoate fi de până la 100 de ori mai maredecât în cazul unei variante dial-up.Computerul sau reţeaua sunt legate lainternet prin intermediul unui modem decablu conectat la cablul coaxial folositpentru recepţionarea programelor TV sauprintr-un cablu de reţea cuplat la unswitch conectat mai departe la cel maiapropiat nod al reţelei de fibră optică.Utilizatorul are în acest fel acces la serviciimultiple (aplicaţii on-site, on-server,transfer de date, televiziune şi telefonie).

La începutul perioadei în care Româniaa fost cuprinsă de febra internetului, înurmă cu circa 10 ani, varianta de conec-tare dial-up era cea mai răspândită, şi ceamai ieftină. Lucrurile s-au mai schimbatde atunci, dar ponderea conexiunilor deacest tip a reuşit să se menţină ridicată.Pentru conectarea prin intermediul aces-tei metode este nevoie de un modem ata-şat computerului, de conectare la o reţeade telefonie fixă şi de un cont la un pro-vider de servicii de internet. Modemul nueste un periferic foarte scump la ora actu-ală, dar trebuie să menţionăm şi câtevadezavantaje ale acestuia: viteza de conec-tare şi transfer mici, precum şi costul fac-turii telefonice, destul de ridicat (existăînsă oferte speciale şi tot felul de reduceri,despre care puteţi afla de la compania detelefonie fixă). De asemenea, transferul dedate şi sunet nu se face simultan.

Conexiunea ISDN reprezintă o dez-voltare a reţelei telefonice clasice, careasigură de la două (ISDN-BRA) la 30 de

Internet to go

~-ttick on hoIspot:s lorhst o -."

o °1C!d.al

o o BloI~10l'\1

În cazul În care laptopul dumneavoastrăeste echipat cu o placă de reţea wireless,călătoriile În diferite colţuri ale ţării sau alelumii nu vă mai obligă se folosiţi serviciilescumpe de conectare la internet oferite dehoteluri. Există puncte de acces gratuite

aplicaţii simultane (ISDN-PRA): convor-biri telefonice, acces dial-up la internet,transmisii fax, transmis ii de date, video-telefonie şi videoconferinţă, folosind fireleexistente şi conectând diverse tipuri deechipamente terminale. Lărgimea de ban-dă este superioară, iar viteza transmisiilorde date mai mare.

Avantajul ADSL faţă de dial-up poate firezumat la câteva cuvinte: internet înbandă largă. Navigarea se face la o vitezăde aproape 120 de ori mai mare decât încazul simplei conexiuni prin dial-up, nuexistă taxare la minut, se poate vorbi latelefon şi naviga pe internet în acelaşi timpfolosind o singură linie telefonică fiind înegală măsură posibilă conectarea mai mul-tor PC-uri la internet. Nu în ultimul rând,există control asupra facturii, utilizatorulplătind numai abonamentul lunar, Îarătaxarea traficului.

Conexiunea mobilă este de departe cea

mai peste tot, de la aeroporturi la cafenelefast-food-uri şi altele asemenea. Ca să aflaţide ele apelaţi tot la internet, unde puteţigăsi site-uri În genul www.cfree.ro. unde vise oferă hărţi şi liste ale hotspot-urilor gra-tuite. Găsiţi-le şi navigaţi.

mai interesantă, dar şi cea mai scumpă.Pentru acest tip de conectare este nevoiede un telefon mobil cu tehnologia GPRS(General Packet Radio Service). Tehnolo-gia se pretează pentru sesiuni de lucrulungi, în care utilizatorul este conectatpermanent la internet prin telefonulmobil. în plus este bine ca respectivul tele-fon sau modem să cunoască şi tehnologiileEDGE sau HDSP A, pentru a oferi vitezeridicate.

Această variantă de conectare esteavantajoasă în primul rând pentru că asig-ură mobilitate, permiţând lucrul în afarabiroului folosind internet prin conectareatelefonului cu laptopul, PDA-ul sauPocket PC-ul, trimiterea sau primirea dee-mail-uri, accesul rapid la informaţii siaplicaţii WAP, direct pe telefon şi primi-rea de apeluri şi mesaje text în timpulfolosirii serviciilor GPRS pentru internetbrowsing 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

Pentru găzduirea unei pagini web, estesuficient orice calculator conectat la in-ternet, care să ruleze o aplicaţie de tip

server corespunzătoare (precum Apache).Evident, este neplăcut ca accesul la paginadumneavoastră să fie condiţionat de starea

calculatorului propriu şi eventual de o co-nexiune la internet cu o viteză mediocră.De aceea, este preferabilă integrarea acestu-ia pe server-ul unei companii specializate îngăzduirea paginilor web, unde, în funcţiede pachetul ales şi de specificul furnizoru-

lui, veţi beneficia mai mult sau mai puţinde: o conexiune puternică pentru paginaweb, spaţiu suficient de stocare a datelorpaginii, posibilitatea unui flux mare de dateÎntre pagină şi vizitatori şi totodată securi-tatea datelor pe care le plasaţi pe acel server.

Când alegem un ofertant de webhosting,trebuie să avem în vedere câţiva factoricheie care determină o alegere viabilă,după cum veţi vedea în continuare.

Unul dintre criterii este importanţapaginii web pe care "vrem s-o trimitem îngazdă". În caz că este doar un blog sau omică pagină web, strict personală, fară unscop comercial sau temporară (dedicatăunui eveniment), varianta folosirii unuiserviciu gratuit este viabilă. Din fericire,există o sumedenie de astfel de serviciigratuite, iar unele chiar oferă posibilitateade a construi un website pe loc până şicelor mai puţin experimentaţi într-aleweb-ului. Dacă, dimpotrivă, doriţi capagina să stea pe internet mult şi bine şicu atât mai mult dacă urmează să văaducă beneficii comerciale, ar trebui să văgândiţi serios la un webhosting plătit.Există, totuşi, câteva servicii gratuite careoferă suficient spaţiu de stocare, elementede securitate şi posibilitatea unui traficlunar destul de intens. Din păcate, încazul serviciilor gratuite, este improbabilca ofertanţii să ofere standarde de securi-tate corespunzătoare, şi aici merită discu-tat mai pe larg.

Au fost cazuri în care serviciul de web-hosting a modificat conţinutul plasat decătre utilizatori (cum ar fi câteva cuvinte-cheie strecurate în corpul tuturor pa-ginilor unui utilizator - fară ştirea sauacordul acestuia, cu referiri la pagini webpornografice sau din alte categorii. Acestlucru era observabil doar prin consultareacodului sursă al paginii web direct dinbrowser, la accesare, sau de către motoa-rele de căutare care indexau conţinutulrespectivelor pagini. Practic, atunci cândnavigatorul web cerea pagina respectivă,server-ul o procesa, inserând câtevacuvinte cheie în corpul paginii înainte de"a o servi" pentru navigator. Ca urmare,deţinătorul paginii nu avea cum săsesizeze acest lucru atunci când modificapagina prin FTP, protocol care oferă accesdirect la fişierele de pe server.

Nu spunem că genul de întâmplaredescris mai sus ar fi cumva o regulă sau căs-ar aplica majorităţii serviciilor de web-hosting gratuit, nicidecum. Trebuie să fiţitotuşi atenţi la termenii de folosire (Li-cense Agreement) ca dealtfel la orice do-cument pe care un serviciu, gratuit sauplătit, vă propune să-I parcurgeţi şi să-Iacceptaţi înainte de a putea folosi faci-

~t1 ~ ~f;iI'~ '~i:!;!l?:(b':

BtJ'fNowI$5.9galnl"lt.com P\J,chase I

'1 Yrtlol$.I01lEl ro'..%Rlghtsreslrltledbyeopyri;hl..~ SoeeifiuUy, lhl$ dal3 tAAy ONlY bt used fOf Inlernel operaborlal% purposes.UmaynotbausedforlargetedatmrtlSlflgorany% olherpurpose..% E~te INTERZlSAfole$Ueil datelor de pe <1tesl Sel\'ef In oricare% alt scop deeat operarta retelei In spaml este INTERZISA/f; (otoslrealOflnscOPulipubllcllare..domall"'name IneSltUt.rodesenpbon INeSletKOesrgnSrIdeSCflpllon.lllalaeSllnr21Uescnpllon Ap 2destrlpbon BriSOYdesCI1ption' Postal Code' 2200deseriplron Country ROdescnptlon Phone 072( 483 200âescriptlon E-milll ilWl1itue~.rrdescriptiOn RegistrabonllO Number J08l1 Q3SJ02OS2006descnpbon flsulCode R18631971admlll-CQntacl NC258·ROTlOlechnical-contiltt NC258·ROTLDzone-contilcl NC258-ROTLObllllng..contacl NC258-ROTLOnilmeservtl C1nsQljneslEbcro 212.52 166 211namrUMlI dn,002·0 net23 hU 193 178 118 193info Obiect millnlalnfd by ROnD (10) reglsltynotl'" doNin-""ln!listserv.NlC.roobJ'ct-malnlalt1ed-by ROTlD-MNTI,Ipdaltd dorl.in-adftinelistserv .rne.ro 20060512up(fiilted dan!rotld.ro 2006052<1

!Jo t.-: 'foo ••••• ,..- 1'" tI"l'• • ,. .~ •••• J__ ••__ 'tl

'"lU'~~~oIo:1lll6ll,,,o"",It••.,,,,,,,,,,,,,""IIOll.l"OOlOlOC.O,ll

__ ~"' Ol_C"

r . .•.• r-r r·ro ~- r

r·r-. r •.•r' r~~~r· r __- .r... r •.

r __~- ...

r """'"r~r-r~_~r_,_'_'_r~~r .

CINESUNTEŢIVOI?: Cu ajutorul paginii web www.who.is. puteţi afla toate detaliile relevanteÎn legătură cu un website, posesorul domeniului şi server-ul de pe care acesta rulează

lităţile respective. în tot cazul, dacă pen-tru o pagină personală, mutarea conţinu-tului pe server-ul altui furnizor poate fiacceptabilă, însă nu este cazul unei paginiweb comerciale, cu vechime şi cu o bazăfidelă de vizitatori.

Ţineţi cont de toate detaliile ofertei. Ceicare oferă spaţiu de stocare nelimitat şitrafic nelimitat nu prea pot fi luaţi în serios.Gândindu-ne la implicaţiile unei asemeneaoferte pe termen lung, putem constata cuuşurinţă ca nu este una plauzibilă. Ase-mănător, evitaţi să încheiaţi un contractcare vă oferă un spaţiu de stocare mai maredecât traficul lunar permis, deoarece ar tre-bui să fie invers. Evitaţi şi pachetele preaîncărcate în opţiuni, atâta vreme cât ştiţi cănu le veţi folosi, cel puţin la început.Asiguraţi-vă că serviciul garantează securi-tatea, integritatea datelor dumneavoas-tră.şi faptul că nu vă veţi trezi cu publicitatenedorită pe website, cu atât mai mult cu câteste vorba de un serviciu pe care-l plătiţi.

Funcţionalitate şi suport tehnicDouă aspecte esenţiale pe termen lung,funcţionalitate a şi suportul tehnic trebuietestate înainte de a face un contract de

lungă durată cu un furnizor de hosting.Cel mai bine este să faceţi un contract detest, pe o perioadă scurtă, pentru a vedeaexact cum se comportă serviciul. înaceastă perioadă, încercaţi să comunicaţicât mai mult cu suportul tehnic, pentru avedea care sunt disponibilitatea şi com-portamentul personalului. Merită men-ţionat că webhoster-ul la care apelaţi artrebui să poată fi contactat telefonic. Osimplă adresă de e-mail pentru comuni-care şi suport nu reprezintă soluţia ideală.

Este foarte probabil ca pagina web deprezentare a furnizorului să se găsească peun server propriu. Apelaţi la serviciul gra-tuit www.who.is. Acolo, introduceţi adre-sa paginii web a furnizorului şi aflaţi toatedetaliile relevante despre acel website şiserver-ul pe' care este găzduit. Puteţi deasemenea să încercaţi comanda ping peIP-ul server-ului pentru a-l compara cualtele, pentru a vă asigura că acesta răs-punde rapid în zona din care urmează săfie accesată pagina dumneavoastră web.

Webhosting gratuitÎn această zonă, tot ce vă putem sfatui estesă citiţi cu atenţie toate informaţiile de pe

EI .100 I<IIIt d,~~ SJ'M"

C 10 «II h~""~'I"'''D 7 •••.•.:.QllJ ••db••.~,,<El: •• Add·"" d •••••••.••••

D \\ ••bdM ••• m.

Bl V,~,.1'•••"1EI Pfll"ll~''''''D A.u,,, ••••• ,~ ",.D n' .•a••••'"D 1,1" •••• " •••. ,

D 250 "'.II d •• ' •••• a Si '"',•••• 1'••••••1

D t> G' N •••••IoI.•.".t••••" D PI1I' H<Og. ""'"'''J'''G ~ I<II~QI <1•••••. 1>••• ". D •••••'0 ••••••• , ••••..• Il,,~ (29 «~,pu)

D nJ>.~<" .•'"II ril~•••d""';,~,(b•.••.••.•r' ••ţii •••••)

D w •. t> ••• ,,,,

D I'OP •••••••• IM." ••••

D 1'•••.•.••'0'''''''' ••D I'l>pM .•.Ad ••• on

D c:1••••~'r<J ••'"." ••

DOUASITE-URI, UN SINGURRESELLER:Iată un caz clasic În care, sub denumiri diferite dar acelaşidesign, un reseller Încearcă marea cu degetul cu oferte uşor diferite. Vi se pare de Încredere?

paginile web ale celor care oferă hostinggratuit şi totodată să studiaţi relaţiile dintreaceştia. De multe ori, aceşti "furnizori" deservicii gratuite sunt de fapt reseller-i. Pelângă faptul că doi reseller-i ai aceluiaşi ser-viciu pot avea oferte radical diferite sauoricum cu diferenţe semnificative, estefoarte posibil ca furnizorul direct al acesto-ra să ofere un serviciu gratuit de o calitatemai bună, cu un suport superior, motiv

pentru care ar fi indicat să apelaţi direct laacesta. Un astfel de exemplu sunt paginileweb www.orohost.com şi www.click123.net. Design-ul paginilor este identic,furnizorul lor identic, oferta gratuitădiferă prin faptul că unul dintre serviciioferă 50 MB în plus spaţiu de stocare şi 4GB suplimentari de trafic, alături de şaptebaze de date MySQL faţă de 3. Partea ciu-dată este că însuşi furnizorul acestora are

o ofertă gratuită identică click123.net.Având acelaşi furnizor, ne întrebăm cumpoate www.orohost.com să ofere gratuitmai mult decât furnizorul său. În oricecaz, faptul că doi sau mai mulţi reseller-iai aceluiaşi serviciu au un design identicnu este de bun augur. Putem specula că defapt, în spatele ofertelor sunt aceiaşioameni, care au avut probleme cu repu-taţia unuia dintre servicii şi au migratcătre altă denumire. Dincolo de oricespeculaţie, este cert că aceşti redis-tribuitori îşi pierd credibilitatea în faţamultor utilizatori conştienţi de situaţie.Nu spunem că serviciile oferite de cătreaceştia ar fi de o calitate proastă, ci văatragem atenţia asupra inconvenientelordeterminate de alegerea unui serviciu gra-tuit de găzduire.

Concluzia noastră? Strict pentru pagi-ni personale, de o însemnătate redusă şicu un factor comercial zero.

Mai jos, am alcătuit un tabel cu serviciide găzduire contra cost. Pentru compara-ţie, am ales câte trei pachete similare dinoferta fiecărei companii. Lista completăcu servicii şi detalii poate fi găsită la viz-itarea paginilor web corespunzătoare fie-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 domeniiun 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 LHProfessional 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,Pachet II(mediu) 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

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,

Pachet III(business) e~mail, tate, conturi şi liste liste e-mail nelimitat, nelimitat, FTP, e-maii nelimitate, e-mailjbaze 20 conturi FTP,100 con-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, 2030 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 nespecificat Plesk DotNetPanel phpMyAdmin, Cpanel phpMyAdmin, Cpanel, Plesk 8.3, Cpanelll, phpMyAdmin 2.6.1,administrare Enterprise PRO Plesk phpMyAdmin Image Manager

Suport tehnic nespecificat 24/24 ore e-mail / Forum / Telefon da 24/24 ore (telefon, zilnic (Între orele 24/24 ore (telefon,/ Messenger e-mail, chat) 9-24) e-mail, chat)

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 laPython, 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, Optimizer, 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