Elaborarea Site Ului Web a Centrului de Instruire a Personalului Pentru Transporturi Internationale

Informatica

Elaborarea Site Ului Web a Centrului de Instruire a Personalului Pentru Transporturi Internationale

Byadmin ianuarie 1, 2024

INTRODUCERE

1. CONCEPTE FUNDAMENTALE ALE WORLD WIDE WEB-ULUI

Clienți

1.2 Netscape Navigator

1.3 Microsoft Internet Explorer

1.4 Efecte multimedia Internet Explorer 5.5

1.5 Software server

2. TEHNICI DE AFIȘARE HTML

2.1 Limbajul de marcare pentru hipertext (HTML)

2.2 Formatarea de bază a paginilor

2.3 Adăugarea de imagini

3. DESIGNUL PAGINILOR WEB

3.1 Organizarea Site-urilor Web

3.2 Navigarea

3.3 Desig-ul paginior

3.4 Publicarea

4. IMPLIMENTAREA FOILOR DE STIL ÎN PAGINILE WEB

4.1 Cascading Style Sheets

4.2 Metode și sintaxă

4.3 Stiluri inline

4.4 Stiluri încapsulate

4.5 Foi de stil legate

4.6 Proprietăți și valori

4.7 Fonturi

4.8 Familii de fonturi pentru foile de stil

4.9 Defenirea proprietăților și valorilor fonturilor

=== A_DOUA_SCEMA ===

Schema funcțională a siteului Web

=== l ===

INTRODUCERE

Web-ul a fost creat în 1989 Tim Berners-Lee de la Laboratorul de fizică particulelor CERN din Elveția. Intenția lui Tim a fost să creeze un sistem capabil să transfere documente și alte informații științifice între CERN și Centrul Acceleratorului Liniar Stanford din California. Datorită costului și vitezei reduse a mijloacelor de transfer tradiționale, calculatoarele conectate în rețea prin Internet asigurau cea mai bună metodă de editare și livrare a acestor informații.

De asemenea, Web-ul a fost conceput pentru a oferi utilizatorilor un mod neliniar de navigație. Spre deosebire de cărți în care cititorul trece de la o pagină la alta, pe Web se utilizează hipertextul pentru a trece direct de la documentul 1 la documentul 100. De fapt, în cazul Web-ului noțiunea de documente numerotate este irelevantă. Autorul unui document Web poate furniza legături către orice document Web existent.

Datorită avantajelor sale față de mijloacele de editare tradiționale, Web-ul a fost adoptat pentru o gamă largă de utilizări. Dar adevărul rol al Web-ului îl reprezintă afacerile. Companiile au început să se bazeze foarte mult pe acest mediu. Mai mult decât un simplu instrument de marketing, Web-ul oferă companiilor noi metode de a conduce afacerile. Cu ajutorul său, companiile au posibilitatea să-și informeze clienții, să asigure instruirea personalului, să vândă produse și să ofere sprijin clienților. Facilitățile oferite de Web în domeniul afacerilor s-au extins atât de mult încât s-au ivit modele de afaceri complet noi. Au început să apară companii a căror singură vitrină de prezentare se află pe Web.

Deși companiile au impus cerințe mari, tehnologia a dovedit că poate face față sarcinilor. Arhitectura Web client-server furnizează un mecanism care deservește zilnic milioane de pagini web. Întregul sistem este distribuit pe scară largă și extrem de efecient.

1. CONCEPTE FUNDAMENTALE ALE WORLD WIDE WEB-ULUI

Clienți

Clienții Web – de obicei numiți browsere – reprezintă aplicațiile software care permit utilizatorilor să viziteze site-urile Web. Clienții Web sunt atât de strâns asociați cu Web-ul încât majoritatea oamenilor cred în mod greșit că browserul lor este chiar Web-ul.

Inițial, Web-ul consta numai din pagini și pagini de text, fără nici o imagine. Odată cu apariția primului browser Web grafic în 1993, Web-ul a început cu adevărat să se impună. Astăzi, browserele Web furnizate de Netscape și Microsoft oferă chiar și experiențe mai interesante, cum ar fi animație, sunete și secvențe video.

Până de curând, browserul Navigator al firmei Netscape era de departe cel mai popular program de navigare de pe piață. Dar concurența strânsă a browserului Internet Explorer al firmei Microsoft a impus un instrument care ocupă cam jumătate din piață.

1.2 Netscape Navigator

Odată cu apariția programului Navigator, Netscape a introdus suport pentru Dynamic HTML (DHTML), o nouă metodă de asigura interactivitate pe Web. Cu toate acestea, implementarea DHTML propusă de Netscape diferă de versiunea firmei Microsoft.

Netscape Navigator suportă și în continuare toate tehnologiile Web standard și este disponibil pentru o gamă vastă de sisteme de operare, cum ar fi Windows, Macintosh și UNIX.

1.3 Microsoft Internet Explorer

Lansat prima oară în august 1995, browserul Web Internet Explorer este utilizat la ora actuală de aproximativ jumătate din piață. Începând cu versiunea 4.0 a programului furnizează supotr pentru noi tehnologii ca DHTML, canale și componente desctop active. Ca și Navigator, browserul suportă de asemenea toate tehnologiile Web standard cum ar fi HTML, JAVA și aplicații plug-in. Explorer asigură și comoditate în utilizare: utilizatorii sistemului de operare Windows vor descoperi că programul se integrează în experiența generală de lucru cu calculatorul.

1.4 Efecte multimedia Internet Explorer 5.5

La începuturi, imaginea era o extravaganță în World Wide Web, iar primele navigatoare o ignorau. Pe măsură ce tehnologia a evaluat și Web-ul a devinit tot mai popular, imaginile au devinit insuficiente. Astăzi, navigatoaele ne permit o veritabilă „imersiune” în mediul virtual iar standardele încearcă cu greu să țină pasul.

Apărut recent, navigatorul Internet Explorer 5.5 aduce câteva facilități interesante, dintre care pot fi enumerate atașarea de filtre vizuale, realizarea de prezentări multimedia sincronizate sau crearea de componente hipertext cu semantici stabilite de programatorii Web, suportul pentru foile de stiluri XSL și schemele XML și altele.

1.5 Software server

Un server Web este un program instalat pe un calculator conectat la Internet. Serverile primesc cereri de la clienți (browsere Web), obțin fișierele corespunzătoare și le livreză clienților.

În ziua de azi se folosesc numeroase tipuri de calculatoare și sisteme de operare, și majoritatea oferă software server Web de foarte bună calitate. Cele mai populare sisteme de operare pentru calculatoare ce deservesc pagini Web sunt UNIX și Microsoft Windows NT. UNIX este folosit de la crearea Web-ului și majoritatea serverilor Web rulează în continuare acest sistem.

2. TEHNICI DE AFIȘARE HTML

2.1 Limbajul de marcare pentru hipertext (HTML)

Construit Web-ul a fost pe baza ideii de Hipertext – interconectarea documentelor pentru a alcătui structuri de informație comlexe. Limbajul utilizat pentru legarea acestor documente se numește limbajul de marcare pentru hipertext (HTML-HipertextMarcupLanguage). La baza fiecărei pagini Web este codul HTML, care poate fi vizualizat prin selectarea comenzii View Source într-un browser Web standard. Designerii Web care doresc se includă imagini trebuie să le creeze într-un program separat de editare a imaginilor cum ar fi Photoshop. Apoi imaginile sunt convertite în HTML și sunt redate în cadrul browserului. Web-ul a fost construit pentru a fi un sistem interplatformă de publicare a informațiilor, corespunzător Hardware-ului fiecărui utilizator. Deoarece fonturile, rezoluția și dimensiunea monitorului variază de la un calculator la altul, în HTML n-au fost prevăzute elemente pentru tehnici standard de formatare a paginilor cum ar fi lentrinele (DropCaps) și coloane multiple de text.

În ciuda limitărilor acestui limbaj, designerii au conceput o serie de trucuri pentru a crea site-uri Web un aspect mai plăcut. De asemenea, au apărut noi tehnologii cum ar fi Cascading Style Sheets și fonturi încărcabile, care facilitează sarcina realizării unor pagini Web de înaltă calitate.

Părerea larg răspândită este că HTML nu reprezintă o tehnologie înaltă, ci este un limbaj logic și simplu. Elementele HTML de bază sunt foarte accesibile pentru majoritatea oamenilor deoarece utilizează o sintaxă ușor de învățat. Cu toate acestea, pe măsură ce utilizăm HTML ca instrument de prezentare, descoperim că limbajul devine mai complex.

Prima regulă a limbajului HTML este să închidem ceea ce am deschis. Aceasta se referă la faptul că majoritatea etichetilor HTML necesită o instrucțiune gen etichetă-de-început și o instrucțiune etichetă -de-sfârșit corespunzătoare, după cum se prezintă mai jos:

<html>

</html>

Etichetă (tag) O etichetă HTML este o componentă care comandă unui browser Web să execute o anumită operație, cum ar fi crearea unui paragraf sau inserarea unei imagini. În majoritatea cazurilor, etichetele trebuie mai întâi deschise, apoi trebuie închise la terminarea operației. Totuși această regulă are numeroase excepții.

Atribut (sau argument) un atribut HTML modifică o etichetă. De exemplu, putem alinia un paragraf sau o imagine în cadrul etichetei.

Valoare Valorile sunt asociate atributelor și descriu modificările efectuate. De exemplu, dacă utilizăm un atribut de aliniere pentru o etichetă, putem atribui o valoare atributului respectiv. Valorile pot fi literale, cum ar fi stânga sau dreapta, sau numerice, cum ar fi lățimea și înalțimea unei imagini, în care caz valoarea este asociată cu dimensiunile imaginii exprimate în pixeli.

2.2 Formatarea de bază a paginilor

Toate paginile HTML sunt formatate prin utilizarea unor etichete speciale care indică natura paginii, secțiunea sa de antet, secțiunea de bază (corpul-body) și titlul. Etichetele care trebuie utilizate întotdeauna pe o pagină HTML standard sunt următoarele:

<html>…</html>Etichetele de început <html> și de sfârșit </html> anunță browserul că o pagină HTML este pe cale să înceapă sau să se termine.

<head>…</head>Eticheta <head> include informații despre antet (header) cum ar fi titluri, comenzi speciale și date de script.

<title>…</title> Etichetele de titlu ne permit să denumim pagina. Această informație va fi afișată în bara de titlu a browserului.

<body>…</body>Eticheta <body> determină atributele de bază ale unei pagini, cum ar fi culoarea de fundal și/sau imaginea ce va fi utilizată și variabilele de culoare ale textului. Tot ce este cuprins între aceste etichete va fi afișat în câmpul vizibil al browserului Web.

Structura unei pagini HTML standard este următoarea:

<html>

<head>

<title>Titlul paginei mele!</title>

<body>

</body>

</html>

2.3 Adăugarea de imagini

Imaginile conferă paginilor un aspect atrăgător, iar eticheta imagine va fi una dintre cele utilizate în mod regulat. Etichetele pentru imagini reprezintă o excepție a primei reguli – ele nu necesită o etichetă de sfârșit, dar au o serie de atribute importante.

Etichetele de imagini sunt alcătuite din eticheta pentru imagine <img> și sursa imaginii, src:

următoarele atribute trebuie incluse în fiecare etichetă de imagine:

width=”x” Acest atribut definește lățimea imaginii

height=”y” Acest atribut definește înalțimea imaginii

border=”x” Valoarea lui x în acest caz determină ce porțiune din contur va desena browserul în jurul imaginii. În majoritatea cazurilor, valoarea conturului va fi egală cu „0”.

Alt=”x”Atributul alt va permite să furnizăm o descriere a imaginii. Acest lucru este foarte util pentru persoanele care dezactivează imaginile și pentru cei care utilizează browserul ce afișează numai text.

Tabele. Cele trei etichete de tabele necesare pentru a crea tabele sunt următoare:

<table>…</table>Această etichetă determină începutul unui tabel în cadrul unui document HTML.

<tr>…</tr>Aceasta este eticheta pentru un rând de tabel și determină rândurile – spațiile orizontale de la stânga la dreapta din cadrul unui tabel.

<td>…</td>Eticheta pentru datele tabelului definește celule individuale ale acestuia. Eticheta de celulă și informația conținută în celulă determină structura pe coloane a tabelului.

Cadre. Cadrele sunt foarte utile pentru designeri atunci când o porțiune sau mai multe ale unei pagini sunt concepute ca elemente statice. Crearea unei pagini cu cadru elementare necesită cel puțin trei pagini separate de HTML. Avem nevoie de frameset, pagina invizibilă de cod HTML care controlează afișarea și funcționarea cadrului. Apoi avem nevoie de o pagină individuală de cod pentru fiecare cadru. Prin urmare, dacă cea mai simplă pagină cu cadru are două pagini vizibile, în total sunt trei pagini HTML; dacă o pagină cu cadru are trei pagini vizibile, în total sunt patru pagini ș.a.m.d. Întotdeauna va exista o pagină cu cadru ascunsă.

