Tvorba WWW

V kategorii Tvorba WWW se věnuji tématům z oboru. Najdete zde články o kódování a stylování, SEO, ale i hotová řešení nebo zajímavosti související s tématem. Pokud vás zajímá skriptování v jazyce PHP a návrh databázových struktur, můžete se podívat do sekce PHP.

HTML, CSS, JavaScript

HTML, CSS, JavaScript

Rady a návody týkající se kódování, stylování a JavaScriptu.

mod_rewrite

mod_rewrite

Přepis url: přesměrování, podstrčení. Možnosti rewritingu popsané do posledního detailu.

CSS pseudo-třídy: nth-child, nth-of-type, nth-last-of-type

CSS pseudo-třídy: nth-child, nth-of-type, nth-last-of-type

Článek z oboru slibuji už dlouho. A čím lepším pokračovat, než pořádným seznamem tipů a triků, jak snáz stylovat web. Dnes se podíváme některé pseudo-třídy kaskádových stylů, které vám usnadní stylování dlouhých seznamů. Ale i krátkých. Také se pokusím vysvětlit, proč tyto selektory nefungují vždy tak, jak bychom si představovali.

Celý článek

Velké srovnání heatmap

Velké srovnání heatmap

Heatmapy pro mě byly až do nedávna velkou neznámou. Stačilo ale pár malých podnětů a já naznal, že bych měl tuto mezeru ve vzdělání doplnit. Heatmapy totiž přímo nesouvisí s mým pracovním zaměřením; je to analytický nástroj, který pomocí barevných polí ukazuje intenzitu uživatelské interakce. Řečeno jednoduše: vidíte, kam lidé klikají. Statistiky pak slouží k optimalizaci aktivních prvků; můžete ladit jejich pořadí, velikost či umístění na stránce. Zjistíte, jak se lidé na vašem webu chovají a můžete přesunout důležité prvky tak, aby byly v "červených oblastech". Tak jsem začal hledat, co bych mohl vyzkoušet. Po chvíli hledání jsem došel na 4 různé služby, které poskytující heatmapy zdarma. Všechny jsem postupně otestoval a jejich srovnání vám nabídnu v dnešním článku.

Celý článek

YouTube videa: Postupné načítání při scrollu

YouTube videa: Postupné načítání při scrollu

Dnes si příklad z minulého článku rozšíříme o další funkcionalitu. Sám jsem dlouho hledal řešení, jak zamezit zbytečnému kousání stránek, které obsahují větší množství vložených videí. Chtěl jsem možnost přehrání uvnitř článku, ale už se mi tolik nelíbilo, jak se všechno musí dopředu zbytečně načítat. Řešení je vcelku triviální a sám už jsem ho mnohokrát použil v jiných případech: daný obsah načteme až po zascrollování. Jak vše uvést do praxe vysvětlím právě v dnešním článku.

Celý článek

Jak na embedovaná YouTube videa: Responzivita

Jak na embedovaná YouTube videa: Responzivita

V předchozím dílu jsme si ukázali, jak získat náhledový obrázek YouTube videa. Dnes tuto znalost konečně zužitkujeme. V dalším ze série krátkých článků si ukážeme, jak snadno a jednoduše přizpůsobit inline rámy responzivnímu designu. Teoreticky půjde následující postup: iframe obalíme elementem, který dostane na pozadí náhledový obrázek. V něm se podle rozlišení zobrazí buď iframe nebo externím odkaz. Background-image containeru se taktéž zapne až při určitém rozlišení a/nebo zařízení.

Celý článek

Jak získat náhledový obrázek YouTube videa

Jak získat náhledový obrázek YouTube videa

V prvním ze série krátkých článků ukážu, jak se snadno dostat k náhledovému obrázku YouTube videa. Každý z mých textů nutně nemusí být dlouhý, navíc i mně se bude tato ukázka hodit jako zdroj informací pro článek další. Vím: dohledat řešení je otázka pár minut na Googlu, tak vám ho nabídnu alespoň v češtině. Člověk nikdy neví, kdy se něco takového může hodit.

Celý článek

Jak správně předat grafiku kodérovi

Jak správně předat grafiku kodérovi

Tento částečně úvahový článek jsem plánoval napsat už dlouho. Vlastně ještě před svou blogovací pauzou, kdy mě pár grafických návrhů od jednoho méně schopného grafika přimělo sepsat soubor požadavků, které ze své pozice mám. Tyto body zůstaly na čas zapomenuty, abych si je po nějaké době zase připomněl. Nejdříve bych rád zdůraznil: Kolegové grafici, prosím neberte tento článek, jakože znevažuji vaši práci. Spíš ho berte jako na dobře míněné rady.

