Curs Bazele Web Design

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

BAZELE WEB-DESIGN Table of Contents BAZELE WEB......................................................................................................................................... 2 Bazele WWW............................................................................................................................. 3 Tehnologii de dezvoltare web .................................................................................................... 6 Dezvoltarea paginilor Web......................................................................................................... 8 Ghid HTML ...................................................................................................................................... 11 Introducere la HTML ................................................................................................................ 12 Server-Side Scripting ....................................................................................................................... 30 Introducere în Server Side Scripting ......................................................................................... 31 Introducere în PHP .................................................................................................................. 32 Introducere în baze de date ..................................................................................................... 35 Content Management Systems ........................................................................................................ 38 Prezentare ............................................................................................................................... 39 Noţiuni de bază ....................................................................................................................... 40 Adăugarea Conţinutului ........................................................................................................... 51 Comunicarea ........................................................................................................................... 59 Crearea Execiţiilor ........................................................................................................................... 67 Introducere în XML .................................................................................................................. 68 Introducere în Flash ................................................................................................................. 72 Exerciţii interactive .................................................................................................................. 75 Ce este un exerciţiu interactiv? ................................................................................................ 75 Forums - Wikis – Blogs..................................................................................................................... 80 Forumuri.................................................................................................................................. 81 Wikis ....................................................................................................................................... 84 Bloguri ..................................................................................................................................... 86 Anexa A – Tabel de Simboluri ................................................................................................... 87

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Despre acest curs Acest curs este format din suport de curs electronic si aplicatii pentru WEB şi se adresează studenţilor, profesori, formatori, cercetători, cursanţii adulţi, factorii de decizie de învăţământ, educaţia şi formarea profesională a formatorilor şi a altor profesionişti din domeniul educaţional. Cursul "Bazele Web Design-ului" prezinta principiile de web design care au ca domenii de instruire: analiza publicul, aspectul ierarhie şi tehnici de proiectare, integrare software-ul, şi publicare. Aceasta carte electronic va aduce conţinut de învăţare multimedia bogat pe ecranele Tablet PC-ului. Fiind o formă de conţinut digital, acest rezultat va oferi metodele de punere în aplicare şi utilizare efectivă didactice a tehnologiilor inovatoare în domeniul mobile de învăţare. În ceea ce priveşte competenţele cheie de la Lisabona, aceasta iesire va fi legata de dezvoltarea competenţelor digitale.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

BAZELE WEB În această secţiune, vom vedea ce este WWW,cum funcţionează, şi o scurtă prezentare a tehnologiilor ce stau la baza sa. La sfarşitul acestei secţiuni vei fi capabil să :  înţelegi mecanismul de baza  enumeri cel puţin 4 limbaje folosite în web  să alegi unealta potrivită de dezvoltare

Nivel: Începător Timp Estimat : 20min

Bazele WWW

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Dedesupt sunt câteva întrebari, cu răspunsuri, referitoare la nişte aspecte de baza ale WWW şi Internet. Răspunsurile vor conferi o baza. Cuvintele sau frazele îngroşate se refera la WWW. Ce este WWW (World Wide Web)?

World Wide Web (WWW sau scurt "Web") este un sistem de documente hipertext interconectate, denumite pagini web şi accesate prin Internet. Paginile Web pot conţine text, imagini, video, şi alte elemente multimedia. Se navighează între ele cu hiperlink-uri (en: hyperlinks). Paginile web pot fi vizionate cu un browser web.

Ce este un browser web?

Un browser web este o aplicaţie soft care permite unui utilizator să afişeze text, imagini, video, muzica, jocuri şi alte informaţii găsite într-o pagină web din WWW (Word Wide Web) localizată într-o reţea locală.Textul şi imaginile dintr-o pagină web conţin deobicei hiperlink-uri către aceeaşi sau altă pagină web. Un website este un set de pagini web interconectate. Browserele web permit utilizatorului să acceseze uşor informaţia de pe mai multe pagini web prin parcurgerea acestor link-uri. Ce este un server web?

Serverul Web este un computer care furnizeaza pagini web, ceea ce implica că acele pagini web sunt stocate pe el. Fiecare server are o adresa IP (Internet Protocol) şi posibil un nume de domeniu. O adresa IP arată astfel: 150.140.142.81. Totuşi, este mai intuitiv să foloseşti un URL (Uniform Resource Location), care include un nume de domeniu. De exemplu, dacă tastezi URL-ul http://www.upatras.gr/index.html in browser, acesta trimite o cerere serverului al cărui nume de domeniu este upatras.gr. Acest server apoi intoarce pagina numită index.html şi o trimite browserului.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Ce este un Hyperlink?

Un hyperlink, descrie o referinţa care poate fi accesata direct din cadrul unui document hypertext. Această zonă din care hyperlinkul poate fi activat se numeşte ancora. Ţinta este locul către ceea ce indica link-ul,aceasta putând fi o altă locaţie în cadrul aceleaşi pagini sau aceluiaşi document, o alta pagină sau document, sau o locaţie specifică în interiorul unei alte pagini sau document- depinde de tipul de hypertext.Acţiunea de a insera un hyperlink în alt loc poartă denumirea “a pune link”.

Ce este un Hypertext?

Hypertext (vine de la "more than just" - “mai mult decât” text) este o forma de text care confera o funcţionalitate mai bogată comparativ cu textul normal, prin faptul că permite utilizatorului capacitatea de a explora noi link-uri către alte pagini legate(linked) de cuvinte sau imagini specifice. Spre deosebirede textul normal hypertext poate conţine tabele, imagini şi alte elemente ce faciliteaza o prezentare. Oricare dintre acestea poate fi un hyperlink. Alte forme de interacţiune pot fi deasemenea prezente, spre exemplu o bula conţinând text poate să apară când mouse-ul trece pe o anumita zona, un video poate fi pornit sau oprit, sau un form poate fi completat şi trimis.Cel mai bun exemplu de hypertext astazi este World Wide Web.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Tehnologii de dezvoltare web

Aici sunt prezentate cele mai comune tehnologii folosite pentru a crea un Website. Înainte de a incepe crearea unei pagini web ar trebui să consideraţi tehnologiile care urmeaza a fi folosite. HTML

HTML (Hypertext Markup Language) este un limbaj de marcat folosit pentru a encoda pagini Web. Suplineşte browser-ului informaţii despre aşezarea şi prezentarea componentelor. HTML este limbajul Web-ului, şi fiecare dezvoltator ar trebui să aibe cunosţinte de baza asupra sa. CSS - Cascading Style Sheets -Stiluri în cascada

Stilurile definesc cum elementele HTML vor fi afişate. Stilurile externe permit schimbarea aparenţei şi aşezarii fiecarei pagină din site-ul tău, prin simpla editare a unui singur document. XML – Unealta pentru a descrie datele

XML NU ESTE un inlocuitor pentru HTML. XML descrie date, în timp ce HTML afişeaza date. XML rulează pe mai multe platforme de soft şi are o unealta independenta de hardware pentru a transmite date JavaScript - Scripting pe partea de client

Scripting pe partea de client se referă la programarea comportamentului unui browser.     

JavaScript permite designerilor HTML o unealtă de baza la programare JavaScript poate face textul dinamic intr-o pagină Web JavaScript poate reacţiona la evenimente JavaScript poate modifica elemente HTML JavaScript poate fi folosit pentru a valida date.

ASP or PHP – Scripting pe partea de server

Scripting pe partea de server este despre programarea unui serviciu pe Internet în urma căruia se poate livra mai mult conţinut dinamic. Cu scripting pe partea de server se pot:

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

        

Edita dinamic, schimba sau adăuga noi elemente Răspunde la cereri ale utilizatorului Accesarea unei baze de date şi întoarcerea rezultatului Accesa fisiere şi intoarcerea unui rezultat în browser Transformarea XML în date HTMl şi intoarcerea rezultatului Personaliza o pagină web pentru a o face mai folositoare fiecarui utilizator în parte A conferi securitate la accesul paginilor web Diferenţia output-ul în functie de browser Limita pe cat posibil transmiterea de date în retea

Prelucrarea datelor cu SQL

SQL este limbajul standard pentru accesarea şi manipularea bazelor de date.SQL este folosit pentru a accesa şi manipula date în MySQL, SQL Server, MS Access, Oracle, Sybase, DB2, şi alte sisteme baze de date. Cunoştinţele SQL sunt importante pentru oricine vrea să stocheze sau să obţina date dintr-o baza de date.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Dezvoltarea paginilor Web De ce soft ai nevoie pentru a dezvolta pagini HTML?

Desi HTML-ul unei pagini web poate fi scris în orice editor de text (ex : Notepad), editoare specializate de HTMLpot oferi o usurinţa în scrierea codului şi o funcţionalitate sporită.

Nici nu e nevoie să stii HTML ca să faci o pagină web. Exista o mulţime de forme în care poti edita HTML: text, object şi WYSIWYG (prezentat mai jos) Ce ofera editoarele de sursa?

Editoarele text de HTML de regula oferă formatare de text (highlighting). Templateuri, Text, toolbar-uri, şi keyboard shortcuts pot insera rapid elemente şi structuri HTML. Există unelte de auto completare care pot fi de un real ajutor. Folosirea editoarelor text presupune cunoaşterea de HTML şi de orice alte tehnologii care urmeaza a fi folosite ca de exemplu CSS, Javascript şi limbaje de scripting pe partea de server. În imaginea ataşata se poate vedea un document html într-un editor html care permite formatarea corespunzatoare (highlighting) a textului.

Ce este o unealta WYSIWYG ?

What You See Is What You Get (WYSIWYG) – ceea ce vezi e ceea ce primeşti – editoarele html ofera o interfaţa de editare care se aseamană cu pagina vazuta la

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

