NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

Diskuze: Machr na webdesign - CSS android

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Zdeněk Pavlátka
Tvůrce
Avatar
Zdeněk Pavlátka:9.7.2014 21:06

Ahoj, po nějaké době si v další soutěži procvičíte CSS3. Vaším úkolem bude pomocí CSS (bez obrázků) vytvořit Android robota (podle obrázku níže). Aby to ale nebylo tak jednoduché, přidáte i animaci. Stačí nějaké změny barev, pokročilejší mohou robota rozpohybovat.

Hodnotit budu podobnost vzorovému obrázku, nápad (u animace), kód a celkový dojem.

Čas si dáme trochu delší (přeci jen jsou prázdniny), a to do neděle 20.7.2014 do 23:00. Vyhodnocení by mělo být následující pondělí.

Kompletní pravidla soutěží: http://www.itnetwork.cz/…outezi-machr

Pozn.: Prosím odevzdávejte to v zazipované složce, ať to nemusím rozbalovat nějakou webovou službou

Odpovědět
9.7.2014 21:06
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Zdeněk Pavlátka
Tvůrce
Avatar
Zdeněk Pavlátka:9.7.2014 21:08

Ještě placky:

Nahoru Odpovědět
9.7.2014 21:08
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Zdeněk Pavlátka
Tvůrce
Avatar
Odpovídá na Zdeněk Pavlátka
Zdeněk Pavlátka:9.7.2014 21:09

A vzorový obrázek:

Pozn.: jednotlivě ty obrázky posílám proto, že jsem na tabletu a nejde mi vybrat víc souborů

Nahoru Odpovědět
9.7.2014 21:09
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
albertpatera
Tvůrce
Avatar
Odpovídá na Zdeněk Pavlátka
albertpatera:9.7.2014 21:11

Nikde nevidim ten obrázek ;-) :-)

//sorry, postnul jsem to pozdě :D

Editováno 9.7.2014 21:12
 
Nahoru Odpovědět
9.7.2014 21:11
Avatar
pokusnicek
Člen
Avatar
Odpovídá na Zdeněk Pavlátka
pokusnicek:9.7.2014 23:29

Androidáka už mám nakodovanýho, jen poladit animace a je hotovo..:)

 
Nahoru Odpovědět
9.7.2014 23:29
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Michal Žůrek - misaz:12.7.2014 21:43

Ahoj,
oddychem od geekwork a po delší době se zapojuji do machra. Moje řešení je rozděleno do dvou CSS souborů aby bylo znovupoužitelné. android.css obsahuje androida a jeho animace a ten zbytek už to nějak implementuje do stránek. Ve simple-android.html jsou nějaké ukázky a v index.html je pak ukázka v praxi. Je to testované v IE, chrome a firefoxu, bohužel firefox jaksi znásilňuje trampolínu. Co nadělám, prostě v mozille asi nečekali, že by někdo animoval border...

Download: http://misaz.moxo.cz/…tyden-27.zip
Online: http://misaz.moxo.cz/…k/machr1427/

 
Nahoru Odpovědět
12.7.2014 21:43
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Michal Žůrek - misaz:12.7.2014 21:45

a ještě jsem zapomněl na obrázek...

 
Nahoru Odpovědět
12.7.2014 21:45
Avatar
pokusnicek
Člen
Avatar
pokusnicek:12.7.2014 21:49

No, tak to radči svůj výtvor posílat nebudu, nemělo by to cenu.

 
Nahoru Odpovědět
12.7.2014 21:49
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na pokusnicek
Michal Žůrek - misaz:12.7.2014 21:53

pošli ať to vypadá, jak to vypadá.

 
Nahoru Odpovědět
12.7.2014 21:53
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Michal Žůrek - misaz:12.7.2014 21:54

mimochodem neexistuje placka Machr na Android?

David Hartinger

 
Nahoru Odpovědět
12.7.2014 21:54
Avatar
Ondrca
Tvůrce
Avatar
Odpovídá na Zdeněk Pavlátka
Ondrca:12.7.2014 22:31

