Instrumente de lucru pentru crearea site-urilor Web

Ce este un site web?

Un site web este o colectie de documente (similare unei colectii de documente word, de exemplu). Spre deosebire de acestea, documentele care formeaza site-ul (pe care le vom numi pagini) nu sunt independente unele de altele ci sunt legate printr-un sistem care se numeste sistemul de navigare in cadrul site-ului. Paginile site-ului sunt create cu ajutorul unui limbaj numit HTML. In spatele oricarei pagini web sta codul HTML al paginii. Vizualizarea codului sursa HTML poate fi realizata selectand din meniul View al browserului optiunea Source. Cu ajutorul limbajului HTML pot fi incluse intr-o pagina web texte, imagini, legaturi catre alte pagini din site sau catre web, liste, tabele, formulare. Tehologii folosite HTML. Asa cum spuneam, paginile web sunt create cu ajutorul limbajului HTML. Acesta nu este un limbaj de programare propriu zis, ci un limbaj de marcare. Prin intermediul sau programatorul stabileste ce elemente vor face parte din pagina web si care va fi aspectul acestora. Acest lucru se realizeaza cu ajutorul unor cuvinte cheie incluse intre paranteze unghiulare care se numesc tag-uri. In afara limbajului HTML, la realizarea unui site pot participa si alte limbaje sau tehnologii. CSS. Prescurtare de la Cascading Style Sheets, foi de stiluri in romaneste. Servesc la stabilirea unui aspect unitar pentru elementele care fac parte din pagina web si modificarea cu usurinta a lor. De exemplu, daca vom crea o pagina de stiluri in care vom stabili ca titlurile care apar in site vor fi de culoare rosie si marimea de 20 de pixeli, in cazul cand as dori modificarea culorii nu va mai fi necesar sa modific fiecare pagina a site-ului. Este suficient sa modific pagina de stiluri si toate paginile isi vor modifica aspectul in consecinta. Java Script. Spre deosebire de HTML, Java Script este un limbaj de programare. Se foloseste impreuna cu limbajul HTML. Intr-o pagina scrisa in HTML se pot integra programe (numite scripturi) scrise in Java Script. Utilizari frecvente: ferestrele pop-up, meniurile dinamice, afisarea imaginilor, textele care fac scroll, verificarea formularelor, etc. PHP si MySql. PHP este, de asemenea, un limbaj de programare. Este ceea ce se cheama un limbaj server-side, spre deosebire de JavaScript care este un limbaj client-side. Aceasta inseamna ca scripturile JavaScript sunt executate de catre client (adica de browser) in vreme ce scripturile PHP sunt executate de catre server. PHP se foloseste pentru a crea diverse aplicatii: magazine virtuale, cataloage de produse, forumuri, motoare de cautare, etc. Este folosit foarte adesea inpreuna cu MySql. MySql este un sistem de baze de date special conceput pentru a fi folosit pe internet. Cu ajutorul lui se pot crea baze de date complexe care pot fi interogate prin intermediul programelor scrise in PHP. Programele PHP (sau chiar instructiuni izolate) se pot integra fara probleme in codul HTML al paginilor. Flash. Tehnologia Flash, creata de compania Macromedia, permite realizarea de animatii complexe si aplicatii multimedia care includ animatie, muzica, film. Exista doua curente in web design in legatura cu tehnologia Flash: Realizarea site-urilor in intregime in Flash. In acest caz partea de HTML se reduce la cateva tag-uri care includ aplicatia Flash. Dezavantaje: se incarca greu pe conexiuni dial-up, este prost indexata de motoarele de cautare Realizarea de site-uri mixte: HTML si Flash. Este varianta pentru care optam noi. Site-urile sunt realizate in HTML (sau PHP) iar elementele de animatie sunt realizate in Flash.

Tipuri de site-uri Web

Paginile HTML (Hypertext Markup Language) constituie in anumite conditii, cel mai ieftin mijloc de a publica informatii in Internet. Home page (pagina initiala) reprezinta un document hipertext (HTML) care serveste ca punct de intrare initial intr-un Web. Pagina initiala trebuie sa contina informatii cu caracter general si introductiv precum si hiperlegaturi la resursele corelate. O pagina proiectata corespunzator contine butoane de naviga re interne, care ajuta utilizatorul sa se deplaseze printre numeroasele documente la care are acces. Practic, exista patru tipuri de site-uri Web: a) Site-uri cu pagini statice b) Site-uri cu pagini dinamice c) Site-uri dezvoltate pe baze de date d) Magazine virtuale

