Platforma WordPress

Platforma WordPress

Dea lungul anilor programarea a ajuns asa de avansata incat exista programe care genereaza la randul lor alte programe sau lini de cod favorizand dezvoltarea din ce in ce mai avansata a tehnologiilor web. WordPress a fost creat dintr-o dorință pentru un sistem de publicare web elegant, cu o arhitectura solida bazata pe HTML, CSS, PHP si MySQL. WordPress este un software modern, dar rădăcinile și dezvoltarea acestuia duc înapoi in 2001 cand era cunoscut ca b2/cafelog. Este un produs matur și stabil concentrându-se pe experiența utilizatorului și standardelor web in care a fost creat o platforma diferit de orice altceva in care se gaseste tot ce este necesar creearii unui site web.

Wordpress in momentul de fata este utilizat in proportie de peste 59% din site-urile care sunt accestate zilnic in lumea web-ului, din acest motiv consider ca este platforma ideala pt a dezvolta un site, platforma fiind actualizata la zi implementand noi functii, o securitate, suporta peste 40 de limbi straine din care si limba romana, are acces la peste 30 000 de plugin-uri avand suport 24/7. Aceasta inseamna ca orice utilizator cu cunostinte minime despre folosirea unei platforme poate sa creeze un site web cu continut bogat in materiale.

Avantajul folosirii unei platforme pentru dezvoltarea unui site web consta in standardizarea unor procese de creatie a respectivelor site-uri aceasta insemand ca fiecare site creat va respecta niste reguli de baza in care scuteste utilizatorul de o munca suplimentara, aici facem referire la dimensiuni text, formatare pagina, locatia imaginilor si alte reguli de afisare corecta in pagina.

In acest capitol vom demonsta cum sa cream un site cu ajuorul lui WordPress, subliniem usurinta cu care acesta poate fi folosit, nu trebuie sa fi un expert in programare HTML sau PHP desi prezinta un avantaj in customizara website-ului, acesta fiind orientat pentru un public care nu este orientat pe programare ci pe un public care este orientat pe creativitate cum ar fi blogging, artă, revista cu articole, in care accentul este pus pe creare continutului in acea pagina nu crearea pagini in sine.

Din momentul crearii contului si configurarea acestuia, in doar cativa pasi site-ului este creat si functional, site-ul putand fi accesat oriunde in lume de pe orice calculator sau dispozitiv mobil.

In figura nr… afiseaza pagina principala a platformei, aici putem observa cat de simpla este conceputa platforma de dezvoltare a continutuului web, in general aceasta pagina principala putem revizui update-urile la plugins, versiune wordpress-ului si diferite informatii utile pentru site.

In partea din stanga avem trei grupuri de meniu separate printr-un spatiu: aici avem meniuri de creare continut pentru pagini aranjat sub o forma usor de inteles, incepand cu functiile de baza unde putem sa cream pagini noi, sa incarcam continut media, sa revizuim comentarii unde este cazul si setarile de contact ale administratorului site-ului; in a doua parte a meniului face referire la administrare, aici putem administra aspectul general al paginii unde gasim meniul de aprente care gestioneaza modul in care arata site-ul, administarare plugin-urilor prin adaugare sau eliminare, administrare utilizatori care pot fi mai multi, acesta optiune este folosita atunci cand lucreaza o echipa la site-ul respectiv, fiecare avand propriul cont de acces, aici mai avem si setarile platformei WordPress care contin dierite setari cum ar fi: numele site-ului, adersa site-ului, stabilirea limbii, setari de regiune etc; si in ultima parte avem meniurile plugin-urilor instalate, aceste meniuri apar in functie de ce pluginuri sunt instalate ele gestionand doar pluginurile respective, de exemplu avem instalat plugin-ul Google Maps, administrarea lui facandu-se din acest meniu.

Cu toate acesta un site trebuie sa fie placut la privire, unele site-uri se bazeaza pe o tema anume in functie de ce reprezinta site-ul respectiv, se fac studii pe forme, linii si culori se incerca diferite combinatii pentru a realiza un site unic care sa se faca remarcat fara prea mult efort. Inceperea constructii site-ului in WordPress comparativ cu metoda conventionala unde trebuie instalat un editor pentru fiecare tehnologie: HTML, CSS, PHP si aplicatia in care construim baza de date MySQL, acestea fiind o adevarata provocare pana si pentru un dezvoltator proaspat initiat, in schimb pentru Wordpres avem nevoie doar de un browser web si o conexiune la internet.

