PHP týden PHP týden
Pouze tento týden až 80% sleva na PHP, Nette, Symfony!
Aprílový black friday tě nenechá v klidu! Až 80 % prémiového obsahu zdarma. Více informací

Kritika webu zednikova.cz

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

Jak se ti líbí web?
2 hlasů
Přejít na web:
http://zednikova.cz

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

Kladných hodnocení: 8; Varování a poznámky: 8; Kritické chyby: 3.
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

Aktivity (1)
Avatar
Tučňák
Člen
Avatar
Tučňák:11. února 21:24

Vytvořil jsem stránku pro zednickou firmu. Chtěl bych vás poprosit o kritiku.

Mým cílem je dostat web pokud možno co nejvýše v Googlu mezi těmi weby, co si neplatí reklamu při hledání pojmu "zedník" a "zedník ostrava".

Předem děkuji za ohodnocení mojí prvotiny :)

 
Odpovědět 11. února 21:24
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:12. února 10:43

Je to hrozne neusporadane.

Poskakuji ti ruzne radky (aspon ve firefox), nekde je nad radkem vice mista, jinde je to nalepene.

Texty jsou centrovane, to se spatne cte.

Kombinujes jednobarevne obrazky s nejakymi mini rozmazanymi flicky (to ma byt asi tucnak, ale nepoznal bych to). Zkus pouzit nejakou free sadu ikon. https://glyphicons.bootstrapcheatsheets.com/
glyphicon-envelope, glyphicon-heart, glyphicon-camera, glyphicon-phone

Miniatury obrazku maji kazdy jine rozmery.
A u tech vetsich to vadi mozna jeste vic, protoze sipecka pro rolovani doprava doleva poskakuje, zmeni se poloha, je treba presunout mys.

"Pingu Design Uděláno s ..."
Nejmene dulezita vec je na top miste vlevo a nejvic vyrazna.

Editováno 12. února 10:45
 
Nahoru Odpovědět  +2 12. února 10:43
Avatar
Jiří Zeman
Člen
Avatar
Jiří Zeman:12. února 11:37

No pod dlouhé době. Malinko koukatelný web :D . Jak píše Petr, neuspořádané, ale hrozně. Zkus to sjednotit. Máš to jen onePage, takže toho kódu tam mít mnoho na předělávání ani nebudeš. Když kouknu v rychlosti na kód....

<html lang="en">
Tohle fakt ne.

<meta name="keywords">
Už se nepoužívá – můžeš smazat.

<meta name="viewport" content="width=de­vice-width, initial-scale=1, shrink-to-fit=no">
Máš důvod používat shrink-to-fit? Já si myslím, že ne

<meta name="description" content="Zedník Ostrava">
Tohle by jsi měl mít daleko bohatší na obsah, myslím že limit je 150 nebo 160 znaků, ale nejsme si jistý

<meta name="author" content="Oleksandr Dede">0
Co ta nula na konci :D

<body> ti vzalo asi nožičky a že v tom webu nebude :D

<h2 class="font-weight-light mb-0">
Již 20 let Vám pomáháme zařídit bydlení podle Vašich představ.

Specializujeme se hlavně na bourání, zdění, štukování, stěrkování a sádrokartony.
</h2>
Ty kks! Nepřijde ti to pro nadpis malinko over?

Na ty ikonky telefonu instagramu bych se buď doslova vysral a nebo to nahraď něčím, co posílal Petr

Kontaktujte nás... a ten obsah k tomu máš schválně v tabulce a v buňkách nadpisy?

Nevím jak moc jsi přepisoval celou šablonu, ale podle mě je tam teda kvanta chyb.
Možná bych zvažoval zahodit celý projekt a napsat ho na bootstrapu bez pomocí šablony. Třeba pochopíš, jak se co píše. Možná by neuškodilo se vrátit zpět k základnímu html. Do css jsem raději nelezl.Jo a ten frame s facebookem dole. To raději zahoď. Jo a pokud nemáš plány s tou fotogalerii. Tak bych tam dal asi nějaké obrázky jenom, žádný proklik. Normální člověk si asi umí představit něco o bourání a jak to asi vypadá a nepotřebuje k tomu "článek se sliderem" toho bych se zbavil, ale to je můj názor, třeba máš jiný.

