Placute de Signalistica

INTRODUCERE

Încă din cele mai vechi timpuri, omul și-a afirmat nevoia de orientare, de informare și de identificare. Astfel există dovezi înca din istoria Romei antice asupra unor pietre pe care erau desenate însemne care indicau locații. Astăzi aceste metode sunt folosite pe scară largă, de la semnele de circulație, panouri publicitare, casete luminoase pentru firme și, printre altele, plăcuțele aflate pe ușile din diferite instituții, ce conțin numele biroului, eventual și numele persoanei.

Lucrarea de față are menirea de a oferi o metodă comodă, on-line, de concepere și comandare a unor plăcuțe de signalistică, așa cum sunt numite generic acele placuțe ce conțin informații simple de orientare sau informare.

În primul rând vom stabili importanța acestor însemne, utilitatea și menirea lor. Procedeul luat în considerare pentru crearea acestora este gravura computerizată, ramură dezvoltată odată cu producția publicitară.

Complexitatea aplicației necesită studierea unor anumite tehnologii, prezentate in capitolul al doilea. Printre acestea menționăm utilizarea elementelor Canvas, noi în HTML5, controlate și modificate cu ajutorul limbajului JavaScript.

Modul în care funcționalitățile necesare și tehnologiile implicate sunt implementate pentru a asigura funcționarea aplicațieli sunt prezentate în capitolul al treilea. Aici va fi prezentată structura aplicației, detaliandu-se atât modul în care este alcătuit site-ul cât și baza de date utilizată.

Rezultatul lucrării, aplicația de machetare și gestiune a plăcuțelor de signalistică, este prezentată în detaliu în capitolul al patrulea. Acesta poate fi considerat un mic ghid de utilizare, menționând fiecare parte din aplicație, fiecare eveniment implementat, și, implicit, pașii lansării unei comenzi.

Legătura dintre necesitățile domeniului și ceea ce oferă aplicația este stabilită în partea de final, odata cu dovedirea funcționalităților oferite de site.

I Signalistica, utilitate și proces

Semnele și-au găsit utilitatea înca din cele mai vechi timpuri. La început existau inscripții pe pietre sau pe lemn, mai apoi, pe masură ce tehnologia a avansat, a fost folosit și metalul. În prezent materialele plastice câștigă teren datorită metodelor mult mai simple de prelucrare, cât și a costurilor mai mici. Între metodele de inscripționare utilizate în prezent enumerăm gravura, sculptura, serigrafia sau imprimarea, matrițarea (litere volumetrice).

Signalistica se referă la utilizarea unor metode grafice pentru a transmite o informație preponderent în scopuri de marketing. Semnele vizează, de obicei, un anumit grup de indivizi și pot fi situate in orice locație: străzi, clădiri, parcuri sau orice alt spațiu în care se dorește transmiterea unui mesaj. Ținând cont de cele menționate putem clasifica semnele în urmatoarele categorii:

Informare: semne ce oferă indicații sau instrucțiuni asupra anumitor servicii sau acțiuni ce ce trebuiesc întreprinse ;

Direcționare: semne ce marchează localizarea anumitor servicii, zone sau spații, sau oferă direcții de urmat;

Identificare: semne ce indică anumite zone de servicii sau locații, cum ar fi nume de săli, de camere, de instituții;

Siguranță : semne ce atenționează asupra unr posibile pericole sau care transmit reguli ce trebuiesc urmate.

Pictogramele sunt imagini utilizate în mod obișnuit pentru a transmite mesajul unui semn. Acestea urmează seturi specifice de norme, culori, forme și dimensiuni, bazate chiar pe legile țării în care sunt folosite. De exemplu, pictograma trebuie să fie localizată în interiorul unei zone proprii, definite. Pentru ca o pictogramă să aibă succes trebuie să fie ușor de recunoscut indiferent de cultură sau limbă, chiar dacă nu există nici un text prezent. În funcție de convențiile standard pentru formă și culoare crește probabilitatea ca pictograma și semnul să aibe înțeles universal, lucru necesar, spre exemplu, în aeroporturi.

Există și anumite convenții asupra graficii semnelor. Una dintre acestea este că grfica trebuie să ocupe 80% din suprafața semnului, deoarece oamenii recepționează mai rapid o imagine decât un mesaj text. De asemeni forma geometrică utilizată pentru semn ne spune că într-un dreptunghi doar se oferă informații generale, într-un cerc se arată activități obligatorii, pe când într-un triunghi se transmit avertismente, atenționări, pentru a semnala un eventual pericol.

Referitor la tehnologie ne putem delimita prin a vorbi, pe de o parte despre echipamentele folosite în producția semnelor, pe de altă parte de programele folosite pentru a le controla. Vom enumera numai câteva dintre echipamentele utilizate, pentru a zăbovi mai mult aspra programelor. Astfel avem imprimante de mari dimensiuni pentru bannere, imprimante de mici dimensiuni dar capacitate mare pentru afișe, fluturași, broșuri, aparate de serigrafiat sau tampografiat, mașini de routat, debitat, echipamente de gravură mecanică sau laser și lista poate continua întrucât, asemeni tuturor celorlalte echipamente din viața de zi cu zi a omului, tehnologia evolueaza de la an la an.

Pe partea de software enumerația este la fel de complexă, însă este influențată de legătura echipament – mod de comandă. Să începem cu faptul că la început semnele, în majoritatea cazurilor, sunt machetate într-un program de editare grafică. Aici putem menționa CorelDRAW Graphics Suite, Adobe Photoshop, Adobe Illustrator, Adobe Indesign. Unele dintre aceste programe, pe langă multele funcții de grafică integrate, permit trimiterea fișierului direct către echipamentul de inscripționare / creare al semnului, deci avem o legatură directă ce nu implică un program special separat.

Există însă echipamente care nu pot lucra decât cu soft propriu de grafică, atunci fie se machetează întregul design în softul propriu mașinii, fie se machetează într-unul din programele menționate mai sus, se exportă într-un format recunoscut de softul propriu mașinii, abia apoi se fac setări suplimentare și se transmite la echipament. Întregul proces este destul de complicat și stă în sarcina graficianului și a operatorului echipamentului.

Materia primă pentru aceste placuțe este produsă în cantități industriale de producatori internaționali cu renume atat în domeniul plăcuțelor, cât și în domeniul gravurii, fie ea manuală sau computerizată, mecanică sau laser. Lucrarea se bazează pe marca franceză Gravograph, un etalon în domeniul aferent aplicației. Materialele oferite sunt foi multistrat din material plastic semirigid, pe baza de ABS (Acrilonitril-Butadien-Stiren), cu o foarte buna rezistență și capacitate bună de prelucrare.

Culorile straturilor definesc aspectul final al plăcuțelor. Procesul este posibil datorită faptului că unul dintre straturi este foarte subțire și poate fi ușor înlăturat cu ajutorul gravurii laser sau mecanică. Stratul subțire stabilește culoarea de fundal a plăcuței, iar stratul principal, mult mai gros, definește culoarea ce se vede în urma gravurii, în cazul aplicației, va defini culoarea literelor. Există și variante cu stratul principal transparent. Acesta se folosește pentru un aspect de „sticlă”, gravura efectuandu-se pe spatele materialului, în oglindă.

Lucrarea de față își propune să intervină într-o anumită nișă a producției de semne, în speță în producția de plăcuțe de signalistică, ce conțin doar text. În prezent, pentru un asemenea produs, clientul este nevoit să se deplaseze la sediul firmei producătoare, să aleagă materialul, combinațiile de culori, să decidă grafica, textul, modul de încadrare, modul de prindere în perete sau ușa, toate aceste procese ocupand timp destul de mult atât clientului cât și reprezentanților din agenție. Prin urmare aplicația aferentă lucrării își propune să integreze întreg procesul de machetare într-un site cu ajutorul căruia clientul să își creeze singur plăcuța de signalectică.

Etapele procesului, nu obligatoriu în această ordine, sunt: se alege un material, o combinație de culori, o grosime, dimensiunile plăcuței, textul ce va fi inscripționat, fontul și dimensiunea acestuia. După lansarea comenzii, firma producătoare primește direct grafica plăcuței și aceasta intră direct în producție. Se economisește astfel atât timpul irosit de client prin deplasarea către agent, cât și timpul petrecut de grafician în stabilirea detaliilor tehnice și grafice ale lucrării. Într-un final clientul economisește și bani, întrucăt consultanța grafică nu este tocmai ieftină.

Fig. 1: Modele de plăcuțe de signalistică și echipament de gravură laser CO2

II Tehnologii de dezvoltare pentru aplicații web

În capitolul ce urmează vor fi prezentate generalități despre principalele elemente ce fac posibilă existența aplicației. Vom începe cu modul în care clientul ajunge la aplicație, anume prin intermediul principalelor browsere web utilizate în prezent alături de limbajul principal folosit în crearea site-urior. Vom observa evoluția integrării elementelor de grafică în web-design, limbajele suplimentare necesare acestei integrări și vom analiza câteva tipuri de fișiere grafice sau de readre grafică.

2.1 Browsere web

Fig. 1.1: Logo-urile browserelor prezentate (de la stânga la dreapta:

Internet Explorer, Mozilla Firefox, Opera, Google Chrome si Safari)

Internet Explorer este în topul preferințelor când vine vorba de un browser web. Mai bine spus, venind “la pachet” cu sistemul de operare Microsoft Windows, și-a asigurat parte din monopolul acestuia din urmă. Statisticile spun ca în 2000 aproximativ 71% din utilizatorii de internet foloseau Internet Explorer și pâna în 2009 avea o cota de utilizare de peste 60%. Între anii 2002 și 2003 atinsese nivelul de 95%. Aceste cote au scăzut însă odată cu lansarea Firefox în 2004 și Google Chrome în 2008. Factori de inflență au fost reprezentați și prin creșterea popularității altor sisteme de operare ca Mac OS X, Linux și Android, care nu puteau folosi Internet Explorer.

Cota de piață a acestui browser fluctuaează intre 27% si 54 % începand cu octombrie 2012. Este foarte cunoscută problema dificultății de calcul a pieței browserelor. Microsoft a cheltuit în medie 100 de milioane de dolari anual pentru dezvoltarea Internet Explorer în anii 1995-2000, dezvoltare la care au lucrat peste 1000 de persoane. Cu toate acestea, înca din 1996, odată cu debutul logo-ului în forma de “e”, a indrodus suport pentru CSS (Cascading Style Sheets) despre care vom vorbi mai tarziu în acest capitol. Versiunea 9.0 este printre singurele nelegate de lansarea unei noi versiuni a sistemului de operare Windows, și asigură suport pentru conținut HTML 5.

Mozilla Firefox (cunoscut mai simplu ca Firefox) este un browser web gratuit și “cu sursă deschisă” dezvoltat pentru sisteme de operare ca Microsoft Windows, Linux, Mac OS X. Există și o versiune mobilă pentru Android. Firefox folosește motorul de design Gecko pentru a reda paginile web, care implementează standardele curente, dar permite și anticiparea lor.

Firefox își are începuturile în anul 2002, pornind de la Proiectul Phoenix. De atuunci, numele a suferit multe schimbări. În 2003, cu un an înainte de lansarea oficială, a devenit Mozilla Firebird, iar în 2004, utilizatorii de internet au facut cunoștință cu Mozilla Firefox. Până în prezent, datorită faptului că este un program open-source supus unor schimbări continue, a avut peste 30 de versiuni lansate. Încă de la început s-a dovedit a fi un competitor forte bine clasat contra Internet Explorer. De la versiune la versiune, a fost completat treptat cu cele mai utile funcții și a integrat cele mai performante tehnologii. Firefox are implementate numeroase standarde în materie de web, incluzând HTML4, parțial HTML5, XML (Extensible Markup Language), XHTML (Extensible HyperText Markup Language), MathML (Mathematical Markup Language), parțial SVG1.1 (Scalable Vector Graphics), CSS (Cascading Style Sheets) cu ajutorul extensiilor, ECMAScript sau JavaScript, DOM (Document Object Model), XSLT (Extensible Stylesheet Language Transformations), Xpath și APNG (Animated Portable Network Graphics). Firefox de asemeni are implementate și standardele propuse de WHATWG (Web Hypertext Application Technology Working Group) cum ar fi stocarea pe partea de client și elementul canvas.

