ELABORAREA WEBSITE-ULUI PENTRU O AGENȚIE DE TURISM [308097]

[anonimizat] O AGENȚIE DE TURISM

IA21 – Informatică aplicată

Teză de an

Sef Catedră ______________

(semnătura)

Conducător științific: _____________ Numele, prenumele, gradul științific

(semnătura)

Autorul: ______________

(semnătura)

Chișinău-2016

[anonimizat] (optimizare pentru motoarele de căutare)

CMS – Content Management System (sistem de administrare a conținutului)

HTML – HyperText Markup Language (limbaj de marcare hypertext)

RWD – Responsive Web Design (web design personalizat)

WWW – World Wide Web (Rețeaua Internet)

[anonimizat]. [anonimizat], face comandă de o [anonimizat]: haine, piese, etc., [anonimizat] a [anonimizat], și multe altele. Aceasta fenomen are loc datorită dezvoltării tehnologiilor și viziunii în general asupra aplicațiilor Web. [anonimizat] o aplicație Web din anii 2000, [anonimizat], cu puține (sau în genere fără) imagini. Dezavantajele unei astfel de aplicații care o deținea erau: [anonimizat], lipsa totală a [anonimizat]. Pe parcursul anilor s-au găsit o sumedenie de căi de soluționare a acestor dezavantaje. [anonimizat], mai există și alte probleme majore pe care programatorul începător pur și simplu nu le va lua în seamă. [anonimizat], [anonimizat] – [anonimizat]-friendly, sau altele. [anonimizat] – aplicația Web are poziții mizere în motorul de căutare și prin urmare afacerea (agenția în cazul nostru) [anonimizat]. Așadar, e [anonimizat]. [anonimizat] o agenție de turism cu ajutorul CMS WordPress s-a încercat soluționarea pas cu pas a acestor probleme și implementarea pe parcurs a altor extensii și funcții utile care îi vor ușura semnificativ munca unui utilizator care nu are experiență în programare. S-a [anonimizat] (luînd în raport cu dobînda), iar o promovare bună la rîndul său îți poate aduce un venit pasiv mare și constant. S-a [anonimizat], aranjamentul corect a [anonimizat]. La final, s-a petrecut o analiză comparativă a produsul final obținut cu alte aplicații Web ale agențiilor de turism de pe teritoriul Republicii Moldova și nu numai. [anonimizat] o aplicație Web bine programată și configurată va aduce mulți clienți noi și prin urmare un venit mult mai mare.

Dezvoltarea ramurii turistice prin intermediul unei aplicații web

§ 1.1 Definirea termenilor de aplicație web, design web și corelația între aceștia

O aplicație web este un program care rulează într-o arhitectură client-server folosind tehnologiile deschise World Wide Web. Ele înlocuiesc modelele în care atît serverul cît și clientul rulează tehnologii proprietar, mentenanța aplicațiilor de pe partea de client fiind prea complexă, costisitoare și susceptibilă la erori. În schimb, omniprezența browserelor web și comoditatea de a le folosi drept client conduce la eliminarea acestei mari probleme. Astfel, au evoluat și pe partea de server serverele de aplicații, iar pe lîngă limbajele de programare au apărut frameworkuri și tehnologii dedicate programării acestora.

Prin design web se înțelege în general conceperea structurii și interfeței grafice. Siturile, în forma în care ele se afișează de browser, sunt menite să fie înțelese de orice persoană, chiar fără cunoștințe în domeniul informaticii sau al secvențelor de cod redactate de programatori. Aceștia lucrează ori în diverse limbaje din care apoi se generează limbajul specific de script al internetului HTML, ori direct în HTML. Dacă nu ar exista browser-ele care știu să interpreteze limbajul de script și să afișeze rezultatul pe ecran, siturile ar fi doar înșiruiri de texte neformatate și, cel mai probabil, fără imagini. În principiu limbajul HTML indică locul în care să se afișeze diversele elemente vizibile, dimensiunea, culoarea, precum și alți parametri care conferă unei pagini web atît aspectul cît și funcționalitatea dorită.

Orice aplicație web are un oarecare funcțional dar și un design unic al său. Bătălia dintre funcțional și design este actuală pînă în prezent în lumea programatorilor de aplicații web. Precum și în alte industrii, unii “creatori” pun accent pe frumusețea produsului, iar alții – pe funcționalitate. În fine, sigur e faptul că acesta este un act de balansare – crearea unei interfețe vizuale atrăgătoare fără a pune în pericol uzabilitatea funcționalului.

Dacă pagina web este grea sau delicată în utilizare atunci mai mult probabil că potențialii clienți vor părăsi această pagină, și acest fapt distruge obiectivul principal – promovarea agenției prin intermediul Internetului și mărirea profitului.

După ceva analize, s-a stabilit că știind funcționalul aplicației web, cu ușurință putem afla care este audiența aplicației noastre. Aceasta este cheia în crearea designului reușit a întregii aplicații, deoarece programatorul va ținti designul și aranjamentul pentru un anumit grup de persoane. Spre exemplu, avînd o aplicație web cu funcționalul de a vinde jucării, vom ști la sigur ca această aplicație o vor accesa părinții și copii. Prin urmare înțelegem că copiilor le plac culorile deschise și saturate, imaginile animate, etc. și ca rezultat vom avea un design specific pentru publicul dat, cu o interfață și navigare simplă, culori deschise saturate ce vor crea un aspect previzibil și logic în corelație cu conținutul paginii. Există și alt public, viceversa celui anterior, care este cointeresat mai mult de funcțional decît de aspectul aplicației.

Unele din cele mai inovatoare design-uri le aparțin aplicațiilor web de gen portofoliu, specializate pe în întreprinderile creative ca design grafic, modă, ilustrări, filmografie și fotografie. În astfel de cazuri, designul are prioritate totalmente asupra funcționalului, căci designerul presupune că publicul țintă va fi capabil să examineze rapid pagina și să se familiarizeze cu stilul și ordinea în care site-ul este prezentat. Utilizatorul actual este solicitat și stimulat să acționeze intuitiv cu integrări bine gîndite a galeriilor Flash și a altor elemente ca navigarea, conținutul și aspectul în genere, care sunt personalizate cu ajutorul bibliotecii jQuery și constituie o mare parte din interactivitatea și dinamismul aplicației. Un neajuns al aspectului creat la final poate fi respingerea publicului în vîrstă, însă știind că există alt public potențial, designerul își permite cu frîu liber să-și arate calificările și să se marcheze prin crearea designului unic și excepțional a aplicației web precum nimeni altul.

Există o analiză bazată pe răspunsurile utilizatorilor a mai multor aplicații web, și aceasta demonstrează că majoritatea utilizatorilor evaluează “bunătatea” aplicației după design și estetică, și că în mare parte funcționalitate are o preocupare secundară pentru utilizatori. Așadar, spre exemplu, mai bine să punem efort în crearea unui meniu derulant frumos cu ajutorul jQuery, decît să facem un simplu meniu programat în PHP.

În fine, fiecare își alege designul și funcționalitatea aplicației, de acești factori vor depinde rezultatele și publicul obținut, și anume acest lucru permite proiectantului să găsească mijlocul de aur, și să țină echilibru între acești factori, și anume acest echilibru ar trebui să aibă prioritate!

§ 1.2 Direcțiile dezvoltării aplicațiilor web turistice în lume

Aplicațiile web turistice sunt acele aplicații care trebuie să aibă un aspect unic din orice punct de vedere. Acest aspect unic se formează pe baza direcțiilor (trend-urilor) actuale în domeniul dat. Analizînd website-urile agențiilor turistice la nivel global observam în majoritatea cazurilor un pachet funcțional similar. Funcționalul devine unic prin aranjarea în pagină, schimbarea tipului de design sau adăugarea unor funcții care nu le au alte agenții. Pe scurt despre careva elemente din acest funcțional.

Integrarea hărții în navigare. Presupune de a fi unul dintre cele mai importante lucruri pentru un client potențial, dar și pentru un programator / designer iscusit. Orice întrebare, orice neclaritate sau dorința potențialului client de a vizita agenția de turism, trebuie să-l ducă la pagina de Contact (unde este prezentă și harta). Din acest motiv, link-ul hărții se stabilește în majoritatea cazurilor în blocul de navigare. Pentru ce e necesară afișarea pe hartă? Presupunem că avem 1-5 filiale ale agenției de turism într-un oraș, toate pe adrese diferite. Avantajele sunt: utilizatorul / clientul potențial cu ușurință poate vedea care este cea mai apropiată filială, markerul situat pe harta, dă o precizie concretă unde se află agenția.

Figura 1. Exemplu de integrare a hărții de contact

Afișarea eficientă a evenimentelor, promoțiilor. Folosirea unui calendar pentru afișarea evenimentelor este cea mai efectiva, cauza este simplă: sortarea după dată este cea mai clară pentru utilizatori. Însă este dificil de creat un calendar atît funcțional cît și atrăgător, deseori, se întîmplă ca calendarul să fie funcțional dar absolut fără aspect estetic sau viceversa – frumos aranjat și greu în folosire. Mulți utilizatori întîlnesc această problemă majoră pe dispozitivele mobile. Promoțiile cel mai des se afișează în antetul paginii sub forma unui slider ce conține mai multe promoții sau evenimente. La astfel de soluție ne îndreaptă trendurile din prezent, cînd orice eveniment / promoție importantă trebuie afișată în antetul paginii. Afișarea evenimentelor și a promoțiilor este un lucru dificil și necesită o organizare bună, în special cînd există un număr mare de promoții și evenimente. Promoțiile sunt aranjate după sezoane, evenimentele la fel se aranjează după ore, zile. În mare parte, nu contează metoda de afișarea, unicul lucru pe care e nevoie de pus accentul este următoarea întrebare: “Cît de ușor îi este utilizatorului să găsească ceea ce el dorește?”

Implementarea sistemei de vot și de păreri. Implementarea acestor sisteme este foarte dubioasă din cauza părerilor și voturilor subiective. Problema constă în relevanța acestora, și în numărul de utilizatori ce vor fi implicați în vot. Implementînd acest sistem e necesar de pus următoarele întrebari: “Cîți utilizatori vor participa la vot?”, “E necesar de afișat numărul de utilizatori ce au votat?”. Daca numărul de participanți la vot va fi unul mare, nu vor fi obstacole, însă deseori acest număr nu este prea mare, in deosebi în domeniul agențiilor de turism, astfel numărul de voturi redus poate duce potențialii clienți în eroare. Spre exemplu, oferind servicii la 10 clienți, unul dintre aceștia rămîne nesatisfăcut, și el la sigur va posta o părere rea despre companie, din 9 clienți satisfăcuți vor posta părerile sale doar ~1/4 (așa arată studiul efectuat recent). În fine, avem 1 părere negativă și 2 pozitive, și un număr mare de clienți potențiali care vor respinge ofertele agenției doar din cauza că sunt puține păreri și o parte semnificativă din ele sunt negative. Sistemele de vot și păreri joacă un rol important în promovare, căci potențialii clienți iau cel mai des în considerație anume acest criteriu pentru a lua o decizie finală.

