ACADEMIA DE STUDII ECONOMICE Facultatea de Comert

REALIZAREA UNUI WEB SITE

Anul 2 Grupa 378

Bucuresti
2009

Cuprins
1

I. II. III.
IV.

Consideratii teoretice Elemente de baza Definitie structurala Aformat de prezentare Link-uri si grafica Divizori Liste

V. VI. VII.

VIII. Fundaluri si culori IX. X. XI. XII. Tabele Java Limbajul Java 3D Studio Max

I. Consideraii teoretice

Procesul de realizare al unui website este unul complex, de lung durat care trebuie s respecte anumite reguli pentru a putea obine n final un produs internet profesionist, complex i actual. Primul pas care trebuie fcut n realizarea unei pagini web este stabilirea obiectivului, n funcie de care se va stabili numele site-ului i apoi dotrile pe care trebuie s le aib serverul unde se va face gzduirea. Astfel, primii pai de urmat la realizarea unei pagini web sunt: -stabilirea obiectivului i coninutul pe care l va avea noul website -stabilirea numelui domeniu pe care l va avea noul website i nregistrarea lui la www.rnc.ro sau la www.rotld.ro. Dac este un domeniu internaional recomandat este achiziionarea acestuia de la www.eurodns.com -alegerea unui pachet de gzduire n funcie de nevoile pe care le va avea noua pagin web i achiziionarea lui de la www.nregistrare-domenii.ro Dup ce au fost urmai primii pai i s-a realizat o schi a proiectului, n care se definete structura, coninutul i funcionalitatea paginilor web se trece la realizarea ablonului grafic, a logo-ului i a primelor texte de coninut. n momentul n care a fost definitivat grafica pe care o va ngloba noul website se trece la realizarea layout-ului prin transpunerea din desen n pagina html sau php folosind XHTML, CSS si PHP. Imediat urmtoare este etapa transpunerii coninutului i a elementelor de funcionalitate, aici fiind incluse textele, imaginile sau galeriile foto, butoanele, link-urile, formularele de contact, de cutare n site sau guest book, scripturi de afiare coninut i gestionare a acestuia plus multe alte elemente specifice. n practic o pagin web ar trebui s conin aferent ei i o seciune de administrare plus una de statistici; nu se omit aceti factori pentru c n viitor vor fi foarte folositori. Odat trecute aceste faze de producie se ajunge n momentul publicrii paginilor web pe internet, upload pe server, test on line, nscriere n directoare i lansarea campaniilor de publicitate. Paginile de Web sunt scrise ntr-un limbaj numit HTML (Hypertext Markup Language limbaj de marcare hipertext). HTML permite utilizatorilor s produc, pagini care includ texte, grafic i indicatori la alte pagini de Web. Vom ncepe s studiem HTML eu aceti indicatori, pentru c ei reprezint tocmai mecanismul care ine Web-ul conectat URL- Uniform Resource Locators

