Diskuze: Machr na webdesign - responzivní ovládací prvek

HTML a CSS HTML a CSS Machr na webdesign - responzivní ovládací prvek American English version English version

Avatar
Michal Žůrek (misaz):

Vítám Vás u dalšího machra na Webdesign.

Docela zásadní webovým trendem je web zobrazovaný na mobilním zařízení a s tím související responsivní web design. V tomto machrovi si zkusíte nastylovat (a klidně i naprogramovat) responzivní ovládací prvek.

Vyzkoušejte si vytvořit responzivní time picker. Time picker slouží k výběru času (nikoli datumu) a vybral jsem ho, protože lze vyřešit docela zajímavými způsoby. Kreativitě se meze nekladou.

Výstupem by měl být formulář kde půjde vybrat čas. Tento formulář by se měl přizpůsobovat zařízení, tak aby výběr času probíhal intuitivnější formou než je v mobilní verzi idosu, kde se čas zadává krkolomně do textového políčka.

Neřešte serverovou stranu.

Můžete použít HTML, CSS, JavaScript a jeho nadstavby (Dart, TypeScript, CoffeeScript, ...) a knihovnu jQuery. Nesmíte využít hotových již hotových prvků. Řešení posílejte v zazipované složce pojmenované po vašem Itnetwork nicku a odkaz umístěte zde do tohoto vlákna nebo Michalu Žůrkovi do PM.

Hodnotit se bude uživatelský zážitek, grafické zpracování, přehlednost zdrojového kódu, základní chyby (např. míchání HTML a CSS v jednou souboru a podobné prasárny). Bonusové body budou za podporu 12hod a 24hod formátu času.

Za porušení pravidel bude udělena bodová penalizace.

Deadline je v sobotu 23. 5. 2015 v 14:00.

Pro inspiraci máte přiložené obrázky (budíky z Windows Phone a Budíky Windows z Windows Store).

Odpovědět  +4 14.5.2015 19:00
Nesnáším {}, proto se jim vyhýbám.
Avatar
Pavel Mareš
Redaktor
Avatar
Pavel Mareš:

Jestli mi zbude čas, tak tohoto bych se i rád zúčastnil. Vypadá to fajn, díky. (Neříkám že se přidám, ale že se pokusím zúčastnit.)

Editováno 14.5.2015 19:26
Nahoru Odpovědět  ±0 14.5.2015 19:25
Nechci být workoholik. Bohužel někdy musíme být tím, čím nechceme.
Avatar
Michal Žůrek (misaz):

ještě možná jednu věc jsem zapomněl. Když se Vám zadání nelíbí odejděte, nikdo Vás nenutí. Nemusíte hned mínusovat každý příspěvek. Když se Vám nelíbí něco jiného, napište to.

Nahoru Odpovědět  +2 14.5.2015 20:04
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Honza Bittner:

Jen taková drobnost, Dart není nadstavba JS, ale úplně jiný jazyk s vlastním virtuálním strojem atd...

Nahoru Odpovědět  +2 14.5.2015 20:09
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Honza Bittner
Michal Žůrek (misaz):

ale stejně je přece interpretovaný JavaScriptem. ne?

Nahoru Odpovědět 14.5.2015 20:27
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Honza Bittner:

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é. :)

Nahoru Odpovědět 14.5.2015 20:31
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Honza Bittner
Michal Žůrek (misaz):

Takže v prohlížeči je pořád interpretován JavaScriptem => běží nad JavaScriptem => je jeho nadstavba.

Nahoru Odpovědět  +2 14.5.2015 20:33
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Honza Bittner:

No, asi by se to dalo nazvat jako taková velikánská nadstavba no... :D

Nahoru Odpovědět  +1 14.5.2015 20:36
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

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ý!! :)

Nahoru Odpovědět 17.5.2015 21:34
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Michal Žůrek (misaz):

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í:

  1. 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á.
  2. 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.
  3. 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.

Akceptované řešení
+5 Zkušeností
Řešení problému
Nahoru Odpovědět  +1 24.5.2015 17:12
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Honza Bittner:

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.

Nahoru Odpovědět 25.5.2015 7:37
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
patrik.valkovic
Šéfredaktor
Avatar
patrik.valkovic:

No nevím, na Firefoxu na stolním PC to vypadá hrozně teda...

Nahoru Odpovědět 25.5.2015 13:59
Nikdy neumíme dost na to, abychom se nemohli něco nového naučit.
Avatar
Odpovídá na patrik.valkovic
Michal Žůrek (misaz):

design té sample stránky sem splácal za 5 minut, možná ani to ne. Taky teď nemám moc času abych se s tím paplal. Na mobilu to vypadá trochu líp.

Nahoru Odpovědět 25.5.2015 14:46
Nesnáším {}, proto se jim vyhýbám.
Avatar
patrik.valkovic
Šéfredaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
patrik.valkovic:

Já myslel to ovládání jako takové....vedle toho inputu se ukáže jen malinký obdelníček, na kterém se kliká...nevím jestli to tak má být nebo jsem blbý ale pokud to tak má být tak je to upřímně pěkně na nic...

Nahoru Odpovědět 25.5.2015 15:28
Nikdy neumíme dost na to, abychom se nemohli něco nového naučit.
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 14 zpráv z 14.