Jak se ničeho nebát aneb tutorial

Každej máme něco, co můžeme poslat dál… Jestli nechceš žít jenom fejsbůčkem, je tady pro tebe prostor, kde můžeš tvořit, sdílet, nebo jen tak být… Tenhle web nemá být handmake work jednoho človíčka, ale má spojovat a propojovat vícero živočochů, který zajímá život okolo nich… Je to místo, kde můžeš předat, cokoliv a kdykoliv…páč jen díky tomu, může obsah těhle stránek dejchat…

Proto se ničeho neboj a dej ostatním svoje chaotický myšlenky, kýčovitý obrázky z fotoalbíček, kontroverzní, pseudoartový videjíčka… nebo jen radosti, který se snažíš v životě nacházet…

Registrace

Psát příspěvky nemůžeš, dokud připojenej nejsi. V menu kliknout stačí na položku Neboj se, připoj se. Dále jen tlačítko Continue with facebook a je to (jméno a heslo musí vyplnit pouze lidé, kteří nemají facebook).

Login

Vítej na druhé straně. Tady můžeš tvořit. Naskočí ti stránka tvého profilu – jestli chceš, vyplň jméno a hurá do toho… Vypadá to nějak takhle…

Nastenka

Tvorba

Na co důležitýho se dá kliknout… Vlevo nahoře Ničeho se neboj tě přehodí na druhou stranu. Z diváka na autora, nebo naopak. Úvodní nástěnka slouží jak název napovídá k nastínění toho co se děje a co je. Nahoře tlačítkem Nastavení zobrazených informací můžeš si stránku zůtulnit a zrychlit proces budoucí. Jednotlivá pole se dají přesunout a tak si můžete dát nahoru buď nejnovější příspěvky, komentáře, nebo peřehled všech událostí, stránek…

Nahoře je lišta a na té liště + které slouží k vytvoření nových příspěvků, stránek, událostí, downloadů atak.

Vytvořit můžete buď Stránky vs. příspěvky. Stránky jsou obsáhlejší. Většinou delší a nevážou se na nějakej konkrétní datum. Je možnost se k nim vracet, aktualizovat je, měnit. Defaultně u nich nejsou komentáře, ale dají se zapnout. Příspěvky jsou kratší, většinou spíš výkřiky ve stylu narazil jsem na zajímavý odkaz…, spadají jsem i věci, které přísluší k nějakému datu (takže se stanou neaktuálními jednou).

Příspěvek

Tak hezky odzhora. Na název přijde asi každej sám. Dvojka je přepínač zobrazení mezi tím jak napsaný text vypadá, a mezi kódem, z kterého je text tvořen(dobrá správa je, že jsem to udělal tak šikovně, že žádný kód potřebovat nebudete). Trojka je to co chcete přidat. Obsah je na vás. Důležité je používat správně nadpisy. A to ve správném pořadí. Nadpis jedna už nepoužívejte, to je název stránky. Používejte hodně nadpis 2. Pokud si budete psát článek ve wordu, nadpisy se zachovají. To jak vkládat obrázky a podobně bude dál (je to zjednodušený jak jen to šlo). 4 je překlad. Zatim nechte prázdné. Napíšu o něm víc dál. U 5 je nejvíc nejdůležitější Náhled. Ten vám ukáže jak stránka vypadá v současném stavu (nepoužívat víc než je nutné (bere to čas)). Uložit koncept vs. publikovat. Uložit koncept znamená, že se vše uloží a příště se k tomu můžete vrátit a pokračovat. Článek uvidí i ostatní uživatelé, ale pouze ti, kteří jsou přihlášeni a nemůže jej vidět nikdo z náhodných kolemjdoucích. Stav znamená, jestli je článek hotový, nebo potřebuje dodělat. Soukromý znamená, že článek je hotový, ale uvidí ho jen přihlášení lidé.

tutorial

6 je kus textu o článku, který je zobrazen na zdi a v jednotlivých rubrikách. Stručně dvě, tři věty o čem to je. 7 je zase text, který zobrazí google ve vyhledávači pokud kliknete na upravit náhled. Pokud se chcete hodně crcat s tím, tak pod ikonkou semaforu je sdílení a tam lze  nastavit obrázek, který se zobrazí na facebooku když odkaz někomu pošlete. 8 je very importnt. Jsou to jednotlivé rubriky kde se článek zobrazí. Téměř vždy budete používat zeď. Je možné dát článek do víc rubrik najednou. Člověk potom může projíždět buď jen články, nebo naopak jen hudbu… 9 je náhledový obrázek. Tedy obrázek který k příspěvku patří a který se může někde s ním zobrazit (teď nikde vidět není, to ale neznamená, že tam nemá žádnou funkci, více viz  sémantický WEB, nebo WEB 2.0). Když jste hotovi, zmáčkněte publikovat. Pokud potřebujete s něčím poradit, nebo něco udělat, můžete napsat na face skupinu Ničeho se neboj, nebo zkuste napsat co potřebujete do nového příspěvku, který přidáte do kategorie Pomáháme.