O pagin de Web poate s conin referine la alte pagini. S explicm cum sunt implementate aceste referine. nc de la crearea Web-ului a fost clar c pentru a avea o pagin care s indice spre alt pagin este necesar un mecanism care s permit numirea i regsirea paginilor. n particular sunt trei ntrebri la care trebuie sa se rspund nainte de a se putea afia o pagin: l. Cum se numete pagina ? 2. Cum este localizat pagina ? 3. Cum se face accesul la pagin ? Dac fiecare pagin ar avea un nume unic, atunci nu ar exista nici o ambiguitate n identificarea paginilor. Totui, problema nu este nc rezolvat. S considerm de exemplu o paralel ntre oameni i pagini. n SUA aproape fiecare persoan are un numr de asigurare social; care este un identificator unic, astfel nct nu exist dou persoane cu acelai numr. Totui, cunoscnd numai numrul respectiv nu exist nici o posibilitate de a gsi adresa persoanei respective, i sigur nu se poate afla dac persoanei respective trebuie s i se scrie n englez, spaniol sau chinez. Web-ul are practic acelai fel de probleme. Soluia aleas identific paginile ntr-un mod care rezolv toate trei problemele n acelai timp. Fiecare pagin are un URL (Uniform Resource Locater - adresa uniform pentru localizarea resurselor) care funcioneaz ca nume al paginii general valabil. Un URL are trei componente: protocolul, numele DNS al mainii pe care este memorat fiierul i un nume local, care indic n mod unic pagina (de obicei numele fiierului care conine pagina). Acest URL este format din trei componente: protocolul (http), numele DNS al serverului (www.cs.vu.nd) i numele fiierului (welcome.html), cu semnele de punctuaie corespunztoare. Se utilizeaz notaii care reprezint prescurtri standard. De. exemplu user/ poate s fie pus n coresponden cu directorul WWW al utilizatorului user, folosind convenia c o referin la directorul respectiv implic un anumit fiier, de exemplu index.html. De exemplu pagina autorului poate s fie referit ca: http://www.cs.vu.nl/~ast/ chiar dac de fapt numele fiierului este diferit. Pe multe servere un nume de fiier indic implicit pagina organizaiei creia i aparine serverul.

Acum ar trebui s fie clar cum funcioneaz hipertextul. Pentru a face o poriune de text selectabil, cel care scrie pagina trebuie s furnizeze dou elemente: textul prin care se face selecia i URL-ul paginii care trebuie adus dac textul este selectat. Cnd se face selecia, programul de navigare caut numele serverului utiliznd DNS-ul. Pe baza adresei IP a serverului, programul de navigare stabilete o conexiune TCP spre server. Utiliznd aceast conexiune, se transmite numele fiierului utiliznd protocolul specificat. Bingo. Acum sosete pagina. Protocolul http este protocolul nativ pentru Web; e1 este utilizat de ctre serverele de HTTP. Protocolul ftp este utilizat pentru accesul la fiiere prin FTP (File Transfer Protocol - protocol pentru transferul de fiiere), protocolul Internet de transfer de fiiere. FTP este utilizat de peste douzeci de ani i este foarte rspndit. Numeroase servere de FTP din toat lumea permit ca de oriunde din Internet s se fac o conectare i s se aduc orice fiier plasat pe un server FTP. Web-ul nu aduce schimbri aici, face doar ca obinerea fiierelor s se fac mai uor, pentru c FT'P are o interfa mai puin prietenoas. n viitor probabil c FTP-ul va dispare, deoarece nu exist nici un avantaj pentru o organizaie s aib un server de FTP n loc de un server de HTTP, care poate s fac tot ce face un server de FTP, i chiar mai mult (desigur mai exist nite argumente legate de eficien). Este posibil s se fac acces la un fiier local ca la o pagin de Web, fie utiliznd protocolul file (fiier), sau pur i simplu utiliznd numele fiierului. Aceast abordare este similar utilizrii protocolului FTP, dar nu implic existena unui server. Desigur funcioneaz numai pentru fiiere locale. Protocolul news permite unui utilizator de Web s citeasc un articol din tiri ca i cum ar fi o pagin de Web. Aceasta nseamn de fapt c un program de navigare este n acelai timp i un cititor de tiri. De fapt multe programe de navigare au butoane sau elemente de meniu care permit citirea tirilor USENET mai uor dect dac se utilizeaz cititoare de tiri obinuite. Protocolul news admite dou formate. Primul format specific un grup de tiri i poate s fie utilizat pentru a obine o list de articole de la un server de tiri preconfigurat.

Al

doilea

format

cere

identificatorul

unui

articol,

de

exemplu

