HTML, CMS in Jooml-a

Kopiranje virtualnega serverja

\\ru8-1\share\virtualka

Kreiranje delovnega direktorija D:\

Datoteke, ki jih je potrebno kreirat:

D:\Izdelovalec_spletnih_strani\Dusan_Brglez\prenosi

D:\Izdelovalec_spletnih_strani\Dusan_Brglez\Vaje

D:\Izdelovalec_spletnih_strani\Dusan_Brglez\Virtualaka_moja_stran

D:\Izdelovalec_spletnih_strani\Dusan_Brglez\Virtualka_vaje

Gesla in prijave

Prijava na linux server:Login: rootPassword:ormoz1234

Osnovni ukazi potrebni pri delovanju serverja

• UBUNTO SERVER KOMANDE:• Ifconfig (za ip preverjanje )• Help ali man + ke iščeš• Exit (odjava)• Restart ( resetiranje)• Shutdown –r 1 ( resetira za 1 min )• Mv ( premakni )• Compress (stisni datoteko)• Atp –get install + program • Cp (copy)• Vi –ed.t (pogled datoteke)• Halt (zaustavitev ubunto serverja)

Osnovni ukazi v vi editorju

Vi – ime datoteke<Cd><ime direktorija> - pomik po drevesu

direktorija<cd ...> pomik po drevesu direktorija nazaj <ESC>< I> – vnašanje teksta<ESC>< :><wq> - shranjevanje trenutnih nastavitev,<ESC><Ctrl><x> - brisanje enega znaka

<ESC>< :><q> - izhod brez shranjevanja sprememb

Internetni IP naslov za dostop do internetne strani

Iskanje IP naslova preko katerega lahko dostopamo do naše internetne strani in jooml-e.

Ugotavljanje delovanja apachi serverja

Npr: http://192.168.0.129/Izpiše se internetna stran,

ki potrjuje delovanje apachi serverja

Dostop do vaše spletne strani

http://192.168.0.129/joomla/

Ali npr:http://192.168.0.128/

joomla/

Dostop do vaše administratorske konzole

Prijava v spletno konzolo:- Uporabniško ime:

admin- Geslo: ormoz1234

Ubunto

Meni razširitve

Dodajanje template oz. predloge strani

Dodajanje strani na strežnik

Dodajanje predloge na vaš spletni server.

- Prebrskaj- Nasloži

datoteko&Namesti

Joomla

Omogočanje predlog

Prvo startanje interntne strani

Teorija HTML-aXHTML-a

Kaj je HTML?

HTML je kratica za HyperText Markup Language in je jezik za objavljanje na svetovnem spletu. Je podmnožica mednarodnega standarda za izmenjavo elektronskih dokumentov imenovan SGML (Standard Generalized Markup Language). Računalniki potrebujejo programsko opremo, da lahko ta jezik razumejo.

Kaj je XHTML?

XHTML je naslednji korak v razvoju jezikov, ki se uporabljajo za objavljanje v spletu. Je nadomestilo za odhajajoči jezik HTML. Je jezik, ki zadostuje vsem pravilom jezika XML. Dokumente XHTML 1 je mogoče napisati tako, da so popolnoma združljivi z različicami jezika HTML 4. V pripravi pa je že različica XHTML 2.

Zgodovina HTML

• HTML je iznašel Tim Berners-Lee. Popularen je postal šele po izdelavi brskalnika, ki je bil razvit v NCSA. Po skromnem začetnem obdobju (1990-93) je prišlo nato do eksplozivne rasti svetovnega spleta. V toku razvoja je prišlo do mnogih razširitev v raznih smereh. Svetovni splet ponuja avtorjem več možnih načinov za prikaz vsebin v spletu. To še spodbuja motivacijo za iskanje skupnih rešitev in standardov.

• HTML 2.0 (november 1995) je bil razvit pod iniciativo Internet Engineering Task Force (IETF) in se je pričel uporabljati konec leta 1994. HTML+ (1993) in HTML 3.0 (1995)

XHTML standard

• HTML, ki ji bil standardiziran 24.12.1999, nosi oznako 4.01. Naslednje različice jezika HTML imajo ime XHTML.

• W3C je bil pravzaprav popolnoma zaskrbljen kar se tiče prehoda, ki ga je bilo potrebno namestiti med HTML in XML. V maju leta 1998 je bila sklicana javna delavnica s predmetom pogovora o XHTML blizu San Francisca, California. Med dvodnevnim dogodkom so razvijalci svetovnega spleta, prodajalci programske opreme in avtorji priporočil za HTML in XML razpravljali, kako bi lahko prenesli HTML v svet XML. Rešitev, ki je bila predlagana, je bil prehodni jezik , ki bi zagotovil most med HTML in XML. Ta jezik je danes imenovan XHTML 1 -> XHTML 2.

