NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:9.2.2015 17:33

Ahoj! Po dlouhé době si zase dáme jednoho Machra, tentokrát bude na webdesign.

Vaším úkolem bude pomocí HTML & CSS (Javascript i jQuery je povoleno, ale není vyžadováno) vytvořit zajímavý seznam referencí pro webového programátora (jméno si můžete vymyslet).

Ideální seznam by byl takový, který by si poradil i s větším počtem referencí (třeba 10 a více). Pokud budete dělat v Javascriptu, můžete přidat podporu filtrování - např. kódování šablony, redakční systém, drobné úpravy a podobné. (není to podmínka, jen takový tip :) )

Opět se snažte aby byl kód rozumný a validní.
Čas si dáme do neděle, 15.2. 17:30

Pravidla soutěže http://www.itnetwork.cz/…outezi-machr
Za porušení pravidel budu strhávat body. Řešení odevzdávejte buď sem do komentářů nebo mně do PM.

Editováno
Odpovědět
9.2.2015 17:33
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:9.2.2015 17:35

Tak se mi zdá, že zapomínání obrázku je už tradice :D

Nahoru Odpovědět
9.2.2015 17:35
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:9.2.2015 22:16

Hmm, už to to je přes 4 hodiny a pořád žádnej dotaz .. Doufám, že nedopadnu jako <a href="http://­www.itnetwork­.cz/html-css/diskuzni-forum-html-a-css-webtvorba/machr-na-webdesign---responzivni-lightbox-5456144402c5b­">minulej machr</a> :D

EDIT: Snad ne, pořád mám +6 :D

Editováno
Nahoru Odpovědět
9.2.2015 22:16
Neaktivní uživatelský účet
Avatar
Patrik Smělý
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Patrik Smělý:10.2.2015 21:37

:D zapojím se :)

 
Nahoru Odpovědět
10.2.2015 21:37
Avatar
Tomáš Maňhal
Člen
Avatar
Odpovídá na Neaktivní uživatel
Tomáš Maňhal:11.2.2015 15:25

Také se zapojím. Bude to můj první machr, tak snad si neudělám ostudu :-D

 
Nahoru Odpovědět
11.2.2015 15:25
Avatar
Ondrca
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Ondrca:11.2.2015 21:38

Chtěl bych se také zapojit, ale můžete sem dát prosím nějakou ukázku jak to můžu vypadat, abych věděl jestli to dobře chápu? :D

Nahoru Odpovědět
11.2.2015 21:38
Zase jsem o něco chytřejší
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Neaktivní uživatel:11.2.2015 21:52

Koukám že zase lidi mínusují :D Naposledy co jsem se koukal tam bylo 13-15, teď 10 :D

Kdybych neměl práci s podrbaným WP, tak bych se taky zapojil :(

Nahoru Odpovědět
11.2.2015 21:52
Neaktivní uživatelský účet
Avatar
Tomáš Maňhal
Člen
Avatar
Odpovídá na Ondrca
Tomáš Maňhal:11.2.2015 22:24

Třeba takhle

http://machr.tomasmanhal.cz/portfolio.html

 
Nahoru Odpovědět
11.2.2015 22:24
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Tomáš Maňhal
Neaktivní uživatel:11.2.2015 22:53

Ano, přesně takhle :-)

Nahoru Odpovědět
11.2.2015 22:53
Neaktivní uživatelský účet
Avatar
sahlepik
Člen
Avatar
Odpovídá na Tomáš Maňhal
sahlepik:12.2.2015 0:34

Moc pěkně udělané portfolio. :)

 
Nahoru Odpovědět
12.2.2015 0:34
Avatar
Patrik Smělý
Tvůrce
Avatar
Patrik Smělý:14.2.2015 20:15

Původně jsem se chtěl zapojit, ale nějak mi na to nezbyl čas :D :/.

 
Nahoru Odpovědět
14.2.2015 20:15
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Tomáš Maňhal
Neaktivní uživatel:14.2.2015 20:20

Jen připomenu, že jestli se chceš zapojit tak to zazipuj a někam to hoď.

Nahoru Odpovědět
14.2.2015 20:20
Neaktivní uživatelský účet
Avatar
Tomáš Maňhal
Člen
Avatar
Odpovídá na Neaktivní uživatel
Tomáš Maňhal:14.2.2015 20:23

Ještě sem se k tomu nedostal, dneska jsem celej den řešil aktualizace dat u stávajících klientů a návrhy vzhledu pro další dva klienty.

Můžu zazipovat to ukázkové řešení, které tu padlo. ale to mi přijde trochu nefér vůči těm, co píšou portfolio od píky úplně.

 
Nahoru Odpovědět
14.2.2015 20:23
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Tomáš Maňhal
Neaktivní uživatel:14.2.2015 20:25

Zatím jsi jediný, kdo se přihlásil ;)

Nahoru Odpovědět
14.2.2015 20:25
Neaktivní uživatelský účet
Avatar
Tomáš Maňhal
Člen
Avatar
Odpovídá na Neaktivní uživatel
Tomáš Maňhal:14.2.2015 21:06

