regăsiţi într-un cont special creat. · să fim conştienţi de existenţa sa şi de rolul său...

2

LECŢIE DEMONSTRATIVĂDESIGN ŞI PROGRAMARE WEB LECŢIE

DEMONSTRATIVĂINTRODUCERE

Vă doriţi să creaţi de la 0 propriul site web? Aţi văzut că se fac angajări în rândul cunoscătorilor de programare web? Acum aveţi o şansă în plus, mulţumită cursului Eurocor Design şi programare Web.

Fie că doriţi să transformaţi o pasiune în profesie, fie că abia acum învăţaţi noţiunile de bază în programare web, acest curs îşi propune să vă înveţe:modalităţile optime de utilizare a limbajelor de programare (HTML, XML,

XHTML, PHP). CSS – ce sunt şi cum se folosesc.despre bazele de date în MySQL şi despre limbajul Java.folosirea Adobe Dreamweaver. grafică, dinamicitate şi promovare în site-uri.

Învăţaţi comod!Primiţi acasă, la oficiul poştal sau direct la birou pachetele de curs, pe care le parcurgeţi când vreţi! Studiaţi fără stres, în confortul propriului cămin, în pauza de masă, în weekenduri, după program, vara sau iarna... când şi unde doriţi! Puteţi pune rapid în practică noile cunoştinţe, atrăgând un binemeritat succes!

Vă veţi bucura de o atenţie deosebită! Beneficiaţi de sprijinul unui profesor personal, un specialist cu experienţă, care poate fi contactat prin poştă sau online. Webdesignerii sunt specialişti care aparţin nu doar domeniului IT, ci mai degrabă departamentelor de creaţie din diverse companii sau celor de marketing şi publicitate.EUROCOR vă ajută să deveniţi un specialist căutat de mulţi angajatori! Mult succes!

LECŢIA DEMONSTRATIVĂ vă ajută să vă familiarizaţi cu materialele şi metoda de studiu EUROCOR. Din punctul de vedere al numărului de pagini, aceasta reprezintă

mai puţin de jumătate din conţinutul unui caiet de curs. Vă prezentăm câteva secţiuni teoretice, exemple, exerciţii şi un model de temă, selectate

din module diferite, pentru a vedea exact cum sunt structurate caietele.

3

LECŢIE DEMONSTRATIVĂ DESIGN ŞI PROGRAMARE WEB

STRUCTURA LECŢIILOR

Studiul eficient al cursului nostru este garantat de structura unitară a celor 16 module. Informaţiile noi sunt prezentate într-un mod atractiv, iar procesul de

memorare devine simplu şi rapid! Caietele se parcurg uşor, într-un mod relaxat, datorită semnelor

grafice special concepute pentru a marca diverse unităţi de conţinut ale modulelor.

Limbajul este accesibil, explicit, iar accentul este pus pe partea practică.Veţi învăţa ceva util, valorificându-vă în acelaşi timp abilităţile practice,

dar şi creativitatea. Cursul urmăreşte de-a lungul său un studiu de caz ale cărui resurse le

regăsiţi într-un cont special creat.

PRIMIREA CURSULUI

La Eurocor, cursanţii aleg unde să primească pachetul de curs! Dvs. ce alegeţi?1. Acasă, la cutia poştală (Cutia poştală trebuie să aibă dimensiunile de

minimum 22x30x1 cm.).2. La serviciu.3. La oficiul poştal de care aparţineţi (Adresa declarată la înscriere trebuie să

fie cea din buletin).

CONTUL DE CURSANT

Fiecare cursant are propriul cont pe site-ul www.eurocor.ro. Aici găsiţi informaţii despre stadiul trimiterii pachetelor de curs sau plăţile efectuate şi înregistrate. Din contul de cursant se pot accesa şi aplicaţiile TemeOnline sau PlataOnline.

ABSOLVIREA

Odată cu expedierea ultimului pachet de curs, veţi primi şi testul de evaluare finală. Calificativele obţinute pot fi: foarte bine, bine şi insuficient (în funcţie de punctajul realizat). Odată promovat acest test, veţi obţine Certificatul de absolvire Eurocor.

@@

4

LECŢIE DEMONSTRATIVĂDESIGN ŞI PROGRAMARE WEB

Modulul 1Introducere în crearea website-urilor. Ce sunt website-urile? Cu ce se ocupă webdesignerii? Organizarea unui proiect de webdesign: strategiile şi paşii generici de dezvoltare a unui website. Care sunt principalele limbaje de programare; cum au apărut website-urile? Browsere de internet şi editoarele HTML

Modulul 7Foi de stil în cascadă (CSS). Cum definim CSS? Rolul CSS în website-uri. Exemple de CSS în website-uri

Modulul 2Tipuri de website-uri; structura şi ergonomia website-urilor. Pagini personale – bloguri şi promovarea blogurilor. Portal web. Catalog web. Magazin online. Site de bancă. Învăţarea online. Biblioteca. Revista web. Cum să structurăm un website? Diagrama unui website

Modulul 8Dinamica website-urilor şi interacţiunea lor cu utilizatorii. Cum să dezvoltăm o pagină web dinamică din punctul de vedere al dinamicităţii sale. Câmpuri automate. Pagini interactive. CGI. Conceptul de client-side/server-side scripting. Despre tehnologia Flash. Editoare Flash. Sistem de gestiune a conţinutului unui website

Modulul 3Limbajul HTML. Ce este limbajul HTML? Tipuri de date HTML. Structura globală a unui document HTML. Exemple HTML – linii de cod. Exemple de website-uri bazate pe HTML

