Přejít na obsah

J0hn R.

Software, foto, filmy, společnost, turistika

V dnešní části vytvořím pozadí pro hlavní text, se vzhledem starého papíru, které bude moci být použito na libovolnou délku stránky bez známek přechodů.
Mám obrázek ze kterého budu vycházet:

Je jasné, že horní část s otisklou sponkou je nepoužitelná, neboť tvoří příliš výrazný prvek. Také pokud chceme zachovat otvory na levé straně je třeba počítat s tím, aby vzdálenosti mezi nimi měli přibližně stejnou vzdálenost. Dalším faktorem je, aby na hranách části kterou vybereme nebyly příliš výrazné prvky. V tomto případě nám to skoro jasně určilo jakou část pomocí nástroje “Ořez” vybereme:

Teď následuje klíčový prvek kterým si usnadníme práci. V menu Vrstva – Transformovat – Posun, vrstvu posuneme, abychom měli na okrajích zajištěnu návaznost a problematická část se nám dostala do středu obrázku, kde se se ní bude mnohem snadněji pracovat. Ovládací prvek obsahuje i tlačítko které nám posune vrstvu přesně o polovinu. Protože nám jde jen o vertikální návaznost vyplníme posun X nulový:

Teď zkopírujeme spodní část a vložíme ji jako novou vrstvu. Pomocí nástroje “Perspektiva” ji upravíme tak aby hrany papíru na sebe navazovali

Sloučíme vrstvy a budeme pracovat na “zneviditelnění” přechodu který zde vznikl. Na každou část se hodí jiný nástroj. Na nevýrazná místa se hodí nástroj “Léčení” v některých partiích uplatníme nástroj “Rozmazání” a v okrajových oblastech nástroj “Klonování”

Ještě můžeme pomocí “Klonování” posunout otvory po děrovačce blíže k okraji. Již po pár minutách dostáváme výsledek který jsme požadovali. Obrázek, který pokud použijeme jako pozadí bude na sebe vertikálně navazovat bez znatelných přechodů.

A takto vypadá výsledek: http://j0hn.hys.cz/wp-content/uploads/tutorialweb/tutorial-web-5.htm. (Tu reklamu poskytovatele webhostingu tam prosím zase ignorujte)

Z minulých dílů (1., 2., 3.) máme připravenu strukturu stránky a můžete mi začít hrát se vzhledem. Profesionální webový grafik by asi řekl, že vzhledem tvorba stránek začíná. V Photoshopu nebo Inkscape, že připravíme celkový vzhled a na ten pak napasujme kód stránky. Já ale nejsem webdesignér ani neovládám html, php, css, javascript apod. Takže postupuji způsobem který zvládnu.

Úvodem bych chtěl provést drobnou úpravu. V minulých dílech jsem hlavičku (logo) stránky umístil v kódu dovnitř divu “obal”. To teď napravím protože k tomu není důvod a bránilo by mě to v dalších úpravách co jsem chtěl v budoucnu provádět. Takže v html umístíme vše co se týká divu “hlavička” před začátek divu “obal”. Z toho důvodu pak musíme upravit ve stylech její umístění přidáním do její deklarace

	margin: 0 auto 0 auto; /*Odsazení - zhora 0, z prava automaticky, zdola 0, zleva automaticky (zprava a zleva automaticky mi stránku vystředí) */

A teď již k další tvorbě.

Pozadí hlavičky

V Gimpu si tedy začnu připravovat pozadí pro hlavičku. pokračovat ve čtení …

