Proiectarea unui sistem informatic pentru distribuirea cursurilor in facultate. [306635]
UNIVERSITATEA “TITU MAIORESCU” DIN BUCUREȘTI
FACULTATEA DE INFORMATICĂ
LUCRARE DE LICENȚĂ
Proiectarea unui sistem informatic pentru distribuirea cursurilor in facultate.
COORDONATOR ȘTIINȚIFIC:
Conf. univ. dr. TUDOR CATALIN APOSTOLESCU
ABSOLVENT: [anonimizat]-Claudia Paraschiv
SESIUNEA IUNIE 2019
[anonimizat], „Proiectarea unui sistem web pentru distribuirea cursurilor în facultatea de informatică”, este realizată cu ajutorul tehnologiilor web (html, javascript, css), și este realizată cu scopul de a facilitiza accesul rapid al studenților facultății de informatică din cadrul Universității Titu Maiorescu din Bucuresti la cursurile predate în cadrul programului de studii de licență.
[anonimizat], [anonimizat], [anonimizat] *index.html, din dosarul proiectului.
*index.html = MAIN-UL unui site de prezentare sau al unei aplicații de tip web.
[anonimizat], unde se descrie în detaliu interfața vizuală și funcțiile lui.
În anexa prezentei lucrări se poate găsi codul sursă detaliat si explicat bloc cu bloc de cod.
[anonimizat], [anonimizat], [anonimizat], [anonimizat], denumită în continuare, „Proiectarea unui sistem web pentru distribuirea cursurilor în facultatea de informatică”.
[anonimizat]-student: [anonimizat], [anonimizat].
[anonimizat], [anonimizat], dezvoltat și întreținut de catre comunitatea „Material Programming Comunity”, în prezenta lucrare fiind ddetaliat la capitolul II al lucrării.
[anonimizat] 100% de mine (absolvent: [anonimizat], [anonimizat]+[anonimizat]-ul de prezentare și distribuire al cursurilor.
Website-[anonimizat] „Acasă”, ce deserveste a prezentarea detaliată a [anonimizat] a facultăților din cadrul ei.
Sectiunea „Cursuri”, [anonimizat].
Sectiunea „Despre F.I.”, prezintă în detaliu facultatea de informatică din cadrul universității.
Ultima sectiune fiind „Contact”, [anonimizat], cât si administratorului de website.
A doua parte a website-ului, [anonimizat] „Introducere”, [anonimizat], urmând celelalte sectiuni ale blocului, care sunt efectiv cursurile (curs1,curs2,curs3, etc.).
Odată intrat pe unul din cursuri, se pot vizualiza câteva detalii despre curs, si se poate interacționa cu butonul „Deschide cursul complet”, care deschide intr-o nouă pagină(pdf) cursul complet.
Capitolul I – Prezentarea tehnologiilor folosite
Pentru realizarea website-ului de prezentare si distribuire al cursurilor în facultatea de informatică am utiizat limbajele de programare HTML,CSS, JavaScript, dar și framework-ul Angular, dezvoltat și întreținut de „Material Programming Comunity”.
HTML – este o formă de marcare orientată către prezentarea documentelor text pe o singură pagină, utilizând un software de redarespecializat, numit agent utilizator HTML, cel mai bun exemplu de astfel de software fiind browserul web.
Este un format de text proiectat pentru a putea fi citit și editat de oameni utilizând un editor de text simplu, dar totuși scrierea, atât modificarea paginilor create și concepute în HTML necesită cunoștiințe solide.
El se mai poate utiliza și direct generând tehnologii de codare din partea serverului cum ar fi PHP, JSP, ASP sau utilizând framework-uri asa cum am folosit în prezenta lucrare.
Limbajul mai poate fi utilizat în e-mail, el fiind utilizat în majoritatea aplicațiilor de e-mail, unde se folosesc editoare de text HTML, încorporat pentru compunerea si manipularea e-mail-urilor.
Un exemplu foarte clar de cod HTML este următorul :
<html>
<head>
<title> Prezentare cursuri facultatea de informatică</title>
<body> aici este strictura vizuală a website-ului. </body>
</html>
Acest exemplu de cod HTML realizează efectiv o pagină web cu titlul „Prezentare cursuri facultatea de informatică” și cu textul în pagină „aici este structura vizuală a website-ului.”, aceste tag-rui fiind obligatorii în toate website-urile de pe internet. (<html>,<title> și <body> împreună cu tag-urile aferente închiderii lor </body>,</title>,</html> )
CSS – este un standard pentru formatarea elementelor unui document HTML.
El folosește concepte de stilizare care se pot atașa elementelor din dcumentele HTML prin tag-ul <style> și/sau atributul style.
Acest standard se mai poate folosi si pe formatarea elementelor XHTML. XML și SVGL.
Unele dintre cele mai importante segmente ale CSS sunt „Selectors”, ”Box Model”, ”Backgrounds and Borders”, „Image Values”, „Text Effects”, „Animations”, „Multiple Column layout” sau „User Interface”.
Deși aceste segmente CSS unt create pentru a stiliza paginile HTML, de-a lungul timpului au apărut nenumărate deficiente de compatibilitate între browsere, dar majoritatea lor sunt implementate cu succes în variantele noi de browsere.
Un exemplu de cod CSS esye următorul :
Bored-radius: 5px 7px 12px 4px;
Aceste valori multiple efinesc cât de mult vor fi rotunjite colțurile elementului HTML asociat blocului de cod CSS, iar pentru fiecare colț este specificată valoarea în pixeli, CSS având ul algoritm de calcul pentru determinarea pixelolor de pe ecranul pe care este afișat elementul stilizat.
Elementul HTML „div” este definit de următoarele proprietăți CSS: dimensiunea în lungime este redată de valoarea în pixeli aproprietății „width”, foloseșteo bordură de 2 pixeli, o bordură solidă de culoare gri-închis definită de cloarea HEX #33333.
Culoarea prestabilită de fundal în CSS ste gri deschis definită de HEX #dddddd.
JAVASCRIPT – este un limbaj de programare orientat obiect bazat pe conceptul prototipurilor*.
Este folosit mai ales pentru introducerea unor funcționalități în paginile web codul javascript din aplicații find rulat de browser.
El este folosit în conceperea paginilor web, dar este folosit și pentru accesul la obiecte încastrate în alte aplicații..
În ciuda faptului că numele și unele similarități în sintaxă, între JavaScript si Java nu există nicio legătură de rudenie. Ca si Java, JavaScript are o sintaxă apopiată de cea a limbajului C deoarece este parintele limbajelor de programare orientate obiect, dar are mai multe în comun cu limbajul Self decât cu Java.
*conceptul prototipurilor sau programarea orpentată pe obiect este o paradigmă de programare, axată pe ideea încapsulării, adică grupării datelor și codului care operează asupra lor, intr-o singură structura, aceea fiind unică.
Un exemplu clar de cod JavaScript este următorul :
var x = "world";
var compare1 = ( "Hello, " + x === "Hello, world" ) ; // Acum, compare1 conține adevărat.
var compare2 = ( "Hello, " + x === "hello, world" ) ; // Acum, compare2 conține …
// … fals, deoarece …
// … primele caractere …
// … de ambii operanzi …
// … nu sunt de același tip.
*Acest cod arată foarte clar că în JavaScript există variabile, se utilizează sintaxe de comparare si operanzi.
Ultimul element utilizat in crearea prezentei lucrări de licența este framework-ul Angular, prin care am folosit obiectele furnizate de comunitatea de programatori pe care o detine „Material Framework Comunity”.
ANGULAR – este un limbaj de design sprijinit de Google încă din 2014, dar dezvoltat de comunitatea de programatori web din lumea întreagă.
Cest framework vine cu obiecte customizate de catre programatori pe care le poate utiliza orice alt programator fiind un framework *open-source
*open-sourece = bloc de cod pe care il pot folosi programatorii în mod gratuit, atat pentru implementarea lui in program cât si pentru editarea lui si folosirea ulterioara.
De altfel Angular înca de la finele anului 2015 a venit cu un nou update, care permite compilarea codului sursa si pe platforma Android Studio, care de altfel este creata si sustinută de gigantul din domeniul IT – Google.
Img 1 – obiecte create cu ajutorul angular-material framework
Capitolul II – Prezentarea website-ului
Website-ul creat de mine cu scopul prezentării si distribuirii cursurilor din cadrul facultății de informatică are urmatoarea structura a interfetei vizuale :
Atunci când intrăm pe website, prima pagina este cea sub intitulatura „Acasă”,
Aceasta cuprinde în partea din stâga o linie verticală, prin care sunt afișate meniurile aplicatiei, primul fiind „Acasă”, urmat de „Cursuri”, apoi de „Despre F.I.”, și meniul „Contact”.
De altfel apasând pe butonul din colțul din dreapta de sus din website, se poate accesa intr-o variantă standard meniul website-ului :
La apăsarea butonului de meniu standard pegina web va fi afișată în partea stângă a paginii iar meniul în partea dreaptă a paginii, în felul următor :
Apăsând pe butonul „Cursuri”, din meniul website-ului sau din linia verticală de pe prima pagină,
Intrăm in cea de-a doua secțiune a website-ului, care este realizată pentru vizualizarea de ansamblu a cursurilor facultății de informatică, ea aratând în felul următor :
După prezentarea principalei părți a website-uui vom reveni la această parte pentru a o detalia mai mult.
Urmatoarea componentă a website-ului este tag-ul 3 din meniu sau din linia verticală, care este destinat prezentării facultății de informatică.
In aceasta pagina existând texte detaliate despre facultatea de informatică, cât și câteva imagini dupa cum urmează :
Se poate vedea un text box principal, unde se găsesc detaliile facultătii de informatică iar sub el se poate vedea si o mică galerie de imagini din cadrul facultății, cât și din cadrul cursurilor :
In ultimul tag al meniului website-ului se gaseste secțiunea „Contact”,
Unde, dacă ne uităm în detaliu putem vedea următoarele elemente de pe pagiă,
Pe background-ul paginii se găseste integrată harta și locația exactă a Universității Titu Maiorescu din Bucuresti, dar si următorul iframe din pagină :
Elementele care se găsesc în iframe-ul dedicat secțiunii de „Contact” sunt următoarele,
Primul element este un textbox, prin care se afișează adresa exactă a Universității Titu Maiorescu din București.
Al doi-lea element este tot un textbox, prin care se afișează adresa de e-mail a instituției.
Al trei-lea element este tot un textbox, prin care se afișează numărul de telefon al instituției
Butoanele de sub textbox-uri au urmatoarele funcții, ele fiind urmatoarele, „Website”,
„Facebook” și „Contact” :
La apăsarea butonului „Website” se apelează următorul cod, intrând pe :
Putem observa că la apelarea butonului aferent, s-a deschis wesite-ul Universității Titu Maiorescu din București.
Urmatorul buton, intitulat „Facebook” se apelează următorul cod :
La apelarea acestui buton, se deschide pagina de facebook a instituției.
La accesarea ultimului buton din iframe-ul contact, intitulat „Contact” se apeleaza următoarea linie de cod,
Deschide aplicația de e-mail pe care o are instalată utilizatorul pe mașina lui și îi afișează în câmpul „mailto”, e-mailul instituției : contact@utm.ro
Revenid la sectiunea „Cursuri” din meniul principal al website-ului, aceasta este cea mai importantă parte a website-ului deoarece acolo se vor găsi, efectiv cursurile pe care facultatea de informatică vrea să le distribuie către studenții săi,
Cursurile sunt prezentate intr-o galerie de imagini, cu o imagine reprezentativă pentru fiecare curs, cu titlul cursului dar si cu o mică descriere a cursului (maxim 10 cuvinte).
Pentru a schimba cursul trebuie sa apasăm pe butoamele din stânga și din dreapta, cele care sunt rotunde si au săgeți în ele
La apăsarea butonului de sageată se apelează următorul cod care,
Aparține unei clase liste de itemi și apelează un div slider image în cazul în care se apasă click pe imaginea efectiva, altfel se apelează următorul slider din listă pentru a face loc de accesare următorului curs.
Spre exemplu, în imaginea de mai sus am apelat butonul de săgeată dreapta noi fiind pe itemul din listă aferent cursului de programare JAVA, dupa apelarea functiei aferente săgeții am ajuns la itemul din listă aferent cursului de baze de date, conform urmatoarei imagini prezentate mai jos.
Dacă apasăm pe una imaginea aferentă itemului activ din lista HTML se va apela următoarea secvență de cod:
Această secvență de cod HTML, face ca la apăsarea imaginii din listă sa se acceseze efectiv secțiunea cursului aferent într-o nouă pagină, numită bazededate.html.
Acolo se poate vizualiza în detaliu cursul de Baze de Date, împreuna cu toată lista de cursuri, seminarii, laboratoare, toate detaliile aferente cursului, de la profesor itular pana la punctele credit obtinute în urma promovării cursului.
Tot de acolo se pot descărca și cursurile integral, conform următoarei proceduri, care va fi afișată mai jos dupa interfața vizuală ,
Interfață vizuală – cod de executie – afișare curs complet (format pdf)
Odată ce se deschide pagina de prezentare a cursului din cadrul website-ului, putem observa că ea este familiară cu cea principală.
Are 4 sectiuni care pot di accesate ori din bara verticală, ori din meniul din coltul de sus.
Aici se pot introduce cate cursuri și laboratoare sau seminarii sunt necesare prin creerea unei noi secvențe de cod, în cadrul codului sursă.
Prima sectiune a acestei pagini este intitulată „Introducere”, unde există un textbox prin care sunt prezentate detaliile cursului accesat din website.
Celelalte sectiuni sunt accesate apăsând pe butonul meniu din colțul din dreapta de sus al website-ului.
Din nou, exact ca în meniul principal, apelul la apăsare al butonului declanșează animația CSS și afișează meniul cursului ca aici :
Dacă apăsăm pe butonul „Curs 1” acesta va declanșa afișarea paginii aferente cursului 1 din cadrul disciplinei accesate înainte din meniul principal al website-ului, ca în exemplul următor, unde se deschide cursul 1 de baze de date.
În această pagină putem observa că există afișat un textbox cu detaliile cursului 1 din baze de date și apariția unui nou element în website, acela fiind butonul prin care poți accesa cursul 1 de baze de date complet (format pdf).
Butonul „Deschide cursul complet – curs 1”, la apelarea lui se compilează următoarea secvență de cod,
Codul de mai sus, afișează efectiv butonul si la declanșarea lui apăsănd pe el click stânga deschide într-o nouă pagină fișierul „curs_1.pdf” din directorul pe care îl dă programatorul de pe server.
Celelalte linii de cod fiind liniile care apelează iconița svg de pe un site web dedicat, necesară pentru stilizarea butonului direct din codul HTML, aceste coduri pot fi regăsite în detaliu în anexa cestei lucrări.
Ca rezultat al apelului acesti buton putem observa că se deschide următoarea fereastră web,
Această pagină fiind efectiv cursul integral, în format pdf, care poate fi descăcat direct de acolo de pe serverul care găzduiește ebsite-ul de prezentare și distribuire al cursurilor din cadrul facultății de informatică din cadrul Universității Titu Maiorescu din București.
Dacă vrem să trecem la următorul curs putem accesa cursul numărul 2 și prin intermediul liniei verticale puse la dispoziție de website ca fiind un element grafic de design, realizat cu ajutorul CSS-ului, apăsând pe butonul „03” sau „04”, ori butonul aferent cursului pe care vrem să îl lecturăm.
La apăsarea butonului „03” se apelează următoarea secvență de cod,
Care utilizează o listă de elemente și în functție de elementul care este apelat acel item se activeaază și afișează pagina dorită de către utilizator, în cazul nostru vom apela itemul numărul 3 din listă care o să afișeze cursul cu numărul 2 din disciplina baze de date dupa cum urmează :
Atunci când itemul numărul 3 din lista HTML este activat se poate observa că printr-o animație de stilizare din CSS textul se face în culoarea alb si apare în partea dreaptă a liniei verticale textul „Curs 2”, care indică ce curs a accesat utilizatorul.
Ca la precedentele explicate mai sus, modul de vizualizare al cursurilor 2, 3,4 etc., este la fel în cazul vizualizării cursului 1.
In final putem observa, că dacă intrăm din nou în meniul standard al website-ului aferent cursului de baze de date, tagul subliniat în meniu va fi cel curent, chiar dacă utilizatorul la accesat direct din linia verticală disponibila în tot website-ul :
Poate fi observat că tagul Curs 3 este subliniat cu o linie de culoare albastru care indică tag-ul curent din meniul în care este utilizatorul în momentul accesării meniului standard.
De altfel, website-ul poate fi utilizat atât pe rezolutia unui monitor standard (1920x1336px), așa cum a fost prezentat mai sus cât și pe rezoluții mai mici, ceea ce îi conferă starea de website adaptibil (eng. responsive).
Acum o sa prezint pe scurt cum se vede website-ul pe rezolutia adaptivă de telefon Samsung Galaxy S4 (320x560px) :
Prima pagină a website-ului pe o rezolutie de telefon („Acasă” – 320x560px)
Meniul website-ului pe o rezolutie de telefon („Meniul” – 320-560px)
A doua pagină a website-ului pe o rezolutie de telefon („Cursuri” – 320x560px)
A treia pagină a website-ului pe o rezolutie de telefon („Despre F.I.” – 320x560px)
A patra pagină a website-ului pe o rezolutie de telefon („Contact” – 320x560px)
Prima secțiune din website-ul cursului de baze de date(„Introducere”- 320x560px)
Meniul sectiunii cursului de baze de date („Meniul cursului”- 320x560px)
Sectiunea curs1 baze de date din website-ul de prezentare („Curs1” – 320x560px)
Curs 1 baze de date in format pdf. Din website-ul de prezentare („Curs 1.pdf”-320x560px)
Concluzie
În concluzie lucrarea de licență pe care am realizat-o cu ajutorul domnului profesor coordonator, dar și cu ajutorul tehnologiilor dezvoltate de comunitatea programatorilor și a limbajelor de programare HTML, CSS și JavaScript am reusit să înteleg cum functionează sistemul de distribuire și prezentare al cursurilor facultății de informatică din cadrul Universității Titu Maiorescu din București.
Am dobândit experiență și cunoștiinte avansate în dezvoltarea website-urilor și aplicațiilor folosind tehnologii web de ultimă generație, atât în cadrul lucrarii de licență cât și în cadrul cursurilor pe care le-am urmat la facultatea aferentă.
Sistemul propus de mine poate fi implementat la orice oră în cadrul facultății de informatică deoarece, îl recomanda faptul că este usor de utilizat, fiind folosit frameworkul Angular, website-ul a primit o interfață vizuala modernă care nu necesită multe resurse pe server, fiind foarte bine optimizat și nu în ultimul rând îl recomandă faptul că este optimizaat în asa fel în cât sa raspunda cu brio oricărei rezolutii de monitor sau ecran pe care este accesat website-ul, numit în continuare, „Aplicatie pentru prezentarea și distribuirea cursurilor în facultatea de informatică”.
Sistemul poate fi implementat și in alte facultăți sau universităti din România deoarece acesta este dinamic și se poate adapta oricărei cerinte de pe piață, indiferent de cât de complexă este aceasta.
Concluzia finală pe care o trag din această lucrare constă în faptul ca am reusit, într-un termen relativ mic să livrez un produs software care mă poate acredita pentru titlul pe care îl primesc în urma absolvirii cursurilor Facultății de Informatică din cadrul Universității „Titu Maiorescu” din Bucuresți, în sesiunea Iulie 2019.
Anexă – cod sursa aplicație web.
Cod HTML :
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Prezentare cursuri</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="licenta pentru prezentarea si distribuirea cursurilor in facultatea de informatica">
<meta name="keywords" content="facultatea,informatica,universitatea,titu,maiorescu,cursuri,curs1,seminar,laborator,bazededate,programareweb,programareorientataobiect,marketingdigital">
<meta name="author" content="Paraschiv Diana-Claudia">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<!– notification for small viewports and landscape oriented smartphones –>
<div class="device-notification">
<a class="device-notification–logo" href="#0">
<img src="assets/img/logo.png" height="20" width="20" alt="Global">
<p>Universitatea Titu Maiorescu – Cursuri</p>
</a>
<p class="device-notification–message">Nu este disponibilă rezoluția!</p>
</div>
<div class="perspective effect-rotate-left">
<div class="container"><div class="outer-nav–return"></div>
<div id="viewport" class="l-viewport">
<div class="l-wrapper">
<header class="header">
<a class="header–logo" href="index.html">
<img src="assets/img/logo.png" alt="Global">
<p>Universitatea Titu Maiorescu – Cursuri</p>
</a>
<div class="header–nav-toggle">
<span></span>
</div>
</header>
<nav class="l-side-nav">
<ul class="side-nav">
<li class="is-active"><span>Acasă</span></li>
<li><span>Cursuri</span></li>
<li><span>Despre F.I.</span></li>
<li><span>Contact</span></li>
</ul>
</nav>
<ul class="l-main-content main-content">
<li class="l-section section section–is-active">
<div class="intro">
<div class="intro–banner">
<h1>Începe<br>să înveți<br>de astăzi</h1>
<img src="assets/img/logomare.png" alt="Welcome">
</div>
<div class="intro–options">
<a href="#0">
<h3>Facultatea de Drept</h3>
<p>Facultatea pregateste specialisti in drept si administratie publică, care pot ocupa o gama larga de locuri de munca: avocati, notari, consilieri de intreprinderi, functionari publici, cadre didactice, magistrati, cercetatori stiintifici.</p>
</a>
<a href="#0">
<h3>Facultatea de Medicină</h3>
<p>Facultatea de Medicina a Universitatii “Titu Maiorescu” funcționează pe baza principiilor învățământului modern, care generează competiție și performanță, în spațiul academic național și european.</p>
</a>
<a href="#0">
<h3>Facultatea de Farmacie</h3>
<p>Facultatea de Farmacie este cea mai nouă facultate din Universitatea Titu Maiorescu, autorizată în iunie 2013.</p>
</a>
<a href="#0">
<h3>Facultatea de Psihologie</h3>
<p>Facultatea de Psihologie a Universității Titu Maiorescu a fost înființată în 1991, este acreditată prin Legea 239/2002 </p>
</a>
</div>
</div>
</li>
<li class="l-section section">
<div class="work">
<h2>Alege cursul pe care dorești să-l practici</h2>
<div class="work–lockup">
<ul class="slider">
<li class="slider–item slider–item-left">
<a href="#0">
<div class="slider–item-image">
<a href="mkdigi.html" target="_blank"> <img src="assets/img/mkdigi.jpg" alt="Victory"> </p>
</div>
<p class="slider–item-title">MARKETING DIGITAL </p> </a>
<p class="slider–item-description">Prezentarea cursului de marketing digital.
</a>
</li>
<li class="slider–item slider–item-center">
<a href="#0">
<div class="slider–item-image">
<a href="pweb.html" target="_blank"> <img src="assets/img/pweb.jpg" alt="Metiew and Smith"> </a>
</div>
<p class="slider–item-title">PROGRAMAREA APLICAȚIILOR WEB </p>
<p class="slider–item-description">Prezentarea cursului de programare web și crearea unui site.</p>
</a>
</li>
<li class="slider–item slider–item-right">
<a href="#0">
<div class="slider–item-image">
<a href="bazededate.html" target="_blank"><img src="assets/img/bd.jpg" alt="Alex Nowak"></a>
</div>
<p class="slider–item-title">BAZE DE DATE</p>
<p class="slider–item-description">Prezentarea și proiectarea unei baze de date.</p>
</a>
</li>
<li class="slider–item slider–item">
<a href="#0">
<div class="slider–item-image">
<a href="java.html" target="_blank"><img src="assets/img/java.jpg" alt="Alex Nowak"></a>
</div>
<p class="slider–item-title">LIMBAJ DE PROGRAMARE</p>
<p class="slider–item-description">Prezentarea cursului de programare avansata JAVA.</p>
</a>
</li>
</ul>
<div class="slider–prev">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
<path d="M561,1169C525,1155,10,640,3,612c-3-13,1-36,8-52c8-15,134-145,281-289C527,41,562,10,590,10c22,0,41,9,61,29
c55,55,49,64-163,278L296,510h575c564,0,576,0,597,20c46,43,37,109-18,137c-19,10-159,13-590,13l-565,1l182,180
c101,99,187,188,193,199c16,30,12,57-12,84C631,1174,595,1183,561,1169z"/>
</g>
</svg>
</div>
<div class="slider–next">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
<path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
</g>
</svg>
</div>
</div>
</div>
</li>
<li class="l-section section">
<div class="about">
<div class="about–banner">
<!–
<a href="#0">Career
<span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
<path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
</g>
</svg>
</span>
</a>
–>
<div class="intro–options1">
<a href="#0">
<p>Viitorul se prezintă excelent pentru specialiștii IT, începând cu funcțiile executive și terminând cu cele de conducere. Tehnologia este în plin avânt, companiile de Internet se dezvoltă expansiv și automatizarea pătrunde la nivelul tuturor sistemelor. Companiile existente își creează Website-uri și dezvoltă strategii Web în timp ce caută modalități de a-și reduce costurile prin automatizare. Un număr mare de specialiști IT va fi necesar pentru întreținerea sistemelor, îmbunătățirea rețelelor existente, implementarea de noi strategii, maximizarea conexiunilor la nivel global.
Facultatea de Informatică pregătește specialiști în informatică și tehnologia informației care pot ocupa o gamă largă de locuri de muncă: programatori de aplicații software, proiectanți de site-uri WEB, proiectanți de sisteme de calcul și servicii de rețea, informaticieni în institute de cercetare, întreprinderi, administrație, birouri de creație multimedia, consultanța, profesori de informatică, cercetători în informatică, administratori de rețele de calculatoare, administratori de baze de date.
<br><br>
Adresa clădirii unde se desfășoară activitățile didactice: Calea Văcărești nr. 187, corp V și corp M, sector 4, București
Amfiteatre: 3, fiecare cu 100 de locuri
Laboratoare de informatică: 5, fiecare cu 25 de stații de lucru
Săli de seminar: 8
Data Center propriu realizat în tehnologie Blade și virtualizare
Acces pentru profesori și studenți la DREAMSPARK PREMIUM și la Office 365
</p>
</a>
</div>
</div>
<div class="about–options">
<a href="#0">
</a>
<a href="#0">
</a>
<a href="#0">
</a>
</div>
</div>
</li>
<li class="l-section section">
<div class="contact">
<div class="contact–lockup">
<div class="modal">
<div class="modal–information">
<p>Calea Văcărești, nr. 187
Sector 4, București</p>
<a href="mailto:contact@utm.ro">contact@utm.ro</a>
<a href="tel:+148126287560">+40 754 754 745</a>
</div>
<ul class="modal–options">
<li><a href="http://utm.ro">Website</a></li>
<li><a href="https://www.facebook.com/pages/Universitatea-Titu-Maiorescu/807173936024806?__tn__=%2CdK-R-R&eid=ARAsFiaVnHSJgp2QovT10vQbkHIG-eAvJhyJL17bZZZEDiNOwC2232MAYBKi1qwcfnN0cg4v_DBHyIUA&fref=tag">Facebook</a></li>
<li><a href="mailto:contact@utm.ro">Contact</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<ul class="outer-nav">
<li class="is-active">Acasă
</li>
<li>Cursuri</li>
<li>Despre F.I.</li>
<li>Contact</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery-2.2.4.min.js"><\/script>')</script>
<script src="assets/js/functions-min.js"></script>
</body>
</html>
Bazededate.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Prezentare cursuri</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="licenta pentru prezentarea si distribuirea cursurilor in facultatea de informatica">
<meta name="keywords" content="facultatea,informatica,universitatea,titu,maiorescu,cursuri,curs1,seminar,laborator,bazededate,programareweb,programareorientataobiect,marketingdigital">
<meta name="author" content="Paraschiv Diana-Claudia">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<!– notification for small viewports and landscape oriented smartphones –>
<div class="device-notification">
<a class="device-notification–logo" href="#0">
<img src="assets/img/logo.png" height="20" width="20" alt="Global">
<p>Universitatea Titu Maiorescu – Cursuri</p>
</a>
<p class="device-notification–message">Nu este disponibilă rezoluția!</p>
</div>
<div class="perspective effect-rotate-left">
<div class="container"><div class="outer-nav–return"></div>
<div id="viewport" class="l-viewport">
<div class="l-wrapper">
<header class="header">
<a class="header–logo" href="index.html">
<img src="assets/img/logo.png" alt="Global">
<p>Universitatea Titu Maiorescu – Cursuri</p>
</a>
<div class="header–nav-toggle">
<span></span>
</div>
</header>
<nav class="l-side-nav">
<ul class="side-nav">
<li class="is-active"><span>Introducere</span></li>
<li ><span>Curs 1</span></li>
<li><span>Curs 2</span></li>
<li><span>Curs 3</span></li>
</ul>
</nav>
<ul class="l-main-content main-content">
<li class="l-section section section–is-active">
<div class="intro">
<p>Sistemele de baze de date sunt o componentă esențială a
vieții de zi cu zi în societatea modernă. În cursul unei zile,
majoritatea persoanelor desfășoară activități care implică
interacțiunea cu o bază de date: depunerea sau extragerea unor
sume de bani din bancă, rezervarea biletelor de tren sau avion,
căutarea unei referințe într-o bibliotecă computerizată,
cumpărarea unor produse etc.
Bazele de date pot avea dimensiuni (număr de înregistrări)
extrem de variate, de la câteva zeci de înregistrări (de exemplu,
baza de date pentru o agendă cu numere de telefon) sau pot
ajunge la zeci de milioane de înregistrări (de exemplu, baza de
date pentru plata taxelor și a impozitelor).
Utilizatorii unei baze de date au posibilitatea să efectueze
mai multe categorii de operații asupra datelor memorate:
• introducerea de noi date (insert);
• ștergerea unora din datele existente (delete);
• actualizarea datelor memorate (update);
• interogarea bazei de date (query) pentru a regăsi anumite
informații, selectate după un criteriu ales. </p>
</div>
</li>
<li class="l-section section">
<div class="intro">
<div class="about–banner">
<!–
<a href="#0">Career
<span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
<path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
</g>
</svg>
</span>
</a>
–>
<div class="intro–options1">
<a href="#0">
<p>O bază de date (database) este o colecție de date creată și
menținută computerizat, care permite operații de introducere,
ștergere, actualizare și interogare a datelor.
Simple colecții de fișe (documente pe hârtie) sau fișiere de
date, care conțin înregistrări de date, dar nu permit operații de
interogare, nu sunt considerate baze de date. De exempu, datele
memorate în fișiere pe disc de un instrument de calcul tabelar
(Microsoft Excel) sau documentele memorate de un editor de
text (Microsoft Word) nu sunt considerate baze de date. <br>
1.1. Componentele unui sistem de baze de date
Un sistem de baze de date (Database System) este un
sistem computerizat de menținere a evidenței unei anumite
activități, folosind baze de date. Componentele unui sistem de
baze de date sunt: hardware, software, utilizatori, date
persistente.
Hardware. Sistemele de baze de date sunt instalate, de
regulă, pe calculatoare de uz general, de la calculatoare PC
standard, până la stații multiprocesor puternice.
</p>
</a>
</div>
<br> <br> <br>
<a href="assets/pdf/curs_1.pdf" target="_blank">Deschide cursul complet – CURS 1
<span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
<path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
</g>
</svg>
</span>
</a>
</div>
</div>
</li>
<li class="l-section section">
<div class="about">
<div class="about–banner">
<div class="intro–options1">
<a href="#0">
<p>De exemplu, programul care permite menținerea și
urmărirea activității angajaților unei întreprinderi (încadrare,
calificare, salarizare etc.), folosind informațiile despre angajați
memorate într-o bază de date, reprezintă o aplicație de baze de
date.
Utilizatorii unui sistem de baze de date se pot împărți în
câteva categorii: programatorii de aplicații, utilizatorii finali și
administratorul bazei de date.
Programatorii de aplicații sunt cei care scriu (dezvoltă)
aplicațiile de baze de date, folosind limbaje de programare de
nivel înalt (Cobol, PL/1, Fortran, C, C++, Java, Basic) și
biblioteci care permit încorporarea operațiilor de acces la baza
de date. Aplicațiile rezultate pot fi aplicații cu execuție
independentă (batch-processing) sau pot fi aplicații interactive
(on-line) folosite de utilizatorii finali ai sistemului pentru a
accesa (într-un mod mai eficient și mai sigur) baza de date. </p>
</a>
</div>
<br> <br> <br>
<a href="assets/pdf/curs_2.pdf" target="_blank">Deschide cursul complet – CURS 2
<span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
<path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
</g>
</svg>
</span>
</a>
</div>
</div>
</li>
<li class="l-section section">
<div class="about">
<div class="about–banner">
<!–
<a href="#0">Career
<span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
<path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
</g>
</svg>
</span>
</a>
–>
<div class="intro–options1">
<a href="#0">
<p>Datele memorate într-o bază de date sunt date persistente,
adică date care rămân memorate pe suport magnetic,
independent de execuția programelor de aplicații. Datele
persistente ale unei baze de date se introduc, se șterg sau se
actualizează folosind date de intrare (provenite de la tastatură,
din citirea unor fișiere de date sau din recepționarea unor
mesaje). Datele de intrare sunt, în general, date nepersistente;
ele sunt generate de utilizatori și sunt memorate (devenind date
persistente), numai după ce au fost validate (acceptate), de
către SGBD. Datele de ieșire ale unui sistem de baze de date
sunt, de asemenea, date nepersistente; ele provin din operații de
interogare a bazei de date și sunt puse la dispoziția
utilizatorului (sub formă de afișări, rapoarte tipărite etc).
Aceste tipuri de utilizatori asigură exploatarea unei baze de
date după ce aceasta a fost proiectată și realizată. </p>
</a>
</div>
<br> <br> <br>
<a href="assets/pdf/curs_3.pdf" target="_blank">Deschide cursul complet – CURS 3
<span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
<path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
</g>
</svg>
</span>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<ul class="outer-nav">
<li >Introducere </li>
<li>Curs 1</li>
<li>Curs 2</li>
<li>Curs 3</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery-2.2.4.min.js"><\/script>')</script>
<script src="assets/js/functions-min.js"></script>
</body>
</html>
Cod CSS :
Main.css
@font-face{font-family:'Montserrat';src:url("fonts/Montserrat-Black.eot");src:local("☺"),url("fonts/Montserrat-Black.woff") format("woff"),url("fonts/Montserrat-Black.ttf") format("truetype"),url("fonts/Montserrat-Black.svg") format("svg");font-weight:900;font-style:normal}@font-face{font-family:'Montserrat';src:url("fonts/Montserrat-Bold.eot");src:local("☺"),url("fonts/Montserrat-Bold.woff") format("woff"),url("fonts/Montserrat-Bold.ttf") format("truetype"),url("fonts/Montserrat-Bold.svg") format("svg");font-weight:700;font-style:normal}@font-face{font-family:'Montserrat';src:url("fonts/Montserrat-Regular.eot");src:local("☺"),url("fonts/Montserrat-Regular.woff") format("woff"),url("fonts/Montserrat-Regular.ttf") format("truetype"),url("fonts/Montserrat-Regular.svg") format("svg");font-weight:400;font-style:normal}@font-face{font-family:'Montserrat';src:url("fonts/Montserrat-Light.eot");src:local("☺"),url("fonts/Montserrat-Light.woff") format("woff"),url("fonts/Montserrat-Light.ttf") format("truetype"),url("fonts/Montserrat-Light.svg") format("svg");font-weight:300;font-style:normal}/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}::-moz-selection{background:#FFF498}::selection{background:#FFF498}::-moz-selection{background:#FFF498}img::-moz-selection{background:transparent}img::selection{background:transparent}img::-moz-selection{background:transparent}body{-webkit-tap-highlight-color:#FFF498}body{background-color:#0c0c0c;font-size:14px;line-height:1.6;font-family:"Montserrat",sans-serif;color:#fff;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}.l-viewport{position:relative;width:100%;height:100vh;box-shadow:0 0 45px 5px rgba(0,0,0,0.85);overflow:hidden}.l-wrapper{position:relative;width:1440px;max-width:90%;height:100%;margin:0 auto}.l-side-nav{position:absolute;left:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.l-side-nav::before{content:"";position:absolute;top:50%;left:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:2px;height:70%;max-height:750px;background-color:#555;opacity:.35;z-index:10}@media (max-width: 1180px){.l-side-nav{display:none}}.l-main-content{position:relative;width:100%;height:100%;margin:0;padding:0;list-style:none}.l-section{position:absolute;width:100%;height:100%}.device-notification{display:none;position:fixed;top:0;left:0;width:100%;height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background-color:#0c0c0c;z-index:12}.device-notification–logo{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-decoration:none;color:#fff}.device-notification–logo p{margin:0 0 0 10px;font-size:16px;font-weight:700;text-transform:uppercase}.device-notification–message{width:70%;margin:30px 0 0 0;font-weight:700;text-align:center}@media (max-width: 767px) and (min-width: 601px) and (max-height: 680px){.device-notification{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}}@media (max-width: 600px) and (min-width: 480px) and (max-height: 580px){.device-notification{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}}@media (max-width: 736px) and (min-width: 360px) and (orientation: landscape){.device-notification{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}}@media(max-width: 359px){.device-notification{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}}.section{opacity:0;visibility:hidden;-webkit-transition:opacity .4s ease-in-out,visibility 0s .4s;transition:opacity .4s ease-in-out,visibility 0s .4s}.section–is-active{opacity:1;visibility:visible;z-index:1;-webkit-transition:opacity .4s ease-in-out .4s;transition:opacity .4s ease-in-out .4s}.section–next{-webkit-transform:translateY(-45px);transform:translateY(-45px);-webkit-transition:-webkit-transform .4s ease-in-out;transition:-webkit-transform .4s ease-in-out;transition:transform .4s ease-in-out;transition:transform .4s ease-in-out, -webkit-transform .4s ease-in-out}.section–prev{-webkit-transform:translateY(45px);transform:translateY(45px);-webkit-transition:-webkit-transform .4s ease-in-out;transition:-webkit-transform .4s ease-in-out;transition:transform .4s ease-in-out;transition:transform .4s ease-in-out, -webkit-transform .4s ease-in-out}.header{position:absolute;top:0;left:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:70px;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;z-index:10}.header–logo{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-decoration:none;color:#fff}.header–logo p{margin:0 0 0 10px;font-size:16px;font-weight:700;text-transform:uppercase}.header–nav-toggle{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:50px;height:50px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;cursor:pointer}.header–nav-toggle span,.header–nav-toggle::before,.header–nav-toggle::after{content:"";position:relative;width:16px;height:2px;background-color:#fff}.header–nav-toggle::before{bottom:5px;width:23px}.header–nav-toggle::after{top:5px;width:23px}.header–cta{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);padding:0 20px;line-height:30px;text-decoration:none;color:#fff;font-weight:700;text-transform:uppercase;background-color:#0f33ff;border:none;opacity:0;visibility:hidden;-webkit-transition:opacity .4s ease-in-out,visibility 0s .4s;transition:opacity .4s ease-in-out,visibility 0s .4s}.header–cta:focus{outline:none}.header–cta.is-active{opacity:1;visibility:visible;-webkit-transition:opacity .4s ease-in-out .4s;transition:opacity .4s ease-in-out .4s}@media (max-width: 767px){.header–cta{display:none}}.side-nav{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100px;height:70%;max-height:750px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around;margin:0;padding:0;list-style-position:inside;z-index:10}.side-nav>li{position:relative;top:-5px;color:#fff;font-size:6px;cursor:pointer}.side-nav>li span{position:relative;top:3px;left:10px;color:#fff;font-size:14px;font-weight:300;opacity:0;visibility:hidden}.side-nav>li::before{position:absolute;top:3px;left:10px;color:#555;font-size:14px;font-weight:300}.side-nav li:nth-child(1)::before{content:"01"}.side-nav li:nth-child(2)::before{content:"02"}.side-nav li:nth-child(3)::before{content:"03"}.side-nav li:nth-child(4)::before{content:"04"}.side-nav li:nth-child(5)::before{content:"05"}.side-nav li.is-active{color:#0f33ff;-webkit-transition:color .4s ease-in-out;transition:color .4s ease-in-out}.side-nav li.is-active span{opacity:1;visibility:visible;-webkit-transition:opacity .4s ease-in-out;transition:opacity .4s ease-in-out}.side-nav li.is-active::before{left:-33px;color:#fff}.intro{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:900px;max-width:75%;height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:0 auto}@media (max-width: 1180px){.intro{max-width:100%}}.intro–banner{position:relative;height:475px}.intro–banner::before{content:"";position:absolute;bottom:20px;left:-15px;right:0;height:2px;background-color:#282828}.intro–banner::after{content:"";position:absolute;bottom:18px;left:0;width:30px;height:4px;background-color:#0f33ff}.intro–banner h1{position:relative;font-size:90px;font-weight:900;line-height:1;z-index:1}.intro–banner button{position:relative;padding:5px 17px 5px 12px;font-weight:700;text-transform:uppercase;background-color:transparent;border:none}.intro–banner button .btn-background{position:absolute;top:0;left:23px;right:0;height:100%;background-color:#0f33ff;z-index:-1;-webkit-transition:left .2s ease-in-out;transition:left .2s ease-in-out}.intro–banner button:hover .btn-background{left:0}.intro–banner button:focus{outline:none}.intro–banner button svg{position:relative;left:5px;width:15px;fill:#fff}.intro–banner img{position:absolute;bottom:21px;right:-12px}.intro–options{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;margin:0;padding:0;list-style:none}.intro–options>a{max-width:250px;text-decoration:none;color:#282828;-webkit-transition:color .2s ease-in-out;transition:color .2s ease-in-out}.intro–options>a:hover{color:#fff}.intro–options h3{font-size:16px;text-transform:uppercase}.intro–options p{margin-bottom:0}@media (max-width: 900px){.intro–banner{height:380px}.intro–banner h1{font-size:55px}.intro–banner img{width:430px}.intro–options>a{margin-right:30px}.intro–options>a:last-child{margin-right:0}}@media (max-width: 767px){.intro–banner{height:305px}.intro–banner h1{font-size:44px}.intro–banner img{width:330px}.intro–options{display:block}.intro–options>a{display:block;max-width:100%;margin:0 0 30px 0}.intro–options>a:last-child{margin-bottom:0}}@media (max-width: 600px){.intro–banner{height:360px}.intro–banner h1{font-size:55px}.intro–banner img{display:none}}@media (max-width: 600px) and (max-height: 750px){.intro–banner{height:auto}.intro–banner::before,.intro–banner::after{display:none}.intro–banner h1{margin-top:0}.intro–options{display:none}}.work{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:960px;max-width:80%;height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:0 auto}@media (max-width: 1180px){.work{max-width:100%}}.work h2{margin:0 0 20px 0;font-size:30px;text-align:center}.work–lockup{position:relative}.work–lockup .slider{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:80%;margin:0 auto;padding:0;list-style:none}.work–lockup .slider–item{position:absolute;display:none;text-align:center}.work–lockup .slider–item a{text-decoration:none;color:#858585}.work–lockup .slider–item-title{margin-top:10px;font-size:12px;font-weight:700;text-transform:uppercase}.work–lockup .slider–item-description{display:none;max-width:250px;margin:0 auto}.work–lockup .slider–item-image{width:150px;height:150px;margin:0 auto;border-radius:50%;overflow:hidden}.work–lockup .slider–item-image img{width:100%}.work–lockup .slider–item-left{top:50%;left:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);display:block}.work–lockup .slider–item-right{top:50%;right:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);display:block}.work–lockup .slider–item-center{position:relative;top:30px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);display:block}.work–lockup .slider–item-center a{color:#fff}.work–lockup .slider–item-center .slider–item-title{margin-top:25px;font-size:16px}.work–lockup .slider–item-center .slider–item-description{display:block}.work–lockup .slider–item-center .slider–item-image{width:300px;height:300px}.work–lockup .slider–next,.work–lockup .slider–prev{position:absolute;top:160px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:50px;height:50px;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background-color:#282828;border-radius:50%;cursor:pointer}.work–lockup .slider–next svg,.work–lockup .slider–prev svg{width:20px;fill:#fff}.work–lockup .slider–next{right:0}.work–lockup .slider–prev{left:0}@media (max-width: 900px){.work–lockup .slider–item-image{width:120px;height:120px}.work–lockup .slider–item-center .slider–item-image{width:240px;height:240px}.work–lockup .slider–next,.work–lockup .slider–prev{top:130px}}@media (max-width: 767px){.work–lockup .slider{width:75%}.work–lockup .slider–item-image{width:90px;height:90px}.work–lockup .slider–item-center .slider–item-image{width:190px;height:190px}.work–lockup .slider–next,.work–lockup .slider–prev{top:105px}}@media (max-width: 600px){.work–lockup .slider{width:auto}.work–lockup .slider–item-left,.work–lockup .slider–item-right{display:none}}.about{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:900px;max-width:75%;height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:0 auto}@media (max-width: 1180px){.about{max-width:100%}}.about–banner{position:relative;height:475px}.about–banner::before{content:"";position:absolute;top:20px;left:200px;-webkit-transform:rotate(-25deg);transform:rotate(-25deg);border:5px solid #0f33ff;border-right-color:transparent;border-bottom-color:transparent}.about–banner::after{content:"";position:absolute;top:75px;left:400px;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:10px;height:10px;background-color:#ffffff00}.about–banner h2{position:relative;margin-top:35px;font-size:68px;font-weight:900;line-height:1;z-index:1}.about–banner h2::before{content:"";position:absolute;top:60px;left:268px;width:30px;height:30px;background-color:#0f33ff;border-radius:50%}.about–banner h2::after{content:"";position:absolute;top:255px;left:255px;width:10px;height:10px;background-color:#0f33ff}.about–banner a{padding:5px 17px 5px 0;text-decoration:none;color:#fff;font-weight:700;text-transform:uppercase;background-color:transparent}.about–banner a:hover svg{left:10px}.about–banner a svg{position:relative;left:5px;width:15px;fill:#fff;-webkit-transition:left .2s ease-in-out;transition:left .2s ease-in-out}.about–banner img{position:absolute;bottom:-90px;right:-12px}.about–options{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;max-width:600px;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;margin:0;padding:0;list-style:none}.about–options>a{position:relative;width:150px;height:75px;text-decoration:none;color:#fff;border:10px solid #0f33ff;background-position:center;background-size:cover;background-repeat:no-repeat}.about–options>a:nth-child(1){background-image:url("../img/about-winners.jpg")}.about–options>a:nth-child(2){background-image:url("../img/about-philosophy.jpg")}.about–options>a:nth-child(3){background-image:url("../img/about-history.jpg")}.about–options>a:hover h3{bottom:-50px}.about–options h3{position:absolute;bottom:-38px;left:10px;font-size:16px;text-transform:uppercase;-webkit-transition:bottom .2s ease-in-out,left .2s ease-in-out;transition:bottom .2s ease-in-out,left .2s ease-in-out}@media (max-width: 767px){.about–banner{height:305px}.about–banner::before{top:0;left:125px}.about–banner::after{top:35px;left:260px}.about–banner h2{margin-top:10px;font-size:44px}.about–banner h2::before{top:28px;left:168px}.about–banner h2::after{top:163px;left:163px}.about–banner img{width:315px}}@media (max-width: 600px){.about–banner{height:auto}.about–banner::before{left:155px}.about–banner::after{left:310px}.about–banner h2{margin-top:0;font-size:55px}.about–banner h2::before{top:43px;left:214px}.about–banner h2::after{top:205px;left:205px}.about–banner img{display:none}.about–options{display:none}}.contact{position:fixed;top:0;left:0;width:100%;height:100%;background-image:url("../img/contact-visual.png");background-position:center;background-size:cover;background-repeat:no-repeat}.contact–lockup{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:900px;max-width:75%;height:100%;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;margin:0 auto}@media (max-width: 1180px){.contact–lockup{max-width:90%}}@media (max-width: 767px){.contact–lockup{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}}.contact–lockup .modal{padding:45px 45px;text-align:center;background-color:#0c0c0c;box-shadow:0 0 30px 0 rgba(0,0,0,0.75)}.contact–lockup .modal–information p,.contact–lockup .modal–information a{display:block;margin:14px 0;text-decoration:none;color:#fff;font-weight:700}.contact–lockup .modal–information p{margin-top:0}.contact–lockup .modal–options{margin:0;padding:0;list-style:none}.contact–lockup .modal–options>li{width:130px;margin:0 auto 25px auto}.contact–lockup .modal–options li:nth-child(1){background-color:#1769ff}.contact–lockup .modal–options li:nth-child(2){background-color:#ea4c89}.contact–lockup .modal–options li:nth-child(3){margin-bottom:0;background-color:#0f33ff;text-transform:uppercase}.contact–lockup .modal–options a{display:block;width:100%;padding:8px 0;text-decoration:none;color:#fff;font-weight:700}.hire{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:700px;max-width:75%;height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:0 auto}@media (max-width: 1180px){.hire{max-width:100%}}.hire h2{margin:0 0 20px 0;font-size:30px;text-align:center}.work-request{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;color:#fff}.work-request input[type="submit"]{width:400px;max-width:100%;line-height:50px;font-size:16px;font-weight:700;text-transform:uppercase;background-color:#0f33ff;border:none;border-radius:0}.work-request input[type="submit"]:focus{outline:none}.work-request–options{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin:30px 0}.work-request–options .options-a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.work-request–options .options-b{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:72%;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.work-request–options label{display:block;width:200px;margin-bottom:30px;line-height:50px;font-size:16px;font-weight:700;text-align:center;border:2px solid #fff;cursor:pointer;-webkit-transition:background-color .2s ease-in-out,border-color .2s ease-in-out;transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.work-request–options label svg{position:relative;left:-5px;width:0;fill:#fff;-webkit-transition:width .2s ease-in-out;transition:width .2s ease-in-out}.work-request–options input[type="checkbox"]{display:none}.work-request–options input[type="checkbox"]:checked+label{background-color:#0f33ff;border-color:#0f33ff}.work-request–options input[type="checkbox"]:checked+label svg{width:15px}.work-request–information{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:60px}.work-request–information .information-name,.work-request–information .information-email{position:relative;width:45%;height:50px;font-size:30px;font-weight:300}.work-request–information input[type="text"],.work-request–information input[type="email"]{width:100%;padding:0 0 5px 0;background-color:transparent;border:none;border-bottom:1px solid #fff;border-radius:0}.work-request–information input[type="text"]:focus,.work-request–information input[type="email"]:focus{outline:none;background-color:#0c0c0c}.work-request–information label{position:absolute;top:0;left:0;pointer-events:none;-webkit-transition:top .2s ease-in-out,font-size .2s ease-in-out;transition:top .2s ease-in-out,font-size .2s ease-in-out}.work-request–information input:focus+label,.work-request–information input.has-value+label{top:-15px;font-size:14px}@media (max-width: 767px){.work-request–options{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.work-request–options .options-a,.work-request–options .options-b{display:block;width:auto}}@media (max-width: 600px){.work-request–options{margin:20px 0}}@media (max-width: 600px) and (max-width: 415px){.work-request–options{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}}@media (max-width: 600px){.work-request–options label{width:150px;margin-bottom:15px;font-size:14px}.work-request–options input[type="checkbox"]:checked+label svg{width:12px}.work-request–information{margin-bottom:30px}.work-request–information .information-name,.work-request–information .information-email{height:40px;font-size:24px}}.perspective{position:relative;width:100%;height:100%;overflow:hidden}.perspective–modalview{position:fixed;-webkit-perspective:1500px;perspective:1500px}.container{position:relative;-webkit-transform:translateZ(0) translateX(0) rotateY(0deg);transform:translateZ(0) translateX(0) rotateY(0deg);min-height:100%;outline:30px solid #0f33ff;-webkit-transition:-webkit-transform .4s;transition:-webkit-transform .4s;transition:transform .4s;transition:transform .4s, -webkit-transform .4s}.modalview .container{position:absolute;width:100%;height:100%;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}.effect-rotate-left .container{-webkit-transform-origin:0% 50%;transform-origin:0% 50%;-webkit-transition:-webkit-transform .4s;transition:-webkit-transform .4s;transition:transform .4s;transition:transform .4s, -webkit-transform .4s}.effect-rotate-left–animate .container{-webkit-transform:translateZ(-1800px) translateX(-50%) rotateY(45deg);transform:translateZ(-1800px) translateX(-50%) rotateY(45deg);outline:30px solid #0f33ff}.outer-nav{position:absolute;top:50%;left:55%;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;margin:0;padding:0;list-style:none;text-align:center;visibility:hidden;-webkit-transition:visibility 0s .2s;transition:visibility 0s .2s}.outer-nav.is-vis{visibility:visible}.outer-nav–return{position:absolute;top:0;left:0;width:100%;height:100%;display:none;cursor:pointer;z-index:11}.outer-nav–return.is-vis{display:block}.outer-nav>li{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateX(350px) translateZ(-1000px);transform:translateX(350px) translateZ(-1000px);font-size:55px;font-weight:900;opacity:0;cursor:pointer;-webkit-transition:opacity .2s,-webkit-transform .2s;transition:opacity .2s,-webkit-transform .2s;transition:transform .2s,opacity .2s;transition:transform .2s,opacity .2s,-webkit-transform .2s}.outer-nav>li.is-vis{-webkit-transform:translateX(0) translateZ(0);transform:translateX(0) translateZ(0);opacity:1;-webkit-transition:opacity .4s,-webkit-transform .4s;transition:opacity .4s,-webkit-transform .4s;transition:transform .4s,opacity .4s;transition:transform .4s,opacity .4s,-webkit-transform .4s}.outer-nav>li::before{content:"";position:absolute;top:100%;left:50%;-webkit-transform:translate(-50%, -25%);transform:translate(-50%, -25%);width:110%;height:15px;opacity:0;background-color:#0f33ff}.outer-nav>li.is-active::before{opacity:1}@media (max-width: 767px){.outer-nav>li{font-size:44px}}@media (max-width: 600px){.outer-nav>li{font-size:34px}}.outer-nav li.is-vis:nth-child(2){-webkit-transition-delay:.04s;transition-delay:.04s}.outer-nav li.is-vis:nth-child(3){-webkit-transition-delay:.08s;transition-delay:.08s}.outer-nav li.is-vis:nth-child(4){-webkit-transition-delay:.12s;transition-delay:.12s}.outer-nav li.is-vis:nth-child(5){-webkit-transition-delay:.16s;transition-delay:.16s}
.intro–options1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;margin:0;padding:0;list-style:none}
.intro–options1>a{max-width:1000px;text-decoration:none;color:#282828;-webkit-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
.intro–options1>a:hover{color:#fff}
.intro–options1 p{ margin-top:40px; margin-bottom:0}@media (max-width: 900px){.intro–banner{height:380px}.intro–banner h1{font-size:55px}.intro–banner img{width:430px}
.intro–options1>a{margin-right:30px}.intro–options1>a:last-child{margin-right:0}}@media (max-width: 767px){.intro–banner{height:305px}.intro–banner h1{font-size:44px}.intro–banner img{width:330px}.intro–options1{display:block}.intro–options1>a{display:block;max-width:100%;margin:0 0 30px 0}.intro–options1>a:last-child{margin-bottom:0}}@media (max-width: 600px){.intro–banner{height:360px}.intro–banner h1{font-size:55px}.intro–banner img{display:none}}@media (max-width: 600px) and (max-height: 750px){.intro–banner{height:auto}.intro–banner::before,.intro–banner::after{display:none}.intro–banner h1{margin-top:0}.intro–options{display:none}}
Copyright Notice
© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.
Acest articol: Proiectarea unui sistem informatic pentru distribuirea cursurilor in facultate. [306635] (ID: 306635)
Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.