Modulul 9PHP – partea 1. Ce este limbajul PHP? Instalarea şi configurarea. Informaţii de referinţă despre limbaj. Funcţii. Clase şi obiecte

Modulul 4XML şi XHTML. Structura logică şi fizică a XML. Elemente şi atribute XML. Diferenţe dintre XHTML şi HTML

Modulul 10PHP – partea a 2-a. Securitatea. Sesiuni de lucru. Cookies

Modulul 5Editoare HTML. Ce este un editor HTML? Introducere în Adobe Dreamweaver. Cum putem dezvolta un website folosind Adobe Dreamweaver? Ce sunt template-urile şi cum putem să le folosim cu ajutorul Adobe Dreamweaver? Adobe Dreamweaver – tips & tricks. Editoare HTML gratuite.

Modulul 11Programarea website-urilor în limbajul JAVA. Ce este limbajul JAVA? Apariţia JAVA. Pagini programate în JAVA. Ce este JavaScript? Cum funcţionează JavaScript. JavaScript în website-uri?

Modulul 6Grafică şi multimedia în website-uri. Estetica unui website; cromatica. Cum să nu arate un website – de ce trebuie să ne ferim atunci când dezvoltăm un website? Editoarele foto ca prim utilitar pentru website-uri (Corel Photo-Paint, Adobe Photoshop); ilustraţiile, filmele şi sunetul într-un website

Modulul 12Baze de date. Utilizarea bazelor de date în contextul website-urilor. Interogarea bazelor de date MySQL în PHP şi JAVA

Programa cursului Design şi programare WEB

5


Modulul 13Securitatea şi testarea website-urilor. Cum se testează un website? Securitatea în Microsoft Internet Explorer. Securitatea în Mozilla Firefox. Cum să dezvoltăm un website din punctul de vedere al securităţii?

Modulul 15Web 2.0 şi alte tendinţe de dezvoltare a website-urilor. Ce este Web 2.0? Care este viitorul website-urilor? Cât timp poate fi „valabil” un website? Tendinţe de dezvoltare a website-urilor

Modulul 14Promovarea website-urilor şi reclamele în website-uri. Ce este promovarea web? De ce este important să promovăm un website? Cum să dezvoltăm un website fiind conştienţi de la început de tehnicile de promovare? Reclamele în website-uri: beneficii, rol. Cum să poziţionăm reclamele pe website? Cum se creează un newsletter?

Modulul 16Studii de caz – de ce unele website-uri au succes. Studii privind website-uri cunoscute. Website-uri sub lupă: de ce au sau nu succes? Exemple. Recapitularea cunoştinţelor sub o formă aplicată

6


(selecţie din Modul 5, pagina 1)

Design şi programare web //// 1

MO

DU

L5 EDITOARE HTML

O B I E C T I V E

Atunci când realizăm un website sau edităm fişierele unui website există multe modalităţi prin care putem realiza aceste activităţi. Probabil că aţi auzit de foarte multe ori discutându-se de editoare HTML sau de editoare web. Ne propunem în acest curs să punctăm ce este acela un editor HTML, cu ce ne poate ajuta şi care sunt cele mai bune produse din această categorie, care sunt costurile lor şi, evident, pe care vi-l recomandăm pentru a-l utiliza.

Vom discuta în acest curs pe larg despre Adobe Dreamweaver, de departe cel mai popular editor HTML, cât şi despre alte editoare HTML gratuite. Vă vom oferi două astfel de alternative.

Trebuie să privim un editor HTML ca pe un mediu unde putem dezvolta un website. Un editor HTML vă permite să transformaţi mai rapid, mai facil şi mai corect un design grafic într-un website sau dezvoltarea unui schelet complet nou pentru un website. Toate acestea le vom discuta pe larg în cele ce urmează, aplicându-le punctual, alături de Dreamweaver, pentru a vă ajuta să înţelegeţi la ce este bun un astfel de editor şi cum vă poate uşura munca cu un website.

În acest modul ne propunem:

► să înţelegem ceesteuneditorHTMLşicaresuntfuncţiilesale;

► să aflăm ceesteşilacefoloseşteAdobeDreamweaver;

► să cunoaştem care sunt principalelefuncţiiAdobeDreamweaver;

► să aplicăm aceste funcţii în practică şi să realizămniştemodificăriînwebsite-ulnostru;

► să descoperim câteva sfaturişitrucuriprivindAdobeDreamweaver;

► să învăţăm cesuntacelea template-uriwebşicumputemsă leeditămfolosinduneditorHTML;

► să studiem două alternative pentru Adobe Dreamweaver, şi anume douăeditoareHTMLgratuite.

1. Ce este un editor HTML?Dacă ar fi să facem o analogie inedită, v-aş propune să vă imaginaţi că un editor HTML este o scenă de teatru. Un editor HTML este un mediu de dezvoltare cu decoruri şi modalităţi prin care putem da naştere website-ului nostru. Asemenea unei scene de teatru, un editor HTML dispune de decoruri, de actori, de lumini, de cortină şi de foarte mulţi lucrători, în spate: maşinişti, regizori, stilişti şamd. Toate acestea, transpuse din lumea spectacolului în lumea editoarelor HTML, au la final acelaşi scop – realizarea unui livrabil – în cazul nostru un website.

Modul 5

Fiecare modul începe cu o introducere în care sunt prezentate principalele aspecte ce vor fi studiate.

Obiectivele pe care trebuie să le atingeţi prin parcurgerea fiecărui modul vă ghidează învăţarea.