3. DESIGNUL PAGINILOR WEB

3.1 Organizarea Site-urilor Web

Site-urile reprezintă o serie de pagini Web interconectate care sunt cuprinse în același domeniu general. Site-urile deservesc un anumit domeniu de interes – vânzarea de hardware, împărtășirea de opinii politice, promovarea diferitelor tipuri de distracții etc. De asemenea, site-urile Web pot conține legături către alturi site-uri ceea ce determină obținerea unor „pânze” de informații.

Primul document dintr-un site Web se numește home page (pagină de pornire). Aceasta conține legături către toate documentele principale din cadrul prezentării. Deoarece relațiile dintre pagini pot deveni foarte compexe, designerii Web crează hărți ale site-ului pentru a ilustra toate drumurile posibile dintr-o prezentare. Figura următoare prezintă schema unui site Web cu două nivele.

Fig. 1 Schema unui site Web cu două nivele.

Un site Web cu un număr mai mare de pagini are nivele de organizare mai complexe. Relațiile dintre homepage și pagina de nivel secund este repetată, creând o hartă a site-ului semilară unui arbore. Un site Web care conține treisprezece poate avea trei nivele de organizare:

Fig. 2 Schema unui site Web cu trei nivele.

În exemlpul precedent, fiecare pagină de pe nivelul doi este copilul paginii de pornire și părintele paginilor de pe nivelul trei care sunt legate la ea. Acest model poate fi repetat în adâncime pe patru, cinci sau mai multe nivele, în funcție de numărul de documente al site-ului.

3.2 Navigarea

Deoarece paginile Web sunt legate între ele și permit utilizatorilor să-și creeze un drum propriu în cadrul unui site, sistemele de navigare sunt esențiale pentru experemente de navigare reușite. Procesul de navigare poate fi bazat pe text sau grafic. Dispozitivele comune de navigare grafică includ pictograme, butoane și bare de meniu.

Sarcina de a asigura o navigare clară revine designerilor Web. Înarmat cu o hartă a site-ului, un designer schițează toate zonele în care utilizatorii vor putea „sări” din orice pagină a unui site Web. Aceste zone includ în mod tipic pagina de pornire (homepage), paginile de nivel secundar, un motor de căutare și o legătură e-mail.

Un site web cu zeci de documente va necesita opțiuni de navigare pentru nivelul secundar. Navigarea de nivel secundar este adesea bazată pe text deoarece fiecare pagină de la niveul doi are nevoie de un sistem de navigare separat, iar încarcarea mai multor dispozitive de navigare poate fi consumatoare de timp. Un alt motiv pentru care se recomandă navigarea bazată pe text este faptul că navigarea de nivel secundar necesită de obicei actualizări frecvente-adăugarea sau eliminarea de documente dintr-un site Web este un fenomen obișnuit.

3.3 Desig-ul paginior

Cea mai mare diferență dintre tipărituri și Web este faptul că designerii Web nu au nici un control asupra mecanismului de livrare. Spre deosebire de tipar, unde un designer poate specifica numărul și dimensiunea paginilor de hârtie, paginile Web sunt vizualizate pe o gamă largă de calculatoare și alte dispozitive electronice.

De asemenea, acestea dispozitive au la dispoziție un spațiu limitat pentru afișarea unei zone dintr-o pagină Web. Tehnicile uzuale folosite pentru tipărituri, cum ar fi coloanele multiple de text curgător, nu sunt relevante în acest mediu fiindcă de obicei o pagină Web nu poate fi vizualizată în întregime pe calculator fără a o deplasa. Browserele Web oferă de obicei bare de defilare pentru documente ce conțin mai multe informații care pot încapea în zona furnizată de monitorul calcuatorului. Barele de defilare permit designerilor Web să creeze pagini de lungime infenită. Faptul că o pagină Web poate fi defilată pune probleme unice unui designer Web. Informațiile cum ar fi siglele și elementele de navigare sunt dese ori repetate în cadrul unei pagini Web deoarece poate fi necesar ca utilizatorul să acceseze asemenea informații din diferite locații ale documentului.

3.4 Publicarea

Sit-urile sunt publicate prin transferul fișierilor HTML și al fișierilor mutimedia asociate pe servere Web. Aceste servere se află de obicei la o locație de la distanță – departe de locul de unde a fost conceput site-ul.

Protocolul de transfer al fișierilor (FTP – File Transfer Protocol) este un standard care permite mutarea, redenumirea sau ștergerea fișierilor de pe un calculator de la distanță. Când un designer a terminat un site Web și este gata să îl publice, fișierile sunt transferate pe un server Web cu ajutorul unui program FTP. Aplicații cum ar fi WSFTP pentru Windows și Fetch pentru Macintosh sunt programe shareware puțin costisitoare utilizate de designerii și publiciștii Web.

4. IMPLIMENTAREA FOILOR DE STIL ÎN PAGINILE WEB

4.1 Cascading Style Sheets

Cascading Style Sheets reprezintă un standard referitor la o serie de metode de a aplica elemente de stil paginilor HTML. În acest caz, considerăm stilul ca fiind orce tip de element de design, cum ar fi fontul, fundalul, textul, culorile legăturilor, marginile și amplasarea obiectelor pe pagină.

CSS a fost dezvoltat pentru a obține un grad mai înalt de control asupra textului și imaginilor. Dar CSS reprezintă o nouă tehnologie care are unele dezavantaje. Cea mai mare problemă este că, pentru moment, browserele Web nu suportă în întregime CSS. Deși Microsoft a introdus CSS în versiunea din Windows 95 3.0 a browserului Internet Explorer, există unele erori de implimentare. Netscape, grăbit să ajungă din urmă concurența, a dezvoltat Navigator 4.0 astfel încât să suporte CSS. Dar și aici au apărut erori. În plus, numai o minoritate de vizitatori a site-ului sunt la curent cu cele mai recente și cele mai bune browsere, și respectarea standardului strict impus de HTML 4.0 nu este încă la îndemână pentru majoritatea designerilor profesioniști și amatori.

Nu e mai puțin adevărat că foile de stil oferă o soluție mult așteptată la problemele limitărilor HTML. Rezultatele sunt un control mai bun asupra fonturilor, gestionarea culorilor, controlul marginilor și chiar efecte speciale suplimentare, cum ar fi umbrirea textelor.

4.2 Metode și sintaxă

Există o diversitate de metode prin care foile de stil pot fi aplicate unui document HTML. Sintaxa se referă la structura propriu-zisă a informațiilor conținute într-o foaie de stil.

Iată trei metode de a aplica o foaie de stil unui document HTML:

Inline Această metodă ne permite să luăm orice etichetă HTML și să-i adaugăm un stil. Utilizarea metodei inline ne oferă un control maxim asupra oricărui aspect al unei pagini Web. Să presupunem că dorim să controlăm aspectul unei anumite pagini. Putem adăuga pur și simplu un atribut style=x etichetei paragrafului, iar browserul va afișa paragraful respectiv utilizând valorile de stil adăugate în cod.

Embeded (încapsulat) Încapsularea ne permite să controlăm o pagină completă de cod HTML. Utilizarea etichetei <style>, care este amplasată în cadrul secțiunii <header> a unei pagini HTML, inserează atribute de stil detaliate care vor fi aplicate întregii pagini.

Linked sau external (legat sau extern) O foaie de stil legată este un instrument puternic care ne permite să creăm foi de stil principale ce pot fi aplicate unui întreg site. Un document foaie de stil principală este creată de un designer Web utilizând extensia .css. Acest document conține stilurile pe care dorim să le aplicăm unui întreg site Web ( unei singure pagini sau chiar la mii de pagini). Orice pagină legată de respectivul document va prelua stilurile indicate.

Propozițiile necesită elemente specifice, ca și ecuațiile matematice. Foile de stil sunt semilare atât propozițiilor cât și ecuațiilor prin faptul că dacă nu respectă o anumită ordine, sau sintaxa, e posibil să nu funcționeze corect.

Indiferent de metoda utilizată pentru a aplica stiluri documentului HTML, sintaxa va fi similară. Foile de stil, ca și propozițiile, sunt alcătuite din porțiuni specifice. Aceste porțiuni includ următoarele:

Selector Un selector este un element care va primi atributele definite. Aceasta poate fi o etichetă, de exemplu un titlu, H1, sau un paragraf, P. Foile de stil ne permit să folosim selectori avansați, inclusiv clase.

Proprietate O proprietate definește un selector. De exemplu, dacă folosim un paragraf ca selector, putem include proprietăți pentru a defini selectorul respectiv. Proprietățile includ elemente cum ar fi marginile, fonturile și fundalul. Foile de stil conțin numeroase proprietăți care pot fi utilizate pentru definirea uni selector.

Valoare Valorile definesc proprietăți. Să presupunem ca selectorul este un titlu de nivel 1, H1, și am inclus o familie de fonturi type-family ca proprietate. Fontul propriu zis pe care îl definim este valoarea proprietății.

Declarație Proprietățile și valorile se combină pentru a alcătui o declarație.

Regulă Un selector și o declarație alcătuiesc o regulă.

Fig. 3 Sintaxa foilor de stil.

Considerăm selectorii drept subiecte, proprietățile drept predicate, iar valorile ca adjective sau adverbe.

Termenul cascadă este utilizat deoarece într-o pagină HTML pot fi utilizate mai multe stiluri. Un browser cu suport pentru foi de stil va respecta o ordine – o „cascadă”- de interpretare a informației de stil.

Aceasta înseamnă că putem folosi toate cele trei tipuri de foi de stil și browserul va interpreta stilurile inline, încapsulate și legate în această ordine. Chiar dacă există stiluri principale aplicate întregului site, putem controla aspectul paginilor individuale cu stiluri incapsulate și zonele individuale din cadrul acestor pagini cu stiluri inline.

Un alt aspect al ordonării în cascadă este moștenirea. Moștenirea înseamnă că, în afară de cazul în care se stabilește altfel, un anumit stil va moșteni de alte aspecte ale paginii HTML. De exemplu, dacă stabilim o anumită culoare a textului intr-o etichetă <p>, toate etichetile din interiorul acestui paragraf vor moșteni culoarea respectivă, înafară de cazul în care definim pentru acestea alte caracteristici.

4.3 Stiluri inline

Stilul inline se aplică oricărei etichete logice HTML folosind atributul style, după cum urmeză:

the text in this line will display as 12 point text using the Times font.

</p>

The text in this line will display as 12 point text using the verdana font.

</p>

Putem adăuga stiluri inline oricărei etichetei HTML pentru care are sens operația respectivă. Asemenea etichete sunt paragrafele, titlurile, riglele orizontale, ancorele și celulele de tabel. Fiecare din aceste etichete este un candidat logic pentru stilul inline.

Există două etichete care ne pot ajuta să aplicăm stiluri inline secțiunilor unei pagini. Acestea sunt eticheta <div> (împărțire) și <span> (extindere).

Aceste etichete specifică o porțiune de text bine definite deci tot ce e cuprins între ele va adopta stilul pe care dorim să-l folosim. Singura diferență dintre cele două etichete este că <div> forțează o intrerupere de rând, în timp ce <span> nu face acest lucru. Prin urmare, trebuie să utilizăm <span> pentru a modifica stilul oricărei porțiuni de text mai mici decât un paragraf.

Iată un exemplu de folosire a etichetei <div>:

All of the text within this section is 14 point Garamond.

</ div>

și tegul <span>

<span style “color: #CCCCCC”> this text appears in the color gray, with no line break after the closing span tag </span> and the rast of the text.

În general, stilurile inline sunt utile dar e mai bine să dezvoltăm standarde pentru o intreagă pagină sau site Web și apoi să le aplicăm utilizând foi de stil incapsulate sau legate.

4.4 Stiluri încapsulate

Stilurile încapsulate utilizează eticheta <style>, amplasată sub eticheta <head> și înaintea etichetei <body> într-un document HTML standard:

<html>

<head>

<title> Embedded Style Sheet example I</title>

</head>

<style>

BODY {

background: #FFFFFf;

color: #000000;

}

H1 {

font: 14 pt verdana; color: #CCCCCC;

}

P {

font: 12 pt times;

}

A {

color: #FF0000; text-decoration: none

}

</style>

după cum se poate observa în exemplul anterior, foia de stil începe să fie diferită de HTML standard, dar logica nu e greu de urmat. În acest caz, corpul de bază al paginii folosește o culoare de fundal, o culoare de text și spațierea marginilor de sus, de stânga și de dreapta în inci.

