Sunteți pe pagina 1din 382

Prof.dr.

Lucia Rusu
lucia.rusu@econ.ubbcluj.ro

Figura 3.4.Procesul iterativ de dezvolare a ste-ului web


]

[1]

Co epte i paradig e CMS


Managementul coninutului (CM- Content Management = procesul
de aprovizionare sistematic i structurat, de creare, prelucrare,
administrare, prezentare, procesare, publicare i reutilizare a
coninutului
Managementul documentelor (DM- Document management)
nseamn crearea, organizarea, utilizarea, manipularea i dispoziia
documentelor n scopuri organizaionale
Sistem de management de coninut (CMS- Content Management
System), este un grup software sau o suit de aplicaii i instrumente
care permit o organizaie pentru a crea, edita, revizui i publica textul
electronic.
Managementul site-urilor Web (WSM) descrie mulimea de activiti
diverse legate de publicarea coninutului pe WWW, ordinea autorilor,
mentenana unei structuri consistente, analiza traficului i optimizarea
site-ului.

[1]

Co epte i paradig e CMS (2)


Managementul coninutului firmei (ECM Enterprise Content
Management) este termenul DM care descrie tehnologiile utilizate de
organizaii pentru capturarea, gestionarea, stocarea i controlul
coninutului la nivel de ntreprindere, inclusiv documente, imagini,
mesaje e-mail, mesaje instant, video, i altele.
Sistemul de Management al globalizrii (GMS- Globalization
Management System) este aplicaii software enterprise care ofer
infrastructura pentru a controla procesul complex de adaptare,
traducere i meninerea toate de coninut i informaii la nivel mondial
Specific corporatiilor

[1]

CMS o soluie ola orativ


Actori
Content author pentru crearea i editarea coninutului.
Editor pentru modificarea coninutului
Publisher pentru oferirea coninutului pentru utilizare.
Administrator gestioneaz drepturile de acces la fiiere
i directoare n concordan cu permisiunea atribuit la
nivel de utilizator/ grup de utilizatori si rolul fiecaruia
Consumer, viewer or guest- persoan care citete sau
utilizeaz ntr-o anume manier coninutul publicat
[Brow,2001].

[1]

CMS o soluie ola orativ 2


Securitatea
Presupune:
stabilirea unei conexiuni sigure,
encriptarea datelor pentru stocare,
realizarea unei scheme de autentificare i autorizare
Autentificarea utilizatorilor
prin logare, folosind un form HTML
prezena cookie-urilor i validarea datelor.
Sesiunile realizate cu ajutorul cookie-urilor
utilizatorul a fost identificat, i se repartizeaz o cheie stocat ntrun cookie -Session. de ctre browser
asigur continuitatea i permite autentificarea de la pagin la
pagin.
cookie ID care are rolul de a reine numele utilizatorului

[1]

Componentele CMS

a. Date i informaii
b. Coninutul Content

coninut,
layout
structur

c.abloanele Templates
d. Procesarea coninutului (Content process)

creare,
control,
eliberare,
publicare,
Arhivare

Managementul coninutului (Content management)


Managementul coninutului web (Web content
management)

Figura 3.4.Procesul iterativ de dezvolare a ste-ului web


]

[1]

Componentele CMS (2)


Workflow (flux de lucru) este termenul utilizat pentru a
descrie procesul pe care l parcurge un document.
Grupuri de utilizatori

redactori,
managerul de coninut content manager ,
managerul de portal (portal manager)
administrator.

Statutul documentelor - stri pe durata workflow:

n lucru,
eliberat,
publicat,
arhivat.

[1]

Componentele CMS (3)


Structur minimal:
asset management,

componenta de workflow,
gestiunea utilizatorilor i a drepturilor,
Interfee
APIs.

Assetmanager este compus din:


depozit,
interfaa asociat,
conectori spre alte sisteme,
modul de workflow
modul de adminsitrare.

Assetmanager
Depozitul conine baze de date i fiiere care stocheaz

coninut, deine fiiere de configurare i de administrare


precum i baze de date ce specific modul de funcionare i
procedura de publicare.
Interfaa

permite sistemului de colectare, publicare, workflow i de


administrare s acceseze i s utilizeze depozitul.
pune la dispoziie funcii de input, de accesare i de output de
componente i de fiiere, sau date care sunt stocate n depozit.

Conectori spre alte sisteme: asigur trimiterea i primirea de

informaii din depozit,


modulul workflow introduce fiecare component sau
publicaie ntr-un ciclu de via definit
modul de administrare permite configurarea CMS.

Modelul de coninut
similare cu bazele de date, respectiv DTD-uri pentru

XML, determinnd structura fiecrei componente n


parte i modul de legare a componentelor din cadrul
CMS.
se specific:numele fiecrei clase de componente,
elemetele permise pentru fiecare component, tipul
elementului i valorile valide ale fiecrui element
respectiv structurile de acces n care particip fiecare
clas sau instan de component.
Stocarea coninutului: baze de date relaionale, fie
baze de date orientate obiect (XML)

Ma age e tul i i lul de via al o i utului


site-urilor
Managementul web site-ului conine un subset de

activiti, definite ca i meninerea sub control a


structurii site-ului, asigurarea unor apariii commune
a paginilor correspondente, fr a depinde de
coninutul acestora [Buraca,
4].
Sub-structura unui site- modul n care este nteleas
legtura dintre pagini i modul n care interacioneaz
cu modulele server-side (servlets, pagini JSP, scripturi
etc).
Structura site-ului descrie modul n care paginile
sunt cuprinse n site i cum sunt legate ntre ele.

graf orientat
structura arborescent

Ci lul de via al o i utului


Abordari:
Bob Boiko (2002) :

1. colectare,
2. management (fluxuri de lucru, aprobare, controlul versiunilor,
repozitoriu),
3.publicare.
Gerry McGovern
, le numete: creare, editare i publicare.
JoAnn Hackos (2003) descrie patru componente: coninut,
repozitoriu, asamblare/stabilirea legturilor i publicare
Etapizarea comuna:

Creare,
management,
integare,
negociere
distribuie.

Categorii de CMS
Criterii: flexibilitatea, granularitatea, integrarea
3 tipuri de CMS:
sisteme de tip cutie (Box systems);
platforme (medii) de dezvoltare;
sisteme atotcuprinztoare all-in-one solutions)
CMS pentru comer electronic sunt grupate n 4 mari categorii

[Humeau & Jung,2013]

nivelul 4: corespunde proiectelor mici

cu cifra de afaceri realizat


on-line cuprinsa intre i milion de euro
nivelul 3: proiecte de dimensiuni medii ( cu cifra de afaceri
realizat on-line cuprinsa ntre i milioane de euro
nivelul 2: proiecte mari, cu branduri cunoscute ( cifra de afaceri
realizat on-line intre i
milioane de euro
nivelul 1 corespunde "montrilor" care pot genera o cifra de afaceri
on-line de peste
de milioane de euro, pn la mai multe
miliarde de euro.

CMS open source


Java i PHP politica de open source. Platformele Java au

codul surs nchis (closed source), n timp ce platfomele


PHP sunt open source.
Soluiile Java se concentreaz pe site-urile mai mari, au trei
puncte-cheie:
viteza de back office, n special n cazul mai multor conexiuni

concurente;
costurile de licen i de serviciu mult mai mari (fa de PHP
care este mult mai accesibil);
gestionarea unui numr mare de referine SKU .

soluii de comer electronic mediul Java : Intershop, Hibris,

Demandware
Solutii PHP : Magento, Oxid esales, Rbd change , Drupal
commerce, Prestashop, etc.

Solutii de e-commerce
PrestaShop (Frana
simplu i ideal pentru dezvoltatorii web nceptori - nivelul 4.
Drupal Commerce este o soluie potrivit la nivelului 4,

necesitnd dezvoltatori avansai care cunosc deja Drupal.


RBS change este plasat ntre mijlocul nivelului 3 i nceputul
nivelului 2.
Magento ofer cea mai larg gam: de la Go SaaS de la nivelul 4
la nceputul nivelului 2 cu versiunile EE (Enterprise Edition).
X.commerce cuprinde aproape ntregul spectru, susinut de eBay.
Demandware este un caz atipic, un SaaS (Software as a Service),
nivel 1 pentru c modelul de plat al acesteia permite o
component variabil bazat pe cifra de afaceri a site-ului i se
ntinde de la mijlocul nivelului 3 pn la mijlocul nivelului 2.

CMS open source (3)


Intershop este o soluie Java pentru site-urile cu

conturi mari, (mijlocul nivelului 2 pn la nivelul 1).


Hybris este o soluie bazat pe Java i Oracle iar
datorit costurilor de licen i naturii tehnice a
produsului, este ncadrat n rangul 2.
CMS-urile open source se concentreaz pe
comunitatea de utilizatori care au necesiti bine
definite fa de managementul coninutului. Exemple:
Zope server de aplicaii pentru elaborarea CMS;
Joomla un CMS popular;
WordPress platform de publicare personal (Blog).

Drupal
Caracteristici:
Sursa deschis - Licentei Publice generale GNU 2 (GPL).
Cartea de colaborare permite setarea unei soluii colaborative i

autorizarea altor persoane s contribuie la coninutul.


URL- uri prietenoase deorece utilizeaz modul Apache
Module comunitatea Drupal deine multe module care furnizeaz
funcionalitate ce extinde baza Drupal
Personalizare mediul robust de personalizare la baza Drupal ofer
individualizare att coninutului ct i prezentrii, pe baza unor
preferine definite de utilizator.
Sistemul de permisie bazat pe rol ofer permisiuni rolurilor i apoi
grupurilor, precum i utilizatorii care fac parte dintr-un grup de rol.
Cutare - tot coninutul Drupal este indexat i poate fi cutat
Autentificarea utilizatorului local utiliznd o surs extern de
autentificare sau Open)D/ identificare deshis sau alt site Drupal.
Pentru utilizarea n intranet, Drupal se poate integra cu un server
LDAP.
Polls - modul care permite administratorilor i/ sau utilizatorilor s
creeze poll-uri i s le afieze pe diverse pagini.

Drupal (2)
Templating sistemul Drupal separ coninutul de prezentare i

permite controlarea aspectului i perceperea site-ului Drupal.


Comentarii postate- ofer un model de comentarii puternic ierarhic
Controlul versiunii
Creare bloguri prin suport API
Organizarea coninutului - Drupal export coninutul site-ului n
format RDF/RSS i permite oricrui agregator de tiri s navigheze
Agregatorul de tiri (RSS Feed)- Drupal are un agregator de nouti
puternic, ncorporat pentru citirea i postarea tirilor de pe alte site-uri.
Legturi permanente (perma link) asociate astfel nct oamenii se
pot conecta liber far s le fie team de legturi dezafectate.
Platform Serverul Apache sau IIS, cu suport Unix / Linux / BSD /
Solaris / Windows / Mac OS X -, poate funciona i pe platformele
Linux, BSD, Solaris, Windows i Mac OS X.

Drupal (3)
Independena bazei de date - Drupal cu MySQL, MySQL sau Drupal

cu MySQL i PostgreSQL, alte BD SQL


Multi-limbaj - prin integrarea cu alte instrumente de traducere
precum GNU gettext.
Analiza, monitorizarea i statistica nscrierea n jurnal i raportarea un jurnal de evenimente pentru a
fi revizuite
Administrarea pe baza web realizat n ntregime prin utilizarea
unui browser web,
Forumurile de discuii - site-uri dinamice ale comunitii.
Stocarea tocarea poate fi ajustata n timp real, n timp ce site-ul se
ncarc, poate fi i testata cu succes chiar n situaii de trafic intens.

Joomla
cel mai popular CMS pentru realizarea diferitelor aplicaii,
uurinei de utilizare i extensibilitate
disponibil gratuit, ns unele aplicaii sau componente compatibile n

Joomla trebuie pltite.


Tipuri de aplicatii :
Web-site-uri sau portaluri web,
Aplicaii intranet sau extranet;
reviste, ziare, sau publicaii online,
magazine virtuale,
site-uri de afaceri,
web site-uri sociale etc.

Joomla (2)
Panoul de control
Facilitati de acces la componente
Se pot crea user-i cu grade diferite de acces la meniu
configurarea global :
starea site-ului, mesaj de eroare de sistem,
numele site-ului, nregistrarea utilizatorilor, limb i ar,
setri referitoare la baza de date, server, descriere site, cuvinte
cheie, mail, etc.
Extensiile se stabilesc i se enumer n etapa de schiare a

coninutului.
Mamblog i AkoComment permit utilizatorilor s scrie
jurnale on-line bloguri i s primeasc feedback la cele
scrise sau la imaginile postate.

Joomla (3)
VirtueMart
specifica pentru un e-shop
ofer tehnologia co de cumprturi necesar achiziionrii
propduselor i permite gestionarea acestora imagini, descriere,
pre, disponibilitate, etc. .
configurat conform cerinelor: numrul lucrrilor expuse pe un
rnd , cmpuri care s apar la descrierea produsului nume,
pre, nouti , s nu arate numrul de exponate dintr-o categorie, s
afieze antetul, poziia curent de navigare, afiarea pe prima
pagin a dou lucrri aleator sub sintagma V propunem, moneda
EUR , metoda de expediere standard, configurat individual , etc.
permite efectuarea de cutri rapide sau avansate n toate
categoriile i dup mai multe criterii informaii legate de lucrri,
numele lucrrii, autor ,
drop-down list n pagina principal permite afiarea produselor n
funcie de categoria selectat din list, pentru selectie rapida a
produsului preferat.

Joomla (4)
Simple Image Gallery Plugin -manipularea unei galerii foto
JooMap asigur o hart dinamic a site-ului
Polls este un instrument care permite realizarea de mini-sondaje

on-line, necesare oricrei afaceri pe )nternet


Mass Mail- e-mail n mas potenialilor clieni sau clienilor
actuali, pentru a-i informa asupra ofertei firmei, asupra unei
lucrri nou aprute sau alte informaii de interes pentru
segmentul vizat.

un instrument de marketing direct nedifereniat bulk email sau

spam)

Banners este un sistem de management al bannerelor afiate pe

propriul site
Stilistica site-ului -se analizeaz template-urile puse la dispoziie
Formularele de contact i comenzi speciale realizate n PHP

Prof.dr. Lucia Rusu


lucia.rusu@econ.ubbcluj.ro

Definitii
Conceptele Web . . au fost fundamentate de Tim OReilly

(2005)
au aprut n
, in timpul unui brainstorming intre OReilly
Media si MediaLive International,
a doua generaie n dezvoltarea World Wide Web, constnd
ntr-o combinaie de concepte, trend, i tehnologii ce se
focalizeaz pe colaborarea utilizatorilor, partajarea la generarea
coninutului creat de utilizator, reele sociale
Web . sau Web 2) este un termen popular pentru tehnologii
i aplicaii Internet avansate care include: blogs, wiki, RSS i
social bookmarking. Aceste componente majore ale Web 2.0 sunt
posibile prin tehnologii avansate: Ajax i alte aplicaii ca RSS i
Eclipse .
In prezent Web 3.0 si Web 4.0

Caracteristici Web 2.0


blogging
Ajax i alte tehnologii
GoogleBase i alte servicii web free
RSS-generated syndication
Bookmark social i colaborativ
mashups
wiki i alte aplicaii colaborative
coninut dinamic al site-urilor
enciclopedii i dicionare interactive
uurina crerii datelor, modificrii i tergerii de ctre
utilizatori
jocuri avansate

Metafora Web 2.0

Web1.0 vs Web 2.0


Trsturi Web 2.0
aspectul social
aspectul
interactiv,
baza: continuul
postat de
utilizator,
aplicatia n sine
indexarea
informatiilor.
Implementarea
aceastei
tehnologii:
Microsoft,
Amazon,
YahooMailBeta,
YahooInstant
Search

Web 1.0

Web 2.0

DoubleClick
Google AdSense
Ofoto
Flickr
Akamai
BitTorrent
Mp3.com
Napster
Britannica Online
Wikipedia
Pagini personale
Bloguri
Speculare nume domenii SEO (optimizarea motoarelor de cutare)
Pagini vizitate
Cost per click
Publicare
Participare
Content Management System
Wiki
Directoare (taxonomy)
Tagging (folksonomy)
Stickiness
RSS sindicarea informaiei
Netscape
Google
Tabelul 1. Web1.0 versus Web 2.0

Google: Gmail, GoogleCalendar, Google

Docs@Spreadsheet (2006), GoogleReader


GoogleSchoolar, Google Suggest,
GoogleBoot search, Blogger, YouTube,
GoogleMaps

Principii Web 2.0


Simplitatea -)nterfee utilizator extrem de prietenoase,
Partajarea utilizatorii fac publice informaiile nonpersonale
)nterese de ni (longtail), reunirea unor multitudini de site-uri

web, cu diferite topici


Sindicarea informaiilor folosind fluxurile RSS sau Atom,
agregatoare
Web-ul ca i platform
SaaS (Software ca serviciu) se distribuia sub form de serviciu nu
ca licen, pe o anumit perioad de timp
ncrederea n utilizatori participarea la aciunile care le
ntreprind aduc un plus de valoare Web-ului.
Exemple Wikipedia i Flickr

Tagging, folksonomy este procedeul prin care se face clasificarea

web-ului , concept introdus de Flickr


Utilizabilitatea

We

.0 i pu li itatea o li e

Publicitatea -metod a mixului de marketing pentru a atinge membrii


segmentelor int att B B ct i B C
American Marketing Association descrie publicitatea plasarea de mesaje de tip
anunuri sau de convingere n timpul i spaiul cumprat n orice form de
mass-media de ctre companii, organizaii non-profit, agenii guvernamentale
i indivizi care doresc s informeze i sau s conving membrii unei anumite
piee inte sau public despre produsele, serviciile, organizaiile sau ideile lor.
Publicitatea online
publicitate unul-la-unul bazat pe permisiune, (permission marketing)
e-mailuri targetate,
anunuri text pe motoare de cutare (Google) sau retele sociale
Publicitatea cea mai valoroas
nepltit,
pltit indirect -publicitii generate de consumatori CGM Customer Generated

Marketing).

We

.0 i pu li itatea o li e

Coninutul realizat de ctre utilizatori poate lua mai multe forme:


video, fotografii,
bloguri, vloguri bloguri cu coninut video ,
comentarii pe bloguri, podcasturi,
mesaje, reviewuri de produse pe siteuri de opinie,
contribuii pe site-uri wiki, tiri i publicitate generat de
consumatori
Avantajele principale :
a) msurabilitatea i rentabilitatea,
b) atingerea publicului int
c) oportunitile oferite de dezvoltarea tehnologiei.
Exemplu: Succesul Google: datorat strategiei de a atrage mai multe
site-uri mici i conectarea acestor site-uri cu marketerii prin
programele AdSense i AdWords.

We

.0 i pu li itatea o li e

Beneficii pentru marketeri:

diferenierea brandului fa de ceilali concureni,


mbuntirea numrului de cumprri repetate,
ofer informaiile necesare nainte de cumprare,
ajut la construirea unei baze de date cu consumatori,
creterea traficului ctre site-ul companiei,
ptruderea pe noi piee,
scade costul campaniilor publicitare,
optimizeaz eficiena campanilor publicitare

Beneficiile consumatorilor:

ajuta s ia decizii de cumprare,


ofera informaiile necesare asupra produselor,
ofer posibilitatea de interaciune cu brandurile,
poate oferi divertisment

Social media marketing


Comunitate social social community - o gam larg de modaliti online, incluznd
forumuri, reele sociale, lumi virtuale sponsorizate de mrci, lumi virtuale deschise,
comuniti sociale video i de fotografii, site-uri de tiri i bookmarking.
Social media se refer la comuniti online care implic participare, discuii i fluiditate
site-uri de tipul lumi virtuale, reele sociale de prieteni, reele sociale de tiri, reele sociale

de bookmarking, reele sociale de tip wiki, reele sociale de microblogging, forumuri i alte
tipuri de site-uri

Social media marketing SMM reprezint o form de publicitate care se folosete de


contextul cultural al comunitilor sociale YouTube, MySpace, Facebook , lumi
virtuale ( Second Life, There, Kaneva), site-uri de tiri Digg, del.icio.us , i site-uri
de schimb de opinii Epinions , pentru a atinge obiectivele de branding i
comunicare de brand
Beneficii SMM:
Poate ncuraja interaciunea dintre consumatori i mrci;
Ajut la personalizarea mrcilor ntrind-o si difereniind-o de competitori;
Mrete timpul de expunere a mesajelor de marketing
poate facilita internaionalizarea mesajului transmis i poate ntri echitatea mrcii.
Beneficii vizibile la costuri mai mici dect cele ale unui spot publicitar

Cara teristi ile o u itilor so iale o li e


Clasificarea membrilor comunitatilor sociale:
Creatorii % din useri sunt generatori de coninut
Critici - 9% din useri, sunt cei care posteaz comentarii pe bloguri i rspund la

comentariile fcute la filmulee, contribuie la clasarea produselor.


Colectorii % din useri, consum coninutul generat de useri n mod activ folosind
RSS feeds-uri i prin taguirea de site-uri.
Joinerii - 9% din useri sunt cei care activeaz pe una sau mai multe reele sociale.
Spectatorii % din useri folosesc comunitile sociale la un nivel mai pasiv
Inactivi 52% nu sunt implicai n social media

Caracteristicile comunitilor sociale


participative,
interconectate,

tematice,
funcionale,
simbolice,
bazate pe experien,

cuprind coninut generat de membrii lor

Lu ile virtuale versus reelele so iale


Diferenierea ntre lumile virtuale i reelele sociale:
dimensiuni spaiale dimensiuni D si D ale site-ului;
gradul de imersiune posibil;
reprezentarea i controlul identitii n spaiu;
sensul prezenei alturi de ceilali n acelai loc i n acelai timp;
complexitatea.

Lumile virtuale- clasificate n: deschise i nchise.


Lumile virtuale deschise sunt administrate i gzduite de o organizaie
care ofer posibilitatea mrcilor s se implice n comunitate There i
Second Life )
Lumile virtuale nchise sunt brand-uite de o organizaie comercial, care
poate controla exclusivitatea i tipurile de mrci ce pot fi gsite n
cadrul comunitii. Coca-Cola -> s-a implicat n crearea lumii virtuale
MyCoke.com

Site-uri de tip social media marketing


O list complet a lumilor virtuale pe site-ul www.virtualworldsreview.com
nchise. www.mycoke.com Deschise. www.secondlife.com (cunoscuta inRomnia)
Reelele sociale de tiri
internaionale :www.digg.com, www.reddit.com
n Romnia www.voxro.com
Facebook (egocentric)
ofer mai multe posibiliti de promovare, o parte din ele fiind gratuite alte fiind
accesibile ca i tarife
Crearea unui cont, completarea profilului companiei
Promovarea blogului companiei trecnd posturile postate pe blog la seciunea Notes.
market place n care utilizatorii pot posta ceea promoiile sau reducerile
Crearea de aplicaii pe Facebook (Sony: sub numele de Vampires).
un sitem de anunuri text asemntor cu Google AdWords
crearea unei noi dimensiuni sociale a internetului
Linkedin egocentric este www.linkedin.com) cu un caracter profesionist, pentru
dezvoltarea reelei de clieni, gsirea de furnizori de servicii sau produse, discuii cu
specialiti pe diferite domenii, aderarea la grupuri profesioniste, postarea de joburi.

Blog
Blog- este o contracie a Web log
Blogul este o pagin pe internet, construit pe o platform
gratuit, cu un format standard mprit n header, footer,
coninut i unul sau dou sidebaruri n partea dreapt , pe care
informaiile numite posturi sunt afiate n ordine invers
cronologic. )n general este ntreinut i scris de o singur
persoan, pe care se poate gsi cea mai larg gam de informaii
de la tiri de actualitate i de interes general, pn la pasiunile
autorului sau brfe i opinii pe marginea subiectelor actuale i
unde vizitatorii pot interaciona extrem de simplu prin
comentarii.
Blogger se numete persoana care care scrie posturile i updateaz
blogul, ntreaga operaiune poart denumirea de blogging
Bloguri : textuale (Cele mai multe), orientate ctre fotografie
(fotoblog), video (vlog), sau audio (podcasting).

Blog (2)
Structur generalizat:
posturi grupate pe categorii, arhiv, blogroll, feed-uri RSS,
comentarii, tags (cuvnt cheie), trackback.

Post urile sunt nsemnrile i articolele de pe blog


Categoriile teme generice n care autorul public articole
Ping -trimite un semnal ctre alte site-uri sau bloguri imediat

ce se public un nou articol


Permalink, Permanent Link reprezint adresa web URL a
fiecrui articol publicat
Arhivele - permit gruparea automat a tuturor articolelor
BlogRoll este o list de link-uri care direcioneaz fie ctre
site-ul altor bloggeri sau site-uri prietene
Tag este echivalent cu keyword
RSS-ul (Really Simple Syndication) este un limbaj de schimb
de informaii simple

Tipuri de bloguri
Funcie de statutul autorului:
individual, - echivalentul electronic al unui jurnal;
corporativ/organizational.
Funcie de gradul de specializare:
specializat sau de expert (specialist blog) urmresc un anumit domeniu
(relaiile publice, IT-ul, piaa imobiliar);
generalist care abordeaz mai multe teme sau n care autorul i
expunde punctele de vedere din cele mai diverse domenii.

Crearea unui blog gratuit:

apelnd site-uri care ofer acest serviciu: WordPress.com,

Blogspot.com, Xanga, MSN spaces, SkyBlog, Six Apart etc.,


prin extensia site-ul existent i adugarea unui link ctre pagina de blog
prin apelarea la serviciile unei firme specializate pentru cei care doresc
un blog personalizat.

Blogul motenete permisiuni de la site-ul printe sau se configureaz

mai permisiv decat site-ul

Blog (4)
Personalizarea -Se poate alege din panoul de administrare:
Numele dac este disponibil , apoi userul i parola.
Tema blogului aranjarea n pagin, culori i imagini teme
predefinite care se pot personaliza).
Widgeturile dorite funcionaliti ce pot aprea n sidebar:
arhiv, categorii, taguri, motorul de cutare, arhiv, blogroll,
feed-uri RSS, etc.
Se poate seta: numrul autorilor, posibilitatea de a face
comentarii cu sau fr aprobare, de a publica date despre
identitatea autorului
Configurarea listelor i arhivelor
Modificare a permisiunilor pentru blog sau pentru lista altor
bloguri, de urmrire a versiunilor postrilor din blog (cu
posibilitater de restaurare a versiunii anterioare).
Configurarea categoriilor, care permit organizarea
publicrilor

Rolul blogului n e-afaceri


Marketerii pot utiliza blogurile pentru [Wright,2008]:
a mbuntai rezultatele cutarilor pe diverse motoare de
cautare,
a comunica /a construi relaii direct ctre clieni i potentiali
clieni,
a construi branduri,
a se diferenia de competitori,
a promova ctre diverse nie de piaa
a crea campanii media i de relatii publice
a se poziiona ca expert.

Avantaje ale blogurilor companiilor:

rapiditatea cu care informaia ajunge la clieni


nouti cu privire la promoii, oferte speciale sau noi

produse/servicii alternativ la trimiterea de mass messages,


considerate SPAM)
generarea de trafic pe site-ul firmei, prin integrarea blogului
i schimbul de linkuri site-blog.

Crearea blogului de companie


Exista pai n realizarea unui blog de companie:
1. Definirea clara a scopului pentru care este nevoie de un
blog de companie
2. Asteptarile privind acest blog
3. Obiectivele i activitile
4. Stabilirea planului de coninut, i a planului de
actiuni(Regula utilitaiment)
5. Managementul personalului
6. Managementul intern al comunicarii prin blog
7. Integrarea blogului in strategia de comunicare sau de
marketing
8. Marketingul blogului
9. Marketingul blogului
10. Analiza rezultatelor obtinute

Promovarea i optimizarea blogurilor


Analizam 3 directii

coninutul,
interaciunea cu blogosfera
optimizarea.
a. Coninutul
Relevana,
3C ( Consecventa, Consistenta,Calitatea)
Aspectul: prima impresie conteaz
a.
b.
c.

b.Interaciunea cu blogosfera

)nternetul i Web . sau Web . are un rol foarte important n

socializarea populatiei
Bloggerii socializeaza cu alti bloggeri, urmresc temele discutate pe
alte bloguri, ct i evolutia acestora.
Se pot aduga comentarii pe alte blog-uri atata timp ct comunic
ceva.

Articole pe alte blog-uri - d credibilitate blog-ului personal


Concursurlie organizate pe blog-ul personal

c. Optimizarea
Principala platform pentru blog-uri este WordPress
Optimizarea Wordpress:
Optimizare Titlurilor Paginilor
Utilizarea cuvintelor cheie n continuului articolului este
recomandat nc din primul paragraf, sau primele
propozitii/fraze ale articolului
Fluiditatea articolului este esenial
Structura Link-urilor interne
Permalink Structure permite optimizarea structurii de linkuri interne i rescrierea URL-urilor din cadrul blog-ului pentru a
fi SEO friendly
Nu 1. http://www.unblogcarenuexista.ro/?p=63
2. http://www.unblogcarenuexista.ro/noul-ansamblu-apartamente-

Baciu/
3. http://www.unblogcarenuexista.ro/2012/02/26/noul-ansambluapartamente-Baciu/

Feedback
Bloggerii ii msoar succesul n

top-uri,
trafic,
linkuri,
bani din reclame sau apariiile n pres.

Comunitatea
-poate promova un blog mai bine dect orice alt instrument.
-are rolul de a corecta, de a oferi credibilitate unui blog, cenzur, i este arbitru.
Blogurile de companie

primesc feedback din partea consumatorilor,


pentru comunicri cu clientii
Prospectii
pentru a da o fa mai umana unei imaginii corporatiste, prin definitie rigid

Succesul blog-urilor -comunitatea, perseverena i gradul de implicare conduc la


promovarea unui blog
Masurare a succesului unui blog de companie nu consta n numrul cititorilor ci
n implicarea acestora.

Prof.dr. Lucia Rusu


lucia.rusu@econ.ubbcluj.ro

Figura 3.4.Procesul iterativ de dezvolare a ste-ului web


]

[1]

Co epte i paradig e CMS


Managementul coninutului (CM- Content Management = procesul
de aprovizionare sistematic i structurat, de creare, prelucrare,
administrare, prezentare, procesare, publicare i reutilizare a
coninutului
Managementul documentelor (DM- Document management)
nseamn crearea, organizarea, utilizarea, manipularea i dispoziia
documentelor n scopuri organizaionale
Sistem de management de coninut (CMS- Content Management
System), este un grup software sau o suit de aplicaii i instrumente
care permit o organizaie pentru a crea, edita, revizui i publica textul
electronic.
Managementul site-urilor Web (WSM) descrie mulimea de activiti
diverse legate de publicarea coninutului pe WWW, ordinea autorilor,
mentenana unei structuri consistente, analiza traficului i optimizarea
site-ului.

[1]

Co epte i paradig e CMS (2)


Managementul coninutului firmei (ECM Enterprise Content
Management) este termenul DM care descrie tehnologiile utilizate de
organizaii pentru capturarea, gestionarea, stocarea i controlul
coninutului la nivel de ntreprindere, inclusiv documente, imagini,
mesaje e-mail, mesaje instant, video, i altele.
Sistemul de Management al globalizrii (GMS- Globalization
Management System) este aplicaii software enterprise care ofer
infrastructura pentru a controla procesul complex de adaptare,
traducere i meninerea toate de coninut i informaii la nivel mondial
Specific corporatiilor

[1]

CMS o soluie ola orativ


Actori
Content author pentru crearea i editarea coninutului.
Editor pentru modificarea coninutului
Publisher pentru oferirea coninutului pentru utilizare.
Administrator gestioneaz drepturile de acces la fiiere
i directoare n concordan cu permisiunea atribuit la
nivel de utilizator/ grup de utilizatori si rolul fiecaruia
Consumer, viewer or guest- persoan care citete sau
utilizeaz ntr-o anume manier coninutul publicat
[Brow,2001].

[1]

CMS o soluie ola orativ 2


Securitatea
Presupune:
stabilirea unei conexiuni sigure,
encriptarea datelor pentru stocare,
realizarea unei scheme de autentificare i autorizare
Autentificarea utilizatorilor
prin logare, folosind un form HTML
prezena cookie-urilor i validarea datelor.
Sesiunile realizate cu ajutorul cookie-urilor
utilizatorul a fost identificat, i se repartizeaz o cheie stocat ntrun cookie -Session. de ctre browser
asigur continuitatea i permite autentificarea de la pagin la
pagin.
cookie ID care are rolul de a reine numele utilizatorului

[1]

Componentele CMS

a. Date i informaii
b. Coninutul Content

coninut,
layout
structur

c.abloanele Templates
d. Procesarea coninutului (Content process)

creare,
control,
eliberare,
publicare,
Arhivare

Managementul coninutului (Content management)


Managementul coninutului web (Web content
management)

Figura 3.4.Procesul iterativ de dezvolare a ste-ului web


]

[1]

Componentele CMS (2)


Workflow (flux de lucru) este termenul utilizat pentru a
descrie procesul pe care l parcurge un document.
Grupuri de utilizatori

redactori,
managerul de coninut content manager ,
managerul de portal (portal manager)
administrator.

Statutul documentelor - stri pe durata workflow:

n lucru,
eliberat,
publicat,
arhivat.

[1]

Componentele CMS (3)


Structur minimal:
asset management,

componenta de workflow,
gestiunea utilizatorilor i a drepturilor,
Interfee
APIs.

Assetmanager este compus din:


depozit,
interfaa asociat,
conectori spre alte sisteme,
modul de workflow
modul de adminsitrare.

Assetmanager
Depozitul conine baze de date i fiiere care stocheaz

coninut, deine fiiere de configurare i de administrare


precum i baze de date ce specific modul de funcionare i
procedura de publicare.
Interfaa

permite sistemului de colectare, publicare, workflow i de


administrare s acceseze i s utilizeze depozitul.
pune la dispoziie funcii de input, de accesare i de output de
componente i de fiiere, sau date care sunt stocate n depozit.

Conectori spre alte sisteme: asigur trimiterea i primirea de

informaii din depozit,


modulul workflow introduce fiecare component sau
publicaie ntr-un ciclu de via definit
modul de administrare permite configurarea CMS.

Modelul de coninut
similare cu bazele de date, respectiv DTD-uri pentru

XML, determinnd structura fiecrei componente n


parte i modul de legare a componentelor din cadrul
CMS.
se specific:numele fiecrei clase de componente,
elemetele permise pentru fiecare component, tipul
elementului i valorile valide ale fiecrui element
respectiv structurile de acces n care particip fiecare
clas sau instan de component.
Stocarea coninutului: baze de date relaionale, fie
baze de date orientate obiect (XML)

Ma age e tul i i lul de via al o i utului


site-urilor
Managementul web site-ului conine un subset de

activiti, definite ca i meninerea sub control a


structurii site-ului, asigurarea unor apariii commune
a paginilor correspondente, fr a depinde de
coninutul acestora [Buraca,
4].
Sub-structura unui site- modul n care este nteleas
legtura dintre pagini i modul n care interacioneaz
cu modulele server-side (servlets, pagini JSP, scripturi
etc).
Structura site-ului descrie modul n care paginile
sunt cuprinse n site i cum sunt legate ntre ele.

graf orientat
structura arborescent

Ci lul de via al o i utului


Abordari:
Bob Boiko (2002) :

1. colectare,
2. management (fluxuri de lucru, aprobare, controlul versiunilor,
repozitoriu),
3.publicare.
Gerry McGovern
, le numete: creare, editare i publicare.
JoAnn Hackos (2003) descrie patru componente: coninut,
repozitoriu, asamblare/stabilirea legturilor i publicare
Etapizarea comuna:

Creare,
management,
integare,
negociere
distribuie.

Categorii de CMS
Criterii: flexibilitatea, granularitatea, integrarea
3 tipuri de CMS:
sisteme de tip cutie (Box systems);
platforme (medii) de dezvoltare;
sisteme atotcuprinztoare all-in-one solutions)
CMS pentru comer electronic sunt grupate n 4 mari categorii

[Humeau & Jung,2013]

nivelul 4: corespunde proiectelor mici

cu cifra de afaceri realizat


on-line cuprinsa intre i milion de euro
nivelul 3: proiecte de dimensiuni medii ( cu cifra de afaceri
realizat on-line cuprinsa ntre i milioane de euro
nivelul 2: proiecte mari, cu branduri cunoscute ( cifra de afaceri
realizat on-line intre i
milioane de euro
nivelul 1 corespunde "montrilor" care pot genera o cifra de afaceri
on-line de peste
de milioane de euro, pn la mai multe
miliarde de euro.

CMS open source


Java i PHP politica de open source. Platformele Java au

codul surs nchis (closed source), n timp ce platfomele


PHP sunt open source.
Soluiile Java se concentreaz pe site-urile mai mari, au trei
puncte-cheie:
viteza de back office, n special n cazul mai multor conexiuni

concurente;
costurile de licen i de serviciu mult mai mari (fa de PHP
care este mult mai accesibil);
gestionarea unui numr mare de referine SKU .

soluii de comer electronic mediul Java : Intershop, Hibris,

Demandware
Solutii PHP : Magento, Oxid esales, Rbd change , Drupal
commerce, Prestashop, etc.

Solutii de e-commerce
PrestaShop (Frana
simplu i ideal pentru dezvoltatorii web nceptori - nivelul 4.
Drupal Commerce este o soluie potrivit la nivelului 4,

necesitnd dezvoltatori avansai care cunosc deja Drupal.


RBS change este plasat ntre mijlocul nivelului 3 i nceputul
nivelului 2.
Magento ofer cea mai larg gam: de la Go SaaS de la nivelul 4
la nceputul nivelului 2 cu versiunile EE (Enterprise Edition).
X.commerce cuprinde aproape ntregul spectru, susinut de eBay.
Demandware este un caz atipic, un SaaS (Software as a Service),
nivel 1 pentru c modelul de plat al acesteia permite o
component variabil bazat pe cifra de afaceri a site-ului i se
ntinde de la mijlocul nivelului 3 pn la mijlocul nivelului 2.

CMS open source (3)


Intershop este o soluie Java pentru site-urile cu

conturi mari, (mijlocul nivelului 2 pn la nivelul 1).


Hybris este o soluie bazat pe Java i Oracle iar
datorit costurilor de licen i naturii tehnice a
produsului, este ncadrat n rangul 2.
CMS-urile open source se concentreaz pe
comunitatea de utilizatori care au necesiti bine
definite fa de managementul coninutului. Exemple:
Zope server de aplicaii pentru elaborarea CMS;
Joomla un CMS popular;
WordPress platform de publicare personal (Blog).

Drupal
Caracteristici:
Sursa deschis - Licentei Publice generale GNU 2 (GPL).
Cartea de colaborare permite setarea unei soluii colaborative i

autorizarea altor persoane s contribuie la coninutul.


URL- uri prietenoase deorece utilizeaz modul Apache
Module comunitatea Drupal deine multe module care furnizeaz
funcionalitate ce extinde baza Drupal
Personalizare mediul robust de personalizare la baza Drupal ofer
individualizare att coninutului ct i prezentrii, pe baza unor
preferine definite de utilizator.
Sistemul de permisie bazat pe rol ofer permisiuni rolurilor i apoi
grupurilor, precum i utilizatorii care fac parte dintr-un grup de rol.
Cutare - tot coninutul Drupal este indexat i poate fi cutat
Autentificarea utilizatorului local utiliznd o surs extern de
autentificare sau Open)D/ identificare deshis sau alt site Drupal.
Pentru utilizarea n intranet, Drupal se poate integra cu un server
LDAP.
Polls - modul care permite administratorilor i/ sau utilizatorilor s
creeze poll-uri i s le afieze pe diverse pagini.

Drupal (2)
Templating sistemul Drupal separ coninutul de prezentare i

permite controlarea aspectului i perceperea site-ului Drupal.


Comentarii postate- ofer un model de comentarii puternic ierarhic
Controlul versiunii
Creare bloguri prin suport API
Organizarea coninutului - Drupal export coninutul site-ului n
format RDF/RSS i permite oricrui agregator de tiri s navigheze
Agregatorul de tiri (RSS Feed)- Drupal are un agregator de nouti
puternic, ncorporat pentru citirea i postarea tirilor de pe alte site-uri.
Legturi permanente (perma link) asociate astfel nct oamenii se
pot conecta liber far s le fie team de legturi dezafectate.
Platform Serverul Apache sau IIS, cu suport Unix / Linux / BSD /
Solaris / Windows / Mac OS X -, poate funciona i pe platformele
Linux, BSD, Solaris, Windows i Mac OS X.

Drupal (3)
Independena bazei de date - Drupal cu MySQL, MySQL sau Drupal

cu MySQL i PostgreSQL, alte BD SQL


Multi-limbaj - prin integrarea cu alte instrumente de traducere
precum GNU gettext.
Analiza, monitorizarea i statistica nscrierea n jurnal i raportarea un jurnal de evenimente pentru a
fi revizuite
Administrarea pe baza web realizat n ntregime prin utilizarea
unui browser web,
Forumurile de discuii - site-uri dinamice ale comunitii.
Stocarea tocarea poate fi ajustata n timp real, n timp ce site-ul se
ncarc, poate fi i testata cu succes chiar n situaii de trafic intens.

Joomla
cel mai popular CMS pentru realizarea diferitelor aplicaii,
uurinei de utilizare i extensibilitate
disponibil gratuit, ns unele aplicaii sau componente compatibile n

Joomla trebuie pltite.


Tipuri de aplicatii :
Web-site-uri sau portaluri web,
Aplicaii intranet sau extranet;
reviste, ziare, sau publicaii online,
magazine virtuale,
site-uri de afaceri,
web site-uri sociale etc.

Joomla (2)
Panoul de control
Facilitati de acces la componente
Se pot crea user-i cu grade diferite de acces la meniu
configurarea global :
starea site-ului, mesaj de eroare de sistem,
numele site-ului, nregistrarea utilizatorilor, limb i ar,
setri referitoare la baza de date, server, descriere site, cuvinte
cheie, mail, etc.
Extensiile se stabilesc i se enumer n etapa de schiare a

coninutului.
Mamblog i AkoComment permit utilizatorilor s scrie
jurnale on-line bloguri i s primeasc feedback la cele
scrise sau la imaginile postate.

Joomla (3)
VirtueMart
specifica pentru un e-shop
ofer tehnologia co de cumprturi necesar achiziionrii
propduselor i permite gestionarea acestora imagini, descriere,
pre, disponibilitate, etc. .
configurat conform cerinelor: numrul lucrrilor expuse pe un
rnd , cmpuri care s apar la descrierea produsului nume,
pre, nouti , s nu arate numrul de exponate dintr-o categorie, s
afieze antetul, poziia curent de navigare, afiarea pe prima
pagin a dou lucrri aleator sub sintagma V propunem, moneda
EUR , metoda de expediere standard, configurat individual , etc.
permite efectuarea de cutri rapide sau avansate n toate
categoriile i dup mai multe criterii informaii legate de lucrri,
numele lucrrii, autor ,
drop-down list n pagina principal permite afiarea produselor n
funcie de categoria selectat din list, pentru selectie rapida a
produsului preferat.

Joomla (4)
Simple Image Gallery Plugin -manipularea unei galerii foto
JooMap asigur o hart dinamic a site-ului
Polls este un instrument care permite realizarea de mini-sondaje

on-line, necesare oricrei afaceri pe )nternet


Mass Mail- e-mail n mas potenialilor clieni sau clienilor
actuali, pentru a-i informa asupra ofertei firmei, asupra unei
lucrri nou aprute sau alte informaii de interes pentru
segmentul vizat.

un instrument de marketing direct nedifereniat bulk email sau

spam)

Banners este un sistem de management al bannerelor afiate pe

propriul site
Stilistica site-ului -se analizeaz template-urile puse la dispoziie
Formularele de contact i comenzi speciale realizate n PHP

Prof.dr. Lucia Rusu


lucia.rusu@econ.ubbcluj.ro

[1]

Co cepte i paradig e SEO


Optimizarea SEO (Search Engine Optimization) - tehnici si

strategii de promovare on-line


Etapele principale sunt:

analiza concurenei
fixarea obiectivului i estimarea eforturilor pentru atingrerea lui
stabilirea cuvintelor cheie (cu programe specializate)
Optimirea structurii, functionalitii i a soluiilor de navigarea n
site
Optimizarea meta tagurilor description i title (sau crearea lor daca
nu exist)
Inscrierea n motoare de cautare i indexarea site-ului
Optimizare continutului
Optimizarea link-urilor interne (cuvinte cheie relevante).
Armomizarea naturii continutului (vizitatori i motoarele de
cautare.
Monitorizarea i mbunatirea performantelor[ibb]

[1]

Co epte i paradig e SEO (2)


Tehnici SEO:
White Hat tehnici permise (corecte)
Black Hat tehnici incorecte
Gray Hat tehnici de grani

SERP (Search Engine Result Page), pagina cu rezultatele


afiate de un motor de cutare.
Link Farms
EPV - (Earnings per visitor) castigul per vizitator
FFA - (free for all link pages) pagini cu linkuri free
Filter words
IBL - )nbound Links reprezit toate linkurile de pe alte
siteuri ctre siteul int, cu acelai nteles ca i back link .
Keyword Density

[1]

Co epte i paradig e SEO (3)


Keywords Tag - Meta Tag din Header-ul site-ului. cu cuvintele cheie care

descriu acea pagina.


Link Popularity similar cu IBL
Outbound Link - un link de pe siteul propriu care face trimitere la un alt
website.
Page Rank - sau Popularity Rank (PR) este o formul ce folosete o scara
de la 0 la 10, popularitatea unui website..
PPC (Pay per click), se achit o anumit sum pentru fiecare click CPC
Cost per Click). Google Adwords este un exemplu de astfel de tipuri de
publicitate.
SEM - Search Engine Marketing, termeni care se refer la majoritatea
tipurilor de promovare a unui website, fiind incluse SEO i campaniile
PPC.
Title Tag este un Meta Tag inclus n Header-ul orcarui website. Acest titlu
este afiat pentru toate siteurile returnate n urma unei cutri.
URL - Universal Resource Locator, adresa unic a unui site.
Web Directory - Director web este o colectie de website-uri grupate n
categorii.

Figura 3.4.Procesul iterativ de dezvolare a ste-ului web


]

[1]

Black hat si Gray hat


Black hat -pot duce chiar pn la excluderea site-ului
din motorul de cutare
keyword stuffing, se ascund n interiorul unei pagini web

cuvinte cheie care nu sunt vizibile de utilizatori, doar de


motorul de cutare
spam-ul pe reele sociale
Doorway pages reprezint o alt metod Black (at
prin care utilizatorul acceseaz o pagin principal, dar
apoi este redirecionat spre un alt site, spre site-ul oficial
Gray hat - la granita
Exemplu: keywords stuffing .

White hat
2 metode principale de optimizare White Hat:
on page de funcionare a site-ului pe majoritatea

browser-elor, optimizarea titlurilor, a descrierii i


coninutului paginilor, a cuvintelor cheie i a URL-urilor.
off page reclame i banner-erelor publicitare, publicitate
pe alte site-uri, sau prin schimbul de link-uri cu alte site-uri
de specialitate.
Site-ul trebuie creat (sau actualizat) n aa fel nct s fie:
accesibil, paginile site-ului trebuie s aiba format text, s

poat fi gsite de Google si alte motoare


structurat, ierarhia paginilor dintr-un site i link-urile
focalizat. o colecie de pagini focalizate pe anumite teme, i
trebuie s se ncarce repede.

Optimizarea on-page
Rolul cuvintelor cheie
cuvinte cheie nepotrivite apar 3 inconveniente:
Site-ul nu ajunge pe prima pagin deoarece concurena este

foarte mare;
Site-ul este pe prima pagin, dar nu are vizitatori, nseamn
c expresia folosit ca i cuvnt cheie nu este cutat.
Site-ul este pe prima pagin are i vizitatori, dar acetia
pleac imediat datorit faptului c au fost indui n eroare.
Phrases that pay
Segmentarea audienei - site-ului este o parte cheie a
unei strategii de marketing sau PR
Analiza cuvintelor : descoperirea, atractivitatea i utilizarea
cuvintelor cheie inrudite este GoRank Ontology Finder

Rolul cuvintelor cheie


trei reguli de baz keyword deployment).
Prominena - implic utilizarea unui cuvnt la nceputul link-ului
sau o parte din text este mai important dect restul textului.
Proximitatea se refera la modul de alegere a cuvintelor cheie care
formeaz o fraz cheie.
Densitatea -o legatur frecvent cu care fiecare cuvnt cheie sau
fraza cheie este gasit fr ca poriunea de text a paginii s fie
examinat. Densitatea este calculat ca numrul de cuvinte ntr-o
fraz cheie multiplicata de frecvena cu care fiecare dintre ele apar
impreun, i divizat de numarul total de cuvinte, inclusiv cuvintele
cheie.
trei reguli secundare:
divizarea cuvintelor cheie (keyword splitting)
mbinarea lor (keyword splicing).

Indexarea paginilor
Indexarea paginilor depinde de structura acestora i navigarea
Googlebot - 4 metode esentiale n care gaseste un nou site:
1. atribuirea URL-ului Google-ului pentru cautare, prin
formularul Add URL
atunci cnd Google gseste un link spre site-ul dorit dintr-un alt
site, deja indexat
. cnd un user se logheaz pe Google Webmaster Tools, verifica
site-ul i trimite o harta a site-ului.
. cnd se redirecioneaz o pagina deja indexata, spre noua pagin.
harta site-ului
Web host-ul i numele domeniului - ca i o fundatie buna

pentru o casa solid

Structurarea i opti izarea pagi ilor


Googlebot viziteaza un site, aloc un ID unic pentru fiecare

pagin gsit

lista afiata
lista afisata intersectata

indexul suplimentar care conine pagini cu o importan


mai mic, care sunt afisate n SERP numai dac indexul
principal nu returneaz pagini potrivite termenului cautat
Elementele de optimizare on-page: titlul pagininii, metadata
paginii, heading-uri, corpul textului, legaturile interne,
legaturile off-page, imaginile ALT tag, si gazda altor
componente

Structurarea i opti izarea pagi ilor


Titlul paginii
apare n seciunea <head> i este cel mai important
element n optimizarea on-page prin ncartua
algoritmic
Supunerea directoriala
Fiecare pagin trebuie s aiba tag de titlu diferit,
lungimea unui titlu nu trebuie s depaseasca 8
caractere,
tag-ul titlului -numele afacerii sau a site-ului
cuvintele cheie utilizate n tag-ul titlului trebuie
repetate n URL, tag-ul meta-cuvinte cheie, n heading
i n corpul textului

Structurarea i opti izarea pagi ilor


Metadata tagul de meta-descriere,
ntre tag-urile <head> ale unei pagini HTML
ofer un sumar al coninutului paginii
Sintaxa <meta name=description content=keyword1,
keyword ,keywordn/>.
Sectiunea <body> cinci elemente importante:

breadcrumb trail,
tag-urile pentru head,
corpul textului,
tag-urile ALT image

legaturile interne

Structurarea i opti izarea pagi ilor

SERP (search engine results pages)


SiteLink-urile sunt automate, funcioneaza n cazul n

care:

a) site-ul este pozitionat pe primul loc n SERP,


b are un numr mult mai mare de legturi interne dect

oricare alt site sau site-ul,


c are o structur bun evidentiata prin hart sau
majoritatea accesrilor pentru un termen se ndreapt
spre acel site .

Elementul snippet, reprezint punctul cheie n

diferena dintre search marketing i search engine


optimization.

Optimizarea off-page

Scop: obinerea unor backlink-uri spre site-ul proprietarului prin:

Crearea de backlink-uri pe diverse forum-uri i pe blog-uri;


Enzine Articles, Hubpages, Squido;
nscrierea n directoarele web;
Scrierea de articole;
Promovarea pe reele sociale Facebook i Twitter, etc).
PageRank ct exist mai multe legturi calitative ctre o pagin, cu
att PageRank-ul va crete
Trust rank
legtura inbound :
Activ
Pasiva (concept de link baiting)
Legaturi:
adanci (deep links)-de la alte site-uri la paginile interne ale unui
site.
principale (main links), sunt legate la homepage-ul site-ului.

Promovarea off-line prin Google AdWords


Promovare a site-ului platita pe Google:

Google Adwords Search,


Google AdWords Display,
Google AdWords Youtube
Google AdWords Remarketing.

Google AdWords Display (GDN) ofer promovarea site-

ului prin mesaje de tip text, banner, videoclipuri, care vor


aparea pe site-uri partenere Google.
Criteriile de selecie:
n functie de context (cuvinte cheie, site-uri, subiecte pagini

web)
n functie de utilizatorii vizai pe internet (interes, sex,
varsta, remarketing).

Google AdWords
Avantaje ale campaniilor de publicitate Google AdWords [webpassion]:
atragerea de clienti noi, cresterea numarului de comenzi online si

implicit dezvoltarea afacerii;


anuntul de promovare se afiseaz unor utilizatori care cauta sau sunt
interesati de produsele/ serviciile oferite;
anunturile de promovare se pot seta sa ruleze doar n anumite zile,
intervale orare;
campania de promovare poate fi dedicat doar n anume orae, regiuni
sau la nivel national;
promovarea facil a locatiei afacerii, date de contact, promotiile si
avantajele oferite;
anuntul se poate afisa atat pe laptop-uri, cat si pe telefoanele mobile si
tablete ceea ce il apropie de consumatori;
control asupra bugetului, cu modificari in timp real ale bugetului in
functie de rezultatele nregistrate (optimizare campanie).

Pozitia re ta ila i al atuirea hartii site-ului