Opera este un browser dezvoltat la început ca proiect pentru compania de telecomunicații Norvegiană, numit inițial Telenor. În timp și-a făcut un renume din performanță, eficiență, compatibilitatea cu standardele în vigoare și dimensiunea redusă. Încă din 1997 a introdus suport pentru limbajul JavaScript și din 2005 pentru elemntele grafice în format SVG. Din 2011, odată cu versiunea 11.50, a asigurat suport pentru HTML5, CSS3, și a îmbunătățit suportul pentru SVG. Cu toate că acest browser asigură compatibilitatea cu toate standardele, deține puțin sub 2% din cota de piață, iar în trecut nu a depășit 3%.

În martie 2014, Opera se situa pe locul 4 în topul popularității browserelor mobile și a fost ales ca aplicație implicită de câțiva producatori de telefoane mobile. Poate fi folosit pe o varietate de sisteme de operare ca Microsoft Windows, Mac OS X, Linux. Câteva ediții sunt disponibile pentru echipamente ce folosesc Android, iOS, Symbian, Maemo, Bada, BlackBerry și Windows Mobile. Aproximativ 120 de milioane de telefoane mobile au fost livrate cu Opera. De asemeni, opera este singurul web browser comercial disponibil pentru sistemele de joc oferite de Nintendo, adică Nintendo DS, DSi și Wii. Adobe Systems a permis tehnologiei Opera să fie folosită în pachetul Adobe Creative Suite.

Google Chrome este unul dintre cele mai recente browsere, fiind lansat în 2008. Cu toate acestea, fiind creat de Google, s-a bucurat de o promovare accelerată, având o medie de 50% din cota de piață în prezent. Așa cum Google încearca sa ne „memoreze” mișcările, la fel și Chrome a oferit utilizatorilor de internet exact ceea ce s-a cerut. Încă din 2009, odată cu versiunea 3, a inclus suport îmbunătățit pentru JavaScript si HTML5. Asemeni altor browsere, echipa din spatele acestuia a lucrat în mod continuu la îmbunătățirea lui, motiv pentru care în cei șase ani de viață a lansat deja 34 de versiuni.

Google Chrome se vrea a fi, și reușește să fie sigur, rapid și simplu. Sunt diferențe mari față de semenii lui în interfața minimalistă care este atipică pentru un browser modern. Unul din punctele tari ale browserului Chrome este perfomanța aplicației și viteza de procesare a scripturilor JavaScript, ambele fiind verificate independent de mai multe site-uri și rezultatul a fost că este cel mai rapid din acest punct de vedere între browserele importante ale vremii. Multe dintre componentele unice ale acestuia au fost mai întâi anunțate de dezvoltatorii altor browsere, însa Google Chrome a fost primul care le-a implementat și lansat. De exemplu, o importantă inovație a interfeței grafice, combinarea căsuței de adresă cu cea de căutare, sub denumirea de OmniBox, a fost anunțată mai întâi de Mozilla în mai 2008 ca o îmbunătățire planificată pentru Firefox. Din acel moment atât Internet Explorer cât și Safari au combinat cele 2 căsuțe.

Browserul Safari a fost dezvoltat încă din 2003 de catre Apple. Întrucât la momentul respectiv pe sistemele Mac era folosit fie Internet Explorer, fie Netscape, din 2005 a fost introdus pe acestea ca browser implicit. Având un design simplu și fiind ușor de utilizat, el poate fi folosit și pe sistemele de operare Windows. Din 2008 până în prezent media cotei de piață a variat între 3 și 4 procente. Și acesta oferă suport pentru specificațiile limbajului HTML5.

Safari oferă navigarea prin file, prezintă o interfață asemanatoare cu cea folosită de Mozilla Firefox. Tema grafică este dezvoltată de Apple și are un plan de administrare a preferințelor, integrează complet tehnologia multimedia QuickTime și permite blocarea ferestrelor de tip Pop-Up. Ca orice alt produs Apple, nu este de mirare faptul ca Safari deține din abundență caracteristici de securitate și funcții concepute pentru a garanta siguranța în navigare. Browserul oferă protecție pentru toate tipurile de site-uri ce au conținut de phishing sau malware. Asemeni multor alte browsere se poate ajusta nivelul de securitate. De asemeni se permite stergerea informațiilor private, cum ar fi istoricul de navigare.

2.2 HTML5

Înainte de a vorbi despre HTML5, consider necesar să privim în trecut la începuturile creării paginilor web. Astfel, în 1990, Tim Berners-Lee a propus un document ce conținea aproximativ 20 de etichete cu ajutorul cărora putea fi scris și creat conținul site-urilor. A numit documentul „HTML Tags” (HyperText Markup Language). Etichetele însă își au originea în formatul SGML – Standard Generalized Markup Language. Prima versiune lansată a limbajului a fost HTML2 în anul 1994, sub tutela IETF (Internet Engineering Task Force). Din anul 1996 tehnologia a permis recunoașterea formatărilor cu ajutorul CSS1 și implementarea codurilor JavaScript. Rolul IETF a fost înlocuit de W3C (World Wide Web Consortium). Odată cu acest lucru au fost lansate actualizări succesive ale standardelor HTML. Datorită acestora spre sfârșitul anilor ’90 a fost publicată versiunea HTML4.01.

Din acel moment W3C a considerat capitolul HTML terminat și a încercat implementarea unor noi standarde, XHTML1 (Extensible HyperText Markup Language) și XHTML2, bazate pe standarde XML (Extensible Markup Language). Strictețea acestor standarde nu ținea însă cont de nevoile dezvoltatorilor de pagini web și existau probleme în redarea corectă a site-urilor.

În 2004 reprezentanți din partea browserelor Opera, Apple și Mozilla au propus extinderea HTML pentru a permite mai multă libertate în crearea aplicațiilor web. Ei doreau să creeze site-uri dinamice, și pentru aceasta erau nevoiți să utilizeze limbaje separate ca PHP, JavaScript și Flash. Propunerea a fost însă respinsă de către W3C, și astfel a fost creată gruparea WHATWG (Web Hypertext Application Technology Working Group). Și aici dezvoltarea a urmat două cărări: Web Forms 2.0 și Web Apps 1.0. Ambele specificații veneau în completarea HTML. În timp au fost combinate și astfel s-a creat HTML5.

Între timp cei de la W3C lucrau la îmbunătățiri în ceea ce privea standardul limbajului XHTML 2. În doi ani au realizat că drumul ales era sortit eșecului sau, în cel mai bun caz, impasului evoluției. Prin urmare în anul 2007 i-au invitat pe cei din WHATWG să se alăture W3C HTML Working Group. Astfel, la sfârșitul anului 2007 a fost acceptat și implementat un limbaj standard comun: HTML5. Sunt multe adăugiri remarcabile în HTML5, cum ar fi suportul nativ pentru desen și elementele audiovizuale.

Revenind la rolul HTML, trebuie menționat că scopul unui browser este acela de a citi documentele HTML și de a le compune vizual sau auditiv în pagini web. Browserul nu afișează etichetele, dar le folosește pentru a interpreta conținutul unei pagini. HTML prezintă structura unui site, în mod semantic, în același timp conține indicii pentru prezentare, făcându-l mai degrabă un limbaj de marcare (cu marcatori), decât un limbaj de programare.

Elementele HTML formează componentele unui site. HTML permite atât imaginilor cât și obiectelor să fie încorporate și folosite pentru a crea forme interactive ale site-urilor. Oferă mijloace de creare a documentelor structurate, separând cu etichete specifice părțile de titluri (heading), paragrafe, liste, link-uri și multe alte elemente. Poate încorpora și scripturi scrise în limbaje ca JavaScript, care influențează comportamentul paginilor web.

Browserele pot folosi și CSS (Cascading Style Sheets) pentru a defini aspectul și aranjarea textului sau a altor elemente din site. W3C (World Wide Web Consortium), care administrează atât standardele HTML cât și pe cele CSS, încurajează utilizarea CSS în locul prezentărilor explicite cu ajutorul HTML.

2.3 CSS – Cascading Style Sheet

Internetul își are fundația pe HTML și documente text. În ultimii ani acesta a devenit o „gospodărie”, un spațiu de susținere industrială, maturizându-se într-o platformă de publicare viabilă mulțumită nu în mică măsură formatărilor efectuate cu CSS (Cascading Style Sheet). CSS permite autorilor și programatorilor de pagini web să formateze sau să aranjeze cu finețe elementele pentru publicarea atât online cât și pe diferite tipuri de media, inclusiv formate de printare. „Stilurile” sunt o invenție electronică pentru a coda text și alte documente sau elemente din site în mod dinamic. De exemplu un stil numit „Heading” va fi atașat la fiecare element header din document.

CSS este folosit pentru a descrie aspectul și formatarea unui document scris într-un limbaj de marcare. Este conceput în principal pentru a permite separarea conținutului documentelor de reprezentarea acestuia, incluzând elemente ca aranjare, formatare, culori. Această separare poate îmbunătați accesibilitatea conținutului, poate oferi mai multă flexibilitate și control asupra specificațiilor caracteristicilor prezentării, permite mai multor pagini să împartă același format și reduce complexitatea și repetarea în conținutul structural.

Avantajul CSS este că o definiție de stil poate fi schimbată o singură dată, și această schimbare să se regasească în toate elementele care folosesc acel stil. A coda și formata fiecare element separat, în schimb, necesită ca ficare element să fie modificat de fiecare dată când se dorește o schimbare generală de stil. Deci CSS oferă mijloacele pentru menținerea consistenței omogene în întreg documentul sau în mai multe, dacă e cazul.

„Stilurile” pot fi grupate în „foi de stil” – Style Sheets – în funcție de scopul lor. Aceste foi sunt ca niște schițe ce conțin grupări de stiluri și formatări legate de un scop comun. Ele permit ca mai multe stiluri să fie atașate la un document în același timp și ca toate formatările să fie modificate simultan. Deci documentele pot fi formatate mai repede pentru scopuri diferite – o „foaie de stil” poate fi folosită pentru documente destinate mediului online, altele pot fi folosite (asupra acelorași documente) pentru broșuri sau postere. Prin urmare CSS permite aceluiași fișier HTML să fie prezentat în stiluri diferite pentru metode diferite de afișare, cum ar fi afișarea pe ecran, afișarea pentru imprimare sau pentru voce – când documentul este citit de un browser cu funcție de discurs sau cu cititor de ecran, de asemeni pentru dispozitive tactile bazate pe tehnica Braille. În același timp, poate fi folosit pentru a permite paginii web să fie afișată diferit în funcție de dimensiunea ecranului sau a dispozitivului folosit. În timp ce autorul unui document de obicei leagă documentul de un fișier CSS, cititorul poate folosi un alt stil, diferit, pe propriul lor calculator, pentru a fi folosit peste cel menționat de autor. Cu toate acestea, dacă autorul sau cititorul nu au legat documentul de un stil specific, va fi aplicat stilul implicit al browser-ului.