Generarea unui site cu ajutorul WordPress-ului

In momentul in care a fost detectata accesarea in contului Wordpres pentru prima data el imediat porneste procesul de initializare, aplica o tema predefinita de baza pe site, aceasta ulterior se poate schimba cu oricare tema care indeplineste conditiile impuse de administratorul site-ului

Inainte de pornirea procesului de creare a paginii trebuie sa indeplinim urmatorele puncte:

Realizarea scheletului pagini

Alegerea temei corespunzatoare

Instalare pluginuri pentru a adauga o functionalitate suplimentara

Adaugare continut: imagini, video, text, si altele

Pagina principala GeoGebra

In fig.. observam simplitatea crearii unei pagini cu continut de text in WordPress, aici avem toate instrumentele necesare pentru asigurarea unui continut bogat fara a fi necesara revizuirea unei linii de cod. In Worpress codul pentru site se genereaza in fundal fara a intrerupe utilizatorul, aici observam ca seamana mai mult cu un editor de text de cat cu o aplicatie in care se scriu linii de cod, avand o interfata foarte intuitiva aceasta favorizand un utilizator cu cunostinte minime despre programare in HTML.In tab-ul „Visual” care este setat implicit observam diferite optiuni de editare text, pe langa aceasta este tab-ul „Text” in care avem optiuni pentru editarea in linii de cod HTML, aici sunt avantajati utilizatorii experimentati cu cunostinte in programare site-urilor web. Cand pagina este gata pentru publicare se pasa butonul „Publish” din acel moment pagina este online si putem sa o vizualizam la adresa specificata in “Permalink”. Pana in momentul de fata avem publicata o pagina de site care contine un text, in continuare o sa adaugam o imagine care reprezinta entitatea site-ului.

Desi nu este primul logo creat pentru site el suferind schimbari drastice dealungul perioadei de developare, acest logo o fost creat respectand tema aplicatia pe care o reprezinta, tematica site-ul in care il incorporam si nu in ultimul rand traditia dupa care i-se adauga simplitate si eleganta.

In urmatorul pas o sa ne folosim de un plugin, acestea sunt niste extensii care ajuta site-ul prin o noua functionalitate in care in mod normal WordPress nu o are. Pluginul se numeste „Slider Revolution” si are rolul de a crea un slideshow in care sunt prezente mai multe imagini ele avand diferite efecte de tranzitie care imbogateste site-ul realizand o prezentare placut vizuala.

Interfata la fel de intuitiva ca si in WordPress fiind la fel de simplu de utilizat cu foarte mullte posibilitati de creare de continut cu tot felul de efecte dramatice si totusi a fost creat sa respete simplitatea site-ului.

Odata cu terminarea relizari sliderului am reusit sa finalizam prima pagina a site-ului Instutului GeoGebra din Timisoara care este reprezentat in fig … totodata acest site este capatibil sa detecteze dispozitive mobile acest obiectiv fiind foarte important.

In 2008 nimeni nu a auzit de web design receptiv pentru dispozitive mobile, acestea ajutand vizualizarea site-uri web intregi proiectate initial pentru desktop-uri in care se poate vizualiza acelasi continut pe un ecran mai mic. Ai putea ciupi, trageți și sa apăsați de două ori pentru a face conținutul mai mare, desi existau site-uri care avau si o versiune mobilă separată acestea fiind versiuni beta sau experimentale. Modul în care lucrurile s-au schimbat prin utilizarea browser-ul mobil care a depășit acum utilizarea browser-ul desktop. Un avantaj pe care acum dispozitivele mobile au spre deosebire de navigarea standard de pe desktop este utilizare a unei aplicații care favorizeaza un timp de incarcare scurt si trafic de date redus care este foarte avantajos cand se cauta informatii pe internet in timp ce ne deplasam.

Pagina Tutoriale

In continuare vom aborda crearea urmatoarei pagini care se va intitua „Tutoriale” aceasta pagina va prezenta logoul Institutului GeoGebra din Timisoara, va folosi aceiasi tema culori cu acelasi efect simplist ca si in pagina anterioara.