Tipuri de site-uri Web

Site-urile cu pagini statice Aceste site-uri se folosesc in special drept panouri publicitare. Se mai numesc si brochureware , deoarece clientii doresc transpunerea in format HTML a principalelor brosuri (pliante) de prezentare. Un asemenea tip de sit este relativ usor si ieftin de construit. Site-uri cu pagini dinamice Aceste site-uri necesita o actualizare periodica (zilnica sau saptamanala) a elementelor specifice. La proiectarea unui astfel de site trebuie luate in considerare urmatoarele elemente: - Modul in care vor fi actualizate datele de pe site - Costurile operatiunilor de actualuzare periodica. Comunicarea cu clientii (utilizatorii) care apeleaza un astfel de site, se poate realiza prin inserarea de formulare de e-mail, pe paginile site-ului. In aceste conditii se poate lua in considerare si folosirea unui autoreponder pus la dispozitie de catre ISP. In felul acesta se va transmite automat un mesaj de raspuns vizitatorului site-ului, instiintandu-l astfel de primirea mesajului transmis si multumindu-i pentru vizita. Site-uri dezvoltate pe baze de date Aceste site-uri impun metode si tehnici speciale pentru realizare, necesitand actualizari frecvente ale elementelor componente. Aceste site-uri se administreaza extrem de greu, ele se bazeaza pe o baza de date (Oracle, de exemplu), care poate fi actualizata in mod regulat prin intermediul unui program prioritar. Se pot utiliza si bazele de date Access sau File Maker. Acest tip de site se recomanda pentru activitati cu volum important de informatii ce trebuie actualizat la intervale regulate de timp. Magazinul virtual Acest tip de site este cel mai complicat si mai greu de utilizat, necesitand metode si tehnici speciale de proiectare si exploatare. Magazinele virtuale se bazeaza pe date stocate in baze de date si permit clientilor sa aleaga si apoi sa achizitioneze in siguranta produse sau servicii on line, cu ajutorul cartilor de credit sau a banilor virtuali (electronic cash). Procesarea cartilor de credit este partea cea mai dificila in dezvoltarea unui astfel de site.

Crearea paginilor Web se poate realiza in doua moduri, si anume: A. Manual, scriind efectiv tagurile HTML. B. Asistat, cu ajutorul unor programe speciale

Crearea paginilor Web

A.Modul manual Crearea manuala a paginilor Web se poate realiza numai de catre specialisti, ce cunosc limbajul HTML. Realizarea manuala presupune existenta urmatoarelor trei instrumente : a) Browser de Web. b) Programe de grafica. c) Programe de editare text a) Browserul Web este necesar pentru testarea a ceea ce se obtine, in fiecare moment si de scriere a tagurilor HTML. Se recomanda ca testarea sa se faca cu ambele browsere, Microsoft Internet Explorer si Netscape Communicator. Este important pentru proiectant ca site-ul sa functioneze sub ambele browsere. b) Cu ajutorul programelor de grafica, se creaza/editeaza, imaginile de fundal, figurile, butoanele, desenele etc. Exemple de programe ce pot fi utilizate : - Paint Shop Pro - Adobe Photo-Shop c) Programul de editare text este utilizat pentru scrierea efectiva a tagurilor HTML, folosind comenzi Visual Basic. Exemplu de programe ce pot fi utilizate pentru scrierea tagurilor HTML: - Note Pad - Word Pad Plus. Principalul avantaj al metodei manuale consta in faptul, ca pagina HTML este exact asa cum s-a dorit. Se poate introduce astfel, orice tag, cu orice atribut. Dezavantajul metodei consta in principal, in faptul ca proiectantul trebuie sa cunoasca bine limbajul HTML, fiind necesara o documentatie de specialitate.

