Pachet Multimedia Tur Virtual al Cetatii Oradea

PROIECT DE DIPLOMĂ

Pachet multimedia – Tur virtual al Cetății Oradea

Pachet multimedia- Tur virtual al Cetatii Oradea

Cuprins

CAPITOLUL I. INTRODUCERE

1.1 SCURT ISTORIC

CAPITOLUL II . TEHNOLOGII UTILIZATE PENTRU IMPLEMENTAREA APLICAȚIEI WEB

2.1 HTML5

2.2 CSS3

2.3 BOOTSTRAP 3.0

2.4 PHP

2.5 MYSQL

2.6 JAVASCRIPT ( JS)

CAPITOLUL III. APLICAȚII UTILIZATE

3.1 APLICAȚIA PTGUI

3.2 APLICAȚIA PHOTOSHOP CC

3.3 APLICATIA PANOTOUR 2.0

3.4 APLICAȚIA SUBLIMETEXT

3.5 PACHETUL DE PROGRAME XAMPP

CAPITOLUL IV. METODE DE CONCEPERE A UNUI TUR VIRTUAL

4.1 FOTOGRAFIEREA

4.2 ÎMBINAREA FOTOGRAFIILOR PROVENITE DE LA APARATUL DIGITAL

4.3 EDITAREA PANORAMELOR

4.4 CREAREA TURULUI VIRTUAL

4.5 TIPURI DE IMAGINI PANORAMICE

CAPITOLUL V . PROIECTAREA ȘI DEZVOLTAREA APLICAȚIEI WEB

5.1 STRUCTURA SITE-ULUI

5.2 PAGINA PRINCIPALĂ

5.3 PAGINA SCURT ISTORIC

5.4 PAGINA CE CUPRINDE HARTA INTERACTIVĂ

5.5 PAGINA TRIMITE-NE O POZĂ

5.6 PAGINA DE CONTACT

5.7 BAZA DE DATE

CAPITOLUL VI . CONCLUZII

BIBLIOGRAFIE

Capitolul I. Introducere

Tema aleasă pentru lucrarea de diplomă este formată dintr-un pachet multimedia, acesta cuprinde: Turul virtual al Cetătii Oradea, o galerie foto, o galerie video și o harta customizată. Pe această hartă sunt reprezentate clădirile cetății, bastioanele și punctele spre turul virtual. Am ales această temă deoarece pe parcursul ultimilor ani am devenit tot mai interesat de acest domeniu și cred că odată cu acestă alegere am imbinat cele două pasiuni: fotografia si programarea. Pagina web a Cetății din Oradea dezvoltată ca parte a acestei lucrări de diplomă utilizează ca punct de plecare, invățămintele experților din diversele arii ale dezvoltării personale si profesionale.

Motivul principal pentru care am ales acest domeniu cât și realizarea acestei aplicații web este dorința mea de a oferii celor ce nu pot vizita Cetatea Oradea o experiență unică, anume posibilitatea de a descoperii și de a parcurge Cetatea Oradea în întregime la doar un click distanță. Doresc ca odată cu parcurgerea turului virtual al cetății să atrag căt mai mulți turiști spre această perlă a municipiului. Acest tur se dorește a fi unul ușor utilizabil și în același timp compatibil cu toate tipurile de dispozitive.

Uneletele care mi-au ghidat drumul în această fortareață și care au făcut posibilă conceperea acestui tur virtual au fost: aparatul de fotografiat Nikon D7000 având ca obiective adiacente: Nikon DX AF-S 35 mm. Folosind acest obiectiv, am întămpinat o dificultate sporită în procesul de fotografiere tocmai din pricina deschiderii inguste a obiectivului. Obicetivele din categoria Fisheye cu o deschidere mult mai mare mi-ar fi ușurat semnificativ munca. Pe langă aparat am folosit un trepied HAMA STAR 75 care mi-a fost de un real ajutor în tot procesul de fotografiere.

Turul virtual al Cetății din Oradea este format din : 25 de panorama, din care 2 sunt panorama sunt full sferice, avănd un cămp de vizualizare de 360 pe orizontal cu 180 de grade pe vertical, iar cele 23 de panorame ramase au un camp de vizualizare de 360 pe orizontal și aproximativ 150 de grade pe vertical.

În demersul meu spre crearea turului virtual al Cetății Oradea am avut ca punct de sprijin pasiunea pentru fotografie și dorința de a impărtășii experiențele și tainele descoperite pe parcursul slefuirii turului virtual. Punerea intr-o lumină favorabilă a celui mai prețios edificiu cultural al municipiului a reprezentat desigur punctul de plecare și punctul forte de asemenea al acestei cercetări.

1.1 Scurt istoric

Cetatea Oradiei, ale cărei vestigii se pot vedea și astăzi, este menționată pentru prima dată în anul 1241, cu ocazia efectuării unor reparații rapide pentru înfruntarea unui atac iminent ce urma sa apară, acest atac venea din partea tătaro-mongolilor. Construirea cetății este atribuită Regelui Ladislau I (1077-1095). Acesta alflandu-se la vanătoare în Țara Crișului a ajuns într-o poiană, nu departe de râul Peța, acesta adormise repede, obosit după goana cerbilor.

În vis i s-au arătat doi ingeri, acestea i-au cerut regelui să ridice o mănăstire în cinstea Fecioarei Maria, această manăstire a fost clădită pe un loc numit Varad.

În jurul vechi cetăți, cea cu forme neregulate, ovală, s-a clădit cetatea din zilele de azi, cu o formă pentagonală, având un scop bine găndit, protejarea bunurilor interioare si a celor din apropierea ei.[1]

Figura 2.1 Planul Cetății[2]

Abia în a 2 jumătate a secolului al XVI-lea, în plină creștere a marelui Imperiu Otoman, încep lucrările de fortificații. Aceste lucrări vor dura pănă in 1618. Cetatea, în forma de azi, a fost asediată de mai multe ori dar n-a fost cucerită decăt de doar 2 ori. În toamna anului 1598, Cetatea din Oradea a fost asediată timp de cinci săptămăni de armata turcească, fără a fi repusă.

Orădenii l-au avut de partea lor pe domnul Țării Romănești, Mihai Viteazul, precum și ploile care au inundat tabăra otomană și bolile care au decimat-o.

În secolului al XI – lea, pe o mică insulă între brațul Crișului Repede, în apropierea pârâului Peța [numele acestui părâu vine de la Hewjo, in traducere liberă apă caldă], regele Ladislau I (1077-1095), hotărea să contruiească o mănăstire cu hramul Sfintei Fecioare Maria, iar mai apoi intemeiază episcopia romano-catolică de Oradea.

Cetatea Oradea avănd pe atunci un scop bine găndit, anume apărarea Mănăstirii căt și a bunurilor ce o inconjurau. Cetatea a compus nucleul polarizator al asezărilor din spațiul orădean, prin acea strangere în jurul ei a numeroaselor funcții: politice, militare, administrative și religioase.

În cele 9 secole de existență Cetatea a avut următoarele atribuțiuni:

a fost reședintă a Episcopiei romano-catolice de Oradea (1092-1557).

cetate a mai avut o altă intrebuințare, ea fiind un important centru militar, centru al Europei politice (1557-1857).

În acest timp Cetatea s-a deosebit ca fiind un important centru religios, cultural, aici activănd importante biblioteci ale vremii, un observator astronomic, o tiparniță și în special au fost instituții de invățămănt sub organizarea unor personalități importante. De-a lungul secolelor, cetatea a fost asediată de: tătari (1241), turci (1474, 1598, 1658, 1660), răsculați transilvanieni (1290, 1514, 1664, 1703-1710), ostile Principatului Transilvaniei (1557, 1603) si de austrieci (1692).

După 1692, Cetatea Oradea intră în componența sistemului militar hasburgic. Noii stăpânitori au acordat o semnificație aparte cetății, dovada stând acțiunile de reparații și reamenajări întreprinse în mai multe rânduri: 1692-1695, 1725,1754-1755, 1775-1777 și 1883-1887.

Din punct de vedere al evoluției sale istorice și a evenimentelor politico-militare, Cetatea Oradea a avut trei faze de existență: cetate cu val de pamant și palisada de lemn (până în 1241), cetate circulară de piatră (1247-1569), cetate pentagonală cu bastioane pe colțuri și șanț cu apă (din 1569). [3]

Deși în a doua jumătate a secolului XX Cetatea Oradea intră într-un nemeritat con de umbră, fiind ignorată atât de puterea administrativă cât și de populația și vizitatorii orașului, sondajele realizate după 1990 au reliefat faptul că unul dintre cele mai importante puncte de interes pentru comunitate este reabilitarea Cetații Oradea. Urmare a acestui fapt in 1998 sa demarat procesul de restaurarea a Cetații.