AA0134223112@csutah.edu. Programul de navigare aduce articolul de la serverul corespunztor utiliznd protocolul NNTP. Protocolul gopher este utilizat de sistemul Gopher, care a fost proiectat la universitatea Minnesota. Numele este cel al echipei atletice a universitii, the Golden Gopher, de asemenea acest nume este utilizat n argou pentru go for; adic o comand de aducere Gopher-ul a precedat Web-ul cu civa ani. Este o metod de regsire a informaiei, similar conceptual cu cea utilizat de Web, dar acceptnd numai text i imagini. Cnd un utilizator se conecteaz la un server de Gopher, va avea la dispoziie un meniu de fiiere i directoare, fiecare intrare putnd s fie conectat la orice meniu de Gopher oriunde n lume. Marele avantaj al Gopher-ului n raport cu Web-ul este c funcioneaz foarte bine cu terminale ASCII care afieaz 25 x 80 caractere si din care exist nc foarte multe n lume. Pentru c este bazat pe text, Gopher este foarte rapid. De aceea n lume exist multe servere de Gopher. Utilizatorii de Web pot s acceseze un server de Gopher i s vad fiecare meniu Gopher ca o pagin Web cu intrri selectabile. Dac nu ai lucrat cu Gopher-ul utilizai maina favorit de cutare n Web pentru a cuta cuvntul gopher. Este posibil s se trimit cerere de cutare complet unui server de Gopher utiliznd un protocol gopher+. Ce se va afia este rezultatul cererii transmise serverului de Gopher. Ultimele dou protocoale nu sunt de fapt protocoale pentru aducerea unor pagini de Web i nu sunt suportate de orice program de navigare, dar sunt utile. Protocolul mailto permite transmiterea de pot dintr-un program de navigare. Pentru a face aceast operaie se selecteaz butonul OPEN i se specific un URL constnd din mailto: urmat de adresa destinatarului. Majoritatea programelor de navigare vor rspunde cu un formular care are intrri corespunztoare subiectului i altor informaii din antet i spaiu pentru mesaj. Protocolul telnet este utilizat pentru stabilirea unei conexiuni pe o main aflat la distan. Se utilizeaz n acelai fel ca i programul Telnet, ceea ce nu constituie o surpriz, deoarece majoritatea programelor de navigare utilizeaz programul Telnet.}

Pe scurt URL-urile au fost proiectate nu numai pentru a permite utilizatorilor s navigheze prin Web, dar i pentru a utiliza FTP, news, Gopher, email i telnet, ceea ce face inutile interfeele specializate pentru aceste protocoale integrnd astfel ntr-un singur program, navigatorul n Web, aproape toate tipurile de acces n Internet. Dac metoda nu ar fi fost proiectat de un fizician ar fi putut s par produsul departamentului de publicitate al unei companii de software. n ciuda tuturor acestor proprieti, creterea Web-ului scoate n eviden i o slbiciune a metodei utilizrii URL-urilor. Pentru o pagin care este foarte des referit, ar fi de preferat s existe mai multe copii pe servere diferite, pentru a reduce traficul n reea. Problema este c URL-urile nu ofer nici o posibilitate de indicare a unei pagini fr s se specifice unde este localizat pagina respectiv. Nu exist nici o metod pentru a spune ceva de genul: Vreau pagina xyz, dar nu m intereseaz de unde o aduci. Pentru a rezolva aceast problem i a permite multiplicarea paginilor IETF lucreaz la un sistem de URL (Universal Resource Identifiers - identificatori universali de resurse). Un URL poate s fie privit ca un URL generalizat. Acest subiect este n curs de cercetare. n continuare am s prezint un ghid al programatorului HTML care prezint toate tag-urile recunoscute de majoritatea browser-elor - versiunile curente. Am inclus toate tag-urile din specificaia HTML 3.2 , precum i extensiile Netscape incluse n versiuni de pn la 3.0b5. Acest ghid este scris astfel nct s fie ct mai concis posibil.

II. Elemente de baza

Tip document Titlu Header Corp <HTML></HTML> <TITLE></TITLE> <HEAD></HEAD> <BODY></BODY> (nceput i sfrsit fisier) (trebuie s fie n header) (informaii descriptive, cum ar fi titlul) (corp pagin)