Aha :-D Do půlnoci je ještě čas :-)

 
Nahoru Odpovědět
14.2.2015 21:06
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Tomáš Maňhal
Neaktivní uživatel:14.2.2015 21:06

Proč do půlnoci ? :)

Nahoru Odpovědět
14.2.2015 21:06
Neaktivní uživatelský účet
Avatar
Matúš Petrofčík
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Matúš Petrofčík:14.2.2015 21:15

Pretože v nedeľu sa nepracuje? :D :D to len taký tip

Nahoru Odpovědět
14.2.2015 21:15
obsah kocky = r^2 ... a preto vlak drnká
Avatar
Tomáš Maňhal
Člen
Avatar
Odpovídá na Neaktivní uživatel
Tomáš Maňhal:14.2.2015 21:20

Předpokládal jsem, že když je termín v neděli, tak už to musí být v neděli o půlnoci hotové :-D Jinak já dělám i o svátcích a o víkendech :-D

 
Nahoru Odpovědět
14.2.2015 21:20
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Tomáš Maňhal
Neaktivní uživatel:14.2.2015 22:10

Psal jsem do 17:30 :D

Nahoru Odpovědět
14.2.2015 22:10
Neaktivní uživatelský účet
Avatar
Tomáš Maňhal
Člen
Avatar
Odpovídá na Neaktivní uživatel
Tomáš Maňhal:14.2.2015 22:11

Ahá :-D Tak dobře :-D

 
Nahoru Odpovědět
14.2.2015 22:11
Avatar
Tomáš Maňhal
Člen
Avatar
Tomáš Maňhal:15.2.2015 10:01

Provedeny úpravy v kódu, opravena validita, otestováno ve všech velkých prohlížečích (Opera, Firefox, Explorer, Chrome), pročištění a zmenšení výsledné velikosti na polovinu :-) Aby se neřeklo, že s tím nebyla žádná páce :-D

A doufám, že nejsem jediný, kdo odevzdá :-)

http://machr.tomasmanhal.cz/tomasmanhal.zip

Editováno
 
Nahoru Odpovědět
15.2.2015 10:01
Avatar
Michael Škrášek
Tvůrce
Avatar
Michael Škrášek:15.2.2015 11:17

Tak já se přidám, něco jsem spráskal, v js moc neumím = kód hrůzostrašný. :D
http://leteckaposta.cz/250011747

Nahoru Odpovědět
15.2.2015 11:17
"I choose a lazy person to do a hard job. Because that person will find an easy way to do it. " Bill Gates
Avatar
Tomáš Maňhal
Člen
Avatar
Tomáš Maňhal:15.2.2015 11:20

Pro úplnost taky házím na leteckou, kdyby náhodou byl problém se stažením z mého hostingu :-)

http://leteckaposta.cz/437914046

 
Nahoru Odpovědět
15.2.2015 11:20
Avatar
Michael Škrášek
Tvůrce
Avatar
Michael Škrášek:15.2.2015 11:56

musel jsem ještě jednu věc upravit, nová verze
http://leteckaposta.cz/996140222

Nahoru Odpovědět
15.2.2015 11:56
"I choose a lazy person to do a hard job. Because that person will find an easy way to do it. " Bill Gates
Avatar
David Dostal
Tvůrce
Avatar
David Dostal:15.2.2015 12:03

Ahoj, zatím mám jenom základní funkčnost, kód je příšerný. Ale dávám to sem i tak pro případ, že bych to nestihnul.
Online: https://dl.dropboxusercontent.com/…e/index.html
Zip: https://dl.dropboxusercontent.com/…20Dostal.zip

Editováno
 
Nahoru Odpovědět
15.2.2015 12:03
Avatar
Matyáš Procházka
Člen
Avatar
Matyáš Procházka:15.2.2015 13:09

Také se přidávám:
Online: http://matyasprochazka.czechmag.cz/…r-reference/
Zip: http://leteckaposta.cz/356418084

 
Nahoru Odpovědět
15.2.2015 13:09
Avatar
Matyáš Procházka
Člen
Avatar
Matyáš Procházka:15.2.2015 13:13

//Edit
Nová verze zipu: http://leteckaposta.cz/224521352

 
Nahoru Odpovědět
15.2.2015 13:13
Avatar
Michael Škrášek
Tvůrce
Avatar
Michael Škrášek:15.2.2015 13:34

http://leteckaposta.cz/223528575
Tak to bude asi poslední verze, snad jsem to trochu vylepšil :D

Nahoru Odpovědět
15.2.2015 13:34
"I choose a lazy person to do a hard job. Because that person will find an easy way to do it. " Bill Gates
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:15.2.2015 16:23

Poslední hodinka :)

Nahoru Odpovědět
15.2.2015 16:23
Neaktivní uživatelský účet
Avatar
Michael Škrášek
Tvůrce
Avatar
Michael Škrášek:15.2.2015 16:56

Přijde mně trochu trapné, že jsem jediný, kdo stále aktualizuje nový soubor :D, tohle je už snad poslední verze

http://leteckaposta.cz/715350986

Nahoru Odpovědět
15.2.2015 16:56
"I choose a lazy person to do a hard job. Because that person will find an easy way to do it. " Bill Gates
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:15.2.2015 18:24