optimizarea lingvistic, optimizarea geografica, Google Earth i Google
Maps
Match drivers -echivalentul cuvintelor cheie n cazul campaniei organice i
ofera un nivel de calificare diferit fata de aceasta.
implica alegerea unei locatii, a unei limbi i perioada n care se doreste ca

adaugarile s fie cautate,


selectarea frazelor pentru care se plateste (pozitive )
specificarea cuvintelor care se exclud (negative)
cheie pozitive exista trei optiuni :
broad match,
exact match
phrases match

quality score (QS)


concept explicat cu triunghiului calitatii, (fraza principala, ad text copy , care
reprezinta repetarea frazei principale, i landing page copypage title,
descriere, tab-ul de heading ai alte elemente on-page

Prof.dr. Lucia Rusu


lucia.rusu@econ.ubbcluj.ro

WebE
WebE (Web engineering) [Roger S. Pressman, 2005]
Dezvoltare Incrementala

Actori : analiti, designeri,

experi n marketing,
multimedia i securitate i
utilizatorii (beneficiarii
aplicaei)

Caracteristicile apli aii We


Front end: structura de navigare, interfaa cu
utilizatorul i capacitatea de personalizare

Modelul analitic pentru aplicaii Web cuprinde:


Modelul coninutului
Modelul interaciunilor
Modelul funcional
Modelul configuraiei

Metodologiile de proiectare Web (1)

NDT Navigational Development Techniques,


OOHDM - Object-Oriented Hypermedia Design Method,
UWE - UML-based Web Engineering,
W2000
W3DT -World Wide Web Design Technique
HDM - Hypertext Design Model
SOHDM - Scenario-based Object-Oriented Hypermedia
Design Methodology
RNA: Relationship-Navigational Analysis
WSDM - Web Site Design Method ("WiSDoM")
UWA- Ubiquitous Web Application
WebML Web Modeling Language

Metodologiile de proiectare Web (2)


Analiza detaliat a cerinelor
descrierea textual informal,
Specificaia formal n limbaje Z

metamodel comun pentru reprezentarea conceptelor i

relaiilor ingineriei cerinelor Web Web requirements


engineering -WebRE este realizat de Escalona i Koch
(2004).
NDT Navigational Development Techniques,
OOHDM - Object-Oriented Hypermedi Design Method,
UWE - UML-based Web Engineering,
W2000

Metodologiile de proiectare Web (3)


Proiectarea logic n domeniul soluiilor este tratat de

UWA- Ubiquitous Web Application,


OOHDM- Object-Oriented Hypermedia Design Method
OOWS - Object-Oriented Web Solution i
OO-H - Object-Oriented Hypermedia Method.

Metodologii hibride

UWE i WebML Web Modeling Language


trateaza att proiectarea conceptual ct i proiectarea logic

[Distante et al. 2007]

Abordri integrate, care acopera ntreg ciclul de via

OO-H,
OOWS,
UWE
OOHDM.

WSDM
Web Site Design Method (WiSDoM)
Caracteristici:
centrat pe utilizator
modeleaz aplicaia pe baza cerinelor informaionale ale grupurilor de

utilizatori
are n vedere necesitile vizitatorilor -> conduce la un grad mai mare
de utilizabilitate i de satisfacie
Procesul de dezvoltare
1. Modelarea audienei
. Proiectarea conceptual
. Proiectarea implementrii,
4. Implementarea

WSDM(2)
Modelare a audienei -> diferitele roluri ale utilizatorilor :
1.1.Clasificarea utilizatorilor, identificarea potenialilor
utilizatori/vizitatori ai site-ului Web i clasificarea lor n funcie de
interesele lor i de preferinele de navigare;
1.2. Descrierea grupurilor de utilizatori, pentru fiecare grup din subfaza anterioar identifica:
cerinelor informaionale,
funcionale i
de securitate.
WSDM
face o distincie clar ntre proiectarea conceptual i proiectarea
prezentrii, care se bazeaz pe limbajul de implementare.
separare similar cu distincia n proiectarea bazelor de date ntre
schema conceptual i schema logic.

W2000
HDM (Hypertext Design Model)
model conceptual, care separ modelarea informaiilor, modelarea
navigrii i modelarea prezentrii.
Obiectele de tip informaie sunt conectate prin legturi semantice,
structurile interne ale obiectelor informaie sunt reprezentate prin
legturi structurale ntre componente.

W2000
metodologie orientat obiect derivat din (DM,
principiul SoC (Separation of Concerns).
extinde notaia UML la modelarea aplicaiilor hipermedia.
Analiza cerinelor -2 subactivitati:
analiza cerinelor funcionale
analiza cerinelor de navigare

W2000 (2)
Organizeaz proiectarea unei aplicaii hipermedia complexe n jurul a
dimensiuni:
1. Informaia, definind entitile informaionale conceptuale de baz
percepute de utilizator i diferitele structuri de acces;
2. Navigarea, definind structurile de navigare principal n termenii
nodurilor i legaturilor links ;
3. Prezentarea, definind structura paginii n termenii aspectelor de
prezentare i elementelor grafice, organizrii i navigrii n pagin;
4. Procesul de business, definind procesele utilizatorului unei aplicaii
Web n termenii proceselor i operaiilor [Perrone et al.
].
- Specifica site-urilor de business

OOHDM -Object-Oriented Hypermedia Design Method


Model propune dezvoltarea de modele separate:

conceptual, de navigare i interfaa abstract


Modelul de navigare este construit cu o varietate de concepte ->
contextul de navigare.

Procesul OOHDM are 4 faze:


Modelul conceptual - reprezentat ca un model clas, construit pentru
a arta aspectele statice ale sistemului;
Modelul de navigare - const dintr-o diagram clas de navigare
reprezentnd posibilitile statice ale navigrii n sistem i o diagram
de structur de navigare incluznd structurile de acces i contextele de
navigare);
Modelul interfeei abstracte este dezvoltat folosind o tehnic special
numit ADV;
Implementarea-const n codul implementat i se bazeaz pe modelele
dezvoltate.

OOHDM(2)
OOHDM - extins ulterior cu UID
User Interaction Diagram (UID)
o tehnic special ce se ocup de interaciunea cu utilizatorul n
faza de analiz a cerinelor
construit pentru interaciunea special a utilizatorului Web cu
sistemul Web.
Diagramele U)D se bazeaz pe tehnica USE_CASE (cazurilor de
utilizare)
U)D utile in interaciunea utilizator i sistem Human Computer
Interaction-HCI).
metodologia sugereaz rafinarea cazurilor de utilizare
construind diagrame U)D pentru specificarea cerinelor.
Diagrame U)D modeleaza grafic interaciunea dintre utilizator i
sistem [Vilain et al., 2000]

SOHDM
SOHDM - Scenario-based Object-Oriented Hypermedia Design
Methodology
prima abordare cu accent pe importana unui proces de analiz
permite s defineasc cerinele aplicaiilor.
SO(DM este similar OO(DM, propune o specificare a cerinelor
bazat pe scenarii.
Ciclul de via SO(DM cuprinde 6 etape:
1.
2.
3.
4.

5.
6.

Analiza, faza n care sunt descrise cerinele utiliznd scenarii;


Realizarea modelului obiect - construiete o diagram clas pentru a
prezenta structura static a sistemului;
Proiectarea prezentrii - exprim modul n care sistemul va fi
prezentat utilizatorului;
Proiectarea navigrii - se dezvolt un model de clas de navigare, ce
exprim posibilitile de navigare n sistem;
Realizarea implementrii,- sunt dezvoltate paginile Web, interfaa i
baza de date;
Construirea sistemului.

RNA
RNA: Relationship-Navigational Analysis -o metodologie cu accent pe faza de
analiz.
Fazele RNA :
Analiza mediului,

obiectivul analiza caracteristicilor audienei: actorii aplicaiei,


clasificare n diferite grupuri , funcie de rolurile lor similar cu faza de

modelare a utilizatorilor din metodologia WSDM);

Analiza elementelor- identific toate elementele de interes ale aplicaiei


documente, forme, informaii, mock-ups etc.);
Analiza metacunotinelor- se construiete o schem a aplicaiei. RNA i
propune s identifice obiectivele, procesele i operaiile legate de aplicaie i s
descrie relaiile dintre aceste elemente;
Analiza navigrii, unde schema din faza anterioar este completat cu
facilitile i caracteristicile de navigare;
Analiza implementrii - este identificat modul n care modelele descrise n
faza anterioar vor fi implementate n limbajul calculatorului.
RNA ->necesitatea separrii analizei cerinelor conceptuale de analiza cerinelor
de navigare.

HFPM Hypermedia Flexible Process Modeling


o abordare ce include strategii de modelare a procesului:
-

descriptive, orientate pe analiz,


i prescriptive.

(FPM const din faze, pentru fiecare fiind definit un set de taskuri [Olsina, 1998]
Detaliem:
Modelarea cerinelor definete urmtoarele task-uri
Descrierea problemei;
Descrierea cerinelor funcionale;
Modelarea datelor;
Modelarea interfeei cu utilizatorul;
Descrierea cerinelor ne-funcionale.

HFPM

Faza de Dezvoltare are definite task-urile:


Modelarea cerinelor software;
Modelarea conceptual;
Modelarea navigrii;
Modelarea interfeelor abstracte;

Proiectarea modelului de lucru;


Criterii cognitive;
)ntegrare/modelare fizic;
Documentare.

UWE
UWE - UML-based Web Engineering - o metodologie UML

(Unified Modeling Language)


cu accent pe aplicaiile adaptive.
ofer: o notaie bazat pe UML, o metodologie i un instrument
pentru dezvoltarea sistematic a aplicaiilor Web.
Proiectarea sistematic urmeaz principiul SoC (Separation of
Concerns),
construiete modele separate pentru: cerine, coninut, navigare,
prezentare, proces, adaptare i arhitectur.
Documentaia poate fi descris textual sau modelat prin
diagramele de activitate UML.
UWE clasific cerinele n dou grupuri:

funcionale
ne-funcionale.

UWE
Cerinele funcionale privesc:
coninutul;
structura;
prezentarea;
adaptarea;
modelul utilizator.

UWE propune tehnice specifice pentru captarea cerinelor

i cazurile de utilizare: interviurile, chestionarele i listele


de verificare checklists , i
pentru specificarea cerinelor: scenariile i glosarele.
Validarea cerinelor n UWE este realizat prin: parcurgeri
(walk-through , audituri i prototipuri.

WebML- Web Modeling Language


WebML - - un sistem de notaii pentru specificarea vizual a siturilor
complexe la nivel conceptual[Ceri et al., 2000].
Limbajul WebML ofer instrumente i notaii elementare pentru modelarea
hipertext.
Baza este modelul Entitate-Relaie care folosete concepte simple i expresive
pentru specificarea modelelor exprimate prin notaii grafice intuitive.
d posibilitate programatorului s extind schema de date a aplicaiei cu
specificarea hipertextului utilizat pentru publicarea i manipularea datelor.
Componentele principale ale WebML sunt: paginile, unitile i legturile,
organizate n structuri modulare numite zone i vederi ale site-ului (site views).
Paginile sunt formate din uniti, care sunt elementele de interfa oferite
utilizatorilor.
Paginile i unitile sunt conectate ntr-o structur hipertext.
Unitile sunt fragmente atomice de coninut, care ofer alternative de
combinare dinamic a coninutului extras din entiti i relaii al schemei de
date. Unitile permit specificarea formelor de introducere a datelor de ctre
utilizatori.
Legturile -baza modelrii hipertext i ofer posibilitatea de navigare i
transmitere de parametri de la o unitate la alta, pentru generarea coninutului
unei pagini.

WebML (2)
4 modele:

1. modelul structural, care exprim coninutul site-ului sub form de entiti


i relaii;
2. modelul hipertext, care descrie unul sau mai multe hipertexte care pot fi
publicate pe site. Fiecare hipertext diferit definete o vedere a site-ului
(site view).
Descrierile vederilor site-ului constau din dou submodele:

modelul compoziie, care specific ce pagini compun hipertextul


i unitile de coninut ale acestor pagini;

modelul de navigare, exprim legturile stabilite ntre pagini i


uniti de coninut pentru a forma hipertextul;
3. modelul prezentrii, care exprim aranjamentul i aspectul grafic al
paginilor, independent de tehnologiile de ieire i de limbajul folosit,
prin intermediul unei sintaxe XML abstracte;
4. modelul de personalizare, n care utilizatorii i grupurile de utilizatori
sunt modelai explicit n schema structurii n forma unor entiti
predefinite, numite Utilizator i Grup.

WebML (3)
conceptele WebML sunt asociate cu o notaie
grafic -> accesibil.
WebML poate fi asociat ca un profil UML.
Conceptele WebML pot fi exprimate folosind
diagramele de clasa UML i pot fi utilizate n
conjuncie cu modelarea orientat obiect UML
pentru a extinde analiza dirijat de model.
WebML a stat la baza WebRatio
(www.webratio.com).
WebRatio pune baza pe modelarea i reutilizarea

implementrilor precedente, care sunt generate


automat sau semiautomat din modele de nivel
nalt.

Va multumesc!

Prof.dr. Lucia Rusu


lucia.rusu@econ.ubbcluj.ro

Figura 3.4.Procesul iterativ de dezvolare a ste-ului web


]

[1]

Procesul iterativ

Procesul iterativ (2)


Specificarea cerinelor
Analistul colecteaz i formalizeaz informaia esenial.
Rezultatul specificatii de analiza
Feed back de ctre client

Proiectarea modelelor de date


cel mai popular model conceptual Entitate-Relaie Chen
1976).
Modelul obiectual
Modelele de date specifice Web
Elaborarea schemei bazei de date cu satisfacerea formelor
normale (uneori)

Inginerie Web
Modelarea hipertext:
structura ierarhic a paginilor site-ului,
Datele pentru construirea paginilor,
legturile dintre pagini.
Modelarea datelor i hipertextului sunt strns corelate
Gradul de flexibilitate : timpul pentru ajustarea unui
model la schimbarea celuilalt:
compatibilitate,
optimizare.

Inginerie Web (2)


Proiectarea arhitecturii
definirea elementelor hardware, de reea i componentelor
soft
Scopul: identificarea unei combinaii optime pentru
satisfacerea cerinelor de performana, securitate,
scalabilitate i costurilor.
Testarea i evaluarea
verificare a conformanei aplicaiei implementate la cerine
testarea funcionalitii, performanei i utilizabilitii
(usability).
ntreinere i evoluie - modificrile efectuate dup
lansarea aplicaiei permanent .
Propunerile i cerinele noi sunt analizate i efectuate
modificri n modelul date si/ sau hipertext.

Ierarhizarea Proiectarii

Ierarhizarea piramidala a etapelor proiectari [Mandruta, 2011]

Proiectarea interfetei (UI)


Proiectarea interfeei - structura i organizarea interfeei utilizator

(UI):

layout-ul ecranului,
modurile de interaciune cu utilizatorul
mecanismele de navigare.

Proiectarea esteticii-(LOOK&FEEL):

scheme de culori, geometria layout-lui, font, dimensiune i amplasare text,


utilizarea graficii, etc.

Proiectarea coninutului :

layout, structur, schi coninut, relaiile dintre obiectele coninut.

Proiectarea navigrii:

fluxul navigrii, legturi ntre obiectele de coninut, pentru toate funciile

aplicaiei

Proiectarea arhitecturii :

coninut prin structura hypermedia de ansamblu


la nivelul aplicaiei prin componente i relaii .

Proiectarea componentelor detalierea logicii de procesare necesar

implementrii componentelor funcionale, [Mandru,

].

Proie tarea interfeelor We


Caracteristicile simplu de utilizat, uor de nvat , simplu de navigat,
intuitiv, consistent, eficient, fr erori, funcionl.
Principii de proiectare a interfeei:
Anticiparea urmtoarei aciuni a utilizatorului i oferirea opiunilor de

navigare adecvate.
Comunicarea srii oricrei activiti iniiat de utilizator, starea
identitatea utilizatorului i poziia n ierarhia coninutului.
Consistena relativ la reprezentare controale, menu, pictograme, estetic.
Autonomia controlat facilitarea navigrii, cu impunerea conveniilor de
navigare stabilite pentru aplicaie.
Eficiena din perspectiva utilizatorului.
Flexibilitatea n raport cu diferite categorii de utilizatori; posibilitatea de a
reveni din erori sau de pe ci de navigare alese greit UNDO, back .
Focalizarea pe activitile curente ale utilizatorului.
Respectarea Legii lui Fitt: timpul de obinere a unei inte este funcie de
distana la ea i de dimensiunea intei referitoare la obiectul de interfa.

Proie tarea interfeelor We 2


Obiecte de interfa predefinite folosind biblioteca existent.
Reducerea latenei prin multitasking; feedback audio i video la lansarea
operaiilor la care rspunsul nu este imediat; afiarea unui control animat al
progresului (timer).
Uor de nvat cu design simplu i intuitiv; organizarea coninutului i
funcionalitii n categorii evidente pentru utilizator.
Metafore corespunztoare aplicaiei i utilizatorilor acesteia; imagini i
concepte din experiena real a utilizatorilor, augmentate cu faciliti
ajuttoare completare formular tip cu posibilitati de selecie din liste,
modele de introducere a datelor predefinite).
Pstrarea integritii prin salvare automat a tuturor datelor specificate de

utilizator a formelor completate n vederea recuperrii la apariia unor erori.


Lizibilitate la nivel de font-uri, dimensiuni i culori, ce trebuie s fie bine alese.
Urmrirea strii prin memorarea succesiunii strilor interaciunii cu
utilizatorul n vederea continurii acesteia la o reconectare ulterioar.
Navigare vizibil prin crearea iluziei c aplicaia vine n ntmpinarea
utilizatorului (tehnica pull), oferindu-i facilitile de navigare necesare n
contextul respectiv.

Proiectarea esteticii apli aiei Web


Estetica =LAYOUT esenial pe tot cuprinsul site-ului
Pagina principal "cartea de vizit"
Trsturi caracteristice Homepage :
pagina s fie personalizata;
s ofere mult informaie fr a deveni obez ; ncrcarea rapida
s se utilizeze grafic interactiva;
s se utilizeze tehnici asociate elementelor grafice audio/video.
Principii generale la nivelul ntregii aplicaii Web prin http://www.graphicdesign.com/ :
Evitarea suprancrcrii paginii
Respectarea unui raport 80% - % ntre Coninut vs. Navigare i alte
caracteristici
Organizarea n sensul lizibilitii maxime de la stnga sus la dreapta jos,
conform prioritii elementelor
Gruparea elementelor coninut, navigare, funcii conform unor abloane
recunoscute de utilizator
Evitarea necesitii de derulare (scroll) pentru acces la totalitatea informaiilor
unui obiect.
Specificarea dimensiunilor elementelor layout-lui n valori relative la suprafaa
disponibil.

Proiectarea esteticii apli aiei Web(2)


Design-ul grafic (LOOK&FEEL ) :
layout
scheme de culori
fonturi, dimensiuni i stilori
utilizare de alte media (audio, video, animaie)
alte elemente de estetic.

consisten stilistic de la o pagin la alta;


Recomandri crearea a minim trei abloane de structur, bazate pe

aceleai culori, fonturi, structuri de frame-uri, tipuri de butoane.


Elementele de design - n acord cu audiena,
Personalizare
probleme de accesibilitate;
Fonturile mai mari la persoanelor n vrst;
Exprimarea conform cu raportul fa de audien,

Grafica paginilor Web


o combinaie ntre design i coninut, accent pe design grafica, sigla, culori, etc. .
Culorile vor influena dispoziia, starea sufleteasc i emoiile vizitatorilor, i
prezint identitatea i imaginea brand-ului, ca element de marketing.
Culori calde : rou este una dintre culorile care capteaz atenia, Galben
reprezint soarele i cldura,. Rozul este romantic, portocaliu vibrant,.
Culori reci:verdele simbolizeaz snatate i cretere vegetaie , Albastru culoare relaxanta . Purpuriu - una dintre cele mai intrigante culori
Culori neutre: negru. Alb reprezint curenia, puritatea i spiritualitatea. Gri
este o culoare conservativ. Maro poate fi neutr sau cald
Fundalul (Background-ul)
cel mai uor se citete negru pe alb
Exemplu: Un site ce prezit o galerie de art va utiliza un fundal neutru
pentru a pune n valoare tablourile, n schimb o agenie de turism va putea
folosi un fundal adecvat care s atrag vizitatorii.
Stil i personalitate
grafica, fondul, textul, culoarea, elemente interactive
expresiile folosite n coninut, primele elemente de e-marketing at the
first site cu rol de cunoatere i influenare a consumatorilor.
Alte metode de atragere a vizitarorilor tehnicile pull : reclam, cri de
oaspei, solganuri, etc.

a loanele de proie tare


abloanele de proiectare specifice aplicaiilor Web grupate n diverse

categorii:

Arhitecturale
Construire componente
Navigare
Prezentare
Comportament / interaciune utilizator

Soluii open source :


http://www.designpattern.lu.unisi.ch repository cu abloane
http://www.visi.com/~snowfall/InteractionPatterns.html
http://www.welie.com/patterns
http://www8.org/w8-papers/5b-hypertextmedia/improving/improving.html - navigare
http://www.anamorph.com/docs/patterns/index.html - un limbaj de
abloane
http://www.mit.edu/~jtidwell/interaction_patterns.html - limbaj de
abloane specific Human Computer Interaction (HCI).

Arhitectura aplicatiilor Web


Presentation

Tier

Business Logic

Data Tier

Tier

Componenta
de produse
Logica de
prezentare

Componenta
de preuri

Driver la
baza de
date

Baza de date
Logica
de
procesare

Componenta
de lieni

Arhitectura three tier a aplicaiilor


solutia des intalnita la aplicatii Web clasice
site-ului urmeaz o abordare front-end, pornind de la cerinele audienei,
middleware-ul (programele agent care preiau cereri utilizator i gestioneaz
pe baza lor datele) care trebuie s determine back-end-ul (datele).

Arhitectura aplicatiilor Web (2)


