1 Grafica Slideuri

Prof.dr.
Lucia Rusu
lucia.rusu@econ.ubbcluj.ro
]
[1]
URL
URL (Uniform Resource Locator) adreseaz unic resurse
informaionale stocate n locaiile unei reele i au forma unor
iruri de caractere ce permit identificare e transparent
utilizatorului datorit interfeei browserelor.
URL au forma:
serviciu :// nume-gazd.subdomeniu.domeniu: port / cale-director
Elementele componente:
Tipul resursei (adic protocolul folosit pentru transferul ei prin
reea);
Numele serverului pe care se afl resursa (opional i portul prin
care ea poate fi accesat);
Calea resursei (folosit de server pentru a localiza resursa);
Parametrii ce se transmit resursei ca ir de caractere;
]
[1]
URL(2)
URL-ul de tip IP: serviciu://adresaIP

http://66.84.17.20/news/fsega
URL-ul local: serviciu://localhost/cale

http://localhost/fisier.html
URL de tip GET, are forma: URLnormal?ir de caractere

http://econ.ubbcluj.ro/n2.php?id_c=57&id_m=2
URI (Uniform Resource Identifier)

http://econ.ubbcluj.ro/informatii/Ghid_lucrari_diploma
_si_disertatie_FSEGA.pdf
]
[1]
Protocoale
TCP (Transmission Control Protocol) este folosit pentru transmisia
datelor de la o aplicaie la reea.
IP (Internet Protocol) se ocup cu comunicaia ntre calculatoare si
este responsabil cu trimiterea pachetelor de date prin Internet.
HTTP (Hyper Text Transfer Protocol) se ocup cu comunicaia ntre
un web server i un browser web. Acesta este folosit pentru a trimite
cereri de la un web client (un browser) la un web server, trimind
napoi coninut web (pagini web) de la server la client.
HTTPS (Secure HTTP) asigur o comunicaie sigur ntre un web
server si un web browser.
Protocolul SSL (Secure Sockets Layer) este util la criptarea datelor
pentru a asigura o transmisie sigur a acestora.
FTP (File Transfer Protocol) asigur transmisia de fiiere ntre
calculatoare.
]
[1]
Protocoale (2)
SMTP (Simple Mail Transfer Protocol) este folosit la transmiterea de
e-mail-uri.
Protocolul MIME (Multi-purpose Internet Mail Extensions)
permite SMTP-ului s transmit fiiere multimedia, incluznd date de
tip voce, audio si binare prin reele TCP/IP.
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 IP 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 - funciile de baz

S trimit informaii spre web server n format propriu Internet 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 funciile 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
Interacioneaz 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 aplicaii 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]
Soluii software dedicate realizrii paginilor HTML

