Kritika webu zednikova.cz
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
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.


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.
No pod dlouhé době. Malinko koukatelný web . 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=device-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
<body> ti vzalo asi nožičky a že v tom webu nebude
<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 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
. 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>
Hodně štěstí s projektem. Není to zlé, ale vylaď to.
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++
Tučňák:13.2.2019 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ů.
Tučňák:13.2.2019 10:39
No pod dlouhé době. Malinko koukatelný web
. 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
Fail...
<body> ti vzalo asi nožičky a že v tom webu nebude
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/Facebooku/nevímKdeJeštěByMohliHledatZední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
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
.
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>
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í
Peter Mlich:13.2.2019 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
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
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. Č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? 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
Zobrazeno 9 zpráv z 9.