Spre deosebire de pagina principala unde am introdus un slider in aceasta pagina cream un buton „Descarcă Geogebra” cu un design care respecta tematica aplicatiei GeoGebra. Pentru realizarea acestui buton am instalat plugin-ul „SiteOrigin” care se poate descarca din rubrica de plugins, el fiind gratuit si simplu de utilizat.

In acest plugin avem urmatoarele optiuni pentru realizarea unui buton:

Eticheta care se doreste a fi afisat in buton in rubrica „Button Text”;

Link-ul care executa acest buton in rubric „Destination URL” acest link facand o legatura la pagina oficiala GeoGebra in sectiunea descarcari intr-o alta fereastra;

Incorporare imagine in buton pentru un design elaborat, aici putem sa incarcam orice fisier imagine atat timp cat respecta dimensiunile butonului, aici incarcand imaginea cu logoul GeoGebra respectand dimensiunile butonului;

Aspectul butonului, plugin-ul are incorporat mai multe efecte si animatii in care el se deosebeste fata de un buton standard, aici am ales o tema numita „Wire” in care butonul are un contur asemanator unei drepte ce respecta tematica unei figuri geometrice din GeoGebra si realizeaza o animatie care este efectuata atunci cand pointerul mouse-ului sta deasupra lui;

Culoarea butonului, aici se defineste culoarea avand acces la o paleta de culori sau pentru cei avansati se poate introduce codul de culoare in format hexazecimal de exemplu #568AD3, acesta fiind codul pentru albastrul folosit in site;

Culoarea textului care are aceleasi setari si proprietati din culoarea butonului, insa culoarea folosita la animatie este alba.

In imaginea de mai sus avem butonu finalizat observand cu cata usurinta a fost creat fara a scrie nici macar o linie de cod, aici avem un exemlu de creare continut fara a avea cunostinte suplimentare despre programare a paginilor web.

In continuarea acestei pagini o sa introducem un videoclip informational care ne va ajuta cu initierea in program si eventual crearea unei foi de lucru GeoGebra. Aici ne vom folosi de site-ul YouTube pentru a insera continut video, acesta fiind optimizat sa functioneze in platforma wordpress. In acest mod putem sa cream continut video care sa fie afisat si pe canalul de YouTube al lui GeoGebra cat si pe site-ul generat folosind doar un singur videoclip avand un avantaj asupra marimi totale a site-ului in cazul in care suntem limitati la o anumita dimensiune, videoclipurile pot avea o marime destul de impresionanta tinand cont tehnologiile noi de redare video aparute cum ar fi HD Ready, HD, 2K sau 4K.

Youtube are posibilitatea de a genera un link special in care se pot incorpora videoclipuri in orice site fiind compatibil si cu WordPress. Tot ce trebuie sa facem este sa dam click pe butonul de „Embed” care inseamna incorporare care se regaseste in rubrica „Share”, se deschide un meniu cu optiuni cum ar fi marimea videoclipului, sugestii pentru videoclipuri asemanatoare cum regasim si pe YouTube dupa finalizarea unui videoclip, afisare titlul si actiunile playerului video. Pe langa aceste setari mai avem si o fereastra de previzualizare a ferestrei video ca se modifica in timp real cu setarile efectuate pentru a daca setarile efectuate sunt cele dorite. Cand sa terminat de efectuat modificarile pentru videoclip se copiaza codul de incorporare al videoclipului si se introduce in pagina de WordPress dorita.

In aceasta pagina folosim editorul de la „SiteOrigins” doar ca de data aceasta o sa lucam cu partea editorului in care se scrie limile de cod pentru HTML. Introducem codul de incorporare din YouTube care a fost prezentat anterior si pe langa acesta vom folosi tag-ul <center> respectiv </center> care are rolul de a centra continutul in mijlocul siteul, adica videoclipul va fi perfect pe mijloc, va fi simetric fara a fi nevoie de introducere valori de pozitionare.

La aceasta pagina mai adaugam un link care face referinta la canalul de YouTube oficial al organizatiei GeoGebra unde se poate vizualiza mai multe videoclipuri instructionale in cere se poate crea continut GeoGebra. In continuare vedem rezultatul finit

Pagina Membri

