ponedeljek, 6. december 2010

css Zen Garden

css Zen Garden je spletna stran (http://www.csszengarden.com/), na kateri lahko preizkusiš svoje znanje o oblikovanju spletnih strani. Pokazal vam bom, kako sem se naredil svoj stil za css Zen Garden.

Na spletna strani css Zen Garden (link zgoraj) kliknemo z desno tipko miške in nato izberemo "Pokaži izvorno kodo strani". (Slika 1) (to je pri Firefox-u, pri explorerju je pa "Ogled izvorne kode") 
Slika 1
Odpre se nam okno z izvorno kodo strani (to je html vsebina). Besedilo prekopiramo in ga prilepimo v beležnico. Shranimo. (Slika 2)
Slika 2
Nato gremo na povezavo http://www.csszengarden.com/zengarden-sample.css in prekopiramo besedilo, ki nam je dano in ga prilepimo v novo beležnico. Shranimo. V mapi, v katero smo shranili naš css, kliknemo "Organiziraj" in nato "Možnosti mape in iskanja". (Slika 3)
Slika 3
V oknu, ki se nam odpre, gremo pod zavihek "Pogled", kjer odkljukamo kvadratek pri "Skrij pripone za znane vrste datotek". (Slika 4)

Slika 4

Tekstovno datoteko, ki vsebuje css, preimenujemo končnico iz .txt v .css. Npr.: iz primer3.txt, ga spremenimo v primer3.css. Nato obkljukamo kvadratek, ki smo ga prej odkljukali (Slika 4).

Z beležnico odpremo html datoteko. Na začetku beležnice spremenimo kodiranje (iz iso-8859-1 v utf-8) in malo nižje, pri @import, pa napišemo ime naše .css datoteke (Npr.: "primer3.css"). To pomeni, da kljub temu, da sta datoteka html in css ločeni, bo spreminjanje css datoteke vplivala na datoteko html. (Slika 5)
Slika 5
Preden začnemo urejeti našo css datoteko, pa si preberemo, kako se uporablja css, na spletni strani: http://www.w3schools.com/css/default.asp.

Ko končamo z urejanjem spletne strani css Zen Garden, jo pošljemo urednikom Zen Garden-a. Na spletni strani http://www.csszengarden.com/, desno spodaj kliknemo na povezavo "Submit a Design". (Slika 6)
Slika 6
Prikaže se nam obrazec, ki ga moramo izpolniti. Če pa česa ne vemo, potem kliknemo na vprašajček poleg praznega polja. Pri "Submission Preview" nam pove, da moramo na nek strežnik naložiti svojo .css datoteko. Jaz sem naložil na http://www.drivehq.com/. (Primer moje .css datoteke na internetu: https://www.drivehq.com/file/df.aspx/shareID7884427/fileID619152599/primer3.css ). Pri "Zip Archive URL" pa "zazipamo" našo .css datoteko in vse slike, ki smo jih uporabili, pri oblikovanju. (Primer: https://www.drivehq.com/file/df.aspx/shareID7884476/fileID619156780/csszengarden.zip). Pri "Your submission's title" pa preprosto vpišete naslov vaše strani. Primer: cssZenGarden. (Slika 7)
Slika 7
Pošljemo in večkrat preverimo, ali je naš "design" objavljen. Moj "design": http://www.csszengarden.com/?cssfile=https://www.drivehq.com/file/df.aspx/shareID7884427/fileID619152599/primer3.css

Viri:
- http://www.csszengarden.com/
Avtor ob Ni komentarjev:

sobota, 27. november 2010

XHTML in Onclick

Definicija: onclick je dogodek, ki se uporablja za opredelitev ukrepov, ki jih je treba sprejeti, ko kliknemo z miško.

Pokazal vam bom kako lahko z onclick-om spremenimo napis in ozadje.

Prvo si naredimo spletno stran: http://sposoben.blogspot.com/2010/11/xhtml.html

Za spremembo ozadja in napisa v glavo dokumenta vpišemo besedilo, ki se začne z script <type="text/javascript"> in konča z </script>, kot kaže na spodnji sliki. V mojem pirmeru so moje barve črna, rjava in siva, besedilo pa je Pozdravljeni.

function changebackground in function changetext(id)

V telo (<body>) vpišemo <p1 onclick="changetext (this)">Klikni me!</p1>, kjer se bo s klikom na besedilo "Klikni me!", prikazalo "Pozdravljeni". In za spremembe ozadij, isto v telo (<body>), napišemo besedilo, ki je napisano na spodnji sliki.

Napis za spremembo barve ozadja. Pri value lahko napišemo poljubno besedilo (mora biti v navednicah), ne pa tako, kot je prikazano na sliki.
Ko sestavimo spletno stran, jo shranimo kot primer.html (končnica mora biti .html). Povezavo do moje spletne strani lahko najdete na dnu tega članka. 
Za naložit spletno stran gremo na http://www.thefreesite.com/Free_Web_Space/, kjer so zastonj strani in izberemo poljubno. Jaz sem izbral "ZeroCatch". (Slika 1)


Slika 1


Na njihovi spletni strani: http://www.0catch.com/ kliknemo na "SIGN UP" (Slika 2), kjer nato izberemo naslov našega URL naslova. Npr.: http://primer.0catch.com. (Slika 3)
Slika 2
Slika 3
Izberemo "Plan #1 Free" in kliknemo "Continue With Signup >>". (Slika 4)
Slika 4
Pod oglasom kliknemo "No Thanks, a FREE site will be fine". (Slika 5)
Slika 5
Izpolnimo podatke in klik na "Create Your Account". Nato se prijavimo na prvi strani s svojim uporabniškim imenom in geslom, ki smo si ga izbrali. (Slika 6)
Slika 6
Izberemo "File Uploader". (Slika 7)
Slika 7
Nato poiščemo svojo html datoteko in jo naložimo (uploadamo), da se pokaže v desnem okencu pod našim URL naslovom in nato pod tem kliknemo na "RETURN TO 0catch.com USER MANAGER". (Slika 8)
Slika 8
Kliknemo "HTML File Manager". (Slika 9)
Slika 9
Našo html datoteko spremenimo v "index.html" in nato ponovno klik na "Return to User Manager". (Slika 10)
Slika 10
Sedaj vpišemo svoj URL naslov v brskalnik in lahko vidimo svojo spletno stran. Moja spletna stran: http://sposoben.0catch.com/
Avtor ob Ni komentarjev:

Dodajanje tem na Wikipediji

Prvo si izberemo temo o kateri bomo pisali in preverimo, da še ni objavljena na Wikipediji: http://sl.wikipedia.org/wiki/Glavna_stran. Nato se na njihovi strani registriramo (desni zgornji kot) in potem ko končamo registracijo, prijavimo. Če že imamo uporabniško ime in geslo, registracija seveda ni potrebna.

Priporočljivo je prebrati pravila in smernice Wikipedije, da ni nepotrebnih težav. (Slika 1)

Slika 1
Nato se vrnemo na glavno stran, kjer kliknemo na "ureja vsakdo". (Slika 2)

Slika 2
V zavihku "Uvod" kliknemo na "Peskovnik", kjer se lahko poigravamo z našim besedilom in vidimo kako izgleda oz. bi izgledalo, ko bi bilo objavljeno.

Slika 3
Vrnemo se na zavihek "Uvod" in nato nadaljujemo na naslednjega "Naučite se več o urejanju". Preberemo o urejanju strani, potem pa kliknemo na "vaš prvi članek". (Slika 4 in 5)
Slika 4
Slika 5
V prvem koraku izberemo o čem bo govoril naš članek. (Slika 6)

Slika 6
V drugem koraku lahko preverimo, ali ta članek že obstaja, o katerem želimo pisati, v tretje pregledamo splošna pravila, četrtem koraku vpišemo svoj naslov članka in kliknemo na "Ustvari članek!". V mojem primeru je to "Splet 2.0". (Slika 7)
Slika 7
V petem koraku preberemo še nasvete, nato napišemo članek in kliknemo "Shrani stran". (Slika 8)
Slika 8
Ko to naredimo, malo počakamo, da ga uredniki Wikipedije pregledajo. Čez čas preverite vaš članek pri s klikom na "Zadnje spremembe" in vidite kaj so naredili. (Slika 9)
Slika 9
In če je s člankom vredu, ga lahko poiščete na Wikipediji. Moj članek: http://sl.wikipedia.org/wiki/Splet_2.0
Avtor ob Ni komentarjev:

ponedeljek, 22. november 2010

OpenOffice Writer

Predstavil vam bom kako se spreminja vsebina v programu OpenOffice Writer v operacijskem sistemu Ubuntu.


Odpremo OpenOffice.org Writer (Applications --> Office --> OpenOffice.org Word Processor) in v njega napišemo poljubno besedilo. Shranimo. (Slika 1 in Slika 2)


Slika 1
Slika 2

Na shranjeno datoteko Primer.odt kliknemo z desno tipko miške in nato z levo tipko na Open With Archive Manager. Odpre se nam okno z raznimi datotekami in xml dokumenti (ne zapiramo, dokler ne spremenimo vsebine in shranimo).(Slika 3)

Slika 3
 
Z desno tipko miške kliknemo na style.xml in nato Open with... V oknu, ki se nam odpre Open Files, izberemo gedit, nato Open. (Slika 4)

Slika 4

Odpre se vsebina naše datoteke Primer.odt, kjer v njej lahko spreminjamo vsebino. Primer: Namesto Liberation Serif napišemo Arial (Slika 5). Shranimo (v oknu File Roller kliknemo Update (Slika 6)) in zapremo vsak okna.

Slika 5

Slika 6
Ponovno odpremo Primer.odt in lahko vidimo, da se je spremenila pisava. (Slika 7)

Slika 7
Enako lahko naredimo s OpenOffice.org Calc (Applications --> Office --> OpenOffice.org Spreadsheet) in OpenOffice.org Impress (Applications --> Office --> OpenOffice.org Presentation). Vendar lahko vidimo, da Calc in Impress nimata datoteke manifest.rdf. 
RDF (Resource Description Framework) je ustvarjanje meta-podatkovnih struktur, ki določajo podatke na spletu. Zasnovan je tako, da zagotovi metode za razvrščanje podatkov o spletnih mestih, da bi izboljšali iskanje in navigacijo. Izvaja se v XML. Strukturiran je kot eno ali več trojic: (1) predmet (o čem so podatki), (2) lastnost (atribut predmeta), (3) dejanske vrednosti.
OpenOffice Calc

OpenOffice Impress
Avtor ob Ni komentarjev:
Naročite se na: Objave (Atom)