III. Definitie structurala

Mrime font <H?></H?> (spec. definete 6 nivele) Mrime cu aliniere Divizare Divizare cu aliniere Citat Evidentiere Evidentiere prin ngrosare Citat Cod Exemplu output Input tastatur Variabil Definitie Addresa autor Font mare Font mic <H? RIGHT></H?> <DIV></DIV> <DIV ALIGN=LEFT|CENTER|

ALIGN=LEFT|RIGHT| (de obicei

CENTER></DIV> <BLOCKQUOTE></BLOCKQUOTE> <EM></EM> <STRONG></STRONG> <CITE></CITE> <CODE></CODE> <SAMP></SAMP> <KBD></KBD> <VAR></VAR> <DFN></DFN> <ADDRESS></ADDRESS> <BIG></BIG> <SMALL></SMALL>

deplasat) (de obicei aplecat) (de obicei ngroat) (de obicei aplecat) (pt. listare cod surs)

(nu

prea

rspndit)

IV. Format de prezentare

ngroat Aplecat Subliniat Evideniat <B></B> <I></I> <U></U> <STRIKE></STRIKE>

(nu prea rspndit nc) (nu prea rspndit

Evidentiat Subscript Superscript Main de scris Preformatare Dimensiune Centru Clipire Mrime font Schimbare mrime font Mrime de baz font Culoare font Selecie font Text pe mai multe coloane Distana dintre coloane Dimensiune coloan Distantare Tip distanare Mrime distanare Dimensiuni distanare Aliniere

<S></S> <SUB></SUB> <SUP></SUP> <TT></TT> <PRE></PRE> <PRE WIDTH=?></PRE> <CENTER></CENTER> <BLINK></BLINK> <FONT SIZE=?></FONT> <FONT SIZE="+|-?"></FONT> <BASEFONT SIZE=?> <FONT COLOR="#$$$$$

nc) (nu prea nc)

rpndit

(se folosete un font tipografic) (nu se ignor spaiile i liniile noi) (n caractere) (pentru text imagini) (cel mai ocolit tag) (de la 1 la 7) (de la 1 la 7; implicit 3)

$"></FONT> <FONT FACE="***"></FONT> <MULTICOL COLS=? ></MULTICOL> <MULTICOL ></MULTICOL> <MULTICOL GUTTER=? (implicit 10 pixeli) WIDTH=?

></MULTICOL> <SPACER> <SPACER TYPE=horizontal| vertical| block> <SPACER SIZE=?> <SPACER WIDTH=? HEIGHT=?> <SPACER ALIGN=left|right|center>

V. Link-uri i grafic
Link ctre alt document Link ctre un target Fereastr int <A HREF="URL"></A> <A HREF="URL#***"></A> (n alt document) <A HREF="#***"></A> (n acelai document) <A HREF="URL" TARGET="***| |

Definire target n document Relaie Relaie invers ncrcare imagine Aliniere Aliniere

_blank|_self|_parent|_top"></A> <A NAME="***"></A> <A REL="***"></A> <A REV="***"></A> <IMG SRC="URL"> <IMG SRC="URL" ALIGN=TOP| BOTTOM|MIDDLE|LEFT|RIGHT> <IMG SRC="URL" ALIGN=TEXTTOP| ABSMIDDLE| BASELINE|ABSBOTTOM> <IMG SRC="URL" ALT="***"> <IMG SRC="URL" ISMAP> <IMG SRC="URL" USEMAP="URL"> <MAP NAME="***"></MAP> <AREA SHAPE="RECT" COORDS=",,," HREF="URL"| NOHREF> <IMG SRC="URL" WIDTH=? HEIGHT=?> <IMG SRC="URL" BORDER=?> <IMG SRC="URL" HSPACE=? VSPACE=?> <IMG SRC="URL" LOWSRC="URL"> <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL"> <EMBED SRC="URL"> <EMBED SRC="URL" WIDTH=? HEIGHT=?>