In aceasta pagina inseram numele, poze adresele de email a membrilor Institutului GeoGebra din Timisoara pentru o familiarizare cu membrii, pe langa acestea se mai introduce un text despre Geogebra si ce reprezinta reprezinta Institutul. In WordPress vom folosi o abilitate a plugin-ului „SiteOrigins” care ajuta la impartirea continutului in parti egale, ajutand la gestionarea continutului cu o mare usurinta, acesta semanand cu celulel din Excel in care putem lucra cu cu fiecare in parte. Acest plugin este foarte cautat pentru functionalitate ridicata in materie de adaugare continut si proportionare intr-o pagina web, cu ajutorul lui se pot genera diferite efecte stilistice in care se pune accentul pe anumite zone din site pentru generare de interes.

Felul in care lucreaza pluginul este un plugin intr-un alt plugin, un concept destul de simplu, de aici rezulta ca se poate individualiza un spatiu fara sa afecteze restul continutului, un lucru imposibil de realizat in cazul in care aceasta pagina se realiza numai in cod HTML, pentru infrumusetare se folosesc scripturile de CSS care impreuna cu HTML creaza spatierea dintre obiectele din pagina, alinierea textului, stilul paginii, practic tot ce tine de layout-ul pagini.

Pluginul folosit are un format in care se poate intelege cum vine asezate obiectele in pagina, destul de usor de inteles. Incepem prin crearea unui rand in care introducem un alt plugin care se individualizeaza, continuam sa introducem mai multe randuri care se imparti pe coloane in care cream fiecare casuta pana cand site-ul respecta schita de proiectare. In unele casute introducem doar poze in altele doar text, indiferent de continutul introdus ele vor respecta spatierea dinte celule.

Pe platforma mobila unde ecranele anumitor dispozitive sunt mai mici, contiunutul va fi constient de dispozitiv si se va aranja intr-un asa fel incat sa respecte schita de proiectare, el incercand sa afiseze toate randurile daca permite dimensiune ecranului in caz contrar va incerca sa separe randul in doua parti simetrice sau cate o celula din fiecare randin acesta fiind in functie de marimea ecranului si rezolutia acestuia.

Pagina cu Materiale Geogebra

In aceasta pagina vom introduce materiale dinamice GeoGebra folosite ca o previzualizare a aplicatiei pentru a genera interes in folosirea ei de catre alti posibili membri in vederea une viitoare colaborari si eventual in extinderea grupului.

Deschidem aplicatia GeoGebra si cream o foaie de lucru care sa contina o lucrare, aceasta fiind folosita ca si o prezentare in care sunt aratate cateva elemete ale aplicatiei de software matematic GeoGebra.

Mai sus avem o foie de lucru Geogebra in care se pune in aplicare teorema lui Thales pentru cele 2 triunghiuri. Spre deosebire de acelasi problema pe care se poate rezolva in caietul cu exercitii, in aplicatia GeoGebra exista functii speciale in ce se pot anima figurile care ajuta la intelegerea mai rapida a teoremelor spre deosebire cazului in care studentii sunt fortati sa isi imagineze ce se intampla aplicand anumite teoreme.

Ca sa putem incorpora aceasta foaie de lucru intr-un site procedam prin incarcarea acestuia in contul de GeoGebra online, acesta efectuandu-se automat prin apasarea butonului de „Share”. Fiind inregistrat in aplicatie cu contul online se deschide o pagina web a contul inregistrat, unde se dechide o fereastra de import pentru foaia de lucru GeoGebra in care compltam numele si divere date de afisare tinand cont de setarile de vizibilitate a foii de lucru dupa care o salvam. In galeria de foi de lucru a aplicatiei online GeoGebra observam foaia de lucru recent creata in care o putem vizualiza sau edita in aplicatia de Geogebra online.

.

Acum intr-un mod asemanator cu incorporatul clipului video care am vorbit mai devreme, avem un buton de incorporare foaie de lucru in site-uri externe avand suport si pentru WordPress, acesta generand un cod de care contine linkul de la foai de lucru, tot ce ne trebuieste acum este sa generam o noua pagina in WordPress unde putem sa adaugam codul recent generat. Desi cand se deschide pagina Institutului Geogebra din Timisoara in care se afla foile de lucru se asteapta un timp suplimentar pentru procesarea tuturor obiectelor din foaia de lucru.

In fig … am reusit sa incorporam o foaie de lucru in site-ul Institutului GeoGebra din Timisoara cu succes, in aceasta figura putem observa o animatie partiala dovedind ca foaia de lucru functioneaza corect.