Prin CSS se poate specifica o schemă de prioritate pentru a determina care reguli de stil pot fi aplicate dacă mai mult de o regulă este contară unui anumit element. De aceea C-ul din denumire vine de la “cascadă”, și astfel prioritățile sunt calculate și atribuite unor reguli, ceea ce face ca rezultatul să fie unul predictibil.

2.4 JavaScript

Inițial denumit LiveScript și mai apoi cunoscut ca ECMAScript, JavaScript a pornit ca ca un limbaj scriptic pentru browserul celor de la Netscape Communications. Este un limblaj liber care poate fi folosit cu ușurință atât prin rolul funcțional cât și prin cel orientat obiect. În ciuda numelui, JavaScript seamănă foarte mult cu limbajul de programare C, moștenind însă și câteva aspecte de Java. Limbajul a fost numit JavaScript tocmai pentru a-l promova alături de tehnologia Java Applet. A câștigat popularitate în scripturile folosite pe partea de client.

JavaScript este un program disponibil în majoritatea browserelor, cum ar fi Internet Explorer, Firefox, Safari și Chrome. Acestea conțin un interpretator de script pentru a analiza și rula programele scrise în acest limbaj. El poate fi scris cu același editor de text folosit în editarea codului HTML, XHTML sau CSS.

Manipularea corespunzătoare a erorilor este un principiu de responsabilitate aplicat mai nou de JavaScript. Prin această manipulare în trecut nu se reușea mai mult decât să se permită browserului să afișeze orice mesaj de eroare avea nevoie. După un timp, dezvoltatorii au descoperit că ar putea să se agațe de tehnica manipulării erorii și să prezinte propiul mesaj de eroare, dar încă se rezuma la puțin mai mult decât un mesaj către utilizator care spunea „Ne pare rău, ceva nu a funcționat.”. Implementarea unui JavaScript modern oferă metode mai bune de manipulare a erorilor, folosind mecanisme integrate în limbaj care permit codului (scriptului) să continue și să revină în cazul excepțiilor. Astfel codul devine mai sigur și mai robust pentru utilizator.

Este remarcabilă utilizarea JavaScript și în afara paginilor web, de exemplu în documente PDF, browsere specifice anumitor site-uri (Intranet), miniaplicații pentru desktop (widgets). Mașinile virtuale mai noi și mai rapide și platformele construite pe baza lor, în mod notabil Node.Js, de asemeni au ajutat la creșterea popularității JavaScript pentru aplicații web pe partea de server. Pe partea de client, JavaScript a fost implementat în mod tradițional ca un limbaj interpretat, dar compilarea simultană este realizată acum de versiunile mai recente ale browserelor.

Deoarece codul JavaScript poate rula local doar în browser-ul utilizatorului, în locul unui server de la distanță, browser-ul poate răspunde mai rapid la acțiunile utilizatorului, făcând orice aplicație mai receptivă. În plus, cu ajutorul JavaScript se pot detecta acțiunile utilizatorului, pe care HTML nu le poate distinge, cum ar fi apăsarea unei taste. Aplicații ca Gmail se folosesc de acest aspect. Mare parte din logica interfeței este scrisă în JavaScript, astfel trimițându-se informații către server cu ajutorul JavaScript. Și dezvoltatorii în limbajul AJAX (Asynchronous JavaScript and XML) exploatează acestă oportunitate în mod similar.

2.5 PHP

Inițial, PHP a reprezentat abrevierea de la Personal Home Page (pagină de bază personală). Limbajul a fost creat în 1994 de către Rasmus Lerdorf, pentru a-și îndruma vizitatorii catre curricumul vitae-ul personal, publicat pe internet. Pe măsură ce utilitatea și caracteristicile sale s-au dezvoltat (și pe măsură ce programul a început să fie utilizat și în situații cu un caracter mai profesional), PHP a ajuns să aibe semnificația PHP: Hypertext Preprocessor (preprocesor de hipertext). În esență, semnificația acestei definiții constă din aceea că PHP manipulează datele înainte ca acestea să fie transformate în HTML.

Codul PHP este înglobat în HTML, deci poate fi scris în interiorul codului HTML. Codul-sursă PHP este încorporat între niște instrucțiuni de procesare de început și de sfârșit speciale <?php și ?>, care marchează intrarea și ieșirea din "modul PHP". Acesta este conceput să efectueze o anumită operație numai după producerea unui anumit eveniment. Sintaxa sa provine din C, Java și Perl și este ușor de învățat. Scopul principal al limbajului este acela de a permite programatorilor web să creeze rapid pagini web generate dinamic. PHP reprezintă o tehnologie pe partea de server. Aceasta se referă la faptul că toate operațiile din cod sunt executate pe server (nu pe client, care este calculatorul ce afisează site-ul web). Acest limbaj permite interacțiunea cu bazele de date, permite crearea de foldere sau fișiere, poate manipula mesaje de postă electronică (e-mail).

Proiectul open-source a început să ia amploare după ce Zeev Suraski și Andi Gutmans, de la Technion au lansat o nouă versiune a interpretorului PHP în vara anului 1998, această versiune primind numele de PHP 3.0. Aceștia au rescris baza limbajului, producând astfel și Zend Engine în 1999. În mai 2000 a fost lansat PHP 4.0, având la bază Zend Engine 1.0. Este de menționat faptul că denumirea „Zend” provine tocmai de la numele celor doi dezvoltatori, Zeev și Andi. Pe 13 Iulie 2004 a fost lansat PHP 5, cu Zend Engine II, ce a adus și o orientare obiect mai pronunțată și suportând mai multe caracteristici ale acestui tip de programare.

PHP-ul este unul din cele mai folosite limbaje de programare server-side, apărând pe 9 din cele 37 milioane de domenii cercetate în studiu. Popularitatea de care se bucură acest limbaj de programare se datorează sintaxei ușoare și simple, asemanatoare cu Perl sau C, fiind liberă, în sensul că nu este nevoie de includerea de biblioteci sau directive de compilare. Desigur și faptul că este un limbaj de programare gratuit și cu sursă deschisă a ajutat la dezvoltarea acestuia, și astfel a dobândit eficiența și flexibilitaea, oferind securitate printr-un set flexibil și eficient de măsuri de siguranță. PHP foloseste mecanisme de alocare a resurselor foarte necesare unui mediu multiutilizator, așa cum sunt site-urile web.

2.6 AJAX

AJAX provine de la Asynchronous JavaScript and XML și este o tehnică de programare pentru crearea de aplicații web interactive. Intenția este să facă paginile web să devină mai rapide și deci mai accesibile, prin schimbul unor cantități mici de date cu serverul, astfel încât să nu fie nevoie ca pagina să fie reîncărcată la fiecare acțiune a utilizatorului. Aceasta are ca scop creșterea interactivității, vitezei și ușurinței în utilizare a aplicațiilor web, acțiunea desfășurandu-se în fundal.

Ajax nu este o tehnologie în sine. Termenul este folosit pentru definirea aplicațiilor web ce folosesc un ansamblu de tehnologii: HTML, XHTML, CSS, JavaScript, obiectul XMLHttpRequest sau XML.

În 1996 în browserul Internet Explorer a fost introdus tagul <iframe> pentru a încărca sau a descărca conținut asincron. În 1999 Microsoft a utilizat tehnologia iframe pentru a actualiza dinamic știri și cotații bursiere de pe pagina implicită pentru Internet Explorer, și a creat controlul XMLHTTP ActiveX în Internet Explorer 5, care a fost adoptat ulterior de Mozilla, Safari, Opera și alte browsere ca obiect XMLHttpRequest JavaScript. Microsoft a introdus modelul XMLHttpRequest pentru Internet Explorer 7, deși versiunea ActiveX era încă susținută.

Termenul ”Ajax” a fost folosit în mod public la 18 februarie 2005 de către Jesse James Garrett într-un articol intitulat „Ajax: O nouă abordare în Aplicatii Web”, bazat pe tehnicile folosite pe paginile Google. La 5 aprilie 2006, World Wide Web Consortium (W3C) a lansat primele schițe ale documentației pentru obiectul XMLHttpRequest în încercarea de a crea un standard Web oficial.

2.7 MySQL si phpMyAdmin

MySQL este (din martie 2014) al doilea sistem de management al bazelor de date relaționale din lume, cu utilizare pe scară largă. SQL vine de la Structured Query Language. Proiectul de dezvoltare MySQL a făcut codul sursă disponibil sub Licență Publică Generală, precum și sub o varietate de acorduri de proprietate. MySQL aparține companiei suedeză MySQL AB, deținută în prezent de către Oracle Corporation.

MySQL este o alegere populară de baze de date pentru utilizarea în aplicații web și este o componentă centrală utilizata pe scară largă în pachetele software LAMP. Acestea sunt aplicații web cu sursă deschisă. LAMP este un acronim pentru "Linux, Apache, MySQL, Perl / PHP / Python".

Deși MySQL a început ca o alternativa low-end pentru bazele de date mai simple, acesta a evoluat treptat, pentru a sprijini la fel de bine și necesități mult mai dezvoltate și mai complexe. Este cel mai frecvent utilizat fie în administrarea bazelor de date afalate în spatele unor situri de mici dimensiuni, fie ca o componentă într-o aplicație LAMP sau ca un server de baze de date independent. O mare parte a popularitatii MySQL își are originea în simplitatea sa și ușurința de utilizare, care este posibilă printr-un ecosistem de instrumente open source, cum ar fi phpMyAdmin.

phpMyAdmin este un instrument gratuit cu sursă deschisă, scris în PHP și destinat să ajute de administrarea MySQL prin intermediul unui browser web. Se pot efectua diferite sarcini, cum ar fi crearea, modificarea sau ștergerea bazelor de date, a tabelelor, câmpurilor sau rândurilor, executarea declarațiilor SQL, sau gestionarea de utilizatori și permisiuni. Numele phpMyAdmin este, evident, un amestec de PHP ca limbaj pe care îl folosește, MySQL ca bază de date pe care o administrează și administrarea ca activitate pe care o asigură.

2.8 Grafică

O parte importantă a libajului HTML este ocupată de noile interfețe pentru aplicațiile de desen. Între acestea enumerăm Canvas, SVG și WebGL, prin intermediul cărora se permite procesarea imaginilor bazate pe hărti de biți, desenelor vectoriale și a celor tridimensionale.

2.8.1 Canvas

Elemntul canvas și-a început viața ca o extensie Apple pentru Webkit, motorul de generare a layout-ului browserelor Safari și Chrome, pentru afișarea gadget-urilor din Dashboard și adaugările din Safari. Mai târziu a fost adoptat și de Opera, Firefox și de alte browsere, într-un final devenind o componentă a specificațiilor HTML5. În momentul lansării versiunii beta a browserului Internet Explorer 9 (IE9), exista suport implicit pentru toate browserele principale utilizate. Cu toate acestea, existau câteva lacune în Internet Explorer.

Elementul canvas poate fi cel mai simplu descris ca o zonă de desen cu atributele înalțime și lățime, ce foloseste JavaScript ca mijloc de desenare și animare complexă a graficii sau a imaginilor. Un set complet de functii pentru grafică 2D este prezent în limbajul JavaScript. Datorită relației strânse dintre JavaScrip și ActionScript, o animație sau desen executat în Flash poate fi portat cu ușurință în JavaScript folosind ActionScript.

Se poate folosi și CSS pentru a seta dimensiunile unui element canvas, totuși, nu este același lucru cu a seta atributele de înalțime si lățime ale elemntului. Diferența între cele două metode constă în faptul că elemntul canvas are două seturi de dimensiuni: dimensiunea elementului în sine și dimensiunea suprafeței de desen. Când setăm înălțimea și lățimea elementului, oferim atribute pentru ambele suprafețe, cu ajutorul CSS putem stabili doar dimensiunea elementului, nu și a suprafeței de desenare.