!! Web je navržen tak, aby jste nemuseli měnit velikost písma ani font. Nadpisy, citace a podobně mají vše defaultně nastaveno. Díky tomu budou stránky vypadat jakžtakž jednotně. Proto prosím font ani velikost písma neměňte. Nepoužívejte moc ani enter. Vše by mělo být správně odsazeno automaticky. Pokud ne, tak pište. Buď na Facebookovou skupinu, nebo na info@nicehoseneboj.cz. !!

Když máte příspěvek hotovej, šup s nim na facebookovou stránku Ničeho se neboj. Rozdíl mezi skupinou a stránkou je ten, že stránka je souhrn nových (nebo i starých) příspěvků ze stránky (stay in contact), zatímco skupina je o lidech, chatování, jak se daří, jak udělám tohle, slyšel jsem parádní písničku atak.

Úprava stránek

Není třeba vymýšlet vymýšlené. Cílem tohohle webu není jen přidávat stránky, ale i upravovat stávající. Ideálně aby to trochu žilo, měnilo se to a vyvíjelo. Když projíždíte webem a něco vás zaujme (třeba chcete přidat obrázek, nebo přidat odkaz, nebo úplně změnit text…) stačí nahoře na liště kliknout na Upravit stránku a stránku upravit. Velkým pomocníkem je tlačítko kopírovat stránku jako koncept. Zkopíruje vám to stránku se vším všudy… formátování, vzhled, rozvržení stránky zůstávají. Takovej rychlopostup je, že najdete stránku, která je přibližně rozvržená tak, jak u vašeho vysněného článku. Zkopírujete, nahradíte text, nahradíte obrázky a hotovo. Můžete taky kopírovat pouze kousky různých článků nebo použít stánku s různými funkčními celky a vzory k použití aneb Snippety, vzorky, ukázky. Pokud kopírovaný kousek nefunguje, změňte režim z textu do HTML (viz 2) a zkopírujte i znaky v ostrých závorkách <> před i po objektu. Občas se dají použít shortcody které jsou v hranatých závorkách []. Namísto textu Button se tak může zobrazit button.

Obrázky, fotky

Jsou tři formy jak přidat obrázky. První je přidat obrázek do článku, další je přidat pozadá, a poslední je vložit fotky do galerie.  Je dobré vkládat obrázky s rozumnou velikostí. Zaprvé rozlišení, zadruhé velikost obrázku. Nesmí být příliš malé rozlišení, aby obrázek nebyl kostičkovaný, a nesmí být moc velký, aby se stránka nenačítala příliš dlouho. Pomůže například JPEGmini na hromadné zmenšování jpeg (free verze do 20 fotek za den). IrfanView na hromadné miniúpravy (například snížení rozlišení). Na hromadné zvýšení rozlišení pak najít například torentfree verzi PhotoZoom. Nejrychlejší je mít všechny obrázky někde pohromadě a upravit je hromadně, ušetří to dost čas, ale pokud si chcete s obrázkem vyhrát, asi nejlepším pomocníkem je Photoshop, který se v hlubinách internetu sehnat nechá. Přibudou lehké tutoriály co s tím. Pokud už umíte, parádní položkou je pak místo klasického save vhodnější Save for web. Na fotografie doporučuji JPG (to samé jako JPEG). Komprese JPEGU pak okolo 90 nebo 85. Na v počítači malované věci a věci co jsou průhledné (což dost působí, protože nečtverec) doporučuju PNG. Když stáhnete obrázek z internetu, je už většinou optimalizovaný, takže to se týká spíš jen vašich fotek. Ideálně optimalizované obrázky mají podle velikosti okolo 50 až 300 KB. Nezapomínejte taky na GIFY, protože co se hýbe, to je hezké.

