Zaobljeni robovi - the easy way

Mehki, zaobljeni robovi izgledajo šik in oh-in-sploh, vendar so precej zafrknjeni za jih narediti. Zakaj? Ker večinoma to rešujemo s fizičnimi sličicami robovov, ki se nahajajo na vogalih (rešitev na to temo je en kup, vendar nobena ni tako enostavna kot spodnja).

S CSS3 prihaja tudi značka border-radius, s katero na precej preprost način naredimo zaobljene robove. Žal (češ, da ni standardizirana) deluje samo v Firefoxu/Safariju/Chromeu, ne pa tudi v Internet Explorerju. Uporabniki le-tega namesto zaobljenih robov pač vidijo navadne kote. Glede na to, da upoarbniki IE počasi postajajo manjšina (v Sloveniji) in da bodo najbrž slej kot prej tudi pri Microsoftu pogruntali oz. uvedli kakšno tako rešitev, si boste na ta način prihranili precej dela in obenem vsaj delno rešili težavo.

P.S. Za ostale rešitve, se obrnite na strica Googlea.

Prenosnik se mi pregreva - čiščenje prenosnika za telebane :)

Vem, da nisem ravno človek, ki bi se lahko hvalil s pravilnimi metodami čiščenja, vendar menim, da bo komu znal tale zapis priti prav. Pri prenosnikih se rado zgodi, da se začnejo pregrevati, zaradi česar potem delujejo p-o-č-a-s-n-e-j-e. Odvisno od tipa prenosnika, a pri večini bomo našli na spodnji strani rešeto in ventilator, ki deluje kot nekakšna črpalka in nato piha hladen zrak skozi vroča hladilna rebra ter jih tako hladi.

Kako veste, če je vaš prenosnik potreben čiščenja?
- ohišje je na mestih, kjer so hladilne reže in procesor tako vroče, da vas opeče (sploh pri AMD procesorjih)
- ventilator v prenosniku deluje večino časa in je zaradi tega prenosnik zelo glasen
- vaš prenosnik deluje počasi in ste 100% prepričani, da to ni krivda Viste, spywarea ali česa podobnega
- prenosnik se vam vsake toliko sam od sebe ugasne (bog ne daj)

Skratka, sam sem imel težavo z umazanimi hladilnimi rebri kar nekaj časa, čeprav mi sprva sploh na pamet ni prišlo, da bi lahko bilo to krivo za počasnost prenosnika. Po temeljitem skeniranju za škodljivimi programčki, čiščenju registrov, start-upa, defragmentaciji, tweakanju Viste itd. je zadeva še vedno delovala počasi, zato ni bilo druge kot prijeti v roke izvijač in se lotiti dela Prenosnik je še vedno v garanciji, ampak glede na to, da je že cel pobunkan in pretepen (je pač delovni prenosnik), mi je najverjetneje tako ali tako ne bi priznali. Vi pa bodite previdni, da česa ne preveč popraskate ali ne strgate katere od nalepk. Moje mnenje takšno, da bi garancija morala v tem primeru še vedno veljati oz. da bi to lahko naredil vsakdo doma in mu ne bi bilo potrebno plačevati servisa za tako malenkost.

Skratka, na spodnji strani odšraufamo nekaj vijakov, nato pa z nekaj Newtni sile počasi začnemo odpirati plastiko, ki zakriva večji del drobovja prenosnika (slika1). Odpre se nam pogled na večji del matične plošče s procesorjem, ventilatorčkom in hladilnimi rebri, kar je vse, kar nas trenutno zanima (slika2).

Procesor se med delovanjem izredno segreje, zato potrebuje hlajenje. Na stacionarnih računalnikih je pri zmogljivejših računalnikih to rešeno z velikim hladilnikom, za katerega pa prenosniki nimajo prostora. Zato so tam hladilna rebra, ki nato po bakrenih ceveh (rebrih) prevajajo toploto do hladilnih reber na robu ohišja prenosnika, katere hladi ventilatorček. Če so hladilna rebra zapacana oz. jih hladen zrak ventilatorčka ne doseže, potem se ne hladijo, kar rezultira v višjih temperaturah procesorja, počasnejšem delovanju, večji porabi energije (baterije) in nenazadnje v krajši življenski dobi procesorja.