final intr-un browser web. Deoarece utilizarea unui editor wysiwyg nu necesită cunoştinţe html sunt mai uşor de folosit de un începător.

Ce este un editor de web-site-uri?

Acete programe nu sunt concepute doar pentru a face pagini web, ci şi pentru managementul site-ului. Ele permit crearea temelor pentru site, găsirea şi înlocuirea de text de-a lungul mai multor pagini web, etc. Ele sunt mult mai puternice decat editoarele de pagini web comune dar sunt, de regula, mai greu de folosit de către începători. Aceste instrumente “automate” genereaza adesea cod în limbaj HTML de o mai slaba calitate sau crează fisiere enorme şi structuri de directoare complicate. De aemenea, odata ce ai creat o pagină folosind unul din aceste intrumente WYSIWYG, ar putea fi dificil sau chiar imposibil să o editezi cu un alt instrument, din cauza unor extensii HTML care nu corespund standardelor. Web-ul este construit cu HTML şi, cu cat ştii mai mult despre el, cu atât vei întelege mai bine cum să proiectezi pagini funcţionale şi atractive. Editoarele “prietenoase” precum FrontPage pot fi bune pentru a face rapid cateva pagini, dar daca intenţionezi să aprofundezi web design-ul, vei avea nevoie de o cunosţinte solide în HTML-ul de baza.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Ghid HTML Aceasta sectiune este un ghid pentru învatarea HTML-ului, limbajul folosit în crearea paginilor web. La sfârsitul acstei secţiuni, vei fi capabil să:  shimbi font-ul textului  adaugi imagini paginilor tale web  creezi tabele, liste şi forme  pagini web cu CSS

Nivel: Incepator Timp estimat: 2h

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Introducere la HTML

Ce este HTML? HTML este prescurtarea pentru HyperText Markup Language. 

 

HyperText este metoda prrin care navighezi pe web – apăsând pe text special numit hyperlink care te direcţionează către alte pagini. Prin hyper se înţelege neliniar – adică, poţi ajunge către orice loc de pe Internet cand vrei apăsând pe link-uri – nu există ordine prestabilită în care se fac lucrurile. Markup este ceea ce extensiile HTML fac textului din interiorul lor. Îl marcheză ca un anumit tip de text (text în italic, de exemplu). HTML este un limbaj, avand codul şi sintaxa sa, ca orice alt limbaj.

Ce este o pagină HTML? O pagină HTML este un document care foloseşte limbajul HTML pentru a indica modul în care va fi format textul cand va fi afişat - adică va diferenţia textul pe categorii: linkuri, titluri, paragrafe, liste etc, - şi pentru a însoţi textul cu forme interactive, imagini încadrate şi alte obiecte Fundamental, este un fişier text cu extensia “.html” sau “htm”. Aşa arată o pagină web simpla atunci cand este deschisa cu un browser web.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Cum arată codul HTML?

Consideră că avem o pagină web simpla salvată într-un fişier de tip text numit “simplepage.html”. La stanga poti vedea pagina web aşa cum arata cand este deschisa cu un browser web. La dreapa poti vedea codul paginii web, asa cum arata cand este deschisă cu un editor de text.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Elinda Beach Elinda Elinda este un golf bine adăpostit în partea vestica a insulei, lângă Anavatos Este o minunată plajă cu mult nisip şi ape limpezi, ideala pentru înot şi scufundări. Nu departe de mal se afla o ruina a unei vechi nave romane. Numele Elinda sau Alinda deriva de la vechiul cuvânt grec "alios" care înseamnă “soldat”.

Tag-uri de bază Ce este un tag?

HTML utilizează "tag-uri" pentru a specifica modul în care textul va fi formatat atunci când se va folosi un web browser. Tag-urile sunt înconjurate de paranteze în unghi. Tag-urile vin de cele mai multe ori în perechi. În fiecare pereche, există o etichetă de deschidere "" şi o etichetă de închidere " '. Tag-ul de deschidere conţine un nume de etichetă şi, uneori, atributele tag-ului. El îi spune browser-ului că aţi dori să efectuaţi o acţiune de formatare din acel punct al textului. Eticheta de închidere spune browser-ului, cu "/" (numit “forward slash”), urmată de acelaşi nume al tag-ului, că doriţi să opriţi acţiunea la acel punct al textului.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Cum pot schimba stilul in text?

Bold (îngroşat) Pentru a face cuvintele să apară boldate (bold), înconjuraţi textul cu taguri . Trenul Consecinţelor ⇨ Trenul Consecinţelor

Italic (înclinat) Pentru a face cuvintele să pară înclinate spre dreapta, înconjuraţi textul cu taguri . Aproape Onest ⇨ Aproape Onest

Subscript (indice) Pentru a face cuvintele să apară ca jumătate din înălţime şi 50% sub linie, înconjuraţi textul cu taguri . În ora mea cea mai întunecată ⇨ În ora mea cea mai întunecată

Superscript (exponent) Pentru a face cuvintele să apară ca jumătate din înălţime şi 50% peste linie, înconjuraţi textul cu taguri . Poduri arzânde ⇨ Poduri arzânde

Cum pot folosi un heading? O poziţie în text este creată cu tag. Există de fapt 6 poziţii de tag-uri: (cel mai mare) şi (cel mai mic).

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Text formatat

HTML markup solicitat

Înapoi în zi

Înapoi în zi

Tornada sufletelor

Tornada sufletelor

Adevărul trebuie zis

Adevărul trebuie zis

Cum pot decora textul? Există o mulţime de lucruri pe care le puteţi face pentru a schimba aspectul fontului. Primul lucru este să utilizaţi un font diferit. Cum puteţi face asta? Puteţi face acest lucru folosind atributul face astfel:

Elysian Fields⇨ Elysian Fields Aveţi aici mai multe fonturi pe care le puteţi încerca: Arial Arial Black Arial Narrow Book Antiqua Bookman Old Style Century Gothic Comic Sans MS Courier New Garamond Times New Roman Verdana

Puteţi de asemenea să schimbaţi mărimea fontului. Faceţi acest lucru folosind atributul mărime (size) ,astfel:

Sângele eroilor ⇨ Sângele eroilor Insomnie ⇨ Insomnie Voi fi acolo ⇨ Voi

fi acolo

Şi în sfârşit,puteţi schimba culoarea textului, folosind atributul pentru culoare (color).Astfel:

Trezire grosolană ⇨ Trezire grosolană

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Paragrafe şi linia nouă Un nou paragraf se începe cu tag-ul , şi poate fi, încheiat, opţional, cu tag-ul invers al alineatului. O linie nou este creată de tag. Priviţi exemplul următor:

Text formatat

HTML markup solicitat

Ultima linie din paragraf.

Ultima linie din paragraf. Prima linie dintr-un paragraf nou.

Prima linie dintr-un nou paragraf. O linie din text. Pe o linie nouă.

O din text. Pe o linie nouă.

Cum pot adăuga Caractere speciale?

Există mai multe moduri de a adăuga simboluri pentru paginile dumneavoastră. Probele următoare ilustrează utilizarea fiecărei metode de cod. Pentru a plasa un simbol într-o pagină HTML, copiaţi şi inseraţi codul corespunzător în dosarul în care doriţi simbolul.