Figura 2.1 Harta Cetății[4]

Cetatea Oradea este alcătuită din cinci bastioane: Ciunt, Aurit, Roșu, Crăișorul și Bethlen, pe langă aceste cinci bastione în interiorul cetății se află mai multe cladiri, acestea avănd o bogată semnificație istorică.

Bastionul Ciunt a fost ridicat în perioda de dominație a regelui poloniei Ștefan Báthory (1571-1575). Pentru ca acest bastion a stat mult timp neterminat, el capătă numele de Bastionul Ciunt. În luna octombrie 1598, în timpul asediului, acest edificiu a fost avariat grav. În anul 1599, refacerea vârfului se face sub atenta supravegerhere a lui Cesare Porta iar mai apoi a lui Giovan-Marco Isolano.Terminarea reparațiilor asupra bastionului a fost marcată pe ultimul bloc de sub brâu, unde se găsește dăltuit anul renovării: 1599.

Bastionul Aurit construit, în anul 1572, la conducerea principelui Ștefan Báthory, el a fost afectat puternic de atacul otoman datorită orientării acestuia înspre Dealul Pisica (Dealul Ciuperca de azi) , reparația de cea mai mare amploare a fost realizată după asediul austriac din anul 1692.

Bastionul Roșu a fost clădit la comanda principeului, rege al poloniei Ștefan Báthory.

Bastionul are parte de mai multe etape constructive, acestea întinzânduse între 1580 și 1598. Asediul din 1660 a afectat foarte rău urechea estică, pe o zonă de aprox. 25 de m, fiind aruncată în aer de otomani. Acesta este refăcut și întărit cu aproximativ un metru în plus la grosimea zidului, fapt ce poate fi vazit și astăzi.

Bastionul Crăișorul a fost planuit de arhitectul de origine italiană Giulio Cesare Baldigara și clădit între anii 1569-1570 în timpul domniei principelui Ioan Sigismund.

O porțiune din blocurile paramentului au rezultat din secționarea unor fragmente arhitectonice recuperate din vechile construcții, fiind puse în zid cu părțile profilate spre interior.

Bastionului Bethlen (sud-vestic), pe acest bastion în limita exterioară apare

inscripția, blazonul familiei princiare și 1618 anul terminării construcției.Decenii la rând a fost format exclusiv din sol uscat bătut și întărit la exterior cu ajutorul nuielelor, din această cauză a fost numit și bastionul de pămănt.

Corpul A – Palatul princiar a fost ridicat între urmatorii ani 1620 și 1629, în timpul principelui Gabriel Bethlen.Această cladire este punctual zero al cetății renascentiste, aflăndu-se prima construcție edificată în actualul complex fortificat.De-a lungul secolelor, asupra acestui edificiu se va interveni de nenumărate ori, într-un final fiind refăcut.

În momentul de față, Facultatea de Arte Vizuale își desfășoară activitatea în această clădire.

Corpul B – Palatul Princiar(latura vestică) a fost clădit în două etape între 1620-629, respectiv 1638-1648, sub administrarea principelui Gabriel Bethlen fiind urmate planurile arhitectului italian Giacomo Resti. În trecut corpul B cupla catedrală gotică și palatul episcopal renascentist. În present Corpul B unește extremitatea sudică a palatului cu biserica în stil baroc. În acest corp momentan se află Directia Județeană a Arhivelor Statului din Bihor.

Corpul C, este poziționat pe latura sud-estică a Corpului A, el a fost ridicat între anii 1638-1648. Un lucru interesant este prezența celor șapte arce ce închid pridvorul.Azi, acest corp este utilizat ca sală de cursuri și repetiții pentru diferite trupe de dans.

Corpul D – clădirea care în trecut a adăpostit statul major al cazarmei austriece, acestă clădire a fost construită în anul 1775, locația ocupată de acest corp de clădire, fusese înainte luată de grajdurile ridicate în timpul lui Rákoczy al II-lea.

În prezent în interiorul clădirii se găsește biblioteca Facultății de Arte Vizuale din Oradea.

Corpul E – acest corp în trecut servise ca anexă a palatului princiar, ca loc pentru acei ce veneau in vizită la Cetate. Pe parcursul secolului al XVIII-lea ia funcția de cazarmă.

Între anii 1945-1952, devine lagăr de tranzit pentru cei ce se opuneau regimului comunist.

Corpul G – Rolul principal al acestei clădiri a fost de magazie de alimente, iar mai tarziu a devenit o anexă gospodărească, în ultimii ani a functionat ca atelier de creație artistică.

Corpul H – Brutăria a fost construită în 1692, chiar după ce austriecii au cucerit cetatea la porunca generalului Corbelli. Brutăria avea șase cuptoare și a funcționat din 1692 până în 1997. În interiorul acestei clădirii, pe viitor se doreste crearea unui muzeu al păinii.

Corpul I – a fost intemeiat în 1692-1714 la porunca conducatorului cetății. Până în secolului al XVIIIde Arte Vizuale din Oradea.

Corpul E – acest corp în trecut servise ca anexă a palatului princiar, ca loc pentru acei ce veneau in vizită la Cetate. Pe parcursul secolului al XVIII-lea ia funcția de cazarmă.

Între anii 1945-1952, devine lagăr de tranzit pentru cei ce se opuneau regimului comunist.

Corpul G – Rolul principal al acestei clădiri a fost de magazie de alimente, iar mai tarziu a devenit o anexă gospodărească, în ultimii ani a functionat ca atelier de creație artistică.

Corpul H – Brutăria a fost construită în 1692, chiar după ce austriecii au cucerit cetatea la porunca generalului Corbelli. Brutăria avea șase cuptoare și a funcționat din 1692 până în 1997. În interiorul acestei clădirii, pe viitor se doreste crearea unui muzeu al păinii.

Corpul I – a fost intemeiat în 1692-1714 la porunca conducatorului cetății. Până în secolului al XVIII-lea a fost sediul administrației militare austriece, căt și a vămii unice a orașului. Intre anii 1775-1777 devine cazarma inginerilor militari ai garnizoanei din Oradea. Se doreste ca pe viitor sa funcționeze ca centru de organizații cu diferite activității culturale.

Corpul J – inițial a fost poarta cetății (1573) deasupra lui și pe lăngă acesta se găseau turnul porții și vestitul Turn cu Ceas, în dreaptă erau grajdurile și șopronul pentru căruțe. Își păstrează funcțiunea de grajd. însă, nemaiaflanduse turnul de strajă, i se adaugă rolul de cameră a străjerilor.

Corpul K – A fost construit între anii 1775 – 1777. Magazia și cazarma au fost unite și au preluat sarcina de cazare a ofițerilor.

Corp L – Cazemata curtinei nordice (1775-1777) această clădire este extrem de rezistentă și încăpătoare, datorită asezării ea a avut de suferit cel mai mult.Datorită structurii lui căt și a asezarii lui este forte rece și intunecoasă, cazemata în timp de pace a functionat pe post de închisoare. În planul de restaurare se doreste deschiderea unei galerii pentru vinuri și măncăruri tradiționale bihorenești.

Corp M – este format din Poarta dinspre Est și cele 2 clădiri lipite ei, respectiv corpul de gardă și grajdurile.În viitor se dorește renovarea acestui corp și deschiderea lui spre noi activitații culturale: sală de filme,dans, teatru destinat copiilor.

Biserica romano-catolică din Cetate – a fost contruită datorită perioadei de dominație austriacă, aceasta a fost zidită de către arhitectul Lodovico Marini – fiind ridicată peste vechile structuri, acele structuri păstrează elemente constructive turcești, conform unor opinii ale istoricilor. Datorită unui incendiu ce a cuprins orașul în 1836, turnul avănd pe atunci stilul baroc a fost distrus în totalitate, fiind inlocuit cu un turn piramidal simplu.

În anul 1540, otomani au încercat să cucereasca Cetatea Oradea de nenumărate ori, ea era considerată o poartă către Ardeal. Cetatea Oradea pe atunci, ca și acum, era aparăta de apele calde ale râului Peța, facând-o invincibilă. Nici un inamic nu reușise să cucereasca Cetatea până în anul 1660, cand Ali – Pasa de Timisoara, și-a propus să cucerească cetatea cu orice preț. Prin urmare, a adus 45.001 de otomani care au luat cu asalt dealurile orașului. Timp de 46 de zile grele, luptele au pus la grea încercare cetatea celor 851 de aparatori ai cetății. Satele și locuitorii acestora au cazut sub asediul otomanilor, dar în continuare Cetatea rezista. Otomanii aproape ca iși pierduseră speranța cuceririi Cetății din Oradea, pană intr-o zi,cănd copii morarului au fost capturați de catre oștile otomane. Mama copiilor fiind inebunită de durere și de gandul asupra copii ei care se aflau în primejdie hotăraste să faca absolut orice sa ii salveze pe aceștia.

