Sunteți pe pagina 1din 149

Cod Materie Clasa Numar de ore Titlul lectiei Descriere succinta

11 Web design 11 6.02 Web design i e-com merce

Obiective educationale

Lista obiectivelor educationale: 1. Editarea paginilor web prin intermediul tag -urilor Realizarea paginilor web cu editoare specializate Dezvoltarea site-urilor personale si pentru companii Indentificarea elementelor specifice domeniului e-commerce Dezvoltarea unui magazin online prin intermediul instrumentelor electronice

2.

3.

4.

5.

Planul lectiei:

Momentul 1: Introducere n realizarea paginilor web cu durata de 22 min Cadrul 1 : Ce este o pagin web? cu durata de 7 min Cadrul 2 : Elementele unui site web cu durata de 10 min Cadrul 3 : Instrumente pentru dezvoltarea paginilor web cu durata de 5 min Momentul 2: Introducere n limbajul HT ML cu durata de 35 min Cadrul 1 : Ce este limbajul HTML? cu durata de 5 min Cadrul 2 : Structura unui fiier HTML cu durata de 5 min Cadrul 3 : Directive (tag-uri) HTML cu durata de 5 min

Cadrul 4 : Atribute cu durata de 5 min Cadrul 5 : Formatarea documentelor HTML. Titluri cu durata de 5 min Cadrul 6 : Formatarea documentelor HTML. Paragrafe cu durata de 5 min Cadrul 7 : Formatarea documentelor HTML. Caractere cu durata de 5 min

Momentul 3: Alte componente n pagini HT ML cu durata de 20 min Cadrul 1 : Liste n pagini web cu durata de 5 min Cadrul 2 : Ancore (link-uri) cu durata de 5 min Cadrul 3 : Inserare imagini cu durata de 5 min Cadrul 4 : Inserare tabele cu durata de 5 min Momentul 4: Componente dinamice n HT ML cu durata de 20 min Cadrul 1 : Utilizare Form n pagini web cu durata de 5 min Cadrul 2 : Directive Input cu durata de 5 min Cadrul 3 : Directiva Select cu durata de 5 min Cadrul 4 : Directiva Textarea cu durata de 5 min Momentul 5: Alte elemente de design n pagini web cu durata de 15 min Cadrul 1 : Afiarea paginilor n ferestre cu durata de 5 min Cadrul 2 : Stiluri n HTML cu durata de 5 min Cadrul 3 : Caractere speciale cu durata de 5 min

Momentul 6: Realizarea de pagini web cu editoare specializate cu durata de 34 min Cadrul 1: Instalare i lansare editor KompoZer cu durata de 5 min Cadrul 2: Interfaa editorului KompoZer cu durata de 5 min Cadrul 3: Utilizare KompoZer cu durata de 6 min Cadrul 4: Inserarea de tabele cu durata de 6 min Cadrul 5: Linkuri i imagini cu durata de 6 min

Cadrul 6: Forme cu durata de 6 min

Momentul 7: Crearea unui site web cu durata de 15 min Cadrul 1: Servicii de gzduire web cu durata de 5 min Cadrul 2: nregistrarea i configurarea unui nume de domeniu cu durata de 5 min Cadrul 3: ncrcarea paginilor web pe site cu durata de 5 min Momentul 8: Dezvoltarea unui site personal/familial cu durata de 15 min Cadrul 1: Utilizarea abloanelor pentru site-uri cu durata de 5 min Cadrul 2: Personalizarea ablonului cu durata de 5 min Cadrul 3: Publicare site cu durata de 5 min Momentul 9: Realizare site pentru o companie cu durata de 15 min Cadrul 1: De ce un site web pentru o companie? cu durata de 5 min Cadrul 2: Pesonalizarea ablonului cu durata de 5 min Cadrul 3: Pregtire pentru publicare site cu durata de 5 min Momentul 10 : E-commerce cu durata de 20 min Cadrul 1: Introducere n e-commerce cu durata de 5 min Cadrul 2: Comparaie comer tradiional, comer electronic cu durata de 5 min Cadrul 3: Crearea unui magazin electronic. Modalit i de plat cu durata de 5 min Cadrul 4: Legislaie comer electronic cu durata de 5 min

Momentul 11 : Dezvoltare magazin online utliznd instrumentele PayPal cu durata de 20 min Cadrul 1 : Utilizarea unui template pentru magazin virtual cu durata de 5 min Cadrul 2 : Integrarea codului HTML pentru Add to cart cu durata de 5 min Cadrul 3 : Vizualizarea coninutului coului virtual cu durata de 5 min Cadrul 4 : Efectuarea plii cu durata de 5 min Momentul 12 : Dezvoltarea unui magazin online cu procesare Romcard cu durata de 10 min Cadrul 1 : Procesare de tranzac ii online n Romnia cu durata de 5 min Cadrul 2 : Crearea modului de plat 3D Secure cu durata de 5 min Momentul 13 : Evaluare cu durata de 60 min Cadrul 1 : Introducere n realizaraea paginilor web cu durata de 5 min Cadrul 2 : Introducere n limbajul HTML cu durata de 5 min

Cadrul 3 : Alte componente n pagini HTML cu durata de 5 min Cadrul 4 : Componente dinamice in HTML cu durata de 5 min Cadrul 5 : Alte elemente de design n pagini web cu durata de 5 min Cadrul 6 : Realizarea de pagini web cu editoare specializate cu durata de 5 min Cadrul 7 : Crearea unui site web cu durata de 5 min Cadrul 8 : Dezvoltarea unui site personal/familial cu durata de 5 min Cadrul 9 : Realizare site pentru o companie cu durata de 5 min Cadrul 10 : E-commerce cu durata de 5 min Cadrul 11 : Dezvoltare magazin on line utiliznd instrumente PayPal cu durata de 5 min Cadrul 12 : Dezvoltarea unui magazin on line cu procesare Romcard cu durata de 5 min

Descrierea drumului de navigare


Momentul 1
Contine Descriere
Indeplineste obiectivele educationale:

Numele momentului: Durata: Descrierea momentului:

Introducere n realizarea paginilor web 22 min Momentul prezint elementele unei pagini web i instrumente pentru realizarea acestora.

Cadrul 1 Nume Submoment Itemi de invatare Texte123 Ce este o pagin web? Descriere detaliata Text 1 : Word Wide Web (www sau w3) este un sistem de nln uire a documentelor hypertext accesate prin Internet. Pentru realizarea paginilor web este utilizat un lim baj de adnotare (m arcare), limbajul HTML. Cu ajutorul unui web browser paginile web ce contin text, im agini, com ponente video sau alte com ponente multimedia pot fi vizualizate i se poate naviga ntre ele utiliznd ancorele sau legturile. Sunt utilizate conceptele vechilor sisteme hypertext, cunoscut ca HTML (HyperText Markup Language), lim baj dezvoltat ini ial de Tim Berners-Lee n 1989, inginer la CERN (European Organization for Nuclear Research), apoi director al World Wide Consortium . Chiar dac termenii Internet i World Wide Web sunt utiliza i aproape zilnic, nu trebuie f cut confuzia c sunt unul i acelai lucru. Internet este sistemul global care interconecteaz reelele de calculatoare, pe cnd Web este unul dintre serviciile furnizate de Internet prin execu ia unei aplica ii specifice. Indeplineste obiectivele educationale: 1 Text 2 : Dac analizm m odul de organizare a documentelor, acestea pot fi mpr ite n trei categorii: Indeplineste obiectivele educationale: 1 Text 3 : organizare liniar (de tip eseu) Indeplineste obiectivele educationale: 1 Text 4 :

Text 4 : organizare ierarhic, arborescent , pe mai multe niveluri. Indeplineste obiectivele educationale: 1 Text 5 : organizarea asociativ, n re ele de inform aii, similar cu organizarea m emoriei i gndirii umane. Indeplineste obiectivele educationale: 1 Text 6 : Sarcin de lucru: Ac iona i cursorul succesiv pe casetele de pe ecran. Indeplineste obiectivele educationale: 1 Text 7 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 1 Hipertexte Hipertext 1 : World Wide Web (pe scurt WWW) este un serviciu ce perm ite accesul la informa ia stocat pe un calculator aflat oriunde n lum e, iar denumirea sa (n traducere pnz de pianjen extins n lumea ntreag) pune n eviden acest lucru. WWW a fost dezvoltat pentru a permite, reunind o m ulim e de cunotin e i culturi ocupa ionale, colaborarea oam enilor afla i n diverse loca ii pentru a mprti idei i a discuta de alte aspecte relative la proiectele com une la care lucreaz . Indeplineste obiectivele educationale: 1 Hipertext 2 : Lim bajul HTML a fost v zut ca o posibilitate de a schim ba inform a ii ntre fizicienii care utilizau calculatoare diferite prin intermediul Internet. n 1990 Berners-Lee si specialistul belgian n calculatoare Robert Cailliau ini iaz un proiect n care propun s utilizeze HyperText pentru a lega i accesa informa ii de diverse tipuri ca fragmente web, pe care utilizatorii le pot urmri. Proiectul devine public n decembrie 1990 i a avut un succes cu mult mai mare dect i-au imaginat ini iatorii. Indeplineste obiectivele educationale:

1 Hipertext 3 : Pentru a n elege textul respectiv, parcurgerea se face secven ial, de la nceput la sfrit. Este cazul majorit ii operelor literare. Indeplineste obiectivele educationale: 1 Hipertext 4 : Dac o lucrare este structurat pe capitole, cu sec iuni introductive i sec iuni cu informa ii aprofundate, un nceptor poate parcurge eventual doar nivelul sec iunilor introductive din fiecare capitol. Evident c , ordinea de parcurgere a textului nu m ai este n acest caz secven ial. Indeplineste obiectivele educationale: 1 Hipertext 5 : n acest caz, informa ia dintr-o lucrare poate fi parcurs secven ial, dar se poate urm a i un anumit fir prin tehnici de tip note de subsol, c utare prin tabela de indec i, urm rirea referirilor la alte sec iuni sau lucrri. Lectorul are un rol activ, el fiind cel ce selecteaz parcursul n re eaua informa ional. Acesta este cazul docum entelor hypertext. Indeplineste obiectivele educationale: 1 Simulare: Simularea 1 : Text 1 este textul tiin ific. Cuvintele bold din acest text reprezint hypertexte. Pe ecran apare ntr-o caset Text 2. La clic pe aceast caset (sarcin de lucru Text6) apar succesiv pe ecran sub form de diagram sau list, textele 3-5. Cursantul trebuie s dea clic pe aceste casete. La clic apare n fereastr pop-up hypertextul corespunz tor (3-5). La final apare sarcina de lucru Text 7. Satisface obiectivele educationale: 1

Cadrul 2 Nume Submoment Itemi de invatare Elementele unui site web Descriere detaliata

Texte123

Text 1 : Vizitarea unei pagini web de pe un calculator conectat la Internet presupune pornirea unui browser web i introducerea numelui de domeniu al site-ului vizitat n bara de adrese a browserului. Pentru a realiza un site web este nevoie s se cunoasc mai nti componentele sale de baz: - Server web; - Nume de domeniu; - Pagini web. Elementele atom ice constructive pentru site-urile web sunt paginile web. Atunci cnd vizita i un site web n browser va fi afiat o pagin individual. n realitate fiecare pagin web este un fiier identificat unic printr-un URL. Indeplineste obiectivele educationale: 1 Text 2 : Sarcin de lucru: Ac iona i butonul Play. Indeplineste obiectivele educationale: 1 Text 3 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 1

Hipertexte

Hipertext 1 : Numit i browser Internet , browser web, navigator web sau explorator web, cuvnt de origine engleza, browser-ul este o aplica ie software care permite utilizatorilor s afieze text, grafic , muzic , video i alte informa ii localizate pe o pagin web, dar i schimb de inform aii ntre utilizator i site-ul web. Pe pia sunt o m ulim e de browsere, cele mai cunoscute fiind: Microsoft Internet Explorer, Mozilla Firefox, Apple Safari, Google Crom e, Opera, Nintendo. Indeplineste obiectivele educationale: 1 Hipertext 2 : Numele de domeniu reprezint adresa care se scrie n bara de adrese a browserului web pentru a vizita site-ul web dorit. Indeplineste obiectivele educationale: 1

Hipertext 3 : Un server web este un calculator conectat la Internet avnd rolul de a furniza o loca ie pentru paginile web ale unui site web i de m anipulare a cererilor sosite pentru paginile web pstrate. Indeplineste obiectivele educationale: 1 Hipertext 4 : Numele de domeniu al site-ului web este un identificator unic pentru acel site, sim ilar cu adresa potal a persoanelor i identific n m od unic serverul web ce gzduiete site-ul web. Numele de domeniu se ncheie cu un gen de extensie form at din punct urmat de dou sau mai multe litere cu semnifica ii bine precizate. Dintre cele mai cunoscute extensii amintim: - .edu creat pentru site-uri avnd con inut educativ (prescurtare de la Education); - com creat pentru com panii si comer online (Comercial); - .org creat special pentru organiza ii (Organization); - .gov creat special pentru organiza ii guvernam entale; - .net creat special pentru re ele i Internet (Network); - .ro creat special pentru site-rile si companiile care prom oveaz afacerile n Romnia. Indeplineste obiectivele educationale: 1 Hipertext 5 : Paginile web sunt colec ia de fi iere ce alctuiesc site-ul web. Con inutul site-ului este dat de con inutul tuturor paginilor. Indeplineste obiectivele educationale: 1 Hipertext 6 : Un Uniform Resource Locator (URL) are urmtoarea form: http://NumeDom eniu/Num eFisierPagin. Indeplineste obiectivele educationale: 1 Animatii: Animatia 1 : Captura cu o pagina web, de exem plu yahoo. Se face zoom pe fiecare element al ferestrei i apare ntr-o caset pe ecran, sub elementul prezentat, numele acestuia. Indeplineste obiectivele educationale: 1

Simulare:

Simularea 1 : La clic pe cuvintele bold din Text 1 apare hypertextul corespunz tor. n partea dreapt se deruleaz anima ia 1 (sarcin de lucru text 2). La final apare sarcina de lucru text 3. Daca nu se poate, se combina cele dou sarcini de lucru. Satisface obiectivele educationale: 1

Cadrul 3 Nume Submoment Itemi de invatare Instrumente pentru dezvoltarea paginilor web Descriere detaliata

Texte123

Text 1 : Pentru dezvoltarea de pagini web se poate utiliza orice editor ASCII n care se realizeaz sursa paginii web. Acest lucru nu este foarte comod ntruct dezvoltatorul trebuie s introduc toate marcajele specifice, astfel nct pagina s fie afiat n formatul dorit. Dezvoltarea paginilor poate fi f cut utiliznd editorul de texte Notepad existent n grupul accesorii la sistem ul Windows. Pentru a face ct m ai simpl crearea de pagini web au fost dezvoltate o mul ime de instrum ente software proiectate special pentru realizarea paginilor web. Indeplineste obiectivele educationale: 1 Text 2 : Cteva dintre instrum entele utilizate la realizarea site-urilor web sunt: Indeplineste obiectivele educationale: 1 Text 3 : Microsoft FrontPage, Macromedia DreamWeaver, Mozilla KompoZer Indeplineste obiectivele educationale: 1 Text 4 : Sarcin de lucru: Ac iona i cursorul succesiv pe casetele de pe ecran. Indeplineste obiectivele educationale: 1 Text 5 : Sarcin de lucru: Pute i trece la sec iunea urmtoare. Indeplineste obiectivele educationale: 1