Zkušenější z vás tyto body jistě ve většině dodržují, méně zkušení si naopak mohou některé tipy vzít k srdci. Stejně tak mi je jasné, že pokaždé nelze vše do detailu dodržet: občas jsou pádné důvody, proč něco udělat jinak. Ale pokud dostanu grafiku, které nesplňuje ani základní pravidla pro nakódování, je to k vzteku... Je to k vzteku natolik, že mám chuť návrh vrátit k přepracování. Nebo si ho udělat po svém. Ani jedno samozřejmě není dobře.

Celý článek

CSS transition a vytvoření jednoduchého JS carouselu

CSS transition a vytvoření jednoduchého JS carouselu

V minulém článku jsem sliboval, že bude další, ve kterém najdete návod na jednoduchý carousel vytvořený za pomoci JavaScriptu a CSS transition. Tak tady je. Pokud si na stránce zascrollujete trochu níž a vyhledáte v pravém sloupci "Mikroblog" a "Nejnovější články", tak přesně to bude výsledek. Pokud se vám metoda fade in/fade out nelíbí, v druhé části článku se můžete podívat, jak slider upravit na posuv ze strany na stranu. Jak potom dostat obě metody do jediné funkce, to si můžete zkusit sami; funkce to budou opravdu jednoduché a jejich úprava nebude nijak složitá. JavaScript zde bude ještě jednodušší než styly; takže asi taková bude náročnost. Ale i tak si všechno krok po kroku projedeme. Se vším nám pomůže knihovna jQuery.

Celý článek

CSS transition: animace přes změnu třídy - základy

CSS transition: animace přes změnu třídy - základy

CSS vlastnost transition je taková kouzelná formule, kterou můžeme využít nesčetnými způsoby. Zjednodušeně řečeno je to animace. Provede to, co bychom za jiných okolností poslali do jQuery metodě animate. Použití je velice jednoduché, vše si lze pohodlně testovat ve Firebugu. Dnešní článek bude takový úvod, abyste se s vlastností mohli seznámit, pokud ji ještě neznáte. V druhém článku bych pak ukázal využití v praxi: napíšeme si jednoduchý slider (carousel), který rozhýbe pouze změna třídy. Transition má 4 různé vlastnosti, které lze zapsat pod její definici. Povinný je ale pouze čas.

Celý článek

mod_rewrite a hezké url díl III

mod_rewrite a hezké url díl III

Články o mod_rewrite pro hezké url mi dlouhodobě zaznamenávají velkou návštěvnost, což ale není ten důvod, proč jsem se rozhodl napsat díl už asi osmistý padesátý prvý. Některé věci je totiž nutné uvést po letech na pravou míru: předchozí díly měly v prvé řadě ukázat, že pomocí mod_rewrite lze dosáhnout cokoli, co si člověk jenom zamane. Každá aplikace, byť je sebehůř napsaná, má šanci na přátelská url.

Problém nastal v případě, kdy měli méně zkušení uživatelé tendence psát hromady zbytečně krkolomných pravidel nebo se je snažili nasadit na nevhodně navrženou strukturu url adres - namísto toho, aby začali s úpravami v PHP kódu. Sám jsem takovým uživatelem býval, ale dnes už vím, jaká je v jednoduchosti síla. Dnešní pokračování seriálu o mod_rewrite tedy vše zase zjednoduší. Představíme si 5 základních využití mod_rewrite, které vám vystačí téměř na jakkoli náročný projekt.

Celý článek

Stránka 404 - důležitá součást každého webu

Stránka 404 - důležitá součást každého webu

Stránka 404: dokument nenalezen je důležitá součást každého webu o více než jedné stránce, přesto na ni spousta vývojářů zapomíná nebo ji nemá vyřešenou správně. Dnes vám představím, jak takovou chybovou stránku vůbec vytvořit, pohovořím něco o základních komponentách, ze kterých by se měla skládat a v závěru zkusím na pár příkladech demonstrovat správně a nesprávně vytvořené 404ky.

Začneme pěkně od základu: nejdříve si ukážeme, jak vůbec stránku 404 správně nastavit. Příklad pro statické stránky v HTML je uvedený níže. Kód zkopírujeme do souboru .htaccess.

Celý článek

1 | | |

Parak simati, Muballit mitte, Nergal allatu mellamu mesaru, La tapallah Annuaki, Kettu Puluthu qillatua