7


Informaţiile importante şi definiţiile au fost marcate special pentru a facilita înţelegerea lor.



M O D U L 8Dinamica website-urilor şi interacţiunea lor cu utilizatorii

4. CGI

Iniţialele CGI vin de la Common Gateway Interface. CGI este un proto-col standard care interfaţează aplicaţiile cu un server. Evident că tehno-logia CGI este utilizată cel mai des în universul web şi, implicit, serverele care utilizează CGI sunt serverele web.

Un server care utilizează CGI va răspunde cererilor din partea clienţilor. Cel mai întâlnit caz este scenariul clasic:► Aplicaţia (web browser: ex. Microsoft Internet Explorer) cere unui server o

pagină web.► Serverul (server web) răspunde oferind aplicaţiei fişierele website-ului.

Vă veţi întreba în ce fel ne poate ajuta pe noi CGI. Atunci când spunem CGI, trebuie să îl privim ca pe o tehnologie complementară a unui website. Nu este nevoie să intervenim asupra sa în vreun fel sau să îl configurăm în vreun fel. Trebuie doar să fim conştienţi de existenţa sa şi de rolul său – acela de legătură dintre aplicaţie (browser de internet) şi serverul web.

CGI în câteva cuvinte:► Tehnologia CGI a fost lansată încă din 1993.► CGI poate intermedia atât schimbul de fişiere, cât şi comenzi.► Există alternative la CGI: variantele lansate de Apache sau de Netscape, cât şi

versiunea SCGI (Simple Common Gateway Interface), WSGI sau FastCGI.

5. Conceptul de client-side/server-side scripting Aşa cum am specificat mai sus, vom studia acum mai în amănunt tehnologiile client-side şi server-side scripting. Aceste două tehnologii au aceeaşi modalitate de lucru şi presupun prezenţa unor script-uri pentru a funcţiona. Aceste script-uri trebuie să le privim ca nişte instrucţiuni care sunt utilizate de website, mai exact de browserul de internet sau de serverul web, pentru a afişa conţinutul şi website-ul într-un anume fel.

Singura modalitate în care putem separa aceste script-uri se petrece prin natura celor două, mai exact, unde sunt situate şi de unde acţionează: de la nivel de server sau de la nivel de browser.

Ce fac aceste script-uri? Ei bine, rezultatul este unul extrem de simplu: schimbă, în timp real, modul de afişare a conţinutului în funcţie de datele introduse sau solicitate de vizitatorul website-ului. Spre exemplu, client-side script-urile sunt scrise în limbaje ca JavaScript sau VBScript. De cele mai multe ori, client-side script-urile sunt incluse ca linii de cod în codul HTML (această procedură este denumită embedded scripting). De asemenea, script-urile pot fi conţinute şi de un fişier extern, această procedură fiind denumită external scripting.

Client-side script-urile funcţionează în următorul fel: browserul de internet („clientul”) accesează web-serverul care deţine conţinutul website-ului, descarcă pagina HTML home, spre exemplu, şi, atunci, script-urile incluse în această pagină intră în acţiune şi afişează conţinutul în funcţie de cele necesare.

8



Cuvintele – cheie ajută la identificarea principalelor teme descrise în curs.


M O D U L 1 3Securitatea şi testarea website-urilor

E x e r c i ţ i u l 2

Un alt aspect important în securitatea sistemului este software-ul actual care reprezintă sistemul. Software-ul poate avea bug-uri şi breşe de securitate care permit accesul chiar şi fără o parolă. Software-ul sistemului trebuie să fie actualizat (adus la zi) prin intermediul patch-urilor de securitate şi actualizări.

Web serverele sunt formate dintr-o suită de programe complicate care conţin frecvent bug-uri, care pot, în anumite condiţii, să permită hackerilor accesul la sistemul dvs., chiar dacă aceştia nu cunosc parolele de acces. Dacă aveţi webhosting din partea unei companii specializate în aşa ceva, atunci este responsabilitatea lor de a se asigura că software-ul este actualizat (dar ar trebui să verificaţi dacă ei chiar fac acest lucru). Dacă rulaţi propriul dvs. server, atunci trebuie să fiţi foarte atenţi în ceea ce priveşte securizarea lui.

Problemele de securitate pe website-uri apar, de cele mai multe ori, din cauza serverelor web pe care rulează. Uneori, aceste probleme sunt relativ minore, doar permiţând unui atacator să facă inactiv serverul dvs. până când rezolvaţi problema. Cu toate acestea, aceste breşe de securitate trebuie îndepărtate. Ele permit acces atacatorului la fişierele serverului dvs.

Toate programele implicate în procesul acesta de acces şi management al serverului pot influenţa într-un fel sau altul securitatea sistemului dvs. Să considerăm, spre exemplu, că accesaţi serverul prin consolă ssh de la depărtare. Veţi stoca parola, să spunem pe clientul dvs. de e-mail, şi o veţi introduce prin intermediul unei conexiuni de internet pe consola serverului de la depărtare. Poate vă gândiţi că sunt doar câteva elemente de risc în acest caz. Ei bine, nu. Sunt foarte multe. Avem următoarele elemente:► Sistemul de operare de pe computerul dvs.► Clientul de mail de pe computerul dvs.► Conexiunea la internet.► Sistemul de operare de pe maşina accesată prin consolă.

Toate aceste elemente şi modul în care sunt ele configurate afectează securitatea informaţiei în acest caz. Sistemele de operare trebuie protejate cu programe antivirus, conexiunea la internet şi clientul de e-mail, la fel, protejate.