Observăm modul în care titlul de nivel 1, H1, apelează un font utilizând numele acestuia și o dimensiune în puncte. Aceasta este un prim exemplu privind puterea CSS – nu numai că putem alege dimensiunea în puncte, dar putem folosi și pixeli (px), procente (%), și centimetri (cm).

Un alt aspect interesant al acestei foi de stil se referă la diferența dintre fonturile difenite pentru titlu și pentru paragraf – diferența de culoare, indentare și tip de caracter. Odată cu apariția foilor de stil, zilele folosirii paginilor HTML cu etichete de fonturi și spații fără intrerupere sunt numărate. Stilurile sunt gestionate într-o manieră accesibilă, concisă.

Eticheta ancoră, A, din foia de stil reprezintă un alt element de sintaxă foarte util. Șirul text – decoration: none forțează eliminarea liniilor de subliniere de sublegături, prin urmare rezultatele obținute sunt clare și atractive.

4.5 Foi de stil legate

Foile de stil legate, sunt externe, extind conceptul de stil încapsulat. Utilizând același cod ca în cazul unei foi de stil încapsulate, pur și simplu inserăm această informație într-un document separat. Acest document este apoi salvat cu extensia de fișier .extind conceptul de stil încapsulat. Utilizând același cod ca în cazul unei foi de stil încapsulate, pur și simplu inserăm această informație într-un document separat. Acest document este apoi salvat cu extensia de fișier .css. în continuare legăm această pagină la toate celelalte pagini care dorim să le adopte stilul respectiv.

Iată sintaxa pentru o foiae de stil încapsulată:

<style>

BODY {

background: #FFFFFF;

color: #000000;

}

H1 {

font–family: helvetica, arial ;

font-size: 24 pt;

color: #0000FF;

}

P {

font-family: garamond, times;

font-size: 14 pt;

}

</style>

Acum, salvăm acest document ca un fișier unic. Îl denumim style1.css și îl amplasăm îtr-un director de foi de stil cu numele style.

În continuare legăm la acest document oricâte pagini HTML dorim, inserând următoarea secvență după </title> și înainte de </head>:

Orice pagină care conține această legătură va adopta stilurile precizate în fișierul style-1.css.

În acest moment, este important să ne amintim conceptul de funcționare în cascadă. Dacă dorim ca o singură foaie de stil să efectueze zece pagini HTML, acest lucru este posibil. Apoi, dacă dorim să facem unele ajustări minore în pagini individuale, putem fie să încapsulăm niște informații de stil în paginile respective, fie să utilizăm un stil inline.

Dacă avem în vedere lungele secțiuni de text dintr-o piesă cum este Regele Lear, e ușor de constat că foile de stil pot fi extrem de utile pentru a aplica același aspect mai multor pagini. Apoi, prin utilizarea stilului încapsulat sau inline paginile individuale pot fi modificate după dorință.

4.6 Proprietăți și valori

Foile de stil au multe proprietăți, mult mai multe decât pot fi prezentate într-un singur capitol.

Dar pentru a putea lucra cu acestea vom arăta câteva proprietăți și valori referitoare la foile de stil. Tipografia și tehnoredactarea sunt domeniile cele mai apropiate și cele mai relevante pentru utilizarea CSS. În secțiunele următoare voi prezenta metodele foilor de stil pentru lucru cu fonturile, precum și unele tehnici de tehnoredactare.

4.7 Fonturi

Una dintre cele mai atractive aspecte ale foilor de stil este capacitatea lor de a aplica mai multe fonturi pe o pagină dată fără a fi necesară utilizarea a numeroasei etichete <font>. Foile de stil ne permit, să alegem o diversitate de fonturi și să le aplicăm ușor secțiunii specifice ale unei pagini, cum ar fi un număr de antet, un paragraf, o extindere sau o diviziune. În locul etichetei HTML standard <font>, vom utiliza atributul foii de stil font-family. Pe lângă familia de fonturi, putem adăuga o gamă largă de atribute, sau să utilizăm clasele și gruparea pentru a exersa facilitățile fonturilor cu ajutorul foilor de stil.

Posibilitățile reale de utilizare a fonturilor în foile de stil sunt similare cu problemele întâlnite la utilizarea etichetei <font> și atributelor sale. Fontul specific trebuie să fie instalat de la început pe calculatorul pe care sunt vizualizate paginile. Ca și în cazul etichetei <font>, foile de stil ne permit să acumulăm un număr nelimitat de fonturi pentru a maximiza șansele ca browserul să aleagă fontul potrivit pentru utilizator. Dacă utilizatorul nu are fontul Century Schoolbook, atunci probabil că are Garamond și așa mai departe. Și cu toate că între aceste fonturi există diferențe semnificative, familiile de fonturi au suficient de multe elemente comune pentru a fi adecvate în designul foii de stil.

4.8 Familii de fonturi pentru foile de stil

Foile de stil recunosc cinci familii de fonturi care sunt cuprinse într-unul din grupurile tipografice principale:

Serif Fonturile serif conțin litere care încep și se termină cu mici liniuțe. Se spune că aceste terminații măresc lizibilitatea și, prin urmare, fonturile serif sunt deseori utilizate pentru textul de bază. Ca exemple de fonturi serif se pot menționa Times Garamond și Century Schoolbook.

SansSerif Fonturile sans-serif au tendința de a fi rotunjite și nu prezintă terminații. Dintre fonturile sans-serif uzuale fac parte Optima, Future și Arial.

Script Un font script este similar scrierii cursive sau de mână un font script popular este Park Avenue.

Monospațial Aceste fonturi arată ca și cum ar fi fost bătute la mașina de scris. Se numesc fonturi monospațiate deoarece toate literele unui font au aceeași lățime. Acesta înseamnă că un w, care în majoritatea fonturilor este mai lat decât i, ocupă de fapt același spațiu într-un font monospațiat. Courier este cal mai comun font monospațiat atât de PC, cât și pe Macintosh.

Decorativ Numite de majoritatea tipografiilor și fonturi fanteziste, fonturile decorative sunt mai potrivite pentru titluri și text artistic decât pentru text de rând. Fonturile decorative includ Party și Whimsy.

Putem aplica o serie de nume de fonturi oricărei etichetei HTML utilizând metodele inline încapsulată și legată ale foilor de stil.

Iată un exemplu de stil inline:

We’re having a party!

</p>

Aici noi am specificat numele familliei de fonturi corespunzătoare. Dacă browserul nu poate găsi primele două fonturi instalate pe calculatorul utilizatorului, va utiliza primul font fantezist pe care îl găsește.

4.9 Defenirea proprietăților și valorilor fonturilor

Există o gamă de proprietăți pe care le putem aplica fonturilor cu ajutorul foilor de stil, precum și o serie de valori ce pot fi aplicate acestor proprietăți.

Ca și în cazul fonturilor HTML stsndard, există proprietăți pentru controlul demensiunii și al culorii. Spre deosebire de fonturile HTML, putem controla de asemena grosimea și stilul unui font, precum și înalțimea rândurilor, sau spațierea verticală, care reprezintă distanța între rândurile unui text scris cu un font stabilit. Mai mult metodele disponibile pentru a controla demensiunea fonturilor depășesc cu mult orice facilități oferite de HTML standard.

Culori Foile de stil se bazează pe tehnicele de redare a culorilor ale browserelor standard. Cu alte cuvinte, pentru a obține rezultate optime vom utiliza culori hexazecimale (și preferabil independente de browser). Putem adăuga culori ca toate proprietățile de stil, oricărei etichetei HTML inline într-o foaie de stil încapsulată sau legată. Acest exemplu inline aplică un font și o culoare unui paragraf:

“We are an intelligent species and the use of our intelligence quite properly give as a pleasure. In this respect the brain is like a muscle. When it is in use we feel very good. Understanding is joyous.”

Carl Sagan, 1979

</p>

Acest paragraf va fi afișat cu gri la vizualizarea cu un browser care suportă foi de stil.

Iată un exemplu de utilizare a culorii cu o foie de stil încapsulată sau legată:

<style>

BODY {

background: #000000;

}

H1 {

font-family: helvetica, arial, sans-serif; color: #CCCCCC;

}

P {

font-family: garamond, times, serif;

color: #FFFFFF;

}

</style>

În acest exmplu, textul de bază este afișat cu alb pe font negru. Titlul H1 este gri iar texul paragrafului este alb.

Grosime Diversele fonturi, cum ar fi Arial prezintă variații ale grosimii cum ar fi negru (un font foarte gros), bold, light (subțire) și așa mai departe. Iată un exemplu de aplicare inline a grosimii:

“We are an intelligent species and the use of our intelligence quite properly give as a pleasure. In this respect the brain is like a muscle. When it is in use we feel very good. Understanding is joyous.”

Carl Sagan, 1979

</p>

De asemenea, putem aplica o grosime într-o foaie de stil încapsulată sau legat

<style>

BODY {

background: #000000;

color: #FFFFFF;

}

H1 {

font-family: helvetica, arial, sans-serif;

font-weight: bold;

color: #CCCCCC;

}

P {

font-family: garamond, times, serif;

}

</style>

Stiluri În acest context, stiurile se referă la înclinarea unui anumit font. Există două stiluri, italic (cursiv) și oblic. Similar grosimilor, stilul oblic este o opțiune rar întâlnită și trebuie utilizată cu precauție. În schimb, stilul italic este disponibil pentru aproape orice font, deci îl putem folosi cu încredere.

Stilul inline va avea următorul aspect:

“We are an intelligent species and the use of our intelligence quite properly give as a pleasure. In this respect the brain is like a muscle. When it is in use we feel very good. Understanding is joyous.”

Carl Sagan, 1979

</p>

Dimensiuni Dimensiunea fontului în foile de stil poate fi definită utilizând puncte, pixeli, inci, centimetri, milimetri și unități pica. Pentru designerii Web, punctele sau pixelii reprezintă opțiunea cea mai naturală, deși aceasta depinde de preferințele fiecăruia. Iată un exemplu de stabilire a dimensiunii fontului în puncte cu ajutorul unui stil inline:

<p style=”font-family: century schoolbook, times, serif; font-size: 24 pt;

font-style: italic;”>

“We are an intelligent species and the use of our intelligence quite properly give as a pleasure. In this respect the brain is like a muscle. When it is in use we feel very good. Understanding is joyous.”

Carl Sagan, 1979

</p>

Și iată un exemplu de stil încapsulat sau legat:

<style>

BODY {

background: #000000;

color: #FFFFFF;

}

H1 {

font-family: helvetica, arial, sans-serif;

font-size: 14 pt;

font-weight: bold;

color: #CCCCCC;

}

P {

font-family: century schoolbook, times, serif;

font-size: 12 pt;

font-style: italic;

}

</style>

4.10 Alte elemente privind fonturile

Text-decoration Această opțiune este utilă pentru a dezactiva sublinierea legăturilor –pur și simplu setăm text-decorătion pe none. Sunt acceptate și stilurile subliniat (underlined), italic și tăiat (strikethrough).

Line-height (înalțimea rândului) numită și spațiere verticală (leading), această opțiune stabilește înalțimea fiecărui rând de text – în esența, această valoare reprezintă spațiul dintre rânduri.

Background (fundal) Această opțiune amplasează o culoare sau o imagine în spatele textului, folosind o valoare color sau o adresă URL, unde adresa indică imaginea de fundal. Această valoare poate fi atribuită nu numai etichetei <body>, dar și oricărei etichete sau porțiuni de text pentru a scoate în evidență o zonă dintr-o pagină.

4.11 Formatarea paginilor

Foile de stil promit pentru viitor un control foarte riguros al formatării paginior. Cu toate aceste până când tehnologia browserilor va suporta toate proprietățile și valorile existente și viitoare ale foilor de stil, iar publicul va utiliza în mod obișnuit acestea browsere, folosirea foilor de stil pentru formatarea paginilor va fi limitată.

Rolul furnizării acestor informații este de a demonstra evoluția HTML pentru design și control. Foile de stil oferă acest control, iar când utiizarea lor va deveni realistă, vom avea la îndămână toate cunoștințele necesare.

Foile de stil pot fi utile pentru formatare prin furnizarea unei diversități de opțiuni de aliniere și de control al marginilor. Alinierea textelor poate fi controlată cel mai simplu cu proprietatea text-align.

Vallorile acesteia pot fi left, right, center sau justify.

Următoarea foiae de stil ilustrează linierea textului și modul în care aceasta afectează fiecare paragraf.

“And don’t tell me God works in mysterious way”, Yossarian continued.

“There ‘s nothing mysterious about it. He’s not working at all. He’s playing. ”

</p>

Or else He’s forgotten all about us. That‘s the kind of God you people talk about, a country bumpkin, a clumsy, bungling, brainless, conceited, ancouth hayseed.

