Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:

Kritika webu agility-zak.tk

Jak se ti líbí web?
4 hlasů
Přejít na web:
http://agility-zak.tk

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
00
Člen
Avatar
00:11.9.2016 11:19

Jsou to webové stránky o skupině Agility v Havlíčkově Brodě, kterou vede Josef Žák.

Jemu jsem tyto stránky vytvořil v čistém PHP, HTML, CSS a JS (zčásti jQuery). Jsou trochu pomalejší, ale je to tím, že tam jsou věci, jako FB like nebo Google Analytics a také spousta fotek. Výsledky ze závodů (jako třeba http://agility-zak.tk/profil/zak#… ) jsou stahovány z KAČRu (kacr.info) přes php skript. Jako databázi jsem použil SQLite, kterou tvořím pomocí SQLiteStudio.

Do hlavičky jsem vložil video, protože mi to připadalo hezké a zajímavé. A pokud video v prohlížeči není podporované, používá se statický obrázek, který je za videem. Jako ikony (zatím pouze dvojitou šipku dolů) jsem použil Font Awesome.

Z kontaktního formuláře mi vše chodí na e-mail (centrum), který rozesílá zprávu na další adresy.

Bílé pozadí pro okolí stránky mi přišlo nepěkné a tak jsem použil trávu.

Také nějakou dobu bude fungovat stará verze na http://stary-agility-zak.tk.

Budu rád, když budete hodnotit nebo napíšete, co je špatně nebo dobře
 
Odpovědět
11.9.2016 11:19
Avatar
VitekST
Člen
Avatar
VitekST:11.9.2016 19:16

Web bych hodnotil spíše průměrně, tady jsou moje výtky:

  1. Položky v menu - lehce bych je zmenšil, vycentroval, případně dal do nějakého kontejneru s obarveným pozadím. Když už separátory, tak pomocí borderu. Možná bych přidal i ikonky (viz Font Awesome).
  2. Header - text bych absolutně vycentroval (můžeš použít flexbox). To video pozadí je sice dobrý nápad, nicméně je v nízkém rozlišení, proto nevypadá úplně nejlépe.
  3. Texturované pozadí se nenosí, zkusil bych dát nějakou našedlou barvu. Na obsah samotný bych dal barvu bílou.
  4. Stíny. Pokud nejedeš podle material designu, nepoužíval bych je na elementy vůbec. Maximálně za zvýraznění textu, přičemž tam bych dal jen minimální X-Y posuv a rozptyl.
  5. Responzivita. V dnešní době je absolutní nutnost mít web responzivní, máme tablety, mobily, televize, desktopy, různé monitory na desktopech a laptopech a web by se měl přizpůsobit.
  6. Písmo. Obyčejný Sans Serif nepůsobí na mě moc dobře, poohlédnul bych se po Open Sans nebo Roboto,
  7. Jednotlivé sekce textu bych odsadil o pár pixelů dolů, ať je to trochu vizuálně oddělené, působí to pak lépe.
  8. Ta zpráva ohledně cookies nefunguje správně - web jsem párkrát navštívil, lištu skryl a pokaždé se mi zobrazila znovu. Také bych upravil její vzhled, ta žlutá je moc svítivá.
  9. Fotogalerie. Pokaždé, když si člověk chce zobrazit novou fotku, tu zobrazenou musí zavřít (klikem vedle) a otevřít novou (klikem na ní). Proč nepoužít šipky? Našel jsem: http://photoswipe.com
  10. Ten úvodní obrázek v sekci "Hlavní stránka" je taková patlanina, s prominutím. Jde poznat, že se jedná o ne moc dobře udělaný ořez a k tomu ještě je poznat silná JPEG komprese.
  11. Barva odkazů. Ono to nepůsobí úplně nejlépe, když web je v takové zelené barvě (díky té trávě) a vykoukne tam modrý odkaz, plus ještě výrazně světlou modrou. Vybral bych tmavší zelenou.
  12. W3C validita. Úplně to nehoří, přesto ale si myslím, že by bylo užitečné opravit chyby, které W3C validátor vykazuje. Viz zde: http://validator.webylon.info/check?…
  13. Když používáš sémantické elementy (jako třeba header), nemyslím si, že je potřeba k nim dávat ID. Header je jen jeden na stránce, ne?
  14. K šipce v headeru bych přidal animaci, viz následující kód s jQuery:
$(document).ready(function(){
        $('a[href^="#"]').on('click',function (e) {
            e.preventDefault();

            var target = this.hash;
            var $target = $(target);

            $('html, body').stop().animate({
                'scrollTop': $target.offset().top
            }, 800, 'swing', function () {
                window.location.hash = target;
            });
        });
});
Editováno
 
Nahoru Odpovědět
11.9.2016 19:16
Avatar
Josef Kuchař - Pepa489
Tvůrce
Avatar
Odpovídá na VitekST
Josef Kuchař - Pepa489:11.9.2016 20:18

Header nemusí být na stránce jediný, proto bych mu class nebo id nechal

Nahoru Odpovědět
11.9.2016 20:18
2x piš, jednou debuguj
Avatar
VitekST
Člen
Avatar
Odpovídá na Josef Kuchař - Pepa489
VitekST:11.9.2016 20:22

Tak... já to mám tak nastavené, že header je na stránce jediný, každý to může mít nastaveno jinak.

 
Nahoru Odpovědět
11.9.2016 20:22
Avatar
00
Člen
Avatar
Odpovídá na VitekST
00:11.9.2016 20:36

V čem nejsou responzivní?

 
Nahoru Odpovědět
11.9.2016 20:36
Avatar
VitekST
Člen
Avatar
Odpovídá na 00
VitekST:11.9.2016 20:50

Rozbíjel se header a obsah, koukám, že je to teď v pořádku.

Jinak, pokusil bych se ještě stránku optimalizovat do šířky obrazovky 240px (toto rozlišení se ještě používá, ačkoli ne moc), třeba se takto rozbíjí header, menu a mizí padding z pravé strany u hlavního obsahu.

 
Nahoru Odpovědět
11.9.2016 20:50
Avatar
00
Člen
Avatar
Odpovídá na VitekST
00:11.9.2016 21:00

Před chvílí jsem to opravil, možná ještě budou styly v mezipaměti.

 
Nahoru Odpovědět
11.9.2016 21:00
Avatar
VitekST
Člen
Avatar
Odpovídá na 00
VitekST:12.9.2016 19:26

Určitým způsobem si to opravil, nicméně pokud je šířka < 500px, přetéká ti kontejner sociálních sítí v hlavičce pár px přes obrazovku => dá se skrolovat vpravo.

Přetéká proto, protože tam máš margin a máš délku nastavenou na 100% (100% z šířky obrazovky).
Zkus nastavit místo marginu padding, a width na auto (auto v tomto případě vyjadřuje 100% z šířky obrazovky - vnitřní okraj).

 
Nahoru Odpovědět
12.9.2016 19:26
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:13.9.2016 10:25

Pes AJAX :D Fakt má ten člověk rád psy?

Nahoru Odpovědět
13.9.2016 10:25
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na 00
Neaktivní uživatel:13.9.2016 10:26

Proč si použil SQLite databázi?

Nahoru Odpovědět
13.9.2016 10:26
Neaktivní uživatelský účet
Avatar
00
Člen
Avatar
Odpovídá na Neaktivní uživatel
00:13.9.2016 15:44

Potřebuji ji měnit jako soubor a jednoduše zálohovat. A přeci se z ní jen čte, ne? To by nemělo být až tak extra pomalý.

 
Nahoru Odpovědět
13.9.2016 15:44
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na 00
Neaktivní uživatel:14.9.2016 1:20

U aplikace, kde do databáze přistupuje víc klientů najednou, není sqlite úplně nejlepší volba. Pokud se z ní jenom čte, tak proč jí zálohovat?
// Předpokládám, že když se z ní jenom čte, tak se nemění

Editováno
Nahoru Odpovědět
14.9.2016 1:20
Neaktivní uživatelský účet
Avatar
00
Člen
Avatar
Odpovídá na Neaktivní uživatel
00:14.9.2016 7:14

Mění se, ale jen výjimečně.

 
Nahoru Odpovědět
14.9.2016 7:14
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 13 zpráv z 13.