Magazin Online Telefoane Mobile

MAGAZIN ONLINE

TELEFOANE MOBILE

Cuprins

Capitolul I. Introducere

Aș vrea să încep prin a mulțumi domnului profesor Titus Slavici pentru sprijinul acordat de-a lungul întregii teze de diplomă.

Dezvoltarea internetului a dus și la creșterea comerțului electronic; acum cele mai mici firme, putem lua ca exemplu toate pizzeriile din oraș au aproape câte o pagina de internet unde își prezintă meniurile, serviciile care le oferă, contact și program, dar dispun și de o strategie de marketing nesesară unei pagini destinate vânzărilor. Respectiv oferte speciale, reduceri sau cele mai vândute produse care sunt primele care atrag atenția vizitatorului. Numărul utilizatorilor din România care comandă de pe internet înca nu este așa de mare ca cel din străinătate dar a crescut considerabil în ultimii ani deoarece românii au început să capete încredere în modalitățile de plată care le sunt oferite de paginile de internet și susținute prin servicii de securitate de băncile de care aparțin.

Principalul motiv pentru care oamenii preferă shoppingul online celui clasic este timpul economisit, eliminarea stresului cauzat de trafic, aglomerație, căutarea produsului în magazin sau chiar să nu mai găsim produsul dorit și așteptatul la casa de marcat. Acum dacă mergem într-un magazin cu electrocasnice și dorim să achiziționăm un frigider de dimensiune mai mare, vânzătorul din magazin nici nu ne poate oferi acel produs care este expus doar pentru prezentare; comandă el produsul pentru noi online pe baza unei chitanțe făcută în magazin după care acesta v-a fi livrat, ceea ce puteam face și noi de acasă. Pe cealaltă parte și din punct de vedere al vânzătorului, amenajarea unui magazin online este mult mai puțin costisitoare decât un magazin fizic, la fel și intreținerea; programul este non stop și aria de acoperire este mult mai mare. Livrarea se face ulterior prin firme de curierat.

Comerțul elecronic are un impact puternic asupra competitivității firmelor și este un domeniu în continuă dezvoltare, de aceea am decis alegerea unei asemenea teme dar și din faptul că voi învăța cum se construiește un site.

Lucrarea este structurată încă pe două capitole.

Capitolul II. Internetul

II.1. Istoric

Termenul internet provine din două cuvinte englezești interconnected = interconectat și network = rețea. Internetul este o rețea ce interconectează două sau mai multe rețele autonome aflate la mare distanță unele față de altele. Mai simplu spus, este o rețea de calculatoare răspândită la nivel global. O rețea este constituită în general dintr-un grup de calculatoare și de echipamente de calcul conectate pentru a oferi informații, servicii și a gestiona resurse. Se folosesc pentru dirijarea traficului de date si alte echipamente de comunicare cum ar fi: hub, switch și router. În ziua de astăzi Internetul este susținut, întreținut de o mulțime de firme comerciale. El se bazează pe specificații tehnice detaliate, ca de exemplu pe așa-numitele protocoale de comunicație, care descriu toate regulile dar și protocoalele de transmitere a datelor în această rețea. Cele mai fundamentale sunt Internet Protocol (IP), Transmission Control Protocol (TCP) și User Datagram Protocol (UDP).

Punctul de pornire în dezvoltarea sa a fost și rivalitatea între cele două mari puteri ale secolului al XX-lea Statele Unite ale Americii și Uniunea Sovietică. Uniunea Republicilor Sovietice Socialiste lansează în spațiul cosmic primul satelit artificial al Pământului denumit Sputnik în 1957. Astfel președintele Eisenhower al Statele Unite ale Americii înființează o agenție specială subordonată Pentagonului cu numele Advanced Research Projects Agency. Această agenție a Ministerului de Apărare care este condusă de oameni de știință cu o birocrație redusă are ca misiune menținerea superiorității tehnologice a armatei Statelor Unite și prevenirea surprizei tehnologice în domeniul securității naționale prin sponsorizarea celor mai noi și revoluționare descoperiri științifice și prin investirea de fonduri teoretic nelimitate pentru realizarea unei legături între cercetarea științifică și implementarea tehnologică militară a acesteia.

John McCarthy profesor la Universitatea Stanford, care va fi asociat cu inteligența artificială, găsește în 1959 soluția de a conecta mai multe terminale la un singur calculator central prin time-sharing. Aceasta modalitate de lucru în care mai multe aplicații solicită acces concurențial la o resursă, prin care fiecărei aplicații i se alocă un anumit timp pentru folosirea resursei solicitate. Apărând apoi primele calculatoare în marile universități se pune problema interconectării acestora. Cercetătorul Lawrence Roberts vine cu o soluție de interconectare prin comutare de pachete cu modelul numit client-server. Acum pentru a transmite informația, aceasta este mărunțită în porțiuni mici, denumite pachete. Fiecare pachet conține informații referitore de destinatar, astfel încât el să poată fi corect dirijat pe rețea. La destinație întreaga informație este reasamblată. Deși această metodă întâmpină probleme în partea specialiștilor, în 1969 începe să funcționeze rețeaua ARPANET între 4 noduri: University of California din Los Angeles, University of California din Santa Ana, University of Utah și Stanford Research Institute. Toate acestea au fost codificate într-un protocol care reglementa transmisia de date. Așa a luat naștere TCP/IP (Transmission Control Protocol / Internet Protocol), creat de Vint Cerf și Robert Kahn în 1970 și care este și acum baza Internetului. TCP/IP face posibil ca modele diferite de calculatoare, de exemplu cele pe IBM și Mac, folosind sisteme diferite de operare, cum ar fi UNIX, Windows, MacOS să se "înțeleagă" unele cu altele. Acum Internetul a devenit cu adevărat independent de platforma harware utilizată. Prima conexiune ARPANET a fost realizată în 29 octombrie 1969, ora 22:30 între University of California din Los Angeles și Institutul de Cercetare Stanford și a decurs astfel: cei de la un capăt al rețelei au tastat o litera și apoi, prin telefon, au cerut confirmarea funcționării transferului de date de la cei de la celălalt capăt al conexiunii.