</p>

Good God, how much reverence can you have for a Supreme Being who finds it necessary to include such phenomena as phlegm and tooth decay in His divine system of Creation?

</p>

“What in the world was running through that warped, evil, scatological mind of His when He robbed old people of the power to control their bowel movements? Why in the world did He ever create pain?” – Joseph Heller, from Catch 22.

</p>

Controlul marginilor utilizează proprietăți al căror rol este evident: margin-top (marginea superioară), margin-bottom (marginea inferioară), margin-left (marginea de stânga), margin-right (marginea de dreapta). Acestea proprietăți pot fi aplicate, ca toate proprietățile CSS, oricărui selector logic. De obicei, pentru controlul marginilor vor fi folosiți selectorii BODY și P (paragraf).

Ca și în cazul dimensiunii fonturilor putem utiliza o serie de unități de măsură pentru controlul marginilor. Pixeli, puncte, centimetri, inci și procente reprezintă tipuri de vaori logice și legale.

Iată un exemplu de foie de stil care utilizează controale pentru margini:

<style>

BODY {

background: #000000;

color: #FFFFFF;

margin-top: 100px;

margin-left: 100px;

}

P {

font-family: century schoolbook, times, serif;

font-size: 12 pt;

}

</style>

Una dintre cele mai puternice facilități ale CSS este capacitatea de a poziționa în mod absolut elementele unei pagini Web. Nu numai că textul și imaginile pot fi amplasate cu precizie față de marginile din stânga și de sus ale ferestrei browseru-lui Web, dar aceste elemente pot fi de asemenea amplasate unul deasupra celuilalt.

Iată codul HTML și CSS care stau la baza fenomenului:

<HTML>

<HEAD>

</HEAD>

</div>

</div>

</BODY>

</HTML>

Observăm că prin simpla amplasare a pătratului după dreptunghi, pătratu va fi afișat în fața dreptunghiului pe pagina Web.

4.12 Clase și grupare

Alte două aspecte interesante ale foilor de stil includ clasele și gruparea. Clasele se referă la modalități de a împărți regulele de stil în secțiuni foarte precise. Ori de câte ori dorim ca un text dintr-o pagină să arate altfel decât celelalte putem crea o etichetă HTML personalizată. Fiecare tip de text cu formatare specială pe care îl definim se numește clasă de stil.

De exemplu, să presupunem că dorim ca documentul să conțină două tipuri diferite de titluri H1. Putem crea o clasă de stil pentru fiecare dintre acestea prin inserarea următorului cod în foia de stil:

<style>

H1.serif {

Font: 24 pt Century Schoolbook

}

H1.sans {

Font: 18 pt Arial

}

</style>

Pentru a selecta una din cele două clase de stil într-o pagină HTML, vom folosi atributul class, după cum urmeză:

<h1 class=”serif”>Wisdom</h1>

“Do not fear your enemies. The worst they can do is kill you. ”

<h2 class=”sans”>More Wisdom</h2>

“young love is a flame: very pretty, often very hot and fierce, but still only light and flickering.”

Cuvântul „Wisdom” este afișat cu fontul Bercell de 24puncte de browserele ce nu suportă foie de stil (dacă pe calculator este instalat fontul respectiv), iar cuvintele „More Wisdom” sunt afișate cu Arial de 18 puncte. Vom observa că textul intermediar este afișat în mod implicit cu Times, deoarece nu s-a stabilit nici o regulă de afișare a acestuia. Prin urmare, browserul selectează propriul font implicit.

Gruparea reprezintă prezentarea într-o formă considerată a proprietăților și valorilor stilurilor ceea ce determină obținerea unor reguli mai stricte. Să considerăm următorul exemplu de clasă:

P.1 {

Font: arial;

Font-size: 12pt;

Line-height: 14 pt

}

Aaceasta înseamnă că toate paragrafele cu clasa „1” vor fi afișate cu fontul Arial de 12 puncte, cu o înalțime a rândului de 14 puncte. Dacă aș aplica gruparea acestei clase, rezultatele ar fi următoarele:

P.1 { font: 12 pt/14pt arial}

Design-ul ar fi același în ambele cazuri. Observăm totuși că am introdus întâi dimensiunea fontului, înalțimea rândului după primul slash și apoi numele fontului. Gruparea necesită o ordine sintactică specifică pentru a funcționa corespunzător.

5. CREAREA PAGINILOR HTML DINAMICE

5.1 Efecte DHTML

După cum sugerează și numele său, Dynamic HTML (DHTML) înbunătățește HTML-ul prin faptul că atribuie elementelor unei pagini Web, cum ar fi textele și imaginele, un caracter dynamic și interactiv. Aspectul cel mai pozitiv este că paginile Web DHTML se încarcă extrem de rapid.

Mai mult decât orice altceva, DHTML este un termen de marketing. Nu este nimic în neregulă cu termenii de marketing, dar pentru a înțelege DHTML, este important să cunoaștem componentele sale.

Efectele DHTML sunt realizate utilizând trei tehnologii: HTML, CSS și Scripting. Deși fiecare din aceste tehnollogii datează de câtva timp, acum sunt utilizate împreună și oferă designerilor posibilitatea de crea pagini Web cu un aspect și o interactivitate net superioare.

HTML – este limbajul de marcare utilizat pentru a crea pagini Web. HTML reprezintă elementul esențiel pentru efectele DHTML.

Cascading Style Sheets – reprezintă un standard care include posibilitatea de a poziționa precis elementele grafice pe o pagină Web. Asemenea elemente trebuie departajate de restul paginii Web utilizând etechetile <span> sau <div>. Următorul pasaj indică faptul că imaginea numită bug.gif trebuie poziționată la 200 de pixeli față de marginea din stânga și la 50 de pixeli față de marginea de sus a unei pagini Web:

</div>

Scripting Cu CSS, fiecare element de pe o pagină Web nu numai că poate fi poziționat exact, dar asupra sa pot fi aplicate unele acțiuni și proprietăți speciale. Aceste proprietăți sunt controlate prin scripting. Scripting-ul oferă elementelor dintr-o pagină Web un caracter dinamic – butoane care sunt apăsate, texte care dispar și imagini care se deplasează dintr-o parte în alta a ecranului.

Efectele DHTML pot fi obținute cu două limbaje de scripting: VBScripting și JavaScript. VBScript vine de la Visual Basic Scripting și este o versiune simplificată a limbajului de programare Microsoft Visual Basic. JavaScript este versiunea de scripting a limbajului de programare Java de la Sun Microsystems.

Deși pentru a crea DHTML poate fi folosit orce limbaj de scripting, Java Script este cel mai versatil deoarece în prezent este suportat atât de browserul de la Netscape cât și de cel de la Microsoft. De asemenea, sintaxa Java Script este similară cu cea a limbajelor Java și C++, limbaje familiare multor creatori de pagini Web.

Crearea de scripturi este o sarcină mai solicitantă decât scrierea de cod HTML. Pe de altă parte, scripting-ul nu este la fel de complex ca un limbaj de programare propriu-zis deoarece nu necesită compilarea codului.

5.2 DHTML și Internet Explorer 4

DHTML se bazează pe HTML, CSS și Scripting, dar ceea ce putem face într-adevăr cu DHTML depinde de componentele incluse într-un browser Web. De exemplu, Internet Explorer 4 conține filtre vizuale și de tranziție încorporate. Designerii Web pot apela aceste filtre într-un script printr-o simplă referire la numele sau numărul lor.

Deoarece DHTML este implementat diferit în Internet Explorere și în Netscape, este important să determinăm browserul și versiunea cu care vom lucra înainte de a scrie cod DHTML.

5.3 Navigare interactivă

Timp de mulți ani, designerii Web s-au confruntat cu multe probleme la crearea unor efecte interactive simple. Butoane care își schimbă culoarea sau meniuri care apar dintr-o margine a paginii trebuiau create cu aplicații Java complexe. DHTML rezolvă aceste probleme prin pasaje compacte de cod care se pot încărca rapid.

5.4 Butoane interactive

Un buton care își schimbă aspectul în funcție de acțiunea utilizatorului este unul dintre cele mai populare efecte interactive pe Web. DHTML este de mare ajutor în crearea acestor efecte simple.

Crearea unui buton de meniu interactiv.

Pentru a amplasa un buton pe o pagină Web și al face interactiv cu DHTML, trebuie să scriem ceva cod. Această pagină începe ca și alte documente HTML:

<HTML>

<HEAD>

<TITLE> mouseover Effects </TITLE>

În continuare este specificat limbajul de scripting.

Iată care este trucul. Următoarea secvență de text este <script-ul> care este amplasat într-o etichetă. Script-ul definește funcțiile care sunt stocate până la execuție de evenimente de pe pagină. Script-ul precizează că la deplasarea mouse-ului peste imagine, browserul va afișa starea activă a butonului. Când mouse-ul părăsește imaginea, browserul va utiliza starea inactivă a butonului.

<!-

// mouse on images

if (document.images) {

imglon = new Image();

imglon.src = „ graphcs/button-on.gif”;

// mouse off images

imgloff = new Image();

imgloff.src= „graphics/button-off.gif”;

}