Do článku přidáme obrázek tak, že nad obsahem příspěvku kliknu na Mediální soubory. Označíme obrázek/všechny obrázky a drag and drop přetáhneme mezi ostatní. Počkáme až se načtou a vpravo vyplníme název, pokud je jiný než název souboru (místo mezer dáme pomlčky). Titulek, totiž popisek obrázku hned pod ním, napsaný menším fontem. Jedním, dvěma slovy alternativní popis (slouží pro tzv. sémantický web, aneb proč vám google zobraxí obrázek aniž ví co je na něm… (zatím)). Pod tím je URL odkazu – většinou necháváme žádné, tedy že na obrázek nejde kliknout… (přes pravé tlačítko však lze stáhnout). Další možností je mediální soubor. To znamená, že na obrázek lze kliknout a zobrazit ho tak na celou stránku, což je dobré pro obrázky s hůře viditelnými detaily jako je text. Poslední vhodnou možností je obrázek jako odkaz, tedy že vás kliknutím dostane kam chcete. Máte na výběr z pár základních velikostí. Pokud vám žádná nevyhovuje, můžete v editoru kliknout do rohu a zvětšit, zmenšit svobodně jako ve wordu. Já používám rozlišení 1920 x 1080 (rozlišení mého monitoru) pro obrázky v článcích které nejdou zvětšovat a jsou velké skoro přes celý monitor. Následně je ale zmenším, protože menší jsou hezčí a nevíc nemusíte tolik rolovat potom. Používám buď 800 px pro obrázky kde je potřeba něco vidět (jako například text) nebo dávám 600 px pro obrázky pro okrasu.

Další možností jak vložit obrázek, je vložit obrázek jako pozadí, kde by celková velikost obrázku méně než 1920 px na šířku být neměla. Pozadí může být narozdíl od mediálního souboru v obrazovce a tak je pořád na stejném místě ať rolujete jak rolujete. Pozadí je také možné vkládat do rubrik.

Zkoprujte toto do dolního okna Custom CSS (zkopírováno ze stránky Snippety, vzorky, ukázky.)