Când au apărut poșta electronică, dar mai ales programele de căutare și de transfer al fișierelor au trebuit să facă față unor cerințe mai complexe, s-au dezvoltat noi navigatoare. Software-ul pentru fiecare trebuia să fie obținut și configurat separat. Folosirea internetului la acea vreme era foarte dificilă datorită metalimbajului dificil, era restrânsă la un grup mic de utilizatori din universități și institute de cercetare.

În 1989 marea schimbare, când Tim Berners Lee de la Centrul European pentru Fizică Nucleară din Geneva a pus bazele dezvoltării primului prototip al World Wide Web (www). Inițial www-ului era foarte limitat, destinat ca o platformă internă de comunicații pentru cercetătorii din întreaga lume care lucrau pentru CERN. Sarcina lor era să asigure un sistem care să facă legătura între varietatea hardware de platforme ale diverselor calculatoare. Soluția de bază era ideea de a face legătura între documente. Dar deosebirea aceste documente și pentru a le regăsi, fiecare avea nevoie de o adresă unică. Aici apare Unique Resource Locator (URL). URL-urile erau protocole de transmitere, o secvență de caractere standardizată, folosită pentru denumirea, localizarea și identificarea unor resurse de pe internet inclusiv fișiere; în cazul www-ului acesta este HyperText Transfer Protocol (http), urmat de www și de domeniu.

Datorită acestora web-ul s-a dezvoltat foarte rapid, posibilitățile de a prezenta datele a crescut. Au apărut poze și animații pe situri web, urmate de sunete. Doar un mic pas mai era necesar pentru a aduce cataloage, directoare și formulare de comandă pe siturile web. Astfel, câțiva ani mai târziu s-a născut E-Commerce, comerțul electronic.

În România internet-ul a apărut abia în anul 1993 , conform datelor prezentate de Institutul de Cercetari în Informatică cănd s-a înregistrat domeniul .ro și infrastructura de comunicații a Universitații Politehnica din București a devenit operațională RoEdu.Net.

Alt serviciu important care a apărut este DNS, un un sistem de nume de domeniu, pe engleză Domain Name System care păstrează și face interogare a unor date arbitrare într-o structură ierarhică. Fiecare pagină de pe Internet are alocată o adresă IP. Folosirea de către utilizatorii obișnuiți a acestor adrese este dificilă și poate genera erori. Astfel, este necesar un protocol care să facă corespondența dintre numele diverselor componente de rețea și adresele lor IP. Această problemă este rezolvată de către acest protocolul.

File Transfer Protocol este un protocol specializat de tip client-server prin intermediul căruia se fac transferuri de fișiere între calculatoarele conectate în rețeaua internet. În zilele noastre aceste programe nu mai sunt folosite așa de mult deoarece utilizatorul poate descărca fisierele direct de pagină folosind protocolul http.

Poșta electronică este un sistem global prin care se pot trimite și primi mesaje scrise sau fișiere altor persoane, prin intermediul Internetului. Adresa clasică a fost înlocuită de adresa de e-mail, timbrul poștal cu furnizorul de Internet, oficiul poștal cu un server de mail și transportul aerian, terestru al scrisorilor clasice cu transportul informației prin cablu. Mesajele sunt vehiculate prin rețea în baza unui protocol specific numit SMTP3 (Simple Mail Transfer Protocol). Acesta definește regulile schimbului de mesaje electronice între serverele SMTP extreme.

II.2 Comerțul electronic

Pentru cei mai mulți, termenul comerț electronic reprezintă efectuarea cumpărăturilor online, în WorldWideWeb. Totuși, comerțul electronic E-Commerce este mai mult decât procesul de cumpărare/vânzare de produse și servicii. Acesta poate să cuprindă multe alte activități, cum ar fi: schimburi și negocieri efectuate între companii, procese interne ale companiilor pe care acestea le desfãșoară ca suport pentru activitățile de cumpãrare/aprovizionare, vânzare, angajări sau planificare. De asemenea comerțului electronic i se implică transferul de documente, de la contracte sau comenzi, până la imagini sau înregistrări vocale.

În anii 1990 compania IBM, printr-o campanie publicitară, a făcut popular și termenul echivalent Electronic Business. Termenul de "e-business" a fost folosit pentru a defini utilizarea tehnologiilor Internet pentru îmbunătățirea și transformarea proceselor cheie dintr-o afacere. În definiția dată de IBM, e-business reprezintă o modalitate de "acces securizat, flexibil și integrat pentru desfășurarea diferitelor afaceri prin combinarea proceselor și sistemelor care execută operații de bază ale afacerilor cu cele ce fac posibilă găsirea informațiilor pe Internet".

Este foarte important să se inteleagă că afacerile online nu se limiteaza doar la vânzarea produselor prin intermediul Internetului. Afacerile electronice presupun menținerea contactelor cu furnizorii, cu posibilii parteneri de afaceri, dar și cu clienții, promovarea produselor și/sau serviciilor oferite folosind mijloace electronice.

II.2.1 Categorii de comerț electronic

– business-to-consumer în care companiile vând produse și servicii consumatorilor individuali;

– business-to-business unde companiile vând produse și servicii altor companii;

– procese de business la care companiile mențin și folosesc informații pentru a identifica și evalua clienții, furnizorii și angajații; în același timp, partajează aceste informații, în mod atent controlat, cu clienții, furnizorii, angajații și partenerii de afaceri;