Figura 4. Exemplu a sistemei de păreri

Implementarea designului web personalizat. Cunoscut sub acronimul englez RWD (Responsive Web Design) este o filozofie de design și dezvoltare destinată adaptării apariției de pagini web pentru dispozitivul utilizat pentru vizualizare. Astăzi paginile web sunt afișate pe mai multe tipuri de dispozitive, cum ar fi tablete, Smartphone-uri, cărți electronice, calculatoare, și asa mai departe. Mai mult, fiecare dispozitiv are caracteristicile sale specifice: dimensiunea ecranului, rezoluție, putere CPU, capacitatea de memorie, printre altele. Această tehnologie își propune ca, deși cu un design unic, să poată fi vizualizată de pe orice dispozitiv fără a distruge aspectul user-friendly.

Utilizarea de dispozitive mobile este în creștere, dispozitivele de genul tabletelor și telefoanelor inteligente mărindu-și vînzările în ultimii ani și în acest fel, navigarea pe internet pe astfel de dispozitive a devenit din ce în ce mai comuna. Acesta este motivul pentru care responsive web design a devenit atît de popular, deoarece aceasta este o tehnologie ce propune o soluție web ce permite vizualizarea web atît pe un dispozitiv desktop cît și pe unul mobil. Cu o singura versiune în HTML și CSS se acoperă toate versiunile de ecran, adică, site-ul web creat va fi optimizat pentru toate tipurile de dispozitive: PC, tablete, telefoane mobile, etc. Acest lucru va îmbunătăți experiența utilizatorului spre deosebire de ceea ce se întîmplă cu site-urile fixe atunci cînd sunt accesate de pe dispozitive mobile. În acest fel se reduc costurile de creație și administrare atunci cînd design-ul ecranului este similar pe dispozitive de mărimi diferite. Se presupune de asemenea ca evita dezvoltarea de aplicații ad-hoc pentru versiuni mobile, sau nu, de exemplu o aplicație specifica pentru iPhone, alta pentru mobile Android, etc, deși în ziua de azi site-urile pentru mobile nu pot realiza aceleași funcții ca și aplicațiile native. Din punctul de vedere al optimizării pe motoarele de căutare, ar apărea doar un URL în rezultatele de căutare, prin intermediul cărora se șterg redirectările și erorile ce deriva din acestea. Se evită de asemenea erorile la accesarea site-urilor web, în special de pe social links, adică, de pe link-urile pe care utilizatorii le distribuie pe rețelele sociale de genul Facebook sau Twitter și care pot sa sfîrșească eronat, depinzînd de link-ul ce a fost copiat (de pe ce dispozitiv a fost copiat) și de dispozitivul de pe care se accesează.

Figura 5. Exemplu de design web personalizat

§ 1.3 Mediul Web – cel mai efectiv mijloc de promovare

După ce ați creat site nou pentru afacere, vă întrebați probabil cum sa aduceți trafic pe site și cînd vor începe să apară beneficiile mult așteptate ale optimizării si promovării site-ului pe Internet. Oricît de frumos si informativ este site-ul dvs., atît timp cat nu este promovat și nu se știe de el, adică pana cînd nu vă veți decide să aduceți trafic pe site, este foarte puțin probabil să primiți noi cereri de ofertă, comenzi online sau să reușiți sa fidelizați vizitatori și potențialii clienți ai site-ului. Să analizăm împreuna o lista cu cîteva modalități eficiente de promovare a site-ului site online și cum putem aduce trafic de calitate pe un site nou.

Figura 6. Metode promovare a site-ului

Cîteva metode de promovare a site-ului online:

Promovarea site-ului pe Google: Chiar daca aveți o suma modestă disponibila pentru promovarea online, să spunem, de ex. 30 lei/zi, este important sa începeți o campanie de promovare Google AdWords imediat după lansarea site-ului. In acest fel va puteți asigura nu doar un trafic constant pe site, ci trafic relevant în site, în funcție de audiența dorită. Adevărul este că, daca nu promovați site-ul, șansele ca cineva să ajungă pe site întîmplător sunt, sunt aproape de zero. Asigurați-va ca o parte din milioanele de persoane care folosesc rețeaua Web în lume și clienții potențiali să ajungă pe site-ul dvs. Pentru a obține cele mai bune rezultate online și pentru a vă asigura ca bugetul de promovare este folosit eficient, cel mai bine este necesar sa apelați cu încredere la un specialist de marketing, cu certificare pentru publicitatea Google AdWords, care sa știe să personalizeze campaniile de promovare, să promoveze și să scoată în evidență beneficiile și punctele forte ale paginilor.

Promovare prin marketing clasic: Există cîteva tehnici de marketing eficiente pe care le puteți folosi, chiar fără să aveți nevoie de un buget suplimentar de promovare. De exemplu, alegeți sa adăugați adresa site-ului dvs. pe cărțile de vizita, în semnătura de email, pe conturile de socializare online, pe materialele de promovare din localitate, pe mașina firmei și pe orice alte materiale la care vă puteți gîndi. Adăugați și o mica descriere în care să comunicați pe scurt vizitatorilor site-ului care este domeniul de activitate și ce pot cîștiga aceștia dacă intră pe site, de ex: promoții online, abonare la newsletter, mai multe informații, etc.

Adăugați un video pe YouTube. YouTube este rețeaua de socializare care aduce site-urilor cel mai mare trafic? Publicul răspunde din ce în ce mai bine și mai rapid la imaginile video și de acolo este ușor să îl redirecționați către site.

Postați in mod constant articole, informație nouă pe site și pe conturile de social media. Ca parte a activității de consultanta marketing online pe care o desfășuram, recomandam întotdeauna clienților să aibă un blog integrat în site în care să adauge în mod constant, pe cît posibil, o data pe săptămîna sau o dată pe lună, articole noi cu informații din domeniul in care aceștia activează. În felul acesta, vă veți putea dovedi expertiza, veți cîștiga încrederea audienței, veți ajuta la construirea imaginii unei afaceri active online și offline și veți ajuta motoarele de căutare sa indexeze mai des site-ul. Postarea de conținut de calitate și articole relevante pe site face parte din strategia de optimizare SEO. Scrieți titlurile articolelor cît mai atrăgătoare, promovați și distribuiți informația pe rețelele de socializare (Facebook, Google Plus, Twitter, LinkedIn) și prin newsletter.

Postați articole sau comentarii pe site-uri de nișă, din domeniul dvs. de activitate. Ați început o afacere tocmai pentru că sunteți specializat și pasionat de domeniul dvs. de activitate. Este bine să luați în considerare descoperirea site-urilor de calitate din nișa dvs. și să participați cu articole/ conținut specializat. Prin intermediul acestei metode veți avea șansa ca atît dvs., cat și site-ul sa fiți cunoscuți într-o comunitate mai mare ale domeniului dvs. de activitate.

Optimizați conținutul site-ului din punct de vedere SEO: Mult conținut pe site nu echivalează cu o poziționare buna pe Google. Este recomandat să optimizați conținutul site-ului in funcție de limbajul și termenii folosiți de către vizitatorii site-ului / potențiali clienți. Ca și in cazul promovării Google AdWords, și pentru optimizarea SEO, este recomandat de lucrat cu o firma de servicii optimizare SEO cu rezultate, recomandări si portofoliu. Altfel, riscați să pierdeți potențial în ceea ce privește vizibilitatea si rezultatele online ale site-ului, ceea ce în final înseamnă pierderea unor oportunități financiare și de timp.

Recomandări personale ale clienților si cunoscuților: Chiar și astăzi, una dintre cele mai eficiente metode de marketing rămîne recomandarea personala prin intermediul clienților existenți, prin cunoștințe, familie și prieteni. Cînd adăugați o oferta noua pe site sau conturile de social media, încurajați-vă prietenii să vă ajute să distribuiți informația. Gîndiți-vă să oferiți premii sau recompense pentru ca mesajul sa fie redistribuit către cat mai multe persoane.

Firmele mari investesc mult in promovarea site-ului lor, au o echipa de promovare online si un buget pe măsura. Deși o afacere mica nu dispune de aceleași mijloace, uneori prin perseverenta, o activitate susținută de marketing și colaborarea cu profesioniști pentru promovarea site-ului si a afacerii in mediul online, o firmă mică poate cîștiga parteneriate cu companii mari și, în final, iși poate extinde cu ușurință afacerea la un alt nivel.

Analiza compartivă a site-urilor turistice existente pe piață

§ 2.1 Structura și elementele unei aplicații web

Figura 7. Structura unei aplicații web

Crearea aspectului unui site web este un proces complex care, pentru a putea fi îndeplinit cu succes, trebuie să respecte o anumită ordine și claritate în execuție. Pentru ca structura unui site web să fie una ușor de pus în practică, avem nevoie de o imagine mentală bine conturată asupra aspectului pe care dorim să îl aibă.

Logo – cel mai important element de identificare pentru o firmă. Logo-ul se afișează de obicei în colț în antetul paginii într-un loc vizibil și apare pe toate paginile site-ului. Foarte mulți întreprinzători fac o greșeala capitală: Se complică. Un logo nu trebuie să fie complicat și greu de înțeles, un logo trebuie să fie simplu, să se asocieze cu business-ul, iar la o scară mai mare (corporativă), specialiști în psihologie, marketing, design, au grijă ca prin culorile și formele alese să stîrnească o acțiune în psihologia clientului. De regula se atinge subconștientul. Pagina oricărui site web este formată din 3 părți:

Antet – primul element mare și vizibil din pagină e antetul. Acesta poate avea diferite forme și mărimi, poate conține imagini, text, elemente statice sau dinamice sau cel mai des în ramura turistică – o prezentare de slide-uri, sau promoții. De asemenea, antetul poate conține blocul de navigare.

Corpul paginii – cel care deține conținutul, imagini, videoclipuri, link-uri etc. Corpul paginii poate fi aranjat / împărțit în mai multe feluri, corpul poate conține doar conținut, sau pe lîngă conținut poate conține și un bloc lateral situat în stînga sau în dreapta conținutului în care pot fi amplasate diverse elemente suplimentare.