Arhitectura MVC (Model View
Controller)
View - pagina HTML,
Controller-ul
codul care colecteaz date dinamice i
genereaz coninutul din pagina (TML.
face legtura ntre Model i View prin
analizarea, validarea i direcionarea
cererilor provenite de la utilizator ctre
logica business.
gestioneaz rspunsul primit de la Model
i invoc elementele corespunztoare ale
elementului View pentru a reda
coninutul semnificativ ctre utilizator.

Testarea si inregistrarea site-ului


Validari

Validarea HTML/XHTML
Validare CSS:http://jigsaw.w3.org/css-validator/
Validare RSS http://validator.w3.org/feed/
Link-uri orfane sau defecte: http://validator.w3.org/checklink

Oferta de validare Google: https://validator.w3.org/


Optiuni puse la dispoziia utilizatorilor:

Validate by URI
Validate by File Upload
Validate by Direct Input

Validarea documentelor XHTML (cu DTD-Document Type

Definition )
Exemplu de DOCTYPE :
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";

Testarea si inregistrarea site-ului (2)


Servicii de validare (TML/XML i testarea paginilor web:
verific structura documentelor;
verific erorile de sintax;
analizeaz imaginile si fisierele video;
verific legaturile interne i externe;
FTP - este cea mai uzual metod de transfer de la un calculator
la altul, prin intermediul Internetului.

Posibiliti pentru publicarea site-ului Web:

Internet Service Provider (ISP) ex: UPC, Romtelecom, RCS&RDS


Gazd gratuit pe Internet (free host) ex: 50.ro
Propriul server Web, instalat sub forma unei aplicaii pe

calculatorul personal ex: serverul Apache , WampServer (care


poate fi descrcat gratuit de la adresa
http://www.wampserver.com/en/ ) sau EasyPHP
(www.easyphp.org)\

Intretinerea si actualizarea site-ului


Scopuri:
mbuntirea proiectarii i machetarii;
actualizarea sau adugarea unor informaii suplimentare;
realizarea unor versiuni multi-lingve;
ca soluie de feedback-ului;
corectarea erorilor i problemele funcionale

Intreinerea eficient a site-ului -pe baza unui plan

de ntreinere, etapizat n timp, care poate s conin:


frecvena de actualizare; imbunatatirile sau modificarile

aduse; informatii i resurse de actualitate;


comentariile sau recomandarile vizitatorilor; poziia n
clasamentul motoarele de cautare;
mbuntirea configuraiei hardware i resursele software
suplimentare.

Intretinerea si actualizarea site-ului (2)


Actualizarea site-ul -o sarcin obligatorie ce
presupune:
mbuntrea unor caracteristici tehnico-funcionale;
adugarea de noi funcionaliti;
actualizarea coninutului informaional;
gestionarea formelor de feedback pentru vizitatori:
legturi i resurse utile, sfaturi sau informaii recente;
adugarea de funcionaliti noi: blog;
prezena n retelele sociale Facebook, Twitter, Linkedin,

YouTube
extinderea spre noi dimensiuni ale afacerii.

Prof.dr. Lucia Rusu


lucia.rusu@econ.ubbcluj.ro

[1] [1]

jQuery
este o biblioteca cross-platform JavaScript ce simplific

elaborarea scripturilor client-side HTML.


jQuery este free, software open-source liceniat MIT.
"write less, do more", ca bibliotec JavaScript .
Scopul: utilizarea facil a JavaScript n website.
jQuery simplifc o mulime de lucruri complicate din
JavaScript, ca apeluri AJAX calls i manipularea DOM
este lansat in 2006 de ctre John Resig (Mozilla)
cere cunotinte de HTML,CSS i JavaScript
Suport Browser: ambele versiuni jQuery sunt suportate de
Firefox, Chrome, Safari, i Opera. Versiunea 1.x este
suportat de Internet Explorer 6 sau superioar iar 2.x de
Internet Explorer 68

jQuery

Biblioteca jQuery conine caracteristici :


manipularea HTML/DOM
manipularea CSS
metode eveniment HTML
efecte i animaii
AJAX
Utilititare ca detectia comportamentului
Deferred si Promise objecte pentru controlul asincron al
procesrii
JSON parsing
Extensibilitate prin plug-ins
Metode de compatibilitate disponibile nativ in browsere moderne:
inArray(), each()
Multi-browser support (nu cross-browser)

Marile companii care folosesc jQuery, sunt: Google, Microsoft,


IBM, Netflix

jQuery Caracteristici definitorii

jQuery folosete un conceptul numit Builder pentru a face

codul scurt i simplu. ablonul Builder este un ablon de


proiectare orientat obiect care a ctigat popularitate.
Orice metod din jQuery returneaz nsui obiectul
asupra cruia a fost aplicat metoda, acest lucru permind
nlnuirea unei alte metode asupra obiectului returnat.
aduce numeroase metode noi si scurtaturi shortcut in
lucrul cu DOM-ul si Javascript, in contextul paginilor web
folosirea jQuery pune la dispozitie un API puternic, bine
proiectat user-friendly fa de DOM si care garanteaza o
functionare buna a codului scris in 99% dintre situatii,
indiferent de browser.

jQuery - Caracteristici

Accesarea unor poriuni ale paginii. Pentru a traversa DOM-ul (Document


Object Model) sau pentru a localiza o poriune specificat din structura unui
document HTML, trebuie scrise multe linii de cod fr o bibliotec JavaScript.
jQuery ofer un mecanism robust i eficient de selecie pentru a selecta exact
poriunea de document care trebuie inspectat sau manipulat.
Modificarea aspectului unei pagini. CSS ofer o metod puternic de
influenare a modului n care un document este randat, dar nu d rezultate
cnd browser-ele nu suport toate aceleai standarde. jQuery asigur aceleai
standarde pentru toate browser-ele. jQuery poate schimba clase sau proprieti
de stil individuale aplicate unei poriuni din document chiar si dup ce pagina
a fost randat.
Modificarea coninutului unei pagini. jQuery nu este limitat doar la
schimbri cosmetice, ci poate modifica ntreg coninutul documentului cu
cteva operaii. un singur API uor de folosit textul poate fi schimbat, imaginile
pot fi inserate sau nlocuite, listele pot fi reordonate sau chiar ntreaga

structura a HTML-ului poate fi rescris i extins. toate acestea cu


Rspunde la interaciunea utilizatorului cu pagina. Librria jQuery ofer o
modalitate elegant de a intercepta o gam larg de evenimente, ca de exemplu
click-ul pe un link, fr a crea dezordine n codul HTML prin adugarea de
event-handlere. n acelai timp, API-ul su pentru event-handling elimin
inconsistenele ntre browsere.

jQuery - Caracteristici (2)

Adugarea animaiilor n pagin. Pentru a implementa

efectiv un comportament interactiv, un designer trebuie s


asigure i feedback vizual utiliatorului. Librria jQuery
faciliteaz acest lucru printr-o multitudine de efecte, precum i
printr-un toolkit ce poate fi utilizat pentru a crea altele noi.
Extragerea de informaii de pe un server fr a face refresh
la o pagin. Acest ablon a devenit cunoscut sub numele de
Asynchronous JavaScript and XML (AJAX) i asist
dezvoltatorii web n crearea unor site-uri impresionabile i
bogate n caracteristici. Librria jQuery elimin din acest proces
complexitatea specific browser-ului, astfel nct dezvoltatorii s
se poate concentra pe funcionalitile server-ului.
Simplificarea sarcinilor uzuale JavaScript. Pe lng
funcionalitile specifice pentru document, jQuery aduce
mbuntiri elementelor de baz din JavaScript cum ar fi
iteraiile i manipularea vectorilor.

Strategii jQuery

Influeneaz cunoaterea CSS. jQuery motenete o metod concis de a exprima

structura unui document bazat pe de cutare a elementelor din pagin pe selectori


CSS.
Suport pentru extensii. jQuery las cazurile speciale n grija plugin-urilor datorit
feature creep, termen ce nseamn c evita s aib mai multe funcii dect cele de
baz. Metoda de creare de noi plugin-uri este simpl i bine documentat, ceea ce a
condus la apariia unei game largi de module inventive i folositoare.
Ascunde subterfugiile abstracte ale browsere-lor. Fiecare browser are propriile
deviaii de la standardele publicate. O parte important din orice aplicaie web este
transferat pentru a manipula caracteristici fiecrei platforme. jQuery adaug un
nivel de abstractizare care normalizeaz sarcinile de baz, reducnd dimensiunea
codului i simplificndu-l semnificativ.
Manipuleaz ntotdeauna mulimi de elemente. Cnd se dorete gsirea tuturor
elementelor cu clasa 'unu' i ascunderea lor, nu este necesar o iteraie prin toate
elementele returnate. Metode ca .hide() sunt construite pentru a manipula mulimi
de obiecte, n loc de elemente individuale. Aceasta tehnic, numit iteraie
implicit, reduce multe instruciuni de iteraie i astfel reduce semnificativ codul.
Permite aciuni multiple ntr-o singur linie. Pentru a evita folosirea n exces a
variabilelor temporare i a repetiiilor, jQuery utilizeaz un ablon de programare
numit nlnuire pentru majoritatea metodelor sale. Aceasta nseamn c
rezultatul majoritii operaiilor asupra unui obiect este chiar nsui obiectul,
pregtit pentru a aplica alte metode asupra lui.

Download jQuery

Dou versiuni jQuery sunt disponibile pentru download:


una comprimat, pentru producie i alta
necomprimat (pentru debugging).
Ambele versiuni pot fi downloadate de pe jQuery.com
sau
Se poate folosi libraria jQuery de pe calculatorul personal, prin acces
direct de pe site-urile Google sau Microsoft ca i CDN (Content
Delivery Network), prin apelul:
Google

<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

Microsoft
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery1.9.1.min.js">
</script>
</head>

Interactiunea cu elementele HTML

Pentru a putea interactiona cu elementele HTML in pagina, instructiunile


script-ului trebuie executate dupa incarcarea paginii, astfel tot codul jQuery se
scrie in interiorul unei functii speciale "document ready", aceasta executa
codul din ea dupa incarcarea paginii.
<script type="text/javascript" src="jquery_file.js"></script>
$(document).ready(function() {
// tot codul jQuery se scrie aici
});

jQuery library este un fisier singular JavaScript , referirea se face n HTML


seciunea <head>
<head>
<script src="jquery-1.12.0.min.js"></script>
</head>
Nu apare type="text/javascript" in <script> deoarece n HTML5 JavaScript este
default scripting language la fel ca n toate browserele moderne
Cu jQuery este selectat (query) elementul HTML i se execut "actions" asupra

lui.

Selectori de az
#id Selecteaz un singur element cu atributul id dat.
$("#myDiv").css("border","3px solid red");
element Selecteaz toate elementele cu numele dat.
$("div").css("border","3px solid red");
.class Selecteaz toate elementele cu atributul class dat.
$(".myClass").css("border","3px solid red");
* Selecteaz toate elementele (inclusiv head i body).
$("*").css("border","3px solid red");
selector1, selector2, selectorN Selecteaz elementele care

se potrivesc oricrui selector.

$("div,span,p.myClass").css("border","3px solid red");

Selectori pentru ierarhii

strmo descendent Selecteaz toi descendenii elementului

"strmo" specificai prin "descendent".

$("form input").css("border", "2px dotted blue");

printe > copil Selectez toate elementele copil specificate prin

"copil" ale elementului specificat prin "printe".


$("#main > *").css("border", "3px double red");

anterior + urmtor Selecteaz toate elementele specificate prin

"urmtor" care se afl lng elementele specificate prin


"anterior".
$("label + input").css("color", "blue").val("Labeled!")

prev ~ siblings Selecteaz toate elemente copil de pe acelai

nivel specificate prin "siblings" care urmeaz elementului


specificat prin "prev".
$("#prev ~ div").css("border", "3px groove blue");

Filtre de az
:first Corespunde primului element selectat.

$("tr:first").css("font-style", "italic");
:last Corespunde ultimului element selectat.
$("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});
:not(selector) Filtreaz elementele specificate prin selectorul dat.
$("input:not(:checked) + span").css("background-color", "yellow");
:even Selecteaz elementele cu indexul par, indexarea fcndu-se de la 0.
$("tr:even").css("background-color", "#bbbbff");
:odd Selecteaz elementele cu indexul impar, indexarea fcndu-se de la 0.
$("tr:odd").css("background-color", "#bbbbff");
:eq(index) Selecteaz un singur element specificat prin indexul su.
$("td:eq(2)").css("color", "red");
:gt(index) Selecteaz toate elementele cu indexul mai mare dect cel
specificat.
$("td:gt(4)").css("text-decoration", "line-through");

Filtre de az (2)

:lt(index) Selecteaz toate elementele cu indexul mai mic dect

cel specificat.
$("td:lt(4)").css("color", "red");
:header Selecteaz toate elementele care sunt header, precum
h1, h2, etc.
$(":header").css({ background:'#CCC', color:'blue' });
:animated Selectez toate elementele care sunt animate n
momentul prezent.
$("#run").click(function(){
$("div:animated").toggleClass("colored");
});
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();

Filtre pentru oninut


:contains(text) Selecteaz toate elementele care conin textul

dat.
$("div:contains('John')").css("text-decoration", "underline");

:empty Selecteaz toate elementele care nu au copii (inclusiv

noduri text).
$("td:empty").text("Was empty!").css('background',
'rgb(255,220,200)');

:has(selector) Selecteaz toate elementele care conin cel putin

un element care corespunde cu selectorul specificat.


$("div:has(p)").addClass("test");

:parent Selecteat toate elementele care sunt prini, adic au

elemente copil sau doar text.


$("td:parent").fadeTo(1500, 0.3);

Filte pentru vizibilitate


:hidden Selecteaz toate elementele care sunt ascunse, sau elementele de tip <input
type="hidden">.
$("span:first").text("Found " + $(":hidden", document.body).length +

" hidden elements total.");


$("div:hidden").show(3000);
$("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");

:visible Seleteaz toate elementele care sunt vizibile.
$("div:visible").click(function () {

$(this).css("background", "yellow");
});
$("button").click(function () {

$("div:hidden").show("fast");
});
Exemple
$(".test")
$(document).ready(function(){

$("button").click(function(){

$(".test").hide();

});
});
Cnd utilizatorul click pe button, elementele cu class="test" vor fi hidden

Filte pentru atribute


[attribute] Selecteaz toate elementele care au atributul specificat
prin "attribute".
$("div[id]").one("click", function(){
var idString = $(this).text() + " = " + $(this).attr("id");
$(this).text(idString);
});

[attribute=value] Selecteaz toate elementele pentru care atributul


specificat are valoarea "value".
$("input[name='newsletter']").next().text(" is newsletter");

[attribute!=value] Selecteaz toate elementele care au atributul


specificat, dar pentru care acest atribut nu are valoarea specificat.
$("input[name!='newsletter']").next().text(" is not newsletter");

[attribute^=value] Selecteaz elementele care au atributul specificat


i care ncepe cu o anumit valoare.
$("input[name^='news']").val("news here!");

Filte pentru atribute (2)


[attribute$=value]
Selecteaz elementele care au atributul specificat i care

se termin cu o anumit valoare.

$("input[name$='letter']").val("a letter");

[attribute*=value]
Selectez elementele care au atributul specificat i care

conine o anumit valoare.

$("input[name*='man']").val("has man in it!");

[attributeFilter1][attributeFilter2][attributeFilterN]

Selecteaz elementele pentru a cror atribute se aplic


toate filtrele specificate.
$("input[id][name$='man']").val("only this one");

Filtre pentru elementele copil



:nth-child(index/even/odd/equation)
Selecteaz elemtele care sunt al n-lea copil al printelui, sau

elementele care sunt copil si au indexul par sau impar (elementele


sunt indexate de la 1, diferit fa de eq() care selectez doar un singur
element i care folosete indexarea de la 0).
$("ul li:nth-child(2)").append(" - 2nd!");


:first-child
Selectez elementele care sunt primul copil al printelui.
$("div span:first-child")
.css("text-decoration", "underline")
.hover(function () {
$(this).addClass("sogreen");
}, function () {
$(this).removeClass("sogreen");
});

Filtre pentru elementele copil (2)


:last-child Selecteaz elementele care sunt ultimul copil al

printelui.

$("div span:last-child")
.css({color:"red", fontSize:"80%"})
.hover(function () {
$(this).addClass("solast");
}, function () {
$(this).$(this).removeClass("solast");
});

:only-child Selecteaz elementele care sunt singurul copil al

printelui. Dac elementul printe mai are i ali copii, nimic nu


este selectat.
$("div button:only-child").text("Alone").css("border", "2px blue
solid");

Sintaxa jQuery
-este special conceput pentru selectarea Elementelor HTML i

efectuarea de aciuni cu aceste elemente.


Sintaxa de baza este:
$(selector).actiune()

semnul dolar $ pentru a defini cod jQuery


(selector) pentru a gasi "query/find" elementele HTML
actiune jQuery action() ce va fi executat pe elemente

Exemple:
$(this).hide()- ascunde elementul curent
$("p").hide() ascunde toate paragrafele
$("p.galben").hide()- ascunde toate paragrafele cu class="galben"
$("#test").hide()- ascunde elementul cu id="test"
jQuery folosete o combinaie de XPath i sintax CSS selector.

Sintaxa jQuery
Exemplu
$(".test")
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});

Cnd utilizatorul click pe button, elementele cu

class="test" vor fi hidden

Evenimentul Document Ready


Rol: pentru a preveni executarea codului jQuery nainte de ncrcarea complet
a documentului
jQuery folosete Selectori CSS pentru a selecta Elemente HTML.
toate metodele jQuery din exemple, sunt n interiorul document ready event:
$(document).ready(function(){
// metode jQuery
});

E o bun practic s atepte ca documentul s fie complet ncrcat nainte de a


lucre pe el.
Permite cod JavaScript n document , nainte de body, in seciunea head.
Exemple de aciuni care pot eua dac funciile sunt rulate nainte ca
documentul sa fie ncrcat complet:
se ncearc s se ascund un element care nu exist
se ncearc s se obin dimensiunea unei imagini care nu a fost ncrcat
Selectorii jQuery permit selectarea i manipularea Elementelor HTML ca un
grup sau ca un element singular. Selectorii jQuery va permit sa selectati
Elemente HTML (sau grupuri de elemente) n funcie de numele elementului,
numele atributului sau coninut.
Uzanele jQuery pun codul de initializare i funcii event handling in .ready().

Evenimentul Document Ready


Acestea sunt declanate cand browserul i-a construit DOM i trimite evenimentul load.
<script type="text/javascript">
$(document).ready(function(){
// jQuery cod
});
</script>
Functiile de apelare invers sunt incluse n .ready() ca funcii anonyme, dar sunt apelate
cnd evenimentul de callback este declanat.
Exemplu:
Cod jQuery ce adaug un event handler la mouse click pe un element image (img).
$(document).ready(function(){
$('img').click ( function() {
// manipulator la click event pe elemental img din pagin
});
});
Sintaxa echivalent:
$(document).ready(handler)
$(handler)

jQuery -tehnici
Inlnuirea
Fiecare comand jQuery ntoarce un obiect jQuery, aa nct

comenzile pot fi inlnuite:

$("div.test").add("p.quote").addClass("blue").slideDown("slow");

Aceast linie gsete unirea tuturor etichetelor de clas div cu

atributul test i toate etichetele p cu atribut de clas citat


(quote), adaug clasa atributului albastru (blue)pentru fiecare
element de potrivire, iar apoi crete nlimea lor, cu o animaie.
funciile $ i add afecteaz setul de potrivire, n timp ce
addClass i slideDown afecteaz nodurile care se face referire.

jQuery tehnici (2)


Crearea de noi elemente DOM
Pe langa accesarea nodurilor DOM prin ierarhia obiect jQuery, este posibil
crearea de noi elemente DOM, n cazul n care un ir trecut ca argument la $
arata ca HTML.
$('select#carmakes').append($('<option

/>').attr({value:"VAG"}).append("Volkswagen"));

Aceast linie gsete un element (TML cu )D-ul carmakes i adaug un


element de opiune cu valoare "VAG" i textul "Volkswagen":

Funcii utilitare
Functile prefixate cu $. Sunt funcii utilitare sau funcii ce afecteaz
proprietile i comportamentul global.
Exemplu: Funcion utilizat penru iterarea peste un arrays numit each in
jQuery:
$.each([1,2,3], function() {
console.log(this + 1);
});
Scrie "2", "3", "4" la consol.

Selectorii jQuery
Selectorii jQuery de Elemente
jQuery folosete Selectori CSS pentru a selecta Elemente HTML.
Exemple:
$("p") selecteaz toate elementele <p>.
$("p.ooo") selecteaz toate elementele <p> cu class="ooo".
$("p#sus") selecteaz toate elementele <p> cu id="sus".

Selectorii jQuery de Atribute


jQuery foloseste expresii XPath pentru a selecta elemente cu

anumite atribute.
Exemple:

$("[href]") selecteaz toate elementele cu un atribut href.


$("[href='#']") selecteaz toate elementele cu valoare href egal cu "#".
$("[href!='#']") selecteaz toate elementele cu atribut href DIFERIT de
"#".
$("[href$='.jpg']") selecteaz toate elementele cu atribut href ce se
termina cu ".jpg".

Selectorii jQuery de CSS


pot fi utilizati pentru a modifica proprieti CSS ale Elementelor

HTML.
Exemple:

$("p").css("background-color","red");
Se modific background-color la toate elementele <p> n rou.
$(this) Elementul HTML curent
$("p") Toate elementele <p>
$("p.ooo") Toate elementele <p> cu class="ooo"
$("p#ooo ") Toate elementele <p> cu id=" ooo "
$("p# ooo:first") Primul element <p> cu id=" ooo"
$(". ooo ") Toate elementele cu class=" ooo "
$("# ooo ") Primul element cu id=" ooo "
$("ul li:first") Primul element <li> al primei <ul>
$("ul li:first-child") Primul element <li> al tuturor <ul>
$("[href$='.jpg']") Toate elementele cu un atribut href care se termina cu
".jpg"
$("div# ooo.head") Toate elementele cu class="head" in interiorul unui
element <div> cu id=" ooo "

Metode jQuery de Evenimente


Este utilizat termenul "triggered sau "fired") de un eveniment.
Codul jQuery al metodei de gestionare a evenimentului este n seciunea
<head>.
Atat hide() cat si show() pot prelua 2 parametri optionali: viteza si callback.
Exemplu: Ascuderea tag-urilor p la click pe buton
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){$("p").hide();});});</script>
</head>
<body>
<h2>Acesta este un titlu</h2>
<p> Paragraf1.</p>
<p> Paragraf2.</p>
<button>Click</button>
</body>
</html>

La click pe butonul Click se declaneaz funcia function in care se apeleaza


metoda hide() pentru paragrafe (toate elementele p din document).

Metode jQuery de Evenimente (2)


Se poate i se recomand s se creeze un document seprarat care s

conin funciile jQuery si care s se salveze cu extensia js.


Acesta are rol se apleleze n head-ul documentului html:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"
src="document_jquery_functii.js"></script>
</head>
Observaii:

Semnul $ ca o scurttur pentru jQuery. Si alte librarii JavaScript

folosesc semnul dolar pentru funciile lor.


Metoda jQuery noConflict() specific un nume personalizat (precum
jq), n loc de semnului dolar.

Metode jQuery de Evenimente (3)


Exemplu: ascundere i afiare a paragrafelor la click pe butonul hide

respectiv show.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<h2>Acesta este un titlu</h2>
<p> Acesta este un paragraf.</p>
<p> Acesta este alt paragraf.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

Evenimente jQuery
$(document).ready(function)

Leaga o functie de evenimentul ready al unui

document (cand documentul este incarcat complet)


$(selector).click(function)
Declanseaza, sau leaga o functie de evenimentul click al elementelor
selectate

$(selector).dblclick(function) Declanseaza, sau leaga o

functie de evenimentul dublu click al elementelor


selectate
$(selector).focus(function) Declanseaza, sau leaga o
functie de evenimentul focus al elementelor selectate
$(selector).mouseover(function) Declanseaza, sau
leaga o functie de evenimentul mouseover al
elementelor selectate

Evenimente jQuery (2)


mouseenter()-metod ce ataeaz funcia event handler la

un element HTML.
Functia este executat cnd utilizatorul d enter pe mouse
pe elementul HTML
mouseleave() --metod ce ataeaz funcia event handler la
un element HTML.
Functia este executat cnd utilizatorul mouse-ul las
elementul HTML
mousedown()--metod ce ataeaz funcia event handler la
un element HTML.
Functia este executat cnd utilizatorul preseaz stnga,
dreapta sau jos mouse-ul pe elementul HTML
mouseup()- similar cu mousedown(), cnd utilizatorul nu
preseaz stnga, dreapta sau jos mouse-ul pe elementul
HTML

Evenimente jQuery (3)


hover() - metoda ia 2 functii, ca o combinative ntre metodele mouseenter() i
mouseleave().
Prima functie executat cnd utilizatorul da mouse enters pe elementul
HTML, i a doua and functie executat cnd utilizatorul las mouse de pe
elementul HTML
Exemplu:
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});

focus()-functie executat cnd utilizatorul este focalizat pe camp


Exemplu:
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
blur() opus lui focus functie executat cnd utilizatorul nu este focalizat pe camp
Exemplu:
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});

Evenimente jQuery (4)


Metoda on() -ataeaz una sau mai multe funcii event handler la un

elementele HTML selectate.


Exemple:
Atam click eveniment la elementul <p>:
$("p").on("click", function(){
$(this).hide();
});

Atam mai multi manipulatori eveniment la elementul <p>:


$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});

jQuery, Ascundere si Afisare


$(selector).hide(viteza,callback)
$(selector).show(viteza,callback)
Parametrul de viteza specifica viteza de ascundere/afisare,

si poate lua urmatoarele valori: "slow", "fast", "normal", sau


milisecunde.
Parametrul callback este numele unei functii ce va fi
executata dupa finalizarea functiilor hide (sau show).
Exemplu:
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});

jQuery toggle

Metoda comuta vizibilitatea Elementelor HTML folosind metodele show() sau


hide(). Elementele afisate sunt ascunse iar cele ascunse sunt afisate.
Sintaxa: $(selector).toggle(viteza,callback)
Parametrul viteza poate lua valorile: "slow", "fast", "normal", sau milisecunde.
Exemplu:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide_show").click(function(){
$("p").toggle("slow");
});
});
</script>
</head>
<body>
<h2>Acesta este un titlu</h2>
<p> Acesta este un paragraf.</p>
<p> Acesta este alt paragraf.</p>
<button id="hide_show">Hide/Show</button>
</body>
</html>

jQuery slide

Metodele jQuery slide schimba in mod gradual inaltimea elementelor selectate.


jQuery are urmatoarele metode slide:
$(selector).slideDown(viteza,callback)
$(selector).slideUp(viteza,callback)
$(selector).slideToggle(viteza,callback)
Parametrul viteza poate lua urmatoarele valori: "slow", "fast", "normal", sau milisecunde.
Parametrul callback reprezinta numele unei functii ce va fi executata dupa ce functia
curenta se termina.
Exemple:
slideDown():
$("#hide_show").click(function(){
$("h2").slideDown();
});
slideUp():
$("#hide_show").click(function(){
$(".h2").slideUp()
})
slideToggle():
$("#hide_show").click(function(){
$(".h2").slideToggle();
});

jQuery slide (2)


<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide_show").click(function(){
$("p").toggle("slow");
$("h2").slideUp();
$("h2").slideDown();
});
});
</script></head>
<body>
<h2>Acesta este un titlu</h2>
<p> Acesta este un paragraf.</p>
<p> Acesta este alt paragraf.</p>
<button id="hide_show">Hide/Show</button></body></html>

Prof.dr. Lucia Rusu


lucia.rusu@econ.ubbcluj.ro

[1]

JavaScript DOM
Metodele HTML DOM sunt actiuni care se pot efectua (pe elementele
HTML).
O metoda este o actiune precum adaugarea sau stergerea unui element
HTML.
Proprietatile HTML DOM sunt valori, ale elementelor HTML, care se
pot seta sau schimba.
O proprietate este o valoare (ca si continutul unui element HTML).
JavaScript poate crea HTML in mod dinamic:
schimba unele/toate elementele HTML din pagina
schimba unele/ toate atributele HTML din pagina
schimba unele/ toate stilurile CSS din pagina
elimina elemente si atribute HTML existente
adauga noi elemente si atribute HTML
reactioneaza la toate evenimentele HTML existente in pagina
creaza noi evenimente HTML in pagina

[1]

JavaScript DOM

Pagina web modelul DOM

[1]

Noduri DOM
DOM este o colectie de noduri:
Noduri Element
Noduri Atribut
Noduri de text
Cod HTML structura nodului, de tip element, p:
Nodul p contine un nod de tip text si un nod, de tip element, a.
Nodul a contine nodul, de tip atribut, href si un nod de tip text.

<p>Textul paragrafului contine un link <a


href="pagina.html">link</a></p>
Structura nodului p, de tip element poate fi reprezentata arborescent
DOM

[1]

Accesarea elementelor
Pentru a putea manipula elementele HTML, JavaScript trebuie sa

poata, in primul rand, sa gaseasca elementele. Acest lucru se


poate realiza prin intermediul id-ului, tag-ului sau numelui
clasei.
Metode de acces:

getElementById("Id")
Metoda acceseaza primul element cu Id-ul specificat. furnizeze
Id-ul elementului pe care dorim sa il accesam/manipulam este

obligatoriu.
getElementsByTagName("TagName")
Metoda acceseaza toate elementele cu tagul specificat.
numele tag-ului pe care dorim sa il accesam/manipulam este
obligatoriu.
getElementsByClassName("ClassName")
Metoda acceseaza toate elementele cu numele clasei specificat.
numele clasei pe care dorim sa o accesam/manipulam este
obligatoriu.

[1]

Manipularea elementelor
DOM ofera mai multe metode standard pentru
manipularea elementelor, atributelor si continutului
acestora.
element.innerHTML=
Permite modificarea continutului din cadrul unui
element HTML
element.attribute=
Permite modificarea atributului unui element HTML
element.setAttribute(attribute,value)
Permite modificarea atributului unui element HTML
element.style.property=
Permite modificarea stilului unui element HTML

[1]

Modificarea structurii DOM


DOM contine metode prin care permite schimbarea structurii documentului
HTML prin adaugarea si eliminarea nodurilor "on the fly".
Metodele sunt specifice obiectului document aflat la radacina ierarhiei :
document.createElement()
Permite crearea unui element HTML
document.createTextNode()
Permite crearea unui nod de tip text cu textul specificat pentru elementul HTML
document.appendChild()
Permite adaugarea unui element HTML
document.replaceChild()
Permite inlocuirea unui element HTML
document.removeChild()
Permite eliminarea unui element HTML
document.write(text)
Permite scrierea in fluxul de iesire HTML
Metodele sunt utile realizarii de meniuri dinamice, continut dinamic al paginii, look-andfeel personalizat,etc

[1]

Accesarea elementelor
document.getElementById("idElement")
Metoda returneaza elementul care are atributul de identitate egal cu
valoarea specificata.
Metoda returneaza null in cazul in care nu exista elemente cu ID-ul
specificat.
In cazul in care exista mai mult de un element cu ID-ul specificat,
metoda
getElementById() returneaza primul element.
una dintre cele mai comune metode din HTML DOM.
este folosita aproape de fiecare data cand se doreste manipularea, sau
obtinerea de informatii de la un element din cadrul documentului.

[1]

Accesarea elementelor (2)


document.getElementsByTagName("numeTag")
Metoda acceseaza toate elementele cu numele tagului specificat.
returneaza o colectie cu toate elementele din document, cu tagul
specificat, sub forma unui obiect NodeList.
Pentru a avea acces la anumite elemente din NodeList, vom face

referinta la indicele lor, la fel ca un array.


paragrafe = getElementsByTagName("p")
Pentru a accesa primul paragraf din document vom folosi

paragrafe[0],
pentru a accesa al doilea vom folosi paragrafe[1], etc.

[1]

Accesarea elementelor (3)