– consumer-to-consumer unde participanții de pe o piață online pot să își vândă/cumpere reciproc bunuri;

– business-to-government în companiile poaniile pot vinde bunuri și servicii agențiilor guvernamentale.

În cazul comerțului electronic există avantaje atât pentru vânzator cât și pentru cumpărător. Pentru vânzător sunt următoarele:

– dispariția limitelor geografice de vânzare;

– publicitatea online poate atinge publicul țintă mai ușor;

– dezvoltarea de noi produse se poate realiza mai ușor în concordanța cu cerințele consumatorului;

– adaptarea la schimbări este mai rapidă;

– disponibilitatea informațiilor despre clienți;

– economii la vânzarea produsului;

– îmbunătățirea relațiilor cu clienții;

– reducerea erorilor prin automatizarea proceselor de plată;

– operabilitate 24 ore pe zi, 7 zile pe săptămână.

Pentru cumpărător, comerțul electronic aduce următoarele avantaje:

– timpul redus de acces la produs;

– identificarea mult mai ușoară de furnizori și parteneri de afaceri;

– economii la cumpărarea prosusului;

– negocierea prețurilor se face mai ușor;

– scăderea costurilor tranzacțiilor prin creșterea vitezei de transfer a informației;

– distribuirea online pentru produse digitale;

– lucrul la distanță;

– accesul la produse/servicii din zone aflate la distanță(exemplu: învățământ la distanță).

II.2.2 Modele de Comerț Electronic

Analizând aplicațiile curente dezvoltate pe Internet, identificăm următoarele modele de afaceri în comerțul electronic:

– magazin electronic (e-shop): un magazin electronic se implementează prin intermediul unui site Web; acesta este gestionat de o companie, pentru marketingul și vânzările propriilor produse și servicii. Minimal, conține catalogul de produse sau servicii cu descrieri tehnice și comerciale pentru fiecare poziție din catalog. Aceste descrieri sunt gestionate în general de un Sistem de Gestiune al Bazelor de Date (SGBD). Sistemul de Gestiune al Bazelor de Date, se va ocupa cu stocarea și manipularea datelor și cu oferirea posibilităților de acces la date. Varianta medie conține facilități pentru preluarea comenzilor (prin e-mail sau forme interactive pe care le vor completa clienții), iar varianta extinsă cuprinde și posibilitatea efectuării on-line a plății (prin cărți de credit sau alte variante electronice).

– aprovizionarea electronică (eProcurement): pentru procurarea bunurilor și serviciilor, marile companii și autorități publice organizează licitații. Prin publicarea pe Web a specificațiilor ofertei, scade atât timpul cât și costul de transmisie, mărindu-se și numărul de firme care iau parte la licitație. Astfel, crește concurența și scade prețul.

– magazin electronic universal (eMall): ca și în lumea reală, magazinul electronic universal este o colecție de magazine electronice, reunite sub o umbrelă comună și care, în general, acceptă metode de plată comune.

– piața unui terț (3rd party marketplace): se apelează la o interfață utilizator pentru catalogul de produse al companiei, interfață ce aparține unui terț (în general, furnizor de servicii Internet sau o bancă). Această metodă are avantajul că interfața este unică pentru mai mulți producători, utilizatorii fiind familiarizați cu utilizarea ei.

– comunități virtuale (virtual communities): valoarea cea mai importantă a unei comunități virtuale este dată de către membrii săi (clienți sau parteneri), care adaugă informații proprii peste un mediu de bază furnizat de companie. Fiecare membru poate oferi spre vânzare produse sau servicii sau poate adresa cereri de cumpărare a unor produse sau servicii. Calitatea de membru al unei comunități virtuale presupune plata unei taxe.

– furnizor de servicii cu valoare adăugată pentru canalele de comerț electronic (value chain service provider): furnizorii de servicii sunt specializați pe funcții specifice, cum ar fi asigurarea logisticii, plata electronică sau expertiza în managementul producției și a stocurilor. Plata acestor servicii se face pe baza unor tarife sau a unei cote procentuale.

– platforme de colaborare: platformele de colaborare cuprind un set de instrumente și un mediu informațional pentru colaborarea între companii. Acestea pot adresa funcții specifice, cum ar fi concepția sau proiectarea în colaborare. Câștigurile provin din managementul platformei (taxa de membru sau taxa de utilizare), și din vânzări de instrumente specializate (pentru design, workflow și gestiunea de documente). Prin workflow se înțelege fluxul de documente, care implică două entități: partea pasivă (documentele) și partea activă (deplasarea acestor documente).

– brokeraj de informații și alte servicii: exemplele cuprind cataloage de clienți clasificați pe profil, vânzarea de oportunități de afaceri, consultanță în domenii specializate. O categorie specială o constituie serviciile de încredere furnizate de autoritățile de certificare sau de notariatele electronice.

II.2.3 Arhitectura și dispozitivele unui Sistem Electronic de Plăți

Un sistem electronic de plăți se referă la totalitatea obiectelor care conlucrează pentru asigurarea plății tranzacțiilor ce se efectuează. Sunt implicate, în general, trei entități care interacționează: o banca B, un cumpărător C și un vânzător V. Sistemul electronic de plăți conține și o mulțime de protocoale care permit cumpărătorului C să facă plăți către vânzătorul V. Sistemele electronice de plăți pot fi privite într-o structură ierarhică pe nivele, derivate din arhitectura sistemelor ISO-OSI .

Nivelul utilizator constă din mulțimea utilizatorilor și a tranzacțiilor care au loc între aceștia. Utilizatorii sunt grupați după diverse roluri, după modul în care interacționează în relațiile de afaceri dintre ei: cumpărătorul, vânzătorul, emitentul de bani electronici (banca), etc.