Subsol – blocul în care se regăsesc informații precum cine este creatorul site-ului web, drepturi de autor pentru conținut, link-uri către alte pagini ale site-ului și alte informații utile.

Prima pagină – numită de obicei „Acasă” sau „Prima pagină” este, în cele mai multe cazuri, pagina cea mai vizitată pagină de pe site. Importanța ei este foarte mare pentru că în funcție de aspectul acesteia vizitatorul decide dacă rămîne pe pagină sau părăsește pagina după primele 2 secunde, dacă site-ul este plăcut de navigat și dacă mai dorește să viziteze și alte pagini.

Navigarea – este de asemenea o componentă importantă. Una dintre cele mai des întîlnite erori în structura unui site web este funcționalitatea navigării. La sigur, că nu de puține ori se întîlnește situația că la intrarea pe un site care, deși arăta bine, dar la accesarea unui link din navigare fie nu s-a încărcat, fie link-ul către pagina promisă nu a funcționat și ne redirecționează la pagina 404. Pentru un site foarte mare, ordinea paginilor și subpaginilor contează extrem de mult pentru că fără claritate și ușurință în navigare, utilizatorul nu va putea găsi informația pe care o caută într-o mare de informații.

Structura unui site web pentru o afacere respectă de cele mai multe ori un șablon clasic, cu un aspect ușor de navigat și pagini corespunzătoare:

Prima pagină: o descriere scurtă și generală a companiei, a obiectului de activitate și a serviciilor/produselor oferite.

Despre noi: o pagină unde este prezentat istoricul companiei, realizările de-a lungul timpului și obiectivele pentru viitorul apropiat.

Portofoliu: aici sunt listați clienții importanți cu care a colaborat compania, lucrări și proiecte realizate

Servicii: aceasta este pagina care poate să aducă venituri companiei dacă are un conținut convingător și niște poze/videoclipuri interesante și atractive pentru potențialii clienți.

Contact: de obicei, aici se regăsește o hartă cu locația firmei, adresa exactă, numărul de telefon, adresa de e-mail și, opțional, un formular de contact.

Bineînțeles, structura unui site web nu trebuie neapărat să fie una clasică. Design-ul ales trebuie să fie în acord cu domeniul de activitate al companiei. Structura unui site personal, de exemplu, poate fi una complet originală pentru a reflecta preferințele și personalitatea celui pe care îl reprezintă. Într-o industrie foarte competitivă un design care șochează sau surprinde într-un mod plăcut vizitatorii poate fi, de fapt, picătura care face diferența.

§ 2.2 Structura și particularitățile pentru o aplicație web reușită

Tehnicile de realizare a unui site au evoluat în mod constant, această dezvoltare având ca principal obiectiv îmbunătățirea experienței utilizatorului. Ca în orice alt domeniu, tendințele în realizare site au menirea de a stabili direcția de dezvoltare și opțiunea utilizatorilor, iar respectarea acestora are menirea de a atrage noi vizitatori, potențiali parteneri sau clienți.

Iată care sunt particularitățile din prezent pentru o aplicație web reușită:

Designului web personalizat (Responsive website design)

Procesul de dezvoltare site care prevede un design personalizat / mobile-friendly presupune proiectarea site-ului astfel încât să poată fi accesat atît de la desktop, cît și de pe mobil, asigurînd-se același conținut, cu funcționalitate perfecta pentru orice dimensiune a device-ului utilizat pentru accesare.

Flat web design

Utilizat de profesioniști în aspectul grafic, precum Facebook, Google sau Windows, design-ul care elimină efectele tridimensionale, animațiile obositoare, decorațiunile inutile care nu aduceau plus valoare conținutului, mizează pe simplitate, se bazează pe linii îndrăznețe, culori saturate și multă creativitate. Aceasta tehnică de web design oferă site-ului un aspect mai aerisit, facil de citit, analizat și procesat de către utilizator. În același timp, prin utilizarea acestui tip de web design este facilitată partea de răspundere, prin încărcarea mai rapida a site-ului.

Parallax scrolling

Parallax scrolling este modalitatea prin care site-ul este însuflețit, in timp ce este accentuata profunzimea textului și a imaginilor. Aceasta tehnică permite schimbarea graficii sau pornirea animației în momentul în care se face scroll pe pagina. Cea mai importantă funcție a Parallax Scrolling este cea de creare a efectului de lichid a site-ului, oferindu-i designul comercial, surprinzător, menit sa capteze atenția publicului și în special a potențialului client.

Single page design

În mod tradițional, site-urile sunt construite din mai multe pagini ce pot fi accesate prin link-uri de navigare. Anume Single page design de obicei utilizează Parallax scrolling, eliminînd necesitatea ca utilizatorul să navigheze pe mai multe pagini pentru a găsi informația căutata, fiind un design user-friendly care va maximiza experiența utilizatorului site-ului. Ideala pentru eliminarea elementelor inutile, care îngreunează accesul la informație, aceasta tendința este mai puțin recomandata pentru cei care vor un site cu un conținut bogat, interesați în dezvoltarea SEO.

Fixed headers

Popularitatea header-ului fix a fost asigurata cu apariția responsive web design. Fiind element invariabil la momentul efectuării scroll-ului pe pagina, header-ul fix permite accesarea paginilor din site fără a fi necesara reîntoarcerea la meniul din partea de sus. Se realizează acest efect prin impunerea proprietăților position: fixed, top: 0, left: 0 asupra elementului dorit. Acest tip de design este foarte util pentru design-ul site-urilor cu conținut bogat, repartizat pe mai multe pagini, însă este cel mai des utilizat pentru afișare navigării site-ului.

Font-uri cu dimensiuni mari

Acumulînd experiența anilor trecuți, tendințele în web design, au în vedere soluții menite să faciliteze accesul la informație pentru utilizatori. Astfel, un font cu caractere mai mari va elimina senzația de oboseală cauzată de concentrarea mai mare la momentul citirii, va permite citirea rapidă și va atrage atenția utilizatorului.

Realizarea unui site competitiv, cu un design profesionist este mai important decît respectarea unor tendințe care nu servesc scopului pe care vi l-ați propus pentru site. Este foarte important ca înainte să decideți modificările pe care le aduceți site-ului dumneavoastră să vă consultați cu o agenție de web design, stabilind împreuna cu profesioniștii obiectivele site-ului și modul în care obiectivele și valorile companiei dumneavoastră se regăsesc în elementele de web design ale acestuia.

§ 2.3 Compararea cu alte aplicații web de pe piața

