Jump to content

  • Announcements

    • Xmat

      Pravidlo pro postování v TTT

      Do sekce Tipy, triky, tutoriály nepatří žádné dotazy.   Postujte sem vaše návody, tipy a různé další věci jež uznáte za vhodné sdělit zdejšímu osazenstvu, ale veškeré dotazy směřujte do sekce Všeobecná diskuse.
    • Replik

      Seznam návodů a důležitých témat v této sekci

      Pro lepší přehlednost jsem vytvořil tento seznam, který vás, méně zkušené, lépe provede touto sekcí. Věřím, že zde najdete, co hledáte. Vypsané jsou návody, které jsou oficiálně uznané jako návody. Běžné diskuze, které neposkytují postupy a rady zvěřejněny nejsou.   Instalace vlastního MaNGOS Serveru Díky těmto návodům budete (měli by jste být) schopni vytvořit a následně spustit váš vlastní server. Nastavení je pro verze s i bez datadisku.   Instalace MaNGOS Serveru (bez datadisku TBC) - Autor Benny Instalace MaNGOS Serveru (s datadiskem TBC) - Autor Malfik Instalace MaNGOS Serveru v prostředí Linux - Autor charlie Instalace MaNGOS Serveru v prostředí Linux - Autor kupkoid   Chyby a jejich řešení při přihlašování k serveru - Autor Cybe   Zálohování uživatelských dat   Dávkový soubor (BAT soubor) pro vytvoření SQL záloh - Autor Replik   Kompilování - tvoření vlastních release (revizí)   Tvorba kompilací pro Win32 (MangoScript) - Autor bLuma   Ostatní - těžko zařaditelné, ale neznamená to, že nejsou dobré   VIP Systém - Autor charlie Tvorba Webových stránek pro MaNGOS - Autor zahuba Tvorba teleportačních NPC (MangoScript) - Autor Replik Registrační web (původně předělaná SPORA) Funkční pro Antrix i MaNGOS - Autor Replik Nastavení a spuštění Minimanager pro MaNGOS - Autor BlackMartin Nastavení MaNGOS Website - Autor Artorius   Samozřejmě jsou zde i jiné návody, ale tyto jsou nejvíce používané, proto věřím, že vám budou nápomocné. Tuto sekci budeme upravovat podle potřeby. Pokud by jste něco nenašli nebo si nevěděli rady, hledejte na fóru a teprve potom založte vlastní topik. Pokud nějaký autor vytvoří kvalitní návod a chtěl by ho zveřejnit i v tomto seznamu, doporučuji, aby mi napsal zprávu skrze PM.   Díky a přeji hezký den na WoWResource   Replik
    • Aristo

      Příspěvky tam, kde nemají co dělat

      Dodržujte zákaz přispívání do topiků s repaky pokud si to zakladatelé nepřejí!! Opakované psaní příspěvků bude trestáno warnem.
    • Aristo

      Používání spoilerů

      Poslední dobou má většina uživatelů fora zvláštní nutkání postovat extrémně dlouhé texty nebo kódy, které zabírají v nejedenom případu i 80% obsahu celé stránky a hodně tak zvedají nepřehlednost v topiku. Chtěl bych všechny uživatele požádat, aby při postování citací, jakýchkoliv kódů, errorů, atp... delších než 30 řádků používali funkci spoileru.   Funkci vyvoláte příkazem [spoiler] text [/spoiler]   Ukázka:  
Sign in to follow this  
Followers 0
Hookyns

Tipy, triky pro Web - CSS, atp.

By Hookyns, in Web

Recommended Posts

Hookyns    86

Hookyns
Posted (edited)

Zdravím,

 

Poslední dobou se zde rozebírá i webová tvorba, proto jsem se rozhodl, na základě několika zjištění, podělit se o nějaké triky, které zlepší jak kvalitu, tak i úroveň vašich stránek.