getElementsByClassName("numeClasa")
Metoda acceseaza toate elementele cu numele clasei specificate.
returneaza o colectie cu toate elementele din document, cu clasa
specificata, sub forma unui obiect NodeList.
Pentru a avea acces la anumite elemente din NodeList, vom face

referinta la indicele lor, la fel ca un array.


elementeLista = getElementsByClassName("elementeLista")
Pentru a accesa primul element din lista cu clasa elementeLista vom

folosi
elementeLista[0], pentru a accesa al doilea vom folosi
elementeLista[1],

[1]

Setarea valorii
Unui element:
elementHTML.innerHTML="text"
Proprietatea innerHTML seteaza sau returneaza continutul interioar al

unui element HTML.


ne ofera o metoda simpla pentru accesarea si modificarea textului
si elementelor din interiorul unui element.
Exemplu:
<p id="paragraf">Acest text va fi schimbat prin intermediul
innerHTML</p>
<script>
document.getElementById("paragraf").innerHTML="Eu sunt noul
text";
</script>

[1]

Setarea valorii (2)


Unui atribut:
element.setAttribute(numeAtribut, valoareAtribut)
Metoda setAttribute() adauga atributul specificat in cazul in care nu
exista si il seteaza la valoarea specificata.
In cazul in care atributul specificat deja exista, doar valoarea ii este
schimbata.
metoda necesita doua argumente: atributul a carei valoare trebuie sa fie
schimbata si noua valoare pentru atribut.
Exemplu:
<img src="poza1.jpg" id="poza" onclick="schimba()">
<script>
function schimba(){
document.getElementById("poza").setAttribute("src","poza2.jpg");
}
</script>

Manipularea stilurilor CSS


DOM permite adaugarea, modificarea, sau eliminarea unui stil CSS de la un
element folosind proprietatea style a elemenului.
document.getElementById("idElement").style.proprietateCss = "valoare";
Folosind scriptul si proprietatea style :

<p id="paragraf" onclick="schimbaStil()">Daca dai click pe mine ma inrosesc</h1>


<script>
function schimbaStil(){
document.getElementById("paragraf").style.color = "red";
}
</script>
In JavaScript si DOM, numele de proprietati, care sunt despartite in CSS (cum ar fi
background-color si border-top-width) devin (backgroundColor si
borderTopWidth), astfel incat caracterul - sa nu fie confundat cu un operator.

Manipularea nodurilor
Metodele DOM permit schimbarea structurii documentului HTML prin
adaugarea si eliminarea nodurilor "on the fly".
Pentru a adauga un nou
element (nod) in cadrul HTML DOM trebuie urmati doi pasi:
1.
creat elementul (nodul);
2.
trebuie adaugat la un element (nod) deja existent in cadrul documentului.

document.createElement(numeElement)
creeaza un element cu numele specificat si primeste un singur argument:
elementul care urmeaza sa fie creat.
Chiar daca elementul a fost creat, el va nu apare in cadrul paginii HTML.
Acesta va fi stocat in memorie pana in momentul in care JavaScript il va
adauga la document.

var divNou = document.createElement(div);


In variabila divNou a fost creat un element de tipul <div>.

Manipularea nodurilor (2)


Metoda createTextNode() creeaza un nod de tipul Text cu textul specificat.
document.createTextNode("text")
In mod normal elementele HTML sunt alcatuite atat dintr-un nod de tip
element cat si dintr-un nod de tip text.
Pentru a crea un antet (H1), trebuie sa creem atat un nod de tip element "H1"
cat si un nod de tipul text.
Cu metoda createTextNode() putem sa introducem text intr-un element pe
care le-am creat sau in unul deja existent in cadrul paginii.
La fel ca metoda createElement(), se creeaza o referinta la noul nod de tip text.
Nodul va fi stocat intr-o variabila si se poate adauga in orice moment la pagina.

var textDiv = document.createTextNode ("Acesta este textul pentru div");


In variabila textDiv a fost creat un nou nod de tip text.

Manipularea nodurilor (3)


nod.appendChild(nod)
Metoda appendChild() adauga un nod ca ultimul copil al unui nod.
Aceasta metoda primeste un singur argument: nodul pe care dorim sa il
adaugam la DOM.
In exemplele precedente am creat un nou element de tip div si am creat un nou
nod de tip text.
In continuare vom adauga nodul de tip text la elementul de tip div, iar apoi vom
adauga elementul de tip div documentului HTML.
<div id="divParinte"></div>
divNou.appendChild(textDiv);
document.getElementById(divParinte).appendChild(divNou);

Manipularea nodurilor (4)


Adaugarea unui nod inaintea altui nod cu medoda insertBefore()
nodParinte.insertBefore(noulNod, nodulExistent)
Metoda insertBefore() introduce un nod "copil", chiar inaintea altui nod copil

existent, pe care il specificam.


metoda introduce un element inaintea altui element.
Aceasta metoda primeste doua argumente: nodul pe care dorim sa il introducem,

respectiv elemen tul in fata caruia va fi introdus.


trebuie sa mentionam si parintele la care se va adauga elementul.
In cadrul div-ului cu id-ul divParinte, inaintea div-ului cu id-ul divNou vom adauga
un antet.
Exemplu:
var antet = document.createElement("h1");
var textAntet = document.createTextNode("Textul din antet");
antet.appendChild(textAntet);
divParinte.insertBefore(antet, divNou);

Manipularea nodurilor (4)


Adaugarea unui nod inaintea altui nod cu medoda insertBefore()
nodParinte.insertBefore(noulNod, nodulExistent)
Metoda insertBefore() introduce un nod "copil", chiar inaintea altui nod copil

existent, pe care il specificam.


metoda introduce un element inaintea altui element.
Aceasta metoda primeste doua argumente: nodul pe care dorim sa il introducem,

respectiv elemen tul in fata caruia va fi introdus.


trebuie sa mentionam si parintele la care se va adauga elementul.
In cadrul div-ului cu id-ul divParinte, inaintea div-ului cu id-ul divNou vom adauga
un antet.
Exemplu:
var antet = document.createElement("h1");
var textAntet = document.createTextNode("Textul din antet");
antet.appendChild(textAntet);
divParinte.insertBefore(antet, divNou);

Manipularea nodurilor (6)


nodParinte.removeChild(nodDeSters)
Metoda removeChild() elimina un nod copil specificat din cadrul unui
element specificat.
Aceasta metoda primeste un singur argument: nodul pe care dorim sa il
eliminam.
Trebuie sa tinem cont ca trebuie sa mentionam si parintele nodParinte
din cadrul caruia se va sterge elementul.
In cazul de fata vom sterge elementul cu id-ul antet din cadrul div-ului cu
id-ul divParinte.
divParinte.removeChild(antet);

Prof.dr. Lucia Rusu


lucia.rusu@econ.ubbcluj.ro

[1]

Funcii JavaScript
O functie JavaScript este:
un bloc de cod programat pentru a indeplini o anumita sarcina;
este executata in momentul in care este invocata de catre un anumit

eveniment;
este definita prin intermediul cuvantului cheie al functiei function,
urmat de un numele functiei, de paranteze (), iar codul se gaseste intre
acolade {}:
intre paranteze se pot gasi zero sau mai multi parametri (parametrul1,
parametrul2, ..., parametruln)
codul care va fi executat de catre functie este plasat in interiorul
acoladelor {}

function numeFunctie ( parametri ) {


codul care va fi executat;
}

[1]

Functii (2)
Functiile JavaScript native sunt cele care vin "out-of-the-box".
In JavaScript exista numeroase functii predefinite
Acestea sunt metode ale obiectelor fundamentale, obiectelor DOM,
HTML, browser, etc
Exemple:
Metode ale obiectului Window: alert(), confirm(), si prompt() aceste functii declanseaza casete de dialog la nivel de browser.
Metode ale obiectului Date(), day(), time() - returneaza data si ora
curenta.
Metode ale obiectului Math sqrt() - returneaza radacina patrata a
unui numar.
max() - returneaza cea mai mare valoare dintre mai multe numere.
min() - returneaza cea mai mica de zero sau mai multe numere.

[1]

JavaScript Functii(3)
function afiseazaMesaj( ) {
alert("Functia a fost apelata");
/* acest cod nu va rula pana in momentul in care
functia afiseazaMesaj() va fi apelata */
}

codul functiei

function afiseazaMesaj( );

function adunaNumere( a, b ) {
return a + b;
alert("Acest text nu va fi afisat");
/* acest cod nu va rula pana in momentul in care
functia adunaNumere() va fi apelata */
}
alert( function adunaNumere( 2, 3 ) );

// Alerts "5"

codul functiei

[1]

Variabile locale si globale


Variabila locala

este declarata in interiorul unei functii JavaScript, folosind var,


este vizibila si poate fi accesata numai in interiorul functiei.
pot avea acelasi nume in diferite functii, deoarece sunt recunoscute numai
de functia in care au fost declarate.
Argumentele (parametri) se comporta ca variabile locale in interiorul
functiilor.
Variabilele locale sunt create atunci cand functia incepe si sterse in
momentul in care functia este finalizata.

Variabila globala
este declarata in exteriorul unei functii.
este vizibila si poate fi accesata de catre toate script-urile si functiile din
cadrul paginii web.
Variabilele globale sunt sterse in momentul in care pagina web se
inchide.

[1]

Variabile locale
<!DOCTYPE html>
<html>
<body>
<div id="c1"></div>
<div id="c2"></div>
<script>
function myFunction() {
var a = 4; // variabila locala
document.getElementById("c1").innerHTML = a;
}
myFunction();
document.getElementById("c2").innerHTML = a;
</script>
</body>
</html>

[1]

Variabile globale
<!DOCTYPE html>
<html>
<body>
<div id="c1"></div>
<div id="c2"></div>
<script>
var a; // variabila globala
function myFunction() {
a = 4;
document.getElementById("c1").innerHTML = a;
}
myFunction();
document.getElementById("c2").innerHTML = a;
</script>
</body>

[1]

Functii anonime in variabile


<!DOCTYPE html>
<html>
<body>
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
<script>
function adunare(a, b) {
return a + b;
}
var x = function(a, b) {return a + b};
var y = adunare(2, 4);
document.getElementById("c1").innerHTML = x ;
document.getElementById("c2").innerHTML = y ;
document.getElementById("c3").innerHTML = x(2, 3);
</script>
</body>
</html>

[1]

Evenimente
Eveniment este o actiune care poate fi detectata de catre JavaScript.
JavaScript permite executarea unui cod in momentul in care sunt

detectate anumite evenimente.


Un eveniment HTML poate fi creat de catre browser, sau de catre
actiunile utilizatorului.
in JavaScript un eveniment este identificat si gestionat de catre un
handler de evenimente.
Un eveniment are loc in momentul in care se incarca o pagina web,
cand utilizatorul da clic pe un element sau misca cursorul mouse-ului
peste el.
<elementHTML eveniment="cod JavaScript">
Metode de tratare a evenimentelor din JavaScript:
Ca atribut HTML
Ca metoda atasata la element
Utilizarea addEventListener

[1]

Evenimente (2)
Tratarea ca atribut HTML
Se specifica functia care va fi rulata prin intermediul unui atribut in
cadrul elementului.
<button onclick="myFunction();">Click pe mine</button>
<button onclick="alert('Ai dat click pe mine')">Click pe
mine</button>
Se recomanda evitarea acestui mod de a atasa evenimente, pentru
elementele din cadrul
paginii web.
Tratarea ca metoda atasata la element
Putem atasa functii folosind diferite obiecte si metode incorporate in
JavaScript.
window.onclick = functiaMea;
/* functiaMea va rula cand
utilizatorul da clic in fereastra browser-ului */

Evenimente (3)
In acest caz putem folosi functii anonime in locul celor predefinite.
window.onclick = function () {
/ * Codul va rula in momentul in care utilizatorul da clic in fereastra
browser-ului */
};
Avantaj: de a simplifica si usura intretinerea codului,
Dezavantaj (destul de mare): Doar o singura functie se poate lega de
un eveniment la un moment dat.
window.onclick = functiaMea;
window.onclick = altaFunctie;

A doua atribuire o suprascrie pe prima.


Referirea la functiaMea este suprascrisa/pierduta.
Practic functia atasata este ultima din sirul instructiunilor

Utilizarea addEventListener
Permite pastrarea logicii si legarea mai multor functii la un eveniment.
ceva mai complexa
Legarea se face prin apelarea metodei addEventListener a obiectului tinta,
si apoi se specifica evenimentul si functia care va fi executata.
window.addEventListener ("click", functiaMea);
window.addEventListener ("click", altaFunctie);
se omite prefixul "on" evenimentului in cadrul acestei sintaxe.

Metodei addEventListener ii este atasata o functie anonima.


window.addEventListener ("click", function () { /* codul functiei */ });

[1]

. Tipuri de evenimente

[1]

Variabile string /Obiectul String


Sirurile de caractere sunt utile pentru stocarea datelor care pot fi
reprezentate sub forma de text.

<script>
var text = "Ana are mere";
// string
var text1 = text.toUpperCase(); // textul e convertic in litere mari
var text2 = text.toLowerCase(); // textul e convertic in litere mici
var text3 = text.replace("mere","pere"); //cuvantul mere e
inlocuit cu pere
var lungime = text.length;
// numarul de caractere din text
var cuvinte = text.split(" ");
// creaza un array in care
stocheaza cuvintele
alert(cuvinte[0]);
// se va afisa primul cuvant
din array
</script>

[1]

Metode ale obiectului String

[1]

Obiectul Math
este utilizat pentru calcule matematice i reprezint primul
exemplu de obiect static (nemodificabil) ->nu se folosete new
spre deosebire de sir care este instaniat.
este sensibil la litere mari i mici
Proprietile sunt definite cu majuscule: E, LN , LN , LOG E,
LOG10E, PI, SQRT 1_2, SQRT2.
Variabilele de tipul number sunt utile pentru stocarea valorilor
numerice.
var rotunjit = Math.round(4.7);
//returneaza 5
var random = Math.random(); // returneaza un numar intre 0 si 1
var maxim = Math.max(2, 3); //returneaza 3
var minim = Math.min(2, 3); //returneaza 2
var putere = Math.pow(2, 3); //returneaza 8
var radical = Math.sqrt(9);
//returneaza 3

[1]

Proprietati Math

Alte proprietati:
acos (num), asin (sum), atan(x), atan2(y,x) -arccosinus, arcsinus,arctangent;
sin (), cos() - sinus, cosinus;
ceil (num) - ntregul superior (mai mic ca numrul num) n virgul mobil;
exp (num) - funcia exponenial;
floor (num) - ntregul superior (mai mare numrul num) n virgul mobil;

[1]

Obiectul JSNumber
este un object acoperitor pentru valori numerice primitive i se creaz cu

new Number().
Sintaxa: var num = new Number(value);
Dac parametrul value nu poate fi convertit n numr, se ntoarce NaN (Nota-Number).
Proprieti:

constructor - ntoarce funcia ce creaz prototip obiect Number


MAX_VALUE ntoarce cel mai mare numr posibil n JavaScript
MIN_VALUE ntoarce cel mai mic numr posibil n JavaScript
NEGATIVE_INFINITY -( ntoarce la depire)
POSITIVE_INFINITY ( ntoarce la depire)
prototype- permite adugarea de proprieti i metode unui object

Metodele acestui obiect sunt:


toExponential(x)
- Converete un numr n notaie exponential
toFixed(x)- Formateaz un numr cu x digiti dup punctual zecimal
toPrecision(x) - Formateaz un numr la lungime x
toString()- Convertete obiectul Number n ir
valueOf()-ntoarce valoarea primitiv a obiectului Number

[1]

Obiectul Date
are proprieti constructor i prototype i are metode.
Crearea unei instane Date este realizat n 4 moduri:
var d = new Date();
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds,
milliseconds);

Variabilele de tipul date sunt utile pentru stocarea si lucrul cu date si ore.
var azi = new Date(); //se creaza un obiect de tipul date cu data
si ora curenta
var zi = azi.getDay();
//se afiseaza ziua
var luna = azi.getMonth();
//se afiseaza luna
var an = azi.getFullYear();
//se afiseaza anul
var ora = azi.getHours();
//se afiseaza ora curenta
var minut = azi.getMinutes();
//se afiseaza minutul curent
var secunda = azi.getSeconds(); //se afiseaza secunda curenta

[1]

Obiectul Date(2)

setDate( ) - seteaz data;


setHours( ) - seteaz ora;
setMinutes( ) - seteaz minutele;
setSeconds ( ) seteaz secundele;
setTime ( ) - seteaz timpul;
setYear ( ), setFullYear() - seteaz anul ( 2 si 4 digii).

[1]

Obiectul Array
Proprieti
constructor -ntoarce funcia ce creaz prototip obiect Boolean
length-seteaz sau ntoarce numrul de elemente din tablou
prototype- permite adugarea de proprieti i metode unui object
Metode
concat() reunete 2 sau mai multe tablouri, i ntoarce o copie a tablourilor reunite
indexOf()
join() reunete toate elementele dintr-un tablou n ir
pop() terge ultimul element din tablou i ntoarce acel element
push() adaug elemente noi la finalul unui tablou, i ntoarce noua dimensiune
reverse() inverseaz ordinea elementelor ntr-un tablou
shift()- terge primul element din tablou i ntoarce acel element
slice()-selecteaz o parte din array, i ntoarce noul tablou
sort() sorteaz elementele din tablou
splice() adaug /terge elemente din tablou
toString()- convertete valoarea Boolean la ir, i ntoarce rezultatul
unshift()- adaug elemente noi la sfritul unui tablou, i ntoarce noua lungime
valueOf() ntoarce valoarea primitiv a unui tablou

[1]

Obiectul Array (2)


<!DOCTYPE html>
<html>
<body>
<p id="paragraf"></p>
<p id="paragraf2"></p>
<script>
var masini = ["Audi", "Dacia", "Opel"];
//crearea unui array
document.getElementById("paragraf").innerHTML = masini[0]; //afisarea
unui element dintr-un array
masini[0] = "Mercedes";
//atribuirea unei valori unui
element dintr-un array
document.getElementById("paragraf2").innerHTML = masini[0];
</script>
</body>
</html>

Java Script
Proprieti Globale JavaScript

Infinity - valoare numeric + sau -


NaN -"Not-a-Number" valoare
undefined indic faptul c variabila nu are assignat valoare

Funcii Globale JavaScript


decodeURI() Decodific URI
decodeURIComponent() Decodific un component URI
encodeURI() Codific un URI
encodeURIComponent() - Codific un component URI
escape() terminator de ir
eval() evalueaz un ir i execut daca este cod script
isFinite() - Determin dac valoarea este finit, numr legal
isNaN()- Determin dac valoarea nu numr
Number() Convertete valoarea unui obiect n numr
parseFloat() - Convertete valoarea unui obiect n numr flotant
parseInt() -Convertete valoarea unui obiect n numr ntreg
String() - Convertete valoarea unui obiect n ir
unescape() decodeaza i codeaz un ir

Obiectul window
se asociaz unei ferestre browser i are ca fii documente,

location i history.
Aceste sub-obiecte componente nu se refer explicit, ci prin
metodele asociate:

document.write( )
window document.write( )

Proprieti: Closed, defaultStatus, document, frames,

history, location, name, navigator, opener, parent, Screen,


etc
Metode:
alert(), blur(), clearInterval(), clearTimeout(), close(),
confirm(), createPopup(), focus(), moveBy(), moveTo(),
open(), print(), prompt(), resizeBy(), resizeTo(), scroll(),
scrollBy(), scrollTo(), setInterval(), setTimeout(),etc
Manipulatori de eveniment
onLoad,
onUnload,
onFocus,
onBlur,
onError,
onResize

Obiectul navigator
este utilizat pentru a obine informaii despre tipul de browser ce va fi utilizat
la accesarea pagini, informaii extreme de utile cnd utilizatorul este nevoit s
(re) directeze n diferite pagini sau s execute taskuri specifice, dependente de
un browser specific.