Nivelul sistem: constă din mulțimea entităților fizice și a relațiilor care se stabilesc între ele. Entitățile pot juca unul dintre următoarele roluri: purtător de bani electronici sau registru de casă.

Există mai multe tipuri principale de dispozitive folosite:

– portofelul electronic: este folosit de către cumpărător pentru a stoca banii electronici. Există următoarele configurații fundamentale:

o calculator de mână (hand-held computer): reprezintă un calculator de dimensiuni reduse aflat în posesia clientului. Băncile sunt neliniștite de controlul total al utilizatorului asupra resurselor dispozitivului de plată. Conectarea la punctele de acces ale SEP se face de obicei printr-o legătură serială infraroșu.

– cartela inteligentă (smartcard): constă dintr-un cip încorporat într-o cartelă de plastic. Spre deosebire de o cartelă de credit obișnuită, un smartcard dispune de un microprocesor. Comunicația cu punctul de acces se face prin contact direct cu cititorul de cartelă. Utilizatorul nu are acces la resursele hard și soft, fapt care avantajează băncile. Este imposibilă deschiderea smartcard-ului și efectuarea unui reverse-engineering (adică o metoda de a afla modul în care a fost construită cartela prin dezasamblarea sa și parcurgerea în sens invers a pașilor care se presupune că s-au urmat la creare).

– portofel electronic cu observator: structura formată din două calculatoare: calculatorul clientului, prin care acesta comunică cu punctul de acces al SEP, și un calculator al băncii, încorporat în cel al clientului, care previne dubla cheltuire a banilor electronici.

– punctul de vânzare (POS): este folosit de către vânzător pentru a stoca banii electronici temporar. Din punct de vedere tehnic, are interfețe atât serială, prin infraroșu sau wireless (local sau prin GSM/GPRS sau CDMA) cât și un cititor de smartcard/card magnetic.

– distribuitorul de bani electronici: dispozitivul prin care se încarcă bani electronici în portofelul electronic al cumpărătorilor. Moduri de implementare:

– distribuitor cont-bani electronici: soluție care permite incrementarea valorii din portofel, pe baza retragerii unei sume de bani reali din contul deschis de cumpărător.

– distribuitor carte de credit-bani electronici: permite incrementarea valorii din portofel pe baza creditării cumpărătorului de către o casă de credit.

– distribuitor numerar-bani electronici: permite incrementarea valorii portofelului prin colectarea de la cumpărător a unei sume cash.

II.3. Studiu bibliografic

Dacă tot suntem la capitolul internet putem lua ca exemple două pagini online care au mare succes momentan în România, www.emag.ro figura 2.1 și www.cel.ro figura 2.2. Amândoua pagini au o gamă largă de produse dar și subdomeniul telefoane mobile care l-am ales pentru pagina noastră la capitolul aplicație practică. Ele prezintă meniul principal de produse în stânga. Paginile ca și design nu sunt foarte încărcate, culoarea de fundal este albă, celelalte care ne sar în ochi și atrag atenția sunt culorile mai stridente cum ar fi roșu sau portocaliu care sunt reduceri, oferte promoționale, cele mai vândute produse dar nu în ultimul rând butonul adaugă in coș.

Figura 2.1

Figura 2.2

III. HTML

Cu ajutorul limbajului HTML (Hyper Text Markup Language) poți construi pagini web nu foarte pretențioase însa reprezintă un început pentru realizarea site-urilor profesionale. Reprezintă de fapt limbajul pe care browserele de internet îl înțeleg și cu ajutorul lui pot fi afișate paginile web.

În limbajul html putem specifica toate informațiile necesare pagini; dacă textul este subliniat sau îngroșat, în ce poziție trebuie introdusă o poză. Limbajul conține și informații precum autorul paginii, informații structurale despre cum este împărțit documentul pe segmente, liste, paragrafe dar cel mai important, conține informațiile care permit legarea documentului html de altul de acest tip formând astfel pagina. Formatul se poate edita cu editor de text simplu precum Notepad oferit de Windows. Majoritatea aplicațiilor de mail folosesc un astfel de editor html, însă folosirea acestui tip pentru a trimite mailul poate fi interpretată de multe ori ca o încălcare a securității si ele ajung să fie blocate sau catalogate spam de programul de email sau serverul de exchange. Și prin alte tehnologii de codare mai avansate precum PHP, ASP sau JSP se pot genera fișiere de tip html.

Tagurile HTML

Tag-urile nu sunt altceva decât niște marcaje sau etichete pe care limbajul HTML le folosește alături de texte pentru a ajuta browser-ul de internet să afișeze corect conținutul paginii web.

Aceste tag-uri pot fi de două feluri:

– taguri pereche, un tag de început și unul de încheiere. Exemple: <HTML> și </HTML>, <TITLE> și </TITLE>, <HEAD> și </HEAD>

– taguri singulare care nu au un tag de încheiere, ca exemplu: <HR>, <BR>

Să vedem tag-urile de bază pe care trebuie sa le conțină un document HTML:
<HTML> – cu acest tag începe orice document HTML. Prin folosirea acestui tag îi spunem browser-ului că este vorba de un fișier HTML pentru a îl putea afișa.

<HEAD> – între aceste tag-uri sunt trecute, pe lângă titlul paginii, diverse informații folositoare pentru browser-ul de internet, informații pe care le vom descoperi pe parcursul acestui curs.

</HEAD> – acesta este tag-ul de încheiere al tag-ului <HEAD>

<TITLE> – cu ajutorul acestei perechi de tag-uri vei putea da un titlu documentului tău. Astfel, textul pe care îl vei scrie între aceste tag-uri va fi afisat in bara de titlu a documentului.

