webrebel html css javascript laravel oop php mysql wordpress kurz

Ako vznikalo " Nauč sa písať "

napísal , 13 Jan 2012 [ thoughts / ideas Tutoriály ]

Nauč sa písať mal byť pôvodne projekt o niečo väčších rozmerov a plánoval som spolu s jeho uvedením začať sériu článkov, podrobne popisujúcich jeho tvorbu. Chcel som začať prvotnou myšlienkou a skončiť podrobným tutoriálom pre každú z použitých technológií. Medzitým by bola rozobraná "analýza" a "návrh" a videli by sme screenshoty vyvíjajúceho sa dizajnu s okomentovaním každej zmeny a tak vôbec. Prvý článok som písal už počas tvorby stránky, potom som sa na pár mesiacov zasekol, takmer som na celý "projekt" zabudol a neskôr som ho v mierne okresanej verzii predsa len spustil. Články sa mi už samozrejme písať nechcelo, tu je ale ten prvý, v neupravenej podobe. Možno si v ňom niečo nájdete...



Poznáte naucsapisat.brm.sk? Ani sa nedivím, je to mladý projekt. Bežte si ho ohmatať, pohrajte sa a keď sa vrátite, pozrieme sa na jeho vznik.

Nauč sa písať

"Cieľom nauč sa písať nie je smiať sa z preklepov či nevedomosti, cieľom je naučiť sa gramatiku na príkladoch."

 

Stránke "Nauč sa písať" dominuje veta, s ktorou niečo nie je v poriadku. Možno je v nej preklep, možno chýbajú čiarky atď. Chyba je vyznačená a následne opravená a oprava občas vysvetlená. Niektorí určite namietnu, že stránka je absolútne zbytočná, pretože neponúka poučky a definície. Ok, názor vám neberiem, ale nie je to môj štýl. Ja (sa) učím na príkladoch.

Návštevníkom je tiež prístupný kontaktný formulár, cez ktorý okrem sťažností možu požiadať o pridanie nového "preklepu". Tieto musia byť schválené adminom.

That's all, stačí pár chvíľ na stránke a malo by byť jasné, odkiaľ vietor fúka.

Nápad (najodolnejší parazit ;)

Pôvodná myšlienka ide paradoxne proti sloganu, ktorý figuruje v hlavičke stránky. Pôvodne som mal v pláne zapisovať si debilné preklepy, na ktoré narazím a spolu s internetom sa na nich rehotať. Neskôr prišiel nezávislý nápad zapisovať si všetky slová a frázy, ktoré mi robia problém a vymyslieť spôsob, akým si natĺcť do hlavy, ktoré "i" je v slove "zdvíhať".

Neraz sa pri písaní zastavím a bežím do Wordu alebo na Google, aby som si overil, či sa zo seba nechystám spraviť idiota. Jasné, zapisovanie ako také by možno pomohlo, ale prečo sa nepodeliť a nespraviť rovno stránku? Možno divný skok, u mňa však vcelku bežný úkaz. Stránka mi tiež dáva možnosť a motiváciu vymýšlať a vypúštať do sveta sprosté vety a spojenia.

Za týmito drobnými projektami nie je žiaden skrytý motív. Nechcem nimi dobyť svet a absolútne nerozmýšľam ako businessman. Nerozmýšľam nad tým, či už niečo podobné neexistuje, nerozmýšľam nad tým, či to už niekto nespravil a či to nespravil lepšie. A nesnažím sa to ani zistiť. Chcelo by sa mi pokračovať, keby viem, že to už existuje a je to lepšie ako čokoľvek, čo by som ja kedy dokázal spraviť? Sotva. Akurát by ma prepadol pocit menejcennosti a namiesto stránky by som išiel plakať do kúta.

Nerozmýšľam nad tým, či to má zmysel. To človek tak či tak zistí až keď to vyskúša.

