Listă de Figuri 4 [305480]

Licență

Listă de Figuri 4 [305480]

Byadmin ianuarie 1, 2024

Cuprins

Cuprins 3

Listă de Figuri 4

Introducere 5

1 Capitolul 1. Despre Internet 6

1.1 Noțiuni introductive despre rețele de calculatoare 6

1.2 Transferul de fișiere în rețea 8

1.3 Serviciul World Wide Web (WWW) 9

2 Capitolul 2. Noțiuni de WebDesign și HTML 10

2.1 Apariția și evoluția limbajului HTML 10

2.2 Evoluția webdesignului 10

2.3 Instrumente și tehnologii 11

2.4 Tendințe în Web Design 11

2.5 Elemente constitutive ale limbajului HTML 12

3 Capitolul 3. Noțiuni teoretice de CSS și JavaScript 15

3.1 CSS 15

3.1.1 [anonimizat] 15

3.1.2 Stiluri de tip embedded 16

3.1.3 Stiluri definite în fișiere externe 16

3.2 JavaScript 18

4 Capitolul 4. WebSite-ul Mobilier de grădină 20

4.1 Scurtă prezentare a site-ului 20

4.2 Tehnologii folosite 21

4.2.1 J-Query 21

4.2.2 Lightbox 22

4.3 [anonimizat] 25

Concluzii și dezvoltări ulterioare posibile 35

Bibliografie 36

Anexa 1 37

Părți din Codul aplicației 37

Listă de Figuri

Figura 1-1. [anonimizat] 6

Figura 1-2. Semantic web 7

Figura 1-3. [anonimizat] 7

Figura 1-4. Aplicația FileZilla 8

Figura 2-1. [anonimizat] <img> cu diverse atribute 14

Figura 3-1. Utilizarea atributului Style 15

Figura 3-2. Stil de tip embedded 16

Figura 3-3. Codul fișierului ex.css 17

Figura 3-4. Fișierul HTML care utilizează stilurile declarate în ex.css 17

Figura 3-5. [anonimizat] 18

Figura 3-6. [anonimizat] 19

Figura 3-7. [anonimizat] 19

Figura 4-1. Prima pagină a site-ului 20

Figura 4-2. Logo-[anonimizat] 20

Figura 4-3. Bara de meniuri 21

Figura 4-4. Date informale despre firmă și alte opțiuni 21

Figura 4-5. Diagrama utilizării jQuery 21

Figura 4-6. Istoria versiunilor de jQuery 22

Figura 4-7. Efect Lightbox 22

Figura 4-8. Fereastră deschisă cu Lightbox 23

Figura 4-9. Formatare fereastră Lightbox 23

Figura 4-10. Vizualizare galerie de produse 24

Figura 4-11. Parcurgere automată a galeriei 24

Figura 4-12. Logo-[anonimizat] 25

Figura 4-13. Pagina Home 25

Figura 4-14. Pagina Contact 26

Figura 4-15. Pagina de autentificare cont utilizator 26

Figura 4-16. Detalii personale 27

Figura 4-17. Adresa utilizatorului pentru crearea contului 27

Figura 4-18. ListBox în Formularul de înregistrare 27

Figura 4-19. Parola de acees la cont 28

Figura 4-20. Posibilitatea realizării unui abonament la Newsletter 28

Figura 4-21. Confirmare cont nou creat 28

Figura 4-22. Vizualizarea sau modificarea informațiilor introduse 28

Figura 4-23. Pagina Catalog 29

Figura 4-24. [anonimizat] 29

Figura 4-25. Vizualizare Newsletter 30

Figura 4-26. Opțiunea de Print din pagina Catalog 30

Figura 4-27. [anonimizat] 31

Figura 4-28. Pagina Dinning 31

Figura 4-29. Sortare produse Dinning 32

Figura 4-30. Pagina Lounge 32

Figura 4-31. Sortare în funcție de preț a produselor de salon 33

Figura 4-32. Produs din gama de protecție solară 33

Figura 4-33. Comanda prin telefon 34

Introducere

Lucrarea “Website. Mobilă de grădină” detaliază teoria ce stă în spatele construcției unui website. Limbajul folosit este HTML (Hypertext Markup Language), care este principalul limbaj pentru paginile web.

[anonimizat] a prezenta într-un mod plăcut și încântător, diverse produse de grădină. În ultima vreme, tot mai multă lume părăsește lumea zgomotoasă a orașului, optând pentru viața la curte, într-o oază de liniște. Astfel a crescut piața de oferte pentru obiecte de grădină. De aici a venit și ideea înființării firmei IdealGarden – importator unic în România pentru Hillerstorp Tra AB Suedia, care aduce produse de mobilier din Suedia, fiind realizate din pin nordic suedez, din ratan sau din material metalic. Produsele sunt destinate amenajării grădinilor, piscinelor, teraselor, terenurilor de golf și de tenis.

Lucrarea este constituită din 3 părți principale și anume: descrierea proiectului, noțiunile teoretice despre tehnologiile utilizate la crearea site-ului și partea de descriere a websiteului.

Introducerea lucrării se constituie într-o prezentare generală a temei, obiectivelor și metodelor folosite. Expunerea este astfel aleasă încât să permită o privire de ansamblu asupra întregii lucrări.

Prima parte principală a lucrării, constituită din capitolele 1, 2, 3, abordează partea teoretică care stă la baza proiectării și realizării acestei aplicații. Capitolul 1 descrie informații despre Internet, evoluția acestuia, rețele de internet și principii de funcționare a acestora, servicii Internet. Capitolul 2 descrie limbajul HTML începând cu noțiuni introductive, apoi continuând cu elementele constitutive ale limbajului HTML, funcții de controlare a execuției codului HTML. Capitolul 3 prezintă informații teoretice despre CSS.

Partea a doua a lucrării – Capitolul 4 – prezintă realizarea efectivă a website-ului și modul în care operatorul uman interacționează cu aceasta. Aici sunt descrise paginile web care constituie website-ul, precum și interfața cu utilizatorul.

Capitolul 1. Despre Internet

Noțiuni introductive despre rețele de calculatoare

O rețea de calculatoare este o colecție de calculatoare și alte componente hardware interconectate prin canale de comunicare care permit utilizarea în comun a resurselor și informațiilor. Pentru a forma o rețea de calculatoare sunt necesare minim două calculatoare conectate între ele printr-un mediu de comunicație.

Rețelele pot fi clasificate în funcție de o multime de caracteristici, cum ar fi mediul folosit pentru transportul de date, protocolul de comunicații, scară, topologie, domeniul de aplicare și de organizare. Protocoalele de comunicație definesc normele și formatele de date pentru schimbul de informații într-o rețea de calculatoare, și oferă baza de programare de rețea. Binecunoscutele protocoale de comunicații includ Ethernet, un standard al hardware-ului, care este omniprezent în rețele locale, și Internet protocol suite, care definește un set de protocoale de Internet, de exemplu pentru comunicații de date între mai multe rețele, precum și transferul de date host-to-host, și formate de transmisie specifice aplicațiilor.