Adobe Dreamweaver
ofer un editor mpreun cu o interfa vizual "WYSIWYG" (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 HTML, PHP
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]
Soluii 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 HTML i
irurile text
]
[1]
DOM (2)
Document
Element
Element
<html>
html
Element Element
<head> <body>
Element
<Title> Atribute Element Element
<href> <a> <h1>
Text
titlu site Text Text
legatura header 1
]
[1]
Evenimente DOM
Categorie Tip Atribute Descriere
Apare cnd cu butonul mouse-ului se d click pe un element. Click este
Click onclick 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.
Mouse
Mouseup onmouseup Apare cnd butonul mouse-ului eliberat
mouseover onmouseover Apare cnd butonul mouse-ului se mut ntr-un element.
Apare cnd butonul mouse-ului se mut n timp ce se afl peste
mousemove onmousemove
unelement.
mouseout onmouseout Apare cnd butonul mouse-ului se mut nafara elementului.
Apare n mod similar cu "clicked" la tastatura. Keypress este definite ca
keypress onkeypress i keydown i keyup pe aceeai tast, cu secvena de evenimente:
Tastatur 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.
]
[1]
Evenimente DOM
Categorie Tip Atribute Descriere
Apare cnd se termin ncrcarea ntregului coninut dintr-un document,
load onload
incluznd fereasta, frame, obiect sau imagine.
unload onunload Apare cnd ntreg coninutul dintr-o fereast sau frame este eliberat.
HTML Apare cnd un obiect/imagine ncrcat este oprit nainte de fi complet
abort onabort
frame/ ncrcat.
obiect Apare cnd un obiect/imagine/frame nu poate fi complet/corespunztor
error onerror
ncrcat.
resize onresize Apare cnd un document vizualizat este redimensionat.
scroll onscroll Apare cnd se defileaz ntr-un document vizualizat.
Apare cnd un utilizator selects some text in a text field, including input
select onselect
and textarea.
Apare cnda control loses the input focus and its value has been
change onchange
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).
Apare cnd un element este focalizat via mouse, navigare cu tab,
focus onfocus
HTML incluznd label, input, select, textarea, i button.
form Apare cnd un element pierde controlul via mouse, navigare cu tab,
blur onblur
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)
Document
Navigator Frames[ ] Location History Screen
(DOM)
Figura 1.2. Modelul BOM

]
[1]
BOM (2)
BOM are un
Window Document
are DOM
are
are are
are iframe
form
object
Location are
history
are fii
screen
HTML Script
object object
navigator object
are
object
Figura 1.3. Relaia DOM-BOM

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/xhtml1-
transitional.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 HTML.
<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 formatare semantic 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.
Hiperlegturile sunt marcate n HTML 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,120,56,149 href=p1.html>
<area shape=circ coords=100,100,5 href=p2.html>
</map>
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]
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 indic crui element i se aplic regula.
Declaraiile indic cum ar trebui s fie stilizate elementele menionate prin
intermediul selectorului.
Proprietile indic aspectele elementului pe care dorim s le modificm.
Valorile specific setrile pe care dorim s le utilizm pentru proprietile
alese.
]
[1]
Declaratii (2)
selector {
proprietate1: valoare1;
proprietate2: valoare2; bloc de declaraii
proprietate3: valoare3;
}
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 conine 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 coninute 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 coninute 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. Nume de culori
2. valorilor RGB
3. 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]
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. border-top-width - specifica latimea bordurii de sus
2. border-right-width - specifica latimea bordurii din dreapta
3. border-bottom-width - specifica latimea bordurii de jos
4. 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. margin-top - specifica spatierea din exterior in partea de sus
2. margin-right - specifica spatierea din exterior in partea dreapta
3. margin-bottom - specifica spatierea din exterior in partea de jos
4. 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. padding-top - specifica spatierea din interior in partea de sus
2. padding-right - specifica spatierea din interior in partea dreapta
3. padding-bottom - specifica spatierea din interior in partea de jos
4. 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: min-

width, 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
Specifica o bordura 3D de tipul groove. Efectul depinde de valoarea culorii
groove
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.
Specifica o bordura 3D de tipul outset. Efectul depinde de valoarea culorii
outset
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 { Exemple
width: 904px;
margin: auto;
border: 1px solid grey;
background-color: white; }
#continut {
float: left;
width: 630px; }
#meniu {
float: left;
width: 230px;
#antet {
clear: left; }
div {
border: 1px solid violet;
background-color: #efefef;
margin: 5px;
padding: 5px; }
</style>
</head>
<body>
<div id="caseta">
<div id="antet">Antet</div>
<div id="meniu">Meniu</div>
<div id="continut">Zona de continut</div>
<div id="antet">Subsol</div>
</div>
</body>
</html>
<html>
<head>
<style>
#caseta {
width: auto; Exemple
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>
<html>
<head>
<style>
#caseta {
width: 1156px;
Exemple
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>
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 HTML, 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>Izoleaz 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> Definete msur scalar cu rang determinat

<nav> Definete link-uri navigation
<figure> 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:
<datalist> 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
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 pre-
defined 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 formenctype
<form>: formmethod
autocomplete formnovalidate
novalidate formtarget
height and width
Atribute noi pentru list
<input>: min and max

multiple
autocomplete pattern (regexp)
autofocus placeholder
form required
formaction 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 specifica valoarea maxima permisa

min specifica valoarea minima permisa
step specifica intervalele numarul legale
value 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;margin-
bottom: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>
<h2>News Article</h2>
<p> Continut articol
.</p>
</article>
]
[1]
Exemplu: <section>
<!DOCTYPE html> <h2>News Section</h2>
<html lang="en">
<title>HTML5</title
<article>
>
<meta charset="utf- <h2>News Article</h2>
8"> <p><Primul articol.</p>
<style></style> </article>
<body> <article>
<header> <h2>News Article</h2>
<h1>Pagina <p><Al doilea articol.</p>
Exemplu</h1> </article>
</header>
<nav>
<ul> </section>
<li>News</li>
<li>Item2</li> <footer>
<li>Item3</li> <p>&copy.</p>
</ul> </footer>
</nav>
</body>
</html>
]
[1]
<html>
<head>
<style>
header, footer, aside, article {
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]
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 range
date search
datetime tel
datetime-local time
email url
month week
number
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 CSS3 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 Nu se afiseaza nici o umbra