Možno nie ideálny prístup, ak by ma toto malo živiť. Je to však bočný projekt a čo z neho bude, sa uvidí. Dopredu ma ženie prostý pocit, že práve toto je to, čo chcem v tejto chvíli robiť. Plus každý nový projekt dáva možnosť zlepšiť sa vo veciach, ktoré ovládam, prípadne vyskúšať veci nové. Ako napríklad CSS grid v tomto prípade.

A tiež som chcel zbúchať a ideálne aj niekde použiť to jQuery scrollovanie medzi stranami:)

Analýza a návrh

Ok, výsledok sme už videli, takto vyzerá kompletná analýza a návrh:

tu si predstavte zdrap papiera, na ktorom je načmárané logo, 1 veta v strede a 2 šípky po bokoch
zdrap sa žiaľ nezachoval

Yup. To je celé. Z tohto hneď do HTML, po dokončení dizajnu šup do PHP. Kde sú klasické kroky návrhu? Use Cases? Photoshop? Wirefram.. whoa, robíte si srandu? Na toto? :) Photoshop je jediný návrh, ktorý neni komplet pritiahnutý za vlasy, ale... o tom potom.

Uznávam, toto je trochu extrémny prípad. Je to z mojej hlavy a robím na tom sám, preto stačí tento veľmi hrubý náčrt. Jeho jedinou úlohou bolo približne otestovať spôsobilosť layoutu, ostatné veci sa poriešia pri implementácií. Ak by som bol len "idea man" a pracoval s dizajnérom a developerom, vyzeralo by to inak.

  • Náčrt by bol ždibec detailnejší.
  • V odrážkach by som spísal funckionalitu. Stručne.
  • Všetko by sa prediskutovalo.

Zanalyzované. Viac netreba. Dole pod čiarou si môžete prečitať môj prevažne školou vyvolaná rant na tému návrhov a analýz.

Ako na to

V článku sa chcem ďalej zamerať na myšlienkové pochody, ktoré stáli nie za nápadom, ale za samotnou realizáciou. Nabudúce prestaneme mudrovať a začneme pracovať, či už na strane klienta (HTML, CSS, jQuery) alebo servera (PHP, MySQL). Yeah. Máte sa na čo tešiť, tak poďme na to ;)

Zvážte nasledovné 2 fakty:

  • Dizajn mám prakticky hotový a ani riadok PHP kódu.
  • Z ultra-hrubého náčrtu som skočil do HTML. Žiaden Photoshop.

Kopa z nasledovného Vám bude znieť povedome, ak sledujete z 37signals.

Prečo začať s dizajnom:

  • Je jednoduché vymyslieť a naprogramovať kopu features, je tažké ich zmysluplne zakomponovať do dizajnu. A je extrémne ľahké prestreliť.
  • Čím viac features, tým je život dizajnéra ťažší. Čím viac toho na stránku musí nalepiť, tým ohyzdnejšia je. Začat s dizajnom je dobrý spôsob, ako odfiltrovať zbytočné a nechať len to, s čím je spokojný.
  • Naopak ak mám všetko čo potrebujem na stránke, viem presne, čo musím naprogramovať.

Všetky body spája jedna vec - snaha udržať veci čo najjednoduchšie a vyhnúť sa tak feature creep.

V skutočnosti zvyčajne alternujem medzi dizajnom a kódom, ani u jedného dlho nevydržím. Keby som si však mohol vybrať, keby som nebol neustále frustrovaný svojimi dizajnérskymi (ne)kvalitami, začal by som vždy s dizajnom. Prečo skáčem? Napriek tomu, že dizajn je ďaleko viac než len povrchová úprava, skutočný život stránke dáva kód. Ja ju chcem vidieť žiť. Ak robím a robím a nič z toho, strácam záujem. To je ďalší dôvod, prečo neznášam dlhé a často zbytočné fázy návrhu.

