Diskuze: Machr na webdesign - responzivní ovládací prvek
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Honza Bittner:14.5.2015 20:31
V současné verzi se kompiluje do javascriptu. Sám běží jen ve speciálním buildu Chromu. Do nedávna chtěli zakomponovat Dart do prohlížečů, ale nedávno se rozhodli, že to nemá smysl, takže budou vylepšovat jen generátor dart2js.
V Dartu se ale také dají dělat serverové appky, comand line i do mobilů, což se teprve tak trochu rozjíždí...
Pro weby to je nyní v podobném duchu jako coffeescript, prostě preprocesor.
Bude teprve zajímavé. 
Moc rád bych se přidal do soutěže, ale bohužel nemám čas a musím
dopisovat ročníkovou práci a vyladit známky ve škole. 
Snad se přidá někdo jiný!!
Tato část responzivního designu vůbec netáhne. Nedošlo jediné řešení, škoda. Je vidět, že vám vůbec nedělá problém přepracovat layout webu pro mobilní zařízení (viz. Machr na webdesign responzivní menu), ale to je jen jedna číst RD. RD je o přizpůsobení webu různým typům zařízení a i přizpůsobení konkrétních ovládacích prvků do tohoto spadá. Zkuste si třeba vytvořit nějaký větší formulář s různými prvky (vybírejte i nějaké exotičtější prvky, třeba input[type=color]) a na mobilu jej vyplnit.
Abych ukázal, že to jde, jsem si připravil ukázku jak by to mohlo vypadat.
http://misaz.moxo.cz/…k/timepicker
ukázka je 100% funkční v mobilním Internet Exploreru (Lumia 920 a 620) a předpokládám, že každý jiný (aktuální) mobilní prohlížeč ji také zvládne. Na ukázce jde vidět několik věcí:
- ukázka nedetekuje "styl" zobrazovaného prvku podle velikosti obrazovky, ale podle toho, zdali zařízení disponuje dotykovou obrazovkou. Je totiž nepraktické, když máte notebook s dotykovou obrazovkou a jste nuceni vyplňovat čas na klávesnici, která u konvertibilních zařízeni nemusí být nutně ani dostupná.
- jestliže budeme chtít prvek distribuovat, měl by být přizpůsobitelný. Všimnout si můžete, že popisek načítám (tak jak si standart W3C představuje) z elementu <label>, nikoli z žádného attributu. Barva textu je zase načtena z CSS. I barvy sloupečků jsem původně chtěl načítat z CSS, ale custom-properties (alias CSS variables) nejsou prohlížeči podporovány, tak jsem se rozhodl to nechat na data-* atributech.
- Přizpůsoben je i desktopový prvek. Opět z důvodu podpory prohlížečů. Input typu time v podstatě podporuje jen Google Chrome, takže script přeimplementuje výchozí prvek a zajistí i ošetření vstupu (což prohlížeč, který to nepodporuje logicky schopen zajistit není).
Ze zvědavosti můžete do scriptu nakouknout. Kvůli časové tísni není moc (vůbec) komentovaný a zůstali mi tam nějaká TODOčka, takže to zkuste překousnout.
V budoucnu o tom sepíšu nějaké články.
Nikdo Vám nebrání si to vyzkoušet mimo soutěž i po deadline a pokud se nedokážete vydržet nepodívat na řešení, si zkuste vytvořit třeba ten responzivní picker barvy.
+5 Zkušeností
Honza Bittner:25.5.2015 7:37
Tak to je škoda, že se nikdo nepřihlásil... 
Kdybych nedělal ročníkovku, určo
bych se přidal.
Tvé řešení jsem zkoušel, hezké. Jen na mobilu mi zůstávaly kuličky také na původním místě a
text času se mi nějak duplikoval.
Zobrazeno 14 zpráv z 14.