h-shadow Pozitia umbrei pe orizontala. Sunt permise si valori negative
(Obligatoriu)
h-shadow Pozitia umbrei pe verticala. Sunt permise si valori negative
(Obligatoriu)
blur Creaza un efect de blur (Optional)
spread Dimensiunea umbrei (Optional)
color 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-stretchnormal, 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
unicode-range optional, Definete rang caractere UNICODE pentru

font. Implicit "U+0-10FFFF
User Interface
In CSS3, 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 4+, 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, outline-
offset, resize
Prof.dr. Lucia Rusu
]
[1]
Java Script - Rol i funcionalitate
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
HTML 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 Aciune
utilizator
Manipulator
eveniment
Funcie
Obiecte Obiecte Java Script
Browser definite de
utilizator
Metode ale
obiectelor
Proprieti ale
Obiecte obiectelor
Obiecte
HTML
Fundamentale
]
[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> <html>
<head> <head>
<script> </head>
alert("Salutare"); <body>
</ script > Text oarecare
</head> <script>
<body> alert("Salutare");
Text oarecare </ script >
</body> </body>
</html> </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), \ continuare n linia urmtoare
\n linie nou
\t 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=1, x<=10, 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; do {
var xsuma=0; alert ("Numarul este " + i);
while (x<10){ i++;
xsuma+=x; } while (i < 3)
x++; }
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]
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 codul functiei
functia afiseazaMesaj() va fi apelata */
}
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 codul functiei
functia adunaNumere() va fi apelata */
}
alert( function adunaNumere( 2, 3 ) ); // Alerts "5"
]
[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, LN10, LN2, LOG2E,
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 (Not-
a-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
]
[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-and-
feel 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] [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/jquery-
1.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 baz
#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 baz
: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 baz (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 coninut
: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 HTML cu ID-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>
]
[1]
Concepte i paradigme 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]
Concepte i paradigme 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 - Inbound Links reprezit toate linkurile de pe alte
siteuri ctre siteul int, cu acelai nteles ca i back link.
Keyword Density
]
[1]

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