Element

• Vsak element je sestavljen iz treh delov: začetne značke, vsebine in končne oznake.

• Značka (angl. tag) je besedilo, ki se nahaja med znakoma < in >. Zaključna značka vsebuje znak / takoj za znakom <. Npr. element span element vsebuje začetno značko, <span>, in zaključno značko, </span>. Začetna in zaključna značka omejujeta območje vsebine elementa span:

• <span>To je drugače oblikovano besedilo</span>

Vrste elementov

• Elementi so blokovni (block), če se obnašajo podobno kot odstavek. Takšni elementi dodajo prehod v novo vrsto samodejno. Običajno še dodajo prazen prostor pred in za elementom. Takšni elementi so preoblikovani p, h2, ol in neoblikovan div.

• Elementi so vrstični (inline, text-level), če se prikaz nadaljuje v isti vrstici. Takšni elementi ne dodajo prehod v novo vrsto niti praznega prostora okoli elementom. Takšni elementi so preoblikovani img, tt, input in neoblikovan span.

Odprte značke

Nezaključeni elementi v niso dovoljeni.V tem primeru se v začetno značko na koncu

napiše znak za zaključek značke </>. Pri tem je neznano zakaj nastal problem pri Netscape Navigatorju z narobe razumljenim ukazom <br/>. Nihče ne ve zakaj, ampak če je zapisano kot <br /> (s presledkom) deluje pravilno.

Atributi

• Atributi podrobneje določajo različne lastnosti elementov. Nahajajo se lahko izključn znotraj uvodne značke elementa HTML. Atribut ima svoje ime, ki je določeno s pravili W3C in vrednostjo, ki se vedno nahaja med narekovaji. Na primer, element img vsebuje atribut src, ki določa lokacijo (mesto) slike na pomnilniškem mediju, atribut alt pa določa nadomestno besedilo, če slika ne obstaja ali je ni mogoče prikazati.

• <img src="logo.gif" alt="logo" /> Atribute se vnaša samo v začetne oznake elementov v obliki

• ime_atributa="Vrednost atributa".

Kje vidimo npr. slike v Joomli

Npr. slika glave v joomli

Vrednosti atributov morajo biti med narekovaji

• Vrednost atributa se zapiše med enojne ali dvojne narekovaje. Uporaba narekovajev je obvezna.

• <img src=logo.gif alt=logo /> // to je narobe <img src="logo.gif" alt="logo" /> // to je pravilno <img src='logo.gif' alt='logo' /> // to je pravilno

• Nekateri atributi so obvezni (za element img src in alt), nekateri pa so opcijski (za element img width, height...)

Vrednosti atributov z merami v pixlih so napisane brez enote

• Za širini slike 300 pisklov in višino 200 pikslov: • <img src=logo.gif alt=logo width="300pix"

height="200pix" /> // to je narobe <img src=logo.gif alt=logo width="300px" height="200px" /> // to je narobe <img src=logo.gif alt=logo width="300" height="200" /> // to je pravilno

• V primeru, da so iste lastnosti določene s slogovnimi predlogami in atributi HTML, imajo prednost slogovne predloge CSS.

Tipi dokumentov XHTML

Kaj je CMS?

CMS so sistemi za upravljanje spletnih vsebin in olajšajo pripravo in administracijo vsebin. Obravnavan CMS, Joomla je nagrajen in zmagovalen CMS, ki nam pomaga »graditi« spletne strani s pomočjo raznih dodatnih spletnih aplikacij v obliki modulov in komponent..

Kaj je CMS?

Content Management Systems (CMS) ali slovensko sistemi za upravljanje spletnih vsebin olajšajo pripravo in administracijo vsebin (besedil, slik, novic...) za časopise, skupinske portale, portale podjetij, Intranet.. Primarno so jih razvijali za interaktivno uporabo z potencialno možnostjo distribucije.

Vsebinsko upravljanje vsebuje računalniške datoteke, ki so lahko audio, film, slika in elektronske. Druga, sekundarna ideja je bila, da jih uporabljamo lahko za med-pisarniško uporabo ter tudi celotnem spletu.

Danes imamo veliko pondnikov različnih CMS sistemov za naslednje namene: blogi, forumi, portali, spletne predstavitve, galerije.

Zakaj CMS?

• Omogočajo hitro in enostavno namestitev,• urejanje vsebin preko različnih spletnih brskalnikov,• dodeljevanje pravic upravljanja glede na želje administratorja,• prilagodljivost na uporabnika,• upravljanje brez potrebnega predznanja spletnih jezikov do

določene mere,• hitra sprememba zunanje podobe strani,• dosegljivost• neodvisnost od operacijskega sistema,• zmanjševanje stroškov vzdrževanja,• podpiranje večjezičnosti.