Nejsou to žádné novinky, avšak mnoho lidí o tom neví.

 

  • Na začátek pár všeobecných poznámek
    1. Optimalizujte, protože optimalizace je důležitá věc. Webová stránka by měla vypadat stejně při všech typech prohlížečů či rozlišení. Správně by stránka neměla přesahovat 800px na šířku, ale v dnešní době je to už 1000px. Protože je stále dost uživatelů s rozlišením 1024x768, jedná se hlavně o kancelářské PC či menší notebooky, tak by jsme stránky neměli dělat širší neboť poté musí uživatelé scrollovat.
       
    2. V CSS není na škodu určovat, pro který element daný kód je.
      div#Container {
   /*Nějaký kód*/
}


      Tato část bude fungovat pouze na elementech DIV s id="Container"; Pokud by tam bylo span#Container, tak funguje pouze na elementu SPAN
       

    3. ID [#] je hlavní identifikátor, který může být v HTML kódu použit pouze jednou, třída CLASS [.] může být použita opakovaně
       
    4. Každý element může mít i více přiřazených tříd
      Příklad:
      //v HTML
<span class="cervene podtrzene tucne">Text</span>

//v CSS
.cervene {
   color: red;
}
.podtrzene {
   text-decoration: underline;
}
.tucne {
   font-weight: bold;
}


      !!POZOR!! Tohle neplatí u ID

    [*]Tlačítka s obrázkem na pozadí

    Mnoho z Vás používá tlačítka, na jejichž pozadí je obrázek, který měníte po najetí myši.

    Ale to, co z Vás většina neví, je to, že po najetí zobrazovat jiný obrázek je hloupost, navíc to zabírá další místo a obrázek, po najetí myši, se musí stahovat, tudíž chvíli nejde vidět.

    Řešením je background-position. Obě tlačítka budou v jednom obrázku.

     

    Příklad:

    Máme obrázek o rozměrech 177x64px. Na horních 32px je tlačítko před najetím myši a ve spodní části je tlačítko po najetí myši.

    tlacitko.png

     

    CSS tedy vypadá následovně:

    a.tlacitko {
   width: 177px;
   height: 32px;
   background: url(bg-tlacitko.png) 0 0 no-repeat;
}
a.tlacitko:hover {
   background-position: 0 -32px;
}

    Zde také můžete vidět další tip a to ten, že v části :hover neuvádím vše znovu, ale pouze uvádím to, co chci aby bylo jinak oproti původnímu kódu.

    [*]Některé věci jsou dávno pasé

    Zde také mnoho lidí chybuje. Lidé stále využívají HTML TAGy či atributy, které by se již používat neměly.

    Jsou to takové TAGy a atributy, které už dlouho zůstaly nedotčeny a mohou být i odstraněny z podpory prohlížečů neboť se místo nich používá CSS anebo jiné možné řešení.

     

    Z TAGů jsou to například:

    • <center>

      body {
   text-align: center; /*Zarovnání obsahu stránky -> Internet Explorer; text-align se určuje nadřazeně pro prvek, který chceme zarovnat; text-align se dědí na podřazené elementy, tzn. pokud chcete poté text v levé části, musíte mu určit text-align: left;*/
}
div#Container { /*Je to DIV s id=Container uvnitř <body>*/
   margin: 0 auto; /*Zarovnání tohoto prvku na střed pro všechny prohlížeče kromě Internetu Explorer*/
   text-align: left; /*Jak jsem již uváděl, text-align se dědí, jelikož chci text nalevo, musím to změnit*/
}


      CSS řešení tohoto TAGu

       

    • <font>

      Font je TAG, který už docela vymizel. Je to starý tag, který jde nahradit například pomocí
      <span>

      Ten sice nemá možnost zápisu takových atributů jako <font>, ale atributy jsou přesně to, čeho se chceme zbavit.

      // v HTML