Sotia morarului deținea secretul trăiniciei Cetății, astfel, ea a cedat otomanilor informațiile necesare pentru a patrunde în interiorul ei, otomani punăndu-se pe treabă, săpănd barajul de evacuare a apei, acest baraj proteja foarte bine zidurile Cetății. Prin urmare Cetatea Oradea care odată a fost de necucerit a fost ocupată de către otomani în luna august a anului 1660.

Sub ocupație otomană, atăt orașul cât și Cetatea au fost reconstruite în urma atacului.Odată ocupată Cetatea de către otomani, acestea încep un process de redenumire a bastioanelor cetății: spre exemplu Bastionul Ciunt devenise Bastionul Țiganilor.[5]

Capitolul II . Tehnologii utilizate pentru implementarea aplicației web

2.1 HTML5

HTML – HyperText Markup Language este principalul limbaj folosit pentru crearea paginilor web și în general a conținutului ce poate fi vizualizat cu ajutorul unui browser.

O pagina HTML este scrisă sub forma unei serii de elemente HTML care sunt formate din etichete (tag-uri). Elementele HTML sunt de regulă compuse din perechi de etichete, una de început și una de final, există și elemente formate dintr-o singură etichetă cunoscute sub numele de elemente vide. Între etichetele unui element pot fi adăugate fie alte elemente fie text sau orice alt conținut sub formă de text.[6]

Acest limbaj este limitat, pentru a putea vizualiza documentele create in acest limbaj avem nevoie de un traductor, aici vine în ajutor diferite browsere, care au ca și scop citirea documentelor HTML și transformarea în pagini web care au caracter vizual și auditiv. Browserul nu afișează elementele ce alcatuiesc limbajul HTML, el doar le utilizează pentru a înterpreta conținutul documentului.

Paginile HTML sunt componentele principale ale unui site. HTML permite încorporarea imaginilor si a obiectelor în pagini și poate fi folosit pentru crearea de formulare interactive. Acesta asigură o modalitate de a crea documente structurate prin specificarea structurii textului ce urmează a fi prezentat, identificând elemente cum ar fi paragrafe, liste, legături sau alte elemente. Documentele HTML pot de asemenea să conțină scripturi scrise în limbaje de programare cum ar fi JavaScript care modifică modul în care pagina HTML se comportă.

Browserele folosesc de asemenea fișiere de tip CSS pentru a defini aspectul vizual al unei pagini web. Organizația W3C care are în administrare atât standardele pentru HTML cât și cele pentru CSS recomandă folosirea CSS pentru a defini aspectul vizual al unei pagini web.

HTML5 este versiunea a cincea a limbajului HTML. Principalele obiective ale acestei versiuni au fost să îmbunătățească limbajul aducând suport pentru multimedia.

HTML5 este de asemenea un candidat excelent pentru realizarea aplicațiilor mobile multi-platformă, deoarece multe dintre funcționalitățile acestuia au fost proiectate în așa fel încât sa poată rula pe platforme care au o putere de procesare relativ redusă, cum ar fi telefoanele sau tablete. [7]

În particular HTML5 aduce o serie de elemente noi cum ar fi cele multimedia pentru conținut video sau audio, de asemenea oferă suport nativ pentru grafică de tip SVG și pentru formule matematice. Aceste funcționalități fac integrarea si managementul conținutului multimedia mult mai simplă, deoarece nu mai este necesară folosirea de plugin.

Cateva din noile caracteristici interesante:

Elementul <canvas>, pentru desenare 2D

Elementele <video> și <audio> pentru redare media

Elemente specifice de conținut, cum ar fi <article>, <footer>, <header>, <nav>, <section>

Elemente de formular, cum ar fi calendar, date, time, email, url, search, required

Majoritatea browserelor suporta HTML5 și continuă să adauge noi actualizări ultimelor versiuni apărute.

Dintre noile fucții HTML5, am folosit elementele de formular, deoarece la accesarea paginii de pe dispozitive de tip smartphone, browserele acestora sunt capabile să recunoască acest tip de element și să deschidă din telefon aplicații specifice elementului.

De exemplu, pentru un element de tip calendar, deschis de pe smartphone, se deschide o aplicație din telefon prin care selectăm mult mai ușor data dorită.

2.2 CSS3

CSS este un limbaj folosit pentru a descrie prezentarea vizuală a unui document, de obicei scris folosind HTML, dar poate fi folosit și pentru alte tipuri de documente, cum ar fi: XML, SVG sau XUL.

CSS a fost creat cu scopul de a separa conținutul și structura unui document stilul vizual de prezentare al acestuia. Această separare poate îmbunătăți flexibilitatea și controlul în specificarea caracteristicilor de prezentare, și permite mai multor pagini să partajeze aceeași formatare, reducând astfel complexitatea necesară și repetiția la definirea structurală a conținutului. CSS poate de asemenea să permită prezentarea aceluiași document în diferite stiluri depinzând de situația de utilizare, cum ar fi atunci când este vizualizat pe ecran sau tipărit. De asemenea se pot utiliza stiluri diferite de prezentare atunci când documentul este vizualizat pe dispozitivele mobile. Toate acestea fără a face nici o modificarea în definirea structurală a conținutului.[8]

Limbajul definește o schemă de priorități pentru a determina care proprietăți de stil vor fi aplicate unui element. Astfel rezultatul vizual este întotdeauna predictibil.

Înainte ca CSS să fie utilizat toate caracteristicile pe prezentare vizuală a elementelor HTML trebuiau sa fie definite în cadrul documentului pentru fiecare element în parte ceea ce ducea implicit la repetiții în codul sursa. Odată cu introducerea limbajului CSS toate aceste caracteristici au putut fi mutate în fișiere separate, astfel simplificând mult structura unui document HTML și totodată făcându-l mult mai ușor de întreținut.[9]

Listă cu cele mai importante module adăugate in CSS3: fundaluri și bordurile fiind rotunjite, transformări 2D căt și 3D, o sumedenie de animații etc.

Aplicația dezvoltată în cadrul acestei lucrări utilizează CSS pentru a defini caracteristicile grafice ale interfeței cu utilizatorul, de la poziționare în pagină, la culori, fonturi și umbre. În marea majoritate a cazului s-au folosit atribute specifice CSS2, s-au folosit de asemenea și atribute specifice CSS3 cum ar fi box-shadow pentru generarea de umbre în jurul anumitor secțiuni din pagină.

2.3 Bootstrap 3.0

Bootstrap este o colecție gratuită de instrumente pentru crearea de site-uri și aplicatii web. Acesta conține template-uri HTML și sunt bazate pe CSS pentru tipografie, forme, butoane, navigare și alte componente de interfață, precum și extensii opționale JavaScript. [10]

Bootstrap este compatibil cu cele mai recente versiuni de toate browserele importante. Se degradează cu grație atunci când sunt utilizate în browserele mai vechi, cum ar fi Internet Explorer 8.

Începând cu versiunea 2.0 sprijină, de asemenea, web design receptiv. Acest lucru înseamnă că aspectul de pagini web se ajustează dinamic, luând în considerare caracteristicile dispozitivului utilizat (desktop, tabletă, telefon mobil…etc).

Începând cu versiunea 3.0, Bootstrap a adoptat o filosofie de design mobil, subliniind un design receptiv în mod implicit.

Bootstrap este un framework open source și este disponibil pe GitHub. Dezvoltatorii sunt încurajați să participe la proiect și de a face propriile contribuții la aceasta platforma.

Pentru implementarea aplicatiei web am ales versiunea Bootstrap 3.0 deoarece utilicarea unui asemenea framework mi-a ușurat munca simțitor.Pachetul acesta vine predefinit cu niște clase CSS speciale.

2.4 PHP

PHP este un limbaj de scripting pentru serverele web, conceput pentru crearea aplicațiilor web, dar poate de asemenea să fie folosit și ca un limbaj de programare general. PHP rulează în prezent pe aproximativ 2,1 milioane de servere web si mai mult de 244 de milioane de aplicații web. [11]

Codul PHP este interpretat de un serve web folosind un modul pentru procesarea PHP, în urma interpretării rezultă o pagină web. Comenzile PHP pot de asemenea să fie incluse direct in paginile HTML fără a fi nevoie de invocarea unui fișier extern pentru procesarea datelor.

PHP este un software gratuit publicat sub licența PHP care este incompatibilă cu licența GPL. PHP este compatibil cu majoritatea serverelor web și de asemenea și ca o aplicație de tip consolă independentă capabilă să ruleze pe aproape orice sistem de operare.[12]