Naslednje, kar moramo storiti je odviti vijake na ventilatorčku, ventilatorček umakniti (lahko ga tudi izklopimo iz napajanja preko matične plošče, da boste psihično bolj mirni, da vas ne more nič stresti - prav tako lahko vržete ven baterijo prenosnika ;)) ter si ogledati hladilna rebra, ki so po vsej verjetnosti zapacana. Tako hladilna rebra kot ventilatorček očistimo (lahko si pomagamo s palčko za ušesa in kakšno suho krpico) in delo je opravljeno. Ventilatorček prišraufamo nazaj, isto naredimo s plastiko, nato pa prenosnik zaženemo in občutiti bi morali razliko v delovanju

slika1

slika2

[vodič]: Kako je zgrajena spletna stran?

Dejansko vam bom danes pokazal samo malo razširjeno verzijo tistega, kar sem napisal v moji zaključni nalogi, katero najdete na http://www.zakljucna.lajf.net. Na primeru spletne strani Turistične kmetije Arkade si bomo ogledali zgradbo le-te….

Že pri načrtovanju spletne strani si moramo zamisliti, kako bo naša spletna stran zaživela. Tudi sam, ko oblikujem neko spletno stran, že razmišljam o tem, kako bom stran razrezal, kje bom postavil kaj, kakšne elemente, ali bo dovolj prostora za dolge besede, itd. V osnovi navadno, statično spletno stran lahko razdelimo na tri dele:

a) HTML datoteke, ki so dejansko naše strani z vsebino
b) datoteke s slikami, ki skrbijo za izgled naše strani
c) fotografije/slike, ki so vnešene v našo spletno stran
d) CSS datoteka (ni nujno)

To lahko opazite na spodnji sliki:

V osnovni mapi imamo tudi 3 podmape, prva vsebuje elemente iz katerih je sestavljena oblika spletne strani (images), druga in tretja pa vsebujeta elemente orodne vrstice (ena v slovenskem jeziku, druga pa v angleščini).

Vsebina mape images (z elementi, ki sestavljajo dizajn strani):

Vsebina mape orodna (z elementi orodne vrstice v slovenščini):

Obliko te strani pa sestavljajo tudi drugi elementi, ki jih najdete v osnovni mapi oz. na prvi sliki zgoraj:

crta.jpg - skrbi za omejevanje strani in “priključek” fotografij na levi strani (Vinska kraljica, Google Maps, Gospodarjevi recepti)

flash.swf - element z animacijo na dnu spletne strani

obiskovalci1 & 2 & vmes.jpg - elementi, ki sestavljajo zeleni okvirček, kjer so predstavljena mnenja obiskovalcev

ozadje.jpg - fotografija za ozadje spletne strani

video_foto.jpg - nežen preliv, ki poudarja razne dele teksta (recimo Urnik na prvi strani)

———————————————————

Sedaj, ko smo se pobližje seznanili z elementi spletne strani, pa je čas, da si pogledamo, kako te elemente pravzaprav združimo v spletno stran. To naredimo v enem izmed urejevalnikov spletnih strani (Dreamweaver, FrontPage ali pa recim o brezplačen Trellian WebPage). 

Tudi tukaj v tem primeru poznamo tri načine umestitve slik/elementov v spletno stran:
- kot sliko
- kot ozadje
- kot rollover sliko

Najpreprosteje vam lahko te tri načine razložim tako…

- Sliko kot sliko uporabimo v primeru, ko ne želimo imeti nečesa, kar bi se ponavljalo ali se spreminjalo, ko bi šli z miško čez. V tem primeru so to vse tri zastavice (ki so obenem tudi gumbi brez roll-over), napis “Turistična kmetija Arkade”, ostale slike v glavi (razen gumbov FOTO in VIDEO) in razne fotografije na spletni strani. Tovrstne slike lahko vsebujejo povezavo ali pa tudi ne.