Tenhle týden jenom jeden machr?

Nahoru Odpovědět
12.7.2014 22:31
Zase jsem o něco chytřejší
Avatar
KlimiCZ
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
KlimiCZ:12.7.2014 22:35

Existuje koukni se do pravidel je to tam na obrazku

Nahoru Odpovědět
12.7.2014 22:35
Nesnaž se zakrýt něco, co jsi provedl úmyslně. Svět je tak malý, že dotyčný se to stejně dozví.
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:12.7.2014 22:42

Hej, také něco udělám, haha... :D

Nahoru Odpovědět
12.7.2014 22:42
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Ondrca
Tvůrce
Avatar
Odpovídá na Honza Bittner
Ondrca:12.7.2014 22:45

Ten smích nezní dobře, tebe něco napadlo, viď? :D

Nahoru Odpovědět
12.7.2014 22:45
Zase jsem o něco chytřejší
Avatar

Člen
Avatar
Odpovídá na Zdeněk Pavlátka
:12.7.2014 22:58

Efekty můžou být v js?

 
Nahoru Odpovědět
12.7.2014 22:58
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na
Honza Bittner:12.7.2014 23:08

IMHO ne, je to pouze CSS3.

Nahoru Odpovědět
12.7.2014 23:08
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Zdeněk Pavlátka
Tvůrce
Avatar
Odpovídá na
Zdeněk Pavlátka:13.7.2014 7:30

Ne, jen v CSS3.

Nahoru Odpovědět
13.7.2014 7:30
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Zdeněk Pavlátka
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Zdeněk Pavlátka:13.7.2014 7:30

Existuje, ale já jí aktuálně nemám (a David také ne).

Nahoru Odpovědět
13.7.2014 7:30
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Michal Žůrek - misaz:13.7.2014 10:32

no já jsem použil JS aby mi to roztáhl přes celou obrazovku a přesto zachoval poměr stran, vadí to?

 
Nahoru Odpovědět
13.7.2014 10:32
Avatar
PiskotPiskotovic
Tvůrce
Avatar
PiskotPiskotovic:14.7.2014 18:20

Jaksi mi blbnou ruce. Když jednu nad div s classem "telo", a druhou pod něj, smuchlá se to dohromady. Takže už fakt nevim, skončil jsem dost brzo. :/

Nahoru Odpovědět
14.7.2014 18:20
Error 404 - stránka motto.php nenalezena.
Avatar
PiskotPiskotovic
Tvůrce
Avatar
Odpovídá na PiskotPiskotovic
PiskotPiskotovic:14.7.2014 18:38

Tak dobře, vyřešeno.

Nahoru Odpovědět
14.7.2014 18:38
Error 404 - stránka motto.php nenalezena.
Avatar
PiskotPiskotovic
Tvůrce
Avatar
Odpovídá na Zdeněk Pavlátka
PiskotPiskotovic:14.7.2014 18:56

Jak jste udělali ten půlkruh ? (hlava androida)

Nahoru Odpovědět
14.7.2014 18:56
Error 404 - stránka motto.php nenalezena.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na PiskotPiskotovic
Michal Žůrek - misaz:14.7.2014 18:57

stáhni si třeba můj zdroják a podívej se :)

 
Nahoru Odpovědět
14.7.2014 18:57
Avatar
PiskotPiskotovic
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
PiskotPiskotovic:14.7.2014 19:25

To jsem se díval ... udělalo mi to čtvrtovál :D Jinak týden budu pryč takže pokud nebudu odpovídat tak víš proč ... Den mi ještě na úkol zbyde :) mám to hotový, jen ta hlava mi chybí + Nedaří se mi to dát nad zbytek končetin androidíka

Editováno 14.7.2014 19:25
Nahoru Odpovědět
14.7.2014 19:25
Error 404 - stránka motto.php nenalezena.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na PiskotPiskotovic
Michal Žůrek - misaz:14.7.2014 19:26

čtvrt ovál vznikne, když nastavíš odlišnou šířku a výšku.