Proprieti
appCodeName ntoarce numele intern al browserului, dar nu este att
important precizarea browserelor Mozilla n Firefox, Netscape, IE, sau Opera.
appName - ntoarce numele 'oficial' al browserului (spre exemplu IE ntoarce
Microsoft Internet Explorer i Firefox i Netscape ntorc ambele Netscape.
Utilizatorii Opera pot schimba identitatea browserelor, ca s apar ca Netscape,
Opera, sau Microsoft Internet Explorer.
appVersion - ntoarce versiunea browser (IE versiunea 4-6 apare 4.0 iar
Netscape 6 ntoarce 5.0. Firefox, ce ruleaza cu browser versiune 1.07, ntorce 5.0
deoarece folosete acelai motor Mozilla ca Netscape.
cookieEnabled este utilizat pentru a verifica dac browserul accept cookies:
platform

userAgent -ntoarce un ir ce conine browser, numr de versiune, sistem


de operare, exceptnd IE, default language pentru browser

Obiectul screen
furnizeaz informaii despre video display i setarea culorilor utilizatorului.
Aceste informaii ajut la formarea optim a datelor afiate ecranul pe ecranul
utilizatorului.

Proprieti

availHeight

availWidth

colorDepth

height

pixelDepth

width
Aceste 2 proprieti (availHeight, availWidth) ntorc zona actual vizibil n
fereastra browserului (the viewable portion of the screen within the browser),
spre deosebire de height i width care dau dimensiunea actual a ntregului
ecran (pixeli).
Redimensionarea ferestrei la valoare maxim poate fi realizat cu scriptul:
window.moveTo (0,0);
window.resizeTo (screen.availWidth, screen.availHeight); //
La nceput browserul se mut stnga sus (0,0) apoi browserul
redimensioneaz de la prezenta poziie sau poate fi mutat cu metoda moveTo
i redimensionat din noua poziie
window.moveTo (30,15);
window.resizeTo (screen.availWidth, screen.availHeight);

Obiectul history
este utilizat pentru a referi liste istoric ale URL-urilor vizitate anterior i are o
proprietate length care indic numrul de URL-uri nmagazinate sau lista
istoric.
Metodele proprii sunt:

back - deplasare la URL-ul anterior;


foreward ( ) - deplasare la pagina urmtoare;
go (where)

Metoda go este utilizat pentru navigarea n lista istoric, argumentul where

este numeric sau sir.


Un numr pozitiv deplaseaz nainte i cel negativ deplaseaz napoi; where
poate fi un ir = URL.
Exemplu:
<form>
<input type="Button" name="back" value="Go Back"
onClick="history.back()"> // inapoi
<input type="Button" name="forward" value="Go Forward"
onClick="history.forward()"> // inainte
</form>

history.go(1) // inainte
history.go(-2) // inapoi 2 pagini

Obiectul location
descrie URL-ul documentului i are proprieti reprezentnd variante componente
ale URL: partea de protocol, partea hostname, path, numr port.
Metoda toString se utilizeaz pentru conversia la ir.
Location ine informaii despre URL-ul unde acceseaz browserul i conine
parametri ai HTML-ului examinat via butonul Submit sau prin procedur submit.
Proprieti
hash
host
hostname
href
pathname
port
protocol
search
Metode:
assign()- ncarc un nou document
reload()- rencarc un document
replace()- nlocuiete un nou document cu altul nou

Prof.dr. Lucia Rusu


lucia.rusu@econ.ubbcluj.ro

Java Script - Rol i funcionalitate

[1]

JavaScript este un limbaj descriptiv, compact, orientat-obiect, dezvoltat

de Netscape pentru realizarea aplicaiilor client-server pe Internet.


JavaScript are un un limbaj interpretativ usor, dar foarte complex si
puternic;
Client-side JavaScript extinde nucleul limbajului prin suplimentare
cu obiecte de control al browser-ului precum i Document Object
Model (DOM).
extensiile client-side permit aplicaiilor plasarea elementelor n forme
(TML form i rspund la evenimente utilizator mouse click,
introducere de date n formulare input, navigarea n pagin).
Server-side JavaScript extinde nucleul limbajului prin suplimentare
cu obiecte relevante pentru a rula pe server, permind unei aplicaii s
comunice cu baze de date relaionale, s furnizeze continuitatea
informaiilor dintr-o invocare a altor aplicaii, s manipuleze fiiere de
pe server.
JavaScript are un model de obiecte, pe instane simple, oferind i
capaciti semnificative utilizarea funciilor fr cerine speciale de
declaraii

[1]

Java Script funcionarea scripturilor


Utilizator

Eveniment
utilizator

Aciune

Manipulator
eveniment
Funcie
Obiecte
Browser

Obiecte
HTML

Obiecte
definite de
utilizator

Obiecte
Fundamentale

Java Script
Metode ale
obiectelor

Proprieti ale
obiectelor

[1]

Java Script funcionarea scripturilor


Modul de funcionare a unui script JavaScript se bazeaz pe paradigma
cerere rspuns [4.1]:
utilizatorul declaneaz un eveniment (click de mouse, selectia unei
legturi sau editare ntr-un cmp, etc.);
prin manipulatorul de eveniment asociat, este apelat funcia inclus
n tagul <script>function funct() {...}</script>
funcia funct() utilizeaz obiectele HTML existente, obiectele
Browser precum i obiectele fundamentale cu proprietile i metodele
acestora i efectueaz o aciune pe baza datelor (dac exist) furnizate
de navigator;
scriptul returneaz rezultatul obinut i l formateaz astfel ncat s
fie inteligibil de ctre serverul Web;
aciunea asociat poate fi interogarea unei baze de date, calcularea
unei variabile sau apelarea unui program rezident pe sistem.
serverul Web recepioneaz rezultatul de la script i l trimite
navigatorului care l formatez i l afieaz utilizatorului.

[1]

JavaScript
Realizarea script-urilor care reactioneaza la evenimente/

comportamentul sau datele introduse de catre utilizator;


Validarea datelor de intrare introduse in cadrul unui formular;
Realizarea schimbului de informatii intre documentul curent si
server. (prin intermediul Ajax, fara a reincarca pagina web);
Crearea meniurilor dinamice si adaptarea continutului in functie
de click-urile utilizatorilor;
Manipularea arborelui DOM pentru a modifica structura si
continutul unei pagini HTML.
JavaScript permite:

schimbarea elementelor HTML/DOM

stergerea elemente HTML/DOM


crearea de noi elemente HTML/DOM
copierea si clonarea elementelor HTML/DOM
schimbarea atributelor CSS

[1]

Java Script - limite


a fost creat cu scopul de a manipula pagini web;
Nu are caracterisicile unui limbaj de programare complex

gen C#, Java, ci este interpretativ


Nu este activat si suportat pe toate browserele, ceea ce
constituie un dezavantaj la dezvoltarea de aplicatii web.
orice browser ce nu suport JavaScript, ignor secvenele de
instruciuni precizate ca i comentarii.
a fost creat cu scopul de a manipula pagini web;
Nu poate accesa fisierele locale;
Nu poate accesa in mod direct o baza de date;
Nu poate accesa componentele hardware (USB, etc),
dispozitive mobile;

[1]

Java Script
JavaScript poate fi ncorporat ntr-un document HTML n dou situaii:
ca declaraii i funcii, folosind elementul <script>
ca metode de tratare a evenimentelor folosind elementele HTML
Poziionarea codului:
Fisier extern (declarat intr-un fisier *.js extern)
Script incorporat (incorporat in sectiunea de head sau body a documentului HTML)
<!DOCTYPE html>
<html>
<body>
<h1> Pagina Web</h1>
<p id="demo">Paragraf</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</body>
</html>

[1]

Scripturi -Pozitionare
Exemplu: modificare atribute in pagina HTML
<html><head>Test JavaScript </head>
<body>
function line() {
document.write("<hr align='center' width=50%>)
}
</script>
</body></html>

Ca fisier extern .js


<head>
< script type="text/ javascript" href="scriptulmeu.js">
</head>

Fisierul scriptulmeu.js contine urmatorul cod JavaScript:


alert("Salutare");

[1]

Scripturi Pozitionare (2)


In sectiunea <head>

In sectiunea <body>

<html>
<head>
<script>
alert("Salutare");
</ script >
</head>
<body>
Text oarecare
</body>
</html>

<html>
<head>
</head>
<body>
Text oarecare
<script>
alert("Salutare");
</ script >
</body>
</html>

Comentarii
Exista 2 metode de a folosi comentarii:
comentarea unei singure linii se face-> cu ajutorul //.
Orice text care apare dupa // si pana la sfarsitul unei linii, va fi ignorat
de JavaScript (nu va fi executat).
// Acesta este un comentariu care se intinde pe o singura linie.
comentarea mai multor linii incepe cu /* si se termina cu */.
Orice cod situat intre /* si */ va fi ignorat de JavaScript.

/* Acesta este un comentariu care se intinde pe mai multe linii.


Tot ceea ce este intre aceste caractere va fi
complet ignorat atunci cand se executa script-ul. */

[1]

. Tipuri, operatori i expresii


Cuvintele cheie sau cuvintele rezervate,
Literalii se folosesc pentru a desemna valori constante n

cadrul unui script Java


Intregi
+75 ntreg zecimal
O15 ntreg octal
Ox12FE4 (hexazecimal case-sensitive)
Virgul mobil:
4.5, 3.14159
-1.4e12 - constante cu exponent
Booleene: true, false
Constante caracter

(Escape), \

\n
\t

continuare n linia urmtoare

linie nou
tab orizontal

[1]

Variabile

Exemple:
var x=7;
var x,y1="19";
var lk="Vedem";
var y=null;
Declaratii:
numele unei variabile poate contine litere, numere si liniute de
subliniere "_".
numele trebuie sa inceapa cu o litera, cu semnul $ sau _. Se
recomanda ca numele variabilei sa inceapa tot timpul cu o litera:
numele variabilelor nu pot contine spatii:
numele variabilelor nu pot contine caractere speciale precum (! @ #
% . , / \ + * = etc).
pentru a declara mai multe variabile intr-o declaratie vom incepe
declaratia cu var si vom separa variabilele prin virgula:
var varsta = 20, prenume = "Cristina";

[1]

Tipuri de date in JavaScript


Tipuri de date distincte: Undefined, String, Number,
Boolean, Array si Object.

[1]

Operatori
Operatorii sunt folosii pentru a realiza anumite operaii elementare ntre
obiecte,
fiecare operator joac i rolul de separator ntre dou elemente lexicale
au proprieti similare cu cei din C: precedena (ordinea n care sunt
interpretai) i asociativitatea (direcia de evaluare).
Operatori aritmetici

[1]

Operatori de asignare

[1]

Operatori de comparare

[1]

Operatori logici

Operatorii de comparare acioneaz asupra irurilor i numerelor, iar la nivel de


ir compararea se face folosind dicionarul:
Exemplu: "Bunuri"<"servicii" rezultat true
Evaluarea lene (lazy evaluation) este realizat de la stnga la dreapta pentru
regula i-sau a operatorilor i este folosit cu precdere n interiorul buclelor for
i loop.
Operatorii de atribuire i agregare pot fi combinai cu operatorii aritmetici sau
logici astfel:
x+=7;//x=x+7
y*=19.4; //y=y*19.4
z|=OxAA7700; // zVOxAA7700
w>>>=10; //shift (fr semn) cu 10 bii a lui w

[1]

Operatori speciali
permit manipularea expresiilor sau obiectelor:
?:Condiie reprezint un tip de structur if...else unde condiia
este plasat nainte de (?) iar valoarea este plasat n fiecare parte a
(:);
, (Virgula-Comma) este utilizat n procesarea n serie a expresiilor;
delete Delete terge un obiect, proprietate, sau element dintr-un
tablou
in In este utilizat pentru a inspecta coninutul unui obiect
specificat;
instanceof Instanceof testeaz dac un object este instan a unui
obiect specificat;
new New creaz o instan a unui obiect specificat;
this This refer obiectul curent;
typeof Typeof identific tipul valorii ce este evaluat;
void Void evalueaz o expresie fr a ntoarce o valoare;
JavaScript este case sensitive

[1]

Structuri de control
Declaratiile conditionale sunt utilizate pentru a efectua diferite actiuni in
functie de diferite conditii.
if( conditie ) {
// executa acest cod in cazul in care conditia este adevarata
}
else {
// executa acest cod in cazul in care conditia nu este adevarata
}

var a = 2, b = 4;
if( a < b ) {
alert (" a este < decat b ");
}
else {
alert (" a este > decat b ");
}

[1]

Structuri de control (2)


for este folosita pentru a executa un bloc de cod de un anumit numar de

ori
sintaxa:

for (initializeaza variabila, testeaza conditie, modifica valoarea;)


{

// executa acest cod in cazul in care conditia este adevarata


}

for ( var i = 1; i < 3; i++ ) {


alert ("The number is " + i);
}
Dac se omite condiia de ieire din ciclu, atunci n mod obligatoriu
apar instruciuni de forare a ieirii iar for( ; ; ) este echivalent cu while
(true). Dac variabila este utilizat doar n interiorul unui bloc, for
poate fi declarat la nceputul blocului.
for var x= , x<= , x++ {}

Pentru iniializri multiple se folosesc variabile separate prin virgul:


for (var x=1, lcont=0; lcont<100, x<=10; x++, lcont++ {}

unde x i lcont sunt cele dou variabilele din ciclu.

[1]

Structuri de control (3)


Instruciunile do/while
while (exprL) {
instruciuni;}

permite execuia grupului de instruciuni pn cnd expresia logic


expL evaluat este adevrat.
do {
// executa acest cod in cazul in care conditia este adevarata
} while (condition);
Exemplu:
var i = 3;
var x=1;
var xsuma=0;
while (x<10){
xsuma+=x;
x++;
}

do {
alert ("Numarul este " + i);
i++;
} while (i < 3)

Terminarea forat a ciclului poate fi realizat cu instruciunea

break plasat n interiorul corpului de instruciuni.

[1]

Structuri de control (4)


Instruciunea break
determin ntreruperea fluxului normal de execuie i se folosete n corpul
instruciunilor switch, while, do, for. Controlul se trece la prima instruciune de dup
cele condiionale sau repetitive (switch, while, do, for).

Exemplu:
var x=1;
var xodsum=0;
var xtrup=0;
var ultimx=0;
while (true){
xtrup+=xodsum+x;
if (xtrup>100)
break;
xodsum+=x;
x+=2;
}
ultimx=x;
Instruciunea continue
este similar cu break i se folosete n corpul instruciunilor iterarive ca: while, for.

Prof.dr. Lucia Rusu


lucia.rusu@econ.ubbcluj.ro

[1]

Tiuri INPUT in HTML5


HTML5 are noi tipuri input pentru formulare.
permit un control i o validare mai bun a introducerii datelor i sunt:
color
date
datetime
datetime-local
email
month
number

range
search
tel
time
url
week

Valoarea cmpulurilor date, datetime, datetime-local, email, month, tel,


url este automat validat cnd forma este submis.
Drag and drop este parte a standardului HTML5, orice element poate fi
draggable.

[1]

HTML5 (2) Exemplu

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true ondragstart="drag(event)" width="336" height="69">
</body>
</html>
<script>

[1]

Elemente CSS3
Specificaiile CSS3 sunt dezvoltate de W3C, multe proprieti

CSS3 au fost implementate n browsere moderne.


CSS3 este perfect compatibil cu versiuni anterioare, suport
CSS2.
este divizat n "module".
Cele mai importante module CSS3 sunt:

Selectors
Box Model
Backgrounds and Borders
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface

[1]

Proprietatea border-radius

Folosind CSS se pot crea borduri rotunjite, aduga umbre, se pot folosii
magini ca bordura, fr a utiliza programe de design, ca i Photoshop.
Proprieti border:
border-radius
box-shadow
border-image

border-radius
permite adaugarea de colturi rotunjite la borduri.
Putem controla fiecare colt al casetei utilizand patru proprietati distincte:
border-top-right-radius - defineste forma bordurii din coltul dreapta sus
border-bottom-right-radius - defineste forma bordurii din coltul dreapta jos
border-bottom-left-radius - defineste forma bordurii din coltul stanga jos
border-top-left-radius - defineste forma bordurii din coltul stanga sus

Putem specifica, margini si spatieri diferite pentru cele patru valori intr-o singura
proprietate. Valorile vor aparea in sensul acelor de ceasornic: sus, dreapta, jos,
stanga.

[1]

Proprietatea border-radius
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 250px;
background: #FFFF99;
padding: 10px 30px 10px 30px;
border-radius: 5px;
border: 1px solid #9933FF; }
div.deosebit {
border-top-left-radius: 1em;
border-top-right-radius: 3em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 4em; }
</style>
</head>
<body>
<div>Acest text se afla in cadrul unui DIV</div><p>
<div class="deosebit">Acest text se afla in cadrul unui DIV ce contine o formatare mai
deosebita</div>
</body>
</html>

[1]

Proprietatea box-shadow
permite adaugarea unei umbre in jurul casetelor

none
h-shadow
h-shadow
blur
spread
color

Nu se afiseaza nici o umbra


Pozitia umbrei pe orizontala. Sunt permise si valori negative
(Obligatoriu)
Pozitia umbrei pe verticala. Sunt permise si valori negative
(Obligatoriu)
Creaza un efect de blur (Optional)
Dimensiunea umbrei (Optional)
Culoarea umbrei. Valoarea implicita este negru (Optional)

[1]

Proprietatea box-shadow
<!DOCTYPE html>
<html>
<head>
<style>
*{ padding:10px; }
h1{ box-shadow: 2px 2px 5px
#FF33CC; }
span{ box-shadow: inset 0px 0px
10px #3366CC; }
</style>
</head>
<body>
<h1>Acest text se afla in cadrul
H1</h1>
<span>Acest text se afla in cadrul
unui SPAN</span>
</body>
</html>

[1]

Proprietatea background-origin

determina modul in care se calculeaza pozitia


de fundal.

[1]

Proprietatea background-origin
<html>
<head>
<style>
div {
border: 25px dashed #0099FF;
padding: 35px;
background-image: url('sigla.gif');
background-repeat: no-repeat;
background-position: left; }
#div1 { background-origin: border-box; }
#div2 { background-origin: padding-box; }
#div3 { background-origin: content-box; }

</style>
</head>
<body>
<div id="div1">Sunt in bordura</div><p>
<div id="div2">Sunt in padding</div><p>
<div id="div3">Sunt in continut</div><p>
</body>
</html>

[1]

Proprietatea text-shadow
permite adaugarea unei umbre la text.

[1]

Proprietatea text-shadow
<!DOCTYPE html>
<html>
<head>
<style>
h1 { text-shadow: 3px 3px 3px #9999FF; }
</style>
</head>
<body>
<h1>Textul acesta are o umbra</h1>
</body>
</html>

[1]

Proprietatea word-wrap
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 350px;
border: 1px solid #9999FF; }
.divwrap { word-wrap: break-word; }
</style>
</head>
<body>
<div>Acest paragraf contine un cuvant foarte lung
acestcuvantestefoartelungsitrebiedespartitpentrucasanudeformezetemplate

ul.
Cuvantul de mai sus nu se rupe si iese in afara divului.</div><p>
<div class="divwrap">Acest paragraf contine un cuvant foarte lung
acestcuvantestefoartelungsitrebiedespartitpentrucasanudeformezetemplate
ul.
Cuvantul de mai sus se rupe si continua pe urmatoarea linie.</div>
</body>
</html>

[1]

Proprietatea @font-face
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: fontul_meu;
src: url(fontul_meu.ttf); }
h1 { font-family: fontul_meu; }
</style>
</head>
<body>
<h1>Acest text arata mult mai bine scris cu fontul fontul
meu personalizat</h1>
</body>
</html>

[1]

Proprietatea opacity
<!DOCTYPE html>
<html>
<head>
<style>
a:link { color: blue; }
a:hover {
color: blue;
opacity: 0.5; }
</style>
</head>
<body>
<a href="#">La mouse over opacitatea e la 50%</a>
</body>
</html>

CSS3

Font Descriptors
font-family Name
Required. Definete numele fontului
src
URL
Definete URL pentru font file
font-stretch normal, condensed ,ultra-condensed, extra-condensed, semi-

condensed, expanded, semi-expanded, extra-expanded, ultra-expanded

font-style normal, italic, oblique


font-weight normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900

optional, Definete rang caractere UNICODE pentru


font. Implicit "U+0- FFFF

unicode-range

User Interface
)n CSS , apar faciliti noi de interfa user: redimensionarea elementelor, a
chenarelor,etc.
Proprieti
resize
box-sizing
outline-offset

CSS3

CSS3 Resizing Elementul div este redimensionabil de utilizator n Firefox +, Chrome, i Safari .
div
{
resize:both;
overflow:auto;
}
CSS3 Box Sizing permitedefinirea elementelor certe pentru a fixa zona.
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}
CSS3 Outline Offset deseneaz n spatele marginii border i difer de border: Outlines nu ia
dinspaiu si poate fi non-rectangular
div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
Proprieti: appearance, box-sizing, icon, nav-down, nav-index, nav-left, nav-right, nav-up, outlineoffset, resize

Prof.dr. Lucia Rusu


lucia.rusu@econ.ubbcluj.ro

[1]

HTML5
HTML5 a aprut n 2012 din necesitatea de a extinde

funcionalitile i dinamismul paginilor Web.


este o cooperare dintre World Wide Web Consortium
(W3C) i Web Hypertext Application Technology Working
Group (WHATWG).
integreaz noi faciliti dintre care :
<canvas> pentru desene 2D
<video> i <audio> pentru media playback
suport pentru memorare local
coninut specific al elementelor: <article>, <footer>,
<header>, <nav>, <section>
noi controale ale formularului: calendar, date, time, email,
url, search
noi elemente Semantice/Structurale

[1]

HTML5 (2)
Avantajele HTML5 :
Faciliti noi bazate pe (TML, CSS, DOM, i JavaScript
Reducerea nevoii de plugins externe (Flash)
Manipularea bun a erorilor
Marcatori de nlocuire a scripturilor
Elemente (din HTML 4.01) la care s-a renunat n HTML5 :

<acronym>, <applet>, <basefont>, <big>, <center>, <dir>,


<font>, <frame>, <frameset>, <noframes>, <strike>, <tt>
In HTML5 apare o singur declaraie <!doctype>, simpl:
<!DOCTYPE html>

[1]

Elemente de structurare HTML5


<article>
Definete un articol
<aside>
Definete coninut aside fat de coninutul paginii
<bdi>)zoleaz o parte din text ce poate fi formatat n diferite direcii

fa de alt text
<command> Definete un buton de comand pe care utilizatorul
poate s-l invoce
<details>
Definete detailii adiionale pe care utilizatorul poate s
le vad sau s le ascund
<summary> Definete un heading visibil pentru elemental <details>
<section>
Definete o seciune n document
<footer>
Definete un footer pentru document sau sectiune
<header>
Definete un header pentru document sau sectiune
<hgroup>
Groupeaz un set de elemente <h1> la <h6> cnd
headingurile au mai multe nivele
<mark>
Definete text marcat/highlighted
<wbr>
Definete o posibil line-break

[1]

Elemente de structurare HTML5 (2)


<meter>
<nav>
<figure>

Definete msur scalar cu rang determinat


Definete link-uri navigation
Specific un coninut specific ca i ilustraii, diagrame,

foto, cod, etc.


<figcaption> Definete o captur pentru elementul <figure>
<progress> Reprezint progresul unui task
<time>
Definete data/ora

Alte elemente de de structurare:


<ruby> -Definete ruby annotation (pentru tipografie East Asian),
<rt> Definete explicaii /pronunie a caracterelor (pentru tipografie

East Asian),
<rp> Definete ce apare n browsers i nu suport ruby annotations

[1]

Elemente HTML5
Elemente Form, pentru a extinde funcionalitatea:

Specific o list de opiuni pre-definite


pentru controale input
<keygen> Definete generator de cmp ca perechi de chei
(pentru formulare)
<output> Definete rezultatul calculelor
<datalist>

Elemente Media

<audio> Definete coninut sound


<video> Definete un video sau film movie
<source> Definete media resurse multiple pentru <video> i

<audio>
<embed> Definete un container pentru aplicaii externe sau
coninut interactiv (plug-in)
<track> Definete text tracks pentru <video> i <audio>

[1]

Elementul <audio>

[1]

Elementul <audio> Exemplu


<!DOCTYPE html>
<html>
<head>
<title>Adaugarea fisierelor audio cu HTML5</title>
</head>
<body>
<audio controls>
<source src="relax.mp3" type="audio/mpeg">
<source src="relax.wav" type="audio/wav">
<source src="relax.ogg" type="audio/ogg">
In cazul in care browserul nu suporta elementul audio se afiseaza
acest mesaj.
</audio>
</body>
</html>

[1]

Elementul <video>

[1]

Elementul <video> Exemplu


<DOCTYPE html>
<html>
<head>
<title>Adaugarea fisierelor video cu HTML5</title>
</head>
<body>
<video width="640" height="480" controls>
<source src="dogs.mp4" type="video/mp4">
<source src="dogs.ogg" type="video/ogg">
<source src="dogs.webm" type="video/webm">
In cazul in care browserul nu suporta elementul
video se afiseaza acest mesaj.
</video>
</body>
</html>

[1]

Elemente DOM n formulare


Elementul <datalist>
specific o list de opiuni pre-definite pentru element <input>.
Este utilizat pentru a furniza faciliti de "autocomplete" n

<input>. Utilizatorul vede lista drop-down cu opiuni predefined ca i datele de intrare. Un element <input> leag lista de
atribute din <datalist>.
Exemple
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

[1]

Elemente DOM n formulare


<form action="script.php" method="get">
<input list="tip" name="browser">
<datalist id="tip">
<option value="Apartament 1 camera">
<option value="Apartament 2 camere">
<option value="Apartament 3 camere">
<option value="Apartament 4 camere">
<option value="Apartament 5 camere">
</datalist>
<input type="submit">
</form>

[1]

Elemente DOM n formulare


Atribute noi pentru

<form>:
autocomplete
novalidate
Atribute noi pentru

<input>:

autocomplete
autofocus
form
formaction

formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step

[1]

Elemente DOM n formulare (2)


Atributul autocomplete specific dac o form sau un camp pot

/sau nu s aib autocomplete.


Cnd autocomplete este on, browser-ul completeaz automat
valori bazat pe valorile anterior introduse de utilizator. Este
posibil ca forma s aib autocomplete "on", i "off" pentru un
camp specific, sau invers.
Atributul autocomplete funcioneaz cu <form> i cu
urmtoarele tipuri <input>: text, search, url, tel, email,
password, datepickers, range, i color.
Exemplu:

<form action="demo_form.asp" autocomplete="on">


First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>

[1]

Elemente DOM n formulare (2)


Atributul novalidate este Boolean i specific dac forma-

datele de intrare(input) trebuie validate la submit.


Exemplu
<form action="demo_form.asp" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>

Atributul autofocus <input> este Boolean i specific dac

elementul <input> va fi focalizat la ncrcarea paginii.


Exemplu:
Cmpul "First name" va fi focalizat la ncrcarea paginii:
First name:<input type="text" name="fname" autofocus>

[1]

Elemente DOM n formulare (3)

Atributul form <input> form specific dac mai multe formulare au n comun elementul <input>.
Pentru a referi mai multe formulare, se utilizeaz spaii ce separ lista de id a formularelor.
Exemplu
<form action="demo_form.asp" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
Last name: <input type="text" name="lname" form="form1">
Cmpul lname aparine formularului form1.

Atributul formaction <input> specific URL-ul unui fiier ce va procesa controlul intrrilor cnd
formularul este submis. Acesta suprascrieaciunea atributului din elementul <form>.
Atributul formaction este utilizat cu type="submit" i type="image".
Exemplu
Un formular HTML cu 2 butoane submit , cu diferite aciuni:
<form action="demo_form.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="demo_admin.asp"
value="Submit as admin">
</form>

[1]

Elemente DOM n formulare (4)


Atributul formenctype <input>
specific modul n care datele din form vor fi codificate la trimiterea pe

server (doar n formulare cu method="post").


suprascrie aciunea atributului din elementul <form>.
este utilizat cu type="submit" i type="image".
Exemplu
Se trimit date din form codificate implicit (primul submit button), i apoi
codificate ca "multipart/form-data" (al doilea submit button):
<form action="demo_post_enctype.asp" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>

[1]

Elemente DOM n formulare (5)


Atributul formmethod <input>
Definete metoda HTTP de trimitere a datelor din form action la URL.
Suprascriea ciunea atributului din elementul <form>.
formmethod este utilizat cu type="submit" i type="image".
Exemplu

Buttonul al doilea submit suprascrie (post ) metoda HTTP din form


(get) :
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formmethod="post"
formaction="demo_post.asp"
value="Submit using POST">
</form>

[1]

Elemente DOM n formulare (6)


Atributul formnovalidate <input>specific dac elementul <input> trebuie
validat cnd este submis.
valori Boolean, suprascrie aciunea atributului din elementul <form>.
este utilizat cu type="submit".

Exemplu
Apar 2 butoane submit (cu i fr validare):
<form action="demo_form.asp">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Submit without validation">
</form>

Atributul formtarget <input> specific un nume sau cuvnt cheie (keyword) ce


indic unde va fi afiat rspunsul primit dup trimiterea formularului.
Suprascrie aciunea atributului din elementul <form>

este utilizat cu type="submit" i type="image".


Exemplu
<input type="submit" formtarget="_blank value="Submit to a new window>

[1]

Elemente DOM n formulare

Elementul <keygen>
Scopul este de a furnmiza securitate la autentificarea user-ilor.
Tag-ul <keygen> specific un generator de ci pereche n form.
Cnd form este submis, sunt generate 2 chei : una privat i una public. Cheia privat
este memorat local, cheia public este trimis la server. Cheia public poate fi utilizat
pentru a genera certificatul client pentru autentificarea user-ului pe viitor.
Exemple
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>

Elementul <output>
reprezint rezultatul calculelor (ca i cum sunt executate de un script).
Exemple
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" name="a" value="50">100 +
<input type="number" name="b" value="50">=
<output name="x" for="a b"></output>
</form>

[1]

Elemente DOM
Elementul <input type="number">
max
min
step
value

specifica valoarea maxima permisa


specifica valoarea minima permisa
specifica intervalele numarul legale
specifica valoarea implicita

Cantitatea (intre 1 si 10): <input type="number" name="cantitate" min="1" max="10">

[1]

Elemente DOM
Elementul <input type="range">
<!DOCTYPE html>
<html>
<body>
<form oninput="ales.value=parseInt(alege.value)">
1 <input type="range" id="alege" min="1" max="10" value="5"> 10
&nbsp; <input type="text" name="ales" size="3">
</form>
</body>
</html>

[1]

Atribute in formulare
Atributul placeholder

<form action="script. php">


<input type="text" name="prenume" size="25"
maxlength="50"
placeholder="prenume" /><br>
<input type="text" name="nume" size="25" maxlength="50"
placeholder="nume" /><br>
<input type="submit">
</form>
Atributul required
<form action="script.php">
<input type="text" name="prenume" size="25"
maxlength="50" placeholder="prenume"
required="required" /><br>
<input type="text" name="nume" size="25" maxlength="50"
placeholder="nume"
required="required"/><br>
<input type="submit">
</form

[1]

Elemente semantice n HTML5


HTML5 ofer noi elemente semantic care definesc diferite pri a paginii web:

<article>

<aside>

<details>

<figcaption>

<figure>

<footer>

<header>

<main>

<mark>

<nav>

<section>

<summary>

<time>

[1]

Elemente semantice (2)


Elementul<section> definete o seciune din document. W3C's HTML5: "O

seciune este o gropare tematic deconinut, cu un antet tipic"


Pagina home a unui Web sitepoate fi divizat n seciuni pentru introducere,
coninut i informaii de contact.
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
Elementul <article> specific un coninut independent.
Un articol trebuie s aib nteles de sine stttor i sa poate fi citit independent
de restul web site-ului.
Example de utilizare a elementului <article> : postri pe Forum, Blog, articol de
ziar/revista
<article>
<h1>Exemplu de articol</h1>
<p>Vom arta cum se poate folosi elementul n definirea unui articol pe Blog
</p>
</article>

HTML5 Layout

HTML5 Layout

[1]

Elemente semantice (3)


Elementul <header> specific un antet de document sau sectiune.
este utilizat ca i container pentru introducere. Pot exista cteva elemente
<header> ntr-un document.
<article>
<header>
<h1> Elemente semantice</h1>
<p> rol</p>
</header>
<p>Scopul acestor elemente este structurarea mai buna a documentelor Web.</p>
</article>

Elementul <footer> specific subsolul de document sau sectiune i poate


conine informaii despre elementele componente.
conine de obicei autorul documentului, copyright, legturi la termini de
utilizare, informaii de contact, etc. Pot exista cteva elemente <footer> ntr-un
document.
<footer>
<p>Posted by: Pop Ion</p>
<p>Contact information: <a href="mailto:popion@example.com">
popion@example.com</a>.</p>
</footer>

[1]

Elemente semantice (4)


Elementul <nav> definete un set de legturi de navigare.
Este proiectat pentru un bloc de legturi de navigare dei nu toate

legturile pot fi incluse n elementul <nav>


<nav>
<a href="/html/">HTML</a>
<a href="/css/">CSS</a>
<a href="/js/">JavaScript</a>
<a href="/jquery/">jQuery</a>
</nav>

Elementul <aside> deoparte definete o parte de coninut n afar

de coninutulul propriu-zis, i este plasat n ca o bara lateral .


Coninutul exterior ar trebui s aib legtur cu coninutul
nconjurtor.

<p>Pacientii au tendinta sa devina sedentari i in timp apare fenomenul denumit "hypokinetics".


</p>
<aside>
<h4> Hypokinetics </h4>
<p> este descries de specialistii ca o suita de schimbari fiziologice care apar datorita imobilitatii
i lipsei de activitate fizic regulat. </p>
</aside>

[1]

Elemente semantice (5)


Elementele <figure> i <figcaption>
sunt specifice capturilor de imagini din ziare sau carti, care sunt

nsoite de explicaii .
Cu HTML5, imaginile i capturile sunt groupate mpreun n elemente
<figure>:
<figure>
<img src="Muntele_Mare.jpg" alt="Muntele Mare " width="304"
height="228">
<figcaption>Fig1. Muntele Mare; Stana de oi </figcaption>
</figure>

Elementul <img> definete imaginea, elementul <figcaption>

definete captura.
Conform W3C, Semantic Web:"permite datelor s fie partajate de-a
lungul aplicaiilor, firmelor, comunitilor."

[1]

Migrarea la HTML5 de la HTML4 sau XHTML


HTML4

HTML5

<div id="header">

<header>

<div id="menu">

<nav>

<div id="content">

<section>

<div id="post">

<article>

<div id="footer">

<footer>

HTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML5<!DOCTYPE html>
HTML4
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
HTML5
<meta charset="utf-8>

[1]

Migrarea la HTML5 de la HTML4 sau XHTML


HTML4

HTML5

<div id="header">

<header>

<div id="menu">

<nav>

<div id="content">

<section>

<div id="post">

<article>

<div id="footer">

<footer>

HTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML5<!DOCTYPE html>
HTML4
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
HTML5
<meta charset="utf-8>

[1]

Migrarea la HTML5 (2)


HTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML5<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta charset="utf-8">
Stiluri CSS pentru elemente semantice HTML5:
header,footer,section,article {
border:1px solid grey;margin:5px;marginbottom:15px;padding:8px;background-color:white;
}
header,footer {
color:white;background-color:#444;margin-bottom:5px;
}
section {
background-color:#ddd;}
nav ul {
margin:0;padding:0; }
nav ul li {
display:inline; margin:5px;}

[1]

Migrarea la HTML5 (3)


Modificarea elementelor <div> cu id="header" si id="footer":
<header>
<h1> HTML5</h1>
</header>
<footer>
<p>&copy; 2016 </p>
</footer>
Modificarea elementelor <div> cu id="menu":
<div id="menu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</div>
HTML5 semantic elementul <nav>:
<nav>
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>

</nav>

[1]

Migrarea la HTML5 (4)


Se schimb elementul <div> cu id="content":
<div id="content">
</div>
HTML5 semantic elementul <section>:
<section>
/section>
Se schimb toate elementele <div> cu class="post":
<div class="post">
<h2>News Article</h2>
<p>Continut articol
</p>
</div>
HTML5 semantic elementele <article> :
<article>
<h2>News Article</h2>
<p> Continut articol
.</p>
</article>

[1]

Migrarea la HTML5 (5)


Exemplu:
<!DOCTYPE html>
<html lang="en">
<title>HTML5</title
>
<meta charset="utf8">
<style></style>
<body>
<header>
<h1>Pagina
Exemplu</h1>
</header>
<nav>
<ul>
<li>News</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</nav>

<section>
<h2>News Section</h2>
<article>
<h2>News Article</h2>
<p><Primul articol.</p>
</article>
<article>
<h2>News Article</h2>
<p><Al doilea articol.</p>
</article>
</section>

<footer>
<p>&amp;copy.</p>
</footer>
</body>
</html>

[1]

Migrarea la HTML5 (6)


<html>
<head>
<style>
header, footer, aside, article {
border: 1px solid violet;
background-color: #efefef;
margin: 5px;
padding: 5px;
display: block;}
#caseta {
width: 904px;
margin: auto;
border: 1px solid grey; }
article {
float: left;
width: 630px; }
aside {
float: left;
width: 230px; }
footer {
clear: left; }
</style>
</head>
<body>
<div id="caseta">
<header>Antet</header>
<aside>Meniu</aside>
<article>Zona de continut</article>
<footer>Subsol</footer>
</div>
</body>
</html>

Prof.dr. Lucia Rusu


lucia.rusu@econ.ubbcluj.ro

[1]

Box Model
Fiecare element de structura din cadrul unei pagini Web poate fi asimilat ca o
cutie/caseta (box) definita prin urmatoarele proprietati:

Margin permite stabilirea unei zone libere transparente in exteriorul

bordurii
Border permite adaugarea unei borduri in jurul elementului luat in
considerare
Padding permite stabilirea unei zone libere transparente in interiorul
bordurii
Content permite introducerea unui continut in cadrul elementului

[1]

Proprietatea border-width
este folosita pentru a controla latimea unei borduri.
Valoarea acestei proprietati poate fi specificata fie in pixeli sau folosind
una dintre urmatoarele valori:

thin - specifica o bordura subtire


medium - specifica o bordura de grosime medie
thick - specifica o bordura grosa

Putem controla dimensiunea individuala a bordurilor utilizand 4


proprietati distincte:
1.
2.
3.
4.

border-top-width - specifica latimea bordurii de sus


border-right-width - specifica latimea bordurii din dreapta
border-bottom-width - specifica latimea bordurii de jos
border-left-width - specifica latimea bordurii din stanga

[1]

Proprietatea border-width (2)


Putem specifica latimi diferite pentru cele patru valori ale
bordurii intr-o singura proprietate.
Valorile vor aparea in sensul acelor de ceasornic: sus, dreapta, jos, stanga.
<html>
<head>
<style>
div {
border: solid gray;
border-width: 5px 6px 10px 3px;
}
</style>
</head>
<body>
<div>Sus 5px, dreapta 6px, jos 10px, stanga 3px.</div>
</body>
</html>

[1]

Proprietatea margin
permite stabilirea unei zone libere transparente in exteriorul bordurii.
Aceasta zona nu este afectata de culoarea de fundal al elementului
preia culoarea de fundal al elementului in care este continuta.
Putem controla spatierea individuala din interiorul casetei utilizand 4
proprietati distincte:
1.
2.
3.
4.

margin-top - specifica spatierea din exterior in partea de sus


margin-right - specifica spatierea din exterior in partea dreapta
margin-bottom - specifica spatierea din exterior in partea de jos
margin-left - specifica spatierea din exterior in partea stanga

Putem specifica margini diferite pentru cele patru valori intr-o singura

proprietate.
Valorile vor aparea in sensul acelor de ceasornic: sus, dreapta, jos, la
stanga.

[1]

Proprietatea padding

permite stabilirea unei zone libere transparente in interiorul bordurii.


Aceasta zona este afectata de culoarea de fundal al
elementului.
Putem controla spatierea individuala din exteriorul casetei utilizand 4
1.
2.

3.
4.

proprietati distincte:
padding-top - specifica spatierea din interior in partea de sus
padding-right - specifica spatierea din interior in partea dreapta
padding-bottom - specifica spatierea din interior in partea de jos
padding-left - specifica spatierea din interior in partea stanga

Putem specifica spatieri diferite pentru cele patru valori intr-o singura

proprietate.
Valorile vor aparea in sensul acelor de ceasornic: sus, dreapta, jos,
stanga.

[1]

Dimensionarea casetelor
<html>
<head>
<style>
div
{
width: 210px;
padding: 15px;
border: 15px solid gray;
margin: 15px;
}
</style>
</head>
<body>
<img src="poza.png">
<div>Poza de deasupra e lata de 300px. Latimea acestui element:<br> 210
(latime)
+<br>30 (2*15 padding) +<br>30 (2*15 bordura) +<br>30 (2*15 margine) =
<br>300px.</div>
</body>
</html>

[1]

Limitarea dimensiunii casetelor


Putem limita dimensiunea casetelor cu ajutorul proprietatilor: minwidth, max-width, min-height, max-height.
min-width - stabileste latimea minima a unui element si previne

ca valoarea proprietatii width sa fie mai mica decat min-width.


max-width - seteaza latimea maxima a unui element si previne ca
valoarea proprietatii width sa fie mai mare decat max-width.
min-height - seteaza inaltimea minima a unui element si previne
ca valoarea proprietatii width sa fie mai mica decat min-width.
max-height - seteaza inaltimea maxima a unui element si previne
ca valoarea proprietatii height sa fie mai mare decat max-height.

[1]

Limitarea dimensiunii casetelor (2)


<html>
<head>
<style>
.adaptabil {
background-color: gold;
min-width: 400px;
max-width: 600px;
padding: 10px; }
</style>
</head>
<body>
<div class="adaptabil">Acest div se redimensioneaza in functie de
rezolutia ecranului.<p>
Dimensiunea minima este de 400px, iar cea maxima de 600px.
Textul de pe prima linie nu
va fi afectat de redimensionare.</div>
</body>
</html>

[1]

Proprietatea border-style

permite controlarea stilului bordurilor prin valorile:


none

Valoare implicita. Specifica sa nu se afiseze nici o bordura.

dotted

Specifica o bordura punctata

dashed

Specifica o bordura cu linii

solid

Specifica o bordura continua

double

Specifica o bordura dubla

groove

Specifica o bordura 3D de tipul groove. Efectul depinde de valoarea culorii


bordurii.

ridge

Specifica o bordura 3D de tipul ridge. Efectul depinde de valoarea culorii bordurii.

inset

Specifica o bordura 3D de tipul inset. Efectul depinde de valoarea culorii bordurii.

outset

Specifica o bordura 3D de tipul outset. Efectul depinde de valoarea culorii


bordurii.

initial

Stabileste aceasta proprietate la valoarea implicita.

inherit

Mosteneste aceasta proprietate din elementul sau parinte.

[1]

Proprietatea border-style -Exemple

<html>
<head>
<style>
*{ margin:10px; }
.solid { border-style: solid; }
.dotted { border-style: dotted; }
.dashed { border-style: dashed; }
.double { border-style: double; }
.groove { border-style: groove; }
.ridge { border-style: ridge; }
.inset { border-style: inset; }
.outset { border-style: outset; }
</style>
</head>
<body>
<div class="solid">Eu am bordura solid</div>
<div class="dotted">Eu am bordura dotted</div>
<div class="dashed">Eu am bordura
dashed</div>
<div class="double">Eu am bordura double</div>
<div class="groove">Eu am bordura groove</div>
<div class="ridge">Eu am bordura ridge</div>
<div class="inset">Eu am bordura inset</div>
<div class="outset">Eu am bordura outset</div>
</body>

[1]

Proprietatea border-color

permite controlarea culorii bordurilor.


putem specifica culoarea bordurii folosind fie valorile RGB,

codurile hexa sau nume de culori CSS.


este posibil sa se controleze in mod individual culorile bordurilor
diferitelor parti, folosind:
1. border-top-color - specifica culoarea bordurii de sus
2. border-right-color - specifica culoarea bordurii din dreapta
3. border-bottom-color - specifica culoarea bordurii de jos
4. border-left-color - specifica culoarea bordurii din stanga
De asemenea, este posibil sa se utilizeze o prescurtare prin care

se pot controla toate cele patru culori ale bordurilor intr-o


singura proprietate.
Valorile de aici apar in sensul acelor de ceasornic: sus, dreapta,
jos, stanga.

[1]

Proprietatea border-color -Exemple

<html>
<head>
<style>
div {
border: 15px solid;
border-color: red gold blue green; }
</style>
</head>
<body>
<div>Valorile de aici apar in sensul acelor de ceasornic: sus, dreapta,
jos, stanga</div>
</body>
</html>

[1]

Centrarea casetelor -Exemple


<html>
<head>
<style>
div {
width: 300px;
margin: auto;
border: 10px solid gold; }
</style>
</head>
<body>
<div>Acest div este centrat, iar textul aliniat la stanga.</div>
</body>
</html>

Afisarea si ascunderea elementelor


Proprietatea display permite transformarea unui element

de tip inline intr-un element de tip bloc sau invers,


poate fi folosit pentru a ascunde un element din pagina.
Valorile pe care le poate lua:

inline - determina ca un element de tip block sa actioneze ca

un element de tip inline.


block - determina ca un element de tip inline sa actioneze ca
un element de tip block.
inline-block - determina ca un element de tip block sa fie
afisat ca un element de tip inline, pastrand in acelasi timp
celelalte caracteristici ale unui element de tip block.
none - in cazul in care se seteaza aceasta valoare se va
ascunde un element din pagina. In acest caz, elementul
actioneaza ca si cum aceasta nu ar fi continut deloc in cadrul
paginii.

Afisarea si ascunderea elementelor (2)


Un element de tip block este un element care ocupa intreaga latime
disponibila si are un sfarsit de linie inainte si dupa.
Exemple de elemente de tip block: <h1>, <p>, <div>, <ul>, <li>.
Un element de tip inline este un element care ocupa atata latime cat este
necesar, si nu forteaza un sfarsit de linie inainte sau dupa.
Exemple de elemente de tip inline : <span>, <img>, <a>.
Ascunderea unui element poate fi realizata prin stabilirea proprietatii
display
la valoarea "none" sau proprietatea visibility la valoarea "hidden".
Cele doua metode produc rezultate diferite:
display: none - ascunde un element, dar spatiul in care este continut
nu va fi ocupat. Elementul va fi ascuns si nu va afecta aspectul.
visibility: hidden - ascunde un element, dar spatiul in care este
continut va fi ocupat. Elementul va fi ascuns, dar afecteaza aspectul.

Afisarea si ascunderea elementelor (3) Exemple


<html>
<head>
<style>
li { display: inline; margin-right: 10px; }
li.ascuns { display: none; }
li.invizivil { visibility: hidden; }
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>Servicii</li>
<li class="ascuns">Ascuns</li>
<li>Despre noi</li>
<li class="invizivil">Invizivil</li>
<li>Contact</li>
</ul>
</body>
</html>

Solutii de layout al paginilor Web

Solutii de layout al paginilor Web (2)

html>
<head>

<style>
#caseta {
width: 904px;
margin: auto;
border: 1px solid grey;
background-color: white; }
#continut {
float: left;
width: 630px; }
#meniu {
float: left;
width: 230px;
#antet {
clear: left; }
div {
border: 1px solid violet;
background-color: #efefef;
margin: 5px;
padding: 5px; }
</style>
</head>
<body>
<div id="caseta">
<div id="antet">Antet</div>
<div id="meniu">Meniu</div>
<div id="continut">Zona de continut</div>
<div id="antet">Subsol</div>
</div>

</body>
</html>

Exemple

<html>
<head>
<style>

#caseta {
width: auto;
margin: auto;
border: 1px solid grey;
background-color: white; }
#continut {
float: right;
width: 65%; }
#meniu {
float: left;
width: 25%; }
#antet {
clear: left; }
div {
border: 1px solid violet;
background-color: #efefef;
padding: 1%;
margin: 1%; }
</style>
</head>
<body>
<div id="caseta">
<div id="antet">Antet</div>
<div id="meniu">Meniu</div>
<div id="continut">Zona de continut</div>
<div id="antet">Subsol</div>
</div>
</body>
</html>