- kot ozadje je uporabljena crta.jpg, ki se ponavlja navzdol vzporedno z vsebino/teksti na spletni strani in slikami na levi (Vinska kraljica, Google Maps, Gospodarjevi recepti) in pa obiskovalci_vmes.jpg, ki se ponavlja glede na velikost mnenja obiskovalca (tukaj bi lahko namesto slike uporabil tudi identično zeleno barvo za ozadje celice = isto)

- rollover slike se spreminjajo, ko gre miška čeznje. Navadno se uporabljajo za gumbe (v tem primeru v orodni vrstici in VIDEO ter FOTO) ali za razne efekte (preprosta animacija). To upoštevamo že pri oblikovanju spletne strani, zato pripravimo eno različico slike, ki se bo prikazovala ves čas in drugo, ki se bo prikazala namesto prve takrat, ko bo miška prišla na prvo

Vse te elemente seveda združimo v enem izmed že naštetih programov, posebej pozorni bodite predvsem na postavitev celic/tabel in elementov, ki jih le-te vsebujejo:

a) glava strani

(zastavice in orodne vrstice so sestavljene iz več slik - ene za drugo, četudi se tukaj ne zdi tako)

b) telo strani

c) noga strani

Sedaj pa vas vabim k branju mojega vodiča, ki sem ga napisal za zaključno nalogo in marsikatera stvar vam bo bolj jasna. Vsega tokrat seveda nismo in tudi ne bi mogli povzeti, vendar saj imamo še čas Vsekakor sta potrebna praksa in izkušnje za postavitev malce obsežnejših spletnih strani, vendar če boste razumeli princip in začeli s preprostimi zadevami (ki lahko prav tako izgledajo zelo lepo ali celo še lepše kot kaj zahtevnejšega) kot je recimo tista spletna stran iz moje zaključne naloge, potem ne dvomim, da se boste po nekaj lažjih projektih z veseljem in uspešno lotili tudi kakšne zahtevnejše zadeve.

[vodič]: Pota interneta

Dejansko to ni pravi vodič vodič, ampak zanimivo dejstvo o delovanju interneta.

Če primerjamo standardno telefonijo in internet, lahko ugotovimo, da gre za dve dokaj različni zadevi. Pri telefoniranju se nam linija od naslovnika do prejemnika vzpostavi po določeni poti in je aktivna ves čas trajanja zveze. Pri internetu pa se linija v tem pomenu ne vzpostavi, ampak mi samo “butnemo” neke podatke v omrežje, kopica ostalih omrežnih naprav (stikal, routerjev, strežnikov) pa poskrbi, da ti (označeni) podatki pridejo do pravega naslovnika. Kje potujejo naši podatki, pa lahko v Windowsih preverimo z ukazom “tracert” (traceroute).

Gremo pod START - Run - cmd (Vista: START - in v polje za iskanje vpišemo cmd), nato se nam odpre ukazna vrstica. Vanjo napišemo ukaz tracert google.com in počakamo nekaj trenutkov.

Začnejo se nam izpisovati podatki o vseh korakih (dejansko so to zgoraj omenjene naprave), ki jih naši podatki/paketki naredijo dokler ne pridejo do Google.com

V spodnjem primeru lahko opazimo, da so moji podatki potrebovali do Googla 19 korakov:
1.) moj router
2.) tukaj stopi v igro Internet Service Provider (ISP) - v mojem primeru Kabelska televizija Nova Gorica
3.) Kabelska televizija Nova Gorica preda moje podatke naprej, podjetju Softnet, ki skrbi za informacijsko strukturo in le-ta skrbi za moje podatke do trenutka, ko zanje začne skrbeti Google. Nato ti podatki še skačejo po raznih Googlovih strežnikih/napravah, dokler ne pridejo na končni naslov.