http://jsfiddle.net/sGk5L/

Editováno 14.7.2014 19:29
 
Nahoru Odpovědět
14.7.2014 19:26
Avatar
PiskotPiskotovic
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
PiskotPiskotovic:14.7.2014 19:29

BTW, já ale myslel, jak udělat půl ovál ... Děkuji za snahu, můj problém to nevyřešilo

Editováno 14.7.2014 19:32
Nahoru Odpovědět
14.7.2014 19:29
Error 404 - stránka motto.php nenalezena.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na PiskotPiskotovic
Michal Žůrek - misaz:14.7.2014 19:30

jak nastavíš už si vyřeš sám, editací jsem doplnil odkaz na jsfidle kde demonstruji čtvrt-kruh a čtvrt-ovál.

 
Nahoru Odpovědět
14.7.2014 19:30
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:14.7.2014 19:31

HEj, to nestihnu, jedu na tábor. :D

Nahoru Odpovědět
14.7.2014 19:31
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
Tvůrce
Avatar
Odpovídá na Honza Bittner
Michal Žůrek - misaz:14.7.2014 19:32

Cituji uživatel Honza Bittner:

haha

:D :D
 
Nahoru Odpovědět
14.7.2014 19:32
Avatar
PiskotPiskotovic
Tvůrce
Avatar
Odpovídá na Honza Bittner
PiskotPiskotovic:14.7.2014 19:37

Ne, to tě nemusí zajímat ...

Nahoru Odpovědět
14.7.2014 19:37
Error 404 - stránka motto.php nenalezena.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na PiskotPiskotovic
Michal Žůrek - misaz:14.7.2014 19:37

půl ovál nijak, musíš použít dva čtvrt-kruhy.

Editováno 14.7.2014 19:39
 
Nahoru Odpovědět
14.7.2014 19:37
Avatar
Zdeněk Pavlátka
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Zdeněk Pavlátka:14.7.2014 21:15

Tomu dej pevnou velikost, js tam nechci.

Nahoru Odpovědět
14.7.2014 21:15
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Zdeněk Pavlátka
Michal Žůrek - misaz:14.7.2014 21:30

fajn, tady je verze bez JS.

Download: http://misaz.moxo.cz/…ithou-js.zip
Online: zůstává verze s JS

 
Nahoru Odpovědět
14.7.2014 21:30
Avatar
Zdeněk Pavlátka
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Zdeněk Pavlátka:14.7.2014 21:57

Promiň za i--, překlep na tabletu ;[

Nahoru Odpovědět
14.7.2014 21:57
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Michal Žůrek - misaz:14.7.2014 22:42

můžu znát řešení toho kdo mi to omínuskoval?

 
Nahoru Odpovědět
14.7.2014 22:42
Avatar
qwertyW
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
qwertyW:14.7.2014 22:47

neměl by ten prostřední droid z čistě fyzikální pohledu i při točení padat dolů, takhle to vypadá že se zasekne ve vzduchu, otočí se a pak až spadne :)

Editováno 14.7.2014 22:48
Nahoru Odpovědět
14.7.2014 22:47
Programuji, tedy jsem.
Avatar
Jakub Vaněk (Bubavanek)
Člen
Avatar
Odpovídá na qwertyW
Jakub Vaněk (Bubavanek):14.7.2014 22:59

Z čistě fyzikálního pohledu nemusí, pokud by se otáčel opravdu rychle, stihne se otočit v nejvyšším bodě, tudíž by vypadal jako že visí ve vzduchu. Snad jsem to napsal nějak pochopitelně :D

 
Nahoru Odpovědět
14.7.2014 22:59
Avatar
Zdeněk Pavlátka
Tvůrce
Avatar
Odpovídá na Zdeněk Pavlátka
Zdeněk Pavlátka:15.7.2014 6:53

Bohužel musím zkrátit čas na tvorbu, v sobotu odjíždím, takže soutěž končí v pátek 18.7.2014 v 10:00 ráno.