HTML Cod Numeric exemplu: pentru a face o acoladă,{ tastaţi { Font Face Tag exemplu: pentru a scrie xA, tastaţi x

∈A HTML Literal Code exemplu: pentru a face simbolul gradului, °,tastaţi ° Este prezentat un tabel ce conţine simbolurile şi codurile corespunzătoare ale acestora în Appendix A.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Structura de bază a unei pagini HTML

Care este structura de bază a unui document HTML?

Aceasta este structura de bază a unei pagini HTML: ... ...

Tag-urile HTML Un document HTML începe cu un element HTML care conţine HEAD şi BODY

Pentru a începe o pagină HTML:   

Tastează pentru a începe partea HTML din documentul dumneavoastră Lasaţi câteva spaţii pentru crearea restului paginii dumneavoastră Tastaţi

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Tag-ul HEAD Secţiunea head este locul unde vei defini titlul paginii tale, incluzând informaţii despre pagina ta, pentru motoarele de căutare precum Google, stabileşte locaţia paginii, adaugă stil foii tale şi scrie script-urile.

Pentru a crea secţiunea head:   

Imediat după deschiderea tag-ului html, tastaţi . Lasă câteva spaţii pentru secţiunea capului de pagină. Tastează .

Tag-ul BODY Body documentului tău HTML include conţinutul paginii tale de Web, care este, partea pe care vizitatorii tăi o vor vedea, inclusiv textul şi elementele de grafică. Pentru a crea cuprinsul:   

După ultimul tag, tastează Lasă câteva spaţii pentru conţinutul paginii tale de Web Tastează

Crearea Listelor şi Tabelelor Cum pot crea o listă? Acesta este modul prin care poţi crea o listă simplă: 1. 2. 3. 4. 5.

Tastează pentru o listă ordonată sau pentru a începe o lista neordonată. Tastează pentru a începe primul item al listei. Tastează textul care urmează să fie inclus în item. Tastează pentru a completa fiecare item al listei. Continuă acest proces introducând caţi mai mulţi itemi ai listei care sunt necesari pentru a-ţi completa lista ordonată.Nu există o limită a numărului de itemi pe care-i poate avea o listă. 6. Pentru a încheia lista., introdu un sfârşit or pentru a marca tag-ul de început după ultimul item al listei.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Exemplu de listă:

Cum pot crea un tabel? Un tabel este un element structurat care constă în rânduri şi coloane de celule. Ai posibilitatea să introduci orice fel de conţinut doreşti în aceste celule: text, imagini, şi chiar alte tabele.

Acesta este modul în care puteţi crea un tabel simplu:

1. 2. 3. 4. 5. 6.

Tastează tag. Tastează pentru a marca începutul primului rând. Tastează pentru a marca începutul celulei. Tastează conţinutul celulei. Completează celula introducând un tag de închidere: Repetă paşii 3. până la 5. pentru fiecare celula pe care doreşti să o adăugaţi rândului. Când rândul dvs. este terminat, mută-te la următoarea linie şi introduceţi un tag de încheiere aliniat vertical cu tag-ul de deschidere , pentru a crea lizibilitate.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

celula 1 celula 2 celula 3 7. Repetă paşii 2. până la 7. pentru fiecare rând. 8. Dupa ce completezi numărul de rânduri dorit, tastează tag-ul pentru a termina tabelul. Exemplu de tabel:

Frames

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Ce sunt frames? Cu frames, poţi afişa mai mult de un document HTML în aceeaşi fereastră de browser.Fiecare document HTML se numeşte frame şi fiecare frame este independentă de celelalte.



Acesta este un exemplu de o pagină Web care foloseşte frames:

Poţi vedea o linie verticală ce divide ecranul în două parţi. Cea din stânga este o bară laterală în timp ce cea din dreapta este o listă cu anunţuri pentru o lecţie de zoologie. Acestea sunt două documente separate HTML pe care, până în acest

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

moment, ar trebui să fii capabil să le creezi singur, deci haide să ne concentrăm pe codul pe care urmează să-l foloseşti pentru a pune toate acestea într-o pagină de Web.

Tag-ul Frameset Tag-ul defineşte modul în care se poate împărţi fereastra în frame-uri. Fiecare frameset defineşte un set de rânduri / coloane. Valorile rândurilor / coloanelor indică cât din suprafaţa ecranului va fi ocupată de fiecare rând / coloană. Tag-ul frame Tag-ul defineşte ce document HTML trebuie să fie pus în fiecare frame. În exemplul de mai sus, am creat un set de frames cu două coloane. Prima coloană ocupă 15% din browser-ul total al ecranului, iar a doua coloană ocupă restul. Documentul HTML "sidebar.html" este pus în prima coloană, şi documentul HTML "content.html" este pus în a doua coloană. Reţine că, dacă doreşti să previi un utilizator să redimensioneze un frame (prin tragerea de cadru) adaugă cuvintele “noresize” frame-ului pe care doreşti să-l blochezi. Mai mult, după cum se poate observa în exemplul de mai sus, tag-ul lipseşte. Aceasta este din cauză că nu se poate utiliza tag-ul , împreună cu tag-ul .

Stilul CSS Ce este CSS?

CSS vine de la Cascading Style Sheets. În timp ce HTML oferă paginilor tale de Web, structura lor de bază, CSS (Cascading Style Sheets) defineşte aspectul lor.

Ce este stilul unei foi? Stilul unei foi este pur şi simplu un fişier text care conţine una sau mai multe reguli care determină modul în care anumite elemente din pagina ta de Web trebuie să fie afişate. Codul CSS se poate găsi într-un fişier separat şi poţi doar să link-ezi acest fişier într-o pagină HTML, astfel încât să se modifice cu uşurinţă aspectul său. Desigur, CSS ar putea fi scris doar în interiorul paginii HTML, în cazul în care constă în câteva linii de cod.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Care este structura Regulilor de Stil? O regulă de stil este alcătuita dintr-un selector (care indică ce elemente vor fi formatate), precum şi o declaraţie (care descrie formatarea care ar trebui să fie executată). În declaraţie trebuie separate de punct şi virgulă multiplele perechi de proprietate/valoare. h1{ color;red; background:yellow; }

Selectorul este aici h1. Ai observat, probabil, că este tag-ul pentru antet (cel mai mare). De asemenea, avem două declaraţii, "color: red" şi "background: yellow". Prima declaraţie stabileşte culoarea antetului (culoarea textului), în roşu, iar al doilea set, stabileşte culoarea de fundal a antetului, în galben. În cazul în care vom adăuga acest cod CSS pentru o pagină HTML, ori de câte ori vom crea un antet utilizând tag-ul , aceasta va avea atributele definite mai sus. În loc de h1 am putea folosi alte elemente, de exemplu body, p, etc şi putem de asemenea folosi şi alte declaraţii, de exemplu font-family: Arial; (schimbarea fontului în Arial).

Cum pot crea un Style Sheet Extern? Stilul extern al foii, este un fişier CSS, ce conţine codul CSS ca acela explicat în exemplul de mai sus. Extensia fişierelor CSS este .css . Aceste fişiere pot fi legate de pagini HTML prin definirea unui tag corespunzator în interiorul tag-ului a paginii HTML, astfel:

Dacă vom adăuga acest cod HTML la pagina noastră, va încărca stilurile definite în fişierul “mystyle.css" şi apariţia HTML nostru se va schimba cu uşurinţă. Îţi poţi denumi fişierele CSS oricum doreşti. Aici, după cum poţi vedea, acesta este numit "mystyle.css" şi este situat în acelaşi folder în care se află şi fişierul nostru HTML.

Cum pot crea un Style Sheet Intern? O foaie de stil internă ar trebui să fie utilizată atunci când un singur document are un stil unic. Poţi defini stiluri interne, în secţiunea head, prin utilizarea tag-ul , astfel:

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

hr {color:sienna} p {margin-left:20px} body {background-image:url("imagini/back40.gif")}

Crearea Formularelor

Cum pot crea un formular simplu? Un formular este pur şi simplu o zonă care poate să conţină câmpuri de formulare. Câmpurile din formular sunt obiecte care permit vizitatorilor de a introduce informaţii – de exemplu casete de text, meniuri derulante sau butoane radio. Cele mai comune utilizări ale formularelor sunt sondajele, formulare on-line de comandă, feedback-ul, sau chiar orice pagină Web, în care este necesar un input din partea utilizatorului, în vederea îndeplinirii unei sarcini date sau de a furniza un serviciu utilizatorului.

Aceasta este modalitatea prin care poţi crea un formular simplu:

Cum pot crea un buton radio?

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Butoanele radio sunt utilizate atunci când doreşti ca utilizatorul să selecteze una dintr-un număr limitat de opţiuni şi trebuie să aibă o "valoare". Input-urile radio trebuie să aibă acelaşi “nume”, deoarece ele nu fac decât să-i dea utilizatorului o opţiune posibilă. Este posibil să oferim mai multe opţiuni utilizatorului cu input-urile radio, oferindu-le un alt “nume”.

Acesta este modul in care creezi un radio box simplu:

Cum pot crea un checkbox? Checkbox sunt utilizate atunci când vrei ca utilizatorul să selecteze una sau mai multe opţiuni dintr-un număr limitat de variante şi permite utilizatorilor tăi de a face mai mult de o selecţie într-o listă. Acesta este modul in care se creaza un checkbox simplu:

Un exemplu al unui drop down menu:

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Drop down menu sunt probabil cele mai flexibile obiecte pe care le poţi adăuga formularelor. Avantajul unui drop down menu, în comparaţie cu radio buttons sau cu check box, este acela ca ocupă mai puţin spaţiu. Aceasta este modalitatea prin care creezi un drop down menu simplu:

Multimedia

Cum pot adăuga o imagine paginii mele de Web?

Să presupunem că avem fişierul de imagine "cat.jpg", şi vrem să îl punem pe site-ul nostru. Pentru a face acest lucru, vom folosi tag-ul oriunde dorim în pagina HTML, pentru ca imaginea să fie afişată. Codul, în forma sa cea mai simplă, este ca acesta: Singurul impediment pentru ca acest cod sa funcţioneze, este acela că avem o imagine cu numele de “cat.jpg”, în acelaşi folder cu pagina noastră de HTML. În cazul în care imaginea este într-un director diferit, tastăm atât calea, cât şi numele fişierului, de exemplu, daca îl păstrăm într-un folder separat, numit “imagini”, codul va fi: Cum pot schimba mărimea unei imagini in pagina mea de Web?

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Prin specificarea valorilor atributelor "înălţime" şi "lăţime", putem modifica dimensiunea imaginii în pagina noastră de Web. Pentru a modifica aceste atribute, trebuie doar sa le adaugi la codul tău tag-ul, astfel:

Acest atribut poate lua valori diferite, putând specifica alinierea imaginii, după cum e desemnat prin valoare. Valorile ar putea fi: "top", "middle", "bottom", left", "center", "right".

Cum pot folosi o imagine ca fundal? Acest lucru este un pic diferit de ceea ce am văzut mai sus, deoarece pentru a seta o imagine ca fundal nu trebuie modificate atributele tagului imagine (), dar trebuie schimbat tag-ul corpului (). Acest lucru este logic, pentru că tag-ul defineşte corpul principal al paginii web, care este, de fapt, cea mai mare unitate vizibilă a corpului documentului. Deci, ce trebuie să facem este să definim imaginea de fundal a paginii web, astfel:

Observaţi că modul implicit pentru browser pentru a afişa imaginea este în funcţie de dimensiunea sa iniţială, deci, dacă este vorba de o imagine mică, aceasta se va repeta şi va crea un efect de teracotă.

Cum pot încorpora alte tipuri de date multimedia în pagina mea de web? Puteţi adăuga diverse tipuri de date multimedia la pagina dvs. Web într-un mod similar cu adăugarea de imagini. În loc de a utiliza tag-ul, care este utilizat numai pentru imagini, puteţi utiliza tag-ul , care este mai generic. Tot ce trebuie să faceţi este să definţi tipul de datelor multimedia pe care vreţi să le incorporaţi.

Cum pot să adaug sunet la pagina mea web? Acesta este un exemplu:

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Cu type = "audio / x-MPEG" transmitem browser-ului Web că este dorit ca un fişier audio să fie ataşat, fişier de tip mpeg(mp3). Apoi, cu data = "yoursound.mp3" vom transmite numele (adresa) fişierului care trebuie ataşat. Cum pot adăuga fişiere video la pagina mea web? Acesta este un exemplu:

Cu type = "video / MPEG" transmitem browser-ului Web că este dorit ca un fişier video să fie ataşat, fişier de tip mpeg(mp3). Apoi, cu data = "test.mpg" vom transmite numele (adresa) fişierului care trebuie ataşat. De asemenea, se pot specifica înălţimea şi lăţimea cu care acesta să apară în pagina web.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Server-Side Scripting (scripting “din partea server-ului”) În această secţiune, vom vedea cum putem crea pagini web dinamice, capabile să se conecteze la bazele de date.

La sfârșitul acestei secțiuni, veți putea:  explica mecanismul de bază a Server-Side Scripting-ului cu PHP.  crea o bază de date simplă.

Nivel: Avansat Durată estimată: 1h

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Introducere în Server Side Scripting Ce este Server Side Scripting? Scripting-ul “din partea serverului” (SSS) este o tehnologie web, în care cererea unui utilizator este îndeplinită prin rularea unui script direct de pe serverul paginii web curente. Acesta este de obicei folosit pentru a oferi unei pagini Web interactive acces la baze de date sau alte tipuri de date înmagazinate. Care este scopul Server Side Scripting-ului? Server Side Scripting-ul este folosit la "programarea" comportamentului unui server. Serverele pot edita dinamic, modifica sau adăuga orice conţinut la o pagină Web. Acest limbaj este pur şi simplu un instrument pentru crearea paginilor web dinamice prin rularea de script-uri de pe server. Server Side Scripting-ul este cel mai frecvent utilizat pe site-uri care conţin componente interactive pentru utilizatori. Cum funcţionează Server Side Scripting-ul? Atunci când un utilizator solicită o pagină web, serverul returnează acest pagină, dar dacă pagina conţine un server-side script, script-ul din interiorul paginii HTML este executat de server înainte ca aceasta să fie returnată la browser-ul ca şi cod HTML pur. Serverul se poate, de exemplu, să răspundă la query-urile utilizatorului sau a datelor transmise de la form-uri HTML şi poate accesa bazele de date, returnând datele cerute de utilizatori.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Ce limbi tehnologii / sunt folosite?

Unele dintre cele mai frecvent folosite limbaje server side scripting sunt: • ASP - ASP.NET • ColdFusion Markup Language • Java prin intermediul paginii JavaServer • PHP • Perl • Python • SQL

Introducere în PHP Introducere PHP PHP e prescurtarea pentru: (H)ypertext (P)reprocessor (P) şi este un limbaj de programare pentru construirea site-uri web dinamice. Acesta este un server-side scripting care poate fi încorporat într-o pagina HTML. Spre deosebire de o pagină obişnuită HTML, PHP este numai server-side, ceea ce înseamnă că nu poate interacţiona direct cu computerul

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

utilizatorului. Un script PHP nu este trimis direct la un client de către server; în schimb, este analizat de modulul de PHP pe server. Acesta funcţionează mână în mână cu serverul dvs. Web pentru a procesa codul sursă al unei pagini înainte ca această pagină să fie trimisă la browser-ul utilizatorului. Acest lucru înseamnă că merge prin intermediul paginii de sus în jos, în căutarea secţiunilor de PHP, pe care va încerca să le execute. Cum funcţionează PHP? PHP permite serverului web să facă mult mai mult decât să returneze pagini HTML pentru utilizator, cum ar fi efectuarea de calcule complexe, lucrul cu baze de date, şi multe altele. Scripturile PHP sunt executate pe server si pot crea dinamic codul HTML care generează pagina Web. PHP si MySQL se combină pentru a uşura crearea de pagini web dinamice interactive. HTML poate crea pagini foarte bine formatate. Cu un adaos de PHP si MySQL aveţi posibilitatea să culegeţi date de la utilizatorii dvs., şi face multe lucruri pe care HTML singur nu le poate susţine. Frumuseţea PHPului ca şi limbă este faptul că acesta este conceput pentru a fi utilizat împreună cu HTML.

Exemplu de cod PHP Într-o pagină HTML, codul PHP este delimitat de tag-urile speciale pentru PHP. Se începe un bloc de cod PHP cu "" Când un vizitator deschide o pagină, serverul efectuează procesele de cod PHP şi apoi trimite datele HTML de ieşire (nu codul PHP propriu-zis) în browser-ul vizitatorului.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

PHP şi baze de date Una din caracteristicile definitorii ale PHP este uşurinţa cu care vă puteţi conecta la baze de date cât şi de a le manipula. PHP poate interacţiona cu baze de date pentru a stoca informaţii de la utilizator, cât şi să preia informaţii care pot fi afişate pentru utilizator. PHP pune în aplicare funcţii predefinite pentru conectarea la o gamă largă de sisteme de baze de date cum ar fi: • MySQL • Oracle • MSSQL • Interbase şi multe altele.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Introducere în baze de date

Ce este o bază de date? O baza de date este o colectie organizată de informaţii care este formată din înregistrările aferente. Aceasta este aranjată într-un mod care face cât mai uşoară obţinerea de informaţii. Fiecare înregistrare din baza de date este compusă dintr-un set de câmpuri, care conţin elementele individuale de informaţii pentru un anumit element. Baza de date este stocată în tabele. Fiecare tabel este identificat printr-un nume (de exemplu, "Pontaj" sau "Cărţi"). Acesta este un exemplu de tabel:

Ce este SQL?

Structured Query Language (SQL) cuprinde una din pietrele de temelie ale arhitecturii moderne a bazelor de date. SQL defineşte metodele utilizate pentru a crea şi manipula baze de date relaţionale pe toate platformele majore. SQL este un limbaj standard pentru a face interogări (query-uri) interactive pentru manipularea (stocarea, extragerea, actualizarea, ştergerea) unei baze de date. Interogările iau forma unei limbi de comandă care vă permite să selectaţi, inseraţi, updataţi, să aflaţi locaţia unor anumite date, şi aşa mai departe. Există, de asemenea, o interfata de programare.

Cum se poate crea o simplă bază de date MySQL?

În zilele noastre, aplicatii de management cum ar fi Joomla sau Moodle sunt dinamice. Scopul lor este de a oferi depozitare pentru articole, posturi, povestiri, poze, filme şi alte tipuri de conţinut. În scopul de a păstra toate datele organizate şi pentru o afişare mai rapidă, aceste cereri sunt folosind baze de date MySQL. Baza de date MySQL este compusă din tabele şi la fiecare dintre acestea MySQL stochează informaţii specifice pentru aplicaţia curentă.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Imaginea de mai jos arată modul în care o simplă bază de date MySQL este organizată pentru a stoca date. Baza de date este numit bookstore (librărie) şi constă în tabele ordonate logic (ordonare de tip tree).

Există mai multe moduri în care puteţi crea o nouă bază de date MySQL. Cel mai rapid şi mai mai uşor este cu ajutorul instrumentului phpMyAdmin. Imaginea de mai jos arată mai pe larg un tabel MySQL.

Fiecare tabel cuprinde rânduri şi coloane. Coloanele precizează tipul de date. Datele in sine sunt stocate pe rânduri. Numele acestui tabel este book (carte) şi este folosit pentru a stoca informaţii despre cărţi. Informaţiile despre cărţi stocate în baza noastră de date sunt afişate mai jos:

Interogări (query-uri) SQL şi manipularea datelor

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

În scopul de a accesa datele unui tabel folosim SQL query pentru a comunica cu baza de date. O interogare SQL deschide legătura cu baza de date, găseşte tabelul care conţine datele dorite şi modifică înregistrările necesare. De exemplu, următoarea declaraţie SQL va selecta toate înregistrările din tabelul “Persons”: SELECT * FROM Persons Putem insera, actualiza sau chiar şterge datele dintr-un tabel cu ajotorul comenzilor SQL. Mai important este că această manipulare a datelor se poate face prin intermediul unui site web, precum şi cu multele posibilităţi pe care PHP le oferă. HTML, PHP şi baze de date

Un utilizator poate interacţiona cu un site web care afişează form-uri cu ajutorul web browser-ului lui / ei. Atunci când utilizatorul apasă pe butonul submit a form-ului, o cerere poate fi trimisă la serverul care conţine baze de date şi interogări (query-uri) pot fi făcute spre tabelele unei baze de date. Rezultatele care sunt returnate de server pot fi afişate pe pagina web. Toate aceste pagini web pot fi scrise într-o combinaţie de HTML, PHP şi SQL.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Content Management Systems (sisteme de management a conţinutului)

La sfârșitul acestei secțiuni veți putea:  defini termenul "Content Management System"  crea un curs cu Moodle  să vă inregistrați într-un curs Moodle  să adăugați conținut cursului dvs. Moodle  să creați un forum în cursul dvs. Moodle  să creați o pagină de tip “wiki” în cursul dvs. Moodle

Nivel: Intermediar Durată estimată: 2h

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Prezentare Ce este Content Management System (CMS)? Web-ul este un instrument pentru schimbul de informaţii. Pentru a face posibilă afişarea acestor informaţii (sau "conţinut"), pe o varietate de computere diferite, oamenii au inventat un limbaj, numit HTML, care spune fiecărui tip de computer cum să afişeze acest conţinut, fapt foarte folositor. Din păcate, din perspectiva cuiva care vrea să facă schimb de informaţii, accesibilitatea acestuia la postarea acestor informaţii pe Internet este limitată de cunoştinţele sale de HTML. Content Management Systems au fost dezvoltate pentru a rezolva această dilemă. Un CMS vă ajută să creaţi şi să stocaţi conţinut într-un depozit comun, fără a fi nevoie să cunoaşteţi HTML sau alte limbaje. Ce este Moodle? Moodle este un acronim pentru Modular Object-Oriented Dynamic Learning Environment. Este un sistem de gestionare a conţinutului online, care este proiectat pentru a crea posibilităţi de interacţiune între profesori şi studenţi/elevi. Să începem prezentarea Moodle cu o analogie Lego - ce este acesta, principalele sale caracteristici, gândirea din spatele său şi unele elemente ale lumii Moodle.

Cum să descărcaţi şi să instalaţi Moodle pe serverul dvs. web Moodle este un software gratuit. Acest lucru înseamnă că toată lumea poate descărca un pachet arhivat Moodle de pe http://download.moodle.org/. După aceea, puteţi să-l instalaţi pe serverul dvs. web şi să-l folosiţi. Dacă întâmpinaţi probleme, puteţi să accesaţi http://docs.moodle.org/en/Installing_Moodle/.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Noţiuni de bază Cum se poate crea un curs cu Moodle?

Pasul 1. Presupunând că v-aţi conectat cu succes la site, apăsaţi pe Adăugaţi un nou curs.

Figura 1.

Pasul 2. Acum, puteţi edita setările cursului pe care vreţi să îl creaţi. Scrieţi un nume complet pentru cursul dvs., cât şi unul prescurtat. De asemenea, scrieţi un scurt cuprins al cursului.

Figura 2.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Pasul 3. Modificaţi formatul pentru cursul dvs. la formatul Topics. Există multe opţiuni după cum puteţi vedea, dar cele mai frecvent utilizate sunt Weekly şi Topics. Dacă nu sunteţi sigur care ar fi opţiunea potrivită pentru dvs., apăsaţi pe butonul Help (semnul de întrebare de culoare galbenă) din stânga pentru o descriere.

Figura 3.

Pasul 4. Acum, uitaţi-vă la blocul de Enrolment (înscriere). Aţi văzut că opţiunea implicită este de Internal Enrolment. Asta înseamnă că, dacă un elev apasă pe numele cursului, sistemul va cere în mod automat, dacă el / ea ar dori să adere la curs. Puteţi face cursul, de asemenea, să nu funcţioneze pe bază de înscriere (se pot înscrie studenţi manual de dumneavoastră mai târziu) sau să funcţioneze pe bază de înscriere doar pentru o durată limitată de timp. Dar nu faceţi nici o schimbare acum. Amintiţi-vă că puteţi reveni mai târziu.

Figura 4.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Pasul 5. Apăsaţi pe Salvaţi modificările. (Să nu vă fie frică să experimentaţi singur cu orice opţiune care ar putea părea de ajutor).

Figura 5.

Pasul 6. Pe ecranul următor, aveţi posibilitatea să atribuiţi roluri în cursul dumneavoastră. Observaţi că încă nu există profesori pentru curs. Apăsaţi pe opţiunea Teacher din coloana Roles.

Figura 6.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Pasul 7. Selectaţi-vă din lista de potenţiali utilizatori (în cazul dumneavoastră lista va fi mult mai mare şi aţi putea dori să utilizaţi butonul de căutare de mai jos), apăsaţi pe Add şi apoi apăsaţi pe Assign roles in Course.

Figura 7a.

Figura 7b.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Pasul 8. Acum modelele anterioare s-au modificat. Puteţi observa prezenţa unui nou profesor, dumneavoastră!!! Apăsaţi pe Click here to enter your course (Fig. 8).

Figura 8. Pasul 9. Pagina de start a cursului va apărea pe ecran (Fig. 9).

Figura 9.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Cum se înregistrează studenţii manual în cursul Moodle? Pasul 1. Apăsaţi pe Settings din meniul Administration situat în stânga paginii de start (Fig. 9). Pasul 2. Acum sunteţi înapoi la ecranul Settings (Fig. 2). Puteţi modifica din nou dacă doriţi anumite opţiuni. Pasul 3. În meniul Enrolments, modificaţi cursul în non enrollable (Fig. 4). Apăsaţi pe Save changes (Fig. 5). Pasul 4. Apăsaţi opţiunea Student din coloana Roles (Fig. 6). Pasul 5. Găsiţi studentul/studenţii pe care doriţi să îi îinscrieţi în curs şi apăsaţi Add. Apoi apăsaţi pe Assign roles in Course (Fig. 10).

Figura 10a.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Figura 10b. Pasul 6. Acum puteţi vedea studenţii înscrişi la curs (Fig. 11). Apăsaţi pe Click here to enter your course.

Figura 11. Pasul 7. Apăsaţi pe Participants din meniul People aflat în partea stângă a pagini de start. Acum îi puteţi vedea pe toţi cei ce participă la curs (Fig. 12).

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Figura 12a.

Figura 12b.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Cum se poate edita cursul Moodle? Pasul 1. Apăsaţi pe Turn editing on aflat în colţul din dreapta sus a paginii de start. Vor apărea diverse iconiţe pe ecran, însă nu intraţi în panică deoarece veţi avea ocazia să vedeţi exact ce funcţie are fiecare dintre ele (Fig. 13).

Figura 13a.

Figura 13b. Pasul 2. Apăsaţi pe iconiţa Edit summary aflată chiar sub tabul Topic Outline. Scrieţi “Welcome to the ODL course.”, aplicaţi funcţia bold şi apăsaţi Save changes (Fig. 14).

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Figura 14. Pasul 3. Textul inserat apare sub forma unei etichete. Acum apăsaţi pe iconiţa Move right aflată lângă News forum. Hyperlinkul News forum se muta puţin în dreapta (Fig. 15).

Figura 15a.

Figura 15b.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Pasul 4. Apăsaţi iconiţa Move de langă News forum. Apare un set de mici sloturi. Puteţi muta News forum pe slotul preferat. Mutaţi-l pe cel de-al doilea topic. News forum este mutat (Fig. 16).

Figura 16a.

Figura 16b. Pasul 5. Apăsaţi iconiţa Delete situată lângă News forum. Un mesaj de atenţionare apare în care sunteţi rugat să confirmaţi acţiunea anterioară. Desigur, este decizia dumneavoastră, dar pentru moment apăsaţi No (Fig. 17).

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Figura 17. Pasul 6. Apăsaţi pe iconiţa Hide situată lângă News forum. News forum devine gri (Fig. 18). Asta înseamnă că acum News forum nu poate fi accesat de studenţii înscrişi în curs. Această funcţie este folositoare în cazul în care nu vreţi să prezentaţi anumite resurse studenţilor.

Figura 18. Pasul 7. Apăsaţi pe butonul Turn editing off din colţul din dreapta sus şi întoarceţi-vă la pagina de start.

Adăugarea Conţinutului Cum poate fi adaugat un fisier in cursul Moodle? Pasul 1. Apăsaţi butonul Turn editing on din colţul din dreapta sus al paginii de start (Fig. 19).

Figura 19. Pasul 2. Din meniul drop-down Add a resource, selectaţi Link to a file or web site (Fig. 20).

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Figura 20. Pasul 3. Inseraţi un nume şi o scurtă descriere a fişierului pe care doriţi să îl adăugaţi. În blocul Link to a file or web site, apăsaţi Choose or upload a file (Fig. 21).

Figura 21. Pasul 4. Apăsaţi Upload a file (Fig. 22).

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Figura 22. Pasul 5. Apăsaţi Browse apoi găsiţi fişierul pe care doriţi să îl adăugaţi, ca şi cum ar fi fost un fişier ataşat unui e-mail. Apăsaţi Upload this file (Fig. 23).

Figura 23. Pasul 6. Apare un mesaj care vă înştiinţează că fişierul a fost uploadat cu succes. Apăsaţi Choose din coloana Action de langă fişier (Fig. 24).

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Figura 24. Pasul 7. În blocul Window, din meniul drop-down, selectaţi New window. Apăsaţi Save and return to course (Fig. 25).

Figura 25.

Cum poate fi adăugat un link în cursul Moodle?

Pasul 1. Apăsaţi butonul Turn editing on din colţul din dreapta sus a paginii de start (Fig. 19). Pasul 2. Din meniul drop-down Add a resource, selectaţi Link to a file or web site (Fig. 20). Pasul 3. Inseraţi un nume şi o scurtă descriere a paginii web căreia doriţi să îi creeaţi un link către curs. În blocul Link to a file or web site, inseraţi URL-ul paginii web (Fig. 26).

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Figure 26. Pasul 4. În blocul Window, din meniul drop-down, selectaţi New window. Apăsaţi Save and return to course (Fig. 25). Cum poate fi adaugată propria pagină web în cursul Moodle? Pasul 1. Apăsaţi butonul Turn editing on din colţul din dreapta sus a paginii de start (Fig. 19). Pasul 2. Din meniul drop-down Add a resource, selectaţi Compose a web page (Fig. 27).

Figura 27. Pasul 3. Inseraţi un nume şi o scurtă descriere a paginii web pe care doriţi să o adăugaţi (Fig. 28).

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Figura 28. Pasul 4. Creeaţi propria dumneavoastră pagină web. După cum puteţi observa puteţi utiliza o mulţime de opţiuni, precum schimbarea fontului sau culorii textului, adăugarea unei imagini, unui link, unui tabel etc. (Fig. 29).

Figura 29. Pasul 5. În blocul Window, din meniul drop-down, selectaţi New window. Apăsaţi Save and return to course (Fig. 25).

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Cum să lucraţi cu fisiere şi dosare. Pasul 1. Apăsaţi pe Files din blocul Administration aflat în stânga jos paginii de start (Fig. 30).

Figura 30.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Pasul 2. Apasă Make a folder (Fig. 31).

Figura 31. Pasul 3.Scrie numele foderului si apasă Create (Fig. 32).

Figura 32. Pasul 4. Folderul a fost creat cu succes. Bifează căsuţele din stânga fişierelor pe care vrei să le muţi şi din meniul drop-down, alege Move to another folder (Fig. 33).

Figura 33. Pasul 5. Apare un mesaj care te ghidează pe parcursul restului procedurii. Se merge la folderul destinaţie şi se apasă Move files to here.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Comunicarea

Cum se crează şi se rulează un formular cu Moodle? Pasul 1. Se apasă butonul Turn editing on din partea dreapta sus a paginii principale a cursului . Din meniul Add an activity, se selectează Forum (Fig. 34).

Figura 34. Pasul 2. Se scrie numele şi o scurtă introducere pentru forum, avand posibilitatea de a îi adăuga o scură descrie şi reguli. Se selectează tipul de Forum cel mai potrivit (Pentru Help se apasă semnul galben de intrebare). Se apasă Save and return to course (Fig. 35).

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Figura 35a.

Figura 35b. Pasul 3. Se apasă pe E-learning forum (Fig. 36).

Figura 36. Pasul 4. Se apasă Add a new discussion topic (Fig. 37).

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Figura 37. Pasul 5.Se scrie un subiect scurt şi mesajul. Se apasă Save changes (Fig. 38).

Figura 38a.

Figura 38b. Pasul 6. Un câmp (thread) este creat.Se apasă pe subiectul unei discuţi (discussion) pentru a se vedea toate postările acelei discuţii(Fig. 39). Se explorează toate opţiunile posibile.

Figura 39a.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Figura 39b.

How to create a wiki with Moodle? Pasul 1. Se apasă pe butonul Turn editing on din colţul dreapta sus a paginii principale a cursului.Din meniul drop-down Add an activity, se alege Wiki (Fig. 40).

Figura 40.

Pasul 2.Se scrie numele şi o scurtă descriere. Se apasă Save and display (Fig. 41).

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Figura 41a.

Figura 41b.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Pasul 3. Pagina wiki este editata prin tastarea unui răspuns. Se apasă Save (Fig. 42).

Figura 42. Pasul 4. Pagina wiki va fi updatată. Se apasă ODL home de la baza paginii (Fig. 43).

Figura 43.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Pasul 5. Acum, se presupe ca studentul sau profesorul se logheză şi află despre pagina wiki. El/Ea apasă pe numle paginii wiki, apoi pe tabul Edit , adaugând contribuţia ei/lui şi apoi salvează schimbările(Fig. 44).

Figura 44a.

Figura 44b. Pasul 6. Pagina wiki a fost iar updatată. Ca professor se poate vizualiza istoricul paginii wiki sau folosirea unor versiuni mai vechi(Fig. 45). Nu vă feriţi să experimentaţi până înţelegeţi modul de funcţionare.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Figura 45.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Crearea Execiţiilor In În această secţiune se va arăta cum se pot crea exerciţii interactive folosind XML si Flash. La sfârşitul acestei secţiuni veţi ştii cum să  structuraţi informaţia folosind XML  scrieţi cod simplu în Flash folosind Actionscript  combinaţi XML cu Flash  creaţi exerciţii interactive

Nivel: Avansat Timp estimat: 2h

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Introducere în XML Ce este XML? Definiţia pentru XML este EXtensible Markup Language (Limbaj extensibil de marcare).   

XML este un limbaj de marcare care seamă mult cu HTML XML a fost creat pentru portarea datelor, nu pentru a le afisa. Tagurile XML nu sunt predefinite. Trebui definite taguri proprii.

Diferenta de bază dintre XML şi HTML este că HTML este folosit pentru afişarea datelor, în timp ce XML este pentru portarea informaţiei. Deci XML Nu este un înlocuitor pentru HTML. Cum arată un document XML? Mai jos este prezentat un document XML, structurat în aşa fel încât să reprezinte un catalog de CD-uri care conţine descrierea a două CD-uri cu muzică. A se observa ca tagurile (CD, CATALOG, etc) au fost definite de catre noi, în aşa fel încât să creeze o structură mai inteligibilă.

Cryptic Writings Megadeth USA Capitol 16.98 1997 Draconian Times Paradise Lost UK Music for Nations 11.98 1995

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

How can we write an XML document?

Un document XML, este un fişier cu extensia .xml. Nu este nevoie de nici un editor sau program special pentru a crea un document XML, se poate folosi un editor text simplu. Structura unui document XML, oricât de maleabilă ar fi, trebuie să respecte anumite reguli precum urmatoarele: 1. Toate elementele XML trebuie să abie un tag de închidere. În XML, nu se poate omite un tag de închidere. Toate elementele trebuie să aibă tag de închidere: Acesta este un paragraf Acesta este un alt paragraf 2. Tagurile XML sunt Case Sensitive În XML, tag-ul este diferit de tag-ul. Tagurile de închidere şi de deschidere trebuie scrise cu acelaşi tip de litere: Acesta este incorect Acesta este corect 3. Tagurile XML trebuie să fie încapsulate corespunzător În HTML, pot fi observate taguri încapsulate necorespunzător: This text is bold and italic

În XML, toate elementele trebuie să încapsulate corespunzător unul în celălat: This text is bold and italic 4. Documentele XML trebuie sa aiba un element rădăcină Documentele XML trebuie să conţină un element care este părintele tuturor celorlate elemente. Acesta se numeşte element rădăcină (sau root). .....

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

5. Valorile atributelor XML trebuie să fie între ghilimele Elementele XML pot avea attribute în perechi nume/valoare la fel ca în HTML. În XML valoarea atributului trebuie sa fie mere între ghilimele. Urmăreşte cele doua documente XML de mai jos. Primul este incorect, al doilea este corect: Tove Jani Tove Jani

Cum se poate adauga informaţie ce poate fi vizualizată pentru XML? Este posibil să folosirea CSS-ului pentru a formata un document XML. Jos este un exemplu despre folosirea unui CSS pentru a formata un document XML: Urmăreşte acest document XML: catalog.xml

Este un document XML ce conţine informaţi pentru un catalog de CD-uri, având date pentru doua CD-uri. Urmăreşte acest style sheet: cd_catalog.css CATALOG { background-color: #ffffff; width: 100%; }

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

CD { display: block; margin-bottom: 30pt; margin-left: 0; } TITLE { color: #FF0000; font-size: 20pt; } ARTIST { color: #0000FF; font-size: 20pt; } COUNTRY,PRICE,YEAR,COMPANY { display: block; color: #000000; margin-left: 20pt; }

În acesta este CSS-ul care va formata documentul XML. Trebuie definite doar valorile atributelor pentru tagurile care ne interesează. În cele din urma vom avea :

Fişierul este la fel precum catalog.xml, singura diferentă fiind linia care leaga fişierul XML de CSS, astefel formatând fişierul XML.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Introducere în Flash Ce este Flash?    

Flash este un program de grafică, specializat pentru Web Flash permite crearea de “Filme” interactive pentru Web Flash foloseşte grafică vectorială, astfel încât graficele create in el pot fi scalate fara să piardă din calitate. Flash nu necesită cunoştinte de programare şi este uşor de învătat.

Filmele Flash au extensia .swf. Cum port adăuga filme flash în pagina mea? În secţiunea HTML, Integrarea Multimedia, vom arăta cum se pot adăuga fişiere video în pagina web. Acelaşi lucru se aplică cand trebuie adăugat un film flash. Cu toate asta există şi o metodă alternativă pentru a adauga flash in pagina web:

Cine poate vedea şi crea filme flash? Pentru a vedea filme flash e nevoie de Adobe Flash Player. Dacă nu este instalat Adobe Flash Player poate fi downloadat gratis de pe siteul Adobe. Pentru a putea crea filme flash este nevoie trebuie cumpărat un program Flash. Ultima versiune de la Adobe este Adobe Flash Professional CS4 Dacă nu este instalat vreun program Flash, poate fi luat un trial de 30 de zile.

Cum se poate crea un obiect care se mişcă? 1. Se crează un fişier Flash nou (File->New sau Ctrl+N). Se alege Flash Document. 2. În timeline-ul care apare, există un layer (Layer 1) cu un blank keyframe(Keyframe gol).

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Se selectează un keyframe şi folosind Oval Tool şi o culoare la alegere.

3. Selectăm frame-ul 30 din timeline şi prin click-dreapta adăugam frame-uri.

Astfel, poza dinamica pe care am creat-o va avea o durata de 30 de frame-uri. 4. Selectăm orice frame din timeline şi intrăm in Properties Panel şi dintre parametri alegem mişcarea.

5. Selectăm frame-ul 30 prin dublu click dreapta şi îl convertim in cadru-cheie.

6. Urmând aceeaşi procedura, adăugam un cadru-cheie in frame-ul 2, frame-ul 15 şi frame-ul 29.Acum, timeline-ul ar trebui să arate astfel:

7. Selectăm frame-ul 2 şi mutam mingea pe care am creat-o cu 2-3 pixeli deasupra poziţiei iniţiale. Apoi selectăm frame-ul 15 şi mutam mingea mai departe in sus. Apoi selectăm frame-ul 29 şi facem ceea ce am făcut şi in frame-ul 2.Astfel am terminat animaţia mingii. 8. In scopul de a face ca mişcarea obiectului să para cat mai reala, putem adăuga o umbra care va urmări mişcarea sa. Astfel, cream un nou strat sub stratul creat pentru minge.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

9. Adăugam 30 de frame-uri exact cum am făcut pentru minge şi cu Oval Tool cream o elipsa pe care o coloram gri.

10. Selectăm din Properties Panel parametrul dintre forma, la fel cum am ales mişcarea la paragraful 4.Parametrul Ease va avea valoarea -100. Timeline-ul ar trebui să arate astfel:

11. Adăugam un cadru-cheie in frame-ul 15 şi micşoram mărimea umbrei utilizând Free Transform Tool. 12. Acum putem vizualiza lucrarea noastră apăsând Ctrl+Enter şi o salvam cu o extensie Flash (.swf) movie file.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Exerciţii interactive Ce este un exerciţiu interactiv? Un exerciţiu interactiv este un exerciţiu care presupune participarea utilizatorului, astfel făcând procesul de invătare mai distractiv, interesant şi eficient. Iată un exemplu al unui test cu alegere multipla:

Cum putem să cream un exerciţiu interactiv? Pasul 1:Cream un nou document a. Alegem File > New. b. In caseta dialog din noul document, selectăm Flash File (ActionScript 2.0) şi apoi dam click pe OK. Pasul 2:Setările documentului Click-dreapta pe scena, selectăm Document Properties, apoi apare caseta dialog din Document Properties. Ea afişează scena curenta la mărimea de 550 x 400 pixeli şi culoarea de pe fundal a swatch-ului e setata alba. Puteţi să schimbaţi mărimea şi culoarea scenei daca doriţi.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Pasul 3:Importarea unei imagini in etapa Alegeţi File > Import > Import to Stage, şi apoi selectaţi imagine ape care o doriţi. De asemenea, puteţi să inseraţi imaginea prin combinaţia de taste Ctrl+R. Pasul 4: Adăugarea de variante multiple de întrebare la etapa a. Selectaţi Text tool (T). b. In Property inspector (Window > Properties), selectaţi Static Text type pentru a specifica tipul câmpului text şi apoi puneţi întrebarea “Care este regizorul filmului “Vertigo”?”.De asemenea, puteţi seta mărimea fontului şi culoarea textului. Pasul 5:Adăugarea componentei ComboBox a. Selectaţi Window > Components.

b. Dublu-click pe ComboBox in Components panel.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

c. Selectaţi componentele din Stage şi numiţi, de exemplu, ca şi căsuţa din properties panel.

Pasul 6:Adăugarea de opţiuni de răspunsuri: a. Selectaţi Window > Component Inspector. In Component Inspector,daţi click pe data, apoi apare Value dialog box.

b. Click + pentru a adăuga opţiuni de răspunsuri şi apoi înlocuiţi valoarea implicita cu următoarele opţiuni de răspuns: Alfred Hitchcock, Michael Curtiz, Billy Wilder, John Huston. Apoi, daţi click pe OK.

c. In Component Inspector, daţi click pe etichete şi apoi vor apărea valorile casetei dialog. Urmaţi aceeaşi paşi ca mai înainte pentru a adăuga valorile prin butonul”+” . Step 7 – Adăugarea butonului de trimitere:

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

a. Selectaţi Window > Common Libraries > Buttons, apoi Libraries buttons dialog pop up. b. Alegeţi un buton şi glisaţi-l in etapa.

c. Dublu-click pe buton, şi apoi redenumiţi butonul:Submit. De asemenea, puteţi seta mărimea butonului din Propertites panel. Pasul 8 – Inserarea unui cadru-cheie şi ştergerea elementelor cadrului Pasul 9 – In frame-ul cheie 2, inseraţi o caseta text dinamica

a. Selectaţi Text tool (T). b. In Property inspector (Window > Properties), selectaţi tipul textului dinamic. c. Desenaţi o căsuţa text dreptunghiulara. Acesta este aria feedback-ului atunci când cei care fac testul aleg răspunsul corect sau greşit. d. Selectaţi căsuţa text dreptunghiulara şi inseraţi variabila jg in Variable box din Properties panel.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Pasul 10 – In frame-ul cheie 2, adăugaţi butonul “Back” Urmaţi aceeaşi procedura ca la pasul 8 pentru a adăuga un buton, pe care îl veţi redenumi”Back”. Pasul 11 – Deschideţi Action panel şi adăugaţi scenarii a. Adăugaţi script-uri in butonul Back. Daţi click pe el şi adăugaţi următoarele script-uri: on (release) { gotoAndStop(1); jg = ''; }

b. Adăugaţi script-uri in butonul Submit. Daţi click pe butonul Submit şi inseraţi următoarele script-uri: on (press) { if (box.getValue() == 'Alfred Hitchcock') { jg = 'Felicitari'; } if (box.getValue() == 'Michael Curtiz') { jg = ' Răspuns greşit!Va rugam, selectaţi din nou!'; } if (box.getValue() == 'Billy Wilder') { jg = ' Răspuns greşit!Va rugam, selectaţi din nou!'; } if (box.getValue() == 'John Huston') { jg = ' Răspuns greşit!Va rugam, selectaţi din nou!'; } gotoAndStop(2); } c. Adăugaţi script-uri in frame-ul 1.Dati click pe frame-ul 1 şi inseraţi următoarele scrituri:stop();

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Forums - Wikis – Blogs In această secţiune, vom introduce trei tipuri de aplicaţii web utilizate pe scara larga in internet La sfârşitul acestei secţiuni, vei fi capabil sa:  explici care este fiecare aplicaţie prezentata  creezi un forum simplu, wiki sau blog

Nivel: Intermediar Timp estimat: 20min

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Forumuri Ce este un forum?

Un forum, sau un departament de mesaje este un site de discuţii online. Din punct de vedere tehnologic, forumurile sunt aplicaţii web care gestionează conţinutul generat de utilizator. Participanţii la un forum pot crea legături sociale şi grupuri de interes pentru un subiect. Here is an example of a forum about Books & Literature:

Care este structura unui forum? Un forum consta dintr-un arbore ca structura directoare care conţine temeincadrate in diferite categorii. Logic, forumurile sunt organizate intr-un set finit de subiecte generice(de obicei cu un subiect principal) conduse şi actualizate de un grup de membri şi guvernate de un grup de moderatori. Un post e un mesaj trimis de utilizator, anexat intr-un bloc ce conţine detaliile utilizatorului şi data când a fost trimis. Posturile sunt conţinute in subiecte de discutie(threaduri), unde apar ca şi căsuţe una după alta. Primul post începe subiectul. Acesta poate fi denumit postul original. Posturile insiruite din fir trebuie să continue discuţiile despre acel post sau să răspundă altor replici. Un subiect de discutie este o colecţie de posturi, de obicei afişate de la primul la ultimul, deşi opţiunea pentru o vizualizare a subiectului poate fi valabila.(se vizualizează aplicaţia structurii logice de răspunsuri înainte de ordinea cronologica).Un fir este definit de un titlu şi de o descriere adiţionala care poate să rezume discuţia destinata.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Subiectele care sunt importante dar primesc rar posturi sunt stickyed(sau, in anumite software-uri, “pinned”).Un subiect sticky va apărea întotdeauna in fata subiectelor normale, de multe ori in propria lor secţiune. Ce tipuri de useri sunt intr-un forum?

Pe plan intern, forumurile organizează vizitatori şi logheaza membri in grupurile utilizatorilor. Privilegiile şi drepturile sunt repartizate pe baza acestor grupuri. Un utilizator al forumului poate fi promovat automat intr-un grup mai privilegiat, bazat pe un set de criterii stabilite de administrator. Un utilizator neînregistrat al siteului este cunoscut ca invitat sau vizitator. Invitaţii acorda acces tuturor funcţiilor care nu cer bazei de date modificări. Moderatorii (“mod”)sunt utilizatori ai forumului care acorda acces posturilor şi firelor in scopul moderării discuţiilor si, de asemenea, al păstrării forumului “curat”.Totodată, moderatorii răspund la problemele utilizatorilor legate de forum, la întrebări generale, precum şi la reclamaţii. Privilegiile comune ale moderatorilor includ:ştergeri, fuziuni, mutări şi împărţiri ale posturilor şi ale firelor;închiderea, redenumirea, stickying threadsurilor;interzicerea, permiterea accesului,avertizarea membrilor;sau adăugarea, editarea, eliminarea firelor. Administratorii(“admin”) gestionează detaliile tehnice cerute pentru rularea site-ului.Ca atare, ei pot să promoveze şi să retrogradeze membrii in moderatori, să gestioneze regulile, să creeze secţiuni şi sub-secţiuni, precum şi să interpreteze operaţiile bazei de date(database backup, etc).Administratorii se comporta adesea ca moderatori. De asemenea, administratorii fac anunţuri pe forum sau schimba aspectul(skin-ul) forumului. Cum putem să cream un forum?

Sunt variate pachetele de forumuri pe internet pe care le puteţi descarcă. Majoritatea implementărilor forumului sunt Free şi Open Source Software (F/OSS), dar sunt de asemenea şi unele aplicaţii valabile foarte bune dar restricţionate. Forumurile trebuie să înglobeze şi posturile undeva. Majoritatea sistemelor folosesc o baza de date pentru a realiza acest lucru, altele, in schimb, folosesc fişiere text simple. Tipul de sistem de depozit pe care vreţi să îl alegeţi aici depinde de ceea ce este valabil pe serverul dumneavoastră. Vom vedea acum un exemplu al forumului phpBB™ , cel mai des folosit forum de soluţii. Acesta are un panou de administrare şi un proces de instalare uşor de realizat, ceea ce va permite să aveţi un forum creat in câteva minute.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

   

Decomprimaţi arhiva phpBB3 intr-un director local al sistemului vostru. Încărcaţi fişierele conţinute in aceasta arhiva(reţinând directorul sursa) intrun director web accesibil pe serverul vostru sau pe contul găzduit. Folosind browser-ul web, vizitaţi locaţia pe care aţi plasat-o phpBB3 cu adresa pentru instalare install/index.php. Daţi click pe INSTALL tab, urmaţi paşii şi completaţi toate Informaţiile cerute. Php BB3 ar trebui să fie acum valabil.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Wikis Ce este un Wiki?

Un wiki este un site web care utilizează software-ul wiki, permiţând crearea mai uşoara şi editarea oricărui număr de pagini web legate intre ele, prin folosirea unui limbaj de marcare simplificat sau a unui editor de text in interiorul browser-ului. Wikis sunt des utilizate pentru a crea site-uri web de colaborare, pentru a spori puterea site-urilor web ale comunităţii şi pentru a lua note. Enciclopedia de colaborare Wikipedia este unul dintre cele mai cunoscute wikis. Wikis sunt folosite in afaceri pentru a furniza rapid cunoştinţe. O wiki permite scrierea cooperativa a documentelor intr-un limbaj de marcare simplu folosind un browser web. O singura pagina dintr-un site wiki este menţionata ca o “pagina wiki”, in timp de întreaga colecţie de pagini, care este de obicei interconectata prin hyperlinkuri, este “the wiki”.O wiki este in mod esenţial o baza de date pentru crearea şi căutarea de informaţii. Exemplu de pagina wiki:

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Cum funcţionează wikis?

Un wiki invita toţi userii să editeze orice pagina sau să creeze noi pagini in web site-ul wiki, folosind numai un browser web clar. Wiki promovează asocieri de subiecte semnificative intre diferite pagini, făcând crearea paginii link aproape uşoara şi arătând daca o pagina ţinta exista sau nu. Un wiki nu este un site artizanal pentru vizitatori ocazionali. In schimb, încearcă să implice vizitatorul intr-un proces de creare şi colaborare in curs de desfăşurare, care schimba constant peisajul site-ului web. O caracteristica definitorie a tehnologiei wiki este uşurinţa cu care paginile pot fi create şi updatate. In mod general, nu se fac revizuiri înainte ca modificările să fie acceptate. Multe wikis sunt deschise degradării de către publicul general fără a li se cere să se înregistreze ca utilizatori de conturi. Uneori, logarea pentru o sesiune este recomandata, pentru crearea unei semnături wiki cookie pentru semnarea modificării in mod automat .Oricum, multe editări pot fi făcute in timp real şi pot apărea aproape instantaneu online. Asta poate facilita abuzul de sistem. Serverele wiki private cer autentificare utilizatorilor pentru a edita paginile si, uneori, chiar şi pentru a le citi. Cum puteţi crea un Wiki?

Sunt multe pachetele de software wiki, care va permit crearea uşoara a unui wiki. Unele dintre ele, ca DokuWiki, funcţionează pe fişiere text clare si, astfel, nu necesita nici o baza de date. Au o sintaxa simpla, dar puternica, ceea ce face ca fişierele de date să poată fi citite in afara wiki. Instalarea DokuWiki este foarte simpla-in general tine doar de despachetarea şi setarea permisiunilor.   

Descărcaţi cea mai noua versiune din Download Page. Despachetaţi distribuţia arhivei şi uploadati/copiaţi fişierele in spaţiul web. Deschideţi install.php in browser şi urmaţi instrucţiunile.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Bloguri

Ce este un blog?

Un blog (o prescurtare a termenului “weblog”) este un tip de site web, de obicei administrat de o persoana, cu înregistrări regulate de comentarii, descrieri de evenimente sau alte materiale grafice sau video. Înregistrările sunt afişate in ordine cronologica inversa. Multe bloguri furnizează comentarii sau ştiri ale unui subiect particular;altele au funcţia de jurnale personale online. Un blog tipic combina text, imagini şi linkuri ale altor bloguri, pagini web,etc. Posibilitatea cititorilor de a posta comentarii intr-un format interactiv este o parte importanta a multor bloguri. Majoritatea blogurilor sunt bazate pe text, altele se axează pe arta(artlog), fotografii(photoblog), schite(sketchblog), filme(vblog), muzica(MP3 blog), audio(podcasting). Micro-blogging-ul este un alt tip de blogging, unde figurează postări foarte scurte. Cum pot să creez un blog? Software-ul weblog(de asemenea numit şi blog software sau blogware) este un software realizat pentru a simplifica crearea şi întreţinerea weblog-urilor. Ca specialitate a sistemelor de management al conţinutului, aplicaţiile weblog susţin editarea şi publicarea de poştari şi comentarii, cu funcţii speciale de gestionare a imaginii,

sindicalizare de web, precum şi moderarea de posturi şi comentarii. Multe aplicaţii weblog pot fi descărcate şi instalate pe sistemele de utilizator. Unele dintre acestea sunt furnizate in conformitate cu free-software şi licenţe open-spurce, permiţându-le să fie utilizate, modificate şi redistribuite in mod liber. Altele sunt reprezentate de software-ul proprietar care trebuie să fie licenţiat.

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Anexa A – Tabel de Simboluri

Simboluri operaţionale

NUME

SIMBOL

COD NUMERIC

FONT FACE="Symbol" Cod

COD LITERAL

Oricare

∀

∀

"

∀

Există

∃

∃

$

∃

Negaţie

¬

¬

Ø

¬

Şi

∧

∧

Ù

∧

Sau

∨

∨

Ú

∨

Intersecţie

∩

∩

Ç

∩

Uniune

∪

∪

È

∪

Plus sau minus

±

±

±

±

Înmulţire

×

×

´

×

Derivată parţială

∂

∂

¶

∂

Punct Solid



∙

·

Nu există

Punct de Mijloc

·

·

×

·

Înmulţit încercuit



⊗

Ä

⊗

Plus încercuit



⊕

Å

⊕

Împărţire



÷

¸

÷

Produs



∏

Õ

∏

Sumă



∑

å

∑

Radical



√

Ö

√

Integrală

∫

∫

Nu există

∫

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Simboluri Relaţionale NUME

SIMBOL

COD NUMERIC

FONT FACE="Symbol" Cod

COD LITERAL

Conţine elementul



∍

'

Nu există

Aparţine

∈

∈

Î

∈

Nu aparţine

∉

∉

Ï

∉

Mai mic

<

<

Nu există

<

Mai mare

>

>

Nu există

>

Izomorfism

≅

≅

@

≅

Perpendicular

⊥

⊥

^

⊥

Bară verticală



|

|

Nu există

Linie verticală



None

½

Nu există

Mai mic egal

≤

≤

£

≤

Mai mare egal

≥

≥

³

≥

Diferit

≠

≠

¹

≠

Echivalent cu

≡

≡

º

≡

Aproximativ

≈

≈

»

≈

Similar cu

∼

∼

~

∼

Mulţimea vidă

∅

∅

Æ

∅

Include

⊃

⊃

É

⊃

Include egal

⊇

⊇

Ê

⊇

Nu este inclus

⊄

⊄

Ë

⊄

Inclus

⊂

⊂

Ì

⊂

Inclus egal

⊆

⊆

Í

⊆

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Săgeţi şi paranteze NUME

SIMBOL

COD NUMERIC

FONT FACE="Symbol" Cod

COD LITERAL

Paranteză stânga



[

[

Nu există

Paranteză dreapta



]

]

Nu există

Paranteză unghiulară stânga



None

<

Nu există

Paranteză unghiulară dreapta



None

>

Nu există

Acoladă stânga



{

{

Nu există

Acoladă dreapta



}

}

Nu există

Săgeată dublă

↔

↔

«

↔

Săgeată stânga

←

←

¬

←

Săgeată sus

↑

↑

­

↑

Săgeată dreaptă

→

→

®

→

Săgeată jos

↓

↓

¯

↓

Săgeată dublă mare

⇔

⇔

Û

⇔

Săgeată dublă stânga

⇐

⇐

Ü

⇐

Săgeată dublă sus

⇑

⇑

Ý

⇑

Săgeată dublă dreaptă

⇒

⇒

Þ

⇒

Săgeată dublă jos

⇓

⇓

ß

⇓

Puncte de suspensie

…

…

¼

…

Ghilimele stânga

«

«

Nu există

«

Ghilimele dreapta

»

»

Nu există

»

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Simboluri greceşti NOTĂ: Doar literele mici sunt afişate. Pentru a obţine majuscule folosiţi caracterul echivalent cu majuscule. NUME

SIMBOL

COD NUMERIC

COD LITERAL

FONT FACE="Symbol" Cod

alpha

α

α

a

α

Beta

β

β

b

β

gamma

γ

γ

g

γ

Delta

δ

δ

d

δ

epsilon

ε

ε

e

ε

Zeta

ζ

ζ

z

ζ

Eta

η

η

h

η

Theta

θ

θ

q

θ

Iota

ι

ι

i

ι

kappa

κ

κ

k

κ

lambda

λ

λ

l

λ

Mu

μ

μ

m

μ

Nu

ν

ν

n

ν

Xi

ξ

ξ

x

ξ

omicron

ο

ο

o

ο

Pi

π

π

p

π

Rho

ρ

ρ

r

ρ

sigma

ς

σ

s

σ

Tau

τ

τ

t

τ

upsilon

υ

υ

u

υ

Phi

φ

φ

j

φ

Chi

χ

χ

c

χ

Psi

ψ

ψ

y

ψ

omega

ω

ω

w

ω

MENUET – Mobile E- Novative Use of E- learning Technologies Project No. LLP-LdV/ToI/2008/RO/010

Simboluri Diverse NUME

SIMBOL

Spaţiu

COD NUMERIC

FONT FACE="Symbol" Cod

COD LITERAL

None



 

Diez



None

#

Nu există

Procent



%

%

Nu există

Ampersand



&

&

&

Apostrof

′

′

¢

′

Apostrof dublu

″

″

²

″

Citat

"

None

²

"

Aşadar

∴

∴

\

∴

Bară sus



None

`

Nu există

Infinit

∞

∞

¥

∞

Grad

°

°

°

°

Liniuţă de despărţire



None

¾

Nu există

Aleph

ℵ

ℵ

À

ℵ

Unghi

∠

∠

Ð

∠

Nabla

∇

∇

Ñ

∇

Jumătate

½

½

Nu există

½

Semn Cent

¢

¢

Nu există

¢

Semn Înregistrat

®

®

Ò

®

Semn Copyright

©

©

Ó

©

Semn Trademark

™

™

Ô

™