Joomla

Namen Joomle!

Joomla je nagrajen in zmagovalen CMS, ki nam pomaga »graditi« spletne strani s pomočjo raznih dodatnih spletnih aplikacij v obliki modulov in komponent. Najbolje pri njej je, da je odprtokodna, ter je dosegljiva vsakomur.

Uporabimo jo lahko za preproste osebne, kakor tudi zahtevnejše predstavitve.

Namestitev

• Za namestitev Joomle na operacijskem sistemu Windows potrebujemo naslednje tri pripomočke:

• Apache• MySQL• PHP 4.1.2 najmanj

• ali uporabimo paket, ki to vse že vsebuje in se imenuje xampp . Jaz sem se za prvič odločila za paketek, ki vsebuje vse potrebno, zato bom napisala, kako naredimo to z xamppom.Ko smo ga prenesli s strani, ga razparkirali na lokalni disk, sledi…

Server, kjer namestimo Joomlo

Ubunto server 10.X

Lokalna namestitev Joomle

Najprej si z naslednjega spletnega naslova http://www.joomla.org/ naložimo na disk zadnjo stabilno verzijo Joomle, ki jo odzipamo, preimenujemo ( npr. Joomla100 ) in prenesemo v npr. C:\xampp\htdocs\Joomla100. Nato zaženemo brskalnik v katetega vpišemo sledeči naslov: http://localhost/Joomla100 in se nam prikaže slika na desniVmes moramo imeti zagnan xampp, zaradi apache serverja in mysql. Če imate slučajno izklopljeno, se Vam bo javil napake in ne bo spustil naprej ali se stran morda sploh ne bo prikazala.

Primer:

Apache • Vmes moramo imeti zagnan xampp, zaradi apache serverja in mysql. Če imate

slučajno izklopljeno, se Vam bo javil napake in ne bo spustil naprej ali se stran morda sploh ne bo prikazala.V naslednjem koraku moramo izpolnitnekaj obrazcev, ki so:– hostname - localhost– MySQL - root– MySQL Password - pustimo prazno, zaradi varnostnega rizika– MySQL Database Bame - Joomla100– MySQL Table Prefix - predponi jos_ dodamo poljubno besedo– označimo še Install Sample Data, saj če nameščamo prvič ne potrebujemo back upov

• V tretjem koraku vpišemo ime spletne strani, na kateri bo joomla “stanovala”. Nato še imamo za izpolnit:– URL naslov– Pot kjer je nameščena Joomla npr: C:\xampplite\xampp\htdocs\Joomla100.

• V zadnjem koraku preden zagledamo nameščeno Joomlo odstranimo inštalacijsko datoteko, po imenu instalations, nato pa veselo na delo.

Namestitev Joomle na strežnik• Potrebujemo naslednje osnovne potrebščine• FTP client, ki je lahko poljuben, vendar jaz najraje uporabljam

smartFTP.• naslov ftp serverja, na katerem bo joomla nameščena• uporabniško ime in geslo serverja, na katerem bo joomla

nameščena.• Nato se z FTP clientom povežemo na strežnik, nato z diska, kjer

imamo razpakiran Joomlin .zip file prenesemo na strežnik. Nato odtipkamo svojo domeno, kjer se nam pojavi naslednja slika.

• Kjer preverimo in si skušamo zapomniti čim več podatkov, saj tukaj so zapisana prioritete strežnika. Nato kliknemo v zgornjem desnem robu gumb Next. Kjer nas pričaka licenčna pogodba.

Pre-instalacija

Joomla

• Nato preidemo na korak (step1), kjer moramo napisati naslednje podatke:– Server: mysql.imeserverja.net– Database: ime baze – Username: uporabniško ime – Password: geslo

• Nato moramo še vpisati ime strani, ki je lahko poljubno. In z ponovnim pritiskom na gumb Next nadaljujemo nameščanje.

Končna nastavitev

• V tretjem koraku zapišemo URL naslov Joomle, pot, svoj elektronski naslov in administratorjevo geslo. Ponovno nadaljujemo z Next. In tako pridemo še do zadnjega četrtega koraka našega nameščanja. Kjer verjetno ne boste morali narediti ničesar, vendar pri meni se ni želel narediti sam configuration.php, zato sem ga prepisala ročno.

• V programu dreamweaver sem odprla lokalno configuration.php mapo in vsebino iz četrtega koraka prenesla v del, kjer mora bit. Nato še samo zbrišemo mapo instalation in smo nalogo opravili.

Kako naredimo template ?

• Kaj potrebujemo, da naredimo lasten template za Joomlo?

