Diskuze: Machr na JavaScript - Zkušenostní kruhy
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Martin Konečný (pavelco1998):28.1.2014 17:59
No jasný, ale ani žádný test ti nedokáže určit, jak opravdu dobře na
tom jsi. Nápad na machra je dle mě dobrý, jen mi to osobně trošku
postrádá smysl (navíc bych se nikdy nepřiznával, že umím jazyk třeba jen
na 20% 
).
Petr Nymsa:28.1.2014 20:56
Musím se k němu přiklonit. Podle mě tyhle ukazatele - umím C# na 80%,
umím HTML na 90% je blbost. Za 1. zákazníka či huntera zaměstnanců
zajímá především jedno - reference 
A je smutné když si člověk napíše do portfolia umím XYZ5
jazyků na 10-150% a v referencích má jednu aplikaci (já nejsem výjimkou,
ale aspoň nehodnotím sám sebe dle procent). Podle mě to hodnotit takto
nejde. Co je definice umět ? Zvládání syntaxe ? OOP ? Algoritmické
myšlení ? Nabiflovaný kompletně manuál ?
Za 2. životopis a celková prezentace sebe samotného. Netvrdím že stránku tyhle ukazatele neoživí, ale věty na porfóliech typu " Umím ASM, Umím windows phone, umím android" jsou nesmysl. Lze to napsat jinak a lépe, tj tak že řekneš jsem v tom dobrý ale nezní to tak kýčovitě. Navíc každý ty procenta může chápat úplně jinak.
To jenom mírný offtopic, více to rozvádět nebudeme
Honza Bittner:28.1.2014 21:05
Rozhodni si to sám, úkol je jasně zadaný. Vytvoř to co nejlépe
dokážeš. 
Honza Bittner:28.1.2014 21:08
Jasně, ale když se koukneš, tak to používá 70% portfolií. Podle mě to není špatné, když se ohodnotíš, ale bohužel většina lidí si dává třeba 90% C# a je jim 14let ... Pravda, že to hodně lidí přehání.
Ale je to off-topic, kdyžtak už jen přímo k soutěži prosím. Toto nemá smysl řešit.
Honza Bittner:29.1.2014 13:39
Ony se tyto kruhy dělají animované, je rok 2014, ne 2000...
Takže se načítají, mají i hover, onclick, při tažení atd.
Generovat obrázky je tedy docela na nic, pokud se chceš držet s módou,
kdy statika moc nestačí
1Pupik1989:29.1.2014 13:48
Animaci klidně udělám z těch obrázků. Nebudu je generovat na serveru,
prostě jich budu mít 100 a půjde to všem. Když ale někdo bude mít
vypnutý javascript nebo bude bez Canvasu, tak přijde jen o tu animaci a ne o
celé kruhy. Je mi jedno jaký je rok, já koukám na podíl prohlížečů. Je
pravda, proč to neudělat rovnou ve WebGL? To je taky IN a umí ho alespoň 18%
prohlížečů.
Hover udělám v CSS a místo onclicku je přesměruji na stránku kam chci.
Ještě že je v HTML tag A.
Opravdu se mi nechce kreslit kulatý "progress bar", takže sem mrsknu jen kód PHP.
<?php
function getCircleProgress($skill){
$skill = (int) $skill;
$path = 'images/'.$skill.'.png';
if(!File_Exists($path)){ return 'Zkušenosti: '.$skill; }
return '<img src="'.$path.'" alt="Zkušenosti '.$skill.'%" alt="Zkušenosti '.$skill.'%">';
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
<?php echo getCircleProgress(30); ?>
</div>
</body>
</html>Teda pokud jsem to blbě nepochopil a neměl se předvést ve WebGL, ale to
by takový problém taky nebyl.
1Pupik1989:29.1.2014 15:30
Ne, psal jsem že je blbost to psát v javascriptu. Že v javascriptu bych
napsal maximálně jen tu animaci. A canvas bych k tomu nepoužil, ani GD v PHP.
Nicméně to tedy zkusím i v JS, aby se neřeklo.
1Pupik1989:29.1.2014 15:55
A to je pro mě špatně. Já jsem asi stará škola (ve 24 letech docela
smutné).
Jo tak to mám udělat i blbu vzdorný. Dělám si srandu, ale tohle
ošetřím a dodělám dokumentaci. Škoda že JS nemá typehinting. 
Nestihnu to ale dříve jak zítra, teď už jsem na pivku.
Filipe, moc pěkný
S canvasem nejsem moc kamarád, takže mi to jde trochu pomalu, ale naučit se
to musím a spřátelit s ním se taky musím
Zatím jsem došel k základu. http://jsfiddle.net/…204/sL5cQ/3/
Honza Bittner:29.1.2014 20:46
Nemusíš dělat přesně jako to je v ukázce
Ve výsledku to nemusí být ani kruh... Udělej to tak jak ti to příjde cool
1Pupik1989:29.1.2014 22:35
Já tedy myslel taky že to musí být kruh, koneckonců to pravil název
topicu. To schválně
zkusim objektově a udělat ty animace jako objekty.
Tak taky jsem to zkusil
http://leteckaposta.cz/487148310
Přímo v tom js/expcircle.js je pár volitelných věcí, které můžete a nemusíte upravovat.
U HTML tagu stačí uvést atribut data-procent, který určuje počet procent a také data-text, což je ten text, který se zobrazí u těch procent.
Volitelný atribut je data-color, který určuje barvu té linky. Pokud se neuvede, tak se to nastaví automaticky na modrou linku.
Snažil jsem se to udělat pomocí tříd a ne pomocí id, aby těch "Zkušenostních kruhů" mohlo být na stránce více.
Tady je podoba těch kruhů: http://vojtamaniak.fakaheda.eu/MachrJS/
Ahoj, tak zde přidávám svůj výtvor, originalitu do designu jsem sice nevnukl, ale za to jsem se hodně trhl od zkušenostních krhů. Moje kruhy jsou celkem stejné jako ty vaše, ale to je jenom zdání. Umožňují nastavit, startovní úhel, barvu proužku, pozadí, písmo (čili můžete použít i obrázkové písma), zdali mají být kruhy animované a samozřejmě taky popisek. Ten jsem navrhl tak, že si ho definujete celý vy, stanovíte si přesný formát. \n značí nový řádek a %%% bude nahrazeno procenty.
Tyto kruhy mohou být realtime updatované, v JS prostě změníte attribut data-procenta a kruhy změní procenta.
V příkladech máte několik ukázek, na těch jdou nejlépe vidět features, ta poslední (realitme update) bohužel nefunguje v Google Chrome (to je paradox, že?), ale Mozzila a IE ji zvládají perfektně.
Použití se tedy meze nekladou, tím že to zvládá IE, je můžete používat v Modern UI aplikacích i Windows Phone aplikacích.
online: http://misaz.moxo.cz/…/machr145js/
Download: http://misaz.moxo.cz/…gressbar.zip
Zdeněk Pavlátka, protože se tímto nejde zavděčit všem, někdo to chce
rychlejší, někdo pomalejší, tak se to dá v tom js/expcircle.js změnit
Honza Bittner, v jednoduchosti je krása, ne?
Zobrazeno 50 zpráv z 77.