Možná bych asi celý ten projekt zahodil než to celý předělávat :D a začal bych na čistém Bootstrapu bez ŠABLONY! A koukej se na dokumentaci ke každé komponentě. Pokud si nebudeš vědět rady tak zkus pogooglit problém a kdyby jsi nepochodil, tak určitě najdeš nějaké fórum, kde ti poradí :) Ale co jsem tak koukal, tak by jsi měl zamakat hodně na základech a jestli mi řekneš, že i tobě je 12, jako v poslední době všem, co tu přidávají web ke kritice tak otevírám okno a skáču šipku :D. Nic proti vám, každý začínal, ale měli by jste si nastudovat alespoň základy. A než to sem hodíte tak to prohnat nějakým validátorem, jestli teda ještě něco takového existuje, já jsem bez toho nedal ani ránu, když jsem začínal. Vždy mě to nadávalo, že to mám špatně a tak jsem pátral proč... A dost mě to pak posouvalo. Nevím jestli používáš nějaký editor, ale zkus třeba sublime, pak ještě dost frčí ten od microsoftu, ale nevzpomenu si a nechci googlit :/. Tam ti to ty chyby bude třeba i ukazovat. třeba jako to <body> :D

Hodně štěstí s projektem. Není to zlé, ale vylaď to.

Nahoru Odpovědět  +1 12. února 11:37
Chybami se člověk učí.
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:12. února 12:35

Ne, zahodit. Odlozit si to bokem jako prvni funkcni verzi. Ze ktere se da sem tam neco vykopirovat nebo napodobit vzhled.
K BT nejake info jsem posilal treba zde: https://www.itnetwork.cz/…c0de9e4c0321
Jsou tam linky k sablone a tak. K BT stylu pripojis vlastni, kterym prepises, co chces jinak. Treba zrovna pro H2 bych takovou upravu pouzil misto <h2 class="font-weight-light mb-0">.

Jinak, v zasade by sis mel html kod kontrolovat, jinak se muze neco chovat nezvykle, treba online zde:
https://validator.w3.org/nu/#…

  • nelibi se mu tam ta 0 mezi tagy
<head></head>
  • potom to pinda furu error s rel, ale to asi souvisi s tim, ze nemas uplne ok zahlavi doctype-html
  • radek 148, 151, 176 - Empty heading.
<h5></h5>
  • radek 154, dalsi - neukonceny tag A,
<a ... class="contacts"</a><h5> vs <a ...class="contacts"></a><h5>
  • radek 188 - ukoncene TD, ktere nebylo otevreno
  • iframe, misto nej lze pouzit OBJECT tag

Dole to pak vypise i kod se zazlucenymi chybami. Jestli chces, muzes pro psani html kodu pouzivat pspad. Kdyz zvolis soubor html, tak umi obarvovat kod. Lepe se v nem pak vyznas. Nebo notepad++

Editováno 12. února 12:37
 
Nahoru Odpovědět 12. února 12:35
Avatar
Tučňák
Člen
Avatar
Odpovídá na Peter Mlich
Tučňák:13. února 9:29

V prvé řadě děkuji za reakci.

Je to hrozne neusporadane.

Poskakuji ti ruzne radky (aspon ve firefox), nekde je nad radkem vice mista, jinde je to nalepene.

Je to takové divné, to je pravda. Asi to je tím, že jsem použil šablonu a poté ještě různé druhy textů.

Texty jsou centrovane, to se spatne cte.

Já si z nějakého důvodu myslel, že když je málo textu, tak je pro čtenáře snažší ho hledat uprostřed, než aby hledal jedno slovo kdesi vlevo.

Kombinujes jednobarevne obrazky s nejakymi mini rozmazanymi flicky (to ma byt asi tucnak, ale nepoznal bych to). Zkus pouzit nejakou free sadu ikon. https://glyphicons.bootstrapcheatsheets.com/
glyphicon-envelope, glyphicon-heart, glyphicon-camera, glyphicon-phone

Ten tučňák je emoji znak. Bral jsem to tak, že emoji funguje na podobném principu jako ASCII znaky a je univerzální. Ale je pravda, že Windows pojetí tučňáka je takové o ničem, "Android i iPhone mají hezčí obrázek ":https://emojipedia.org/penguin/

Nevím přesně, jestli "jednobarevným obrázkem" myslíš ty hvězdy a "flíčky" ten telefon, email atd.

Díky za tip na ikony, snad tam najdu symboly pro všechno co potřebuji (tedy symboly Facebooku, Instagramu, emailu atd.). Nějakou chvíli jsem se zabýval UX a zjistil jsem, že v dnešním designu se upřednostňují jednoduché a jasné tvary, takže chápu, proč jsi proti rozmazaným flekům. Na druhou stranu, zrovna u tučňáka bych upřednostnil tu barevnější variantu (samozřejmě ne tu, co se zobrazuje na Windows), i když pro účely webu to je celkem irelevantní.

