Zdravím. Po delší době vyhlašuji Machra na webdesign. Doufám tedy, že
se přihlásí (a hlavně dokončí) úlohu hodně lidí!
V tomto Machrovi se zaměříme na tvorbu responzivního menu, kam se může zapojit úplně každý,
jelikož jsem základní ideu sepsal a můžete se tedy inspirovat.
Pracovat můžete s jazyky HTML a CSS a kdo chce, může zapojit i JS (či
Dart), a naším cílem bude vytvořit co možná nejvíce fantastické
responzivní menu. Menu může mít libovolné rozložení - záleží
na vaší fantazii.
Jedinou podmínkou je použití minimálně jednoho media query.
Co se hodnotí:
kód & funkčnost - 6b
validita kódu - 2b
vzhled menu - 2b
Extra bod můžete získat za použití objektových stylů
(OOCSS, nejlépe se syntaxí BEM) a CSS preprocesoru.
BEM syntaxe jsou takové ty podtržítka a pomlčky ->
.clovek__ruka a .clovek__ruka--prava, kde __ značí potomka a
-- značí modifikátor.
Pokud máte jakékoli dotazy, nebojte se napsat do komentářů.
Čas máte do čtvrtka 30. 4. 2015 do 15:00. Vyhodnocení
proběhne (ideálně) téhož dne odpoledne.
Nápad to není tak špatný, ale ještě by to chtělo doladit. Domů bych
dal na druhou stranu a čáry k hlavní vedoucí k položce domů vést od
všech ostatních položek také to občas nesedí. Položky bych udělal s
normálním rámečkem a ze strany od prostřed vedl čáru k hlavní.
Tak na poslední chvíli, ale přece
Tady je můj první machr. http://leteckaposta.cz/692747003
moc jsem nestíhal, takže to bude mít nejspíše nějaké mouchy
Docela mě mrzí, a také udivuje, že se přihlásilo tak málo lidí -
přes to, že mnoho lidí chce Machra na webdesign a dokonce jsem udělal i
články s základním principem...
V hodnoceních odkazuji na nějaké nástroje, nebo je využívám, a proto
se koukněte na:
Kód & funkčnost: (2,5) Styly : Pokud posíláš někam, a kor do soutěže, nějaký
kód, snaž se ho také čitelně upravit a rozdělit na samostatné soubory. HTML : Tvůj div.center je v podstatě k ničemu, jelikož
stejný efekt můžeš udělat použitím na seznam. Využíváš ID - které
mají opravdu velkou specifičnost a obecně se doporučuje je nepoužívat.
Nikde nemáš nastavené kódování, což by jsi určitě měl. Univerzálnost : Menu se sice tak nějak přizpůsobí více
položkám, ale nemáš to moc doladěné.
Validita: (1,5) HTML je validní, styly jsou opravdu
hooodně specifické - což není nikdy moc dobré.
Vzhled: (0,5) Menu se mi nelíbí - používáš poměrně
divné barvy, vykreslují se mi divné znaky (nemáš to kódování), první
položka má bůh ví proč jiný levý rámeček.
### TomasGlawaty
Kód & funkčnost: (3) Styly : Trochu mě zaráží (ne)přehlednost tvého kódu -
žádné mezery (resp. odsazení), nic... Piš svůj kód přehledně!
Proměnné stylem "nav__list--height--before--760" asi také nebudou nijak extra
dobrá volba. BEM (resp. OOCSS) je pro třídy v HTML, né pro Sass proměnné.
Ale jinak se zdá, že jsi Sass používal poměrně dobře. Jen bych místo
prefixování Sassem použil nástroj Autoprefixer - což je vážně bomba. JS : Používáš logiku v JS, která by se dala ale podle mě
ještě pořád vylepšovat. Líbí se mi, že se nezobrazí tlačítko pro
minimalizaci menu, a menu je otevřené, když JS nefunguje - to je správně.
Vadou na kráse je pak neošetření "zběsilého klikání", kdy se ti ukazatel
postupně přemisťuje položku po položce - udržuje si frontu, což by neměl
a měl by přejet hned na poslední kliknutou položku. HTML : OOCSS se zdá být použito dobrou cestou. Otázkou pak
je, jestli opravdu přidávat modifikátory pro každou položku, jelikož forma
menu bez JS stejně nemá moc smysl, a proto by menu mělo být IMHO upraveno do
formy kruku s ukazovátkem až s JS. Univerzálnost : Menu je není univerzální, což jeho
funkčnost trochu více omezuje.
Validita: (2) Validita a specifičnost kódu super.
Vzhled: (1) Vzhled není IMHO nic extra a šlo by si s ním
vyhrát daleko více. Efekty u skrývání menu jsou poměrně divné. Ale
využíváš docela použitelné barvy a máš to nějakým způsobem
sjednocené.
### SogoCZE
Kód & funkčnost: (3) Styly : Nikdy nepoužívej "0px" - v CSS je to nula bez
jednotky. Psaní toho OOCSS bez frameworku vypadá docela divně - hehe.
Doporučuji vymyslet si - nebo někde najít ověřenou metodu - v jakém
pořadí zapisovat vlastnosti. Dobrým zvykem je selektory odsazovat jednou
mezerou ze shora, což je o mnoho přehlednější. Media jsou použity opravdu
šíleně - a hlavně zbytečně. Pro tvé účely by totiž stačily pouze 2 -
prvky menu totiž můžeš jednoduše zarovnat do stran, a né stále a stále
měnit šířku. Své styly importuj vždy jako poslední - aby ti nikdo nic
nemohl přepsat. JS : Doufám, že ten interval má být jenom hloupý vtip?
Používat interval pro
kontrolu je prostě špatné. Lepší by bylo využít události resize
na oknu. Výměnu ikonek děláš opravdu špatně - přeci nebudeš pokaždé
přepisovat celý element, když stačí přepsat třída? V kódu máš
zbytečné středníky a někde ti zase chybí. Rozbalování by se dalo
určitě udělat elegantněji... Menu se bez JS na malých obrazovkách
neukáže - což je kontraproduktivní. HTML : Podle mě používáš OOCSS trochu divně. Mít někde
'class="menu__ul menu__PrihlaseniMenu"' je špatný přístup, jelikož např.
oko zároveň nemůže být i pusa, že? Lepším řešením použití by tedy
bylo např. 'class="menu__ul menu__ul--login"'. Univerzálnost : Menu se ti při větším počtu položek
nezobrazí správně. Na malé obrazovce se zobrazí scroll bar, což je OK.
Validita: (2) Validita a specifičnost kódu v
pořádku.
Vzhled: (2) Vzhled by se dal samozřejmě ještě hodně
vylepšit, ale máš použité líbivé barvy a všechno hezky sladěno, takže
ti dám plný počet.
### softman23
Kód & funkčnost: (1) Styly : Také - používáš ID, což má za následek velkou
specifičnost a nedoporučují se používat pro stylování. Tvé styly jsou
ještě okořeněné tím, že máš v selektoru 2 ID, což pak nedává
žádný velký smysl. Odsazuješ si asi jak jen se ti zlíbí - nějaký pokus
o random? Nepoužívej "0px", nulové hodnoty se píší bez jednotek.
Několikrát máš v kódu duplikovanou vlastnost. Chtělo by si to udělat
pořadí vlastností - jak je budeš psát za sebou. Hlavní podstatou této
soutěže bylo vytvořit menu responzivní, což jsi
neudělal. HTML : Nevím tedy kde jsi se HTML učil, ale evidentně ti to
moc nešlo. Univerzálnost : Raději ani zkoušet přidávat další
položky nebudu, jelikož vůbec netuším jak.
Validita: (0) Zkoušet snad ani nemusím -> 0 bodů.
Vzhled: (0.1) Menu je naprosto ošklivé a hlavně
nefunkční. Za snahu dávám alespoň 0.1 bodů.
### Matej
Kód & funkčnost: (3) Styly : Klikatelná oblast zasahuje mimo "tlačítka", což je
špatné. Tvoje odsazení je nic moc - také si to dělat jak jen chceš.
Každá vlastnost by měla být na vlastním řádku. JS : Bez JS jsi prostě v háji - nic nefunguje. JS docela v
pohodě - dal by se však ještě zlepšit -> přenést efekty do CSS atd. HTML : Používáš zápis pro nějaký staré HTML. Své styly
importuj vždy jako poslední. Pokud nemáš v položkách nic napsáno, proč
tam dělat mezeru? Univerzálnost : Pro více položek ti funguje jen malé
menu.
Validita: (1) V kódu (CSS) máš několik errorů - chybí
ti jednotky, závorka... HTML vypadá v pohodě.
Vzhled: (1) Nápad se mi líbí. Docela hezké efekty a
zajímavý způsob, ale ve skutečnosti bys jej asi nikde nevyužil. V malém
menu by to chtělo nějaké popisky.
### Leaf
Kód & funkčnost: (4) Styly : Pokud koukám dobře, tak tu máš +- nějaké pořadí
vlastností, využíváš mobile-first a OOCSS s BEM také používáš dobře.
Možná bych jen změnil název class="menu__hlavicka-odkaz", což moc daný
element nespecifikuje. U nulových hodnot nepoužívej jednotky, jinak CSS
vypadá OK. JS : Také - intervalem bych určitě menu nekontroloval a
také bych neměnil tlačítko jako celý element. HTML : HTML, až na chyby, vypadá v pohodě. OOCSS
využíváš dobře. Importování jQuery bych umístil také na spodek
stránky. Univerzálnost : Menu se ti nezobrazí moc dobře při více
položkách - funguje jen +- na malých obrazovkách.
Validita: (1) Tvoje HTML je nevalidní - špatné názvy
elementu, což je docela škoda a příště, až budeš něco posílat do
soutěže, by jsi si to měl zkontrolovat. CSS je OK.
Vzhled: (1) Využíváš né moc hezké barvy a máš vcelku
podivné efekty. Při zavírání menu se ti každý položka zmenšuje - její
šířka - což vypadá zvláštně. Při aktivní/hover položce se ti
invertuje pozadí s rámečkem, což také není nijak cool - minimálně v
podání těchto barev.
Jinak vidím, že placka mi utekla těsně, což mě trochu mrzí, ale co se
dá dělat
Kód je trochu zprasený, jelikož jsem neměl čas a dělal jsem to na
poslední chvíli (na to se nevymlouvám).
Honza Bittner"Trochu mě zaráží (ne)přehlednost tvého kódu -
žádné mezery (resp. odsazení), nic... Piš svůj kód přehledně!"
Jestli jsem to pochopil, tak se ti SASS zobrazuje bez odsazení? já ho tam mám
(viz. obrázek).
Honza to špatně napsal, tvůj kódy vypadá jako bys ho hodil do nějakého
lisovacího stroje. Provzdušni ho trochu. Cíl je takvý, že když nim budeš
scrolovat rozeznáš jednotlivé bloky, takhle máš jeden jediný.
Ďakujem za objektívnu kritiku kódu. Uznávam si chyby. Rád by som ale
dodal, že kódovanie som dodatočne nastavil, ale uploadol som zlú verziu...
Štýly sú konkrétne kvôli neprerobeniu z existujúcich stránok. Taktiež
div.center bol vytvorený pre ľahšiu editáciu šírky všetkých prvkov na
stránke. Viď: http://tomas123.mujskript.cz/.
Nemám grafické cítenie, preto asi to nepekné menu (ten rámček mal
symbolizovať akúsi hranu vystupujúcej položky v osi z)...
Každopádne ďakujem a pripájam sa ku gratulácii výhercovi
OK, ale myslím si, že to spíše otázkou preferencí jednotlivce. Mě se
dobře čte, když to je hned pod sebou, jelikož vidím co k sobě patří.
Když je moc mezer mezi řádky (nedej bože několik prázdných řádků pod
sebou) tak se v kódu ztrácím a nevím kde - v jakém bloku jsem.
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.