Kritika webu www.kom72.cz

HTML a CSS Kritika webů - ukažte se! www.kom72.cz American English version English version

Jak se ti líbí web?
Celkové hodnocení (6 hlasů):
3.666673.666673.666673.666673.66667
Přejít na web:
http://www.kom72.cz

Při vložení tohoto webu do kritiky web získal následující hodnocení:

Kladných hodnocení: 10; Varování a poznámky: 9; Kritické chyby: 1.
Stránka obsahuje mnoho zbytečných chyb. Většinu nalezených chyb je možné jednoduše opravit. Pokud si s něčím nevíte rady, použijte Český neoficiální validátor HTML stránek

Avatar
kom72
Člen
Avatar
kom72:

Ahoj všem, prosím o okouknutí mého osobního webu, kde prezentuji své fotografie. Je to první můj pokus o dynamický web. Fotky se načítají z DB a selektují se podle u nich zadaných filtrů.
Problém o kterém vím a který mě hodně štve, je sdílení fotek na FB. Bohužel zatím nevím jak na to. Vím, že se to dělá přes OG meta tagy, bohužel neumím dynamicky generovat obsah těchto tagů. Poradí mi někdo jak na to?

 
Odpovědět 16. května 18:50
Avatar
kom72
Člen
Avatar
kom72:

tak nějak jsem si myslel, že to tu žije víc... kde jsou všichni ty odborníci?

 
Nahoru Odpovědět 19. května 13:15
Avatar
Taskkill
Redaktor
Avatar
Taskkill:

Kdyz uz jsi si o to musel pozadat, tak si svuj nazor nenecham pro sebe: Web se mi libi, koukal jsem na nej hned, kdyz jsi ho sem pridal, celkove to neni nic ohranyho ani nudnyho - to ocenuju, orientace naprosto bez problemu, animace netrhany, no ja snad nemuzu nic vytknou :) ... nakonec prece jen vytknu: moc se mi nelibi vzhled tvych kontaktnich formularu, prijdou mi takovy slabsi, web jako celek je barevne prijemne sladenej a ty formulare jsou proste chudy .. zkus na to kouknout.

PS: od me mas 5 hvezdicek, protoze jsem hodnotil i obsah :)

 
Nahoru Odpovědět 19. května 14:06
Avatar
Matúš Petrofčík
Šéfredaktor
Avatar
Odpovídá na kom72
Matúš Petrofčík:

Ahoj, asi sa všetci pripravujú na maturitu alebo na skúšky keďže začína skúškové obdobie na VŠ. Skúsim ti napísať niečo ja, ber to ako môj osobný subjektívny názor.

K tým tagom pre FB a celkovo PHP:

  • Ak ťa to zaujalo a rád by si sa do toho ponoril hlbšie, odporúčam naštudovať OOP v PHP a následne si vytvoriť redakčný systém po vzoru MVC tutoriálu. Hlavne v tom MVC je pekné ukázané, ako dokážeme z konkrétnej šablóny (článok, album, podstránka, ...) nastavovať rozličné $title a $description, a podobným spôsobom by sme posielali trebárs $fb_data.
  • Zobrazeni na FB si potom môžeš kontrolovať alebo aktualizovať na https://developers.facebook.com/…g/og/object/
  • Hodily by sa pekné URL adresy
  • Hodilo by sa presmerovanie z URL adresy bez www. na adresu s www., teda: http://kom73.cz presmeruje na http://www.kom73.cz

K vzhľadu stránky:

  • Máš tam veľa farieb (zelená, modrá, svetlá, tmavá, a žltá), minimálne tú žltú na odkazoch by som nahradil niečim iným nech to tam tak nekričí.
  • Ikonky v menu majú iný štýl než ikonka v podstránkach (pri nadpise) a iný štýl než ikonky v podstránke o autorovi. Chcelo by to zjednotiť štýl.
  • Nepáčia sa mi tlačítka a inputy vo formulároch. Zas je tam iná farba (tmavo modrá či čo) a k flat designu stránky sú tam 3d tlačítka.
  • Dolu odkaz Creative Common má iné podčiarknutie než ostatné linky, vytáča ma to k nepríčetnosti :D

K viditeľnému kódu:

  • Kľudne by si mohol skúsiť nové tagy ktoré ponúka HTML5, napr: <nav> namiesto <div id="cssmenu-obal"> a podobne pre footer a iné elementy.
  • V pätičke je asi 12x &nbsp; - používaj na odsadenie a celkovo štýlovanie CSS!
  • Niektoré Javascripty môžeš presunúť z <head> na spodok stránky pred koncový </body> ... stránka sa načíta rýchlejšie pretože načítaniu nebránia javascripty.
Nahoru Odpovědět  +1 19. května 14:10
obsah kocky = r^2 ... a preto vlak drnká
Avatar
Matúš Petrofčík
Šéfredaktor
Avatar
Odpovídá na Matúš Petrofčík
Matúš Petrofčík:

A text v článkoch je moc svetlý, ťažko sa mi číta.