PHP este un limbaj general de scripting special creat pentru dezvoltarea părții de server a unei aplicații web dinamice. Orice cod PHP într-un fișier cerut este executat de server, de obicei pentru a crea o pagină web cu conținut dinamic. PHP poate fi utilizat pe majoritatea serverelor web și împreună cu multe sisteme de baze de date relaționare. Majoritatea furnizorilor de soluții de găzduire suportă PHP.[13]

În ceea ce privește securitatea aproximativ 30% din vulnerabilitățile limbajului PHP sunt legate de faptul că practicile de programare recomandate nu sunt respectate, doar 1% din numărul total de vulnerabilități sunt datorate defectelor din cadrul limbajului sau a librăriilor.

2.5 MySql

Este unul dintre cele mai folosite open source sistem de management al bazelor de date relaționale.O bază de date reprezintă o colecție de date structurate, acestea pot fi de la o simplă listă de cumparaturi pană la o galerie foto sau pot deține vaste informați intr o rețea corporativă.

Numele aplicației vine de la co-fondatorul Michael Widenius, iar SQL este abrevierea la Strductured QueryLanguage. În prezent această aplicație este deținută de un gigant important în soluții IT, acest gigant poartă numele de Oracle Corporation.

MySql se foloseste foarte des in combinatie cu PHP, adesea este numit Duo-ul Dinamic, acesta are putere mult mai mare fiind capabil să realizeze aplicatii în orice limbaj de programare major.

Această tehnologie este o componentă completă a platformelor LAMP sau WAMP, aceste prescurtari derivă de la Linux/Windows-Apache-PHP/Perl/Python.

Pentru administrarea bazelor de date folosind MySql avem mai multe posibilități, putem folosi o interfață grafică precum phpMyAdmin sau putem sa folosim linia de comandă.

Acesta poate fi rulat pe mai multe tipuri de sisteme de operare existente: FreeBSD, Linux, Mac OS X, pe Windows XP/Vista/7/8.[14]

2.6 JavaScript ( JS)

JavaScript este un puternic limbaj de programare fiind orientat pe obiecte, el este folosit folosit in special pentru introducerea unor noi functionalități in paginile web proprii, acest cod este preluat și rulat de catre catre browser.

În ciuda numelui și datorită unor asemănări de sintaxă, între limbajul de programare JavaScript și limbajul de programare Java nu există nici o mică legătură. JavaScript are sintaxa apropiată de limbajul de programare C. Extensia de fisie fiind .js

Pentru acestă lucrare sa folosit jQuery, aceasta este o platformă de dezvoltare a celor de la JavaScript,ea este conceput pentru a imbunătăți si ușura procesele ca de exemplu: traversarea arborelui DOM din HTML, managementul inter-browser a animatiilor, evenimentelor și a cereri de tip AJAX. Jquery a fost găndit să fie disponibil în toate browserele existente,această biblioteca a JavaScript a fost lansată in anul 2006 de către John Resig.

Pe pagina principală a aplicației web am folost un plugin făcut în limbajul de programare jQuery, acesta se numeste Camera creat de către Pixedelic.[15]

Pe langă acel plugin am mai folosit Javascript pentru harta customizată, acest API (Aplication Program Interface) se numeste Google Maps Javascript API V3.

Capitolul III. Aplicații utilizate

3.1 Aplicația PTGui

PTGui este o aplicație software care permite îmbinarea perfectă a unui grup de fotografi, pentru o panoramă reușită. Acest program permite lipirea mai multor rănduri de fotografii datorită unei funcții speciale „Align to grid”. Programul nu este limitat doar la panorame de tip flat, având posibilitate creării unor panorame cilindrice sau sferice.

Acestă aplicație permite chiar îmbinarea fotografiilor care vin rotite sau înclinate, îmnsemnând ca nu mai este nevoie sa ne facem griji asupra fotografiilor facute puțin înclinat.

Unele din marile avantaje ale acestui software sunt: imaginile capturate folosind obictive wide sau fisheye pot fi puse la fel de ușor într-o panoramă, datorită unui algoritm de recunoastere automată a tipului de obiectiv, folosind date EXIF (Exchangeable image file format) preluate din fisierul rezultat prin fotografiere.

Datele de tipul EXIF conțin:

data și ora fotografierii,

tipul de obiectiv,

tipul dispozitivului de fotografiere,

expunerea și diafragma,

marimea fotografiei (pixeli),

dacă sa folosit sau nu blițul, dacă da în ce parametri,

detalii despre focalizare.

Datele EXIF se pastreaza doar in urmatoarele formate: jpeg, tiff, raw, iar in formatele de tipul jpeg 2000, png sau gif nu se pastreaza nici o informație de acest tip.[16]

Un alt plus important al aplicației este aceea ca poate să îmbine un număr mare de poze fară a ține cont de limita de dimensiune pentru imaginea rezultată în urma procesului de îmbinare a fotografiilor, prin urmare pot fi create imagini de foarte mare rezolutie(gigapixeli).

Pe langă caracteristicile majore enumerate mai sus, PTGui înglobează intrumente de mascare, care dau posibilitate mascării acelor părți din imagine care nu ar trebuii să apară in imaginea finala. Are o funcție specială pentru HDR (High Dynamic Range), vine inclus cu un vizualizator panoramic sferic si intrumente de editare web.

Figura 3.1 Captura ecran PTGui

Aplicația are două versiuni, una gratuită (PTGui) si una platită (PTGui- Pro), este multiplatforma, fiind compatibila atat cu sistemul de operare Windows, cat si sistemul de operare Mac OS X.

O alternativă a acestui tip de aplicatie ar fi: Hugin, care la randul lui este gratuit, 360 Panorama, AutoPano fiind un software valabil in două versiuni: una gratuita,una platita.

Dezavantajul major a aplicatiei gratuite de la Kolor (AutoPano) reprezintă un watermark simtitor aplicat pe panorama finală. Datorită numeroaselor funcții date de PTGui și existenta unei documentați stufoase în cadrul acestei aplicații, alegerea a fost una usoara pentru acest tip de software.

3.2 Aplicația Photoshop CC

Aplicația software Photoshop este o unealtă pentru editarea, manipularea sau crearea imaginilor digitale. Ea a evoluat in cursul acestor ani in 3 mari componente dinstincte, aceste componente se numesc: Adobe Bridge, Camera RAW și desigur Photoshop în sine.

Aplicația este una foarte versatilă, fiind folosita de milioane de oameni din intreaga lume în diferite domenii, in fotografie, in design web, in stiinta, in videografie etc.

Produsul acesta a devenit un trend astfel încat numele lui este folosit ca verb in conversația generală.

Adobe Bridge este o unealtă care ajută la managerierea, organizarea fotografiilor digitale, aplicatia a fost folosită pentru selectarea, vizualizarea și clasificarea imaginilor pe diferite arii de folosință. Am folosit Camera RAW pentru schimbarea culorilor, schimbarea expunerii, reducerea distorsiunilor și a aberatiile cromatice.

Procesul de modificare a culorilor căt și a expunerii este unul nedistructibil permitându-ți experimentarea cu diferite compoziți.

Camer Raw vine cu o interfata ușor de utilizat, datorită acelor cursoare, ea este inglobata in Photoshop.

Photoshop furnizează intrumente pentru mascare, compoziție, retușare, el ne permite experimentarea, imbunatațirea imaginilor digitale cu ajutorul unor filtre speciale.

Figura 3.2 Captură ecran folosind Camera RAW

Programul poate rula pe urmatoarele platforme, acesta este disponibil celor ce utilizează sistemul de operare Windows cat și celor ce utilizează sistemul de operare Mac OS X. O alternativa a programului enunțat mai sus ar fi: Gimp (Gnu Image Manipulation Program), Pixlr sau Paint.NET acestea fiind gratuite și sunt compatibile cu sistemul de operare Windows.

3.3 Aplicatia Panotour 2.0

Panotour este dezvoltat de către Kolor, ei produc mai multe tipuri de software: pentru îmbinarea imaginilor, pentru crearea, editarea unui tur virtual și aplicatie software pentru videoclipuri, acest software video iți permite crearea, vizualizarea unui videoclip la 360 de grade.

Panotour și Panotour Pro în anul 2012 a produs 200.000 de tururi virtuale in urmatoarele sectoare de activitate: fotografie, industrie, media, turism, sectorul imobiliar cât și cel cultural.

Turul virtual a fost creat ca urmare a trei concepte principale: calitate, interfata intuitive, portabilitate.

Acest tur se bazeaza pe cele mai noi tehnologii pentru a oferii o calitate de top.

Datorită acestui software turul virtual poate rula pe urmatoarele tipuri de dispositive: calculator, tablet și smartphone.