Să nu cădeţi în capcana de a gândi că un anume server este „sigur” doar pentru că se spune acest lucru sau pentru că este furnizat de un brand anume.

Unul dintre cele mai ameninţate, sparte şi atacate servere de web este Microsoft IIS.

Consideraţi necesară existenţa unui program antivirus pe computerul unui webdesigner? Pentru că întrebarea poate fi considerată retorică, vă vom ruga să descărcaţi, pentru acest exerciţiu, aplicaţia Spybot Search&Destroy, un utilitar anti-spyware şi anti-malware prezent în momentul de faţă, de câţiva ani, în topurile de astfel de aplicaţii. Aplicaţia se poate descărca de la adresa http://www.safer-networking.org. Descărcaţi aplicaţia şi scanaţi cu aceasta ultima versiune a website-ului nostru de test. Utilizaţi astfel de aplicaţii pentru toate proiectele dvs. web. Scanaţi-le cu regularitate!

securitatea software-ului

defecţiunile software-ului

menţinerea software-ului actualizat

E X E M P L U

9



Exemplele ilustrează diverse modele de website-uri sau secvenţe de cod explicate în secţiunile teoretice.


M O D U L 6Grafică şi multimedia în website-uri

Studiaţiînaintealteproiectesimilarecualdvs.Ca şi în cazul oricărei opere „de artă”, nu există atât loc pentru greşeală, nu există greşeli predefinite, ci, mai degrabă, greşeala începătorului şi lipsa de inspiraţie a creatorului. Pentru că sunteţi la început în „manipularea” culorilor, elementelor grafice, conceptelor grafice, este bine mai întâi să studiaţi alte website-uri similare ca domeniu de activitate cu cel căruia trebuie să-i stabiliţi designul. Trebuie, evident, să vă faceţi foarte bine temele înainte de a alege culori sau de a stabili ce elemente veţi folosi în designul dvs.

FolosiţiimaginidecalitateÎn altă ordine de idei, trebuie să fiţi foarte atenţi ce fel de ilustraţii folosiţi în website-ul dvs.: imagini de produse, imagini pentru bannere, imagini pentru diferite elemente grafice (linii, footer etc.). Toate aceste imagini trebuie să fie nu neapărat de rezoluţie cât mai înaltă, cât de o mărime care să permită încărcarea mai uşoară pe pagină, altfel devenind supărătoare pentru vizitatori şi determinându-i în cele din urmă să părăsească site-ul. Să fie corecte şi cât mai curate.

Evitaţi să utilizaţi imagini realizate cu camere foto neperformante (de ex. telefon mobil), neclare, culori defecte (arse) etc. Încercaţi să oferiţi o atenţie sporită imaginilor pe care le utilizaţi în proiectele dvs. Acesta este unul dintre principalele motive care fac un website să arate „ieftin”.

Mai jos, un exemplu de website care foloseşte imagini de calitate îndoielnică, ceea ce duce la un aspect neîngrijit, urât şi ieftin:

E X E M P L U

10




M O D U L 1 0PHP (partea a II-a)

Exemplele trimit la situaţii concrete din activitatea unui webdesigner.

Spre exemplu, să ne imaginăm un forum. Pe un forum, utilizatorii pot posta mesaje care vor fi afişate către alţi utilizatori. Ca tehnologii, avem nevoie de Javascript, pentru a posta aceste mesaje, şi de HTML, pentru a le da o anumită formă, pentru a le formata.

Există însă o problemă în acest caz. Chiar dacă este scenariul corect pentru a realiza acest lucru, pot apărea extrem de multe probleme de securitate. Trebuie să avem în vedere că printre vizitatorii acelui forum putem avea tot felul de persoane rău intenţionate, hackeri sau entuziaşti în ale informaticii care doresc să exploateze diferite breşe de securitate ale forumului. Unul dintre lucrurile dăunătoare pe care le pot face este să introducă Javascript în sursa PHP. Acest lucru poate avea mai multe rezultate. Poate spre exemplu să fie utilizat doar pentru a incomoda vizitatorii forumului prin generarea de mesaje infinite prin care vizitatorul este atenţionat să închidă browserul sau să viziteze un alt website.

Aceasta este versiunea simplă, cazul în care atacurile nu sunt rău intenţionate. Pot exista însă atacuri extrem de dăunătoare, atacuri care vor introduce în ecuaţie keyloggere sau care vor recupera userii şi parolele de pe server sau din computerele vizitatorilor.

CumsăneprotejămdeCrossSiteScripting?La fel ca şi în cazul SQL Injection, este destul de uşor să ne protejăm şi împotriva Cross Site Scripting. Pentru a face acest lucru, trebuie să ne folosim de o funcţie a PHP, numită „htmlentities_()”. Această funcţie pur şi simplu va converti caracterele care au un înţeles în limbajul HTML către entităţile lor corespunzătoare. De exemplu, tag-urile HTML, după cum am învăţat în modulele anterioare, încep cu un semn denumit „mai mic ca”, anume „<”. Folosind funcţia PHP de mai sus, acest caracter va fi convertit în „<”. Vom merge tot pe exemplul anterior, şi anume cel cu forumul. Nicio problemă până aici, doar că stabilisem că dorim să le furnizăm vizitatorilor posibilitatea de a formata conţinutul forumului, implicit de a utiliza HTML pentru formatarea textului. Aplicând procedura din paragraful anterior, din păcate, această posibilitate nu va mai exista. De aceea, trebuie să găsim o soluţie alternativă.

