ptakoviny a tipy pro upravu blogu

• code, pre, xmp – zápis a zobrazení html kódu bez jeho vykonání
  buď klasický html tag PRE (tu nefunguje pokud je ponecháno enter nahrazovat řádkovým zlomem!) nakonec jsem tu použil zastaralý xmp, má nectnost že neviditelné entery sám nahrazuje <br>
  xmp používám jen kvůli zobrazení lomených závorek a přímé kopírovatelnosti přes schránku – ale možná že se i přes náhradní &-znaky vloží původní závorka, otestuju přímý zápis < a > co se objeví v notepadu – jo, jsou tam správně závorky, ne náhradní znaky. xmp bude možno opustit
  ....
  update: tajemství korektního zobrazení kódu s "xmp" na bloguje.cz rozluštěno, viz 144932_item.php
  
  
• vysvětlivky v textu
  podtržený abbr-odkaz pro vysvětlivky, nebo v ie prý fungující acronym  – mi to v ie funguje divně
  nejdřív nastavení stylu otazníku, pak příklad: abbr, acronym {cursor: help; border-bottom: 1px dashed #808080; } <br /> <acronym title="vysvětlivka">označený text</acronym>definice stylu doplněna o "otazníkový" kurzor, reaguje na "acronym" v ie5/6, pro ie se musí podtržení dodefinovat ve stylu pomocí border, mám kdesi chybu
  
  
• favicon – ikonka v záhlaví stránky nebo záložky
  <link rel="shortcut icon" type="image/x-icon" href="http://.../favicon.ico" />pro .gif obrázek:
  <link rel="shortcut icon" href="http://.../favicon.gif" type="image/gif"> i když jde ikona .ico vytvořit třeba konverzí v xnview, bloguje odmítá nahrát formát .ico :(, je nutno použít obrázek .gif nebo .png – taky umí průhledné pozadí. ikona má mít rozměr/násobek 16*16 bodů, jinak se vzhled zdeformuje. gif může být animovaný, ale všeho s mírou ;-)
  třeba: tomcat, heol loar, pepa z depa. na virtuálních adresářích bloguje funguje problematicky, na bloguje je nutné zadávat celou cestu s http://... . v ie5/6 nefunguje snad vůbec. pozor prohlížeč ji cachuje.
  viz taky článek na intervalu a diskusi pod ním, je tam i link na favicon u juhůa, nebo později v brtnik.bloguje.cz/favicons jsem se v tom ještě rýpal.
  
  
• grafické odrážky – klasické "li" puntíky nahrazeny třeba tlapkama:
  .seznam {list-style-image: url("stopa.gif"); } <br /> <ul class="seznam"> <br /> <li>.... <br /> <li>.... <br /> </ul>ve firefoxu to vypadá normálně, ale v ie mám obrázek nacpaný těsně k textu, nevím jestli je to přebraným nastavením z šablony nebo vlastnost ie
  
  
  
• odskok na odstavec na stránce
  nejdřív (zde nahoře) link se značkou #místa, potom ve vlastním textu identifikátor místa bez #
  <a href="#odstavec">odskok na stránce</a> <br /> <a name="#odstavec"></a> ... s chybou, funguje jen v ie <br /> <a name="odstavec"></a> ... funguje v ff+ie <br /> <span id="odstavec">...</span> ... funguje v firefoxu + ie zde pro demonstraci úmyslně použito a name="odstavec", ostatní příklady jsou s "id"
  
  
• klávesové zkratky pro odkazy
  <a href="http://brtnik.bloguje.cz/windows" accesskey="r"><u>r</u>uzne chovani odkazu</a> vlevo v menu je příklad odkazů na některé starší články. parametrem accesskey se nastaví klávesová zkratka alt+... (podívejte se na menu prohlížeče které zkratky s ničím nekolidují = vyhnout se alt+s,a,z,p,o,n,v,d). podtržené písmeno zapíšete mazi tagy <u>...</u>
  příklad na alt+r:   ruzne-chovani-odkazu
  
  
  
• různé chování odkazů na stránce
  v levém menu, v textu a konečně i v záhlaví blogu jsem řešil různý vzhled odkazů a kvůli barvě podkladu i jiné chování při ukázání myší, a taky aby to fungovalo i v ie. popis je v samostatném článku 146211_item.php.
  
  
• změna podtitulku blogu myšem – javascriptí funkce onmouseover
  

  1.text

  
  <h3 onMouseOver="innerHTML='2.text s myšem'" onMouseOut="innerHTML='1.text'">1.text</h3>definice nadpisu h3 jde zaměnit tagy span/div
  používá http://trittico.bloguje.cz/ :) a brtník to okopíroval
  jakpsatweb uvádí stejný princip pro změnu obrázku přejetím myši
  <img src="prvni.gif" onmouseover="this.src = 'druhy.gif'" onmouseout="this.src = 'prvni.gif'">
  
• zobrazování jen vyplněných webů a mailů v komentářích
  v šabloně musí být tag IfUrl, třeba u sebe v sekci Comments mám něco takového:
  <IfUrl><a href="">WWW</a></IfUrl> Vloženo více http://jandudik.bloguje.cz/75603_item.php
  
  
• alternativní styl – volba z více stylů (šablon) zobrazení
  mozilla pomocí ikony ve stavovém řádku, ie musí mít odkaz na skript, až otestuju tak snad popíšu
  třeba: http://pizduch.bloguje.cz/ , kaculina.bloguje.cz ...
  změna stylu pomocí JavaScriptu – přes ikonu dole
  
  připojení stylu v hlavičce dokumentu – jen výběrem z menu, nebrat
  nebo tady – http://vfb.bloguje.cz/85063_item.php
  
  
• barva pozadí textu pomocí css
  <span style="background(-color): #......;">obarvený text</span>vrtá mi hlavou a musím vyzkoušet co vlastně funguje:
  background-color: ... funguje v ie, i jinde
  background: ... funguje ffšude, i jinde
  všechno fungovalo všude – už to mám. nemá fungovat zápis s mezerou:
  background color: ... funguje jen v ie i přes chybu ... to sem blázen, v ie5 se obarví, v ie6 ne (chyba byla původně objevena v "div" s ie6)
  
  ještě pár zajímavých barev: zlatá #cccc33  – chromát #9a7800  – mosaz #808000
  
  
• otevření stránky v novém okně – přes target blank
  <a href="http://bloguje.cz/notes/index-nf.php" title="nové okno!" target="_blank">notes</a>u odkazů to nemám rád, ale u poznámkového notesu vlevo nebo v dalším příkladu se mi to zrovna hodilo
  
  
• co dělat když se obrázek nevejde do šablony?
  
  zmenšení fotky není velký problém, zmenšení obrázku s textem je popsáno víc u psychotestu:)
  2.možnost je nechat na něj jen odkaz ve formátu <a href="velky_obraz.jpg" target="_blank"><img src="maly_nahled_v_textu.jpg"></a>
  
  
  