Proiectantul poate utiliza pentru realizarea site-ului unul din editoarele WYSIWYG, ce dispune de un ansamblu de instrumente de care avem nevoie pentru a construi un site profesional La realizarea site-urilor profesionale de tip aplicatii on-line, se pot utiliza pachete de programe ce asigura o multime de optiuni si facilitati de programare. Utilizarea acestor programe necesita cunoasterea tehnicii de programare orientata obiect. In modul asistat sunt necesare urmatoarele categorii de programe : a) Browsere de Web (Identic cu metoda manuala) b) Programe de editare vizuala a paginilorHTML c) Programe ce asigura facilitati de programare d) Programe de grafica (Identic cu metoda manuala) a) Browsere de Web se procedeaza identic cu metoda manuala. b) Programe de editare vizuala In acest caz se poate folosi programul Microsoft Word (Office 97 sau 2000) sau solutii integrate care contin browser si editor vizual. Programele din categoria solutii integrate pun la dispozitia proiectantilor, Wizard-uri (asistenti) si sabloane. Important este faptul ca cu ajutorul acestor programe specializate, se pot crea propriile machete de proiectare, elemente interactive si legaturile la bazele de date existente. La ora actuala, in clasamentul celor mai performante instrumente de editare site-uri de tip WYSIWYG sunt urmatoarele 7 programe : - Microsoft FrontPage 2000 - Adobe PageMil 3.0 - Macromedia Dream Weaver 2 - HomePage 3.0 - HotMetal PRo 5.0 - NetObjects Fusian 4.0 - VisualPage 2.0 c) Programe ce asigura facilitati de programare Aceste pachete de programe asigura construirea aplicatiilor on-line fara sa fie nevoie sa se apeleze la o echipa de programatori profesionisti Java sau C + +. La ora actuala, in clasamentul celor mai performante programe ce asista utilizatorul pentru realizarea unei aplicatii Web sunt urmatoarele : - Allaire ColdFusion 4.0 - Microsoft Visual Studio 6.0 Enterprise - Oracle Developer 6.0 - SilverStream 2.5 - Sun NetDynamics 5.0

B. Modul Asistat

Browsere
Browserul reprezinta instrumentul cu care se vizualizeaza paginile web. Daca putem vedea aceasta pagina web, nseamna ca avem instalat pe calculator cel putin un browser. n prezent, exista foarte multe browsere. Cele mai folosite ( aproape 90% din numarul de utilizatori ) sunt: Internet Explorer Opera Netscape Navigator Aceste browsere folosesc o interfata grafica care permite vizualizarea usoara si atractiva a paginilor web. Fiecare din ele au mai multe variante. Astfel IE a ajuns la versiunea 6, Opera 7.5 iar NN la versiunea 7 . Pentru a vedea daca nu exista erori la redarea paginilor web, este bine sa avem instalata pe computer si o versiune mai veche.

Editoare HTML
Putem sa realizam un site web chiar daca nu stim HTML. Pentru aceasta avem nevoie de un editor HTML. Acestea se mpart n doua categorii: 1. Editoare de tipul WYSIWIG ( What You See Is What You Get ), sau n traducere: Ceea ce vezi este ceea ce obtii. Aceste editoare se pot folosi foarte usor chiar si de catre ncepatori. Desi au foarte multe optiuni si butoane, realizarea unei pagini web simple este relativ usoara. Aceasta cu att mai mult cu ct avem la dispozitie sabloane ( templates ). Tot ce avem de facut este sa copiem textul pe care-l avem deja pregatit ntr-un editor text ( MSWord ), sa adaugam cteva imagini, legaturi si pagina web este gata. Binenteles ca se pot realiza si situri web mai complexe, dar pentru acest lucru avem nevoie de o documentatie despre editorul respectiv sau sa studiem cu atentie meniul Help. 2. Editoare n cod HTML Daca stim limbajul HTML si dorim sa editam o pagina web n mod profesionist, putem sa folosim aceste editoare. La fel ca si editoarele WYSIWIG, si acestea ne permit sa vizualizam cum va arata pagina web pe care o realizam. n plus, au o gramada de alte facilitati care ne usureaza munca de machetare si realizare a unei pagini web. Acest site a fost creat cu ajutorul urmatoarelor programe: Macromedia Dreamweaver MX 2004 (html, php) Total Commander 6.0 (ftp) HomeSite 5 (html, java script) TopStyle 3 (css) Adobe Photoshop 7.0.1 (grafica) Internet Explorer 6.0.2600 (browser) Opera 7.5 (browser) Nestcape navigator 7 (browser) Microsoft Office 2000 (pregatirea textelor)

Etapele de realizare unui site web