function imgOn (imgName) {

if (document.images) {

document [imgName].src= eval (imgName+”on.src”);

}

function imgOff (imgName) {

if (document.images) {

document [imgName].src= eval(imgName + „off.src”);

}

// ->

în acest moment, etichetele <script> și <head> sunt închise iar eticheta <body> este deschisă.

Eticheta <bgcolor> este utilizată pentru a specifica un fundal alb pentru pagina Web.

</script>

</head>

În acest moment putem amplasa o imagine pe pagină, să realizăm legături de la aceasta către alte pagini/imagini și să includem referințe la un eveniment – în acest caz,un efect de deplasare a mouse-ului peste imagine. Cu excepția referințelor la script-uri, crearea acestui cod nu este foarte diferită de crearea unei imagini cu legături folosind HTML obișnuit.

<A HREF = “#”

onMouseOver = “imgon(‘imgl’)”

onMouseOut =”imgOff(‘imgl’)”>

Acum, tot ce avem de făcut este să închidem etichetele <body> și <html>.

</body>

</html>

Meniuri derulante.

Meniurile Drop-down sunt grozave fiindcă rămân ascunse atunci când nu sunt utilizate – ceea ce economisește mult spațiu pe paginile Web aglomerate.

5.5 Crearea unui meniu Drop-down

Începem cu etichetele HTML de bază și specificăm limbajul de scripting.

<html>

<head>

Acum adăugăm o secvență de cod JavaScript pentru ca meniul să fie vizibil sau ascuns în funcție de poziția cursorului. Închidem de asemenea toate etichetile necesare și stabilim pentru fundalul paginii Web culoarea albă.

/* Show an object */

function showObject(object) {

object.visibility = VISIBLE;

}

/*Hide an object */

function hideObject(object) {

object.visibility = HIDDEN;

}

</SCRIPT>

</head>

Acest exemplu este foarte asemănător cu script-ul pentru deplasarea mouse-ului din exemplul precedent. În acel exemplu, obiectul afișat sau ascuns era o imagine. În exemplul de față, obietul se numește nivel definit de eticheta <div>. Un nivel poate conține orice elemente HTML obișnuite, cum ar fi texte sau imagini. După cum putem vedea, eticheta <div> are un atribut de identificare: unul se numește menuUp, iar celălalt menuDown. Identificatorul transformă orice apare în interiorul etichetei <div> într-un obiect.

<div id=”menuUp” style=”position:absoute; left:0px; top:0px;

width:400px; height:100px; z-index:1; visibility: visible”>

</div>

<div id=”menuDown” style=”position:absolute; left:0px; top:0px;

width:400px; height:100px; z-index:1; visibility: hidden ”>

</div>

Acum vom defini variabilele pentru vizibilitatea celor două nivele:

var HIDDEN = ‘hidden’ ;

var VISIBLE = ‘hidden’ ;

var menuUp = document.all.menuUp.style;

var menuDown = document.all.menuDown.style ;

</SCRIPT>

Tot ce mai avem de făcut acum este să închedem etichetele <body> și <html>.

</body>

</html>

5.6 Filtre

Există două tipuri de filtre în DHTML: vizuale și de tranziție. Ambele produc efecte deosebite, dar filtrele vizuale sunt probabil cele mai utile. Filtrele vizuale reprezintă elemente ca umbre și efecte de strălucire care pot fi aplicate textelor și imaginilor. Filtrele de tranziție creează efecte de dispariție și de estompare cum sunt cele utilizate în filme între diversele scene.

5.7 Filtre vizuale

În Internet Explorer 5.5, avem posibilitatea de a atașa imaginilor incluse în documentele HTML diverse efecte și filtre vizuale pe care până acum puteau fi realizate fie static, folosind un editor de grafică raster (de exemplu Adobe Photoshop ori GIMP – THE GNU Image Manipulation Program), fie dinamic, prin intermediul unor applet-uri Java sau script-uri JavaScript.

Într-o formă limitată, aceste filtre existau și în Internet Explorer 4.0, dar pentru versiunele IE 5.5 și ulterioare ele au fost îmbogățite și optimizate. Filtrele pot fi utilizate prin intermediul unei proprietăți Cascading Style Sheets (CSS) – nuvelul 2 denumite filter, a cărei valoare va fi un șir de caractere desemnând apelul unei funcții de fitrare grafică. Sintaxa generală este următoare:

<element

style =”filter:progid:DXImageTransform.Microsoft.

nume_filtru(ptoprietati)”>

Fiind introduse prin proprietăți CSS, filtrele vor putea fi atașate unui grup de elemente, folosind mecanismul foilor de stiluri, dar ele nu vor putea fi utilizate pentru palete cu mai puțin de 256 de culori și pentru tagu-rile <embed>, <applet>, <object>, <option>, <select>, sau pentru elementele de tabel (cum sunt <table> ori <tr>). De asemenea, filtrele vor fi ignorate dacă apar specificate pentru elemente poziționate aflate în cadrul unor elemente nepoziționate. Astfel, vom specifica inutil o proprietate filter pentru tag-ul <span > în cadrul unei construcții de genul:

<div>

…

…

</span>

…

</div>

Așadar, filtrele vor putea fi aplicate numai elementelor posedând o formă de afișare – un layout de afișare creat, de exmplu, prin specificarea atributelor de înalțime (height) și de lățime (width) ori având poziționare absolută în cadrul ferestrei navigatorului.

Iată starea gradului de opacitate pentru o imagine, folosind filtrul Alpha (efectul Opacizare):

<h5>Imaginea originala</h5>

<img src=”the-wall.jpg”

style=”filter:progid:DXImageTransform.Microsoft

.Alpha(opacity=20)”/>

<h5>Imaginea opaca</h5>

</div>

Putem să încercăm acest exemplu, înlocuind filtrul Alpha cu Blur care determină încețoșarea parțială a imaginii:

<img src=”the-wall.jpg”

style=”filter:progid:DXImageTransform.Microsoft.Blur(strength=10)” />

Pentru a transforma („a desatura”) o imagine color într-una pe tonuri de gri vom putea folosi filtrul BasicImage cu parametrul grayscale=1. acest filtru este responsabil și pentru realizarea de negativ asupra unei fotografii, după cum se poate observa din exemplul următor:

<img src=”the-wall.jpg”

style=”filter:progid:DXImageTransform.Microsoft.

BasicImage(invert=1)” />

Încercăm de asemenea, să aplicăm BasicImage cu parametrul xray=1. Proprietatea opacity a filtrului Alpha poate fi utilă pentru suprapunerea mai multor tag-uri HTML având diverse grade de vizibilitate, după cum se poate remarca și din următorul exemplu (efectul Transparență):

<!- Coperta albumului ->

<img src=”the-wall.jpg”

style=”position:absolute: top:10;

left:25”

width=”400” height=”400” />

<!- Se suprapune numele formatiei, titlul si anul albumului ->

<div style=”position:absolute; top:350;

left:25;

width:400; height:350;

background-color: black;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50)”>

</div>

<div style=”color:white; position:absolute;

top:350; width:400; height:80;

margin-top:5; margin-left:5;”>

<p style=”font-size:14pt; font-weight:bold;

text-align:center”>

</p>

</div>

Pentru efectuarea de prelucrări precum rotiri sau afișări în oglindă putem utiliza filtrul BasicImage împreună cu proprietățile rotation și mirror, respectiv. Iată un exemplu de folosire pentru un text și pentru o figură (filtrul Rotire):

<div style=”height:100; width:100; font-size:40pt;

font-family: sans-serif; filter:

progid:DXImageTransform.Microsoft.BasicImage(rotation=3)”>

Rotind textul …

</div>

<img src=”the-wall.jpg” align=”right”

style=”filter:

progid:DXImageTransform.Microsoft.BasicImage(mirror=1)” />

Desigur, mai pot fi folosite filtrele Wave, DropShadow, Glow, Chroma, Light, familiare tuturor utilizatorilor aplicațiilor de prelucrare grafică. Iată un exemplu mai complex, constând din aplicarea mai multor filtre asupra aceleași imagini (filtre Multiple):

<img src=”the-wall.jpg”

style=”filter:progid:DXImageTransform.Microsoft.Wave(strength=74)

progid:DXImageTransform.Microsoft.MotionBlur(speed=10)

progid:DXImageTransform.Microsoft.BasicImage(invert=10)” />

5.8 Aplicarea dinamică

Până acum am văzut diverse filtre aplicate în mod static, precizându-se de la bun început diverși parametri. Pentru a realiza acest lucru în mod dinamic putem face apel la obiectul filtre predefenit de specificația Jscript pentru Internet Explorer 5.5. Pentru fiecare element HTML căruia i-am atașat filtre putem accesa colecția sa de obiecte filters. Iată o exemplificare:

<img id:=”thewall” src=”the-wall.jpg”

style=”filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100)” />

function Opac()

{

thewall.filters.item(“DXImageTransform.Microsoft.Alpha”).opacity-= 10;

}

</script>

<input type=”button” value=”Opacizeaza”

onclick=”javascript:Opac()” />

La apasarea butonului „Opacizează” se va modifica proprietatea opacity pentru imaginea cu identificatorul thewall. În acest exemlu, putem observa că putem folosi filtrele în momentul apariției unor evenimente.

Fiecare obiect filter are o serie de proprietăți și metode comune tuturor filtrelor:

enabled – indică dacă filtrul respectiv este în acțiune;

play() – rulează filtrul respectiv (util pentru filtrele de animație), invocând tranziția;

apply() – aplică un filtru static asupra unui element;

stop() – oprește tranziția curentă.

Iată un alt exemplu:

<div id=”mydiv”

style=”height:100;width:200;font-size:20pt;

filter:progid;DXImageTransform.Microsoft.Blur(strength=10)

progid:DXImageTransform.Microsoft.CheckerBoard(duration=4)”>

</div>

// aplicarea efectului de tranzitie CheckerBoard

mydiv.filters.item(“DXImageTransform.Microsoft.

CheckerBoard”).apply()

// modificarea continutului elementului <div>

mydiv.innerText =”Intr-adevar!!…”

// rularea efectului de tranzitieCheckerBoard mydiv.filters.item

(“DXImageTransform.Microsoft.CheckerBoard”).play()

</script>

Din acest exemplu, putem remarca utilizarea filtrelor și pentru text și folosirea altei categorii de filtre, așa numitele filtre de tranziție sau de animație. Această categorie include CheckerBoard, Blinds, Iris, Barn, Strips, RandomBar și RandomDissolve.

Toate aceste tranziții pot fi utlizate în conjuncție cu filtrele vizuale, static sau dinamic.

Colecțiile de filter pot fi manipulate prin intermediul proprietății filter, astfel putând adăuga noi filtre la cele vechi:

<div id=”odiv”

style=”height:150; width:250;

filter:

progid:DXImageTransform.Microsoft.Wave(strength=100)”>

Formidabili?

</div>

…

…

odiv.style.filter+=

“progid:DXImageTransform.Microsoft.Iris(Iris-style=’STAR’,duration=4)”

…

</script>

Atunci când modificăm colecția de filtre pentru un anumit element, este recomandabil ca înainte de această acțiune să dezactivăm filtrele prin setarea proprietății enabled ca false, iar apoi să le reactivăm.

Împreună cu filtrele, poate fi utilizată și proprietatea CSS zoom care setează modul de afișare a unor elemente HTML. Astfel, putem modifica maniera de afișare a unor grupuri de tag-uri prin:

<img src=”the-wall.jpg”

onMouseOver=”this.style.zoom=’50%’;

this.style.filter=’progid:DXImageTransform.Microsoft.BasicImage(invert=1)’

onMouseOut=”this.style.zoom=’normal’;

this.style.filter=’progid:DXImageTransform.Microsoft.

BasicImage(invert=0)’ “ />

Filtrele mai ales cele de tranziție, pot fi utilizate pentru efectuarea de animații similare tranzițiilor de slide-uri PowerPoint, așa cum se poate remarca în exemplul de mai jos.:

<html>

<head><title>Animatii</title>

var fRunning = 0

function startTrans()

{

if(fRunning = = 0) // daca filtrul nu ruleaza, se va lansa…

{

fRunning = 1;

imgID.filters.item(0).apply();

img.src = “final-cut.jpg”;

img.filters.item(0).play();

}

</script>

fRunning = 0

</script>

</head>

<img id=”imgID” src=”the-wall.jpg”

style=”filter:progid:DXImageTransform.Miicrosoft.Fade(duration=5)”

onclick=”startTrans()” />

<h4>Apasati imaginea pentru a incepe animatia…

</body>

</html>

Atunci când un filtru își încheie activitatea sau când tranziția se termină se va generea evenimentul onFilterChange. Captând acest eveniment putem aplica secvențial mai multe filtre asupra aceluiași tag HTML. Astfel, putem parcurge la diferite momente de timp o serie de filtre iar la cerere sau automat să oprim tranziția prin intermediul metodei stop().

Putem experimenta alte tipuri de tranziții, substituind de exmplu Fade cu Blinds și setând parametrul Duration =3.3.

Aceste tranziții pot fi utilizate nu neaparat în cadrul scripturilor, ci pentru a realiza diverse efecte între încărcarea unei pagini noi în fereastra navigatorului. Pentru aceasta, în antetul documentului HTML putem include într-un element <meta> următoarele:

content=”progid:DXImageTransform.Microsoft.Blinds(Duration=3)” />

content=”progid:DXImageTransform.Microsoft.Barn

(orientation=’horizontal’, motion=’in’)”) />

Prima construcție va realiza aplicarea filtruluui Blinds la încărcarea paginii (la apariția evenimentului Load), iar a doua va cauza rularea filtrului Barn atunci când utilizatorul va părăsi pagina (la evenimentul Unload).

5.9 Filtre vizuale

Microsoft Internet Explorer include o gamă largă de filtre vizuale:

Flip Horizontal (rotire orizontală)

Flip Vertical (rotire verticală)

Gray (gri)

Invert (inversare)

Xray (raze X)

Alpha

Blur (valloare)

Chroma

Drop Shadow

Glow (strălucire)

Masc (mască)

Shadow (umbră)

Wave (undă)

Filtrele vizuale pot fi combinate, astfel încât putem obține o imagine căreia

i-au fost aplicate atât efecte de strălucire cât și de inversare – sau orice altă combinație de efecte.

5.10 Aplicarea filtrului Drop Shadow

Ca în exemplele DHTML precedente, vom începe cu câteva elemente HTML.

<html>

<head>

<title>Drop Shadow</title>

</head>