Hipertexte

Hipertext 1 : Microsoft FrontPage este un editor HTML profesional pentru design, codare i dezvoltare de site-uri web, pagini web, aplica ii web. Fie c se dorete controlul total asupra codului HTML prin scrierea de mn a acestuia, fie c se dorete utilizarea unui mediu de editare vizual, FrontPage ofer uneltele necesare, mbun t ind de asemenea experien a web. Facilit ile vizuale din FrontPage perm it crearea de pagini web f r scrierea nici unui rnd de cod. Indeplineste obiectivele educationale: 1 Hipertext 2 : Este un pachet software cu o interfa prietenoas care ofer posibilitatea de a utiliza instrum entele componente, de la un nivel sc zut pana la un nivel ultra-profesional. Pachetul Macrom edia pentru realizarea paginilor web cuprinde programe precum: - Fireworks (utilizat n spe pentru crearea elem entelor active din pagin: butoane, cmpuri i diverse grafice), - Freehand cu atribute sim ilare cu Fireworks, - Director (un instrum ent deosebit de util pentru crearea aplica iilor interactive, utiliznd scriptul lingo (movie script) ca mediu principal de programare, descriind toate instan ele i posibilit ile de manipulare pentru fram e-uri i nu n ultim ul rnd, - Dream Weaver (prin intermediul c ruia adug m toate aplica iile create). Indeplineste obiectivele educationale: 1 Hipertext 3 : Este un instrument suficient de bun, oferit gratuit de oraganiza ia Mozilla, organiza ie care a creat i ntre ine i browserul gratuit Mozilla. Instrumentul pus la dispoziie de Mozilla poate fi utilizat pentru realizarea de site-uri web de com plexitate medie. n plus este uor de folosit i are o interfa intuitiv. Indeplineste obiectivele educationale: 1

Simulare:

Simularea 1 : Textul 2 apare pe ecran ntr-o caset . La clic pe aceast caset apar sub forma unei diagram e elementele enum erate n Text 3. La clic pe aceste casete apar hypertextele corespunztoare (1-3). La final apare sarcina de lucru text 5. Satisface obiectivele educationale: 1

Momentul 2
Contine Numele momentului: Durata: Descrierea momentului: Descriere Introducere n limbajul HTML 35 min Momentul prezint structura unui fi ier HTML, descrie directivele (marcaje, etichete, tag-uri), atributele HTML i formatarea documentelor HTML
Indeplineste obiectivele educationale:

Cadrul 1 Nume Submoment Itemi de invatare Ce este limbajul HTML? Descriere detaliata

Texte123

Text 1 : Text stiintific: HyperText Markup Language (HTML) este, aa cum i spune i numele, un limbaj de marcare (adnotare) utilizat pentru crearea paginilor web care pot fi afiate ntr-un browser. Lim bajul este specializat n prezentarea informa iei, nu n definirea structurilor de date. Etichetele (marcajele, directivele sau tag-urile) specific browserului modul n care elementele de con inut sunt afi ate. Prin intermediul m arcajelor se specific browserului modul n care o component a documentului va fi prezentat n pagina web. HTML nu definete o anum it structur de date, ci doar modul n care o inform a ie este afiat . Organizarea asociativ a inform a iilor presupune definirea unor noduri, reprezentate de concepte, i a unor arce ca legturi ntre noduri, reprezentnd rela iile logice dintre concepte. Se ob ine astfel un graf sau o re ea semantic. Informa iile tiin ifice se preteaz cel mai bine la acest tip de organizare, iar suportul adecvat de implementare este oferit de calculatoarele electronice conectate la Internet. Un alt avantaj al acestora, n mom entul de fa, este posibilitatea de vizualizare, pe lng text, a figurilor, imaginilor i filmelor, precum i nso irea imaginilor cu sunete. n plus, informa ii vaste pot fi accesate rapid. Acest tip de sisteme se numesc sistem e hipertext i hipermedia. Din perspectiva defini iei de mai sus, ntr-un sistem hipertext se disting urmtoarele elemente fundam entale: -nodurile ; -ancorele ; -leg turile . Indeplineste obiectivele educationale: 1 Text 2 : Sarcin de lucru: Ac iona i cursorul pe cuvintele evideniate n text. Indeplineste obiectivele educationale: 1 Text 3 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 1

Hipertexte

Hipertext 1 : nodurile (paginile), reprezentate de blocuri unitare de informa ii; Indeplineste obiectivele educationale: 1 Hipertext 2 : ancorele ( intele) reprezentnd fragmente unitare de noduri (de exemplu n interfe ele grafice se ntlnesc cuvinte eviden iate n text, im agini tip icoan, butoane Next/Previous, iar legturile de la acestea se activeaz prin comand de la tastatur sau mouse etc.) Indeplineste obiectivele educationale: 1 Hipertext 3 : legturile ntre noduri, avnd drept punct de plecare, fie ntregul nod surs , fie o ancor a sa. Indeplineste obiectivele educationale: 1

Imagini:

Imaginea 1 :

Indeplineste obiectivele educationale: 1 Animatii: Animatia 1 : Din imaginea 1 poate sa iasa in evidenta printr-un efect la alegerea dezvoltatorului tagurile HTML, Meta, HEAD. anim atia se repeta Indeplineste obiectivele educationale: 1 Simularea 1 : Animatia 1 apare in zona de continut . Cursantul este indrumat sa actioneze asupra linkurilor (cuvintele de culoare rosie) din textul 1 (sarcina de lucru text2). Dupa deschiderea tuturor hypertextelor apare indicatia text3 Satisface obiectivele educationale: 1

Simulare:

Cadrul 2 Nume Submoment Itemi de invatare Texte123 Structura unui fiier HTML Descriere detaliata Text 1 : O pagin web este similar cu un docum ent ce conine o anum it inform a ie, document salvat ca un fiier avnd extensia specific (.htm l sau .htm ). Pentru a scrie un document HTML este necesar un editor de text (editor ASCII), ca de exemplu Notepad sau orice alt program dedicat pentru dezvoltarea paginilor web. Un fiier surs HTML este sim ilar cu oricare alt fiier surs ce folose te limbaje de adnotare (ex. LaTeX) i este compus din dou mari sec iuni preambul (head) i corp (body). Informa ia din preambul nu este afiat de browser, coninutul vizibil n browser este cel prezent n sec iunea body. Indeplineste obiectivele educationale: 1 Text 2 : Sarcin de lucru: Ac iona i cursorul pe cuvintele evideniate n text. Indeplineste obiectivele educationale: 1 Text 3 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 1

Hipertexte

Hipertext 1 : Prima directiv n documentul HTML este <html> i marcheaz, pentru browser, nceputul fiierului, iar ultima directiv din document este < /htm l> prin ea marcnd sfritul fiierului HTML. Orice con inut n fiierul surs situat dup directiva < /htm l> va fi ignorat nefiind interpretat de c tre browser. Indeplineste obiectivele educationale: 1 Hipertext 2 : Blocul cuprins ntre directivele <head> i </head> reprezint informa ia din header i nu apare la afiarea paginii, exceptnd informa ia aferent titlului, dac o astfel de directiv este prezent . Indeplineste obiectivele educationale: 1 Hipertext 3 : Sec iunea cuprins ntre directivele <body> i </body> constituie inform a ia afiat de browser i formatat corespunztor marcajelor cuprinse n sec iune. Indeplineste obiectivele educationale: 1

Imagini:

Imaginea 1 :

Indeplineste obiectivele educationale: 1 Animatii: Animatia 1 : Rularea celor 3 im agini printr-un efect la alegerea dezvoltatorului flash Indeplineste obiectivele educationale: 1 Simularea 1 : Textul 1 apare ca text tiin ific. Pe ecran apare animatia 1. Cursantul (la indicatia text 2) trebuie s dea clic pe cuvintele de culoare rosie din text 1 pentru a deschide hypertextele asociate. Satisface obiectivele educationale: 1

Simulare:

Cadrul 3 Nume Submoment Itemi de invatare Directive (tag-uri) HTML Descriere detaliata

Texte123

Text 1 : O pereche de directive delimiteaz un element HTML, iar inform a ia cuprins ntre directiva de nceput i cea de sfrit reprezint con inutul elem entului. Vom ilustra utilizarea directivelor HTML pentru construc ia unei pagini simple utiliznd editorul Notepad. Pentru a crea pagina se dechide editorul Notepad urm nd calea: Start / Programs / Accessories / Notepad. Cu ajutorul editorului vom crea un fiier, care va fi salvat cu numele pagina1.htm. Etichetele pot fi scrise cu litere mari sau litere m ici, fr s afecteze interpretarea. Este foarte im portant extensia fiierului htm sau html pentru a fi recunoscut de browser ca fiind pagina HTML. Indeplineste obiectivele educationale: 1 Text 2 : Sarcin de lucru: Ac iona i butonul Play. Indeplineste obiectivele educationale: 1 Text 3 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 1

Material audiovizual :

Material audiovizual 1 : Film (captivate) cu utilizarea directivelor HTML. Filmul va include informa ii ca:

Pentru vizualizarea rezultatului fiierul realizat va fi deschis cu un browser (Internet Explorer, Mozilla sau oricare alt browser disponibil). Rezultatul afiarii este ilustrat n fig.

Textul dintre etichetele < html> i < /htm l> descrie pagina web. Textul cuprins ntre etichetele <head> i </head> nu este afiat, n afar de titlu dac o astfel de etichet este prezent . Textul cuprins ntre etichetele <body> i </body> reprezint con inutul vizbil al paginii web. n bara de adrese se afiaz calea de unde a fost nc rcat fiierul. n tab se afiaz titlul paginii specificat ntre etichetele <title> i </title> . Dac titlul lipsete n tab se afiaz numele fiierului. Indeplineste obiectivele educationale: 1 Simulare: Simularea 1 : Cursantul cite te textul i urmrete film ul. Satisface obiectivele educationale: 1

Cadrul 4 Nume Submoment Itemi de invatare Texte123 Atribute Descriere detaliata Text 1 : Atributele asociate etichetelor reprezint o modalitate de a furniza informa ii suplimentare despre tratarea elementelor HTML. Atributele sunt ntotdeauna specificate n cadrul etichetei de nceput sub forma num e=valoare , n care nume reprezint numele atributului i valoarea asociat este pus ntre ghilimele. Indeplineste obiectivele educationale: 1 Text 2 : Sarcin de lucru: Ac iona i cursorul pe cuvintele evideniate n text, apoi ac iona i butonul Play. Indeplineste obiectivele educationale: 1 Text 3 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 1 Hipertexte Hipertext 1 : O etichet poate avea mai multe atribute, numrul acestora fiind dependent de etichet. Dac o etichet are mai m ulte atribute , acestea sunt separate prin spa iu. Indeplineste obiectivele educationale: 1 Material audiovizual 1 :

Material audiovizual :

Sim ilar cadrului anterior, film ce arata utilizarea atributelor. Film va prezenta inform atii referitoare la: Formatul general de introducere a atributelor este: <nume_eticheta num e_atr1=valoare nume_atr2=valoare...> . Toate valorile atributelor indiferent de tipul lor sunt plasate ntre ghilimele. La eticheta <BODY> atributul BGCOLOR indic ce culoare va avea fundalul (background n lim ba englez) viitoarei pagini web. Tote culorile n HTML, sunt definite specific printr-un cod asociat. Astfel, dac se dorete ca fundalul paginii s fie verde, se va scrie astfel: <body bgcolor= #347C17>. Codurile culorilor se pot gsi, pe Internet, la diverse adrese printre care: http://www.com puterhope.com /htm color.htm, http://html-colorcodes.info/ etc. La eticheta paragraph, care specific un paragraf nou, se poate seta prin intermediul atributelor alinierea corespunz toare: spre stnga (valoarea left ), centrat (valoarea center), spre dreapta (valoarea right ) sau aliniere complet stnga dreapta (valoare justify). Astfel, pentru a afia un paragraf cu aliniere la stnga, se va utiliza atributul align cu valoarea left ca in exem plul: <p align=left > </p> . Sim ilar, pentru a scrie anumite poriuni de text cu litere de diverse culori sau litere de diferite dimensiuni, se vor utiliza atributele etichetei FONT ca n exemplul: <FONT color=yellow size=12> Text scris cu galben de dimensiune 12 pt(punct tipografic: 1 inch = 72.27 pt) </FONT> Utilizarea atributului style pentru un document HTML permite specificarea stilului local pentru un anum it element. Acest atribut supranscrie orice stil global specificat prin eticheta <style> sau stylesheet extern. Exemplu:

<h1 style="color:blue;text-align:center"> Acesta este un header </h1> <p style="color:green">Acesta este un paragraf< /p> Indeplineste obiectivele educationale: 1

Simulare:

Simularea 1 : Cursantul cite te textul stiintific (deschide hypertextul) i urmrete film ul. Satisface obiectivele educationale: 1

Cadrul 5 Nume Submoment Itemi de invatare Texte123 Formatarea documentelor HTML. Titluri Descriere detaliata Text 1 : Sim ilar oricrui alt document, docum entele HTML necesit form atare, care poate fi: - la nivel de document; - la nivel de paragraf ; - la nivel de caracter . Un elem ent important privind formatarea unui document se refera la modul de afiare a titlurilor. De obicei ntr-o pagin web se gsesc titluri i subtitluri , scrise cu diverse marimi de caractere. Toate etichetele pentru titluri ncep cu litera "h" (de la "heading") i se ncheie cu un numr de la unu la ase. n plus, atunci cnd un text este prins ntre etichete de acest tip, textul care urmeaz (dup eticheta de "sfrit titlu") este automat prezentat m ai jos, dup un rnd liber. Indeplineste obiectivele educationale: 1 Text 2 : Sarcin de lucru: Ac iona i cursorul pe cuvintele evideniate n text, apoi ac iona i butonul Play. Indeplineste obiectivele educationale: 1 Text 3 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 1

Hipertexte

Hipertext 1 : La nivel de document: - formatul pagini (A3, A4, A5); -m arginile paginii; - aezarea n pagin (pe lungim e sau l ime). Indeplineste obiectivele educationale: 1 Hipertext 2 : La nivel de paragraf: - alinierea unui paragraf; - spa iul dintre 2 paragrafe; - spa iul dintre liniile unui paragraf. Indeplineste obiectivele educationale: 1 Hipertext 3 : La nivel de caracter: - tipul caracterului; - dimensiunea caracterului; - spa iul dintre caractere. Indeplineste obiectivele educationale: 1

Material audiovizual :

Material audiovizual 1 : Exemplu de introducere titluri si forma n care sunt afiate. Film ul con ine informa ii ca:

Indeplineste obiectivele educationale: 1 Simulare: Simularea 1 : Cursantul citete textul stiintific (deschide hypertextele) i urm rete filmul. Satisface obiectivele educationale: 1

Cadrul 6

Nume Submoment Itemi de invatare Texte123

Formatarea documentelor HTML. Paragrafe Descriere detaliata Text 1 : Con inutul unui docum ent poate fi mpr it n paragrafe. Un paragraf este separat de un alt paragraf printr-un spa iu corespunztor, diferit de spa iul dintre dou rnduri. Pentru marcarea nceputului unui paragraf se folosete eticheta < p>. Indeplineste obiectivele educationale: 1 Text 2 : Sarcin de lucru: Analiza i imaginea de pe ecran apoi merge i m ai departe. Indeplineste obiectivele educationale: 1

Animatii:

Animatia 1 :

Animatie creare paragraf in HTML Indeplineste obiectivele educationale: 1

Simulare:

Simularea 1 : In ecranul de continut apare animatia 1. Textul explicativ este scris special ntre caracterele specifice unui com entariu. Cursan ii citesc textele i merg m ai departe Satisface obiectivele educationale: 1

Cadrul 7 Nume Submoment Itemi de invatare Texte123 Formatarea documentelor HTML. Caractere Descriere detaliata Text 1 : Directivele HTML pentru formatarea textului sau a paginii se pot clasifica, dup func ionalitatea lor, n directive pentru formatarea caracterelor textului i directive pentru configurarea blocurilor de text (cit ri, indentri, defini ii). Indeplineste obiectivele educationale: 1 Text 2 : Sarcin de lucru: Ac iona i cursorul pe cuvintele evideniate n text, apoi ac iona i butonul Play. Indeplineste obiectivele educationale: 1 Text 3 : Sarcin de lucru: Pute i trece la sec iunea urmtoare. Indeplineste obiectivele educationale: 1 Hipertexte Hipertext 1 :

Formatarea caracterelor textului: Directiva Semnifica ia <b> Definete text scris cu caractere bold <big> Definete text scris cu caractere mari <blink> Text iluminat intermitent <em> Definete text scris cu caractere evideniate <i> Definete text scris cu caractere italice <small> Definete text scris cu caractere mici <strong> Definete text scris cu caractere evideniate <sub> Definete text scris ca indice inferior <sup> Definete text scris ca indice superior <ins> Definete text inserat <del> Definete text ters <code> Definete text scris cu caractere specifice pentru program surs <kbd> Definete text introdus de la tastatur (keyboard) <tt> Definete text scris cu caractere tip teleprinter (teletype ) <var> Definete o variabil <pre> Definete text preformatat Indeplineste obiectivele educationale: 1 Hipertext 2 : Configurarea blocurilor de text: Directiva Semnifica ia <abbr> Definete o abreviere <acronym> Definete un acronim <address> Definete adresa unui element de text <bdo> Definete direcia de scriere a textului <blockquote> Definete un bloc de text citat lung <q> Definete un bloc de text citat scurt <cite> Definete o citare <dfn> Definete un termen definiie Indeplineste obiectivele educationale: 1

Material audiovizual :

Material audiovizual 1 : Film care ilustreaz utilizarea unor etichete pentru formatarea caracterelor si apoi arata pagina vizualizat n browser.

Indeplineste obiectivele educationale: 1 Material audiovizual 2 : Film care ilustreaz folosirea unor etichete pentru form atarea caracterelor si blocurilor de text si arata modul de vizualizare n browser. Indeplineste obiectivele educationale: 1 Simulare: Simularea 1 : Cursantul citete textul i hypertextele i urm rete filmele. Satisface obiectivele educationale: 1

Momentul 3
Contine Numele momentului: Durata: Descrierea momentului: Momentul prezint utilizarea listelor n HTML, a ancorelor, inserarea de imagini i tabele. Descriere Alte componente n pagini HTML 20 min
Indeplineste obiectivele educationale:

Cadrul 1 Nume Submoment Itemi de invatare Liste n pagini web Descriere detaliata

Texte123

Text 1 : HTML ofer etichete speciale pentru crearea a trei categorii de liste, sim ilare cu cele realizate cu editoarele de texte, ob innd astfel: liste neordonate, liste ordonate i liste de definiii. O list neordonat este o list f r numere de ordine (unordered list), pe cnd o list ordonat este o list care con ine numere de ordine (ordered list). Att etichetele pentru liste ordonate ct i cele pentru liste neordonate pot avea asociate atribute prin care se specific alte op iuni de numerotare sau simboluri asociate elementelor com ponente. Indeplineste obiectivele educationale: 1 Text 2 : Sarcin de lucru: Ac iona i cursorul pe cuvintele evideniate n text, apoi ac iona i butonul Play. Indeplineste obiectivele educationale: 1 Text 3 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 1

Hipertexte

Hipertext 1 : O list neordonat , f r numere de ordine (unordered list ) ncepe cu directiva <ul>, iar fiecare elem ent al listei va fi m arcat cu directiva <li>. Toate etichetele trebuiesc s aib i eticheta de sfr it. Elem entele unei liste nenum erotate sunt afiate cu bullets. Structura tipic pentru introducerea unei liste neordonate este: <ul> <li>Prim ul element din lista</li> <li>Al doilea elem ent din lista< /li> <!-- Alte elemente ale listei--> < li>Ultim ul element din lista</li> </ul> Indeplineste obiectivele educationale: 1 Hipertext 2 : Listele ordonate au asociate numere de ordine (ordered list ) i ncep cu directiva <ol> . Elementele listei sunt marcate cu aceeai etichet <li>. Similar cu listele nordonate trebuiesc utilizate i etichetele de sfrit. Exemplu: <ol> <li>Prim ul element din lista</li> <li>Al doilea elem ent din lista< /li> <!Alte elemente din list--> < li>Ultim ul element din lista</li> </ol> Indeplineste obiectivele educationale: 1 Hipertext 3 : Atributul type poate fi utilizat att la eticheta de nceput a listei ordonate sau neordonate, ct i la etichetele de nceput ale elementelor din list . Pentru listele ordonate se poate utiliza i atributul start prin care se precizeaz valoarea de nceput pentru numerotare. Indeplineste obiectivele educationale: 1

Material audiovizual :

Material audiovizual 1 : Film care prezint codul surs al sec iunii unei pagini n care s-a introdus o lista ordonat si o lista neordonat cu atributele type i start at t la eticheta de nceput a listei ct i la

si o lista neordonat cu atributele type i start at t la eticheta de nceput a listei ct i la eticheta de nceput a elem entului. Pagina va fi afiat de browser ca n imaginea de m ai jos:

Indeplineste obiectivele educationale: 1 Simulare: Simularea 1 : Cursantul cite te textul i hypertextele, urmrete film ul i merge m ai departe. Satisface obiectivele educationale: 1

Cadrul 2 Nume Submoment Itemi de invatare Ancore (link-uri) Descriere detaliata

Texte123

Text 1 : Ancorele sau link-urile (legturile) n HTML im plem enteaz practic conceptul de hypertext. ntr-o pagin HTML prin intermediul ancorei unul sau mai multe cuvinte au asociat o alt component ce poate fi: alt pagin html, o im agine, o secven de sunet, film etc. Sintaxa unei ancore ce refer un alt document ce va fi ncarcat in browser este: <a href=url>Text afisat in pagina HTML printe </a> . O serie de alte atribute pot fi utilizate in conjunc ie cu eticheta <a> . Cele mai importante sunt: charset coords hreflang target name Indeplineste obiectivele educationale: 1 Text 2 : Sarcin de lucru: Ac iona i cursorul pe cuvintele evideniate n text, apoi ac iona i butonul Play. Indeplineste obiectivele educationale: 1 Text 3 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 1

Hipertexte

Hipertext 1 : Charset specific setul de caractere al documentului referit prin link. Spre exemplu, charset="UTF-8" specific unul din seturile suportate de cele m ai m ulte browsere. Valoarea implicit fiind ISO-8859-1. Indeplineste obiectivele educationale: 1 Hipertext 2 :

Coords perm ite specificarea de coordonate atunci cnd link-ul este materializat printr-o parte a unei figuri din pagina surs. Acesst atribut se utilizeaz mpreun cu shape, dar nu este de toate browserele. Indeplineste obiectivele educationale: 1 Hipertext 3 : Hreflang specific lim ba n care este scris documentul asociat, limb ce este codificat printr-un set de valori. Ex: hreflang = en , specific faptul c documentul asociat este scris n limba englez. Indeplineste obiectivele educationale: 1 Hipertext 4 : Target specific locul n care se deschide documentul asociat. Valorile posibile pentru atribut sunt: _blank (ntr-o nou fereastr ), _self (n aceeai fereastr din care s-a apelat link-ul valoare im plicit ), _parent (n fram esetul printe), framename (ntr-un frame specificat). Valoarea implicit este _self. Indeplineste obiectivele educationale: 1 Hipertext 5 : Atributul name permite crearea unor trim iteri chiar n interiorul docum entului HTML, astfel nct la parcurgerea paginii HTML s se poat sri, eventual, la o anumit sec iune dorit . Marcarea locului referit se face printr-o directiv cu sintaxa <a nam e=etichet _ int>Text hiperlink</a> iar referin a are forma <a href=adres_document#eticheta_tintei> Text hiperlink</a> Indeplineste obiectivele educationale: 1 Material audiovizual : Material audiovizual 1 : Film ce ilustreaza crearea unui document HTML numit con inut.htm , document ce con ine trei sec iuni marcate prin ancore ce con in atributul name. Un alt docum ent numit cuprins.htm contine titlurile celor trei sec iuni cu ancore ce fac legatura cu documentul con inut la marcajul inta corespunztor. Din docum entul cuprins prin intermediul link-ului se dore te s se sar la oricare dintre sec iunile documentului con inut. Presupunem c cele dou fiiere se gsesc n acela i director, deci a a vor trebui

con inut. Presupunem c cele dou fiiere se gsesc n acela i director, deci a a vor trebui salvate. Codul surs i pagina afiat pentru cuprins

Codul surs i pagina afiat pentru con inut

Indeplineste obiectivele educationale: 1 Simulare: Simularea 1 : Cursantul cite te textul i hypertextele, urmrete film ul i merge m ai departe. Satisface obiectivele educationale: 1

Cadrul 3 Nume Submoment Itemi de invatare Inserare imagini Descriere detaliata

Texte123

Text 1 : n paginile web pot fi introduse i obiecte grafice cum sunt imaginile , ob innd astfel pagini web atractive cu design plcut. n general, browserele recunosc n paginile web mai multe formate ale imaginilor. Cele m ai rspndite sunt cele cu extensia .gif i cele care au una din extensiile .jpg sau .jpeg. Pentru a include o im agine ntr-o pagin HTML se utilizeaz eticheta <im g>, etichet ce nu are pereche de nchidere. Sintaxa uzual este: <img src=url [width=lat ] [height=inalt ] [alt=text ]> Indeplineste obiectivele educationale: 1 Text 2 : Sarcin de lucru: Ac iona i butonul Play. Indeplineste obiectivele educationale: 1 Text 3 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 1

Material audiovizual :

Material audiovizual 1 :

Film care exemplifica introducerea imaginilor in cadrul paginilor HTML Elementele de m ai jos vor face parte din film : atributul src este obligatoriu i specific adresa fiierului ce con ine imaginea (adres relativ sau absolut ); atributele width i height reprezint elemente de scalare a imaginii n pagina web. Prin scalare imaginea poate fi deformat dac nu se pstreaz propor ia iniial ntre valorile celor dou atribute; atributul alt specific un text alternativ ce va fi afiat n locul imaginii dac formatul nu este recunoscut de c tre browser sau conexiunea este prea lenta ori adresa de referin a imaginii este eronat . Alte atribute optionale: Align atribut ce specific modul de aliniere pe orizontal sau vertical a imaginii fa de restul coninutului. Valorile permise sunt: top, bottom , left, right, m iddle. Pentru alinierea imaginii la dreapta n sintaxa css, se specific aceasta prin atributul style ca n exemplul: <im g .... style="float:right" />. Border atribut care specific laimea border-ului n jurul imaginii exprim at n numr de pixeli. Cu atributul style poate fi specificat borderul, n sintaxa css, ca in exemplul <img .... style="border:5px solid black" />. Hspace, vspace specific distan a exprim at n pixeli din partea dreapt i stng a imaginii fa de componente de tip text, respectiv nainte i dup im agine. Similar sinntaza css <im g .... style="margin: 0px 20px" /> indic 0 pixeli pe vertical i 20 pe orizontal.

css <im g .... style="margin: 0px 20px" /> indic 0 pixeli pe vertical i 20 pe orizontal. Ismap specific o imagine ce reprezint o zon activ la click mouse i trim ite la server coordonatele (m ai poart i denumirea de server-side image-map). Usemap creaz o relaie ntre o imagine i un m ap (similar cu ism ap dar client -side image-m ap). Indeplineste obiectivele educationale: 1 Simulare: Simularea 1 : Cursantul cite te textul, urmre te filmul i m erge mai departe. Satisface obiectivele educationale: 1

Cadrul 4 Nume Submoment Itemi de invatare Inserare tabele Descriere detaliata

Texte123

Text 1 : Tabelele sunt elemente similare celor realizate n editoare de texte, fiecare celul poate con ine text, imagini, form ulare, liste sau subtabele. n HTML, obiectele de tip tabel se introduc cu ajutorul directivei <table>, prin directiva < th> se specific headerul, directiva <tr> permite mprirea tabelului n linii, directiva <td> este utilizat pentru a mpr i liniile n celule. Informa ia afiat ntr-o celula poate fi de tip text, imagine, liste sau alte obiecte grafice. Eticheta <table> poate avea m ai m ulte atribute. Cele mai importante sunt: Border Cellpadding Cellspacing Frame Rules Width Align Bgcolor Indeplineste obiectivele educationale: 1 Text 2 : Sarcin de lucru: Ac iona i cursorul pe cuvintele evideniate n text, apoi ac iona i butonul Play Indeplineste obiectivele educationale: 1 Text 3 : Sarcin de lucru: Pute i trece la sec iunea urmtoare. Indeplineste obiectivele educationale: 1

Hipertexte

Hipertext 1 : Atributul border specific grosimea borderului din jurul tabelului n pixeli. Dac acesta lipsete tabelul este afi at cu stilul implicit, tabel nebordat. Indeplineste obiectivele educationale: 1 Hipertext 2 : Atributul cellpadding specific distana n pixeli ntre peretele celulei i coninutul s u. Indeplineste obiectivele educationale:

1 Hipertext 3 : Atributul cellspacing specific spa iul dintre celule msurat n pixeli. Indeplineste obiectivele educationale: 1 Hipertext 4 : Atributul frame specific partea borderului exterior ce va fi afiat . Valorile posibile sunt: void, above, below, hsides, lhs, rhs, vsides, box, border. Valorile acestui atribut nu sunt suportate de toate browserele. Indeplineste obiectivele educationale: 1 Hipertext 5 : Atributul rules specific care par i din interiorul borderului vor fi afiate. Valorile posibile sunt: none, groups, rows, cols, all. Nu sunt afiate corect n toate browserele. Indeplineste obiectivele educationale: 1 Hipertext 6 : Atributul width permite specificarea l im ii tabelei. Dac atributul lipse te tabela va avea l imea dat de inform a ia afiat n tabel . Recomandat s se foloseasc css. Indeplineste obiectivele educationale: 1 Hipertext 7 : Atributul align specific alinierea con inutului n celulele tabelei. Valorile posibile sunt: left, right, center. Este recomdat utilizarea atributului style n sintaxa css. Indeplineste obiectivele educationale: 1 Hipertext 8 : Atributul bgcolor perm ite specificarea colori de background a tabelei conform paletei de culori. Se recomand specificarea culori cu atributul style n sintaxa css. Indeplineste obiectivele educationale: 1 Material audiovizual : Material audiovizual 1 : Film ce ilustreaz crearea unui tabel avnd coloanele Nume, Prenum e, Valoare rat , tabel ce con ine ratele ce trebuiesc pltite de persoanele ce au accesat o linie de credit.

ce con ine ratele ce trebuiesc pltite de persoanele ce au accesat o linie de credit.

Indeplineste obiectivele educationale: 1 Simulare: Simularea 1 : Cursantul cite te textul i hypertextele, urmrete anima ia i m erge mai departe. Satisface obiectivele educationale: 1

Momentul 4
Contine Numele momentului: Durata: Descrierea momentului: Descriere Componente dinamice n HTML 20 min Descrie utilizarea directivelor Form, Input, Select i Textare.
Indeplineste obiectivele educationale:

Cadrul 1 Nume Submoment Itemi de invatare Utilizare Form n pagini web Descriere detaliata

Texte123

Text 1 : O pagin dinamic este o pagin ce con ine directive speciale care face posibil dialogul cu utilizatorul asigurnd astfel implementarea paginilor interactive. n aceste pagini utilizatorul poate introduce informa ii ce vor fi transmise c tre server pentru a fi prelucrate. n paginile web con inutul interactiv este plasat n interiorul unei directive <form> . Elem ente unei forme sunt ncadrate de directivele <form> i </form> i ele permit introducerea inform a iei utilizatorului sub form de: cmpuri de text, cmpuri textarea, m eniuri drop-down, butoane radio, checkbox-uri etc. La directiva < form > sunt permise o serie de atribute prin care se specific modul n care se transm it datele la server. Cteva dintre atributele importante: Action Method Name Accept Accept-charset Enctype Target Indeplineste obiectivele educationale: 1 Text 2 : Sarcin de lucru: Ac iona i cursorul pe cuvintele evideniate n text, apoi ac iona i butonul Play Indeplineste obiectivele educationale: 1 Text 3 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 1

Hipertexte

Hipertext 1 : Atributul action are semnifica ie de url i specific unde sunt trimise datele culese n forma cnd acestea sunt trimise. Adresa specific fie o adres absolut fie o adres relativ fa de loca ia n care este pstrat pagina curent . Indeplineste obiectivele educationale: 1 Hipertext 2 : Atributul method specific modul n care sunt trim ise datele la pagina specificat prin atributul action. Datele pot fi trimise ca variabile url cu metoda get sau ca http prin metoda post . Indeplineste obiectivele educationale: 1 Hipertext 3 : Atributul name specific numele formei i ofer un mod de referire a form ei ntr-un script. Indeplineste obiectivele educationale: 1 Hipertext 4 : Atributul accept specific tipul de fiiere ce pot fi trim ise la server. Indeplineste obiectivele educationale: 1 Hipertext 5 : Atributul accept-charset specific setul de caractere al datelor ce sunt trimise la server. Indeplineste obiectivele educationale: 1 Hipertext 6 : Atributul enctype specific modul n care vor fi codificate datele nainte de a fi trimise la server. Indeplineste obiectivele educationale: 1 Hipertext 7 : Atributul target specific unde se deschide url-ul invocat n atributul action. Indeplineste obiectivele educationale: 1

Material audiovizual :

Material audiovizual 1 :

Crearea unui form ular Indeplineste obiectivele educationale: 1

Simulare:

Simularea 1 : Cursantul citete textul i hypertextele, urmrete anima ia i m erge mai departe. Satisface obiectivele educationale: 1

Cadrul 2 Nume Submoment Itemi de invatare Directive Input Descriere detaliata

Texte123

Text 1 : Prin directivele input se definesc elemente n care se culeg informa iile introduse de utilizatori n form a. Directiva < input> este utilizat pentru a crea elementele pentru introducerea informa iilor de ctre utilizator. Un cmp de intrare poate fi de diverse tipuri n func ie de valorile atributului type . O serie de alte atribute pot fi invocate n conjunc ie cu directiva <input> . Cteva exemple: Type Value Size Disabled specific faptul c la nc rcarea paginii elementul de intrare este dezactivat. Accept cu aceeai sem nifica ie ca i la directiva <form> i poate fi utilizat numai la type=file. Alt utilizat num ai la type=im age pentru a specifica textul alternativ afiat. Checked pentru a specifica faptul c elem entul respectiv este selectat la nc rcarea paginii. Valabil doar la type = checkbox i radio. Maxlength numai pentru type de tip text i password pentru a specifica numrul maxim de caractere permis la introducerea de date n cmpul respectiv. Readonly num ai pentru type de tip text i password indicnd faptul c elem entul este read only. Src specific url-ul imaginii afi ate ca un buton subm it. Align specific modul de aliniere la type=image, atribut ce nu va fi permis n versiunile noi. Indeplineste obiectivele educationale: 1 Text 2 : Sarcin de lucru: Ac iona i cursorul pe cuvintele evideniate n text, apoi ac iona i butonul Play Indeplineste obiectivele educationale: 1 Text 3 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 1

Hipertexte

Hipertext 1 : Atributul type specific tipul elementului de intrare. Indeplineste obiectivele educationale: 1 Hipertext 2 : Atributul value specific valoarea elementului la nc rcarea paginii. Indeplineste obiectivele educationale: 1 Hipertext 3 : Atributul size specific l imea unui cm p de intrare. Indeplineste obiectivele educationale: 1

Material audio:

Material audio 1 :

Film care arata im plem entarea directive input Indeplineste obiectivele educationale: 1

Simulare:

Simularea 1 : Cursantul citete textul i hypertextele, urmrete anima ia i m erge mai departe. Satisface obiectivele educationale: 1

Cadrul 3 Nume Submoment Itemi de invatare Texte123 Directiva Select Descriere detaliata Text 1 : Listele de selec ie sunt componente uzuale ale paginilor HTML. Cu ajutorul directivei select se introduc n pagini web liste de selec ie numite i combobox. O list de selec ii prezint op iunile ca un m eniu vertical, fiecare linie reprezint o op iune dintre care utilizatorul o alege pe cea dorit . Numele sim bolului este cel declarat la directiva select, iar lista de valori este introdus elem ent cu element, utiliznd directiva <option>. Valoarea care se atribuie sim bolului este cea declarat la atributul value i dac atributul lipsete valoarea atribuit automat este textul afiat la respectiva op iune. Indeplineste obiectivele educationale: 1 Text 2 : Sarcin de lucru: Ac iona i cursorul pe cuvintele evideniate n text, apoi ac iona i butonul Play Indeplineste obiectivele educationale: 1 Text 3 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 1

Hipertexte

Hipertext 1 : n form a cea mai simpl o directiv select are urmtoarea form: < select> < option>Logan</option> < option>Sandero</option> <option> Daster</option> <option> Pick-up</option> </select> list care permite alegerea unui model de automobil Dacia Renault. Indeplineste obiectivele educationale: 1 Hipertext 2 : Directiva <option> utilizat n conjunc ie cu directiva <select> perm ite specificarea op iunilor n lista de selec ie. Opiunile sunt afi ate i procesate func ie de atributele suplimentare permise acestora. Aceste atribute sunt: Disabled specific faptul c op iunea este dezactivat . O op iune dezactivat este afiat diferit fa de una activ i la navigare cursorul sare peste respectiva op iune. Selected specific opiunea selectat la nc rcarea paginii. Aceast opiune este cea afiat prima n lista drop-down. Value specific valoarea ce va fi transmis ctre server la trimiterea formei. Chiar dac se afiaz con inutul dintre < opion> i </option> valoarea este cea transm is serverului. Indeplineste obiectivele educationale: 1

Material audiovizual :

Material audiovizual 1 :

Im plem entare directive select Elemente ce se vor regasi in film: Directiva <select> poate avea mai multe atribute ce ofer o mai mare flexibilitate. Atribute importante: Disabled prin care se specific dezactivarea listei drop-down, situa ie n care lista nu este utilizabil i nu reac ioneaz la click. n acest m od se foreaz lista ca neutilizabil pn cnd alte condi ii sunt ndeplinite, cum ar fi bifarea unui checkbox etc. Pentru a fi fcut utilizabil la ndeplinirea condi iei se va lansa un Javascript care va activa lista pentru a fi utilizabil. Multiple permite afi area de opiuni m ultiple func ie de valoarea atributului size care specific numrul de op iuni. Singura valoare a atributului este multiple i necesit suplimentar atributul size a c rui valoare definete num rul de op iuni. Este intrepretat diferit de sistemele de operare i se recom and pentru astfel de cazuri utilizarea directivei <input> cu type=ckeckbox. Name permite specificarea numelui listei de selec ie. Atributul este util pentru a referi elementele n Javascript sau pentru a referi datele dup ce form a este trimis . Size poate fi utilizat i de sine stt tor, f r multiple, pentru a specifica num rul de op iuni vizibile. Dac valoarea sa este mai mic dect numrul de op iuni se va afia intr-un num r egal cu size, iar browserul va aduga autom at un scroll bar pentru a indica faptul c mai sunt op iuni ce nu sunt vizibile i a naviga printre ele. Indeplineste obiectivele educationale:

Indeplineste obiectivele educationale: 1 Simulare: Simularea 1 : Cursantul citete textul i hypertextele, urmrete anima ia i m erge mai departe. Satisface obiectivele educationale: 1

Cadrul 4 Nume Submoment Itemi de invatare Texte123 Directiva Textarea Descriere detaliata Text 1 : Directiva <textarea> perm ite introducerea de texte ce se ntind pe mai m ulte rnduri. La transmiterea c tre server textul poate fi liniarizat func ie de atributele utilizate. Directiva <textarea> definite un box n care se introduce text pe m ai m ulte linii. Un element "<textarea>" poate pstra un numr nelimitat de caractere, iar textul este cules cu un font fixat. Mrimea zonei se specific prin valorile atributelor cols i rows, valori care definesc numrul de coloane i numrul de rnduri sau cu propriet ile css heigth i width. Indeplineste obiectivele educationale: 1 Text 2 : Sarcin de lucru: Ac iona i butonul Play Indeplineste obiectivele educationale: 1 Text 3 : Sarcin de lucru: Pute i trece la sec iunea urmtoare. Indeplineste obiectivele educationale: 1

Material audiovizual :

Material audiovizual 1 :

Film care prezinta implementarea directive textarea Indeplineste obiectivele educationale: 1 Simulare: Simularea 1 : Cursantul citete textul i hypertextele, urmrete anima ia i m erge mai departe. Satisface obiectivele educationale: 1

Momentul 5
Contine Numele momentului: Durata: Descrierea momentului: Momentul descrie afi area paginilor n ferestre, utilizarea stilurilor n HTML i a caracterelor speciale. Descriere Alte elemente de design n pagini web 15 min
Indeplineste obiectivele educationale:

Cadrul 1 Nume Submoment Itemi de invatare Texte123 Afiarea paginilor n ferestre Descriere detaliata Text 1 : Sunt situa ii n care se dore te definirea n fereastra browserului a m ai m ultor cadre, fiecare dintre acestea putnd afia pagini diferite. n alte situa ii se dorete ca anumite pr i ale ferestrei browserului s fie fixe indiferent de navigarea n alte cadre. Cu ajutorul directivelor care definesc cadre se poate crea n fereastra browserului mai multe subferestre n care se pot deschide mai multe pagini Web sau docum ente HTML. n acest m od, fiecare docum ent HTML va fi nc rcat ntr-un cadru (frame), i fiecare cadru este independent de celelalte. Indeplineste obiectivele educationale: 1 Text 2 : Sarcin de lucru: Ac iona i cursorul pe cuvintele evideniate n text, apoi ac iona i butonul Play Indeplineste obiectivele educationale: 1 Text 3 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 1

Hipertexte

Hipertext 1 : Pentru a defini cadrele se creaza un fiier HTML special, n care marcajele definite de directivele < body> i </body> vor fi nlocuite de marcajele <frameset> i </frameset>. n interiorul blocului astfel marcat, fiecare cadru este introdus prin eticheta < fram e>, cu atributul obligatoriu src, care primete ca valoare adresa URL a documentului HTML ce va fi ncrcat n acel cadru. <html> <frameset cols="20%,*,30%"> <frame src="cadru1.htm " /> <frame src="cadru2.htm " /> < fram e src="cadru3.htm " /> </frameset> </html> Indeplineste obiectivele educationale: 1

Material audiovizual :

Material audiovizual 1 :

Crearea cadrelor Elemente care se vor regasi in anim atie: Directiva <frameset> accept dou atribute, un atribut ce define te l imea (cols), respectiv nla imea (rows) pentru fiecare frame. Combinarea directivelor <frameset> permite realizarea de cadre mixte, cadre care mpart fereatra browserului att pe orizontal ct i pe vertical . Valorile pentru cele dou atribute pot fi exprimate: n pixeli (specific numarul de pixeli), procentual (reprezent nd procentul din spa iul disponibil), * (restul spa iului disponibil). Indeplineste obiectivele educationale: 1

Simulare:

Simularea 1 : Cursantul citete textul i hypertextele, urmrete anima ia i m erge mai departe. Satisface obiectivele educationale: 1

Cadrul 2 Nume Submoment Itemi de invatare Texte123 Stiluri n HTML Descriere detaliata Text 1 : n versiunile recente HTML, toate instruc iunile de formatare pot fi incorporate n afara documentului ntr-o foaie separata de stil. Un astfel de procedeu este adecvat n situa ia n care un anumit stil este utilizat la mai multe pagini Web. Prin interm ediul unei foi externe de stil, se poate m odifica aspectul unei pagini de Web, pstrnd nealterat fiierul HTML ce descrie respectiva pagin. n plus, mai multe pagini HTML pot folosi acelai fi ier de stil, lucru obinuit pentru site-uri web pentru ca toate paginile s aib format similar. Indeplineste obiectivele educationale: 1 Hipertext 1 : Definirea stilului n care se form ateaz o pagin html de c tre browser poate fi fcut fie prin specificarea stilului intern n fiierul html, fie prin utilizarea de fiiere separate, acele fiiere de stil sau fiiere css. Cu toate acestea recomandrile w3 consortium descurajaz definirea de stiluri n interiorul fiierelor html. Indeplineste obiectivele educationale: 1 Material audiovizual 1 :

Hipertexte

Material audiovizual :

Crearea stilurilor in HTML Elemente care se vor regasi in film: Referirea la o foaie extern de stil se face cu ajutorul directivei <link>, plasat n header-ul documentului cu o structur ca cea de mai jos: <head> <link rel=stylesheet type=text/css href= adresa.css> </head> Atributul rel definete rela ia dintre documentul curent i resursa extern referit , n cazul de fa a este vorba de un stylesheet. Atributul poate avea o mul ime de alte valori pentru a indica faptul ca este un document alternativ, un index, un glosar de termeni, o sec iune, un capitol etc. Atributul type specific tipul documentului referit conform IANA MIME type. Uzual valoarea acestui atribut este stylesheet. Mai pot fi utilizate atributele: rev pentru a preciza relaia ntre documentul la care se face legtura i documentul curent, target pentru a preciza unde se va deschide respectivul link, href pentru a preciza adresa absolut sau relativ a documentului, media pentru a preciza care este categoria de echipam ent pe care se va reda docuem ntul (tv, proiector, print, braille etc.), hreflang pentru a preciza limba n care este scris documentul referit, charset pentru precizarea codificrii caracterelor n documentul referit. Dac se realizeaz un site web, pentru ca paginile sa aib acela i stil, este recomandat folosirea unui fiier de stil extern care va fi referit prin interm ediul directivei <link> n toate fi ierele htm l ce com pun site-ul.

referit prin interm ediul directivei <link> n toate fi ierele htm l ce com pun site-ul. n cazul n care se dore te un stil particular (unic) pentru un anumit document se folosete o foaie intern de stil ce este nglobat n fi ierul htm l. O foaie intern de stil se definete tot n headerul documentului HTML, cu ajutorul directivei <style>, prin specificarea propriet ilor diferitelor elem ente ale paginii, cum ar fi culoarea fondului, m rimea, tipul i culoarea fontului pentru titluri, setarea marginilor unor blocuri de text definite ca paragrafe etc. Indeplineste obiectivele educationale: 1 Simulare: Simularea 1 : Cursantul citete textul i hypertextele, urmrete anima ia i m erge mai departe. Satisface obiectivele educationale: 1

Cadrul 3 Nume Submoment Itemi de invatare Caractere speciale Descriere detaliata

Texte123

Text 1 : Am vazut c anumite caractere au interpretare special n HTML. n anumite situa ii se dorete ca aceste caractere s fie afiate de c tre browser i nu interpretate de acesta. De multe ori n paginile web se dorete i afiarea unor caractere ce nu pot fi introduse de la tastatur. Pentru astfel de situa ii a fost introdus un set de caractere speciale. Indeplineste obiectivele educationale: 1 Text 2 : Sarcin de lucru: Ac iona i cursorul pe cuvintele evideniate n text, apoi ac iona i butonul Play Indeplineste obiectivele educationale: 1 Text 3 : Sarcin de lucru: Pute i trece la sec iunea urmtoare. Indeplineste obiectivele educationale: 1

Hipertexte

Hipertext 1 : Unele caractere introduse de la tastatur, de exemplu mai mic, mai mare (< > ) au semnificaie special, fiind rezervate pentru a specifica browserului c delimiteaz o directiv. Dac se dore te ca browserul s afi eze astfel de caractere, ele f cnd parte integrant din pagina afi at se va foloseasi, n fi ierul surs, codurile acestor caractere. Un cod al unui caracter este com pus din trei pr i: semnul & constituie prefixul unui caracter special; numele caracterului sau semnul # urmat de numrul de cod al caracterului; sim bolul de ncheiere marcat de punct i virgul (;). De exem plu, pentru ca browserul s afieze caracterul mai mic (<), este nevoie ca n codul surs al fiierului HTML s se scrie fie &lt; fie &#60;, cele dou forme de introducere a caracterelor speciale. Caracter < > & Semnifica ie spa iu mai mic mai mare et (ampersand) sem n de citare (quotation) apostrof sec iune copyright marc nregistrat (registered trademark ) nm ul ire mpr ire Nume de cod &nbsp &lt &gt; &amp; &quot &sect; &copy; &reg; &times; &divide; Numr de cod &#160; &#60; &#62 &#38; &#34; &#39; &#167; &#169; &#174; &#215; &#247;

Indeplineste obiectivele educationale: 1

Material audiovizual :

Material audiovizual 1 :

Inserare caractere speciale Indeplineste obiectivele educationale: 1 Simulare: Simularea 1 : Cursantul citete textul i hypertextele, urmrete anima ia i m erge mai departe. Satisface obiectivele educationale: 1

Momentul 6
Contine Numele momentului: Durata: Descrierea momentului: Descriere Realizarea de pagini web cu editoare specializate 34 min Momentul prezint elementele editorului KompoZer i utilizarea acestuia.
Indeplineste obiectivele educationale:

Cadrul 1 Nume Submoment Itemi de invatare Texte123 Instalare i lansare editor KompoZer Descriere detaliata Text 1 : Mozilla KompoZer este un editor specializat pentru realizarea de pagini web ce nu necesit liceniere i poate fi desc rcat de pe Internet de la adresa http://kompozer.net/. El integreaz dezvoltarea de pagini web i managementul fiierelor web, este un editor wysiwyg i poate fi utilizat chiar de c tre nceptori pentru a crea rapid i uor pagini web. Indeplineste obiectivele educationale: 2 Text 2 : Sarcin de lucru: Ac iona i butonul Play Indeplineste obiectivele educationale: 2 Text 3 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 2 Material audiovizual : Material audiovizual 1 : Film cu instalarea editorului Mozilla KompoZer.

Indeplineste obiectivele educationale: 2 Simulare: Simularea 1 : Cursantul citete textul i urmrete film ul. Satisface obiectivele educationale: 2

Cadrul 2 Nume Submoment Itemi de invatare Interfaa editorului KompoZer Descriere detaliata

Texte123

Text 1 : Editorul HTML are o interfa grafic cu ajutorul creia utilizatorul poate crea pagini web utiliznd instrum entele grafice puse la dispozi ie, dar poate interveni i n codul surs a paginilor dezvoltate. Interfa a editorului KompoZer este alc tuit din urmtoarele elemente principale: Bara de meniu Bara de instrumente Dou bare de instrumente pentru formatare (Form at1 i Format2) Taburi pagin (pot fi deschise m ai m ulte pagini) Spatiul de lucru pagin Spatiul Site manager Bara mod de editare/vizualizare Bara de stare Indeplineste obiectivele educationale: 2 Text 2 : Sarcin de lucru: Ac iona i butonul Play. Indeplineste obiectivele educationale: 2 Text 3 : Sarcin de lucru: Pute i trece la sec iunea urmtoare. Indeplineste obiectivele educationale: 2

Imagini:

Imaginea 1 : Printscreen cu interfa a editorului. Se face zoom pe elementele principale enumerate n text 1 i apare o cast text pe ecran n care apare denum irea elementului prezentat.

Indeplineste obiectivele educationale: 2

Animatii:

Animatia 1 : Animatie in care sunt aduse in prim plan (printr-un efect de zoom) elementele principale din imaginea 1. Alte elemente ce se vor regasi in animatie: Un document se poate modifica n m odul editor prin una dintre metodele: modul Normal modul implicit n care se lucreaz pentru editarea paginii Web care se poate accesa ac ionnd butonul Design din bara de editare/vizualizare. n acest mod se scriu textele, se formateaz, se insereaz diferite elem ente (tabele, butoane, imagini, forme) sau se definesc hyperlinkuri. n acest mod editorul se com port sim ilar cu orice procesor de texte. modul HTML - se poate accesa ac ionnd butonul Source din bara de vizualizare, cu ajutorului c ruia se lucreaz direct n codul surs al documentului HTML. Se pot face modific ri ale codului surs care se vor reflecta n pagina afiat n modul Normal sau Preview. Din punct de vedere vizualizate modul Preview va afia pagina n m odul n care este vizibil n browser, n modul Normal sunt vizibile marginile (borderele) containnerelor n care sunt dispuse elem entele paginii, iar n modul HTML tag con inutul este afiat cu punerea n eviden a tag-urilor utilizate. Indeplineste obiectivele educationale: 2

Simulare:

Simularea 1 : Cursantul citete textul i urmrete anima ia. Satisface obiectivele educationale: 2

Cadrul 3 Nume Submoment Itemi de invatare Utilizare KompoZer Descriere detaliata

Texte123

Text 1 : Pentru a ncepe editarea unei pagini noi se acceseaz meniul File / New i ca urmare se deschide o pagin ce poart poart num ele untitled. Pot fi deschise mai multe pagini n tab-uri diferite ntre care ave i posibilitatea de a naviga. Editorul dispune de urm toarele ustensile: Format / Font; Format / Size; Format / Text style; Format / Text Color; Format / Writing Direction; Format / Paragraph; Format / List. Indeplineste obiectivele educationale: 2 Text 2 : Sarcin de lucru: Ac iona i cursorul pe cuvintele evideniate n text, apoi ac iona i butonul Play Indeplineste obiectivele educationale: 2 Text 3 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 2

Hipertexte

Hipertext 1 : Format / Font permite alegerea tipului de font sim ilar cu un editor de texte. Indeplineste obiectivele educationale: 2 Hipertext 2 : Format / Size permite specificarea mrim ii caracterelor dintr-un num r de op iuni (small, large, m edium, x-large etc.). Indeplineste obiectivele educationale: 2 Hipertext 3 :

Format / Text style permite specificarea stilului (bold, subscript, superscript etc), dar i am odului n care este afiat (citation, code, acronym etc.). Indeplineste obiectivele educationale: 2 Hipertext 4 : Format / Text Color deschide paleta de culori ce se poate alege pentru afiarea textului. Indeplineste obiectivele educationale: 2 Hipertext 5 : Format / Writing Direction perm ite selectarea scrieri de la dreapta la stnga sau de la stnga la dreapta. Indeplineste obiectivele educationale: 2 Hipertext 6 : Format / Paragraph specificarea faptului ca este body text, paragraf, tipuri de heading, sau sec iune sim ilar cu cea introdus de c tre directiva < div> . Indeplineste obiectivele educationale: 2 Hipertext 7 : Format / List permite toate op iunile pentru introducerea de liste n HTML. Elementele permise sunt liste nenumerotate (buletted), liste numerotate (Numbered), iar pentru listele de defini ii avem op iunile Term i Definition sem nificnd term enul i defini ia asociat termenului. Indeplineste obiectivele educationale: 2 Material audiovizual : Material audiovizual 1 : Film in care sunt prezentate principalele elem ente de formatare

Indeplineste obiectivele educationale: 2 Simulare: Simularea 1 : Cursantul citete textul i hypertextele, urmrete anima ia i m erge mai departe. Satisface obiectivele educationale: 2

Cadrul 4 Nume Submoment Itemi de invatare Inserarea de tabele Descriere detaliata

Texte123

Text 1 : Sunt posibile dou metode pentru inseratea de tabele: utiliznd icon-ul Table din bara de instrumente sau selectnd din bara de meniu Table / Insert . Ca urmare a oric rei ac iuni se va deschide fereastra Insert Table ce con ine trei tab-uri: Quickly, Precisely i Cell. Indeplineste obiectivele educationale: 2 Text 2 : Sarcin de lucru: Ac iona i cursorul pe cuvintele evideniate n text, apoi ac iona i butonul Play Indeplineste obiectivele educationale: 2 Text 3 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 2

Hipertexte

Hipertext 1 :

n tab-ul Quickly se poate marca cu ajutorul mouse-ului numrul de linii i num rul de coloane ale tabelei inserate. n figur se insereaz o tabel cu 2 rnduri i 6 coloane.

Indeplineste obiectivele educationale: 2 Hipertext 2 :

Tabul Precisely permite specificarea numrului de rnduri, a numrului de coloane, a l imii unei coloane exprim at n numr de pixeli sau n procente din l im ea ferestrei i a tipului de border. Tipul de border este specificat printr-o valoare numeric .

Indeplineste obiectivele educationale: 2 Hipertext 3 :

Tabul Cell permite specificarea tipului de aliniere a con inutului n celule att pe orizontal ct i pe vertical , a posibilit ii de migrare a coninutului pe m ai m ulte linii n aceeai celul, a spa iului de separare ntre celule.

Indeplineste obiectivele educationale: 2 Material audiovizual : Material audiovizual 1 :

Film inserare tabele Indeplineste obiectivele educationale: 2 Simulare: Simularea 1 : Cursantul citete textul i hypertextele, urmrete anima ia i m erge mai departe. Satisface obiectivele educationale: 2

Cadrul 5 Nume Submoment Itemi de invatare Linkuri i imagini Descriere detaliata

Texte123

Text 1 : Pentru a crea un link, fie se selecteaz instrumentul Link din bara de instrumente, fie apelm la m eniul Insert / Link. Am bele deschid aceeai fereastr care permite specificarea propriet ilor. O imagine prezent ntr-un document poate fi n acela i tim p un link care s refere un alt document, un marcaj sau o adres de em ail. Pentru a ini ia inserarea unei imagini avem la dispozi ie meniul Insert / Image sau instrum entul Image din bara de instrum ente. Am bele deschid fereatra Image Properties. Indeplineste obiectivele educationale: 2 Text 2 : Sarcin de lucru: Ac iona i butonul Play Indeplineste obiectivele educationale: 2 Text 3 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 2

Material audiovizual :

Material audiovizual 1 : Inserarea unei im agini

Indeplineste obiectivele educationale: 2 Simulare: Simularea 1 : Cursantul citete textul, urmre te anim a ia i merge mai departe. Satisface obiectivele educationale: 2

Cadrul 6 Nume Submoment Itemi de invatare Forme Descriere detaliata

Texte123

Text 1 : Pentru a insera o form se folosete meniul Insert / Form sau Form din bara de instrum ente. Ca rezultat, devin vizibile op iunile pentru definirea form ei i a elementelor specifice ce pot fi inserate ntr-o form. Indeplineste obiectivele educationale: 2 Text 2 : Sarcin de lucru: Ac iona i butonul Play Indeplineste obiectivele educationale: 2 Text 3 : Sarcin de lucru: Pute i trece la sec iunea urmtoare. Indeplineste obiectivele educationale: 2

Material audiovizual :

Material audiovizual 1 : Film ce ilustreaz utilizarea directivei form

Indeplineste obiectivele educationale: 2 Simulare: Simularea 1 : Cursantul citete textul, urmre te anim a ia i merge mai departe. Satisface obiectivele educationale: 2

Momentul 7
Contine Descriere
Indeplineste obiectivele educationale:

Numele momentului: Durata: Descrierea momentului:

Crearea unui site web 15 min Momentul prezint informaii de baz despre serviciile de gzduire web, procedeul de nregistrare i configurarea a unui nume de domeniu i ncrcarea paginilor pe web. Cadrul 1

Nume Submoment Itemi de invatare Texte123

Servicii de gzduire web Descriere detaliata Text 1 : O pagin web devine vizibil ntregii lum i num ai dac este componenta unui site web publicat. Un site web este form at dintr-o colec ie de documente pstrate pe un calculator ce este n perm anen conectat la Internet, documente ce pot fi accesate de oricine dispune de o conexiune Internet. O serie de elemente tehnice sunt im portante pentru alegerea serviciului de gzduire: Spa iul pe disc Limita de transfer. Suport FTP pentru transport. Indeplineste obiectivele educationale: 3 Text 2 : Sarcin de lucru: Ac iona i cursorul pe cuvintele evideniate n text. Indeplineste obiectivele educationale: 3 Text 3 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 3

Hipertexte

Hipertext 1 :

Pentru a crea un site web trebuie parcurse m ai m ulte etape. De regul, aceste etape sunt: 1. Realizarea docum entelor n form at HTML utiliznd editoare de texte clasice sau editoare specializate. 2. Gsirea unui serviciu de gazduire web. 3. nregistrarea unui num e de dom eniu i nregistrarea site-ului sub acel num e de dom eniu. 4. ncrcarea paginilor realizate de pe maina local pe site-ul public. Indeplineste obiectivele educationale: 3 Hipertext 2 : Spa iul pe disc m ajoritatea serviciilor de gazduire limiteaz capacitatea m axim a spa iului de stocare atribuit. Mrimea spa iului pe disc necesar pentru site-ul dezvoltat este dat de volum ul informatiilor oferite de site. Ave i n vedere faptul c publicarea de fotografi pe site necesit uzual volume de 50-250 kb pentru fiecare fotografie. Treuie s ave i n vedere i extinderea ulterioar a site-ului. La un site obinuit, de regul 20 Mb sunt suficien i. Indeplineste obiectivele educationale: 3 Hipertext 3 : Limita de transfer. Pentru ca browserul care a cerut pagina s ncarce con inutul ei datele sunt transferate de la server la browser. Limita de transfer este specificata uzual, ca fiind volumul datelor ce se pot transfera lunar de la serverul web. Pot fi servicii cu limit de transfer absolut (efect: nchiderea serviciului cnd s-a atins lim ita), cu lim it flexibil (la care se percep costuri suplimentare pentru traficul care dep ete lim ita) sau fr limit de transfer (nelimitat). Pentru un site personal o lim it de circa 2Gb lunar este suficient. Indeplineste obiectivele educationale: 3 Hipertext 4 : Suport FTP pentru transport. Paginile create i salvate pe calculatorul personal vor trebui mutate pe serverul web al serviciului de g zduire. Mijlocul uzual pentru transferul de fiiere ntre calculatoare prin Internet este File Transfer Protocol (FTP). Editorul specializat KompoZer utilizeaz protocolul FTP pentru a nc rca fiiere pe serverul web al serviciului de gzduire. Indeplineste obiectivele educationale: 3

Imagini:

Imaginea 1 :

Indeplineste obiectivele educationale: 3 Animatii: Animatia 1 : imaginea 1 este anim ata prin fluxuri luminoase de la dosare la server si in sens invers Indeplineste obiectivele educationale: 3 Simularea 1 : Animatia 1 apare in zona de continut. Cursantul cite te textul i hypertextele, i m erge mai departe. Satisface obiectivele educationale: 3

Simulare:

Cadrul 2 Nume Submoment Itemi de invatare Texte123 nregistrarea i configurarea unui nume de domeniu Descriere detaliata Text 1 : Dac se dore te un nume de domeniu pentru site-ul dezvoltat trebuie nregistrat numele de dom eniu dorit i configurat astfel nct s indice serverul web al serviciului de gazduire. Nu este obligatorie nregistrarea unui nume de domeniu, dar fr aceasta siteul nu este prsonalizat. Fr nregistrarea unui dom eniu adresa sa va fi ..numeserviciugazduire/NumeSite . Mai nti trebuie ales un nume de domeniu i apoi configurat astfel nct s indice corect site-ul. De regul aceste opera ii sunt f cute de cei care asigur serviciul de gzduire. Totui cteva inform a ii sunt utile. Poate fi ales doar un num e de dom eniu ce nu a fost nregistrat anterior de altcineva. Numele de domeniu este achizi ionat de la registratorii de nume de domenii. Indeplineste obiectivele educationale: 3 Text 2 : Sarcin de lucru: Ac iona i cursorul pe cuvintele evideniate n text, apoi ac iona i butonul Play Indeplineste obiectivele educationale: 3 Text 3 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 3 Hipertexte Hipertext 1 : Dac accesa i site-ul http://www.inregistrare-domenii.ro/ pute i verifica dac num ele pe care inten iona i sa-l atribui i site-ului dumneavoastra este liber. Indeplineste obiectivele educationale: 3

Material audiovizual :

Material audiovizual 1 : Film in care se prezinta verificarea numelui unui domeniu

Indeplineste obiectivele educationale: 3 Simulare: Simularea 1 : Cursantul citete textul i hypertextele, urmrete anima ia i m erge mai departe. Satisface obiectivele educationale: 3

Cadrul 3 Nume Submoment Itemi de invatare Texte123 ncrcarea paginilor web pe site Descriere detaliata Text 1 : Orice pagin web salvat pe propriul calculator poate fi nc rcat pe serverul web. Pentru aceasta deschidem n Mozilla Kom poZer pagina Forme KompoZer i alegem meniul File / Publish sau Publish din bara de instrum ente. Se va deschide o nou fereastr ce are dou tab-uri Publish si Settings. Indeplineste obiectivele educationale: 3 Text 2 : Sarcin de lucru: Ac iona i cursorul pe cuvintele evideniate n text, apoi ac iona i butonul Play Indeplineste obiectivele educationale: 3 Text 3 : Sarcin de lucru: Pute i trece la sec iunea urmtoare. Indeplineste obiectivele educationale: 3

Hipertexte

Hipertext 1 : Dac nu a i publicat nici o pagin , fereastra se va deschide cu eticheta de pagin (tab) Settings.

Indeplineste obiectivele educationale: 3 Material audiovizual : Material audiovizual 1 : Publicarea unui site web Indeplineste obiectivele educationale: 3

Simulare:

Simularea 1 : Cursantul citete textul i hypertextele, urmrete anima ia i m erge mai departe. Satisface obiectivele educationale: 3

Momentul 8
Contine Numele momentului: Durata: Descrierea momentului: Descriere Dezvoltarea unui site personal/familial 15 min Momentul prezint utilizarea abloanelor pentru siteuri, personalizarea ablonului i procedeul de publicare al unui site.
Indeplineste obiectivele educationale:

Cadrul 1 Nume Submoment Itemi de invatare Utilizarea abloanelor pentru site -uri Descriere detaliata

Texte123

Text 1 : Un tem plate (ablon) este reprezentat de o colec ie de pagini web generale, nefinalizate (sem ifabricate ) care pot fi uor personalizate pentru a crea site-ul dorit. Pot fi gsite pe Internet o multitudine de abloane, pregtite pentru diverse clase de site-uri, oferite fie gratuit fie avnd costuri m ici. Pot fi c utate abloane dup diverse categorii specifice tipului de site dezvoltat, ca de exemplu: Personal, Business, Evenim ente (ex. Cstorie), E-com merce etc. Unele dintre abloane sunt abloane profesionale, motiv pentru care sunt disponibile la pre uri ridicate. Indeplineste obiectivele educationale: 3 Text 2 : Sarcin de lucru: Ac iona i cursorul pe cuvintele evideniate n text, apoi ac iona i butonul Play Indeplineste obiectivele educationale: 3 Text 3 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 3

Hipertexte

Hipertext 1 : Utilizarea abloanelor ofer posibilitatea de a fi personalizate uor, chiar de un nceptor, necesitnd eventual o finisare final realizat de c tre specialiti. La momentul actual exist abloane pentru aproape orice produs: logo, introduceri, bannere, reclame, brouri etc. Sunt de asemenea disponibile template-uri n HTML, Adobe Photoshop i Macrom edia Flash. Modelele sunt att de bine particularizate, nct se poate crede c sunt chiar un website nu un ablon (tem plate) pentru dezvoltare. Indeplineste obiectivele educationale: 3

Material audiovizual :

Material audiovizual 1 : Utilizarea Yahoo SiteBuilder

Indeplineste obiectivele educationale: 3 Simulare: Simularea 1 : Cursantul citete textul i hypertextele, urmrete anima ia i m erge mai departe. Satisface obiectivele educationale: 3

Cadrul 2 Nume Submoment Itemi de invatare Personalizarea ablonului Descriere detaliata

Texte123

Text 1 : ablonul con ine 4 pagini: Index.html (home page), Aboutus.html, Contactus.html i Services.htm l. Fiecare pagin are construit un ablon ce poate fi adaptat. Prima pagin a site-ului este pagina Index.html. Sim ilar cu alte m edii pentru dezvoltare site-uri web dup ncarcarea ablonului selectat n pagin sunt vizibile urmtoarele zone: Bara de meniu Bara de instrumente Spatiul de ajutor (help) Spa iul de lucru n care este vizibil pagina de nceput Spa iul con inut site Zona de vizualizare pagin Indeplineste obiectivele educationale: 3 Text 2 : Sarcin de lucru: Ac iona i butonul Play Indeplineste obiectivele educationale: 3 Text 3 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 3

Imagini:

Imaginea 1 :

Indeplineste obiectivele educationale: 3 Animatii: Animatia 1 : Animatie care pune in evidenta principalele elemente ale aplicatie SiteBuilder Indeplineste obiectivele educationale: 3 Simularea 1 : Cursantul citete textul, urmre te anim a ia i merge mai departe. Satisface obiectivele educationale: 3

Simulare:

Cadrul 3

Nume Submoment Itemi de invatare Texte123

Publicare site Descriere detaliata Text 1 : SiteBuilder lucreaz offline realiznd toate func iile ca un editor de texte instalat pe propriul calculator. Ca urm are el este utilizat pentru construirea propriilor pagini pe propriul calculator. Pentru ca site-ul dezvoltat s poat fi vizitat de al i utilizatori acesta trebuie publicat. Pentru publicare paginile dezvoltate trebuiesc copiate din directorul local pe un server web Indeplineste obiectivele educationale: 3 Text 2 : Sarcin de lucru: Ac iona i butonul Play Indeplineste obiectivele educationale: 3 Text 3 : Sarcin de lucru: Pute i trece la sec iunea urmtoare. Indeplineste obiectivele educationale: 3

Material audiovizual :

Material audiovizual 1 : Film care ilustreaz m odul de publicare al unui site.

Indeplineste obiectivele educationale: 3 Simulare: Simularea 1 : Cursantul citete textul i hypertextele, urmrete anima ia i m erge mai departe. Satisface obiectivele educationale: 3

Momentul 9
Contine Numele momentului: Descriere
Indeplineste obiectivele educationale:

Numele momentului: Durata: Descrierea momentului:

Realizare site pentru o companie 15 min Momentul prezint modaliti de personalizare a unui ablon pentru a crea un site web pentru o companie i pregtirea acestuia pentru publicare.

Cadrul 1 Nume Submoment Itemi de invatare Texte123 De ce un site web pentru o companie? Descriere detaliata Text 1 : Studii recente au artat ca din ce n ce mai mul i cum p rtori apeleaz la Internet, vizitnd site-uri pentru a face un studiu de pia nainte de a achizi iona un produs. Ca o concluzie fireasc studiile au eviden iat, pentru com panii, necesitatea existen ei unui site web prin intermediul c ruia s prezinte serviciile i produsele pe care le ofer. Companiile stiu c la mom entul actual o firm care nu este prezent pe web, practic nu exist, toate com paniile avnd de c tigat din prezen a pe web. Indeplineste obiectivele educationale: 3 Text 2 : Sarcin de lucru: Ac iona i butonul Play Indeplineste obiectivele educationale: 3 Text 3 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 3 Material audiovizual : Material audiovizual 1 : Film ce prezint crearea unui site cu ajutorul unui ablon ce con ine 5 pagini: Pagina de start (Acas) - o scurt prezentare a companiei, principalele nout i, prom o ii i alte descrieri (fig. 9.1). Despre noi Prezentarea n detaliu a com paniei (fig. 9.2) Produse Prezentarea portofoliului de produse oferite (fig. 9.3) Servicii Oferta de servicii (fig. 9.4)

Servicii Oferta de servicii (fig. 9.4) Contact Furnizarea unui form ular pentru a transmite opinii catre companie (fig. 9.5).

etc. Indeplineste obiectivele educationale: 3 Simulare: Simularea 1 : Cursantul citete textul, urmre te anim a ia i merge mai departe. Satisface obiectivele educationale: 3

Cadrul 2 Nume Submoment Itemi de invatare Texte123 Pesonalizarea ablonului Descriere detaliata Text 1 : Cele cinci pagini ce constituie site-ul urmeaz a fi personalizate cu inform a ia dorit . Cu un simplu dublu clic pe fiecare zona a ablonului se intr n mod editare pentru a schimba con inutului paginii. Pot fi alese culorile dorite utiliznd instrumentele din bara de instrumente, pot fi inserate imagini, completarea tabelelor i redimensionarea acestora. Indeplineste obiectivele educationale: 3 Text 2 : Sarcin de lucru: Ac iona i butonul Play Indeplineste obiectivele educationale: 3 Text 3 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 3 Material audiovizual : Material audiovizual 1 : Se ilustreaz personalizarea uneia din paginile de la cadrul anterior. Indeplineste obiectivele educationale: 3 Simulare: Simularea 1 : Cursantul citete textul, urmre te anim a ia i merge mai departe. Satisface obiectivele educationale: 3

Cadrul 3 Nume Submoment Itemi de invatare Texte123 Pregtire pentru publicare site Descriere detaliata Text 1 : Totdeauna nainte de a publica un site este recom andat s se vizualizeze con inutul su pentru a fi siguri c este afi at a a cum s -a dorit. Pentru a vedea paginile nainte de a fi publicate n acelai mod n care vor fi v zute de c tre vizitatori parcurge i urm tori pai: Deschide i pagina index a site-ului Selecta i File / Preview in Browser Indeplineste obiectivele educationale: 3 Text 2 : Sarcin de lucru: Ac iona i butonul Play Indeplineste obiectivele educationale: 3 Text 3 : Sarcin de lucru: Pute i trece la sec iunea urmtoare. Indeplineste obiectivele educationale: 3 Material audiovizual : Material audiovizual 1 : Film ce ilustreaz paii pentru pregtirea i publicarea unui site. Indeplineste obiectivele educationale: 3 Simulare: Simularea 1 : Cursantul citete textul, urmre te anim a ia i merge mai departe. Satisface obiectivele educationale: 3

Momentul 10

Momentul 10
Contine Numele momentului: Durata: Descrierea momentului: E-commerce 20 min Momentul descrie conceptul de e-commerce, face comparaie ntre acesta i comerul tradiional, prezint modul de creare a unui magazin virtual dar i modalitile disponibile de plat i legislaia pentru comerul electronic. Cadrul 1 Nume Submoment Itemi de invatare Texte123 Introducere n e-commerce Descriere detaliata Text 1 : Comer ul electronic a aprut n jurul anilor 1990, mom ent n care sistemele de com er electronic se focalizau pe definirea i n elegerea func iilor n ac ivit ile de comer , a rolului entit ilor implicate i a cerin elor fiecarui grup implicat. Comer ul electronic poate fi definit din m ai m ulte perspective: Perspectiva on-line; Perspectiva comucaional; Procese de business; Servicii de business. Indeplineste obiectivele educationale: 4 Text 2 : Descriere
Indeplineste obiectivele educationale:

Pot fi identificate o serie de avantaje ale com er ului electronic dintre care am intim : Fr bariere legate de orar, un site de comer electronic este disponibil pentru operare 24 ore pe zi, 7 zile pe sptm n. Elim inarea interm ediarilor din lan ul dintre productor i utilizatorul final. Costurile pentru procesarea tranzac iilor sunt reduse. Automatizarea procesului are ca effect reducerea num rului erorilor. Este bine adaptat la globalizarea pie elor, vnz torul i cum prtorul se pot gsi la mari distan e geografice. Nu limiteaz gam a de produse sau servicii vndute. Promovarea unui produs poate fi fcut mult mai amplu i rapid. Ofer deschidere c tre noi modele de afaceri prin analiza statistic din propria baz de date. Existen a unui feedback de la clien i perm ite realizarea noilor produse n concordan cu cerin ele i atept rile clien ilor. Scderea tim pului de livrare a serviciilor, mai ales pentru acele servicii ce se livreaz online. Indeplineste obiectivele educationale: 4 Text 3 : Sarcin de lucru: Ac iona i cursorul pe cuvintele evideniate n text. Indeplineste obiectivele educationale: 4 Text 4 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 4

Hipertexte

Hipertext 1 : Cumprarea i vnzarea de produse i servicii de c tre com panii i consumatori folosind infrastructura Internet. Indeplineste obiectivele educationale: 4 Hipertext 2 : Livrarea de inform a ii, produse i servicii, dar i efectuarea pl ilor peste linii telefonice, re ele de calculatoare sau alte mijloace de comunica ie electronic. Indeplineste obiectivele educationale: 4 Hipertext 3 : Aplicarea noilor tehnologii electronice pentru automatizarea tranzac iilor i fluxurilor de afaceri. Indeplineste obiectivele educationale: 4 Hipertext 4 : Un instrument care permite lim itarea costurilor sim ultan cu mbunt irea calitii produselor i creterea vitezei de livrare a serviciilor. Indeplineste obiectivele educationale: 4

Imagini:

Imaginea 1 :

Indeplineste obiectivele educationale: 4 Simulare: Simularea 1 : Pe ecran apare imaginea 1. Butonul are un efect similar cu apasarea sa imaginea devine transparenta si apare textul 2. Satisface obiectivele educationale: 4

Cadrul 2 Nume Submoment Itemi de invatare Texte123 Comparaie comer tradiional, comer electronic Descriere detaliata Text 1 : Comer ul electronic se diferen iaza de cel tradi ional chiar dac exist i p r i com une. Se utilizeaz deseori term enul de comer electronic parial, func ie de nivelul de digitizare a trei factori: process, produs, agent de vnz ri. Dac cel pu in unul dintre factori nu este digitizat, adica este fizic, spunem ca avem un comer electronic parial, spre deosebire de cazul n care to i factorii sunt digitiza i caz n care numim comer electronic pur. Indeplineste obiectivele educationale: 4 Text 2 : Analiza ofertei existente pe pia din punctul de vedere al satisfaceri cerinei clientului. Negocierea clauzelor contractuale, a condi iilor de achizi ie, a serviciilor oferite, garanii etc. Faza de realizare a comenzii. Faza de pregtire i expediere a mrfii. Faza de achitare n concordan cu modalitatea de plat convenit ntre pr i la contractare. Servicii comerciale post-vnzare, numit i faz post-proces. Indeplineste obiectivele educationale: 4

Text 3 :

Gestionarea catalogului de produse este echivalentul analizei

Gestionarea catalogului de produse este echivalentul analizei ofertelor. Echivalentul fazei de negociere este faza de gestionare a co ului de produse pe care clientul dorete s-l com ande. Faza de realizare a comenzii din com er ul tradi ional are echivalent n com ertul electronic prin faza de prelucrarea comenzii. Faza de pregtire i expediere a com enzii este singura faz ce se desf oar n unele cazuri identic cu cea din com er ul tradi ional. Faza de achitare este rezolvat la comer ul electronic prin sistemul de pli electronice, transfer bancar sau ram burs la primirea mrfii. Faza post-vnzare presupene urmrirea rela iilor cu clien ii. Indeplineste obiectivele educationale: 4

Text 4 : Comer tradi ional vs. Com er electronic Indeplineste obiectivele educationale: 4 Text 5 : Sarcin de lucru: Ac iona i cursorul pe cuvintele evideniate n text. Indeplineste obiectivele educationale: 4 Text 6 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 4

Imagini:

Imaginea 1 :

Indeplineste obiectivele educationale: 4 Simulare: Simularea 1 : Pe ecran apare imaginea 1. Butonul are un efect similar cu apasarea sa imaginea devine transparenta si peste ea, ntr-un tabel mpr it n dou coloane apar textele 2 si 3. Titlul tabelului este Text 4. Satisface obiectivele educationale: 4

Cadrul 3 Nume Submoment Itemi de invatare Texte123 Crearea unui magazin electronic. Modalit i de plat Descriere detaliata Text 1 : Din punct de vedere tehnic una dintre ntrebrile majore pentru cei care deschid o afacere de comer electronic este modul n care primesc pl i de la clien ii de pe Internet ceea ce pare pentru m ul i o problem. Pentru ca o astfel de afacere s aib success, furnizorul trebuie s ofere clien ilor ct mai m ulte posibilit i de plat. Cu toate c cel mai utilizat m od de plat pe Internet este cartea de credit, un magazin trebuie s accepte i alte modalit i de plat ca de exemplu transfer bancar, ramburs sau mandat potal. Indeplineste obiectivele educationale: 4 Text 2 : Sarcin de lucru: Ac iona i butonul Play, apoi urm ai indica iile de pe ecran. Indeplineste obiectivele educationale: 4 Text 3 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 4 Hipertexte Hipertext 1 : Comer ul electronic n Rom nia bazat pe 3-D Secure este interm ediat de c tre Romcard SA i plata electronic presupune: Plasarea com enzii c tre procesatorul de card prin mijloace online; Transmiterea detaliilor pl ii care conine sum a, datele de identificare, com anda asociat ctre procesator pentru rezervarea sum ei aferente com enzii din contul pltitorului; Livrarea com enzii i ncasarea sumei prin intermediul procesatorului. Indeplineste obiectivele educationale: 4

Material audiovizual :

Material audiovizual 1 : Print screen Utilizare instrumentelor PayPal Merchant Account

sau film ce ilustreaz utilizarea acestui instrument. Indeplineste obiectivele educationale: 4 Simulare: Simularea 1 : Cursantul citete textul i hypertextele, urmrete anima ia i m erge mai departe. Satisface obiectivele educationale: 4

Cadrul 4 Nume Submoment

Nume Submoment Itemi de invatare Texte123

Legislaie comer electronic Descriere detaliata Text 1 : n Romnia avem Legea comer ului electronic care reglementeaz tranzac iile comerciale pe Internet. n aceast sec iune vom prezenta cteva dintre elem entele ce trebuie avute n vedere atunci cnd ne hotrm s realizm o afacere on line. Indeplineste obiectivele educationale: 4 Text 2 : 1. Orice activitate de vnzare on line este o activitate comercial care se desf oar n cadrul unei firm e, a unei asocia ii fam iliar sau de ctre o persoan fizic autorizat . 2. Informarea consumatorului este un element principal att n legisla ia privind comer ul electronic, ct i n cea aferent contractelor la distan. Consum atorul trebuie s afle clar i direct principalele informa ii cu privire la ce se prezint i se comercializeaz online. 3. Atta timp ct nu exist acceptul explicit al destinatarului mesajele pe e-mail sunt interzise. nc lcarea dispozi iilor din legea comer ului electronic i din legea privind prelucrarea datelor cu caracter personal i protec ia vie ii private n sectorul com unica iilor electronice reprezint contraven ie. 4. Un contract ncheiat on line este recunoscut de legisla ia romna. Marcarea csu ei Sunt de accord cu termenii reprezint acordul liber exprimat al pr ii i are aceeai sem nifica ie cu o clauz ntr-un contract. 5. Capitolul IV din legea comerului electronic stipuleaz condi iile de exonerare a rspunderii furnizorilor de servicii n societatea informa ionala. Ele nu sunt direct aplicabile la un site de comer electronic, dar sunt utile pentru activit i adiacente (forum , com etarii ale utilizatorilor la produsele afiate, legturi la alte pagini web). 6. Bunul achizi ionat poate fi returnat n termen de 10 zile, echivalent cu denun area uniulateral a contractului la distan f r invocarea vreunui motiv. Costurile ce pot fi suportate ce c tre cumprtor sunt cheltuielile directe de returnare a produselor. 7. Dispozi ii privind executarea contractului. Termenul legal pentru executarea contractului la distan, specific comerului electronic este de 30 zile calendaristice. Dac acest lucru nu se ntm pl, cu toate c termenul este generos, magazinul trebuie s informeze consum atorul de acest aspect i s returneze cuantum ul

consum atorul de acest aspect i s returneze cuantum ul contractului, dac este cazul. O dispozi ie util pentru com ercian i este inclus n legea romna: n cazul neexecutrii, produsul poate fi nlocuit de unul similar, n condi iile n care acest lucru este prevzut n m od expres n contract. 8. Protec ia datelor cu caracter personal. Nu putem discuta de comer electronic fr a fi implicat n prelucrarea datelor cu caracter personal (fie la nregistrare, fie pentru plat sau expediere). Legea 677 din 21 noiembrie 2001 stabilete condi iile generale cu privire la prelucrarea datelor cu caracter personal, care sunt acestea i obliga iile operatorilor cate le m anipuleaz. 9. Num ele domeniului i conflictul cu m arca nregistrat . ntreaga promovare a unui site de comer electronic va fi legat de un site web i alegerea numelui de dom eniu nu trebuie s creeze vreo problem juridic legat de utilizarea lui. 10. Dreptul de autor. Toate componentele ce sunt protejate de dreptul de autor ce intr n site sunt fie proprietate, fie pot fi utilizate fr restric ii. Indeplineste obiectivele educationale: 4 Text 3 : Sarcin de lucru: Urm ariti textul si apoi treceti la sec iunea urmtoare. Indeplineste obiectivele educationale: 4

Imagini:

Imaginea 1 :

Indeplineste obiectivele educationale: 4

Simulare:

Simularea 1 : Pe ecranul din dreapta apare ca fundal imaginea 1 printr-un efect la alegerea dezvoltatorului. Peste imaginea 1 (care devine transparenta) apare textul 2 care se deruleaz cu scroll. Satisface obiectivele educationale: 4

Momentul 11
Contine Numele momentului: Durata: Descrierea momentului: Descriere Dezvoltare magazin online utliznd instrumentele PayPal 20 min Momentul prezint utilizarea unui template pentru magazinul virtual, integrarea codului html pentru Add to Cart, utilizarea aplica iei expert de la PayPal i efectuarea plii. Cadrul 1 Nume Submoment Itemi de invatare Utilizarea unui template pentru magazin virtual Descriere detaliata
Indeplineste obiectivele educationale:

Texte123

Text 1 : Ne propunem s dezvoltm un magazin virtual sim plu pentru comercializarea on line a florilor i a diverselor accesorii pentru flori. Vom utiliza instrumentele puse la dispoziie de PayPal astfel c se va p stra pe site-ul PayPal coul de cum prturi i tot acesta se va ocupa de procesarea tranzac iei. Indeplineste obiectivele educationale: 5 Text 2 : Sarcin de lucru: Ac iona i butonul Play, Indeplineste obiectivele educationale: 5 Text 3 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 5

Material audiovizual :

Material audiovizual 1 : Film ce ilustreaz utilizarea unui tem plate pentru magazin virtual care va respecta pa ii: n directorul specificat avem cele dou fiiere index.html i accesorii.htm l. Directorul Im agini pstreaz imaginile ce au fost sau vor fi ncarcate n cele dou pagini. ntre cele dou pagini exist legturi care permit trecerea de la o pagin la alta. Designul celor dou pagini este similar. Un articol sau un accesoriu are asociat un nume, pre ul de vnzare, o scurt descriere, o im agine asociat i binen eles butonul prin care se adaug n coul de cumprturi. n partea de sus mai exist butonul View Cart prin care se poate vizualiza coul de cum prturi la orice m oment. ntruct aceast dezvoltare utilizeaz instrumentele puse la dispoziie de PayPal tratarea sa va fi f cut tot pe site-ul PayPal. Indeplineste obiectivele educationale: 5

Simulare:

Simularea 1 : Cursantul citete textul, urmre te anim a ia i merge mai departe. Satisface obiectivele educationale: 5

Cadrul 2 Nume Submoment Itemi de invatare Texte123 Integrarea codului HTML pentru Add to cart Descriere detaliata Text 1 : Pentru adugarea produselor n coul de cum prturi lng fiecare produs trebuie adugat cte un buton Add to Cart, buton a c rui apsare va trimite utilizatorul la siteul PayPal n paralel cu adugarea produsului n co. Indeplineste obiectivele educationale: 5 Text 2 : Sarcin de lucru: Ac iona i butonul Play, Indeplineste obiectivele educationale: 5 Text 3 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 5 Material audiovizual : Material audiovizual 1 : film utilizarea aplica iei expert paypal

Indeplineste obiectivele educationale: 5

Simulare:

Simularea 1 : Cursantul citete textul, urmre te anim a ia i merge mai departe. Satisface obiectivele educationale: 5

Cadrul 3 Nume Submoment Itemi de invatare Texte123 Vizualizarea coninutului co ului virtual Descriere detaliata Text 1 : Pe lng butonul de adaugare n co orice site de com er electronic trebuie s aib i o facilitate de vizualizare a con inutului coului virtual. Pentru aceasta se construiete un buton care s ofere o astfel de func ionalitate, numit de obicei View Cart . Indeplineste obiectivele educationale: 5 Text 2 : Sarcin de lucru: Ac iona i butonul Play Indeplineste obiectivele educationale: 5 Text 3 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 5

Material audiovizual :

Material audiovizual 1 : Film pentru adaugarea codului pe site-ul propriu:

Pentru particularizarea datelor de intrare transmise la ap sarea butonului codul generat va nlocui codul din ablon utiliznd aceea i procedur cu cea de nlocuire a codului pentru butonul Add to Cart. Codul pentru butonul View Cart este afi at mai jos: <form target="paypal" action= https://www.paypal.com/cgi-bin/webscr method="post"> <input name="cm d" value= "_cart" type= "hidden"> <input name="business" value= "adr mail" type="hidden"> <input name="display" value="1" type="hidden"> <input src= url_buton name= "submit" alt="Plata PayPal sigura si rapida" border="0" type="image"> </form> Indeplineste obiectivele educationale: 5

Simulare:

Simularea 1 : Cursantul citete textul, urmre te anim a ia i merge mai departe. Satisface obiectivele educationale: 5

Cadrul 4 Nume Submoment Itemi de invatare Texte123 Efectuarea pl ii Descriere detaliata Text 1 : Procesarea tranzac iei de plat va fi realizat pe site-ul PayPal. Aceasta este ini iat prin apsarea butonului Check Out avnd ca efect afiarea paginii n cadrul c reia cumprtorul alege m odalitatea de plat. Aceast pagin con ine n partea stng un sumar al com enzii ce cuprinde produsele com andate pre ul unitar i valoarea ntregii tranzac ii. Con inutul coului de cumprturi mai poate fi m odificat prin apsarea pe legturile Update sau Remove f r a se ntoarce pe site-ul magazinului. Indeplineste obiectivele educationale: 5 Text 2 : Sarcin de lucru: Ac iona i butonul Play, Indeplineste obiectivele educationale: 5 Text 3 : Sarcin de lucru: Pute i trece la sec iunea urmtoare. Indeplineste obiectivele educationale: 5

Material audiovizual :

Material audiovizual 1 :

Procesarea tranzac iei de plat Indeplineste obiectivele educationale: 5 Simulare: Simularea 1 : Cursantul citete textul, urmre te anim a ia i merge mai departe. Satisface obiectivele educationale: 5

Momentul 12
Contine Descriere
Indeplineste obiectivele educationale:

Numele momentului: Durata: Descrierea momentului:

Dezvoltarea unui magazin online cu procesare Romcard 10 min Momentul prezint procesatorul de tranzacii online n Romnia.

Cadrul 1 Nume Submoment Itemi de invatare Texte123 Procesare de tranzacii online n Romnia Descriere detaliata Text 1 : Romcard este cel m ai cunoscut furnizor de servicii pentru tranzactiile cu carduri bancare. Romcard ofer autorizarea tranzac iilor cu carduri, decontarea i procesarea tranzac iilor cu carduri, soluii 3D Secure pentru bncile acceptatoare i emitente de servicii e-commerce Verified by Visa i MasterCard SecureCode. Indeplineste obiectivele educationale: 5 Text 2 : Sarcin de lucru: Ac iona i butonul nainte pentru a continua. Indeplineste obiectivele educationale: 5

Hipertexte

Hipertext 1 : Romcard pune la dispozi ie documenta ia tehnic necesar ce va fi utilizat de c tre comerciant. Com erciantul va parcurge urmtorii pa i: Com erciantul contacteaz una dintre bncile certificate 3Dsecure de ctre Romcard cu care va ncheia un contract de procesare ecom merce, contact care stabilete condi iile com erciale i condi ii tehnice de procesare. Banca transm ite contractul ncheiat c tre Romcard, contract care stipuleaz termenii financiari i condi ii de procesare. Termenii financiari includ comisione, taxe etc. Contractul este valabil pentru orice card Visa sau MasterCard indiferent de cine este emis. Dup procesarea contractului Romcard contacteaz clientul pentru realizarea configurrii tehnice. Rom card furnizeaz docum enta ia tehnic pentru implementarea sistemului i ofer suportul tehnic pentru implementarea modulului de plat cu card. La finalizarea cu succes a modulului de plat , Rom card va inform a banca i com erciantul i va transmite cererea de nregistrare la Visa i MasterCard. Procesul de nrolare dureaz cel mult dou spt mni. Indeplineste obiectivele educationale: 5

Imagini:

Imaginea 1 :

Indeplineste obiectivele educationale: 5 Simulare: Simularea 1 : Pe ecranul din dreapta apare ca fundal imaginea 1 printr-un efect la alegerea dezvoltatorului. Apar diferite lumini pe harta desfasurata a pam antului Satisface obiectivele educationale: 5

Cadrul 2 Nume Submoment Itemi de invatare Crearea modului de plat 3D Secure Descriere detaliata

Texte123

Text 1 : Pentru a asigura o securitate ct m ai m are a tranzac iilor a fost dezvoltat serviciul 3D Secure, serviciu ce este implem entat i de Romcard. Acest serviciu este un rspuns la necesitatea dezvoltrii unor m ijloace prin care s verifice dac persoana care face o plat pe Internet este de inatorul cardului. 3D Secure este un standard de securitate dezvoltat i oferit de Visa i MasterCard sub denumirile Verified by Visa, respectiv MasterCard SecureCode. Indeplineste obiectivele educationale: 5 Hipertext 1 : ntr-o schem 3D Secure avem practic trei domenii cu roluri bine precizate: Issuer gestioneaz serviciul de nregistrare a de intorului de card (inclusiv verificarea identit ii fiecrui de intor la nregistrare) i autentific de intorul de card la plata online. Acquirer asigur c vnztorul participant la tranzac ia on line opereaz sub o n elegere i furnizeaz procesarea tranzac iei pentru autentificare. Interoperability faciliteaz schimbul de informa ii ntre cele dou dom enii.

Hipertexte

Indeplineste obiectivele educationale: 5

Imagini:

Imaginea 1 :

Indeplineste obiectivele educationale: 5 Simulare: Simularea 1 : Im aginea 1 apare pe fundal in zona de continut printr-un efect ales de dezvoltator. Satisface obiectivele educationale: 5

Momentul 13
Contine Descriere
Indeplineste obiectivele educationale:

Numele momentului: Durata: Descrierea momentului:

Evaluare 60 min Moment de evaluare.

1, 2, 3, 4, 5

Cadrul 1 Nume Submoment Itemi de invatare Activitate de evaluare Tipul activitatii de evaluare 1 : Item cu alegere multipl Introducere n realizaraea paginilor web Descriere detaliata Descriere tipuri:

Descrierea activitatii de evaluare 1 : Selecta i categoriile m odului de organizare a documentelor: organizare liniar organizarea distributiv organizare ierarhic organizarea neliniar organizarea asociativ Indeplineste obiectivele educationale: 1 Tipul activitatii de evaluare 2 : Item de tip lacunar Descriere tipuri:

Descrierea activitatii de evaluare 2 : Vizitarea unei pagini web de pe un calculator conectat la Internet presupune pornirea unui browser web i introducerea numelui de domeniu al site-ului vizitat n bara de adrese a browserului. Observatie. Cuvintele ingrosate se trag dintr-o lista pentru a completa fraza. Indeplineste obiectivele educationale: 1

Cadrul 2 Nume Submoment Itemi de invatare Activitate de evaluare Tipul activitatii de evaluare 1 : Item de tip lacunar Introducere n limbajul HTML Descriere detaliata Descriere tipuri:

Descrierea activitatii de evaluare 1 : Organizarea asociativ a inform a iilor presupune definirea unor noduri, reprezentate de concepte, i a unor arce ca leg turi ntre noduri, reprezentnd rela iile logice dintre concepte . Se ob ine astfel un graf sau o re ea semantic. Informa iile tiin ifice se preteaz cel mai bine la acest tip de organizare, iar suportul adecvat de implementare este oferit de calculatoarele electronice conectate la Internet. Observa ie: Cuvintele ingrosate se trag dintr-o lista pentru a completa textul Indeplineste obiectivele educationale: 1 Tipul activitatii de evaluare 2 : Item cu alegere multipl Descrierea activitatii de evaluare 2 : Documentele HTML necesit formatare, care poate fi: - la nivel de document; - la nivel de paragraf; - la nivel de browser; - la nivel de caracter; Indeplineste obiectivele educationale: 1 Descriere tipuri:

Cadrul 3 Nume Submoment Itemi de invatare Alte componente n pagini HTML Descriere detaliata

Activitate de evaluare

Tipul activitatii de evaluare 1 : Item cu alegere dual

Descriere tipuri:

Descrierea activitatii de evaluare 1 : O list neordonat , fr numere de ordine (unordered list ) ncepe cu directiva -<ul> -< ol> Indeplineste obiectivele educationale: 1 Tipul activitatii de evaluare 2 : Item cu alegere singular Descriere tipuri:

Descrierea activitatii de evaluare 2 : Selecta i sintaxa corect a unei ancore ce refer un alt docum ent: -< h href=url>Text afisat in pagina HTML printe </h> -<a href=url>Text afisat in pagina HTML printe </a> -< h src=url>Text afisat in pagina HTML printe </h> Indeplineste obiectivele educationale: 1 Tipul activitatii de evaluare 3 : Item de tip lacunar Descriere tipuri:

Descrierea activitatii de evaluare 3 : n HTML, obiectele de tip tabel se introduc cu ajutorul directivei <table>, prin directiva <th> se specific headerul, directiva <tr > permite mpr irea tabelului n linii, directiva <td> este utilizat pentru a mpr i liniile n celule. Informa ia afiat ntr-o celula poate fi de tip text, im agine, liste sau alte obiecte grafice. Observatie. Cuvintele ingrosate se trag dintr-o lista pentru a completa fraza. Indeplineste obiectivele educationale: 1

Cadrul 4 Nume Submoment Itemi de invatare Activitate de evaluare Tipul activitatii de evaluare 1 : item de tip pereche Componente dinamice in HTML Descriere detaliata Descriere tipuri:

Descrierea activitatii de evaluare 1 : Action are sem nifica ie de url i specific unde sunt trim ise datele culese n forma cnd acestea sunt trim ise. Adresa specific fie o adres absolut fie o adres relativ fa de loca ia n care este pstrat pagina curent . Method specific m odul n care sunt trimise datele la pagina specificat prin atributul action. Datele pot fi trimise ca variabile url cu metoda get sau ca http prin metoda post. Indeplineste obiectivele educationale: 1 Tipul activitatii de evaluare 2 : Item cu alegere singular Descriere tipuri:

Descrierea activitatii de evaluare 2 : Prin directivele input se definesc elemente n care se culeg informa iile introduse de utilizatori n form a. Cu ajutorul directivei select se introduc n pagini web liste de selec ie numite i combobox. Directiva textarea permite introducerea de texte ce se ntind pe m ai multe rnduri. La transmiterea c tre server textul poate fi liniarizat func ie de atributele utilizate. Observatie: In locul cuvintelor ingrosate o sa avem componenta drop down in care se regasesc cele 3 elem ente Indeplineste obiectivele educationale: 1

Cadrul 5 Nume Submoment Itemi de invatare Activitate de evaluare Tipul activitatii de evaluare 1 : Item cu alegere singular Alte elemente de design n pagini web Descriere detaliata Descriere tipuri:

Descrierea activitatii de evaluare 1 : Directiva <frame> poate avea cteva atribute: src specific pagina ncarcat, frameborder specific dac cadrul are border, marginhigh specific distan a ntre con inut i marginile cadrului top/bottom, marginwidth distan a ntre con inut i m arginile cadrului pe orizontal (left/right), scrolling dac se asociaz bar pentru scroll, noresize pentru a nu permite modificarea dinam ic a dim ensiunii cadrului. Observatie: In locul cuvintelor ingrosate o sa avem componenta drop down in care se regasesc cele 3 elem ente Indeplineste obiectivele educationale: 1 Tipul activitatii de evaluare 2 : Item cu alegere dual Descriere tipuri:

Descrierea activitatii de evaluare 2 : Referirea la o foaie extern de stil se face cu ajutorul directivei <link>, plasat n header-ul documentului cu o structur ca cea de mai jos: <link src=stylesheet tip=text/css href=adresa.css> <link rel=stylesheet type=text/css href=adresa.css> Indeplineste obiectivele educationale: 1

Cadrul 6 Nume Submoment Itemi de invatare Activitate de evaluare Tipul activitatii de evaluare 1 : Item de tip lacunar Realizarea de pagini web cu editoare specializate Descriere detaliata Descriere tipuri:

Descrierea activitatii de evaluare 1 : KompoZer integreaz dezvoltarea de pagini web i managementul fiierelor web, este un editor wysiwyg i poate fi utilizat chiar de c tre nceptori pentru a crea rapid si uor pagini web. Cuvintele ingrosate se trag din lista Indeplineste obiectivele educationale: 2

Cadrul 7 Nume Submoment Itemi de invatare Activitate de evaluare Tipul activitatii de evaluare 1 : item de tip pereche Crearea unui site web Descriere detaliata Descriere tipuri:

Descrierea activitatii de evaluare 1 : Care este ordinea corecta pentru a crea un site web: 1. Realizarea docum entelor n form at HTML utiliznd editoare de texte clasice sau editoare specializate. 2. Gsirea unui serviciu de gazduire web. 3. nregistrarea unui num e de dom eniu i nregistrarea site-ului sub acel num e de domeniu. 4. ncrcarea paginilor realizate de pe ma ina local pe site-ul public. Indeplineste obiectivele educationale: 2

Cadrul 8 Nume Submoment Itemi de invatare Activitate de evaluare Tipul activitatii de evaluare 1 : Item de tip lacunar Dezvoltarea unui site personal/familial Descriere detaliata Descriere tipuri:

Descrierea activitatii de evaluare 1 : Un template este reprezentat de o colec ie de pagini web generale, nefinalizate care pot fi uor personalizate pentru a crea site-ul dorit. Se va completa de la tastatura cuvantul ingrosat Indeplineste obiectivele educationale: 3

Cadrul 9 Nume Submoment Itemi de invatare Activitate de evaluare Tipul activitatii de evaluare 1 : Item de tip lacunar Realizare site pentru o companie Descriere detaliata Descriere tipuri:

Descrierea activitatii de evaluare 1 : Un site web este o form de publicitate on-line pentru companie, similar cu publicitatea facut prin pliante, reclam e publicate n ziare sau cataloage de produse. Pentru a crea un site informaional pentru o companie este foarte sim plu s pornim de la un ablon care are un astfel de con inut i poate fi personalizat din punctul de vedere al preferinelor i specificului companiei promovate. Obs. Cuvintele ingrosate se trag dintr-o lista Indeplineste obiectivele educationale: 3

Cadrul 10 Nume Submoment Itemi de invatare Activitate de evaluare Tipul activitatii de evaluare 1 : item de tip pereche E-commerce Descriere detaliata Descriere tipuri:

Descrierea activitatii de evaluare 1 : Comerul electronic poate fi definit din m ai m ulte perspective: Perspectiva on-line: Cumprarea i vnzarea de produse i servicii de c tre com panii i consumatori folosind infrastructura Internet. Perspectiva comuca ional: Livrarea de inform a ii, produse i servicii, dar i efectuarea pl ilor peste linii telefonice, re ele de calculatoare sau alte mijloace de comunica ie electronic . Procese de business: Aplicarea noilor tehnologii electronice pentru automatizarea tranzac iilor i fluxurilor de afaceri. Servicii de business: Un instrum ent care perm ite limitarea costurilor sim ultan cu mbunt irea calit ii produselor i creterea vitezei de livrare a serviciilor. Se vor potrivi perspectivele cu definiia acestora Indeplineste obiectivele educationale: 4

Cadrul 11 Nume Submoment Itemi de invatare Activitate de evaluare Tipul activitatii de evaluare 1 : Item de tip lacunar Dezvoltare magazin on line utiliznd instrumente PayPal Descriere detaliata Descriere tipuri:

Descrierea activitatii de evaluare 1 : Pentru adugarea produselor n coul de cumprturi lng fiecare produs trebuie adugat cte un buton Add to Cart, buton a c rui apsare va trim ite utilizatorul la site-ul PayPal n paralel cu adugarea produsului n co. Aparent butonul face o legtur la o alta pagin, dar func ia sa nu este cea a unui simplu link. Pentru acest buton s-a utilizat tehnica specific pentru paginile dinamice ce utilizeaz eticheta form. Cuvintele ingrosate se trag dintr-o lista Indeplineste obiectivele educationale: 5

Cadrul 12 Nume Submoment Itemi de invatare Activitate de evaluare Tipul activitatii de evaluare 1 : Item de tip lacunar Dezvoltarea unui magazin on line cu procesare Romcard Descriere detaliata Descriere tipuri:

Descrierea activitatii de evaluare 1 : 3D Secure este un sistem prin care se cre te securitatea tranzac iilor online prin solicitarea unei parole la fiecare plat on line. Se va completa de la tastatura cuvantul ingrosat Indeplineste obiectivele educationale: 5