Miniatury obrazku maji kazdy jine rozmery.
A u tech vetsich to vadi mozna jeste vic, protoze sipecka pro rolovani doprava doleva poskakuje, zmeni se poloha, je treba presunout mys.

Miniatury - asi budu muset najít nějakou funkci, která nastavuje velikost obrázku natvrdo. Nebo lépe vyřešit to, že každá původní fotka měla jiný rozměr.

Jako hlavní problém tam vidím obrázky na výšku, které kazí carousel. Asi by šlo jim nastavit stejnou výšku jako u obrázků na šířku, jenže to by pak asi nefungovaly šipky.
Nepřišel jsem taky na to, proč třetí carousel jde ovládat jen šipkami, nikoliv kliknutím na šipky.

Další řešení je dát dva obrázky na výšku jako jeden na šířku - tam ale pro změnu nemsuí sedět poměr stran.

"Pingu Design Uděláno s ..."
Nejmene dulezita vec je na top miste vlevo a nejvic vyrazna.

To samozřejmě nebyl záměr (ani nejsem nějaké top grafické studio aby to mělo smysl). Asi to hodím do toho spodního footeru.

Jinak viz část o centrování odstavců.

 
Nahoru Odpovědět 13. února 9:29
Avatar
Tučňák
Člen
Avatar
Odpovídá na Jiří Zeman
Tučňák:13. února 10:39

No pod dlouhé době. Malinko koukatelný web :D . Jak píše Petr, neuspořádané, ale hrozně. Zkus to sjednotit. Máš to jen onePage, takže toho kódu tam mít mnoho na předělávání ani nebudeš. Když kouknu v rychlosti na kód....

Děkuji za rozbor. Jsem rád, že to není tak hrozné i pro ajťáky.

<html lang="en">

Tohle fakt ne.

Já myslel, že jsem to změnil...

<meta name="keywords">

Už se nepoužívá – můžeš smazat.

Tak to mě zklamalo, myslel jsem si, že právě tohle určuje, pod jakými search výrazy (to co lidí zadávají do Googlu) se bude nejčastěji zobrazovat můj web. Co se dnes používá pro tohle? Description zmíněný niže?

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Máš důvod používat shrink-to-fit? Já si myslím, že ne

Dal jsem to pryč a zatím žádnou změnu nevidím. Snad se mi to nesesype potom.

<meta name="description" content="Zedník Ostrava">

Tohle by jsi měl mít daleko bohatší na obsah, myslím že limit je 150 nebo 160 znaků, ale nejsme si jistý

Co by tam mělo být? To co mám ted v keywords?

<meta name="author" content="Oleksandr Dede">0

Co ta nula na konci :D

Fail...

<body> ti vzalo asi nožičky a že v tom webu nebude :D

Další fail...

<h2 class="font-weight-light mb-0">
Již 20 let Vám pomáháme zařídit bydlení podle Vašich představ.

Specializujeme se hlavně na bourání, zdění, štukování, stěrkování a sádrokartony.
</h2>

Ty kks! Nepřijde ti to pro nadpis malinko over?

Ono to je spíš description, jen jsem použil h2 pro velikost textu. Přemýšlím ale, zda je vůbec nutný. Je to vlastně inspirace ze Start Bootstrap šablony .

Když už jsme u toho, proč mě validátor tady sjel za h1?

Na ty ikonky telefonu instagramu bych se buď doslova vysral a nebo to nahraď něčím, co posílal Petr

Preferuji druhou možnost, první nepřipadá moc v úvahu, protože mi přijde poněkud divné psát Facebook: @zednikovacz, když máme ikonky.

Kontaktujte nás... a ten obsah k tomu máš schválně v tabulce a v buňkách nadpisy?

V podstatě ano. Cílem bylo, aby všechny hodnoty byly nějak narovnané, tedy aby ikonky byly pod sebou a linky taky. Nadpisem jsem chtěl docílit tooh, aby bylo tučnější písmo.

Nevím jak moc jsi přepisoval celou šablonu, ale podle mě je tam teda kvanta chyb.

Použil jsem https://startbootstrap.com/…/freelancer/ a přepsal to.

Možná bych zvažoval zahodit celý projekt a napsat ho na bootstrapu bez pomocí šablony. Třeba pochopíš, jak se co píše. Možná by neuškodilo se vrátit zpět k základnímu html. Do css jsem raději nelezl.