</TITLE> – este tag-ul de încheiere al tag-ului <TITLE>. Arată sfarșitul titlului documentului.

<BODY> – odată cu acest tag începe conținutul paginii web. Tot ce vei scrie între tag-urile <BODY> și </BODY> va fi afișat, de către browser, pe ecranul monitorului.

</BODY> – îi spui browser-ului că ai terminat de scris conținutul paginii. Tot ceea ce vei scrie după acest tag nu va mai fi afișat.

</HTML> – este tag-ul de încheiere al tag-ului <HTML>. Codul oricărui document se termină cu acest tag.

Tag-urile pot fi scrise atât cu litere mari cât și cu litere mici. Să nu uităm atunci când scriem codul unei pagini web să inchidem toate tag-urile pe care le-am deschis. Pentru a fi sigur că nu uităm încearcăm să ne obișnuim să scriem după fiecare tag și tag-ul de încheiere, scriind apoi conținutul între ele. O altă soluție pentru a nu uita să inchidem vreun tag, este să folosim la scrierea codului, un editor HTML, atunci când vrei să folosești un tag, editorul va scrie automat și tag-ul de încheiere.

Iată cum arată codul HTML:

Am folosit tag-ul <BR> pentru a trece pe urmatorul rând. Astfel îi spunem browser-ului ce va fi scris după <BR> va trebui afișat pe urmatorul rând. Tag-ul <BR> nu are un tag de închidere. După ce am scris codul, va trebui să salvăm documentul cu extensia *.html sau *.htm. Tag-ul <P> vine de la cuvântul paragraf și se deosebește de tag-ul <BR> prin faptul că prin utilizarea lui nu numai că se trece pe următorul rând, dar se și lasă un rand liber între texte.

Atributele HTML

Atributele pot fi definite ca niște proprietăți ale tag-urilor. Ele se pun numai în tag-ul de început. Dacă un tag nu are nici un atribut, atunci browser-ul va lua în considerare valorile implicite ale tag-ului respectiv. Să urmărim câteva exemple.

Atributul BGCOLOR care se folosește cu tag-ul <BODY> indică ce culoare va avea fondul viitoarei pagini web. Fondul unei pagini web are în mod implicit culoarea albă, dar să spunem că vrem ca fondul paginii noastre să fie portocaliu. În acest caz vom folosi pentru atributul BGCOLOR codul culorii orange: #FF9900

Acum să modificăm și textul paginii noastre. Mesajul " Nagel Flaviu Lucrare Licență." să spunem, de exemplu, că am vrea sa fie scris cu albastru in loc de negru, care este valoarea implicită și să fie scris cu litere mai mari decât restul textului. Pentru a scrie astfel textul, vom folosi tag-ul FONT însoțit de unele atribute astfel:

Textul următor " Mai am mult până termin această pagină.", dacă dorim doar sa aiba culoarea roșie, vom folosi numai atributul COLOR pentru tag-ul <FONT>, restul proprietăților fiind cele implicite:

Atunci când vrem să trasăm o linie, folosim tag-ul <HR> care vine de la Horizontal Rule și înseamna linie orizontală. Daca nu ii asociem acestui tag nici un atribut atunci vom obține o line orizontală cât lățimea paginii web.

Dacă vrem să folosim propriile noastre proprietăți pentru trasarea unei linii orizontale vom apela la atributele tag-ului care sunt următoarele: ALIGN – pentru alinierea liniei, COLOR – pentru culoarea liniei, SIZE – pentru grosimea liniei și WIDTH – pentru lungimea liniei.

Pentru a trasa o linie roșie (COLOR="#FF0000"), cu o lungime de jumatate din valoarea implicită (WIDTH="50%") și puțin mai groasă decât cea implicită (SIZE="5%") ce va fi aliniată în centrul paginii (ALIGN="center"), vom folosi următoarea linie de cod:

Acum sa folosim cele două linii de mai sus in cadrul paginii noastre. Linia simpla o vom folosi la sfârșit, iar linia roșie o vom folosi după mesajul "Bine ai venit!". Noul cod HTML al paginii noastre va fi urmatorul:

Atunci când avem nevoie sa folosim un titlu în cadrul paginii noastre web putem apela la tag-urile <H1>, <H2>, <H3>, <H4>, <H5> și <H6>. Cu ajutorul lor, care au și tag-uri de încheiere, vom scrie titlurile din cadrul paginilor noastre web. Astfel în cadrul codului HTML vom folosi tag-ul <H1>, de exemplu, urmat de textul titlului, iar la sfârșit vom folosi tag-ul de încheiere </H1>. Tag-urile <H1> și </H1> permit scrierea unui titlu cu caracterele cele mai mari in timp ce textul încadrat de tag-urile <H6> și </H6> va fi afișat cu caracterele cele mai mici. Tag-urile acestea accepta atributul ALIGN cu ajutorul căruia titlul va putea fi aliniat la stânga, la centru sau la dreapta.

La tipul fontului, la fel ca și la culori, este bine să folosești un font care se află pe majoritatea calculatoarelor, pentru că dacă folosești un font mai putin utlizat, multi utilizatori nu vor putea vedea textele din cadrul paginilor tale cu același font. Cele mai folosite fonturi pentru paginile web sunt următoarele:

Acest text a fost scris cu fontul "arial"
Acest text a fost scris cu fontul "times new roman"
Acest text a fost scris cu fontul "courier new"
Acest text a fost scris cu fontul "verdana"
Acest text a fost scris cu fontul "helvetica"

Dacă dorim ca textul nostru să fie scris cu caractere îngroșate, folosim perechea de etichete <B> și </B>; pentru ca textul să fie scris cu caractere italice, folosim perechea de etichete <I> și </I> iar ca textul să fie subliniat, perechea <U> și </U>:

<HTML>
<HEAD>
<TITLE> Legaturi catre site-uri</TITLE>
</HEAD>
<BODY>
<CENTER>
<B> Legaturi catre site-uri </B>
<BR><A HREF=" http://www.gsmarena.com " TARGET="_blank" TITLE="GSMArena">GSMArena</A>

<BR><A HREF="http://www.compare-cellphones.org" TARGET="_blank" TITLE="Compare CellPhones">Compare CellPhones</A>

</CENTER>
</BODY>
</HTML>

Liste în html

Pentru a putea face o listă neordonată trebuie să folosim tag-urile <UL> și </UL> denumirea acestor tag-uri vine de la unordered list (lista neordonata). Fiecare element al listei trebuie introdus de tag-ul <LI>. Ca să vedem cum arată codul HTML pentru lista de procatori de telefon:

Cu ajutorul atributului TYPE, putem schimba cercul plin din fata fiecărui element. Acesta este folosit în mod implicit atunci când folosim o listă neordonată. Astfel, prin atribuirea unei valori atributului TYPE, vom putea face ca elementele listei să fie precedate de un patrat sau de un cerc gol. Listele ordonate se formează cu ajutorul tag-urilor <OL> și </OL>, denumirea acestora venind din limba engleză ordered list. La fel ca și la listele neordonate, fiecare element trebuie introdus de tag-ul <LI>. Putem folosi pentru litere mari: <OL TYPE=A>, litere mici <OL TYPE=a>, cifre romane mici <OL TYPE=i> sau cifre romane mari <OL TYPE=I>. Pe lângă atributul TYPE, pentru tag-ul <OL> mai putem folosi și atributul START. Acest atribut este folosit atunci cand vrem sa schimbăm valoarea inițială, de exemplu dacă vrem să începem de la 4, în cazul numerelor, sau de la D, în cazul literelor mari, etc. Forma generală a acestui atribut este START=n, noi am avea START=4.

Crearea Tabelelor în html

Pentru a crea un tabel, trebuie să folosim tag-urile <TABLE> și </TABLE>. Tot ce va fi scris între aceste tag-uri va forma un tabel. După tag-ul <TABLE> urmează tag-ul <TR> care vine de la Table Row (rândul tabelului) și reprezintă introducerea unui rând în cadrul tabelului. Tot ce va fi scris între tag-urile <TR> și </TR> va forma un rând al tabelului. După crearea unui rând, trebuie să adăugăm în cadrul acestuia câteva celule, cu ajutorul tag-urilor <TD> și </TD>. Să vedem cu ajutorul unui exemplu cum putem adăuga un tabel în cadrul unei pagini web despre descrierea unui telefonului.

În exemplul de mai sus am realizat un tabel, dar fără nici o linie. Pentru ca liniile unui tabel să fie vizibile tag-ul <TABLE> trebuie sa fie insosit de atributul BORDER avand valoarea egală cu cel puțin 1. În plus, putem schimba culoarea liniilor unui tabel folosind atributul BORDERCOLOR însotit de codul culorii dorite:

<TABLE BORDER="1" BORDERCOLOR="#FF0000">

Pentru a avea decât o singură linie vom folosi atributul CELLSPACING cu valoarea 0. Acest atribut specifică distanța dintre celulele unui tabel. Alături de acest atribut putem folosi și atributul CELLPADDING care indică distanța dintre marginile celulelor și textul din cadrul acestora.

Pentru a stabili dimensiunea unui tabel, unui rând sau a unei celule, folosim atributele WIDTH pentru lațime și HEIGHT pentru înălțime. Pentru alinierea datelor din cadrul tabelului folosim atributul ALIGN cu una dintre valorile left, center sau right. Pentru a alinia datele tabelului pe verticala folosim atributul VALIGN însoțit de una dintre valorile top, middle sau bottom. Pentru a schimba culoarea unei celule, unui rând sau chiar a întregului tabel folosim atributul BGCOLOR împreună cu codul culorii alese.

Capitolul Aplicație

Un magazin online este un site web destinat vănzării de produse si servicii. Produsele pot fi accesate sau cumpărate prin diverse modalități de plată. Se urmărește valorificarea produselor prin oferte speciale sau de reduceri, securitate și sigranță prin implementarea coșului de cumpărături dar și al autentificării utilizatorului. Se urmărește adăugarea căt mai multor modalități de plată: carte de credit, paypal, paysafecard și rambursare. Pagina noastră este dedicată tuturor persoanelor care doresc să achiziționeze un telefon mobil nou.

1. Instalare si accesare pagină

Pentru crearea paginii web am folosit aplicația WordPress, care este o platformă deschisă scrisă in limbajul PHP care folosește și bază de date pe sistemul MySQL. Aplicația se poate folosi local instalând XAMPP (Apache+MySQL+PHP+Pearl). În același timp downloadăm în format ZIP WordPress care trebuie să îl dezarhivăm intr-un folder nou creat în locația: \xampp\htdocs\NagelFlaviuCellShop. Pornim executabilul xampp_start.exe, după care Apache și MySQL, figura 1:

Fig. 1

După aceasta pornim Admin MySQL și creăm o noua bază de date, putem folosi utf8_unicode_ci – figura 2:

Fig. 2

Acum dacă introducem în browserul local adresa http://localhost/nagelflaviucellshop , numele folderului creat ajungem la fereastra de instalare a programului WordPress; selectăm limba maternă după care foarte important alegem baza de date (figura 3); deoarece pagina nu este online și rulează local nu este nevoie de o parolă pe baza de date. Completăm ultimele informații username, parolă , adresă de email și rulăm instalarea ca în figura 4.

