depi.sk – svet očami Erika Gyepesa

Štýlové listovanie adresárov cez Apache (2. časť)

Prvá časť seriálu mala byť akýmsi krátkym úvodom a zasvätením do problematiky. Dnes sa už preto nebudem zaoberať požiadavkami a teoretickými plánmi, ale rovno sa vrhnem na samotnú úpravu vzhľadu vylistovaného adresáru. **Budú už aj obrázky a možnosť si to aj reálne vyskúšať**. Dúfam teda, že táto časť vás zaujme oveľa viac ako tá minulá ;-)

“[* http://www.depi.sk/wp-content/2008/06/styledlisting1.png .[center] *]”:http://media.erikgyepes.com

Základná stromová štruktúra
==================
Osobne som na tieto účely vytvoril samostanú subdoménu v tvare *hlavny_adresar.domena.tld*. Mojím cieľom bolo **vytvoriť akési multimediálne centrum, resp. úložisko multimédií**. Preto je dôležité poznať názvy a samotnú organizáciu jednotlivých adresárov.

Ja som zvolil nasledovné (jednoduché) delenie:
– **/** – hlavný adresár (dostaneme sa na ňu zadaním adresy vo vyššeie spomínanom tvare)
– **Documents** – adresár pre textové dokumenty, zošity, prezentácie
– **Movies** – adresár pre rôzne videá, či screencasty
– **Music** – adresár s hudbou (podcasty, rôzne mp3-ky, wav-ká,…)
– **Pictures** – predovšetkým rôzne rodinné a vlastné fotoalbumy
– **Screenshots** – miesto pre snímky pracovnej plochy – screenshoty
– **Source Code** – zdrojové kódy skriptov, programov, webové stránky
– **Trash** – odpad, dočasné súbory, ktoré sa nehodia inde, alebo ich zámerne nechcem zamiešať s ostatným obsahom
– **Uploads** – sem idú okamžite všetky súbory, ktoré potrebujem rýchlo nazdielať (neskôr sa zmažú, prípadne zatriedia do príslušných adresárov
– *Wordpress Themes* – archív rôznych tém pre WordPress (poslúži ako demonštrácia rozlíšenia archívov súborov)
Okrem toho ešte mám k dispozícii adresár **_Private_** do ktorého je prístup len prostredníctvom hesla a slúži na uskladňovanie súborov na osobné použitie a adresár **__resources**, kde sú uložené samotné ikony, štýly CSS, vlastný header, footer atď.

1. Základné nastavenia
===============
Keďže ide o server Apache, všetky naše nastavenia budú prevádzané prostredníctvom súboru *.htaccess*:
/—html

Options +Indexes  # zapnutie indexovania - táto voľba zapína vylistovanie adresára
Options +Includes  # zapne Server Side Includes (potreba mod_includes) - umožňuje zobrazenie hodnôt rôznych premenných
 
AddType text/html .shtml  # pridáme podporu .shtml súborov pre SSI
AddHandler server-parsed .shtml  # nastavíme parsovanie .shtml súborov
 
IndexOptions +FancyIndexing  # zapne FancyIndexing
IndexOptions +FoldersFirst  # zamedzí premiešavaniu adresárov so súbormi => najprv sú zobrazené adresáre, pod nimi súbory
IndexOptions +XHTML  # vygenerovanie XHTML kódu namiesto defaultného HTML
IndexOptions +HTMLTable  # zobrazenie adresárov a súborov v HTML tabuľke
IndexOptions +SuppressRules  # potlačenie generovania horizontálnych čiar (<hr /> elementov)
IndexOptions +SuppressHTMLPreamble  # potačenie generovania HTML headru (vytvoríme si neskôr vlastný)
IndexOptions +SuppressDescription  # potlačenie zobrazenia popisu súborov
IndexOptions +SuppressLastModified  # potlačenie zobrazenia času poslednej zmeny súboru
IndexOptions +SuppressSize  # potlačenie zobrazenia veľkosti súboru	 
#IndexOptions +IconsAreLinks  # urobí ikony klikateľnými (túto voľbu mám vypnutú, ale uvádzam ju tu ako ďalšiu možnosť)
 
#IndexOptions +ShowForbidden  # zobrazenie súborov, ktoré sú skryté (túto voľbu som chcel využiť pri zaheslovaných adresároch, prístupná je však až od Apachu 2.2, ktorý bohužiaľ nie je ešte na všetkých webhostingoch nainštalovaný, preto som potom zvolil iný trik
 
IndexIgnore /__resources  # potlačíme v indexe adresár __resources, ktorý obsahuje naše ikony, kaskádové štýle a pod.
 
HeaderName "/__resources/header.shtml"  # header.shtml bude načítaný pred vylistovaním a bude obsahovať našu prispôsobenú hlavičku, súbor má príponu .shtml => môžeme v ňom použiť SSI
ReadmeName "/__resources/footer.shtml"  # obdobné načítanie prispôsobeného footra
 
IndexOptions +IconWidth=64px  # nastavenie šírky ikon
IndexOptions +IconHeight=64px  # nastavenie výšky ikon

\—

Toľko základné nastavenia v *.htaccess*. Ak však chceme vymeniť jednotlivé ikony na základe typu daného súboru musíme v editovaní tohto súboru pokračovať ďalej, pripájam krátku ukážku aj s komentármi:

/—html

AddIcon "/__resources/icons/Folder.png" ^^DIRECTORY^^  #  priradíme ikonu všeobecnému adresáru
 
AddIcon "/__resources/icons/Applications Folder.png" Applications  #  ikona pre adresár Applications
AddIcon "/__resources/icons/Documents Folder.png" Documents #  ikona pre adresár Documents
AddIcon "/__resources/icons/Downloads.png" Downloads #  ikona pre adresár Downloads
 
AddIcon "/__resources/icons/CSS.png" .css #  ikona pre .css súbory
AddIcon "/__resources/icons/html.png" .html #  ikona pre .html web stránky
AddIcon "/__resources/icons/PHP.png" .php .phps #  ikona pre .php skripty a .phps zdrojové kódy (pridaním viac prípon môžeme priradiť rovnakú ikonu viacerým typom súborov)
 
AddIcon "/__resources/icons/QuickTime.png" .mov .avi .mpg .wma .3gp .m4v # ikona pre video súbory
AddIcon "/__resources/icons/iTunes.png" .mp3 .wav .ogg # iokna pre zvukové súbory

\—

Myslím, že z tejto krátkej ukážky je všetko jasné. V podstate na každom riadku priraďujeme určitému adresáru, či súboru ikonu z adresára */__resources/icons*. Nie je v tom žiadna veda :-)