• banner s titulkem náhodného blogu
  <script type="text/javascript" src="http://www.bloguje.cz/blognet/gen.php?blog=20"></script>má třeba peťulka pod nadpisem, nevím co znamená ta "20", uid nebo refresh...
  
  
• float – obtékání obrázku, + alternativní popisek "alt=... nebo title=..."
  .obrazekp { float: right; margin-left: 0.5em; } <br /><img class="obrazekp" src="banner.gif">... následuje text obtékající obrázek do šablony k definici stylů doplnit svůj styl pro obrázky plovoucí vpravo (vlevo) a velikost okraje o kolik ho má text zleva (zprava) obtékat. rozměr jde zadat vzhledem k velikosti písma "px" či řádku "em = zadává se emericky s desetinnou tečkou". samotný odkaz na obrázek pak doplnit o příslušný "class"
  
  
  alternativní popisek obrázku:
  img src=... title=...
  float vpravo používá třeba jan ambrož nebo můj roibos
  
  syntaxi: img src=... alt=...
  firefox neumí, nevím jak třeba mozilla, přitom alt-popisek se bere všude jako default :(
  
  
  tak msie si okraje přepočítává po svojem, hm, a co já s tím. (banner pochází z http://maly.cz/index.php?item=1158)
  
  
• přes span class=... si zobrazím styly použité v této šabloně:
  

  styl h2

   – nadpis blogu
  

  styl h3

   – název příspěvku
  styl .links – font pro sekci links (zde levý sloupec)
  styl a – výchozí tučný pro odkazy i v textu, pro hnusný vzhled tučného fontu je v textu zmenšen na velikost jako "links". rozlišení odkazů v textu příspěvků a v odkazech vlevo by se provedlo styly "a" / "a.links"
  styl a:hover – pro změnu při ukázání myšem
  styl a:visited – vzhled navštívených odkazů – záleží na pořadí, pokud jsem měl nejdřív definici stylů a:hover, až pak a:visited, u navštívených (visit) se mi už neprojevilo obarvení (hover)
  
  
  styl .perex – úvod příspěvku
  styl .posts – běžný text
  styl .byline – různé "technické poznámky"
  styl .date – oddělení dní na stránce, tu navíc použit pro oddělení tipů přes "span". při umístění v "div" by se mělo pozadí protáhnout na celý řádek, viz datum nahoře. v ie jsou styly zarovnány nesprávně pod sebou, s parametrem margin si zachází trochu velkoryse :(
  nefungovalo span-style ani div-style, ale span-class, no jo style=... se používá pro přímou definici na místě, class=... je odvolávka na předem definovaný styl, už sklerotizuju
  
  
• volba písma
  la trine má pomůcku pro webdesignéry – fontotéku s náhledy písma a uvedením náhradních rodin fontů pro css předpis.
  
  
• diakritika, VELKÁ písmena a mezery v názvech obrázků
  kdysi u stalkerky se nechtěly zobrazit nějaké fotky, tak mě docela zajímá co si jde v názvech dovolit, a co na to různé prohlížeče
  
  obrázek VelkaPismena.gif zkusím volat (špatně) malými písmeny, pak správně, nakonec zdejším makrem
  img src=velkapismena.gif : , VelkaPismena.gif : , makro $$: $$OBR14390$$
  firefox i ie5/6 zobrazí jen 2.obrázek
  
  obrázek pojmenovaný háčkyčárky.gif se takto sice nahraje na server bloguje, ale jeho odkaz v seznamu obrázků získá zajímavý název h%E1%E8ky%E8%E1rky.gif
  zkusím ho zadat původním win-názvem, pak převedeným, nakonec makrem
  img src=háčkyčárky.gif : , h%E1%E8ky%E8%E1rky.gif : , makro $$:
  firefox zobrazí vše, ie5/6 jen 2.obrázek
  
  (ne)používání mezery a nahrazení zápisem %20 je jasné(?). případně je lepší rovnou nahradit dolním podtržítkem, ale pro úplnost zkusím
  img src="prazdny list.gif" (špatně): , prazdny%20list.gif : , makro $$: $$OBR14395$$
  tak ff i ie5/6 zobrazí i "špatný" zápis, zato makro bloguje.cz není z mezery odvázané, tak to jsem nečekal :(
  jak vidno, nehledě na typ prohlížeče je zdejší makro $$ nejméně kompatibilní pro vložení obrázků s "divnými" názvy
  
  
• tipy autorů bloguje
  
  Skrývání hlášky Kategorie-nezařazeno – některé šablony neobsahují tag BlogThemeOnly a zobrazují pak kategorii nezařazené
  
  Trochu SEO na Bloguje – pro snadnější nalezení svého oblíbeného příspěvku nebo pomoci zaindexovat svůj článek ve vyhledávačích. tento fór s tagem <$BlogItemSEOLink$> si taky vyzkouším, pro jistotu zbavím nadpis diakritiky. takže kampak asi povede link http://brtnik.bloguje.cz/ptakoviny-a-tipy-pro-upravu-blogu nebo jen http://brtnik.bloguje.cz/ptakoviny? juch, ono to fak funguje! stačilo jen uvedení tohoto tagu tady v textu.
  jak jsem zkusil v případě klávesové zkratky, článek může mít titulek i s diakritikou, slovní "seo" odkaz píšete bez ní a link přesto funguje.
  pokud by tag neměl být viditelný použil by se například <span style="display:none"><$BlogItemSEOLink$></span> anebo tag přidat rovnou někam do šablony – a od té doby vyhledávání článků přes jejich jména platí pro všechny vygenerované příspěvky.
  
  
• a NIKDY!!! neklikejte pod vzhledem šablony ...
  ... na vrátit šablonu do stavu před poslední změnou, pokud ji nemáte předtím zálohovanou (třeba jen do schránky ctrl+a, ctrl+c), lépe ještě ze schránky do textového souboru na disku.
  místo vrácení úprav o krok zpět se objeví nabídka pro výběr nové šablony bez úprav – a kdo si nevšimne že vpravo je třeba vybrat odkaz "změny html", o svoje změny v šabloně přišel :(
  
  
• obrázkoví smajlíci
  
  na netu jsou jich tuny, třeba peťulčin bložínek jsem si oblíbil taky kvůli nim
  nějaké galerie buď najdu googlem, nebo se inspiruju u chosseho : smajlici
  v komentářích, které tu nedovolují vkládání obrázků, si jde vystačit s   :)   :(   :/   :o)   *<:-)  ...
  
  
• animovaný title
  připadá mi celkem vtipný, nebudu ho tu uvádět, ke shlédnutí je na vdonati blog, kdo chce může tam mrknout do zdrojáku
  
  

  ---

  
  nakonec: a když se něco v šablonce pose**, nevadí nejsme sami. třeba zde: binární ládin a jeho open projekt invalidní kodér
  
  něco jsem opsal od jiných blogerů, něco polistoval v knížkách, a hlavně nezapomenout na oblíbený jak psát web od juhůa
  
  pixy má u sebe více popsaných ukázek s css, jeho známý generátor barevných schémat nyní dovoluje zadávat barvu v RGB.
  
  objevil jsem dnes v knihkupctsví od m.prokopa css – kaskádové styly, vydavatelství idnes s slevou 20% – považte! čtu si a mručím si. update:jinak jsem ještě používal nebo používám:
  
  * html-tipy a triky od profesionálů – m.kučera – unis 2001. v brožurce jsem se poprvé dozvěděl že existuje a:hover
  * css-úvod do kaskádových stylů – m.kučera – brožurka stejné řady idnes 2002. pro první pokusy
  * programování www stránek pro úplné začátečníky – p.broža – cpress 2000. javascriptu nerozumím dodnes
  * css kaskádové styly. kompletní průvpdce – p.staníček – cpress 2003. bez nějaké znalosti css se to špatně čte
  * zmíněné css kaskádové styly pro webdesignéry – m.prokop – idnes 2003. reference i drobné příklady použití – dodnes začínám hledat nejdřív tu.
  * tvorba www stránek pro úplné začátečníky – p.broža – cpress 98?. s touto knížkou jsem začínal a chvíli si vystačil, už jsem ji vyhodil. na dnešní poměry je to špatná, zastaralá kniha, vychovává k zlozvykům.
  * místo ní jsem pořídil: html kapesní přehled – l.honek cpress 2004. stručná reference html 4.0
  
  teď tu blbnu hodinu a půl upravami a porovnáváním v ff a ie a zvyšuju si tak návštěvnost na počitadle :)
  na obrázky nebyl čas, musely se zpracovávat nějaké pivní zásoby