Fig. 3

Fig. 4

Instalarea se execută în câteva secunde după care pe adresa http://localhost/nagelflaviucellshop/ avem pagina și din http://localhost/nagelflaviucellshop/wp-admin avem Dashboard-ul sau meniul de administrator de unde modificăm pagina.

Dacă în schimb chiar deținem o afacere, un magazin de telefoane mobile și dorim să creăm personal un site și să îl publicăm online recurgem la un furnizor care oferă dedicated web hosting. Am ales ca exemplu http://www.hostgator.com. După ce alegem planul dorit, ne alegem un domeniu care nu este deja ocupat, am ales http://nagelflaviucellshop.com. În tabul software/services avem Quickinstall (figura 5) care ne duce la același meniu de configurare ca în figura 4. Diferența fața de instalarea locală este ca pagina nu va putea fi accesibilă online abia peste câteva ore sau chiar o zi. Abia atunci putem să accesăm meniul admin și să începem să configurăm pagina.

Dacă tot suntem în meniul cpanel, putem acum să modificăm icoana care va apărea în browser lângă pagina noastră. Deschidem File manager, selectăm Web Root (public_html/www), apare o fereastră cu fișierele WordPress exact cum le avem local în folderul creat. Observăm fișierul favicon.ico care îl suprascriem cu o imagine creată de noi de dimensiune 16×16 sau 32×32 pixeli cu extensia *.ico. Icoana va apărea corespunzător în următoarele minute sau cel mult o oră.

Fig. 5

2. Configurare pagină