Veľmi dobrým pomocníkom pre ďalšiu konfiguráciu vám určite bude manuál “core Apache”:http://httpd.apache.org/docs/2.0/mod/core.html a “mod_autoindex”:http://httpd.apache.org/docs/2.0/mod/mod_autoindex.html.

Vlastný header a footer
===============
V základných nastaveniach som zámerne potlačil generovanie HTML headru (*cez IndexOptions +SuppressHTMLPreamble*) a umožnil načítanie vlastného headru ako aj footra (*cez HeaderName “/__resources/header.shtml” a ReadmeName “/__resources/footer.shtml”*). Toto nám dáva obrovskú slobodu a umožňuje nám ísť s prispôsobovaním ešte ďalej, spomeniem a rozoberiem minimálne nasledovné možnosti:
– **pridanie kaskádových štýlov CSS** – tu myslím, že nejde o nič zložité, štýly importujeme klasicky cez tag <link>
– **použitie SSI** – v článku toľko omielané SSI, čo to vlastne je? V podstate nič zaujímavé, či zložité v podstate ide iba o printnutie existujúcich premenných ako napríklad: *DOCUMENT_ROOT, SERVER_NAME, SERVER_ADDR, HTTP_HOST* atď. Pekný zoznam nájdete napríklad tu – “SSI, XSSI & CGI variables”:http://www.georgedillon.com/web/ssivar.shtml, či tu – “Server Side Includes Tutorial”:http://webmaster.iu.edu/tool_guide_info/ssitutorial.shtml. Nezabudnite, že premenné sa zapisujú v nasledovnom tvare a treba dávať pozor na medzery: <!–#echo var=”REQUEST_URI”–>
– “[* http://www.depi.sk/wp-content/2008/06/styledlisting3-300×166.png >]”:http://www.depi.sk/wp-content/2008/06/styledlisting3.png **pridanie JavaScriptu** (napríklad knižnice pre efektné zobrazenie obrázkov) – pridáme ho cez tag <script>, osobne som siahol po knižnici **”FancyZoom”:http://www.cabel.name/2008/02/fancyzoom-10.html**, ktorá umožní dynamické načítanie obrázku priamo v otvorenom okne bez nutnosti preklikávania sa priamo na obrázok. FancyZoom som vybral najmä kvôli tomu, že nevyžaduje pridanie žiadnych *identifikátorov* či *tried* do kódu (čo by už nebolo také jednoduché) a tým pádom funguje okamžite
– **pridanie** iných zaujímavostí ako napríklad v mojom prípade **počítadla** “Google Analytics”:http://www.google.com/analytics/ – taktiež myslím netreba komentovať, počítadlo som pridal do footra a tým pádom mám dokonalý prehľad o všetkých návštevách ;-)
– **zaheslovaný adresár** – vzhľadom k tomu, že som kvôli nedostupnosti *IndexOptions +ShowForbidden* v starších verziach Apacha nevyužil zobrazenie neprístupných adresárov (ktorým sa zaheslovaný adresár stáva okamžite) som odkaz na takýto adresár vložil priamo do hlavičky. Tým pádom som tento malý problémik zo zobrazením jednoducho obišiel.

Záver
====
Verím, že vy máte taktiež rôzne **kreatívne nápady a prídete taktiež s novými a zaujímavými úpravami. Rád ich privítam v komentároch. Na záver ešte dodávam, že ikony a pozadie, ktoré som v mojom vylistovaní adresára použil pochádzajú z “deviantARTu”:http://deviantart.com, kde ich je možné stiahnuť. Kód CSS štýlov som tu zámerne nevložil, pretože jednak si ho môžete pozrieť sami a po druhé rád privítam vašu vlastnú kreativitu. Pokiaľ máte otázky, či nejasnosti kľudne využite priestor v komentároch, už teraz ma napadá niekoľko vecí, ktoré by sa ešte dali rozobrať a preto v prípade záujmu môžem napísať aj 3. pokračovanie tohto mini seriálu.

**A aby som nezabudol, môj “styledlisting” nájdete na http://media.erikgyepes.com.**

“[* http://www.depi.sk/wp-content/2008/06/styledlisting2.png .[center] *]”:http://media.erikgyepes.com

Tento článok vznikol aj vďaka nasledovným “sponzorom súťaže 30C”:http://www.depi.sk/2008/06/01/30c-mame-prvych-sponzorov-aj-pravidla-sutaze/
=========================================
– “Webhosting Inet.sk”:http://webhosting.inet.sk
– internetový obchod “Nový Počítač.sk – LCD monitory”:http://novypocitac.sk/lcd-monitory’
– “eMDI”:http://emdi.sk
– “Pizza SEO – Optimalizácia pre vyhľadávače”:http://pizzaseo.com/sk
– “www.tvojden.sk – vyhľadávač | správy | počasie | cestovanie | zábava”:http://www.tvojden.sk
– “Poppe.sk – úspešné internetové stránky”:http://poppe.sk
– “Elaut BauMont”:http://www.ebau.sk
– “Webcreator”:http://webcreator.sk
– “Expres vizitky”:http://expresvizitky.sk
– “Webhosting Host do domu”:http://hostdodomu.sk

Prihlás sa na odber zaujímavých informácií e-mailom

* povinné polia
  • http://spravodaj.madaj.net/ rony

    pozadie pod textami je nekontrastne

  • http://www.depi.sk Erik Gyepes

    rony: vdaka za pripomienku, mal som tam povodne nastaveny :hover, ktory tento fakt trocha riesil, ako som vsak robil “pokusy” tak som ho odstavil. Vratil som ho, ale samozrejme spat. Neviem na com to, ale pozeras, mozno na CRT-cku to vyzera este menej kontrastne ako u mna na LCD.
    Kedze je to vsak na moje vlastne potreby, kontrast nie je pre mna problemom.

  • http://disorder.sk disorder

    mozno pekne ikonky pre niekoho, ale pouzitelnost isla prudko dole

  • iyo

    Odkaz na private nefunguje :-) Zišlo by sa ešte nejako vyriešiť neznáme typy súborov (napríklad pre doc-ká tam ikonku nemáš) a upraviť odkaz na parent priečinok tak, aby bol viditelne odlišný…

    Dočkáme sa aj 3. časti? Dalo by sa to ešte povylepšovať…

    Celkovo je to pekné dielko…

  • http://www.depi.sk Erik Gyepes

    iyo: ikonu k .doc-kam mam, len som ju vcera menil a zabudol som tu novu uploadnut na server ;-)
    S parent priecinkom som sa trapil aj ja, nenasiel som vsak riesenie tak mu zostala ikona “defaultneho priecinka”

    3. cast? Uvidime.

  • http://livusha.blogspot.com Livusha

    Mne sa to paci, ikonky su stylove !

  • http://theextrablog.wordpress.com martin

    ikonky su krasne

  • http://rinik.net/blog zero0x

    cool :)

    som necakal az take vylepsenie..

    aj ked je pravda, ze pouzitelnost isla dole, kedze nevyuzivas miesto, co tam mas ;)

  • loooiizo

    kukol sa na to niekto v Opere 9.5? :-/

  • Ján Pavlík
  • Ján Pavlík

    Btw mne sa nie a nie zobrazit to pozadie, co mas na screenshote, iba rozhadzane ikonky (IE6).

  • Abraxas

    naco sa s tym series pokial to ide :DD

  • h0n24
  • http://vladooo.blogspot.com Vladooo

    Ikonky sú pekné a celkovo to pôsobí zaujímavo a jednoducho :D

  • http://mariodian.wordpress.com TommyHot

    Nedalo by sa pri obrazkoch zobrazit radsej thumbnail ako ikonka? Bolo by to o kusok pouzitelnejsie :) inak pekne

  • http://www.blog.tutoky.com MareceK

    no napad dobry ale realizaciu treba dotiahnut ;) nefunguje to v ie6, ie7, opere. ikonky su pekne ale velmi velke (na 1440×800 ich vidim len 7) co pri vacsich adresaroch znizuje pouzitelnost.