Vom folosi o particularitate care se numeşte „bbcodes”. Aceasta are o sintaxă foarte similară cu HTML şi, în condiţiile în care aţi mai folosit HTML, nu este greu de utilizat.

Un tag foarte uzual în bbcode este tag-ul URL.

Să ne imaginăm că cineva a introdus în cod:[url=http://www.eurocor.ro]Institut European[/url]

Acesta va fi convertit de bbcodes în:<a href=”http://www.eurocor.ro”>Institut European</a>

În acest fel ne putem proteja de XSS. Practic, vom vedea pe larg în partea de studiu de caz a acestui modul.

E X E M P L U

E X E M P L U

11


Print screen-urile şi studiul de caz prezentate în acest curs vă facilitează însuşirea cunoştinţelor.



M O D U L 1 0PHP (partea a II-a)

Studiu de cazVom presupune că firma producătoare de porţi din fier forjat îşi doreşte noi funcţii pe website. Aşadar, aceştia doresc o secţiune nouă şi separată în website, cu următoarele particularităţi:► Să fie accesibilă din meniul orizontal sub forma unui buton nou.► Numele său să fie „Clienţi”.► În cadrul acesteia, clienţii companiei să aibă posibilitatea de a se autentifica cu

un utilizator şi o parolă pentru a pătrunde într-o secţiune dedicată fiecăruia.► Posibilitatea de a crea un utilizator şi o parolă pentru fiecare client al companiei.► Utilizatorul şi parola să conducă clienţii către o secţiune dedicată fiecăruia.► Realizarea unui cont de client.► Includerea în pagina client1 a unei liste Microsoft Excel de preţuri, produse şi

servicii.

Acestea sunt cerinţele primite din partea companiei producătoare de porţi din fier forjat. La aceste cerinţe mai adăugăm şi noi câteva:► Realizarea materialelor necesare (lista Excel).► Implementarea tuturor punctelor de mai sus în PHP pe structura actuală a

website-ului.► Simulare de atac de securitate PHP.► Identificarea breşelor de securitate PHP în proiectul nostru.► Rezolvarea breşelor.

RealizareamaterialelornecesareVom purcede la realizarea unui fişier separat HTML, pornind de la un fişier Excel. Presupunem că clientul ne-a furnizat aceste documente Excel pentru a-l include în zona client1. Astfel, ne propunem în cele ce urmează să convertim acest document în format HTML, creând un fişier HTML separat. Aşadar, vom porni de la documentul Excel:

cerinţenoiclient

12


Materia este uşor de înţeles datorită tabelelor, schemelor şi imaginilor relevante.



M O D U L 1 5Web 2.0 şi alte tendinţe de dezvoltare a website-urilor

Comunităţile online şi-au pus amprenta şi asupra mediului de afaceri. Astfel, numeroşi oameni de afaceri apelează la acest mijloc de comunicare, ale cărui beneficii sunt multiple, pentru a identifica noi oportunităţi care să le permită să îşi dezvolte business-ul. Companiile au început să îşi creeze profile pe reţelele sociale pentru a ajunge mult mai uşor la public şi pentru a interacţiona cu acesta într-o manieră flexibilă, deschisă, transparentă. Mai ales în comunicarea online, reţelele sociale reprezintă instrumente indispensabile oricărui specialist în relaţii publice. Este important ca persoanele însărcinate cu funcţia de comunicare a unei companii să monitorizeze discuţiile care au loc în cadrul reţelelor sociale, discuţii care ar fi de preferat să ia forma unui dialog, însă acest lucru nu este suficient. Dacă mesajele pe care le trimitem reuşesc să atragă atenţia şi interesul publicului, acesta va reacţiona, iar aici intervin riscurile unei astfel de acţiuni. Trebuie să fim atenţi la mesajele şi comentariile care vin din partea celorlalţi membri. În momentul în care o persoană trimite un feedback la un mesaj postat de o companie, aceasta aşteaptă un răspuns în cel mai scurt timp. Nimănui nu-i place să fie lăsat să aştepte. Din contră, oamenii vor să simtă că li se acordă atenţie, că opinia lor contează. Aceasta este premisa de la care trebuie să pornim atunci când comunicăm prin intermediul unei reţele sociale.

Un studiu din aprilie 2007 despre reţelele de social networking, realizat în Statele Unite, dezvăluia următoarele concluzii:► Website-urile de search clasic (Yahoo, Google, MSN) rămân de departe

în topul celor mai utilizate aplicaţii web, în ciuda popularităţii în creştere a site-urilor de „social search”.

► Website-ul Yahoo este vizitat zilnic de 40% din respondenţii testului.

concluzii

MotivepentrucăutareapewebsiteConectarea cu alţi utilizatori

Căutarea de servicii/produse

Cumpărarea de servicii/produse

Distracţie/amuzament

Alte motive

Nu au realizat nicio căutare

MySpace

FaceBook

YouTube

iVillage

TripAdvisor

Yahoo! Answers

Craigslist

Amazon

Procente de vizitatori online0% 20% 40% 60% 80% 100%

35%49%

2%6%

6%7%

1%

2%4%

1%32%

56%39%39%41%

1%2%

1%6%5%

14%46%

30%19%

72%19%

6%16%

8%3%

10%5%6%

14%13%17%20%

2%

23%22%19%

28%20%17%

13%8%

13


Exerciţiile vă testează la nivel practic cunoştinţele asimilate.





Rezervaţi astfel locuri libere în zona de stânga sus şi dreapta sus unde putem introduce mai târziu elementele necesare. Vom schimba în cele ce urmează culoarea de background a primului layer, din alb, în albastru. Pentru aceasta ne vom poziţiona cu mouse-ul şi vom efectua clic pe layerul Background, vom debifa vizibilitatea Layer1 (cu clic pe „ochiul” din faţa Layer 1) şi vom selecta din paleta de culori culoarea cyan:

Utilizând o altă unealtă Photoshop, PaintBucketTool, pe care o găsiţi în bara de unelte în partea stângă, vom umple bannerul alb cu culoarea albastră:

Folosiţi Paint Bucket Tool sau un utilitar similar din editorul dvs. foto, pentru a umple documentul creat la exerciţiul 4 cu culoarea neagră.

Vom schimba apoi modul în care se „amestecă” cele două layere. Trebuie să ne imaginăm că bannerul final este format dintr-o serie de layere (fiecărui obiect nou fiindu-i asociat un layer), asupra cărora putem interveni separat, setările de culoare, de contrast, de luminozitate, de claritate etc. putând fi altele pentru fiecare în parte. Ne propunem, astfel, să amestecăm cele două layere pentru a da o uşoară tentă de cyan imaginii principale cu poarta din fier forjat.

14






Un filmuleţ pe youtube.com are următoarea interfaţă:

După cum spuneam şi mai sus, în acest fel youtube.com foloseşte flash pentru a afişa filmuleţele sale. Un alt exemplu de afişare a filmuleţelor folosind flash este:

Se pot utiliza diferite interfeţe pentru a realiza acest lucru. După cum v-am promis, atunci când vom învăţa puţin mai pe larg Flash, vom putea să exemplificăm cum putem să introducem astfel de filmuleţe în proiectele noastre.

Până atunci însă, trebuie să aveţi în vedere modul în care puteţi integra aceste filmuleţe în proiectul dvs. sau, dacă realizaţi un website pentru un client, ce îi puteţi promite pe parte de filmuleţe, care sunt limitările, ce este greu şi ce este uşor de realizat în privinţa lor. În principiu, filmuleţele pe care le veţi introduce într-un proiect pot fi de orice fel, orice format cât de cât cunoscut, răspândit. Există nenumărate utilitare care ne pot ajuta să transformăm filmuleţul nostru în orice format dorim, pentru a se potrivi cu tehnologia pe care o vom utiliza în website-ul nostru.

Pentru acest exerciţiu vă propunem inserarea unui film youtube.com pe o pagină HTML. Efectuaţi, pentru aceasta, următorii paşi:

► Creaţi o pagină nouă html cu ajutorul Adobe Dreamweaver.

► Accesaţi website-ul youtube.com.

► Căutaţi un filmuleţ preferat.

► Inseraţi în pagina HTML codul HTML embeded oferit de youtube pe care îl puteţi găsi în dreapta filmuleţului în căsuţa denumită „Embed”.

► Salvaţi pagina dvs. şi vizualizaţi-o folosind un browser de internet.

15





Exerciţiul2

– îi putem recomanda să renunţe la pattern-ul de pe background pe motiv că „încarcă” inutil website-ul;

– îi putem recomanda să folosească o culoare complementară pentru background (negru sau alte nuanţe de negru);

– îi putem recomanda să schimbe culoarea textului, de preferat, pentru lizibilitate culoarea albă (se ştie că cele mai recomandate scenarii text/background sunt formate din alb/negru sau negru/alb);

– putem să păstrăm culoarea roşie a textului doar în anumite zone.

Exerciţiul3– prea multe culori;– prea multe elemente;– prea înghesuit;– fundal nepotrivit (nu este neutru);– suprapunere imagini.

Exerciţiul8

Să presupunem că doriţi să postaţi pe site-ul dvs. trailerul unui film. Noi am ales spre exemplificare Wall-E. După găsirea filmuleţului pe Youtube, copiaţi din partea dreaptă a ecranului codul Embed.

Aveţi mai multe opţiuni pentru aceasta mai jos privind includerea filmuleţelor asemănătoare (Include related videos), afişarea marginii şi a culorii acesteia (Show Border) etc. Codul embed copiat cu Ctrl+C îl veţi posta pe pagina site-ului dvs. cu Ctrl+V şi va arăta astfel:

<object width=”580” height=”360”><param name=”movie” value=”http://www.youtube.com/v/8-_9n5DtKOc&hl=en&fs=1&color1=0x234900&color2=0x4e9e00&border=1”></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”http://www.youtube.com/v/8-_9n5DtKOc&hl=en&fs=1&color1=0x234900&color2=0x4e9e00&border=1” type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”580” height=”360”></embed></object>

R Ă S P U N S U R I L A E X E R C I Ţ I I

Vă verificaţi rapid, cu ajutorul răspunsurilor la exerciţii.

16



Un semn special arată că anumite teme se leagă de idei prezentate anterior. În acest caz, le regăsim şi în Modulul 2, la pagina 36.


M O D U L 3HTML

Vom urmări, în cele ce urmează, schiţa logică care a rezultat după studiul de caz din modulul 2: clientul doreşte un site aerisit, în partea de sus un banner şi imediat dedesubt, un meniu orizontal care să conţină meniul propriu-zis.

În baza diagramei vom realiza şi noi scheletul website-ului conform elementelor învăţate în capitolul „Exemple HTML”. Vom realiza aceasta integral cu ajutorul editorului Notepad.

Dimensionăm mărimea website-ului astfel încât acesta să fie vizibil pe un minimum de rezoluţie 1024x768 pixeli, folosindu-ne de un tabel cu funcţia <table>, cu lăţimea de 900 de pixeli. În acest tabel adăugăm încă 4 tabele – primul pentru banner, al doilea pentru zona meniu, al treilea pentru zona de content cu scroll şi ultimul pentru zona fixă cu date de contact.

Vom împărţi în două părţi primul tabel (cel pentru banner): o parte pentru banner şi cealaltă pentru zona cu data şi ora, aşa cum au fost solicitate de client.

Codul sursă privind explicaţia de mai sus este:

<html>

<head>

<title>Titlu site</title>

</head>

<body>

<table width=”900” border=”1” align=”center”>

<tr>

<td align=”center”>

<table width=”100%” height=”60” border=”1”>

<tr>

<td width=”800”>loc de banner </td>

<td width=”100”>ora si data </td> </tr> </table> </td> </tr> <tr> <td height=”30”>zona meniu orizontal </td> </tr> <tr> <td valign=”top”>zona scroll</td> </tr> <tr> <td height=”30”>zona fixa cu date de contact </td> </tr></table></body></html>

scheletulsite-ului

2/36

17




M O D U L 5Editoare HTML

Întrebările de verificare vă ajută să vă fixaţi cunoştinţele dobândite din fiecare capitol.

?Î N T R E B Ă R I D E V E R I F I C A R E

Putem observa că, la prima vedere, NoteTab Light nu este foarte diferit de Windows Notepad, cel cu care am creat website-ul nostru de la început. Această afirmaţie nu este însă integral adevărată, deoarece, dacă studiem puţin interfaţa, meniurile şi posibilităţile acestui program, vom observa şi detaliile. Sigur că NotePad Light nu va oferi aceleaşi funcţii precum Dreamweaver sau 1st Page 2006, însă, atunci când dorim să modificăm foarte rapid un document HTM, ne trebuie un utilitar puţin mai complet decât Windows Notepad şi nu avem nevoie de WYSIWYG, putem folosi liniştiţi şi NoteTab Light.

Cu aceasta încheiem modulul 5 dedicat editoarelor HTML, urmând ca în modulul viitor să ne oprim atenţia asupra elementelor de grafică şi multimedia în realizarea website-urilor. Până atunci însă, vă doresc mult succes în rezolvarea temei pentru acasă şi spor la învăţat!

1. Pot fi template-urile şi altfel decât HTML?

2. Cum putem defini un editor HTML?

3. Dreamweaver editează doar documente HTML?

4. Ce funcţie importantă îi lipseşte lui NoteTab Light, cât şi majorităţii editoarelor HTML gratuite?

5. În ce fel afectează Adobe Dreamweaver codul sursă al unui document HTML?

6. Ce este funcţia „Design” a Adobe Dreamweaver?

18




M O D U L 3HTML

3.1 HTML este un limbaj de marcare alcătuit din coduri de cuvinte şi din sintaxe ca orice alt limbaj de programare. HTML constă dintr-o serie de coduri tastate într-un fişier text de către autorul website-ului – acestea sunt denumite etichete. Textul este apoi salvat ca un fişier de tip html şi vizualizat prin intermediul unui browser de internet, cum ar fi Internet Explorer, Mozilla Firefox, Safari, Opera etc.

3.2 Elemente – exemple de elemente: html, head, body, table. Elementele sunt practic funcţiile acestui limbaj de marcare. Spre exemplu, elementul table este folosit pentru a introduce un tabel într-o pagină HTML.

3.3 Atribute – exemple de atribute: align, border, id. Atributele sunt funcţii pe care le alăturăm elementelor, de exemplu adăugând elementul table, atributul align=”center” ne va poziţiona tabelul pe mijlocul paginii.

3.4 Tipul valorii atributului „culoare” (%Color;) se referă la definiţiile culorilor după cum sunt specificate în SRGB. O valoare a unei culori poate să fie un număr hexazecimal (cu un prefix dat de simbolul #) sau unul din următoarele 16 nume de culori. Numele de culori nu diferenţiază între majuscule/minuscule.

3.5 Lungimea atributelor într-un document HTML poate depinde de trei elemente: pixeli, lungime şi multilungime.

3.6 Valoareaatributeloralcărortipesteuncoddelimbă (%LanguageCode) se referă la un cod de limbă. Spaţiile albe nu sunt permise în codurile de limbă. Codurile de limbă diferenţiază între majuscule/minuscule.

3.7 Atributele set de caractere „charset” (%Charset în DTD) se referă la o codificare a caracterelor după cum se descrie în secţiunea despre codificarea caracterelor. Valorile trebuie să fie string-uri (de ex. „euc-jp”) din registrul IANA. Numele codificărilor caracter nu diferenţiază între majuscule/minuscule. Agenţii utilizator trebuie să urmeze paşii definiţi în secţiunea despre specificarea codificărilor caracterelor în scopul determinării codificării caracterelor unei resurse externe.

3.8 Puteţi utiliza următoarele tipuri de linkuri recunoscute, listate aici cu interpretarea lor convenţională. În DTD, %LinkTypes; se referă la o listă de tipuri de linkuri separate cu spaţii. Caracterele de spaţii albe nu sunt permise în interiorul tipurilor link. Aceste tipuri link nu diferenţiază între majuscule/minuscule, i.e. „Alternate” are acelaşi înţeles ca şi „alternate”: Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help, Bookmark.

3.9 UndocumentHTMLestecompusdin treipărţi: linie conţinând informaţii despre versiunea HTML; secţiune declarativă de început (header – delimitată de elementul HEAD); un corp care cuprinde conţinutul actual al documentului. Corpul poate fi implementat cu elementul BODY sau cu elementul FRAMESET.

3.10 ElementulHEAD poate conţine informaţii ca: SCRIPT, STYLE, META, LINK, OBJECT. Elementul HEAD conţine informaţii despre documentul curent, cum ar fi: titlul, cuvintele cheie care sunt utile motoarelor de căutare şi alte date care nu sunt considerate parte a conţinutului documentului.

R E Z U M A T U L M O D U L U L U I 3

Rezumatele sintetizează aspectele cele mai importante din fiecare modul.

19




M O D U L 8Tipuri de website-uri; structura şi ergonomia website-urilor

Boolean – în cultura informatică, în special în cultura de programare, Boolean desemnează un tip de date care pot avea doar două valori: adevărat sau fals

Digital Rights – Gestiunea drepturilor digitale este o serie de tehnologii de controlare a accesului la fişiere text, audio, video ş.a., folosite de producătorii de aparate electronice, editorii şi deţinătorii de copyright, pentru a limita utilizarea mediilor şi dispozitivelor digitale

ECMA Script – este un limbaj de scripting, folosit la scară largă pe internet, dialectele sale principale fiind JavaScript, ActionScript şi Jscript

Flex – Adobe Flex Produs software creat de Adobe Systems destinat creării de aplicaţii interactive. Sub denumirea de RIA s-au dezvoltat o serie de aplicaţii interactive, având o interfaţă unitară formată din controale şi componente. Formatul specific Flex este MXML (Macromedia XML). Pentru programatori, se poate folosi cu succes limbajul de scripting ActionScript. Rezultatul final este un fişier Flash de tip SWF care cuprinde elemente de interfaţă interactive

Mambo – este un CMS open source

MP3 – MPEG Layer 3 este un format audio multimedia, având la bază comprimarea sunetului cu pierdere de calitate. Dezvoltat de Institutul Fraunhofer din Germania, el a fost a treia reuşită a acestuia, după MPEG Layer 1 (folosit pentru casetele digitale Philips DCC) şi MPEG Layer 2 (utilizat la sonorul Video CD-urilor). Avantajul său principal a fost (şi este în continuare) spaţiul redus ocupat, însă calitatea sunetului are de suferit în timpul comprimării

MP4 – este o colecţie patentată de metode de compresie pentru compresie video şi audio

D I C Ţ I O N A R D E S P E C I A L I T A T E

Management

Termenii de specialitate sunt explicaţi în secţiunea dicţionar de specialitate.

20




M O D U L 2Tipuri de website-uri; structura şi ergonomia website-urilor

Pentruexerciţiilecuvariantederăspuns,unsingurrăspunsestecorect.

1. Care este variabila PHP care poate conţine o combinaţie de litere,simbolurişispaţiidelimitateîntreghilimele?

a) echo; b) string; c) function; d) header.