Nahoru Odpovědět  +1 19. května 14:17
obsah kocky = r^2 ... a preto vlak drnká
Avatar
kom72
Člen
Avatar
kom72:

Díky, konečně se to tu trošku rozjelo. Juknu na to, uvidim co s tim svedu :-)

 
Nahoru Odpovědět 19. května 14:32
Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:
  1. Ošetři si jednotnost www a non-www verze. Přesměrovávat můžeš např. pomocí htaccess.
# Redirect www to non-www
RewriteCond %{HTTP_HOST} ^www\.(.*) [NC]
RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
  1. Design nemáš až tak moc sjednocený a působí na mě starším dojmem. Vyber si jen pár barev, které budeš používat jako doplněk k bílé/černé, ideálně méně. Našel jsem tam asi 5 doplňkových barev, což obecně nevypadá moc hezky, pokud to není dobře sjednoceno. Taktéž bych se vyvaroval různých přechodů barev, např. ve formuláři, což vypadá zastarale a k webu se to nehodí.
  2. Co se týče kódu, máš tam až moc CSS a JS souborů, které načítáš. Napočítal jsem okolo 6 souborů JS a 3 souborů CSS. Spoj je a minifikuj. Stejně tak bych nepsal JS do HTML, nech to všechno v externích souborech.
  3. V kódu se ti vyskytuje až moc elementů s prázdnými class atributy.Smaž je, když nejsou potřeba.
  4. Kotvy nemusíš vytvářet jako prázdné odkazy, pokojně stačí přidat jen id na libovolný element.
  5. Jak už bylo řečeno,   používej jen na pevné mezery, ne pro stylování, pro to použij CSS - např. margin/padding.
  6. Trochu nechápu kódy typu "<div class="h1_style">Mé oblíbené fotografie</div>". Proč zde nepoužít rovnou element h1, který případně třídou ostylovat?

  1. Tady je generátor meta tagů pro sociální sítě, tak se inspiruj. http://secretsaucehq.com/mega-tags
  2. Zkus se podívat např. na automatizační nástroj Gulp. http://gulpjs.com/
Nahoru Odpovědět  +1 19. května 14:47
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
kom72
Člen
Avatar
kom72:

Reaguji na dva nejobsáhlejší příspěvky od Honza Bittner a Matúš Petrofčík. Díky chlapy za postřehy!
1. www a non-www verze
přidal jsem do svého .htacces ke stávajícímu přesměrování toto:

RewriteCond %{HTTP_HOST} ^kom72\.cz
RewriteRule (.*) http://www.kom72.cz/$1 [R=301,L]

a snad to funguje jak má. Prosím o kontrolu.
2. Design
Pokusil jsem se ho krapet upravit, jukněte ted na to prosím. Sjednotil jsem barevnost odkazů, podbarvení menu jsem zvolil ve stejné barvě jako je logo, zvýraznil jsem barvu celého písma na webu, H1 nadpisu jsem priradil ikonu ve stylu, jako je na strance autor. Na formulářích právě pracuji, pokusím se je udělat krapet střídmější a aby více zapadly do designu webu.
3. Kód
při vkládání webu sem na kritiku, jsem byl "pochválen", že mám malé mnozství .css JS soubory, jejich umístění a pocet bude problem. Sjednoceni a jejich presun poruznu po strankach asi nebudu zatim riskovat. Jsem rád, že mi to funguje jakz takz jak chci :-) Pokud by byl nekdo ochotny mi krapet s timhle pomoci, budu rád...
Zrusil jsem ty pevne mezery, zapomnel jsem na ne, kdyz jsem ladil web. Mam totiz blby zvyk si web nejdrive stylovat primo v kodu pomoci style=" " a až kdyz jsem spokojeny s vysledkem, vymyslim si ruzne classy a id a prirazuji je do css.

V kódu se ti vyskytuje až moc elementů s prázdnými class atributy

co je tím míněno?

Trochu nechápu kódy typu "<div class="h1_style">Mé oblíbené fotografie</div>"

hlavně mne nekamenujte, pokud tu ted vyplodím nesmysl. <h1> nadpis, musi byt na strance pouze jeden, mel by vystihovat obsah dane stranky a mel by byt co nejvyse v kodu, tedy ne nekde uprostred stranky. Je to tak?
Na prvni strance mi ovsem designove vyslo to, ze jako prvni, pred novinky a clanky, jsem umistil slider s mejma oblibenejma fotkama. A jelikoz jsem chtel, aby lidi poznali, co to vubec je, pouzil jsem k nadpisu (popisu) slideru, styl nadpisu <h1>, ktery mam po celem webu. Uz jsem si nekolikrat rikal, ze to zrusim a dam nejaky maly popisvpravo dolu pod ten slider. Ted pockam, co vy na to :-)

Pěkné URL adresy mam v planu a se sdilenim na FB se stále peru :-) Ten generátor mi asi neni k nicemu, myslim si ze vim, co v jednotlivych OG tazích má byt. Problem je, to dynamicky do tech tagu dostat.

Budu rád, za vase dalsi pripominky

 
Nahoru Odpovědět 22. května 1:11
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 8 zpráv z 8.