Prečo nezačať s Photoshopom:

  • Rád robím niečo konkrétne, hmatateľné. Ak sa teda pri abstraktných veciach ako web dá hovoriť o hmatateľnosti. Náčrty, wireframes, photoshop.. všetko koncepty, ktoré naberajú váhu až po preklopení do HTML/CSS.
  • HTML zvádza k jednoduchosti, Photoshop k preháňaniu. V momente ako máte niečo vo Photoshope vás napadne milión efektov a vymožeností a srandičiek a chcete ich vyskúsať, pretože táto určite pomôže a bude to skvelé a veď je to celé tak jednoduché!
  • Ok. Mám návrh v PS a teraz ho musím vymýšlať spôsoby, ako z toho spraviť HTML. Možno som nakreslil niečo, kde to bude problematické.
  • Vynechanie Photoshopu nás núti plne využívať limitované schopnosti HTML a CSS. A to je často dobre, pretože v jednoduchosti je krása, či čo.

Netvrdím, že Photoshop je zlý. Netvrdím, že by som sa bez neho zaobišiel, pretože to nie je pravda. Často, hlavne ak sa jedná o niečo podobne jednoduché ako Nauč sa písať, doň vleziem až keď mám základnú kostru stránky hotovú. PS mi potom pomôže vyhrať sa s detailami ako sú obrázky, gradienty a podobne. Prípadne si v ňom môžem jednoducho posúvať elementy, skúšať ich prehadzovať na iné miesta.

Dôležité však je, že už presne viem, ktoré elementy budem prehadzovať. Stránka už existuje a to mi poskytuje užitočné limitácie. Ak by som rovno otvoril PS, s kompletne nezviazanými rukami riskujem, že sa na dlhé hodiny zaseknem. Spravím milión iterácií a vo výsledku nespravím nič.

Samozrejme to všetko záleží od projektu. Tu som sa bez neho zaobišiel. A samozrejme je možné, že by som pri hodinác v PS prišiel na oveľa krajší a lepší a úžasnejší výsledok. Fajn na tvorbe webu je, že ak sa také stane, môžem to kedykoľvek zmeniť a upraviť:) Pre začiatok však chceme vyjsť von s funčkným projektom aby sme vedeli, čo treba vyladiť a čo môže zostať.


Rýpavá poznámka pod čiarou: ja som jeden z tých neznesiteľných typov, ktorí v škole nadávali na Softvérové Inžinierstvo, pretože ma konštantne nútilo pýtať sa "Prečo?" a "Načo, pre krista pána?". Chápem, že podrobnejšia analýza má pri rozsiahlych projektoch význam. A viem, že tak extrémne ako na školách sa to v praxi neberie. Nemôžem sa však ubrániť dojmu, že táto ukrutná analýza každého možného aspektu a každej možnej situácie, pasuje samotných developerov do pozície robotov po lobotómii.

Ja programovanie považujem za kreatívnu činnosť, tamto vyzerá ako práca za bežiacim pásom. Lúštiť diagramy a riadok po riadku roboticky prepisovať čo mi analytici podhodili. Fuck. That.

Yep. Jeden z tých neznesiteľných typov, ktorí radšej pracujú na menším projektoch, v malých týmoch, kde jeden druhému verí a každý si dokáže samozrejmé veci domyslieť. Netreba mať každý jeden krok na papieri.

Týždne strávené analýzou sú týždne bez produktu. Za ten čas sa môže veľa zmeniť, navrhované riešenie už nemusí zodpovedať situácii na trhu a ide sa analyzovať znova.. okrem toho nech je analýza akokoľvek dôkladná, nie je možné vyhnúť sa chybám zmenám a úpravám. Tak prečo nezačať pracovať hneď? Chyby, zmeny a úpravy sa vyriešia postupne, keď na ne príde.

Toľko teda k tomu. Spomínané tutoriály sa možno v random poradí objavia v TurboTipe alebo tu alebo vôbec. Uvidíme.

napísal , 13 Jan 2012

9 komentárov