2. CesemnificăincrementareaşidecrementareaunuinumărînPHP?

a) Creşterea unui număr cu o măsură se numeşte incrementare şi micşorarea cu o măsură se numeşte decrementare.

b) Semnifică mărirea unui număr exponenţial şi micşorarea unui număr incremental.

c) Creşterea unui număr cu o unitate se numeşte incrementare, iar micşorarea cu o unitate se numeşte decrementare.

3. CuceformulătrebuiesăînceapăîntotdeaunauncodPHP:

a) {?php; b) <?php; c) <php; d) ?php.

4. ConstantelePHPpotaveaovaloare?

a) da; b) nu.

5. CaresuntatributelePHPcuajutorulcăroraputempreluadatedintr-undocumentHTML?

a) Action şi Method; b) Method şi Echo; c) Action şi Script; d) Action şi Integer.

6. Esteadevăratcăîntr-uncodPHPnuputemadăugacomentarii?

a) da; b) nu.

7. RealizaţiunscriptPHP,princaresădemonstraţiTeoremaluiPitagora.

Teorema lui Pitagora afirmă că „în orice triunghi dreptunghic, sumapătratelorcateteloresteegalăcupătratul ipotenuzei”.Dacăsenoteazăcuaşiblungimilecatetelorunuitriunghidreptunghicşicuclungimeaipotenuzei acestuia, atunci teorema lui Pitagora poate fi formulatăalgebricastfel:

a2 + b2 = c2

T E M A P E N T R U A C A S Ă 9

Temele pentru acasă vă ajută să vă evaluaţi cunoştinţele dobândite din fiecare modul.

21


Tel. 021 33 225 33; www.eurocor.ro

Temele se pot rezolva pe formularele speciale inserate în caiet (dacă se trimit spre corectare prin poştă) sau online, în contul de cursant de pe site-ul www.eurocor.ro. Un profesor personal vă îndrumă pe toată durata studiului.

Orice companie, instituţie publică sau chiar un liber profesionist are nevoie de un site web. Cu ani în urmă, în afaceri conta cât de frumoasă era firma de la poartă. Astăzi, fără un site adecvat nu se poate rezista

şi progresa în mediul business, indiferent de domeniu. Şi dumneavoastră puteţi fi un specialist căutat de mulţi angajatori! Alegeţi chiar astăzi cursul Eurocor de DESIGN ŞI PROGRAMARE WEB! Acest curs se adresează atât acelora care vor să înveţe cum se construieşte un website, de la A la Z, cât şi celor care doresc

o reactualizare a cunoştinţelor dobândite anterior în acest domeniu. Spor la studiu!

EXEMPLU

regăsiţi într-un cont special creat. · să fim conştienţi de existenţa sa şi de rolul său...

Documents