Black hat -pot duce chiar pn la excluderea site-ului
din motorul de cutare
keyword stuffing, se ascund n interiorul unei pagini web
cuvinte cheie care nu sunt vizibile de utilizatori, doar de
motorul de cutare
spam-ul pe reele sociale
Doorway pages reprezint o alt metod Black Hat
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
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
2 atunci cnd Google gseste un link spre site-ul dorit dintr-un alt
site, deja indexat
3. cnd un user se logheaz pe Google Webmaster Tools, verifica
site-ul i trimite o harta a site-ului.
4. 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 optimizarea paginilor
Googlebot viziteaza un site, aloc un ID unic pentru fiecare
pagin gsit
lista afiata
lista afisata intersectata
indexul suplimentar care conine pagini cu o importan
mai mic, care sunt afisate n SERP numai dac indexul
principal nu returneaz pagini potrivite termenului cautat
Elementele de optimizare on-page: titlul pagininii, metadata
paginii, heading-uri, corpul textului, legaturile interne,
legaturile off-page, imaginile ALT tag, si gazda altor
componente
Structurarea i optimizarea paginilor (2)
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 85
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,
keyword2,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 rentabila i alcatuirea 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
]
[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, 2011].
Proiectarea interfeelor Web
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.
Proiectarea interfeelor Web(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 aplicaiei 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.graphic-
design.com/ :
Evitarea suprancrcrii paginii
Respectarea unui raport 80% -20% 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 aplicaiei 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.
abloanele de proiectare
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-hypertext-
media/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 Business Logic
Data Tier
Tier Tier
Componenta
de produse
Logica de Driver la Baza de date
prezentare baza de
Componenta
date
de preuri
Logica de
procesare
Componenta
de clieni
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 HTML.
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 HTML/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]
Concepte i paradigme 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]

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 - Inbound Links reprezit toate linkurile de pe alte
siteuri ctre siteul int, cu acelai nteles ca i back link.
Keyword Density
]
[1]

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 Hat
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
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
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
2 atunci cnd Google gseste un link spre site-ul dorit dintr-un alt
site, deja indexat
3. cnd un user se logheaz pe Google Webmaster Tools, verifica
site-ul i trimite o harta a site-ului.
4. 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 optimizarea paginilor
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 85
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,
keyword2,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 rentabila i alcatuirea 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
Definitii
Conceptele Web 2.0. au fost fundamentate de Tim OReilly
(2005)
au aprut n 2004, 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 2.0 (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
Web 1.0 Web 2.0
aspectul social DoubleClick Google AdSense
aspectul Ofoto Flickr
interactiv, Akamai BitTorrent
Mp3.com Napster
baza: continuul Britannica Online Wikipedia
postat de Pagini personale Bloguri
utilizator, Speculare nume domenii SEO (optimizarea motoarelor de cutare)
Pagini vizitate Cost per click
aplicatia n sine Publicare Participare
indexarea Content Management System Wiki
informatiilor. Directoare (taxonomy) Tagging (folksonomy)
Stickiness RSS sindicarea informaiei
Implementarea Netscape Google
aceastei Tabelul 1. Web1.0 versus Web 2.0
tehnologii: Google: Gmail, GoogleCalendar, Google
Microsoft, Docs@Spreadsheet (2006), GoogleReader
Amazon, GoogleSchoolar, Google Suggest,
YahooMailBeta, GoogleBoot search, Blogger, YouTube,
YahooInstant GoogleMaps
Search
Principii Web 2.0
Simplitatea -Interfee utilizator extrem de prietenoase,
Partajarea utilizatorii fac publice informaiile nonpersonale
Interese 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
Web 2.0 i publicitatea online
Publicitatea -metod a mixului de marketing pentru a atinge membrii
segmentelor int att B2B ct i B2C
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).
Web 2.0 i publicitatea online (2)
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.
Web 2.0 i publicitatea online (3)
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
Caracteristicile comunitilor sociale online
Clasificarea membrilor comunitatilor sociale:
Creatorii 13% din useri sunt generatori de coninut
Critici - 19% din useri, sunt cei care posteaz comentarii pe bloguri i rspund la
comentariile fcute la filmulee, contribuie la clasarea produselor.
Colectorii 15% din useri, consum coninutul generat de useri n mod activ folosind
RSS feeds-uri i prin taguirea de site-uri.
Joinerii - 19% din useri sunt cei care activeaz pe una sau mai multe reele sociale.
Spectatorii 33% 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
Lumile virtuale versus reelele sociale
Diferenierea ntre lumile virtuale i reelele sociale:
dimensiuni spaiale (dimensiuni 2D si 3D) 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. In 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 10 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
a. coninutul,
b. interaciunea cu blogosfera
c. optimizarea.
a. Coninutul
Relevana,
3C ( Consecventa, Consistenta,Calitatea)
Aspectul: (prima impresie) conteaz
b.Interaciunea cu blogosfera
Internetul i Web 2.0 sau Web 3.0 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 link-
uri 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-ansamblu-
apartamente-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]
Concepte i paradigme 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]
Concepte i paradigme 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 colaborativ

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 colaborativ (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 ntr-
un 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]
Componentele CMS (3)