În mod implicit dimensiunile elementului canvas și ale suprafeței de desenare sunt de 300 de pixeli lățime și 150 de pixeli înălțime. Dacă setăm o dimensiune mai mare a elementului prin CSS, suprafața de desen ramâne neschimbată. În cazul în care dimensiunea elementului este mai mică decât a suprafeței de desen, browserul redimensionează desenul pentru a se potrivi în suprafața elementului. Din acest motiv nu este recomandată utilizarea CSS pentru a stabili atributele elementului canvas. Rezultatul grafic oferit de browser nu poate fi controlat și există riscul unui desen neinteligibil.

2.8.2 SVG si WebGL

SVG (Scalable Vector Graphics) este o specificație a W3C (World Wide Web Consortium) pentru a desena grafică statică sau animată. Abilitatea de a alinia SVG fără a utiliza un obiect sau o etichetă a fost adaugata în HTML5. Grafica vectorială folosește grupări de formule matematice pentru a desena forme estențiale ca un cerc, linii, dreptunghiuri, linii frânte (căi) pentru a crea grafici care să conțină aceeași calitate afișată la orice scară de mărime. Acesta este un beneficiu major asupra imaginilor a căror calitate se degradează când sunt afișate la o dimensiune mai mare decât aceea pentru care au fost create.

SVG oferă o abordare remercabil diferită decât elementul Canvas, întrucât reprezintă desenarea în fișiere XML (Extensible Markup Language) în locul celei în pur cod JavaScript. XML nu este o reprezentare mai clară sau mai concisă a datelor, deci un fișier poate conține mai multe secțiuni care se repetă. Acesea pot fi însă comprimate, proces ce ar reduce considerabil dimensiunea fișierului. Asemeni elementului canvas, interacțiunea poate fi asigurata prin intermediul JavaScript. Predecesorii IE9 ofereau suport pentru un un format vectorial incompatibil numit VML (Vector Markup Language), însă odată cu IE9, majoritaea browserelor au inclus suport pentru cel mai comun set de specificatii al SVG 1.1.

WebGL este o interfață de programare pentru desenul 3D care permite dezvoltatorilor să evalueze hardware-ul grafic și să controleze calea de redare. Este administrat de grupul Khronos și mare parte din sintaxa o împarte cu OpenGL 2.0 ES. El este compatibil cu browserele utilizate în prezent, dar este mai bine integrat în Firefox și Chrome.

2.8.3 Tonuri discrete și tonuri continue (JPG, PNG, GIF)

Majoritatea imaginilor pot fi impărțite în 2 categorii, în funcție de aranjarea și asemănarea pixelilor: Imagini cu tonuri discrete și imagini cu tonuri continue. Aceste caracteristici sunt utile în analiza metodelor de compresie. Ample cercetări au fost concentrate pe compresia cu pierdere sau fără pierdere de informație în cazul tonurilor continue. Aici enumerăm JPEG (Joint Photographic Experts Group), wavelet-uri și codificări fractale. Mai puține cercetări au fost efectuate asupra fișierelor grafice ce foloseau tonuri discrete, în care intensitățile pixelilor presupun un set discret de valori. Imaginile color cu tonuri discrete sunt generate de calculator și reprezintă ecrane, diagrame, redări de text, grafice. Există două diferențe principale între imaginile cu tonuri discrete și cele cu tonuri continue. Imaginile cu tonuri discrete nu se comprimă optim folosind tehnici compresie cu pierderi de culoare. De exemplu o pierdere minimă de culoare asupra unei imagini text o poate face ilizibilă. Astfel de tehnici, cum ar fi JPEG, nu sunt bine adaptate pentru imagini discrete cu tonuri sintetice.

Standardele de compresie fără pierderi includ JPEG, GIF (Graphical Interchange Format), PNG (Portable Network Graphics) și JBIG (Bi-Level Image Processing Group). Standardul JPEG presupune existența imaginilor cu tonurilor continue, în care valoarea unui pixel este numeric corelată cu valaorea pixelilor adiacenți. Pentru imaginile cu tonuri discrete prezența unui pixel crește probabilitatea de a găsi aceeași culoare la un pixel învecinat, dar nu și la cei din aceeași zonă. GIF este proiectat tocmai pentru imagini în tonuri discrete. Acesta folosește tehnici bazate pe dicționare pentru a axploata redundanța fără a presupune că valoarea pixelului (nu locația) ar fi corelată în nici un mod. Chiar dacă prin aceasta a devenit un standard de facto, are însă câteva limitări. Fiind o codare unidimensională, scanează modelele orizontale eficient, însă nu și pe cele verticale. PNG este similar cu GIF, dar deține capacități progresive imbunătățite de afișare.

III Implementarea tehnologiilor pentru aplicația web de machetare și gestiune a plăcuțelor de signalistică

Sistemul informatic ce stă la baza aplicației de machetare a placuțelor de signalistică este alcătuit din două părți. Prima este constituită din site-ul „Placute Signalistica” prin intermediul căruia clientul iși concepe placuță și salveazșă comanda. A doua parte este localizată pe server, alcatuită dintr-o bază de date ți fisiere *.php, cu ajutorul cărora se asigură comunicarea dintre client, server și baza de date.

În acest capitol vor fi prezentate elementele ce compun aplicația din punct de vedere al administrării acesteia, prin urmare conține informații pentru acele persoane ce au rol de administrare al aplicației. Urmatorul capitol va prezenta aplicația pentru acele persoane care au rol în utilizarea acesteia.

3.1 Tehnologii utilizate pe partea de client

După cum am menționat mai sus, aplicația constă dintr-o parte ce ruleaza pe client și o alta care actionează pe server, fiecare implicând tehnologii diferite. În aecst subcapitol va fi prezentat modul în care sunt utilizate tehnologiile de pe client.

3.1.1 Elemente HTML 5

Întregul site este scris cu ajutorul limbajului HTML 5 (HyperText Markup Language). Se știe că acest în acest limbaj se folosesc etichetele pentru a stabili elementele ce compun site-ul. Structura principală a site-ului este reprezentată în codul următor:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Placute Signalistica</title>

<link href="css/Materiale.css" rel="stylesheet" type="text/css">

</head>

<body>

Continut

<script>

Scripturi JavaScript sau Ajax

</script>

</body>

</html>

Elementul <!doctype html> este o declarație care ajută browserul să afițeze corect conținutul. Observăm că în interiorul elementului <head> stabilim titlul paginii și eventuale fișiere externe utilizate. În cazul acestei aplicații este vorba de fișierul Materiale.css utilizat pentru stabilirea formatului unui tabel, despre care vom vorbi în subcapitolele următoare. Elementele HTML pot fi procesate, modificate sau controlate prin intermediul limbajului JavaScript, cod ce se delimitează cu ajutorul etichetelor <script>…</script>.

Site-ul folosește mai multe elemente ale limbajului HTML, cum ar fi butoanele radio, casuțele de text, de input, combobox-uri, butoane și tabele. Principalul element, cel care face posibila utilitatea aplicatiei, este elementul canvas, nou introdus în HTML 5.

<canvas id="Simulare" width="705" height="472" style="border:1px solid #757575;">Browserul nu poate reda elementul canvas.<br>Simularea grafica nu poate fi realizata.</canvas>

Proprietățile acestui element sunt manipulate cu ajutorul limbajului JavaScript.

3.1.2 Funcții JavaScript

Funcțiile scrise în JavaScript sunt „motorul” aplicației. Prin intermediul acestora sunt asigurate functionalitațile site-ului. Fiecărui element HTML i se poate atribui, în funcție de un anumit eveniment (onclick, onchange, ondblclick, onkeypress etc) o funcție. Astfel, pe masură ce clientul introduce informații în site, evenimentele declanșează funcțiile aferente și sunt întreprinse diverse acțiuni. Acestea fie actualizează anumite elemente de pe site, fie transmit mesaje cu informații suplimentare către client.

Lungime (mm): <input name="Lun" type="number" id="Lun" onchange="Alert_L()">

Inaltime (mm): <input name="Ina" type="number" id="Ina" onchange="Alert_H()">

…

function Alert_L()

{…

if (Lmm > 460 || Lmm < 0)

{ alert("Ne pare rau. \nLatimea trebuie sa fie intre 0 si 460 mm!");

document.getElementById("Lun").value = ""

} }

function Alert_H()

{…

if (Hmm > 305)

{ alert("Ne pare rau. \nInaltimea trebuie sa fie intre 0 si 305 mm!");

document.getElementById("Ina").value = ""

} }

3.1.3 Elementele și fluxul de lucru

În continuare vom prezenta modul în care elementele sunt introduse, verificate și utilizate în site, evidențiând elementele de verificare și validare a acestora

3.1.3.1 Tabelul cu materiale

Primul element care apare este tabelul cu materialele disponibile. Formatul acestuia este controlat prin intemediul unui fișier extern, Materiale.css (vezi Anexa 1).

<table class="materials" cellspacing="0" cellpadding="0">

<tbody><tr class="toptr">

<td bgcolor="#d77511">&nbsp;</td>

…

<td class="Tex_Ver"></td>

<td class="last" bgcolor="#FFFFFF">&nbsp;</td>

</tr>

<tr>

<td bgcolor="#000000">&nbsp;</td>

<td bgcolor="#000000">&nbsp;</td>

<td class="last" bgcolor="#FFFFFF">&nbsp;</td>

</tr>

<tr class="bottomtr">

<td bgcolor="#d77511">&nbsp;</td>

<td class="Tex_Ver"></td>

<td class="last" bgcolor="#FFFFFF">Grosime</td>

</tr>

<tr>

<td>51020<input type="radio" name="Mat" value = "51020" checked="checked" ></td>

<td>12345<input type="radio" name="Mat" value = "12345" ></td>