Acum, trecem direct la încadrarea cellor două imagini între etichete <div> și poziționarea lor cu CSS. Pentru prima imagine, culoarea umbrei este neagră (#000000). Direcția umbrei este stabilită la 135 de grade, rezultatul fiind o umbră produsă de o sursă de lumină aflată în colțul din stânga-sus.

<DIV ID = “shadow” STYLE “width: 500; height: 40; position:absolute;

left:30px; top:30px; filter: shadow (color=#000000, direction=135)”>

</DIV>

</DIV>

În final vom închide etichetele HTML rămase:

</body>

</html>

5.11 Filtre de tranziție

Filtrele de tranziție sunt foarte utile când dorim să prezentăm o serie de imagini consecutive într-o manieră deosebită. Urmează lista completă a filtrelor de tranziție suportate de Internet Explorer 4.0 și numerele lor corespunzătoare. Numerele sunt utilizate în cadrul script-uluipentru a identifica tipul efectului de tranziție.

Box In

Box Out

Circle In

Circle Out

Wipe Up

Wipe Down

Wipe Right

Wipe Left

Vertical Blinds

Horizontal Blinds

Checker Board Across

Cecker Board Down

Random Dissolve

Split Vertical In

Split Vertical Out

Split Horizontal In

Split Horizontal Out

Strips Left Down

Strips Left

Strips Right Down

Strips Right Up

Rabdom Bars Horizontal

Random Bars Vertical

5.12 Aplicarea filtrelor Random Dissolve unei imagini

Începem crearea efectului Random Dissolve prin inserarea elementelor HTML tipice pentru a începe documentul.

<html>

<hesd>

<title>Random Dissolve</title>

</head>

Acum definim obiectele ce alcătuiesc pagina. Textele și imaginile sunt amplasate în interiorul etichetelor <div>. Textul „Click here to see the transition” (Executați clic aici pentru a vedea efectul de tranziție) va iniția efectul de tranziție. În interiorul etichetei <div> numite „swap” sunt două imagini care alcătuiesc efectul de tranziție. Observăm că ambele imagini sunt poziționate în același loc de pe pagină.

<DIV ID=controll STYLE=”POSITION:absolute; TOP:220; LEFT :45;

visibility:visible”>

<br>

<A HREF=”#” onclick=TransPhoto ()>Click Here to see transition.</a>

</DIV>

<DIV ID=”swap” STYLE=”POSITION:absolute; WIDTH:200; HEIGHT:150; TOP:20;

LEFT:20; FILTER:revalTrans(Duration=1.0); visibility:visible”>

<IMG ID=”photol” STYLE=”POSITION:absolute; left:20; top:30

SRC=”graphics/1.jpg”>

<IMG ID=”photo2” STYLE=”Position:absolute; left:20; top: 30”

SRC=”graphics/2.jpg”>

</DIV>

Aici vom insera script-ul care aplică efectul de tranziție. Pentru acest efect, utilizăm VBScript. Script-ul definește toate acțiunile ce vor avea loc asupra obiectelor. Observăm că la sfârșitul acestui script este specificată linia Transition12. Dacă dorim să utilizăm alt tip de tranziție, pur și simplu modificăm acest număr într-unl din numerele filtrelor de tranziție menționate în secțiunea precedentă.

dim transDuration

dim TransDirection

dim bTransInProgress

TransDirection = 0

TransDuration=2.5

Sub Window_onLoad ()

BTransInProgress = False

End Sub

Sub TransPhoto ()

if bTransInProgress then Exit Sub

Call swap.filters.item (0). Apply ()

if TransDirection = 1 then

TransDirection = 2

photo2.Style.Visibility = “ ”

photo1.Style.visibility = “hidden”

else

TransDirection = 1

photo1.Style.Visibility = “ ”

photo2.Style.Visibility = “hidden”

end if

swap.filters.item(0). Transition = 12

swap.filters(0). play(transDuration)

bTransInProgress = True

End Sub

</SCRIPT>

Acum închidem etichetele HTML rămase și efectul va fi complet.

</body>

</html>

Animație.

Animația pentru Web a devenit posibilă de la o vreme prin utilizarea unor tehnologii ca Flash, Shockwave, ActiveX, Java și fișiere GIF animate. Dar fiecare dintre aceste are dezavantajele sale. Flash și Shockwave necesită programe plug-in terțe. Calculatoarele mai vechi pot avea probleme cu ActiveX și Java întrucât acestea utilizează intens procesorul, iar GIF-urile animate sunt limitate deoarece nu sunt interactive și dimensiunile fișierilor pot fi apreciabile. Cu Dynamic HTML, animația poate fi folosită oriunde într-o pagină Web și poate interacționa pe deplin cu toate elementele de pe pagina respectivă. Crearea animațiilor cu Dynamic HTML reprezintă mai mult decât simple script-uri cu acțiuni realizate la deplasarea mause-lui și cel mai bine este să fie lăsată în seama programatorilor experimentați sau a produselor Software terțe.

5.13 Probleme de uilizare

Anumite filtre (de exemplu, Shadow, Compositor, DropShadow, Glow sau Mask) vor funcționa adecvat numai dacă sunt alpicate asupra unor elemente transparente. Textul fără culoare sau imagine de fundal se consideră a fi transparent. Imaginile trebuie să fie în formatul GIF89a având setată o culoare de transparență.

Trebuie să avem în vedere faptul că aplicând repetat filtre sau folosind un număr mare de filtre în cadrul paginilor Web, asupra unor imagini de dimensiuni mari, vom înceteni procesul de afișare a conținutului acelor documente. Este inutil să modificăm o serie de proprietăți ale unui filtru după ce elementul având atașat acel filtru a fost deja afișat de navigator, deoarece schimbările nu vor putea fi observate decât reîncărcând sau reîmprospătând conținutul acelei pagini.

Filtrele de tranziție rulează asincron, deci proiectanții de pagini Web trebuie să urmărească fiecare stare a tranzițiilor din cadrul documentului prin intermediul evenimentului onFilterChange pentru a determina terminarea unei tranziții particulare. Încărcarea imaginilor conținute de o pagină Web se realizează tot în mod asincron, deci starea vizuală finală a acestora nu se va putea reactualiza decât atunci când ele vor fi încărcate complet. Filtrele de tranziție pot urma oricărui filtru static în cadrul șirului de filtre desemnat de proprietatea fiter. Dacă se dorește ca tranziția să fie aplicată global asupra mai multor obiecte, este mai bine ca acestea să fie grupate într-un element de tip <span> sau <div> și filtrele să fie atașate acestuia.

6. DESCRIEREA SITE-LUI WEB PROIECTAT ÎN CADRUL CENTRULUI DE INSTRUIRE A PERSONALULUI PENTRU TRANSPORTURI INTERNAȚIONALE

6.1 Scurtă prezentare a proiectului

Proiectul elaborat prezintă un site Web creat pentru Centrul de Instruire a Personalului pentru Transporturi Internaționale (CIPTI). Site-ul reprezintă o serie de pagini Web interconectate, care sunt cuprinse în același domeniu general. Site-ul conține legături către alte site-uri, ceea ce determină obținerea unor “pânze” de informații.

La elaborarea acestui proiect am folosit tehnologiile Web: HTML, Dynamic HTML, Foi de Stil în Cascadă.

Efectele Dinamic HTML sunt realizate utilizând trei tehnologii: HTML, CSS și Scripting. Creând acest site am făcut combinarea acestor trei tehnologii pentru a obține un site mai performant. Tehnologia Dinamic HTML am implementat-o cu ajutorul limbajului scriptic JavaScript. Acest limbaj scriptic ne-a dat posibilitatea să creăm meniuri și să aplicăm diverse filtre asupra acestor meniuri și altor elemente din cadrul site-ului. Foile de stil conferă paginilor aspectul dorit. În plus, CSS facilitează foarte mult gestionarea site-ului. Un singur document poate controla formatarea textului într-un întreg site Web, modificarea stilului devenind astfel o operație banală. Folosim CSS ca orce tip de element de design, cum ar fi fontul, fundalul, textul, culorile legăturilor, marginile, și amplasarea obiectelor pe pagină.

Deși fiecare din aceste tehnologii datează de câtva timp, totuși acum sunt utilizate împreună și ne oferă posibilitatea de a crea pagini Web cu un aspect și o interactivitate net superioară.

6.2 Funcționarea site-ului

La accesarea site-ului primul apel se face la Home page (pagină de pornire) – primul document din site. Acesta conține legături către toate celelalte documente principale din cadrul prezentării. Pe pagina de pornire se află meniul principal din care putem alege opțiunea dorită. Avem posibilitatea să alegem orice limbă propusă (Română, Rusă, Engleză) și să începem navigarea site-ului.

Meniul principal conține următoarele opțiuni:

Home

Despre noi

Servicii

Informații

Contactați-ne

Alegeți limba

La rândul său fiecare din aceste opțiuni conțin câte un submeniu asupra cărora sunt aplicate diferite filtre de tranzacție. Informațiile cum ar fi siglele și elementele de navigare sunt repetate în cadrul paginii Web deoarece poate fi necesar ca utilizatorul să acceseze asemenea informații din diferite locații ale documentului.

6.3 Descrierea meniurilor și ferestrelor

La accesarea site-ului apare pagina de pornire care este prezentată mai jos:

Fig. 4 Pagina de pornire a site-ului Web.

Din următorul meniu putem accesa orice informație a siteului:

Fig. 5 Meniul principal al site-ului Web.

La selectarea opțiunii “HOME” revenim pe pagina principală. Opțiunea “Despre noi” ne oferă următorul submeniu:

Fig. 6 Submeniul opțiunii „Despre noi”.

La opțiunea “Servicii” vom avea:

Fig. 7 Submeniul opțiunii „Servicii”.

Submeniul opțiunii “Informații” va arăta astfel:

Fig. 8 Submeniul opțiunii „Informații”.

Submeniul pentru alegerea limbei de navigare este:

Fig. 9 Submeniul opțiunii „Alegeți limba”.

Acest meniu este valabil la fel și pentru celelalte trei limbi propuse.

6.4 Funcțiile site-ului

Site-ul are următoarele funcții:

Informarea Agenților Economici Internaționali despre transportatorii din Republica Moldova.

Punerea pe site a informațiilor utile atât Agenților Economici din Republica Moldova, cât și celor din străinătate.

Schimbul de date cu alte Asociații și IRU

Permite informarea clienților cu noile serviciile propuse de Centru

Acordă servicii informaționale transportatorilor din Republica Moldova.

7. ESTIMAREA ECONOMICĂ A PROIECTULUI

7.1 Planificarea rețea pentru elaborarea “Site-ului Web a Centrului de Instruire a Personalului pentru Transporturi Inernaționale”

Proiectele tehnologice contemporane sunt caracterizate de următoarele particularități:

tehnica nouă utilizată este foarte complexă și este construită utilizând ultimele elaborări științifice;

accelerarea vitezei de elaborare a proiectelor;

proiectele referitoare la complexele tehnicii de calcul și softului sunt supuse uzurii morale foarte rapide;

necesitatea proiectării de sistemă la elaborarea softului și sistemelor tehnice.

Toate acestea au dus la necesitatea de creare a noi metode de planificare. Una din aceste metode prezintă modelarea procesului de elaborare, adică prezentarea legăturilor și caracteristicilor lucrărilor în procesul elaborării proiectului. Metodele tradiționale de planificare presupun utilizarea celor mai simple modele de tipul construirea diagramelor de tip consecutive și ciclice.

Dar în asemenea diagrame nu este posibil de a prezenta legăturile dintre niște lucrări, de unde rezultă imposibilitatea de a afla cât de importantă este lucrarea dată pentru executarea scopului final. Pot apărea diferite întârzieri în timp, ce apar pe porțiuni de interconectare a lucrărilor, care sunt complicat de prezentat în diagrame. De obicei, în procesul dirijării se culege informația despre lucrările efectuate și aproape nu se culege și nu se prezintă informația referitor la prognoza finisării lucrărilor viitoare, de aceia este imposibil de a prognoza rezultatele diferitor variante de soluționare la modificările planului inițial de lucru. Este de asemenea complicat de a reflecta și dinamica lucrărilor, de a corecta toată diagrama în legătură cu schimbarea termenilor de efectuare a unei lucrări, ce este necesar de a efectua ca să nu schimbăm termenul de efectuare a întregului complex de lucrări.

Sistemul de planificare și gestiune rețea este o metodă cibernetică creată pentru gestiunea cu ajutorul sistemelor dinamice complexe cu scopul asigurării condiției de optim pentru careva indicatori. Așa indicatori, în dependență de condițiile concrete, pot fi:

timpul minim pentru elaborarea întregului complex de lucrări;

costul minim al elaborării proiectului;

economia maximală a resurselor.

Particularitățile sistemului de planificare și gestiune rețea în general sunt următoarele:

se realizează metoda proiectării de sistem la rezolvarea problemelor de organizare a gestiunii proceselor.

se utilizează modelul informațional-dinamic special (graful-rețea) pentru descrierea matematico-logică a procesului și calculul automat (conforma algoritmului) a parametrilor acestui proces (durata, costul, forțele de muncă, etc.)

se utilizează sisteme de calcul pentru prelucrarea datelor operative pentru calculul indicatorilor și primirea rapoartelor analitice și statistice necesare.

Documentul de bază în sistemul de planificare și gestiune rețea este graful-rețea (modelul rețea), care prezintă modelul informațional-dinamic, în care sunt prezentate legăturile și rezultatele tuturor lucrărilor, necesare pentru atingerea scopului final.

Tab 1

Biblioteca evenimentelor și lucrărilor, în procesul elaborării Sistemului de Administrare rețea.

(continuare) Tab. 1

În figura este prezentată schema reprezentării grafice a grafului-rețea :

Fig. 10 Structura grafului-rețea.

unde: cercul – un eveniment;

săgeata – o lucrare;

tij – durata lucrului ij;

Rlij – rezerva liberă de timp a lucrului ij;

Rdij – rezerva deplină de timp a lucrului ij;

Tdi – timpul devreme de începere a evenimentului i;

Tti – timpul târziu de terminare a evenimentului i;

Ri – rezerva liberă de timp a evenimentului i;

Ni – numărul evenimentului i;

Tdj – timpul devreme de începere a evenimentului j;

Ttj – timpul târziu de terminare a evenimentului j;

Rj – rezerva liberă de timp a evenimentului j;

Nj – numărul evenimentului j.

Parametrii calculați ai grafului rețea sunt prezentați în tabelul 7.2.

Tab. 2

Calculele parametrilor grafului rețea

(continuare) Tab. 2

7.2 Evaluarea economică a proiectului

Din graful rețea vedem că realizarea proiectului durează 58 de zile – adică 11,6 saptamâni (saptamâna cu 5 zile lucrătoare a câte 8 ore lucrătoare). Salariul săptămânal al lucrătorilor este reprezentat în tabela 2

Tab. 3

Salariul săptămânal al lucrătorilor

Salariul săptămânal alcătuiește 975 lei. Pe durata proiectului salariul de bază alcătuiește:

11,6*975 = 11310 lei

Salariul auxiliar (25% din salariul de bază):

11310*25%=2827,5 lei 2828 lei

Defalcări în fondul social (31%):

(11310+2828)*31%=4382,78 lei 4383 lei

Să calculăm cheltuielile de energie electrică. Un calculator personal obișnuit nu are o putere mai mare de 200 W. Toate calculatoarele în sumă vor cheltui 400 W. Pe parcursul proiectului, timp de 58 de zile vor fi consumate:

400 58 8 = 185600 W = 185,6 kW h

La momentul actual un kW h costă 0,67 lei, deci cheltuielile vor fi:

185,6 0,67 = 124,352 125 lei

Necesitățile în materiale, soft și hard sunt prezentate în tabelele 4 și 5

Tab. 4

Costul hardului și softului procurat

Tab. 5

Costul materialelor utilizate

Deoarece procurarea hardului și a softului în domeniul Tehnologiilor Informaționale este considerată ivenstiție de capital, v-om amortiza aceste cheltuieli timp de 2 ani – termen in care totul din acest domeniu se uzează moral:

[S/(A*365)]*Z

unde: S – suma ce trebuie de amortizat;

A – perioada de amortizare în ani;

Z – perioada proiectului în zile.

[16250/(2*365)]*70 = 1558,22 lei

Pentru studierea domeniilor noi a fost procurată literatură în sumă de 365 lei.

Tab. 6

Calculul prețului de livrare a Site-ului Web

8. PROTECȚIA MUNCII

Munca prezintă o activitate a omului, care este orientată pentru a satisface cerințele materiale și spirituale ale societății. În procesul de muncă, omul interacționează cu mijloacele de producție, cu mediul de producție și obiectele muncii. Prin urmare, el este supus acțiunilor a unui număr mare de factori de diferită natură, care se manifestă sub diferite forme și acționează în diferit mod, iar ca drept urmare se înrăutățește starea sănătății omului și scade capacitatea de muncă.

Pentru a evita toate aceste urmări ne dorite sunt necesare unele măsuri pentru securitatea muncii. Securitatea muncii – prezintă starea condițiilor de muncă, unde sunt excluși sau reduși la minim acțiunile factorilor dăunători și periculoși. De studierea și analiza condițiilor de muncă se ocupă știința care se numește PROTECȚIA MUNCII și a MEDIULUI AMBIANT.

Protecția muncii – prezintă un set de acte legislative, social-economice, organizatorice, tehnice, igienice și măsuri medico-profilactice, ce asigură securitatea sănătății păstrează capacitatea de muncă a omului în procesul de muncă. De aceea odată cu dezvoltarea PTȘ cresc și cerințele față de PM. Toate tehnologiile noi ne dau un avantaj în producția de mărfuri însă ele nu reduc din problemele PM, deoarece toți factorii periculoși și dăunători își schimbă natura sa mecanismul acțiunii asupra organismului uman. Trebuie de menționat că odată cu dezvoltarea PTȘ a crescut ponderea factorilor psihofiziologici.

După cum s-a menționat mai sus factorii de producție, după caracterul urmărilor care pot avea lor, se împart în două grupe factori periculoși ăi factori dăunători. Factorii se numesc periculoși, dacă în urma acțiunii asupra omului în anumite condiții pot duce la traume saula înrăutățirea bruscă a stării sănătății omului. Factorii care ducla înrăutățirea stării sănătății omului sau la scăderea capacității de muncă sunt numiți factori dăunători. În dependență de nivelul și durata de acțiune factorii dăunători pot deveni periculoși.

După natura acțiunii asupra organismului uman factorii periculoși și dăunători se împart în patru grupe: fizici, chimici, biologici și psihofiziologici.

Către grupa de factori periculoși și dăunători de origine fizică aparțin următorii factori:

factori ce caracterizează utilajul și tehnologia;

factori ce caracterizează mediul de producție.

În acest mod protecția muncii este un sistem de acte legislative, social-economice, tehnice ce îndestulează condițiile favorabile și sănătoase de muncă.

Funcțiile a operatorului și programatorului sunt caracterizate, de obicei, de inexistența sau existența în cantități mici a diferitor substanțe dăunătoare. În același timp sunt cerute cerințe ridicate pentru posibilitățile psihofiziologice a operatorului la indicii economici a locului de muncă și elementele lui, organele de dirijare.

Condițiile de muncă a programatorului-operator sunt legate cu încordări vizuale, fapt căruia sunt cerute cerințe față de iluminarea de producere, la conținutul ei spectral, și de asemenea la condițiile ergonomice a locului de muncă.

8.1 Analiza condițiilor de muncă

Analiza condițiilor de muncă apreciate în timpul efectuării practicii de diplomă se apreciază în primul rând vizual aplicând noțiunile ”normal” (n) și “periculos” (p). Analiza factorilor ce acționează asupra omului la locul de muncă e prezentată în formă de tabel (caracteristicile condițiilor sanitar-igienice, factorii de producție dăunători și periculoși):

Analiza condițiilor de muncă a fost efectuată pentru biroul de proiectare. În tabel se indică condițiile optimale microclimaterice (STAS 12.1.005.88), care sunt destinate creării condițiilor favorabile de muncă pentru personalul biroului de proiectare. După STAS ele sunt clasificate ca ne periculoase.

În biroul de proiectare se practică iluminarea naturală laterală și iluminarea artificială generală. Iluminarea corespunde normelor (SNiP-II-4-79).

După categoria de pericol de electrocutare, biroul de proiectare se referă la încăperile cu pericol ridicat, fiindcă e posibilă atingerea concomitentă a omului cu unirile la pământ cu corpul aparatajului electric.

În biroul de proiectare persistă zgomotul generat de surse de zgomot de diferite tipuri. Imprimantele creează zgomot metalic, instalațiile de condiționare – aerodinamice, transformatoarele de tensiune magnetică. Datorită măsurilor luate (folosirea barajelor acustice, planificarea rațională a începerii) nivelul de zgomot la locul de muncă nu depășește nivelul admisibil.

Analiza condițiilor de muncă a arătat că în biroul de proiectare sunt toți factorii, necesari pentru izbucnirea incendiului (materiale inflamabile, sursă de aprindere etc.). De aceea în biroul de proiectare sunt prevăzute mijloace primare de stingere a incendiului – extinctoare, sunt instalate semnalizatoare, destinate pentru transmiterea semnalului în cazul izbucnirii incendiului.

În rezultatul analizei condițiilor de muncă la locul de lucru au fost scoase la iveală următorii factori dăunători și periculoși: discomfortul de vedere, posibilitatea izbucnirii incendiului, încălcări psihofiziologice etc.

8.2 Calculul iluminării artificiale

O mare importanța pentru asigurarea capacității înalte de muncă și bunei dispoziții are iluminarea optimală a locului de lucru. Iluminatul poate fi natural și artificial. Alegerea tipului de iluminat trebuie să fie bazată pe cunoașterea avantajelor și a neajunsurilor diferitor sisteme de iluminat. Conform СНиП II-4-79 vom putea efectua proiectarea iluminatului artificial folosim metoda coeficientului de randament:

unde:

F – fluxul de iluminare a unei lămpi, lm;

En – iluminarea minimală normată, lx;

Sp – aria podelei, m2;

Z – coeficientul iluminării ne uniforme;

K – coeficientul de rezervă, ține cont de poluarea și învechirea becurilor;

N – numărul de instalații de iluminat;

n – numărul becurilor la o instalație;

r – coeficientul de randament a instalației de iluminat, se găsește în dependență de indiciul de încăpere.

Conform caracteristicii lucrului vizual ce este de categoria II cu un contrast mediu având caracteristica fonului deschis. Coeficientul iluminării ne uniforme pentru lămpi fluorescente este egal cu 0,9. Indiciul de încăpere se calcula astfel:

unde:

A, B – lungimea și lățimea încăperii, m;

Hl – înălțimea instalației de iluminare până la suprafața de lucru.

Valorile parametrilor folosiți sunt incluse în tabelul următor:

Tab. 7

Calculăm indicele de încăpere:

Conform indicelui de încăpere determinăm coeficientul de randament a instalației de iluminat. Pentru i= 1, randamentul instalației de iluminat r =0,66 pentru lampa fluoriscentă LDC. Cunoscând toți parametrii necesari putem calcula F1:

Fluxul de iluminare a unei lămpi ne permite alegerea lămpii în corespundere cu rezultatele obținute. Vom alege lampa fluoriscentă de tipul LDC40 cu tensiunea de alimentare de 220V și o putere de 40W. Puterea totală a tuturor lămpilor fluoriscente va fi egală cu 640W.

CONCLUZII

Web-ul a fost conceput pentru a oferi utilizatorilor un mod neliniar de navigație. Datorită avantajelor sale față de mijloacele de editare tradiționale, Web-ul a fost adoptat pentru o gamă largă de utilizări. Adevărul rol al Web-ului îl reprezintă afacerile. Webul oferă companiilor noi metode de a conduce afacerile.

Cu ajutorul tehnologiilor Web putem crea site-uri mai dinamice, interactive. CSS permite realizarea unor prezentări Web mai rafinate. Cel mai important este, că aceste efecte vizuale nu ne fac să așteptăm la nesfârșit încărcarea paginilor. Dinamic HTML îmbunătățește HTML-ul prin faptul că atribuie elementelor unei pagini Web, cum ar fi textele și imaginile, un caracter dinamic și interactiv.

Fiecare din aceste tehnologii datează de câtva timp, acum sunt utilizate împreună și ne oferă posibilitatea de a crea pagini Web cu un aspect și interactivitate net superioare.

BIBLIOGRAFIE

Suleiman Lalani, Ramesh Chandak „Active X” Editura ALL București 1997.

Lynn M. Bremner, Anthony F. Iasi, Al Servati „Intranet” Editura ALL București 1997.

Matt Strazniskas „Photoshop 5” Editura ALL București 1999.

„PC WORLD Revista programatorilor” Octombrie 2000.

http://www.infoiasi.ro

http://www.pcreport.ro

ANEXA 1

Listingul programului

Menu.js

function dropit1(object){

object.style.visibility="visible"}

function dropit2(object){

if (document.all){

object.style.left=document.body.scrollLeft+event.clientX-event.offsetX

object.style.top=document.body.scrollTop+event.clientY-event.offsetY+18

object.filters.revealTrans.apply()

object.style.visibility="visible"

object.filters.revealTrans.play()}}

function hidemenu(object){

object.style.visibility="hidden"}

Flag.js

var x,y

var step=20

var flag=0

var message="CIPTI "

message=message.split("")

var xpos=new Array()

for (i=0;i<=message.length-1;i++) {

xpos[i]=-50}

var ypos=new Array()

for (i=0;i<=message.length-1;i++) {

ypos[i]=-50}

function handlerMM(e){

x = (document.layers) ? e.pageX : event.clientX

y = (document.layers) ? e.pageY : event.clientY

flag=1}

function textfollow() {

if (flag==1 && document.all) {

for (i=message.length-1; i>=1; i–) {

xpos[i]=xpos[i-1]+step

ypos[i]=ypos[i-1]}

xpos[0]=x+step

ypos[0]=y

for (i=0; i<message.length-1; i++) {

var thisspan = eval("document.all.span"+(i)+".style")

thisspan.posLeft=xpos[i]

thisspan.posTop=ypos[i]}}

if (flag==1 && document.layers) {

for (i=message.length-1; i>=1; i–) {

xpos[i]=xpos[i-1]+step

ypos[i]=ypos[i-1]}

xpos[0]=x+step

ypos[0]=y

for (i=0; i<message.length-1; i++) {

var thisspan = eval("document.span"+i)

thisspan.left=xpos[i]

thisspan.top=ypos[i]}}

var timer=setTimeout("textfollow()",10)}

Capture.js

for (i=0;i<=message.length-1;i++) {

document.write("<span id='span"+i+"' class='spanstyle'>")

document.write(message[i])

document.write("</span>")}

if (document.layers){

document.captureEvents(Event.MOUSEMOVE);}

document.onmousemove = handlerMM;

a_href.css

<style>

BODY{}

a { color:0000FF;

text-decoration:none;

font-size:12pt;

font-weight:bold;

font-family:Verdana }

a:visited { color:0000FF }

a:hover { color:000000;

text-decoration:underline }

.spanstyle {position:absolute;

visibility:visible;

top:-50px;

font-size:8pt;

font-family:verdana;

color:FF00FF}

</style>

style.css

<style>

#home{position:absolute;

left:215px; top:0px; }

#despre_noi{ filter:revealTrans(Duration=1.5,Transition=12)

visibility:hide background-color:#FFFF00;

width:100;

position:absolute;}