<span class='test1'>Text, který budeme upravovat</span>
// v CSS
span.test1 {
   color: red; /*nahrazení atributu color="red"*/
   font-size: 15pt; /*size="3" - navíc tímto určením se nemusíte dostat na velikost jakou chcete lze totiž určit jen 1 až 7*/
   font-family: Times New Roman, Arial; /*face="Times New Roman, Arial"*/
   /*Dále lze určit*/
   text-decoration: underline; /*Podtrženo*/
   font-weight: bold; /*Tučné písmo*/
   font-style: italic; /*Kurzíva*/
   /*Je toho více, ale tohle jsou snad základní úpravy co mě právě napadly*/
   font: italic bold 15pt Times New Roman; /*Zkrácený zápis; font: [font-style] [font-weight] [font-size] [font-family];*/
}


       

    • <iframe> a jiné varianty tohoto rámu

      Rámy ty už by se neměly používat vůbec. Je to velmi stará záležitost. Mnohem lepší je použití PHP.

    [*]Základní SEO

    Jako první uvedu příklad správně uspořádané stránky a poté okomentuji:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
       <meta http-equiv="content-type" content="text/html; charset=UTF-8">
       <meta name="author" content="Roman Jámbor">
       <meta name="robots" content="All, Follow">
       <meta name="description" content="Krátký popis webové stránky.">
       <meta name="keywords" content="Klíčová, slova, oddělena, čárkou">\n";
       <script type="text/javascript" src="./scripts/script2.js"></script>
       <link rel="stylesheet" type="text/css" href="./styles/style.css">
       <!--[if IE]><link rel="stylesheet" type="text/css" href="./styles/ie.css"><![endif]-->
       <link rel="icon" href="./images/favicon.ico" type="image/x-icon">
       <title>Titulek stránky</title>
   </head>
   <body>
       <div id='Container'>
           <div id='Header'>
               <h1>Hlavní nadpis stránky</h1>
               <h2>Zde může být nějaký ten slogan</h2>
           </div>
           <div id='Content'>
               <h2>Nadpis článku</h2>
                   <p>Všechny <strong>články</strong>, texty, atp. by měli být umístěny v <strong>odstavci</strong> s TAGem P</p>
           </div>
           <div id='Footer'>
               <p class='copyright'>© Copyright......</p>
           </div>
       </div>
   </body>
</html>

    1. Stránka musí být vždy validní

    2. Musí obsahovat
      vyplněný
      titulek

    3. Titulek by se měl měnit při chůzi po stránkách (pokud otevřu článek, měl by obsahovat název článku)

    4. Všechny zde uvedené metatagy by měly být vyplněny

    5. JavaScript a CSS by měl být umístěn v externích souborech

    6. Nepoužívat atribut style="" - někdy je to opravdu nutné (při práci s JavaScriptem), ale snažit se jeho použití vyhnout

    7. Stránka by měla obsahovat právě jeden <h1> hlavní nadpis. Je dobré do něj uvést důležité informace specifické pro vaši stránku či název vaší stránky

    8. Nadpisy by měly být správně strukturované, po nadpisu <h1> musí následovat <h2> nikoli ho vynechat a napsat rovnou <h3>, protože má menší písmo textu (velikost si upravte v CSS)

    9. Všechny texty umisťovat do odstavců <p>

    10. Místo <b> používat <strong> - nemám to zvláště potvrzené, ale <strong> je pro vyhledávače důležitější než <b> neboť to bere jako zvíraznění pro oko a <strong> jako důležitou "silnou" věc

    11. U <img> musí být vyplněn atribut alt="", na který hodně lidí rádo zapomíná.

 

Zatím je to odemně vše. Možná časem doplním, pokud si na něco vzpomenu, popřípadně pokud máte nějaký problém, tak jej napište a pokusím se odpovědět.

Věřím, že se zde najdou tací, kterým se bude tento článěk hodit, ale i tací, kteří budou mít dosti připomínek.

Myslím si, že i SEO bude dosti komentované, ale tohle jsou jen základy, které jsou podle mě učiným řešením na zvýraznění obsahu stránky.

 

Uplně na závěr odpovím na podnadpis tématu:

Proč to dělat jednoduše, když to jde i složitě?

Protože Vaše stránky jsou Vaše reprezentace.

Na tu otázku by šla napsat celá slohová práce, ale myslím si, že toto jako základní odpověď stačí.

Edited by Hookyns
  • Upvote 6
  • Downvote 1

Share this post

Link to post
Share on other sites

bobisu    136

bobisu
Posted

Nevím no...tohle se dá vygooglit za pár sekund. Určitě se snaha cení, ale ani na +rep to není..alespoň odemě...ale zkus napsat něco užitečnějšího ;) Snad příště.

 

 

Peace.

Share this post

Link to post
Share on other sites

Eessencia    1069

Eessencia
Posted

Mám stejný názor jako bobisu, je to fajn, ale ne na + rep.

