Grafica 2

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)

]
[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]

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

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
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
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


]
[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)

]
[1]

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]

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

[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.

]
[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

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

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
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

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

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

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


]
[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

[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")
$("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:
// 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">
// 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).
$('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>
$("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>
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<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

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");
});

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>
$("#hide_show").click(function(){
$("p").toggle("slow");
});
});
</script>
</head>
<body>
<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():
$("h2").slideDown();
});
slideUp():
$(".h2").slideUp()
})
slideToggle():
$(".h2").slideToggle();
});
jQuery slide (2)

<html>
<head>
></script>
$("p").toggle("slow");
$("h2").slideUp();
$("h2").slideDown();
});
});
</script></head>
<body>
<button id="hide_show">Hide/Show</button></body></html>
Prof.dr. Lucia Rusu

[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.

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);

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);

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);

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

[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();
</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;
}
myFunction();
</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

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;)

{

}
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]

Instruciunile do/while
while (exprL) {
instruciuni;}
permite execuia grupului de instruciuni pn cnd expresia logic

expL evaluat este adevrat.
do {
} 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]

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

[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

[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]

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

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>
</form>
[1]

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">
</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]
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">
<input type="submit" value="Submit"><br>
<input type="submit" formaction="demo_admin.asp"
value="Submit as admin">
</form>
[1]

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">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>
[1]

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">
<input type="submit" formmethod="post"
formaction="demo_post.asp"
value="Submit using POST">
</form>
[1]

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]
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">
</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
<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>
</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>
</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]

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]

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]

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
HTML4
HTML5
<meta charset="utf-8>
[1]
Migrarea la HTML5 (2)

HTML4
<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]

Modificarea elementelor <div> cu id="header" si id="footer":
<header>
<h1> HTML5</h1>
</header>
<footer>
<p>© 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]

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>
<p> Continut articol
.</p>
</article>
[1]

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>
<p><Primul articol.</p>
</article>
<article>
<p><Al doilea articol.</p>
</article>
</section>
<footer>
<p>&copy.</p>
</footer>
</body>
</html>
[1]

<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

[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
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.
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 {
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;
#continut {
float: right;
width: 65%; }
#meniu {
float: left;
width: 25%; }
#antet {
clear: left; }
div {
padding: 1%;
margin: 1%; }
</style>
</head>
<body>
<div id="caseta">
</div>
</body>
</html>
Exemple
<html>
<head>
<style>
#caseta {
width: 1156px;
margin: auto;
#continut {
float: left;
width: 630px; }
#meniu {
float: left;
width: 230px; }
#antet {
clear: left; }
div {
margin: 5px;
padding: 5px; }
</style>
</head>
<body>
<div id="caseta">
</div>
</body>
</html>
Exemple
Prof.dr. Lucia Rusu

[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;
}
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

[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]

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]

<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

[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

[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

Grafica 2

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Grafica 2

Încărcat de

Drepturi de autor:

Formate disponibile

Prof.dr.

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

Co epte i paradig e CMS

Co epte i paradig e CMS (2)

CMS o soluie ola orativ

CMS o soluie ola orativ 2

Managementul coninutului (Content management)

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

Componentele CMS (2)

Statutul documentelor - stri pe durata workflow:

Componentele CMS (3)

Assetmanager este compus din:

coninut, deine fiiere de configurare i de administrare

permite sistemului de colectare, publicare, workflow i de

Conectori spre alte sisteme: asigur trimiterea i primirea de

informaii din depozit,

XML, determinnd structura fiecrei componente n

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

activiti, definite ca i meninerea sub control a

Ci lul de via al o i utului

[Humeau & Jung,2013]

nivelul 4: corespunde proiectelor mici

cu cifra de afaceri realizat

CMS open source

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

soluii de comer electronic mediul Java : Intershop, Hibris,

necesitnd dezvoltatori avansai care cunosc deja Drupal.

CMS open source (3)

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

autorizarea altor persoane s contribuie la coninutul.

permite controlarea aspectului i perceperea site-ului Drupal.

cu MySQL i PostgreSQL, alte BD SQL

Joomla trebuie pltite.

on-line, necesare oricrei afaceri pe )nternet

un instrument de marketing direct nedifereniat bulk email sau

Banners este un sistem de management al bannerelor afiate pe

Prof.dr. Lucia Rusu

Caracteristici Web 2.0

Metafora Web 2.0

Web1.0 vs Web 2.0

Google: Gmail, GoogleCalendar, Google

Docs@Spreadsheet (2006), GoogleReader

Principii Web 2.0

web, cu diferite topici

Tagging, folksonomy este procedeul prin care se face clasificarea

web-ului , concept introdus de Flickr

Publicitatea -metod a mixului de marketing pentru a atinge membrii

Coninutul realizat de ctre utilizatori poate lua mai multe forme:

Beneficii pentru marketeri:

diferenierea brandului fa de ceilali concureni,

ajuta s ia decizii de cumprare,

Social media marketing

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

Cara teristi ile o u itilor so iale o li e

comentariile fcute la filmulee, contribuie la clasarea produselor.

Caracteristicile comunitilor sociale

cuprind coninut generat de membrii lor

Lu ile virtuale versus reelele so iale

Lumile virtuale- clasificate n: deschise i nchise.

Site-uri de tip social media marketing

Post urile sunt nsemnrile i articolele de pe blog

ce se public un nou articol

Crearea unui blog gratuit:

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