Internetul reprezintă un sistem global de rețele de computere interconectate care utilizează standardul Internet Protocol Suite (adesea numit TCP/IP, deși nu toate aplicațiile folosesc TCP) pentru a servi miliarde de utilizatori din întreaga lume. Este o „rețea de rețele”, care constă din milioane de rețele particulare, publice, academice, de afaceri, și rețele guvernamentale, de interes local sau mondial, care sunt legate de o gamă largă de tehnologii de rețele electronice, fără fir și optice. Internetul desfășoară o gamă largă de resurse de informare și de servicii, cum ar fi documentele inter-conectate de hypertext ale World Wide Web (WWW), precum și infrastructura de e-mail.

Figura 1-1. Harta internetului cu legături între orașele lumii, conform Chris Harrison

(http://www.chrisharrison.net/index.php/Visualizations/InternetMap)

Harta Internetului este reprezentată de o fotografie a rețelei globale începând cu sfârșitul anului 2011. Ea cuprinde peste 350 de mii site-uri din 196 de țări și toate zonele de domeniu .

Figura 1-2. Semantic web

Din 2011, mai mult de 2,2 miliarde de oameni – aproape o treime din populația Pământului – utilizează serviciile de internet. Internetul nu are nici o guvernare, nici centralizare, nici în implementare, nici în politicile de acces și de utilizare; fiecare element constitutiv de rețea stabilește propriile standarde. Doar Internet Protocol Adress și Domain Name System, sunt conduse și întreținute de o organizație numită Internet Corporation for Assigned Names and Numbers (ICANN), formată în anul 1998 [10]. Susținerea tehnică și de standardizare a protocoalelor de bază IPv4 și IPv6, este o activitate a Internet Engineering Task Force (IETF), o organizație non-profit de afiliere internațională la care oricine se poate asocia, aducând o contribuție în expertiza tehnică.

Figura 1-3. Harta internetului cu legături între orașele Europei, conform Chris Harrison

(http://www.chrisharrison.net/index.php/Visualizations/InternetMap)

Pe la începutul anilor 1980, accesul la Internet se făcea de pe calculatoarele personale și stațiile de lucru conectate direct la rețelele locale sau prin conexiuni dial-up folosind modemuri și linii telefonice analogice. LAN (Local Area Network) erau de obicei, operate la 10 Mbit/s și au crescut pentru a sprijini traficul de 100 și 1000 Mbit/s, în timp ce viteza modemurilor de date a crescut de la 1200 și 2400 biți/s în 1980, la 28 și 56 kbit/s între jumătatea și sfârșitul anilor 1990. Inițial conexiuni dial-up au fost făcute de la terminale sau de computere care rulează software-ul de emulare terminal la serverele terminale de pe LAN. Aceste conexiuni dial-up nu suportă utilizarea end-to-end de utilizare a protocoalelor de Internet și furnizează doar terminale pentru conexiunile gazdă. Introducerea de servere de acces la rețea (NASS), sprijinirea Serial Internet Protocol de linie (SLIP), și mai târziu protocol punct-la-punct (PPP) a extins protocoalele Internet, și a realizat întreaga gamă de servicii de Internet disponibile pentru utilizatorii de dial-up, limita fiind doar cea impusa de ratele mai mici de date disponibile, folosind dial-up.

Acces la Internet în bandă largă, de multe ori numită doar bandă largă și, de asemenea, cunoscut sub numele de acces la internet de mare viteză, sunt servicii care oferă bit-rates considerabil mai mari decât cea disponibilă utilizând un modem de 56 kbit/s. Banda largă este în prezent un termen de marketing prin care companiile de telefonie, cablu și altele îl folosesc pentru a vinde produse de date mai rapide.

Transferul de fișiere în rețea

File Transfer Protocol (FTP) este un protocol de rețea standard utilizat pentru a transfera fișiere de la o gazdă la o altă gazdă printr-o rețea bazată pe TCP, cum ar fi Internetul. Acesta este adesea folosit pentru a încărca pagini web și alte documente de la o mașină de dezvoltare pe un server de web-hosting. FTP este construit pe o arhitectura client-server și folosește un control separat și conexiuni de date între client și server. Utilizatorii FTP se pot autentifica folosind un clear-text sign-in protocol, în mod normal în forma unui nume de utilizator și o parolă, dar se poate conecta anonim, dacă serverul este configurat pentru a permite acest lucru. Primele aplicații client FTP au fost instrumente de linie de comandă interactive, implementând comenzile standard și sintaxă. Interfețe grafice au fost dezvoltate pentru multe dintre sistemele de operare desktop în uz astăzi, inclusiv programe generale de web design, cum ar fi Microsoft Expression Web, FTP și clienții specializați, cum ar fi CuteFTP .

O aplicație FTP free este FileZilla, o aplicație software multiplatformă ce constă din FileZilla Client și FileZilla Server. FileZilla suportă FTP, SFTP și FTPS. La ora actuală, Clientul FileZilla este al 7-lea cel mai popular download din toate timpurile de pe SourceForge.net .

Figura 1-4. Aplicația FileZilla

Serviciul World Wide Web (WWW)

World Wide Web (abreviat WWW sau W3, cunoscut sub numele de Web, sau ”Autostrada Informațională”), este un sistem de documente hipertext interconectate, accesate prin intermediul internetului. Cu un browser web, se pot vizualiza paginile web care pot conține text, imagini, video, multimedia și altele, și se poate naviga între ele prin intermediul hyperlink-urilor.

Folosind concepte din sistemele sale hypertext anterioare, inginerul și omul de știință în calculatoare ,Tim Berners-Lee, în prezent director al World Wide Web Consortium (W3C), a scris o propunere de creare a unei colecții de documente [11], în martie 1989 pentru ceea ce avea să devină în cele din urmă World Wide Web. La CERN, o organizatie de cercetare europeana de lângă Geneva, situată pe teritoriul elvețian și francez, Berners-Lee și omul de știință belgian Robert Cailliau, au propus în 1990 utilizarea hipertextului ”… pentru a lega și a accesa informații de diferite tipuri, ca o rețea de noduri, în care utilizatorul poate naviga în voie ”, și au introdus public proiectul în decembrie.

Standardele web sunt termeni generali pentru tehnici specifice și cele standard care definesc și descriu aspecte ale World Wide Web.

La baza funcționării webului stau 3 tipuri de standarde:

(HTTP) – Hypertext Transfer Protocol – stiva de protocoale OSI prin care serverul web și browserul comunică între ele;

(HTML) – Hypertext Markup Language, este un standard de definire și prezentare a paginilor web;

(URI) – Uniform Resource Identifier, este folosit pentru a identifica și regăsi paginile web, fiind un sistem universal de identificare a resurselor din web.

Mai târziu s-au mai dezvoltat și alte standarde, cum sunt: JavaScript, CSS – Cascading Style Sheet, HTTPS – Hypertext Transfer Protocol Secure.

Capitolul 2. Noțiuni de WebDesign și HTML

Apariția și evoluția limbajului HTML

De-a lungul anilor 1991-1993 a aparut și s-a dezvoltat www – World Wide Web. Paginile de text puteau fi vizualizate folosind un browser simple-line. În 1993, Marc Andreessen și Bina Eric, au creat primul browser grafic utilizat pe scară largă, denumit Mosaic. La acel moment dat existau mai multe browsere, majoritatea dintre ele bazate pe UNIX și destul de complicate. Nu exista nici o abordare integrată a elementelor de design grafic, cum ar fi imaginile sau sunetele. Browser-ul Mosaic a spart gheața.

W3C a fost creat în octombrie 1994, pentru a ”conduce World Wide Web la întregul său potențial” prin dezvoltarea de protocoale comune care promovează evolutia și asigură interoperabilitatea. Acest lucru a descurajat orice companie ce încerca monopolizarea unui browser proprietar și limbaj de programare, care ar fi putut modifica efectul de World Wide Web ca întreg. În 1994, Andreessen a format Mosaic Communications Corp. Aceasta a devenit mai târziu cunoscut sub numele de Netscape Communications sau Netscape 0.9 browser. Netscape a creat propriile sale de tag-uri HTML, fără sa respecte standardele tradiționale. De exemplu, Netscape 1.1 a inclus tag-uri pentru a schimba culorile de fundal și formatarea textului cu tabelele de pe paginile web. De-a lungul anilor au început ”războaiele„ dintre browsere. Învingatoare sunt de cele mai multe ori Netscape și Microsoft. În acest timp s-au dezvoltat numeroase tehnologii noi în domeniu, în special Cascading Style Sheets, JavaScript, și HTML dinamic. Per ansamblu razboiul browserelor a dus la multe creații pozitive și a ajutat la design-ul să evolueze într-un ritm rapid.

Evoluția webdesignului

Apariția primului primul browser competitiv, complet, cu caracteristici proprii și tag-uri, a avut loc în 1996 lansat de către Microsoft. Acesta a fost, de asemenea, primul browser care sprijinea style-sheets (la momentul acela văzute ca o tehnică obscură). CSS a fost introdus în decembrie 1996 de către W3C pentru a îmbunătăți accesul la internet și pentru a face codul HTML semantic. Layouturile bazate pe tabele au devenit foarte populare pentru că au dat designerilor web mai multe opțiuni pentru crearea de site-uri web.

HTML markup pentru tabele a fost folosit inițial pentru afișarea de date tabelare. Cu toate acestea designerii și-au dat seama repede de potențialul de elemente structurale pe care le-ar putea adăuga la proiectele lor. Au creat în curând layouturi mai complicate, pe mai multe coloane decât era HTML capabil să o facă.

Designul și estetica păreau să prevaleze asupra structurii elementelor markup. Această perioadă a devenit foarte populară pentru controlul dimensiunile layoutului web. Site-urile HTML au fost limitate în opțiunile lor de proiectare. Pentru a crea modele complexe, mulți designeri web au trebuit să folosească structuri complicate de masă sau chiar imagini goale pentru spațiere. Cu toate acestea, în 1996 a fost dezvoltat Flash (inițial cunoscut sub numele de FutureSplash). Acesta permitea designerilor web să pătrundă dincolo de punctul HTML. Între timp Flash-ul Professional s-a dezvoltat și este acum Adobe Animate CC. În [12] se spune că începând cu 1 Septembrie 2015, Google Chrome și Mozilla Firefox au blocat animațiile sau conținutul Adobe Flash afișat în browser. Ad-urile sau video-urile realizate cu ajutorul acestei platforme, nu mai au funcția de auto-play, iar utilizatorii sunt nevoiți să dea click pe ele dacă vor să le vadă. Întreaga piață începe să migreze forțat către HTML5.

Care sunt motivele?

animațiile create în Flash consumau foarte multe resurse ale procesorului și îngreunau astfel funcționarea calculatorului;

nivelul defectuos de securitate al Flash-ului (în Iulie 2015, hackerii au targetat rețeaua de advertising a Yahoo! exploatând o vulnerabilitate dintr-o versiune mai veche de Flash Player.)

animațiile Flash aveau performanțe slabe pe dispozitivele mobile, producatorii de sisteme de operare pentru mobile începând să încurajeze masiv dezvoltarea de aplicații într-un nou format – HTML5.

Astfel, în anul 2011, Adobe a anunțat oficial că renunță la dezvoltarea versiunii Flash pentru mobil. Patru ani mai târziu, HTML 5 intră în scenă puternic și pe device-urile non-mobile.

Instrumente și tehnologii

Web designerii folosesc o varietate de instrumente diferite, în funcție de ce parte a procesului de producție sunt implicați. Aceste instrumente sunt actualizate de-a lungul timpului, de standardele mai noi de software, dar principiile din spatele lor rămân aceleași. Grafic designerii web folosesc pachete vectoriale pentru crearea de imagini pentru web sau prototipuri de design.

Tehnologiile utilizate pentru crearea de website-uri includ mark-up standardizat, care poate fi codificat sau generat de software de editare (WYSIWYG – „what you see is what you get”). Există, de asemenea, software bazat pe plug-in-uri, care ocolește versiunea browserului clientului, acestea sunt de multe ori de tip WYSIWYG, dar cu posibilitatea de a utiliza limbajul de scripting al software-ului. Pentru a verifica clasamente care sugerează îmbunătățiri ce pot fi aduse website-ului, pot fi folosite instrumente de optimizare pentru motoarele de căutare.

Alte instrumente de webdesign includ mark-up de validare și alte instrumente de testare a uzabilitatii și accesibilitatii site-urilor lor.

Tendințe în Web Design

Pentru anul în curs se pot urmări câteva tendințe în deplină desfășurare . Simplificarea navigării pentru dispozitivele mobile își croiește drum și în variantele desktop, fiind utilizată în unele site-uri pentru meniul principal, iar in altele pentru un meniu de navigare secundar. Această tendință câștigă teren mai ales pentru site-urile de tip magazin cu multă informație, care trebuie să țină cont de optimizarea spațiului pentru navigare.

O altă tendință este prezentarea animațiilor la încărcarea paginilor web, folosite cu precădere în anii ăn care animațiile flash erau prezente în majoritatea site-urilor web. Acest lucru își poate găsi explicația în faptul că dimensiunea paginilor web se mărește de la an la an. Conform articolului publicat de Adobe [13], paginile web au migrat de la dimensiuni medii de 700 Kb în 2010 până la 2200 Kb în 2015.

O altă tendință este folosirea temelor multi-layout. Un foarte mare număr de teme WordPress oferă posibilitatea alegerii între mai multe layout-uri personalizate pentru zone specifice de business.

Alte tendințe ar mai fi:

Iluzia mișcării 3D – efectul Parallax,

Tehnica de Blurare – Blur-up,

Utilizarea de videoclipuri ca și fundaluri, pentru slide-urile de imagini în homepage,

Organizarea layouturilor în carduri – Cards Layout.

Elemente constitutive ale limbajului HTML

Taguri de bază

Orice document HTML începe cu notația <html> și se termină cu notația </html>. Acestea se numesc taguri. Prin convenție, toate informațiile HTML încep cu o paranteză unghiulară deschisă “<” și se termină cu o paranteză unghiulară închisă “>”. Scrise între aceste paranteze , tag-urile transmit comenzi către browser pentru a afișa pagina într-un anumit mod. Unele blocuri prezintă delimitator de sfârșit de bloc, în timp ce pentru alte blocuri acest delimitator este opțional sau chiar interzis.

Între cele două marcaje de început de document HTML, se pot introduce două secțiuni importante ale unei pagini web: secțiunea de antet <head>…</head> și corpul documentului <body>…</body>. Blocul <body>…</body> cuprinde conținutul propriu-zis al paginii HTML, adică ceea ce va fi afișat în ferastra browser-ului.

Titlul unei pagini

În secțiunea <head>…</head> se poate introduce un titlu pentru fiecare pagină a site-ului web. Titlu se introduce între tagurile <title>…</title>.

Exemplu: <title>Mobilier de grădină Hillerstorp</title>

Conținutul blocului de titlu va apărea în bara de titlu a ferestrei browser-ului. Dacă acest bloc lipsește într-o pagină HTML, atunci în bara de titlu a ferestrei browser-ului va apărea numele fișierului (de ex. index.html).

Blocuri preformatate și blocuri de text

Penru ca browser-ul să interpreteze corect caracterele “spațiu”, “tab” ce apar în cadrul unui text, textul trebuie inclus într-un bloc <pre>…</pre>.

Pentru ca un bloc de text să fie indentat (marginea din stânga a textului să fie deplasată la dreapta la o anumită distanță față de marginea paginii), acesta trebuie inclus între etichetele <blockquote>…</blockquote>.

Cu ajutorul etichetei paragraf <p> este posibilă trecerea la o linie nouă și permite:

inserarea unui spatiu suplimentar înainte de blocul paragraf ;

inserarea unui spațiu suplimentar după blocul paragraf, dacă se folosește delimitatorul </p> (acesta fiind opțional) ;

alinierea textului cu ajutorul atributului align, având valorile posibile “left”, ”center” sau “right”.

Într-un text titlurile (headers) de capitole pot fi introduse cu ajutorul etichetelor <h1>, <2>, <h3>, <h4>, <h5>, <h6>. Toate aceste etichete se referă la un bloc de text și trebuie însoțite de o etichetă de încheiere similară. Aceste etichete acceptă atributul align pentru alinierea titlului blocului de text la stânga (în mod prestabilit), în centru și la dreapta. Tag-ul <h1> permite scrierea unui titlu cu caractere mai mari și aldine, pe când <h6> folosește caracterele cele mai mici.

Modalitatea cea mai eficientă de delimitare și de formatare a unui bloc de text este folosirea delimitatorilor <div>…</div>. Un parametru foarte util pentru stabilirea caracteristicilor unui bloc <div> (diviziune este align (aliniere). Valorile posibile ale acestui parametru sunt : “left” (aliniere la stanga); “center” (aliniere centrala); “right” (aliniere la dreapta).

Culoarea de fundal și culoarea textului

O culoare pote fi precizată în două moduri: printr-un nume de culoare (sunt disponibile cel puțin 16 numere de culori: aqua, black, fuchsia, gray, green lime, maroon, navy, olive, purple, red, silver, teal, white si yellow) și prin constucția “#rrggbb” unde r (red), g(green), sau b(blue) sunt cifre hexazecimale și pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f , F (se pot defini astfel 65536 de culori).

Culoarea de fundal a unei pagini web se precizează prin intermediul unui atribut al etichetei <body>, eticheta bgcolor.

Culoarea textului se poate alege prin intermediul atributului text al etichetei <body> după sintaxa <body text=culoare>.

Etichete

O etichetă poate avea mai multe atribute.

<body bgcolor=blue text=yellow>Fond de culoare albastra si text de culoare galbena.

Textul afișat este caracterizat de următoarele atribute: mărime (size), culoare (color), font (style).

unde : numar – poate fi 1, 2, 3, 4, 5, 6 sau 7; ( 1 pentru fontul cel mai mic si 7 pentru cel mai mare );

culoare – este o culoare precizata prin nume sau printr-o constructie RGB;

font – poate fi un font generic ca “serif”, “san serif”, ”cursive”, “monospace”, “fantasy” sau un font specific instalat pe calculatorul clientului, ca “Times New Roman”, “Helvetica” sau “Arial”. Se acceptă ca valoare și o listă de fonturi separate prin virgule, de exemplu: “Times New Roman, serif, monospace”.

Stiluri pentru blocurile de text

Pentru ca un bloc de text să apară evidențiat în pagină (cu caractere aldine), trebuie inclus între delimitatorii <b>…</b> ( b vine de la “bold” = indraznet ). Pentru ca un text să fie scris cu caractere mai mari cu o unitate decât cele curente, acesta trebuie inclus într-un bloc delimitat de etichetele <big>…</big>. Pentru ca un text să fie scris cu caractere mai mici cu o unitate decât cele curente, acesta trebuie inclus într-un bloc delimitat de etichetele <small>…</small>. Pentru ca un text să fie scris cu caractere cursive, acesta trebuie inclus într-un bloc delimitat de etichetele <i>…</i> ( i vine de la “italic” ). Pentru a insera secvențe de text aliniate ca indice (sub-script) sau ca exponent (super-script), aceste fragmente trebuie delimitate de etichetele <sub>…</sub>, respectiv <sup>…</sup>. Pentru a insera un bloc de caractere subliniate se utilizează etichetele <u>…</u> ( u vine de la “underline” ). Pentru a insera un bloc de caractere subliniate se utilizează etichetele <strike>…</strike> sau <s>…</s>.

Într-o pagină Web pot fi inserate linii orizontale. Acest lucru se face cu ajutorul etichetei <hr>.

Imagini

O imagine se inserează într-o pagină web, utilizând tag-ul <img>, care poate avea anumite atribute. Alinierea unei imagini se poate face prin intermediul atributului align, cu următoarele valori : “left” – aliniere la stânga; celelalte componente sunt dispuse pe partea dreaptă; “right” – aliniere la dreapta; celelalte componente sunt dispuse pe partea stângă; “top” – aliniere deasupra; partea de sus a imaginii se aliniază cu partea de sus a textului ce precede imaginea; “middle” – aliniere la mijloc; mijlocul imaginii se aliniază cu linia de bază a textului ce precede imaginea; “bottom” – aliniere la bază; partea de jos a imaginii se aliniază cu linia de bază a textului.

Figura 2-1. Utilizarea tag-ului <img> cu diverse atribute

O imagine poate fi utilizată și pentru a stabili fondul unei pagini Web. În acest scop se folosește atributul background al etichetei< body>, având ca valoare adresa URL a imaginii. Imaginea se multiplică pe orizontală și verticală până umple întregul ecran.

O legatură (link) introduce în pagina Web o zonă activă. Efectuînd click cu butonul mouse-ului pe această zonă, în browser se va încărca o altă pagină.

Capitolul 3. Noțiuni teoretice de CSS și JavaScript

Stilurile pun la dispoziția creatorilor de website-uri noi posibilități de personalizare a paginilor Web. Un stil reprezintă un mod de a scrie un bloc de text (adică anumite valori pentru font, mărime, aliniere, distanțe față margini etc.).

Pentru a defini un stil, există două modalități:

Sintaxa CSS (Cascading Style Sheets);

Sintaxa JavaScript.

CSS

CSS constituie un instrument avansat de formatare pentru marcajele HTML, în vederea realizării unor pagini Web profesionale. Foile de stiluri HTML sunt asemănătoare cu stilurile de formatare a unui document Word și folosesc o serie de atribute pentru definirea fonturilor, culorilor, alinieri, etc.

Legăturile dintre HTML și CSS se realizează cu ajutorul elementului Style.

Sintaxa CSS este structurată pe trei nivele:

ca proprietăți ale etichetelor din documentul HTML, tip inline;

informația introdusă în blocul HEAD, tip embedded;

comenzi aflate în pagini separate, tip externe.

Cel mai practic și utilizat mod este folosirea unui fișier extern sau nivel 3 care să conșină comenzi CSS, deoarece poate fi utilizat în mai multe situații (mai multe fișiere HTML pot folosi același fișier extern CSS), eliminand timpul necesar introducerii codului corespunzator în fiecare pagină și totodată editarea lor într-un singur loc pentru mai multe fișiere.

3.1.1 Stiluri in-line

Stilurile in-line sunt definite chiar în eticheta ce inițiază blocul în care dorim să se aplice aceste stiluri. Pentru aceasta se utilizeaza atributul universal “style” (comun practic tuturor etichetelor ce apar într-un document HTML). Valoarea dată atributului “style” este tocmai descrierea stilului, cuprinsă, nu între acolade {…}, ci între ghilimele “…”.

Dacă dorim un anumit style pentru un fragment de text, atunci includem acest text într-un bloc cu ajutorul delimitatorilor <span>…</span>, după care utilizăm atributul “style” pentru eticheta <span>.

Figura 3-1. Utilizarea atributului Style

3.1.2 Stiluri de tip embedded

Pentru a defini un stil în blocul head, se introduc noțiunile de bloc de specificații, selector și regulă. Un bloc de declarații sau specificații este o listă de specificații separate prin ” ; ” și cuprinde între acolade, „{…}”, de exemplu:

{

font-size:20pt;

color:red;

font-style:italic;

}

Un asemenea stil se poate aplica unui singur element sau asupra mai multor elemente, de ex:

P, H2, DIV {

color:blue;

background:orange;

}

Un atribut al elementului style este type care definește sintaxa foii de stil, utilizată la definirea declarațiilor. Acest atribut are valoarea prestabilită „text/css”. Css semnifică foi de stil în cascadă, iar text specifică faptul că declarațiile în foaia de stil sunt de tip text-singura valoare posibilă.

Foile de stil se pot introduce într-un document HTML astfel:

Figura 3-2. Stil de tip embedded

3.1.3 Stiluri definite în fișiere externe

Stilurile definite în interiorul unui bloc <style>…</style> pot fi transferate într-un fișier extern existând astfel posibilitatea utilizării lor în mai multe fișiere HTML. Pentru a utiliza un stil definit într-un fișier extern, se procedează astfel:

se creează un fișier care să conțină numai descrierea stilurilor și se salvează cu extensia .css sau .html. Conținutul acestui fișier coincide cu conținutul unui bloc <style>…</style>, fără ca acești delimitatori să fie incluși.

în fișierul HTML care utilizează stilurile definite în fișierul creat la punctul 1, se include în blocul <head>…</head> o etichetă <link> care poate avea trei atribute: rel cu valoarea “stylesheet”; href avand ca valoare adresa URL a fisierului creeat la punctul 1; type cu valoarea “text/css”.

În exemplul anterior înlocuim partea style din <head> cu tag-ul <link> plasat tot în antet, iar foaia de stil va fi copiată într-un document Notepad pe care îl vom salva apoi cu extensia ex.css.

Codul fișierului ex.css este:

Figura 3-3. Codul fișierului ex.css

Codul fișierului HTML care va folosi acest .css va fi:

Figura 3-4. Fișierul HTML care utilizează stilurile declarate în ex.css

În CSS mai sunt alte proprietăți pentru:

padding – spațiul dintre conținut și bordură

border: {border-top-style:dotted; border-left-color:blue}

margin – sunt 5 proprietăți (left, right, top, bottom, margin-combinație)

{ margin-top:0.01in;

margin-right:20%;

margin-bottom:15pt;

color:brown;

}

casete

color (nume de culoare, cod RGB în hexazecimal – #0000FF, cod RGB în zecimal – RGB(0,0,220), transparent-culoare prestabilită)

background-color (culoare de fundal)

{background-color:red}

background-image (imagine de fundal)

body {

background-color:green;

background-image:URL(poza.jpg)

}

background-attachment (permite ca imaginea să se deruleze sau nu odată cu pagina)

div {background-attachment:fixed; width:300px; height:200px}

Figura 3-5. Porțiune de cod css din cadrul site-ului

JavaScript

JavaScript a fost conceput pentru a adăuga interactivitate paginilor HTML. Este un limbaj de scripting – limbaj de programare ușoară și este de obicei încorporat direct în pagini HTML. Este folosit pentru introducerea unor funcționalități în paginile web, codul Javascript prezent în aceste pagini, fiind rulat de către browser. Limbajul JS este binecunoscut pentru utilizarea sa în construirea site-urilor web, dar el mai este folosit și pentru acesul la obiecte încastrate (embedded objects) în alte aplicații. A fost dezvoltat inițial de către Brendan Eich, programator american de la Netscape Communications Corporation, sub numele de Mocha, apoi LiveScript, și denumit în final JavaScript.

JavaScript (JS) este un limbaj de programare orientat obiect bazat pe conceptul prototipurilor [9]. Un obiect este o instanță a unei clase. De exemplu dacă considerăm clasa VEHICUL iar trenul, mașina, avionul, etc. sunt instanțe ale acestei clase. Un obiect este o reprezentare a unei entități din lumea reală sau conceptuală. Un obiect are 3 caracteristici: stare, comportament și identitate.

Starea unui obiect reprezintă totalitatea datelor ce conțin informații referitoare la acesta. Fiecare obiect are un anumăr de proprietăți, numite și atribute, care au o valoare. Starea unui obiect conține structura esențială a obiectului:atributele și valorile sale. Starea obiectului se poate modifica în timp. (de ex. Obiectul curs opțional se poate afla în stările Predat sau Anulat, în funcție de numărul de studenți care a optat pentru acel curs).

Comportamentul unui obiect se referă la modul în care un obiect reacționeză (își schimbă starea) la mesajele primite, precum și la modul cum acționează (trimite mesaje altor obiecte).

Identitatea unui obiect este proprietatea prin care obiectul se distinge la oricare alt obiect. Schimbarea stării unui obiect nu influențează identitatea sa. Identitatea face ca un anumit obiect să fie unic.

În ciuda numelui și a unor similarități în sintaxă, între JavaScript și limbajul Java nu există nicio legătură. Ca și Java, JavaScript are o sintaxă apropiată de cea a limbajului C, dar are mai multe în comun cu limbajul Self decât cu Java .

Cu ajutorul limbajului JavaScript, programatorii web pot îngloba în paginile HTML script-uri pentru diverse activități: verificarea datelor introduse de utilizatori sau crearea de meniuri și alte efecte animate.

Browserele rețin în memorie o reprezentare a unei pagini web sub forma unui arbore de obiecte și pun la dispoziție aceste obiecte script-urilor JavaScript, care le pot citi și manipula. Arborele de obiecte poartă numele de Document Object Model sau DOM.

Programele JavaScript, numite și scripturi, sunt secvențe de program ce se scriu în blocul <Script> … </Script> ale unei pagini Web sau în fișiere externe cu terminația .js.

Figura 3-6. Fișierele CSS și JavaScript ale site-ului

Figura 3-7. Porțiune de cod javascript din cadrul site-ului

Capitolul 4. WebSite-ul Mobilier de grădină

Scurtă prezentare a site-ului

Site-ul – Mobilier de grădină Hillerstorp, este un website de prezentare al unei firme ce comercializează ca obiect principal de comerț – mobilier de grădină import Suedia. Fiind un site de prezentare, la realizarea lui s-a pus accent pe partea de grafică. Pentru o prezentare succintă a principalelor produse ale firmei, a fost utilizată o platformă de dezvoltare javascript j-query.

Ca și elemente de layout, s-au folosit lățimea de 960 pixeli, măsură fixă, cu conținut distribuit în două coloane. Inițial, vizitatorul avea posibilitatea să aleagă culoarea cu care dorește să navigheze, precum și limba în care este afișat conținutul. În stânga sus, în cel mai vizibil loc din pagină, este afișat logo-ul companiei. În dreapta, logo-ul companiei furnizoare. Sub acestea, este bara de navigație. La momentul actual site-ul a mai fost modificat și nu mai arată exact ca la început. A fost modificată bara cu logoul, care acum arată ca în Figura 4-2.

Figura 4-1. Prima pagină a site-ului

În prezent partea aceasta a fost actualizată prin modificarea logo-ului și adăugarea unui modul de căutare în site și plasarea coșului de cumpărături în partea de sus dreapta.

Figura 4-2. Logo-ul firmei și logo-ul companiei furnizoare

Sub partea cu logo-uri este afișat meniul cu posibilitatea de descărcare a catalogului online de produse.

Figura 4-3. Bara de meniuri

Sub conținut, se află datele de contact, link-uri către Informații, Serviciu clienți și Afisarea Contului personal de utilizator.

Figura 4-4. Date informale despre firmă și alte opțiuni

Tehnologii folosite

4.2.1 J-Query

jQuery este o bibliotecă JavaScript cross-browser, concepută pentru a simplifica scriptingul client-side din HTML. Acesta a fost lansat în ianuarie 2006, la New York BarCamp de John Resig.

jQuery este una din cele mai populare biblioteci JavaScript, folosită de peste 70,3% dintre cele mai vizitate site-uri, conform .

Figura 4-5. Diagrama utilizării jQuery

jQuery este un software gratuit, open source, licențiat dual MIT și GNU General Public License, versiunea 2. Sintaxa jQuery este proiectată pentru a ușura navigația într-un document, pentru a crea animații și de a dezvolta aplicații Ajax. jQuery furnizează capabilități pentru dezvoltatori de a crea plug-in-uri de nivel înalt (complet customizabile) precum și animații. Abordarea modulară a bibliotecii jQuery permite crearea de pagini web dinamice și aplicații web moderne. Realizarea prezentării (animației) de pe prima pagină a fost mult ușurată prin folosirea acestui script.

Cu HTML5 la orizont jQuery va continua să fie un instrument util pentru dezvoltatorii web care doresc să economisească timp de codificare și să sporească gradul de utilizabilitate a site-ului lor.

În Figura 4-6 se poate vedea evoluția versiunilor de jQuery din 2006 până în prezent, prezentată în [15].

Figura 4-6. Istoria versiunilor de jQuery

4.2.2 Lightbox

Lightbox este o bibliotecă JavaScript care afișează imagini și clipuri video prin umplerea ecranului, iar restul paginii web are o intensitate mai redusă. Biblioteca originală JavaScript a fost scrisă de către Bhuvan Dhakar din San Francisco. Termenul Lightbox se poate referi și la alte biblioteci similare JavaScript, iar tehnica a câștigat popularitate pe scară largă, datorită stilului său simplu și elegant.

Figura 4-7. Efect Lightbox

Lightbox este un script Java folosit pentru a afișa imagini mari folosind dialogurile modale. Efectul a câștigat popularitate din cauza stilului simplu, elegant și ușor de pus în aplicare. Unele dintre primele implementări folosesc biblioteci. Aparitia Lightbox a încurajat alți dezvoltatori să lucreze la proiecte similare, drept urmare rezultând și alte produse cum ar fi: Colorbox, Magnific Popup, Thickbox sau Slimbox [16].

Figura 4-8. Fereastră deschisă cu Lightbox

Pe o pagină cu Lightbox, un utilizator poate face clic pe o imagine pentru ca apoi să fie transferat într-o fereastră Lightbox (o fereastră umbrită, în care în prim plan apare doar imaginea pe care s-a dat click). Fereastra se redimensionează în funcție de dimensiunile imaginii folosind o animație. Lightbox determină care imagini vor fi afișate în fereastra de dialog prin intermediul unui atribut XHTML.

Figura 4-9. Formatare fereastră Lightbox

Lightbox oferă, de asemenea, o modalitate de a atașa explicații la imagini și pentru a rula o expunere de diapozitive, în care se poate naviga cu butoanele de navigație.

Lightbox permite utilizatorilor să vizualizeze versiuni mai mari de imagini fără a părăsi pagina curentă, și este, de asemenea, capabil să afișeze slideshow-uri simple.

Utilizarea unui fundal întunecat, care estompează pagina peste care imaginea a fost încărcată, servește de asemenea pentru dezactivarea navigației în pagină.

În timp ce Lightbox depinde de compatibilitatea browserului cu un alt JavaScript, numit Prototype JavaScript Framework, Lightbox este declanșat printr-un link tag standard. Astfel, browserele care nu acceptă JavaScript încarca pur și simplu imaginea ca un fișier separat, pierd efectul Lightbox, dar păstrează în continuare capacitatea de a afișa imaginea la dimensiuni complete. S-a remarcat faptul că există o lipsă de compatibilitate în întreaga gamă de browsere Internet Explorer, dar aceste probleme pot fi evitate prin folosirea corectă a scriptului.

Concret, acest script – Lightbox – a fost folosit la realizarea paginii de Galerie imagini, Expoziții și Portofoliu clienți. Imaginile au fost dispuse sub forma de grilă, cu un efect de hover (cand mouse-ul trece peste imagine, rama își schimbă culoarea). Fereastra LightBox ce se deschide are toate elementele de navigație pentru parcurgerea galeriei.

Figura 4-10. Vizualizare galerie de produse

De asemenea, navigarea conține și un buton de parcurgere automată a galeriei (tip prezentare diapozitive).

Figura 4-11. Parcurgere automată a galeriei

În realizarea acestui website s-a pus accest pe culori deschise și calde, pe spații albe și, așa cum spune și motto-ul companiei, pe Libertatea de a ALEGE.

Descrierea site-ului

Logo

Pornind de la Logo-ul prezentat în Figura 4-2 s-a ajuns în prezent la cel din figura:

Figura 4-12. Logo-ul site-ului

Prima pagină

În pagina home sunt încărcate câteva poze și animații reprezentative care sunt linkuri către paginile cu descrierea amănunțită a fiecărei imagini. Acest lucru a fost descris și în subcapitolul 2.4 Tendințe în Web Design.

Figura 4-13. Pagina Home

Contact

În pagina de contact se pot vedea informații generale despre locația firmei. Există și un formular de contact unde utilizatorii pot trimite diferite sesizări, plângeri sau diverse impresii.

Figura 4-14. Pagina Contact

Autentificare și Înregistrare

În partea dreapta sus putem vedea un mesaj de bun venit pe site, precum și două butoane de Autentificare și Înregistrare.

În partea de .Autentificare. avem următoarele opțiuni:

pentru un client nou sunteți direcționat prin butonul Continuare către pagina de Înregistrare.

pentru un client existent se acordă posibilitatea de autentificare prin adresa de email și parola aleasă. În partea dreaptă se pot distinge o serie de opțiuni care arată informații despre contul curent: posibilitatea returnării parolei uitate, istoric comenzi, istoric descărcări, tranzacții, plăși efectuate, abonamente.

Figura 4-15. Pagina de autentificare cont utilizator

În partea de .Înregistrare cont. avem următoarele opțiuni:

detalii personale,

adresa,

parola,

abonament newsletter.

Figura 4-16. Detalii personale

Figura 4-17. Adresa utilizatorului pentru crearea contului

Pentru țară și județ au fost utilizate două ListBox de unde se oferă posibilitatea alegerii mai multor opțiuni.

Figura 4-18. ListBox în Formularul de înregistrare

Figura 4-19. Parola de acees la cont

Figura 4-20. Posibilitatea realizării unui abonament la Newsletter

După completarea tuturor câmpurilor se alege butonul Continuă, după care suntem direcționați către o pagină de confirmare cont nou.

Figura 4-21. Confirmare cont nou creat

După continuare se acordă noului client posibilitatea vizualizarii sau modificării informațiilor introduse.

Figura 4-22. Vizualizarea sau modificarea informațiilor introduse

Catalog

În pagina Catalog, se pot vedea produsele de prezentare care sunt disponibile spre vânzare.

Figura 4-23. Pagina Catalog

Produsele sunt afișate pagină cu pagină, așezate frumos ca într-o revistă, având posibilitatea măririi sau micșorării paginilor, răsfoire pagină cu pagină, salt la ultima pagină sau salt la prima pagină.

Acest lucru a fost realizat cu ajutorul unui obiect macromedia.

Figura 4-24. Cod Obiect macromedia – catalog

Crearea unui newsletter se poate vedea la adresa .

Figura 4-25. Vizualizare Newsletter

În partea de jos a catalogului sunt câteva opțiuni: Semne de carte, printare, share, zoom, Activează modul Fullscreen.

Figura 4-26. Opțiunea de Print din pagina Catalog

Pe linia cu meniuri sunt prezentate mai multe pagini. Meniul prezintă efecte create cu ajutorul CSS și JS, care afișează la punerea mous-ului peste titlul paginii, câteva obiecte din pagina respectivă.

Figura 4-27. Afișare obiecte de mobilier – Dinning

Pagina Dinning va afișa toate obiectele de mobilier reprezentative, în funcție de categorie: Lemn de pin, Rattan sintetic, Structură metalică (vezi Figura 4-28). După afișarea acestor categorii sunt afișate toate produsele într-un tabel, cu posibilitatea sortării pe pagină.

Figura 4-28. Pagina Dinning

Figura 4-29. Sortare produse Dinning

Pagina Lounge

Această pagină conține produse de mobilier pentru locuri de odihnă (salon). În Figura 4-31 se pot vedea produsele din această pagină sortate crescător după preț.

Figura 4-30. Pagina Lounge

Figura 4-31. Sortare în funcție de preț a produselor de salon

Site-ul mai conține produse destinate servirii cafelei, produse de relaxare – 5 categorii: balansoare, bănci, rullsofa, șezlonguri și sofa, ofering 6 game de culori:argintiu, alb, miere, mahon , negru, gri.

În pagina Diverse sunt prezentate produse de picnic, produse de protecție solară.

Figura 4-32. Produs din gama de protecție solară

Coșul de cumpărături

Posibilitatea cumpărării prin coșul de cumpărături este în lucru. Momentan produsele se poat comanda telefonic. Alegând opțiunea întreabă din fereastra cu descrierea datelor depre produsul selectat, se deschide un pop-up care afișează numerele de telefon la care se poate face comanda.

Figura 4-33. Comanda prin telefon

Concluzii și dezvoltări ulterioare posibile

Acest site este un site de prezentare pentru produse de mobilier de grădină importate din Suedia, oferind o calitate deosebită a produselor. Site-ul cuprinde o gamă variată de mobilier, precum și diverse obiecte de protecție solară. Imaginile cu produse sunt de o calitate deosebită prezentate în mod dinamic prin animații. Culorile alese sunt culori specifice naturii și lemnului.

Site-ul conține obază de date bine pusă la punct, care poate fi modificată în orice moment. Se pot adăuga mai multe categorii de produse, mai multe culori și mai multe opțiuni în bara de meniuri, dacă este cazul.

Magazinele online cu produse de mobilier sunt tot mai căutate deoarece mobilarea unei terase sau grădini înseamnă zile întregi de căutare prin magazine pentru a vedea toate opțiunile, culoarea care se potrivește, mărimea, modelul, mai ales că este vorba de o achiziție importantă. Achiziționând mobilierul dorit prin intermediul unui magazin online, clientul va economisi mult timp și efort. Numărul clienților este dat de calitatea produselor, de serviciile oferite, dar și de investiția în optimizarea magazinului online.

Prin intermediul unui magazin online se pot vedea de acasă sute de produse și se pot compara prețuri, fără a fii îngrădit de un program anume de funcționare. Totul a fost simplificat astfel încât clienții să își poată alege cel mai potrivit produs pentru ei, iar în câteva zile să se poată bucura de produs acasă.

Pentru ca site-ul să fie cât mai ușor de găsit, trebuie să fie optimizat pentru motoarele de căutare, deoarece de optimizare depinde poziționarea site-ului în căutările online. Cu cât optimizarea este mai bine făcută, cu atât site-ul va fi mai sus în clasificarea site-urilor cu aceeași temă, va fi mai vizibil și mai accesat de clienți. Cu alte cuvinte, această optimizare a unui site, este de fapt modalitatea prin care magazinul se face cunoscut publicului online, un aspect extrem de important în orice afacere.

În concluzie, se poate spune că site-ul este ușor de parcurs, produsele sunt afișate la vedere, se ajunge ușor la informațiile despre fiecare produs în parte, doar mai trebuie dezvoltată partea de comandă a produselor prin folosirea unui coș de cumpărături.

Bibliografie

Anexa 1

Părți din Codul aplicației

Fișier Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>IdealGarden – Acasa</title>

$(document).ready(function() {

//Execute the slideShow, set 4 seconds for each images

slideShow(4000);

});

function slideShow(speed) {

//append a LI item to the UL list for displaying caption

$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0

$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)

$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it

$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));

$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption

$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow

var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over

$('ul.slideshow').hover(

function () {

clearInterval(timer);

},

function () {

timer = setInterval('gallery()',speed);

}

);

}

function gallery() {

//if no IMGs have the show class, grab the first image

var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image

var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption

var title = next.find('img').attr('title');

var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index

next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption

$('#slideshow-caption').slideToggle(300, function () {

$('#slideshow-caption h3').html(title);

$('#slideshow-caption p').html(desc);

$('#slideshow-caption').slideToggle(500);

});

//Hide the current image

current.animate({opacity: 0.0}, 1000).removeClass('show');

}

</script>

<!–

a:link {text-decoration: none;}

a:visited {text-decoration: none;}

a:hover {text-decoration: none;}

a:active {text-decoration: none;}

body {

font-family:arial;

font-size:12px;

}

ul.slideshow {

list-style:none;

width:970px;

height:310px;

overflow:hidden;

position:relative;

margin:0;

padding:0;

}

ul.slideshow li {position:absolute; left:0; right:0; }

ul.slideshow li.show { z-index:500;}

ul img {border:none; }

#slideshow-caption {

width:300px;

height:30px;

position:absolute;

bottom:0;

left:0;

color:#fff;

background:#360;

z-index:500;}