Ocenil bych spíše kdyby jsi vysvětlil něco, co zde zdejší komunita hledá.. Třeba jak vytvořit jednoduchou PHP registraci pro server (pretbc, tbc, wotlk, cata...), řádně to okomentoval a nakonec předhodil kód ke stažení.

Mno prostě věci, které tu každý hledá (i když tu jsou), atp.

Share this post

Link to post
Share on other sites

Hookyns    86

Hookyns
Posted (edited)

Njn, vygooglit se to dá, tak jako všechno ostatní na tomhle fórku.

Šlo mi o to, že ti co s tímhle mají problém, ani neví, že s tím mají problém, protože si myslí, že to dělají správně.

Tudíž nemají důvod googlit řešení :)

Nepsal jsem to pro +rep (ta se zde dává jen některým lidem i za banální příspěvěk, ale že je to ten dotyčný +rep ;), ještě řekněte, že to není pravda.)

Psal jsem to pro to, že většina lidí z tohoho fóra, kteří mají web, tam tyhle chyby mají. A google? Proč ho tedy nepoužili? Protože o svých chybách neví, proto je zde tento článek.

 

EDIT: překlep

Edited by Hookyns

Share this post

Link to post
Share on other sites

Wladass    1216

Wladass
Posted

Chyby v Základní SEO jsou schválně, nebo jen nemáš správné informace, nebo jak to mám chápat ?

  • Upvote 1
  • Downvote 1

Share this post

Link to post
Share on other sites

Hookyns    86

Hookyns
Posted (edited)

Příjde na to, které věci myslíš.

Je možné, že jsem něco napsal špatně, ale vše co jsem uvedl jsou dle mého základní věci, kterými člověk získa 100% při SEO analíze.

Poté jde už o jiné věci jako je například link building, atp..

Pokud je tam něco, z toho co jsem tam uvedl, naprostý nesmysl, rád se poučím.

Edited by Hookyns

Share this post

Link to post
Share on other sites

STONERSVK    899

STONERSVK
Posted (edited)

dovoluju si svama nesuhlasit, delate tu vsichni judgement bitche, ze to neni na rep, ale konecne se to objevi neco normalneho, sak kdyz to pro vas neni urcene a vas to nijak neobohati tak to ani nectete, autor to urcite neadresoval pro vas, .ale pro ty kindery co tu kazde rano ted breci na hulakadlo ze musi jit do skoly

 

:D

 

ne srandaa :D ale tak chapete to, dit porovnajte tenhle topic s jinym topicom

Edited by STONERSVK
  • Upvote 1

Share this post

Link to post
Share on other sites

Nex    159

Nex
Posted

Mě pomohlo to pozicování..teda pomůže až to budu dělat...zatím nepoužívám dvoje obrázky.

Share this post

Link to post
Share on other sites

ntdrt    29

ntdrt
Posted (edited)

Kdyby se podle toho řídil každý, kdo se (tady) pokouší dělat web, bylo by to doslova úžasné...

 

  1. Obecně: Trkl mě doctype, HTML 4 je trochu out (a hlavně je to katastrofa), ideálně použít sílu HTML 5, ale ty hlavně popisuješ XHTML 1.0.
  2. CSS: konkrétní zápis (například "div#header") u ID je logicky zbytečný, jelikož jak říkáš - ID je jen jedno, proto je zbytečné ho blíže specifikovat, tenhle zápis se používá na ušetření slov, tady ale ušetřit nejde...
  3. CSS: Psát velká písmena se nemusí vyplatit, pochybuji o case-senzitivitě ve všech prohlížečech (jó ten šikula IE umí věci) a když už tak alespoň "camelCase", ať to nějak vypadá (a má smysl).
  4. SEO: Používat "description" v meta je sebevražda, tomu se určitě vyhnout (v opačném případě vás Google i Facebook profackuje).
  5. SEO: Pár věcí HTML 5 razantně mění, tudíž znova doporučuji napsat nějaké info, že toto jsou doporučení pro XHTML, nikoliv pro HTML...

 

EDIT: Ještě musím pogratulovat, jsi jeden z mála lidí na tomhle fóře, který ví o čem píše... Tohle není na plus? Dobře v tom případě reputaci zrušte, jelikož si jí nezaslouží nic.

Edited by ntdrt
  • Upvote 1
  • Downvote 2

Share this post