Pentru aceasta lucrare am folosit Panotour 2.0, el are doua variante, varianta gratuită, varianta platită. O alernativă la acest software este: Pano2vr, acestă alternativă este gratuită, rulează atăt pe Windows, Mac OS X și Linux.

Figura 3.3 Interfața programului Panotour 2.0

3.4 Aplicația SublimeText

Sublime Text este un editor de text, el functionează pe mai multe platforme, având o interfața de programare Python (API). Acestuia i se pot adauga pachete de extindere, cele mai multe dintre pachete fiind gratuite.

Cateva dintre caracteristicile principale ale acestui editor text sunt:

navigare rapidă printre fisiere, simboluri sau linii de cod,

functia „command palette” utilizată pentru invocarea rapidă a unei comenzi prin diferite combinații de tastatură,

selecții multiple: face simultan aceleasi modificari interactive auspra zonei seletate.

Autocompletarea in functie de limbaj.

Permite utilizatorilor să salveze blocuri de cod utilizate în mod frecvent prin atribuirea unor cuvinte cheie.

este compatibil cu diferite limbaje de programare.

Aplicatia a fost scrisă în C++, Python și poate funcționa pe următoarele sisteme de operare: Linux 32/64 bit, Mac OS X, Microsoft Windows 32/64 bit.

O posibila uneltă asemanatore este Notepad ++ , acesta fiind gratuit, are o interfață ușor de utilizat și prezintă o documentație stufoasă.[17]

3.5 Pachetul de programe XAMPP

Pachetul XAMPP este un pachet cross-platform care oferă un server web și conține în principal următoarele componente: serverul HTTP Apache, sistemul de management al bazelor de date MySQL și interpretoare pentru limbajele PHP și Perl.

XAMPP a fost ales ca soluție pentru serverul web deoarece încorporează toate elemente necesare dezvoltării unei aplicații web, și prezintă avantajele că este ușor de instalat și configurat.

Oficial XAMPP a fost proiect ca o soluție de server web care să fie folosită exclusiv în mediile de dezvoltare a aplicațiilor web, nu pentru a fi utilizat în producție. Este destinat celor care lucrează local pe stații de lucru, oferindu-le oportunitatea să își testeze aplicațiile fără acces la internet. Pentru a face acest lucru cât mai ușor posibil multe dintre funcționalitățile de securitate sunt dezactivate. În practică în schimb XAMPP este folosit ca server de producție și există o unealtă care poate fi folosită pentru a proteja cu o parolă părțile vulnerabile ale aplicației. [18]

XAMPP vine totodată și cu un server FTP incorporat care facilitează integrarea lui editoarele care suportă conectarea la un server FTP pentru lansarea aplicației web.

Pachetul XAMPP a fost folosit ca o soluție completă pentru serverul pe care a fost dezvoltată aplicația prezentată în lucrarea de față.

Figura 3.5 Captura ecran XAMPP

Capitolul IV. Metode de concepere a unui tur virtual

Un tur virtual este o imagine completă avănd o cuprindere de 360 de grade a unui anumit spațiu cu care utilizatorii pot să interacționeze.

Datorită unui tur virtual excelent, utilizatorul se simte prezent in acea scenă, putând controla direcția (sus,jos,stănga,dreapta), el are posibilitate de mari sau micșora imaginea.

Turul virtual este format dintr-o panoramă unită la capetele imagini cu ajutorul unei aplicații de imbinare a fotografiilor, spre exmplu: în această lucrare am folosit programul PTGui.

4.1 Fotografierea

Fotografierea panoramelor de 360 de grade pot fi realizate cu oproape orice smartphone, de la o aplicatie Iphone pănă la una de android, fotografierea si realizarea unui tur virtual fiind o munca foarte ușoară. Binențeles că aceste panorame nu vor prezenta o calitate a imagini foarte mare și pe alocuri vor apărea probleme de imbinare a fotografiilor.

Această tehnologie este la inceput de drum, estimez că in viitorul apropiat vor apărea aplicații pe smartphon-uri capabile să imbine perfect fotografiile, prin urmare realizarea unui tur virtual cu ajutorul smartphon-ului va fi o rutină.

Pentru o calitate substanțială asupra panoramei finale se recomandă folosirea unui aparat foto DSLR (Digital Single-Lens Reflex Camera).

Pentru fotografierea panoramelor am folosit aparatul digital de la Nikon, acesta fiind un DSLR modelul D7000 avănd urmatoarele obiective: Nikon DX AF-S 35 mm, Nikon AF-S DX NIKKOR 18-105 mm.

Munca mi-a fost ingreunată datorită campului de vizualizare, de 37 de grade vertical, iar orizontal de 25 de grade. Datorită campului de vizualizare ar fi fost recomandat să fac 18 fotografii la fiecare 20 de grade, dar neavând resurse bănești necesare nu mi-am permis achiziționarea un cap panoramic.

Exemple de capuri panoramice in ordinea crescătoare a prețului : Panosaurus 2.0, Nodal Ninja 3.

Pentru cele doua panorama full sferice am facut in jur de 300 de fotografii pe fiecare panoramă folosind modul manual al aparatului pentru a avea o expunere egală in toate fotografiile. Iar pentru panoramele parțial sferice am făcut aproximativ 250 de fotografii pentru fiecare punct in turul virtual.

4.2 Îmbinarea fotografiilor provenite de la aparatul digital

Imaginile rezultate de la aparatul de fotografiat, urmează un proces de imbinare, acest proces constă în următorii pași: ecran înserarea imaginilor în programul PTGui, editarea panoramei folosind panorama editor, mascarea imperfecțiunilor (de exemplu: oameni care apar de doua ori in panorama finală), exportarea panoramei.

La exportare avem posibilitatea alegerii din mai multe formate, precum: JPEG, TIFF, PSD, PSB, MOV.

Figura 4.1 Capura ecran înserarea imaginilor în programul PTGui.

Figura 4.2 Capura ecran alinierea imaginilor folosind puncte de control.

Figura 4.3 Capura ecran editarea panoramei utilizând panorama editor.

Figura 4.4 Capura ecran mascarea imperfecțiunilor.

Alinierea automata a acestui program are limitele lui, nu funcționează întodeauna așa cum am vrea, de multe ori este nevoie aplicarea manual a punctelor comune între unu sau mai multe fotografii .

Cu fereastra Panorama Editor putem să aliniem panorama, să o centrăm, avem posibilitate editării unei fotografii sau a unui grup de fotografii.

Panorama Editor are functii special pentru proiectia panoramelor, putând sa producă proiecți de mai multe tipuri: little planet, rectangulară, cilindrică, sferică, circulară, full frame, stereografica.

Pentru mascarea imperfecțiunilor se folosește tab-ul Mask, cu ajutoorul acestei funcții avem posibilitatea de a înlătura anumite impefecțiuni apărute pe parcursul creări panoramelor.

În figura 5.2.4 am ascuns grupul de oameni facândui cu culoare rosie, dar dacă vroiam ca acest grup să apară obligatoriu in fotografia finală ar fi trebuit sa folosim culoarea verde, iar cu culoarea albă stergem culoarea roșie sau verde.

4.3 Editarea panoramelor

Panoramele au fost editate folosind aplicația Photoshop CC, aceasta editare constănd în modificarea expuneri, modificarea culorii, eliminarea aberațiilor cromatice, eliminarea acelor spații în care PTGui nu a găsit puncte comune. În fotografiile de mai jos avem un exmplu concret al eliminării spațiilor rămase in urma exportării.

Figura 4.5 Eliminarea spatiilor rămase in urma exportării panoramei (înainte).

Figura 4.6 Eliminarea spatiilor rămase in urma exportării panoramei (după).

4.4 Crearea turului virtual

Panotour este o aplicatie specializată în convertirea imaginilor de tip panoramic în imagini sferice, cilindrice folosind cele mai noi tehnologii, precum HTML5 (WebGL/iPhone/iPad), Adobe Flash 11, sau QuickTime.

Aplicația suportă formate precum PSD/PSB, OpenEXR și Radiance HDR.[19]

În Fig 4.7 avem ilustrate legăturile între panorame, punctele de schimbare intre panorame, proiectarea panoramei. În fereastra View este reprezentată panorama selectată, aceasta putănd fi previzualizată, fereastra mai cuprinde : stabilirea zoom-ului minim, maxim asupra panoramei căt și stabilirea vederii implicite.

Figura 4.7 Captură ecran relațiile intre diferite puncte ale turului virtual

Panotour oferă caracteristici precum crearea unui control bar, crearea unor butoane specializate pe anumite funcții, oferă efecte precum adăugarea unei măști asupra turului, adăugarea unui efect de ploaie sau ninsoare.

