Documente Academic
Documente Profesional
Documente Cultură
I
şi o adâncime a culorii de 16 biţi.
vă punem la dispoziţie cât mai multe Noi am propus Gimp pentru editare şi De aceea, nu este recomandată folosirea
din instrumentele necesare aplicării XNView pentru administrarea colecţiei acesteia Într-un mediu ce nu oferă mini-
cunoştinţelor învăţate din articole. Ală- de imagini web, datorită combinaţiei de mul necesar! Interfaţa poate fi rulată atât
sub Windows 95/98/Me, cât şi sub Win-
turi de clasicele aplicaţii, v-am pregătit o viteză şi funcţionalitate care se apropie
dows NT/2000/XP.
serie de exemple către care se fac trimiteri destul de mult de soluţia Adobe, fiind Din cauza multitudinii de configuraţii, re-
din articole. Cu ajutorul acestora, veţi totodată o soluţie gratuită. dacţia CHIP SPECIALnu Îşi poate asuma
putea face teste şi veţi avea posibilitatea nici o responsabilitate În eventualitatea În
de a deprinde mai uşor tehnicile aferente care apar probleme În funcţionarea inter-
feţei şi a aplicaţiilor. Programele care au in-
fiecăruia dintre acestea. Desigur, aplicaţiile şi paginile web nece-
trat În componenţa CD-ului CHIP SPECIAL
sită servere pe care să ruleze. V -am pre- au fost testate şi selectate cu grijă În
Aplicaţii utile gătit o colecţie de pachete tip server, foar- redacţia CHIP SPECIAL.Totuşi, redacţia nu
Aveţi de ales între mai multe editoare te utile atât pentru testarea materialelor Îşi poate asuma nici o responsabilitate
avansate, dedicate programatorilor. Ma- aflate în lucru cât şi pentru publicarea pentru funcţionarea anormală a software-
ului şi nici nu poate fi făcută responsabilă
joritatea oferă suport atât pentru HTML, acestora, chiar şi de pe propriul Pc. Suita
pentru eventualele daune produse. CD-ul
XHTML, JavaScript, ASP cât şi pentru Server2Go este deosebit de atrăgătoare CHIP SPECIALa fost verificat Împotriva
limbaje mai complexe de formatare, prin numeroasele facilităţi pe care le oferă viruşilor cu următoarele programe antivi-
scripting şi programare. dar mai ales prin posibilitatea de a dis- rus (În ordine alfabetică): BitDefender Pro-
tribui o aplica ţie web fessionall0 (furnizat de Softwin), F-Secure
AntiVirus 5.51 (furnizat de Infodesign),
w~
"
._- __
.:>rc:eotlll~~O
s..wbCah:lst
~MPCL_l1TF4~~
.••.
C•.••rwwd_l!I
SG27~
••• 'fCP*>
O~<~""~-I""'-_"'-'-_.--::l
o
.
~r~3
~~-~
.1ot,'SCl..a.t __
.F<I'l"'l:I':J00i'3
o
~. '~7
~022
~L.".....Q~,,,,,,,,,----~::J
pe un mediu read-on-
ly precum un CD-R .
Nu în ultim ul
Kaspersky Lab Anti-Virus 6.0 (furnizat de
Kas- persky Lab - Rusia) şi PC-ciiin (furnizat
de GeCAD).
Pentru orice Întrebări legate de aplicaţiile
.·.
I !CQIa!>on
" - J1- II- J
"•.
prin fax sau prin e-mail, autorii programe-
·
~
aplica ţie gratuită
citire a fişierelor PDF,
de
lor respective.
ATENŢIEIPentru rularea corectă a inter-
alături de nepreţuitele feţei CD-ului vă recomandăm setarea unei
manuale de utilizare rezoluţii minime de 800 x 600, o adâncime
a culorii de 16 biţi şi folosirea opţiunii
pentru PHP şi
Small Fonts!
MySQL.
Impressum
Redacţia poate fi contaetată la:
Telefon: 0268-415158,418728, 0723-570511, 0744-754983;
0368-415003,0368-415004
Fax: 0268-418728; E-mail: redactie@fvd.ro
Adresa redacţiei: 500010 - Braşov, str. N.D. Cocea nr.12
Adresa pentru corespondenţă:
500530 - Braşov, Oficiul Poştal 2, Căsuţa Poştală 4 Editura: Vogel Burda Communications SRL
Sediul editurii: 500010-Braşov Str. N.D. Cocea nr.12
Director General: Dan Bădescu (dan_badescu@vogelburda.ro)
Director tehnic: Daniel Dănilă-Bekesi (dan_danila@vogelburda.ro)
Realizarea unui site sau a unei simple pagini au presupus Întotdeauna acumularea anumitor cunoştinţe. Procesul
de Învăţare nu se opreşte Însă după finalizarea primului site fiindcă standardele noi, trendurile precum şi
necesităţile clienţilor determină perfecţionarea continuă. În afară de cunoştinţele de bază, trebuie avute În vedere
şi anumite aspecte secundare (browser-e, motoare de căutare), fără de care paginile sunt afişate defectuos sau
nu prea sunt accesate. Victor Gheorghe
/'iri' ('001-
Q ••••• ~
I 8Auto~
li!fFlnanc:e
See Virgin's
Virim ~IJthe ~s
space jet
modt'l!;oflhe fit~1
B Mo" l' M••••••• ' I 4'l •• do- I
O: Game. comm'ltlal EartMo-~;l(.e p11tl'S
~Ciroull'
•• Photol of mod.l. bwea'herl 'tilUClII IQ,lllro.COPU
erJ HoUob.
t::!M{lIlS
tr Mobile Web
'14, ~:~ty·:'.~~~::·d ",1), Plan Yaur Gelll""'.y
ti. Mo";e. .".y.tobo.u •• nbma<y
Today".TopOU1$
~I'tusjc: .n ••• l."on.h,p V.lICiltOnPaekag"·
CJ Per'llonal,
HUgeCIU'''S",~·
Hotl'!OtalsWor!dwldl
b) Real Estate ·ll\kl •••• h •••• !>df •••
O Shopplno
ti)SPQrts
• Frellch ba"k hl1byoneoftheb1gge5.lfraudslllinVltl.lllhlstoIY
.!)Tech • Mosul polree c~"., Imbushed and slam al bomb b1i'S1S,le
o Trll"el • Drought mly rateI lIUelulluetOl's 10 Ihlcul, bICk OIshul d"""",
• Analys,s Flolld, can clalll'ylhe GOP lace '2008 ,."'pao<;n PulVahool10 wOlkfor)'ou
C)TV
~ 'I'ellowPQQu
· OAuthOllhes ta~lng sleps 10 extrld~. suspect 111Marlll,'s dUlh 'a ••• dom.'n n."... 11.~"/l"~'
• Moderaleelf.reisemaydlam.lltoi!lyprOlongrrlen's!rtts : ~::I"~n~~';Q'".nd bv,ld •••.• b ." •
• o Ltdger'sIldlanc •• letums 10N~ York fOlloWIIl!l hlt dUlh
• Suptl Bowl Auttrahan Open NBA NCAA Hoopţ NHl
Small Buslness
'GetaWebSlte
Most Popul.r Ent~rt"inm.nt N.W5 VidloS
• DamalnN{lme.
'SeU Online 1011Uk81pllce
.,......Echo;onl •••
IAtt<om>_•••••••• hk h_
.,.D .
'Sean:h Ads
Pllpubr;tClIonglmes • ..,•••• ~ r•••••••..ad.,_rn
Turtl9Odysuy2 \.Pgoft'ol!! ~ldfruuatsoflf\1bnt.acllOfl w~~ •• t_"vht'-t
Futured Servicfl
ga""", <ti YI~OI Gamts Oownlo.d now .f.~ •.•••in.s.-.., •• __
·Oawnlaad.
Go 10 Y''''oot Shoppll'l9 Ind UVi Otl lne hol new slyln H_ •••"""~.b(".t11
.HlIlalth
Or. PNI de!.'*nck.tt- to ••••
Mv Yahool • Yahoohg$JlSI forY-..ld~ 9eatnce's Web Chude • Yahoo'lntemtt urt
Wtekly Plcks. Today'~ Web Evmts. Ch:al. Weathtl Forecasls VECHIVS. NOU:Aşa arăta pagina portalului de internet Yahoo! În 1997 (stânga) şi
R$Jldom Yahool Lmk· Yahoo' Shop
iată care este aspectul său actual (dreapta) .
ine lucrează în domeniul WEB de- •• pagina WEB tipică ulterioară anului 2000 bine în editorul/PC-ul propriu, va arăta
• 76.04% - Microson kltemet Exp/orer ~ separarea con- mult utilizatele tabele poate induce ideea că
16.80% - Fretox ţinutului de design. se va renunţa la tabele. Oare folosirea CSS
.5.59% - SSteri
Cu alte cuvinte, înseamnă dispariţia tabelelor? Evident nu.
0.60% - Netscape
0.64% - Opera CSS oferă pe de o Tabelele şi CSS nu sunt mutual exclusive.
.0.08% - Moz~a parte un conţinut Tabelele îşi păstrează locul şi importanţa
.0.19% - Altele
care reflectă struc- lor, mai ales pentru controlul datelor
BROWSERE: În topul popularităţii conduce Încă detaşat browser-ul tura logică a infor- tabelare. Utilizând însă mai pUţine tabele în
Microsoft. maţiei şi pe de altă layout, paginile se încarcă mai repede din
parte libertatea de a internet. în plus, CSS-ul oferă avantaje su-
puteţi vedea dinăuntru. XHTML încorpo- specifica exact aspectul fiecărui tag HTML; plimentare faţă de tabele. Astfel, aşa cum
rează HTML şi reprezintă calea de urmat ~ controlul eficient a seturilor de documen- am menţionat anterior, prin CSS se pot
pentru următorii ani. Internetul este plin de te complexe. Utilizarea puternicelor faci- controla culorile, plasarea imaginilor (in-
site- uri care vă oferă tutoriale gratuite pen- lităţi CSS permite designerilor controlul clusiv a celor din fundal - background
tru HTML, cel mai autorizat fiind cel de la grafic (aspect şi poziţionare) al unui număr images), dimensiunea şi aspectul margini-
W3Schools (http://www.w3schools.com). nelimitat de pagini, prin modificarea unui lor, spaţierea (padding) şi chiar alinierea
care pe lângă tutoriale vă oferă şi posi- singur document master sau a unei foi de stânga / dreapta a elementelor de bloc pen-
bilitatea testării cunoştinţelor proprii. în- stil. Modificarea aspectului şi/sau poziţio- tru o poziţionare exactă în pagina web.
cercaţi să vă dezvoltaţi abilităţile învăţând nării elementelor dintr-o pagină web se
HTML sau XHTML - rezultatul se va vedea poate realiza cu ajutorul CSS, fară să fie Aspecte software
imediat în paginile de web proprii. nevoie să vă atingeţi de codul HTML. Un Aminteam în treacăt mai sus despre afi-
alt avantaj al CSS constă în flexibilitatea sa şarea paginii în browser şi mai exact despre
CSS - O treaptă mai sus deosebită. Mai multe informaţii despre CSS posibilitatea ca aceasta să nu fie afişată co-
Cascading Style Sheets (CSS) trebuie privite găsiţi în oglinda "Rolul CSS". rect. Această problemă apare datorită dife-
ca pereche inseparabilă de HTML. CSS ofe- renţelor de interpretare a codului CSS de
ră designerilor web două avantaje impor- Tabelele· un pas înapoi? către diferite browsere. Browser-ul de in-
tante în gestionarea unor pagini web, indi- Utilizarea CSS în structurarea unei pagini ternet este programul care înţelege codifi-
ferent de complexitatea lor: web cu ajutorul elementelor de bloc faţă de carea HTML şi CSS, afişând conform cu
ROLUL CSS
Cascading Style Sheets permit controlul as- Helvetica,Arial,sans-serif' size="6" puneţi să o faceţi cât mai repede.
pectului paginii, folosind o cantitate redusă color="Nnavy"> Titlu</h1> Implementările CSS diferă de la browser la
de cod unitar la nivelul Întregului site. The - cod CSS browser. Un exemplu de implementare dife-
World Wide Web Consortium recomandă uti- h1 {text-align: right; font-size: 16pt; rită a standardului HTML este legat de
lizarea CSSÎn tandem cu HTML. font-family:Verdana, Helvetica,Arial,sans-serif; TAG-ul <body>. Dacă se doreşte plasarea
Utilizând exclusiv codul HTML,ar fi necesar color: navy} paginii web În colţul din stânga sus a ferstrei
ca atributele unui tag să fie specificate la Referinţa HTMLla regula CSSva fi: browser-ului, evitând diferenţele dintre
fiecare utilizare a acestuia. Şi mai neplăcută <h1 >Titlu</h1> _ acestea, se foloseşte:
este situaţia În care se doreşte modificarea Când se definesc aceste atribute În CSS, se <body leftmargin="O"topmargin="O"
atributelor unui tag existent. În această situ- controlează toate referinţele la <h1> din marginwidth="O"marginheight="O">
aţie, ar trebui modificate toate apariţiile tag- Întregul site cu o singură definire sau regulă Fără standardul CSS, această problemă de
ului respectiv În toate script-urile aferente (indiferent cât de complexă este structura poziţionare nu dispare. Cu CSS, aceeaşi po-
paginilor unui site. acestuia). ziţionare se realizează astfel:
Cuvântul Cascading din numele CSS sem- Exemplul precedent poate fi extins pentru body { margin: O;padding: O;}
nifică faptul că elementele subordonate situaţia când este nevoie de mai multe vari- Dar de ce este nevoie de ambele declaraţii
moştenesc proprietăţile. Toate elementele ante ale tag-ului <h1> la scrierea unor pentru atribute (margin şi padding)? Motivul
HTMLaflate Într-un element ale cărui pro- titluri folosind culorile blue, red şi green. este că browser-ele utilizează metode diferite
prietăţi au fost stabilite Într-o foaie de stil Atunci, codul CSSeste: de indentare a elementului <body>. Dacă
moştenesc proprietăţile respective. Unele h1.blue {text-align: right; font-size: 16pt; se utilizează body { padding: O; } numai
reguli pot fi contradictorii (sau pot părea ast- font-family:Verdana, Helvetica,Arial, browserul Opera (atât sub Windows cât şi sub
fel)_În acest caz, ultima regulă din cod este sans-serif; color: blue } Mac) va poziţiona corect, În stânga sus, pagi-
ce care se aplică. Precedenţa regulilor, tăria h1.red {text-align: right; font-size: 16pt; na web. Dacă se utilizează body { margin: O;}
lor poate fi Înţeleasă uşor din multele exem- font-family:Verdana, Helvetica,Arial,sans-serif; toate celelalte browsere (exceptând Opera)
ple de pe internet. În orice situaţie, folosirea color: red } vor poziţiona corect pagina web.
intensă a CSS permite reducerea semnifica- hl.green {text-align: right; font-size: 16pt; Cea mai bună cale de urmat este de a po-
tivă a timpului de realizare şi modificare a font-family:Verdana, Helvetica,Arial,sans-serif; ziţiona paginile folosind ambele atribute
unei pagini web. Totodată, CSS face codul color: reen} CSSpentru declaraţia <body>.
HTMLmai lizibil, prin eliminarea codului de Referinţele HTMLla aceste reguli CSSvor fi: E Şi dacă tot v-aţi obişnuit să lucraţi cu
stil şi structură. Un exemplu simplu de <h1 c1ass="blue"> Titlu blue</hl > style-uri, de ce să nu o faceţi când editaţi
folosire poate fi tag-ul <h1> pentru con- <h1 c1ass="red"> Titlu red</h 1> propriile documente cu editorul favorit (fie
trolul atributelor unui titlu: <h1 class="green">Titlu green</h 1> el Microsoft Word, OpenOffice Writer etc.).
- cod HTML Dacă Încă nu gestionaţi aspectul grafic al site- Editoarele moderne au incorporate mecanis-
<hl align="center"><fontface="Verdana, ului web propriu cu CSS,este bine să vă pro- mele pentru gestionarea style-urilor.
aceasta pagină de web pe ecranul utiliza-
torului. Pe măsură ce rolul CSS în web
design creşte, este necesară testarea aspec-
tului paginilor web în cele mai utilizate
browsere. Aşa cum am spus, nici un brow-
ser nu afişează perfect codul CSS, unele
1
•,~.."
.•..
-,.
Orb •••.'.rO<>t ••"04
4H1.1t""•••,.P'Wl.
:::::'~::'I
•..••••
t
pagina anterioară).
Majoritatea celor care navighează pe
internet utilizează Internet Explorer sau
Mozilla Firefox, cu precizarea că numărul
de utilizatori Opera este în creştere. Cu Motoare de căutare sunt în fapt baze de date masive care acope-
toate că fiecare dintre aceste ultime două Simpla realizare a lllei pagini nu este însă ră aria internetului şi constau din trei părţi:
browser-e este actualizat constant, mulţi suficientă. Astfel, respectivul site sau infor- ~ cel puţin un program numit spider sau
designeri web nu-şi actualizează periodic maţia conţinută de acesta trebuie să fie uşor crawler care "scormoneşte" internetul, fur-
versiunile propriilor pagini web. În plus, şi de găsit. Cel mai simplu mod de a găsi nizând informaţii;
sistemele de operare (Windows, Linux sau informaţia pe internet este prin interme- ~ bază de date care stochează acele infor-
Mac OS) sunt actualizate frecvent şi chiar diul unui motor de căutare. maţii;
apar versiuni noi ale acestora, faptul afec- Motoarele de căutare sunt site-uri spe- ~ instrument de căutare prin baza de date
tând şi aspectul paginilor web în browsere. ciale din cu ajutorul cărora cei care na- care selectează informaţia pe baza unor
O bună practică este aceea de a fi în legă- vigheazăpe internet găsescinformaţii despre cuvinte cheie introduse de către utilizator.
tură permanentă cu alţi designeri web (de alte site-uri sau conţinute în acestea. Deşi De regulă, rezultatul căutărilor este
dorit utilizatori de sisteme de operare există diferenţe în modul în care este căutată afişat paginat (de exemplu 10 rezultate
diferite) pentru a avea o vedere rapidă informaţia, toate motoarele de căutare exe- afişate pe ecran) pentru a evita liste lungi,
asupra modului de afişare a propriilor pagi- cută în principial trei operaţiuni de bază: greu de parcurs şi de procesat. Motoarele
ni web în cele mai diverse contexte. ~ caută în internet sau părţi ale acestuia, pe de căutare au ajuns să fie specializate şi pe
baza unor cuvinte cheie; alte categorii de informaţie decât cele cla-
• tG~;f",""",.-;o.loţ"" ••-~
~ păstrează un index al cuvintelor pe care sice. Astfel, Google oferă şi posibilitatea de
'''''''''''!.''* "'"
.,.. t.-:
fk \.4Ow
le-au găsit şi locul unde le-au găsit; a căuta imagini (grupate pe diverse dimen-
~ permit navigatorilor să caute cuvinte sau siuni). Cele mai accesate motoare de
GO"'Jgle :.. aPl'.'.tt:r~~M"."IU ::;'I··~b."''' combinaţii ale acestora în acel index. căutare diferă de la ţară la ţară şi de la an la
Web F=.~1·1'00II~,""", ••• f9 Motoarele mai vechi de căutare aveau an. La nivel global, conform unui studiu
un index care conţinea câteva sute de mii disponibil la http://marketshare.hitslink
de pagini sau documente şi răspundeau la .com, pe primul loc se află Google, cu
câteva mii de cereri zilnic. Astăzi motoarele 77,04%, urmat de Yahoo! (12,46%) şi MSN
I ~da~~
de căutare indexează sute de milioane de (3,33%) - vezi imaginea de mai jos.
er.w ••••••• ct\Ip1IlOllp Y-""'IF\IIIU c••••..•••••
'.., •...tk~.Clilţnv. "'14_:'
IaChlp SI*?"",,,,,,U.'U!fMUta~_
d''$I1 'l'
pagini, şi răspund la zeci de milioane de ce- Pentru ca unele motoarele de căutare să
~~~c IP r
eo.-.lItU~lUo.000IiItk;fl1Ct1lP~
ţ~"~i"'f!l.~1;1~·r':Yl.
'1••
,,:",",-
.rm~ah"O'JI;olU
reri de căutare zilnic. Motoarele de căutare indexeze şi să furnizeze navigatorului inter-
ţt"'l"uf.ţ.IOOr_F,..,. ••, 5h"."Mto..no Jo;'.:
••,,_,
." net informaţii des-
Ct!lf.B2..E.21:lJTl PI!N •••.ftd 1« v8'..tt: fl
'.eJ'v.,~.I""ICloOtiJIlI~Ooulle"'dlipf:!J-·""'H.lmj:;rt .•••,rc.t:J ;ţ;t~,u,,~
• 77 .04% • Google • Global pre site-uri este ne-
,
4ttp.,uu,tCI1IP c•.•.•.IlIUGlluclllCIl,P ' .•
,
Bhl'''<! CHIP_CliIP}~~
12.46%· Yahoo • Global cesar ca în secţiunea
1Il'4:'"'' '.nII" ~.e""ltfw,,, •• mprtr.~tuJ:tlIP ".~'f~QjlIllIol.t •••••• '"'tit",
'iGUU'(fo!"'<t,-aJ'I'~U4CttIPS~y.,
j '''''' _, 'f
••.••
n"
• 3.33% • MSN • Global <header> a pagi-
~
1~Ut111l1OQ ,~,:uu' GG!lllHl<U1<1\l-IJ~
me~nl.l<d~tCl1' m.Jj duC •••• c~ 'oo4l'I.1'~ Cll11' nilor web să existe o
UI.I. r~ndulW:. YOf pul" ~fttWlLt lIltlml'lencuu~ (lin ". 2.12%· AOL· Global
t""Jch'I'
descriere a site-ului
CHIP Onl!OO. BllmW.tr_T~oll:!'J.Jncefl:me ~~Lw.r • 1 .38% • Ask • Global
,I.'Il*l!II9<tt";""'Iq,_tltfllnd'dtlg.nol\l~
,no:t1.mt·~d,o)l.,,'JtI.:t\lm~'lgl
q<ln.:elhK~'"m • ..J/'Jff lI/Vrl
.0.24% . Altele
respectiv, prin in-
~"'" termediul meta
TAG-urilor.
INTRODUCERE - iNVATAREA CONTINUA
De exemplu, în meta TAG-uri se pla- cuvintelor cheie să fie făcută concis şi clar, lui, poate oferi detalii care altfel ar rămâne
sează informaţii despre domeniul de activi- evitându-se plasarea unor texte lungi. necunoscute persoanei care îl accesează. De
tate, cuvinte cheie care descriu acest dome- aceea, pentru situaţia în care un site are
niu, autor etc. Harta site-ului multe ramificaţii (nivele şi subnivele) şi
Este indicat să nu fie niciodată omise Deoarece motoarele de căutare nu oferă chiar dacă structura sa ar trebui să reiasă din
meta TAG-urile dintr-o pagină web. Deşi decât informaţii punctuale asupra unui site, organizarea meniurilor şi legăturilor, este
unele motoare de căutare nu se mai bazează adică o referinţă face legătura către un recomandată totuşi plasarea unei hărţi a
exclusiv pe meta TAG-uri, specificarea punct din structura site-ului, este greu ca site-ului în structura acestuia. Harta
setului de caractere utilizat, domeniul, cineva să aibă o privire de ansamblu asupra site-ului mai oferă informaţii şi despre acele
cuvintele cheie etc. oferă detalii importante ariei pe care o acoperă site-ul. Plasarea la pagini care nu figurează în meniuri şi per-
despre respectiva pagină web. Este de dorit vedere a unei legături către o seCţiune dis- mite o navigare uşoară direct la acele pagini
ca descrierea conţinutului, domeniului şi tinctă a site-ului, care să conţină structura care îl interesează pe cel care le accesează.
REGULI XHTML
World Wide Web Consortium (W3C) reco- XHTML 1.0 Transitional se foloseşte În situ- mai vechi HTML În XHTML, atunci TAG-
mandă utilizarea limbajului XHTML În locul aţiile când se urmăreşte realizarea unui cod urile se vor recodifica astfel:
HTML. XHTML este un limbaj hibrid, arată şi cu facilităţi HTML care să arate bine şi În <TITLE>Revista CHIP Online</TITLE>
funcţionează ca HTML, dar are la bază XML. browsere care nu Înţeleg CSS. Declaraţia de
se va scrie
Pentru cei care s-au obişnuit să utilizeze lim- tip DTD este:
<title> Revista CHIP Online </title>
bajul HTML, trecerea la XHTML este foarte <!DOCTYPEhtml PUBLIC,,-//W3C/ /DTD XHTML
uşoară.
În mod asemănător, <P> devine <P>,
1.0 Transitional/ /EN"
Utilizarea standardului XHTML 1.0 Transi-
<BODY> devine <body> şi aşa mai
,,http://www.w3.org/TR/xhtmll /DTD/ xhtmll-
tional, o versiune a XHTML care funcţio- transitional.dtd"> departe.
nează bine pe browserele actuale dar şi pe XHTML 1.0 Frameset se foloseşte În situaţiile I!lPuneţl toate atributele în
cele mai vechi (Netscape Navigator 4 şi când se urmăreşte partiţionarea ferestrei lijapostrofuri
Internet Explorer 4), permite designerilor browserului in două sau mai multe cadre. În HTML, nu este obligatoriu ca atributele
web să modifice fără probleme pagini web Declaraţia de tip DTD este: TAG-urilor să fie puse Între apostrofuri. În
deja publicate În internet dar şi să elaboreze
<!DOCTYPEhtml PUBLIC,,-//W3C//DTD XHTML XHTML aceasta devine obligatorie de exem-
pagini noi folosind aceleaşi tehnici. 1.0 Frameset//EN" plu width="55" şi nu width=55. Aplicaţi
Comutarea de la HTML tradiţional la XHTML ,,http://www.w3.org/TR/xhtmll /DTD/xhtmll- această regulă tuturor atributelor.
1.0 este la Îndemâna oricui dacă respectă frameset.dtd">
următoarele reguli simple: 1'1Toate TAG-uriletrebuie
Declaraţia de NAMESPACE urmează imediat l1li să fie închise
aceleia de DTD şi are forma:
gliDeschldeJidocumenteie
NAMESPACEadecvat
CU DOCTYPE
<html xmlns=,,http://www.w3.org/1999/xhtml''
xml:lang= "en" lang="en">
În HTML, se pot deschide TAG-uri fără ca ele să
fie Închise neapărat cu TAG-ul pereche de ex.
se poate folosi <P> şi <li> fără a le şi
Documentele XHTML (ca orice document Înlocuind TAG-ul <html >.
Închide:
HTML pot avea extensia .htm sau .html) tre- ilIE Multe pagini XHTML Încep cu un prolog
buie să Înceapă cu declaraţia DOCTYPErestul XML opţional «?xml» care precede <p>Un TAG ramas deschis.
documentului fiind identic cu unul HTML; declaraţiile DOCTYPE şi NAMESPACE. Din <p>Un paragraf fara TAG-ul pereche
<!DOCTYPEhtml PUBLIC,,-//W3C//DTD XHTML nefericire acest prolog XML cauzează pro- În XHTML, fiecare TAG, odată deschis,
1.O Strict/ /EN" bleme În unele browsere şi este recomand- trebuie să fie Închis:
,,http://www.w3.org/TR/xhtmll /DTD/xhtmll- abil să nu fie folosit. Scopul prologului este <p>Un TAG ramas deschis.</p>
strict.dtd"> de a specifica codificarea alfabetului utilizat <p>Un paragraf initial fara TAG-ul
<html> În pagina web. ereche acuma trebuie inchis.</ >
<head> Dacă intenţionaţi să construiţi o pagină care
<title>lIustrare XHTML</title> să vizeze o arie de cuprindere internaţională ",fAG-urile nepereche trebuie
</head> şi care poate conţine caractere non ASCII lijînchlse şi ele
<body> puteţi utiliza meta TAG-ul Content-type În
locul prologului XML. Exemplul următor ilus- În XHTML, chiar şi TAG-urile nepereche pre-
<p>continut</p>
cum <br> şi < img> trebuie să fie ele Înse-
</body> trează acest meta TAG:
le Închise. Aceasta se face plasând un spaţiu
</html> <meta http·equiv="Content-Type"
content="text/html ;charset=UTF-8"/>
urmat de slash /> la sfârşitul TAG-ului:
XHTML 1.0 poate specifica trei tipuri de
<br />
documente XML care corespund la trei
declaratii de tip DOCTYPE(DTD): Strict, !tScrleţl toate fAG-urile cu <img src="ojmagine.gif' />
Transitional, şi Frameset. iiicaractere mici De remarcat spaţiul care precede slash-ul.
XHTML 1.0 Strict se foloseşte În situaţiile Spre deosebire de HTML, XML face distincţie Acesta este obligatoriu pentru ca browser-
când se urmăreşte realizarea unui cod curat Între caractere mici şi majuscule. Toate ele mai vechi să poata reprezenta corect În
şi ordonat. Se foloseşte Împreună cu CSSşi TAG-urile XHTML şi atributele trebuie ecran standardul XHTML.
declaraţia de tip DTD este: scrise cu caractere mici, În caz contrar Observaţie: pentru a fi valid şi accesibil
<!DOCTYPEhtml PUBLIC,,-//W3C//DTD XHTML documentul nu se validează. Validarea TAG-ul <img> trebuie să aibă incluse atri-
1.0 Strict/ /EN" trebuie să vă asigure că pagina web nu butele alt= ,," şi title=,," forma nouă fiind:
,,http://www.w3 .org/TR/xhtmll /DTD/xhtmll- are erori. <img src="ojmagine.gif' alt="o imagine"
strict.dtd"> Dacă doriţi să modificaţi un document title="coperta CHIP"/>
STANDARDE WEB
Designerii şi programatorii de pagini web DERANJANT: De multe ori o pagină arată
sunt puşi deseori În situaţia de a modifica de diferit În browsere diferite.
mai multe ori unele secvenţe de cod pentru a
rezolva problemele ridicate de diverse versi-
uni ale aceloraşi browsere şi a face ca o pagină
să se afişeze corect. Aceaste cerinţe provoacă
un consum de timp substanţial mărit pentru
aceeaşi pagină web. Situaţia tinde să se Înrău-
tăţească datorită utilizării masive a telefoniei 18 <tr>
mobile sau a altor dispozitive portabile ca- 19 <td>Celula<br />2-1 </td>
pabile să navigheze pe internet. Pentru a na- 20 <td><img src="table_pcpractic.jpg"
viga internet, acestea au nevoie de software border="O"/></td>
nou adecvat modului lor de funcţionare, fapt 21 <td>Celula<br />2-3</td>
care ce complică semnificativ procesul de pro- 22 </tr> dardul HTML nu precizează o valoarea impli-
gramare a unor pagini web. 23 <tr> cită pentru acest atribut. Atunci când se con-
Pentru a face internetul un loc mai bun atât 24 <td><img src="table_pcpractic.jpg" struieşte o pagină web şi se omite precizarea
pentru web designeri cât şi pentru utilizatori, border="O"/></td> valorii pentru atributul CELLSPACING,două
este extrem de important ca producătorii de 25 <td>Celula<br />3-2</td> browsere diferite vor afişa spaţieri diferite În
browsere şi programatorii să respecte cu 26 <td><img src="table_pcpraetic.jpg" jurul celulelor tabelului.
stricteţe standardele atunci când dezvoltă noi border="O"/></td> Ca rezultat apare o regulă de scriere a TAG-ului
aplicaţii. Internetul are nevoie de standarde 27 </tr> TABLE,care cere ca atributul CELLSPACINGsă
deoarece acestea asigură accesul tuturor la 28 </table> fie declarat În mod ex licit. Aşadar, secventa
aceeaşi informaţie, afişată În acelaşi fel. 29 </body> <table cellpadding="3" border="l "> .
Un exemplu des Întâlnit de interpretare difer- 30 </html>_ </table>
ită a codului HTMLeste cel al formatării spaţi- În browserele Firefox şi Opera tabelul se duce la afişarea incorectă a spaţierii celulelor
i1or. De regulă, dacă Între elemente HTML afişează corect, pe când În Internet Explorer În browsere diferite, pe când, În cazul:
sunt plasate mai multe spaţii (a nu se confun- (fie el IE7 sau IE6) nu. Astfel, la afişarea prin <table celispacing="O"cellpadding="3"
da cu caracterul care forţează un intermediul browserului Microsoft se observă border="l "> </table>
spaţiu În linie) acestea sunt ignorate.lnternet o dungă neagră sub imaginea din colţul tabelul va fi afişat corect, indiferent de tipul
Explorerul Însă are un comportament diferit. dreapta sus al tabelului. browser-ului.
În acest cod sursă se reprezintă un tabel care Dacă privim cu atenţie codul sursă se observă Un alt exemplu mai vechi provine din imple-
are În celule text şi imagini: ca la linia 15 din cod, după TAG-ul de imagine mentarea diferită a standard ului HTML pentru
1 <!DOCTYPEhtml PUBLIC,,-//W3C//DTD există cel puţin un spaţiu. Acesta provoacă TAG-ul BODY În browser-ele Netscape şi In-
XHTML1.0 Transitional/ /EN" mărirea nedorită a Înălţimii celulei şi apariţia ternet Explorer. Poziţionarea secţiunii BODYse
2 ,,http://www.w3 ,org/TR/xhtmI1 /DTD/ unei dungi negre (culoarea de background) face cu TOPMARGINşi LEFTMARGINÎn internet
xhtmll-transitional.dtd"> sub imagine. O altă consecinţă este că Întrea- Explorer, iar pentru Netscape se face cu MAR-
3 <html> ga linie este afectată, deci şi imaginea din GINHEIGHTşi MAR'GINWIDTH.Dacă se doreşte
4 <style> stânga sus. Pentru cineva care nu are exerci- poziţionarea corectă a paginii web În colţul din
5 td { padding: Opx; background-color: #000000; ţiul citirii codului HTML această deplasare stânga sus a ecranului pentru ambele browsere
text-align: center; poate deveni o problemă supărătoare pentru atunci TAG-ul BODYse scrie:
6 font-size:14px; color: #FFFFFF;font-weight: că o asemenea eroare se depistează greu. <body topmargin="O" leftmargin="O" margin-
bold; Acest defect de reprezentare se elimină cel height="O"marginwidth="O"> </body>
7 font-family:Verdana, Arial, Helvetica, mai simplu scriind liilfflltjMi'-iIMtffltj'mmw-lolxl Mjffit!j§lit§ţifl.i- _Io'xl
sans-serif; 1 fără spaţii de exem- fie ~<it '{.... !ia r""",,,,, !:le\> .... !ia ~
Ao .•<it '( H'"
8 </style> plu linia de cod 12 sau Addo"",I~H'IHTML~""';;'~""'-1<ml ~i ~-B_' l. l.oca6on I""""-I<ml 3 II
9 <body>
10 <table border="l ">
20.
Un alt exemplu, tipic
11ARGINHEIGHT
. ~
Calea de urmat la browser, efortul de a armoniza codul şi se recomandă de câte ori realizarea site-
Indiferent de structura site-ului, publi- scris cu cerinţele specifice browserelor me- ului o reclamă. O caracteristică Java Script
cul ţintă sau domeniul acestuia, utilizarea rită facut. de reţinut este că scripturile se execută pe
XHTML este cea mai bună cale de urmat în Nu trebuie uitat că standardul pentru calculatorul clientului, caracteristică im-
realizarea de pagini web, aşa cum de fapt JavaScript face parte din construcţia portantă atunci când se doreşte desconges-
recomandă şi W3C . Pe lângă XHTML, fiecărui browser. Dat fiind faptul că imple- tionarea dialogului cu serverul internet.
W3C recomandă insistent folosirea CSS. mentarea JavaScript OS) este, cu mici ex- Dacă programatorul web stăpâneşte aceste
Chiar dacă implementarea standardelor cepţii, identică în cele mai utilizate browse- trei limbaje, XHTML, CSS şi JS, poate ataca
pentru XHTML şi CSS diferă de la browser re, folosirea de cod JS nu va ridica probleme cu succes un proiect web nou.
Scurt periplu de-a lungul
evolutiei
, browser-elor web
Programele de navigare pe internet fac parte din viaţa noastră de zi cu zi şi cu greu ne-am mai putea Închipui astăzi acti-
vitatea profesională, dar şi divertismentul after hours În lipsa acestora. Să ne uităm puţin În urmă şi să vedem care au fost
etapele de parcurs pentru ca browser-ele web să ajungă la nivelul pe care ÎI cunoaştem În zilele noastre. Mihaela Dogaru
rima etapă, a browser-elor avant la let- faptul că acest browser a introdus pe piaţă Netscape, care s-a impus ca browser co-
F
ără alte introduceri, abordăm direct şi precizarea obiectivelor, stabilirea de imagini şi grafică, creionarea structurii
problematica şi vă prezentăm câteva cuprinsului şi pregătirea lui, culegerea şi site-ului şi a elementelor de navigare, ex-
elemente care trebuie avute în vedere structurarea informaţiilor, formularea plicitarea domeniilor vizate şi a elemente-
la planificarea unei pagini web: definirea textelor pentru web, planificarea inserării lor de pagină şi, nu în ultimul rând, com-
patibilitatea cu diferite browsere şi
Sa-uri. Toate acestea trebuie să funcţio- 1---
- - - -
neze într-un context real. De aceea, tre-
buie să fie precizate atributele paginii web
prin prisma destinatarului:
• pe cine are pagina de web în prim-plan;
• cu ce intenţie se face pagina web (infor-
mare, divertisment, educaţie, profesie);
• cu ce mijloace (grafică, imagini, culori,
sunet, video, rame, tabele);
• cu ce tehnică (a proiectantului, a clien- I
tului, programe şi variante de programe,
• -
instaIări);
• natura paginii (privată, firmă, parte
dintr-o organizaţie mai mare, furnizor de
servicii); I -. I
I
.....
~-- ,,--.:!
Structura site-ului
Dacă până acum am vorbit la modul general despre tendinţele actuale şi planificarea site-urilor, acum
a sosit momentul să discutăm despre tema concretă a acestui special, aplicând deja câteva elemente dintre cele
prezentate anterior. Victor Gheorghe
P
roiectul ales ca temă pentru acest carea structurii unui site trebuie să ţină mentele care le definesc, tiraje, public
CHIP Special constă în realizarea cont de anumite aspecte complexe. Site-ul ţintă etc.) inclusiv site-urile acestora;
unui site al editurii în vederea pro- care trebuie realizat trebuie să fie conform - pagina de început să conţină prezenta-
movării imaginii sale în internet. Aşa cum următoarelor cerinţe: rea editurii;
am văzut în articolele anterioare, planifi- - să prezinte publicaţiile editurii (cu ele- - să fie compatibil cu browserele IE6,
site-ul, ierarhia elementelor grafice, struc-
tura elementelor, spaţierile şi culorile. S-a
pus accent pe următoarele elemente:
- textul pentru paragrafe să aibă mări-
mea şi culoarea stabilită (s-a ales culoa-
re gri pentru că oferă un aspect mai plă-
cut faţă de negru, care prezintă un con-
trast prea puternic);
- titlurile, subtitlurile, capul de tabel şi
culoarea de fond să se asorteze cu culo-
rile logo-ului;
- pentru a marca începutul unor noi pa-
ragrafe să fie folosit un bullet făcut în
aceleaşi culori;
- s-a creat un tabel pentru a exemplifica
atributele grafice folosite (culoare, spa-
ţiere, aranjare);
- s-a preferat folosirea de culori alterna-
tive pentru fundalul liniilor tabelului
faţă de obişnuitele caroiaje pentru că
IE7, Firefox şi Opera (se vor avea în rezultatul are un aspect mai plăcut şi
vedere cele mai recente versiuni down- Având la bază cerinţele amintite anterior, permite o urmărire vizuală mai uşoară;
loadabile) pe sistemele de operare se poate trece la pasul următor, care con- - s-au creat două liste de nivell, respec-
Windows, Mac şi Linux; stă în elaborarea machetei grafice pentru tiv 2 cu caracteristici diferite, tot în
- deoarece site-ul va fi unul de informare una din paginile site-ului (de obieci pagi- scop de exemplificare.
asupra ariei de activităţi publicistice na principală). Macheta grafică (altfel Macheta poate fi rezultatul unui proces
acoperite de editură, acesta trebuia să spus o imagine statică a ceea ce dorim să iterativ în care prin sugestii şi modificări
se adreseze tuturor categoriilor de fie afişat în fereastra browser-ului) poate succesive se ajunge la varianta finală
vârstă; fi făcută cu ajutorul unui program de acceptată de către solicitant. Forma finală
- pentru fiecare publicaţie trebuie afişată grafică de tipul Adobe Photoshop, GIMP a acesteia constituie punctul de plecare al
imaginea unei coperte reprezentative sau Corel Photopaint. Se pot utiliza pen- programării.
sau un colaj de mai multe coperte; tru elaborarea unor asemenea machete şi
- dat fiind caracterul de prezentare al programe care lucrează vectorial, precum Zone
site-ului, soluţia grafică cerută se referă Corel Draw sau Adobe Illustrator. Pe machetă am definit zonele care vor fi
la înălţime fixă centrată orizontal şi Informaţia a fost formatată în machetă tratate distinct la realizarea HTML a unei
vertical în pagină: ţinând cont de cerinţe. S-au avut în vedere pagini de test. Zonele cu imagini, headerul
- header-ul de pagină să conţină logo-ul dimensiunile paginii, fixe pentru întreg şi coloana din stânga vor fi populate cu
editurii;
- printre culorile paginii să se regăsească
obligatoriu cele din logo;
- meniul să fie orizontal astfel ca butonul
fiecărei publicaţii să fie distinct;
- aranjarea informaţiei în paginile de
prezentare ale publicaţiei să fie pe co-
loane, iar cea din stânga să conţină
imaginea publicaţiei;
- coloanele să fi larg spaţiate;
- să fie folosit un font neserifat în toate
secţiunile paginii;
- rezoluţia de referinţă a ecranului să fie
de 1.024 x 768.
La cele de mai sus s-a adăugat specifi-
carea publicaţiilor care formează obiectul
site-ului: CHIP, Level, FOTO-VIDEO di-
gital, PC Practic, şi CHIP Special, precum ""88
şi cele două site-uri CHIP Online şi Level
Online. În acest fel, prin adăugarea publi-
caţiilor s-a putut fixa conţinutul meniului STRUCTURARE: Macheta trebuie Împărţită În zone, pentru a putea trece cu succes la
site-ului. programare.
imagini de test, intrucât în aceasta fază ~ookma<b lools l!eIp
. a trasa chenarul exterior. Se remarcă un w~ere t:h?" ;1comeIrom! w~ere C/f/f I flelJOme/
spaţiu exterior lăsat pe contur astfel ca as- Conlrary ta popular beliel. Lorelfllpsum is not sirnply random text, It has
roots In a piece ot classical Latin llterature lrom 45 se, mal(ing it over
There are many variations of passages of Larern !psum available, but
the majorily have S~lffeted alletation in some fann, by injected humotrt,
2000 ve-ars old. Richard McClintock, a latin
pectul grafic să lase impresia de "aerisit". Hampden.Sydney
professor
College in Virginia, looked up one of Ihe more obscure
al or randomised words which dant loof~ even Slightly believabre. It you
are goin9 to use a passage- 01 Lorem lpsum, you need to be Sute there
iram a Lorem Ipsum passage, anei going
Întrucât conţinutul paginii se va plasa latin wordS, consectetur,
through Ihe cites 01 the word in classical lilera1ure, discovered the
isn't anything embşrr-;;;ssing hidden in the middle of text .. A.II the Lorem
lpsum generatots ro thf: lntemet tend to repeal pfedefined chunks as
necessary, mal.ing this the 1irst true gerlerator on the Internet, It uses a
într-un chenar interior spaţiat pe contur ~mdoubtable saurce. lOfem IpSl.ltn comes Irom sections 1.10.32 Md
1.10.33 ot "de Finibus BonOflJtn el Ma!orum" (The E>..1remes ot Good anei dictionary of aver 200 latin words, combine-d wrth a handf~ll of mode-!
sentence structures, 10 generete lorem Ipsum which looks teasDrlsble,
faţă de zona 1 este nevoie de zona 2 Ev~) by Cicero, written in 45 ec. This book is a trealise on the theory of
ethies, very popular during the Ren.sllssance. The Iirst ijne of Larem The genefatecl Lorem Ipsum is therefote always free from repe1ition,
(negru). În cadrul zonei 2 se plaseză ele- Ipsum, "larem lpsum dolar sit amet.. .•, comes from a line in section
1,10.32.
injected !)umour, or noo-characteristic words ete.
mentele paginii. Zona 3 (roşu) va conţine TM standard chunk of lorem Ipsum used since the 1500s i-s
(.' patagraphs
rwotds
reproduceci below fOr thOse in1ereste(.t sectioos 1,10.32 and 1.10.33
headerul paginii, logo-ul Vogel Burda from "de Finibus Sonor-vm el Malorurn" by Cicero are also reptoduce-d in
îb"Y1es
rlists
their exact OI19lnaJ form, acc-ompanied by EngliSh versions hom 1he
Communications. va 1914 Iranslalion by H. Rackham
x Name
i] -
T
Go l••n~ conţin imagini, deobicei acestea au exten-
sia .jpg, gif sau .png.;
Fald •••
- -ljlllllij!lll.• illll.f!ll;.W§!I!l.-"".i!l- ..:J img File Folde, - în directorul style punem fişierele de
...)img ...).lyle File Falde,
~Cdlegolii 8 K8 Filelox Document
formatare .
...) .lyle
.!1index 8 K8 Fuelox Document Respectând aceste reguli, în funcţie de
!l••• vici 8 K8 Fuelox Document complexitatea site-ului, se poate concepe
o structură de directoare care să fie în
concordanţă cu structura logică a acestu-
ia. În acest caz, un anumit fişier corespun-
zător unui obiect aflat pe o anumită
ramură a structurii logice poate fi identi-
modul cum se aşează textul în pagină Să luăm ca exemplu un site web, ficat uşor dacă este plasat corect în struc-
funcţie de diverse atribute CSS. Codul fişierul cu numele index.html are legături tura de directoare.
CSS funcţionează identic pentru orice cu două pagini, fişierele numite cate-
browser. Practic, totul se reduce la o ope- gorii.html şi servicii.html. Pagina mai Nume de directoare
raţie copy/paste fără a mai fi nevoie să se conţine o imagine (fişierul logo.jpg) şi După finalizarea site-ului, fişierele acestu-
facă nici o intervenţie. fişierul cu formata rea (format.css), deci ia sunt publica te (plasate) pe server, pe
site-ul este compus în realitate din 5 care însă nu se află instalat neapărat sis-
Fişierele site-ului fişiere. temul de operare Windows.
Împărţirea site-ului pe zone are şi un co- Pentru a evita eventuale probleme tre-
respondent, să-i zicem aşa, fizic, repre- Convenţii buie respectate anumite reguli de scriere:
zentat de structura de directoare şi fişie- Atunci când se accesează o pagină web cu - toate numele de directoare şi fişiere se
rele aferente site-ului. Spre deosebire de ajutorul unui browser, de exemplu scriu cu litere mici. Spre deosebire de
un fişier MS Word sau OpenOffice, în http://www.vogelburda.ro. serverul web Windows, alte sisteme de operare fac dis-
care imaginile se inserează în document şi caută automat un fişier cu numele tincţie între majuscule şi minuscule. Altfel
fac parte din acesta, în cazul unei pagini index.html sau index.htm şi în cazul în spus, pot exista în acelaşi timp şi acelaşi
web, acestea sunt fişiere separa te. care îl găseşte returnează pagina brow- loc un fişier având numele scris cu majus-
Documentul HTML este de fapt un fişier serului. Acest lucru este similar cu acce- cule şi altul scris fără majuscule. Sistemul
care conţine numai text şi poate fi editat sarea directă a adresei http://www.vogel- de operare Windows nu face această dis-
cu un editor simplu de texte. Extensia burda.ro/index.html. Prin convenţie, tincţie .
.html sau .htm face ca acesta să se deose- punctul de intrare într-o pagină web este - nu folosiţi diacritice sau spaţii în nu-
bească de alte fişiere text. un fişier cu numele predefinit index, ex- mele fişierului. Folosirea de spaţii sau dia-
Un document HTML este formatat cu tensia putând diferi de la caz la caz (htm, critice în scrierea adreselor de internet
TAG-uri HTML care definesc aspectul html, php, shtml). presupune o operaţie de convertire. De
său atunci când este afişat în fereastra Deoarece chiar şi pentru pagini web exemplu, un fişier cu numele "indexul
unui browser. În fereastra browser-ului se simple în mod normal sunt folosite mai meu.html" va trebui apelat cu "indexul
afişează şi imagini, cu toate că acestea nu multe fişiere, se impune ca acestea să fie %20meu.html". Operaţia este greoaie şi
sunt con ţinute fizic în fişierul HTML. organizate într-o structură de directoare, poate fi evitată simplu nefolosind spaţii în
Acestea sunt păstrate extern şi afişarea lor de obicei după un anumit tip. numele fişierului. În ceea ce priveşte fo-
este realizată cu ajutorul TAG-ului Astfel, pentru exemplul simplu menţio- losirea diacriticelor în numele fişierelor,
<img> din documentul HTML. nat mai sus vom proceda în felul următor: acestea trebuie evitate chiar şi atunci când
lucraţi în sistemul de operare Windows.
Operaţiile ulterioare de redenumire, co-
piere sau ştergere a fişierului pot genera
erori.
index.html - folosiţi întotdeauna ,,1" în loc de ,,\".
Sistemul de operare Windows este singu-
" .•..•.•.
'r..• Il.,•••••••••
l' ••oh.,
0 .••.••.••.•. 100 ••.•.•••.•.•••••••••. 12.0.1.\.
Formatarea HTML
După schiţarea machetei, următorul
pas constă În transpunerea acesteia
În practică folosind HTMl şi CSS.
Victor Gheorghe
D
Upă ce am stabilit modul în care se Secţiunea <html> (liniile 3-150) are rel="stylesheet" type="text/css" />
partiţionează macheta, putem elabo- două secţiuni <head> liniile 4-14 şi 13:
ra o primă variantă de cod HTML (pe <body> liniile 15-149. 14: </head>
CD această variantă este reprezentată de 3: <html xmlns=''http://www.w3.org/1999/ 15: <body>
fişierul macheta-meniu-cu-css1.htm din xhtml"> <1- continut sectiune body ->
directorul surse/step-l-macheta). Înainte 4: <head> 149: </body>
de a trece la programare, reamintim fap- 5: <title>Vogel-Burda Communications: 150: </html>
tul că standardul după care se pro- </title>
gramează este XHTML 1.0. 6: <meta http-equiv="Content-Type" con- În secţiunea <head> se declară titlul
Codul CSS pereche pentru cel HTML tent="text/html; charset=iso-8859-1" /> paginii <title> (apare în manşeta de
de pe CD este listat în oglinda "Script CSS 7: <meta name="Description" sus a ferestrei precedând numele brows-
pentru machetă" (alternativ, puteţi apela content="VogeIBurda Communications - er-ului) şi meta TAG-urile pentru descri-
la fişierul vbcomm1.css din directorul Revista Chip, Level, PC Practic" /> ere pagină, cuvinte cheie, autor, titlu.
surse/step-l-macheta/style/ de pe CD). 8: <meta name="Keywords" content="vogel- La linia 12 se face legătura cu CSS-ul
În cazul machetei realizată în cod burda, vogel burda, editura, Chip, Chip extern care se găseşte în directorul style şi
HTML (ATENŢIE: numerotarea este Special, are numele vbcomm1.css. Textul CSS
folosită exclusiv pentru a uşura localiza- 9: revista Chip, revista, revista Level, PC putea fi inclus direct în corpul machetei,
rea liniilor!), documentul începe cu de- Practic, revista PC Practic" /> dar asta ar fi însemnat că respectivul cod
claraţia de tip, liniile 1-2. 10: <meta name="Authors" content="Vogel ar fi trebuit inclus în sursa fiecărei pagini
1: <!DOCTYPEhtml PUBLIC,,-//W3C/ /DTD Burda Communications" /> html a site-ului.
XHTML1.0 Transitional/ /EN" 11: <meta name="Title" content="Exemplu Includerea CSS direct în corpul docu-
2: ,,http://www.w3 .org/TR/xhtmI1 / de cod pentru prezentare" /> mentului (cu TAG-ul <script» are un
DTD/xhtmll-transitional.dtd"> 12: <Iink href="style/vbcomml.css" dezavantaj major: la orice modificare în
PRIMII PAŞI: 26: width="928" align="center">
Aşa arată 27: <tr><td><a href="index.htm"><img
pagina după src="img/macheta-header.jpg" width="928"
ce a fost 28: height="78" title="Vogel Burda
inclus titlul. Communications"
bo rde r="O"/></ a></td></tr>
29: </table><!-sfarsit tabel header ->
I I
..
trasează chenarul exterior, încorporat ca
atribut. Nu s-a mai plasat în CSS deoarece
nu va fi refolosit. Totodată, cu acest T AG
17: <!-inceput tabel principal ->
18: <table celispacing="O" cellpadding="O"
style="border:1 px solid #002f2f;"
19: width="968" height="61 O"align="cen-
ter">
<!- continut zona 1 ->
147: </table><I-sfarsit tabel principal ->
se stabilesc dimensiunile chenarului 968 x
610 pixeli centrat.
1 px #8e9da8;">
Digital</a></td>
1 px #8e9da8;">
href="javascript: void(O)">PC
Practic</a></td>
47: <td width="120" bgcolor="#02243d"
c1ass="inmenu">
href='javascript: void(O)">CHIP
Special</a></td>
Pregătirea imaginilor Dimensiunile mari de imagini în pagi- siunile celor două variante era nesemni-
În cazul în care veţi folosi imagini JPG tre- nile web sunt consumatoare de spaţiu şi ficativă (GIF - 12,08 KB, iar JPG 9,18 KB),
buie să ştiţi că aceste trebuie să fie în mod măresc timpul de descărcare. Puteţi evita formatul preferat a fost JPG.
RGB şi nu CMYK. Nu contează dacă ele au aceste neajunsuri folosind imagini mici, Fiecare din paginile ste-ului va avea în
fost obţinute cu o cameră digitală, prin iar pentru când se doreşte neapărat coloana din stânga câte o imaginie
scanare sau din alt document. Este bine să prezentarea unei imagini mari folosiţi reprezentativă pentru publicaţia prezen-
păstraţi originalul pentru situaţia când este scripturi. Un asemenea script îl găsiţi pe tată în acea pagină. Imaginile care
necesară modificarea imaginii. Dacă imag- CD (fişierul thumbnailviewer.js din direc- urmează a fi incluse în coloana din stânga
inile originale sunt CMYK sau alb/negru, torul surse/php-div-css-js/stylel), care a şi a paginilor trebuie să aibă dimensiunile
transformaţi-le întotdeauna RGB la fost utilizat în construcţia site-ului cu php. de 251 x 465 pixeli. Pentru prima pagină
rezoluţia de 72 dpi. Am recomandat Scriptul crează o fereastră care se afişează se foloseşte o compoziţie care conţine mai
această rezoluţie pentru imaginile pentru peste pagina web curentă şi afişează ima- multe coperte selectate din publicaţiile
web, deoarece monitorul nu poate afişa ginea dorită la dimensiuni mari. editurii. Dată fiind multitudinea de culori
decât la acest număr de pixeli per inch. cu diverse nuanţe, formatul imaginii este
Îmbunătăţirea aspectului paginii web Tema concretă tot JPG.
se poate obţine şi prin utilizarea atributu- Revenind la tema CHIP Specialului de Pagina web mai conţine o imagine, de
lui "progresiv" aplicat imaginilor. În mod faţă, după ce am creat structura site-ului o natură mai specială, şi anume un
uzual, operaţia de afişare a unei imagini, şi am realizat codul HTML, putem trece la "shortcut icon" care de regulă conţine
fie ea JPG sau GIF, este echivalentă cu o introducerea imaginilor. Ca primă ima- logo-ul. Această imagine care are dimen-
scanare de sus în jos. Utilizând atributul gine ne referim la cea comună fiecărei siuni 16 x 16 pixeli se face de obicei în
progresiv este ca şi cum am împărţi ima- pagini, şi anume header-ul (fişierul câteva culori contrastante. Imaginea va
ginea în mai multe scanări succesive. vbcomm-header.jpg). Aşa cum rezultă apărea în fereastra browser-ului în linia
Prima scanare afişează imaginea la echi- din macheta paginii, imaginea trebuie să de adresă înaintea URL-ului, precum şi în
valentul unei calitatăţi reduse, scanările aibă dimensiunile de 928 x 78 pixeli. secţiunea bookmark-urilor, în cazul în
ulterioare îmbunătăţind gradual calitatea
primei scanări. Formatul JPG poate fi fo-
losit cu atributul progresiv, pentru imagi-
[,. care adresa web a fost memorată acolo.
Pentru ca un shortcut icon să fie afişat
corect nu se foloseşte TAG-ul <img>, ci
nile GIF efectul progresiv fiind realizat de Deşi aparent imaginea headerului TAG-ul <link>. Pentru cazul machetei
un mecanism asemănător numit întreţe- conţine puţine culori şi la prima vedere noastre instrucţiunea va fi:
sere (interlaced). GIF-ul ar fi fost formatul cel mai potrivit, <Iink rel="shortcut icon"
Prin utilizarea imaginilor cu efect pro- la o analiză mai atentă observăm însă că href="img/vbcomm.ico" />,_. _
gresiv se obţine o afişare rapidă a unei pa- imaginea conţine efectul de gradient pe Cu această din urmă instrucţiune pu-
gini web, fără a mai aştepta descărcarea toată înălţimea, ceea ce înseamnă că are o tem spune că site-ul nostru a fost garnisit
completă a imaginilor, mai ales când aces- mulţime de nuanţe intermediare pentru cu toate imaginile necesare şi putem trece
tea au dimensiuni mari. culori. Deoarece diferenţa între dimen- la finalizarea lui.
•• • Un site este o constructie, arborescentă realizată cu fisiere
.htm sau .html. Acestea trebuie stocate Într-o structură
.
alina I
de directoare care păstrează logica site-ului. Un fişier din
această structură este asociat cu fişiere externe pentru
elemente care intră În construcţia sa (imagini, scripturi
etc.). Plasarea fiecărui tip de fişier la locul potrivit
simplifică finalizarea site-ului. Victor Gheorghe
~.;.~;;.:f"'t
.....::~:.
- '.
:.•.:;:'.".l! .•••••
.r";»~l::
ornind de la macheta cu imagini
1;, Search
TooIs
r
Help
F= T
Întrucât vor rezulta multe fişiere, aşa cum Addtess 1
s-a precizat deja, va fi nevoie ca să le orga- r~oIdeIs _ download
U
n aspect pe care fiecare programator scripturi componenta afişată în fereastra browser-
HTML trebuie să-I aibă permanent în video sau audio etc.). Totalizând aceste ului). Codul CSS asociat butoanelor
vedere se referă la mărimea fişierului componente putem vedea că se poate meniului este:
HTML obţinut. Uneori, fişierele HTML ajunge la o cantitate substanţial mărită de td.inmenu { background-color: #02243d;
pot ajunge la sute de linii de cod, având date, astfel încât cele câteva secunde să nu cursor: pointer; font-family: Verdana, Arial,
astfel o mărime considerabilă. De multe fie suficiente pentru afişare în fereastra sans-serif; color: #FFFFFF; font-size:9pt;
ori se pune accentul numai pe complexi- browser-ului. font-weight: normal;} td.inmenu:hover {
tatea paginii şi este lăsat deoparte un În macheta realizată în articolul anteri- background-color: #BFOB34; cursor: point-
aspect şi mai important: cel care navi- 0r meniul are opt butoane. Să privim mai er; font-family: Verdana, Arial, sans-serif;
ghează pe internet este mereu grăbit, nu atent codul pentru unul din aceste bu- color: #FFFFFF; font-size:9pt; font-weight:
are răbdare să aştepte decât preţ de câteva toane: normal;}
secunde. Dacă în acest interval de timp <td width=,,69" bgcolor=,,#02243d" Se poate observa uşor că atributul style
pagina solicitată nu s-a încărcat în brows- c1ass="inmenu" style="border-right: solid din codul HTML poate fi transferat în
er, el trece mai departe. Deci, cu cât mă- 1px #8e9da8;"> <a c1ass="menu" codul CSS.
rimea fişierelor HTML este mai mică, cu href=,javascri pt: void(O)">CHIP<[a></td> După modificare codul HTML va fi:
atât pagina solicitată va fi mai repede Observăm că atributul style (care tra- <td width=,,69" bgcolor=,,#02243d"
afişată în fereastra browser-ului. sează o linie verticală la sfârşitul butonu- class="inmenu"> <a c1ass="menu"
Să nu uităm încă un aspect suplimen- lui) se repetă pentru fiecare buton. href=,javascript: void(O)">CHIP</a></td>
tar: pentru a fi afişat corect în fereastra Pe de altă parte, fiecare buton al iar cel CSS va fi:
browser-ului, un fişier HTML apelează şi meniului foloseşte acelaşi stil specificat cu td.inmenu { background-color: #02243d;
alte fişiere externe legate de el (imagini, atributul class="inmenu" (mai puţin cursor: pointer; font-family: Verdana, Arial,
sans-serif; color: #FFFFFF; font-size:9pt; EROARE: Fără
font-weight: normal; border-right: solid 1 px folosirea unui
#8e9da8;} td.inmenu:hover { backgroun9- artificiu, pagina
color: #BFOB34; cursor: pointer; font-fami- curentă nu ar fi
IV: Verdana, Arial, sans-serif; color: fost semnalizată
#FFFFFF; font-size:9pt; font-weight: normal; În lE 6.
border-right: solid 1 px #8e9da8;}
Deoarece meniul (ne referim de fapt
secţiunea respectivă din codul sursă)
există în fiecare fişier HTML al site-ului,
scurtarea codului va fi făcută în fiecare
dintre acestea. Este indicat ca de fiecare
dată când este posibil să transferaţi cât
mai mult cod în scripturile externe, chiar color: #FFFFFF; font-size:9pt; font-weight: solid 1 px #8e9da8;} .coutl { background-
dacă operaţiunea este consumatoare de normal; border-right: solid 1 px #8e9da8;} color: #02243d; cursor: pointer; font-fami-
timp, deoarece acest lucru creşte viteza de Prin intermediul liniilor de mai sus se IV: Verdana, Arial, sans-serif; color:
execuţie a paginilor web. realizează efectul de rollover în browser- #FFFFFF; font-size:9pt; font-weight: normal;
ele IE?, Firefox şi Opera, care însă nu este border-right: solid 1 px #8e9da8;}
Meniul fără probleme vizibil în IE6. Acestea descriu stilul pentru butoane
Dacă formatarea textului unui document Codul nu are efect de rollover în IE6 .c_overl pentru aspectul butonului la
HTML este relativ simplă, realizarea unui din cauza modului de implementare al selecţie şi .c_out1 pentru buton neselectat.
meniu care să funcţioneze corect pe toate standardului CSS. În codul HTML, pentru a specifica un
browser-ele poate ridica probleme. Să Browserele IE versiunea 6 şi cele ante- buton vom folosi:
luăm ca exemplu unul dintre butoanele rioare nu suportă :hover în CSS (cu <td width=" 1 04" bgcolor=,,#02243d"
meniului nostru (codul HTML şi CSS excepţia legăturilor, T AG-ul <a». Acest onMouseOver="this.c1assName='coverl ';"
pentru machetă se găseşte în directorul nejuns poate fi evitat prin folosirea Java onMouseOut="this.c1assName='coutl '" >
surse\step-l-macheta de pe CD-ul ataşat Script-urilor OS), pe cel puţin două căi: <a c1ass="menu" href=,javascript:
revistei): -+ făcând apel la evenimentele OnMouse- void(O)">PC Practic</a></td>
<td width=,,?3" bgcolor=,,#02243d" Over şi OnMouseOut concomitent cu cod Se observă că pentru evenimentul
c1ass="inmenu"> CSS - calea mai simplă; OnMouseOver aspectul butonului va fi
<a c1ass="menu" href=,javascript: -+ incluzînd în codul HTML un script dat de codul CSS .coverl, iar pentru
void(O)">LEVEL </ a></td> csshover.htc care poate fi descărcat de la evenimentul OnMouseOut acesta va fi dat
care se execută împreună cu codul CSS: adresa http://snipplr.com/view/1912/ de .coutl. Cu aceste câteva linii în
td.inmenu { background-color: #02243d; internet-explorer-ie6-css-hover/ - calea HTML şi CSS s-a realizat efectul de roll-
cursor: pointer; font-familv: Verdana, Arial, mai complicată. over independent de browser-ul pe care
sans-serif; color: #FFFFFF; font-size:9pt; Scriptul csshover.htc face ca IE6 să se afişează.
font-weight: normal; border-right: solid 1px funcţioneze cu :hover nu numai pentru
#8e9da8;} td.inmenu:hover { background- legături, lucru posibil deoarece imple- Cod îmbunătăţit
color: #BFOB34; cursor: pointer; font-fami- mentarea Java Script în diverse browser-e Prin compactarea codului şi crearea unui
IV: Verdana, Arial, sans-serif; este aceeaşi, cu mici excepţii. meniu funcţional pe toate browser-ele se
Pentru a face ca obţine o varianta îmbunătăţită a machetei
meniul să funcţioneze
p. (în directorul surse\step-2-macheta de pe
'-loD ".··.·'~·~1
••. • corect şi în browserul CD). Aceasta poate fi considerată drept o
IE6 şi versiunile IE variantă îmbunătăţită, ce poate fi folosită
anterioare, am conce- pentru realizarea întregului site.
put o alternativă la Întrucât în Java Script s-au scris multe
acesta având la bază o scripturi utile care pot fi găsite în internet
combinaţie CSS şi şi încorporate în codul HTML propriu, în
Java Script. macheta îmbunătăţită am inclus un
În scriptul CSS exemplu. Astfel, în coloana din dreapta
sunt inserate liniile: am inserat un ceas digital care arată ora de
.coverl { background- pe calculatorul celui care accesează pagi-
color: #BFOB34; cursor: na. Scriptul va însoţi pagina web indife-
pointer; font-familv: rent de modul în care a fost încorporat,
Verdana, Arial, prin includere în corpul codului HTML
sans-serif; sau printr-o legătură.
~ color: #FFFFFF;font- Reţineţi că scripturile Java Script se
rrrrr~ ••
_ 1'.'" . size:9pt; font-weight: execută întotdeauna pe calculatorul clien-
MACHETA FINALA: Aşa arată varianta Îmbunătăţită a machetei. normal; border-right: tului.
Aceeaşi temă, altă realizare
o alternativă la pagina web structurată cu ajutorul tabelelor este reprezentată de împărţirea prin intermediul
diviziunilor. În articolul de faţă vă prezentăm modul de realizare a temei noastre cu ajutorul diviziunilor.
Victor Gheorghe
n subiect larg dezbătut pe forumurile nile actuale (arie de acoperire şi cantitate (oricând posibilă) de genul conţinutului
din codul HTML. În spatele acestui TAG II:.\l Add Il) C .• rt P::l Add tl) W,sh
stă o formatare cu mai multe atribute care It', 2008, .Jld the l' very •• (Ilecl to 1"011
out .nother '1e.r of am.ling productJ! We hope thls n."" ,e.,
descriu aspectul general al unei pagini. w.1l br1nQ YOU jll1, .lrod th.t OU" (ombin.tton of w.U-loved
cl.UIU .nel ne•• f.yor1tes will m.ke 2008 • 'le.,. to
remrmber'!
Punctul de plecare în programarea site-
Our Llltest Collectibles
ului este secţiunea <body>, şi pentru că
în CSS proprietăţile se moştenesc, TAG- I~~.O:'Q.I l~~:d I~~:~:d
ul superior în ierarhie, <htm 1> , va avea
aceeaşi formatare. TABELE: Varianta cu tabele necesită Încărcarea completă a site-ului Înainte de a putea modifica
html, body {color:#02243d; behavior: informaţiile conţinute.
url(csshover. htc); font-fam ily:Verdana,
Arial, Helvetica, sans-serif; background- Trebuie remarcat că linia CSS pentru explicit ca în HTML, dar, având marginile
image: url(../img/main_bgr.jpg); back- această diviziune începe cu # şi nu cu cu atributul margin:auto se rezolvă uşor
ground-color:#FFCC80; background-repeat: punct, aşa cum procedasem anterior. problema centrării, deoarece "auto" se
repeat;background-position: top left; mar- Diferenţa constă în modul cum se ape- traduce prin stabilirea unor margini egale
gin: Opx; padding: Opx;} lează în codul HTML, dar priveşte şi în stânga şi dreapta. DeCi pe orice moni-
Cu ajutorul acestei singure linii de cod modul de funcţionare. Dacă a fost ,,#" tor, cu orice rezoluţie, browser-ul va afişa
se stabilesc imaginea pentru fundal, ca- atunci în HTML se codifică <div o pagină centrată orizontal.
racteristicile fontului de bază, poziţia în id="wrap"> şi dacă a fost "." se codifică Prima diviziune subordonată "wrap"
pagină, marginile şi spaţierea la margini. <div class="wrap">, deosebirea dintre este "header".
Următoarea diviziune #wrap (în engle- aceste două moduri de formatare con- #header {margin: auto; width:928px;
ză wrap are înţelesul de înveliş) va conţine stând în modul cum se folosesc în codul height:78px; /* asa se poate introduce un
de fapt întreg site-ul. HTML. Elementele cu formatare prin "id" comentariu În cod CSS */ border: 1px solid
#Wrap {margin: auto; width:968px; bor- se folosesc o singură dată pe când cele cu #8e9da8; margin-top:20px; }
der: 1px solid #002f2f; background-color: "class" de fiecare dată când este nevoie. Această diviziune are lăţimea tot de
#FFFFFF; margin-top: 20px; margin-bottom: Această diviziune trasează chenarul 928 pixeli, cu marginea de sus de 20 pi-
10px;} exterior şi fixează marginile acestuia faţă xeli, cu chenar şi înălţimea de 78 pixeli
de laturile su- (exact înălţimea imaginii pentru logo,
- •.......~ I~r'-ad>el. __ '"
lDj .:J
estrei. Totodată se
fixează lăţimea
paginii la 928 pi-
xeli. În CSS nu
#header a img {border:none; }
Deoarece, la includerea în pagină, ima-
ginile au un chenar pe care browserul îl
aplică implicit, ani mai adăugat o linie în
'.""". există atribut pen- script care să forţeze suprimarea chenaru-
tru centrare lui pentru acestea.
Diviziuni vs. tabele
Pentru a Înţelege mai bine aspectele legate struită cu diviziuni este Level Online De multe ori se folosesc imagini plasate În
de modurile de a programa structura unei http://www.level.ro/(alternativ vă puteţi fundalul elementelor unui tabel, lucru care
pagini web este bine să detaliem câteva uita şi la adresa http://shopper.cnet.com/). În HTMLse realizează rin:
puncte care le diferenţiază. Astfel, tabelele Pentru a aprecia care este cantitatea de cod ba_~ground=~'fl:l~~~ir _
(TAG-ul <table» sunt obiecte fixe a căror scrisă pentru o pagină a site-ului Level Dar aici apare şi limita HTML: pentru a evita
poziţie aproape că nu poate fi influenţată. Pe Online uitaţi-vă la sursă (poate fi vizualizată efectul de repetare (tiling) trebuie ca dimen-
de altă parte, diviziunile (TAG-ul <div» de orice browser). Aceeaşi pagină realizată siunile imaginii să fie aceleaşi cu ale celulei.
permit realizarea unui design mult mai flexi- cu tabele ar fi necesitat mai mult timp pen- În cazul CSS, controlul aspectului este mult
bil. Înainte de a detalia aceste aspecte tre- tru afişare În fereastra browserului. mai riguros. Astfel, se poate plasa o imagine
buie să mai menţionăm un lucru important: Pentru a compara diviziunile cu tabelele de fundal Într-o diviziune şi se poate evita
deşi toate browserele reprezintă identic ta- vom lua ca prim aspect poziţionarea. re etarea ei:
belele, există diferenţe Între ele la modul de Poziţionarea cu ajutorul diviziunii se rea- style="background-image: url(fundal.gif); back-
Încărcare a unei pagini web. lizează repede fie folosind cod HTML şi CSS ground-repeat: no-re eat"
O pagină web construită Într-un tabel nu În acelaşi fişier: Dacă se doreşte acest lucru se poate specifi-
poate fi afişată În browserele Internet <div style="position: absolute; width: 100px; ca repetarea numai e orizontală:
Explorer anterioare lui IE7, decât după ce tot height: 55px; top: 150px; lefi: 80px; back- style="background-image: url(fundal.gif); back-
conţinutul tabelului a fost recepţionat. Altfel ground-color: #000099; border: none"></div> ground-re eat: repeat-x"
spus, În fereastra browserului nu se afişează fie separând codul În două fişiere (.htm şi sau numai e verticală
nimic până nu a fost descărcat din internet .css) style="background-image: url(fundal.gif); back-
Întreg conţinutul tabelului. Cu cât pagina •.• cod HTML: ground-repeat: repeat-y"
web este mai complexă, cu mai multe nivele <div c1ass="exem lu"></div_> _ Imaginea oate fi centrată:
de imbricare a elementelor, cu atât Întâr- •.• cod CSS: style="background-image: url(fundal.gif); back-
zierea de afişare În fereastra browser-ului, .exemplu {"position: absolute; width: 100px; ground-repeat: no-repeat; background-position:
provocată de reprezentarea În tabele a codu- height: 55px; top: 150px; lefi: 80px; back- cente r"
--- - - - ---
lui HTML, va fi mai mare. ground-color: #000099; border: none"} sau poziţia ei poate fi controlată pe verticală
Dacă navigând aveţi senzaţia că browser-ul Cu ajutorul codului CSS se formatează divi- (top-sus, middle-mijloc, bottom-jos) sau pe
s-a blocat, uitaţi-vă la bara de progres, iar ziunea. Atributul position: absolute Înseam- orizontală (Iefi-stânga, center-centru, right-
dacă aceasta este animată, nu vă rămâne nă că diviziunea nu se leagă de nici un alt dreapta). De exemplu poziţionarea stânga
decât să aveţi răbdare. De multe ori cauza element din pagină, spre deosebire de tabele sus se face cu:
unor asemenea manifestări poate fi o pag- unde Întotdeauna conţinutul este legat de b~~~!:9und-position: left center
ină web realizată cu tabele, mai ales atunci celula (TAG-ul <td» În care este plasat. În plus, chenarul, marginile şi spaţierea faţă
când este apelată prin intermediul unei Diviziunea are o Înălţime de SS pixeli, lăţime de margini sunt controlabile pentru fiecare
conexiuni mai lente. Desigur că şi de 100 pixeli, culoarea albastră şi se găseşte diviziune, pe când la tabele acestea sunt
proiectanţii paginilor web caută să reme- la lS0 pixeli distanţă de marginea de sus şi defintie o dată pentru Întreg tabelul.
dieze acest neajuns, prin afişarea rând după 80 de pixeli de marginea din stânga, fără Trebuie totuşi menţionat că abilitatea pro-
rând a tabelului (TAG-ul <tr». Cu toate chenar. gramării cu diviziuni se dobândeşte mai
acestea, Întârzierea este sesizabilă. Dacă se specifică position: relative atunci greu şi presupune exerciţiu. Aceasta este
Alternativ, o pagină web construită cu divi- aceleaşi atribute se raportează la elementul influenţată de experienţa În domeniu şi tre-
ziuni şi având acelaşi conţinut se Încarcă din pagină căruia diviziunea Îi este subordo- buie adaptată la comportamentul diferit al
semnificativ mai repede. Browser-ele afişea- nată. Dacă plasăm diviziunea În celula unui browserelor.
ză diviziuni le aproape instantaneu deoarece tabel, atunci toate distanţele se raportează Nu considerăm că utilizarea tabelelor tre-
pentru aceasta nu este nevoie ca Întreg la marginile celulei. buie evitată, ele Îşi menţin rolul pentru care
conţinutul lor să fi fost descărcat. Afişarea Diviziunea are o proprietate importantă numi- au fost create, acela de a reprezenta date
unei diviziuni necesită numai ca structura sa tă vizibilitate (vizibilă sau invizibilă), pe care nu tabelar. Însă utilizarea lor excesivă În ges-
să fi fost definită anterior. o Întâlnim la tabele. Aceasta poate fi de forma tionarea structurii paginilor web nu este
Un exemplu de pagină web complexă con- visibility: hidden sau visibility: visible. Întotdeauna cea mai indicată.
înainte de a deschide diviziunea "me- <ul style="width:123px;"><!- deschide #menu a { color: #FFFFFF; background:
nucontainer" se închid diviziunile "logo" şi butonul pentru CHIP online -> #02243d; text-decoration: none; border-
cea căreia îi este subordonată, "header". <Ii><a c1ass="firstpage" href= width: 1px Opx 1px Opx;
Diviziunea "menucontainer" conţine "chiponline.htm">CHIP Online</a></Ii> border-style: solid; border-color:#d7f5c9
meniul. </ul><I- Închide butonul pentru CHIP #d7f5c9 #d7f5c9 #d7f5c9; border-
#menucontainer {width:930px; back- online -> top:none; } #menu a.firstpage { color:
ground-color:#02243d; margin: auto;} TAG-urile <u 1 > şi < 1 i > folosite pen- #ffffff; background: #02243d; text-decora-
Acesta este declarat pe mai multe linii tru definirea unui buton fiind subordo- tion: none; border-width: Opx 1px 1 px
de cod toate începând cu ,,#menu". nate diviziunii "menu" vor moşteni Opx; border-style: solid; border-color:
Codul HTML pentru cele două divi- atributele acesteia. #455e70 #8e9da8 #476f85 #1 5344b; }
ziuni este: #menu ul {Iist-style: none; margin: O; #menu a.firstpage_current { background-
<div id="menucontainer"><I- deschide padding: O; width: 133px; float:left; } color: #BFOB34; border-width: Opx 1px 1px
containerul meniu lui -> #menu a { font-size: 0.8em; display: block; Opx; border-style: solid; border-color:
<div id="menu"> <1- deschide meniul -> border-width: Opx 1px 1px Opx; border- #e25e3e #8e9da8 #e25e3f #ffffOO; }
De fapt, meniul este o listă neordonată style: solid;border-color: #455e70 #8e9da8 #menu a:hover, #menu a.firstpage:hover {
motiv pentru care în HTML un buton al #476f85 #1 5344b; margin: Opx; padding: color: #FFFFFF; background:#BFOB34; bor-
meniului se descrie astfel: 2px 3px; } der-bottom: solid 1px #BFOB34; }
!
Ip1i! gramării HTML
@-. Jhf-~l'''''''~
Rr<<lI:_r_I_~
întregi din codul existent se pot prelua în -+ datele privind modalităţile de con- firmei este prea statică se doreşte ca fie-
noua variantă, redu când timpul de finali- tactare a firmei şi alte date utile parteneri- care pagină să conţină pe lângă logo şi o
zare. lor Vogel Burda se vor afişa intr-o pagină imagine asociată reprezentativă pentru
Păstrând stilul grafic al machetei exis- separată "Contact"care se adaugă ca ultim conţinutul paginii respective;
tente, să presupunem că s-au adăugat noi element în meniu; -+ se va schimba structura meniului prin
cerinţe la cele iniţiale ale temei CHIP -+ descrierea publicaţiilor nu se va mai organizarea sa pe nivele ierarhice. Publi-
Special-ului de faţă. Acestea sunt urmă- face pe două coloane, ci pe o singură caţiile aparţinînd aceleiaşi familii se vor
toarele: coloană care trebuie să fie mai Iată; grupa în acelaşi bloc din meniu;
-+ formatul paginii site-ului să nu mai fie -+ la marginea din dreapta a paginii se va -+ articolele reprezentative pentru o re-
vistă, care se publică online, se vor aşeza
într-un format de pagină care nu va avea
coloana din dreapta;
-+ pentru a pune în valoare unele imagini,
parf.t.mt fca'te luUiluvl. Tel te ltebu:e sa faca atuta este sa gut10nezt un (ont SI " trarnfere
fiecare pagină are inclus pentru coloana bann care vltl in .'Ilt CCint.i='ertru IIcest lucru, Intermed.arul p"'neste vn com,SIon. de OblCtl un precent
Cl! O Sln;ura c,fra, Corlul in care sllr: tr.r-$feratl banII este de CbIU" Creal dl! haco:tr sub un nume
din dreapta (zona 5) un script separat (de fals intr·o ~ltll rara. I=r~,tul ute retras sub forma de (",)$1'lde la un ban.:o;m<'lt. Aproape atelUI tipar
f:ste fCleStt , .'" cazul Itaturtler df: t!p pI'HUIl'Ig, O<'lG.'l
Iln ataator ~eu~eS-le sa p1'ltTlusca Informat!!
;::a<:••m ;lf~ $.lIUrUMa' de ant, barll SIl!"ttr<'lrs-fe'.'Ill ",a onht't b<'lnmq catre unul S-<!Iu mal muti
exemplu pentru prima pagină acesta este ermeda'l
':'cest,a l-a rt"<f ler trarsfl!ra ba" ca:n ma, mul1e c:ontlln C.\rt
fişierul menu_l.inc.php). S-au creat sub- apa ~h1s-her-lIo' Ade"ar.!a 6Mo'e'gurll a <'lC$Cf .'IetJl,ltllJ lIl!U
III 1um.I">aitl mome1'l. ••, Îl'!cal"f: sur.:.em atenti nu do.r la rouma:u.l
,...
.•..
1!r"--
celor care pestuza ~ acute fOrurTlllrl, " SI la retlamf: s la
directoare distincte pentru imagini, . .. 11"',7
'~i~;~dL) "umarul ne-unlor af, -ate eu ic"'Umul respet:by. PenUV ct odlltll
!r.;:.... •.•.
i'_ .
•• , •• 1 -
._
ee el rtlU de beti este ereala, ea pcate fI folOSIta pentrv miI
mult decjl OO'af atacun catre <'l 'utfIoZ/lton" mte"netulul s furtul
dlltelorlo", Pe Uf' a~tfel de fe"l.Il'\'Ipc-t fi ir.t';lrlIte stled.me alo!!
Dinamică suplimentară
Cum putem face ca la o nouă incărcare a paginii web conţinutul ei să se schimbe automat? Cum se poate afla dacă de
exemplu un anumit subiect a fost tratat anterior În publicaţiile editurii? Răspunsul este dat de paginile web dinamice.
Acestea "au În spate" baze de date, care permit fie afişarea În pagină a informaţiilor la zi, fie execută căutări În arhive.
Utilizarea bazelor de date În realizarea paginilor web e pe cale să devină o regulă. Victor Gheorghe
1'I'i14''Iiglft ~S[fucwta ~SOl ,. Cauta j.Clnserare UJExpon !:;Impon g,Opereljj II~ li'AI\ul(a
r IV ~"2j l,."'=;';~
fi" -'/ )< 00 III ~ T
.
Linie
lungime
.
linie
s, ~"l
-,
Marimelinie
Urmatorul
AUloindex
::S '3ytU
ailmrm
Creatie :e:. 2~, 201:. 4•.
Ultimul
t:.6:2E;J1
!4.!:25, 20'~ 4ţ
06:55 AY. ~
LEVEL
update
-r r "''"'''---~ L1NK:În dreapta paginii a fost plasată o
legătură la scriptul de căutare.
Nici nu este prea dificil, deoarece dispu- date, problema nu părea aşa de simplă. js/inc/ de pe CD. Vom modifica unul din
nem de cuprinsurile revistelor CHIP, Trebuie totuşi să menţionăm un lucru: aceste scripturi într-un editor. Astfel, la
CHIP Foto-Video şi PC PRACTIC, iar am preferat o soluţie simplă şi de aceea începutul diviziunii "rightside" din scrip-
pentru fiecare număr de revistă dispunem am optat pentru varianta "totul într-un tul de modificat se plasează legătura la
de denumirea acesteia, anul apariţiei, luna singur tabel", fară a mai face tabele sepa- noul script din care se pot face căutări, pe
apariţiei, iar fiecare articol din revistă este rate pentru publicaţii, rubrici şi ani cu care îl vom denumi "search.php":
prezent cu rubrica şi titlul aferente. Aceste legături între ele. <div c1ass="cuprinsuri">
informaţii se găsesc pe CD în două fişiere, <a href="search.php"style="color:#FFFFFF;
cuprinsuri.xls şi cuprinsuri.sql, aflate în Calea către căutare font-size: 12px;"><img
directorul surse/php-mysq/-div-css-js/ Iniţial s-a dorit să existe posibilitatea de a 5 rc="img/view.gif'> Cautari
data_base_backupl. apela procesul de căutare de pe oricare cuprins</a>
Cu ajutorul programului din paginile site-ului. </div>
phpMyAdmin, componenta XAMPP Dar site-ul are şi pagini de unde chiar nu La fel se procedează cu restul scriptu-
respon'sabilă de administrarea bazei de e nevoie să poată fi apelate căutările, de rilor menu_x.inc.php. Coloana din dreapta
date locale (http://localhost/phpmyad- exemplu paginile de articole. Cu alte (zona 5) va începe cu legătura introdusă.
minI), se crează o nouă bază de date cuvinte, condiţia este ca procesul de
"chip". Folosind facilitatea Import din căutare să poată fi apelat de pe toate
fişierele de cuprins uri creăm în cadrul paginile site-ului, mai pUţin de pe cele cu Bineînţeles, şi aici avem un răspuns simplu
bazei de date "chip" tabelul "cuprinsuri". articole. Din punctul de vedere al struc- şi logic: din varianta existentă a site-ului.
Pentru import putem folosi oricare din turii siteului, aceasta înseamnă că se pot Este adevărat, aceasta încă nu are o pagină
fişiere, cel cu extensia .sql sau fişierul .xls apela căutări de pe toate paginile care au pentru căutări aşa că trebuie construită şi
salvat ca şi .csv (operaţie uşor de facut în inclusă coloana din dreapta (zona 5). stocată în fişierul al cărui nume îl
MS Excel), ambele fişiere fiind de fapt Codul pentru coloana din dreapta este cunoaştem deja, "search.php". Aici ne a-
simple fişiere text. Este bine să reţineţi conţinut în scripturile menu_x.inc.php jută modul în care a fost structurat site-ul.
acest detaliu, pentru că se poate întâmpla din directorul surse /php-mysq/-div-css- Includerea unui nou script "search.php" (îl
ca, înainte de crearea unui tabel în baza de
date, să fiţi nevoiţi să interveniţi direct cu CHIP LEVEL PC Pract,c
un editor de text în respectivul fişier.
În imaginea de mai sus observaţi struc-
tura câmpurilor din tabelul cuprinsuri.
in l'llunle d,n 1'-<0".",,,01* 3~ (O)
După crearea bazei de date "chip" şi în An Nr. itlu
Chp
cadrul acesteia a tabelului "cuprinsuri" Chp FOlO·\\deo
Chp SpeooI
avem deja răspuns la întrebarea pusă în PCI'r.odJc
Aspect îmbunătăţit
Modul în care este afişat tabelul cu rezul-
tatele căutării în baza de date este inco-
mod la citire, deoarece şirul de căutare
curent (criteriul folosit) nu este explicitat
în coloana care conţine titlul. În exemplul
anterior am folosit şirul "an" şi pentru a
evidenţia cât este de dificilă identificarea An Nr. Rubrica
2e03 i Sdt."a-e 8C~.a~C""'le
:003 a COI1"UI"~tol
acestuia în titluri. Se întâlnesc situaţii în :G03 8 Ha'e/.are
Ce a::&f'.ca a c<p..
S.r-euI Cle p'cea
:003 .:..Itele e&r:lpentN,aC"l'ta
care undeva în fereastra browser-ului se 2003 Comunicatii ~ v"etde t'UfaN:a
2003 Hlm::i.'.llre Car.te.."ccd. noullaSO
specifică ceva de genul "şirul de căutare a '2003 ~'aCtlca CIIr-;CU!/I ..• col"trc'at"e'«tJ'(';nIC
:C~3 t1a·c.~4"~ c. c..!'"t/l"'/Icar~e
fost <şir>", dar nici această soluţie nu face 2003 Co.eme"',' pc-ultr6l"sf.::...""tmtele",zc'
:Otl3 tta·~..•.•
a'e =-af'CU!dep'e:a
identificarea în titluri mai uşoară. :003 e Scr:..'are il" spatele ecr4l"t.;!U1
M
aterialul de faţă se vrea a fi mai mult problemelor apărute cu un program, pe Mantis sunt cuprinse numeroase proiecte
o serie de ponturi referitoare la măsură ce anvergura proiectului creşte, diferite, producătorul poate furniza con-
aplicaţii pe care le-am întâlnit, astfel de mijloace de comunicare sunt mai turi de utilizator pentru fiecare client în
folosit şi apreciat. Desigur, unul dintre mult o corvoadă. Aşadar, intră în scenă parte, cu drepturi de acces limitate la pro-
criteriile de selecţie a fost şi gratuitatea aplicaţiile speciale de raportare şi urmă- iectele care îl privesc pe acel client. În
acestor programe, fiind vorba de freeware rire a bug-urilor. plus, sistemul de sortare şi raportare a
şi cel mult donationware. În speranţa că Mantis Bug Tracker este o astfel de incidentelor se dovedeşte a fi unul atât de
vă veţi găsi câteva puncte de referinţă aplicaţie web, care capătă recomandarea simplu sau complex pe cât doreşte utiliza-
interesante citind acest material, vă lăsăm noastră. În primul rând, ne-a plăcut inter- torul. Absolut toate laturile acestei apli-
să exploraţi propunerile noastre. faţa simplă şi cuprinzătoare, modul de caţii web sunt complet personalizabile, de
administrare, raportare şi etichetare a la aspect până la funcţionalitate şi chiar
Mantis Sug Tracker incidentelor, dar şi posibilităţile de comu- nivelul de securitate.
Pentru programatori, poate cea mai ne- nicare oferite. Bunăoară, un freelancer Scrisă în PHP, aplicaţia Mantis func-
plăcută parte a muncii reprezintă rezol- sau o companie care lucrează constant la ţionează perfect cu MySQL, MS SQL,
varea bug-urilor sau aplicarea unor co- anumite proiecte pot folosi Mantis pentru PostgreSQL, rulând pe un server web ca
recţii, după dorinţele clientului. Dacă e- centralizarea comunicării, oferind acces Apache. De asemenea, poate fi accesată
mail-ul, fişierele Excel şi capturile de web clienţilor, pe baza unul nume de uti- prin aproape orice navigator web. Vor-
ecran sunt o soluţie pentru comunicarea lizator şi a unei parole. Dacă în sistemul bind de flexibilitate, modulul MantisCon-
Baseportal
Iată o aplica ţie web cel puţin interesantă.
Funcţionează ca serviciu online, pe acelaşi
V1ewlnglssueSlmpleOetitlls[
10 e.legOl)/
principiu ca o căsuţă de e-mail (pagina de
00710 [~ReporlsJ s...~yal Runllme întâmpinare aduce puţin cu cea folosită
R'pol1er Jktluy
AsslgnedTo de Gmail), numai că oferă posibilitatea de
Priori!)' non'M!
StatllS UkflOlMedS~
a crea şi accesa de oriunde baze de date.
Summary 00710 SUM'yol pmi:lrms _":ilidalions (Ifl hiddel'l (1'lCsI'l
ilClp.'ejllranchll'lg quesllClfI$ Cu un sistem de asistenţă bine pus la
Oesaiplion !fa uUl'lOColTeclly lill~!lI il luI hld lhalll ~l'Ialid by ilnolhil (bran.c:hNlg) qllestJon, bul1h~ chingi' It/Il tespoMi lolhi m!lill (blanclllf\!l)qUiS:IGfl, \lII\Ictllhen ~s Ille luI qvesltP!l.lhe lvnoey
sliMperiorms thto Y3lldahons on tlle In: qUl'$llon ewn t~tI it is ilO lQngel actiwale-d This cluru confuslng ruuHs for Itle 115el b't-lllse- ille1ls :tle-m lhat lhelt i$ il f.eld f111edin ir\correcl!y. bul Ihe., punct, Baseportal poate fi folosit cu succes
tin no lon{jelne I~ field beca~e they Chi~ ItI~r wlect;on on tlle queSlion tMI atlNalet! !Illltext quesliOOm~ially. Irlhly ch~nge Ih&ir bril'lChing se!Klion, making C·O!1fill1que$lions no 10"Vl!!
aeliv3led. Ihe data filI9din IIlI formllrly~ll'l'aled fitlds sJ'<oukl bf' remowd. Ofilllut.l flOlortger •••••Iidated
Addtllonal
şi de către incepători, pe când cei experi-
Infom'lll:t1on
Tap Nola~ ~Iached
mentaţi pot integra Baseportal cu propri-
Browur ile aplicaţii. Fie că doriţi să creaţi o bază
O.tabase!
DB.Vers/on de date la care să aveţi acces de oriunde,
Optrating
System fie că aveţi nevoie de o bază de date pen-
PHPV,f$joll
-'-<
••••.•••
.•'• •. ,
c ••• ,_" ••••• ".,"' •• ,_" •• ,, ••
pectiv cu My Shared Files. Acesta va putae
•.•,.__l_J'~'
ORACLE, SQL Server, DB2 / fi descărcat de la adresa asociată acestuia
PROGRAME· APLICATII GRATUITE
Nvu ...
I
_.--ii..-.-
'
r- ......
..•..• ..,
"JfnD
.•...
. ~
.,"'"
.•.•.
'...
'
ii ii
-=:-
---
---
__.....•
__ o,
_-1
_-1
_-1
-1
•••
.- ..... -
Apache a făcut picioare!
Instalarea unui server pe o staţie de lucru nu este neapărat anevoioasă,
dar În anumite situaţii nu se numără printre posibilităţi(le viabile).
Aplicaţia Server2Go vă scuteşte de batai de cap, putând fi folosită
de pe orice mediu de stocare. Andrei Licherdopol
D
ecele mai multe ori, o pagină web va fi
găzduită pe server-ul unui furnizor
specializat, singura preocupare a
designerilor şi a programatorilor fiind
aspectul, conţinutul şi funcţionalitatea
paginii / aplicaţiei respective. Există însă
anumite situaţii în care veţi dori rularea
unei aplicaţii client-server oriunde şi
oricând. Pentru ca aceasta să ruleze corect
însă, pe calculatorul folosit trebuie să aveţi
acces la Apache, PHP, SQL şi eventual
Per!. Soluţia? O aplicaţie care să poată rula
ca server, fară instalare şi care să poată
susţine o mare varietate de aplicaţii.
Server2Go este o astfel de soluţie, care
poate fi rulată în mod direct de pe un disc
optic (CD, DVD), un stick USB sau un facilităţi, printre care suportul pentru PHP
hard disk, fară instalare. Beneficiaţi astfel 5, baze de date SQLite, MySQL 5, extensii
de un server web (bazat pe Apache) plin de PHP şi Per! 5.8. Server2Go a fost creat pentru a înlocui
programe asemănătoare, precum
WampOnCD, deoarece acestea fie nu erau
actualizate suficient de des, fie aveau
lacune destul de mari în suportul pe care îl
SEARCH ENGINE' ofereau. Astfel, pachetul oferit de Timo
Zoom Îs the e.3siest way ta add a powerful custom search enoine te your Haberkern se bazează pe WAMPP. Licenţa
website, Intranet, or CD-ROM and DVO. Take the taur, download Dur
software, and see how easy it is for yourself. este donationware, însemnând că poate fi
folosit gratuit, dar că totodată nu ar strica
să faceţi o donaţie în cazul în care îl folosiţi
latest version: 5.1.1011
Wh~t's new I Fe~ture list I Corr,p"re edltlons I
intens sau în scopuri comerciale.
UpQfade ta Yţrslon 5.1
"""
,-
r~"'_d!t6
•••Ibon~pc"""o-
lde
;;;:------
fl-"l compatibil, vă veţi putea bucura
de aplicaţia creată, acum com-
plet independentă de pachetul
pentru Vista (momentan necesită drep- software de pe PC-ul gazdă!
turile de administrator), pentru MacOS X
(aflat încă în fază beta), suport integral Cu această listă impresionantă de xibilă, poate fi facut să funcţioneze cu
pentru PortableFirefox, Lightttp, JSP facilităţi deja disponibile sau care vor fi majoritatea tehnologiilor care vă trec prin
(Tomcat), GIF-uri animate în ecranul de introduse în viitorul apropiat, Server2Go cap. Este o idee excelentă să-I folosiţi pen-
pornire, recopierea bazei de date plasate este, spunem noi, cea mai potrivită tru a vă crea un disc de portofoliu cu de-
local pe mediul de stocare Server2Go metodă de a rula aplicaţii web de pe un monstraţii ale tehnologiilor şi aplicaţiilor
(funcţie excelentă de exemplu pentru uti- mediu portabil de stocare, mai ales că proiectate de dumneavoastră. Varianta
lizarea unor aplicaţii web de administrare Timo Haberkern este deschis discuţiilor 1.5.1.0 se găseşte şi pe CD-ul CHIP
şi contabilitate de pe stick), suport pentru în legătură cu cele mai diverse implemen- Special, în secţiunea Servere. Spor la pro-
Python, Firebird, Ruby on Rails şi Opera. tări. Astfel, Server2Go, aplicaţie deja fle- gramat!
Mai multe despre WAMP
Server2Go nu este însă unicul pachet de tre aceste pa-
software ce oferă posibilitatea de rulare a chete de dis-
unui server web, ci face parte dintr-o fa- tribuţie au fost Service... II__S_C_M_.,_,_
milie software denumită WAMP. Acro- incluse pe CD:
nimul se referă la "Windows, Apache, EasyPHP, rModules--
MySQL, PHP" şi este înrudit cu LAMP phpdev, Uni- ~ Svc Apache Stop II
Admin..,
I Status
I I
(unde L semnifică un alt sistem de oper- form Server, Refresh
~Svc Stop II
Admin.., I
,1 I
are, anume Linux). Prin asocierea celor WampSrever, Explore ...
patru programe antemenţionate, WAMP Web-Deve- O Svc Start II
Admin
I I Help
oferă o platformă care în ultimii trei ani a loper Server
Suite, WOS-
O c Start II
Admir I Exit
devenit foarte populară. Există o varietate 1
largă de distribuţii W AMP. Portable şi ~b~PP Cont~ol Panel Ve~sion 2.5 (9. May, 2007)
Tabelul alăturat oferă o sinoptică a XAMPP, ală- Windo~s 5.1 Build 2600 Platfo~m 2 Se~vice Pack 2
celor mai populare 27 de pachete cu dis- turi de Ser- Cu~~ent Di~ecto~y: f:\xampp
Install Di~ecto~y: f:\xampp
tribuţii WAMP (sursa fiind Wikipedia ver2Go.
Status Check OR
http:// en.wikipedia.org/wiki/Comparison Dintre toa-
_oLWAMPs) te pachetele
O privire mai atentă asupra tabelului din tabel,
ne permite să facem câteva observaţii: XAMPP este
~ există o preocupare susţinută în dez- singurul care
voltarea unor asemenea pachete de dis- oferă distribu- COMPLET: XAMPPconţine printre altele şi serverul FTPFilezilla.
tribuţie pentru Windows; ţii pentru cele
~ 14 din cele 27 pachete de distribuţie au mai răspândite sisteme de operare: Linux, MySQL, Apache şi Peri (în variantă
licenţa GPL (GNU General Public License Windows, Mac OS X şi Solaris. Altfel redusă), alături de phpMyAdmin pentru
- este o licenţă de distribuire liberă a pro- spus, XAMPP este cross-platform. administrare. Permite mod3uth sub
gramelor de calculator); MySQL, o soluţie interesantă de securitate.
~ serverul de web httpd este Apache, cu Ce conţine XAMPP? Distribuţia completă oferă în plus bi-
două excepţii; XAMPP este un server web complet. blioteca SSL(Secure Socket Layer - proto-
~ toate pachetele de distribuţie au încor- Pachetul XAMPP are două distribuţii, col de securizare a schimbului de infor-
porate PHP şi MySQL; una completă şi alta care oferă doar maţii pe internet) şi aplicaţii ca Webalizer
~ administrarea MySQL se face cu funcţionalitatea de bază. - analizarea traficului pe website, Mercury
phpMyAdmin, cu trei excepţii; Distribuţia "uşoară" conţine PHP, - un server de transport a mail-ului,
JpGraph - bibliotecă pentru crearea de
grafice online, FileZilla - un excelent ser-
ver FTP şi multe altele.
În ceea ce priveşte punerea în funcţi-
une a XAMPP, acesta se poate procura
direct de pe internet. Una dintre adresele
unde veţi găsi ultima versiune este
CongnwlltlorlJ:
You WC(U,fuU~ if'IstJHed XAHPP lin mis S'('lUml
http://sourceforge.net/ projects/xam pp/,
NOwyO!o GIt' Start 1.o~..o",*,,"'llnlc.o
/fiM ~ t'le'"fUWQ"cru llr~
rIl"SU1'fD.. ~1dt,.., o~'"'to
·SI<1tl.lS,.onltl<ltlt mărimea fişierului fiind de circa 50 MB.
Distribuţia se găsesşte sub formă de pro-
gram executabil, alături de un script de
configurare a serverului. XAMPP are
instrumente de verificare a instalării şi de
control a securităţii componentelor.
După instalare, XAMPP oferă un panou
de control. De aici se pot activa şi dezacti-
va componente (servicii) XAMPP.
Server-ul instalat poate fi apelat din
orice navigator web, introducând adresa
http://localhost. Spaţiul accesibil naviga-
torului se regăseşte în subdirectorul
Ihtdocs, subordonat directorului de insta-
lare XAMPP. Prin copierea în /htdocs a
directoarelor Isurselphp-div-css-js şi
Isurse/php-mysql-div-css-js de pe CD veţi
putea vedea exemplele în lucru.
Mărime Server Optimizare
Data phpM- SQLite
Pachet Versiune Ucenţă Apache PHP MySQl Open SSl moetssl mod....Perl
lansării (MB) HTTPD Admin Manager Zend
Apache 2006.
3.5 6.9 GPL 1.3.36 4.4.2 4.1.16 - - - - 1.29 2.6.2
Swissknife 05.06
Apache2 2006.
1.5.4 95.8 GPL 2.2 5.1.2 5.0.18 2.7-pI2 2.8.15 0.9.8a 2.2 2.0.1 2.6.2
Triad 02.20
2007. necunos-
AppServ 2.5.8
02.20
20 2.0.59 5.2.1 5.0.27 2.9.2 1.2.0 - - - 2.5.10
cută
2007. donation-
AutoSet 4.3.1 22.4 2.0.61 5.2.5 5.0.45 2.11.3 - 0.9.7m 2.0.61 - 3.3.0
12.16 ware
2006. necunos-
Denwer Base 3.1 1.3.33 4.4.3 4.1.16 2.6.1 - - - - -
10.04 cută
2006.
EasyPHP 2.0b1 13 GPL 2.2.3 5.2.0 5.0.27 2.9.1.1 - 1.2.0 - - -
12.23
2006.
fvpatwds 0.1.7 33.7 GPL 2.0.58 5.1.6 5.0.26 2.9.0.2 1.2.0 - - - -
11.14
2006.
MyWAMP 1.2.3 22.9 CC Mexico 2.0.55 4.4.2 4.1 2.3 - - - - -
03.24
2005. necunos-
Net5erver 0.1 23.4 2.0.54 5.0.4 4.1.14 2.6.4-pI1 - 0.9.7g 1.99_16 - -
12.02 cută
2008.
PAMPA 0.6
01.02
11 GPL 2.2.6 5.2.5 5.0.45 2.11.3 - 0.98e - - -
2007. necunos·
phpdev 4.2.3 - 1.3.27 4.2.3 4 2.3.2 - - - -
05.05 cută
Repos 2007.
2.1.0 10 Apache 2.2.6 5.2.5 oricare - - 0.9.8e - 3.3.0 -
Server 12.21
2007.
SNAW 0.1.1 - CeCILL 2.2.4 5.2.3 5.0.41 2.11.1 - - - - -
09.23
Uniform 2007.
Server
3.5 7.2 licenţă BSD 2.0.59 5.2.3 5.0.41 2.10.2 - - - - -
07.05
2007.
VertrigoServ 2.19 9.6 GPL 2.0.61 5.2.3 5.0.45 2.11.2.2 1.2.0 - - - 3.3.0
12.02
War;xserver 2007.
(a erior 2.0 20 GPL 2.2.6 5.2.5,4.4.7 5.0.45 2.11.2.1 1.2.0 - - - 3.0.1
WAMP5) 11.21
Web- 2007.
Developţ!r 2.00
11.10
30.8 GPL 2.2.6 5.2.5 5.0.45 2.11.2 - 0.9.8g - - -
Server Suite
2007.
WITSuite 1.0 1.0 comercială 2.2.6 5.2.5,4.4.7 5.0.45 2.11.2.2 - - - - -
12.19
WOS 2007.
Portable
2.1.0 44 GPL 2.2.4 5.2.3 4.4.7 5.0.41 2.10.2 - - - - -
07.17
2007.
XAMPP 1.6.5 32 GPL 2.2.6 5.2.5,4.4.7 5.0.51 2.11.3 - 0.9.8g - 2.0.3 3.3.0
12.24 ,
2007. GPL/
ZendCore 2.5
10.09
40.6
comercială
2.2.4 5.2.4 5.0.27 2.10.0.2 - 0.9.8e - - 3.3.0
PROGRAME· GIMP 2.4.2
t2S0 !
8
~---'31
.,.,----JllOo,o '::::J
RectMQle Select
Mod.
,-
Procesare gratuită de
imagini pentru web
Dacă nu doriţi să cheltuiţi bani pe un editor grafic precum Photoshop, dar aveţi totuşi nevoie de o aplicaţie capabilă
şi flexibilă, soluţia nu poate fi decât GIMP. Andrei Licherdopol
A
norice domeniu în care se impune păcate deloc sau pUţin accesibile pentru trant, dar peste care totuşi se poate trece cu
.~..
• ţ' ••.
denumirea funcţiei (aflată imediat sub bara mentelor, lucru foarte important pentru .• ,. •.• ClA
LJI.i..,;<I.. I
de titlu a ferestrei) în acel spaţiu, veţi con- web, ca şi lucrul cu textul, în cazul de faţă
stata că aceasta "se lipeşte" acolo. Desigur, facil, fiind puse la dispoziţie o serie de
în funcţie de instrumentul selectat, meniul setări foarte utile în acest domeniu. Măsu-
proaspăt anexat în partea de jos se va mo- rarea se face cu un instrument dedicat şi cu
difica. Puteţi folosi mica săgeată aflată în ajutorul liniilor şi riglelor de ghidaj, toate
colţul din dreapta sus al ferestrei deschise / complet personalizabile.
spaţiului de andocare pentru a adăuga noi
registre cu funcţii, pentru a detaşa funcţia Layer-e şi imagini
selectată sau pentru a administra setările Un alt aspect important este lucrul pe FLEXIBIL: Ca multe alte programe, GIMP
facute instrumentelor (lucru deosebit de aşa-numitele layere, "straturile" imaginii. permite aranjarea tuturor modulelor după
util şi accesibil). Astfel, ceea ce părea la GIMP adoptă o funcţie similară cu cea din bunul plac şi În mod independent, oferind toate
început puţin şi confuz poate fi organizat Photoshop, atât ca utilizare, cât şi ca posi- instrumentele necesare lucrului pentru web.
cu mare uşurinţă în orice configuraţie vă bilităţi. Sigur că Adobe oferă mai multe
trece prin minte. Confortul devine maxim, moduri de a despica firul în patru, dar pen-
iar controlul oferit este total. tru ceea ce reprezintă procesarea ima-
ginilor pentru web, aceste moduri supli-
Totul la degetul mic mentare sunt irelevante. Astfel, în GIMP se
Dacă tot am vorbit mai devreme despre pot practica majoritatea tehnicilor de pre-
fereastra cu spaţiul de lucru şi cu bara de lucrare folosite în Photoshop. Pentru pre-
meniu, merită menţionat că acel clic lucrarea foto, sunt puse la dispoziţie şi o
dreapta pe suprafaţa de lucru care aduce serie de filtre, care în totalitatea lor întru-
toate meniurile în imediata apropiere a nesc mai mult decât un pachet esenţial ACCESIBILITATE: Orice instrument sau funcţie
pointer-ului, vă scuteşte atât de excursiile (pentru designeri şi fotografi). din GIMP pot fi accesate prin meniul contextual
enervante prin meniuri tipice Photoshop Optimizarea imaginilor pentru web este din fereastra de lucru cu imaginile. Adio
cât şi de alternativa la acestea - memorarea cum nu se poate mai simplă, oferindu-se călătoriilor către marginile spaţiului de lucru!
unei liste interminabile de comenzi rapide multe opţiuni şi algoritmi de compresie, •..
::.
_- ~ ~..
..... _ •.. - .... - ... --
t=o. re ••• _ _
din taste. Dacă în teorie nu vi se pare prea precum şi previzualizarea imaginii altături •• t' •• A
••••. A
+
elA L'.' . ,----.
relevant, câteva ore de practică vă vor de dimensiunea estimată a fişierului. -' "oS,.'" ,iJr
pagină web nu este niciodată fma- existe pe un server, legătura fiind facută
ImageShack HTML
Site-uri mai suple
Numeroase editoare grafice HTML au o
New to ImageShack' Cre-dte o p,.oflle or 5lideshow upIoad:(.' lmaQe r uri Î video r multlploader Î recorder
I 8,,,,,,,"-. I
problemă: acestea scriu comenzi sau ca-
ractere inutile în codul HTML. Atunci
când converti ţi textele din Word în
HTML aveţi aceeaşi problemă: codul
r restZernal}e' 320x240 (for websltes and email) ..:J HTML este inutil de mare. în ajutor aici
r femove si!ejresolution bar from ~
allowed: jpg jpeg png gif bmp tit tift swf < 1.5 megabytes.
vine editarea manuală, cel mai bine rea-
lizată în Notepad. Acest utilitar de
Windows nu introduce în codul HTML
a POSTARE OE IMAGINI:
forumuri fotografii
CU ajutorul
proprii.
imageshack.us puteţi posta sau Încărca gratuit pe alte caractere decât cele introduse de
dumneavoastră. în cazul în care editorul
dumneavoastră "What You See Is What
MB. Şi mai bine este că înregistrarea pre- Un comentariu în CSS începe cu /* şi You Get" converteşte câteva spaţii pentru
alabilă nu este necesară. Accesaţi pur şi se termină cu */: a obţine o structură frumoasă a codului,
simplu site-ul şi căutaţi imaginea cu aju- /* stylesheet pentru paginile exemplifica- înlocuiţi spaţiile cu taburi. Au acelaşi
torul funcţiei Search. Un clic pe Host it toare din CHIP Special */ efect, dar ocupă spaţiu mai puţin.
trimite imaginea. După încărcarea aces- La conceperea comentariilor, gân-
teia, aveţi de ales între mai multe URL-uri diţi-vă că acestea nu sunt vizibile efectiv
pentru fotografia dumneavoastră: acestea în fereastra browser-ului, dar că există în EILogoIrfanView
Înaintea bookmark-ului
fac referire la un thumbnail accesibil textul sursă şi că ele pot fi citite de fiecare
printr-un clic de mouse, la imagini adap- vizitator. Pentru ca vizitatorii paginii dumneavoas-
tate pentru anumite forum uri şi la ima- tră web să o poată regăsi rapid şi pe viitor,
ginea în sine. Copiaţi aceste URL-uri şi în colecţia lor de bookmark-uri, vă puteţi
introduceţi-le în post sau pe pagina dum-
neavoastră web. Imageshack recunoaşte
11 HTML
Testarea paginii web
afişa logo-ul site-ului înaintea URL-ului.
Pentru aceasta, modificaţi-vă logo-ul la
următoarele formate de imagine: JPG, În mai multe browsere dimensiunea de 16 x 16 pixeli, cu 256 de
JPEG, GIF, TIF, TIFF, BMP, SWF şi PNG. Este foarte important să vizualizaţi culori. Folosiţi cel mai bine utilitarul gra-
Fotografiile în formatele "voluminoase" paginile web abia create în browsere tuit Irfan View, care poate salva imaginea
TIF, TIFF şi BMP sunt convertite automat diferite. şi când spunem acest lucru vă în formatul ICO. Salvaţi acum logo-ul
de către software în imagini PNG. Puteţi recomandăm să instalaţi programele de micşorat ca favicon.ico şi stocaţi imaginea
încărca astfel câte fotografii doriţi, cu con- navigare Firefox sau Opera, dar puteţi fi în directorul principal al serverului dum-
diţia ca prin aceasta să nu lezaţi nicio lege siguri că acest mic efort va merita. Dacă neavoastră de web - în bookmark-uri şi în
(referitoare la dreptul de autor sau altele). nu doriţi totuşi să faceţi noi instalări, bara de adrese apare imediat "noul" logo
alternativa este constituită de site-ul al paginii.
www.browserpool.de. serviciu care are şi
B HTML şi CSS
Comentarea codului
La scrierea codurilor trebuie să vă acor-
o versiune în limba engleză, dar care nu
este însă gratuit. în special atunci când
folosiţi programări ar trebui să efectuaţi
m HTML
Protejarea imaginilor la copiere
daţi întotdeauna timp pentru a prevedea obligatoriu această verificare în mai multe Odată prezenţi în internet, nu este exclus
textul sursă cu comentarii - astfel încât să browsere. Profesioniştii îşi testează să vă găsiţi la un moment dat pe alte pagi-
puteţi şti şi peste câteva luni ce scop aveau paginile web chiar şi pe alte sisteme de ni web fotografiile şi elementele grafice la
anumite paragrafe. Modalitatea este dife- operare, pentru a vedea dacă aspectul şi care aţi lucrat atât de mult şi la care ţineţi.
rită în cazul HTML şi CSS. funcţionalitatea acestora se păstrează. Foarte supărător. Există însă modalităţi,
Un comentariu în cadrul unui fişier Pentru a vă asigura că site-ul dumnea- dacă nu de a împiedica, măcar de a face
HTML începe cu <1- şi se termină cu ->: voastră "se vede bine" şi în alte browsere, cât mai greu posibil furtul fotografiilor
<1- textul mai trebuie prelucrat -> codarea ar trebui facută conform standar- postate online: încărcaţi imaginile dum-
.dm..'9
Ele ~<it ~iew ~y flooI:mao1<s ~ahool !001< tjeIp
.1 !!Itttp,II_.chip.ro/
I!I LOGO ÎNAINTE DE URL: Pentru ca vizitatorii paginii dumneavoastră web să o poată regăsi rapid ~i pe viitor, În colecţia lor de bookmark-uri, vă
iii puteţi afi~a logo-ul site-ului Înaintea URl-ului.
~ TemplateMonster.com
Integrarea imaginilor de fundal
Cu ajutorul CSS puteţi integra foarte uşor
imagini de fundal pe pagina dumneavoastră
web. Dat fiind faptul că browser-ul aşează
întotdeauna imaginea CSS peste culoarea de
1cmplate 'lollsler Web Templal'"
T~4! f'r'loNtet'webste t~e-s. flash t~es and «hei' procb:ts are teadyofl\ade: web fundal, va trebui de asemenea să o definiţi şi
deslgl"l5,thatc.anbeused~abaSlSfOf faSl:andt.1'l~ywebste, Ou websltet~es.
fl.Wl tl!!~es and ~ ot:her PfOOJcts are wnpIe{ely cvstomrzollble ard feady for ITII'neQate pe aceasta - pentru cazul în care utilizatorul
dowriood
We ~ T~e."1onster .com do our best to PfO"tIde you V<"th web t~es desq'l t:J prerrun a blocat opţiune a de afişare a imaginilor.
quolly.
Pentru o imagine de fundal folosiţi pur şi
simplu următorul cod în fişierul CSS:
<style type="text/css">
Type: Css static full
packa/Je Type: (ss full site nash 8 div.bg {
Item: #18121 Item: '18126
Aut"", t!IQQ Authot: ~ background-image:
Oownlood" O OowrO>ads, 1
urI(..fi mag ini/fu ndal.g if);
$66 Puee
'$2650 l.hlQue-Pl'l(e
background-color: blue;
width: 640px; he ight: 80px;
border: 1px solid red;
padding:20 px;
}
</style>
A Cr.lStmas lott~ ~l fnalyl . Jdn 23rd; 2008
The Pr~ T~e h.!s been selected by the CtylStm~ loUtf")' Wsmer ~ 1$now on ts
şi în "corpul" fişierului dumneavoastră
Wltf ta Gteecel
Prerryn T~'ti ProdJchon Te-.-r.noloqY la>p:hzi 1 .JJ;t 9rh, ZOO8
-
HTML:
Tempk.teMonster ~ a re-orokJbor\aty, new produc.t.on tedrJO!oqy fhie
thev new eateq::wy rJ Premun Desql T~es.
offerng <body>
The HoIIday ISnot Qveţl . .J.dn••ţiţ 20CS Pn:e <div c/ass="bg">
Ned weekwt'l knowthe ~s oi Template1'o'(lnsl:~'s ChtIStmMlott~1. Lhque Pu::e
div-Container cu imagine de
P;I MAGAZIN CU TEMPLATE: Pe TemplateMonster.com găsiţi designuri profesionale pentru fundal
iii magazinul dumneavoastră online. </div>
tom: Opx"> nu poate oferi un f!t SOFT PENTRU FORUM: Proiectul open source phpBB2 se bazează pe
<span style="font-family:Arial, hotline non-stop, ••• PHP şi se poate instala În doar câteva minute.
Helvetica, sans-serif; font- dar indicat ar fi să
size: .8em; border-bottom: 3px
solid black; "Exemplu
intertitlu
precizaţi intervalele orare în care pot fi
preluate apelurile telefonice. Un client
bine tratat se va întoarce
Câştig de bani În internet
cu siguranţă.
m
Analizarea ,i optimizarea
aliniat la dreapta< /span></h3> magazinului online
Magazinul dumneavoastră online are un
Câştig de bani În internet
ea phpBB
Utilizare gratuită a soft-urilor
Transmiterea sigură
a datelor clienţilor
număr satisfăcător de vizitatori, dar nu
ştiţi ce comportament au clienţii dum-
neavoastră pe site sau dacă marketing-ul
pentru forumuri în special la introducerea datelor "sensi- online pe care îl practicaţi este eficient. în
Sunteţi în căutarea unui software liber, bile" ale utilizatorilor (cum ar fi de exem- acest caz, folosiţi platforma www.etrack
performant şi, implicit, gratuit pentru plu numerele de cont şi de pe cardurile de er.com. Funcţiile sale informative de con-
crearea de forumuri? Aruncaţi o privire credit), siguranţa trebuie să joace un rol trol şi statistică vă oferă date exacte şi o
asupra soluţiei numite phpBB. Cu aju- major. O codare SSL pe 128 biţi nu analiză economică a magazinului dum-
torul său puteţi construi rapid şi avantajos reprezintă doar un standard, ci şi o obli- neavoastră online. Serviciile celor de la
platforme de comunicare care corespund gaţie absolută. Dacă este posibil, utilizaţi etracker costă între 100 şi 500 de euro pe
tuturor cerinţelor pentru un astfel de sis- un certificat de securitate SSL special pen- lună, existând şi posibilitatea testării gra-
tem. cu phpBB puteţi realiza nelimitat tru pagina dumneavoastră web. Gân- tuite pe o perioadă de 14 zile.
numeroase forum uri, cu oricâte categorii diţi-vă la simplul fapt că şi cea mai sigură
doriţi. Mai multe informaţii găsiţi pe metodă de codare este inutilă atunci când,
Webhosting
site-ul oficial, www.phpbb.com. ulterior, trimiteţi datele clienţilor prin
mail, fără nicio măsură de siguranţă. Spaţiul web ca platformă de testare
considerabil restrâns. La data redactării •.•"I;""t.d".,,,lc •• ftht~.,t·w.blt.thtik.n m.t !Ump"i"."- "•• ben.ol"< dl. K.undenb,ndun9 und Hu."
O.t.n.chlltt·konfo.m.
,.,
K.nn;:.hl.n
ett.ck •••
In
,Iulte"
n."'V.l1 und
.m.m
m
ube.:a"'Qt.
f·M.If·", •• 1<..tlnQ •••"et
Webhosting
m •.•dm.' tr.n,p.'.nt
<meief.mit m.xim.l
aff"i.nt.
horedaychec:k.de:
proJektwerk.et.
moment dat raportul pre-performanţă • KJid<.pf.d., Int.""$1"'''
• 1'1.", Cliekm.p·O •••••I."
•
•
An.IVI. j.d •• W •• b.fo.m
Wlrl;.d'laftil,hk.iţl.n.lys."
• L.",fih'9a
• V•• d.ehts •• porting
A[go.'thm.n
t I I
Ix
Două versiuni, pe acelaşi PC
Cei care creează conţinut web explorabil prin intermediul browser-elor trebuie să-I şi testeze. Ce se Întâmplă Însă
când doriţi să vedeţi cum se comportă produsul atât În lEG,cât şi În IE7? Deşi, În mod normal, aceste versiuni nu pot
convieţui pe acelaşi sistem, vă prezentăm două metode de a elimina acest impediment. Andrei Licherdopol
S
unt cunoscute problemele ambelor
versiuni de Internet Explorer când Cu ajutorul
vine vorba de interpretarea codului unei maşini
CSS. Astfel, paginile Îmbunătăţite prin
CSS pot apărea diferit pe aceste două ver- puteţi testa
siuni, chiar pot prezenta defecţiuni di- pagina cu
ferite, de la o versiune la alta a navigatoru- mai multe
lui Microsoft. Drept urmare, faptul că o
pagină sau aplicaţie web rulează bine pe
lE7 nu garantează buna funcţionare pe
lE6. În mod normal, versiunea 7 este o
actualizare a variantei 6 şi nici nu se pune
problema convieţuirii acestora. Din feri-
cire, există câteva modalităţi de a ocoli
acest neajuns, soluţii pe care vi le prezen-
tăm În cele ce urmează. Prima variantă
funcţionează doar pentru sistemul de
operare Windows XP SP2, În timp ce a
doua este ideală pentru utilizatorii
Microsoft Vista. 1 iri Instalarea Microsoft Virtual PC 2007
., Insl.allnternetEl<filOIellO
El !nJtallllU1!'let E~ploref4 01
Elf~lnlell'ldE.ef501
Elll'lStalllnlelnelElICloffi5.S
Din nefericire pentru utilizatorii de Vista, El rn~all!WneI. hpb'et 6.0
fJ Instalarea unor variante stand-alone nu există o soluţie prea "curată" de insta-
de Internet Explorer lare a Internet Explorer 6 pe acest sistem
Presupunem că aveţi deja instalat pe sis- de operare. Jici suita MultiplelE nu
tem Internet Explorer 7. De regulă, acesta funcţionează prea bine cu Vista, motiv
se poate obţine automat, ca actualiza re pentru care cel mai cuminte ar fi să apelaţi lE MULTIPLU:Alternativ, puteţi instala mai
Windows XP SP2. Dacă l-aţi "ratat", la Microsoft Virtual PC 2007, aplicaţie multe variante stand-alone de lE.
poate fi procurat de la adresa www.mi gratuită care vă permite rularea mai mul-
crosoft.com/windows/ downloads/ iei get tor PC-uri virtuale, pe care puteţi instala multe versiuni de Internet Explorer, fără
itnow.mspx. Odată instalat lE7, nu veţi orice sistem de operare Microsoft. nicio problemă.
mai avea acces la versiunea anterioară. O Accesaţi pagina www.microsoft.com/
Din fericire, problema se rezolvă simplu: windows/ products/winfamily /virtualpc/ llI!Il:1 La configurarea VirtualPC, veţi avea
O Accesaţi adresa web http://tredosoft. default.mspx şi descărcaţi programul cu posibilitatea să specificaţi ca PC-ul virtual
corn/Multiple_lE. Aici, accesaţi legătura ajutorul legăturii Download now. În să folosească (printr-o punte) aparatura
Download Multiple lE installer. funcţie de sistemul vostru de operare, vi de pe calculatorul vostru În mod direct, ca
f} Rulaţi fişierul descărcat, multiple-ie- se va da posibilitatea să descărcaţi o vari- unitatea de disc, dar veţi putea şi să creaţi
setup.exe şi urmaţi paşii de instalare, ale- antă pe 32 sau 64 de biţi. o unitate virtuală care să citească ima-
gând ce versiuni mai vechi de lE doriţi să f} Instalaţi programul şi configuraţi un ginile virtuale de disc. Lucrurile stau la fel
instalaţi. PC virtual care să facă faţă cerinţelor sis- şi pentru conexiunea la internet. Adică
c) Bucuraţi-vă de posibilitatea de a testa o temului de operare pe care plănuiţi să-I veţi putea ieşi la plimbare pe internet cu 5
pagină sau aplicaţie web cu toate versiu- instalaţi pe acesta, apoi instalaţi acel sis- PC-uri virtuale simultan, folosind acelaşi
nile de lE dorite. tem de operare. Astfel, veţi putea rula mai IP. Folositor, nu-i aşa?
Internet pentru toţi
Conexiunea la internet, care până acum câţiva ani avea caracter de rara avis la români, reprezintă actualmente o
prezenţă constantă În vieţile majorităţii românilor. Nu se poate vorbi de niveluri de acoperire similare cu cele exis-
tente În Europa de Vest, dar lucrurile se mişcă şi probabil că foarte curând vom ajunge acolo. Mihaela Dogaru
P
entru găzduirea unei pagini web, este calculatorului propriu şi eventual de o co- lui, veţi beneficia mai mult sau mai puţin
suficient orice calculator conectat la in- nexiune la internet cu o viteză mediocră. de: o conexiune puternică pentru pagina
ternet, care să ruleze o aplicaţie de tip De aceea, este preferabilă integrarea acestu- web, spaţiu suficient de stocare a datelor
server corespunzătoare (precum Apache). ia pe server-ul unei companii specializate în paginii, posibilitatea unui flux mare de date
Evident, este neplăcut ca accesul la pagina găzduirea paginilor web, unde, în funcţie Între pagină şi vizitatori şi totodată securi-
dumneavoastră să fie condiţionat de starea de pachetul ales şi de specificul furnizoru- tatea datelor pe care le plasaţi pe acel server.
Când alegem un ofertant de webhosting,
trebuie să avem în vedere câţiva factori
cheie care determină o alegere viabilă,
după cum veţi vedea în continuare.
Unul dintre criterii este importanţa
paginii web pe care "vrem s-o trimitem în
gazdă". În caz că este doar un blog sau o ~t1 ~ ~f;iI'~ '~i:!;!l?:(b':
~ SoeeifiuUy, lhl$ dal3 tAAy ONlY bt used fOf Inlernel operaborlal !Jo t.-: 'foo ••••• ,..- 1'" tI"l'
• • ,. .~ •••• J__ ••__ 'tl
% purposes.UmaynotbausedforlargetedatmrtlSlflgorany
există o sumedenie de astfel de servicii ..
% olherpurpose '"lU'~~~oIo:1lll6ll,,,
o"",It••.,,,,,,,,,,,,,
""IIOll.l"OOlOlOC.O,ll
gratuite, iar unele chiar oferă posibilitatea % E~te INTERZlSAfole$Ueil datelor de pe <1tesl Sel\'ef In oricare
% alt scop deeat operarta retelei In spaml este INTERZISA
r . .•.• r- r __
~- ...
bllllng..contacl NC258-ROTLO
oferă suficient spaţiu de stocare, elemente nilmeservtl C1nsQljneslEbcro 212.52 166 211
r
ro ~-
r·
r r
r~"""'"
namrUMlI dn,002·0 net23 hU 193 178 118 193 r· r-
de securitate şi posibilitatea unui trafic info Obiect millnlalnfd by ROnD (10) reglslty r-.
r'
r •.• r~_~
notl'" doNin-""ln!listserv.NlC.ro r· rr~~~
__- . r_,_'_'_
r~~
lunar destul de intens. Din păcate, în obJ'ct-malnlalt1ed-by ROTlD-MNT r... r •. r .
I,Ipdaltd dorl.in-adftinelistserv .rne.ro 20060512
cazul serviciilor gratuite, este improbabil up(fiilted dan!rotld.ro 2006052<1
Suport tehnic nespecificat e-mail / Forum / Telefon 24/24 ore (telefon, zilnic (Între orele 24/24 ore (telefon,
24/24 ore da e-mail, chat) 9-24) e-mail, chat)
/ Messenger
PHP, Peri, DotnetPanel Virus Scan, WAP, My5QL,MsSQL,ASP, backup zilnic,lMAP, backup zilnic,
Apache, Desktop, SmarterStats Shopping Cart, CGI, ASP.NET,551,Ruby on webmail, Auto Res- Înscriere la
Python, Pro, backup, Ajax, ASP, Peri, directoare Rails,Tomcat 5, Peri, ponder, PHP5, My5QL motoarele
Extra nespecificat SSI, ASP.NET,PHP 5, Peri, protejate, server 5MTP, JS, CGI,webmail, 5, Tomcat 5, Peri 5.8.8, de căutare,
AntiSPAM, Python, Secured Folders, suport video, Flash, Auto-Responder, CGI,Rubu on Rails Site Builder Pro!,
antivirus, SilverLight, Auto backup, statistici site, POP3, IMAP,2end 1.8.5, Zend Opti mizer, Proteclie DDOS,
webmail, Responder, antivirus, webmail, Opti mizer, Webalizer, Webalizer, AW 5tats, antlspam,
backup zilnic antispam protectie SPAM AWStats 5endMaii Support antivirus
Proba nespecificat nespecificat nespecificat 30 de zile nespecificat 30 de zile