NOVINKA: Kurz Práca s umelou inteligenciou teraz už od 0 €. Staň sa žiadaným profesionálom. Zisti viac:
FINÁLNY VÝPREDAJ KREDITOV na ITnetwork je tu. Využi poslednú šancu a získaj až 80 % extra kreditov ZADARMO na náš interaktívny e-learning. Zisti viac:
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
 
Odpovedať
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;
            });
        });
});
Editované
 
Hore Odpovedať
11.9.2016 19:16
Avatar
Josef Kuchař - Pepa489
Tvůrce
Avatar
Odpovedá 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

Hore Odpovedať
11.9.2016 20:18
2x piš, jednou debuguj
Avatar
VitekST
Člen
Avatar
Odpovedá 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.

 
Hore Odpovedať
11.9.2016 20:22
Avatar
00
Člen
Avatar
Odpovedá na VitekST
00:11.9.2016 20:36

V čem nejsou responzivní?

 
Hore Odpovedať
11.9.2016 20:36
Avatar
VitekST
Člen
Avatar
Odpovedá 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.

 
Hore Odpovedať
11.9.2016 20:50
Avatar
00
Člen
Avatar
Odpovedá na VitekST
00:11.9.2016 21:00

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

 
Hore Odpovedať
11.9.2016 21:00
Avatar
VitekST
Člen
Avatar
Odpovedá 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).

 
Hore Odpovedať
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?

Hore Odpovedať
13.9.2016 10:25
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovedá na 00
Neaktivní uživatel:13.9.2016 10:26

Proč si použil SQLite databázi?

Hore Odpovedať
13.9.2016 10:26
Neaktivní uživatelský účet
Avatar
00
Člen
Avatar
Odpovedá 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ý.

 
Hore Odpovedať
13.9.2016 15:44
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovedá 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í

Editované
Hore Odpovedať
14.9.2016 1:20
Neaktivní uživatelský účet
Avatar
00
Člen
Avatar
Odpovedá na Neaktivní uživatel
00:14.9.2016 7:14

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

 
Hore Odpovedať
14.9.2016 7:14
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 13 správy z 13.