Această aplicație mai cuprinde plugin-uri precum: posibilitatea inserări unei harți, posibilitatea crearii unui meniu și inserarea unei galerii foto.

. Figura 4.8 Captură ecran plugin-uri folosite in Panotour

4.5 Tipuri de imagini panoramice

Există mai multe tipuri de imagini panoramice din care amintim: panorama ful sferică, panorama cubică, panorama “little planet”, panorama parțială, panorama cilindrică, panorama sub formă de arc, rectiliniară și parțial sferică.[20]

Figura 4.9 Captură ecran proiecție little planet

Capitolul V . Proiectarea și dezvoltarea aplicației web

5.1 Structura site-ului

Așa cum am mai amintit și în introducere, acestă aplicație are ca țintă acel grup de oameni care nu au posibilitatea de a vizita acest frumos edificiu al Oradiei și acelor oameni care deși au vizitat vor să impărtăsească acele amintiri cu prieteni, familia. Site-ul conține mai multe pagini web create cu scopul de a informa vizitatorii despre adevărata, fosta “inimă a orașului”.

Acest site conține urmatoarele pagini :

Despre Cetate

Hartă interactive

Scurt istoric

Galeria foto

Galeria video

Tur virtual

Trimite-ne o poză

Contact

În pagina Despre Cetatea, găsim informații generale, informații legate de bastioanele acesteia, pictograme spre următoarele funcții ale site-ului: galerie foto, galerie video și tur virtual.

În pagina cu Harta interactivă, avem poziționate toate clădire ce alcauiesc Cetatea Oradea, cu puncte folosind coordonatele specifice fiecarei cladiri/punct spre bastionul respective.

Pentru că cei de la compania Google nu au inclus pe harta lor clădirile principale ale Cetății a fost nevoie desenarea lor pe hartă folosind Google Map Api V3.

În pagina Scurt istoric, regăsim întreaga istorie compactată, acest scurt istoric cuprinde întămplările cu cele mai importante momente ale Cetății petrecute încă din secolul al- XVIII-lea relatate pănă în prezent.

În pagina Galeria Foto, este reprezentată în imagini Cetatea Oradea în toată spledoarea ei.Utilizatorii au posibilitatea vizualizării bastionelor sub formă de slideshow.

În pagina Galeria Video, avem un videoclip ilustrănd cele mai mirifice locuri ale Cetății din Oradea.

Din cauza renovărilor, nici un vizitator nu are posibilitatea sa intre în interior ei pănă la finalizarea lucrărilor. Finalizarea lucrarilor de refacere va fi terminată la jumătatea anului 2015, prin urmare pagina Tur virtual cuprinde 25 de puncte in jurul cetății.

În aceste puncte sunt cuprinse cele 5 bastioane, parcurile artificiale cu nuferi, locurile de joacă a baschetbalistilor, poarta de Est si poarta de Vest.

Pentru că vrem să adunăm cele mai bune poze, am creat o pagină special.

Trimite-ne o poză este destinată acelor turiști care vor să impărtăsească minunatele locuri ale Cetății cu vizitatorii acestui site. Aceste poze vor fi vizualizate și analizate iar mai apoi publicate în galeria foto a Cetății alături de autorul pozei.

Pagina de contact are mai multe cămpuri care trebuiesc completate obligatoriu.

Această pagină se adresează acelor oameni care vor să posteze un mesaj legat de experiența lor pe acest site, eventualele sugestii/imbunătățiri ale site-ului.

Figura 5.1 Captură ecran pagină principală a site-ului

5.2 Pagina principală

Pagina principală a acestui site a fost creată folosind framework-ul Boostrap 3, am folosit acest framework findcă vine cu stiluri predefinite și oferă un design receptiv.

Pagina are patru sectiuni: bara de navigare, partea care înglobează sliderul, partea care cuprinde informații despre Cetate, iar în partea de jos se găseste footer-ul.

Bara de navigare are următoarele legaturi: despre Cetate, hartă interactive, scurt istoric, trimite-ne o poză și pagina de contact.

Partea care conține sliderul are imagini cu cele cinci bastioane și cu locurile accesate des de catre vizitatori. Fiecare imagine are o descriere specifică ei.

Acest slider are mai multe funcții dintre care amintim: atunci cand ducem mouse-ul asupra butoanelor de tip radio acestea ne prezintă o pictogramă specifică fiecărui buton, pe lăngă funcția prezentată mai sus, el mai are o funcție de inaintare in slider.

Slider-ul pornește automat atunci cănd pagina este incărcată, iar în momentul în care mouse-ul este pe fotografia din prezentare acesta intră intro stare de idle, revenindu-și în clipa în care mouse-ul este înafara sa.

Descrierea și imaginile din slider sunt extrase din baza de date folosind limbajul PHP.

Pentru a extrage toate datele am folosit un simplu while pentru parcurgere alături de funcția specială mysql_fetch_array pentru a extrage fiecare rând din baza de date.

Figura 5.2 Captură ecran cu funcția de extragere a datelor.

Turul virtual complet ce cuprinde imprejurimile Cetății din Oradea au fost editate utilizând următoarele aplicații: Photoshop CC, PTGui si pentru redarea panoramelor am folosit aplicația gratuită de la Kolor.

Turul virtual are 50 de legături între panorame, fiecare legătură are speficicată locația, cănd se face hover pe un anumit punct din turul virtual, acesta afisează informația legată de viitoarea destinție. Aceiași abordare este folosită și la bastioanele Cetății, atunci cand se face hover pe un bastion anume apare o mică descriere legată de bastionul respective.

Utilizatorii acestui tur viirtul au posibilitatea de a apropia sau de a micsora in tur cu ajutorul iconițelor de + respective – .

În figura de mai jos 6.2.1 butonul sub formă de casa resetează privirea utilizatorului, aducândul pe acesta la vederea implicită. Următoarea icoană are două funcții ascunde/arată punctele pe panoramă. Pictograma sub formă de pointer are funția de a schimba modul de navigare în panorama. Pictograma sub formă imagini suprapuse ascunde grupul de panorama.

Turul virtual vine predefinit cu o melodie de fundal, această piesă poate fi oprită/pornită cu ajutorul iconiței sub formă de boxă. Langă această pictogramă se află butonul de autorotire spre dreapta, el are un interval de rotire de 5 grade pe secundă, cu o întărziere de 1 secundă.

Figura 5.3 Captură ecran controler panoramă

Pe lăngă butonul de auto-rotire în dreapta lui se află butonul de intrare/ieșire din ecran complet.Ultimul buton din partea dreaptă afisează/ascunde controlerul.

Butonul sub formă de semn de întrebare are o funcție de ajutor asupra modului de navigare în turul virtual.

. Figura 5.4 Ajutor asupra modului de navigare.

Galeria video are mai multe secvențe de videoclipuri unite cu un soft specific de editare de la Adobe.

Galeria foto cuprinde un număr semnificativ de imagini atent selectate, ea vine cu același sistem simplu de navigare.Ea a fost create folosind un plugin special de la firma Kolor.

Sistemul de navigare a fost creat utilizând funcția din fereastra skin editor, fiecarui buton atribuindui cate o funcție predefinită de soft-ul Panotour.

5.3 Pagina Scurt Istoric

Pe această pagină se gasesc date istorice ce au dus la formarea cetății din zilele noastre. Pagina are un grid sistem format din 12 coloane, pe fiecare din cele 4 coloane se află un titlu cu anul cănd a avut loc acel important eveniment.

Sub titlu se află o mică descriere legat de fiecare secol în parte, această descriere avănd o fotografie pentru a ilustra întămplarile petrecute în acele momente.

Descrierea cât și imaginile sunt extrase din baza de date folosind aceiași funcție de extragere mysql_fetch_array.

Figura 5.5 Captură ecran asupra pagini scurt istoric.

Asupra fiecărei coloane este aplicat un stil minimalist folosind funcția nouă CSS3 box-shadow.Acest box-shadow funcționează pe toate browserele moderne.

Proprietatea box-shadow permite proiectarea cu ușurința a unor umbre, aceste umbre pot fi exterioare sau interioare, pe elemente de tip box, precizănd valori precum culoare, dimensiune, blur și offset.

5.4 Pagina ce cuprinde Harta interactivă

Pagina Harta interactivă a fost creată cu ajutorul api-ului dat de cei de la Google, acest api a evoluat de la v2 la o versiune imbunătățită versiunea 3 apărută în anul 2010.

Îmbunătățiri aduse acestei versiuni sunt: viteza de încărcare a hărți pe smartphone-uri fiind una bună, lucrarea fără cheie de acces posibilă și pe localhost.Acest api este accesibil atât pentru desktop cât și pentru platforme mobile.