komentuj
  1. niekto [ Sobota 14.1.2012, 10:46 ]

    su v tom nejake mudrosti

  2. Erik [ Nedeľa 15.1.2012, 01:55 ]

    Zdravim ta yablko, plne s tebou suhlasim ohladom tej analyzy, keby som sa mal riadit tym, co nas ucili, ako si uz spomenul na SI-cku a pod., mal by som ohryzene nechty, vytrhane vlasy a plny kos pocmaranych zdrapov pri vacsine projektov.

    Niektore veci su jednoducho tak samozrejme a prirodzene, ze ich netreba pisat na papier a zabijat s tym cas. Je to potom, ako by si pred sexom zacal citat navrh na ultra poprdeli polohy...

    thumb up ;)

  3. xxxfucker [ Nedeľa 15.1.2012, 20:08 ]

    Co vás tam učili za analýzu proboha? Je třeba si ale uvědomit, že je rozdíl mezi tím, když děláš e-shop nebo nějakej jinej projekt, kterej zboucháš někde sám, a když pracuješ v týmu na nějaké korporátní aplikaci, která pracuje na všech úrovních (od zakládání produktů do systému skladníkama přes ERP až po BI) a zároveň má být interoperabilní s nějakým dalším systémem. Tam už to prostě bez analýzy nedáš. Respektive co ušetříš na analýze, to pak ztratíš na řešení neočekávaných situací (a když už nic, tak analýzu potřebuješ minimálně pro nějaký nacenění). Jasně, plánovat do nejmenších drobností je blbost a hádám, že to ani u vás ve škole nikdo netvrdil. Základem je dobře odhadnout míru.

  4. Erik [ Utorok 17.1.2012, 14:18 ]

    xxxfucker: Ahoj, samozrejme, ze som nehovoril o velkych projektoch na ktorych pracuje viac vyvojarov, zle som sa vyjadril, narazal som na podobne projekty ako spomina yablko vo svojom poste.

  5. xxxfucker [ Utorok 17.1.2012, 18:35 ]

    To samozřejmě. Ale jak říkám, nevím, co je tam učili. Nás taky učili hromadu "zbytečností". Důležité však bylo, že nám zároveň říkali - pro každej projekt si z tohoto vyberte co potřebujete. Ostatně nevím o žádné disciplíně řízení projektů, která by říkala "a teď musíte mít class diagramy, přes to prostě nejede vlak". Platí spíš - v tuto chvíli je rozumné použít tento balík technik. Každej si ale musí vybrat adekvátně k rozsahu projektu a hlavně to, co mu vyhovuje (tzn. klidně nic a mít nějaké vlastní nástroje).

  6. miro016 [ Štvrtok 19.1.2012, 15:15 ]

    myslim, ze ak to musi dosahovat ISO kvality tak analyzu potrebujes... tam vidim rozdiel v praci pre potesenie (napises co ta napadne, je to tvorive a zabavne) a v praci pre zamestnavatela, ktory to vyzaduje...

  7. 81403 (blade) [ Štvrtok 19.1.2012, 20:42 ]

    "ISO kvalita" znie pri aplikácií strašne. A ešte keď vyžaduje takéto papierovačky.. uf.. na čo je to dobré? Nie sú od posudzovania kvality používatelia?

  8. Tomas [ Piatok 20.1.2012, 22:40 ]

    precital som si len par riadkov a hned som vedel co bude dalej v clanku nasledovat. Ja to mam celkom podobne. Vzdy sa snazim nieco vymysliet, co by bolo zaujimave a uzitocne zaroven ale este sa mi to v zivote nepodarilo. Niekedy rozmyslam nad tym co by som mohol spravit aj niekolko hodin. Nic si nepisem na papiere ani si nekreslim vo fotoshope ci inom grafickom programe, nakolko to nema vyznam a viem, ze by som to aj tak nikdy tak nenaprogramoval. A teda hned zacnem pisat HTML a CSS a skusam, menim az dojdem k niecomu co sa mi paci a necham to tak.

    Cize tiez zacinam najskor dizajnom a az potom potom ked mam pripravene vsetko tak zacnem programovat featury. Clovek tak ma podla mna menej prace a vie presne co chce a kde sa to na stranku hodi umiestnit.

  9. ugg boots sale [ Streda 21.11.2012, 23:29 ]

    Never person might be worth your entire weeping, together with the one that is undoubtedly earned