NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

Soutěž: Machr na PHP - Vlastní WYSIWYM

Soutěž již skončila

Zadání

Jistě jste si všimli že zde máme nový systém na Machry. Rád bych Vás tedy přivítal u "první" soutěže Machr - Machr na PHP. Dotazy ohledně systému bych prosil ke mně do PM :-).

Nyní přejděme k zadání - půjde o script zpracovávající data z Vašeho vlastního WYSIWYM editoru (stačí textarea). Značky a způsob označování textu nechám na Vás. A aby to nebylo tak jednoduché, budu po Vás chtít zpracovat následující značky:

h1, h2, strong, em, p, ul, a href, img src

Představte si takovýto vstup:

Nadpis1
#######

Odstavec
další řádek odstavce se neodřádkuje.

**Tučné** písmo a *kurzíva*

Nadpis 2
========

- položka seznamu1
- položka seznamu2

"http://www.itnetwork.cz":itnetwork

[* obrazek.png .(Obrázek) *]

Ten se přeloží na tento výstup:

<h1>Nadpis1</h1>
<p>Odstavec
další řádek odstavce se neodřádkuje.</p>

<p><strong>Tučné písmo</strong> a <em>kurzíva</em></p>

<h2>Nadpis2</h2>
<ul>
<li>položka seznamu1
<li>položka seznamu2
</ul>

<p><a href="http://www.itnetwork.cz">itnetwork</a></p>

<p><img src="obrazek.png" alt="obrázek"></p>

Za další značky budou bonusové body.
Bonusové body budou i za případný Javascript - nezapomeňte však, že tento Machr je na PHP, takže pokud uděláte JS 100% a PHP 10%, asi vám to moc nepomůže.

Dialogy na zadávání parametrů (např. odkaz, obrázek) můžete dělat pomocí JS, ale stačí i prázdná textarea a vypsat syntaxi značek někam pod.

Machra odevzdejte pomocí formuláře níže, pokud to bude možné, do poznámky vložte odkaz na online verzi.
Můžete se svým výtvorem pochlubit i v komentářích, ovšem POZOR - jako přihlášené řešení beru pouze to, které bude odeslané pomocí formuláře.

Výhra

Vítěz dostane placku Machr a ocenění do portfolia.

Výhra

Výsledky

Jméno bodů Řešení ( Stáhnout vše )
Michal Žůrek - misaz 90 Stáhnout řešení
adas 90 Stáhnout řešení
Jan Lupčík 75 Stáhnout řešení
dirtyjobs 40 Stáhnout řešení
Tukmak 0 Stáhnout řešení

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

Aktivity
Avatar
Odpovídá na dirtyjobs
Neaktivní uživatel:9.6.2015 11:56

Je to v zadání ..

Odpovědět
9.6.2015 11:56
Neaktivní uživatelský účet
Avatar
Odpovídá na dirtyjobs
Dominik Gavrecký:9.6.2015 12:04

S takýmto prístupom sa toho veľa nenaučíš ... ;)

Nahoru Odpovědět
9.6.2015 12:04
Hlupák nie je ten kto niečo nevie, hlupákom sa stávaš v momente keď sa na to bojíš opýtať.
Avatar
Adam Ježek
Tvůrce
Avatar
Adam Ježek:9.6.2015 15:53

Můžu u toho použít databázi (pokud dodam SQL na vytvoření)?

Nahoru Odpovědět
9.6.2015 15:53
Počkej chvíli, poradím se s křišťálovou koulí.
Avatar
Ondřej Štorc
Tvůrce
Avatar
Odpovídá na Adam Ježek
Ondřej Štorc:9.6.2015 15:55

Začínás brzo :D

Nahoru Odpovědět
9.6.2015 15:55
Život je příliš krátký na to, abychom bezpečně odebírali USB z počítače..
Avatar
Adam Ježek
Tvůrce
Avatar
Odpovídá na Ondřej Štorc
Adam Ježek:9.6.2015 15:59

Už něco mam, možná to ještě stihnu :D

Nahoru Odpovědět
9.6.2015 15:59
Počkej chvíli, poradím se s křišťálovou koulí.
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na Adam Ježek
Jan Lupčík:9.6.2015 16:00

Teď si přeji, aby ten čas rychleji utíkal ... tik tak. :D

Nahoru Odpovědět
9.6.2015 16:00
TruckersMP vývojář
Avatar
Odpovídá na Adam Ježek
Neaktivní uživatel:9.6.2015 16:15

Databáze je u tohoto úkolu zbytečná, máš převést klikyháky na HTML, ne dělat redakční systém ;)

Nahoru Odpovědět
9.6.2015 16:15
Neaktivní uživatelský účet
Avatar
Adam Ježek
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Adam Ježek:9.6.2015 16:16