Pentru a configura pagina intrăm pe (http://localhost)nagelflaviucellshop.com/wp-admin, putem modifica limba selectată la instalare la Settings > Generall > Site Language > putem selecta Romană. Foarte important, dacă am achizionat un serviciu de web hosting, pentru a îmbunătăți aspectul WordPress ne permite să modificăm acum adresa pagini, tot la Setări > Generale > Adresa instalării WordPress/Paginii Principale: modificăm amăndouă setări din http://nagelflaviucellshop.com în http://www.nagelflaviucellshop.com pentru ca pagina noastră să apară cu "www."(figura 6) în față în browserul utilizatorilor care o accesează. Dacă se greșește aici pagina poate să nu mai funcționeze și trebuie să contactăm site-ul de la care am achiziționat serviciul de web hosting. La instalarea locală această introducere a "www." in fața link-ului nu este posibilă deoarece pagina rulează local. Pagina noastră în momentul de față arată ca în figura 7.

În meniul administrator avem opțiuni precum Plugins sau Appearence de unde putem instala mii de plugin-uri care aduc opțiuni și setări in plus paginii noastre, dar și teme care modifică design-ul paginii prin culori și setări predefinite de meniuri și pagini care vor fi incluse in pagina noastră. La plugins dacă suntem online trebuie să dezactivăm WP Super Cache deoarece acest plugin generează fișiere statice HTML care se folosesc la încarcarea paginii și oferă o viteză mult mai mare de acces în loc de scripturile PHP. Dacă nu dezactivăm si facem modificări la pagina, ele pot fi vizualizate abia peste câteva ore sau chiar o zi. După finalizarea paginii se poate reactiva înapoi după preferințele administratorului de site. WooCommerce – excelling eCommerce este un plugin care îl vom instala acum deoarece ne ajută să introducem ulterior produse, dar este mai mult necesar datorită modalităților de plată care le oferă; Plugins > Add Plugin > îl cautăm > Install > Activate. După care avem de făcut câteva setări de bază, Settings > Base Location și Selling Location alegem România, la Currency alegem Lei și Currency Position Right.

Fig. 6

Fig. 7

În continuare intrăm la pages și creăm o pagină Contactează-mă, redenumin paginile create de plugin-ul woocommerce în Telefoane, Coș Cumpărături, Contul meu. De la submeniul Appereance > Menu, putem crea meniul principal, figura 8 în care adăugăm paginile dar și selectăm ordinea dorită.

Fig.8

Putem adăuga și un custom link, care îl putem denumi Acasa și care linkul să fie adresa paginii noastre, astfel cănd dăm click pe Acasa ajungem la pagina principală. Tot la meniu putem crea un meniu de top cu butoane custom link care să ne trimită pe alte pagini cum ar fi www.gsmarena.com sau www.compare-cellphones.org unde utilizatorii se pot informa în detaliu despre toate specificațiile telefonului care doresc să îl cumpere, figura 9 . Putem modifica logo-ul cu un text diferit sau o imagine, setările de footer stănga sau dreapta. Pentru slide-uri pe pagina principală avem nevoie din nou de un plug-in auxiliar, deoarece WordPress nu oferă acest lucru, am folosit Easing Slider. Pozele care le încărcăm trebuie să fie toate aceeași mărime, de preferabil sa le edităm cu un editor de imagine care ne permite să adăugăm și text peste imagine permițând fundalul textului să fie transparent să nu stricăm aspectul imaginii; aici am folosit pixlr.com un editor online. Acum pagina noastră Acasa arată ca în figura 10.

Fig 9

Fig. 10

Edităm pagina nou creată Contactează-mă, adaug o poză cu mine și câteva rănduri de text, după care instalez un nou plugin, Contact Form 7 care îmi oferă posibilitatea de a adăuga un formular de contact prin care utilizatorii îmi pot trimite un mail. Este ușor de modificat în cod HTML cămpurile originale ale plugin-ului din engleză în română: Your name > Numele tau; Message > Mesaj dar și erorile care pot apărea dacă nu introducem corect adresa de mail sau lăsăm câmpuri obligatorii necompletate: Email Adress is not valid > Adresa de email nu este valida sau Please fill out all the required fields > Va rugam completati campurile obligatorii. Putem adăuga la sfârșit de pagină și o adresă de pe googlemaps. Tot ce trebuie să facem este să intrăm pe googlemaps căutăm Timișoara, jos în stânga avem opțiuni Share sau Embed map care ne permite să alegem mărimea dorită dar si poziția exactă după care avem textul html care trebuie să îl introducem la noi în pagină. Dacă modificăm valoarea witdh="600" în ="100%" harta va fi cât pagina noastră, dacă micșorăm dimensiunea ferestrei de navigare harta se v-a ajusta automat. Pagina Contactează-mă arată acum precum în figura 11.

Fig. 11

3. Adăugare produse

În primul rând trebuie să mergem la Setări generale unde am lăsat Site Language pe engleză și să modificăm selecția pe română, figura 12. Acum sus apare și actualizare plugin woocommerce în română. În acest fel acum dacă adaugăm produse la pagina noastră afișajul produsului va fi pe română, la fel și opțiunile coș cumpărături sau plată. Altfel toate butoanele rămâneau pe engleză.

Fig 12

Înainte de a adăuga produse recomand adăugarea categoriilor de produse dacă acestea sunt cunoscute, la fel putem adăuga și subcategorii. Adăugăm categoria Producător cu subcategoriile Samsung, Apple etc. Important după ce scriem numele subcategoriei să alegem la opțiunea Părinte categoria de care face parte. Adăugăm și alte categorii: Sistem de operare cu subcategoriile Android, IOS etc., Cameră MegaPixeli cu subcategoria sub 5MP, între 5-10MP și mai adaugăm categoriile Diagonală Display și preț. După ce am termimat adăugarea lor putem cu drag and drop să poziționăm în ce ordine dorim să apară deoarece momentan sunt afișate în ordine alfabetică. Dorim Categoria Producător să apară prima, Preț a doua, dar modificăm și ordinea subcategoriilor de exemplu pentru preț: sub 1000 RON, între 1000-2000 RON și peste 2000 RON. Dacă vizualizăm o subcategorie în momentul de fața meniul arată ca în figura 13.

Fig. 13

Le putem acum adăuga ca și Widget de la Aspect > Piese > Woocommerce categorii de produse în paginile dorite, vezi figura 14. Sau chiar ca meniu drop-down din Aspect > Meniu, opțiuni ecran selectăm categorii de produse și adăugăm toate categoriile sub elementul telefoane, vezi figura 15.

Fig. 14 Fig. 15

Din meniul Administrator selectăm Produse și adăugăm primul produs. Am ales Samsung GALAXY S6 fiind ultimul telefon mobil apărut pe piață în momentul de față, care prezintă un adevărat interes pentru utilizatori. Scriem numele și sub avem pagina unde afișăm descrierea produsului, aici am introdus specificațiile telefonului. Jos în meniu alegem Produs Variabil deoarece dorim să-l oferim în două culori. Acum la Atribute introducem cele două culori separate prin simbolul "|" după care salvăm atributele, figura 16.

Fig. 16

La Variații dăm click pe Link all variations, care ne va introduce toate combinațiile posibile de produse, noi avem doar două, cularea alb și negru. Dacă avem de exemplu un tricou, introduceam la Atribute: atributul Culoare Alb|Negru|Verde și încâ un atribut Mărimea S|M|L|XL, la folosirea opțiunii Link all variations am fi avut 12 produse respectiv fiecare culoare asociată cu mărimea. Revenind la editare, adăugăm imaginea implicită a produsului rezultat din atribute, introducem prețul, greutatea și dimensiunea. La fel introducem și pentru culoarea albă; la urmă avem setarea implicită pe care ajunge utlizatorul la accesarea produsului, ea fiind culoarea neagră; vezi figura 17.

Fig. 17

Acum introducem în stânga jos imaginea reprezentativă a produsului dar și cele pentru galeria de imagini. Toate imaginile care le-am adăugat rămân în biblioteca, de aceea este de recomandat să le adăugăm pe rând cum adăugăm produsele pentru a ne ușura munca având un ansamblu pe ultimele imagini adăugate. Să nu uităm sus în dreapta să salvăm produsul creat după care putem să îl vizualizăm, vezi figura 18.

Fig. 18

4. Coș cumpărături și plată

Dacă dorim să achiziționăm produsul, apăsăm butonul Adaugă în Coș; eu am setat ca opțiunea să sară la pagina Coș Cumpărături. Prin butonul Continuați cumpărăturile ajungem din nou la produsul ales. Dacă modificăm cantitatea sau ștergem un articol din coș avem Actualizează coș, două opțiuni de livrare și Finalizare comandă. Vezi figura 19.

Fig. 19

Pagina de checkout arată ca în figura 20, aici cumpărătorul trebuie să completeze toate câmpurile obligatorii; dacă este un user nou mai apare și o fereastră pentru parolă după care poate finaliza comanda. La setările pluginului Woocommerce > Setări > Plasează comanda sunt activate opțiunile Transfer bancar, cec și rambursare unde am introdus textul "Este o pagină web creată pentru lucrarea de disertație, produsele nu se pot comanda! Mă scuzați pentru deranjul creat.". Nu am introdus un cont bancar 🙂 , oricare din opțiuni cumpărătorul va alege, va ajunge pe o pagină asemănătoare cu figura 21. Paypal nu funcționează cu pluginul nostru pentru moneda în lei. Tot la opțiunile pluginului avem Comenzi unde putem vizualiza comenzile deschise, de unde le putem procesa, finaliza sau șterge. Avem chiar și o opțiune rambursare(refund) prin care putem restitui banii cumpărătorului, vezi figura 22.

Fig. 20

Fig. 21

Fig. 22

Anexă

Anexă