Válí se ti projekty v šuplíku? Dostaň je mezi lidi a získej cool tričko a body na profi IT kurzy v soutěži ITnetwork summer 2017!
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)
Avatar
Zdeněk Pavlátka
Tým ITnetwork
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  +1 9.7.2014 21:06
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Zdeněk Pavlátka
Tým ITnetwork
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
Tým ITnetwork
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  +1 9.7.2014 21:09
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
albertpatera
Redaktor
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  +1 9.7.2014 21:11
Avatar
Kejmou
Člen
Avatar
Odpovídá na Zdeněk Pavlátka
Kejmou:9.7.2014 23:29

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

 
Nahoru Odpovědět  +1 9.7.2014 23:29
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  +4 12.7.2014 21:43
Nesnáším {}, proto se jim vyhýbám.
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
Nesnáším {}, proto se jim vyhýbám.
Avatar
Kejmou
Člen
Avatar
Kejmou: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
Odpovídá na Kejmou
Michal Žůrek (misaz):12.7.2014 21:53

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

Nahoru Odpovědět  +1 12.7.2014 21:53
Nesnáším {}, proto se jim vyhýbám.
Avatar
Michal Žůrek (misaz):12.7.2014 21:54

mimochodem neexistuje placka Machr na Android?

David Čápka

Nahoru Odpovědět 12.7.2014 21:54
Nesnáším {}, proto se jim vyhýbám.
Avatar
Ondrca
Redaktor
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
Redaktor
Avatar
Honza Bittner:12.7.2014 22:42

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

Nahoru Odpovědět  +1 12.7.2014 22:42
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
Avatar
Ondrca
Redaktor
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
Redaktor
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
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
Avatar
Zdeněk Pavlátka
Tým ITnetwork
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
Tým ITnetwork
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):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
Nesnáším {}, proto se jim vyhýbám.
Avatar
PiskotPiskotovic
Redaktor
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
Redaktor
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
Redaktor
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
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
Nesnáším {}, proto se jim vyhýbám.
Avatar
PiskotPiskotovic
Redaktor
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
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
Nesnáším {}, proto se jim vyhýbám.
Avatar
PiskotPiskotovic
Redaktor
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
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
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:14.7.2014 19:31

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

Nahoru Odpovědět  ±0 14.7.2014 19:31
Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a zeptat na cokoli se mě můžeš na https://github.com/HoBi/...
Avatar
Nahoru Odpovědět  +1 14.7.2014 19:32
Nesnáším {}, proto se jim vyhýbám.
Avatar
PiskotPiskotovic
Redaktor
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
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  -1 14.7.2014 19:37
Nesnáším {}, proto se jim vyhýbám.
Avatar
Zdeněk Pavlátka
Tým ITnetwork
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
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  +1 14.7.2014 21:30
Nesnáším {}, proto se jim vyhýbám.
Avatar
Zdeněk Pavlátka
Tým ITnetwork
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
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  -3 14.7.2014 22:42
Nesnáším {}, proto se jim vyhýbám.
Avatar
qwertyW
Redaktor
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
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  +1 14.7.2014 22:59
Avatar
Zdeněk Pavlátka
Tým ITnetwork
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
Redaktor
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
Tým ITnetwork
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
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
Nesnáším {}, proto se jim vyhýbám.
Avatar
Zdeněk Pavlátka
Tým ITnetwork
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):18.7.2014 21:33

mohl bych vidět výtvor Ondrca ?

Nahoru Odpovědět 18.7.2014 21:33
Nesnáším {}, proto se jim vyhýbám.
Avatar
Ondrca
Redaktor
Avatar
Nahoru Odpovědět  +3 18.7.2014 22:00
Zase jsem o něco chytřejší
Avatar
PiskotPiskotovic
Redaktor
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
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
Nesnáším {}, proto se jim vyhýbám.
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.