.site {
background-color: #000;
background-image: url("https://nicehoseneboj.cz/domains/nicehoseneboj.cz/wp-content/uploads/2016/11/WDF_784646sds.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}

Nejdříve přidám obrázek abych se na něj mohl odkázat. V levém panelu klikněte na Média a tam na Přidat soubor. Přetáhněte obrázek do čtverce pro přetažení, uploadujte a po chvíli až bude hotovo, dejte podrobnosti. V podrobnostech zkopírujte adresu a změňte adresu https://nice….. na novou. Otevřete navrženou stránku, zmáčkněte Ctrl + Shift + C  a v konzoli si odlaďte velikost a pozici background-position: 0% 0%; Možno taky v pixelech. Pokud nevíte, hodnotu smažte a zmáčkněte šipku dolů – nabídne vám to možné hodnoty. Pokud chci aby pozadí rolovalo s obsahem, tak dám background-attachment: scroll; pokud nefunguje, zkusím před středník dát !important

Poslední používanou variantou je vložit galerii fotek. Tady naopak dávám vysokou kvalitu. Fotky se nenačítají všechny najednou, ale po té, která je zrovna zobrazená. Navíc to jsou často fotky, které si lidé stáhnou a podívají se na ni v počítači, takže full kvalita, klidně rozlišení 4000 a 2MB (kompresi JPEG ale prosím ano). Zprovoznil jsem 2 základní galerie. První je v takovémto stylu  Hezké obrázky, druhá v takovémto Existenční přebytek. První používám na fotky přátel, druhou na obrázky, ale záleží jak komu vyhovuje.

První přidáte takto:

V levém panelu najedete na Envira Gallery a dáte Nová galerie. Přetáhnete fotky a dáte vytvořit. Následně kliknete na úvodní Envira gallery panel a zkopírujete shortcode tam, kde chcete galerii zobrazit. Shortcode bude vypadat nějak takhle (envira-gallery id=”9674″) akorátže s hranatými závorkami.

Druhý takto:

V levém panelu pod kolonkou Gmedia kliknete na kolonku Album. Vyplníte název a dáte vytvořit album.

Tutoria galerie

Album je složka do které můžu dát různé fotky. To udělám tak, že kliknu na Add/Import files, přetáhnu z počítače do okna a vlevo pod kolonkou Add to album vyberu mnou vytvořené album. Dám Start upload a počkám (může to docela trvat). Další štací je vytvořit galerii, což je forma, kterou se budou fotky zobrazovat a přiřadit k ní album. Pod kolonkou Galleries zvolím Create gallery, dále zvolím Phantom a v následujícím okně zvolím Module Presets a preset Asi Ho.

Potom kliknu na zelené tlačítko Build query a pod kolonkou albums zvolím své album. Jedem do finiše, už jenom přidat galerii do příspěvku. To uděláte tak, že zkopírujete shortcode, který je u každé vytvořené galerie tam kam potřebujete a může vypadat třeba takhle (gmedia id=12), jen s hranatými závorkami.

Videa

Zase 2 možnosti. Buď vlkádejte videa z youtube, stačí sem zkopírovat adresu do editoru. Dále je možné nastavit velikost a to, jestli se video automaticky spustí. Pokud chceme mít kontrolu nad velikostí videa a nad tím, zda se pustí automaticky (vřele doporučuju) pak zkopírujte tento snippet

iframe src="https://www.youtube.com/embed/HyUbpg9BsEU" width="853" height="480" frameborder="0" allowfullscreen="allowfullscreen"></iframe 
před kód dejte < a za něj > (nedal jsem to tam, protože jinak by se mi zobrazilo video a ne kód)

Adresu za src nahraďte adresou videa. Ne ale přímou z vyhledávače. Klikněte pod videem na sdílet, potom na vložit a tu adresu za src zkopírujte. Pokud nechcete aby se video samo spustilo, odmažte část allowfullscreen=”allowfullscreen”.  Také je možnost napsat text (třeba jako nadpis) a adresu videa vložit jako odkaz (běžnou adresu, nikoliv z iframe). Potom vám video vyjede až po kliknutí na odkaz (nejedná se ale o odkaz, video je na stránce Ničeho se neboj).

Další variantou je vložit video ve formátu mp4, což trvá o něco déle, ale výsledek je lepší. Velmi nutné je ale video komprimovat, aby se stránka nenačítala dlouho. Jsou k dispozici velmi hezké online nástroje jako třeba VideoSmaller. Tím, že odstraníte zvuk video také zmenšíte. Mp4 je možno zobrazit ve větším zobrazení než ve skutečnosti je, takže se nebojte. Je možné převést do mp4 video z youtube, například na Youtube Converter, kde můžete zvolit od kdy do kdy chcete video stáhnout. Výsledek je potom hezčí a menší (rychlejší) než GIF. Když video už máte, dáte nahoře Mediální soubor a stejně jako u obrázků vložíte video. Když na něj kliknete a potom na tužtičku, tak můžete nastavit, jestli bude uprostřed, nebo vlevo, jestli se pustí automaticky a jestli bude hrát dokola.

Hudba

Můžete sice vkládat písničky ve formátu mp3 a nebo přes gmedia dělat celé playlisty, ale já bych to nedělal. Používám youtube. Když přidám písničku do youtube, bude přidaná i tady. Pokud chcete přidat playlist, přidejte odkaz na stránku hudba. Když chcete přidat svůj set, udělejte to stejně jako jsem to udělal já. Na stránce hudba klikněte na nějaký set, zkopírujte jako koncept, změňte pozadí, změňte odkaz třeba z Mixcloudu, nebo hearthis (nebo youtube). Můžete to udělat i jinak, ale bude vám to trvat déle. U vytvořené stránky označte na sloupci vpravo jako nadřazenou stránku stránku Hudba, a do ní zas nezapoměňte přidat odkaz.

Download

Nahoře v příspěvku zmáčkněte Vložit download. Dejte Přiložit download a přetáhněte co chcete do okénka. Pokud bude mít jeden soubor víc než asi 100 MB, nepůjde vám nahrát. Napište adminovi na info@nicehoseneboj.cz. Easy peazy.

Událost

Klikněte na + a dejte vytvořit událost. Napiš název, vyplň místo, datum, nevyplňuj vstupné, to napiš do obsahu. Napiš o čem to je a přidej odkaz na official event. Přidej obrázek (nemusíš, ale vypadá to líp. Když klikneš na Mediální soubor, můžeš všechny obrázky co jsou na webu různě filtrovat. Nahoře do typu dej Unattached, což znamená, že obrázek ještě není na žádné stránce. V další kolonce zvol kategorii. Pokud přidáváte rave, zvol Free tekno party, pokud přidáváš koncert, zvol koncert. Ano, připravil jsem pro vás kopu obrázků, aby jste neztráceli čas hledáním a snáz se tak dokopali k tomu něco nám přidat. Pokud máš podobné obrázky pro ostatní piš na mail o kousek výš. Nakonec ještě zařaď událost do některé z kategorií vpravo a dej publikovat.

No tak tvooř

PS: Tohle je první z řady tutoriálů, víc jich najdete v rubrice How to. Jestli třeba někdo umí kódit, nebo s wordpressem, ať neváhá a napíše na info@nicehoseneboj.cz, nebo na facebookovou skupinu Ničeho se neboj a já z něj udělám administrátora. Pište i s čímkoliv jiným. Jestli třeba nechcete psát sami příspěvky, ale stejnak byste něčím rádi přispěli, koukněte do rubriky Pomáháme a pomožte někomu s jeho příspěvkem, nebo s jeho nápadem co tady udělat.