Deoarece aplicațiile web au două părți esențiale: partea grafică – ce ține de aspectul, estetica site-ului și partea funcțională – ce ține de funcțiile aplicației oferite utilizatorului, compararea s-a bazat pe aceste părți. Criteriile de comparare sunt: aspectul aplicației și structura paginii, respectarea tendințelor actuale, pachetul funcțional a aplicațiilor. Ca candidați pentru comparare s-au ales 4 agenții (2 agenții străine și 2 agenții autohtone): Isida (http://www.isida.md/), Premium Tur (http://premiumtur.md/), Bavaria Dream (http://www.bavaria-dream.com/), Visit Berlin (http://www.visitberlin.de/).

Aspectul aplicației

De la o aplicație la alta structura și aspectul aplicației diferă foarte mult, însă majoritatea concurenților au probleme semnificative la acest capitol. Nici una din aceste agenții nu are un design personalizat, iar agenția de turism Isida spre exemplu are un aspect învechit și nu prea user-friendly, cu multe link-uri care nu funcționează, și în general aplicația nu este bazată pe vreun framework PHP ci este compusă din simple fișiere cu extensia HTML. Aproximativ aceleași probleme le deține și agenția străină Bavaria Dream, însă aici situația cu aranjamentul în pagină e mai bună. Ce ține de agențiile Visit Berlin și Premium Tur, situația este una mai favorabilă, încît pe ambele site-uri au un aspect plăcut, cu culori saturate, aprinse, un aranjament clar dar puțin încărcat. O altă problemă este publicitatea de la Google Adsense ce este prezentă pe site-urile agențiilor Bavaria Dream și Visit Berlin, întrucît, în primul rînd un site dedicat unei agenții de turism nu trebuie să conțină alte elemente decît cele ce le necesită vizitatorul sau potențialul client, și în al doilea dă dovadă că această agenție este “fără de obraz” și demonstrează în așa fel că pe lîngă sutele și miile de euro nu îi ajung 20-30$ / lună care le dobîndesc prin intermediul publicității. În aplicația “Monry”, nu este prezent nici unul dintre neajunsurile enumerate, totul este pus la punct, fără mult material de prisos. Designul personalizat va afișa cumsecade conținutul aplicației pe orice dispozitiv. Pe lîngă toate, are un aspect îngrijit, curat, și contrastul de culori aprinse și pale creează o impresie pozitivă a utilizatorului care ușor poate deveni și un potențial client.

Respectarea tendințelor

Ce ține de capitolul respectării tendințelor în design, iarăși s-a evidențiat faptul că acestea nu sunt implementate la toți candidații. Însă problema nu constă în acest fapt, deoarece implementînd aceste tendințe, ele pot valora nimic dacă nu sunt implementate cu măiestrie. Un exemplu bun ar fi, aplicația agenției Isida, care are un design învechit și sărac însă are un slider bine organizat bazat pe jQuery. În așa cazuri e necesar de înțeles că toate elementele și părțile unui site trebuie să fie la același nivel după dezvoltare. Și iarăși aplicația “Monry” în mare parte respectă noile tendințe, avînd și un design solid, un slider în antet pe pagina principală, fonturi de mărime mare, și multe altele.

Pachetul funcțional

Pachetul funcțional a candidaților este destul de bogat, și iarăși cu excepția aplicației a agenției de turism Isida, care este bazată doar pe HTML și nu se poate vorbi nici pe aproape de un oarecare funcțional. Un avantaj în pachetul funcțional îl au aplicațiile agențiilor de turism Visit Berlin și Premium Tur. Aceste avantaje sunt: căutarea avansată asupra Locurilor de cazare, Obiectivelor turistice, Rezervării biletelor online, selectarea limbii în care se afișează conținutul site-ului. Însă aplicația Monry la fel are avantaje ce lipsesc altor aplicații, cum ar fi: sliderul cu promoții / noutăți importante, sliderul cu echipa, sliderul cu destinații, contoare de statistică, bare animate cu abilitățile echipei, subsol cu 4 coloane pentru widgeturi, etc.

Programarea și structurarea aplicației web

§ 3.1 Introducere în sistemul de administrare a conținutului WordPress și configurarea acestuia

WordPress este platforma care populează 25% din toate website-urile din întreaga lume. La început a fost o simplă platformă de blogging, dar în timp a evoluat și s-a dezvoltat într-un puternic CMS, nu unul pe placul tuturor programatorilor web din păcate, dar cu siguranță va ajunge la nivelul unde va mulțumi pe toată lumea.

Pentru a rula o instanță de WordPress, e nevoie de un server local, care va funcționa și fără conexiune la internet. WordPress necesită PHP și MySQL 5.6+. El poate rula practic pe orice tip de server care suportă PHP și MySQL, versiunile de mai sus, dar se recomandă un setup pe Apacahe sau Nginx. La programarea aplicației web Monry s-a folosit aplicația portabila UsbWebServer care suporta PHP și MySQL.

Pentru aplicația Monry a fost creată o temă. Pentru a dezvolta o temă WordPress e nevoie de o bună înțelegere a limbajelor de marcare HTML și CSS și de o înțelegere minimă a limbajului de programare PHP. Limbajele de scripting precum JavaScript sunt opționale, dar deseori necesare. Pe lângă acestea, o înțelegere completă a platformei WordPress este absolut necesară. Temele WordPress nu sunt o măiestrie a limbajului PHP, dar deseori necesită o experiență mare în limbajul PHP pentru soluționarea problemelor ce pot apărea pe parcurs.

Structura fișierelor unei teme WordPress

Toate fișierele temei sunt plasate într-un singur folder, aflat în folder-ul wp-content / din install-ul de WordPress. Orice alt fișier în afara acestui folder nu este considerat parte din temă ci este considerat resursă externă. Numele directivei este folosit ca și cuvîntul cheie de identificare al temei. Dacă tema este făcută pentru o audiență mare, este absolut necesar ca numele temei și cuvîntul cheie a acesteia sa fie unice. Dacă tema este personalizată pentru un singur website, acest lucru nu este absolut necesar. O temă are nevoie în mod obligatoriu de două fișiere ca să funcționeze: index.php și style.css, însă nu este recomandat folosirea numai a acestor două fișiere.

Template files

Tema WordPress este construită în jurul template-urilor. Un template reprezintă un fișier din folderul temei. Pe lângă template-urile necesare pentru afișarea anumitor tipuri de conținut – de exemplu template-ul archive.php ajută la afișarea postărilor din arhivă – există și template-uri parțiale deja definite în WordPress, template-uri precum header.php sau footer.php. Ele ajută în mod evident să afișăm același header și footer pe toate paginile website-ului nostru.

Pe lângă template-urile de mai sus, se permite crearea a unui număr infinit de template-uri absolut pentru orice scop pus în plan. Aici intervine creativitatea și logica gîndirii pentru a menține o structură cît mai simplă și eficientă. De exemplu, dacă avem o secțiune „Ultimele știri” pe prima pagină, dar și o secțiune „Știri recomandate” pe pagina articolului, iar acestea au aceeași structură, putem folosi un singur fișier pentru afișarea respectivei postări. Este recomandat ca aceste fișiere să fie structurate pe directive într-o ordine ierarhică cât mai ușor de înțeles și navigat.

Post Types

Un „Post Type” reprezintă un anumit tip de conținut. Folosind un post type, utilizatorul final are posibilitatea de a adăuga conținut pe website. Desigur, majoritatea utilizatorilor probabil nu știu de asta, deoarece cel mai des aceștia adaugă postările din secțiunea „Articole” din Panoul de Control. Toate post type-urile sunt salvate, din păcate, în aceeași tabelă din baza de date și anume wp_posts, dar sunt diferențiate de o coloană numită post_type. Pe scurt, din punct de vedere tehnic, un post type reprezintă numele unei coloane din baza de date. Posturile împărtășesc aceeași valoare de post_type, ajung astfel să se grupeze în mai multe post types. WordPress oferă posibilitatea de a defini cîte post type ne dorim.

Pe lîngă post types definite de programator, WordPress are cinci post types predefinite:

‘posts’ – responsabil pentru postările normale, se găsește în sub meniul „Articole”

‘page’ – responsabil pentru crearea paginilor, se găsește în sub meniul „Pagini”

‘attachment’ – responsabil pentru stocarea datelor fișierelor încărcate pe server prin funcția Media.

‘revision’ – responsabil pentru stocarea variantelor de conținut din diverse Custom Post Types

‘nav_menu_item’ – responsabil pentru stocarea meniurilor create în Aspect > Meniuri

Taxonomie

O taxonomie înseamnă o grupare de categorii. Spre exemplu: este practic crearea unui „raft” unde putem pune „cutii” (categorii) în care putem punem „plicuri” (subcategorii ) iar în plicuri o să punem scrisori (postări). Avem libertatea de a crea câte taxonomii dorim și să le legăm la un singur post type sau la mai multe post types. Orice categorie / sub-categorie adăugată într-o taxonomie este numită term (termen).

WordPress are trei taxonomii predefinite:

‘categories’ – legat de post type-ul ‘posts’, responsabil pentru crearea de categorii la articole

‘tags’ – legat de post type-ul ‘posts’, responsabil pentru crearea de tag-uri la articole

‘post-formats’ – responsabil pentru crearea de post formats.

Ierarhia template-urilor unei teme WordPress

Imaginea ilustrează toate fișierele (albastru) ale unei teme WordPress și ierarhia lor (portocaliu) împreună cu funcția lor (gri închis) în sistem. (Anexa 1)

Setarea paginii principale

Aceasta se poate seta din Setări > Afișare, dar structura fișierelor are o importanță mai mare. Majoritatea confuziilor apar datorită imaginii cu ierarhia template-urilor. Este important analiza structurii de pe imagine din direcția corectă.

Dacă se dorește impunerea unui template pentru prima pagină, care să nu poată fi schimbat deloc fără interacțiunea cu codul, se folosește template-ul front-page.php. Acest template anulează orice altă setare sau fișier pentru home page. Dacă dorim folosirea unei pagini pentru prima pagina, dar în același timp dorim ca secțiunea de blog să fie activă, trebuie să creăm două pagini diferite. Una o setăm pentru Pagina principală și cealaltă pentru Pagina articolelor. Dacă decideți să creați un nou template file, template-ul nu trebuie să se numească home.php, deoarece home.php este folosit pentru afișarea conținutul pe home page când nu există orice altă setare.

Index.php și importanța lui

Direcția din care citim ierarhia are importanță. La citirea din dreapta spre stânga, observăm că totul are la bază index.php. Fisierul index.php este back-up-ul oricărui fișier. Dacă WordPress nu găsește orice alt fișier din ierarhia lui inițială (nu se includ aici și template-urile personalizate) se va folosi de index.php. Este important ca fișierul index.php să aibă o structură asemănătoare cu restul website-ului și să afișeze conținutul într-o manieră corectă. Un lucru binevoit este folosirea stilului fișierului de arhivă, care să includă butoane de paginare și neapărat să fie afișat tot conținutul, nu numai o parte din el. Mai exact, să se folosească funcția the_content(), nu the_excerpt() sau orice alta alterație (filtru) aplicat pe the_content().

Panoul de administrare

În mare parte WordPress este iubit pentru administrarea ușoară a conținutului și a aplicației web în întregime prin panoul de administrare bine organizat. Aici se găsesc o sumedenie de funcții folositoare, care sunt implicite în WordPress și nu necesită cunoștințe profunde în oarecare limbaj de programare. Spre exemplu prin intermediul submeniului General al meniului de Setări putem seta: titlul site-ului, sloganul, adresa de email a administratorului, permiterea / interzicerea înregistrării, formatele de dată și de ora, iar prin intermediul submeniului Discuții, putem activa / dezactiva comentariile la articole, permite scrierea comentariilor doar a persoanelor care sunt autentificate, activarea / dezactivarea sistemei de aprobare a comentariilor de către administratorul aplicației, și multe altele.

Figura 14. Setări generale

Prin intermediul panoului de administrare putem vizualiza toate articolele sau putem adăuga, modifica sau șterge un articol anumit. În primul cîmp se introduce titlul articolului, în blocul textarea putem introduce cod HTML, Shortcode-uri implicite sau textul dorit pentru articol. În sidebar-ul din dreapta paginii putem introduce cuvintele cheie ce sunt relevante pentru articolul nostru, acestea au un rol important în SEO optimizare. Desigur putem seta și imaginea reprezentativă și selecta una sau mai multe categorii din cele prezente sau putem cu ușurință adăuga una nouă daca e nevoie. Pe lîngă acestea, putem seta și o parolă pentru a permite vizualizarea articolului doar de persoanele ce știu parola.

Figura 15. Adăugarea unui nou articol

§ 3.2 Structura, aranjamentul în pagină, designul și programarea aplicației web “Monry”

Aspectul aplicației web Monry se bazează totalmente pe particularitățile unei aplicații web reușite. Designul personalizat și aranjamentul elementelor captivează atenția utilizatorilor și potențialilor clienți pe orice dispozitiv! La fel de bine captivează atenția și blocurile cu fundalul Parallax care oferă conținutului un aspect unic. Fonturile au dimensiuni mari conform tendinței și acest fapt transformă orice paragraf într-un poem ușor citabil pentru orice persoană indiferent de vîrstă. Pagina de start a aplicației Monry este de tip Single Page sau cum se mai cunoaște Landing Page, acest fapt ne permite amplasarea tuturor informației pe scurt doar pe o pagină și la dorință se poate include în acele informații scurte referința spre informația deplină. Acest șiretlic este foarte mult prețuit de utilizatori dar și de programatori, deoarece utilizatorul în cca. 70% din cazuri intră doar pe prima pagină a site-ului și aici acesta hotărăște dacă rămîne pe site sau nu, însă în acest caz pagina are multe secvențe ce îl atrag pe utilizator să navigheze pe o mare parte din pagini. Aranjamentul în pagină este unul aproape de obișnuit, antetul paginii conține meniul de navigare fixat și sliderul principal. Conținutul paginii principale este compus din mai multe secvențe, iar subsolul din 4 locuri pentru widgeturi.

Structura fișierelor a temei pentru aplicația web Monry este următoarea:

În directiva library se conțin toate fișierele cu stiluri, imaginile folosite în designul site-ului și extensiile Javascript. Pentru ai preda aplicației un șic și pentru a respecta tendințele actuale, au fost implementate următoarele extensii Javascript:

jQuery – Platformă Javascript folosită pentru ușurarea manipulării cu conținutul paginii HTML.

Bootstrap.js – HTML Framework, care ușurează semnificativ crearea unui design personalizat.

jquery.counterup.min.js – Extensie jQuery pentru crearea contoarelor cu animație.

jquery.sliderPro.min.js – Extensie jQuery pentru crearea slider-ului de pe pagina principală din antet.

owl.carousel.min.js – Extensie folosită pentru crearea restului de slidere

scrollreveal.min.js – Extensie folosită pentru apariția blocurilor cu ajutorul animațiilor cînd acest bloc devine vizibil pentru utilizator.

Majoritatea din restul fișierelor din directiva monry sunt fișiere templates, care ne ajută la să afișăm eficient conținutul paginilor și fișiere de configurare a aplicației.

Fișierul functions.php este responsabil pentru setarea temei. În el are loc înregistrarea fișierelor de stil, fișierele Javascript, sidebar-urile, meniul din header și alte funcții adăugătoare. Practic, acest fișier se comportă ca o extensie WordPress, doar că funcțiile definite în el sunt disponibile numai în tema din care face parte și nu pot fi dezactivate din Panoul de administrare ca orice alt plugin obișnuit.

Înregistrarea stilurilor și a scripturilor Javascript

wp_register_style( 'animate-stylesheet', get_template_directory_uri() . '/library/css/animate.css', array(), '', 'all' );

wp_register_style( 'fontAwesome', get_template_directory_uri() . '/library/css/font-awesome.min.css', array(), '', 'all' );

wp_register_style( 'owl-stylesheet', get_template_directory_uri() . '/library/css/owl-carousel/owl.carousel.css', array(), '', 'all' );

wp_register_style( 'owl1-stylesheet', get_template_directory_uri() . '/library/css/owl-carousel/owl.theme.css', array(), '', 'all' );

wp_register_style( 'slider-stylesheet', get_template_directory_uri() . '/library/css/slider-pro/slider-pro.css', array(), '', 'all' );

wp_register_style( 'bootstrap-stylesheet', get_template_directory_uri() . '/library/css/bootstrap.css', array(), '', 'all' );

wp_register_style( 'bones-stylesheet', get_template_directory_uri() . '/library/css/style.css', array(), '', 'all' );

wp_register_style( 'bones-ie-only', get_template_directory_uri() . '/library/css/ie.css', array(), '' );

wp_register_script( 'bones-bootstrap', get_template_directory_uri() . '/library/js/libs/bootstrap.min.js', array(), '3.0.0', true );

wp_register_script( 'bones-sliderpro', get_template_directory_uri(). '/library/js/libs/jquery.sliderPro.min.js', array(), '', true );

wp_register_script( 'bones-owl', get_template_directory_uri() . '/library/js/libs/owl.carousel.min.js', array(), '', true );

wp_register_script( 'bones-scrollreveal', get_template_directory_uri() . '/library/js/libs/scrollreveal.min.js', array(), '', true );

După ce a avut loc înregistrarea scripturilor și stilurilor e nevoie să le implementăm prin comenzile

wp_enqueue_script('<denumirea scriptului>'); – pentru scripturi

wp_enqueue_style(<denumirea stilului>' ); – pentru stiluri

Înregistrarea spațiilor pentru Widgeturi

Un sidebar este o locație unde se pot adăuga Widget-uri din Aspect > Piese. Un sidebar se înregistrează prin aceeași pași prin care am înregistrat și stilurile sau scripturile. Funcția necesară pentru înregistrarea unui sidebar este register_sidebar() și acceptă un singur parametru, un array asociativ care nu este neapărat necesar. Array-ul asociativ are următoarele key-uri:

name – Numele sidebar-ului

id – Cheie de identificare unică a sidebar-ului

description – Descrierea sidebar-ului

class – Clasa CSS care va fi afișată numai în dashboard, nu și în front-end. Foarte folositor parametrul când se creează sidebar-uri în cadrul unui plugin

before_widget – Cod HTML care va fi afișat înainte de fiecare widget în parte. Cel mai probabil un tag <div>. Acceptă sprintf() cu doi parametri %1$s pentru afișarea ID-ului și %2$s pentru afișarea claselor specifice

after_widget – Cod HTML afișat la sfarșitul fiecărui widget. Aici se poate închide div-ul deschis în before_widget

before_title – Cod HTML afișat înainte de titlul widget-ului

after_title – Cod HTML afișat după titlul widget-ului

register_sidebar(array(

'id' => 'sidebar1',

'name' => __( 'Sidebar 1', 'bonestheme' ),

'description' => __( 'The first (primary) sidebar.', 'bonestheme' ),

'before_widget' => '<div id="%1$s" class="widget %2$s">',

'after_widget' => '</div>',

'before_title' => '<h4 class="widgettitle">',

'after_title' => '</h4>',

));

(Anexa 2)

În aceste spații create putem include o mulțime de widgeturi implicite în WordPress sau putem crea propriul nostru Widget. Deci, crearea unui widget are loc prin constructorul clasei WP_Widget. (Anexa 3). Ca rezultat obținem:

Figura 19. Widgetul creat pentru afișarea denumirii companiei în subsolul site-ului

Crearea Custom Post Types pentru aplicația Monry

Aplicația Monry conține 3 tipuri de conținut, aceste sunt: tipul pentru Obiective Turistice, Echipă, și tipul pentru sliderul de pe pagina principală din antet. Mai jos este prezent codul pentru tipul Obiective Turistice

function monry_destinations_type() {

register_post_type( 'monry_destinations',

array( 'labels' => array(

'name' => __( 'Obiective Turistice', 'bonestheme' ),

'singular_name' => __( 'Obiectiv Turistic', 'bonestheme' ),

'all_items' => __( 'All Destinations', 'bonestheme' ),

'add_new' => __( 'Add New Destination', 'bonestheme' ),

'add_new_item' => __( 'Add New Destination', 'bonestheme' ),

'edit' => __( 'Edit Destination', 'bonestheme' ),

'edit_item' => __( 'Edit Destination', 'bonestheme' ),

'new_item' => __( 'New Destination', 'bonestheme' ),

'view_item' => __( 'View Destination', 'bonestheme' ),

'search_items' => __( 'Search Destination', 'bonestheme' ),

'not_found' => __( 'Nothing found in the Database.', 'bonestheme' ),

'not_found_in_trash' => __( 'Nothing found in Trash', 'bonestheme' ),

'parent_item_colon' => ''

),

'description' => __( 'This is team members post type', 'bonestheme' ),

'public' => false,

'publicly_queryable' => true,

'exclude_from_search' => false,

'show_ui' => true,

'query_var' => true,

'menu_position' => 10,

'menu_icon' => 'dashicons-location-alt',

'rewrite' => array( 'slug' => 'destination', 'with_front' => false ),

//'has_archive' => 'custom_type',

'capability_type' => 'post',

'hierarchical' => false,

'supports' => array('title', 'editor', 'thumbnail', 'page-attributes', 'comments')

)

);

//register_taxonomy_for_object_type( 'category', 'monry_slider' );

//register_taxonomy_for_object_type( 'post_tag', 'monry_slider' );

}

// adding the function to the WordPress init

add_action( 'init', 'monry_destinations_type');

(Anexa 4)

§ 3.3 Extensiile adiționale pentru CMS WordPress folosite în aplicația web “Monry”

Meta Box

O extensie foarte folositoare ce se folosește cele mai dese ori în noile tipuri de conținut (Custom Post Types). Spre exemplu, în aplicația Monry, avem tipul de conținut Echipă care diferă de tipul de conținut implicit a unui Articol, căci Articolul are cîmpuri ca titlu, conținut, cuvinte cheie, categorii, însă un membru nou al echipei trebuie să aibă absolut alte cîmpuri cum ar fi numele, prenumele, data nașterii, etc. Diferența între cîmpuri o puteți observa în screenshot-urile de mai jos.

Figura 20. Cîmpurile tipului de conținut Echipă

Figura 21. Cîmpurile tipului de conținut Articol

Pentru astfel de situații și este predestinată extensia Meta Box. Prin intermediul acesteia noi creăm cîmpuri adăugătoare de care avem nevoie.

$meta_boxes[] = array(

'id' => 'team',

'title' => 'Informație adăugătoare',

'post_types' => array( 'monry_team' ),

'context' => 'normal',

'priority' => 'high',

'fields' => array(

array(

'name' => 'Prenume',

'desc' => 'Prenumele membrului',

'id' => $prefix . 'name',

'type' => 'text',

'std' => '',

),

array(

'name' => 'Nume',

'desc' => 'Numele membrului',

'id' => $prefix . 'surname',

'type' => 'text',

'std' => '',

),

array(

'name' => 'Poziția',

'desc' => 'Poziția membrului',

'id' => $prefix . 'position',

'type' => 'text',

'std' => '',

),

array(

'name' => 'Descriere',

'desc' => 'Scurt info. despre membru',

'id' => $prefix . 'excerpt',

'type' => 'textarea',

'std' => '',

),

)

);

Visual Composer

Visual Composer este un site editor de tragere și plasare (Drag & Drop) a Shortcode-urilor care ușurează construirea unui site bazat pe platforma WordPress. Ce este un Shortcode? Shortcode-ul este ca o funcție cu parametri creată de programator pentru viitorul întreținător al site-ului astfel încît acesta să nu aibă necesitatea de a se implica în codul sursă. Spre exemplu, avînd nevoie de un Shortcode, se include acesta în felul următor [denumirea][/denumirea], și acest fapt nu constituie o problemă, însă dacă vom avea nevoie de 30 de astfel de Shortcode-uri și toate sunt diferite? Vom avea un haos în afișarea din redactor. Visual Composer soluționează această problemă prin implementarea interfeței grafice asupra Shortcode-urilor.

Pe lîngă acest beneficiu major, pentru agenția de turism Monry, s-au creat 10 Shortcode-uri. Însă pentru ca aceste Shortcode-uri să fie corect afișate în extensia Visual Composer este nevoie de a configura aceste chestii și de a indica idetificatorii unici a fiecărui Shortcode. O altă problemă în cazul dat o constituie portabilitatea. Presupunem că programarea Shortcode-urilor și legarea lor de extensia Visual Composer sa efectuat în functions.php. În astfel de cazuri, daca persoana ce întreține site-ul va schimba tema pe oarecare alta, Shortcode-urile și legătura cu extensia Visual Composer se va pierde. Deci, astfel de probleme se rezolvă destul de simplu, codul necesar inițial se scrie sub forma altei extensii noi, și în caz că are loc schimbarea Temei, extensia rămîne activată și nu are loc nici o pierdere. O extensie se formează foarte simplu, se creează un director pe calea wp-content\plugins, în cazul nostru acesta are denumirea monry-shortcodes. Apoi în interiorul acestui director creăm un fișier cu aceiași denumire, dar adăugăm extensia *.php. Pentru pune în mișcare această extensie mai e nevoie de un șablon predefinit care trebuie inclus exact pe prima linie:

/**

* Plugin Name: Shortcodes for Monry theme

* Plugin URI: http://webdesignified.com

* Description: This plugin adds shortcodes for Visual Composer in Monry Theme

* Version: 1.0.0

* Author: Ivan Volkov

* Author URI: http://webdesignified.com

* License: GPL2

*/

Apoi putem purcede la programare. (Anexa 5)

function sc_slide_func( $atts, $content) {

extract( shortcode_atts( array(

'number' => 'number',

'animation' => 'animation',

'percentage' => 'percentage'

), $atts ) );

/*$end_content = ' <div class="slide">';

$end_content .= wp_get_attachment_image($bg_image);

$end_content .= '<h2 class="text-center">'.$header.'</h2>';

$end_content .= '</div>';*/

$end_content = '<div class="'.$animation.' text-center">';

if ($percentage === "true")

$end_content .= '<p><span><span class="count">'.$number.'</span>%</span><br/>'.$content.'</p>';

else $end_content .= '<p><span><span class="count">'.$number.'</span></span><br/>'.$content.'</p>';

$end_content .= '</div>';

return $end_content;

}

add_shortcode( 'sc_slide', 'sc_slide_func');

Și putem crea legătura cu extensia Visual Composer prin functia vc_map()

vc_map( array(

"name" => __("Counter", "js_composer"), // add a name

"base" => "sc_slide", // bind with our shortcode

"custom_markup" => "Counter",

"category" => "Monry",

"content_element" => true, // set this parameter when element will has a content

"is_container" => false, // set this param when you need to add a content element in this element

// Here starts the definition of array with parameters of our compnent

"params" => array(

array(

"type" => "textfield", // it will bind a img choice in WP

"heading" => __("Number", "js_composer"),

"param_name" => "number",

),

array(

"type" => "textarea_html", // it will bind a textfield in WP

"heading" => __("Info", "js_composer"),

"param_name" => "content",

),

array(

"type" => "checkbox", // it will bind a textfield in WP

"heading" => __("Percentage", "js_composer"),

"param_name" => "percentage"

),

array(

"type" => "dropdown", // it will bind a textfield in WP

"heading" => __("Animation", "js_composer"),

"param_name" => "animation",

"std" => '',

"value" => array(

'No animation' => ' ',

'Reveal from top' => 'revealTop',

'Reveal from bottom' => 'revealBottom',

'Reveal from left' => 'revealLeft',

'Reveal from right' => 'revealRight'

)

)

)

));

Contact Form 7

Extensia Contact Form se folosește pentru crearea formularelor de contact. De ce se face prin extensie un lucru atît de simplu? Deoarece aceasta are o interfață clară oricărui utilizator, o securizare bună ce va apăra de SQL Injection, și probabil cel mai principal avantaj este că formularul se creează imediat sub forma unui Shortcode și implicit are legătura cu extensia Visual Composer.

Figura 23. Interfața extensiei Contact Form 7

Concluzii și recomandări

Scopul tezei a fost dezvoltarea a unei aplicații bine organizate în cadrul CMS WordPress, fără folosirea a zeci de extensii adăugătoare și studierea mai profundă a CMS WordPress.

În teza s-a demonstrat că la prezent o bună parte din aplicațiile web turistice nu sunt sută la sută ideale, unele nu respectă tendințele din prezent, altele sunt bine chibzuite dintr-un plan și mai puțin sau deloc din alt plan. Acest fapt nu poate rămîne neobservat din simplu motiv că însuși el va bate dur peste venitul oricărei întreprinderi turistice, din cauza că aplicația nu satisface un standard, și nu-i provoacă potențialului client un sentiment de încredere.

S-a demonstrat că orice problemă gravă începe de la un mărunțuș, cînd spre exemplu pe un design bine proiectat îl poate strica un logo de prost gust, sau un pachet funcțional slab. Prin dezvoltarea aplicației agenției turistice Monry, aplicația s-a afirmat cu faptul că în cadrul analizei comparative a avut mult mai mult avantaje decît candidații săi. Se știe bine că, o agenție de turism trebuie în primul rînd să respecte tendințele designului, iar restul elementelor trebuie să fie la un nivel egal de dezvoltare.

Desigur, e nevoie și de alte chestii importante ca promovarea agenției care s-a demonstrat să fie cea mai eficientă prin intermediul imaginilor video, căci în special acestea trezesc dorința de a călători. Un alt subiect captivant s-a dovedit a fi programarea aplicației Monry. La acel moment, atenția necesită să fie țintită doar pe aplicație, și pe așa factori ca mărimea ei, viteza de încărcare, portabilitatea, și în primul rînd scrierea codului fără greșeli, căci o greșeală de început săvîrșită și observată abia la fine poate duce la multă bătaie de cap.

Bibliografie

WordPress Codex
http://codex.wordpress.org/

Design – Wikipedia
https://ro.wikipedia.org/wiki/Design

XAMPP – Wikipedia
https://ro.wikipedia.org/wiki/XAMPP

WordPress – Wikipedia
https://ro.wikipedia.org/wiki/WordPress

6 Web Design Trends You Must Know for 2015 & 2016
http://www.awwwards.com/6-web-design-trends-you-must-know-for-2015-2016.html

7 Tourism Websites Blitzing New Age Design
http://tourismeschool.com/tourism-website-design-trends/

The 20 Best Designed Tourism Websites in the World
https://skift.com/2013/12/20/the-20-best-designed-tourism-websites-in-the-world/

Anexe

Anexa 1

function bones_register_sidebars() {

register_sidebar(array(

'id' => 'sidebar1',

'name' => __( 'Sidebar 1', 'bonestheme' ),

'description' => __( 'The first (primary) sidebar.', 'bonestheme' ),

'before_widget' => '<div id="%1$s" class="widget %2$s">',

'after_widget' => '</div>',

'before_title' => '<h4 class="widgettitle">',

'after_title' => '</h4>',

));

register_sidebar(array(

'id' => 'footer-1',

'name' => __( 'Footer Widget 1', 'bonestheme' ),

'description' => __( 'The first footer widget.', 'bonestheme' ),

'before_widget' => '<div id="%1$s" class="widget widgetFooter %2$s">',

'after_widget' => '</div>',

'before_title' => '<h4 class="widgettitle">',

'after_title' => '</h4>',

));

register_sidebar(array(

'id' => 'footer-2',

'name' => __( 'Footer Widget 2', 'bonestheme' ),

'description' => __( 'The second footer widget.', 'bonestheme' ),

'before_widget' => '<div id="%1$s" class="widget widgetFooter %2$s">',

'after_widget' => '</div>',

'before_title' => '<h4 class="widgettitle">',

'after_title' => '</h4>',

));

register_sidebar(array(

'id' => 'footer-3',

'name' => __( 'Footer Widget 3', 'bonestheme' ),

'description' => __( 'The third footer widget.', 'bonestheme' ),

'before_widget' => '<div id="%1$s" class="widget widgetFooter %2$s">',

'after_widget' => '</div>',

'before_title' => '<h4 class="widgettitle">',

'after_title' => '</h4>',

));

register_sidebar(array(

'id' => 'footer-4',

'name' => __( 'Footer Widget 4', 'bonestheme' ),

'description' => __( 'The fourth footer widget.', 'bonestheme' ),

'before_widget' => '<div id="%1$s" class="widget widgetFooter %2$s">',

'after_widget' => '</div>',

'before_title' => '<h4 class="widgettitle">',

'after_title' => '</h4>',

));

}

Anexa 2

class example_widget extends WP_Widget

{

/** constructor – name this the same as the class above */

function example_widget()

{

parent::WP_Widget(false, $name = 'Monry Info Box');

}

/** @see WP_Widget::widget – do not rename this */

function widget($args, $instance)

{

extract($args);

//Pentru titlu la widget (nu folosim)

//$title = apply_filters('widget_title', $instance['title']);

$company = $instance['company'];

$social0 = $instance['social0'];

$social1 = $instance['social1'];

$social2 = $instance['social2'];

$social3 = $instance['social3'];

$social4 = $instance['social4'];

echo $before_widget;

//if ($title) echo $before_title . $title . $after_title;

echo '

<div class="footer-logo">'.$company.'</div>

<div class="social-buttons">';

if ($social0 !== '') echo '

<a href="'.$social0.'">

<span class="fa-stack fa-lg">

<i class="fa fa-circle fa-stack-2x fa-inverse"></i>

<i class="fa fa-facebook fa-stack-1x"></i>

</span>

</a>';

if ($social1 !== '') echo '

<a href="'.$social1.'">

<span class="fa-stack fa-lg">

<i class="fa fa-circle fa-stack-2x fa-inverse"></i>

<i class="fa fa-twitter fa-stack-1x"></i>

</span>

</a>';

if ($social2 !== '') echo '

<a href="'.$social2.'">

<span class="fa-stack fa-lg">

<i class="fa fa-circle fa-stack-2x fa-inverse"></i>

<i class="fa fa-google-plus fa-stack-1x"></i>

</span>

</a>';

if ($social3 !== '') echo '

<a href="'.$social3.'">

<span class="fa-stack fa-lg">

<i class="fa fa-circle fa-stack-2x fa-inverse"></i>

<i class="fa fa-youtube fa-stack-1x"></i>

</span>

</a>';

if ($social4 !== '') echo '

<a href="'.$social4.'">

<span class="fa-stack fa-lg">

<i class="fa fa-circle fa-stack-2x fa-inverse"></i>

<i class="fa fa-instagram fa-stack-1x"></i>

</span>

</a>';

echo '</div>';

echo $after_widget;

}

/** @see WP_Widget::update – do not rename this */

function update($new_instance, $old_instance)

{

$instance = $old_instance;

$instance['company'] = strip_tags($new_instance['company']);

$instance['social0'] = strip_tags($new_instance['social0']);

$instance['social1'] = strip_tags($new_instance['social1']);

$instance['social2'] = strip_tags($new_instance['social2']);

$instance['social3'] = strip_tags($new_instance['social3']);

$instance['social4'] = strip_tags($new_instance['social4']);

return $instance;

}

/** @see WP_Widget::form – do not rename this */

function form($instance)

{

$company = esc_attr($instance['company']);

$social0 = esc_attr($instance['social0']);

$social1 = esc_attr($instance['social1']);

$social2 = esc_attr($instance['social2']);

$social3 = esc_attr($instance['social3']);

$social4 = esc_attr($instance['social4']);

echo '

<p>

<label for="' . $this->get_field_id('company') . '">Company:</label>

<input class="widefat" id="' . $this->get_field_id('company') . '" name="' . $this->get_field_name('company') . '" type="text" value="' . $company . '">

</p>

<p>

<label for="' . $this->get_field_id('social0') . '">Facebook:</label>

<input class="widefat" id="' . $this->get_field_id('social0') . '" name="' . $this->get_field_name('social0') . '" type="text" value="' . $social0 . '">

</p>

<p>

<label for="' . $this->get_field_id('social1') . '">Twitter:</label>

<input class="widefat" id="' . $this->get_field_id('social1') . '" name="' . $this->get_field_name('social1') . '" type="text" value="' . $social1 . '">

</p>

<p>

<label for="' . $this->get_field_id('social2') . '">Google+:</label>

<input class="widefat" id="' . $this->get_field_id('social2') . '" name="' . $this->get_field_name('social2') . '" type="text" value="' . $social2 . '">

</p>

<p>

<label for="' . $this->get_field_id('social3') . '">YouTube:</label>

<input class="widefat" id="' . $this->get_field_id('social3') . '" name="' . $this->get_field_name('social3') . '" type="text" value="' . $social3 . '">

</p>

<p>

<label for="' . $this->get_field_id('social4') . '">Instagram:</label>

<input class="widefat" id="' . $this->get_field_id('social4') . '" name="' . $this->get_field_name('social4') . '" type="text" value="' . $social4 . '">

</p>';

}

}

add_action('widgets_init', create_function('', 'return register_widget("example_widget");'));

Anexa 3

function monry_slider_func() {

// creating (registering) the custom type

register_post_type( 'monry_slider',

// let's now add all the options for this post type

array( 'labels' => array(

'name' => __( 'Slider', 'bonestheme' ),

'singular_name' => __( 'Slide', 'bonestheme' ),

'all_items' => __( 'All Slides', 'bonestheme' ),

'add_new' => __( 'Add New Slide', 'bonestheme' ),

'add_new_item' => __( 'Add New Slide', 'bonestheme' ),

'edit' => __( 'Edit Slide', 'bonestheme' ),

'edit_item' => __( 'Edit Slide', 'bonestheme' ),

'new_item' => __( 'New Slide', 'bonestheme' ),

'view_item' => __( 'View Slide', 'bonestheme' ),

'search_items' => __( 'Search Slide', 'bonestheme' ),

'not_found' => __( 'Nothing found in the Database.', 'bonestheme' ),

'not_found_in_trash' => __( 'Nothing found in Trash', 'bonestheme' ),

'parent_item_colon' => ''

),

'description' => __( 'This is the example custom post type', 'bonestheme' ),

'public' => false,

'publicly_queryable' => false,

'exclude_from_search' => true,

'show_ui' => true,

'query_var' => true,

'menu_position' => 8,

'menu_icon' => 'dashicons-grid-view',

'rewrite' => array( 'slug' => 'custom_type', 'with_front' => false ),

//'has_archive' => 'custom_type',

'capability_type' => 'post',

'hierarchical' => false,

'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'page-attributes')

)

);

function monry_team_members() {

// creating (registering) the custom type

register_post_type( 'monry_team',

// let's now add all the options for this post type

array( 'labels' => array(

'name' => __( 'Team', 'bonestheme' ),

'singular_name' => __( 'Team', 'bonestheme' ),

'all_items' => __( 'All Members', 'bonestheme' ),

'add_new' => __( 'Add New Member', 'bonestheme' ),

'add_new_item' => __( 'Add New Member', 'bonestheme' ),

'edit' => __( 'Edit Member', 'bonestheme' ),

'edit_item' => __( 'Edit Member', 'bonestheme' ),

'new_item' => __( 'New Member', 'bonestheme' ),

'view_item' => __( 'View Member', 'bonestheme' ),

'search_items' => __( 'Search Member', 'bonestheme' ),

'not_found' => __( 'Nothing found in the Database.', 'bonestheme' ),

'not_found_in_trash' => __( 'Nothing found in Trash', 'bonestheme' ),

'parent_item_colon' => ''

),

'description' => __( 'This is team members post type', 'bonestheme' ),

'public' => false,

'publicly_queryable' => false,

'exclude_from_search' => true,

'show_ui' => true,

'query_var' => true,

'menu_position' => 9,

'menu_icon' => 'dashicons-businessman',

'rewrite' => array( 'slug' => 'custom_type', 'with_front' => false ),

//'has_archive' => 'custom_type',

'capability_type' => 'post',

'hierarchical' => false,

'supports' => array('thumbnail', 'page-attributes')

)

);

add_action( 'init', 'monry_slider_func');

add_action( 'init', 'monry_team_members');

Anexa 4

<?php

/**

* Plugin Name: Shortcodes for Monry theme

* Plugin URI: http://webdesignified.com

* Description: This plugin adds shortcodes for Visual Composer in Monry Theme

* Version: 1.0.0

* Author: Ivan Volkov

* Author URI: http://webdesignified.com

* License: GPL2

*/

function sc_slide_func( $atts, $content) {

extract( shortcode_atts( array(

'number' => 'number',

'animation' => 'animation',

'percentage' => 'percentage'

), $atts ) );

/*$end_content = ' <div class="slide">';

$end_content .= wp_get_attachment_image($bg_image);

$end_content .= '<h2 class="text-center">'.$header.'</h2>';

$end_content .= '</div>';*/

$end_content = '<div class="'.$animation.' text-center">';

if ($percentage === "true")

$end_content .= '<p><span><span class="count">'.$number.'</span>%</span><br/>'.$content.'</p>';

else $end_content .= '<p><span><span class="count">'.$number.'</span></span><br/>'.$content.'</p>';

$end_content .= '</div>';

return $end_content;

}

add_shortcode( 'sc_slide', 'sc_slide_func');

function section_header_func( $atts, $content) {

extract( shortcode_atts( array(

'text' => 'text',

'inverse' => 'inverse',

'small' => 'small'

), $atts ) );

if ($inverse === "true" && $small !== "true"){

$end_content = '<h1 class="text-center inverse-color">'.$text.'</h1>';

$end_content .= '<div class="section-header inverse"></div>';

} else if ($inverse !== "true" && $small === "true") {

$end_content = '<h3 class="text-center">'.$text.'</h3>';

$end_content .= '<div class="section-header small"></div>';

} else if ($inverse === "true" && $small === "true") {

$end_content = '<h3 class="text-center inverse-color">'.$text.'</h3>';

$end_content .= '<div class="section-header small inverse"></div>';

} else {

$end_content = '<h1 class="text-center">'.$text.'</h1>';

$end_content .= '<div class="section-header"></div>';

}

return $end_content;

}

add_shortcode( 'section_header', 'section_header_func');

function services_func( $atts, $content) {

extract( shortcode_atts( array(

'icon' => 'icon',

'title' => 'title'

), $atts ) );

$end_content = '<div class="work-box">';

$end_content .= '<div class="text-center">';

$end_content .= '<span class="fa-stack fa-3x">';

$end_content .= '<i class="fa fa-circle fa-stack-2x"></i><i class="fa '.$icon.' fa-stack-1x fa-inverse"></i>';

$end_content .= '</span></div>';

$end_content .= '<h3>'.$title.'</h3><p>'.$content.'</p></div>';

return $end_content;

}

add_shortcode( 'service', 'services_func');

function profile_func( $atts, $content) {

extract( shortcode_atts( array(

'team_image' => 'team_image',

'title' => 'title',

'slogan' => 'slogan'

), $atts ) );

$end_content .= '<div class="work-about">';

$end_content .= '<div class="container">';

$end_content .= '<div class="work-text-info col-xs-12 col-sm-6">';

$end_content .= '<h2>'.$title.'</h2>';

$end_content .= '<p><em>'.$slogan.'</em><br><br>'.$content.'</p>';

$end_content .= '</div><div style="background-image: url('.wp_get_attachment_url($team_image).')" class="work-image hidden-xs"></div></div></div>';

return $end_content;

}

add_shortcode( 'profile', 'profile_func');

function team_func( $atts, $content) {

/*extract( shortcode_atts( array(

'team_image' => 'team_image',

'title' => 'title',

'slogan' => 'slogan'

), $atts ) );*/

$query = new WP_Query( array( 'post_type' => 'monry_team', 'orderby' => 'menu_order', 'order' => 'ASC') );

if ( $query->have_posts() ) :

$end_content = '<div id="team-carousel" class="owl-carousel">';

while ( $query->have_posts() ) : $query->the_post();

$srcImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'medium');

$end_content .= '<div><div class="team-box">';

$end_content .= '<div class="text-center"><img class=" team-avatar" src="'.$srcImg[0].'"></div>';

$end_content .= '<h3>'.get_post_meta( get_the_ID(), 'monry_name', true).'<br>'.get_post_meta( get_the_ID(), 'monry_surname', true).'</h3>';

$end_content .= '<p><span>'.get_post_meta( get_the_ID(), 'monry_position', true).'</span><br/>'.get_post_meta( get_the_ID(), 'monry_excerpt', true).'</p></div></div>';

endwhile; wp_reset_postdata(); endif;

$end_content .= '</div>';

return $end_content;

}

add_shortcode( 'team_members', 'team_func');

function destinations_func( $atts, $content) {

extract( shortcode_atts( array(

'number_of_items' => 'number_of_items',

'text_on_buttons' => 'text_on_buttons'

), $atts ) );

$query = new WP_Query( array( 'post_type' => 'monry_destinations', 'posts_per_page' => $number_of_items, 'orderby' => 'date', 'order' => 'DESC') );

if ( $query->have_posts() ) :

$end_content = '<div id="portfolio-carousel" class="owl-carousel">';

while ( $query->have_posts() ) : $query->the_post();

$srcImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'destinations-home' );

$category = get_the_terms($post->ID, 'destination_category');

foreach ( $category as $term ) {

$category = $term->name;

break;

}

$end_content .=

'<div class="item">

<figure class="effect-sadie">

<img src="'.$srcImg[0].'" alt="destinations"/>

<figcaption>

<h2><span>'.get_the_title().'</span></h2>

<p>'.$category.'</p>

<a href="'.get_permalink().'">'.$text_on_buttons.'</a>

</figcaption>

</figure>

</div>';

endwhile; wp_reset_postdata(); endif;

$end_content .= '</div>';

return $end_content;

}

add_shortcode( 'destinations_shortcode', 'destinations_func');

function skillbar_func( $atts, $content) {

extract( shortcode_atts( array(

'name' => 'name',

'percent' => 'percent'

), $atts ) );

$end_content = '<div class="skillbar clearfix" data-percent="'.$percent.'%">';

$end_content .= '<div class="skillbar-title"><span>'.$name.'</span></div>';

$end_content .= '<div class="skillbar-bar">';

$end_content .= '<div class="skill-bar-percent"><span class="numberPerc">'.$percent.'</span>%</div>';

$end_content .= '</div></div>';

return $end_content;

}

add_shortcode( 'skillbar', 'skillbar_func');

function slider_control_func( $atts, $content) {

extract( shortcode_atts( array(

'next' => 'next',

'prev' => 'prev',

'link' => 'link',

'text_button' => 'text_button',

), $atts ) );

$end_content .= '

<div class="port-nav clearfix">

<div class="left"><a class="'.$prev.'"><span class="fa-stack fa-2x">

<i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-arrow-left fa-stack-1x fa-inverse"></i>

</span></a></div>

<div class="full-port text-center"><a href="'.$link.'" class="btn-lg" role="button">'.$text_button.'</a></div>

<div class="right"><a class="'.$next.'"><span class="fa-stack fa-2x">

<i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-arrow-right fa-stack-1x fa-inverse"></i>

</span></a></div></div>';

return $end_content;

} add_shortcode( 'slider_control', 'slider_control_func');

function button_func( $atts, $content) {

extract( shortcode_atts( array(

'link' => 'link',

'text_button' => 'text_button',

), $atts ) );

$end_content .= '

<div class="col-sm-12 text-center full-button">

<a href="'.$link.'" class="btn-lg" role="button">'.$text_button.'</a>

</div>';

return $end_content;

} add_shortcode( 'button_monry', 'button_func');

function recent_news_func($atts, $content) {

extract( shortcode_atts( array(

'limit' => 'limit'

), $atts ) );

$query = new WP_Query( array( 'post_type' => 'post', 'posts_per_page' => $limit, 'orderby' => 'date', 'order' => 'DESC') );

if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post();

$srcImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'destinations-home' );

$end_content .= '

<div class="col-sm-4">

<div class="blog-box">

<figure>

<h3>'.get_the_title().'</h3>

<div class="metainfo clearfix hidden-xs hidden-sm">

<!–-<div class="meta-date"><i class="fa fa-calendar"></i> '.get_the_time().'</div>–>

<div class="meta-date"><i class="fa fa-calendar"></i> '.get_the_time(get_option('date_format')).'</div>

<div class="meta-user"><i class="fa fa-user"></i> '.bones_get_the_author_posts_link().'</div>

</div>

<p>'.get_the_excerpt().'</p>

<figcaption>

<div class="button text-center">

<a href="'.get_the_permalink().'" class="btn-sm btn-custom" role="button">Citește</a>

</div>

<div class="mask"></div>

<img src="'.$srcImg[0].'" alt="img">

</figcaption>

</figure>

</div>

</div>';

endwhile; wp_reset_postdata(); endif;

return $end_content;

} add_shortcode( 'recent_news', 'recent_news_func');

vc_map( array(

"name" => __("Counter", "js_composer"), // add a name

"base" => "sc_slide", // bind with our shortcode

"custom_markup" => "Counter",

"category" => "Monry",

"content_element" => true, // set this parameter when element will has a content

"is_container" => false, // set this param when you need to add a content element in this element

// Here starts the definition of array with parameters of our compnent

"params" => array(

array(

"type" => "textfield", // it will bind a img choice in WP

"heading" => __("Number", "js_composer"),

"param_name" => "number",

),

array(

"type" => "textarea_html", // it will bind a textfield in WP

"heading" => __("Info", "js_composer"),

"param_name" => "content",

),

array(

"type" => "checkbox", // it will bind a textfield in WP

"heading" => __("Percentage", "js_composer"),

"param_name" => "percentage"

),

array(

"type" => "dropdown", // it will bind a textfield in WP

"heading" => __("Animation", "js_composer"),

"param_name" => "animation",

"std" => '',

"value" => array(

'No animation' => ' ',

'Reveal from top' => 'revealTop',

'Reveal from bottom' => 'revealBottom',

'Reveal from left' => 'revealLeft',

'Reveal from right' => 'revealRight'

)

)

)

));

vc_map( array(

"name" => __("Section Header", "js_composer"), // add a name

"base" => "section_header", // bind with our shortcode

"custom_markup" => "Section Header",

"category" => "Monry",

"content_element" => true, // set this parameter when element will has a content

"is_container" => false, // set this param when you need to add a content element in this element

// Here starts the definition of array with parameters of our compnent

"params" => array(

array(

"type" => "textfield", // it will bind a img choice in WP

"heading" => __("Heading text", "js_composer"),

"param_name" => "text",

),

array(

"type" => "checkbox", // it will bind a img choice in WP

"heading" => __("Inverse", "js_composer"),

"param_name" => "inverse",

),

array(

"type" => "checkbox", // it will bind a img choice in WP

"heading" => __("Small heading", "js_composer"),

"param_name" => "small",

)

)

)

);

vc_map( array(

"name" => __("Team Profile", "js_composer"), // add a name

"base" => "profile", // bind with our shortcode

"custom_markup" => "Team Profile",

"category" => "Monry",

"content_element" => true, // set this parameter when element will has a content

"is_container" => false, // set this param when you need to add a content element in this element

// Here starts the definition of array with parameters of our compnent

"params" => array(

array(

"type" => "attach_image", // it will bind a img choice in WP

"heading" => __("Team image", "js_composer"),

"param_name" => "team_image",

),

array(

"type" => "textfield", // it will bind a img choice in WP

"heading" => __("Title", "js_composer"),

"param_name" => "title",

),

array(

"type" => "textfield", // it will bind a textfield in WP

"heading" => __("Slogan", "js_composer"),

"param_name" => "slogan",

),

array(

"type" => "textarea_html", // it will bind a textfield in WP

"heading" => __("Content", "js_composer"),

"param_name" => "content",

),

)

)

);

vc_map( array(

"name" => __("Service", "js_composer"), // add a name

"base" => "service", // bind with our shortcode

"custom_markup" => "Service",

"category" => "Monry",

"content_element" => true, // set this parameter when element will has a content

"is_container" => false, // set this param when you need to add a content element in this element

// Here starts the definition of array with parameters of our compnent

"params" => array(

array(

"type" => "textfield", // it will bind a img choice in WP

"heading" => __("FontAwesome Icon Class", "js_composer"),

"param_name" => "icon",

),

array(

"type" => "textfield", // it will bind a img choice in WP

"heading" => __("Title", "js_composer"),

"param_name" => "title",

),

array(

"type" => "textarea_html", // it will bind a textfield in WP

"heading" => __("Content", "js_composer"),

"param_name" => "content",

),

)

)

);

vc_map( array(

"name" => __("Team Members", "js_composer"), // add a name

"base" => "team_members", // bind with our shortcode

"custom_markup" => "Team Members",

"category" => "Monry",

"content_element" => true, // set this parameter when element will has a content

"is_container" => false, // set this param when you need to add a content element in this element

)

);

vc_map( array(

"name" => __("Destinations Carousel", "js_composer"), // add a name

"base" => "destinations_shortcode", // bind with our shortcode

"custom_markup" => "Destinations Carousel",

"category" => "Monry",

"content_element" => true, // set this parameter when element will has a content

"is_container" => false, // set this param when you need to add a content element in this element

// Here starts the definition of array with parameters of our compnent

"params" => array(

array(

"type" => "textfield", // it will bind a img choice in WP

"heading" => __("Items in carousel", "js_composer"),

"param_name" => "number_of_items",

),

array(

"type" => "textfield", // it will bind a img choice in WP

"heading" => __("Text on buttons", "js_composer"),

"param_name" => "text_on_buttons",

),

)

)

);

vc_map( array(

"name" => __("Skillbar", "js_composer"), // add a name

"base" => "skillbar", // bind with our shortcode

"custom_markup" => "Skillbar",

"category" => "Monry",

"content_element" => true, // set this parameter when element will has a content

"is_container" => false, // set this param when you need to add a content element in this element

// Here starts the definition of array with parameters of our compnent

"params" => array(

array(

"type" => "textfield", // it will bind a img choice in WP

"heading" => __("Name of skill", "js_composer"),

"param_name" => "name",

),

array(

"type" => "textfield", // it will bind a img choice in WP

"heading" => __("Percent", "js_composer"),

"param_name" => "percent",

),

)

)

);

vc_map( array(

"name" => __("Slider Control", "js_composer"), // add a name

"base" => "slider_control", // bind with our shortcode

"custom_markup" => "Slider Control",

"category" => "Monry",

"content_element" => true, // set this parameter when element will has a content

"is_container" => false, // set this param when you need to add a content element in this element

// Here starts the definition of array with parameters of our compnent

"params" => array(

array(

"type" => "textfield", // it will bind a img choice in WP

"heading" => __("Class of next button", "js_composer"),

"param_name" => "next",

),

array(

"type" => "textfield", // it will bind a img choice in WP

"heading" => __("Class of prev. button", "js_composer"),

"param_name" => "prev",

),

array(

"type" => "textfield", // it will bind a img choice in WP

"heading" => __("Link", "js_composer"),

"param_name" => "link",

),

array(

"type" => "textfield", // it will bind a img choice in WP

"heading" => __("Text on button", "js_composer"),

"param_name" => "text_button",

),

)

)

);

vc_map( array(

"name" => __("Button", "js_composer"), // add a name

"base" => "button_monry", // bind with our shortcode

"custom_markup" => "Button",

"category" => "Monry",

"content_element" => true, // set this parameter when element will has a content

"is_container" => false, // set this param when you need to add a content element in this element

// Here starts the definition of array with parameters of our compnent

"params" => array(

array(

"type" => "textfield", // it will bind a img choice in WP

"heading" => __("Link", "js_composer"),

"param_name" => "link",

),

array(

"type" => "textfield", // it will bind a img choice in WP

"heading" => __("Text on button", "js_composer"),

"param_name" => "text_button",

)

)

)

);

vc_map( array(

"name" => __("Noutăți recente", "js_composer"), // add a name

"base" => "recent_news", // bind with our shortcode

"custom_markup" => "Noutăți recente",

"category" => "Monry",

"content_element" => true, // set this parameter when element will has a content

"is_container" => false, // set this param when you need to add a content element in this element

// Here starts the definition of array with parameters of our compnent

"params" => array(

array(

"type" => "textfield", // it will bind a img choice in WP

"heading" => __("Limit", "js_composer"),

"param_name" => "limit",

)

)

)

);

// This function provides a functionality of adding content elements into element

class WPBakeryShortCode_SC_Slide extends WPBakeryShortCodesContainer {}

Anexa 5

Similar Posts