Internet ne pošilja podatkov vedno po isti poti (zato tudi ni rečeno, da bodo podatki, ki smo jih poslali prej tudi prišli prej na cilj), kar lahko preverite tako, da večkrat izvedete ukaz tracert za isto domeno in preverite, če se koraki ujemajo. V večini primerov se ne bodo.

Da si boste lažje predstavljali vso to zadevo, pa si poglejte še spodnji filmček o internetu z naslovom “Warriors of the Net”:

[vodič]: Poznan Web 2.0 efekt

Prepričan sem, da ste že kdaj srečali kakšnega izmed teh logotipov oz. efektov, uporabljenih na teh logotipih, ki so pogosto uporabljeni na raznih spletnih straneh. Danes se bomo ukvarjali samo s tistim delom, ki je pod logotipom, v enem od naslednjih vodičev, pa si bomo pogledali tudi trike/maskiranja, ki jih lahko izvedemo nad samim logotipom. V Photoshopu je efekt pod logotipom precej preprosto doseči…

1.) V Photoshopu si odpremo nov dokument z belim ozadjem, ki naj bo recimo dobro tretjino višji kot je logotip/grafika, ki jo želimo prekopirati v ta dokument. Sam sem si izbral tale Škodin logotip, ki je višine 306 px, zato sem moj dokument naredil 400 pikslov visok, tako da bom imel spodaj prostor za efekt. Logotip prekopiramo v Photoshop in ga postavimo na vrh dokumenta, nato pa izberemo orodje Magic Wand Tool (sam imam navadno nastavljeno Tolerance (zgoraj) na 17, lahko pa se malo poljubno poigrate) s katerim kliknemo nekam na belo v okolico logotipa, tako da označimo vse ostale dele slike, ki niso logotip (načinov za to narediti je cel kup, ta je eden od preprostejših - vodič o tem še pride). Pritisnemo Delete in okolica logotipa je izbrisana. Vsi pomembni deli so označeni z modro v spodnji sliki.

2.) Kliknemo na logotip, nato pa držimo tipki ALT (kopiraj/duplicate) in SHIFT (premikaj v isti smeri, laično rečeno) in nato duplikat logotipa počasi povlečemo pod originialni logotip. Sedaj imamo še en nov Layer, ki vsebuje kopijo našega logotipa. Izberemo Edit -> Transform -> Flip Vertical (obrni navpično), ki nam kopijo logotipa obrne tako, da izgleda zrcalno na originalni logotip.

3.) Kliknemo na gumb “Edit in Quick Mask Mode” (spodnja modra označba na spodnji sliki), nato izberemo Gradient tool (druga modra označba na spodnji sliki) in nato še izberemo preliv “Črna v belo” (zgornja modra označba na spodnji sliki).

4.) Z Gradient toolom označimo tiste dele kopije logotipa, ki jih želimo ohraniti, kot je prikazano na prvi spodnji sliki. Ko zadevo označimo, moramo dobiti nekaj takega kot je prikazano na drugi spodnji sliki. Spet kliknemo na orodje “Edit in quick mask mode”, kjer sedaj piše “Edit in Standard Mode”. Sedaj imamo označen spodnji del kopije originalnega logotipa, zato pritisnemo DELETE, ki nam izbriše označeni del na način, da se izbrisani del počasi preliva v ozadje (ki je v mojem primeru belo).

5.) Pravzaprav smo sedaj končali. Navadno se kopiji logotipa doda še malo prosojnosti (Transparency)… sam sem nastavil na 60% (slika spodaj).

6.) Shranimo in tukaj je naš končni izdelek.

Ta efekt lahko uporabljamo na praktično kakršnikoli podlagi. Malce zahtevnejše je ta efekt narediti, če je logotip pod kakšnim kotom, saj moramo poleg Flip Vertical uporabiti še nekaj trikov. Ampak, saj veste, vaja dela mojstra.

[vodič]: Kako preveriti, ali je željena domena prosta?

Slovenske domene

Na Arnesovem naslovu http://www.arnes.si/whois.html lahko preverimo, če je željena domena s končnico .SI prosta (npr. klemen.si). Če je domena prosta, jo lahko registriramo pri enem izmed kopice slovenskih registrarjev.