Link to post
Share on other sites

Hookyns    86

Hookyns
Posted

Kdyby se podle toho řídil každý, kdo se (tady) pokouší dělat web, bylo by to doslova úžasné...

 

  1. Obecně: Trkl mě doctype, HTML 4 je trochu out (a hlavně je to katastrofa), ideálně použít sílu HTML 5, ale ty hlavně popisuješ XHTML 1.0.
  2. CSS: Psát velká písmena se nemusí vyplatit, pochybuji o case-senzitivitě ve všech prohlížečech (jó ten šikula IE umí věci) a když už tak alespoň "camelCase", ať to nějak vypadá (a má smysl).
  3. SEO: Používat "description" v meta je sebevražda, tomu se určitě vyhnout (v opačném případě vás Google i Facebook profackuje).
  4. SEO: Pár věcí HTML 5 razantně mění, tudíž znova doporučuji napsat nějaké info, že toto jsou doporučení pro XHTML, nikoliv pro HTML...

 

EDIT: Ještě musím pogratulovat, jsi jeden z mála lidí na tomhle fóře, který ví o čem píše... Tohle není na plus? Dobře v tom případě reputaci zrušte, jelikož si jí nezaslouží nic.

K bodu 2.

normálně používám jen malá písmena, ale schválně jsem to testoval (chtěl jsem zvýšit přehlednost) a i IE to podporuje, tak jako zbytek používaných prohlížečů.

 

Že IE je šikula to vím. xD Někdy s ním bojuji jak z důvodu CSS tak JS.

Možná dopíši věci, které jsou IEčkem vyobrazovány rozdílně a také řešení na ně.

K bodu 3.

Zatím jsem s description problém neměl, ale zkusím se podívat na nějaké nové podklady.

Share this post

Link to post
Share on other sites

ntdrt    29

ntdrt
Posted (edited)

Jo ještě odůvodnění, ať tu jen netlachám jako ostatní.

 

Description je sebevražda na portálu nebo někde, kde chcete mít aktuální popisek stránky. Hodne parserů nejdříve hledá "description" a ten dá jako popisek stránky (=logicky správně ale prakticky ŠPATNĚ), jelikož tento tag má 90% webů statický, tím pádem popis neodpovídá odkazu. Když ho smažete, parser veme úrivek z textu (=logicky špatně ale v praxi je to většinou, to co chcete).

 

Pro SEO (vyhledávače :)) je tady více friendly tag smazat.

Edited by ntdrt

Share this post

Link to post
Share on other sites

Hookyns    86

Hookyns
Posted (edited)

Je to sice podvod proti vyhledávačům, ale je to logicky lepší.

Description byl vytvořený proto, aby obsahoval základní popis stránky a lidé věděli, co na těch stránkách bude.

Jak si psal, na portál, fórum či podobné weby je lepší description nemít, ale na klasický, takřka statický web, což jsou třeba stránky WoW, není na škodu description uvést ne?

Jinak děkuji ti za uznání mého topicu.

 

EDIT: Ale kdyby byl description dinamický, tak je to lepší, než ho nemít ne? Protože přece jen má <meta> přednost před textem

 

EDIT - pro příspěvek podemnou ;)

EDIT: Samozřejmě že dynamický description je špička, ale kdo bude furt zadávat 200 znaků textu?

PHP to vyřeší, není takový problém sepsat funkci, která poskládá dobré description.

Já využívám PHP na dynamický <title> u některých rozsáhlých webů.

Edited by Hookyns

Share this post

Link to post
Share on other sites

ntdrt    29

ntdrt
Posted (edited)

Podle mě, web kde jsou novinky -> description škodí (takže všude). Tady se ani nejdná o to, co bylo plánováno (a tedy logicky správně), jedná se o SEO (to je z většiny případů jenom obcházení a samej hack, například tebou zmíněný linkbuilding - umělé tvoření linků).

 

EDIT: Samozřejmě že dynamický description je špička, ale kdo bude furt zadávat 200 znaků textu?

 

Stačí proťuknout Gůgla a hned ti dá mnoho diskuzí na tohle téma, já na to narazil v praxi, když si zákazník stěžoval, že mu stránka všude hází ten samej text :).

Edited by ntdrt
  • Downvote 1

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing Web
×