Există patru tipuri de hărți disponibile în Google Maps API, acestea sunt: ROADMAP, SATELLITE, HYBRID, TERRAIN.[21]

Harta de tipul Roadmap afisează harta implicită a celor de la google map, harta de tipul Satellite afisează imagini folosind plugin-ul Google Earth, harta de tipul Hybrid afisează o combinație între harta normal și harta de tip satellite.

Harta de tipul Terrain afisează o hartă bazată pe informații legate de teren.

Cei de la Google au implementat o vedere de 45 de grade asupra anumitor locații, imaginile sunt de o rezoluție foarte mare și oferă vedere în perspectivă spre fiecare din direcțiile cardinal.Pentru această lucrare am folosit harta de tipul Satellite.

Pe această harta customizată se află poziționate 42 de puncte din care în cele 16 puncte sunt reprezentate clădirile importante ale cetății, restu punctelor fiind punctele spre turul virtual.

Figura 5.6 Captură ecran cu modificările de stil aduse hărții.

Imaginea din stănga reprezintă harta cu stilul customizat, iar imaginea din dreapta reprezintă harta având un stil standard predefinit de google map.

În codul de mai jos avem aplicat stilul hărții pentru fiecare din elementele acesteia.

styles:[{"featureType":"landscape","stylers":[{"hue":"#FFA800"},{"saturation":0},{"lightness":0},{"gamma":1}]},{"featureType":"road.highway","stylers":[{"hue":"#53FF00"},{"saturation":73},{"lightness":40},{"gamma":1}]},{"featureType":"road.arterial","stylers":[{"hue":"#FBFF00"},{"saturation":0},{"lightness":0},{"gamma":1}]},{"featureType":"road.local","stylers":[{"hue":"#00FFFD"},{"saturation":0},{"lightness":30},{"gamma":1}]},{"featureType":"water","stylers":[{"hue":"#00BFFF"},{"saturation":6},{"lightness":8},{"gamma":1}]},{"featureType":"poi","stylers":[{"hue":"#679714"},{"saturation":33.4},{"lightness":25.4},{"gamma":1}]}]

Pentru a adauga un marker pe hartă avem nevoie de latitudinea și longitudinea punctului.

Pentru fiecare punct din această hartă am creat o variabilă având un nume distinct, această variabilă ține latitudinea și longitudinea punctului. Cele 26 de puncte pentru turul virtual poartă urmatoarea notație var myLatlng1, terminăndu-se cu variabila var myLatlng25.

Iar pentru variabilele cladirilor am folosi urmatoarea notație var camyLatlng, respectiv

cpmyLatlng.

Exemplu de creare a unui nou marker pe hartă:

var myLatlng25 = new google.maps.LatLng(47.050320, 21.943483);

Pentru că nu am vrut ca harta să conțină iconițe standard, mi-am creat propriile icoane, pentru fiecare din clădirile cetății sa creeat cate o imagine folosind aplicația Photoshop.

Obiectul MapOptions deține harta de inițializare, variabilele și opțiunile acesteia, el are următoarea sintaxă: var mapOptions = { proprietatea : valoarea, proprietatea:valoarea, etc.};

Figura 5.7 Captură ecran cu Opțiunile hărții.

Acest obiect deține nivelul de zoom asupra harții, dacă se fie sau nu centrată harta asupra unui punct.

Pe linia de cod cu numărul 155 pănă la linia cu numărul 158 avem date de tip Boolean, acestea pot să fie true cănd sunt active sau false cănd sunt inactive.

Pentru a creea o bară de control a zoom-ului l-am inițiat și i-am atribuit un stil style: google.maps.ZoomControlStyle.SMALL.

Pentru că cei de la Google Map nu au inclus clădirile principale în harta lor de tip RoadMap, am fost nevoit să le adaug folosind funcția lor de desenare.

Pe hartă sa desenat 16 poligoane avănd ca punct de plecare coordonatele acestora.

De la linia de cod 170 pănă la linia 174 am definit coordonatele în funcție de latitudine și longitudine pentru calea poligonului, iar de la 175 pănă la 183 am desenat poligonul utilizănd acele proprietăți.

De exemplu pentru desenarea pe hartă a corpului H am folosit următorul cod:

Figura 5.8 Captură ecran funcția de desenare.

Odată create punctele, acestea trebuiesc puse pe hartă, pentru a pune pe hartă am creat un nou obiect de tip marker avănd următorii parametrii: poziție, harta, titlu acestuia, icoana.

Figura 5.9 Captură ecran poziționarea punctelor pe hartă.

Inițial am vrut sa inlocuiesc icoanele statice cu icoane de tip dynamic.

Exemplu de icoană dinamică :

icon: 'http://chart.apis.google.com/chart?chst=d_map_spin&chld=0.5|0|FFA800|12|_|N'

Această icoană afișând :

Pe fiecare punct din această hartă avem o fereastră cu informații, această fereastră are următoare structură:

Figura 5.10 Captură ecran informații cu privire la Corpul B.

Informația cât și imaginile cu fiecare clădire se extrag din baza de date folosind limbajul PHP.

Figura 5.11 Captură ecran cu funcția de extragerea a datelor din baza de date.

Funcția strtolower returnează o data de tipul string convertită in caractere mici, această convertire este pentru numele variabilelor.Opusul acestei funcții fiind strtolower.

Bucla de tipul while rulează atâta timp cât există date in tabela markers.

Pentru a afișa informațiile legate de fiecare clădire trebuie să cream un InfoWindow pentru fiecare clădire având ca și conținut string-ul ce l-am creat mai sus.

În blocul de cod de mai jos afișăm informația din string-ul extrasă din baza de date.

var cainfowindow = new google.maps.InfoWindow({

content: cacontentString });

JavaScript în browser este determinat de un eveniment, ceea ce înseamnă că JavaScript răspunde la interacțiunile de evenimente.

Există două tipuri de evenimente: evenimente declanșate de utilizatori, acestea sunt trimise catre DOM la Google Maps API. Tipul acesta de avenimente sunt separate și distincte de evenimentele DOM standard.

Obiecte din cadrul acestui Api sunt concepute să raspundă la evenimentele utilizatorului, cum ar fi mouse-ul sau tastatura.Aceste evenimente pot fi : “click”, “dbclick”, “mouseup/down”, “mouseover”, “mouseout”.Pentru această hartă am folosit evenimentul de tip “click”.

Atunci cănd se apasă pe unul dintre puncte de pe hartă, apare descrierea respectivului punct.

Figura 5.12 Captură ecran folosind click event pentru corpul A.

Figura 5.13 Captură ecran cu corpul P afișând informația legată de acea clădire.

Figura 5.14 Captură ecran cu Bastionul Rosu afișând o imagine spre turul virtual.

5.5 Pagina Trimite-ne o poză

Pagina aceasta a fost concepută pentru acei utilizatori care doresc să impăstăsească poze facute în minunata Cetatea a Oradiei. Pozele vor fi trimise pe adesa de mail a cetății, acestea vor fi analizate și dacă intrunesc cerințele minime de spectaculozitate ele vor fi expuse în galeria foto a cetății alături de numele autorului și data la care a fost imortalizate.

Înformația din pagina aceasta va fi inserată intr-un tabel în baza de date, avănd următoarele coloane: id, autor, numele imagini, data la care a fost făcută imaginea și titlul fotografiei.

Pentru a putea trimite o imagine, utilizatorul trebuie să completeze toate cămpurile din formular, aceste cămpuri sunt: nume, adresă de email, subiectul și comentariul asupra fotografiei.

Figura 5.15 Captură ecran asupra paginii Trimite-ne o poză.

5.6 Pagina de Contact

Pagina ce cuprinde contactul are un formular aplicat pe centrul pagini, avănd o imagine de fundal care se schimbă dinamic.

Acest formular a fost realizat folosind framework-ul Boostrap 3, datorită nenumăratelor funcții.

Toate cămpurile ce compun formularul trebuiesc completate obligatoriu, necompletarea unui câmp va genera următoarea avertizare.

Figura 5.16 Captură ecran avertizare la necompletarea unui camp.

Acest formular este verificat de către mailer.php, fisierul mailer.php conține o varibilă numită $myemail, aceasta este adresa de email a destinatarului.

Funcția check_input verifică dacă sau completat toate cămpurile din formular, dacă da verifică dacă adresa de email este una validă, dacă nu este validă afisează o avertizare.

Odată cu terminarea verficării vom compune mesajul, variabila $email_subject deține subiectul mesajului, variabila $message deține mesajul din interiorul email-ului.

Trimitem mail cu următoarea funcție: mail($myemail, $email_subject, $message);.

Dacă sa trimit mail-ul cu succes vom fi redirecționați spre pagina principală.