Zopakování z minulého dílu (http://j0hn.hys.cz/zaciname-s-tvorbou-webovych-stranek-2-zaklady-css-trisloupcovy-layout):

  • Nebudu zde podrobně rozepisovat co která značka, znak či výraz v html nebo css kódu znamená. Hlavním důvodem je, že html ani css neumím! Takže pokud se v textu vyskytne nějaký “odborný” výraz například identifikátor napíšu ho takto kurzívou a Vy můžete postupovat jako já, tj. do vyhledávače zadejte daný výraz a doplňte ho o slova html a css.
  • Mnou “poslepovaný” kód jsem opatřil podrobnými poznámkami, které ve výsledné stránce nejsou vidět a slouží jen k zorientování se v kódu. Poznámky v css kódu jsou umisťovány mezi /* na začátku a */ na konci poznámky. V html kódu jede o znaky <!– na začátku a –> na konci.
  • Znám vzhled jakého chci dosáhnout (Vzhled o pevně dané šířce obsahující hlavičku, 3 sloupce a patičku.).
  • Mám připravenu strukturu html dokumentu.
  • Mám v css nastavený třísloupcový layout, ale potřebuji zarovnat délku všech tří sloupců

Zarovnání délky všech tří sloupců se ukázalo jako ještě těžší oříšek než samotný třísloupcový layout. Dá se říci, že poctivé řešení neexistuje. Nicméně existuje řada “špinavých” triků, pomocí kterých dosáhneme požadovaného výsledku. pokračovat ve čtení …

Zopakování z minulého dílu (http://j0hn.hys.cz/zaciname-s-tvorbou-webovych-stranek-1-uvod-struktura-html):

  • Nebudu zde podrobně rozepisovat co která značka, znak či výraz v html nebo css kódu znamená. Hlavním důvodem je, že html ani css neumím! Takže pokud se v textu vyskytne nějaký “odborný” výraz například identifikátor napíšu ho takto kurzívou a Vy můžete postupovat jako já, tj. do vyhledávače zadejte daný výraz a doplňte ho o slova html a css.
  • Mnou “poslepovaný” kód jsem opatřil podrobnými poznámkami, které ve výsledné stránce nejsou vidět a slouží jen k zorientování se v kódu. Poznámky v css kódu jsou umisťovány mezi /* na začátku a */ na konci poznámky. V html kódu jede o znaky <!– na začátku a –> na konci.
  • Znám vzhled jakého chci dosáhnout (Vzhled o pevně dané šířce obsahující hlavičku, 3 sloupce a patičku.).
  • Mám připravenu strukturu html dokumentu.

Pokud chci pevně danou šířku musím si určit kolik pixelů. Aby byl web co nejlépe přístupný pro různé rozlišení rozhodl jsem se pro 900 pixelů. Rozlišení z šířkou 800 pixelů už skoro nikdo nepoužívá a všem s vyšším rozlišením monitoru se web zobrazí korektně.

Teď něco k CSS. Jeho síla spočívá v tom že si můžeme nadefinovat vlastnosti jednotlivých prvků stránky a ty pak budou v celém dokumentu dodržovány. pokračovat ve čtení …

Rozhodl jsem se vytvořit web na jedno téma s tím, že nepoužiji žádný redakční systém, ale pokusím se stránky vytvořit ručně k vlastnímu obrazu. To jest bez pomoci editorů si ručně napíši zdrojový kód. Téma webu: Sérioví vrazi. Vzhled chci o pevně dané šířce obsahující hlavičku, 3 sloupce a patičku. V hlavičce bude umístěné nějaké logo nebo obrázek, v levém sloupci jmenný seznam, v prostředním vlastní informace a v pravém menu, vyhledávání a další případné doplňky co bych mohl chtít do webu přidat. Patička by pak obsahovala informace o autorovi apod.

Většina moderních webů má vzhled definovaný pomocí css stylů, takže i tato volba bylo poměrně jasná. pokračovat ve čtení …


Rozlišení podle zdroje:
Snažil jsem se o řazení dle výsledné kvality, nicméně každá kategorie může mít velmi široký kvalitativní rozsah.

  • CAM (též Kinorip) – Film je natočen na digitální kameru v kině. Kvalitu tedy ovlivňuje použitá kamera, počet a hlučnost diváků, pozice kamery (ovlivňuje zkreslení obrazu), atd. Výhodou je, že bývá k dispozici nejdříve, nevýhodou je špatná kvalita.
  • TELESYNC (TS) – Jako CAM, ale pro zdroj zvuku je použit externí zdroj. Často je použita profesionální kamera a je natáčeno v prázdném sále, ale to není podmínkou. Proto se kvalita může velmi lišit.
  • WORKPRINT (WP) – Kopie filmu který není dokončený. pokračovat ve čtení …

Opera – tento internetový prohlížeč používám už 10let, takže pokud musím pracovat s nějakým jiným prohlížečem tak u toho dost trpím. Bohužel je to jedna z aplikací co není ve zdrojích Ubuntu. Nicméně stačí ze stránek Opery (http://www.opera.com/download/) stáhnout instalační balíček a ten otevřít (spustit) v Centru softwaru. Pokud by byl problém stačí spustit Terminál a napsat: sudo dpkg -i /adresakdemátebalíčekuložený/jmenobalíčku.deb
Nainstalováním se Vám zároveň do zdrojů softwaru přidal i zdroj Opery, takže další aktualizace již probíhají automaticky.
Používám službu Opera link, takže synchronizace záložek, poznámek, osobní lišty, atd. je automatická, stačí se přihlásit. Dále doinstalovávám Rozšíření (Extension) „SaveFrom.net helper“, „Opera AdBlock“ a „Download Media Bar“ (škoda, že nejdou také synchronizovat přes Opera link).

Ještě v Opeře zkontroluji zda je funkční Flash (podrobnosti o něm zjistíte zadáním opera:plugins do adresního řádku). Jestli jste při instalaci Xubuntu zadali i instalaci nesvobodného softwaru, měl by Flash fungovat. Pokud se Vám stává, že při spuštění flash videí ve více listech se Vám po zavření jednoho ostatní zaseknou (zůstane tam jen bílý obdélník) doporučuji klinout pravým na video, dát nastavení a zrušit Hardwarovou akceleraci, mělo by to pomoci (tohle to dělá i pod Windows XP a žádný vliv na výkon jsem nepozoroval).

V Nastavení na kartě Pokročilé volby v části Programy přidávám protokol Apt (jako protokol uveďte apt a nastavte Otevřít jinou aplikací na apturl). „AptURL neboli protokol Apt je zajímavá možnost jak instalovat software přímo z webového prohlížeče. Pro instalaci stačí kliknout na speciální odkaz apt://nazev_baliku – prohlížeč pak předá požadavek správci balíků a ten vybraný balík nabídne k instalaci.“ (citace z (http://wiki.ubuntu.cz) )

 

Krusader (apt://krusader) – jde o dvoupanelového správce souborů ve stylu Total Commanderu (jeho kvalit bohužel nedosahuje, ale velmi se jim přibližuje). Primárně je určen pro prostředí KDE, takže si k sobě potřebuje dotáhnout dost KDE knihoven, nicméně pokud se dobře nastaví, pokračovat ve čtení …

Pokud chcete přidat ikonu, která by byla vidět v panelu (listu) prohlížeče – tzv. favorite icon a používáte WordPress, stačí udělat 3 věci.
1. Vytvořit ikonu (např. v programu GIMP). Ideální je ikona o rozměrech 16×16 pixelů, uložená ve formátu “Ikona Microsoft Windows” samozřejmě s koncovkou “ico” – například favicon.ico.
2. Nahrát ji do adresáře vašich stránek – ideálně do adresáře kde máte umístěnou šablonu – adresawebu/wp-content/themes/vašešablona/
3. V editoru šablon umístit do Záhlaví (header.php) (za<head> ):

<link rel="shortcut icon" href="/wp-content/themes/vašešablona/favicon.ico" />

Pokud jste příznivci turistiky rád bych Vás pozval na svoje příspěvky na serveru turistika.cz. Server je hojně navštěvovaný a jako ideální se mi jeví možnost, kromě textu popisujícího zážitky a fotek, zadat i přímo prošlou trasu buď na mapě nebo importem z GPX. Ke každému bodu trasy jdou psát poznámky, označit povrch stezky a barvu turistické značky (pokud po ní jdete). Ve finále pak vyjedou informace o vzdálenostech a výškový profil prošlé trasy.

Zatím jsem přidal  3 příspěvky. Všechny se týkají naučných stezek, takže tam naleznete i přesná místa umístění jednotlivých informačních panelů i jejich fotografie.

Riegrova  a Kamenického stezka: http://www.turistika.cz/trasy/riegrova-a-kamenickeho-stezka

Naučná stezka „Po stopách Františka Malocha“: http://www.turistika.cz/trasy/naucna-stezka-po-stopach-frantiska-malocha

Naučná lesnická stezka Zábělá: http://www.turistika.cz/trasy/naucna-lesnicka-stezka-zabela

První zážitky s Linuxem jsem měl před několika roky. Zachtělo se mi trochu si rozšířit obzory tak jsme se rozhodl nainstalovat si ke svým Windows XP některou z distribucí Linuxu. Jako člověk odkojený MS Windows jsem chtěl něco jednoduchého, uživatelsky přívětivého a v češtině. To zredukovalo výběr na Fedoru a Ubuntu. Obojí jsem vyzkoušel a jelikož Fedora měla nějaký problém s mojí grafickou kartou skončil jsem u Ubuntu. Překvapením pro mě byla rychlost instalace a připravenost pro základní užívání okamžitě po instalaci. Dokonce i to že jsem Ubuntu instaloval na stejný disk jako Windows z čehož jsem měl trochu strach se obešlo bez problémů a Windows to přežili ve zdraví. Pro komfortnější používání stačilo trochu si pročíst http://wiki.ubuntu.cz a rady aplikovat. Ubuntu jsem požíval asi měsíc, pak vyšla nějaká hra co mě zaujala takže jsem pouštěl jen Windows. Časem došlo i k formátování celého disku a na Linux jsem na několik let zapomněl. K návratu zpět k Linuxu jsem se rozhodl letos v září ……
Čím začít?
Pokud by jste chtěli přejít na Linux natrvalo a od MS Windows se úplně odstřihnout pak první věc na které by jste se měli zamyslet je “Opravdu to chci udělat?” a pročíst si články jako:  Linux nejsou jiná windows nebo Linux je jako motorka, Windows jsou jako auto. Můj osobní názor je že Linux je ideální pro dvě skupiny uživatelů: . pokračovat ve čtení …