Tuje domene

Mednarodne domene (.com / .net / .org / .eu …) pa lahko preverimo na milijon drugih koncih. Če sem prej izbral Arnes, bom pa sedaj izbral SiOLove domene, kjer vtipkamo našo željeno domeno. Najpomembnejši podatka domene sta, če je zasedena, datum, kdaj bo pretekla in kdo je njen lastnik. Seveda moramo domeno potem še “parkirati” na nek strežnik, vendar vam bodo to itak že povedali ob registraciji, tako da o tem zaenkrat ne bom govoril (dejansko je prav zanimivo, kakšna znanost je za temi domenami, kako se obnašajo, ko pretečejo, obstaja celo nekaj podjetij, ki po preteku popularnih domen začnejo vsakih nekaj sekund bombandirati vrhovne strežnike (recimo tako) z registracijo te domene…za kar se seveda lepo plača). Debata za kdaj drugič.

P.S. Leta nazaj sem slišal, da naj bi neko nizozemsko podjetje registriralo tudi domene s č,ž,š - ji in poljubne končnice, recimo .klemen Do sedaj mi ga še ni uspelo najti

[vodič]: Zaobljeni robovi

Danes en malo lažji vodič, ker se mi ne ljubi kaj preveč.

Velikokrat želim imeti zaobljene robove raznih fotografij ali drugih elementov na spletni strani, ki pripomorejo k prijaznejšemu (Web 2.0) izgledu spletne strani. Načinov je več, meni se zdi spodnji precej eleganten. Z Adobe Photoshopom to naredimo v nekaj preprostih korakih:

1.) Z ukazom File -> Open odpremo fotografijo v Adobe Photoshopu. Gremo pod Layer -> New -> Layer from Background. Ustvarimo še en Layer (Layer -> New -> Layer ali SHIFT + CTRL + N) in ga z Layer -> Arrange -> Send to back (tega bomo potrebovali kasneje).

2.) Kliknemo na Layer z našo fotografijo (zgoraj Layer 0) in nato izberemo Rounded Rectangle Tool (pravokotnik z zaobljenimi robovi), ki mu nastavimo Radius, ki nam dejansko pove, koliko ”velike” zaobljene robove bomo imeli - sam sem izbral 10 px.

3.) Čez našo fotografijo (od levega zgornjega roba do desnega spodnjega) narišemo zaobljen pravokotnik (bodite natančni !).

4.) Gremo na zavihek “Paths” in z desnim kliknemo na masko našega zaobljenega pravokotnika ter izberemo “Make selection”. Če želimo še mehkejše robove v na novo odprtem oknu nastavimo “Feather Radius” na nekaj pikslov, sicer pustimo na “0″ (v mojem primeru sem pustil na 0).

5.) Sedaj imamo označeno celotno območje, ki ga oklepa naš zaobljeni pravkotnik. Vrnemo se na “Layers” in pobrišemo naš zaobljen pravokotnik. Izberemo Layer s fotografijo, nato pa selekcijo z ukazom “Select” -> “Inverse” obrnemo (ta ukaz dejansko tisto, kar prej ni bilo označeno, označi in tisto, kar je bilo označeno, odznači. Če bo tako bolj jasno ;)).

 
(pred ukazom Select - Inverse)

6.) Sedaj imamo označene vse 4 robove naše fotografije. Pritisnemo tipko “Delete” in robovi so izbrisani.  Gremo pod “Select” -> “Deselect” (CTRL + D) in naše selekcije ni več, robovi fotografije pa so zaobljeni. Kliknemo na naš drugi, prazen Layer in ga napolnimo (Paint Bucket Tool) z barvo, ki je kot ozadje na naši spletni strani (jst sem napolnil z belo, ker je fotka romala na moj blog, ki ima za ozadje belo barvo). Vse skupaj še shranimo.

Tukaj pa je končni izdelek:

Upam, da vam bo vodič kdaj prišel prav.