#servicii{ filter:revealTrans(Duration=1.5,Transition=12)

visibility:hide;

background-color:#FFFF00;

width:150;

position:asolute; }

#informatii{ filter:revealTrans(Duration=1.5,Transition=12)

visibility:hide;

background-color:#FFFF00;

width:120;

position:absolute; }

#contactatine{

filter:revealTrans(Duration=1.5,Transition=12)

visibility:hide;

background-color:#FFFF00;

width:120;

position:absolute; }

#alegeti_limba{filter:revealTrans(Duration=1.5,Transition=12)

visibility:hide;

background-color:#FFFF00;

width:150;

position:absolute; }

#despre_noi_1{

position:absolute;

left:240px;

top:0px;}

#servicii_1{position:absolute;

left:360px;

top:0px;}

#informatii_1{position:absolute;

left:440px;

top:0px;}

#contactatine_1{

position:absolute;

left:485px;

top:0px;

width:200;}

#alegeti_limba_1{position:absolute;

left:590px;

top:0px;

width:200;}

</style>

Home_rus.htm

<html>

<head>

<title>Перевозчиков </title>

</MARQUEE></td>

<a href="#"> Услуги| </a>

</span>

Информация| </a> </span> <span id="contactatine_1" onMouseOver="dropit2(contactatine);hidemenu(informatii);hidemenu(alegeti_limba)"> <a href="#"> Контакт|

