Diskuze: Machr na webdesign

Zdeněk Pavlátka

Tvůrce

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.

Zdeněk Pavlátka

Tvůrce

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.

Zdeněk Pavlátka

Tvůrce

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.

albertpatera

Tvůrce

albertpatera:9.7.2014 21:11

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

//sorry, postnul jsem to pozdě

Editováno 9.7.2014 21:12

Nahoru Odpovědět

9.7.2014 21:11

pokusnicek

Člen

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

Michal Žůrek - misaz

Tvůrce

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

Michal Žůrek - misaz

Tvůrce

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

pokusnicek

Člen

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

Michal Žůrek - misaz

Tvůrce

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

Michal Žůrek - misaz

Tvůrce

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

Ondrca

Tvůrce

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

KlimiCZ

Člen

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

Honza Bittner

Tvůrce

Honza Bittner:12.7.2014 22:42

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

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.

Ondrca

Tvůrce

Ondrca:12.7.2014 22:45

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

Nahoru Odpovědět

12.7.2014 22:45

Zase jsem o něco chytřejší

Člen

:12.7.2014 22:58

Efekty můžou být v js?

Nahoru Odpovědět

12.7.2014 22:58

Honza Bittner

Tvůrce

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.

Zdeněk Pavlátka

Tvůrce

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.

Zdeněk Pavlátka

Tvůrce

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.

Michal Žůrek - misaz

Tvůrce

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

PiskotPiskotovic

Tvůrce

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.

PiskotPiskotovic

Tvůrce

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.

PiskotPiskotovic

Tvůrce

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.

Michal Žůrek - misaz

Tvůrce

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

PiskotPiskotovic

Tvůrce

PiskotPiskotovic:14.7.2014 19:25

To jsem se díval ... udělalo mi to čtvrtovál 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.

Michal Žůrek - misaz

Tvůrce

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

PiskotPiskotovic

Tvůrce

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.

Michal Žůrek - misaz

Tvůrce

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

Honza Bittner

Tvůrce

Honza Bittner:14.7.2014 19:31

HEj, to nestihnu, jedu na tábor.

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.

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:14.7.2014 19:32

Cituji uživatel Honza Bittner:

haha

Nahoru Odpovědět

14.7.2014 19:32

PiskotPiskotovic

Tvůrce

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.

Michal Žůrek - misaz

Tvůrce

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

Zdeněk Pavlátka

Tvůrce

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.

Michal Žůrek - misaz

Tvůrce

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

Zdeněk Pavlátka

Tvůrce

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.

Michal Žůrek - misaz

Tvůrce

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

qwertyW

Tvůrce

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.

Jakub Vaněk (Bubavanek)

Člen

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ě

Nahoru Odpovědět

14.7.2014 22:59

Zdeněk Pavlátka

Tvůrce

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.

Martin

Člen

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.

DHPICO

Tvůrce

DHPICO:18.7.2014 0:01

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

Nahoru Odpovědět

18.7.2014 0:01

Požehnáni budíš oráj

Zdeněk Pavlátka

Tvůrce

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.

Michal Žůrek - misaz

Tvůrce

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

Zdeněk Pavlátka

Tvůrce

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.

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:18.7.2014 21:33

mohl bych vidět výtvor Ondrca ?

Nahoru Odpovědět

18.7.2014 21:33

Ondrca

Tvůrce

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

PiskotPiskotovic

Tvůrce

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.

Michal Žůrek - misaz

Tvůrce

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

Diskuze: Machr na webdesign - CSS android