Editováno 15.7.2014 6:56
Nahoru Odpovědět
15.7.2014 6:53
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Martin
Člen
Avatar
Odpovídá na Zdeněk Pavlátka
Martin:16.7.2014 9:43

tak taky jeden pokus
http://www.zikma.com/Martin.zip

Editováno 16.7.2014 9:45
Nahoru Odpovědět
16.7.2014 9:43
Je jedno co děláš, ale záleží jak dobře to umíš prodat.
Avatar
DHPICO
Tvůrce
Avatar
DHPICO:18.7.2014 0:01

Tak proč to nezkusit :D
http://leteckaposta.cz/502004541

Nahoru Odpovědět
18.7.2014 0:01
Požehnáni budíš oráj
Avatar
Zdeněk Pavlátka
Tvůrce
Avatar
Zdeněk Pavlátka:18.7.2014 19:55

Tak konečně hodnocení.

Martin :
Kód není špatný, animace je rozhodně zajímavá, celkem mě pobavila. Pro funkčnost jsem ale musel připsat prefixy. A místo from a to používej 0% a 100%.

Ondrca :
Kód krásný, všude prefixy, asi takhle jsem si to představoval. Sice úplně nechápu smysl animace ale to tady není podstatné.

Misaz :
Animace krásná, kód skvělý, nemám co dodat.

DHPICO :
Animace není nic moc. Kód není špatný, ale CSS patří do samostatného souboru.
pozn.: odevzdávat se má v .zip , ne v .rar

Q++ :
Uznal jsem ti to, ale porušil jsi hned 3 pravidla - na uloz.to to nemá co dělat, odevzdávat se má .zip pojmenovaný podle tvé přezdívky. Měl by sis ta pravidla přečíst.
CSS by mělo být ve zvláštním souboru, animace žádná, jen změna pozadí při najetí myší.

Nejlépe dopadl Michal Žůrek - misaz , který získává placku. Ondrcovo dílo bylo také moc pěkné, ale přeci jen ne tak propracované. Michal Žůrek - misaz svůj výtvor publikuj a do PM mi napiš adresu, kam ti mám placku poslat.

Nahoru Odpovědět
18.7.2014 19:55
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Zdeněk Pavlátka
Michal Žůrek - misaz:18.7.2014 20:26

1.) můj kód by se dal zlepšit
2.) čekal jsem že tak primitivní obrázek přetransformujte s přesností na jeden pixel (ok na 2, kvůli ztrátové kompresi originálu), tutoriál který napíšu si rozhodně přečtěte, vysvětlím jak to okopírovat dokonale a přidám nějaké tipy k CSS.

Publikuji to (protože můj čas = 0, tak nevím kdy), placku jednou mám a 2× ji nepotřebuji.

 
Nahoru Odpovědět
18.7.2014 20:26
Avatar
Zdeněk Pavlátka
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Zdeněk Pavlátka:18.7.2014 20:42

Zlepšit by se urcitě dal, ale v porovnání s ostatními je krásný.

Nahoru Odpovědět
18.7.2014 20:42
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Michal Žůrek - misaz:18.7.2014 21:33

mohl bych vidět výtvor Ondrca ?

 
Nahoru Odpovědět
18.7.2014 21:33
Avatar
Ondrca
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Ondrca:18.7.2014 22:00

Jojo, tady je:
www.ondrca.eu/vytvory/android

Nahoru Odpovědět
18.7.2014 22:00
Zase jsem o něco chytřejší
Avatar
PiskotPiskotovic
Tvůrce
Avatar
PiskotPiskotovic:28.7.2014 10:29

Už by jste mohli udělat dalšího machra ... ;)

Nahoru Odpovědět
28.7.2014 10:29
Error 404 - stránka motto.php nenalezena.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na PiskotPiskotovic
Michal Žůrek - misaz:28.7.2014 10:35

Zdeněk Pavlátka psal, že někam jel, takže bude asi pauza.

 
Nahoru Odpovědět
28.7.2014 10:35
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 47 zpráv z 47.