tak ty serepetičky okolo navíc se porotě většinou líběj :` :D

Nahoru Odpovědět
9.6.2015 16:16
Počkej chvíli, poradím se s křišťálovou koulí.
Avatar
Odpovídá na Adam Ježek
Neaktivní uživatel:9.6.2015 17:24

To jo, ale tady bych měl jen práci navíc s vytvářením databáze ;)

Nahoru Odpovědět
9.6.2015 17:24
Neaktivní uživatelský účet
Avatar
Odpovídá na Dominik Gavrecký
Libor Šimo (libcosenior):9.6.2015 17:50

Nie som odbornik, ale na to ze zacina, to podla mna spravil pomerne slusne.

Nahoru Odpovědět
9.6.2015 17:50
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Michal Žůrek - misaz:9.6.2015 21:41

taky nevím proč to dirtyjobs kritizujete, kdo z Vás se může chlubit, že za týden od naučení HTML naprogramovat WYSIWYM?

To že nesplnil 100% zadání přece vůbec nevadí, o tom machři nejsou. Někdo splní 150%, někdo 80%. Vyhrát může i ten s 80% splněného zadání.

 
Nahoru Odpovědět
9.6.2015 21:41
Avatar
Neaktivní uživatel:10.6.2015 22:36

Díky všem za účast, zde jsou výsledky:

Tukmak - 0 bodů
Prý překlep, opustil soutěž.

Michal Žůrek - misaz - 90 bodů
Zajímavý návrh aplikace, chvilku mi trvalo než jsem se rozkoukal :-). U editoru jsem nikde nenašel žádnou dokumentaci a popis funkcí. Řádek ve vzoru "Tučné písmo a kurzíva" to nehází do odstavce ;)

Mimo hodnocení:
Ty tagy měly být STRONG a EM, ne B a I, příště čti pozorněj :-)

Jan Lupčík - 75 bodů
Přijde mi, že tam máš zmatek ve třídách a že tam jsou některý zbytečně. Editor občas vyhodí nějakou šílenost, jako například že obalí nadpis do odstavce. Také ti nefungují odkazy, pouze ty s http, což není moc dobré.

Mimo hodnocení:
Podtrhnutí jsem napřed pochopil jako U, až pak mi došlo že to je vodorovná čára (HR) :-)
V kódu nemíchej češtinu a angličtinu, ve větší aplikaci se budeš ztrácet
U textarea by asi mělo být vertical resize, ne horizontal ;-)

dirtyjobs - 40 bodů
Řešíš to tu docela zajímavě pomocí cyklů a strpos. Mělo by to být řešeno spíše přes regex. Narazil jsem na chybu ve výpisu odstavců, někde se vypíše, někde se nevypíše, někde se vypíše jen konec odstavce. Ve vzoru máš daný odkaz ve tvaru itnetwork.cz:it­network - předpokládám že by se tím za dvojtečkou měl nastavit titulek - ten se nenastaví. Označení nadpisů máš na pevno (když přidám další # tak se to rozpadne), ale syntaxe byla libovolná, takže to neberu jako "chybu". Také ti chybí několik věcí ze zadání.

Mimo hodnocení:
Javascript by se měl dávat také do externího souboru (stejně jako css se nepíše do STYLE). Když už jej máš z nějakého důvodu v HTML, určitě jej nedávej nad DOCTYPE.
Koukni se na HTML5, mícháš tu staré styly a CSS, na větší stránce by to bylo hodně nepřehledné.
Stejně jako Michal - místo STRONG a EM jsi použil B a I

adas - 90 bodů
Na první pohled se to nenápadně podobalo řešení od Michala, na ten druhý už ani moc ne :-)
Nadpis - není moc dobrý používat na začátku jeden znak, pak ti někdo může napsat 'nějaký text #nadpis'. Ty to tu máš ošetřené, ale en 'nějaký text' není v odstavci :D. Pokud řádek začíná nějakým "kódem" (např. tučný text), nevloží se do odstavce. Pokud je UL hned na začátku, vyhodí to z něj první položku. A hlavně .. IMG není párový tag! ;-)

Mimo hodnocení:
Máš tu nějaké složky css/js ve kterých nic není :)
Výstup editoru - pokud se správně dívám, vypisuješ to pod HTML (ve view máš celou HTML stránku a výstup editoru vypisuješ pod ni).

Placku tedy získává Michal Žůrek (misaz), sidecek123. Gratuluji :)

Akceptované řešení
+5 Zkušeností
Řešení problému
Nahoru Odpovědět
10.6.2015 22:36
Neaktivní uživatelský účet
Avatar
Adam Ježek
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Adam Ježek:10.6.2015 22:53

Jenom se zobrazováním těch výsledků na homepage - je to tam vypsaný jako normálně z diskuze, ale po kliknutí mě to místo sem na příspěvek hodí do kompletního seznamu soutěží. Příde mi, že by to tak nemělo být, když je to řešení soutěže/koment v diskuzi, tak by to mělo odkazovat na ono řešení/komentář, a né na seznam všech soutěží

Nahoru Odpovědět
10.6.2015 22:53
Počkej chvíli, poradím se s křišťálovou koulí.
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Adam Ježek
David Hartinger:10.6.2015 23:02

Close enough :`

Nahoru Odpovědět
10.6.2015 23:02
New kid back on the block with a R.I.P
Avatar
Adam Ježek
Tvůrce
Avatar
Odpovídá na David Hartinger
Adam Ježek:10.6.2015 23:04

Stále jedete na systém "dokud to nikomu nevadí, tak to neni chyba" ? :` :D

Nahoru Odpovědět
10.6.2015 23:04
Počkej chvíli, poradím se s křišťálovou koulí.
Avatar
Neaktivní uživatel:10.6.2015 23:09

Škoda že jsem si komenty dočetl až teď, jsem taky mohl odevzdat z části hotové řešení... Mám tak 70%

http://zdrojakoviste.suchweb.eu/machr-wysiwym/

Nahoru Odpovědět
10.6.2015 23:09
Neaktivní uživatelský účet
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Jan Lupčík:11.6.2015 15:17

Hele, ten nadpis dát do odstavce ... to se ti povedlo jak? :D Ať já tam dám kolik chci mezer před i za nadpis, kolik chci nadpisů ... nikdy mi to teda nehodí nadpis do odstavce.

Jinak gratuluji vítězům, určitě si to zasloužili. :)

Nahoru Odpovědět
11.6.2015 15:17
TruckersMP vývojář
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 17 zpráv z 67.