Nad tím jsem taky přemýšlel a musím ti dát za pravdu. Problém je, že tomu až zas tak nerozumím a potřeboval jsem nějakou rychlou nápovědu a "polotovar", abych se měl čeho chytnout. Mé programování vypadá často jako (viz obrázek v příloze). Vím, není to ideální, ale jednak se učím lépe z příkladů z praxe a jednak na VŠB nebylo tolik času se to učit nějak v klidu.

Upřímně mě štvalo, že jsem chtěl zakomponovat horní kontaktní lištu z https://bootstrapthemes.co/demos?…, ale nešlo mi to.

Jo a ten frame s facebookem dole. To raději zahoď.

Jedna testerka mi řekla, že ten iframe bude asi dost matoucí pro důchodce kvůli velikosti, je to ten důvod?

Jo a pokud nemáš plány s tou fotogalerii. Tak bych tam dal asi nějaké obrázky jenom, žádný proklik. Normální člověk si asi umí představit něco o bourání a jak to asi vypadá a nepotřebuje k tomu "článek se sliderem" toho bych se zbavil, ale to je můj názor, třeba máš jiný.

Fotky bych chtěl nechat, je to vlastně podstata webu (alespoň očekávání, očekávaný use-case scénář je takový, že člověk si na Googlu/Avízu/Fa­cebooku/nevím­KdeJeštěByMoh­liHledatZední­ky vyhledá "zedník ostrava", otevře pokud možno web zednikova.cz a základě fotek si udělá obrázek o práci a následně objedná zedníka).

I když je pravda, že jsme poněkud v nevýhodě, protože se tu jedná spíš o hrubé práce, které nevypadají pro laika tak lákavě jako krásná nová kuchyň udělaná truhlářem.

Nicméně o technickém provedení fotogalerie pouvažuji, rád si nechám poradit. Současné provedení není moc user-friendly.

Možná bych asi celý ten projekt zahodil než to celý předělávat :D a začal bych na čistém Bootstrapu bez ŠABLONY! A koukej se na dokumentaci ke každé komponentě. Pokud si nebudeš vědět rady tak zkus pogooglit problém a kdyby jsi nepochodil, tak určitě najdeš nějaké fórum, kde ti poradí :)

Už jsem okomentoval podobnou myšlenku výše. Úplně bych to nezahazoval, je to lepší než nic, aspon už je co navštěvovat a reklama je na světě.

Na druhou stranu souhlasím s tím, že by bylo lepší začít from scratch, u dost věcí nevím jak fungují (někdy nevím přesně, co dělá HTML/CSS a co JS, i když zrovna u JavaScriptu to je diskutabilní, prý ho Wedos nepodporuje). Třeba nechápu účel složky vendor, kde je Bootstrap, jQuery atd. Myslel jsem si, že to všechno je už je složkách pro JS A CSS.

Ale co jsem tak koukal, tak by jsi měl zamakat hodně na základech a jestli mi řekneš, že i tobě je 12, jako v poslední době všem, co tu přidávají web ke kritice tak otevírám okno a skáču šipku :D.

Není mi 12, jsem v třeťáku na bakaláři.
Vím ale o 16tiletém UXákovi, který má tvorbu jako dospělý.

Nic proti vám, každý začínal, ale měli by jste si nastudovat alespoň základy. A než to sem hodíte tak to prohnat nějakým validátorem, jestli teda ještě něco takového existuje, já jsem bez toho nedal ani ránu, když jsem začínal. Vždy mě to nadávalo, že to mám špatně a tak jsem pátral proč... A dost mě to pak posouvalo. Nevím jestli používáš nějaký editor, ale zkus třeba sublime, pak ještě dost frčí ten od microsoftu, ale nevzpomenu si a nechci googlit :/. Tam ti to ty chyby bude třeba i ukazovat. třeba jako to <body> :D

Používám WebStorm od Jetbrainsu. Nevím, jak je možné, že jsem přehlídl chybějící body. Asi jsem ho umazal.

Hodně štěstí s projektem. Není to zlé, ale vylaď to.

Díky. Vyladím podle časových možností :)

Editováno 13. února 10:41
 
Nahoru Odpovědět 13. února 10:39
Avatar
Peter Mlich
Člen
Avatar
Odpovídá na Tučňák
Peter Mlich:13. února 10:57

Ikonky - Resene fontem, aha, to mi nedoslo. No, kdyz to vidim, na win/firefox, tak graficky nic moc, urcite se takovemu reseni u svych webu vyhnu :)