Structur minimal:
asset management,
componenta de workflow,
gestiunea utilizatorilor i a drepturilor,
Interfee
APIs.
Assetmanager este compus din:
depozit,
interfaa asociat,
conectori spre alte sisteme,
modul de workflow
modul de adminsitrare.
Assetmanager
Depozitul conine baze de date i fiiere care stocheaz
coninut, deine fiiere de configurare i de administrare
precum i baze de date ce specific modul de funcionare i
procedura de publicare.
Interfaa
permite sistemului de colectare, publicare, workflow i de
administrare s acceseze i s utilizeze depozitul.
pune la dispoziie funcii de input, de accesare i de output de
componente i de fiiere, sau date care sunt stocate n depozit.
Conectori spre alte sisteme: asigur trimiterea i primirea de
informaii din depozit,
modulul workflow introduce fiecare component sau
publicaie ntr-un ciclu de via definit
modul de administrare permite configurarea CMS.
Modelul de coninut
similare cu bazele de date, respectiv DTD-uri pentru
XML, determinnd structura fiecrei componente n
parte i modul de legare a componentelor din cadrul
CMS.
se specific:numele fiecrei clase de componente,
elemetele permise pentru fiecare component, tipul
elementului i valorile valide ale fiecrui element
respectiv structurile de acces n care particip fiecare
clas sau instan de component.
Stocarea coninutului: baze de date relaionale, fie
baze de date orientate obiect (XML)
Managementul i ciclul de via al coninutului
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, 2004].
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
Ciclul de via al coninutului
Abordari:
Bob Boiko (2002) :
1. colectare,
2. management (fluxuri de lucru, aprobare, controlul versiunilor,
repozitoriu),
3.publicare.
Gerry McGovern (2001), 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 0 i 1 milion de euro )
nivelul 3: proiecte de dimensiuni medii ( cu cifra de afaceri
realizat on-line cuprinsa ntre 1 i 10 milioane de euro )
nivelul 2: proiecte mari, cu branduri cunoscute ( cifra de afaceri
realizat on-line intre 10 i 100 milioane de euro )
nivelul 1 corespunde "montrilor" care pot genera o cifra de afaceri
on-line de peste 100 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 OpenID/ 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 (1), 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 Internet
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

1 Grafica Slideuri

Încărcat de

Informații document

Titlu original

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

1 Grafica Slideuri

Încărcat de

Drepturi de autor:

Formate disponibile

Prof.dr.

URL-ul de tip IP: serviciu://adresaIP

URL-ul local: serviciu://localhost/cale

URL de tip GET, are forma: URLnormal?ir de caractere

URI (Uniform Resource Identifier)

Browsere - funciile de baz

Browsere funciile avansate

Tipuri de aplicaii i plug-in-uri

Soluii software dedicate realizrii paginilor HTML

Soluii software dedicate realizrii graficii

DOCUMENT OBJECT MODEL (DOM)

<Title> Atribute Element Element

<href> <a> <h1>

titlu site Text Text

Figura 1.2. Modelul BOM

Figura 1.3. Relaia DOM-BOM

Exemplu: <numetag> Coninut </numetag>

Un element HTML (DOM) este delimitat de tag-ul de

n cadrul seciunii head se introduc informaii despre autorul documentului,

Structura unei pagini HTML

Structura unei pagini HTML

Tag-uri HTML de formatare semantic a textului

Hiperlegturile sunt marcate n HTML prin marcarea celor dou ancore:

<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

<img src="url" alt="titlul sau descrierea imaginii">

Atribute ale imaginii:

Problematica tagurilor HTML va fi analizat n prisma evenimentelor de

Informatia se trimite la server ca perechi

Metoda GET este folosit pentru:

Metoda POST este folosita cand formularul:

Obiecte in formulare HTML

Obiecte in formulare HTML (3)

Obiecte in formulare HTML (4)

Obiecte in formulare HTML (5)

Obiecte in formulare (HTML5)

O regul CSS conine dou pri: un selector i o declaraie.

selector { proprietate: valoare; }

Foaie de stil extern (declarat ntr-un fisier CSS extern)

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

<p style = "color: blue"> Paragraf </p>

Selectorul universal - se aplic la toate elementele din document

Selectorul de tip - se aplic numelor de elemente

Selectorul de clas - se aplic unui element al crui atribut clas are o

Selectorii grupai- se aplic numelor de elemente specificate

Agregarea n cascad a stilurilor

Agregarea respecta urmtoarea ordine:

declaraiile inline au cea mai mare prioritate (desi nu se recomanda)

Codului CSS coninut n cadrul fiierului stilulmeu.css:

Alb = rgb (255, 255, 255)

Negru = rgb (0, 0, 0)

Alb = #FFFFFF or #FFF echivalent cu (255,255,255)

Negru = #000000 or #000 echivalent cu (0,0,0)

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

Modalitate de lucru: se incepe tot timpul cu fontul dorit si se incheie cu

este folosita pentru a controla latimea unei borduri.

Putem controla dimensiunea individuala a bordurilor utilizand 4

Proprietatea border-width (2)

Putem specifica latimi diferite pentru cele patru valori ale

permite stabilirea unei zone libere transparente in exteriorul bordurii.

Limitarea dimensiunii casetelor

Putem limita dimensiunea casetelor cu ajutorul proprietatilor: min-