</a> </span>

<a href="#">Выберите </a> </span>

</td></tr><tr>

</a> </p> </td>

<a href="Istoria_rus.htm" onmouseover="dropit1(despre_noi)">История</a><br>

<a href="Teli_rus.htm" onmouseover="dropit1(servicii)">Цель CIPTI</a><br>

<a href="Programa_rus.htm" onmouseover="dropit1(servicii)">Программы обучения</a><br>

</div>

<a href="Novie_cursi_rus.htm" onmouseover="dropit1(informatii)">Новые курсы</a><br>

<a href="Examen_rus.htm" onmouseover="dropit1(informatii)">Экзаменационная<BR> система</a><br>

</div>

<a href="Adresa_rus.htm" onmouseover="dropit1(contactatine)">Адрес</a><br>

<a href="#" onmouseover="dropit1(contactatine)">Web Адрес</a><br>

</div>

<a href="Home_rom.htm" onmouseover="dropit1(alegeti_limba)">Румынский</a><br>

<a href="Home_eng.htm" onmouseover="dropit1(alegeti_limba)">Английский</a><br>

</div></td></tr><tr>

</tr><tr>

</tr><tr>

</table>

</body>

</html>

Misia_rus.htm

<html>

<head>

</head>

</span><span id="servicii_1" onMouseOver="dropit2(servicii);hidemenu(despre_noi);hidemenu(informatii)">

<a href="#"> Услуги|</a></span>

<a href="#">мация| </a>

</span>

<a href="#"> Контакт| </a>

</span>

</td></tr>

</a></p> </td>

<ul>

<li>

<p style="text-align: justify"><b style="mso-bidi-font-weight:normal"><span lang="RU" style="font-size:11.0pt;mso-bidi-font-size:10.0pt">Миссия

</span><span style="font-size:11.0pt;mso-bidi-font-size:

10.0pt;mso-ansi-language:EN-US">CIPTI </span></b><span lang="RU" style="font-size:11.0pt;mso-bidi-font-size:10.0pt">заключается

в организации и совершенствовании

системы профессиональной подготовки

перевозчиков, способных эффективно

осуществлять автоперевозки в условиях

конкуренции на международном рынке

транспортных услуг.<o:p>

</o:p>

</span></li>

</ul>

<a href="Istoria_rus.htm" onmouseover="dropit1(despre_noi)">История</a><br>

<a href="#" onmouseover="dropit1(despre_noi)">Миссия</a><br>

</div>

<a href="Teli_rus.htm" onmouseover="dropit1(servicii)">Цель CIPTI</a><br>

<a href="Programa_rus.htm" onmouseover="dropit1(servicii)">Программы обучения</a><br>

</div>

<a href="Novie_cursi_rus.htm" onmouseover="dropit1(informatii)">Новые курсы</a><br>

<a href="Examen_rus.htm" onmouseover="dropit1(informatii)">Экзаменационная<BR> система</a><br>

</div>

<a href="Adresa_rus.htm" onmouseover="dropit1(contactatine)">Адрес</a><br>

<a href="#" onmouseover="dropit1(contactatine)">Web Адрес</a><br>

</div>

<a href="Home_rom.htm" onmouseover="dropit1(alegeti_limba)">Румынский</a><br>

<a href="Home_eng.htm" onmouseover="dropit1(alegeti_limba)">Английский</a><br>

</div>

</td>

</tr>

<tr>

</a>

</p>

</td>

</tr>

<tr>

</a>

</p>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</body>

</html>

examen_rus.htm

<html>

<head>

</head>

<B> Центр80; </B> </MARQUEE>

</td>

<a href="#"> Услуги| </a>

</span>

<a href="#"> Контакт| </a>

</span>

</td>

</tr><tr>

<p align="center"><b><span style="mso-bidi-font-size: 10.0pt"><font size="4">Экзаменационная

система. Курс СРС</font></span></b></p>

<tr>

<td width="17%" rowspan="2" align="center">Название

экзамена</td>

<td width="18%" rowspan="2" align="center">Стиль экзамена</td>

<td width="13%" rowspan="2" align="center">Кол-во вопросов</td>

<td width="13%" rowspan="2" align="center">Длительность

экзамена/минутах</td>

<td width="26%" colspan="2" align="center">Кол-во

полученных баллов </td>

</tr>

<tr>

<td width="13%" align="center">Максимальное</td>

<td width="13%" align="center">Минмальное</td>

</tr>

<tr>

<td width="17%" align="center">Общий/базовый модуль</td>

<td width="18%" align="center">Вопрос и варианты

ответов</td>

</tr>

<tr>

<p align="center">Модуль Национальные

грузоперевозки</td>

<td width="18%" align="center">Вопрос и варианты

ответов</td>

</tr>

<tr>

<td width="18%" align="center" bgcolor="#989898"><b>Моделирование

ситуаций</b></td>

</tr>

<tr>

<td width="17%" rowspan="2" align="center">Модуль

Международные грузоперевозки</td>

<td width="18%" align="center">Вопрос и варианты

ответов</td>

</tr>

<td width="17%" rowspan="2" align="center">Модуль

Международные пассажирские перевозки</td>

<td width="18%" align="center">Вопрос и варианты

ответов</td>

</tr>

<tr>

<td width="18%" align="center" bgcolor="#999999"><b>Моделирование

ситуаций</b></td>

</tr>

<tr>

<td width="24%" colspan="2" rowspan="2" align="center">5

экзаменов</td>

<td width="18%" align="center"><b>Вопрос и варианты

ответов</b></td>

</tr>

<tr>

<td width="18%" align="center"><b>Моделирование

ситуаций</b></td>

</tr>

<tr>

</tr>

</table>

<a href="Istoria_rus.htm" onmouseover="dropit1(despre_noi)">История</a><br>

<a href="Misiune_rus.htm" onmouseover="dropit1(despre_noi)">Миссия</a><br>

</div>

<a href="Teli_rus.htm" onmouseover="dropit1(servicii)">Цель CIPTI</a><br>

<a href="Programa_rus.htm" onmouseover="dropit1(servicii)">Программы обучения</a><br>

</div>

<a href="Novie_cursi_rus.htm" onmouseover="dropit1(informatii)">Новые курсы</a><br>

<a href="#" onmouseover="dropit1(informatii)">Экзаменационная<BR> система</a><br>

</div>

<a href="Adresa_rus.htm" onmouseover="dropit1(contactatine)">Адрес</a><br>

<a href="#" onmouseover="dropit1(contactatine)">Web Адрес</a><br>

</div>

<a href="Home_rom.htm" onmouseover="dropit1(alegeti_limba)">Румынский</a><br>

<a href="Home_eng.htm" onmouseover="dropit1(alegeti_limba)">Английский</a><br>

</div>

</p>

<tr>

<td width="25%" rowspan="2" align="center">Название курса</td>

<td width="25%" colspan="3" align="center">Кол-во учебных

часов</td>

<td width="25%" colspan="3" align="center">Продолжительность

экзамена   (в минутах)</td>

<td width="25%" colspan="2" align="center">Кол-во

полученных баллов</td>

</tr>

<tr>

<td width="6%" align="center">Всего</td>

<td width="9%" align="center">В классе</td>

<td width="10%" align="center">Вне-класс</td>

<td width="7%" align="center">Всего</td>

<td width="9%" align="center">Вопросы</td>

<td width="9%" align="center">Моделирование ситуаций</td>

<td width="8%" align="center">Максимальное</td>

<td width="17%" align="center">Минимальное</td>

</tr>

</table>

<b><font size="4">Продолжительность курса

обучения СРС</font></b>

</p>

<tr>

<p align="center"><b>Название модуля</b></td>

<p align="center"><b>Количество часов</b></td>

</tr>

<tr>

<td width="111" align="center"><b>Общее</b></td>

<td width="109" align="center"><b>В классе</b></td>

<td width="117" align="center"><b>Вне-класс.</b></td>

</tr>

<tr>

<td width="303">Общий/базовый</td>

</tr>

<tr>

<td width="303">Национальные грузоперевозки</td>

</tr>

<tr>

<td width="303">Международные грузоперевозки</td>

</tr>

<tr>

<td width="303">Национальные пассажирские

перевозки</td>

</tr>

<tr>

<td width="303">Международные пассажирские

перевозки</td>

</tr>

<tr>

<p align="center">ВСЕГО</td>

</tr>

</table>

</td>

</tr>

</table>

</div>

<tr>

<td width="14%" align="center">Общий/базовый</td>

<p align="center">Национальные Грузоперевозки</td>

<td width="14%" align="center">Международные

грузоперевозки</td>

<td width="14%" align="center">Национальные

пассажирские перевозки</td>

<td width="15%" align="center">Международные

пассажирские перевозки</td>

<td width="15%" align="center">Общее количество часов</td>

</tr>

<tr>

<td width="14%"><b><i>Курс обучения</i></b></td>

</tr>

<tr>

<td width="14%">По грузоперевозкам</td>

</tr>

<tr>

<td width="14%">По пассажирским перевозкам</td>

</tr>

<tr>

<td width="14%">По грузовым и пассажирским

перевозкам</td>

<a href="#"> Услуги| </a>

</span>

<a href="#"> Контакт| </a>

</span>

</td>

</tr><tr>

<p align="center"><b><span style="mso-bidi-font-size: 10.0pt"><font size="4">Экзаменационная

система. Курс СРС</font></span></b></p>

<tr>

<td width="17%" rowspan="2" align="center">Название

экзамена</td>

<td width="18%" rowspan="2" align="center">Стиль экзамена</td>

<td width="13%" rowspan="2" align="center">Кол-во вопросов</td>

<td width="13%" rowspan="2" align="center">Длительность

экзамена/минутах</td>

<td width="26%" colspan="2" align="center">Кол-во

полученных баллов </td>

</tr>

</tr>

</table>

</body>

</html>

ANEXA 2

Schema structurală a site-ului Web

ANEXA 3

Schema funcțională a siteului Web

ANEXA 4

Schema sintaxei foilor de stil.

ANEXA 5

Schema grafului rețea a proiectului elaborat

=== PAGINA_DE_PORNIRE_A_SITE ===

Pagina de pornire a site-ului Web.

=== PRIMA_SCEMA ===

Schema structurală a site-ului Web

Copyright Notice

© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.

Acest articol: Elaborarea Site Ului Web a Centrului de Instruire a Personalului Pentru Transporturi Internationale (ID: 148782)

Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.

Elaborarea Site Ului Web a Centrului de Instruire a Personalului Pentru Transporturi Internationale

Copyright Notice

Aplicatie Multifir Pentru Gestionarea Activitatii Unei Sali DE Fitness

Sistemului Integrat de Comert Electronic B2c – Avon Company

Limbajul Uml

Tehnologia Bluetooth

Aplicatii Informatice din Domeniul Medical

Portal Online Pentru O Agentie Imobiliara

Copyright Notice

Similar Posts