Obrazky - Malovani/win10 i Gimp umi orezat obrazek. Mas tam 20 obrazku, rekneme, tak asi nebude problem to udelat rucne :) Ale tez asi neni problem to delat systemove.

keywords - bych tam klidne nechal, nicemu to neskodi

description - obecne title ma obsah do 3 slov, description je delsi text do 30-100 slov, ve tvem pripade by to mel byt popis produktu nebo firmy: Nazev je stavebni firma zabyvajici se ... Ostatne, u komentari k H2 pises, ze je to vlastne description

 
Nahoru Odpovědět 13. února 10:57
Avatar
Jiří Zeman
Člen
Avatar
Jiří Zeman:13. února 11:29

Co jsme zapomněl minule zmínit chybí ti tam h1 nadpis

Nikdy opakuju nikdy!!! Nepoužívej formátování <h*> jako velikost písma... Pokud už teda chceš něco, jako velikost fontu barvičky stejné jako nadpisy tak si udělej v css něco jako h1, .h1{color:x;font-size:2rem; atd.} Ale i přesto bych se vyhnul stylování elementu typu h*,p,ul,li na tvrdo a preferoval bych to třídami.

Co se týče facebooku... Zkus si to okno zmenšovat a přijdeš na to možná i sám :) A i tak. Nevím jestli dá někdo zedníkovi like na facebooku prostřednictvím stránky. Možná malinko na zamyšlenou. Já bych to tam třeba nedával. Zedníka budou hledat lidi, kterí budou chtít pomoct něco opravit nebo tak... A pokud mu tam dá někdo like tak už to bude jako malinkaté procento lidí, co na tu stránku přijdou.

S tím zahozením jsem to nemyslel úplně do slova, ale spíš jako tohle hodíš někam na stranu. Vycucneš si z toho co potřebuješ a pak to zahodíš. Něco jako psal Petr. Vzal bych bootstrap sestavil bych na tom stránku a až bude odladěná tak bych ji nahradil na webu.

JS musí podporovat všichni. (jako max si ho zakážeš v prohlížeči, ale neznám takový lidi)

A s tím věkem to nebylo nic proti mlaďákům, jak jsem psal. Taky jsem nějak začínal. Ale některé výtvory, co jdou na svět. .. Já bych se prostě za sebe styděl. Tohle už není tak zlé. Ale pokud nerozumíš základům CSS a HTML tak nejdříve našprtat a odzkoušet a pak vypustit první projekt. I kdyby nebyl hezký, kdyby jsi viděl můj první projekt. Mně se strašně líbil. Kód byl na jedničku, ale takovej design z toho bych blil :D Pak mě nasměrovali na bootstrap a začalo mi dávat spoustu věcí smysl a můj grafický pohled na "domací" weby se úplně změnil.

Webstorm chválím. Já mám IndeliJ a zkoušel jsem 2 roky PhPStorm a nedám na tu firmu dopustit.

Na něco odpovídal Petr, pokud jsem něco přeskočil, tak se omlouvám.

Ale předělal bych web, aby byl validní a pak bych ho zkusil udělat znovu a lépe takový zednikova 2.0. :D Čistý bootstrap přilinkuješ to do hlavičky a do patičky a více méně jen kopíruješ z dokumentace kusy kódu do projektu. Ten tvůj web není nijak náročný, takže bych se fakt nebál ho předělat na verzi 2.0. časem...

Ale nejdříve oprav chyby a pak koukni na základy html a css :)

To že má bootsrap různě rozsložkované soubory (teď si nevzpomenu jak se to jmenuje) tak to pochytíš časem až se budeš webům věnovat víc. budeš dělat nějaké php třeba a tak...
Tobě by mohla stačit projektová složka v které budeš mít
/css
/js
/img
/img/galerie
/img/favicon
/img/ikonky (pokud budeš chtít img nebo svg třeba? :D Ale spíš si linkni fonty i když to není zrovna ok, ale pro začátečníka jo, neřeš to a nalinkuj to tam...)
.html soubory (index.html)
Snad víš jak jsem chtěl vytvořit strukturu :)

Nahoru Odpovědět 13. února 11:29
Chybami se člověk učí.
Avatar
Daniel
Člen
Avatar
Daniel:16. února 11:38

Pokud chceš web dostat co nejvýše přečti si něco o SEO

Odkaz:

https://support.google.com/webmasters/answer/7451184?hl=cs
 
Nahoru Odpovědět 16. února 11:38
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 9 zpráv z 9.