(nu prea rspndit) (nu prea rspndit)

Alternare text Mapare imagine Utilizare imagine mapat Definire mapare Definire regiune mapat

(dac imaginea nu este incrcat) (cere un CGI)

Dimensiuni Chenar Spaiu nconjurtor Browser cu rezoluie mic Forare client Inserare obiect Dimensiuni obiect

(n pixeli) (n pixeli) (n pixeli)

(inserare obiect n pagin)

VI. Divizori
Paragraf <P></P> (de obicei nu e necesar nchiderea tag-ului)

10

Aliniere text Linie nou Eliminare spatiu din jurul textului Linie orizontal Aliniere Grosime Lungime Lungime procentuala Linie solid Linie text continu Trecere la linie nou

<P ALIGN=LEFT|CENTER| RIGHT></P> <BR> <BR CLEAR=LEFT|RIGHT|ALL> (un singur CR)

<HR> <HR ALIGN=LEFT|RIGHT|CENTER> <HR SIZE=?> (n pixeli) <HR WIDTH=?> (n pixeli) <HR WIDTH="%"> (procentaj din limea <HR NOSHADE> <NOBR></NOBR> <WBR> paginii) (fr aspect 3D) (previne trecerea la linie nou) (unde e nevoie)

VII. Liste
Liste nenumerotate Compact Tipul bullet-ului <UL><LI></UL> <UL COMPACT></UL> <UL TYPE=DISC|CIRCLE| (<LI> nainte de fiecare element al listei) (pentru toat lista)

Liste numerotate Compact Tipul numrtorii Numr de nceput Liste de definiii Compact Liste menu Compact

SQUARE> <LI TYPE=DISC|CIRCLE|SQUARE> (acesta i urmtorii) <OL><LI></OL> (<LI> nainte de fiecare element al listei) <OL COMPACT></OL> <OL TYPE=A|a|I|i|1> <LI TYPE=A|a|I|i|1> <OL START=?> <LI VALUE=?> <DL><DT><DD></DL> <DL COMPACT></DL> <MENU><LI></MENU> <MENU COMPACT></MENU> (pentru toat lista) (acesta i subsecvenele sale) (pentru toat lista) (acesta si subsecventele sale) (<DT>=termen, DD>=definiie) (<LI> nainte de fiecare element al listei)

11

Liste directori Compact

<DIR><LI></DIR> <DIR COMPACT></DIR>

(<LI> nainte de fiecare element al listei)

VIII. Fundaluri i culori

Imagine fundal Culoare fundal Culoare text Culoare link-uri Link-uri vizitate Link activat <BODY BACKGROUND="URL"> <BODY BGCOLOR="#$$$$$$"> <BODY TEXT="#$$$$$$"> <BODY LINK="#$$$$$$"> <BODY VLINK="#$$$$$$"> <BODY ALINK="#$$$$$$">

(ordinea este rou/verde/albastru)

IX. Tabele
Definire tabel Chenar tabel Spaiu ntre celule Spaiu fa de marginea celulei Dimensiune dorit Dimensiune procentual Linie tabel Aliniere <TABLE></TABLE> <TABLE BORDER=?></TABLE> <TABLE CELLSPACING=?> <TABLE CELLPADDING=?> <TABLE WIDTH=?> <TABLE WIDTH="%"> <TR></TR> <TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM Celul tabel VALIGN=TOP|BOTTOM|MIDDLE <TD></TD> (trebuie s apar n interiorul unei linii tabel) Aliniere <TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE Fr linii noi <TD NOWRAP> Pe cte coloane s se <TD COLSPAN=?> (n pixeli) (procentaj pagin)

din

12

ntind Pe cte linii s se ntind Dimensiune dorit Dimensiune procentual Culoare fundal celul Header tabel

<TD ROWSPAN=?> <TD WIDTH=?> <TD WIDTH="%"> <TD BGCOLOR="#$$$$$$"> <TH></TH>