Vsekakor kar nekaj CSS znanja in dodatek, ki ga namestimo in uporabljamo v Adobe Dreamweaver. Ta dodatek se imenuje Joomla Solutions in ga najdemo na naslednji spletni strani: http://joomla-cms.dk/joomla-15-dreamweaver-extension/ .

• Osnovne stvari, ki jih potrebujemo za template je ena mapa, ki jo lahko poimenujemo po lastnem projektu npr. AnitaSun.net

Datoteke na sistemu

TemplateDetails.xml

V XML datoteko TemplateDetails moramo vpisati vse slike, vse datoteke, ki smo jih pri izdelavi predloge uporabili.

Index.html

Je lahko popolnoma prazna datoteka, vendar jo jaz uporabim v drug namen. Namreč najprej si stran naredim v html-ju in CSS. Nato vsebino strani pobrišem in s pomočjo Dreamweaver extension vstavim stvari, ki še primanjkujejo.

Zakaj CMS? Omogočajo hitro in enostavno namestitev, urejanje vsebin preko različnih spletnih brskalnikov, prilagodljivost na uporabnika, upravljanje brez potrebnega predznanja spletnih jezikov do

določene mere, hitra sprememba zunanje podobe strani, neodvisnost od operacijskega sistema,...

CMS Joomla

Kako popestrimo spletno predstvitev Za popestritev spletne strani oziroma za bolj nazorno in lažjo uporabo in prikaz spletnih predstavitev uporabimo komponente in module. Le te lahko napišemo sami ali odkupimo.

Komponente in moduli

V kolikor želimo našo Joomlo uporabiti kot spletni portal ali zahtevnejšo spletno predstavitev, smo se bolj ali manj primorani poslužit raznih dodatkov. Ti dodatki so lahko tudi za večjezičnost, galerije, prijavni moduli,... Tudi te module lahko sami napišemo ali odkupimo. Vrsto uporabnih in zanimivih najdemo tako na uradni, kakor tudi na slovenski Joomla strani.

Dodajanje komponent

Ko smo si izbrali komponento, si jo prenesemo na lokalni disk, se prijavimo kot administrator in gremo pod Installers.

Kjer izmed vseh ponujenih dobrot izberemo Components

Preden karkoli še naredimo, moramo preveriti je, da imamo tak zapis kot nam prikazuje spodnja slika.

• Namreč šele takrat nam bo vse delovalo tako kot mora. V primeru, da imate prepoved, morate odpreti Ftp Client, Poiskati CHMOD, ki izgleda takole:

• V primeru, kot je na sliki zgoraj, boste morali odkljukati še v « Groupi » in » Others« checkbox write. Ko boste naredili to se bo v »Permissions« izpisala številka 777.

Označimo še Apply changes to this folder, subfolders and files, da naredimo spremembe po celi mapi. In kliknemo na ok.

Nato naložimo komponento, tako da kliknemo na Browse, izberemo komponento in jo z klikom na Upload&Install namestimo.

Odstranjevanje komponent

• Kakor smo komponento namestili, tako jo lahko samo v parih korakih tudi odstranimo.

• V prvem koraku najprej označimo komponento, ki je ne želimo več imeti in nato z gumbom Uninstall v desnem zgornjem robu odstranimo.

Nameščanje modulov

Ko smo si izbrali modul, ga prenesemo na lokalni disk, se prijavimo kot administrator in gremo pod Installers, kjer izberemo Module, tako kot je prikazano na sliki na desni.

Kjer ravno tako preverimo, če imamo vse obcije na Writeable. V kolikor nimamo, to spremenimo, tako kakor smo to naredili pri komponentah. Nato kliknemo na browse, kjer poiščemo modul, ki ga želimo namestiti, ga označimo in ponovno kliknemo na Upload&Install. Če smo pravilno namestili modul, dobimo takšen le izpis:

Ko smo uspešno namestili Joomlin modul, ga moramo še urediti v Module site, kjer mu povemo na kakšni poziciji (user1...9, top, bottom,...) se bo pojavljal ter katerim uporabnikom bo dostopen (registriranim, javno,...).

JezikiEna izmed zelo dobrih lastnost Joomle

je tudi ta, da podpira možnost namestitve jezika. Jezike v Joomli nameščamo s pomočjo istega čarovnika, kakor za komponente in module.Gremo v meni Installers, Languages, kliknmo na Browse, kjer nato izberemo željeni jezik. V .zip datotekuter kakor že poprej izberemo tipko Upload&Install. V kolikor je jezik pravilno zapakiran se vam mora pojaviti zaslon: Upload template - Success. S klikom na Continue ... se nam odpere Language Manager.

Zaključek

• Nameščanje komponent, modulov in jezikov:• Po izbiri določene komponente (modula ali

jezika), le to prenesemo na lokalni disk. Prijavimo se kot administrator in jo intaliramo pod Installers in Components (Modules ali Languages).