#slideshow-caption .slideshow-caption-container {

padding:5px 10px;

z-index:1000;}

#slideshow-caption h3 {

margin:0;

padding:0;

font-size:14px;}

#slideshow-caption p {

margin:5px 0 0 0;

padding:0;}

–>

</style>

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-29799729-1']);

_gaq.push(['_trackPageview']);

(function() {

var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

})();

</script>

………………..

</head>

<body>

</map>

<br />

</div>

<ul>

<li><a href="green/ro/acasa.html" class="active"><span>Acasa</span></a></li>

<li><a href="green/ro/despre_noi.html"><span>Despre</span></a></li>

<li><a href="green/ro/vanzari.html"><span>Vanzari online</span></a></li>

<li><a href="green/ro/galerie.html"><span>Galerie</span></a></li>

<li><a href="green/ro/portofoliu.html"><span>Portofoliu</span></a></li>

<li><a href="green/ro/contact.html"><span>Contact</span></a></li>

<li><a href="green/ro/expo.html"><span>Expozitii</span></a></li>

<li><a href="noutati.html"><span>Noutati</span></a></li>

</ul>

</div>

</div>

</ul>

</div>

</div>

</div>

</map>

</a>

</ul>

</div>

</div>

<h2>Birou:</h2>

<p><strong>Telefon</strong>: +40.723.808.528 </p>