(n pixeli) (procentaj din tabel) (apare dar la fel ca pe

datele din interior ngroat, centru) Aliniere <TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM VALIGN=TOP|BOTTOM| MIDDLE> Fr linii noi <TH NOWRAP> Pe cte coloane s se <TH COLSPAN=?> ntind Pe cte linii s se ntind Dimensiune dorit Dimensiune procentual Culoare fundal Captur tabel Aliniere <TH ROWSPAN=?> <TH WIDTH=?> (n pixeli) <TH WIDTH="%"> (procentaj din tabel) <TH BGCOLOR="#$$$$$$"> <CAPTION></CAPTION> <CAPTION ALIGN=TOP| (nainte/dup tabel) BOTTOM>

X. Java
Applet Nume applet Parametri Locaie applet Identificator applet Text alternativ Aliniere Dimensiune Distanare <APPLET></APPLET> <APPLET CODE="***"> <APPLET PARAM NAME="***"> <APPLET CODEBASE="URL"> <APPLET NAME="***">

(pentru referiri din alt

parte a paginii) <APPLET ALT="***"> (pt. browser-e non-Java) <APPLET ALIGN="LEFT|RIGHT| CENTER"> <APPLET WIDTH=? HEIGHT=?> <APPLET HSPACE=? VSPACE=?> 13 (n pixeli) (n pixeli)

XI.Limbajul Java

n cadrul paginilor web pot fi incluse i applet-uri, care reprezint de fapt miniaplicaii n limbajul Java. Un applet este un program Java care poate fi executat cu un browser de Web. Spre deosebire de aplicaiile din Java, applet-urile sau miniaplicaiile nu au o metod main ( ), dar au metode care sunt apelate n diferite stri ale lor. Applet-ul este un fiier executabil i un fiier HTML asociat care face legtura cu browser-ul. Applet-urile sunt rulate folosind browsere care accept Java: -Netscape Navigator; -Microsoft Internet Explorer; -Sun HotJava, etc. Browser-ele care execut appleturi au un interpretor Java care execut codul appletului dup ce n prealabil a fost transferat n sistemul utilizatorului. n fiierul html al applet-ului trebuie introdus eticheta <APPLET>, care are o extensie a limbajului HTML, ce permite includerea miniaplicaiilor n pagini Web. Forma cea mai simpl a etichetei APPLET are atributele CODE ( specific unde se afl fiierele ), WIDTH i HEIGHT ( arat dimensiunile lungimea i limea ). Un exemplu de etichet ar fi urmtorul: < APPLET CODE=NumeApplet.class Codebase= NumeDirector WIDTH=100 HEIGHT=100> </APPLET> Fiierul HTML, cel cu extensia.class i cel cu extensia .java trebuie s fie n acelai director pentru a rula aplicaia. 14

XII.3D Studio Max

Aspectul paginilor Web poate fi mbuntit prin realizarea unor animaii 3D complexe. Acest lucru poate fi realizat folosind interfaa 3D Studio Max, care este specializat n crearea i animarea unor obiecte virtuale. Ca i alte aplicaii Windows, 3D Studio ofer un spaiu de lucru, butoane, un panou de comand, o bar de stare i un sistem de control al desfurrii deplasrilor n timp. Animaiile realizate n 3D Studio se salveaz sub form de fiiere cu extensia .gif, care ns, pentru a putea fi introduse n pagini Web, trebuie s fie fiiere gif animate. Gif-urile animate pot contribui la aspectul paginii, ele prezentnd o animaie simpl i foarte scurt, care nsufleete pagina fr a ncetini prea mult descrcarea ei. Operaia de creare a gif-urilor animate presupune parcurgerea a dou etape: Crearea cadrelor separate Combinarea cadrelor ntr-un singur fiier. Dei un gif animat este un singur fiier, el este alctuit din mai multe cadre, asemenea secvenei de film.

15