Exemple

<html>
<head>
<style>

#caseta {
width: 1156px;
margin: auto;
border: 1px solid grey;
background-color: white; }
#continut {
float: left;
width: 630px; }
#meniu {
float: left;
width: 230px; }
#antet {
clear: left; }
div {
border: 1px solid violet;
background-color: #efefef;
margin: 5px;
padding: 5px; }
</style>
</head>
<body>

<div id="caseta">
<div id="antet">Antet</div>
<div id="meniu">Meniu</div>
<div id="continut">Zona de continut</div>
<div id="meniu">Meniu</div>
<div id="antet">Subsol</div>
</div>
</body>
</html>

Exemple

Prof.dr. Lucia Rusu


lucia.rusu@econ.ubbcluj.ro

[1]

CSS
este un standard W3C pentru definirea prezentrii

documentelor scrise n HTML


definete cum vor fi afiate elemente HTML
este un limbaj distinct cu propria sintax
Stilurile trebuie salvate n fiiere CSS externe
(recomandabil)
funcioneaz prin asocierea unor reguli elementelor HTML
Foile de stil externe permit schimbarea aranjrii i
aspectului tuturor paginilor dintr-un site Web, prin
editarea a unui singur fiier CSS
Stilurile CSS au rezolvat o mare problem i salveaz o
mulime de timp n activitile de rutina in dezvoltare a
site-urilor web

[1]

Reguli CSS
O regul CSS conine dou pri: un selector i o declaraie.
Declaraie
selector { proprietate: valoare; }
Selectorii i dic crui element i se aplic regula.
Declaraiile i dic cum ar trebui s fie stilizate elementele
intermediul selectorului.

e io ate prin

Proprietile i dic aspectele elementului pe care dorim s le

odific .

Valorile specific setrile pe care dorim s le utiliz


alese.

pentru proprietile

[1]

Declaratii (2)

selector {
proprietate1: valoare1;
proprietate2: valoare2;
proprietate3: valoare3;
}

bloc de declaraii

Inserarea declaraiilor CSS n cadrul paginilor HTML se


realizeaz in trei moduri:
Foaie de stil extern (declarat ntr-un fisier CSS extern)
Foaie de stil intern (declarata n seciunea de head a
documentului HTML)
Stilul declarat inline (declarat n interiorul unui element
HTML)

[1]

Declaratii CSS n foile de stil externe

foaia de stil externa este un fisier separat de tip text, cu extensia


*.css, care contine o serie de declaratii de stil
Cu o foaie de stil externa, putem modifica aspectul unui intreg
site prin simpla modificare realizata intr-un singur fisier.
Fiecare pagina trebuie leagata la foaia de stil cu ajutorul tag-ul
<link>.
Tag-ul <link> va fi pozitionat tot timpul in partea de head.

<head>
<link rel="stylesheet" type="text/css" href="stiluri.css">
</head>
Fiierul stiluri.css co i e urmtorul cod CSS:
h1 { color: red; }
p { color: blue; }

[1]

Declaratii CSS
Declaratii CSS in foaia de stil interna este utilizata doar atunci cand o
singura pagina HTML are un stil unic.
Elementul de stil trebuie sa fie plasat in sectiunea <head> a unei pagini
HTML, cu ajutorul tag-ului <style>.

<head>
<style>
h1 { color: red; }
p { color: blue; }
</style>

</head>
Declaratii CSS inline in interiorul unui element HTML folosind atributul style.
Proprietatile si valorile se aplica doar elementului in care au fost definite.
(De evitat!)
h1 style = "color: red"> Titlu </h1>
<p style = "color: blue"> Paragraf </p>

[1]

Selectori CSS
Selectorul universal - se aplic la toate elementele din document
* {}
Se aplic tuturor elementelor de pe pagin
Selectorul de tip - se aplic numelor de elemente
h1, h2, h3 {}
Se aplic elementelor <h1>, <h2> i <h3>
Selectorul de clas - se aplic unui element al crui atribut clas are o
valoare care se potrivete cu cel specificat dup simbolul . (punct)
.azorel {}
Se aplic tuturor elementelor care au atributul class egal cu azorel
p.azorel {}
Se aplic doar elementelor <p> al cror atribut class este egal cu azorel

[1]

Selectori CSS (2)


Selectorul ID - se aplic unui element al crui atribut id-ul are o valoare

care se potrivete cu cel specificat dup simbolul # (diez)


#cnp {}

Se aplic elementului a crui atribut id este egal cu cnp


Selectorii grupai- se aplic numelor de elemente specificate
h1, p, em, img {}

Se aplic elementelor <h1>, <p>, <em> i <img>

Selectorul copil - se aplic unui element care este un copil direct al unui alt
element
li>a {}
Se aplic elementelor <a> care sunt co i ute n cadrul unui element <li>
Selectorul descendent - se aplic unui element care este un descendent din
cadrul unui alt element specificat (nu doar unui copil direct)
p a {}
Se aplic elementelor <a> care sunt co i ute n cadrul unui element <p>,
chiar dac exist i alte elemente imbricate ntre ele

[1]

Agregarea n cascad a stilurilor


Agregarea respecta urmtoarea ordine:
Foaia de stil implicit a browser-ului
Foaie de stil extern (declarat ntr-un fiier CSS extern)
Foaie de stil intern (declarat n seciunea de head a documentului
HTML)
Stilul inline (declarat n interiorul unui element HTML)
declaraiile inline au cea mai mare prioritate (desi nu se recomanda)
daca legatura la foaia de stil externa este plasata dupa foaia de stil

interna in HTML <head>, foaia de stil externa va inlocui foaia de stil


interna.

<html>
<head>
<title>Exemplu de agregare in cascada a stilurilor</title>
<link rel="stylesheet" type="text/css" href="stilulmeu.css">
<style>
h1{color: red;}
p{color: blue;}
</style>
</head>
<body>
<h1 style="color: indigo">Titlu</h1>
<p style="color: violet">Paragraf</p>
</body>
</html>

Codului CSS coninut n cadrul fiierului stilulmeu.css:


h1{color: green;}
p{color: orange;}

<html>
<head>
<title>Exemplu de specificitate si prioritate</title>
<style>
* { color: blue; }
h1 { color: purple; }
p b { color: violet; }
b { color: orange; }
b { color: red; }
p { color: chocolate; }
p#abstract{ color: green; }
</style>
</head>
<body>
<h1>Titlu</h1>
<p id="abstract">Acesta este un <b>abstract</b></p>
<p>Acesta este un text dintr-un paragraf</p>
Acesta e un text <b>oarecare</b>
</body>
</html

Motenirea in CSS
Motenirea se poate folosi pentru a crea un avantaj atunci cnd scriem

foile de stil.
Exemplu: dac dorim ca toate elementele de tip text s fie formatate cu
fontul Verdana avem dou opiuni:
Sa scriem declaraii pentru fiecare element din cadrul
documentului HTML i s setm proprietatea font-face astfel nct
textul s fie formatat cu Verdana
s scriem o singur regul de stil prin care s se aplice proprietatea
font-face la elementul <body>, iar toate elementele de tip text
incluse n elementul <body> s moteneasc acel stil
nu toate proprietatile CSS sunt mostenite.
Proprietatile legate de stilul, dimensiunea textului, fontul, culoarea,
etc, sunt transmise si la elementele continute. Proprietati ca bordura
unui element, marginile, fundalurile, etc, (zona din jurul elementului)
tind sa nu fie transmise.

<html>
<head>
<title>Exemplu de mostenire</title>
<style>
body {
font-family: Arial, Verdana, sans-serif;
font-weight: bold;
color: blue;
background-color: yellow; }
.cutie {
color: white;
background-color: green;
border: 1px solid red; }
.cutiutza {
color: gold; }
</style>
</head>
<body>
<div>

<p>Mostenesc de la body fontul, proprietatea bold si culoarea albastra</p>


</div>
<div class="cutie">
<p>Mostenesc de la body fontul si proprietatea bold. Dar am culoarea alba, culoarea de fundal verde si
bordura rosie.</p>
<div class="cutiutza">
<p>Mostenesc de la body fontul si proprietatea bold. Am culoarea aurita, dar mostenesc culoarea de
fundal verde de la cutie. Bordura nu se mosteneste.</p>
</div>
</div>
</body>
</html>

Formatarea culorilor
Culorile pot fi specificate prin:
1.
2.

3.

Nume de culori
valorilor RGB
coduri hexa zecimale

16 nume de culori standard, in HTML 4.01


adoptate de CSS1 si CSS2
Cele 16 culori standard: Aqua ; black ; blue;
fuchsia gray ; green; lime; maroon ; navy; olive;
purple; Red; silver; teal; white; yellow
CSS3 adauga suport pentru un set extins 140 de nume de

culori.

Culori
modelul de culori RGB): rosu,
verde si albastru.
rgb (0-255, 0-255, 0-255)
Alb = rgb (255, 255, 255)
Alb = rgb (100%, 100%, 100%)
Negru = rgb (0, 0, 0)
Negru = rgb (0%, 0%, 0%)

Culori Codul Hexazecimal


Codurile hexa zecimale sunt codurile de sase cifre care
reprezinta cantitatea de rosu, verde si albastru
dintr-o culoare, precedata de semnul #.
Sistemul de numerotare hexazecimal foloseste 16
elemente: (numere de la 0 la 9 si litere de la A la F )

#RRGGBB
Alb = #FFFFFF or #FFF echivalent cu (255,255,255)
Negru = #000000 or #000 echivalent cu (0,0,0)

Unitati de masura in CSS


CSS ofera diverse unitati de masura:
px pixeli (un px reprezinta un punct de pe ecranul computerului)
% - procent
in - inch
cm - centimetru
mm - milimetru
em
Exemple:
1em =dimensiunea fontului curent.
2em =2 *dimensiunea fontului curent.
in cazul in care un element este afisat cu un font de 12 pt, 2em=24
pt.
em este o unitate utila in CSS, deoarece se poate adapta automat la
fontul pe care cititorul il foloseste.
Utilizata frecvent in site-urile destinate seniorilor cu pictograme de
marire a fonturilor

Formatarea textului

Proprietatea font-family specifica familia de fontul pentru un element.


2 doua tipuri de font-family :
family-name: (times, arial, monotype corsiva, impact, courier)
generic-family: (serif, sans-serif, cursive, fantasy, monospace)
Modalitate de lucru: se incepe tot timpul cu fontul dorit si se incheie cu
o familie generica.
Acest lucru permite browser-ului sa afiseze un font asemanator din cadrul
familiei generice, in cazul in care nu exista alte fonturi disponibile.

Proprietatea font-family
<html>
<head>
<title>font-family</title>
<style>
.times { font-family: times, serif; }
.arial { font-family: arial, sans-serif; }
.monotype { font-family: monotype corsiva,
cursive; }
.impact { font-family: impact, fantasy; }
.courier { font-family: courier, monospace; }
</style>
</head>
<body>
<p class="times">Eu sunt scris cu times</p>
<p class="arial">Eu sunt scris cu arial</p>
<p class="monotype">Eu sunt scris cu monotype
corsiva</p>
<p class="impact">Eu sunt scris cu impact</p>
<p class="courier">Eu sunt scris cu courier</p>
</body>
</html>

Proprietatea font-weight
Proprietatea font-weight permite sa formatam textul cu
aldine. Exista doua
valori pe care aceasta proprietate le ia de obicei:
normal - face ca textul sa apara la o greutate normala.
bold - face ca textul sa apara aldine
<html>
<head>
<style>
.normal { font-weight: normal; }
.boldat { font-weight: bold; }
</style>
</head>
<body>
<p class="normal">Acest text este normal</p>
<p class="boldat">Acest text este boldat</p>
</body>
</html>

Proprietatea text-transform
este folosita pentru a transforma textul din litere mici in litere mari sau
invers.
poate sa ia una dintre urmatoarele valori:
uppercase - face ca textul sa apara cu litere mari
lowercase - face ca textul sa apara cu litere mici
capitalize - face ca prima litera a fiecarui cuvant sa apara cu litera
mare

<html>
<head>
<style>

.uppercase { text-transform: uppercase; }


.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
</style>
</head>
<body>
<p class="uppercase">Astazi incepe weekendul</p>
<p class="lowercase">Astazi incepe weekendul</p>
<p class="capitalize">Astazi incepe weekendul</p>
</body>
</html>

Proprietatea text-decoration
specifica decor adaugat la text
permite sa specificati urmatoarele valori:

none - se elimina orice formatare deja aplicata textului


underline - adauga o linie sub text
overline - adauga o linie deasupra textului
line-through - taie textul cu o linie

<html>
<head>
<style>

.subliniat { text-decoration: underline; }