<p><strong>E-mail:</strong> <a href="mailto:office@idealgarden.ro"><strong>office@idealgarden.ro</strong></a></p>

</div>

</div>

<h2>Vanzari:</h2>

<p><strong>Telefon</strong>: +40.722.876.546 </p>

<p><strong>E-mail:</strong> <a href="mailto:sales@idealgarden.ro"><strong>sales@idealgarden.ro</strong></a><br />

</p>

</div>

</div>

</div>

</div>

</body>

</html>

Fișier Style.css

@charset "utf-8";

body {

width : 100%;

background : #fcf6ee;

background-repeat : repeat;

margin : 0;

padding : 0; }

html { margin : 0; padding : 0; }

li.bg, .bg { clear : both;

border-bottom : 1px dashed #818181;

background : none;

list-style : none;

margin : 10px 0;

padding : 0; }

p.clr, .clr {

clear : both;

margin : 0;

padding : 0; }

.main { margin : 0 auto; padding : 0; }

.header {

background : url(images/header_bbg.gif) top repeat-x #fcf6ee;

margin : 0;

padding : 0; }

.bheader {

background : url(images/header_bbg.gif) top repeat-x #fcf6ee;

margin : 0;

padding : 0; }

.logo {width : 970px; height : 190px; margin : 0; }

