Explorați Cărți electronice
Categorii
Explorați Cărți audio
Categorii
Explorați Reviste
Categorii
Explorați Documente
Categorii
EM L
O EC
N }
ST I
R E
AT
IV
|
INTRODUCERE
A]i c\utat o informa]ie cu ajutorul unui motor de c\utare [i a]i g\sit o pagin\ Web
care v-a atras aten]ia?
Ave]i o firm\, a]i dori s\ v\ extinde]i, s\ v\ face]i reclam\ prin intermediul Internetului
[i de aceea ave]i nevoie de o pagin\ Web?
Cu alte cuvinte, v\ oferim totul pentru a deveni un adev\rat web designer, pentru a
avea un job de viitor în care s\ v\ dezvolta]i creativitatea.
2 lec]ie demonstrativ\ Web design
Ve]i putea ob]ine rezultate remarcabile prin studierea zilnic\ a acestui curs, timp de
cel pu]in 15 minute. Numai în acest mod ave]i posibilitatea de a face progrese
rapide [i de a deveni un specialist în realizarea paginilor Web!
Pentru ca studiul individual s\ fie cât mai u[or [i eficient, pe marginea lec]iilor au
fost introduse diferite simboluri:
Programa cursului de
Web Design
La `nceputul fiec\rui modul ve]i g\si o parte de introducere, `n care sunt prezentate
succint temele abordate `n cadrul acestuia. Iat\ un exemplu de introducere din
modulul 4.
MODULUL 4
Modul de lucru
Nu trebuie s\ fim conecta]i la Internet pentru a construi documente hipertext, astfel
c\ pute]i `ncepe lucrul imediat cum a]i deschis calculatorul, f\r\ set\ri sau configur\ri
suplimentare. Modalitatea de lucru f\r\ conexiune Internet activ\ se mai nume[te [i
lucru off-line.
Se presupune c\ ave]i no]iunile de baz\ `n utilizarea sistemului de operare instalat
pe calculatorul dumneavoastr\.
Pentru a lucra ordonat, vom crea un folder `ntr-o loca]ie pe hard-discul
computerului, de exemplu, un folder numit LucruHTML vizualizat pe desktop-ul
sistemului (figura 13).
Se deschide acest folder, `n care vom crea ulterior un fi[ier HTML. Majoritatea
sistemelor de operare din familia celor dezvoltate de corpora]ia Microsoft au setat\
implicit ascunderea extensiilor pentru fi[ierele al c\ror tip este recunoscut. De
exemplu, fi[ierul „document.txt” se vede doar „document”, aceasta pentru c\
extensia fi[ierului de tip text – adic\ [irul „.txt” – este ascuns\ de sistemul de operare.
Deoarece paginile HMTL pot avea dou\ extensii (de patru caractere : „.html”,
respectiv de trei caractere: „.htm”), va fi foarte util atunci când lucra]i s\ pute]i
vizualiza fi[ierele `n `ntregime, deci [i cu extensie.
Pentru aceasta, `n meniul View al ferestrei `n care este deschis folderul LucruHTML
se alege Folder Options. Apare o alt\ caset\ de dialog cu etichetele General,
View [i File Types. Alegem View, iar `n lista Advanced settings se localizeaz\ [i
se deselecteaz\ (`n cazul `n care este bifat\) c\su]a corespunz\toare op]iunii Hide
file extensions for known file types.
Se apas\ butonul OK, opera]iune care este `nso]it\ de confirmarea set\rilor efectuate
[i de `nchiderea casetei de dialog.
Dac\ a]i urm\rit `ntocmai pa[ii prezenta]i anterior, ar trebui s\ ave]i deschis\ fereastra
ce vizualizeaz\ con]inutul folderului LucruHTML, care, de altfel, este vid, adic\
nu con]ine nici un fi[ier.
Crearea primei pagini HTML porne[te, de fapt, de la crearea unui fi[ier text, deoarece
codul HTML este scris `n mod text.
Astfel, vom crea un fi[ier text `n folderul curent (LucruHTML), alegând din meniul
File op]iunea New [i apoi New Text Document. Apare astfel fi[ierul “New Text
Document.txt”, c\ruia `i pute]i observa [i extensia corespunz\toare, ca urmare a
set\rii f\cute anterior. Acest fi[ier se redenume[te „pagina1.html”, proces `nso]it de
schimbarea extensiei [i, deci, de o cerere de confirmare din partea sistemului de
8 lec]ie demonstrativ\ Web design
~n acest moment, avem acela[i fi[ier deschis cu dou\ aplica]ii: Internet Explorer [i
Notepad.
i
Se observ\ c\ `n editorul de text s-a deschis un fi[ier vid, aici urmând ca noi
s\ scriem efectiv codul `n limbajul HTML. Modific\rile f\cute `n acest fi[ier
trebuie salvate [i re`nc\rcate `n browser.
Web design lec]ie demonstrativ\ 9
Spre exemplu, vom `ncepe cu clasicul „Hello world!”, respectiv afi[area unui text
`n fereastra browserului cu ajutorul limbajului HTML.
Scriem textul dorit `n fereastra aplica]iei Notepad (`n cazul nostru – “Hello world!”),
dup\ care salv\m modific\rile, alegând op]iunea Save din meniul File. Revenind
la fereastra browserului, se execut\ click pe Refresh din toolbar (bara de
instrumente). ~n acest moment va ap\rea `n fereastra acestuia textul pe care l-am
scris `n codul surs\ (`n Notepad).
Dac\ dorim alte modific\ri, revenim la fereastra aplica]iei Notepad, unde realiz\m
opera]iile dorite, salv\m, revenim la fereastra de browser [i re`nc\rc\m (Refresh).
i
Nu `ncerca]i s\ face]i modific\ri `n fereastra browserului, deoarece aceasta
este utilizat\ doar pentru vizualizarea paginilor.
e Exerci]iul 3
i
Ve]i observa c\ aceste combina]ii rapide ofer\ `n timp o foarte mare vitez\
de lucru, eliminându-se timpii mor]i ce apar `n utilizarea mouse-ului.
10 lec]ie demonstrativ\ Web design
Instruc]iunea condi]ional\
Instruc]iunea „?”
În locul instruc]iunii if poate fi, de asemenea, folosit\ instruc]iunea „?”. De obicei,
aceasta este folosit\ peste tot unde condi]ia [i ac]iunile întreprinse nu sunt complexe.
Forma general\ a acestei expresii condi]ionale este:
test?actiune_pentru_conditia_adevarata: actiunea_pentru conditia_falsa
Exemplu
Buclele
Folosirea instruc]iunilor de ciclare o vom descrie în capitolul destinat construc]iei
algoritmilor. Tot `n acest capitol ne vom limita la enumerarea tipurilor [i a sintaxei
instruc]iunilor de ciclare care apar în limbajul Perl.
Instruc]iunea for
Instruc]iunea for este folosit\ în cazurile în care [tim de la bun început num\rul de
repet\ri ale buclei. Datorit\ posibilit\]ii de definire a condi]iei de realizare a
instruc]iunilor cuprinse în bucl\, exist\ posibilitatea de modificare a contorului.
Totu[i, pentru cre[terea lizibilit\]ii codului, trebuie s\ evit\m astfel de situa]ii.
Instruc]iunea for are forma:
for (conditia_de inceput, test, modificarea_indexului) {
blocul _instructiunii;
}
Web design lec]ie demonstrativ\ 11
Exemplu
for ($i=1; $i<10; $i++) {
for ($j=1; $j<=10; $j++) {
$rezultat = $i*$j;
print “$i x $j =$rezultat\n”;
}
}
Bucla while
Instruc]iunile cuprinse în bucla while sunt realizate atâta timp cât este adev\rat\
condi]ia specificat\.
while (conditia) {
blocul_instructiuni
}
Exemplu
Doamna înv\]\toare l-a pus pe Ionescu s\ scrie caligrafic de 100 de ori urm\toarea
propozi]ie: “Nu voi mai vorbi niciodat\ în timpul orei de limba român\”.
$a =100;
while ($a>0) {
print “Nu voi mai vorbi niciodata in timpul orei de limba romana \n”;
$a—;
}
Bucla until
Asem\n\toare cu bucla while este [i bucla until. Aceasta se diferen]iaz\ prin faptul
c\, `n vreme ce în bucla while condi]ia trebuia s\ fie îndeplinit\ pentru a realiza
blocul de instruc]iuni, în cazul buclei until este exact invers.
Ac]iunea buclei este, a[adar, urm\toarea: pân\ când condi]ia nu este îndeplinit\,
realizeaz\ comanda…
Exemplu
$a =100,
until ($a<=0) {
print “Nu voi mai vorbi niciodata in timpul orei de limba romana.\n”;
$a—;
}
12 lec]ie demonstrativ\ Web design
e Exerci]iul 5
Exerci]iul urm\tor are un caracter de concep]ie, de aceea îl vom împ\r]i
în trei etape.
I. În prima faz\ trebuie s\ facem cuno[tin]\ cu aplica]iile existente
pe Internet ale magazinelor virtuale (de exemplu, libr\rii). Nu
trebuie s\ facem cump\r\turi, dar merit\ s\ urm\rim metodele
de c\utare a m\rfurilor, principiile de achizi]ionare [i metodele
de transmitere a comenzii.
Observa]iile efectuate trebuie scrise sub form\ de noti]e, iar
acestea vor u[ura mai târziu definirea formal\ a algoritmului de
func]ionare a magazinului virtual.
Web design lec]ie demonstrativ\ 13
II. În cea de-a doua etap\ trebuie împ\r]ite toate opera]iile realizate
în magazin în blocuri func]ionale, de exemplu:
• r\sfoirea catalogului de produse;
• proiectarea con]inutului co[ului;
• trimiterea formularului de comand\.
III. Ultima etap\ a realiz\rii exerci]iului const\ în preg\tirea unei
scheme bloc de func]ionare a magazinului pe Internet. Munca o
pute]i începe de la operarea cu blocurile func]ionale la nivelul
general specificat la punctul II, dar trebuie s\ trata]i o astfel de
schem\ ca fiind general\. Ar trebui luate `n considera]ie diferite
proceduri, de exemplu deservirea gre[elilor: dac\ „un client nu
[i-a trecut pe formularul de comand\ adresa” sau „c\utarea
produselor s-a încheiat cu un insucces”, atunci ce instruc]iune va
fi necesar\?
Indica]ie: Definind procedurile am\nun]ite, trebuie s\ ave]i în
vedere scopul activit\]ii magazinului, adic\ maximizarea
vânz\rilor [i satisfacerea clien]ilor (s\ presupunem c\ în aceast\
ordine). A[adar, dac\ clientul nu poate g\si produsul pe care îl
caut\, atunci poate c\ ar trebui s\-i propunem un produs
asem\n\tor sau s\ proiect\m o informa]ie despre o ofert\
promo]ional\.
Schema bloc elaborat\ în acest exerci]iu v\ va fi util\ în partea
urm\toare a cursului. Atunci când ve]i cunoa[te mai bine
principiile de programare în limbajul Perl [i când ve]i st\pâni
modul de comunicare cu utilizatorul motorului de c\utare pe
Internet cu ajutorul formularelor de pe paginile WWW, vom putea
trece la implementarea magazinului virtual.
<body>
Con]inutul documentului. <br> <br>
Data actualiz\rii:
<script language =“JavaScript”>
document.write (document.lastModified);
</script>
</body>
</html>
Fig. 16. Scriptul care afi[eaz\ data ultimei actualiz\ri a documentului HTML
14 lec]ie demonstrativ\ Web design
Fig. 18. Hyperlink-uri care permit modificarea paginii de start [i ad\ugarea unei adrese
URL la mul]imea paginilor preferate
e Exerci]iul 5
Problema de fa]\ se compune din trei p\r]i.
• În prima parte trebuie s\ preg\ti]i o pagin\ web, dup\ care trebuie
introdus un formular cu interog\ri c\tre câteva motoare de c\utare
în re]ea, de exemplu Altavista, Google etc. Codurile surs\ care trebuie
scrise în acest scop sunt accesibile pe site-urile motoarelor de c\utare.
• Cea de-a doua etap\ de lucru const\ în alegerea unei liste de cuvinte
cheie, conform c\reia ve]i c\uta propria pagin\ web (de exemplu
numele [i prenumele dumneavoastr\, dac\ apar pe pagin\, sau alte
cuvinte care apar în sec]iunea head a paginilor web). Apoi, trebuie
preg\tit un tabel ale c\rui coloane vor con]ine, mai întâi, propriul
site, apoi motoarele de c\utare selectate anterior; liniile tabelului
vor con]ine pozi]iile pe care le-a ocupat pagina respectiv\
în ranking-urile resurselor c\utate cu diferitele motoare de c\utare
pe baza cuvintelor cheie folosite.
• Cea de-a treia etap\ const\ în g\sirea paginii noastre cu ajutorul
motoarelor de c\utare selectate la început, conform cuvintelor cheie,
analizând apoi pozi]ia paginii noastre.
www.Pagina Mea.ro Astalavista Google
Download 3 5
Software 22 –
Programare 9 5
Salvare pe CD-ROM
Exemplu
$ sir=~/stiu/, #daca variabila $sir contine ~”stiu”. Adev\rat, de
exemplu #pentru [irul ”Iti spun ceva”
$sir=~/^stiu$/, #daca variabila $sir_de semne, atunci lantul ”stiu”
$[ir=~/^[a-zA-z]+$/, #daca variabila $sir_de semne contine orice
cuvant # care se compune din litere mici si mari, de exemplu ”VrEmEa”
18 lec]ie demonstrativ\ Web design
Buton:
Lista de vizitatori
021/33.225.33; www.eurocor.ro