<td class="last">0,8 mm (.030")</td>

</tr>

<tr>

<td>51001<input type="radio" name="Mat" value = "51001" ></td>

<td></td>

<td class="last">1,3 mm (.050")</td>

</tr>

<tr>

<td></td>

<td>12347<input type="radio" name="Mat" value = "12347" ></td>

<td class="last">1,6 mm (1/16")</td>

</tr>

</tbody>

</table>

Din motive de spațiu, codul de mai sus conține doar prima și ultimele două coloane, pentru a evidenția clasele utilizate pentru anumite căsuțe sau pentru anumite rânduri. Oservăm că pe ultimele 3 rânduri din tabel apare un buton radio căruia i se atribuie o valoare, una dintre ele fiind prestabilită. Valoarea acelui buton este citită cu ajutorul unei funcții JavaScript:

function SelMat()

{

var radios = document.getElementsByName('Mat');

for (var i = 0, length = radios.length; i < length; i++)

{

if (radios[i].checked)

{

CodMat = radios[i].value

switch (CodMat)

{

case "51020": SelectedMat = new material("#d77511","#000000",0.8); break;

…

case "12347": SelectedMat = new material("Tex_Ver","#000000",1.6); break;

}

break;

}}

}

În acestă funcție se declansează un constructor de obiect, și i se oferă valorile conform proprietăților din tabel. Denumirea obietului este SelectedMat. Obiectul material și constructorul sunt definite astfel:

function material(BackCL, ForeCL, Grosime)

{

this.BackCL = BackCL;

this.ForeCL = ForeCL;

this.Grosime = Grosime;

}

Obiectul este folosit mai târziu în funcția ce afisează elementul canvas:

ctx.fillStyle = SelectedMat.BackCL ;

…

ctx.strokeStyle = SelectedMat.ForeCL;

…

ctx.fillStyle = SelectedMat.ForeCL;

3.1.3.2 Dimensiunile plăcuței

Prin intermediul unor elemente de input clientul poate introduce dimensiunile dorite pentru plăcuța:

Lungime (mm): <input name="Lun" type="number" id="Lun" placeholder="Max. 460 mm" max="460" min="0" onchange="Alert_L()">

Inaltime (mm): <input name="Ina" type="number" id="Ina" placeholder="Max. 305 mm" max="305" min="0" onchange="Alert_H()">

Dimensiunile maxime acceptate de echipamentul de gravură sunt introduse ca valori pentru atributul max al fiecărui element. În plus prin atributul placeholder se oferă un mesaj sugestiv clientuui. În cazul în care clientul introduce totuși o valoare în afara intervalului, se declanșează o funcție ce transmite un mesaj de avertizare și anulează valoarea introdusă de client:

function Alert_L()

{…

if (Lmm > 460 || Lmm < 0)

{ alert("Ne pare rau. \nLatimea trebuie sa fie intre 0 si 460 mm!");

document.getElementById("Lun").value = "" }

}

function Alert_H()

{…

if (Hmm > 305)

{ alert("Ne pare rau. \nInaltimea trebuie sa fie intre 0 si 305 mm!");

document.getElementById("Ina").value = "" }

}

3.1.3.3 Textul plăcuței

Pentru a introduce textul pe placută, clientului i se pun la dispoziție atât opțiuni pentru formatare, dar și pentru alegerea numărului de rânduri. Astfel, pentru fiecare rănd de scris se poate introduce textul, apoi se poate selecta fontul și dimensiunea acestuia:

<table id="Aspect">

<tr>

<td>Rand 1:<input type="text" id="T1" placeholder="Text pe Randul 1" size="50" ></td>

<td>Font:<select id="FNT1">

<option value="ARL">Arial</option>

<option value="CMS">Comic Sans MS</option>

<option value="MTC">Monotype Corsiva</option>

<option value="TNR">Times New Roman</option>

<option value="VDN">Verdana</option>

</select></td>

<td>Inaltime scris:<input type="number" id="H1" style="width:50px" value="10"> mm</td>

</tr>

</table>

Fontul poate fi ales prin intermediul unui comboBox. Pentru simplitatea codului se oferă clientului numai cinci fonturi cu aspecte diferie: Arial, Comic Sans MS, Monotype Corsiva, Times New Roman și Verdana.

Deoarece trebuie să oferim clientului șansa de a introduce text pe mai multe rânduri, am stabilit ca elementele ce stabilesc proprietățile pentru fiecare linie să fie introduse într-un tabel, ce va conține câte un rând pentru fiecare linie de text. Astfel prin intermediul metodelor .insertRow() și .insertCell() a fost creată o funcție care să introducă un rând la finalul tabelului, care să permita introducerea textului pe rândul următor. De asemeni este pusă la dispoziția clientului și oportunitatea de a elimina ultimul rând din tabel cu ajutorul unei funcții ce folosește metoda .deleteRow(). Cele două funcții sunt puse pe evenimentul onClick a două butoane situate sub tabel:

<input name="Add_R" type="button" id="Add_R" value="Adauga rand la final" onClick="Add_R()">

<input name="Del_R" type="button" id="Del_R" value="Sterge ultimul rand" onClick="Del_R()">

Cele două funcții se regăsesc în Anexa 2. Trebuie menționat faptul că nu se permite ștergerea ultimului rând, dacă în tabel este doar o linie.

3.1.3.4 Variabile globale

Înainte de a prezenta în detaliu elementul canvas, trebuie să facem anumite lămuriri referitoare la variabile. Pentru a putea fi utilizate în scripturi, valorile introduse de client trebuiesc atribuite unor variabile. Aceste variabile sunt folosite în mai multe funcții. Prin urmare, pentru a reduce atât numărul variabilelor cât și codul fiecărui script, a fost scrisă o funcție care să „adune” toate informațiile în variabile. Prin modul de declarare al acestora, adică omiterea declarației var, li s-a asigurat un caracter global.

function SetGlobals()

{

var radios = document.getElementsByName('Mat');

for (var i = 0, length = radios.length; i < length; i++)

{ if (radios[i].checked)

{CodMat = radios[i].value}

}

Lmm = document.getElementById("Lun").value;

Hmm = document.getElementById("Ina").value;

Lpx = Lmm * 1.5;

Hpx = Hmm * 1.5;

NumRn = document.getElementById("Aspect").rows.length;

SpaceRows = NumRn+1;

T = []; FNT = []; Spx = []; Smm = []; Sum_Smm = 0;

for(x=0;x<NumRn;x++)

{ Nr = x + 1; IdT = "T"+Nr; IdFNT = "FNT"+Nr; IdH = "H"+Nr;

T[x] = document.getElementById(IdT).value;

FNTel = document.getElementById(IdFNT);

FNT[x] = FNTel.options[FNTel.selectedIndex].text;

Smm[x] = document.getElementById(IdH).value;

Sum_Smm = parseInt(Sum_Smm) + parseInt(Smm[x]);

Spx[x] = Smm[x] * 1.5;

}

Sum_Spx = Sum_Smm * 1.5;

SpaceInter = (Hpx – Sum_Spx)/SpaceRows;

}

Observăm aici cum informațiile referitoare la dimensiuni sunt salvate sub două variabile, Lmm și Lpx, Hmm și Hpx spre exemplu. Acest lucru se datorează necesității stabilirii unui raport între valoarea introdusă de client și valoarea necesară în scripturi. Din necesitatea de a utiliza o unitate de masură cât mai la îndemana clientului, și ușor de raportat la dimensiunile plăcuței, clientul introduce valorile în milimetrii. Spre exemplu pentru înălțimea plăcuței funcția SetGlobals() preia valoarea sub variabila Hmm și apoi declară variabila Hpx stabilind un raport de 1.5 între acestea. Procedeul acesta a fost necesar pentru a efectua o simulare cât mai apropiată de realitate a graficii, întrucât dacă se introduceau în pixeli valoarea neprelucrată introdusă, imaginea era mult prea mica.

Informațiile referitoare la rândurile de text sunt salvate în cate un element array pentru fiecare variabilă: Text – T[], Font – FNT[] și Înălțime scris – Smm[] sau Spx[].

La începutul fiecărei funcții care folosește aceste variabile, este apelată mai întâi funcția SetGlobals().

function FcChenar()

{SetGlobals(); SelMat();

…

}

3.1.3.5 Elementul canvas

Grafica din elementul canvas este controlată prin funcția FcChenar(), aflată pe evenimentul onCLick al butonului Aplica proprietati. În continuare o vom prezenta și comenta.

function FcChenar()

{SetGlobals(); SelMat();

…

if (!(Lmm && Hmm))

{alert("Completeaza dimensiunile placutei!");}

else if (Sum_Smm + SpaceRows > Hmm)

{alert("Inaltimile randurilor( "+ Sum_Smm + " & " + SpaceRows +" ) sunt mai mari ca inaltimea placutei ( " + Hmm + "!");}

else{

if (Sum_Smm + SpaceRows > 0.8 * Hmm)

{alert("Inaltimile fonturilor sunt foarte apropiate de inaltimea placutei! \nEste posibil sa se suprapuna! \nIn acest caz, fie micsorati fontul, fie mariti inaltimea placutei");}

Mai întâi se peiau informațiile introduse de client în site cu ajutorul funcției SetGlobals() prezentată anterior. Tot pentru manipularea elementului canvas avem nevoie de materialul selectat, de aceea se apelează functia ce verifică optiunea aleasă de client prin butonul radio. Aici se crează obiectul material cu ajutorul constructorului ce primește atribute în funcție de opțiunea aleasă.

După cum am menționat anterior, și aici se fac verificări asupra dimensiunilor introduse de client. Primul mesaj apare dacă dimensiunile nu au fost introduse. Mai apoi se fac verificări matematice asupra valorilor înălțimii plăcuței și a înălțimii necesare redării scrisului. Înălțimea plăcuței este mai mică decât suma inălțimilor rândurilor și a spațiului necesar între ele (minim 1 milimetru) se primește un mesaj de eroare și imaginea nu este creată. Dacă înălțimea plăcuței este mai mare, însă foarte apropiată de valoarea cu care este comparată (diferența este mai mică de 20 de procente), se emite un alt mesaj de eroare. Acesta nu impiedică redarea grafică, însă avertizează clientul asupra unor probleme ce pot aprea datorită dimensiunilor apropiate. În același mesaj se oferă și indicații asupra a ceea ce poate fi făcut pentru a evita problema.

Deoarece este posibil să se revină asupra valorilor introduse pentru simulare, elementul canvas trebuie curățat:

var c=document.getElementById("Simulare");

var ctx=c.getContext("2d");

//Curat Canvas-ul

ctx.clearRect(0, 0, c.width, c.height);

ctx.beginPath();

Plăcuța va fi desenată în mijlocul elementului canvas, prin urmare originea desenului este stabilită cu ajutorul urmatorului cod:

//Originea placutei

LCpx = parseInt(c.width);

HCpx = parseInt(c.height);

Xpx = parseInt((LCpx – Lpx)/2);

Ypx = parseInt((HCpx – Hpx)/2);

Din calculele de mai sus ne putem da seama că se consideră că originea desenului este colțul din sâga-sus. Limbajul JavaScript are nevoie uneori să i se „spună” cum anume să interpreteze anumite variabile, de aceea a fost folosită metoda parseInt.

Odată stabilită originea, putem începe adăugarea elementelor ce alcătuiesc simularea grafică. Primele sunt constituite din fundal și contur:

//Desenez fundalul

if (SelectedMat.BackCL == "Tex_Ver")

{

var img=document.createElement('img');

img.src='images/Tex_Ver.jpg';

var pat=ctx.createPattern(img,'no-repeat');

ctx.fillStyle =pat;

} else {

ctx.fillStyle = SelectedMat.BackCL ;

}

ctx.fillRect(Xpx,Ypx,Lpx,Hpx);

//Desenez conturul

ctx.strokeStyle = SelectedMat.ForeCL;

ctx.rect(Xpx,Ypx,Lpx,Hpx);

ctx.lineWidth="1";

ctx.stroke();

Deoarece unele materiale au fundalul alb (codurile 51017, 51057 sau 51047), s-a considerat necesitatea unei delimitări între simularea plăcuței și fundalul elementului canvas. De aceea fiecare simulare, pe langa dreptunghiul ce primește culoarea materialului, se suprapune și un chenar pentru care se folosește culoarea scrisului.

Referitor la fundal, a fost folosit și un material texturat, pentru a cărui simulare este utilizat un fișier *.jpeg folosit pentru a crea un pattern pentru elementul canvas. Acesta este folosit numai dacă materialul selectat are valoarea culorii de fundal Tex_Ver.

În ultima parte a manipulării elementului canvas este adaugată partea de text. Mai întâi se stabilește aranjarea acestuia, anume centrat atât orizontal, cât și vertical. Se parcurge apoi tabelul ce conține liniile ce trebuiesc introduse. Pentru fiecare linie se stabilește fontul, așa cum trebuie dat ca atribut pentru metoda .font a elementului cavas. După ce se stabilește culoarea scrisului conform obiectului SelectedMat se stabilesc coordonatele la care va fi asezat textul respectiv. Coordonata X (orizontală) este dată de jumătatea lățimii elementului canvas. Pentru coordonata verticală (Y) este necesar un calcul matematic care să țină cont de originea verticală a plăcuței, numărul de spații între rânduri, dimensiunea fontului și dimensiunea rândurilor deja scrise: CoorY = Ypx + ((x+1)*SpaceInter + (Spx[x]/2) + RPrec).

//Aplic scrisul

ctx.textAlign = "center";

ctx.textBaseline="middle";

for(x=0,RPrec=0;x<NumRn;x++)

{

FNTR = Spx[x] + "pt " + FNT[x];

ctx.font = FNTR;

ctx.fillStyle = SelectedMat.ForeCL;

CoorY = Ypx + ((x+1)*SpaceInter + (Spx[x]/2) + RPrec);

ctx.fillText (T[x], LCpx/2 , CoorY, Lpx-4);

RPrec = RPrec + Spx[x]; }

Clientul poate reveni oricând asupra informațiilor introduse, modificând toate elementele din componența imaginii. Pentru actualizarea simulării trebuie să apese butonul Aplica proprietati.

3.1.3.6 Pregătirea informațiilor pentru transmitere către server

Odată ce grafica este acceptată de client, se pregătește un form ce folosește metoda post, prin intermediul căruia informațiile vor fi trimise către server. Acest form este ascuns în mod implicit, fiind afișat la apasarea butonului Proprietati. De asemeni, fiecare reactulizare a simulării grafice ascunde form-ul, întrucât se modifică și datele comenzii. Funcția declanșată la apăsarea butonului pregătește informațiile și stabilește și un id unic al comenzii. Acesta este numarul de secunde de la 01/01/1970, conform specificațiilor metodeti .getTime().

function FcAfisCOM()

{SetGlobals(); SelMat(); SaveJPEG();

var d = new Date();

var IdCmd = parseInt(d.getTime()/1000);

…

}

Observăm că la început sunt declanșate funcțiile ce stabilesc variabilele globale, materialul și funcția SaveJPEG(). Aceasta, prin intermediul codului AJAX și al metodei .toDataURL("image/jpg") trimite conținutul binar al elementului canvas către un fișier *.php prin intermediul cărua simularea grafică va fi salvată într-un fisier *.jpg. Când procesul de salvare este terminat, textul unui element din site oferă un mesaj în acest sens:

…

<p id="ImgSaved"></p>

…

if (ajax.readyState==4 && ajax.status==200)

{document.getElementById("ImgSaved").innerHTML = "Imaginea a fost salvata!"; }

…

Cum și textul și proprietățile acestuia trebuiesc trimise către server și nu se știe de la început câte rânduri vor fi introduse, a fost creat un tabel ce va fi actualizat de fiecare dată cu aceste valori, după ce a fost „curățat” în prealabil:

var TextRn = document.getElementById("TextTbl").rows.length;

if (TextRn>1){

for (i=TextRn;i>1;i–){

document.getElementById("TextTbl").deleteRow(i-1);}

}

…

for(x=1;x<=NumRn;x++){

var row = table.insertRow(x);

var Col_1 = row.insertCell(0);

var Col_2 = row.insertCell(1);

var Col_3 = row.insertCell(2);

var Col_4 = row.insertCell(3);

Col_1.innerHTML = '<input name="Rtxt'+x+'" type="number" value='+x+' style="width:50px" readonly>';

Col_2.innerHTML = '<input name="Ttxt'+x+'" type="text" value="'+T[x-1]+'" readonly>';

Col_3.innerHTML = '<input name="Ftxt'+x+'" type="text" value="'+FNT[x-1]+'" readonly>';

Col_4.innerHTML = '<input name="Stxt'+x+'" type="number" value='+Smm[x-1]+' style="width:50px" readonly>';

}

Tot în acest form sunt introduse și elementele referitoare la suprafața plăcuței și la prețul aferent. Se consideră un preț de 0.03 Euro pentru fiecare centimetru pătrat utilizat. Clientului i se solicită să introducă elementele de identificare (nume, prenume, E-mail) și mai apoi să lanseze comanda prin intermediul butonului Salveaza. Acesta este inactiv în mod implicit. Poate fi activat doar dacă sunt bifate cele două checkbox-uri referitoare la preț și la validarea datelor de contact. Fiecare are câte o funcție prin care se verifică starea celuilalt. Pentru datele de contact se fac verificări suplimentare pentru a nu accepta câmpuri goale.

Confirm datele de contact: <input onClick="FcSaveOKInfo()" type="checkbox" id="CnfInfo"><br>

…

function FcSaveOKInfo()

{

if (document.getElementById("firstname").value == null || document.getElementById("firstname").value == "")

{alert("Completati numele!");

document.getElementById("CnfInfo").checked = false;}

else if (document.getElementById("lastname").value == null || document.getElementById("lastname").value == "")

{alert("Completati prenumele!");

document.getElementById("CnfInfo").checked = false;}

else if (document.getElementById("Email").value == null || document.getElementById("Email").value == "")

{alert("Completati adresa se e-mail!");

document.getElementById("CnfInfo").checked = false;}

else if (document.getElementById("AccPret").checked == true)

{document.getElementById("btnSave").disabled = false;}

else {document.getElementById("btnSave").disabled = true;

}}

3.2 Tehnologii utilizate pe partea de server

Toate informațiile oferite de client trebuiesc salvate. Pentru aceasta aplicația se folosește de lmbajul PHP și de o bază de date administrată prin intermediul phpMyAdmin.

3.2.1 MySQL – Tabelele bazei de date

Pentru gestiunea informațiilor a fost creată cu ajutorul phpMyAdmin o bază de date ce va stoca parametrii și valorile introduse de client. Baza de date conține trei tabele în care se vor stoca informațiile legate de: plăcuța, implicit comandă, textul aferent și informațiile de contact ale clientului.

Informațiile legate de placuță sunt salvate în tabela Placute_CMD, care conține următoarele coloane: Id_CMD, Id_MAT, E_Mail, Lmm, Hmm, SupCMP și Pret. Observăm că în tabel sunt salvate dimensiunile în milimetrii, oferite de client, nu în pixeli, așa cum sunt utilizate în canvas. Id_CMD este cheie primară pentru tabela, de tip integer.

Textul care apare pe fiecare plăcuță este stocat în tabela Text_Pl_CMD și conține câmpurile: Id_CMD, Rand, Text, Font, Size. Cum se observă câmpul Id_CMD apare și în această tabelă, deci este element de legatură. Aceste informații nu puteau fi stocate în tabela Placute_CMD, deoarece este posibil ca o plăcuță să aibe mai multe rânduri, deci baza de date nu mai era eficientă sau normalizată. Din același motiv tabela Text_Pl_CMD are cheie compusă din două coloane, anume coloana Id_CMD și coloana Rand.

Datele de contact ale clientului sunt salvate în tabela Client_INF, aici găsindu-se coloanele Nume, Prenume, E_Mail. Această tabelă nu are cheie primară, însă se poate face o legatură între coloanele E_Mail din aceasta și coloana cu aceeași denumire din tabela Placute_CMD.

Structura detaliată a tabelelor, așa cum apare în phpMyAdmin este prezentată în Anexa 3.

3.2.2 PHP – Salvarea simulării ca fișier *.jpg

În capitolele precedente am menționat faptul că elementul canvas este manipulat pentru a prezenta o simulare grafică a plăcuței selectate de client. Această simulare poate fi necesară și mai tărziu, în procesul de producție. De aceea, prin intermediul fișierlui saveImage.php , solicitat cu ajutorul metodelor AJAX, conținutul canvasului este salvat într-o locație stabilită pe server:

if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) {

$rawImage=$GLOBALS['HTTP_RAW_POST_DATA'];

$removeHeaders=substr($rawImage, strpos($rawImage, ",")+1);

$decode=base64_decode($removeHeaders);

$fopen = fopen('images/ImgComenzi/Poza.jpg', 'wb' );

fwrite( $fopen, $decode);

fclose( $fopen );

}

3.2.3 PHP – Salvarea parametrilor în baza de date

Toate informațiile din form-ul FrmPST sunt transmise prin metoda post către fișierul comanda.php (conținutul întreg al fisierului se gaseste in Anexa 4).

<form id="FrmPST" action="comanda.php" method="post" hidden="true">

Fișierul php mai întâi încearcă să se conecteze la baza de date și returnează un mesaj în cazul în care acest lucru nu este posibil.

$con=mysqli_connect("my*.d22023.myhost.ro","*Victor","M*ov_19*5","victormirica_ro_PlacuteSig");

// Check connection

if (mysqli_connect_errno()) {

echo "Failed to connect to MySQL: " . mysqli_connect_error(); }

Apoi adună informațiile postate și le depozitează în variabile cu ajutorul funcției mysqli_real_escape_string():

$Id_CMD = mysqli_real_escape_string($con, $_POST['Id_CMD']);

$Id_MAT = mysqli_real_escape_string($con, $_POST['Id_MAT']);

….

După acest proces urmează adăugarea informațiilor în baza de date. Acest lucru se realizează prin intermediul unei variabile string ce conține codul SQL de adăugare în tabela. Se crează câte un proces pentru fiecare tabelă în parte.

$sqlINF="INSERT INTO Client_INF (Nume, Prenume, E_mail)

VALUES ('$firstname', '$lastname', '$E_mail')";

if (!mysqli_query($con,$sqlINF)) {

die('Error: ' . mysqli_error($con));

}

În capitolele precedente am menționat că elementul canvas este salvat pe server în formatul *.jpg. Acest lucru se face însă sub aceeași denumire de fiecare dată, prin urmare, imaginaea salvată mai devreme trebuie redenumită conform comenzii deja salvate în baza de date:

rename ('images/ImgComenzi/Poza.jpg','images/ImgComenzi/'.$Id_CMD.'.jpg');

La finalu, după ce atât tabelele cât și imaginea simulării sunt salvate, clientul primește un mesaj de informare asupra codului comenzii:

echo "Comanda dumneavoastra a fost salvata sub ID-ul: <b>".$Id_CMD."</b> !";

Din acest moment, administratorul aplicației sau utilizatorul acesteia din partea firmei, poate consulta baza de date pentru a verifica existența unor noi comenzi. Informațiile salvate până în acest moment sunt îndestulătoare pentru crearea unei noi plăcuțe de signalistică, în conformitate cu cerințele clientului.

IV Site-ul „Placute Signalistica”

Aplicația creată constă într-un site care utilizează în mod eficient limbajele și mijloacele prezentate în capitolele al doilea și al treilea. Pe parcursul acestui capitol vor fi prezentate părțile din care site-ul este compus, modul și ordinea în care clientul îl va parcurge, de la selecția materialului la afișarea și salvarea informațiilor despre plăcuță. Elementele sunt prezentate individual, explicandu-se funcționalitatile, rolul și, la final, modul în care interdependența elementelor a fost asigurată.

Algoritmul presupune introducerea unor mesaje de atenționare în cazul în care anumite valori impiedică machetarea corectă a plăcuței sau poate duce la generarea unui aspect neinteligibil.

4.1 Selecția materialului

Primul element din aplicație conține „simulări” ale materialelor disponibile. Este prezentat sub formă de tabel al căror prime trei rânduri conțin combinația de culori ce urmează să fie selectată de client. Rândul 1 și 3 reprezintă culoarea de fundal, iar rândul 2 reprezintă culoarea ce va evidenția scrisul (gravură). Ultimele trei rânduri conțin coduri de material în funcție de combinația de culori și de grosimea dorită de client. Tot aici se află butoane radio prin intermediul cărora se stabilește selecția clientului. Pentru a asigura fluența procesului, una dintre valori este setată ca implicită.

Fig 4.1 – Tabelul cu materiale posibile

Ultimul material din tabel nu conține o anumită culoare decât pentru parteaa de scris. Aspectul fundalului este definit cu ajutorul unei imagini *.jpeg. În acest fel se reușește o simulare pentru un material texturat, ajutând clientul să vizualizeze aspectul specific al materialului selectat.

4.2 Selecția dimensiunilor plăcuței

Echipamentul luat în calcul pentru producția plăcuțelor rezultate în urma comenzilor este un Gravograph LS100. Acesta utilizează tehnologia de gravură laser CO2. Între specificațiile acestuia se află și dimensiunile maxime ale suprafeței de lucru, anume 460 milimetri lățime și 305 milimetri înălțime.

Fig 4.2 – Definirea dimensiunilor plăcuței

Pentru a nu permite introducerea unor valori nevalide pentru aceste două dimensiuni, au fost implementate mai multe metode de evidențiere și verificare a acestora. Între acestea enumerăm: căsuțele au un text sugestiv oferit ca valoare a atributului placeholder. În același timp odată cu introducerea unei valori se declanșeaza câte mesaj de atenționare în cazul în care valoarea introdusă nu aparține intervalului corect definit ca valori pentru atributele min și max ale elementului.

Fig 4.3 – Mesaje de eroare datorate dimensiunilor introduse

Căsuța Cod Material este de tip readonly. Valoarea acesteia este actualizată la un pas ulterior, și are rolul de a evidenția codul de material selectat. Clientul nu poate interveni asupra acesteia, fiind inactivă.

4.3 Stabilirea textului

Textul poate fi considerat al doilea element principal al plăcutei, pe langă combinația de culori. Plăcuța în sine nu ar avea rost fără acesta. În plus rolul principal al lucrării este de a prezenta o simulare grafică a plăcuței, implicit, aranjarea textului pe plăcuță.

Fig 4.4 – Introducerea textului pe un rând sau pe mai multe rânduri

De obicei un rănd de text este suficient, însă uneori se dorește adăugarea unor informații suplimentare, sau denumirea ce se dorește a fi inscripționată nu încape pe un singur rând. Din acest motiv numărul de linii pe care se introduce textul pot fi multiplicate sau diminuate cu ajutorul celor două butoane Adauga rand la final sau Sterge ultimul rand. Și aici există câteva elemente de siguranță. Pe de o parte se verifică să rămână minim un rând de text în urma apăsării butonului Sterge ultimul rand. Pe de altă parte, pentru a putea raporta înălțimea scrisului la înălțimea plăcuței, înălțimea scrisului este considerată în milimetrii.

Fig 4.5 – Eroare pentru înălțimea insuficientă a plăcuței

În momentul în care clientul dorește să efectueze simularea grafică a plăcuței, poate aparea mesajul de eroare prezentat in Figura 4.5. Acesta apare în cazul în care înălțimea plăcuței nu este suficientă.

Mai întâi trebuie menționat faptul că aplicația consideră că între fiecare rând de scris trebuie să existe minim 1 milimetru. Prin urmare este necesară o înălțime a plăcuței mai mare sau egală cu suma înălțimilor rândurilor de text la care se adaugă un număr de milimetrii egal cu numărul de rânduri plus 1 – spațiu înainte de marginea de sus a plăcuței și spațiu după fiecare rând în parte. Folosind aceeași logică, spațierea între rânduri se face conform diferenței dintre suma înalțimilor rândurilor și înălțimea plăcuței – de exemplu, pentru o plăcuță înaltă de 70 milimetri ce conține două rânduri de scris a câte 20 milimetri se consideră că diferența de 30 de milimetri se împarte egal la cele 3 spații necesare.

Spațierea dintre linii poate aduce probleme și din alte motive, greu de cuantificat. Spre exemplu relativitatea înălțimii efective a unui text față de înălțimea fontului. Sunt litere care coboară sub baseline-ul unui text sau care urcă mai mult decât înălțimea solicitată, iar proporția acestor variații nu poate fi evaluată procentual. Prin urmare, în cazul în care suma înălțimilor rândurilor este mai mare de un procent de 80% din înalțimea plăcuței, apare următorul mesaj de eroare:

Fig 4.6 – Eroare în cazul unor valori apropiate

Mesajele care apar au rolul de atenționare asupra unei posibile inconveniențe și de informare asupra metodelor ce pot fi aplicate pentru remedierea problemei. În acest caz, simplul calcul al raportului menționat de 80 % nu este edificator pentru existența unei probleme de aspect, deci este posibil ca machetarea să fie inteligibilă. În cazul precedent este imperativ necesară modificarea dimensiunilor pentru a realiza simularea grafică.

Pentru fiecare rând clientul poate introduce textul dorit să apară pe plăcuță, poate alege un anumit font cu ajutorul unui combo-box, și poate stabili înălțimea dorită.

4.4 Butoanele aplicației

Fig 4.7 – Butoanele aplicației

Primele două butoane au fost deja prezentate în subcapitolul precedent, și s-a stabilit că prin intermediul lor se stabilește numărul de rănduri ce va fi folosit pentru aplicarea textului pe plăcuță. Teoretic și practic trebuie să existe minim un rând de text pe plăcuță. În cazul în care se solicită ștergerea ultimului rând, atunci când există doar unul, apare urmatorul mesaj de eroare:

Fig 4.7 – Eroare rânduri

Butonul Aplica proprietati preia toate informațiile introduse până în acest punct și le verifică, le prelucrează și pregătește simularea grafică a plăcuței. Acest buton este cel care generează mesajele de eroare referitoare la înălțimile plăcuței și ale rândurilor. Tot cu ajutorul acestui buton se actualizează valoarea căsuței Cod Material.

Butonul Proprietati de asemeni preia toate informațiile, dar le folosește pentru ale afișa lângă elemntul canvas. Scopul este de a le introduce într-un form ce foloseste metoda post și de a le trimite astfel către un fisieru *.php care asigură legatura cu baza de date. Astfel toate informațiile introduse de client pot fi trimise către server pentru a fi introduse în baza de date.

4.5 Elementul canvas

Elementul canvas este „vedeta” aplicației. El are o lățime de 705 pixeli și o înălțime de 472 pixeli. Pentru un aspect cât mai apropiat de diemnsiunile reale, dar care sa nu fie nici prea mic, nici prea mare pentru afișajul în browser, am decis considerarea unui raport de 1,5 pixeli pentru un milimetru. De aceea elementul canvas are dimensiunile cu puțin mai mari de 690 pixeli (460*1.5) și 459 pixeli (306*1.5). Astfel rămâne un spațiu mic între element și plăcuță, în cazul în care clientul dorește să utilizeze dimensiunile maxime posibile.

El conține în format grafic toate informațiile selectate și introduse de client până la acest punct, mai puțin grosimea materialului.

Fig 4.8 – Elementul canvas și simularea plăcuței în acesta

Acest element ajută clientul să vizualizeze modul în care arată plăcuța ce urmează să o comande. Poate reveni oricând asupra proprietăților modificând infromațiile introduse până în prezent. Pentru actualizarea simulării trebuie apăsat încă o dată butonul Aplica proprietati.

4.6 Detaliile finale ale comenzii

În capitolele precedente a fost prezentat butonul Proprietati. Acesta strânge toate informațiile necesare salvării unei comenzi, de la informațiile plăcuței până la informațiile referitoare la client:

Fig 4.9 – Informațiile finale ale comenzii

Primul rând arată faptul că simularea grafică vizibilă în elementul canvas este salvată. Mai apoi sunt afișate toate informațiile legate de comandă. Id-ul este stabilit de aplicație. Tot aici clientul primește informații despre suprafața utilizată pentru plăcuță și prețul aferent acesteia. Toate valorile prezente în acest formular nu pot fi modificate, cu excepția celor lăsate goale în mod intenționat. Acestea sunt căsuțele în care trebuiesc introduse informațiile de contact: Nume, Prenume și adresa de e-mail.

Butonul Salveaza este inactiv. Pentru activarea acestuia este necesar ca cele două checkbox-uri sa fie bifate. Primul checkbox confirmă faptul că a fost acceptat prețul, pentru a ne asigura ca informația a ajuns corect la client. Al doilea checkbox are rolul de a valida informațiile de contact oferite. Nu se actualizează în cazul în care una din cele trei informații necesare nu sunt completate. În acest caz se emit și mesaje de atentionare care avertizează asupra elementelor neintroduse.

CONCLUZII

Într-un mediu în care timpul devine de cele mai multe ori mai valoros decât satisfacția financiară, individul este din ce în ce mai interesat de economia celui dintâi. Astfel caută metode, nu întotdeauna ieftine, de a reduce sau de a elimina timpul alocat unor anumite activități. Metodele constau fie în recalcularea necesității acestora, în scopul eliminării lor, fie în regândirea procesului aferent, pentru a-l eficientiza.

Orice produs are un ciclu de viață, fie el cât de scurt, chiar dacă este vorba de o placuță de signalistică. Experiența de cinci ani într-o firmă care produce, printre altele, și aceste plăcuțe mi-a arătat că timpul efectiv de creare al acesteia era alcătuit din două etape. Cea de-a doua constă în gravarea efectivă a plăcuței, lucru ce rareori dura mai mult de 15 minute.

Prima etapă era cea mai laborioasă, întrucât presupunea discuții cu clientul, machetarea grafică de mai multe ori a unor simulări pentru plăcuță, timp de așteptare a „bunului de tipar”, etape care, deși nu obligatorii, erau necesare și ocupau destul de mult timp. La toate acestea se adăugă faptul că nu se putea discuta cu doi clienți simultan.

Lucarea de față dorește să elimine acest proces laborios, oferind on-line insrumentele necesare generării graficii unei plăcuțe de signalistică. Clientul are la dispoziție materialele din stoc, proprietățile acestora, câteva fonturi uzuale, pozibilitatea de a crea acea simulare grafică în voie, fără grabă, fără stresul unui birou. Poate oricând să se răzgândească, în cazul în care aspectul nu este cel dorit. În același timp, multe firme oferă serviciile de machetare contra cost, lucru corect, de altfel, din moment ce o persoană se ocupa de client pentru a-l îndruma. Deci putem spune că aplicația oferă, pe lângă o metodă mult mai facilă de comandare a acestor plăcuțe, și un beneficiu financiar.

Pe de altă parte, aplicația poate ajuta și firma care o foosește. Clientul observă grafic cum arată ceea ce dorește să comande, deci nu se va pune problema unor lucrări refuzate. În același timp persoana care în mod uzual se ocupă de acești clienți, va putea întreprinde alte activități în cadrul companiei. Un alt avantaj al aplicației pentru firmă este acela că, fiind o aplicație on-line, numărul clienților este nelimitat. Singura problemă pe care o pot avea este una legată de promovare.

Lucrarea are și un mic dezavantaj: acela că, datorită coordonatelor cu ajutorul cărora grafica este concepută pe site, există posibilitatea unor mici defecte de centare sau aliniere a textului. Totuși, pentru graficianul din firmă este mult mai usor să re-macheteze o placuță dacă are deja selectat materialul, textul, fonturile și dimensiunile.

BIBLIOGRAFIE

1 – David Flanagan, (2011), Canvas pocket reference, of , Editura O’Reilly

2 – Eric Rowell, (2011), HTML5 Canvas Cookbook, , Editura Packt Publishing.

3 – Frank W. Zammetti, (2007), Practical JavaScript, DOM Scripting and Projects, , Editura Apress.

4 – James L. Williams, (2011), Learning HTML5 game programming, , Editura Addison-Wesley

5 – Jeremy Keith, (2010), HTML 5 for web designers, , Editura A Book Apart

6 – Klaus Förster, Bernd Öggl, (2011), HTML5 guidelines for Web Developers, United States of America, Editura Addison-Wesley

7 – Larry Ullman, (2004), PHP pentru world wide web, București, Editura Teora

8 – Richard Clark, Oli Studholme, Christopher Murphy și Divya Manian, (2012), Beginning HTML5 and CSS3, New York, Editura Apress.

9 – Steven M. Schafer, (2010), HTML, XHTML and CCS BIBLE – fifth edition, , Editura Wiley Publishing

10 – Terry McNavage, (2010), Java Script for absolute beginners, , Editura Apress.

11 – http://en.wikipedia.org/wiki/Signage

12 – 1 A Lossless 2-D Image Compression Technique for Synthetic Discrete-Tone Images, University of California at Berkeley Electrical Engineering & Computer Sciences Berkeley, CA 94720-1770

ANEXE

Anexa 1: Conținutul fișierului Materiale.css:

.materials {

margin-bottom: 10px;

border: none;

margin-top: 10px;

border-collapse: collapse; }

.materials td {

border: 1px solid black;

margin: auto;

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: 11px;

width: 40px;

text-align: center;

color: #000; }

.materials td:last-child {

width: 90px;

border-top: none;

border-bottom: none;

border-right: none;

border-left: none;}

.materials tr:nth-child(odd) {

background-color:#EEE; }

.materials tr:nth-child(even) {

background-color:#FFF; }

.toptr {

height: 60px;

}

.bottomtr {

height: 25px;

}

.Tex_Ver{

background-image: url(../images/Tex_Ver.jpg)

}

#Simuldiv {

margin-left: auto;

margin-right: auto;

}

.tblText {

border-collapse: collapse;

}

.tblText th {

border: 1px solid black;

}

.tblText td {

border: 1px solid black;

}

Anexa 2 – Adăugarea și ștergerea unui rând din tabelul Aspect

function Add_R()

{SetGlobals();

var table = document.getElementById("Aspect");

var row = table.insertRow(NumRn);

var Col_1 = row.insertCell(0);

var Col_2 = row.insertCell(1);

var Col_3 = row.insertCell(2);

NumRnN = NumRn + 1;

Col_1.innerHTML = 'Rand ' + NumRnN + ':<input type="text" id="T' + NumRnN + '" placeholder="Text pe Randul ' + NumRnN +'" size="50" >';

Col_2.innerHTML = 'Font:<select id="FNT'+NumRnN +'">' +

'<option value="ARL">Arial</option>' +

'<option value="CMS">Comic Sans MS</option>' +

'<option value="MTC">Monotype Corsiva</option>' +

'<option value="TNR">Times New Roman</option>' +

'<option value="VDN">Verdana</option>' +

'</select>';

Col_3.innerHTML = 'Inaltime scris:<input type="number" id="H'+ NumRnN +'" style="width:50px" value="10"> mm';

}

function Del_R()

{SetGlobals();

if (NumRn > 1)

{document.getElementById("Aspect").deleteRow(NumRn-1);}

else{alert("Trebuie sa existe minim 1 rand!!!")}

}

Anexa 3 – Structura tabelelor din baza de date

Anexa 4 – Conținutul fișierului comanda.php

<?php

$con=mysqli_connect("my16264.d22023.myhost.ro","22023Victor","MORcov_1985","victormirica_ro_PlacuteSig");

// Check connection

if (mysqli_connect_errno()) {

echo "Failed to connect to MySQL: " . mysqli_connect_error();

}

$Id_CMD = mysqli_real_escape_string($con, $_POST['Id_CMD']);

$Id_MAT = mysqli_real_escape_string($con, $_POST['Id_MAT']);

$E_mail = mysqli_real_escape_string($con, $_POST['Email']);

$Lmm = mysqli_real_escape_string($con, $_POST['Lmm']);

$Hmm = mysqli_real_escape_string($con, $_POST['Hmm']);

$SupCMP = mysqli_real_escape_string($con, $_POST['SupCMP']);

$Pret = mysqli_real_escape_string($con, $_POST['Pret']);

$sqlPLC="INSERT INTO Placute_CMD (Id_CMD, Id_MAT, E_mail, Lmm, Hmm, SupCMP, Pret)

VALUES ('$Id_CMD', '$Id_MAT', '$E_mail', '$Lmm', '$Hmm', '$SupCMP','$Pret')";

if (!mysqli_query($con,$sqlPLC)) {

die('Error: ' . mysqli_error($con));

}

$firstname = mysqli_real_escape_string($con, $_POST['firstname']);

$lastname = mysqli_real_escape_string($con, $_POST['lastname']);

$sqlINF="INSERT INTO Client_INF (Nume, Prenume, E_mail)

VALUES ('$firstname', '$lastname', '$E_mail')";

if (!mysqli_query($con,$sqlINF)) {

die('Error: ' . mysqli_error($con));

}

$NumarRND = mysqli_real_escape_string($con, $_POST['NumarRND']);

for ($x=1; $x<=$NumarRND; $x++) {

$Rand = mysqli_real_escape_string($con, $_POST['Rtxt'.$x]);

$Text = mysqli_real_escape_string($con, $_POST['Ttxt'.$x]);

$Font = mysqli_real_escape_string($con, $_POST['Ftxt'.$x]);

$Size = mysqli_real_escape_string($con, $_POST['Stxt'.$x]);

$sqlTXT="INSERT INTO Text_Pl_CMD (Id_CMD, Rand, Text, Font, Size)

VALUES ('$Id_CMD', '$Rand', '$Text', '$Font', '$Size')";

if (!mysqli_query($con,$sqlTXT)) {

die('Error: ' . mysqli_error($con));

}

}

mysqli_close($con);

rename ('images/ImgComenzi/Poza.jpg','images/ImgComenzi/'.$Id_CMD.'.jpg');

echo "Comanda dumneavoastra a fost salvata sub ID-ul: <b>".$Id_CMD."</b> !";

?>

BIBLIOGRAFIE

1 – David Flanagan, (2011), Canvas pocket reference, of , Editura O’Reilly

2 – Eric Rowell, (2011), HTML5 Canvas Cookbook, , Editura Packt Publishing.

3 – Frank W. Zammetti, (2007), Practical JavaScript, DOM Scripting and Projects, , Editura Apress.

4 – James L. Williams, (2011), Learning HTML5 game programming, , Editura Addison-Wesley

5 – Jeremy Keith, (2010), HTML 5 for web designers, , Editura A Book Apart

6 – Klaus Förster, Bernd Öggl, (2011), HTML5 guidelines for Web Developers, United States of America, Editura Addison-Wesley

7 – Larry Ullman, (2004), PHP pentru world wide web, București, Editura Teora

8 – Richard Clark, Oli Studholme, Christopher Murphy și Divya Manian, (2012), Beginning HTML5 and CSS3, New York, Editura Apress.

9 – Steven M. Schafer, (2010), HTML, XHTML and CCS BIBLE – fifth edition, , Editura Wiley Publishing

10 – Terry McNavage, (2010), Java Script for absolute beginners, , Editura Apress.

11 – http://en.wikipedia.org/wiki/Signage

12 – 1 A Lossless 2-D Image Compression Technique for Synthetic Discrete-Tone Images, University of California at Berkeley Electrical Engineering & Computer Sciences Berkeley, CA 94720-1770

ANEXE

Anexa 1: Conținutul fișierului Materiale.css:

.materials {

margin-bottom: 10px;

border: none;

margin-top: 10px;

border-collapse: collapse; }

.materials td {

border: 1px solid black;

margin: auto;

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: 11px;

width: 40px;

text-align: center;

color: #000; }

.materials td:last-child {

width: 90px;

border-top: none;

border-bottom: none;

border-right: none;

border-left: none;}

.materials tr:nth-child(odd) {

background-color:#EEE; }

.materials tr:nth-child(even) {

background-color:#FFF; }

.toptr {

height: 60px;

}

.bottomtr {

height: 25px;

}

.Tex_Ver{

background-image: url(../images/Tex_Ver.jpg)

}

#Simuldiv {

margin-left: auto;

margin-right: auto;

}

.tblText {

border-collapse: collapse;

}

.tblText th {

border: 1px solid black;

}

.tblText td {

border: 1px solid black;

}

Anexa 2 – Adăugarea și ștergerea unui rând din tabelul Aspect

function Add_R()

{SetGlobals();

var table = document.getElementById("Aspect");

var row = table.insertRow(NumRn);

var Col_1 = row.insertCell(0);

var Col_2 = row.insertCell(1);

var Col_3 = row.insertCell(2);

NumRnN = NumRn + 1;

Col_1.innerHTML = 'Rand ' + NumRnN + ':<input type="text" id="T' + NumRnN + '" placeholder="Text pe Randul ' + NumRnN +'" size="50" >';

Col_2.innerHTML = 'Font:<select id="FNT'+NumRnN +'">' +

'<option value="ARL">Arial</option>' +

'<option value="CMS">Comic Sans MS</option>' +

'<option value="MTC">Monotype Corsiva</option>' +

'<option value="TNR">Times New Roman</option>' +

'<option value="VDN">Verdana</option>' +

'</select>';

Col_3.innerHTML = 'Inaltime scris:<input type="number" id="H'+ NumRnN +'" style="width:50px" value="10"> mm';

}

function Del_R()

{SetGlobals();

if (NumRn > 1)

{document.getElementById("Aspect").deleteRow(NumRn-1);}

else{alert("Trebuie sa existe minim 1 rand!!!")}

}

Anexa 3 – Structura tabelelor din baza de date

Anexa 4 – Conținutul fișierului comanda.php

<?php

$con=mysqli_connect("my16264.d22023.myhost.ro","22023Victor","MORcov_1985","victormirica_ro_PlacuteSig");

// Check connection

if (mysqli_connect_errno()) {

echo "Failed to connect to MySQL: " . mysqli_connect_error();

}

$Id_CMD = mysqli_real_escape_string($con, $_POST['Id_CMD']);

$Id_MAT = mysqli_real_escape_string($con, $_POST['Id_MAT']);

$E_mail = mysqli_real_escape_string($con, $_POST['Email']);

$Lmm = mysqli_real_escape_string($con, $_POST['Lmm']);

$Hmm = mysqli_real_escape_string($con, $_POST['Hmm']);

$SupCMP = mysqli_real_escape_string($con, $_POST['SupCMP']);

$Pret = mysqli_real_escape_string($con, $_POST['Pret']);

$sqlPLC="INSERT INTO Placute_CMD (Id_CMD, Id_MAT, E_mail, Lmm, Hmm, SupCMP, Pret)

VALUES ('$Id_CMD', '$Id_MAT', '$E_mail', '$Lmm', '$Hmm', '$SupCMP','$Pret')";

if (!mysqli_query($con,$sqlPLC)) {

die('Error: ' . mysqli_error($con));

}

$firstname = mysqli_real_escape_string($con, $_POST['firstname']);

$lastname = mysqli_real_escape_string($con, $_POST['lastname']);

$sqlINF="INSERT INTO Client_INF (Nume, Prenume, E_mail)

VALUES ('$firstname', '$lastname', '$E_mail')";

if (!mysqli_query($con,$sqlINF)) {

die('Error: ' . mysqli_error($con));

}

$NumarRND = mysqli_real_escape_string($con, $_POST['NumarRND']);

for ($x=1; $x<=$NumarRND; $x++) {

$Rand = mysqli_real_escape_string($con, $_POST['Rtxt'.$x]);

$Text = mysqli_real_escape_string($con, $_POST['Ttxt'.$x]);

$Font = mysqli_real_escape_string($con, $_POST['Ftxt'.$x]);

$Size = mysqli_real_escape_string($con, $_POST['Stxt'.$x]);

$sqlTXT="INSERT INTO Text_Pl_CMD (Id_CMD, Rand, Text, Font, Size)

VALUES ('$Id_CMD', '$Rand', '$Text', '$Font', '$Size')";

if (!mysqli_query($con,$sqlTXT)) {

die('Error: ' . mysqli_error($con));

}

}

mysqli_close($con);

rename ('images/ImgComenzi/Poza.jpg','images/ImgComenzi/'.$Id_CMD.'.jpg');

echo "Comanda dumneavoastra a fost salvata sub ID-ul: <b>".$Id_CMD."</b> !";

?>