Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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

Aktivity
Avatar
Michal Žůrek - misaz:14.5.2015 19:00

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 <a href="http://­www.itnetwork­.cz/zpravy/3588">Mic­halu Žůrkovi</a> 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í <a href="http://­www.itnetwork­.cz/pravidla-programatorskych-soutezi-machr">pravidel</a> 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
14.5.2015 19:00
Avatar
Pavel Mareš
Tvůrce
Avatar
Pavel Mareš:14.5.2015 19:25

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
14.5.2015 19:25
Však ono půjde ...
Avatar
Michal Žůrek - misaz:14.5.2015 20:04

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
14.5.2015 20:04
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Honza Bittner:14.5.2015 20:09

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

Nahoru Odpovědět
14.5.2015 20:09
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Odpovídá na Honza Bittner
Michal Žůrek - misaz:14.5.2015 20:27

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

 
Nahoru Odpovědět
14.5.2015 20:27
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
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é. :)

Nahoru Odpovědět
14.5.2015 20:31
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Odpovídá na Honza Bittner
Michal Žůrek - misaz:14.5.2015 20:33

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

 
Nahoru Odpovědět
14.5.2015 20:33
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Honza Bittner:14.5.2015 20:36

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

Nahoru Odpovědět
14.5.2015 20:36
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:17.5.2015 21:34

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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Žůrek - misaz:24.5.2015 17:12

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
24.5.2015 17:12
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
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.

Nahoru Odpovědět
25.5.2015 7:37
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Patrik Valkovič:25.5.2015 13:59

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 Valkovič
Michal Žůrek - misaz:25.5.2015 14:46

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
Avatar
Odpovídá na Michal Žůrek - misaz
Patrik Valkovič:25.5.2015 15:28

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.