Jak vytvářet obsah na Blender3D.cz

V tomto článku se "trusted users" dozví základní pravidla pro vytváření obsahu těchto webových stránek. Všechna pravidla při vytváření obsahu plynou z toho, že každý zveřejněný dokument na www.blender3d.cz musí být validní XHTML/CSS2 dokument. Pokud stránka neprojde buď validátorem xhtml nebo css2 tak si administrátoři www.blender3d.cz upřednostňují práva takový dokument vyřadit z jeho obsahu.

Dále by se autoři článků měli maximálně snažit, aby jejich články neobsahovaly žádné pravopisné a stylistické chyby. Při psaní článku myslete na to, že svým výtvorem nereprezentujete jen sami sebe, ale také celou uživatelskou komunitu programu Blender. Článek by měl po grafické stránce zapadat do rozhraní tohoto webu.

Teorie

Jak již bylo zmíněno výše, tak dokument uveřejněný na www.blender3d.cz musí být validní xhtml dokuemnt. Co z toho plyne? Například třeba to, že narozdíl od html dokumentu je forma v xhtml striktne oddělená od obsahu. Forma zobrazení je definována kaskádovými styly, které uživatel nemůže měnit. Tím se docílí toho, že dokumenty uveřejňované na těchto stránkách budou mít podobný a profesionální vzhled. Použití předdefinovaných kaskádových stylů a obecných zásad při vytváření xhtml dokumentů naleznete v následujícím textu. Tento text si ovšem neklade za cíl být podrobným manuálem k xhtml, pouze ukazuje základní vlastnosti a konstrukce.

Nadpisy

Nadpisy jednotlivých sekcí článku se mohou vytvářet pouze pomocí tagů <h3> až <h6>. Tag nadpisu nesmí být uvnitř tagu pro odstavec! Za nadpisem může následovat libovolné množství odstavců.

Odstavce

Odstavce musí začínat tagem <p> a končit tagem </p>. Každý text nesoucí nejakou informaci by měl být "uzavřen" do odstavců. Odstavce by neměli obsahovat řídící tagy, které tam nepatří, tak aby dokument byl validní.

Anotační obrázek

Každý článek by měl začínat anotačním obrázkem, který avizuje o čem bude článek pojednávat. Anotační obrázek může být ve formátu .jpeg .gif nebo .png. Anotační obrázek musí mít pevně danou velikost 90x90 pixelů. Bílý nebo tmavý okraj kolem obrázku vytváří automaticky kaskádový styl. Aby se obrázek choval jako anotační, tak je nutné obrázek "umístit" do následující konstrukce:

<span class="anotacni_obrazek_tmavy">
<img src="./files/anotacni_fotka.jpg"
alt="anotacni_fotka" />
</span>

Pokud je anotační obrázek tmavý, tak za klíčovým slovem span následuje class="anotacni_obrazek_tmavy". Pokud je anotční obrázek světlejší než pozadí, tak se použije tato konstrukce class="anotacni_obrazek_svetly". Kaskádové styly pak podle toho vytvoří kolem obrázku bílý nebo tmavý rámeček.

Anotační obrázek nesmí být nevkusnou zmenšeninou. Pokud je to možné snažte se anotační obrázek vytvořit pomocí výřezu nezmenšeného obrázku. Pokud to není možné, tak výřez zmenšujte co nejméně, tak aby z anotačního obrázku bylo na první pohled patrné, co se na něm nachází. Když už obrázek zmenšujete (Gimp, Photohop, atd.), tak k tomu používejte i nějaký "vyhlazovací" algoritmus (např. lineátní nebo kubickou interpolaci).

Vkládání obrázků obecně

Vložení obrázku na příslušné místo v xhtml dokumentu se provádí pomocí následující konstrukce:

<img src="./files/obrazek.jpg" alt="popis obrazku" title="popisek" />

Obr. 1. Popisek pod obrázkem
musí obsahovat číslování

Cesta k obrázku bude obsahovat cestu do adresáře ./files. Každý obrázek musí obsahovat popisek alt="popis obrazku". Každý obrázek by měl obsahovat položku title="popisek". Daný popisek se zobrazí nad obrázkem, pokud nad něj přesuneme kurzor. Každý samostatný řídící tag musí v xhtml dokumentu nakonci obsahovat znak /, což je případ i řídícího tagu pro obrázek. Pokud jakýkoliv obrázek v článku nebude mít na konci znak / nebo nebude obsahovat alt="popis obrazku", tak takovy článek nebude akceptovan!