h1 {color: #5c5c5c; text-transform: uppercase; letter-spacing: -3px; margin : 0;

padding: 38px 0 36px 32px; }

h1 a, h1 a:hover { color : #228b22; text-decoration : none; }

h1 span { font-weight : 700; color : #8fc400; }

h1 small { color : #556b2f; letter-spacing : normal; }

.menu {

width : 970px;

height : 40px;

float : left;

margin : 0;

padding : 5px;

}

.menu ul {

list-style : none;

border : 0;

float : left;

margin : 0;

padding : 5px;

}

.menu ul li {

float : left;

border : 0;

margin : 0;

padding : 0 12px;

}

…………………………………..

#gallery ul a:hover { color : #3cf; }

a:link { text-decoration : none; }

a:visited { text-decoration : none; }

a:hover { text-decoration : none; }

a:active { text-decoration : none; }

Copyright Notice

© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.

Acest articol: Listă de Figuri 4 [305480] (ID: 305480)

Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.

Listă de Figuri 4 [305480]

Copyright Notice

UNIVERSITTEA „AUREL VLAICU” DIN ARAD FACULTATEA DE ȘTIINȚE ECONOMICE DOMENIUL / PROGRAMUL DE STUDIU MARKETING FORMA DE ÎNVĂȚĂMÂNT: CU FRECVENȚĂ… [302269]

© 2002 by Mois ă Altar. All rights reserved. Short sections of text, not exceeding two paragraphs may be quoted without permission provided that full… [600353]

Personalitatea și intelectul sunt probabil cele mai cercetate domenii stabile și de durată a [620217]

Introducere necesitatea clinică a utilizării tehnicilor de CGH [303018]

DIRECTIVA 200643CE din 17 mai 2006 [626405]

IPTEKS BAGI MASYARAKAT (IbM) [601447]

Copyright Notice

Similar Posts