Baza oricarei afaceri pe internet este web-Site-ul. De realizarea acestuia depinde succesul afacerii si feedbackul de la toate actiunile ntreprinse de companie n retea. Din punct de vedere a marketingului WEB-SITE-ul- aceasta este adunarea blocurilor si instrumentelor informationale pentru conlucrarea cu unul sau mai multe segmente din ntreg auditoriul. Care informatie va fi prezentata pe site, care instrumente vor fi activate, cum acestea vor conlucra ntre ele toate acestea depind de modelul de afacere ales, obiectivele pe termen scurt sau lung, precum si de tipul segmentelor auditoriului total si posibilitatea conlucrarii cu ea dupa una sau alta metoda. Am citit mai demult un aforism atribuit lui Bill Gates (patronul Microsoft ) care mi-a placut foarte mult : "Before doing something perfect, do it perfectible." "Inainte de a face un lucru perfect, realizeaza ceva perfectibil." Acesta cred ca s-ar potrivi de minune la ntelegerea procesului de proectare a paginilor web.

Proiectarea unui site web

Proiectarea unui site web. Prin proiectarea unui site se ntelege procesul de realizare efectiva a paginilor web, pe calculatorul propriu. Pentru acest lucru este nevoie de imaginatie , dar si de cteva notiuni de webdesign fundamentale pe care le voi prezenta n paginile urmatoare : Planificare Machetare Programare

Planificare
Planificarea reprezinta procesul prin care ncercam sa definim n mod clar motivele pentru care dorim sa realizam un site web, ce mijloace avem la dispozitie pentru a realiza acest lucru, care va fi publicul tinta, etc. Aspectele pe care trebuie sa le luam n vedere atunci cnd planificam un site- web sunt urmatoarele : Scop Audienta Accesibilitate Continut Copyright Efecte speciale Feedback Obiectivul pe care-l urmarim atunci cnd proiectam un sit web poate fi urmatorul : pentru a nvata HTML pentru a crea un sit web personal pentru a putea intra n legatura cu alte persoane avnd aceleasi preocupari si interese pentru a ncepe o afacere online si a cstiga bani pentru a extinde o afacere clasica, desfasurata offline pentru a face publicitate prin intermediul Internet-ului

Machetare
Prin machetarea unei pagini web se ntelege modul cum sunt aranjate elementele constitutive ale unei pagini: continut, grafica, legaturi, sistem de navigare, elemente multimedia, etc. n cadrul aceluiasi proces de machetare se va analiza structura paginii. Pentru ca toate informatiile sa fie prezentate ntr-un mod atractiv si original, o pagina web poate sa fie simpla sau mpartita n : cadre tabele simple tabele multiple sau imbricate combinatie a acestor elemente Felul cum vor fi aranjate elementele componente ntr-o pagina web depinde numai de imaginatia si bunul gust al fiecaruia. E de dorit sa facem o buna impresie cu prima pagina. Aceasta trebuie sa fie deosebit de atractiva si interesanta si sa arate n mod clar ce contine restul sitului. Sa nu uitam ca dispunem de aproximativ 15 secunde pentru a capta atentia cititorilor. n general, vizitatorii nu vor sa fie bombardati numai cu oferte de vnzare ale unor produse sau servicii. ncercnd sa le oferim ct mai multe informatii si articole folositoare. Putem sa le oferim chiar si cadouri gratuite . Cand ncepem operatiunea de machetare a sitului, trebuie sa luam n calcul urmatoarele elemente stilul pe care-l vom imprima pe pagini. elementele componente ale unei pagini web continut grafica legaturi sistem de navigare elemente multimedia modul de mpartire n pagina cadre ( frames ) tabele

Programare
Dupa ce am terminat etapa de machetare, trebuie sa transformam toate informatiile pe care le-am acumulat ntr-o pagina web. Pentru acest lucru, trebuie sa avem instalat pe calculator instrumentul cu care se poate vizualiza un site web, browserul. Dupa aceea, avem nevoie de mai multe programe si utilitare. O pagina web simpla poate fi realizata folosind limbajul HTML. Daca nu cunoastem acest limbaj, nu este nici o problema. Putem construi pagini web folosind editoare HTML sau putem sa cautam situri unde ni se pun la dispozitie sabloane de pagini web. Mai avem nevoie de un editor grafic, pentru a putea realiza si prelucra imaginile pe care dorim sa le inseram n paginile web.