Obrázky můžeme pomocí kaskádového stylu umisťovat na levou nebo pravou stranu. V takovém případě dojde k obtékání textu daného obrázku. Obtékané obrázky by neměly být širší jak 300 pixelů, což je polovina šířky článku. Pokud by byl obrázek širší, tak to nebude působit příliš dobrým dojmem, protože zarovnávání do bloků by vytvářelo mezi slovy příliš velké mezery. Je-li obrázek širší jak 300 pixelů tak by měl být umístěn na střed stránky. Obrázek umístěný na střed stránky nebude obtékán textem.

Obr. 2. Pokud je obrázek zároveň odkazem
na nějaký soubor tak jeho popisek musí
obsahovat typ souboru a jeho velikost.

Popisek pod obrázkem musí obsahovat číslování (př.: Obr 1.). Takové číslování pak zlepšuje orientaci v textu. Pokud by popisek pod obrázkem byl příliš dlouhý (byl by širší jak vlastní obrázek), tak nezapomeňte jeho text na patřičných místech zalomit pomocí <br/>. Příliš dlouhý popisek by způsobil zatlačení obtékaného textu na pravou nebo levou stranu.

Pokud budete vytvářet screenshoty z Blenderu nebo z jiného programu (např. Gimp, Photoshop, apod.) tak se snažte aby screenshoty nebyly zmenšené. Je lepší použít screenshot s výřezem části, která je zajímavá než nic neříkající zmenšený screenshot celé obrazovky, z které není nic vidět. Dále myslete na lidi, kteří používají dial-up (v České republice je jich stále valná většina). To znamená používejte obrázky ve formátu .jpg, které mají dobrý kompresní poměr. Rozhodně nepoužívejte animované gify! Když nastane situace, kdy je nutné mít v článku velký screenshot, tak použíjte jeho výřez nebo rozumnou zmenšeninu jako odkaz na jeho nezměněný originál.

Příklad zdrojového xhtml kódu, který obrázek s popiskem umístí k levé straně a zajistí jeho obtékání.

Obrázek zarovnaný k pravé straně by měl místo obrazek_vlevo klíčové slovo obrazek_vpravo.

Obr. 3. Příklad obrázku
zarovnaného na střed

Na předchozím obrázku můžete vidět příklad zarovnání obrázku na střed. Zarovnání obrázku na střed dosáhneme použitím třídy obrazek_stred. Při zarovnávání obrázku na střed nezapomeňte taktéž na jeho popisek!

Poslední poznámka. Pokud někde odkazujete na obrázek nebo i na jiný soubor, který se nachází na tomto serveru, tak používejte relativní, nikoliv absolutní, cestu k danému souboru.

Přílohy (načítání obrázků na server)

K načítání obrázků na server slouží dialog na konci stránky. Příloha může být veliká maximálně 1MB.

Zalomení náhledu

Pokud budete vytvářet článek, nebo stránku, jejíž "odkaz" bude umístěn na úvodní straně tohoto serveru, nebo se bude nacházet v nějakém seznamu článků, tak drupal vytváří jakýsi "náhled" k tomuto článku. První, co uživatel z vašeho článku vidí je tento náhled. Systém Drupal náhled automaticky generuje z prvních několika řádků daného článku. Tudíž každý článek by měl na začátku obsahovat výše zmiňovaný anotační obrázek. Místo "zalomení" náhledu lze určit vložením speciálního komentáře do xhtml kódu:

<!--break-->

Takový komentář samozřejmě nebude zobrazen ani v náhledu ani v samotném článku, pouze určí přesné místo, kde bude ukončen náhled článku.

Formáty textu

K vytváření obsahu lze používat různé filtry, které většinou přinášejí akorát problémy. Nastavení filtru se nachází na konci stránky. Defaultně je zapnutá volba Full HTML. Doporučujeme tuto volbu neměnit!

Offline vytváření článků

Pokud by jste chtěli vytvořit článek a teprve potom ho vložit do systému Drupal (Drupal je CMS systém, který pohání www.blender3d.cz), tak jsme vám vyšli vstříc a vytořili jsme "šablonu" (.tgz 91KB), která vám umožňuje vytvořit článek a mít přesný přehled o tom, jak bude výsledný článek vypadat na www.blender3d.cz.

Horizontální linka

Příklad horizontální linky, která má 90% šířky článku a má charakteristickou orančovou barvu. Horizontální linku vytvoříte pomocí tagu <hr/>. Nezapomeňte na lomítko!

Tato stránka je stále ve výrobě!