napísal yablko, 13 Jan 2012 [ ]

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:

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.