Diskuze: Machr na webdesign - responzivní menu
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Honza Bittner:22.4.2015 20:48
Dost se mi líbí článek http://csswizardry.com/…d-bem-syntax, kde je to hezky popsáno.
Koukni tedy tam a případně pogoogli dále. 
Honza Bittner:22.4.2015 21:53
Ne, čistá stránka a menu.
Chci hodnotit jen menu, né stránku - a prodírat se tam pak dalším
balastem...
Já už málem dostal infarkt, že to bude končit a ono to je až do
čtvrtka. Uf.
Takže moje menu je hotovo
Online verze: http://menu.sogocze.cz/
Stažení: http://menu.sogocze.cz/SogoCZE.zip (nebo http://leteckaposta.cz/312633935)
Všem přeji hodně štěstí a doufám že jsem na nic nezapomněl 
.
Takže tu mám finální verzi
Online verze: http://menu.sogocze.cz/
Stažení: http://menu.sogocze.cz/SogoCZE.zip (a nebo http://leteckaposta.cz/138779603)
Tak , prvý krát sa zapojím do súťaže ,
download: http://leteckaposta.cz/658083977
Tento týždeň maturujem takže dúfam že som v tom zhone nezabudol na nič
Honza Bittner:27.4.2015 20:12
Samozřejmě že to takto nechat můžeš, ale riskuješ, že pokud budu mít špatnou náladu, tak ti Tvé řešení nepřijmu.
Bude tedy lepší, pokud dodržíš podmínky a pravidla soutěže.
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 
Mám tu tedy řešení od
Leaf, Matej, softman23, SogoCZE, TomasGlawaty a Tomáš123...
Pokud jsem někoho řešení přehlídnul, pište.
Takže, vyhodnotil jsem soutěž.
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:
- Autoprefixer: https://github.com/…autoprefixer
- Graf specifičnosti: http://jonassebastianohlsson.com/…icity-graph/
Umístili jste se tedy v tomto pořadí:
- Patrik Smělý (8b)
- TomasGlawaty (7b)
- Filip Stryk (6,5b)
- Matej (5b)
- Tomáš123 (4,5b)
- softman (1,1b)
Placku tedy vyhrává Patrik Smělý, napiš Zdeněk Pavlátka a publikuj své
menu.
### Tomáš123
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.
+5 Zkušeností
Gratuluji Patrik Smělý, který s tím machrem otravoval
pořád.
Tak ses konečně dočkal placky, hochu. 
Patrik Smělý , Gratuluji, menu vypadá pěkně
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).
Tomáš123:2.5.2015 14:37
Ď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
TomasGlawaty:2.5.2015 14:43
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.
Honza Bittner:2.5.2015 14:50
Pracuji na projektu, kde mám styly s několika tisíc řádky kódu CSS a
opravdu mi věř, že bez volných řádků to nikdy nebude tak přehledné.
Zobrazeno 50 zpráv z 50.