5.7 Baza de date

Baza de date este de tip MzSQL, este formată din 5 tabele, intre ele se pot creea liber legături la interogarea bazei de date prin query.Cele 5 tabele poartă numele de : cladii, contact, markers, scurtist,topoza

Conectarea la baza de date se face folosind fisierul connection.php, acesta de are mai multe variabile: o variabilă pentru host, o variabilă pentru username, una pentru parola și una pentru numele bazei de date.Pentru conectare folosim @mysql_connect(“”,””,””) având ca parametri variabila host, variabila username și parola bazei de date.

Dacă nu se poate conecta la baza de date va apărea un avertisment.

În tabela cladii se află 3 rănduri : id, titlu, descriere.

Id-ul este unic avănd date de tip INT și se autoincrementează, în randul cu numele de tilu se află titlu corpului/bastionului, iar în descriere se găsește descrierea clădiri, descrierea este de tipul text.

În tabela contact avem mai multe randuri: id, nume, email, subject, mesaj.

În tabela markers avem trei randuri: id care este de tip int si se autoincrementează, corp care este de tip varchar, și desc care este de tip text.

Tabela cu numele de scurtist are aceiași structură cu tabela cladii.

Pozele trimise de utilizatorii acestui site vor fi salvate local, în tabela topoza, acesta are următoarele cămpuri : id, autor, descriere, data.

Capitolul VI . Concluzii

Toate demersurile care m-au condus spre realizarea acestei lcurări au avut la bază pasiunea uriașă pentru descoperirea unor noi tehnici în fotografie și programare.

În această lucrare complexă m-am străduit să scot în evidență impactul imens al fotografiei asupra oamenilor, expunându-l într-un tur virtual simplu de utilizat, fiind în același timp accesibil tuturor.

Prin intermediul temei alese mi-am propus să ofer o alternativă mai dinamică și mai interactivă prezentării acestui edificiu cultural de o importanță copleșitoare pentru Municipiul Oradea.

Cu toate că am avut nefericitul ghinion de a intrezării un impediment major în lucrările de reabilitare masivă a Cetății, am încercat să surprind acest monument antropic în deplinătatea valorii pe care o posedă.

În foarte scurte cuvinte am să descriu conținutul fiecărui capitol ce compune această lucrare: Capitolul I are în desfasurarea sa o introducere succintă care are ca scop descrierea motivului alegerii acestei teme.

În capitolul II în schimb am ales ca temă principală istoricul cetății pe care l-am tratat în mai multe subcapitole, care includ elemente ale cetății, componente și legende ale acesteia.

Capitolul III descrie tehnologiile folosite pentru implementarea acestei aplicații web.

Tehnologiile utilizate în acest capitol Html 5, CSS3, Boostrap 3, PHP, MySQL și JavaScript m-au

ajutat la creare site-ului Cetății Oradea.

Fiindcă mi-am dorit să împărtășesc informația și întreg conținutul acestei lucrări cu toți cei pasionați de acest monument cultural cât și de fotografie, am creat în mai multe etape diverse metode de concepere a unui tur virtual. Aceste metode sunt: fotografierea, unirea pozelor rezultate în urma fotografierii într-o panoramă, editarea panoramelor rezultate, respectiv unirea capetelor panoramelor. Prin îmbinarea tehnicilor mai sus menționate am reușit să creez acest tur virtual.

Ultimul capitol a avut un rol covârșitor deoarece a avut menirea de a unii toate etapele descrise în capitolele precedente. Acest lucru a solicitat pe lângă efortul major de îmbinare a cunoștințelor dobândite în acești ani și capacitatea esențială de oferire a unei exprimări clare și concise a mesajului transmis de acestă lucrare. Prin proiectarea aplicației descrise în acest ultim capitol mi-am îndeplinit misiunea în care am acceptat voluntar și entuziasmat să mă înrolez.

În viitor aș dori să fac unele îmbunătățiri care ar ajuta cu siguranță la creșterea fluxului de turiști pasionați de monumente istorice. Primul pas va fi constituit de traducerea și implementarea acestei aplicații web în mai multe limbi de circulație internațională.

De asemenea, datorită lucrărilor de restaurare a spațiului interior al cetății munca mi-a fost considerabil îngreunată, lipsa de acces oferindu-mi imposibilitatea de a adauga în turul virtual această latură esențială a cetății Oradea. Acest motiv mi-a oferit entuziasmul și dorința de a finaliza munca începută și nefinalizată prin unirea porțiunii ce face parte din turul virtual creat respectiv interiorul cetății, pe care urmează să îl îmbin în viitor cu restul turului virtual spre întregimea menită să completeze munca odată începută.

Concluziile sunt, rămân și vor fi ale celor dornici să pătrundă mai departe de tot ce poate fi văzut, perceput și analizat de modestul ochi uman.

BIBLIOGRAFIE

[1] http://ro.wikipedia.org/wiki/Cetatea_Oradea ()

[2] http://7castra.wordpress.com/2009/12/08/%E2%80%9Einima-ardealului%E2%80%9D-bate-in-asteptarea-transfuziei-de-euro/

[3] http://gmap.ro/#!lang=ro&loc=Oradea_Cetate

[4]http://ro.wikipedia.org/wiki/Cetatea_Oradea#mediaviewer/Fi%C8%99ier:Oradea_Citadel_map_RO.svg

[5] http://www.biovital.ro/article/17381/Cetatea-Oradea/2

[6] HTML 4 — Conformance: requirements and recommendations. W3.org

[7] "HTML5 Differences from HTML4". Working Draft. World Wide Web Consortium. 5

[8] "What is CSS?". World Wide Web Consortium.

[9] Lie, Håkon Wium; Bos, Bert (1999). Cascading Style Sheets, designing for the Web. Addison Wesley. ISBN 0-201-59625-3.

[10] http://labtehniciweb.wordpress.com/2014/05/20/pagina-web-responsiva-construita-cu-bootstrap/

[11] Lerdorf, Rasmus (2007-04-26). "PHP on Hormones – history of PHP presentation

[12] "Introduction: What can PHP do?". PHP Manual. http://www.php.net/manual/en/intro-whatcando.php 01.07.2013

[13] "Embedding PHP in HTML". O'Reilly. 2001-05-03.

[14] http://ro.wikipedia.org/wiki/MySQL

[15] http://ro.wikipedia.org/wiki/JavaScript

[16] http://blog.fotomagica.ro/5d-ce-sunt-datele-exif-si-la-ce-folosesc/

[17] http://www.sublimetext.com/home

[18] http://www.apachefriends.org/en/xampp-windows.html

[19] http://www.kolor.com/ptp2

[20] http://www.panoguide.com/howto/panoramas/types.jsp

[21] https://developers.google.com/maps/documentation/javascript/maptypes

BIBLIOGRAFIE

[1] http://ro.wikipedia.org/wiki/Cetatea_Oradea ()

[2] http://7castra.wordpress.com/2009/12/08/%E2%80%9Einima-ardealului%E2%80%9D-bate-in-asteptarea-transfuziei-de-euro/

[3] http://gmap.ro/#!lang=ro&loc=Oradea_Cetate

[4]http://ro.wikipedia.org/wiki/Cetatea_Oradea#mediaviewer/Fi%C8%99ier:Oradea_Citadel_map_RO.svg

[5] http://www.biovital.ro/article/17381/Cetatea-Oradea/2

[6] HTML 4 — Conformance: requirements and recommendations. W3.org

[7] "HTML5 Differences from HTML4". Working Draft. World Wide Web Consortium. 5

[8] "What is CSS?". World Wide Web Consortium.

[9] Lie, Håkon Wium; Bos, Bert (1999). Cascading Style Sheets, designing for the Web. Addison Wesley. ISBN 0-201-59625-3.

[10] http://labtehniciweb.wordpress.com/2014/05/20/pagina-web-responsiva-construita-cu-bootstrap/

[11] Lerdorf, Rasmus (2007-04-26). "PHP on Hormones – history of PHP presentation

[12] "Introduction: What can PHP do?". PHP Manual. http://www.php.net/manual/en/intro-whatcando.php 01.07.2013

[13] "Embedding PHP in HTML". O'Reilly. 2001-05-03.

[14] http://ro.wikipedia.org/wiki/MySQL

[15] http://ro.wikipedia.org/wiki/JavaScript

[16] http://blog.fotomagica.ro/5d-ce-sunt-datele-exif-si-la-ce-folosesc/

[17] http://www.sublimetext.com/home

[18] http://www.apachefriends.org/en/xampp-windows.html

[19] http://www.kolor.com/ptp2

[20] http://www.panoguide.com/howto/panoramas/types.jsp

[21] https://developers.google.com/maps/documentation/javascript/maptypes