Grafic

Cursul 1. Noiuni
introductive, standarde,
tehnici, concepte Internet
i WEB
Lect.univ.dr. Daniel MICAN
daniel.mican@econ.ubbcluj.ro

Evaluare

10% proiect HTML + CSS (Sptmna 20-26 Aprilie)

15% proiect HTML + CSS + JS (n ultimul laborator)

35% examen practic (JavaScript, contra cronometru, pe

baz de bilete. Se d n ultimul laborator)

40% examen teoretic (Vor fi 6 intrebari deschise din

noiunile predate la curs. Se d n sesiune)

Organizare materii web

Grafica

(sem IV)

PSW

(sem V)

Programare
Programare
client-side, de server-side i
interfee Web configurrile
aferente
HTML
CSS
JavaScript

PHP
MySQL
Apache

UIA

(sem VI)

Interoperabilit
ate
clientserver, serverserver, serverserviciu
AJAX
tehnologii XML

Frontend Versus Backend

"Frontend" se refer la orice aspect al procesului de
proiectare care apare
sau are legtur direct cu browser-ul. Materia pe care o
facem n semestrul
acesta se concentreaz n principal pe design-ul interfeelor
site-urilor web.
Urmtoarele activiti sunt de obicei considerate a fi sarcini
front-end:
Activitile de design grafic i producia de imagini;
Design-ul interfeelor;
Design-ul aranjrii i prezentrii Informaiilor n vederea
vizionrii n condiii optime;
Crearea documentelor HTML i a foilor de stil;
Integrarea funcionalittilor oferite cu ajutorul scripturilor

Frontend Versus Backend

"Backend" se refer la programele i script-urile care lucreaz pe serverul
din
spatele scenei, pentru a face pagini web dinamice i interactive. n general,
dezvoltarea web pe partea de backend se realizeaz de ctre programatori
cu
experien.
Urmtoarele sarcini au loc pe partea de backend:
Design-ul bazei de date. Se refer la modul n care este organizat
informaia pe server;
Design-ul formularelor;
Design-ul fluxurilor de lucru (workflow);
Programarea i implementarea celor de mai sus;
Implementarea sistemelor de management al coninutului;
Crearea de aplicaii web pe partea de server folosind PHP, JSP, Ruby,
ASP.NET, Java i alte limbaje de programare.

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language) este folosit pentru structurarea

paginilor web. Exist cteva versiuni de HTML n uz astzi: HTML
4.01 este cel mai popular, HTML5 este mai robust i ctig teren,
iar incet incet se bucur i de sprijinul browser-elor. Ambele versiuni
au o implementare mai strict numit XHTML (eXtensible HTML ),
care este, n esen, aceeai limbaj dar cu o sintax mult mai strict.

HTML nu este un limbaj de programare, este un limbaj de marcare,

ceea ce nseamn c permite identificarea i descrierea diferitelor
componente ale unui document, cum ar fi titluri, paragrafe sau
listele. Marcajul indic structura de baz a documentului. Pentru
crearea i editarea documentelor HTML nu avei nevoie de
cunotine de programare.

n acest semestru vom acoperi elementele i atributele cele mai

cunoscute pentru a da o structura semantic coninutului. De
asemenea, vom trata inclusiv noile elemente introduse n HTML5.

CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) este folosit pentru

prezentare. n timp ce HTML este folosit pentru a descrie
coninutul unei pagini web, rolul Cascading Style Sheets
(CSS) este de a descrie modul n care ar trebui s arate
coninutul. n web design, modul n care arat pagina este
cunoscut sub termenul de prezentare. Asta nseamn
fonturi, culori, imagini de fundal, linii de spaiere, aspectul
paginii, etc. Toate aceste elemente sunt controlate cu CSS.
Cu cea mai nou versiune (CSS3), putem aduga chiar
efecte speciale i animaie paginilor web.

n acest semestru vom nva elementele de baz ale

folosirii CSS pentru schimbarea prezentrii informaiilor
textuale i pentru a crea layout-uri pe mai multe coloane.

JavaScript
JavaScript este folosit pentru a oferi interactivitate. JavaScript este un limbaj
de
scripting care este utilizat pentru a aduga interactivitate paginilor web.
Interactivitatea const n:
validarea cmpurilor unui formular;
schimbarea stilurilor pentru un element sau chiar pentru ntreg-ul site;
determinarea browserului s ii aminteasc informaii despre utilizator
pentru vizitele viitoare;
construirea unor widget-uri de interfa, cum ar fi meniurile derulante, etc.
JavaScript este utilizat pentru a manipula elemente din cadrul paginii web, a
stilurilor aplicate, sau chiar a browser-ului.
n acest semestru vom face o trecere in revist a sintaxei JavaScript, astfel
nct s ntelegem noiuni simple de programare i concepte precum:
evenimente, funcii, variabile. De asemenea, vom nva modul n care
JavaScript este utilizat n DOM Scripting.

Editoarele HTML
Editoarele HTML sunt concepute pentru a accelera procesul de scriere
a
codului HTML:
Adobe Dreamweaver ofer un editor mpreun cu o interfa
vizual "WYSIWYG" (What You See Is What You Get) i este una
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.

Programe editare grafic

Pentru a aduga imagini la paginile web create avem nevoie de programe de editare
grafic. n continuare vom enumera unele dintre cele mai populare programe pentru
crearea graficii web i nu numai:
Adobe Photoshop este incontestabil standardul industriei pentru crearea de
imagine att de pentru print ct i pentru web;
Adobe Photoshop Elements este o versiune mai uoar de Photoshop. n principal
a fost proiectat pentru editare foto, dar are toate instrumentele necesare pentru a
crea imaginile necesare paginilor web;
Adobe Illustrator este excelent pentru crearea de logo-uri, icon-uri i ilustraii la o
varietate de dimensiuni. 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
extraordinar. Ofer facilitai de editare profesional a fotografiilor i design al
interfeelor web. Cost 718$;
Corel Paint Shop Pro este o versiune mai uoar de CorelDRAW. Acest editor grafic
este popular n primul rnd datorit preului su redus. Cost doar 55$;
GIMP (GNU Image Manipulation Program) poate fi folosit in sistemele Unix,
Windows i Mac. Acesta este un program gratuit de editare a imaginilor i este
similar cu Photoshop.

Programe de transfer al fiierelor (FTP)

Un program de transfer al fiierelor (FTP) permite ncrcarea i
descrcarea
fiierelor. Schimbul de fiiere se realizeaz ntre computer
local i computerul
care va servi paginile web (serverul web). n general, cea mai
mare parte a
editoarelor HTML enumerate mai devreme au programe FTP
integrate. Exist,
de asemenea, programe de FTP dedicate, cum sunt
enumerate aici:
SmartFTP Client (32-bit)
CuteFTP
FTP Voyager
WS_FTP Professional
Core FTP LE

URL (Uniform Resource Locator)

URL (Uniform Resource Locator) adreseaz unic resurse informaionale
stocate n locaiile unei reele i au forma unor iruri de caractere ce permit
identificarea transparent a utilizatorului datorit interfeei browserelor i au
forma: serviciu://nume-gazd.subdomeniu.domeniu:port/cale-director
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_F
SEGA.pdf

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.

Protocoale

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

Funciile de baz ale unui Web browser:

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 ntro zon de memorie cache ele pot fi uor ncrcate la o nou cerere.