.deasupra { text-decoration: overline; }
.taiat { text-decoration: line-through; }

</style>
</head>
<body>
<p class="subliniat">Acest text este subliniat</p>
<p class="deasupra">Peste acest text trece o linie</p>
<p class="taiat">Acest text este taiat cu o linie</p>

</body>
</html>

Proprietatea line-height
stabileste inaltimea unei linii de text
adauga o spatiere si face ca decalajul vertical dintre liniile

de text sa fie mai mare.

<html>
<head>
<style>
.spatiere1 { line-height: 25px; }
.spatiere2 { line-height: 200%; }
</style>
</head>
<body>
<p class="spatiere1">Acest text este <br> spatiat la
25px</p>
<p class="spatiere2">Acest text este <br> spatiat cu
200%</p>
</body>
</html>

Proprietatea text-align
permite sa controlam alinierea textului.
poate avea una din cele patru valori:
left - indica faptul ca textul este aliniat la stanga
right - indica faptul ca textul este aliniat la dreapta
center - indica faptul ca textul este centrat
justify - indica faptul ca fiecare linie dintr-un paragraf, cu exceptia ultimei
linii, sa fie aliniata la ambele capete
<html>
<head>
<style>
h1 { text-align: center; }
. stanga { text-align: left; }
. dreapta { text-align: right; }
</style>
</head>
<body>
<h1> Acest text este centrat </h1>
<p class="stanga"> Acest text este aliniat la stanga </p>
<p class="dreapta"> Acest text este aliniat la dreapta </p>
</body>
</html>

Stilizarea link-urilor
In CSS, exista 4 pseudo clase care ne permit sa setam stiluri diferite pentru
link-uri care au fost sau nu vizitate:
a:link - o legatura normala, nevizitata
a:visited - o legatura pe care utilizatorul a vizitat-o
a:hover - o legatura atunci cand utilizatorul pozitioneaza cursorul mouse-ului
peste ea
a:active - o legatura in momentul in care se face clic
<html>
<head>
<style>
* { text-decoration: none; }
a:link {color: blue; }
a:visited {color: grey; }
a:hover {color: orange; }
a:active {color: red; }
</style>
</head>
<body>
<a href="http://econ.ubbcluj.ro/">Link vizitat</a><br>
<a href="nevizitat.html">Link nevizitat</a><br>
<a href="nevizitat.html">Link cu mouse over</a>
</body>
</html>

Stilizarea listelor
Proprietatea list-style-type specifica tipul de marcaj pentru

elementele din lista.


poate lua una din valorile:

none
disc
circle
square
decimal
decimal-leading-zero
lower-alpha
upper-alpha
lower-latin
upper-latin
lower-roman
upper-roman
lower-greek

Stilizarea listelor (2)


<html>
<head>

<style>
ul.cerc { list-style-type: circle; }
ul.patrat { list-style-type: square; }
ol.romane { list-style-type: upper-roman; }
ol.alfa { list-style-type: lower-alpha; }
</style>
</head>
<body>
<ul class="cerc">
<li>Ciocolata</li>
<li>Flori</li>
</ul>
<ul class="patrat">
<li>Ciocolata</li>
<li>Flori</li>
</ul>
<ol class="romane">
<li>Ciocolata</li>
<li>Flori</li>
</ol>
<ol class="alfa">
<li>Ciocolata</li>
<li>Flori</li>
</ol>
</body>
</html>

Prof.dr. Lucia Rusu


lucia.rusu@econ.ubbcluj.ro

[1]

Formulare HTML
au fost introduse n Hypertext pentru asigurarea comunicrii de
informaii n ambele sensuri, ntre client i server.
preiau date ce sunt procesate de ctre scripturi, ceea ce se preteaz
multor activiti cu caracter economic

[1]

Tag-ul FORM
<form action="url-al-unui-un-script-aflat-pe-server" method="get||post">
elemente de input
</form>

http://www.econ.ubbcluj.ro/~daniel.mican/script.php?nume=daniel+mican&
email=daniel.mican%40econ.ubbcluj.ro
Problematica tagurilor HTML va fi analizat n prisma evenimentelor de
interaiune care sunt specifice obiectelor HTML incluse n conteinere i
formulare
Informatia se trimite la server ca perechi
Nume=valoare

[1]

Method

Metoda GET este folosit pentru:


formulare scurte (cum ar fi casetele de cutare);
atunci cnd se primesc date de la serverul de web (nu se recomand
trimiterea de informaii care ar trebui s fie adugate sau terse dintr-o
baz de date).
Metoda POST este folosita cand formularul:
permite utilizatorilor s ncarce fiiere;
conine foarte multe elemente de input;
conine date sensibile (de exemplu parole);
adaug / terge informaii dintr-o baz de date.

[1]

Obiecte in formulare HTML


<input type=tip name=nume value=valoare size=dimensiunealte
atribute>
Zone de text
cmpuri de text, care afieaz textul introdus (ecoul): TYPE=text;
parole, care nu dau ecou, pentru limitarea accesului: TYPE=password
cmpuri ascunse, invizibile, ce permit transiterea unor informaii:
TYPE=hidden ;
zone de editare pentru texte mai lungi TYPE="TEXTARREA";
Evenimentele asociate: change la modificri n zona-text, select la
selectarea textului, focus pentru activarea zonei pentru acceptarea de
modificri, blur cnd zona i pierde focusul.
Din raiuni de securitate, zonele-parol nu genereaz evenimente

[1]

Obiecte in formulare HTML (3)


Text
<input type="text" name="nume" size="25" maxlength="50 >

Parola
<input type="password" name="parola" size="25" maxlength="50 >

Fisier
<input type="file" name="fisier" >

[1]

Obiecte in formulare HTML (4)


Butoane:
simple, atributul TYPE=button (<INPUT TYPE=buton>);
booleene, cu dou valori posibile: (TYPE=checkbox);
radio, n care unul singur poate fi activat ntr-un set dat:
(TYPE=radio);
submit, care lansaz formularele spre URL-ul specificat, folosind
metoda dorit (TYPE=submit)
reset, pentru anularea valorilor formularelor (TYPE=reset)
Butonul submit
<input type="submit" name="trimite" value="Trimite formular" >

Butonul reset
<input type=reset" value=resetati >

[1]

Obiecte in formulare HTML (5)


<textarea name="observatii" rows="5" cols="30"> valoare implicita </textarea>

Liste de selectie
<select>
<option value="Garsoniera">Garsoniera</option>
<optgroup label="Apartament">
<option value="1 camera" selected>1 camera</option>
<option value="2 camere">2 camere</option>
</optgroup>
</select>

[1]

Obiecte in formulare
Fieldset
<form>
<fieldset>
<legend> Detalii personale: </legend>
Nume: <input type="text" name="nume">
</fieldset>
</form>

Label
<label for="nume">Nume</label>
<input type="text" id="nume" name="nume" size="25" maxlength="50" >

[1]

Obiecte in formulare (HTML5)


Date
<input type="date" name="data_eveniment" >

Datetime
<input type="datetime" name="data_ora_eveniment" >
defineste un control de tip data impreuna cu unul de tip timp (an, luna,
zi, ora, minut, secunda, si fractiune de secunda, in functie de fusul orar
UTC ).
Email
<input type="email" name="adresa_email" >

[1]

Obiecte in formulare (HTML5)


URL
<input type="url" name="adresa_site" >

color
<input type="color" name="culoare">

Prof.dr. Lucia Rusu


lucia.rusu@econ.ubbcluj.ro

[1]

HTML
HTML este:
un limbaj de descriere a coninutului i structurii paginilor web;
un limbaj de marcare format dintr-un set de tag-uri de marcare.
numele de atribute i numele valorilor atributelor sunt case-insensitive.
Istoric HTML:
HTML (1991)
HTML+ (1993)
HTML 2.0 (1995)
HTML 3.2 (1997)
HTML 4.01 (1999)
XHTML (2000)
HTML5 (2012)
XHTML5 (2013)

[1]

Tag-uri HTML
cuvinte cheie nconjurate de paranteze unghiulare;

prezente n perechi, tag-ul de nceput <numetag> si


tag-ul de final </numetag> .

Exemplu: <numetag> Coninut </numetag>


Un element HTML (DOM) este delimitat de tag-ul de
start i tag-ul final;
comunica browserului informaiile care se afl ntre
tag-uri.

[1]

Atribute i valori
Atributele:
sunt coninute n tag-urile HTML;
furnizeaz informaii suplimentare referitoare la elemente HTML;
sunt specificate n eticheta de start;
Orice nume de atribut are atribuit o valoare.
<tag numeatribut = "valoare"> ... </tag>
Valorile atributelor :
Sunt nchise n ghilimele (ghilimele duble - cele mai comune; sunt
permise i simple).
<tag numeatribut1="valoare1" numeatribut2="valoare2"> ... </tag>
Fiecare pereche (atribut, valoare1) este asociat unei proprieti a

obiectului respectiv, conform specificaiilor DOM.


Un atribut special sunt handlerele de evenim1ente:
onEveniment=nume funcie-handler

[1]

Atribute HTML

<html>
<head>... </head>
<body>...
corpul documentului </body>
</html>

n cadrul seciunii head se introduc informaii despre autorul documentului,


i titlul su (tagul: <title> </title>).
Majoritatea browserelor Web afieaz coninutul din title n bara de titlu i
stocheaz acest titlu atunci cnd utilizatorul salveaz adresa paginii, ca semn
de carte sau ntr-o list de interes.

[1]

Structura unei pagini HTML

[1]

Structura unei pagini HTML

[1]

HTML
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
Elementul <head>
este un container pentru toate elementele componente.
elementele ce l compun pot include scripturi, instruciuni browser,
style sheets, meta informaii

[1]

Elementul <head>
<title> definete titlul documentului (TML.
<title> Titlul documentului HTML </title>
<link> definete relaii ntre un document i o resurs extern.
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style> definete stilul style .
<style type="text/css">body {background-color:yellow} p {color:blue}
</style>
<script> este utilizat pentru a defini un script.
<meta> furnizeaz metadata date, informaii despre date.
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="Descrierea paginii web">
<meta name="author" content="Daniel Mican">

[1]

Tag-uri HTML de marcare structural a textului

[1]

Tag-uri HTML de for atare se a tic a textului

[1]

Tipuri de liste
Listele sunt enumerri de item-uri.
Listele pot fi ordonate (<ol>),
neordonate (<ul>) sau liste de
definiii <dl>)
<dl>
<ol>
<dt>obiectul</dt>
<li>sisteme de operare</li>
<dd>are proprietati</dd>
<li>retele de calculatoare</li>
<dt>metoda</dt>
</ol>
<dd> poate avea parametri</dd>
</dl>
<ul>
<li>memory stick</li>
<li>tonner</li>
</ul>

[1]

Tabele

Atribute:
colspan=x permite ntinderea unei celule pe limea a x celule.
Similar, atribut rowspan=x, pentru ntinderea unei celule pe nlime a x
celule.
margini (border), culoarea lor (bordercolor), dimensiunea tabelului
(width , spaierea intern a textului n celule cellpadding , spaierea ntre
celule (cellspacing),
alinierea tabelului relativ la textul care l nconjoar align, hspace, vspace)

[1]

Tabele (2)
Exemplu de delimitare tabelar:

<table bordercolor=blue border=5>


<tr>
<td background=imagine.gif>
text celula1 rand1
</td>
<td> text celula2 rand1 </td>
</tr>
<tr>
<td colspan=2>text celula 1 rand 2</td>
</tr>
</table> text celula1 rand1 Text celula2 rand1
text celula1 rand 2

[1]

iframe
<iframe src="URL"> </iframe>
Atribute pe care le poate conine tag-ul <iframe>:

src -specifica adresa URL a documentului care va fi incorporat


in <iframe>
srcdoc- specifica continutul HTML al documentului care va fi
incorporat in <iframe>
height -specifica inaltimea unui <iframe>
width- specifica latimea unui <iframe>
Exemple:
<iframe src="demo_iframe.htm style="border:none"></iframe>
<iframe src="demo_iframe.htm" style="border:5px dotted
red"></iframe>
Cadru tinta pentru o legatura:
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com"
target="iframe_a">W3Schools.com</a></p>

[1]

Evenimente de navigare
Hiperlegturile vor genera evenimente de selecie, de navigare, evenimente
browser care sunt gestionate prin manipulatori handleri specifici asociai
unor scripturi de tratare a lor.
(iperlegturile sunt marcate n (TML prin marcarea celor dou ancore:
Referina:
<a href=url_int#nume_int target=nume_frame> text_ref </a>
inta
<a name=nume_int> text_target </a>
<a href="URL" target="_blank">Textul link-ului / Imagine</ a>
<a id="semncarte">Ai ajuns la semnul de carte</a>
<a href="#semncarte">Click aici pentru a merge la semnul de carte</a>
<a href="pagina.html#semncarte">Click aici pentru a merge la semnul de
carte</a>

[1]

Imagini
<img src="url" alt="titlul sau descrierea imaginii">
Atribute ale imaginii:
src - specific adresa URL a unei imagini
alt - specific un text alternativ pentru imagine i va fi afiat n cazul n
care imaginea nu poate fi afiat
height- specific nlimea unei imagini
width - specific limea unei imagini
hrile de imagini, prin care o imagine (<img>) este mprit n zone cu
contururi mai mult sau mai puin regulate (marcate cu <AREA>)
- fiecrei zone i se asociaz o hiperlegtur:
<map name=numeharta>
<area shape=rect coords=9, , , 9 href=p1.html>
<area shape=circ coords=
,
, href=p2.html>
</map>

Prof.dr. Lucia Rusu


lucia.rusu@econ.ubbcluj.ro

[1]

URL
URL (Uniform Resource Locator) adreseaz unic resurse

informaionale stocate n locaiile unei reele i au forma unor


iruri de caractere ce permit identificare e transparent
utilizatorului datorit interfeei browserelor.

URL au forma:
serviciu :// nume-gazd.subdomeniu.domeniu: port / cale-director
Elementele componente:
Tipul resursei (adic protocolul folosit pentru transferul ei prin
reea);
Numele serverului pe care se afl resursa (opional i portul prin
care ea poate fi accesat);
Calea resursei (folosit de server pentru a localiza resursa);
Parametrii ce se transmit resursei ca ir de caractere;

[1]

URL(2)
URL-ul de tip IP: serviciu://adresaIP
http://66.84.17.20/news/fsega
URL-ul local: serviciu://localhost/cale
http://localhost/fisier.html
URL de tip GET, are forma: URLnormal?ir de caractere
http://econ.ubbcluj.ro/n2.php?id_c=57&id_m=2
URI (Uniform Resource Identifier)
http://econ.ubbcluj.ro/informatii/Ghid_lucrari_diploma
_si_disertatie_FSEGA.pdf

[1]

Protocoale
TCP (Transmission Control Protocol) este folosit pentru transmisia

datelor de la o aplicaie la reea.


IP (Internet Protocol) se ocup cu comunicaia ntre calculatoare si
este responsabil cu trimiterea pachetelor de date prin Internet.
HTTP (Hyper Text Transfer Protocol) se ocup cu comunicaia ntre
un web server i un browser web. Acesta este folosit pentru a trimite
cereri de la un web client un browser la un web server, trimind
napoi coninut web pagini web de la server la client.
HTTPS (Secure HTTP) asigur o comunicaie sigur ntre un web
server si un web browser.
Protocolul SSL (Secure Sockets Layer) este util la criptarea datelor
pentru a asigura o transmisie sigur a acestora.
FTP (File Transfer Protocol) asigur transmisia de fiiere ntre
calculatoare.

[1]

Protocoale (2)
SMTP (Simple Mail Transfer Protocol) este folosit la transmiterea de

e-mail-uri.
Protocolul MIME (Multi-purpose Internet Mail Extensions)
permite SMTP-ului s transmit fiiere multimedia, incluznd date de
tip voce, audio si binare prin reele TCP/)P.
IMAP (Internet Message Access Protocol) permite stocarea i
obinerea e-mail-urilor.
POP (Post Office Protocol) este folosit pentru a descarca e-mail-uri
de pe un server de e-mail pe un calculator personal.
DHCP (Dynamic Host Configuration Protocol) este folosit pentru
alocarea dinamic a adreselor )P pentru calculatoarele dintr-o reea.
SNMP (Simple Network Management Protocol) permite
administrarea calculatoarelor dintr-o reea.
ICMP (Internet Control Message Protocol) se ocup cu tratarea
erorilor dintr-o reea.

[1]

Protocoale (3)
FTP dedicate:
SmartFTP Client (32-bit)
CuteFTP
FTP Voyager
WS_FTP Professional

Core FTP LE
Filezilla

WAP (Wireless Application Protocol) - protocolul pentru aplicaii mobile


WAP definete WAE (Wireless Application Environment) un mediu de
aplicaii mobile
Aplicaiile sunt fi scrise n limbaj de marcare mobil WML (Wireless
Markup Language), un subset al limbajului de marcare extensibil
XML(eXtensible Markup Language).
Att WML ct i XML respect modelul DOM

[1]

Browsere - fun iile de az


S trimit informaii spre web server n format propriu )nternet i WWW.
S primeasc informaii trimise de web server sau s trimit meseje de

eroare ctre utilizatori.


S afieze informaii n modul n care se pstreaz indicaiile de proiectare
incluse n antetul documentului original.
S furnizeze utilizatorilor un mod cale de a salva documentele ce sosesc
ca cereri web.
S furnizeze utilizatorilor un mod cale de a nmagazina semnele de carte
bookmarks sau hotlist entries ale locaiilor ce pot fi vizitate din nou.
S in un istoric al articolelor legate ce au fost selectate i s permit
utilizatorilor reactivarea ultimei intrri.
S asigure un management al memoriei care s permit minimizarea
timpului de ncrcare downloading time . Spre exemplu, memornd
temporar documentele anterior solicitate ntr-o zon de memorie cache ele
pot fi uor ncrcate la o nou cerere.

[1]

Browsere fun iile avansate


Afiarea imaginilor inline, a fiierelor audio i video.
Apelul help-ere, plug-ins pentru a afia tipuri de informaie (sunete,

imagini de anumite formate, video, digital etc).


Configurarea mediul de calcul: selecia tipului de font, convenii de
dimensiuni, ncrcarea imaginilor ->creterea vitezei de download.
Interpretarea evenimentului n hri de imagini interactive (sisteme
GIS)
S asigure afiarea corect pe ecran (fill-in-form)
Furnizarea unui acces rapid la utilizarea unor servicii frecvente Web
funcii de ncriptare i decriptare a informaiilor
Utilizarea TDI, SDI, MDI, RIA sau a interfeelor grafice hibride n
interaciune cu clientul
Suport protocoale de securizare
Suporta faciliti Web 2.0
)nteracioneaz cu ali ageni inteligeni.

[1]

Plugin-uri
Plugin-uri(sau plug, add-in, addin, add-on, addon sau extensie) difer
prin extensii, care modific, adaug sau extind funcionaliti unui
program existent.
Exemple comune: plug-in-uri folosite n browsere web pentru a aduga
noi caracteristici:
motoare de cutare,
antivirus,
capacitatea de a utiliza nou tip de fiier, cum ar fi un format video nou.

Aplicaiile accept plug-in-uri pentru:


a permite dezvoltatorilor teri s creeze capaciti extinse
a sprijini cu uurin adugarea de noi caracteristici
a reduce dimensiunea unei aplicaii
a separa codul surs dintr-o aplicaie,la licene software incompatibile.

[1]

Tipuri de apli aii i plug-in-uri


editori audio -pentru a genera, procesa sau analiza de sunet. Exemple:

Ardour i Audacity
clienii de e-mail, pentru a decripta i cripta de e-mail.
Grafica software , pentru a gestiona formate de fiiere i procesare de
imagini. (Plug-C.F. Photoshop)
Media playere pentru a gestiona formate de fiiere i de a aplica filtre
Exemple de playere multimedia: Foobar2000, GStreamer,
Quintessential, VST, Winamp, XMMS
Pachete sniffere, pentru a decoda formate de pachete (OmniPeek)
Aplicaii de teledetecie Remote sensing applications), pentru a
procesa date din diferite tipuri de senzori; (Opticks).
editori text i medii de dezvoltare integrate, Exemple:Visual Studio,
RAD Studio, Eclipse, jedit i suport MonoDevelop de plug-in-uri.
browsere Web utilizeaz extensii de browser pentru a extinde
funcionalitatea lor. Exemple: includ Adobe Flash Player, Java SE,
QuickTime, Microsoft Silverlight, 3DMLW i Unity.

[1]

oluii software dedicate realizrii paginilor HTML


Adobe Dreamweaver
ofer un editor mpreun cu o interfa vizual "WYS)WYG" What You See

Is What You Get)


este unul dintre cele mai populare pachete software profesionale de
dezvoltare web disponibile pe pia;

CoffeeCup HTML Editor permite crearea, editarea i ncrcarea

paginilor web de orice complexitate;


Notepad++ permite editarea mai multor limbaje de programare care
ruleaz sub Windows;
HTML-Kit permite crearea, editarea i publicarea paginilor Web;
EditPlus permite editarea fiierelor text, a documentelor (TML, P(P
i a codului Java.
Eclipse sau (Eclipse Mars) este un mediu complex pentru
dezvoltarea aplicaiilor pe divese platforme cu diferite limbaje. Este
structurat ca plug-ins, ofera faciliti de creare a aplicaiilor web
complexe, uor de construit. Are plugins: Java, JavaScript, PHP i
plugins pentru aplicaii mobile.

[1]

oluii software dedicate realizrii graficii


Adobe Photoshop este standardul industriei pentru crearea de

imagine profesional pentru tiprirea clasic i pentru web;


Adobe Photoshop Elements este o versiune simplificat Photoshop,
Adobe Illustrator este o soluie pentru crearea de logo-uri, icon-uri i
ilustraii la o varietate de dimensiuni deoarece permite prelucrarea
vectoriala a imaginilor;
Adobe Fireworks este un program de grafic web care combin un
editor de imagini cu instrumente pentru crearea de ilustraii vectoriale;
CorelDRAW Graphics Suite permite editarea grafic vectorial la o
calitate bun i ofer facilitai de editare profesional a fotografiilor i
design al interfeelor web.
Corel Paint Shop Pro este o versiune redus CorelDRAW, fiind
popular n primul rnd datorit preului su redus;
GIMP (GNU Image Manipulation Program) poate fi folosit in
sistemele Unix, Windows i Mac. Program gratuit, similar cu
Photoshop.

[1]

DOCUMENT OBJECT MODEL (DOM)


W3C, "Document Obiect Model este platforma i interfaa neutr
a limbajului - ce permite programelor i scripturilor s acceseze n
mod dynamic i s actualizeze coninutul, structura i stilul
documentelor."
DOM descrie relaiile dintre elementele HTML dintr-un
document cu obiectul document nsui.
DOM este descris cu metafora arborelui www.w3.org/standards
HTML este trunchiul arborelui iar <Head> respectiv <body> sunt
ramificaiile principale.
relaia dintre noduri este cea de printe-fiu, nodurile finale
reprexentnd nodurile frunz.
4 ramuri (noduri):
DOCUMENT_NODE abiliteaz acces la obiecte legate direct
de document (nivelul de ansamblu)
ELEMENT_NODE - conine referine la toate tagurile din
cocumentul HTML
TEXT_NODE - descrie coninutul blocului text din interiorul
tagurilor
COMMENT_NODE - reprezint comentarii din (TML i
irurile text

[1]

DOM (2)
Document

Element
Element
<html>
html

Element

Element

<head>

<body>

Element

<Title>

Atribute

Element

Element

<href>

<a>

<h1>

Text

Text

legatura

header 1

Text
titlu site

[1]

Evenimente DOM
Categorie

Mouse

Tip

Atribute

Descriere

Click

onclick

Apare cnd cu butonul mouse-ului se d click pe un element. Click este


definit ca mousedown i mouseup peste aceeai locaie ecran, cu
secvena: mousedown mouseup, click

Dblclick

ondblclick

Apare cnd cu butonul mouse-ului se d double click peste un element.

Mousedown

onmousedown Apare cnd butonul mouse-ului este apsat peste un element.

Mouseup

onmouseup

mouseover

onmouseover Apare cnd butonul mouse-ului se mut ntr-un element.

mousemove

onmousemove

Apare cnd butonul mouse-ului se mut n timp ce se afl peste


unelement.

mouseout

onmouseout

Apare cnd butonul mouse-ului se mut nafara elementului.

keypress

onkeypress

Apare n mod similar cu "clicked" la tastatura. Keypress este definite ca


i keydown i keyup pe aceeai tast, cu secvena de evenimente:
keydown, keyup, keypress

keydown

onkeydown

Apare cnd o cheie de pe tastatur este apsat.

keyup

onkeyup

Apare cnd o cheie de pe tastatur este eliberat.

Tastatur

Apare cnd butonul mouse-ului eliberat

[1]

Evenimente DOM
Categorie

HTML
frame/
obiect

HTML
form

Tip

Atribute

Descriere

load

onload

Apare cnd se termin ncrcarea ntregului coninut dintr-un document,


incluznd fereasta, frame, obiect sau imagine.

unload

onunload

Apare cnd ntreg coninutul dintr-o fereast sau frame este eliberat.

abort

onabort

Apare cnd un obiect/imagine ncrcat este oprit nainte de fi complet


ncrcat.

error

onerror

Apare cnd un obiect/imagine/frame nu poate fi complet/corespunztor


ncrcat.

resize

onresize

Apare cnd un document vizualizat este redimensionat.

scroll

onscroll

Apare cnd se defileaz ntr-un document vizualizat.

select

onselect

Apare cnd un utilizator selects some text in a text field, including input
and textarea.

change

onchange

Apare cnda control loses the input focus and its value has been
modified since gaining focus, including input, select and textarea.

submit

onsubmit

Apare cnd un formular este trimis (submitted).

reset

onreset

Apare cnd un formular este anulat (reset).

focus

onfocus

Apare cnd un element este focalizat via mouse, navigare cu tab,


incluznd label, input, select, textarea, i button.

blur

onblur

Apare cnd un element pierde controlul via mouse, navigare cu tab,


incluznd label, input, select, textarea, i button.

NodeInsertedI onnodeinserte
Apare cnd un nod este inserat n document.
ntoDocument dintodocument
DOMAttrMod
onattrmodified Apare cnd un attribute a fost modificat.
ified
DOMCharacte oncharacterdat
Apare cnd o dat caracter a fost modificat.
rDataModified amodified

[1]

BOM
Browser Obiect Model nu este referit n general prin nume ci este acoperit de DOM
In vrful ierarhiei BOM este fereasta obiect (Window), urmat de navigator,
frames, screen, history, location, i obiectele document guvernate de DOM.

Window
(BOM)

Navigator

Frames[ ]

Location

History

Figura 1.2. Modelul BOM

Document
(DOM)

Screen

[1]

BOM (2)
BOM

are un

Window

are

are
are

Document

DOM
are are

iframe
form
object

are

Location
history

are fii

screen
HTML
object
navigator

object

Script
object

are
object

Figura 1.3. Relaia DOM-BOM