Michael Škrášek
Kód je nevalidní. Používáš "DOCTYPE html5" ... žádný takový neznám. Když už, tak je to "DOCTYPE html". Ale i kdyby jsi používal HTML5, používáš starý zápis charsetu.
Na hlavičku používáš tabulku, která ti celkově kazí "responzivitu". U referencí není prostor pro nějaký delší popis,
možná by bylo fajn udělat tam nějaký okýnko. Navíc nefunguje v IE11. Jinak zkus kouknout na jQuery, ušetří ti to hrozně moc práce, třeba i s animacema.

Matyáš Procházka
Funkčnost je perfektní, možná trochu doladit design, ale jinak super. Je fajn, že si to umí poradit i s větším počtem referencí, i jejich výpis je jednoduchý a nezabírá příliš místa.
Na používání HTML5 tagů bych dával pozor, hází ti to tam celkem dost warningů.

David Dostal
Jednoduché, bez použití JavaScriptu, pěkné. Stejně jako Michal - mohl jsi tam přidat nějaký prostor pro delší popis reference.
Reference navíc zabírá celkem dost místa, takže by to mělo probém s větším počtem referencí. Také by se hodilo vytvořit nějakou jednoduchou stránku, aby ty reference zapadly do designu.

Tomáš Maňhal
Jo, super :-). Líbí se mi to filtrování i ty efekty okolo. Také se mi líbí že sis navrhl stránku kolem, aby to zapadalo do designu.
Na druhou stranu, opět je tu málo místa na popis projektu. Mohl jsi místo přiblížení slona přidat nějaký detail a třeba odkaz na cílový web.

Radil jsem se ještě s Jan Lupčík a shodli jsme se na tom, že si placku zaslouží Tomáš Maňhal a Matyáš Procházka.

Jen tak BTW. chtěl jsem být zlý porotce a nasadit na vás IE6 ale nakonec jsem si to rozmyslel :D

Gratuluji vítězům a prosím o adresu do PMka :-)

Akceptované řešení
+5 Zkušeností
Řešení problému
Nahoru Odpovědět
15.2.2015 18:24
Neaktivní uživatelský účet
Avatar
Tomáš Maňhal
Člen
Avatar
Odpovídá na Neaktivní uživatel
Tomáš Maňhal:15.2.2015 18:31

Děkuju :-) Můj první machr, vážím si toho a gratuluju Matyáš Procházka :-) Samozřejmě také ostatním zúčastněným ;-) Snad se v budoucnu uvidíme na dalších machrech a hecneme se společně k lepším výkonům ;-)

Editováno
 
Nahoru Odpovědět
15.2.2015 18:31
Avatar
Matyáš Procházka
Člen
Avatar
Odpovídá na Neaktivní uživatel
Matyáš Procházka:15.2.2015 18:38

Taktéž děkuju a blahopřeji Tomáš Maňhal,
na warningy se zrovna koukám, všechny jsou kvůli tomu, že v elementech section a article nemám žádný nadpis 2-6 třídy. Popravdě já je strašně nerad používám, radši si nadefinuju svůj pomocí třídy, ale třeba na ně někdy přejdu :D
Zas někdy příště ;)

 
Nahoru Odpovědět
15.2.2015 18:38
Avatar
Michael Škrášek
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Michael Škrášek:15.2.2015 18:43

Gratuluji vítězům, s tím doctype ..., nevím proč, ale mám to v šabloně, a vždycky to zapomenu smazat :D

Nahoru Odpovědět
15.2.2015 18:43
"I choose a lazy person to do a hard job. Because that person will find an easy way to do it. " Bill Gates
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Jan Lupčík:15.2.2015 19:12

Proč jsi nepoužil ten IE 6? Jsem ti psal, že jó :D

Jinak všem gratuluji, všem se to povedlo. :)

Nahoru Odpovědět
15.2.2015 19:12
TruckersMP vývojář
Avatar
Tomáš Maňhal
Člen
Avatar
Odpovídá na Jan Lupčík
Tomáš Maňhal:15.2.2015 19:24

IE6 je nějakej novej způsob kyberšikany? :-D

 
Nahoru Odpovědět
15.2.2015 19:24
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:21.2.2015 9:12

Taky jsem měl dělat něco na toto téma na okresní olympiádě z webů...

Měl jsem na to 2 hodinky a hodně času jsem spíš hledal chyby proč mi nejde jQuery a samozřejmě v selektorech jsem neměl ".trida" ale jen "trida"... :D Dalším žroutem času bylo hledání obrázků. Ale myslím že se mi to docela povedlo. Mám tam aj statické překládání (dostupné vlevo dole)... :)

http://olymp.honzabittner.cz/

Tak se jen můžete mrknou na další způsob zpracování tohoto tématu... :)

Nahoru Odpovědět
21.2.2015 9:12
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Honza Bittner
Neaktivní uživatel:21.2.2015 12:41

Pěkný :)

Nahoru Odpovědět
21.2.2015 12:41
Neaktivní uživatelský účet
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 38 zpráv z 38.